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
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 49: Zeile 49:


==HTML-Datei bearbeiten==
==HTML-Datei bearbeiten==
Benutzen Sie am Besten immer die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Crtl-Space</code>).
Beispiel:
# Klicken Sie im Editor-Fenster (mit der Überschrift <code>hello.html</code>) in die Leerzeile nach <code>&lt;body&gt;</code>
# Drücken Sie <code>Strg-Leerzeichen</code> und wählen Sie <code>&lt;&gt; canvas</code>
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
# Rechtklick in das Editor-Fenster → <code>Öffnen mit</code> → <code>Web Page Editor</code>


Erfassen Sie folgenden Code in der HTML-Seite:
Erfassen Sie folgenden Code in der HTML-Seite:
Zeile 100: Zeile 91:
</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.
====Anmerkung====
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
# Rechtklick in das Editor-Fenster → <code>Öffnen mit</code> → <code>Web Page Editor</code>
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==
==HTML-Seite testen==

Version vom 20. September 2012, 11:15 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

(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:

  1. Fenster → Perspektive öffnen → Web (evtl. unter dem Punkt Andere... 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:

  1. Fenster → Benutzervorgaben → Web aufklappen -> HTML-Files selektieren
  2. Codierung: ISO Latin-1 durch ISO 10646/Unicode(UTF-8) ersetzen
  3. 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.)

  1. Klick auf Reiter Datei → Importieren
  2. SVN aufklappen → Klick auf Checkout Projects from SVN → Weiter
  3. Entweder
  4. Weiter
  5. Nachden der Dateibaum aufgegangen ist: html5_canvas aufklappen → hello_world aufklappen → html5_canvas_hello_worl_01 selektieren
  6. Fertigstellen

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 (Nicht Ja!!!!)

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

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:

  1. 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-Aufruf hello.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

Für einfache HTML-Dateien funktioniert auch der interne Web-Server von Eclipse. Als Serverziel müssten Sie dann Run on Server</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
  • HTTP Preview → Fertigstellen

Beachten Sie, dass 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. Für Tomcat ist dies unter Installation von Eclipse#Intergration_von_tomcat beschrieben.

Solange Sie nur HRML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel JavaScript Web Application die beste Wahl.

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:

  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>

Daten im Repository sichern

  • Im Projektexplorer: Rechtsklick auf HelloWorldCanvas01 → Team → Commit
  • OK

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=23421“