Embed Size (px)
DESCRIPTION
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.
Citation preview
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
![EIN SEMANTISCHES NETZ FÜR DIE SUCHE MIT DER DEWEY ...eprints.rclis.org/16249/1/beitrag_effenberger_ddc-versionierung.pdf · das Projekt DDC Deutsch [DDCDeutsch] durchgeführt, bei](https://img.pdfslide.org/doc/110x75/60cb27fdeac7904179229573/ein-semantisches-netz-foer-die-suche-mit-der-dewey-das-projekt-ddc-deutsch-ddcdeutsch.jpg)
