Mobile web

1. 移动网站的开发 蔡伟江 @wei_jhti

2. 背景 第五次科技革命-移动互联网 智能手机的发展,普及 移动（无线）网络接入技术的发展 HTML5/CSS3发展 此次分享内容主要两个内容： 1、现阶段WAP网站的开发； 2、HTML5/CSS3与移动网站开发。

3. 概述 随着移动互联网的发展，国外一些媒体给出了一个“第五次科技革命”的这个概念。而随着智能手机的日渐流行和平板电脑的出现，移动互联网的潜力和趋势也愈发显现，“第五次科技革命”——移动互联网正式走进了我们的视线。而针对移动互联网原动力——移动设备的web开发越来越受到关注，国内外很多公司也开始重视面向所有移动设备的web开发。

4. 移动设备WEB开发 移动WEB浏览器开发(对新标准支持的浏览器如:html5/css3支持的浏览器) 移动WEB应用开发(功能应用,游戏……) 移动网站开发 移动设备: 跨平台、跨浏览器，就好像我们平时做的WEB网站开发，要对各个浏览器做兼容一样，在移动设备上也存在同样问题，甚至情况更加复杂。 因此在做移动网站开发需要考虑几个问题： 1、哪些平台和浏览器比较流行； 2、哪些浏览器支持现代脚本； 3、哪些设备或模拟器去做测试。

5. 移动用户设备统计分析 数据来源 : http://gs.statcounter.com/

6. Mobile OS – Worldwide(6/10 – 6/11) 31.57% 23.21% 15.22% 14.23%

7. Mobile OS – China (2010年前) 66.88% 15.57% 8.83%

8. Mobile OS – China(2010-2011) 58.86% 23.76% 9.61% 3.14% PS : 国内山寨手机一般使的是mtk系统

9. Mobile Browser - China 62.1% 19.04% 7.59% 2.84% 2.74%

10. Mobile Browser -Worldwide

11. 操作系统及浏览器种类繁多,给移动网站开发带来一定的困难。 智能移动设备不断更新发展，代表着一个方向。 移动网站开发中，对低端机如何处理？

12. 国内的移动网站一般做三个版本 iPhone/Android等基于webkit/gecko浏览器的高端用户；使用标准的HTML/CSS/Javascript技术构建。特点：界面效果很酷，浏览器支持特性增强，被喻为：移动互联网革命。 现在国内大部份手机网站：使用WAP2.0技术构建的网站，使用XHTML/WAP CSS来实现，相对于WEB来说WAP2.0提高了内容表现力。 最古老的WAP1.0构建的网站，也是WAP的最初版本，仅支持WML，WMLscript等规范。 wap.163.com/3g.sina.com/wap.taobao.com///demo.x.weibo.com/wap.php jiepang.com/s//http://3g.renren.com///http://wap.yyyweb.com/index-wap2.php//

13. 关于WAP网站 WAP网站也称手机网站，由于无线网络传输慢、手机的处理能力弱、内存小、屏幕小，早期的WAP页面采用了不同于HTML、更为简单的WML文档格式开发，提供专门适合手机小屏幕显示的简单页面。 随着3G的发展,将进入移动互联网时代,用户通过手机上网将越来越普及。当速度将不再成为问题的时候，随身携带的手机（移动设备平板电脑等），将成为主流工具。

14. 移动网站开发 – 标记语言 > WML(Wireless Markup Language - 无线标记语言) > XHTML Basic (W3C) > XHTML Mobile Profile (Open Mobile Alliance 开放移动联盟) 看一张《移动web相关标记语言的演进》的图表

16. 移动网站开发 – 标记语言 在最初，WAP论坛(后来和NTT合并，组成OMA，Open Mobile Alliance)创建了一种基于XML的语言，称为WML，这是用于WAP网站的标记语言。它并不是理想的方案，因为它将网站分割为两部分：普通页面使用(X)HTML，而移动网站使用WML。网站开发者想要做一个移动网站也不得不学习一种新的语言而不是转换技术，“一站式”的信条也被打破，用户不能访问他们喜欢的网站并且不得不发现这个网站的WAP版本——如果它们存在的话。另外日本的NTT创建了他们自己的语言cHTML(compact HTML)，但是它并不能与XHTML和WML兼容。 由于这与理想中的方案相去甚远，W3C创建了XHTML Basic 1.0。正如其名，这是一个XHTML 1.1的子集。由于XHTML 1.1将XHTML改善为小型的模块，一个子集就可以只包含一些必须的或者可以在低端移动设备上控制的基本的模块、元素和属性。

17. 移动网站开发 – 标记语言 XHTML Mobile Profile是WAP论坛为WAP2.0所定义的内容编写语言。XHTML Mobile Profile是为不支持XHTML的全部特性且资源有限的Web客户端所设计的。它以XHTML Basic为基础，加入了一些来自XHTML 1.0的元素和属性。这些内容事实上就包括了一些其他表示元素和对内部样式表的支持。和XHTML Basic一样，XHTML Mobile Profile是严格的XHTML 1.0子集。 下面看一下WML、XHTML Basic、XHTML MP文档

18. 移动网站开发 – 标记语言 2009年 特点：1.开始加入JS解析模块 2.替换解析引擎KXml 3. Dom API HTML5 WAP1.1 2010 发展至今 特点:1.实现HTML5的主要功能 2.与Apple & Andriod手 机浏览器兼容 3.采用服务器端Js编译技术 提高脚本效率, 减少网络流量. HTML +CSS +JS 2007年 特点：1.wap1.0/1.1协议 2.支持事件处理 3.支持Jpg/gif解码 WAP2 2008年 特点:1.实现了XHTML协议 2.初步解析CSS样式表 3.页面渲染方式的改进

19. WCSS介绍（与XHTML MP配合使用的） WAP2.0下专属的CSS：WCSS。也叫 WAP CSS/Wireless CSS/Wireless Profile CSS（WAP Cascading Style Sheet ） 是CSS2的子集 + 一些WAP特有的扩展 目的：定义文档的风格和布局，从文档内容中分离。

20. WCSS拥有一些WAP特有的CSS扩展 WCSS快捷键扩展 给元素定义快捷键：-wap-accesskey属性 可用的属性值*，#，0，1，2，3，4，5，6，7，8，9 如：input.wcss_class {-wap-accesskey: 4} WCSS输入扩展 由两个属性组成：-wap-input-famat和-wap-input-required，对应于WML中<input>元素的format（定义类型和字符数量）和emptyok（是否可以留空）属性。早些的移动设备上WAP浏览器不支持，但支持format和emptyok属性作为XHTML MP的扩展。为了更好的兼容性，建议WCSS和WML都使用。 WCSS Marquee扩展 可以在屏幕上滚动一些内容（一行文字，一个图片，一个链接等），但一些WAP浏览器只支持滚动文字。当内容超过屏幕时很有用。

21. 链接 What is XHTML MP? 关于XHTML MP，XHTML Basic,XHTML XHTML Mobile Profile and XHTML Basic对比 WAP 2.0开发XHTML MP (XHTML Mobile Profile) 语法及注意问题 移动网站开发——标记语言 移动网站开发——CSS WCSS

22. 小结 现阶段WAP网站开发使用XHTML Basic /XHTML MP及WCSS为主。有需要还要开发WML网站 开发调试设备：WinWAP、OpenWave、Opera、Chrome模拟手机浏览器、Firefox插件…… 讨论：WAP网站的未来与发展……

23. HTML5/CSS3与移动网站 由于wap的诞生是为了适应手机硬件性能低，网络带宽窄的需求。随着如今手机硬件性能的大幅提升，3G等无线高速网络的普及，wap技术注定只是过渡技术。 XHTML Basic或XHTML MP就如XHTML，难逃宿命！移动网站也将迎来HTML5时代。

24. 移动平台: Flash VS. HTML5 HTML5是公开标准协议,而非私有 在移动平台上Flash先天不足 苹果的iPhone与iPad不支持Flash HTML5更方便移植与推广 HTML5提供了更多针对移动设备的特性 Flash 不会消失掉

25. Flash player 与 HTML 5 视频播放CPU消耗对比评测 我们可以看出，在Mac上，Flash Player在Safari上的表现确实不如HTML 5, 效率低了2倍，即使换上了Flash player 10.1. 还有有1.5倍的差距。但除此之外Flash player的表现完全胜出HTML5, 当然这也许是由于其他浏览器对HTML 5的支持还有待提高。但Flash player在Windows平台上各种浏览器下的表现都是相当不错，尤其是Flash player 10.1，不知道这是否可以说明，如果是基于Windows平台的电脑，手机或者掌上电脑，Flash Player 还是浏览器视频播放的首选。

26. XHTML5新特性在移动网站的优势 语义化标签。html5解 决了一个flash等插件模式所面对的大问题：搜索引擎的友好性。 对于音频与视频播放的支持。html5新 加入了<audio>及<video>标签，对于流媒体播放提供了原生的 支持。并且可以通过设置不同的解码方式来支持各种格式的媒体文件。<video>提 供了对于包括canplay（已缓冲到足够的数据进行播放）和 canplaythrough（已 完成缓冲，可以从头到尾播放）在内的22种流媒体事件的支持。可以满足几乎所有流媒体应用的需求。 canvas标 签与绘图。移动设备游戏开发方面有很大优势。 地理感知。html5中可以通过接口获得访问者的地理位置，这在搜索引擎，移动设备等领域都有着很大的应用前景。 硬件加速。基于html5的 GPU加速。3D 图形 显示等处理交由图形加速卡来实现。移动设备游戏开发方面有很大优势。 本地存储。 html5允许通过基于javascript的 统一api在本地创建数据库，执行sql语句，创建事务。对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备，比如 iphone，ipod touch，离线存储使得web前端工程师可以很容易的针对它们开发应用程序。

27. 优势明显，但也有令人担忧的 尽管同属HTML5标准，但各款浏览器在使用HTML5标准播放视频时所使用的编码技术却未必相同，例如：对于视频数量巨大的网站而言（Youtube 、youku、土豆……），最理想的情况是尽量控制这些视频所使用的编码器种类，否则将很难做统一的处理。 HTML5播放器在播放视频流时的性能和系统资源的利用等方面也存在一些问题，而在播放实时视频时，是否能完全控制系统缓冲和视频画质对播放器的性能是非常重要的。除此之外，DRM盗版防护技术也是令视频网站感到头疼的问题之一。 一些网站（Youtube）还具备将外网视频直接嵌入的功能，而HTML5在这方面的表现则一般不如Flash。 HTML5播放器并不能支持摄像头/麦克风，而眼下Youtube网站的Flash播放器却可以支持使用播放器直接摄像头/麦克风现场录制视频的功能，没有Flash，这一点是很难做到的。

28. CSS3与移动网站 Media Query(媒体查询) media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视。 事实上我们可以将media query看成是media type+css属性判断。 请注意，下面提到的一些关键字等内容，有些是在media type中就可用的，但是放到media query中将能更好的发挥其作用，所以我就在适当的地方引入。

29. CSS2： 指定媒体类型（Media type）为screen，则样式应用于阅读屏幕；指定媒体类型为print则应用于打印机等 <link type=“text/css“rel=”stylesheet”media=“screen”href=“screen.css"> <link type="text/css" rel="stylesheet" media="print" href="sample.css">

30. CSS3 媒体查询（Media Queries） CSS3媒体查询增强了媒体类型的功能，允许为不同设备定义更精确的样式。一个媒体查询语句项由媒体类型和可选的用于检查媒体特性的条件表达式组成，通过使用width、height和color这些媒体特性，可以控制内容在不同设备下的输出而不需要改变内容本身。 <link rel="stylesheet" href="sample.css" media="screen and (min-width:480px), print, csser" /> 上面的media语句的含义为，满足以下条件则引入sample.css渲染页面内容：页面宽度大于等于480px 或者 打印设备。对于不存在媒体类型csser，浏览器忽略解释。从上面代码可以看出媒体查询的语句结构： media可以包含多个媒体查询项，每项之间以半角逗号隔开。 媒体类型与表达式之间以and连接，每个媒体类型可以有多个表达式。 媒体类型可以省略，如@media (min-width: 480px) 默认的媒体类型为all

31. CSS3 媒体查询（Media Queries） 转换为css中的写法为： @media screen and (min-width:480px), print, csser {selector:{...}} 再举一下例子： @media screen and (max-width:240px){ body{ font-size:12px; } } 如果设备的浏览器的最大宽度是240px，则页面将使用中号字体。 PS:属性和值之间是用冒号连接的，而不是等号，这与正常的CSS的写法一致。 从上面的例子也可以看出，媒体查询语句一般由media type+一到多个CSS属性判断组成，而多个CSS属性判断可以用关键字and连接： @media screen and (min-width:1024px) and (max-width:1280px){ body{ font-size:12px; } }

32. 区分iPhone和iPad的方法 <linkrel="stylesheet"media="all and (max-device-width: 480px)"href="iphone.css"> <linkrel="stylesheet"media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"href="ipad-portrait.css"> <linkrel="stylesheet"media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)"href="ipad-landscape.css"> <linkrel="stylesheet"media="all and (min-device-width: 1025px)"href="ipad-landscape.css"> W3C CSS3 Media Queries 参考 media type与media query

33. CSS3 Region 线性内容(Threading content): 从一个区域“流向”另一个区域的内容。 任意形状的容器(Arbitrarily shaped containers): 在非矩形区域内显示文本。 任意形状环绕(Arbitrarily shaped exclusion): 文本环绕非矩形区域。 区域样式(Region styling):根据流向区域显示内容。 CSS3 Region：基于HTML和CSS3的富页面布局

34. 浏览器对HTML5 支持测试 Html5test.com Chrome 12.0.742.122 FireFox5 IE 9 Safari 5.0.5 Opera 11.50 讨论：HTML5在移动设备上的未来

35. 总结 正如之前所说的，XHTML basic支持了大部分在XHTML中定义的基础特性，所以对于大部分前端开发人员来说，开发一个基于XHTML Basic 1.1或XHTML MP的网站并不困难。但是由于移动设备厂商和设备都非常的多，所以各个设备在对某个细节上可能会有差异。 W3C存在的最大价值，是为我们提供成熟而统一的解决方案，虽然XHTML MP成了事实上的Mobile 标准，但是显然XHTML Basic功不可没，如果说两者并存尚容易让我们混淆的话，希望在不久的将来，HTML 5能够成为移动互联网中事实上的标准，这无疑将大大减少我们的开发需求。 但是由于现实中很难将所有的设备统一，这就造成实现方式的必然存在差异。可以预见，XHTML Basic /MP和HTML 5将成为两种并行的规范存在，我们不得不用XHTML Basic/MP为低端设备开发基础页面，同时使用HTML 5为iPhone和Android等系统实现富界面。

36. 多谢捧场! @wei_jhti