HTML5: Einblick, Überblick, Ausblick

Embed Size (px)

Citation preview

Michael Jendryschik, itemis AG, 01. Mrz 2011

itemis StuttgartQuelle: unbekannt

itemis StuttgartStuttgarter Engineering Park

Quelle: unbekannt

HTML5?Quelle: http://download.chip.eu/de/Superman-Wallpaper_1263715.html

HTML5?Quelle: http://cassis9.deviantart.com/art/eierlegende-Wollmilchsau-153969060

Quelle: http://www.peterkroener.de/was-ist-html5-und-was-nicht-und-was-haette-der-kaiser-dazu-gesagt/

Quelle: http://www.hiphopstore.ch/CD/Rap-Schweizerdeutsch/Semantik-Willkomme-Diheime-CD.html

Quelle: http://joshduck.com/periodic-table.html

Endoskelett einer WebsiteQuelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/

Endoskelett einer WebsiteQuelle: http://www.kunstlinks.de/material/vtuempling/skelettiert/

Logo Suche Hauptmen

Hauptbereich

Sektion Abschnitt

Sektion

Bereichsmen

Footer

Elemente mit Beschriftung

Elemente mit Beschriftung

A cheeky macaque, Lower Kintaganban River, Borneo. Original by
Richard Clark

Datum und UhrzeitQuelle: http://filomaniac.blogspot.com/2010/03/filofax-die-geschichte_25.html

Datum und UhrzeitQuelle: http://filomaniac.blogspot.com/2010/03/filofax-die-geschichte_25.html
28. Dezember 2010, 09:25 Uhr

MarkierungenQuelle: http://www.baypa.de/baypa/storefront/package.html?id=2274503

Draw attention with mark

SollumbruchstelleDonaudampf
schifffahrtskapitn

Begrenztes Ma

FormulareQuelle: http://www.badische-zeitung.de/wirtschaft-3/steuererklaerung-einfach-gemacht-fragen-und-antworten--40369436.html

Auf Pflichtfelder hinweisen

input:invalid { border: 1px solid #9F0F00; }

E-Mail-Adressen

Datumsangaben

Zeitangaben

Liste mit Vorschlgen

HTML5 ist mehr als nur schne neue Semantik!HTML5 bietet einige berraschungen!Quelle: http://www.fotostar.de/?p=173

HTML audio und video

HTML audio und video

Video herunterladen

Quelle: http://www.hongkiat.com/blog/48-excellent-html5-demos/HTML5 canvas

Quelle: http://www.rgraph.net/HTML5 canvas

HTML5 canvas

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.

HTML5 Application Cache

Quelle: http://everytimezone.com/

HTML5 Drag and Drop API

HTML5 Drag and Drop APIQuelle: http://html5demos.com/drag

HTML5 Drag and Drop APIQuelle: http://html5demos.com/drag

HTML5 Drag and Drop APIQuelle: http://html5demos.com/drag

HTML5 Drag and Drop APIQuelle: http://html5demos.com/drag

HTML5 GeoLocation API

GeoLocation API

GeoLocation API

BrowserkompatibilittQuelle: http://www.vladstudio.com/wallpaper/?how_internet_works

IE9 RC: 116 Punkte

Quelle: http://www.slideshare.net/cheilmann/using-html5-sensibl

HTML5 audio und video

Video herunterladen

HTML5 audio und video