HTML5-Tutorium: Canvas: Hello World 02 - Versionsgeschichte

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

2023-03-01T13:19:58Z

← Nächstältere Version		Version vom 1. März 2023, 13:19 Uhr
Zeile 17:		Zeile 17:
	* Die Anwendung wird mit Hilfe von RequireJS modularisiert.		* Die Anwendung wird mit Hilfe von RequireJS modularisiert.

	==Erstellen eines neuen ~~Projektes~~==		==Erstellen eines neuen Projekts==
	Erstellen Sie ein neues Projekt „<code>HelloWorldCanvas02</code>“.		Erstellen Sie ein neues Projekt „<code>HelloWorldCanvas02</code>“.
	Kopieren Sie anschließend Datei „<code>index5.html</code>“ sowie die Ordner		Kopieren Sie anschließend Datei „<code>index5.html</code>“ sowie die Ordner

Kowa am 31. Oktober 2016 um 17:02 Uhr

2016-10-31T17:02:06Z

← Nächstältere Version		Version vom 31. Oktober 2016, 17:02 Uhr
Zeile 6:		Zeile 6:

	Wie im [[HTML5-Tutorium: JavaScript: Hello World 03\|dritten]] und		Wie im [[HTML5-Tutorium: JavaScript: Hello World 03\|dritten]] und
	[[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]] des Hello-World-Tutoriums soll die ganze der Name des Benutzers		[[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil des '''Hello-World'''-Tutoriums]] soll die ganze der Name des Benutzers
	erfragt werden, bevor er persönlich begrüßt wird.		erfragt werden, bevor er persönlich begrüßt wird.

	Die Ausgabe erfolgt wie im [[HTML5-Tutorium: Canvas: Hello World 01\|ersten Teil]] des Canvas-Tutoriums mit Hilfe eines Canvas-Elements.		Die Ausgabe erfolgt wie im [[HTML5-Tutorium: Canvas: Hello World 01\|ersten Teil des '''Canvas'''-Tutoriums]] mit Hilfe eines Canvas-Elements.

	Die Anwendung soll wie „App5“ des [[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]]s des Hello-World-Tutoriums		Die Anwendung soll wie „App5“ des [[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]]s des Hello-World-Tutoriums

Kowa: Änderung 41435 von Kowa (Diskussion) rückgängig gemacht.

2016-10-31T17:01:24Z

Änderung 41435 von Kowa (Diskussion) rückgängig gemacht.

← Nächstältere Version		Version vom 31. Oktober 2016, 17:01 Uhr
Zeile 6:		Zeile 6:

	Wie im [[HTML5-Tutorium: JavaScript: Hello World 03\|dritten]] und		Wie im [[HTML5-Tutorium: JavaScript: Hello World 03\|dritten]] und
	[[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil des ~~'''~~Hello-World~~'''~~-Tutoriums]] soll die ganze der Name des Benutzers		[[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]] des Hello-World-Tutoriums soll die ganze der Name des Benutzers
	erfragt werden, bevor er persönlich begrüßt wird.		erfragt werden, bevor er persönlich begrüßt wird.

	Die Ausgabe erfolgt wie im [[HTML5-Tutorium: Canvas: Hello World 01\|ersten Teil des ~~'''~~Canvas~~'''~~-Tutoriums]] mit Hilfe eines Canvas-Elements.		Die Ausgabe erfolgt wie im [[HTML5-Tutorium: Canvas: Hello World 01\|ersten Teil]] des Canvas-Tutoriums mit Hilfe eines Canvas-Elements.

	Die Anwendung soll wie „App5“ des [[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]]s des Hello-World-Tutoriums		Die Anwendung soll wie „App5“ des [[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]]s des Hello-World-Tutoriums
Zeile 16:		Zeile 16:
	* Die Initialisierungsinformationen werden aus JSON-Dateien eingelesen.		* Die Initialisierungsinformationen werden aus JSON-Dateien eingelesen.
	* Die Anwendung wird mit Hilfe von RequireJS modularisiert.		* Die Anwendung wird mit Hilfe von RequireJS modularisiert.

	~~Zu diesem Zweck wird das leere Projekt [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/empty/WKempty_RequireJS WKempty_RequireJS]~~
	~~eingesetzt, das die Struktur der „App5“ nachbildet.~~

	~~==Neues Projekt anlegen==~~

	~~Legen Sie ein neues Projekt mit dem Namen <code>HelloWorldCanvas02</code> an.~~
	~~Fügen Sie die Ordner und Dateien, die Sie im Zip-Archiv [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/empty/WKempty_RequireJS.zip WKempty_RequireJS.zip]~~
	~~finden. ein. In diesem Zip-Archiv ist ein leere Projekt enthalten, das im Prinzip wie die App5 im Tutorium~~
	~~[[HTML5-Tutorium: JavaScript: Hello World 04]] aufgebaut ist (Ein paar Datei- und Ordnernamen unterscheiden sich).~~
	~~Dieses Archiv enthält folgende Dateien:~~

	* <code>web/css/main.css</code>: Eine leere CSS-Datei.
	* <code>web/json/init.json</code>: Eine leere JSON-Datei, in die Initialisierungsinformationen der Anwendung eingefügt werden können.
	* <code>web/js/lib/require</code>: Die Bibliothek RequireJS samt zugehörigem JSON-Plugin.
	* <code>web/js/app/module.js</code>: Ein leeres RequireJS-Modul. Ein Modul mit dem Namen „<code>module</code>“ wird üblicherweise nicht benötigt. Die Datei kann allerdings als Template für die Erstellung anderer Module verwendet werden.
	* <code>web/js/app/init.js</code>: Ein RequireJS-Modul, das eine (bislang noch leere und damit funktionslose) Initialisierungsfunktion enthält. Diese Methode wird von <code>main.js</code> aufgerufen. Ihr werden üblicherweise das Window-Objekt des Browsers sowie ein JSON-Initialisierungsobjekt übergeben.
	* <code>web/js/main.js</code>: Eine JavaScript-Datei, die RequireJS initialisiert, die JSON-Datei <code>init.json</code> lädt und zu guter Letzt die Initialisierungsfunktion der eigentlichen Anwendung ausführt.
	* <code>index.html</code>: Eine HTML-Datei mit leeren Body-Element, die <code>main.css</code>, RequireJS und zu guter Letzt <code>main.js</code> lädt.

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

	==Erstellen eines neuen Projektes==		==Erstellen eines neuen Projektes==

Kowa: /* Use Cases */

2016-10-31T16:55:03Z

Use Cases

← Nächstältere Version		Version vom 31. Oktober 2016, 16:55 Uhr
Zeile 6:		Zeile 6:

	Wie im [[HTML5-Tutorium: JavaScript: Hello World 03\|dritten]] und		Wie im [[HTML5-Tutorium: JavaScript: Hello World 03\|dritten]] und
	[[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]] des Hello-World-Tutoriums soll die ganze der Name des Benutzers		[[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil des '''Hello-World'''-Tutoriums]] soll die ganze der Name des Benutzers
	erfragt werden, bevor er persönlich begrüßt wird.		erfragt werden, bevor er persönlich begrüßt wird.

	Die Ausgabe erfolgt wie im [[HTML5-Tutorium: Canvas: Hello World 01\|ersten Teil]] des Canvas-Tutoriums mit Hilfe eines Canvas-Elements.		Die Ausgabe erfolgt wie im [[HTML5-Tutorium: Canvas: Hello World 01\|ersten Teil des '''Canvas'''-Tutoriums]] mit Hilfe eines Canvas-Elements.

	Die Anwendung soll wie „App5“ des [[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]]s des Hello-World-Tutoriums		Die Anwendung soll wie „App5“ des [[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]]s des Hello-World-Tutoriums
Zeile 16:		Zeile 16:
	* Die Initialisierungsinformationen werden aus JSON-Dateien eingelesen.		* Die Initialisierungsinformationen werden aus JSON-Dateien eingelesen.
	* Die Anwendung wird mit Hilfe von RequireJS modularisiert.		* Die Anwendung wird mit Hilfe von RequireJS modularisiert.

			Zu diesem Zweck wird das leere Projekt [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/empty/WKempty_RequireJS WKempty_RequireJS]
			eingesetzt, das die Struktur der „App5“ nachbildet.

			==Neues Projekt anlegen==

			Legen Sie ein neues Projekt mit dem Namen <code>HelloWorldCanvas02</code> an.
			Fügen Sie die Ordner und Dateien, die Sie im Zip-Archiv [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/empty/WKempty_RequireJS.zip WKempty_RequireJS.zip]
			finden. ein. In diesem Zip-Archiv ist ein leere Projekt enthalten, das im Prinzip wie die App5 im Tutorium
			[[HTML5-Tutorium: JavaScript: Hello World 04]] aufgebaut ist (Ein paar Datei- und Ordnernamen unterscheiden sich).
			Dieses Archiv enthält folgende Dateien:

			* <code>web/css/main.css</code>: Eine leere CSS-Datei.
			* <code>web/json/init.json</code>: Eine leere JSON-Datei, in die Initialisierungsinformationen der Anwendung eingefügt werden können.
			* <code>web/js/lib/require</code>: Die Bibliothek RequireJS samt zugehörigem JSON-Plugin.
			* <code>web/js/app/module.js</code>: Ein leeres RequireJS-Modul. Ein Modul mit dem Namen „<code>module</code>“ wird üblicherweise nicht benötigt. Die Datei kann allerdings als Template für die Erstellung anderer Module verwendet werden.
			* <code>web/js/app/init.js</code>: Ein RequireJS-Modul, das eine (bislang noch leere und damit funktionslose) Initialisierungsfunktion enthält. Diese Methode wird von <code>main.js</code> aufgerufen. Ihr werden üblicherweise das Window-Objekt des Browsers sowie ein JSON-Initialisierungsobjekt übergeben.
			* <code>web/js/main.js</code>: Eine JavaScript-Datei, die RequireJS initialisiert, die JSON-Datei <code>init.json</code> lädt und zu guter Letzt die Initialisierungsfunktion der eigentlichen Anwendung ausführt.
			* <code>index.html</code>: Eine HTML-Datei mit leeren Body-Element, die <code>main.css</code>, RequireJS und zu guter Letzt <code>main.js</code> lädt.

			Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

	==Erstellen eines neuen Projektes==		==Erstellen eines neuen Projektes==

Kowa am 27. Oktober 2016 um 08:25 Uhr

2016-10-27T08:25:20Z

← Nächstältere Version		Version vom 27. Oktober 2016, 08:25 Uhr
Zeile 1:		Zeile 1:
	{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}		{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
	'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/index.html <code>index.html</code>]		'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/web/index.html <code>index.html</code>]
	([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/ SVN-Repository])		([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/ SVN-Repository])

Kowa am 27. Oktober 2016 um 08:24 Uhr

2016-10-27T08:24:41Z

← Nächstältere Version		Version vom 27. Oktober 2016, 08:24 Uhr
Zeile 2:		Zeile 2:
	'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/index.html <code>index.html</code>]		'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/index.html <code>index.html</code>]
	([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/ SVN-Repository])		([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/ SVN-Repository])
	~~hzuführen.<ref>[https://www.khronos.org/webgl/ WebGL: OpenGL ES 2.0 for the Web]</ref>~~

	==Use Cases==		==Use Cases==

Kowa: /* Siehe auch */

2016-10-26T15:23:02Z

Siehe auch

← Nächstältere Version		Version vom 26. Oktober 2016, 15:23 Uhr
Zeile 151:		Zeile 151:
	};		};
	</source>		</source>
	==~~Siehe auch~~==		==Quellen==
	* {{~~SieheAuch~~\|~~Pilgrim (2011)~~}}		<references/>
	* [http://www.w3schools.com/~~html/html5_intro.asp w3schools.com: HTML5]~~		<ol start ="2">
	* [https://html.spec.whatwg.org/ ~~HTML Living Standard]~~		<li> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>
			</ol>

Kowa am 26. Oktober 2016 um 15:21 Uhr

2016-10-26T15:21:50Z

Änderungen zeigen

Kowa am 26. Oktober 2016 um 14:36 Uhr

2016-10-26T14:36:52Z

Änderungen zeigen

Kowa: /* Ziel: Ausgabe von „Hallo !“ auf einem HTML5-Canvas */

2016-09-23T13:31:19Z

Ziel: Ausgabe von „Hallo !“ auf einem HTML5-Canvas

← Nächstältere Version		Version vom 23. September 2016, 13:31 Uhr
Zeile 7:		Zeile 7:
	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 <Benutzername>!“ auf einem HTML5-Canvas=		==Ziel: Ausgabe von „Hallo <Benutzername>!“ auf einem HTML5-Canvas==
	Die in [[HTML5-Tutorium: Canvas: Hello World 01\|Teil 1]] erstellte Hello-World-Anwendung wird so erweitert,		Die in [[HTML5-Tutorium: Canvas: Hello World 01\|Teil 1]] erstellte Hello-World-Anwendung wird so erweitert,
	dass der Benutzer seinen Namen eingeben kann und mit diesem		dass der Benutzer seinen Namen eingeben kann und mit diesem

← Nächstältere Version		Version vom 31. Oktober 2016, 17:02 Uhr
Zeile 6:		Zeile 6:

	Wie im [[HTML5-Tutorium: JavaScript: Hello World 03\|dritten]] und		Wie im [[HTML5-Tutorium: JavaScript: Hello World 03\|dritten]] und
	[[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]] des Hello-World-Tutoriums soll die ganze der Name des Benutzers		[[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil des '''Hello-World'''-Tutoriums]] soll die ganze der Name des Benutzers
	erfragt werden, bevor er persönlich begrüßt wird.		erfragt werden, bevor er persönlich begrüßt wird.

	Die Ausgabe erfolgt wie im [[HTML5-Tutorium: Canvas: Hello World 01\|ersten Teil]] des Canvas-Tutoriums mit Hilfe eines Canvas-Elements.		Die Ausgabe erfolgt wie im [[HTML5-Tutorium: Canvas: Hello World 01\|ersten Teil des '''Canvas'''-Tutoriums]] mit Hilfe eines Canvas-Elements.

	Die Anwendung soll wie „App5“ des [[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]]s des Hello-World-Tutoriums		Die Anwendung soll wie „App5“ des [[HTML5-Tutorium: JavaScript: Hello World 04\|vierten Teil]]s des Hello-World-Tutoriums