前言
这本书将帮助Web应用开发人员和软件架构师选择正确的策略开发跨平台应用。本书主要面向大型组织中需要了解如何使用HTML5开发Web应用的开发人员。
什么是企业应用?
企业应用需要处理公司特定的工作流，通常要与各种内部系统、数据源和过程集成。
Google Maps不是一个企业应用。不过如果将Google Maps集成到保险代理人使用的一个公司网站中，用来规划他们的日常工作、建立工作计划、完成地址核查以及使用地理编码服务，这就会成为一个企业应用。
本书使用的技术
库(library) 和框架(framework)之间的区别在于，前者没有指出如何建立应用代码的结构，库只是提供一组组件， 使你不必花时间自己写大量代码。框架则不同，有些框架的且标是帮助开发人员测试他们的应用。另外些框架的目标则是将应用划分为单独的模块。
绪论
这里将使用动态HTML (dynamie HTML, DHTML)，也就是HTML5、 JavaScript和层叠样式表(Cascading Style Sheets, CSS)。我们还会引人Web浏览器中的XMLHttpRequest对象，它可以与服务器通信而不需要刷新整个Web页面(即Ajax)。
从DHTML转向HTML5
1999年，Microsoft引入了XMLHttpRequest对象，使得它的邮件客户端Outlook的Web版(Outlook Web App)可以更新浏览器的窗
口而不需要刷新整个Web页面。多年之后，这被一个更流行的缩写取代: AJAX,它表示异步JavaScript和XML (Asynchronous JavaScript and XML)。
Apple向所有浏览器插件发起了挑战，如今内嵌的Java VM或Flash Player已经不再作为我们的选择。
不过如果选择HTML5作为各种设备和浏览器中使用的通用技术。用户界面可能无法做到在任何特定设备上都精确到像素，但是开发会更为简单(与为特定的虚拟机、设备或操作系统开发相比)，而且能够适应不同的屏幕大小和屏幕密度(即像素密度)。
第一部分 构建你的应用
第1章 构建Save The Child应用
过去，大多数企业应用的用户界面(UI) 都由开发人员来设计，他们会尽可能地发挥他们的艺术才能来完成设计:这里放几个按钮，那里放一个表格。
先考虑移动
响应式Web设计(responsive Web design)技术，为Web应用创建用户界面时，这些用户界面可以根据用户设备上显示区的大小自动地重新分配屏幕内容。
引入Balsamiq Mockups
Balsamiq Mockups (https://balsamiq.com/)。它会提供一个工作区，你可以在这个工作区从工具条将所需的UI组件拖放到Web页面图像上，来创建Web应用的一个原型图。
提示:如果你想使用免费工具，可以考虑使用MockFlow (http://mockflow.com/) 。
项目委托人与Web设计师交流
创建第一个原型图
将原型图变成原型
单页面应用(single page application,SPA)
单页面应用
SPA是一种建立应用架构的方法，用户在网站中导航时不需要翻阅多个页面。用户只需在浏览器中输入URL,这会打开一个Web页面，而且这个页面会一直留在屏幕上，直到用户结束这个应用的工作。
用户屏幕的某些部分会随着用户的导航而改变，可能会利用Ajax技术得到新数据。这就允许构建所谓的“胖客户应用”，它能记住应用状态。
运行WebStorm的代码示例
第一个原型
<head><meta charset="utf-8"><title>Save The Child | Home Page</title><link rel="stylesheet" href="css/styles.css">
</head>
这个HTML文件使用<link>标记来包含例1-2所示的CSS文件。
/* 页脚 */
footer {/* 设置背景色，让页脚突出*/background: #eee;height: 20px;
}
这个CSS不仅控制页面内容的样式，还会控制页面的布局。<nav>将推到右边。如果无序列表放在<nav>中，则应当左对齐。
<script src="assets/js/main.js"></script>
主页面JavaScript
JavaScript的位置
我们建议把包含JavaScript的<script>标记放在HTML文件的最后。
页脚部分
捐赠部分
《正则表达式》(http://shop.oreilly.com/product/0636920012337.do，ISBN: 9781449392680) 。
增加视频
增加HTML5视频元素
过去，Web页面中的视频都是由浏览器的Flash Player插件来播放(甚至是一些更早的流行插件，包括RealPlayer Media Playerf和QuickTime)。例如，可以使用HTMIL标记<embed src=" myvideo.swf" height="300" width=300">， 如果用户的浏览器支持Flash Player。
视频内容提供者更愿意采用所有浏览器都支持的格式来广播视频，可以使用标准HTMLS元素<video> [参见最新工作草案(http://bit.ly/1hTqKPd) ]嵌入在Web页面中。
<video controls poster="assets/media/intro.jpg"width="390px" height="240" preload="metadata"><source src="assets/media/intro.mp4" type="video/mp4"><source src="assets/media/intro.webm" type="video/webm"><p>Sorry, your browser doesn't support video</p></video>
2011年及之后发布的所有主流Web浏览器(包括Internet Explorer 9)都提供了自己的内嵌视频播放器(支持<video>元素) 。代码不再依赖于Flash Player支持，这是一个好的变化，不过不同浏览器的视频播放器看起来不一样。
嵌入YouTube视频
要在Web应用中包含视频，还有一种方法: 首先将视频上传到YouTube,然后在Web页面中嵌入这些视频。这有很多好处:
<iframesrc="http://www.youtube.com/embed/VGZcerOhCuo?wmode=transparent&hd=1&vq=hd720"frameborder="0" width="390" height="240"></iframe>
增加地理定位支持
不过，完全可以计算它的位置(尽管可能有不同的精度)。如果你的桌面计算机连接到一个网络， 它会有一个IP地址，或者你的本地WiFi路由器可能有一个服务设备标识符(Service Set Identifier, SSID)，由路由器开发商或Internet提供商提供。因此，桌面计算机的位置并不是秘密，除非你改变了WiFi路由器的SSID。
地理定位基础
- 调用方法getCurrentPosition()，传人两个回调函数作为参数。
与Google Maps集成
知道设备坐标固然很重要，不过还要让这些位置信息有更好的展示度，为此可以把设备坐标提供给Google Maps API （http://bit.ly/1k61pfX）。
使用Moderizr检测浏览器特性
Google Maps的搜索和多个标记
小结
第2章 使用Ajax和JSON.
这一章将介绍如何将外部数据引入我们的HTML Web页面。
- HTML Web页面如何与Web服务器交换数据?
- 使用什么格式表示应用数据?
不过对于第一个问题， 我们的答案是使用Ajax技术，另外我们会使用JavaScript对象记法(JavaSeript Object Notation, JSON) 数据格式作为第二个问题的答案。
理解Ajax
在互联网发展的早期阶段，每打开一个新的页面，不论它在同一个网站上还是来自另一个不同的网站，都需要向Web服务器发出一个新的请求，并得到一个新的响应，这会重新呈现新页面的整个内容。如果个用户将Web浏览 器指向某个URL,然后改为另一个URL,这个新请求就会发送到这个新的URL,然后浏览器将呈现新页面。不过URL的改变可能并不是因为用户访问一个不同的网站，而是因为用户选择了一个菜单项，这会从同一个域得到一个新的Web页面。
了解JSON
使用Ajax
从服务器获取数据
建立Ajax请求的过程很明确，包括以下步骤:
- 创建XMLHttpRequest对象的 一个实例。
- 调用方法open(), 初始化数据源请求。
- 为onreadystatechange属性指定 一 个处理器函数来处理服务器的响应。
- 通过调用send()建立 一个非阻塞的数据源请求。
- 在处理器函数中，服务器响应到达时处理该响应。正是因为这个原因称为异步(asynchronous) :只要服务器准备好响应，可以在任何时间调用处理器函数。
- 根据接收到的数据修改DOM元素 (如果需要)。
Ajax：优点和缺点
利用Ajax技术创建的Web页面不必刷新也可以为用户提供一种与服务器通信的途径。Ajax还有一个重要的优点，它可以在一个标
准的HTML/JavaScript环境中工作，而且得到了所有Web浏览器的支持。你可以创建胖客户端(fat clients) 预加载某些数据。
Ajax也有不好的一面。使用Ajax时，用户会失去浏览器后退按钮的功能(利用后退按钮可以重新加载前一个Web页面，这样可以让用户看到这个页面的前一个状态)。
从HTML文件填充州和国家
使用JSON
表示文本数据时，最容易的方法就是使用逗号分隔值(comma
separated value, CSV) 格式，不过这种格式的可读性不太好。
用XML格式发送数据可以解决可读性和验证问题，不过这种格式相当烦琐。每个数据元素都必须包围在描述数据的一个开始标记和一个结束标记之间。
Douglas Crockford提出了一种新的数据格式，名为JavaScript对象记法 (JavaScript Object Notation)或JSON。
可以使用JSONLint （http://jsonlint.com）。如果粘贴了一行“丑陋"的JSON数据，JSONLint会把它重新格式化为种可读的形式。
从JSON文件填充州和国家
JSON中使用数组
使用Ajax和JSON加载慈善活动
在CMS中使用JSON
用Java处理JSON
压缩JSON
为Save The Child增加图表
我们的目标是在客户端代码中动态地绘制图像。可以使用HTML5元素<canvas>或<svg>来实现。
<canvas>元素（http://bit.ly/VzV9Ig）提供了一个位图画布，<canvas>定义了一个由像素组成的矩形区域，可以在这里绘制图形。
<svg>元素支持可伸缩矢量图形(Scalable Vector Graphics, SVG)（http://www.w3.org/TR/SVG11）。
用画布元素增加图表
使用SVG增加图表
如果希望这个图表是动态的，反映每5分钟捐赠的变化情况，该怎么做呢?如果使用<canvas>,你需要用饼图重绘画布上的每一个像素。利用SVG,绘制的各个元素将是DOM元素。
使用JSONP从其他服务器加载数据
假设从域abc.com加载一个Web页面， 而且它需要另一个域 (xyz.com) 的JSON格式数据。前面已经提到，Ajax存在跨源限制，因此不允许这么做。可以使用JSONP技术来放宽跨源限制。
Beer和JSONP
小结
第3章 jQuery库介绍
jQuery Core (http://jqueryui.com/) 等库可以大大减少手动编写代码，还可以用来编写Web应用的核心功能。jQuery UI库提供了部件、动画和一些高级效果。RequireJS库(http://requirejs.org/)是一个模块加载器，可以利用这个库模块化HTML5应用。另外还有数百个很小的库，这些库可能专注于完成一个工作，可以像点菜-一样根据需要选择使用[更多详细内容请访问MicroJS (http://microjs.com/) ]。
jQuery [可以访问Built With网站（http://bit.ly/1uYqUF0）来了解最新统计情况]。
jQuery入门
Hello World
使用选择器和过滤器
用JSFiddle测试jQuery代码
过滤元素
处理事件
使用方法on()关联事件处理器和元素
委托事件
结合使用Ajax和jQuery
处理简写方法
使用jQuery编写Save The Child
登录和捐赠
使用jQuery Ajax加载HTML州和国家
使用jQuery Ajax加载JSON州和国家
提交捐赠表单
使用jQuery插件
使用插件验证捐赠表单
增加图像滑动条
小结
第二部分 企业相关问题
第4章 用Ext JS框架开发Web应用
现在我们要介绍一个更 复杂的产品: Sencha （http://www.sencha.com/）的JavaScript框架Ext JS （http://www.sencha.com/products/extjs）。
JavaScript框架研究
框架(framework) 表示以前创建过一些“软件框架”，应用开发人员需要将他们的特定业务代码放在这样的框架中。
有些JavaScript框架实现了模型-视图一控制器(Model-View-Controller, MVC)设计模式，要求开发人员按层次组织应用代码。有数十种MVC JavaScript框架可以供专业开发人员选择使用: Backbone.js（http://backbonejs.org/）, ExtJS（http://www.sencha.com/products/extjs）, AngularJS（http://angularjs.org/）, Ember.js（http://emberjs.com/）
和Knockout（http://knockoutjs.com/），以及很多其他框架。
提示:有一个非常好的网站TodoMVC (http://todomwc.com/) ，其中展示了使用多种流行框架实现一个应用(一个Todo列表) 的例子。仔细研究用多个框架实现这个应用的源代码，这会帮助你为项目选择一个合适的框架。
选择使用Ext JS
Ext JS的宣传介绍：
- Ext JS是一个HTML5框架，它不要求你写HTML。只需要一个HTML文件 (index.html)，其中的
<head>部分包含3个文件:一个Ext JS框架文件、一个CSS文件和一个app.js,不过<body>为空。
不过Web浏览器只了解HTML、DOM、CSS和JavaScript。这说明，Ext JS框架必须做一些额外的工作，使用Ext JS类系统将所编写的代码转换为原先的HTML对象。
下载和安装Ext JS
熟悉Ext JS和工具
创建Hello World的第一个版本
用Sencha CMD工具生成应用
选择Ext JS发布版本
声明、加载和实例化类
最佳实践：MVC
MVC层次包括:
- 控制器(Controller)
这个对象作为数据和视图之间的中间层。数据到达你的应用，控制器必须通知适当的视图。用户在视图上改变数据，控制器应当将这些改变传递到模型。 - 视图(View)
用户看到的用户界面中的某个部分。视图由来自模型(或存储库)的数据填充。 - 模型(Model)
表示某些业务实体。
研究组件生命周期
介绍Ext JS为Web页面创建和增加UI组件的专用方法。
- 加载(Load)
加载必要的(或全部) Ext JS类及其依赖类。 - 初始化(Initialization)
DOM准备就绪时将初始化组件。 - 布局(Layout)
度量和指定大小。
组件作为容器
如果一个组件可以包含其他组件，它就是一个容器。每个Web页面由一个或多个容器组成。
处理事件
指定布局
用Ext JS开发Save The Child
建立Eclipse IDE和Apacbe Tomcat
运行Save The Child UI的上半部分
完成Save The Child
小结
第5章 企业开发人员选择的生产力工具
使用Node.js、V8和npm
Node.js是个服务器JavaScript框架。 Node使用了V8,这是Google提供的JavaScript引擎(Chrome/Chromium也使用这个引擎)。
npm是一个与Node捆绑提供的工具。npm提供了一个统一的API和元数据模型来管理JavaScript项目中的依赖库。package.json文件是项目的依赖库描述文件。
利用Grunt自动完成
面向JavaScript项目的任务运行框架Grunt (http://gruntjs.com) ，它能帮助你自动完成重复性操作，如修改代码时运行测试。
分析最简单的Gruntfile
使用Grunt运行JSHint检查
监视文件改变
使用Bower
使用Yeoman
使用Ext JS和CDB完成高效企业Web开发
Ext J5 MVC应用措建
生成一个CRUD应用
数据分页
小结
第6章 模块化大型JavaScript项目
这一章会介绍模块化技术，利用这些技术，用户的浏览器可以快速呈现Web应用的第一个页面，同时在后台加载应用的其余部分，或者根据需要加载应用的其他资源。
模块化基础
模块(Modules)是实现某个功能的代码段，使用特定的技术编写。
你可能会问，“ 不是已经有js文件模块了吗?”当然，你可以使用<script>标记包含和
加载各个JavaScript文件。不过这个方法很容易出错，而且很慢。开发人员必须手动地管
理依赖文件和文件加载顺序，而且每个<script>标记都会额外带来一个服务器HTTP调
用。另外，浏览器要加载并执行JavaScript文件，在此之前它会阻塞页面呈现。
模块化探索
模块模式
CommonJS
异步模块定义
统一模块定义
ECMAScript 6模块
将Save The Child应用划分为模块
RequireJS配置：confg.js
编写AMD模块
按需加载模块
使用RequreJS插件
使用RequireJS优化器
利用中介者模式实现松耦合模块间通信
小结
第7章 使用JavaScript的测试驱动开发
JavaScript世界里有很多测试框架，不过我们只简要介绍其中的两个: QUnit （http://qunitjs.com/）和Jasmine （http://bit.ly/1pPx7lo）。这些框架的主要目标都是测试小段代码，即单元(unit)。
为什么要测试?
测试基础
单元测试
集成测试
功能测试
负载测试
测试驱动开发
使用QUnit实现TDD
结合QUnit建立Grunt
使用Jasmine的行为驱动开发
多浏览器测试
测试DOM
使用TDD构建Save The Child应用
建立ExtJS应用测试工具
测试模型
测试控制器
测试视图
建立IDE完成TDD
小结
第8章将HTTP升级到WebSocket
使用HTTP实现近实时应用
在底层，Web浏览器为每个HTTP会话建立一个TCP/IP连接。目前开发人员实现浏览器-服务器通信主要有3种选择:轮询(polling) 、长轮询(long pllig)和流模式(streaming) 。这些方法都基于一个半双工 (单向) HTTP协议来 模拟实时行为(实时的含义是能够在事件发生时立即做出反应)。
轮询
可以想象这种场景:一个孩子坐在汽车后座上， 每分钟就问一次“我们到了吗?你可能只是平静地回答“还没有。”这就类似一个空服务器响应。对这个孩子来说，你井没在提供有价值的数据，不过她确实接收到一 些“元数据”。而且还会让开车的人(服务器)分心，不能很好地完成其他工作。
长轮询
长轮询(Long plling) 开始时与轮询类似:客户端向服务器发送一个HTTP请求。不过，这里并不是发回一个空响应，服务器会等待，直到客户请求的数据可用时才发回响应。
人进电梯，它就会回到底楼，过60秒再上去。这就是一种轮询。 不过，如果电梯 上到顶层后一直等待，直到有人要下楼(或者电梯不想再等待)，我们可以把这称为一个长轮询模式。
HTTP流模式
采用HTTP流模式(HTTP Streaming) ，客户端发送一个请求来得到数据。一旦服务器准备好数据，它就开始采用流模式传输(向响应对象增加更多数据)，而不会关闭连接。例如，请求从YouTube得到一个视频时，会以流模式得到数据(逐帧传输)，而不会关闭HTTP连接。
实现服务器发送事件
面先来了解实现服务器发送事件(server-sent events,SSE)的标准方法。
WebSocket API介绍
WebSocket接口
客户端APT
使用WebSocket框架
Portal
Atmosphere
选择应用级消息格式
CSV
CSV表示逗号分隔值(comma-separated values)，不过分隔符可以是任意字符，并不仅限于逗号。这取决于解析器的设计和实现。另一个常用的分隔符是| (竖线)。
使用CSV的缺点如下:
- 不适合存储复杂的数据结构和层次结构。
XML
XML可以很好地表示层次数据结构。
它的缺点如下:
- XML非常烦琐。
- 客户端的XML验证是一个复杂的任务。
JSON
JSON代表JavaScript对象记法(JavaScript Object Notation),这是一种
表示结构化数据的方法，所有Web浏览器都可以编码和解码这种结构化数据。
Google协仪缓冲区
Google协议缓冲区(protocol buffer或protobuf)是一个与语言和平台无关的可扩展机制，用于完成结构化数据的串行化。
协议缓冲区的缺点如下:
- 二进制格式对人来说是不可读的。
- 尽管协议缓冲区很紧凑[特别是用一个编码算法(http://bit.ly/UbTSpV)转换了大量数字值时]，但是JavaScript对JSON提供了内置支持，不需要额外的解析器实现。
- 协议缓冲区要求Web浏览器支持二进制格式，但是并不是所有浏览器都支持这一点。可以在Can I Use... (https://caniuse.com/?search=binary)中检查哪些浏览器支持原始二进制数据。
结合代理使用WebSocket
为Save The Child增加拍卖功能
使用Chrome开发者工具监视WebSocket流量
使用Wireshark监听WebSocket帧
创建Save The Child拍卖协议
小结
第9章 Web应用安全介绍
HTTP与HTTPS
认证和密码
认证(Authentication) 是指确认一个用户确实是他声称的那个人。如果用户能提供一个合法的ID和密码组合，这只能证明Web应用知道这个用户，仅此而已。
双因子验证(two-factor verification) :除了询问用户ID和密码外，还会发送一个email.语音邮件或文本短信，其中包含一个验证码，你输入了正确的ID/密码组合之后还需要输入这个验证码。
基本认证和摘要认证
单点登录
单点登录方案(或“缩减”登录方案)越来越流行。例如，一些Web应 用允许你重用Twitter或Facebook凭证(假设你已经登录Twitter或Facebook)，而不需要完成额外的认证过程。基本说来，你的应用可以把认证过程委托给Facebook、Twitter，Google和其他授权服务。
处理密码
你是不是奇怪为什么自动柜员机(ATM)通常会要求你多次输入你的PIN?假设你已经存入一张支票，想看看帐户余额。支票存款完成后，你的ATM会话就会失效，这样可以保护一些粗心的用户，他们可能一完成交易就急着冲出银行，这可以防止下一个来到
ATM机前的人从你的银行帐户取钱。
授权
基于Oaut的认证和授权
简单地讲，Oauth是一种委托授权机制。 OpenID Connect是一个基于Oauth的认证机制。
你可能经常会遇到一些Web应用允许通过社交网络分享你的活动。
Oauth是 “一个开放的协议，允许从Web、移动和桌面应用采用一种简单的标准方法安全地授权”。
使用OpenID Cornnect和JSON Web Token实现联合身份
OAuth 2.0主要组成
下面是参与OAuth认证过程的主要组成部分:
- 在某些资源服务器上拥有帐户的用户(例如，Facebook或Google 上的帐户)，这称为资源所有者(resource owner)。
- 尝试认证资源所有者的应用称为客户应用(client application) 。这个应用将提供者如Facebook登录(Login with Facebook)、Twitter登录 (Login with Twitter)等按钮。
- 资源所有者将在资源服务器(resource server) 上存储数据(例如，Facebook或Google)。
- 认证服务器(authorization server)检查资源所有者的凭证，并返回包含用户有限信息的授权token.认证服务器可以等同于资源服务器，但没有要求二者必须相同。Faccbook、Google、 Windows Live、Twitter和GitHub都是授权服务器。 要得到当前OAuth 2.0实现的列表，可以访问oauth.net/2。
要在你的客户应用中实现Oauth,需要选择一个资源/授权服务器， 研究它的API文档。
Save The Child与OAuth
第三方应用使用OAuth服务器时，主要可以分为两种情况。在第一种情况下， OAuth授权服务器可以公开访问。在第二种情况下，服务器为企业专用。
最大安全风险
注入
如果一个坏人在你的Web应用中注人(inject) 并运行一段代码，这个代码可能会窃取或破坏应用的数据。
跨站点脚本
如果一个攻击者将恶意代码注入人你的Web应用的浏览器端脚本，就会发生跨站点脚本(Cross-site scripting, XSS)攻击。用户在访问一个可信的网站，但是一个恶意服务器通过这个可信服务器向这个用户注入了恶意代码(因此称为跨站点)。
[!NOTE]
STRIDE安全威胁分类
Microsoft发布了一个安全威胁分类（ http://bit.ly/lmzDuFP ） ，将安全威胁划分为6大类(对应缩写STRIDE中的6个字母)
诱骗(Spoofing)
攻击者冒充应用的一个合法用户(例如，一个银行系统)。这可能通过使用XSS来实现。篡改(Tampering)
修改本不应修改的数据(例如， 通过SQL注入)。否认(Repudiation)
用户通过修改应用的日志文件否认发送过数据(例如，完成一个在线买入或卖出交易)。信息暴露(Information disclosure)
攻击者得到访问机密信息的权限。拒绝服务(Denial of service, DoS)
服务器无法向合法用户提供服务，这通常通过生成大量并发请求使服务器饱和来实现。提升权限(Elevation of privilege)
得到提升的数据访问权限(例如，得到管理权限) 。
法规符合性和企业安全
小结
第三部分 响应式Web设计和移动设备
有一个专门比较移动框架的网站（ http://bit.ly/lpKhBtl ） ，它甚至还提供了一个很小的向导应用，可以利用这个应用选择最能满足需要而且指定设备上支持的框架。
第10章 响应式设计：通用网站设计
开发一个既可以在桌面又可以在移动设备上使用的Web应用有不同的方法：
- 单独的原生应用版本。
- 有多个UI的HTML应用。开发一个HTML5 Web应用，不过创建不同的UI布局，将根据用户设备的屏幕大小自动应用不同的UI。
- 混合应用。除了用于桌面的Web应用，再开发一个混合应用(hybrid aplieation)。这个增强型Web应用在移动浏览器中运行，不过打包为一个原生应用，也可以调用移动设备的原生API。
这一章主要强调第2种方法，这称为响应式Web设计(responsive Web design, RWD)。RWD的基本思想是:根据用户设备的显示屏大小，相应地改变Web页面的设计。
一个版本还是两个版本？
拖曳浏览器窗口的右边框，使窗口变窄。此时你只能看到部分内容，这种布局就不具有响应性。应用为页面各个部分定义了固定的大小，即使显示区缩小，页面各部分的大小也不会改变。
究竞需要创建多少个版本的UI?对于可能需要在来面和移动平台，上运行的Web应用，负责开发这种Web应用的人通常要先做一个重要的决定:选择HTML5还是原生版本?不过，即使倾向于选择Web平台，还会有另一个问题:桌面和移动客户端是否使用相同的代码?
可以将Web服务器配置为根据用户使用的设备类型空向到适当的代码。Web服务器可以根据HTTP请求首部的User-Agent属性值来做到这一点。
要维护两个不同版本的应用代码，这比维护一个版本更费功夫:需要有两组HTML、CSS、JavaScript和图像。另外，你的Web应用很可能会使用一个第三方JavaScript框架。
利用响应式设计，可以只创建Web应用的一个版本， 其中包括多个CSS部分，针对不同的屏幕大小控制页面布局。
有多少用户代理
重返原型设计
CSS媒体查询
将桌面Web浏览器的右边框向左拖曳，使它变窄。达到某个断点宽度(breakpoint width)时，你会看到<div>会重新摆放到一个分为两列的窗口。
CSS2和HTML 4中引人了W3C推荐标准“媒体查询”(Media Queries) ( http://bit.ly/Uc4RQa )。其思想是为不同的媒体提供不同的样式表。
#main-container {width: 90%;max-width: 1140px;margin: 0 auto;
}#video-container, #map-container, #charts-container {width: 33.333%;padding-bottom: 33.333%;float: left;position: relative;
}
- 设置桌面上窗口的最大宽度为1140像素。可以认为所有现代显示器都支持宽度为1280像素的分辨率(减去大约10%作为边距和chrome的空间)
- 将宽度的1/3分别分配给视频、图表和地图。
- float: left;指示浏览器从左开始呈现
<div>,下一个元素增加到右边。
多少个断点？
流网格
网格就是指Web页面划分为一些假 想的行和列。不过，顾名思义，流网格很灵活，可以根据屏幕大小缩放。
从绝对大小转向相对大小
可以利用em单位使用相对字体大小。默认浏览器的字体大小可以表示为1 em.因为字体大小恰好为16像素，所以1 em就等于16像素。
Ethan Marcotte在有关流网格的文章（ http://bit.ly/1jLswNi ）中给出了一个公式: target/context=result， 可以根据这个公式计算大小。计算字体大小时，就是size-inpixels/16 = size-in-em。
窗口作为网格
响应式CSS：好消息
不愿意计算百分比。有一个好消息:很多响应式框架都提供了CSS、排版格式和一些JavaScript代码，可以快速完成Web应用的UI开发。
- 可以考虑使用Twitter的Bootstrap（ http://twbs.github.io/bootstrap ）框架，它提供了大量已指定样式的组件（ http://bit.ly/1piyvie ） ，还支持一个流网格系统。
- Foundation 4框架（ http://foundation.zurb.com/ ） 采用移动优先设计，包含一个灵活的网格。
- Skelelon （ http://www.getskeleton.com/ ） 是一组CSS文件，包含一个可扩 展的网格。
- Semantic-UI （ http://semantic-ui.com/ ）是组指定样式的UI组件，也包含一个响应式网格（ http://bit.ly/1pJa675 ）。
建立响应式Save The Child应用
流媒体
video {width: 100% !important;height: auto !important;
}
!important部分会禁用常规的层叠规则，确保将应用这些值，覆盖更特定的宽度或高度声明(如果有)。
小结
第11章 jQuery Mobile
获得jQuery Mobile
组织代码
查看移动设备上的页面
jQuery Mobile中的样式
增加页面导航
增加持久工具条
使用jQuery Mobile实现Save The Child
建立移动版本原型
项目结构和导航
部分代码段
小结
第12章 Sencha Touch
Sencha Touch介绍
完成代码生成和发布
构造UI
容器
使用Sencha Toucb实现Save The Child
构建应用
Application对象
主视图
控制器
Save The Child中的其他视图
存储库和模型
处理水平模式
jQuery Mobile与Sencha Touch比较
第13章 混合移动应用
混合(hybrid)（ http://bit.ly/1iukzBj ）表示混杂(mixed) 或组合(composition) 。在移动Web应用领域中，这种混合是指用HTML5编写的代码可以访问用原生语言编写的API.。
原生应用
如果一个移动应用并非用HTML/JavaScript编写，而是用针对这个移动平台设备推荐的一种编程语言编写，我们就称这个移动应用为原生应用。移动设备的制造商会发布一个SDK,并描述创建原生应用的过程。这个SDK会提供一个API, 可以用来访问移动设备的所有组件(包括硬件和软件)，如电话、通讯录、相机、麦克风等。这个SDK包括.些具有原生外观的UI组件，所以由第三方开发的应用看起来与各个设备制造商开发的应用是样的。
原生应用与Web应用
尽管原生应用可以完全访向移动设备的所有API (例如，通讯录，相机和麦克风)，但它们也有缺点。例如，如果你看望在Apple的App Store发布你的应用，必须提前提交你的应用，等待批准。
移动Web应用的发布不需要第三方参与。由于可以在你自己的服务器上快速发布Web应用的最新版本，而不需要请求许可，
混合应用
混合应用(Hybrid applications)承诺可以兼顾这两个领域的优点。可以用HTML/JavaScript开发Web应用，但通过第三方解决方案访问移动设备的原生API。
Cordova和PhoneGap
Titanium
最后结论
PhoneGap工作流介绍
创建另一个Hello World
在IOS设备上测试应用
安装更多本地SDK
使用Adobe PhoneGap Build服务
发布移动应用
使用PhoneGap实现Save The Child
使用PhoneGap打包任意HTML5应用
为Save The Child增加相机访问
为照片提供服务器端支持
小结
第14章 后记
HTML5不是政瑰花园
企业IT经理需要一个跨平台的开发和部署平台，HTML5承诺会成为这样一个平台。不过，不要完全相信HTML5框架开发商做出的这种100%跨平台的承诺:“利用我们的HTML5框架，你不需要担心Web浏览器之间的差别”。
Dart：一种新兴语言
遗憾的是，用JavaScript开发应用的效率不高。一些人使用CoffeScript或TypeScript,然后转换为JavaScript来完成部署。不过Google创建了一 个dart2.js编译器，可以将你的应用代码快速转换为JavaScript,从而在当令的所有Web浏览器中都可以运行。
