網(wǎng)頁設(shè)計的優(yōu)秀助攻！20款不容錯過的HTML5工具

HTML5現(xiàn)在已經(jīng)成為最流行的標記語言，擁有成熟的社區(qū)和廣泛的瀏覽器支持，HTML5完備的功能和強大的拓展性使得設(shè)計師和開發(fā)者可以點鐵成金。更多的可控元素，更自由的交互設(shè)計，變化隨心的動效，豐富生動的多媒體都可以借助HTML5一手掌控。

更自由的搭建方式也意味著你需要掌控的東西更多，不過好在更多可能性還意味著更多的開發(fā)工具。下面推薦的20款開發(fā)工具能幫你更便捷地優(yōu)化你的網(wǎng)頁和Web應(yīng)用，希望你能在這個不長的列表中找到你需要的工具！祝你好運！

1. Enyo

Enyo是一個可以幫你創(chuàng)造高品質(zhì)本地HTML5應(yīng)用的框架，擁有跨平臺兼容性的強大工具。早期的Enyo是作為傳奇的移動操作系統(tǒng)webOS的程序框架而存在，在Palm被HP收購之后，Enyo開發(fā)團隊將其轉(zhuǎn)化為跨平臺支持的程序框架，此后強大的Enyo團隊隨后被Google收入囊中，而重建后的Enyo團隊則隨著HP的移動開發(fā)部門加入LG，目前的Enyo是LG的webOS智能電視的重要支撐。Enyo非常強大，值得深入研究，你將獲益匪淺。

2. Squire

Squire是一款HTML5 富文本編輯器，兼容不同瀏覽器的標準，輕巧靈活，讓你寫網(wǎng)頁如同寫文檔一般輕松任性！

3. NoMe

NoMe是一款能能被HTML5調(diào)用的JavaScript 地理和位置信息庫。有了NoMe，獲取地理和天氣信息你不再需要調(diào)用龐大的數(shù)據(jù)庫或者使用復(fù)雜的服務(wù)。

4. Snap Tomato

你可以在任何設(shè)備上輕松使用Snap Tomato來測試HTML5代碼。你只需要打開編輯器寫代碼，然后在另外一個標簽頁中實時預(yù)覽就好了。

5. BumpKit

BumpKit 是一個仍在開發(fā)中的DAW式的庫，是一組為網(wǎng)頁而寫的音頻API。你可以借助BumpKit來創(chuàng)建混頻器、采樣器等。

6. CoverVid

CoverVid是一個簡單的輕量級jQuery擴展，借助它，你可以將視頻當(dāng)作圖片背景一樣運用到你的網(wǎng)頁中，無論父元素是什么它都可以輕松插入并運用于其中。

7. Quintus

Quintus 是一款簡單易學(xué)的JavaScript HTML5游戲引擎，可以在移動端和桌面端使用。這個引擎可以徹底地搜集記錄數(shù)據(jù)，并且有大量的Demo和案例供你學(xué)習(xí)。

8. Wad

Wad是一款用來音頻操控的JavaScript庫，擁有針對HTML5音頻控制的API。Wad簡化了創(chuàng)建、播放、管理音頻文件的操作，并且擁有接近桌面端DAW的交互界面。

9. Flexo

Flexo 擁有一組標準的HTML元素并且包含一套柵格系統(tǒng)，但即便如此它還是非常夠用的。整個Flexo僅僅擁有大約200行CSS代碼，而且其中一半還是控制導(dǎo)航欄的。

10. Google Web Designer

Google Web Designer是今年Google專門為網(wǎng)頁開發(fā)者所發(fā)布的新工具，幫助設(shè)計師和開發(fā)者制作交互式的HTML5網(wǎng)頁和廣告。這是一個非常現(xiàn)代的所見即所得的恐懼，并不需要編寫代碼就可以實現(xiàn)功能，整個工具非常明顯地是以設(shè)計為導(dǎo)向的。(毫無疑問此處應(yīng)配備梯子)

11. Zebra

Zebra 使得開發(fā)基于Rich UI的Web應(yīng)用有了全新的可能性，它使得你可以在HTML5的畫布之上使用任何你能想到的UI元素。Zebra的開發(fā)過程非常接近軟件開發(fā)，你可以通過高度結(jié)構(gòu)化、可拓展性的、基于Zebra OOP 概念的代碼來管控整個界面。在這里，你不需要考慮HTML、JavaScrpt、CSS和DOM。Zebra是基于純粹的web技術(shù)的，無需安裝任何插件或者程序，與此同時，Zebra是基于強大而富有美感的JavaScript來編寫的。

12. Ceilfire

Ceilfire 是一個用來創(chuàng)HTML5游戲并共享游戲資源的平臺。你可以直接在你的瀏覽器中創(chuàng)建游戲、參與游戲、分享游戲，無需編程基礎(chǔ)！Ceilfire 平臺內(nèi)分享免費，上手操作也簡單。

13. Vega

Vega 是一種聲明格式，用來創(chuàng)建、保存、分享可視化設(shè)計。借助JSON將數(shù)據(jù)可視化，使用SVG和HTML5生成可交互式的頁面。

14. Cloak

如果你的HTML5需要一個網(wǎng)絡(luò)層來控制游戲連接、自動恢復(fù)的話，Cloak絕對符合你的需求。Cloak使用Node.js編寫，也為系統(tǒng)預(yù)留了空間。

15. Timesheet.js

Timesheet.js是一個簡單的JS庫，它可以幫你創(chuàng)建HTML表格。有了Timesheet.js，你可以創(chuàng)建包含HTML5和CSS3代碼的可視化的數(shù)據(jù)表格、管理事項或者時間表。使用Timesheet.js你無需考慮jQuery和Angular.js，單純幾行的JS代碼就可以幫你解決問題。

16. HAML

HAML是一種使用無需使用內(nèi)聯(lián)代碼來生成HTML等Web文檔的簡單干凈的標記語言，HAML主要用來替代目前的內(nèi)嵌網(wǎng)頁模板系統(tǒng)，諸如PHP、ASP和ERB，以及大多數(shù)的Ruby on Rails 應(yīng)用中的模板。HAML避免了直接用HTML來寫模板，因為它本身是對HTML代碼的一種描述，通過一些代碼來生成動態(tài)的內(nèi)容。

17. Brunch

Brunch 是一個構(gòu)建優(yōu)雅HTML5應(yīng)用的匯編程序，擁有簡單但功能強大的構(gòu)建功能和通道。你可以使用任何你喜歡的框架、庫、樣式、模板或者引擎與之配合使用。

18. HTML Minifier

HTML Minifier是一個高度可配置的、經(jīng)過充分測試的基于Javascript的HTML 壓縮機。它的核心倚賴于John Resig所寫的HTML解析器，John的解析器能夠處理非常復(fù)雜的文檔，不過偶爾會被一些模糊的聲明所迷惑。

19. Breach

Breach是一個為HTML5時代而生的瀏覽器，完全使用Javascript寫成，免費、模塊化、可再開發(fā)。瀏覽器中的所有東西的歐式一個模塊，作為一個Web APP在其內(nèi)部運行。選擇合適的模塊，你可以定制瀏覽體驗。

20. TimeJump

TimeJump 使得你可以為你的HTML5音頻和視頻播客添加一些深層連接，它常被用于一些突破性的播客，比如ShopTalk和The ATX這樣的網(wǎng)絡(luò)播客。

【幫你成為網(wǎng)頁設(shè)計小能手的優(yōu)質(zhì)資源】

響應(yīng)式網(wǎng)頁設(shè)計：
《步步為營！20款覆蓋全面的響應(yīng)式網(wǎng)站設(shè)計工具》

WORDPRESS & JOOMLA：
《將高大上進行到底！40款WORDPRESS和JOOMLA模板》

視差滾動這里看：
《最新的別放過！30個盡顯創(chuàng)意的視差滾動網(wǎng)站設(shè)計》

原文地址：codegeekz
優(yōu)設(shè)網(wǎng)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量88萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機上、被窩里獲取設(shè)計教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號：youshege