Webengineering - DHBW Stuttgartvilas/webeng-II/WebEng_HTML… · HTML5 - Features 13 /-Attribute: autoplay controls height Deﬁniert, ob der Inhalt gleich

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


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.


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


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.


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)


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)


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


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


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>


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


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


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


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>


http://www.double.co.nz/video_test/transformers480.ogg

http://www.double.co.nz/video_test/transformers480.ogg

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)


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)


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)


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.


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.


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


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


http://code.jquery.com/jquery-latest.min.js

http://code.jquery.com/jquery-latest.min.js

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.


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


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

email

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)


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)


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 ...">


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


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


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);


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


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)


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)


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)


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


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


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


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


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)


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


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>


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; }


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


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


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


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


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


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; }


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; }


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.


Documents

Webengineering - DHBW Stuttgartvilas/webeng-II/WebEng_HTML… · HTML5 - Features 13 /-Attribute: autoplay controls height Deﬁniert, ob der Inhalt gleich