HTML5: Markup Evolved
•Télécharger en tant que KEY, PDF•
0 j'aime•485 vues
HTML5 presentation for Carolina Technology Consultants (CTC) fall retreat. October 21, 2010.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à HTML5: Markup Evolved
Similaire à HTML5: Markup Evolved (20)
Dernier
Dernier (20)
HTML5: Markup Evolved
- 1. HTML5: Markup Evolved y lton y H 010 Bill C 2 CT
- 2. 2022 “Candidate Recommendation” for W3C. Ian Hickson, HTML5 Editor
- 3. HTML: A Short, Strange Trip
- 4. 1991 “HTML 1999 HTML 4.0 2000 XHTML Tags” 2004 XHTML2 2009 W3C & vs. HTML5 WHATWG UNITE 2010 HTML5
- 5. 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
- 6. 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
- 7. Structure & New Elements
- 8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>
- 10. <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
- 11. Obsolete (not “Deprecated”) Frames (Woot!) , Frameset, Font, Big, Center, Strike, Cellpadding, Cellspacing, Valign
- 12. Rich Media
- 13. Canvas: Drawing with Code
- 14. 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>
- 15. 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>
- 16. 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>
- 17. 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>
- 18. Forms & App Development
- 19. Placeholder <input placeholder="search"> Attribute can only contain text (no HTML) Ignored if not supported by browsers Can use a JavaScript fallback solution
- 20. Autofocus Automatically focus on a form field <input type= "text" autofocus> Ignored if not supported by browsers Can use a JavaScript fallback solution
- 21. Required* Simple client-side form validation <input type= "text" required> Does not prevent browsers from submitting forms
- 22. User Interface Replace JavaScript widgets Sliders Date Pickers Color pickers (Boo. Not much browser support today.)
- 23. JavaScript Goodness Drag and Drop w/o tons of JS Geolocation Offline Apps (Goodbye Google Gears) Local Storage (Goodbye cookies?)
- 24. This is How I Role. <header role= "banner" > Structural: banner, contentinfo, main, navigation, note, search Widget: alert, checkbox, dialog, radio, scrollbar, slider, tab, textbox,
- 25. 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.
- 26. 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/
- 27. Thanks CTC! Billy Hylton email: billy_hylton@unc.edu web: www.publicrealm.com linkedin: www.linkedin.com/in/billyhylton
- 28. 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