原名《移动平台3G手机网站前端开发布局技巧汇总》，由武方博整理的，让我们了解下移动设备上的WEB站点开发的基础知识，多些时间和精力去优化其他细节，我这里对原文的标签格式做了细微的调整，阅读查看起来明晰些，原文如下：

－－－－－－－－－－－华丽的分割线－－－－－－－－－－－－－

您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mobile development相关的文章，您或许是一名专业的WEB前端工程师，您或许想学习Mobile前端开发方面的技术，如果您被我说中了，呵呵那么这篇文章将为您带来意想不到的惊喜！当您看到这篇文章时，哥已经默认认为您是一名资深的WEB前端工程师，如果您不是，可能您会遇见许多不理解或听不懂的专业术语或前端技术（包括WEB、Mobile）。但是这没有关系，给自己一点信心吧，用心的阅读下去……

自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。

开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。

WebApp与Native App有何区别呢？

Native App：

1. 开发成本非常大
   一般使用的开发语言为JAVA、C++、Objective-C
2. 更新体验较差、同时也比较麻烦
   每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。
3. 非常酷
   因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果
4. Native app是被Apple认可的
   Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。

Web App：

1. 开发成本较低
   使用web开发技术就可以轻松的完成web app的开发
2. 升级较简单
   升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉
3. 维护比较轻松
   和一般的web一样，维护比较简单，它其实就是一个站点

Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。

当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–webapp的布局方式和技术。

在此说明一下，在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解，那现在就开始往下阅读吧……

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />

• 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
• 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
• 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
• 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码；

2、HTML5标签的使用

在开始编写webapp时，哥建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

3、放弃CSS float属性

在项目开发过程中可以会遇到内容排列排列显示的布局，假如你遇见这样的视觉稿，哥建议你放弃float，可以直接使用display:block;

4、利用CSS3边框背景属性

这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂的样式属性。

5、块级化a标签

请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

6、自适应布局模式

在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。

7、学会使用webkit-box

上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个webkit-box的值，它可以帮助前端工程师做到盒子模型灵活控制。

8、如何去除Android平台中对邮箱地址的识别

看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中

<meta content="email=no" name="format-detection" />

9、如何去除iOS和Android中的输入URL的控件条

你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？
答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果

setTimeout(scrollTo,0,0,0);

请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

10、如何禁止用户旋转设备

我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！

至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是一般的苹果。

iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止不了的。

11、如何检测用户是通过主屏启动你的webapp

看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphone ipod ipod touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。

从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对象的一个standalone属性。

iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true，我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。
在Android中从来没有添加到主屏这回事！

12、如何关闭iOS中键盘自动大写

我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize，通过指定autocapitalize="off"来关闭键盘默认首字母大写。

13、iOS中如何彻底禁止用户在新窗口打开页面

有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target="_self"来指定用户在新窗口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。

14、iOS中如何禁止用户保存图片＼复制图片

我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout:none，这样用户就无法保存＼复制你的图片了。

15、iOS中如何禁止用户选中文字

我们通过指定文字标签的-webkit-user-select:none便可以禁止iOS用户选中文字。

16、iOS中如何获取滚动条的值

桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？
通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

17、如何解决盒子边框溢出

当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

18、如何解决Android 2.0以下平台中圆角的问题

如果大家够细心的话，在做wap站点开发时，大家应该会发现android 2.0以下的平台中问题特别的多，比如说边框圆角这个问题吧。

在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：

1. -webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；
2. 如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。
3. 假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前缀一定要加上！

19、如何解决android平台中页面无法自适应

虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下meta标签：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />

如果有的话，那请你再仔细的看清楚有没有这个属性的值width=device-width，如果没有请立即加上吧！

20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式

新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari仍然会对页面中的5位连续的数字进行自动识别，并且将其重新渲染样式，也就是说你的css对该标签是无效的。

<meta name="format-detection" content="telphone=no" />

我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签，我们都做了如下改写：

<button class="t-balance" style="background:none;padding:0;border:0;">95009.00</button>

• ★ HTML5 Rocks : Major Feature Groups  的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码
• 很不错的 HTML5 Dashboard – Mozilla，效果很炫。
• WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。
• ★ StackOverflow : 大名鼎鼎的技术问答式论坛。
• ★ Addyosmani, jQuery 和 JavaScript 文章教程
• Sohtanaka, jQuery 和 JavaScript 文章和教程
• ★ Nettuts+ 是一个面对Web开发人员和设计人员的网站，提供各种技术教程和文章，覆盖 HTML, CSS, Javascript, CMS’s, PHP 和 Ruby on Rails.
• Codrops, 教程和 web 资源
• WebAppers, 最好的开源资源
• Tutorialzine – PHP MySQL jQuery CSS 教程, 资源和赠品
• Mozilla JavaScript guide
• codes snippets, 作者自己收集的一些代码片段

服务器端的软件

• ★ Node.js 是服务器端的 JavaScript 环境，其使用了异步事件驱动模式。其让Node.js在很多互联网应用体系结构下获得非常不错的性能。 源码 和 实时演示。
• PhantomJS 也是一个服务器端的 JavaScript API的WebKit。其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG
• Lighttpd 一个轻量级的开源Web服务器。新闻，文档，benchmarks, bugs, 和 download. Lighttpd 支撑了几个非常著名的 Web 2.0 网站，如：YouTube, wikipedia 和 meebo.
• NGinx, 性能巨高无比的轻量级的Web服务器。比Apache高多了。花了6年的时间，终于走到了1.0版。
• Apache HTTP Server 是一个很流行的并支持多个流行的操作系统的Web服务器。
• ★ PHP 可能是最流行的服务器端的Web脚本动态处理语言。
• 当然，还有 Ruby, Python, Erlang, Perl, Java, .NET, Android, C++, Go, Fantom,CoffeeScript, D, …

PHP 框架和工具

• ★ WordPress 是一个基于博客系统的开源软件。参看《WordPress是怎么赢的？》
• Drupal 是一个内容管理系统 (CMS).
• Centurion 是一个新出现的开源 CMS ，一个灵然的 PHP5 Content Management Framework. 使用 Zend Framework, 其组件坚持通用，简单，清楚和可重用的设计原则。
• phpBB 一个开源的论坛（国内的Discuz！更多）
• ★ SimplePie : 超快的，易用的,  RSS  和 Atom feed PHP解析。
• ★ PHPthumb, PHP 图片处理库
• ★ PHPMailer 强大的全功能的PHP邮件库
• PubSubHubbub协议，一个简单，开放， server-to-server 的 pubsub (publish/subscribe) 协议——Atom and RSS的扩展。
• 更多的请参看 – 20个你应该知道PHP库 和 9个强大免费的PHP库

数据库

• ★ Apache CouchDB 是一个面向文档的数据库管理系统。它提供以JSON 作为数据格式的REST 接口来对其进行操作，并可以通过视图来操纵文档的组织和呈现。.源码.
• MonoQL 是一个采用PHP+ExtJS开发的MySQL数据库管理工具。界面极像一个桌面应用程序，支持大部分常用的功能包括：表格设计，数据浏览/编辑，数据导入/导出和高级查询等。
• MariaDB 是MySQL的一个分支，由MySQL 创始人Monty Widenius 所开发。GPL，用来对抗Oracle所有的MySQL的license的不测。自Oracle收购SUN以来，整个社区对于MySQL前途的担忧就没有停止过。
• ★ SQLite 不像常见的客户端/服务器结构范例，SQLite引擎不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分。所以主要的通信协议是在编程 语言内的直接API调用。这在消耗总量、延迟时间和整体简单性上有积极的作用。整个数据库（定义、表、索引和数据本身）都在宿主主机上存储在一个单一的文 件中。它的简单的设计是通过在开始一个事务的时候锁定整个数据文件而完成的。库实现了多数的SQL-92标准，包括事务，就是代表原子性、一致性、隔离性 和持久性的（ACID），触发器和多数的复杂查询。不进行类型检查。你可以把字符串插入到整数列中。某些用户发现这是使数据库更加有用的创新，特别是与无 类型的脚本语言一起使用的时候。其他用户认为这是主要的缺点。
• SQL 在线设计编辑器，这一节的那个图片就是这个在线编辑器的样子了。一个画数据库图表的在线工具。很强大。

API 和 在线数据

• ProgrammableWeb, 最流行的Web Services 和 API 目录大全。
• Google Data Protocol 一组Google服务的数据服务API。
• Yahoo! Developer Network – APIs 和 Tools
• Yahoo! Pipes 可视化在线编程工具，它是一个用于过滤、转换和聚合网页内容的服务。
• ★ The Yahoo! Query Language 一个很像 SQL的网页查询工具。

在线代码和媒体编辑器

• ★ CodeRun Studio一个基于JavaScript语言开发的跨平台的集成开发环境，它立足于云计算的设计思路，方便开发者在浏览器端便可以轻松开发、调试和部署网络应用程序。（参看《Coderun.com 在线开发IDE》）
• Cloud9 IDE – 一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示。
• ★ jsFiddle – Javascript的在线运行展示框架，这个工具可以有效的帮助web前端开发人员来有效分享和演示前端效果，其简单而强大 (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
• Akshell，一种云服务，它使用服务端的JavaScript和在线的IDE帮助开发者进行快速应用程序开发。 它还提供云托管，所以部署是即时的。
• JSONeditor, 一个好用的JSON 编辑器
• ★ TinyMCE 一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。
• Ext Designer 是一个桌面应用工具，帮助你快速开发基于ExtJS 的用户界面。
• ★  LucidChart，一款基于最新的html5技术的在线图表绘制软件，功能强大，速度快捷，运行此软件需要支持html5的浏览器。
• Balsamiq Mockups, 产品设计师绘制线框图或产品原型界面的利器。
• Color Scheme Designer 3 - 一个免费的线上调色工具
• ★ Pixlr, 是一个来自瑞典基于Flash的免费在线图片处理网站。除了操作介面和功能接近Photoshop，还是多语言版本，支持简体中文。（以前酷壳介绍过）
• Aviary, 是一个基于HTML5 的在线图片处理工具，可以很容易的对图片进行后期处理。 Aviary API
• Favicon Generator, 线上favicon(16×16)制作工具。

代码资源和版本控制

• ★ GitHub 是一个用于使用Git版本控制系统的项目的基于互联网的存取服务。
• Git 是一个由Linus为了更好地管理linux内核开发而创立的分布式版本控制／软件配置管理软件。其巨快无比，高效，采用了分布式版本库的方式，不必服务器端软件支持，使源代码的发布和交流极其方便。
• Google Code 谷歌公司官方的开发者网站，包含各种开发技术的API、开发工具、以及开发技术参考资料。
• Google Libraries API Google 将优秀的 JavaScript 框架部署在其 CDN 上，在我们的网站上使用 Google Libraries API 可以加速 JavaScript 框架的加载速度。
• Snipplr 一个开放的源代码技巧分享社区，号称Code 2.0。和一般的源码分享网站不同，它针对的并不是大型网站源码，而是一些编程的代码技巧。

JavaScript 桌面应用框架

• ★ jQuery 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。  源码, API, API浏览, 很不错的文档.
• ★ 官方的 jQuery User Interface (UI) library (演示和文档). 源码,Themes Roller, Download.
• YUI 2 — Yahoo! User Interface Library
• Mootools, 一个超级轻量级的 web2.0 JavaScript framework
• Prototype 提供面向对象的Javascript和AJAX
• Dojo The Dojo Toolkit，一个强大的无法被打败的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。
• ★ Ext JS 4, 业内最强大的 JavaScript framework。
• PHP.js, 一个开源的JavaScript 库，它尝试在JavaScript 中实现PHP 函数。在你的项目中导入PHP.JS 库，可以在静态页面使用你喜欢的PHP 函数。

JavaScript 移动和触摸框架

• ★ jQuery Mobile : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满 足这样的需求。 Sources.
• Zepto.js Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。 Sources.
• MicroJS : Microjs网站应用列出了很多轻量的Javascript类库和框架，它们都很小，大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。
• ★ PhoneGap :是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 Sources.
• ★ Sencha Touch Sencha Touch 是一个支持多种智能手机平台（iPhone, Android, 和BlackBerry）的 HTML5 框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。
• JQtouch, 是一个jQuery 的插件，主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。 Sources.
• DHTMLX Touch 针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5，创建移动web应用。它不只是一组UI 小工具，而是一个完整的框架，可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器，用DHTMLX Touch创建的应用，可以在iPad、iPhone、Android智能手机等上面运行流畅。

jQuery 插件

• Waypoints 是一个jQuery 用来实现捕获各种滚动事件的插件，例如实现无翻页的内容浏览，或者固定某个元素不让滚动等等。支持主流浏览器版本。
• Lazy loader 插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。
• TweenJS : 一个简单和强大的 tweening / animation 的Javascript库。
• Easings 类Css3的jQuery 动画插件
• Spritely 这个插件可以创建出如flash一样的动画效果，比如：在页面上有一只飞动的小鸟，一个动态滚动的背景等。
• File Upload, jQuery 文件上传插件4.4.1
• Slideshow/Carousel 插件. Sources.
• Supersized – 全屏式的背景/幻灯片插件
• Masonry i一款非常酷的自动排版插件，这款jQuery工具可以根据网格来自动排列水平和垂直元素，超越原来的css. Sources.
• jQuery 简单 Layout 演示，管理各种边栏式，可改变大小式的布局。
• Flexigrid – jQuery  数据表插件
• Isotope绝对是一个令人难以置信的jQuery插件，你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。
• Super Gestures jQuery 插件可以实现鼠标手势的功能。
• MouseWheel 是由Brandon Aaron开发的jQuery插件，用于添加跨浏览器的鼠标滚轮支持。
• AutoSuggest jQuery 插件可以让你添加一些自动完成的功能。
• qTip 一个漂亮的jQuery 的工具提示插件，这个插件功能相当强大。
• jQuery Charts and graphic 用来制作图表。
• jQuery Tools– The missing UI library

其它 jQuery 资源

• http://www.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins
• http://webdesigneraid.com/weekly-html5-news-and-inspirations-%E2%80%93-tutorials-tools-resources-and-freebies-v-2/
• http://www.designer-daily.com/15-useful-jquery-plugins-and-tutorials-5207
• http://www.julien-verkest.fr/22/11/2007/240-plugins-jquery
• http://www.hotscripts.com/blog/10-great-html5-experiments-apps/
• http://www.noupe.com/jquery/excellent-jquery-navigation-menu-tutorials.html
• http://www.noupe.com/php/20-useful-php-jquery-tutorials.html
• http://aext.net/2010/04/excellent-jquery-plugins-resources-for-data-presentation-and-grid-layout/
• http://webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/
• http://gestureworks.com/features/open-source-gestures/
• http://edtechdev.wordpress.com/2011/01/14/some-exciting-new-html5javascript-projects/
• http://net.tutsplus.com/articles/web-roundups/30-developers-you-must-subscribe-to-as-a-javascript-junkie/

HTML5 视频播放器

• ★ Popcorn.js 是一个HTML5 Video框架，它提供了易于使用的API来同步交互式内容，让操作HTML5 Video元素的属性，方法和事件变得简单易用。 (来自Mozilla)
• LeanBack Player HTML5视频播放器,没有依赖任何JavaScript框架。支持全屏播放，音量控制，在同一个页面中播放多个视频。 (来自Google)
• Vid.ly 为你上传的视频提供转换功能，并且为转换后的视频创建一个短网址。通过Vid.ly，让你的视频可以在14种不同的浏览器和设备上播放，不需要再去考虑将 要浏览视频的人使用什么设备了，以避免各各软件巨头之间的利益之争带来了不兼容，给用户带来了巨大的困扰，短网址让你可以通过Twitter、 Facebook等方式方便分享视频。Vid.ly还可以通过html代码嵌入到其他网页中。Vid.ly免费帐户空间为1GB，免费帐户也没有播放或浏 览限制。

JavaScript 音频处理与可视化效果

• ★ 使用HTML5 和 Flash, SoundManager V2 只用单一API的提供了可靠，简单和强大的跨平台的音频处理。
• DSP, JavaScript的声音Digital Signal Processing
• The Radiolab Hyper Audio Player v1, 带给你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat
• jPlayer, 一个 jQuery HTML5 音频/ 视频库，功能齐全的API

JavaScript 图形 和 3D

• ★ Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准，无需任何插件。
• ★ Javascript 3D 引擎: ThreeJS 由 Mr Doob 开发，一个轻量级的 3D 引擎，不需要了解细节，傻瓜都能使用。这个引擎可以使用<canvas>, <svg> 和 WebGL.
• Shader Toy, 一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等.
• PhiloGL, Sencha的PhiloGL是首个WebGL开发工具之一，提供了高水准的功能，来构建WebGL应用。Sencha创建了几个演示，来描述框架交互式3D虚拟化的能力，比如3D view of global temperature changes。
• WebGL Inspector 你就Firebug等Web调试工具一样，这个是 WebGL的调试工具。
• WebGL frameworks 由 Khronos Group 收集的一个WebGL框架列表。
• EaselJS, 一个使用html5的canvas的 JavaScript 库. Sources.
• JavaScript Game Frameworks 免费的JS游戏框架列表。另，可参看 JS游戏框架列表。
• Raphaël是一个小型的JavaScript 库，用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看Javascript向量图Lib–Raphaël
• jQuery SVG 插件让你可以了 SVG canvas 进行交互。
• Google chart tools –  参看本站的使用Google API做统计图
• Arbor.js, 是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

JavaScript 浏览器接口 (HTML5)

• ★ Modernizr – 是一个专为HTML5 和CSS3 开发的功能检测类库，可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.Sources. 一个有用的列表 cross-browser Polyfills
• HTML5Shiv : 该项目的目的是为了让IE 能识别HTML5 的元素。
• Polyfills : 这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能，有些代码需要Flash。
• YepNopeJS : 一个异步的条件式的加载器。Sources.
• jQuery CSS3 Finalise : 是否厌倦了为每一个浏览器的CSS3属性加前缀？
• ★ Amplify.js :一套用于web应用数据管理和应用程序通讯的 jQuery 组件库。 提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用 localStorage 和 sessionStorage标准处理客户端的存储信息，对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request 增加了一些额外的特性。 Sources.
• History.js 优美地支持了HTML5 History/State APIs
• Socket.IO Web的socket编程。

JavaScript 工具

• ★  {{mustaches}} 小型的 JavaScript 模板引擎。
• json:select(), CSS式的JSON选择器
• HeadJS, 异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。
• JsDoc Toolkit是一款辅助工具，你只需要根据约定在JavaScript 代码中添加相应的注释，它就可以根据这些注释来自动生成API文档。
• Responsive image, 一个试验性的项目，用来处理responsive layouts 式的图片。
• UglifyJS是基于NodeJS的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台。
• Dhteumeuleu, 交互式的 DOM 脚本和DHTML 的开源演示。
• Backbone是 一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的Template 库。而是和这些结合起来构建复杂的 web 前端交互应用。如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

客户端和模拟器

• BrowserShot, 检查浏览器的兼容性，跨浏览器平器的测试
• Test everything… 输入一个你想要测试的URL……
• Android browser 模拟器
• iPhone browser 模拟器
• Opera browser 模拟器
• ★ Firebug 与 Firefox 集成，可以查看和调试你的Web页面。

CSS3 和 字库

• ★ CSS3 Maker CCS3的生成器
• 容易地创建 CSS3 animations。 Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3 animations 。
• CSSwarp – CSS 文本扭曲生成器
• Gradient Editor, 一个强大的Photoshop式的CSS 渐变编译器。来自 ColorZilla
• ★ Google Web Fonts 通过Google Web Fonts API 可以浏览所有的字体
• @font-face Kit Generator, 为Web转换字体
• Typetester, 比较字体。
• Media Queries. 一组 responsive web 设计。
• Pattern TAP, UI组件。

Website (FULL) 模板

• ★ HTML5 Boilerplate 是一个HTML5 / CSS / js模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合，目的是满足您开发一个跨浏览器，并且面向未来的网站的需求。 Sources.
• HTML5 starter pack 是一个干净的和有组织的目录结构，其可适合很多项目，还有一些很常用的文件，以及简单的Photoshop设计模板。
• ★ Initializr 是一个HTML5 模板生成器，其可以帮你在15秒内创建一个HTML5的项目。
• Animated Portfolio Gallery （教程）
• Slick MobileApp Website 如果通过 jQuery 和 CSS 制作一个手机应用的网站。
• RSS Reader 如果通过 jQuery Mobile 创建一个RSS Reader
• ★ Single Page Applications 使用jQuery的朋友们 (Backbone, Underscore, …)创建单一页面。
• Google TV Optimized Templates, 传统电视已经开始和网路融合，但现阶段产业仍然正在摸索之中，为此将来的网页亦会有结构上的改变。Google TV Optimized Templates是 一个用HTML/JavaScript制成的开源软体，一如其名是一个对Google TV作出了最佳化的的网页范本，其特色是以遥控器作为操作的前提，令使用者无需输入任何文字就可以进行控制。未来除了会有专用遥控器外，还会采用智能手机 透过W-iFi控制Google TV的方法。Optimized Templates的界面中左方会展示分类，右方会显示该分类下的影片截图，影片播放、切换、全画面表示都可透过键盘上的方向键、Backspace或 Enter等键完成，方便今后的网站开发人员借镜。HTML5 版的模板使用了 Google TV UI library, jQuery  和 Closure 。

译：开源中最好的Web开发的资源

原：Best “must know” open sources to build the new Web

快乐设计师 [布丁]的演讲主题：《SCSS & Compass》中show了很多有关SASS, SCSS, COMPASS的技巧，用来提升我们平常组织CSS文档的效率，具体w3ctech会将当天分享的文档整理（如果等不及可以先查看SASS的官网或slideshare上的搜索结果）

好了回到正题《SASS/LESS如何安装使用》

1.搭建环境（简单的下载安装Ruby）

下载安装Ruby，Windows下的Ruby下载，Mac OS X 就跳过这一步，Linux自己去找吧（这部分用户的强项）

建议安装的时候勾选下，这样可以直接通过cmd命令行操作（不必手动添加Path）

2.安装SASS

完成第一步之后，在开始菜单中找到并运行Ruby命令行，如图

启动可以看到命令行窗口，安装SASS（LESS安装方法相同），在命令行键入如下代码（其实官网顶部所列的三条即为常用的）并回车：

gem install haml

如下图所示：

安装成功如下图所示：

3.开始工作

打开编辑器创建style.sass文件，拷贝官网的演示代码，如：

$blue: #3bbfce
$margin: 16px
 
.content-navigation
  border-color: $blue
  color: darken($blue, 9%)
 
.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

但是项目中我们需要用到的是.CSS后缀名的样式文件，转换方法如下：

在命令行键入

sass --watch style.sass:style.css

这里需要注意的是但前命令行所在的目录是相对应的，由于我的演示站点路径为

X:IDEAsass

所以需要从默认的C盘桌面指定到相应文件目录再运行命令，如图：

运行成功可以看到目录下多了一个style.css文件，文档中生成的代码如下：

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}
 
.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

如果想要监听匹配整个CSS文件目录代码如下：

sass --watch stylesheets/sass:stylesheets/css

OK，正常运行，我用的IDEA编辑器自带有SASS插件的，结构还是蛮清晰的

PS：在编写过程中感觉编辑器强大的提示效果在这样的书写方式下没能发挥出来，你的可以很舒服的提示么，如果发现，别忘了告知我哈~

补充：

IDEA下

.scss格式的写法提示还部分存在

.sass格式的写法提示完全没有

有些时候zencoding觉得会快些

<script type="text/javascript" src="scripts/modernizr.js"></script>

地址：
a.Modernizr某种原因被墙了~
b.http://github.com/Modernizr/Modernizr modernizr项目托管在git
c.简单的输出页：
>http://modernizr.github.com/Modernizr/output.html
d.详细测试页面：
>http://modernizr.github.com/Modernizr/test/index.html

if (Modernizr.localstorage) {
    // window.localStorage 存在!
} else {
    //浏览器没有提供本地存储的原声支持
    //Gears 或 其他方法
}

2.检测全局对象（如window 或者 navigator）是否拥有特性属性：

function supports_geolocation() {
    return !!navigator.geolocation;
}

如果浏览器支持地理位置API的话，全局的navigator对象上会有一个名为geolocation的属性，反之，navigator对象上该属性的值为undefined。

3.创建一个元素，然后检测该元素的DOM对象是否拥有特定的属性：

function supports_canvas() {
    return !!document.createElement('canvas').getContext;
}

如果浏览器支持canvas API，那么被创建的<canvas%gt;元素对应的DOM对象就会拥有getContext()这个方法，反之，该对象只会拥有一些公用属性而没有任何canvas特定属性。

function supports_video() {
    return !!document.createElement('video').canPlayType();
}

<video>的canPlayType()方法检测同上。
4.创建一个元素，给这个元素的DOM对象设定特定的属性值，然后检查浏览器是否保留了该属性值：

function supports_input_color() {
    var i = document.createElement("input");
    i.setAttribute("type", "color");
    return i.type !== "text";
}

如果浏览器支持此特定的输入框类型，那么设置的type属性值会被保留。反之，浏览器会忽略你设置的值，type属性的值依然为”text”。

现在应该多抽出一些时间来看一下HTML5了，外面的声音是那么的响亮，整理自己的碎片时间。

但是基本功还是要扎实，最近把很大精力放在JS上面，悲惨一点的是设备上跑不了jQuery（很多常用的DOM不能很好的支持），只能用原生及JS来实现一些效果，这是压力和动力吧，至少现在可以直视满屏的JS代码了~
总体来说个人觉得HTML5是一个整体，不单单是CSS2时代的“画画”啦。

跑在实现后面的标准，引如下：

一份技术规范和它的具体实现必须要做到步调一致。实现先于规范完成不是什么好事情，因为人们会开始依赖这些已经实现的细节，这样就会对规范形成制约。然而，你也不希望在规范已经完成时还没有任何相关的具体实现和实践经验，因为这样规范就得不到任何反馈。这里面如果存在着无法避免的冲突，而我们也只能硬着头皮去克服了。 —— Mozilla开发人员.one

最近有些疲惫哈，文章开的是小片服用的配方，学习的状态在就好~

HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局，因为他们给这个领域带来了太多太多令人惊奇的新特性！我用大量时间学习了HTML5和CSS3技术，它们的动画、圆角等特效会令你震惊…在后面的内容中将向大家推荐一些能帮助你更好的掌握甚至精通HTML5和CSS3的终极工具资源集合。虽然还有很多特性不被浏览器所支持，但我们作为前端开发从业者，有必要掌握它们。希望这些HTML5和CSS3工具资源能对大家的学习和工作有所帮助。

HTML5 & CSS3 准备就绪

该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。

HTML5安全手册

CSS3按钮生成器

所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。

When can I use…（HTML5 & CSS3 浏览器兼容性）

很详细的关于HTML5, CSS3, SVG等技术的浏览器兼容性列表。

CSS3颜色值/名称速查手册

CSS3颜色值查询手册，包括颜色英文名、16进制值、rgb百分比、rgb整数值、颜色缩写和颜色效果等…

CSS3生成器

在线测试CSS3新特性，即时生成效果。

Modernizr

当前浏览器对HTML5支持情况测试

该工具可以帮助你测试当前你使用的浏览器对HTML5的兼容情况，很详细，很有用！

CSS 边框半径(代码生成器)

通过输入数值即可生成CSS3代码的CSS 边框代码生成器。使用很简便。

FindMeByIP（HTML5 & CSS3 浏览器兼容性手册）

很详细的HTML5和CSS3浏览器兼容性手册。

CSS3渐变生成器

CSS3 Watch

前端开发工具&资源小集合

CSS3, please!(实时体验CSS3代码)

font dragr

CSS3生成器

CSS桌面

CSS桌面可以让你在线练习CSS3代码，并实时将渲染效果呈现在右侧，很棒的CSS3在线练习工具。

HTML5修订版本跟踪器

font-face 生成器

CSS3 选择器测试工具

IE 打印保险器

详细CSS 浏览器支持情况列表

源地址：http://blog.bingo929.com/html5-and-css3-tools-list.html

W3C 在 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档。其他特性包括新的页面元素，比如 <header>, <section>, <footer>, 以及 <figure>。
通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则，HTML 5 改进了互操作性，并减少了开发成本。

Milestone的HTML5页面框架：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>迈石科技领先的商务E化综合服务商</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if lte IE 7]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
 
</head>
 
<body>
<!-- 页面容器 -->
<div id="container">
 
	<!-- 页面头部 -->
    <header id="header">
    	头部内容...
    </header>
 
    <!-- 页面内容 -->
    <div id="content">
 
        <!-- 主内容 -->
    	<section class="main">
        	主内容...
        </section>
 
        <!-- 侧栏 -->
        <aside class="sidebar">
        	侧栏内容...
        </aside>
 
    </div>
 
    <!-- 页面尾部 -->
    <footer id="footer">
    	底部版权...
    </footer>
</div>
</body>
</html>

先看下这段Js引用代码：

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->

针对IE版本浏览器，创建新标签：abbr, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time, video等。

紧跟着是条件判断对CSS的引用：

<!--[if lte IE 7]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

ie.css看到这个就知道是为IE浏览器写的，方便维护，方便过W3C(大多HACK是为IE写的)。

哦，对了还有需要把长长的DTD换成简短的，

小时候的故事：08年到上海找工作时，所面试的一家单位要求我用记事本来写代码，写完之后，
难题来了，面试官要求我把这段长长的DTD声明用记事本写出来，当时就杯具了

长长的DTD：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

替换成短短的DTD：

<!DOCTYPE HTML>

框架搭建好了，就这么简单。

HTML5标记看起来是如此富含语意，DIV将来似乎会较少存在了：

在标记里，语义与一个元素的含义有关，并且关系到这个元素怎样描述它所包含的内容。

——Molly E. Holzschlag

网站重构 — 制定搜索引擎喜欢的网站构架

采用最近流行起来的HTML5+CSS3的更符合语义化的标签来进行页面的布局（由于Milestone这个站点结构比较简单，并没有使用之前提到的圣杯布局，合适的才是最好的）

搜索引擎优化

前面提到的“制定搜索引擎喜欢的网站构架”是基础，在对基础设施进行完善之后，就开始相应的搜索引擎优化了，以期望达到目标关键词能在搜索结果页中有个较好的排名，实现更多的流量转化。

先来完成两步（优化代码、静态化页面上面以说这里不考虑）

第一步，路径的设计
- 搜索引擎能对路径和网页上的关键词进行匹配，因此路径中带有关键词是有利于在搜索结果页排名的

第二步，标签的设计
- Title
- Keywords
- Description

第三步，待续。。

这将会是一个学习和实践的过程，事实上已经开始实施了，这周基本可以完成重构工作，很高兴Cherry能一起参与进来协同工作。