Your SlideShare is downloading. ×
Intro to HTML 5 for Learning #eldc2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Intro to HTML 5 for Learning #eldc2011

1,228
views

Published on

Presented at ELDC2011 in Utah 2011.

Presented at ELDC2011 in Utah 2011.

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,228
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
78
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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