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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Zeile 37: Zeile 37:


===<code>hello.html</code>===
===<code>hello.html</code>===
Erstellen Sie im Ordner <code>WebContent</code> des Projektes die Datei <code>hello.html</code>,
Erstellen Sie im Ordner <code>WebContent</code> des Projektes die Datei <code>hello.html</code>.
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 <code>hello.html</code>====
====Inhalt von <code>hello.html</code>====


<source lang="html4strict">
<source lang="html4strict">
<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
   <head>
   <head>
     <title>HTML5-Tutorium: Canvas: Hello World 01</title>
 
    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
     <title>HTML5-Tutorium: SVG: Hello World 01</title>
 
    <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
     <meta charset="UTF-8">
     <meta charset="UTF-8">
    <!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
     <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">
    <!-- 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 -->
     <!-- Laden von Raphael -->
Zeile 69: Zeile 62:
       nachdem die Seite geladen wurde. -->
       nachdem die Seite geladen wurde. -->
     <script type="text/javascript">
     <script type="text/javascript">
       window.onload = function()
       function init()
       {
       { var l_canvas = new Raphael("d_canvas", 300, 27);  
        var l_canvas = new Raphael("d_canvas", 300, 27);  


         var l_text = l_canvas.text(5, 13, "Hello, world!")
         l_canvas
                            .attr({"font-family": "'Times New Roman', Times, serif",  
          .text(5, 13, "Hallo, Welt!")
                                    "font-size":  20,
          .attr({"font-family": "'Times New Roman', Times, serif",  
                                    "font-weight": "bold",
                "font-size":  20,
                                    "text-anchor": "start"
                "font-weight": "bold",
                                  });
                "text-anchor": "start",
      }
                });
    };
     </script>
     </script>
   </head>
   </head>
   <body>
   <body onload="init()">
     <!-- DIV, in dem die Bühne zu liegen kommt. -->
 
     <div id="d_canvas"></div>
     <!-- DIV, in dem die Bühne (Raphaël paper)) zu liegen kommt -->
     <div id="d_canvas">&nbsp;</div>
 
   </body>
   </body>
</html>
</html>
</source>
</source>
Beachten Sie, dass im Gegensatz zu [[HTML5-Tutorium: Canvas: Hello World 01]] im <code>body</code>-Tag keine <code>init</code>-Methode aufgerufen wird.
Hier wurde eine alternative Möglichkeit gewählt: Es wurde die Funktion <code>window.onload</code> definiert. Diese Funktion wird vom Browser
automatisch aufgerufen, sobld die HTML-Seite vollständig geladen und erstellt wurde.


==Testen und Sichern des Projektes==
==Testen und Sichern des Projektes==

Version vom 8. Oktober 2012, 13:30 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: hallo.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. Das heißt, diese Anwendunge funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern, Raphaël nur EcmaScript 3 an Stelle von EcmaScript 5 voraussetzt.

Musterlösung herunterladen

(Dieser Punkt kann übersprungen werden.)

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

Neues Projekt anlegen und speichern

Legen Sie ein neues Statisches Web-Projekt mit dem Namen HelloWorldSVG01 an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

Dateien erstellen

raphael.js

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

Gehen Sie dabei genauso vor, wie beim Einbinden von jQuery im 4. Teil des Hello-World-Canvas-Tutoriums.

hello.html

Erstellen Sie im Ordner WebContent des Projektes die Datei hello.html.

Inhalt von hello.html

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>

    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
    <title>HTML5-Tutorium: SVG: Hello World 01</title>

    <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
    <meta charset="UTF-8">

    <!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

    <!-- 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">
      function init()
      { var l_canvas = new Raphael("d_canvas", 300, 27); 

        l_canvas
          .text(5, 13, "Hallo, Welt!")
          .attr({"font-family": "'Times New Roman', Times, serif", 
                 "font-size":   20,
                 "font-weight": "bold",
                 "text-anchor": "start",
                });
     };
    </script>

  </head>
  <body onload="init()">

    <!-- DIV, in dem die Bühne (Raphaël paper)) zu liegen kommt -->
    <div id="d_canvas">&nbsp;</div>

  </body>
</html>

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
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML-Tutorium:_SVG:_Hello_World_01&oldid=23696“