Introduction to HTML5 and Learning for Mobile+

1,769 views

Published on

Learn about HTML5, what and how we should be using today and how to plan for development you are doing today. Lots of great resources for getting started. Presented at #mlearningdevcon October 2011.

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,769
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
110
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Introduction to HTML5 and Learning for Mobile+

  1. 1. Nick@sealworks.com Twitter.com/NickFloroHTML5UnderstandingHow it Will Improve Our Learning
  2. 2. App
  3. 3. The Web Platform
  4. 4. Web App
  5. 5. Web App
  6. 6. Web AppHTML Javascript CSS API’s
  7. 7. Pulse for Mobile
  8. 8. What can we do withHTML5
  9. 9. HTML5 = JS + CSS3
  10. 10. SEMANTICS DEVICE ACCESS CSS3 MULTIMEDIACONNECTIVITY PERFORMANCE & 3D, GRAPHICS OFFLINE & STORAGE INTEGRATION & EFFECTS
  11. 11. The Web Platform is Accelerating 2002 WebKit
  12. 12. Next Generation Mobile Using Webkit Android iOS RIM Blackberry
  13. 13. Solving Developer ChallengesGraphics Location Storage Speed
  14. 14. Which browser’s support HTML 5? Chrome Safari Firefox Opera
  15. 15. Which browser’s support HTML 5? Chrome Safari Firefox Opera BETA Internet Explorer 9
  16. 16. HTML 5in the works...
  17. 17. AdvancedCore Language
  18. 18. HTML 4
  19. 19. HTML 5 - Introduces New Elements
  20. 20. The div elements can be replaced with thenew elements: header, nav, section, article,aside, and footer.<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer></body>
  21. 21. Improve Web Apps
  22. 22. Flow chart Compatibility
  23. 23. Flow chart Replaces: all prior versions of html
  24. 24. Flow chart Replaces: XHTML 1.0 & Dom2html with new API’s
  25. 25. HTML 5Design Principles
  26. 26. 1. Support existing content
  27. 27. 2. Insure Interoperability
  28. 28. W3c de facto Standard
  29. 29. 3. Define UABehavior(User Agent)
  30. 30. 4. Improve Handlingof Errors
  31. 31. 5. Evolve not recreatewhat we already have
  32. 32. Build on real world useand test cases
  33. 33. Drawing on the Web Flash
  34. 34. Canvas & SVG
  35. 35. Scalable Vector Graphics | SVG
  36. 36. Vector Graphics Scale & Look Great!
  37. 37. Demo’s • Mozilla Download Center (FF) • First Person Gifter (FF) • Population Demo (FF) • German Election Atlas (Safari)
  38. 38. 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
  39. 39. HTML 5 Support canvas / svg £ £ £ £ video geolocation app cache database workers
  40. 40. Quake II - Browser Only
  41. 41. Quake II - Browser Only
  42. 42. Quake II - Browser Only WebGL 3D graphics HTML 5 Canvas HTML 5 Audio HTML 5 Web Sockets HTML 5 Local Storage
  43. 43. Video
  44. 44. One video to play everywhere.
  45. 45. The Production Process Capture to delivery and beyondVideo / Audio Assets Compression Authoring Delivery
  46. 46. Standards Are Everywhere NTSC/ RedBook FM MPEG-2 PAL AC-3 DV JPEGMPEG- 1/MPEG-4 audio
  47. 47. MPEG-4: The MPEG for the InternetThe standard for the digital media revolution • Original DV 60 sec 266mb • MPEG-4 = 450k to 7.8mb • Flash 8+ = 450k to 7.8mb • 60 minutes of Video = 16gb • 60 minutes compressed = 480mb
  48. 48. Guidelines for CompressionPixels HD 1080i 1920 x 1080 720P 1280 x 720 DV 720 x 486
  49. 49. Guidelines for CompressionContent Placement 320 x 240
  50. 50. Guidelines for CompressionSelecting a Size 640 x 480 512 x 384 320 x 240
  51. 51. Guidelines for CompressionFrame Rate 29.97 fps
  52. 52. Guidelines for CompressionFrame Rate 29.97 fps 15 fps
  53. 53. Guidelines for CompressionTips & Hints Key Frames: 4 x fps
  54. 54. Guidelines for Compression2 Pass Variable Bit Rate
  55. 55. Guidelines for Compression2 Pass Variable Bit Rate
  56. 56. Guidelines for CompressionTips & Hints• Frame Rate: 15 fps – Key Frames: 4 x fps• Data Rate Target 800-1200 kbs• 2 Pass Variable Bit Rate• QuickTime: Sorenson 3 / H264 WebM• Flash: Spark / On2 Pro / H264• Audio: 16bit / 22khz / Mono / 64 kbs
  57. 57. www.longtailvideo.com
  58. 58. Easy Access to VideoFlip $100 to $200
  59. 59. Smart Phones
  60. 60. Video Compression Flash
  61. 61. <!-- flash movie & bullets --> <div id="flashholder"> <div id="flash"> <script language="javascript"> if (AC_FL_RunContent == 0) { alert("This page requires AC_RunActiveContent.js."); } else { AC_FL_RunContent( codebase, http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0, width, 320, height, 310, src, ../FLV_Player, quality, high, pluginspage, http://www.macromedia.com/go/getflashplayer, align, middle, play, true, loop, true, scale, showall, wmode, window, devicefont, false, id, FLV_Player, bgcolor, #ffffff, name, FLV_Player, menu, true, allowFullScreen, false, allowScriptAccess,always, movie, ../FLV_Player, salign, ); //end AC code } </script> <noscript>
  62. 62. // HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>
  63. 63. Video CompressionHTML 5 Options Flash H264 Ogg Theora MPEG 4 WebM
  64. 64. Embedding Video<video src="http://example.com/myMovie.ogg"controls>Your browser does not support the video element.</video>
  65. 65. Embedding Video<video controls><source src="foo.ogg" type="video/ogg"><source src="foo.mp4">Your browser does not support the video element.</video>var v = document.getElementsByTagName("video")[0];v.play();
  66. 66. www.longtailvideo.com
  67. 67. HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation app cache database workers
  68. 68. geolocation
  69. 69. // the geolocation apibrings browser basedlocation to your apps
  70. 70. O C AR T P www.seeknspell.com
  71. 71. You are gettinghotter.
  72. 72. HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation £ £ £ iPhone £ app cache database workers
  73. 73. app cache& database
  74. 74. // database and appcache store user dataand app resourceslocally
  75. 75. App CacheList resources that you want to take offlineCACHE MANIFEST/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.js<body manifest="./cache.manifest"></body>
  76. 76. Databasevar db = window.openDatabase("NoteTest", "1.0","Example DB",200000);function saveMe(id, text, timestamp, left, top, zIndex) {db.transaction(function (tx) {tx.executeSql("INSERT INTO WebKitStickyNotes "+ "(id, note, timestamp, left, top, zindex) "+ "VALUES (?, ?, ?, ?, ?, ?)",[id, text, timestamp, left, top, zIndex]);});}
  77. 77. HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation £ £ £ iPhone £ app cache £ £ £ £ mobile database £ £ £ £ mobile workers
  78. 78. web workers
  79. 79. HTML 5 More Power
  80. 80. // web workers definesan API for runningbackground scripts
  81. 81. Demo’s Bad Primes (FF 3.5) Good Primes (FF 3.5) Motion Tracker (FF)
  82. 82. HTML 5 Support canvas / svg £ £ £ £ video £ £ £ £ geolocation £ £ £ iPhone £ app cache £ £ £ £ mobile database £ £ £ £ mobile workers £ £ £ £
  83. 83. Test for Usability Test on Windows 7, Vista • Internet Explorer 6, 7, 8, 9 • Firefox 3, 3.5, 3.6, 4.0 beta • Opera 10 Test on OS X − Safari 4 − Firefox 3.5, 3.6, 4.0 beta − Opera 10 Test Mobile − iOS − Android − Blackberry, Windows 7 Phone
  84. 84. Forms CSS 3Effects/Transitions
  85. 85. Pixels & Aspect RatioSelecting a Size Android Xoom 1280 x 720 HTC Incredible iPad 800 x 480 1024 x 768 iPhone 4 960 x 640 Droid 854 x 480 iPhone 480 x 320
  86. 86. Design for Flexibility
  87. 87. Capture & Analyze
  88. 88. Using CoverFlow view and Preview of Graphics
  89. 89. Design Scrapbook: iPhoto | LittleSnapper
  90. 90. NickFloro.com
  91. 91. Resources
  92. 92. html5rocks.com
  93. 93. html5doctor.com
  94. 94. www.thinkvitamin.com
  95. 95. http://www.caniuse.com/
  96. 96. labs.adobe.com/technologies/wallaby/
  97. 97. tumultco.com
  98. 98. animatable.com
  99. 99. html5demos.com
  100. 100. html5gallery.com
  101. 101. www.sencha.com
  102. 102. www.css3.info
  103. 103. www.uxmag.com
  104. 104. DiveintoHTML5.org
  105. 105. Introducing HTML5(Voices That Matter)Bruce Lawson
  106. 106. CSS3 for Web DesignersDan Cederholm | A Book Apart
  107. 107. www.gamesalad.com
  108. 108. www.kesiev.com/akihabara/
  109. 109. Go Play, Experiment, Dream Apple iOS
  110. 110. Search Flickr.com for iPad UI
  111. 111. www.smashingmagazine.com
  112. 112. www.longtailvideo.com
  113. 113. Screencasts 101 Mini-Session www.jingproject.com
  114. 114. www.twitter.com
  115. 115. www.lrnchat.com
  116. 116. www.panma.org
  117. 117. Nancy Durate Garr Reynolds
  118. 118. www.posterous.com
  119. 119. www.TED.com
  120. 120. www.launchcycle.com
  121. 121. Explore Pictures Blog Video Audio Micro-blogging 3D Models ePortfolios Course Management System Multiplayer Environment
  122. 122. Thank You Nick Floro sealworks interactive studios nick@sealworks.com www.sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro

×