webengineering - dhbw stuttgartvilas/webeng-ii/webeng_html… · html5 - features 13 /-attribute:...
TRANSCRIPT
Marcel Vilas DHBW - Stuttgart
Webengineering
1
HTML5 & CSS3
1Dienstag, 16. Juli 13
HTML5 - Rückblick
2
• Web 2.0, Rich Internet Applications (RAIs) und Semantic Web haben HTML, CSS und JavaScript über Ihre Grenzen getrieben
• Vieles (z.B. Abspielen multimedialer Inhalte, grafische oder interaktive Webseiten) muss über externe Plug-ins, wie Adobe Flash, realisiert werden
• Die Schwachstellen von HTML machten sich andere Technologien zu nutze:
‣ Adobe Flex
‣ Microsoft Silverlight
‣ Java FX
2Dienstag, 16. Juli 13
HTML5 - Idee
3
• HTML5 geht viele der bisherigen Schwachstellen von HTML an
• RAI können allein mit HTML, CSS und JavaScript gebildet werden
• Es bietet vollen Support an für:
‣ Integrieren multimedialer Inhalte
‣ Lokales Speichern von Daten
‣ Offline arbeiten
‣ Native 2D Drawing-API
‣ Application Development-API
• Native HTML Unterstützung (ohne JavaScript) für triviale Anwendungen, wie Drag&Drop, row stripping, u.s.w.
3Dienstag, 16. Juli 13
HTML5 - Features
4
Semantische HTML-Elemente:
• Geben den einzelnen Abschnitten der Webseite eine Bedeutung
• Bisherige Lösung: <div>/<span>-Elemente, die mit einer besonderen id oder class gekennzeichnet wurden
• Problem: Semantische Intepretation durch Browser bisher nicht möglich, da keine speziellen Regeln für die Vergabe von id oder class definiert sind
• Die semantischen HTML-Elemente in HTML5 verhalten sich optisch genau wie <div> /<span>-Elemente, können jedoch vom Browser interpretiert werden
4Dienstag, 16. Juli 13
HTML5 - Features
5
Semantische HTML-Elemente für Text:
mark
time
Markiert ein Wort oder einen Satz und hebt dieses hervor (z.B. bei einer Suche)
Definiert temporäre Informationen, wie Uhrzeit oder Datum
meter
progress
Definiert Anteile, Messwerte oder Zahlenspannen mit den Attributen (value, min, max, low, high, optimum)
Stellt den Fortschritt einer bestimmten Aktion mithilfe einer Balkens an.
5Dienstag, 16. Juli 13
HTML5 - Features
6
Semantische HTML-Elemente für Dokumentstruktur:
header
footer
Definiert einen Kopfbereich für die komplette Seite, einen Artikel oder einen Abschnitt
Definiert einen Fußbereich für die komplette Seite, einen Artikel oder einen Abschnitt
nav
article
Definiert den Bereich für die Navigation der Webseite
Definiert einen unabhängigen Bereich auf der Webseite, der auch alleine stehen könnte (z.B. Blogs, News, Comments)
6Dienstag, 16. Juli 13
HTML5 - Features
7
Struktur-semantische HTML-Elemente:
section
aside
Definiert einen Abschnitt eines Dokuments, Artikels, Tutorials, ... und besitzt typischerweise einen Header
Definiert einen Bereich für Informationen und Links, die mit dem Hauptthema der Seite nichts oder wenig zu tun hat (z.B. Werbung)
hgroup Gruppiert mehrere Kopfzeilen, z.B. eine Überschrift (h1) gefolgt von einer Unterüberschrift (h2)
7Dienstag, 16. Juli 13
HTML5 - Features
8
Das <canvas>-Element:
• Ursprünglich von Apple für das Dashboard in Mac OS X eingeführt, später durch Mozilla und Opera übernommen und nun in HTML5 standardisiert
• Erlaubt das Erzeugen von Grafiken, Zeichnungen, interaktiven Spielen ohne Adobe Flash
• Das Ansprechen der Canvas funktioniert über JavaScript-APIs
• Events (Maus, Tastatur) können für die Interaktion mit dem Benutzer genutzt werden
• Für viele als wichtigstes Feature von HTML5 bezeichnet
8Dienstag, 16. Juli 13
HTML5 - Features
9
Das <canvas>-Element:• Ursprünglich von Apple für das Dashboard in Mac OS X
eingeführt, später durch Mozilla und Opera übernommen und nun in HTML5 standardisiert
• Erlaubt das Erzeugen von Grafiken, Zeichnungen, interaktiven Spielen ohne Adobe Flash
• Das Ansprechen der Canvas funktioniert über JavaScript-APIs
• Events (Maus, Tastatur) können für die Interaktion mit dem Benutzer genutzt werden
• Für viele als wichtigstes Feature von HTML5 bezeichnet
• Attribute: id, width, height
9Dienstag, 16. Juli 13
HTML5 - Features
10
Das <canvas>-Element:
<head><script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75);</script></head><body> <canvas id="myCanvas" width="200" height="100"> <p>Ihr Browser kann kein HTML5!</p> </canvas></body>
10Dienstag, 16. Juli 13
HTML5 - Features
11
Multimediale Inhalte (<audio>-/<video>-Elemente):
• Da das Web ursprünglich nicht für Video- & Audiostreaming gedacht war, wurde diese Funktion von Plug-ins, wie Adobe Flash übernommen
• HTML5 bietet für diese Funktionen 2 neue Elemente
‣ <audio>: Einbindung einer Audiodatei
‣ <video>: Einbindung einer Videodatei
• Browser bieten automatisch Playback- & Kontroll-Buttons
• Über JavaScript-APIs können diese Buttons verändert werden und eigene Buttons definiert werden
11Dienstag, 16. Juli 13
HTML5 - Features
12
Multimediale Inhalte (<audio>-/<video>-Elemente):
• Welche Codecs unterstützt werden, hängt von den Browsern ab, wobei diese die Codecs lizensieren müssen
‣ Opera, Mozilla: VP8/Theora + Vorbis (Open Source)
‣ Apple, Google: H.264 + AAC (Lizenzpflichtig, bessere Qualität)
• Deshalb sollte der Multimedia-Content in verschiedene Formate zur Verfügung gestellt werden und eventuell Flash als Fallback-Lösung
MP4 WebM Vorbis
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES
12Dienstag, 16. Juli 13
HTML5 - Features
13
<video>/<audio>-Attribute:
autoplay
controls
height
Definiert, ob der Inhalt gleich nach dem Laden der Seite abgespielt wird
Definiert, ob die Kontroll-Buttons angezeigt werden sollen
Setzt die Höche des Video-Players (nur <video>)
loop
muted
Definiert, ob der Inhalt in einer Schleife abgespielt werden soll
Definiert, ob die Lautstärke auf lautlos gesetzt wird (nur <video>)
poster
src
Definiert ein Bild, das während des Ladens angezeigt wird (nur <video>)
Definiert die Quelle des Multimedia-Inhalts als URL
width Setzt die Breite des Video-Players (nur <video>)
13Dienstag, 16. Juli 13
HTML5 - Features
14
Multimediale Inhalte (Beispiel):
<body> <video id="myvideo" controls autoplay> <source src="extracting.m4v" type="video/mp4" /> <source src="extracting.mp4" type="video/mp4" /> <source src="extracting.ogg" type="video/ogg" /> <p>Ihr Browser kann kein HTML5!</p> </video> <audio id="myaudio" controls> <source src="media/song.m4a" type="audio/x-aac" /> <source src="media/song.mp3" type="audio/mpeg" /> <source src="media/song.ogg" type="audio/ogg" /> <p>Ihr Browser kann kein HTML5!</p> </audio></body></html>
14Dienstag, 16. Juli 13
HTML5 - Features
15
Lokale Speicherung:
• Bisher wurde lokale Speicherung von Informationen über Cookies realisiert. Probleme:
‣ max. 20 Cookies pro Webseite erlaubt
‣ max. 4KB pro Cookie erlaubt
‣ Verschwendung von Ressourcen (Versand bei jedem Request)
15Dienstag, 16. Juli 13
HTML5 - Features
16
Lokale Speicherung:
• HTML5 stellt LocalStorage-APIs zur Verfügung. Funktionen:
‣ Informationen können auf der lokalen Maschine gespeichert werden
‣ Informationen können gezielt abgefragt werden auch nach dem Laden der Seite (Daten müssen nicht an jeden Request angehängt werden)
‣ Sicherheit: Fremde Server können Daten nicht lesen oder schreiben
‣ Menge der Daten, die gespeichert werden kann ist browserspezifisch (mehrere MB)
16Dienstag, 16. Juli 13
HTML5 - Features
17
Lokale Speicherung:
• In HTML5 wurden 3 Methoden zur lokalen Speicherung spezifiziert:
‣ Local storage (Daten werden nicht gelöscht)
‣ Session storage (Daten werden nach dem Beenden des Browsers gelöscht)
‣ Web SQL Database (Spezifikation ist erstmal auf Eis gelegt)
17Dienstag, 16. Juli 13
HTML5 - Features
18
Lokale Speicherung (Local Storage):localStorage.setItem(string k, string v);
• Speichert den Wert v unter dem angegebenen Schlüssel k ab
localStorage.getItem(string k);
• Gibt den Wert zu dem angegebenen Schlüssel zurück oder undefined.
localStorage.removeItem(string k);
• Entfernt einen Datensatz aus dem Local storage. Keine Wiederherstellung.
localStorage.clear();
• Löscht alle Daten im lokalen Speicher.
18Dienstag, 16. Juli 13
HTML5 - Features
19
Lokale Speicherung (Session Storage):sessionStorage.setItem(string k, string v);
• Speichert den Wert v unter dem angegebenen Schlüssel k ab
sessionStorage.getItem(string k);
• Gibt den Wert zu dem angegebenen Schlüssel zurück oder undefined.
sessionStorage.removeItem(string k);
• Entfernt einen Datensatz aus dem Local storage. Keine Wiederherstellung.
sessionStorage.clear();
• Löscht alle Daten im lokalen Speicher.
19Dienstag, 16. Juli 13
HTML5 - Features
20
Offline Applikationen:
• Bisher gab es nur einen Browsercache zur Anzeige statischer Webseiten im offline-Modus
• HTML5 erlaubt dem Browser das Laden aller Dateien, damit die Seite auch im offline-Modus funktioniert
• Alle vorgenommenen Änderungen können hochgeladen werden, sobald wieder eine Internet-Verbindung besteht
20Dienstag, 16. Juli 13
HTML5 - Features
21
Offline Applikationen (Minifest):CACHE MANIFEST# Version 2
CACHE:# Explicitly cached itemsindex.htmlstyle.cssimages/logo.png
NETWORK:# Ressources available only onlinelogin.php/apihttp://code.jquery.com/jquery-latest.min.js
FALLBACK:/main.php /static.php*.html /offline.html
21Dienstag, 16. Juli 13
HTML5 - Features
22
Offline Applikationen (Beispiel):
<!DOCTYPE html><html manifest="/offline.manifest"><head></head><body></body></html>
AddType text/cache-manifest .manifest
• Manifest-Datei muss unter .htaccess definiert werden!
• Dokument, das eine Manifest-Datei benutzt.
22Dienstag, 16. Juli 13
HTML5 - Features
23
Formulare:
• Die Anwendung von Formularen hat sich im Laufe der Zeit auch in Richtung der Übermittlung von Anwendungsdaten entwickelt
• Webentwickler benötigen oftmals speziellere Eingabeelemente, wie Slider, Datumsauswahl, Farbauswahl ...
• Bisher konnten solche Elemente nur über JavaScript oder andere Frameworks, wie Adobe Flex, MS Silverlight oder Java FX erzeugt werden
• HTML5 bietet für diese Funktionen 2 neue Elemente bietet einige neue Formularelemente, die diese Lücken füllen
23Dienstag, 16. Juli 13
HTML5 - Features
24
Formulare <input>-Typen:
color
date
datetime
Auswahl einer Farbe (browserspezifisch: Farbauswahlfenster)
Auswahl eines Datums (2012-07-12)
Auswahl eines Datums und Zeit mit Zeitzone (2012-07-12T11:30Z)
datetime-local
Auswahl eines Datums und lokaler Zeit (2012-07-12T11:30)
Eingabefeld für Emails
month
number
Auswahl eines Monats (2012-07)
Auswahl einer Zahl (Attribute: max, min, step, value)
24Dienstag, 16. Juli 13
HTML5 - Features
25
Formulare <input>-Typen:
range
search
tel
Auswahl einer Zahl mit Slider (Attribute: max, min, step, value)
Textfeld für die Suche (browserspezifisch: optische Unterscheidung)
Eingabefeld für Telefonnummern
time
url
Auswahl einer Zeit (11:30)
Eingabefeld für URLs
week Auswahl einer Woche (2012-W29)
25Dienstag, 16. Juli 13
HTML5 - Features
26
Formulare - Features:
• Autofokus-Attribut:
‣ Fokussiert auf ein bestimmtes Element nach dem Laden der Webseite (ohne JavaScript)
‣ <input name="q" type="text" autofocus="autofocus">
• Placeholder-Attribut:
‣ Erlaubt die Anzeige von Fülltext bei einem textbasierten Eingabefeld ohne Wert
‣ <input name="q" type="search" placeholder="Suche ...">
26Dienstag, 16. Juli 13
HTML5 - Features
27
Web worker:
• Erlaubt die Ausführung von JavaScript-Code als Hintergrund-Prozess
• Erlaubt die Verwendung von multi-threading in der Anwendung
• Vorteil: Komplexe Berechnungen können im Hintergrund ausgeführt werden, ohne dass die Geschwindigkeit der Benutzeroberfläche beeinflusst wird
27Dienstag, 16. Juli 13
HTML5 - Features
28
Geolocation:
• Erlaubt der Anwendung die aktuelle geografische Position des Benutzers zu ermitteln
• Funktioniert nur mit Geräten, die diese Funktionalität unterstützen (z.B. Smartphones mit GPS)
• Optional kann man durch ein Plugin auch in Firefox die Position manuell definieren
28Dienstag, 16. Juli 13
HTML5 - Features
29
Geolocation (Beispiel):if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error);} else { alert("Not supported!");}// the success callbackfunction success(position) { console.log(position.coords.latitude); console.log(position.coords.longitude);}// the error callbackfunction error(msg) { console.log(typeof msg == 'string' ? msg : "error");}
// Track changing user positionvar watchId = navigator.geolocation.watchPosition( function(position) { success(position); })// Stop tracking user positionnavigator.geolocation.clearWatch(watchId);
29Dienstag, 16. Juli 13
HTML5 - Features
30
Drag & Drop:
• HTML5 beinhaltet eine Drag&Drop-API
• Bisher musste dies über Plug-ins, komplexes JavaScript oder über JavaScript libraries (wie jQuery) realisiert werden
• Realisierung über HTML-Attribut draggable und verschiedenen neuen Eventhandlern (dragstart, drag, dragenter, dragleave, dragover, drop, dragend), die über JavaScript bestimmte Aktionen ausführen
30Dienstag, 16. Juli 13
HTML5 - Features
31
Cross-document messaging:
• Erlaubt es Dokumenten, die in verschiedenen Fenstern/Frames geöffnet sind, Nachrichten auszutauschen
• Eine sinnvolle Anwendung wäre die Kommunikation zu widges und Applikationen, die auf anderen Servern gehostet werden (wie z.B. Facebook Apps)
31Dienstag, 16. Juli 13
HTML5 - Features
32
Und viel viel mehr ...
• Neue MIME-Typen
• Protocol handler registration (zuweisen einer bestimmten Webapplikation als Standardapplikation für ein bestimmtes Dateiformat oder Protokoll)
• Browser history management (bisher manuell oder über externes JavaScript framework)
32Dienstag, 16. Juli 13
CSS3 - Überblick
33
• CSS3 bietet viele neue Selektoren (unter anderem structural, state-
based, negation pseudo-classes)
• CSS3 bietet viele neue Effekte, die bisher nur durch Bilder dargestellt werden konnten (GIF, JPG, PNG)
‣ Schatten für Texte
‣ Abgerundete Rahmen
‣ Transparenz
• CSS3 ermöglicht mehrspaltige Designs (Text geht über mehrere Spalten, wie bei Zeitungen)
• Benutzung von importierten Schriftstilen
• CSS3 bietet neue Farbmodelle (wie HSL und RGBA)
33Dienstag, 16. Juli 13
CSS3 - Features
34
Selektoren:
div
.highlight
#mydiv
Auswahl aller <div>-Elemente
Auswahl der Elemente mit der Klasse "highlight"
Auswahl des Elements mit der ID "mydiv"
div.highlight
input[type="text"]
Auswahl aller <div>-Elemente mit der Klasse "highlight"
Komplexere Selektoren mit Bezug auf Attributwerte
a:hover Pseudoklassen
34Dienstag, 16. Juli 13
CSS3 - Features
35
Attribut-Selektoren:Definition: Element[atr^="value"] { Eigenschaft : Wert ; }
Bespiel: input[value^="Java"] { color: red; font-style: normal;}
Definition: Element[atr$="value"] { Eigenschaft : Wert ; }
Bespiel: input[value$="script"] { color: red; font-style: normal;}
Definition: Element[atr*="value"] { Eigenschaft : Wert ; }
Beispiel: input[value*="-"] { color: red; font-style: normal;}
• Selektiert alle Elemente, deren Attribut mit dem Wert beginnen
• Selektiert alle Elemente, deren Attribut mit dem Wert enden
• Selektiert alle Elemente, deren Attribut den Wert enthalten
35Dienstag, 16. Juli 13
CSS3 - Features
36
Pseudoklassen-Selektoren:
Definition: Element:<class> { Eigenschaft : Wert ; }
Bespiel: ul:last-child { font-weight: bold;}
• Selektiert alle Elemente, die einer bestimmten Pseudoklasse entsprechen
• Entsprechende Pseudoklasse wird nach dem Doppelpunkt definiert
• Es wird dabei unter 4 neuen Pseudoklassen unterschieden:
• structural: Navigation
• target: Ziel-Element der referenzierenden URL
• ui element states: Benutzerdefinierter Status eines Elements
• negation: Umkehrung eines Selektors
36Dienstag, 16. Juli 13
CSS3 - Features
37
Pseudoklassen-Selektoren (structural):
root
nth-child(n)
nth-last-child(n)
Selektiert das Rootelement des Dokuments (<html>-Element)
Selektiert das n-te Kindelement
Selektiert das n-te Kindelement vom Ende beginnend
nth-of-type(n)
nth-last-of-type(n)
Selektiert das n-te Element eines Typs
Selektiert das n-te Element eines Typs vom Ende beginnend
last-child Selektiert das letzte Kindelement
37Dienstag, 16. Juli 13
CSS3 - Features
38
Pseudoklassen-Selektoren (structural):
first-of-type
last-of-type
only-child
Selektiert das erste Element eines Typs
Selektiert das letzte Element eines Typs
Selektiert das einzige Kindelement
only-of-type
empty
Selektiert das einzige Element eines Typs
Selektiert alle Element, die keine Kinder besitzen (auch kein Text)
38Dienstag, 16. Juli 13
CSS3 - Features
39
Pseudoklassen-Selektoren (ui element states):
enabled
disabled
checked
Selektiert alle Form-Elemente die enabled sind
Selektiert alle Form-Elemente die disabled sind
Selektiert alle Form-Elemente die selektiert sind
Pseudoklassen-Selektoren (target):
target Selektiert das Ziel-Element eines Ankers (#)
Pseudoklassen-Selektoren (negation):
not(s) Selektiert alle Elemente, die nicht durch den Selektor s selektiert werden
39Dienstag, 16. Juli 13
CSS3 - Features
40
Genereller Nachbar-Selektor:
Definition: Element ~ Element { Eigenschaft : Wert ; }
Bespiel: a ~ span { color: blue;}
• Selektiert alle rechts spezifizierten Elemente aus, die einem links spezifizierten Element folgen
Auswahl: <p> <a>Dies</a> <span> ist</span> <i> wirres</i> <span> Zeug</span></p>
40Dienstag, 16. Juli 13
CSS3 - Features
41
Effekte:background Definiert den Hintergrund eines Elements
body { background: red repeat url('img.png') padding-box; }
• alle Werte können eingestellt werden (color, position, size, repeat, origin, clip, attachement, image)
background-clip Definiert wie weit der Hintergrund des HTML-Elements ausgefüllt wird
body { background-clip: content-box; }
background-origin Definiert den Bereich, an dem sich die Hintergrundgrafik ausrichtet
body { border-origin: border-box; }
41Dienstag, 16. Juli 13
CSS3 - Features
42
Effekte:background-size Definiert die Größe des Hintergrundbildes
body { background-size: 50%; }
• nummerische/prozentuale Angabe (oder auto/cover/contain)
border-radius Definiert den Radius der Rundung von den Ecken des Rahmens
div { border-radius: 10px 5px, 5px, 10px; }
border-image Definiert eine Rahmengrafik
div { border-image: url('bd.png') fill 50% 10px repeat; }
• Angaben sind: source, slice, width, outset, repeat
42Dienstag, 16. Juli 13
CSS3 - Features
43
Effekte:border-color Definiert
div { border-color: red green blue pink; }
• Angabe: oben, rechts, unten, links
box-shadow Definiert den Schatten eines HTML-Elements
div { box-shadow: 10px 5px 2px 10px red inset; }
• Werte: h-shadow, v-shadow, blur, spread, color, inset
43Dienstag, 16. Juli 13
CSS3 - Features
44
Effekte:opacity Definiert den Transparenzwert eines HTML-Elements
img { opacity: 0.75; }
• nummerische Angabe zwischen 0.0 (total transparent) und 1.0
resize Definiert wie das Element vom Benutzer verändert werden kann
div { resize: both; }
• Werte: none, both, horizontal, vertical
44Dienstag, 16. Juli 13
CSS3 - Features
45
Effekte:text-overflow Definiert was passiert, wenn der Text nicht in das Element passt
div { text-overflow: '[...]'; }
• Werte: clip, ellipsis, <string>
text-shadow Definiert
p { text-shadow: 10px 5px 2px blue; }
• Werte: h-shadow, v-shadow, blur, color
45Dienstag, 16. Juli 13
CSS3 - Features
46
Multicolumn layouts:
• Erlaubt es den Text über mehrere Spalten aufzuteilen, wie bei Zeitungsartikel bekannt
• Kann über die Eigenschaften column-width oder column-count definiert werden
• Wird hauptsächlich von Mozilla und Webkit Browsern unterstützt, die jedoch die Attribute mit den Präfixen -moz- und -webkit- implementiert haben
46Dienstag, 16. Juli 13
CSS3 - Features
47
Multicolumn layouts:column-width Definiert die Länge der Spalten
div { column-width: 50px; }
• nummerische Angabe (oder auto)
column-count Definiert die Anzahl der Spalten in einem HTML-Element
div { column-count: 5; }
column-gap Definiert den Abstand zwischen Spalten
div { column-gap: 10px; }
47Dienstag, 16. Juli 13
CSS3 - Features
48
Web fonts:
• Wurde eigentlich schon in CSS2 eingeführt jedoch nur vom IE implementiert, der nur .eot (Embedded Open Type) Fonts unterstützt
• Mit CSS3 werden mehr Formate unterstützt, wie:
‣ ttf (True Type)
‣ otf (Open Type)
• Unbedingt auf Rechte achten
@font-face { font-family: MyName; src: url('myLocation.ttf'); }p { font-family: MyName, Arial, Helvetica, sans-serif; }
48Dienstag, 16. Juli 13
HTML5/CSS3 - Aufgabe
49
1. Erstellen Sie ein Dokument das semantisch strukturiert ist und eine Überschrift mit farbigem Schatten hat.
2. Fügen Sie mehrere semantische textbasierte Inhalte ein (mark, progress, time).
3. Fügen Sie ein Formular ein, das verschiedene der neuen Elemente enthält (datetime, range, search) und einen Absendeknopf mit abgerundeten Ecken.
4. Fügen Sie ein Video-, oder Audio-Element in die Seite ein.
5. Fügen Sie eine Canvas ein und zeichnen Sie etwas auf Ihr.
49Dienstag, 16. Juli 13