HTML5敏捷实践.pdf

HTML5敏捷实践.pdf
 

书籍描述

编辑推荐
亚马逊五星畅销图书!
通过 90 个实例向读者介绍了 HTML5 规范集合。
对于初学者,它可以用来作为构建基于浏览器应用的基础。对于中级或者高级开发者,它可以用来快速了解那些还没有接触到的规范。
本书不仅关注前端表现和交互层,而且关注服务器端的连接层。所以本书不仅适合前端开发人员阅读,而且适合服务器后端开发人员阅读,是你成为全栈工程师(Full Stack Developer)必备的一本书。

作者简介
Jesse Cravens 是 Frog 公司的高级工程师。Frog 是一家和世界顶级公司合作,提供设计、工程、服务的公司。他有很丰富的网页应用开发经验,最近关注于单页面网页应用架构、移动互联网和 HTML5 。
之前,他拥有 USAA 的高级开发和技术管理职位。领导一支移动应用开发团队,负责USAA领先的iOS、安卓、黑莓和其他移动网页应用的规划、设计、开发、测试、实施和维护。这些应用在全球有大约八亿用户。
Jesse 拥有美国莱斯大学的艺术学士学位和位于圣东安尼奥的美国德州大学的课程与教学硕士学位。他目前和妻子和两个小孩生活在德克萨斯州奥斯汀。他的个人网站是 jessecravens.com。
Jeff Burtoft 是微软公司的 HTML5 传教士,每天都很高兴地和 HTML5 社区工作在一起。他的博客地址是 HTML5Hacks.com 。并且自己开发了多款流行移动应用。 Jeff Burtoft在网页应用开发社区有超过 10 年的经验。他的工作经历很丰富,做过创业公司的网络管理员和美国国防部的多媒体顾问。Jeff 在位于德克萨斯州圣安东尼奥的财富 500 公司做了超过 5 年的首席前端工程师。Jeff 拥有美国杜肯大学的修辞研究学士学位和位于波多黎各圣胡安的美洲大学的拉丁美洲商业证书。在过去的几年中,Jeff 主要关注于互联网:HTML、JavaScript、CSS,现在关注 HTML5。
Jeff 和他的妻子和三个小孩生活在华盛顿州贝尔维尤。在业余时间,他喜欢开发移动应用和陪小孩玩视频游戏。

目录
第1章 用语义化的方式实现
实例01 使用正确的<doctype>来简化你的网页
实例02 采用常见结构
实例03 使你的HTML5新标签在旧的浏览器里正确渲染
实例04 新定义的<input>标签
实例05 不使用JavaScript实现表单验证
实例06 使用新控件提高表单的易用性
实例07 新的DOM事件
实例08 在标记上添加丰富的上下文数据
实例09 使用自定义数据跟踪用户事件
实例10 使机器人和人类能够像微数据一样访问你的页面
第2章 使用样式
实例11 通过浏览器前缀实现试验期CSS功能
实例12 使用自定义网络字体设计页面
实例13 使用Google网络字体来实现简单的@font—face
实例14 使用CSS3的字体特效美化页面
实例15 不改变透明度来让元素显得透明
实例16 使用media query来实现响应式设计
实例17 使网页应用响应设备的方向变化
实例18 使用伪类实现对DOM的完全控制
实例19 图片聚合和通过图片数据URI内联图片
实例20 通过简单的方式实现渐变效果
实例21 拯救边框,让边框变得有趣
实例22 在同一元素上设置多个背景图片
实例23 使用CSS3变换从传统空间解放页面元素
实例24 使用CSS3转换实现变换动画
实例25 使用变换和转换来实现iOS样式的翻卡效果
实例26 使用Respond.js在IE中模拟media query
实例27 通过viewport<meta>标签来控制移动网页布局
第3章 实践多媒体
实例28 使用HTML5视频直接在应用里嵌入视频
实例29 为视频文件选择合适的编码/解码器
实例30 用视频API定制视频播放控制器
实例31 使用<canvas>标签为HTML5视频添加背景
实例32 在HTML5视频元素上添加字幕
实例33 美化HTML5视频字幕
实例34 使用Cuepoint.js在不支持HTML5的浏览器上实现视频字幕功能
实例35 使用Buzz轻松构建复杂的音频应用
实例36 使用MediaElement.js简化HTML5媒体
第4章 使用Canvas和SVG来做图形
实例37 使用<canvas>标签在HTML5页面上绘图
实例38 在Canvas元素上使用样式
实例39 使用图片文件修饰canvas元素
实例40 使用HTML5<canvas>标签创建高清晰度、支持视网膜屏幕的图形
实例41 使用Canvas图形加速动画
实例42 使用SVG实现“原生”图形
实例43 使用CSS修饰SVG元素
实例44 使用SVG制作动画
实例45 直接在HTML中嵌入SVG
第5章 用户交互
实例46 将网页应用里的所有对象变得可拖放
实例47 使用拖放数据传输对象更新DOM
实例48 在网页应用中拖入/拖出文件
实例49 通过Editable Content将页面的每个元素都变得可编辑
实例50 将网页变为一个WYSIWYG编辑器
实例51 通过HTML5会话历史控制浏览器的历史按钮
第6章 实践客户端数据存储
实例52 在内联URL中嵌入二进制数据
实例53 将数据URI转换为Blob并通过XHR2嵌入到表单数据中
实例54 使用WebStorage API实现用户数据的持久化
实例55 通过YepNope.js和Storage.js模拟LocalStorage
实例56 使用FileSystem API在本地缓存多媒体资源
实例57 使用IndexedDB和FullCalendar.js构建里程碑日历
第7章 实践地理定位
实例58 使用地理位置API在移动网页应用里显示经纬度
实例59 使用Google的反向地理编码API反查用户的位置
实例60 在Google地图上更新用户的当前位置
实例61 使用Geoloqi服务构建地理围栏
实例62 使用Geoloqi实时流服务来广播远程用户的移动
实例63 使用Webshims模拟地理位置API
第8章 WebWorker API
浏览器如何执行JavaScript
实例64 使用BlobBuilder界面创建内联工作线程
实例65 在专有工作线程中执行昂贵的数组操作
实例66 使用定时器将应用的状态传递给工作线程
实例67 在独立Worker中通过像素操作处理图片数据
实例68 使用引用脚本创建Twitter的JSONP请求
实例69 在多个浏览器窗口中同时连接共有Worker
第9章 实践HTML5连接
实例70 使用Kaazing的远程Web Socket服务器为浏览器返回简单的回声消息
实例71 使用Node.js和ws模块构建WebSocket服务器
实例72 使用Web Socket、Pusher API和PHP构建捐赠进度指示器
实例73 为jWebSocket创建插件
实例74 通过Server—Sent Events向浏览器推送通知
实例75 配置Amazon S3支持跨域共享网络字体
实例76 使用Robodeck控制HTML5幻灯片
实例77 查看Socket.IO连接确定它是原生的还是模拟的
实例78 使用node—spdy构建简单的SPDY服务器
第10章 使用Node.js实现高级HTML5应用
HTML5应用设计的考虑
实例79 在浏览器中显示“Hello Html5”
实例80 通过request对象检测用户代理(UA)字符串
实例81 使用Node.js的response对象向客户端返回为设备定制的数据
实例82 使用Node.js包管理器添加一个Web应用开发框架作为第三方模块
实例83 使用Express应用生成器创建基础应用
实例84 定制模块处理路由
实例85 配置Express启用视图引擎
实例86 启用Jade布局使应用视图遵守DRY
实例87 使用Jade视图部件在视图中创建简单的导航条
实例88 使用Jade Mixin在视图中填充数据
实例89 使用Stylus书写富有表现力、动态、容错的CSS
实例90 使用HTML5样板作为默认初始模板
成为一个HTML5高手
索引

序言
HTML5是一个关于互联网技术的包罗万象的新词。类似于以前的Ajax和Web2.0,这个词在不同的上下文中使用会有不同的含义。HTML5的字面含义是表示第5版本的HTML标记语言,但是也可以用来描述下一代网络技术规范集合,包括CSS3、SVG和JavaScript API。
为了在这个背景下理解HTML5,首先需要理解的是HTML5并不是一项添加到网页应用上的简单技术。在HTML5技术集合中有超过30项不同的规范,各项规范的成熟度不同。此外,主要浏览器厂商对各个规范的采用和实施方式也不同。
网页应用开发者会根据业务需求选择合适的HTML5功能,以提高应用的性能。最终在流行网页应用中实际使用的很可能只是其中很少的几项规范。
批评家经常说,必须要等到HTML5被百分之百支持后,才能在项目中使用。这明显是不正确的。很多HTML5规范已经非常成熟,并且在流行的浏览器中已经被完全实施了。但是有些规范还处于开发早期,或者主流浏览器厂商对其不太支持。了解所使用的规范类型很重要。虽然研究这些规范会有帮助,但是唯一正确的学习方法是在所有的浏览器里测试你的应用。
对于那些新的或者还没被很好支持的规范,有一些聪明的开发者已经开放了免费且开源的工具为老式浏览器提供shim和polyfill。正如Remy Sharp定义的那样:“polyfill或者polyfiller是可以模拟浏览器的某些原生功能的一段代码(或者一个插件),并且可以提供一致的开发接口。”据我看来,最好的polyfill是不需要开发者知道某一功能是否是由浏览器原生提供的,它会在后台提供必要的支持,对于用户和开发者都是透明的。在大部分情况下,每项HTML5规范都有一个或者多个可以使用的、互相竞争的polyfill。你会在本书中看到多种网络上流行的高效的polyfill。
为什么学习HTML5
初学者也许会有这样的疑问:“为什么需要关心HTML5?”不幸的是,这个问题没有一个简单的答案。即使是一些资深的开发者也会根据他们熟悉的功能给出不同的答案。
但是总体而言,有一些功能集合是大部分开发者都认可的流行的功能。在HTML5出现之前,网页应用从来都没被当做原生桌面应用或者移动应用的竞争者。自从HTML5出现以来,网页应用才被认为是一项易于部署的、跨平台的应用平台方案。然而,由于缺少一些重要业务功能,如性能、安全和图形,HTML5受到了束缚。如果流行的浏览器能够成为一个成熟的应用平台,开发者就可以不再针对不同平台开发原生应用了。
通过XMLHttpRequest对象、JSON传输格式,以及浏览器上各种JavaScript类库的爆发(很多类库都提供了ployfill支持),Ajax技术革命提供了异步的、后台执行的服务器端更新,将网页应用世界带到了正确的道路上。然而,HTML5的目标是在流行的浏览器中为复杂应用开发提供原生的功能支持。为了实现这个目标,很多功能还需要改进,例如维护浏览器历史、异步交互过程中的书签、跨域通信、本地存储、离线支持、丰富的图形支持、为了改进速度和效率的新连接层协议等。
HTML5的实现
作为一个渴望使用本书中介绍的特性实现新功能的开发者,有必要理解这一点:很多HTML5规范还处于试验和开发期。写作本书的一大挑战就是要与不断进化的规范保持同步。
接下来的几个话题对于学习试验期的浏览器规范很重要。
浏览器前缀
为了让浏览器厂商能够实施试验期的特性(通常在规范完成之前实施),浏览器厂商需要在这个特性标识之前添加“前缀”,表示这只是针对特定浏览器的功能。一个很好的例子就是requestAnimationFrame的实施方式,它是在浏览器中为页面添加动画效果的JavaScript方法。最初实施这一功能的浏览器前缀如下:
 requestAnimationFrame
 webkitRequestAnimationFrame
 mozRequestAnimationFrame
 oRequestAnimationFrame
 msRequestAnimationFrame
浏览器前缀在CSS中很常见。推荐你阅读第2章的引言,了解浏览器前缀是如何在CSS中实现的。
使用HTML5检查工具验证一致性
HTML验证器是一组通过DTD(Document Type Definition)定义的网页标准解析网页代码的软件。如果你还不熟悉DTD,可以将它想象为一个处理HTML标记在浏览器中呈现方式的元数据。
HTML验证器根据选择的标准返回找到的一系列错误。我们现在可以使用HTML5 DTD来验证。
HTML5 DTD比最新的XHTML定义更宽松。W3C的新验证器显示了其中的差别。然而,验证器不应该针对编码风格问题抛出异常,它应该关注于根据某个规范验证HTML标记。
HTML5 Lint
这意味着开发者还需要规范编码风格的工具。需要检查的常见编码风格问题包括代码的缩进是否一致、标签是否小写和关闭标签是否被忽略。
在本书写作的时候,我们推荐使用HTML5 Lint tool来检查。
HTML5实施的状态和功能支持情况
在博客中,我们会持续对本书提供的例子进行尽可能频繁的更新。
网络上还有很多不错的资源可以参考。这些资源提供了HTML5实施状态和特定浏览器对某些HTML5特性支持的状态。

为什么书名为HTML5 Hacks
Hacker(黑客)在媒体中一般带有消极的含义,但是它已经逐渐被用来描述技术人员了。维基百科提供了黑客 这个词的如下三个不同的定义。
1.在信息安全(Information Security)领域,“黑客”指研究智取计算机安全系统的人员。
2.在业余计算机方面,“黑客”指研究修改计算机产品的业余爱好者。
3.在程序员亚文化方面,“黑客”指对软件开发提倡“反独裁”的人,如今和开源软件运动联系起来。
我们使用的是其中的第二个定义。这里指的就是本身的含义,类似“敏捷”或者“秘诀”的含义。这些快速的小实例都验证了一个API、功能或技术,不仅可以用来培训软件开发团队,也可以用来指引项目的开发技术方向。
HACK#15
谁应该阅读本书
本书通过90个实例向读者介绍了HTML5规范集合。初学者可以将本书作为构建基于浏览器的应用的基础。中级或者高级开发者可以通过本书来快速了解那些还没有接触到的规范。
总而言之,本书的作用取决于你如何使用它。
HACK#15
本书内容
本书共分10章,内容如下。
第1章,用语义化的方式实现
介绍新的关键的HTML5标记元素和属性。
第2章,使用样式
介绍CSS3的视觉表达和行为。
第3章,实践多媒体
讨论HTML5音频和视频标签。
第4章,使用Canvas和SVG来做图形
介绍如何使用Canvas和SVG。
第5章,用户交互
介绍HTML5拖放、可编辑元素和其他交互功能。
第6章,实践客户端数据存储
讨论存储和HTML5应用缓存。
第7章,实践地理定位
讨论如何使用地理定位功能。
第8章,WebWorker API
介绍如何利用WebWorker API。
第9章,实践HTML5连接
讨论web socket、跨文档消息、服务器端实践等。
第10章,使用Node.js实现高级HTML5应用
讨论如何使用Node.js构建高级HTML5应用。
HACK#15
本书中使用的约定
本书中使用的印刷约定:
斜体(Italic)
表示新名词、URL、Email地址、文件名、文件扩展名、路径名称、文件夹和Unix工具。
等宽字体(Constant width)
表示命令、选项、开关、变量、属性、关键词、函数、类型、类、命名空间、方法、模块、类属性、参数、值、对象、事件、事件处理器、XML标记、HTML标记、宏、文件内容或者命令的输出。
等宽加粗字体(Constant width bold)
表示应该由用户输入的命令或者其他文本。
等宽加斜字体(Constant width italic)
表示应该被替换为用户提供的值的文本。
此样式表示一个小技巧、一个建议或一般性注释、警告。
HACK#15
使用示例代码
这本书会帮你快速完成工作。一般情况下,你可以在自己的程序或者文档中使用本书提供的代码。你不需要联系我们获取许可,除非你用这些代码生成了有显著价值的产品。例如,使用本书提供的几组代码写自己的程序不需要获得许可;出售或者分发包含O’Reilly书籍代码的CD-ROM需要获得许可;引用书中的示例代码回答问题不需要获得许可;在你的产品文档中明显使用本书的示例代码需要获得许可。
我们希望你标注版权归属,但这不是必需的。版权归属一般由标题、作者、出版商和ISBN组成。例如:“由Jesse Cravens和Jeff Burtoft所著的HTML5 Hacks (O’Reilly). Copyright © 2013 Jesse Cravens Jeff Burtoft,978-1-449-33499-4.”

HACK#15
联系我们
关于本书的建议和疑问,可以与下面的出版社联系。
美国:
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中国:
北京市西城区西直门南大街2号成铭大厦C座807室(100035)
奥莱利技术咨询(北京)有限公司
我们为本书提供了一个网页,列出了勘误表、例子和其他额外信息。

HACK#15
Safari® 在线书店
Safari在线书店是一个能及时响应读者需求并提供专业内容的数字图书馆,它以图书和视频的形式提供在技术和商业领域领先的作者的作品。
很多专业技术人员、软件开发者、网页设计师、商业和创新人才将 Safari 在线书店作为他们主要的研究工具,利用它解决问题、学习和进行认证训练。
Safari在线书店为组织、政府机构或者个人提供一系列产品组合和定价方案。订阅者可以访问数千本书籍、培训视频和正式出版前的手稿,这些内容由众多出版商共同提供,其中包含了O’Reilly Media、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley & Sons、Syngress、Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones & Bartlett、Course Technology、anddzens 等发行商的可搜索的数据库。更多关于 Safari 在线书店的信息请在线访问我们的网站。
致谢
我们首先要对两位作者的家庭表示感谢。写作本书占用了很多夜晚和周末的时间,因此他们牺牲了很多陪伴妻子和孩子的时间。
Jeff要感谢他的妻子Carla,她鼓励他写作本书,并且允许他们的生活在写作期间被打乱。他也要感谢他的孩子们,Chloe、Maddy和Jude为他的创作提供了灵感,并对他所做的一切感到自豪。Jeff 还要感谢他的合作者和共同作者Jesse,他们一起将这本书从梦想变为现实。
Jesse要感谢他的妻子Amy的支持,使他可以在这本书上花费很多时间。还要感谢他的孩子Carter和Lindley,他们理解自己的父亲需要在周末和晚上工作。感谢他的哥哥和嫂子为他的写作提供了一个安静的环境,并给予鼓励。感谢父母的支持和鼓励。最后,他要感谢本书的共同作者Jeff,他们共同克服困难,完成了这个项目。
特邀嘉宾
John Dyer是达拉斯神学院通信和教育技术执行总监。他拥有十几年的网络开发经验和技术作家经验。他喜欢为开发者提供简化复杂任务的工具。他和妻子Amber、两个可爱的孩子一起生活在达拉斯。
Alex Sirota是FoxyTunes的联合创始人,之前担任这家公司的CTO和产品主管。现在该公司被雅虎收购了。Alex在这家公司做了4年多的构建多媒体和娱乐网络产品的工作。之前,他是Elbrus Ltd.的联合创始人。Elbrus Ltd.是一家为飞利浦医疗系统、IBM等公司提供软件方案的公司。在去Elbrus之前,他是以色列国防部计算设备部门的主管。共同出版过关于Mozilla和网络技术的书籍(由Wiley公司出版)。他拥有以色列工程技术学院的计算机科学学士学位。
Raymond Camden是Adobe公司的高级开发者传教士。他关注于网页标准、移动应用开发和ColdFusion。他著有很多书籍,经常参加各种技术会议或者用户组。
Phil Leggetter是一个实时网络软件和技术传教士。他拥有十多年的实时网络技术的开发经验,他关注如何使用这些技术构建新一代实时网络应用。
Alexander Schulze是jWebSocket项目的创始人,也是一位IT咨询师和培训师。他在很多会议上做过演讲,著有很多书籍和文章。

文摘
版权页:



插图:



初始化和准备文件系统
演示代码做的第一件事是确定能否使用文件系统API(FielSystem API)功能。到目前为止,这些API都以浏览器供应商前缀开始(请看第1章)。在将来,这些API将会统一化,但是现在我们只考虑针对Chrome的支持。注意代码中不同浏览器供应商的前缀,例如下边代码例子:
function init(){
if(!window.webkitStorageInfo) return;
}
也许你会有疑问,init()函数是通过body/onload调用的。我们马上就会看到整个模板。初始化以检测当前webkitStorageInfo作为开始。因为这个演示只是为了展示FileSystem API,我们可以在不支持的浏览器上直接结束。
临时文件系统和持久化文件系统的FileSystem API不同。它们的名字提示开发者应该使用哪一个。在这个应用里,我们使用持久化文件系统,这样我们可以存储资源直到需要更新时。为了使用持久化文件系统,需要获得用户的许可。这通过一个JavaScript函数来实现,但是实际上提示是由浏览器处理的,很像地理定位的提示。以下代码演示了如何获取存储权限,以及当它被允许(或者禁止)之后实现了什么。

内容简介
本书共分10章,包括了HTML5中的语义化、新的样式、多媒体支持、新的图形实现方式、更易用交互功能、浏览器客户端存储、地理定位、Web Worker API、Node.js 服务器端开发等方面。贯穿全书,作者都在解释HTML5规范的发展方向和目前规范的成因,这让读者更容易理解和正确应用这些规范。作者还向读者提供了很多非常实用的开发思想,例如分而治之、前后兼容等。本书提供了90个实用的例子,为开发者遇到的常见实际问题提供了比较优雅的解决方案。全书内容源于两位资深工程师的工作经验,贴近开发者的实际需要。
本书可以作为HTML5规范的学习教材,也可以作为前端工程师和服务器端工程师开发HTML5应用的必备工具书。

购买书籍

当当网购书 京东购书 卓越购书

PDF电子书下载地址

相关书籍

搜索更多