Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,421 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

迅雷邹惠斌(Impact) 移动设备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 />

×