HTML5-Tutorium: Canvas: Hello World 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
Zeile 44: | Zeile 44: | ||
# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code> | # <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code> | ||
# <code>SVN</code> → <code>Weiter</code> → | # <code>SVN</code> → <code>Weiter</code> → | ||
# Url: <code> https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> (<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen | # Url: <code> https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code> | ||
# Use specified folder name: <code>mmprog/tutorium</code> → <code>Fertigstellen</code> | # Use specified folder name: <code>mmprog/tutorium</code> → <code>Fertigstellen</code> | ||
# '''Eventuell''': Häckchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!) | # '''Eventuell''': Häckchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!) |
Version vom 21. September 2012, 11:22 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
Ergebnis: hello.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.
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)
Bei Eclipse-Versionen vor Juno muss außerdem der Character Code korrekt eingestellt werden:
Fenster
→Benutzervorgaben
→Web
aufklappen ->HTML-Files
selektieren- 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ösunglö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
- Use specified folder name:
mmprog/tutorium
→Fertigstellen
- Eventuell: Häckchen bei
Entscheidung merken
→Nein
(NichtJa
!!!!)
Neue HTML-Datei anlegen
- Im Projektexplorer (linkes Fenster):
HelloWorldCanvas01
aufklappen - Rechtsklick auf Ordner
WebContent
→Neu
→HTML file
- Dateiname:
hello.html
→Weiter
→ Templates:New HTML File (5)
→Fertigstellen
HTML-Datei bearbeiten
Erfassen Sie folgenden Code in der HTML-Seite:
<!DOCTYPE html>
<html>
<head>
<title>HTML5-Tutorium: Canvas: Hello World 01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<script type="text/javascript">
function init()
{
var l_canvas = document.getElementById("d_canvas");
var l_context = l_canvas.getContext("2d");
l_canvas.width = 300;
l_canvas.height = 27;
l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hello, world!", 5, 20);
}
</script>
</head>
<body onload="init()">
<canvas id="d_canvas">
Ihr Browser unterstützt Canvas nicht.
</canvas>
</body>
</html>
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.
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
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
hello.html
speichern:Strg-s
- Wichtig: Im
Projektexprlorer
muss jeweils vor dem Server-Aufrufhello.html
selektiert worden sein, 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)
- 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)
Daten im Repository sichern
Jedes funktionierende Zwischenergebnis sollte im Repository gespeichert werden:
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas01
→Team
→Commit
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
function init()
{
var l_canvas = document.getElementById("d_canvas");
var l_context = l_canvas.getContext("2d");
l_canvas.width = 300;
l_canvas.height = 27;
l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hello, world!", 5, 20);
}
Geänderter Inhalt der Datei hello.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5-Tutorium: Canvas: Hello World 01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="init()">
<canvas id="d_canvas">
Ihr Browser unterstützt Canvas nicht.
</canvas>
</body>
</html>
Tipp
Benutzen Sie am Besten die Code-Vervollständigung (Strg-Leerzeichen
bzw. Crtl-Space
).
Beispiel:
- Klicken Sie im Editor-Fenster der Datei
main.js
in die leer 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.)
Daten im Repository sichern
Auch das Endergebnis sollte im Repository gespeichert werden:
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas01
→Team
→Commit
OK
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
- Musterlösung, Musterlösung (SVN)