Successfully reported this slideshow.

HTML5 Grundlagen

1,541 views

Published on

Published in: Entertainment & Humor
  • Be the first to comment

HTML5 Grundlagen

  1. 1. GRUNDLAGEN von Christoph Jansen
  2. 2. Inhalt• Was ist HTML5 und wie entsteht es?• HTML5 Bestandteile • Semantik • Formulare • Audio & Video • Canvas • Geolocation • Application Cache & Web Storage• Zusammenfassung
  3. 3. Überblick• HTML5 ist eine Ansammlung von neuen Webtechnologien• Steht nicht nur für die eigentliche Auszeichnungssprache HTML • Auch für diverse JavaScript-APIs, mit denen Web-Applikationen geschrieben werden • Diese sollen nativ in allen modernen Browsern laufen • D.h. ohne Erweiterungen, wie z.B. Flash oder Java• Geolocation wird separat entwickelt und steht nicht im HTML5-Standard • Als neue Technologie gehört es aber zum Thema
  4. 4. Überblick• Wurde ursprünglich von der WHATWG spezifiziert • Die WHATWG ist ein Zusammenschluss der großen Browserhersteller• W3C arbeitete lange Zeit an XHTML2 • Wurde nicht in Browsern implementiert • Das W3C die HTML5-Spezifikation• W3C erstellte einen Fork der Spezifikation, was dazu führte, dass an HTML5 getrennt weiter gearbeitet wird.
  5. 5. Semantik• <!DOCTYPE html> deklariert das Dokument als HTML5• Im Gegensatz zu XHTML müssen nicht alle Tags wieder geschlossen werden, können sie aber.• Einzelelemente wie <meta /> können auf den schließenden Slash verzichten• Attributwerte benötigen keine Anführungszeichen mehr: • <meta charset=utf-8>
  6. 6. Semantik• <html>, <head> und <body> Elemente können entfernt werden • Es ist klar, dass am Anfang des Dokuments der Kopfinhalt steht und darauf der Rumpf folgt• Abwärtskompatibilität • Eine HTML5 Website könnte auch komplett in HTML4 oder XHTML-Syntax geschrieben sein• Syntax-Fehler sind im HTML5-Standard beschrieben • Werden von allen Browsern gleich behandelt
  7. 7. Semantik – neue Tags• <div> Elemente werden durch aussagekräftige Tags ersetzt • <header> ersetzt <div id=“header”><section> zur inhaltlichen Unterteilung<article> Abgrenzung von Artikeln oder Kommentaren<header> Kopfbereich der Seite oder einer Sektion<footer> Kopfbereich der Seite oder einer Sektion<aside> Zusatzinformationen<nav> Hauptnavigation<time> Zeitangaben<hgroup> Gruppierung von Überschriften• Suchmaschinen und Screenreader können profitieren
  8. 8. Semantik - Überschriften• Es gibt nach wie vor nur <h1> bis <h6>• Mit Hilfe von <section> können weitere Unterteilungen stattfinden<section> <h1></h1> <section> <h1></h1> </section></section>
  9. 9. Beispiel 1Semantik - Chrome
  10. 10. Formulare<form action=“zielseite.html”> <input name=“x” type=“color” required> <input type=“submit”></form>coloremailnumberrangesearchtelurl
  11. 11. Beispiel 2Formulare - Opera
  12. 12. Audio und Video• Multimediadateien werden mit den Tags <video> und <audio> eingebunden• Die Webbrowser besitzen eigene Player, um die Inhalte ohne zusätzliches Plugin abzuspielen• Nicht alle Browser unterstützen jedes Format • Es müssen mehrere Formate angeboten werden, sodass sich der Browser für eines entscheiden kann• Fallback auf Flash für alte Browser
  13. 13. Audio und Video<audio src="audio.mp3" controls> <a href=“audio.mp3”>Download</a> <!-- Fallback --></audio><video controls height="360"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogv"></video>• Die erste Quelle wird bevorzugt verwendet, falls die Datei abgespielt werden kann
  14. 14. Beispiel 3Audio und Video - Chrome
  15. 15. Canvas• Canvas ist eine Zeichenfläche • JavaScript API • Es werden nur die nötigsten Funktionen zur Verfügung gestellt • Einsatz von Frameworks• Canvas 3D mit WebGL• Formen, Pfade, Bild- und Video manipulation, Animationen, Text, Farbverläufe• Ursprung des Koordinatensystems in der linken, oberen Ecke<canvas id="canvas" width="480" height="360"></canvas>
  16. 16. Canvas• Funktionen zum Zeichnen werden auf context angewendetvar canvas = document.getElementById(canvas);if(canvas.getContext){ var context = canvas.getContext(2d); <!-- Code hier -->}• Formen:context.fillStyle = green;context.fillRect(5, 10, 40, 50);
  17. 17. Canvas• Pfade:context.strokeStyle = red;context.lineWidth = 5;context.beginPath();context.moveTo(10, 10);context.lineTo(20, 20);context.stroke();context.closePath();
  18. 18. Canvas• Weitere wichtige Funktionen:• Einstellungen von context auf einem Stack speicherncontext.save()context.restore()• Farbwerte eines Bildbereichs in einem Array erhaltencontext.getImageData(0, 0, 50, 50)context.putImageData(data, 10, 10)
  19. 19. Beispiel 4Canvas - Chrome
  20. 20. Geolocation• Geolocation ermittelt Positionsdaten des Nutzers mittels: • IP Adresse • WiFi • GPS • GSM-Netz• Die Datenermittlung erfolgt asynchron: • Verhindert Verzögerungen bei der Ausführung des Scripts • Sobald Daten ermittelt wurden wird ein Callback aufgerufen
  21. 21. Geolocationvar callback = function(position){ var time = position.timestamp;}if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(callback);}• getCurrentPosition(erfolgCB, fehlerCB, options) • Erfolg: der Callback erfolgCB() wird aufgerufen • Fehler: der Callback fehlerCB() wird aufgerufen • Mit options kann die Positionbestimmung verfeinert werden
  22. 22. Geolocation• Ermittelte Daten:timestamp Zeitstempelcoords.latitude Längengradcoords.longitude Breitengradcoords.altitude Höhecoords.accuracy Präzisioncoords.altitudeAccuracy Präzision Höhecoords.heading Richtungcoords.speed Geschwindigkeit
  23. 23. Geolocation• OptionenenableHighAccuracy: true,timeout: 5000,maximumAge: 0• Ortung über einen Zeitraum:navigator.geolocation.watchPosition();• Ortung stoppen:navigator.geolocation.clearWatch();
  24. 24. Beispiel 5Geolocation - Opera
  25. 25. Application Cache• Im Application Cache können Ressourcen zur weiteren Verwendung Offline gespeichert werden• Eine Manifest-Datei gibt an, welche Ressourcen geladen werden • Es können auch Alternativinhalte geladen werden, wenn keine Verbindung besteht • Der Mime-Type für Manifest-Dateien muss in einer .htaccess Datei beschrieben sein • Das Manifest wird in der index.html Datei eingebunden• Der Nutzer muss zustimmen
  26. 26. Application Cache - ManifestCACHE MANIFESTcached.htmlNETWORK:onlineonly.htmlFALLBACK:/ offline.html
  27. 27. Application CacheaddEvent(applicationCache, checking, function(){});• Events:checking Suche Manifestnoupdate Nichts neues im Manifestdownloading Lade Manifest und Ressourcenprogress Lade Ressourcencached Cache bereitupdateready Cache aktualisiertobsolete Cache veraltetError Cache fehlerhaft
  28. 28. Application Cache• Weitere Events des Browsers:addEvent(window, load, function(){}) • Beim Laden der SeiteaddEvent(window, offline, function(){}) • Browser offlineaddEvent(window, online, function(){}) • Browser wieder online• Bei einigen Browsern document.body statt window
  29. 29. Beispiel 6Application Cache - Firefox
  30. 30. Web Storage• Key/Value Speicher im Browser • Wertepaare• Verwendung ähnlich wie Cookies • Größerer Speicher • Mehr Performanz• Zwei unterschiedliche Speicher • Session Storage (verfällt nach der Sitzung) • Local Storage (hält solange er nicht explizit gelöscht wird)
  31. 31. Web Storage• Trennung der Daten verschiedener Domains • Kein Fremdzugriff• Daten können für Offline-Anwendungen gespeichert und erst später synchronisiert werden
  32. 32. Web StoragelocalStorage.setItem(‘foo’, ‘bar’);• Dem Schlüssel ‘foo’ wird der Wert ‘bar’ zugeornetlocalStorage.getItem(‘foo’);• Der Schlüssel ‘foo’ wird abgefragt und der Wert ‘bar’ wird geliefertlocalStorage.removeItem(‘foo’);• Wertepaar löschenlocalStorage.length;• Anzahl aller Wertepaare
  33. 33. Zusammenfassung• HTML5 steckt noch in den Kinderschuhen• Weder Spezifikationen noch Browserimplementierungen sind einheitlich• Neue Funktionen können teilweise schon genutzt werden • Aber man sollte auch Alternativen anbieten
  34. 34. Quellen• http://dev.w3.org/html5/spec/single-page.html• http://www.whatwg.org/specs/web-apps/current- work/multipage/• http://dev.w3.org/geo/api/spec-source.html• https://developers.google.com/maps/documentation/javascri pt/?hl=de• http://www.w3schools.com/html5/• http://www.html5rocks.com• http://diveintohtml5.info/

×