Entwicklung multimedialer Anwendungen

(1)

Fachbereich AI, Entwicklung multimedialer Anwendungen 1

Entwicklung multimedialer Anwendungen

Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm

Hochschule Harz

FB Automatisierung und Informatik

mwilhelm@hs-harz.de

http://www.miwilhelm.de

Raum 2.202

Tel. 03943 / 659 338

Inhalt

1. Einleitung

2. Auszeichnungs-Tags / Semantische Elemente 3. Multimedia (Audio, Video)

4. CSS3 (Design)

5. SVG / Canvas

6. Tablet Ansteuerung (jQuery) 7. Geolocation

(2)

2

CSS3-Styles in HTML5

^Übergänge

^Schatten

^Drehungen

Transformationen

Neue Farbdefinition

Verlaufsfarben

Befreiung vom Box-Modell

Animationen

Beispiele in CSS3-Styles

Pseudo-Klassen

• :link

• :visited

• :hover

• :focus

• :active

• :visited

.box:hover {

border:thick dashed red;

}

</video>

(3)

Beispiele in CSS3-Styles: hover

Beispiele in CSS3-Styles: transition

Übergänge ohne Javasript

Eigenschaften des Selectors „transition“

• transition-property

• Eigenschaft, die verändert werden soll

• transition-duration

• Dauer in Sekunden

• transition-timing-function

• Berechnet die Geschwindigkeit des Übergangs

• linear, ease, etc.

• transition-delay

• Wann beginnt der Übergang

(4)

4

Beispiele in CSS3-Styles: transition

transition-timing-function

• linear

• ease

• Start langsam, Ende schnell

• ease-in

• Start langsam

• ease-out

• Start schnell, Ende langsam

• ease-in-out

• Start schnell, Mitte schnell, Ende langsam

• step-start Einzelwerte, komplex: steps(1, start);

• step-stop

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

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

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

}

(5)

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

html5-css3-text1.xhtml

(6)

6

p {

font-size:1.2em;

}

.box:hover {

background-color: black;

color:white;

transition-property:font-size;

transition-duration:5s;

transition-timing-function:ease-out;

font-size:3em;

}

html5-css3-text1.css

html5-css3-text1.xhtml

(7)

Farbdefinitionen in CSS3-Styles

In CSS3 gibt es nun auch den alpha-wert.

Funktion: rgba

•

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

Farbdefinitionen in CSS3-Styles

Beispieldatei: html5-color1.xhtml

h1 {

background-color:#FFFF00;

} h2 {

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

} h3 {

} h4 {

}

(8)

8

CSS3-Style: Transformation

Eigenschaften des Selectors „transform“

• scale

• Zoom eines Elements (x,y,xy)

• translate

• Verschiebung eines Elements (x,y,xy)

• rotate

• Rotation eines Elements (α)

• skew

• Ä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 EINEZeile

.box { width:120px;

color:green;

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

background-color:gray;

margin:5px;

}

Transformation: 1. Beispiel

Hier ist die erste Zeile<br />

Hier ist die zweite Zeile<br />

</p>

(9)

.box { width:120px;

color:green;

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

margin:5px;

}

Transformation: 2. Beispiel

</p>

Transformation: 2. Beispiel

(10)

10

.box { width:300px;

color:green;

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

margin:5px;

}

Transformation: 3. Beispiel (Video)

</video>

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

</video>

(11)

.box { width:300px;

color:green;

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

margin:5px;

}

Transformation: 4. Beispiel (Video)

</video>

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

</video>

(12)

12

CSS3-Style: Keyframes

Eigenschaften des Selectors „keyframes“

• Bezeichner

• from

• Der Startwert 0%

• to

• Der Endwert 0%

• oder Prozentzahl

• Aktuelle Prozentzahl

Nur zusammen mit dem Selector „animation“

(13)

CSS3-Style: Animation (1)

Eigenschaften des Selectors „animation“

• animation-name

• animation-delay

• in sec oder ms

• animation-duration

• in sec oder ms

• animation-iteration-count

• 1, 1.5, infinite

• animation-direction

• animation-direction: normal

• animation-direction: reverse

• animation-direction: alternate

• animation-direction: alternate-reverse

• animation-direction: normal, reverse

• animation-direction: alternate, reverse, normal

CSS3-Style: Animation (2)

• animation-play-state

• animation-play-state: running

• animation-play-state: paused

• animation-play-state: paused, running, running

• animation-timing-function (zeitliche Veränderung)

• animation-timing-function: ease

• animation-timing-function: ease-in

• animation-timing-function: ease-out

• animation-timing-function: ease-in-out

• animation-timing-function: linear

• animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)

• animation-timing-function: step-start

• animation-timing-function: step-end

• animation-timing-function: steps(4, end)

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

(14)

14

CSS3-Style: Animation (3)

• animation-fill-mode

• animation-fill-mode: none

• animation-fill-mode: forwards

• animation-fill-mode: backwards

• animation-fill-mode: both

@keyframes color-change { 0% {

background:white;

} 25% {

background:red;

} 50% {

background:green;

} 75% {

background:blue;

} 100% {

background:black;

} }

Animation / Keyframes: 1. Beispiel (Text)

</div>

.box { width:150px;

height:140px;

animation:color-change 12s;

}

(15)

Animation / Keyframes: 1. Beispiel (Text)

Animation / Keyframes: 2. Beispiel (Text)

<body>

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

</body>

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

}

(16)

16

Animation / Keyframes: 2. Beispiel (Text)

h1 {

animation-name: slidein;

}

h2 {

animation-name: slidein2;

animation-timing-function: ease-in;

animation-iteration-count: infinite;

animation-direction: alternate;

}

Animation / Keyframes: 3. Beispiel (Text)

(17)

•Die untere Überschrift ist deutlich langsamer.

Animation / Keyframes: 3. Beispiel (Text)

Animation / Keyframes: 4. Beispiel (Text)

</div>

</div>

(18)

18

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

} }

(19)

HTML5 Verläufe

Vor HTML5 musste man mittels Programm, Illustrator, GIMP, CorelDraw etc. Kacheln separat erstellen.

Nachteile: Bilderstellung, Ladezeit

HTML5 Verläufe

Verläufe lassen sich nun sehr einfach OHNEBilder erstellen

• Verläufe können beliebig komplex sein.

• Man benötigt keine Bilder.

• Der Hintergrund ist immer sofort vorhanden.

• Der Hintergrund kann gedreht werden.

• Der Hintergrund kann strahlenförmig sein.

• Diese Technik wird sehr häufig auf mobilen Geräten genutzt.

• background: linear-gradient(to bottom, green 0%, blue 100%);

• background: linear-gradient(90deg, green 0%, blue 100%);

• background: radial-gradient(red, yellow, green);

• background: radial-gradient(ellipse, red, yellow, green);

(20)

20

.bg1 {

color:yellow;

background: linear-gradient(to bottom, green 0%, blue 100%);

background: linear-gradient(90deg, green 0%, blue 100%);

}

•http://www.mediaevent.de/css/gradient.html

(21)

.bg1 { color:white;

background: linear-gradient(90deg, purple, blue, green, yellow, red, purple);

}

Quelle: html5-Verlaeufe2.xhtml

.bg1 { color:white;

background: radial-gradient(purple, blue, green, yellow, red, purple);

}

Quelle: html5-Verlaeufe3.xhtml

(22)

22

• background: linear-gradient(to bottom, green 0%, blue 100%);

• background: linear-gradient(90deg, green 0%, blue 100%);

• background: radial-gradient(red, yellow, green);

• background: radial-gradient(ellipse, red, yellow, green);

• background: radial-gradient(circle, red, yellow, green);

• Size-Parameter

• closest-side

• farthest-side

• closest-corner

• farthest-corner

• radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);

• radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);

• repeating-radial-gradient(red, yellow 10%, green 15%);

HTML5 Radial-Verläufe

.bg1 { color:white;

background: repeating-radial-gradient(red, yellow 10%, green 15%);

}