Intro to HTML 5                                       Nick@sealworks.com     Getting Started with   HTML5                 ...
Intro to HTML 5                    Nick@sealworks.comtwitter.com/nickfloro   2 of 148             03/24/11
Intro to HTML 5                    Nick@sealworks.comtwitter.com/nickfloro   3 of 148             03/24/11
Intro to HTML 5                    Nick@sealworks.comtwitter.com/nickfloro   4 of 148             03/24/11
Intro to HTML 5                    Nick@sealworks.comtwitter.com/nickfloro   5 of 148             03/24/11
Intro to HTML 5                    Nick@sealworks.comtwitter.com/nickfloro   6 of 148             03/24/11
Intro to HTML 5                    Nick@sealworks.comtwitter.com/nickfloro   7 of 148             03/24/11
Intro to HTML 5                    Nick@sealworks.comtwitter.com/nickfloro   8 of 148             03/24/11
Intro to HTML 5                    Nick@sealworks.comtwitter.com/nickfloro   9 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   10 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   11 of 148             03/24/11
Intro to HTML 5                              Nick@sealworks.com      The Web Platform is Accelerating                     ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   13 of 148             03/24/11
Intro to HTML 5                                  Nick@sealworks.com      Next Generation Mobile Using Webkit              ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   15 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   16 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   17 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   18 of 148             03/24/11
Intro to HTML 5                                             Nick@sealworks.com      Solving Developer Challenges        Gr...
Intro to HTML 5                                                         Nick@sealworks.com      Which browserʼs support HT...
Intro to HTML 5                                                            Nick@sealworks.com      Which browserʼs support...
Intro to HTML 5                     Nick@sealworks.comHTML 5in the works...twitter.com/nickfloro   22 of 148             0...
Intro to HTML 5                     Nick@sealworks.com    Advanced    Core Languagetwitter.com/nickfloro   23 of 148      ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   24 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.com      HTML 4twitter.com/nickfloro   25 of 148             03/24/11
Intro to HTML 5                          Nick@sealworks.com      HTML 5 - Introduces New Elementstwitter.com/nickfloro   2...
Intro to HTML 5                                    Nick@sealworks.com    The div elements can be replaced with the    new ...
Intro to HTML 5                     Nick@sealworks.com    Improve Web Appstwitter.com/nickfloro   28 of 148             03...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   29 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   30 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   31 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.com    Re-Address backward    compatibilitytwitter.com/nickfloro   32 o...
Intro to HTML 5                     Nick@sealworks.com Flow chart       Compatibilitytwitter.com/nickfloro   33 of 148    ...
Intro to HTML 5                     Nick@sealworks.com Flow chart       Replaces:       all prior versions of htmltwitter....
Intro to HTML 5                      Nick@sealworks.com Flow chart       Replaces:       XHTML 1.0 & Dom2html       with n...
Intro to HTML 5                     Nick@sealworks.com    HTML 5    Design Principlestwitter.com/nickfloro   36 of 148    ...
Intro to HTML 5                     Nick@sealworks.com    1. Support existing contenttwitter.com/nickfloro   37 of 148    ...
Intro to HTML 5                     Nick@sealworks.com    2. Insure Interoperabilitytwitter.com/nickfloro   38 of 148     ...
Intro to HTML 5                     Nick@sealworks.com  W3c de facto Standardtwitter.com/nickfloro   39 of 148            ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   40 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.com    3. Define UA Behavior    (User Agent)twitter.com/nickfloro   41 o...
Intro to HTML 5                     Nick@sealworks.com    4. Improve Handling    of Errorstwitter.com/nickfloro   42 of 14...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   43 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.com    5. Evolve not recreate    what we already havetwitter.com/nickfl...
Intro to HTML 5                     Nick@sealworks.com    Build on real world use    and test casestwitter.com/nickfloro  ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   46 of 148             03/24/11
Intro to HTML 5                      Nick@sealworks.com      Drawing on the Web                             Flashtwitter.c...
Intro to HTML 5                         Nick@sealworks.com                                    Canvas                      ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   49 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   50 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   51 of 148             03/24/11
Intro to HTML 5                        Nick@sealworks.com      Scalable Vector Graphics | SVGtwitter.com/nickfloro   52 of...
Intro to HTML 5                             Nick@sealworks.com      Vector Graphics Scale & Look Great!twitter.com/nickflo...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   54 of 148             03/24/11
Intro to HTML 5                                       Nick@sealworks.com      Demoʼs                   • Mozilla Download ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   56 of 148             03/24/11
Intro to HTML 5                                                       Nick@sealworks.com     When Canvas or SVG?      SVG ...
Intro to HTML 5                                            Nick@sealworks.com     HTML 5 Support              canvas / svg...
Intro to HTML 5                     Nick@sealworks.com      Quake II - Browser Onlytwitter.com/nickfloro   59 of 148      ...
Intro to HTML 5                     Nick@sealworks.com      Quake II - Browser Onlytwitter.com/nickfloro   60 of 148      ...
Intro to HTML 5                                             Nick@sealworks.com      Quake II - Browser Only               ...
Intro to HTML 5                        Nick@sealworks.com                                    Videotwitter.com/nickfloro   ...
Intro to HTML 5                       Nick@sealworks.com      One video to play everywhere.twitter.com/nickfloro   63 of 1...
Intro to HTML 5                                                                  Nick@sealworks.com          The Productio...
Intro to HTML 5                                                  Nick@sealworks.com          Standards Are Everywhere     ...
Intro to HTML 5                                           Nick@sealworks.com          MPEG-4: The MPEG for the Internet   ...
Intro to HTML 5                                         Nick@sealworks.com          Guidelines for Compression            ...
Intro to HTML 5                                 Nick@sealworks.com          Guidelines for Compression             Content...
Intro to HTML 5                                               Nick@sealworks.com          Guidelines for Compression      ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   70 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   71 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   72 of 148             03/24/11
Intro to HTML 5                                               Nick@sealworks.com          Guidelines for Compression      ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   74 of 148             03/24/11
Intro to HTML 5                      Nick@sealworks.com          Video Compression               Flashtwitter.com/nickflor...
Intro to HTML 5                                                                                   Nick@sealworks.com  <!--...
Intro to HTML 5                                    Nick@sealworks.com        // HTML 5 makes        <video> as easy       ...
Intro to HTML 5                                    Nick@sealworks.com          Video Compression           HTML 5 Options ...
Intro to HTML 5                               Nick@sealworks.com      Embedding Video   <video src="http://example.com/myM...
Intro to HTML 5                                            Nick@sealworks.com      Embedding Video        <video controls>...
Intro to HTML 5                                    Nick@sealworks.com                               www.longtailvideo.comt...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   82 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   83 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   84 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   85 of 148             03/24/11
Intro to HTML 5                                            Nick@sealworks.com     HTML 5 Support              canvas / svg...
Intro to HTML 5                      Nick@sealworks.com                        geolocationtwitter.com/nickfloro    87 of 1...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   88 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   89 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.com     // the geolocation api     brings browser based     location to...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   91 of 148             03/24/11
Intro to HTML 5                           Nick@sealworks.com                        You are getting                       ...
Intro to HTML 5                                                 Nick@sealworks.com     HTML 5 Support              canvas ...
Intro to HTML 5                     Nick@sealworks.com     app cache     & databasetwitter.com/nickfloro   94 of 148      ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   95 of 148             03/24/11
Intro to HTML 5                     Nick@sealworks.com        // database and app        cache store user data        and ...
Intro to HTML 5                     Nick@sealworks.comtwitter.com/nickfloro   97 of 148             03/24/11
Intro to HTML 5                                     Nick@sealworks.com     App Cache     List resources that you want to t...
Intro to HTML 5                                       Nick@sealworks.com     Database     var db = window.openDatabase("No...
Intro to HTML 5                                                  Nick@sealworks.com     HTML 5 Support              canvas...
Intro to HTML 5                        Nick@sealworks.comtwitter.com/nickfloro                        web workers         ...
Intro to HTML 5                      Nick@sealworks.com               HTML 5                            More Powertwitter....
Intro to HTML 5                      Nick@sealworks.com        // web workers defines        an API for running        bac...
Intro to HTML 5                                  Nick@sealworks.com  Demo’s                        Bad Primes (FF 3.5)    ...
Intro to HTML 5                                        Nick@sealworks.com              Web Workers              <script>  ...
Intro to HTML 5                                                Nick@sealworks.com                        worker.js        ...
Intro to HTML 5                                                  Nick@sealworks.com     HTML 5 Support              canvas...
Intro to HTML 5                                                Nick@sealworks.com  Test for Usability             Test on ...
Intro to HTML 5                      Nick@sealworks.comtwitter.com/nickfloro   109 of 148             03/24/11
Intro to HTML 5                                      Nick@sealworks.com                        Forms                      ...
Intro to HTML 5                      Nick@sealworks.comtwitter.com/nickfloro   111 of 148             03/24/11
Intro to HTML 5                          Nick@sealworks.com                  Design for Flexibilitytwitter.com/nickfloro  ...
Intro to HTML 5                       Nick@sealworks.com                                     NickFloro.comtwitter.com/nick...
Intro to HTML 5                          Nick@sealworks.com                        Resourcestwitter.com/nickfloro       11...
Intro to HTML 5                                        Nick@sealworks.com                                     html5doctor....
Intro to HTML 5                                    Nick@sealworks.com                                www.thinkvitamin.comt...
Intro to HTML 5                              Nick@sealworks.com                         http://www.caniuse.com/twitter.com...
Intro to HTML 5                      Nick@sealworks.comtwitter.com/nickfloro   118 of 148             03/24/11
Intro to HTML 5                                       Nick@sealworks.com                                     html5demos.co...
Intro to HTML 5                                         Nick@sealworks.com                                     html5galler...
Intro to HTML 5                                       Nick@sealworks.com                                     www.sencha.co...
Intro to HTML 5                                      Nick@sealworks.com                                     www.css3.infot...
Intro to HTML 5                                      Nick@sealworks.com                                     www.uxmag.comt...
Intro to HTML 5                                          Nick@sealworks.com                                     DiveintoHT...
Intro to HTML 5                                             Nick@sealworks.com                                     Introdu...
Intro to HTML 5                                     Nick@sealworks.com        CSS3 for Web Designers        Dan Cederholm ...
Intro to HTML 5                              Nick@sealworks.com                        www.kesiev.com/akihabara/twitter.co...
Intro to HTML 5                              Nick@sealworks.com    Go Play, Experiment, Dream                        Apple...
Intro to HTML 5                                  Nick@sealworks.com                        Search Flickr.com for iPad UItw...
Intro to HTML 5                                  Nick@sealworks.com         Resources                        • Designing I...
Intro to HTML 5                                     Nick@sealworks.com         Resources                        • Designin...
Intro to HTML 5                            Nick@sealworks.com                        www.smashingmagazine.comtwitter.com/n...
Intro to HTML 5                                    Nick@sealworks.com                               www.longtailvideo.comt...
Intro to HTML 5                                           Nick@sealworks.com                             Compression for G...
Intro to HTML 5                                Nick@sealworks.com  Screencasts 101 Mini-Session                           ...
Intro to HTML 5                                        Nick@sealworks.com                                     www.twitter....
Intro to HTML 5                                        Nick@sealworks.com                                     www.lrnchat....
Intro to HTML 5                                      Nick@sealworks.com                                     www.panma.orgt...
Intro to HTML 5                                                  Nick@sealworks.com                         http://www.fli...
Intro to HTML 5                                          Nick@sealworks.com                                     www.poster...
Intro to HTML 5                      Nick@sealworks.comtwitter.com/nickfloro   141 of 148             03/24/11
Intro to HTML 5                      Nick@sealworks.comtwitter.com/nickfloro   142 of 148             03/24/11
Intro to HTML 5                      Nick@sealworks.comtwitter.com/nickfloro   143 of 148             03/24/11
Intro to HTML 5                      Nick@sealworks.comtwitter.com/nickfloro   144 of 148             03/24/11
Intro to HTML 5                      Nick@sealworks.comtwitter.com/nickfloro   145 of 148             03/24/11
Intro to HTML 5                                    Nick@sealworks.com                                     www.TED.comtwitt...
Intro to HTML 5                                                                                    Nick@sealworks.comExplo...
Intro to HTML 5                                             Nick@sealworks.com         Thank You                          ...
Upcoming SlideShare
Loading in …5
×

Intro to HTML 5 #LS2011

24,673
-1

Published on

This session provides a introduction to 6 core features within HTML5 and several resources that you can use today to get started and explore the technology for learning.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
24,673
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
96
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Intro to HTML 5 #LS2011

  1. 1. Intro to HTML 5 Nick@sealworks.com Getting Started with HTML5 Nick@sealworks.com Twitter.com/NickFlorotwitter.com/nickfloro 1 of 148 03/24/11
  2. 2. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 2 of 148 03/24/11
  3. 3. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 3 of 148 03/24/11
  4. 4. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 4 of 148 03/24/11
  5. 5. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 5 of 148 03/24/11
  6. 6. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 6 of 148 03/24/11
  7. 7. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 7 of 148 03/24/11
  8. 8. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 8 of 148 03/24/11
  9. 9. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 9 of 148 03/24/11
  10. 10. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 10 of 148 03/24/11
  11. 11. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 11 of 148 03/24/11
  12. 12. Intro to HTML 5 Nick@sealworks.com The Web Platform is Accelerating 2002 WebKittwitter.com/nickfloro 12 of 148 03/24/11
  13. 13. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 13 of 148 03/24/11
  14. 14. Intro to HTML 5 Nick@sealworks.com Next Generation Mobile Using Webkit Android iOS RIM Blackberrytwitter.com/nickfloro 14 of 148 03/24/11
  15. 15. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 15 of 148 03/24/11
  16. 16. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 16 of 148 03/24/11
  17. 17. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 17 of 148 03/24/11
  18. 18. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 18 of 148 03/24/11
  19. 19. Intro to HTML 5 Nick@sealworks.com Solving Developer Challenges Graphics Location Storage Speedtwitter.com/nickfloro 19 of 148 03/24/11
  20. 20. Intro to HTML 5 Nick@sealworks.com Which browserʼs support HTML 5? Chrome Safari Firefox Operatwitter.com/nickfloro 20 of 148 03/24/11
  21. 21. Intro to HTML 5 Nick@sealworks.com Which browserʼs support HTML 5? Chrome Safari Firefox Opera BETA Internet Explorer 9twitter.com/nickfloro 21 of 148 03/24/11
  22. 22. Intro to HTML 5 Nick@sealworks.comHTML 5in the works...twitter.com/nickfloro 22 of 148 03/24/11
  23. 23. Intro to HTML 5 Nick@sealworks.com Advanced Core Languagetwitter.com/nickfloro 23 of 148 03/24/11
  24. 24. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 24 of 148 03/24/11
  25. 25. Intro to HTML 5 Nick@sealworks.com HTML 4twitter.com/nickfloro 25 of 148 03/24/11
  26. 26. Intro to HTML 5 Nick@sealworks.com HTML 5 - Introduces New Elementstwitter.com/nickfloro 26 of 148 03/24/11
  27. 27. Intro to HTML 5 Nick@sealworks.com The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer. <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>twitter.com/nickfloro 27 of 148 03/24/11
  28. 28. Intro to HTML 5 Nick@sealworks.com Improve Web Appstwitter.com/nickfloro 28 of 148 03/24/11
  29. 29. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 29 of 148 03/24/11
  30. 30. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 30 of 148 03/24/11
  31. 31. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 31 of 148 03/24/11
  32. 32. Intro to HTML 5 Nick@sealworks.com Re-Address backward compatibilitytwitter.com/nickfloro 32 of 148 03/24/11
  33. 33. Intro to HTML 5 Nick@sealworks.com Flow chart Compatibilitytwitter.com/nickfloro 33 of 148 03/24/11
  34. 34. Intro to HTML 5 Nick@sealworks.com Flow chart Replaces: all prior versions of htmltwitter.com/nickfloro 34 of 148 03/24/11
  35. 35. Intro to HTML 5 Nick@sealworks.com Flow chart Replaces: XHTML 1.0 & Dom2html with new APIʼstwitter.com/nickfloro 35 of 148 03/24/11
  36. 36. Intro to HTML 5 Nick@sealworks.com HTML 5 Design Principlestwitter.com/nickfloro 36 of 148 03/24/11
  37. 37. Intro to HTML 5 Nick@sealworks.com 1. Support existing contenttwitter.com/nickfloro 37 of 148 03/24/11
  38. 38. Intro to HTML 5 Nick@sealworks.com 2. Insure Interoperabilitytwitter.com/nickfloro 38 of 148 03/24/11
  39. 39. Intro to HTML 5 Nick@sealworks.com W3c de facto Standardtwitter.com/nickfloro 39 of 148 03/24/11
  40. 40. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 40 of 148 03/24/11
  41. 41. Intro to HTML 5 Nick@sealworks.com 3. Define UA Behavior (User Agent)twitter.com/nickfloro 41 of 148 03/24/11
  42. 42. Intro to HTML 5 Nick@sealworks.com 4. Improve Handling of Errorstwitter.com/nickfloro 42 of 148 03/24/11
  43. 43. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 43 of 148 03/24/11
  44. 44. Intro to HTML 5 Nick@sealworks.com 5. Evolve not recreate what we already havetwitter.com/nickfloro 44 of 148 03/24/11
  45. 45. Intro to HTML 5 Nick@sealworks.com Build on real world use and test casestwitter.com/nickfloro 45 of 148 03/24/11
  46. 46. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 46 of 148 03/24/11
  47. 47. Intro to HTML 5 Nick@sealworks.com Drawing on the Web Flashtwitter.com/nickfloro 47 of 148 03/24/11
  48. 48. Intro to HTML 5 Nick@sealworks.com Canvas & SVGtwitter.com/nickfloro 48 of 148 03/24/11
  49. 49. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 49 of 148 03/24/11
  50. 50. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 50 of 148 03/24/11
  51. 51. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 51 of 148 03/24/11
  52. 52. Intro to HTML 5 Nick@sealworks.com Scalable Vector Graphics | SVGtwitter.com/nickfloro 52 of 148 03/24/11
  53. 53. Intro to HTML 5 Nick@sealworks.com Vector Graphics Scale & Look Great!twitter.com/nickfloro 53 of 148 03/24/11
  54. 54. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 54 of 148 03/24/11
  55. 55. Intro to HTML 5 Nick@sealworks.com Demoʼs • Mozilla Download Center (FF) • First Person Gifter (FF) • Population Demo (FF) • Bespin - HTML Editor (Safari) • German Election Atlas (Safari)twitter.com/nickfloro 55 of 148 03/24/11
  56. 56. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 56 of 148 03/24/11
  57. 57. Intro to HTML 5 Nick@sealworks.com 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 • Pixelstwitter.com/nickfloro 57 of 148 03/24/11
  58. 58. Intro to HTML 5 Nick@sealworks.com HTML 5 Support canvas / svg     video geolocation app cache database workerstwitter.com/nickfloro 58 of 148 03/24/11
  59. 59. Intro to HTML 5 Nick@sealworks.com Quake II - Browser Onlytwitter.com/nickfloro 59 of 148 03/24/11
  60. 60. Intro to HTML 5 Nick@sealworks.com Quake II - Browser Onlytwitter.com/nickfloro 60 of 148 03/24/11
  61. 61. Intro to HTML 5 Nick@sealworks.com Quake II - Browser Only WebGL 3D graphics HTML 5 Canvas HTML 5 Audio HTML 5 Web Sockets HTML 5 Local Storagetwitter.com/nickfloro 61 of 148 03/24/11
  62. 62. Intro to HTML 5 Nick@sealworks.com Videotwitter.com/nickfloro 62 of 148 03/24/11
  63. 63. Intro to HTML 5 Nick@sealworks.com One video to play everywhere.twitter.com/nickfloro 63 of 148 03/24/11
  64. 64. Intro to HTML 5 Nick@sealworks.com The Production Process Capture to delivery and beyond Video / Audio Assets Compression Authoring Deliverytwitter.com/nickfloro 64 of 148 03/24/11
  65. 65. Intro to HTML 5 Nick@sealworks.com Standards Are Everywhere NTSC/ RedBook FM MPEG-2 PAL AC-3 DV JPEG MPEG- 1/ MPEG- 4 audiotwitter.com/nickfloro 65 of 148 03/24/11
  66. 66. Intro to HTML 5 Nick@sealworks.com MPEG-4: The MPEG for the Internet The 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 = 480mbtwitter.com/nickfloro 66 of 148 03/24/11
  67. 67. Intro to HTML 5 Nick@sealworks.com Guidelines for Compression Pixels HD 1080i 1920 x 1080 720P 1280 x 720 DV 720 x 486twitter.com/nickfloro 67 of 148 03/24/11
  68. 68. Intro to HTML 5 Nick@sealworks.com Guidelines for Compression Content Placement 320 x 240twitter.com/nickfloro 68 of 148 03/24/11
  69. 69. Intro to HTML 5 Nick@sealworks.com Guidelines for Compression Selecting a Size 640 x 480 512 x 384 320 x 240twitter.com/nickfloro 69 of 148 03/24/11
  70. 70. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 70 of 148 03/24/11
  71. 71. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 71 of 148 03/24/11
  72. 72. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 72 of 148 03/24/11
  73. 73. Intro to HTML 5 Nick@sealworks.com Guidelines for Compression Tips & Hints • Frame Rate: 15 fps – Key Frames: 4 x fps • 2 Pass Variable Bit Rate • QuickTime: Sorenson 3 / MPEG 4 / H264 • Flash: Spark / On2 Pro / H264twitter.com/nickfloro 73 of 148 03/24/11
  74. 74. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 74 of 148 03/24/11
  75. 75. Intro to HTML 5 Nick@sealworks.com Video Compression Flashtwitter.com/nickfloro 75 of 148 03/24/11
  76. 76. Intro to HTML 5 Nick@sealworks.com <!-- 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>twitter.com/nickfloro 76 of 148 03/24/11
  77. 77. Intro to HTML 5 Nick@sealworks.com // HTML 5 makes <video> as easy as <img> // HTML 5 makes <video> as easy as <img>twitter.com/nickfloro 77 of 148 03/24/11
  78. 78. Intro to HTML 5 Nick@sealworks.com Video Compression HTML 5 Options Flash H264 Ogg Theora MPEG 4 WebMtwitter.com/nickfloro 78 of 148 03/24/11
  79. 79. Intro to HTML 5 Nick@sealworks.com Embedding Video <video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element. </video>twitter.com/nickfloro 79 of 148 03/24/11
  80. 80. Intro to HTML 5 Nick@sealworks.com 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();twitter.com/nickfloro 80 of 148 03/24/11
  81. 81. Intro to HTML 5 Nick@sealworks.com www.longtailvideo.comtwitter.com/nickfloro 81 of 148 03/24/11
  82. 82. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 82 of 148 03/24/11
  83. 83. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 83 of 148 03/24/11
  84. 84. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 84 of 148 03/24/11
  85. 85. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 85 of 148 03/24/11
  86. 86. Intro to HTML 5 Nick@sealworks.com HTML 5 Support canvas / svg     video     geolocation app cache database workerstwitter.com/nickfloro 86 of 148 03/24/11
  87. 87. Intro to HTML 5 Nick@sealworks.com geolocationtwitter.com/nickfloro 87 of 148 03/24/11
  88. 88. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 88 of 148 03/24/11
  89. 89. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 89 of 148 03/24/11
  90. 90. Intro to HTML 5 Nick@sealworks.com // the geolocation api brings browser based location to your appstwitter.com/nickfloro 90 of 148 03/24/11
  91. 91. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 91 of 148 03/24/11
  92. 92. Intro to HTML 5 Nick@sealworks.com You are getting hotter.twitter.com/nickfloro 92 of 148 03/24/11
  93. 93. Intro to HTML 5 Nick@sealworks.com HTML 5 Support canvas / svg     video     geolocation    iPhone  app cache database workerstwitter.com/nickfloro 93 of 148 03/24/11
  94. 94. Intro to HTML 5 Nick@sealworks.com app cache & databasetwitter.com/nickfloro 94 of 148 03/24/11
  95. 95. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 95 of 148 03/24/11
  96. 96. Intro to HTML 5 Nick@sealworks.com // database and app cache store user data and app resources locallytwitter.com/nickfloro 96 of 148 03/24/11
  97. 97. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 97 of 148 03/24/11
  98. 98. Intro to HTML 5 Nick@sealworks.com App Cache List resources that you want to take offline CACHE MANIFEST /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css/stickies.css /js/stickies.js <body manifest="./cache.manifest"> </body>twitter.com/nickfloro 98 of 148 03/24/11
  99. 99. Intro to HTML 5 Nick@sealworks.com Database var 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]); } ); }twitter.com/nickfloro 99 of 148 03/24/11
  100. 100. Intro to HTML 5 Nick@sealworks.com HTML 5 Support canvas / svg     video     geolocation    iPhone  app cache     mobile database     mobile workerstwitter.com/nickfloro 100 of 148 03/24/11
  101. 101. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro web workers 101 of 148 03/24/11
  102. 102. Intro to HTML 5 Nick@sealworks.com HTML 5 More Powertwitter.com/nickfloro 102 of 148 03/24/11
  103. 103. Intro to HTML 5 Nick@sealworks.com // web workers defines an API for running background scriptstwitter.com/nickfloro 103 of 148 03/24/11
  104. 104. Intro to HTML 5 Nick@sealworks.com Demo’s Bad Primes (FF 3.5) Good Primes (FF 3.5) Motion Tracker (FF)twitter.com/nickfloro 104 of 148 03/24/11
  105. 105. Intro to HTML 5 Nick@sealworks.com Web Workers <script> var worker = new Worker(worker.js); worker.onmessage = function (event) { console.log(Results: + event.data); }; </script>twitter.com/nickfloro 105 of 148 03/24/11
  106. 106. Intro to HTML 5 Nick@sealworks.com worker.js function findPrimes() { // ... prime algorithm here postMessage(nextPrime); } findPrimes();twitter.com/nickfloro 106 of 148 03/24/11
  107. 107. Intro to HTML 5 Nick@sealworks.com HTML 5 Support canvas / svg     video     geolocation    iPhone  app cache     mobile database     mobile workers    twitter.com/nickfloro 107 of 148 03/24/11
  108. 108. Intro to HTML 5 Nick@sealworks.com 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 − iPhone − Android − Blackberry, Windows 7 Phontwitter.com/nickfloro 108 of 148 03/24/11
  109. 109. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 109 of 148 03/24/11
  110. 110. Intro to HTML 5 Nick@sealworks.com Forms CSS 3 Effects/Transitionstwitter.com/nickfloro 110 of 148 03/24/11
  111. 111. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 111 of 148 03/24/11
  112. 112. Intro to HTML 5 Nick@sealworks.com Design for Flexibilitytwitter.com/nickfloro 112 of 148 03/24/11
  113. 113. Intro to HTML 5 Nick@sealworks.com NickFloro.comtwitter.com/nickfloro 113 of 148 03/24/11
  114. 114. Intro to HTML 5 Nick@sealworks.com Resourcestwitter.com/nickfloro 114 of 148 03/24/11
  115. 115. Intro to HTML 5 Nick@sealworks.com html5doctor.comtwitter.com/nickfloro 115 of 148 03/24/11
  116. 116. Intro to HTML 5 Nick@sealworks.com www.thinkvitamin.comtwitter.com/nickfloro 116 of 148 03/24/11
  117. 117. Intro to HTML 5 Nick@sealworks.com http://www.caniuse.com/twitter.com/nickfloro 117 of 148 03/24/11
  118. 118. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 118 of 148 03/24/11
  119. 119. Intro to HTML 5 Nick@sealworks.com html5demos.comtwitter.com/nickfloro 119 of 148 03/24/11
  120. 120. Intro to HTML 5 Nick@sealworks.com html5gallery.comtwitter.com/nickfloro 120 of 148 03/24/11
  121. 121. Intro to HTML 5 Nick@sealworks.com www.sencha.comtwitter.com/nickfloro 121 of 148 03/24/11
  122. 122. Intro to HTML 5 Nick@sealworks.com www.css3.infotwitter.com/nickfloro 122 of 148 03/24/11
  123. 123. Intro to HTML 5 Nick@sealworks.com www.uxmag.comtwitter.com/nickfloro 123 of 148 03/24/11
  124. 124. Intro to HTML 5 Nick@sealworks.com DiveintoHTML5.orgtwitter.com/nickfloro 124 of 148 03/24/11
  125. 125. Intro to HTML 5 Nick@sealworks.com Introducing HTML5 (Voices That Matter) Bruce Lawsontwitter.com/nickfloro 125 of 148 03/24/11
  126. 126. Intro to HTML 5 Nick@sealworks.com CSS3 for Web Designers Dan Cederholm | A Book Aparttwitter.com/nickfloro 126 of 148 03/24/11
  127. 127. Intro to HTML 5 Nick@sealworks.com www.kesiev.com/akihabara/twitter.com/nickfloro 127 of 148 03/24/11
  128. 128. Intro to HTML 5 Nick@sealworks.com Go Play, Experiment, Dream Apple iOStwitter.com/nickfloro 128 of 148 03/24/11
  129. 129. Intro to HTML 5 Nick@sealworks.com Search Flickr.com for iPad UItwitter.com/nickfloro 129 of 148 03/24/11
  130. 130. Intro to HTML 5 Nick@sealworks.com Resources • Designing Interactions • Bill Moggridgetwitter.com/nickfloro 130 of 148 03/24/11
  131. 131. Intro to HTML 5 Nick@sealworks.com Resources • Designing the Obvious: A Common Sense Approach to Web Application Design • Robert Hoekman Jr.twitter.com/nickfloro 131 of 148 03/24/11
  132. 132. Intro to HTML 5 Nick@sealworks.com www.smashingmagazine.comtwitter.com/nickfloro 132 of 148 03/24/11
  133. 133. Intro to HTML 5 Nick@sealworks.com www.longtailvideo.comtwitter.com/nickfloro 133 of 148 03/24/11
  134. 134. Intro to HTML 5 Nick@sealworks.com Compression for Great Video and Audio, Master Tips and Common Sensetwitter.com/nickfloro 134 of 148 03/24/11
  135. 135. Intro to HTML 5 Nick@sealworks.com Screencasts 101 Mini-Session www.jingproject.comtwitter.com/nickfloro 135 of 148 03/24/11
  136. 136. Intro to HTML 5 Nick@sealworks.com www.twitter.comtwitter.com/nickfloro 136 of 148 03/24/11
  137. 137. Intro to HTML 5 Nick@sealworks.com www.lrnchat.comtwitter.com/nickfloro 137 of 148 03/24/11
  138. 138. Intro to HTML 5 Nick@sealworks.com www.panma.orgtwitter.com/nickfloro 138 of 148 03/24/11
  139. 139. Intro to HTML 5 Nick@sealworks.com http://www.flickr.com/photos/fraserspeirs/sets/ 72157623224262135/twitter.com/nickfloro 139 of 148 03/24/11
  140. 140. Intro to HTML 5 Nick@sealworks.com www.posterous.comtwitter.com/nickfloro 140 of 148 03/24/11
  141. 141. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 141 of 148 03/24/11
  142. 142. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 142 of 148 03/24/11
  143. 143. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 143 of 148 03/24/11
  144. 144. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 144 of 148 03/24/11
  145. 145. Intro to HTML 5 Nick@sealworks.comtwitter.com/nickfloro 145 of 148 03/24/11
  146. 146. Intro to HTML 5 Nick@sealworks.com www.TED.comtwitter.com/nickfloro 146 of 148 03/24/11
  147. 147. Intro to HTML 5 Nick@sealworks.comExplore Pictures Blog Video Audio Micro-blogging 3D Models ePortfolios Course Management System Multiplayer Environmenttwitter.com/nickfloro 147 of 148 03/24/11
  148. 148. Intro to HTML 5 Nick@sealworks.com Thank You Nick Floro sealworks interactive studios nick@sealworks.com www.sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickflorotwitter.com/nickfloro 148 of 148 03/24/11
  1. A particular slide catching your eye?

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

×