作者：美 埃斯特尔 韦尔Estelle Weyl
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5移动开发试读：
前言
我们将要学习如何开发移动Web应用。注意Web这个词，本书关注的是为移动设备（如Android、iPod、iPhone、BlackBerry和平板电脑）开发Web应用，而不是需要iOS或Android SDK进行的本地应用开发。本书讲解的知识与操作系统无关。
移动Web应用是使用了桌面Web应用的标记语言和可触控设备功能的网站或Web应用。Web应用无论是通过手机、平板电脑还是笔记本来访问，都是使用HMTL、CSS、JavaScript以及可选的图片、音视频资源和服务器端技术来构建的。
通过升级到使用新的HTML5、CSS3和JavaScript特性，我们可以创建出具有本地应用外观的Web应用。因移动Web应用是基于Web的，因此它们兼容于台式机、智能手机、平板电脑以及具有现代浏览器的其他设备。由于Web应用是基于Web的，我们可以直接将其分发给我们的用户，而不需要先在Apple App Store或Google Play中上架，也不用承受它们那复杂、昂贵而又冗长的审批流程。
本书讲解的内容可以帮助你使用CSS3、HTML5和JavaScript创建能在浏览器中运行的应用。本书都是关于你已经知道的一些技术：那些能移植到大多数设备的技术。本书讨论的所有内容都与操作系统无关。
也就是说，我们将要学习的知识不仅可以工作在iPhone、iPad和Android设备上，而且可以工作在其他移动平台（其中包括Firefox OS和Windows Phone）以及现代的桌面浏览器或者具有现代浏览器的其他设备（比如Wii这样的游戏设备）上。尽管本书关注的是移动开发，但是所介绍的内容可以用在大量的大小设备上，只要设备带有一个遵循现在Web标准的浏览器即可。
应用程序在本地平台上的能力在10多年以来保持得相当稳定，但是在过去的最近几年，Web平台增强了处理Web应用的能力，使得Web应用几乎和本机上的应用一样。
iPhone增加了Canvas、应用缓存、数据库以及SVG。包含了这些特性的Safari 4.0，又增加了视频、音频和Web Workers。在2009年末，地理位置和Canvas特性不但增加到了iPhone上，而且在Chrome、Opera、Firefox、Internet Explorer和Android上也可以看到它们的身影。
借助于Web浏览器，多年以来我们已经能充分利用HTML、CSS、DOM、SVG和XHR。在本书中，我们将HTML5和CSS3技术囊括了进来：HTML5和CSS3可以用来构建与本地应用相匹敌的Web应用。
使用Web浏览器，很多年来我们已经能够充分利用HTML5、CSS、DOM结构、SVG和XHR。在本书中，我们进行横向扩展以包括HTML5和CSS3：能够用来构建可以与原生应用相匹敌的Web应用的技术，而且现代的移动浏览器和桌面浏览器均对其提供了支持。本地应用和Web应用的对比
你可以在App Store上销售本地iPhone应用，这听起来很酷。你也可以通过Google Play、Amazon以及其他在线平台销售本地Android应用。如果是基于Web的应用，你可以绕过应用商店的审批流程，无须向其支付年费和销售费用，也不走它的销售市场，而是通过你的网站或者其他销售渠道直接将应用销售给你的消费者群体。如果你的应用是通过应用商店销售的话，则从成千上万的应用中脱颖而出的难度很大。而且，与本地应用相比，Web应用带来的好处远大于其开发成本。
Web应用的开发和迭代也很容易。只要你想，你随时可以对你的Web应用进行修改；如果需要，可以一天修改好多次。
我们以修改iPhone上的一个本地应用为例，你需要3周以上的审批流程。一旦你的应用被批准并上架之后，你不得不等待用户进行同步并更新他们的应用。而使用CSS3和HTML5开发的Web应用，你所做的修改基本上是实时的，而且用户在离线状态下也可以访问——如同本地应用那样。
如果你本地应用的字幕名单中因为疏忽而没有包含你老板的名字，或者是拼错了你母亲的名字，这些事情将会一直折磨着你，直到你通过应用商店进行了校正推送，但是除非用户通过iTunes下载并同步更新了你的应用，否则这些问题将一直存在。而这可能需要很长的时间。 我很善于成为“过时的”，我从不将我的iPhone上的Bump、Twitterfic和Gowalla进行升级。我想我应该不是唯一拥有“古董级”iPhone应用的人。不要假设使用本地应用的用户会升级他们的应用。
通过使用HTML5开发的Web应用，在离线状态下也可以使用，就如同本地应用那样。尽管本地应用需要数周时间来更新，但是可以将Web应用强制为下次在联网状态下使用时进行更新。第6章在讲解离线应用时会讲到这一点。
HTML5 Web应用的开发利用了你已经知道的HTML和CSS技能。我们将在你现有的技能上进行开发，而不是让你学习全新的技术、全新的平台以及只能在一个平台上使用的全新语言。
使用HTML5和CSS3的浏览器标记，你可以构建跨平台的应用。本地的iPhone应用可以在iPod touch和iPhone上运行，而且大多数iPhone应用可以在iPad上运行，但是却不能在Windows、BlackBerry和Android上运行。本地Android应用只能在Android设备上运行，而不能运行于iOS设备。本地Google TV应用也不能在iOS设备上运行。与本地应用不同，你的HTML5/CSS3 Web应用可以在WebKit、IE10、Blink、Opera Mobile（而非Opera Mini）和Firefox Mobile浏览器上。而且只要设备上安装了现代浏览器，而且默认支持HTML5和CSS3特性，你的Web应用就能在这些设备上运行。
使用HTML5和CSS3开发的大多数Web应用，已经能在现代浏览器上运行。但是Internet Explorer 8以及更早的版本还不支持，而Internet Explorer 9只支持部分HTML5和CSS3。Internet Explorer 10在支持这个不断发展的规范方面还是路漫漫。
自从iPhone SDK在2008年发布以来，iPhone大多数应用是作为本地应用创建的。但是在SDK发布之前，则只有Web应用。由于HTML5尚未就绪，人们只能从Web应用转向本地应用。现在移动浏览器已经能够支持很多HTML5 API，因此我们也就可以开发快速的、具有视觉吸引力的响应式Web应用了。
使用HTML5和CSS3开发Web应用的最后一个理由是支持视频！iPhone、iPod和iPad都不支持Flash，而且也不打算支持。但是，安装有Safari WebKit浏览器的所有iOS设备都支持HTML5
随着与标准兼容且具有前瞻性思维的浏览器的扩散（手持设备为其扩散提供了助力），我们现在终于有机会将Web开发这门学科带入21世纪。
在学习本书时，希望你能够忘记Internet Explorer的所有旧版本。Web是向前发展的，而且发展速度相当快。你是否会因为IE6、IE7甚至IE8而拒绝学习和使用CSS3和HTML5呢？这些旧的浏览器不会出现在移动设备上，它们在台式机上的受欢迎程度也在下降。不要迟疑不决了！
由于与标准不兼容的传统浏览器依然普遍存在（最知名的是IE6到IE8），Web开发人员受限于此，无法开发出强大的网站。向IE6和IE7的妥协迫使我们只能使用过时的代码，这使得我们在实现高级的旧标准以及不算太新的建议标准时诚惶诚恐。在本书中，我们将学习所有可以使用的技术，因为我们没有必要去迎合已经过时的浏览器。
在学习本书时，要从HTML5和CSS3的角度出发。不要总是想“哦，这可能在某某浏览器中不工作”，而是要想“这太棒了”。通过学习这些技能和语法，当所有的浏览器最终支持这些较新的特性时，你已经领先别人很多。在学习本书的同时，你也将学到一些主要的技巧，并且能够创建强大的Web应用。浏览器
Safari、Chrome、Firefox、Opera和IE10（包括它们的桌面版和移动版）都支持现代的Web标准，其中包括HTML 4.01、XHTML和部分HTML；CSS 2.1和部分CSS3；JavaScript（包括AJAX技术）和DOM Leve 2模型。在这场游戏盛宴中，Windows起步虽晚，但是新出的手机支持HTML5。你曾经记得有人在2010年购买了Windows手机吗？直到2012年2月，当我在一个会议上询问“谁用的是Windows手机”时，有人回答“我的是”。现在，Windows手机正在变得越来越受欢迎。当然，我们不是要迎合旧式的“Windows Mobile”，而是那些购买了新款Windows手机的人。
本书关注的是为移动浏览器设计和开发网站，为我们提供机会来使用最前沿的Web技术。我们已经确定不再考虑过时的浏览器，而且我希望我的网站和Web应用能够在所有的浏览器上正确地呈现出来（虽然不一定要在所有的浏览器上都一样）。我猜你也是这样想的。在涉及相关内容时，我们会简要介绍在其他常见的非移动浏览器中处理特性的提示和技巧。Web应用与本地应用的对比：简史
2007年6月，在第一代iPhone上市的一周内，加州旧金山就举行了第一届iPhoneDevCamp。在iPhone最初发布时，还没有可用的SDK。因此，最初所有的iPhone应用都是基于Web的。
在iPhone最初发布时，iPhone操作系统的功能远没有今天市场上的手机那么强大，当时用的是EDGE网络，下载速度慢得要死。鉴于这些限制，人们在开发应用时主要关注的是，要确保应用的图片小于10KB，JavaScript代码小于10KB，而且能适应下载速度为10KB/s的网络。
在第一届iPhoneDevCamp上，参与人员自行开发了文档，旨在相互帮助，从而获得开发出有趣的（基于与Web的）iPhone应用的技能。最初，也没有默认的onOrientationChange事件。相反，我们添加了一个计时器来定期检查手机的朝向，并基于返回的值使用JavaScript来切换CSS类。
在iPhone发布的第一个周末，Joe Hewitt为iPhone编写了第一个JavaScript和CSS库iUI，并将其与在场的开发人员进行了分享。Joe、Nicole Lazarro和另外三位开发人员创建了第一个iPhone程序Tilt，这个程序使用了iPhone的运动感知能力。Dori Smith开发了一个纯JavaScript iPhone游戏iPhone Bingo。Richard Herrera、Ryan Christianson、Wai Seto和我开发案例Pickleview，这是一个Twitter/职业棒球大联盟AJAX混搭（mash-up）应用，它允许用户观看任何棒球比赛并发布与比赛相关的推文。这是一种解放：这是我第一次使用了多重背景图片、边框图像，CSS选择器和不透明度，而不用担心为大量的浏览器、浏览器版本和操作系统提供支持。
在iPhone发布的前9个月内，只有Web应用以及Apple控制的本地应用：除了Apple之外，再也没有本地的iPhone应用开发。由于带宽限制和Apple开发人员文档的缺乏，iPhone Web应用的量并没有扶摇直上。而且由于iPhone WebKit Safari浏览器无法访问iPhone OS的原生特性，因此针对iPhone的Web应用开发并不成功。随着SDK的发布，iPhone应用开发开始蓬勃发展。发布SDK：第三方应用的开始
iPhone SDK是2008年3月6日首次发布的。iPhone SDK允许第三方开发人员针对iPhone（以及后来的iPod touch和iPad）开发应用，并且可以访问2008年7月推出的App Store。随着SDK的发布、App Store的开张以及开发人员可以在App Store上销售自己开发的应用来赚钱，针对iPhone的开发迅速全面地转移到构建本地iPhone应用上来。
自从SDK发布以来，针对iPhone应用的开发就主要是以开发本地iPhone应用为主了。但是我们将改变这个局面。在2008年，Web应用相较于本地应用的限制打消了开发Web应用的积极性，具体如下所示。
Web应用的缺点（2008年）：● 在iPhone Safari中的文件最大为10MB；● Web应用无法存储数据，缓存也有限；● 在所有浏览器（包括iPhone的Safari）上都不支持CSS3和HTML5
特性。● 本地应用的优点（2008年）：● 易于使用XCode进行开发；● 通过在App Store上销售应用。
但是，在2013年，情况发生了转变。开发Web应用与开发本地应用的争论发生了逆转，具体如下。
Web应用的优点（2013年）：● 容易开发和迭代（开发人员可以一天推送多次，从而提供快递迭
代）；● 使用现有的HTML和CSS技巧（不需要开发人员掌握全新的技
术）；● 技术和平台均相同；● 提供了跨平台的潜力。
本地应用的缺点（2013年）：● 要在App Store上分发应用，需要3周以上的审批流程；● 应用商店会审查应用的内容；● 每年需要支付给Apple 99美元以上的开发人员年费，外加30%的
销售分成；● 修改产品代码以及等待用户同步和更新其应用的时间很长（使用
HTML5，你可以即时修改）。有什么新东西？新元素和API
HTML5已经筹划了多年，自从2004年起就开始发力，当时它的名字还是Web Application 1.0。尽管还没有最终确定，但是其中有些部分已经相当完备，而且得到了现代浏览器的支持（通常情况下是完全支持）。现代浏览器（又称为A级浏览器）包括Safari、Chrome、Internet Explorer 10+、Firefox和Opera。IE8以及更早的版本则不在此列。IE9部分支持HTML5，但它是一款抑制了Web发展的浏览器。尽管并非所有的浏览器都支持HTML5，但是所有的WebKit/Blink浏览器、Opera Mobile、Firefox OS和新款的Windows手机都支持HTML5。现在是开始使用HTML5的最后时间了。
HTML5是一个描述了新的Web API标准的总称，其中有些标准是HTML5规范中的（比如拖放），有些则不是（比如地理位置）。
借助于HTML5和相关的API，我们不再局限于本地应用的开发。鉴于HTML5和相关API的规范太长，本书不会讲解所有的图形，但是会涵盖一些你今天可以拿来使用的特性，比如下面要讲解的主题。语义分组标记
HTML5提供了一些新的标签，用于对标记语言中的标签（tag）或区段（section）进行逻辑分组。在定义你的网站架构时，从语义角度进行分组，而不是使用非语义的
Web上有数百万的表单，而且每个表单都有大量的脚本来验证电子邮件、创建弹出式日历，从而确保在提交之前表单上填充了必要的元素，并在表单元素接收到焦点时清除占位符文本。借助于HTML5，我们不再需要使用JavaScript验证表单。在HTML5中，表单元素已经对定义数据类型的新特性和方法进行了更新。
第4章将讲解一些修改后的表单元素，学习如何创建本地滑动条、占位符文本和日期选择器以及验证邮件地址，从而确保填充了所有的必填字段，以及能够基于输入类型来显示自定义的键盘——这一切都不需要JavaScript。SVG和Canvas
借助于HTML5，图片再也没有必要非得嵌入在对象中了。HTML5添加了两个本地HTML5元素
到目前为止，所有的浏览器视频和音频都需要插件。通过使用HTML5，我们可以对视频和音频提供本地的浏览器支持。而且视频和音频都可以通过脚本来处理。HTML5浏览器原生地支持webM和mp4格式。借助于DOM，你可以控制视频和音频，比如静音、快进和停止。借助于CSS，你可以对播放器进行样式化处理。尽管iOS设备从来不支持Flash和Silverlight，但是所有的移动浏览器都支持HTML5视频和音频。第5章将讲解
地理位置并不是HTML5规范的一部分，作为一个相关的API，它是一个非常有用的模块。地理位置API可以用来识别移动设备和桌面设备的地理位置。第6章将讲解地理位置API。离线内容和存储
手机是移动设备，这一点是显而易见的。Internet服务在手机上进进出出（尤其是注定要使用AT&T的用户）。HTML5应用缓存、本地存储和数据库API可以使得在你的手机离线时，仍然可以使用Web应用。第6章将讲解让你的应用能离线工作的API。其他API
第6章还会简单讲解微数据、ARIA和Web Workers。尽管微数据在你的网页或Web应用上没有视觉或功能上的效果，但是你可以使用微数据将机器可以读取的语义添加到内容中，以便让搜索引擎爬虫找得到。ARIA（Accessible Rich Internet Application，无障碍富Internet应用）在你的内容上也不具备视觉效果，但是它通过提供属性来解释被劫持元素的角色和功能，从而提供更好的可访问性。所谓被劫持元素，指的是用来传递信息“这不是元素的默认用法”的元素。我们也将简单介绍Web Workers，它可以使得我们在不阻止UI线程的情况下，使用额外的JavaScript线程来运行密集的JavaScript。第6章是令人振奋的一章。CSS有什么新东西
CSS3提供了一些伟大的新特性。第7章将要介绍的CSS3选择器提供了在页面上突出显示每一个元素的方法，而且不需要添加一个类，也不需要包含媒体查询来启用响应式Web开发。RGBA和HSLA是新的alpha透明度颜色值，它们以及其他的值类型将在第8章讲解。对于设计师和原型设计师来说，第9章和第10章将是本书的重点所在，讲解了CSS3的特性，具体如下：● 多重背景；● 过渡；● 转场；● 3D转场；● 渐变；● background-size；● border-image;● border-radius;● box-shadow;● text-shadow;● opacity;● animation;● columns;● text-overflow。Web字体
Web字体让你能够使用那五六个传统的Web安全字体之外的字体。不同的浏览器有不同的实现，其中包括对iPhone和桌面端的支持不同。尽管所有的智能手机浏览器都支持@font-face，这是一种无衬线字体（Helvetica、Roboto或操作系统的默认字体都是），在针对移动端进行开发时可以考虑这种字体。我不鼓励移动用户下载巨大的字体文件，而是建议大家使用第11章介绍的小图标字体。本书不会大范围介绍Web字体。如果你对桌面端的Web字体很有兴趣，在在线章节资源中有一个链接指向我写的一个教程。这些资源可通过http://www.standardista.com/mobile访问，其中包含了指向外部资源、代码示例的链接以及本书引用的所有链接。特定于移动端的考量
在桌面浏览器中，大多数人使用鼠标和键盘导览一个固定的（stationary）网络，在手机和平板电脑上，我们使用手指来导览网络，会旋转、晃动、触摸和敲击设备，但是我们不会（也不能）单击任何东西。与使用鼠标进行导览的准确性相比，即使用户瘦骨如柴，其手指还是大了很多。由于移动端具有相对较小的屏幕，而且通常用户的注意力持续时间较短，因此就用户界面以及有限的内容存放空间来说，需要有不同的考量。
平板电脑通常是在家通过WiFi或其他无线接入点使用的。手机也可以使用这些相同的接入点，但是通常会通过不一致且受限的共享服务接入Web。它们的屏幕都很小，存放开发者工具栏的空间有限，也没有足够的带宽来下载相当大的JavaScript库和图片。
第11章讲解了响应式Web开发特性。第12章讲解了设计考量。第13章讲解了移动端和触摸屏独特的事件处理程序。第14章讲解了移动端性能、调试和设备限制。为什么选择这本书？
作为Web开发人员，我们一直被束缚在过去。过去12多年以来，我们一直在迎合浏览器。当你没有必要考虑跨浏览器的兼容性，而且无须受限于CSS2时，Web开发将变得令人兴奋。安装有高级浏览器的移动设备实施了前沿的技术。直接使用这些技术就好!
移动端打开了这个令人振奋的新世界。支持HTML5的WebKit在Android平板电脑、iPhone、OpenMoko、BlackBerry手机上均有相应的实现。除了BlackBerry、Android和iOS设备，WebKit还是Bolt、Dolphin、Ozone和Skyfire浏览器的引擎。Firefox、Opera和IE在手机上也四处可见，基于Presto的高级Opera浏览器也安装到了大量的非计算机设备上。Opera和Chrome正在向Blink移植。不久之后，每一个人在手机、电视、汽车甚至是冰箱中都会有一个完全成熟的Web浏览器。屏幕大小
现在，由于Internet Explorer不支持新标准和即将到来的标准，因此在桌面端我们感到力不从心。随着与标准兼容的浏览器的扩展，外加旧版本Internet Explorer的使用率在降低，我们很快就可以拥抱CSS3。在转向移动端时，我们可能会想起过去的CSS2限制。然而，我们现在有了新的问题需要处理：物理层面的限制。不是所有情况都适用同一模式。移动浏览器显然比桌面浏览器要小。
对于某些站点，你可能有一劳永逸的解决方案，但是大多数HMTL文件和CSS文档并不适合所有的浏览器尺寸。
取决于内容和设计的复杂程度，你可能需要为不同的媒介提供不同的HTML和CSS。
有时，你能够临时隐藏一些内容。在其他时候，你可能想提供更小的标题和更小的图片。你可能还想在宽屏幕上放置多列布局，而在手机上放置单列布局。你可能还想根据设备的尺寸来修改外观：例如，为了易读性而在桌面版上呈现三列布局。在移动领域，将这些列进行垂直布局会更行得通。
移动Web设计的宗旨是保持简洁。你只能使用手机提供的那点小屏幕。滚动的情况只适用于较长的文章，而不能在主页面和导览页面中出现。
你可能想要为站点的移动版本提供单独的标记。但这没有必要。除非你创建了一个真实的Web应用，而不是一个简单的网站，否则没有必要这样做。用户目标
通过移动设备接入Internet在过去被认为是只有大忙人才需要的。是的，有些移动浏览器用户访问Internet只是为了迅速查找特定的信息。他们可能会查看在线购物清单、查找一个砂锅的成分，或者是试图找到只需5分钟就可以走到的最好的意大利餐馆。
尽管用户当前可能对食品供应商的公司架构不感兴趣，但是当他们在查找这些信息时，他们很有可能会通过移动设备进行查找。当我们在台式机上执行这样的深入研究时，更多的用户只能通过移动设备访问Internet。
或许你的普通移动用户只是想获得一个地址、电话号码或者一个状态更新，并不想删除、重新组织、编辑或研究iPhone手机上的资料。但是有用户可能会这么做，因为移动设备可能是他唯一的计算机。所以，在确保所有必要信息能被轻易访问的同时，还要确保在必要时，用户能够在手机的屏幕上执行能在宽屏显示器上执行的所有任务。
你可能还会想到可用性。触屏设备使用手指（而非鼠标）作为输入设备。而手指要比鼠标的光标更大。因此，对于触屏设备来说，要操作的目标需要足够大而且相互之间有适当的间距。第13章将讲解触屏设备用户界面的变化。
非表象性的（non-presentational）图片应该从移动设备标记中删除：图片通常是针对桌面端而非移动设备优化的。在移动设备中，当物理资源有限而且网速较慢、带宽较贵时，这些图片将消耗应该为内容保留的相应资源。只有当图片是上下文相关的时，才应该包含内容图片，但是对于用作装饰性的图片，要使用背景图片或将其删除。本书内容
第1章讲解了开发环境的设置，并讨论了书中用到的几个例子。
第2章到第6章讨论了HTML5中的新增内容，还讲解了编写语义标记以兼容所有现代浏览器（包括桌面端和移动端）的最佳实践。我们还讲解了HTML5中新增的语义元素、Web Forms 2.0以及几个HTML5 API和相应的API（比如地理位置）。我们还提及了SVG、Canvas、Web表单、视频、音频、AppCache（应用缓存）和数据库、Web Workers。
第7章到第11章讲解了CSS3中已有和将要有的内容，包括新的颜色类型、阴影、边框图像、圆角和动画等。你将掌握为移动端和桌面端现代浏览器创建精美Web应用所需的所有工具。第11章重点讲解了响应式Web设计的特性。
第12章到第14章关注的是移动平台，包括触摸事件、用户体验式合集、移动性能考量。这些章节涉及的内容可以用来确保站点的性能、用户体验以及Web页面在所有平台上的可靠性。
我们的目标是为移动端开发卓越的网站。为了方便开发，我们应该在桌面端浏览器中开发站点，但是要时刻记得是为移动端设计和开发网站。然后，通过少量的修改，我们的网站看起来应该相当不错，而且能够在几乎所有平台上执行。我们的目标是开发能够在手机上运行的Web应用，而这是通过创建能在所有现代浏览器上运行的Web应用来实现的。本书的惯例 提示这个图标用来强调一个提示、建议或一般说明。
警告这个图标用来表示一个警告或注意事项。代码示例的使用
本书每一章用到的资源可以通过http://www.standardista.com/mobile获取。你可以在这里找到指向外部资源、代码示例的链接以及本书引用的所有连接。
本书旨在帮助读者完成工作。一般而言，你可以在你的程序和文档中使用本书中的代码，而且也没有必要取得我们的许可。但是，如果你要复制的是核心代码，则需要和我们打个招呼。例如，你可以在无须获取我们许可的情况下，在程序中使用本书中的多个代码块。但是，销售或分发O’Reilly图书中的代码光盘则需要取得我们的许可。通过引用本书中的示例代码来回答问题时，不需要事先获得我们的许可。但是，如果你的产品文档中融合了本书中的大量示例代码，则需要取得我们的许可。
在引用本书中的代码示例时，如果能列出本书的属性信息是最好不过。一个属性信息通常包括书名、作者、出版社和ISBN。例如：“Mobile HTML5, by Estelle Weyl (O’Reilly). Copyright 2014 Estelle Weyl, 978-1-449-31141-4.”
在使用书中的代码时，如果不确定是否属于正常使用，或是否超出了我们的许可，请通过permissions@oreilly.com与我们联系。联系方式
如果你想就本书发表评论或有任何疑问，敬请联系出版社：
美国：
O’Reilly Media Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中国：
北京市西城区西直门南大街2号成铭大厦C座807室（100035）
奥莱利技术咨询（北京）有限公司
我们还为本书建立了一个网页，其中包含了勘误表、示例和其他额外的信息。你可以通过如下地址访问该网页：
http://oreil.ly/mobilehtml5_le
关于本书的技术性问题或建议，请发邮件到：
bookquestions@oreilly.com
欢迎登录我们的网站（http://www.oreilly.com），查看更多我们的书籍、课程、会议和最新动态等信息。
Facebook: http://facebook.com/oreilly
Twitter: http://twitter.com/oreillymedia
YouTube: http://www.youtube.com/oreillymedia致谢
感谢Bruce Lawson、Adam Lichtenstein、Jennifer Hanen、Tim Kadlec、Jeff Burtoft、Tomomi Imura和Justin Lowery。
Bruce Lawson与他人合著了第一本HTML5图书——Introducing HTML5（New Riders出版）。他还是HTML5Doctor.com的创始人之一，以及W3C Mobile Web Best Practices Working Group（移动Web最佳实践工作组）的成员。他推广了Opera的开放Web标准，Opera是最古老的一家浏览器厂商，其移动端、桌面端、电视端和嵌入端浏览器在全球有3亿的用户量（参见www.opera.com）。大家可以在Twitter上通过@brucel加他关注，也可以通过www.brucelawson.co.uk获悉他的动态。
Justin Lowery创建了CubeeDoo的界面。他在其公司Cerebral Interacive担任UX架构师，擅长Web和移动应用的设计与开发。他从2001年起就是一名平面设计师了，从2006年起以Web开发人员的身份涉足Web开发领域。他还是一名护理信息师（informatics nurse），这个角色使得他可以将当前的关注点更好地放到健康教育领域中具有革命性的信息技术上。大家可通过@cerebralideas或www.cix.io获悉他的动态。
Adam Lichtenstein是一位前端开发人员以及OOCSS/Sass重度爱好者。他是FormFace的创始人，该站点关注的是HTML5论坛的语义构建和样式化。他目前是Wufoo公司的一名前端开发人员兼设计师，正在写作第一本有关前端开发的图书。当不写代码时，他的主要爱好是思考与编码相关的事情。大家可通过@seethroughtrees或http://seethroughtrees.github.io获悉他的动态。
Jenifer Hanen是一位移动端设计人员、开发人员以及摄影师，让每个人像她那样深深爱上移动端是她的追求。在1996年，Hanen为一个朋友的乐队开发了她的第一个公共网站，从2000年开始承担移动端和Web端的咨询工作，同时还是一位辅助Web设计和艺术史教授。大家可通过@msjen或http://blackphoebe.com/msjen获悉她的动态。
Tomomi Imura是一位开放Web拥护者兼移动端的前端工程师。在移动开发领域未成气候之前，她就活跃于这个领域了。她曾经为Yahoo! Mobile开发过移动Web、平台UI/UX以及框架，还在Palm参加了webOS的开发，之后她加入Nokia，与W3C一起工作，开始布道HTML5。大家可通过@girlie_mac或http://girliemac.com获悉她的动态。
Jeff Burtoft是Microsoft公司的一位HTML5布道者，还是JavaScript/HTML5社区的一位狂热的支持者。Burtoft先生强地支持Web标准，并且喜欢所有的编程语言（只要它们与JavaScript相关）。此外，他还是HTML5 Hacks一书（O’Reilly Media出版）合著者以及html5hacks.com博客的创始人。他与妻子以及三个孩子住在得州南部。大家可通过Twitter账户@boyofgreen加他关注。第1章学习移动HTML5、CSS3和Java Script API之前的准备工作
如果你跟我多少有点类似的话，你肯定已经痛恨旧版IE浏览器很多年了。那些浏览器满是失败。然而，它们在整个生命周期内在任何地方失败的方式是一样的。我们都知道IE6非常糟糕，但是它糟糕的方式是一样的。一旦我们搞清楚了如何填IE6的坑（polyfill），我们就已经把它搞清楚了。
在移动世界，我们同样面临一些问题，不同的是这些问题以一种更新、更多样化且不断变化的方式存在。在不同设备上的不同浏览器版本可能支持很多新的特性，但实现方式可能不同。或者说，它们可能确实支持某个特性，但是这个特性可能并用不了。举个例子，一个现代浏览器可能支持也可能不支持localStorage。支持localStorage的设备可能允许也可能不允许对其写入。即使浏览器允许从localStorage读取数据，但这个读取操作可能非常耗时从而阻碍了性能。并且，即使浏览器通常情况下允许你对其写入，但localStorage本身可能已经达到了存储上限。
我们在这里无法涵盖所有操作系统和设备上所有浏览器的全部非标准情况（quirk）。即使我了解所有的这些非标准情况（而且我也不了解），这些非标准情况可以装满一个大部头，并且在我完成这个大部头之前它就过期了。这本书呢，实际上也过期了。浏览器支持以及规范等周边环境都在不断发生变化。没有办法制作一本最新的书出来，因为到其交付印刷之际——或者甚至在你刚完成一章的时候——周边环境已经变了。虽然某些浏览器、特性、电话以及提到的网站可能已经过时了，但本书带出的最佳实践在未来几年还是有意义的。本书的一个指导原则是：如果你采用最佳实践，并且依照标准编写代码，你的代码将能够在当前及以后所有的设备上运行。
我把针对特性的浏览器支持包含在内了，而且也没有缺少针对浏览器特性的支持，因为所有的浏览器将沿着正确的方向前进正是大家所期望的。今天在浏览器中的那些非标准模式（quirk）明天也许就解决了。
基于以上原因，在使用一个特性时，你不仅确实要做特性检测，而且需要进行测试以确保能够成功地使用这些支持的特性。
本书将使用与设备、操作系统以及浏览器无关的标记并且不使用JavaScript类库。我选择不使用类库仅使用普通JavaScript进行编码以确保你学到真正的代码。通过使用普通JavaScript编码，希望就不会存在一个方法到底属于原生方法还是框架提供的方法这样的困惑了。
但这不意味着你不应该使用类库。恰恰相反！开源类库是弄清楚浏览器不标准情况的最佳选择之一。开源项目拥有成百上千甚至成千上万的贡献者。这些成千上万的贡献者们密切地在大量的设备上进行开发和测试，他们找出那些不标准的情况，报告问题，并且给类库提交修正来处理这些情况或者提供解决方法和腻子脚本。这成千上万双眼睛同时也在报告bug，提醒浏览器厂商注意那些没有遵循标准运行的东西，以便这些bug可以在浏览器后续发布中得以修正。
流行的开源类库和HTML5 JavaScript API腻子脚本是快速发现各种各样的浏览器不标准情况及其解决方案的最佳资源。它们应被视为你的开发工具箱中的一个重要组成部分。即使你不使用它们，也一定要阅读这些源码来学习别人已经发现了的那些移动浏览器的bug。
在你阅读HTML5、CSS3以及相关的JavaScript API时，学习的最佳方法就是编写代码。让我们开始编码吧。1.1 CubeDoo：HTML5移动游戏
我学习HTML5和CSS3的方法是在一个单一的移动浏览器上构建一个Web应用，并将其发挥到极致。我初次涉足CSS3是在2007年iPhone首次上市的周末写的一个结合了Twitter和美国职业棒球大联盟的Web应用，叫作Pickleview。当时，iPhone上的Safari浏览器是市场上最先进的浏览器（也许是除了Opera之外的）。通过只为一个单一的浏览器开发这个应用，我无须担心IE6、IE7或是Firefox 2的问题（Chrome当时还不存在）早在2007年的时候，这就是当时网络的状态。
在2010年，我又做了一遍在一个单一的浏览器上使用最现代的HTML5和CSS3编写代码的练习。我和一些朋友们使用动画、存储、离线能力以及所有在桌面版的Chrome 12中支持而在移动版Safari 3.1中不支持的新特性设计了一个记忆游戏。通过使用一个单一的浏览器以及利用我能够使用的所有新技术，我能够学习编写新的但是因为需要支持陈旧的浏览器而无法在生产中使用的HTML5、CSS3以及JavaScript模块。截至2010年，有的浏览器自2007年以后已经有了很大的进展。其他的（IE——你知道我这里说的就是你）就没什么了。
在2013年，大多数的浏览器支持HTML5和CSS3。作为开发人员，我们正受困于不得不支持旧的桌面浏览器，也就是IE9及其更早的版本。在移动上，我们有我们自己的“IE6”。我们在某种程度上受困于功能型手机和运行Android 2.3的智能手机。但即使是功能型手机浏览器和Android 2.3都支持很多新特性。
要学习编写HTML5、CSS3以及相关的JavaScript API，就要暂时地不去考虑旧的浏览器。我们将一起学习使用这些新技术都能做什么。大多数在现代浏览器中获得了广泛支持的特性，我都已经放到本书的代码示例中了。
CubeeDoo，如图1-1所示，是一个完全使用前端代码编写的记忆游戏。在本书中，我使用的代码示例都将来自于这个游戏以及一个原生iPhone“设置”应用的翻版（如图9-3所示）。该游戏使用HTML5元素构建，其中的一些主题包括使用生成的内容匹配图标。CSS转换、过渡和动画以及渐变、圆角和其他CSS特性都被用于设计游戏的外观和感觉。该游戏也使用SVG、JSON、虽然已过时但却是移动平台支持的webSQL、localStorage、sessionStorage、数据属性（data attribute）、HTML5表单、音频、媒体查询（media query）和数据URI（data URI）。
本书中的代码没有使用任何形式的框架。正如前面提到的，一切都是使用普通的JavaScript、HTML5和CSS手工编写代码的。目标是教给你真正的API，而不是腻子脚本。
在生产中，你可能希望使用腻子脚本，但是要想巧妙地使用这些脚本，你需要理解这些腻子脚本都做了什么。这本书就是要教你这些。
本书涵盖了CSS3、HTML5以及相关的API。重点是在移动的环境下学习这些技术。我们生活在一个移动的世界里，但是并不存在所谓的“移动互联网”。不过都是互联网罢了。但是如果你只聚焦于桌面，你所设计的互联网版本可能无法正常服务于日益增长的仅从移动设备访问互联网的人群。而且，如果你只聚焦于桌面，你将只会对较旧的IE浏览器版本的共同标准感兴趣。图1-1 CubeeDoo记忆游戏截屏
永远不要把一个仅在单一浏览器下正常运行的应用推向生产环境。然而要学习那些新兴技术，忽略掉“旧的”浏览器才可以给自己提供机会去学习去挑战自己，跳出框框进行思考，最终达到巅峰。带上在本书中学到的东西，使用一个单一的浏览器，编写程序直到浏览器能做的极限。不断尝试。你会再一次爱上Web开发的。
你只需要一个浏览器、一个IDE以及一些时间。1.2 开发工具
在开始开发第一移动Web应用之前，你需要使用最好的“吃饭的家伙”来设置你的开发环境。好消息！你已经有这些工具了。
跟随本书学习，你只需要一台装有文本编辑器和浏览器的电脑。你甚至都不需要一部电话，虽然拥有一个移动设备将会很有帮助。1.2.1 文本编辑器
你应该使用一个纯文本编辑器或是一个集成开发环境（IDE）进行开发。IDE软件通常包括文本编辑器、调试器以及其他功能或者插件，例如你完成工作可能需要的FTP。人们都有自己首选的IDE。无论什么，选择适合你的就好。我自己的首选是Sublime Text，但是你可以使用TextMate、DreamWeaver、Eclipses、WebStorm或者无论什么你满意就好。虽然我们只需要一个文本编辑器，但是你会发现使用IDE可以帮助我们组织并简化开发过程。我建议你选择一个IDE并且成为它最好的朋友。IDE是非常强大的工具，它使开发过程变得非常愉悦——甚至接近完美。1.2.2 浏览器
你还需要一个浏览器，我倾向于使用Chrome金丝雀版（Canary）进行开发，它是Google Chrome浏览器的测试版。我倾向于该浏览器是因为它的调试器。所有的现代浏览器都有调试器，但是Chrome的调试器是其中的佼佼者，而且金丝雀版的调试器可以让我详细了解和访问所有新的额外特性和附加功能，甚至是在它们进入浏览器正式发布之前。
如果你没有一台苹果电脑，你就无法轻松地开发原生iPhone、iPad或者iPod touch应用。如果你没有Windows 8，开发正式名称为Metro风格的应用也将很难。别担心！就我们正在学习的内容而言，你只需要一个现代浏览器。操作系统或设备都无关紧要。你可以在Windows、Unix、Android手机和平板设备以及Mac等只要你能说得出名字的其他平台上测试本书的所有示例。
IDE和桌面浏览器将是你进行移动Web开发的主要工具。整个开发过程中，移动应用将在桌面浏览器中预览和调试。有一些特性桌面浏览器将无法仿真，包括移动渲染精度、JavaScript性能、内存和带宽限制以及API的可用性。然而，使用其他工具和通过直接在真实或虚拟的设备上进行测试，这些差异是可以被克服的。
虽然你将在你最喜欢的浏览器上愉快地开发，但你的工具箱里还是应该有多种其他可用的浏览器用于测试。你可能需要使用IE，这样可以更简单地测试Windows Phone环境。Safari或Google Chrome将使你能够测试Android、Bada、Blackberry和iOS。你可能还需要Firefox来测试Gecko设备。为了测试所有运行Presto渲染引擎的设备，目前还需要Opera，但是由于Opera Mobile 14是基于Chromium的，而且最新的Opera和Chrome都使用Blink，所以你开发所需的浏览器需要进行更新以符合开发所处的环境。
如果你还没有这样做的话，如果你使用Mac的话就下载一个Safari浏览器，如果你使用Windows的话就下载一个最新的IE浏览器。同时在设备上下载Chrome、Firefox和Opera，即使你在使用UNIX。你还可以下载Chrome Canary、Aurora、Opera Next以及WebKit当日最新版（nightly builds）来测试这些主流浏览器的下一个版本。这些是在本书编写时流行的桌面浏览器，但环境是在不断地变化的。1.2.3 调试工具
浏览器本身就配备有开发工具。开发者工具（developer tools）是浏览器内置工具，使用户可以方便地审查（inspect）和调试代码。使用该工具，你可以针对实时（live）内容操作文档对象模型（DOM）、编辑和调试JavaScript代码、编辑和调试CSS、分析资源请求情况、审查Web内容和Web应用的性能。
开发者工具一般处于隐藏状态，因为除了开发人员之外的大多数用户不会用到这些浏览器特性。移动浏览器经常在设备浏览器中有一些调试功能。这些有限的调试工具通常可以通过设备的设置界面启用。虽然设备级别的调试可能是可用的，但在桌面电脑上通过一个功能更齐备的工具进行应用调试要更简单一些。1.2.4 桌面式调试器
如果你一直在开发网站的话，不管你做了多长时间，很可能你已经对Firebug、F12、Web Inspector或者DragonFly都比较熟悉了。Firebug是一个Mozilla扩展。F12、Web Inspector和DragonFly分别是IE浏览器、Chrome/Safari和Opera附带的。这些开发者工具都能够让你调试、编辑和监控网站的CSS、HTML、DOM和JavaScript，并使你可以对HTTP请求、本地存储以及内存消耗等方面进行分析。
Firebug可以从getFireBug.com网站获取。Safari的开发者工具可以在Develop菜单下找到，但是需要打开Preferences →Advanced菜单，然后勾选上“Show develop menu in menu bar”才可以使用。在Chrome中，我们可以通过View → Developer → Developer Tools菜单来打开开发者工具。
我们也可以使用Command-Option-I或者Control-快捷键来打开Chrome、Safari、Firebug以及Opera的调试器。F12和Firebug也可以通过键盘的F12打开。这些工具是浏览器上用于调试CSS、JavaScript和HTML的最佳工具。
你可能需要熟悉Web查看器（Inspector）、错误控制台（Error Console）以及用户代理切换器（User Agent Switcher）。这些调试器能够查看Web页面的CSS、HTML、JavaScript、DOM以及文件头。不管你是使用Web Inspector、Firebug、DragonFly、F12、开发者工具，还是使用这些工具的组合，都要了解你的调试工具。你的调试器将成为你的另一个最好的朋友。
很可能你已经有数年使用桌面应用浏览器调试工具的经验，所以我们不会在这里对它们进行深入探讨。然而，即使这些工具你已经使用5年了，你也有可能只是用到了这些工具的一些皮毛而已。我强烈
试读结束[说明：试读内容隐藏了图片]