HTML5 Grundlagen

1.307 Aufrufe

Veröffentlicht am

Veröffentlicht in: Unterhaltung & Humor
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.307
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
122
Aktionen
Geteilt
0
Downloads
15
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • WHATWG steht für “Web Hypertext Application Technology Working Group“W3C stehtfür World Wide Web ConsortiumXHTML war wegen der striktenFehlerbehandlung und der umständlichen Syntax wenigerbeliebt
  • Wenn mehrere Attributwerte an ein Attribut vergeben werden, indem sie mit einem Komma getrennt werden, sind weiterhin Anführungszeichen nötig. Zum Beispiel in <meta content=“hallo, welt”>
  • Der Übergang von <section> zu <article> ist fließend. Eine Sektion ist eine allgemeine inhaltliche Unterteilung der Website. Ein <article> Element umschließt einen einzelnen Artikel oder Blogbeitrag, sowie einzelne Kommentare.Das <aside> Element wirdZusatzinformationenverwendet, ohne die der Hauptinhaltalleineimmernochverständlich wäre. Im Beispiel werden Links zu Kategorien und RSS-Feeds abgegrenzt.Das <nav> Element wirdausschließlich für die Hauptnavigation verwendet und nicht für andere Ansammlungen von Links. Beim <time> Element istVorsichtgeboten, da eszurZeitnochkeineeinheitlichenFormateverwendet.Suchmaschinen und ScreenreadermachennochkaumVerwendung von den neuenElementen. In Zukunftkönnen sie aber zur einfacheren Inhaltlichen Untergliederung genutzt werden.<div> Elemente, die nureineUnterteilungfür das CSS-Layout darstellen, bleibenvorhanden.
  • Mit <section> kannesunendlichvieleinhaltlicheUnterteilungengeben.
  • - url und email habenvoreingestellteValidationskriterienrange benötigt die attribute min, max und stepDas Attribut required wirdgesetzt, wenn das <input> Element nichtfreigelassenwerdendarf.
  • Der Link imAudioelementistein Fallback für alte Browser, bei denen nur ein Download-Link angezeigt wird. Sie ignorieren das <audio> Element. An dieserStelle könnte auch ein Flashinhalt als Alternative eingebunden sein.Das controls Attribut macht den Player sichtbar, wenn keine eigenes Interface verwendet wird.
  • - In dieser Präsentation werden nur Formen, Pfade und Bildmanipulation behandelt.
  • - Der Code zumzeichnenwirdnachcanvas.getContext('2d') eingefügt.-Formenzuzeichnenistsimpel. Nachdem man eineFarbegewählt hat zeichnet man mit fillRect beispielsweise ein Rechteck, dessen linke, obere Ecke an der Position x=5, y=10 ist und das 40px breit und 50px hochist.
  • Zunächst wird der Ausgangspunkt auf x=10, y=10 gesetzt. MitlineTo(20, 20) wirdeineLinie von AusgangspunktzumPunkt x=10, y=10 gezeichnet.Der neueAusgangspunktbefindetsichdannimPunkt x=20, y=20. Von dortauswird die nächste Linie gezeichnet.context.stroke() zeichnet den zuvordefiniertenPfad.
  • Mitcontext.save() werden die aktuelleingestelltenFarbwerte auf einemStackabgelegt. Mitcontext.restore() werden die zuletztgespeichertenEinstellungenwiederhergestellt und vom Stack gelöscht.Mit context.getImageData(0, 0, 50, 50) erhält man die RGBa-Daten eines 50x50 Pixel großen Feldes ausgehend vom Punkt x=0, y=0. Die Datenwerden in einemeindimensionalen Array gespeichert, wobeivieraufeinanderfolgende Plätze des Arrays die RGBa-Daten eines einzelnen Pixels enthalten.Mit context.putImageData(data, 10, 10) wird das in data gespeicherte Array ausgehendvomPunkt x=10, y=10 gezeichnet.
  • - Datenwerden an den Parameter positionübergeben und können von diesem wie bei position.timestamp Abgefragt werden
  • CACHE MANIFEST ist eine zwingende Einleitung. Im Block darunter werden alle Dateien gelistet, die sofort heruntergeladen und im Cache gepeichert werden sollen.Im Block NETWORKfolgenalleSeiten die niemals offline zurVerfügung gestellt werden sollen.Im Block FALLBACK folgen Seiten, die alternativ zu den in NETWORK gelisteten Seiten angezeigt werden sollen, falls keine Online-Verbindung besteht.
  • Mit JavaScript können Events abgefangen werden, die den aktuellen Status des Caches angeben.Events werden als zweiter Parameter in addEvent() angegeben. Der erste Parameter ist applicationCache und letzte Parameter ist die auszuführende Funktion, wenn das Event aktiv wird.
  • - Im Firefox geht das Event von window und document.body gleichzeitig aus
  • 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/

    ×