Vorlesung: Entwicklung multimedialer Anwendungen

Größe: px

Ab Seite anzeigen:

Download "Vorlesung: Entwicklung multimedialer Anwendungen"

Jörg Simen
vor 5 Jahren
Abrufe

semantischen HTML5-Elementen Einbau eines Logos mit einer Transition von rechts nach links die Größe geht von 10 Pixel auf 200 Pixel Einfügen einer Grafik mit Koordinaten-Links Dynamische Anzeige der

1 Hochschule Harz FB Automatisierung und Informatik 3. Laborversuch: Thema: HTML5 CSS3 Erstellen einer XHTML-Seite mit Transition-Elementen Vorlesung: Entwicklung multimedialer Anwendungen Versuchsziele: Erstellen einer XHTML-Datei mit einfachen semantischen HTML5-Elementen Einbau eines Logos mit einer Transition von rechts nach links die Größe geht von 10 Pixel auf 200 Pixel Einfügen einer Grafik mit Koordinaten-Links Dynamische Anzeige der Inhalte Aufgabe: Erstellen Sie eine XHTML-Homepage, in der ein Logo und eine interaktive Grafik des Harzes eingefügt werden soll. Das Logo soll mittels einer Transition (from, to) sich beim Start von rechts nach links bewegen. Gleichzeitig soll sich das Logo in der Größe verändern (10 Pixel zu 200 Pixel). Die Interaktion der Harzgrafik bezieht sich auf den Aufruf zweier Javascript-Methoden (mouseover und mouseout). Damit werden Details der Links mittels Java-Script dargestellt. Zur Orientierung: Code der Javaskript-Routinen: 10 Zeilen (ohne die Inhaltstexte) HTML-Code: 55 Zeilen CSS-Code: 43 Zeilen Musterlösung: Die Animation am Anfang Der Mauskursor liegt im Bereich von WR. Der rote Rahmen ist nicht in der Musterlösung! 1. Anforderungen: Das Firmenlogo muss sich beim Start von rechts oben zum Zielplatz bewegen. Für die Harz-Grafik stehen drei Formate zur Verfügung: o Harz-small.png ( Pixel) o Harz-middle.png ( Pixel) o Harz.png ( Pixel) Implementieren Sie mindestens drei interaktive Links in der Harz-Grafik. Implementieren Sie mindestens ein Rechteck- und Poly-Link. 1

2 2. Ablauf: Laden Sie die neueste Version meines HTML-Editors auf Ihrem Rechner. Erstellen der XHTML-Seite. o der Hauptname: Labor3 Laden Sie die Zip-Datei der drei Bilder von meiner Homepage. Kopieren Sie die drei Bilder in ihr Projektverzeichnis. 3. Hinweise: In HTML-Code wird keine Groß- und Kleinschreibung unterschieden. In Java-Code wird Groß- und Kleinschreibung unterschieden. Dies gilt z. B. für Namen und Attribute (value). Wenn in Javascript ein Fehler auftritt, wird das Programm ohne Meldung beendet. Abhilfe sind hier alert -Meldungen oder die Benutzung der Fehleranalyse in Firefox / Opera / Chrome. Man sollte immer am Ende des Java-Scripts eine alert-meldung ausgeben. Dann weiß man, dass das Skript bis zum Ende durchgelaufen ist. 3. Struktur der Seite Erstellen Sie folgende Abschnitte in Ihrem HTML-Code 3. Abschnitt main In diesem Abschnitt erstellen Sie eines mittels CSS-Selektors einen Radialen-Gradienten- Hintergrund: o Form: Ellipse o Ursprung: farthest-side o Ursprung: mitte, rechts o Farben Weiß Rot:221 Blau:213 Grün: Einfügen des Logos Fügen Sie das Firmenlogo Harz-Logo.png mit einer Breite von 200 Pixel ein. Verweisen Sie auf den class-selektor img1. Implementieren Sie die Animation für das Firmenlogo mit dem Selektor img1 : o Animationsdauer: 3 Sekunden. o Animationgeschwindigkeit: beliebig, aber nicht linear. o Position: Muss nicht unbedingt relativ sein. o Verwenden Sie die Animationstechnik keyframe. 2

4. Einfügen der Harzgrafik Fügen Sie nun die ausgewählte Harzgrafik ein. Für die Harz-Grafik stehen drei Formate zur Verfügung: o Harz-small.png (530 405 Pixel) o Harz-middle.

3 4. Einfügen der Harzgrafik Fügen Sie nun die ausgewählte Harzgrafik ein. Für die Harz-Grafik stehen drei Formate zur Verfügung: o Harz-small.png ( Pixel) o Harz-middle.png ( Pixel) o Harz.png ( Pixel) Fügen Sie nun eine Area-Map hinzu (siehe Anhang). Fügen Sie nun drei Links zur Grafik. o Mindestens ein Rechteck-Link o Mindestens ein Poly-Link Die jeweiligen Links verweisen auf die Seite #. Dies ist notwendig, da später mit diesen Links zwei Javascripte aufgerufen werden sollen. o href="#" 5. Einfügen des Fußbereiches Fügen Sie in den footer-bereich Verweise auf Seiten, die weitere Informationen zum Harz zur Verfügung stellen, ein. 6. Einfügen des Popup-Bereiches Fügen Sie nach dem footer-bereich einen div-abschnitt mit der Id zusatztextid ein. Fügen Sie nun folgenden Code in den neuen Bereich: <div class="zusatztext"> Ich komme gut durch das Labor </div> Nun erstellen Sie in der CSS-Datei einen passenden Selektor: o Hintergrundfarbe: Blau:204 Rot:109 Grün:186 o Breite: ca. 370 Pixel o Radius: ca. 80 Pixel o Außenrand: 1,5 em o Obere Position: 300 Pixel o Rechte Position: 50 Pixel o Der Text soll zentriert sein. o Die Positionsangaben sollen sich auf den body beziehen. Ergebnis: Abbildung 1 Anzeige der "Popupbereiches" 3

4 7. Java-Skript Hinweise: o Testen Sie diese Funktion NUR mit einem Area-Map-Abschnitt. o Testen Sie jede Änderung. Entfernen Sie den Inhalt des Abschnittes mit der Id zusatztextid. Fügen Sie einen Java-Skript-Abschnitt in den head -Bereich ein. Um das MouseOver-Event auszuführen, schreiben Sie in den ersten Area-Abschnitt die Verknüpfung zum Event: o onmouseover="alert('hallo');" Wenn Sie jetzt mit der Maus über den Bereich gehen, sollte die Meldung erscheinen. Fügen Sie zwei Funktionen in den Java-Skript-Abschnitt o showtext(nummer) o removetext() Verknüpfen Sie die Funktion showtext mit dem Event onmouseover. o Tragen Sie in der Funktion showtext eine alert-meldung ein. Verknüpfen Sie die Funktion removetext mit dem Event onmouseoout. Testen Sie den Mechanismus mit einem alert -Aufruf in der Funktion showtext. 8. Funktion showtext Der Parameter ist eine Nummer Die Nummer zeigt den aktuellen Link in der Harz-Grafik an. Erstellen Sie eine Referenz auf den Abschnitt mit der Id zusatztextid. Setzen Sie eine Textvariable mit einem beliebigen Text. Weisen Sie den Text und eventuell noch weitere Zeichen dem Abschnitt zu. Hinweis: o Sobald ein Html-Abschnitt in die HTML-Seite eingefügt wird, wird der passende Selektor ausgeführt. o Optional können sie die Nummern 47, 60 und 62 verwenden. Verknüpfen Sie die restlichen Area-Map mit den beiden Funktionen. Fügen Sie die restlichen Texte hinzu. Textzugaben: Wenigerode hat ein historisches Rathaus. Die Harzer-Schmalspurbahn fährt dort ihre Runden bis zum Brocken. Und die Hochschule Harz hat dort ihren Hauptsitz. Die Rappbodetalsperre ist eine 1952 bis 1959 errichtete bestehende Stauanlage im Harz, die besonders im Stadtgebiet von Oberharz am Brocken im Landkreis Harz in Sachsen-Anhalt liegt. 4

5 Anhang Animation:.myClass{ animation-duration:10s; animation-name:myanimation; myanimation { from { background-color:red; to { background-color:green; animation-timing-function (zeitliche Veränderung): animation-timing-function: ease Am Anfang und Ende langsam, Mitte schnell animation-timing-function: ease-in Am Anfang langsam animation-timing-function: ease-out Am Ende langsam animation-timing-function: ease-in-out Am Anfang und Ende langsam animation-timing-function: linear animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) o hat vier Parameter o jeder hat den Bereich von 0 bis 1 o 1 ist langsam Koordinaten-Links bei Bildern: Bilder können nicht nur einen Link haben. Es sind maximal Höhe Breite Links möglich. Sinnvoll sind aber Bereiche à la Rechteck, Kreis oder Polygone. Die Technik, Areamap, dazu ist seit Jahren in HTML eingebaut. Ablauf: Einfügen eines Bildes Einfügen im img-tag das Attribut usemap mit einem Verweis auf eine Id. Eintragen eines map -Abschnittes mit der oben eingetragenen Id. Nun wird für jeden Link ein Area-Bereich eingetragen. <img src="grafik.png" alt="hier sollte sinnvoller Text stehen" usemap="#mymap" /> <map name="mymap"> <area shape="rect" alt="alt-text" coords="100, 110, 150,200" href=" /> </map> Arten der Definition der Bereiche: Typ Referenz Koordinaten poly bsp1.html "x1,y1 x2,y2, x3,y3 x4,y4" circle bsp1.html "x1,y1, radius" rect bsp1.html "x1,y1 x2,y2" point bsp1.html "x1,y1" Am einfachsten ist es, wenn man mit einem guten HTML-Editor eine Grafik einfügt. Dann sollte man automatisch gefragt werden, ob man eine Area-Map einfügen will. 5

Basic html Eintrag Images Eintrag Images-Coords Dort wählt man dann den passenden Area-Typ aus: Java-Script Eigenschaften Javascript kennt keine definierten Variablentypen.

6 Abbildung 2 Frage, nach dem Einfügen eines Map-Bereiches Ergebnis im HTML-Code: <img src="grafik.png" alt="text of description" border="0" usemap="#shapeareaname" /> <map name="shapeareaname"> </map> Nun positioniert man den Kursor in den map -Abschnitt und ruft die Coords-Funktion auf: Menü Basic html Eintrag Images Eintrag Images-Coords Dort wählt man dann den passenden Area-Typ aus: Java-Script Eigenschaften Javascript kennt keine definierten Variablentypen. Sie müssen aber in XHTML eine Variablen mit var deklarieren. Das geht auch in einer Zuweisung durch einen Zahlenwert oder String. alert Zeigt eine Meldung an. Die Funktion hat nur Kleinbuchstaben. alert("hier Ende des Skriptes"); Erstellen eines Zeichens aus einer Zahl: sstr = String.fromCharCode(59); Wichtige Zeichen aus der ASCII-Tabelle: 60: < 47: / 62: > 6

7 Dynamisches Java-Script: Mit Hilfe der Funktion getelementbyid kann man auf einen Id-Selektor-Abschnitt zugreifen bzw. eine Referenz holen. Mit der Methode innerhtml wird der Inhalt neu zugewiesen. Beispiel: sid="extra"; var element = document.getelementbyid(sid); element.innerhtml = '<b>informatikstudenten sind sehr gut</b>'; Mit dem Attribut style.display kann man den Block sichtbar machen. element.style.display = 'block'; Mit dem Attribut style.display kann man den Block unsichtbar machen. element.style.display = 'none'; HTML-Quellcode: XHTML: <div id=" zusatztextid" > <br /> </div> 7

Ähnliche Dokumente

Versuchsziele: Aufgabe: Hochschule Harz FB Automatisierung und Informatik. und Formulare Erstellen einer XHTML-Seite mit Formular-Elementen

Versuchsziele: Aufgabe: Hochschule Harz FB Automatisierung und Informatik. und Formulare Erstellen einer XHTML-Seite mit Formular-Elementen Hochschule Harz FB Automatisierung und Informatik Versuch: XHTML Thema: und Formulare Erstellen einer XHTML-Seite mit Formular-Elementen Versuchsziele: XHTML Darstellungen Forms erstellen und Formular-Elemente