Fachbereich Automatisierung und Informatik

(1)

Fachbereich

Automatisierung und Informatik Wernigerode

„Entwicklung multimedialer Anwendungen“

Teil 1 und 2

Version:

• =Wurzel(1764)

• =Rest(45015;57)

• =GeoMittel(12;147)

• =HexinDez("2A")

Dipl. Inf., Dipl.-Ing. (FH) Michael Wilhelm Friedrichstraße 57 - 59

38855 Wernigerode

Raum: 2.202

Tel.: 03943/659-338 Fax: 03943/659-399

Email: mwilhelm@hs-harz.de Web: www.miwilhelm.de

(2)

Inhaltsverzeichnis

1 Einleitung ... 6

1.1 Lernziele 6

1.2 Neue Elemente 6

1.2.1 Semantische Tag‘s 7

1.2.2 Neue Formular-Elemente 7

2 Auszeichnungs-Tags / Semantische Elemente ... 10

2.1 Typografische Tags 10

2.2 Globale Attribute der typografische Tags 11

2.3 Events 11

2.4 Beispiele der typografischen Tags 12

2.5 Semantische Elemente 17

2.5.1 Summary / Details 19

2.5.2 Nav-Element 20

2.5.3 Progress-Element 22

2.5.4 Datum und Zeit-Elementen 24

2.6 Telefon, Url und EMail-Elemente 32

2.7 Search-Element 33

2.8 Color-Element 33

2.9 Number, Meter, Range-Elemente 34

2.10 Output-Element 35

2.11 Range-Element 36

2.12 Datalist-Element 37

2.13 Validierung 39

3 Multimedia (Audio, Video) ... 42

3.1 Videos 42

3.1.1 Tag video 43

3.1.2 Erstes Beispiel 46

3.1.3 Video mit allen separaten Schaltern 48

3.1.4 Track in Videos 48

3.1.5 Javascript und Tracks 49

3.2 Audio 52

3.2.1 Track in Tag <audio> 53

4 CSS3... 55

4.1 transition 56

4.2 Farbdefinitionen in CSS3-Styles 58

4.3 Transformation 60

4.3.1 Beispiel 1 60

4.3.2 Beispiel 2 61

4.3.3 Beispiel 3 (Video) 61

4.3.4 Beispiel 3 (Video) 63

4.3.5 Keyframes und Animation 64

4.3.6 Beispiel 1 65

4.3.7 Beispiel 2 66

4.3.8 Beispiel 3 67

4.3.9 Beispiel 4 67

4.3.10 Verläufe 69

4.3.11 Linear-Verläufe 70

4.3.12 Radial-Verläufe 71

5 SVG ... 73

5.1 SVG-Funktionen 74

5.1.1 line 74

5.1.2 rect 74

5.1.3 circle 76

5.1.4 ellipse 76

(3)

5.1.5 polygon 77

5.1.6 text 78

5.1.7 Farbverläufe 79

5.1.8 path 80

6 Canvas ... 82

6.1 Farben, Styles, Schatten 82

6.2 line 83

6.3 Rectangle 85

6.3.1 rect. vs. strokeRect 85

6.4 Circle 86

6.5 Arc 86

6.6 ellipse 88

6.7 text 89

6.8 bezierCurveTo 90

6.9 Draw an Image 92

7 Canvas und Games ... 94

7.1 Struktur eines HTML5-Games 94

7.2 Games-loop 95

7.3 Tastatur 95

7.3.1 Tastatur-Events eintragen 95

7.3.2 keyCode 95

7.3.3 charCode 96

7.3.4 Tastatur-Methoden 96

7.4 Maus 96

7.4.1 Maus-Events eintragen 96

7.4.2 Maus-Methoden 97

8 Arrays ... 98

8.1 Deklaration eines Array 98

8.2 Erzeugen eines eindimensionales Array 98

8.3 Erzeugen eines eindimensionales Array 98

8.4 Zugriff 98

8.5 Hinzufügen eines Elementes 98

8.6 Löschen eines Elementes 98

8.7 foreach-Schleife 98

8.8 Zufallserstellung 98

9 Objekte ... 100

9.1 Klassendeklaration 100

9.2 Attribute 100

9.3 Methoden 100

9.4 Statische Variable 100

9.5 Erzeugen einer Instanz 101

9.6 Beispiel 101

9.6.1 Deklaration 101

9.6.2 Anwendung 102

10 Best Canvas Beispiele ... 103

10.1 Particles 103

10.2 30000 Particles 106

11 Literatur ... 110

11.1 Allgemeine Literatur 110

12 Beispiele und Links ... 110 13 Indexverzeichnis ... 111

(4)

Abbildungsverzeichnis

Abbildung 1Neue Formualarelemente, 1. Beispiel 8

Abbildung 2Neue Formualarelemente, 2. Beispiel 9

Abbildung 3Beispiel: abbr 13

Abbildung 4Beispiel: b / i / em / strong 13

Abbildung 5Beispiel: bdi / bdo 14

Abbildung 6Beispiel: cite, code, dfn 14

Abbildung 7Beispiel: kbd 14

Abbildung 8Beispiel: mark 15

Abbildung 9Beispiel: samp 15

Abbildung 10 Beispiel: u 16

Abbildung 11 Beispiel: var 16

Abbildung 12 Beispiel: wbr, 1. Bild 16

Abbildung 13 Beispiel: wbr, 2. Bild 16

Abbildung 14 Anzeige der semantischen Bereiche 17

Abbildung 15 Anzeige der semantischen Bereiche 18

Abbildung 16 Details mittels Java-Skript 18

Abbildung 17 Details mittels Java-Skript 19

Abbildung 18 Details mittels ohne Java-Skript, HTML5 <details> 20

Abbildung 19 Brotkrümelnavigation 21

Abbildung 20 Beispiel eines nav-Elementes 21

Abbildung 21 Beispiel eines progress-Elementes 22

Abbildung 22 Beispiel eines progress-Elementes in Firefox und IExplorer 23

Abbildung 23 Beispiele mit den Datums- und Zeit-Elementen 24

Abbildung 24 Beispiele mit den Datums- und Zeit-Elementen (aufgeklappt) 24

Abbildung 25 Beispiele mit den Zeit-Element 25

Abbildung 26 Beispiele mit den Datums- und Zeit-Elementen und Java-Skript 25

Abbildung 27 Aufbau der Plausibilität mittels Java-Skript 26

Abbildung 28 HTML-Seite mit Telefon, URL und EMail-Elememnten 32

Abbildung 29 Search-Element 33

Abbildung 30 Color-Element 33

Abbildung 31 Number, Meter und Range-Elemente 34

Abbildung 32 Number, Meter und Range-Elemente im IExplorer 34

Abbildung 33 Output-Element 35

Abbildung 34 Beispiel eines Output--Elementes 36

Abbildung 35 Range-Element mit Labelfeld 36

Abbildung 36 Datalist-Element 37

Abbildung 37 Datalist-Element mit day-Tag 38

Abbildung 38 Datalist-Element mit week-Tag 38

Abbildung 39 Datalist-Element mit year-Tag 38

Abbildung 40 Datalist-Element mit datetime-Tag 39

Abbildung 41 Datalist-Element mit time-Tag 39

Abbildung 42 Texct-Formular mit Validierung 40

Abbildung 43 Video mit Firefox (ohne Control-Attribut) 44

Abbildung 44 Video mit Opera (ohne Control-Attribut) 44

Abbildung 45 Video mit Chrome (ohne Control-Attribut) 45

Abbildung 46 Video mit IExplorer (ohne Control-Attribut) 45

Abbildung 47 Video mit IExplorer, jetz mit Control-Attribut) 46

Abbildung 48 Video mit Text 46

Abbildung 49 Video mit Poster 47

Abbildung 50 Video mit Javaskript-Schaltern 48

Abbildung 51 Video mit Tracks 50

Abbildung 52 Audio in Firefox 52

Abbildung 53 Audio in Opera 53

Abbildung 54 Audio in Chrome 53

(5)

Abbildung 55 Audio in IExplorer 53

Abbildung 56 Browsersupport für das audio-Tag 54

Abbildung 57 Video mit :hover 55

Abbildung 58 Video mit transition 57

Abbildung 59 Text mit transition 58

Abbildung 60 Farbdialog mit Alpha-Wert 59

Abbildung 61 Überschriften mit Farben, die unterschiedliche alpha-Werte haben 59

Abbildung 62 Text mit transform und skew 60

Abbildung 63Text mit transform, translate und skew 61

Abbildung 64 Transform eines Videos 62

Abbildung 67 Keyframe Beispiel, Farbänderung 66

Abbildung 68 Keyframe Beispiel, Laufschrift 66

Abbildung 69 Keyframe Beispiel, Laufschrift, unterschiedliche Geschwindigkeiten 67

Abbildung 70 Animation mit absolute und relative-Elementen 68

Abbildung 71 Beispielbild eines Hintergrundbildes mit einem Verlaufs 69

Abbildung 72 Anzeige der Verlaufsrichtungen 70

Abbildung 73 Beispiel eines linear-gradient 70

Abbildung 74 Beispiel eines linear-gradient 71

Abbildung 75 Beispiel eines radial-gradient 71

Abbildung 76 Beispiel eines radial-gradient 72

Abbildung 77 Pixel-Logo mit unscharfen Kanten 73

Abbildung 78 SVG-Logo mit scharfen Kanten 73

Abbildung 79 SVG-Linie 74

Abbildung 80 SVG-Rechteck 75

Abbildung 81 Beispiel mit Innen- und Außenradius 75

Abbildung 82 SVG-Beispiel mit Kreis 76

Abbildung 83 SVG-Beispiel Ellipse 77

Abbildung 84 SVG-Beispiel Polygon 78

Abbildung 85 SVG-Beispiel mit Text 79

Abbildung 86 SVG-Beispiel mit gedrehten Text 79

Abbildung 87 SVG-Beispiel mit path 80

Abbildung 88 Komlexes SVG-Beispiel mit path 81

Abbildung 89 Einfache Linie mit Canvas 84

Abbildung 90 "Barcode" Linien mit Canvas 84

Abbildung 91 Unterschied rect und strokeRect in Canvas 86

Abbildung 92 Canvas mit Kreis 87

Abbildung 93 Canvas mit einem Halbkreis 88

Abbildung 94 Canvas mit Ellipse 89

Abbildung 95 Canvas mit Text-Funktionen 90

Abbildung 96 Canvas mit Bezier-Funktio 91

Abbildung 97 Canvas mit einem Bild 92

Abbildung 98 Canvas mit einem Bild durch einen Schalter 92

Abbildung 99 drawImage mit einem Schalter 93

Abbildung 1http://strd6.com/space_demo/ 110

(6)

1 Einleitung

1.1 Lernziele

• Neue Elemente in HTML5 und CSS o Auszeichnungen (strong, em, etc.)

o Semantische Elemente (header, section, summary, details, etc.) o Neue Formulare (number, range, date, etc.)

• Grafik

o Pixelgrafik o Vectorgrafik o Canvas-Element

• Multimedia o Bilder o Videos

• jQuery

o Einführung in das Framework

1.2 Neue Elemente

• Videos

o Videos können ohne Plug-in abgespielt werden

• Interaktivität und Animation

o Vorher musste man komplizierte Java-Skript verwenden. Mit HTML5 kann man weitgehend alle Flash und JavaScript- ersetzen.

• Hintergrundbilder

o Hintergrundbilder können direkt mit HTML5 erzeugt werden

• Formen

o Es ist relativ einfach komplexere Formen darzustellen

• Anpassung an mobile Endgeräte

o Bildschirm kleiner, CPU schwächer, Kontrast muss größer sein

• Neue Doctype-Deklaration

o Es gibt nun eine einfachere Deklaration. Ich verwende diese aber NICHT.

• Fluid-Design

o Wird ersetzt durch das Responsive-Desig

o Das Box-Modell kann abgerundet, gekippt und gedreht werden (border-radius, transform:rotate).

o Aktueller Breitenstandard: 960 Pixel

• Web-Fonts

o Es gibt jetzt kostenlose Webfonts, die man nun sehr einfach einbinden kann.

(7)

1.2.1 Semantische Tag‘s

• Semantische Tag‘s

o Semantische Tags sind Tags, die den Inhalt und nicht das Aussehen beschreiben (Barrierefreie Seiten)

o header header eines Absatzes o footer Fußnote eines Absatzes o article Hauptbereich eines Absatzes o section Unterabschnitte eines Absatzes

o aside Seitenleisten

o nav Navigationselemente

o details WPF: extended

o summary arbeitet mit details

o figure enthält ein grafisches Element

• Typografische Tags

o bdi Text verläuft von rechts nach links

o wbr manuelle Trennung

• Programmierbare Tags o canvas

o data jquery

• Neue Formular-Tags

o datalist ComboBox

o keygen Generiert einen Schlüssel o output Anzeige von Ergebnissen o date

o datetime o datetime-local o time

o week o month o address

o tel Telefon mit numerischer Tastatur (mobile) o meter

o number o range o email o pattern o search o color

o progress progressbar

196. Level erreicht ?

upload

1.2.2 Neue Formular-Elemente

• Datentyp für Emailadresse(n) (email)

• Datentyp für URLs (url)

• Datentypen für numerische Eingaben

o Numerischer Wert (ganzzahlig) (number)

o Bereich (range)

o Plausibilitätsprüfung und Tipps für die Eingabe

(8)

• Datentyp für Datumsangaben

o Monat, Woche (month, week)

o Datum und Zeit (date, time, datetime) o Datum, Zeit, Woche

• Farbauswahl (color)

• Sucheingabe (search)

• Datentyp für Emailadresse(n):

o <input type="email">

• Datentyp für URLs:

o <input type="url">

• Datentypen für numerische Eingaben o <input type="number">

o <input type="range" min="10" max="100" step="5" value="55">

• Auswahl einer Farbe

o <input type="color">

• Sucheingabe

o <input type="search" name="search">

• Datentyp für Datumsangaben o <input type="day">

o <input type="month">

o <input type="year">

o <input type="datetime">

Jahr, Monat, Tag, Stunde, Minute, Sekunde und Millisekunde nach UTC (Weltzeit)

o <input type="date"> Jahr, Monat, Tag ohne Zeitzone o <input type="week">

o <input type="time">

Stunde, Minute, Sekunde und Millisekunde ohne Zeitzone

••

•

Abbildung 1 Neue Formualarelemente, 1. Beispiel

(9)

Abbildung 2 Neue Formualarelemente, 2. Beispiel

(10)

2 Auszeichnungs-Tags / Semantische Elemente

2.1 Typografische Tags

• abbr Abkürzung und Akronyme (MWSt. / NATO) o Attribut title als Hint

• b stilistisches Tag z. B. für Firmennamen (fett)

• bdi Text verläuft von rechts nach links

• bdo Textrichtung ändern o Attribut dir=rtl bzw. ltr

• cite Zitat für Werktitel (Elbauenpark)

• code Codierter Text (z. B. für Syntax-Highlight)

• dfn zu definierender Ausdruck, à la Buch

• em emphase, betont den Inhalt

• i stilistisches Tag, Fachausdrücke (kursiv)

• ins eingefügter Text (Varianten)

• kdb Keybord

kbd {

font-family: monospace;

• mark } markierter Text, z. B. nach einem Suchvorgang

• q Wörtliche Rede oder Zitat o ohne Anführungszeichen

• Fernöstliche Sprache:

o rp Ruby-Klammer

o rt Textteil einer Ruby-Annotation o ruby Ruby-Annotation

• s gelöschter Text (Varianten), bleibt aber im Text

• del gelöschter Text (Varianten)

• samp stilistisches Tag

o Beispielausgabe eines Programms

• small kleingedruckt

• span

• strong stilistisches Tag, besonders wichtig (fett)

• sub Tiefergestellt

• sup Höhergestellt

• u Nicht artikulierte Zusatzbemerkung zum Text

• var Frei wählbare Bezeichnernamen

• wbr manuelle Trennung

(11)

2.2 Globale Attribute der typografische Tags

• accesskey Alt+O

• class

• contenteditable Editierbar?

• contextmenu

• data sp. Daten

• dir Direction

• draggable Drag&Drop

• dropzone Drag&Drop

• hidden

• id

• inert

• itemid

• itemprop

• itemref

• itemscope

• lang

• itemtype

• spellcheck

• style

• tabindex

• title

• translate

2.3 Events

• onabort

• oncancel

• onblur

• oncanplay

• oncanplaythrough

• onchange

• onclick

• oncontextmenu

• ondblclick

• ondrag

• ondragend

• ondragenter

• ondragexit

• ondragleave

• ondragover

• ondragstart

• ondrop

• ondurationchange

• onemptied

• onended

• onerror

• onfocus

• onformchange

(12)

• onforminput

• oninput

• oninvalid

• onkeydown

• onkeypress

• onkeyup

• onload

• onloadeddata

• onloadedmetadata

• onloadstart

• onmousedown

• onmousemove

• onmouseout

• onmouseover

• onmouseup

• onmousewheel

• onpause

• onplay

• onplaying

• onprogress

• onratechange

• onreadystatechange

• onscroll

• onseeked

• onseeking

• onselect

• onshow

• onstalled

• onsubmit

• onsuspend

• ontimeupdate

• onvolumechange

• onwaiting

2.4 Beispiele der typografischen Tags

(13)

Abbildung 3 Beispiel: abbr

Abbildung 4 Beispiel: b / i / em / strong

(14)

Abbildung 5 Beispiel: bdi / bdo

Abbildung 6 Beispiel: cite, code, dfn

Abbildung 7 Beispiel: kbd

(15)

Abbildung 8 Beispiel: mark

Hier werden Suchergebnisse gelb markiert. Dazu muss man natürlich den CSS-Selektor setzen.

Abbildung 9 Beispiel: samp

(16)

Abbildung 10 Beispiel: u

Abbildung 11 Beispiel: var

Abbildung 12 Beispiel: wbr, 1. Bild

Abbildung 13 Beispiel: wbr, 2. Bild

(17)

2.5 Semantische Elemente

• main Hauptbereich

• arcticle Artikel

o Dieses Tag schließt komplette Absätze etc. ein.

o Meist kann man es mit dem body-Tag verbinden.

• header Kopfzeile für verschiedene Elemente

o Ein header-Element kann aber auch als Einstieg dienen

• section Absätze

• aside Seitenleiste

• footer Fußzeile für verschiedene Elemente

o Ein footer-Element kann aber auch für die Hauptseite dienen

• nav Navigator-Element

o Ein nav-Element kann im Seitenheader oder unten platziert werden o Auch können mehrere Navigationselemente verfügbar sein.

Mit diesen Tag‘s kann man eine bessere Struktur innerhalb einer HTML-Seite erstellen.

• Barrierefreiheit

• Siri / Cortana / Google Now

Abbildung 14 Anzeige der semantischen Bereiche

(18)

Abbildung 15 Anzeige der semantischen Bereiche

Abbildung 16 Details mittels Java-Skript

Man beachte die Zeile “Details”. Dieses Beispiel verwendet dazu nur Java-Skript.

(19)

Abbildung 17 Details mittels Java-Skript

Quellcode:

"use strict"

function details(sId) { "use strict"

var element = document.getElementById(sId);

if ( element.style.display == 'none' ) element.style.display = 'block';

else

element.style.display = 'none';

} // fb </script>

<img src="Detail-white.png" alt="Version of the detail-element"

border="0" onmousedown="details('idDetail');" /> Details<br />

Diese Summary/Details-Technik wurde über Java-Skript realisiert. <br />

hier ist der HTML:Quellcode:<br />

<img src="Detail-white.png" alt="Version of the detail-element" border="0"

onmousedown="details('idDetail');" /> Details<br /><br />

</div>

2.5.1 Summary / Details

Diese Kapitel zeigt das obige Beispiel mit den neuen Tag „summary“ und „details“.

(20)

Abbildung 18 Details mittels ohne Java-Skript, HTML5 <details>

Quellcode:

<p>CSS mit den semantischen Tag ist nicht ganz leicht</p>

<p>Aber die Studenten sind <em>sehr</em> lernfähig</p>

<p>Das Layout ist momentan noch überschaubar</p>

<p>In den nächsten Beispielen wird es schwerer</p>

</summary>

Diese Variante wird <em>nicht</em> über Java-Skript realisiert. <br />

hier ist der neue HTML Quellcode:<br />

</details><br />

</details>

2.5.2 Nav-Element Eigenschaften:

• Eine Navigation wurde vor HTML5 mittels eine div-Tag‘s und einer ungeordneten Liste (list- style:none) erstellt.

• Das neue Tag vereinfacht kaum die Erstellung einer Navigationsliste.

• Man braucht trotzdem eine ungeordneten Liste (list-style:none).

• Ein nav-Element kann im Seitenheader oder unten platziert werden

• Auch können mehrere Navigationselemente verfügbar sein.

• Auch hierarchische Navigationselemente sind möglich.

Verwendung eines Nav-Elementes

• Liste der Inhalte (à la Wikipedia) o Scheint sinnvoll.

• Schalter zur vorherigen / nächsten Seite o Auch diese Technik ist möglich.

• Such-Element

o Sehr wichtig, gerade bei großen Seiten.

• Breadcrumbs (Brotkrümelnavigation) o Design Pattern in HTML-UI

(21)

o Anzeige der einzelnen parent-Seiten Beispiel einer Brotkrümelnavigation:

Abbildung 19 Brotkrümelnavigation

Beispiel eines nav-Elements:

HTML:

<nav>

<a href="Struktur.html" title="Struktur">Struktur</a> |

<a href="Darstellung.html" title="Darstellung">Darstellung</a> | <a href="Formulare.html" title="Formulare">Formulare</a> | <a href="Verweise.html" title="Verweise">Verweise</a>

</nav>

<ul>

<li><a href="Struktur.html" title="Struktur">Struktur</a></li>

<li><a href="Darstellung.html" title="Darstellung">Darstellung</a></li>

<li><a href="Formulare.html" title="Formulare">Formulare</a></li>

<li><a href="Verweise.html" title="Verweise">Verweise</a></li>

</ul>

</nav>

CSS:

nav a:visited, nav a:link, nav a:hover { text-decoration:none;

} nav ul{

list-style-type: none;

}

Abbildung 20 Beispiel eines nav-Elementes

(22)

2.5.3 Progress-Element

• Eine Progressbar dient zur Darstellung einer Fortschrittanzeige.

• HTML4

o Realisiert mit verschiedenen Bildern o Oder mit div‘s und javaskript

• <dd class="left">77%</dd>

• HTML5

o <progress value="24" min=" 0" max="100" ></progress>

Abbildung 21 Beispiel eines progress-Elementes

Die Schalter dienen der Veränderung der unteren Progress-Bar.

Hier das Java_Script:

function calc( value ) { "use strict;"

if (! isNaN(value) ) { var zahl = parseInt(value);

var progress = document.getElementById( "progress2" );

var posi=progress.value+zahl;

if (posi>=0 && posi<=100) {

progress.value = progress.value+zahl;

} } } // ]]>

</script>

</head>

<form>

</form>

(23)

Progress-Element in Firefox und IExplorer

Abbildung 22 Beispiel eines progress-Elementes in Firefox und IExplorer

(24)

2.5.4 Datum und Zeit-Elementen

Abbildung 23 Beispiele mit den Datums- und Zeit-Elementen

Abbildung 24 Beispiele mit den Datums- und Zeit-Elementen (aufgeklappt)

(25)

Abbildung 25 Beispiele mit den Zeit-Element

Nicht alle Browser unterstützen zur Zeit die neuen Elemente. Deshalb benötigt man eine separete Überprüfung:

Komplexes Beispiel mit Java:

Abbildung 26 Beispiele mit den Datums- und Zeit-Elementen und Java-Skript

(26)

Welche Elemente unterstützen nun die einzelnen Browser?

Chrome:

Fehlerhaft Elemente:

• day

• datetime

• datetime_local Opera:

Fehlerhafte Elemente:

• Day

• year

• datetime

• datetime_local Firefox:

• ALLE IExplorer:

• ALLE

• function checkFormDayDate( value )

• function checkFormMonth( value )

• function checkFormYear( value )

• function checkFormDatetime( value )

• function checkFormWeek( value )

• function checkFormTime( value )

• function absolutDay(day, month, year)

• function isSchaltjahr(year)

• function checkDate(day, month, year)

• function checkYear(year)

• function checkTime(hour, min, sec)

• function checkWeek(week, year)

Abbildung 27 Aufbau der Plausibilität mittels Java-Skript

(27)

function checkFormYear( value) { "use strict;"

if ( isNaN(value) ) {

alert("Falsches Jahresformat: \n"+value);

return false;

} else {

year = parseInt(value);

if (checkYear(year)) { alert("Year: "+year);

return true;

} else {

alert("Falsches Jahresformat:

\n"+value);

return false;

} } }

function checkYear(year) { "use strict;"

if (year<1900 || year>2200) return false;

else

return true;

}

function checkFormTime( value) { "use strict;"

var values = value.split(":");

if (values.length<2) {

alert("Falsches Zeitformat: \n"+value);

return false;

} else {

var hour, min, sec;

if ( isNaN(values[0]) ) {

return false;

} else {

hour= parseInt(values[0]);

}

return false;

} else {

min= parseInt(values[1]);

}

if (values.length==3) { if ( isNaN(values[2]) ) {

return false;

} else {

sec= parseInt(values[2]);

} } else { sec=0;

}

(28)

if (checkTime(hour, min, sec)) { alert("Hour: "+hour+" Min: "+min +" Sec: "+sec);

return true;

} else {

return false;

}

} // if (values.length<2) { } // checkFormTime

function checkTime(hour, min, sec) { "use strict;"

if (hour<0 || hour>23 ) return false;

if (min<0 || min>59 ) return false;

if (sec<0 || sec>59 ) return false;

return true;

}

function checkFormMonth( value ) { // März 2015 "use strict;"

var values = value.split(" ");

alert("Falsches Monatsformat: \n"+value);

return false;

} else {

var month, year;

month = values[0];

return false;

} else {

year= parseInt(values[1]);

}

if (!checkYear(year)) {

return false;

}

var month2 = month.toLowerCase();

if (month2=="januar" || month2=="februar" || month2=="märz" ||

month2=="april" || month2=="mai" || month2=="juni" || month2=="juli" ||

month2=="august" || month2=="september" || month2=="oktober" ||

month2=="november" || month2=="dezember" ) {

alert("Korrektes Monatsformat: \n"+"Monat: "+month+" Jahr: "+year);

return true;

} else {

return false;

}

(29)

} // if (values.length<2) { } // checkFormMonth

function checkFormDayDate( value) { // 24.11.2015 "use strict;"

var values = value.split(".");

alert("Falsches Datumsformat: \n"+value);

return false;

} else {

var day, month, year;

alert("Falsches Datumsformat: \n"+value);

return false;

} else {

day = parseInt(values[0]);

}

alert("Falsches Datumsformat: \n"+value); return false;

} else {

month = parseInt(values[1]);

}

} else {

year = parseInt(values[2]);

}

if (checkDate(day, month, year)) {

alert("Day: "+day+" Month: "+month+" Year: "+year); return true;

} else {

}

} // if (values.length<3) { }

function checkDate(day, month, year) { "use strict;"

var maxtage=0;

if (day<=0 || day>31) return false;

if (month<=0 || month>12) return false;

switch (month) { case 1:

case 3:

case 4:

case 7:

case 8:

(30)

case 10:

case 12: maxtage=31;

break;

case 4:

case 6:

case 9:

case 11: maxtage=30; break;

case 2: var rest=year % 4;

if (rest==0) { rest=year%100;

if (rest==0) {

rest=year%400; // check 1900 2000 if (rest==0)

maxtage=29;

else

maxtage=28;

} // if (rest==0) { else {

maxtage=29;

} } else

maxtage=28;

} // switch } // checkDate

function checkFormDatetime( value) { // 31.02.2015 10:66 "use strict;"

var values = value.split(" ");

alert("Falsches DateTimeformat: \n"+value);

return false;

} else {

if (!checkFormDayDate(values[0])) return false;

if (!checkFormTime(values[1])) return false;

return true;

} // if (values.length<2) { }

function checkFormWeek( value) { "use strict;"

var values = value.split(","); // "Woche 56", und "2015"

alert("Falsches DateWochenformat: \n"+value);

return false;

} var year;

alert("Falsches Jahresformat: \n"+value);

(31)

return false;

}

year=parseInt(values[1]);

if (!checkYear(year)) {

alert("Falsches Jahr: \n"+value);

return false;

}

var week=values[0]; // Woche 56

var values = week.split(" "); // "Woche 56"

return false;

}

week=parseInt(values[1]);

if (checkWeek(week, year)) {

alert("Woche: "+week+" Jahr: "+year);

return true;

} else {

alert("falsche Woche");

return false;

}

} // checkFormWeek

function checkWeek(week, year) { "use strict;"

if (week<0 || week>53) return false;

var zeit1 = absolutDay(1, 1, 1900); // dies ist ein Montag var zeit2 = absolutDay(1, 1, year);

var zeit3 = zeit2 - zeit1-1;

var weekday = zeit3 %7; // 0=montag

// wenn 1.1.year auf einem Donnerstag liegt, gibt es 53 Wochen var countWeeks;

if (wochentag==3) countWeeks=53;

else

countWeeks =52;

return week>0 && week<=countWeeks;

}

function absolutDay(day, month, year) {

var delta_tage = new Array(0,3,3,6,8,11,13,16,19,21,24,26);

var j4, j100, j400;

var f;

if ( (day==0) || (month==0) ||(year==0) ) return 0;

f=365.25*(year-1.0) +28.0*(month-1.0)+delta_tage[month-1]+day;

if (month>2) {

// 2000 ist Schaltjahr 1900 nicht j4=year % 4;

j100=year % 100; // Schaltjahr wenn = 0 1900 oder 2000 j400=year % 400; // nun 2000 2400

if ( ((j4==0)&&(j100>0)) || (j400==0) ) f++;

}

(32)

return Math.floor(f);

} // absolutDay

function checkWeek2(week, year) { "use strict;"

if (week<0 || week>53) return false;

var myDate = new Date(1,1,year);

var weekday = myDate.getDay(); // 0=Montag

// wenn 1.1.year auf einem Donnerstag liegt, gibt es 53 Wochen var countWeeks;

if (weekday==3) countWeeks=53;

else

countWeeks=52;

return week>0 && week<=countWeeks;

}

2.6 Telefon, Url und EMail-Elemente

Abbildung 28 HTML-Seite mit Telefon, URL und EMail-Elememnten

Kein Browser unterstützt diese Elemente.

(33)

2.7 Search-Element

Abbildung 29 Search-Element

• Das search-Element hat eine eigene Liste

• Browser könnten das Suchfeld der aktuellen Seite zum Beispiel automatisch in die Suchleiste integrieren und auswählen

• Smartphones blenden beim Suchfeld auf eine Tastatur ein.

2.8 Color-Element

Abbildung 30 Color-Element

HTML-Code:

<label for="userID1" >Farbauswahl :

</label>

<label for="userID3" >Output:

(34)

</output>

</label>

Java-Skript:

function checkColor( form ) { "use strict;"

form.tColor.value = form.color.value.toUpperCase();

var color=form.color.value.toUpperCase();

var red = color.substr(1,2); // 1->2 color.substring(1,3) var green = color.substr(3,4);

var blue = color.substr(5,6);

form.output.value = red+" "+green+" "+blue;

}

2.9 Number, Meter, Range-Elemente Firefox, Opera, Chrome:

Abbildung 31 Number, Meter und Range-Elemente

IExplorer:

Abbildung 32 Number, Meter und Range-Elemente im IExplorer

(35)

2.10 Output-Element Bedeutung:

• Ersatz für „ajax“-Elemente

• Automatisches Berechnen

• For-Attribute

Abbildung 33 Output-Element

HTML-Code:

<h1>Output-Element</h1>

<form onsubmit="return false"

oninput="o.value = parseInt(a.value) + parseInt(b.value)">

</form>

Output-Element Beispiel 2 HTML-Code:

oninput="o.value = parseInt(a.value) + parseInt(b.value)">

</form>

Output-Element Beispiel 3 HTML-Code:

oninput="o.value = a.valueAsNumber + b.valueAsNumber">

</form>

Hinweis:

valueAsNumber ist eine neue Methode, die den Wert als Zahl ausgibt.

Abbildung:

(36)

Abbildung 34 Beispiel eines Output--Elementes

2.11 Range-Element

• Anwender bestimmt interaktiv die Eingabe

• Prozentuale, visuelle, Eingabe

• Nicht alle Browser unterstützen die Anzeige des aktuellen Wertes (Abhilfe: output)

Beispielbild:

Abbildung 35 Range-Element mit Labelfeld

HTML-Code:

oninput="level.value = rangeInput.valueAsNumber">

<label for="forRange">Range Element</label>

<input name="rangeInput" id="forRange"

type="range" min="0" max="100" value="17" />

<output for="forRange" name="level">0</output>/100

</form>

(37)

2.12 Datalist-Element

• Suggestion

• Optionale Eingaben

• Vergleichbar mit der ComboBox, aber keine festen Vorgaben Alte Technik mit der ComboBox:

<option > Internet Explorer</option >

<option selected="selected"> Firefox</option>

<option > Chrome</option >

<option > Opera</option >

<option > Safari</option >

</select>

Neue Technik:

</datalist>

Abbildung 36 Datalist-Element

Datelist-Element: Chrome

• Funktioniert auch mit type="days"

(38)

Abbildung 37 Datalist-Element mit day-Tag

Abbildung 38 Datalist-Element mit week-Tag

Abbildung 39 Datalist-Element mit year-Tag

• Funktioniert auch mit type="datetime" und "datetime_local"

(39)

Abbildung 40 Datalist-Element mit datetime-Tag

• Funktioniert auch mit type="time"

Abbildung 41 Datalist-Element mit time-Tag

Hinweis:

• "month" und "date" nicht möglich

2.13 Validierung Mögliche Tag’s:

• autocomplete

• autofocus

• label

• placeholder

• required

(40)

Abbildung 42 Texct-Formular mit Validierung

Quellcode:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title> Beispiel 1 </title>

href="html5-form-text1.css" title="style1"/>

</head>

<body>

<h1>Text-Formular</h1>

<form autocomplete="on" >

<label for="userId" > Username

<input type="text" title="Username für den Server" name="username" id="userId" value=""

placeholder="Ihr Username"

size="14" maxlength="10"

autocomplete="on"

autofocus="autofocus" required="required" />

</label>

<br />

<label for="userId" > Password

<input type="text" title="Sinnvolles Passwort" name="password" id="userPassword" value=""

placeholder="Ihr neues Passwort"

(41)

autocomplete="on"

size="14" maxlength="10" required="required" />

</label>

<br />

</form>

</body>

</html>

(42)

3 Multimedia (Audio, Video)

3.1 Videos Videoformate

• AAC Advanced Audio Coding

• AVI Audio Video Interleaved

• AVCHD Advanced Video Codec

• FLV Flash Video

• WMV Windows Media Video

• MKV Matroska Video File

• MOV Movie

• MPEG I und II Moving Pictures Experts Group

• MPEG IV Moving Pictures Experts Group

• M4V internes Format von Apple

• OGV Ogg Video

• RM Real Media

• DLNA Digital Living Network Alliance

• MOD internes Format von Canon

• MTS/M2TS Multichannel Television Sound

• TOD internes Format von Panasonic

• VOB Video Object File

Videos abspielen im Browser

• Proprietäre Plug-ins

o Windows Media Player o Quick Time Player

• Flash Player

o Format flv (Quasi Standard)

o Keine Unterstützung der Firma Apple o „Thoughts on Flash“

• Native Video

Proprietäre Videoformate:

• Flash Video

• AVCHD Kameraformat

• Quick Time Video (MOV) Kameraformat

• Window-Video (WMV)

• Window-Video (AVI) Kameraformat

• RealMedia (RM)

Weitere native Videoformate:

• Theora (OGV, Ogg Video), Open Source

• .h264 (MP4), MS und Apple

• WebM (WEBM) , Open Source

o Alle drei sind Sinnvolle Varianten

(43)

Probleme mit Videos:

„Abspielgeräte“

• Kamera

• Desktop-PC

• Handy

• Smartphone

Unterschiedliche Browservarianten:

• auf dem Desktop

• auf mobilen Geräte (kein IE !)

3.1.1 Tag video

• Attribute o width o height

o controls="controls"

o autoplay="autoplay" immer mit mute (sound) o muted="muted„

o loop="loop"

o poster= "poster.png"

o preload= "metadata" Autor, Links, Sprache

• Sub-Element o source

src

type

Video in Firefox: Steuerelemente per Popup

(44)

Abbildung 43 Video mit Firefox (ohne Control-Attribut)

Abbildung 44 Video mit Opera (ohne Control-Attribut)

(45)

Abbildung 45 Video mit Chrome (ohne Control-Attribut)

Abbildung 46 Video mit IExplorer (ohne Control-Attribut)

Der IExplorer hat keine Steuerelemente Abhilfe:

<video controls="controls" >

(46)

Abbildung 47 Video mit IExplorer, jetz mit Control-Attribut)

3.1.2 Erstes Beispiel

Abbildung 48 Video mit Text

(47)

HTML-Code:

</video>

Natürlich kann man auch mit CSS-Styles arbeiten. Diese Seite verwendet einen video-Selector, der einen weißen Rand, einen Außen- und Innenrand und einen schwarzen Hintergrund definiert.

CSS-Code:

video {

border: white dashed thick;

padding-left: 30px;

padding-right:30px;

background-color:black;

margin:25px;

float:right;

}

Hinweis:

Der Text ist nach <video>

Video mit „allen“ Attributen:

<video controls="controls" autoplay="autoplay"

muted="muted" loop="loop"

poster= "poster.png" preload= "metadata" >

</video>

Abbildung 49 Video mit Poster

(48)

3.1.3 Video mit allen separaten Schaltern Beispielbild:

Abbildung 50 Video mit Javaskript-Schaltern

3.1.4 Track in Videos

Track in Tag <video>, Symbol

• default enabled

• kind

o subtitles

o captions ev. Übersetzungen, Musik, Text (no sound) o descriptions Text (Barrierefrei)

o chapters

o metadata Nicht sichtbar

• label Beschriftung des Tracks

• src URL des Tracks

• srclang

• Tracks können für leistungsstärkere Suche verwendet werden.

• Die Untertitel werden in einer Textdatei gespeichert.

Quellen:

• https://developer.mozilla.org/de/docs/Web/HTML/Element/track

• http://www.drweb.de/magazin/html5-tracks-untertitel-fuer-videos-ausgeben-47829/

(49)

Unterschiedliche Track-Arten:

</video>

Trackdatei (Web Video Text Tracks): english-subtitles.vtt

WEBVTT 1

00:00:15.000 --> 00:00:18.000 a:start

2

00:00:18.167 --> 00:00:20.083

At the <i>right</i> we can <u>see</u> the...

3

00:00:20.083 --> 00:00:22.000 ...the <b>head-snarlers</b></v>

4

00:00:22.000 --> 00:00:24.417

<v Proog>Everything is safe. Perfectly safe.</v>

5

00:00:24.583 --> 00:00:27.083 Emo?

3.1.5 Javascript und Tracks

• var videoElement = document.querySelector("video");

• var textTracks = videoElement.textTracks; // one for each track element

• var textTrack = textTracks[0]; // corresponds to the first track element

• var kind = textTrack.kind // e.g. "subtitles"

• var mode = textTrack.mode

• 0 = TextTrack.OFF in spec, TextTrack.DISABLED in Chrome

• 1 = TextTrack.HIDDEN

• 2 = TextTrack.SHOWING

• var cues = textTrack.cues;

• var cue = cues[0]; // corresponds to the first cue in a track src file

• var cueId = cue.id // cue.id corresponds to the cue id set in the WebVTT file

(50)

• var cueText = cue.text; // "The Web is always changing", for example (or some JSON!)

• var trackElements = document.querySelectorAll("track");

• // for each track element

• for (var i = 0; i < trackElements.length; i++) {

• trackElements[i].addEventListener("load", function() {

• var textTrack = this.track; // gotcha: "this" is an HTMLTrackElement, not a TextTrack object

• var isSubtitles = textTrack.kind === "subtitles"; // for example...

• // for each cue

• for (var j = 0; j < textTrack.cues.length; ++j) {

• var cue = textTrack.cues[j];

• // do something

• }

Events:

cue.onenter = function(){

// do something };

cue.onexit = function(){

// do something else };

textTrack.oncuechange = function (){

// "this" is a textTrack

var cue = this.activeCues[0]; // assuming there is only one active cue var obj = JSON.parse(cue.text);

// do something }

Beispiel eines Tracks-Videos in Chrome:

Abbildung 51 Video mit Tracks

Quelle: http://www.iandevlin.com/html5/webvtt-example.html

(51)

Track in Tag <video>, Symbol HTML-Code:

o Track funktionieren nur, wenn alle Dateien auf dem Server liegen:

o poster="http://miwilhelm.de//track/elephants-dream.title.jpg"

o <source src="http://miwilhelm.de/track/elephants-dream-medium.webm"

type="video/webm">

o Der Link zur vtt-Datei kann einen Server-Pfad haben.

src="english-subtitles.vtt"

src="/vtt/english-subtitles.vtt"

CSS-Code:

::cue { color: black;

background: white;

}

(52)

3.2 Audio

Wichtige Audioformate:

• aac Advanced Audio Coding (komprimiert, besser als mp3) o Sollte der Nachfolger von mp3 werden

o Neue Endungen: mp4, m4a o Verlustfrei

• flac, fla Free Lossless Audio Codec (192 kHz, 24 Bit) o komprimiert

o verlustfrei

• mp3 MPEG-1 Audio Layer 3 (komprimiert)

• ogg Ogg Video / Audio

• rm Real Media (komprimiert)

• wav Wave form audio

• wma Windows Media Audio

• wma Lossless Verlustfrei vom MS Attribute:

• controls="controls" sollte immer vorhanden sein

• autoplay="autoplay" immer mit mute (sound)

• muted="muted„

• loop="loop"

• preload= "metadata" Autor, Links, Sprache Sub-Element:

• source o src o type Audio in Firefox:

Abbildung 52 Audio in Firefox

(53)

Abbildung 53 Audio in Opera

Abbildung 54 Audio in Chrome

Abbildung 55 Audio in IExplorer

3.2.1 Track in Tag <audio>

• default enabled

• kind

o subtitles

o captions ev. Übersetzungen, Musik, Text (no sound) o descriptions Text (Barrierefrei)

o chapters

o metadata Nicht sichtbar

(54)

• label Beschriftung des Tracks

• srclang

• Tracks können für leistungsstärkere Suche verwendet werden.

• Die Untertitel werden in einer Textdatei gespeichert.

Quellen:

• https://developer.mozilla.org/de/docs/Web/HTML/Element/track

• http://www.drweb.de/magazin/html5-tracks-untertitel-fuer-videos-ausgeben-47829/

Leider:

Abbildung 56 Browsersupport für das audio-Tag

(55)

4 CSS3

Neue CSS3-Styles in HTML5:

• Übergänge

• Schatten

• Drehungen

• Transformationen

• Neue Farbdefinition

• Verlaufsfarben

• Befreiung vom Box-Modell

• Animationen

Pseudo-Klassen:

:link :visited :hover :focus :active :visited HTML-Code:

</video>

CSS-Code:

.box:hover {

border:thick dashed red;

}

Abbildung 57 Video mit :hover

Wenn man mit der Maus über das rechte Bild geht, verändert sich der Rahmen.

(56)

4.1 transition Allgemeine Eigenschaften:

• Übergänge ohne Javasript

• Eigenschaften des Selectors „transition“

o transition-property

Eigenschaft, die verändert werden soll o transition-duration

Dauer in Sekunden o transition-timing-function

o Berechnet die Geschwindigkeit des Übergangs linear, ease, etc.

o transition-delay

Wann beginnt der Übergang Eigenschaften der Attribute:

• transition-timing-function o linear

o ease

Start langsam, Ende schnell o ease-in

Start langsam o ease-out

Start schnell, Ende langsam o ease-in-out

Start schnell, Mitte schnell, Ende langsam o step-start Einzelwerte, komplex: steps(1, start);

o step-stop

o cubic-bezier cubic-bezier(0, 0, 0.58, 1);

cubic-bezier(0.42,0,0.58,1)

CSS-Code:

.box:hover {

background-color: black;

margin:15px;

padding:15px;

ffloat:right;

margin-right:60px;

transition-property:border;

transition-duration:5s;

transition-timing-function:ease-out;

-webkit-transition-property:border; // für Safari und älteren Browsern -webkit-transition-duration:5s;

-webkit-transition-timing-function:ease-out;

border:thick dashed red;

}

Verändert wird der Border, die Dauer beträgt 5 Sekunden und als Zeitfunktion wird ease-out verwendet.

(57)

Abbildung 58 Video mit transition

Die drei Bilder zeigen den Start, einen Zwischenschritt und den letzten Zusatnd.

Beispiel: html5-css3-text1.xhtml

<p class="box" >

Graphics2D g2d = (Graphics2D)g;<br />

g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);<br />

AffineTransform at = new AffineTransform(); <br />

int x=50;<br />

int y=100;<br />

at.setToRotation( Math.toRadians(-90), x,y ); // theta x y<br />

g2d.setTransform(at); <br />

g2d.drawString("Name", x,y);<br />

</p>

CSS-Code:

p {

font-size:1.2em;

}

.box:hover {

background-color: black;

color:white;

transition-property:font-size;

transition-duration:5s;

transition-timing-function:ease-out;

(58)

font-size:3em;

}

Ergebnisse

Abbildung 59 Text mit transition

Sehr deutlich sieht man die Vergrößerung des schwarzen Blockes, wenn man mit der Maus über den Bereich geht.

4.2 Farbdefinitionen in CSS3-Styles

• In CSS3 gibt es nun auch den alpha-wert.

• Funktion: rgba

o rgba(255,127,230,0.5); // nur mit der Funktion „rgba“

Glücklicherweise existiert ein Dialog, der den Alpha-Wert bestimmen kann.

(59)

Abbildung 60 Farbdialog mit Alpha-Wert

Beispieldatei: html5-color1.xhtml:

CSS-Datei:

h1 {

background-color:#FFFF00;

} h2 {

background-color:rgba(255,255,0,0.2);

} h3 {

} h4 {

}

Abbildung 61 Überschriften mit Farben, die unterschiedliche alpha-Werte haben

(60)

4.3 Transformation

Eigenschaften des Selectors „transform“:

• scale

o Zoom eines Elements (x,y,xy)

• translate

o Verschiebung eines Elements (x,y,xy)

• rotate

o Rotation eines Elements (α)

• skew

o Ändert die vier Winkel eines Elements (αx, αy, αxy) Vorteile:

• Der Code ist einfacher zu bearbeiten, zu analysieren

• Vorher musste man Javaskript zu Hilfe nehmen

• Jetzt ist es EINE Zeile

4.3.1 Beispiel 1

HTML-Code:

Hier ist die erste Zeile<br />

Hier ist die zweite Zeile<br />

</p>

CSS-Code:

.box {

width:120px;

color:green;

transform:skew(30deg) translate(145px);

background-color:gray;

margin:5px;

}

Das obige Beispiel zeigt die Verschachtelung zweier Transformationen.

• transform:skew(30deg)

• transform:translate(145px);

Ergebnis:

Abbildung 62 Text mit transform und skew

(61)

4.3.2 Beispiel 2

HTML-Code:

</p>

CSS-Code:

.box {

width:120px;

color:green;

transform:scaleX(2.5) translate(150px, 100px) skew(-45deg);

margin:5px;

}

Ergebnis:

Abbildung 63Text mit transform, translate und skew

4.3.3 Beispiel 3 (Video)

HTML-Code:

</video>

<video controls="controls" class="box" >

</video>

Zwei Blöcke mit jeweils einem Video (zum Vergleich).

CSS-Code:

.box {

width:300px;

color:green;

transform:scaleX(2.5) translate(150px, 100px) skew(-15deg);

(62)

margin:5px;

}

Ergebnis:

Abbildung 64 Transform eines Videos

Beispiel mit -45° Verzerrung:

(63)

4.3.4 Beispiel 3 (Video)

HTML-Code:

</video>

<video controls="controls" class="box" >

</video>

Zwei Blöcke mit jeweils einem Video (zum Vergleich).

CSS-Code:

.box {

width:300px;

color:green;

transform:rotate(180deg) translate(-150px, -100px) skew(15deg);

margin:5px;

}

Ergebnis:

(64)

4.3.5 Keyframes und Animation Eigenschaften des Selectors „keyframes“:

• Bezeichner o from

Der Startwert 0%

• to

o Der Endwert 0%

• oder Prozentzahl

o Aktuelle Prozentzahl Hinweis:

Nur zusammen mit dem Selector „animation“

Eigenschaften des Selectors „animation“:

• animation-name Notwendig

• animation-delay

o in sec oder ms

• animation-duration o in sec oder ms

• animation-iteration-count o 1, 1.5, infinite

• animation-direction

o animation-direction: normal o animation-direction: reverse o animation-direction: alternate

o animation-direction: alternate-reverse o animation-direction: normal, reverse

o animation-direction: alternate, reverse, normal

• Eigenschaften des Selectors „animation“

o animation-play-state

animation-play-state: running animation-play-state: paused

animation-play-state: paused, running, running

• animation-timing-function (zeitliche Veränderung) o animation-timing-function: ease

o animation-timing-function: ease-in o animation-timing-function: ease-out o animation-timing-function: ease-in-out o animation-timing-function: linear

o animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) o animation-timing-function: step-start

o animation-timing-function: step-end o animation-timing-function: steps(4, end)

o animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)

Eigenschaften des Selectors „animation“:

• animation-fill-mode

o animation-fill-mode: none o animation-fill-mode: forwards o animation-fill-mode: backwards o animation-fill-mode: both

(65)

4.3.6 Beispiel 1

HTML-Code:

</div>

CSS-Code:

.box {

width:150px;

height:140px;

animation:color-change 12s;

}

@keyframes color-change { 0% {

background:white;

} 25% {

background:red;

} 50% {

background:green;

} 75% {

background:blue;

} 100% {

background:black;

} }

Ergebnis:

(66)

Abbildung 67 Keyframe Beispiel, Farbänderung

4.3.7 Beispiel 2

HTML-Code:

<body>

<h1>2. Beispiel Keyframes, Text</h1>

</body>

CSS-Code:

h1 {

animation-duration: 3s;

animation-name: slideleft;

}

@keyframes slideleft { from {

margin-left: 100%;

color:red;

width: 300%;

} to {

margin-left: 0%;

color:blue;

width: 100%;

} }

Hier wurde kein Prozentsatz angegeben, sondern „from“ und „to“.

Ergebnis:

Abbildung 68 Keyframe Beispiel, Laufschrift

(67)

4.3.8 Beispiel 3

HTML-Code:

CSS-Code:

h1 {

animation-name: slidein;

} h2 {

animation-name: slidein2;

animation-timing-function: ease-in;

animation-iteration-count: infinite;

animation-direction: alternate;

}

Ergebnis:

Abbildung 69 Keyframe Beispiel, Laufschrift, unterschiedliche Geschwindigkeiten Die untere Überschrift ist deutlich langsamer.

4.3.9 Beispiel 4

HTML-Code:

</div>

</div>

(68)

CSS-Code:

.box1 {

animation-name: slide1;

width: 300px;

position:relative;

}

@keyframes slide1 { 0% {

background-color:red;

top:0px;

left:400px;

} 50% {

background-color:blue;

top:100px;

left:200px;

} 100% {

background-color:green;

top:200px;

left:0px;

} }

.box2 {

animation-name: slide2;

width: 300px;

position:absolute;

}

@keyframes slide2 { 0% {

background-color:red;

top:0px;

left:0px;

} 50% {

background-color:blue;

top:100px;

left:200px;

} 100% {

background-color:green;

top:200px;

left:400px;

} }

Ergebnis:

Abbildung 70 Animation mit absolute und relative-Elementen