Aufgaben

Sollte man das Bild als Pixelgrafik oder Vektorgrafik speichern?

Logo Wikimedia

Vektorgrafik

Auf dem Bild siehst du das Logo der Wikimedia Commons. Da das Logo aus einfachen Formen besteht und du es in verschiedenen Größen (verschiedene Bildschirme wie zum Beispiel PC oder Handy oder auch für Plakate) verwenden können solltest, brauchst du hier eine Vektorgrafik.

Was sind Vorteile von Vektorgrafiken gegenüber Pixelgrafiken?

Leider falsch, das ist ein Vorteil von Pixelgrafiken. Schau dir den Unterschied nochmal an!

Das stimmt zwar, ist aber kein Vorteil von Vektorgrafiken, sondern ein Nachteil! Solche Berechnungen verbrauchen Rechnerleistung und können bei komplexen Bildern sehr aufwändig sein.

Diese Lösung ist nicht richtig.

Die Lösung ist richtig!

Fast. Das sind noch nicht alle richtigen Antworten!

Das hier ist der Inhalt einer svg-Datei.

<?xml version="1.0" encoding="UTF-8"?>

<svg xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="350px" height="230px">

    <rect 
        fill="blue" 
        x="0" y="0" 
        width="350" height="230" />
    <circle 
        fill= "red" 
        cx="175" cy="115" 
        r="115" />
    <rect
        fill="black"
        x="125" y="65" 
        width="100" height="100" />
</svg>

a) Nimm ein Blatt Papier und zeichne deine Vermutung, wie das Bild aussieht, wenn der Computer es rendert.

b) Speichere den Code als eine Datei mit der Endung .svg und öffne sie - zum Beispiel in einem Browser. Überprüfe damit dein Ergebnis aus der Aufgabe a.

Vertiefung zu Vektorgrafiken

Das svg-Dokument

<svg xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="350px" height="230px">
    ...
</svg>

In diesem Teil wird das SVG-Dokument beschrieben. Du kannst hier erkennen, dass die Standardgröße des Bildes 350 Pixel breit und 230 Pixel hoch sein soll.

Der Inhalt des Dokuments

Eingeschlossen in dem <svg> und </svg> ist der Inhalt des Dokuments. Wie du an dem Code sehen kannst, ist der Inhalt bei SVG-Dateien nicht jeder einzelne Bildpunkt, sondern ganze Formen, nämlich in diesem Fall rect und circle.

rect: Das steht für ein Rechteck (auf Englisch "rectangle").

circle: Das ist Englisch für "Kreis".

Erstes Element des Bildes: Rechteck
<rect 
    fill="blue" 
    x="0" y="0" 
    width="350" height="230" />

Dieser Teil steht für ein blaues Rechteck, das an der Stelle (0|0) beginnt und 350 x 230 Pixel groß ist.

Blaues Rechteck

Zweites Element des Bildes: Kreis
<circle 
    fill= "red" 
    cx="175" cy="115" 
    r="115" />

Dieser Teil steht für einen roten Kreis, der den Mittelpunkt (center-x, center-y) bei (175|115) hat. Das ist genau die Mitte des Bildes, da %%350 : 2 = 175%% und %%230 : 2 = 115%%.
Der Radius ist 115 Pixel, also geht der Kreis bis ganz nach oben und ganz nach unten im Bild.

Rechteck und Kreis

Drittes Element des Bildes: Rechteck
<rect
    fill="black"
    x="125" y="65" 
    width="100" height="100" />

Dieser letzte Teil steht für ein schwarzes Rechteck, das bei (125,65) beginnt und 100 x 100 Pixel groß ist. Das Rechteck liegt im Inneren des roten Kreises.

Fertiges Bild

Beschreibe die Objekte mit ihren Attributwerten.

Formen

Objekt: Rechteck

Attributwerte:

Füllfarbe: Orange

Breite: x

Höhe: y

Rahmenfarbe: Orange

Position: Links Oben

Objekt: Dreieck

Attributwerte:

Füllfarbe: Rot

Seite1: x

Seite2: y

Seite3: z

Rahmenfarbe: Rot

Position: Rechts Oben

Objekt: Stern

Attributwerte:

Füllfarbe: Türkis

Rahmenfarbe: Türkis

Position: Links Unten

Anzahl der Sternzacken: 5

Objekt: Oval

Attributwerte:

Füllfarbe: Lila

Rahmenfarbe: Lila

Position: Rechts Unten

Die folgende Abbildung stellt ein Handout dar, das kurz und bündig die wichtigsten Informationen über ein Thema oder einen Vortrag zusammenfasst.

Krokodil Handout

Autor der Aufgabe: Seminargruppe Informatikdidaktik, Ludwig-Maximilians-Universität München, 2016
Lizenz: cc-by-sa-4.0

Welche Schriftstile wurden im obigen Text verwendet?

Klassen der Textdokumente

Der "Schriftstil" bezeichnet die Textauszeichnungen wie fett, kursiv, oder %%\underline{\text{unterstrichen}}%%. Diese drei wurden in dem Textdokument verwendet:

  • Die Zeichen in der Überschrift "Das Krokodil" sind fett.
  • Die Zeichen in dem Wort "Merkmale:" sind kursiv.
  • Die Zeichen in "%%\underline{\text{23 Krokodilgattungen}}%%" sind unterstrichen.

Gib für die Zeichen in folgenden Zeichenketten aus dem Handout die Werte der Attribute Farbe, Fett, Kursiv und Unterstrichen an:

Krokodil, Merkmale, Reptilien, Unterfamilien, 6,70m

Krokodil

Die Zeichen in der Zeichenkette "Krokodil" haben die folgenden Attributwerte:

Farbe = schwarz
Fett = wahr
Kursiv = falsch
Unterstrichen = falsch

Krokodil Zeichenkette

Merkmale

Die Zeichen in der Zeichenkette "Merkmale" haben die folgenden Attributwerte:

Farbe = schwarz
Fett = falsch
Kursiv = wahr
Unterstrichen = falsch

Merkmale Zeichenkette

Reptilien

Die Zeichen in der Zeichenkette "Reptilien" haben die folgenden Attributwerte:

Farbe = grün
Fett = wahr
Kursiv = falsch
Unterstrichen = falsch

Reptilien Zeichenkette

Unterfamilien

Die Zeichen in der Zeichenkette "Unterfamilien" haben die folgenden Attributwerte:

Farbe = schwarz
Fett = falsch
Kursiv = falsch
Unterstrichen = wahr

Unterfamilien Zeichenkette

6,70 m

Die Zeichen in der Zeichenkette "6,70 m" haben die folgenden Attributwerte:

Farbe = rot
Fett = falsch
Kursiv = falsch
Unterstrichen = falsch

Meter Zeichenkette

Beschreibe die Ausrichtung des obigen Textes

Kommentieren Kommentare