HTML-Tutorium: SVG: Hello World 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) |
||
Zeile 5: | Zeile 5: | ||
=HTML5: Hello-World-Anwendung mit Raphaël (SVG)= | =HTML5: Hello-World-Anwendung mit Raphaël (SVG)= | ||
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]] | dass die Ausgabe der Begrüßung nicht als [[Pixelgrafik]] als [[Vektorgrafik]] ausgegeben wird. | ||
als [[Vektorgrafik]]. Vektorgrafiken können in modernen Browsern | 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, D.: Raphaël (2008+) – JavaScript Library}}</ref> | ||
verwendet. | verwendet. Diese Bibliothek realisert Vektorgrafiken mit Hilfe von SVG in Browsern, die dies unterstützen. In Browsern, | ||
Diese Bibliothek realisert Vektorgrafiken mit SVG in Browsern, 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. | ||
Das heißt, diese Anwendung funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern, | Das heißt, diese Anwendung funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern, |
Version vom 10. Oktober 2012, 10:52 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
Ergebnis: hallo.html
(SVN-Repository)
HTML5: Hello-World-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 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 realisert Vektorgrafiken mit Hilfe von SVG in Browsern, 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.
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>
<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"> </div>
</body>
</html>
Testen und Sichern des Projektes
Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis.
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
- ↑ Baranovskiy (2008+): Dmitry Baranovskiy; Raphaël – JavaScript Library; http://dmitrybaranovskiy.github.io/raphael/; Quellengüte: 5 (Web)
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)