Embed Size (px)
Citation preview
HTML5
WTF?
html timeline
1980 1989 1996 1997 19992000 2008
ENQUIRE
HTML
HTML2.0
HTML3.2HTML4
HTML4.01
ISO/IEC 15445:2000
HTML5working draft
xhtml timeline
2000 2008
XHTML1.0
XHTML5alongside HTML5
XHTML1.1
XHTML2
HTML4.01
FINISHEDin
2O22WTF?
compatibility
Opera, Chrome, Safari & Firefox
♥<TODAY>
HTML5
internet explorer
DEADEND <javascript> to the rescue!
IE does not ♥ HTML5
nor do i
says Firefox2
html5 minified
no body?
<!DOCTYPE html><title>HTML 5</title><p>Hello world</p>
i ♥ validator
no head?
looksthe
old
<div id=”header”>
<div id=”footer”>
<div id=”sidebar”>
<div id=”nav”>
<div class=”section”>
<div class=”article”>
new
<header>
<footer>
<aside>
<nav>
<section>
<article>
<tagsoup>
side by side
</close> elements
XH
TM
LH
TM
L5
always use “quotes”
lowercase <tags>
no empty attributes YOUCHOOSE
bye bye
<acronym><basefont>
<big>
<center> <font>
<s><strike>
<tt>
<u>
cellpadding
cellspacing
width
height
valign
sizeclear
attributes
element
hello
<nav>web forms
2.0<header>
<footer>
<aside><article>
<section><time>
type
requiredvalidation
emailurldatetimecolor picker
min / max
oninvalid
<mark><meter>
<video>
<canvas>
autocomplete
contenteditable
<video & audio>
<video>
<video src=”x.mp4” controls autobuffer>for those who can’t see this movie
</video> lookno flash
styleable
<examples>
youtube.com/html5
9elements.com/io/projects/html5/canvas
audio &canvas
video
drag & drop
web workers
threaded <javascript>non blocking UI
geolocation
ask the user’s locationsee Google Maps
like theiPhone
web apps
<vs>
desktop apps
offline storage
Gmail
closingthe gap
</thanks>
simon schoeters • @cimm • www.suffix.betheme based on m. jackson wilikinson’s presentation at http://i5.be/W5
