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.

HTML5: Markup Evolved


Published on

HTML5 presentation for Carolina Technology Consultants (CTC) fall retreat. October 21, 2010.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5: Markup Evolved

  1. 1. HTML5: Markup Evolved y lton y H 010 Bill C 2 CT
  2. 2.
  3. 3. 2022 “Candidate Recommendation” for W3C. Ian Hickson, HTML5 Editor
  4. 4. HTML: A Short, Strange Trip
  5. 5. 1991 “HTML 1999 HTML 4.0 2000 XHTML Tags” 2004 XHTML2 2009 W3C & vs. HTML5 WHATWG UNITE 2010 HTML5
  6. 6. HTML5 Principles Support existing content Degrade gracefully Don’t reinvent the wheel Pave the cowpaths Evolution, not revolution “Revolutions sometimes change the world to the better. Most often, however, it is better to evolve an existing design rather than throwing it away.” -- W3C
  7. 7. us ers r si der rs ove ct, con nte .” i onfl r imple l pu me rity fc e o s ove c as r ret ica “In autho rt heo ov er so ve enc ies> cifi er stitu sp e ty of con r <p iori
  8. 8. Structure & New Elements
  9. 9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  10. 10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <!DOCTYPE html>
  11. 11. <HEADER> <NAV> <SECTION> <ARTICLE> <ASIDE> Ready to start using new <FOOTER> markup? 1) Declare as “Block” in CSS 2) Add Remy’s script for IE
  12. 12. Obsolete (not “Deprecated”) Frames (Woot!) , Frameset, Font, Big, Center, Strike, Cellpadding, Cellspacing, Valign
  13. 13. Rich Media
  14. 14. Canvas: Drawing with Code
  15. 15. var canvas = document.getElementById("myCanvas"); var context = canvas.getContext('2d'); context.shadowOffsetX = 4; context.shadowOffsetY = 4; context.shadowBlur = 5; context.shadowColor = "#666"; context.fillStyle = “#ccc”; context.fillRect (0, 0, 150,100); <p><canvas id="myCanvas" width="300" height="300">Your browser does not have support for canvas. Insert sad trombone .wav file.</p>
  16. 16. Audio MP3 and .OGG required today Use <source> Attributes: autoplay, controls, preload, src <audio controls preload=”none”> <source src="file.ogg" type=”audio/.ogg”/> <source src="file.mp3" type=”audio/.mp3”/> </audio>
  17. 17. Audio MP3 and .OGG required today Use <source> Attributes: autoplay, controls, preload, src “Graceful degradation” <audio controls preload=”none”> <source src="file.ogg" type=”audio/ogg”/> If HTML5 is not supported <source src="file.mp3" type=”audio/mp3”/> fallback to Flash and file download. <object type=”application/x-shockwave-flash” data=”player.swf?soundFile=file.mp3”> <param name=”movie” value=”player.swf?sound File=file.mp3”> <a href=”file.mp3”>Download MP3 file</a> </audio>
  18. 18. Video .MP4, .OGV, and .Webm required today .Webm = new open format. Game changer? Attributes: autoplay, controls, height, width, preload, loop <video controls poster=”image.jpg” width=”360” height=”240”> Use “Poster” attribute to display a frame of the video <source src="video.ogv" type=”video/ogg”/> <source src=”video.mp4" type=”video/mp4”/> <source src=”video.webm"type=”video/webm”/> <object type=”application/x-shockwave-flash” width=”360” height=”240” data=”player.swf?soundFile=video.mp4”> <param name=”movie” value=”player.swf?sound File=video.mp4”> <a href=”video.mp4”>Download video</a> </video>
  19. 19. Forms & App Development
  20. 20. Placeholder <input placeholder="search"> Attribute can only contain text (no HTML) Ignored if not supported by browsers Can use a JavaScript fallback solution
  21. 21. Autofocus Automatically focus on a form field <input type= "text" autofocus> Ignored if not supported by browsers Can use a JavaScript fallback solution
  22. 22. Required* Simple client-side form validation <input type= "text" required> Does not prevent browsers from submitting forms
  23. 23. User Interface Replace JavaScript widgets Sliders Date Pickers Color pickers (Boo. Not much browser support today.)
  24. 24. JavaScript Goodness Drag and Drop w/o tons of JS Geolocation Offline Apps (Goodbye Google Gears) Local Storage (Goodbye cookies?)
  25. 25. This is How I Role. <header role= "banner" > Structural: banner, contentinfo, main, navigation, note, search Widget: alert, checkbox, dialog, radio, scrollbar, slider, tab, textbox,
  26. 26. Next Steps ✓ Be flexible and embrace change. ✓ Dive in. ✓ Modify doctype. ✓ Add new structural elements. ✓ Experiment with canvas, audio, and video (probably too early for primetime). ✓ Learn about parallel developments such as microformats and ARIA.
  27. 27. Resources SitePoint HTML5 Course HTML5 For Web Designers Slideshare HTML Presentations Dive Into HTML5 Smashing Magazine Think Vitamin
  28. 28. Thanks CTC! Billy Hylton email: web: linkedin:
  29. 29. Credits All Images Creative Commons (“Attribution-NonCommercial”) VW Van Whiteboard sizes/o/in/photostream/ sizes/l/in/photostream/ Tim Berners-Lee Headphones 4242548616/#/ Fist Video 24063093@N07/3983882921/sizes/l/in/photostream/ sizes/l/in/photostream/ Gloves Crayons