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是一款所見即所得的工具,幫助Web設計師快速、輕鬆構建CSS類及IDs。它是基於使用背景位置屬性來調整影象區域,從而形成Web頁面的模組元素。該產品是使用JQuery、CSS3和HTML5組合建立而來,完全免費。
6. Liveweave
Liveweave在HTML4/HTML5、CSS2/CSS3中含有內建的自動完成上下文特性,讓你工作起來更加輕鬆。你只需輸入HTML5和CSS3 標籤/元素即可,就是這麼簡單。
Literally Canvas是一款開源的HTML5元件,可整合到任何頁面,使用者可線上進行繪製。它配備了一套簡單的工具,包括繪圖、擦除、顏色選擇器、撤銷、恢復、平移以及縮放。該工具利用jQuery+和Underscore.js建立而來,利用API定義背景色、工具以及尺寸。
8. HTML5 Demos
HTML5 Demos能夠讓你立即知道Firefox是否支援HTML5 Canvas,Safari能否執行HTML5 聊天客戶端。
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)。
13. HTML5 Test
利用HTML5 test可以測試你的瀏覽器支援即將推出HTML5 標準和相關規範的得分情況。儘管該規範還沒有最終敲定,但是所有主流瀏覽器廠商都在為未來做好準備。
你可以檢視瀏覽器支援HTML5 哪些部分並與其他瀏覽器進行對比。
14. Patternizer
Patternizer是用來建立條紋圖案的生成器。
15. Lime JS
這是一款HTML5遊戲框架用於建立遊戲,讓你輕鬆體驗在現代觸控式螢幕和桌面瀏覽器上的速度。
LimeJS是由谷歌的Closure Library建立而來。其自帶的功能/類可控制時間軸、時間、形狀以及動畫。此外,該框架完全支援圖表功能(你可以在單獨的檔案中收集影象)。
16. HTML5 Reset
HTML5 Reset是(HTML,CSS等)一套設計元件,旨在幫助使用者節省大量的時間,建立更加高效的專案。
英文出自: Codegeekz
相關文章
- 加速編碼的17款最棒的CSS工具CSS
- 10個簡化HTML5編碼的線上工具HTML
- 加速編碼的 JavaScript 庫和工具JavaScript
- 值得Web開發人員收藏的16款HTML5工具WebHTML
- 18款線上程式碼片段測試工具
- 加速Web開發的9款知名HTML5框架WebHTML框架
- 十款好用的線上 CSS3 程式碼生成工具CSSS3
- 谷歌開發者工具線上編輯HTML程式碼谷歌HTML
- 16個實用的線上工具
- 12款強大的 HTML5 繪圖工具HTML繪圖
- 10款最佳HTML5繪圖工具HTML繪圖
- 11款有用的Web開發線上工具Web
- 3款線上表格工具推薦
- 線上調查八款必備工具
- 40款加速網站開發的 CSS 開發工具網站CSS
- 41款加速網站開發的 CSS 開發工具網站CSS
- 工具推薦:兩款很棒的 HTML5 遊戲開發工具HTML遊戲開發
- 10款優秀的線上格式轉換工具
- 10個免費的HTML線上編輯工具HTML
- 推薦幾款火爆的Python線上編輯器Python
- 推薦一款採用 .NET 編寫的 反編譯到原始碼工具 Reko編譯原始碼
- TS線上編譯ES5工具編譯
- 如何製作一款線上編譯器編譯
- 分享5款非常實用的黑科技線上工具
- 我開發的一款PHP線上除錯工具PHP除錯
- 推薦10款免費的線上UI測試工具UI
- 10個最好用的線上編譯/除錯工具編譯除錯
- 推薦10款非常優秀的HTML5開發工具HTML
- 分享一款可編輯本地電腦檔案的線上編輯器
- 推薦一款線上工具-程式設計師的工具箱程式設計師
- 二維碼線上生成工具
- 程式碼線上美化工具
- apk decompile 線上反編譯工具-toolfk程式設計師線上工具網APKCompile編譯程式設計師
- 五款提高工作效率的線上工具【神器】
- 10款方便的線上檔案格式轉換工具網站網站
- [.NET開發者的福音]一個方便易用的線上.NET程式碼編輯工具.NET Fiddle
- 程式碼線上編譯器(上)- 編輯及編譯編譯
- 想要把程式碼片段轉成圖片?試試這幾款線上工具