Version vom 22. September 2012, 11:58 Uhr

Vorlage:HTML5-Tutorium:SVG:HelloWorld:Menü Ergebnis: hello.html (SVN-Repository)

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

HTML5: Hello-<name>-Anwendung mit Raphaël (SVG)

Die in HTML5-Tutorium: Canvas: Hello World erstellte Hello-World-Anwendung wird so umgeschrieben, dass die Ausgabe der Begrüßung nicht als Pixelgrafik auf einer Zeichenbühne (Canvas) erfolgt, sondern als Vektorgrafik. Vektorgrafiken können in modernen Browsern mit SVG dargestellt werden.

Musterlösung herunterladen

(Dieser Punkt kann übersprungen werden.)

Laden Sie die Musterlösunglösung http://glossar.hs-augsburg.de/beispiel/tutorium/html5_svg/hello_world/html5_svg_hello_world_01/ auf bekannte Weise in Eclipse.

Neues Projekt anlegen

Legen Sie ein neues Projekt an:

Datei → Neu → Statisches Web-Projekt
Project name: HelloWorldSVG01 → Fertigstellen
Im Menü am oberen Rand: Klick auf Projekt → Eigenschaften → Klick auf Ressource → Codierung der Textdatei: Klick auf Sonstige → UTF-8 selektieren

Speichern Sie Ihr Projekt wiederum in Ihrem Repository:

Projektexplorer: Rechtsklick auf HelloWorldSvg=1 → 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/HelloWorldSVG01 → Fertigstellen

Projekt im Repository sichern

Das neu angelegte Projekt wird als erstes im Repositotry gesichert:

Im Projektexplorer: Rechtsklick auf HelloWorldSVG01 → Team → Commit
Comment: Neues Projekt angelegt.
OK

Dateien erstellen

`main.js`

Erstellen Sie im Ordner WebContent/js des Projektes die Datei main.js. Diese Datei enthält nun zwei Funktionen:

init: Diese wird nach dem Laden det HTML-Seiten in einen Browser aufgerufen, um Raphaël zu initialisieren.
sayHello: Diese wird aufgerufen, sobald der Benutzer seinen Namen eingegeben und den OK-Button gedrückt hat.

Inhalt von `main.js`

"use strict"; /* Warne vor unsauberem JavaScript-Code! */

var v_canvas; 
var v_context; 

/** Inisialisiert die Zeichenbühnen (Canvas) */
function init()
{
  v_canvas  = document.getElementById("d_canvas");
  v_context = v_canvas.getContext("2d");

  v_canvas.width  = 300;
  v_canvas.height =  27;
}
   
/**
 * Löscht den aktuellen Inhalt von der Zeichenbühne
 * und schreibt dann eine Begrüßung in die Zeichenbühne.
 * Der Name des Benutzers wird aus einem Eingabefeld von der HTML-Seite gelesen.
 */ 
function sayHello()
{
  v_context.clearRect(0, 0, v_canvas.width, v_canvas.height); // clear canvas
  v_context.font = "bold 20px 'Times New Roman', Times, serif";
  v_context.fillText("Hello, " + document.d_form.d_name.value + "!", 5, 20);
}

`main.css`

Erstellen Sie im Ordner WebContent/css des Projektes die Datei main.css:

Inhalt von `main.css`

/* Die Zeichnenbühne wird mit Hilfe eines Rands optisch hervorgehoben. */
canvas
{
  border-color: #BBBBBB; 
  border-width: 2px; 
  border-style: solid; 
}

`hello.html`

Erstellen Sie im Ordner WebContent des Projektes die Datei hello.html, die den Benutzer nach seinem Namen fragt und diesen, nachdem der Benutzer einen OK-Button gedrückt hat, zur Begrüßung des Benutzers verwendet.

Inhalt von `hello.html`

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5-Tutorium: Canvas: Hello World 02</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <link   rel="stylesheet"       href="css/main.css" />
    <script type="text/javascript" src="js/main.js"     ></script>
  </head>
  <body onload="init()">

    <!-- Die Zeichenbühne -->
    <canvas id="d_canvas">
      Your browser does not support canvas! 
    </canvas>

    <!-- Das Eingabeformular zur Eingabe des Benutzernamens -->
    <form name="d_form">
       <label>Your name:</label>
       <input name="d_name" type="text" value=""><br/>
       <input type="button" value="OK" onmousedown="sayHello()">
    </form>

  </body>
</html>

Testen und Sichern des Projektes

Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis:

Im Projektexplorer: Rechtsklick auf HelloWorldCanvas01 → Team → Commit
Enter a comment for the commit operation: hello.html mit main.js und main.css wurden erstellt.
OK

Anschließend sollten Sie ein wenig mit den drei Dateien experimentieren, indem Sie sinnvolle und fehlerhafte Änderungen vornehmen. Löschen Sie z.B. die Zeilen mit dem Aufruf der Funktion clearRect aus der Datei main.js und testen Sie Ihre Anwendunge erneut. (Tipp: Geben Sie mehrmals hintereinander jeweils einen anderen Namen ein.)

Speichern Sie zu guter Letzt Ihre sinnvollen Änderungen auch im Repository (mit kurzem, aber sinnvollem Kommentar!).

Optional: Apache als Test-Server

Anstelle des Eclipse-eigenen Testserver kann man auch einen beliebigen anderen Server (wie z.B. Apache oder Tomcat) zum Testen einer Web-Anwendung verwenden. Der Vorteil dieser Variante ist, dass man den Zielserver gemäß seinen Bedürfnissen wählen und konfigurieren kann und dass die Anwendung von Anfang an auf dem richtigen Server getestet wird.

Voraussetzung ist, dass ein entsprechender Server lokal installiert wurde:

Installation von Apache (Windows), Installation von Apache (Mac OS X), Installation von Apache (Unix)

Der Apache-Server muss laufen, sonst funktioniert der nachfolgende Test nicht!

Definieren eines neuen Apache-Test-Servers in Eclipse (nachdem der Apache installiert und gestartet wurde):

Projektexplorer: Rechtklick auf den Root-Ordner des aktuellen Projektes HelloWorldCanvas02 → Eigenschaften → Server → Standardserver: keine → OK
Im Projektverzeichnis: hello.html selektieren → Klick auf Icon „grüner Kreis mit weißem Dreieck“ → Run on Server → OK
Neuen Server manuell definieren selektieren → Severziel eingeben: HTTP Server selektieren
Hostname des Servers: localhost, Server name: Apache → Weiter
Publishing Directory: D:\web\apache\htdocs (Webverzeichnis des Servers, abhängig davon, wohin Sie den Apache installiert haben) → Weiter
evtl. Anpassungen vornehmen → Fertigstellen

Beim nächsten Aufruf von Run on Server wird der Server Apache unter der Liste der vorhandenen Server aufgeführt. Man sollte diesen Server wählen und dann das Häckchen vor Server als Projektstandardeinstellung festlegen setzen, damit man die Serverwahl nicht bei jedem Test erneu ausführen muss.

Als Browser wird der in Eclipse integrierte Browser verwendet. Besser ist es den Firefox als Standardbrowser zu verwenden:

Klick auf Fenster → Klick auf Web → Klick auf Web → Klick auf Firefox

Ein Problem bleibt bestehen: Bei jedem Aufruf von Run on Server wird in Eclipse oder Firefox ein neues Browserfester geöffnet. Um dies zu verhindern, kann man folgenden Trick anwenden, nachdem Run on Server zum ersten Mal ausgeführt worden ist:

Im mittleren unteren Fenster den Reiter Server selektieren
Apache aufklappen und selektieren
Wenn dort nicht synchronisiert, sondern Erneut publizieren steht: Im unteren mittleren Fenster: Klick auf das vierte Icon von rechts (Auf dem Server bereitstellen)
Sobald beim Apache wieder synchronisiert steht, kann im Browserfester der Reload-Button gedrückt werden, um die neuen Daten abzufrufen. (Eventuell muss der Browser-Cache geleert werden.)

Quellen

Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
w3schools.com: HTML5 Tutorial

Siehe auch

Musterlösung

@@ Zeile 7: / Zeile 7: @@
 Die in [[HTML5-Tutorium: Canvas: Hello World]] erstellte Hello-World-Anwendung wird so umgeschrieben,
 dass die Ausgabe der Begrüßung nicht als [[Pixelgrafik]] auf einer Zeichenbühne (Canvas) erfolgt, sondern
-als [[Vektorgrafik]]. Vektorgrafiken können in modernen Brwosern mit [[SVG]] dargestellt werden.
+als [[Vektorgrafik]]. Vektorgrafiken können in modernen Browsern mit [[SVG]] dargestellt werden.
 ==Musterlösung herunterladen==

Anonym

Suche

HTML-Tutorium: SVG: Hello World 01: Unterschied zwischen den Versionen

Namensräume

Mehr

Seitenaktionen

Version vom 22. September 2012, 11:58 Uhr

Inhaltsverzeichnis

HTML5: Hello-<name>-Anwendung mit Raphaël (SVG)

Musterlösung herunterladen

Neues Projekt anlegen

Projekt im Repository sichern

Dateien erstellen

`main.js`

Inhalt von `main.js`

`main.css`

Inhalt von `main.css`

`hello.html`

Inhalt von `hello.html`

Testen und Sichern des Projektes

Optional: Apache als Test-Server

Quellen

Siehe auch

Navigation

Navigation

Wikiwerkzeuge

Wikiwerkzeuge

Anonym

Suche

HTML-Tutorium: SVG: Hello World 01: Unterschied zwischen den Versionen

Version vom 22. September 2012, 11:58 Uhr

HTML5: Hello-<name>-Anwendung mit Raphaël (SVG)

Musterlösung herunterladen

Neues Projekt anlegen

Projekt im Repository sichern

Dateien erstellen

main.js

Inhalt von main.js

main.css

Inhalt von main.css

hello.html

Inhalt von hello.html

Testen und Sichern des Projektes

Optional: Apache als Test-Server

Quellen

Siehe auch

Navigation

Wikiwerkzeuge

Seitenwerkzeuge

Kategorien

`main.js`

Inhalt von `main.js`

`main.css`

Inhalt von `main.css`

`hello.html`

Inhalt von `hello.html`