Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | karionis |
View: | 2,604 times |
Download: | 0 times |
HTML5 im Überblick semantisches HTML
Geolocation Offline-Webanwendungen
Multimedia Drag & Drop Canvas-Element
Vortrag von Niklas Kanthak
am 25.11.2014 an der VHS Düsseldorf
Semester 14/2 –
Veranstaltung I356340
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: „Recommendation“
seit 28.10.2014
HTML 5.1: „Working
Draft“
W3C:
„Snapshot“WHATWG:
„HTML Living
Standard“
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>
Semantik: neue Elemente
<main>
Hauptinhalt (nicht semantisch –
nur gruppierend)
<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
<section>Sinnabschnitte, z. B. Kapitel (mit Kopfbereich)
<article> geschlossene Inhalte, z. B. Newsmeldungen, Blog-
und Forenposts
<header><h1>Ein HTML5-Blog</h1><h2>Ein weiteres tolles Blog
über HTML5</h2></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>
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.htmloffline.html
NETWORKblog.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:checkingnoupdatedownloadingprogresscachedobsoleteerror
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:lengthkey()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)preloadloop
(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
Tags nachrüsten für ältere Browser: html5media
HTML5 Videoplayer
basierend auf JavaScript: Projekktor
jPlayer: HTML5 Audio & Video for
jQuery
Multimedia: Video
–
Steuerung
play()pause()mutedvolumeerrornetworkState
z. B. NETWORK_LOADING
readyState
z. B. HAVE_ENOUGH-DATA
Multimedia: Video
–
Steuerung
Events:loadstartloadedmetadatacanplaycanplaythroughplayended
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
draggable
als HTML-Attribut macht Element „greifbar“
dataTransfer-Objekt speichert Operationen und Daten
dataTransfer.setData()
Drag & Drop: Events
Events für Elemente:dragstart
Beginn der D & D-Operation
dragend
Ende der D & D-Operationdrag
Events für Ziele:dragenterdragleavedragoverdrop
Canvas-Element
Erzeugung von dynamischen Bitmap-Grafiken
quasi programmierbares <img>-Element
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 Schnittstellecontext
= 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ßenmoveTo() Startpunkt für Linie setzenlineTo() Linie zum Punkt zeichnenstroke() 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, EndwinkelarcTo()
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 istHTML5-Video in der PraxisFrameworks 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
Vielen Dank.
Niklas Kanthak Diplom-Designer
[email protected] http://www.xing.com/profile/Niklas_Kanthak