12个适合开发人员和设计人员最好的便利HTML5工具

HTML would never go extinct and the recent HTML5 is one stunning example. It is the best platform for creating web animations, is giving a tough time to conventional Smartphone app building platforms and is open source. Developers and designers have admitted their dependency on the plethora of HTML5 tools that make the development faster, safer and cheaper. Subsequently, the web ocean is being fed with hundreds of HTML5 websites every day. While there is no end to the count of reliable HTML5 tools, I could pick few of them.

SpriteBox

Available for free (like most HTML5 tools) Spritebox helps in the quick creation of classes and Ids from a single Sprite message. Logically, the background positioning attributes of a Sprite image are used to align the areas of image into block elements of a web page. A combination of JQuery, HTML5 and CSS3 were used to create this app.

HTML5 Please

Type in any HTML5 feature in the search box and know everything about its back end details such as whether or not it is compatible with a specific web browser. Highly interactive, the smart search returns results for every item concisely.

Literally Canvas

It is an open source widget that helps users to draw online. It has a set of all necessary functions such as draw, erasing, select color, redo, undo, zoom and pan. It can be integrated into any page easily and is built with JQuery + Underscore.js combination.

Rendera

Coders will love it. Rendera shows a kind of preview for an experimented code in Javascript, HTML or CSS. This helps you test and explore with different set of codes and evaluate their output. It displays real time output in a separate window on the right side with the code on the left.

Adobe Typekit

Adobe Typekit is a stunning tool that helps you try different fonts for the text and preview them simultaneously. Selecting the most appropriate font becomes easier with a rich collection of different styles and sufficient tools to modify such as Bold and Italic, increasing and decreasing the Font size.

Percentage Loader

It is a JQuery plugin that displays a loading feature on the page. It appears circular with the progress appearing with increase in the color of the ring and the percentage in the centre. It is a lightweight app (10 kbs approx.) and can be easily dragged and dropped. And yes, multiple instances can be displayed at the same time on the same page.

Native Form elements

HTML5 forms behave in different ways with different web browsers. To streamline the differences and act accordingly, Native form elements help you test them easily and identify the disabled states.

Upload Centre

Now users can quickly upload their photos directly by simply dragging and dropping onto the browser window. It discounts on a large piece of code to achieve the functionality and thus caters for accelerated development. It is a backed by a combination of AJAX, Drag &Drop API, File Reader API.

XRAY tool

Just like a X-Ray machine, this tool extracts out the details of all the elements on the web page. And that too with a simple click of a button. Just drag the bookmarklet on a website into your own browser bookmarks. Select the webpage and Xray bookmark to analyse that page. You can view individual details of the elements. A must have tool for beginners who wish to refer other websites and learn.

Automatoon

It was one of the front runners that has swept away Flash from the Animation business. Purely HTML5, Automatoon ensures your web page animations play equally fine on mobile phones, tabs and other digital devices. Plus, it embeds well with all web browsers!

HTML5 Audio Maker Tool

The next big thing we would witness can be the popular use of Audio features on Web pages. With the inclusion of an Audio tag, the highly anticipated trend will conquer. Audio Maker tool utilizes the most of this competency and makes integrating an Audio file quickly and efficiently.

HTML5 Sortable

Another cool functionality that helps create faster sorted lists, grids and others. It provides similar API as provided by JQuery. While it works in all major browsers, it effectively uses the Drag and Drop API from native HTML5.