html5开发经验.pptxVIP

移动Web开发与HTML5经验分享主要内容移动web开发预备知识智能手机Web开发HTML5本地存储HTML5离线API互动：你做过移动Web开发吗?一年前智能机战略项目代号HTML5主要面向iOS、Android第一个版本 for iPadAJAX + CSS3Why me？WAP时代WAP开发用到的知识WAP1.x：WML、WMLScriptWAP2.0：XHTML_MP、JavaScript、WCSS、WapCSS接入点：CMWAP、CMNET常用浏览器：Opera，UCWebmobile web网络GSM/3G/WIFI续航问题芯片能力单任务，web程序无法后台运行屏幕大小输入方式:触控、焦点、指针特定设备浏览器HTML5时代硬件配置版本上市时间CPU内存一代iPhone07年400MHz128M二代iPhone3G08年三代iPhone3GS09年600MHz256M四代iPhone410年1GHz512M一代iPad10年1GHz256M二代iPad11年1G双核512MHTML5浏览器/http:///html5test.co/m 100分移动平台支持HTML5时间iOS2007年Android2008年BlackBerry OS2010年诺基亚Meego2011年Windows Phone2011年多终端版本适配硬件资源Windows开发环境开发：Chrome/ Safari（Webkit）虚拟机跑Mac OS运行iPhone模拟器网络配置HTTP代理抓包第二个版本iPad - iOS/AndroidWifi - 2G/3G资源：还是2个人为什么是 Sencha Touch2011年初 2.0上线可用性测试实验设备一间独立、安静的房间、两台装有测试软件（morae manager、morae observer、morae recorder、morae player）的电脑、两个摄像头。整个任务平均每人需要22.08分钟完成。在操作过程中，熟练用户最快操作时间为17.1分完成，初手用户最长完成时间为27.77分。技术角度看DOM臃肿脚本文件太大了不兼容Android(CSS3实现局部滚动性能不好)基于Sencha Touch，几乎没有改造的可能性版本太多了，无法为iPhone、Android各维护一个版本3.0 一切重来版本上线时间支持平台输入设备1.02010-10iPad触控2.02011-1iOS (iPhone/iPad/iPod)触控3.02011-11iOS、Android、Others触控、滑轮、鼠标交互设计最怕纸上谈兵全屏滚动position:fixed (Android 2.2,iOS 5)overflow:scroll (iOS 5)安卓啊！控制软键盘input type=“search”/input type=“email” /input type=“tel” /input type=“url” /input type=“number” /添加到桌面link rel=apple-touch-icon-precomposed href=“icon.png/桌面图标其它一些知识No IE 高版本js querySelector/ querySelectorAll安卓不支持普通元素的onclick 与ui约定好用系统元素各种meta配置meta控制缩放meta禁止默认行为(把号码当手机号)……各种古怪的浏览器问题OS不同键盘输入keyCode不同页面底下要留空白 有些浏览器下面会有悬浮的按钮链接协议a href=“tel:110”呼叫/aa href=“sms短信/a领导问：有什么HTML5特性？本地存储HTML5的本地存储技术，包括两个容量为5MB的Storage存储对象，以及最大可以存储到50MB(iPhone)的SQLite嵌入式数据库。50MB =？ 20部订阅小说 500封账单邮件 10万个通讯录联系人StoragelocalStorage sessionStoragelocalStorage[“myKey”]=“hello world!”localStorage.removeItem(“myKey”)localStorage.clear()window.addEventListener(“storage”,function(e){})5M限制key的设计有讲究，可以加时间戳遍历有点耗性能for(var k in localStorage){ }SQLite嵌入式数据库默认5M，可以扩容数据字段弱类型var db = window.openDatabase( “myDB”, “1.0”, “my test db”, 1024 * 1024 * 50);做好