Jens Käsbauer Mediengestaltung

Design, Marketing, Leidenschaft

HoHoHo! Die Themen der Mediengestalter Abschlussprüfung Winter 2013/14 sind da!

Am vierten Dezember, quasi kurz vor Nikolaus, findet die Winterprüfung der Mediengestalter in diesem Jahr statt. Und wie immer veröffentlicht die zfa die Themen einige Wochen im Vorraus. Gestern war es nun soweit und auch in diesem Jahr will ich mir die Themen ein kleines Bisschen näher ansehen und meine Gedanken dazu nach und nach in unregelmäßigen Abständen veröffentlichen.

Mediengestalter Abschlussprüfung Winter 2013/14 – Die Themen

An der Struktur und dem Ablauf der Prüfung hat sich auch in diesem Jahr nichts geändert. Die Aufgaben U1 – U9 aus beiden Prüfungsbereichen müssen von jedem Prüfling bearbeitet werden. Die Aufgen U10 bis U12 sind unterteilt nach den jeweiligen Fachrichtungen. Bist Du also in der Fachrichtung Gestaltung und Technik mit der Spezialisierung auf Printprodukte tätig, interessieren Dich nur die Themen aus dem entsprechenden Bereich Gestaltung und Technik (Print). Analog verhält es sich bei den anderen spezifischen Themenbereichen.

Von den 12 Themengebieten sind 10 zu bearbeiten. Zwei Themengebiete können gestrichen werden. Pro Themengebiet gibt es 10 zu erreichende Punkte, maximal also 100 Punkte.

 

Allgemeine Themengebiete (von allen zu bearbeiten):

Konzeption und Gestaltung

Medienproduktion

U1 Präsentationsplanung Farbmodus Duplex
U2 Kostenverläufe Bucheinband berechnen
U3 Printlayout Externe Schnittstellen
U4 Anzeigengestaltung Energieoptionen
U5 Mobiles Webdesign Boxmodell
U6 Bildkorrektur Kameraeinstellung (Fotografie)
U7 Gestaltungsrichtlinien Datenkonvertierung (Video)
U8 XML SQL-Datenbank
U9 Produktionsablauf Logo-Styleguide

 

 

Fachrichtungsspezifische Themengebiete (bitte entsprechendes auswählen):

Beratung und Planung

Beratung und Planung

U10 Kostenvergleich Bildnutzungsrechte – Release
U11 Zielgruppen im Web Qualitätsmanagement
U12 Operative Unternehmensziele Produktionsplanung Druck

 

 

Konzeption und Visualisierung

Konzeption und Visualisierung

U10 Navigation Bildnutzungsrechte – Release
U11 Informationsgrafiken Tonwertbeurteilung
U12 Operative Unternehmensziele Konversions-Optimierung

 

 

Gestaltung und Technik (Print)

Gestaltung und Technik (Print)

U10 Infografiken Dateiformate
U11 Farbmanagement-Einstellung Abmusterungs- und Messbedingungen
U12 Scannen Inkjet-Druck

 

 

Gestaltung und Technik (Digital)

Gestaltung und Technik (Digital)

U10 Weblayout berechnen CSS-Sprites
U11 Formularauswertung JavaScript-Funktion Rich Media Technologie
U12 Videoschnitt Bilddatenberechnung

Auch wenn ich in diesem Jahr wiederum froh bin, das ich die Prüfung nicht schreiben muss, muss ich auch sagen, das viele der Themen keine wirkliche Überraschung darstellen. Die Ausrichtung des Mediengestalters geht immer weiter in Richtung digitaler Medien. In Zeiten von ePapers und allzeit bereitem Internet sind die Grenzen ja auch in der Realität immer flißender. Multimediale Inhalte sind mittlerweile Branchenübergreifend ein relevantes Thema und darf nicht mehr vernachlässigt werden.

In den nächsten Tagen und Wochen werde ich hoffentlich auch dazu kommen, den einen oder anderen Beitrag zu veröffentlichen. Da auch dieses mal wieder XML mit von der Partie ist, habe ich den entsprechenden Artikel in meinem Blog gleich in der Tabelle verlinkt.

Ein paar hilfreiche Links für Deine Prüfungsvorbereitung:
HTML5 und CSS3 Videoserie bei youtube
Die alljährlichen Übungsaufgaben bei Mathemedien
Die Facebookgruppe zur Abschlussprüfung (hat sich noch keine gegründet)
Die Mediencommunity (Prüfungswiki)

Wenn Du Ideen, oder Infos hast, welche Links hier noch fehlen, dann zögere nicht, die Kommentarfunktion zu benutzen! Ich freue mich über Deine Beiträge.

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!

Die Themen sind da! Abschlussprüfung der Mediengestalter Sommer 2013

Wie in jedem Jahr findet auch in diesem Jahr die theoretische Sommerprüfung mitte Mai statt, in diesem Jahr am 15. Mai. Und auch in diesem Jahr veröffentlicht die zfa die Themen der Prüfung bereits einige Wochen vorab auf ihrer Website (wo Du auch nachsehen solltest, ob die Daten, die ich hier veröffentliche korrekt sind.). Gestern war es nun soweit und auch in diesem Jahr will ich mir die Themen ein kleines Bisschen näher ansehen und meine Gedanken dazu nach und nach in unregelmäßigen Abständen veröffentlichen.

Mediengestalter Abschlussprüfung Sommer 2013 – Die Themen

An der Struktur und dem Ablauf der Prüfung hat sich auch in diesem Jahr nichts geändert. Die Aufgaben U1 – U9 aus beiden Prüfungsbereichen müssen von jedem Prüfling bearbeitet werden. Die Aufgen U10 bis U12 sind unterteilt nach den jeweiligen Fachrichtungen. Bist Du also in der Fachrichtung Gestaltung und Technik mit der Spezialisierung auf Printprodukte tätig, interessieren Dich nur die Themen aus dem entsprechenden Bereich Gestaltung und Technik (Print). Analog verhält es sich bei den anderen spezifischen Themenbereichen.

Von den 12 Themengebieten sind 10 zu bearbeiten. Zwei Themengebiete können gestrichen werden. Pro Themengebiet gibt es 10 zu erreichende Punkte, maximal also 100 Punkte.

 

Allgemeine Themengebiete (von allen zu bearbeiten):

Konzeption und Gestaltung

Medienproduktion

U1 Schriftmerkmale Pixel- und Vektordaten
U2 Ergonomie Farbmischung
U3 Druckkosten Cloud-Computing
U4 Plakatgestaltung Grafikkarte
U5 HTML5-Struktur CSS-Kaskadierung
U6 Anzeigenanalyse Kameraeinstellung (Fotografie)
U7 Medienneutrale Daten Multimediale Inhalte
U8 XML SQL
U9 Wort-Bild-Marken Design Manual

 

 

Fachrichtungsspezifische Themengebiete (bitte entsprechendes auswählen):

Beratung und Planung

Beratung und Planung

U10 Teambildung Schutz des geistigen Eigentums
U11 SWOT-Analyse Rastertechnik
U12 Gewinnschwellenberechnung Web-to-Print

 

 

Konzeption und Visualisierung

Konzeption und Visualisierung

U10 Teambildung Schutz des geistigen Eigentums
U11 Gestaltung von Geschäftsausstattung Tonwertbeurteilung
U12 eBook-Erstellung Online-Formular

 

 

Gestaltung und Technik (Print)

Gestaltung und Technik (Print)

U10 Informationsgrafik Smart-Objekte
U11 Farbbeurteilung Farbkonvertierung
U12 Ausschießen PDF-Druckstandarts

 

 

Gestaltung und Technik (Digital)

Gestaltung und Technik (Digital)

U10 Bildschirmtypografie Smart-Objekte
U11 Content-Management-Systeme Web-Fonts
U12 Videoschnitt Video-Komprimierung

Auch wenn ich in diesem Jahr wiederum froh bin, das ich die Prüfung nicht schreiben muss, muss ich auch sagen, das viele der Themen keine wirkliche Überraschung darstellen. Die Ausrichtung des Mediengestalters geht immer weiter in Richtung digitaler Medien. In Zeiten von ePapers und allzeit bereitem Internet sind die Grenzen ja auch in der Realität immer flißender. Multimediale Inhalte sind mittlerweile Branchenübergreifend ein relevantes Thema und darf nicht mehr vernachlässigt werden.

In den nächsten Tagen und Wochen werde ich hoffentlich auch dazu kommen, den einen oder anderen Beitrag zu veröffentlichen.

Ein paar hilfreiche Links für Deine Prüfungsvorbereitung:
HTML5 und CSS3 Videoserie bei youtube
Die alljährlichen Übungsaufgaben bei Mathemedien (noch keine online – 21.03.2013 – 6:30)
Die Facebookgruppe zur Abschlussprüfung
Die Mediencommunity (Prüfungswiki)

Wenn Du Ideen, oder Infos hast, welche Links hier noch fehlen, dann zögere nicht, die Kommentarfunktion zu benutzen! Ich freue mich über Deine Beiträge.

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!

Nachtrag zu Lieferungs- und Zahlungsbedingungen beim Papiereinkauf

Ein Leser des Artikels vom Samstag hat mir per Mail einen interessanten Hinweis zukommen lassen, demnach es durchaus auch sein kann, das man dieses Thema auch mathematisch bearbeiten kann. Nachdem der Prüfungsausschuss in der Vergangenheit dazu tendiert hat, die Zwischenprüfung ziemlich schwer anzusetzen, kann ich mir durchaus vorstellen, das bei diesem Thema auch gerechnet werden muss. Dann lasst uns also mal anfangen und ein Paar Überlegungen vorweg anstellen.

Warum muss ich bei der Bestellung von Papier rechnen?
Ein wichtiger Faktor, wenn man Papier in einem Papierwerk bestellt, ist der Umstand, dass das Papier ja auch irgendwie zum Käufer, also im Regelfall zur Druckerei kommen muss. Hierfür wird man in der Regel eine Spedition beauftragen, die dafür geeignet ist, die großen Papierrollen oder Paletten mit Bögen zu transportieren. Um die Preise der Speditionen richtig auswerten zu können, muss man natürlich wissen wie schwer das zu transportierende Papier ist.

Aber nicht nur beim Bestellen des Rohstoffes muss man das Gewicht berechnen: Auch wenn man die fertigen Produkte an den Kunden ausliefert muss man wissen, welches Angebot der bekannten Lieferservices man kaufen muss. Reicht der Versand von bis zu 5kg schweren Paketen aus, oder wird es doch mehr? Hier kann dann bei größeren Auflagen auch das Gewicht der Druckfarbe eine Rolle spielen. Eine Faustregel spricht von 5 bis 10% die man für die aufgedruckte Farbe hinzurechnen muss. Natürlich auch Abhängig davon, ob die Farbe vollflächig oder gerastert  aufgetragen wird.

Ein drittes Beispiel, bei dem die Druckfarbe eine wichtige Rolle spielen kann ist vorallendingen in Firmen angesiedelt, die viele Direktmarketingaktionen durchführen. Bereits ein gramm mehr an Gewicht pro Einheit, kann im Schnitt bis zu 25% Mehrkosten beim Versand verursachen.

Du erkennst also, das es sicher von Bedeutung ist, genau über die Gewichte seiner Bestellungen und Sendungen informiert zu sein. Aus diesem Grund habe ich hier einmal die wichtigsten Formate, Formeln und Hinweise zusammengetragen. Wie auch schon im letzten Artikel, möchte ich darauf hinweisen, das diese Aufzählung und die Hinweise, die ich hier gebe keinen Anspruch auf Vollständigkeit erhebt und auch wenn ich die hier angeführten Informationen nach bestem Wissen und Gewissen recherchiert habe, kann ich keine Gewähr für die Richtigkeit der Angaben machen. Du bist für Deinen Lernerfolg selbst verantwortlich und es ist immer von Vorteil, wenn man Informationen aus vielen Quellen miteinander vergleicht. Niemand kann alles wissen! Lass uns also anfangen, Mathematik wird nicht besser, auch wenn man es noch so lange vor sich herschiebt. 🙂

Warum ist ein Buch so schwer? EIn Blatt Papier wiegt doch kaum etwas!
Richtig, ein Blatt Papier wiegt tatsächlich kaum etwas, legt man davon aber mal 500 oder 1000 aufeinander, dann sieht die Sache schon ganz anders aus. Schuld daran ist die Masse, die das Blatt Papier hat. Normales Kopierpapier hat in der Regel 80g/m2. Man spricht dabei auch von der Grammatur des Papiers. Grammaturen gibt es viele, und jede ist für einen bestimmten Verwendungszweck geeignet. Als angehender Mediengestalter sollte das aber nichts neues für Dich sein.

Aufgabe:
Stellen wir uns also mal vor, Du bekommst den Auftrag für einen Katalogdruck das Papier und den Druck zu bestellen. Der Katalog soll 84 Seiten im Format A4 (Hochformat) haben und klebegebunden sein. Für die Inhaltsseiten soll eine Grammatur von 90g/m2 verwendet werden. Der Umschlag soll 200g/m2 haben. Der Katalog soll in einer Erstauflage von 15000 Stück gedruckt werden.

Sehen wir uns erst einmal das einzelne Blatt an: A4 hat ja bekanntlich eine Breite von 21,0 cm und eine Länge von 29,7 cm. Da wir ja ein Flächengewicht gegeben haben sollten wir uns zuerst die Fläche des einzelnen Blattes ansehen:

Fläche eines Blattes:
0,210 m * 0,297 m = 0,06237 m2

Fläche eines Werkes:
0,06237 m2 * 42 Blatt = 2,61954 m2

Gewicht eines Werkes:
2,61954m2 * 90g/m2 = 235,7586 g

Nun haben wir das Gewicht eines Kataloges, aber natürlich ohne den Umschlag, oder die aufgetragene Farbe. Zur einfacheren Berechnung runden wir nun auf zwei Nachkommastellen und erhalten dann 235,75 g für die weiteren Rechenschritte. Um den Umschlag ordentlich berechnen zu können brauchen wir jetzt die Dicke des fertigen Papierstoßes:

Um die Dicke des Stoßes berechnen zu können, brauchen wir wieder erst einmal das einzelne Blatt. Die Berechnung läuft dann wiefolgt ab:

fn_jvn Papierdicke, in, mm=frac{Flaechmasse, in, g/m^2*Volumenfaktor}{1000}

In diese Formel setzen wir nun unsere Angaben ein. Ich habe die Erfahrung gemacht, das der Volumenfaktor immer als 1 angenommen werden kann, wenn von Seiten der IHK, bzw. zfa keine anderen Angaben in der Aufgabenstellung gemacht wurden.

fn_jvn Papierdicke, in, mm=frac{90 g/m^2*1}{1000}=0,09, mm

Auf das ganze Werk ergeben sich dann 3,78 mm Dicke und wir können den Umschlag berechnen. Da wir in der Angabe freundlicherweise das Hochformat angegeben haben ergibt sich also als Umschlag ein Rechteck , welches 423,78 mm breit ist und 297 mm hoch ist. Laut Aufgabenstellung soll der Umschlag eine Grammtur von 200g/m2 haben. Daraus ergibt sich ein Gewicht von gerundet 25,17 Gramm. Zusammen mit dem Papierstoß für den Umschlag ergibt sich dann ein Gewicht von 260,92 Gramm. Wenn man nun noch das Gewicht des Klebers und der Druckfarbe hinzurechnen will, dann müsst ihr lediglich knappe 10% des bisher errechneten Gewichts hinzuaddieren. Damit sollte das meiste an Gewicht für eine Auflage errechnet sein.

Weiterführend könnt ihr dann errechnen, was ein Mailing kosten würde, in dem der Katalog zum Beispiel an bestehende Kunden verschickt wird, oder Ihr rechnet das Gewicht der ganzen Auflage aus um der Spedition den richtigen Auftrag erteilen zu können. Oder Du berechnest über den Papierpreis pro Kilogramm die Kosten für die Auflage. Oder wenn ihr nur den 1000er-Bogen-Preis habt, müsst ihr auch noch eine Nutzenberechnung durchführen.

In der Tat sind die Möglichkeiten, wie bei diesem Thema gerechnet werden kann enorm. Ob es jedoch der Fall sein wird, kann ich nur schwer abschätzen. Für mich liest es sich eher nach einer Sozialkunde-Frage mit der ein bisschen abgeklopft werden soll, wie fit Du mit den grundlegenden juristischen Themen in deinem Beruf bist. Aber sich zu informieren kann nie schaden! Deshalb habe ich Dir hier noch ein paar Formeln, Tabellen und Links zusammengestellt:

Berechnung des Papiervolumens:
fn_jvn Volumen=frac{Papierdicke * 1000}{Flaechenmasse}

Berechnung der Papierdicke:
fn_jvn Papierdicke (mm)=frac{Flaechenmasse * Volumenfaktor}{1000}

Berechnung der Flächenmasse:
fn_jvn Flaechenmasse (g/m^2{})=frac{Papierdicke(mm) * 1000}{Volumenfaktor}

Papierbedarfsberechnung:
fn_jvn Papierbedarf=frac{(Auflage+Zuschuss)*Seitenzhahl}{Seitenzahl, pro, Bogen}

Papiergewicht:
fn_jvn Gewicht, pro, Bogen, (g)=frac{Laenge, (cm)* Breite, (cm)*Flaechenmasse, (g/m^2)}{10000, cm^2/m^2}

Berechnung des Papiergewichts einer Publikation:
fn_jvn Papiergewicht, des, Werkes = frac{Blattformat, (offen)*Flaechenmasse (g/m^2)}{10000*Blattzahl}

Tabellen:

Papiervolumina und Dicken (in mm) für die gängigsten Flächenmassen
Masse in g/m2 1x Volumen 1,5 x Volumen 2 x Volumen
45 0,045 0,0675 0,090
60 0,060 0,90 0,120
70 0,070 0,105 0,140
80 0,080 0,120 0,160
90 0,090 0,135 0,180
100 0,100 0,150 0,200
120 0,120 0,180 0,240

 

die gängigsten DIN-Papierformate (A-Reihe)
Bezeichnung Format (in mm)
 A0 841 x 1189
A1 594 x 841
A2 420 x 594
A3 297 x 420
A4 210 x 297
A5 148 x 210
A6 105 x 148
A7 74 x 105

Und hier gibt es noch eine kleine Linksammlung mit relevanten Inhalten zum weiterlernen. Für die Richtigkeit der Angaben auf den verlinkten Seiten und die Verfügbarkeit des Angebots kann ich keine Haftung übernehmen:

https://www.laser-line.de/news/papiergewicht-berechnen.html
http://www.onlinemathe.de/forum/umrechnung-rollendurchmesser-in-rollenlaenge-umrechnen
http://www.din-formate.de/kalkulator-umrechnung-gewicht-papier-gramm-je-blatt-din-a.html
http://papiergewichtrechner.de/
http://www.icum-tud.de/material/projekte/papier/kalkulation.html
http://www.lima-city.de/thread/gestreckte-laenge-einer-spirale-bestimmen
http://schlaefke.com/3.html
http://www.office-loesung.de/ftopic389950_0_0_asc.php
http://www.laser-line.de/news/gewichtiges-papier.html

Hast Du noch weitere Linkvorschläge, die Du mit anderen Lesern des Artikel teilen willst? Dann schreib mir in die Kommentare und teile Dein Wissen mit den anderen.

Vielen Dank!