Designing & Developing mLearning using HTML5 #mlearncon
7 likes7,719 views
The document discusses the evolution and features of HTML5, emphasizing its capabilities for mobile development and the importance of user experience in mobile applications. It outlines various technical aspects including support for graphics, multimedia, storage, and offline capabilities, as well as the role of popular web browsers. Additionally, it presents guidelines for designing effective web applications and offers resources for further learning and experimentation with HTML5.
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 mobilefn Tuesday, June 19, 2012
- 2. 1.6 billion Internet users Tuesday, June 19, 2012
- 3. 1.5 billion TV’s Tuesday, June 19, 2012
- 4. 4.2 billion Mobile Phones Tuesday, June 19, 2012
- 5. 3.5 billion Tooth Brushes Tuesday, June 19, 2012
- 6. The Web Platform is Accelerating Tuesday, June 19, 2012
- 7. Solving Developer Challenges Graphics Location Storage Speed Tuesday, June 19, 2012
- 8. What can we do with HTML5 Tuesday, 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 • context Tuesday, 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 user Tuesday, June 19, 2012
- 18. The mobile environment crucial first 30-60 seconds usage Tuesday, June 19, 2012
- 19. The mobile environment Fewer options Tuesday, June 19, 2012
- 20. Tuesday, June 19, 2012
- 21. App Tuesday, June 19, 2012
- 22. The Web Platform Tuesday, June 19, 2012
- 23. Web App Tuesday, June 19, 2012
- 24. Web App Tuesday, June 19, 2012
- 25. Web App HTML Javascript CSS API’s Tuesday, 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 Mobile Tuesday, 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 & EFFECTS Tuesday, June 19, 2012
- 34. HTML5 = JS + CSS3 Tuesday, June 19, 2012
- 35. Create once and deliver everywhere... Tuesday, June 19, 2012
- 36. Next Generation Mobile Using Webkit Android iOS Windows Phone RIM Blackberry Tuesday, 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 Opera Tuesday, June 19, 2012
- 42. Which browser’s support HTML 5? Chrome Safari Firefox Opera BETA Internet Explorer 9 Tuesday, June 19, 2012
- 43. HTML 5 in the works... Tuesday, June 19, 2012
- 44. Advanced Core Language Tuesday, June 19, 2012
- 45. Tuesday, June 19, 2012
- 46. HTML 4 Tuesday, June 19, 2012
- 47. HTML 5 - Introduces New Elements Tuesday, June 19, 2012
- 48. Improve Web Apps Tuesday, June 19, 2012
- 49. Tuesday, June 19, 2012
- 50. Tuesday, June 19, 2012
- 51. Tuesday, June 19, 2012
- 52. Flow chart Compatibility Tuesday, June 19, 2012
- 53. Flow chart Replaces: XHTML 1.0 & Dom2html with new API’s Tuesday, June 19, 2012
- 54. Improve Handling of Errors Tuesday, June 19, 2012
- 55. Tuesday, June 19, 2012
- 56. Focus on the Audience Tuesday, June 19, 2012
- 57. Google Analytics Tuesday, June 19, 2012
- 58. Google Analytics Tuesday, June 19, 2012
- 59. Drawing on the Web Flash Tuesday, June 19, 2012
- 60. Canvas & SVG Tuesday, June 19, 2012
- 61. Tuesday, June 19, 2012
- 62. Scalable Vector Graphics | SVG Tuesday, 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 • Pixels Tuesday, June 19, 2012
- 67. HTML 5 Support canvas / svg £ £ £ £ video geolocation app cache database workers Tuesday, June 19, 2012
- 68. Quake II - Browser Only Tuesday, June 19, 2012
- 69. Quake II - Browser Only Tuesday, June 19, 2012
- 70. Quake II - Browser Only WebGL 3D graphics HTML 5 Canvas HTML 5 Audio HTML 5 Web Sockets HTML 5 Local Storage Tuesday, June 19, 2012
- 71. Video Tuesday, June 19, 2012
- 72. The Production Process Capture to delivery and beyond Video / Audio Assets Compression Authoring Delivery Tuesday, June 19, 2012
- 73. Standards Are Everywhere NTSC/ RedBook FM MPEG-2 PAL AC-3 DV JPEG MPEG- 1/ MPEG- 4 audio Tuesday, 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 Adobe Tuesday, 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: H264 Tuesday, June 19, 2012
- 80. Easy Access to Video Flip $100 to $200 Tuesday, June 19, 2012
- 81. Smart Phones Tuesday, June 19, 2012
- 82. Tuesday, June 19, 2012
- 83. brightcove.com Tuesday, June 19, 2012
- 84. HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation app cache database workers Tuesday, June 19, 2012
- 85. geolocation Tuesday, 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 apps Tuesday, June 19, 2012
- 90. O C A R T P www.seeknspell.com Tuesday, June 19, 2012
- 91. HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation £ £ £ iPhone £ app cache database workers Tuesday, June 19, 2012
- 92. app cache & database Tuesday, 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 workers Tuesday, June 19, 2012
- 96. Tuesday, June 19, 2012 web workers
- 97. HTML 5 More Power Tuesday, June 19, 2012
- 98. // web workers defines an API for running background scripts Tuesday, 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/Transitions Tuesday, 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 Phone Tuesday, June 19, 2012
- 103. How should we Design? Tuesday, June 19, 2012
- 104. Focus on the Audience Tuesday, June 19, 2012 1
- 105. Content 2 is the key Tuesday, June 19, 2012
- 106. Transparent 3 Interface Tuesday, June 19, 2012
- 107. Tuesday, June 19, 2012
- 108. Tuesday, June 19, 2012
- 109. Tuesday, June 19, 2012
- 110. Keep it Simple Tuesday, June 19, 2012
- 111. Tuesday, June 19, 2012
- 112. Design: Keep it Simple Tuesday, June 19, 2012
- 113. How do we start? Tuesday, June 19, 2012
- 114. Sketches Tuesday, June 19, 2012
- 115. Wireframes Tuesday, June 19, 2012
- 116. www.balsamiq.com Tuesday, June 19, 2012
- 117. Sketchy & iMockUps Tuesday, June 19, 2012
- 118. http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/ Tuesday, June 19, 2012
- 119. www.uistencils.com Tuesday, June 19, 2012
- 120. Wireframes Tuesday, June 19, 2012
- 121. Design • Focus on audience • Content is key • Transparent interface Tuesday, June 19, 2012
- 122. Tuesday, June 19, 2012
- 123. Text Tuesday, 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 over Tuesday, June 19, 2012
- 125. Tuesday, June 19, 2012
- 126. Tuesday, June 19, 2012
- 127. Tuesday, June 19, 2012
- 128. Design for Flexibility Tuesday, 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 320 Tuesday, June 19, 2012
- 140. Resources Tuesday, June 19, 2012
- 141. html5rocks.com Tuesday, June 19, 2012
- 142. lynda.com Tuesday, June 19, 2012
- 144. Tuesday, June 19, 2012
- 145. tumultco.com Tuesday, June 19, 2012
- 146. animatable.com Tuesday, June 19, 2012
- 147. html5demos.com Tuesday, June 19, 2012
- 148. www.sencha.com Tuesday, June 19, 2012
- 149. www.css3.info Tuesday, June 19, 2012
- 150. www.uxmag.com Tuesday, June 19, 2012
- 151. typekit.com Tuesday, June 19, 2012
- 152. CSS3 for Web Designers Dan Cederholm | A Book Apart aBookApart.com Tuesday, June 19, 2012
- 153. RESPONSIVE WEB DESIGN ETHAN MARCOTTE | A Book Apart aBookApart.com Tuesday, June 19, 2012
- 154. HTML5 for Web Designers JEREMY KEITH | A Book Apart aBookApart.com Tuesday, June 19, 2012
- 155. Go Play, Experiment, Dream Apple iOS Tuesday, June 19, 2012
- 156. Search Flickr.com for iPad UI Tuesday, 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 Environment Tuesday, June 19, 2012
- 164. Capture & Analyze Tuesday, June 19, 2012
- 165. Using CoverFlow view and Preview of Graphics Tuesday, June 19, 2012
- 166. Design Scrapbook: iPhoto | LittleSnapper Tuesday, 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/nickfloro Tuesday, June 19, 2012