HTML5新手入門指南

評論
評論

HTML5 的發展越來越邁向成熟,很多的應用已經逐漸出現在你我日常生活中了,不只讓傳統網站上的互動 Flash 逐漸的被 HTML5 的技術取代,更重要的是可以透過 HTML5 的技術來開發跨平台的手機軟體,讓許多開發者感到十分的興奮!

當你開始想要學習、試圖想要投入相關的開發時,由於 HTML5 的技術還在持續發展、進化當中,學習的資源也都比較零散,較難有一個整體的方向。在本篇文章中,筆者將會導覽 HTML5 的主要技術組成,並且提供一些學習資源讓大家參考。

HTML5 到底是什麼?

一般廣義而言的 HTML5 則包含了 HTML、CSS 和 JavaScript 三個部分,不單單只是 HTML 部分而已,CSS 3 和 JavaScript 也有許多的創新,讓整個網頁程式功能更加繽紛。

HTML5 的技術組成

離線功能

HTML5 透過 JavaScript 提供了數種不同的離線儲存功能,相對於傳統的 Cookie 而言有更好的彈性以及架構,並且可以儲存更多的內容。

  • WebStorage -- 比 Cookies 更大、更有彈性的的儲存
  • Web SQL Database -- 本地端的 SQL 資料庫
  • Indexed DB -- Key-value 的本地資料庫
  • Application Cache -- 將部分常用的網頁內容 cache 起來

即時通訊

以往網站由於 HTTP 協定以及瀏覽器的設計,即時的互動性相當的受限,只能使用一些技巧來「模擬」即時的通訊效果,但 HTML5 提供了完善的即時通訊支援。

  • WebSocket -- 即時的 socket 連線
  • Web Workers -- 以往 JavaScript 都是 single thread,透過 Worker 可以有多個運算
  • Notifications -- 原生的提示訊息,類似像 OS X 的 Growl 提示

檔案以及硬體支援

不知道大家有沒有發現,在 Gmail 等新的網頁程式當中,已經可以透過拖拉的方式將檔案作為郵件附件?這就是這部份 HTML5 檔案的功能中的 Drag'n Drop 和 File API。

  • Drag'n Drop -- HTML 元素的拖拉
  • File API -- 讀取使用者本機電腦的內容
  • Geolocation -- 地理定位
  • Device orientation -- 手持裝置的方向
  • Speech input -- 語音輸入

語意化

語意化的網路是可以讓電腦能夠更加理解網頁的內容,對於像是搜尋引擎的優化(SEO)或是推薦系統可以有很大的幫助。

  • New tags -- 新的標籤,像是<header>、<section> 等
  • Application tags -- 也是新的標籤,像是<meter>、<progress> 等
  • Microdata -- 加入語意的資料讓搜尋引擎等網站可以正確顯示
  • Form type -- <form> 可以加入的 type 便多了,包含 email 和 tel 等屬性,瀏覽器會協助進行資料格式的驗證

多媒體

Audio、Video 的標籤支援以及 Canvas 的功能應該是大家對於 HTML5 最熟悉的部份了,也是許多人認為 Flash 會被取代的主要原因。先前 Inside 有一些相關的技術展示可以參考(如何使用 HTML5 的影片播放?HTML5 火力展示!九個讓你驚奇的 HTML5 應用)。

  • Audio video -- 影片和音樂的原生播放支援
  • Canvas -- 2D 的繪圖功能支援
  • Canvas 3D -- 3D 的繪圖功能支援
  • SVG -- 向量圖支援

CSS 3

CSS3 支援了字體的嵌入、版面的排版,以及最令人印象深刻的動畫功能。

  • Selector -- 更有彈性的選擇器
  • Webfonts -- 嵌入式字體
  • Layout -- 多樣化的排版選擇
  • Stlying radius gradient shadow -- 圓角、漸層、陰影
  • Border background -- 邊框的背景支援
  • Transition -- 元件的移動效果
  • Transform -- 元件的變形效果
  • Animation -- 將移動和變形加入動畫支援

JavaScript

在比較 JavaScript 的基本面也新增了 DOM 的 API、和瀏覽器上下頁的紀錄修改。

  • DOM API -- 更方便的查詢 DOM 元件
  • History API -- 瀏覽器的上下頁內容修改,方便 AJAX 可以保留瀏覽記錄

現在就開始用 HTML5

截至目前而言,主流的網頁瀏覽器 Firefox 5、Chrome 12 和 Safari 5 都已經支援了許多的 HTML5 標準,而且目前最新版的 IE 9 也支援了許多 HTML5 標準,隨著使用者陸續升級到新版的瀏覽器,開發者應該在現在就可以著手開發!

而對於舊的瀏覽器相容性而言,先前 Inside 曾經撰文介紹過的 CSS3 Pie 便是一個讓舊版瀏覽器也能支援 CSS 3 功能的 JavaScript 函式庫。

Modernizer 也是一個相當重要的 JavaScript 函式庫,提供開發者輕鬆的方式判別目前使用者的瀏覽器是否有支援特定的 HTML5 功能。

學習的方向

在看完本篇文章之後,大家或許可以針對自己有興趣的方面透過關鍵字搜尋去尋找相關的學習資源以及內容。

Google 的 HTML5Rocks 網站 也是我相當推薦的,其中的透過 HTML5 開發的 HTML5 介紹投影片 更是值得一看,可以將上述的內容都實際試玩(推薦使用 Chrome 瀏覽器以獲得完整的功能效果)。


精選熱門好工作

Partnership Manager

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$20,000

Campaign Associate 線上活動策劃專員

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$20,000

iOS 工程師

FunNow
臺北市.台灣

獎勵 NT$20,000

評論