Das Team der Mediencommunity wünscht allen Azubis viel Erfolg bei der Zwischenprüfung 2024!
Erneut unterstützt die Mediencommunity die Prüfungsvorbereitungen für Mediengestalter/innen und Medientechnologen/innen Druck in Vorbereitung auf die Zwischenprüfung am 13.03.2024.
Mit unserem Prüfungsvorbereitungswiki können sich Auszubildende auf ihre Prüfungen vorbereiten. Hierzu wählen die Moderatoren passende Beiträge zu den Themengebieten aus.
Die Moderatoren sind in keiner Weise an der Erstellung der Prüfungsaufgaben beteiligt gewesen. Daher können sie auch keine Informationen zu konkreten Prüfungsaufgaben geben.
Die Mediencommunity kann keine Gewähr dafür bieten, dass die Angaben im Wiki immer fehlerfrei sind. Die Moderatoren werden sich bemühen, die Beiträge kontinuierlich auf ihre sachliche Richtigkeit hin zu überprüfen. Daher sind alle Nutzer/innen aufgefordert, alle Beiträge kritisch zu hinterfragen und zusätzlich auch andere Quellen (z. B. Fachliteratur) zu nutzen.
Auszubildende sind in erster Linie selbst für ihre Prüfungsvorbereitung verantwortlich - auch dieses Wiki nimmt Ihnen diese Arbeit nicht ab.
Ab der Abschlussprüfung Winter 2023/2024 können wir aus technischen Gründen keine Lerngruppe in der Mediencommunity anbieten. Unabhängig von uns werden aber Lerngruppen auf Discord angeboten.
Inhaltliche Rückmeldungen oder Fragen können geschickt werden an: info@mediencommunity.de.
Allgemein
- wichtiges Instrument in der Personalabteilung
- dient als Grundlage von Daten von Mitarbeitern
- enthält alle Aufgaben und Kompetenzen des Mitarbeiters
- zusammenarbeit und Abgrenzung mit anderen Abteilungen werden beschrieben
Einsatzbereiche: Arbeitszeugnis, Recruiting, Einarbeitung, Umstrukturierung im Betrieb
Was gehört zu einer guten Stellenbeschreibung?
- Bezeichnung der Stelle und Funktion der Stelle innerhalb des Unternehmens
- Bezeichnung des Teams oder der Abteilung
- Vorgesetzter und Stellvertreter
- Direkt unterstellte Mitarbeiter
- Ziel der Stelle
- Kern und Hauptaufgaben
- Nebenaufgaben
- Führungsaufgaben
- Kompetenzen, Befugnisse, und Pflichten
- Zusammenarbeit mit internen und externen Stellen
- Mitwirkung bei Projekten, Mitarbeit bei Gremien
- Fort- und Weiterbildung
Vorteile
- schaffen Transparenz
- verbessern die Organisationsstrukturen
- erleichtern die Beurteilung der Mitarbeiter
- helfen bei der Stellenbesetzung
- Steigerung der Motivation und Zufriedenheit
- sorgen für klare Regeln bei Urlaub und Krankheitsfällen
- helfen neue Mitarbeiter einzuarbeiten
Nachteile
- die Einführung von Stellenbeschreibung sind aufwendig und Zeit intensiv
- regelmäßige Überprüfung und Aktualisierung sind Zeitaufwendig
- der feste Rahmen wird als hinderlich angesehen
- wenn sich der Markt ändert verändern sich dementsprechend die Aufgaben aller
Mitarbeiter
- Ziele können schlecht erfasst werden
- Mitarbeiter können sich auf die Beschreibung zurückziehen und handeln nicht
Initiativ
Farbwirkung
Bei der Farbwirkung kann man symbolische, psychologische und historische Farbwirkung unterscheiden.
Am Beispiel von Rot:
symbolische Farbwirkung = Liebe
psychologische Fabwirkung = Wärme
historische Farbwirkung = Sozialismus/Kommunismus
Zusammenfassung zur Farbgestaltung vom schweizer Grafiker Josef Müller-Brockmann:
„Die Farbe in der Werbung
Farbe, sinnvoll angewandt, kann die Werbeabsicht entscheidend unterstützen. Wir brauchen Farbe
a) als stimmungsfördernden Faktor (Verkehrswerbung, Mode usw.)
b) für die naturnahe Wiedergabe von Produkten (Lebensmittel, chemische Produkte usw.) und Erzeugnissen (Möbel, Textilien, Kunststoffe usw.)
c) als Symbolträger in der Technik (für die Propagierung von Ideen usw.)
d) als Gestaltungselement zur Unterstützung der verbindenden Wirkung in einer einheitlich geplanten Werbung
e) als organisatorische Hilfe (z.B. in vielschichtigen Betrieben als Kennzeichnung der einzelnen Abteilungen)
Bei jeder Planung verlangt die Anwendung der Farbe folgende Überlegungen: die Wirkung auf den Betrachter, die Anwendbarkeit bei den verschiedensten Werbeträgern und die technischen Möglichkeiten ihrer Vervielfältigung.
Mit Farbe, die sparsam, aber methodisch und konsequent angewandt wird, kann man die überzeugendere Wirkung erzielen als mit einer Kombination von vielen verschiedenen Farben. Wenn Farbe verwendet wird, soll sie deutlich sichtbar sein und den Grund für ihre Anwendung klar erkennen lassen.“
Quelle: J. Müller-Brockmann: Gestaltungsprobleme des Grafikers, Verlag Arthur Niggli AG,
Weiterführende Links:
Bei der Farbwirkung kann man symbolische, psychologische und historische Farbwirkung unterscheiden.
Am Beispiel von Rot:
1 .Farbwirkung und Farbassoziationen
BLAU
Durch den Nah-Fern-Kontrast wirkt blau immer für Weite, Ferne bis Unendlichkeit. In der
Natur entsteht dies dadurch, dass Farben von den Luftschichten in der Ferne überlagert
werden und so trübe und bläulich wirken. Blau steht dann auch für Tiefe, Größe, weite.
Und analog zum Warm-Kalt-Kontrast ist Blau auch die Farbe für die Kälte.
Blau steht für Treue, Vertrauen und Zuverlässigkeit. Dies resultiert aus dem psychologischen
Wirkung der Ferne, da Treue ja erst dann zum Zuge kommt man sich in der ferne befindet.
Aber auch gleichzeitig für die Sehnsucht nach der Ferne. Aus der Wirkung von Blau für Kälte resultiert daraus im gesellschaftlichen Bereich die Bedeutung für Gefühllosigkeit, Stolz und Härte.
Wie auch die anderen Farben hat die Farbe Blau je nach Zusammenhang mehrere Wirkungen.
GRÜN
ROT
Zusammenfassung zur Farbgestaltung vom schweizer Grafiker Josef Müller-Brockmann:
„Die Farbe in der Werbung
Farbe, sinnvoll angewandt, kann die Werbeabsicht entscheidend unterstützen. Wir brauchen Farbe
a) als stimmungsfördernden Faktor (Verkehrswerbung, Mode usw.)
b) für die naturnahe Wiedergabe von Produkten (Lebensmittel, chemische Produkte usw.) und Erzeugnissen (Möbel, Textilien, Kunststoffe usw.)
c) als Symbolträger in der Technik (für die Propagierung von Ideen usw.)
d) als Gestaltungselement zur Unterstützung der verbindenden Wirkung in einer einheitlich geplanten Werbung
e) als organisatorische Hilfe (z.B. in vielschichtigen Betrieben als Kennzeichnung der einzelnen Abteilungen)
Bei jeder Planung verlangt die Anwendung der Farbe folgende Überlegungen: die Wirkung auf den Betrachter, die Anwendbarkeit bei den verschiedensten Werbeträgern und die technischen Möglichkeiten ihrer Vervielfältigung.
Mit Farbe, die sparsam, aber methodisch und konsequent angewandt wird, kann man die überzeugendere Wirkung erzielen als mit einer Kombination von vielen verschiedenen Farben. Wenn Farbe verwendet wird, soll sie deutlich sichtbar sein und den Grund für ihre Anwendung klar erkennen lassen.“
Quelle: J. Müller-Brockmann: Gestaltungsprobleme des Grafikers, Verlag Arthur Niggli AG,
Weiterführende Links:
Wenn in der Mediencommunity bereits bei vorherigen Prüfungen Wikiseiten zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Infos zu Lerngruppen außerhalb der Mediencommunity gibt es hier: https://mediencommunity.de/lerngruppen-auf-discord Fragen und Hinweise können geschickt werden an: info@mediencommunity.de
Inhalte in der Mediencommunity unter:
https://mediencommunity.de/content/522-falzarten-2
festgelegte Adresse, an die Hardware gebunden
kann nicht verändert werden
ermöglicht die grundlegenste Kommunikation zwischen Geräten innerhalb des LAN ohne Router
IP-Adressen werden lokal vom Router vergeben (über DHCP oder manuell vom Admin).
Im Internet wird dem Internetanschluss vom Internet-Service-Provider (ISP) eine IP-Adresse vergeben. Der Router ist dabei die “Brücke” zwischen der vom ISP vergebenen IP-Adresse und den lokalen Adressen des Netzwerks.
Jedes Gerät (Client) erhält eine Adresse, damit es innerhalb eines Netzwerks identifiziert und angesprochen werden kann.
Max. 32 Bit (4 Blöcke á 8 Bit)
172.16.x.x → Netz-ID, sozusagen die “Vorwahl” des Netzes
x.x.36.125 → Host-ID, Adresse der Clients
Die mögliche Anzahl der Clients ist begrenzt, je nachdem wie viele Blöcke der IP-Adresse Netz-ID sind und wie viele veränderbare Host-ID. Dies erkennt man über die Subnetzmaske.
255.255.0.0 → Eine 255 zeigt an, dass es sich um die Netz-ID handelt
255.255.0.0 → 0 signalisiert den Bereich der Host-ID
Ein Block der IP-Adresse kann maximal 8 Bit (0-255) haben. Die möglichen Clients sind also begrenzt. Zusätzlich verboten für Clients sind die Adressen .0 (IP-Adresse des Netzes) und .255 (sog. Broadcast-ID, über diese können alle Clients gleichzeitig angesprochen werden). Es bleiben also 254 mögliche Adressen pro Block. In unserem Beispiel 2 Blöcke der Host-ID
→ 16 Bit = 2^16 = 65.536 mögliche Adressen.
Hypertext transfer protocol, dient der Übertragung von HTML (Hypertext Markup Language). Der Zusatz “s” (https) steht für “secure” und bedeutet, dass die Verbindung zwischen Client und Server verschlüsselt ist.
File transfer protocol, dient der Übertragung von Dateien auf Server (bspw. um eine Website hochzuladen oder große Daten zu übertragen). Kann sowohl über den Browser als auch über spezielle FTP-Programme verwendet werden.
CSS (cascading style sheets) ermöglicht das Formatieren von HTML/XML Tags und ist somit also für das Design einer Website verantwortlich. Größter Vorteil ist natürlich das strikte Trennen von Inhalt und Layout/Design (.html und .css). Das ermöglicht schnelles (und vor allem einheitliches) Ändern von Formatierungen.
Weitere Vorteile sind zum Beispiel:
1.Datenreduzierung (<h1> muss nur einmal formatiert werden und nicht in jedem HTML-Dokument)
2.Ermöglicht eine bessere Übersicht in den Dokumenten (Jeder der schon einmal einen Newsletter gemacht hat (dort wird das CSS nicht ausgelagert) weiß was ich meine).
3.Einbinden mehrerer CSS-Dateien (media, print, style-switcher, …)
Schreibweise
Selektor {Eigenschaft: Wert;}
h1 {font-size:18px;}
Die Überschrift h1 soll 18 Pixel groß sein.
Das kann auch kompliziert werden.
body#home .content_hide_all > h1:hover,
body#webdesign .content_hide_all > h1:hover {cursor: help;}
Wir lesen den Selektor von hinten:
Wenn ein h1 Element mit der Maus überstrichen (:hover) wird und es sich nur in der Verschachtelungsebene (>) (hier wird also die Vererbung eingeschränkt) von der Klasse content_hide_all befindet und auf der Seite mit der ID (Individualformat) vom Body home oder webdesign ist, dann ist der Mauszeiger ein Fragezeichen.
Ziel einer solchen langen Anweisung ist es, das HTML-Markup so simpel und kurz zu halten wie es möglich ist.
Einbinden von CSS in das HTML:
1.im <head> als <style type=“text/css“>Hier kommt das CSS rein!</style> (wird beim Newsletter gemacht)
2.im <head> als Link <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> (das CSS wird hier ausgelagert)
3.als inline-style <li style="display:block">Text</li> (wird beim Newsletter gemacht)
4.als Import innerhalb einer CSS-Datei: @import url(screen/fancy/jquery.fancybox-1.3.1.css);
Links zu CSS:
Quizsammlung zum Thema CSS http://www.thestyleworks.de/quiz/index.shtml
Hier könnt ihr eure Notizen, Sammlungen von hilfreichen Links etc. zum Thema sammeln. Einige Beiträge gibt es bereits aus vorhergehenden Prüfungsvorbereitungen.
Weiterführende Links
Weiterführende Links:
http://little-boxes.de/lb1/7.2-das-box-modell-in-der-uebersicht.html
Selektoren innerhalb einer CSS-Datei sprechen HTML-Tags an und weisen diesen Attribute (Farbe, Hintergrundfarbe, Textformatierung uswusf.) zu und geben dazu die entsprechenden Werte an.
Die Syntax (Schreibweise) einer CSS-Regel ist wie folgt:
Selektor { Attribut: Wert; }
wobei man jedem Selektor auch mehrere Attribute zuweisen kann. Will man dies denn nun tun, so trennt man die einzelnen Attribute immer mit einem Semikolon voneinander ab.
Bsp.: Selektor { Attribut, Wert; Attribut: Wert; Attribut: Wert; … }
Wie man ihn auch aus den SQL-Befehlen kennt, das *. Mit dem Sternchen (Asterisk) spricht man alle Elemente einer HTML-Datei an, das heißt, dass allen Elementen die Attribute zugewiesen werden, die man in so einer CSS-Regel notiert.
Bsp.: * { color: #fff; background-color: #000; }
Mit dieser CSS-Regel wird allen Elementen weiße Schriftfarbe und schwarze Hintergrundfarbe zugewiesen. Sinn macht das sicherlich keinen, es dient lediglich dem Zweck.
Will ich nun genauer vorgehen und nur bestimmte Elemente meiner HTML-Datei ansprechen, so kann ich dies indem ich zum Beispiel nur einer bestimmten Sorte von Tags Attribute zuweise. Das ist einfacher als einem Kind nen Lolli zu klauen, glaubt es mir:
Bsp.: h1 { color: #f00; font-size: 36px; font-weight: bold; }
So, damit haben wir jeder Überschrift höchster Ordnung (jedem Tag h1) die Werte "rote Farbe", "Schriftgröße 36 Pixel" und "Schriftschnitt fett" zugewiesen.
Jetzt wird es langsam spannender. Wir wollen jetzt eine Klasse definieren. Klassenselektoren kann man beliebig vielen Tags auf einer HTML-Seite zuweisen. Nehmen wir an, wir haben Überschriften zweiter Ordnung (h2) einmal in der linken Spalte einer Webseite auf weißem Hintergrund und einmal in der rechten Spalte auf schwarzem Hintergrund. Dumme Geschichte, denn wir haben ja vorher notiert:
h2 { color: #000; }
wodurch alle Überschriften der zweiten Ordnung nun schwarz sind und somit rechts nicht mehr lesbar.
Das Problem lösen wir einfach indem wir allen h2-Tags auf der rechten Seite folgenden Zusatz geben:
<h2 class="name">Überschrift</h2>
Jetzt können wir diese Überschriften gesondert ansprechen mit einem Klassenselektor:
.name { color: #fff; }
Die Notierung ist also ein Punkt und der Name, den man dem Tag als Wert zuweist. Der Name ist hierbei frei wählbar. Ob man also sinnvoll ausschreibt "rechts" bei unserem Beispiel oder "name" wie ich oder sowas schönes wie "mistmistmist" bleibt euch überlassen. Wichtig ist folgende Schreibweise:
.klassenname { Attribut: Wert; }
Wie der Klassenselektor kann man auch mit dem ID-Selektor einzelne Tags verändern, auch wenn man diese vorher schon mit einem Tag-Selektor verändert hat. Man sollte nur in das Tag des Elements das Attribut id notieren und sich wieder einen lustigen Namen einfallen lassen.
<h2 id="name">Noch eine Überschrift</h2>
Unterschiede zum Klassenselektor gibt es allerdings nicht nur in der Schreibweise! Oh ja, denn eine ID vergibt man nur ein einziges Mal in einer HTML-Datei. Wie auch in Datenbanken werden IDs nur einmal vergeben und damit hat sichs.
Merke: Klassen so oft man lustig ist, IDs nur ein einziges Mal vergeben.
Wie notiert man ID Selektoren nun in einer CSS-Datei? Ganz einfach:
#idname { Attribut: Wert; }
Also eine Raute mit dem ID-Namen, geschwungene Klammer und so weiter und so fort wie bisher.
Hier sind wir dann am Ende mit dem oberflächlichen Selektorengedönse angelangt. Ich werde auf Wunsch gerne noch erklären was Attributselektoren sind, wie man Kindselektoren notiert, welche Sonderzeichen es noch gibt neben Raute und Punkt und was diese dann so bewirken und was Pseudoselektoren sind (Letztere sind übrigens m.E. nicht zu verachten und sicherlich Prüfungsrelevant, bzw. kann ich mir nicht vorstellen, dass man die weglässt. Aber das weiß ja nur die zfa -__- ).
Wer da den Namen gewählt hat weiß ich nicht, aber er klingt sehr seltsam beim ersten Mal. Ein Pseudoselektor wird hinter einem Selektor angefügt und beschreibt bestimmte Zustände des Elements, welches man mit dem Selektor angesprochen hat.
Zum Beispiel haben Links vier verschiedene Zustände. Da wäre der "Normalzustand", wo der liebe Link einsam und allein auf der Website rumhängt und keiner mit ihm interagiert. Dies wäre der :link Zustand. Will man also diesem Zustand eines Links Eigenschaften zuweisen, macht man das so:
a:link { Attribut: Wert; }
Dann hätten wir noch die Links, welche schonmal besucht wurden. Sprich sie wurden bereits einmal vom Benutzer der Seite angeklickt und wechseln somit in den benutzten Zustand (klingt etwas schmutzig).
a:visited { Attribut: Wert; }
Der dritte Zustand ist der beliebte "Mouseover-Effekt" oder "Rollover-Effekt". Früher hat man sowas mit Javascript gelöst, heute geht das mit CSS viel einfacher:
a:hover { Attribut: Wert; }
Hierzu muss man sagen, dass es noch den zusätzlichen Zustand a:focus gibt, der für Barrierefreiheit und Menschen, die mit der Tastatur navigieren gedacht ist. Sprich, a:hover ist für Mausinteraktion und a:focus ist für Tastaturinteraktion (ganz grob formuliert).
a:focus { Attribut: Wert; }
Der vierte Zustand ist der aktive Zustand eines Links. Das wäre dann der Moment in dem der User ihn anklickt und direkt mit dem Link interagiert. Auch für diesen Zustand kann man Eigenschaften dem Link zuweisen, was über folgende CSS-Regel passiert:
a:active { Attribut: Wert; }
WICHTIG! Wenn man alle vier Zustände in einer CSS-Datei beschreibt, dann muss dies auch genau in der Reihenfolge passieren, die ich soeben verwendet habe. Warum das so ist? Wegen der Vererbung von Eigenschaften; Und glaubt mir, da wollt ihr nicht, dass ich zu detailiert werde, es ist einfach wichtig, dass die Reihenfolge eingehalten wird:
a:link, a:visited, a:hover, a:focus, a:active { Attribut: Wert; }
Wie ihr oben seht, habe ich die verschiedenen Selektoren durch Kommas getrennt und dann allen { Attribut: Wert; } zugewiesen und ja, das funktioniert auch. Zum Beispiel kann es ja sein, dass ich nicht will, dass all meine Überschriften fett geschrieben werden. Ich hab ne h1, ne h2 und ne h3 und alle drei sind se fett. Also notiere ich folgende CSS-Regeln:
h1 { font-weight: normal; } h2 { font-weight: normal; } h3 { font-weight: normal; }
Rischdisch? Ja, richtig, aber es geht viel einfacher mit einem "Kombiselektor":
h1, h2, h3 { font-weight: normal; }
Alle drei Überschriften sind nun nicht mehr fett, sondern normal ausgezeichnet und wir haben Platz, Zeit und Datenmenge bei der CSS-Datei gespart.
Gerade haben wir etwas über die kombinierten Selektoren gelernt, nun kommen wir zu den Kindselektoren. Wie der Name bereits sagt, geht es darum Kinder von Elementen anzusprechen mit einer CSS-Regel um genau diese Kinder zu stylen.
Warum? Weil es ja sein kann, dass man für die komplette Seite festgelegt hat, dass alle Links rot und fett sein sollen, da man rot + fett = super findet. Jetzt haben wir aber auch eine super Navigationsleiste, welche rot hinterlegt ist und somit sieht man unsere Superlinks darauf nicht.
Was tun? Wir sprechen die Links in der Navigation gesondert an, indem wir einen Kindselektor schreiben.
Bsp.: Vorausgesetzt wir haben einen Container (div) mit einer ID "nav" und haben darin die Navigation untergebracht in Form einer unsortierten Liste "ul", welche die Listenpunkte "li" enthält, welche wiederum die Links "a" enthalten, dann können wir diese Kindeskindeskindeskinder mit einer CSS-Regel direkt ansprechen:
#nav ul li > a:link { color: #000; }
Jetzt sind alle Links im Container "nav" mit der "ul" und den "li"s darin schwarz.
Ein einfacher Kindselektor wäre zum Beispiel:
body > p { Attribut: Wert; }
In diesem Fall stylen wir nicht den Body sondern alle Paragraphen, die Kindelemente des body-Tags sind. Andere Paragraphen auf der Seite, welche Kinder anderer Elemente sind, sind davon nicht betroffen! Klar soweit?
Wäre sinnvoll, ne. Gibts aber nicht. Es gibt keine CSS-Regel mit einem "kleiner als" Klämmerchen und deswegen gibts da auch nix zu wissen. Weitergehen, es gibt hier nichts zu sehen!
Ach, aber den gibts? Ja, den gibt es. Folgendes Beispiel macht das relativ eindeutig.
Bsp.:
<h2>Überschrift</h2> <p>Erster Paragraph</p> <p>Zweiter Paragraph</p>
Welch Dilemma, wir wollen nur den ersten Paragraphen verändern und den zweiten unberührt lassen. Wir machen wir das nun? Indem wir einen Nachbarselektor notieren:
h2 + p { Attribut: Wert; }
Damit sagen wir, dass nur Paragraphen, welche auf der gleichen Ebene wie das vorhergehende Element liegen angesprochen werden und diesem unmittelbar folgen.
Einen hab ich noch! Und der inrekte Nachbarselektor funktioniert ähnlich dem Vorhergehenden.
Der Unterschied ist, dass nicht nur der erste Nachbar eines Elements angesprochen wird, sondern alle nachfolgenden Elemente gleichen Typs, welche Nachbarn auf gleicher Ebene zu dem Element sind.
Bsp.: Da nehmen wir das Beispiel von oben mit der Überschrift und den beiden Paragraphen nochmal. Nur das wir diesmal ein anderes Sonderzeichen in die CSS-Regel reinschreiben.
h2 ~ p { Attribut: Wert; }
Damit sind nun alle Paragraphen, welche dem h2-Element folgen angesprochen.
Ja Himmel, hörts denn nicht bald auf? Nein, denn man kann Elemente eines HTML-Dokuments auch nach ihren Attributen ansprechen und umgestalten.
Wozu brauch ich das, wo ich doch IDs und Klassen und all die anderen Optionen habe? Dazu ziehen wir ein Beispiel zur Hand:
Wir haben eine Seite mit einem Formular für unsere Benutzer, mit dem sie uns mit ihren Adressdaten versorgen können, damit wir sie daheim besuchen und persönlich kennenlernen können. Wozu sonst benötigt man wohl Benutzerdaten? In diesem Formular haben wir Texteingabefelder für Vorname, Nachname und all die anderen Adressdaten, außerdem haben wir Checkboxen, wo sich unser Benutzer entscheiden kann, ob er vom Admin persönlich oder dem Designer der Seite besucht werden möchte. Schlussendlich dann natürlich noch den Absende-Button.
Jetzt findet der Designer die Standardoptik der Formularfelder und des Buttons endlangweilig. Ergo will er sie umgestalten. Das tut er über Attributselektoren. Jedes input-Feld hat sein persönliches Attribut. Zum Beispiel haben Absendebuttons immer das Attribut type="submit" und Texteingabefelder immer das Attribut type="text".
Man könnte natürlich hingehen und alle Inputfelder mit einem Typselektor ansprechen:
input { Attribut: Wert; }
aber viel mehr Sinn macht es doch, wenn wir die Textfelder vom Absendebutton trennen:
input[type="text"] { Attribut: Wert; } input[type="submit"] { Attribut: Wert; }
Natürlich kann man jedwedes Element eines HTML-Dokuments auf diese Weise ansprechen. Zum Beispiel über das title-Attribut oder das alt-Attribut oder was einem sonst so einfällt. Ein letztes Beispiel, welches aber nur ganz eventuell vielleicht Sinn machen könnte:
Wir haben Bilder auf der Seite, denn Bilder sind hübsch. Einige haben eine Weite von 300 Pixeln (300px) andere dagegen sind breiter (600px). Jetzt wollen wir aber nur den schmaleren Bildern eine Eigenschaft zuweisen und nicht allen Bildern. Ergo folgende CSS-Regel mit einem Attributselektor:
img[width="300px"] { Attribut: Wert; }
Natürlich sind dies Beispiele, die ich nun zur Hand genommen habe, weil sie Sinn machen, es gibt auch einen simplen, standard, normalo Attributselektor, womit man Elemente anspricht, die ein bestimmtes Attribut beinhalten unabhängig vom Wert desselben:
img[width] { Attribut: Wert; }
Somit sind alle Bilder einer Seite, welche das Attribut width im Element notiert haben, angesprochen. Wichtig sind hierbei die eckigen Klammern, welche das Attribut beinhalten.
Fehler bitte melden/korrigieren und Fehlendes ergänzen. =)
MÖGLICHE FRAGESTELLUNGEN AUS SICHT DES BETRACHTERS:
Jeder Aspekt wird interpretiert, um abschließend die Bildaussage deuten zu können.
Motiv
* Was ist abgebildet? Ist das Bild eventuell eine Kollage?
* Welcher Ausschnitt wurde gewählt? Liegt ein Objekt im Anschnitt?
* Hoch- oder Querformat? Panorama oder Quadrat? Weshalb?
Wie ist das Bild aufgebaut?
* Was befindet sich im Vordergrund, was im Mittel-, was im Hintergrund?
* Welche Elemente werden als zusammengehörig empfunden?
* Wie wird der Blick des Betrachters durch das Bild geführt?
* Existieren geometrische Grundelemente im Bild?
* Worauf liegt der Fokus? Gibt es einen Eyecatcher?
Welche Farbwirkung hat das Bild?
* Schwarz-Weiß, Duplex, kalte oder warme Farben? Welcher Farbschlüssel wurde gewählt?
* Gibt es starke Farbkontraste?
* Unterstützt die Farbwahl die kommunikative Wirkung des Motivs?
Räumlichkeit
* Welche Perspektive wurde gewählt und weshalb?
* Wie wird der Raum im Bild genutzt? Liegen die wichtigen Objekte im Goldenen Schnitt?
Licht und Schatten
* Welche Lichtquellen gibt es?
* Welche Elemente befinden sich im Licht/Schatten? Und auf welche Art: frontal, Streiflicht, seitlich, Gegenlicht?
Schärfe und Unschärfe
* Welche Kameraeinstellungen wurden gewählt und weshalb?
* Wurde ein Objekt durch Detailschärfe hervorgehoben oder wurde Bewegungsunschärfe erzeugt?
Typografie
* Falls Text im Bild oder dessen Umgebung vorhanden ist: Harmonieren Text und Bild? Passt die Typo zum Thema?
* Falls kein Text vorhanden ist: Wäre in dem Bild eventuell Platz für eine typografische Botschaft?
Wie wirkt das Zusammenspiel der abgebildeten Objekte zueinander? Liegt das visuelle Gewicht eher in einem harmonischen Gleichgewicht oder wird hier Dynamik erzeugt?
Welche Botschaft soll das Bild transportieren? Ist dies gestalterisch gelungen oder könnte man das Bild auch anders interpretieren? Was spricht für das Bild und was dagegen? Was könnte man gestalterisch besser machen?
GEOMETRISCHE GRUNDELEMENTE:
Quadrat: ausgeglichen, neutral, harmonisch, beruhigend, statisch, spannungslos
Querformat: stabil, panoramaartig
Hochformat: Größe, Stärke, übergeordnet, erhaben, beherrschend, eindrucksvoll, dynamisch
Dreieck: stabil, Blickfang, richtungsbestimmend
Kreis: leicht, aufgeschlossen, stabil, Ruhe, Harmonie, Unendlichkeit - durchbricht aber auch eckige Flächen als Eyecatcher
Linien: leitend, führend
waagerechte Linien: ruhig, stabil, dauerhaft, zuverlässig, Gleichgewicht
senkrechte Linien: stabil, spannungsvoll, Blickfang
aufsteigende Diagonale: (in Leserichtung) positiv, dynamisch
absteigende Diagonale: negativ, fallend
Visuelle Gewichtung: Rund ist leichter als eckig, senkrecht ist spannungsvoller als waagerecht, asymetrische Formen erzeugen Spannung.
Vertikale Anordnung: Oben wirkt leichter und spannungsvoller als unten.
Horizontale Anordnung: Links ist dynamisch und stabil, rechts kommt der Blick zum Ruhen.
GOLDENER SCHNITT UND RULE OF THIRDS
rote Linien - Goldener Schnitt (überlagert)
graue Linien - Rule of Thirds oder auch Neuner-Teilung
Zwei Strecken stehen im Verhältnis des Goldenen Schnitts, wenn das Verhältnis kurze Strecke Minor (a) zu langer Strecke Major (b) gleich ist mit dem Verhältnis lange Strecke (b) zu ganzer Strecke (c)
a : b = b : c bzw. a : b = b : (a + b) bzw. 1 : 1,618...
Das Teilungsverhältnis der Laméschen Zahlenreihe wird als besonders harmonisch empfunden: 3 : 5 : 8 : 13 usw.
PERSPEKTIVE
ALS RÄUMLICHE TIEFE:
Die Bildwirkung wird stark von der Perspektive beeinflusst. Ein Objekt, aus der Froschperspektive aufgenommen, kann bedrohlich wirken, das gleiche Objekt aus der Vogelperspektive wirkt klein.
Die Prinzipien der Zentralperspektive beruhen auf der perspektivischen Verkürzung: Alle ins Bild laufenden (Flucht-)Linien schneiden sich im so genannten Fluchtpunkt, der auf der Horizontlinie liegt. Dinge, die vom Betrachter weiter entfernt erscheinen sollen, sind kleiner dargestellt als Gegenstände im Vordergrund. Der so genannte Augenpunkt bestimmt den Blickwinkel des Betrachters.
Liegt der Augenpunkt hoch im Bild, erscheint es in der Vogelperspektive, liegt er sehr tief, sieht der Betrachter aus der Froschperspektive.
Liegt die Horizontlinie oben im Bild, handelt es sich um eine Vogelperspektive, ebenso, wenn der Fluchtpunkt unterhalb des Horizontes liegt.
Bei der Normalperspektive befindet sich das Motiv auf der Augenhöhe. Das Motiv wird in seiner natürlichen Wirkung abgebildet. Diese Perspektive eignet sich besonders, wenn Personen oder Gegenstände möglichst originalgetreu abgebildet werden sollen.Sie entspricht der natürlichen Wahrnehmung des Zuschauers.
Bei der Farbperspektive ändert sich der Farbverlauf, zum Beispiel nimmt die Farbkraft des Gesamtmotives ab, je weiter die Objekte entfernt sind. Sie basiert auf dem Kalt-Warm-Kontrast.
Als Luftperspektive (natürliche Unschärfe) bezeichnet man die bei fortschreitender Entfernung vom Betrachter auftretende Unschärfe der Dinge, als ob ein Dunstschleier die klare Sicht nehmen würde, bis hin zur Auflösung der Konturen.
Die Formperspektive stellt die räumliche Tiefe durch den Formvergleich dar, ähnliche Objekte eines Gesamtmotives werden zum Beispiel in der Ferne immer kleiner.
FARBASSOZIATIONEN:
Gelb: hell, sonnig, Licht, Sommer, Wärme, Reichtum, Neid, Geiz, sauer, Angeberei
Rot: Wärme, Glück, Freude, Energie, Liebe, Erotik, Sexualität, Blut, Hektik, Dynamik, Agressivität, Gefahr, Verbote, Krieg
Orange: Aroma, Erfrischung, Vitamine, Vergnügen, Wärme, Energie, im Buddhismus die Farbe der Vollkommenheit
Grün: Vegetation, Frühling, Leben, Jugend, Hoffnung, Zuversicht, Frische, Gesundheit, Sport, Erholung,
Toleranz, Gift, sauer,
kirchliche Sonntagsfarbe, Farbe des Islam
Blau: kalt, klar, seriös, treu, zuverlässig, männlich, selbständig, wissenschaftlich, modern, Tiefe, Vertrauen, Sympathie
Weiß: sauber, hell, klar, sachlich, neu, frisch, unschuldig, fromm, festlich, einsam, leer, klug, ehrlich, Hochzeit, Glaube, Anfang, Vollkommenheit, Ewigkeit, Sterilität, Neutralität, Leichtigkeit, Einfachheit,
Bescheidenheit, Wahrheit
Schwarz: edel, mächtig, sachlich, Ende, Leere, Traurigkeit, Tod, Trauer
Grau: abweisend, unsicher, kalt, gefühllos, gleichgültig, neutral, sachlich, stiller Schmerz, Vergessen
Cyan: kalt, frisch, sportlich, jung, winterlich, sachlich
Magenta: modern, kühl, kommunikativ
Violett: extravagant, unkonventionell, modisch, fromm, Macht, Glaube, Magie, Dekadenz, Künstlichkeit
kombiniert mit Rot: verboten, unmoralisch, Leidenschaft, Verführung
Richtung Lila: introvertiert, altmodisch
Rosa: Zärtlichkeit, Romantik, Charme, Harmonie, Schwärmerei, Träumerei, Freundlichkeit, Kindlichkeit, Naivität
Gold: edel, wertvoll, warm, eingebildet, Luxus, Ruhm
Silber: edel, wertig, kühl
Psychologische Wirkung
Persönliche Erfahrungswerte (positiv/negativ)
Beispiel: wärmende, gelbe Sonne
Symbolische Wirkung
Beispiel: Grün ist die Farbe der Hoffnung
Kulturelle Wirkung
Bei uns bedeutet Schwarz „Trauer“,
in Ägypten bedeutet es „Wieder-
geburt“
Politische Wirkung
Rot ist z.B. die Farbe der Linken in der Politik
Traditionelle Wirkung
Gift wird häufig als Grün empfunden, da grelles Grün damals auch aus dem
giftigen Arsen hergestellt wurde.
Kreative Wirkung
Ein rotes Herz steht für Liebe, ein grünes Herz erzeugt mehr Aufmerksamkeit.
FARBKONTRASTE:
Hell-Dunkel-Kontrast
Mit dem Hell-Dunkel-Kontrast ist die Helligkeit einer Farbe (Tonwert) gemeint. Wandelt man Farben in Graustufen um lässt sich der Hell-Dunkel-Kontrast gut erkennen.
Kalt-Warm-Kontrast
Der Kalt-Warm-Kontrast wird subjektiv und emotional wahrgenommen.In der Regel wird Blaugrün als die kälteste und Rotorange als die wärmste Farbe empfunden. Warme Farben rücken in den Vordergrund, kalte in den Hintergrund.
Komplementärkontrast
Komplementärfarben liegen sich auf dem Farbkreis gegenüber. Tendenz zum Flimmern.
Simultankontrast
Der Simultankontrast entsteht, wenn das Auge zu einer Farbe die jeweilige Komplementärfarbe verlangt. So scheinen an farbige Flächen angrenzende graue Flächen in der Komplementärfarbe gefärbt zu sein, was eine Kontraststeigerung zur Folge hat.
Sukzessivkontrast
Dieser Nachfolgekontrast erzeugt ein komplementäres Nachbild. Starrt man zum Beispiel lange auf eine violette Fläche und dann ruckartig auf eine weiße,
erscheint diese in der Komplementärfarbe
Gelb zu leuchten. Dieser Effekt tritt auch
bei Schwarz und Weiß auf.
Qualitätskontrast
Unter Farbqualität versteht man den Reinheits- oder Sättigungsgrad von Farben. Werden reine, gesättigte gegenüber getrübten Farben gestellt, sieht man einen Qualitätskontrast. Die Trübung der reinen Farben, also die Verminderung ihrer Intensität wird erreicht durch das Mischen mit: Schwarz, Weiß, Grau, oder der entsprechenden Komplementärfarbe.
Quantitätskontrast
Der Quantitätskontrast erfasst die Wirkung des Verhältnisses der Farbflächengrößen zueinander.
Buntkontrast und Unbuntkontrast
Beim Buntkontrast entsteht eine lebendige, laute, kraftvolle Wirkung, da drei oder mehrere reine Farben unmittelbar zusammentreffen. Ein stark ausgeprägter Buntkontrast ist bei Gelb-Magenta-Cyan vorhanden.
Der Unbuntkontrast ist eine Erweiterung des Buntkontrastes um Schwarz und Weiß. Seine besonders hohe Auffälligkeit wird in Signalen wie zum Beispiel Gefahrenschildern in schwarz-gelb genutzt. Er entsteht dadurch, dass auf der Netzhaut abwechselnd die beiden konträren Rezeptoren gereizt werden: die Zapfen (Buntempfänger) und die Stäbchen (s/w-Empfänger).
Sekundärfarben sind jene Farben, die im Farbkreis zwischen den zwei Primärfarben liegen. Sie entstehen durch Mischung beider Primärfarben und sind komplementär zu den nicht verwendeten Farben.
FOTOTECHNISCHE ASPEKTE:
Kameraeinstellungen:
Blende:
Je kleiner die Blendenöffnung, desto größer ist die Tiefenschärfe.
Blende 4 - kleine Blendenzahl - große Öffnung - viel Licht - geringe Tiefenschärfe
Blende 22 - große Blendenzahl - kleine Öffnung - wenig Licht - hohe Tiefenschärfe
Belichtungszeit:
Je länger die Belichtungszeit, desto mehr Bewegungsunschärfe.
1 Sekunde - lange Belichtungszeit - bewegungsunscharf - Schweifbildung
1/1000 - kurze Belichtungszeit - bewegungsscharf - Einfrieren
ISO:
Der ISO-Wert beschreibt die Lichtempfindlichkeit
ISO 100 - kleiner ISO-Wert - lichtunempfindlich - Außenaufnahmen im Sonnenlicht
ISO 800 - großer ISO-Wert - sehr lichtempfindlich - Kerzenschein
Je höher der ISO wert, desto mehr Rauschen!
Objektiv:
Es gibt verschiedene Objektive für unterschiedliche Brennweiten.
Je kürzer die Brennweite, desto größer ist die Tiefenschärfe.
Weitwinkel - kann einen größeren Blickwinkel oder Bildwinkel als das menschliche Auge erfassen
- hohe Tiefenschärfe, mögliche Vignettierung (Abdunkelung der Bildecken)
- Brennweite unter 40 mm
Normalobjektiv - ist mit dem Blickwinkel des Menschen gleichzusetzen
- Brennweite 50 - 60 mm
Teleobjektiv - vergrößert weit entfernte Objekte, holt sie näher heran
- geringe Tiefenschärfe, höhere Detailschärfe bzw. selektive Schärfe
- Brennweite bis 300 mm, Brennweite über 300 mm - Superteleobjektiv (Tierfotografie)
Makroobjektiv - großer Abbildungsmaßstab, wird zur Detailfotografie verwendet
- gleichmäßige Schärfe
Bildformat: Hochformat, Querformat, Panorama
Bildausschnitt und Perspektive: z.B. Totale (Gesamtansicht), Halbtotale (Figuren von Kopf bis Fuß), close-up (Großaufnahme / Portrait) - Zentral-, Vogel- oder Froschperspektive
Modus: Schwarz-Weiß oder Farbfoto
Durch die Verwendung spezieller Beleuchtung, z.B. bei Produktfotos (unter Verwendung einer Tageslichtlampe), können Fotografien zusätzlich beeinflusst werden. Durch die Verwendung von Schärfe bzw. Unschärfe kann der Eindruck von Bewegung entstehen,
so genannte Bewegungsunschärfe. Auch die Nachbearbeitung mit Effekten und Filtern oder Änderung des Farbmodus, sowie der Tiefen und Lichter ist möglich. Bei der Bildanalyse sollte man auch darauf achten, ob das Foto echt oder konstruiert ist, d.h. ob es sich um ein Composing (eine Collage aus mehreren Bildern) handelt.
BEISPIEL EINER KURZEN BILDANALYSE:
- Dreieck von links nach rechts - Aktionsrichtung der Bedrohung
- Fluchtpunkt, Horizont und Kinder liegen im Goldenen Schnitt - Fokus
- Bedrohung liegt im Vordergrund und im Zentrum des Majors - Kraft
- leichte Froschperspektive - Horizontlinie leicht erhöht - bedrohlich
- Person im Vordergrund anonymisiert durch Anschnitt
- Erster Eindruck: in die Ecke gedrängt
- beschreibende Adjektive: ängstlich, hilflos, schutzlos, ausgeliefert
Interpretation:
Der Fotograf stellt sich mit seiner Bildaussage auf die Seite der Kinder.
GRUNDSÄTZE ZUR ERWECKUNG VON AUFMERKSAMKEIT:
Intensität und Farbe:
Satte, reine, bunte und warme Farben fallen mehr auf als blasse, monochrome, kalte Farben oder Mischtöne.
Dissonanz:
Aus Erfahrungswerten wissen wir, wie etwas auszusehen hat. Wenn ein Bild nicht der Realität entspricht, erzeugt es Aufmerksamkeit, wie z.B. die Blue Man Group.
Biologische Signale:
In die Wiege gelegte Eyecatcher, die instinktiv unsere Blicke auf sich ziehen, wie Gesichter, Augen, Bewegung und sexuelle Reize.
Weiterführende Links
blog.seibert-media.net/2007/09/18/grundlagen-zur-analyse-von-fotografien-ueber-bildsprachen-und-deren-wirkung/
---------------------------------------------------------------------------------------------------------------------------------------
Zeichnungen: Everix
Quellen: ABC der Mediengestaltung, Sabine Butzhammer - Spickzettel, Prüfungswissen für Mediengestalter Digital und Print