jhwang
 UI框架的进化
 HTML5 解决的问题
 HTML5 特性介绍
 作业
 Win32
 QT
 Flex
 WPF
 HTML
 减少插件
 增加本地文件访问
 增加网络访问能力
 Tag:
video,aduio,canvas,webgl,localstorage,webs
ocket,svg
 其他:geolocation,drag&drop,
seman...
 使用JavaScript 在网页上绘制图像,基于像素
级。
 Canvas2DAPI
 基本线条、路径、插入图像、像素级操作、
文字、阴影、颜色渐变等提供图形绘制功
能。
 Canvas能做的事
 http://fabricjs.c...
 可缩放矢量图形(ScalableVector Graphics,SVG)是基于可扩
展标记语言(XML),用于描述二维矢量图形的一种图形格
式。
SVG图形格式特点:
1.基于XML
2.采用文本来描述对象
3.具有交互性和动态性
4.完全...
SVG Canvas
DOM 基于XML 逐像素进行渲染
是否矢量 矢量,放大不失真 像素操作,放大失真
图形内存模式 保留模式 即发即弃。直接向它的位图呈现它
的图形,然后对所绘制的形状没有
任何认知,只会得到最终的位图。
基本图形种类 丰富...
 传统实现实时通信:ajax轮循与其他两种
comet方法:ajax长轮循,长连接
基于长轮询的服务器推模型
 基于 Iframe 及 htmlfile 的流(streaming)方式:
在 HTML 页面里嵌入一个隐蔵帧,然后将这个隐蔵帧的 SRC 属性设为对一个
长连接的请求,服务器端就能源源不断地往客户端输入数据。
 长轮询:客户端向服务器发送Ajax请求,服务器接到请
求后hold住连接,直到有新消息才返回响应信息并关闭
连接,客户端处理完响应信息后再向服务器发送新的请
求。
优点:在无消息的情况下不会频繁的请求。
缺点:服务器hold连接会消耗资源。...
 HTML 5WebSocket代表的是Comet和Ajax推进HTTP通信新一轮的尝试
 在浏览器和服务器之间采用单socket全双工(或者叫双向)传输来
push和pull信息。这不但可以避免Comet中 存在的连接和可移植问题,
还能...
Client:
Server
 适用于简单服务器数据推送场景
 单向
 比websocket简单,比comet兼容性好
 IE尚不支持
Web Storage
HTML5 提供了两种在客户端存储数据的新方法:
• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储
和cookie相比优势:
• 存储空...
 Web SQL Database
 CACHE MANIFEST
# version 1.0.0
CACHE:
/html5/script/logic.js
/html5/css/style.css
/html5/images/background.png

NETWORK...
更新缓存的方式:
• 更新manifest文件
• 通过javascript操作
var appCache = window.applicationCache;appCache.update(); //尝
试更新缓存if (appCache.s...
 WebWorkers为WEB前端网页上的脚本提供了一种能在后台线程中运行的方
法。
无法访问下例 JavaScript 对象:
 window 对象
 document 对象
 parent 对象
main.js:
var worke...
http://www.w3school.com.cn/tiy/t.asp?f=html5_form_override
http://slides.html5rocks.com/#new-form-types
http://www.w3schoo...
• getElementsByClassName
• Selector API
• document.querySelector()
• document.querySelectorAll()
• Traversal API
• .nextEl...
 您能够创建圆角边框,向矩形添加阴影,
使用图片来绘制边框 ,更强大的背景控制,
文字阴影,指定字体,2D变转换,CSS动
画
 http://www.w3school.com.cn/css3/
 阅读rfc645 协议
 写一个或者网上下载一个server,client实现
 (任何语言都可以)
Html5及新特性
Html5及新特性
Upcoming SlideShare
Loading in …5
×

Html5及新特性

1,125 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,125
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。
  • Canvas2D API基本线条、路径、插入图像、像素级操作、文字、阴影、颜色渐变等提供图形绘制功能。
  • http://www.ibm.com/developerworks/cn/web/wa-lo-comet/
  • http://www.ibm.com/developerworks/cn/web/wa-lo-comet/服务器端会阻塞请求直到有数据传递或超时才返回。客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。当客户端处理接收的数据、重新建立连接时,服务器端可能有新的数据到达;这些信息会被服务器端保存直到客户端重新建立连接,客户端会一次把当前服务器端所有的信息取回。
  • Connection: Keep-Alive
  • ajax请求同一个域名,一次限制只能发送2个请求
  • http://www.infoq.com/cn/news/2008/12/websockets-vs-comet-ajaxhttp://www.ibm.com/developerworks/cn/web/wa-reverseajax2/http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/http://www.html5rocks.com/zh/tutorials/websockets/basics/
  • http://www.ibm.com/developerworks/cn/web/1307_chengfu_serversentevent/https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events
  • http://www.ibm.com/developerworks/cn/web/1307_chengfu_serversentevent/https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events
  • http://slides.html5rocks.com/#web-storage
  • http://slides.html5rocks.com/#web-storage
  • Html5及新特性

    1. 1. jhwang
    2. 2.  UI框架的进化  HTML5 解决的问题  HTML5 特性介绍  作业
    3. 3.  Win32  QT  Flex  WPF  HTML
    4. 4.  减少插件  增加本地文件访问  增加网络访问能力  Tag: video,aduio,canvas,webgl,localstorage,webs ocket,svg  其他:geolocation,drag&drop, semantics,webworker,webrtc,application cache
    5. 5.  使用JavaScript 在网页上绘制图像,基于像素 级。  Canvas2DAPI  基本线条、路径、插入图像、像素级操作、 文字、阴影、颜色渐变等提供图形绘制功 能。  Canvas能做的事  http://fabricjs.com/demos/
    6. 6.  可缩放矢量图形(ScalableVector Graphics,SVG)是基于可扩 展标记语言(XML),用于描述二维矢量图形的一种图形格 式。 SVG图形格式特点: 1.基于XML 2.采用文本来描述对象 3.具有交互性和动态性 4.完全支持DOM
    7. 7. 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
    8. 8.  传统实现实时通信:ajax轮循与其他两种 comet方法:ajax长轮循,长连接
    9. 9. 基于长轮询的服务器推模型
    10. 10.  基于 Iframe 及 htmlfile 的流(streaming)方式: 在 HTML 页面里嵌入一个隐蔵帧,然后将这个隐蔵帧的 SRC 属性设为对一个 长连接的请求,服务器端就能源源不断地往客户端输入数据。
    11. 11.  长轮询:客户端向服务器发送Ajax请求,服务器接到请 求后hold住连接,直到有新消息才返回响应信息并关闭 连接,客户端处理完响应信息后再向服务器发送新的请 求。 优点:在无消息的情况下不会频繁的请求。 缺点:服务器hold连接会消耗资源。 实例:WebQQ、Hi网页版、Facebook IM。  长连接:在页面里嵌入一个隐蔵iframe,将这个隐蔵 iframe的src属性设为对一个长连接的请求,服务器端就 能源源不断地往客户端输入数据。 优点:消息即时到达,不发无用请求。 缺点:服务器维护一个长连接会增加开销,浏览器支持 不统一. 实例:Gmail聊天
    12. 12.  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/
    13. 13. Client:
    14. 14. Server
    15. 15.  适用于简单服务器数据推送场景  单向  比websocket简单,比comet兼容性好  IE尚不支持
    16. 16. Web Storage HTML5 提供了两种在客户端存储数据的新方法: • localStorage - 没有时间限制的数据存储 • sessionStorage - 针对一个 session 的数据存储 和cookie相比优势: • 存储空间更大 • 存储内容不会发送到服务器 • 更多丰富易用的接口
    17. 17.  Web SQL Database
    18. 18.  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
    19. 19. 更新缓存的方式: • 更新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()
    20. 20.  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); };
    21. 21. 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
    22. 22. • getElementsByClassName • Selector API • document.querySelector() • document.querySelectorAll() • Traversal API • .nextElementSibling • .previousElementSibling • .firstElementChild • .lastElementChild • .children
    23. 23.  您能够创建圆角边框,向矩形添加阴影, 使用图片来绘制边框 ,更强大的背景控制, 文字阴影,指定字体,2D变转换,CSS动 画  http://www.w3school.com.cn/css3/
    24. 24.  阅读rfc645 协议  写一个或者网上下载一个server,client实现  (任何语言都可以)

    ×