Diese Präsentation ist über HTML5 und soll die verschiedenen Konzepte und Ideen hinter dieser neuen HTML Version darstellen. This presentation is about HTML5 and takes you through the main ideas and concepts, which are presented with the introduction of HTML5. See what HTML5 can do for you.

1. Marcel Engelmann | Twitter: @marcelengelmann | HTML5

2. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Gliederung
• Allgemeines
• Entwicklung
• Ziele
• Vor- und Nachteile
• Strukturierende Elemente
• Neuerungen in HTML5
• Ausweichmöglichkeiten
• Fazit
• Quellen
2

3. 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

4. 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

5. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Ziele
• Kompatibilität
• Verwendbarkeit
• Sicherheit
• Konsistenz
• Vereinfachung
• Universalität
• Barrierefreiheit
5

6. 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

7. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Strukturierende Elemente
• <section></section>
• <nav></nav>
• <aside></aside>
• <article></article>
• <header></header>
• <mark></mark>
• <footer></footer>
• <hgroup></hgroup>
7

8. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Media - Audio
8
<audio></audio>

9. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Media - Video
9
<video></video>

10. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Media - Canvas
• pixelorientierte Immediate-Mode Grafikschnittstelle
• 3D und 2D Grafik-Animation durch WebGL
10
<canvas></cancas>

11. 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

12. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Media - Drag & Drop
• Dateien können durch Drag & Drop automatisch hochgeladen werden
12

13. 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

14. 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

15. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Ausweichmöglichkeiten
15

16. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Fazit
16

17. 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

18. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Vielen Dank für eure Aufmerksamkeit!
18