HTML5 Beyond the Hype

2,671 views

Published on

DevLearn12
Join us for a look at HTML5 and discover how it will affect the future of web learning and media. You’ll learn what you need to know, where to focus, and how to move beyond the hype. You’ll learn about new tools appearing in the consumer and corporate environments, and how can to take advantage of them to help your users learn. This session will also introduce you to the five hot features in HTML5 that you can start using today to get you prepared for developing with the new standards.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,671
On SlideShare
0
From Embeds
0
Number of Embeds
1,705
Actions
Shares
0
Downloads
51
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 Beyond the Hype

  1. 1. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML5 Beyond the Hype Nick Floro Nick@sealworks.com Twitter.com/NickFloroLaunchCycle.com - The simple way to manage projects. 11/05/12 1 of 201
  2. 2. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com goals GoalsLaunchCycle.com - The simple way to manage projects. 11/05/12 2 of 201
  3. 3. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com shareLaunchCycle.com - The simple way to manage projects. 11/05/12 3 of 201
  4. 4. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Experiment experimentLaunchCycle.com - The simple way to manage projects. 11/05/12 4 of 201
  5. 5. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 5 of 201
  6. 6. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com ResourcesLaunchCycle.com - The simple way to manage projects. 11/05/12 6 of 201
  7. 7. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com StatsLaunchCycle.com - The simple way to manage projects. 11/05/12 7 of 201
  8. 8. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com 7 billion people on earth.LaunchCycle.com - The simple way to manage projects. 11/05/12 8 of 201
  9. 9. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com 2.2 billion Internet usersLaunchCycle.com - The simple way to manage projects. 11/05/12 9 of 201
  10. 10. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com 1.5 billion TV’sLaunchCycle.com - The simple way to manage projects. 11/05/12 10 of 201
  11. 11. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Currently over 6.2 billion cellphone subscriptions.LaunchCycle.com - The simple way to manage projects. 11/05/12 11 of 201
  12. 12. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com There are only 3.5 billion toothbrushes.LaunchCycle.com - The simple way to manage projects. 11/05/12 12 of 201
  13. 13. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com 1992 to 2002LaunchCycle.com - The simple way to manage projects. 11/05/12 13 of 201
  14. 14. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com 2002 to 2012LaunchCycle.com - The simple way to manage projects. 11/05/12 14 of 201
  15. 15. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com The Web Platform is AcceleratingLaunchCycle.com - The simple way to manage projects. 11/05/12 15 of 201
  16. 16. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Solving Developer Challenges Graphics Location Storage SpeedLaunchCycle.com - The simple way to manage projects. 11/05/12 16 of 201
  17. 17. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com What can we do with HTML5LaunchCycle.com - The simple way to manage projects. 11/05/12 17 of 201
  18. 18. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 18 of 201
  19. 19. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 19 of 201
  20. 20. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 20 of 201
  21. 21. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 21 of 201
  22. 22. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 22 of 201
  23. 23. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Create and deliver everywhere.LaunchCycle.com - The simple way to manage projects. 11/05/12 23 of 201
  24. 24. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com The Web PlatformLaunchCycle.com - The simple way to manage projects. 11/05/12 24 of 201
  25. 25. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Web AppLaunchCycle.com - The simple way to manage projects. 11/05/12 25 of 201
  26. 26. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Web AppLaunchCycle.com - The simple way to manage projects. 11/05/12 26 of 201
  27. 27. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Web App HTML Javascript CSS API’sLaunchCycle.com - The simple way to manage projects. 11/05/12 27 of 201
  28. 28. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 28 of 201
  29. 29. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 29 of 201
  30. 30. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 30 of 201
  31. 31. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Pulse Mobile AppLaunchCycle.com - The simple way to manage projects. 11/05/12 31 of 201
  32. 32. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Pulse Mobile AppLaunchCycle.com - The simple way to manage projects. 11/05/12 32 of 201
  33. 33. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Chrome.AngryBirds.comLaunchCycle.com - The simple way to manage projects. 11/05/12 33 of 201
  34. 34. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 34 of 201
  35. 35. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com SEMANTICS DEVICE ACCESS CSS3 MULTIMEDIA CONNECTIVITY PERFORMANCE & 3D, GRAPHICS OFFLINE & STORAGE INTEGRATION & EFFECTSLaunchCycle.com - The simple way to manage projects. 11/05/12 35 of 201
  36. 36. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML5 = JS + CSS3LaunchCycle.com - The simple way to manage projects. 11/05/12 36 of 201
  37. 37. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Next Generation Mobile Using Browsers Android iOS Windows Phone RIM BlackberryLaunchCycle.com - The simple way to manage projects. 11/05/12 37 of 201
  38. 38. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 38 of 201
  39. 39. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 39 of 201
  40. 40. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 40 of 201
  41. 41. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 41 of 201
  42. 42. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Which browser’s support HTML 5? Chrome Safari Firefox OperaLaunchCycle.com - The simple way to manage projects. 11/05/12 42 of 201
  43. 43. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Which browser’s support HTML 5? Chrome Safari Firefox Opera BETA Internet Explorer 9LaunchCycle.com - The simple way to manage projects. 11/05/12 43 of 201
  44. 44. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Browser Stats 2012 Market Share HTML5 Support Internet Explorer 6-8 28% No Google Chrome 24% Yes Mozilla Firefox 23% Yes Internet Explorer 9 9% Yes Apple Safari 4% Yes iPhone / iPad 4% Yes Opera 2% Yes Google Android 2% Yes Other 4% NoLaunchCycle.com - The simple way to manage projects. 11/05/12 44 of 201
  45. 45. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML 5 in the works...LaunchCycle.com - The simple way to manage projects. 11/05/12 45 of 201
  46. 46. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Advanced Core LanguageLaunchCycle.com - The simple way to manage projects. 11/05/12 46 of 201
  47. 47. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 47 of 201
  48. 48. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML 4LaunchCycle.com - The simple way to manage projects. 11/05/12 48 of 201
  49. 49. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML 5 - Introduces New ElementsLaunchCycle.com - The simple way to manage projects. 11/05/12 49 of 201
  50. 50. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Improve Web AppsLaunchCycle.com - The simple way to manage projects. 11/05/12 50 of 201
  51. 51. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 51 of 201
  52. 52. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com chalk.37signals.comLaunchCycle.com - The simple way to manage projects. 11/05/12 52 of 201
  53. 53. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 53 of 201
  54. 54. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Flow chart CompatibilityLaunchCycle.com - The simple way to manage projects. 11/05/12 54 of 201
  55. 55. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Flow chart Replaces: XHTML 1.0 & Dom2html with new API’sLaunchCycle.com - The simple way to manage projects. 11/05/12 55 of 201
  56. 56. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Improve Handling of ErrorsLaunchCycle.com - The simple way to manage projects. 11/05/12 56 of 201
  57. 57. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 57 of 201
  58. 58. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Focus on the AudienceLaunchCycle.com - The simple way to manage projects. 11/05/12 58 of 201
  59. 59. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 59 of 201
  60. 60. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 60 of 201
  61. 61. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 61 of 201
  62. 62. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 62 of 201
  63. 63. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Drawing on the Web FlashLaunchCycle.com - The simple way to manage projects. 11/05/12 63 of 201
  64. 64. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Canvas & SVGLaunchCycle.com - The simple way to manage projects. 11/05/12 64 of 201
  65. 65. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 65 of 201
  66. 66. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 66 of 201
  67. 67. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Scalable Vector Graphics | SVGLaunchCycle.com - The simple way to manage projects. 11/05/12 67 of 201
  68. 68. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Vector Graphics Scale & Look Great!LaunchCycle.com - The simple way to manage projects. 11/05/12 68 of 201
  69. 69. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 69 of 201
  70. 70. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Demo’s • First Person Gifter (FF) • Population Demo (FF) • German Election Atlas (Safari) • Mozilla Download Center (FF)LaunchCycle.com - The simple way to manage projects. 11/05/12 70 of 201
  71. 71. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com 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. 11/05/12 71 of 201
  72. 72. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML 5 Support canvas / svg £ £ £ £ £ video geolocation app cache database workersLaunchCycle.com - The simple way to manage projects. 11/05/12 72 of 201
  73. 73. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Quake II - Browser OnlyLaunchCycle.com - The simple way to manage projects. 11/05/12 73 of 201
  74. 74. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Quake II - Browser OnlyLaunchCycle.com - The simple way to manage projects. 11/05/12 74 of 201
  75. 75. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com 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. 11/05/12 75 of 201
  76. 76. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com VideoLaunchCycle.com - The simple way to manage projects. 11/05/12 76 of 201
  77. 77. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com The Production Process Capture to delivery and beyond Video / Audio Assets Compression Authoring DeliveryLaunchCycle.com - The simple way to manage projects. 11/05/12 77 of 201
  78. 78. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Standards Are Everywhere NTSC/ RedBook FM MPEG-2 PAL AC-3 DV JPEG MPEG- 1/ MPEG- 4 audioLaunchCycle.com - The simple way to manage projects. 11/05/12 78 of 201
  79. 79. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Guidelines for Compression Pixels HD 1080i 1920 x 1080 720P 1280 x 720 DV 720 x 486LaunchCycle.com - The simple way to manage projects. 11/05/12 79 of 201
  80. 80. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Guidelines for Compression Content Placement 320 x 240LaunchCycle.com - The simple way to manage projects. 11/05/12 80 of 201
  81. 81. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Guidelines for Compression Selecting a Size 640 x 480 512 x 384 320 x 240LaunchCycle.com - The simple way to manage projects. 11/05/12 81 of 201
  82. 82. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 82 of 201
  83. 83. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 83 of 201
  84. 84. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 84 of 201
  85. 85. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Guidelines for Compression Frame Rate 29.97 fps 15 fpsLaunchCycle.com - The simple way to manage projects. 11/05/12 85 of 201
  86. 86. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Guidelines for Compression 2 Pass Variable Bit RateLaunchCycle.com - The simple way to manage projects. 11/05/12 86 of 201
  87. 87. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Guidelines for Compression 2 Pass Variable Bit RateLaunchCycle.com - The simple way to manage projects. 11/05/12 87 of 201
  88. 88. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Video Compression HTML 5 Options Flash H264 | MPEG 4 WebM Ogg Theora H264 Apple | Microsoft Google AdobeLaunchCycle.com - The simple way to manage projects. 11/05/12 88 of 201
  89. 89. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com 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. 11/05/12 89 of 201
  90. 90. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com www.longtailvideo.comLaunchCycle.com - The simple way to manage projects. 11/05/12 90 of 201
  91. 91. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Smart PhonesLaunchCycle.com - The simple way to manage projects. 11/05/12 91 of 201
  92. 92. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com brightcove.comLaunchCycle.com - The simple way to manage projects. 11/05/12 92 of 201
  93. 93. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML 5 Support canvas / svg £ £ £ £ £ video £ £ £ £ £ geolocation app cache database workersLaunchCycle.com - The simple way to manage projects. 11/05/12 93 of 201
  94. 94. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com geolocationLaunchCycle.com - The simple way to manage projects. 11/05/12 94 of 201
  95. 95. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 95 of 201
  96. 96. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 96 of 201
  97. 97. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 97 of 201
  98. 98. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 98 of 201
  99. 99. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com // the geolocation api brings browser based location to your appsLaunchCycle.com - The simple way to manage projects. 11/05/12 99 of 201
  100. 100. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com www.seeknspell.comLaunchCycle.com - The simple way to manage projects. 11/05/12 100 of 201
  101. 101. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com O C A R T P www.seeknspell.comLaunchCycle.com - The simple way to manage projects. 11/05/12 101 of 201
  102. 102. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com O C A R T P www.seeknspell.comLaunchCycle.com - The simple way to manage projects. 11/05/12 102 of 201
  103. 103. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML 5 Support canvas / svg £ £ £ £ £ video £ £ £ £ £ geolocation £ £ £ £ £ app cache database workersLaunchCycle.com - The simple way to manage projects. 11/05/12 103 of 201
  104. 104. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com app cache & databaseLaunchCycle.com - The simple way to manage projects. 11/05/12 104 of 201
  105. 105. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 105 of 201
  106. 106. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com // database and app cache store user data and app resources locallyLaunchCycle.com - The simple way to manage projects. 11/05/12 106 of 201
  107. 107. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 107 of 201
  108. 108. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML 5 Support canvas / svg £ £ £ £ £ video £ £ £ £ £ geolocation £ £ £ £ £ app cache £ £ £ £ £ database £ £ £ £ £ workersLaunchCycle.com - The simple way to manage projects. 11/05/12 108 of 201
  109. 109. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. web workers 11/05/12 109 of 201
  110. 110. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML 5 More PowerLaunchCycle.com - The simple way to manage projects. 11/05/12 110 of 201
  111. 111. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com // web workers defines an API for running background scriptsLaunchCycle.com - The simple way to manage projects. 11/05/12 111 of 201
  112. 112. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Demo’s Bad Primes (FF 3.5) Good Primes (FF 3.5) Motion Tracker (FF)LaunchCycle.com - The simple way to manage projects. 11/05/12 112 of 201
  113. 113. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML 5 Support canvas / svg £ £ £ £ £ video £ £ £ £ £ geolocation £ £ £ £ £ app cache £ £ £ £ £ database £ £ £ £ £ workers £ £ £ £ £LaunchCycle.com - The simple way to manage projects. 11/05/12 113 of 201
  114. 114. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com CSS 3 Forms JavaScript Effects/TransitionsLaunchCycle.com - The simple way to manage projects. 11/05/12 114 of 201
  115. 115. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Testing Code Test on Windows 8, 7, Vista, XP • Internet Explorer 6, 7, 8, 9 • Firefox 4.0, 10-13 + • Chrome 15 - 19 + Test on OS X − Safari 4, 5+ − Firefox 4.0, 10-13 + − Chrome 15 - 19 + Test on Mobile − iOS 4.x - 6.x − Android 2.x - 4.x − Blackberry, Windows 7-8 Phone − Tablet vs PhoneLaunchCycle.com - The simple way to manage projects. 11/05/12 115 of 201
  116. 116. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com How should we Design?LaunchCycle.com - The simple way to manage projects. 11/05/12 116 of 201
  117. 117. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Focus on the AudienceLaunchCycle.com - The simple way to manage projects. 11/05/12 1 117 of 201
  118. 118. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Content 2 is the keyLaunchCycle.com - The simple way to manage projects. 11/05/12 118 of 201
  119. 119. 3DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Transparent InterfaceLaunchCycle.com - The simple way to manage projects. 11/05/12 119 of 201
  120. 120. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 120 of 201
  121. 121. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 121 of 201
  122. 122. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 122 of 201
  123. 123. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Keep it SimpleLaunchCycle.com - The simple way to manage projects. 11/05/12 123 of 201
  124. 124. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 124 of 201
  125. 125. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Design: Keep it SimpleLaunchCycle.com - The simple way to manage projects. 11/05/12 125 of 201
  126. 126. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com How do we start?LaunchCycle.com - The simple way to manage projects. 11/05/12 126 of 201
  127. 127. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com SketchLaunchCycle.com - The simple way to manage projects. 11/05/12 127 of 201
  128. 128. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 128 of 201
  129. 129. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 129 of 201
  130. 130. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com WireframesLaunchCycle.com - The simple way to manage projects. 11/05/12 130 of 201
  131. 131. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com www.balsamiq.comLaunchCycle.com - The simple way to manage projects. 11/05/12 131 of 201
  132. 132. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Sketchy & iMockUpsLaunchCycle.com - The simple way to manage projects. 11/05/12 132 of 201
  133. 133. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com KeynoteKungFu.comLaunchCycle.com - The simple way to manage projects. 11/05/12 133 of 201
  134. 134. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com http://goo.gl/kMn4bLaunchCycle.com - The simple way to manage projects. 11/05/12 134 of 201
  135. 135. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com www.uistencils.comLaunchCycle.com - The simple way to manage projects. 11/05/12 135 of 201
  136. 136. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com WireframesLaunchCycle.com - The simple way to manage projects. 11/05/12 136 of 201
  137. 137. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Design • Focus on audience • Content is key • Transparent interfaceLaunchCycle.com - The simple way to manage projects. 11/05/12 137 of 201
  138. 138. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Design for FlexibilityLaunchCycle.com - The simple way to manage projects. 11/05/12 138 of 201
  139. 139. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 139 of 201
  140. 140. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 140 of 201
  141. 141. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 141 of 201
  142. 142. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 142 of 201
  143. 143. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 143 of 201
  144. 144. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 144 of 201
  145. 145. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 145 of 201
  146. 146. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 146 of 201
  147. 147. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 147 of 201
  148. 148. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 148 of 201
  149. 149. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 149 of 201
  150. 150. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 150 of 201
  151. 151. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Pixels & Aspect Ratio Selecting a Size Android Xoom 1280 x 720 HTC Incredible iPad 800 x 480 1024 x 768 2048 x 1536 iPhone 4 960 x 640 Droid 854 x 480 iPhone 480 x 320LaunchCycle.com - The simple way to manage projects. 11/05/12 151 of 201
  152. 152. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Technology is a tool.LaunchCycle.com - The simple way to manage projects. 11/05/12 152 of 201
  153. 153. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com What’s Next Determining a Plan Team Skills Team Work Strategy Tools Delivery Skills Flow ChallengesLaunchCycle.com - The simple way to manage projects. 11/05/12 153 of 201
  154. 154. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Projects How do we handle? Current Content New ProjectsLaunchCycle.com - The simple way to manage projects. 11/05/12 154 of 201
  155. 155. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com ResourcesLaunchCycle.com - The simple way to manage projects. 11/05/12 155 of 201
  156. 156. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com ResourcesLaunchCycle.com - The simple way to manage projects. 11/05/12 156 of 201
  157. 157. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com html5rocks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 157 of 201
  158. 158. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com lynda.comLaunchCycle.com - The simple way to manage projects. 11/05/12 158 of 201
  159. 159. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com teamtreehouse.comLaunchCycle.com - The simple way to manage projects. 11/05/12 159 of 201
  160. 160. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Caniuse.comLaunchCycle.com - The simple way to manage projects. 11/05/12 160 of 201
  161. 161. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 161 of 201
  162. 162. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com tumultco.comLaunchCycle.com - The simple way to manage projects. 11/05/12 162 of 201
  163. 163. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com animatable.comLaunchCycle.com - The simple way to manage projects. 11/05/12 163 of 201
  164. 164. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com html5demos.comLaunchCycle.com - The simple way to manage projects. 11/05/12 164 of 201
  165. 165. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com html5gallery.comLaunchCycle.com - The simple way to manage projects. 11/05/12 165 of 201
  166. 166. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com jquery.comLaunchCycle.com - The simple way to manage projects. 11/05/12 166 of 201
  167. 167. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com www.sencha.comLaunchCycle.com - The simple way to manage projects. 11/05/12 167 of 201
  168. 168. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com www.css3.infoLaunchCycle.com - The simple way to manage projects. 11/05/12 168 of 201
  169. 169. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com www.uxmag.comLaunchCycle.com - The simple way to manage projects. 11/05/12 169 of 201
  170. 170. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com diveintohtml5.infoLaunchCycle.com - The simple way to manage projects. 11/05/12 170 of 201
  171. 171. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com typekit.comLaunchCycle.com - The simple way to manage projects. 11/05/12 171 of 201
  172. 172. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com CSS3 for Web Designers Dan Cederholm | A Book Apart aBookApart.comLaunchCycle.com - The simple way to manage projects. 11/05/12 172 of 201
  173. 173. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com RESPONSIVE WEB DESIGN ETHAN MARCOTTE | A Book Apart aBookApart.comLaunchCycle.com - The simple way to manage projects. 11/05/12 173 of 201
  174. 174. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com HTML5 for Web Designers JEREMY KEITH | A Book Apart aBookApart.comLaunchCycle.com - The simple way to manage projects. 11/05/12 174 of 201
  175. 175. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com www.gamesalad.comLaunchCycle.com - The simple way to manage projects. 11/05/12 175 of 201
  176. 176. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com www.kesiev.com/akihabara/LaunchCycle.com - The simple way to manage projects. 11/05/12 176 of 201
  177. 177. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com http://bit.ly/dfCTw3 — Great presentation on HTML5 written IN HTML5.  View it in Chrome for results. http://bit.ly/bheBOx — "How to Make All Browsers Render HTML5 Mark-up Correctly - Even I good overview of how to get browsers to behave, but doesnt go into much detail beyond that http://bit.ly/cnFDoq — Sample code on how to get <video> to work for everyone (with a fallba MSIE). http://bit.ly/9TUF4j — Sublime video (for consistent UI in <video> tags, with Flash fallback) http://bit.ly/buBmp6 — Basic tutorial on using the SQLite-compatible database in your browse http://bit.ly/csCqFG — An overview of all forms of client-side storage. http://bit.ly/aZ4cBu — "HTML 5: Features you want desperately but still cant use".  Great talk Hickson from 2008.  Its a little out of date now, but there are lots of great demos in there. http://bit.ly/bi29bT — Mark Pilgrims HTML5 Book "Dive Into HTML5". http://bit.ly/dkbgAZ — Modernizr is a JS tool that helps you detect support for HTML5 feature http://bit.ly/aFfJng — Nice chart of feature support by browser. http://bit.ly/br04am — IE7.js and IE8.js, which I mentioned in my talk, help make MSIE perform a standards-compliant browser. http://bit.ly/bwoI4N — Nissan Leaf product page, made using "HTML5" (technically its still XH using a lot of JS/SVG/etc to skip the need for Flash in many places). www.kesiev.com/akihabara/LaunchCycle.com - The simple way to manage projects. 11/05/12 177 of 201
  178. 178. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Go Play, Experiment, Dream Apple iOSLaunchCycle.com - The simple way to manage projects. 11/05/12 178 of 201
  179. 179. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Search Flickr.com for iPad UILaunchCycle.com - The simple way to manage projects. 11/05/12 179 of 201
  180. 180. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com smashingmagazine.comLaunchCycle.com - The simple way to manage projects. 11/05/12 180 of 201
  181. 181. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com www.longtailvideo.comLaunchCycle.com - The simple way to manage projects. 11/05/12 181 of 201
  182. 182. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Screencasts 101 Mini-Session www.jingproject.comLaunchCycle.com - The simple way to manage projects. 11/05/12 182 of 201
  183. 183. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 183 of 201
  184. 184. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 184 of 201
  185. 185. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 185 of 201
  186. 186. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 186 of 201
  187. 187. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 187 of 201
  188. 188. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Explore Pictures Blog Video Audio Micro-blogging 3D Models ePortfolios Course Management System Multiplayer EnvironmentLaunchCycle.com - The simple way to manage projects. 11/05/12 188 of 201
  189. 189. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com GamersLaunchCycle.com - The simple way to manage projects. 11/05/12 189 of 201
  190. 190. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Capture & AnalyzeLaunchCycle.com - The simple way to manage projects. 11/05/12 190 of 201
  191. 191. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Using CoverFlow view and Preview of GraphicsLaunchCycle.com - The simple way to manage projects. 11/05/12 191 of 201
  192. 192. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Design Scrapbook: iPhoto | LittleSnapperLaunchCycle.com - The simple way to manage projects. 11/05/12 192 of 201
  193. 193. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 193 of 201
  194. 194. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com wordpress.comLaunchCycle.com - The simple way to manage projects. 11/05/12 194 of 201
  195. 195. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com open over 11,500LaunchCycle.com - The simple way to manage projects. 11/05/12 195 of 201
  196. 196. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 196 of 201
  197. 197. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com evernote.comLaunchCycle.com - The simple way to manage projects. 11/05/12 197 of 201
  198. 198. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.comLaunchCycle.com - The simple way to manage projects. 11/05/12 198 of 201
  199. 199. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Don’t SettleLaunchCycle.com - The simple way to manage projects. 11/05/12 199 of 201
  200. 200. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com launchcycle.comLaunchCycle.com - The simple way to manage projects. 11/05/12 200 of 201
  201. 201. DevLearn12 : HTML5 presented by Nick Floro Nick@sealworks.com Q&A Nick Floro sealworks.com nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloroLaunchCycle.com - The simple way to manage projects. 11/05/12 201 of 201

×