Understanding HTML5 DevLearn

Learning Solutions : Nick@sealworks.com Intro to HTML5 Nick@sealworks.com Twitter.com/NickFloro sealworks.com HTML5 Understanding How it Will Improve Our LearningLaunchCycle.com - The simple way to manage projects. 03/27/12 1 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 AppLaunchCycle.com - The simple way to manage projects. 03/27/12 2 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 The Web PlatformLaunchCycle.com - The simple way to manage projects. 03/27/12 3 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Web AppLaunchCycle.com - The simple way to manage projects. 03/27/12 4 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Web AppLaunchCycle.com - The simple way to manage projects. 03/27/12 5 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Web App HTML Javascript CSS API’sLaunchCycle.com - The simple way to manage projects. 03/27/12 6 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5LaunchCycle.com - The simple way to manage projects. 03/27/12 7 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Pulse for MobileLaunchCycle.com - The simple way to manage projects. 03/27/12 11 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 What can we do with HTML5LaunchCycle.com - The simple way to manage projects. 03/27/12 14 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 HTML5 = JS + CSS3LaunchCycle.com - The simple way to manage projects. 03/27/12 19 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 SEMANTICS DEVICE ACCESS CSS3 MULTIMEDIA CONNECTIVITY PERFORMANCE & 3D, GRAPHICS OFFLINE & STORAGE INTEGRATION & EFFECTSLaunchCycle.com - The simple way to manage projects. 03/27/12 20 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 The Web Platform is Accelerating 2002 WebKitLaunchCycle.com - The simple way to manage projects. 03/27/12 22 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Next Generation Mobile Using Webkit Android iOS RIM BlackberryLaunchCycle.com - The simple way to manage projects. 03/27/12 23 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Solving Developer Challenges Graphics Location Storage SpeedLaunchCycle.com - The simple way to manage projects. 03/27/12 28 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Which browser’s support HTML 5? Chrome Safari Firefox OperaLaunchCycle.com - The simple way to manage projects. 03/27/12 29 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Which browser’s support HTML 5? Chrome Safari Firefox Opera BETA Internet Explorer 9LaunchCycle.com - The simple way to manage projects. 03/27/12 30 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 HTML 5 in the works...LaunchCycle.com - The simple way to manage projects. 03/27/12 31 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Advanced Core LanguageLaunchCycle.com - The simple way to manage projects. 03/27/12 32 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 HTML 4LaunchCycle.com - The simple way to manage projects. 03/27/12 34 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 HTML 5 - Introduces New ElementsLaunchCycle.com - The simple way to manage projects. 03/27/12 35 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Improve Web AppsLaunchCycle.com - The simple way to manage projects. 03/27/12 36 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Flow chart CompatibilityLaunchCycle.com - The simple way to manage projects. 03/27/12 40 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Flow chart Replaces: XHTML 1.0 & Dom2html with new API’sLaunchCycle.com - The simple way to manage projects. 03/27/12 41 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Improve Handling of ErrorsLaunchCycle.com - The simple way to manage projects. 03/27/12 42 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Drawing on the Web FlashLaunchCycle.com - The simple way to manage projects. 03/27/12 44 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Canvas & SVGLaunchCycle.com - The simple way to manage projects. 03/27/12 45 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Scalable Vector Graphics | SVGLaunchCycle.com - The simple way to manage projects. 03/27/12 47 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Vector Graphics Scale & Look Great!LaunchCycle.com - The simple way to manage projects. 03/27/12 48 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Demo’s • Mozilla Download Center (FF) • First Person Gifter (FF) • Population Demo (FF) • German Election Atlas (Safari)LaunchCycle.com - The simple way to manage projects. 03/27/12 50 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 When Canvas or SVG? SVG -> High level Canvas -> Low level • Import/Export • No mouse interaction • Easy UIs • High Animation • Interactive • JS Centric • Medium Animation • More Bookkeeping • Tree of objects • PixelsLaunchCycle.com - The simple way to manage projects. 03/27/12 51 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 HTML 5 Support canvas / svg £ £ £ £ video geolocation app cache database workersLaunchCycle.com - The simple way to manage projects. 03/27/12 52 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Quake II - Browser OnlyLaunchCycle.com - The simple way to manage projects. 03/27/12 53 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Quake II - Browser OnlyLaunchCycle.com - The simple way to manage projects. 03/27/12 54 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Quake II - Browser Only WebGL 3D graphics HTML 5 Canvas HTML 5 Audio HTML 5 Web Sockets HTML 5 Local StorageLaunchCycle.com - The simple way to manage projects. 03/27/12 55 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 VideoLaunchCycle.com - The simple way to manage projects. 03/27/12 56 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 The Production Process Capture to delivery and beyond Video / Audio Assets Compression Authoring DeliveryLaunchCycle.com - The simple way to manage projects. 03/27/12 57 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Video Compression HTML 5 Options Flash H264 | MPEG 4 WebM Ogg Theora H264 Apple | Microsoft Google AdobeLaunchCycle.com - The simple way to manage projects. 03/27/12 61 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Guidelines for Compression Tips & Hints • Video – Frame Rate: 15 fps – Data Rate Target 800-1200 kbs • Audio – 16bit / 22khz / Mono / 64 kbs • Delivery – Flash: H264 – HTML5: H264LaunchCycle.com - The simple way to manage projects. 03/27/12 62 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.longtailvideo.comLaunchCycle.com - The simple way to manage projects. 03/27/12 63 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Easy Access to Video Flip $100 to $200LaunchCycle.com - The simple way to manage projects. 03/27/12 64 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 brightcove.comLaunchCycle.com - The simple way to manage projects. 03/27/12 65 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation app cache database workersLaunchCycle.com - The simple way to manage projects. 03/27/12 66 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 geolocationLaunchCycle.com - The simple way to manage projects. 03/27/12 67 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 // the geolocation api brings browser based location to your appsLaunchCycle.com - The simple way to manage projects. 03/27/12 71 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 O C A R T P www.seeknspell.comLaunchCycle.com - The simple way to manage projects. 03/27/12 72 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation £ £ £ iPhone £ app cache database workersLaunchCycle.com - The simple way to manage projects. 03/27/12 73 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 app cache & databaseLaunchCycle.com - The simple way to manage projects. 03/27/12 74 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation £ £ £ iPhone £ app cache £ £ £ £ mobile database £ £ £ £ mobile workersLaunchCycle.com - The simple way to manage projects. 03/27/12 77 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5LaunchCycle.com - The simple way to manage projects. web workers 03/27/12 78 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 HTML 5 More PowerLaunchCycle.com - The simple way to manage projects. 03/27/12 79 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 // web workers defines an API for running background scriptsLaunchCycle.com - The simple way to manage projects. 03/27/12 80 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Demo’s Bad Primes (FF 3.5) Good Primes (FF 3.5) Motion Tracker (FF)LaunchCycle.com - The simple way to manage projects. 03/27/12 81 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation £ £ £ iPhone £ app cache £ £ £ £ mobile database £ £ £ £ mobile workers £ £ £ £LaunchCycle.com - The simple way to manage projects. 03/27/12 82 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 CSS 3 Forms JavaScript Effects/TransitionsLaunchCycle.com - The simple way to manage projects. 03/27/12 83 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Test for Usability Test on Windows 7, Vista, XP • Internet Explorer 6, 7, 8, 9 • Firefox 3.5, 3.6, 4.0 + • Chrome 5 - 17 Test on OS X − Safari 4 − Firefox 3.5, 3.6, 4.0 +11 − Chrome 5 - 17 Test Mobile − iOS 4 & 5 − Android 2.x-4.x − Blackberry, Windows 7 PhoneLaunchCycle.com - The simple way to manage projects. 03/27/12 84 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Google AnalyticsLaunchCycle.com - The simple way to manage projects. 03/27/12 85 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Google AnalyticsLaunchCycle.com - The simple way to manage projects. 03/27/12 86 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Form Factors Android Xoom 1280 x 720 HTC Incredible iPad 800 x 480 1024 x 768 iPhone 4 960 x 640 Droid 854 x 480 iPhone 480 x 320LaunchCycle.com - The simple way to manage projects. 03/27/12 97 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Design for FlexibilityLaunchCycle.com - The simple way to manage projects. 03/27/12 98 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Thank You Nick Floro sealworks interactive studios nick@sealworks.com www.sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickﬂoroLaunchCycle.com - The simple way to manage projects. 03/27/12 99 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 ResourcesLaunchCycle.com - The simple way to manage projects. 03/27/12 100 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 html5rocks.comLaunchCycle.com - The simple way to manage projects. 03/27/12 101 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.thinkvitamin.comLaunchCycle.com - The simple way to manage projects. 03/27/12 102 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 http://www.caniuse.com/LaunchCycle.com - The simple way to manage projects. 03/27/12 103 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 labs.adobe.com/technologies/wallaby/LaunchCycle.com - The simple way to manage projects. 03/27/12 105 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 tumultco.comLaunchCycle.com - The simple way to manage projects. 03/27/12 106 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 animatable.comLaunchCycle.com - The simple way to manage projects. 03/27/12 107 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 html5demos.comLaunchCycle.com - The simple way to manage projects. 03/27/12 108 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.sencha.comLaunchCycle.com - The simple way to manage projects. 03/27/12 109 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.css3.infoLaunchCycle.com - The simple way to manage projects. 03/27/12 110 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.uxmag.comLaunchCycle.com - The simple way to manage projects. 03/27/12 111 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 diveintohtml5.infoLaunchCycle.com - The simple way to manage projects. 03/27/12 112 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 CSS3 for Web Designers Dan Cederholm | A Book ApartLaunchCycle.com - The simple way to manage projects. 03/27/12 113 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.gamesalad.comLaunchCycle.com - The simple way to manage projects. 03/27/12 114 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Go Play, Experiment, Dream Apple iOSLaunchCycle.com - The simple way to manage projects. 03/27/12 115 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Search Flickr.com for iPad UILaunchCycle.com - The simple way to manage projects. 03/27/12 116 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.smashingmagazine.comLaunchCycle.com - The simple way to manage projects. 03/27/12 117 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.longtailvideo.comLaunchCycle.com - The simple way to manage projects. 03/27/12 118 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.launchcycle.comLaunchCycle.com - The simple way to manage projects. 03/27/12 124 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Explore Pictures Blog Video Audio Micro-blogging 3D Models ePortfolios Course Management System Multiplayer EnvironmentLaunchCycle.com - The simple way to manage projects. 03/27/12 125 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 Thank You Nick Floro sealworks interactive studios nick@sealworks.com www.sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickﬂoroLaunchCycle.com - The simple way to manage projects. 03/27/12 126 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.twitter.comLaunchCycle.com - The simple way to manage projects. 03/27/12 127 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.lrnchat.comLaunchCycle.com - The simple way to manage projects. 03/27/12 128 of 129

Learning Solutions : Nick@sealworks.com Intro to HTML5 www.TED.comLaunchCycle.com - The simple way to manage projects. 03/27/12 129 of 129

http://nickfloro.com	401
http://seallab.com	60
http://www.nickfloro.com.php5-10.ord1-1.websitetestlink.com	43
http://sealworks.com	37
http://www.sealworks.com	21
http://www.nickfloro.com	5
http://a0.twimg.com	2
http://us-w1.rockmelt.com	2
http://paper.li	2
http://www.scoop.it	1
http://tweetedtimes.com	1
http://posterous.com	1
http://www.seallab.com	1

Understanding HTML5 DevLearn

by Nick Floro

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 577

Statistics