迅雷邹惠斌(Impact) 移动设备web重构

移动设备 WEB 重构迅雷网络 -- 邹惠斌（ Impact ）

• Mobile 2.0• 将电话，计算机网、固定网同移动网结合起来起来的网络（ IP 多谋体系统）。

环境 - 认识 - 不仅仅是电话

-------- 即点即连

环境 - 认识 - 不仅仅是电话

• Mobile Web 2.0

-------- 即点即做

工具 - Series 60 Developer Tools

S60 第三版的官方模拟器 SDKS60 第五版的官方模拟器 SDK

电脑上的 S60 手机模拟器，支持 S60运行 sisx 等所有程序！

消耗 PC 内存比较大，建议在 1G 内存以上

工具 -Windows Mobile 6 SDK

Windows Mobile 平台调试工具

要在 PC 端模拟上网，必须要在 VISTA系统下才可以配置成功。

工具 -Opera mobile simulator

Opera Widgets 是一个小巧而功能强大的跨平台互联网套件，包括网页浏览、下载管理、邮件客户端、 RSS 阅读器、 IRC 聊天、新闻组阅读、快速笔记、幻灯显示（ Operashow ）等功能。

工具 - iBBDemo4B

目前版本， PC 系统需要安装Safari4 以下的版本，才可以运行。

工具 -Firefox 插件 -XHTML Mobile Profile

用它可以对访问的页面进行是否符合 xhtml 规范的检查。

工具 - 建议

建议用多个模拟器并行测试，但是也有可能会和真机测试有偏差，如果条件容许下，用真机测试是最好的。

• HTML 标记语言• 移动设备对 table,td… 支持比较差。

结构 -J2EE 展示层

• WML- 无线标记语言• 事件： WAP 最初的提出， HTML3.2 多数

复杂的格式在移动设备中无法工作。

结构 -J2EE 展示层 -WML

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

　　 "http://www 。 wapforum 。 org/DTD/wml_1.1.xml"> <wml> 　 <card id=“phone" title=" phone "> phone! </card> </wml>

显示结果如下： ------ phone------ phone!

结构 -J2EE 展示层 -WML

• HTTP/HTML 模式在每个 HTTP 循环中包括一个请求。

• WML 可以通过页面进行“预获取”来加快相应速度。

结构 -J2EE 展示层 -WML- 卡片组

第 1 第 2 浏览器发出请求第 3 ， 4 到某个特点资源所运行的 J2EE 服务器第 5 输出为卡片组

结构 -J2EE 展示层 -WML- 卡片组

• 在 WML 中，所传输的、用以替代 HTML 流的 ML 流是经过二进制编码的，目的是压缩元数据。

• 浏览器可以并行显示和接受 WML 流

结构 -J2EE 展示层 -WML-WAP 二进制 XML

在 RF 网络进行传输中，我们发费超过一半的时间来传输这些用户从来不想看的数据，那么 WML 可以很好的解决这个问题。


编码后的 WML 输出被称为 WAP 二进制 XML ，或者叫做 WBXML

Tag 16 进制替代 WML

“<table>” 1F

“<tr>” 1E

“<td>” 1D

“<P>” 20

采用 WBXML 编码，我们将原数据降低到整个相应流的 16% ，尽管这是一个孤立的例子，但仍然说明WBXML 可以非常显著的减少负载。


TAGS

WML<table columns=“2”><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>

[81 字符 =81 bytes]

WBXML1F 53 03 02 001E 1D 01 1D 01 011E 1D 01 1D 01 0101

[18 bytes]

结构 -J2EE 展示层 -XHTML-MP

XHTML Mobile Profile 是基于 XHTML Basic 的 XHTML 1.1 的严格子集。

模块元素布局 body, head, html, title

文本 abbr, acronym, address,blockquote, br, cite, code,dfn, div, em, h1, h2, h3,h4, h5, h6, kbd, p, pre, q,samp, span, strong, var

超链接 a

列表 dd, dl, dt, li, ol, uldd, dl, dt, li, ol, ul

介绍 b, big, hr, i, small, sub,sup, tt

表单 button, fieldset, form,input, label, legend,optgroup, option, select,textarea

表格 caption, table, td, th, tr

图像 img

对象 object, param

Intrinsic Events (partial) Various attributes (see section 10.2)

元信息 meta

脚本 noscript, script

样式表 style element

样式属性 style attribute

链接 link

基本 base

缺省 ( 部分 ) Ol 的 start属性已经过时，使用 li 的 value属性代替 ol 元素的 start属性。文字输入模式（ OMA ） inputmode attribute on input,textarea


XHTML-MP 1.2

• 更丰富的格式支持。

• 对 WCSS 的支持。



WML XHTML-MP

WCSS × √

Deck 与 Card √ ×

计时器 √ ×

事件ontimer,onenterbackward, onenterforward ， onpick

√ ○

变量 √ ○（服务器端进行）

客户端脚本 WMLScript ECMAScript

软键 (accesskey) 编程 √ ○

<u> 标签 √ ×

格式化属性 √ ×

锚链接发送数据 √ ×

XHTML MP 与 WML 比较

结构 -J2EE 展示层 - 应用杀手

手机平台下还要考虑语义化标签吗？

建议用不建议用

div ， p ， span,a ul ， ol ， li,table ， strong,em,b

表现 -WCSS

WAP2.0 下专属的 CSS ： WCSS （ WAP Cascading Style Sheet ）

是 CSS2 的子集+ 一些 WAP 特有的扩展

表现 -WCSS-扩展WCSS 扩展属性值

快捷键 -wap-accesskey （定义快捷键）* ， # ， 0 ， 1 ， 2 ， 3 ， 4 ， 5 ， 6， 7 ， 8 ， 9

输入　

-wap-input-famat （定义类型和字符数量）当 -wap-input-format 和 -wap-input-required冲突时，以 required优先。

2N （最多两个数字）NN （两个数字）*N （无限个数字）A*a （第一个大写字母或符号， 0-n 个小写字母或符号） *M （默认）

-wap-input-required （是否可以留空） false 和 true

Marquee

-wap-marquee display

-wap-marquee-dir(指定方向 ) ltr ， rtl-默认

-wap-marquee-loop （指定重覆时间） infinite,1

-wap-marquee-speed （指定速度） slow ， normal-默认 , fast

-wap-marquee-style （指定屏幕如何滚动）

scroll-默认， slide ， alternate

表现 -WCSS- 应用杀手

1. 不同的移动设备浏览器支持 WCSS 的属性差异比较大。

2.外部WCSS 不存在于手机的 Cache 。


考虑任务列表而不是小册子


应用背景图，白色字


------- 用了 Float(UCWEB6.7 、 QQ 浏览器 )

------- 用了 Float

建议一：平滑降级

------- 在最小公分母设计中，我们不用任何“先进”的特性，从而处于“安全”的地位，在平滑降级中，即使浏览器缺少很多特性，但可显示性达到了最大化。



------ 较低端手机平台

针对 Iphone 和 Android ------


建议二：个别兼容，个别不同展现。

------- 要一套样式兼容多个平台是不可能的例如： S60v3 和 S60v5 的字体大小就需要不同的SIZE 来控制。

针对个别高端手机做出不同的样式表现。（或是判断自动选择或是让用户选择）

移动设备 WEB 重构

虽然还有好长的路要走，但是却离我们很近！

------感谢WebRebuild 组委会

THANKS ！

迅雷邹惠斌(Impact) 移动设备web重构

Technology

Transcript of 迅雷邹惠斌(Impact) 移动设备web重构