资源描述
WAP2.0,XHTMLMPandWCSS,怿飞,一、WAP的常识(省略),二、XHTMLMP,(一)XHTMLMP介绍,XHTMLMP(eXtensibleHyperTextMarkupLanguageMobileProfile)WAP2.0与WCSS(WAPCSS/WAPCascadingStyleSheet)配套使用是XHTML的子集XHTMLBasic(XHTML子集)+另外的一些XHTML的元素和属性WAP浏览器与互联网之间以前WAP网站(WMLandWMLScript)更多的展示表现(presentationcontrol),(一)XHTMLMP介绍,优势:开发的站点可以在WEB和无线上都可以使用,也可以用任何Web浏览器访问WAP2.0应用向后兼容:XHTMLMP/WCSS和WML/WMLScript,(二)无线标记语言发展,HTML:WAP发展的首要任务移动电话,PDA等访问互联网。WAPstandard(WMLandXHTMLMobileProfile)类似HTMLWML(WirelessMarkupLanguage)1.x:WAP1.x规范中规定的标记语言,无线设备的第一个标记语言。Openwave、Nokia和Ericsson很早都有自己的标记语言。WML规范是WAPForum(97)创建的。而现在,很多的WAP站点依然使用的是WML。XHTML:结构比HTML更简洁和严格。这对于无线设备(例:移动电话)很重要,对于有限的处理能力。XHTMLBasic:是XHTML的一个简化版本。为处理能力和性能有限的设备设计的(移动电话,PDA,呼机等),(二)无线标记语言发展,但是不包含XHTML特性。例如CSS,frames和Scripting。是由W3C定义的。XHTMLMP:在WAP2.0说明中指定的官方标记语言。WAPForum基于XHTMLBasic创造,并从XHTML的完整版本中增加了一些元素和属性。例如,和。XHTMLMP支持一个简单的CSS版本,即WCSS/WAPCSS。WCSS/WAPCSS:CSS2的一个简化版本,增加了WAP特有的扩展。可以很简单的改变XHTMLMP页面的布局和风格。WML2.0:WAP站点开发者不需要顾虑WML2.0。WML2.0向后兼容,并且对于WAP站点开发者还不可用。,(三)XHTMLMP的优点,最大优点:开发者可用相同的技术开发适用于WEB和WAP的站点。有HTML、XHTML、CSS基础即可入门。同样的开发工具可以用来开发WEB和WAP站点。开发过程中一般的WEB浏览器可以浏览你的WAP站点。HTML/XHTML页面可以通过较小的修改成XHTMLMP,甚至不用修改(注意:布局是否适应小屏幕,文件大小是否出最大)。支持WCSS。移动设备有很多不同的特征,比如屏幕大小,只需写一次结构,使用不同的WCSS文件即可。更多的表现控制。,(四)不支持的WML特性,XHTMLMP不支持和标签。在XML中,一个文件可以包含一个或更多的card,所有的card组合成一个deck,并在无线设备中一同被下载。WAP浏览器每次只显示一个card,可以通过锚链接访问其他的card。通过这些,减少了服务器的往返的访问。对性能的提高是有意义的。在XHTMLMP中要实现类似的特性,可以使用multipartmessages(多个文档放到一个请求)另外一个方式是使用目标锚(一个页面的不同位置)。XHTMLMP不支持标签元素10秒后告诉WAP浏览器URL。注意点:WMLtimer仅当进入card,而HTMLrefreshtimer当进入XHTMLMP页面。,(四)不支持的WML特性,3.XHTMLMP不支持事件。WML支持四个事件(ontimer,onenterbackward,onenterforward,onpick),除ontimer其他事件无法模拟。如要使用,需使用WML1.X。4.XHTMLMP不支持变量。在XML,可以声明变量,并赋值,拥有全局作用域。可以在任何的deck和card中使用。XHMLMP放在服务器端处理(必须发送并保存)。5.XHTMLMP不支持客户端脚本。在XML,你可以使用客户端脚本(WMLScript)。JavaScript的简化版,常用来验证数据。放在服务器短处理。将来的版本将会支持客户端脚本(ECMAScriptMP),支持所有的WMLScript功能。,(四)不支持的WML特性,6.XHTMLMP不支持可编程序软键(ProgrammableSoftKeys)。WML的一个最大特征。通过标签使用。在XHMLMP中可以使用accesskey属性。锚链接和提交按钮支持这个属性:XHTMLMPTutorialPart1标签。在XML,用来在一些文字下添加下划线。可以用WCSS中的text-decoration属性。8.XHTMLMP不支持Input框的format属性。在XML,可以定义类型和字数限制。可以使用WCSS中的-wap-input-format属性,语法一致。比如限制5个数字字符:input-wap-input-format:”5N”,(四)不支持的WML特性,9.XHTMLMP不支持锚链接传输数据。姓名:提交姓名:,(五)语法规则,标签必须完全闭合。标签和属性必须小写。属性值必须包含在引号标记内。不允许无属性值存在。标签必须完全嵌套。,(六)MIME类型和文件扩展名,MIME类型:application/vnd.wap.xhtml+xml、application/xhtml+xml、text/html。动态生成MIME类型。获得HTTP请求中的acceptheader信息。文件扩展名:.xhtml、.html、.htm,(七)文档结构,必须包含,和元素。HelloworldHelloworld.W.,(七)文档结构,XML声明和字符编码:UTF-8/16编码可省略。XML声明也不是必须的,但如果忽略在许多WAP浏览器中出错。必须有DOCTYPE声明。在XML声明和元素之间。、元素,align属性已经去除,可以通过WAPCSS的text-align属性来设置。,(八)通用的元数据,使用标签,包含在内WAP浏览器如果不理解则忽略。比如添加作者:CacheControl:标签的一个应用是控制XHTMLMP文件在Cache中的存在周期:注意点:与设备相关。一些使用不相的方法,一些没有Cache机制。还有一些不支持但识别Cache-Control:no-cache的HTTP头。也可应用于图片的缓存。,(八)通用的元数据,周期性刷新。必须配合使用。不是所有浏览器都支持。,(九)常用标签介绍,注释:,和HTML和WML1.X相同。换行:,和HTML和WML1.X相同。水平线:。不能包含在标签之内。标题:-(不同的大小和样式),有些设备看起来一样的。,(九)常用标签介绍,字体样式:XML可以使用标签来改变字体样式(、等)。但一些浏览器只支持其中的部分,不支持的忽略,不会出错。WCSS控制字体格式。与格式化文本:在XHTMLMP中,标签间空白不显示,此外,段落中2个或更多的空白只显示一个,如果想保持文字的格式,可使用。列表:、。对于元素,可以用属性start指定数字开始的序列。还可以用WCSS来做更精确的控制。显示图片:标签用来显示图片。和HTML一样。如果文件没发现或者图片格式不支持,显示alt属性文本。Height和width属性来指定图片显示区域的高度和宽度,(九)常用标签介绍,除了老的WBMP图片格式,WAP2.0还支持WEB上的图片格式(gif,jpg和PNG),但WAP2.0无线设备支持上面图片格式的某些。GPRS-gif,CDMA-png。可以通过acceptHTTPheader判断设置。关于大图片的发布:很多WAP浏览器都没有水平滚动功能。如果宽度大于显示屏,很多的WAP浏览器会裁切图片。图片的按比例缩小不能帮助提升性能。大图片还会造成访问站点用户的费用。优化图片:1、用制图软件按比例缩小图片;2、如果是gif图片,减少颜色,但降低了图片质量,权衡。3、如果是jpg图片,保存一定的压缩比例,依然是权衡。使用multipartmessages,先下载的XHTMLMP文档,,(九)常用标签介绍,后请求图片,产生多个请求。该方式可以使文档和图片在一个请求,意味着一个页面只有一个请求。减少服务器的压力。表格:创建表格,需要使用、标签,默认表格没有边线。属性有rowspan和colspan。锚链接:一般用在导航。标签为。属性href定义指定的URL。当前页面位置的跳转:先设置目标链接,通过id属性设置;再设置锚链接的URL为#id名称。对锚链接设置快捷键:标签的accesskey属性,有效的值为:*,#,0-9。还可以用-wap-accesskey设置。,(九)常用标签介绍,选择列表:选择列表使用标签,包含一个或更多的标签。标签的name属性定义选择列表的名字。name用来取得被选择的item的值(option的value属性定义)。1.多重选择列表:Option的selected属性用来设置默认的option。如果想设置多重选择列表,可使用标签的multiple属性,只有一个唯一值multiple。2.Option分组:使用标签,label属性定义option组的名称。,(九)常用标签介绍,选择列表,(九)常用标签介绍,输入元素:Textfield、Passwordfireld、Checkbox、Radiobutton、Hiddenfield。通过元素创建。传输数据到服务器,元素必须和一起使用。Type属性用来定义input元素的类别。Name属性用来定义名称,方便取得用户数据。input-wap-input-format:10N,(九)常用标签介绍,13.form元素:、等元素不能直接包含在form元素下,XHMTLMP标准规定必须有块级元素。如果有non-ASCII字符,需使用POST方法来避免编码问题。14.提交按钮:所有的表单都必须包含一个提交按钮。元素用来创建一个提交按钮。而type属性被定义为submit。,(九)常用标签介绍,15.重置按钮:并不是必须的。元素用来创建一个重置按钮。而type属性被定义为reset。16.Div和Span。,三、WCSS/WAPCSS,(一)WCSS介绍,WCSS/WAPCSS/WirelessCSS/WirelessProfileCSS(WAPCascadingStyleSheet)是CSS2的子集+一些WAP特有的扩展目的:定义文档的风格和布局,从文档内容中分离。重要性:不同的手机设备有多样的特征,比如屏幕大小。WML不支持WCSSW3CCSSMobileProfile和WAPCSS不同。,(二)使用WCSS的优势,主要:学习成本降低,可用相同的开发工具,可用WEB浏览器浏览。表现和结构的分离:匹配不同无线设备的特征(屏幕大小)、不同客户端代理(PC、PDA、手机);降低维护成本(新手机);改变视觉和布局仅需CSS;重复使用CSS;便于工作细分。比WML更好的控制表现:可以定义元素的color,font,background,border,margin,padding等属性。移动设备第一次访问站点下载样式(Cache)。使用外部WCSS,XHTMLMP的文档大小变小,提高下载时间。,(三)使用WCSS的劣势,不同的WAP浏览器对WCSS的支持不同,可能一个属性在这个WAP浏览器上支持,而另外一个不支持。外部的WAPCSS可能增加第一次访问页面的请求时间。原因:外部WCSS不存在于手机的Cache,必须从服务器下载;XHTMLMP文档和外部的WCSS下载是不同的请求,增加了服务器压力;如果使用一个WCSS定义WAP站点的所有表现,该文件大小可能很大;WAP浏览器需要解析WCSS到XHTMLMP文档。,(四)MIME类型和文件扩展名,MIME类型:text/css。文件扩展名:.css,(五)WCSS的语法规则,WCSS声明:selectorproperty:property_value多个属性允许的,用;分隔。多个选择器也是允许的,用,分隔。注释:/*orz*/,WAP浏览器将忽略这些内容。,(六)如何在XHTMLMP文档中应用,链接外部WCSS(推荐),放置在文档的head部分,用style属性定义WCSS样式,可以多个,无需修改rel和type属性。someWCSSstatements,(七)不同的选择器,类型选择器:h1font-style:italic元素名称必须小写。Class选择器:.classcolor:blue对应标签的class属性,还可以联合元素名称使用h1.classcolor:blue。ID选择器:#idcolor:red对应标签的id属性也可联合元素名称。通用选择器:*color:blue,所有的标签。注意:在某些WAP浏览器上会使样式渲染变慢。(建议不要用),(八)常用的属性值,长度:%,px,em,ex,cm,mm,in,pt,pc(值和单位之间不允许有空格:margin-top:1px而不是margrin-top:1px)。颜色:rgb(r%;g%,b%)、rgb(r,g,b)、#rrggbb、#rgb、red(16种)。URL:ullist-style-image:url(bullet.gif)无引号、双引号、单引号均可。,(九)字体和文本属性,字体名称:pfont-family:“TimesNewRoman”名称中有空格或多个单词必须用引号包含。字体大小:pfont-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),none3.使用图片文件作为小图标:list-style-image:url(bullet.gif)。注:OpenwareWAP浏览器本地保存了一些icon,可以使用这些作为小图标,例如:ullist-style-image:localsrc(rightarrow1),(十)列表属性,(十一)颜色属性和border属性,设置前景和背景颜色:color、background-color属性。设置border样式:border-style(border-top-style等)属性,值有很多,但只有none和solid被WAP浏览器广泛支持。tableborder-style:solid设置border宽度:border-width(同上)属性,值为数值,还接受thin、medium和thick。注:值设置border-width,border并不可见,必须设置border-style非none值。设置border颜色:border-color(同上)属性。注意点同上。设置border属性的快捷方式:tableborder:2pxsolidblack顺序自由。,(十二)WAP特有的CSS扩展,快捷键:-wap-accesskey,用来指定XHTMLMP元素的快捷键。Input:定义文本框是否可以留空,什么类型,可以输入多少字符Marquee:在屏幕上滚动一些内容。,(十二.1)WCSS快捷键扩展,给元素定义快捷键:-wap-accesskey属性可用的属性值*,#,0,1,2,3,4,5,6,7,8,9input.wcss_class-wap-accesskey:4直接定义*和#违反CSS2语法。需要使用Unicode转义字符2a和23。但是有些WAP浏览器(SonyEricssonWAP浏览器)要求使用2a和23,一些(Openwave手机浏览器)要求使用*和#。与元素的accesskey属性同效,如同时定义,显示该属性值。只用于四个元素a,input,label,textarea,其他定义也无效。,(十二.2)WCSS输入扩展,由两个属性组成:-wap-input-famat和-wap-input-required,对应于WML中元素的format(定义类型和字符数量)和emptyok(是否可以留空)属性。早些的移动设备上WAP浏览器不支持,但支持format和emptyok属性作为XHTMLMP的扩展。为了更好的兼容性,建议WCSS和WML都使用。控制文本框的类型和字符数量:-wap-input-format。需应用在,和标签上,如应用在其他标签无效。格式字符(大小写敏感):a(小写字母或符号),A(大写字母或符号),n(数字或符号),(十二.2)WCSS输入扩展,N(数字),x(小写字母或数字或符号),X(大写字母或数字或符号),m(任何字符,默认小写字母输入模式,可换大写模式),M(任何字符,默认大写字母输入模式,可换小写模式)。属性值必须包含在引号内,由于部分Openwave手机浏览器不支持单引号,建议使用双引号()-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)WCSSMarquee扩展,可以在屏幕上滚动一些内容(一行文字,一个图片,一个链接等),但一些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)WCSSMarquee扩展,二、WAP2.0设计原则,WAP2.0设计原则,设计站点前的准备工作界面设计、挑选核心服务、WAP设备特性统计(浏览器等)关注导航模型一致易学的导航模型。简洁精确且快速的信息。尽可能减少输入(考虑选择列表、复选框或单选按钮等。-wap-input-format:*N;避免模式转换。首字母。)设计导航层次导航模型一致、少用返回链接、避免深度太深(4-5)、返回首页或目录,WAP2.0设计原则,考虑小尺寸屏幕的设计确保内容可见、少于14个字符、一致的样式、减少水平滚动、利用对齐属性增加可读性(1-3)、充分利用空间(图文)、避免过多使用文本样式属性、使用短小精确的词语、避免使用过多的颜色并保持一致、不用名字描述颜色。保持较短的文档大小:内存有限,不支持WML的多card,使用锚链接等不要包含长注释、去除缩进或空格、尽量少用id和class6.用户任务流流畅和图片合理使用图片不是用户目的尽少使用、避免使用大表格。,WAP2.0设计原则,7.页面上提供足够信息首屏常用导航链接、搜索域、登录屏幕和大量信息;上下滚动困难,表单交互要简短。为用户操作提供信息反馈对用户操作、错误和问题情况提供正确的反馈。9.尽可能减少图片数量和减小图像容量大小每张图片都是一个请求,降低页面显示的速度,且内容可能重排序,占用时间和资源,全站规划相同图片。定义图像的高度和宽度属性定义了预占位,改善用户体验,,WAP2.0设计原则,11.谨慎使用表格单元格宽度使用绝对宽度;嵌套层数增加,页面复杂度和处理时间增加;表格边框避免太粗。12.考虑添加样式定义选项权衡!使用Unicode字符编写XHTMLMP内容进行可用性测试,附录,1.常用WAP模拟器WinWAP、OpenWave、Opera2.常用WAP网站,TheEnd!(returnobj),
展开阅读全文