Jens Käsbauer Mediengestaltung

Design, Marketing, Leidenschaft

Zwischenprüfung 2015 – Die Themen sind online

Anfang des Jahres geht es für die Auszubildenden im zweiten Jahr erfahrungsgemäß an die Zwischenprüfung. So natürlich auch in diesem Jahr. Im Gegensatz zu den Vorjahren scheint man sich nun hier wieder auf die klassischen Aufgabengebiete des Mediengestalters zu konzentrieren. Mich freut das sehr, denn ich finde, dass in den letzten Jahren der Bereich des klassischen Druckes und der Druckweiterverarbeitung ein wenig vernachlässigt wurde. Natürlich ist es wichtig, dass man am Puls der Zeit bleibt, aber die klassischen Kompetenzen sind und bleiben im täglichen Geschäft einfach wichtig.

(mehr …)

Viel Erfolg bei der Zwischenprüfung 2014

Heute ist es also soweit: Bundesweit müssen sich die Mediengestalter-Azubis heute ihrer Zwischenprüfung stellen. Die Zwischenprüfung dient in allen Ausbildungsberufen dazu, den Leistungsstand der Auszubildenden abzufragen und ihnen und den Ausbildern zu zeigen, wo noch Schwächen sind und woran man bis zur Abschlussprüfung noch arbeiten muss.

Nicht mehr verrückt machen lassen vor der Prüfung!

Genauso solltest Du heute auch an die Prüfung herangehen: Gerade bei den Mediengestalter hat das Ergebnis dieser Prüfung keinen Einfluss auf die Note der Abschlussprüfung. Also entspann Dich die letzten Stunden noch ein bisschen, trink einen Kaffee und mach Dich nicht mehr verrückt. Was jetzt nicht gelernt ist, wirst Du auch nicht mehr wirklich in Deinen Kopf bringen. So funktioniert das leider nicht, auch wenn es oft verlockend ist, sich manche Teile nochmal schnell anzusehen. Versuche lieber entspannt und ausgeglichen in die Prüfung zu gehen und dich nicht selbst verrückt zu machen.

Aber egal, ob Du Dir jetzt noch den Streß machst, Dir irgendwelche Arbeitsblätter anzusehen oder ganz entspannt in den Tag gehst, wünsche ich Dir alles Gute und viel Erfolg bei Deiner Prüfung! Über gute Noten freut man sich ja trotzdem, auch wenn sie nicht zur Abschlussnote gezählt werden. Rock die Prüfung und zeig allen, was Du drauf hast!

Wenn Du magst, dann freue ich mich drauf, nach der Prüfung von Dir in den Kommentaren zu lesen. Schreibe über Deine Prüfung, was fandest Du schwer? Was ist Dir leicht gefallen? Womit hast Du vielleicht auch gar nicht gerechnet? Ich bin neugierig und hoffe auf einige Nachrichten und Kommentare.

Zwischenprüfung 2014 – Die Themengebiete sind online

Ab heute beginnt für die Auszubildenden die kurz vor Ihrer Zwischenprüfung stehen die heisse Phase: Der zfa medien hat die Themenbereiche für die diesjährige Prüfung veröffentlicht. Auch hier ist wieder festzustellen wohin der Trend gehen wird. „Neue Technologien“ nehmen einen immer größeren Raum in der Ausbildung ein. Die klassischen Kernkompetenzen des Mediengestalters treten vermehrt in den Hintergrund.

Mehr Technik, wenig Design

Und so fassen sich die Themengebiete dann auch ein wenig nüchtern zusammen. Viel Spielraum, auf kreative Art und Weise zu zeigen, dass man die Techniken verstanden hat, wird es wohl bei auch in diesem Jahr wieder nicht geben:

Die Themengebiete der Zwischenpüfung 2014
1 Den Medienbetrieb und seine Produkte präsentieren:
Leistungsrechnung
2 Medienprodukte typografisch gestalten:
Satztechnik
3 Ausgabedateien druckverfahrensorientiert erstellen:
AM-Rasterung
4 Computerarbeitsplatz und Netzwerke nutzen, pflegen und konfigurieren:
Computersicherheit
5 Eine Website gestalten, erfassen und bearbeiten:
HTML5
6 Bilder gestalten, erfassen und bearbeiten:
Bild-Dateiformate und Metadaten
7 Daten für verschiedene Ausgabeprozesse aufbereiten:
Crossmediale Datenaufbereitung

Zwischenprüfung 2013 – Viel Erfolg!

Ich wünsche allen angehenden MediengestalterInnen, die heute durch ihre Zwischenprüfung müssen, von ganzem Herzen viel Erfolg. Entspanne dich nochmal und geh nicht verkrampft in die Prüfung – das bringt Dir auch nix. Du weist, was Du kannst, Du weist, was Du gelernt hast und deswegen solltest Du da rein gehen und die Prüfung rocken.

Test (student assessment)

Unabhängig davon hat die Prüfung für eure Abschlussprüfung keine Auswirkung. Also selbst wenn es diesmal nix wird, dann darfst Du den Kopf nicht hängen lassen, sondern musst weiter machen. Dann klappt’s auch mit der Abschlussprüfung!

Da es nach der Prüfung immer viel zu diskutieren gibt, welche Aufgabe Mist war und wo man welchen Fehler gemacht hat, möchte ich alle, die Interesse daran haben dazu einladen, gleich hier in den Kommentaren mitzudiskutieren. Und natürlich bin ich auch neugierig und gespannt darauf, welche Nettigkeiten sich die zfa wieder ausgedacht hat.

Ich freue mich auf jeden Fall auf Deine Kommentare und nun von ganzem Herzen: Viel Glück!

Zwischenprüfung 2013 – Thema 5: CSS3 Farbe

Schöne neue Farbenwelt! Seit den Anfängen des Internet plagen sich die (selbsternannten) Webdesigner damit ab, Ihre Webseiten auffällig, bunt und teilweise auch wirklich schön zu gestalten. Seit CSS3 gibt einem das W3C eine ganze Fülle an Möglichkeiten mit auf den Weg, genau diese Ziele zu erreichen. Diesmal nur eben ohne Bilder die man immer wieder wiederholen lassen musste um einen Farbverlauf im Hintergrund darstellen zu können. Jetzt reichen dafür wenige Zeilen Code aus. Für die Digitalmediengestalter sind die folgenden Informationen wahrscheinlich kalter Kaffee, die Printmediengestalter können sich aber hoffentlich noch die eine oder andere nützliche Information herausziehen.

Zuerst sollten wir uns aber ansehen, wie es früher war. Denn gerade in solchen Übergangszeiten von einer Technik zu einer anderen stellen die Prüfungsausschüsse gerne mal Fragen nach den Unterschieden, oder auch den Vorteilen der neuen Technik.

Als gegen Mitte bis Ende der 90er Jahre das Internet seinen Siegeszug begann, waren die Möglichkeiten von HTML noch recht begrenzt. Vollflächige Hintergrundfarben, ein bisschen Schriftfarbe und die Rahmenfarbe von Tabellenkästchen. Viel mehr war damals nicht geboten. Wollte man mehr, musste man sich mit Hintergrundbildern und den damit verbundenen Nachteilen zufrieden geben: Lange Ladezeiten, pixelige Bilder und viele Besucher, die die Seite entweder gar nicht zu Gesicht bekamen, oder nur in den seltensten Fällen so, wie es sich der Ersteller der Website ursprünglich gedacht hat. Vorallendingen waren die Websiten der damaligen Zeit katastrophal aufwändig zu warten.

Einfache Änderungen „mal schnell“ konnten schnell große Auswirkungen haben: Ein kleines bisschen zuviel gelöscht und das Layout ist zusammengebrochen, oder Schriftformatierungen zogen sich ins endlose durch, oder waren dann auch ganz weg. Natürlich wurden dafür Workarounds geschaffen: animierte GIF-Bildchen, Verläufe mit JavaScript, das damals auch noch jeder Browser anders interpretierte oder kleinste Hintergundbilder, die dann durch Wiederholung einen halbwegs gutaussehenden Hintergrund ergaben, sei es nun ein Verlauf gewesen, oder auch ein Muster.

Heute und spätestens seit CSS3 funktioniert das alles viel komfortabler und ressourcenschonender:

html { height:100%; }
body { background: -moz-linear-gradient(top, #900, #079); }

Dieser kleine CSS Ausdruck erstellt dir im Firefox schon mal einen ansehnlichen Verlauf. Doch was genau passiert hier? Das ist eigentlich ganz einfach: Zuerst gibt man dem Browser an, das man den ganzen Viewport verwenden möchte und dann gibt man dem Firefox die Anweisung n den Hintergrund einen Verlauf von dunkelrot nach blau zu zeichnen. Das Präfix -moz- gibt dabei an, das diese Anweisung explizit für den Firefox und alle Browser gilt, die Mozilla Browser-Engine verwenden. Doch dazu später mehr.

Das Thema für die Zwischenprüfung lautet bekannterweise ja CSS3-Farbe. welche Möglichkeiten hast Du nun also Farbe in CSS zu verwenden? Um Farbe für die Gestaltung einer Website verwenden zu können gibt es unterschiedliche Schreibweisen. Ganz früher verwendete man die HTML4- und SVG-Farbnamen.

HTML4- Farbnamen
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

 

SVG- Farbnamen
aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkgrey
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkslategrey
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dimgrey
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
grey
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgray
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightslategrey
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategray
slategrey
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen

 

So, wer jetzt noch nicht an Augenkrebs leidet, dem ist dann auch nicht mehr zu helfen. Aber mal Spaß beiseite. Ich habe diese Farbnamen in meinem Leben noch nicht benutzt. Mir ist das ganze zu aufwändig.Mir zu merken, wie braun sandybrown jetzt ist, oder was zum Geier ich mir unter peachpuff und papayawhip vorstellen soll hat für mich niemals Sinn gemacht. Ausserdem hat man bei der Verwendung dieser Farbnahmen schon mal ein Problem: Den Browser. Einige der Namen sind in jedem Browser nicht, oder zumindest nicht ordentlich implementiert und man konnte am Ende nur hoffen, das das herauskam, was man zeigen wollte. Gottseidank hat sich parallel dazu eine Möglichkeit zur Notation von Farben ergeben, die erstens wesentlich sinnvoller ist und zweitens auch viel mehr Möglichkeiten, genauer gesagt 16,7 Millionen Möglichkeiten bietet! Einziges Problem daran: Mann musste sich Farben gut Vorstellen können.

Die Notation von Farben mittels Hexadezimal-Code
Das Hexadezimal System ist eigentlich nichts anderes als unser bekanntes 10-stelliges Zahlensystem, nur mit eben 16 Zahlen bestehend aus den Zahlen 0-9 und den Buchstaben A-F. Wer sich mehr für Zahlensysteme interessiert findet am Ende des Artikels einige Links zu den gängigsten Zahlensystemen. Wie kann ich nun Farbe Hexadezimal darstellen? Das ist eigentlich ganz einfach. Ausgehend vom RGB Farbsystem habe ich zur Darstellung eines Farbigen Pixels auf dem Bildschirm drei Angaben zu machen: Den Wert für den roten Farbkanal, den Wert für den grünen Farbkanal und den Wert für den blauben Farbkanal. Tada! Schon haben wir unsere Farbe gemischt. Ok – Noch nicht ganz: In der Berufsschule bekommt man beim RGB-Farbraum ja Werte zwischen 0 und 255 für die einzelnen Farbkanäle beigebracht. Wobei 0 = Schwarz, oder besser aus ist und 255 der Kanal in seiner vollen Pracht. Wenn man alle Kanäle zusammen nimmt  bekommt man dann  Werte wie 0,0,0 oder 255,255,255 zu sehen. Und genauso läuft es mit der hexadezimalen Schreibweise. Schwarz entspricht im hexadezimalsystem folgender Zahlenkolonne: 000000 – Weiß hingegen entspricht der Zahlenkolonne: FFFFFF. Zahlenkolonne deswegen, weil es sich dabei ja um Zahlen im hexadezimalsystem handelt. Bei 00 ist also der jeweilige Kanal komplett aus, bei FF komplett aufgerissen. Für ein reines RGB-Rot ergibt sich dann also FF0000, für grün entsprechend 00FF00 und für blau also 0000FF.
Daraus lassen sich dann insgesamt 16,7 Mio Farben zusammenmischen, mitsamt der Grauwerte. Schiebst Du vor die Zahlenkolonne  noch eine # dann kannst Du Sie in Deinem CSS-Code verwenden. Mit der Raute erkennt der Browser, das jetzt eine Zahlenkolonne kommt, und er interpretiert sie als Farbangabe, wenn Sie mit dem richtigen Schlüsselwort daherkommt.

Schlüsselwörter – Oder wie baue ich das jetzt in mein CSS ein?
Das ganze in Dein CSS einzubauen ist eigentlich ganz leicht. Willst Du den hintergrund einer Box oder einer ganzen Seite einfärben, verwendest Du:

background-color: #000000;

Willst Du die Rahmenfarbe ändern, verwendest Du:

border-color: #000000;

Willst Du die Schriftfarbe ändern, verwendest Du:

color: #000000;

rgb und hsl – Die anderen Arten Farbe in CSS zu notieren
Soweit so gut. Natürlich gibt es neben der hexadezimalen schreibweise auch noch andere Schreibweisen. Seit CSS2 kannst Du das oben bereits genannte RGB-Schema natürlich auch direkt notieren und sparst Dir somit die Umrechnung in das hexadezimale Format. Dafür wandelst Du die oben angegebenen Code-Schnipsel einfach folgendermaßen ab:

background-color: rgb(0,0,0);

Genauso kannst Du im Übrigen auch mit den anderen Beispielen von oben verfahren.

Um nun die hsl-Werte angeben zu können müssen wir wieder ein kleines bisschen Farbraum-Theorie voran stellen. hsl steht für Hue (Farbton), Saturation (Sättigung) und Luminance (Helligkeit). Um nun eine Farbe bestimmen zu können wählst Du zuerst einen Farbwert aus dem Farbkreis aus. Diese Zahl liegt zwischen 0 und 360 Grad. Danach wählst Du den Sättigungsgrad in Prozent, also zwischen 0 und 100%, aus und bestimmst danach die Helligkeit ebenfalls in Prozent.

Der Farbkreis als Balken - Quelle: Wikipedia
Der Farbkreis als Balken – Quelle: Wikipedia

Viele finden diese Form der Farbangabe um einiges intuitiver. Zu diesem gehöre ich zwar nicht, aber die Geschmäcker sind eben verschieden. Um nun ein sattes blau zu erzeugen sieht die Angabe in Deinem CSS dann folgendermaßen aus:

background-color: hsl(240,100,50);

Für schwarz und weiß spielen die ersten beiden Werte keine Rolle! Setze die Luminanz auf 100 um ein reines weiß zu erhalten, oder auf 0 um ein reines schwarz zu erhalten. Für die beiden anderen Anwendungsbereiche (Rahmen und Schriftfarbe) kannst Du genauso vorgehen, wie in diesem Beispiel! Möchtest Du mehr Informationen rund um die Farbräume RGB und HSL erfahren, dann findest Du am Ende enstprechende weiterführende Links.

Der Alpha-Kanal, das unsichtbare Wesen!
Bereiche auf Deiner Website farbig machen zu können ist ja schon mal eine tolle Sache. Seit CSS3 gibt es jedoch noch eine weitere Möglichkeit, wie Du Deine Seite ansprechend gestalten kannst: Transparenzen. Und hierfür brauchst Du den Alpha Kanal. Dieser Kanal regelt die Opazität deiner Farbe ähnlich wie bei transparenten PNGs, mit hilfe derer Du freigestellte Bilder ohne Rahmen auf Deiner Website plazieren kannst. Und das auf eigentlich erstaunlich einfache Weise. Du fügst Deiner Farbe einfach noch einen Wert für die Opazität bei. Dieser Wert, der zwischen 0 und 1 liegen sollte entspricht einer Blickdichte von 0 bis 100%. 0 wäre demnach vollkommen transparent und 1 entsprechend vollkommen massiv. Ein Wert von 0.5 entspräche demnach 50% etc. Damit die Browser das auch richtig interpretieren können musst Du in den Schlüsselworten noch darauf hinweisen, das Du auch einen Alphakanal verwenden willst. Das obige Beispiel sähe demnach folgendermaßen aus und würde ein 50%iges blau anzeigen:

background-color: rgba(0,0,100,0.5);

oder

background-color: hsla(240,100,50,0.5);

Aufmerksame Leser haben den Fehler oben bemerkt und gleich aufgeschrien: „Ein 50%iges blau? So ein Blödsinn!“ Und ja, Du hast recht: Natürlich ergibt das nur ein 50%iges blau auf einem weißen Hintergrund. Tatsächlich färbt das so hinterlegte Feld den Hintergrund mit 50% blau ein. Dabei ist es egal, ob es ein Bild, eine andere farbige Fläche, oder ein Verlauf ist.

Einsatzgebiete von Farben – Die schöne neue Farbenwelt
Mit CSS3 sind eine vielzahl an Möglichkeiten entstanden, wie Du Farbe auf Deiner Website verwenden kannst: Hintergrundfarbe für Boxen und ganze Seiten, Textfarben, Rahmenfarben, transparenzen, verschiedenfarbige Schatten, Animationen und es wird wohl noch das eine oder andere in der Entwicklung für zukünftige Versionen sein. Ob und wie Du die Möglichkeiten anwendest, das musst Du für Dich selbst entscheiden. Für die Zwischenprüfung sollten diese Anwendungsmöglichkeiten wohl eher eine untergeordnete Rolle spielen. Deswegen werde ich auf weitere CSS-spezifische Details im Rahmen dieses Artikels nicht weiter eingehen. Wichtig ist meiner Meinung nach, das Du weist, wie Du Farben in deine Website bekommen kannst. Wenn Du das anders siehst und eine Aufzählung der Möglichkeiten haben willst, dann schreibe das bitte in die Kommentare oder hinterlasse mir eine Nachricht per Mail.

Wie sage ichs dem IE? Das Problem von CSS3
Hier möchte ich zwei Fliegen mit einer Klappe schlagen und dabei gleichzeitig noch auf ein großes Problem bei der Verwendung von CSS3 auf Deiner Website hinweisen:
Obwohl CSS3 mittlerweile als Standart vom W3C freigegeben ist hapert es bei einigen Browsern noch mit der Umsetzung des Standarts. Die Browserhersteller, namentlich Mozilla, Apple, Google und Microsoft haben lange Zeit mal wieder ein eigenes Süppchen gekocht, was zur Folge hat, das die Implementierungen des Standarts in den Browsern noch nicht so umfangreich sind, wie sie sein könnten. Es besteht also die Gefahr, das dein Code im Firefox anders aussieht als in Chrome oder Safari. Es können sogar unterschiede bestehen zwischen dem offiziellen Release der Webkit-Browser Chrome und Safari und den täglichen nightly Builds. Davon ausgehen, das es anders aussieht, kannst Du bei unserem Freund, dem IE. Deswegen solltest Du Deine Website in sovielen Browsern wie möglich testen und darauf achten, das sie überall zumindest benutzbar ist! Was hilft Dir die schönste Website, wenn der Besucher sie nicht benutzen kann, weil irgendein Browserbug deine Navigation unter ein anderes Element schiebt? Nichts. Also testen testen testen!

Weiterhin gibt es auch die Möglichkeit, die Herstellereigenen CSS3 Interpretationen zu verwenden, solange der eigentliche Standart noch nicht implementiert ist. Dies ist aber ein wenig mit Vorsicht zu genießen, da die Ergebnisse hier abweichen können. Zum Rumspielen, ist es aber eine tolle Sache! Und um das machen zu können, brauchst Du die Browser Präfixe. Eines davon, nämlich -moz- hast Du oben bereits kennengelernt. Natürlich haben die anderen Browser ähnliche Präfixe, die ich Dir hier einmal in dieser Tabelle zusammengestellt habe:

Präfix Browser
-moz- Firefox
-ms-, mso- Internet Explorer
-khtml- Konqueror
-o- Opera
-webkit- Chrome, Safari

Anwendung finden diese Präfixe direkt im Aufruf der entsprechenden CSS3 Funktion:

div.eckenrundung { 
  border-radius: 10px;         // Standart CSS3
  -moz-border-radius: 10px;    // Präfix des Firefox
  -webkit-border-radius: 10px; // Präfix der Webkit-Browser
  -o-border-radius: 10px;      // Präfix des Opera
  -khtml-border-radius: 10px;  // Präfix für KHTML
}

Das soll es dann schon wieder von mir zu diesem Thema gewesen sein. Direkt im Anschluss findest Du eine recht umfangreiche Linkliste mit weiterführenden Informationen. Ich hoffe, Du kannst mit dem hier dargelegten etwas anfangen und gut für Deine Prüfung lernen. Wenn dem so ist, freue ich mich natürlich, wenn Du den Artikel teilst und/oder mir einen Kommentar hinterlässt.

Ich möchte Dich aber auch darauf hinweisen, das es immer Sinn macht aus mehreren Quellen zu lernen. Auch wenn ich Dir die hier Angebotenen Informationen sehr gut recherchiert habe und Dich nicht absichtlich aufs Glatteis führen will, kann ich Rechtschreibfehler oder sonstige Fehler nicht ausschließen. Die Verantwortung für deine Note liegt ganz alleine bei Dir!

Weiterführende Informationen:
http://www.filefishstick.com/laurin99/colorchart.htm
http://de.wikipedia.org/wiki/Webfarbe#CSS_3

http://de.wikipedia.org/wiki/RGB-Farbraum
http://de.wikipedia.org/wiki/HSL-Farbraum
http://www.w3.org/TR/css3-color/

http://de.wikipedia.org/wiki/Dualsystem
http://de.wikipedia.org/wiki/Dezimalsystem
http://de.wikipedia.org/wiki/Hexadezimalsystem

// Edit:Fehler bei der Formatierung der Textfarbe behoben. Danke Kevin!