15个加快编码在线的HTML5工具
Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them. They’ve tried to make things simple and fairly intuitive so you can unleash your creativity without any obstacles. Moqups is built on open standards, striving to provide the best experience within the browser, without compromise.
2. Stitches
Stitches is an HTML5 sprite sheet generator. Simple drag and drop image files into the space below and click “Generate” to create a sprite sheet and stylesheet. Stitches uses a couple of HTML5 APIs, and it is only currently compatible with the latest versions of Chrome and Firefox. However, it does not work on IE9. It required jQuery 1.7.1+, Modernizr, Dropfile, Flashcanvas for older browser support. It is licensed under MIT License.
3. HTML5 Maker
HTML5 Maker is an online animatio service/tool for creating animated, interactive content using HTML, HTML5, CSS and JavaScript. It’s very easy to use and at the same time it can help you achieving extremely good results. It allows producing cross-browser animated content such as javascript and html5 animation, Slideshows, Presentations and Sliders.
4. Initializr
Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!
4. Sprite Box
Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use.
5. Liveweave
Liveweave is a HTML5, CSS3 & JavaScript playground for web developers and designers. Liveweave has built-in context-sensitive auto-completion for HTML4/HTML5 and CSS2/CSS3, that makes life a lot easier.Just keep typing the HTML5 and CSS3 tags/elements you need. The ease of writing HTML5 and CSS3 will be like a dream!
6. Literally Canvas
Literally Canvas is an open source HTML5 widget, which can be integrated into any page, for enabling users to draw online. It comes with a simple set of tools including draw, erase, color-picker, undo, redo, pan and zoom. The widget is built with jQuery + Underscore.js and has an API to define the background color, tools and dimensions.
7. HTML5 Demos
HTML5 Demos will let you know instantly whether Firefox supports HTMl5 canvas or if Safari can run the HTML5 simple chat client or not.
8. HTML5 Visual Cheat Sheet
HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.
9. Switch to HTML5
Switch to HTML5 is a basic but efficient template generator. If you’re starting a new project, you should definitely visit this website and get your free HTML5 website template!
10. Online SVG to HTML5 Canvas Tool
This tool converts SVG into an HTML5 Canvas JavaScript function. It will work with any host, and I hope it helps people to experiment with Canvas. Most vector art packages (Illustrator, Inkscape etc) can export as SVG.
11. On/OFF FlipSwitch
12. HTML5 Test
The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn’t finalized yet, all major browser manufacturers are making sure their browser is ready for the future. Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers.
13. Patternizer
Patternizer is an easy to use stripe pattern generator
14. Lime JS
It is a HTML5 game framework for building games that’ll feel native and work fast in modern touchscreens and desktop browsers. LimeJS is created with Closure Library built by Google and comes with functions/classes to control the timeline, events, shapes and animations. Also, the framework has full support of sprite sheets (you can collect all images inside a single file).
15. HTML5 Reset
HTML5 Reset is a set of files (HTML, CSS, etc) designed to help users and saves time when for their new projects.