HTML-Tutorium: SVG: Hello World 02 - Versionsgeschichte

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

2023-03-01T13:17:56Z

← Nächstältere Version		Version vom 1. März 2023, 13:17 Uhr
Zeile 6:		Zeile 6:
	[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04 Pendant zu Teil 4])		[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04 Pendant zu Teil 4])

	=Voraussetzung=		==Voraussetzung==

	Sie sollten die Inhalte der Tutorien [[HTML5-Tutorium: Canvas: Hello World 02]], [[HTML5-Tutorium: Canvas: Hello World 03\|Hello World 03]] und [[HTML5-Tutorium: Canvas: Hello World 04\|Hello World 04]]		Sie sollten die Inhalte der Tutorien [[HTML5-Tutorium: Canvas: Hello World 02]], [[HTML5-Tutorium: Canvas: Hello World 03\|Hello World 03]] und [[HTML5-Tutorium: Canvas: Hello World 04\|Hello World 04]]
	sowie des Tutoriums [[HTML-Tutorium: SVG: Hello World 01]] kennen.		sowie des Tutoriums [[HTML-Tutorium: SVG: Hello World 01]] kennen.

	=Ziel: Ausgabe von „Hallo <Benutzername>!“ als SVG-Grafik=		==Ziel: Ausgabe von „Hallo <Benutzername>!“ als SVG-Grafik==

	Die in [[HTML-Tutorium: SVG: Hello World 01]] erstellte Hello-World-Anwendung wird so umgeschrieben,		Die in [[HTML-Tutorium: SVG: Hello World 01]] erstellte Hello-World-Anwendung wird so umgeschrieben,
Zeile 17:		Zeile 17:
	begrüßt wird.		begrüßt wird.

	=Anwendungen „<code>HelloWorldSVG02</code>“, „<code>HelloWorldSVG03</code>“ und „<code>HelloWorldSVG04</code>“=		==Anwendungen „<code>HelloWorldSVG02</code>“, „<code>HelloWorldSVG03</code>“ und „<code>HelloWorldSVG04</code>“===

	Gehen Sie bei der Erweiterung der SVG-Hello-World-Anwendung genauso vor, wie bei der		Gehen Sie bei der Erweiterung der SVG-Hello-World-Anwendung genauso vor, wie bei der
Zeile 34:		Zeile 34:
	*[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]

	=HTML 4 vs. HTML5 =		==HTML 4 vs. HTML5 ==

	Beachten Sie, dass Teil 1 des SVG-Hello-World-Tutoriums in HTML 4 geschrieben wurde, während		Beachten Sie, dass Teil 1 des SVG-Hello-World-Tutoriums in HTML 4 geschrieben wurde, während
Zeile 83:		Zeile 83:
	* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fhello_world%2Fhtml_svg_hello_world_04%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des SVG-Beispiels, Teil 4]		* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fhello_world%2Fhtml_svg_hello_world_04%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des SVG-Beispiels, Teil 4]

	==Anmerkung==		===Anmerkung===

	Für HTML5 funktioniert der W3C-Validator auch:		Für HTML5 funktioniert der W3C-Validator auch:
Zeile 92:		Zeile 92:
	* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_04%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des Canvas-Beispiels, Teil 4]		* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_04%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des Canvas-Beispiels, Teil 4]

	=Ein kleiner Optimierungstipp=		==Ein kleiner Optimierungstipp==

	Die Größe des Canvas muss nur an einer Stelle festgelegt werden, bei der Erzeugung des Canvas-Objektes:		Die Größe des Canvas muss nur an einer Stelle festgelegt werden, bei der Erzeugung des Canvas-Objektes:
Zeile 152:		Zeile 152:
	</source>		</source>

	=Quellen=		==Quellen==
	<references/>		<references/>
	<ol start="1">		<ol start="1">
Zeile 159:		Zeile 159:
	Die restlichen Quellen wurden direkt im Text angegeben.		Die restlichen Quellen wurden direkt im Text angegeben.

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

	Sie sollten nun das [[HTML5-Tutorium: Canvas: MiniPong\|Minipong-Canvas-Tutorium]] bearbeiten, sofern Sie dies noch nicht gemacht haben.		Sie sollten nun das [[HTML5-Tutorium: Canvas: MiniPong\|Minipong-Canvas-Tutorium]] bearbeiten, sofern Sie dies noch nicht gemacht haben.
	Anderenfalls können Sie gleich mit dem [[HTML-Tutorium: SVG: MiniPong\|Minipong-SVG-Tutorium]] forfahren.		Anderenfalls können Sie gleich mit dem [[HTML-Tutorium: SVG: MiniPong\|Minipong-SVG-Tutorium]] forfahren.
	[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]		[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]

Kowa: /* Ein kleiner Optimierungstipp */

2013-10-23T13:41:13Z

Ein kleiner Optimierungstipp

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

	<source lang="javascript">		<source lang="javascript">
	g_canvas = document.getElementById("d_canvas");		g_canvas = document.getElementById("d_canvas");
	g_canvas.width = 300;		g_canvas.width = 300;
	g_canvas.height = 27;		g_canvas.height = 27;
	</source>		</source>

Zeile 106:		Zeile 106:

	<source lang="javascript">		<source lang="javascript">
	g_canvas = new Raphael("d_canvas", 300, 27);		g_canvas = new Raphael("d_canvas", 300, 27);
	</source>		</source>

Zeile 145:		Zeile 145:

	<source lang="javascript">		<source lang="javascript">
	g_canvas = new Raphael("d_canvas", CANVAS_WIDTH, CANVAS_HEIGHT);		g_canvas = new Raphael("d_canvas", CANVAS_WIDTH, CANVAS_HEIGHT);
	$("#d_canvas")		$("#d_canvas")
	.css ({"width": CANVAS_WIDTH,		.css ({"width": CANVAS_WIDTH,
	"height": CANVAS_HEIGHT,		"height": CANVAS_HEIGHT,
	});		});
	</source>		</source>

Kowa: /* Anmerkung */

2013-10-23T13:37:48Z

Anmerkung

← Nächstältere Version		Version vom 23. Oktober 2013, 13:37 Uhr
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~~&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_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_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]

Kowa: /* Anmerkung */

2013-10-23T13:37:06Z

Anmerkung

← Nächstältere Version		Version vom 23. Oktober 2013, 13:37 Uhr
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]

Kowa: /* Anmerkung */

2013-10-23T13:34:35Z

Anmerkung

← Nächstältere Version		Version vom 23. Oktober 2013, 13:34 Uhr
Zeile 85:		Zeile 85:
	==Anmerkung==		==Anmerkung==

	Für HTML5 funktioniert der W3C-Validator auch~~. Er garantiert die Validität allerdings derzeit noch nicht, da HTML5~~		Für HTML5 funktioniert der W3C-Validator auch:
	~~noch nicht verabschiedet wurde~~:

	* [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~~ 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 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~~&user-agent=W3C_Validator%2F1.3~~ 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~~&user-agent=W3C_Validator%2F1.3~~ 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]
	* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_04%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0~~&user-agent=W3C_Validator%2F1.3~~ Validierung des Canvas-Beispiels, Teil 4]		* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_04%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des Canvas-Beispiels, Teil 4]

	=Ein kleiner Optimierungstipp=		=Ein kleiner Optimierungstipp=

Kowa: /* HTML 4 vs. HTML5 */

2013-10-04T12:42:22Z

HTML 4 vs. HTML5

← Nächstältere Version		Version vom 4. Oktober 2013, 12:42 Uhr
Zeile 41:		Zeile 41:
	Wenn Sie den Code der Canvas-Tutorien 2, 3 und 4 für das SVG-Tutorium wiederverwenden wollen,		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.		sollten Sie die Datei hallo.html jeweils ebenfalls von HTML5 auf HTML 4 umstellen.
	Hierbei ergeben sich ~~lauter~~ kleine subtile ~~Veränaderungen~~.		Hierbei ergeben sich ein paar kleine, aber subtile Veränderungen.

	~~Beispielsweise muss man anstelle von~~
	~~<source lang="html4strict">~~
	~~<link rel="stylesheet" href="css/all.min.css"/>~~
	~~</source>~~
	~~in HTML 4~~
	~~<source lang="html4strict">~~
	~~<link rel="stylesheet" href="css/all.min.css">~~
	~~</source>~~
	~~schreiben.~~
	Für Formulare gibt es das <code>label</code>-Element noch nicht.		Für Formulare gibt es das <code>label</code>-Element noch nicht.
	Dafür müssen Formularelemente in <code>p</code>-Elemente (oder Änhliches)		Dafür müssen Formularelemente in <code>p</code>-Elemente (oder Änhliches)

Kowa: /* HTML 4 vs. HTML5 */

2012-10-25T09:00:39Z

HTML 4 vs. HTML5

← Nächstältere Version		Version vom 25. Oktober 2012, 09:00 Uhr
Zeile 75:		Zeile 75:
	*/		*/
	.form		.form
	{		{ margin: 0px;
	margin: 0px;
	}		}
	</source>		</source>

Kowa: /* Fortsetzung des Tutoriums */

2012-10-25T06:51:25Z

Fortsetzung des Tutoriums

← Nächstältere Version		Version vom 25. Oktober 2012, 06:51 Uhr
Zeile 172:		Zeile 172:
	=Fortsetzung des Tutoriums=		=Fortsetzung des Tutoriums=

	~~Bearbeiten~~ Sie nun das [[HTML5-Tutorium: Canvas: MiniPong\|Minipong-Canvas-Tutorium]], sofern Sie dies noch nicht gemacht haben.		Sie sollten nun das [[HTML5-Tutorium: Canvas: MiniPong\|Minipong-Canvas-Tutorium]] bearbeiten, sofern Sie dies noch nicht gemacht haben.
	Anderenfalls können Sie gleich mit dem [[HTML-Tutorium: SVG: MiniPong\|Minipong-SVG-Tutorium]] forfahren.		Anderenfalls können Sie gleich mit dem [[HTML-Tutorium: SVG: MiniPong\|Minipong-SVG-Tutorium]] forfahren.
	[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]		[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]

Rayza: /* HTML 4 vs. HTML5 */

2012-10-24T19:27:32Z

HTML 4 vs. HTML5

← Nächstältere Version		Version vom 24. Oktober 2012, 19:27 Uhr
Zeile 66:		Zeile 66:
	</source>		</source>

	Von diesen <code>p</code>-Elementen sollten per CSS der Rand (<code>~~marin~~</code>)		Von diesen <code>p</code>-Elementen sollten per CSS der Rand (<code>margin</code>)
	entfernt werden, damit das Layout erhalten bleibt:		entfernt werden, damit das Layout erhalten bleibt:

Rayza: /* HTML 4 vs. HTML5 */

2012-10-24T19:25:10Z

HTML 4 vs. HTML5

← Nächstältere Version		Version vom 24. Oktober 2012, 19:25 Uhr
Zeile 43:		Zeile 43:
	Hierbei ergeben sich lauter kleine subtile Veränaderungen.		Hierbei ergeben sich lauter kleine subtile Veränaderungen.

	Beispielsweise muss man ~~in HTML 4~~ anstelle von		Beispielsweise muss man anstelle von
	<source lang="html4strict">		<source lang="html4strict">
	<link rel="stylesheet" href="css/all.min.css"/>		<link rel="stylesheet" href="css/all.min.css"/>
	</source>		</source>
	~~muss man~~ in HTML 4		in HTML 4
	<source lang="html4strict">		<source lang="html4strict">
	<link rel="stylesheet" href="css/all.min.css">		<link rel="stylesheet" href="css/all.min.css">