^ contentPlace:"3-3" HTML5 and the Chrome Web Store Michael Mahemoff http://creativebits.org/files/html5-logo-1.jpg http://j.mp/html5pl http://creativebits.org/files/html5-logo-1.jpg ^ contentPlace:"3-3" The other HTML5 slides http://slides.html5rocks.com/ http://chenwangdesign.com/wordpress/wp-content/uploads/2010/12/Picture-1.png ^ contentPlace:"3-3" Developer Relations at Google http://img.technospot.net/Google-Product-API-Periodic-Table.jpg ^ contentPlace:"3-3" Web Programming: Let's start in the '90s http://prez.mahemoff.com/gtug-webstore/static/images/spice.jpg Dark Ages of Web Programming: Black Art http://upload.wikimedia.org/wikipedia/commons/b/b6/French-gendarme.jpg http://prez.mahemoff.com/gtug-webstore/static/images/1997-hotmail.png ^ contentPlace:"3-3" Talk to the cloud? http://reason.com/assets/mc/tcavanaugh/arnoldtalktohand.jpg ^ contentPlace:"1-1" Ajax Era: Established Practice http://farm3.static.flickr.com/2112/2368225695_7f87aaedba.jpg http://farm6.static.flickr.com/5308/5609334490_928e4b0d18_o.jpg http://flickr.com/photos/37184970@N00/5609334490/ ^ contentPlace:"1-1" HTML5 Era: Application Platform http://creativebits.org/files/html5-logo-1.jpg Input Output Networking Offline ... Input #000 The old thing: Forms and links http://farm1.static.flickr.com/231/463462503_73dc732315_b.jpg http://www.flickr.com/photos/badwsky/463462503/lightbox/ window.addEventListener('deviceorientation', function(ev) { ... } ev.alpha | ev.beta | ev.gamma [z,x,y] http://bit.ly/jsorientation http://farm5.static.flickr.com/4111/5609063459_5a44d3a5b3_o.jpg http://flickr.com/photos/37184970@N00/5609063459/ Geolocation http://farm5.static.flickr.com/4088/4988803970_2f68d61c8e.jpg Geolocation ==== navigator.geolocation.getCurrentPosition ( function(position) { // position.coords.latitude, // position.coords.longitude // ... }, errorHandler, options ); ==== Speech ==== <input x-webkit-speech /> ==== Device API Input: Microphone http://farm5.static.flickr.com/4142/4880170082_33d603dd10_b.jpg http://www.flickr.com/photos/rustysheriff/4880170082/sizes/l/in/photostream/ Device API Input: Camera http://farm2.static.flickr.com/1113/5152413649_5b31df3a58_o.jpg http://www.flickr.com/photos/mrmayo/5152413649/ Device API is here! http://www.buzyblog.com/wp-content/uploads/2011/03/Motorola-Xoom.jpg Output #000 The old thing: text and images http://farm5.static.flickr.com/4090/4988850098_f96f2c4d41_b.jpg http://www.flickr.com/photos/myoldpostcards/4988850098/sizes/l/in/photostream/ Output: CSS3 #000 CSS3 ==== border-radius: 20px; background: -webkit-linear-gradient(top,#cfc,#080); -webkit-transform: rotate(-20deg); -webkit-box-shadow: -30px -30px 15px #300; ==== CSS3 ==== @font-face { font-family: "Cantal"; src: url("cantal.ttf"); } h1 { font-family: "Cantal", "Georgia", serif; } ==== Google Web Fonts 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 http://www.mattwardman.com/blog/wp-content/uploads/2008716-arcade-game-in-your-favicon-big-screendump.gif Actually useful http://3.bp.blogspot.com/_ZaGO7GjCqAI/THOic8LCbtI/AAAAAAAAdFI/24IbFm7PD5I/s640/google-calendar-favicon-2010.png Output: WebGL Output: HTML Video ---- ---- Output: HTML Video ==== <video src="bunny.webm" controls></video> video.play(); video.pause(); console.log(video.duration, video.currentTime); video.ontimeupdate = function() { ... } ==== Canvas-Video Mashup http://static.uxebu.com/tobeytailor/gdd/#slide1 http://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 http://farm6.static.flickr.com/5060/5450465337_9dff430ab9_o.jpg Output: Audio ----