-
Day 1
Project
Ball Pool
http://mrdoob.com/projects/chromeexperiments/ball_pool/
Description
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.
-
Day 2
Project
20 Things I Learned About Browsers And The Web
http://www.20thingsilearned.com
Description
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.
-
Day 3
Project
Agent 008 Ball
Description
Showing the power of HTML5, see this amazing billiards game, created by Pixel Lab complete with a James Bond-esqe theme.
-
Day 4
December 4th
HTML5 Ninja Games
Nothing says Christmas like ninjas, right? Ninja games are sooo hot right now. Go test your foo, fool!
http://code.bocoup.com/js-ninja by @F1LT3R
Build up your chi-force by thowing your arms into some crazy ninja spins. Don't hit yourself in the head!http://mikerotondo.com/ninjaleap by @mrotondo and @ganz
Protect your village from the evil assasins. -
Day 5
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.
-
Day 6
Endless Mural/Okapi
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.
What's cooler: @mixonline is giving away prizes for the best design submitted before December 15, 2010. So get digitally generative!
Links:
-
Day 7
December 7th
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.
-
Day 8
December 8th
<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.
TRON Fan Movie filtered through HTML5
Lessen the wait for TRON: Legacy on 12/17 and amuse yourself by messing with the video here. Via @enzenhofer.video + canvas = magic
Who you gonna call when you need another HTML5 <video> + <canvas> demo? PIZZA CATS!!!HTML5 Doctor prescribes this tutorial for learning how all this is done.
-
Day 9
December 9th
Atomic HTML5
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
-
Day 10
December 10th
Anti-ActionScript Heros
These Anti-ActionScript Heroes are raising the bar by merging great design with the latest HTML5 standards.
- nevermindthebullets.com
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. - benthebodyguard.com
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.
- nevermindthebullets.com
-
Day 11
December 11th
Canvas Rider
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!
Haven't had enough fun yet? Check out Entanglement from Gopherwood Studios
-
Day 12
December 12th
Blank Canvases
Feeling artistic? Check out these neat <canvas> canvases.
- http://draw.2x.io
(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. - http://bomomo.com
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>
- http://draw.2x.io
-
Day 13
December 13th
HTML5 Cosmos
There are billions and billions of demos one could develop in HTML5. Here are two to amuse and enlighten in memory of Carl Sagan.
- CanvasMol
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.
- CanvasMol
-
Day 14
December 14th
Print meets Web
Today we bring you special guest star CSS3 and downloadable fonts.
- lostworldsfairs.com/atlantis
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. - letteringjs.com
The folks from @paravelinc bring us Lettering.js, “A jQuery plugin for radical web typography.” - desandro.com/resources/curtis-css-typeface
Who needs downloadable fonts? Just build your own directly with CSS. Impressive work by Dave Desandro.
- lostworldsfairs.com/atlantis
-
Day 15
December 15th
HTML5 <audio>
HTML5 <video> gets all the love (err.. anti-Flash rebound affection), so we're dedicating today to the <audio> tag.
- 9elements.com/io/projects/html5/canvas
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? - yayquery.github.com/jquery-singalong
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.
- 9elements.com/io/projects/html5/canvas
-
Day 16
December 16th
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
-
Day 17
December 17th
Stupid Awesome
Jacob Seidelin's Twitter bio says "Doing stupid things with JavaScript so you don't have to." Forrest Gump's bio says "Stupid is as stupid does." If these demos are stupid, then stupid is the new awesome.
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.
While you're at Jacob's site make sure you check out his other demos, such as the Musical Solar System. (Requires WebGL enabled browser)
-
Day 18
December 18th
- 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
-
Day 19
December 19th
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.
After checking out the demo site, see how to implement the effects using HTML5 and JavaScript at hacks.mozilla.org. Follow @mozhacks to stay in the loop.
"You throw us your demos, we'll throw you the whip!"
-
Day 20
December 20th
FlowerOscope
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.
Feel like creating your own <canvas> art from scratch? MIXOnline's Ai → Canvas plug-in allows you to export vector and bitmap art directly to <canvas>. Have you used it? Submit your stuff.
-
Day 21
December 21st
Snowball Fight!
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.
-
Day 22
December 22nd
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.
Kudos to Tim Aidlin and GroupeReflect for this great site.
-
Day 23
December 23rd
Flight of the Navigator
Our previously scheduled Nice SVG Snowman and Naughty 8bit HTML5 game have been bumped last-minute to bring you an impressive new demo - 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.
-
Day 24
December 24th
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!