1、Android团队提供的示例项目

如果不是从学习Android SDK中提供的那些样例代码开始，可能没有更好的方法来掌握在Android这个框架上开发。由Android的核心开发团队提供了15个优秀的示例项目，包含了游戏、图像处理、时间显示、开始菜单快捷方式等。
地址：http://code.google.com/p/apps-for-android/

2、 Remote Droid

RemoteDroid是一个Android应用，能够让用户使用自己的无线网络使用无线键盘、触摸屏操作手机。这个项目为开发者提供了如网络连接、触摸屏手指运动等很好的样例。
地址：http://code.google.com/p/remotedroid/

3、 TorProxy和Shadow

TorProxy应用实现了Android手机无线电电传通讯(TOR)，和Shadow应用一起使用，可以使用手机匿名上网。从该项目源代码中，可以掌握socket连接、管理cookie等方法。
地址：http://www.cl.cam.ac.uk/research/dtg/code/svn/android-tor/

4、 Android SMSPopup

SMSPopup可以截获短信内容显示在一个泡泡形状的窗口中。从这个项目中可以掌握到如何使用内置的短信SMS接口。
地址：http://code.google.com/p/android-smspopup/

5、 Standup Timer

Standup Timer应用用于控制站立会议时间，类似秒表倒计时，可以提醒每个人的讲话时间已到，从而保证每个与会者使用时间一样。从该项目的代码中，可以学会如何使用时间函数。另外，这个项目的代码是采用视图view、模型model严格分离的设计思路。
地址：http://github.com/jwood/standup-timer

6、 Foursquare

是Foursquare.com的一个客户端应用，该应用主要分为两个模块：API(com.joelapenna.foursquare)和界面前端 (com.joelapenna.foursquared)两部分。从该项目代码中，可以学会如何同步、多线程、HTTP连接等技术。
地址：http://code.google.com/p/foursquared/

7、 Pedometer

Pedometer应用用于记录你每天走路步数的。尽管记录不一定精准，但是从这个项目中，可以学习几个不同的技术：加速器交互、语音更新、后台运行服务等。
地址：http://code.google.com/p/pedometer/

8、 OpenSudoku-android

OpenSudoku是一个简单的九宫格数独游戏。从代码中可以学习到如何在视图中显示表格数据，以及如何和一个网站交互等技术。
地址：http://code.google.com/p/opensudoku-android/

9、 ConnectBot

ConnectBot是Android平台的一个客户端安全壳应用。从该项目代码中，可以学习到很多Android安全方面的内容，这些是你在开发应用时经常需要考虑的安全问题。
地址：http://code.google.com/p/connectbot/

10、 WordPress的Android应用

当然在最后不能不提WordPress的Android应用了，这是WordPress官方开发团队提供的一个项目。从代码中可以学习到XMLRPC调用（当然还有更多的优秀内容）。
地址：http://android.svn.wordpress.org/trunk/

Related Posts / 相关文章

• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript

div {
   background: rgba(200, 54, 54, 0.5);
}

它允许我们为元素添加透明色。或许我们习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，而且很难去解决这个问题。

通过RGBa，我们可以将一个元素设置为透明，而不会影响其子元素：

声明一个保留颜色

并非所有的浏览器支持RGBa，所以如果允许的话，可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持。不声明就意味着，在不支持RGBa的浏览器里面，没有使用颜色。

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}</code>

不过，这条退路在某些古董级浏览器中依然无效。

RGBa的浏览器支持情况

对IE浏览器的更好的退路

因为IE浏览器支持条件注释，我们可以抛弃RGB并使用IE的一个私有CSS滤镜来实现同样的效果：

<!--[if IE]>
   <style type="text/css">
   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 
    </style>
<![endif]-->

RGBa颜色可以用于border，不过，不同的浏览器对于border的RGBa支持不太一样，不过唯一的不同是，FF在border的拐角处会出现叠加，比如透明度是0.4，那么在FF中，四个角的透明度会变成0.8，而支持RGBa的非FF浏览器不会出现这种情况。

转载：css-tricks

Related Posts / 相关文章

• HTML5新功能演示
• 用CSS修正一切：20多个常见Bug及其修正方法
• [转]CSS文字排版终极指南
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• 研究腾讯Qzone圆角头像CSS有感

今天在MacOS上安装了5.3版的PHP，结果是：对于Meeplace 2.8（调试环境）在一些页面下会警告错误。（产品级不会有警告）。查询后得知PHP5.3已经禁止了一些函数的使用，或者将其更名。在Meeplace 2.9中将兼容PHP 5.3。

官网上的说明：http://cn2.php.net/manual/en/migration53.deprecated.php

下面摘抄PHP5.3被禁止的函数

Deprecated functions:

• call_user_method() (use call_user_func() instead)
• call_user_method_array() (use call_user_func_array()instead)
• define_syslog_variables()
• dl()
• ereg() (use preg_match() instead)
• ereg_replace() (use preg_replace() instead)
• eregi() (use preg_match() with the ‘i’ modifier instead)
• eregi_replace() (use preg_replace() with the ‘i’ modifier instead)
• set_magic_quotes_runtime() and its alias,magic_quotes_runtime()
• session_register() (use the $_SESSION superglobal instead)
• session_unregister() (use the $_SESSION superglobal instead)
• session_is_registered() (use the $_SESSION superglobal instead)
• set_socket_blocking() (use stream_set_blocking() instead)
• split() (use preg_split() instead)
• spliti() (use preg_split() with the ‘i’ modifier instead)
• sql_regcase()
• mysql_db_query() (use mysql_select_db() andmysql_query() instead)
• mysql_escape_string() (use mysql_real_escape_string()instead)
• Passing locale category names as strings is now deprecated. Use the LC_* family of constants instead.
• The is_dst parameter to mktime(). Use the new timezone handling functions instead.

Related Posts / 相关文章

• Godaddy的No input file specified错误（php+fastcgi）
• syntax error, unexpected T_CONCAT_EQUAL
• PHP 变量的强制类型转换
• PHP 中 magic_quotes_gpc 和 magic_quotes_runtime 的区别，作用和用法
• PHP 5.2 之前的版本中使用 JSON

Other Posts / 其他文章

• 漏嘴空想 之一
• MeePlace 2.5 Released [Feb 4, 2010]
• 网站架构（页面静态化，图片服务器分离,负载均衡）方案全解析
• MeeClones 2.2 Released [Jan 10, 2010]
• PHP中的时区设置 PHP TimeZone

Chinese Notes:

接近两个月的更新工作，Meeplace 2.8将于明天正式发布啦！新版本将会亮相许多很闪光的功能，而且将原生支持中文哦！不过国内应该还是不能随便开这种可以随.意.言.论的网站吧，有兴趣的童鞋欢迎继续阅读。

English Notes:

After two months’ work, With a lot of cool features integrated, Meeplace 2.8 will be officially released tomorrow. If you are interested in this, please continue reading this article.

Now I will introduce some great features to you:

Feature 1: Multi-language Support

Now, Meeplace can automatically judge the language of the visitor’s browser. When you visit Meeplace for the first time, Meeplace will be displayed with the same language as your browser. Also you can click the language you want to switch, and Meeplace will leave a cookie in your browser. Next time you visit Meeplace, the language you set last time will be shown. And in the first release of multi-language, only English and Simplified Chinese added, because I only know these two languages. Also if you are interested in making a new language pack, you can follow the steps. And don’t forget to contribute your language pack to us if you like. Many thanks!

Make a Language Pack for Meeplace:
1. Go to /languages/
2. Create a folder, name it as the region name. like en-us. with all small letters.
3. Copy /languages/zh-cn/text.php as a sample file to the folder you create above.
4. Modify the variables in this file. First you should know English =D
5. Edit /languages/list.php  add two variables.. one is language text which will be shown on the Language Bar on header, another is a flag icon filename.
6. Create a flag icon picture to /theme/default/images/flags. Name it as the file name you leave in Step 5.

Feature 2: User Galleries

With a new AJAX user galleries, user can share their photos and set one as avatar.

Feature 3: Auto Generated Maps

Now Meeplace will auto-generate maps for each listing and also give you the option to verify the location is correct.
When you adding a business, after you typed in the business address or selected the city/states, a keyword list will show below the map, you can check the keywords you want to let Google Map search for the accurate position. Or you can also type in the keywords directly.
Also in admin panel, the Map Settings will allow you to locate your physical position with HTML5 technology (IE do not support HTML5).

Feature 4: Facebook Connect

Due to Facebook modified their developer API. Now I can’t get ‘Email’ field from Facebook. So after visitor log in Meeplace with FacebookConnect for the first time, Meeplace will guide visitor to complete the email address and optional nickname. With email address, visitors can enjoy fully with Meeplace. What fun? Read the following.

Feature 5: New Notification

Yes! Now, when you submit or claim a business, you will receive an email about the result when admin made a decision. Also admin will receive an email when users claim a business, submit a business, or submit an event.

Feature 6: Star Business Listings

Business will be able to have star listings. Star listings will appear higher then other listings on your site.
Aha! What ideas coming up? Make money? Maybe yes, you can custom the code to make Star Biz a special CSS or some more features.

It’s very late here, so I gotta sleep right now.
Excited with the new feature Meeplace 2.8 will bring to you? We will release the new version code tomorrow!
Btw, Bryan made a very cool official site, also bring to you tomorrow!

See a full list of What’s new:

May 22, 2010    MeePlace V2.8
1. New – Multi Language feature.
2. New – New Language Packs: English, Chinese Simplified
3. New – More business fields are available to edit by owner, including adjust map, delete photos.
4. New – A rating tips when writing a review or posting a business.
5. New – Business Photo list in admin panel.
6. New – Able to change business folder to another name from /business
7. New – Star Business: Allow business to be a special one. Which will differs the business from features.
8. New – AJAX User Gallery.
9. New – Auto Address to Map feature when adding a business.
10.New – Add “Find My Position” and “Address to Map” for default map settings in admin panel.
11.New – Add “Send Email Newsletter” and “Send PM Newsletter” in admin panel.
12. New – New notifications: ‘Business submit’ to admin,
13. New – New notifications: ‘Business approved’ to submitter,
14. New – New notifications: ‘Business claim’ to admin,
15. New – New notifications: ‘Result of business claim’ to requester.
16. New – New notifications: ‘Event submit’ to admin,
17. New – New notifications: ‘Event approved’ to submitter,
18. New – Allow editing of permalink in admin.
19. New – Allow claimed user to edit permalink.
20. New – New AD Position manage allow admin to add unlimited ad position.
21. New – FB connect users need to complete email and nickname after first login.
22. New – FB connect users can also set a nickname to hide the true name now.
23. New – Support grab video URL from YouTube video page URL when adding business.
24. Fix – Business Review pagination fixed.
25. Fix – Added NA option for price range when adding or editing business.
26. Fix – Be able to submit header login form when press Enter.
27. Fix – Review order fixed for the first page static reviews.
28. Fix – New rating rule for star picture adjusted.(Score more than 4.75 will be 5 stars)
29. Fix – Up to 100 items per page for Business List in admin panel.
30. Fix – Because of the adjustment of Facebook’s API , Facebook Connect script modified.
31. Fix – Remove the display of a person’s last name if they didn’t enter it in during sign up
32. Fix – Now allow ‘ in categories and cities name.
33. Fix – Fixed if event doesn’t have a end date, it displays itself in the Today section.
34. Fix – Fixed permalink bug when adding business.
35. Developer – Kernal functions like turn_date(), utf_substr() etc upgraded. Fully supported eastern languages, custom time format.
36. Developer – New kernal files re-coded to be OOP classes.

Related Posts / 相关文章

• [原创]多选/全选checkbox，AJAX提交。另附IE的onchange BUG
• Meeplace 2.6 Release [Feb 13, 2010]
• 今日新闻：MeePlace LLC在北美注册
• 我的近况与MeePlace 2.4说明
• Theme Upgrade Advice For MeePlace 2.4

博客更新，整理一下，把原来的“关于我”换成新做的简历，原来的内容就放到本文里，做个纪念吧。

下文写于：2009年3月22日

申力军(David Shen)

现就读于福建武夷学院

从小爱计算机，现在对WEB开发技术兴趣浓厚，依然在学习和提高自己。

My Memory & Footprints….

1997年

小学二年级时开始学习电脑。那时候最喜欢玩DOS下的BAT批处理文件。

觉得Windows 95的开机声音好好听！我到现在还记得！采样率不是很高的“咚~~咚~~  叮~叮叮叮叮…”好像是这么唱来着。

觉得Netscape比IE难用多了！

1998年

三年级时学习HTML，并用FrontPage做成自己第一个个人网站，起名叫《星空网》，（哇！这三个字写起来好温馨），为了给它起一个英文名，想了半天，最后把新浪网’sina’的’n'改成’c'，从此叫’sica’。学会套JS代码给页面“添彩”。

个人主页空间是网易提供的，网址是什么记不住了，好像是my.163.com/~sica。后来弄了个sica.my163.com的免费二级域名，好高兴。对了，那年用上了Windows 98。

xxxx年

时间记不得了，参加了一个小攒机店举办的一个小比赛，现场用《金山画王》做一幅卡通画，获了一等奖，奖品是在店里随便挑一张盗版光盘，现在想起来是有那么点幼稚，HOHO，不过蛮好玩的，拽贴图就像拽控件一样……

1999年

开始大面积摸索Visual Basic，ASP，Flash……（还有什么也想不起来了）。

好像是这一年开始看的《电脑爱好者》杂志，一看就看到了高中。后来更喜欢《微型计算机》

2000年

小学六年级有三件大事，第一件大事是，第一次参加市级计算机类的比赛，还记得是少年宫举办的<三明市“新天地杯”电脑小报设计大赛>获了市一等奖，从MS Word的小报设计中学到了很多布局的东西，可以说这次比赛对日后的设计审美观起了很大的作用。

第二件大事是，星空网出了第三个版本，用的是ASP，数据库是Access，实质上是一个文章管理系统。

第三件，这一年的暑假，我缠着妈妈买了第一台电脑，联想天禧6610，P3 733，15G硬盘，32M内存，15寸CRT，简直是高配！价值人民币10988元，感谢母亲为我下的血本 =）

2001年

上了初中，见了陈老师第一面，上了陈老师的第一节电脑课，老陈成了我真正的启蒙恩师。

这一年系统了学习了Flash，研究了Win32 API。我的第一个VB作品《星级云热键专家》进入福建省中小学电脑制作活动，获二等奖，这是人生中第一个省奖。

2002年

这一年是最自豪的一年。虽然我的第一个FLASH网站作品《家乡三明》未能在省里获奖，但陈老师大力支持的《星级云钢琴键盘》（后更名为《电脑钢琴键盘》）在省创新大赛中获三等奖，决赛是去莆田参加的。

后来我受余校长之聘，担任“数字校园”工作室的CEO。我和工作室的同学们一起创建了三明列东中学网站。这是本市第一个由学生独立创建、制作完成的校园网站，受到三明市科协和市教育局的好评和重视。

Yuzi的BBS 2000从PERL的版本做到了ASP版，我从教务处拷来了全校学生姓名学号的数据库，在论坛注册时加了实名认证。每个周末晚上，我们都会贴海报，请老师在线答疑，举办活动，那年真的好辉煌……

那时那台宝德服务器经常被不到300人的在线数访问挂掉。这也是后来我放弃ASP+Access编程的原因之一。

我用VB写了《星级云出神入画》，是工作室里的ZZ起的名字，她至今还常挂在嘴边，后来我把它开发成共享软件，做了双语版，改名Amazing Picture，随着功能不断扩张，最后变成了一个图形编辑套件，改名Magic Image Studio，在Softreg.com.cn（原来叫“网路”）里一卖就是六七年。同时在海外销售，最多的一次一个月赚了快400块钱。

2003年

这一年我初三了，面对着考进市重点二中的升学压力，我对电脑的学习研究进度也变得很缓慢。

第一个FLASH动画作品《云层移动机》获得了福建省中小学电脑制作活动一等奖。

这三年的计算机获奖让我在中考差二中线5分的情况下加了10分的附加分，顺利正取。

2004年 – 2005年

从2003年一直到了2006年的夏天，四年左右的计算机学习停滞让我错过了业内许多东西，当我考上大学之后，我才发现一切都变了！

2006年

我将我的Magic Image Studio图像处理套件软件换了个名字《小画家》，参加了福建省中小学电脑制作活动，很意外的，我作为福建省中小学电脑制作活动一等奖获得者、本省唯一入围全国决赛的高中组选手赴上海参加了中央电教馆举办的第七届全国中小学电脑制作活动，通过机试和答辩，获得该组全国第4名（二等奖）的好成绩，因此也获得了2007年高考保送资格以及高考20分的加分照顾。那年冬天，我的母亲病重住院手术，在全国保送生申报时我未向任何高校递送个人资料，失去了申请保送的机会。

2007年

6月高考，因理综发挥失常，未能取得我应有的成绩。提前批第一志愿，一所新建二本，福建省武夷学院，录取计算机科学与技术专业。开始了大学生涯。

那年的暑假做了两个小项目：为澳洲一慈善机构做了一个静态网站；用VB为本地一个医药公司开发了一个药检单管理与打印软件。

带着ASP的基础开始学习PHP

2008年

自荐加入了校网络中心，重新学习了XHTML+CSS构页，Javascript，AJAX，PHP做了几个项目，开始学习MVC架构，学习Linux，还有很多很多要学……

一步一个脚印，从头开始

申力军

2009年3月22日 于 福建省武夷山市

Update:  May 19, 2010

大学时光过得真快。在这三年里，我还是有一点小成绩的，嘿嘿

2008至今：Meeplace – 类似“口碑网”的大众评论CMS （收费商业脚本）

2009：PHP Licenser – 用于PHP产品的许可证管理系统，成功用于Meeplace至今

2009：CutHTML – 在线PSD转HTML/CSS服务（工作繁忙已暂停）

Other Posts / 其他文章

• 完美兼容IE6，摆脱table用CSS实现图片垂直居中
• [转]PHP网站开发方案（开发新人必读）
• 为网页开发者准备的13个Google Chrome浏览器扩展
• Base64 javascript encode decode
• [原创]多选/全选checkbox，AJAX提交。另附IE的onchange BUG

这是一个HTML5新功能的演示文档，几乎包括HTML5所有激动人心的新功能的简介和DEMO。
IE系列浏览器无法浏览，firefox、opera等浏览器只能使用部分功能，如果想100%演示成功，请使用最新版的“谷歌浏览器（Google Chrome）”，建议使用最新版。

中文原版：http://directguo.com/html5/
中文镜像：http://ioio.name/html5/html5_zh_CN.html
英文原版：http://apirocks.com/html5/html5.html
英文镜像：http://ioio.name/html5/html5.html

Related Posts / 相关文章

• 揭秘HTML5和CSS3
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• 转牛X无敌！！！Zen Coding: 一种快速编写HTML/CSS代码的方法
• 关于一些浏览器的的Hack
• CSS中的RGBa色彩

There are many code examples for iPhone development, most of the examples found in books or on blogs are incomplete and only designed to illustrate a specific point.  The difference with the open source iphone apps shown on this page is that they are all available in the app store so you can see what other developers are really doing.

– Update March 7 – reMail and RobotFindsKitten added

The Apps

Here they are listed in alphabetical order (name linked to app homepage when possible):

1. ABC 123 – Sequence memorization game. Utilizes Cocos2D. (itunes link) (source code)

2. Colloquy – Conversion of the most popular Mac IRC client to the iPhone.(itunes link) (source code)

3. Diceshaker - Dice rolling simulator designed for role-playing game enthusiasts. (itunes link) (source code)

4. Doom Classic - Classic 3D first person shooter. (itunes link) (source code) (build instructions)

5. Freshbooks – App that enables usage of Freshbooks web invoicing software from your iPhone. (itunes link) (source code)

6. Gorillas – Classic Worms/iShoot turn based shooter type game converted to iPhone from basic. Utilizes Cocos2D. (itunes link) (source code)

7. Last.fm – Software that enables usage of the Last.fm platform for personal radio stations. (itunes link) (source code)

8. Mobilesynth - A monophonic synthesizer designed for live performance.(itunes link) (source code)

9. Molecules – Allows you to view 3D models of molecules and manipulate them through touch. (itunes link) (source code)

10. Mover – Allows you to transfer stuff from one iPhone to another by “flicking” it to the other device. (itunes link) (source code)

11. Natsulion - A basic twitter client converted from mac. (itunes link) (source code)

12. NowPlaying – Allows you to check local theater listings, and check rotten tomato ratings. (itunes link) (source code)

13. Packlog – Backpack journal client. (itunes link) (source code)

14. PocketFlix – Find movies, and manage your Netflix information. (itunes link) (source code)

14. reMail – E-mail client featuring ultra-fast search.  Removed from app store, but source made available. (source code)

14. RobotFindsKitten – Port of a very silly “classic” ASCII game. (itunes link) (source code)

15. Sci-15 HPCalc – Calculator app based on classic scientific HP-Calculator.(itunes link) (source code)

16. Task Coach – Personal to-do list and task manager. (itunes link) (source code)

17. Tubestatus – London train schedule tracker. (itunes link) (source code)

18. Tweejump – Platform jumping game inspired by Icy Tower. Utilizes Cocos2D. (itunes link) (source code)

19.  Tweetero – Basic twitter client with image uploading. (itunes link) (source code)

20. Twitterfon – Super-fast intuitive twitter client. (itunes link) (source code)

21. Wikihow – A reader app for the popular how to wiki site. (itunes link) (available by e-mail from support@wikihow.com)

22. Wordpress – Client for managing Wordpress blogs. (itunes link) (source code)

23. YourRights – Pocket database containing a summary of your legal rights. (itunes link) (source code)

Check them out if you’re working on something similar or think they might have a feature you could use there’s no reason to re-invent the wheel.  Be sure to make sure you understand the licenses though many are GPL and require that you open source your app.

转自：maniacdev.com/open-source-iphone-app-store-apps/

Related Posts / 相关文章

• iPhone网页设计欣赏与最佳实践 Showcase of Designs Optimized for iPhone
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• 偷窥iPhone Push Notification的幕后
• 用Photoshop创建一个iPhone程序销售页面
• 揭开iPhone版Google，Gmail，Google Reader神秘面纱的方法

最近还是一个接着一个的项目，从 PHP & 前端项目一直到 iPhone / Android 项目，还有漏嘴网的更新要做，一直都在忙。

忽然感觉到自己快要实习了。一些该做的事情都还没做完。趁这两天工程不紧张，抓紧把博客的 Theme 设计一下，设计完后还要 Markup，做成 WordPress 的模板。再把简历做好来，放到博客上。所以敬请期待了……

由于明年三月是我们学院的本科评估，学校更是要我们提早选择毕业设计，提早开始做并且在大四上学期期末要完成。

毕业设计，无非又是千篇一律的网站制作，算法论文，程序开发，数据库优化之类之类的。我觉得这些就像是在做机械运动，没有挑战性。

选来选去，最后选中了关于移动开发的几个课题，课题来源于学院的一个外聘教授，不常来学校，但是我和龙兄有足够的信心能够把课题做好。

我们做的是手机门铃（无线监视类的）如果能有闲暇，我还想开发成 iPhone App，放在 App Store 里卖一卖，不过这些都是后话了，毕业设计完成再说吧。

就写到这里，继续做我博客的新主题了……

Related Posts / 相关文章

• 我的近况

Sign in with Twitter is the pattern of authentication that allows users to connect their Twitter account with third-party services in as little is one click. It utilizes OAuth and although the flow is very similar, the authorization URL and workflow differs slightly as described below.

The normal flow dictates that applications send request tokens to oauth/authorize in Twitter’s implementation of the OAuth Specification. To take advantage of Sign in with Twitter, applications should send request tokens in the oauth_token parameter to oauth/authenticate instead.

The oauth/authenticate method will perform the following:

1. If the user is logged into Twitter.com and has already approved the calling application, the user will be immediately authenticated and returned to the callback URL.
2. If the user is not logged into Twitter.com and has already approved the calling application, the user will be prompted to login to Twitter.com then will be immediately authenticated and returned to the callback URL.
3. If the user is logged into Twitter.com and has not already approved the calling application, the OAuth authorization prompt will be presented. Authorizing users will then be redirected to the callback URL.
4. If the user is not logged into Twitter.com and has not already approved the calling application, the user will be prompted to login to Twitter.com then will be presented the authorization prompt before redirecting back to the callback URL.

This behavior is explained in the following flowchart:

Sign in with Twitter Buttons

Twitter would prefer your application to use the following buttons. While it is easy roll your own buttons or create text links, using these standard buttons will instill user confidence and standardize the experience.

Darker

Lighter

Peter Denton has also created a number of buttons to make this experience easy and beautiful.

Related Posts / 相关文章

• 从 Twitter 运维技术经验可以学到什么
• 注册漏嘴网

毫无疑问，一个合理的布局和结构是最好选择。这不仅是因为你的布局在不同浏览器见表现不同，而且还因为的CSS有很多方法来布局你的每个元素。今天，我们希望与你们分享一些避免在创建CSS布局时容易遇到的错误的技巧。

IE Bug修正

1- Bug修正：IE双倍Margin bug

- 元素是浮动的-并且给元素一个和浮动同一个方向的margin-结果显示两倍的指定margin大小。这个方法非常简单。所有您需要做的就是添加一个display: inline规则到你的浮动元素。所以，你只是把例如这样的代码：

#content {
    float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px; }

改为如下代码 :

#content {
    float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px;
    display:inline;
}

2- 克服盒模型hack

- 如果你想给任一div指定宽度，不要指定padding或margin。只要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代。所以，不要这样做：

#main-div{
width: 150px;
border: 5px;
padding: 20px;
}

这样做:

#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}

3-IE无视min-height属性

- min-height属性在firefox下表现很好但是IE却无视了它，IE的height就像FF的min-height.注意：IE7没有这个bug。

/* 对主流浏览器 */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* 对IE浏览器 */
/*\*/
* html .container {
height: 8em;
}
/**/

4-?Min-Width for IE

-一个IE的min-width缺陷的修正。

块级元素居中

5-块级元素居中

- 有很多种方法可以使块级元素居中；选择哪种方法取决于你的百分比大小设置或使用更绝对的数值。

整个页面内容居中：

body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}

6-使用CSS垂直对齐

- 如果你想知道怎么才能正确的实现垂直对齐，只需要简单的为你的文本指定和容器等高的line-height。

#wrapper {
	width:530px;
	height:25px;
	background:url(container.gif) no-repeat left top;
	padding:0px 10px;
}
#wrapper p {
	line-height:25px;
}

栏目问题

7-?你的CSS栏目被搞乱的最大原因

-一个容易理解的就如何解决普遍的CSS栏目的问题的有用的图解和代码片断的文章.

8-?扩大的盒子Bug

- 当您尝试创建一个两列浮动的布局， IE浏览器将创建一个“浮动下降” ，这是由于在一个固定宽度的浮动DIV内存在超出宽度的内容，这些内容必须融入布局中的一个特定位置。这片文章详述了几种可能的替代方法。

CSS 定位

9-?理解CSS定位Part 1

-一系列很有趣的文章，这些文章不仅包括定位，还包括包括定义布局的属性，比如display和float ，和对CSS3 布局模型的一个预览。第一部分将会介绍定位和display属性。Part1,?Part2,?Part3 将会带给你对定位的更深的理解.

10-?relative和absolute有什么不同?

- 对于刚开始使用CSS的人来说，无论相对行为还是绝对定位都是非常令人沮丧的。这个问题的答案将会让你的迷惑变的清晰些。

#redSquare
{
position: relative;
bottom: 40px;
right: 40px;
}

显示这样:

11-HangTab(固定标签)

- 在浏览器边缘创建一个固定的标签(即使内容居中)。查看Panic’s website for their software Coda.

#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}

CSS 浮动概念

12-?CSS 浮动原理：你应该知道的事情

-?SmashingMagazine 浏览几十个相关文章，并选择了在用float开发基于CSS的布局时你应该牢记的最重要的东西。

<div> <!-- float container -->
<div style="float:left; width:30%;"><p>Some content</p></div>
<p>Text not inside the float</p>
<div style="clear:both;"></div>
</div>

13-?Floatutorial: CSS float的简单教程

- Floatutorial带你查看浮动元素的基本原理，例如图片，下拉菜单，下一个和返回按钮，相册，内部列表和多列布局。

14-?清除浮动- 正确的方法

- 清除浮动可以说是CSS开发中的一个最令人沮丧的方面，最佳方法之一是在您的网站上使用EasyClearing .

/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#container
{display: inline-block;}

/* Hides from IE-mac \*/
* html #container
{height: 1%;}

#container
{display: block;}
/* End hide from IE-mac */

更简单的圆角实现

15-?迈克询问CSS圆角建议

- “最简单的方法是使用一个大的gif图片，然后我将给我的盒子编码”

<div>
  <p>beautifully-encapsulated paragraph</p>
  <div></div>
</div>

“并给它添加背景”

.roundBox {
  background:transparent url(roundBox.gif) no-repeat top left;
  width:340px;
  padding:20px;
}
.roundBox .boxBottom {
  background:white url(roundBox.gif) no-repeat bottom left;
  font-size:1px;
  line-height:1px;
  height:14px;
  margin:0 -20px -20px -20px;
}

16-3 个简单的步骤实现圆角

- Alen Grakalic研究了通过三个步骤来编写一个固定宽度的圆角布局. 他也创建了一个demo .

CSS表单问题

17-?创建伟大的网页表单的技巧

- Cris Coyer和我们分享了浮动标签，:focus伪类，使用建议等技巧。他同样建立了又好又简单的联系表单, 他首先将它发布在这里.

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
}

18-?简洁而纯粹的CSS表单设计

- 对于的CSS爱好者来说，本教程表述了一个如何设计纯粹的CSS表单而不使用HTML表格的建议。你可以在这里抓取代码.

19-用javascript自动填充文本输入框

- 有时候，我们需要向用户解释他们理应填写文本输入框。当没有标签可以显示，一个通用的解决方案是，把一些占位符文本放在文本框中，并让它当标签来用。本教程介绍了一种很好的解决办法，并启用JavaScript ，label 元素是隐藏的，而且input 元素的title 属性值被复制到value 属性. 如果已禁用JavaScript ，标签显示在被留空的文字输入框的上面。一个简单的演示，您可以在这里看到演示.

值得检验的css技巧

20- 跨浏览器的用背景图的水平线

- 你或许想使用一个定制的图片来创建一个跨浏览器的水平线作为内容的分隔。

div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center;
height: 10px
}
div.hr hr {
display: none
}

<div><hr /></div>

本文翻译自：http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
转载请注明来源，谢谢

Related Posts / 相关文章

• 【译】10个惊人的CSS hack和技术 (10 astonishing CSS hacks and techniques)
• 关于一些浏览器的的Hack
• CSS中的RGBa色彩
• HTML5新功能演示
• [转]CSS文字排版终极指南

Google 的使命是 Web，在 Google 眼中，未来的一切应用都将 Web 化，一直以来，Google 为 Web 开发与设计者推出了大量免费工具，让他们更好地创建，维护，改善他们的 Web 站点，这些工具包含了开发，分析，维护，修补等等用途，本文将介绍15款这样的工具。

1. Google Chrome Developer Tools

这是 Google Chrome 中类似 Firefox Firebug 以及 Web Developer Toolbar 的一个扩展，用于调试你的网页，包含一个 DOM 探测器，一个 JavaScript 调试台，可以设置执行断点和跟踪，一个类似 YSlow 的执行分析器。
2. Webmaster Tools

一个对网站拥有者来说非常有用的程序，可以帮助你从各个角度改善自己的站点。可以发现站点中的恶意程序，发现搜索引擎爬虫遇到的错误，可以发现你的 HTML 代码中需要改进的部分。还可以帮你发现你的站点中最热门的网页，并发现你站点中的错误链接。
3. Google Web Toolkit

Google Web Tootlkit （GWT）是一个 Web 开发基础框架，为开发者提供了一些基础类库，GWT 同 Google 的其它产品，如 AdWords，FeedBurner，Google Ajax 类库等紧密集成，这里有一个 Google Docs 教程。
4. Google Code Search

帮助开发者搜索代码，支持正则表达式搜索，或在一个高级搜索界面中，很直观地搜索那些可能会让你事半功倍的公共代码。
5. Page Speed

Google 现在已经将网站加载速度算到搜索排名算法中，Page Speed 可以帮助你分析你的网站性能，基于 Google Web 性能最佳实践。
6. Browser Size

该工具帮你分析，你的网页在不同浏览器，不同浏览尺寸下的显示状况，非常适合看看自己的网页在不滚动的情况下，在各种浏览尺寸下显示到哪里。
7. Google Ajax Libraries API

Google Ajax Libraries API 包含多种流行的 JavaScript 库（目前有10种），并可以从 Google 高性能的 CDN 网络中加载，既节省了你的服务器带宽，同时，由于用户可能已经在别的网站加载过这个库，因此可以显著加快这些库的加载速度。
8. Google Website Optimizer

接着这个工具，你可以对自己的网站进行 A/B 测试，并对网站进行优化。
9. Sites

顾名思义，Google Sites 可以帮你创建一个托管的网站，可以将包括 YouTube，幻灯，Gmail 日历，Google Gear 小程序，Google Docs 一类的应用集成其中。如果将站点设置为不公开，你可以将这个工具用于个人文档工具。
10. Speed Tracer

以可视化方式，帮你分析你的 Web 程序中各种元素的加载或运行速度与实践，这里有一些关于这个工具的用例。
11. Project Hosting

这是 Google Code 项目的一部分，可以帮你托管你的开源项目，Web 开发与设计者还可以在这里找到大量现成的项目以供借鉴或套用。
12. Google App Engine

这是一个可用来托管自己的 Web 程序的地方，甚至可以使用自己的域名。这里有一个教程，讲解如何使用 Google App Engine 来创建一个留言本。Google App Engine 中已经托管了大量的 Web 程序。
13. Google Chart Tools

Google Chart Tools 可以帮助你将数据转化为图表，并嵌入自己的网页，这些图表还拥有交互功能，可以钻入，或通过鼠标盘旋获取详细信息，还可以实现动画图表。
14. Closure Tools

Closure Tools 是 Google Labs 的一个开发套件，包含3个工具，闭包编译器（一个 JavaScript 优化器），闭包函数库（用于 Ajax 程序开发）以及一个用于动态生成 HTML 的闭包模板。
15. Google Analytics

经典的 Google 流量分析统计工具。

来源：Six Revisions - The Top 15 Google Products for People Who Build Websites

Related Posts / 相关文章

• 揭开iPhone版Google，Gmail，Google Reader神秘面纱的方法

那么
select 学生,sum(成绩) from A group by 学生;
得到如下结果

学生 成绩
张三 180
李四 230
==============================================================
如果考虑having
语句写成：
select 学生,sum(成绩) from A group by 学生 having 成绩=80;
得到结果就是这样的

学生 成绩
张三 80
李四 160

用having比 JOIN ON 相对好理解一些，简单一些。

Related Posts / 相关文章

• MySql取整函数
• 好书推荐-《PHP与MySQL程序设计（第3版）》

所谓离线，指的是用户能够在没有网络的环境下也可以进行工作，并且当网络环境恢复后，之前的操作能够自动地同步到服务器上。目前，离线应用可以分为两种，一种是桌面应用，其中以 IBM Lotus Notes 为代表。另外一种则是近来比较热门的 Web 离线应用，其中最具代表的为 Google 的离线应用，如 Google Docs, Gmail, Google Reader 等。而本文介绍的 Dojo 离线功能，则是目前最为流行的实现第二种离线应用的框架。

回页首

Dojo 离线原理

Dojo Offline 是一个免费的开放源代码的离线开发工具，它可以轻松地让 Web 开发人员开发离线应用。Dojo Offline 构建于 Google Gear 之上，它使得在 Google Gear 上开发离线应用变得更加简单。Dojo Offline 对 Google Gears 的 API 进行了封装，能够更方便地以 JavaScript 的方式访问数据；另外，Dojo Offline 还提供了如下功能：

1. Offline Widget：开发人员只要添加几行代码，就能够将这个离线的 widget 嵌入自己的应用中，之后，就能够自动获得网络反馈 , 同步消息以及离线操作配置说明等。
2. 同步框架：保存离线数据，并且在网络恢复后将这些操作和服务器进行同步。
3. 自动的网络和应用程序状态监控机制：离线应用可以基于这些监控结果来决定采取什么样的操作。
4. slurp() 方法：通过 slurp() 方法来自动扫描页面，找出需要缓存到本地的资源，包括图片，样式，脚本等。这使得 Web 开发人员能够集中精力地去开发业务逻辑和展示页面，而不需要考虑具体哪些资源需要缓存到本地。
5. 提供两种本地存储实现方法：Dojo Storage 和 Dojo SQL。Dojo Storage 使用哈希表来存储离线数据，为开发人员屏蔽了重量级的 Google Gears 的 SQL 使用方法，我们可以通过 Dojo Storage 将数据保存到 Google Gears 里去。Dojo SQL 通过执行 SQL 命令，对一般的 JavaScript 对象进行存取。
6. 加密和解密关键字 ENCRYPT() 和 DECRYPT()：提供对下载后的离线数据加密和解密方法。
7. Dojo 其他模块的集成：如果用户选择 Dojo Offline，毫无疑问，其应用可以受益于 Dojo 的其他功能，比如完善的事件处理机制，Ajax 框架等等。

回页首

Google Gears 简介

Google Gears 是 Google 开发的一个自由和开源软件，以 BSD 许可证发布。主要是为了能够让用户可以在离线时能够继续使用 Web 应用。这套软件透过 SQLite 数据库让本地端能够把资料暂存起来。所以网页是透过缓存取得的，而不是从实际的网络上取得。而且，Web 相关的程序可以周期性的透过 Gears 将本地缓存的资料与网络上的资料做同步。如果网络暂时无法使用，这个同步过程将会延后，直到网络恢复为止。Google Gears 通过以浏览器扩展的方式添加 JavaScript API，使得浏览器的脚本能够访问本地的缓存数据库。该扩展目前支持 Firefox，Internet Explorer 和 Safari，并需工作于 Windows、Mac OS X，或是 Linux 下。

Google Gears 有几个主要的组件：

1. 一个本地服务器，用来存储和读取离线程序资源（包括 HTML 文件 , JavaScript 文件 , 图片等）。
2. 一个小型数据库（基于 SQLite 轻量数据库），用来储存本地数据。
3. 一个工作池，用来让开发者将本地数据与服务器端后台同步。
4. 一个桌面模型，可使网络程序的操作贴近桌面程序。
5. 一个地理定位模型，能够让网络程序侦测到目前用户的地理位置。

回页首

开发 Dojo 离线应用程序

一般来说开发一个离线应用有以下几个步骤：

1. 应用加载时缓存所引用的资源。
2. 应用加载之后设置必要的离线事件处理函数。如：与服务器进行同步操作时的下载事件、下载完成事件，重放事件等。
3. 检查应用是否在线，读取应用所需的数据。如果离线则从本地读取数据；如果在线则与服务器数据进行同步：首先上传离线数据（如果有的话），然后从服务器上下载最新数据。
4. 初始化应用程序。

下面我们会先分别介绍如何保存离线资源，保存和使用应用离线数据以及如何与服务器的数据保持同步等相关技术，然后以一个具体的例子说明如何按上述步骤开发一个离线应用。

保存离线资源

为了使页面能够在离线情况下操作，在页面加载时必须要保存页面所引用的 HTML 文件，JavaScript 文件，CSS 文件，图片文件等资源，这样在与服务器断开连接时，页面便能够从本地缓存中提取到页面及相关的资源。Dojo 提供了一个功能非常强大的函数 slurp 来实现这一功能。slurp 函数在页面加载之后会自动分析页面所引用的资源，并得到一个资源文件的 url 列表，然后抓取 url 的内容，保存到 Google Gears 中。slurp 函数能够缓存大部分的资源文件，包括引用 CSS 文件里的图片，但是对于使用内联方式指定的 CSS 图片以及用 JavaScript 动态产生的引用 slurp 则无法进行缓存。这种情况可以通过调用 dojox.off.files.cache () 方法来手动添加要缓存的资源，具体用法详见后文。

Dojo Offline 还提供了在调试时查看已缓存资源文件的方法，首先以 debug 方式加载 Dojo，然后在页面和 Dojo Offline 加载完之后调用 dojox.off.files.printURLs() 函数。这个函数会在控制台以调试的方式打印出已缓存的资源文件的 url。

保存和使用离线数据

一般来说，离线应用不仅要缓存页面所引用的 HTML 文件，JavaScript，CSS，图片等资源，还要缓存页面所使用的数据。Dojo 对 Google Gears 的访问接口进行了封装，提供了 Dojo Storage 和 Dojo SQL 两种方式操作离线数据。通过这两种方式，用户可以方便、灵活地保存和读取离线数据。

• Dojo Storage

提供了一种类似哈希表的方式对数据进行操作，数据以键值对的方式存取。

保存：dojox.storage.put(key,value) — key 是字符串类型，value 可以是字符串和可序列化的 JavaScript 对象，但是浏览器对象（如 DOM 节点和 XMLHttpRequest 对象）是不能够保存的。

读取：var value = dojox.storage.get(key) —获取字符串 key 对应的值。
清单 1

var car = {type: "Nissan", color: "white", price: 20000, optional:
 "air-conditioner, stereo"};
dojox.storage.put("complexKey", car);

var value = dojox.storage.get("someKey");
var car = dojox.storage.get("complexKey");
if(car)
alert(car.type);

上述代码先将一个对象 car 放置在 Dojox.Storage 里，然后又从中取出并展示。

• Dojo SQL

通过 Dojo SQL 对 Google Gears 关系存储层的封装，能够以更适合 JavaScript 对象的访问方式对关系表进行操作。如下所示，我们对 Documents 表进行了创建，插入，查询操作：
清单 2

//create Documents table if not exist
dojox.sql("CREATE TABLE IF NOT EXISTS DOCUMENTS ("
+ "fileName		TEXT NOT NULL PRIMARY KEY UNIQUE,"
+ "content		TEXT NOT NULL) ");
//insert a record
dojox.sql("INSERT INTO DOCUMENTS (fileName, content) VALUES (?, ?)", fileName, contents);
//query
var results = dojox.sql("SELECT * FROM DOCUMENTS WHERE fileName = ?", someFileName);

Dojo 查询操作返回的是一个记录对象的数组，如访问第一条记录的 fileName 字段，可以使用 results[0].fileName，访问 content 字段则可以使用 results[0].content。

与服务器同步数据

离线操作所产生的新数据，在与服务器连接可用时需要上传到服务器；并且，在该用户离线期间，其他用户也可能已经更改过数据，因此重新连接服务器时需要下载最新的数据。Dojo 的同步操作发生的时机有两个，一是在页面首次加载并且在线的时候，或是离线后又检测到连接恢复的时候，具体包括 3 个步骤：

1. 下载并缓存最新的页面资源，包括由 slurp 函数以及用户手动缓存的资源。Dojo Offline Widget 会自动更新相应的状态，如下图所示：

   图 1. 下载状态
   

2. 上传用户在离线期间所创建的数据。

   图 2. 上传状态
   

3. 下载服务器最新数据进行展示。

   图 3. 同步成功
   

   如上所示，Dojo Offline 提供了一个 UI 控件来通知用户当前的状态，如下载，上传以及网络连接状态等。Dojo Offline Widget 处理了大部分的逻辑，开发人员可以直接在页面中使用该控件。使用 Offline Widget 很简单，只需在页面加入一个占位符即可。Offline Widget 也提供了扩展机制，以更改所使用的图片和样式来跟页面风格保持一致。

Dojo 离线应用示例

Dojo Offline 随附的开发包中提供了 3 个例子，下面以 hello world 为例说明如何构建一个简单的离线应用。hello world 程序模拟了用户与服务器简单的消息交互。用户界面包括一个输入框和一个发送按钮，在输入框里输入文本，点击发送按钮将消息发送到服务器。为了保持用例的简单，实际上消息并没有真正被发送到服务器，而只是简单地将其弹出。在应用离线时，点击发送按钮则会先在本地保存该消息，当应用重新连接时再重新执行该操作。

1. 首先加载 Dojo 及离线所使用的 JavaScript 文件。

   清单 3

   <script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true"></script> <script type="text/javascript" src="../../../../dojox/off/offline.js"> </script>

   当然，我们也可以用 dojo.require 方法进行加载：

   清单 4

   <script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true"></script> <script type="text/javascript" > dojo.require(“dojox.off.offline”); </script>

2. 设置应用程序的名字，这个名字会显示在 Dojo Offline Widget 上。

   清单 5

   dojox.off.ui.appName = "Hello World";

3. 缓存页面资源文件。要使离线功能正常工作，这个函数必须在 Dojo Offline 初始化之前调用，即 dojox.off.initialize 函数调用之前。

   清单 6

   dojox.off.files.slurp();

4. 初始化应用程序，设置离线操作的一些事件响应函数。

   清单 7

   initialize: function(){ console.debug("helloWorld.initialize"); var self = this; dojo.connect(dojox.off.sync, "onSync", this, function(type){ if(type == "download"){ self._messages.push("Hi! This is fake downloaded data!"); dojox.storage.put("messages", self._messages); dojox.off.sync.finishedDownloading(); }else if(type == "finished"){ this._messages = []; dojox.storage.remove("messages"); } }); dojo.connect(dojox.off.sync.actions, "onReplay", this, function(action, actionLog){ if(action.name == "new hello world message"){ var message = action.data; self.sendMessage(message); actionLog.continueReplay(); } }); if(!dojox.off.isOnline){ this.loadOfflineData(); } this.printMessages(); }

   可以看到，此处最主要的两个操作是设置 dojox.off.sync 对象的 onSync 事件和 dojox.off.sync.actions 对象的 onReplay 事件。其中，onSync 用来处理与服务器的同步，download 事件发生在第一次加载页面或是网络重新连接的时候，在该事件中我们应该从服务器下载数据，并在下载完毕之后调用 dojox.off.sync.finishedDownloading() 方法，以便告诉 Dojo Offline Widget 更新当前状态。finished 事件则说明从服务器下载数据结束，可以更新应用程序了。

   Dojo Offline 使用 action log 来记录用户在离线时所执行的操作，并在重新获得网络连接时再次执行这些操作，将数据上传到服务器。

   一般来说，程序初始化时首先要判断应用是否在线，如果不在线则加载本地数据进行页面展示。值得注意的是，这些事件何时触发是由 Dojo Offline 的同步框架根据当前应用程序状态决定的，开发人员只需设置相应的事件处理函数即可。

5. 保存离线数据，这是通过创建 action log 来实现的。在与服务器重新连接时 action log 会自动重新执行。

   清单 8

   saveOfflineSend: function(message){ this._messages.push(message); dojox.storage.put("messages", this._messages); var action = {name: "new hello world message", data: message}; dojox.off.sync.actions.add(action); alert("This message has been saved for sending when we go back online");

6. Dojo 的离线功能要在页面加载完及 Dojo Offline 初始化之后才能工作，因此页面本身的代码要在 Dojo Offline 初始化完成之后执行。Dojo Offline 的初始化完成可以用 dojox.off.ui 的 onLoad 事件来标识。我们首先将页面的初始化函数绑定到 dojox.off.ui 的 onLoad 事件，然后调用 dojox.off.initialize 函数对 Dojo Offline 进行初始化。

   清单 9

   dojo.connect(dojox.off.ui, "onLoad", helloWorld, "initialize"); dojox.off.initialize();

7. 加载 Dojo Offline Widget。实际上任何 html 元素，只要 id 为“dot-widget”都可以作为 Offline Widget 的占位符。Dojo Offline 初始化的时候会对这个元素进行填充。

   清单 10

   <div id="dot-widget"></div>

8. 为页面加入展示元素。

   清单 11

   <div id="helloMessage" style="margin: 1em;"> <label for="helloInput" style="margin-right: 0.2em;"> Enter Hello World Message: </label> <input name="helloInput" id="helloInput" style="margin-right: 0.2em;"> <button id="sendMessage" onclick="helloWorld.send()" style="margin-right: 0.2em;"> Send</button> </div> <p>Debug output:</p>

9. 运行 hello world

   hello world 示例程序不涉及服务器端代码，因此并不一定需要部署才能执行。但是为了便于测试在线 / 离线操作，最好还是通过服务器访问。

   在 Dojo Offline 里随附的例子中，Moxie 编辑器是一个包括服务器和客户端的完整应用程序，它使用 Jetty 作为 Web 容器，使用 Derby 作为数据库。我们可以启动 Moxie 应用所在的 Jetty 容器来访问 hello world 应用。

   首先请安装 jdk1.5 或以上版本，在 dojox/off/demos/editor/server/ 目录下，运行：

   java -jar editor.jar

   在浏览器地址栏输入 http://localhost:8000/dojox/off/demos/helloworld/helloworld.html 即可访问 hello world 应用。可以通过关闭 / 打开 Jetty 来观察 hello world 和 Dojo Offline Widget 在离线、在线及同步时的行为。

回页首

高级议题

网页资源的手工缓存

尽管利用 slurp() 方法可以为我们完成很多自动化的工作，但一些出现在 JavaScript 中的动态加载的资源是 slurp() 所无法分析得到的。因此，在实际应用中作为补充，我们往往还需要将一些 slurp 过程中的“漏网之鱼”手工加入本地缓存中。而 Dojo Offline 也为我们提供了相应的功能以支持这一需求。

手工将网络资源加入本地缓存的方法十分简单，例如，假设我们要将一个名为 big_and_little_fish.jpg 的文件缓存起来，可以执行如下方法：
清单 12

dojox.off.files.cache("images/big_and_little_fish.jpg");

不仅如此，Dojo Offline 还提供了一次性指定多个文件的功能，调用方法如下所示：
清单 13

dojox.off.files.cache([
 "images/fish1.png",
 "images/fish2.png",
 "scripts/some_dynamic_fish.js"
 ]);

我们可以多次调用 cache() 方法，假如调用过程中指定了多个同名文件，则最后一次被缓存的文件将会替换前面的同名文件。利用这一方法，再结合前述的 slurp() 方法，我们就可以很好的将离线所需的全部资源在本地缓存起来了。

数据的加密与解密

将数据下载到本地进行缓存是离线功能得以实现的重要步骤，但是假如这些数据中包含有敏感信息，例如身份证号码，而本地环境又不甚安全时，则对数据进行加密处理是很有必要的。前面曾经提到，我们在利用 Dojo Offline 进行数据存储时可以选择使用 Dojo SQL。而 Dojo SQL 允许我们很方便的对数据的某些字段进行加密和解密。

假设我们以前面的 DOCUMENT 表为例，假定其中的“content”字段属于敏感信息。

Dojo SQL 提供了两个特殊的关键字，ENCRYPT() 和 DECRYPT()，分别用以实现加密和解密操作。以 content 为例，调用方式类似如下：
清单 14

var password = "password";
dojox.sql("INSERT INTO DOCUMENTS VALUES (?,ENCRYPT(?))", "helloworld.txt",
"sensitive content", password,
function(results, error, errorMsg){
if(error){ alert(errorMsg); return; }
});

在上述代码中，我们在后一个字段加上了 ENCRYPT 关键字，声明对其进行加密。除此以外，我们还提供了一个 password 参数，这是底层加密机制所必须的。当我们启用应用系统时，系统会提示输入这一密码。出于对本地数据安全性的考虑，请不要将其存于 Cookie，Dojo Storage，或是 Dojo SQL 中，否则他人就可以轻易利用这一密码解开存于本地的敏感数据。另外，上述代码里还定义了一个回调函数。该回调函数将会在加密过程结束之后被调用。如果加密成功，results 对象中将会包含经过加密后的数据；如果加密失败，则 error 值将会为 true，并且 errorMsg 中会包含对错误原因的描述信息。

和加密一样，对数据进行解密的过程也十分简单。我们只需对需要解密的字段调用 DECRYPT 关键字即可。示例代码如下：
清单 15

var password = "password";
dojox.sql("SELECT fileName, DECRYPT(content) FROM DOCUMENTS",
password,
function(results, error, errorMsg){
if(error){ alert(errorMsg); return; }
// go through decrypted results
alert("First document info: "
+ results[0].fileName + " "
+ results[0].content);
});

在上述代码中，我们利用 alert 语句将加密后的第一条结果数据打印了出来。其中的 password 必须与加密时所使用的完全一致，否则解密将会失败，结果数据将仍然是加密后的样子。

假如我们要对多个字段进行加密，Dojo SQL 的 ENCRYPT 还有一种很方便的书写方法，即：ENCRYPT(?, ?)；同样的，对于 DECRYPT 也存在类似的书写方式，已完成一次性对多个数据字段进行解密：DECRYPT(fileName, content)

定制 Offline Widget

虽然利用 Dojo Offline Widget 可以省去我们很多的功夫，但是在某些情况下，其默认行为并不一定能够很好的满足我们的需要，例如：默认的样式风格与我们的应用程序不一致，此时，我们就可以对 Offline Widget 进行一定程度的定制。

事实上，我们在页面上所见到的 Offline Widget 有其对应的模板文件，该文件位于 dojox/off/resources/offline-widget.html，其中包含有一系列的 HTML 元素，这些元素都有相应的 ID，比如：dot-widget-network-indicator，Offline Widget 就是利用默认的 CSS 文件对其进行控制的，该 CSS 文件位于：dojox/off/resources/offline-widget.css。我们可以通过自定义 CSS 的方式来改变 HTML 元素的样式，从而改变 Offline Widget 在页面中的展现风格。

除了改变展现风格，有时我们可能还需要改变展现的内容，我们可以将 offline-widget.html 中的内容选择性的复制到我们自己的 HTML 页面中，这样我们就可以根据自己的需要随意设计 Offline Widget 的展现内容，而无需定义一个 ID 为 dot-widget 的特定 DIV 了。

此外，如果我们只是想修改 Offline Widget 所使用的默认图标的话，则还有更为简单的做法。那就是对如下几个 JavaScript 变量进行修改：

• dojox.off.ui.onlineImagePath：表示在线状态的图标
• dojox.off.ui.offlineImagePath：表示离线状态的图标
• dojox.off.ui.rollerImagePath：表示同步正在进行的图标
• dojox.off.ui.checkmarkImagePath：表示同步结束的图标

例如，如果我们想将表示在线状态的绿色小圆球状图标替换为自己设计的图标，则可以修改如下：

dojox.off.ui.onlineImagePath = “images/myonlineball.png”;

最后，假如我们对默认的“Learn How”页面不甚满意的话，则还可以对 dojox/off/resources/learnhow.html 进行修改，其对应的 CSS 样式也定义与 dojox/off/resources/offline-widget.css 中。

性能问题

Dojo Offline 每次在对数据进行同步时，始终都会刷新缓存于本地的资源，这一点有可能会对同步的性能构成较大的影响，因为毕竟并非每一次同步都需要刷新所有的本地数据。为了提高同步的效率，Dojo Offline 提供了一种可选的方案，即由应用程序提供一个名为 version.js 的特殊文件，并将其置于应用程序的主路径下。假如该文件存在的话，则同步期间 Dojo Offline 会去读取该文件的内容，并判断其内容是否改变，以此来选择性的刷新本地缓存文件。

我们在 version.js 文件中所提供的内容其实非常简单，可以是一个字符串，也可以是一个数字，形式不限。例如：”03-15-2009.9″。只要能够让 Dojo Offline 判断出内容的变化即可。

除了同步时候的性能问题外，另一个可能会遇到的性能问题是数据的存储。当我们使用 Dojo SQL 来存储数据时，必须先将底层所依赖的 Google Gears 的存储数据库打开，而后才能进行数据的存储，而当数据存储完毕之后，还需将数据库关闭。通常情况下，我们并不需要关心这一点，因为 Dojo SQL 会自动为我们完成这一切，每次当我们执行一句 SQL 语句时，底层代码都会自动处理数据库的打开和关闭。

不过，假如我们是在批量的向本地缓存插入数据的话，比如在一个循环次数为上百次的 for 循环中执行数据插入操作，那么每执行一次 SQL 语句都要打开和关闭一次数据库或许是一种很低效做法。为了提高效率，我们可以在批量操作数据之前通过调用 dojox.sql.open() 手工将数据库打开，等所有操作完成之后后再通过调用 dojox.sql.close() 手工将其关闭。插入数据期间，Dojo SQL 会自动判断数据库的连接状态，并保持连接一直处于打开状态，直至手工关闭为止：
清单 16

var dataSet = getDataSet(); // get an array that has a bunch of data
//in it
dojox.sql.open();
for(var i = 0; i < dataSet.length; i++){
 dojox.sql("INSERT INTO DOCUMENTS (fileName, content) VALUES (?, ?)",
 dataSet[i].fileName, dataSet[i].content);
}
dojox.sql.close();

回页首

总结

本文介绍了 Dojo Offline 的强大功能。通过阅读本文，读者能够了解到 Dojo Offline 的基本工作原理和一定的高级定制功能，从而掌握如何使用 Dojo Offline 进行 Web 离线应用程序开发的技能。

申明：

本文仅代表作者个人观点。

参考资料

学习

• Dojo 的 Wiki：对 dojo 进行了全面的介绍，是一个入门的好地方。
• Dojo 官方网站：提供了最全面的资料，包括 dojo 源码，各种文档，实例等等。
• 参考 Dojo offline 官方文档。
• Dojo 官方文档库：在这里您可以找到全部和 Dojo 开发相关的文档资料。
• 参考 Google Gear 相关文档，了解更多 Google Gear 的内容。
• 参考 W3C Offline Web Applications 规范。
• developerWorks Dojo 专题：汇集了大量与 Dojo 相关的技术资源。
• 通过 developerWorks Web 开发专区 内有关 Web 技术的文章和教程（包括本专栏之前的各期文章）扩展您的站点开发技能。

获得产品和技术

• IBM 试用软件：使用这些可直接从 developerWorks 下载的软件构建您的下一个开发项目。

讨论

• 通过参与 developerWorks blog 加入 developerWorks 社区。

作者简介

		何辉剑，现在 IBM 中国软件开发实验室 Lotus 开发中心工作，目前从事 Lotus Quickr 的开发定制以及客户支持工作。对 Dojo，Web2.0 相关技术和社会化软件有丰富的经验。

		张顺，现在 IBM 中国软件开发实验室 Lotus 开发中心工作，目前从事 Lotus Quickr 的开发定制以及客户支持工作。对 Web 服务，Web2.0 相关技术有浓厚的兴趣。

		莫映，现在IBM中国软件开发实验室Lotus开发中心工作，目前从事Lotus Quickr的Platform Service开发。热衷于Web 2.0相关技术及智能Web 2.0应用的构建。

Other Posts / 其他文章

• 22个Photoshop网页设计教程网站推荐
• 我的电脑情缘（流水帐）
• PHP 5.3 后被禁止使用的函数
• 漏嘴网即将上线
• 网站设计中漂亮的文字渐变效果

一个品质远远超出“原型建造”的Ajax库

点击下载PDF：Dojo中文手册

Related Posts / 相关文章

• 【转】使用 Dojo 的 Ajax 应用开发进阶教程 : 富含语义的 HTML

回车键提交表单是我们经常操作的一个动作，而什么条件下能使回车键提交却很少有人关心！

我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
1、如果表单里有一个type=”submit”的按钮，回车键生效。
2、如果表单里只有一个type=”text”的input，回车键生效。
3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
4、其他表单元素如textarea、select不影响。

实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第4条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。

一个demo，列出了一些例子

Other Posts / 其他文章

• CSS3, Please! The Cross-Browser CSS3 Rule Generator
• 2009 年度最佳 jQuery 插件
• W3C小组公布HTML5激动人心的特性
• “点亮网页”：一个实用的Firefox和IE插件
• JavaScript 图片切割效果

其次，我将Meeplace开发了多语言，现在已经支持8国语言了。
其中我自己也将这个自己开发的产品用在自己身上。和小平一起经营起漏嘴网。
http://www.louzui.com

先从学院附近开始做起吧。希望有一天，传单就被我们取代了。大家想看看哪好吃，哪好玩，饮食折扣，景区折扣，都可以来漏嘴网，我们会成为一个导吃，导购，导租咨询站。

Other Posts / 其他文章

• JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
• What’s new for Meeplace 2.8
• 50个最好的WordPress插件
• [原创]多选/全选checkbox，AJAX提交。另附IE的onchange BUG
• 半小时教你学会正则表达式

• 可以更容易、更快捷和更安全地让使用者在你的站点建立他们身份。
• 可以让业务可以单点登录到你的应用。
• 把你的站点转变成为一个针对于第三方应用的平台，让这些应用可以安全地访问用户数据。
• 可以将你的站点或应用集成到使用者及其关系网的社交体验（social experience）中。

在简要回顾企业单点登录和Web身份管理的历史之后，Dion给出了当今实现Web单点登录的新思路：使用OpenID、OAuth和（可选的）Facebook Connect。

OpenID

OpenID背后的想法其实很简单：

让使用者在登录你的应用时使用自己选择的身份提供商，而不是让他们去填写一个在线表格，然后把这些信息捕获到使用者不可能信任或不长期信任的私有本地账户中。

由此，OpenID为使用者提供了一种访问新站点更简单的方法（还记得上次为了下载一份资料，而不得不在那个站点上注册一个你自己也知道以后可能再也不会使用的账户么？:)）。Dion把OpenID的好处总结为：

• 更快、更简单的登录，因为消除或简化了注册过程。
• 更好的登录过程和生命周期，因为用户从此只需使用一个ID和口令。
• 一致的Web身份，因为ID的统一，让其他人通过这个ID就可将之与实际的用户划上等号。

使用OpenID并不要求使用者有什么改变，事实上，很多使用者很可能本身就已经有了一个OpenID，而他自己却还不知道。看看支持OpenID的提供商列表，开始你的OpenID使用之旅吧。

既然支持OpenID显然会给网站带来更大的流量，那么支持它当然是势在必行。其方式不外乎自己动手实现规范，或利用现成类库两种。这样的类库并不难找，因为目前的主流语言都已经有了相应的OpenID库。

值得注意的是，支持OpenID并不意味着站点或应用就放弃了对用户信息的收集，在这种情况下它们依旧可以捕获一些使用者相关的信息，只不过这些信息是在OpenID的上下文中，而不是使用者不想给出的口令或其他保密信息。

OAuth

为站点提供编程接口可以让其知名度更上层楼，然而在流量增加的同时，站点面临的安全压力也在同比增长。OAuth正是该背景下的产物，它可以让第3方应用安全使用你的站点数据。说到使用OAuth来保护API的好处，Dion列举如下：

• 安全、保密的第3方数据访问
• 对于第3方访问的控制是声明性的
• 大量第3方应用的使用将有助于推动本地站点的使用

和OpenID一样，在主流语言中你同样可以找到对OAuth的支持。对于有兴趣了解OAuth规范的读者则可以参考这里。

Facebook Connect

和以上两个都是开放标准不同，Faccebook Connect是一个私有标准。至于选择它的原因，Dion给出的解释是“缺乏开放、被广泛的社交身份系统，而该类系统的影响却越来越大。”。同时，他还援引了Facebook的数据：

对大多数站点来讲，“2/3的新注册是通过Facebook Connect来的，而且这些使用者大约有一半以上都开始使用这些站点”。

Dion以自己为例对Facebook Connect的使用效果进行了说明：

例如，我经常使用一个视频共享站点Vimeo，但我的很多朋友并不使用，甚至没有那里的账户。但是，在我发布视频的时候，通过显示我视频的Facebook Connect链接，他们可以在自己的活动流（activity stream）中看到我在Vimeo上做的事情。然后，他们可以决定是否观看这个视频，或者是访问Vimeo。

Facebook Connect的功能和优点如下：

• 一键登录，使用者可以使用自己的Facebook身份并让你的站点访问他们的Facebook信息。
• 更多的参与，利用使用者个人兴趣来提供更具针对性的信息，交付朋友自己定制的内容。
• 新的分发模型，通过Facebook上的活动流或其他社交渠道，使用者可以和Facebook上的联系人分享内容和发生在你站点上的行动。
• 直接访问Facebook，使用该API，可以让超过70万的开发者构建大量应用。

Facebook Connect的使用并不复杂，因为它本身就是一组Javascript库和XML标记，关于它的使用可以参考Dion给出的入门指南。

幸运的是，这3种工具并非排他的。完全可以结合使用，Dion在文中给出了结合使用OpenID和OAuth的例子：Step2项目。您是否已经建立您的站点，是否考虑开放您网站的API，是否考虑拥抱Facebook？那么Dion Hinchcliffe的这篇文章绝对应该在你的阅读范围之列。

Related Posts / 相关文章

• [译]Facebook是如何设计的
• Facebook 如何存储150亿张、1.5PB的照片

Yes, this is another round-up of fresh and useful Javascript techniques, tools and resources. But don’t close the tab yet, as you might find this one very useful. In this selection we present calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website and improve user experience with ready components or coding solutions.

The last section also covers a number of useful educational resources such as a compilation of useful JavaScript coding practices, a detailed comparison of JavaScript frameworks and general JavaScript programming conventions. We are looking forward to your feedback.

You may be interested in the following related posts:

• 50 Fresh JavaScript Tools That Will Improve Your Workflow
• 45 Powerful CSS/JavaScript-Techniques
• 70 Useful AJAX And JavaScript Techniques

[By the way, did you know there is a brand new Smashing Wordpress Book? Push WordPress past its limits!]

Calendars and Timelines

jDigiClock – Digital Clock (HTC Hero inspired)
jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget.

jQuery Sliding Clock v1.1
jQuery transpearant Slider clock with CSS sprites.

Date / Time Picker
Note that this control is not designed to work in IE6; although it will function correctly in most cases, the positioning of the calendar may be way off depending on how your page is styled.

JavaScript Debugging and Validation Tools

Venkman JavaScript Debugger project page
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001.

CompanionJS
Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE.

How to Test your JavaScript Code with QUnit
QUnit is a powerful JavaScript unit testing framework that helps you to debug code. It’s written by members of the jQuery team, and is the official test suite for jQuery. But QUnit is general enough to test any regular JavaScript code, and it’s even able to test server-side JavaScript via some JavaScript engine like Rhino or V8.

JS Bin – Collaborative JavaScript Debugging
JS Bin is an open source collaborative JavaScript debugging tool.

Forms, Buttons & Navigation

Making a Google Wave History Slider
Here is shown how to create a Google Wave-like history slider. Using it will enable visitors to go back and forth in time to view the changes that take place on a comment thread.

Fancy Radio Buttons With jQuery
Creation of 2 mandatory option sets that a user could choose, while hiding off the radio button inputs and using an anchor links to make it a bit more usable.

Creative Button Animations with Sprites and JQuery
Fading hover effect for which the transition is smoothed with JavaScript, using jQuery library.

Password (un)Masking
JavaScript jQuery that toggles the masking and unmasking of the password field.

jQuery MagicLine Navigation
These “sliding” style navigation bars have been around a while, and turns out it’s really pretty darn easy. Here are put two examples together.

Fixed Fade Out Menu: A CSS and jQuery Tutorial
The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.

Sliding Labels v2
Form label keeping the label inline, but sliding it off to the left rather than going away on click.

Ketchup Plugin
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

Layout tools

jQuery {css}designerGrid Plugin
{css} designerGrid is A jQuery Plugin developed for website interface developers who use the grid system of layout. {css} designerGrid is intended to assist these developers with CSS prototyping.

css-template-layout
JavaScript (jQuery) implementation of the CSS Template Layout Module

How to create a fluid grid with jQuery
Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. So here it goes…

closure-templates
Closure Templates are a client- and server-side templating system that helps you dynamically build reusable HTML and UI elements. They are easy to learn and customizable to fit your application’s needs. Closure Templates support JavaScript and Java and use a data model and expression syntax that works for either language. You can also use the built-in message support to easily localize your applications.

Useful jQuery Plugins

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

jQuery Roundabout
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)

jParse – jQuery XML Parse Plugin
jParse is a jQuery plugin that allows you to parse XML that was fetched with the jQuery .ajax method (making it fully customizable).

jQuery Quicksand plugin
Reorder and filter items with a nice shuffling animation.

typeQuery, change website typography with jquery
typeQuery gives the flexibility to change the font-family for everything you define with class, id, or tag, this example is referring to the selected item on a select object with id=”tag” and the font-family value at select object with id=”family”: $($("#tag").val()).css("font-family", $("#family").val());

Flip! A jQuery plugin v0.9.9
Flip is a jQuery plugin that will flip easily your elements in four directions.

Data Encryption With JavaScript: jCryption
jCryption is a jQuery plugin for encrypting POST/GET data submitted by forms. It uses public-key algorithm of RSA for the encryption & has a PHP file for handling the decryption of data.

Minimalist jQuery: 11 useful plugins under 4K
jQuery makes our lives easier. So much so that it’s tempting to use it all the time, inadvertently slowing our page load times (cue YSlow and Hammerhead). Combining, compressing, and delivering scripts at the end of your page helps in the HTTP request department. On the file size front, below are jQuery plugins that give solid bang for your performance buck.

Undo/Redo in jQuery
An easy-to-use plugin for adding undo/redo capabilities to a jQuery application. It is based loosely on the Objective-C/Cocoa way of doing things.

editease
editEase – jQuery CMS | no fuss, no database, no worries

jsHub
jsHub is a single piece of JavaScript (a “tag”) that can handle reading different sorts of page information and then send them to many different vendors’ products. One piece of code to send to Google Analytics, Omniture SiteCatalyst, WebTrends and Mixpanel. Instead of one piece of JavaScript per vendor, jsHub has a single piece of code (the “hub”) and plugins that know how to translate into the required wire protocol for each vendor. Vendors only maintain the plugin for their product.

Educational JavaScript Resources and Tutorials

Caffeinated Simpleton
JavaScript is an amazing little language, but it’s got some quirks that turn a lot of people off. One of those quirks is this, and how it’s not necessarily what you expect it to be. this isn’t that complicated, but there are very few explanations of how it works on the internet. This article is an attempt to explain how this works and how to use it properly.

What You Need To Know About JavaScript Scope
This article discusses how JavaScript handles scope and how various JavaScript libraries provide methods for dealing with it and how they smooth out a few bumps. We’ll also look at how you can get back to basics and do some interesting scope wrangling without a library, a useful approach if you’re writing code that needs to stand alone.

Learning Advanced JavaScript
A very nice tutorial to learn JavaScript, containing code and discussion from the upcoming book Secrets of the JavaScript Ninja by John Resig.

Highlight search terms automagically with JavaScript and mark
Script surrounding the search term(s) with the mark element rather than a span, although the class searchword is retained in case you want to style these marks differently from others. In the CSS, the rule article mark is just added to turn it a gentle shade of pink.

10 Really Helpful Traversing Functions in jQuery
With jQuery, selecting HTML elements is laughably easy. But at times, we may wish to further refine the selection, which can be a hassle when the HTML structure is complicated. In this tutorial, we’ll explore ten ways that we can refine and extend a set of wrapped elements that we wish to operate upon.

Using keyboard shortcuts in Javascript
If you want to enhance your web app, Javascript keyboards shortcuts is definitely something to consider. In this article, you’ll learn to use JS keyboard shortcuts, with and without the JQuery framework.

Code Conventions for the JavaScript Programming Language
This is a set of coding conventions and rules for use in JavaScript programming.

jQuery – Select element cheat sheet
This cheat sheet helps you to find the index of a selected option, set the selected option by value, set the selected option by text, insert a new option before or after another and get the text or value of the selected option.

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

Park your Horse, Code Cowboy: Professional JavaScript Workflows, Part 1
In this series, we’ll talk about tools & techniques you can use to cover those No’s, and cut a lot of strife & embarrassment from your JavaScript experience.

JavaScript Reference examples (example source code)
JavaScript Reference examples, organized by Objects, Properties, Methods & Collections. Some Event Handlers Reference are also available.

JavaScript best practices
A compilation of best practices and good advice I’ve amassed over the years, much of it learnt the hard way (experimentation and suchlike). Take the advice below to heart and keep it in a part of your brain that has a quick access route so you can apply it without thinking about it. I am sure you will find things to disagree with, and that is a good thing – you should question what you read, and strive to find better solutions. However, I have found that following these principles has made me a more effective developer and allowed other developers to build upon my work more easily.

wtfjs
JavaScript is a language we love despite it giving us so much to hate. This is a collection of those very special irregularities, inconstancies and just plain painfully unintuitive moments for the language of the web.

转自：http://www.smashingmagazine.com/2010/03/12/45-fresh-useful-javascript-and-jquery-techniques-and-tools/

Related Posts / 相关文章

• 一个利用jQuery实现菜单跟随页面滚动而移动的代码
• 在Dreamweaver中加入jQuery代码编写联想提示
• Galleriffic-jQuery相片展示插件
• NyroModal-jQuery的一个遮罩层插件
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript

Firefox版本

该插件基于Firebug，所以安装前请确保已经安装Firebug。

一些主要特性；

• 即时编辑——即改即现，把Firefox打造成超强网页编辑器；
• 与Fiddler一起使用，快速调试线上网页，HTML代码快速生成；
• 刷新CSS，DOM不刷新；
• 禁用单个CSS样式；
• CSS Sprites位置快速设定；
• 保持Session不过期；
• 导出任意节点为PNG图片；

现在就安装（从火狐官方下载1.6版）

下载1.7版本低安装 via ued.alipay.com

推荐查看作者的博客，里面有几篇介绍该插件的文章。你也可以查看Alipay的UED的介绍。

IE版

非常不错的是，该插件同时也提供了一个IE版本，安装很方便就是下载文件：http://nihaoku.cn/Linr/LinrIEGallery.reg 下载下来后运行reg文件，右键菜单就会出现“点亮网页”选项，重启IE内核的浏览器，然后右键选择“点亮网页”即可使用。

推荐查看IE版本的官方介绍。

另外作者在博客中透露Chrome版本也在开发中，很快就会面世，让我们一起期待吧。

查看点亮网页+Fiddler的视频演示
查看LinrLightWeb(Firefox Add-on)功能浏览
下载观看点亮网页操作CSS Sprite的动画

Related Posts / 相关文章

• CSS半透明度设置归纳总结[Firefox,IE,Chrome,Safari]
• 关于一些浏览器的的Hack
• 几款IE的调试工具
• 为网页开发者准备的13个Google Chrome浏览器扩展
• 20个Web设计师必要的Firefox插件