移动设备是一种全新的媒介。桌面系统中总结出来的最佳实践在移动系统中完全不适用。移动设备、移动生态系统和移动用户具有独特的特性,要求采用不同于以往的最佳实践进行移动Web开发。
新荣网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联自2013年起到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
本文将讲述移动Web的语法、语义和生态系统。您将学习如何构建适应性强、响应迅速并且符合标准的移动Web站点,并确保其可以在任意移动浏览器上运行。一些简单的开发提示和技巧将改进小尺寸屏幕中的Web可用性。您可以进一步充实移动Web站点,使其适用于高级智能手机浏览器(具有电子邮件、桌面功能的Web浏览等集成Internet功能的高端手机中的浏览器),能够呈现完整的HTML并实现专有扩展。开发工作完成后,您将了解如何在实际移动设备上进行全方位的测试,优化移动Web页面以便于网络传输,以及通过避免代码转换保留更多适用于移动生态系统的程序。
移动Web好比是西部荒野。一些重量级人物控制着整个生态系统,战争随处可见。意志坚定的人可以在遥远的地方占有财产、构建家园、建立社区以及与世隔绝的繁华村落。但是,要想生存下来,最好的方式还是全副武装。而对于移动开发人员来说,在这片荒野中生存最有效的武器就是:
◆ 对移动标准和最佳实践具有专业而深入的了解
◆ 批判性思维技能和正确对待怀疑
◆ 千方百计找出正确的语法
◆ 正确评价移动用户的需求
基于标准的移动Web开发方法确保在各种移动浏览器和平台之间的兼容性和可用性。要想在移动Web开发领域取得成功,必须了解所有规则,同时还要了解什么时候可以忽略规则。
1.1 移动Web和桌面Web
从根本上说,只有一种Web。Web内容是可以使用各种Web浏览器查看的标准化标记、样式、脚本和多媒体。在本书中,按照惯例将这种Web称为桌面Web。我们可以在台式计算机、笔记本电脑、上网本上通过Firefox、Opera或Internet Explorer等浏览器访问桌面Web,进行网上冲浪。
桌面Web由通过TCP/IP计算机网络链接在一起的大量服务器构成。这种服务器称为Web服务器,很多Web服务器实现超文本传输协议(HTTP)共享文档和文件。Web服务器通过统一资源标识符(Uniform Resource Identifier,URI)提供对文本文件、标记文档和二进制资源的访问。
在HTTP请求中,客户端向Web服务器发送所需资源的URI以及一组请求头,其中一个请求头包含MIME类型列表,该列表公布客户端支持的内容类型。
在HTTP响应中,Web服务器除了向客户端发送请求的文档(标记、文本或二进制文件)外,还会附带另外一组头,其中一个头包含MIME类型,描述传输到客户端的文档的文件类型。
移动Web在桌面Web的基础上添加了新的MIME类型、标记语言、文档格式和最佳实践,为小尺寸屏幕提供优化的Web内容,并可解决移动设备上的资源限制、Web浏览器可用性差等问题。
移动Web在Web生态系统中引入了一些新的组件,包括:
◆ 针对移动设备进行了优化的标记语言和样式
◆ 可区分移动标记和桌面HTML的MIME类型
◆ 具有大量功能的浏览器客户端
◆ 使内容更适合上述客户端的网络代理
如果将移动Web比作西部荒野,桌面Web就可称得上是世外桃源。桌面Web是一种较好理解的安全开发环境,采用根据已制定的标准建立的客户端技术。截止到本书编写时,桌面Web已经走过将近20年的风雨历程了。桌面浏览器客户端是公开的、免费的、可轻易获得并且经常更新。目前人们使用的主流Web浏览器是由少数软件供应商和开放源代码项目生产的,这样就降低了跨平台Web开发中的测试难度。在桌面生态系统中,如果一个Web页面到达目标浏览器,则其标记在传输途中几乎一直存在,Internet中的中介服务器不会更改这些标记。网络所有者和Internet服务提供商(Internet Service Provider,ISP)对于通过自动标记适配和内容重新打包优化和改善网络体验没有任何兴趣(请参阅表1-1,了解定义移动Web和桌面Web的特征列表)。
表1-1 移动Web和桌面Web的特征
移 动 Web | 桌 面 Web | |
平均会话长度 | 2~3分钟 | 10 ~15分钟 |
最小屏幕尺寸 | 90×60 | 800×600 |
最大屏幕尺寸 | 对于常用的设备为240×400 | 无限制 |
浏览器供应商 | 超过12家并且还在不断增长 | 只有两家,市场份额超过5% |
浏览器故障 | 经常出现故障。除使用可更新操作系统的智能手机外,其他设备都无法修补 | 很少出现故障并且可以修补 |
W3C 标准 | 不规范。在移动行业中,有时会忽略甚至违背这些标准 | 接受并充分应用 |
标记语言 | WML CHTML XHTML Basic XHTML-MP XHTML HTML | XHTML、HTML |
JavaScript和AJAX | 90%的移动设备都不支持。采用ECMAScript-MP和JavaScript。文档对象模型(Document Object Model,DOM)和支持的事件不同。一般都采用专有的API | 通常情况下支持 |
可寻址的客户 | 全球30亿移动订阅者 | 总计10亿台笔记本电脑、台式计算机和服务器 |
桌面Web过滤软件可以阻止查看让人讨厌的网页,但是,Web过滤器的工作方式是阻止页面访问,而不是调整页面语法。
移动Web开发是一门全新的学科,这样说的原因如下:
◆ 移动Web生态系统是全新的。移动Web使用桌面Web的既有知识,但它也有一些从移动设备独有的特性衍生出来的新的最佳实践和疑难问题。桌面隐喻并不适用。带宽占用量是一个比较关键的问题,即使对智能手机也是如此。使用JavaScript架构以及异步JavaScript和XML (AJAX)等Rich Web 2.0功能时务必要谨慎,否则有电池电量耗尽的风险。运营商经常会控制和阻止移动Web站点的流量。在移动标记传输到移动浏览器的途中,代码转换代理经常会尝试重置移动标记的格式。最后,必须编写一些保护性的程序,降低代码转换器暴露以及出现移动网络问题的概率。
◆ 移动Web用户是全新的。移动Web用户采用独特的使用模式和导航方法。移动用户具有强烈的目标导向性和位置感知能力。在影响移动用户的移动Web浏览体验的主要因素中,即包括在服务区内外漫游时的网络访问问题。实际上,对成本敏感的移动用户宁可取消网络交易,也不愿冒因错误操作而支付费用的风险。
◆ 移动Web浏览器是全新的。移动浏览器具有其他浏览器所不具备的优势,同时也有一些与众不同的问题及相应的解决方法。Web标准实现不彻底是经常出现的问题。Web页面格式错误会对移动设备产生严重的影响,包括浏览器崩溃或设备重置。用户非常需要JavaScript和AJAX等高级Web功能,但这些功能会影响电池的使用寿命。市场上有数十家移动浏览器供应商,确保Web标准遵从性的重担就落在了原始设备制造商(Original Equipment Manufacturer,OEM)和运营商肩上。
#p#
1.2 移动标记语言
目前,各种移动设备采用的移动浏览器一般是基于一定的标准,但又不一定遵从标准,这样,用户可以查看多种移动标记语言的Web内容,这些语言包括:
◆ XHTML和HTML
◆ XHTML移动配置文件(XHTML-MP)
◆ CHTML (iMode)
◆ 无线标记语言(WML)
1.2.1 HTML和XHTML
HTML是移动标记语言的旗舰产品。作为标准Web标记语言,HTML被Web开发人员和设计人员广泛使用。很多移动浏览器都支持完整的HTML标记集,但是这些浏览器可能无法满足直接查看桌面HTML网站的用户体验。对于移动设备来说,屏幕分辨率、存储容量和带宽都存在限制,有必要开发出更加优化的标记和样式。当然,移动用户还希望针对他们的移动特性开发出一些专用的服务。
XHTML在严格遵循XML语法的基础上,结合运用HTML标记集。对于移动浏览器来说,处理和呈现XML格式的标记要比处理松散的HTML语法规则容易得多。对于支持HTML的移动浏览器来说,XHTML是最佳标记。
Android、iPhone、Nokia Series 60、Windows Mobile和BlackBerry设备中的智能移动浏览器都支持XHTML、HTML、JavaScript和AJAX。此功能集以及可选择添加的大量客户端缓存和CSS扩展功能构成了交互式移动Web应用程序的基础。本书介绍如何针对智能手机浏览器构建高级的Web应用程序。
注意:
仅针对智能手机开发的移动Web站点可以使用HTML 4的完整功能集,并且在不久的将来,还可以使用HTML 5的完整功能集。但是,在移动Web站点上使用HTML和XHTML需要支付一定的费用。使用HTML和XHTML后,无法与使用旧版浏览器的高容量功能手机(市场上大量销售的低成本、功能很少的手机)兼容(尽管智能手机做了大肆的宣传,但还是有大量的功能手机用户在移动Web上冲浪)。使用桌面标记还需要引入代码转换器,也就是通过重置标记格式优化桌面Web使之适用于移动设备的网络应用程序。代码转换器可以使系统认为标记是用于桌面浏览器的,同时机器会对标记进行重新调整,使其适合移动浏览器。本书教您应对以下两种情况:如何最大程度地使HTML与移动浏览器兼容;如何避免对针对移动设备进行了优化的HTML进行双重代码转换。
1.2.2 XHTML移动配置文件
XHTML移动配置文件(XHTML-MP)由开放移动联盟(http://openmobilealliance.org)指定和维护,实际上,它就是移动Web的标准标记。移动配置文件,顾名思义,这种标记语言是XHTML的一个子集,专用于移动计算设备,包括手机:
◆ XHTML-MP 1.0设定了移动标记语言的基本标记。
◆ XHTML-MP 1.1添加了