Designing & Developing mLearning using HTML5 #mlearncon

9,041 views

Published on

HTML5 is rapidly becoming the program of choice when creating sophisticated eLearning. Although not yet fully defined, the major portions now in use provide increased capability when you understand what they do and how to use them.
Participants in this session will learn what HTML5, and its core technologies, offers your team, when to adopt it in your solutions, and how to take advantage of HTML5 in developing content. You'll learn how you can use Canvas and SVG graphics for animation, graphics, and interactivity, how you can optimize HTML5's new-media formats and deliver them effectively to desktop and mobile devices, and how you can use geolocation in applications and Web courses.

Published in: Technology, Art & Photos
2 Comments
7 Likes
Statistics
Notes
  • Hi, I would suggest trying an alternate browser or restarting. I'm able to see in various browsers without issue.

    You can also download a copy and see if acrobat will open. Make sure you have reader 9 or higher, free download from adobe.com.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Cannot see the presentation.... slides are blank
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
9,041
On SlideShare
0
From Embeds
0
Number of Embeds
1,185
Actions
Shares
0
Downloads
270
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Designing & Developing mLearning using HTML5 #mlearncon

  1. Nick@sealworks.com Twitter.com/NickFloro HTML5 Designing & Developing mLearning Using Playing the mobile game? ibooks html5 hidesign mobilefnTuesday, June 19, 2012
  2. 1.6 billion Internet usersTuesday, June 19, 2012
  3. 1.5 billion TV’sTuesday, June 19, 2012
  4. 4.2 billion Mobile PhonesTuesday, June 19, 2012
  5. 3.5 billion Tooth BrushesTuesday, June 19, 2012
  6. The Web Platform is AcceleratingTuesday, June 19, 2012
  7. Solving Developer Challenges Graphics Location Storage SpeedTuesday, June 19, 2012
  8. What can we do with HTML5Tuesday, June 19, 2012
  9. Tuesday, June 19, 2012
  10. Tuesday, June 19, 2012
  11. Tuesday, June 19, 2012
  12. Tuesday, June 19, 2012
  13. • form factor • network latency • input mechanism • memory • computational power • battery • contextTuesday, June 19, 2012
  14. Tuesday, June 19, 2012
  15. Tuesday, June 19, 2012
  16. Tuesday, June 19, 2012
  17. The mobile environment single early failure = non-returning userTuesday, June 19, 2012
  18. The mobile environment crucial first 30-60 seconds usageTuesday, June 19, 2012
  19. The mobile environment Fewer optionsTuesday, June 19, 2012
  20. Tuesday, June 19, 2012
  21. AppTuesday, June 19, 2012
  22. The Web PlatformTuesday, June 19, 2012
  23. Web AppTuesday, June 19, 2012
  24. Web AppTuesday, June 19, 2012
  25. Web App HTML Javascript CSS API’sTuesday, June 19, 2012
  26. Tuesday, June 19, 2012
  27. Tuesday, June 19, 2012
  28. Tuesday, June 19, 2012
  29. Tuesday, June 19, 2012
  30. Pulse for MobileTuesday, June 19, 2012
  31. Tuesday, June 19, 2012
  32. Tuesday, June 19, 2012
  33. SEMANTICS DEVICE ACCESS CSS3 MULTIMEDIA CONNECTIVITY PERFORMANCE & 3D, GRAPHICS OFFLINE & STORAGE INTEGRATION & EFFECTSTuesday, June 19, 2012
  34. HTML5 = JS + CSS3Tuesday, June 19, 2012
  35. Create once and deliver everywhere...Tuesday, June 19, 2012
  36. Next Generation Mobile Using Webkit Android iOS Windows Phone RIM BlackberryTuesday, June 19, 2012
  37. Tuesday, June 19, 2012
  38. Tuesday, June 19, 2012
  39. Tuesday, June 19, 2012
  40. Tuesday, June 19, 2012
  41. Which browser’s support HTML 5? Chrome Safari Firefox OperaTuesday, June 19, 2012
  42. Which browser’s support HTML 5? Chrome Safari Firefox Opera BETA Internet Explorer 9Tuesday, June 19, 2012
  43. HTML 5in the works...Tuesday, June 19, 2012
  44. Advanced Core LanguageTuesday, June 19, 2012
  45. Tuesday, June 19, 2012
  46. HTML 4Tuesday, June 19, 2012
  47. HTML 5 - Introduces New ElementsTuesday, June 19, 2012
  48. Improve Web AppsTuesday, June 19, 2012
  49. Tuesday, June 19, 2012
  50. Tuesday, June 19, 2012
  51. Tuesday, June 19, 2012
  52. Flow chart CompatibilityTuesday, June 19, 2012
  53. Flow chart Replaces: XHTML 1.0 & Dom2html with new API’sTuesday, June 19, 2012
  54. Improve Handling of ErrorsTuesday, June 19, 2012
  55. Tuesday, June 19, 2012
  56. Focus on the AudienceTuesday, June 19, 2012
  57. Google AnalyticsTuesday, June 19, 2012
  58. Google AnalyticsTuesday, June 19, 2012
  59. Drawing on the Web FlashTuesday, June 19, 2012
  60. Canvas & SVGTuesday, June 19, 2012
  61. Tuesday, June 19, 2012
  62. Scalable Vector Graphics | SVGTuesday, June 19, 2012
  63. Vector Graphics Scale & Look Great!Tuesday, June 19, 2012
  64. Tuesday, June 19, 2012
  65. Demo’s • Mozilla Download Center (FF) • First Person Gifter (FF) • Population Demo (FF) • German Election Atlas (Safari)Tuesday, June 19, 2012
  66. 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 • PixelsTuesday, June 19, 2012
  67. HTML 5 Support canvas / svg £ £ £ £ video geolocation app cache database workersTuesday, June 19, 2012
  68. Quake II - Browser OnlyTuesday, June 19, 2012
  69. Quake II - Browser OnlyTuesday, June 19, 2012
  70. Quake II - Browser Only WebGL 3D graphics HTML 5 Canvas HTML 5 Audio HTML 5 Web Sockets HTML 5 Local StorageTuesday, June 19, 2012
  71. VideoTuesday, June 19, 2012
  72. The Production Process Capture to delivery and beyond Video / Audio Assets Compression Authoring DeliveryTuesday, June 19, 2012
  73. Standards Are Everywhere NTSC/ RedBook FM MPEG-2 PAL AC-3 DV JPEG MPEG- 1/ MPEG- 4 audioTuesday, June 19, 2012
  74. Tuesday, June 19, 2012
  75. Tuesday, June 19, 2012
  76. Tuesday, June 19, 2012
  77. Video Compression HTML 5 Options Flash H264 | MPEG 4 WebM Ogg Theora H264 Apple | Microsoft Google AdobeTuesday, June 19, 2012
  78. 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: H264Tuesday, June 19, 2012
  79. www.longtailvideo.comTuesday, June 19, 2012
  80. Easy Access to Video Flip $100 to $200Tuesday, June 19, 2012
  81. Smart PhonesTuesday, June 19, 2012
  82. Tuesday, June 19, 2012
  83. brightcove.comTuesday, June 19, 2012
  84. HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation app cache database workersTuesday, June 19, 2012
  85. geolocationTuesday, June 19, 2012
  86. Tuesday, June 19, 2012
  87. Tuesday, June 19, 2012
  88. Tuesday, June 19, 2012
  89. // the geolocation api brings browser based location to your appsTuesday, June 19, 2012
  90. O C A R T P www.seeknspell.comTuesday, June 19, 2012
  91. HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation £ £ £ iPhone £ app cache database workersTuesday, June 19, 2012
  92. app cache & databaseTuesday, June 19, 2012
  93. Tuesday, June 19, 2012
  94. Tuesday, June 19, 2012
  95. HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation £ £ £ iPhone £ app cache £ £ £ £ mobile database £ £ £ £ mobile workersTuesday, June 19, 2012
  96. Tuesday, June 19, 2012 web workers
  97. HTML 5 More PowerTuesday, June 19, 2012
  98. // web workers defines an API for running background scriptsTuesday, June 19, 2012
  99. Demo’s Bad Primes (FF 3.5) Good Primes (FF 3.5) Motion Tracker (FF)Tuesday, June 19, 2012
  100. HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation £ £ £ iPhone £ app cache £ £ £ £ mobile database £ £ £ £ mobile workers £ £ £ £Tuesday, June 19, 2012
  101. CSS 3 Forms JavaScript Effects/TransitionsTuesday, June 19, 2012
  102. Test for Usability Test on Windows 7, Vista, XP • Internet Explorer 6, 7, 8, 9 • Firefox 3.5, 3.6, 4.0 + • Opera 10 Test on OS X − Safari 4 − Firefox 3.5, 3.6, 4.0 + − Opera 10 Test Mobile − iOS − Android 2.x-4.x − Blackberry, Windows 7 PhoneTuesday, June 19, 2012
  103. How should we Design?Tuesday, June 19, 2012
  104. Focus on the AudienceTuesday, June 19, 2012 1
  105. Content2 is the keyTuesday, June 19, 2012
  106. Transparent 3 InterfaceTuesday, June 19, 2012
  107. Tuesday, June 19, 2012
  108. Tuesday, June 19, 2012
  109. Tuesday, June 19, 2012
  110. Keep it SimpleTuesday, June 19, 2012
  111. Tuesday, June 19, 2012
  112. Design: Keep it SimpleTuesday, June 19, 2012
  113. How do we start?Tuesday, June 19, 2012
  114. SketchesTuesday, June 19, 2012
  115. WireframesTuesday, June 19, 2012
  116. www.balsamiq.comTuesday, June 19, 2012
  117. Sketchy & iMockUpsTuesday, June 19, 2012
  118. http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/Tuesday, June 19, 2012
  119. www.uistencils.comTuesday, June 19, 2012
  120. WireframesTuesday, June 19, 2012
  121. Design • Focus on audience • Content is key • Transparent interfaceTuesday, June 19, 2012
  122. Tuesday, June 19, 2012
  123. TextTuesday, June 19, 2012
  124. 1. Create Text 2. Make a selection 3. Invert select 4. Save alpha channel Text 5. Deselect 6. Load Alpha Channel 7. Load Color 8. Offset 9. Apply Blur 10. Reposition 11. Save 12. If the copy changed, star overTuesday, June 19, 2012
  125. Tuesday, June 19, 2012
  126. Tuesday, June 19, 2012
  127. Tuesday, June 19, 2012
  128. Design for FlexibilityTuesday, June 19, 2012
  129. Tuesday, June 19, 2012
  130. Tuesday, June 19, 2012
  131. Tuesday, June 19, 2012
  132. Tuesday, June 19, 2012
  133. Tuesday, June 19, 2012
  134. Tuesday, June 19, 2012
  135. Tuesday, June 19, 2012
  136. Tuesday, June 19, 2012
  137. Tuesday, June 19, 2012
  138. Tuesday, June 19, 2012
  139. Pixels & Aspect Ratio Selecting a Size Android Xoom 1280 x 720 HTC Incredible iPad 800 x 480 1024 x 768 iPhone 4 960 x Droid 854 x 480 iPhone 480 x 320Tuesday, June 19, 2012
  140. ResourcesTuesday, June 19, 2012
  141. html5rocks.comTuesday, June 19, 2012
  142. lynda.comTuesday, June 19, 2012
  143. http://www.caniuse.com/Tuesday, June 19, 2012
  144. Tuesday, June 19, 2012
  145. tumultco.comTuesday, June 19, 2012
  146. animatable.comTuesday, June 19, 2012
  147. html5demos.comTuesday, June 19, 2012
  148. www.sencha.comTuesday, June 19, 2012
  149. www.css3.infoTuesday, June 19, 2012
  150. www.uxmag.comTuesday, June 19, 2012
  151. typekit.comTuesday, June 19, 2012
  152. CSS3 for Web Designers Dan Cederholm | A Book Apart aBookApart.comTuesday, June 19, 2012
  153. RESPONSIVE WEB DESIGN ETHAN MARCOTTE | A Book Apart aBookApart.comTuesday, June 19, 2012
  154. HTML5 for Web Designers JEREMY KEITH | A Book Apart aBookApart.comTuesday, June 19, 2012
  155. Go Play, Experiment, Dream Apple iOSTuesday, June 19, 2012
  156. Search Flickr.com for iPad UITuesday, June 19, 2012
  157. www.smashingmagazine.comTuesday, June 19, 2012
  158. Tuesday, June 19, 2012
  159. Tuesday, June 19, 2012
  160. Tuesday, June 19, 2012
  161. Tuesday, June 19, 2012
  162. Tuesday, June 19, 2012
  163. Explore Pictures Blog Video Audio Micro-blogging 3D Models ePortfolios Course Management System Multiplayer EnvironmentTuesday, June 19, 2012
  164. Capture & AnalyzeTuesday, June 19, 2012
  165. Using CoverFlow view and Preview of GraphicsTuesday, June 19, 2012
  166. Design Scrapbook: iPhoto | LittleSnapperTuesday, June 19, 2012
  167. Tuesday, June 19, 2012
  168. Tuesday, June 19, 2012
  169. Thank You Nick Floro sealworks.com nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloroTuesday, June 19, 2012

×