The Devil and HTML5

The Devil and HTML5
Myles Braithwaite
http://myles.tk | me@myles.tk | @mylesb

What is HTML?

• HTML is a Markup Language.

• HTML is mainly used to write web
pages.

• HTML is not a programming language.

2

Why should you
care?

3

“Because browsers are now application platforms, ‘the big runtime
machine’ if you will. I for one have given up several desktop apps
for their online version, simply because they're much better in
most cases.”

Fabio FZero on the GTALUG Mailing List

4

So Cow{boy,girl} Up.

5

What is new in
HTML5?

6

• The HTML layout engines use the
DOCTYPE to ﬁgure out which layout
mode to use.

8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

9

But in HTML5

• The DOCTYPE is only required for
legacy reasons.

10

Semantic Elements

12

<div id="container">
<div id="header">
<ul id="navigation"></ul>
</div>
<div id="body">
<div id="page"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>

13

<div id="container">
<header></header>
<nav></nav>
<article>
<section></section>
</article>
<aside></aside>
<footer></footer>
</div>

14

header, nav, article, section, aside footer { display: block; }

15

How do you represent
the date?

• Tuesday, 13th July, 2010

• July 13th, 2010

• 2010, July 13th

16

How do you represent
time?

• 9:58 AM

• 09:58

17

<time datetime="2010-07-13">13th July, 2010</time>
<time datetime="2010-07-13">Today</time>
<time datetime="2010-07-13T19:30:00-05:00">7:30 pm</time>

18

<article>
<time datetime="2010-07-13T19:30:00-05:00" pubdate>
7:30 pm
</time>
</article>

19

<p>
<a href="/page/2/" class="previous" rel="prev">Previous</a>
<a href="/page/1/" rel="start">1</a>
<a href="/page/2/" rel="prev">2</a>
<span>3</span>
<a href="/page/3/" rel="next">3</a>
<a href="/page/4/" rel="end">4</a>
<a href="/page/3/" class="next" rel="next">Next</a>
</p>

21

<article>
<h2>GTALUG Talk about HTML5 Tomorrow at 7:30pm</h2>
<section>
<p>I am going to be talking about HTML5 at the next
GTALUG meeting.</p>
</section>
<p class="meta">
By <a href="http://myles.tk/" rel="author">Myles</a>;
published <time datetime="2010-07-12" pubdate>
yesterday</time>;
tagged with <span rel="tag">GTALUG</span> &
<span rel="tag">HTML5</span>.
</p>
</article>

22

Placeholder Text

• A short hint to (word or parse) to aid
the user in their data entry.

• Shouldn’t be used as an alternative to
<label>.

24

<form action="." method="post" accept-charset="utf-8">
<p><label>Email <input type="text" name="email"
id="id_email" placeholder="you@example.com">
</label></p>
<p><input type="submit"></p>
</form>

25

37signals Launchpad
27

Compatibility

IE Firefox Chrome iPhone Android

☐ ☑ ☑ ☑ ?

28

checkbox <input type="checkbox">

radio button <input type="radio">

password ﬁeld <input type="password">

drop-down list <select><option>

ﬁle picker <input type="file">

submit button <input type="submit">

plain text <input type="text">

30

What has been added?
Email <input type="email">

Web Address <input type="url">

Number <input type="number">

Range <input type="range">

Date Pickers <input type="date">

Search <input type="search">

Colour <input type="color">

31

• Web browser will provided the
validation.

32

• If you try to submit an email ﬁeld with
“youexample.com” instead of
“you@exmaple.com” the browser will
stop you.

33

Virtual Keyboards

34

• The ability to ﬁnd where the user is
located.

• Uses an attached GPS device.

• Or the users external IP address.

36

navigator.geolocation.getCurrentPosition(function(position){
var lat = position.coords.latitude;
var log = position.coords.longitude;
alert("You are at coronets " + lat + ', ' + log);
});

37

Cookies on Steroids

39

With non of the
bandwidth drawbacks

40

• Allows the web application to use a
key/value database on the client
computer.

• This data is never transmitted to the
web server (unlike cookies).

41

• Internet Explore=>8.0

• Mozilla Firefox=>3.5

• Chrome=>4.0

• Opera=>10.5

• iOS=>2.0

• Android=>2.0

42

var first_name = localStorage.getItem("first_name");

localStorage.setItem("first_name", first_name);

43

Web SQL Database

• Allows you to use a SQLite database
for local storage.

44

Ofﬂine
Web Applications

45

• Allows you to create a manifest ﬁle that
list all your static content.

• So it can be cached/downloaded to the
clients computer.

46

CACHE MANIFEST
/media/admin/css/base.css
/media/admin/css/changelists.css
/media/admin/css/dashboard.css
/media/admin/css/forms.css
/media/admin/css/global.css
/media/admin/css/layout.css
/media/admin/css/login.css
/media/admin/css/null.css
/media/admin/css/patch-iewin.css

47

More information
• WHATWG Spec <http://j.mp/dqpmc3>

• Mozilla’s Docs <http://j.mp/9lrDZ8>

• Apple’s Docs <http://j.mp/9D2P2C>

• Google’s Using AppCache to Launch
Ofﬂine <http://j.mp/97vz71>, <http://
j.mp/d4VWDN>, and <http://j.mp/
aOnzW7>

48

• Allows you to server the best video
format (MP4, Ogg Vorbis, WebM,
H.264) for the user.

50

Will this kill Flash?

51

For anything else?
No.

53

<video id="movie" width="320" height="240" preload controls>
<source src="movie.mp4" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
<source src="movie.webm" type='video/webm; codecs="vp8,
vorbis"'>
<source src="movie.ogv" type='video/ogg; codecs="theora,
vorbis"'>
<object width="320" height="240" type="application/x-
shockwave-flash" data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf">
<param name="allowfullscreen" value="true">
<param name="flashvars" value='config={"clip": {"url":
"http://example.org/movie.mp4", "autoPlay":false,
"autoBuffering":true}}'>
</object>
</video>

54

I don’t know anything
about Canvas.

55

Who’s Pushing
HTML5

57

• HTML5Rocks <html5rocks.com>

• YouTube HTML5 <youtube.com/html5>

• Gmail supports HTML5 Drag and Drop
<myl.be/6g7l>

62

youtube.com/chromefastball
64

The Devil and HTML5

More Related Content

What's hot

Viewers also liked

Similar to The Devil and HTML5

Recently uploaded

The Devil and HTML5