一步一步开发Html5 mobile apps
Download as PPTX, PDF1 like1,210 views
本文介绍了开发HTML5移动应用的步骤，包括跨平台开发的优势、前端和后端架构、用户交互框架及性能优化方法。重点强调了使用MVC模式、适应性设计及移动调试工具的必要性。推荐了多种工具和框架以提升开发效率和用户体验。
一步一步开发Html5 mobile apps
- 1. 一步一步开发HTML5移动应用 鲁超伍 Adam Lu @adamlu
- 3. Fastbook
- 4. 移动应用的博弈 • 特性丰富度 • 性能 • 开发者经验 • 感官 • 可发现性 • 货币化
- 5. 为什么要开发HTML5 Web Apps • 跨系统/平台/浏览器 • 易扩展 • 跨设备开发减少成本
- 8. 基于HTML5应用之前端架构 Application Data Template UI Elements HTML5
- 10. Boilerplate核心之HTML • Mobile viewport – <meta name="viewport" content="width=device- width"> • Home screen icon set • iOS web app – <meta name="apple-mobile-web-app-capable" content="yes"> • HTML5新标签
- 11. Boilerplate核心之CSS • Reset CSS – normalize.css/YUI Reset CSS/HTML5 Reset • CSS Font
- 12. Boilerplate核心之JavaScript • 选择基础类库 – Zepto/YUI/jQuery/Underscore/ • 选择功能类库 – Hammer.js/YUI/iScroll/
- 14. HTML5 移动开发框架 • PhoneGap • Trigger.io • AppMobi • App Accelerator
- 15. 客户端的MVC • Backbones • YUI App Framework • KnockoutJs
- 16. Backbone.js
- 17. Backbone with REST • Sync处理器对应REST的CRUD操作 – Create = HTTP POST – Read = HTTP GET – Update = HTTP PUT – Delete = HTTP Delete URL Verb Description /entities GET fetch entities /entities POST create entity /entities/id PUT modify entity /entities/id DELETE delete entity
- 18. YUI App Framework • Model+View+Router • Pjax = pushState + Ajax
- 20. UI框架 • jQuery Mobile • Sencha Touch • Kendo UI
- 23. 性能 • Manifest • LocalStorage • SessionStorage • CSS3 Animation • Cache
- 24. 使用模块组织你的代码 • AMD（异步模块定义） – RequireJS – SeaJS – YUI Module
- 26. 响应Mobile
- 27. 媒体查询 • @media all and (min-width:500px) { … } • @media screen and (min-width: 400px) and (max-width: 700px) { … }
- 28. MediaQueri.es
- 29. 开发第四步 DEBUG
- 30. 移动调试 • Chrome开发者工具 • 远程调试 – Edge Inspect – Weinre – iWebInspector • 多设备/多浏览器测试
- 31. 书籍推荐
- 32. @adamlu THANKS!