Slide 1
Slide 1 text
Michael Jendryschik, itemis AG
, 01. März 2011
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
itemis Stuttgart
Quelle: unbekannt
Slide 4
Slide 4 text
itemis Stuttgart
Stuttgarter Engineering Park
Quelle: unbekannt
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
HTML5?
Quelle: http://download.chip.eu/de/Superman-Wallpaper_1263715.html
Slide 7
Slide 7 text
HTML5?
Quelle: http://cassis9.deviantart.com/art/eierlegende-Wollmilchsau-153969060
Slide 8
Slide 8 text
Quelle: http://www.peterkroener.de/was-ist-html5-und-was-nicht-und-was-haette-der-kaiser-dazu-gesagt/
Slide 9
Slide 9 text
Quelle: http://www.hiphopstore.ch/CD/Rap-Schweizerdeutsch/Semantik-Willkomme-Diheime-CD.html
Slide 10
Slide 10 text
Quelle: http://joshduck.com/periodic-table.html
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Endoskelett einer Website
Quelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/
Slide 14
Slide 14 text
Endoskelett einer Website
Quelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/
Slide 15
Slide 15 text
Logo
Suche
Hauptmenü
Hauptbereich
Sektion
Abschnitt
Sektion
Bereichsmenü FooterSlide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Elemente mit Beschriftung
Slide 18
Slide 18 text
Elemente mit Beschriftung
A cheeky macaque, Lower Kintaganban River, Borneo. Original by
Richard Clark
A cheeky macaque, Lower Kintaganban River, Borneo. Original by
Richard Clark
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Datum und Uhrzeit
Quelle: http://filomaniac.blogspot.com/2010/03/filofax-die-geschichte_25.html
Slide 21
Slide 21 text
Datum und Uhrzeit
Quelle: http://filomaniac.blogspot.com/2010/03/filofax-die-geschichte_25.html
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Markierungen
Quelle: http://www.baypa.de/baypa/storefront/package.html?id=2274503
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Draw attention with mark
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Sollumbruchstelle
Donaudampf
schifffahrtskapitän
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Begrenztes Maß
Slide 31
Slide 31 text
Formulare
Quelle: http://www.badische-zeitung.de/wirtschaft-3/steuererklaerung-einfach-gemacht-fragen-und-antworten--40369436.html
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Auf Pflichtfelder hinweisen
input:invalid { border: 1px solid #9F0F00; }
Slide 35
Slide 35 text
E-Mail-Adressen
Slide 36
Slide 36 text
Datumsangaben
Slide 37
Slide 37 text
Zeitangaben
Slide 38
Slide 38 text
Liste mit Vorschlägen
Slide 39
Slide 39 text
HTML5 ist mehr als nur
schöne neue Semantik!
HTML5 bietet einige Überraschungen!
Quelle: http://www.fotostar.de/?p=173
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
HTML audio und video
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Quelle: http://www.hongkiat.com/blog/48-excellent-html5-demos/
HTML5 canvas
Slide 46
Slide 46 text
Quelle: http://www.rgraph.net/
HTML5 canvas
Slide 47
Slide 47 text
HTML5 canvas
Slide 48
Slide 48 text
HTML5 canvas
// Die Canvas-Funktion beim Laden der Seite aufrufen
if(window.addEventListener)
{
addEventListener("load", drawCanvas, false);
}
else
{
attachEvent("onload", drawCanvas);
}
//Canvas zeichnen
function drawCanvas()
{
var canvas = document.getElementById('testcanvas');
if(canvas.getContext)
{
var context = canvas.getContext('2d');
context.fillStyle = "rgb(0, 70, 124)";
context.fillRect(0, 0, canvas.width, canvas.height);
}
}
Dein Browser kann diese Grafik nicht darstellen.
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
HTML5 Application Cache
Slide 51
Slide 51 text
Quelle: http://everytimezone.com/
Slide 52
Slide 52 text
HTML5 Drag and Drop API
Slide 53
Slide 53 text
HTML5 Drag and Drop API
Quelle: http://html5demos.com/drag
Slide 54
Slide 54 text
HTML5 Drag and Drop API
Quelle: http://html5demos.com/drag
Slide 55
Slide 55 text
HTML5 Drag and Drop API
Quelle: http://html5demos.com/drag
Slide 56
Slide 56 text
HTML5 Drag and Drop API
Quelle: http://html5demos.com/drag
Slide 57
Slide 57 text
HTML5 GeoLocation API
Slide 58
Slide 58 text
GeoLocation API
Slide 59
Slide 59 text
GeoLocation API
Slide 60
Slide 60 text
Browserkompatibilität
Quelle: http://www.vladstudio.com/wallpaper/?how_internet_works
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
IE9 RC: 116 Punkte
Slide 67
Slide 67 text
Quelle: http://www.slideshare.net/cheilmann/using-html5-sensibl
Slide 70
Slide 70 text
»Nur wenig von dem, was in
der ersten Auflage steht, hat im
Jahr 2011 noch
uneingeschränkte Gültigkeit.
Fast alles hat sich in
irgendwelchen Details
geändert (…). Ich würde die
erste Auflage echt nur noch mit
größter Vorsicht aufschlagen,
denn das Teil ist einfach
veraltet.« (Peter Kröner) 2011
2010
Slide 71
Slide 71 text
Warum müssen wir mit
unfertigen Techniken arbeiten?
Quelle: http://baufotos.steffi-und-lutz.de/20080730%20Innenwaende%20OG/index.htm
Slide 72
Slide 72 text
Snow Cruiser
Dr. Thomas C. Poulter
1939, Antarktis
Quelle: http://www.joeld.net/snowcruiser/snowhist.html
Slide 73
Slide 73 text
Quelle: http://blog.hemmings.com/index.php/tag/snow-cruiser/
Slide 74
Slide 74 text
Quelle: http://www.joeld.net/snowcruiser/snowhist.html
Slide 75
Slide 75 text
Quelle: http://blog.modernmechanix.com/2007/08/26/planting-the-stars-and-stripes-in-the-antarctic/
Slide 76
Slide 76 text
Quelle: http://blog.hemmings.com/index.php/tag/snow-cruiser/
Slide 77
Slide 77 text
Quelle: http://www.joeld.net/snowcruiser/snowhist.html
Slide 78
Slide 78 text
Quelle: http://www.joeld.net/snowcruiser/snowhist.html
Slide 79
Slide 79 text
Quelle: http://www.joeld.net/snowcruiser/snowhist.html
Slide 80
Slide 80 text
Quelle: http://www.joeld.net/snowcruiser/snowhist.html
Slide 81
Slide 81 text
Quelle: http://www.joeld.net/snowcruiser/snowhist.html
Slide 82
Slide 82 text
Quelle: http://www.joeld.net/snowcruiser/snowhist.html
Slide 83
Slide 83 text
Technische Machbarkeit im Vordergrund
Niemals unter echten Einsatzbedingungen getestet
Spekulativer medialer Hype
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
Weiterentwicklung des Webs als Ziel
»Paving the Cowpath«
Standardisieren, was schon da ist
Reeller medialer Hype
Slide 86
Slide 86 text
Quelle: http://www.flickr.com/photos/chisa/1349759901/
Es gibt Hacks und Lösungen,
auch für den Internet Explorer
Slide 87
Slide 87 text
http://code.google.com/p/html5shim/
Slide 88
Slide 88 text
http://www.modernizr.com/
Slide 89
Slide 89 text
http://de.html5boilerplate.com/
Slide 90
Slide 90 text
HTML5 jetzt einsetzen!
Slide 91
Slide 91 text
Welche Fragen haben Sie?
Michael Jendryschik, itemis AG
, 01. März 2011
Slide 92
Slide 92 text
Vielen Dank!
Michael Jendryschik, itemis AG
, 01. März 2011
[email protected]
0151 10860470
0231 9860-173