HTML-Tutorium: SVG: Hello World 02: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
Zeile 87: | Zeile 87: | ||
Für HTML5 funktioniert der W3C-Validator auch: | Für HTML5 funktioniert der W3C-Validator auch: | ||
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_01%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des Canvas-Beispiels, Teil 1] | * [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_01%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices Validierung des Canvas-Beispiels, Teil 1] | ||
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_02%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des Canvas-Beispiels, Teil 2] | * [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_02%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des Canvas-Beispiels, Teil 2] | ||
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_03%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des Canvas-Beispiels, Teil 3] | * [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_03%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des Canvas-Beispiels, Teil 3] |
Version vom 23. Oktober 2013, 14:37 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen:
Korrektheit: 4 (großteils überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 4 (sehr gut) |
HTML-Tutorium Hello World: JavaScript | Canvas | SVG
Musterlösung: hallo.html
(SVN-Repositories: Pendant zu Teil 2 des Canvas-Tutoriums, Pendant zu Teil 3, Pendant zu Teil 4)
Voraussetzung
Sie sollten die Inhalte der Tutorien HTML5-Tutorium: Canvas: Hello World 02, Hello World 03 und Hello World 04 sowie des Tutoriums HTML-Tutorium: SVG: Hello World 01 kennen.
Ziel: Ausgabe von „Hallo <Benutzername>!“ als SVG-Grafik
Die in HTML-Tutorium: SVG: Hello World 01 erstellte Hello-World-Anwendung wird so umgeschrieben,
dass ein Benutzer seinen Namen eingeben kann und er nach Klick auf den OK
-Button mit seinem Namen
begrüßt wird.
Anwendungen „HelloWorldSVG02
“, „HelloWorldSVG03
“ und „HelloWorldSVG04
“
Gehen Sie bei der Erweiterung der SVG-Hello-World-Anwendung genauso vor, wie bei der Erweiterung der Canvas-Hello-World-Anwendung. Das heißt, befolgen Sie die Anweisungen der Tutorien
- HTML5-Tutorium:_Canvas:_Hello_World_02,
- HTML5-Tutorium:_Canvas:_Hello_World_03 und
- HTML5-Tutorium:_Canvas:_Hello_World_04,
ersetzen dabei aber jedes Mal den Canvas-Code durch einen äquivalenten SVG-Code.
Wenn Sie beim Erzeugen des SVG-Codes Probleme haben sollten, können Sie in den SVG-Musterlösungen spicken:
- Pendant zu Teil 1 des Canvas-Tutoriums
- Pendant zu Teil 2 des Canvas-Tutoriums
- Pendant zu Teil 3 des Canvas-Tutoriums
- Pendant zu Teil 4 des Canvas-Tutoriums
HTML 4 vs. HTML5
Beachten Sie, dass Teil 1 des SVG-Hello-World-Tutoriums in HTML 4 geschrieben wurde, während das Canvas-Hello-World-Tutorium in HTML5 realisiert wurde.
Wenn Sie den Code der Canvas-Tutorien 2, 3 und 4 für das SVG-Tutorium wiederverwenden wollen, sollten Sie die Datei hallo.html jeweils ebenfalls von HTML5 auf HTML 4 umstellen. Hierbei ergeben sich ein paar kleine, aber subtile Veränderungen.
Für Formulare gibt es das label
-Element noch nicht.
Dafür müssen Formularelemente in p
-Elemente (oder Änhliches)
„gepackt“ werden.
<form action="">
<p class="form">
Ihr Name:
<input id="d_name" type="text" value="" >
<input type="button" value="OK" onmousedown="sayHello()" >
</p>
</form>
Von diesen p
-Elementen sollten per CSS der Rand (margin
)
entfernt werden, damit das Layout erhalten bleibt:
/* In HTML 4 müssen Formularelemente in p-Elemente (oder Ähnliches)
* eingebettet werden. Damit diese Elemente optisch nicht auffallen,
* wird ihr Rand eliminiert.
*/
.form
{ margin: 0px;
}
Etc. pp.
Um zu überprüfen, ob man validen HTML-Code erzeugt hat, kann man sich des W3C-HTML-Validators bedienen. Das sollten man bei allen HTML-Dateien machen, die man erstellt.
Die Musterlösungen dieses Tutoriums sind valide:
- Validierung des SVG-Beispiels, Teil 1
- Validierung des SVG-Beispiels, Teil 2
- Validierung des SVG-Beispiels, Teil 3
- Validierung des SVG-Beispiels, Teil 4
Anmerkung
Für HTML5 funktioniert der W3C-Validator auch:
- Validierung des Canvas-Beispiels, Teil 1
- Validierung des Canvas-Beispiels, Teil 2
- Validierung des Canvas-Beispiels, Teil 3
- Validierung des Canvas-Beispiels, Teil 4
Ein kleiner Optimierungstipp
Die Größe des Canvas muss nur an einer Stelle festgelegt werden, bei der Erzeugung des Canvas-Objektes:
g_canvas = document.getElementById("d_canvas");
g_canvas.width = 300;
g_canvas.height = 27;
In Raphaël muss die Größe dagegen an zwei Stellen angegeben werden. Bei der Erzeugung der Bühne
g_canvas = new Raphael("d_canvas", 300, 27);
sowie in einer CSS-Datei (z.B. bei der Festlegung des Layouts der Umrandung ):
#d_canvas
{
width: 300px;
height: 27px;
...
}
Der Grund dafür ist, dass in HTML5 zwar ein spezielles canvas
-Element existiert,
aber kein spezielles svg
-Element. Ersatzweise wird in Raphaël daher ein
div
-Element verwendet, dessen Größe dann allerdings via CSS explizit festgelegt werden
muss.
Die Definition der Größe einer Raphaël-Bühne an zwei unterschiedlichen Stellen sollte vermieden werden, da es bei Änderung der Bühnengröße zu Inkonsitenzen kommen kann (wenn die Größe versehentlich nur an einer Stelle geändert wird). Code-Verdopplung sollte gemäß dem Programmierprinzip „Don't repeat yourself“ (Dry) sowieso stets vermieden werden.
In der Version 4 des SVG-Hello-World-Tutoriums kann dieses Problem recht elegant gelöst werden.
Die Größe der Bühne wird in der JavaScript-Datei CONSTANT.js
festgelegt:
var CANVAS_WIDTH = 300;
var CANVAS_HEIGHT = 27;
Bei der Formatierung der Raphaël-Bühne (Hervorhebung des Randes) wird die Größe des zugehörigen
div
-Containers nicht mehr mittels statischem CSS sondern mittels JavaScript (genauer: jQuery)
unter Rückgriff auf diese beiden Konstanten festgelegt:
g_canvas = new Raphael("d_canvas", CANVAS_WIDTH, CANVAS_HEIGHT);
$("#d_canvas")
.css ({"width": CANVAS_WIDTH,
"height": CANVAS_HEIGHT,
});
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Die restlichen Quellen wurden direkt im Text angegeben.
Fortsetzung des Tutoriums
Sie sollten nun das Minipong-Canvas-Tutorium bearbeiten, sofern Sie dies noch nicht gemacht haben. Anderenfalls können Sie gleich mit dem Minipong-SVG-Tutorium forfahren.