HTML5-Tutorium: Canvas: Hello World 03

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

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

Ergebnis: hello.html (SVN-Repository)

HTML5: Hello-<name>-Anwendung mit Canvas

Die in Teil 2 erstellten JavaScript-Dateien der Hello-World-Anwendung sollen komprimiert werden, um die Zugriffszeiten zu beschleunigen. Dies erfolgt mit Hilfe des Tools YUI Compressor[1].

Musterlösung herunterladen

(Dieser Punkt kann übersprungen werden.)

Laden Sie die Musterlösung http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_03/ auf bekannte Weise in Eclipse.

Neues Projekt anlegen

Legen Sie ein neues Projekt an

  1. Datei → Neu → Statisches Web-Projekt
  2. Project name: HelloWorldCanvas03 → Fertigstellen
  3. Im Menü am oberen Rand: Klick auf Projekt → Eigenschaften → Klick auf Ressource → Codierung der Textdatei: Klick auf Sonstige → UTF-8 selektieren

Legen Sie die Ordner js und css an und kopieren Sie die Dateien main.js, main.css und hello.html aus HelloWorldCanvas02 in die entsprechenden Ordner WebContent des neuen Projektes. Passen Sie das title-Element in der Datei hello.html an.

Nachdem Sie diese Version getestet haben, sollten Sie sie zunächst in Ihrem Repository speichern:

  1. Projektexplorer: Rechtsklick auf HelloWorldCanvas03 → Team → Projekt gemeinsam nutzen
  2. SVN → Weiter
  3. Url: https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT (ACCOUNT durch eigenen RZ-Account ersetzen) → Weiter
  4. Use specified folder name: mmprog/tutorium/HelloWorldCanvas03 → Fertigstellen
  5. Im Projektexplorer: Rechtsklick auf HelloWorldCanvas03 → Team → Commit
  6. Comment: Neues Projekt angelegt.
  7. OK

Kompression der JavaScript- und CSS-Dateien

Ändern Sie 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>-->

Wenn man nun das Projekt testet, passiert nicht 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. 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.[2]

Zusammen mit dem YUI Compressor wurde die Datei build.xml installiert. Diese Skript muss zunächst in Eclipse integriert und anschließend ausgeführt werden:

  1. Projektexplorer: Selektion des aktuellen Projektes
  2. Klick auf den Drop-Down-Pfeil rechts neben dem Icon „grüner Kreis mit weißem Pfeil und Werkzeugkasten“ → Externe Tools Konfigurationen
  3. Ant-Erstellung selektieren
  4. Klick auf das Icon „weißes Blatt mit Plus-Symbol“ (damit wird eine neues Skript erstellt, das ein externes Tool ausführt)
    • Name: Compress
    • Erstellungsdatei: D:\web\eclipse\dropins\yuicompressor\build.xml (das ist das zuvor erstellte Build-Skript, passen Sie gegebenenfalls den Ordner an)
    • Basisverzeichnis: ${project_loc}
    • Argumente: -DPROJECT=${project_name}
  5. Ausführen (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 Pfeil und Werkzeugkasten“ werden für diese Projekt die Dateien all.min.css und all.min.js 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 Pfeil und Werkzeugkasten“ klicken und dann das Tool Compress klicken (nachdem man zuvor im Prjektexplorer 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

canvas{border-color:#bbb;border-width:2px;border-style:solid}

all.min.js

"use strict";var v_canvas;var v_context;function init(){v_canvas=document.getElementById("d_canvas");v_context=v_canvas.getContext("2d");v_canvas.width=300;v_canvas.height=27;}function sayHello(){v_context.clearRect(0,0,v_canvas.width,v_canvas.height);v_context.font="bold 20px 'Times New Roman', Times, serif";v_context.fillText("Hello, "+document.d_form.d_name.value+"!",5,20);}

Testen und speichern

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

  1. Im Projektexplorer: Rechtsklick auf HelloWorldCanvas03 → Team → Commit
  2. Comment: CSS- und JS-Dateien komprimiert.
  3. OK

Konfiguration des Build-Skripts

Abhänging von Ihrer Test-Umgebung müssen Sie die Zeile 

...
  <property name="DIST_DIR" value="WebContent" description="Output folder for build targets" />
...

der Datei D:\web\eclipse\dropins\yuicompressor\build.xml, die Sie zusammen mit dem YUI Compressor installiert haben, eventuell anpassen.

Wenn Sie einen externen Server (wie beispielsweise einen Apache) installiert haben, dann können Sie auch die Zeile 

  <property name="DIST_DIR" value="c:/web/apache/htdocs/${PROJECT}" description="Output folder for build targets" />

verwenden. Diese bewirkt, dass der Web-Auftritt samt komprimierten Dateien all.min.css und all.min.js direkt in den Web-Ordner des externen Apache-Servers exportiert werden. Den Dokument-Root-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.

Quellen

  1. ↑ YUI Compressor
  2. ↑ YUI-Compressor-Dokumentation
  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  2. Musterlösung, Musterlösung (SVN)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_Canvas:_Hello_World_03&oldid=23624“