Html5

Ben MacNeillUser Interface Designer, eXtensionNC State University

May 26, 2010http://www.slideshare.net/chillnc/

HTML5 vs XHTML 2The Future of Web Development

http://www.slideshare.net/chillnc/evaluate-content-with-google-analytics-oct-2009

http://www.slideshare.net/chillnc/evaluate-content-with-google-analytics-oct-2009

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

http://www.w3.org

http://www.w3.org

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



http://remysharp.com/2009/01/07/html5-enabling-script/

http://remysharp.com/2009/01/07/html5-enabling-script/

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

http://yfrog.com/83n4fp


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/

http://mrdoob.com/projects/harmony/

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!

http://diveintohtml5.org

http://diveintohtml5.org

http://www.alistapart.com/articles/a-brief-history-of-markup/

http://www.alistapart.com/articles/a-brief-history-of-markup/

http://dev.w3.org/html5/markup/spec.html

http://dev.w3.org/html5/markup/spec.html

http://www.alistapart.com/articles/previewofhtml5

http://www.alistapart.com/articles/previewofhtml5

http://www.slideshare.net/chillnc/

http://www.slideshare.net/chillnc/

http://delicious.com/chillnc/html5

http://delicious.com/chillnc/html5

Html5

Technology

html5 http

node http

fine http

real xml http

html5 vs xhtml

html5 whatwg

hack html5

html5 featuresshowing