CH12
开始前考虑的事项
1，整体受众，以此设计用户界面的外观，感觉，功能和流程。
2，无论设备是什么，Web应用程序或站点都应该简洁，可理解，相关（重要信息放在屏幕顶部）。
3，五类移动应用程序：有趣或严肃的生产率应用程序，有趣或严肃的沉浸类应用程序，以及实用的应用程序
生产率应用程序，常用来完成重要的任务，比如阅读，撰写和分类电子邮件。
倾向于以分层的方式组织信息，使用多种视图，用户界面简介、整洁，标准控件和视图组成。
沉浸式应用程序，全屏幕，视觉丰富的环境，是用户体验集中在应用程序的内容上。包括游戏，媒体，以及其他娱乐。
倾向于隐藏用户的大部分用户界面，可以处理大量数据，但不会展示数据，在游戏或体验的环境中展示信息。
实用程序，服务于单个目的的应用程序，可以快速查看，缩小信息量范围，应该具有吸引力。
4，设计应用80-20规则，80将使用数量有限的特性，20的将使用所有的特性。
移动平台的特点-丰富的可能性
小型屏幕，较少的内存，管理内存，一次一个窗口一个应用程序，最小的文档（容易使用，功能显而易见）。
针对移动的webkit
1，meta,link，例如告诉浏览器-妥及应用程序
<meta name="apple-mobile-web-app-capable" content="yes" />
2，状态栏
改变状态栏颜色，content内容可以为black，default，black-translucent
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
3，导航栏
隐藏导航栏，或利用JS隐藏。
4，开机图标
5，主屏幕图标
最小键盘化输入
在触摸屏上数据输入成本比率更高。
其他需要考虑的事项
1，保持简明：明显，最小化必需的输入，最少化文本
2，避免悬停时才可见的隐藏内容
3，不要使用下拉式菜单，使用单击菜单
CH13-把移动和触摸作为目标
1，缩小尺寸
某些应用阻止缩放：
<meta name="viewport" content="width=device-width;
initial-scale=1.0;
user-scalale=0;"/>
2，触摸我
捕获触摸的addEventListener。
触摸与鼠标点击的区别：抛出事件的区域大小和同时抛出的事件数量。
触摸事件：touchstart，touchend,touchleave,touchmove
四个事件会返回一个TouchEvent对象，一个changeTouches集合以及Touch对象。
Touch对象是一个只读对象，包含触摸点的坐标属性，（pageX，pageY，screenX，screenY，clientX，clientY），target，identifier。
TouchList是触摸事件的各个触点列表。
TouchEvent对象包含touches、targetTouches和changedTouches集合，以及altKey，mataKey，ctrlKey，shiftKey这些布尔值。
利用一个手指或者触摸笔触摸设备会抛出单个事件，多个手指会抛出多个事件。
按屏幕时抛出touchstart，移过屏幕重复抛出touchmove事件。屏幕压力消失，抛出touchend事件。
另一个事件（比如突然打来电话）取消触摸touchcancel事件。
伪单击事件：
1，点按高亮色
没有在触摸设备上悬停的事情，所以我们具有链接点高亮色。
tap-highlight-color: #EEEEEE;
2，消除选择对话框
触摸并按住文本副本或拖动时，会出现选择对话框，允许复制和定义所选文本。可以在webkit浏览器使用
-webkit-user-selected: none;
3，消除图像对话框
按住图像时，出现保存复制的面板，可以通过给图像添加：
touch-callout：none;
4，消除移动镜头
不希望用户意外弹出操作系统菜单，利用CSS禁用移动镜头。不希望始终禁用，可以使用：
touch-action: none;
5，onTouchEnd
处理单次单击和两次点按，需要一个事件处理程序干预。
6，触摸以进行滚动
在滚动时应该取消触摸事件。
硬件访问
1，手机移动和方向
为了处理设备的方位，具有deviceOrientation事件规范，提供3个窗口事件。
加速计：检测速度，倾斜和晃动。
window.addEventListener("devicemotion",function(){
})
磁力计：测量设备的朝向
window.addEventListener("compassneedscalibration",function(){
})
螺旋仪：旋转速率
window.addEventListener("deviceorientation",function(){
})
2，设备状态
网络连接：network API 展示了navigator.connection.type属性，具有字符串值
unknown
ethernet
wifi
2g
3g
4g
none
API 返回第一次连接的连接类型。
navigator.connection.bandwidth返回0，无穷大，或每秒的兆字节数
navigator.connection.metered属性为true、false，如果为true，ISP将限制你的用户。
电池：navigator.battery对象
navigator.battery.charging
navigator.battery.chargingTime
navigator.battery.dischargingTime
navigator.battery.level表示电量，在0-1之间。
还有其他的API。
移动性能
1，电池寿命：
（1）用暗色调，设计时颜色越明亮，屏幕也必须越明亮。
（2）使用JPEG，压缩图像更好，而且更快渲染。渲染需要消耗能量。
（3）减少JS
（4）消除网络请求，浪费带宽和电量
（5）硬件加速，意味着在GPU上渲染动画，可以改进电池寿命。但是内存是有限的。
避免重绘和重新排版
2，延时
（1）减少HTTP请求数量
方法有：浏览器缓存，对于不会改变的静态元素，设置非常遥远的expires头部，对于JSON响应的动态成分，使用合适的Cache-control头部，利用条件请求帮助浏览器；
组合式JavaScript，最小化并压缩JavaScript，或者把所有的JavaScript连接成单独的一个文件。
单个样式表，利用Sass帮助模块化CSS文件。
图像精灵Sprite
图像压缩：gzip工具压缩软件
数据URI
图标和字符集
检查网络请求
（2）减少请求的尺寸
最小化基于文本的资源
压缩二进制文件
利用gzip压缩一切
减少图像尺寸
忽略框架
把cookie减至最少
延迟第三方脚本
（3）内存
（4）优化图像
举个例子:
- 嵌入CSS和JavaScript以便进行第一次页面加载
- 提取上述嵌入的文件，并把它们放入localStorage
- 利用提取localStorage文件名称创建cookie
- 在后续的请求中，检查cookie的服务器端
- 基于cookie值，只嵌入新的和遗漏的脚本
- 加载来自localStorage资源的文件
总结
O’REILLY的这本HTML5移动开发，主要系统的从新元素，旧元素方面阐述了H5的一些新特性，但是对于书中举例的移动小游戏并未单独做开发的阐述，全文偏向于理论，实践部分偏少。
阅读指数:三颗星吧