HTML5 Future of the Web

HTML5 is the future
-Steve Jobs

• History

• What is HTML5?

• Facts & Myths

• Markup changes

• Forms

• Audio & Video

• Storage/ Ofﬂine

• Geolocation*

• Canvas *not HTML5
(I’ll get onto that)

• Markup - code used to give elements structure and
semantic value

• Semantics - Give meaning to a document or
elements.

• Specs - W3C speciﬁcation

W3WHO?

• The World Wide Web Consortium

W3WHO?


• International standards organisation for the World Wide Web

W3WHO?



• HTML, XML, CSS, XQUERY

W3WHO?



• HTML, XML, CSS, XQUERY

• They don’t dictate what the browsers build

HISTORY
• 1998 - WC3 stopped work on HTML spec. XHTML was
the future.

HISTORY
the future.

• XHTML 2.0 required a new MIME Type, XML syntax and
XML parsing errors (Far from user friendly)

HISTORY
the future.


• 2004
- Not everybody thought this was the way to go,
WHATWG formed (Opera, Apple, Google & Mozilla)

HISTORY
the future.


• 2004

• Web Forms 2.0 & Web Applications 1.0 Spec

HISTORY
the future.


• 2004

• Web Forms 2.0 & Web Applications 1.0 Spec

• 2006 - W3C used WHATWG specs as a basis for HTML5

HTML5 MYTHS

•I Can’t Use HTML5 Until 2022.

HTML5 MYTHS


• This browser supports HTML5, but that one doesn't.

HTML5 MYTHS


• This browser supports HTML5, but that one doesn't.

• HTML5 will kill Flash.

HTML5 IS NOT
HTML5 is often used to refer to a set of other new web
technologies, including..

HTML5 IS NOT

• CSS3 (animations, gradients and rounded corners)

Go

HTML5 IS NOT


• Web fonts

Go

Comic sans was
just the start

HTML5 IS NOT


• Web fonts

• Geolocation
Go

Comic sans was
just the start

HTML5 IS NOT


• Web fonts

• Geolocation
Go
• SVG

Comic sans was
just the start

HTML5 IS NOT


• Web fonts

• Geolocation
Go
• SVG

• Desktop notiﬁcations Comic sans was
just the start

HTML5 IS

• New semantic elements • Canvas

• Browser form validation • Editable content

• Ofﬂine • Drag & Drop

• History API • Undo API

• Audio/Video • X-Domain messaging

WHAT CAN HTML5 DO?

• Provide a better user experience on the desktop and mobile

• Help improve accessibility

• Help improve SEO

• Reduce the gap between web applications and native

• It won’t do it for you

PAVING THE COW PATHS
• Let the masses tell you where to build


• It’s a lot more forgiving than XHTML


• It’s a lot more forgiving than XHTML

<img src="nice.jpg" />
<img src="nice.jpg">

<img src="nice.jpg">
<img src=nice.jpg>

<IMG SRC=nice.jpg>
<iMg SrC=nice.jpg>

NEW DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML 4</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

NEW DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Hello World</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>Hello World</p>
</body>
</html>

NEW ELEMENTS
<body>
<div id="header">
<h1>My page heading</h1>
<ul id="nav">
<a href="#">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</ul>
</div>

<div id="content">
<div class="post">
<h2>Post title</h2>
<p>Post content, etc</p>
</div>
</div>

<div id="footer">
<p>Copyright, nobody reads this</p>
</div>

</body>

NEW ELEMENTS
<body> <body>
<div id="header"> <header>
<h1>My page heading</h1> <h1>My page heading</h1>
<ul id="nav"> <nav>
<a href="#">Home</a> <ul>
<a href="about.html">About</a> <a href="#">Home</a>
<a href="contact.html">Contact</a> <a href="about.html">About</a>
</ul> <a href="contact.html">Contact</a>
</div> </ul>
</nav>
<div id="content"> </header>
<div class="post">
<h2>Post title</h2> <div id="content">
<p>Post content, etc</p> <article>
</div> <h2>Post title</h2>
</div> <p>Post content, etc</p>
</article>
<div id="footer"> </div>
</div> <footer>
</body> </footer>

</body>

NEW ELEMENTS

document.createElement('header');

NEW ELEMENTS

document.createElement('header');



There is a non JS fix,
but it’s a lot more
complicated

BROWSER SUPPORT
• Feature detection not browser snifﬁng.

BROWSER SUPPORT

• IE9 will actually support a lot of this.

BROWSER SUPPORT


• WebKit - Open Source browser engine

BROWSER SUPPORT


• WebKit - Open Source browser engine

• Mobile is mostly WebKit based, great support for HTML5

WebKit WebKit WebKit WebKit WebKit

ev k e 65
Mo en 42=' rop1 1='p Var _a
d9 "><a
mg
cl 46
85
de ts 10 8= ub s= 01 as _T
ra =' 00 'T s' 'p 07 ta s= 2"
ti ev 2' ;s ro 54 rg
on en 0661 ;s .e p1 85 et "m
in >
</ t2 32 .p Va 5, _1 =" im
'; p _b
ad
dr
a>
</ we 4400 rop1 r3=' rop 96
54 la ap
ic
es h2 bl 00 9= re 16 68 nk on

MICRODATA
> in 'R ad ,p 5_ "
s"
>< kC 10'; G in ro T2 hr _1
"
st li
ck s. 18'; g'; p17 "
cl
ef
='
Br ro <
ng p cl Tr link s.p s.e ,pr as h
id >R ac Tr ro Va op s= ttp:
Di g
ni e. R ea ass= ki
ng ackE p21= r12= 8,p
1 "w
eb //ww
ng di "a (t ro
. ef
ur <p
ng
</ ddre hi vent '1.1 'kwd p1 si
te w.sp
Re s, s ' '; 9, "
al bish cl st
ro ss"> 'o ='ev ;s.p s.p pro ti i
Al e as ng ') p tl
</ es d Wi s=" >, <spa ;" ent2 rop4 rop1 21,
di , Fi th fr n ' 1= 5 p
v> ne An ee Be
rk cl na
me ; '1 ='90 rop4
T a 00
<d Wi As ext sh
ir ss="
="
om 10 1075 1,p
ne i e ni 01
iv s. an F clea RG addr tu 29 485'
cl rf 1 re 66
<u as
s=
Fu
nc
ee
l. ix 8B ess" ID 34
56
l "a ti Tr "> B< >2 2_
On /s ad
cl
as dver
on
s. adit Th pa 13, 90
</ <l s= t- </ io e n> Ca 10
id </ 75
=" ul
>
i>
Te
"t
el cta"
p> na
lP
<s
tr sp vers 48
ri om l: -s ub on an ha
gh
tw
ni
tu <u <s in > Fa g>Re
><
/p m Ro
on ar re l tr gl yr > ad
,e
cl
ic ds ID cl
as on e"> e. ad
i ,
ve k= " 2_ s= g> Lu ng</ <s
'0 nt "s ad <l "o 01 nc pa
0 s' .l 90 i> th 18 h st n
;s 842' ;s. ink 10 <a e 9 &a rong
75 75
s.
.p
ro ;s eV
ar
Tr
ac 48 targ r-ct 0
76
mp
; >
ev p4 .p
ro 1= kV 5_
19 et=" a"
> 7< Ev Side
na e 2 ' a 65 /s en
me nts= ='10 p18= pub rs=' 46 _bla tr
on
in
g
Of
sp =" 'T s' 85 Me C
an om 'eve 0006 2' ;s prop _T nk" g>
</ al
> n ; . 2"
we itur nt2' 6132 s.p eVar 15,p ti
hr
ef li
>
s
bs r
it eID2 ;web 4400 op1 3='r rop1 tl =
e= 'htt
e< 9
/a _ad9 link 0010 ='R eadi 6,pr "V
is p://
>< Cl '; G1 op
/l 0107 ic s. 8' ng'; 17 it w
</ </ i> 54 kT li ;s s. ,p Th ww.s
di u r n . r e
v> l> 85
_1 acki kTra prop Var op18
e Mo piri
de
<d
96
54 ng ck
Ev
21
='
12
=' ,p ra t-ho
iv 68 NonC en 1. kw rop1 ti
on use.
id 5_ N( ts 1' d' 9, 's
T2 ; c
oo
d- <u ="
no "> this ='ev ;s.p s.p prop we o.uk
Vi r bs
=" Read l
cl tNat si ,'o' ent2 rop4 op1 21,p it /mod
s. t 1= 5 e"
;s li ing- a
<l ss=" ad90 <s );" '; '1 ='90 rop4 e
cl rati
.e nkTr RG1 i c pa 00
Va 8B la
ta
bb
10
75 n
cl 10 1075 1,pr as
s= on/'
.p ac 01 48 op "a
ro r1=' kVa B-9 ss= ed"> 485_ as
s= 29
66 5';s 42,e rr
' p1 p r 01 "s 1 " o

MICRODATA

• Embed semantic markup into HTML documents

MICRODATA


• Not a new technique

MICRODATA



• Reviews

MICRODATA



• Reviews

• People

MICRODATA



• Reviews

• People

• Events

MICRODATA
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Pizza Suprema</span>
Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
<time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
<span itemprop="summary">Delicious, tasty pizza in New York!</span>
<span itemprop="description">An ideal neighborhood pizza joint...</span>
Rating: <span itemprop="rating">4.5</span>
</div>

MICRODATA
</div>

• Easier for machines to understand

MICRODATA
</div>


• Could use the hooks to style

MICRODATA
</div>


• Could use the hooks to style

• Search engines are using it, today

DATA ATTRIBUTES
• Previously had to litter markup with hidden meta data

• Can now legally add custom data attributes

DATA ATTRIBUTES

<div class="listing" id="ad1648679410_nat901079">
<h1>Company Name</h1>
<img src="staticmap/map.jpg" class="map"/>
<div class="hidden lat">51.46227</div>
<div class="hidden lon">-1.00816</div>
</div>

DATA ATTRIBUTES

</div>

<div class="listing" data-shortlistid="ad1648679410" data-natid="901079">
<img src="staticmap/map.jpg" class="map" data-lat="51.46227" data-lon="-1.00816"/>
</div>

DATA ATTRIBUTES

</div>

<div class="listing" data-shortlistid="ad1648679410" data-natid="901079">
<img src="staticmap/map.jpg" class="map" data-lat="51.46227" data-lon="-1.00816"/>
</div>

var shortlistID = $('.parentListing').data('shortlistid');

HTML5 FORMS

• Browser handles errors

HTML5 FORMS


• New input types, email, number, url, range..

HTML5 FORMS



• Browser handles date pickers

HTML5 FORMS



• Browser handles date pickers

• No need to use Javascript to validate (one day)

WHY BOTHER?

• Email

• Number

WHY BOTHER?

• Email

• Number

• Text

WHY BOTHER?

• Email

• Number

• Text

• URL

PATTERNS
• Can validate against a pattern (“regex”)

<label>Credit Card Number:</label>
<input pattern="[0-9]{13,16}" name="cc">

POLYFILLING

• Fill the cracks

POLYFILLING

• Fill the cracks

• Provide fallback functionality

POLYFILLING

• Fill the cracks


• Ideally mimics the future API

POLYFILLING

• Fill the cracks


• Ideally mimics the future API

• Doing things twice?

PATTERNS

PATTERNS

$('input[pattern]').change(function(){
$(this).validatePattern();
});

jQuery.fn.validatePattern = function() {

var pattern = $(this).attr('pattern');

if ($(this).val().match(pattern)){
// valid
}
else{
// invalid, display error
}

};

VIDEO/AUDIO

• Used on Yell.com videos

VIDEO/AUDIO


• The end of Flash?

VIDEO/AUDIO



• More accessible

VIDEO/AUDIO



• More accessible

• More control over styles

VIDEO/AUDIO



• More accessible

• More control over styles

• Better API

FORMATS
• Apple backing MP4 (H.264)

FORMATS

• Safari desktop & mobile support MP4 only

FORMATS


• Google went and bought a codec, then open sourced it

FORMATS



• Google Chrome will only support WebM

FORMATS




• Microsoft IE9 - WebM and MP4

FORMATS





• Mozilla Firefox - WebM & OGG

FORMATS





• Mozilla Firefox - WebM & OGG

• Opera - WebM & OGG

IN THE WILD
<video id="movie" class="video-lrgPlayerCont" width="450" height="252" preload="" controls="">
<source src="http://videohosting.net/asset/87EC67A71ADBBB97/mp4" type="video/mp4">
<source src="http://videohosting.net/asset/87EC67A71ADBBB97/ogv" type="video/ogg">

<embed src="http://videohosting.net/mediaplayer.swf" width="450" height="252">

</video>

• MP4

• OGG

• Polyﬁll with a Flash fallback

LOCAL STORAGE

even ie8!

LOCAL STORAGE

• Local Storage

LOCAL STORAGE

• Local Storage

• Session Storage

LOCAL STORAGE

• Local Storage

• Session Storage

• Web SQL databases

LOCAL STORAGE

• Cookies can only store 4Kb, add to page load

LOCAL STORAGE


• Local Storage 5Mb per domain

LOCAL STORAGE



• Can be used to cache request data

LOCAL STORAGE




• Use JSON.stringyfy & JSON.parse to read/write

LOCAL STORAGE




• Use JSON.stringyfy & JSON.parse to read/write

• Polyﬁll with cookies/window.name hack

OFFLINE

• Allows web apps to work ofﬂine

OFFLINE


• Great for mobile devices

OFFLINE


• Great for mobile devices

• Canbe used to heavily cache page
resources for performance reasons

OFFLINE

• Manifest ﬁle

• List of resources web application might need whilst ofﬂine

OFFLINE

• Manifest ﬁle


CACHE MANIFEST
mypage.html
js/myscript.js

OFFLINE

• Manifest ﬁle


CACHE MANIFEST
mypage.html
js/myscript.js

<html manifest="offlineFiles.manifest">

GEOLOCATION

• Has it’s own speciﬁcation, not part of HTML5

GEOLOCATION


• Uses GPS or IP address

GEOLOCATION



• Latitude & Longitude

GEOLOCATION



• Latitude & Longitude

• Accuracy

GEOLOCATION
// if the browser supports the w3c geo api
if(navigator.geolocation){
// get the current position
navigator.geolocation.getCurrentPosition(
function(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
});
}

goo.gl/6BPM1

CANVAS

• Etch a sketch in the browser

• Manipulate video and images

• Graphing tools

• Interactive backgrounds

CANVAS

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 50, 30, 0, Math.PI*2, true); //circle
ctx.fill(); // solid fill

CANVAS + VIDEO

http://www.craftymind.com/factory/
html5video/CanvasVideo.html

SITES
• HTML5 Doctor - html5doctor.com

SITES

• Dive Into HTML5 - diveintohtml5.org

SITES


• When Can I Use? - caniuse.com

SITES


• When Can I Use? - caniuse.com

• Tech blogs & Newspapers

BOOKS

• HTML5 for Web Designers

BOOKS


• Introducing HTML5

BOOKS


• Introducing HTML5

• HTML5 Up & Running

HTML5 Future of the Web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a HTML5 Future of the Web

Similar a HTML5 Future of the Web (20)

HTML5 Future of the Web