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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenzzur nächsten 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
Keine Bearbeitungszusammenfassung
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Zeile 77: Zeile 77:


Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
Sollte ein Brwoser dieses Element nit unterstützen, so wird der alternative
Sollte ein Browser dieses Element nit unterstützen, so wird der alternative
HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.
könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.
Zeile 83: Zeile 83:
Die Meta-Anweisung
Die Meta-Anweisung
<source lang="html4strict">
<source lang="html4strict">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</source>
</source>
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.

Version vom 18. September 2012, 16:49 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

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

Zunächst sollte man die „richtige“ Oberfläche auswählen:

  1. Fenster → Perspektive öffnen → Web (evtl. unter dem Punkt Andere... zu finden)

Bei Eclipse-Versionen vor Juno muss außerdem der Character Code korrekt eingestellt werden:

  1. Fenster → Benutzervorgaben → Web aufklappen -> HTML-Files selektieren
  2. Codierung: ISO Latin-1 durch ISO 10646/Unicode(UTF-8) ersetzen
  3. OK

Neues Projekt anlegen

  1. Datei → Neu → Statisches Web-Projekt
  2. Project name: HelloWorldCanvas01 → Fertigstellen
  3. Projektexplorer: Rechtsklick auf HelloWorldCanvas01 → Team → Projekt gemeinsam nutzen
  4. SVN → Weiter →
  5. Url: https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT (ACCOUNT durch eigenen RZ-Account ersetzen; es kann auch jedes andere SVN-Repository verwendet werden) → Weiter
  6. Use specified folder name: mmprog/tutorium → Fertigstellen
  7. Hackchen bei Entscheidung merken → Nein

Neue HTML-Datei anlegen

  1. Im Projektexplorer (linkes Fenster): HelloWorldCanvas01 aufklappen
  2. Rechtsklick auf Ordner WebContent → Neu → HTML file
  3. Dateiname: hello.html → Weiter → Templates: New HTML File (5) → Fertigstellen

HTML-Datei bearbeiten

Benutzen Sie am Besten immer die Code-Vervollständigung (Strg-Leerzeichen bzw. Crtl-Space).

Beispiel:

  1. Klicken Sie im Editor-Fenster (mit der Überschrift hello.html)in die Leerzeile nach <body>
  2. Drücken Sie Strg-Leerzeichen und wäglen Sie <> canvas

Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:

  1. Rechtklick in das Editor-Fenster → Öffnen mit → Web Page Editor

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 nit 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.

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

Allerdings wird mit jedem Klick des Debug-Icons (grüner Keris mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet. Sinnvoller ist es daher, im bestehenden Browserfenster das Reload-Icon (zwei kreiförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der Web-Dateien sichtbar zu machen.

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:

  1. Rechtsklick auf Ordner WebContent → Neu → Ordner → Ordnername: js → Fertigstellen
  2. 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>

Quellen

  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  2. Coding HTML5 Pages Using Eclipse
  3. HTML5 Canvas Text Tutorial
  4. Musterlösung, Musterlösung (SVN)

Siehe auch

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