HTML5-Tutorium: Canvas: Hello World 01
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
Ergebnis: hallo.html
(SVN-Repository)
HTML5: Hello-Word-Anwendung mit Canvas
Zur Erstellung der Anwendung wird Eclipse eingesetzt. Alle Eclipse-Versionen ab Helios eignen sich zur Erstellung von HTML5-Web-Anwendungen.
Zum Testen wird der Browser Firefox mit dem Firebug-Plugin verendet.
Unter Eclipse kann der Testbrowser folgendermaßen festgelegt werden:
Fenster
→Benutzervorgaben
→Allgemein
aufklappen →Webbrowser
selektieren →Verwende externen Web-Browser
selektieren → Häckchen vorFirefox
→OK
Eclipse vorbereiten
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)
Zunächst sollte man die „richtige“ Oberfläche auswählen:
Fenster
→Perspektive öffnen
→Web
(evtl. unter dem PunktAndere...
zu finden;
Beachten Sie, es gibt zwei Web-Perspektiven. Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat.
Außerdem muss der Character Code korrekt eingestellt werden:
- Juno:
Fenster
→Benutzervorgaben
→Allgemein
aufklappen →Arbeitsbereich
selektieren
Indigo:Fenster
→Benutzervorgaben
→Web
aufklappen →HTML-Files
selektieren - Juno:
Sonstige
selektieren →UTF-8
im Drop-Down-Menü selektieren
Indigo: Codierung:ISO Latin-1
durchISO 10646/Unicode(UTF-8)
ersetzen -
OK
Musterlösung herunterladen
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)
Laden Sie die Musterlösung http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/
in Eclipse:
- Klick auf Reiter
Datei
→Importieren
SVN
aufklappen → Klick aufCheckout Projects from SVN
→Weiter
- Entweder
Use existing repository location:
undhttp://glossar.hs-augsburg.de/beispiel/tutorium
selektieren (falls vorhanden)Create a new repsotiory location
wählen →Weiter
→ Url:http://glossar.hs-augsburg.de/beispiel/tutorium
Weiter
- Nachden der Dateibaum aufgegangen ist:
html5_canvas
aufklappen →hello_world
aufklappen →html5_canvas_hello_worl_01
selektieren Fertigstellen
Neues Projekt anlegen
Datei
→Neu
→Statisches Web-Projekt
- Project name:
HelloWorldCanvas01
→Fertigstellen
Speichern Sie nun Ihr Projekt in Ihrem Repository:
Projektexplorer
: Rechtsklick aufHelloWorldCanvas01
→Team
→Projekt gemeinsam nutzen
SVN
→Weiter
- Url:
https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT
(ACCOUNT
durch eigenen RZ-Account ersetzen) →Weiter
- Beim ersten Mal: Klick auf
Accept permanently
- Beim ersten Mal: Passwort eingeben → Häckchen bei
Passwort merken
(sonst muss man künftig für jede hozuladende Datei das Passwort eingeben) →OK
- Use specified folder name:
mmprog/tutorium/HelloWorldCanvas01
→Fertigstellen
- Eventuell: Häckchen bei
Entscheidung merken
→Nein
(NichtJa
!!!!)
Projekt im Repository sichern
Das neu angelegte Projekt wird gleich mal im Repositotry gesichert:
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas01
→Team
→Commit
- Enter a comment for the commit operation:
Neues Projekt angelegt.
OK
Neue HTML-Datei anlegen
- Im Projektexplorer (linkes Fenster):
HelloWorldCanvas01
aufklappen - Rechtsklick auf Ordner
WebContent
→Neu
→HTML file
- Dateiname:
hallo.html
→Weiter
→ Templates:New HTML File (5)
→Fertigstellen
HTML-Datei bearbeiten
Erfassen Sie folgenden Code in der HTML-Seite:
<!DOCTYPE html>
<html>
<head>
<!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
<title>HTML5-Tutorium: Canvas: Hello World 01</title>
<!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
<meta charset="UTF-8">
<!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- Zeichnen von "Hello, world!" auf der Bühne,
nachdem die Seite geladen wurde. -->
<script type="text/javascript">
function init()
{
var l_canvas = document.getElementById("d_canvas");
l_canvas.width = 300;
l_canvas.height = 27;
var l_context = l_canvas.getContext("2d");
l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo, Welt!", 5, 20);
}
</script>
</head>
<body onload="init()">
<!-- Die Bühne (Canvas) -->
<canvas id="d_canvas">
Ihr Browser unterstützt HTML5 leider nicht!
</canvas>
</body>
</html>
Anmerkung 1
Auf das Canvas-Element wird ausschließlich von JavaScript aus zugegriffen. Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier könnte beispielsweise eine Flash-Anwendung ausgeführt werden.
Anmerkung 2
Die Meta-Anweisung
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.
Anmerkung 3
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
- Rechtklick in das Editor-Fenster →
Öffnen mit
→Web Page Editor
Allerdings unterstützt dieser WYSIWYG-Editor die HTML5-Zeichenbühne Canvas nicht und ist daher für dieses Tutorium nicht sonderlich nützlich.
HTML-Seite testen
hallo.html
speichern:Strg-s
- Wichtig: Im
Projektexprlorer
jeweils vor dem Server-Aufrufhallo.html
selektieren, sonst erhalten Sie eine Fehlermeldung. - In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen:
JavaScript Web Application
OK
Anmerkungen zum Test-Sever
Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel JavaScript Web Application
die beste Wahl.
Sie können allerdings auch andere Web-Server verwenden:
- Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
- Tomcat (hier muss Tomcat installiert und mit Eclipse verknüpft werden)
- Apache (hier muss Apache installiert und mit Eclipse verknüpft werden; siehe Teil 2 des Tutoriums)
- etc.
In allen diesen Fällen müssten Sie Run on Server
an Stelle von
JavaScript Web Application
auswählen:
- In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen:
Run on Server
OK
Den HTTP-Preview-Server wählen Sie folgendermaßen:
-
HTTP Preview
→Fertigstellen
Beachten Sie, dass beim HTTP-Preview-Server mit jedem Klick des Debug-Icons (grüner Keris mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet wird. Daher ist es sinnvoller, im bestehenden Browserfenster das Reload-Icon (zwei kreiförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der Web-Dateien sichtbar zu machen.
Für komplexere Web-Seiten mit PHP-Code, JSP-Code etc. muss man einen echten Server (wie Apache oder Tomcat) installieren und mit Eclipse verknüpfen.
Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:
- Reiter
Server
im unteren Fenster selektieren - Klick auf Icon „rotes Recheck“ (Server stoppen)
- Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)
Projekt im Repository sichern
Jedes funktionierende Zwischenergebnis eines Projektes sollte im Repository gespeichert werden:
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas01
→Team
→Commit
- Enter a comment for the commit operation:
hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.
OK
JavaScript-Code auslagern
Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen. Diese Verknüpfung von View und Control bringt nur Nachteile mit sich:
- Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden (Impedance Mismatch).
- Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden (Don't Repeat Yourself).
- Die Ladezeiten der einzelnen Seiten werden länger, wenn derselbe JavaScript-Code in unterschiedlichen Seinten eingebaut ist und für jede dieser Seiten erneut geladen werden muss.
Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:
- Rechtsklick auf Ordner
WebContent
→Neu
→Ordner
→ Ordnername:js
→Fertigstellen
- Rechtsklick auf Ordner
js
→Neu
→Datei
→ Dateiname:main.js
→Fertigstellen
Inhalt der Datei main.js
"use strict"; /* Warne vor unsauberem JavaScript-Code! */
function init()
{
// Erzeugung und Initialisierung der Bühne (Canvas)
var l_canvas = document.getElementById("d_canvas");
l_canvas.width = 300;
l_canvas.height = 27;
// Textausgabe (auf der Bühne)
var l_context = l_canvas.getContext("2d");
l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo, Welt!", 5, 20);
}
Geänderter Inhalt der Datei hallo.html
<!DOCTYPE html>
<html>
<head>
<!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
<title>HTML5-Tutorium: Canvas: Hello World 01</title>
<!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
<meta charset="UTF-8">
<!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- Laden aller JavaScript-Dateien -->
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="init()">
<!-- Die Bühne (Canvas) -->
<canvas id="d_canvas">
Ihr Browser unterstützt HTML5 leider nicht!
</canvas>
</body>
</html>
Tipp
Benutzen Sie am Besten die Code-Vervollständigung (Strg-Leerzeichen
bzw. Crtl-Space
).
Beispiel:
- Klicken Sie testweise im Editor-Fenster der Datei
main.js
in die leere Zeile 5 der Funktioninit
. - Drücken Sie
Strg-Leerzeichen
und wählen Sie z.B.l_canvas
. - Geben Sie einen Punkt (
.
) ein und drücken Sie erneutStrg-Leerzeichen
. - Löschen Sie den eben erfassten Inhalt wieder. (Ihre Datei
main.js
sollte ja schon fertiggestellt gewesen sein.)
Projekt im Repository sichern
Auch das Endergebnis des Projektes sollte im Repository gespeichert werden:
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas01
→Team
→Commit
- Enter a comment for the commit operation:
main.js wurde erstellt, zur Auslagerung des JS-Codes aus hallo.html.
OK
Repostitory begutachten
Nun können Sie den Inhalt in Ihrem Repository betrachten.
Fenster
→Perspektive öffnen
→Andere
SVN Repository Exploring
→OK
- Im Dateibaum (linkes Fenster)
https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT
aufklappen →mmprog
aufklappen →tutorium
aufklappen →HelloWorldCanvas01
aufklappen
Hier sehen Sie zunächst den Inhalt des von Ihnen gespeicherten Projektes. Das Repository kann aber noch mehr. Sie können sich alle gespeicherten Versionen Ihres Projektes ansehen:
- Rechtsklick auf
HelloWorldCanvas01
aufklappen →Show History
Nun sehen Sie im Protokoll-Fester die verschiedenen Versionen des Projektes, mit Revisionsnummer, Author (ein Repository kann von mehreren Autoren gelichzeitig benutzt werden), sowie die von Ihnen eingegebenen Kommentare.
Als letztes sollten Sie sich die Entwichlung der Datei hallo.html
einmal näher ansehen:
- Im Dateibaum
WebContent
aufklappen → Rechtsklick aufhallo.html
→Show Resion Graph
Hier sehen Sie, dass es von dieser Datei zwei Versionen gibt. Diese können wir auch miteinander vergleichen:
- Im Dateibaum Rechtsklick auf
hallo.html
→Compare
→OK
In Vergleich der beiden Versionen erkennt mann, dass der JavaScript-Code durch einen Zugriff auf die Datei
js/main.js
ersetzt wurde.
Kehren Sie nun in die normale Arbeitsumgebung zurück:
- In der Icon-Leiste oben rechts auf das Icon der Arbeitsumgebung (Perspektive)
Web
klicken.
Neben den Icon Web
finden Sie jetzt auch ein Icon für die Arbeitsumgebung SVN Repository Exploring
,
damit Sie künftig schneller in diese Perspektive wechseln können.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
- Coding HTML5 Pages Using Eclipse
- HTML5 Canvas Text Tutorial
Siehe auch
- Pilgrim (2011): Mark Pilgrim; Canvas – Dive Into HTML5; http://diveintohtml5.info/; 2011; Quellengüte: 2 (Web)
- w3schools.com: HTML5 Tutorial
- HTML Living Standard — The canvas element