Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

HTML5 Grundlagen

1.555 Aufrufe

Veröffentlicht am

Veröffentlicht in: Unterhaltung & Humor
  • Als Erste(r) kommentieren

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/

×