• 1. HTML5 Mobile Web App浅谈@三桥sankyuhttp://weibotouch.sinaapp.com/
  • 2. 主要内容移动Web的过去与现在1HTML5在Mobile Web的可行性2移动Web的未来4WeiboTouch(Mobile Web实践)33
  • 3. 前端技术的发展过程 \] 第 2 页tablediv+CSSHTML5+CSS3table布局页面 图片为主 JS代码满天飞代码和样式分离 浏览器兼容问题 AJAX语义文档 减少图片 更高效API
  • 4. WAP时代第 3 页平台Symbian WindowCE WindowMobile MTK语言WML HTML XHTML代表WAP浏览器 UC浏览器 Opera Mini
  • 5. 移动Web时代第 4 页平台Android iOS BlackBerry语言HTML(5) CSS(3) JavaScript代表iOS Safari Android Browser BlackBerry Webkit WebOS Palm
  • 6. Mobile Native App UI第 5 页
  • 7. 第 6 页Native App优点 更加的用户体验和交互操作,针对不同平台提供不同体验; 不受网络速度的限制,节省带宽成本; 可访问本地硬件设备和资源; 盈利模式相对清晰。 Native App缺点 不同平台间的移植麻烦; 维护成本高、调试困难; 需要第三方审核。
  • 8. 第 7 页Web App优点 开发效率高、成本低。 跨平台应用,UI统一 调试、发布方便;一次编写,云端运行 无需安装或更新成本Web App缺点 运行状况受网络速度的限制 无法发挥出硬件设备和操作系统的优势
  • 9. 移动Web浏览器第 8 页基于Webkit硬件设备屏幕大小 这类的浏览器都含有以下特点:iPhone屏幕大小320*480和480*320 触摸屏、缩放 单核、双核CPU 内存大 GPRS、EDGE、CDMA、3G 支持WiFi 对HTML5和CSS3支持良好 速度、高效稳定、兼容性Android Android Browser iOS Mobile Safari BlackBerry Webkit Symbian S60 Web Browser for S60
  • 10. Google第 9 页
  • 11. 第 10 页设置viewport,适应移动设备的显示宽度 user-scalable – 用户是否可以手动缩放; width – 定义viewport宽度(默认为980像素) ,例子中值为device-width是指设置为设备显示宽度; height – viewport的高度; initial-scale – 初始的缩放比例 (范围从 0 到10); minimum-scale – 允许用户缩放到的最小比例; maximum-scale – 允许用户缩放到的最大比例;
  • 12. 第 11 页隐藏safari导航栏以及工具栏 Web App启动画面 设置iPhone主屏幕Icon
  • 13. 页面代码更生动第 12 页HTML5新元素标签 有含义的元素标签 更合理的页面代码header、footer、article、section、aside……
  • 14. 移动Web页面布局原则第 13 页使用最少DOM元素实现更多的功能; Native Mobile App UI 减少页面渲染的频率或次数 减少CSS动画功能
  • 15. Web App UI 实践第 14 页
    MailBoxes

    Inbox

    Edit
    邮件1
    邮件2
    邮件3
    邮件4
  • 16. Google+ Web App第 15 页
  • 17. 随时随地定位你的位置第 16 页GeoLocation API能够获取用户当前位置。成熟的HTML5规范支持大部分现代浏览器多种数据源获取位置信息适合在移动设备Web应用程序中使用
  • 18. 获取位置信息的数据源第 17 页定位准确 依赖无线网络的场地定位差别大 网络速度慢 依赖于网络提供商的介入设备定位精确 需要额外设备支持 定位时间长、耗电量大
  • 19. GeoLocation API第 18 页 Geolocation API地理定位 单次定位请求当前地理位置:
  • 20. 第 19 页 Geolocation API地理定位 重复请求当前地理位置:
  • 21. 第 20 页背景 background圆角 radius阴影 shadow变形和动画Transform Animations文本字体的阴影: text-shadow 合模型的阴影: box-shadow webkit特性 多图片背景 自定义渐变border-radius -webkit-border-radius 缩放、倾斜、移动 linear、ease ease-in、ease-out ease-in-outCSS3虽然在现代浏览器中的支持程度各不相同。但在移动Web浏览器上,Android Broswer和iOS Safari基本上占据重要的位置,并且他们都将Webkit作为浏览器内核。 以下CSS3特性非常适合在这两个主流的移动Web浏览器中应用。CSS3
  • 22. 移动JS框架第 21 页and more
  • 23. 三大主流移动JS框架对比第 22 页跨平台,继承Ext风格 丰富的UI组件 酷似Native 原生App 基于jQuery 页面驱动 更像WebPage应用跨平台,支持多达7种平台 支持HTML5部分特性 JS类库庞大 渲染速度慢 UI定制复杂采用Ajax UI库少
  • 24. Weibo Touch第 23 页Sencha Touch CSS3 支持Chrome、Safari 支持iPhone、Android
  • 25. 实现?第 24 页新浪微博接口API http://open.weibo.comJavaScript框架结构: JSSDK 2.0 + Sencha TouchSina App Engine http://sae.sina.com.cn
  • 26. 什么开发工具?第 25 页
  • 27. 移动Web展望第 26 页移动Web App是HTML5和CSS3最好的实践平台 一种Web的延续,一种全新视觉设计 Native App + Web App模式结合 云端应用
  • 28. 谢谢Q&A27