移动设备web重构

1,515 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,515
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

移动设备web重构

  1. 1. 移动设备WEB重构<br />迅雷网络--邹惠斌(Impact)<br />
  2. 2. 环境-认识-不仅仅是电话<br />Mobile 2.0<br />将电话,计算机网、固定网同移动网结合起来起来<br /> 的网络(IP多谋体系统)。<br />--------即点即连<br />
  3. 3. 环境-认识-不仅仅是电话<br />Mobile Web 2.0<br />--------即点即做<br />
  4. 4. 工具- Series 60 Developer Tools<br />S60第三版的官方模拟器 SDK<br />S60第五版的官方模拟器 SDK<br />电脑上的S60手机模拟器,支持S60运行sisx等所有程序!<br />消耗PC内存比较大,建议在1G内存以上<br />
  5. 5. 工具-Windows Mobile 6 SDK<br />Windows Mobile 平台调试工具<br />要在PC端模拟上网,必须要在VISTA<br />系统下才可以配置成功。<br />
  6. 6. 工具-Opera mobile simulator<br />OperaWidgets是一个小巧而功能强大的跨平台互联网套件,包括网页浏览、下载管理、邮件客户端、RSS阅读器、IRC聊天、新闻组阅读、快速笔记、幻灯显示(Operashow)等功能。<br />
  7. 7. 工具- iBBDemo4B<br />目前版本,PC系统需要安装Safari4以下的版本,才可以运行。<br />
  8. 8. 工具-Firefox插件-XHTML Mobile Profile<br />用它可以对访问的页面进行<br />是否符合xhtml规范的检查。<br />
  9. 9. 工具-建议<br />建议用多个模拟器并行测试,但是也有可能会和真机测试有偏差,如果条件容许下,用真机测试是最好的。<br />
  10. 10. 结构-J2EE展示层<br />HTML标记语言<br />移动设备对table,td…支持比较差。<br />
  11. 11. 结构-J2EE展示层-WML<br />WML-无线标记语言<br />事件:WAP最初的提出,HTML3.2多数复杂的格式在移动设备中无法工作。<br />
  12. 12. 结构-J2EE展示层-WML<br /><?xml version="1.0"?> <br /><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"   "http://www 。wapforum 。org/DTD/wml_1.1.xml"> <br /><wml> <br /> <card id=“phone" title=" phone "> <br /> phone! <br /> </card> <br /> </wml> <br />显示结果如下: <br />------ phone------ <br /> phone! <br />
  13. 13. 结构-J2EE展示层-WML-卡片组<br />HTTP/HTML模式在每个HTTP循环中包括一个请求。<br />WML可以通过页面进行“预获取”来加快相应速度。<br />
  14. 14. 结构-J2EE展示层-WML-卡片组<br />第1第2浏览器发出请求<br />第3,4到某个特点资源所运行的J2EE服务器<br />第5输出为卡片组<br />
  15. 15. 结构-J2EE展示层-WML-WAP二进制XML<br />在RF网络进行传输中,我们发费超过一半的时间来传输这些用户从来不想看的数据,那么WML可以很好的解决这个问题。<br />在WML中,所传输的、用以替代HTML流的ML流是经过二进制编码的,目的是压缩元数据。<br />浏览器可以并行显示和接受WML流<br />
  16. 16. 结构-J2EE展示层-WML-WAP二进制XML<br />编码后的WML输出被称为WAP二进制XML,或者叫做WBXML<br />
  17. 17. 结构-J2EE展示层-WML-WAP二进制XML<br />采用WBXML编码,我们将原数据降低到整个相应流的16%,尽管这是<br />一个孤立的例子,但仍然说明WBXML可以非常显著的减少负载。<br />
  18. 18. 结构-J2EE展示层-XHTML-MP<br />XHTML Mobile Profile是基于XHTML Basic 的XHTML 1.1 的严格子集。<br />
  19. 19. 结构-J2EE展示层-XHTML-MP<br />XHTML-MP 1.2<br />
  20. 20. 结构-J2EE展示层-XHTML-MP<br />更丰富的格式支持。<br />对WCSS的支持。<br />
  21. 21. 结构-J2EE展示层-XHTML-MP<br />XHTML MP 与 WML 比较<br />
  22. 22. 结构-J2EE展示层-应用杀手<br />手机平台下还要考虑语义化标签吗?<br />
  23. 23. 表现-WCSS<br />WAP2.0下专属的CSS:WCSS (WAP Cascading Style Sheet )<br />是CSS2的子集+一些WAP特有的扩展 <br />
  24. 24. 表现-WCSS-扩展<br />
  25. 25. 表现-WCSS-应用杀手<br />1.不同的移动设备浏览器支持WCSS的属性差异比较大。<br />2.外部WCSS不存在于手机的Cache。<br />
  26. 26. 表现-WCSS-应用杀手<br />考虑任务列表而不是小册子<br />
  27. 27. 表现-WCSS-应用杀手<br />应用背景图,白色字<br />
  28. 28. 表现-WCSS-应用杀手<br />-------用了Float<br />-------用了Float<br />(UCWEB6.7、QQ浏览器)<br />
  29. 29. 表现-WCSS-应用杀手<br />建议一:平滑降级<br /> -------在最小公分母设计中,我们不用任何“先进”<br />的特性,从而处于“安全”的地位,在平滑降级中,即使<br />浏览器缺少很多特性,但可显示性达到了最大化。<br />
  30. 30. 表现-WCSS-应用杀手<br />------较低端手机平台<br />针对Iphone和Android ------<br />
  31. 31. 表现-WCSS-应用杀手<br />建议二:个别兼容,个别不同展现。<br /> -------要一套样式兼容多个平台是不可能的<br />例如:S60v3 和 S60v5的字体大小就需要不同的<br />SIZE来控制。<br /> 针对个别高端手机做出不同的样式表现。(或是<br />判断自动选择或是让用户选择)<br />
  32. 32. 移动设备WEB重构<br />虽然还有好长的路要走,但是却离我们很近!<br />------感谢WebRebuild组委会<br />THANKS!<br />

×