Designing & Developing Learning Using HTML5 @ Training 2014 #trg14

1,696 views
1,486 views

Published on

Join us for a look at what HTML5 is and how people use it today to deliver the next generation of learning and applications. What can you learn from the buzz and new tools appearing in the consumer and corporate environments, and how can you take advantage of them to help your users learn? You'll learn what you need to consider in designing content as well as get technical guidelines. Get an introduction to five hot features in HTML 5 that you can start using today, and prepare for developing with the new standards. You will learn about seven challenges in order to make sure your first project a success as well as whether to launch a native app or web app.

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,696
On SlideShare
0
From Embeds
0
Number of Embeds
660
Actions
Shares
0
Downloads
47
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Designing & Developing Learning Using HTML5 @ Training 2014 #trg14

  1. 1. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Designing & Developing Learning Using HTML5 Nick Floro Nick@sealworks.com Twitter.com/NickFloro HTML5 02/05/14 1 of 114
  2. 2. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com goals Goals HTML5 02/05/14 2 of 114
  3. 3. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com share HTML5 02/05/14 3 of 114
  4. 4. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Experiment experiment & play HTML5 02/05/14 4 of 114
  5. 5. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Development Paths Rapid Tools HTML5 Flash LMS 02/05/14 desktop 5 of 114
  6. 6. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Development Paths Rapid Tools Flash desktop LMS HTML Tools HTML5 HTML5 02/05/14 mobile 6 of 114
  7. 7. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com What can we do with HTML5 HTML5 02/05/14 7 of 114
  8. 8. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com html5demos.com HTML5 02/05/14 8 of 114
  9. 9. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com html5demos.com HTML5 02/05/14 9 of 114
  10. 10. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com html5demos.com HTML5 02/05/14 10 of 114
  11. 11. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com html5demos.com HTML5 02/05/14 11 of 114
  12. 12. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Chrome HTML5 02/05/14 12 of 114
  13. 13. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Create and deliver everywhere. HTML5 02/05/14 13 of 114
  14. 14. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com How did we get here? 1992 to 2014 HTML5 02/05/14 14 of 114
  15. 15. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com SEMANTICS DEVICE ACCESS CSS3 MULTIMEDIA CONNECTIVITY HTML5 PERFORMANCE & INTEGRATION 3D, GRAPHICS & EFFECTS 02/05/14 OFFLINE & STORAGE 15 of 114
  16. 16. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com HTML5 Javascript HTML5 CSS 02/05/14 API’s 16 of 114
  17. 17. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Create a Road Map HTML5 02/05/14 17 of 114
  18. 18. Training 2014 Nick Floro | nick@sealworks.com Content Development design tools trainingmagnetwork.com Delivery devices Create a Road Map HTML5 02/05/14 18 of 114
  19. 19. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Next Generation Mobile Using Browsers Android HTML5 iOS 02/05/14 Windows Phone 19 of 114
  20. 20. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 20 of 114
  21. 21. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 21 of 114
  22. 22. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 22 of 114
  23. 23. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 23 of 114
  24. 24. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Which browser’s support HTML 5? Chrome HTML5 Safari Firefox 02/05/14 Opera 24 of 114
  25. 25. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Which browser’s support HTML 5? Chrome Safari Firefox Internet Explorer 9 HTML5 02/05/14 Opera BETA 25 of 114
  26. 26. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com HTML 5 in the works... HTML5 02/05/14 26 of 114
  27. 27. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Advanced Core Language HTML5 02/05/14 27 of 114
  28. 28. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 28 of 114
  29. 29. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com HTML 4 HTML5 02/05/14 29 of 114
  30. 30. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com HTML 5 - Introduces New Elements HTML5 02/05/14 30 of 114
  31. 31. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Improve Web Apps HTML5 02/05/14 31 of 114
  32. 32. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 32 of 114
  33. 33. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com chalk.37signals.com HTML5 02/05/14 33 of 114
  34. 34. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 34 of 114
  35. 35. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Improve Handling of Errors HTML5 02/05/14 35 of 114
  36. 36. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 36 of 114
  37. 37. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Drawing on the Web Flash HTML5 02/05/14 37 of 114
  38. 38. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Canvas & SVG HTML5 02/05/14 38 of 114
  39. 39. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 39 of 114
  40. 40. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 40 of 114
  41. 41. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Scalable Vector Graphics | SVG HTML5 02/05/14 41 of 114
  42. 42. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Vector Graphics Scale & Look Great! HTML5 02/05/14 42 of 114
  43. 43. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 43 of 114
  44. 44. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Demo’s • First Person Gifter (FF) • Population Demo (FF) • German Election Atlas (Safari) • Mozilla Download Center (FF) HTML5 02/05/14 44 of 114
  45. 45. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com When Canvas or SVG? SVG -> High level • • • • • HTML5 Canvas -> Low level • • • • • Import/Export Easy UIs Interactive Medium Animation Tree of objects 02/05/14 No mouse interaction High Animation JS Centric More Bookkeeping Pixels 45 of 114
  46. 46. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com HTML 5 Support canvas / svg £ £ £ £ £ video geolocation app cache database workers HTML5 02/05/14 46 of 114
  47. 47. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Quake II - Browser Only HTML5 02/05/14 47 of 114
  48. 48. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Quake II - Browser Only WebGL 3D graphics HTML 5 Canvas HTML 5 Audio HTML 5 Web Sockets HTML 5 Local Storage HTML5 02/05/14 48 of 114
  49. 49. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Video HTML5 02/05/14 49 of 114
  50. 50. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com The Production Process Capture to delivery and beyond Video / Audio Assets HTML5 Compression Authoring 02/05/14 Delivery 50 of 114
  51. 51. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Guidelines for Compression Selecting a Size 640 x 480 512 x 384 320 x 240 HTML5 02/05/14 51 of 114
  52. 52. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 52 of 114
  53. 53. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 53 of 114
  54. 54. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 54 of 114
  55. 55. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Video Compression HTML 5 Options WebM H264 | MPEG 4 Ogg Theora Apple | Microsoft HTML5 Google 02/05/14 55 of 114
  56. 56. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Guidelines for Compression Tips & Hints • Video – Frame Rate: 15 fps – Data Rate Target 800-1200 kbs • Audio – • Delivery – – HTML5 16bit / 22khz / Mono / 64 kbs Flash: H264 HTML5: H264 02/05/14 56 of 114
  57. 57. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com jwplayer.com HTML5 02/05/14 57 of 114
  58. 58. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Smart Phones HTML5 02/05/14 58 of 114
  59. 59. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com brightcove.com HTML5 02/05/14 59 of 114
  60. 60. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com HTML 5 Support canvas / svg video £ £ £ £ £ £ £ £ £ £ geolocation app cache database workers HTML5 02/05/14 60 of 114
  61. 61. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com geolocation HTML5 02/05/14 61 of 114
  62. 62. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 62 of 114
  63. 63. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com You are entering research. Learn More>> HTML5 02/05/14 63 of 114
  64. 64. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 64 of 114
  65. 65. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 65 of 114
  66. 66. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 66 of 114
  67. 67. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com // the geolocation api brings browser based location to your apps HTML5 02/05/14 67 of 114
  68. 68. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com www.seeknspell.com HTML5 02/05/14 68 of 114
  69. 69. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com O A R P HTML5 02/05/14 C T www.seeknspell.com 69 of 114
  70. 70. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com O A R P HTML5 02/05/14 C T www.seeknspell.com 70 of 114
  71. 71. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com HTML 5 Support canvas / svg video geolocation £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ app cache database workers HTML5 02/05/14 71 of 114
  72. 72. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com app cache & database HTML5 02/05/14 72 of 114
  73. 73. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 73 of 114
  74. 74. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com // database and app cache store user data and app resources locally HTML5 02/05/14 74 of 114
  75. 75. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 75 of 114
  76. 76. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com HTML 5 Support canvas / svg video geolocation app cache database £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ workers HTML5 02/05/14 76 of 114
  77. 77. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com web workers HTML5 02/05/14 77 of 114
  78. 78. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com HTML 5 More Power HTML5 02/05/14 78 of 114
  79. 79. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com // web workers defines an API for running background scripts HTML5 02/05/14 79 of 114
  80. 80. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Demo’s Bad Primes (FF 3.5) Good Primes (FF 3.5) Motion Tracker (FF) HTML5 02/05/14 80 of 114
  81. 81. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com HTML 5 Support canvas / svg video geolocation app cache database workers HTML5 £ £ £ £ £ £ £ £ £ £ £ £ 02/05/14 £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ £ 81 of 114
  82. 82. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Testing HTML5 02/05/14 82 of 114
  83. 83. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Testing Code Test on Mobile − − − − − iOS 4.x - 6.x Android 2.x - 4.x Windows 8 Tablet vs Phablet vs Phone Portrait vs Landscape Test on Windows 8, 7, Vista, XP - Internet Explorer 6, 7, 8, 9, 10 - Firefox 15-21 + - Chrome 15 - 19 + Test on OS X Safari 4, 5+ − Firefox 15-21 + − Chrome 20 - 26 + − HTML5 02/05/14 83 of 114
  84. 84. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Tools HTML5 02/05/14 84 of 114
  85. 85. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com adobe.com HTML5 02/05/14 85 of 114
  86. 86. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Responsive Design HTML5 02/05/14 86 of 114
  87. 87. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com getskeleton.com HTML5 02/05/14 87 of 114
  88. 88. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com twitter.github.io/bootstrap/ HTML5 02/05/14 88 of 114
  89. 89. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com foundation.zurb.com HTML5 02/05/14 89 of 114
  90. 90. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com phonegap.com HTML5 02/05/14 90 of 114
  91. 91. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Design for Flexibility HTML5 02/05/14 91 of 114
  92. 92. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 92 of 114
  93. 93. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 93 of 114
  94. 94. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 94 of 114
  95. 95. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 95 of 114
  96. 96. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 96 of 114
  97. 97. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 97 of 114
  98. 98. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 98 of 114
  99. 99. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 99 of 114
  100. 100. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 100 of 114
  101. 101. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 101 of 114
  102. 102. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Resources HTML5 02/05/14 102 of 114
  103. 103. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com w3schools.com HTML5 02/05/14 103 of 114
  104. 104. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com html5rocks.com HTML5 02/05/14 104 of 114
  105. 105. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com lynda.com HTML5 02/05/14 105 of 114
  106. 106. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Caniuse.com HTML5 02/05/14 106 of 114
  107. 107. Training 2014 HTML5 Nick Floro | nick@sealworks.com 02/05/14 trainingmagnetwork.com 107 of 114
  108. 108. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com html5demos.com HTML5 02/05/14 108 of 114
  109. 109. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com www.sencha.com HTML5 02/05/14 109 of 114
  110. 110. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com www.css3.info HTML5 02/05/14 110 of 114
  111. 111. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com www.uxmag.com HTML5 02/05/14 111 of 114
  112. 112. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com typekit.com HTML5 02/05/14 112 of 114
  113. 113. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Go Play, Experiment, Dream Apple iOS HTML5 02/05/14 113 of 114
  114. 114. Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com Q&A Nick Floro sealworks.com nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro HTML5 02/05/14 114 of 114

×