40 个能够节省开发时间的最好 HTML5 开发工具

jopen 10年前

40. Sketch Toy

This is one of the more simple tools listed in this particular article. This tool will allow you to create art using just your mouse. Think of is as Ms Paint.

39. MRI

MRI will allow you to test selectors and see if they work as you intended or not.

38. HTML5 Outliner

You can use this tool to see the structure of your HTML5 code online. There are two options to use this tool; one is to upload HTML5 document and the other is to load it from a URL.

37. HTML5 Audio Maker

WestCiv will help you make HTML5 audio. Instead of spending time coding it on the desktop, you can do so online saving a lot of your precious time.

36. HTML5 Please

This tool is quite handy when you are trying to find out HTML5 features and embed them into your web app project modules.

This is an ultra-lean set of HTML5, CSS, and jQuery files, layouts and elements. They are designed to give you a head start with whatever project you are working on saving your hours of precious time.

34. Patternizer

If you are looking to generate stripe patterns and save a lot of time while at it, you could use this tool to generate them for free.

33. Font Dragr

Looking to test custom fonts in the browser? Use this tool and you can do so without hassle and coding. Just drag and drop and the tool will take care of the rest.

32. CreateJS

This is a prime suite of JavaScript libraries and tools which you can use to build rich, interactive stuff with HTML5.

31. Sprite Box

This is a WYSIWYG tool. It is designed to help web developers quickly create CSS classes and IDs from a single sprite image. It was created using a combination of jQuery, CSS3, and HTML5 and is completely free to use.

30. Adobe Typekit

This is a cloud based service that offers a vast library of web safe fonts. If you are looking to add flair to your website designs, you may want to check this on out.

29. Online 3D Sketch Tool

This is an online drawing application. It lets you draw, replay what you draw, and share it with friends. You can use this online without the hassle of downloading it.

28. Liveweave

Liveweave is a CSS3, JavaScript and HTML5 playground for designers and developers familiar with these languages. Go ahead, try it out and let us know what you think.

27. The HTML5 Test

Does your browser support HTML5 or certain elements of that particular language? Are you curious to find out? Well, this tool will do just that for you.

26. Moqups

This is perhaps one of the better HTML5 applications to create high resolution, high fidelity SVG mockups and wireframes.

25. Stitches

This is a sprite sheet generator based on HTML5.

24. SproutCore

This is an open-source framework for building incredibly fast and innovative user experiences on the web. Try it out. It is really easy to use.

23. Zebra

This is rich JavaScript UI library for you to use.

22. Less Framework

Less Framework is something you would need for designing adaptive websites. This is a CSS grid system and it contains 4 layouts and 3 sets of typography presets for you to mess around with.

21. Webdirections

A fantastic library of tools and resources designed to work with Safari, FireFox, Opera, Chrome, Internet Explorer, iOS and Android.

20. Rendera

All you need to do is type in your HTML5 code and see it rendered in real-time. You can then style it with CSS. This tool will support all browsers.

19. CanvasLoader Creator

This is a free online tool which you can use to generate scripted pre-loaders for your HTML projects. This particular tool uses the CanvasLoader UI library.

18. On/Off Flipswitch HTML5/CSS3 Generator

If you are looking to generate On/Off flip switches with animated transitions using CSS3, this is the HTML5 tool for you.

17. Adobe Edge Animate

This is a premier HTML software unfortunately. It has integrated tools for creating cross-browser animation and other content.

16. Initializr

If you are looking to generate HTML5 templates, do give this tool a try. It will generate for you a clean customizable template which should get you started with everything much quicker.

15. LimeJS

This is a game framework and it is designed to build fast games for all the modern touchscreen systems and desktop browsers.

14. CreateM

This is a comprehensive web editing interface for Content Management Systems. This tool can be adapted to work on almost any content management backend.

13. 推ter Bootstrap

If you are looking for faster and easier web development try this tool which is sleek, intuitive and powerful.

12. Foundation

This is perhaps the most advanced of all the responsive front-end frameworks in the world.

11. Skeleton

If you are looking to rapidly develop websites that would look gorgeous on a big screen monitor or your iPhone, you can use Skeleton which basically is a small collection of CSS files.

10. Montage HTML5 Framework

If you are looking to build modern web application, this HTML5 framework should come in very handy.

9. Edge Code

This particular tool is by Adobe. It is very lightweight and can be used to edit CSS and HTML. It would also include previews while you work on your code. It can come in very handy when you looking for a quick edit.

8. Edge Inspect

This tool is also by Adobe. It is a workflow and preview tool for testing and simulating across multiple browsers.

7. Edge Webfonts

Another tool by Adobe which will provide access to a suite of free web fonts which you can immediately use in your websites.

6. PhoneGap Build

Yet another tool by Adobe only this one is cloud-based. It is a service for creating applications without downloading iPhone, BlackBerry or Android SDKs.

5. Html5 Video Voting

If you are looking to gather feedback on your videos, this tool will come in handy. All you need to do is click on the video and use the spacebar to submit your vote.

4. HTML5 Reset

Using this tool, a developer has a way of resetting the clock. It would allow the designers to take their older website design and re-write that design in HTML5.

3. Video.js

This is a JavaScript and CSS library. It would make it easier for you to work with and build on HTML5 video.

2. Mercury Editor

Mercury Editor is a full-featured HTML5 editor.

1. Maqetta

This is an open-source project that would provide WYSIWYG visual authoring of HTML5 user interfaces. The tool itself was written using HTML and would therefore run in any browser without any pre-requisites.