Version 1 SVG. Scalable Vector Graphics. B.Wenk, HTW Chur. apple ibooks Author

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

Download "Version 1 SVG. Scalable Vector Graphics. B.Wenk, HTW Chur. apple ibooks Author"

Transkript

1 Version 1 SVG Scalable Vector Graphics B.Wenk, HTW Chur

2 SVG SVG - Scalable Vector Graphics

3 1 Einführung Bilder und Grafiken Mit der Digitalkamera aufgenommene oder mit einem Scanner aufgenommene Bilder bestehen aus vielen einzelnen Bildpunkten (pixels), die in Zeilen und Spalten angeordnet sind. Inhalt Bilder und Grafiken Vektorgrafiken Abbildung 1: Mit einem Scanner erfasste Fotografie (stark vergrössert) Die bei der Aufnahme erfassten Bildpunkte pro cm (bzw. pro inch = 2.54 cm) bestimmt die Qualität des Bildes bei der Wiedergabe. Wenn die Aufnahme beispielsweise mit 300 dpi (dots per inch, Bildpunkte pro inch) erfolgt, das Bild aber anschliessend auf einem Drucker mit 600 dpi ausgegeben wird, ist das Bild auf Papier nur noch halb so breit und halb so hoch 2

4 wie das Original. Falls es in gleicher Grösse auf Papier gedruckt werden soll, muss das dafür verwendete Programm die Anzahl der aufgenommenen Bildpunkte vervielfachen, was zu der in Abbildung 1 sichtbaren Verpixelung führt. Bei grafischen Darstellungen führt die übermässige Vergrösserung zu besonders störenden Effekten. Vektorgrafiken Vektorgrafiken (vector graphics) setzen sich aus geometrischen Elementen (gerade Linien, Kurven, Kreise, Rechtecke, und so weiter) zusammen. Die Elemente sind in Textform beschrieben (Art, Grösse, Position, und so weiter), vergleichbar mit der Beschreibung einer Webseite in der Hypertext Markup Language (HTML). Für die Beschreibung von Vektorgrafiken eignet sich die XML-basierte Sprache SVG (Scalable Vector Graphics). Die neusten Versionen aller Browser unterstützen heute SVG. SVG ist auch Bestandteil des Standards EPUB für E-Books, aber bei weitem nicht alle E-Book Reader und E-Book Reader-Programme unterstützen SVG. Weil eine Vektorgrafik nur eine Beschreibung darstellt, wird sie erst bei der Darstellung auf dem Bildschirm oder auf dem Drucker gezeichnet. Die Darstellung kann deshalb gut skaliert werden, ohne dass die Qualität der Darstellung leidet. Abbildung 2: Stark vergrösserte Grafik Grafische Darstellungen werden deshalb besser nicht als Pixelbilder publiziert, sondern als Vektorgrafiken. Abbildung 3: Vektorgrafik, unterschiedlich skaliert dargestellt 3

5 2 Scalable Vector Graphics Eine Beispielgrafik Die Konzepte von Scalable Vector Graphics sind vielleicht leichter verständlich, wenn wir sie anhand einer Beispielgrafik diskutieren: Inhalt Eine Beispielgrafik Struktur der Beschreibung einer Grafik Elemente einer Grafik Grafiken mit SVG-edit erstellen Interaktive Grafiken Beispiele von Seiten mit SVG im Web Abbildung 4: Eine SVG-Grafik, welche die Umrisse und die Lage einiger Städte von Österreich darstellt (Landkarte_Austria_Interaktiv.svg) Die Grafik ist interaktiv: Mit dem Anklicken der beiden Kreise mit den Texten Beschriftungen einblenden beziehungsweise Gewässer einblenden können die Namen der Städte beziehungsweise die Flüsse und Seen Österreichs angezeigt werden. Wie das funktioniert, ist im Abschnitt Interaktive Grafiken beschrieben. 4

6 Struktur der Beschreibung einer Grafik Ein SVG-Dokument beginnt mit dem Element <svg>. <svg viewbox=" " width="600" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"> Elemente einer Grafik Grundelemente von SVG sind die gerade Linie (<line>), eine aus mindestens drei gleich langen Seiten bestehende geschlossene Figur (<polygon>), das Rechteck (<rect>), der Kreis (<circle>), die Ellipse (<ellipse>), eine aus beliebig vielen graden Linien zusammengesetzte Figur (<polyline>), eine beliebig geformte Linie (<path>) und Text (<text>).! </svg> Die Werte des Attributs viewbox (min x, min y, width, height) definieren die Koordinaten des sichtbaren Ausschnitts der Vektorgrafik. In unserem Beispiel umfasst dieses Fenster die Koordinaten von bis 2300 in x-richtung und von 0 bis 2336 in y-richtung. Bei der Darstellung von Vektorgrafiken müssen wir beachten, dass auf dem Bildschirm (und auch beim Drucken auf Papier) die x-achse von links nach rechts und die y-achse von oben nach unten orientiert sind! Aus der Geometrie sind wir aber gewohnt, mit einem kartesischen Koordinatensystem zu arbeiten, bei dem die y-achse von unten nach oben gerichtet ist. Die Attribute width und height definieren die Breite und Höhe der Zeichenfläche auf dem Bildschirm (oder Papier). In unserem Beispiel werden also die Koordinaten bis 2300 in x- Richtung auf 600 Bildpunkte und die Koordinaten 0 bis 2336 in y-richtung auf 400 Punkte auf dem Bildschirm abgebildet. Wenn das Attribut viewbox fehlt, definieren die Attribute width und height den sichtbaren Ausschnitt der Vektorgrafik ( 0 bis width in x-richtung, 0 bis height in y-richtung). Die Attribute xmlns und xml definieren den Namensraum für die Elemente des SVG- Dokuments. <rect x="10" y="10" width="100" height="60" stroke="blue" stroke-width="4" fill="yellow"/> <line x1="55" y1="35" x2="115" y2="120" stroke-width="4"/> <circle cx="160" cy="70" r="30" stroke="none" fill="red"/> <text x="30" y="90">text</text> <path d="m 80,97 C 78,94 72,86 68,84" stroke-width="2"/> Die Attribute x, y, x1, y1, x2, y2, cx, cy beschreiben die x- beziehungsweise die y- Koordinaten der betreffenden Elemente. Die Attribute stroke, stroke-width beschreiben die Farbe und die Dicke der Linien der betreffenden Elemente. Das Attribut fill beschreibt die Füllfarbe der betreffenden Elemente. Ein verständliches, nicht zu ausschweifendes Tutorial mit vielen interaktiven Beispielen und Übungen zum Thema SVG bietet die Website von w3schools.com an. 5

7 Ausschnitte aus der Beispielgrafik: <g id="staatsgrenze"> <path class="fil0 str0" d="m c-18,-18-50,-33-57,-56-7, ,-65-25,-77-22,-9-24,-16-24,-39-17,-24-53,-33-30,-65l0-50c14,-25 29,-48 47,-70 4,-39-15,-75-17,-114-4,-86-48,-25-94,, -31,51-18,8-29,19-49,27-38,-21-71, ,-29-40,0-43, ,-43 38,-26 8,-33-14,-60-35,-6-44,-25-68,-48-63,-13-27,96-35,132"/> <path class="fil0 str0" d="m c-8,26-3,44-34,50-17,81-55,4-98,-3-20,-4-26,-13-45,-19-29,34-40,8-35,57 3,28-16,37-17,2-33,-3-27,-7-39,21-58,-5 24,-60-5,-15-31,-5-35,13 7,39, 9,67 2,37-111,-2-137,4-32,6-54,3-79,28-25,3-53,-5-81,-2-30,3-58,-16-70,28-5,19 2,31-24,36-40,9-88,-20-94,37 34,25-15,13-29,17-37,10-26,44-68,40 5,-43-5,-30-44,-21"/> <path class="fil0 str0" d="m c35,-12 49,-23 78,5-24,15-9,42-45,42-55,0 1,63-7,91 28,23 23,37 59,26 42,42 7,50 21,90 55,12 30,11 48,52 12,26 110,66 134,64 33,-1 57,-9 82,19 41,-31 52,26, 51,19 83,10 42,-11 94, ,18 28,0 36,-3 54,-26-12,-53 45, ,-54 30,0 50,15 80,-4 5,-3 10,-8 15,-10 34, ,22 122,42 25,23 22,-24 9,-39-36,-38-21,-44-26,-92"/> <path class="fil0 str0" d="m l5-17"/> Das Attribut id dient dazu, einem Element einen eindeutigen Namen zuzuordnen. Dieser Name kann in anderen Elementen referenziert werden (zum Beispiel für Interaktionen). <g > <circle class="fil2 str7" cx="-160" cy="1078" r="39"/> <circle class="fil3 str7" cx="-160" cy="1078" r="28"/> <g > <circle class="fil2 str7" cx="1868" cy="1033" r="39"/> <circle class="fil3 str7" cx="1868" cy="1033" r="28"/> Das Element <g> erlaubt die Gruppierung der eingeschlossenen Elemente. Über das Attribut id kann die ganze Gruppe referenziert werden. <g id="beschriftung" visibility="hidden"> <text x="-2222" y="1204" class="fil2 fnt1">bregenz</text> <text x="-1419" y="1702" class="fil2 fnt1">innsbruck</text> <text x="-143" y="1027" class="fil2 fnt1">salzburg</text> <text x="484" y="574" class="fil2 fnt1">linz</text> <text x="361" y="2028" class="fil2 fnt1">klagenfurt</text> <text x="1301" y="1680" class="fil2 fnt1">graz</text> <text x="1020" y="600" class="fil2 fnt1">st. Pölten</text> <text x="1716" y="562" class="fil2 fnt0">wien</text> <text x="1680" y="975" class="fil2 fnt1">eisenstadt</text> Der Wert des Attributs visibility definiert die Sichtbarkeit eines Elements oder einer Gruppe von Elementen. Das Attribut kann die Werte hidden (nicht sichtbar) und visible (sichtbar) annehmen. Das Attribut class erlaubt die Zuweisung von Cascading Style Sheet (CSS) Definitionen. <g id="signaturen"> <g > <circle class="fil2 str7" cx="-2110" cy="1315" r="45"/> <circle class="fil3 str7" cx="-2110" cy="1315" r="32"/> <g > <circle class="fil2 str7" cx="-1142" cy="1537" r="45"/> <circle class="fil3 str7" cx="-1142" cy="1537" r="32"/> Grafiken mit SVG-edit erstellen Die Beschreibung einer SVG-Grafik kann man mit einem einfachen Texteditor erstellen. Man muss dabei achtsam sein, um Tippfehler zu vermeiden. Und man muss die SVG-Elemente und deren zulässigen Attribute kennen. Einfacher und schneller können SVG-Grafiken mit WYSIWYG-Editoren erstellt werden. Ein häufig verwendetes, kostenloses Open Source Programm ist Inkscape. Scalable Vector Graphics können auch online mit ImageBot erstellt und bearbeitet werden. 6

8 Diese beiden Vektorgrafikeditoren erzeugen zwar standardkonforme SVG-Dokumente, aber die meisten der gezeichneten Figuren werden als Pfade (<path>) beschrieben. Dies erlaubt den Programmen, die Koordinaten einer Figur beizubehalten wenn sie verschoben, verkleinert, vergrössert oder gedreht wird. SVG unterstützt ein Attribut transform, mit dem jede beliebige Koordinatentransformation beschrieben werden kann. Für die Darstellung der Grafik ist dies kein Nachteil. Das darstellende Programm muss einfach die Transformation durchführen, um die korrekten Koordinaten der Figur zu erhalten. Wenn wir aber eine solche Vektorgrafik von Hand verändern müssen (beispielsweise, um die Grafik mit interaktiven Elementen zu ergänzen), ist diese Darstellungsart für uns ungünstig. Einfacher wäre es, wenn im SVG-Dokument die Grundelemente <line>, <rect>, <circle>, und so weiter vorkämen und die absoluten Koordinaten angegeben wären. Interaktive Grafiken Scalable Vector Graphics können interaktive und animierte Elemente enthalten. Sowohl Interaktionen als auch Animationen werden im SVG-Dokument deklarativ beschrieben. Es ist keine Programmierung nötig. Bei Bedarf können die Elemente und deren Attribute aber auch mit JavaScript angesprochen werden. Für Interaktionen und Animationen eignen sich die Elemente <set>, <animate>, <animate- Transform> und <animatecolor>. Interaktionen und Animationen sind ereignisgesteuert. Ein freier online SVG-Editor, der einfache, überschaubare SVG-Dokumente erstellt, ist svgedit. Abbildung 6: Die Städtenamen werden eingeblendet, wenn mit der Maus auf den Kreis mit dem Text Beschriftungen einblenden gezeigt und die Maustaste gedrückt wird. Abbildung 5: Zeichnen mit svg-edit 7

9 Ausschnitte aus der Beispielgrafik: <circle id="beschriftungen_ein" cx="-1600" cy="110" r="40" stroke="black" stroke-width="6" fill="white"> <set attributename="fill" from="white" to="blue" begin="mousedown" end="mouseup"/> </circle> <text x="-1500" y="140" >Beschriftungen einblenden</text> Der kleine Kreis wird zunächst mit der Füllfarbe Weiss dargestellt. Wenn mit der Maus auf den Kreis gezeigt und die Maustaste gedrückt wird, wird der Wert des Attributs fill auf blue geändert: Die Füllfarbe des Kreises wechselt von Weiss nach Blau. Die Füllfarbe wechselt zurück auf Weiss, wenn die Maustaste losgelassen wird. Abbildung 7: Flüsse und Seen werden eingeblendet, wenn mit der Maus auf den Kreis mit dem Text Gewässer einblenden gezeigt und die Maustaste gedrückt wird. Ereignisse sind beispielsweise das Drücken (mousedown) und das Loslassen der Maustaste (mouseup), das Bewegen des Zeigers über ein Element (mouseover, mouseout) und das Klicken auf ein Element (click). <g id="beschriftung" visibility="hidden"> <text x="-2222" y="1204">bregenz</text> <text x="1716" y="562">wien</text> <text x="1680" y="975">eisenstadt</text> <set attributename="visibility" from="hidden" to="visible" begin="beschriftungen_ein.mousedown" end="beschriftungen_ein.mouseup"/> Gleichzeitig mit dem Wechseln der Füllfarbe des Kreises von Weiss nach Blau werden die Städtenamen eingeblendet. Das Ereignis mousedown muss in der Gruppe der Textelemente mit den Städtenamen mit dem Namen des Elementes qualifiziert werden, dem das Ereignis zugeordnet ist (in diesem Fall beschriftungen_ein ). Animationen können auch zeitgesteuert ablaufen, beispielsweise 2 Sekunden nach dem Aufrufen der Webseite oder 3 Sekunden nach dem Beenden einer anderen Animation. Die verschiedenen Browser (und E-Book-Reader) unterstützen Animationen unterschiedlich gut. Eine Zusammenstellung der SVG-Unterstützung durch die verschiedenen Browser zeigt die Webseite 8

10 Beispiele von Seiten mit SVG im Web US Population Map ( Open Clipart Library ( SVG Art Gallery ( SVG Samples ( 9

11 Wikimedia Commons ( SVG - Learning by coding( 10

Scalable Vector Graphics. Ulrich Hoffmann

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

Mehr

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) Scalable Vector Graphics () Beschreibungssprache für Vektorgraphiken. Basiert auf XML, daher ähnlich zu (X)HTML, SMIL, VRML, RSS, etc.

Mehr

Was ist SVG? Inhalt: Allgemeines zu SVG Besondere Merkmale Vor- und Nachteile Dateiformat Standardobjekte Koordinatensystem Beispiele Links

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

Mehr

SVG Skalierbare Vektorgrafiken im Netz

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

Mehr

SCRIBUS WORKSHOP Handout Gimp

SCRIBUS WORKSHOP Handout Gimp SCRIBUS WORKSHOP Handout Gimp 1 Ziele des Workshops Was ist Gimp? Was kann ich mit Gimp machen? Wie erstelle ich ein Bild für Scribus? Wie erstelle ich eine Vektorgrafik für Scribus? Varia? 2 Was ist Gimp?

Mehr

Webseiten-Programmierung

Webseiten-Programmierung Webseiten-Programmierung Sprachen, Werkzeuge, Entwicklung Bearbeitet von Günter Pomaska 1. Auflage 2012. Taschenbuch. xii, 255 S. Paperback ISBN 978 3 8348 2484 4 Format (B x L): 16,8 x 24 cm Weitere Fachgebiete

Mehr

Im Original veränderbare Word-Dateien

Im Original veränderbare Word-Dateien Computergrafik Bilder, Grafiken, Zeichnungen etc., die mithilfe von Computern hergestellt oder bearbeitet werden, bezeichnet man allgemein als Computergrafiken. Früher wurde streng zwischen Computergrafik

Mehr

Installationsanleitung Adobe SVG Viewer

Installationsanleitung Adobe SVG Viewer Umweltdepartement Amt für Vermessung und Geoinformation Bahnhofstrasse 16 Postfach 1213 6431 Schwyz Telefon 041 819 25 41 Telefax 041 819 25 09 Installationsanleitung Adobe SVG Viewer für WebMap SZ Inhaltsverzeichnis

Mehr

Sachwortverzeichnis... 251

Sachwortverzeichnis... 251 Inhalt Vorwort... V 1 WWW World Wide Web... 1 1.1 Das Internet Infrastruktur und Administration... 2 1.2 Datenübertragung... 4 1.3 Sprachen im Web... 6 1.4 Webseiten... 7 1.4.1 Clientseitige Dynamik...

Mehr

Bildbearbeitung in Word und Excel

Bildbearbeitung in Word und Excel Bildbearbeitung Seite 1 von 9 Bildbearbeitung in Word und Excel Bilder einfügen... 1 Bilder aus der Clipart-Sammlung einfügen:... 2 Bilder über Kopieren Einfügen in eine Datei einfügen:... 2 Bild einfügen

Mehr

Diana Lange. GENERATIVE GESTALTUNG Komplexe Datentypen: PShape

Diana Lange. GENERATIVE GESTALTUNG Komplexe Datentypen: PShape Diana Lange GENERATIVE GESTALTUNG Komplexe Datentypen: PShape EINFÜHRUNG In diesem Foliensatz geht es um den Import und die Darstellung von vektorbasierten Bildmaterial in Processing. Vektorgrafiken basieren,

Mehr

Open Office Impress. PHBern Institut Sekundarstufe 1 Studienfach Informatik. Unterlagen zum Praktikum Anwenderprogramme. Inhalt

Open Office Impress. PHBern Institut Sekundarstufe 1 Studienfach Informatik. Unterlagen zum Praktikum Anwenderprogramme. Inhalt PHBern Institut Sekundarstufe 1 Studienfach Informatik Open Office Impress Unterlagen zum Praktikum Anwenderprogramme Inhalt 1. Benutzeroberfläche, verschiedene Ansichten... 1 2. Neue Folie erstellen...

Mehr

Grundlagen von Corel Draw

Grundlagen von Corel Draw Grundlagen von Corel Draw Allgemeines Corel Draw ist ein so genanntes Vektorgrafik-Programm. Der Vorteil von Vektorgrafiken besteht darin, dass die Qualität auch beim Vergrößern im Gegensatz zu Bitmap-Bildern

Mehr

Vorhergehende Ansicht(en): Zu den vorherigen Ausschnitten zurückkehren.

Vorhergehende Ansicht(en): Zu den vorherigen Ausschnitten zurückkehren. Seite 1 von 7 Internet Stadtplan Chur - HILFETEXTE Inhalt Kurzhilfe Navigation Plantyp Suchfunktionen PDF-Ausdruck Zeichnungsebene (Red Lining Layer) Copyright / Rechtliche Hinweise Kurzhilfe Wenn Sie

Mehr

Scalable Vector Graphics (SVG)

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

Mehr

Wie erstellt man dynamische Elemente mit JSXGraph?

Wie erstellt man dynamische Elemente mit JSXGraph? Wie erstellt man dynamische Elemente mit JSXGraph? 1. Kurzinformation zu JSXGraph Was ist JSXGraph? Eine freie dynamische Mathematiksoftware, die vollständig in Javascript programmiert ist. Daher benötigt

Mehr

Schalter für Zeichnungshilfen Statuszeile

Schalter für Zeichnungshilfen Statuszeile Das Programmfenster Zeichnungsname Werkzeugkästen Menüleiste Zeichenbereich Bildschirmmenü Befehlszeilenfenster Schalter für Zeichnungshilfen Statuszeile Während der Arbeit mit AutoCAD kann über eine Online-Hilfe

Mehr

Graphiken und Bilder. Grundlagen

Graphiken und Bilder. Grundlagen Graphiken und Bilder Grundlagen Bilder und Graphiken Graphiken lassen sich auf geometrische Grundformen reduzieren Bilder sind vor allem photorealistische Abbildungen Datenformate für Bilder und Graphiken

Mehr

InDesign CC. Grundlagen. Peter Wies. 1. Ausgabe, 1. Aktualisierung, März 2014 INDCC

InDesign CC. Grundlagen. Peter Wies. 1. Ausgabe, 1. Aktualisierung, März 2014 INDCC InDesign CC Peter Wies 1. Ausgabe, 1. Aktualisierung, März 2014 Grundlagen INDCC 12 InDesign CC - Grundlagen 12 Grafiken und verankerte Objekte In diesem Kapitel erfahren Sie wie Sie Grafiken im Dokument

Mehr

Kurzanleitung Zeichnungsmodul ACD Chemsketch 11.0 Freeware

Kurzanleitung Zeichnungsmodul ACD Chemsketch 11.0 Freeware U. Schütz Seite 1 von 7 Kurzanleitung Zeichnungsmodul ACD Chemsketch 11.0 Freeware Draw Durch Anklicken der Schaltfläche Draw wechselt das Programm in den Zeichnungsmodus. Optionen Show Grid Raster anzeigen

Mehr

Scalable Vector Graphics (SVG)

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

Mehr

XML Grundlagen Sommersemester 2013

XML Grundlagen Sommersemester 2013 XML Grundlagen Sommersemester 2013 Die Lehrveranstaltung wird studienbegleitend durch eine Hausarbeit und eine Präsentation mit Diskussion geprüft. Die Themen der folgenden Liste werden im Rahmen der Lehrveranstaltung

Mehr

E-Books produzieren und publizieren

E-Books produzieren und publizieren E-Books produzieren und publizieren Bruno Wenk Hochschule für Technik und Wirtschaft HTW Chur Leipzig, 24. Oktober 2012 Seite 1 Ziel Mit kostenlosen Programmen ein E-Book im Format EPUB (2.01) realisieren

Mehr

Ein JavaScript-Framework zur erweiterten Nutzung strukturierter und annotierter SVG-Grafiken in Webseiten

Ein JavaScript-Framework zur erweiterten Nutzung strukturierter und annotierter SVG-Grafiken in Webseiten Ein JavaScript-Framework zur erweiterten Nutzung strukturierter und annotierter SVG-Grafiken in Webseiten Christiane Taras, Michael Santoso, Thomas Schlegel, Thomas Ertl Institut für Visualisierung und

Mehr

Digitale Whiteboard-Software mit HTML5, SVG und WebSockets

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.

Mehr

DATENFORMATE IM INTERNET

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

Mehr

RÖK Typo3 Dokumentation

RÖK Typo3 Dokumentation 2012 RÖK Typo3 Dokumentation Redakteur Sparten Eine Hilfe für den Einstieg in Typo3. Innpuls Werbeagentur GmbH 01.01.2012 2 RÖK Typo3 Dokumentation Inhalt 1) Was ist Typo3... 3 2) Typo3 aufrufen und Anmelden...

Mehr

Trickfilm «Hexe» mit PowerPoint PC PowerPoint 2007

Trickfilm «Hexe» mit PowerPoint PC PowerPoint 2007 PC PowerPoint 2007 Einleitung PowerPoint ist als Präsentations-Tool bekannt. Mit PowerPoint lassen sich jedoch auch kreative Arbeiten herstellen, die sich dann filmartig präsentieren. Als vorgängige Arbeit

Mehr

Kryptos Eine Lernplattform zur Kryptologie

Kryptos Eine Lernplattform zur Kryptologie Techniken Implementierung Demo Schluss Eine Lernplattform zur Kryptologie Universität Oldenburg - Abteilung Parallele Systeme Dimplomarbeit Techniken Implementierung Demo Schluss Übersicht 1 2 Techniken

Mehr

Abb. 1. Abb. 2. Schaltflächen Speichern und Bericht öffnen. Abb. 3. www.accessuebungen.de

Abb. 1. Abb. 2. Schaltflächen Speichern und Bericht öffnen. Abb. 3. www.accessuebungen.de Befehlsschaltfläche, Makro 2010 Niko Becker Mit Hilfe von Steuerelementen können Sie Formulare nicht nur ansprechend gestalten, sondern auch eine Art Benutzerführung einrichten, indem Sie beispielsweise

Mehr

Präsentation eines Handelsunternehmens mit Powerpoint. 2. Teil

Präsentation eines Handelsunternehmens mit Powerpoint. 2. Teil PowerPoint: Präsentation eines Handelsbetriebes Seite 8 von 23 Präsentation eines Handelsunternehmens mit Powerpoint 2. Teil 1 Sortiment 1.1 Übersicht über Warengruppen Aufgabe 8 Erstellen Sie eine neue

Mehr

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F HTML5, CSS3 und JavaScript 1.8 Isolde Kommer 1. Ausgabe, 2. Aktualisierung, Dezember 2013 Fortgeschrittene Entwicklung von Webseiten HTML5F 2 HTML5, CSS3 und JavaScript 1.8 - Fortgeschrittene Entwicklung

Mehr

Glossar. SVG-Grafiken in Bitmap-Grafikformate. Anweisung Eine Anweisung ist eine Folge aus Schlüsselwörtern, Variablen, Objekten,

Glossar. SVG-Grafiken in Bitmap-Grafikformate. Anweisung Eine Anweisung ist eine Folge aus Schlüsselwörtern, Variablen, Objekten, Glossar Anweisung Eine Anweisung ist eine Folge aus Schlüsselwörtern, Variablen, Objekten, Methoden und/oder Eigenschaften, die eine bestimmte Berechnung ausführt, eine Eigenschaft ändert oder eine Methode

Mehr

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136 Wiederholung float+clear Grundlagen Webgestaltung Seite 136 float und clear clear kann für mehrspaltige Layouts verwenden werden. Jedoch kann das auch zu ungewollten Effekten führen. Angenommen eine Webseite

Mehr

Online-Publishing mit HTML und CSS für Einsteigerinnen

Online-Publishing mit HTML und CSS für Einsteigerinnen mit HTML und CSS für Einsteigerinnen Dipl.-Math. Eva Dyllong Universität Duisburg Dipl.-Math. Maria Oelinger spirito GmbH IF MYT 07-2002 Web-Technologien Überblick HTML und CSS, XML und DTD, JavaScript

Mehr

Im Original veränderbare Word-Dateien

Im Original veränderbare Word-Dateien Zeichnen mit Powerpoint Formen Mit PowerPoint kannst du einfache geometrische Formen wie Quadrate, Kreise, Sterne usw. zeichnen und diese mit zahlreichen optischen Effekten versehen. Diese Formen werden

Mehr

Graphikformate Ein kurzer Überblick

Graphikformate Ein kurzer Überblick Graphikformate Ein kurzer Überblick Einführung in das rechnergestützte Arbeiten Dr. Andreas Poenicke, Dipl.-Phys. Patrick Mack KIT Universität des Landes Baden-Württemberg und nationales Forschungszentrum

Mehr

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011 INHALT DIESES VORTRAGS 1. Kurze Einführung

Mehr

bildimport 1 5 InDesign cs6 Dateiformate

bildimport 1 5 InDesign cs6 Dateiformate 1 5 Dateiformate InDesign unterstützt zahlreiche Grafikformate; Bitmap-Formate (= zweidimensionales Rastergrafikformat) wie TIFF, GIF, JPEG und BMP sowie Vektorformate wie EPS. Darüber hinaus werden beispielsweise

Mehr

Visualisierung von Bestandsdatenauszügen in prototypischen Liegenschaftskarten. Karl Neumann, Silke Eckstein

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

Mehr

webmap Qualitätsanforderungen an interaktive thematische Internetkarten Schweizer Statistiktage, Aarau, 18. Nov. 2004 Marco Sieber

webmap Qualitätsanforderungen an interaktive thematische Internetkarten Schweizer Statistiktage, Aarau, 18. Nov. 2004 Marco Sieber Schweizer Statistiktage, Aarau, 18. Nov. 2004 webmap Qualitätsanforderungen an interaktive thematische Internetkarten Marco Sieber Wissenschaftlicher Mitarbeiter (GIS-Fachstelle) marco.sieber@stat.stzh.ch

Mehr

Visualisierung von Geodaten mittels SVG

Visualisierung von Geodaten mittels SVG 1 XML-basierte Visualisierung von Geodaten mittels SVG Prof. Dr.-Ing. Franz-Josef Behr 2 Gliederung Einleitung: Entwicklung, Übersicht einige Grundlagen Beispiele Dokumentstruktur, Aufbau einer einfachen

Mehr

SVG und SMIL Einführung und Überblick

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)

Mehr

Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche.

Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche. 1. Schritt Schaltfläche vorbereiten In Photoshop eine neue Datei in Größe der Schaltfläche erstellen. Hier: Breite: 100 Pixel Höhe: 50 Pixel Auflösung 72 dpi Hintergrund: Weiß* Der weiße Hintergrund ist

Mehr

Die Zeitungsproduktion

Die Zeitungsproduktion HTW Chur FS15 Power of Content 20. Juli 2015 Die Zeitungsproduktion Projekt «explorativ und kreativ» Sybille Hofer sybillehofer@gmx.ch 1 / 8 INHALTSVERZEICHNIS Workflow des gesammten Projekts...3 Erste

Mehr

Leichtathletik Datenverarbeitung Handbuch

Leichtathletik Datenverarbeitung Handbuch http://ladv.de/handbuch Juni, 2014 Leichtathletik Datenverarbeitung Handbuch Urkundendruck Entwickler Marc Schunk Julian Michel Pascal Burkhardt Handbuch Dolf Klein Copyright Leichtathletik Datenverarbeitung

Mehr

GIMP WORKSHOP Handout Gimp

GIMP WORKSHOP Handout Gimp GIMP WORKSHOP Handout Gimp Workshop 1 Ziele des Workshops Was ist Gimp? Was kann ich mit Gimp machen? Wie erstelle ich ein Bild für Scribus? Wie erstelle ich eine Vektorgrafik für Scribus? Gimp Bedienung?

Mehr

ECDL Europäischer Computer Führerschein. Jan Götzelmann. 1. Ausgabe, Juni 2014 ISBN 978-3-86249-544-3

ECDL Europäischer Computer Führerschein. Jan Götzelmann. 1. Ausgabe, Juni 2014 ISBN 978-3-86249-544-3 ECDL Europäischer Computer Führerschein Jan Götzelmann 1. Ausgabe, Juni 2014 Modul Präsentation Advanced (mit Windows 8.1 und PowerPoint 2013) Syllabus 2.0 ISBN 978-3-86249-544-3 ECDLAM6-13-2 3 ECDL -

Mehr

FLASH IMAGESLIDER PROFESSIONELL 4

FLASH IMAGESLIDER PROFESSIONELL 4 FLASH IMAGESLIDER PROFESSIONELL 4 ANLEITUNG, PARAMETERBESCHREIBUNG, HINWEISE UND ERKLÄRUNGEN Version 2.0 - August 2011 Mark Kirstein, sector12 PARAMETERBESCHREIBUNG In diesem Bereich sind alle Parameter

Mehr

Inventor. C:\Dokumente und Einstellungen\Administrator\Desktop\COMENIUS_Juni2005\Inventor01_D.doc Seite 1

Inventor. C:\Dokumente und Einstellungen\Administrator\Desktop\COMENIUS_Juni2005\Inventor01_D.doc Seite 1 EINZELTEILMODELLIERUNG MIT DEM INVENTOR... 3 DIE BENUTZEROBERFLÄCHE...4 BAUTEILKONSTRUKTION FÜR EINE BOHRVORRICHTUNG MIT HILFE VON SKIZZENABHÄNGIGKEITEN... 22 Editieren von Skizzen mit Abhängigkeiten...

Mehr

Zahlen auf einen Blick

Zahlen auf einen Blick Zahlen auf einen Blick Nicht ohne Grund heißt es: Ein Bild sagt mehr als 1000 Worte. Die meisten Menschen nehmen Informationen schneller auf und behalten diese eher, wenn sie als Schaubild dargeboten werden.

Mehr

Ein Bild in den Text einfügen

Ein Bild in den Text einfügen Bild in einen Artikel einfügen Ein Bild in den Text einfügen Positioniert den Cursor an der Stelle im Text, egal ob bei einem Artikel oder einer WordPress-Seite, wo das Bild eingefügt werden soll. Hinter

Mehr

Adobe Flash CS4»3D-Tool«

Adobe Flash CS4»3D-Tool« Flash Tutorial Philipp Nunnemann Adobe Flash CS4»3D-Tool«Im folgenden Tutorial könnt Ihr das»3d-tool«in Adobe Flash CS4 kennenlernen. Das Tool erlaubt euch, Objekte im dreidimensionalen Raum zu bewegen.

Mehr

Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de

Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Webdesign Grundlagen Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Bürokratie Termine & Kursliste & http://hawk.herrkraft.de Wer bin ich? michael kraft ba ma 2006 2012 hawk tutor interaction digital

Mehr

PowerPoint 2010 ein paar wichtige Befehle

PowerPoint 2010 ein paar wichtige Befehle PowerPoint 2010 ein paar wichtige Befehle Bilder/Grafiken Bild als Hintergrundbild einfügen Bild einfügen Bild positionieren Register Entwurf Gruppe Hintergrund Schaltfläche Hintergrundformate Befehl Hintergrund

Mehr

Begriffe: (grafische) Benutzeroberfläche, (grafische) Benutzerschnittstelle,

Begriffe: (grafische) Benutzeroberfläche, (grafische) Benutzerschnittstelle, Gestaltung der Benutzeroberfläche Begriffe: (grafische) Benutzeroberfläche, (grafische) Benutzerschnittstelle, GUI (graphics user interface), Drei Grundsätze vorab: Halten Sie sich, wo immer möglich, an

Mehr

Dynamisch unterrichten mit Excel

Dynamisch unterrichten mit Excel Reimund Albers Dynamisch unterrichten mit Excel Erstellen von Schiebereglern 1 Dynamisch unterrichten mit Excel oder: Wie erstelle ich einen Schieberegler in Excel? Beispiel: Demonstration der Abhängigkeit

Mehr

GEOSOFT NAS-Editor-Handbuch

GEOSOFT NAS-Editor-Handbuch 1 Allgemeines GEOSOFT NAS-Editor-Handbuch 1 Allgemeines Impressum Westwall 8 47608 Geldern tel. 02831 89395 fax. 02831 94145 e-mail info@geosoft.de internet www.geosoft.de Handbuch-NAS-Editor_StandAlone.docx

Mehr

In dieser Lektion lernen Sie wie Sie Texte auf einer PowerPoint-Folie formatieren.

In dieser Lektion lernen Sie wie Sie Texte auf einer PowerPoint-Folie formatieren. Text formatieren In dieser Lektion lernen Sie wie Sie Texte auf einer PowerPoint-Folie formatieren. Wichtiger als in der herkömmlichen Textverarbeitung, ist die Textgestaltung auf Präsentationsfolien.

Mehr

19. Mai 2015 L A TEX. Grafiken. Prof. Dr. Alexander Braun // Wissenschaftliche Texte mit LaTeX // WS 2014/15

19. Mai 2015 L A TEX. Grafiken. Prof. Dr. Alexander Braun // Wissenschaftliche Texte mit LaTeX // WS 2014/15 L A TEX Grafiken Raster- und Vektorgrafiken Eine Rastergrafik setzt ein Bild aus vielen Bildpunkten (engl. picture cell = pixel) zusammen. Eine Vektorgrafik setzt ein Bild aus vielen geometrischen Elementen

Mehr

WEBSEITEN ENTWICKELN MIT ASP.NET

WEBSEITEN ENTWICKELN MIT ASP.NET jamal BAYDAOUI WEBSEITEN ENTWICKELN MIT ASP.NET EINE EINFÜHRUNG MIT UMFANGREICHEM BEISPIELPROJEKT ALLE CODES IN VISUAL BASIC UND C# 3.2 Installation 11 Bild 3.2 Der Webplattform-Installer Bild 3.3 IDE-Startbildschirm

Mehr

Foto und Grafik. Arbeitsheft für den Informatikunterricht. Fotos, Pixel und Vektoren sowie Bildbearbeitung am PC. Name. ... Klasse ...

Foto und Grafik. Arbeitsheft für den Informatikunterricht. Fotos, Pixel und Vektoren sowie Bildbearbeitung am PC. Name. ... Klasse ... Foto und Grafik Arbeitsheft für den Informatikunterricht Fotos, Pixel und Vektoren sowie Bildbearbeitung am PC Name... Klasse... Ausgabe 2011 Redaktion N. Braun, Fachlehrer ICT & Medien Internet: www.jumpcuts.ch

Mehr

Technische Hintergründe des Web 2.0. Praxisprojekt Du bist das Netz! Web 2.0 Morten Strüwe, Florian Brachten

Technische Hintergründe des Web 2.0. Praxisprojekt Du bist das Netz! Web 2.0 Morten Strüwe, Florian Brachten Technische Hintergründe des Web 2.0 Praxisprojekt Du bist das Netz! Web 2.0 Morten Strüwe, Florian Brachten Überblick 1. die Ursprünge des Internet 2. die Techniken des Internet 2.1 Hardware 2.2 Software

Mehr

PowerPoint vertonen. by H.Schönbauer 1

PowerPoint vertonen. by H.Schönbauer 1 PowerPoint vertonen by H.Schönbauer 1 Das brauchen wir dazu: PowerPoint Ein Konzept, eine Idee Ein oder mehrere Musikstücke Konvertierungssoftware Grafische Elemente wie Fotos, Cliparts Wenn wir das alles

Mehr

Warten auf Ereignisse

Warten auf Ereignisse Abb. 1: Diese Botschaften wurden von dem Programm WINSIGHT aufgezeichnet. Warten auf Ereignisse Wenn wir in einem Windows-Programm eine Schaltfläche anklicken, wenn wir die Maus bewegen oder eine Taste

Mehr

Webdesign-Multimedia HTML und CSS

Webdesign-Multimedia HTML und CSS Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente

Mehr

Allgemeine Informationen über die Nutzung der Anwendung. Die Werkzeugleiste. = Streckenmessung

Allgemeine Informationen über die Nutzung der Anwendung. Die Werkzeugleiste. = Streckenmessung Allgemeine Informationen über die Nutzung der Anwendung Die Werkzeugleiste = Streckenmessung aus ein Mit Anklicken dieser Schaltfläche starten Sie die Funktion zum Messen von Strecken zwischen zwei oder

Mehr

Word 2010 für Windows. Grundkurs kompakt. Sabine Spieß 1. Ausgabe, Oktober 2010 K-WW2010-G

Word 2010 für Windows. Grundkurs kompakt. Sabine Spieß 1. Ausgabe, Oktober 2010 K-WW2010-G Sabine Spieß 1. Ausgabe, Oktober 2010 Word 2010 für Windows Grundkurs kompakt K-WW2010-G Inhalt Zu diesem Buch 4 1 Word kennenlernen 7 1.1 Textverarbeitung mit Word...8 1.2 Die Benutzeroberfläche kennenlernen...9

Mehr

Inhalt. Teil I: Der Sprachkern von JavaScript

Inhalt. Teil I: Der Sprachkern von JavaScript Inhalt Vorwort.... 1 Einführung in JavaScript... 1 1.1 Der JavaScript-Sprachkern... 4 1.2 Clientseitiges JavaScript... 9 Teil I: Der Sprachkern von JavaScript 2 Die lexikalische Struktur... 21 2.1 Zeichensatz...

Mehr

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 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.

Mehr

Grafikausgabe mit dem Abstract- Windowing-Toolkit. Eine Einführung

Grafikausgabe mit dem Abstract- Windowing-Toolkit. Eine Einführung Grafikausgabe mit dem Abstract- Windowing-Toolkit Eine Einführung Inhalt Einführung Grundlegende Eigenschaften des Abstract-Windowing- Toolkit (AWT) Grundlagen Grafikausgabe Linien zeichnen Rechtecke zeichnen

Mehr

Website-CMS Grundlagen des Worldsoft-CMS

Website-CMS Grundlagen des Worldsoft-CMS 1 1. Was ist ein Content Management System (CMS)? Ein Web Content Management System ist eine Datenbanklösung zur einfachen Erstellung und Aktualisierung von Websites. Im Gegensatz zu einer statischen Website

Mehr

Paint.NET ein kostenloses Bildbearbeitungsprogramm

Paint.NET ein kostenloses Bildbearbeitungsprogramm Paint.NET ein kostenloses Bildbearbeitungsprogramm Paint.NET ist eine kostenlose Bildbearbeitungssoftware für Microsoft Windows, die von Microsoft und der Washington State University entwickelt wurde.

Mehr

10 Anwenderfreundlich mit Makros

10 Anwenderfreundlich mit Makros 10 Anwenderfreundlich mit Makros»Ogni bel gioco dura poco. Alles Schöne hat einmal ein Ende.«Dies ist das letzte Kapitel, das sich schwerpunktmäßig mit Makros beschäftigt. Aber keine Angst, VBA ist ja

Mehr

Grafischer Tischeplan

Grafischer Tischeplan 99 Grafischer Tischeplan Den GASTRO-TOUCH Standard-Tischeplan aktivieren Sie über STAMM VERWALTUNG PFLEGE -> ALLGEMEINE EINST. -> SEITE 5 -> GRAFISCHE TISCHANZEIG = G Tischformen / Stühle Sie können kreisförmige

Mehr

Adobe Photoshop CS2 Teil 1

Adobe Photoshop CS2 Teil 1 Adobe Photoshop CS2 Teil 1 Das Programm starten Auf die WINDOWS-STARTSCHALTFLÄCHE klicken Im Menü die Schaltfläche Im Untermenü auf die Schaltfläche klicken Im geöffneten Ordner das Programm mit der Schaltfläche

Mehr

Aufbau von Hichert-Graphik Schritt für Schritt

Aufbau von Hichert-Graphik Schritt für Schritt Aufbau von Hichert-Graphik Schritt für Schritt Ausgangsdaten anlegen: o Sollte dann so aussehen: Umsatz Plan Ist Abweich. 60 40-20 o Details dazu: 4 Spaltenüberschriften eintragen: Plan, Ist, leer, Abweichung

Mehr

Webseiten und Web-Apps grafisch gestalten mit HTML5 Canvas ohne Flash und sonstige Tools

Webseiten und Web-Apps grafisch gestalten mit HTML5 Canvas ohne Flash und sonstige Tools Webseiten und Web-Apps grafisch gestalten mit HTML5 Canvas ohne Flash und sonstige Tools 1 Kurze HTML-Geschichte Die HTML4-Spezifikation wurde im Dezember 1997 vorgelegt. Seitdem Stagnation! Das W3C arbeitete

Mehr

HTML 5-Editor für OpenStreetMap

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

Mehr

EINLEITUNG. 1 Pixel Bild ist 8 Pixel hoch. Bild ist 8 Pixel breit

EINLEITUNG. 1 Pixel Bild ist 8 Pixel hoch. Bild ist 8 Pixel breit DIGITALE BILDER DIGITALE BILDER Unsere Fotos sind schön, künstlerisch, emotional. und zugleich nur nullen und einsen. Eben digital. Was das bedeutet und wie sie damit umgehen können, wollen wir ihnen in

Mehr

Wie entsteht eine animierte Präsentation? Erklärung für Microsoft PowerPoint 2007

Wie entsteht eine animierte Präsentation? Erklärung für Microsoft PowerPoint 2007 Wie entsteht eine animierte Präsentation? Erklärung für Microsoft PowerPoint 2007 Was machen Sie jetzt? Nein! Nicht schlafen!!! Sehen Sie sich diese Erklärungen erst einmal an. Überlegen Sie sich Inhalte

Mehr

Webdesign mit HTML & CSS

<Trainingsinhalt> Webdesign mit HTML & CSS Webdesign mit HTML & CSS Einführung...11 Das Internet, das Web und HTML...12 Offen, doch nicht gleich...13 Der Krieg der Browser...14 Ein Schub in Richtung Standards...15 Das aktuelle

Mehr

Der Frosch als Vektorgrafik

Der Frosch als Vektorgrafik Der Frosch als Vektorgrafik Einen Frosch erstellen und dabei typische Arbeitsweisen in CorelDraw kennen lernen Den auf der Titelseite von Draw dargestellten Frosch wollen wir nun nach basteln. Die benötigten

Mehr

Dr. Thomas Meinike Hochschule Merseburg

Dr. Thomas Meinike Hochschule Merseburg XSLT Programmierung effektiv und schmerzfrei! Dr. Thomas Meinike Hochschule Merseburg thomas.meinike@hs merseburg.de http://www.iks.hs merseburg.de/~meinike/ @XMLArbyter Zusatzmaterial Februar

Mehr

72.14 Erstellen von Schaubildern und Zeichnungen (MS Word/Powerpoint 2003)

72.14 Erstellen von Schaubildern und Zeichnungen (MS Word/Powerpoint 2003) Aus- und Fortbildungszentrum Lehreinheit für Informationstechnologien 72.14 Erstellen von Schaubildern und Zeichnungen (MS /Powerpoint 2003) Allgemeine Gestaltungsempfehlungen Umgang mit den Schaltflächen

Mehr

ESLC Leitfaden Testwerkzeug für Schüler [DE]

ESLC Leitfaden Testwerkzeug für Schüler [DE] ESLC Leitfaden Testwerkzeug für Schüler [DE] Inhalt 1 EINFÜHRUNG... 3 2 DURCHFÜHRUNG DER TESTS... 3 2.1 Anmeldung... 3 2.2 Audiokontrolle für den Hörtest... 5 2.3 Testdurchführung... 5 3 INFORMATIONEN

Mehr

6 Graphische Darstellungen mit Matplotlib

6 Graphische Darstellungen mit Matplotlib 6 Graphische Darstellungen mit Matplotlib Matplotlib ist eine Bibliothek zur Erzeugung graphischer Darstellungen. In diesem Kapitel wird gezeigt, wie einfache 2D-Darstellungen zur Visualisierung von Daten

Mehr

Inhalt. 2 RÖK Typo3 Dokumentation

Inhalt. 2 RÖK Typo3 Dokumentation 2012 RÖK Typo3 Dokumentation Hauptadmin RÖK Eine Hilfe für den Einstieg in Typo3. innpuls Werbeagentur GmbH 01.01.2012 2 RÖK Typo3 Dokumentation Inhalt 1) Was ist Typo3... 3 2) Typo3 aufrufen und Anmelden...

Mehr

Mathe Leuchtturm TI N spire-leuchtturm

Mathe Leuchtturm TI N spire-leuchtturm 1 Mathe Leuchtturm TI N spire-leuchtturm 003 = TI N spire Übungskapitel 3.Klasse Erforderlicher Wissensstand (ohne Computeranwendung) Die ganzen Zahlen Z -> negative Zahlen (nicht unbedingt erforderlich:)

Mehr

Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML

Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML Hypertext Markup Language HTML Hypertext Markup Language HTML Cascading Style Sheets CSS Zwei Sprachen, mit denen Webseiten erstellt werden HTML: Strukturieren von Inhalten durch Elemente Überschriften,

Mehr

Slices und Rollover für die Startseite einer Bildergalerie

Slices und Rollover für die Startseite einer Bildergalerie Slices und Rollover für die Startseite einer Bildergalerie Die größte Frage bei einer Webseite ist es, auf ggf. viele Informationen von der relativ kleinen Fläche eines Bildschirmes zu verweisen. Dabei

Mehr

Handbuch RED CAD APP. Dispositionen

Handbuch RED CAD APP. Dispositionen Handbuch RED CAD APP Dispositionen Copyright by, 4147 Aesch / Schweiz Verfasser: Bernard Hofmann Seite 1 von 9 Inhalt 1 Dispositionen zeichnen... 3 1.1 Inhalt Symbolik... 3 1.2 Empfohlene Programmeinstellungen...

Mehr

Übung 1. Explorer. Paint. Paint. Explorer

Übung 1. Explorer. Paint. Paint. Explorer Seite 1 Übung 1 1. Öffnen Sie das Programm PAINT 2. Maximieren Sie das Fenster 3. Verkleinern Sie das Fenster (Nicht Minimieren!!) 4. Öffnen Sie ZUSÄTZLICH zu PAINT den Windows Explorer 5. Verkleinern

Mehr

Die Wege der Jakobspilger in Westfalen

Die Wege der Jakobspilger in Westfalen Altertumskommission für Westfalen Die Wege der Jakobspilger in Westfalen Anleitung zum Erstellen von individuellem Kartenmaterial Schritt 1 Datei herunterladen Laden Sie das auf der Internetseite www.jakobspilger.lwl.org/routen/individuelles-kartenmaterial

Mehr

Anwendungsbeschreibung des ReNoStar-Druckers

Anwendungsbeschreibung des ReNoStar-Druckers Anwendungsbeschreibung des ReNoStar-Druckers Stand September 2007 Inhalt Inhalt... 2 Anforderung aus der Praxis... 3 Die ReNoStar Drucker-Leiste... 3 Erstellen einer Vorlage... 3 Reihenfolge der Vorlagen

Mehr

Bildbearbeitung für Internet/Intranet. Christoph Runkel christoph runkel internetprojekte

Bildbearbeitung für Internet/Intranet. Christoph Runkel christoph runkel internetprojekte Bildbearbeitung für Internet/Intranet Christoph Runkel christoph runkel internetprojekte Übersicht Unterschied zu Printmedien Farbmodelle Pixelgrafiken Definition Formate Beispiele Vektorgrafiken Definition

Mehr

Neues Projekt anlegen... 2. Neue Position anlegen... 2. Position in Statikdokument einfügen... 3. Titelblatt und Vorbemerkungen einfügen...

Neues Projekt anlegen... 2. Neue Position anlegen... 2. Position in Statikdokument einfügen... 3. Titelblatt und Vorbemerkungen einfügen... FL-Manager: Kurze beispielhafte Einweisung In dieser Kurzanleitung lernen Sie die wichtigsten Funktionen und Abläufe kennen. Weitere Erläuterungen finden Sie in der Dokumentation FLManager.pdf Neues Projekt

Mehr

JPEG, PDF & Co. JPEG, PDF & Co. Theorie und Praxis zu Bildern auf Computern und Druckern

JPEG, PDF & Co. JPEG, PDF & Co. Theorie und Praxis zu Bildern auf Computern und Druckern JPEG, PDF & Co. Theorie und Praxis zu Bildern auf Computern und Druckern 16.12.2010 Borkwalde, Blog und Bier 1 Datei Bildschirm Drucker 16.12.2010 Borkwalde, Blog und Bier 2 Was ist eine Datei? 10011101

Mehr

Word 2010 Grafiken exakt positionieren

Word 2010 Grafiken exakt positionieren WO.009, Version 1.2 10.11.2014 Kurzanleitung Word 2010 Grafiken exakt positionieren Wenn Sie eine Grafik in ein Word-Dokument einfügen, wird sie in die Textebene gesetzt, sie verhält sich also wie ein

Mehr

Folienübergänge und Animationen Folien Übergänge Animationen und Effekte. Unterschiede zwischen Impress und PowerPoint Unterschiede

Folienübergänge und Animationen Folien Übergänge Animationen und Effekte. Unterschiede zwischen Impress und PowerPoint Unterschiede Eine neue Präsentation erstellen Autopilot Folien einfügen Folien auswählen Eine Seite formatieren Eine Folie formatieren Arbeitsbereich Ansichten Die Präsentation ausführen Folienübergänge und Animationen

Mehr