Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

JavaWorld.com > Java Enterprise Edition >

Beyond jQuery: JavaScript tools for the HTML5 generation

Today's JavaScript libraries are tuned for mobile devices, Canvas-based animation, HTML5 video, local databases, server interaction, and more

By Peter Wayner, InfoWorld, 01/03/12

  • Print
  • Feedback
.

Page 2 of 5

Mashi is an impressive example of how the sprites can be set in motion. It offers more than several dozen standard easing functions for moving sprites along a timeline.

The list of game engines for the browser is long and growing longer now that the JavaScript canvas object is better established and relatively consistent. The results don't look as nice as Flash to my eyes, but I suspect that the gap will close dramatically.

If you like board games, you'll like the three-dimensional, orthographic views of game boards from pp3disco. It takes just a few lines of code to set them up. CasualJS was designed to be just like ActionScript for those with plenty of Flash experience. The authors at Crafty obviously spent a good amount of time on their collision detection. Fruit Ninja fans can play Crafty's Fruit Assassin in their browsers.

Video libraries
In theory, nothing could be easier than sticking a video tag into your HTML. In practice, the behavior of so many supposedly standard-compliant browsers is different enough that you'll be pulling out your hair if you try to support all of them. A number of good HTML5 libraries let you write standard HTML5 video tags that will be replaced with Flash or QuickTime if the browser isn't ready to handle your video.

The Video for Everybody project offers one of the better libraries, filled with features that operate in the background to smooth delivery on older browsers like IE8. And if Video for Everybody lacks the features you need, you can check out spinoffs like VideoJS and MediaElement.js, two projects that began with the Video for Everybody code before adding their own layer of events and controls.

VideoJS, for instance, makes it easy to change the appearance with a skinning layer. Some of the CSS files contain no images and, thus, minimize bandwidth costs, at least aside from the expense of delivering the video file. MediaElement.js offers a number of meta features, such as controlling captions and subtitles. One example illustrates how to let people choose the language in which the subtitles appear.

Big data visualization
If the pundits are correct, there are many, many terabytes of data just waiting for people to come along and try to make sense of the bits. The first generation of HTML5 libraries was more focused on building forms and generating tables. Now a number of libraries are zeroing in on building charts and drawing graphs on the <canvas> object.

You'll find plenty of great options for basic line graphs, bar graphs, and combinations. Flot, Flotr, Raphael, and JSCharts are just a few of the libraries that deliver solid renditions of the classics.

Some libraries go even further. The collection of demos for Protovis and its newer cousin D3 -- a name meant as shorthand for Data Driven Documents -- show how sophisticated constructions like Voronoi diagrams and network graphs can illustrate more than the up and down of some value. Simile Widgets offers a different collection of views that are more focused on maps and timelines.


For more enterprise computing news, visit InfoWorld. Story copyright InfoWorld Media Group, Inc.

  • Print
  • Feedback

Resources