Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5 im Überblick – semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element

on

  • 2,940 views

Auch wenn die Spezifikation von HTML5 noch nicht abgeschlossen ist, werden die Features dieses neuen Standards der Auszeichnungssprache HTML das Internet der unmittelbaren Zukunft bestimmen. Erfahren ...

Auch wenn die Spezifikation von HTML5 noch nicht abgeschlossen ist, werden die Features dieses neuen Standards der Auszeichnungssprache HTML das Internet der unmittelbaren Zukunft bestimmen. Erfahren sie, wie nun semantisches HTML, Geolocation, Offline-Webanwendungen, Video- und Audio-Elemente, Drag and Drop und Vektorgrafiken in Webseiten integriert werden können.

Statistics

Views

Total Views
2,940
Views on SlideShare
2,940
Embed Views
0

Actions

Likes
3
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 im Überblick – semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element HTML5 im Überblick – semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element Presentation Transcript

  • HTML5 im Überblick semantisches HTML Geolocation Offline-Webanwendungen Multimedia Drag & Drop Canvas-Element Vortrag von Niklas Kanthak am 3.6.2014 an der VHS Düsseldorf Semester 14/1 – Veranstaltung H356335
  • Historie 1999 HTML 4.01 Webstandard vom W3C 2000 XHTML als Zäsur, Aufschluss zur Realität HTML 4.01 → XHTML 1 XHTML 2 = reines XML Browserhersteller wehren sich gegen XHTML 2004 Gründung WHATWG 2009 Auflösung der XHTML-Arbeitsgruppe W3C bildet HTML5-Team
  • Standard? Nachfolger von HTML 4 und XHTML 1 HTML5: „Candidate Recommendation“ HTML 5.1: „Working Draft“ W3C: „Snapshot“ WHATWG: „HTML Living Standard“ Standardfixierung fraglich aufgrund der Einflussnahme der Browserhersteller
  • Browser gute Browser FF 3.0+ Safari 3.0+ Opera 10.0+ Chrome 3.0+ böse Browser IE < 9 alle Versionen < s. o.
  • Browserunterstützung Übersicht der Browserunterstützung im WHATWG Wiki – detailliert z. B. für das <meter>-Element Keeping up with HTML5 and browser support: HTML5Rocks When Can I use… Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers Check your browser’s HTML5 and CSS3 capabilities: haz.io HTML5 and CSS3 feature detection: Modernizr
  • Das erste HTML5-Dokument <!DOCTYPE html> <HEAD> <META CHARSET="UTF-8"> <TITLE>HTML</TITLE> </HEAD> <H1>Ich bin ein HTML5-Dokument</H1> <p class=beispiel> Hallo! <P> Ich bin ein HTML5-Dokument
  • Minimiertes HTML Start-Tags teilweise optional, z. B.: <html> <head> <body> End-Tags optional
  • Kompakte Schreibweise <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> wird zu <meta charset="utf-8"> oder <input type="checkbox" checked="checked" /> zu <input type="checkbox" checked>
  • Streichliste Frames Doctype-Varianten: Strict, Transitional, Frameset <acronym> ersetzt durch <abbr> <applet> ersetzt durch <object> … Auszeichnungen, Attribute: <center>, <font>, <strike>, <tt>, …, bgcolor, align
  • Semantik: neue Elemente Anspruch wirklich semantischem HTML gerecht werden Behebung des „Überschriftenmangels“ differenziertere Strukturierung durch neue Elemente <section> Sinnabschnitte, z. B. Kapitel (mit Kopfbereich) <header> Sammlung einführender Inhalte (nicht nur im Kopfbereich) <footer> Pendant für den Fußbereich
  • Semantik: neue Elemente <nav> Navigationselemente, vorrangig Hauptnavigation (!) <aside> Ergänzung zum das Element umgebenden Inhalt, z. B. Seitenspalte <article> geschlossene Inhalte, z. B. Newsmeldungen, Blog- und Forenposts
  • Semantik: Überschriften <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> nun: <h1>Überschrift 1</h1> <section> <h1>Überschrift 2</h1> <section> <h1>Überschrift 3</h1> </section> </section>
  • <header> <hgroup> <h1>Ein HTML5-Blog</h1> <h2>Ein weiteres tolles Blog über HTML5</h2> </hgroup> </header> <nav> Navigation, Navigation, Navigation </nav> <section> <article> <h1>Ein toller Beitrag über HTML5!</h1> <p>Text…</p> <aside class="metainformationen"> <p>Geschrieben von Admin</p> </aside> </article> <article> <h1>Ein älterer Beitrag über HTML5!</h1> <p>Text…</p> <aside class="metainformationen"> <p>Geschrieben von Admin</p> </aside> </article> </section> <aside> <h1>Sidebar</h1> <section> <h1>Tagcloud</h1> <p>Tags Tags Tags</p> </section> <section> <h1>Blogroll</h1> <p>Link Link Link</p> </section> </aside> <footer> <p>Footer Footer Footer</p> </footer>
  • Semantik: Überschriften <section> <hgroup> <h1>And this a subsection!</h1> <h2>Tim Berners-Lee</h2> <h3>W3C</h3> </hgroup> </section> semantische Struktur testen: HTML5 Outliner
  • Formulare: neue Input-Elemente <input type="…"> search, telephone, url, email, number, datetime-local, datetime, date, month, week, time, range, color
  • automatische Anpassung des Tastaturlayouts des iPhones bei <input type=„telephone"> <input type=„email">
  • Formulare: Auto-Vervollständigung <input type="text" autocomplete="on" list="farben" id="farbe"> <datalist id="farben"> <option value="Rot"> <option value="Grün"> <option value="Blau"> </datalist> Beispiel
  • Formulare: Validierung Pflichtfeld <input type="text" name="test" required> Feldtyp-Prüfung eigene Validierungsnachrichten
  • Geolocation Positionsbestimmung auch offline möglich (z. B. GPS-Gerät des Smartphones) verschiedene Quellen zur Positionsbestimmung: nahegelegene WLAN- Zugangspunkte, IP-Adresse, Google Location Services dauerhafte Überwachung nur mit Mobilgeräten möglich
  • Geolocation Erweiterung des window.navigator-Objekts um das geolocation-Objekt Funktionen: getCurrentPosition() watchPosition() clearWatch() Rückgabe-Objekt: Zeitstempel und Koordinaten Beispiel
  • Offline-Webanwendungen Gewährleistung vollständiger Offline-Tauglichkeit von Anwendungen Cachen von Bildern, Skripten, … Zwischenspeicherung von Aktionen, z. B. neuer Datenbankeintrag Überbrückung von Netzabbrüchen oder -engpässen unabhängig vom Browser-Cache
  • Offline: Application Cache Cache Manifest beschreibt die Ressourcen (Bilder, Skripte, HTML, …), die der Browser vorrätig halten muss CACHE MANIFEST about.html offline.html NETWORK blog.html FALLBACK / offline.html
  • Offline: Application Cache Einbindung des Manifests in die Webseite mit <html manifest="cache-manifest.manifest"> applicationCache-Objekt als Speicher Logging möglich durch applicationCache-Events: checking noupdate downloading progress cached obsolete error
  • Offline: DOM Storage „Supercookie“ Speicherung beliebiger Name-Wert-Paare im Browser Zwischenspeicherung der Änderungen im Offline-Zustand mehr Kapazität und Lebensdauer als Cookies
  • Offline: DOM Storage zwei Objekt-Typen: sessionStorage (an Browser-Sitzung gebunden, max. 5 MB) localStorage (5 – 10 MB) deren Funktionen: length key() getItem() setItem() removeItem() clear()
  • Multimedia <audio> <video> Medieninhalte ohne Erweiterungen abspielbar machen Player werden vom Browser gestellt Gestaltung per CSS Verbindung mit <canvas> möglich Steuerung per JavaScript
  • Multimedia: Video <video src="trailer_400p.ogg" width="720" height="400" controls autoplay loop poster="trailer_400p.gif"> <a href="trailer_400p.ogg">Trailer herunterladen</a> </video> Attribute: controls (boolean) autoplay (boolean) preload loop (boolean) poster
  • Multimedia: Video – Media Queries, Typ <video> <source src="trailer_iphone.m4v" media="handheld"> <source src="trailer_400p.ogg" media="all"> </video> <video> <source src="trailer_400p.mp4" type="video/mp4"> <source src="trailer_400p.ogg" type="video/ogg"> </video>
  • Multimedia: Video – Codecs H.264 Ogg Theora VP8 (WebM) VP9 (WebM) Firefox FF21+ Win 7+ 28+ IE 6 – 8 – – – – IE 9+ – – – Chrome – 29+ Safari – – – Opera nur Mobil nur Desktop nur Mobil wikipedia.org: Browser support
  • Multimedia: ältere Browser Ersetzung der HTML5-Tags per JavaScript durch Flash-Player: Flowplayer Flash Fallback HTML5 Videoplayer basierend auf JavaScript: Projekktor jPlayer: HTML5 Audio & Video for jQuery
  • Multimedia: Video – Steuerung play() pause() muted volume error networkState z. B. NETWORK_LOADING readyState z. B. HAVE_ENOUGH-DATA
  • Multimedia: Video – Steuerung Events: loadstart loadedmetadata canplay canplaythrough play ended
  • Die Software „HandBrake“ zur Formatwandlung von Videos mit diversen Voreinstellungen für verschiedene Geräte
  • Drag & Drop statt Grafiken und Texte können auch komplexe Datensätze übertragen werden bestehende Bibliotheken jQuery, MooTools sind komfortabler Vorteil: standardisierte Schnittstelle Browser und Applikationen werden interoperabel aber: geringe Erwartung des Benutzers aber: schlechte Browserunterstützung
  • Drag & Drop: HTML HTML-Attribut: draggable dataTransfer-Objekt speichert Operationen und Daten dataTransfer.setData() Feedback-Bild oder -Element: dataTransfer.setDragImage() dataTransfer.addElement()
  • Drag & Drop: Events Events für Elemente: dragstart Beginn der D & D-Operation dragend Ende der D & D-Operation drag Events für Ziele: dragenter dragleave dragover drop
  • Canvas-Element „Leinwand“ Möglichkeit zur Erzeugung von dynamischen Bitmap-Grafiken quasi programmierbares <img>-Element per CSS formatierbar nur gute Unterstützung gängiger Browser aber: Barrierefreiheit nicht gewährleistet
  • Canvas-Element <canvas width="480" height="280"> Ihr Browser kann die Grafik leider nicht darstellen. </canvas> Rendering Context als Schnittstelle context = canvas.getContext('2d') context.fillStyle = 'rgb(255, 0, 0)' context.fillRect(20, 40, 240, 160)
  • Canvas: Formen Rechtecke: clearRect() Bereiche löschen strokeRect() Rahmen zeichnen mit Linienstilen Linien und Pfade: beginPath() closePath() Pfad abschließen moveTo() Startpunkt für Linie setzen lineTo() Linie zum Punkt zeichnen stroke() Zeichnen des Pfads
  • Canvas: Text font = "italic 800 32px/2 Georgia" fillText() strokeText() textAlign() wie CSS auch relative Größen em oder % einsetzbar
  • Canvas: Transformationen Zeichenfläche rotieren, verschieben, verzerren translate() Ursprung verschieben rotate() Drehung scale() Skalierung
  • Canvas: Formen arc() Kreise: X-, Y-Koordinate, Radius, Startwinkel, Endwinkel arcTo() Pfade sind füllbar (!) fill() fillStyle() Farbwert wie CSS: RGB(A), HSLA
  • Canvas: Beispiele Green Screen Sketchpad 9elements.com Metronom aus c’t 11/2011, S. 180 ff. NES-Emulator Diagramm-Bibliothek
  • HTML5: Best Practice Spezifikationen beachten Tags semantisch prüfen Testen, Testen, Testen graceful degradation, progressive enhancement
  • Quellen HTML5Rocks Dive Into HTML5 Think Vitamin HTML5 <html>5 Gallery Chrome Experiments
  • Literatur Magazin c’t: Linkliste 2009 Magazin c’t: empfehlenswerte Artikel in Ausgabe 11/2011, S. 140 ff.: Warum HTML5 ein großer Wurf ist HTML5-Video in der Praxis Frameworks und Bibliotheken erleichtern den Umgang…
  • Literatur HTML5. Webseiten innovativ und zukunftssicher. 2. Aufl. München: Open Source Press, 2011 Münz, Stefan/Gull, Clemens: HTML 5 Handbuch. München: Franzis, 2011 Sharp, Remy/Lawson, Bruce: HTML5. München: Addison-Wesley, 2011 Pilgrim, Mark: Durchstarten mit HTML5
  • Ausblick HTML11
  • Vielen Dank. Niklas Kanthak Diplom-Designer niklas.kanthak@online.de http://www.xing.com/profile/Niklas_Kanthak