SlideShare ist ein Scribd-Unternehmen logo
1 von 48
Downloaden Sie, um offline zu lesen
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.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
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element
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+9928+ 
IE 6 – 8 – – – – 
IE 9+9–– – 
Chrome – 9 9 29+ 
Safari9–– – 
Opera nur Mobil nur Desktop9nur 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() 
muted 
volume 
error 
networkState z. B. NETWORK_LOADING 
readyState z. B. HAVE_ENOUGH-DATA
Multimedia: Video – Steuerung 
Events: 
loadstart 
loadedmetadata 
canplay 
canplaythrough 
play 
ended
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
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-Operation 
drag 
Events für Ziele: 
dragenter 
dragleave 
dragover 
drop
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 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

Más contenido relacionado

Andere mochten auch

HTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und ProjektmanagerHTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und ProjektmanagerDaniel Haller
 
Webentwicklung mit PHP und MySQL
Webentwicklung mit PHP und MySQLWebentwicklung mit PHP und MySQL
Webentwicklung mit PHP und MySQLKerstin Puschke
 
HTML5 - The future of the Web!
HTML5 - The future of the Web!HTML5 - The future of the Web!
HTML5 - The future of the Web!Marcel Engelmann
 
2014 10-27 powerpoint-die wahl der feiglinge
2014 10-27 powerpoint-die wahl der feiglinge2014 10-27 powerpoint-die wahl der feiglinge
2014 10-27 powerpoint-die wahl der feiglingeStefan Kontschieder
 
Referentenansicht mit Powerpoint 2013
Referentenansicht mit Powerpoint 2013Referentenansicht mit Powerpoint 2013
Referentenansicht mit Powerpoint 2013Frank Hamm
 

Andere mochten auch (6)

HTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und ProjektmanagerHTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und Projektmanager
 
Webentwicklung mit PHP und MySQL
Webentwicklung mit PHP und MySQLWebentwicklung mit PHP und MySQL
Webentwicklung mit PHP und MySQL
 
HTML5 - The future of the Web!
HTML5 - The future of the Web!HTML5 - The future of the Web!
HTML5 - The future of the Web!
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 
2014 10-27 powerpoint-die wahl der feiglinge
2014 10-27 powerpoint-die wahl der feiglinge2014 10-27 powerpoint-die wahl der feiglinge
2014 10-27 powerpoint-die wahl der feiglinge
 
Referentenansicht mit Powerpoint 2013
Referentenansicht mit Powerpoint 2013Referentenansicht mit Powerpoint 2013
Referentenansicht mit Powerpoint 2013
 

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

HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Jürg Stuker
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestBastian Feder
 
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...Sinan Akalın
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site GeneratorsDietrichRordorf
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Eric Eggert
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzeRalf Lütke
 
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen UmfeldBarrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeldfelixnagel
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Eric Eggert
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkdie.agilen GmbH
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJohannes Hohenbichler
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Peter Müller
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 

Ähnlich wie HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element (20)

HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site Generators
 
PHP im High End
PHP im High EndPHP im High End
PHP im High End
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen UmfeldBarrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 

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

  • 1. 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
  • 2. 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
  • 3. 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“
  • 4. 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
  • 5. 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
  • 6. Minimiertes HTML Start-Tags teilweise optional, z. B.: <html> <head> <body> End-Tags optional
  • 7. 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>
  • 8. 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
  • 9. 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
  • 10. <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>
  • 11. Formulare: neue Input-Elemente <input type="…"> search, telephone, url, email, number, datetime-local, datetime, date, month, week, time, range, color
  • 12. automatische Anpassung des Tastaturlayouts des iPhones bei <input type=„telephone"> <input type=„email">
  • 13. 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
  • 14. Formulare: Validierung Pflichtfeld <input type="text" name="test" required> Feldtyp-Prüfung eigene Validierungsnachrichten
  • 15. 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
  • 16. Geolocation Erweiterung des window.navigator-Objekts um das geolocation-Objekt Funktionen: getCurrentPosition() watchPosition() clearWatch() Rückgabe-Objekt: Zeitstempel und Koordinaten Beispiel
  • 17. 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
  • 18. 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
  • 19. 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
  • 21. Offline: DOM Storage „Supercookie“ Speicherung beliebiger Name-Wert-Paare im Browser Zwischenspeicherung der Änderungen im Offline-Zustand mehr Kapazität und Lebensdauer als Cookies
  • 22. 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()
  • 23. Multimedia <audio> <video> Medieninhalte ohne Erweiterungen abspielbar machen Player werden vom Browser gestellt Gestaltung per CSS Verbindung mit <canvas> möglich Steuerung per JavaScript
  • 24. 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
  • 25. 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>
  • 26. Multimedia: Video – Codecs H.264 Ogg Theora VP8 (WebM) VP9 (WebM) Firefox FF21+ Win 7+9928+ IE 6 – 8 – – – – IE 9+9–– – Chrome – 9 9 29+ Safari9–– – Opera nur Mobil nur Desktop9nur Mobil wikipedia.org: Browser support
  • 27. Multimedia: ältere Browser Tags nachrüsten für ältere Browser: html5media HTML5 Videoplayer basierend auf JavaScript: Projekktor jPlayer: HTML5 Audio & Video for jQuery
  • 28. Multimedia: Video – Steuerung play() pause() muted volume error networkState z. B. NETWORK_LOADING readyState z. B. HAVE_ENOUGH-DATA
  • 29. Multimedia: Video – Steuerung Events: loadstart loadedmetadata canplay canplaythrough play ended
  • 32. Die Software „HandBrake“ zur Formatwandlung von Videos mit diversen Voreinstellungen für verschiedene Geräte
  • 33. 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
  • 34. Drag & Drop: HTML draggable als HTML-Attribut macht Element „greifbar“ dataTransfer-Objekt speichert Operationen und Daten dataTransfer.setData()
  • 35. 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
  • 36. Canvas-Element Erzeugung von dynamischen Bitmap-Grafiken quasi programmierbares <img>-Element nur gute Unterstützung gängiger Browser aber: Barrierefreiheit nicht gewährleistet
  • 37. 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)
  • 38. 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
  • 39. Canvas: Text font = "italic 800 32px/2 Georgia" fillText() strokeText() textAlign() wie CSS auch relative Größen em oder % einsetzbar
  • 40. Canvas: Transformationen Zeichenfläche rotieren, verschieben, verzerren translate() Ursprung verschieben rotate() Drehung scale() Skalierung
  • 41. Canvas: Formen arc() Kreise: X-, Y-Koordinate, Radius, Startwinkel, Endwinkel arcTo() Pfade sind füllbar (!) fill() fillStyle() Farbwert wie CSS: RGB(A), HSLA
  • 42. Canvas: Beispiele Green Screen Sketchpad 9elements.com Metronom aus c’t 11/2011, S. 180 ff. NES-Emulator Diagramm-Bibliothek
  • 43. HTML5: Best Practice Spezifikationen beachten Tags semantisch prüfen Testen, Testen, Testen graceful degradation, progressive enhancement
  • 44. Quellen HTML5Rocks Dive Into HTML5 Think Vitamin HTML5 <html>5 Gallery Chrome Experiments
  • 45. 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…
  • 46. 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
  • 48. Vielen Dank. Niklas Kanthak Diplom-Designer niklas.kanthak@online.de http://www.xing.com/profile/Niklas_Kanthak