MrDoob is known for Flash projects, and recently some great HTML5 work. This project shows the power of HTML5 through the physics of collision detection & gravity.
- Drag the balls around.
- Click the background to add new objects.
- Shake your browser to see feedback.
- Double click any object to refresh with a new color scheme.
20 Things I Learned About Browsers And The Web
A great interactive experience created by Google and Fantasy Interactive
What's a cookie? How do I protect myself on the web? What happens if a truck runs over my laptop? + Much more explained in this HTML5 book complete with CSS3 animated illustrations.
HTML5 Ninja Games
Nothing says Christmas like ninjas, right? Ninja games are sooo hot right now. Go test your foo, fool!
The Killers HTML5
Hmmm…does technical strife break out in bands? The Killers have an HTML5 site and their currently soloing front-man Brandon Flowers is pushing some Flash at us. What does it all mean? Sparkart the site builder in both cases broke HTML5 band site ground and uses it on their own site, so one wonders if Brandon Flowers is just a Flash lover?
Caution: thekillersmusic.com/html5 is a bit CPU intensive.
The folks at @mixonline teamed up with artist Joshua Davis and Branden Hall to create a global art collaboration tool, all using Okapi. What's Okapi, you ask? It's an "open-source framework for building digital, generative art in HTML5" of course. Sounds like an adventure to us.
Socket 2 'Em
Today we celebrate the WebSocket API which is moving us towards a more realistic real-time web without constant polling, endless iframes or other Comet-like tricks – Just establish a WebSocket and communicate bi-directionally with ease. Some simple examples to check out are http://websockets.org/echo.html and http://html5demos.com/web-socket (via @rem).
WordSquared (http://wordsquared.com): WordSquared is a Massively multiplayer online word game born out of the Node.js Knockout contest. In other words, it's like Words-with-Friends and World of Warcraft had an HTML5 baby. Whatever it is, it's highly addictive so be careful. (via @aviel @ggoodale and @railsjedi)
Rawkets (http://rawkets.com): Rawkets is yet another Massively multiplayer game, submitted by @robhawkes. This one's a space-shooter game with Twitter login feature. So login and start blasting your fellow Tweeps out of the Twitterverse.
<video> + <canvas> = ?
HTML5 <video> is coming on strong. It isn't quite a Flash video killer yet, but it's getting there fast! A few demos while we wait for the growing pains and codec chaos to subside.
video + canvas = magic
Who you gonna call when you need another HTML5 <video> + <canvas> demo? PIZZA CATS!!!
Knowing all the HTML5 elements is important, but listing them out is a bit dry for the HTML5 Advent(ure) calendar. Thanks to Josh Duck for taking us on an adventure as he organizes the elements so nicely in a periodic table and provides an interactive feature to check a site's HTML5 element weight. The site has great tooltips with links for further reading.
Check our usage, we're legit http://joshduck.com/periodic-table.html?url=html5advent.com rolling some semantic markup with <article>, <section>, <header>, <footer> and even <hgroup>.
Are any of your sites good examples chock full of HTML5 element goodness? Share them with us
These Anti-ActionScript Heroes are raising the bar by merging great design with the latest HTML5 standards.
Kudos to the folks at Steaw Web Design, Sebastien Doncker, and the rest of the crew who created this animated parallax masterpiece!
- HTML5 graphic.ly reader
Check out this awesome comic book reader built in HTML5. Make sure to click on "Graphic.ly Flow" mode. via @graphicly. More books here.
While creating buzz for a new app, Nerd Communications created a publicity monster. No PR is bad PR right? Read the hype and follow @benthebodyguard.
If you thought Agent 008 was an addicting HTML5 game, you'd better not visit canvasrider.com. Not only can you ride on countless custom tracks, you can create your own. 10 out of 10 in the time-suck category. They even have a Canvas Rider app in the new Chrome Web Store!
Feeling artistic? Check out these neat <canvas> canvases.
(WebSocket browsers only)
Einar Otto Stangvik brings us this neat collaborative drawing tool using WebSockets. Don't be the guy who pulls out the eraser and ruins everybody's fun.
Another drawing tool, but this one has some whacky brushes that make you want to keep on drawing!
Both sites do need to clean up their <!DOCTYPE>
There are billions and billions of demos one could develop in HTML5. Here are two to amuse and enlighten in memory of Carl Sagan.
This 3D molecule visualizer from AlteredQualia integrates cool molecular visualizations with great Web technology. Make sure you check out the different features like zooming, multi-axis drag/rotation and more.
- Not into tiny microscopic molecules? Switch gears with IE9 Testdrive's Galactic demo. Use IE9 Beta for awesome GPU powered graphics.
Print meets Web
Today we bring you special guest star CSS3 and downloadable fonts.
Frank Chimero needs no introduction, and neither should this great “Lost World's Fairs - Atlantis” site he designed. Just click and scroll. See you at the bottom.
The folks from @paravelinc bring us Lettering.js, “A jQuery plugin for radical web typography.”
Who needs downloadable fonts? Just build your own directly with CSS. Impressive work by Dave Desandro.
HTML5 <video> gets all the love (err.. anti-Flash rebound affection), so we're dedicating today to the <audio> tag.
The @9elements team keeps us all interested and entertained with their HTML5 twitter trend follower. Did you know they're using the <audio> tag to pump some ambient tunes into your headphones?
We just couldn't talk about the <audio> tag without shouting out to the @yayQuery team. Check out their singalong and download their plugin. Doot-doot-doo-doo-doot. View Source at yayQuery.com for Bonus Point ASCII art. @paul_irish, you look M@hvel0us in ASCII.
HTML5 - WebGL
HTML5 advent has been chock full of Canvas-2d goodness... today we look at the future of 3D canvas and WebGL with no plug-ins required. A word of caution though, you need a bleeding edge browser for today's pick, either Chrome Canary or Firefox 4 Beta, to have any chance at running these.
- Body Browser – Google Labs
It's like GoogleMaps for your guts... so here are directions to your small intestines! Pretty awesome work by the team @google.
- WebGL Asteroids
Ok, we prefer top-down shooters because we almost hurled flying around WebGL-powered Asteroids in 3D from @Ambiera. The HTML5 <audio> powered techno soundtrack didn't help either. If you are real glutton for CPU punishment try the Quake3 level demo.
- Body Browser – Google Labs
Today's pick is an HTML5 Audio Visualizer a la iTunes. Pick amongst 24 different visualizers and watch these tunes dance. We personally like Mario doing the Runningman. Use FireFox 4 for HTML5 purity, though he's added in Flash fallback for everyone else.
- Pirates Love Daisies
Yesterday, plants were fighting zombies. Today, Pirates are protecting Daisies from a marauding band of rats, crabs, seagulls and octopi. Microsoft, in conjunction with Grant Skinner, Pulp Studios and team bring you this brand new addictive HTML5 tower-defense game that showcases what can be done with open web technologies.
For bonus points, try playing in IE9 whose GPU acceleration powers smooth animations and enhanced ambient effects.
- Pirates Love Daisies
Spirit of Indiana
Christian Heilmann brings us today's HTML5 demo that integrates HTML5 <video> with maps and simple animation to re-create the Indiana Jones-esque travel/flight sequences. To create your own version, all you need is some basic HTML5 knowledge, a spontaneous acapella group and a quick search through Archive.org, Google Maps and Google Web Fonts.
"You throw us your demos, we'll throw you the whip!"
Today we bring you more HTML5 <canvas> and <audio> goodness from the @LaSurprise team. FlowerOscope features some great illustrations and accompanying HTML5 sound bytes. Don't overlook the design intricacies when the cursor is moved around. When you're done creating your piece, post it to a "family wall" and invite your friends to add to the wall.
The folks at Revolver3 bring us today's fun Websocket-enabled multiplayer snowball fight, Le Roi de la Garnotte (or codename: Randy Johnson). Login with Facebook and start battling! Aim and walk with your mouse and use the spacebar to fire away!
For further reading on this "HTML5 Experiment," see the Revolver 3 blog entry about the work.
HTML5 - c'est super! Even with Flash socket fallback.
Museum of Never Ending Art
As we get close to the finale of our HTML5 Advent(ure) calendar, there's one thing that we can tell about all of the individuals and teams featured so far: their innovation and collaboration is neverending and continues to push the limits of the open Web.
So for today's demo, we bring you the MONA: The Museum of Neverending Art. This enormous canvas of user-submitted art still has many open spaces, so we recommend you go add your own inspiration.
Do yourself a favor and try it in the IE9 beta so you can appreciate the amazing zooming and scrolling abilities built with - yep, you guessed it - HTML5 and CSS3.
Flight of the Navigator
This is some Blade Runner+TRON-esque WebGL + <audio> + <video> + <canvas> extravaganza which is - we repeat - not a video if you have the horse power to run it. Crazy stuff! Read more from David Humphrey.
If Santa doesn't have you living on the browser bleeding edge with powerful hardware, watch the screen cast instead.
HTML5-oh Snow Globe-o-matic.
Inspired by @webreakstuff and @grahamlicence who have some nice snow globes (here, and here), we decided to create our own model for you all for the final Advent(ure): Snow Globe 5-oh. Sure it isn't the flashiest pirate, ninja, 3d dimensional, socket powered demo but it is our hand crafted HTML5 present to you to bring some open Web cheese to your friends (or enemies).
So that's it folks 23 different demos, one plug from us with extra cheese and we are off for the year. Hope to see you in 2011!
Happy Holidays from @Zingchart
PS: The Grinch was spotted adding bugs to the globe-o-matic. Hang tight while we kick him out of Who-ville!