html5 - the future of the web!
Post on 24-Jun-2015
453 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related