16款加速編碼的HTML5線上工具

HTML5是目前最為流行的語言之一，大受開發人員和設計師們的青睞。HTML5有許多屬性，包括支援現代主流瀏覽器（Firefox 6、Google Chrome、IE9等）、特定結構標籤、視覺元素比如內建的圓角元素，拖拽、新的視頻、音頻以及Canvas元素等等。

在這篇文章中我們收集了16款HTML5線上工具，以簡化並加快您的編碼速度。

1.  Mockups 

 

Moqups是一款完美的HTML5 App，用於建立線框、模型或UI、原型。有了它讓工作變得更簡單且直觀，因此，你可以充分發揮自己的創造力，無任何障礙。 

2.  Stitches

Stitches一款HTML5版網頁產生器。你只需簡單拖放圖片檔案至頁面空白處並點擊 “Generate” 即可建立出一款簡單的樣式列表。Stitches使用一組HTML5 API，它是目前唯一一款相容Chrome和Firefox最新版本的應用，暫不支援IE9。對於老版本的瀏覽器，需要安裝jQuery 1.7.1+、Modernizr、Dropfile、Flashcanvas。該產品基於MIT許可證發行。

3.  HTML5 Maker

HTML5 Maker是一款線上的動畫裝置/工具，利用HTML、HTML5、CSS及JavaScript建立互動內容。它不僅簡潔易用 ，還能協助你實現非常好的效果。支援跨瀏覽器的動畫內容包括JavaScript和HTML5動畫、投影片、簡報及投影片。

4.  Initializr 

Initializr是一款HTML5版的模板產生器。這是一款完全可定製的模板！ 

5.  Sprite Box 

Spritebox是一款所見即所得 (WYSIWYG)的工具，協助Web設計師快速、輕鬆構建CSS類及IDs。它是基於使用背景位置屬性來調整映像地區，從而形成Web頁面的模組元素。該產品是使用JQuery、CSS3和HTML5組合建立而來，完全免費。 

6. Liveweave

Liveweave在HTML4/HTML5、CSS2/CSS3中含有內建的自動完成上下文特性，讓你工作起來更加輕鬆。你只需輸入HTML5和CSS3 標籤/元素即可，就是這麼簡單。 

7. Literally Canvas

Literally Canvas是一款開源的HTML5組件，可整合到任何頁面，使用者可線上進行繪製。它配備了一套簡單的工具，包括繪圖、擦除、顏色選取器、撤銷、恢複、平移以及縮放。該工具利用jQuery+和Underscore.js建立而來，利用API定義背景色、工具以及尺寸。 

8. HTML5 Demos

HTML5 Demos能夠讓你立即知道Firefox是否支援HTML5 Canvas，Safari能否運行HTML5 聊天用戶端。 

9.  HTML5 Visual Cheat Sheet

HTML5 Visual Cheat Sheet是專為Web設計師和開發人員設計的一款速查表。這份速查表包含了HTML tag列表以及支援HTML4.01/5版本的相關屬性。

10. Switch to HTML5

Switch to HTML5是一款基本的且又高效的模板產生器。如果你想啟動某個新項目，記住一定要訪問該網站。各種各樣的HTML5網站模板將會呈現在你的眼前。 

11.  Online SVG to HTML5 Canvas Tool

這款工具可以將SVG轉換成HTML5 Canvas JavaScript函數。它幾乎可以運行在任何主機上，協助使用者去嘗試使用Canvas，可以匯出大量的向量藝術包（Illustrator，Inkscape）。

12. On/OFF FlipSwitch

13.  HTML5 Test

利用HTML5 test可以測試你的瀏覽器支援即將推出HTML5 標準和相關規範的得分情況。儘管該規範還沒有最終敲定，但是所有主流瀏覽器廠商都在為未來做好準備。

你可以查看瀏覽器支援HTML5 哪些部分並與其他瀏覽器進行對比。

14.  Patternizer

Patternizer是用來建立條紋圖案的產生器。 

15. Lime JS

這是一款HTML5遊戲架構用於建立遊戲，讓你輕鬆體驗在現代觸控螢幕和案頭瀏覽器上的速度。

LimeJS是由Google的Closure Library建立而來。其內建的功能/類可控制時間軸、時間、形狀以及動畫。此外，該架構完全支援圖表功能（你可以在單獨的檔案中收集映像）。

16. HTML5 Reset

HTML5 Reset是（HTML，CSS等）一套設計組件，旨在協助使用者節省大量的時間，建立更加高效的項目。

英文出自： Codegeekz