Wie viele, die hier mitlesen, stecke auch ich mitten im Endspurt zur Abschlussprüfung für Mediengestalter. Eigentlich war ich vorhin auf der Suche nach Informationen zu verschiedenen Prüfungsthemen bei YouTube, als ich auf eine Reihe von Videoaufzeichnungen unterschiedlicher Beiträge der gerade zu ende gegangenen “re:publica 13” stieß.

Ich weiß nicht, ob es alle sind, aber in ihrem YouTube-Channel kann man sich eine ganze Menge Videos von Präsentationen ankucken.

Als Mediengestalter mit dem Schwerpunkt “print” fiel mir der Titel “Das Blatt und das Netz” besonders auf. Gehalten wurde der knapp 30 Minuten lange Vortrag von Prof. Dr. Lothar Müller von der “Süddeutschen Zeitung“.

Müller schlägt in dieser halben Stunde einen Bogen von einer beinahe philosophischen Betrachtung eines Blatts Papier, über die kulturelle und historische Geschichte des Mediums Papier, bis zur Konzeption und Gestaltung einer modernen Tageszeitung und den Unterschieden zur Umsetzung in digitalen Medien.

Das ist, gerade da hier sehr viele Inhalte in relativ kurzer Zeit untergebracht sind, kein leichter Stoff. Man merkt der Ausdrucksweise von Prof. Dr. Müller auch an, dass er für das Feuilleton schreibt. Allerdings, und das war der Grund, warum ich das hier teile, liefert eine ganze Reihe von Ideen und Betrachtungsweisen, die mir persönlich völlig neu waren. Vor allem der Einstieg und das letzte Drittel gaben mir viele Denkanstöße.

Ich rate jedem dazu die Lernbücher, die PDFs oder womit auch immer man sonst gerade beschäftigt ist, mal für ein Weilchen zur Seite zu legen und sich die Zeit zu nehmen, sich den Vortrag in Ruhe anzukucken.

Auf eure Meinungen bin ich sehr gespannt!

Der Beitrak Das Blatt und das Netz erscheint auf FW: look! – Design Blog.

Seit gestern tobt hier in Hamburg der Kirchentagwahnsinn!

Mit der Religion soll das ja meinetwegen jeder halten, wie sie oder er es für richtig hält, aber wenn man schon morgens in der U-Bahn von ganzen Rotten von Missionarinnen und Missionaren belästigt wird, wirds ärgerlich.

Das Kirchen und Kathedralen aber doch zu was gut sein können, zeigt Kris Kuksi. Er montiert sie einfach auf Panzer.

Panzerkirche
(Quelle: Kris Kuksi)

Kirchenpanzer Rückseite
(Quelle: Kris Kuksi)

Das Resultat sind unheimlich filigrane und detailreiche Skulpturen.

Bei all den kleinen Elementen weiss man gar nicht, wo man zuerst hinsehen soll.

Kirchenpanzer
(Quelle: Kris Kuksi)

Kirchenpanzer mit Zweibelturm
(Quelle: Kris Kuksi)

Kirchenpanzer mit Flakanhänger
(Quelle: Kris Kuksi)

Kirche mit Flak-Anhänger
(Quelle: Kris Kuksi)

Wenn man denn möchte, könnte man jetzt sicherlich eine ganze Reihe Interpretationsansätze finden. Die Motive institutionierter Glaube und Krieg bieten dafür ja genug Raum. Das darf aber meiner Meinung nach jeder für sich selber machen.

Mir persönlich gefällt einfach die Idee und die skurillen Ergebnisse. Außerdem steht mir ob der handwerklichen Ausführung noch immer der Mund offen.

Die Kirchenpanzer gibt es sowohl als keine Statuen, als auch als fast raumfüllende Installationen.

Kirchenpanzer in der Joshua Liner Gallery
(Quelle: Kris Kuksi)

Ganz besonders großartig finde ich die Skulptur “Church VS State“, bei der der Konflikt zwischen dem Staat und der Kirche auf sehr handfeste Art und Weise ausgetragen wird.

Church VS State
(Quelle: Kris Kuksi)

Church VS State – Besonders interessant: Der Boden des Beckens in der Mitte ist eine Karte der USA mit einer Linie durch den sogenannten “Bible-Belt”
(Quelle: Kris Kuksi)

Auch hier ist der Detailreichtum einfach umwerfend. Die Idee mit dem “Bible-Belt” als sprichwörtlichen Graben ist genial.

Church VS State Detail
(Quelle: Kris Kuksi)

Aber Kris Kuksi macht nicht nur Panzerkirchen bzw. Kirchenpanzer, sondern eine ganze Reihe weiterer großartiger Skulpturen und Malereien, die ich mir alle ohne zu überlegen in die Bude stellen würde.

Auf seiner Website Kuksi.com gibt es viele Bilder von seinen Projekten. In den Galerien seiner facebook-Seite hat er aber noch eine ganze Menge mehr, vor allem auch mehr Detailaufnahmen.

In seinem Shop kann man sich sogar eine Skulptur von einem Kirchenpanzer kaufen. Leider steht kein Preis dabei.

Wenn solche Dinger durch die Stadt rollen würden, könnte ich dem Weltkirchentag vielleicht doch noch was abgewinnen. Bis dahin bleibt mir in der U-Bahn nur, den iPod lauter und die Augen zu zu machen. Montag ist der Spuk dann ja auch wieder überstanden.

Wer sich seinen eigenen Panzer bauen möchte, findet hier einen Kampfpanzer aus/für 2$.

Der Beitrak Kirchenpanzer erscheint auf FW: look! – Design Blog.

Bei der (manuellen) Einstellung der Kamera gibt es einige Variablen die es zu beachten gilt. Dazu zählen vor allem die Blende, die Verschlusszeit, die ISO-Empfindlichkeit und die Brennweite des Objektivs. Nachfolgend werden wir diese Punkte stückweise abarbeiten, um etwas Licht ins Dunkle zu bringen.

Die Blende

Man kann sich die Blende wie eine Art Tor vorstellen, das das einfallende Licht durch das Objektiv hindurch lässt damit dieses auf den Sensor treffen kann. Die Blende legt also die Lichtmenge fest. Eine weiter geöffnete Blende bedeutet mehr durchgelassenes Licht, eine weiter geschlossene Blende bedeutet weniger durchgelassenes Licht.

Die Blendenöffnung wird in der Praxis als eine Zahl angegeben, die auf den Buchstaben f folgt. Zum Beispiel ƒ5.6 oder auch F/5.6.

Dabei ist zu beachten: Eine kleine (Blenden-)Zahl, steht für eine größere (Blenden-)Öffnung und umgekehrt!

Diese Blendenöffnungen sind vordefiniert und lassen sich durch in der Blendenreihe ausdrücken. Das Verändern der Blendenöffnung um eine Stufe bedeutet eine Verdopplung bzw. Halbierung des einfallenden Lichtes.

Die Blendenreihe:

ƒ1 – ƒ1.4 — ƒ2 – ƒ2.8 – ƒ4 – ƒ5.6 – ƒ8 – ƒ11 – ƒ16 – ƒ22 – ƒ32
<– große Blendenöffnung             kleine Blendenöffnung –>

Zwischenschritte sind bei bestimmten Kameramodellen möglich. Diese sind dann in 1/3 oder 1/2 Zwischenschritte eingeteilt.

Die kleinstmögliche Blendenöffnung wird durch die Bauart des Objektives bestimmt und wird auch immer dort angegeben.

Ist die Objektivbezeichnung z.B. “Canon EF-S 18-55mm 1:3.5-5.6″ hat dies folgende Bedeutung: Brennweitenbereich: 18–55mm; kleinstmögliche Blende: ƒ3.5 (bei 18mm) bzw. ƒ5.6 (bei 55mm).

Schärfentiefe

Da die Blendenöffnung das einfallende Licht reguliert, legt die gewählte Blende auch den Schärfebereich im Bild fest. Also, wie groß der Bereich ist, in dem das abgebildete Objekt / die Landschaft scharf dargestellt wird. Die Wahl der Schärfentiefe ist grundlegend für den gewünschten Effekt im Bild.

Möchte ich einen großen Bereich scharf stellen, benötige ich eine hohe Schärfentiefe und somit eine kleine Blendenöffnung (= hohe Blendenzahl). Möchte ich allerdings einem Objekt durch einen unscharfen Hintergrund eine Freistellung verleihen, benötige ich eine höhere Blendenöffnung (= kleine Blendenzahl).

ƒ1 – ƒ1.4 — ƒ2 – ƒ2.8 – ƒ4 – ƒ5.6 – ƒ8 – ƒ11 – ƒ16 – ƒ22 – ƒ32
<– geringe Schärfentiefe                     hohe Schärfentiefe –>

Belichtungszeit/Verschlusszeit

Wir haben gelernt: Die Blendenöffnung legt fest, wie viel Licht auf den Sensor trifft. Die Verschlusszeit bringt nun den Faktor Zeit ins Spiel. Sie gibt nämlich an, wie lange das Licht auf den Sensor trifft.

Je länger die Verschlusszeit, desto länger fällt das Licht auf den Sensor und umgekehrt.

Mit einer kürzeren Verschlusszeit (= schneller Verschluss) lassen sich Bewegungen einfrieren, da das Licht nur kurz auf den Sensor fallen muss. Dies erfordert aber im Vergleich eine große Blendenöffnung.

Eine längere Verschlusszeit sorgt dafür, dass das Licht länger auf den Sensor fallen kann. Dies ist zum Beispiel nötig, wenn bereits die kleinstmögliche Blende (also größtmögliche Blendenöffnung) gewählt ist. Dies erfordert aber in der Regel, dass sich die Kamera auf einem Stativ befindet, da jede Bewegung das Motiv verwischen lässt.

Es gilt die Faustregel: Die Brennweite mit der fotografiert wird, legt auch die Mindestverschlusszeit fest, die benötigt wird, um frei Hand zu fotografieren. Zum Beispiel: Bei einer Brennweite von 35mm benötige ich mindestens (!) eine Verschlusszeit von 1/35, besser ist ein schnellerer Verschluss. Da 1/35 zwischen den Stufen 1/30 und 1/60 liegt, wählen wir im Idealfall den schnelleren Verschluss, also 1/60.

Auch die Verschlusszeit lässt sich in Schritten festlegen, wobei jeder Schritt ebenfalls eine Halbierung bzw. eine Verdopplung der eingefallenen (endgültigen) Lichtmenge bedeutet.

Verschlusszeit in Sekunden:

1 – 1/2 – 1/4 — 1/8 – 1/15 – 1/30 – 1/60 – 1/125 – 1/250 – 1/500 – 1/1000 …
<– langsamer Verschluss                                 schneller Verschluss –>

Beispiel: Zusammenspiel Blende/Verschlusszeit

Auch wenn noch der Faktor ISO-Empfindlichkeit fehlt, folgt ein Beispiele, das den Zusammenhang von Blende und Verschlusszeit deutlich macht (wir gehen von einer gleichbleibenden ISO-Empfindlichkeit aus):

Ausgangssituation: Blende ƒ5.6; Verschlusszeit 1/125
Um die Schärfentiefe zu verringern, soll nun die Blende ƒ4 gewählt werden.

Welche Verschlusszeit wird benötigt, um das Bild wie in der Ausgangssituation zu belichten?

Antwort:
Da die Blendenzahl um einen Blendenschritt verringert wurde, sich die einfallende Lichtmenge also verdoppelt, müssen wir die Verschlusszeit ebenfalls um einen Schritt verkürzen. Wir kommen also auf eine Verschlusszeit von 1/250.

Lichtempfindlichkeit (ISO)

Der eingestellte ISO-Wert einer Kamera legt fest, wie empfindlich der Sensor für einfallendes Licht ist. Eine höhere ISO-Angabe bedeutet eine höhere Lichtempfindlichkeit und umgekehrt.

Dabei ist zu beachten, dass sich eine höhere Lichtempfindlichkeit in einem höheren Bildrauschen äußert, welches gerade bei dunkleren oder Nacht-Aufnahmen auffällt. Daher ist der ISO-Wert möglichst gering zu halten.

Auch die Lichtempfindlichkeit lässt sich wieder in einer Reihe angeben. Eine Verdopplung der Zahl bedeutet auch eine doppelt so hohe Lichtempfindlichkeit.

ISO 100 – 200 – 400 – 800 – 1600 – 3200 – 6400 – 12.800 …
<– geringe Empfindlichkeit          hohe Empfindlichkeit ->

Beispiel: Ein Fotograf schießt ein Foto mit einer Blende ƒ5.6, einer Verschlusszeit von 1/125 und der ISO-Einstellung 400. Nun stellt er ein störendes Bildrauschen fest und möchte den ISO-Wert auf 200 verringern.

Um die Verringerung auszugleichen, muss er entweder die einfallende Lichtmenge, oder die Zeit, die das Licht einfällt verdoppeln. Also verändert er entweder die Blende auf ƒ4 oder die Verschlusszeit auf 1/60.

Kameraeinstellungen bzw. -automatiken

Damit man beim Fotografieren nicht jedes mal alle Einstellungen manuell festlegen muss, gibt einem die Kamera verschiedene Automatiken vor, die einem das Arbeiten mit der Kamera vereinfacht.

P – Programmautomatik

Die Programmautomatik versteckt sich hinter dem Buchstaben P an der Kamera. Der Modus kümmert sich nicht um irgendwelche Schärfetiefeneinstellungen, sondern sorgt sich nur darum, dass das Bild scharfgestellt und richtig belichtet ist. Möchte man die Einstellung beeinflussen, muss man auf einen anderen Kameramodus umsteigen.

A – Blendenvorwahl

A steht für “Aperture preselection” (zu Deutsch: Blendenvorwahl). Der Fotograf gibt die Blende vor und die Kamera ermittelt die benötigte Verschlusszeit um das Bild richtig zu belichten.

S – Zeitvorwahl

S steht für “Shutter preselection” (zu Deutsch: Zeitvorwahl) und verhält sich genau gegensätzlich zur Blendenvorwahl. Der Fotograf gibt die Verschlusszeit vor und die Kamera ermittelt die benötigte Blende um das Bild richtig zu belichten.

M – Manuellmodus

Möchte man alle Einstellungen selbstständig festlegen, kann man dies im Manuellmodus tun.

Was kann gefragt werden?

Meine Vermutung ist, dass hier hervorragend ein kleiner “Rechenteil” eingebaut werden könnte. Also Veränderungen an den Einstellungen nach Vorgabe vornehmen (s. oberes Beispiel).

Auch generelle Fragen zu den Einstellungen und Kameraautomatiken sind durchaus möglich.

Habt ihr noch Fragen oder Ergänzungen? Ab damit in die Kommentare!

Titelbild: ~Mictecacihuatl-Stock

Der Beitrak Von Blende bis Verschluss – Kameraeinstellungen erscheint auf FW: look! – Design Blog.

Ich muss zugeben, dass ich etwas überrascht war, dass neben den schon sehr webspezifischen Themen SQL und CSS3 auch noch die HTML5-Struktur auch für uns Mediengestalter mit dem Schwerpunkt print auf dem Programm für die Abschlussprüfung steht.

Da in der Praxis vermutlich die wenigsten damit in Berührung kommen, hier ein Rundumschlag über alles, was ich bei den Themen HTML, HTML5 und CSS für wichtig halte.

Dies beinhaltet

• Was sind HTML und CSS eigentlich und was ist wofür zuständig
• Grundaufbau von HTML
• Aufbau eines HTML-Dokuments
• Das HTML-Boxenmodell
• Grundaufbau von CSS
• Inline-Styles, das <style>-Tag und externe Stylesheets
• Unterschiede zwischen HTML4 und HTML5
• Warum und wofür HTML5 gut ist
• Warum und wofür HTML5 nicht gut ist
• Zusätzliche Links und Resourcen

Was davon für die Prüfung tatsächlich relevant ist, weiß ich nicht. Im Zweifelsfall pickt man sich die Kapitel raus, die für einen selbst wichtig erscheinen.

Auf die U5: CSS-Kaskadierung werde ich nicht eingehen, da Kevin dazu schon einen sehr guten und verständlichen Artikel geschrieben hat.

Ich denke allerdings, dass man erstmal HTML grundsätzlich verstanden haben muss, um zu verstehen, was genau die Umstellung von HTML4 auf HTML5 bedeutet. Da gerade uns Printlern da die Erfahrung aus der Praxis fehlt, beginne ich einfach ganz vorne. Wer die Beispiele selber ausprobieren möchte, benötigt dazu im Grunde bloß einen Texteditor. Ich empfehle allerdings das kostenlose Notepad++. Das ist nicht schwer zu bedienen und im Notfall findet sich eine ziemlich gute Dokumentation auf der Website.

Was sind HTML und CSS eigentlich und was ist wofür zuständig

HTML ist die Abkürzung für Hyper Text Markup Language. Obwohl das gerne mal verwechselt wird, ist HTML keine Programmier- sondern eine Auszeichungssprache (Markup Language). Mit HTML beschreibt man die grundsätzlichen Elemente, die sich auf der Seite befinden und wie diese ineinander verschachtelt sind.

Typische Elemente sind beispielsweise Bilder, Texte, Links und Divs (Boxen). Wichtig ist, dass man mit HTML sagt, was für Elemente auf der Seite sind, aber nicht, wie diese aussehen. Man könnte es zwar machen, aber man sollte nicht. Warum das so ist kommt unter dem Punkt “Inline-Styles, das <style>-Tag und externe Stylesheets“.

Für das Aussehen der Elemente ist nämlich das CSS zuständig. CSS steht für Cascading Stylesheets. Mit CSS lässt sich bestimmen, wie die Elemente auf der Seite aussehen (z.B. Größe, Farbe, Hintergrund, Umrandung).

Wichtig ist, dass man beide Aspekte einer Website – Inhalt (HTML) und Aussehen (CSS) – strikt von einander trennt.

Grundaufbau von HTML

Eine Website setzt sich typischerweise aus unterschiedlichen HTML-Elementen zusammen. Jedes Element wird durch ein sogenanntes “Tag” gekennzeichnet, dem unterschiedliche Attribute und ggf. auch Inhalte zugeordnet werden können. Bei fast allen Elementen gibt es ein öffnendes und ein schließendes Tag, wobei es hier auch Ausnahmen gibt.

Die grundsätzliche Syntax lautet:

<Tagname Attribute>Inhalt</Tagname>

Zum Beispiel steht das Tag <a> für “anchor” und bezeichnet in der Regel einen Link. Es benötigt das Attribut “href“, dass angibt, wo der Link hinführen soll. Außerdem kann man ihm mittels dem Attribut “target” vorgeben, ob sich der Link im selben oder in einem neuen Fenster öffnen soll. Der Inhalt entspricht in diesem Fall dem Text, der später anklickbar wird.

<a href="http://www.FwLook.de/" target="_blank">
Hier geht es zur FW:Look!-Startseite
</a>

Das Resultat sieht dann so aus:

Hier geht es zur FW:Look!-Startseite

Die notwendigen und die zugelassenen Attribute unterscheiden sich von Element zu Element. Eine komplette Liste findet man auf der sehr hilfreichen SELFHTML-Website. Ich denke nicht, dass man die alle können muss, aber zumindest die notwendigen Attribute der wichtigsten Elemente wie Div (Boxen), a (Link), img (Bild), h1 – h6 (Überschriften) und p (Absatz) sollte man drauf haben.

Nun gibt es noch die Möglichkeit HTML-Elemente ineinander zu verschachteln, in so vielen Ebenen wie man möchte bzw. wie man braucht.

In dem Beispiel oben kann man beispielsweise statt des Textes ein Bild einbinden, das dann zum anklickbaren Link wird.

Der Tag für ein Bild heißt <img> und benötigt als Attribut “src” (source) die Adresse, unter der das Bild, dass angezeigt werden soll, abgelegt ist. Außerdem kann man mit den Attributen “alt” bzw. “titel” Texte hinterlegen, die angezeigt werden, sollte aus irgendwelchen Gründen das Bild nicht gefunden werden oder wenn man den Mauszeiger einen kleinen Moment über dem Bild hält.

Um unser Logo vom Seitenanfang anzuzeigen lautet der Code

<img src="http://www.fwlook.de/wp-content/themes/fwlook_theme/images/fwlook.png" alt="FW:Look!-Logo" title="FW:Look!-Logo" />

Dies führt zu diesem Resultat:

Wer sieht den Unterschied zwischen dem <a>-Tag und dem <img>-Tag?

Das <img>-Tag ist eines der wenigen Tags, die kein schließendes Tag benötigen, da sie keinen Inhalt haben können. Das Ende des <img>-Tag wird mit dem Slash vor der schließenden Klammer gekennzeichnet. Diese Art von Tags nennt man “selfclosing”-Tags.

Nun kann man diese beiden Elemente verschachteln, um ein anklickbares Bild zu erhalten, das unsere Startseite in einem neuen Fenster öffnet.

<a href="http://www.FwLook.de/" target="_blank">

<img src="http://www.fwlook.de/wp-content/themes/fwlook_theme/images/fwlook.png" alt="FW:Look!-Logo" title="FW:Look!-Logo" />

</a>

Nach diesem Prinzip lassen sich jetzt beinahe unendlich viele Konstruktionen bauen, die alle zusammen letztendlich eine fertige Website ergeben.

Die jetzt weiter zu beleuchten würde den Rahmen hier deutlich sprengen und ich hoffe, dass die grundsätzliche Mechanik klar geworden ist. Um später die Neuerungen in HTML5 zu durchschauen ist es wichtig, dass man verstanden hat, …

• … dass es eine Vielzahl unterschiedlicher HTML-ELemente gibt.
• … dass diese durch Tags beschrieben werden und Attribute/Eigenschaften haben können.
• … dass sich diese Elemente ineinander verschachteln lassen.

Um diese ganzen Codeschnipsel jetzt für einen Browser anzeigbar zu machen, muss man sie zu einem .html-Dokument zusammenfassen. Dieses muss bestimmte Vorgaben erfüllen, damit es von möglichst vielen Browsern fehlerfrei verarbeitet werden kann.

Aufbau eines HTML-Dokuments

Es ist wichtig, dass man diesen Aufbau versteht und verinnerlicht, da sich gerade hier durch die Umstellung auf HTML5 einige gewichtige Änderungen ergeben haben. Um später die Unterschiede zwischen HTML4 und HTML5 besser zeigen zu können, gehe ich hier erstmal vom Aufbau in HTML4 aus.

Jedes .html-Dokument gliedert sich grundsätzlich in einen <head>- und einen <body>-Bereich.

Im <head>-Bereich stehen Anmerkungen, die die Seite an sich beschreiben, Verknüpfungen zu externen CSS-Dateien und möglicherweise Javascripten. Im <body>-Teil befindet sich dann der eigentliche Inhalt der Seite, also alle die Elemente, die der Browser anzeigen soll.

Eingerahmt werden <head> und <body> von einem öffnenden <html>-Tag und einem schließenden </html>-Tag.

Zuletzt ist es noch wichtig, dem Browser mitzuteilen, was für eine Art von Datei er eigentlich vor sich hat. Dies geschieht mit dem <!DOCTYPE>-Tag. Das <!DOCTYPE>-Tag ist eines der Tags, das sich in HTML stark vereinfacht hat.

Eine minimale .html-Datei sieht also folgendermaßen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

</head>
<body>

</body>
</html>

Das Resultat wäre eine formal richtige, aber noch ziemlich leere Website, die man nun mit weiteren Inhalten füllen kann:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head> <!-- Anfang vom head-Bereich -->
   <title>Titel der Website</title>
   <meta name="author" content="Arne / FW:Look!">
</head> <!-- Ende vom head-Bereich -->

<body> <!-- Anfang vom body-Bereich -->
   <div id="header">
      Möglicherweise der Kopf-Bereich der Website
   </div> <!-- Ende von header -->

   <div id="wrapper"> <!-- Box die andere Boxen zusammenfasst -->

      <div id="navigation">
         <ul>
            <li><a href="http://www.fwlook.de">Start</a></li>
            <li><a href="http://www.fwlook.de/mediengestalter-abschlusspruefung/">Abschlussprüfung 2013</a></li>
            <li><a href="http://www.fwlook.de/kategorie/design/">Design</a></li>
         </ul>
      </div> <!-- Ende von navigation -->
      
     <div id="article">
         <p>
            Ein erster Textabsatz.
         </p>
         <p>
            Ein zweiter Textabsatz.
         </p>
      </div> <!-- Ende von article -->

   </div> <!-- Ende von wrapper -->

</body><!-- Ende vom body-Bereich -->

</html>

Da ist jetzt mit einem Mal eine ganze Menge dazu gekommen und ich kann mir gut vorstellen, dass das auf den ersten Blick ziemlich verwirrend aussieht.

Da hier nun einige Elemente verschachtelt wurden, macht man sich am besten erstmal klar, welche Elemente zusammen gehören und welche Elemente welche umschließen.

Zum Beispiel umfasst der <head>-Tag nun die beiden Tags <title> und <meta>. Mit <title> beschreibt man den Titel der Seite. Dieser ist zum einen wichtig für Suchmaschinen, zum anderen erscheint er in den meisten Browsern in der Titelleiste oder im jeweiligen Tab.

Das <meta>-Tag transportiert Beschreibungen über die Seite. In diesem Fall mit dem Attribut “author” den Namen des Autoren.

Auf jedes einzelne Element einzugehen wäre eine Mammutaufgabe und ist nicht Ziel des Beitrags. Wer sich genauer über die einzelnen Elemente informieren möchte, findet wie gesagt auf SELFHTML.org eine sehr schöne Liste.

An dem Beispiel noch wichtig ist, dass man erkennt, dass die Seite hier mittels vier div-Boxen in unterschiedliche Bereiche eingeteilt wurde und das jede der Boxen eine eigene ID bekommen hat.

Da sind die Divs mit den IDs “header” (VORSICHT! Nicht verwechseln mit <head>!) , “wrapper“, “navigation” und “article“. Sie unterteilen die Seite in einen Kopfbereich, in dem z.B. ein Logo stehen könnte und einen Inhaltsbereich, der in sich nochmal in die Navigation und den einzelnen Artikel unterteilt wurde.

Was genau es mit den IDs auf sich hat, werden wir im Abschnitt “Grundaufbau von CSS” sehen. Und warum diese Einteilung wichtig ist, kommt bei den Unterschieden zwischen HTML4 und HTML5 zum tragen.

Ich denke, dass nun jeder zumindest eine ungefähre Vorstellung davon hat, wie ein .html-Dokument und seine einzelnen Elemente aufgebaut sind und zusammenhängen.

Wer sich selbt überprüfen möchte, sollte versuchen die folgenden Fragen zu beantworten:

1. Was ist die Aufgabe von HTML?
2. Was ist die Aufgabe von CSS?
3. Was unterscheidet die beiden?
4. Was ist die grundsätzliche Syntax eines HTML-Elements?
5. Nenne fünf unterschiedliche HTML-Elemente und mindestens ein benötigtes Attribut pro Element
6. Welche vier Elemente muss jedes .html-Dokument enthalten?
7. Was für Inhalte findet man im <head>-Bereich, was für welche im <body>?
8. Wie lautet der Code für eine unsortierte Liste, die drei Links als Elemente enthält?

Die Lösungen sollten sich eigentlich aus dem bisherigen Teil ergeben. Wenn es dennoch Fragen gibt, werde ich die gerne in den Kommentaren beantworten.

Das HTML-Boxenmodell

Das Boxenmodell in HTML war wohl schon öfter mal Teil der Prüfung. Ob das auch unter dem Punkt HTML5-Struktur auftaucht halte ich für fraglich, aber man weiß ja nie. Außerdem schadet es nicht, wenn man es mal gehört hat.

HTML-Elemente sind eigentlich immer rechteckige Boxen. Man unterscheidet noch zwischen “Block”- und “Inline”-Elementen, aber das ist an dieser Stelle nicht wichtig.

Jede Box hat eine Höhe (height) und Breite (width). Die Abmessungen ergeben sich, wenn man sie nicht extra definiert, aus der Größe des Inhalts. Außerdem kann man jeder Box noch einen Außenabstand (margin), wie die Konturenführung in InDesign, einen Innenabstand (padding), gibt es bei InDesign nur bei Textrahmen, und einen Rahmen (border) geben.

Das Boxenmodell beschreibt nun, von wo nach wo welche Größe wirkt und wie sie sich auf die Gesamtgröße des Elements auswirkt.

Das HTML-Boxenmodell
(Quelle: arne / fwlook.de)

Hier könnte sich eine hinterhältige Rechenaufgabe verbergen!

Denkbar wäre, dass man anhand von diversen Größenangaben ausrechnen soll, wie viel Platz ein Element tatsächlich einnimmt. Zum Beispiel:

width = 600px
padding = 15px
border = 2px
margin = 20px

Wie breit ist Box tatsächlich?

Tatsächliche Breite = width + 2 × padding (links und rechts!) + 2 × border (links und rechts!) + 2 × margin (links und rechts!)

= 600px + 2 × 15px + 2 × 2px + 2 × 20px
= 600px + 30px + 4px +40px
= 674px

Obwohl die Breite mit 600 Pixeln angegeben wurde, ist die Box eigentlich ganze 674 Pixel breit.

Was das Ganze noch ein wenig komplizierter machen könnte ist, dass sich die Abstände für links, rechts, oben und unten auch einzeln und unterschiedlich angeben lassen.

z.B.:

margin-top: 20px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 10px;

Womit wir elegant den Übergang zum CSS geschafft hätten.

Grundaufbau von CSS

Wie anfangs beschrieben, ist es die Aufgabe von CSS das Aussehen der HTML-Elemente zu beschreiben.

Dazu legt man erst fest, was für ein Element man beschreiben möchte und gibt dann die Werte für einzelne Attribute an. Die Syntax für CSS lautet:

Selektor { Attribut: Wert(e); }

Selektoren gibt es eine ganze Menge unterschiedliche. Da es hier nur um Gundlagen geht, werde ich mich auf die drei gebräuchlichsten beschränken.

Der Universalselektor *

Mit dem Universalselektor spricht man alle Elemente der Seite an. Sollte ich beispielsweise wollen, dass wirklich alle Elemente auf meiner Seite einen roten 1 Pixel breiten Rahmen bekommen, würde das so aussehen:

* { border: 1px #f00; }

#f00 entspricht dabei der Farbe Rot im Hexadezimalsystem. Einen sehr ausführlichen Artikel über Farbangaben in CSS gibt es hier.

Typselektor

Mit dem Typselektor kann ich alle Elemente eines bestimmten Typs auf meiner Seite auswählen. Möchte ich zum Beispiel, dass nicht alle Elemente, sondern nur die Links einen roten Rahmen bekommen, kann ich diese über ihren Typ “a” direkt ansprechen:

a { border: 1px #f00; }

Man kann diese Typenangaben auch kombinieren. Beispielsweise könnte ich wollen, dass alle Links und alle Bilder den gleichen Rahmen bekommen.

a, img { border: 1px #f00; }

Wichtig ist hier das Komma zwischen den beiden Typen. Würde man dies weglassen, würde man nicht alle Links und alle Bilder ansprechen, sondern alle Bilder, die sich innerhalb eines Links befinden, wie z.B. in dem Beispiel mit unserem Logo weiter oben.

a img { border: 1px #f00; }

Die beiden sehen sich sehr ähnlich, ergeben aber unterschiedliche Resultate.

ID-Selektor #

Wie in dem Beispiel für den Aufbau eines .html-Dokuments gesehen, kann man einzelnen Elementen IDs zuweisen. Wichtig ist, dass sich IDs immer nur genau einem Element zuweisen lassen. Es darf also z.B. keine zwei Divs mit der ID “wrapper” geben.

<body> <!-- Anfang vom body-Bereich -->
   <div id="header">
   </div> <!-- Ende von header -->

   <div id="wrapper"> <!-- Box die andere Boxen zusammenfasst -->

      <div id="navigation">
      </div> <!-- Ende von navigation -->
      
     <div id="article">
      </div> <!-- Ende von article -->

   </div> <!-- Ende von wrapper -->

</body><!-- Ende vom body-Bereich -->

Mit dem ID-Selektor lassen sich jetzt einzelne Elemente gezielt ansprechen.

#wrapper {
   width: 800px;
   background: #ddd;
}

#navigation {
   margin: 5px;
}

Klassenselektor .

Während man eine ID immer nur an genau ein Element vergeben darf, kann man einer Klasse mehrere Elemente zuordnen. Dies ist vor allem dann sinnvoll, wenn es auf der Website wiederkehrende Elemente gibt. Ein Beispiel wären Infoboxen, von denen es mehrere in einem Text geben könnte.

<body> <!-- Anfang vom body-Bereich -->
   <div id="header">
   </div> <!-- Ende von header -->

   <div id="article"> <!-- Box die andere Boxen zusammenfasst -->

      <div class="infobox">
         Box mit Infos 1
      </div>
      <p>
         Hier steht ganz viel Text
      </p>

      <div class="infobox">
         Box mit Infos 2
      </div>
      <p>
         Hier steht ganz viel Text
      </p>

      <div class="infobox">
         Box mit Infos 3
      </div>
      <p>
         Hier steht ganz viel Text
      </p>

   </div> <!-- Ende von article -->

</body><!-- Ende vom body-Bereich -->

Damit die Infoboxen leicht also solche wiedererkannt werden, bietet es sich, dass sie alle gleich aussehen.

Deshalb haben sie alle die Klasse “infobox” bekommen, die man nun an einer Stelle definieren kann. Die Angaben wirken sich auf alle Elemente mit dieser Klasse aus.

.infobox {
   width: 60px;
   height: 50px;
   background: #000;
   border: 1px #0f0;
}

Mehr Informationen zu Selektoren, deren Kombination und Kaskadierung findet man in diesem Artikel und in Kevins Beitrag zur CSS-Kaskade.

Inline-Styles, das <style>-Tag und externe Stylesheets

Nachdem wir jetzt gesehen haben, wie man mittels CSS das aussehen unterschiedlicher Elemente verändern kann, bleibt noch die Frage offen, wo man diese CSS-Definitionen notiert.

Dafür gibt es drei Möglichkeiten:

Inline-Styles

Inline-Styles heißen Inline-Styles, da man sie direkt im HTML-Quelltext notiert. Zum Beispiel ein Absatz in roter Schrift:

<p style="color: #f00;">Hier der Text</p>

Inline-Styles werden aus vielerlei Gründen nicht mehr genutzt. Der Hauptgrund ist, dass man versucht Content und Design möglichst voneinander zu trennen. Die Design-Anweisung direkt in den Quelltext zu schreiben ist da das genaue Gegenteil.

Außerdem müsste man für jeden Absatz, den man gerne rot haben möchte, die Anweisung erneut notieren. Das ist, gerade bei großen Websites nicht nur aufwändig, sondern auch sehr fehleranfällig. Auch wenn sich am Layout mal etwas ändert, müsste man diese Änderung an jedem einzelnen Absatz korrigieren.

Aus diesen Gründen gibt es meines Wissens nach nur noch einen einzigen Einsatzort für Inline-Styles. HTML-Newsletter haben keinen <head>-Bereich, in dem man Styles notieren könnte und erlauben auch kein Einbinden von externen Stylesheets. Deshalb muss man hier auf die Inline-Styles zurückgreifen. Sollte noch jemand einen Einsatzort kennen, lasse ich mich aber gerne eines Besseren belehren.

Das <style>-Tag im <head>

Die zweite Möglichkeit ist, dass man die CSS-Anweisungen für eine .html-Datei zentral im <head>-Bereich der Seite definiert. Dazu schreibt man die Anweisungen zwischen ein öffnendes <style> und ein schließendes </style>.

<head>
<title>Styles im Headbereich</title>
<style>
   .infobox {
      width: 60px;
      border: 1px #00f;
   }
</style>
</head>

<body>
   <div class="infobox">
      Informationen
   </div>
</body>

Diese Art der Definition hat gegenüber den Inline-Styles den Vorteil, dass man Inhalt und Design wieder zumindest ein Stück weit voneinander getrennt hat. Außerdem hat man die Anweisungen etwas übersichtlicher und zentraler.

Allerdings bleibt, gerade bei Webseiten mit vielen Seiten, der Nachteil, dass man bei Änderung die Korrektur an jeder einzelnen Seite wiederholen müsste. Das ist unpraktisch und immernoch ziemlich fehleranfällig.

Externe Stylesheets

Um Style-Definitionen nurnoch an genau einer Stelle zu haben, kann man die CSS-Anweisungen in eine externe Datei auslagern und diese auf den einzelnen Seiten im <head> einbinden.

<head>
   <link rel="stylesheet" type="text/css" href="formate.css">
</head>

Dies hat den Vorteil, dass man nun Content und Design endgültig in zwei unterschiedlichen Dateien getrennt hat. Ändert man in der formate.css etwas, wirkt sich dies automatisch auf alle Seiten, in denen diese Datei eingebunden ist, aus. Änderungen müssen nur noch an genau einer Stelle vorgenommen werden.

Aus diesen Gründen nutzt man in der Praxis eigentlich fast nur noch diese Variante.

Nun sollte jeder ein Grundverständnis dafür haben, was HTML und CSS sind, wofür sie gut sind, wie sie funktionieren und wie zusammenhängen.

Was hat es nun also mit HTML5 auf sich?

Unterschiede zwischen HTML4 und HTML5

Mit HTML5 wurden eine Reihe neuer Tags eingeführt. Einige alte haben sich verändert und einige sind ganz weggefallen.

Auf jedes einzelne Tag einzugehen wäre jetzt etwas sehr mühselig, weshalb ich mich auf die größten Neuerungen beschränken werde.

Tags zur Strukturierung

In HTML5 gibt es eine ganze Reihe von Tags, die den Inhalt der Seite strukturieren sollen. Das, was ich in diesem Beispiel mit den IDs gemacht habe, bringt HTML5 jetzt gleich selbst mit.

So sah eine sehr einfache Struktur in HTML4 aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head> <!-- Anfang vom head-Bereich -->
   <title>Titel der Website</title>
   <meta name="author" content="Arne / FW:Look!">
</head> <!-- Ende vom head-Bereich -->

<body> <!-- Anfang vom body-Bereich -->
   <div id="header">
   </div> <!-- Ende von header -->

   <div id="article"> <!-- Box die andere Boxen zusammenfasst -->

      <div class="infobox">
         Box mit Infos 1
      </div>
      <p>
         Hier steht ganz viel Text
      </p>

      <div class="infobox">
         Box mit Infos 2
      </div>
      <p>
         Hier steht ganz viel Text
      </p>

   </div> <!-- Ende von article -->

</body><!-- Ende vom body-Bereich -->
</html>

In HTML5 sind nun die Tags <header>, <nav>,<article>, <section>, <aside>, <hgroup> und <footer> dazu gekommen, mit denen sich die IDs einsparen lassen.

Das Beispiel von oben sähe in HTML5 dann in etwa so aus:

<!DOCTYPE html>
<html>

<head> <!-- Anfang vom head-Bereich -->
   <title>Titel der Website</title>
   <meta name="author" content="Arne / FW:Look!">
</head> <!-- Ende vom head-Bereich -->

<body> <!-- Anfang vom body-Bereich -->
   <header>
   </header> <!-- Ende von header -->
   <nav>
      Hier wäre der Code für die Navigation
   </nav>

   <article> <!-- Box die andere Boxen zusammenfasst -->

      <header>
         <hgroup>
            <h1>Überschrift erster Ordnung</h1>
            <h2>Unterzeile</h2>
         </hgroup>
      </header>
      <section>
      <p>
         Hier steht ganz viel Text
      </p>
      </section>
      <section>
      <p>
         Hier steht ganz viel Text
      </p>
      </section>
      <footer>
      <p>
         Zusätzliche Informationen
      </p>
      </footer>

   </article> <!-- Ende von article -->

   <footer>
   <p>
      Zusätzliche Informationen
    </p>
   </footer>

</body><!-- Ende vom body-Bereich -->
</html>

Das <header>-Tag definiert jetzt den Kopf zusammengefasster Elemente. VORSICHT! man darf es nicht mit dem <head>-Tag verwechseln, dass den Meta-Bereich des .html-Dokuments kennzeichnet.

Es kann sich dabei auf die gesamte Seite beziehen, wie zum Beispiel einen Bereich am Seitenanfang, in dem sich das Logo und ein Motto oder Ähnliches befindet. Allerdings kann man auch für einzelne Unterbereiche wie <article> Header definieren.

Mit <nav> definiert man den Bereich für die Navigation.

Ein <article> ist eine inhaltlich vollständige und abgeschlossene Einheit. Sie soll unabhängig vom Rest der Seite für sich alleine stehen können. Beispiele wären ein Forumseintrag oder ein vollständiger Blogpost.

Mit der neuen <section> kann man Seiten in kleinere Einheiten Unterteilen. Dies können zum einen inhaltliche Unterteilungen, wie z.B. einzelne Kapitel innerhalb es eines Artikels sein, aber auch formale Einheiten wie der Header oder der Footer.

Das <aside>-Tag nutzt man, um Anmerkungen zum Inhalt zu kennzeichnen. Der Inhalt des <aside>-Tags soll eine Ergänzung zu den ihn umgebenen Inhalten sein, beispielsweise eine Infobox mit Erklärungen von Fremdwörtern, die im Text neben der Box auftauchen.

Eine <hgroup> dient dazu Überschriften verschiedener Ordnung zusammenzufassen. Sinnvoll ist dies, wenn man eine große <h1>-Überschrift hat und diese mit einer <h2> Vor- oder Unterzeile ergänzen möchte.

Werden diese beiden mit einer <hgroup> umschlossen, werden sie vom Browser und den Suchmaschinen als eine Einheit erkannt und nicht als zwei unabhängige Überschriften.

In dem mit <footer> markierten Bereich sollen sich laut Definition Informationen zu dem Element befinden, in dem sich der <footer> befindet.

Typischerweise wären das Informationen zum Autor, wenn es sich um einen Forums- oder Blogpost handelt, Links zum Impressum, beim Footer einer ganzen Seite, oder Ähnliches.

Wichtig ist auch hier, dass man sich nicht dadurch verwirren lässt, dass der Begriff “Footer”, ähnlich wie “Header”, häufig in zwei Bedeutungen verwendet wird.

Bisher sprach man als “Footer” in der Regel vom unteren Teil einer gesamten Seite. In unserem Fall zum Beispiel wäre dies der Kasten mit den Links ganz unten. Mit “Header” war in der Regel der oberste Teil einer Website gemeint. Auf FW:look! wäre das der Bereich mit der Navigation und dem Logo.

In HTML5 kann man nun für jedes einzelne Element, wie Artikel oder Sektionen, einzelne “Header” und “Footer” definieren.

Funktionen, die früher durch Scripte gelöst wurden

Einige Funktionen und Effekte, für die man vor HTML5 noch die Hilfe von Javascript oder anderen zusätzlichen Sprachen brauchte, lassen sich nun direkt in HTML5 lösen.

Zum Beispiel ermöglicht das <details>-Tag einen Bereich zu definieren, der erst nach dem Anklicken der Zusammenfassung ( <summary> ) geöffnet wird.

Auch beim <input>-Feld hat sich einiges getan. Es sind eine ganze Reihe neuer Arten von Eingabefeldern hinzugekommen, mit denen sich jetzt sehr genau beschreiben lässt, was für eine Art der Eingabe das Feld erwartet und verarbeitet. Die Validierung, also Überprüfung, ob der Inhalt korrekt ist, übernimmt jetzt der Browser direkt.

Zum Beispiel beim Feld “E-Mail” in einem Kontaktformular soll sichergestellt sein, dass der Nutzer dort auch wirklich eine E-Mailadresse angibt.

In HTML4 gab es als Eingabemöglichkeit nur das Textfeld

<input type="text" value="IhrName@Provider.de" id="e-mail"></input>

Um nun zu überprüfen, ob dort tatsächlich eine E-Mailadresse eingetragen wurde, musste man den Inhalt des Feldes beispielsweise mit Javascript auslesen und mit verschiedenen Text-Operationen rausfinden, ob der Inhalt wirklich der Form Name@Provider.de entspricht.

In HTML5 gibt es nun den Typus “email”.

<input type="email" value="IhrName@Provider.de"></input>

Tippt man in so einem Feld etwas ein, überprüft der Browser ganz von alleine, ob der Inhalt der Syntax einer E-Mailadresse entspricht. Gleiches gilt z.B. für die Typen “date” oder “url“. Hier gibt es eine Liste aller Attribute des <input>-Feldes und alle verfügbaren Typen.

Darüber hinaus unterstützt HTML5 nun einige Javascriptfeatures deutlich besser. Zum Beispiel kann man mit dem <canvas>-Tag nun Bereiche definieren, in denen man mittels Javascript direkt auf der Website interaktiv zeichnen kann.

Ein weiteres Beispiel ist die Implementierung des Drag&Drop-Mechanismus, der es dem Nutzer erlaubt Elemente auf einer Website mit der Maus zu “packen” und zu verschieben, wie man es von Dateien im Windows-Explorer oder Finder gewohnt ist.

Einbinden von Multimedia-Inhalten

Wollte man in HTML4 ein Video oder eine Sound-Datei einbinden, so benötigte man dafür in der Regel ein externes Plugin wie Flash, Quicktime oder Realtime.

HTML5 stellt nun eine Reihe von Elementen zur Verfügung, mit denen dies nun auch direkt über HTML geht und man auf zusätzliche und störungsanfällige Erweiterungen verzichten kann.

Mit dem <audio>-Tag muss man nun nurnoch den Pfad zu einer Audio-Datei angeben. Den Player samt Bedienelementen und Abspieloptionen stellt HTML selbst zur Verfügung.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio> 

Auf die selbe Weise lassen sich nun auch Videos mit dem <video>-Tag im Grunde ganz einfach in eine Website integrieren.

Ist man dennoch auf Content aus einem Plugin angewiesen, kann man nun mit dem <embed>-Tag einen Container für dieses Plugin definieren. Dadurch sind Plugin und restlicher Quelltext sauber voneinander getrennt.

Die DOCTYPE-Deklaration

Die Doctype (Document-Type) Deklaration teilt dem Browser mit, was für eine Art von Datei er zu erwarten hat. Daher sollte sie die erste Zeile in jedem .html-Dokument sein.

In HTML4 gibt es insgesamt drei verschiedene Arten von diesen Deklarationen, die sich darin unterscheiden, wie streng die Regeln bezüglich der Deklaration der einzelnen Elemente angewandt wurden. Die strengste ist HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

In HTML5 fällt diese Überprüfung der Regelanwendung weg. Daher ist es nicht mehr nötig anzugeben, welche angewandt werden soll und die ganze Deklaration wird erheblich handlicher.

<!DOCTYPE html>

Wer sich gerne mehr mit der DOCTYPE-Deklaration beschäftigen möchte, findet hier einige Infos. Für uns Mediengestalter ist aber eigentlich nur wichtig, dass die Deklaration nun deutlich einfacher geworden ist.

Neben den hier vorgestellten Neuerungen gibt es noch viele andere Tags, die mehr oder weniger große Veränderungen erfahren haben. Allerdings sind die Neustrukturierung, das Ersetzen von Scripten, das native Einbinden von Multimedia-Inhalten und die Änderung der DOCTYPE-Deklaration die meiner Meinung nach wirklich wichtigen.

Alles, was darüber hinaus geht, führt dann schon sehr tief in die Materie und ist für alle nicht-Onliner kaum noch relevant. Wer dennoch den Ehrgeiz besitzt da tiefer einzutauchen, findet beispielsweise hier eine Liste aller neuen HTML5-Tags samt Erklärungen und Attributen.

Warum und wofür HTML5 gut ist

Nachdem wir nun die Unterschiede zwischen HTML4 und HTML5 herausgearbeitet haben, bleibt natürlich noch die Frage, warum man das alles macht.

Seit Jahren wird versucht, dass Netz maschinell semantisch durchsuchbar zu machen. Soll heißen: Eine Suchmaschine soll nicht nur den reinen Inhalt einer Website erkennen, sondern auch ablesen können, in welcher Verbindung ein Teil der Website zu einem anderen steht.

Das was der Leser ganz automatisch macht, war für die Algorithmen bisher unmöglich. Mit den Tags zur Strukturierung macht HTML5 einen großen Schritt in Richtung “Semantisches Netz“.

Werden diese konsequent und konsistent eingesetzt, ist es für Suchmaschinen bald viel einfacher zu erkennen, welche Text- und Bildteile zueinander gehören, welche den tatsächlichen Kern der Seite ausmachen und was Ergänzungen oder Anmerkungen sind. Sollte sich dies durchsetzen, wird die Qualität der Suchergebnisse noch deutlich steigen. Darüber hinaus ergeben sich noch ganz neue Möglichkeiten, da dann maschinell die Website nicht nur in technische, sondern vor allem in inhaltliche Abschnitte unterteilt werden kann.

Mit den Tags zum Einbetten von Multimedia-Inhalten versucht man sich der lästigen Plugins zu erledigen.

Vermutlich hat jeder schon mal erlebt, dass man bestimmte Inhalte nicht ankucken konnte, da das passende Plugin veraltet war oder gleich ganz fehlte.

Da man Sounds und Videos nun direkt mittels HTML einbinden kann, entfällt das lästige Pluginsuchen und -updaten. Die ganze Arbeit übernimmt der Browser.

Kein Flash in iOS
(Quelle: http://www.conducthq.com)

Dies ist besonders wichtig, wenn das Ausgabegerät bestimmte Plugins gar nicht erst unterstützt. Beispielsweise verweigert Apple ja bekanntermaßen das Ausführen von Flash auf den iPhones und iPads. Flashbasierte Multimediaplayer werden dort einfach nicht ausgeführt oder erzeugen eine Fehlermeldung.

Ein weiterer ganz großer Vorteil ist, dass sich nun Audio-Daten und Videos als HTML-Elemente wie Bilder per CSS ansprechen und stylen lassen. Auch für Javascript werden die Elemente nun deutlich einfacher erfassbar. Was für Möglichkeiten zur Websitegestaltung sich daraus ergeben, lässt sich derzeit noch gar nicht absehen. Wir dürfen uns allerdings schon auf sehr ausgefallene und beeindruckende Anwendungen freuen!

Das HTML5 einige Funktionen mitbringt, die vorher nur mittels zusätzlicher Scripte realisierbar waren oder zumindest bessere Schnittstellen anbietet, ist vor allem für Entwickler eine deutliche Erleichterung.

Aber auch die Nutzer werden davon profitieren, denn um so mehr man als Entwickler selbst hinzufügen muss, um so mehr Möglichkeiten für Fehler oder Schwierigkeiten mit Kompatibilität von unterschiedlichen Elementen gibt es.

Außerdem werden Seiten deutlich performanter, sprich schneller, um so weniger zusätzliche Scripte oder Plugins zusätzlich zum HTML und CSS geladen werden müssen. Dies ist besonders interessant, da die Internetnutzung über mobile Geräte wie Handys oder Tablets immer weiter steigt, und diese aufgrund von Tarifen und Übertragungsraten nach einer möglichst geringen Datenmenge verlangen.

Warum und wofür HTML5 nicht gut ist

Wenn HTML5 so viele tolle Funktionen bietet, warum nutzt das noch nicht jeder?

Einerseits ist HTML5 einfach noch zu neu. Es werden längst noch nicht alle Tags von allen Browsern korrekt interpretiert und wiedergegeben. Gerade bei älteren Browsern kann es passieren, dass die die Website überhaupt nicht verarbeiten können.

Da man nie voraussehen kann, mit was für Software der Nutzer versucht die Seite zu laden, müsste man also sowohl eine HTML4- als auch eine HTML5-Version zur Verfügung stellen können. Dies bedeutet zwar größeren Komfort, aber auch einen sehr viel größeren Pflege- und Wartungsaufwand.

Andererseits haben sich bei vielen Tags noch keine einheitlichen Standards durchgesetzt. Beispielsweise beim <video>-Tag akzeptieren Browser jeweils nur unterschiedliche Formate:

- Quelle

Solange sich die Browserhersteller nicht geeinigt haben, werden wohl noch viele zögern ihre Webseiten komplett auf HTML5 umzustellen.

Ganz davon abgesehen ist es natürlich auch ein ganz enormer Aufwand eine bestehende Website komplett umzustellen, da man, will man HTML5 wirklich konsequent anwenden, bis ans absolute Grundgerüst ran muss. Um so größer eine Webseite ist, um so mehr Arbeit macht das und um so größer ist die Gefahr, dass man eigentlich funktionierende Mechanismen stört.

Ich hoffe, ich konnte auch Gestaltern, die mit der Gestaltung fürs Web sonst nicht so viel zu tun haben einen ausreichenden Überblick verschaffen.

Teilt eure Fragen, Ergänzungen oder Kritik gerne in den Kommentaren. Ich bin mir sicher, dass das Thema HTML5 groß genug ist, dass man hier noch eine Menge anfügen kann.

Zusätzliche Links und Resourcen

• Eine sehr sehr große Fülle an Informationen rund um HTML und CSS bietet die w3school. Wer gerne sein Wissen testen möchte, findet dort beispielsweise ein HTML5-Quiz.
• Viele nützliche Tools und Artikel gibt es auf selfhtml5.org. Unter anderem eine interaktive Karte, die die einzelnen HTML-Elemente ähnlich einem Periodensystem auflistet.
• Natürlich hat auch die Wikipedia einen sehr ausführlichen Beitrag zum Thema HTML5, der aber weit über das, was wir brauchen, hinausgeht.
• Auf html5rocks.com gibt es einige Beispiele, wie HTML5 in der Praxis genutzt werden kann. Dort kann man sich auch einige der Elemente in kleinen Beispielen ansehen und auch ausprobieren, wie z.B. die unterschiedlichen Input-Typen.
• Und auch zum “semantischen Web” gibt es auf Wikipedia einen umfangreichen Artikel mit einer Menge Hintergrundinformationen. Viel spannender finde ich allerdings diesen Artikel “Let’s Talk about Semantics“, der sich mit den Vor- und Nachteilen des semantischen Webs in der Praxis beschäftigt.

Auf YouTube habe ich noch diese Serie gefunden, die HTML5 ziemlich unterhaltsam vorstellt, auch wenn sie mehr oder weniger auffällig mit Werbung für den Internetexplorer gespickt ist.

Wenn man sich diese Teile auch noch alle gönnt, sollte eigentlich nichts mehr schiefgehen!

Viel Erfolg!

Der Beitrak HTML, HTML5 und CSS für Mediengestalter print erscheint auf FW: look! – Design Blog.

Grundsätzliches

Die in Photoshop anwendbaren Smart-Objekte sind Ebenen, welche Bilddaten von Raster- oder Vektorbildern enthalten. Somit bleibt das Quellbild mit allen seinen ursprünglichen Eigenschaften erhalten.
Smartfilter kann man auf Smart-Objekte anwenden, welche sich im Gegensatz zur normalen Filterverwendung, jederzeit anpassen, entfernen und ausblenden lassen. Also tragen Smart-Objekte maßgeblich zur non-destruktiven Bildbearbeitung bei.

Abb. 1
An dem viereckigen Symbol in der Ebenen-Palette erkennt man das Smart-Objekt.

Einsatzmöglichkeiten von Smart-Objekten

• Ausführen verlustfreier Transformation: skalieren, drehen, neigen, verzerren, perspektivisch transformieren und verkrümmen ohne ursprüngliche Bilddaten und deren Bildqualität zu verlieren, da sich die Veränderungen nicht auf die Originaldaten auswirken
• Arbeiten mit Vektordaten, da sie sonst gerastert würden
• Non-destruktives Anwenden von Filtern, da man sie jederzeit
  bearbeiten kann
• Mehrere Duplikate von einem Smart-Objekt können auf einmal geändert werden, indem man die Quelle bearbeitet
• Anwendung von Ebenenmasken möglich seit CS4

Smart-Objekte erzeugen

Es gibt mehrere Wege um Smart-Objekte zu erzeugen:

• Um eine Ebene in ein Smart-Objekt zu wandeln, wählt man Ebene > Smart-Objekte > In Smart Objekt konvertieren oder Rechtsklick auf die Ebene > In Smart-Objekt konvertieren oder Filter > Für Smartfilter konvertieren
• Einfügen einer Pixel- oder Vektordatei in eine geöffnet Datei über Datei > Platzieren
• Über Datei > Als Smart-Objekt öffnen, lassen sich Dateien direkt als Smart-Objekt öffnen. Es öffnet sich ein Duplikat der Originaldatei, dessen Ebenen auf eine Smart-Objekt-Ebene reduziert wurden.
• Illustrator-Dateien und -Ebenen lassen sich per Drag&Drop oder mit dem Einfügen-Befehl direkt in Photoshop als Smart-Objekt einsetzen.

Abb.2
Es gibt viele Möglichkeiten der Smart-Objekt-Konvertierung. Über die Ebenenpalette zu gehen ist einer.

Warum lässt sich das Smart-Objekt nicht bearbeiten?

Diejenigen Werkzeuge, welche die Pixeldaten direkt modifizieren, wie der
Pinsel, Stempel, Abwedler oder Wischfinger, können nicht auf Smart-Objekte
angewandt werden.
Eine Lösung ist das Rastern der Ebene, doch dann lässt sich das Bild nicht mehr
ohne Qualitätsverlust skalieren bzw. es ist keine nondestruktive Arbeitsweise
mehr möglich.
Die Quelldaten des Smart-Objekts zu bearbeiten, ist da schon eine sehr viel
bessere Lösung.
Dazu Rechtsklick auf das Smart-Objekt und Inhalt bearbeiten wählen. Nun öffnet sich eine zweite Datei mit den Daten, die im Smart-Objekt eingebettet sind. Diese kann nach Belieben bearbeitet werden.
Nach der Bearbeitung wird die Datei mit Datei > Speichern gespeichert. Das tatsächliche Ausgangsdokument bleibt übrigens unberührt, denn Photoshop erzeugt eine eigene Datei und legt diese in einem temporären Ordner ab.
Falls man noch Änderungen vornehmen möchte, sollte man die Datei geöffnet lassen. Also nie das Speichern vergessen, weil sonst die Änderungen in der Datei mit dem Smart-Objekt nicht zu sehen sind.
Wichtig: Bei aufwendigeren Bearbeitungen, bei denen neue Ebenen angelegt wurden, müssen diese vor dem Speichern auf eine Hintergrundebene reduziert werden – sonst funktioniert das Smart-Objekt nicht mehr.

Abb.3
Warum geht das nicht?!
Es können keine Werkzeuge auf Smart-Objekten angewendet werden, welche die Pixeldaten direkt modifizieren.

Kniff zur Bearbeitung gleicher Smart-Objekte

Man kann gleiche Smart-Objekte, welche mehrmals in einem Layout auftauchen,
ganz einfach bearbeiten, ohne jedes einzeln anzufassen.
Über Datei > Platzieren wählt man das zu platzierende Element. Nun erzeugt man mehrere Kopien dieses Ausgangs-Smart-Objekts, indem man es auf das Neue Ebene erstellen-Icon zieht oder unter Ebene > Neu > Ebene durch Kopie. Dadurch erzeugt man Duplikate, welche intern mit dem ersten Smart-Objekt zusammenhängen.
Nun kann man jedes Duplikat in Position, Größe, Drehung und Füllmethode ändern.
Um alle Smart-Objekte jetzt auf einmal auszutauschen, muss man nur das Smart-Objekt, von dem alle Kopien abstammen, aktivieren. Dann mit einem Rechtsklick > Inhalt ersetzen auswählen. Es erscheint das Platzieren-Dialogfenster. Einfach die neue Datei auswählen und es erscheint das neue Bild: mit den gleichen Eigenschaften, welche allen Duplikaten vorher gegeben wurden.

Abb.4
Es lassen sich gleiche Smart-Objekte,
welche mehrmals in einem Layout
auftauchen, ganz leicht auf einmal
anpassen.

Smartfilter

Smartfilter sind Filter, die auf Smart-Objekte angewendet werden. Sie erscheinen in der Ebenenpalette unter dem Smart-Objekt und lassen sich nondestruktiv anpassen, entfernen oder ausblenden (ähnlich wie Ebenenstile). Außer die Filter „Extrahieren“, „Verflüssigen“, „Mustergenerator“ und „Fluchtpunkt“ können alle Filter als Smartfilter angewendet werden. Zudem werden die Korrekturmöglichkeiten „Tiefen/Lichter“ und „Variationen“ (nicht mehr vorhanden in CS6) als Smartfilter angewendet.
Smartfilter lassen sich, wie Ebenenstile, ein- und ausblenden, indem man auf das Auge, neben dem Smartfilter in der Ebenenpalette klickt. Zudem kann eine Ebenenmaske auf die Smartfilter angewendet werden.

Abb. 5
Smart-Objekt-Ebene mit Smartfiltern.
1. Maske für Smartfilter
2. Filter ein- und ausblenden
3. Name des Smartfilters
4. Einstellungen zum Verändern von
Deckkraft und Füllmethode

Zur Bearbeitung von Smartfiltern klickt man doppelt auf den in der Ebenenpalette angezeigten Filter und stellt anschließend die Filteroptionen ein. Zudem lässt sich die Füllmethode und die Deckkraft des Smartfilters ändern. Hierzu auf das kleine Icon rechts vom Namen des Filters doppelklicken.

Abb.6
Nach Doppelklick auf das Icon neben
dem Filternamen (siehe Abb. 5, 4.)
erscheint der Fülloptionen-Dialog mit
den üblichen Füllmethoden und dem
Deckkraftregler.

Und zum guten Schluss: Smarte Tipps

• Bei der Transformation von Smart-Objekten, auf welchen Smartfilter angewandt wurden, werden während der Transformation die Filtereffekte deaktiviert. Ist die Transformation abgeschlossen, werden sie erneut angewendet.
• Dateien mit Smart-Objekten lassen sich in den Dateiformaten PSD, TIFF und PDF abspeichern.
• RAW-Dateien einer Kamera lassen sich in Photoshop als Smart-Objekte öffnen.
• Veränderungen der Bildgröße sind nicht ganz unproblematisch:
  Werden Komposings mit Smartfiltereinstellungen auf eine kleinere oder größere Bildgröße gerechnet, kann es passieren, dass die Filter verpuffen. Denn die „Radius“-Einstellungen (z.B. bei Tiefen/Lichter) bleiben in den Smartfiltereinstellungen gleich, sodass diese bei der neuen Bildgröße entweder viel zu grob sind oder aber verpuffen. Anders als bei Einstellungsebenen verändern Smartfilter die Farbwerte nicht linear, sondern berücksichtigen auch Konturen oder lokale Proportionen.

Der Beitrak Be smart: Smart-Objekte und -Filter erscheint auf FW: look! – Design Blog.

Sieht man sich im Netz und in den Büchern nach dem Begriff “Farbbeurteilung” um, findet man entweder gar nichts oder eine ganze Menge völlig unterschiedlicher Ansätze und Meinungen, was genau denn darunter zu verstehen sei.

Fest steht, dass es zumindest keine allgemeingültige Definition zu geben scheint, was sich hinter der Hülse “Farbbeurteilung” verbirgt. Daher lässt es sich auch nicht abschätzen, was für Fragen in der Abschlussprüfung für Mediengestalter zu erwarten sind. Es hilft wohl nur, dass Thema entweder gleich auf die “Streich ich sowieso“-Liste zu setzen oder sich sein Wissen möglichst breit anzueignen.

Aufteilung in zwei Hälften

Recherchiert man zur Farbbeurteilung, kristallisieren sich zwei Meinungen heraus, was darunter zu verstehen sei.

Die Einen gehen davon aus, dass es sich bei Farbbeurteilung um ein eher technisches Thema handelt. Es drehe sich hierbei um Stichworte wie Messverfahren, Druckkontrolle und Metamerie.

Andere gehen davon aus, dass es in der Abschlussprüfung eher um die Wirkung von Farbe, also um Farbpsychologie & Farbkontraste, und deren Einsatz geht.

Ich halte beide Wege für möglich und werde deshalb beide verfolgen. Um der daraus resultierenden Informationsflut Herr zu werden, habe ich beschlossen das Ganze aufzuteilen.

In diesem Artikel werde ich mich mit den Grundlagen und den technischen Aspekten auseinander setzen. Die Wirkung von Farbe und deren Beurteilung werde ich einen zweiten Beitrag widmen.

Ich setze ein gewisses Grundverständnis von Farbe und Farbmischung voraus und werde diese Themen nur anschneiden.

Warum die Beurteilung von Farbe so schwer aber absolut notwendig ist

Der erste Teil der Überschrift lässt sich ziemlich schnell erklären und ergibt sich bereits aus der Definition des Begriffs “Farbe” nach DIN 5033:

„Farbe ist diejenige Gesichtsempfindung eines dem Auge des Menschen strukturlos erscheinenden Teiles des Gesichtsfeldes, durch die sich dieser Teil bei einäugiger Beobachtung mit unbewegtem Auge von einem gleichzeitig gesehenen, ebenfalls strukturlosen angrenzenden Bezirk allein unterscheiden kann.“

Das Schlüsselwort dabei ist “Gesichtsempfindung”. Der Farbeindruck entsteht erst im Gehirn des Betrachters und wird beeinflusst von

• …den herrschenden Lichtverhältnissen
• …der Anatomie des Auges (Verteilung von Stäbchen & Zapfen und Sensibilität für die unterschiedlichen Wellenlängen [vgl. Farbwahrnehmung]), die bei jedem Menschen unterschiedlich ist
• …und die Verarbeitung im Gehirn, bei der der Farbreiz mit persönlichen Erfahrungen abgeglichen wird.

Betrachten also zwei Menschen den selben Gegenstand, ist es wahrscheinlich, dass sie nicht die gleiche Farbe sehen.

Dennoch ist es wichtig, dass man Farbe beurteilen kann. Ein wichtiger Aspekt dabei ist die Reproduzierbarkeit.

Wenn ich zum Beispiel den selben Prospekt in zwei Auflagen drucken lasse, möchte ich dennoch sicher sein, dass die Farben jeweils möglichst gleich aussehen. Egal wo und wann ich drucken lasse. Natürlich wäre das ein in der Praxis nicht erreichbares Ideal, aber es geht hier ja auch nur ums Prinzip.

Um überprüfen zu können, ob die Farben wirklich gleich sind, brauch ich also geeignete Mittel und Methoden, die eine objektive Farbbeurteilung ermöglichen.

Der erste Ansatz wäre, die Farbe visuell, also “durch Ansehen” zu beurteilen und dabei möglichst viele der oben genannten Einflussfaktoren auszuschalten

Metamerie und die ISO 3664

Das größte Problem beim Vergleichen von Farben ist die Metamerie bzw. metamere Farben. Als Metamerie bezeichnet man einen optischen Effekt, bei dem zwei Farben nur unter bestimmten Lichtverhältnissen gleich aussehen. Ändern sich die Lichtverhältnisse, könnte es passieren, dass der Farbeindruck plötzlich unterschiedlich ist.

Vergleicht man beispielsweise einen Proof und einen Auflagenbogen im Licht der Lampen in der Druckerei, können die Farben identisch wirken. Nimmt man dann beide mit nach draußen und schaut sie sich im Tageslicht an, kann es sein, dass die Farben plötzlich unterschiedlich aussehen.

Dies kann schnell zu Ärger mit Druckern oder Kunden führen! Wer hat denn jetzt recht?

Um unter anderem diesem Problem zu begegnen, wurde die ISO 3664 geschaffen. Sie legt fest, welche Bedingungen für eine standardisierte Abmusterung (Vergleich der Farben von Druckprodukten) erfüllt sein müssen.

1. Die Abmusterung muss unter D50 Normlicht stattfinden. D50 gibt die Lichttemperatur ( 5000 Kelvin ) an, die der Strahlung entspricht, die ein theoretischer schwarzer Körper abgibt, wenn man ihn auf 5000° Kelvin erhitzt. In diesem Licht sind alle Spektralanteile etwa gleichmäßig enthalten. Auf uns als Betrachter wirkt es allerdings eher kalt bläulich. Durch diese sehr gleichmäßige Spektralverteilung soll gewährleistet werden, dass nicht schon durch möglicherweise fehlende Anteile im Licht Verfälschungen in der Farbwirkung auftreten.
2. Die Lichtquelle muss einen Farbwiedergabeindex Ra > 90 haben. Mit dem Farbwiedergabeindex wird angegeben, wie sehr sich das tatsächlich abgegebene Licht der Lichtquelle vom Ideal der vergleichbaren Temperatur des schwarzen Körpers unterscheidet. Die Skala reicht von 100 (identisch) bis 0 (keine Gemeinsamkeiten). Die ISO 3664 stellt also hohe Ansprüche an die Qualität der Lichtquelle.
3. Die Umgebung muss eine neutral graue, matte Wand-Farbe besitzen. Die Wand soll matt sein, um Veränderungen des Farbeindrucks durch Reflexionen zu verhindern. Grau soll sie sein, um das Auge des Betrachters nicht durch eventuell Auftretende Farbkontraste zu beeinflussen.
4. Bei Auflicht muss die Beleuchtungsstärke 2000 Lux (+/- 500) betragen.

Wenn all diese Bedingungen erfüllt sind, bleiben als einzige Variable nur noch die Eigenarten des Auges des Beobachters. Allerdings sind hier die Abweichungen so gering, dass sich vergleichbare Farbbeurteilungen erzielen lassen.

Ein weiteres Merkmal, das man bei Farbe im Druck beurteilen könnte, ist die Dichte bzw. die Dicke des Farbauftrags.

Densitometrie

Das Messen der Dichte des Farbauftrags nennt man Densitometrie. Sie gibt Auskunft darüber, wie dick der Farbauftrag an einer bestimmten Stelle ist. Die Dicke des Farbauftrags und das Verhältnis von bedruckter zu unbedruckter Fläche bestimmt, wie viel Licht diese Stelle reflektiert bzw. remittiert und damit wie hell oder dunkel die Farbe an diese Stelle wirkt.

Dies zu überprüfen ist wichtig, da das Resultats und die Vorlage eigentlich identisch sein sollen.

Allerdings hat Druckfarbe einige physikalische Eigenschaften, die den Farbeindruck eines bestimmten Bereichs verfälschen können. Beispielsweise zieht sie, besonders bei Naturpapieren, ins Papier ein und der Bereich wird dadurch heller als er sein sollte. Oder die Druckfarbe läuft nach dem Setzen des Punktes auseinander und der Bereich wirkt dadurch dunkler, als er eigentlich sein sollte (vgl. Tonwertzuwachs).

Um diese Effekte zu kontrollieren und ihnen beim Auflagendruck entgegenzuwirken, ist es wichtig, dass man beurteilen kann, wie stark sich der Druck von der Vorlage unterscheidet. Dafür muss man wissen, wie viel heller oder dunkler der Druck im Vergleich zu der Vorlage ist. Anschließend kann man den Farbauftrag entsprechend kalibrieren.

Den Dichtewert “D” einer Farbe auf dem Papier misst man mit einem Densitometer.

Grundsätzlich schickt ein Densitometer einen Lichtstrahl auf den Bedruckstoff, fängt den vom Papier reflektierten Lichtstrahl wieder auf, filtert aus diesem eine Farbe heraus und misst, um wie viel die Intensität schwächer geworden ist.

Funktionsweise eines Densitometers: Es misst den Intensitätsunterschied zwischen dem einfallendem und dem reflektierten Licht
(Quelle: arne / fwlook.de)

Wichtig: Das Densitometer misst immer nur die Dichte genau EINER Farbe. Indem das reflektierte Licht erst mal einen Filter in der Komplementärfarbe zur Farbe, die vermessen werden soll, passieren muss, bevor es den Sensor erreicht, ist das eigentlich farbenblinde Densitometer in der Lage einzelne Farben zu unterscheiden.

Zuerst wird das Densitometer auf eine unbedruckte Fläche des Bedruckstoffes kalibriert. Der Bedruckstoff selbst absorbiert schon einen Teil des einfallenden Lichts. Damit dies die Dichtemessung nicht beeinflusst, wird als 100%-Remission (R=1) die Intensität definiert, die das unbedruckte Papier reflektiert.

Farbe auf dem Papier vermindert nun die Intensität des reflektierten Lichtstrahls. Als Maßeinheit gilt der Remissionsgrad R.

An dieser Stelle könnte sich bei dem Thema “Farbbeurteilung” in der Abschlussprüfung nun eine Rechenaufgabe verbergen!

Der Remissionsgrad wird nach folgender Formel berechnet

R = (Intensität des reflektierten Lichts / Intensität des einfallenden Lichts)

Wobei die Intensität des einfallenden Lichts bei der Kalibrierung ja als 100% definiert wurde.

Beispiel:

Intensität einfallend: 100%

Intensität reflektiert: 80%

R = (80/100) = 0,8

Da das Auge die Helligkeisveränderung nicht linear sondern logarithmisch wahrnimmt, d.h. bei hellen Farben sind Veränderungen sehr gut sichtbar, bei dunkleren bewirken auch größere Änderungen in der Dichte nur noch geringe Unterschiede in der Wahrnehmung, muss dies bei der Berechnung des Dichtewerts berücksichtigt werden.

Die Formel zur Berechnung des Dichtewerts lautet

D = lg( 1 / R )

Für den Remissionsgrad aus dem obigen Beispiel würde dies bedeuten:

R = 0,8

D = lg ( 1 / 0,8 ) = 0,097

In der Praxis druckt man mit der Maschine, mit der später gedruckt werden soll, auf dem Papier, dass auch für den Auflagendruck genutzt wird, einen Druckkontrollstreifen bzw. Medienkeil.

Fogra Medienkeile
(Quelle: Froebel Medientechnik)

Dieser besteht aus verschiedenfarbigen Feldern, die, je nach verwendetem Keil, in unterschiedlichen Abstufungen aufgerastert sind. Möglich ist auch, dass es Felder gibt, die aus einer Mischung der Primärfarben bestehen.

Nun misst man mit dem Densitometer die Dichte des Farbauftrags in den einzelnen Feldern und vergleicht diesen Wert mit dem Sollwert.

Trägt man diese Werte nun in ein Diagramm mit den % des gewünschten Farbdichte auf der X-Achse und dem tatsächlich gemessenen Wert auf der Y-Achse ein, erhält man die Druckkennlinie.

Die Druckkennlinie

Anhand der Druckkennlinie lässt sich beurteilen, bei welcher Farbdichte der tatsächliche Farbeindruck von dem gewünschten abweicht.

CMYK-Druckkennlinie, bei der man deutlich die Abweichung des Ist- vom Soll-Wert sieht
(Quelle: http://commons.wikimedia.org)

Auch wenn man aufgrund der physikalischen Eigenschaften der Druckfarbe das Ideal nicht erreichen wird, ist das Ziel doch, die Druckkennlinien der einzelnen Farben möglichst nah an der Diagonalen zu halten. Um dies zu erreichen kann man Einstellungen direkt bei der Erzeugung der Druckdaten, in den verwendeten Farbprofilen oder im RIP (Raster Image Processor) vornehmen.

Eine dritte Möglichkeit, um Eigenschaften von Farbe zu messen und zu beurteilen ist…

Das Spektralfotometer

Das Spektralfotometer ermittelt den Farbort im L*a*b-Farbraum eines Punktes auf dem Bedruckstoff.

Im Gegensatz zum Densitometer betrachtet das Spektralfotometer nicht nur eine der (Druck-)Farben, sondern den durch Farbmischung entstehenden Farbeindruck an einer Stelle des Drucks.

Grundsätzlich arbeitet das Spektralfotometer dabei ähnlich wie das Densitometer. Während das Densitometer allerdings einen weißen Lichtstrahl auf das Papier schickt , den reflektierten Lichtstrahl filtert und den Wert für genau eine Farbe betrachtet, bricht das Spektralfotometer den reflektierten Lichtstrahl in seine spektrale Zusammensetzung auf und misst die Remissionswerte über das gesamte Spektrum.

Densitometer und Spektralfotometer im Vergleich
(Quelle: arne / fwlook.de)

Aus diesen Werten ergibt sich die Remissionskurve, die dann genau einem Farbort zugeordnet werden kann. Um nun die Qualität und Farbtreue der Farben des Drucks zu beurteilen, kann man nun auch hier wieder den gemessenen Farbort mit dem Soll-Wert vergleichen.

Auch hier kann sich in der Abschlussprüfung eine Rechenaufgabe ergeben!

Das Spektralfotometer misst den Farbort der Probe und liefert die L*a*b-Koordinaten dieser Farbe.

Eine mögliche Aufgabe wäre nun, zu vergleichen, wie sehr sich die Farbe von der Vorlage unterscheidet und zu beurteilen, ob die Differenz noch tolerierbar ist.

Berechnung von Delta E ( Δ E)

Den Abstand zwischen zwei Farborten bezeichnet man als Delta E, in der Regel mit dem griechischen Buchstaben Δ gekennzeichnet.

Da wir es hier mit Koordinaten in einem dreidimensionalen Koordinatensystem (L-Achse, a-Ache & b-Achse) zu tun haben, entstammt die Berechnung eigentlich der Vektorrechnung. Die Formel zur Berechnung des Abstands von Farbort1 (L1*a1*b1) zu Farbort2 (L2*a2*b2) lautet:

ΔE = √[ (L1-L2)²+(a1-a2)²+(b1-b2)² ]

Das sieht vielleicht erst mal schlimm aus, aber wenn man sich klar macht, welcher Wert welcher ist, ist es eigentlich recht simpel.

Indem man die Koordinaten jeweils von einander abzieht, bildet man einen Vektor, der die beiden Punkte miteinander verbindet. Durch das quadrieren der einzelnen Werte, das anschließende addieren und schlussendlich das ziehen der Wurzel erhält man die Länge dieses Vektors. Damit weiß man, wie weit die beiden Punkte voneinander entfernt sind.

Zum Beispiel:

In der Vorlage hat der Punkt den L*a*b-Farbwert L=15, a=30 und b=25, was einem dunklen Rot entspricht.

Nach dem Druck wird der selbe Punkt auf dem Druck mit dem Spektralfotometer ausgemessen. Das Ergebnis lautet: L=17, a=28 und b=21, was immer noch ein Dunkelrot ergibt.

Wie groß ist nun die Differenz zwischen Vorlage und Druck?

Vorlage (15/30/25)

Druck (17/28/21)

ΔE=√[(VL-DL)² + (Va-Da)² + (Vb-Db)²]

= √[(15-17)² + (30-28)² + (25-21)²]

= √[-2² + 2² + 4²]

= √[4 + 4 + 16]

= √[24]

= 4,89

Für die Farbbeurteilung spielt dieser Wert eine Rolle, da sich anhand von Delta E einschätzen lässt, ob und wie stark der Farbunterschied sichtbar ist.

Dabei gilt die Faustregel

- Quelle: farbe.wisotop.de

Dazu, welches Delta E noch tolerabel ist, habe ich eine ganze Menge unterschiedlicher Auffassungen gefunden. Im Großen und Ganzen wird wohl alles < 4 noch akzeptiert, wobei es auch Stimmen gab, die ΔE gerne kleiner als 2,5 haben wollten. Ich würde mich über Kommentare von Leuten freuen, die in der Praxis damit zu tun haben und mir sagen können, mit welchen Werten bei ihnen gearbeitet wird.

Der MedienStandard Druck soll dazu auch Angaben machen. Man kann ihn sich in der aktuellen Auflage beim Bundesverband Druck und Medien kostenlos herunterladen – allerdings erst, wenn man sich da registriert hat.

Das Beispiel von oben mit seinem ΔE von 4,89 wäre aber wohl schon durchgefallen und der Druck hätte wiederholt werden müssen.

tl;dr:

• Das Thema Farbbeurteilung ist ekelhaft unpräzise und kann so ziemlich alles bedeuten
• Man kann visuell Farbe beurteilen, sollte sich dabei aber nach den Vorgaben der ISO 3664 richten und mögliche Metamerieeffekte bedenken.
• Die Farbdichte misst man pro Druckfarbe mit einem Densitometer. Dabei sind der Remissionsgrad R und die optische Dichte D wichtig.
• Die Druckkennlinie veranschaulicht den Unterschied zwischen IST und SOLL beim Farbauftrag und sollte möglichst flach sein.
• Den Farbort einer Farbe misst man mit dem Spektralfotometer. Der Abstand zwischen zwei Farben heißt Delta E / ΔE.

Was unterschlagen wurde

In diesem Beitrag dreht sich alles um Farbbeurteilung bei Druckprozessen. Über das Beurteilen von Farben am Monitor gibt es einen zwar schon etwas älteren aber eigentlich vollständigen Artikel von Andres Beitinger.

Außerdem wurde, wie eingangs angekündigt, der psychologische Ansatz der Farbwirkung bisher ausgelassen. Dies Thema ist in sich schon so komplex, dass es den Rahmen dieses Beitrags sprengen würde.

Weitere Informationen für die, die es ganz genau wissen wollen

Einen ziemlich guten Überblick über alles, was es rund um das Densitometer zu wissen gibt, verschafft einem dieses PDF von techkon. Gefunden habe ich es auf der Seite lepen.de.

Etwas umfassendere Informationen zum Normallicht D50 und der ISO3664 bietet dieser Artikel aus dem Publisher (PDF).

In diesem Artikel wird die Berechnung von Delta E sehr schön veranschaulicht und nochmal umfangreicher erklärt.

Und für die Leute, die gerne mit Farben rechnen oder sich für die exakten physikalischen Zusammenhänge begeistern können, gibt es auf der Seite von Bruce Lindbloom unter dem Punkt “Math” alles was das Herz begehrt.

Hier gibt es noch ein ziemlich interessantes Video von einem Spektralfotometer, dass ein ganzes Bild erfassen und dann Punkt für Punkt mit einer Vorlage vergleichen kann.

Im Channel von QuadTech gibt es auch noch einige Videos, die Entwicklungen in der Spektralmessung im Einsatz zeigen.

Und sprichwörtlich aus der Abteilung “Darf ’s noch ein wenig mehr sein?” gibt es hier die Doktorarbeit von Marie-Luise Sonja Wieser mit dem Titel “Vergleichende physikalische Farbmessung und sensorische Farbbeurteilung unter verschiedenen Beleuchtungssystemen an ausgewählten Brühwurstprodukten im Hinblick auf eine objektive Qualitätskontrolle in der Lebensmittelüberwachung” (PDF, 267 Seiten), in der ab Seite 52 Probleme und Lösungen bei der Farbmessung und Farbbeurteilung in der Praxis erläutert werden.

Habt ihr noch weitere sehenswerte Quellen? Gibt es Gesichtspunkte, die hier fehlen oder habt ihr noch Ergänzungen?

Der Beitrak Farbbeurteilung für die Abschlussprüfung erscheint auf FW: look! – Design Blog.

Das Problem: Beim “stylen” einer Webseite mittels CSS kann es immer mal wieder vorkommen, dass auf ein Element einer Seite (z.B. ein <h1> Element) mehrere Deklarationen aus verschiedenen Stylesheet zutreffen.

Welche Deklaration gibt nun das Aussehen vor?

Die CSS-Kaskade

Um die oben genannte Problematik zu lösen, gibt es seit CSS 2.1 fest eingeführte Regeln, die festlegen, in welcher Reihenfolge die Deklarationen der verschiedenen Stylesheets gewichtet werden. Beginnen wir mit Ebene 1, der am wenigsten gewichteten Regel.

Ebene 1: Browser-Stylesheets

Jeder Browser definiert selbst gewisse Regeln, wie bestimmte Elemente auszusehen haben. Diese Regeln werden als erstes angewendet, werden aber auch am einfachsten bzw. als erstes überschrieben. Ein Beispiel dafür ist der Standard-Abstand des <body> Elements zum Browserrand. Dieser muss – falls gewünscht – durch den Autor einer Webseite entfernt werden.

Ebene 2: User-Stylesheets

Bei User-Stylesheets handelt es sich um Einstellungen des Benutzers im Browser, die ebenfalls das Erscheinungsbild einer Webseite beeinflussen. Zum Beispiel die Definition einer bestimmten Schriftgröße.

Ebene 3: Autoren-Stylesheets

Dies sind die Stylesheets, die durch den Autoren – also durch den Entwickler – einer Webseite bei der Webseitenerstellung definiert werden.

Alle vom Autor definierten Stylesheets führen bei der Darstellung einer Webseite zu einem Gesamtstylesheet, in dem ebenfalls ein Element an mehreren Stellen, unterschiedliche Deklarationen bekommen kann, die sich überschneiden. Hier gilt: Je näher die Deklaration am Element ist, desto mächtiger ist sie.

Die Reihenfolge (in ihrer Priorität aufsteigend):

1. externe CSS-Anweisungen
2. interne CSS-Anweisungen
3. style-Anweisungen direkt im Tag

Ebene 4: !important

Ist eine CSS-Deklaration mit dem Schlüsselwort “!important” versehen, wird sie immer den anderen Deklarationen bevorzugt. Sollten zwei Deklarationen mit “!important” versehen sein und auf ein Element zutreffen, gilt die zuletzt ausgegebene Deklaration.

Gewichtung der Selektoren durch die Spezifität

Bisher haben wir nur zwischen Browser-, Benutzer- und Autoren-Stylesheets unterschieden und haben festgestellt, dass alle CSS-Deklarationen die mit einem “!important” versehen wurden immer Vorrang haben.

Doch auch unter den Selektoren gibt es bestimmte Prioritäten. Ich bin mir nicht sicher inwiefern die Spezifität für die Zwischenprüfung eine Rolle spielt, trotzdem wollen wir kurz darauf eingehen:

Was sind überhaupt Selektoren?

Definieren wir das Aussehen eines HTML-Elements via CSS, muss dieses zu gestaltende Element auf irgendeine Weise direkt oder indirekt “angesprochen” werden. Dafür werden sogenannte Selektoren genutzt. Sie können ein Element-Typ generell ansprechen (z.B. eine Headline h1) oder auch spezifisch auf ein Element mit einer festgelegten ID eingehen (z.B. #footer). Auch Kombinationen von Selektoren sind möglich.

Die Selektoren:

Pseudoklassen:

Pseudoklassen können Elemente mit bestimmten Zuständen ansprechen.

Zum Beispiel “a:hover” spricht die Links (“a”) an, auf denen sich die Maus gerade befindet (=Mouseover). Oder “p:first-of-type” spricht den ersten Absatz (“p”) innerhalb eines Elementes (z.B. “div”) an.

Die Spezifität

Um die Relevanz bzw. Priorität dieser Selektoren nun herauszufinden, wird ein Wert berechnet, der dessen Durchsetzungsfähigkeit festlegt. Dieser Wer lässt sich anhand eines Zahlenwertes ausdrücken, der mittels Tabelle errechnet wird.

• Kategorie A erhält den Wert 1, wenn die CSS-Deklarationen direkt im style-Attribut eines HTML-Elements notiert sind.
• Kategorie B erhält den Wert 1 für ID-Selektoren (“X#name”)
  
• Kategorie C entspricht der Anzahl der von einem Selektor betroffenen Klassen und Pseudoklassen
• Kategorie D entspricht der Anzahl der von einem Selektor betroffenen Elemente und Pseudo-Elemente

Beispiele:

Um die Spezifität nun als Wert vorliegen zu haben, werden die Zahlen der Reihe nach von Kategorie A bis Kategorie D hintereinander Weg geschrieben. Deklarationen mit einem höheren Wert (also einer höheren Spezifität) überschreiben die Deklarationen, mit einer niedrigeren Spezifität.

Im oberen Beispiel beschreiben alle Selektoren das gleiche Element:

Die Deklarationen von “#nav a.xyz” treffen aufgrund der höheren Spezifität auf das Element zu und werden angewendet.

Sortierung nach Vorkommen

Haben zwei oder mehrere Selektoren die gleiche Spezifität und sprechen das gleiche Element an, so entscheidet die Reihenfolge der Vorkommens. Da Browser den Quelltext einer Seite von oben nach unten auslesen, zählt der zuletzt notierte Selektor.

Habt ihr Ergänzungen oder Verbesserungen? Ab damit in die Kommentare!

Der Beitrak Die CSS-Kaskade?! erscheint auf FW: look! – Design Blog.

Liebe Leute,

gerade bin ich auf die folgende Präsentation zum XML-Grundaufbau gestoßen.

Vielen Dank an dieser Stelle an Jens Käsbauer!

XML Grundaufbau by Jens Käsbauer

Der Beitrak Präsentation zum XML Grundaufbau erscheint auf FW: look! – Design Blog.

Cloud Computing ist derzeit in aller Munde und viele Experten sind der Meinung, dass die Cloud der nächste Schritt in der Entwicklung der IT ist. Dem gegenüber stehen allerdings auch eine ganze Reihe von Kritikern, die sich vor allem Sorgen um den Datenschutz beim Arbeiten in der Cloud machen.

Aber was genau ist Cloud-Computing bzw. “die Cloud”?

Grundlagen

Im Grunde geht es darum, dass man Bereiche und Funktionen des eigenen Rechners bzw. der betriebsinternen IT-Infrastruktur an einen externen Anbieter auslagert und diese nur bei Bedarf nutzt.

Das Einrichten, Warten und Betreiben eines eigenen Netzwerks ist teuer, aufwändig und benötigt Spezialisten, die ebenfalls gefunden und bezahlt werden wollen. Reichen die eigenen Kapazitäten, z.B. bei einem sehr großen Auftrag, nicht mehr aus, entstehen weitere sehr hohe Kosten, wenn man die eigene Serverstruktur erweitern möchte.

Handelt es sich bei dem großen Auftrag auch noch um eine einmalige oder seltene Angelegenheit, hat man zudem ungenutzte Überkapazitäten geschaffen, durch die allerdings ebenfalls laufende Kosten entstehen.

Viel praktischer wäre es doch, wenn man diese Kapazitäten nur bei Bedarf dazu mietet und sämtliche Probleme, die das Vorhalten solcher Strukturen verursachen können, Anderen überlässt.

Um es etwas anschaulicher zu machen:

Man benötigt einen Anhänger nur drei bis vier mal im Jahr. Warum sollte man sich einen selber kaufen und damit die Kosten für Reperaturen und Steuern selber tragen, wenn man sich genau so gut bei der Autovermietung einen leihen kann, genau dann, wenn und solange man ihn braucht?

Die Cloud bietet genau diesen Service.

Dieses Werbevideo für die Microsoft Cloud Services erklärt und visualisiert die Grundlagen und die Vorteile des Cloud Computing in verständlichen Worten und einem hübsch anzusehenden Comic-Look. Die 3 1/2 Minuten kann man sich mal nehmen und über die offensichtliche Werbung hinweg sehen.

Unterschiedliche Formen der Cloud

Im Laufe der Zeit haben sich verschiedene Ansätze gebildet, wie man Cloud Computing definiert.

Man unterscheidet einerseits nach den Funktionen, die die Cloud zur Verfügung stellt (SaaS, PaaS, IaaS) und andererseits nach dem Ort, an dem sich die Cloud befindet (intern oder extern bzw. private Cloud oder public Cloud).

Infrastructure as a Service / IaaS

Infrastructure as a Service bildet die grundsätzlichste Schicht der drei Cloud-Arten. Bei einer IaaS-Cloud stellt der Anbieter dem Nutzer einen virtuellen Zugang zu Hardwarekomponenten wie Rechnern/Prozessoren, Netzwerkstrukturen oder Speicherplatz zur Verfügung.

Für alles Weitere, z.B. Installation, Betrieb und Wartung von Software ist der Nutzer selbst verantwortlich.

Vereinfacht kann man es sich so vorstellen, dass ein sich ein Bekannter einen PC ins Wohnzimmer stellt, auf dem nichts installiert ist und auf den man über das Netz zugreifen und verfügen kann. Was man drauf installiert und ob das funktioniert ist einem selbst überlassen.

Platform as a Service / PaaS

In einer “Platform as a Service“-Cloud stehen dem Nutzer bereits grundlegende Software-Umgebungen zur Verfügung. In diesen Umgebungen kann der Nutzer nun eigene Softwareteile entwickeln, testen und integrieren. Man ist also nicht mehr für die grundlegenden Strukturen verantwortlich, sondern nur für die eigene Software.

Um bei dem Beispiel mit dem Bekannten zu bleiben: Betreibt der Freund eine PaaS-Cloud, so stellt er einem nicht einen nackten Rechner hin, sondern hat darauf bereits ein Betriebssystem meiner Wahl installiert und kümmert sich um die Wartung und Pflege des Betriebssystems. Ich muss nur noch die Anwendungssoftware installieren, die ich für meine Arbeit brauche.

Software as a Service / SaaS

Bei der SaaS-Cloud gibt der Nutzer die meiste Verantwortung an den Betreiber ab. Dieser kümmert sich jetzt nicht nur um die Hardware und die grundsätzliche Softwareumgebung, sondern stellt dem Nutzer einen Zugang zu Anwendungssoftware zur Verfügung. Der Nutzer hat über das Netz Zugriff auf diese Software und ist bloß noch für die Verwaltung der einzelnen Daten verantwortlich.

Für unser Beispiel bedeutet das, dass unser Bekannter jetzt nicht nur z.B. OS X auf seinem Rechner installiert, sondern auch noch Photoshop. Man selbst greift jetzt nicht mehr aufs Betriebssystem zu, sondern über das Netz direkt auf PS und muss einzig darauf achten, dass man seine .PSDs nicht durcheinander bekommt.

Public Cloud und Private Cloud

Neben den Funktionen der Cloud ist es entscheidend, wer die Kontrolle über die Cloud und die Wege zur bzw. von der Cloud hat.

Von einer “Public Cloud” spricht man, wenn die gesamte IT-Infrastruktur von einem externen Anbieter bereitgestellt wird und der Zugriff über das Internet erfolgt. Man gibt die Kontrolle über die Hard- und Software also an Externe ab und bedient sich zur Datenübertragung Leitungen des Netzes.

Bei einer “Private Cloud” wird die Hard- und Software firmenintern verwaltet und der Zugriff erfolgt über ein firmeninternes Netzwerk. Sinnvoll ist dies, wenn bestimmte Funktionen arbeitsplatzunabhängig zur Verfügung stehen sollen.

Für das Beispiel bedeutet dies, dass man von einer “public Cloud” spricht, wenn der Rechner tatsächlich bei dem Bekannten steht und ich über das Internet auf diesen zugreife. Bei einer “private Cloud” stünde der Rechner z.B. in meinem Haus im Keller und ich würde ihn über das Hausnetzwerk vom Arbeitszimmer aus ansteuern.

Merkmale einer Cloud

Das National Institute of Standards and Technology (NIST), das wohl so in etwa unserem DIN entspricht, hat fünf Charakteristika festgelegt (PDF), die eine Cloud zu einer Cloud machen.

1. On-demand self-service: Der Nutzer kann die Kapazitäten dem eigenen Bedarf so anpassen, wie er es grade braucht, ohne dass dazu Interaktion mit einem menschlichen Ansprechpartner beim Anbieter notwendig ist.
2. Broad network access: Die Cloud muss über das Netzwerk mittels Standardtechnologien von diversen unterschiedlichen Geräten (z.B. Rechner, Smartphone, Tablet etc.) erreichbar sein
3. Resource pooling: Die Ressourcen des Anbieters werden von mehreren Kunden genutzt, wobei unterschiedliche Ressourcen nach Bedarf automatisch zugewiesen und freigegeben werden. Dabei weiß der Nutzer grundsätzlich nicht, wo sich diese Ressourcen befinden. Allein Anforderungen auf höherer Ebene, wie z.B. das Land des Standorts, sind zulässig.
4. Rapid elasticity: Die Kapazitäten passen sich automatisch den Bedürfnissen des Kunden an. Es wird immer nur so viel Leistung zur Verfügung gestellt, wie gerade benötigt wird. Änderungen in beide Richtungen (mehr/weniger) sollen jederzeit möglich sein, z.B. bei einer plötzlichen Leistungsspitze.
5. Measured Service: Die Cloud soll die Verwendung der Ressourcen selbstständig überwachen und protokollieren, damit sowohl der Nutzer als auch der Anbieter eindeutig sehen können, welche Leistungen tatsächlich genutzt wurden.

Vorteile des Cloud-Computing

Es sollte nun eigentlich jeder zumindest eine ungefähre Vorstellung davon, was sich hinter dem Begriff “Cloud” bzw. “Cloud Computing” verbirgt. Aber was macht die Cloud jetzt zu so einer Sensation?

Einige der Vorteile wurden in dem Microsoft-Clip bereits erwähnt.

Der größte Pluspunkt ist die Flexibilität des Cloud Computing und die damit verbundenen Kosteneinsparungen. Man nutzt nur genau die Ressourcen (z.B. Rechenleistung, Speicherplatz, Instanzen einer Software), die man in diesem Moment wirklich braucht und zahlt auch nur für genau die abgerufenen Leistungen.

Hinzu kommen weitere Einsparungen bei Wartung und Betrieb (z.B. Anschaffungskosten von Hard- und Software, Energiekosten, Know-How von Technikern & Administratoren) aufwändiger Infrastrukturen, da diese ja nun beim Betreiber der Cloud anfallen. Sollte man doch für bestimmte Wartungsaufträge, z.B. Updates von Anwendersoftware, verantwortlich sein, so kann dies zentral an einem Punkt erledigt werden.

Man muss nicht jeden an jedem einzelnen Arbeitsplatz die Software aktualisieren, sondern updated einfach die Version in der Cloud, auf die jeder von seinem Arbeitsplatz zugreift (Stichwort PaaS und SaaS).

Die Erreichbarkeit der in die Cloud ausgelagerten Dienste ist ein weiterer großer Vorteil. Je nachdem wie die Cloud im Detail aufgebaut ist, hat man Zugriff auf die Ressourcen, sobald man Zugang zum Netz hat.

Beispielsweise kann ein Mitarbeiter auch auf Dienstreise im Hotel mit der gewohnten Software und den Daten seines Arbeitsplatzes arbeiten, wenn diese über die Cloud organisiert sind und er darauf mit seinem Laptop über das Internet zugreift. Das selbe gilt natürlich auch für das Arbeiten im “Home Office” oder ähnlichen Modellen.

Je nach Konfiguration, Organisation und Nutzung der Cloud hält das Cloud-Computing einen Betrieb flexibler, mobiler und senkt die Fixkosten.

Allerdings hat das Cloud-Computing auch eine ganze Reihe Kritiker…

Die Nachteile der Cloud

Die meisten Nachteile des Cloud-Computing entstehen durch die Abgabe der Kontrolle über wichtige Teile der Infra- und Organisationsstruktur des Betriebes an externe Anbieter.

Der größte Schwachpunkt der Cloud ist meiner Meinung nach die Erreichbarkeit.

Gibt es, aus welchem Gründen auch immer, keine Verbindung zum Internet (public Cloud) bzw. dem internen Firmennetzwerk (private Cloud), ist man aufgeschmissen, da auf dem eigenen Arbeitsplatz, natürlich je nach Art der Cloud, nur sehr wenige bis gar keine Daten und Software vorhanden ist.

Cloud-Computing ist auf eine (Netzwerk-)Verbindung zur Cloud angewiesen
(Quelle: mashable.com / Kiersten Essenpreis & Matt Silvermann)

Vor allem bei einer Cloud, auf die über das Internet zugegriffen wird, ist auch der Weg der Daten zur Cloud hin und von der Cloud an den Arbeitsplatz eine sensible Stelle.

Gelingt es Außenstehenden Daten auf diesem Weg abzufangen, mitzuschneiden oder zu manipulieren, können wichtige Interna in falsche Hände geraten und der ganze Betrieb gestört werden.

Ebenfalls problematisch kann es sein, dass man vertrauliche Daten faktisch auf Servern von Fremden lagert und man nicht kontrollieren kann, was genau mit diesen Daten passiert. Zwar gibt es mittlerweile verschiedene Lösungsansätze diesem Problem mit Verschlüsselungsverfahren zu begegnen, aber bisher hat sich noch kein einheitlicher und verbindlicher Standard durchgesetzt.

Ein weiteres bisher ungelöstes Problem entsteht durch die unterschiedliche Rechtsprechung bezüglich virtueller Daten in verschiedenen Ländern. Es ist nicht klar, welchen Gesetzen meine Daten genügen müssen – denen des Serverstandorts, den der Nutzer häufig gar nicht kennt, oder denen des Firmenstandorts des Anbieters oder des Firmensitzes des Nutzers.

Im Falle einer public Cloud spart man sich zwar den aufwändigen Betrieb einer eigenen Server-Struktur, allerdings hat man auch keinerlei Kontrolle mehr darüber. Im Falle einer Fehlfunktion z.B. hat man als Nutzer keine Möglichkeit selbst einzugreifen, sondern ist dem Anbieter auf Gedeih und Verderb ausgeliefert.

Fazit

Das System des Cloud-Computing bietet eine ganze Menge Möglichkeiten und Potenzial. Es erlaubt Betrieben eine erhöhte Flexibilität und Einsparungen in sehr kostenintensiven Bereichen.

Allerdings hat auch diese Medaille zwei Seiten und man erkauft sich diese Vorteile mit einem, je nach Konfiguration, weitgehenden Kontrollverlust und zusätzlichen Schwachpunkten in der Datensicherheit.

Jeder Nutzer einer Cloud sollte vorher genau planen, welche Funktionen und Dienste benötigt werden und ob die Vorteile die Nachteile aufwiegen.

Zusätzlich

Für diejenigen, die noch tiefe in das Thema einsteigen möchten, gibt es im Cebit-Blog eine Sammlung von Infografiken zum Thema “Cloud”, wobei die meisten den Fokus eher auf die wirtschaftlichen Aspekte legen.

Gib mir 18.837 Pixel Höhe Cloud-Computing!

Wem das dann noch immer nicht reicht und wer sich mehr für technische Hintergründe interessiert, der kann sich hier einen knapp einstündigen Vortrag von Mario Meir-Huber ansehen.

Spätestens jetzt sollte bei der Prüfung eigentlich nichts mehr schiefgehen.

Sollte dennoch jemand Ergänzungen oder Fragen haben, nutzt gerne die Kommentare oder unser Kontaktformular!

Der Beitrak Alles, was man über Cloud Computing wissen muss erscheint auf FW: look! – Design Blog.

Hurra Hurra! Mit großer Spannung wurden sie erwartet und nun sind sie endlich da!

Die Themen für die Abschlussprüfung der Mediengestalter 2013, die auch uns alle betreffen, sind nun öffentlich und lauten wie folgt:

Konzeption und Gestaltung

• U1: Schriftmerkmale
• U2: Ergonomie
• U3: Druckkosten
• U4: Plakatgestaltung
• U5: HTML5-Struktur
• U6: Anzeigenanalyse
• U7: Medienneutrale Daten
• U8: XML
• U9: Wort-Bild-Marken

Medienproduktion

• U1: Pixel- und Vektordaten
• U2: Farbmischung
• U3: Cloud-Computing
• U4: Grafikkarte
• U5: CSS-Kaskadierung
• U6: Kameraeinstellung (Fotografie)
• U7: Multimediale Inhalte
• U8: SQL
• U9: Design Manual

Und die für uns besonders wichtigen

Fachrichtungsspezifische Aufgaben für Mediengestalter Gestaltung und Technik (Print)

• U10: Informationsgrafik
• U11: Farbbeurteilung
• U12: Ausschießen

bzw.

• U10: Smart-Objekte
• U11: Farbkonvertierung
• U12: PDF-Druckstandards

- Quelle: ZFA

Das große Lernen kann nun also beginnen!

Jede/r hat natürlich sein eigenes Rezept, wie sie/er sich dieser Mammutaufgabe stellen möchte.

Wir haben beschlossen, dass wir möglichst viel von dem, was wir uns so aus diversen Quellen zusammentragen, hier veröffentlichen wollen. So profitieren möglichst viele von der immensen Arbeit, die man sich so macht und natürlich haben wir auch die Hoffnung, dass unsere Beiträge in den Kommentaren erweitert und ergänzt werden.

Damit das Ganze übersichtlich bleibt, haben wir hier im Blog einen extra Bereich eingerichtet, in dem alle Beiträge zur Abschlussprüfung 2013 gesammelt werden. Sie sind grob in die drei Kategorien “Konzeption und Gestaltung”, “Medienproduktion” und “Gestaltung und Technik” gegliedert, lassen sich aber auch nach den einzelnen Aufgabengebieten sortieren. Zur einfachen Orientierung gibt es ein Inhaltsverzeichnis, das all die Aufgaben auflistet, zu denen es bereits Beiträge gibt. Ein Klick auf eine der Aufgaben und man bekommt alle dazugehörigen Artikel angezeigt.

Erreichen kann man diesen Bereich entweder oben über das Menü über den Punkt “Abschlussprüfung 2013″ oder über die URL

Derzeit sieht es dort noch etwas karg aus, aber das wird sich in den nächsten Tagen und Wochen ändern. Wir hoffen, dass wir für euch ein hilfreiches Nachschlagewerk zusammentragen können und das ihr fleißig an der Komplettierung und Erweiterung mitwirkt!

Wer Fehler entdeckt, Ergänzungen hat oder Themen vorschlagen möchte, die wir behandeln sollen, schreibt am besten einen Kommentar oder benutzt unser Kontaktformular!

Wir wünschen jedenfalls allen angehenden Mediengestaltern viel Erfolg bei ihren Prüfungen und ein rauschendes Fest im Anschluss!

Der Beitrak Mediengestalter Abschlussprüfung 2013 Themen erscheint auf FW: look! – Design Blog.

Typografie war während meiner Ausbildungszeit eines meiner Lieblingsthemen. Aus diesem Grund finden sich hier im Blog achf einige Artikel zu diesem Thema.

Da das Thema der Prüfungsaufgabe allerdings ganz spezifisch “Schriftmerkmale” lautet, habe ich die Blogarchive durchforstet und die fünf meiner Meinung nach hilfreichsten Artikel zu diesem Thema ausgegraben.

1. Das Letterpress Typografie-Poster

TypographyDeconstructed Typo-Poster, das alle wichtigen Schriftmerkmale erklärt
(Quelle: Typography DeConstructed)

Zwar geht es in dem Artikel mehr um die Gestaltung und Herstellung des Posters, aber man hat alle wichtigen Schriftmerkmale und deren Fachbegriffe auf einen Blick.

Noch wäre ja auch genug Zeit, um sich das schöne Stück zu bestellen und sich als Lernhilfe über den Schreibtisch zu hängen.

2. Eine Infografik über die Geschichte der Schrift

Infografik zur Geschichte der Schrift Detail
(Quelle: Mashable.com)

Ein wichtiges Merkmal jeder Schrift ist ihre historische Einordnung.

Diese Infografik zeigt sehr übersichtlich die Entwicklung der Schrift anhand von berühmten Vertretern ihrer Zeit. Praktischerweise werden wichtige Eigenschaften und Merkmale hervorgehoben und erläutert.

3. Typografie Infografik

Typography Infografik Detail
(Quelle: CreativeMarket.com / gefunden auf ideafixa.com)

Auch bei dieser Infografik gibt es einen Einstieg mit der Entwicklung der Typografie und wesentlichen Stilmerkmalen. Dann folgt ein Absatz, der sich wie das Letterpress-Poster, mit den einzelnen Bestandteilen der Schrift befasst und eine Menge Fachbegriffe anschaulich erläutert.

Der Rest der Grafik setzt sich dann mit der heutigen Verbreitung und Verwendung von Schrift auseinander. Das hat zwar mit den Schriftmerkmalen nicht viel zu tun, ist aber ebenfalls interessant und es kann sicherlich nicht schaden auch in diesem Bereich einen gewissen Überblick zu haben.

4. Das &-Zeichen, kaufmännisches “Und”, Ampersand

Wie man das Und kennt und auch schreibt (Beispiel Arial)
(Quelle: Timo Wünsche)

Timo hat in diesen Artikel richtig Arbeit investiert und eine sehr schöne Übersicht über verschiedene Formen des vermutlich am häufigsten im Netz falsch genutzten Zeichens zusammengestellt.

Auch wer sich nicht so sehr für das “&” an sich begeistern kann, findet in diesem Beitrag eine ziemlich gute Gegenüberstellung verschiedener Schriftstile und deren Schriftmerkmalen.

Wer sich selbst testen möchte probiert mal, ob er alle Bestandteile des kaufmännischen “Und” richtig benennen kann und ob es gelingt den Unterschied zwischen zwei “&” aus der Grafik mittels der richtigen Fachbegriffe zu erläutern.

5. Schriftgruppen als Superhelden

Sans Serif Batman: Assertive and familiar – enforcing structure and authority
(Quelle: Matthew Olin)

Der Artikel zeigt, dass Matthew Olin es schafft, die Lücke zwischen Superhelden und Schriftmerkmalen zu schließen. Er untersucht die Schriftklassen anhand ihrer Merkmale und Charakteristika und ordnet ihnen Superhelden zu, deren Wesen dem der Schrift wohl am ehesten entspricht. Um das zu verdeutlichen, hat er jeden dieser Superhelden nur aus Glyphen der besagten Schrift nachgebaut.

Was erstmal vielleicht ein wenig albern klingt, macht auf den zweiten Blick ziemlich viel Sinn. Zum Einen gibt es eine recht gute Übersicht darüber, welche Eigenschaften welcher Schriftklasse zugeschrieben werden. Zum Anderen baut es einem hervorragende Eselsbrücken, an denen man sich orientieren kann.

Ich hoffe ich konnte euch mit diese Liste einen ersten Einstieg in das Thema “Schriftmerkmale” geben und das etwas dabei war, das ihr noch nicht kanntet oder wusstet.

Der Beitrak Top5 Typo-Posts erscheint auf FW: look! – Design Blog.

Ich bin eben auf einen 3D-Malstift gestoßen, welcher mich sehr fasziniert hat. Das hört sich zwar gerade etwas langweilig an, aber mit dem 3Doodler kann man selber 3D-Prints erstellen, indem man in die Luft malt.

So sieht der 3Doodler aus
(Quelle: 3Doodler)

Peter Dilworth und Maxwell Bogue von der Firma WobbleWorks, ansässig in Boston, haben den ersten 3D-fähigen Stift entwickelt.

3Doodler is the world’s first and only 3D Printing Pen. Using ABS plastic (the material used by many 3D printers), 3Doodler draws in the air or on surfaces. It’s compact and easy to use, and requires no software or computers. You just plug it into a power socket and can start drawing anything within minutes.

Wie funktioniert der 3Doodler?

Der 3Doodler zeichnet, indem heißes Plastik herausgepresst wird, welches dann schnell abkühlt und zu einem stablien Gebilde erstarrt. Dadurch kann man viele unterschiedliche Formen und Objekte herstellen. Die “Tinte” des 3Doodlers besteht aus 3mm starkem ABS- oder PLA-Kunststoff, wie bei einem 3D-Drucker.

3Doodler – verwendeter Kunststoff
(Quelle: 3Doodler)

Was kann mann mit einem 3Doodler machen?

Wie gesagt, kann man mit diesem 3D-Stift verschiedene Objekte direkt in den Raum malen.

3Doodler – Malen eines 3D-Tieres
(Quelle: 3Doodler)

Beispiele, was man alles mit dem 3Doodler erstellen kann
(Quelle: 3Doodler)

Zudem kann man mithilfe von Schablonen flache Formen nachzeichnen, diese vom Papier abziehen und dann aufstellen oder zusammenbauen. Natürlich lassen sich auch 3D-Modelle realisieren, Schmuck, Kühlschrankmagneten oder iPhone Cases. Außerdem soll es auch zu Reparaturzwecken dienen.

3Doodler – Schablone des Eiffelturms
(Quelle: 3Doodler)

Der 3Doodler ist bislang ein Prototyp. Um das Projekt der beiden Jungs finanziell zu unterstützen kann man auf das Crowdfunding-Portal Kickstarter gehen und spenden. Zudem ist dort das Projekt nochmal genau erläutert.

Und hier das kleine Werbevideo für den 3Doodler:

[Im Feed kann dieses Video nicht angezeigt werden.Klicke zum Blogeintrag um das Video anzusehen.]

Auf jeden Fall ist der 3Doodler eine sehr coole Idee! Aber ich denke, dass das Ding nicht umbedingt alltagstauglich für jeden ist und auf keinen Fall so präzise ist, wie ein teurer 3D-Drucker. Und natürlich darf der 3Doodler nicht in die Finger von Kindern geraten!

Der Beitrak 3Doodler – In der Luft malen erscheint auf FW: look! – Design Blog.

Der WWF, der World Wide Fund For Nature, hat schon mehrere Apps herausgebracht, wie einen mobilen Einkaufberater und eine Schneekugel-App. Aber die neue App “WWF Together” ist einfach ein Glanzstück!

Die Tierschutzorganisation hat sich ganze Mühe gegeben, den Menschen mit dieser App bedrohte Tierarten näher zu bringen. Denn das Design der App ist einfach großartig. Es ist mordern, liebevoll und spannend zugleich. Realisiert wurde die App von der Agentur AKQA.

WWF App Together: Der Gorilla
(Quelle: WWF)

In einem Einführungsvideo faltet sich ein Bild eines Pandas, welcher das Wahrzeichen dieser Organisation ist, zu einem Origami in Form eines Pandas. Danach kann man die Geschichte und das Leben verschiedener Spezien erkunden. Unteranderem erfährt man interressante und ungewöhnliche Informationen über den Tiger, über Wale, Meeresschildkröten oder Elefanten und wieso diese Tiere vom Aussterben bedroht sind. Dabei ist immer Interaktion gefragt.

Try out “tiger vision”, hunt like a polar bear, and help a panda chop bamboo with interactive games. (WWF)

Man kann auf einem beweglichen Globus erkunden, wo welche Tiere leben, sich durch beeindruckende Fotogalerien klicken und den Tieren in Form von hochauflösenden Videos hautnah gegenüber stehen.

WWF App Together: Der Panda
(Quelle: WWF)

Der WWF möchte mit dieser App viele Menschen erreichen und fordert dazu auf mithilfe von sozialen Netzwerken die Inhalte der App zu teilen, sodass Aufmerksamkeit erregt wird. Zudem zeigt der WWF mehrere Wege auf, wie man diesen Geschöpfen helfen kann.

Als kleine Spielerei gibt es zu jedem vorgestellten Tier eine Faltanleitung, um das Tier als Origami nachzubasteln Die App gibt es kostenlos im AppStore, aber leider nur auf Englisch.

Und hier noch einer kleiner Trailer zur App:

[Im Feed kann dieses Video nicht angezeigt werden.Klicke zum Blogeintrag um das Video anzusehen.]

Der Beitrak Wusstest ihr, dass ein neugeborener Panda nur so groß wie ein Pfund Butter ist? erscheint auf FW: look! – Design Blog.

Ich denke jeder kennt die Hinweistafel bei YouTube, die einen darauf hinweist, dass dieses oder jenes Video grad mal wieder nicht abgespielt werden kann, da die Gema irgendwelche Rechte nicht eingeräumt hat.

Das ist ziemlich nervig.

Die GEMA hingegen bestreitet, dass wirklich immer sie dran Schuld sei, dass das Video nicht angezeigt wird und zieht deshalb nun sogar vor Gericht, da sie sich durch den YouTube-Hinweis in ein schlechtes Licht gerückt sieht.

Als ob sie das nicht schon selbst ganz gut alleine könnte…

[Im Feed kann dieses Video nicht angezeigt werden.Klicke zum Blogeintrag um das Video anzusehen.]

Alles klar…

Aus welchen Gründen auch immer: Fest steht jedenfalls, dass es in Deutschland gar nicht so einfach ist bei YouTube Videos zu kucken, da man ständig an irgendwelchem Sperren hängen bleibt. Das das nicht nur ein subjektiver Eindruck ist, sondern sich auch objektiv belegen lässt, zeigt diese interaktive Infografik von “OpenDataCity“:

Unterstützt durch MyVideo. Realisiert von
OpenDataCity.Anwendung steht unter CC-BY 3.0.

Sie zeigt die Top1000 Videos bei YouTube, sortiert entweder nach Aufrufen, Bewertung oder Sperrung. Diejenigen, die man von Deutschland aus nicht ankucken kann, sind rot hervorgehoben.

Derzeit sind das knapp über 61%!

Fährt man mit der Maus über eines der kleinen Quadrate zeigt einem die Infografik an, um welches Video es sich handelt und welchen Grund YouTube für die Sperrung angibt.

Unter diesem Link findet man die Infografik auch nochmal in einer größeren und umfangreicheren Version. Dort kann man dann auch sehen, wie es zu der Überschrift dieses Artikels kommt, denn in Afghanistan kann man nach derzeitigem Stand 95,6% der Top1000 sehen, wohingegen es in Deutschland gerade mal 38,5% sind.

Auch wenn zumindest mich solche Zahlen sehr zornig machen (Versteht mich nicht falsch! Natürlich gönne ich den Menschen in Afghanistan das!), sollte man darüber nicht vergessen, wie großartig diese Infografik gestaltet ist.

Obwohl sie eine Menge Daten zeigen kann, ist sie sehr übersichtlich. Sie stellt ihre Kernaussage sehr deutlich in den Vordergrund, bietet aber noch erstaunlich viele Möglichkeiten um sich zusätzliche Infos ganz nach eigenem Gusto zu besorgen. Besonders gut gefällt mir, dass sich die Grafik selbstständig alle 24 Stunden mit aktuellen Daten versorgt! Wer sich noch genauer über die Hintergründe der Infografik informieren möchte, wird hier datenjournalist.de fündig.

Noch mehr zum Thema Infografiken hier im Blog findet man hier.

Der Beitrak Deutschland schlimmer als Afghanistan erscheint auf FW: look! – Design Blog.

Dies ist der 23. Teil der SuperHeldenSonntag-Serie, bei der sonntags  verschiedenste Künstler und Kunstwerke rund ums Thema “Superhelden” vorgestellt werden. Alle Beiträge der Serie findet man gesammelt unter dem Schlagwort “SuperHeldenSonntag“. Und hiermit entschuldigt, dass der letzte Beitrag dazu etwas her ist

Flächige Gestaltung, klare Farben und teils Malen wie im Comicstil – so kann man grob die Kunstrichtung Pop Art beschreiben. Wenn man nun diese laute Kunst mit Bodypainting kombiniert, wie die australische Fotografin und Bodypainterin Emma Hack, kommen solch Aufmerksamkeit erregende Bilder bei rum:

Sexy Babe
(Quelle: Emma Hack)

Zwar haben wir hier keine spezifischen Superhelden vorliegen, aber die Frauen sehen doch sehr nach Superheld aus in ihrer knalligen Bemalung

Paint The Town
(Quelle: Emma Hack)

Revenge
(Quelle: Emma Hack)

Übrigens hat die Australierin ihre Karriere als Make-up Artist begonnen, hat sich dann aber so sehr für Bodypainting interessiert, dass sie begann Models so zu bemalen, dass sie mit ihrem Hintergund verschmelzen – und hat sie fotografiert. Dazu müssen sie und ihre Models eine Engelsgeduld haben, denn solche Bemühungen kosten schonmal 8-14 Stunden Zeit.

Text me
(Quelle: Emma Hack)

Enjoy the view
(Quelle: Emma Hack)

Sehr interessant an den Bildern finde ich, dass trotz der Dreidimensionalität der Körper, es Emma Hack gelingt die typische Flächigkeit von Pop Art rüberzubringen.

Doch diese Kollektion names “POP!” ist nicht ihr einziges Werk. Auf ihrer Website gibt es noch viel mehr Arbeiten von ihr zu bestauen, wie zum Beispiel diese Kollektionen:

aus der Kollektion “UTOPIA”
(Quelle: Emma Hack)

aus der Kollektion “BIRDS OF PREY”
(Quelle: Emma Hack)

aus der Kollektion “WALLPAPER 2008″
(Quelle: Emma Hack)

Der Beitrak SHS #23: Pop Art auf nackter Haut erscheint auf FW: look! – Design Blog.

… Nicht mehr, wenn man diese putzigen Achtbeiner gesehen hat

Die australische Maratus volans, im Englischen besser bekannt als Peacock Spider, gehört innerhalb der Familie der Springspinnen zur Gattung Maratus.

Peacock Spider 01
(Quelle: Jurgen Otto)

Der australische Fotograf Jurgen Otto schafft es wunderbar mit seinen Bildern das Image von Spinnen etwas aufzupolieren. Die 5-Millimeter kleinen Tierchen verdanken ihren Namen ihrem bunten Hinterteil, welches sie bei der Balz einsetzen. Also mal wieder Makrofotografie vom Feinsten:

Peacock Spider 02
(Quelle: Jurgen Otto)

Peacock Spider 03
(Quelle: Jurgen Otto)

Peacock Spider 04
(Quelle: Jurgen Otto)

Peacock Spider 05
(Quelle: Jurgen Otto)

Peacock Spider 06
(Quelle: Jurgen Otto)

Peacock Spider 07
(Quelle: Jurgen Otto)

Peacock Spider 08
(Quelle: Jurgen Otto)

Der Tanz dieser Kleinen ist ziemlich beeindruckend. Wie ein Pfau demonstiert die Spinne ihren farbenprächtigen Hinterleib, danach hebt sie zwei Beine und läuft vibrationsartig von einer Seite zur anderen. Wenn das Männchen das Weibchen nicht beeindrucken kann, wird der Arme zu ihrer Beute.

[Im Feed kann dieses Video nicht angezeigt werden.Klicke zum Blogeintrag um das Video anzusehen.]

Wer noch mehr Fotos von Jurgen Otto sich ansehen möchte, kann auf seinen Flickr-Account mal vorbei schauen

Der Beitrak Angst vor Spinnen? … erscheint auf FW: look! – Design Blog.

Zum Beginn des neuen Jahres gibt es unsere ganz persönlichen Lieblingsbeiträge 2012:

Arne empfiehlt: Die Gesichter der Drag Queens

Half-Drag: Maddelyne Hatter
(Quelle: Leland Bobbé)

“Ich mag es, wenn ein Künstler es schafft, Gegensätze zu verbinden. Außerdem finde ich es immer spannend auch mal einen Blick hinter die Kulissen zu bekommen, erst recht bei einem Thema, bei dem ich mich wenig bis gar nicht auskenne. Wenn das ganze dann auch noch so schön skurril aussieht, wie auf den Fotos von Leland Bobbé, über die Kevin in diesem Beitrag schreibt, finde ich das großartig!

Da all diese Punkte hier zusammenkommen, ist dies mein persönlicher Lieblingsbeitrag 2012!”

Laura empfiehlt: Cinemagraphs – Die neuen GIFs

Cinemagraph mit Coco Rocha © 2011 Jamie Beck & Kevin Burg

“Auch wenn Fotos eigentlich nur eine Momentaufnahme sind, gefällt mir dass man mit Cinemagraphs einen festgehaltenen Augenblick etwas verlängern und lebendig machen kann. Zudem finde ich es toll, dass das doch angestaubte Dateiformat gif, so einen neuen, wunderschönen und auch geheimnisvollen Eindruck schaffen kann.”

Kevin empfiehlt: Foodscapes by Carl Warner

Creative Foodscape (2)
(Quelle: Carl Warner)

“Wenn einem stinknormale Landschaftsfotos zu langweilig und auch irgendwie zu einfach erscheinen, zeigt Carl Warner, dass es auch anders geht. Und das beste daran: Dazu muss er nicht einmal das Haus verlassen. Und wenn doch, höchstens um in die Supermarkt von nebenan zu gehen. Denn dort findet er all seine Zutaten für die “Foodscapes”.”

Timo empfiehlt: Unsichtbarer Surrealismus: Die Infrarotfotografie

Mirror of Ice
(Quelle: nxxos)

“Auch wenn ich selber noch nicht die technische Ausstattung besitze, solche unwirklich wirkenden Fotos zu machen, fasziniert mich diese Art der Umweltdarstellung. Pinke Bäume, orangener Himmel – wie eine Fantasiewelt wirkt so eine mit der Kamera festgehaltene Landschaft.”

Der Beitrak Unsere Lieblingsbeiträge 2012 erscheint auf FW: look! – Design Blog.

Wieder mal ist ein Jahr vorbei, doch für uns ist es das erste Jahr. 200 veröffentliche Beiträge, 55.000 Seitenaufrufe und eine durchschnittliche Besuchsdauer von 2 Minuten und 21 Sekunden.

Zum Jahresende folgen die 10 meistgelesenen Artikel:

Platz 10: Schrift aus Haut

Haut “Z”
(Quelle: Arjan Benning)

Wenn Wäscheklammern in die Hände eines typografisch begeisterten Menschen kommen und der erste Versuch daraus besteht, sich die Dinger an die Haut zu hängen, entsteht das, was Arjan Benning geschaffen hat: Das “Haut-Alphabet”.

Platz 9: Tattoo Infografik

Tattoo Infographics
(Quelle: Paul Marcinkowski)

Die Tattoo Infografik von Paul Marcinkowski erinnert in ersten Moment an den Zombie Boy Rick Genest, ist aber ein Schulprojekt im Bereich Infografik, bei der sich Marcinkowski für eine sehr realistische Darstellung entschieden hat. Unbedingt einen Blick wert!

Platz 8: Disney Pin-Ups

Aurora aus “Dornröschen” (©Jirka Väätäinen)

Der finnischer Grafikstudent Jirka Vinse Jonatan Väätäinen verwandelt Fotos in einen Pin-Up-Look und lässt reale Personen wie Disney-Figuren aussehen.

Platz 7: Cinemagraphs – Die neuen GIFs

Cinemagraph mit Coco Rocha © 2011 Jamie Beck & Kevin Burg

Animierte GIFs (Graphics Interchange Format) erleben ein neues Hoch in ihrem Dasein. Obwohl sie als technisch veraltet gelten, erhalten sie wieder große Bedeutung durch Cinemagraphs.

Platz 6: Kult-Bier Astra kämpft um Moral

Astra. Jetzt auch für Windows.
(Quelle: astra-bier.de)

Die Kult-Marke Astra wirbt mit einer sehr kreativen Kampagne und vermittelt augenzwinkernd Sitte und Moral.

Platz 5: Tätowierte Arme im Schaukasten

Guy Le Tatooer Arm Exhibition
(Quelle: gefunden bei inkbutter.com)

Die Frage “Wie bringt man Tattoos in eine Galerie?” beantwortet der französische Tätowierer “Guy Le Tatooer” ganz einfach: In Glaskästen an der Wand.

Platz 4: Die Welt gehört denen, die…

DIE WELT Markenkampagne: “Die Welt gehört denen, die neu denken.”
(Quelle: Agentur Oliver Voss für DIE WELT)

DIE WELT geht wieder mit einer außergewöhnlichen crossmedialen Markenkampagne an den Start: “DIE WELT gehört denen, die neu denken”.

Platz 3: Schon mal genauer auf WWF Plakate geachtet?

WWF Plakatkampagne “Give a hand to wildlife”

Der WWF lässt sich allerhand einfallen um die Welt zu schützen und die Menschen auf die Probleme in der Tierwelt aufmerksam zu machen. Das zeigt sich vor allem in den kreativen Plakatkampagnen.

Platz 2: .XXX – Porno-Seiten ziehen um

Porno-Websites ziehen um nach .XXX
(Quelle: Sean de Sparengo / M&C Saatchi)

Was soll ich großartig sagen: Sex sells! Daher finden sich die Plakate zum Umzug der Porno-Websites auf Platz 2.

Platz 1: Aquascaping – Landschaften unter Wasser gestaltet

Ein tolles Beispiel für den Ideenreichtum für die Gestaltung der Unterwasserlandschaft
(Quelle: Unbekannt)

Die Beliebtheit dieses Beitrags zeigt, wie spannend und interessant das Thema Aquascaping doch ist. Das ganze Jahr lang zeichnet sich der Beitrag immer als sehr beliebt ab und sollte daher von jedem gelesen werden!

Der Beitrak Das war das Jahr 2012: Die Top 10 erscheint auf FW: look! – Design Blog.