Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla...
-
Upload
irma-skinner -
Category
Documents
-
view
218 -
download
0
Transcript of Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla...
![Page 1: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/1.jpg)
Chasing the evolving webWUX202
Aaron PowellSenior Developer, Technical SpecialistReadify
![Page 2: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/2.jpg)
![Page 3: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/3.jpg)
Why?
IE 10 Platform Previews – 8 to 12 weekshttp://blogs.msdn.com/b/ie/archive/2011/04/12/native-html5-first-ie10-platform-preview-available-for-download.aspx
Firefox release – 14 weekshttps://developer.mozilla.org/devnews/index.php/2011/04/07/new-development-channels-and-repositories-for-rapid-releases/
Chrome release – 12 weekshttps://docs.google.com/present/view?id=dg63dpc6_4d7vkk6ch&pli=1
![Page 4: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/4.jpg)
Demo
HTML5 Boilerplate
![Page 5: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/5.jpg)
Recap – HTML5 Boilerplate
Gets you started on a new projectIncludes defaults like
CSS normaliserjQueryGoogle AnalyticsFolder structure
![Page 6: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/6.jpg)
HTML5, CSS3, ES5
Some browsers have partial implementationsBrowser prefixes often usedNew releases support more featuresOlder browsers still existClients still want them supported
![Page 7: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/7.jpg)
What Works?
User Agent sniffingBadLocks into the idea of “Browsers I understand”User Agent can be faked
Feature detectionQuery the browser to find out what it supportsHarder for the browser to lie
![Page 8: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/8.jpg)
Demo
Feature Detection
![Page 9: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/9.jpg)
Recap – Feature Detection
Don’t user agent sniffUser agents can be faked
Query the browser for supportIf support doesn’t exist use a polyfill or shim
Polyfill – adds existing functionalityShim – replicate functionality the best way you can
![Page 10: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/10.jpg)
Complex Feature Detection
@font-face Canvas Canvas Text WebGL HTML5 Audio HTML5 Video rgba hsla
border-image border-shadow text-shadow Multiple Backgrounds background-size Opacity CSS animation CSS columns
CSS gradients CSS reflections CSS 2D transforms
CSS 3D transforms
Flexible box model CSS transitions Geolocation API localStorage
sessionStorage Web Workers applicationCache SVG Inline SVG SVG Clip Paths SMIL Web SQL DB
IndexedDB Web Sockets Hash changed event
History management Drap & Drop Cross-window
messaging Touch
![Page 11: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/11.jpg)
Complex Feature Detection
How do you detect@font-faceNew input attributesNew input typesCSS3 features
Lots of complex JavaScriptStill have to decide how to deal with the feature
![Page 12: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/12.jpg)
Demo
Modernizr and YepNope.js
![Page 13: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/13.jpg)
Recap – Modernizr & Yepnope.js
Modernizr does feature supportYepnope.js allows conditional loading of featuresModernizr is extensible
![Page 14: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/14.jpg)
Making It Pretty
SVGs are sexyGreat for complex dynamic graphics
CanvasPositioning, manipulating, tracking objects can be trickyCan’t talk HTML5 without it
![Page 15: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/15.jpg)
Demo
Raphael and EaselJS
![Page 16: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/16.jpg)
Recap - Raphael
Awesome SVG librarySVGs make for very powerful graphicsJavaScript API
![Page 17: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/17.jpg)
Recap - EaselJS
EaselJS for CanvasJavaScript APIs
![Page 18: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/18.jpg)
Simplifying Common Tasks
Working with AJAX$.ajax?Caching?RESTful?
Browser storagelocalStorage?sessionStorage?Cookies?
Cross-component communication?
![Page 19: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/19.jpg)
Demo
AmplifyJS
![Page 20: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/20.jpg)
Recap - AmplifyJS
Pub/ SubStorageSimplified Request/ ResponseEach part available separately
![Page 21: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/21.jpg)
MVCVVMVP
Server style coding, but in the browserHandling hashbangsBinding data to UICreating data moudles
![Page 22: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/22.jpg)
Demo
Knockout and Backbone
![Page 23: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/23.jpg)
Recap – Knockout
MVVM in JavaScriptDeclarative bindingVery familiar when coming from Silverlight/ WPF
![Page 24: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/24.jpg)
Recap - Backbone
MVC in JavaScriptUses JavaScript for building whole page
![Page 25: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/25.jpg)
Links
http://html5boilerplate.comhttp://modernizr.comhttp://yepnopejs.comhttp://raphaeljs.comhttp://easeljs.comhttp://amplifyjs.comhttp://knockoutjs.comhttp://backbonejs.comMe: @slace / [email protected] / http://aaron-powell.com
![Page 26: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/26.jpg)
Evaluate your sessionson CommNet and go inthe draw to win instantprizes
![Page 27: Demo @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS.](https://reader030.fdocuments.net/reader030/viewer/2022032722/56649cdc5503460f949a7097/html5/thumbnails/27.jpg)
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a
commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.