Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Gliederung

• Allgemeines

• Entwicklung

• Ziele

• Vor- und Nachteile

• Strukturierende Elemente

• Neuerungen in HTML5

• Ausweichmöglichkeiten

• Fazit

• Quellen

2

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Allgemeines

• textbasierte / semantische Auszeichnungssprache

• befindet sich noch in Entwicklung

• es gibt schon fast ausgereifte Entwürfe

• neue Funktionalität

• bessere / einfache Verwendung von Media-Elementen

• ohne Plugins (z.B. Adobe Flash)

3

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Entwicklung von HTML5

• Entwicklung von HTLM5 begann 2004

• Entwicklung noch immer nicht beendet

• Aktuell: HTML4 (seit 1997)

• funktioniert immer mehr im Zusammenhang mit CSS und JavaScript

• soll 2014 fertig gestellt werden

4

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Ziele

• Kompatibilität

• Verwendbarkeit

• Sicherheit

• Konsistenz

• Vereinfachung

• Universalität

• Barrierefreiheit

5

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Vorteile und Nachteile mit HTML5

Vorteile:

• bessere Semantik

• einfacher den HTML-Text zu lernen / lesen

• verbesserte Benutzerfreundlichkeit

!

!

Nachteile:

• nicht mit allen Browser kompatibel

• digitale Rechteverwaltung

6

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Strukturierende Elemente

• <section></section>

• <nav></nav>

• <aside></aside>

• <article></article>

• <header></header>

• <mark></mark>

• <footer></footer>

• <hgroup></hgroup>

7

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Media - Audio

8

<audio></audio>

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Media - Video

9

<video></video>

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Media - Canvas

• pixelorientierte Immediate-Mode Grafikschnittstelle

• 3D und 2D Grafik-Animation durch WebGL

10

<canvas></cancas>

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Media - Geolokalisation

• Möglichkeit, Position des Endgeräts zu ermitteln

• Beispiele: GPS-Sensor, Mobilfunk, Wlan-Netzwerke und IP-Adressen

• ortsbezogene Dienste (nächstgelegene Restaurants, Tankstellen, etc.)

• Benutzer muss nach Erlaubnis gefragt werden!

11

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Media - Drag & Drop

• Dateien können durch Drag & Drop automatisch hochgeladen werden

12

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Media - Offline Speicherung

• Daten können auf dem Benutzergerät gespeichert werden

• ganze Datenbanken können offline verwaltet werden

• HTML5-Software und Spiele können heruntergeladen werden (Windows 8)

13

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Media - Vor- und Nachteile

14

Vorteile:

• verbesserte Kompatibilität

• verbesserte Performance

• ohne Plugins

!

!

Nachteile:

• viele Dateiformate sind nötig für die Darstellung in verschiedenen Browsern

• höherer Zeitaufwand für die Erstellung der Inhalte

• Komplexität

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Ausweichmöglichkeiten

15

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Fazit

16

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Quellen

• http://www.theloungesound.ca/new-html5-audio-player/

• http://slides.peterkroener.de/mmt29/

• http://url4short.info/f8eb8fc0

• http://siliconangle.com/blog/2012/04/26/how-to-take-advantage-of-html5-trends-and-tools/

• http://www.roessle-trainer.de/das-sind-die-webdesigntrends-2013/

• http://www.wsb-werbeagentur.de/wp-content/uploads/2013/03/Ziele-einer-Facebook-Seite.jpg

• http://proddb.kraft-hosting.net/prod_db/proddbimg/2382.png

• http://www.selfhtml5.org/wp-content/uploads/2013/05/html5-video-marktanteil.png

• https://pbs.twimg.com/profile_images/1589392292/hero.png

• http://de.sott.net/image/image/s5/117476/full/Muede_Jugendliche_im_Bundestag.jpg

• http://de.wikipedia.org/wiki/HTML5

• http://html5.martineberle.de/

• http://diveintohtml5.info/

17

Marcel Engelmann | Twitter: @marcelengelmann | HTML5

Vielen Dank für eure Aufmerksamkeit!

18