Nick@sealworks.com          Twitter.com/NickFloro HTML5   Designing & Developing mLearning Using         Playing the mobil...
1.6 billion Internet usersTuesday, June 19, 2012
1.5 billion TV’sTuesday, June 19, 2012
4.2 billion Mobile PhonesTuesday, June 19, 2012
3.5 billion Tooth BrushesTuesday, June 19, 2012
The Web Platform is AcceleratingTuesday, June 19, 2012
Solving Developer Challenges     Graphics            Location   Storage   SpeedTuesday, June 19, 2012
What can we do with   HTML5Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
•   form factor                         •   network latency                         •   input mechanism                   ...
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
The mobile environment                         single early failure = non-returning userTuesday, June 19, 2012
The mobile environment                         crucial first 30-60 seconds usageTuesday, June 19, 2012
The mobile environment               Fewer optionsTuesday, June 19, 2012
Tuesday, June 19, 2012
AppTuesday, June 19, 2012
The Web PlatformTuesday, June 19, 2012
Web           AppTuesday, June 19, 2012
Web AppTuesday, June 19, 2012
Web App              HTML        Javascript   CSS   API’sTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Pulse for MobileTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
SEMANTICS                                          DEVICE ACCESS           CSS3                                           ...
HTML5 = JS + CSS3Tuesday, June 19, 2012
Create once and deliver everywhere...Tuesday, June 19, 2012
Next Generation Mobile Using Webkit          Android        iOS   Windows Phone                                       RIM ...
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Which browser’s support HTML 5?              Chrome     Safari   Firefox   OperaTuesday, June 19, 2012
Which browser’s support HTML 5?              Chrome     Safari       Firefox         Opera                                ...
HTML 5in the works...Tuesday, June 19, 2012
Advanced  Core LanguageTuesday, June 19, 2012
Tuesday, June 19, 2012
HTML 4Tuesday, June 19, 2012
HTML 5 - Introduces New ElementsTuesday, June 19, 2012
Improve Web AppsTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Flow chart    CompatibilityTuesday, June 19, 2012
Flow chart    Replaces:    XHTML 1.0 & Dom2html    with new                         API’sTuesday, June 19, 2012
Improve  Handling of ErrorsTuesday, June 19, 2012
Tuesday, June 19, 2012
Focus on the                  AudienceTuesday, June 19, 2012
Google AnalyticsTuesday, June 19, 2012
Google AnalyticsTuesday, June 19, 2012
Drawing on the Web                         FlashTuesday, June 19, 2012
Canvas                          & SVGTuesday, June 19, 2012
Tuesday, June 19, 2012
Scalable Vector Graphics | SVGTuesday, June 19, 2012
Vector Graphics Scale & Look Great!Tuesday, June 19, 2012
Tuesday, June 19, 2012
Demo’s            • Mozilla Download Center (FF)            • First Person Gifter (FF)            • Population Demo (FF)  ...
When Canvas or SVG?    SVG -> High level         Canvas -> Low level       •   Import/Export       •   No mouse interactio...
HTML 5 Support         canvas / svg                           £   £   £   £                   video          geolocati...
Quake II - Browser OnlyTuesday, June 19, 2012
Quake II - Browser OnlyTuesday, June 19, 2012
Quake II - Browser Only                           WebGL 3D graphics         HTML 5 Canvas                              HTM...
VideoTuesday, June 19, 2012
The Production Process        Capture to delivery and beyond      Video / Audio Assets   Compression   Authoring   Deliver...
Standards Are Everywhere                                NTSC/             RedBook FM   MPEG-2 PAL AC-3   DV   JPEG        ...
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Video Compression       HTML 5 Options        Flash            H264 | MPEG 4       WebM                                   ...
Guidelines for Compression       Tips & Hints       •   Video            – Frame Rate: 15 fps            – Data Rate Targe...
www.longtailvideo.comTuesday, June 19, 2012
Easy Access to Video        Flip $100 to $200Tuesday, June 19, 2012
Smart PhonesTuesday, June 19, 2012
Tuesday, June 19, 2012
brightcove.comTuesday, June 19, 2012
HTML 5 Support         canvas / svg                           £   £   £   £                   video                   ...
geolocationTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
// the geolocation api   brings browser based   location to your appsTuesday, June 19, 2012
O                                   C                         A                R                                   T      ...
HTML 5 Support         canvas / svg                           £   £   £        £                   video              ...
app cache   & databaseTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
HTML 5 Support         canvas / svg                           £   £   £        £                   video              ...
Tuesday, June 19, 2012                         web workers
HTML 5                         More PowerTuesday, June 19, 2012
// web workers defines     an API for running     background scriptsTuesday, June 19, 2012
Demo’s                   Bad Primes (FF 3.5)                   Good Primes (FF 3.5)                   Motion Tracker (FF)T...
HTML 5 Support         canvas / svg                           £   £   £       £                   video               ...
CSS 3 Forms                         JavaScript      Effects/TransitionsTuesday, June 19, 2012
Test for Usability        Test on Windows 7, Vista, XP                  • Internet Explorer 6, 7, 8, 9                  • ...
How should we                   Design?Tuesday, June 19, 2012
Focus on the                  AudienceTuesday, June 19, 2012                               1
Content2                         is the keyTuesday, June 19, 2012
Transparent                         3            InterfaceTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Keep it SimpleTuesday, June 19, 2012
Tuesday, June 19, 2012
Design: Keep it SimpleTuesday, June 19, 2012
How do we start?Tuesday, June 19, 2012
SketchesTuesday, June 19, 2012
WireframesTuesday, June 19, 2012
www.balsamiq.comTuesday, June 19, 2012
Sketchy & iMockUpsTuesday, June 19, 2012
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/Tuesday, June 19, 2012
www.uistencils.comTuesday, June 19, 2012
WireframesTuesday, June 19, 2012
Design                         • Focus on audience                         • Content is key                         • Tran...
Tuesday, June 19, 2012
TextTuesday, June 19, 2012
1. Create Text                         2. Make a selection                         3. Invert select                       ...
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Design for FlexibilityTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Pixels & Aspect Ratio  Selecting a Size                  Android Xoom                                    1280 x 720       ...
ResourcesTuesday, June 19, 2012
html5rocks.comTuesday, June 19, 2012
lynda.comTuesday, June 19, 2012
http://www.caniuse.com/Tuesday, June 19, 2012
Tuesday, June 19, 2012
tumultco.comTuesday, June 19, 2012
animatable.comTuesday, June 19, 2012
html5demos.comTuesday, June 19, 2012
www.sencha.comTuesday, June 19, 2012
www.css3.infoTuesday, June 19, 2012
www.uxmag.comTuesday, June 19, 2012
typekit.comTuesday, June 19, 2012
CSS3 for Web Designers     Dan Cederholm | A Book Apart                                    aBookApart.comTuesday, June 19,...
RESPONSIVE WEB DESIGN     ETHAN MARCOTTE | A Book Apart                                     aBookApart.comTuesday, June 19...
HTML5 for Web Designers     JEREMY KEITH | A Book Apart                                   aBookApart.comTuesday, June 19, ...
Go Play, Experiment, Dream                         Apple                          iOSTuesday, June 19, 2012
Search Flickr.com for iPad UITuesday, June 19, 2012
www.smashingmagazine.comTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Explore                                           Pictures                         Blog                                   ...
Capture & AnalyzeTuesday, June 19, 2012
Using CoverFlow view and Preview of GraphicsTuesday, June 19, 2012
Design Scrapbook: iPhoto | LittleSnapperTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Thank You                         Nick Floro                         sealworks.com                         nick@sealworks....
Upcoming SlideShare
Loading in...5
×

Designing & Developing mLearning using HTML5 #mlearncon

5,351
-1

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
5,351
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
269
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×