I had the pleasure to be part of the BUILD2012 lucky speakers this year. On my side, I was giving a talk on new HTML5 & CSS3 features running in IE10. This blog post will give you all the demos I’ve been showing during this talk as well as pointers to articles & W3C specifications to let you dig into those parts if you’d like to. First, you can see the video here:
And you can download the video for an offline view in various formats as well as the slides here: http://channel9.msdn.com/Events/Build/2012/3-114
Ok, let’s now review the demos associated to the 3 sections of this session.
CSS Grid Layout
1. A very simple example: Simple fluid grid layout sample using fraction units
2. More advanced example using Media Queries for portrait/landscape: Grid layout combined with media queries sample
Thanks to Markus Mielke from Microsoft Corp who originally built the media query demo!
Want to know more?
1. IE Test Drive Grid demo: CSS3 – Hands on Grid
2. W3C specifications: CSS3 Grid Layout
CSS 3D Transforms, Multi-Columns & Exclusions
1. CSS3 3DT demo: CSS3 – Hands on 3D Transforms
2. Combining CSS Multicolumns, Grid & Exclusions (Positioned Floats): CSS3 – Hands on Positioned Floats and feel free to play with the F12 dev bar to discover how it works!
Want to know more?
1. IE Test Drive Multi-column: CSS3 – Hands on Multi-column
2. W3C specifications: CSS3 Exclusions , CSS3 Multicolumns
CSS3 Animations
1. Simple transition demo: go play with transitions on JSFiddle
2. Simple Animation demo: go play with animations on JSFiddle which is part of this: Pure CSS3 animated AT-AT originally built by Anthony Calzadilla.
3. HTML5 Platformer game using 3DT & Transitions: Modern HTML5 Platformer game .
Want to know more?
1. Associated article on my blog: Introduction to CSS3 Animations
2. Associated article on my blog: Modernizing your HTML5 Canvas games Part 1: hardware scaling & CSS3 where you’ll have the source code to download
3. IE Test Drive Transition demo: CSS3 – Hands on Transitions
4. IE Test Drive Animation demo: CSS3 – Hands on Animations
5. W3C specifications: CSS3 Transitions & CSS3 Animations
App cache, File APIs, Drag’n’Drop
1. Very simple HTML5 Forms code used:
<!DOCTYPE html> <html> <head> <title>Simple HTML5 Forms test page</title> </head> <body> <form> <input type="email" required="required" /> <input type="submit" value="Submit query" /> </form> </body> </html>
2. Test Drive HTML5 Forms demo: HTML5 Forms
3. HTML5 Platformer game using drag’n’drop, File APIs, application cache: Modern HTML5 Platformer game .
Want to know more?
1. Associated article on my blog: Modernizing your HTML5 Canvas games Part 2: Offline API, Drag’n’drop & File API
2. Another cool drag’n’drop demo on IE Test Drive: Magnetic Poetry
3. W3C specifications: HTML5 Forms , HTML5 Offline , HTML5 drag’n’drop
IndexedDB
1. Simple sample storing & retrieving images from IndexedDB: simple IndexedDB demo originally written by Israel Hilerio from Microsoft Corp. I’ve just updated it to use the lastest spec.
2. Very advanced scenario combining all the above specifications to build a slideshow application: SnapyX
This application will take some time to run the first time as it will create a pre-filled DB with some images to let you have a first sample slideshow to play with. It’s a single web app using backbone.js following a MVC client side pattern. I’ll try to find some time to write a specific article about the job we’ve done on this app in France. We’re very proud of it! 
Want to know more?
1. Associated article on IE blog: Building Offline Experiences with HTML5 AppCache and IndexedDB (warning: code samples are using a previous IndexedDB spec)
2. If you’re reading the previous article, you MUST read this one containing updates to the spec: IndexedDB Updates for IE10 and Metro style apps
2. W3C specifications: IndexedDB
WebWorkers
1. Demo using File APIs to load a file and apply a sepia using workers or not: WebWorkers to filter image with sepia demo
Try to test the performance boost on your machine with and without using the WebWorkers.
Want to know more?
1. Associated article on my blog: Introduction to the HTML5 Web Workers: the JavaScript multithreading approach
2. Associated excellent article on David Catuhe’s blog: Using Web Workers to improve performance of image manipulation
3. I’ve been using the same approach to build a fun Windows 8 app: Manipulating the image to add some effects via the canvas tag with EaselJS or WebWorkers and via GPU Shaders with a WinRT component
4. W3C specifications: Workers
1. Very simple demo to show how simple it is to use touch/pen/mouse: basic usage of MSPointer demo extracted from the MSDN Documentation: Pointer and gesture events
2. Very cool advanced demo: Browser Surface
Want to know more?
1. Linked BUILD2012 session partly dedicated to pointers: Touchscreen and stylus and mouse, oh my! delivered by Jeff Burtoft
2. Associated article on IE blog: Touch Input for IE10 and Metro style Apps
3. Associated article on IE blog: Guidelines for Building Touch-friendly Sites
4. Associated article on IE blog: Handling Multi-touch and Mouse Input in All Browsers
5. Associated article on my blog: Using the Windows 8 Simulator & VS 2012 to debug the IE10 touch events & your responsive design
6. W3C specifications: Pointer events
That’s all folks! Hope you’ve enjoyed my session!
David
Great stuff!
Hello David 🙂
Peux-tu m'expliquer pourquoi IE10 (la toute nouvelle version livrée avec Win 8 fr) refuse de faire fonctionner animation sans préfixe ? :/
Salut Pascale,
Cela marche très bien chez moi. Tu as un lien de repro?
Bye,
David
Awesome Stuff with CSS
——————————————————————————-
<http://www.tuljabhavani.in>
Spécial dédicace for this great frenchie stuff 😉
peper-eliot.blogspot.fr/…/un-frenchie-seattle-qui-en-met-plein-la.html
Merci pour cette dédicace! 😉
Oui, superbe conférence. Et les démos sont bluffants. Bravo David ;). Bonjour du Sénégal