Wap2.0
Upcoming SlideShare
Loading in...5
×
 

Wap2.0

on

  • 1,333 views

 

Statistics

Views

Total Views
1,333
Views on SlideShare
1,333
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Wap2.0 Wap2.0 Presentation Transcript

  • WAP 2.0 —— XHTML MP and WCSS 怿 飞
  • 一、 WAP 的常识 (省略)
  • 二、 XHTML MP
  • (一) XHTML MP 介绍
    • XHTML MP ( eXtensible HyperText Markup Language Mobile Profile )
    • WAP2.0
    • 与 WCSS ( WAP CSS /WAP Cascading Style Sheet )配套使用
    • 是 XHTML 的子集
    • XHTML Basic (XHTML 子集 )+ 另外的一些 XHTML 的元素和属性
    • WAP 浏览器与互联网之间
    • 以前 WAP 网站( WML and WMLScript )
    • 更多的展示表现( presentation control )
  • (一) XHTML MP 介绍
    • 优势:开发的站点可以在 WEB 和无线上都可以使用,也可以用任何 Web 浏览器访问 WAP2.0 应用
    • 向后兼容: XHTML MP / WCSS 和 WML / WMLScript
  • (二)无线标记语言发展
    • HTML : WAP 发展的首要任务——移动电话, PDA 等访问互联网。 WAP standard ( WML and XHTML Mobile Profile ) 类似 HTML
    • WML ( Wireless Markup Language ) 1.x : WAP 1.x 规范中规定的标记语言,无线设备的第一个标记语言。 Openwave 、 Nokia 和 Ericsson 很早都有自己的标记语言。 WML 规范是 WAP Forum ( 97 )创建的。而现在,很多的 WAP 站点依然使用的是 WML 。
    • XHTML :结构比 HTML 更简洁和严格。这对于无线设备(例:移动电话)很重要,对于有限的处理能力。
    • XHTML Basic : 是 XHTML 的一个简化版本。为处理
    • 能力和性能有限的设备设计的(移动电话, PDA ,呼机等)
  • (二)无线标记语言发展
    • 但是不包含 XHTML 特性。例如 CSS , frames 和 Scripting 。是由 W3C 定义的。
    • XHTML MP: 在 WAP2.0 说明中指定的官方标记语言。 WAP Forum 基于 XHTML Basic 创造,并从 XHTML 的完整版本中增加了一些元素和属性。例如 <i>,<b>,<small>,<big> 和 <hr> 。 XHTML MP 支持一个简单的 CSS 版本,即 WCSS/WAP CSS 。
    • WCSS/WAP CSS: CSS2 的一个简化版本,增加了 WAP 特有的扩展。可以很简单的改变 XHTML MP 页面的布局和风格。
    • WML2.0: WAP 站点开发者不需要顾虑 WML2.0 。 WML2.0 向后兼容,并且对于 WAP 站点开发者还不可用。
  • (三) XHTML MP 的优点
    • 最大优点:开发者可用相同的技术开发适用于 WEB 和 WAP 的站点。
    • 有 HTML 、 XHTML 、 CSS 基础即可入门。
    • 同样的开发工具可以用来开发 WEB 和 WAP 站点。
    • 开发过程中一般的 WEB 浏览器可以浏览你的 WAP 站点。
    • HTML/XHTML 页面可以通过较小的修改成 XHTML MP ,甚至不用修改(注意:布局是否适应小屏幕,文件大小是否出最大)。
    • 支持 WCSS 。移动设备有很多不同的特征,比如屏幕大小,只需写一次结构,使用不同的 WCSS 文件即可。
    • 更多的表现控制。
  • (四) 不支持的 WML 特性
    • XHTML MP 不支持 <deck> 和 <card> 标签。
    • 在 XML 中,一个文件可以包含一个或更多的 card ,所有的 card 组合成一个 deck ,并在无线设备中一同被下载。 WAP 浏览器每次只显示一个 card ,可以通过锚链接访问其他的 card 。通过这些,减少了服务器的往返的访问。对性能的提高是有意义的。在 XHTML MP 中要实现类似的特性,可以使用 multipart messages (多个文档放到一个请求)另外一个方式是使用目标锚(一个页面的不同位置)。
    • XHTML MP 不支持 <timer> 标签
    • <head>   <meta http-equiv=&quot;refresh&quot; content=&quot;10;URL=http://www.planabc.net/&quot; /> </head>
    • <meta> 元素 10 秒后告诉 WAP 浏览器 URL 。
    • 注意点: WML timer 仅当进入 card ,而 HTML refresh timer 当进入 XHTML MP 页面。
  • (四) 不支持的 WML 特性
    • 3. XHTML MP 不支持事件。
    • WML 支持四个事件( ontimer,onenterbackward,onenterforward,onpick ),除 ontimer 其他事件无法模拟。如要使用,需使用 WML1.X 。
    • 4. XHTML MP 不支持变量。
    • 在 XML ,可以声明变量,并赋值,拥有全局作用域。可以在任何的 deck 和 card 中使用。 XHML MP 放在服务器端处理(必须发送并保存)。
    • 5. XHTML MP 不支持客户端脚本。
    • 在 XML ,你可以使用客户端脚本( WMLScript )。 JavaScript 的简化版,常用来验证数据。放在服务器短处理。将来的版本将会支持客户端脚本( ECMAScript MP ) , 支持所有的 WMLScript 功能。
  • (四) 不支持的 WML 特性
    • 6. XHTML MP 不支持可编程序软键( Programmable SoftKeys )。
    • WML 的一个最大特征。通过 <do> 标签使用。在 XHML MP 中可以使用 accesskey 属性。锚链接和提交按钮支持这个属性:
    • <a accesskey=&quot;1&quot; href=&quot;part1.xhtml&quot;>XHTML MP Tutorial Part 1</a
    • WCSS 中的 -wap-accesskey 属性也可以用来定义: a.wcss_class_1 {-wap-accesskey: 1}
    • 7. XHTML MP 不支持 <u> 标签。
    • 在 XML , <u> 用来在一些文字下添加下划线。可以用 WCSS 中的 text-decoration 属性。
    • 8. XHTML MP 不支持 Input 框的 format 属性。
    • 在 XML ,可以定义类型和字数限制。可以使用 WCSS 中的 -wap-input-format 属性,语法一致。比如限制 5 个数字字符: input {-wap-input-format:”5N”}
  • (四) 不支持的 WML 特性
    • 9. XHTML MP 不支持锚链接传输数据。
    • <p>    姓名:   <input name=“name”/><br/>  <anchor> <go method=“get” href=“yuanxin.php”><postfield name=“name” value=“$(name)”/></go>   提交   </anchor> </p>
    • <form action=“yuanxin.php” method=“get”>   <p> 姓名:     <input name=“name”/><br/><input type=“submit” value=“ 提交 &quot;/></p> </form>
  • (五) 语法规则
    • 标签必须完全闭合。
    • 标签和属性必须小写。
    • 属性值必须包含在引号标记内。
    • 不允许无属性值存在。
    • 标签必须完全嵌套。
  • (六) MIME 类型和文件扩展名
    • MIME 类型: application/vnd.wap.xhtml+xml 、 application/xhtml+xml 、 text/html 。
    • 动态生成 MIME 类型。获得 HTTP 请求中的 accept header 信息。
    • 文件扩展名: .xhtml 、 .html 、 .htm
  • (七)文档结构
    • 必须包含 <html>, <head>, <title> 和 <body> 元素。
    • <?xml version=&quot;1.0&quot;?>
    • <!DOCTYPE html PUBLIC &quot;-//WAPFORUM//DTD XHTML Mobile 1.0//EN&quot; &quot;http://www.wapforum.org/DTD/xhtml-mobile10.dtd&quot;>
    • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
    • <head>
    • <title>Hello world</title>
    • </head>
    • <body>
    • <p>Hello world. Welcome to taobao.com.</p>
    • </body>
    • </html>
  • (七)文档结构
    • XML 声明和字符编码: <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
    • UTF-8/16 编码可省略。 XML 声明也不是必须的,但如果忽略在许多 WAP 浏览器中出错。
    • 必须有 DOCTYPE 声明。在 XML 声明和 <html> 元素之间。
    • <html> 、 <head> 、 <link> 、 <title> 、 <body>
    • <p> 元素, align 属性已经去除,可以通过 WAP CSS 的 text-align 属性来设置。
  • (八)通用的元数据
    • 使用 <meta/> 标签,包含在 <head> 内
    • WAP 浏览器如果不理解则忽略。
    • 比如添加作者: <meta name=&quot;author&quot; content=“yuanxin&quot;/>
    • Cache Control : <meta/> 标签的一个应用是控制 XHTML MP 文件在 Cache 中的存在周期:
    • <meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-cache&quot;/>
    • <meta http-equiv=&quot;Cache-Control&quot; content=&quot;max-age=0&quot;/>
    • 注意点:与设备相关。一些使用不相的方法,一些没有 Cache 机制。还有一些不支持 <meta/> 但识别 Cache-Control:no-cache 的
    • HTTP 头。也可应用于图片的缓存。
  • (八)通用的元数据
    • 周期性刷新。必须配合使用。不是所有浏览器都支持。
    • <meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-cache&quot;/>
    • <meta http-equiv=&quot;refresh&quot; content=&quot;15;URL=yuanxin.xhtml&quot;/>
  • (九)常用标签介绍
    • 注释: <!-- -- > ,和 HTML 和 WML1.X 相同。
    • 换行: <br/> ,和 HTML 和 WML1.X 相同。
    • 水平线: <hr/> 。不能包含在 <p></p> 标签之内。
    • 标题: <h1>-<h6> (不同的大小和样式),有些设备看起来一样的。
  • (九)常用标签介绍
    • 字体样式: XML 可以使用标签来改变字体样式( <b> 、 <i> 、 <small> 、 <big> 等)。但一些浏览器只支持其中的部分,不支持的忽略,不会出错。 WCSS 控制字体格式。
    • 与格式化文本:在 XHTML MP 中,标签间空白不显示,此外,段落中 2 个或更多的空白只显示一个,如果想保持文字的格式,可使用 <pre> 。
    • 列表: <ul> 、 <ol> 、 <li> 。对于 <ol> 元素,可以用属性 start 指定数字开始的序列。还可以用 WCSS 来做更精确的控制。
    • 显示图片: <img> 标签用来显示图片。和 HTML 一样。如果文件没发现或者图片格式不支持,显示 alt 属性文本。 Height 和 width 属性来指定图片显示区域的高度和宽度
  • (九)常用标签介绍
    • 除了老的 WBMP 图片格式, WAP2.0 还支持 WEB 上的图片格式( gif, jpg 和 PNG ),但 WAP2.0 无线设备支持上面图片格式的某些。 GPRS-gif,CDMA-png 。可以通过 accept HTTP header 判断设置。
    • 关于大图片的发布:很多 WAP 浏览器都没有水平滚动功能。如果宽度大于显示屏,很多的 WAP 浏览器会裁切图片。图片的按比例缩小不能帮助提升性能。大图片还会造成访问站点用户的费用。
    • 优化图片: 1 、用制图软件按比例缩小图片; 2 、如果是 gif 图片,减少颜色,但降低了图片质量,权衡。 3 、如果是 jpg 图片,保存一定的压缩比例,依然是权衡。
    • 使用 multipart messages ,先下载的 XHTML MP 文档,
  • (九)常用标签介绍
    • 后请求图片,产生多个请求。该方式可以使文档和图片在一个请求,意味着一个页面只有一个请求。减少服务器的压力。
    • 表格:创建表格,需要使用 <table> 、 <tr> 、 <td> 标签,默认表格没有边线。属性有 rowspan 和 colspan 。
    • 锚链接:一般用在导航。标签为 <a></a> 。属性 href 定义指定的 URL 。当前页面位置的跳转:先设置目标链接,通过 id 属性设置;再设置锚链接的 URL 为 #id 名称。
    • 对锚链接设置快捷键: <a> 标签的 accesskey 属性,有效的值为: * , # , 0-9 。还可以用 -wap-accesskey 设置。
  • (九)常用标签介绍
    • 选择列表:选择列表使用 <select> 标签,包含一个或更多的 <option> 标签。 <select> 标签的 name 属性定义选择列表的名字。 name 用来取得被选择的 item 的值( option 的 value 属性定义)。
    • 1. 多重选择列表: Option 的 selected 属性用来设置默认的 option 。如果想设置多重选择列表,可使用 <select> 标签的 multiple 属性,只有一个唯一值‘ multiple’ 。
    • 2. Option 分组:使用 <optgroup> 标签, label 属性定义 option 组的名称。
  • (九)常用标签介绍
    • 选择列表
  • (九)常用标签介绍
    • 输入元素: Text field 、 Password fireld 、 Checkbox 、 Radio button 、 Hidden field 。通过 <input> 元素创建。传输数据到服务器, <input> 元素必须和 <form> 一起使用。 Type 属性用来定义 input 元素的类别。 Name 属性用来定义名称,方便取得用户数据。
    • <input type=&quot;text&quot; name=“taobao&quot; maxlength=&quot;16&quot; value=“yuanxin&quot;/>
    • input { -wap-input-format: &quot;10N&quot;}
    • <input type=&quot;password&quot; name=“taobao&quot;/>
    • <input type=&quot;checkbox&quot; name=“taobao&quot; value=“yuanxin&quot; checked=&quot;checked&quot;/>
    • <input type=&quot;radio&quot; name=“taobao&quot; value=“yuanxin&quot; checked=&quot;checked&quot;/>
    • <input type=&quot;hidden&quot; name=“taobao&quot; value=“yuanxin&quot;/>
  • (九)常用标签介绍
    • 13. form 元素: <input> 、 <select> 等元素不能直接包含在 form 元素下, XHMTL MP 标准规定必须有块级元素。如果有 non-ASCII 字符,需使用 POST 方法来避免编码问题。
    • <form method=&quot;get&quot; action=“yuanxin.asp&quot;> <p>       <input ...>      <select ...> </p> </form>
    • 14. 提交按钮:所有的表单都必须包含一个提交按钮。 <input> 元素用来创建一个提交按钮。而 type 属性被定义为’ submit’ 。
    • <input type=&quot;submit&quot; value=&quot;OK&quot;/>
  • (九)常用标签介绍
    • 15. 重置按钮:并不是必须的。 <input> 元素用来创建一个重置按钮。而 type 属性被定义为’ reset’ 。
    • <input type=&quot;reset&quot; value=&quot;Default&quot;/>
    • 16. Div 和 Span 。
  • 三、 WCSS/WAP CSS
  • (一) WCSS 介绍
    • WCSS/WAP CSS/Wireless CSS/Wireless Profile CSS ( WAP Cascading Style Sheet )
    • 是 CSS2 的子集 + 一些 WAP 特有的扩展
    • 目的:定义文档的风格和布局,从文档内容中分离。
    • 重要性:不同的手机设备有多样的特征,比如屏幕大小。
    • WML 不支持 WCSS
    • W3C CSS Mobile Profile 和 WAP CSS 不同。
  • (二)使用 WCSS 的优势
    • 主要:学习成本降低,可用相同的开发工具,可用 WEB 浏览器浏览。
    • 表现和结构的分离:匹配不同无线设备的特征(屏幕大小)、不同客户端代理( PC 、 PDA 、手机);降低维护成本(新手机);改变视觉和布局仅需 CSS ;重复使用 CSS ;便于工作细分。
    • 比 WML 更好的控制表现:可以定义元素的 color , font , background , border , margin , padding 等属性。
    • 移动设备第一次访问站点下载样式( Cache )。
    • 使用外部 WCSS , XHTML MP 的文档大小变小,提高下载时间。
  • (三)使用 WCSS 的劣势
    • 不同的 WAP 浏览器对 WCSS 的支持不同,可能一个属性在这个 WAP 浏览器上支持,而另外一个不支持。
    • 外部的 WAP CSS 可能增加第一次访问页面的请求时间。原因:外部 WCSS 不存在于手机的 Cache ,必须从服务器下载; XHTML MP 文档和外部的 WCSS 下载是不同的请求,增加了服务器压力;如果使用一个 WCSS 定义 WAP 站点的所有表现,该文件大小可能很大; WAP 浏览器需要解析 WCSS 到 XHTML MP 文档。
  • (四) MIME 类型和文件扩展名
    • MIME 类型: text/css 。
    • 文件扩展名: .css
  • (五) WCSS 的语法规则
    • WCSS 声明: selector {property: property_value}
    • 多个属性允许的,用’ ;’ 分隔。
    • 多个选择器也是允许的,用‘,’分隔。
    • 注释: /*orz*/ , WAP 浏览器将忽略这些内容。
  • (六)如何在 XHTML MP 文档中应用
    • 链接外部 WCSS (推荐),放置在文档的 head 部分,用 style 属性定义 WCSS 样式
    • <link href=“url” rel=“stylesheet” type=“text/css”/> ,可以多个,无需修改 rel 和 type 属性。
    • <style type=&quot;text/css&quot;>   some WCSS statements </style>
    • <hr style=&quot;color: blue&quot;/>
  • (七)不同的选择器
    • 类型选择器: h1 { font-style: italic} 元素名称必须小写。
    • Class 选择器: .class { color:blue} 对应标签的 class 属性,还可以联合元素名称使用 h1.class {color:blue} 。
    • ID 选择器: #id {color:red} 对应标签的 id 属性也可联合元素名称。
    • 通用选择器: * { color:blue} ,所有的标签。注意:在某些 WAP 浏览器上会使样式渲染变慢。(建议不要用)
  • (八)常用的属性值
    • 长度: % , px , em , ex , cm , mm , in , pt , pc (值和单位之间不允许有空格: margin-top:1px 而不是 margrin-top:1 px )。
    • 颜色: rgb(r%;g%,b%) 、 rgb(r,g,b) 、 #rrggbb 、 #rgb 、 red(16 种 ) 。
    • URL : ul {list-style-image: url(bullet.gif)} 无引号、双引号、单引号均可。
  • (九)字体和文本属性
    • 字体名称: p {font-family: “Times New Roman”} 名称中有空格或多个单词必须用引号包含。
    • 字体大小: p {font-size:12px} ,也可以用 xx-small , x-samll , small , medium , large , x-large , xx-large
    • 字体样式:斜体、粗体和下划线( font-style,font-weight 和 text-decoration )。
    • 设置文本对齐: text-align 和 float 。 WAP 中 float ( left,right,none )常用在 img 和 table 标签
  • (十)列表属性
    • 改变无序列表的图标( list-style-type ):默认 disc ,其他值: circle , square , none 。可以应用在 ul 和 li 元素上。
    • 改变有序列表的次序:默认 decimal ,其他值: upper-alpha ( A ), lower-alpha ( a ), upper-raman ( I ), lower-raman ( i ), none
    • 3. 使用图片文件作为小图标: list-style-image: url(bullet.gif) 。注: Openware WAP 浏览器本地保存了一些 icon ,可以使用这些作为小图标,例如: ul {list-style-image: localsrc(&quot;rightarrow1&quot;)}
  • (十)列表属性
  • (十一)颜色属性和 border 属性
    • 设置前景和背景颜色: color 、 background-color 属性 。
    • 设置 border 样式: border-style ( border-top-style 等)属性,值有很多,但只有 none 和 solid 被 WAP 浏览器广泛支持。 table {border-style: solid}
    • 设置 border 宽度: border-width (同上)属性,值为数值,还接受 thin 、 medium 和 thick 。注:值设置 border-width , border 并不可见,必须设置 border-style 非 none 值。
    • 设置 border 颜色: border-color (同上)属性。注意点同上。
    • 设置 border 属性的快捷方式: table {border: 2px solid black}
    • 顺序自由。
  • (十二) WAP 特有的 CSS 扩展
    • 快捷键: -wap-accesskey ,用来指定 XHTML MP 元素的快捷键。
    • Input :定义文本框是否可以留空,什么类型,可以输入多少字符
    • Marquee :在屏幕上滚动一些内容。
  • (十二 .1 ) WCSS 快捷键扩展
    • 给元素定义快捷键: -wap-accesskey 属性
    • 可用的属性值 * , # , 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9
    • input.wcss_class {-wap-accesskey: 4}
    • 直接定义 * 和 # 违反 CSS2 语法。需要使用 Unicode 转义字符 2a 和 23 。但是有些 WAP 浏览器( Sony Ericsson WAP 浏览器 )要求使用 2a 和 23, 一些( Openwave 手机浏览器) 要求使用 * 和 # 。
    • 与元素的 accesskey 属性同效,如同时定义,显示该属性值。
    • 只用于四个元素 a , input , label , textarea ,其他定义也无效。
  • (十二 .2 ) WCSS 输入扩展
    • 由两个属性组成: -wap-input-famat 和 -wap-input-required ,对应于 WML 中 <input> 元素的 format (定义类型和字符数量)和 emptyok (是否可以留空)属性。
    • 早些的移动设备上 WAP 浏览器不支持,但支持 format 和 emptyok 属性作为 XHTML MP 的扩展。为了更好的兼容性,建议 WCSS 和 WML 都使用。
    • <input type=&quot;text&quot; format=&quot;N&quot; style='-wap-input-format: &quot;N&quot;'/>
    • 控制文本框的类型和字符数量: -wap-input-format 。需应用在 <input type=“text”>, <input type=“password”> 和 <textarea> 标签上,如应用在其他标签无效。格式字符(大小写敏感): a (小
    • 写字母或符号), A (大写字母或符号), n (数字或符号)
  • (十二 .2 ) WCSS 输入扩展
    • N (数字), x (小写字母或数字或符号), X (大写字母或数字或符号), m (任何字符,默认小写字母输入模式,可换大写模式), M (任何字符,默认大写字母输入模式,可换小写模式)。属性值必须包含在引号内,由于部分 Openwave 手机浏览器不支持单引号,建议使用双引号( <input type=“text” style=‘-wap-input-format: “N”’/> )
    • -wap-input-format: “2N” (最多两个数字) -wap-input-format: “NN” (两个数字) -wap-input-format: “*N” (无限个数字)
    • -wap-input-format: “A*a” (第一个大写字母或符号, 0-n 个小写字母或符号) -wap-input-format :“*M” (默认)
    • 格式字符前使用数字或 * 的原则: 1 、只允许一次; 2 、在最后
  • (十二 .2 ) WCSS 输入扩展
    • 如果值语法错误,则 WAP 浏览器忽略该属性。
    • 也可以包含转义字符:’ ’ 在 WCSS 中是特殊字符,使用’ 。
    • 控制文本框是否可以留空: -wap-input-required (值为: false 和 true ),帮助控制文本框是否可以空白。使用元素同上。
    • 当 -wap-input-format 和 -wap-input-required 冲突时,以 required 优先。
  • (十二 .3 ) WCSS Marquee 扩展
    • 可以在屏幕上滚动一些内容(一行文字,一个图片,一个链接等),但一些 WAP 浏览器只支持滚动文字。当内容超过屏幕时很有用。
    • 包含四个属性和一个属性值: -wap-marquee 属性值( display 属性的值), -wap-marquee-dir 属性(指定 marquee 的方向 , 值: ltr , rtl- 默认), -wap-marquee-loop 属性(指定 marquee 重复的时间, infinite 永远,大多数默认为 1 ), -wap-marquee-speed 属性(指定 marquee 的速度,值: slow , normal- 默认, fast ), -wap-marquee-style (指定 marquee 在屏幕上如何滚动,有三个值: scroll- 默认, slide , alternate )
  • (十二 .3 ) WCSS Marquee 扩展
  • 二、 WAP2.0 设计原则
  • WAP2.0 设计原则
    • 设计站点前的准备工作
    • 界面设计、挑选核心服务、 WAP 设备特性统计(浏览器等)
    • 关注导航模型
    • 一致易学的导航模型。简洁精确且快速的信息。尽可能减少输入(考虑选择列表、复选框或单选按钮等。 -wap-input-format : *N; 避免模式转换。首字母。 )
    • 设计导航层次
    • 导航模型一致、少用‘返回’链接、避免深度太深( 4-5 )、返回首页或目录
  • WAP2.0 设计原则
    • 考虑小尺寸屏幕的设计
    • 确保内容可见、 <title> 少于 14 个字符、一致的样式、减少水平滚动、利用对齐属性增加可读性( 1-3 )、充分利用空间(图文)、避免过多使用文本样式属性、使用短小精确的词语、避免使用过多的颜色并保持一致、不用名字描述颜色。
    • 保持较短的文档大小:内存有限,不支持 WML 的多 card ,使用锚链接等
    • 不要包含长注释、去除缩进或空格、尽量少用 id 和 class
    • 6. 用户任务流流畅和图片合理使用
    • 图片不是用户目的尽少使用、避免使用大表格。
  • WAP2.0 设计原则
    • 7. 页面上提供足够信息
    • 首屏常用导航链接、搜索域、登录屏幕和大量信息;上下滚动困难,表单交互要简短。
    • 为用户操作提供信息反馈
    • 对用户操作、错误和问题情况提供正确的反馈。
    • 9. 尽可能减少图片数量和减小图像容量大小
    • 每张图片都是一个请求,降低页面显示的速度,且内容可能重排序,占用时间和资源,全站规划相同图片。
    • 定义图像的高度和宽度属性
    • 定义了预占位,改善用户体验,
  • WAP2.0 设计原则
    • 11. 谨慎使用表格
    • 单元格宽度使用绝对宽度;嵌套层数增加,页面复杂度和处理时间增加;表格边框避免太粗。
    • 12. 考虑添加样式定义选项
    • 权衡!
    • 使用 Unicode 字符编写 XHTML MP 内容
    • 进行可用性测试
  • 附录
    • 1. 常用 WAP 模拟器
      • WinWAP 、 OpenWave 、 Opera
    • 2. 常用 WAP 网站
      • www.wapforum.org
      • www.spforum.net
      • www.csdn.com
      • www.blueidea.com
  • The End! ( return obj )