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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Zeile 92: Zeile 92:
       window.onload = function()
       window.onload = function()
       {
       {
     
         var l_canvas = new Raphael("d_canvas", 300, 27);  
         var l_canvas = new Raphael("d_canvas", 300, 27);  


Version vom 1. Oktober 2012, 19:54 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. In diesem Tutorium wird die JavaScript-Bibliothek Raphaël[1] verwendet. Diese Bibliothek realisert Vektorgrafiken mit SVG in Browsern, die dies unterstützen. In Browsern, die SVG nicht unterstützen (wie z.B. beim Internet Explorer 6.0.) wird automatisch ersatzweise VML verwendet.

Musterlösung herunterladen

(Dieser Punkt kann übersprungen werden.)

Laden Sie die Musterlö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:

  1. Datei → Neu → Statisches Web-Projekt
  2. Project name: HelloWorldSVG01 → Fertigstellen
  3. 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:

  1. Projektexplorer: Rechtsklick auf HelloWorldSvg=1 → Team → Projekt gemeinsam nutzen
  2. SVN → Weiter
  3. Url: https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT (ACCOUNT durch eigenen RZ-Account ersetzen) → Weiter
  4. Use specified folder name: mmprog/tutorium/HelloWorldSVG01 → Fertigstellen

Projekt im Repository sichern

Das neu angelegte Projekt wird als erstes im Repositotry gesichert:

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

Dateien erstellen

raphael.js

Erstellen Sie den Ordner WebContent/lib und legen Sie in diesen Ordner die Datei raphael-min.js.

  1. Laden Sie die Datei raphael-min.js herunter und speichern Sie sie unter dem Namen raphael-min.js ab
  2. Eclipse: Erstellen Sie den Ordner WebContent/lib
  3. Öffnen Sie einen Dateibrowser (Explorer, TotalCmd etc.) und kopieren Sie raphael.js mittels Strg-C bzw. Ctrl-C
  4. Fügen Sie diese Datei mittels Strg-V bzw. Ctrl-V in den Ordner WebContent/lib ein.

Anmerkung

Lassen Sie sich von Eclipse nicht durch das weiße „x“ auf rotem Grund vor der Datei raphael-min.js verwirren. Diese Icon zeigt eigentlich an, dass eine JavaScript-Datei syntaktisch fehlerhaft ist. Allerdings enthält raphael-min.js keine Syntaxfehler. Eclipse wird durch die Komprimierung der Datei etwas verwirrt.

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 01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

    <!-- Umrandung für die Bühne -->
    <style type="text/css">
       #d_canvas
       {
         border-color: #BBBBBB;
         border-width: 2px;
         border-style: solid;
         width:        300px;
         height:       27px;
       }
    </style>

    <!-- Laden von Raphael -->
    <script src="lib/raphael-min.js"></script>
    
    <!-- Zeichnen von "Hello, world!" auf der Bühne, 
    	   nachdem die Seite geladen wurde. -->
    <script type="text/javascript">
      window.onload = function()
      {
        var l_canvas = new Raphael("d_canvas", 300, 27); 

        var l_text = l_canvas.text(5, 13, "Hello, world!")
                             .attr({"font-family": "'Times New Roman', Times, serif", 
                                    "font-size":   20,
                                    "font-weight": "bold",
                                    "text-anchor": "start"
                                   });
      }
    </script>
  </head>
  <body>
    <!-- DIV, in dem die Bühne zu liegen kommt. -->
    <div id="d_canvas"></div>
  </body>
</html>

Beachten Sie, dass im Gegensatz zu HTML5-Tutorium: Canvas: Hello World 01 im body-Tag keine init-Methode aufgerufen wird. Hier wurde eine alternative Möglichkeit gewählt: Es wurde die Funktion window.onload definiert. Diese Funktion wird vom Browser automatisch aufgerufen, sobld die HTML-Seite vollständig geladen und erstellt wurde.

Testen und Sichern des Projektes

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

  1. Im Projektexplorer: Rechtsklick auf HelloWorldCanvas02 → Team → Commit
  2. Enter a comment for the commit operation: hello.html wurde erstellt.
  3. OK
  4. Es kommt eine Warnung, dass Ihr Code Fehler enthält. Wenn nur vor raphael.js als fehlerhaft markiert wurde, können Sie Ihr Projekt trotzdem sichern.

Quellen

  1. ↑ Baranovskiy (2008+): Dmitry Baranovskiy; Raphaël – JavaScript Library; http://dmitrybaranovskiy.github.io/raphael/; Quellengüte: 5 (Web)
  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  2. w3schools.com: HTML5 Tutorial

Siehe auch

  1. Musterlösung
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML-Tutorium:_SVG:_Hello_World_01&oldid=23613“