《HTML5移动开发》——导读

简介:


image

本书全面讲解了使用HTML5和CSS3开发优秀网站和Web应用的技术。

本书总共分为14章,其内容包含移动开发环境的设置,HTML5的元素、语法和语义,使用JavaScript来构建表单,探究应用于图像、音视频的HTML5媒体API以及AppCache、localStorage和其他API,CSS3选择器和语法以及更为深入的特性,响应式Web设计的特性,以及针对所有平台进行性能、用户体验和可靠性的设计。

本书适合具有一定经验的Web前端开发人员阅读。
O’Reilly Media通过图书、杂志、在线服务、调查研究和会议等方式传播创新知识。自1978年开始,O’Reilly一直都是前沿发展的见证者和推动者。超级极客们正在开创着未来,而我们关注真正重要的技术趋势——通过放大那些“细微的信号”来刺激社会对新科技的应用。作为技术社区中活跃的参与者,O’Reilly的发展充满了对创新的倡导、创造和发扬光大。

O’Reilly为软件开发人员带来革命性的“动物书”;创建第一个商业网站(GNN);组织了影响深远的开放源代码峰会,以至于开源软件运动以此命名;创立了Make杂志,从而成为DIY革命的主要先锋;公司一如既往地通过多种形式缔结信息与人的纽带。O’Reilly的会议和峰会集聚了众多超级极客和高瞻远瞩的商业领袖,共同描绘出开创新产业的革命性思想。作为技术人士获取信息的选择,O’Reilly现在还将先锋专家的知识传递给普通的计算机用户。无论是通过书籍出版,在线服务或者面授课程,每一项O’Reilly的产品都反映了公司不可动摇的理念——信息是激发创新的力量。

业界评论

“O’Reilly Radar博客有口皆碑。”

      ——Wired

“O’Reilly凭借一系列(真希望当初我也想到了)非凡想法建立了数百万美元的业务。”

      ——Business 2.0

“O’Reilly Conference是聚集关键思想领袖的绝对典范。”

      ——CRN

“一本O’Reilly的书就代表一个有用、有前途、需要学习的主题。”

      ——Irish Times

“Tim是位特立独行的商人,他不光放眼于最长远、最广阔的视野并且切实地按照Yogi Berra的建议去做了:‘如果你在路上遇到岔路口,走小路(岔路)。’回顾过去Tim似乎每一次都选择了小路,而且有几次都是一闪即逝的机会,尽管大路也不错。”

      ——Linux Journal
我们将要学习如何开发移动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[1]和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的应用,你可以绕过应用商店的审批[2]流程[3],无须向其支付年费和销售费用,也不走它的销售市场,而是通过你的网站或者其他销售渠道直接将应用销售给你的消费者群体。如果你的应用是通过应用商店销售的话,则从成千上万的应用中脱颖而出的难度很大。而且,与本地应用相比,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 <video>元素,这将在第5章讲解。

勉励语(或者说将旧的Internet Explorer抛到脑后)
随着与标准兼容且具有前瞻性思维的浏览器的扩散(手持设备为其扩散提供了助力),我们现在终于有机会将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[4]已经筹划了多年,自从2004年起就开始发力,当时它的名字还是Web Application 1.0。尽管还没有最终确定,但是其中有些部分已经相当完备,而且得到了现代浏览器的支持(通常情况下是完全支持)。现代浏览器(又称为A级浏览器)包括Safari、Chrome、Internet Explorer 10+、Firefox和Opera。IE8以及更早的版本则不在此列。IE9部分支持HTML5,但它是一款抑制了Web发展的浏览器。尽管并非所有的浏览器都支持HTML5,但是所有的WebKit/Blink浏览器、Opera Mobile[5]、Firefox OS和新款的Windows手机都支持HTML5。现在是开始使用HTML5的最后时间了。

HTML5是一个描述了新的Web API标准的总称,其中有些标准是HTML5规范中的(比如拖放),有些则不是(比如地理位置)。

借助于HTML5和相关的API,我们不再局限于本地应用的开发。鉴于HTML5和相关API的规范太长,本书不会讲解所有的图形,但是会涵盖一些你今天可以拿来使用的特性,比如下面要讲解的主题。

语义分组标记

HTML5提供了一些新的标签,用于对标记语言中的标签(tag)或区段(section)进行逻辑分组。在定义你的网站架构时,从语义角度进行分组,而不是使用非语义的

元素来定义页眉、页脚、导航等内容,会对搜索引擎更加友好。第3章将讲解新的分组元素。

Web表单

Web上有数百万的表单,而且每个表单都有大量的脚本来验证电子邮件、创建弹出式日历,从而确保在提交之前表单上填充了必要的元素,并在表单元素接收到焦点时清除占位符文本。借助于HTML5,我们不再需要使用JavaScript验证表单。在HTML5中,表单元素已经对定义数据类型的新特性和方法进行了更新。

第4章将讲解一些修改后的表单元素,学习如何创建本地滑动条、占位符文本和日期选择器以及验证邮件地址,从而确保填充了所有的必填字段,以及能够基于输入类型来显示自定义的键盘——这一切都不需要JavaScript。

SVG和Canvas

借助于HTML5,图片再也没有必要非得嵌入在对象中了。HTML5添加了两个本地HTML5元素<svg>和<canvas>,它们使用CSS进行了增强,而且可以通过DOM进行访问。通过添加这两个元素中的任何一个,浏览器将在你可以采用程序方式进行绘制的地方提供一个空白的画布。第5章将讲解<svg>和<canvas>。

视频和音频

到目前为止,所有的浏览器视频和音频都需要插件。通过使用HTML5,我们可以对视频和音频提供本地的浏览器支持。而且视频和音频都可以通过脚本来处理。HTML5浏览器原生地支持webM和mp4格式。借助于DOM,你可以控制视频和音频,比如静音、快进和停止。借助于CSS,你可以对播放器进行样式化处理。尽管iOS设备从来不支持Flash和Silverlight,但是所有的移动浏览器都支持HTML5视频和音频。第5章将讲解<video>和<audio>。

地理位置API

地理位置并不是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应用来实现的。

相关文章
|
移动开发 开发者 HTML5
Facebook CTO:今年重点关注HTML5和移动平台
【Csdn.net编译】导读:本文根据Techcrunch.com编辑MG Siegler与Facebook技术总监Bret Taylor的对话内容编译整理完成。以下是文章的内容: 昨天,在旧金山的社交网络应用大会上,我有机会和Facebook技术总监Bret Taylor一起坐下来。
812 0
|
移动开发 HTML5 开发者
《HTML5移动应用开发入门经典》—— 2.4 HTML5中的HTML语法变化
本节书摘来异步社区《HTML5移动应用开发入门经典》一书中的第1章,第1.1节,作者:【美】Jennifer Kyrnin,更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.4 HTML5中的HTML语法变化 HTML5移动应用开发入门经典 HTML5与HTML 4之间的语法变动并不大。
1736 0