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)

Typografische Tags

•

abbr Abkürzung und Akronyme (MWSt. / NATO)

•

Attribut title als Hint

•

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

•

bdi Text verläuft von rechts nach links

•

bdo Textrichtung ändern

•

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)

html5\html5_bsp1.xhtml

•

kdb Keybord

•

<kdb>ls –l [↵] </kdb>

kbd {

font-family: monospace;

}

•

mark markierter Text, z. B. nach einem Suchvorgang

•

q Wörtliche Rede oder Zitat

•

ohne Anführungszeichen

•

Fernöstliche Sprache:

•

rp Ruby-Klammer

•

rt Textteil einer Ruby-Annotation

Typografische Tags

(3)

•

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

•

del gelöschter Text (Varianten)

•

samp stilistisches Tag

•

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

Typografische Tags

•

inert

•

itemid

•

itemprop

•

itemref

•

itemscope

•

lang

•

itemtype

•

spellcheck

•

style

•

tabindex

•

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

(4)

• onabort

• oncancel

• onblur

• oncanplay

• oncanplaythrough

• onchange

• onclick

• oncontextmenu

• ondblclick

• ondrag

• ondragend

• ondragenter

• ondragexit

• ondragleave

• ondragover

• ondragstart

• ondrop

• ondurationchange

• onemptied

• onended

• onerror

• onfocus

• onformchange

• onforminput

• oninput

• oninvalid

• onkeydown

• onkeypress

• onkeyup

• onload

Events

• 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

Events

(5)

(6)

(7)

(8)

(9)

(10)

Semantische Elemente

•

main Hauptbereich

•

arcticle Artikel

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

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

•

header Kopfzeile für verschiedene Elemente

• Ein header-Element kann aber auch als Einstieg dienen

•

section Absätze

•

aside Seitenleiste

•

footer Fußzeile für verschiedene Elemente

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

•

nav Navigator-Element

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

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

Semantische Elemente

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

• Barrierefreiheit

• Siri / Cortana / Google Now

•

main

•

arcticle

•

header

•

section

•

aside

•

footer

•

nav

(11)

(12)

Weitere HTML5-Elemente

•

nav Navigator-Element

•

datetime Inhalt ist ein Datum

•

summary Summary ist die Zusammenfassung

•

details Mit „details“ erhält man erweiterte Blöcke

(13)

Summary / Details

Nav-Element

•

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.

(14)

Verwendung eines Nav-Elementes

•

Liste der Inhalte (à la Wikipedia)

• Scheint sinnvoll.

•

Schalter zur vorherigen / nächsten Seite

•

Auch diese Technik ist möglich.

•

Such-Element

• Sehr wichtig, gerade bei großen Seiten.

•

Breadcrumbs (Brotkrümelnavigation)

• Design Pattern in HTML-UI

• Anzeige der einzelnen parent-Seiten

clicks

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

Nav-Element

(15)

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

}

nav ul{

list-style-type: none;

}

CSS Selektoren des Nav-Element

(16)

Progress-Element

•

Eine Progressbar dient zur Darstellung einer Fortschrittanzeige.

•

HTML4

• Realisiert mit verschiedenen Bildern

• Oder mit div‘s und javaskript

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

•

HTML5

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

Progress-Element

(17)

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

Progress-Element in Firefox und IExplorer

(18)

■

Datentyp für Emailadresse(n)

■

Datentyp für URLs

■

Datentypen für numerische Eingaben

•

Numerischer Wert

•

Bereichsdialogs

■

Datentyp für Datumsangaben

•

Tag, Monat, Jahr

•

Datum und Zeit

•

Datum, Zeit, Woche

■

Farbauswahl

■

Sucheingabe

Formularelemente in HTML 5

■

Datentyp für Emailadresse(n):

•

<input type="email" />

■

Datentyp für URLs:

•

<input type="url" />

■

Datentypen für numerische Eingaben

•

<input type="number

" /

>

•

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

" /

>

■

Auswahl einer Farbe

•

<input type="color

" /

>

■

Sucheingabe

•

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

(19)

■

Datentyp für Datumsangaben

•

<input type="day" />

•

<input type="month" />

•

<input type="year" />

•

<input type="datetime" />

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

•

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

•

<input type="week" />

•

<input type="time" />

Stunde, Minute, Sekunde und Millisekunde ohne Zeitzone

Formularelemente in HTML 5

Neue Datums und Zeit-Elemente

(20)

Neue Datums und Zeit-Elemente

(21)

Neue Datums und Zeit-Elemente

(22)

Fehlerhaft

• day

• datetime

• datetime_local

Ok

•date

•month

•week

•time

Chrome

Fehlerhaft

• Day

• year

• datetime

Ok

•date

•month

•week

Opera

(23)

Firefox

Fehlerhaft

•ALLE

Fehlerhaft

• ALLE

IExplorer

(24)

•function checkFormDayDate( value )

•function checkFormMonth( value )

•function checkFormYear( value )

•function checkFormDatetime( value )

•function checkFormWeek( value )

•function checkFormTime( value )

•functionabsolutDay(day, month, year)

•functionisSchaltjahr(year)

•functioncheckDate(day, month, year)

•functioncheckYear(year)

•functioncheckTime(hour, min, sec)

•functioncheckWeek(week, year)

Testroutinen:

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 {

return false;

} } }

functioncheckYear(year) {

"use strict;"

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

else return true;

}

(25)

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

}

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;

(26)

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;

}

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

(27)

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 {

(28)

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

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

(29)

function checkFormWeek( value) {

"use strict;"

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

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

return false;

} var year;

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

(30)

functioncheckWeek(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;

}

functionabsolutDay(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++;

}

return Math.floor(f);

} // absolutDay

(31)

functioncheckWeek2(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;

}

Neue Telefon, Url und EMail-Elemente (IExplorer)

(32)

Neue Telefon, Url und EMail-Elemente

Kaum Interaktion

Neue Telefon, Url und EMail-Elemente

(33)

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.

<label for="userID1" >Farbauswahl :

</label>

(34)

<label for="userID3" >Output:

</output>

</label>

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;

}

Firefox Opera Chrome

IExplorer

(35)

Output-Element

•

Ersatz für „ajax“-Elemente

•

Automatisches Berechnen

• For-Attribute

<h1>Output-Element</h1>

<form onsubmit="return false"

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

<input name="a" type="number" step="any" /> +

<input name="b" type="number" step="any"/> =

<output name="o" />

</form>

Output-Element

(36)

<form onsubmit="return false"

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

<input name="a" id="a" type="number" step="any"/> +

<input name="b" id="b" type="number" step="any"/> =

</form>

Output-Element: bsp2, bsp3

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

<input name="a" id="a" type="number" step="any"/> +

<input name="b" id="b" type="number" step="any"/> =

</form>

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

(37)

Range-Element

•

Anwender bestimmt interaktiv die Eingabe

•

Prozentuale, visuelle, Eingabe

•

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

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>

Range-Element

(38)

Datelist-Element

•

Suggestion

•

Optionale Eingaben

•

Vergleichbar mit der ComboBox, aber keine festen Vorgaben

Alte Technik

<option > Internet Explorer</option >

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

<option > Chrome</option >

<option > Opera</option >

<option > Safari</option >

</select>

Neue Technik

<datalistid="browsers2">

</datalist>

(39)

Datelist-Element: Chrome

•

Funktioniert auch mit type="days"

•

"month", "week", und "date" nicht möglich

Datelist-Element: Chrome

•

Funktioniert auch mit type="week"

(40)

Datelist-Element: Chrome

•

Funktioniert auch mit type="year"

Datelist-Element: Chrome

•

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

(41)

Datelist-Element: Chrome

•

Funktioniert auch mit type="time"

Validierung

•

autocomplete

•

autofocus

•

label

•

placeholder

•

required

(42)

<labelfor="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>

<label for="userId" > Password

<input type="text" title="Sinnvolles Passwort" name="password"

id="userPassword" value="" placeholder="Ihr neues Passwort"

autocomplete="on" size="14" maxlength="10"

required="required" />

</label>