HTML5-Tutorium: Canvas: Hello World 03: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenz
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Keine Bearbeitungszusammenfassung
 
(99 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{In Bearbeitung}}
{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Ergebnis''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_03/WebContent/hello.html hello.html]</code>
'''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_03/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/webdav/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])


=HTML5: Hello-&lt;name&gt;-Anwendung mit Canvas=
==Voraussetzung==
Die in [[HTML5-Tutorium: Canvas: Hello World 02|Teil 2]] erstellten JavaScript-Dateien der Hello-World-Anwendung  
 
Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 02]] kennen.
 
==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  
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  
<code>YUI Compressor</code><ref>[http://yuilibrary.com/download/yuicompressor/ YUI Compressor]</ref>
<code>YUI Compressor</code><ref name="YUI Compressor">[http://developer.yahoo.com/yui/compressor/ YUI Compressor]</ref>.
 
Zuvor soll der JavaScript-Code aber noch etwas verbessert werden.


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


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


# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
# Project name: <code>HelloWorldCanvas03</code> → <code>Fertigstellen</code>


Kopieren Sie die Dateien <code>js/main.js</code>, <code>css/main.css</code> und
===Verbesserung der Implementierung von Teil 2===
<code>hello.html</code> in den Ordner <code>WebContent</code> des neuen Projektes.


Ändern Sie die Zeilen
Bevor Sie den CSS- und JavaScript-Code komprimieren, sollten Sie die Implementierung aus Teil 2 des Tutoriums etwas verbessern.


<source lang="html4strict">
Die HTML-Datei <code>hallo.html</code> soll JavaScript-frei werden, d.h. HTML-Code und JavaScript-Code sollen noch besser
    <link rel="stylesheet" href="css/main.css" />
getrennt werden.
    <script src="js/main.js" type="text/javascript"></script>
</source>


in
Gehen Sie folgendermaßen vor. Löschen Sie zunächst in der HTML-Datei <code>hallo.html</code>
* <code>onload="init()"</code> aus dem <code>body</code>-Element sowie
* <code>onmousedown="sayHello()"</code> <code>input</code>-Element vom Typ <code>button</code>.


<source lang="html4strict">
Fügen Sie anschließend in der JavaScript-Datei <code>main.js</code> folgenden Code '''vor''' der Definition der <code>init</code>-Funktion
    <link rel="stylesheet" href="css/all.min.css" />
ein:
    <script src="js/all.min.js" type="text/javascript"></script>
<source lang="javascript">
// Führe die init-Funktion aus, nachdem die HTML-Seite vollständig
// vom Browser geladen wurde.
window.onload = init;
</source>
</source>
Die Funktion <code>window.onload</code> wird vom Browser, sofern sie definiert wurde, automatisch ausgeführt,
sobald die zugehörige HTML-Seite vollständig geladen wurde.


Wenn man nun das Projekt testet, passiert nicht viel, da es die Dateien <code>all.min.css</code> und
Zu guter Letzt müssen Sie noch den <code>OK</code>-Button mit der <code>sayHello</code>-Methode
<code>all.mim.js</code> noch nicht gibt.
verknüpfen, indem Sie folgenden Code '''in den Rumpf''' der <code>init</code>-Funktion einfügen:
<source lang="javascript">
// Interaktive HTML-Formular-Elemente mit JavaScript verknüpfen.
document.getElementById("d_button_ok").onmousedown = sayHello;
</source>
Dieser Code kann erst ausgeführt werden, nachdem die HTML-Seite vollständig geladen wurde,
da das HTML-Button-Objekt vorher nicht existiert. Daher muss die <code>init</code>-Funktion
die Verknüpfung zwischen Button und Code herstellen.
Hätte man den obigen Code vor die <code>init</code>-Methode
eingefügt, hätte der Browser gleich beim Laden der JavaScript-Datei versucht,
diese Verknüpfung herzustellen. Das wäre aber schief gegangen, das das Button-Objekt
zu diesem Zeitpunk noch nicht existiert.


==CSS- und JavaScript-Dateien komprimieren==
'''Wie gewohnt müssen Sie Ihren Code nun testen und – sobald er fehlerfrei läuft –
im Repository sichern.'''


===YUI Compressor installieren===
===Kompression der JavaScript- und CSS-Dateien===
# YUI Compressor ([http://yuilibrary.com/download/yuicompressor/ yuicompressor-2.x.x.zip]) herunterladen
# yuicompressor-2.x.x.zip in den Ordner <code>C:\web\eclipse\dropins</code> entpacken


===Build-Skript installieren===
Die komprimierten JavaScript- und CSS-Dateien werden vom
# Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> erstellen
<code>build</code>-Skript (siehe nächsten Abschnitt) in den Dateien
* <code>css/main.css</code> und
* <code>js/main.js</code>
abgelegt. Um diese Dateien in der HTML-Datei <code>hallo.html</code>
zu verwenden, müssen die Zeilen


Fügen Sie in den Ordner <code>C:\web\eclipse\dropins\yuicompressor</code>
<source lang="html4strict">
folgende Datei <code>build.xml</code> ein (vgl. <ref>[http://www.samaxes.com/2009/05/combine-and-minimize-javascript-and-css-files-for-faster-loading/ Samuel Santos: Combine and minimize JavaScript and CSS files for faster loading]
    <!-- Laden aller CSS-Dateien -->
</ref>):
    <link rel="stylesheet" href="css/main.css"/>


<source lang="xml">
    <!-- Laden aller JavaScript-Dateien -->
<project name="Compress CSS/JS" default="all" basedir=".">
     <script type="text/javascript" src="js/main.js"></script>
  <!-- Setup -->
  <property name="SRC_DIR" value="WebContent" description="Source folder" />
  <property name="SRC_CSS_DIR" value="${SRC_DIR}/css" description="CSS source folder" />
  <property name="SRC_JS_DIR" value="${SRC_DIR}/js" description="JavaScript source folder" />
  <property name="DIST_DIR" value="WebContent" description="Output folder for build targets" />
  <property name="DIST_CSS_DIR" value="${DIST_DIR}/css" description="Output folder for CSS files" />
  <property name="DIST_JS_DIR" value="${DIST_DIR}/js" description="Output folder for JavaScript files" />
  <property name="BUILD_DIR" value="c:/web/eclipse/dropins/yuicompressor-2.4.6/build" description="Files needed to build" />
  <property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.6.jar" description="YUICompressor" />
  <!-- Files names for distribution -->
  <property name="ALL_CSS" value="all.css" />
  <property name="ALL_CSS_MIN" value="all.min.css" />
  <property name="ALL_JS" value="all.js" />
  <property name="ALL_JS_MIN" value="all.min.js" />
  <property name="CSS" value="${DIST_CSS_DIR}/${ALL_CSS}" />
  <property name="CSS_MIN" value="${DIST_CSS_DIR}/${ALL_CSS_MIN}" />
  <property name="JS" value="${DIST_JS_DIR}/${ALL_JS}" />
  <property name="JS_MIN" value="${DIST_JS_DIR}/${ALL_JS_MIN}" />
  <!-- Targets -->
  <target name="html" description="Copy HTML files to the output folder">
    <mkdir dir="${DIST_DIR}" />
    <copy todir="${DIST_DIR}">
      <fileset dir="${SRC_DIR}">
        <exclude name="css/*.css" />
        <exclude name="js/*.js" />
      </fileset>
    </copy>
  </target>
  <target name="css" depends="html" description="Concatenate CSS source files">
    <echo message="Building ${CSS}" />
    <concat destfile="${CSS}">
      <fileset dir="${SRC_CSS_DIR}" includes="*.css" />
    </concat>
    <echo message="${CSS} built." />
  </target>
  <target name="css.min" depends="css" description="Minimize CSS files">
    <echo message="Building ${CSS_MIN}" />
     <apply executable="java" parallel="false" verbose="true" dest="${DIST_CSS_DIR}">
      <fileset dir="${DIST_CSS_DIR}">
        <include name="${ALL_CSS}" />
      </fileset>
      <arg line="-jar" />
      <arg path="${YUI}" />
      <arg value="--charset" />
      <arg value="ANSI" />
      <arg value="-o" />
      <targetfile />
      <mapper type="glob" from="${ALL_CSS}" to="${ALL_CSS_MIN}" />
    </apply>
    <echo message="${CSS_MIN} built." />
  </target>
  <target name="js" depends="html" description="Concatenate JavaScript source files">
    <echo message="Building ${JS}" />
    <concat destfile="${JS}">
      <fileset dir="${SRC_JS_DIR}" includes="*.js" />
    </concat>
    <echo message="${JS} built." />
  </target>
  <target name="js.min" depends="js" description="Minimize JavaScript files">
    <echo message="Building ${JS_MIN}" />
    <apply executable="java" parallel="false" verbose="true" dest="${DIST_JS_DIR}">
      <fileset dir="${DIST_JS_DIR}">
        <include name="${ALL_JS}" />
      </fileset>
      <arg line="-jar" />
      <arg path="${YUI}" />
      <arg value="--charset" />
      <arg value="ANSI" />
      <arg value="-o" />
      <targetfile />
      <mapper type="glob" from="${ALL_JS}" to="${ALL_JS_MIN}" />
    </apply>
    <echo message="${JS_MIN} built." />
  </target>
  <target name="clean">
    <delete dir="${CSS}" />
    <delete dir="${CSS_MIN}" />
    <delete dir="${JS}" />
    <delete dir="${JS_MIN}" />
  </target>
  <target name="all" depends="clean, html, css, css.min, js, js.min">
    <echo message="Build complete." />
  </target>
</project>
</source>
</source>


Passen Sie in dieser Datei die Zeilen
in


<source lang="xml">
<source lang="html4strict">
...
    <!-- Laden aller CSS-Dateien -->
  <property name="DIST_DIR" value="WebContent" description="Output folder for build targets" />
    <link rel="stylesheet" href="css/all.min.css"/>
...
<!--<link rel="stylesheet" href="css/main.css"  />-->
  <property name="BUILD_DIR" value="c:/web/eclipse/dropins/yuicompressor-2.4.6/build" description="Files needed to build" />
 
  <property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.6.jar" description="YUICompressor" />
    <!-- Laden aller JavaScript-Dateien -->
...
    <script type="text/javascript" src="js/all.min.js"></script>
<!--<script type="text/javascript" src="js/main.js"   ></script>-->
</source>
</source>


gemäß Ihren Wünschen an.
abgeändert werden.


Zunächst müssen Sie die beiden Vorkommnisse von <code>yuicompressor-2.4.6</code> an die von Ihnen
Wenn man nun das Projekt testet, passiert nicht mehr viel, da es die Dateien <code>all.min.css</code> und
installierte Version anpassen. Evtl. haben Sie auch den YUI Compressor in ein anderes Verzeichnis entpackt,
<code>all.mim.js</code> noch nicht gibt.
als oben angegeben. Dann müssen Sie das <code>BUILD_DIR</code> ebenfalls entsprechend anpassen.
 
Die Zeile
<source lang="xml">
  <property name="DIST_DIR" value="WebContent" description="Output folder for build targets" />
</source>
dass die Dateien <code>all.min.css</code> und <code>all.min.js</code>
in die Verzeichnisse <code>css</code> bzw. <code>js</code> des aktuellen Projektes eingefügt werden.


Wenn Sie keinen externen Server (wie beispielsweise einen Apache) installiert haben,
====Build-Skript ausführen====
dann können Sie auch die Zeile
<source lang="xml">
  <property name="DIST_DIR" value="c:/web/apache/htdocs/${PROJECT}" description="Output folder for build targets" />
</source>
verwenden. Diese bewirkt, dass der Web-Auftritt samt komprimierten Dateien <code>all.min.css</code> und <code>all.min.js</code>
direkt in den Web-Ordner des externen Apache-Servers exportiert werden. Den Pfad müssen Sie wieder an Ihre Gegebenheiten anpassen.


Der Vorteil der zweiten Lösung ist, dass die Änderung nach Ausführung der Build-Datei '''sofort''' auf dem externen Server verfügbar sind.
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
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.
Man kann allerdings erzwingen, dass bestimmte Kommentare (z.B. Lizenzinformationen) erhalten bleiben.


Bei der Verwendung der ersten Lösung, d.h. eines (internen oder externen) Eclipse-Servers ergeben sich immer Verzögerungen, da die
Nach Installation und Konfiguration des „YUI Compressor“ kann irgendein Web-Projekt mittels eines Klicks auf den Projektnamen im Projektexplorer selektiert werden.  
Dateien von Eclipse noch zum eigentlichen Server kopiert werden müssen. Diese Verzögerung kann
Mittels eines zweiten Klicks auf das „grüner Kreis mit weißem Pfeil und Werkzeugkasten“ werden für dieses Projekt
man allerdings konfigurieren:
die Dateien  <code>all.min.css</code> und <code>all.min.js</code> erstellt und entweder in die Verzeichnisse
<code>WebContent/css</code> und <code>WebContent/js</code> oder
– sofern dies im Build-Skript konfiguriert wurde – ins Projekt-Verzeichnis des Apache-Servers kopiert.  


* Unterstes Fenster, Reiter <code>Server</code> selektieren
Wenn man mehrere externe Tools verwendet, muss man den Drop-Down-Pfeil rechts neben dem Icon „grüner Kreis mit weißem Pfeil und Werkzeugkasten“
* Gewünschten Server durch Doppelklick öffnen → <code>Veröffentlichen</code> aufklappen → Einstellungen anpassen
klicken und dann das Tool <code>Compress</code> klicken (nachdem man zuvor im Projektexplorer ein Projekt selektiert hat).


Man kann das Veröffentlichen (= Kopieren der Daten von Eclipse zum Server) auch erzwingen:
====Ergebnis des Build-Skripts====


* Unterstes Fenster, Reiter <code>Server</code> selektieren
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
* Rechtsklick auf gewünschten Server → <code>Publizieren</code>
<code>hello.html</code> ausgeführt werden können.


Bei der zweiten Lösung erfolgt die Veröffentlichung ohne Verzögerung automatisch durch Ausführen des Build-Scripts.
=====<code>all.min.css</code>=====
Daher bevorzuge ich (W. Kowarschick) diese Variante. Allerdings hat sie auch einen Nachteil.
<source lang="css">
Im Brwoser öffnet sich keine URL automatisch. Man muss also die zu testende URL von Hand
#d_name{width:185px}#d_canvas{margin-top:10px;border-color:#bbb;border-width:2px;border-style:solid}
in einen Browser eintragen. Das ist in unseren Fall die folgende URL:
</source>


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


===Build-Skript ausführen===
===Testen und speichern===


Nun fehlt noch die Integration des zuvor definierten Build-Skripts in Eclipse:
Nun sollt Ihre Web-Anwendung wieder funktionieren.
Testen Sie sie und speichern Sie sie in Ihrem Repository.


# Projektexplorer: Selektion des aktuellen Projektes
==Quellen==
# Klick auf den Drop-Down-Pfeil rechts neben dem Icon „grüner Kreis mit weißem Pfeul und Werkzeugkasten“ →<code>Externe Tools Konfigurationen</code>
# Klick auf das Icon „weißes Blatt mit Plus-Symbol“ (damit wird eine neues Skript erstellt, das ein externes Tool ausführt)
#* Name: <code>Deploy</code>
#* Erstellungsdatei: <code>C:\web\eclipse\dropins\yuicompressor\build.xml</code> (das ist das zuvor erstellte Build-Skript)
#* Basisverzeichnis: <code>${project_loc}</code>
#* Argumente: <code>-DPROJECT=${project_name}</code>
#<code>Ausführen</code> (Damit wird das Skript auf das zuvor selektierte Projekt angewendet.)
 
Künftig kann irgendein Projekt selektiert werden. Mittels eines Klicks
auf das „grüner Kreis mit weißem Pfeul und Werkzeugkasten“ werden für diese Projekt
die Dateien  <code>all.min.css</code> und <code>all.min.js</code> erstellt und die
Projektdateien (sofern dies im Build-Skript konfiguriert wurde) zum externen Server kopiert.
 
Wenn man mehrere externe Tools verwendet, muss man den Drop-Down-Pfeil rechts neben dem Icon „grüner Kreis mit weißem Pfeul und Werkzeugkasten“
klicken und dann das Tool <code>Deploy</code> klicken (nachdem man zuvor im Prjektexplorer ein Projekt selektiert hat).
 
=Quellen=
<references/>
<references/>
<ol>
<ol>
<li value="3"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
<li value="2"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
</ol>


== [[Subversion/HowTo|SVN]]-Repository-Verweise ==
==Fortsetzung des Tutoriums==
* [http://glossar.hs-augsburg.de/webdav/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_02/ Musterlösung (SVN)]
 
Sie sollten nun [[HTML5-Tutorium: Canvas: Hello World 04|Teil 4 des Tutoriums]] bearbeiten.


[[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

Aktuelle Version vom 23. September 2016, 12:36 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

Inhalt | Teil 1 | Teil 2

Musterlösung: hallo.html (SVN-Repository)

Voraussetzung

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

Ziel: Kompression der Hello-World-Anwendung

Die in 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 YUI Compressor[1].

Zuvor soll der JavaScript-Code aber noch etwas verbessert werden.

Anwendung „HelloWorldCanvas03“

Neues Projekt anlegen

Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen HelloWorldCanvas03 an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

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.

Die HTML-Datei hallo.html soll JavaScript-frei werden, d.h. HTML-Code und JavaScript-Code sollen noch besser getrennt werden.

Gehen Sie folgendermaßen vor. Löschen Sie zunächst in der HTML-Datei hallo.html

  • onload="init()" aus dem body-Element sowie
  • onmousedown="sayHello()" input-Element vom Typ button.

Fügen Sie anschließend in der JavaScript-Datei main.js folgenden Code vor der Definition der init-Funktion ein: 

// Führe die init-Funktion aus, nachdem die HTML-Seite vollständig 
// vom Browser geladen wurde.
window.onload = init;

Die Funktion window.onload wird vom Browser, sofern sie definiert wurde, automatisch ausgeführt, sobald die zugehörige HTML-Seite vollständig geladen wurde.

Zu guter Letzt müssen Sie noch den OK-Button mit der sayHello-Methode verknüpfen, indem Sie folgenden Code in den Rumpf der init-Funktion einfügen: 

// Interaktive HTML-Formular-Elemente mit JavaScript verknüpfen.
document.getElementById("d_button_ok").onmousedown = sayHello;

Dieser Code kann erst ausgeführt werden, nachdem die HTML-Seite vollständig geladen wurde, da das HTML-Button-Objekt vorher nicht existiert. Daher muss die init-Funktion die Verknüpfung zwischen Button und Code herstellen. Hätte man den obigen Code vor die init-Methode eingefügt, hätte der Browser gleich beim Laden der JavaScript-Datei versucht, diese Verknüpfung herzustellen. Das wäre aber schief gegangen, das das Button-Objekt zu diesem Zeitpunk noch nicht existiert.

Wie gewohnt müssen Sie Ihren Code nun testen und – sobald er fehlerfrei läuft – im Repository sichern.

Kompression der JavaScript- und CSS-Dateien

Die komprimierten JavaScript- und CSS-Dateien werden vom build-Skript (siehe nächsten Abschnitt) in den Dateien

  • css/main.css und
  • js/main.js

abgelegt. Um diese Dateien in der HTML-Datei hallo.html zu verwenden, müssen die Zeilen 

    <!-- Laden aller CSS-Dateien -->
    <link rel="stylesheet" href="css/main.css"/>

    <!-- Laden aller JavaScript-Dateien -->
    <script type="text/javascript" src="js/main.js"></script>

in 

    <!-- Laden aller CSS-Dateien -->
    <link rel="stylesheet" href="css/all.min.css"/>
<!--<link rel="stylesheet" href="css/main.css"   />-->

    <!-- Laden aller JavaScript-Dateien -->
    <script type="text/javascript" src="js/all.min.js"></script>
<!--<script type="text/javascript" src="js/main.js"   ></script>-->

abgeändert werden.

Wenn man nun das Projekt testet, passiert nicht mehr viel, da es die Dateien all.min.css und all.mim.js noch nicht gibt.

Build-Skript ausführen

Bei der Installation von Eclipse sollten Sie den „YUI Compressor“ installieren und konfigurieren. Aufgabe dieses Tools ist es, die beiden Dateien all.min.css und all.mim.js zu erstellen. Sie enthalten jeweils den Code aller CSS- bzw. JavaScript-Dateien, die sich im Ordner css bzw. js befinden. 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.

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 all.min.css und all.min.js erstellt und entweder in die Verzeichnisse WebContent/css und WebContent/js oder – sofern dies im Build-Skript konfiguriert wurde – ins Projekt-Verzeichnis des Apache-Servers kopiert.

Wenn man mehrere externe Tools verwendet, muss man den Drop-Down-Pfeil rechts neben dem Icon „grüner Kreis mit weißem Pfeil und Werkzeugkasten“ klicken und dann das Tool Compress klicken (nachdem man zuvor im Projektexplorer ein Projekt selektiert hat).

Ergebnis des Build-Skripts

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

all.min.css
#d_name{width:185px}#d_canvas{margin-top:10px;border-color:#bbb;border-width:2px;border-style:solid}
all.min.js
"use strict";var g_canvas,g_context;window.onload=init;function init(){g_canvas=document.getElementById("d_canvas")...

Testen und speichern

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

Quellen

  1. ↑ YUI Compressor
  1. 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 4 des Tutoriums bearbeiten.

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_Canvas:_Hello_World_03&oldid=40905“