Multimedia-Inhalte im Web (M152)

Datum: September 2022
Lesedauer: 8 Minuten

In diesem Blogpost zeige ich auf, was bei der Wahl des Dateiformates beachtet werden sollte. Zudem gehe ich auf die Schutzrechte ein und beschreibe, wie man als Entwickler von diesen Gebrauch machen kann.
Zu guter Letzt erkläre ich, welche Regeln man beim Schiessen des perfekten Fotos beachten sollte und wie man seine Kamera passend dafür einstellt.

Die meisten dieser Themen bearbeiteten wir in der Berufsschule. Das Modul 152 befasst sich mit Themen rund um Multimedia.

Dateiformate

Zu Beginn dieses Moduls untersuchten wir die verschiedensten Dateiformate. Dabei konnte man erkennen, dass es einige Optionen gibt, zwischen welchen man sich jeweils entscheiden kann.
Oft werden einfach die bekannten Formate verwendet. Wenn man aber etwas Zeit investiert und die Möglichkeiten abwägt, so kommt man hin und wieder zu einer besseren Lösung.

Bild

Bei der Wahl des Dateiformates für Bilder, empfiehlt es sich auf diese fünf Bereiche zu achten.

Komprimierung

Bei Bildern unterscheidet man zwischen der lossless und lossy Komprimierung. Wird ein Bild mit lossless komprimiert, so kann jedes Bit wiederhergestellt werden. Nach einer lossy Komprimierung werden die unnötigen Informationen eliminiert. Nach dem Vergrössern der Datei ist diese nicht mehr in der Qualität, in welcher sie zuerst war.

Quelle: https://gisgeography.com/ (opens in a new tab)

Vektor

Vektorgrafiken sind mathematisch definierte Bilder. Diese werden auf einem Raster abgespeichert. Solche Dateien können unbegrenzt skaliert werden. Denn die Grafiken werden jeweils neu berechnet.
Solche Grafiken werden meist bei Logos oder Icons eingesetzt.

Ein weiterer Vorteil ist, dass Programmierer die Farben der Abbildungen leicht abändern können.

Vektorgrafiken stossen dann an ihre Grenzen, wenn es um das Speichern von Farbverläufen oder Formen aus der Natur geht.

Transparenz

Bei der Entscheidung zur Wahl des Formates sollte auch immer berücksichtigt werden, ob man gewisse Teile freistellen will. Dies wird nämlich von den PNG, GIF und Vektor Formaten unterstützt.

Farbtiefe

Die Farbtiefe beschreibt, wie viele Farben abgespeichert werden können. Beim GIF können beispielsweise nur 256 Farben gespeichert werden.

Browser Kompatibilität

Das Format nützt einem nur etwas, wenn es von den Browsern auch unterstützt wird. Die Kompatibilität kann auf dieser Webseite überprüft werden: https://caniuse.com/ (opens in a new tab)

Audio

Samplerate

Die Samplerate bestimmt, in welchen Abständen ein Pegelausschlag aufgezeichnet werden kann. Je höher dieser Wert ist, desto genauer kann ein Sound aufgenommen werden.

Auflösung

Die Auflösung gibt an, wie viel Speicher für einen Pegelausschlag verwendet werden kann. Je mehr Speicher zur Verfügung steht, desto grösser ist die Spannbreite, über welches sich ein Signal verteilen kann.

Fazit

Meine persönliche Wahl für gewöhnliche Bilder fällt meist auf PNG. Wie schon beschreiben, kommt dies aber sehr auf das Szenario an.
Im Audiobereich bin ich von MP3 und WAV überzeugt. Dies sind die gängigen Formate, welche auch äusserst kompatibel sind. WAV benötigt etwas mehr Speicher, bietet aber eine bessere Soundqualität.

Tipp für Entwickler

Es gibt einen Dienst, auf welchem man seine Bilder hochladen kann. Dieser heisst Cloudinary: https://cloudinary.com/ (opens in a new tab)

Wenn ein Bild dann auf einer Webseite benötigt, sendet man einen Request. Der Dienst erkennt den Browser und liefert das Bild im geeignetsten Dateiformat.
Zudem kann die gewünschte Auflösung des Bildes mitgeben werden. So kann man in kleineren Viewports auch kleinere Bilder darstellen und somit die Performance verbessern.

Der Nachteil dabei ist, dass man von Claudinary abhängig ist. Zudem kostet ein Request Zeit.

Schutzrechte

Schutzrechte geben dem Inhaber Rechte. Dieser kann Dritte von der wirtschaftlichen Nutzung ausschliessen. Dadurch werden Innovationen erst zu einem handelbaren Gut.

• Rechte laufen nach einer Schutzdauer ab
• Rechte sind nur in einem bestimmten Land gültig
• Nur die wirtschaftliche Nutzung ist geschützt (in der Regel)

Es gibt verschiedene Arten von Schutzrechten. Diese werden basierend auf der Innovation gewählt.

Urheberrecht

Damit etwas durch das Urheberrecht geschützt ist, muss es drei Kriterien erfüllen:

1. Geistige Schöpfung
2. Literatur und Kunst
3. Individueller Charakter

Da Software unter die Kategorie Urheberrecht fällt, gehe ich hier genauer darauf ein.

Teile des Urheberrechts

Das Urheberrecht lässt sich in zwei Teile unterteilen.

Urheberpersönlichkeitsrechte

Diese Rechte gehören immer dem Schaffer.

• Veröffentlichungsrecht
• Recht auf Anerkennung
• Recht Entstellungen zu verbieten

Nutzungs- und Verwertungsrechte

Diese Rechte gehören ebenfalls dem Schaffer. Dieser kann sie aber vergeben oder verkaufen.

• Vervielfältigungsrecht
• Verbreitungsrecht
• Recht des Zugänglichmachens
• Aufführungs- und Vorführungsrecht
• Bearbeitungsrecht

Alternative Formen

Durch das Urheberrecht wird die Verwendung eines Werkes sehr stark eingeschränkt.
Manchmal will man ein Werk aber zur Verfügung stellen. Aus diesem Grund gibt es alternative Formen zum Urheberrecht.

Creative Commons

Mit Creative Commons kann man sein Werk der Welt zur Verfügung stellen und die Verwendung trotzdem in gewissen Punkten einschränken. Eine Creative Commons Lizenz kann man auf der folgenden Webseite erlangen: https://creativecommons.org/choose/ (opens in a new tab)

Hierzu muss man links ein paar wenige Fragen beantworten. Auf der rechten Seite sieht man dann direkt die generierte Lizenz.

Dieser Prozess ist kostenlos. Die Lizenz kann danach offiziell verwendet werden. Um die Lizenz anzufügen, kann man beispielsweise das HTML Markup kopieren und danach auf seiner Webseite einfügen.

<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
    <img
        alt="Creative Commons Lizenzvertrag"
        style="border-width:0"
        src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png"
    />
</a>
<br />
Dieses Werk ist lizenziert unter einer
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
    Creative Commons Namensnennung - Nicht kommerziell - Keine Bearbeitungen 4.0
    International Lizenz
</a>
.

OpenSource

OpenSource bedeutet, dass andere Personen den Sourcecode anschauen, studieren und auch ändern dürfen. Meistens ist das Ziel, dass so eine Community eine Software weiterentwickeln kann.

Copyleft

Bei einem OpenSource Projekt darf, wie schon beschrieben, der gesamte Code kopiert werden. Nun könnte eine Firma diesen Code verwenden und damit ein kostenpflichtiges Produkt erstellen und vermarkten. Copyleft untersagt genau dies. Copyleft Werke dürfen kopiert und modifiziert werden. Jedoch müssen alle daraus entstehenden Methoden ebenfalls an die OpenSource Community zurückgegeben werden.

Git Repository lizenzieren

Im Unterricht haben wir uns nicht mit dem Thema befasst, wie man ein Git Repository lizenziert. Ich finde dies aber noch ein wichtiges Thema. Aus diesem Grund schaute ich nach, wie da die typische Vorgehensweise ist.

Auch Projekte in einem Git Repository werden selbstverständlich durch das Urheberrecht geschützt. Befindet sich also keine Lizenz in einem Projekt, so darf niemand den Code verwenden.
Will man mehr Rechte abgeben, so kann man dies mithilfe einer Lizenz tun. An diese gelangt man zum Beispiel über die folgende Seite: https://choosealicense.com/ (opens in a new tab)

Nun wählt man die passende Lizenz aus.

Man sieht direkt, welche Permissions, Conditions und Limitations mit der Lizenz verbunden sind.

Ist man zufrieden mit der Lizenz, so kopiert man den Text und fügt diesen im Root des Projektes ein. Am besten macht man dies in einem LICENSE.txt, LICENSE.md oder LICENSE.rst File.

Bildkompositionen

Format

ls Erstes muss man sich entscheiden, in welchem Format man einen Moment festhalten will. Man unterscheidet zwischen Hoch- und Querformat. (Portrait und Landscape im Englischen)
Die Wahl des Formates ist abhängig vom Motiv und der Stimmung, die man vermitteln will. Portraits werden im Hochformat aufgenommen. Landschaften werden meist im Querformat fotografiert.

Goldener Schnitt

Quelle: https://www.toushenne.de/files/robertweller/img/2018/goldene-spirale.png (opens in a new tab)

Der Goldene Schnitt ist eine Regel. Sie beschreibt das Teilungsverhältnis einer Strecke. Der Mensch nimmt dieses Verhältnis als harmonisch wahr.
Man findet den Goldenen Schnitt in der Natur, Kunst, Architektur und im Design.

Drittel Regel

In der Fotografie ist es nicht möglich, das Motiv perfekt im Goldenen Schnitt zu fotografieren. Deshalb entstand diese Regel. Um sie anzuwenden, teilt man ein Bild in neun Felder. Bei Kameras und Handys gibt es fast immer die Option, dieses Raster einzublenden. Die Regel besagt, dass sich das Motiv auf der rechten vertikalen Linie befinden sollte. Im besten Fall liegt der wichtigste Punkt auf dem Schnittpunkt oben rechts.

Quelle: https://www.designerinaction.de/wp-content/uploads/2019/08/drittel-regel-fotografie.jpg (opens in a new tab)

Horizontal

Bei Fotos mit einem Horizont gibt es drei grundlegende Möglichkeiten, um eine Stimmung zu vermitteln.

Ein tiefer Horizont symbolisiert Freiheit und wird oft eingesetzt, wenn entweder ein schöner Horizont oder ein etwas langweiligerer Grund sichtbar ist.
Bei einem hohen Horizont kann man die vielen Details des Bodens darstellen.
Eher seltener setzt man den Horizont in die Bildmitte. Wenn man aber einen Spiegeleffekt (mit Wasser) erreichen will, kann diese Methode seinen Zweck erfüllen.

Kamera Einstellungen

Wir haben in diesem Modul noch keine Fotos geschossen. Jedoch setzten wir uns bereits mit den grundlegenden Kameraeinstellungen auseinander.

Blende

Je kleiner die Blendenöffnung ist, desto schärfer wird der Hintergrund des Bildes. Jedoch wird das Bild auch dunkler.

Belichtungszeit

Wenn man eine kürzere Belichtungszeit wählt, so kann man mehr Bewegungen festhalten. Jedoch führt auch dies zu einem dunkleren Bild.

ISO

Den ISO Wert sollte man normalerweise auf einer niedrigen Empfindlichkeit lassen.
Wenn das Bild zu dunkel ist, kann man diesen Wert hochstellen. Jedoch wird ein Bild so etwas körnig.

Helligkeit

Die, meiner Meinung nach, grösste Schwierigkeit ist, die Helligkeit des Bildes zu regulieren. Man muss immer den perfekten Kompromiss finden.

Beispiel:
Ein Sportfotograf besucht ein Fussballspiel und will ein paar Bilder schiessen. Da die Spieler oft in Bewegung sind, muss er eine kürzere Belichtungszeit wählen. So kann er die Bewegungen festhalten. Das Problem ist aber, dass das Bild etwas dunkel wird. Nun kann er zum Beispiel eine grössere Blendenöffnung wählen. Damit wird das Bild wieder heller. Dafür ist der Hintergrund verschwommen.
Er könnte sich auch für eine mittlere Blende entscheiden und das Bild mit einer grösseren ISO Empfindlichkeit erhellen. So ist das Bild aber unter Umständen zu körnig.

Um den Umgang mit diesen Werten zu üben, empfehle ich folgende Webseite: http://canonoutsideofauto.ca/play/

Fazit

Bisher gefällt mir dieses Modul sehr. Es zeigt uns Informatikern auch auf, mit welchen Tools und Dateiformaten die Designer arbeiten.
In den nächsten Wochen widmen wir uns den Logos, Videos und auch responsiveness. Auch da bin ich gespannt, was ich noch lernen kann.

Ich finde dieses Modul verschafft einem einen guten Einblick in wichtige Themen. Ich bin nur etwas erstaunt, dass dieses Fach erst im vierten Lehrjahr unterrichtet wird.