Your SlideShare is downloading. ×
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)

10,964
views

Published on

擁抱 HTML5 就趁現在

擁抱 HTML5 就趁現在

Published in: Technology

4 Comments
48 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,964
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
4
Likes
48
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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