HTML5-Tutorium: Canvas: Hello World 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
{{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_01/WebContent/hello.html hello.html]</code> | |||
([http://glossar.hs-augsburg.de/webdav/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01 SVN-Repository]) | |||
=HTML5: Hello-Word-Anwendung mit Canvas= | =HTML5: Hello-Word-Anwendung mit Canvas= | ||
Zeile 116: | Zeile 118: | ||
# [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse] | # [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse] | ||
# [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial] | # [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial] | ||
# [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/WebContent/ Musterlösung] | |||
== [[Subversion/HowTo|SVN]]-Repository-Verweise == | == [[Subversion/HowTo|SVN]]-Repository-Verweise == | ||
* [http://glossar.hs-augsburg.de/webdav/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/ Musterlösung] | * [http://glossar.hs-augsburg.de/webdav/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/ Musterlösung (SVN)] | ||
=Siehe auch= | =Siehe auch= |
Version vom 27. September 2011, 13:17 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 (Indigo) eingesetzt. Die Vorgängerversion (Helios) eignet sich auch schon zur Erstellung von HTML5-Web-Anwendungen.
Eclipse vorbereiten
Zunächst muss der Character Code korrekt eingestellt werden:
Fenster
→Benutzervorgaben
→Web
aufklappen ->HTML-Files
selektieren- Codierung:
ISO Latin-1
durchISO 10646/Unicode(UTF-8)
ersetzen OK
Außerdem sollte man die „richtige“ Oberfläche auswählen:
Fenster
→Perspektive öffnen
→Web
(evtl. unter dem PunktAndere...
zu finden)
Neues Projekt anlegen
Datei
→Neu
→Statisches Web-Projekt
- Project name:
HelloWorldCanvas01
→Fertigstellen
Neue HTML-Datei anlegen
- Im Projektexplorer (linkes Fenster):
HelloWorldCanvas01
aufklappen - Rechtsklick auf Ordner
WebContent
→Neu
→HTML file
- Dateiname:
hello.html
→Weiter
→ Templates:New HTML Flie (5)
→Fertigstellen
HTML-Datei bearbeiten
Benutzen Sie am Besten immer die Code-Vervollständigung (Strg-Leerzeichen
bzw. Crtl-Space
).
Beispiel:
- Klicken Sie im Editor-Fenster (mit der Überschrift
hello.html
)in die Leerzeile nach<body>
- Drücken Sie
Strg-Leerzeichen
und wäglen Sie<> canvas
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
- Rechtklick in das Editor-Fenster →
Öffnen mit
→Web Page Editor
Erfassen Sie folgenden Code in der HTML-Seite:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World (Canvas 01)</title>
<script>
function init()
{
var l_canvas = document.getElementById("e_canvas");
var l_context = l_canvas.getContext("2d");
l_context.fillText("Hello, world!", 200, 100);
}
</script>
</head>
<body onload="init()">
<canvas id="e_canvas" width="400" height="200"></canvas>
</body>
</html>
HTML-Seite testen
- In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen:
HTTP Preview
→Fertigstellen
Beim zweiten Debugging-Aufruf kann man den gewünschten Server direkt aus einer Liste auswählen und diesen auch als Projektstandard festlegen, damit man nicht bei jedem Debugging-Vorgang erneut einen Server wählen muss:
- Haken vor
Server als Projektstandardeinstellung (nicht wieder fragen)
→Fertigstellen
JavaScript-Code auslagern
Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen. Diese Verknüpfung von View und Controll 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("e_canvas");
var l_context = l_canvas.getContext("2d");
l_context.fillText("Hello, world!", 200, 100);
}
Geänderter Inhalt der Datei hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World (Canvas 01)</title>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body onload="init()">
<canvas id="e_canvas" width="400" height="200"></canvas>
</body>
</html>
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