2D-Grafik im Web. Kapitel Macromedia Flash
|
|
|
- Katrin Kaufman
- vor 5 Jahren
- Abrufe
Transkript
1 Kapitel 10 2D-Grafik im Web 10.1 Macromedia Flash Macromedia Flash ist ein Werkzeug zum Editieren und Animieren von zweidimensionalen Vektorgrafiken. Durch sein kompaktes Speicherformat ist es besonders geeignet für plakative, animierte Grafiken im Internet. Zum Abspielen in einem Web-Browser ist das Macromedia-Flash-Plugin erforderlich. Vektorgrafikwerkzeug Macromedia Flash MX 117
2 118 KAPITEL 10. 2D-GRAFIK IM WEB Gesamtansicht des Stadtplans Teilansicht des Stadtplans Rasterfreies Zoomen bei Dateien im Flash-Format durch Vektorgrafik <HTML> <HEAD> <TITLE>Macromedia Flash</TITLE> </HEAD> <BODY BGCOLOR="f9d1a1"> <CENTER> <H1>Eingebetteter Flash-Film</H1> <EMBED src="vogel.swf" width=700 height=200 Loop="True" Play="True" BGColor="f9d1a1" Quality="Autohigh" Scale="showall" SAlign="" > <P>vogel.swf, 6 K </CENTER> </BODY> </HTML> Flash mit Einzelbild-Animation
3 10.2. SVG SVG Im Gegensatz zum proprietären Binärformat Flash handelt es sich bei SVG (Scalable Vector Graphics) um einen offenen Standard eines Vektorgrafikformates auf XML-Basis. Entwickelt wurde dieses Format von einem Verbund von Firmen, darunter Adobe, Apple, Autodesk, BitFlash, Corel, HP, IBM, ILOG, Macromedia, Microsoft, Netscape, OASIS, Quark, RAL, Sun, Visio, W3C, Xerox. SVG... kann nach Text durchsucht werden erlaubt Textgestaltung kann Objekte zeitlich koordiniert bewegen enthält Eventhandling verfügt über photoshopartige Filter-Effekte ist sowohl unkomprimiert als auch komprimiert einsetzbar erfordert zum Abspielen ein Plugin verlangt Rechenleistung auf der Clientseite Die SVG-Datei kreis.svg platziert einen Kreis mit Radius 80 in die Mitte der Zeichenfläche: SVG-Screenshot: Kreis <?xml version="1.0" encoding="iso "?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="200" height="200" xmlns=" <circle cx="100" cy="100" r="80" /> SVG-Quelltext: Kreis
4 120 KAPITEL 10. 2D-GRAFIK IM WEB Die SVG-Datei basics.svg enthält die grafischen Objekte Gerade, Rechteck, Kreis, Ellipse, Polygon sowie Text. Die Objekte erhalten als Attribute ihre Koordinaten sowie Angaben zur Farbe der Füllung, Farbe der Umranduung und Stärke der Umrandung. SVG-Screenshot: Gerade, Rechteck, Kreis, Ellipse, Polygon, Text <?xml version="1.0" encoding="iso "?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="310" height="270" viewbox=" " xmlns=" <title>gerade, Rechteck, Kreis, Ellipse, Polygon, Text</title> <line <rect <circle x1="50" y1="210" x2="130" y2="220" stroke="red" stroke-width="4" /> x="40" y="30" width="220" height="140" fill="lightgreen" stroke-width="12" /> cx="60" cy="100" r="40" fill="lightcoral" stroke="blue" stroke-width="4px" /> <ellipse cx="160" cy="100" rx="40" ry="20" fill="orange" stroke="red" stroke-width="1" /> <polygon points="220, , , , , ,190" fill="#abcdef" stroke="#000000" stroke-width="1"/> <text x="8" y="190" style="font-family:verdana; font-size:20px; font-weight:bold"> SVG: Tolle Sache! </text> SVG-Quelltext: Gerade, Rechteck, Kreis, Ellipse, Polygon, Text
5 10.2. SVG 121 Die SVG-Datei gruppierung.svg fasst mit dem <g>-element mehrere Objekte zusammen und referenziert sie später über das xlink:href-element (erst dann werden sie gezeichnet). Weiterhin finden vier Transformationen statt. Die erste besteht aus einer einzelnen Translation. Die zweite und dritte bestehen aus einer Translation, gefolgt von einer Rotation. Die vierte wird beschrieben durch Angabe von sechs Zahlen (a b c d e f ), welche eine 3 x 3-Transformationsmatrix beschreiben mit erster Spalte (a b 0) T, zweiter Spalte (c d 0) T und dritter Spalte (e f 1) T. Obacht: Transformationen beziehen sich auf das Koordinatensystem des Objekts. transform= rotate(45) translate (200, 0) bedeutet daher zunächst eine Drehung im Uhrzeigersinn um 45 Grad und dann eine Verschiebung um 200 Pixel längs der Diagonalen nach rechts unten. SVG-Screenshot: Gruppierung, Wiederverwendung, Transformation <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="400" height="100" viewbox=" " xmlns=" <title>gruppierung und Wiederverwendung</title> <defs> <g id="vorlage"> <rect x="-40" y="-20" width="80" height="40" fill="blue" /> <circle cx="0" cy ="0" r="36" fill="red" /> </g> </defs> <use xlink:href="#vorlage" transform="translate( 80 50)" /> <use xlink:href="#vorlage" transform="translate(160 50) rotate(30)" fill-opacity="0.8"/> <use xlink:href="#vorlage" transform="translate(240 50) rotate(60)" fill-opacity="0.5"/> <use xlink:href="#vorlage" transform="matrix( )" fill-opacity="0.2"/> SVG-Quelltext: Gruppierung, Wiederverwendung, Transformation
6 122 KAPITEL 10. 2D-GRAFIK IM WEB In der Datei kurven.svg werden unter Verwendung des path-element Kurven gezeichnet. Die vier Kreisbögen (Kommando A) beginnen jeweils bei (300,100) haben einen x-radius von 100 und einen y-radius von 50 und enden bei (200,100). Sie unterscheiden sich durch die vier Kombinationen von large-arc-flag und sweep-flag. Die erste kubische Bezierkurve (Kommando C) beginnt bei (50,260) und hat als weitere Kontrollpunkte (100,240), (150,240) und (200,260). Mit dem Kommando S wird der erste Kontrollpunkt der nächsten kubischen Bezierkurve automatisch errechnet durch die beiden letzten Kontrollpunkte der Vorgängerkurve. Daher reicht nun die Angabe zweier weiterer Punkte (300,280) und (350,260). Über das stroke-dasharray-attribut wird die Kurve gestrichtelt gezeichnet: auf 9 gefüllte Pixel folgen 5 leere Pixel. SVG-Screenshot: Kreisbögen und Bezierkurve <?xml version="1.0" encoding="iso "?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="500" height="300" xmlns=" <title>kurven</title> <path fill="none" stroke="red" stroke-width="5" d="m A " /> <path fill="none" stroke="green" stroke-width="5" d="m A " /> <path fill="none" stroke="blue" stroke-width="5" d="m A " /> <path fill="none" stroke="yellow" stroke-width="5" d="m A " /> <path fill="none" stroke="magenta" stroke-width="5" style="stroke-dasharray: 9,5;" d="m C S "/> SVG-Quelltext: Kreisbögen und Bezierkurve
7 10.2. SVG 123 In der Datei laufrad.svg wird durch vierfache Wiederverwendung eines Viertelrades ein Speichenrad erzeugt. Das Speichenrad erhält durch animatetransform eine horizontale Verschiebung und eine Rotation. SVG-Screenshot: Animation von Transformationen <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" " <svg width="400" height="150" xmlns=" <title>laufrad</title> <defs> <g id="rad"> <path id="viertel" fill="white" stroke="black" d="m 10,10 L 40,10 A 30,30 0 0,1 10,40 L 10,10 " /> <circle cx="0" cy="0" r="50" fill="red" stroke="black" /> <circle cx="0" cy="0" r="6" fill="white" stroke="black" /> <use xlink:href="#viertel" x="0" y="0" transform="rotate( 0)" /> <use xlink:href="#viertel" x="0" y="0" transform="rotate( 90)" /> <use xlink:href="#viertel" x="0" y="0" transform="rotate(180)" /> <use xlink:href="#viertel" x="0" y="0" transform="rotate(270)" /> </g> </defs> <use xlink:href="#rad" x="-50" y="75"> <animatetransform xlink:href="#rad" attributename="transform" type="translate" from="-50,0" to="500,0" begin="0s" dur="6s" repeatcount="indefinite"/> <animatetransform xlink:href="#rad" attributename="transform" type="rotate" from="0" to="360" begin="0s" dur="3s" additive="sum" repeatcount="indefinite"/> SVG-Quelltext: Animation von Transformationen
8 124 KAPITEL 10. 2D-GRAFIK IM WEB Die Datei bezier.svg definiert eine Bezierkurve durch das path-element. Dabei wird zunächst mit M der Startpunkt festgelegt, dann folgen durch C drei weitere Stützpunkte, die zusammen mit dem Vorgänger eine kubische Bezierkurve beschreiben. Durch S werden jeweils der dritte und vierte Stützpunkt für eine weitere kubische Bezierkurve definiert; automatisch übernommen werden als erster Stützpunkt der letzte Kurvenpunkt und als zweiter Stützpunkt. die Verlängerung der Geraden durch die beiden letzten Kurvenpunkte. Weiterhin wird durch animatemotion das rote Rechteck längs der Bezierkurve bewegt. Hierbei entsteht die resultierende Kurve durch Verknüpfung der Pfad- Koordinaten mit den Objektkoordinaten. SVG-Screenshot: Bezier-Kurve als Animationspfad <?xml version="1.0" encoding="iso "?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="260" height="200" viewbox=" " xmlns=" <title>bezier-kurve mit Pfadanimation</title> <rect id="kasten" x="-12" y="-4" fill="red" width="24" height="8" /> <path id="kurve" stroke="blue" stroke-width="2" fill="none" d="m 40,60 C 60,20 140,20 160,60 S 140, ,140 S 140, ,140 S 20,100 40,60" /> <use xlink:href="#kasten" x="0" y="0" /> <animatemotion xlink:href="#kasten" begin ="0s" dur="5" rotate ="auto" fill ="freeze" calcmode ="linear" repeatcount="indefinite" > <mpath xlink:href="#kurve" /> </animatemotion> SVG-Quelltext: Bezier-Kurve als Animationspfad
9 10.2. SVG 125 In der Datei hyperlink.svg wird durch Anklicken des grünen, abgerundeten Rechtecks die Webseite aufgerufen. SVG-Screenshot: Hyperlink <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="200" height="200" xmlns=" <title>hyperlink</title> <a xlink:href=" <rect x="50" y="50" rx="8" ry="8" fill="green" width="100" height="100"/></a> <text x="80" y="105" font-size="20" fill="white" >GO!</text> SVG-Quelltext: Hyperlink
10 126 KAPITEL 10. 2D-GRAFIK IM WEB In der Datei synchronisation.svg wird durch Klicken der roten Kugel eine Bewegung gestartet und nach 4 Sekunden wieder gestoppt. Weiterhin wird 4 Sekunden nach Beginn der Bewegung die Wave-Datei signal.wav abgespielt. SVG-Screenshot: Synchronisation mit Audio <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" " <svg xmlns:a=" width="400" height="100" xmlns=" xmlns:xlink=" <title>synchronisation</title> <circle id="kugel" cx="30" cy="50" r="25" fill="red"/> <rect id="wand" x="325" y="0" width="25" height="100" fill="blue" /> <animatemotion xlink:href="#kugel" begin="kugel.click" dur="4" path ="M 0,0 270,0" fill="freeze" /> <a:audio xlink:href="signal.wav" begin="kugel.click+4s"></a:audio> SVG-Quelltext: Synchronisation mit Audio
11 10.2. SVG 127 animierte Ellipsen Systemzeit mit Javascript übertragen Photoshopartige Filter Button mit Interaktion Schatteneffekt auf Pixelgrafik
12 128 KAPITEL 10. 2D-GRAFIK IM WEB In Kombination mit PHP können die Ergebnisse einer Datenbankquery dynamisch zu einer SVG- Grafik aufbereitet werden. Der folgende Screenshot zeigt eine Tortengrafik als Visualisierung der Lehrbelastung der Professoren aus der Datenbank UNI aus der Vorlesung Datenbanksysteme im SS dynamisch erzeugte SVG-Grafik nach Datenbankquery
Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Scalable Vector Graphics (SVG) Beschreibungssprache für Vektorgraphiken. Basiert auf XML,
Computergrafik SS 2010 Oliver Vornberger. Kapitel 10: 2D-Grafik im Web
Computergrafik SS 2010 Oliver Vornberger Kapitel 10: 2D-Grafik im Web 1 Flash 1996 vorgestellt von FutureWave als FutureSplash Übernommen von Macromedia, jetzt Adobe, Version 10 > 96 % Marktdurchdringung
Computergrafik SS 2016 Oliver Vornberger. Kapitel 10: 2D-Grafik im Web
Computergrafik SS 2016 Oliver Vornberger Kapitel 10: 2D-Grafik im Web 1 2D-Grafik 2 2D-Grafik im Web HTML + Flash HTML + MS Silverlight HTML + CSS HTML + Javascript HTML + SVG 3 Flash 1996 vorgestellt
Scalable Vector Graphics (SVG)
Scalable Vector Graphics () Beschreibungssprache für Vektorgraphiken. Basiert auf XML, daher ähnlich zu (X)HTML, SMIL, VRML, RSS, etc.
Vektorgrafik. Medien- Technik
Vektorgrafik Vektorgrafiken werden als mathematisch und programmatisch definierte Zeichenanweisungen in einem Koordinatensystem generiert und gespeichert. Vektorgrafiken können einfach und exakt geometrisch
11. Computergrafik und Virtuelle Realität
11. Computergrafik und Virtuelle Realität 11.1 Basisbegriffe für 2D-Computergrafik 11.2 2D-Vektorgrafik mit XML: SVG 11.3 Basisbegriffe für 3D-Computergrafik 11.4 3D-Computergrafik: VRML Weiterführende
11. Computergrafik und Virtuelle Realität
11. Computergrafik und Virtuelle Realität 11.1 Basisbegriffe für 2D-Computergrafik 11.2 2D-Vektorgrafik mit XML: SVG 11.3 Basisbegriffe für 3D-Computergrafik 11.4 3D-Computergrafik: VRML Weiterführende
Einführung in die Medieninformatik. Studiengang Medien- und Kommunikationsinformatik WS 17/18 Prof. Dr.-Ing. Ido A. Iurgel, M.A.
Einführung in die Medieninformatik Studiengang Medien- und Kommunikationsinformatik WS 17/18 Prof. Dr.-Ing. Ido A. Iurgel, M.A. Zum ersten Mal hier? Willkommen! gut zu wissen Sprechzeiten Meine: Montags
Gliederung. Grundlagen für SVG SVG. Scable Vector Graphics. grafische Datenverarbeitung XML
Gliederung Grundlagen für SVG grafische Datenverarbeitung XML SVG Einführung Grundgerüst Basics Grundformen Pfade Transformationen Animationen Interaktivität Anwendungen Fazit Ausblick WYSIWYG Editoren
5 Jahre Scalable Vector Graphics
5 Jahre Scalable Vector Graphics Entwicklungsstand und Perspektiven Dr. Thomas Meinike thomas.meinike@hs-merseburg.de http://www.iks.hs-merseburg.de/~meinike/ Hochschule Merseburg (FH) Fachbereich Informatik
8. Vektorgrafik. 8.1 Basisbegriffe für 2D-Computergrafik 8.2 2D-Vektorgrafik mit SVG 8.3 Ausblick: 3D-Computergrafik mit VRML
8. Vektorgrafik 8.1 Basisbegriffe für 2D-Computergrafik 8.2 2D-Vektorgrafik mit SVG 8.3 Ausblick: 3D-Computergrafik mit VRML Weiterführende Literatur: J. David Eisenberg: SVG Essentials, O'Reilly 2002
Was ist SVG? Inhalt: Allgemeines zu SVG Besondere Merkmale Vor- und Nachteile Dateiformat Standardobjekte Koordinatensystem Beispiele Links
Was ist SVG? Was ist SVG? Inhalt: Allgemeines zu SVG Besondere Merkmale Vor- und Nachteile Dateiformat Standardobjekte Koordinatensystem Beispiele Links SVG: Allgemeines zu SVG SVG = Scalable Vector Graphics
Scalable Vector Graphics (SVG)
Fachhochschule Wiesbaden - Fachbereich Informatik Scalable Vector Graphics (SVG) http://www.w3.org/tr/svg11 http://www.w3.org/tr/svg12 (WD) 10.12.2004 (c) 2004 H. Werntges, FB Informatik, FH Wiesbaden
Illustrierende Aufgaben zum LehrplanPLUS. Realschule, Informationstechnologie, Lernbereich 1: Modul 1.2. Das Anhänger-Logo. Stand:
Das Anhänger-Logo Stand: 20.01.2016 Jahrgangsstufen Lernbereich 1: Modul 1.2 Fach/Fächer Übergreifende Bildungs- und Erziehungsziele Zeitrahmen Benötigtes Material Informationstechnologie Technische Bildung
Scalable Vector Graphics (SVG)
Fachhochschule Wiesbaden - Fachbereich DCSM Scalable Vector Graphics (SVG) http://www.w3.org/tr/svg11 http://www.w3.org/tr/svg12 (WD) 05.12.2006 2004. 2006 H. Werntges, FB Informatik (DCSM), FH Wiesbaden
4 Grundlagen zu SVG-Karten und -Diagrammen...33
48 4 Grundlagen zu SVG-Karten und -Diagrammen 4 Grundlagen zu SVG-Karten und -Diagrammen...33 4.1 Bildschirmdarstellung vs. Papierkartendruck...33 4.1.1 Mehr Farben...33 4.1.2 Probleme beim Einsatz von
Scalable Vector Graphics (SVG)
Fachhochschule Wiesbaden - Fachbereich DCSM Scalable Vector Graphics (SVG) http://www.w3.org/tr/svg11 http://www.w3.org/tr/svg12 (WD) 11.05.2009 2004, 2009 H. Werntges, SB Informatik, FB DCSM, FH Wiesbaden
10.1! Basisbegriffe für 2D-Computergrafik! 10.2! 2D-Vektorgrafik mit SVG! 10.3! Ausblick: 3D-Computergrafik mit X3D
10. Vektorgrafik 10.1 Basisbegriffe für 2D-Computergrafik 10.2 2D-Vektorgrafik mit SVG 10.3 Ausblick: 3D-Computergrafik mit X3D Weiterführende Literatur: J. David Eisenberg: SVG Essentials, O'Reilly 2002
8.! Vektorgrafik. 8.1! Basisbegriffe für 2D-Computergrafik 8.2! 2D-Vektorgrafik mit SVG 8.3! Ausblick: 3D-Computergrafik mit VRML
8.! Vektorgrafik 8.1! Basisbegriffe für 2D-Computergrafik 8.2! 2D-Vektorgrafik mit SVG 8.3! Ausblick: 3D-Computergrafik mit VRML Weiterführende Literatur: J. David Eisenberg: SVG Essentials, O'Reilly 2002
Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG) ein XML-basierter Grafikstandard für 2D-Vektorgrafiken Dr. Thomas Meinike thomas.meinike@et.fh-merseburg.de Fachhochschule Merseburg Fachbereich Elektrotechnik, Informationstechnik
Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG) Ausarbeitung zum Proseminar XML / World Wide Web bei Dr. Stefan Lüttringhaus-Kappel von Mark Schmatz WS 2000 / 2001 Inhaltsverzeichnis 1 Einführung 1.1 Derzeitiger Status
6.2 Zusammenfassung der Pfadkommandos
6.3 Komplexe Liniensignaturen 93 6.2 Zusammenfassung der Pfadkommandos Kommando Englische Bezeichnung Erklärung M, m moveto Setzt den Startpunkt des Pfads fest. Ein Pfad muss zwingend damit beginnen. Befindet
SVG Skalierbare Vektorgrafiken im Netz
SVG Skalierbare Vektorgrafiken im Netz Weckung des Bedarfs an der Verteilung von georeferenzierten Informationen beim LWL: Weckung des Bedarfs an der Verteilung von georeferenzierten Informationen beim
Die XML-basierten Grafikformate SVG und XVL - eine Revolution der technischen Dokumentation?
Die XML-basierten Grafikformate SVG und XVL - eine Revolution der technischen Dokumentation? Tekom Regionalgruppen -Treffen 02. Juni 2005 Elektronikschule Tettnang Inhalt 1 Referent Einführung SVG Grundlagen
10.1! Basisbegriffe für 2D-Computergrafik 10.2! 2D-Vektorgrafik mit SVG 10.3! Ausblick: 3D-Computergrafik mit X3D
10.!Vektorgrafik 10.1! Basisbegriffe für 2D-Computergrafik 10.2! 2D-Vektorgrafik mit SVG 10.3! Ausblick: 3D-Computergrafik mit X3D Weiterführende Literatur: J. David Eisenberg: SVG Essentials, O'Reilly
Web-basierte Anwendungssysteme XHTML-Tabellen und Bilder
Web-basierte Anwendungssysteme XHTML-Tabellen und Bilder Prof. Dr. Sergej Alekseev (alekseev@fb2.fra-uas.de) Prof. Dr. Armin Lehmann (lehmann@e-technik.org) Fachbereich 2 Informatik und Ingenieurwissenschaften
Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 10-1
10. Computergrafik 10.1 Basisbegriffe für 2D-Computergrafik 10.2 2D-Vektorgrafik mit XML: SVG 10.3 Basisbegriffe für 3D-Computergrafik 10.4 3D-Computergrafik: VRML Weiterführende Literatur: J. David Eisenberg:
SVG und SMIL Einführung und Überblick
Seminar XML-Based Markup Languages SVG und SMIL Einführung und Überblick [1] [2] Georg Jahn mail@gjahn.com 1. Juli 2013 1/47 SVG und SML: Einführung und Überblick Inhalt Scalable Vector Graphics (SVG)
ZuiScat. Entstehung einer neuen Internetwelt? Web 2.0, Prinzipien und grundlegende Techniken
Entstehung einer neuen Internetwelt? ZuiScat Web 2.0, Prinzipien und grundlegende Techniken Universität Konstanz HCI Fredrik Gundelsweiler gundelsw@inf.uni-konstanz.de Folie 1 Inhalt des Vortrags + Vision
Vektorgrafiken für die mobile Kommunikation
Vektorgrafiken für die mobile Kommunikation SVG-Tiny in Theorie und Praxis Dr. Thomas Meinike thomas.meinike@hs-merseburg.de http://www.iks.hs-merseburg.de/~meinike/ Hochschule Merseburg (FH) Fachbereich
Probeklausur Digitale Medien
Probeklausur Digitale Medien Wintersemester 2007 / 2008 LMU München LFE Medieninformatik Prof. H. Hußmann Dauer: 90 Minuten Zugelassene Hilfsmittel: Unterlagen zur Vorlesung und Übung Digitale Medien,
U6: Webgerechte Bilder
Konzeption Gestaltung U6: Webgerechte Bilder BILDAUFLÖSUNG UND GRÖSSE Auflösung bestimmt die Anzahl an Punkten (dots), die pro Längeneinheit (cm oder inch) zur Verfügung steht und wird demzufolge n der
Computergrafik SS 2014
Computergrafik SS 2014 Oliver Vornberger Institut für Informatik Universität Osnabrück Organisation Vorlesung montags 10:15 Uhr 31/E06 dienstags 10:15 Uhr 31/E06 Übung donnerstags 10:15 Uhr 69/125 freitags
Version 1 SVG. Scalable Vector Graphics. B.Wenk, HTW Chur. apple ibooks Author
Version 1 SVG Scalable Vector Graphics B.Wenk, HTW Chur SVG SVG - Scalable Vector Graphics 1 Einführung Bilder und Grafiken Mit der Digitalkamera aufgenommene oder mit einem Scanner aufgenommene Bilder
Wiedergabe und Präsentation von tracebasierten Implementierungssichten über den Linuxkern
Informatik Sascha Kohn Wiedergabe und Präsentation von tracebasierten Implementierungssichten über den Linuxkern Diplomarbeit Universität des Saarlandes Naturwissenschaftlich-Technische Fakultät I Fachrichtung
Klausur Digitale Medien
Klausur Digitale Medien Wintersemester 2005/2006 LMU München LFE Medieninformatik Prof. H. Hußmann Dauer: 90 Minuten Auf jedem Blatt sind Name und Matrikelnummer einzutragen. Blätter ohne Namen und Matrikelnummer
Scalable Vector Graphics. Ulrich Hoffmann <Ulrich.E.Hoffmann@gmx.de>
Scalable Vector Graphics Ulrich Hoffmann 1 Überblick ftp://tins1.rz.e-technik.fh-kiel.de/home/share/xxml Was ist SVG? Wie lässt sich SVG anzeigen, bearbeiten? Wie sehen SVG-Dokumente
SVG auf dem Weg zum reichhaltigen Medienformat
SVG auf dem Weg zum reichhaltigen Medienformat Neuerungen in Version 1.2 Dr. Thomas Meinike thomas.meinike@et.fh-merseburg.de http://www.et.fh-merseburg.de/person/meinike/ Fachhochschule Merseburg Fachbereich
SVG Scalable Vector Graphics
SVG Scalable Vector Graphics Ein zukünfiger Eckstein der WWW Infrastruktur 1 1. Was ist SVG?»Scalable Vector Graphics«(Acronym ist SVG) ist der neue offizielle Vektorgraphikstandard des W3C (World Wide
Wissenschaftlich-Technische Visualisierung
Wissenschaftlich-Technische Visualisierung Vorlesender: Dr.-Ing. Ulf Döring, Z 2041, 69 1211 ulf.doering@tu-ilmenau.de Webseite zu Vorlesung + Seminar: http://www.tu-ilmenau.de/gdv/lehre/ss2017/wtv voraussichtlich
Visualisieren von Geodäten mit SVG im Internet
Nicole Ueberschär/Andre M. Winter Visualisieren von Geodäten mit SVG im Internet Band 1: Scalable Vector Graphics - Einführung, clientseitige Interaktionen und Dynamik Herbert Wichmann Verlag Heidelberg
Digitale Bildbearbeitung und Fotografie. Dozenten: Arne Scheffer, Olaf Glaser
Dozenten: Arne Scheffer, Olaf Glaser Bildbearbeitung: Abgrenzung Typ 1 Photoline Photoshop GIMP Photopaint Typ 2 ACDSee Irfanview Picasa Typ 3 Inkscape CorelDraw Illustrator Typ 4 Painter OpenCanvas Typ
Computergrafik SS 2014 Oliver Vornberger. Kapitel 21: 3D im Web
Computergrafik SS 2014 Oliver Vornberger Kapitel 21: 3D im Web 1 VRML 3D-Vektorgrafik für Webseiten offizieller Standard des W3C in ASCII geschrieben exportierbar von CAD-Tools verlustfrei skalierbar Grafik,
Klausur zur Vorlesung Einführung in XML
Nachname: Klausur zur Vorlesung Einführung in XML MUSTERLÖSUNG Vorname: Matr.Nr.: Studiengang: Bearbeiten Sie alle Aufgaben! Hilfsmittel sind nicht zugelassen. Die Bearbeitungszeit ist 90 Minuten. Aufgabe
Multimediatechnologie
Einführung in die XML-Sprache Scalable Vector Graphics 26.11.2012/1 SVG woher und wohin... 26.11.2012/2 http://svgopen.org/2012/ 26.11.2012/3 http://svgopen.org/ 26.11.2012/4 SVG Open 2010, Paris http://www.svgopen.org/2010/
Computergrafik SS 2016
Computergrafik SS 2016 Oliver Vornberger Institut für Informatik Universität Osnabrück Organisation Vorlesung montags 10:15 Uhr 32/102 dienstags 10:15 Uhr 32/102 Übung donnerstags 10:15 Uhr 93/E33 Lukas
SVG 2 ein (Er)Wartungsbericht
SVG 2 ein (Er)Wartungsbericht tekom Jahrestagung 2014 Stuttgart, 13. November Dr. Thomas Meinike Hochschule #tekom14 Merseburg T. Meinike: FB SVG Informatik 2 ein (Er)Wartungsbericht und Kommunikationssysteme
V by WBR1/BFH-TI 2011 by MOU2/BFH-TI
Java-Applets Unterlagen zum Modul OOP mit Java V 3.0 2007 by WBR1/BFH-TI 2011 by MOU2/BFH-TI Java-Applets V3.0 2011 by WBR1&MOU2/BFH- TI Lernziele Die Kursteilnehmer sind in der Lage: Möglichkeiten und
SVG. - Skalierbare Vektorgrafiken. Ein Überblick. Dr. Thomas Meinike Hochschule Merseburg (FH) Fachbereich Informatik und Kommunikationssysteme
SVG - Skalierbare Vektorgrafiken. Ein Überblick. Dr. Thomas Meinike Hochschule Merseburg (FH) Fachbereich Informatik und Kommunikationssysteme thomas.meinike@hs-merseburg.de http://www.et.fh-merseburg.de/person/meinike/
Scalable Vector Graphics (SVG)
Fachhochschule Wiesbaden - Fachbereich Informatik SVG: 2D-Grafik in XML-Syntax Scalable Vector Graphics (SVG) http://www.w3.org/tr/svg11 http://www.w3.org/tr/svg12 (WD) Erinnerung: Raster-Grafik vs. Vektor-Grafik
DATENFORMATE IM INTERNET
DATENFORMATE IM INTERNET Steffen Petermann Projekt reisefieber:// BILDFORMATE JPG / GIF / PNG / SVG MULTIMEDIA FLASH / SHOCKWAVE TEXT-BASIERTE FORMATE HTMP / CSS / JS / CGI / PHP AUDIO & VIDEO MP3 / MOV
Interaktive Visualisierung von Zugablaufpla nen in SVG am Beispiel des Bahnhofs Amsterdam-Schiphol
Interaktive Visualisierung von Zugablaufpla nen in SVG am Beispiel des Bahnhofs Amsterdam-Schiphol Diplomarbeit von Patrick Fox betreut von Prof. Dr. Oliver Vornberger Prof. Dr. Peter Brucker Fachbereich
Tutorium #4. Softwareentwicklung Praktikum Gruppe 4 Anja Karl.
Tutorium #4 Softwareentwicklung Praktikum Gruppe 4 Anja Karl prog-tutor-anja@iicm.edu http://www.student.tugraz.at/anja.karl/ file:///f:/users/anja/sep/website/tut4.html#1 1/30 Ablauf des Tutoriums File-IO
Digitale Bildbearbeitung und Fotografie. Dozenten: Arne Scheffer
Dozenten: Arne Scheffer Bildbearbeitung: Abgrenzung Typ 1 Photoline Photoshop GIMP Photopaint Typ 2 ACDSee Irfanview Picasa Typ 3 Inkscape CorelDraw Illustrator Typ 4 Painter OpenCanvas Typ 5 DCRAW Lightroom
Bildformate. Welches Format für welchen Zweck geeignet ist. Tipps und Tricks rund um Ihr Marketing, Grafik und Design
Welches Format für welchen Zweck geeignet ist Tipps und Tricks rund um Ihr Marketing, Grafik und Design Welches Format für welchen Zweck geeignet ist Langner Beratung GmbH Metzgerstraße 59 72764 Reutlingen
Going Crazy mit JavaScript: Grafik im Browser. Martin Marinschek, Stefan Schuster IRIAN.at
Going Crazy mit JavaScript: Grafik im Browser Martin Marinschek, Stefan Schuster IRIAN.at 2 Agenda Grafik im Browser Möglichkeiten Hilfsmittel Grafik-Applikationen Umsetzung Beispiele 3 Grafik im Browser?
Macromedia Flash 5.0. Patrick Fox. Wintersemester 2001/02
Macromedia Flash 5.0 Patrick Fox Wintersemester 2001/02 INHALTSVERZEICHNIS 1 Inhaltsverzeichnis 1 Einführung 2 2 Konzepte 2 2.1 Formen............................... 2 2.2 Symbole..............................
Visualisierung und Animation im Web
Visualisierung und Animation im Web Prof. Dr.-Ing. Thomas Wiedemann email: wiedem@informatik.htw-dresden.de HOCHSCHULE FÜR TECHNIK UND WIRTSCHAFT DRESDEN (FH) Fachbereich Informatik/Mathematik Gliederung
PocketSVGEditor Ein Lehr und Lernwerkzeug zum Thema SVG
PocketSVGEditor Ein Lehr und Lernwerkzeug zum Thema SVG Tag der Lehre 2017 Merseburg, 15. Juni Dr. Thomas Meinike Hochschule T. Meinike: Merseburg PocketSVGEditor FB Wirtschaftswissenschaften Ein Lehr
Name: Musterlösung Seite 2
Name: Musterlösung Seite 2 Beantworten Sie die Fragen in Aufgabe 1 mit einer kurzen, prägnanten Antwort. Die Fragen zu OpenGL beziehen sich auf die in der Vorlesung vorgestellte OpenGL Version 3.1 (core)
Vektorgrafik. Medien- Technik
Vektorgrafik Vektorgrafiken werden als mathematisch und programmatisch definierte Zeichenanweisungen in einem Koordinatensystem generiert und gespeichert. Vektorgrafiken können einfach und exakt geometrisch
Ralf Kittner. MMZ-1, Ernst-Abbe-Platz 8 Raum 214 Tel.:
Flash MX 2004 Ralf Kittner MMZ-1, Ernst-Abbe-Platz 8 Raum 214 Tel.: 40569 e-mail : ralf.kittner@uni-jena.de Eine Einführung Allgemeines Merkmale Begriffe in Flash Die Flash Oberfläche Grundprinzip, einige
TECHNIKEN ZUR VERARBEITUNG UND PUBLIKATION VON SCALABLE VECTOR GRAPHICS DIPLOMARBEIT
TECHNIKEN ZUR VERARBEITUNG UND PUBLIKATION VON SCALABLE VECTOR GRAPHICS DIPLOMARBEIT IM FACHBEREICH ELEKTROTECHNIK, INFORMATIONSTECHNIK UND MEDIEN DER FACHHOCHSCHULE MERSEBURG vorgelegt von Karsten Becke
Präsentation von Karten im Internet. Ein Vergleich der Vektorformate SVG und ActiveCGM
Präsentation von Karten im Internet Ein Vergleich der Vektorformate SVG und 41. Sitzung der Arbeitsgruppe Automation in der Kartographie (AgA) am 21. und 22. September 2004 in Hamburg Dipl.- Ing. Prof.
ABC ABC. Affine Abbildungen. Definition und Anwendungsbeispiele. Prof. Dr. Andreas de Vries. Fachhochschule Südwestfalen, Standort Hagen
ABC ABC Affine Abbildungen Definition und Anwendungsbeispiele Prof. Dr. Andreas de Vries Fachhochschule Südwestfalen, Standort Hagen 22. März 2017 1 / 30 Übersicht 1 Einführung Motivation Mathematische
Florian Werner - Lehrstuhl Wirtschaftsinformatik, Eberhard Karls Universität Tübingen. Interaktive Diagramme mit Oracle XDK und SVG
Florian Werner - Lehrstuhl Wirtschaftsinformatik, Eberhard Karls Universität Tübingen Interaktive Diagramme mit Oracle XDK und SVG Was erwartet Sie? Prinzipielle Überlegungen bei der Umsetzung einer flexiblen
SVG - Flash-Killer oder Totgeburt?
SVG - Flash-Killer oder Totgeburt? Christian Wenz & Tobias Hauser Copyright 2003 Christian Wenz & Tobias Hauser Inhaltsverzeichnis Einführung..................................................................................
Teil 9 XML. 56 XML Eine Einleitung 865. 57 XHTML Die nächste Generation von HTML 873. 58 SVG Scalable Vector Graphics 879 59 RDF/RSS 907
1 2 3 Teil 9 XML 4 5 56 XML Eine Einleitung 865 57 XHTML Die nächste Generation von HTML 873 6 7 58 SVG Scalable Vector Graphics 879 59 RDF/RSS 907 60 Webservices 913 8 9 10 1 56 XML Eine Einleitung 2
Multimediatechnologie
10.12.2012/1 Das Element 10.12.2012/2 Das Element Der Pfad bezeichnet eines der wichtigsten wenn nicht sogar das wichtigste Element in SVG. Er dient zur Erstellung fast beliebiger Kurven
Multimedia-Programmierung Fragestunde zur Klausur
Multimedia-Programmierung Fragestunde zur Klausur Ludwig-Maximilians-Universität München Sommersemester 2010 Ludwig-Maximilians-Universität München Multimedia-Programmierung 1 Zusammenfassung Vorlesung
SMIL 2016 S h_da S Seite 1
SMIL Seite 1 SMIL Layout Layout-Konzept: Rechteckige Darstellungs-Regionen Referenzpunk: Linke obere Ecke Hierarchie von Darstellungsregionen Positionierung relativ zur umfassenden Darstellungsregion Vererbung
Erstellung individueller Symbole in Inkscape für die Verwendung in QGIS
Erstellung individueller Symbole in Inkscape für die Verwendung in QGIS FOSSGIS 2018, Bonn 23.03.2018 Katrin Hannemann 1 Vorstellung gis-trainer.de und QGIS.pro Durchführung von Standard-/Individualschulungen
Überblick. Der X3D Standard Überblick der Technologien Profile X3D Grundgerüst. Objekte Formen Materialien
X3D - Einführung - Überblick Der X3D Standard Überblick der Technologien Profile X3D Grundgerüst Objekte Formen Materialien Räumliche und logische Organisation Gruppen Koordinatensystem und Transformationen
Visualisierung von Bestandsdatenauszügen in prototypischen Liegenschaftskarten. Karl Neumann, Silke Eckstein
Visualisierung von Bestandsdatenauszügen in prototypischen Liegenschaftskarten Karl Neumann, Silke Eckstein TU Braunschweig, Institut für Informationssysteme http://www.ifis.cs.tu-bs.de Inhalt 1. Motivation
Vektorgrafik in Webseiten Franz Fiala
Vektorgrafik in Webseiten Franz Fiala Eine Reihe von Charts, die aus einer Datenbank generiert werden, sollen sowohl im Internet publiziert werden als auch mit CorelDraw für den Druck aufbereitet werden.
D3 - Data Driven Documents
D3 - Data Driven Documents Ottmar Gobrecht, Linde AG 10.06.2015, DOAG APEX connect, Melia Düsseldorf Aufwärmrunde Force Directed Graph Bubble Chart Sunburst Chart Treemap Chart Collapsible Tree Chart Zum
HTML 5-Editor für OpenStreetMap
HTML 5-Editor für OpenStreetMap Paul-Fiete Hartmann (OSM Benutzername: bastik) 21.3.2012 Inhalt 1 Motivation 2 Ähnliche Projekte 3 Mein Prototyp (Beboj) 4 Webtechniken (Details) 2 / 20 Abgrenzung HTML
Digitale Whiteboard-Software mit HTML5, SVG und WebSockets
Digitale Whiteboard-Software mit HTML5, SVG und WebSockets Webprogrammierung und Web 2.0-Technologien 30.11.2011 Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann Gliederung 2 1. Aufgabenstellung 2.
7 2D-Vektorgrafik. Lernziele. 2D-Vektorgrafik 1
2D-Vektorgrafik 1 7 2D-Vektorgrafik Zeichnen und Malerei sind uralte Kulturtechniken. In Kapitel 3 haben wir gesehen, wie Bilder digital in Form von Pixeln dargestellt werden können. Dies ist für Fotografien,
Klausur zur Vorlesung Einführung in XML
Klausur zur Vorlesung Einführung in XML MUSTERLÖSUNG Nachname: Vorname: Matr.Nr.: Studiengang: Bearbeiten Sie alle Aufgaben! Hilfsmittel sind nicht zugelassen. Die Bearbeitungszeit ist 120 Minuten. Aufgabe
Scalable Vector Graphics in SAS 9.2
Scalable Vector Graphics in SAS 9.2 Neue Schnittstellen I Sven Greiner Nicola Tambascia Accovion GmbH Accovion GmbH Helfmann-Park 10 Helfmann-Park 10 65760 Eschborn 65760 Eschborn sven.greiner@accovion.com
Abschlussklausur. Modul INMJ01 5 ECTS-Punkte
Medientechnik Institut für Informatik WS 2012/13 Dr. Manfred Jackel Abschlussklausur Modul INMJ01 5 ECTS-Punkte 07.02.2012 Name Vorname E-Mail-Adresse @uni-koblenz.de Matrikelnummer Studiengang: Computervisualistik
Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker
Tutorium Einführung in HTML Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Grundlagen von HTML Objekte, Elemente, Tags Grundaufbau eines HTML-Dokuments
Einführung Internettechnologien. - Clientseitige Programmierung -
Einführung Internettechnologien - Clientseitige Programmierung - Client Client: Programm, das Daten von einem Server anfordert In einem Netzwerk können unterschiedliche Clients zum Einsatz kommen Im Folgenden:
Der Unterschied zwischen Pixelbild und Vektorgrafik ist dabei entscheidend.
T3 Vektorgrafik Warum benötigen wir noch ein Softwarepaket für die Vektorgrafik? Vektorgrafiksoftware wird meist dazu benutzt, um Logos, Illustrationen, Infografiken usw. zu entwerfen, welche später in
Tutorial XML3D + Blender
Tutorial XML3D + Blender Deutsch - Windows ab XP- 2011 by SE V 0.1 Vorwort Diese kleine Tutorial entstand aus dem Problem das es aktuell noch kein Deutsches gibt. Ich versuche alles so zu erklären, das
Einsatz von Scalable Vector Graphics (SVG) zur Modellrepräsentation und -manipulation in Web-Anwendungen mit J2EE. Motivation und Zielsetzung
Einsatz von Scalable Vector Graphics (SVG) zur Modellrepräsentation und -manipulation in Web-Anwendungen mit J2EE www.arsnova.de Java Forum Stuttgart, 01. Juli 2004 1 Agenda SVG als Lösungsansatz SVG/J2EE-Technologiestudie
3D-Formate im Web. Teil 1: VRML. Von Lars Hillebrandt,
3D-Formate im Web Teil 1: VRML Von Lars Hillebrandt, wtell@upb.de Was ist VRML Virtual Reality Modeling Language VRML ist die am häufigsten verwendete Sprache für 3D-Grafik im Web. Seit 1997 ISO-Standard
CorelDRAW X6 Einfache Grundobjekte
Hochschulrechenzentrum Justus-Liebig-Universität Gießen CorelDRAW X6 Einfache Grundobjekte Einfache Grundobjekte in CorelDRAW Seite 1 von 11 Inhaltsverzeichnis Einleitung... 2 Die Hilfsmittelpalette...
Diplomarbeit. mit SVG und JavaScript
HOCHSCHULE KARLSRUHE TECHNIK UND WIRTSCHAFT Fakultät für Geoinformationswesen Studiengang Kartographie und Geomatik Diplomarbeit Generierung interaktiver Bebauungspläne mit SVG und JavaScript Bearbeiter:
Inhalt. Grundlagen - Licht und visuelle Wahrnehmung 1. Grundlagen - 2D-Grafik (Teil 1) 43. Grundlagen - 2D-Grafik (Teil 2) 67
Grundlagen - Licht und visuelle Wahrnehmung 1 Physikalische Grundlagen 2 Licht 2 Fotometrie 6 Geometrische Optik 9 Schatten 13 Farben 15 Visuelle Wahrnehmung - vom Reiz zum Sehen und Erkennen 17 Das Auge
Anmerkungen zur Abgabe
Die Blätter dürfen in Gruppen von bis zu zwei Personen bearbeitet werden. Abgabe individuell bis zum 05.12.2018, 23:59 Uhr per Mail an den jeweiligen Tutor und. Als Betreff bitte gdmi-[rot GRÜN BLAU]-Matrikelnummer1-Matrikelnummer2-5
OSM-API. API = Application Programming Interface Fenster der OSM-DB zur Welt. Zentrale OSM-DB. API planet.osm daily.osc
OSM-API API = Application Programming Interface Fenster der OSM-DB zur Welt Zentrale OSM-DB http://wiki.openstreetmap.org/wiki/planet.osm API planet.osm daily.osc OSM-Editor Download/Anwendung OSM-API