读书笔记:智能手机web标准开发

【移动web网站的标记语言】

A       WML即无线标记语言(主要面向旧式的移动设备)

         主要版本WML1.1 WML 1.31.3引入了对彩色图像的支持。相应的脚本是WML script

         过时的语言了,iphone明确表示不再支持WML

         目前的情况(201010月),以美国市场为例,5%的手机仅支持WML,剩下的95%支持XHTML-MP, XHTMLHTML

B       CHTML(日本特有的,docomo发起的)

         在日本市场,使用慢慢也在减少了,通过CHTML开发的各种I-mode服务已经被XHTML迅速的取代。

C       XHTML-MPXHTML移动配置文件,(主要面向非智能手机和除iphone以外的绝大多数智能手机)

         XHTML-MP目前最广泛的移动web标记语言

         XHTML-MP 1.0设定了移动标记语言的基本标记。

         XHTML-MP 1.1 添加了<SCRIPT>标记并支持移动JavaScript

         XHTML-MP1.2 添加了更多表单标记和文本输入模式。

D      XHTML (主要面向高级移动设备和智能手机)

E       传统HTML (主要面向高级移动设备和智能手机)

         虽然现在的智能手机很多已经支持html,但是不推荐使用,因为html的语法非常的松散(据Opera统计,事实上只有4.13%的网页符合WEB标记和脚本编写标准)。为了对应这些松散的语法,桌面浏览器做了大量的工作。但是移动浏览器出于性能考虑,对这方面的优化很少。所以对于要面向智能手机提供丰富体验的站点,建议使用XHTML

AndroidiPhone等新的智能手机都支持XHTMLHTMLJavaScriptAJAX。部分HTML5CSS3

F       HTML5

在高端手机上,HTML5有取代XHTML的趋势。


技术点:

A       MIME类型

不同的语言,MIME类型不一样。MIME类型是页面能否被正确解析的前提。

由于传统的服务器(如apache)是面向桌面web的,所以需要向Web服务器配置中添加新的MIME类型(apache中使用AddType指令向mime.types等配置文件中添加新的MIME类型)。

         如果页面是动态生成的,也可以用动态语言发送header信息。

B       头信息要正确。

XHTML-MP 1.0为例:

<?xml version="1.0" encoding="UTF-8"?>

<!—上面是XML声明。XHTML-MPXML -->

<!—DOCTYPE声明该文档是XHTML-MP 1.0 -->

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

【移动JavaScript

与桌面JavaScript的差异:

1       全局方法eval是可选的

2       with关键字是可选的。

3       动态函数构造是可选的。

         比如下列方法可能在某些支持JavaScript的手机上并不支持:

         Window.onload = new function() {alert(‘Hello World’);};

 

4         必须使用分号终止编程语句:脚本行必须以分号结束。

5       DOM和事件支持会因移动浏览器不同而有差异。

         比如:在最新支持重力感应手机终端上,屏幕翻转时触发的函数也可能不一致,有的使用onresize函数,有的使用onorientation函数。

6       减少了支持的字符集。

7       必须声明相应的DTD,如xhtml1.11.2

8       某些机型的专有方法:比如有些机型对GPS的支持,和对多点触摸的支持。

 

开发原则:

A       在不支持JavaScript的终端,也要提供可用的web体验。

B       真机测试。

C       AJAX使用计时器的时候要谨慎,定时执行的话可能会带来电池耗电过大,还有上网流量问题。

 

【移动CSS

1           删除了密集型CSS功能,如属性继承和3D元素对齐方式。

2           有两种标准:无线CSSCSS移动配置文件。两者差别较大。

确实手机支持哪种css

         A       查看手机浏览器制造商文档。(有些浏览器不提供)

         B       查询设备数据库。

 

技术点:

1           所有数字属性都必须包含单位。

2           font-family使用常规值,而对font-size使用相对值。实际上,开发人员无法控制移动设备上的安装的字体。所以较为简单的常规font-family值以及相对的font-size值,来实现灵活的页面样式。

3           唯一可靠的border-style值是solid。高级浏览器可能会支持其他边框样式,但只有solid样式的边框线可以在小尺寸屏幕上很好的呈现。

 

【页面调试环境】

以下三种的可靠性依次递增:

1           浏览器模拟。如Firefox插件

2           移动浏览器模拟器

3           真机。(必须的)

 

文档验证器:

在移动Web中,样式表和标记语法的有效性是必不可少的,页面必须符合标准语法,以确保在广泛的移动Web浏览器中的兼容性。

 

W3C标记验证服务:http://validator.w3.org

W3C          CSS验证服务:http://jigsaw.w3.org/css-validator/

W3C MobileOk检查器:http://validator.w3.org/mobile/

mobiReady: http://ready.mobi/

Validome: http://www.validome.org/

 

测试时需要意识到如下问题:

通过wi-fi和通过运营商无限网络(GPRSGSMUMTSLTECDMA)访问web站点是有差别的,前者没有通过移动运营商专用网络。

移动运营商专用网络可能会过滤、缓存甚至修改web页面的内容,同时还会提供一些有价值的服务,如唯一的用户标志和统一计费等等。

 

【设备识别和内容自适应】

移动Web开发核心原理:设备识别和内容自适应。

1       设备识别:

         主要依靠User-Agent来识别移动移动浏览器,制造商和型号。

         但只有User-Agent的信息是不足够的,必须使用设备数据库获取设备信息。

         设备信息数据库:

         A       WURFL(开放的数据库,并提供API-----欧美

         B       DeviceAtlas(商业设备数据库和API------欧美

         C       MOBYRENT-----日本

 

2       内容自适应:

结合1的设备识别,针对不同移动终端输出不同的页面内容。

        

         开发一个内容自适应移动web网站的流程:      

         A   确定该移动web站点所面向的移动设备。

         B       以设备数据库中的可用特征为指导,基于共享的功能将目标设备分成不同的组。

         C       确定移动web站点中可以共享的功能。

         D      针对不同设备组,设计不同的对应方案:设定如何针对每个组精确的更改web站点内容和页面呈现。

                   以显示图片为例,在不同大小的手机屏幕上,显示的是不同大小的图片。因此每个图片有多个版本,对于用户上传的图片,也需要生成不同版本的缩略图。


比较典型的设备组参考:(一个设备可以属于多个组)

第一组:支持JavaScriptAJAX的浏览器。

第二组:屏幕宽带为320像素或更大的浏览器。

第三组:屏幕宽度介于240像素与319像素之间的设备。

第四组:屏幕小于240像素的设备

第五组:仅支持WML浏览器的设备

 

此外,根据项目的面向终端范围和项目需求,设备组可以再细化或者精简,比如:使用WebKit引擎的浏览器(iphoneAndroid上的浏览器)等,WebKit浏览器支持专用的很有用CSS扩展。

 

理想的情况:

采用渐进增强的开发方式,先定义内容,然后通过CSS增强内容样式,最后通过JavaScript增强用户体验。

即:内容和样式彻底分离(如使用DIV+CSS设计页面),在不同的手机终端,使用不同的CSS(及不同的图片)。在支持重力感应的手机终端中,横向和纵向使用不同的CSS。在不支持JavaScript的情况下,页面可以正常使用,在支持JavaScript的情况下,客户体验更丰富。

 

一般经验:

1           首先开发基本的版本。

2           仅创建两个移动版本,其中一个用于基本的手机,另一个用于智能手机。然后根据客户所使用的手机优化功能更丰富的版本。

 

【页面/功能设计】

1           仅提供用户所需的功能,简化所有内容

2           最大限度减少交互。

3           将移动web站点限制为三级导航。移动用户访问站点的时间很短暂,要在尽可能短的时间内找到想要查看的内容。也要容易返回到上一级。

4           保存用户设置,减少用户交互。使用cookie保存用户设置。(比如图片大小选项,是否3G版本等);

5           纵向模式和横向模式要都能正常显示。正确可以使用样式(100%宽度等)来解决此问题。

6           优化所有内容。(图片:使用PNG可以实现质量和大小的折中。JS,CSS文件优化)

7           尽量避免使用以下功能:弹出窗口、鼠标悬停菜单、自动重定向、外部链接、水平滚动以及框架。

8           AJAX:可降解。

 

【智能手机浏览器】

1           智能手机浏览器通用的web技术

A       Viewport Meta标记。

<meta name=”viewpost” content=”width=240,height=320,user-scalable=yes,

initial-scale=2.5,maximum-scale=5.0,minimum-scale=1.0” />

widthheight指令分别指定视区的逻辑宽度和逻辑高度。

user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。

Initial-scale指令用于设置用于Web页面的初始缩放比例,值为1.0时将显示未经缩放的web文档。

Maximum-scaleminimum-scale指令设置用户对web页面缩放比例的限制,值的范围是0.2510.0.

 

B       JavaScript中检测方向变更(横向或纵向)

使用浏览器的window对象的onresizeonorientationchange事件进行处理。

Iphone两种都支持,但通常用onorientationchange

Android和其他源自webkit的浏览器仅支持onresize

BlackBerry设备针对docoment对象支持onresize。(但blackberry只有少数机子支持方向变更)。

 

参考:

Iphonewindow.orientation属性的值:

-90:横向,屏幕以顺时针方向旋转。

0:纵向。默认的属性值

90:横向,逆时针方向旋转

180:纵向;上下翻转。目前暂时不支持。

 

2           移动浏览器中的WebKit

有一些专用的CSS扩展,基于webit的浏览器一般都可以使用这些扩展。

         基于webkit的浏览器:

A       用于iphonesafari mobile

http://developer.apple.com/technologies/safari/

B       用于Android移动设备的浏览器(也是基于webkit

C       用于Palm PrewebOS浏览器;

D      nokai S603版和第5版及以后。

 

3           其他浏览器:

以下浏览器实现的内核不一样,能实现的功能有所差异。

BlackBerry浏览器;

windows Mobile中的IE mobile浏览器;

Opera Mini(实际上是一个代码转换解决方案);

Opera Mobile浏览器;

 

【页面优化】

1           最小化外部资源

2           删除空白、注释和不必要的标记(工具:YUI CompressorJSMin

3           对图像进行调整和转换

4           对于非智能手机,有些可以采用MIME多字节编码传输页面,类似于电子邮件封装。整个文档的所有资源分装到一个但服务器响应中。

5           Web服务器优化:

A       gzipdeflate压缩(压缩文本内容htmlcssjsxmljson等;图像、音频、视频等多媒体不需要压缩,因为这些文件格式中本身就存在压缩机制了)

B       HTTP响应头中的缓存指令

 

【部署移动web站点】

如果使用相同的域的话,如何将访问自动路由到移动web站点或桌面站点:

1           程序判断(直接判断user-agent,完善的方案是结合设备数据库)

2           使用移动切换产品The Switherhttp://www.passani.it/switcher/)或Apache Mobile Filter扩展

3           自己配置服务器路由规则。

 

【移动web站点SEO

1           必须允许爬网程序(蜘蛛)访问移动web站点。

A       设备数据库一般都有识别主要搜索引擎的方法。

B       如果是自己定义的路由规则,或通过程序进行路由,则务必要考虑到爬网程序的访问。很多自定义的路由规则和程序路由往往将爬网程序排除在外。

 

2           robots.txt中定义站点地图XML文件,且包含<mobile:mobile/>标签。

3           桌面web seo方法。

 

【移动web中的代码转换器】

代码转换器来源:

1           移动运营商

2           搜索引擎

3           部分移动浏览器提供的服务(如UC浏览器)。

 

解决方法:防御性编程。

1           将标记声明为移动友好。使用标准的文档声明(文档头信息,MIME类型等)

2           使用自引用链接关系,声明已经对移动设备进行了优化,如在test.mobi/1.php中增加

<link rel=”alternate” media=”handheld” href=”http://test.mobi/1.php” />

3           增加友好的移动优化META信息。如:

<meta name=”HandheldFriendly” value=”true”>

<meta name=”MobileOptimized” value=”320”>

4           使用响应头:

Cache-Control: no-transform (禁止转化)

Vary: User-Agent (代理或者转化服务器要重用缓存文档,必须根据User-Agent来进行,即缓存只针对提供相同User-Agent的设备进行响应)

5           使用较小的文档。如果有可能控制页面文档在15kb以下。

6           通过程序识别代码转换器:

A       使用设备数据库API提供的方法来识别。

B       自定义程序识别。含”X-Device””Via””X-Mobile-Gateway”的请求头等。

一般上面两种同时使用。因为设备数据库提供的方法很可能无法正确识别。

在识别了来自代码转换器的请求之后,可以采取相应的对策(如上面的方法4,发送特定的响应头信息)

 

posted @ 2011-04-22 10:53  rethink  阅读(...)  评论(... 编辑 收藏