Upload
mayflower-gmbh
View
3.155
Download
0
Tags:
Embed Size (px)
Citation preview
© 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
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Who‘s already using ...
4
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 in one sentence?
5
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
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 for Developers?
7
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 ~= HTML + CSS + JS
8
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Agenda today
9
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
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML history
11
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1989:HTML was born at CERN.
12
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1989:Invented by Tim Berners-Lee
No, not by a Neutrino.
13
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML was based on SGML from the 1960ies.
14
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1993:HTML was submitted to the
IETF
15
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1993:IETF required the first
implementation: Mosaic
16
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1996:Tim Berners-Lee created the
World Wide Web Consortium (W3C)
17
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1996:Browser war:
Netscape vs. Microsoft
18
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...
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
The dark age of the Web...
20
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 21
XHTML 2.0
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 22
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
But ...23
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1999:PHP 3.0 - MySQL 3.22
Apache 1.3
24
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
1999:Internet Explorer 5.0
XMLHttpRequest Object
25
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
As time goes by ...
26
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)
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
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 29
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Google Suggest
Google Mail
Google Maps
30
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 31
2006:Comet
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 32
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 33
Push Ajax
Push
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Okay, what‘s happening?
34
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Contentvs.
Context35
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Facebook is an application!
36
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Pagevs.
Stream37
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 38
Twitter is an application!
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Applications?
39
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Apps!
40
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 41
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 42
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
online == offline43
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Is this the new web?
44
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
The future is a web app!
45
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML 5 Basics
46
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
<!DOCTYPE html>
47
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped stuff
48
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
49
KISSKeep it simple & stupid
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
50
Removed redundant or broken elements
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
51
<acronym>
↓<abbr>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
52
<applet>
↓<object>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
53
<dir>
↓<ul>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
54
<frame><frameset><noframe>
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
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
56
HTML5 should explicitly require CSS.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Dropped HTML4 stuff
57
Presentational elements and attributes removed.
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
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Improvements
59
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Attributes for transition
60
<img>
border=0 if present
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Attributes for transition
61
<script>
language have to JavaScript if present
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Attributes for transition
62
<a>, <img>
„name“ dropped, use „id“
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Problematic Attributes
63
rev
misunderstood/misused
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Problematic Attributes
64
longdesc
often harms accessibility
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Problematic Attributes
65
<html>
The version number. :-)
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“>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Better consistency
67
<a>more flexible
<a>, <area>new media attribute
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>
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!
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Real life solutions
70
<iframe>for nested HTML
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Real life solutions
71
<embed>for plugins
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Real life solutions
72
<base>, <a>, <area>target attribute
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
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Real life solutions
74
data attribute
for custom data-* attributes
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>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
New semantics
76
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 77
<section> scopes <address> and headings
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 78
New HTML semantics
<header><hgroup><nav>
<article><footer>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 79
New HTML semantics
<time><details><figure>
<figcaption><mark>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 80
New HTML semantics
<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
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">
Demo
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
SVG / Canvas
84
<svg>vector graphics<canvas>
drawing with scripts
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 85
SVG / Canvas
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Canvas
86
Demo
<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
Demo
Demo:http://www.youtube.com/html5
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 90
Video
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 91
WebForms
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
WebForms attributes (I)
92
<input type="text" placeholder="Mayflower GmbH">
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">
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">
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">
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">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 Speech Input
97
<input type="text" x-webit-speech>
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">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Color Picker
99
<input type="color">
Demo
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 101
Microdata
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML 5 Microdata is machine-readable data in
HTML. Recursion. :-)
102
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 103
Storage
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
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>
Demo
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 107
JS APIs
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. }
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
Demo
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
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>
Demo
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: *
Demo
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); }); }
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);
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);
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 119
CSS3
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
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!
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
More new CSS3 features...
122
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
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Opacity
124
OpacityOpacityOpacityOpacity
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 125
HSL / HSLA colours
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 126
Finally rounded corners! :-)
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Gradients
127
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Shadows128
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Shadows129
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Transitions and animations
130
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Some CSS3 Fun?http://leaverou.me/css3-secrets/
131
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 132
Little helpers
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 133
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 134
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 135
caniuse.com
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
html5test.com
136
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 137
Current Pitfalls
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
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
HTML5 in the year 2011
139
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
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
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
But...
142
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Browser statistics 2011
143
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
What‘s safe to use today?
144
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
contenteditablepostMessage
Web Storage (IE 8+)
145
HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I
Questions?
146
Thank you very much!
© 2011 Mayflower GmbH
Contact Thorsten [email protected]+49 89 242054-31@ThorstenRinne
Mayflower GmbHMannhardtstr. 680538 MünchenGermany