Promising HTML5 Applications

Gartner recently published its annual Hype Cycle for Emerging Technologies which identities and evaluates the maturity and future direction of high-impact technologies. While the report focuses on a mix of technologies from Near-Field-Communication to wireless power, it also takes into consideration web and application development trends. The research paper identified trends like public web APIs, web real-time communications, Portal PaaS and HTTP 2.0 as being on the rise. Although technologies like big data, semantic web, context-enriched services and HTML5 are at their peak, they are according to Gartner, still 5 to 10 years away from being fully embraced.

It’s surprising to think that HTML5 may not be widely adopted for such a long time. Even though it is not an approved standard, HTML5 already enjoys great popularity among the development community, whose individuals harness its capabilities to create stunning web and mobile applications. Browser makers are also fast-moving innovators in accommodating HTML5 in their browsers — in fact, today most popular browsers support HTML5 to a great extent.

It is certain that it won’t take longer than 5 years before HTML5 shows its footprint on most websites. And it is totally safe to use it sparingly on your website. Our featured article for this month takes a look some promising HTML5 applications, all of which either work in modern browsers or will gracefully degrade in older browsers.

HTML5 Audio & Video Players

Buzz


Buzz is a standalone JavaScript HMTL5 audio library that is small but powerful enough to allow you to easily take advantage of the new HTML5 audio element. It is easy to implement and degrades gracefully on non-modern browsers. It has a nice API that allows you to check for audio formats, start, stop, face-in, fade-out and even loop sounds.

jPlayer


jPlayer is a free jQuery HTML5 Audio and Video library that allows you to rapidly weave cross-platform audio and video into your web pages. It has a comprehensive API that will help you get started and running in minutes. It supports different media types from mp3, mp4, ogg to webm and wav. Finally, jPlayer is totally customizable and skinnable using HTML and CSS.

Video.js


Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. It provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn’t supported, and also provides a consistent JavaScript API for interacting with the video.

HTML5 File and Document Handling Applications

WYSIHTML5

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 un-maintainable tag soups and inline styles.

DropArea


DropArea is a HTML5 drag and drop image/file upload jQuery plug-in with a PHP script on the server-side.  It creates a drop area whereby which your site visitors can simply drag and drop files from their desktop to your site for uploading. The most recent version also includes a client-side imagine resizing, data URL option to send file information via AJAX and a client-event for manually browsing and adding files. Unfortunately at the time of writing, this script doesn’t work well with Firefox but works great on Chrome.

Resumable.js


Resumable.js harnesses HTML5 File API via a JavaScript library to provide multiple simultaneous, stable and resumable uploads. It is designed to offer fault-tolerance into upload of large files through HTTP by splitting each files into small chunks and resuming upload after a connection is lost either locally or to the server.

PDF.JS


pdf.js is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance. Currently, PDF is rendered in the browser via plugins but this experiment renders the PDF without any dependencies.

Turn.js

Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; and turn.js is the best fit for a magazine, book or catalog based in HTML5. It works on iPad, iPhone and has a simple and powerful API that even allows you to load pages dynamically through AJAX requests.

Sisyphus

Sisyphus aims at providing a client-side draft saving mechanism to your forms by leveraging HTML5 local storage. It does so by constantly capturing users input on your form and saving them locally. In the event that of network issues or accidental closure of the browser’s window, your users can also come back to your page without losing any information they’ve filled out already.

HTMl5 Visualization and Graphing Applications

RGraph

RGraph is a charts library written in Javascript that uses HTML5 to draw and supports over twenty different types of charts. Using the new HTML5 canvas tag, RGraph creates these charts inside the web browser using Javascript, meaning quicker pages and less web server load. This leads to smaller page sizes, lower costs and faster websites.

Sigma.js


sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to display interactively static graphs and can be even used to display dynamic graphs generated on the fly. It is easy to use and with a minimal code you can create highly customizable visualization graphs.

Paper.js

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

gury


gury is a JavaScript library designed to aid in the creation of HTML5/Canvas applications by providing an easy-to-use chain based interface. With gury you can create a canvas tag, resize and style it, add renderable objects, animate those objects, and place it anywhere on the page in a single chained expression.

EaselJS


EaselJS provides straightforward solutions for working with rich graphics and interactivity with HTML5 Canvas. It provides an API that is familiar to Flash developers, but embraces Javascript sensibilities. It consists of a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

Flotr2


Flotr2 is a library for drawing HTML5 charts and graphs. It can generate line graphs, bar charts, pie charts and bubble charts. These graphs and charts are generated using HTML5′s canvas and work across several desktop and mobile browsers. Flotr2 is a fork of the Flotr project without the Prototype library dependency and includes some extra enhancements.