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

HTML5 im Überblicksemantisches HTMLGeolocationOffline-WebanwendungenMultimediaDrag & DropCanvas-ElementVortrag von Niklas Kanthak am 10.9.2012an der VHS DüsseldorfSemester 12/2 – Veranstaltung E356225

Historie1999 HTML 4.01 Webstandard vom W3C2000 XHTML als Zäsur, Aufschluss zur Realität HTML 4.01 → XHTML 1 XHTML 2 = reines XML Browserhersteller wehren sich gegen XHTML2004 Gründung WHATWG2009 Auflösung der XHTML-Arbeitsgruppe W3C bildet HTML5-Team

Standard?Nachfolger von HTML 4 und XHTML 1bis jetzt nur „Working Draft“Einstufung als „Recommendation“ laut W3C: 2014 WHATWG: 2022Standardfixierung fraglich aufgrund der Einflussnahme derBrowserhersteller

Evolutionaus statischen Web-Seiten werden hochdynamischeWeb-ApplikationenBrowser = Instant Messenger, E-Mail-Client, …HTML5 als evolutionärer Ansatzkompatibel zu HTML 4 und XHTML 1HTML5 als Erweiterung der klassischen Möglichkeiten

Browsergute 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>-ElementKeeping up with HTML5 and browser support: HTML5RocksWhen Can I use… Compatibility tables for support of HTML5, CSS3,SVG and more in desktop and mobile browsersCheck your browser’s HTML5 and CSS3 capabilities: haz.io

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 HTMLStart-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>

StreichlisteFramesDoctype-Varianten: Strict, Transitional, Frameset<acronym> ersetzt durch <abbr><applet> ersetzt durch <object>…Auszeichnungen, Attribute:<center>, <font>, <strike>, <tt>, …, bgcolor, align

Links um Block-Elemente<a href="a.html"> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet.</p></a>

Datenspeicher für Elementedata-*-Attribute:<a href="http://twitter.com/share"data-count="horizontal" data-via="TYPO3Ruhr"data-text="Home" data-url="http://www.typo3-ruhr.org/"data-lang="de" data-related="TYPO3Ruhr">Name-Wert-Paare les- und schreibbar:element.datasetelement.dataset.[attr]

WYSIWYG und Rechtschreibung<p contenteditable="true" spellcheck="true"> Das <code>spellcheck</code>-Attribut sorgt für Rechtschreibprüfung.</p>

Semantik: neue ElementeAnspruch wirklich semantischem HTML gerecht werdenBehebung 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 <input type=„email">des iPhones bei<input type=„telephone">

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: ValidierungPflichtfeld<input type="text" name="test" required>Feldtyp-Prüfungeigene Validierungsnachrichten

GeolocationPositionsbestimmung auch offline möglich (z. B. GPS-Gerät desSmartphones)verschiedene Quellen zur Positionsbestimmung: nahegelegene WLAN-Zugangspunkte, IP-Adresse, Google Location Servicesdauerhafte Überwachung nur mit Mobilgeräten möglich

GeolocationErweiterung des window.navigator-Objekts um dasgeolocation-ObjektFunktionen: getCurrentPosition() watchPosition() clearWatch()Rückgabe-Objekt: Zeitstempel und KoordinatenBeispiel

Offline-WebanwendungenGewährleistung vollständiger Offline-Tauglichkeit von AnwendungenCachen von Bildern, Skripten, …Zwischenspeicherung von Aktionen, z. B. neuer DatenbankeintragÜberbrückung von Netzabbrüchen oder -engpässenunabhängig vom Browser-Cache

Offline: Application CacheCache Manifest beschreibt die Ressourcen (Bilder, Skripte, HTML, …),die der Browser vorrätig halten muss, z. B:CACHE MANIFESTabout.htmloffline.htmlNETWORKblog.htmlFALLBACK/ offline.html

Offline: Application CacheEinbindung des Manifests in die Webseite mit<html manifest="cache-manifest.manifest">applicationCache-Objekt als SpeicherLogging möglich durch applicationCache-Events: checking noupdate downloading progress cached obsolete error

Offline: DOM Storage„Supercookie“Speicherung beliebiger Name-Wert-Paare im BrowserZwischenspeicherung der Änderungen im Offline-Zustandmehr Kapazität und Lebensdauer als Cookies

Offline: DOM Storagezwei 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 machenPlayer werden vom Browser gestelltGestaltung per CSSVerbindung mit <canvas> möglichSteuerung 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 – CodecsDesktop-Browser: H.264 Ogg Theora WebM Firefox –IE 6 – 8 – – – IE 9 – –Chrome – Safari – – Opera –

Multimedia: ältere BrowserErsetzung der HTML5-Tags per JavaScript durch Flash-Player:Flowplayer Flash FallbackHTML5 Videoplayer basierend auf JavaScript: ProjekktorjPlayer: HTML5 Audio & Video for jQuery

Multimedia: Video – Steuerungplay()pause()mutedvolumeerrornetworkState z. B. NETWORK_LOADINGreadyState z. B. HAVE_ENOUGH-DATA

Multimedia: Video – SteuerungEvents: loadstart loadedmetadata canplay canplaythrough play ended

Die Software „HandBrake“ zur Formatwandlung von Videos mit diversen Voreinstellungen für verschiedene Geräte

Drag & Dropstatt Grafiken und Texte können auch komplexe Datensätzeübertragen werdenbestehende Bibliotheken jQuery, MooTools sind komfortablerVorteil: standardisierte SchnittstelleBrowser und Applikationen werden interoperabelaber: geringe Erwartung des Benutzersaber: schlechte Browserunterstützung

Drag & Drop: HTMLHTML-Attribut: draggabledataTransfer-Objekt speichert Operationen und DatendataTransfer.setData()Feedback-Bild oder -Element: dataTransfer.setDragImage() dataTransfer.addElement()

Drag & Drop: EventsEvents für Elemente: dragstart Beginn der D & D-Operation dragend Ende der D & D-Operation dragEvents für Ziele: dragenter dragleave dragover drop

Drag & Drop: Zielstandardmäßig ist das Ablegen für Elemente blockiertevent.preventDefault() löst Drop-Blockadeevent.target gibt gezogenes Element oder Zielelement an

Canvas-Element„Leinwand“Möglichkeit zur Erzeugung von dynamischen Bitmap-Grafikenquasi programmierbares <img>-Elementper CSS formatierbarnurgute Unterstützung gängiger Browseraber: Barrierefreiheit nicht gewährleistet

Canvas-Element<canvas width="480" height="280"> Ihr Browser kann die Grafik leider nicht darstellen.</canvas>Rendering Context als Schnittstellecontext = canvas.getContext(2d)context.fillStyle = rgb(255, 0, 0)context.fillRect(20, 40, 240, 160)

Canvas: FormenRechtecke:clearRect() Bereiche löschenstrokeRect() Rahmen zeichnen mit LinienstilenLinien und Pfade:beginPath()closePath() Pfad abschließenmoveTo() Startpunkt für Linie setzenlineTo() Linie zum Punkt zeichnenstroke() Zeichnen des Pfads

Canvas: Textfont = "italic 800 32px/2 Georgia"fillText()strokeText()textAlign()wie CSS auch relative Größen em oder % einsetzbar

Canvas: TransformationenZeichenfläche rotieren, verschieben, verzerrentranslate() Ursprung verschiebenrotate() Drehungscale() Skalierung

Canvas: Formenarc() Kreise: X-, Y-Koordinate, Radius, Startwinkel, EndwinkelarcTo()Pfade sind füllbar (!)fill()fillStyle() Farbwert wie CSS: RGB(A), HSLA

Canvas: BeispieleGreen ScreenSketchpad9elements.comMetronom aus c’t 11/2011, S. 180 ff.NES-EmulatorDiagramm-Bibliothek

HTML5: Best PracticeSpezifikationen beachtenTags semantisch prüfenTesten, Testen, Testengraceful degradation, progressive enhancement

QuellenHTML5RocksDive Into HTML5Think Vitamin HTML5<html>5 GalleryChrome Experiments

LiteraturMagazin c’t: Linkliste 2009Magazin 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: Bücher HTML5. Webseiten innovativ und zukunftssicher.2. Aufl. München: Open Source Press, 2011Münz, Stefan/Gull, Clemens: HTML 5 Handbuch. München: Franzis,2011Sharp, Remy/Lawson, Bruce: HTML5. München: Addison-Wesley, 2011Pilgrim, Mark: Durchstarten mit HTML5

AusblickHTML11

Vielen Dank.Niklas KanthakDiplom-Designerniklas.kanthak@online.dehttp://www.xing.com/profile/Niklas_Kanthak

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

by Karionis

Accessibility

Categories

Upload Details

Usage Rights

Statistics

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