Web 開發人員必備的經典 HTML5 教程

　　對於我來說，Web 前端開發是最酷的職業之一，因為你可以用新的技術發揮，創造出一些驚人的東西。唯一的問題是，你需要跟上這個領域的發展指令碼，因此，你必須不斷的學習，不斷的前進。本文將分享能夠幫助您快速掌握 HTML5 的例項教程，值得好好學習。

　　Measuring Page Load Speed with Navigation Timing

　　Navigation Timing 是用於精確測量網站效能的 JavaScript API。該 API 提供一種簡單的方式來獲得準確，詳細的時序統計，頁面導航和負載事件。它可現在能夠在Internet Explorer 9，谷歌 Chrome 和 Firefox 中使用。本文介紹了該 API 以及如何利用它暴露時間資料。

　　Multi-touch Web Development

　　移動裝置如智慧手機和平板電腦通常有一個電容式觸控式螢幕，以捕捉使用者的手指動作。隨著移動網際網路的發展，應用程式越來越複雜，Web 開發人員需要一種方法來處理這​​些事件。例如，幾乎所有的快節奏的遊戲需要玩家一次按下多個按鈕，這在觸控式螢幕的背景下，意味著多點觸控。

　　在這篇文章中深入介紹了 iOS 和 Android 裝置提供的觸控事件 API，探索什麼樣的應用程式你可以建立並提出了一些最佳實踐，使人們更容易開發觸控功能的應用程式。

　　Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

　　在本教程中，您將學習如何將一個 HTML 列表轉換為牆上的“即時貼”，效果就像下面圖片展示的那樣。

　　Writing Augmented Reality Applications using JSARToolKit

　　這篇文章是關於使用 JSARToolKit 庫與 WebRTC getUserMedia API 在網路上做擴增實境的應用程式。本文的最終結果是把一個三維模型上的擴增實境標記在網路攝像頭視訊之上。

　　Native HTML5 Drag and Drop

　　多年來，我們一直在使用像 jQuery、YUI 和 Dojo 等 JavaScript 庫來簡化複雜的 UI 元素，例如動畫，圓角和拖放等。拖放（DND）在 HTML5 中是一等公民！該規範定義了一個基於事件機制的 JavaScript API，幫助你建立更強大的拖放功能。

　　Quick guide to webfonts via @font-face

　　來自 CSS3 的 @font-face 功能使我們能夠以一種可訪問的，可操作和易擴充套件的方式在網頁上使用自定義的字型。但是，你可能會說，“我們為什麼要使用@font-face，如果我們有 Cufon，sIFR 技術以及在影象中使用文字？”

　　Perfectly Positioned Plusses

　　你曾見過縮圖，當滑鼠懸停的時候，露出中間的圖示來提示什麼是即將發生的事情？有沒有想過如何s實現這個效果？或者曾經試過，但沒能讓圖示完全居中，尤其是當你的縮圖不是固定尺寸的時候？看看這個快速提示。

　　A Beginner’s Guide to Using the Application Cache

　　應用程式快取（或 AppCache）允許開發人員指定哪些檔案瀏覽器應快取並提供給離線使用者。您的應用程式將載入並正常工作，即使使用者離線的時候按下重新整理按鈕。

　　CSS3 Transitions And Transforms From Scratch

　　網上有很多 CSS 轉換和過渡效果的驚人的例子。本教程將帶您回到最基礎的。我們要建立一些基本的 CSS3 過渡性的動作，一步一步來。

　　Best Practices for a Faster Web App with HTML5

　　多年以來，Cookie 都被用於跟蹤唯一使用者資料，它最大的缺陷就是所有的 Cookie 資料被新增到每個 HTTP 請求頭。這可以對於頁面的響應時間產生重要影響，尤其是在使用 XHR 的時候。所以，最好的做法就是減少 Cookie 的大小。

　　在 HTML5 中，我們可以做的比這更好：使用 sessionStorage 和 localStorage 代替 Cookie。這兩個網路儲存物件可以用來把使用者的資料儲存在客戶端，它們的資料不通過 HTTP 請求傳送到伺服器。

　　Creating a Mobile-First Responsive Web Design

　　在這個教程中，我們將演練如何建立自適應的網路體驗，學習把網頁設計為移動優先的方法。

　　Improving HTML5 Canvas Performance

　　HTML5 畫布功能，開始於蘋果的一個實驗，如今成為支援最廣泛的網頁 2D 圖形標準。許多開發商都依賴於它來實現各種各樣的多媒體專案、視覺化和遊戲。然而，由於我們建立的應用程式複雜性不斷增加，開發人員無意中碰到了效能瓶頸。

　　Capturing Audio & Video in HTML5

　　HTML5 的興起讓 Web 訪問硬體裝置成為了可能。地理定位（GPS）的定位，方位 API（加速度計），WebGL（GPU），以及網路音訊API（音訊硬體）都是完美的例子。本教程介紹了一個新的 API：navigator.getUserMedia()，它允許網路應用程式訪問使用者的攝像頭和麥克風。

　　Menu Notification Badges Using HTML5 Data-Attributes

　　在本文中，您將看到如果事業多種方式來實現徽章的效果，包括使用你可能不熟悉 HTML5 的資料屬性。