HTML-Tutorium: SVG: Hello World 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(59 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{ | {{HTML-Tutorium:SVG:HelloWorld:Menü}} | ||
''' | '''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01/WebContent/hallo.html <code>hallo.html</code>] | ||
([http://glossar.hs-augsburg.de/beispiel/tutorium/ | ([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01 SVN-Repository]) | ||
==Voraussetzung== | |||
= | |||
Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 01]] kennen. | |||
==Ziel: Ausgabe von „Hallo Welt!“ als SVG-Grafik== | |||
Die in [[HTML5-Tutorium: Canvas: Hello World]] erstellte Hello-World-Anwendung wird so umgeschrieben, | |||
dass die Ausgabe der Begrüßung nicht als [[Pixelgrafik]] sondern als [[Vektorgrafik]] ausgegeben wird. | |||
Vektorgrafiken können in modernen Browsern mittels [[SVG]] dargestellt werden. | |||
In diesem Tutorium wird die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy (2008+)}}</ref> | |||
verwendet. Diese Bibliothek stellt Vektorgrafiken mit Hilfe von SVG in Browsern dar, die dies unterstützen. In Browsern, | |||
die [[SVG]] nicht unterstützen (wie z.B. der Internet Explorer 6.0) wird automatisch ersatzweise [[VML]] verwendet. | |||
Das heißt, diese Anwendung funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern, | |||
da Raphaël nur [[EcmaScript|EcmaScript 3]] an Stelle von [[EcmaScript|EcmaScript 5]] voraussetzt. | |||
==Projekt | ==Anwendung „<code>HelloWorldSVG01</code>“== | ||
===Neues Projekt anlegen und speichern=== | |||
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldSVG01</code> an. | |||
Speichern Sie dieses Projekt wie üblich in Ihrem Repository. | |||
==Dateien erstellen== | ===Dateien erstellen=== | ||
===<code>raphael.js</code>=== | ====<code>raphael.js</code>==== | ||
Erstellen Sie den Ordner <code>WebContent/lib</code> und legen Sie in diesen Ordner | Erstellen Sie den Ordner <code>WebContent/lib</code> und legen Sie in diesen Ordner | ||
die Datei [http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js <code>raphael-min.js</code>]. | die Datei [http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js <code>raphael-min.js</code>]. | ||
Gehen Sie dabei genauso vor, wie beim Einbinden von <code>jQuery</code> im [[HTML5-Tutorium:_Canvas:_Hello_World_04#Einbinden_von_jQuery|4. Teil des Hello-World-Canvas-Tutoriums]]. | |||
# | |||
===<code>hello.html</code>=== | ====<code>hello.html</code>==== | ||
Erstellen Sie im Ordner <code>WebContent</code> des | Erstellen Sie im Ordner <code>WebContent</code> des Projekts die Datei <code>hello.html</code>. | ||
====Inhalt von <code>hello.html</code>==== | =====Inhalt von <code>hello.html</code>===== | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<!DOCTYPE | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" | ||
"http://www.w3.org/TR/html4/strict.dtd"> | |||
<html> | <html> | ||
<head> | <head> | ||
<title>HTML5-Tutorium: | |||
<meta charset= | <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt --> | ||
<title>HTML5-Tutorium: SVG: Hello World 01</title> | |||
<!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. --> | |||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |||
<!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät --> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> | ||
< | |||
<script type="text/javascript" | <!-- Laden von Raphael --> | ||
<script type="text/javascript" src="lib/raphael-min.js"></script> | |||
<!-- Schreiben von "Hallo Welt!" auf der Bühne | |||
(nachdem die Seite geladen wurde). --> | |||
<script type="text/javascript"> | |||
function init() | |||
{ var l_canvas = new Raphael("d_canvas", 300, 27); | |||
l_canvas | |||
.text(5, 13, "Hallo Welt!") | |||
.attr({"font-family": "'Times New Roman', Times, serif", | |||
"font-size": 20, | |||
"font-weight": "bold", | |||
"text-anchor": "start", | |||
}); | |||
}; | |||
</script> | |||
</head> | </head> | ||
<body onload="init()"> | <body onload="init()"> | ||
<!-- | <!-- DIV, in dem die Bühne (Raphaël paper)) zu liegen kommt --> | ||
< | <div id="d_canvas"> </div> | ||
</body> | </body> | ||
Zeile 92: | Zeile 82: | ||
</source> | </source> | ||
==Testen und Sichern des | ===Testen und Sichern des Projekts=== | ||
Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis | Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis. | ||
===Funktionsweise von Raphaël=== | |||
Wie funktioniert Raphaël? Ganz einfach: Raphaël fügt in das <code>div</code>-Element, | |||
das ihm als Bühne übergeben wurde, SVG-Code ein und veranlasst den Browser, die Seite | |||
neu zu rendern. Das Hello-Word-Beispiel funktioniert bei SVG-fähigen Browsern auch vollkommen ohne JavaScript- und Raphaël. | |||
Man könnte den SVG-Code auch direkt in die HTML-Datei einfügen: | |||
<source lang="html4strict"> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<title>HTML5-Tutorium: SVG: Hello World 01</title> | |||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> | |||
</head> | |||
<body> | |||
<div id="d_canvas"> | |||
<svg | |||
xmlns="http://www.w3.org/2000/svg" | |||
style="overflow: hidden; position: relative;" | |||
> | |||
<desc> | |||
Created with Raphaël 2.1.0; | |||
simplified and copied into the HTML code by W. Kowarschick | |||
</desc> | |||
<text | |||
style="text-anchor: start; font: bold 20px 'Times New Roman',Times,serif;" | |||
x="5" y="13" | |||
> | |||
Hallo Welt! | |||
</text> | |||
</svg> | |||
</div> | |||
</body> | |||
</html> | |||
</source> | |||
Raphaël bietet allerdings zwei Vorteile: | |||
* Vektorgrafiken werden auch in Browsern angezeigt, die SVG nicht darstellen können. | |||
* Die Vektorgrafiken können zur Laufzeit dynamisch verändert werden. (Dies wäre allerdings auch mit Hilfe von [[CSS-Animationen]] oder direkt mit JavaScript möglich.) | |||
Einen Nachteil hat Raphaël allerdings auch: | |||
*Man kann keine SVG-Dateien direkt in Raphaël importieren (da Raphaël eine Vektorgrafik ja nicht immer mittels SVG anzeigt). Vereinzelt findet man allerdings entsprechende Raphaël-Erweiterungen im Netz (z.B. [http://code.google.com/p/aria-math-and-science/source/browse/trunk/powersim/lib/raphael-svg-import.js?spec=svn72&r=72 raphael-svg-import.js] oder [https://github.com/sanojian/raphael-svg-import raphael-svg-import von sanojian]). | |||
===JavaScript-Code auslagern=== | |||
Lagern Sie [[HTML5-Tutorium:_Canvas:_Hello_World_01#JavaScript-Code auslagern|wie in Teil 1 des Hello-World-Canvas-Tutoriums]] | |||
den JavaScript-Code aus der HTML-Datei <code>hallo.html</code> in die JavaScript-Datei <code>js/main.js</code> aus. | |||
===Testen und Sichern des Projekts=== | |||
Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu sichern. | |||
=Quellen= | ==Quellen== | ||
<references/> | <references/> | ||
<ol start="2"> | <ol start="2"> | ||
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li> | <li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li> | ||
</ol> | </ol> | ||
= | ==Fortsetzung des Tutoriums== | ||
Sie sollten nun [[HTML-Tutorium: SVG: Hello World 02|Teil 2 des Tutoriums]] bearbeiten. | |||
<noinclude>[[Kategorie: | <noinclude>[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | ||
</noinclude> | </noinclude> |
Aktuelle Version vom 1. März 2023, 15:16 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-Repository)
Voraussetzung
Sie sollten die Inhalte des Tutoriums HTML5-Tutorium: Canvas: Hello World 01 kennen.
Ziel: Ausgabe von „Hallo Welt!“ als SVG-Grafik
Die in HTML5-Tutorium: Canvas: Hello World erstellte Hello-World-Anwendung wird so umgeschrieben, dass die Ausgabe der Begrüßung nicht als Pixelgrafik sondern als Vektorgrafik ausgegeben wird. Vektorgrafiken können in modernen Browsern mittels SVG dargestellt werden.
In diesem Tutorium wird die JavaScript-Bibliothek Raphaël[1] verwendet. Diese Bibliothek stellt Vektorgrafiken mit Hilfe von SVG in Browsern dar, die dies unterstützen. In Browsern, die SVG nicht unterstützen (wie z.B. der Internet Explorer 6.0) wird automatisch ersatzweise VML verwendet. Das heißt, diese Anwendung funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern, da Raphaël nur EcmaScript 3 an Stelle von EcmaScript 5 voraussetzt.
Anwendung „HelloWorldSVG01
“
Neues Projekt anlegen und speichern
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen HelloWorldSVG01
an.
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
Dateien erstellen
raphael.js
Erstellen Sie den Ordner WebContent/lib
und legen Sie in diesen Ordner
die Datei raphael-min.js
.
Gehen Sie dabei genauso vor, wie beim Einbinden von jQuery
im 4. Teil des Hello-World-Canvas-Tutoriums.
hello.html
Erstellen Sie im Ordner WebContent
des Projekts die Datei hello.html
.
Inhalt von hello.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
<title>HTML5-Tutorium: SVG: Hello World 01</title>
<!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- Laden von Raphael -->
<script type="text/javascript" src="lib/raphael-min.js"></script>
<!-- Schreiben von "Hallo Welt!" auf der Bühne
(nachdem die Seite geladen wurde). -->
<script type="text/javascript">
function init()
{ var l_canvas = new Raphael("d_canvas", 300, 27);
l_canvas
.text(5, 13, "Hallo Welt!")
.attr({"font-family": "'Times New Roman', Times, serif",
"font-size": 20,
"font-weight": "bold",
"text-anchor": "start",
});
};
</script>
</head>
<body onload="init()">
<!-- DIV, in dem die Bühne (Raphaël paper)) zu liegen kommt -->
<div id="d_canvas"> </div>
</body>
</html>
Testen und Sichern des Projekts
Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis.
Funktionsweise von Raphaël
Wie funktioniert Raphaël? Ganz einfach: Raphaël fügt in das div
-Element,
das ihm als Bühne übergeben wurde, SVG-Code ein und veranlasst den Browser, die Seite
neu zu rendern. Das Hello-Word-Beispiel funktioniert bei SVG-fähigen Browsern auch vollkommen ohne JavaScript- und Raphaël.
Man könnte den SVG-Code auch direkt in die HTML-Datei einfügen:
<!DOCTYPE html>
<html>
<head>
<title>HTML5-Tutorium: SVG: Hello World 01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<div id="d_canvas">
<svg
xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; position: relative;"
>
<desc>
Created with Raphaël 2.1.0;
simplified and copied into the HTML code by W. Kowarschick
</desc>
<text
style="text-anchor: start; font: bold 20px 'Times New Roman',Times,serif;"
x="5" y="13"
>
Hallo Welt!
</text>
</svg>
</div>
</body>
</html>
Raphaël bietet allerdings zwei Vorteile:
- Vektorgrafiken werden auch in Browsern angezeigt, die SVG nicht darstellen können.
- Die Vektorgrafiken können zur Laufzeit dynamisch verändert werden. (Dies wäre allerdings auch mit Hilfe von CSS-Animationen oder direkt mit JavaScript möglich.)
Einen Nachteil hat Raphaël allerdings auch:
- Man kann keine SVG-Dateien direkt in Raphaël importieren (da Raphaël eine Vektorgrafik ja nicht immer mittels SVG anzeigt). Vereinzelt findet man allerdings entsprechende Raphaël-Erweiterungen im Netz (z.B. raphael-svg-import.js oder raphael-svg-import von sanojian).
JavaScript-Code auslagern
Lagern Sie wie in Teil 1 des Hello-World-Canvas-Tutoriums
den JavaScript-Code aus der HTML-Datei hallo.html
in die JavaScript-Datei js/main.js
aus.
Testen und Sichern des Projekts
Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu sichern.
Quellen
- ↑ Baranovskiy (2008+): Dmitry Baranovskiy; Raphaël – JavaScript Library; http://dmitrybaranovskiy.github.io/raphael/; Quellengüte: 5 (Web)
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Fortsetzung des Tutoriums
Sie sollten nun Teil 2 des Tutoriums bearbeiten.