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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen 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
Keine Bearbeitungszusammenfassung
 
(45 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{HTML-Tutorium:SVG:HelloWorld:Menü}}
{{HTML-Tutorium:SVG:HelloWorld:Menü}}
'''Ergebnis''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
'''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01 SVN-Repository])
([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01 SVN-Repository])


{{In Bearbeitung}}
==Voraussetzung==
=HTML5: Hello-&lt;name&gt;-Anwendung mit Raphaël (SVG)=
 
Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 01]] kennen.
 
==Ziel: Ausgabe von „Hallo Welt!“ als SVG-Grafik==
Die in [[HTML5-Tutorium: Canvas: Hello World]] erstellte Hello-World-Anwendung wird so umgeschrieben,
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  
dass die Ausgabe der Begrüßung nicht als [[Pixelgrafik]] sondern als [[Vektorgrafik]] ausgegeben wird.
als [[Vektorgrafik]]. Vektorgrafiken können in modernen Browsern mit [[SVG]] dargestellt werden.
Vektorgrafiken können in modernen Browsern mittels [[SVG]] dargestellt werden.
In diesem Tutorium wird die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy, D.: Raphaël (2008+) – JavaScript Library}}</ref>
verwendet.


Diese Bibliothek realisert Vektorgrafiken mit SVG in Browsern, die dies unterstützen. In Browsern,
In diesem Tutorium wird die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy (2008+)}}</ref>
die [[SVG]] nicht unterstützen (wie z.B. beim Internet Explorer 6.0.) wird automatisch ersatzweise [[VML]] verwendet.
verwendet. Diese Bibliothek stellt Vektorgrafiken mit Hilfe von SVG in Browsern dar, die dies unterstützen. In Browsern,
Das heißt, diese Anwendunge funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern,
die [[SVG]] nicht unterstützen (wie z.B. der Internet Explorer 6.0) wird automatisch ersatzweise [[VML]] verwendet.
Raphaël nur JavaScript 3 und nicht JavaScript 5 voraussetzt.  
Das heißt, diese Anwendung funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern,
da Raphaël nur [[EcmaScript|EcmaScript 3]] an Stelle von  [[EcmaScript|EcmaScript 5]] voraussetzt.  


==Musterlösung herunterladen==
==Anwendung „<code>HelloWorldSVG01</code>“==
(Dieser Punkt kann übersprungen werden.)
===Neues Projekt anlegen und speichern===


Laden Sie die Musterlösung <code>http://glossar.hs-augsburg.de/beispiel/tutorium/html5_svg/hello_world/html5_svg_hello_world_01/</code>
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldSVG01</code> an.
auf [[HTML5-Tutorium: Canvas: Hello World 01#Musterl.C3.B6sung_herunterladen|bekannte Weise]] in Eclipse.


==Neues Projekt anlegen==
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.


Legen Sie ein neues Projekt an:
===Dateien erstellen===


# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
====<code>raphael.js</code>====
# Project name: <code>HelloWorldSVG01</code> → <code>Fertigstellen</code>
Erstellen Sie den Ordner <code>WebContent/lib</code> und legen Sie in diesen Ordner
# Im Menü am oberen Rand: Klick auf <code>Projekt</code> → <code>Eigenschaften</code>  → Klick auf <code>Ressource</code> → Codierung der Textdatei: Klick auf <code>Sonstige</code> → <code>UTF-8</code> selektieren
die Datei [http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js <code>raphael-min.js</code>].


Speichern Sie Ihr Projekt wiederum in Ihrem Repository:
Gehen Sie dabei genauso vor, wie beim Einbinden von <code>jQuery</code> im [[HTML5-Tutorium:_Canvas:_Hello_World_04#Einbinden_von_jQuery|4. Teil des Hello-World-Canvas-Tutoriums]].


# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldSvg=1</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
====<code>hello.html</code>====
# <code>SVN</code> → <code>Weiter</code>
Erstellen Sie im Ordner <code>WebContent</code> des Projekts die Datei <code>hello.html</code>.
# Url: <code> https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>
# Use specified folder name: <code>mmprog/tutorium/HelloWorldSVG01</code> → <code>Fertigstellen</code>


==Projekt im Repository sichern==
=====Inhalt von <code>hello.html</code>=====


Das neu angelegte Projekt wird als erstes im Repositotry gesichert:
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
 
    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
    <title>HTML5-Tutorium: SVG: Hello World 01</title>


# Im Projektexplorer: Rechtsklick auf <code>HelloWorldSVG01</code> → <code>Team</code> → <code>Commit</code>
    <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
# Comment: <code>Neues Projekt angelegt.</code>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
# <code>OK</code>


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


===<code>raphael.js</code>===
    <!-- Laden von Raphael -->
Erstellen Sie den Ordner <code>WebContent/lib</code> und legen Sie in diesen Ordner
    <script type="text/javascript" src="lib/raphael-min.js"></script>
die Datei [http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js <code>raphael-min.js</code>].
   
    <!-- Schreiben von "Hallo Welt!" 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>
</source>


# Laden Sie die Datei [http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js <code>raphael-min.js</code>] herunter und speichern Sie sie unter dem Namen  <code>raphael-min.js</code> ab
===Testen und Sichern des Projekts===
# Eclipse: Erstellen Sie den Ordner <code>WebContent/lib</code>
# Öffnen Sie einen Dateibrowser (Explorer, TotalCmd etc.) und kopieren Sie <code>raphael.js</code> mittels <code>Strg-C</code> bzw. <code>Ctrl-C</code>
# Fügen Sie diese Datei mittels <code>Strg-V</code> bzw. <code>Ctrl-V</code> in den Ordner <code>WebContent/lib</code> ein.


====Anmerkung====
Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis.
Lassen Sie sich von Eclipse nicht durch das weiße „x“ auf rotem Grund vor der Datei <code>raphael-min.js</code> verwirren. Diese Icon zeigt
eigentlich an, dass eine JavaScript-Datei syntaktisch fehlerhaft ist. Allerdings enthält <code>raphael-min.js</code> keine Syntaxfehler.
Eclipse wird durch die Komprimierung der Datei etwas verwirrt.


===<code>hello.html</code>===
===Funktionsweise von Raphaël===
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>====
Wie funktioniert Raphaël? Ganz einfach: Raphaël fügt in das <code>div</code>-Element,
das ihm als Bühne übergeben wurde, SVG-Code ein und veranlasst den Browser, die Seite
neu zu rendern. Das Hello-Word-Beispiel funktioniert bei SVG-fähigen Browsern auch vollkommen ohne JavaScript- und Raphaël.
Man könnte den SVG-Code auch direkt in die HTML-Datei einfügen:


<source lang="html4strict">
<source lang="html4strict">
Zeile 72: Zeile 97:
<html>
<html>
   <head>
   <head>
     <title>HTML5-Tutorium: Canvas: Hello World 01</title>
     <title>HTML5-Tutorium: SVG: Hello World 01</title>
     <meta charset="UTF-8">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <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 -->
    <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>
   </head>
   <body>
   <body>
     <!-- DIV, in dem die Bühne zu liegen kommt. -->
     <div id="d_canvas">
    <div id="d_canvas"></div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        style="overflow: hidden; position: relative;"
      >
        <desc>
          Created with Raphaël 2.1.0;
          simplified and copied into the HTML code by W. Kowarschick
        </desc>
        <text
          style="text-anchor: start; font: bold 20px 'Times New Roman',Times,serif;"
          x="5" y="13"  
        >
          Hallo Welt!
        </text>
      </svg>
    </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.
Raphaël bietet allerdings zwei Vorteile:
Hier wurde eine alternative Möglichkeit gewählt: Es wurde die Funktion <code>window.onload</code> definiert. Diese Funktion wird vom Browser
* Vektorgrafiken werden auch in Browsern angezeigt, die SVG nicht darstellen können.
automatisch aufgerufen, sobld die HTML-Seite vollständig geladen und erstellt wurde.
* Die Vektorgrafiken können zur Laufzeit dynamisch verändert werden. (Dies wäre allerdings auch mit Hilfe von [[CSS-Animationen]] oder direkt mit JavaScript möglich.)
Einen Nachteil hat Raphaël allerdings auch:
*Man kann keine SVG-Dateien direkt in Raphaël importieren (da Raphaël eine Vektorgrafik ja nicht immer mittels SVG anzeigt). Vereinzelt findet man allerdings entsprechende Raphaël-Erweiterungen im Netz (z.B. [http://code.google.com/p/aria-math-and-science/source/browse/trunk/powersim/lib/raphael-svg-import.js?spec=svn72&r=72 raphael-svg-import.js] oder [https://github.com/sanojian/raphael-svg-import raphael-svg-import von sanojian]).
 
===JavaScript-Code auslagern===


==Testen und Sichern des Projektes==
Lagern Sie [[HTML5-Tutorium:_Canvas:_Hello_World_01#JavaScript-Code auslagern|wie in Teil 1 des Hello-World-Canvas-Tutoriums]]
den JavaScript-Code aus der HTML-Datei <code>hallo.html</code> in die JavaScript-Datei <code>js/main.js</code> aus.


Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis:
===Testen und Sichern des Projekts===


# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas02</code> → <code>Team</code> → <code>Commit</code>
Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu sichern.
# Enter a comment for the commit operation: <code>hello.html wurde erstellt.</code>
# <code>OK</code>
# '''Es kommt eine Warnung, dass Ihr Code Fehler enthält. Wenn nur vor <code>raphael.js</code> als fehlerhaft markiert wurde, können Sie Ihr Projekt trotzdem sichern.'''


=Quellen=
==Quellen==
<references/>
<references/>
<ol start="2">
<ol start="2">
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
<li> [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]</li>
</ol>
</ol>
==Fortsetzung des Tutoriums==
Sie sollten nun [[HTML-Tutorium: SVG: Hello World 02|Teil 2 des Tutoriums]] bearbeiten.


<noinclude>[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
<noinclude>[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>
</noinclude>

Aktuelle Version vom 1. März 2023, 13:16 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

Musterlösung: hallo.html (SVN-Repository)

Voraussetzung

Sie sollten die Inhalte des Tutoriums HTML5-Tutorium: Canvas: Hello World 01 kennen.

Ziel: Ausgabe von „Hallo Welt!“ als SVG-Grafik

Die in HTML5-Tutorium: Canvas: Hello World erstellte Hello-World-Anwendung wird so umgeschrieben, dass die Ausgabe der Begrüßung nicht als Pixelgrafik sondern als Vektorgrafik ausgegeben wird. Vektorgrafiken können in modernen Browsern mittels SVG dargestellt werden.

In diesem Tutorium wird die JavaScript-Bibliothek Raphaël[1] verwendet. Diese Bibliothek stellt Vektorgrafiken mit Hilfe von SVG in Browsern dar, die dies unterstützen. In Browsern, die SVG nicht unterstützen (wie z.B. der Internet Explorer 6.0) wird automatisch ersatzweise VML verwendet. Das heißt, diese Anwendung funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern, da Raphaël nur EcmaScript 3 an Stelle von EcmaScript 5 voraussetzt.

Anwendung „HelloWorldSVG01“

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 Projekts die Datei hello.html.

Inhalt von hello.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                      "http://www.w3.org/TR/html4/strict.dtd">
<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 http-equiv="Content-Type" content="text/html; 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 type="text/javascript" src="lib/raphael-min.js"></script>
    
    <!-- Schreiben von "Hallo Welt!" 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 Projekts

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

Funktionsweise von Raphaël

Wie funktioniert Raphaël? Ganz einfach: Raphaël fügt in das div-Element, das ihm als Bühne übergeben wurde, SVG-Code ein und veranlasst den Browser, die Seite neu zu rendern. Das Hello-Word-Beispiel funktioniert bei SVG-fähigen Browsern auch vollkommen ohne JavaScript- und Raphaël. Man könnte den SVG-Code auch direkt in die HTML-Datei einfügen: 

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5-Tutorium: SVG: Hello World 01</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  </head>
  <body>
    <div id="d_canvas">
      <svg 
        xmlns="http://www.w3.org/2000/svg" 
        style="overflow: hidden; position: relative;"
      >
        <desc>
          Created with Raphaël 2.1.0; 
          simplified and copied into the HTML code by W. Kowarschick
        </desc>
        <text 
          style="text-anchor: start; font: bold 20px 'Times New Roman',Times,serif;"
          x="5" y="13" 
        >
          Hallo Welt!
        </text>
      </svg>
    </div>
  </body>
</html>

Raphaël bietet allerdings zwei Vorteile:

  • Vektorgrafiken werden auch in Browsern angezeigt, die SVG nicht darstellen können.
  • Die Vektorgrafiken können zur Laufzeit dynamisch verändert werden. (Dies wäre allerdings auch mit Hilfe von CSS-Animationen oder direkt mit JavaScript möglich.)

Einen Nachteil hat Raphaël allerdings auch:

  • Man kann keine SVG-Dateien direkt in Raphaël importieren (da Raphaël eine Vektorgrafik ja nicht immer mittels SVG anzeigt). Vereinzelt findet man allerdings entsprechende Raphaël-Erweiterungen im Netz (z.B. raphael-svg-import.js oder raphael-svg-import von sanojian).

JavaScript-Code auslagern

Lagern Sie wie in Teil 1 des Hello-World-Canvas-Tutoriums den JavaScript-Code aus der HTML-Datei hallo.html in die JavaScript-Datei js/main.js aus.

Testen und Sichern des Projekts

Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu 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)

Fortsetzung des Tutoriums

Sie sollten nun Teil 2 des Tutoriums bearbeiten.

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