html5 workshop
TRANSCRIPT
![Page 1: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/1.jpg)
© 2011 Mayflower GmbH
Thorsten Rinne I 9th October 2011
HTML5 Workshop
![Page 2: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/2.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Team LeadScrum MasterHead of Open Source Labs
@ThorstenRinne2
![Page 3: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/3.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 3
Who are you?
© Landeshauptstadt Mainz
![Page 4: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/4.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Who‘s already using ...
4
![Page 5: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/5.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 in one sentence?
5
![Page 6: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/6.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
„HTML5 is about moving from documents to applications and from hacks to solutions.“
6
Chris Heilmann on Twitter
![Page 7: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/7.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 for Developers?
7
![Page 8: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/8.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 ~= HTML + CSS + JS
8
![Page 9: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/9.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Agenda today
9
![Page 10: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/10.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
- 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
![Page 11: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/11.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML history
11
![Page 12: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/12.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1989:HTML was born at CERN.
12
![Page 13: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/13.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1989:Invented by Tim Berners-Lee
No, not by a Neutrino.
13
![Page 14: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/14.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML was based on SGML from the 1960ies.
14
![Page 15: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/15.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1993:HTML was submitted to the
IETF
15
![Page 16: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/16.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1993:IETF required the first
implementation: Mosaic
16
![Page 17: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/17.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1996:Tim Berners-Lee created the
World Wide Web Consortium (W3C)
17
![Page 18: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/18.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1996:Browser war:
Netscape vs. Microsoft
18
![Page 19: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/19.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
- 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...
![Page 20: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/20.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
The dark age of the Web...
20
![Page 21: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/21.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 21
XHTML 2.0
![Page 22: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/22.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 22
![Page 23: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/23.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
But ...23
![Page 24: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/24.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1999:PHP 3.0 - MySQL 3.22
Apache 1.3
24
![Page 25: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/25.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1999:Internet Explorer 5.0
XMLHttpRequest Object
25
![Page 26: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/26.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
As time goes by ...
26
![Page 27: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/27.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 27
since 5.0 (1999)
since 1.0 (2004)
since 1.2 (2004)
since 7.6 (2004)
![Page 28: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/28.jpg)
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
![Page 29: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/29.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 29
![Page 30: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/30.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Google Suggest
Google Mail
Google Maps
30
![Page 31: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/31.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 31
2006:Comet
![Page 32: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/32.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 32
![Page 33: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/33.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 33
Push Ajax
Push
![Page 34: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/34.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Okay, what‘s happening?
34
![Page 35: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/35.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Contentvs.
Context35
![Page 36: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/36.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Facebook is an application!
36
![Page 37: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/37.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Pagevs.
Stream37
![Page 38: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/38.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 38
Twitter is an application!
![Page 39: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/39.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Applications?
39
![Page 40: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/40.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Apps!
40
![Page 41: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/41.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 41
![Page 42: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/42.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 42
![Page 43: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/43.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
online == offline43
![Page 44: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/44.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Is this the new web?
44
![Page 45: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/45.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
The future is a web app!
45
![Page 46: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/46.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML 5 Basics
46
![Page 47: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/47.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
<!DOCTYPE html>
47
![Page 48: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/48.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped stuff
48
![Page 49: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/49.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
49
KISSKeep it simple & stupid
![Page 50: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/50.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
50
Removed redundant or broken elements
![Page 51: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/51.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
51
<acronym>
↓<abbr>
![Page 52: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/52.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
52
<applet>
↓<object>
![Page 53: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/53.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
53
<dir>
↓<ul>
![Page 54: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/54.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
54
<frame><frameset><noframe>
![Page 55: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/55.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
55
HTML5 should be similiar to HTML4 and
XHTML 1.0
![Page 56: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/56.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
56
HTML5 should explicitly require CSS.
![Page 57: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/57.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
57
Presentational elements and attributes removed.
![Page 58: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/58.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
58
plaintext, isindex <basefont>, <big>,
<center>, <font>, <s>, <strike>, <tt>, <u>align, alink, vlink
![Page 59: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/59.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Improvements
59
![Page 60: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/60.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Attributes for transition
60
<img>
border=0 if present
![Page 61: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/61.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Attributes for transition
61
<script>
language have to JavaScript if present
![Page 62: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/62.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Attributes for transition
62
<a>, <img>
„name“ dropped, use „id“
![Page 63: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/63.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Problematic Attributes
63
rev
misunderstood/misused
![Page 64: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/64.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Problematic Attributes
64
longdesc
often harms accessibility
![Page 65: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/65.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Problematic Attributes
65
<html>
The version number. :-)
![Page 66: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/66.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Updated elements
66
<meta http-equiv=“Content-Type“ content=“text/html;
charset=UTF-8“>
<meta charset=“UTF-8“>
![Page 67: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/67.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Better consistency
67
<a>more flexible
<a>, <area>new media attribute
![Page 68: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/68.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Better consistency
68
<a href=“http://m.twitter.com“ rel=“alternate“
media=“handheld“>Twitter Mobile</a>
![Page 69: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/69.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Better consistency
69
class, dir, id, lang, style, tabindex, title
Now for all elements!
![Page 70: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/70.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Real life solutions
70
<iframe>for nested HTML
![Page 71: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/71.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Real life solutions
71
<embed>for plugins
![Page 72: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/72.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Real life solutions
72
<base>, <a>, <area>target attribute
![Page 73: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/73.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Real life solutions
73
<li> value attribute<ol> start attribute
<ol> reverse attribute
![Page 74: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/74.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Real life solutions
74
data attribute
for custom data-* attributes
![Page 75: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/75.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Example Facebook Like
75
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
![Page 76: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/76.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
New semantics
76
![Page 77: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/77.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 77
![Page 78: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/78.jpg)
<section> scopes <address> and headings
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 78
New HTML semantics
![Page 79: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/79.jpg)
<header><hgroup><nav>
<article><footer>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 79
New HTML semantics
![Page 80: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/80.jpg)
<time><details><figure>
<figcaption><mark>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 80
New HTML semantics
![Page 81: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/81.jpg)
<ruby><rt><rp>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 81
From XHTML 1.1 & 2.0
No, <rt> is not for marking up Twitter retweetsfor Japanese, Hiragana expansions of Kanji
![Page 82: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/82.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
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">
![Page 83: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/83.jpg)
Demo
![Page 84: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/84.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
SVG / Canvas
84
![Page 85: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/85.jpg)
<svg>vector graphics<canvas>
drawing with scripts
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 85
SVG / Canvas
![Page 86: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/86.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Canvas
86
![Page 87: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/87.jpg)
Demo
![Page 88: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/88.jpg)
<audio id="audio" src="sound.mp3"
controls></audio>document.getElementById("audio").muted = false;
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 88
Audio
![Page 89: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/89.jpg)
Demo
![Page 90: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/90.jpg)
Demo:http://www.youtube.com/html5
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 90
Video
![Page 91: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/91.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 91
WebForms
![Page 92: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/92.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
WebForms attributes (I)
92
<input type="text" placeholder="Mayflower GmbH">
![Page 93: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/93.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
WebForms attributes (II)
93
<input type="text" maxlength="256" name="q" autofocus>
<input type="text" maxlength="256" name="q" required="true">
![Page 94: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/94.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
WebForms attributes (III)
94
<input type="tel" name="phonenumber">
<input type="url" name="url">
<input type="email" name="emailaddress">
![Page 95: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/95.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
WebForms attributes (IV)
95
<input type="number" min="0" max="10" step="2" value="6">
![Page 96: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/96.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
WebForms attributes (V)
96
<input type="range" min="0" max="10" step="2" value="6">
![Page 97: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/97.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 Speech Input
97
<input type="text" x-webit-speech>
![Page 98: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/98.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Date Picker
98
<input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime">
![Page 99: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/99.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Color Picker
99
<input type="color">
![Page 100: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/100.jpg)
Demo
![Page 101: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/101.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 101
Microdata
![Page 102: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/102.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML 5 Microdata is machine-readable data in
HTML. Recursion. :-)
102
![Page 103: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/103.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 103
Storage
![Page 104: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/104.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 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
![Page 105: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/105.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 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>
![Page 106: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/106.jpg)
Demo
![Page 107: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/107.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 107
JS APIs
![Page 108: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/108.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
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. }
![Page 109: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/109.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 109
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
![Page 110: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/110.jpg)
Demo
![Page 111: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/111.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
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
![Page 112: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/112.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
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>
![Page 113: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/113.jpg)
Demo
![Page 114: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/114.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 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: *
![Page 115: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/115.jpg)
Demo
![Page 116: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/116.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
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); }); }
![Page 117: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/117.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
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);
![Page 118: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/118.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
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);
![Page 119: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/119.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 119
CSS3
![Page 120: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/120.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
New selectors
120
.row:nth-child(even) { background: #cccccc; } .row:nth-child(odd) { background: #ffffff; }
row 1
row 2
row 3
row 4
![Page 121: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/121.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Web Fonts
121
@font-face { font-family: 'Papyrus'; src: url(Papyrus.otf); } header { font-family: 'Papyrus'; }
Hallo, Welt!
![Page 122: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/122.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
More new CSS3 features...
122
![Page 123: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/123.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 123
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.
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.
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.
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
![Page 124: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/124.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Opacity
124
OpacityOpacityOpacityOpacity
![Page 125: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/125.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 125
HSL / HSLA colours
![Page 126: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/126.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 126
Finally rounded corners! :-)
![Page 127: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/127.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Gradients
127
![Page 128: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/128.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Shadows128
![Page 129: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/129.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Shadows129
![Page 130: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/130.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Transitions and animations
130
![Page 131: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/131.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Some CSS3 Fun?http://leaverou.me/css3-secrets/
131
![Page 132: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/132.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 132
Little helpers
![Page 133: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/133.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 133
![Page 134: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/134.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 134
![Page 135: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/135.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 135
caniuse.com
![Page 136: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/136.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
html5test.com
136
![Page 137: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/137.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 137
Current Pitfalls
![Page 138: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/138.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 in Browsern
138
31 %
47 %
65 %69 %
64 %
76 %
IE9 Mobile Safari Safari 5.1 Firefox 7 Opera 11.5Chrome 14
![Page 139: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/139.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 in the year 2011
139
![Page 140: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/140.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 140
Cross
Document
Messaging
content
editableNew tags <audio> <video>
IE 9
FF 4
Chrome 8+
Safari 5+
Opera 10.7
![Page 141: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/141.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 141
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
![Page 142: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/142.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
But...
142
![Page 143: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/143.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Browser statistics 2011
143
![Page 144: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/144.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
What‘s safe to use today?
144
![Page 145: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/145.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
contenteditablepostMessage
Web Storage (IE 8+)
145
![Page 146: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/146.jpg)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Questions?
146
![Page 147: HTML5 Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052410/55512bb1b4c905b3598b4b67/html5/thumbnails/147.jpg)
Thank you very much!
© 2011 Mayflower GmbH
Contact Thorsten [email protected]+49 89 242054-31@ThorstenRinne
Mayflower GmbHMannhardtstr. 680538 MünchenGermany