html5和移动web应用
TRANSCRIPT
移动web应用与HTML5hengwang
移动WEB应用的价值
移动WEB应用的价值
跨平台的通用性
移动WEB应用的价值
跨平台的通用性
更加敏捷
移动WEB应用的价值
跨平台的通用性
更加敏捷
类客户端体验
移动WEB应用的价值
跨平台的通用性
更加敏捷
类客户端体验
与客户端互操作
认识浏览器
认识浏览器
PC的浏览器格局：IE占大部分市场，标准兼容性差
认识浏览器
PC的浏览器格局：IE占大部分市场，标准兼容性差移动设备的浏览器格局：webkit内核的浏览器占绝对主导，标准兼容性好
浏览器基于WEBKIT内核
webkit
浏览器基于WEBKIT内核
webkit
wekit特点：• 速度快、稳定• 对web标准兼容性好• 对html5支持好
网页与客户端互操作
（函数调用）
（发送消息和回调）
页面三要素
页面三要素
html（内容）
css（风格）
javascript（行为）+ +
页面三要素
html（内容）
css（风格）
javascript（行为）+ +
有什么
页面三要素
html（内容）
css（风格）
javascript（行为）+ +
有什么 像什么
页面三要素
html（内容）
css（风格）
javascript（行为）+ +
有什么 像什么 干什么
页面三要素html
（内容）
css（风格）
javascript（行为）+
页面三要素html
（内容）
css（风格）
javascript（行为）+
移动设备常用事件touchstarttouchmovetouchendgesturestartgesturemovegestrueendswipeorientationchangeclickscroll
影响页面速度的因素html下载
css下载
js下载图片下载
页面渲染
start end
影响页面速度的因素html下载
css下载
js下载图片下载
页面渲染
start end
网络延时带宽页面大小静态资源大小（css, js, 图片）页面元素渲染时间本地缓存
用户的上网方式
数据来源：友盟国内Android数据报告 2011.1
从页面速度看页面设计
从页面速度看页面设计
单页面内容不宜过多
从页面速度看页面设计
单页面内容不宜过多
风格统一，样式简单，避免使用渲染开销大的样式
从页面速度看页面设计
单页面内容不宜过多
风格统一，样式简单，避免使用渲染开销大的样式
交互统一
实时二维绘图:<canvas>
demo1 demo2
媒体播放:<video><audio><video>
<audio>
检测地理位置
html5geolocation
API
GPS
WiFi SSID
Cell ID
IP Lookup
离线支持和本地存储
离线支持和本地存储缓存离线资源(cache manifest)
离线支持和本地存储缓存离线资源(cache manifest)
三种本地存储：
离线支持和本地存储缓存离线资源(cache manifest)
三种本地存储：Session Storage：key/value形式，会话阶段存储
离线支持和本地存储缓存离线资源(cache manifest)
三种本地存储：Session Storage：key/value形式，会话阶段存储
Local Storage：key/value形式，永久存储
离线支持和本地存储缓存离线资源(cache manifest)
三种本地存储：Session Storage：key/value形式，会话阶段存储
Local Storage：key/value形式，永久存储DB Storage：基于SQLite的数据库存储
各浏览器对HTML5的支持测测你的浏览器对html5的支持
+
CSS3关键特性新样式：边框，圆角，阴影
CSS3关键特性变换效果：元素旋转（rotate）
(点击图片查看demo)
CSS3关键特性变换效果：元素缩放(scale)
(点击图片查看demo)
CSS3关键特性变换效果：元素移动(translate)
(点击图片查看demo)
DEMO展示
iUI
UI框架和交互
DEMO展示可拖放的华丽图片集
(点击图片查看demo)
DEMO展示只针对Safari的图片变换效果
问题时间