1 / 54

WAP 2.0

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 浏览器与互联网之间

pia
Download Presentation

WAP 2.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WAP 2.0 —— XHTML MP and WCSS 怿 飞

  2. 一、WAP的常识（省略）

  3. 二、XHTML MP

  4. （一）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）

  5. （一）XHTML MP介绍 • 优势：开发的站点可以在WEB和无线上都可以使用，也可以用任何Web浏览器访问WAP2.0应用 • 向后兼容：XHTML MP / WCSS 和 WML / WMLScript

  6. （二）无线标记语言发展 • 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，呼机等）

  7. （二）无线标记语言发展 • 但是不包含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站点开发者还不可用。

  8. （三）XHTML MP的优点 • 最大优点：开发者可用相同的技术开发适用于WEB和WAP的站点。 • 有HTML、XHTML、CSS基础即可入门。 • 同样的开发工具可以用来开发WEB和WAP站点。 • 开发过程中一般的WEB浏览器可以浏览你的WAP站点。 • HTML/XHTML页面可以通过较小的修改成XHTML MP，甚至不用修改（注意：布局是否适应小屏幕，文件大小是否出最大）。 • 支持WCSS。移动设备有很多不同的特征，比如屏幕大小，只需写一次结构，使用不同的WCSS文件即可。 • 更多的表现控制。

  9. （四） 不支持的WML 特性 • XHTML MP 不支持<deck>和<card>标签。 在XML中，一个文件可以包含一个或更多的card，所有的card组合成一个deck，并在无线设备中一同被下载。WAP浏览器每次只显示一个card，可以通过锚链接访问其他的card。通过这些，减少了服务器的往返的访问。对性能的提高是有意义的。在XHTML MP中要实现类似的特性，可以使用multipart messages（多个文档放到一个请求）另外一个方式是使用目标锚（一个页面的不同位置）。 • XHTML MP 不支持<timer>标签 <head>  <meta http-equiv="refresh" content="10;URL=http://www.planabc.net/" /></head> <meta>元素10秒后告诉WAP浏览器URL。 注意点：WML timer 仅当进入card，而HTML refresh timer当进入XHTML MP页面。

  10. （四） 不支持的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功能。

  11. （四） 不支持的WML 特性 6. XHTML MP 不支持可编程序软键（Programmable SoftKeys）。 WML的一个最大特征。通过<do>标签使用。在XHML MP中可以使用 accesskey 属性。锚链接和提交按钮支持这个属性： <a accesskey="1" href="part1.xhtml">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”}

  12. （四） 不支持的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=“提交"/></p></form>

  13. （五） 语法规则 • 标签必须完全闭合。 • 标签和属性必须小写。 • 属性值必须包含在引号标记内。 • 不允许无属性值存在。 • 标签必须完全嵌套。

  14. （六）MIME 类型和文件扩展名 • MIME类型： application/vnd.wap.xhtml+xml、application/xhtml+xml 、text/html。 • 动态生成MIME类型。获得HTTP请求中的accept header信息。 • 文件扩展名：.xhtml、.html、.htm

  15. （七）文档结构 必须包含<html>, <head>, <title>和<body> 元素。 <?xml version="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"> <head> <title>Hello world</title> </head> <body> <p>Hello world. Welcome to taobao.com.</p> </body> </html>

  16. （七）文档结构 • XML声明和字符编码：<?xml version="1.0" encoding="UTF-8"?> UTF-8/16编码可省略。XML声明也不是必须的，但如果忽略在许多WAP浏览器中出错。 • 必须有DOCTYPE声明。在XML声明和<html>元素之间。 • <html>、<head>、<link>、<title>、<body> • <p>元素，align属性已经去除，可以通过WAP CSS的text-align属性来设置。

  17. （八）通用的元数据 • 使用<meta/>标签，包含在<head>内 • WAP浏览器如果不理解则忽略。 • 比如添加作者：<meta name="author" content=“yuanxin"/> • Cache Control：<meta/>标签的一个应用是控制XHTML MP文件在Cache中的存在周期： <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="Cache-Control" content="max-age=0"/> 注意点：与设备相关。一些使用不相的方法，一些没有Cache机制。还有一些不支持<meta/>但识别Cache-Control:no-cache的 HTTP头。也可应用于图片的缓存。

  18. （八）通用的元数据 • 周期性刷新。必须配合使用。不是所有浏览器都支持。 <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="refresh" content="15;URL=yuanxin.xhtml"/>

  19. （九）常用标签介绍 • 注释：<!-- -- >，和HTML和WML1.X相同。 • 换行：<br/> ，和HTML和WML1.X相同。 • 水平线：<hr/>。不能包含在<p></p>标签之内。 • 标题：<h1>-<h6>（不同的大小和样式），有些设备看起来一样的。

  20. （九）常用标签介绍 • 字体样式：XML可以使用标签来改变字体样式（ <b>、<i>、<small>、<big>等）。但一些浏览器只支持其中的部分，不支持的忽略，不会出错。 WCSS 控制字体格式。 • 与格式化文本：在XHTML MP中，标签间空白不显示，此外，段落中2个或更多的空白只显示一个，如果想保持文字的格式，可使用<pre>。 • 列表：<ul>、<ol>、<li>。对于<ol>元素，可以用属性 start 指定数字开始的序列。还可以用WCSS来做更精确的控制。 • 显示图片：<img>标签用来显示图片。和HTML一样。如果文件没发现或者图片格式不支持，显示alt属性文本。Height和width属性来指定图片显示区域的高度和宽度

  21. （九）常用标签介绍 • 除了老的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文档，

  22. （九）常用标签介绍 • 后请求图片，产生多个请求。该方式可以使文档和图片在一个请求，意味着一个页面只有一个请求。减少服务器的压力。 • 表格：创建表格，需要使用<table>、<tr>、<td>标签，默认表格没有边线。属性有rowspan和colspan。 • 锚链接：一般用在导航。标签为<a></a>。属性href定义指定的URL。当前页面位置的跳转：先设置目标链接，通过id属性设置；再设置锚链接的URL为#id名称。 对锚链接设置快捷键：<a>标签的accesskey属性，有效的值为：*，#，0-9。还可以用-wap-accesskey设置。

  23. （九）常用标签介绍 • 选择列表：选择列表使用<select>标签，包含一个或更多的<option>标签。<select>标签的name属性定义选择列表的名字。name用来取得被选择的item的值（option的value属性定义）。 1. 多重选择列表：Option的selected属性用来设置默认的option。如果想设置多重选择列表，可使用<select>标签的multiple属性，只有一个唯一值‘multiple’。 2. Option分组：使用<optgroup>标签，label属性定义option组的名称。

  24. （九）常用标签介绍 • 选择列表

  25. （九）常用标签介绍 • 输入元素：Text field、Password fireld、Checkbox、Radio button、Hidden field。通过<input>元素创建。传输数据到服务器，<input>元素必须和<form>一起使用。Type属性用来定义input元素的类别。Name属性用来定义名称，方便取得用户数据。 <input type="text" name=“taobao" maxlength="16" value=“yuanxin"/> input { -wap-input-format: "10N"} <input type="password" name=“taobao"/> <input type="checkbox" name=“taobao" value=“yuanxin" checked="checked"/> <input type="radio" name=“taobao" value=“yuanxin" checked="checked"/> <input type="hidden" name=“taobao" value=“yuanxin"/>

  26. （九）常用标签介绍 13. form元素：<input>、<select>等元素不能直接包含在form元素下，XHMTL MP标准规定必须有块级元素。如果有non-ASCII字符，需使用POST方法来避免编码问题。 <form method="get" action=“yuanxin.asp"> <p>      <input ...>     <select ...> </p></form> 14. 提交按钮：所有的表单都必须包含一个提交按钮。<input>元素用来创建一个提交按钮。而type属性被定义为’submit’。 <input type="submit" value="OK"/>

  27. （九）常用标签介绍 15. 重置按钮：并不是必须的。<input>元素用来创建一个重置按钮。而type属性被定义为’reset’。 <input type="reset" value="Default"/> 16. Div和Span。

  28. 三、WCSS/WAP CSS

  29. （一）WCSS 介绍 • WCSS/WAP CSS/Wireless CSS/Wireless Profile CSS（WAP Cascading Style Sheet ） • 是CSS2的子集+一些WAP特有的扩展 • 目的：定义文档的风格和布局，从文档内容中分离。 • 重要性：不同的手机设备有多样的特征，比如屏幕大小。 • WML不支持WCSS • W3C CSS Mobile Profile和WAP CSS 不同。

  30. （二）使用WCSS的优势 • 主要：学习成本降低，可用相同的开发工具，可用WEB浏览器浏览。 • 表现和结构的分离：匹配不同无线设备的特征（屏幕大小）、不同客户端代理（PC、PDA、手机）；降低维护成本（新手机）；改变视觉和布局仅需CSS；重复使用CSS；便于工作细分。 • 比WML更好的控制表现：可以定义元素的color，font，background，border，margin，padding等属性。 • 移动设备第一次访问站点下载样式（Cache）。 • 使用外部WCSS，XHTML MP的文档大小变小，提高下载时间。

  31. （三）使用WCSS的劣势 • 不同的WAP浏览器对WCSS的支持不同，可能一个属性在这个WAP浏览器上支持，而另外一个不支持。 • 外部的WAP CSS可能增加第一次访问页面的请求时间。原因：外部WCSS不存在于手机的Cache，必须从服务器下载；XHTML MP文档和外部的WCSS下载是不同的请求，增加了服务器压力；如果使用一个WCSS定义WAP站点的所有表现，该文件大小可能很大；WAP浏览器需要解析WCSS到XHTML MP文档。

  32. （四）MIME 类型和文件扩展名 • MIME类型： text/css。 • 文件扩展名：.css

  33. （五）WCSS的语法规则 • WCSS声明：selector {property: property_value} • 多个属性允许的，用’;’分隔。 • 多个选择器也是允许的，用‘，’分隔。 • 注释：/*orz*/，WAP浏览器将忽略这些内容。

  34. （六）如何在XHTML MP文档中应用 • 链接外部WCSS（推荐），放置在文档的head部分，用style属性定义WCSS样式 • <link href=“url” rel=“stylesheet” type=“text/css”/>，可以多个，无需修改rel和type属性。 • <style type="text/css">some WCSS statements</style> • <hr style="color: blue"/>

  35. （七）不同的选择器 • 类型选择器：h1 { font-style: italic} 元素名称必须小写。 • Class选择器： .class { color:blue} 对应标签的class属性，还可以联合元素名称使用 h1.class {color:blue}。 • ID选择器：#id {color:red} 对应标签的id属性也可联合元素名称。 • 通用选择器：* { color:blue} ，所有的标签。注意：在某些WAP浏览器上会使样式渲染变慢。（建议不要用）

  36. （八）常用的属性值 • 长度：%，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)}无引号、双引号、单引号均可。

  37. （九）字体和文本属性 • 字体名称：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标签

  38. （十）列表属性 • 改变无序列表的图标（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("rightarrow1")}

  39. （十）列表属性

  40. （十一）颜色属性和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} 顺序自由。

  41. （十二）WAP特有的CSS扩展 • 快捷键：-wap-accesskey ，用来指定XHTML MP元素的快捷键。 • Input：定义文本框是否可以留空，什么类型，可以输入多少字符 • Marquee：在屏幕上滚动一些内容。

  42. （十二.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，其他定义也无效。

  43. （十二.2）WCSS输入扩展 • 由两个属性组成：-wap-input-famat和-wap-input-required，对应于WML中<input>元素的format（定义类型和字符数量）和emptyok（是否可以留空）属性。 • 早些的移动设备上WAP浏览器不支持，但支持format和emptyok属性作为XHTML MP的扩展。为了更好的兼容性，建议WCSS和WML都使用。 <input type="text" format="N" style='-wap-input-format: "N"'/> • 控制文本框的类型和字符数量：-wap-input-format。需应用在<input type=“text”>, <input type=“password”>和<textarea> 标签上，如应用在其他标签无效。格式字符（大小写敏感）：a（小 写字母或符号），A（大写字母或符号），n（数字或符号）

  44. （十二.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、在最后

  45. （十二.2）WCSS输入扩展 • 如果值语法错误，则WAP浏览器忽略该属性。 也可以包含转义字符：’\’在WCSS中是特殊字符，使用’\\’。 • 控制文本框是否可以留空：-wap-input-required（值为：false和true ），帮助控制文本框是否可以空白。使用元素同上。 当-wap-input-format和-wap-input-required冲突时，以required优先。

  46. （十二.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）

  47. （十二.3）WCSS Marquee扩展

  48. 二、WAP2.0设计原则

  49. WAP2.0设计原则 • 设计站点前的准备工作 界面设计、挑选核心服务、WAP设备特性统计（浏览器等） • 关注导航模型 一致易学的导航模型。简洁精确且快速的信息。尽可能减少输入（考虑选择列表、复选框或单选按钮等。-wap-input-format：*N;避免模式转换。首字母。） • 设计导航层次 导航模型一致、少用‘返回’链接、避免深度太深（4-5）、返回首页或目录

  50. WAP2.0设计原则 • 考虑小尺寸屏幕的设计 确保内容可见、<title>少于14个字符、一致的样式、减少水平滚动、利用对齐属性增加可读性（1-3）、充分利用空间（图文）、避免过多使用文本样式属性、使用短小精确的词语、避免使用过多的颜色并保持一致、不用名字描述颜色。 • 保持较短的文档大小：内存有限，不支持WML的多card，使用锚链接等 不要包含长注释、去除缩进或空格、尽量少用id和class 6. 用户任务流流畅和图片合理使用 图片不是用户目的尽少使用、避免使用大表格。

More Related