一、教程重点:以 综合性案例 为导向,辅之以 精要知识点

二、内容概况

  第1部分:通过 大小型案例 对 各重要知识点 进行详细讲解

第2部分:jWebSocket、RGraph、WebGL 三个重要框架的详细使用方法

三、12章内容概要

  章1:利用html5中的 结构元素 构建一个博客网站和一个企业门户网站(两个案例)       重点:结构元素

  章2:通过 两个案例 讲解 表单 在html5中的使用                   重点:表单

章3:通过 六个案例 讲解 Canvas元素 来绘制图形、图像和制作动画                        重点:Canvas元素

  章4:通过 两个案例 讲解 文件API和拖放API 的使用                重点:文件API、拖放API

  章5:通过 四个案例 讲解 多媒体功能 (视频、音频播放器)             重点:多媒体

  章6:通过 六个案例 讲解 本地存储技术                        重点:本地存储技术

  章7:通过 两个案例 讲解 跨文档的消息传输技术 (单点登录、获取批量数据)      重点:跨文档消息传输技术

   章8:通过 两个案例 讲解 利用 Web Workers实现多线程 处理           重点:Web Workers

  章9:通过 一个案例 讲解 利用 Geolocation Api 获取地理位置信息         重点:Geolocation Api

  章10--13:通过丰富案例 讲解 Socket通信框架jWebSocket、统计图制作插件RGraph、三维Web开发技术WebGL的使用方法

四、本书修订于2012年,彼时HTML5最终标准尚未尘埃落定,本书学习完必当进步学习最新的HTML5规范,方可优化HTML5初期的各种缺陷。

五、HTML5将在一下几个方面改变未来的互联网世界

  1.降低插件的重要性:(插件的弊端:安装失败、插件被禁用、成为被攻击对象、集成问题)

    HTML5解决方法:通过浏览器原生地支持相关的标签,比如<video>、<audio>可以像<img>一样使用,方便的在页面嵌入视频和音频。

   2.支持动态生成图像:

    之前:来自于 直接下载 的GIF或JPG图像

    HTML5:通过画布(canvas)临时生成

  3.允许Web程序利用 本地存储

    之前:web程序可利用浏览器在本地存储很多信息,不过开发真正实用的Web应用,需要更多存储空间

    HTML5:开发者可以按照需求随意使用,比如把云端的应用和数据保存在本地硬盘上,使云应用的交付、安装和部署都非常想传统的应用程序。无论是否联网,云应用都可以正常使用。因为之前已经从服务器上下载了HTML5应用中的JavaScript代码,这部分的代码就保存在本地。本地数据库实际上扮演的是智能缓存的作用。

  4.简化 数据提取

    之前:html除了告诉浏览器数据在哪里之外,不能提供任何有意义的信息

    HTML5:采用 微格式,在html中新增了专门的标签,这些标签代表其内容数据的含义。使得一些常用的,但是需要从多个数据源获取信息的应用变得简单,(相当于把这部分封装了)

  5.支持 位置服务

    之前:每台计算机都拥有属于自己的IP地址,但是,我们无法知道,这些IP地址所对应的计算机的世界时啥样的。

    HTML5:允许JavaScript询问浏览器用户的地理位置(经纬度),通常桌面系统不支持此功能,因为需要有GPS和WIFI,但是对于智能终端(手机等),这一功能将发挥作用。

  6.让Web视频播放更加流畅

    之前:视频需要下载插件

    HTML5:通过<video>元素,使视频内容和其他内容整合起来,从而使网页成为视频内容的主要场所。

六、案例精讲步骤

  1.案例概述

  2.页面显示效果

  3.案例知识点

  4.代码剖析

【HTML5 2】《html5 开发精要与实例讲解》 step1 -- 导读的更多相关文章

  1. 【HTML5 3】《html5 开发精要与实例讲解》 step2 -- 结构元素 (待续)

    主要内容:通过 一个博客网站和一个企业网站的制作 展示如何运用HTML5中的各种 结构元素,构建出一个语义清晰,结构分明的Web3.0时代的网站. 案例1:用HTML5中的结构元素构建一个博客网站 疑 ...

  2. [转载]HTML5游戏前端开发秘籍

    http://isux.tencent.com/html5-game-development-cheats.html 转载至腾讯ISUX HTML5游戏前端开发秘籍 本文由米随随编写 QQ空间Andr ...

  3. html5手机浏览器启动微信客户端支付实例

    html5手机浏览器启动微信客户端支付实例,外部浏览器html5微信支付技术,如何在手机浏览器微信支付,在微信客户端外的移动端网页使用微信支付 首先在微信支付官网https://pay.weixin. ...

  4. HTML5 Canvas游戏开发实战 PDF扫描版

    HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...

  5. 推荐25款很棒的 HTML5 开发框架和开发工具【上篇】

    HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...

  6. Html5 Egret游戏开发 成语大挑战(一)开篇

    最近接触了Egret白鹭引擎,感觉非常好用,提供了各种各样的开发工具让开发者和设计者更加便捷,并且基于typescript语言开发省去了很多学习成本,对于我们这种掉微软坑许久的童鞋来说,确实很有吸引力 ...

  7. HTML5手机APP开发入(5)

    HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...

  8. HTML5手机APP开发入(4)

    HTML5手机APP开发入(4) 课程内容 完成一个自定义的Component用来展现通讯录用户的明细信息如下图 http://bootsnipp.com/snippets/featured/prof ...

  9. HTML5手机APP开发入(3)

    HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: An ...

随机推荐

  1. django admin site配置(二)

    1. ModelAdmin.inlines 将有外键的子类包含进视图 ,实例: class Author(models.Model): name = models.CharField(max_leng ...

  2. Windows 10 Edge浏览器、照片查看程序关闭“平滑滚动”

    升级到10后,这两个常用软件的“平滑滚动”功能,个人感觉体验有点不好,特别是图片这个自带程序,看了几十张图后就有点头晕了,所以把它关闭为好: 控制面板\系统和安全\系统\高级系统设置\高级\性能\设置 ...

  3. IE6 背景透明

    IE6 背景透明 第 1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了.(注意两处图片的路径写法不一样,本例中,icon_home.png图片与html文件在 ...

  4. Apache开启伪静态后报500错误.

    参考:http://blog.163.com/lgh_2002/blog/static/44017526201051452939761/ 加载Rewrite模块: 在conf目录下httpd.conf ...

  5. php获取GET方式传入的全部变量名称与值:foreach用法

    $count = count($_GET); $i = 0; foreach ($_GET as $key => $value) { if ($i == $count - 1) { $str . ...

  6. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  7. canvas 动态飞速旋转的矩形

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. Java数据结构之树和二叉树(2)

    从这里始将要继续进行Java数据结构的相关讲解,Are you ready?Let's go~~ Java中的数据结构模型可以分为一下几部分: 1.线性结构 2.树形结构 3.图形或者网状结构 接下来 ...

  9. jeecg团队招新人(5人)

    jeecg团队招新人(5人) http://www.jeecg.org/forum.php? mod=viewthread&tid=2046&page=1&extra=#pid ...

  10. Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt)

    Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt) 作者: Desmond Chen,发布日期: 2014-05- ...