HTML-Tutorium: SVG: Hello World 01 - Versionsgeschichte

Kowa am 1. März 2023 um 13:16 Uhr

2023-03-01T13:16:32Z

← Nächstältere Version		Version vom 1. März 2023, 13:16 Uhr
Zeile 3:		Zeile 3:
	([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01 SVN-Repository])		([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01 SVN-Repository])

	=Voraussetzung=		==Voraussetzung==

	Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 01]] kennen.		Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 01]] kennen.

	=Ziel: Ausgabe von „Hallo Welt!“ als SVG-Grafik=		==Ziel: Ausgabe von „Hallo Welt!“ als SVG-Grafik==
	Die in [[HTML5-Tutorium: Canvas: Hello World]] erstellte Hello-World-Anwendung wird so umgeschrieben,		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.		dass die Ausgabe der Begrüßung nicht als [[Pixelgrafik]] sondern als [[Vektorgrafik]] ausgegeben wird.
Zeile 18:		Zeile 18:
	da Raphaël nur [[EcmaScript\|EcmaScript 3]] an Stelle von [[EcmaScript\|EcmaScript 5]] voraussetzt.		da Raphaël nur [[EcmaScript\|EcmaScript 3]] an Stelle von [[EcmaScript\|EcmaScript 5]] voraussetzt.

	=Anwendung „<code>HelloWorldSVG01</code>“=		==Anwendung „<code>HelloWorldSVG01</code>“==
	==Neues Projekt anlegen und speichern==		===Neues Projekt anlegen und speichern===

	Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldSVG01</code> an.		Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldSVG01</code> an.
Zeile 25:		Zeile 25:
	Speichern Sie dieses Projekt wie üblich in Ihrem Repository.		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>].
Zeile 33:		Zeile 33:
	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]].		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 ~~Projektes~~ die Datei <code>hello.html</code>.		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">
Zeile 82:		Zeile 82:
	</source>		</source>

	==Testen und Sichern des ~~Projektes~~==		===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==		===Funktionsweise von Raphaël===

	Wie funktioniert Raphaël? Ganz einfach: Raphaël fügt in das <code>div</code>-Element,		Wie funktioniert Raphaël? Ganz einfach: Raphaël fügt in das <code>div</code>-Element,
Zeile 129:		Zeile 129:
	*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]).		*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==		===JavaScript-Code auslagern===

	Lagern Sie [[HTML5-Tutorium:_Canvas:_Hello_World_01#JavaScript-Code auslagern\|wie in Teil 1 des Hello-World-Canvas-Tutoriums]]		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.		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 ~~Projektes~~==		===Testen und Sichern des Projekts===

	Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu sichern.		Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu sichern.

	=Quellen=		==Quellen==
	<references/>		<references/>
	<ol start="2">		<ol start="2">
Zeile 144:		Zeile 144:
	</ol>		</ol>

	=Fortsetzung des Tutoriums=		==Fortsetzung des Tutoriums==

	Sie sollten nun [[HTML-Tutorium: SVG: Hello World 02\|Teil 2 des Tutoriums]] bearbeiten.		Sie sollten nun [[HTML-Tutorium: SVG: Hello World 02\|Teil 2 des Tutoriums]] bearbeiten.

Kowa am 2. April 2017 um 08:17 Uhr

2017-04-02T08:17:41Z

← Nächstältere Version		Version vom 2. April 2017, 08:17 Uhr
Zeile 12:		Zeile 12:
	Vektorgrafiken können in modernen Browsern mittels [[SVG]] dargestellt werden.		Vektorgrafiken können in modernen Browsern mittels [[SVG]] dargestellt werden.

	In diesem Tutorium wird die JavaScript-Bibliothek Raphaël<ref>{{Quelle\|Baranovskiy~~, D.: Raphaël~~ (2008+) ~~– JavaScript Library~~}}</ref>		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,		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.		die [[SVG]] nicht unterstützen (wie z.B. der Internet Explorer 6.0) wird automatisch ersatzweise [[VML]] verwendet.

Kowa: /* Funktionsweise von Raphaël */

2013-10-23T13:29:19Z

Funktionsweise von Raphaël

← Nächstältere Version		Version vom 23. Oktober 2013, 13:29 Uhr
Zeile 89:		Zeile 89:

	Wie funktioniert Raphaël? Ganz einfach: Raphaël fügt in das <code>div</code>-Element,		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 ~~Brwoser~~, die Seite		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.		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:		Man könnte den SVG-Code auch direkt in die HTML-Datei einfügen:

Kowa: /* Neues Projekt anlegen und speichern */

2012-11-05T13:54:41Z

Neues Projekt anlegen und speichern

← Nächstältere Version		Version vom 5. November 2012, 13:54 Uhr
Zeile 21:		Zeile 21:
	==Neues Projekt anlegen und speichern==		==Neues Projekt anlegen und speichern==

	Legen Sie ein neues ~~Statisches~~ Web-~~Projekt~~ mit dem Namen <code>HelloWorldSVG01</code> an.		Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldSVG01</code> an.

	Speichern Sie dieses Projekt wie üblich in Ihrem Repository.		Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

Kowa: /* JavaScript-Code auslagern= */

2012-10-25T10:10:42Z

JavaScript-Code auslagern=

← Nächstältere Version		Version vom 25. Oktober 2012, 10:10 Uhr
Zeile 129:		Zeile 129:
	*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]).		*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==		==JavaScript-Code auslagern==

	Lagern Sie [[HTML5-Tutorium:_Canvas:_Hello_World_01#JavaScript-Code auslagern\|wie in Teil 1 des Hello-World-Canvas-Tutoriums]]		Lagern Sie [[HTML5-Tutorium:_Canvas:_Hello_World_01#JavaScript-Code auslagern\|wie in Teil 1 des Hello-World-Canvas-Tutoriums]]

Kowa am 25. Oktober 2012 um 10:10 Uhr

2012-10-25T10:10:21Z

← Nächstältere Version		Version vom 25. Oktober 2012, 10:10 Uhr
Zeile 82:		Zeile 82:
	</source>		</source>

	===~~Anmerkung: funktionsweise~~ von Raphaël===		==Testen und Sichern des Projektes==

			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,		Wie funktioniert Raphaël? Ganz einfach: Raphaël fügt in das <code>div</code>-Element,
Zeile 125:		Zeile 129:
	*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]).		*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]).

	~~==Testen und Sichern des Projektes==~~		=JavaScript-Code auslagern==

	~~Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis.~~

	==JavaScript-Code auslagern==

	Lagern Sie [[HTML5-Tutorium:_Canvas:_Hello_World_01#JavaScript-Code auslagern\|wie in Teil 1 des Hello-World-Canvas-Tutoriums]]		Lagern Sie [[HTML5-Tutorium:_Canvas:_Hello_World_01#JavaScript-Code auslagern\|wie in Teil 1 des Hello-World-Canvas-Tutoriums]]

Kowa: /* Anmerkung: funktionsweise von Raphaël */

2012-10-25T10:09:18Z

Anmerkung: funktionsweise von Raphaël

← Nächstältere Version		Version vom 25. Oktober 2012, 10:09 Uhr
Zeile 120:		Zeile 120:

	Raphaël bietet allerdings zwei Vorteile:		Raphaël bietet allerdings zwei Vorteile:
	# Vektorgrafiken werden auch in Browsern angezeigt, die SVG nicht darstellen können.		* 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.)		* 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]).

	==Testen und Sichern des Projektes==		==Testen und Sichern des Projektes==

Kowa: /* Anmerkung: funktionsweise von Raphaël */

2012-10-25T09:54:07Z

Anmerkung: funktionsweise von Raphaël

← Nächstältere Version		Version vom 25. Oktober 2012, 09:54 Uhr
Zeile 90:		Zeile 90:

	<source lang="html4strict">		<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>~~
	<!DOCTYPE html>		<!DOCTYPE html>
	<html>		<html>
Zeile 123:		Zeile 115:
	</svg>		</svg>
	</div>		</div>
	~~</body>~~
	~~</html>~~
	</body>		</body>
	</html>		</html>

Kowa: /* Anmerkung: funktionsweise von Raphaël */

2012-10-25T09:53:50Z

Anmerkung: funktionsweise von Raphaël

← Nächstältere Version		Version vom 25. Oktober 2012, 09:53 Uhr
Zeile 91:		Zeile 91:
	<source lang="html4strict">		<source lang="html4strict">
	<!DOCTYPE HTML>		<!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>
			<!DOCTYPE html>
	<html>		<html>
	<head>		<head>
Zeile 100:		Zeile 108:
	<div id="d_canvas">		<div id="d_canvas">
	<svg		<svg
	~~height="27"~~
	~~version="1.1"~~
	~~width="300"~~
	xmlns="http://www.w3.org/2000/svg"		xmlns="http://www.w3.org/2000/svg"
	style="overflow: hidden; position: relative;"		style="overflow: hidden; position: relative;"
Zeile 118:		Zeile 123:
	</svg>		</svg>
	</div>		</div>
			</body>
			</html>
	</body>		</body>
	</html>		</html>

Kowa: /* Anmerkung: funktionsweise von Raphaël */

2012-10-25T09:49:39Z

Anmerkung: funktionsweise von Raphaël

← Nächstältere Version		Version vom 25. Oktober 2012, 09:49 Uhr
Zeile 90:		Zeile 90:

	<source lang="html4strict">		<source lang="html4strict">
	<!DOCTYPE HTML ~~PUBLIC "-//W3C//DTD HTML 4.01//EN"~~		<!DOCTYPE HTML>
	~~"http://www.w3.org/TR/html4/strict.dtd"~~>
	<html>		<html>
	<head>		<head>