Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing HTML5 Mobile Learning for Browser, Native, and Hybrid App #mlearncon15

1,288 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 content and applications via browsers, native apps, and hybrid apps. You'll learn what you need to consider in designing content along with technical guidelines. Get an introduction to five hot features in HTML5 that you can start using today, and prepare for developing with the new standards. You’ll discover the five challenges you need to know in order to make sure your first app or delivery is a success and you’ll learn whether to launch a native app or web app.


http://www.elearningguild.com/mlearncon/sessions/session-details.cfm?event=333&fromselection=doc.3773&session=6745

Published in: Design
  • Be the first to comment

Designing HTML5 Mobile Learning for Browser, Native, and Hybrid App #mlearncon15

  1. 1. HTML5 Nick Floro Nick@sealworks.com Twitter.com/NickFloro Designing Mobile with Web | Hybrid | App
  2. 2. What can we do with HTML5
  3. 3. html5demos.com
  4. 4. html5demos.com
  5. 5. html5demos.com
  6. 6. html5demos.com
  7. 7. Chrome
  8. 8. Create and deliver everywhere.
  9. 9. The Web Platform
  10. 10. WebApp HTML Javascript CSS API’s
  11. 11. Chrome.AngryBirds.com
  12. 12. SEMANTICS CSS3 3D, GRAPHICS 
 & EFFECTS DEVICE ACCESS PERFORMANCE & INTEGRATION MULTIMEDIA OFFLINE & STORAGECONNECTIVITY
  13. 13. Internet Explorer 9 BETA Which browser’s support HTML 5? Chrome Safari Firefox Opera
  14. 14. Big Data Focus on the Audience
  15. 15. Advanced 
 Core Language
  16. 16. HTML 4
  17. 17. HTML 5 - Introduces New Elements
  18. 18. Flow chart API’s motion camera gps sensors
  19. 19. Canvas & SVG
  20. 20. Scalable Vector Graphics | SVG
  21. 21. Vector Graphics Scale & Look Great!
  22. 22. • First Person Gifter (FF) • Population Demo (FF) • German Election Atlas (Safari) Demo’s
  23. 23. SVG -> High level • Import/Export • Easy UIs • Interactive • Medium Animation • Tree of objects Canvas -> Low level • No mouse interaction • High Animation • JS Centric • More Bookkeeping • Pixels When Canvas or SVG?
  24. 24. Quake II - Browser Only
  25. 25. Quake II - Browser Only WebGL 3D graphics HTML 5 Canvas HTML 5 Audio HTML 5 Web Sockets HTML 5 Local Storage
  26. 26. Media
  27. 27. // HTML 5 makes <video> as easy as <img> // HTML 5 makes <video> as easy as <img>
  28. 28. <video controls> <source src="foo.webm" type="video/ogg"> <source src="foo.mp4"> Your browser does not support the video element. </video> var v = document.getElementsByTagName("video")[0]; v.play(); Embedding Video
  29. 29. Capture to delivery and beyond The Production Process Authoring DeliveryVideo / Audio Assets Compression
  30. 30. WebM
 Google H264 | MPEG 4 Apple | Microsoft mp4 Formats to choose from: Select a format for delivery Win
  31. 31. H264 Tips & Hints Compression – Frame Rate: 15 fps – Key Frames: 4 x fps – Average Data Rate Target 400-1200 kbs – 2 Pass Variable Bit Rate




 MPEG4: H264 Flash: H264 Guidelines for Compression
  32. 32. jwplayer.com
  33. 33. geolocation
  34. 34. // the geolocation api brings browser based location to your apps
  35. 35. www.seeknspell.com
  36. 36. A C R O P www.seeknspell.com T
  37. 37. C R O P A www.seeknspell.com T
  38. 38. // the geolocation api brings browser based location to your apps
  39. 39. You are entering research. Learn More>>
  40. 40. error handling
  41. 41. Responsive
  42. 42. screen size, platform and orientation
  43. 43. Responsive Design Desktop Tablet Phone
  44. 44. getBootStrap.com
  45. 45. Things to consider Browser Support Content Technology TimePerformance
  46. 46. Tools
  47. 47. adobe.com
  48. 48. PhoneGap.com
  49. 49. build.phonegap.com
  50. 50. Chrome Developer Tools
  51. 51. BrowserStack.com
  52. 52. Design for Flexibility
  53. 53. Experiment experiment
  54. 54. Resources
  55. 55. w3schools.com
  56. 56. html5rocks.com
  57. 57. lynda.com
  58. 58. CaniUse.com
  59. 59. CaniUse.com
  60. 60. tumultco.com
  61. 61. html5demos.com
  62. 62. jQuery.com
  63. 63. UXmag.com
  64. 64. SmashingMagazine.com
  65. 65. TypeKit.com
  66. 66. Go Play, Experiment, Dream Apple iOS
  67. 67. What ideas will you apply from today?
  68. 68. Thank You Nick Floro nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro

×