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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
(12 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 12: Zeile 12:
Vektorgrafiken können in modernen Browsern mittels [[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>
In diesem Tutorium wird die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy (2008+)}}</ref>
verwendet. Diese Bibliothek stellt Vektorgrafiken mit Hilfe von SVG in Browsern dar, die dies unterstützen. In Browsern,
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.
die [[SVG]] nicht unterstützen (wie z.B. der Internet Explorer 6.0) wird automatisch ersatzweise [[VML]] verwendet.
Zeile 21: Zeile 21:
==Neues Projekt anlegen und speichern==
==Neues Projekt anlegen und speichern==


Legen Sie ein neues Statisches Web-Projekt mit dem Namen <code>HelloWorldSVG01</code> an.
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldSVG01</code> an.


Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
Zeile 82: Zeile 82:
</source>
</source>


===Anmerkung: funktionsweise von Raphaël===
==Testen und Sichern des Projektes==
 
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 <code>div</code>-Element,
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 Brwoser, die Seite
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.
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:
Man könnte den SVG-Code auch direkt in die HTML-Datei einfügen:


<source lang="html4strict">
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<!DOCTYPE html>
                      "http://www.w3.org/TR/html4/strict.dtd">
<html>
<html>
   <head>
   <head>
    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
     <title>HTML5-Tutorium: SVG: Hello World 01</title>
     <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">
     <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">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
   </head>
   </head>
   <body>
   <body>
     <div id="d_canvas">
     <div id="d_canvas">
       <svg height="27"
       <svg  
          version="1.1"
        xmlns="http://www.w3.org/2000/svg"  
          width="300"
        style="overflow: hidden; position: relative;"
          xmlns="http://www.w3.org/2000/svg"  
      >
          style="overflow: hidden; position: relative;">
         <desc>
         <desc>Created with Raphaël 2.1.0;  
          Created with Raphaël 2.1.0;  
              directly copied into the HTML code by W. Kowarschick
          simplified and copied into the HTML code by W. Kowarschick
         </desc>
         </desc>
         <text style="text-anchor: start; font: bold 20px 'Times New Roman',Times,serif;"
         <text  
              x="5" y="13"
          style="text-anchor: start; font: bold 20px 'Times New Roman',Times,serif;"
              text-anchor="start"
          x="5" y="13"  
              font="10px 'Arial'"
              stroke="none" fill="#000000"
              font-family="'Times New Roman', Times, serif"
              font-size="20px"
              font-weight="bold"
         >
         >
           <tspan dy="6.5">Hallo Welt!</tspan>
           Hallo Welt!
         </text>
         </text>
       </svg>
       </svg>
     </div>
     </div>
   </body>
   </body>
</html>
</html>
Zeile 136: Zeile 124:


Raphaël bietet allerdings zwei Vorteile:  
Raphaël bietet allerdings zwei Vorteile:  
# Vektorgrafiken werden auch in Browsern angezeigt, die SVG nicht darstellen können.  
* 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.)
* 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:
==Testen und Sichern des Projektes==
*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]).
 
Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis.


==JavaScript-Code auslagern==
==JavaScript-Code auslagern==

Version vom 2. April 2017, 10:17 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 Projektes 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 Projektes

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 Projektes

Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu sichern.

Quellen

  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.