0
UnderstandingHTML5How it Will Improve Our Learning     Nick@sealworks.com     Twitter.com/NickFloro
What can it do?
HTML5 = JS + CSS3
SEMANTICS                                      DEVICE ACCESS   CSS3                                          MULTIMEDIACON...
The Web Platform is Accelerating    2002    WebKit
Next Generation Mobile Using Webkit  Android       iOS        RIM Blackberry
Solving Developer ChallengesGraphics   Location   Storage   Speed
Which browserʼs support HTML 5?   Chrome   Safari   Firefox   Opera
Which browserʼs support HTML 5?   Chrome   Safari       Firefox      Opera                               BETA             ...
HTML 5in the works...
AdvancedCore Language
HTML 4
HTML 5 - Introduces New Elements
The div elements can be replaced with thenew elements: header, nav, section, article,aside, and footer.<body> <header>...<...
Improve Web Apps
Flow chart Compatibility
Flow chart Replaces: all prior versions of html
Flow chart Replaces: XHTML 1.0 & Dom2html with new             APIʼs
HTML 5Design Principles
1. Support existing content
2. Insure Interoperability
W3c de facto Standard
3. Define UA Behavior(User Agent)
4. Improve Handlingof Errors
5. Evolve not recreatewhat we already have
Build on real world useand test cases
Drawing on the Web                     Flash
Canvas & SVG
Scalable Vector Graphics | SVG
Vector Graphics Scale & Look Great!
Demoʼs  • Mozilla Download Center (FF)  • First Person Gifter (FF)  • Population Demo (FF)  • Bespin - HTML Editor (Safari...
When Canvas or SVG?SVG -> High level       Canvas -> Low level •   Import/Export       •   No mouse interaction •   Easy U...
HTML 5 Support canvas / svg                                video  geolocation   app cache    database     workers
Quake II - Browser Only
Quake II - Browser Only
Quake II - Browser Only                   WebGL 3D graphics HTML 5 Canvas                      HTML 5 Audio   HTML 5 Web S...
Video
One video to play everywhere.
The Production Process  Capture to delivery and beyondVideo / Audio Assets   Compression   Authoring   Delivery
Standards Are Everywhere                     NTSC/  RedBook FM   MPEG-2 PAL AC-3   DV   JPEGMPEG-   1/MPEG-4 audio
MPEG-4: The MPEG for the InternetThe standard for the digital media revolution •   Original DV 60 sec 266mb •   MPEG-4 = 4...
Guidelines for CompressionPixels    HD 1080i 1920 x 1080           720P 1280 x 720                    DV 720 x 486
Guidelines for CompressionContent Placement       320 x 240
Guidelines for CompressionSelecting a Size            640 x 480                        512 x 384                          ...
Guidelines for CompressionFrame Rate 29.97 fps
Guidelines for CompressionFrame Rate 29.97 fps             15 fps
Guidelines for CompressionTips & Hints Key Frames: 4 x fps
Guidelines for Compression2 Pass Variable Bit Rate
Guidelines for Compression2 Pass Variable Bit Rate
Guidelines for CompressionTips & Hints•   Frame Rate: 15 fps    –   Key Frames: 4 x fps•   Data Rate Target 800-1200 kbs• ...
www.longtailvideo.com
Easy Access to VideoFlip $100 to $200
Smart Phones
Video Compression Flash
<!-- flash movie & bullets -->	   <div id="flashholder">	   	   <div id="flash">	   	   	   <script language="javascript">...
// HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>
Video CompressionHTML 5 Options Flash           H264     Ogg Theora                 MPEG 4     WebM
Embedding Video<video src="http://example.com/myMovie.ogg"controls>Your browser does not support the video element.</video>
Embedding Video<video controls><source src="foo.ogg" type="video/ogg"><source src="foo.mp4">Your browser does not support ...
www.longtailvideo.com
HTML 5 Support canvas / svg                                video                           geolocation   app cache...
geolocation
// the geolocation apibrings browser basedlocation to your apps
O              C    AR              T    P       www.seeknspell.com
You are gettinghotter.
HTML 5 Support canvas / svg                                     video                                geolocation  ...
app cache& database
// database and appcache store user dataand app resourceslocally
App CacheList resources that you want to take offlineCACHE MANIFEST/static/stickies.html/media/deleteButton.png/media/dele...
Databasevar db = window.openDatabase("NoteTest", "1.0","Example DB",200000);function saveMe(id, text, timestamp, left, top...
HTML 5 Support canvas / svg                                     video                                geolocation  ...
web workers
HTML 5   More Power
// web workers definesan API for runningbackground scripts
Demo’s     Bad Primes (FF 3.5)     Good Primes (FF 3.5)     Motion Tracker (FF)
HTML 5 Support canvas / svg                                     video                                geolocation  ...
Test for Usability   Test on Windows 7, Vista       • Internet Explorer 6, 7, 8, 9       • Firefox 3, 3.5, 3.6, 4.0 beta  ...
Web   App
Web App
Forms            CSS 3Effects/Transitions
Pixels & Aspect RatioSelecting a Size              Android Xoom                              1280 x 720                   ...
tumultco.com
animatable.com
Design for Flexibility
Capture & Analyze
Using CoverFlow view and Preview of Graphics
Design Scrapbook: iPhoto | LittleSnapper
NickFloro.com
Resources
html5rocks.com
html5doctor.com
www.thinkvitamin.com
http://www.caniuse.com/
labs.adobe.com/technologies/wallaby/
html5demos.com
html5gallery.com
www.sencha.com
www.css3.info
www.uxmag.com
DiveintoHTML5.org
Introducing HTML5(Voices That Matter)Bruce Lawson
CSS3 for Web DesignersDan Cederholm | A Book Apart
www.gamesalad.com
www.kesiev.com/akihabara/
Go Play, Experiment, Dream             Apple              iOS
Search Flickr.com for iPad UI
www.smashingmagazine.com
www.longtailvideo.com
Screencasts 101 Mini-Session              www.jingproject.com
www.twitter.com
www.lrnchat.com
www.panma.org
Nancy Durate   Garr Reynolds
http://www.flickr.com/photos/fraserspeirs/sets/72157623224262135/
www.posterous.com
www.TED.com
www.launchcycle.com
Explore                            Pictures          Blog                                                      Video      ...
Thank You            Nick Floro            sealworks interactive studios            nick@sealworks.com            www.seal...
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
HTML5 & Learning : ASTD Presentation 062411
Upcoming SlideShare
Loading in...5
×

HTML5 & Learning : ASTD Presentation 062411

1,504

Published on

Get an overview of how HTML5 will change how we use the web for app and content development. We cover 5 technologies you can start to use today, show lots of example and view dozens of resources to start playing and learning about HTML5 today.

Published in: Technology, Art & Photos
1 Comment
3 Likes
Statistics
Notes
  • wow !!! I liked very much... I'm teacher in Mexico... we 'r use your presentation in class, and is so good!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,504
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
75
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 & Learning : ASTD Presentation 062411"

  1. 1. UnderstandingHTML5How it Will Improve Our Learning Nick@sealworks.com Twitter.com/NickFloro
  2. 2. What can it do?
  3. 3. HTML5 = JS + CSS3
  4. 4. SEMANTICS DEVICE ACCESS CSS3 MULTIMEDIACONNECTIVITY PERFORMANCE & 3D, GRAPHICS OFFLINE & STORAGE INTEGRATION & EFFECTS
  5. 5. The Web Platform is Accelerating 2002 WebKit
  6. 6. Next Generation Mobile Using Webkit Android iOS RIM Blackberry
  7. 7. Solving Developer ChallengesGraphics Location Storage Speed
  8. 8. Which browserʼs support HTML 5? Chrome Safari Firefox Opera
  9. 9. Which browserʼs support HTML 5? Chrome Safari Firefox Opera BETA Internet Explorer 9
  10. 10. HTML 5in the works...
  11. 11. AdvancedCore Language
  12. 12. HTML 4
  13. 13. HTML 5 - Introduces New Elements
  14. 14. 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>
  15. 15. Improve Web Apps
  16. 16. Flow chart Compatibility
  17. 17. Flow chart Replaces: all prior versions of html
  18. 18. Flow chart Replaces: XHTML 1.0 & Dom2html with new APIʼs
  19. 19. HTML 5Design Principles
  20. 20. 1. Support existing content
  21. 21. 2. Insure Interoperability
  22. 22. W3c de facto Standard
  23. 23. 3. Define UA Behavior(User Agent)
  24. 24. 4. Improve Handlingof Errors
  25. 25. 5. Evolve not recreatewhat we already have
  26. 26. Build on real world useand test cases
  27. 27. Drawing on the Web Flash
  28. 28. Canvas & SVG
  29. 29. Scalable Vector Graphics | SVG
  30. 30. Vector Graphics Scale & Look Great!
  31. 31. Demoʼs • Mozilla Download Center (FF) • First Person Gifter (FF) • Population Demo (FF) • Bespin - HTML Editor (Safari) • German Election Atlas (Safari)
  32. 32. 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
  33. 33. HTML 5 Support canvas / svg     video geolocation app cache database workers
  34. 34. Quake II - Browser Only
  35. 35. Quake II - Browser Only
  36. 36. Quake II - Browser Only WebGL 3D graphics HTML 5 Canvas HTML 5 Audio HTML 5 Web Sockets HTML 5 Local Storage
  37. 37. Video
  38. 38. One video to play everywhere.
  39. 39. The Production Process Capture to delivery and beyondVideo / Audio Assets Compression Authoring Delivery
  40. 40. Standards Are Everywhere NTSC/ RedBook FM MPEG-2 PAL AC-3 DV JPEGMPEG- 1/MPEG-4 audio
  41. 41. 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
  42. 42. Guidelines for CompressionPixels HD 1080i 1920 x 1080 720P 1280 x 720 DV 720 x 486
  43. 43. Guidelines for CompressionContent Placement 320 x 240
  44. 44. Guidelines for CompressionSelecting a Size 640 x 480 512 x 384 320 x 240
  45. 45. Guidelines for CompressionFrame Rate 29.97 fps
  46. 46. Guidelines for CompressionFrame Rate 29.97 fps 15 fps
  47. 47. Guidelines for CompressionTips & Hints Key Frames: 4 x fps
  48. 48. Guidelines for Compression2 Pass Variable Bit Rate
  49. 49. Guidelines for Compression2 Pass Variable Bit Rate
  50. 50. 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
  51. 51. www.longtailvideo.com
  52. 52. Easy Access to VideoFlip $100 to $200
  53. 53. Smart Phones
  54. 54. Video Compression Flash
  55. 55. <!-- 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>
  56. 56. // HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>
  57. 57. Video CompressionHTML 5 Options Flash H264 Ogg Theora MPEG 4 WebM
  58. 58. Embedding Video<video src="http://example.com/myMovie.ogg"controls>Your browser does not support the video element.</video>
  59. 59. 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();
  60. 60. www.longtailvideo.com
  61. 61. HTML 5 Support canvas / svg     video     geolocation app cache database workers
  62. 62. geolocation
  63. 63. // the geolocation apibrings browser basedlocation to your apps
  64. 64. O C AR T P www.seeknspell.com
  65. 65. You are gettinghotter.
  66. 66. HTML 5 Support canvas / svg     video     geolocation    iPhone  app cache database workers
  67. 67. app cache& database
  68. 68. // database and appcache store user dataand app resourceslocally
  69. 69. 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>
  70. 70. 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]);});}
  71. 71. HTML 5 Support canvas / svg     video     geolocation    iPhone  app cache     mobile database     mobile workers
  72. 72. web workers
  73. 73. HTML 5 More Power
  74. 74. // web workers definesan API for runningbackground scripts
  75. 75. Demo’s Bad Primes (FF 3.5) Good Primes (FF 3.5) Motion Tracker (FF)
  76. 76. HTML 5 Support canvas / svg     video     geolocation    iPhone  app cache     mobile database     mobile workers    
  77. 77. 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
  78. 78. Web App
  79. 79. Web App
  80. 80. Forms CSS 3Effects/Transitions
  81. 81. Pixels & Aspect RatioSelecting 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
  82. 82. tumultco.com
  83. 83. animatable.com
  84. 84. Design for Flexibility
  85. 85. Capture & Analyze
  86. 86. Using CoverFlow view and Preview of Graphics
  87. 87. Design Scrapbook: iPhoto | LittleSnapper
  88. 88. NickFloro.com
  89. 89. Resources
  90. 90. html5rocks.com
  91. 91. html5doctor.com
  92. 92. www.thinkvitamin.com
  93. 93. http://www.caniuse.com/
  94. 94. labs.adobe.com/technologies/wallaby/
  95. 95. html5demos.com
  96. 96. html5gallery.com
  97. 97. www.sencha.com
  98. 98. www.css3.info
  99. 99. www.uxmag.com
  100. 100. DiveintoHTML5.org
  101. 101. Introducing HTML5(Voices That Matter)Bruce Lawson
  102. 102. CSS3 for Web DesignersDan Cederholm | A Book Apart
  103. 103. www.gamesalad.com
  104. 104. www.kesiev.com/akihabara/
  105. 105. Go Play, Experiment, Dream Apple iOS
  106. 106. Search Flickr.com for iPad UI
  107. 107. www.smashingmagazine.com
  108. 108. www.longtailvideo.com
  109. 109. Screencasts 101 Mini-Session www.jingproject.com
  110. 110. www.twitter.com
  111. 111. www.lrnchat.com
  112. 112. www.panma.org
  113. 113. Nancy Durate Garr Reynolds
  114. 114. http://www.flickr.com/photos/fraserspeirs/sets/72157623224262135/
  115. 115. www.posterous.com
  116. 116. www.TED.com
  117. 117. www.launchcycle.com
  118. 118. Explore Pictures Blog Video Audio Micro-blogging 3D Models ePortfolios Course Management System Multiplayer Environment
  119. 119. 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
  1. A particular slide catching your eye?

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

×