HTML5 Tools and Applications
HTML has been the language which has powered content on the world wide web since the inception of the web itself. It has been the language which has created some stunningly awesome websites. Over the past two years, HTML5 has rightfully gained much recognition and popularity within the portals of cyberspace and improving the methods of its predecessor [ HTML ].
HTML5 has brought about several important changes to the internet within the way websites are being built. HTML5 is now the fifth revision of the HTML Standard which was created in the early 1990′s when the world wide web was first created. The HTML5 syntax is no longer based on SGML despite the similarity of its markup. It has, however, been designed to be backward compatible with common parsing of older versions of HTML.
Types of HTML5 Editors
At present, HTML5 editors are available in two variations: browser based and standalone applications. There truly is no editor which is better than the other, as they have equal pros and cons and their use mainly depends on the individual requirements of the developer. Browser based applications are compatible with all popular browsers and typically require an internet connection to work.
Text (source) editors intended for use with HTML usually provide syntax highlighting. Templates, toolbars and keyboard shortcuts may quickly insert common HTML elements and structures. Wizards, tooltip prompts and autocompletion may help with common tasks.
Text HTML editors commonly include either built-in functions or integration with external tools for such tasks as source and version control, link-checking, code checking and validation, code cleanup and formatting, spell-checking, uploading by FTP or WebDAV, and structuring as a project.
Some editors allow alternate editing of the source text of objects in more visually organized modes than simple color highlighting, but in modes not considered WYSIWYG. Some WYSIWYG editors include the option of using palette windows that enable editing the text-based parameters of selected objects. These palettes allow either editing parameters in fields for each individual parameter, or text windows to edit the full group of source text for the selected object.
WYSIWYG HTML editors provide an editing interface which resembles how the page will be displayed in a web browser. These editors may be stand-alone programs, such as Adobe Dreamweaver or Microsoft Frontpage, or come in the form of browser extensions and allow editing directly within the web browser. Because using a WYSIWYG editor may not require any HTML knowledge, they are often easier for an average computer user to get started with.
The WYSIWYG view is achieved by embedding a layout engine based upon that used in a web browser. The layout engine will have been considerably enhanced by the editor’s developers to allow for typing, pasting, deleting and manipulation of the content.
However a web page is created or edited, WYSIWYG or by hand, in order for it to be successful among the greatest possible number of readers and viewers, as well as to maintain the ‘worldwide‘ value of the Web itself, first and foremost it should consist of valid markup and code. Whatever software tools are used to design, create and maintain web pages, the quality of the underlying HTML & HTML5 are solely dependent upon the skills of the person who works on the page.
Below are 8 Useful HTML 5 Editors & 14 HTML 5 App Tools
1. LeanBack Player : HTML5 Video Player with Subtitle Support
[zilla_button url=”http://leanbackplayer.com/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
[zilla_button url=”http://www.speakker.com/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
3. Stitches : HTML5 Sprite Sheet Generator
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.
[zilla_button url=”http://draeton.github.com/stitches/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
4. Pdf.js : HTML5 Portable Document Format Renderer
PDF.js is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance. Pdf.js is community-driven and supported by Mozilla Labs.
The goal here was, to create a general-purpose, web standards-based platform for parsing and rendering PDFs, and eventually release a PDF reader extension powered by pdf.js. Integration with Firefox is a possibility if the experiment proves successful.
[zilla_button url=”https://github.com/mozilla/pdf.js” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
5. Moqups : HTML5 App for Creating Mockups and Wireframes
Moqups is an HTML5 App which is used to create wireframes, mockups or UI concepts, prototypes depending on how you like to define 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.
[zilla_button url=”https://moqups.com/#!/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
6. HTML5 Reset v 2.0 Website Templates
HTML5 Reset is a simple set of best practices to get web projects off on the right foot. It includes a style sheet designed to strip initial files from browsers, Analytics and jQuery snippets in place, Meta tags ready for population, Empty mobile and print style sheets, IE-specific classes for simple CSS-targeting, iPhone/iPad/iTouch icon snippets and lots of other keen stuff.
[zilla_button url=”http://html5reset.org/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
7. HTML5 Video Voting & Popular Bar Graph in Timeline
HTML5 Video Voting allows you to gather feedback on your videos. Voting is exquisitely simple. All you do is click on the video and use the spacebar to submit your vote, it will automatically populate the bar graph.
When you vote, it is added to that section of the videos timeline. This allows a viewer to quickly assess the most intriguing segments of the video and quickly jump to those sections by clicking on the bar graph. The player is tested in FireFox 4+, Chrome 10+, and Safari 4+ but may very well work in others.
[zilla_button url=”http://www.zurb.com/playground/html5-video-voting” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
8. HTML5 Audio Library
[zilla_button url=”http://buzz.jaysalvat.com/demo/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
9. The Endless Mural
The Endless Mural is an interactive, collaborative art website built in HTML5. You can experiment, play and draw, using all the tools and artwork provided. When you are happy with what you have created, submit your composition to the endless mural and become a part of this global collaboration.
[zilla_button url=”http://endlessmural.com/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
10. Initializr : HTML5 Templates Generator
Initializr is an HTML5 templates generator to help you get started with any HTML5 project. It is built on the HTML5 Boilerplate, a powerful HTML5 template created by Paul Irish and Divya Manian.
Initializr will generate a clean customizable template based on Boilerplate with just what you need to get started. Some functionalities have been removed from Boilerplate to focus on what most people really use.
[zilla_button url=”http://www.initializr.com/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
11. Laker : Create HTML5 Digital Publications
Laker is a compendium of files, styles and tips for designing digital publications in HTML5. This development guide shall help you solve some of the common problems when designing and building a digital publication with HTML5. It provides the required information about files, scripts, styles etc. used in Laker.
Laker uses a customized version of the “Baker ebook framework” for producing an iOS app. It basically reads a bunch of HTML files and displays them one after another. Designing pages and adding interactivity is all done in HTML5. That makes it more accessible and cheap to develop, because you do not need any proprietary software.
[zilla_button url=”http://www.lakercompendium.com/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
12. Gury : HTML5 Canvas Utility Library
Gury is a simple to use utility library for drawing, animating, and managing HTML5 canvas tags. The goal is to support the HTML5 Canvas API with a framework that allows for faster/easier application development.
It was built with simplicity in mind and its usage was modeled in the image of jQuery. For instance you can initialize, style, and animate an entire scene in a single expression using chaining.
[zilla_button url=”http://guryjs.org/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
13. VideoJS : HTML5 Video Player with CSS Skins
[zilla_button url=”http://videojs.com” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
14. HTML5 Please : A Compatible Info Chart for New HTML/CSS Features
HTML5 Please is an interactive compatibility chart of HTML5/CSS3 features to find out “in which browsers they are supported (or not)“.
Using a smart search bar, it makes it possible to filter the results with browser or device support, type (HTML5 or CSS3 elements/properties) and more. Every item is described concisely and an option on whether they should be used with fallbacks or polyfills (with links to them) are shared.
[zilla_button url=”http://html5please.com/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
15. AreWePalyingYet? : An HTML5 Audio Test Suit
AreWePlayingYet? is an initiative and open source test suite that aims to bring more harmony into HTML5 Audio implementations. Using the suite, anyone can easily test HTML5 audio capabilities of a browser and find out the features supported/unsupported.
[zilla_button url=”http://areweplayingyet.org/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
16. X-Icon Editor
X-Icon Editor is an HTML5 application, using the canvas tag, which allows you to create high resolution icons. It generates the icons in .ICO format with 4 different resolutions embedded: 64×64, 32×32, 24×24 and 16×16.
This makes it a perfect fit for IE9 as the browser uses multiple-sized favicons in different screens (address bar, tab page, site mode). There are tools like brush, pencil, text or shapes for drawing the icon. Also, it makes it possible to import any image and edit it.
[zilla_button url=”http://www.xiconeditor.com/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
1. Mercury : HTML5 Powered WYSIWYG Editor
Mercury is a HTML5-powered WYSIWYG editor similar to the popular ones like TinyMCE or CKEditor but with a different user experience. Rather than being positioned inside a given element, it appears over the complete web page and can be used to edit the whole page or any number specific areas. It supports previewing the edited content and inserting links, images, videos or tables. File uploads can be accomplished with drag ‘n’ drop.
[zilla_button url=”http://jejacks0n.github.com/mercury/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
2. WYSIHTML5: Open Source HTML5 Rich Text Editor
WYSIHTML5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
[zilla_button url=”http://xing.github.com/wysihtml5/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
3. Rendera : An Online HTML5 Editor
Rendera is an online HTML5 editor which renders a realtime preview of your current work, Rendera supports HAML and SASS. Rendera makes learning HTML5 and CSS3 easy and it is built with CoffeeScript and Sinatra.
[zilla_button url=”http://rendera.heroku.com/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
4. Aloha Editor
Any DOM element can be edited with Aloha by simply embedding the code into the document. Aloha Editor doesn’t require iframes thus the result in saving up 80 percent of loading time compared to other editors. Aloha Editor allows users to edit content such as accordions, sliders, tickers, captions or descriptions of images in slideshows.
[zilla_button url=”http://aloha-editor.org/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
BlueGriffon is an intuitive application which provides Web authors (beginners or more advanced) with a simple User Interface allowing the user to create attractive Web sites without requiring extensive technical knowledge about Web Standards.
[zilla_button url=”http://www.bluegriffon.org/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
6. Aptana Studio
[zilla_button url=”http://aptana.org/products/studio3″ style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.
[zilla_button url=”http://maqetta.org/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]
MacFlux is an advanced HTML5 website design application, capable of creating stunning sites from scratch. Although MacFlux includes free website templates to help get you started, this powerful Mac web design software is more of a creative design environment rather than a template based solution.
Don’t want to create HTML5 websites? No problem! MacFlux can handle standard HTML, PHP, Ruby, JSP and more. New version 4 features includes FreeCode, Image Maps, CSS Gradients, AutoComplete, Embedded Inspector, and an all new FTP.
[zilla_button url=”http://www.macwareinc.com/products/MacFlux/overview.html/” style=”black” size=”small” type=”square” target=”_blank”] Source [/zilla_button]