擁抱 HTML5 就趁現在

1. 1
HTML5 規格最新發展現況
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/
擁抱 HTML5 就趁現在

2. All services from your imperative.
2
HTML5 發展歷史
The history of HTML5

3. All services from your imperative.
3
2004 / WHAT 工作小組誕生
 WHATWG
Web Hypertext Application Technology Working Group
 推動網路 HTML 5 標準為目的而成立的組織
 WHATWG 成立的原因是 W3C 意圖放棄 HTML，而力圖發展
XML/XHTML 技術。
 工作小組的成員 (都是瀏覽器廠商)
 Opera, Mozilla Foundation, Apple
 歷史事件
 WHATWG 郵件列表公佈於 2004/6/4，在 Opera 與 Mozilla 宣布
加入後的 2 天，便否決了由 W3C 成員在W3C Workshop 的 Web
標準。

4. All services from your imperative.
4
2006 / W3C 宣布將與 WHATWG 合作
 W3C 力圖發展的 XHTML 大勢已去
 決定改與 WHATWG 合作發展 HTML 技術
 WHATWG 主力發展項目
 Web Forms 2.0
 逐步改善 HTML4.01 的表單特性
 Web Apps 1.0
 發展以 HTML 為主的應用程式特性
 Web Controls 1.0
 發展各種互動式 UI 介面

5. All services from your imperative.
5
2007 / 正式命名 "HTML5"
 2007/4/10
 Mozilla Foundation, Apple, Opera 聯手建議 W3C 的
HTML 工作小組採納 WHATWG 的 HTML5 規格，並將
該規格當成未來 HTML5 的發展起點。
 2007/5/9
 W3C 同意了這個建議
 http://lists.w3.org/Archives/Public/public-
html/2007May/0909.html

6. All services from your imperative.
6
2008 / 第一個公開的 HTML5 草案出爐
 2008/1/22
 第一個公開的 HTML5 草案出爐
 部分規格已經實作於部分瀏覽器
(P.S. 定制這份規格的成員都是瀏覽器廠商)
 Firefox 3 是當時第一位宣稱HTML5相容的瀏覽器
 Chrome, Safari 與最後 IE 也都加入行列
 Ian Hickson 為當時的文件編輯者
 重要觀念
 HTML5 是一個不斷修定的規格，甚至不會有所謂
「完成」的一天！

7. All services from your imperative.
7
2009 / W3C 宣告 XHTML 2.0 停止更新
 W3C 宣告 XHTML 2.0 停止更新
 FAQ about the future of XHTML
 包括以下文件：
 XHTML 2.0
 CURIE
 XFrames
 HLink
 XHTML+MathML+SVG Profile
 XHTML Modularization 1.0 Second Edition

8. All services from your imperative.
8
2010 / HTML5 大躍進
 YouTube 提供 HTML5 撥放器
 透過 TestTube 提供測試版 (TestTube)
 賈伯斯 (Jobs) 對外宣布放棄 Flash 支援
 "Flash was designed for PCs using mice, not for touch
screens using fingers." – Steve Jobs
 這讓許多人開始擁抱 HTML5 技術!
 知名電子書商 Scribd 轉往 HTML5 技術
 所有電子書改以 HTML5 為呈現技術
 更易於在平板上閱讀文件
 Chrome Web Store 正式開張
 完全以 HTML5 為主要開發技術

9. All services from your imperative.
9
2011 / 更多廠商加入 HTML5 陣營
 Disney (迪士尼)
 併購一家以 HTML5 技術為主的遊戲公司 [ News ]
 Pandora Internet Radio ( http://www.pandora.com/ )
 線上音樂公司，改採 HTML5 技術為其撥放器
 Amazon
 Kindle 電子書改用 HTML5 技術
 Twitter
 其 iPad 版本改用 HTML5 為主
 Alexa Top100 網站中有 34% 使用 HTML5
 Adobe 宣布在行動裝置上的 Flash 不再更新

10. All services from your imperative.
10
2012 / 更多網站使用 HTML5 技術
 Flickr
 改用 HTML5 為照片上傳機制 (含大檔上傳)
 LinkedIn
 其 iPad 版本改用 HTML5 為主
 Wix.com
 2012 六月發佈 HTML5 網站產生器
 發佈 90 天後建立超過一百萬個 HTML5 網站

11. All services from your imperative.
11
2013 / 更廣泛的佈署 HTML5
 HTML5 更加普及
 "HTML5 Popularity Among Fortune 500 Companies"
-- INCORE. Retrieved 5 August 2013.
 美國財星 500 大企業中已有 153 家採用 HTML5 技術
 HTML 5.0 規格將有大幅進展
 今年已將規格狀態變更為：Call for Review
 驚人的行動力
 今年初統計，全球已賣出超過 10 億支支援 HTML5
瀏覽器的智慧型手機。

12. All services from your imperative.
12
HTML5 發展現況
The status of HTML5

13. All services from your imperative.
13
推出 HTML 5.0 正式版
 Plan 2014
http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
 W3C CEO 要求在 2014 年底前將 HTML 5.0 變
更為 REC (推薦版本) 狀態。
 里程碑規劃
 CR: 2012 Q4 (移除不穩定的HTML5功能)
 LCf: 2014 Q3 (最終版本確定)
 PR: 2014 Q4 (提交推薦版本)
 Rec: 2014 Q4 (正式公告推薦版本)

14. All services from your imperative.
14
HTML5 規格發展準則
 永不停歇的發展規格
 由工作小組成員提交草案
 由各家瀏覽器選擇性進行實作與實驗
 發布正式規格的準則
 有哪些瀏覽器已經實作哪些功能
 每個功能特性的穩定性如何
 每個功能之間的交互性是否可靠
 新增功能有哪些潛在的風險

15. All services from your imperative.
15
HTML 5.0, HTML 5.1, HTML 5.2, …
 HTML5 的發展計畫
http://en.wikipedia.org/wiki/HTML5#Plan_2014

16. All services from your imperative.
16
HTML 5 有哪些可用的技術
Which features can I use in the HTML5?

17. All services from your imperative.
17
HTML5 包括哪些內容？
標籤 + APIs
CSS 3

18. All services from your imperative.
18
HTML5 語意標籤

19. All services from your imperative.
19
HTML5 語意標籤

20. All services from your imperative.
20
HTML5 標籤
 非語意標籤
 <div>
 <span>
 被 CSS 取代的標籤
 <basefont>
 <font>
 <big>
 <center>
 <strike>
 <tt>
 語意標籤
 <header>
 <footer>
 <nav>
 <article>
 <aside>
 <section>
 <hgroup>
 <figure>
 <figcaption>

21. All services from your imperative.
21
HTML5 APIs 與相關技術

22. All services from your imperative.
22
HTML4 vs HTML5 新舊技術比較表
網頁性能 使用外掛的技術 對應於 W3C 的技術 (HTML5)
影音功能
Flash,
Apple QuickTime,
Silverlight
HTML5 video,
HTML5 audio
繪圖功能
Flash,
Apple QuickTime,
Silverlight,
Java applets
HTML5 canvas ,
Scalable Vector Graphics (SVG),
WebGL,
離線儲存
Flash,
Java applets,
Google Gears
Web storage,
File API,
IndexedDB,
AppCache API
網路通訊,
資源共享,
檔案上傳
Flash,
Java applets
HTML5 Web Messaging , WebRTC,
Cross-origin resource sharing (CORS)

23. All services from your imperative.
23
影音功能：<video>
 示範
 http://html5demos.com/video
 全螢幕撥放 ( Fullscreen API / 支援度 )
 影音同步示範
 http://html5demos.com/two-videos
 控制 playbackRate 與 currentTime 屬性

24. All services from your imperative.
24
影音功能：<audio>
 示範
 http://www.apple.com/html5/showcase/audio
 支援度 / audio · WebPlatform.org

25. All services from your imperative.
25
繪圖功能：<canvas>
 示範
 模擬撕裂衣服的效果
 三萬片顆粒顯示在螢幕上
 模擬光線的散射效果
 HTML5 遊戲: Canvas Rider
 Z-Type
 video 與 canvas 互動
 http://html5demos.com/video-canvas
 http://www.craftymind.com/factory/html5vide
o/CanvasVideo.html

26. All services from your imperative.
26
繪圖功能：SVG
 示範
 vlog.it
 SVG Demo | Demo Studio | MDN

27. All services from your imperative.
27
繪圖功能：WebGL ( 3D )
 示範
 visualEYEzer
 Interactive Globe: Small Arms Imports & Exports
 Lights | Ellie Goulding
 Cube – a game about Google Maps
 HelloRun ( Canvas 2D/3D + WebGL )
 與 WebCam 搭配運用
 WebCamMesh
 Pixelate
 Optic Flow

28. All services from your imperative.
28
HTML5 綜合示範：WebRTC + reveal.js + CSS 3D 轉換
 Gestures + Reveal.JS (Link)
 http://revealjs.herokuapp.com/

29. All services from your imperative.
29
More demos
 Dev Derby | MDN
 https://developer.mozilla.org/en-US/demos/devderby
 HTML 5 Demos and Examples
 http://html5demos.com

30. All services from your imperative.
30
HTML 5 有哪些需關注的議題
pay attention to the issues

31. All services from your imperative.
31
瀏覽器相容性
 瀏覽器相容性
 使用 Modernizr
 使用 Polyfills 技術
 無縫提升舊版瀏覽器對 HTML5 的支援能力
 IETester
 http://my-debugbar.com/wiki/IETester/HomePage

32. All services from your imperative.
32
HTML5 開發工具支援
 瀏覽器
 使用瀏覽器內建的開發者工具
 Chrome, IE, Firefox, Safari, …
 設計工具
 Adobe Edge
 Microsoft Expression Web
 Google Web Designer

33. All services from your imperative.
33
HTML5 測試工具
 The HTML5 test
 http://html5test.com/
 Acid3
 http://acid3.acidtests.org
 modern.IE
 http://www.modern.ie/zh-tw

34. All services from your imperative.
34
瀏覽器相容性 / HTML5 支援度
 Can I use
Support tables for HTML5, CSS3, etc
 http://CanIuse.com
 Mobile HTML5 compatibility
on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile
devices
 http://mobilehtml5.org
 Internet Explorer Testing Center
 http://samples.msdn.microsoft.com/ietestcenter/

35. All services from your imperative.
35
結語
Summary

36. All services from your imperative.
36
總結
 HTML5 持續發展中，不會停止
 HTML5 發展計畫每兩年一個週期
 應當全面了解 HTML5 的能力與限制
 關注你所使用的 HTML5 技術，而非整體發展

37. All services from your imperative.
37
聯絡資訊
 The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
 http://blog.miniasp.com/
 Will 保哥的技術交流中心 (臉書粉絲專頁)
 http://www.facebook.com/will.fans
 ★ ★ ★ Will 保哥的噗浪 ★ ★ ★
 http://www.plurk.com/willh/invite