07 October, 2010
By Simone D'Amico
The new HTML5 provides some interesting features that allow designers to enhance and boost their creativity. The new useful tags will replace many of typical div entries from code, the new canvas support allows you to create fantastic animations without using Flash, etc.
In this post I have collected 15 examples of what we can do with HTML5 and its potentials. Some of these examples work with the support of Javascript but they show how it’s easy to replace Flash with HTML5.
1. How we’ll create forms in HTML5
HTML5 contains new interesting input fields that enable us to perform our work and save much time. In this post we can study in deep the new input fields and all their features.
2. Learning About HTML5 Local Storage
This video tutorial shows how to build a simple to-do list with local storage. HTML5′s local storage is a new functionality which we can save data in browsers even the browser is refreshed or closed.
3. Wave motion
This experiment, made by Hakim el Hattab, makes a wave motion rendered using the canvas element. Each bubble holds a tweet with the word water in it. Clicking on them we can read the tweets.
4. In-place editing with contentEditable property and jQuery
contentEditable property is a feature which we can change the content of HTML elements. It’s a wonderful way for user interaction with the website. jQuery editableText is plugin that allows you to convert parts of the page into editable areas, just click on them and when you finish editing click outside. If you convert an inline element (h1…h5, p ) with this script, the line breaks will be disabled.
5. Cross Browser HTML5 Drag and Drop
Drag and Drop mechanism is an User Interface concept used to support copying, list reordering and the creation of link relationships. This tut provides a cross-browsing HTML5′s drag and drop examples.
6. Tetris with HTML5
How much time we spent playing Tetris? Now we can play at this game online with the experiment of Bruno Garcia developed using HTML5′s Canvas.
7. HTML5 presentation
Html5Rocks has created a fantastic presentation of new features using HTML5 structure, local storage and more others of these new property.
8. Flickr PS3 slideshow with HTML5 canvas
This is a great slideshow to see your photos on flickr with a PS3 slideshow style with HTML5 canvas. You have only to enter your Flickr id on page and automatically the script loads your photos into the slideshow.
9. Video for Everybody!
HTML5 introduced <video> and <audio> tags that allow to embeds video and audio files into a website without using external players. Video for Everybody! is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing.
10. CanvasPaint
Do you remember the early versions of Paint in Windows? CanvasPaint is a near pixel-perfect copy of Microsoft Paint in HTML, CSS and JavaScript, using the <canvas> tag.
11. Ball Pool
Ball Pool is a great example of canvas using. This script use the mouse click and mouse drag for moving or creating other balls into the page.
12. Browser Ball
Browser Ball is a fanciful example of simultaneous use of canvas and drag and drop technologies. Browser Ball attempts to allow the configuration of a seemingly endless array of continuous spaces using multiple overlapping browser windows. Within this multivariate space, users are invited to toss a beach ball both hither and yon.
13. Cloth Simulation
Cloth Simulation is another example of HTML5′s canvas and drag and drop use. This example is a simulation of cloth movements with some interesting customizations.
14. Canvas in 3D
A canvas based 3D engine in this example developed by LBi Lost Boys. In this script we’ll see an amazing 3D interface with random Flickr photos loaded by clicking on surface.
15. Canvas Photo
Another example of Canvas using in this script. Canvas Photo is a simple wall with photos where we can move, resize, add a border to images and export the result in JPG or PNG format.
Wow! I guess I should brush up on my HTML skills. I had no idea that HTML 5 was so rich with new features. Is it going to be a real alternative to Flash? Thanks for the links.
Andrew
HTML5 will soon takeover flash. So yes everyone should brush up on their HTML5 skills
Most of these examples are actually HTML5, combined with CSS3 and JavaScript.
The problem with HTML5 and CSS3: Internet Explorer is not supporting it. IE9 is in beta and will support quite a bit of it, but as of right now, the most popular browser, any official version of it, will not render this stuff properly.
Even the W3C just said that today’s browser market is not ready for their standard yet.
The only way to go for now is use a JavaScript framework (like jQuery, YUI, EXTJS) that can mimic these behaviors.
Or, start rolling out awesome HTML5 applications and encourage people to ditch MSIE for better, free alternatives.
Try http://rp.eliteskills.com/html5.php if you have websockets (latest google chrome or firefox beta). Multiple people can connect at once.
What about Canvas Rider?!!
http://canvasrider.com :)
Wow, that Canvas Rider is a real time waster. Thanks for that.