What's New with HTML5? Michael Mahemoff images/creativebits.org__files__html5-logo-1.jpg ^ contentPlace:"3-3" The other HTML5 slides http://slides.html5rocks.com/ images/chenwangdesign.com__wordpress__wp-content__uploads__2010__12__Picture-1.png ^ contentPlace:"3-3" Developer Relations at Google images/img.technospot.net__Google-Product-API-Periodic-Table.jpg ^ contentPlace:"3-3" Dark Ages of Web Programming: Black Art images/upload.wikimedia.org__wikipedia__commons__b__b6__French-gendarme.jpg ^ contentPlace:"3-3" Talk to the cloud? images/reason.com__assets__mc__tcavanaugh__arnoldtalktohand.jpg ^ contentPlace:"1-1" Ajax Era: Established Practice images/farm3.static.flickr.com__2112__2368225695_7f87aaedba.jpg ^ contentPlace:"1-1" HTML5 Era: Application Platform images/creativebits.org__files__html5-logo-1.jpg Input Output Push (websocket / chrome2phone) Offline ... Input #000 The old thing: Forms and links images/farm1.static.flickr.com__231__463462503_73dc732315_b.jpg http://www.flickr.com/photos/badwsky/463462503/lightbox/ ^ contentPlace:"3-3" window.addEventListener('deviceorientation', function(ev) { ... } ev.alpha | ev.beta | ev.gamma [z,x,y] images/dev.w3.org__geo__api__start.png Geolocation images/farm5.static.flickr.com__4088__4988803970_2f68d61c8e.jpg Geolocation ==== navigator.geolocation.getCurrentPosition ( function(position) { // position.coords.latitude, // position.coords.longitude // ... }, errorHandler, options ); ==== Device API Input: Microphone images/farm5.static.flickr.com__4142__4880170082_33d603dd10_b.jpg http://www.flickr.com/photos/rustysheriff/4880170082/sizes/l/in/photostream/ Device API Input: Camera images/farm2.static.flickr.com__1113__5152413649_5b31df3a58_o.jpg http://www.flickr.com/photos/mrmayo/5152413649/ Device API is here! images/www.buzyblog.com__wp-content__uploads__2011__03__Motorola-Xoom.jpg Output #000 The old thing: text and images images/farm5.static.flickr.com__4090__4988850098_f96f2c4d41_b.jpg http://www.flickr.com/photos/myoldpostcards/4988850098/sizes/l/in/photostream/ Output: CSS3 #000 Photoshop tamagotchi begone! ^ contentPlace:"1-1" images/picupper.com__2010__03__19__01-Tamagotchi-ap1.jpg Output: Canvas #000 Canvas ==== <canvas id="painting" width="300" height="300></canvas> var canvas = document.querySelector("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "rgb(100,100,100)"; context.fillRect(50,50,200,200); ==== ^ contentPlace:"3-2"  Canvas + Favicon = Gold images/www.mattwardman.com__blog__wp-content__uploads__2008716-arcade-game-in-your-favicon-big-screendump.gif Actually useful images/3.bp.blogspot.com___ZaGO7GjCqAI__THOic8LCbtI__AAAAAAAAdFI__24IbFm7PD5I__s640__google-calendar-favicon-2010.png Output: WebGL Output: HTML Video ==== <video src="bunny.webm" controls></video> ==== ---- ---- Canvas-Video Mashup http://static.uxebu.com/tobeytailor/gdd/#slide1 images/img.skitch.com__20101110-miq2kkqutmmrcmhwe92qs3xxtu.jpg Video to Canvas ==== video.addEventListener("play", function(){ canvas.drawImage(video,0,0,500,500); }); // see http://html5doctor.com/video-canvas-magic/ ====  Reading video images/farm6.static.flickr.com__5060__5450465337_9dff430ab9_o.jpg Output: Audio Audio Tag ==== <audio src="song.mp3"></audio> ==== Output: HTML5 Notifications images/maxcdn.googletutor.netdna-cdn.com__wp-content__uploads__2011__01__gmail-desktop-notification-1.png TweetDeck images/1.bp.blogspot.com___ca9gBiJ8CGc__TP-cu8XqQxI__AAAAAAAACrU__eOSfGqqNyL4__s1600__chromeDeck.jpg HTML5 Notifications ==== if (available() && permission()) { window.webkitNotifications.createNotification( "icon.png", "notification title", "notification content" ); } ====  Input Output Beyond the User Interface images/farm4.static.flickr.com__3010__3037590031_4f2eeb0b40_b.jpg http://flickr.com/photos/philgyford/3037590031/ Push Notifications: Chrome To Phone images/androidandme.com__wp-content__uploads__2010__07__chrome-to-phone.jpg Working offline images/www.beehivecity.com__wp-content__uploads__2010__09__tube.jpg Client-side storage - Local Storage, Web SQL, Indexed Database images/www.beehivecity.com__wp-content__uploads__2010__09__tube.jpg Client-side storage - File Access Tutorial on HTML5Rocks.com images/www.beehivecity.com__wp-content__uploads__2010__09__tube.jpg Application Cache http://3.ly/timer images/www.beehivecity.com__wp-content__uploads__2010__09__tube.jpg ^ contentPlace:"3-3" Application Cache for performance too New York Times images/gilsmethod.wpengine.netdna-cdn.com__wp-content__uploads__2010__12__chrome-os-apps-new-york-times.png ^ contentPlace:"1-3" Single Page Apps images/farm6.static.flickr.com__5134__5514514134_1b02340eb3_o.jpg http://flickr.com/photos/37184970@N00/5514514134/ images/farm5.static.flickr.com__4105__5450664389_82de9057ce_b.jpg History API ==== history.pushState( {search: "rainbows"}, "Items containing 'rainbows'", "/search/rainbows" ); window.onpopstate = function(ev) { // URL changed - update UI } ==== Demo: http://rampage.mahemoff.com Source: https://github.com/mahemoff/rampage images/www.consoleclassix.com__info_img__Rampage_NES_ScreenShot1.jpg The Curl Test ==== curl http://rampage.mahemoff.com/monsters/george ... <body> <h1><a href="/">Know Your Rampage</a></h1> <div id="main"> <h2><a href="/monsters">monsters</a> > George</h2> <img src="/images/george.jpg" /> <div>Eats men</div> <div>Born 1986</div> </div> ... ==== ^ contentPlace:"3-3" The Search Engine Test images/farm6.static.flickr.com__5213__5515831794_dfff3a174a_o.jpg http://flickr.com/photos/37184970@N00/5515831794/ ^ contentPlace:"3-3" HTML5 Everywhere: Write Once, Run Anywhere images/farm4.static.flickr.com__3323__3624769121_225c4d592b.jpg http://flickr.com/photos/urosvelickovic/3624769121/ Form Factors images/farm3.static.flickr.com__2397__1983337986_ff8ab0fdf7_o.jpg http://flickr.com/photos/williamhook/1983337986/ Form Factors images/www.pcpro.co.uk__blogs__wp-content__uploads__2010__09__Samsung-Galaxy-Tab-in-hand-FPS-game.jpg http://www.pcpro.co.uk/blogs/2010/09/03/samsung-galaxy-tab-review-first-look/ Form Factors images/thecoolgadgets.com__wp-content__uploads__2010__09__fascinations-usb-desktop-aquarium.jpg ^ contentPlace:"3-1" Smartphone Markets images/androidcommunity.com__blog__wp-content__uploads__2008__08__android_market_4.png ^ contentPlace:"3-1" PhoneGap, Titanium http://phonegap.com/apps http://build.phonegap.com http://apparat.io images/farm5.static.flickr.com__4081__5017980645_7d997740a1_b.jpg Apparatio images/farm6.static.flickr.com__5211__5413812878_e6c8da5dcb_o.jpg http://flickr.com/photos/37184970@N00/5413812878/ Mobile UI toolkits jQuery Mobile, Sencha Touch, jQTouch images/www.pdroms.de__media__upload__images__news__20090304_Missed_Reminder_v0.9.3_(Android_Application).png Which takes us to the Web Store ... images/farm6.static.flickr.com__5174__5466843010_a789499793_o.jpg http://flickr.com/photos/37184970@N00/5466843010/ ^ contentPlace:"3-3" Slides at http://prez.mahemoff.com/gtug-html More at http://html5rocks.com mahemoff@google.com [Twitter: mahemoff] images/3.bp.blogspot.com___HQiIKj84fww__TKEcMW49eBI__AAAAAAAABf4__wBcS0oTxvvs__s1600__html5rocks.png