Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Gliederung
• Allgemeines

• Entwicklung

• Ziele

• Vor- und Nachteil...
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Allgemeines
• textbasierte / semantische Auszeichnungssprache

• befin...
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Entwicklung von HTML5
• Entwicklung von HTLM5 begann 2004

• Entwickl...
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Ziele
• Kompatibilität

• Verwendbarkeit

• Sicherheit

• Konsistenz
...
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Vorteile und Nachteile mit HTML5
Vorteile:
• bessere Semantik

• einf...
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Strukturierende Elemente
• <section></section>

• <nav></nav>

• <asi...
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

...
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Media - Geolokalisation
• Möglichkeit, Position des Endgeräts zu ermi...
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Media - Drag & Drop
• Dateien können durch Drag & Drop automatisch ho...
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Media - Offline Speicherung
• Daten können auf dem Benutzergerät gespe...
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Media - Vor- und Nachteile
14
Vorteile:
• verbesserte Kompatibilitä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/

• htt...
Marcel Engelmann | Twitter: @marcelengelmann | HTML5
Vielen Dank für eure Aufmerksamkeit!
18
Nächste SlideShare
Wird geladen in …5
×

HTML5 - The future of the Web!

1.251 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.251
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
287
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

HTML5 - The future of the Web!

  1. 1. Marcel Engelmann | Twitter: @marcelengelmann | HTML5
  2. 2. Marcel Engelmann | Twitter: @marcelengelmann | HTML5 Gliederung • Allgemeines • Entwicklung • Ziele • Vor- und Nachteile • Strukturierende Elemente • Neuerungen in HTML5 • Ausweichmöglichkeiten • Fazit • Quellen 2
  3. 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. 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. 5. Marcel Engelmann | Twitter: @marcelengelmann | HTML5 Ziele • Kompatibilität • Verwendbarkeit • Sicherheit • Konsistenz • Vereinfachung • Universalität • Barrierefreiheit 5
  6. 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. 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. 8. Marcel Engelmann | Twitter: @marcelengelmann | HTML5 Media - Audio 8 <audio></audio>
  9. 9. Marcel Engelmann | Twitter: @marcelengelmann | HTML5 Media - Video 9 <video></video>
  10. 10. Marcel Engelmann | Twitter: @marcelengelmann | HTML5 Media - Canvas • pixelorientierte Immediate-Mode Grafikschnittstelle • 3D und 2D Grafik-Animation durch WebGL 10 <canvas></cancas>
  11. 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. 12. Marcel Engelmann | Twitter: @marcelengelmann | HTML5 Media - Drag & Drop • Dateien können durch Drag & Drop automatisch hochgeladen werden 12
  13. 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. 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. 15. Marcel Engelmann | Twitter: @marcelengelmann | HTML5 Ausweichmöglichkeiten 15
  16. 16. Marcel Engelmann | Twitter: @marcelengelmann | HTML5 Fazit 16
  17. 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. 18. Marcel Engelmann | Twitter: @marcelengelmann | HTML5 Vielen Dank für eure Aufmerksamkeit! 18

×