HTML5-Tutorium: Canvas: Hello World 03 - Versionsgeschichte

Kowa am 23. September 2016 um 12:36 Uhr

2016-09-23T12:36:55Z

← Nächstältere Version		Version vom 23. September 2016, 12:36 Uhr
Zeile 3:		Zeile 3:
	([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_03 SVN-Repository])		([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_03 SVN-Repository])

	=Voraussetzung=		==Voraussetzung==

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

	=Ziel: Kompression der Hello-World-Anwendung=		==Ziel: Kompression der Hello-World-Anwendung==
	Die in [[HTML5-Tutorium: Canvas: Hello World 02\|Teil 2]] erstellten CSS- und JavaScript-Dateien der Hello-World-Anwendung		Die in [[HTML5-Tutorium: Canvas: Hello World 02\|Teil 2]] erstellten CSS- und JavaScript-Dateien der Hello-World-Anwendung
	sollen komprimiert werden, um die Zugriffszeiten zu beschleunigen. Dies erfolgt mit Hilfe des Tools		sollen komprimiert werden, um die Zugriffszeiten zu beschleunigen. Dies erfolgt mit Hilfe des Tools
Zeile 14:		Zeile 14:
	Zuvor soll der JavaScript-Code aber noch etwas verbessert werden.		Zuvor soll der JavaScript-Code aber noch etwas verbessert werden.

	=Anwendung „<code>HelloWorldCanvas03</code>“=		==Anwendung „<code>HelloWorldCanvas03</code>“==
	==Neues Projekt anlegen==		===Neues Projekt anlegen===

	Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldCanvas03</code> an.		Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldCanvas03</code> an.
Zeile 21:		Zeile 21:
	Speichern Sie dieses Projekt wie üblich in Ihrem Repository.		Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

	==Verbesserung der Implementierung von Teil 2==		===Verbesserung der Implementierung von Teil 2===

	Bevor Sie den CSS- und JavaScript-Code komprimieren, sollten Sie die Implementierung aus Teil 2 des Tutoriums etwas verbessern.		Bevor Sie den CSS- und JavaScript-Code komprimieren, sollten Sie die Implementierung aus Teil 2 des Tutoriums etwas verbessern.
Zeile 59:		Zeile 59:
	im Repository sichern.'''		im Repository sichern.'''

	==Kompression der JavaScript- und CSS-Dateien==		===Kompression der JavaScript- und CSS-Dateien===

	Die komprimierten JavaScript- und CSS-Dateien werden vom		Die komprimierten JavaScript- und CSS-Dateien werden vom
Zeile 93:		Zeile 93:
	<code>all.mim.js</code> noch nicht gibt.		<code>all.mim.js</code> noch nicht gibt.

	===Build-Skript ausführen===		====Build-Skript ausführen====

	Bei der [[Installation von Eclipse]] sollten Sie den „YUI Compressor“ [[Installation von Eclipse#YUI_Compressor\|installieren]] und [[Konfiguration von Eclipse#YUI_Compressor\|konfigurieren]].		Bei der [[Installation von Eclipse]] sollten Sie den „YUI Compressor“ [[Installation von Eclipse#YUI_Compressor\|installieren]] und [[Konfiguration von Eclipse#YUI_Compressor\|konfigurieren]].
Zeile 111:		Zeile 111:
	klicken und dann das Tool <code>Compress</code> klicken (nachdem man zuvor im Projektexplorer ein Projekt selektiert hat).		klicken und dann das Tool <code>Compress</code> klicken (nachdem man zuvor im Projektexplorer ein Projekt selektiert hat).

	===Ergebnis des Build-Skripts===		====Ergebnis des Build-Skripts====

	Nach Ausführen des Build-Skripts sollten die Dateien <code>all.min.css</code> und <code>all.min.js</code> existieren und damit die Datei		Nach Ausführen des Build-Skripts sollten die Dateien <code>all.min.css</code> und <code>all.min.js</code> existieren und damit die Datei
	<code>hello.html</code> ausgeführt werden können.		<code>hello.html</code> ausgeführt werden können.

	====<code>all.min.css</code>====		=====<code>all.min.css</code>=====
	<source lang="css">		<source lang="css">
	#d_name{width:185px}#d_canvas{margin-top:10px;border-color:#bbb;border-width:2px;border-style:solid}		#d_name{width:185px}#d_canvas{margin-top:10px;border-color:#bbb;border-width:2px;border-style:solid}
	</source>		</source>

	====<code>all.min.js</code>====		=====<code>all.min.js</code>=====
	<source lang="javascript">		<source lang="javascript">
	"use strict";var g_canvas,g_context;window.onload=init;function init(){g_canvas=document.getElementById("d_canvas")...		"use strict";var g_canvas,g_context;window.onload=init;function init(){g_canvas=document.getElementById("d_canvas")...
	</source>		</source>

	==Testen und speichern==		===Testen und speichern===

	Nun sollt Ihre Web-Anwendung wieder funktionieren.		Nun sollt Ihre Web-Anwendung wieder funktionieren.
	Testen Sie sie und speichern Sie sie in Ihrem Repository.		Testen Sie sie und speichern Sie sie in Ihrem Repository.

	=Quellen=		==Quellen==
	<references/>		<references/>
	<ol>		<ol>
Zeile 137:		Zeile 137:
	</ol>		</ol>

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

	Sie sollten nun [[HTML5-Tutorium: Canvas: Hello World 04\|Teil 4 des Tutoriums]] bearbeiten.		Sie sollten nun [[HTML5-Tutorium: Canvas: Hello World 04\|Teil 4 des Tutoriums]] bearbeiten.

	[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]		[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]

Kowa: /* Quellen */

2013-10-23T13:25:45Z

Quellen

← Nächstältere Version		Version vom 23. Oktober 2013, 13:25 Uhr
Zeile 134:		Zeile 134:
	<references/>		<references/>
	<ol>		<ol>
	<li value="3"> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>		<li value="2"> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>
	</ol>		</ol>

Kowa: /* all.min.js */

2013-10-23T13:25:21Z

all.min.js

← Nächstältere Version		Version vom 23. Oktober 2013, 13:25 Uhr
Zeile 124:		Zeile 124:
	<source lang="javascript">		<source lang="javascript">
	"use strict";var g_canvas,g_context;window.onload=init;function init(){g_canvas=document.getElementById("d_canvas")...		"use strict";var g_canvas,g_context;window.onload=init;function init(){g_canvas=document.getElementById("d_canvas")...
			</source>

	==Testen und speichern==		==Testen und speichern==

Kowa: /* all.min.js */

2013-10-23T13:23:41Z

all.min.js

← Nächstältere Version		Version vom 23. Oktober 2013, 13:23 Uhr
Zeile 123:		Zeile 123:
	====<code>all.min.js</code>====		====<code>all.min.js</code>====
	<source lang="javascript">		<source lang="javascript">
	"use strict";var g_canvas~~;var~~ g_context;window.onload=init;function init(){g_canvas=document.getElementById("d_canvas");...~~</source>~~		"use strict";var g_canvas,g_context;window.onload=init;function init(){g_canvas=document.getElementById("d_canvas")...

	==Testen und speichern==		==Testen und speichern==

Kowa: /* Build-Skript ausführen */

2013-10-23T13:22:30Z

Build-Skript ausführen

@@ Zeile 95: / Zeile 95: @@
 ===Build-Skript ausführen===
-Bei der [[Installation von Eclipse]] sollten Sie den „YUI Compressor“ installieren.
+Bei der [[Installation von Eclipse]] sollten Sie den „YUI Compressor“ [[Installation von Eclipse#YUI_Compressor|installieren]] und [[Konfiguration von Eclipse#YUI_Compressor|konfigurieren]].
 Aufgabe dieses Tools ist es, die beiden Dateien  <code>all.min.css</code> und
 <code>all.mim.js</code> zu erstellen. Sie enthalten
@@ Zeile 102: / Zeile 102: @@
 Man kann allerdings erzwingen, dass bestimmte Kommentare (z.B. Lizenzinformationen) erhalten bleiben.
-Zusammen mit dem YUI Compressor wurde die Datei <code>[http://glossar.hs-augsburg.de/beispiel/eclipse/build.xml build.xml]</code> installiert.
+Nach Installation und Konfiguration des „YUI Compressor“ kann irgendein Web-Projekt mittels eines Klicks auf den Projektnamen im Projektexplorer selektiert werden.
 Mittels eines zweiten Klicks auf das „grüner Kreis mit weißem Pfeil und Werkzeugkasten“ werden für dieses Projekt
 die Dateien  <code>all.min.css</code> und <code>all.min.js</code> erstellt und entweder in die Verzeichnisse

Kowa: /* Build-Skript ausführen */

2013-10-14T11:13:37Z

Build-Skript ausführen

← Nächstältere Version		Version vom 14. Oktober 2013, 11:13 Uhr
Zeile 122:		Zeile 122:
	Anmerkung: Passen Sie die Argumente gegebenenfalls an Ihre Eclipse-Installation an:		Anmerkung: Passen Sie die Argumente gegebenenfalls an Ihre Eclipse-Installation an:
	* Beim Argument <code>-DYUICOMPRESSOR</code> müssen Sie die Versionsnummer der von Ihnen eingesetzen Version des YUI Complressors angeben.		* Beim Argument <code>-DYUICOMPRESSOR</code> müssen Sie die Versionsnummer der von Ihnen eingesetzen Version des YUI Complressors angeben.
	* Wenn Sie Apache als Test-Server verwenden, müssen Sie beim Erstellen des Skripts <code>compress</code> ~~und~~ dem Punkt „Argumente“ das Apache-Projektverzeichnis als Zielverzeichnis (<code>DIST_DIR</code>) wählen: <code>-DDIST_DIR=C:\web\apache\htdocs\${project_name}</code> (Passen Sie den Apache-Ordner an Ihre Gegebenheit an.) ~~an Stelle von <code>-DSRC_DIR=WebContent</code>~~		* Wenn Sie Apache als Test-Server verwenden, müssen Sie beim Erstellen des Skripts <code>compress</code> unter dem Punkt „Argumente“ das Apache-Projektverzeichnis als Zielverzeichnis (<code>DIST_DIR</code>) wählen:<br/> <code>-DDIST_DIR=C:\web\apache\htdocs\${project_name}</code> an Stelle von <code>-DDIST_DIR=WebContent</code><br/>(Passen Sie den Apache-Ordner an Ihre Gegebenheit an.)

	Künftig kann irgendein Web-Projekt mittels eines Klicks auf den Projektnamen im Projektexplorer selektiert werden.		Künftig kann irgendein Web-Projekt mittels eines Klicks auf den Projektnamen im Projektexplorer selektiert werden.

Kowa: /* Build-Skript ausführen */

2013-10-14T10:38:21Z

Build-Skript ausführen

← Nächstältere Version		Version vom 14. Oktober 2013, 10:38 Uhr
Zeile 122:		Zeile 122:
	Anmerkung: Passen Sie die Argumente gegebenenfalls an Ihre Eclipse-Installation an:		Anmerkung: Passen Sie die Argumente gegebenenfalls an Ihre Eclipse-Installation an:
	* Beim Argument <code>-DYUICOMPRESSOR</code> müssen Sie die Versionsnummer der von Ihnen eingesetzen Version des YUI Complressors angeben.		* Beim Argument <code>-DYUICOMPRESSOR</code> müssen Sie die Versionsnummer der von Ihnen eingesetzen Version des YUI Complressors angeben.
	* Wenn Sie Apache als Test-Server verwenden, müssen Sie das Apache-Projektverzeichnis als Zielverzeichnis (<code>DIST_DIR</code>) wählen: <code>-DDIST_DIR=C:\web\apache\htdocs\${project_name}</code> (Passen Sie den Apache-Ordner an Ihre Gegebenheit an.)		* Wenn Sie Apache als Test-Server verwenden, müssen Sie beim Erstellen des Skripts <code>compress</code> und dem Punkt „Argumente“ das Apache-Projektverzeichnis als Zielverzeichnis (<code>DIST_DIR</code>) wählen: <code>-DDIST_DIR=C:\web\apache\htdocs\${project_name}</code> (Passen Sie den Apache-Ordner an Ihre Gegebenheit an.) an Stelle von <code>-DSRC_DIR=WebContent</code>

	Künftig kann irgendein Web-Projekt mittels eines Klicks auf den Projektnamen im Projektexplorer selektiert werden.		Künftig kann irgendein Web-Projekt mittels eines Klicks auf den Projektnamen im Projektexplorer selektiert werden.

Kowa am 10. Oktober 2013 um 15:46 Uhr

2013-10-10T15:46:51Z

← Nächstältere Version		Version vom 10. Oktober 2013, 15:46 Uhr
Zeile 115:		Zeile 115:
	* Klick auf das Icon „weißes Blatt mit Plus-Symbol“ (damit wird eine neues Skript erstellt, das ein externes Tool ausführt)		* Klick auf das Icon „weißes Blatt mit Plus-Symbol“ (damit wird eine neues Skript erstellt, das ein externes Tool ausführt)
	** Name: <code>Compress</code>		** Name: <code>Compress</code>
	** Erstellungsdatei: <code>D:\web\eclipse\dropins\yuicompressor\build.xml</code> (das ist das zuvor erstellte Build-Skript, passen Sie gegebenenfalls den Ordner an)		** Erstellungsdatei: <code>C:\web\eclipse\dropins\yuicompressor\build.xml</code> (das ist das zuvor erstellte Build-Skript, passen Sie gegebenenfalls den Ordner an)
	** Basisverzeichnis: <code>${project_loc}</code>		** Basisverzeichnis: <code>${project_loc}</code>
	** Argumente: <br /><code>-DECLIPSE_HOME=${eclipse_home}</code><br /><code>-DSRC_DIR=WebContent</code><br /><code>-DDIST_DIR=WebContent</code><br /><code>-DYUICOMPRESSOR=yuicompressor-2.4.8</code>		** Argumente: <br /><code>-DECLIPSE_HOME=${eclipse_home}</code><br /><code>-DSRC_DIR=WebContent</code><br /><code>-DDIST_DIR=WebContent</code><br /><code>-DYUICOMPRESSOR=yuicompressor-2.4.8</code>

Kowa am 4. Oktober 2013 um 12:33 Uhr

2013-10-04T12:33:16Z

← Nächstältere Version		Version vom 4. Oktober 2013, 12:33 Uhr
Zeile 100:		Zeile 100:
	jeweils den Code aller CSS- bzw. JavaScript-Dateien, die sich im Ordner <code>css</code> bzw. <code>js</code> befinden.		jeweils den Code aller CSS- bzw. JavaScript-Dateien, die sich im Ordner <code>css</code> bzw. <code>js</code> befinden.
	Leerzeichen, Kommentare und andere überflüssige Informationen werden entfernt um Platz zu sparen und damit die Downloadzeiten zu reduzieren.		Leerzeichen, Kommentare und andere überflüssige Informationen werden entfernt um Platz zu sparen und damit die Downloadzeiten zu reduzieren.
	Man kann allerdings erzwingen, dass bestimmte Kommentare (z.B. Lizenzinformationen) erhalten bleiben.~~<ref>[http://yui.github.io/yuicompressor/ YUI-Compressor-Dokumentation]</ref>~~		Man kann allerdings erzwingen, dass bestimmte Kommentare (z.B. Lizenzinformationen) erhalten bleiben.

	Zusammen mit dem YUI Compressor wurde die Datei <code>[http://glossar.hs-augsburg.de/beispiel/eclipse/build.xml build.xml]</code> installiert.		Zusammen mit dem YUI Compressor wurde die Datei <code>[http://glossar.hs-augsburg.de/beispiel/eclipse/build.xml build.xml]</code> installiert.
Zeile 117:		Zeile 117:
	** Erstellungsdatei: <code>D:\web\eclipse\dropins\yuicompressor\build.xml</code> (das ist das zuvor erstellte Build-Skript, passen Sie gegebenenfalls den Ordner an)		** Erstellungsdatei: <code>D:\web\eclipse\dropins\yuicompressor\build.xml</code> (das ist das zuvor erstellte Build-Skript, passen Sie gegebenenfalls den Ordner an)
	** Basisverzeichnis: <code>${project_loc}</code>		** Basisverzeichnis: <code>${project_loc}</code>
	** Argumente: <br /><code>-DECLIPSE_HOME=${eclipse_home}</code><br /><code>-DSRC_DIR=WebContent</code><br /><code>-DDIST_DIR=WebContent</code><br /><code>-DYUICOMPRESSOR=yuicompressor-2.4.7</code>		** Argumente: <br /><code>-DECLIPSE_HOME=${eclipse_home}</code><br /><code>-DSRC_DIR=WebContent</code><br /><code>-DDIST_DIR=WebContent</code><br /><code>-DYUICOMPRESSOR=yuicompressor-2.4.8</code>
	*<code>Ausführen</code> (Damit wird das Skript auf das zuvor selektierte Projekt angewendet.)		*<code>Ausführen</code> (Damit wird das Skript auf das zuvor selektierte Projekt angewendet.)

Kowa am 4. Oktober 2013 um 12:31 Uhr

2013-10-04T12:31:13Z

← Nächstältere Version		Version vom 4. Oktober 2013, 12:31 Uhr
Zeile 100:		Zeile 100:
	jeweils den Code aller CSS- bzw. JavaScript-Dateien, die sich im Ordner <code>css</code> bzw. <code>js</code> befinden.		jeweils den Code aller CSS- bzw. JavaScript-Dateien, die sich im Ordner <code>css</code> bzw. <code>js</code> befinden.
	Leerzeichen, Kommentare und andere überflüssige Informationen werden entfernt um Platz zu sparen und damit die Downloadzeiten zu reduzieren.		Leerzeichen, Kommentare und andere überflüssige Informationen werden entfernt um Platz zu sparen und damit die Downloadzeiten zu reduzieren.
	Man kann allerdings erzwingen, dass bestimmte Kommentare (z.B. Lizenzinformationen) erhalten bleiben.<ref>[~~https~~://github.~~com/yui~~/yuicompressor/~~blob/master/doc/README~~ YUI-Compressor-Dokumentation]</ref>		Man kann allerdings erzwingen, dass bestimmte Kommentare (z.B. Lizenzinformationen) erhalten bleiben.<ref>[http://yui.github.io/yuicompressor/ YUI-Compressor-Dokumentation]</ref>

	Zusammen mit dem YUI Compressor wurde die Datei <code>[http://glossar.hs-augsburg.de/beispiel/eclipse/build.xml build.xml]</code> installiert.		Zusammen mit dem YUI Compressor wurde die Datei <code>[http://glossar.hs-augsburg.de/beispiel/eclipse/build.xml build.xml]</code> installiert.