HTML-Tutorium: SVG: Hello World 02

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

Inhalt | Teil 1 | Teil 2

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

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