HTML5 Workshop

HTML5 Workshop

Thorsten Rinne I 9th October 2011

© 201 Mayﬂower GmbH
1

Team Lead
Scrum Master
Head of Open Source Labs

@ThorstenRinne
HTML5 for PHP Developer I Mayﬂower GmbH I 20th May 201 I 2
1

© Landeshauptstadt Mainz

Who are you? HTML5 for PHP Developer I Mayﬂower GmbH I 20th May 201 I 3
1

Who‘s already using ...

1

HTML5 in one sentence?

1

„HTML5 is about moving
from documents to
applications and from
hacks to solutions.“

Chris Heilmann on Twitter
1

HTML5 for Developers?

1

HTML5 ~= HTML + CSS + JS

1

Agenda today

1

- 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
1

HTML history

1 1

1989:
HTML was born at CERN.

1

1989:
Invented by Tim Berners-Lee
No, not by a Neutrino.
1

HTML was based on SGML
from the 1960ies.

1

1993:
HTML was submitted to the
IETF
1

1993:
IETF required the ﬁrst
implementation: Mosaic
1

1996:
Tim Berners-Lee created the
World Wide Web
Consortium (W3C)
1

1996:
Browser war:
Netscape vs. Microsoft
1

- 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...
1

The dark age of the Web...

1

XHTML 2.0

1

1

But ...
1

1999:
PHP 3.0 - MySQL 3.22
Apache 1.3
1

1999:
Internet Explorer 5.0
XMLHttpRequest Object
1

As time goes by ...

1

since 5.0 (1999)

since 1.0 (2004)

since 1.2 (2004)

since 7.6 (2004)
1

2005:
Ajax: A New Approach to
Web Applications
Blog entry by Jesse James Garret
1

1

Google Suggest

Google Mail

Google Maps
1

2006:
Comet
1

1

Push Ajax

Push

1

Okay, what‘s happening?

1

Content
vs.
Context
1

Facebook is an
application!

1

Page
vs.
Stream
1

Twitter is an
application!

1

Applications?

1

Apps!

1

1

online == ofﬂine
1

Is this the new web?

1

The future is a web app!

1

HTML 5 Basics

1

<!DOCTYPE html>

1

Dropped stuff

1

Dropped HTML4 stuff

KISS
Keep it simple & stupid

1

Dropped HTML4 stuff

Removed redundant or
broken elements

1

Dropped HTML4 stuff

<acronym>
↓
<abbr>

1

Dropped HTML4 stuff

<applet>
↓
<object>

1

Dropped HTML4 stuff

<dir>
↓
<ul>

1

Dropped HTML4 stuff

<frame>
<frameset>
<noframe>

1

Dropped HTML4 stuff

HTML5 should be
similiar to HTML4 and
XHTML 1.0
1

Dropped HTML4 stuff

HTML5 should
explicitly require CSS.

1

Dropped HTML4 stuff

Presentational elements
and attributes removed.

1

Dropped HTML4 stuff

plaintext, isindex
<basefont>, <big>,
<center>, <font>, <s>,
<strike>, <tt>, <u>
align, alink, vlink
1

Improvements

1

Attributes for transition

<img>

border=0 if present

1


<a>, <img>

„name“ dropped, use „id“

1

Problematic Attributes

rev

misunderstood/misused

1


longdesc

often harms accessibility

1


<html>

The version number. :-)

1

Updated elements

<meta <meta http-
charset=“UTF-8“>
equiv=“Content-Type“
content=“text/html;
charset=UTF-8“>

1

Better consistency

<a>
more ﬂexible
<a>, <area>
new media attribute

1

Better consistency

<a href=“http://
m.twitter.com“
rel=“alternate“
media=“handheld“>
Twitter Mobile</a>
1

Better consistency

class, dir, id, lang,
style, tabindex, title
Now for all elements!

1

Real life solutions

<iframe>
for nested HTML

1

Real life solutions

<embed>
for plugins

1

Real life solutions

<base>, <a>, <area>
target attribute

1

Real life solutions

<li> value attribute
<ol> start attribute
<ol> reverse attribute

1

Real life solutions

data attribute

for custom data-* attributes

1

Example Facebook Like

<div class="fb-like"
data-send="true" data-
width="450" data-show-
faces="true"></div>

1

New semantics

1

1

New HTML semantics

<section> scopes
<address> and headings

1

New HTML semantics

<header>
<hgroup>
<nav>
<article>
<footer>
1

New HTML semantics

<time>
<details>
<figure>
<figcaption>
<mark>
1

From XHTML 1.1 & 2.0

<ruby>
<rt>
<rp>
No, <rt> is not for marking up Twitter retweets
for Japanese, Hiragana expansions of Kanji
1

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">

1

SVG / Canvas

1

SVG / Canvas

<svg>
vector graphics
<canvas>
drawing with scripts

1

Canvas

1

Audio

<audio id="audio"
src="sound.mp3"
controls></audio>
document.getElementById
("audio").muted = false;

1

Video

Demo:
http://www.youtube.com/html5

1

WebForms

1

WebForms attributes (I)
<input type="text" placeholder="Mayflower GmbH">

1

WebForms attributes (II)
<input type="text" maxlength="256" name="q" autofocus>

<input type="text" maxlength="256" name="q" required="true">

1

WebForms attributes (III)
<input type="tel" name="phonenumber">

<input type="url" name="url">

<input type="email" name="emailaddress">

1

WebForms attributes (IV)
<input type="number" min="0" max="10" step="2" value="6">

1

WebForms attributes (V)
<input type="range" min="0" max="10" step="2" value="6">

1

HTML5 Speech Input
<input type="text" x-webit-speech>

1

Date Picker
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">

1

Color Picker
<input type="color">

1

Microdata

1

HTML 5 Microdata is
machine-readable data in
HTML. Recursion. :-)

1

Storage

1

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

1

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>

1

JS APIs

1

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.
}

1

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-

1

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 Mayﬂower GmbH I 20th May 201 I 1 1
1 1

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>

1 12

Ofﬂine 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:
*

1 14

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);
});
}

1 16

FileReader API (I)
var reader = new FileReader();

reader.onload = function(e) {
var bin = e.target.result; // bin is a binary string
};

reader.readAsBinaryString(file);

1 17

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);

1 18

CSS3

1 19

New selectors
.row:nth-child(even) { background: #cccccc; }
.row:nth-child(odd) { background: #ffffff; }

row 1
row 2
row 3
row 4

1

Web Fonts
@font-face {
font-family: 'Papyrus';
src: url(Papyrus.otf);
}

header {
font-family: 'Papyrus';
}

Hallo, Welt!
1

More new CSS3 features...

1

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.

1

Opacity
Opacity
Opacity
Opacity
Opacity
1

HSL / HSLA colours

1

Finally rounded corners! :-)

1

Gradients

1

Shadows
1

Transitions and animations

1

Some CSS3 Fun?
http://leaverou.me/css3-secrets/

1

Little helpers

1

1

caniuse.com

1

html5test.com

1

Current Pitfalls

1

HTML5 in Browsern
76 %

69 %
65 % 64 %

47 %

31 %

IE9 Mobile Safari Safari 5.1
Firefox 7
Opera 11.5
Chrome 14

1

HTML5 in the year 2011

1

Cross
content
Document New tags <audio> <video>
editable
Messaging

IE 9

FF 4

Chrome 8+

Safari 5+

Opera 10.7

1

Simple Ofﬂine
Texts in HTML5
<canvas> Drag and Drop Application
<canvas> Cache WebForms
support

IE 9

FF 4

Chrome 8+

Safari 5+

Opera 10.7

1

But...

1

Browser statistics 2011

1

What‘s safe to use today?

1

contenteditable
postMessage
Web Storage (IE 8+)

1

Questions?

1

Thank you very much!

Contact Thorsten Rinne
thorsten.rinne@mayflower.de
+49 89 242054-31
@ThorstenRinne

Mayflower GmbH
Mannhardtstr. 6
80538 München
Germany

© 201 Mayflower GmbH
1

HTML5 Workshop

More Related Content

Viewers also liked (8)

Similar to HTML5 Workshop (20)

More from Mayflower GmbH (20)

Recently uploaded (20)

HTML5 Workshop