• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5: Markup Evolved
 

HTML5: Markup Evolved

on

  • 1,614 views

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

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

Statistics

Views

Total Views
1,614
Views on SlideShare
1,614
Embed Views
0

Actions

Likes
0
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

HTML5: Markup Evolved HTML5: Markup Evolved Presentation Transcript

  • HTML5: Markup Evolved y lton y H 010 Bill C 2 CT
  • http://www.youtube.com/watch?v=WvNVpHktrQ0
  • 2022 “Candidate Recommendation” for W3C. Ian Hickson, HTML5 Editor
  • HTML: A Short, Strange Trip
  • 1991 “HTML 1999 HTML 4.0 2000 XHTML Tags” 2004 XHTML2 2009 W3C & vs. HTML5 WHATWG UNITE 2010 HTML5
  • 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
  • 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
  • Structure & New Elements
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>
  • <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
  • Obsolete (not “Deprecated”) Frames (Woot!) , Frameset, Font, Big, Center, Strike, Cellpadding, Cellspacing, Valign
  • Rich Media
  • Canvas: Drawing with Code
  • 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>
  • 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>
  • 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>
  • 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>
  • Forms & App Development
  • Placeholder <input placeholder="search"> Attribute can only contain text (no HTML) Ignored if not supported by browsers Can use a JavaScript fallback solution
  • Autofocus Automatically focus on a form field <input type= "text" autofocus> Ignored if not supported by browsers Can use a JavaScript fallback solution
  • Required* Simple client-side form validation <input type= "text" required> Does not prevent browsers from submitting forms
  • User Interface Replace JavaScript widgets Sliders Date Pickers Color pickers (Boo. Not much browser support today.)
  • JavaScript Goodness Drag and Drop w/o tons of JS Geolocation Offline Apps (Goodbye Google Gears) Local Storage (Goodbye cookies?)
  • This is How I Role. <header role= "banner" > Structural: banner, contentinfo, main, navigation, note, search Widget: alert, checkbox, dialog, radio, scrollbar, slider, tab, textbox,
  • 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.
  • 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/
  • Thanks CTC! Billy Hylton email: billy_hylton@unc.edu web: www.publicrealm.com linkedin: www.linkedin.com/in/billyhylton
  • 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