html5 workshop

© 2011 Mayflower GmbH

Thorsten Rinne I 9th October 2011

HTML5 Workshop

HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I

Team LeadScrum MasterHead of Open Source Labs

@ThorstenRinne2

HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 3

Who are you?

© Landeshauptstadt Mainz


Who‘s already using ...

4


HTML5 in one sentence?

5


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

6

Chris Heilmann on Twitter


HTML5 for Developers?

7


HTML5 ~= HTML + CSS + JS

8


Agenda today

9


- 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

10


HTML history

11


1989:HTML was born at CERN.

12


1989:Invented by Tim Berners-Lee

No, not by a Neutrino.

13


HTML was based on SGML from the 1960ies.

14


1993:HTML was submitted to the

IETF

15


1993:IETF required the first

implementation: Mosaic

16


1996:Tim Berners-Lee created the

World Wide Web Consortium (W3C)

17


1996:Browser war:

Netscape vs. Microsoft

18


- Browser free for users- Web to replace OS- Java should deliver web apps - 4 versions in 7 years

19

- Bundled „free“ with OS- 1995: 6 persons are working on IE up to 1000 in 1999- 6 versions in 6 years

Netscape lost that war...


The dark age of the Web...

20


XHTML 2.0


But ...23


1999:PHP 3.0 - MySQL 3.22

Apache 1.3

24


1999:Internet Explorer 5.0

XMLHttpRequest Object

25


As time goes by ...

26


since 5.0 (1999)

since 1.0 (2004)

since 1.2 (2004)

since 7.6 (2004)

2005:Ajax: A New Approach to

Web ApplicationsHTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 28

Blog entry by Jesse James Garret


Google Suggest

Google Mail

Google Maps

30


2006:Comet


Push Ajax

Push


Okay, what‘s happening?

34


Contentvs.

Context35


Facebook is an application!

36


Pagevs.

Stream37


Twitter is an application!


Applications?

39


Apps!

40


online == offline43


Is this the new web?

44


The future is a web app!

45


HTML 5 Basics

46


<!DOCTYPE html>

47


Dropped stuff

48


Dropped HTML4 stuff

49

KISSKeep it simple & stupid


Dropped HTML4 stuff

50

Removed redundant or broken elements


Dropped HTML4 stuff

51

<acronym>

↓<abbr>


Dropped HTML4 stuff

52

<applet>

↓<object>


Dropped HTML4 stuff

53

<dir>

↓<ul>


Dropped HTML4 stuff

54

<frame><frameset><noframe>


Dropped HTML4 stuff

55

HTML5 should be similiar to HTML4 and

XHTML 1.0


Dropped HTML4 stuff

56

HTML5 should explicitly require CSS.


Dropped HTML4 stuff

57

Presentational elements and attributes removed.


Dropped HTML4 stuff

58

plaintext, isindex <basefont>, <big>,

<center>, <font>, <s>, <strike>, <tt>, <u>align, alink, vlink


Improvements

59


Attributes for transition

60

<img>

border=0 if present



61

<script>

language have to JavaScript if present



62

<a>, <img>

„name“ dropped, use „id“


Problematic Attributes

63

rev

misunderstood/misused



64

longdesc

often harms accessibility



65

<html>

The version number. :-)


Updated elements

66

<meta http-equiv=“Content-Type“ content=“text/html;

charset=UTF-8“>

<meta charset=“UTF-8“>


Better consistency

67

<a>more flexible

<a>, <area>new media attribute


Better consistency

68

<a href=“http://m.twitter.com“ rel=“alternate“

media=“handheld“>Twitter Mobile</a>

http://m.twitter.com





Better consistency

69

class, dir, id, lang, style, tabindex, title

Now for all elements!


Real life solutions

70

<iframe>for nested HTML


Real life solutions

71

<embed>for plugins


Real life solutions

72

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


Real life solutions

73

<li> value attribute<ol> start attribute

<ol> reverse attribute


Real life solutions

74

data attribute

for custom data-* attributes


Example Facebook Like

75

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


New semantics

76

<section> scopes <address> and headings


New HTML semantics

<header><hgroup><nav>

<article><footer>


New HTML semantics

<time><details><figure>

<figcaption><mark>


New HTML semantics

<ruby><rt><rp>


From XHTML 1.1 & 2.0

No, <rt> is not for marking up Twitter retweetsfor Japanese, Hiragana expansions of Kanji


New <link> relations

82

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

http://www.mayflower.de

http://www.mayflower.de

http://www

http://www

http://www

http://www

http://www

http://www

http://www.gnu.org/licenses/gpl.html

http://www.gnu.org/licenses/gpl.html


SVG / Canvas

84


Canvas

86

<audio id="audio" src="sound.mp3"

controls></audio>document.getElementById("audio").muted = false;


Audio

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


Video

http://www.youtube.com/html5

http://www.youtube.com/html5


WebForms


WebForms attributes (I)

92

<input type="text" placeholder="Mayflower GmbH">


WebForms attributes (II)

93

<input type="text" maxlength="256" name="q" autofocus>

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


WebForms attributes (III)

94

<input type="tel" name="phonenumber">

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

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


WebForms attributes (IV)

95

<input type="number" min="0" max="10" step="2" value="6">


WebForms attributes (V)

96

<input type="range" min="0" max="10" step="2" value="6">


HTML5 Speech Input

97

<input type="text" x-webit-speech>


Date Picker

98

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


Color Picker

99

<input type="color">


Microdata


HTML 5 Microdata is machine-readable data in

HTML. Recursion. :-)

102


Storage


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


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>


JS APIs


WebSockets

108

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


GET /demo HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: example.comOrigin: http://example.comSec-WebSocket-Key1: 4 @1 46546xW%0l 1 5Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 ^n:ds[4U

HTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: UpgradeSec-WebSocket-Origin: http://example.comSec-WebSocket-Location: ws://example.com/demoSec-WebSocket-Protocol: sample 8jKS'y:G*Co,Wxa-

Client

Server

http://example.com

http://example.com


WebWorker

111

var myWorker = new Worker('backgroundTasks.js');

myWorker.onmessage = function(event) { alert(event.data); };

self.onmessage = function(event) { // Do some heavy work self.postMessage('Hello, Amsterdam'); }

backgroundtask.js

main.js


WebMessaging

112

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

http://html5demos.com

http://html5demos.com


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: *




Geolocation

116

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


FileReader API (I)

117

var reader = new FileReader();

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

reader.readAsBinaryString(file);


FileReader API (II)

118

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


CSS3


New selectors

120

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

row 1

row 2

row 3

row 4


Web Fonts

121

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

Hallo, Welt!


More new CSS3 features...

122


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Multi-column layouts


Opacity

124

OpacityOpacityOpacityOpacity


HSL / HSLA colours


Finally rounded corners! :-)


Gradients

127


Shadows128


Shadows129


Transitions and animations

130


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

131

http://leaverou.me/css3-secrets/

http://leaverou.me/css3-secrets/


Little helpers


caniuse.com


html5test.com

136


Current Pitfalls


HTML5 in Browsern

138

31 %

47 %

65 %69 %

64 %

76 %

IE9 Mobile Safari Safari 5.1 Firefox 7 Opera 11.5Chrome 14


HTML5 in the year 2011

139


Cross

Document

Messaging

content

editableNew tags <audio> <video>

IE 9

FF 4

Chrome 8+

Safari 5+

Opera 10.7


Simple

<canvas>

support

Texts in

<canvas>Drag and Drop

Offline Application

Cache

HTML5

WebForms

IE 9

FF 4

Chrome 8+

Safari 5+

Opera 10.7


But...

142


Browser statistics 2011

143


What‘s safe to use today?

144


contenteditablepostMessage

Web Storage (IE 8+)

145


Questions?

146

Thank you very much!

© 2011 Mayflower GmbH

Contact Thorsten [email protected]+49 89 242054-31@ThorstenRinne

Mayflower GmbHMannhardtstr. 680538 MünchenGermany

mailto:[email protected]

mailto:[email protected]

html5 workshop

Technology

php developer

mayower gmbh

js html5

thorstenrinne html5

mosaic html5

context html5

comet html5

html4 stuff html5