Your SlideShare is downloading. ×

HTML5: Markup Evolved

1,464

Published on

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

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

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

  • Be the first to like this

No Downloads
Views
Total Views
1,464
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
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. HTML5: Markup Evolved y lton y H 010 Bill C 2 CT
    • 2. http://www.youtube.com/watch?v=WvNVpHktrQ0
    • 3. 2022 “Candidate Recommendation” for W3C. Ian Hickson, HTML5 Editor
    • 4. HTML: A Short, Strange Trip
    • 5. 1991 “HTML 1999 HTML 4.0 2000 XHTML Tags” 2004 XHTML2 2009 W3C & vs. HTML5 WHATWG UNITE 2010 HTML5
    • 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. 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. Structure & New Elements
    • 9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    • 10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>
    • 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. Obsolete (not “Deprecated”) Frames (Woot!) , Frameset, Font, Big, Center, Strike, Cellpadding, Cellspacing, Valign
    • 13. Rich Media
    • 14. Canvas: Drawing with Code
    • 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. 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. 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. 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. Forms & App Development
    • 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. Autofocus Automatically focus on a form field <input type= "text" autofocus> Ignored if not supported by browsers Can use a JavaScript fallback solution
    • 22. Required* Simple client-side form validation <input type= "text" required> Does not prevent browsers from submitting forms
    • 23. User Interface Replace JavaScript widgets Sliders Date Pickers Color pickers (Boo. Not much browser support today.)
    • 24. JavaScript Goodness Drag and Drop w/o tons of JS Geolocation Offline Apps (Goodbye Google Gears) Local Storage (Goodbye cookies?)
    • 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. 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. Resources SitePoint HTML5 Course http://sitepoint.com/ HTML5 For Web Designers http://books.alistapart.com/ Slideshare HTML Presentations http://www.slideshare.net/ Dive Into HTML5 http://diveintohtml5.org/ Smashing Magazine http://www.smashingmagazine.com/ Think Vitamin http://thinkvitamin.com/category/code/html5/
    • 28. Thanks CTC! Billy Hylton email: billy_hylton@unc.edu web: www.publicrealm.com linkedin: www.linkedin.com/in/billyhylton
    • 29. Credits All Images Creative Commons (“Attribution-NonCommercial”) VW Van Whiteboard http://www.flickr.com/photos/vwbuses/2942624949/ http://www.flickr.com/photos/justinavery/5011173415/ sizes/o/in/photostream/ sizes/l/in/photostream/ Tim Berners-Lee Headphones http://www.flickr.com/photos/j-o-n-o/151830908/ http://www.flickr.com/photos/livingtheliminal/ 4242548616/#/ Fist http://www.flickr.com/photos/ Video 24063093@N07/3983882921/sizes/l/in/photostream/ http://www.flickr.com/photos/spierisf/4481100942/ sizes/l/in/photostream/ Gloves http://www.flickr.com/photos/atlnav/369536486/ Crayons http://www.flickr.com/photos/rajarshi/4367150939

    ×