Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungLetzte ÜberarbeitungBeide Seiten der Revision | ||
de:create:images [31.03.2014 16:59] – [Urheberrechte und teure Abmahnungen] avielhab | de:create:images [20.06.2020 16:43] – alte Version wiederhergestellt (19.03.2020 16:21) admin | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== Bilder im Fragebogen ====== | ====== Bilder im Fragebogen ====== | ||
- | Es gibt eine Reihe von Gründen, Bilder im Fragebogen zu verwenden: Der Stimulus im Befragungsexperiment, | + | Es gibt eine Reihe von Gründen, Bilder im Fragebogen zu verwenden: Der Stimulus im Befragungsexperiment, |
- | Dieses Kapitel erklärt, wie man Bilder für die Darstellung im Internet optimiert und sie anschließend in den Fragebogen einfügt. | + | Dieses Kapitel erklärt, wie man Bilder für die Darstellung im Internet optimiert und sie anschließend in den Fragebogen einfügt. Vorweg allerdings eine Warnung. |
- | Bilder lagern im Internet als eigenständige Dateien, die über eine Internet-Adresse (URL) auch direkt (ohne die umgebende Website) im Browser geöffnet werden können. Daher erfolgt die Verwendung von Bildern im Fragebogen jeweils in zwei Schritten: | ||
- | | + | ===== Urheberrechte und teure Abmahnungen ===== |
+ | |||
+ | Sowohl Fotos wie auch Abbildungen (z.B. ein Ausschnitt einer Landkarte) unterliegen in aller Regel dem Urheberrecht. Falls auf einem Bild Personen abgebildet werden, unterliegt das Bild zusätzlich dem Persönlichkeitsrecht. | ||
+ | |||
+ | Wenn Sie ein fremdes Bild (z.B. aus dem Internet) oder das Bild einer Person verwenden, drohen -- neben Schadensersatz-Forderungen -- horrende Anwaltsrechnungen. Mehr Informationen dazu finden Sie im Internet unter dem Begriff " | ||
+ | |||
+ | Deshalb brauchen Sie __immer__ eine schriftliche Genehmigung des Urhebers zur Verwendung des Bildes (Verwertungs- bzw. Nutzungsrecht). Weiterhin benötigen Sie schriftliche Genehmigungen der abgebildeten Personen. Ausnahmen sind freie Bilddatenbanken -- allerdings können hier andere Einschränkungen gelten (z.B. dass der Urheber angegeben werden muss). | ||
+ | |||
+ | |||
+ | ===== Kurzfassung ===== | ||
+ | |||
+ | Bilder lagern im Internet als eigenständige Dateien, die über eine Internet-Adresse (URL) abgerufen werden. Daher erfolgt die Verwendung von Bildern im Fragebogen jeweils in zwei Schritten: | ||
+ | |||
+ | | ||
- Anschließend muss das Bild in den Fragebogen eingebunden werden. Hier gibt es mehrere Möglichkeiten - je nach Einsatzzweck. | - Anschließend muss das Bild in den Fragebogen eingebunden werden. Hier gibt es mehrere Möglichkeiten - je nach Einsatzzweck. | ||
+ | * Das Bild taucht unter **Fragebogen zusammenstellen** rechts unten auf. Hier können Sie es einfach in den Fragebogen hineinziehen (Drag & Drop). | ||
+ | * Wenn Sie das Bild unter **Bilder und Mediendateien** anklicken, wird Ihnen der Dateiname angezeigt sowie ein HTML-Code zum Einbinden des Bildes. Diesen HTML-Code können Sie über all dort eingeben, wo Sie Text eingeben können. Zum Beispiel in Textbausteinen (sofern für die Darstellung " | ||
- | ===== Urheberrechte | + | Wenn Sie ein Bild mittels HTML-Code einbinden, können Sie die Platzierung genauer justieren. Folgender HTML-Code zeigt das Bild '' |
+ | |||
+ | <code html> | ||
+ | <div style=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Der folgende HTML-Code zeigt ein Bild rechtbündig an und lässt links davon mit 20 Pixel Abstand Text fließen. Dies könnte z.B. im Fragetext zum Einsatz kommen. | ||
+ | |||
+ | <code html> | ||
+ | <img src=" | ||
+ | Bitte sehen Sie das Bild auf der rechten Seite genau an. | ||
+ | Beurteilen Sie das Bild anschließend anhand der Aussagen, die Sie unten lesen. | ||
+ | </ | ||
+ | |||
+ | Für umfließenden Text können Sie auch auf die vordefinierten CSS-Klassen " | ||
+ | |||
+ | <code html> | ||
+ | <img src=" | ||
+ | Bitte sehen Sie das Bild auf der rechten Seite genau an. | ||
+ | </ | ||
+ | |||
+ | **Hinweis: | ||
- | Bitte denken Sie daran, dass Bilder als Werke oftmals dem Urheberrecht unterliegen. Falls Personen zu sehen sind, auch dem Persönlichkeitsrecht. | + | **Tipp: |
- | Bilder im Internet sind ein leidiges Thema: Bei Nicht-Beachtung von Nutzungsrechten drohen - neben Schadensersatz-Forderungen - horrende Anwaltsrechnungen. Mehr Informationen dazu gibt es im Internet unter dem Begriff " | ||
===== Bilder für das Internet vorbereiten ===== | ===== Bilder für das Internet vorbereiten ===== | ||
Zeile 20: | Zeile 56: | ||
Damit ein Bild im Fragebogen korrekt und sauber angezeigt wird, sind einige Vorbereitungen notwendig. Meist muss das Bild auf die richtige Größe skaliert und anschließend in einem Internet-tauglichen Dateiformat (z.B. GIF, PNG oder JPG) gespeichert werden. | Damit ein Bild im Fragebogen korrekt und sauber angezeigt wird, sind einige Vorbereitungen notwendig. Meist muss das Bild auf die richtige Größe skaliert und anschließend in einem Internet-tauglichen Dateiformat (z.B. GIF, PNG oder JPG) gespeichert werden. | ||
- | Für die Aufbereitung von Bildern für das Internet benötigen Sie fast immer eine Software zur Bildbearbeitung. Falls Sie keine derartige Software zur Hand haben, können Sie sich das hervorragende Open Source-Programm [[http:// | + | Für die Aufbereitung von Bildern für das Internet benötigen Sie eine Software zur Bildbearbeitung. Falls Sie keine derartige Software zur Hand haben, können Sie sich das hervorragende Open Source-Programm [[http:// |
+ | |||
+ | |||
+ | ==== Bilder skalieren ==== | ||
+ | |||
+ | Wie groß ein Bild im Fragebogen dargestellt wird, hängt von der Pixel-Größe ab. Ein Pixel entspricht (meistens) einen Bildpunkt auf dem Bildschirm. Stellen Sie die Vergrößerung/ | ||
+ | |||
+ | * Es bringt nichts, im Bild (zusätzlich) eine Größe in Zentimeter o.ä. festzulegen. | ||
+ | * Sie können die Größe eines Bildes prinzipiell auch bei der Einbindung im HTML-Code festlegen -- allerdings ist die Skalierung durch den Browser womöglich qualitativ schlechter (unscharf) und der Fragebogen lädt unnötig lange, weil mit der Pixel-Größe auch die Dateigröße und damit die Übertragungszeit steigt. | ||
+ | |||
+ | Das Bild skalieren Sie wie folgt: | ||
+ | |||
+ | * Öffnen Sie das Original-Bild in der Bildbearbeitung | ||
+ | * Konvertieren Sie das Bild in den RGB-Modus (Graustufen-Bilder in den Modus Graustufen), | ||
+ | * Skalieren Sie das Bild mit der Bildbearbeitung. Achten Sie darauf, dass Sie die Größe in Pixeln angeben (die Auflösung oder eine Größenangabe in Zentimeter ist für die Darstellung im Internet irrelevant). | ||
+ | * **Tipp:** Die Breite des Fragebogens können Sie im [[: | ||
+ | * Auf kleinen Displays (z.B. auf dem Smartphone) wird das Layout automatisch schmaler ([[: | ||
+ | * Verwenden Sie die Funktion //Unscharf maskieren// (auch // | ||
+ | * Reduzieren Sie die Farbtiefe, wenn es sich um eine Grafik handelt. Je weniger Farben Sie benötigen (es zählen v.a. die Schritte um 2er-Potenzen, | ||
+ | * Speichern Sie //Fotos// im Format JPG und // | ||
==== Farbtiefe ==== | ==== Farbtiefe ==== | ||
- | Die Farbtiefe beschreibt, wie viele Farben ein Bildpunkt im Bild annehmen kann. Der Bildschirm kann typischerweise | + | Die Farbtiefe beschreibt, wie viele Farben ein Bildpunkt im Bild annehmen kann. Ein gewöhnlicher |
- | * Bilder mit voller Farbtiefe werden auch oft als //RGB// bezeichnet. | + | * Bilder mit voller Farbtiefe werden auch oft als "RGB" |
- | * Bilder mit 256 Graustufen werden als //Graustufen-Bilder// bezeichnet. | + | * Bilder mit 256 Graustufen werden als "Graustufen-Bilder" |
- | * Bilder mit 256 oder weniger Farben werden als //indizierte Bilder// bezeichnet. | + | * Bilder mit 256 oder weniger Farben werden als "indizierte Bilder" |
Die Farbtiefe hängt wesentlich mit dem verwendeten Dateiformat zusammen: | Die Farbtiefe hängt wesentlich mit dem verwendeten Dateiformat zusammen: | ||
Zeile 40: | Zeile 96: | ||
|Foto (JPG)\\ 85% Qualität|Foto (JPG)\\ 15% Qualität|Auf 8 Farben\\ reduziert (PNG)|Grafik (PNG)\\ | |Foto (JPG)\\ 85% Qualität|Foto (JPG)\\ 15% Qualität|Auf 8 Farben\\ reduziert (PNG)|Grafik (PNG)\\ | ||
- | ==== Skalieren von Bildern ==== | ||
- | Wie groß ein Bild im Internet dargestellt wird, hängt von der Pixel-Größe ab. Ein Pixel entspricht einen Bildpunkt auf dem Bildschirm. Stellen Sie die Vergrößerung/ | + | ===== Bilder hochladen ===== |
- | | + | Über den Menüpunkt |
- | | + | |
- | + | ||
- | Das Bild skalieren Sie nun wie folgt: | + | |
- | + | ||
- | | + | |
- | | + | |
- | * Skalieren Sie das Bild mit der Bildbearbeitung. Achten Sie darauf, dass Sie die Größe | + | |
- | * Verwenden | + | |
- | * Reduzieren Sie die Farbtiefe, wenn es sich um eine Grafik handelt. Je weniger Farben Sie benötigen (es zählen v.a. die Schritte um 2er-Potenzen, | + | |
- | * Speichern Sie Fotos im Format JPG, Grafiken im Format PNG oder GIF. Bei JPG hängt die optimale Kompression vom Bild ab - behalten Sie die Vorschau im Auge und wenn das Bild ordentlich aussieht, rücken Sie den Regler noch ein kleines Stück Richtung höhere Qualität. | + | |
- | + | ||
- | ===== Bilder in oFb hochladen ===== | + | |
- | Falls das Bild, dass Sie in Ihren Fragebogen benötigen, | + | * Mit dem Knopf neben // |
+ | | ||
+ | * Falls Sie die Option | ||
+ | * Mit einem Klick auf //Das Bild hochladen// wird die Grafikdatei auf den Server übertragen. Je nach Dateigröße kann dies ein wenig dauern. Anschließend kann das Bild im Fragebogen verwendet werden. | ||
- | oFb will sicherstellen, | ||
===== Bild in den Fragebogen einbinden ===== | ===== Bild in den Fragebogen einbinden ===== | ||
Zeile 67: | Zeile 112: | ||
* Das Bild als Fragebogen-Element in die Fragebogen-Seite ziehen. Hiermit kann ein Bild über oder unter einer Frage (oder auch als einziges Element auf der Seite) angezeigt werden. | * Das Bild als Fragebogen-Element in die Fragebogen-Seite ziehen. Hiermit kann ein Bild über oder unter einer Frage (oder auch als einziges Element auf der Seite) angezeigt werden. | ||
- | * Das Bild im Layout, also auf jeder Seite im Fragebogen | + | * Das Bild als Logo verwenden, sodass es auf jeder Seite im Fragebogen |
- | * Das Bild via HTML-Tag in eine Frage (also Frage, Erklärung oder Item-Text) einbinden. | + | * Das Bild im Layout |
- | * Das Bild via HTML-Tag an beliebiger Stelle im Fragebogen ausgeben, z.B. neben einer Frage oder zwei Bilder nebeneinander ([[table-layout|Elemente nebeneinander platzieren]]). | + | * Das Bild via HTML-Code |
+ | * Das Bild via HTML-Code an beliebiger Stelle im Fragebogen ausgeben, z.B. neben einer Frage oder zwei Bilder nebeneinander ([[table-layout|Elemente nebeneinander platzieren]]). Es ist sinnvoll, den komplexeren HTML-Code zunächst als Textbaustein zu speichern und diesen dann in den Fragebogen einzubinden. | ||
- | **Tipp:** Falls das Layout kein Logo unterstützt, | + | Um ein Bild via HTML einzubinden, |
- | Um ein Bild via HTML einzubinden, benötigen Sie lediglich das HTML-Tag < | + | Hat man ein Bild in das Projektverzeichnis hochgeladen, ist die Adresse ('' |
- | Hat man ein Bild selbst in oFb hochgeladen, | ||
- | |||
- | **HTML-Code** | ||
<code html> | <code html> | ||
- | < | + | < |
< | < | ||
- | < | + | < |
</ | </ | ||
- | In oFb sind zwei so genannte | + | In SoSci Survey |
- | **Beispiel für ein Textelement** | ||
<code html> | <code html> | ||
< | < | ||
- | < | + | < |
Dies ist ein Beispieltext, | Dies ist ein Beispieltext, | ||
- | mitten im Text platziert werden kann.</ | + | rechts vom Text platziert werden kann.</ |
</ | </ | ||
{{scr.images.image-right.gif? | {{scr.images.image-right.gif? | ||
- | |||
- | **Tipp:** Den HTML-Code zum Einbinden eines Bildes können Sie nahezu überall verwenden: In Textbausteinen, | ||
HTML erlaubt eine Vielzahl an Optionen beim Einbinden von Bildern -- mehr dazu bei [[http:// | HTML erlaubt eine Vielzahl an Optionen beim Einbinden von Bildern -- mehr dazu bei [[http:// | ||
+ | |||
+ | |||
===== Bilder als Antwortoptionen ===== | ===== Bilder als Antwortoptionen ===== | ||
- | Wie bereits angekündigt: | + | Man kann Bilder auch direkt in Fragen und Items einfügen. Auch dafür verwendet man das HTML-Tag '' |
- | So kann man die //verbale Verankerung// | + | So kann man die //verbale Verankerung// |
- | **Tipp:** Sie müssen das < | + | **Tipp:** Sie müssen das '' |
- | **Hinweis: | + | **Hinweis: |
**Hinweis: | **Hinweis: | ||
- | ==== Bild in Item einfügen | + | |
+ | ==== Bilder als Auswahl-Optionen | ||
{{scr.images.items.png? | {{scr.images.items.png? | ||
Zeile 117: | Zeile 160: | ||
{{scr.images.items.result.png? | {{scr.images.items.result.png? | ||
- | ==== Bilder | + | |
+ | ==== Bilder | ||
{{scr.images.labels.png? | {{scr.images.labels.png? | ||
{{scr.images.labels.result.png? | {{scr.images.labels.result.png? |