Html5及新特性

 UI框架的进化
 HTML5 解决的问题
 HTML5 特性介绍
 作业

 Win32
 QT
 Flex
 WPF
 HTML

 减少插件
 增加本地文件访问
 增加网络访问能力
 Tag:
video,aduio,canvas,webgl,localstorage,webs
ocket,svg
 其他:geolocation,drag&drop,
semantics,webworker,webrtc,application
cache

 使用JavaScript 在网页上绘制图像,基于像素
级。
 Canvas2DAPI
 基本线条、路径、插入图像、像素级操作、
文字、阴影、颜色渐变等提供图形绘制功
能。
 Canvas能做的事
 http://fabricjs.com/demos/

 可缩放矢量图形（ScalableVector Graphics，SVG）是基于可扩
展标记语言（XML），用于描述二维矢量图形的一种图形格
式。
SVG图形格式特点：
1．基于XML
2．采用文本来描述对象
3．具有交互性和动态性
4．完全支持DOM

SVG Canvas
DOM 基于XML 逐像素进行渲染
是否矢量矢量，放大不失真像素操作，放大失真
图形内存模式保留模式即发即弃。直接向它的位图呈现它
的图形，然后对所绘制的形状没有
任何认知，只会得到最终的位图。
基本图形种类丰富（线，圆，矩形，多边形，路径
等）
矩形，路径
原生动画支持支持不支持。需要js去模拟，即刷屏
3D 不支持支持
交互支持Dom事件不支持事件处理器
导出图片不支持支持
应用不适合游戏应用最适合图像密集型的游戏
http://www.w3school.com.cn/tiy/t.asp?f=html5_svg_ex
http://slides.html5rocks.com/#svg-example-slide

 传统实现实时通信:ajax轮循与其他两种
comet方法:ajax长轮循,长连接

基于长轮询的服务器推模型

 基于 Iframe 及 htmlfile 的流（streaming）方式:
在 HTML 页面里嵌入一个隐蔵帧，然后将这个隐蔵帧的 SRC 属性设为对一个
长连接的请求，服务器端就能源源不断地往客户端输入数据。

 长轮询：客户端向服务器发送Ajax请求，服务器接到请
求后hold住连接，直到有新消息才返回响应信息并关闭
连接，客户端处理完响应信息后再向服务器发送新的请
求。
优点：在无消息的情况下不会频繁的请求。
缺点：服务器hold连接会消耗资源。
实例：WebQQ、Hi网页版、Facebook IM。
 长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵
iframe的src属性设为对一个长连接的请求，服务器端就
能源源不断地往客户端输入数据。
优点：消息即时到达，不发无用请求。
缺点：服务器维护一个长连接会增加开销,浏览器支持
不统一.
实例：Gmail聊天

 HTML 5WebSocket代表的是Comet和Ajax推进HTTP通信新一轮的尝试
 在浏览器和服务器之间采用单socket全双工（或者叫双向）传输来
push和pull信息。这不但可以避免Comet中存在的连接和可移植问题，
还能够提供比Ajax轮询更高效的解决方案。
WebSockets 可被看作是TCP 套接字
 Chrome 29 protocol version:RFC-6455
http://tools.ietf.org/html/rfc6455
 Test :http://websocketstest.com/

 适用于简单服务器数据推送场景
 单向
 比websocket简单,比comet兼容性好
 IE尚不支持

Web Storage
HTML5 提供了两种在客户端存储数据的新方法：
• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储
和cookie相比优势：
• 存储空间更大
• 存储内容不会发送到服务器
• 更多丰富易用的接口

 CACHE MANIFEST
# version 1.0.0
CACHE:
/html5/script/logic.js
/html5/css/style.css
/html5/images/background.png

NETWORK:
*
 FALLBACK:
 online.html offline.html
<html manifest='test.manifest'>
WebServer配置：
test/cache-manifest manifest

更新缓存的方式：
• 更新manifest文件
• 通过javascript操作
var appCache = window.applicationCache;appCache.update(); //尝
试更新缓存if (appCache.status ==
window.applicationCache.UPDATEREADY) { appCache.swapCache();
//更新成功后，切换到新的缓存}
applicationCache对象
该对象是window对象的直接子对象，window.applicationCache
基类：DOMApplicationCache
事件：checking, noupdate, downloading, progress, cached, updateready,
obsolete, error
属性：status
方法：update(),abort(),swapcache()

 WebWorkers为WEB前端网页上的脚本提供了一种能在后台线程中运行的方
法。
无法访问下例 JavaScript 对象：
 window 对象
 document 对象
 parent 对象
main.js:
var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
worker.postMessage('data');
task.js:
self.onmessage = function(event) {
// Do some work.
self.postMessage("recv'd: " + event.data);
};

http://www.w3school.com.cn/tiy/t.asp?f=html5_form_override
http://slides.html5rocks.com/#new-form-types
http://www.w3school.com.cn/tiy/t.asp?f=html5_form_required

• getElementsByClassName
• Selector API
• document.querySelector()
• document.querySelectorAll()
• Traversal API
• .nextElementSibling
• .previousElementSibling
• .firstElementChild
• .lastElementChild
• .children

 您能够创建圆角边框，向矩形添加阴影，
使用图片来绘制边框，更强大的背景控制，
文字阴影，指定字体，2D变转换，CSS动
画
 http://www.w3school.com.cn/css3/

 阅读rfc645 协议
 写一个或者网上下载一个server,client实现
 （任何语言都可以）

Html5及新特性

Recommended

Recommended

More Related Content

Similar to Html5及新特性

Similar to Html5及新特性 (20)

Html5及新特性

Editor's Notes