HTML-Tutorium: SVG: Hello World 02: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
(Die Seite wurde neu angelegt: „{{HTML-Tutorium:SVG:HelloWorld:Menü}} '''Ergebnis''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04/WebContent…“)
 
Zeile 26: Zeile 26:
*[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04 Pendant zu Teil 4 des Canvas-Tutoriums]
*[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04 Pendant zu Teil 4 des Canvas-Tutoriums]


=Ein kleiner Optimierungstipp für die jQuery-Lösunge (Teil 4)=
=Ein kleiner Optimierungstipp=
 
Die Größe des Canvas muss nur an einer Stelle festgelegt werden, bei der Erzeugung des Canvas-Objektes:
 
<source lang="javascript">
  v_canvas        = document.getElementById("d_canvas");
  v_canvas.width  = 300;
  v_canvas.height =  27;
</source>
 
In Raphaël muss die Größe dagegen an zwei Stellen angegeben werden. Bei der
Erzeugung der Bühne
 
<source lang="javascript">
  v_canvas = new Raphael("d_canvas", 300, 27);
</source>
sowie bei der Definition der Umrandung in eine CSS-Datei:
 
<source lang="css">
#d_canvas
{
  width:        300px;
  height:      27px;
 
  ...
}
</source>
 
Der Grund dafür ist, dass in HTML5 zwar ein spezielles <code>canvas</code>-Element existiert,
aber kein spezielle <code>svg</code>-Element. Ersatzweise wird in Raphaël daher ein
<code>div</code>-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
sowieso stets vermieden werden (siehe [Programmierprinzip#Don.27t_repeat_yourself.2C_DRY.5B4.5D|Programmierprinzip  „Don't repeat yourself“ (Dry)]).
 
 


<references/>
<references/>

Version vom 8. Oktober 2012, 14:18 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

Inhalt | Teil 1 | Teil 2

Ergebnis: hallo.html

(SVN-Repositories: Pendant zu Teil 2 des Canvas-Tutoriums, Pendant zu Teil 3, Pendant zu Teil 4)

HTML5: Hello-<name>-Anwendung mit Raphaël (SVG)

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.

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

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:

Ein kleiner Optimierungstipp

Die Größe des Canvas muss nur an einer Stelle festgelegt werden, bei der Erzeugung des Canvas-Objektes: 

  v_canvas        = document.getElementById("d_canvas");
  v_canvas.width  = 300;
  v_canvas.height =  27;

In Raphaël muss die Größe dagegen an zwei Stellen angegeben werden. Bei der Erzeugung der Bühne 

  v_canvas = new Raphael("d_canvas", 300, 27);

sowie bei der Definition der Umrandung in eine CSS-Datei: 

#d_canvas
{
  width:        300px;
  height:       27px;

  ...
}

Der Grund dafür ist, dass in HTML5 zwar ein spezielles canvas-Element existiert, aber kein spezielle 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 sowieso stets vermieden werden (siehe [Programmierprinzip#Don.27t_repeat_yourself.2C_DRY.5B4.5D|Programmierprinzip „Don't repeat yourself“ (Dry)]).



  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML-Tutorium:_SVG:_Hello_World_02&oldid=23712“