4. Who‘s already using ...
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 4
1
5. HTML5 in one sentence?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 5
1
6. „HTML5 is about moving
from documents to
applications and from
hacks to solutions.“
Chris Heilmann on Twitter
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 6
1
8. HTML5 ~= HTML + CSS + JS
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 8
1
9. Agenda today
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 9
1
10. - A little bit history of HTML
- HTML5 basics
- Changes / Improvements
- New semantics / tags
- SVG / Canvas /Audio / Video
- Webforms
- Microdata / Storage
- JS APIs (Websockets, Webworker, ...)
- CSS3
- Little helpers
- Current Pitfalls
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 10
1
11. HTML history
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1
1 1
12. 1989:
HTML was born at CERN.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 12
1
13. 1989:
Invented by Tim Berners-Lee
No, not by a Neutrino.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 13
1
14. HTML was based on SGML
from the 1960ies.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 14
1
15. 1993:
HTML was submitted to the
IETF
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 15
1
16. 1993:
IETF required the first
implementation: Mosaic
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 16
1
17. 1996:
Tim Berners-Lee created the
World Wide Web
Consortium (W3C)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 17
1
18. 1996:
Browser war:
Netscape vs. Microsoft
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 18
1
19. - Browser free for users - Bundled „free“ with OS
- Web to replace OS - 1995: 6 persons are
- Java should deliver working on IE up to
web apps 1000 in 1999
- 4 versions in 7 years - 6 versions in 6 years
Netscape lost that war...
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 19
1
20. The dark age of the Web...
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 20
1
58. Dropped HTML4 stuff
plaintext, isindex
<basefont>, <big>,
<center>, <font>, <s>,
<strike>, <tt>, <u>
align, alink, vlink
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 58
1
59. Improvements
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 59
1
60. Attributes for transition
<img>
border=0 if present
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 60
1
61. Attributes for transition
<script>
language have to JavaScript if
present
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 61
1
62. Attributes for transition
<a>, <img>
„name“ dropped, use „id“
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 62
1
63. Problematic Attributes
rev
misunderstood/misused
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 63
1
64. Problematic Attributes
longdesc
often harms accessibility
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 64
1
65. Problematic Attributes
<html>
The version number. :-)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 65
1
66. Updated elements
<meta <meta http-
charset=“UTF-8“>
equiv=“Content-Type“
content=“text/html;
charset=UTF-8“>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 66
1
67. Better consistency
<a>
more flexible
<a>, <area>
new media attribute
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 67
1
68. Better consistency
<a href=“http://
m.twitter.com“
rel=“alternate“
media=“handheld“>
Twitter Mobile</a>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 68
1
69. Better consistency
class, dir, id, lang,
style, tabindex, title
Now for all elements!
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 69
1
70. Real life solutions
<iframe>
for nested HTML
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 70
1
71. Real life solutions
<embed>
for plugins
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 71
1
72. Real life solutions
<base>, <a>, <area>
target attribute
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 72
1
73. Real life solutions
<li> value attribute
<ol> start attribute
<ol> reverse attribute
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 73
1
74. Real life solutions
data attribute
for custom data-* attributes
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 74
1
75. Example Facebook Like
<div class="fb-like"
data-send="true" data-
width="450" data-show-
faces="true"></div>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 75
1
76. New semantics
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 76
1
77. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 77
1
78. New HTML semantics
<section> scopes
<address> and headings
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 78
1
79. New HTML semantics
<header>
<hgroup>
<nav>
<article>
<footer>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 79
1
80. New HTML semantics
<time>
<details>
<figure>
<figcaption>
<mark>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 80
1
81. From XHTML 1.1 & 2.0
<ruby>
<rt>
<rp>
No, <rt> is not for marking up Twitter retweets
for Japanese, Hiragana expansions of Kanji
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 81
1
82. New <link> relations
<link rel="alternate" type="application/atom+xml"
title="My Weblog feed"
href="http://www.phpconference.de/feed/">
<link rel="search" type="application/opensearchdescription+xml"
title="My Weblog search"
href="http://www.phpconference.de/opensearch.xml">
<link rel="icon" href="/favicon.ico">
<link rel="pingback" href="http://www.phpconference.de/xmlrpc.php">
<link rel="prefetch" href="http://www.phpconference.de/main.php">
<link rel="archives" href="http://www.phpconference.de/archive/">
<link rel="external" href="http://www.php.net">
<link rel="license" href="http://www.gnu.org/licenses/gpl.html">
<link rel="nofollow" href="http://www.ruby-lang.org">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 82
1
88. Audio
<audio id="audio"
src="sound.mp3"
controls></audio>
document.getElementById
("audio").muted = false;
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 88
1
90. Video
Demo:
http://www.youtube.com/html5
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 90
1
91. WebForms
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 91
1
92. WebForms attributes (I)
<input type="text" placeholder="Mayflower GmbH">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 92
1
93. WebForms attributes (II)
<input type="text" maxlength="256" name="q" autofocus>
<input type="text" maxlength="256" name="q" required="true">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 93
1
94. WebForms attributes (III)
<input type="tel" name="phonenumber">
<input type="url" name="url">
<input type="email" name="emailaddress">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 94
1
95. WebForms attributes (IV)
<input type="number" min="0" max="10" step="2" value="6">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 95
1
96. WebForms attributes (V)
<input type="range" min="0" max="10" step="2" value="6">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 96
1
97. HTML5 Speech Input
<input type="text" x-webit-speech>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 97
1
98. Date Picker
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 98
1
101. Microdata
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 101
1
102. HTML 5 Microdata is
machine-readable data in
HTML. Recursion. :-)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 102
1
103. Storage
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 103
1
104. Web Storage
‣„short living“ data
‣sessionStorage object
‣will be deleted by closing the browser
‣„long living“ data
‣localStorage object
‣won‘t be deleted after closing the browser
Safari/Chrome Firefox IE Opera
2 MB 5 MB ~ 200MB 5 MB 4 MB
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 104
1
105. Web Storage
<p>This page was requested <b>
<script>
if (!sessionStorage.pageCounter) {
sessionStorage.setItem('pageCounter',0);
}
sessionStorage.setItem('pageCounter',
parseInt(sessionStorage.pageCounter)+1);
document.write(sessionStorage.pageCounter);
</script>
</b> times.</p>
<p>
<input value="sessionStorage leeren" type="button"
onClick="sessionStorage.clear();location.reload(true);">
<input value="Seite laden" type="button"
onClick="location.reload(true);">
</p>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 105
1
107. JS APIs
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 107
1
108. WebSockets
if ("WebSocket" in window) {
var ws = new WebSocket("ws://example.com/service");
ws.onopen = function() {
// WebSocket is connected.
// You can send data by send() method.
ws.send("message to send");
// ....
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
};
ws.onclose = function() {
// WebSocket is closed
};
} else {
// the browser doesn't support WebSockets.
}
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 108
1
109. Client
GET /demo HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
^n:ds[4U
Server
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/demo
Sec-WebSocket-Protocol: sample
8jKS'y:G*Co,Wxa-
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 109
1
111. WebWorker
main.js
var myWorker = new Worker('backgroundTasks.js');
myWorker.onmessage = function(event) {
alert(event.data);
};
backgroundtask.js
self.onmessage = function(event) {
// Do some heavy work
self.postMessage('Hello, Amsterdam');
}
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1
1 1
112. WebMessaging
<form>
<input type="text" name="msg" value="My message" id="msg">
<input type="submit">
<h2>Ziel iFrame:</h2>
<iframe id="iframe" src="postmessage.html"></iframe>
</form>
<script>
var win = document.getElementById("iframe").contentWindow;
addEvent(
document.getElementsByTagName('form')[0], 'submit',
function (e) {
if (e.preventDefault)
e.preventDefault();
win.postMessage(document.getElementById("msg").value,
"http://www.phpconference.nl");
e.returnValue = false;
return false;
});
</script>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1
1 12
114. Offline application cache
CACHE MANIFEST
# This is a comment
CACHE:
/css/screen.css
/css/offline.css
/js/screen.js
/img/logo.png
http://example.com/css/styles.css
FALLBACK:
/ /offline.html
NETWORK:
*
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1
1 14
116. Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var options = {
position: new google.maps.LatLng(lat, lng) }
var marker = new google.maps.Marker(options);
marker.setMap(map);
});
}
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1
1 16
117. FileReader API (I)
var reader = new FileReader();
reader.onload = function(e) {
var bin = e.target.result; // bin is a binary string
};
reader.readAsBinaryString(file);
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1
1 17
118. FileReader API (II)
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php");
xhr.overrideMimeType("text/plain;
charset=x-user-defined-binary");
xhr.sendAsBinary();
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
// do something
}
}, false);
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1
1 18
119. CSS3
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1
1 19
120. New selectors
.row:nth-child(even) { background: #cccccc; }
.row:nth-child(odd) { background: #ffffff; }
row 1
row 2
row 3
row 4
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 120
1
121. Web Fonts
@font-face {
font-family: 'Papyrus';
src: url(Papyrus.otf);
}
header {
font-family: 'Papyrus';
}
Hallo, Welt!
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 121
1
122. More new CSS3 features...
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 122
1
123. Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur amet, consectetur
adipisicing elit, sed adipisicing elit, sed adipisicing elit, sed adipisicing elit, sed
do eiusmod tempor do eiusmod tempor do eiusmod tempor do eiusmod tempor
incididunt ut labore et incididunt ut labore et incididunt ut labore et incididunt ut labore et
dolore magna aliqua. dolore magna aliqua. dolore magna aliqua. dolore magna aliqua.
Ut enim ad minim Ut enim ad minim Ut enim ad minim Ut enim ad minim
veniam, quis nostrud veniam, quis nostrud veniam, quis nostrud veniam, quis nostrud
Multi-column layouts
exercitation ullamco exercitation ullamco exercitation ullamco exercitation ullamco
laboris nisi ut aliquip laboris nisi ut aliquip laboris nisi ut aliquip laboris nisi ut aliquip
ex ea commodo ex ea commodo ex ea commodo ex ea commodo
consequat. Duis aute consequat. Duis aute consequat. Duis aute consequat. Duis aute
irure dolor in irure dolor in irure dolor in irure dolor in
reprehenderit in reprehenderit in reprehenderit in reprehenderit in
voluptate velit esse voluptate velit esse voluptate velit esse voluptate velit esse
cillum dolore eu cillum dolore eu cillum dolore eu cillum dolore eu
fugiat nulla pariatur. fugiat nulla pariatur. fugiat nulla pariatur. fugiat nulla pariatur.
Excepteur sint Excepteur sint Excepteur sint Excepteur sint
occaecat cupidatat occaecat cupidatat occaecat cupidatat occaecat cupidatat
non proident, sunt in non proident, sunt in non proident, sunt in non proident, sunt in
culpa qui officia culpa qui officia culpa qui officia culpa qui officia
deserunt mollit anim deserunt mollit anim deserunt mollit anim deserunt mollit anim
id est laborum. id est laborum. id est laborum. id est laborum.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 123
1
132. Little helpers
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 132
1
133. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 133
1
134. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 134
1
135. caniuse.com
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 135
1
136. html5test.com
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 136
1
137. Current Pitfalls
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 137
1
138. HTML5 in Browsern
76 %
69 %
65 % 64 %
47 %
31 %
IE9 Mobile Safari Safari 5.1
Firefox 7
Opera 11.5
Chrome 14
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 138
1
139. HTML5 in the year 2011
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 139
1
140. Cross
content
Document New tags <audio> <video>
editable
Messaging
IE 9
FF 4
Chrome 8+
Safari 5+
Opera 10.7
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 140
1
141. Simple Offline
Texts in HTML5
<canvas> Drag and Drop Application
<canvas> Cache WebForms
support
IE 9
FF 4
Chrome 8+
Safari 5+
Opera 10.7
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 141
1
142. But...
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 142
1