html5
Post on 28-Jan-2015
2.008 Views
Preview:
DESCRIPTION
TRANSCRIPT
Ben MacNeillUser Interface Designer, eXtensionNC State University
May 26, 2010http://www.slideshare.net/chillnc/
HTML5 vs XHTML 2The Future of Web Development
Spoiler: XHTML 2 Loses
http://www.flickr.com/photos/21402026@N05/3714619072/
No really, it’s dead.“Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed.”
- www.w3.org, July 2nd, 2009
95HTML 2.0 (IETF)
96IETF => W3C
99HTML 4.01 (W3C)
HTML 4.01 XHTML 1.0tag-for-tag identical, different syntax
Why XHTML(in 1999)
• Emergence of web standards
• Browsers starting supporting CSS
• More structured markup was welcomed
• Easier to parse
• Extensible (SVG, MathML)
mimetype
http://www.flickr.com/photos/janlewandowski/3210986710/
content="text/html"
content="application/xhtml+xml"
VS
XHTML 1.1 (real XML)
http://www.flickr.com/photos/indi/132659074/
Draconian Error Handling
(all because there's a missing <p> tag)
02XHTML 2.0 (W3C)
http://www.flickr.com/photos/samjudson/47940677/
WHATWG
Web Hypertext Application Technology Working Group
04Web Forms 2.0Web Apps 1.0
Meanwhile, XHTML 2 is doing just fine
http://www.flickr.com/photos/cheltenhamboroughcouncil/1321299695/
06HTML5
(WHATWG => W3C)
XHTML 2 is still doing finehttp://www.flickr.com/photos/lstcaress/1451618395/
09HTML5 features
showing up
Er...
http://www.flickr.com/photos/smailtronic/2817629219/
Nothing to be scared of
“If you are currently creating websites with any version of HTML, you’re already using HTML5”
- Jeremy Keith
So What is HTML5?
• New form elements
• New semantic elements
• Video and canvas elements
• Offline caching
• Local database API
Start Today
<!DOCTYPE html>
Already support many HTML5 features
9
New Semantic Elements<section><header><footer><nav>
<article>
IE: Never Fails to Disappoint
<style type="text/css"> article {display:block; border:1px solid red;}</style>...<article><h1>Welcome to Initech</h1><p>This is your <span>first day</span>.</p></article>
http://diveintohtml5.org/semantics.html#unknown-elements
• no styles, empty node
The Hack<script>document.createElement("article");</script>
http://diveintohtml5.org/semantics.html#unknown-elements
• HTML5 enabling script: http://remysharp.com/2009/01/07/html5-enabling-script/
• Works all the back to IE6
• just create it, don't have to insert into DOM
Awesome New Form Elements<input type="search">
<input type="number">
<input type="range">
<input type="color">
<input type="tel">
<input type="url">
<input type="email">
<input type="date">
<input type="time">
for search boxes
for spinboxes
for sliders
for color pickers
for phone numbers
for web addresses
for email addresses
for calendar date pickers
for timestamps
type="email"
= Contextual Keyboards
Other form goodies
• placeholder text (FF, S, C, Op)
• automatic input validation (O)
• autofocus fields (S,C,O)
<video>
source: http://yfrog.com/83n4fp*not really Apple's response
Offer HTML5 <video>
• CNN
• Reuters
• New York Times
• Vimeo
• Time
• ESPN
• NPR
• The White House
• Sports Illustrated
• Flickr
• CBS
• MSNBC
http://www.apple.com/ipad/ready-for-ipad/
<canvas>http://mrdoob.com/projects/harmony/
Writing to Canvasfunction draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);}
http://diveintohtml5.org/canvas.html#shapes
Offline Web Apps
• Offline caching
• Local database API
<html manifest="/cache.manifest">
localStorage orSQL engine
Further Reading• Dive into HTML5 http://diveintohtml5.org/
(hopefully coming out in June. Looks great!)
• http://www.alistapart.com/articles/a-brief-history-of-markup/
• http://dev.w3.org/html5/markup/spec.html
• http://www.alistapart.com/articles/previewofhtml5
http://www.slideshare.net/chillnc/http://delicious.com/chillnc/html5
Thanks!
top related