HTML5多媒体开发指南
出版社:清华大学出版社
出版日期:2013-2
ISBN:9787302311041
作者:(美)布拉特曼(Bluttman, K. ),(美)科特雷尔(Cottrell, L. ) 著
页数:327页
章节摘录
版权页： 插图： 在每一轮循环时，位于大括号（{}）之中的所有代码都将运行一次。在for语句之后，使用了switch语句来检测日期。switch语句可以代替一系列if语句。这只是一个程序设计风格的小问题。最后，请注意在标记中添加了onload事件，以触发loop anddecide（）函数的执行： 2.4 JavaScript外部文件 在Web页面中通常链接到JavaScript文件。也就是说，将JavaScript代码放在W曲服务器上的一个外部文件中，而不是将JavaScript代码直接写入到页面之中。script标记具有一个源属性（srC）用于指向外部的JavaScript文件。比如下面的例子：
内容概要
Ken Bluttman：Ken Bluttman已经编写了十多本计算机图书，其中包括多本介绍Web开发技术的书籍。Ken具有《财富》500强企业的商业工作经历。Ken从实用的角度进行开发，实际的需求比幻想更加重要，即采用“需求－表单－功能”的方式进行开发。Ken开发过复杂的企业intranet应用，指导并领导过开发团队。近年来，Ken独立工作，创建网站并编写图书。Ken常常为分析、交通生产和搜索引擎优化(search engine optimization，SEO)等领域的商业团体担任顾问。闲暇之时，Ken喜欢摆弄各式各样的乐器、登山、外出摄影或者照顾家庭和他的各种小动物。
Lee Cottrell：Lee Cottrell是匹兹堡Bradford学校的计算机程序设计和网络课程的Program Manager。Lee于2001年获得了匹兹堡大学信息科学的硕士学位。从1993年开始，Lee就使用HTML为非营利组织和社区创建了一些Web页面。随着HTML的升级，Lee紧跟最新技术，使用了HTML5和CSS3的早期版本进行开发。
书籍目录
目 录
第I部分 概述
第1章 HTML5新特性
3
1.1 HTML5——更优雅
的HTML
4
1.2 HTML5与CSS
8
1.3 HTML5的新标记
10
1.4 HTML5与HTML4的比较
10
1.5 HTML5中最新的多媒体处理
方式
15
1.6 小结
17
第2章 HTML5 Web开发中的
JavaScript和CSS
19
2.1 JavaScript是Web开发不可
或缺的一部分
20
2.2 将脚本代码放在页面底部
22
2.3 循环和条件判断
24
2.4 JavaScript外部文件
26
2.5 CSS概述
27
2.6 ID选择器：选择页面的
特定部分
31
2.7 如何将CSS应用于新的
HTML5多媒体标记
34
2.8 小结
37
第II部分 图形和多媒体
第3章 canvas的创意
41
3.1 canvas简介
42
3.2 在Canvas上绘图
44
3.3 渐变
48
3.3.1 线性渐变
50
3.3.2 径向渐变
52
3.4 理解路径
54
3.5 绘制圆和圆弧
54
3.6 绘制线段
64
3.7 使用多个canvas
69
3.8 在canvas上放置文本
73
3.8.1 垂直文本
75
3.8.2 阴影文本
77
3.9 小结
80
第4章 canvas的动画和事件
81
4.1 用圆形填充canvas的动画
82
4.2 移动的渐变效果
84
4.3 使用事件
86
4.3.1 蒙德里安风格的艺术
86
4.3.2 绘图板
91
4.4 小结
98
第5章 在HTML5中使用视频
99
5.1 关于格式编码器和一些
易混淆的问题
100
5.2 转换文件格式
101
5.3 观看视频
106
5.3.1 回退
108
5.3.2 控制视频
109
5.3.3 video元素的更多属性
111
5.3.4 视频与事件
112
5.4 小结
114
第III部分 高级HTML5特性
第6章 HTML5中的audio
117
6.1 Audio元素简介
118
6.2 隐藏audio播放器
121
6.3 事件和audio元素
123
6.3.1 使用audio元素的事件
123
6.3.2 使用audio元素的其他
事件
126
6.4 小结
128
第7章 使用本地存储持久化存储
数据
129
7.1 本地存储的定义
130
7.2 本地存储基础
130
7.3 使用本地存储控制图片
135
7.4 小结
140
第8章 拖放功能：在屏幕上移动
元素
143
8.1 拖放方块
144
8.2 为拖放事件添加行为
149
8.3 轻松在线购物
153
8.4 井字游戏(Tic-Tac-Toe)
161
8.5 小结
169
第9章 地理定位
171
9.1 地理定位方法
172
9.2 关注隐私问题
173
9.3 找到你的位置
174
9.3.1 处理拒绝和错误
178
9.3.2 检测浏览器对geolocation
的支持
180
9.4 在地图上显示你的位置
183
9.4.1 使用地图
187
9.4.2 持续地跟踪位置的移动
188
9.5 小结
191
第10章 HTML5文档结构
193
10.1 div元素的问题
194
10.2 HTML5布局标记
195
10.2.1 布局标记概述
195
10.2.2 使用新的布局标记
197
10.3 小结
211
第11章 HTML5新的表单元素
和用途
213
11.1 HTML5的input类型
214
11.2 创建表单
216
11.2.1 添加一个颜色拾取器
217
11.2.2 添加日期和时间控件
218
11.2.3 使用e-mail和URL
字段
221
11.2.4 添加Number控件和Range
控件
221
11.2.5 使用search类型
224
11.2.6 添加电话号码输入框
225
11.3 创建安全表单
225
11.3.1 表单的布局
226
11.3.2 执行验证
228
11.3.3 提交数据
232
11.4 小结
235
第12章 CSS3：新样式表技术
237
12.1 CSS3模块
238
12.2 Web字体
238
12.2.1 CSS3的字体规则
239
12.2.2 字体格式
240
12.2.3 在网站中使用字体
240
12.3 背景
243
12.3.1 多个背景图片
243
12.3.2 设置背景位置
243
12.4 边框
245
12.4.1 圆角边框和阴影边框
246
12.4.2 图形边框
247
12.5 变形
250
12.6 过渡(Transition)
253
12.7 动画
257
12.7.1 创建动画
258
12.7.2 多个动画
261
12.7.3 CSS动画的附加说明
263
12.8 小结
263
第13章 可编辑区域和离线站点
265
13.1 可编辑内容
266
13.1.1 创建一个可编辑区域
266
13.1.2 可编辑内容的一个
小游戏
268
13.2 离线站点
271
13.2.1 缓存清单文件
272
13.2.2 检测离线状态的代码
276
13.2.3 缓存多个页面
277
13.3 小结
278
第14章 高级主题
279
14.1 JavaScript
280
14.1.1 循环
280
14.1.2 条件分支
285
14.1.3 函数
289
14.2 用数学方法创建视觉
效果
290
14.3 视差处理
306
14.4 小结
315
附录A 快速参考
317
A.1 HTML5模板
317
A.2 HTML全局属性
318
A.3 HTML特定标记
的属性
320
A.4 HTML5标记
323
编辑推荐
《HTML5多媒体开发指南》创建可以在任何设备上观看的激动人心的动画，播放原生音频和视频文件，无需第三方插件。使用geolocation和拖放技术创建Rich Web解决方案。
作者简介
使用HTML5开发跨平台多媒体应用
现在开发人员可以在浏览器中创建出具有丰富交互功能的内容，并实现跨平台部署。 HTML5多媒体开发指南 一书对此进行了详细介绍。本书将介绍如何使用HTML5革命性的新特性，包括原生的
发布书评
精彩书评 (总计1条)
-
HTML5：什么是HTML5，以及学习HTML5的重要性随着Internet的发展，Web网站已经从简单的静态文本和图片组成的简报式页面，进化为具有许多页面、多种功能和个性化的复杂网站。现在，一个良好的网站，应该包含富有吸引力的图形化外观、易于使用的网站导航，并为访客提供相应的信息——这些信息可以是文本或者图片，访客正是为获取信息而来。用户访问网站，也可能是为了搜索某种信息、完成一次购物或者进行娱乐消遣。为了提供各式各样的丰富体验，各种Web技术获得了长足发展并不断成熟，要么保持进步，要么被淘汰。早期的Web网站使用CGI(Common Gateway Interface，通用网关接口)脚本来实现后端处理。现在已经有大量技术可用，比如复杂的数据库应用、用户行为分析(即跟踪访客的行为)以及基于用户的地理位置和之前的浏览记录来提供有针对性的内容等等。Internet一开始出现时，是作为一种理想化的、纯粹的信息传播平台，没有商业广告或任何其他掺杂的内容来转移网站访客的注意力。然而，事物的发展可能会延迟，但却不会止步。网络营销和广告已经成为Internet的现实，并且已经存在了很多年。新技术不断涌现，可以更好地支持网络营销。在HTML5中，geolocation新特性可以定位用户的地理位置，毫无疑问该技术将被用于市场营销的竞争。对于市场营销人员，geolocation新特性意味着可以根据用户所在的位置，向用户发送具有针对性的、本地化的商品信息。图1显示了geolocation新特性的一个应用。图1 使用geolocation定位浏览者的位置Web技术的发展Web页面是用HTML(或HTML的变体，比如XHTML)创建的。通过CSS(Cascading Style Sheet，层叠样式表)来定义页面的外观样式。后端处理则是使用服务器的编程语言来完成的，最常见的是PHP和ASP.NET。动画是使用Adobe Flash或通过JavaScript编程来实现的。多年以来，这些工具已经成为了Web开发的主力军。随着时间的推移，某些开发方式发生了改变，比如移除了那些提供样式属性而不是内容或页面组织的HTML标记。以样式为核心功能的标记已经并入了CSS。使用内容管理系统(Content management system)作为网站的支柱已经非常流行，它可以将很多关键元素结合为一个易于使用的软件包。用Flash创作的动画提供了丰富和充满魅力的视觉体验。作为一种艺术创作工具，Flash已经非常流行，各种浏览器都开始支持Flash，无须要求用户特地去下载Flash Player，实际上Flash Player是一个浏览器插件(plug-in)。Flash自身包含了一种强大的程序设计语言：ActionScript。对于Flash的发烧友，遗憾的是Flash在本质上是一种影片(movie)，搜索引擎无法正确地索引Flash。这与许多开发人员需要努力奋斗的SEO(搜索引擎优化)是冲突的。我们不可能去开发这样的网站：它是一个漂亮的网站，但它的漂亮却减弱了在搜索结果中获得较高排名的能力。术语说明现在已经简要介绍了本书，并且已经提到了一些Web技术，随着本书的介绍，更多的技术将会浮出水面。前言是本书的开始，也是定义这些缩略语和工具的好地方，Web设计人员和开发人员常常使用这些术语。下面的术语列表并不完备。要列出完整的Web术语表，需要很多页的词汇表。注意本书并未完全介绍这里列出的所有术语。本书的重点是介绍HTML5中的多媒体开发，并非无所不包。HTML和XHTML：超文本标记语言(Hypertext Markup Language，HTML)是一种基础的Web页面程序设计语言。与真正的程序设计语言相比，HTML根本不是用于进行程序设计的。完备的程序设计语言都具有重复执行代码块(循环)、执行条件判断(比如if和while语句)等功能。但HTML并不具备这些能力。HTML最初的目的是在Web页面上呈现内容。这个功能是通过标记(tag)来实现的，标记将告知Web页面要显示什么或者执行什么操作。标记按照它们在代码中出现的次序，在Web页面上依序地呈现。也就是说，HTML代码只能顺序执行，无法跳转(使用JavaScript正是为了实现这些功能)。XHTML是HTML的一种变体。这里X代表XML(Extensible Markup Language，可扩展标记语言)。CSS：层叠样式表(Cascading Style Sheets，CSS)用于定义页面内容的样式。例如，某行文本可以是斜体，比周围的文本字体更大，或者为其设置其他任意数量的样式。所有这些视觉效果都是样式设置。文本依然是文本，内容依然是内容。无论它的外观如何，文本表达的都是相同的内容。CSS用于定义HTML的样式。本书介绍了如何使用CSS。JavaScript：JavaScript是一种功能完备的程序设计语言，它运行在Web浏览器之中，具有其他程序设计语言所具有的循环和条件分支等功能。浏览器之间的差别是非常重要的。虽然我们访问的是同一个页面，但在作者的浏览器中运行的JavaScript与在读者的浏览器中运行的JavaScript，在功能上可能存在差异。在现代Web开发中，JavaScript毫无疑问是最重要的角色。AJAX：异步JavaScript和XML(Asynchronous JavaScript and XML，AJAX)是一组技术的集合，它为关键的Web需求提供了解决方案。使用AJAX可以刷新Web页面的一个区域，而无须在浏览器中重新载入整个页面。PHP和ASP/ASP.NET：PHP和ASP是服务器端的程序设计语言。它们最主要的用途是向Web浏览器输出需要显示的HTML。它们可以处理各种基于服务器的需求，比如从数据库读取数据并呈现在Web页面之中。其他常用的服务器端技术还包括Perl、ColdFusion和JSP。Flash：Flash是一种用于创建Web影片的应用程序。这一描述太简单，实际上Flash具有强大的功能。Web所富有的吸引力，在很大程度上来自Flash在Web页面上提供的各种视觉效果。CMS：内容管理系统(CMS)用于组织网站内容的各个页面。博客就是最常见的CMS系统。WordPress是该领域的佼佼者。Tag：标记是HTML和XHTML的构建块。一个标记结构是用一个小于符号和一个大于符号(< >)组成的。例如，body标记就是<body>。绝大多数标记都要求(或者至少应该)具有一个对应的关闭标记，比如</body>。标记可以包含属性。例如，form标记常常具有action属性：<form action="process. php">。Canvas Tag：<canvas>是一个HTML5新标记。它实际上是一个绘图平面，在canvas上可以实现大量富有创造性的效果。在使用<canvas>时，需要广泛地使用JavaScript来执行绘图操作。Audio Tag：<audio>是一个HTML5新标记。顾名思义，它用于在浏览器中播放音频。在HTML5之前，这需要第三方解决方案才能实现，比如一个使用Flash创建的audio播放器。现在，HTML5提供了对audio播放器的原生支持。Video Tag：<video>是一个HTML5新标记。视频已经成为大众交流的一种主要手段。YouTube(www.youtube.com)是视频网站的领导者。在过去，使用YouTube时，要么是HTML代码中已经嵌入了YouTube生成的代码，要么是具有一个指向YouTube网站上视频的HTML链接，这样视频才能显示在Web页面上。新的<video>提供了一种通过原生核心标记来播放视频的新方法。视频的源文件可以放在任何地方——绝大多数都在Web服务器上。曙光HTML5就是下一代HTML。它并非是一种彻头彻尾的全新语言。它提升了已经成熟的HTML4，使其满足当今的需要。HTML5提供了数年之前并不加以考虑的一些功能。比如，几年之前，HTML还不需要客户端存储(local storage)功能。之前已经提到过的geolocation功能，对于提供以地理位置为核心的特性非常有用，比如推荐你附近的餐馆。本书介绍了大量的HTML5新特性，重点介绍了与多媒体开发有关的新特性，比如audio、video和动画。本书还展示了一些其他的关键特性，以便新的HTML5示例取得更好的体验。注意在各种可用的浏览器之间比较遵循标准的程度是一个永无休止的问题。浏览器的支持情况常常发生改变，因此讨论特定浏览器的细节很快就会过时。本书采取的办法，是给出实例，然后让读者亲自去试验。在某些实例中可能会提到某些适用的特定浏览器，但建议读者采用最新版本的浏览器。就呈现媒体而言，三个新标记——<audio>、<video>和<canvas>——可以取代实现相同功能的第三方工具。然而这只是一个主观的想法，流行的第三方工具将继续使用很长的时间。因为可以使用HTML5新标记，并不意味着Web站点必须更新到新的标准。另外，即使是开发新网站，开发人员将自然而然地继续使用他们最熟悉的工具来进行开发。解决这一问题的方法，是将JavaScript作为开发新Web项目的主要程序设计语言——指浏览器端的开发。请记住，Web页面是由Web服务器提供的。可以采用多种服务器端语言来创建要在浏览器中呈现的页面。但一旦处理浏览器端的编程，JavaScript就是关键，它是运行在浏览器中的程序设计语言，或者说是Web体验客户端的程序设计语言。从语言的发展历史来看，JavaScript是一门初生的语言，它用于提供简单的动作，比如翻转图片(当鼠标移过图片时显示另外一张图片)。数年之前，一种新的JavaScript应用——即AJAX——大行其道，它使JavaScript获得了开发人员社区的关注。在现今的开发领域，JavaScript是一种非常重要的语言。但JavaScript并不是一种特别容易学习的语言。具有传统面向对象语言比如C++的背景知识，可以使JavaScript的学习更加轻松。如果你喜欢拖放式的开发工具，比如Dreamweaver，那么请煮上一杯咖啡，卷起袖子，找一个舒适的地方来学习JavaScript吧。作为一个激动人心的开始，让我们来看一下图2吧，它显示了在canvas元素中绘制的一个爆炸的星空效果。开始本书的学习吧，你很快就可以创建出灿烂的页面效果。图2 用canvas标记显示一个JavaScript创建的动画本书代码亲自输入代码是学习一门语言最好的方式。如果读者在输入代码之后，发现代码无法正常运行，可以从www.webbingways.com网站下载本书的所有代码。