今天,HTML5在Web标准之争中已经胜出并被大多数浏览器所支持。体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web开发和设计人员的当务之急。
《HTML5程序设计(第2版)》由旧金山HTML5用户组创建人联合另外2位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用WebSocket、Geolocation、Web Storage、Canvas、SVG及音频/视频等前所未有的新特性构建最流行、最强大的Web应用,并以大量的示例涵盖全部HTML5 API。
第2版进行了全面的修订,新增了针对HTML5视觉效果的SVG和针对用户体验的拖放这两部分内容,将助读者的Web设计和开发更上一层楼。
前 言
HTML5是全新的。事实上,它甚至还没有完全成熟。如果你听一些“坏脾气”专家的介绍,他们会告诉你HTML5在未来10年甚至更久的时间里都不会完全成熟!
那么,为什么会有人认为现在是时候编写一本讨论HTML5编程的书呢?原因很简单。对于希望自己的Web应用程序能够卓而不群的人,HTML5正是众望所归。本书作者致力于研究开发和讲授HTML5技术已有两年多,现在可以肯定地说,在实际Web应用中新标准的采纳程度正在以令人目眩的速度不断加快。即使在编写本书的过程中,我们都被迫不断更新书中的浏览器支持表格,重新评估哪些技术又具备了使用条件。
面对自己正在使用的浏览器,大多数用户并不真正了解其具备的功能有多强大。当然,他们在浏览器自动更新后可能会发现一些细微的界面改变。但他们可能不知道,新版本的浏览器刚刚引入了可自由绘图的canvas、实时网络通信或其他一些潜在的功能升级。
本书的目标是帮助开发者释放HTML5的潜力。
本书读者对象
本书针对熟悉JavaScript编程且有经验的Web应用程序开发者。也就是说,本书将不涉及Web开发的基础知识。如果想了解Web编程的基础知识,目前的资源已经够多了。如果读者遇到了下面的情况,那么本书可以为你提供有用的见解和信息,这些见解和信息可能正是你在努力寻找的。
你有时会发现自己在想:“如果我的浏览器可以……”
你发现自己通过页面的源代码和开发工具来分析一个令人印象深刻的网站。
你喜欢查看最新浏览器的版本发布信息,了解其更新了什么功能。
你在寻找优化或简化应用程序的方法。
你想针对使用最新浏览器的用户定制网站,以便尽可能提供最佳用户体验。
如果上述任何一项跟你的情况吻合,那么这本书可能就很适合你。
虽然我们在适当情况下特意指出了浏览器支持的局限性,但目的并非要给出一个兼容旧浏览器且可无缝运行的解决方案。经验表明,浏览器更新换代的速度一日千里,如果要获取浏览器兼容解决方案方面的相关信息,本书不是最好的渠道。相反,我们专注于HTML5规范及其使用方法。兼容的解决方案可以在因特网上找到,而随着时间的推移,这些解决方案也会渐渐被人遗忘。
本书内容
本书的13章内容涵盖了从HTML5 API中挑选出来的适用面广、功能强大的API。在某些情况下,为了更好地演示程序,我们需要用到前面章节已经介绍过的功能。
第1章“HTML5概述”,从HTML版本的发展历程说起,介绍了HTML规范过去和现在的版本情况,然后介绍了新的高级语义标签,以及一些根本性的改进,同时还分析了HTML5背后的设计理念。了解这些对读者是有益的。
第2章“Canvas API”、第3章“SVG”和第4章“音频和视频”,讨论了新的可视化元素和媒体元素。在这三章中,集中讨论如何在无插件和无服务器交互的情况下优化用户界面。
第5章“Geolocation API”介绍的是一个全新的功能。在此之前,它很难通过模拟方式实现,它赋予应用程序确定用户当前位置的能力,并可以用来定制用户体验。这里对隐私的保护也很重要,所以我们会介绍隐私保护的相关内容。
第6章“Communication API”和第7章“WebSockets API”展示了HTML5提供的日益强大的通信能力。有了这两个API,Web应用不仅可以同其他网站进行通信,而且还能以最简单的代码和最小的网络开销进行实时数据流的传递。这两章中的技术将有助于开发人员简化目前网络上部署的过于复杂的架构。
第8章“Forms API”,参照这章介绍的内容,开发人员通过细小的调整即可增加桌面Web应用程序和移动Web应用程序的可用性。利用这一章介绍的其他新特性,则可以检测大多数常见场景中的页面输入错误。第9章详细介绍了新的拖放API的功能,并展示了如何使用它们。
第10章“Web Workers API”、第11章“Web Storage API”和第12章“构建离线Web应用”,解决了应用程序的内部数据管道问题。在这三章中,开发人员会学到如何优化现有系统来获得更好的性能和更好的数据管理功能。
最后,第13章“HTML5未来展望”讨论了一些可能会在HTML5中陆续出现的功能,这些功能可能让大家垂涎已久了。
示例代码和配套网站
本书中的示例代码都可从Apress网站的Source Code部分找到。访问www.apress.com,单击Source Code,然后查找这本书的标题即可。读者可以从本书主页上下载源代码。此外,我们还建立了一个配套网站,地址为www.prohtml5.com,读者也可以在此下载示例代码和一些实用附加功能源码 。
联系作者
感谢购买此书,我们希望你喜欢它,并把它当做一个宝贵的资源。尽管已经尽了最大努力,但我们知道一时疏忽就可能引发错误,在此,我们为可能的疏忽表示歉意。我们欢迎你对此书的内容和源代码发表意见和评论。你可以发送邮件至prohtml5@gmail.com来与我们取得联系。
Peter Lubbers,Kaazing技术交流资深总监,旧金山HTML5用户组创建人。作为HTML5和WebSocket的狂热爱好者,Peter经常在国际大会上发言,还在全球范围内开展HTML5的技术培训。在加盟Kaazing前,Peter在Oracle担任了近十年的资深信息架构师,获得过两项软件专利。
第1章 HTML5概述
1.1 HTML5发展史
1.2 关于2022年的那个神话
1.3 谁在开发HTML5
1.4 新的认识
1.4.1 兼容性和存在即合理
1.4.2 效率和用户优先
1.4.3 化繁为简
1.4.4 通用访问
1.5 无插件范式
1.6 HTML5的新功能
1.6.1 新的DOCTYPE和字符集
1.6.2 新元素和旧元素
1.6.3 语义化标记
1.6.4 使用Selectors API简化选取操作
1.6.5 JavaScript日志和调试
1.6.6 window.JSON
1.6.7 DOM Level
1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎
1.7 小结
第2章 Canvas API
2.1 HTML5 Canvas概述
2.1.1 历史
2.1.2 canvas是什么
2.1.3 canvas坐标
2.1.4 什么情况下不用canvas
2.1.5 替代内容
2.1.6 CSS和canvas
2.1.7 浏览器对HTML5 Canvas的支持情况
2.2 使用HTML5 Canvas
2.2.1 检测浏览器支持情况
2.2.2 在页面中加入canvas
2.2.3 变换
2.2.4 路径
2.2.5 描边样式
2.2.6 填充样式
2.2.7 填充矩形区域
2.2.8 绘制曲线
2.2.9 在canvas中插入图片
2.2.10 渐变
2.2.11 背景图
2.2.12 缩放canvas对象
2.2.13 Canvas变换
2.2.14 Canvas文本
2.2.15 应用阴影
2.2.16 像素数据
2.2.17 Canvas的安全机制
2.3 使用HTML5 Canvas创建应用
2.3.1 进阶功能之全页玻璃窗
2.3.2 进阶功能之为Canvas动画计时
2.4 小结
第3章 SVG
3.1 SVG概述
3.1.1 历史
3.1.2 理解SVG
3.1.3 可缩放图形
3.1.4 使用SVG创建2D图形
3.1.5 在页面中添加SVG
3.1.6 简单的形状
3.1.7 变换SVG元素
3.1.8 复用内容
3.1.9 图案和渐变
3.1.10 SVG路径
3.1.11 使用SVG文本
3.1.12 组合场景
3.2 使用SVG创建交互式应用
3.2.1 添加树
3.2.2 添加updateTrees函数
3.2.3 添加removeTree函数
3.2.4 添加CSS样式
3.2.5 最终代码
3.3 小结
第4章 音频和视频
4.1 HTML5 Audio和Video概述
4.1.1 视频容器
4.1.2 音频和视频编解码器
4.1.3 HTML5 Audio和Video的限制
4.1.4 audio元素和video元素的浏览器支持情况
4.2 使用HTML5 Audio和Video
4.2.1 浏览器支持性检测
4.2.2 可访问性
4.2.3 理解媒体元素
4.2.4 使用audio元素
4.2.5 使用video元素
4.2.6 进阶功能
4.3 小结
第5章 Geolocation API
5.1 位置信息
5.1.1 纬度和经度坐标
5.1.2 位置信息从何而来
5.1.3 IP地址地理定位数据
5.1.4 GPS地理定位数据
5.1.5 Wi-Fi地理定位数据
5.1.6 手机地理定位数据
5.1.7 用户自定义的地理定位数据
5.2 HTML5 Geolocation的浏览器支持情况
5.3 隐私
5.3.1 触发隐私保护机制
5.3.2 处理位置信息
5.4 使用HTML5 Geolocation
5.4.1 浏览器支持性检查
5.4.2 位置请求
5.5 使用HTML5 Geolocation构建应用
5.5.1 编写HTML显示代码
5.5.2 处理Geolocation数据
5.5.3 最终代码
5.6 进阶功能
5.6.1 现在的状态是什么
5.6.2 在Goolge Map上显示“我在这里”
5.7 小结
第6章 Communication API
6.1 跨文档消息通信
6.1.1 理解源安全
6.1.2 跨文档消息通信的浏览器支持情况
6.1.3 使用postMessage API
6.1.4 使用postMessage API创建应用
6.2 XMLHttpRequest Level
6.2.1 跨源XMLHttpRequest
6.2.2 进度事件
6.2.3 HTML5 XMLHttpRequestLevel
6.2.4 使用XMLHttpRequest API
6.2.5 创建XMLHttpRequest应用
6.3 进阶功能
6.3.1 结构化的数据
6.3.2 Framebusting
6.4 小结
第7章 WebSockets API
7.1 WebSockets概述
7.1.1 实时和HTTP
7.1.2 解读WebSockets
7.2 编写简单的Echo WebSocket服务器
7.3 使用HTML5 WebSockets
7.3.1 浏览器支持情况检测
7.3.2 API的基本用法
7.4 创建HTML5 WebSockets应用程序
7.4.1 编写HTML文件
7.4.2 添加WebSocket代码
7.4.3 添加Geolocation代码
7.4.4 合并所有内容
7.4.5 最终代码
7.5 小结
第8章 Forms API
8.1 HTML5 Forms概述
8.1.1 HTML Forms与XForms
8.1.2 功能性表单
8.1.3 HTML5 Forms的浏览器支持情况
8.1.4 输入型控件目录
8.2 使用HTML5 Forms
8.2.1 新的表单特性和函数
8.2.2 表单验证
8.2.3 验证反馈
8.3 构建HTML5 Forms应用
8.4 小结
第9章 拖放
9.1 Web拖放发展史
9.2 HTML5拖放概述
9.2.1 蓝图
9.2.2 需要记住的事件
9.2.3 设置元素可拖动
9.2.4 传输和控制
9.3 构建拖放应用
9.4 拖放文件
9.5 进阶功能
9.6 小结
第10章 Web Workers
10.1 Web Workers的浏览器支持情况
10.2 使用Web Workers
10.2.1 浏览器支持性检查
10.2.2 创建Web Workers
10.2.3 多个JavaScript文件的加载与执行
10.2.4 与HTML5 Web
10.3 编写主页
10.3.1 处理错误
10.3.2 停止Web Workers
10.3.3 Web Workers的嵌套使用
10.3.4 使用定时器
10.3.5 示例代码
10.4 构建Web Workers应用
10.4.1 编写blur.js辅助脚本
10.4.2 编写blur.html应用页面
10.4.3 编写blurWorker.js
10.4.4 与Web Worker通信
10.4.5 运行程序
10.4.6 示例代码
10.5 小结
第11章 Web Storage
11.1 HTML5 Web
11.2 Web Storage的浏览器支持情况
11.3 使用Web Storage
11.3.1 检查浏览器的支持性
11.3.2 设置和获取数据
11.3.3 封堵数据泄漏
11.3.4 localStorage与sessionStorage
11.3.5 Web Storage
11.3.6 更新Web Storage后的通信
11.3.7 探索Web Storage
11.4 构建Web Storage应用
11.5 浏览器数据库存储展望
11.5.1 Web SQL
11.5.2 索引数据库API
11.6 进阶功能
11.6.1 JSON对象的存储
11.6.2 共享窗口
11.7 小结
第12章 构建离线Web应用
12.1 HTML5离线Web应用概述
12.2 使用HTML5离线Web应用API
12.2.1 检查浏览器的支持情况
12.2.2 搭建简单的离线应用程序
12.2.3 支持离线行为
12.2.4 manifest文件
12.2.5 applicationCache API
12.2.6 运行中的应用缓存
12.3 使用HTML5离线Web应用构建应用
12.3.1 创建记录资源的manifest文件
12.3.2 创建构成界面的HTML和CSS
12.3.3 创建离线JavaScript
12.3.4 检查applicationCache的支持情况
12.3.5 为Update按钮添加处理函数
12.3.6 添加Geolocation跟踪代码
12.3.7 添加Storage功能代码
12.3.8 添加离线事件处理程序
12.4 小结
第13章 HTML5未来展望
13.1 HTML5的浏览器支持情况
13.2 HTML未来的发展
13.2.1 WebGL
13.2.2 设备
13.2.3 音频数据API
13.2.4 触摸屏设备事件
13.2.5 P2P网络
13.2.6 最终方向
13.3 小结