Entwicklung multimedialer Anwendungen

Transkript

1 Entwicklung multimedialer Anwendungen Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik Raum Tel / Fachbereich AI, Entwicklung multimedialer Anwendungen 1

2 Inhalt 1. Einleitung 2. Auszeichnungs-Tags / Semantische Elemente 3. Multimedia (Audio, Video) 4. CSS3 (Design) 5. SVG / Canvas 6. Tablet Ansteuerung (jquery) 7. Geolocation Fachbereich AI, Entwicklung multimedialer Anwendungen 2

3 CSS3-Styles in HTML5 Übergänge Schatten Drehungen Transformationen Neue Farbdefinition Verlaufsfarben Befreiung vom Box-Modell Animationen Fachbereich AI, Entwicklung multimedialer Anwendungen 3

4 Beispiele in CSS3-Styles Pseudo-Klassen :link :visited :hover :focus :active :visited <video controls="controls" class="box" > <source src="small.mp4" type="video/mp4"/> <source src="small.ogv" type="video/ogg"/> </video>.box:hover { border:thick dashed red; Fachbereich AI, Entwicklung multimedialer Anwendungen 4

5 Beispiele in CSS3-Styles: hover Fachbereich AI, Entwicklung multimedialer Anwendungen 5

6 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 Fachbereich AI, Entwicklung multimedialer Anwendungen 6

7 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) Fachbereich AI, Entwicklung multimedialer Anwendungen 7

8 .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; Fachbereich AI, Entwicklung multimedialer Anwendungen 8

9 Fachbereich AI, Entwicklung multimedialer Anwendungen 9

10 <p class="box" > </p> 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 /> html5-css3-text1.xhtml g2d.drawstring("name", x,y);<br /> Fachbereich AI, Entwicklung multimedialer Anwendungen 10

11 html5-css3-text1.css 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; Fachbereich AI, Entwicklung multimedialer Anwendungen 11

12 html5-css3-text1.xhtml Fachbereich AI, Entwicklung multimedialer Anwendungen 12

13 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 Fachbereich AI, Entwicklung multimedialer Anwendungen 13

14 Farbdefinitionen in CSS3-Styles Beispieldatei: html5-color1.xhtml h1 { background-color:#ffff00; h2 { background-color:rgba(255,255,0,0.2); h3 { background-color:rgba(255,255,0,0.4); h4 { background-color:rgba(255,255,0,0.6); Fachbereich AI, Entwicklung multimedialer Anwendungen 14

15 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 EINE Zeile Fachbereich AI, Entwicklung multimedialer Anwendungen 15

16 Transformation: 1. Beispiel <p class="box" > Hier ist die erste Zeile<br /> Hier ist die zweite Zeile<br /> </p>.box { width:120px; color:green; transform:skew(30deg) translate(145px); background-color:gray; margin:5px; Fachbereich AI, Entwicklung multimedialer Anwendungen 16

17 Transformation: 2. Beispiel <p class="box" > Hier ist die erste Zeile<br /> Hier ist die zweite Zeile<br /> </p>.box { width:120px; color:green; transform:scalex(2.5) background-color:gray; margin:5px; translate(150px, 100px) skew(-45deg); Fachbereich AI, Entwicklung multimedialer Anwendungen 17

18 Transformation: 2. Beispiel Fachbereich AI, Entwicklung multimedialer Anwendungen 18

19 Transformation: 3. Beispiel (Video) <video controls="controls" > <source src="mov_bbb.mp4" type="video/mp4"/> </video> <video controls="controls" class="box" > <source src="mov_bbb.mp4" type="video/mp4"/> </video>.box { width:300px; color:green; transform:scalex(2.5) translate(150px, 100px) background-color:gray; margin:5px; skew(-15deg); Fachbereich AI, Entwicklung multimedialer Anwendungen 19

20 Fachbereich AI, Entwicklung multimedialer Anwendungen 20

21 Fachbereich AI, Entwicklung multimedialer Anwendungen 21

22 Transformation: 4. Beispiel (Video) <video controls="controls" > <source src="mov_bbb.mp4" type="video/mp4"/> </video> <video controls="controls" class="box" > <source src="mov_bbb.mp4" type="video/mp4"/> </video>.box { width:300px; color:green; transform:rotate(180deg) translate(-150px, -100px) skew(15deg); background-color:gray; margin:5px; Fachbereich AI, Entwicklung multimedialer Anwendungen 22

23 Fachbereich AI, Entwicklung multimedialer Anwendungen 23

24 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 Fachbereich AI, Entwicklung multimedialer Anwendungen 24

25 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 Fachbereich AI, Entwicklung multimedialer Anwendungen 25

26 CSS3-Style: Animation (2) Eigenschaften des Selectors animation 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) Fachbereich AI, Entwicklung multimedialer Anwendungen 26

27 CSS3-Style: Animation (3) Eigenschaften des Selectors animation animation-fill-mode animation-fill-mode: none animation-fill-mode: forwards animation-fill-mode: backwards animation-fill-mode: both Fachbereich AI, Entwicklung multimedialer Anwendungen 27

28 Animation / Keyframes: 1. Beispiel (Text) <div class="box"> Hier ist die erste Zeile<br /> Hier ist die zweite Zeile<br /> </div>.box { width:150px; height:140px; animation:color-change color-change { 0% { background:white; 25% { background:red; 50% { background:green; 75% { background:blue; 100% { background:black; Fachbereich AI, Entwicklung multimedialer Anwendungen 28

29 Animation / Keyframes: 1. Beispiel (Text) Fachbereich AI, Entwicklung multimedialer Anwendungen 29

30 Animation / Keyframes: 2. Beispiel (Text) <body> <h1>2. Beispiel Keyframes, Text</h1> </body> h1 { animation-duration: 3s; animation-name: slideleft { from { margin-left: 100%; color:red; width: 300%; to { margin-left: 0%; color:blue; width: 100%; Fachbereich AI, Entwicklung multimedialer Anwendungen 30

31 Animation / Keyframes: 2. Beispiel (Text) Fachbereich AI, Entwicklung multimedialer Anwendungen 31

32 Animation / Keyframes: 3. Beispiel (Text) h1 { animation-duration: 7s; animation-name: slidein; <h1>3. Beispiel Keyframes, Text</h1> <h2>3. Beispiel Keyframes, Text</h2> h2 { animation-duration: 7s; animation-name: slidein2; animation-timing-function: ease-in; animation-iteration-count: infinite; animation-direction: alternate; Fachbereich AI, Entwicklung multimedialer Anwendungen 32

33 Animation / Keyframes: 3. Beispiel (Text) Die untere Überschrift ist deutlich langsamer. Fachbereich AI, Entwicklung multimedialer Anwendungen 33

34 Animation / Keyframes: 4. Beispiel (Text) <div class="box1"> Hier ist die erste Zeile<br /> Hier ist die zweite Zeile<br /> </div> <div class="box2"> Hier ist die erste Zeile<br /> Hier ist die zweite Zeile<br /> </div> Fachbereich AI, Entwicklung multimedialer Anwendungen 34

35 .box1 { animation-duration: 7s; animation-name: slide1; width: 300px; 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-duration: 11s; animation-name: slide2; width: 300px; 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; Fachbereich AI, Entwicklung multimedialer Anwendungen 35

36 Fachbereich AI, Entwicklung multimedialer Anwendungen 36

37 HTML5 Verläufe Vor HTML5 musste man mittels Programm, Illustrator, GIMP, CorelDraw etc. Kacheln separat erstellen. Nachteile: Bilderstellung, Ladezeit Fachbereich AI, Entwicklung multimedialer Anwendungen 37

38 HTML5 Verläufe Verläufe lassen sich nun sehr einfach OHNE Bilder 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); background: radial-gradient(circle, red, yellow, green); Fachbereich AI, Entwicklung multimedialer Anwendungen 38

39 .bg1 { color:yellow; background: linear-gradient(to bottom, green 0%, blue 100%); background: linear-gradient(90deg, green 0%, blue 100%); Fachbereich AI, Entwicklung multimedialer Anwendungen 39

40 Fachbereich AI, Entwicklung multimedialer Anwendungen 40

41 .bg1 { color:white; background: linear-gradient(90deg, purple, blue, green, yellow, red, purple); Quelle: html5-verlaeufe2.xhtml Fachbereich AI, Entwicklung multimedialer Anwendungen 41

42 .bg1 { color:white; background: radial-gradient(purple, blue, green, yellow, red, purple); Quelle: html5-verlaeufe3.xhtml Fachbereich AI, Entwicklung multimedialer Anwendungen 42

43 HTML5 Radial-Verläufe 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%); Fachbereich AI, Entwicklung multimedialer Anwendungen 43

44 .bg1 { color:white; background: repeating-radial-gradient(red, yellow 10%, green 15%); Fachbereich AI, Entwicklung multimedialer Anwendungen 44