HTML 5开发精要与实例详解

前言

第1章 用HTML5中的结构元素构建网站／1

1.1 案例1：用HTML5中的结构元素构建一个博客网站／2

1.1.1 案例知识点／2

1.1.2 博客首页的实现/11

1.1.3 文章显示页面的实现/30

1.2 案例2：用HTML5中的结构元素构建一个企业网站/39

1.2.1 首页的实现/39

1.2.2 联系方式页面的实现/52

1.3 本章小结/55

第2章 在Web表单中使用HTML5/56

2.1 案例3：用结构元素制作Web应用程序中的菜单/57

2.1.1 页面显示效果/57

2.1.2 代码剖析/58

2.2 案例4：综合运用HTML5、iQuery与ASP.NET构建Web应用程序/61

2.2.1 案例概述/61

2.2.2 页面显示效果/61

2.2.3 案例知识点/63

2.2.4 代码剖析/70

2.3 本章小结/96

第3章 使用canvas元素绘制图形、图像与动画/97

3.1 案例5：使用canvas元素绘制美丽的花朵/98

3.1.1 案例概述/98

3.1.2 页面显示效果/98

3.1.3 案例知识点/100

3.1.4 代码剖析/103

3.2 案例6：使用canvas元素绘制指针式动画时钟／106

3.2.1 案例概述/106

3.2.2 页面显示效果/106

3.2.3 案例知识点/107

3.2.4 代码剖析/108

3.3 案例7：使用canvas元素制作简单小游戏／113

3.3.1 案例概述/113

3.3.2 页面显示效果/113

3.3.3 案例知识点/115

3.3.4 代码剖析/116

3.4 案例8：使用canvas元素绘制图像放大镜／119

3.4.1 案例概述／120

3.4.2 页面显示效果/120

3.4.3 案例知识点／120

3.4.4 代码剖析/121

3.5 案例9：用动画的形式装载图像／125

3.5.1 案例概述/125

3.5.2 页面显示效果/125

3.5.3 案例知识点/128

3.5.4 代码剖析/130

3.6 案例10：将彩色照片转换成黑白照片／138

3.6.1 案例概述／138

3.6.2 页面显示效果/138

……

第4章 文件api与拖放api/145

4.1 案例11：在浏览器中预览客户端文件并上传/146

4.1.1 案例概述/146

4.1.2 页面显示效果/146

4.1.3 案例知识点/149

4.1.4 代码剖析/151

4.2 案例12：使用canvas api、文件api与拖放api制作拼图游戏/158

4.2.1 案例概述/158

4.2.2 页面显示效果/159

4.2.3 案例知识点/162

4.2.4 代码剖析/165

4.3 本章小结/176

第5章 多媒体播放/177

5.1 案例13：打造自己的网页视频播放器/178

5.1.1 案例概述/178

5.1.2 页面显示效果/178

5.1.3 案例知识点/181

5.1.4 代码剖析/183

5.2 案例14：对视频使用实时回放功能/191

5.2.1 案例概述/191

5.2.2 页面显示效果/191

5.2.3 代码剖析/192

5.3 案例15：对视频使用截图功能/195

5.3.1 案例概述/195

5.3.2 页面显示效果/195

5.3.3 案例知识点/196

5.3.4 代码剖析/196

5.4 案例16：打造自己的网页音频播放器/199

5.4.1 案例概述/199

5.4.2 页面显示效果/199

5.4.3 案例知识点/200

5.4.4 代码剖析/201

5.5 本章小结/206

第6章 本地存储/207

6.1 案例17：制作html 5版本的日程提醒簿/208

6.1.1 案例概述/208

6.1.2 页面显示效果/208

6.1.3 案例知识点/209

6.1.4 代码剖析/210

6.2 案例18：临时保存页面中的输入内容/214

6.2.1 案例概述/214

6.2.2 页面显示效果/215

6.2.3 案例知识点/216

6.2.4 代码剖析/216

6.3 案例19：使用html 5制作web应用程序的演示版/218

6.3.1 案例概述/218

6.3.2 页面显示效果/218

6.3.3 案例知识点/219

6.3.4 代码剖析/222

6.4 案例20：使用客户端session/232

6.4.1 案例概述/232

6.4.2 页面展示效果/232

6.4.3 案例知识点/234

6.4.4 代码剖析/235

6.5 案例21：将本地数据库中的数据提交到服务器端/248

6.5.1 案例概述/248

6.5.2 页面展示效果/248

6.5.3 代码剖析/249

6.6 案例22：制作可以离线使用的日程提醒簿/256

6.6.1 案例概述/256

6.6.2 页面显示效果/256

6.6.3 案例知识点/257

6.6.4 代码剖析/260

6.7 本章小结/261

第7章 跨文档消息传输/262

7.1 案例23：通过跨文档消息传输功能实现单点登录/263

7.1.1 案例概述/263

7.1.2 页面显示效果/264

7.1.3 案例知识点/268

7.1.4 代码剖析/268

7.2 案例24：通过跨文档消息传输功能获取批量数据/300

7.2.1 案例概述/300

7.2.2 页面显示效果/300

7.2.3 代码剖析/301

7.3 本章小结/310

第8章 利用web workers实现多线程处理/312

8.1 案例25：在后台线程中实现对数据库的增删查改操作/313

8.1.1 案例概述/313

8.1.2 页面显示效果/313

8.1.3 案例知识点/315

8.1.4 代码剖析/316

8.2 案例26：在后台线程中实现数据的批量插入/334

8.2.1 案例概述/334

8.2.2 代码剖析/334

8.3 本章小结/339

第9章 利用geolocation api获取地理位置信息/341

9.1 案例27：显示计算机或移动设备所在地的地图/342

9.1.1 案例概述/342

9.1.2 页面显示效果/342

9.1.3 案例知识点/343

9.1.4 代码剖析/346

9.2 本章小结/349

第10章 使用jwebsocket框架开发socket通信程序/350

10.1 安装与运行jwebsocket/351

10.1.1 安装jwebsocket服务器/351

10.1.2 在其他服务器环境下运行jwebsocket服务器/352

10.1.3 将jwebsocket服务器作为windows的可执行文件/354

10.1.4 将jwebsocket服务器作为windows的服务/355

10.1.5 jwebsocket web客户端/355

10.2 创建第一个利用jwebsocket进行通信的web页面/357

10.3 创建jwebsocket服务器端的侦听器/365

10.3.1 jwebsocket的通信架构/365

10.3.2 创建侦听器/366

10.4 jwebsocket中的令牌/374

10.4.1 令牌的基本概念/375

10.4.2 系统令牌/376

10.5 jwebsocket中服务器端的插件/383

10.5.1 服务器端插件的基础知识/383

10.5.2 创建自定义服务器端插件/385

10.6 jwebsocket中的通道/393

10.7 案例28：利用jwebsocket服务器创建简单聊天室/398

10.7.1 案例概述/398

10.7.2 页面显示效果/398

10.7.3 代码剖析/401

10.8 本章小结/412

第11章 rgraph统计图制作插件/414

11.1 概述/415

11.1.1 html 5版统计图插件的优越性/415

11.1.2 使用rgraph插件/415

11.1.3 使用服务器端数据/416

11.2 绘制统计图时所用到的公共属性/417

11.3 绘制柱状图/422

11.3.1 绘制柱状图时所用到的属性/422

11.3.2 示例程序/425

11.3.3 使用obj.getbar方法/426

11.3.4 绘制分组柱状图/428

11.3.5 使用上下文菜单/432

11.4 绘制折线图/435

11.4.1 绘制折线图时所用到的属性/435

11.4.2 绘制基本折线图/439

11.4.3 使用getpoint方法/441

11.4.4 在一个折线图中绘制多根折线/444

11.4.5 绘制范围折线图/446

11.4.6 在一个折线图中使用左右两根不同统计单位的垂直坐标轴/448

11.4.7 在一个统计图中绘制柱状图与折线图/450

11.4.8 绘制动态折线图/452

11.5 绘制饼图/455

11.5.1 绘制饼图时所用到的属性/455

11.5.2 示例程序/455

11.5.3 使用getsegment方法/457

11.6 绘制横向柱状图/461

11.6.1 绘制横向柱状图时所用到的属性/461

11.6.2 示例程序/463

11.6.3 绘制分组横向柱状图/464

11.7 绘制雷达图/466

11.7.1 绘制雷达图时所用到的属性/466

11.7.2 示例程序/467

11.8 增强用户体验/468

11.8.1 通过拖曳来缩放统计图的尺寸/468

11.8.2 制作工具条提示信息/469

11.8.3 制作上下文菜单/475

11.8.4 放大统计图/476

11.8.5 允许用户注解统计图/481

11.9 本章小结/483

第12章 使用webgl开发三维图形图像/484

12.1 webgl概述/485

12.1.1 webgl的基础知识/485

12.1.2 进行webgl开发之前的准备工作/485

12.2 使用webgl绘制三角形与矩形/488

12.2.1 下载并使用脚本文件/488

12.2.2 页面显示效果/488

12.2.3 代码剖析/488

12.3 使用颜色绘制彩色三角形与矩形/507

12.3.1 画面式样/507

12.3.2 代码剖析/507

12.4 制作三维动画/515

12.4.1 画面式样/515

12.4.2 代码剖析/515

12.5 制作三维物体/520

12.5.1 画面式样/520

12.5.2 代码剖析/520

12.6 使用纹理/528

12.6.1 画面式样/528

12.6.2 代码剖析/528

12.7 键盘输入与纹理过滤/537

12.7.1 画面式样/537

12.7.2 代码剖析/538

12.8 本章小结/545

附录 五大浏览器的最新版对html 5的支持情况/546

《HTML 5开发精要与实例详解》：畅销书《HTML 5与CSS 3权威指南》姊妹篇，HTML 5实战进阶必备，注重实战：包含28个中大型案例，每个案例既有直观的效果图，又有详尽的源代码分析，讲解透彻：对每个案例所涉及的理论精要进行深入剖析，理论与实践完美结合。全球著名信息技术研究与咨询公司Gartner的分析师Nick Jones提出了未来4年移动互联网领域最值得关注的10大技术趋势，其中HTML 5居首位。HTML 5不仅在移动互联网领域深受欢迎，在整个Web技术领域也备受瞩目。它正引领着一场新的技术变革，它将是Web技术未来发展的新方向和新标准。HTML5将在降低插件的重要性（现有的各种浏览器大多都安装有各种插件）、支持动态图像生成、三维图形绘制、动画制作、本地存储、Web开发中的数据提取、位置服务、Web视频／音频播放、跨文档消息传输、多线程处理等诸多方面发挥重要的作用，在使Web应用功能变得更加丰富多彩的同时，也会使Web应用的开发变得更加高效。《HTML 5开发精要与实例详解》是畅销书《HTML 5与CSS 3权威指南》（上市6个月重印4次）的姊妹篇。《HTML 5与CSS 3权威指南》以系统地讲解HTML 5的理论知识为重点，《HTML 5开发精要与实例详解》则以实践为核心，通过28个精心设计的中大型案例对这些理论知识点进行了充分讲解。通过这两《HTML 5开发精要与实例详解》，读者不仅能系统地掌握HTML5的理论知识，而且还能在实践中迅速融会贯通，从而达到熟练使用HTML 5进行Web开发的目的。《HTML 5开发精要与实例详解》内容简介：这是一本以综合性案例为导向并辅之以精要知识点讲解的html 5实战教程。内容分为两大部分：第一部分通过一系列中大型案例全方位对html 5的各个重要知识点进行了详细的讲解，每个案例包含案例概述、页面效果展示、案例所涉及主要知识点（精要）、源代码剖析4个部分，读者既能根据书中的步骤动手实践，又能重点学习案例中用到的核心理论知识，同时还能领会源代码的设计思路和方法；第二部分讲解了jwebsocket、rgraph、webgl等3个重要框架和技术的详细使用方法。《html 5开发精要与实例详解》一共12章：第1章分别用2个案例演示了如何利用html 5中的结构元素来构建一个博客网站和企业门户网站；第2章用2个案例讲解了表单在html 5中的使用；第3章用6个案例讲解了如何利用canvas元素来绘制图形、图像和制作动画；第4章用2个案例介绍了文件apt和拖放api的使用方法； 第5章用4个案例讲解了如何打造自己的网页视频播放器、网页音频播放器，以及实现视频实时回放和视频截图等多媒体功能；第6章用6个案例全面讲解了html 5中的本地存储技术；第7章用单点登录和获取批量数据这2个案例讲解了html 5中的跨文档的消息传输技术；第8章用2个案例讲解了如何利用web workers实现多线程处理；第9章用1个案例讲解了如何利用geolocation api来获取地理位置信息；第10～13章分别讲解了socket通信框架jwebsocket、统计图制作插件rgraph、三维web开发技术webgl的详细使用方法，并辅之以丰富的案例。《html 5开发精要与实例详解》所有案例的源代码都是作者亲自编写并调试和运行成功的。读者可以利用这些代码进行实战练习，也可以根据需要对这些代码进行修改，以观察不同的效果，从而加深对案例代码和书中知识点的理解。【作者简介】陆凌牛，资深Web开发工程师、软件开发工程师和系统设计师。从事Web开发多年，对各种Web开发技术（包括前端和后端）都有非常深入的研究，经验极其丰富。HTML 5和CSS 3等新技术的先驱者和布道者，不仅对HTML 5与CSS 3的理论知识有比较深入的认识，而且已经在大量实践中付诸应用。最近，他在学习和研究Sencha Touch等HTML 5开发框架，并已经开始尝试使用。与此同时，他在C#、VB.NET、ASP.NET、SQL Server等微软技术和Java、Struts、Spring、Hibernate等Java技术领域也积累大量的实战经验。此外，他还是一位技术作家，处女作《HTML5与CSS3权威指南》凭借优良的内容获得了读者的广泛好评，被读者誉为“系统学习HTML5和CSS3的最佳选择之一”，上市6个月重印4次，是2011年度计算机领域的畅销书之一。