Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Webdesign

Bilder mit Photoshop für den Export ins Web optimal aufbereiten (1)

Thomas Giannatasio (Übersetzung Manuela Müller)

Wenn Sie mit Photoshop alle Pixel auf Hochglanz poliert haben, sind Sie mit der Arbeit an Ihrem Design, Ihren Bildmontagen oder Fotoretuschen noch nicht fertig. Für die Darstellung in einem Browser müssen Sie die Dateien noch optimieren. Auch, wenn das relativ zügig geht, ist dieser Arbeitsschritt doch entscheidend – denn gerade bei speicherintersiven Dateien kommt es auf eine gute Balance zwischen Bildqualität und kurzer Downloadzeit an. Wie Sie das je nach Bildmaterial am besten erreichen, erläutert diese Artikelserie, die dem Smashing eBook #3 – Mastering Photoshop for Webdesign – entnommen ist.

Lesetipps

Die folgenden Beiträge könnten ebenfalls interessant für Sie sein:

Jedes Foto und jede Grafik, die Sie aus Photoshop für die anschließende Verwendung im Internet exportieren, sollte den Dialog Für Web und Geräte speichern passieren. Damit werden Ihre Bilder nicht nur in bestimmten Formaten gespeichert, dieser Dialog bietet Ihnen auch Kontrolle über Qualität, Tansparenz und Farben. Das wird zunehmend wichtiger, da mehr und mehr Menschen mit mobilen Geräten im Internet surfen. Kleine Dateigrößen sind für ein gutes Anwendererlebnis dieser Benutzergruppe entscheidend.

Beginnen wir mit der Oberfläche des Dialogs Für Web und Geräte speichern. Sie rufen ihn über das Menü Datei oder durch Drücken der Tasten Strg / Befehl + Alt / Auswahl + Shift + S auf. Das Erste, was Ihnen vermutlich ins Auge fällt, ist das große Vorschaufenster für die optimierte Version. Es gibt vier Ansichten, zwischen denen Sie über die Registerkarten oben links wechseln können:

  • Original
  • Optimiert
  • 2-fach
  • 4-fach

Die Ansicht Original zeigt die Datei genau so wie außerhalb des Dialogs. Optimiert zeigt die Datei, wie sie nach dem Anwenden der aktuellen Optimierungseinstellungen aussehen würde. 2fach und 4fach fügen in den Dialog zwei beziehungsweise vier Vorschaufenster ein, damit Sie die Auswirkung der verschiedenen Einstellungen mit direkt vergleichen können. In der Ansicht 4fach können Sie drei verschiedene Versionen und das Original gleichzeitig anzeigen. Mit einem Klick ins Vorschaufenster aktivieren Sie die jeweiligen Einstellungen. Diese können Sie unabhängig von den anderen Vorschaufenstern ändern, was beim Testen verschiedener Komprimierungsarten sehr nützlich sein kann.


In der 4fach-Ansicht können Sie drei verschiedene Optimierungsversionen mit dem Originalbild vergleichen.

Unter den Vorschaubildern wird eine kurze Zusammenfassung angezeigt: der gewählte Dateityp, die Dateigröße und die geschätzte Ladezeit. Bedenken Sie, dass Sie diesen Dialog zwar aufgerufen haben, um eine möglichst kleine Dateigröße einzustellen. Das sollte jedoch nicht zu Lasten der Bildqualität gehen. Schenken Sie dieser Zusammenfassung also Ihre Aufmerksamkeit. Wenn Sie wollen, können Sie die geschätzten Ladezeiten verändern, um die Geschwindigkeit des Downloads besser abschätzen zu können, indem Sie die in der folgenden Abbildung rot markierte Schaltfläche Downloadgeschwindigkeit auswählen anklicken.

Rechts von den Vorschaubildern sind die Dateieinstellungen. Hier nehmen Sie alle Änderungen vor. Die Optionen unterscheiden sich je nach dem gewählten Dateiformat erheblich voneinander. Sie haben die Auswahl zwischen fünf verschiedenen Formaten: GIF, JPEG, PNG-8, PNG-24 und WBMP.

Dateiformat-spezifische Optionen

GIF

Das Graphic Interchange Format (GIF) eignet sich sehr gut zum Speichern von Logos, Text und anderen grafischen Bildern. Das Format nutzt eine verlustfreie Komprimierung, das heißt die höchste Qualität bleibt bei diesem Prozess erhalten. Allerdings erlaubt das GIF-Format nur 256 Farben. Das heißt nicht, dass Sie lediglich aus einem festgelegten Set aus 256 Farben auswählen können. Es ist eher so, dass eine Datei im GIF-Format lediglich bis zu 256 Farbtöne speichern kann, in der jedes Pixel farbig ist. Daher ist das Format für Fotos eher ungeeignet, aber perfekt für Bilder mit großen einheitlichen Flächen mit Volltonfarbe.


Das GIF-Format komprimiert Bilder, indem es große Bereiche ähnlicher Farbtöne untersucht. Damit eignet sich das Format sehr gut für Logos.

Farbreduktion
Wenn Sie aus der Auswahlliste Optimierungsformat das Format GIF wählen, sehen Sie diverse Optionen, um zu steuern, wie das GIF komprimiert wird. Die erste Option ist der Farbreduktionsalgorithmus. Da das GIF-Format lediglich 256 Farben speichern kann, schickt Photoshop das Bild durch einen Algorithmus, um zu entscheiden, welche Pixel erhalten bleiben und welche nicht. Dafür gibt es wiederum verschiedene Optionen.


Die Optionen der Auswahlliste Farbreduktionsalgorithmus

Manche Optionen, wie Schwarzweiß oder Graustufen, sind selbsterklärend. Manche sind im Prinzip nutzlos – zum Beispiel Mac OS und Windows, die versuchen, die für das jeweilige Betriebssystem typische Farbskala zu simulieren. Schließlich gibt es die Option Benutzerdefiniert, die es Ihnen erlaubt, die komplette Farbpalette selbst einzustellen. Dies kann ziemlich mühsam sein, daher sind Sie besser mit einer der folgenden Methoden bedient:

  • Perzeptiv: bevorzugt Farben, an deren Wahrnehmung das menschliche Auge am meisten angepasst ist. Der Algorithmus ist jedoch weniger genau in der Wiedergabe exakter Farbwerte.
  • Selektiv: bestimmt, welche Farbtöne am meisten und in größter Konzentration verwendet wurden. Diese Option gewährleistet, dass die ermittelteten Werte erhalten bleiben. Für die meisten Bilder ist „Selektiv“ die beste Option.
  • Adaptiv: Funktioniert ähnlich wie „Selektiv“; allerdings bevorzugt dieser Algorithmus Farbtöne, die im gesamten Dokument verwendet werden – anstatt nebeneinander liegender Farbtöne.
  • Restriktiv: Limitiert die Farbpalette auf die inzwischen überkommene Palette der so genannten 216 websicheren Farben. Anhand dieser Palette wurde in den frühen Tagen des Internets Farben festgelegt, die von der Mehrheit der verfügbaren Monitore gerendert werden konnten. Heute dürfte es schwierig sein, jemanden zu finden, der einen Monitor mit einer solch begrenzten Farbpalette verwendet – sprich, die Option „Restriktiv“ ist quasi nutzlos.

Farben
Ein GIF kann 256 Farben in seiner Farbtabelle speichern. Es kann jedoch manuell auf einen geringeren Wert eingestellt werden. Die Anzahl der Farben zu senken, kann dazu beitragen, die Dateigröße zu reduzieren. In einigen Fällen ist dies sogar ohne Qualitätsverlust möglich.

Das Reduzieren der Farben in der Farbtabelle kann in manchen Fällen die Dateigröße reduzieren, ohne allzu großes Dithering.

Dithering
Farbverläufe mit einer solch reduzierten Farbpalette zu reproduzieren, kann mitunter eine echte Herausforderung sein. Selbst ein einfacher Verlauf kann hunderte von Schattierungen enthalten, so dass die Farbtabelle schnell an ihre Grenzen stößt. Einfach ein paar der Farben rauszuschmeißen, kann zu unerwünschten Effekten führen. Um das zu verhindern, bietet Ihnen Photoshop den Dithering-Algorithmus, der Pixel mit verschiedenen Farben strategisch über den Farbverlauf verteilt. Dieses Verfahren ähnelt dem Pointilismus in der Malerei, denn es vertraut darauf, dass Ihr Auge die Farben zu einem nahtlosen Verlauf mixt.


Weil GIF-Dateien nur 256 Farben speichern können, müssen weitere Farben durch Dithering kompensiert werden.

Fürs Dithering gibt es vier Optionen:

  • Ohne Dither entfernt Dithering komplett, was zu Farbstreifen führen kann.
  • Diffusion wendet ein diffuses Muster an, mit dem Pixel anhand ihrer Konzentration ausgeschlossen werden.
  • Muster schließt Pixel etwas gleichmäßiger aus, um ein Halbton-Muster zu simulieren – was eher stilistisch als realistisch wirkt.
  • Die Option Rauschen arbeitet ähnlich wie Diffusion, aber die Platzierung der Pixel ist zufälliger, was zu gitterartigen Verläufen führt. Dank Photoshop können Sie dieses Ditherung noch etwas verfeinern, in dem Sie die Stärke vorgeben.
Die Dithering-Optionen: 1) Diffusion, 2) Muster, 3) Rauschen, 4) Ohne

Transparenz und Hintergrund-Matte
Das GIF-Format erlaubt 1-Bit-Transparenz – sprich, ein Pixel kann entweder völlig transparent oder vollkommen opak sein. Dies kann zu hässlichen, scharfen Kanten und merkwürdig gefärbten Farbverläufen führen. Sie können den Transparenz-Dither-Algorithmus verändern, um die Farbverläufe etwas fließender erscheinen zu lassen – allerdings sehen sie anschließend häufig etwas gitterhaft aus.

Am besten erzielen Sie eine gleichmäßige Transparenz bei einem GIF, indem Sie die Hintergrund-Matte an die Hintergrundfarbe des Zielbereich beziehungsweise des Containers anpassen, in den die Grafik später eingebunden wird. Über das Ausklappmenü Hintergrund können Sie eine Matte-Farbe auswählen, mit der transparente Pixel ausgefüllt oder überblendet werden.


Über das rot umrandete Auswahlmenü Hintergrund können Sie eine Matte-Farbe wählen.

Beispiel: Wenn ein Pixel eine Deckkraft von 30 Prozent hat, füllt Photoshop die übrigen 70 Prozent mit der Matte-Farbe, so dass eine überblendete Farbe mit 100 Prozent Deckkraft entsteht. Diese Technik funktioniert ganz hervorragend, wenn das Bild an seiner späteren Position über einer Volltonfarbe liegt. Wenn es über einer Struktur oder einem Verlauf platziert wird, entstehen Säume, wie die folgende Abbildung zeigt.

Es sind folgende Kombinationen zu sehen:

  1. Ohne Hintergrund-Matte auf Volltonfarbe
  2. Hintergrund-Matte auf Volltonfarbe
  3. Ohne Hintergrund-Matte auf Farbverlauf
  4. Hintergrund-Matte auf Farbverlauf
Interlaced
Die Methode Interlaced ist ein inzwischen überholtes Verfahren, mit dem  Anwender mit langsamen Internetverbindungen Dateien abschnittsweise im Browser laden können. Da die Mehrheit der Internetnutzer heute mit Breitbandverbindungen im Netz unterwegs ist, wird diese Methode kaum noch gebraucht. Zudem treibt Interlaced die Dateigröße in die Höhe. Deshalb sollten Sie die Methode nur dann, wenn unbedingt nötig anwenden.
Web-Ausrichtung
Dies ist eine weitere veraltete Option, die ursprünglich dazu eingesetzt wurde, um Farben an der Palette der 216 websicheren Farben auszurichten. Heutzutage können Sie es bei der Standardeinstellung „0%“ belassen.
Lossy
Die Einstellung Lossy opfert zugunsten der Dateigröße Bildqualität. Im Idealfall sollten Sie an der Voreinstellung „0“ niemals etwas ändern. Es sei denn, Sie benötigen eine minimale Dateigröße und können auf etwas Bildschärfe verzichten.
Im nächsten Teil lesen Sie:
  • JPEG – Eigenschaften und Optimierungsmethoden
  • PNG-8 und PNG-24
  • WBMP
  • Sonstige Einstellungen (sRGB, Vorschau, Metadaten)
  • Arbeit mit Farbtabellen
  • Bildgröße
  • Animation

(tm)

Kategorien
Design HTML/CSS

So vermeiden Sie, dass Ihr Code „schlecht“ wird, Teil 1

Christian Heilmann

Webentwickler müssen häufig an Projekten arbeiten, die andere begonnen oder erstellt haben, was nicht selten zu Bemerkungen wie: „Was zum … soll das?!?“ führt. Mit anderen Worten: Als Webentwickler verwenden Sie wesentlich mehr Zeit darauf, den Code anderer Leute aufzuräumen oder sich mit den Folgen unglücklicher Designs herumzuschlagen, anstatt selbst großartige Dinge zu programmieren und das Leben der Anwender leichter zu machen.

Fast noch schlimmer ist es, wenn Sie feststellen, dass Sie den als Müll eingestuften Code in grauer Vorzeit selbst verfasst haben. Ich bin diesem Thema im Laufe meines Arbeitslebens beziehungsweise in einschlägigen Foren immer wieder begegnet. Mich damit kritisch auseinander zu setzen, hat mir sehr geholfen, besseren Code zu schreiben.

Gründe, warum Code schlecht wird

Die folgenden Aussagen sind nicht wirklich überraschend. Das Hauptthema, mit dem wir Entwickler uns herumzuschlagen haben, ist die Tatsache, dass unsere Welt sehr fragmentiert ist, dass es zahlreiche Missverständnisse und permanente Änderungen gibt. Was vor fünf Jahren gängige Praxis war, ruft heute verständnisloses Kopfschütteln hervor. Andererseits werden inzwischen als Fehler eingestufte Praktiken zugunsten möglichst cooler Effekte und der Verwendung neuer Technologie trotz besseren Wissens weiter eingesetzt. Meistens sind jedoch nicht die Entwickler, sondern eher die Produktionsbedingungen und andere Gründe für schlechten Code im Internet verantwortlich:

  • Nicht für diese Aufgabe qualifizierte Personen werden damit beauftragt, Code fürs Web zu schreiben, da es ja nur „Software-Programmierung“ sei.
  • Entwicklern wird nicht genügend Zeit für Aufbau, Bereinigung und Dokumentation des Codes eingeräumt – meistens müssen wir uns halbwegs durchmogeln.
  • Entwicklung ist Teil eines größeren Projekts, das häufig an den falschen Stellen beschnitten wird (beim Testen, der Dokumentation, Entwicklung einer Infrastruktur zum Warten und weiteren Entwickeln).
  • Entwickler sind eher schlecht darin, den Zeitaufwand und die benötigten Ressourcen für die Entwicklung eines Produkts zu schätzen.
  • Falscher Stolz: Anstatt bereits vorhandene Lösungen zu verwenden, ziehen Entwickler es vor, wieder und wieder alles selbst zu programmieren.
  • Der Markt – vor allem Software-Firmen haben uns jahrelang suggeriert, dass es keinen Bedarf für handgemachtes Webdesign und -entwicklung gibt: Gute Software-Tools seien völlig ausreichend. Tatsächlich liefern all die schlauen WYSIWYG-Editoren und Integrierten Entwicklungsumgebungen (IDE) jedoch nicht das, was tatsächlich benötigt wird.

Ungeachtet dessen, gibt es ein paar Dinge, die ganz offensichtlich nicht gut sind, aber dennoch ständig wiederholt werden. Dazu gehört ein grundlegendes Missverständnis darüber, was Webentwicklung eigentlich ist.

Sie entwickeln nicht für sich selbst

Sie entwickeln weder für sich noch für Ihre Kunden – denn in den meisten Fällen haben Kunden keinen blassen Schimmer von Webtechnologien. Meistens wollen Kunden eine Website oder eine Anwendung, weil ihr Mitbewerber das auch hat. Im Prinzip entwickeln Sie für die folgenden beiden Gruppen:

  • die Endanwender des Produkts
  • diejenigen Personen, die nach Ihnen an dem Projekt arbeiten.

Sie schulden es den Endanwendern, eine Website oder App zu entwicklen, die unabhängig vom Grad der jeweiligen Professionalität, der Umgebung und dem Geschick gut funktioniert. Den nach Ihnen kommenden Entwicklern sollten Sie einen Code überreichen, der verständlich ist und ohne ihre Beteiligung erweitert oder geändert werden kann.

Dass ich diesem Prinzip gefolgt bin und in der Regel die einfachst mögliche Lösung mitsamt einer guten Dokumention geliefert habe, hat entscheidend zu meiner Karriere beigetragen. Ich hätte natürlich Jahre damit verbringen können, möglichst tolle Dinge mit brandneuen Techniken zu entwickeln und einen Haufen überkommener Produkte hinter mir zu lassen. Vielleicht hätte ich damit auch mehr Geld verdienen können. Allerdings kann ich jetzt sagen, dass sich die vergangenen sechs Jahre nicht wie Arbeit angefühlt haben – vielmehr habe ich das getan, was ich wollte, und bin dafür bezahlt worden.

Wenn Sie ein professioneller Webentwickler oder -designer sein wollen, der von seinen Fachkollegen und Vorgesetzten respektiert wird, sollten Sie auf Ihre Designs und Entwicklungen etwas halten.

Seien Sie sich vor allem darüber bewusst, dass die Leute, die Ihre Produkte später pflegen müssen, nicht über Ihre Fähigkeiten und Ihr Wissen verfügen. In den meisten Fällen wird man Ihr Produkt durcheinander bringen, da Firmen in der Regel nicht genügend Personal für die Pflege engagieren – schnelle Umsätze sind meist wichtiger. Behalten Sie diesen Gedanken im Hinterkopf, um sicherzustellen, dass Sie ein Produkt liefern, das nicht Gefahr läuft, innerhalb kürzester Zeit zu einem Chaoshaufen zu verkommen.

Genug Theorie – lassen Sie uns nun die verschiedenen Webtechnologien und deren kritische Punkte anschauen.

HTML

Technisch gesehen ist HTML keine Programmier-, sondern eine Auszeichnungssprache. Der Unterschied besteht darin, dass HTML keine Logik beschreibt, sondern definiert, was ein bestimmter Textabschnitt ist oder Sie verweisen damit auf andere Daten, die dem Browser vorgeben, was er zu tun hat (ein Bild anzeigen, die Regeln des CSS-Stylesheets laden und ausführen, eine Video- oder Audio-Datei hinzufügen und so weiter). Das heißt nicht, dass man bei HTML nichts falsch machen kann – leider.

Ich bin ein Programmierer, ich mag es, wenn Code funktioniert. Bei HTML schieben wir jedoch häufig Dinge irgendwo hin und hoffen, dass es läuft. Der kreative und laxe Umgang von Browsern mit HTML hat zu einem ebenfalls sehr laxen Herangehen diverser Menschen geführt.

Die häufigsten Probleme in Bezug auf HTML lassen sich sich auf die folgenden Dinge reduzieren:

  • „Malen“ mit HTML,
  • übermäßiger Einsatz von Klassen,
  • Verwendung visueller Klassen- und ID-Namen,
  • der Einsatz nicht-semantischen HTMLs,
  • das Schreiben von skriptabhängigem HTML.

Warum das problematisch ist, erläutern die folgenden Passagen.

Malen mit HTML

Diese ungeeignete Methode hat uns jahrelang verfolgt – vor allem zu den Zeiten, als die Browser noch keine CSS-Unterstützung boten. Wir verwendeten font-Tags, zentrierten Elemente via center auf dem Monitor, benutzten das HR-Tag, wenn wir eine Linie darstellen wollten, setzten fleißig <b> und <i> zum Auszeichnen von Dokumenten ein oder verwendeten table fürs Layout.

Das alles führte dazu, dass bei späteren Änderungen des Aussehens jedes einzelnen HTML-Dokument der Website überarbeitet werden musste, anstatt ein einziges Stylesheet zu ändern. Das ist weder wartungsfreundlich noch sehr hilfreich für eine gute Leistung der Website.

Während visuelle HTML-Elemente relativ rar geworden sind, wird nach wie vor mit HTML „gemalt“. Eine ganze Reihe cooler HTML5-Lösungen fallen in älteren Browsern auf eine Sammlung nutzloser Elemente – meistens jede Menge mit IDs versehene DIVs – zurück. Das ist völlig sinnlos. Wenn Sie ein Element nur deshalb verwenden, um einen visuellen Effekt zu erzielen, verwenden Sie dafür lieber JavaScript oder CSS3. Wenn Sie das Dokument wahllos mit HTML-Elemente bestücken, um ein bestimmtes Aussehen zu erreichen, kann es bei der Pflege der Seiten zu Problemen kommen – etwa dann, wenn Content-Management-Systeme bei Verwendung eines WYSIWYG-Editors die HTML-Elemente rausschmeißen.

HTML ist keine Leinwand, auf der Sie malen können. Es ist eine Methode, um Text zu beschreiben und festzulegen, wie interaktive Elemente wie Formulare, Videos oder Audio-Content gerendert werden sollen.

Inflationärer Gebrauch von Klassen

Klassitis, wie es auch genannt wird, ist ein verbreitetes Problem. Anstatt ein Element mithilfe einer Klasse von anderen Elementen abzuheben, neigen viele Leute dazu, alles und jedes mit Klassen zu versehen.

Das lässt sich zwar einfach bewerkstelligen, birgt aber ähnliche Wartungsprobleme wie das Malen mit HTML. Soll der Klassen-Name später geändert werden, müssen sämtliche Notationen der Klasse per Suchen und Ersetzen in verschiedenen Dokumenten aktualisiert werden. Unter CSS-Gesichtspunkten ist das Vorgehen wenig sinnvoll – im Gegenteil, eine Liste wie die folgende ist reiner Ballast:

<ul class="shopping-list first">
  <li class="list-item">Cucumbers</li>
  <li class="list-item">Bananas</li>
  <li class="list-item important">Toilet Paper</li>
  <li class="list-item">Deodorant</li>
  <li class="list-item">Q-Tips</li>
  <li class="list-item">Duct Tape</li>
  <li class="list-item">Screwdriver</li>
</ul>

Verwenden Sie Klassen nach dieser Faustregel: Nutzen Sie Klassen, um besondere Elemente hervorzuheben und um Elemente zu gruppieren, die noch nicht durch eine logische Ordnung gruppiert sind. Alles andere ist falsch. Das obige Beispiel könnte nach dieser Faustregel so aussehen:

<ul class=“shopping-list first“>

  <li>Cucumbers</li>
  <li>Bananas</li>
  <li class="important">Toilet Paper</li>
  <li>Deodorant</li>
  <li>Q-Tips</li>
  <li>Duct Tape</li>
  <li>Screwdriver</li>
</ul>

Statt der Klassen .shopping-list .list-item{} zum Gestalten der Elemente, reicht diese Notation: .shopping-list li{}. Den hervorzuhebenden Punkt deklarieren Sie demnach über .shopping-list li.important{}und Sie müssen sich keine Gedanken über die Unterscheidung zwischen important und list-item machen. Das gleiche gilt für Ihre JavaScript-Selketoren. Auf diese Weise schreiben Sie wesentlich weniger und schnelleren Code.

Wenn Sie CSS verwenden, sollten Sie unbedingt lernen – falls Sie es nicht schon beherrschen – wie Sie die semantische Hierarchie des Dokuments nutzen können, um möglichst pfiffigen und schlanken CSS-Code zu erstellen. Machen Sie HTML nicht zum Vehikel für Ihr CSS, da andere Personen, die später mit Ihrem Code beziehungsweise Markup klarkommen müssen, möglicherweise nicht verstehen, worauf Sie hinaus wollten.

Visuelle Klassen- und ID-Namen

Wer visuelle Klassen- und ID-Namen verwendet, hat den Sinn von CSS nicht ganz verstanden oder ist sich der Tatsache nicht bewusst, dass CSS-Stylesheets Änderungen unterliegen. Wer Namen wie die folgenden verwendet, hat es möglicherweise auch aufgegeben, verständlichen Code zu schreiben oder möchte einfach schnell eine Änderung einfügen, um die Bug-Tracking-Liste abzuarbeiten. Schauen Sie sich einmal diese Namen an:

  • greenMessage
  • largeBoxRight
  • boldHeadlineArial14px663366right (dieses Beispiel habe ich allen Ernstes in einer Produktionsumgebung gefunden!)
  • orangeHeading
  • redIntroText

Namen wie diese machen es schwierig, Ihren Code zu pflegen und können für erhebliche Verwirrung sorgen, wenn bei einer künftigen Überarbeitungen des Designs statt orangener Überschriften grüne gewünscht sind. Dann müssen Sie nach Orange suchen, um die grüne Farbe zuzuweisen – was ein wirklicher Wahnsinn ist.

Klassen- und ID-Namen sollten logisch beschreiben, worum es sich handelt – nicht wie etwas aussieht. So wäre es sinnvoller, die largeBoxRight als leanSideBar zu deklarieren, während die Überschrift in der nächsten Version der Website vermutlich anders formatiert wird und daher besser mit einer Funktionsbeschreibung wie breakout oder instructions bezeichnet würde. Bei der greenMessage handelt es sich vermutlich um eine Bestätigung beziehungsweise confirmation und der redIntroText hätte demnach als warning oder error mehr Informationswert. Es sei denn, Ihr Webdesign hat tatsächlich einen roten Einleitungstext, bei dem es sich nicht um eine Warnung handelt. In dem Fall wäre intro jedoch völlig ausreichend.

Der Grund liegt auf der Hand – wenn das Design geändert wird, müssen Sie an Ihrem HTML-Dokument nichts tun. Lediglich die Werte der CSS-Eigenschaften müssen angepasst werden. Mit generischen und semantisch sinnvollen Klassennamen machen Sie Ihren Code fit für künftige Änderungen. Was nicht heißt, dass Sie gar keine visuellen Klassennamen verwenden dürfen.

Sinnvolle Ausnahmen: Wenn Sie einem Element beispielsweise abgerundete Ecken zufügen möchten und zudem wünschen, dass dieses HTML-Element später wahlweise mit oder ohne abgerundete Ecken verwendet werden kann, ist eine Klasse namens rounded durchaus sinnvoll. Sie können Sammlungen visueller Effekte via CSS definieren und sie per CSS anwenden oder deaktivieren.

Nicht-semantisches HTML

Ein anderes großes Problem ist die Verwendung nicht-semantischen HTMLs – sprich dem Verwenden individuell benannter Elemente, für die es in HTML eigene Attribute gibt. Darunter fallen merkwürdige Konstruktionen wie diese hier:

  • <span class="link">Click here to continue</span>
  • <div id="mainheading">Welcome to our awesome web site</div>
  • <span class="label">Enter name:</span><input type="text" name="name" id="name">
  • <div class="button rounded gradient" id="but1">Send form</div>
  • <span class="headline">Pachyderms</span><span class="sub-headline">Elephants</span>

Für solche Kuriositäten gibt es mehrere Gründe:

  • HTML wird von Menschen geschrieben, die nichts davon verstehen.
  • Es wird ein Framework oder System verwendet, das von HTML-Unkundigen erstellt wurde.
  • Menschen schreiben HTML ohne zu wissen, wo es eingesetzt wird (wiederverwendbare Komponenten).

Für den ersten Punkt gibt es keine Entschuldigung. Es gibt genügend Entwickler am Markt, die HTML schreiben können und das wirklich gerne tun. Wenn Sie eine Webanwendung wollen, sollten Sie auf jeden Fall so jemanden engagieren. Wenn Ihre Toilette repariert werden muss, rufen Sie ja auch nicht den Maurer, sondern einen Sanitärfachmann. Andernfalls enden Sie knietief in – na, Sie wissen schon – und genau so verhält es sich mit Ihrem Webprodukt.

Der zweite Punkt, schlechter von Frameworks generierter Code, ist zwar verständlich, aber ebenfalls eine Schande. Framework-Entwickler sollten mit guten Frontend-Entwicklern zusammen arbeiten, um Komponenten mit vernünftigem HTML zu erstellen. Ein span– anstelle eines label-Elements ist ineffizient, weil Sie die spezifischen Vorteile nicht nutzen können (klickbarer Text, um aufs Formularsteuerelement zu fokussieren; Unterstützung von Eingabehilfen beziehungsweise behinderungskompensierender Technologien).

Der dritte Punkt ist der verständlichste – und hier kommt HTML5 ins Spiel. In der jetzigen Version ist HTML eine schreckliche Sprache, um Dokumente aufzuteilen und daraus wiederverwendbare und beliebig anzuordnende Komponenten zu erstellen. Die hierarchische Ordnung der Überschriften macht das nahezu unmöglich. Zudem ruinieren die entlang der Dokumentensyntax vererbten CSS-Regeln die Darstellung von Widgets, wenn Sie diese Komponenten nicht übermäßig genau spezifizieren oder in iFrames einbetten.

Es gibt jedoch keinerlei Entschuldigung für HTML-Grausamkeiten wie im Beispiel oben, wenn Sie solches Markup bewusst schreiben. HTML hat eine äußerst logische Struktur und nützliche Elemente für bestimmte Aufgaben: Überschriften unterteilen Dokumente in logische Einheiten, Schaltflächen rufen Funktionen im Backend auf oder lösen Skripte und Formularelemente aus (etwa FIELDSET oder LEGEND), strukturieren Formulare und machen sie für alle möglichen Eingabegeräte zugänglich.

Mit JavaScript verwandeln Sie jegliches Element in einen Button oder lassen es Aktionen ausführen, wenn der Anwender damit interagiert. Allerdings – warum sollte man sich damit herumschlagen, wenn HTML selbst etwas entsprechendes bietet, das funktioniert? In den meisten Fällen, liegt das Problem darin, dass der Autor des Codes es versäumt hat, eine HTML-Referenz einzufügen und das richtige Element zu finden.

Script-abhängiges Markup

Dieser Ursache für „verdorbenen“ Code begegnet man in jüngster Zeit sehr häufig. Dennoch erstaunt es mich immer wieder, warum HTML-Autoren das tun. Sofern ein bestimmtes HTML-Element nur dann sinnvoll ist, wenn es eine bestimmte JavaScript-Funktion auslöst, sollte man das komplett mit JavaScript umsetzen. Das gleiche gilt für Elemente, die nur gut aussehen, wenn man bestimmtes CSS auf sie anwendet. Mit JavaScript ist es kinderleicht, in ein Dokument Code einzufügen – auch via CSS können Sie das erreichen.

Es gibt keine logische Erklärung dafür, jede Menge DIVs und SPANs mit bestimmten Klassen von Hand zu schreiben und diese dann so zu erweitern, dass sie etwas anderes darstellen. Wenn Sie so vorgehen, verteilen Sie die spätere Pflege des Codes auf das HTML-Dokument und Ihr Script. Das bedeutet wiederum, das früher oder später irgend jemand sich nicht an diese Form der Notation hält. Sofern Sie HTML verwenden, das nur bei verfügbarem Scripting sinnvoll ist, dann gewährleistet das Erstellen mit JavaScript, dass Änderungen am HTML-Code dazu führen, dass man zumindest auch einen Blick auf das JavaScript wirft.

HTML is the lowest common denominator – it should work for everybody. When I look at a web site on my company Blackberry and I click a button without something happening I get frustrated. When I use my Smartphone and your input fields aren’t input fields I can’t use your web site. If there is any kind of error and JavaScript stops and your interface becomes not usable you frustrate and confuse your end users – the people who bring you money and tell other people about your great product. If you generate all that is dependent on JavaScript and an error occurs end users will still get a usable – albeit not as pretty and cool – interface and will not leave frustrated and annoyed. This is a no-brainer when it comes to providing a service.

HTML ist der kleinste gemeinsame Nenner – es sollte für jeden funktionieren. Wenn ich mit meinem Firmen-Blackberry Webseiten aufrufe, auf einen Button klicke und nichts passiert, bin ich frustriert. Wenn Ihre Eingabefelder beim Aufruf mit meinem Smartphone keine Eingabefelder sind, kann ich Ihre Website nicht benutzen. Falls es irgend einen Fehler gibt, so dass das JavaScript stoppt und Ihre Benutzeroberfläche damit außer Funktion setzt, verwirren und frustrieren Sie die Anwender – also die Leute, die Ihnen Geld bringen und anderen Leuten von Ihrem tollen Produkt erzählen sollen. Wenn Sie jedoch alles generieren lassen, was von JavaScript abhängig ist, werden Endanwender bei einem auftauchenden Fehler dennoch eine brauchbare Schnittstelle sehen – vielleicht nicht ganz so schick und cool – jedenfalls werden die Anwender nicht verärgert und frustriert die Anwendung verlassen. Das sollte jedem, der einen Service anbietet, klar sein.

Es ist keine Schande, HTML für Ihre JavaScript-Lösung während der Entwicklung von Hand zu schreiben. Bevor Sie die Lösung installieren, sollten Sie den HTML-Code jedoch in ein einfaches Generator-Script in Ihrem JavaScript schieben – und wir werden alle viel glücklicher mit dem Ergebnis sein.

Writing invalid HTML because you can

HTML validation is holy war material – so let’s not go too deep into it. The main point about validating code is that you have a good starting point: you know it should work and if there is something going wrong then there must be a different reason than your code for it. The reason to write invalid HTML is normally to use functionality that browsers provide that makes a lot of sense but is not part of the normal HTML spec. WAI-ARIA is a good example – you add a few extra attributes to your elements and out of a sudden you have a much more accessible document as the browser tells assistive technology like Screen Readers that there is more to this document than meets the eye.

Nicht-valides HTML schreiben, nur weil es möglich ist

You will find however that people write invalid HTML because it can be done. As browsers do not complain about invalid HTML (they do not show invalid XML though which actually makes them inconsistent) but instead try to repair wrong nesting and ignore invalid attributes people use their own attributes and leave invalid elements in the document. Sometimes you find people deliberately writing wrong HTML as some browser in one configuration or another does things right only when you do it wrong. This means a few things though:

Leider kommt es vor, dass manche nicht-valides HTML schreiben, weil das technisch möglich ist. Da Browser nicht-valides HTML ohne zu „Meckern“ verarbeiten (nicht-valides XML wird allerdings nicht angezeigt, was Browser inkonsistent macht) und sogar versuchen, falsche Verschachtelungen zu reparieren oder ungültige Attribute zu ignorieren, benutzen diverse Leute ihre eigenen Attribute und lassen nicht-valide Elemente im Dokument. Zum Teil wird absichtlich mit falsches HTML benutzt, da einige Browser in einer bestimmten Konfiguration Dinge richtig darstellen, wenn Sie falschen Code verwenden. Das hat diverse Folgen:

  • Sie verlassen Sich darauf, dass Browser Ihre Fehler bereinigen – viel Glück.
  • Sie müssen Leuten, die Ihren Code später pflegen, erklären, warum Sie was wie geschrieben haben.
  • Höchstwahrscheinlich müssen Sie den Code für andere Browser ändern und für jeden neu auf den Markt kommenden Browser erweitern.
  • Sie sollten sich nicht wundern, wenn ein anderer Entwickler Ihren Code später überarbeitet, weil Ihr Markup einfach falsch aussieht.
Das lesen Sie in den nächsten Teilen der Artikelserie:
  • CSS-Code haltbar machen
  • Typische Schwachstellen bei JavaScript umgehen
(mm),
Kategorien
Fotografie Inspiration Tutorials

Gimp-Tutorial (3): Bilder mit verschiedenen Filtern weichzeichnen

Das Gegenstück zum Schärfen ist das Weichzeichnen (englisch blur), womit die Bildschärfe reduziert wird. Neben den Scharfzeichen-Filtern gehören die Weichzeichen-Filter zu den am häufigsten verwendeten Filterarten. Die Inhalte dieser Tutorial-Reihe sind ein Beitrag des Galileo-Verlags, in dem das Buch „Gimp 2.6“ von Jürgen Wolf erschienen ist.

Gaußscher Weichzeichner

Der wohl bekannteste Weichzeichner ist der Gaußsche Weichzeichner, den Sie in GIMP über Filter / Weichzeichnen / Gaussscher Weichzeichner aufrufen. Der Filter wird in der Praxis unter anderem gerne verwendet, um bei Bildern noch mehr Schärfentiefe zu erzeugen und so die Aufmerksamkeit noch mehr auf ein bestimmtes Bildobjekt zu lenken.

Den Gaussschen Weichzeichner können Sie auf jede Ebene oder Auswahl anwenden. Dabei stellen Sie den Weichzeichnenradius (im abgebildeten GIMP-Dialog etwas unglücklich übersetzt mit Weichenzeichenradius) über Horizontal und Vertikal ein.


Abbildung 1: In diesem Dialog stellen Sie den Weichzeichnenradius ein.


Abbildung 2: Gaußscher Weichzeichner nur mit horizontalem Weichzeichnenradius


Abbildung 3: Gaußscher Weichzeichner nur mit vertikalem Weichzeichnenradius

Tipp: Fotografieren mit Schärfentiefe

Wollen Sie echte Schärfentiefe beim Fotografieren erzielen, müssen Sie die Blende so weit wie möglich öffnen. Je weiter die Blende offen ist, umso mehr Schärfentiefe können Sie erzielen. Natürlich bedeutet dies meistens auch, dass Sie nicht mehr im Automatikmodus fotografieren können. (Anmerkung der Redaktion: „Öffnen“ ist hier etwas unglücklich gewählt. Tatsächlich muss man die Blende möglichst weit schließen, denn: Je höher die Blendenzahl, desto kleiner die Blendenöffnung, was zu längeren Verschlusszeiten und zur Gefahr der Verwacklung führt. Um bei hohem Blendenwert und langen Verschlusszeiten Verwacklungen zu vermeiden, können Sie die ISO-Zahl höher einstellen und/oder für die Aufnahme ein Stativ verwenden.)

Je höher Sie den Wert einstellen, umso mehr umliegende Pixel werden auf einen mittleren Farbwert gesetzt – oder genauer, umso stärker wird weichgezeichnet. Standardmäßig wird das Weichzeichnen in die horizontale und vertikale Richtung gleichmäßig angewandt. Wollen Sie allerdings einen Bereich unterschiedlich stark weichzeichnen, klicken Sie das Kettensymbol an (siehe obere Abbildung, rechts neben den Feldern Horizontal und Vertikal), damit diese Verbindung getrennt wird.

Außerdem stehen Ihnen mit IIR und RLE zwei verschiedene Methoden zur Verfügung. IIR (kurz für Infinite Impulse Response) ist die schnellere Version und ideal bei Bildern mit vielen verschiedenen Farbwerten, also Bildern, die nicht an einem Computer entstanden sind. RLE (kurz für Run Length Encoding) eignet sich hingegen besser für Bilder mit großen gleichfarbigen Bereichen, was meistens auf am Computer erstellte Bilder zutrifft.

Selektiver Gaußscher Weichzeichner

Den Filter Selektiver Gaußscher Weichzeichner erreichen Sie über Filter / Weichzeichnen / Selektiver Gaußscher Weichzeichner. Er wirkt nicht auf alle Pixel des Bildes oder der Auswahl, sondern nur auf die Pixel, deren Farben höchstens um den Wert von Max. Delta von den Farben der Pixel daneben abweichen. Wie viele Nachbarpixel zum Berechnen des Filters verwendet werden, geben Sie mit Weichzeichnenradius an.


Abbildung 4: Der Dialog Selektiver Gaußscher Weichzeichner

Der Vorteil des Filters ist, dass Sie mit Hilfe des Werts von Max. Delta, im Gegensatz zum Gaußschen Weichzeichner, Kanten gegen das Weichzeichnen schützen können. Der Weichzeichner ist allerdings sehr rechenintensiv, und die Anwendung (wie auch die Vorschau) kann daher ein wenig dauern.

Die folgenden Abbildungen illustrieren die Effekte des Selektiven Gaußschen Weichzeichners.


Abbildung 5: Ausgangsbild – FOTO: Hanspeter Bolliger



Abbildung 6: Hier wurde der Selektive Gausssche Weichzeichner mit einem Weichzeichnenradius von 20 verwendet. Sie erkennen sehr schön, wie klare Bildkanten erhalten bleiben.


Abbildung 7: Der gleiche Radius wurde auch für dieses Bild benutzt, nur wurde hier zum Vergleich der Gaußsche Weichzeichner eingesetzt.

Kachelbarer Weichzeichner

Der Filter Kachelbarer Weichzeichner oder genauer gesagt das Skript-Fu-Programm erstellt weiche Übergänge an den Bildrändern. Vorwiegend wird dieser Filter daher zur Erstellung von Mustern (Texturen) verwendet, um für weiche Ränder zu sorgen, wo die Muster (beziehungsweise hier Kacheln) aneinanderstoßen. Den Filter rufen Sie über Filter / Weichzeichnen / Kachelbarer Weichzeichner auf.

Anhand der Parameter dürften Sie vielleicht schon erahnen, dass dieses Skript-Fu-Programm intern den Gaußschen Weichzeichner verwendet, um weiche Ränder zu erzeugen. Mit dem Wert Radius stellen Sie ein, wie stark weichgezeichnet werden soll. Je größer der Wert, umso stärker die Wirkung. Mit Vertikal weichzeichnen und Horizontal weichzeichnen bestimmen Sie, ob Sie die Ränder vertikal und/oder horizontal weichzeichnen wollen.


Abbildung 8: Der Dialog Kachelbarer Weichzeichner

Über die Art des Weichzeichners wählen Sie zwischen den Algorithmen IIR und RLE, die oben bereits beschrieben wurden.


Abbildung 9: Gekachelte Textur

Oben, Abbildung 9, sehen Sie ein erstelltes Muster (Textur, Kachel), das mit dem Füllen-Werkzeug auf eine Fläche gefüllt wurde. Hier erkennen Sie klar die Übergänge der Kacheln an den vier Seiten. Im unteren Bild, Abbildung 10, wurde der Kachelbare Weichzeichner verwendet. Die Ränder, an denen die Kacheln zusammenstoßen, sind nicht mehr so deutlich zu sehen. Beide Bilder wurden natürlich sehr stark (300 %) vergrößert, um den Unterschied deutlicher zu zeigen.


Abbildung 10: Der Kacheleffekt wurde etwas abgemildert.

Bewegungsunschärfe

Sehr vielseitig ist der Filter Bewegungsunschärfe, mit dem Sie dem Bild eine gewisse Dynamik hinzufügen können. Mit ihm erstellen Sie Bewegungen in linearer, kreisförmiger und zoomartiger Richtung im Bild.

Den Filter starten Sie über Filter / Weichzeichnen / Bewegungsunschärfe. Hierbei muss allerdings auch wieder hinzugefügt werden, dass dieser Filter bei großen Bildern ziemlich rechenintensiv ist und die Anwendung, abhängig von der Leistung des Rechners, etwas länger dauern kann.

Abbildung 11: Der Dialog „Bewegungsunschärfe“

Unter Weichzeichnungsart legen Sie die Bewegung fest, die Sie im Bild erzeugen wollen. Folgende Möglichkeiten stehen hierbei zur Verfügung:

  • Linear: Mit dieser Einstellung wird die Bewegung in einer E Richtung ausgeführt. Mit dem Regler Länge stellen Sie ein, wie stark weichgezeichnet wird. Der Regler Winkel hingegen gibt vor, in welche Richtung (0 bis 90°) die Bewegung ausgeführt wird.
  • Radial: Damit führen Sie eine kreisförmige Bewegung aus. Der Regler Länge ist hierbei deaktiviert. Mit dem Regler Winkel stellen Sie ein, wie stark die Drehung erfolgen soll.
  • Zoom: Wenn Sie diese Option wählen, bekommt das Bild den Anschein, als hätte man bei einer etwas längeren Belichtungszeit die Brennweite verändert. Als Ergebnis erhalten Sie den Effekt eines Hereinzoomens ins Bild. Ausgehend vom Unschärfezentrum nimmt dieser Effekt nach außen hin immer stärker zu. Wie stark der Effekt ausgeführt wird, geben Sie mit dem Regler Länge an. Der Regler Winkel ist hierbei ausgegraut.

Wichtig für die Verwendung des Filters ist auch das Unschärfezentrum, wo Sie die X-/Y-Position des Anfangspunkts der Bewegung festlegen. Diesen Punkt müssen Sie allerdings per Hand ermitteln, indem Sie mit dem Mauszeiger über dem gewünschten Bildpunkt verharren. Die entsprechende Position lesen Sie aus der Statusleiste ab und geben sie manuell bei den X- und Y-Werten ein.


Abbildung 12: Das Ausgangsbild – FOTO: Clarissa Schwarz


Abbildung 13: Das Bild nach der Verwendung des Filters „Bewegungsunschärfe“ mit der Weichzeichnungsart „Linear“

Um einen Anfangspunkt für die Weichzeichnungsarten Radial und Zoom zu ermitteln, können Sie mit einem beliebigen Werkzeug auf den gewünschten Mittelpunkt ins Bild gehen und die Koordinaten links unten in der Statusleiste ablesen. Anschließend brauchen Sie diese Koordinaten nur im Filter Bewegungsunschärfe unter dem Unschärfezentrum bei dem X- und Y-Wert einzugeben.


Abbildung 14: Den Mittelpunkt wählen Sie per Mauszeiger aus.

Ausgehend von diesem Unschärfezentrum sehen Sie dann in Abbildung 12 und 13 zur Demonstration zwei Beispiele mit verschiedenen Arten der Weichzeichnung – einmal wurde Radial als Weichzeichnungsart, und im unteren Bild (Abbildung 16) wurde Zoom verwendet.


Abbildung 15: Hier wurde der Filter Bewegungsunschärfe mit Radial als Weichzeichnungsart verwendet. Als Winkel wurde hier der Wert 3 eingesetzt.


Abbildung 16: Hier wurde Zoom als Weichzeichnungsart mit einer Länge von 5 verwendet.

Weichzeichnen mit dem NL-Filter

Der NL-Filter ist sehr vielseitig und eignet sich sowohl zum Schärfen als auch zum Weichzeichnen. Sie erreichen ihn über Filter / Verbessern / NL-Filter. Dass der Filter in der Kategorie Verbessern liegt, hat damit zu tun, dass er vorwiegend zum Entfernen von Bildrauschen und Flecken im Bild verwendet wird und nicht als Weichzeichen-Filter.


Abbildung 17: Das geeignete Werkzeug, um Bildrauschen und Flecken zu entfernen.

Die Optionen zum Weichzeichnen mit diesem Filter sind:

  • Alphabasierter Mittelwert: Mit dieser Option erhalten Sie eine Mischung aus Weichzeichnen und Flecken entfernen. Ein empfohlener Startwert ist hier für Alpha 0,8 und Radius 0,6.
  • Optimale Schätzung: Rein für die Reduzierung von Bildrauschen eignet sich dies Option bestens. In der Praxis können Sie hier mit einem Startwert von 0,2 für Alpha 4 und 1,0 für Radius 5 beginnen. Jetzt erhöhen Sie falls notwendig Alpha so lange, bis Sie das optimale Ergebnis erhalten.

Mit dem Regler Kantenverstärkung heben Sie bei Bedarf die Kanten hervor, was die Schärfung im Bild verbessert. Dieser Wert wird nicht für das Weichzeichnen benötigt.

Verpixeln

Mit dem Filter Verpixeln reduzieren Sie ein Bild oder eine Auswahl in große Blöcke. Dies entspricht in etwa dem Effekt, den die Medien verwenden, um ein Gesicht unkenntlich zu machen, damit Personen nicht identifizierbar sind. Der Effekt kann aber auch für künstlerische und kreative Zwecke verwendet werden.


Abbildung 18: Der Dialog „Verpixeln“

Sie rufen den Filter über Filter / Weichzeichnen / Verpixeln auf. Über Pixelbreite und Pixelhöhe stellen Sie die Breite beziehungsweise Höhe der Blöcke ein. Solange das Kettensymbol dahinter geschlossen ist, sind Höhe und Breite immer voneinander abhängig. Wenn Sie die Kette öffnen, können Sie diese beiden Werte unabhängig voneinander einsetzen. Als Maßeinheit wird auch hier standardmäßig Pixel verwendet. Über die Dropdown-Liste können Sie die Einheit ändern.


Abbildung 19: Das Ausgangsbild  –  FOTO: Jürgen Wolf


Abbildung 20: Nach der Verwendung von Verpixeln. Hier wurde eine kreisrunde Auswahl im Gesicht verwendet.

Die Automatik

Über Filter / Weichzeichnen / Weichzeichnen finden Sie einen Weichzeichner ohne irgendwelche Einstellungen. Dieser Filter verwendet immer das angrenzende Pixel und weist anhand eines Mittelwertes den entsprechenden Farbwert zu. Sie könnten ihn zum Reduzieren des Bildrauschens ausprobieren. Allerdings hat der Filter den Nachteil, dass er alle Bilder gleich behandelt, egal wie groß sie sind. Daher wirkt er auf kleine Bilder stärker als auf größere Bilder.

Partielles Weichzeichnen und Verschmieren

Um bestimmte Bildbereiche weichzuzeichnen, können Sie das Werkzeug Weichzeichnen/Schärfen verwenden.


Icon 1: Tastaturkürzel „Shift + U“

Falls Sie dieses Werkzeug fürs Schärfen verwenden, kennen Sie die Funktionsweise bereits. Für die Werkzeugeinstellungen und die Anwendung des Weichzeichners gilt analog dasselbe.

Für gerichtetes Weichzeichnen sollten Sie das Werkzeug Verschmieren (siehe Icon 2) verwenden.


Icon 2: Tastaturkürzel „Shift + U“

Zum Verschmieren wird immer die Farbe unterhalb der Werkzeugspitze benutzt. Ansonsten entspricht auch dieses Werkzeug in Verwendung und Werkzeugeinstellungen exakt dem Werkzeug Weichzeichnen/Schärfen (Icon 2).

Anwendungsgebiete

Nützlich sind beide Werkzeuge, wenn Sie bei einer Fotomontage ein Objekt in einen anderen Hintergrund eingefügt haben. Durch Weichzeichnen oder Verschmieren der Kanten des eingefügten Objektes können Sie dafür sorgen, dass der Übergang nicht so hart wirkt und die Montage nicht gleich auf den ersten Blick auffällt. Trotzdem sollten Sie beide Werkzeuge sparsam verwenden. Unbedachter und großflächiger Einsatz führt schnell zu einem Farbenbrei, der nicht mehr schön aussieht.

Die folgende Abbildung zeigt den Unterschied zwischen dem Verschmieren und dem Weichzeichnen. Im linken Drittel wurde das Werkzeug Verschmieren verwendet. Der mittlere Teil ist unbearbeitet, und im rechten Drittel wurde das Werkzeug Weichzeichnen eingesetzt.


Abbildung 23: Der Unterschied zwischen den Werkzeugen ist klar erkenntlich.

(mm),

Kategorien
Inspiration Tutorials

jQuery-Tutorial (2): Wir optimieren unser schickes Sliding-Menü

János Rácz

In Ordnung, wir haben es fast geschafft. Wenn Sie den Code aus Teil I des Tutorials genau jetzt in eine Website einbauen, wird er höchstwahrscheinlich – wenn Sie alles richtig gemacht haben – einfach nur gut funktionieren. Um aber sicherzugehen, dass alles reibungslos läuft, lassen Sie uns diese globalen Variablen loswerden. Diese in einer Klasse zu verstecken ist immer eine gute Idee, damit sie nicht mit anderem JavaScript Code kollidieren.


Das Sliding-Menü aus Teil I des Workshops – Demo

Das ist ganz besonders wichtig, wenn Sie andere JavaScript-Schnipsel aus verschiedenen Quellen zu Ihrer Seite hinzugefügt haben. Stellen Sie sich vor, zwei Programmierer würden einer ihrer globalen Variablen den gleichen Namen geben. Wann auch immer Sie mit der einen interagieren würden, würde sich das automatisch auf die andere auswirken. Das wäre ein Chaos!

Klassen und Variablen einsetzen

Also erstellen wir nun die Klasse SlidingMenu und verwenden active_menu und is_animation_running als ihre Variablen.
Dieser Ansatz erlaubt es Ihnen auch, das Slide-Menü öfter als einmal auf der Seite zu verwenden. Alles, was Sie tun müssen, ist für jedes animierte Menü eine neue Instanz von SlidingMenu zu erstellen. Und wenn wir schon einmal dabei sind, können wir die Slidefunktion genausogut SlidingMenu zuordnen, so dass sie ihre Variablen, falls erforderlich, direkt modifizieren und auf sie zugreifen kann.

function SlidingMenu ()
{
	// Let's make these class variables so that other functions (i.e. slide) can access them.
	this.is_animation_running = false;
	this.active_menu = $($( ".menu .menu_slider" )[0]);

	// We do the bindings on object creation.
	var self = this;
	$( ".menu .menu_button" ).bind( "click", self, on_click ); // Menu button click binding.

	// Do the slide.
	this.slide ( 253 );
}

SlidingMenu.prototype.slide = slide;

function slide ( width )
{
	this.is_animation_running = true;
	var self = this;
	this.active_menu.animate (
		{ 'width' : width }, // We replaced the specific value with the second parameter.
		1000,
		function ()
	        {
		     self.is_animation_running = false; // We set is_animation_running false after the animation finishes.
		}
	);
}

function on_click ( event )
{
	// Notice we access the SlidingMenu instance through event.data!
	if ( $(this).next()[0] == event.data.active_menu[0] )
	{
		return;
	}
	if ( event.data.is_animation_running )
	{
		return;
	}
	// Get the item next to the button.
	var menu_slider = $(this).next();
	// First slide in the active_menu.
	event.data.slide ( 0 );
	// Set the active menu to the current image.
	event.data.active_menu = menu_slider;
	// Then slide out the clicked menu.
	event.data.slide ( 253 );
}

var sl = new SlidingMenu(); // We pass the three parameters when creating an instance of the menu.

Der vorstehende Code bedarf einiger Erklärung. Es gibt drei wichtige Blöcke, also lassen Sie sie uns einen nach dem anderen anschauen.

Die Klasse SlidingMenu

function SlidingMenu ()  // Our new class
{
	// Let's make these class variables so that other functions (i.e. slide) can access them.
	this.is_animation_running = false;
	this.active_menu = $($( ".menu .menu_slider" )[0]);

	// We do the bindings on object creation.
	var self = this;
	$( ".menu .menu_button" ).bind( "click", self, on_click ); // Menu button click binding.

	// Do the slide.
	this.slide ( 253 );

}

Anders als viele andere Programmiersprachen hat JavaScript kein class-Schlüsselwort für die Erstellung von Klassen. Aber wir können einfach Objekte erstellen, die ihre eigenen Variablen und Methoden haben, indem wir ein reguläres JavaScript-Objekt erstellen.

Also definieren wir hier im Prinzip eine Funktion, SlidingMenu, und in diese Funktion packen wir alles, was wir in anderen Sprachen in einen regulären Klassenkonstruktor setzen würden.

Wir definieren zuerst die gleichen zwei Variablen, die wir vorher benutzt haben, is_animation_running und acitve_menu. Mit dem Schlüsselwort this stellen wir sicher, dass sie zu der bestimmten Klasseninstanz gehören.
Der nächste Teil mag zunächst nicht offensichtlich sein:

var self = this;
$( ".menu .menu_button" ).bind( "click", self, on_click );

Um das zu verstehen, müssen wir uns ein wenig darüber unterhalten, wie jQuery mit Ereignissen umgeht.

jQuery Event Handling 101 (zumindest, was wir hier wissen müssen)

Kurz gesagt verwendet jQuery die Methode bind, um Eventlistener zu DOM-Elementen hinzuzufügen. (Alternativ können Sie die Methode live verwenden, die Eventlistener aktualisiert, wenn dem Dokument neue Elemente hinzugefügt werden.)

Die Basisanwendung von bind erfordert zwei Parameter: Einen Ereignistyp (etwa click oder mouseover) und eine Funktion, das heißt Callback-Funktion, die ausgeführt wird, wenn der vorgegebene Ereignistyp beim DOM-Element eintritt.

Und das ist der Punkt, an dem das Schlüsselwort this ins Spiel kommt, denn in der Callback-Funktion wollen wir häufig das DOM-Objekt referenzieren, auf dem das Ereignis stattfand. jQuery macht es sehr bequem, das zu tun, wir brauchen nur this zu verwenden.

Praxisbeispiel – Bildelement wechseln

Lassen Sie uns zum Beispiel sagen, dass wir ein Bildelement austauschen wollen, wenn der User darauf klickt. Um das zu tun, können wir so etwas wie das hier schreiben:

$("#example_img").bind ( "click", change_image );
function change_image ( event )
{
    this.src = "images/another_img.png";
}

Im obigen Beispiel verwenden wir das Schlüsselwort this, um das DOM-Objekt zu referenzieren. Für einfache Anwendungen ist das sehr bequem, bei komplizierteren könnten Sie jedoch auf Probleme stoßen.

Wie in dem Beispiel möchten wir irgendwie auf die Variablen der Instanz SlidingMenu zugreifen. Da das Schlüsselwort this bereits verwendet wird, um das DOM-Objekt zu referenzieren, müssen wir einen anderen Weg finden.

Glücklicherweise ist das dank jQuery ziemlich einfach zu erledigen. Zu dem Zweck übergeben wir einen anderen Parameter an die bind-Funktion, der genau zwischen dem Ereignistyp und der Callback-Funktion platziert wird. Dieser Parameter muss ein Objekt sein.

Sie haben sicherlich den Parameter event in der obigen Funktion change_image bemerkt. An jede Callback-Funktion wird automatisch ein event-Parameter übergeben, der ein paar wertvolle Informationen enthält, so zum Beispiel, welches Element angeklickt wurde. Und mit dem erweiterten Abruf der Funktion bind können wir das Instanzobjekt SlidingMenu auch durch den Eventparameter übergeben. Mit event.data können wir dann auf dieses Objekt zugreifen.

Hier ist ein einfaches Beispiel:

function ImageData () // This will be an object that contains information about an image, much like our SlidingMenu class contains information about the sliding menu.
{
    this.width = "500";
    this.height = "200";
    this.src = "images/example_image.png";
}

// We create an instance of ImageData.
var image_instance = new ImageData();

// We bind the change_image function to the click event, passing along the image_instance data object as well.
$("#example_image").bind ( "click", image_instance, change_image );

// The callback function.
function change_image ( event )
{
    this.src = event.data.width; // event.data refers to the image_instance object
    this.src = event.data.height;
    this.src = event.data.src;
}

Dieses Beispiel illustriert gut, wie wir sowohl auf das DOM-Element, auf dem das Ereignis stattfand, als auch auf das Datenobjekt, das wir durchgereicht haben, zugreifen können. Auf das Erstere greifen wir durch das Schlüsselwort this zu und auf das Letztere durch event.data.

Nun macht es letztendlich Sinn, warum wir diese erweiterte Version der Funktion call verwendet haben, als wir das click-Ereignis an die Buttons gebunden haben. Und weil this sich in diesem Zusammenhang immer auf das DOM-Element beziehen wird, verwendeten wir die self-Variablen als Ersatz, um die Instanz SlidingMenu an die Funktion Callback zu übergeben.

Hier noch einmal:

var self = this;
$( ".menu .menu_button" ).bind( "click", self, on_click );

Weiter geht’s

Der letzte Teil in unserer Klassendefinition lässt einfach nur das erste Feld hinausgleiten, indem sie die Methode slide verwendet. Aber da wir eine solche Funktion bisher noch nicht definiert haben, wird die Zeile unter der Klassendefinition auch wichtig:

SlidingMenu.prototype.slide = slide;

Wir verwenden den Prototypmechanismus von JavaScript, um unser Objekt SlidingMenu mit der Methode slide zu erweitern.

Dieser Ansatz hat zwei Hauptvorteile:

  • Erstens kann die Slidefunktion nun direkt auf die Variablen aller Klasseninstanzen zugreifen, indem sie das Schlüsselwort this verwendet. (Da keine Ereignisverarbeitung direkt in diese Funktion involviert ist, bezieht sich this nun auf die Instanz SlidingMenu. Bei on_click werden Sie sehen, dass wir mit event_data auf sie werden zugreifen müssen.
  • Zweitens verbessert die Verwendung von prototype anstelle des direkten Schreibens in der Klasse die Speichernutzung, wenn wir mehr als eine Instanz von SlidingMenu erstellen, denn wir müssen die Funktionen slide nicht jedes Mal, wenn wir eine neue Instanz erstellen, neu erschaffen: Es wird immer die externe Funktion verwendet.

Die Slide-Funktion

Wie wir bereits diskutiert haben, ist slide für das Ein- und Ausfahren der Felder verantwortlich. Sie wird von der Funktion on_click aufgerufen (siehe unten) und verwendet dieselben Parameter wie zuvor:

function slide ( width )
{
	this.is_animation_running = true;
	var self = this;
	this.active_menu.animate (
	{ 'width' : width },
	this.effect_duration,
	function ()
	{
		self.is_animation_running = false;
	}
	);
}

Sie sehen, dass wir this vor jede Variable setzen und diese sich nun auf die Variablen der Klasseninstanz beziehen. Auf diese Weise müssen wir die Variablen nicht als Funktionsparameter übergeben, um auf sie zuzugreifen oder sie sogar zu modifizieren. Und ganz egal, wie viele Instanzen von SlidingMenu wir erstellen, sie werden sich immer auf die richtigen Variablen beziehen.

Die Variable self
Sie haben vielleicht bemerkt, dass wir eine Variable eingeführt haben, die self genannt wird. Im Prinzip haben wir das aus dem gleichen Grund getan, wie in unserer Klassendefinition: Weil jQuery diesen letzten Parameter ähnlich wie die Ereignisverarbeitung behandelt.

Hätten wir stattdessen this verwendet, würde sich dieser auf das DOM-Objekt beziehen. Probieren Sie es aus: Es wird nicht richtig funktionieren. Mit der Einführung der Variablem self laufen die Animationen wie erwartet.

Die letzte erwähnenswerte Sache ist, dass wir den Parameter menu_slider durch die Variable der Klasseninstanz active_menu ersetzt haben. Also können wir diese Variable von nun an von überall aus setzen und sie wird das aktuelle active_menu automatisch animieren. Das dient nur der Bequemlichkeit, einen Parameter weniger zu übergeben.

Die Funktion on_click

Lassen Sie uns zuletzt die Funktion on_click betrachten. Hier setzten wir den gesamten Code hinein, der beschreibt, was passiert, wenn der User auf einen Menüpunkt klickt.
Die Funktion führt die gleichen Überprüfungen aus wie vorher und verwendet die Funktion slide, um Menüobjekte zu verbergen oder sichtbar zu machen. Diese Methode greift durch die Variable event.data, die wir in unserer Klassendefinition weitergegeben haben, auf die Klassenvariablen zu.
Jetzt können Sie auch sehen, dass wir nur einen Parameter an unsere modifizierte slide-Funktion übergeben (die gewünschte Breite des Elements), um zu ermitteln, ob das Menü eingefahren oder ausgefahren werden soll. Jedoch wird auf das Element, das animiert werden soll, direkt durch die Variable acitve_menu zugegriffen.

function on_click ( event )
{
// First check if the active_menu button was clicked. If so, we do nothing. ( return )
if ( $(this).next()[0] == event.data.active_menu[0] ) // Remember, active_menu refers to the image ( thus next() ).
{
    return;
}
// Check if animation is running. If it is, we interrupt.
if ( event.data.is_animation_running )
{
    return;
}
// Get the item next to the button.
var menu_slider = $(this).next();
// First slide in the active_menu.
event.data.slide ( 0 );
// Set the active menu to the current image.
event.data.active_menu = menu_slider;
// Then slide out the clicked menu.
event.data.slide ( 253 );
}

Der Feinschliff

An diesem Punkt sollte unser Slide-Menü genauso funktionieren, wie wir wollen und wir müssen uns nicht darum sorgen, ob es mit anderem JavaScript Code in Konflikt gerät.

Es gibt noch eine letzte Sache zu tun, bevor wir einpacken, und zwar müssen wir die Klasse SlidingMenü ein bisschen flexibler machen, denn sie ist viel zu starr, so wie sie jetzt ist:

  • Sie funktioniert nur mit einem Container mit dem Klassennamen menu.
  • Sie funktioniert nur mit Menübildern, die 253 Pixel lang sind.
  • Sie funktioniert nur, wenn die Dauer der Animation auf 1 Sekunde eingestellt ist.

Um das zu ändern, übergeben wir drei weitere Variablen an den SlidingMenu-Konstruktor:

  • container_name enthält die Klasse (oder id, siehe unten) des Menücontainers div,
  • menu_slider_length bestimmt die Breite der Bilder, wenn sie ausfahren,
  • duration legt die Dauer der Animation in Millisekunden fest.
function SlidingMenu ( container_name, menu_slider_width, duration ) // Note the new parameters.
{
        var self = this;
	$( container_name + " .menu_button" ).bind ( "click", self, on_click ); // We bind to the specified element.

	this.effect_duration = duration; // New variable 1.
	this.menu_slider_width = menu_slider_width; // New variable 2.
	this.is_animation_running = false;
	this.active_menu = $($( container_name + " .menu_slider" )[0]);

	this.slide ( this.menu_slider_width ); // We replaced 253 with the arbitrary variable.

}

SlidingMenu.prototype.slide = slide;

// Function to render the animation.
function slide ( width )
{
	this.is_animation_running = true;
	this.active_menu.animate (
	{ 'width' : width },
	this.effect_duration, // Replace 1000 with the duration variable.
	function ()
	{
		this.is_animation_running = false;
	}
	);
}

function on_click ( event )
{
	if ( $(this).next()[0] == active_menu[0] )
	{
		return;
	}
	if ( event.data.is_animation_running )
	{
		return;
	}

	var menu_slider = $(this).next();
	event.data.slide ( 0 );
	this.active_menu = menu_slider;
	event.data.slide ( event.data.effect_duration ); // Slide with the specified amount.
}

var sl = new SlidingMenu( ".menu", 253, 1000 ); // We pass the three new parameters when creating an instance.

Wo nötig, haben wir die Variablen einfach durch drei neue ersetzt. Sie sehen, dass wir hier noch viel mehr Anpassungen vornehmen könnten, zum Beispiel nicht nur den Namen des Hauptcontainers .menu ersetzen, sondern auf der ganzen Linie auch die, die wir .menu_button und menu_slider genannt haben. Aber das überlassen wir Ihnen.

Wenn Sie wollten, könnten Sie für den Hauptcontainer sogar eine id festlegen (etwa #menu). Plötzlich ist alles ein wenig freundlicher und flexibler geworden.

Natürlich ist es nur dann sinnvoll, die Breite der Bilder zu ändern, wenn Sie auf Ihrer Website Grafiken verwenden, die nicht genau 253 Pixel breit sind. Dann können Sie einfach den Konstruktor SlidingMenu mit der richtigen Breite aufrufen und ihre Bilder werden perfekt dargestellt.

Wir werden ein wenig komplexer

Eine andere Sache, die ich am Anfang dieses Tutoriols erwähnt habe ist, dass, da wir uns nur um die Container der Elemente sorgen müssen, menu_slider kann jedes Element sein, das die Klasse menu_slider hat. Bei einem komplexeren Beispiel könnte menu_slider also ein div sein, das eine Liste von Untermenüpunkten enthält:


Ein Klick aufs Bild öffnet die Demo.

So sieht es viel besser aus, oder? Natürlich würden Sie, wenn Sie das Menü in der Praxis einsetzen, einen Link zu jedem dieser Listenpunkte hinzufügen, so dass der User, wenn er darauf klickt, die entsprechende Seite lädt. Das haben wir hier bei dieser Demo ausgespart.

Nebenbei, wenn Sie nicht möchten, dass der Text mit der Breite des Containers schrumpft (wie im obigen Beispiel), dann fügen Sie einfach width: 253px; zu Ihrer CSS-Datei hinzu und ersetzen Sie die Angabe „253px“ einfach durch die gewünschte Breite.

Hier ist das ganze zusätzliche CSS, das ich für die obige Demo mit den Untermenüpunkten verwendet habe:

.menu .menu_slider ul {
	position : relative;
	top : -100px;
	left : -35px;
	font-size : 12px;
}

.menu .menu_slider img {
	width : 253px;
	height : 158px;
}

.menu .menu_slider ul li {
	list-style : none;
	background : #fff;
	color : #333;
	cursor : pointer;
}

.menu .menu_slider p {
	width : 253px;
	margin-left : 5px;
}

Das Einzige, das hier erwähnenswert ist, ist die Schriftgröße. Da wir Menübreite und -höhe und so ziemlich alles andere in Pixel definiert haben, ist es besser, auch die Schriftgröße auf eine bestimmte Zahl einzustellen, damit die Ansicht durch alle verschiedenen Browser hindurch konsistent ist.

Außerdem werden Sie sehen, dass die Menüpunkte beim Mouseover klarer und schärfer werden. Das wird durch das Verändern der Deckkraft beim Darüberfahren erreicht. Anstatt verschiedene CSS-Hacks für die Cross-Browser-Kompatibilität zu verwenden, trauen wir jQuery in dieser Sache: Verwenden Sie einfach die Methode fadeTo, um ab- oder aufzublenden:

$(".menu .menu_slider ul li").bind ( "mouseover", function () {
	$(this).fadeTo ( "fast", "1.0" );
	} );
$(".menu .menu_slider ul li").bind ( "mouseout", function () {
	$(this).fadeTo ( "fast", "0.8" );
	 } );

// This line is used to make them fade out by default.
$(".menu .menu_slider li").fadeTo ( "fast", 0.8 );

Der komplette Code zum Herunterladen

Glückwunsch! Sie haben es geschafft! Jetzt sollten Sie ein funktionierendes JavaScript Slide-Menü haben. Und, noch wichtiger, Sie sollten ein wenig Verständnis davon haben, wie es funktioniert und wie Sie Ihre eigenen Ideen in dieses Modell einbeziehen können. Hoffentlich haben Sie in diesem Tutoriol etwas Nützliches gelernt. Um nun die Belohnung einzuheimsen, müssen Sie sich nur noch den kompletten Code schnappen, den wir zuvor in Einzelblöcken erstellt haben, und ihn im jQuery-Stil auf Page Load laden:

$(document).ready( function() {
    // All code goes here.
});

Um es noch einfacher zu machen, sind hier alle Quelldateien sowohl für das einfache Beispiel aus Teil I des Tutorials als auch für die komplexen Beispiele des zweiten Teils, die Sie oben gesehen haben:

Voilà. Nun können Sie nach eigenem Belieben experimentieren, sehen, wie es funktioniert und die notwendigen Anpassungen vornehmen. Wenn Sie zum Beispiel statischen Inhalt haben, möchten Sie vielleicht den Trigger von click auf mouseover ändern, so dass das Menü mit dem Gleiten beginnt, sobald sich die Maus darüber befindet. Auf diese Weise können Seiten geladen werden, wenn der User auf die Bilder oder Buttons klickt. Oder Sie können mit verschiedenen Effekten spielen: Vielleicht beim Mouseover einen netten Rahmen um die Bilder setzen. Das liegt ganz bei Ihnen. Viel Spaß!

Ausblick

Nun, wir können hier immer noch eine Menge tun. Optimierung und Anpassung haben wir noch immer nicht abgedeckt. Und natürlich ist die Animation immer noch ein einfacher Slide. Wie ich schon sagte, könnten Sie den gleichen Effekt mit jQuerys Plug-in accordion erreichen.

Aber das ist der Punkt, an dem es interessant wird. Jetzt, wo wir ein solides Fundament haben, können wir über einige fortgeschrittene Effekte nachdenken, um unsere kleine Anwendung noch einfacher in der Handhabung zu machen. Im nächsten Teil werden wir einige dieser Effekte einbauen und das Menü weiter optimieren.

(mm),

Kategorien
E-Business Rechtliches Social Media

Facebook Social Plugins einbinden – Vorsicht Datenschutz

Dr. Thomas Helbing

Bewertungen und Social Plugins im Allgemeinen sowie der „Gefällt-mir-„Button von Facebook im Besonderen sind bei Blogbetreibern äußerst beliebt. Aber Vorsicht:  Webseitenbetreiber müssen ihre Nutzer über den Einsatz der Plugins in den Datenschutzhinweisen informieren. Dieser Gastbeitrag von Rechtsanwalt Dr. Thomas Helbing erläutert, worauf Sie achten müssen.

Was sind Facebook Social Plugins?

Schon seit langem können Mitglieder des sozialen Netzwerks Facebook bestimmte Inhalte mit dem „Gefällt mir“ (Like) Button bewerten. Mit dem Klick auf das „Daumen-hoch“-Symbol sympathisieren Nutzer mit Gruppen, Fanseiten oder Statusmeldungen von Freunden. Das entstehende Netz an Beziehungen (Person X gefällt Y und Z) wird als Social Graph bezeichnet. Mithilfe des Social Graphs kann Facebook Nutzerprofile erstellen und auf die Vorlieben des jeweiligen Mitglieds angepasste Werbung einblenden.

Seit Ende April 2010 erlaubt Facebook Webseitenbetreibern auf den eigenen Seiten „Gefällt mir“ Buttons und andere Elemente des Facebook Netzwerkes einzubauen. Durch diese so genannten Social Plugins können Facebook User auch auf fremden Seiten zum Beispiel einen Facebook „Gefällt mir“ Button, wie in der folgenden Abbildung dargestellt, anklicken.

Neben dem „Gefällt mir“ Button stellt Facebook noch eine Reihe anderer Social Plugins zur Verfügung, zum Beispiel eines, über das Kommentare abgegeben werden können.

Facebook kann mit den Social Plugins Daten über die Vorlieben seiner Nutzer nicht nur auf der eigenen Webseite, sondern im ganzen Netz sammeln. Die Webseitenbetreiber profitieren von höheren Besucherzahlen, weil die Links auf den Profilseiten von Facebook-Besuchern deren Freunde auf die eigene Seite leiten. Außerdem können Seitenbetreiber ihrem Internetauftritt ohne großen Programmieraufwand einen sozialen Touch verleihen, indem sich die Besucher über die Inhalte austauschen können.

Wie funktionieren Facebook Social Plugins?

Facebook stellt eine Programmbibliothek und Code-Schnipsel zur Verfügung, die der Webseitenbetreiber in den Code seiner eigenen Webseite einbindet. Der Webseitenbetreiber kontrolliert so, ob, welche und wo Social Plugins auf seiner Webseite erscheinen.

Loggt sich ein Nutzer bei Facebook ein, so setzt Facebook einen Cookie (kleine Textdatei) auf dessen Rechner. Wenn der Nutzer anschließend – ohne sich bei Facebook ausgeloggt zu haben – eine Webseite besucht, die Facebook Social Plugins integriert hat, wird über den vom Webseitenbetreiber eingebundenen Code eine Verbindung zwischen dem Browser des Nutzers und Facebook hergestellt. Anhand des dabei übermittelten Cookies, erkennt Facebook, dass der Besucher bei Facebook eingeloggt ist und um wen es sich handelt. Facebook schickt dann an den Nutzer den „Gefällt Mir“ Button, der Browser des Nutzers bindet den „Gefällt Mir“ Button in die Webseite ein. Wird dieser vom Nutzer angeklickt, wird diese Interaktion direkt an den Facebook-Server übermittelt und dort als Teil des Social Graph gespeichert.

Einsatz von iFrames und die Folgen

Technisch kommt bei den Facebook Social Plugins ein Inlineframe (iframe) zum Einsatz. Dies hat zur Folge, dass der Facebook Rechner nicht weiß, auf welcher Seite der „Gefällt Mir“ Button eingebunden ist. Deshalb muss der Webseitenbetreiber die URL (Internetadresse) seiner Seite, in den  Plugin-Code integrieren. Auf diese Weise erfährt Facebook, wo der Button eingebunden ist und worauf sich das „Gefällt mir“ bezieht. Einzelheiten ermittelt Facebook dann aus Metadaten, die der Webseitenbetreiber für den Nutzer unsichtbar in den Code seiner Webseite integrieren kann. Facebook vertraut dabei auf die Richtigkeit der vom Webseitenbetreiber angegebenen URL, wodurch es leicht zu Manipulationen kommen kann (wer auf einer Seite der Band „The New Stones“ den „Gefällt mir“ Button klickt, kann nicht sicher sein, dass in seinem Facebook-Profil steht: „Thomas mag ‚The New Stones'“, genauso gut könnte dort stehen „Thomas mag ‚Schmutzige Wäsche'“ oder beliebiger anderer Unsinn).

Die Daten des „Gefällt Mir“ Buttons (oder eines anderen Social Plugins) werden aufgrund des iframes direkt zwischen Facebook und dem Rechner des Nutzers übermittelt und nicht über den Server des Webseitenbetreibers transportiert. Der Webseitenbetreiber hat den Vorgang durch Einbinden des entsprechenden Codes in seine Seite angestoßen, er weiß aber zum Beispiel nicht, welcher Facebook-Nutzer wann seine Seite besucht oder „Gefällt mir“ geklickt hat. Die Informationen des Social Graph (Wer mag was) werden ausschließlich und zentral bei Facebook gespeichert.

Was muss in die Datenschutzhinweise?

Die Verwendung von Facebook Social Plugins muss der Webseitenbetreiber in seinen Datenschutzhinweisen erläutern. Dies ergibt sich aus § 13 (1) Telemediengesetz (TMG). Danach hat ein Diensteanbieter (Webseitenbetreiber) den Nutzer über „Art, Umfang und Zweck der Erhebung und Verwendung personenbezogener Daten“ sowie über die Verarbeitung seiner Daten in Staaten außerhalb der EU/EWR in „allgemein verständlicher Form“ zu unterrichten.

Zwar hat der Webseitenbetreiber wegen der Nutzung des iframes keinen Zugriff auf den Datenaustausch zwischen Facebook und dem Nutzer, weiß also nicht, für welche Facebook User der Button angezeigt wurde und wer auf den Button geklickt hat, jedoch öffnet er durch den Einbau des Social Plugins in seine Webseite Facebook die Tür, die entsprechenden Daten seiner Seitenbesucher zu erheben und zu verarbeiten. Außerdem „verrät“ er über den Einbau des Codes auf seiner Webseite Facebook, wer wann welche Webseite besucht hat.

Nutzerprofile en passant

Kaum ein Nutzer dürfte erwarten, dass sein Browser eine Anfrage an Facebook sendet, wenn er eine beliebige Webseite aufruft, die einen kleinen „Gefällt mir“ Button von Facebook enthält (wovon er zuvor meist auch gar nichts weiß). Erst recht erwartet er nicht, dass Facebook erfährt, wann und welche Seite er besucht hat, unabhängig davon ob er mit dem Social Plugin interagiert oder es gänzlich ignoriert. Zur Erinnerung: Auch ohne Betätigung des „Gefällt mir“ Buttons kann Facebook den Nutzer schon bei Auslieferung, also Anzeige, des Buttons identifizieren. Auf diese Weise erhält Facebook nicht nur einen Social Graph, mit dem Wissen wem was gefällt, sondern auch Informationen darüber, wer welche Seiten im Netz besucht hat. Je mehr Seiten die Social Plugins nutzen, desto umfassender kann Facebook das Surfverhalten seiner User erfassen.

Was können Sie konkret tun, um sich zu schützen?

Auf das Verwenden von Social Plugins und die daraus entstehenden Konsequenzen muss der Webseitenbetreiber seine Nutzer in den Datenschutzhinweisen der Webseite in verständlicher Form hinweisen, zum Beispiel so:

Verwendung von Facebook Social Plugins

Unser Internetauftritt verwendet Social Plugins („Plugins“)  des sozialen Netzwerkes facebook.com, welches von der Facebook Inc., 1601 S. California Ave, Palo Alto, CA 94304, USA betrieben wird („Facebook“). Die Plugins sind mit einem Facebook Logo oder dem Zusatz „Facebook Social Plugin“ gekennzeichnet.

Wenn Sie eine Webseite unseres Internetauftritts aufrufen, die ein solches Plugin enthält, baut Ihr Browser eine direkte Verbindung mit den Servern von Facebook auf. Der Inhalt des Plugins wird von Facebook direkt an Ihren Browser übermittelt und von diesem in die Webseite eingebunden.

Durch die Einbindung der Plugins erhält Facebook die Information, dass Sie die entsprechende Seite unseres Internetauftritts aufgerufen haben. Sind Sie bei Facebook eingeloggt kann Facebook den Besuch Ihrem Facebook-Konto zuordnen. Wenn Sie mit den Plugins interagieren, zum Beispiel den „Gefällt mir“ Button betätigen oder einen Kommentar abgeben, wird die entsprechende Information von Ihrem Browser direkt an Facebook übermittelt und dort gespeichert.

Zweck und Umfang der Datenerhebung und die weitere Verarbeitung und Nutzung der Daten durch Facebook sowie Ihre diesbezüglichen Rechte und Einstellungsmöglichkeiten zum Schutz Ihrer Privatssphäre entnehmen Sie bitte den Datenschutzhinweisen von Facebook.

Wenn Sie nicht möchten, dass Facebook über unseren Internetauftritt Daten über Sie sammelt, müssen Sie sich vor Ihrem Besuch unseres Internetauftritts bei Facebook ausloggen.“

Hinweis: Der Text ist kein Muster, sondern ein Beispiel und bietet deshalb keine Gewähr für Vollständigkeit, Richtigkeit und Aktualität. Datenschutzhinweise müssen für den jeweiligen Internetauftritt individuell erstellt werden.

Der Verweis auf die Datenschutzhinweise von Facebook erscheint sinnvoll, auch wenn sich dort keine nützlichen Informationen zu den Plugins finden. Welche Daten Facebook erhält und wie lange es diese speichert, wird nicht erläutert.

Soweit ersichtlich, genügt bisher noch kaum ein Webseitenbetreiber in Deutschland, der Facebook Social Plugins verwendet (etwa bild.de oder focus.de) der diesbezüglichen Hinweispflicht des TMG.

Verstöße werden mit Bußgeld geahndet

Ein Verstoß gegen die Hinweispflicht des § 13 (1) TMG ist gemäß § 16 (2) Nr. 2 TMG eine Ordnungswidrigkeit und kann nach § 16 (3) TMG mit einem Bußgeld von bis zu 50.000 Euro geahndet werden. Da sich deutsche Datenschutzbehörden schwer tun, US-Unternehmen wegen Datenschutzverstößen zu belangen, treten Sie gerne – wie im Fall Google Analytics – an die hier ansässigen Webseitenbetreiber heran. Dies wäre auch bei den Facebook Plugins denkbar.

Eine Abmahnung durch Wettbewerber dürfte dagegen wenig Aussicht auf Erfolg haben, da Gerichte zur Vorgängerregelung des § 13 TMG, dem außer Kraft getretenen § 4 Teledienstedatenschutzgesetz (TDDSG), entschieden haben, dass es sich um eine Vorschrift handelt, deren Verstoß nicht wettbewerbswidrig ist.

Weiterführende Links zum Thema

  • Recht: vollständiger Beitrag von Dr. Thomas Helbing, mit weiterführenden Informationen zur Zulässigkeit der Plugins nach deutschem Datenschutzrecht
  • Tutorial: Gefällt-mir-Button in WordPress einbinden
  • Meinung: Warum der Gefällt-mir-Button doof ist
  • Update/14.07.2010 Tutorial: Facebook beim Surfen auf Drittseiten aussperren
Über den Autor

Dr. Thomas Helbing ist Rechtsanwalt und hat zum Telekommunikationsrecht promoviert. Er arbeitete über vier Jahre bei einer internationalen Wirtschaftskanzlei im Bereich „Technik, Medien und Telekommunikation“. Heute ist er selbstständiger Rechtsanwalt (Website) und berät Unternehmen zum IT- und Datenschutzrecht.

(mm),

Kategorien
Inspiration Tutorials

jQuery-Tutorial: Schickes Sliding-Menü selbst erstellen

János Rácz

Einer der größten Vorteile bei der Erstellung von interaktiven Websites ist es, dass man in der Lage ist, Teile ihres Inhalts dynamisch zu verbergen und einzublenden. Nicht nur, dass das für ein interessanteres Anwendererlebnis sorgt, es erlaubt Ihnen auch, mehr auf eine einzelne Seite zu packen, als es sonst möglich wäre, jedoch in einer sehr eleganten, unaufdringlichen Weise und ohne den User mit zu vielen Informationen auf einmal zu überwältigen.

In diesem Tutorial erstellen wir ein Sliding-Menü mit dem jQuery Framework. Den fertigen Quellcode können Sie auch einfach herunterladen. Das Hauptziel dieses Artikels ist es jedoch, Ihnen einige Basistechniken für die Erstellung dieser Art von Effekten zu zeigen und Ihnen die Werkzeuge zur Verfügung zu stellen, die Sie brauchen, um Ihre eigenen kreativen Ideen zu realisieren.

Dieses Tutorial richtet sich an diejenigen, die gerade mit der Entwicklung mit jQuery angefangen haben und jene, die gerade in das Schreiben von anwenderseitigen Skripts einsteigen. Sie werden von der Pike auf lernen, wie man diesen einfachen Effekt progressiv aufbaut.


So wird das fertige Menü später aussehen.

Wenn Sie auf Ihrer Website lediglich einen schicken Effekt haben wollen, können Sie einfach das Accordion-Plugin benutzen, das im Prinzip das Gleiche implementiert und sogar noch mehr Kontrolle darüber zulässt. Wenn Sie jedoch selbst Hand anlegen wollen und herausfinden möchten, wie ein solches System funktioniert, damit Sie später Ihre eigenen Ideen entwickeln können, dann ist dieses Tutorial genau richtig für Sie.

Außerdem werfen wir im nächsten Teil dieser Serie einen Blick darauf, wie man dieses einfache Sliding-Menü mit verschiedenen Effekten und Animationen aufwertet, um es interessanter aussehen zu lassen.

Warum jQuery?

Bei der Erstellung einer jeden Art von Webapplikation, insbesondere einer, die Animationseffekte und diverse Elemente enthält, die in verschiedenen Browsern unterschiedlich implementiert sind, ist die Verwendung eines Frameworks, das sich um die Implementierung auf der unteren Ebene kümmert, so dass Sie sich auf die Codelogik auf der hohen Ebene konzentrieren können, immer eine gute Idee.

Während Ihnen also ein JavaScript Framework Zeit sparen kann, indem es bestimmte Kommandos vereinfacht und Sie weniger schreiben lässt, entsteht der wirkliche Vorteil aus der garantierten Kompatibilität durch alle Browser hindurch. Das garantiert, dass Ihre Anwendung ohne jegliche zusätzliche Anstrengung ihrerseits überall gleich funktioniert.

Wir wählen jQuery, weil es eins der beliebtesten Frameworks ist, mit einem ziemlich umfassenden und einfach zu benutzenden und sehr gut dokumentierten API . Wahrscheinlich könnten Sie jedoch die gleichen Techniken, die hier gezeigt werden, in jedes Framework Ihrer Wahl implementieren.

Bevor wir anfangen

Bevor Sie auch nur eine einzige Zeile Code schreiben, überlegen Sie folgendes:

  • Wie werden Sie den JavaScript Code in Ihr HTML einbinden?
  • Wie interagieren die User mit dem Interface?
  • Wie wird die Gesamtlösung das Anwendererlebnis beeinflussen?

Bei einem Menü müssen Sie zum Beispiel in Betracht ziehen, ob Ihr Inhalt dynamisch generiert wird oder statisch ist. Bei dynamischen Inhalten würde ein Menü, das bei Mausklick animiert wird, perfekt funktionieren. Bei statischen Inhalten, wo die Seite jedes Mal, wenn der User auf einen Menüpunkt klickt, neu geladen werden muss, würde es aber nicht so schick aussehen.

Wann sollten Sie die Animation denn abspielen? Vor oder nach dem Neuladen der Seite? Qualität und Geschwindigkeit des Effekts hängen von vielen Faktoren ab, inklusive des Computers des Users, ob der Inhalt der Website gecached wurde, wie viel Inhalt Sie anzeigen wollen und so weiter.
Sie müssen jede Möglichkeit Ihrer speziellen Situation erwägen, um das Beste herauszuholen. Es gibt hier keine goldene Regel. Zugunsten einer einfacheren Demonstration haben wir uns entschieden, uns hauptsächlich auf den JavaScript Code zu konzentrieren. Am Ende des Artikels werden wir jedoch einige mögliche Lösungen anbieten.

Die Grundlagen: HTML und CSS

Wir können schon anfangen! Zuerst müssen wir ein solides Fundament für unseren JavaScript Code bauen. Vergessen Sie niemals, dass, obwohl JavaScript heutzutage fast überall verwendet wird, es bei einigen Usern (und Suchmaschinen) immer noch nicht aktiviert ist. Wir müssen also sicherstellen, dass alles gut funktioniert und schön aussieht – auch ohne die schicken Effekte.

<div class="menu">
<div class="menu_button"><img src="button_1.png" alt="" /></div>
    <div class="menu_slider"><img src="img_1.png" alt="" /></div>

    <div class="menu_button"><img src="button_2.png" alt="" /></div>
    <div class="menu_slider"><img src="img_2.png" alt="" /></div>

    <div class="menu_button"><img src="button_3.png" alt="" /></div>
    <div class="menu_slider"><img src="img_3.png" alt="" /></div>

    <div class="menu_button"><img src="button_4.png" alt="" /></div>
    <div class="menu_slider"><img src="img_4.png" alt="" /></div>

    <div class="menu_button"><img src="button_5.png" alt="" /></div>
    <div class="menu_slider"><img src="img_5.png" alt="" /></div>

    <div class="menu_button"><img src="button_6.png" alt="" /></div>
    <div class="menu_slider"><img src="img_6.png" alt="" /></div>
</div>
.menu {
    width : 100%;
}

.menu .menu_button, .menu .menu_slider {
    margin : 0;
    float : left;
    height : 158px;
}

.menu .menu_button {
    width : 33px;
    cursor : pointer;
}

.menu .menu_slider { /* Hide the contents by default */
    width : 0px;
    overflow : hidden;
}

.menu .menu_button:hover {
    background : #ddd;
}

So funktioniert der Code

Der obige Code generiert eine einfache Menüleiste, die aus 12 Container- beziehungsweise div-Elementen besteht. Jedes enthält ein einzelnes Bild zum Wechseln der Menü-Schaltflächen und der Menü-Slider-Bilder. Wir hätten auch bloße img-Elemente verwenden und sie nacheinander notieren können. Aber gültiges XHTML erfordert es, dass wir sie in ein weiteres Element packen. Also haben wir das getan, indem wir die div-Container benutzt haben. Das erlaubt Ihnen auch, die Bilder später durch jedes andere Element zu ersetzen (ein Beispiel sehen Sie kurz vor dem Ende dieses Tutorials), weil wir uns nur um diese Container kümmern müssen. Wir setzen die Breite des Klassencontainers menu_slider auf 0px, so dass er in der Einstellung default: unsichtbar ist und wir werden die Slider mit JavaScript dynamisch verbergen und einblenden.

Hier verwenden wir float:left, um die div-Elemente auf der gleichen Linie zu halten.

Beachten Sie auch, dass ich wegen der Lesbarkeit die Attribute width, height und alt in den img-Tags weggelassen habe (sie sind da, aber leer). Für gültiges HTML/XHTML sollten Sie jedoch immer mindestens das Attribut alt in Ihre Website einbauen.

Die letzte Zeile ist vielleicht nicht ganz so offensichtlich. Wir setzten die Hintergrundfarbe für den Hovereffekt auf #ddd. Das gewährleistet, dass bei den Titeln der Buttons immer dann eine neue Farbe erscheint, wenn der User mit der Maus darüber fährt. Wenn Ihr Menü vertikal wäre, würden wir einfach color: #ddd schreiben. Da es jedoch horizontal ist und unsere Buchstaben in einem 90°-Grad Winkel sind, müssen wir zu ein paar Tricks greifen.

Also verwenden wir transparente PNGs als Menübuttons und wir schneiden quasi den Text aus den Buttons aus, indem wir die Buchstaben komplett transparent lassen. Mit dieser Methode können wir die Textfarbe kontrollieren, indem wir einfach den Hintergrund verändern, der sich durch die transparenten Bereiche hindurch zeigt.
Die Zeile overflow: hidden ist bei der Arbeit mit Bildern nicht notwendig, sie wird jedoch handlich sein, wenn wir stattdessen andere Slide-Effekte verwenden möchten (dazu später mehr).

So sieht unser Menü im Moment aus. (Hovern Sie nach dem Öffnen der Demo über die Punkte, um den grauen Hintergrund hinter den Buttons zu sehen.)


Ein Klick aufs Bild öffnet die Demo.

Query Zauberei

Nun auf zum spaßigen Teil. Lassen Sie uns anfangen, indem wir auf jedem Menübutton eine Slide-Funktion an das Ereignis Mausklick binden.

Denken Sie daran, dass die Breite eines jeden menu_sliders derzeit 0px beträgt. Slide() tut folgendes: Es animiert die Breite des Containers direkt neben dem angeklickten Button, um ihn von 0px auf eine angegebene Breite zu bringen und so einen Slide-Effekt zu erstellen.

Wir verwenden den Ausdruck $(this), um den angeklickten Button sofort in ein jQuery-Objekt zu konvertieren, so dass wir jQuerys Methode next() verwenden können, um das div gleich neben dem Button zu erhalten. Das wird der entsprechende menu_slider sein, den wir nun an die Funktion slide()zum Animieren übergeben können.

Ab jetzt kennzeichnen die hellgrünen Kommentare im Quellcode neue oder wichtige Stellen beziehungsweise zusätzliche Erklärungen.

function slide ( menu_slider ) // Function to render the animation.
{
	menu_slider.animate (
	    { 'width' : '253' }, // The first parameter is a list of CSS attributes that we want to change during the animation.
	    1000 // The next parameter is the duration of the animation.
	);
}

$(".menu .menu_button").bind ( "click", function ( event ) // We're binding the effect to the click event on any menu_button container.
{
	// Get the item next to the button
	var menu_slider = $(this).next(); // We convert it to a jQuery object: $(HTMLElement)
	// Do the animation
	slide ( menu_slider );
}

Wie Sie sehen, wird der ganze Prozess durch ein Klick-Ereignis gestartet. Zuerst speichern wir das Element neben dem Button (also das entsprechende Bild) in der Variablem menu_slider. Dann geben wir es an die Funktion slide() weiter.

Am Ende verwendet die Slidefunktion jQuerys Methode animate, um den Effekt herzustellen. Der erste Parameter ist eine Liste mit CSS-Attributen, die wir ändern möchten (in diesem Falle nur die Breite des Bildes auf 253px). Der zweite Parameter ist die Dauer der Animation in Millisekunden. Wir haben sie auf 1 Sekunde eingestellt.


Das Menü klappt nun auf, aber nicht so wie geplant – siehe Demo.

Das Menü funktioniert, wenn auch noch lange nicht perfekt. Es ist sehr wichtig, die Höhe der Bilder vorher anzugeben (wie wir das im CSS getan haben), denn sonst wächst die Höhe proportional zur Breite, was zu einem anderen Effekt führt.

Im Moment können Sie noch auf jeden Menüpunkt klicken und das entsprechende Bild hinausgleiten lassen. Noch schlimmer: Es werden mehrere Slides untereinander dargestellt. Das ist nicht das, was wir wollen, also werden wir das jetzt beheben.

Wir müssen nur eine neue Variable einführen, die active_menu heißt und die das jeweils aktive Objekt menu_button speichert. Wir modifizieren auch die Funktion slide, damit sie einen weiteren Parameter akzeptiert, der die Richtung des Slides oder, um genauer zu sein, die Breiteneigenschaft der Animation festlegt. Wenn wir also einen Parameter übergeben, der größer als 0 ist, gleitet das Slide heraus. Wenn wir 0 übergeben, gleitet es zurück.

// Global variables
var active_menu; // We introduce this variable to hold the currently active (i.e. open) element.
function slide ( menu_slider, width )
{
	menu_slider.animate (
	    { 'width' : width }, // We replaced the specific value with the second parameter.
	    1000
	);
}

$(".menu .menu_button").bind ( "click", function ( event )
{
	// Get the item next to the button.
	var menu_slider = $(this).next();
	// First slide in the active_menu.
	slide ( active_menu, 0 );
	// Then slide out the clicked menu.
	slide ( menu_slider, 253 );
}

// We also slide out the first panel by default and thus set the active_menu variable.
active_menu = $($( ".menu_slider" )[0]); // Notice we've converted it to a jQuery object again.
slide ( active_menu, 253 );

jQuery-Objekte verhalten sich wie Arrays
Eine Sache, die man im Hinterkopf behalten sollte, ist, dass jedes jQuery-Objekt sich wie ein Array verhält, selbst wenn es nur ein Element enthält. Um also das DOM-Objekt zu bekommen, auf das es sich bezieht (in unserem Falle das Element img), müssen wir auf das Array zugreifen und daraus das erste Element auswählen.

Wir haben das mit dem Ausdruck ($( ".menu_slider" )[0] getan, der das allererste DOM-Element aus der Klasse „menu_slider“ selektiert. Sie können aber auch alternativ die Methode getbenutzen: $(".menu_slider").get(0).

Nach diesen Änderungen fährt selbst bei mehreren Klicks jeweils nur ein Slide heraus. Außerdem wird das Menü automatisch entfaltet.


Schon viel besser: Nur ein Slide kann zur selben Zeit geöffnet werden.

Ein paar Reparaturen

In Ordnung, endlich funktioniert unser Skript so, wie wir wollen, mit Ausnahme einiger kleiner Pannen, die wir jetzt ansprechen werden. Es gibt keine schwerwiegenden Fehler. Tatsächlich möchten Sie sie vielleicht sogar so lassen, wie sie sind. Falls nicht, hier ist der Weg um sie zu beheben.

Mehrere geöffnete Felder verbieten
Wenn Sie mit der obigen Demo herumgespielt haben, haben Sie sicherlich bemerkt, dass, wenn Sie innerhalb einer Sekunde auf mehr als ein Feld klicken, mehr als nur eine Animation gleichzeitig laufen kann, was das Menü manchmal breiter macht, als es sein soll.

Um dieses Problem zu lösen, können wir einfach eine andere Variable einführen, die bestimmt, ob eine Animation abgespielt wird oder nicht. Wir nennen sie is_animation_running. Sobald der Slide-Effekt beginnt, setzen wir diese Variable auf true und wir setzen sie zurück auf false, wenn die Animation endet.

Um das zu erreichen, benutzen wir den Parameter another der Funktion animation. Dieser Parameter definiert eine andere Funktion, die gleich nach dem Ende der ersten Animation abläuft. Das ist wichtig, denn wenn Sie is_animation_running nach der Animationsfunktion einfach nur auf false setzen, würde nichts passieren, denn sie würde fast sofort ausgeführt, wenn das Sliding gerade erst angefangen hat.

Durch die Verwendung dieses dritten Parameters stellen wir sicher, dass die Variable genau zum richtigen Zeitpunkt auf false gesetzt wird, ungeachtet der Dauer des Effekts. Dann erlauben wir es unserer Anwendung einfach, nur dann zu laufen, wenn is_animation_running den Wert falsezurück gibt (das heißt wenn gerade kein anderes Feld eingeschoben wird).

var active_menu;
var is_animation_running = false; // New variable.
function slide ( menu_slider, width )
{
	is_animation_running = true; // Indicates that an animation has started.
	menu_slider.animate (
	    { 'width' : width },
	    1000, // <- Notice the column!
	    function () // This third parameter is the key here.
	    {
		  is_animation_running = false; // We set is_animation_running to false after the animation finishes.
	    }
	);
}

$(".menu .menu_button").bind ( "click", function ( event )
{
	// First check if animation is running. If it is, we don't do anything.
	if ( is_animation_running )
	{
		return; // Interrupt execution.
	}
	var menu_slider = $(this).next();
	slide ( active_menu, 0 );
	slide ( menu_slider, 253 );
}

active_menu = $($( ".menu .menu_slider" )[0]);
slide ( active_menu, 253 );

Zwischenergebnis: Nun läuft jeweils nur eine Animation ab.

Die Selbstkollapspanne

Soweit ist das schon ganz schön. Allerdings gleitet beim Klick auf den derzeit aktiven Button das Feld hinein und dann wieder hinaus. Wenn Sie das cool finden – in Ordnung. Aber bestimmt möchten Sie die Breite des aktiven Punkts ändern.

Damit das gelingt, fügen wir einfach eine kleine Überprüfung hinzu. Wann auch immer ein Menübutton angeklickt wird, überprüfen wir, ob der direkt daneben liegende Container das active_menu ist oder nicht. (Zur Erinnerung, die Variable active_menu speichert den aktuell ausgefahrenen div-Container.) Ist das der Fall, tun wir gar nichts, andernfalls spielen wir die Animation ab. Kinderleicht!

Aber erinnern Sie sich an die Sache mit dem Array-Verhalten? Tatsächlich gibt es, angesichts dieser Sammlung von DOM-Elementen, keinen wirklich guten Weg, um zwei solche Objekte zu vergleichen. Daher werden wir direkt auf die DOM-Elemente zugreifen, um zu sehen, ob sie gleich sind oder nicht (sprich active_menu[0] und $(this).next()[0]).

var active_menu;
var is_animation_running = false;

function slide ( menu_slider, width )
{
	is_animation_running = true;
	menu_slider.animate (
	    { 'width' : width },
	    1000,
	    function ()
	    {
		  is_animation_running = false;
	    }
	);
}

$(".menu .menu_button").bind ( "click", function ( event )
{
	// First, check if the active_menu button was clicked. If so, we do nothing ( return ).
	if ( $(this).next()[0] == active_menu[0] )  // Here we make the check.
	{
		return;
	}
	if ( is_animation_running )
	{
		return;
	}
	var menu_slider = $(this).next();
	slide ( active_menu, 0 );
	active_menu = menu_slider; // Set active menu for next check.
	slide ( active_menu, 253 ); // Now we can pass active_menu if we want.
}

active_menu = $($( ".menu .menu_slider" )[0]);
slide ( active_menu, 253 );

Unser Menü arbeitet nun perfekt. Probieren Sie es: Klicken Sie eine der Schaltflächen zweimal an. Beim zweiten Klick sollte nichts passieren.

Et voilà – nun geht’s. Demo

Im zweiten Teil dieses Tutorials lesen Sie, wie man die globalen Variablen rausschmeißen beziehungsweise in einer JavaScript-Klasse verstecken kann. Das ist sinnvoll, damit der Code für Ihr schönes Sliding-Menü nicht mit anderen JS-Elementen kollidiert. Außerdem werden wir noch ein Submenü einbauen.

(mm),

Kategorien
Design HTML/CSS

Media Queries: Mobile Versionen von Websites mit CSS3 erstellen

Rachel Andrew (Übersetzung Manuela Müller)

CSS 3 ist ein Thema, das Webdesigner und -entwickler nach wie vor begeistert und frustriert. Wir sind begeistert von den Möglichkeiten, die CSS3 uns bietet und welche Probleme wir damit lösen können. Gleichzeitig sind wir frustriert über die mangelnde Unterstützung im Internet Explorer 8 – um ältere Browser einmal ganz außen vor zu lassen. Dieser Artikel demonstriert ebenfalls eine Technik, die vom IE 8 nicht unterstützt wird. Allerdings ist das auch völlig egal, da die vorgestellte Lösung am sinnvollsten dort eingesetzt wird, wo es eine Menge Unterstützung gibt – nämlich auf kleinen mobilen Geräten wie dem iPhone oder alles, was unter Android läuft.

Im folgenden werde ich erklären, wie Sie eine iPhone-Version Ihrer regulären Website mit CSS 3 erstellen können, die schon jetzt funktioniert. Wir schauen uns ein sehr einfaches Beispiel an und ich werde Schritt für Schritt erläutern, wie ich ein Stylesheet für Geräte mit kleinem Display in meine eigene Website eingefügt habe. An dem Beispiel können Sie nachvollziehen, wie einfach es ist, bestehende Websites um zusätzliche Stylesheets für mobile Geräte zu ergänzen.

Media Queries

Wenn Sie jemals ein separates Print Stylesheet erstellt haben, werden Sie mit dem Konzept vertraut sein, wie ein bestimmtes Stylesheet unter gegebenen Bedingungen ins Spiel kommt – um beim Beispiel des Print Stylesheets zu bleiben – eben dann, wenn die Seite gedruckt wird. Diese Aufgabe wird in CSS 2 durch media types geregelt.

media types ermöglichen es Ihnen, die Ausgabe von Stylesheets einem bestimmten Medientyp zuzuordnen.

Die Media Queries in CSS3 greifen dieses Konzept auf und bauen es weiter aus. Anstatt nach einem bestimmten Medium zu schauen, können Sie mit media queries die Eigenschaften und Fähigkeiten von Geräten und Ausgabemedien abfragen. Sie können diese Abfragen dazu verwenden, um alles mögliche zu überprüfen, so zum Beispiel:

  • Breite und Höhe (des Browser-Fensters)
  • Breite und Höhe des Geräts
  • Position – befindet sich das Mobiltelefon im Querformat oder Hochformat?
  • Bildschirmauflösung

Wenn der Anwender einen Browser verwendet, der media queries unterstützt, können wir den CSS-Code ganz gezielt für bestimmte Situationen schreiben. So können Sie abfragen, ob ein Anwender ein kleines Gerät wie ein Smart Phone verwendet und dann ein passendes Layout liefern. Wenn Sie ein entsprechendes Beispiel in Aktion sehen möchten, schauen Sie sich einmal die jüngst frei geschaltete Website der UK Web Conference an. dConstruct setzt auf der neuen Website für die Konferenz 2010 media queries sehr effektvoll ein.

dConstruct 2010 website on a desktop browser

So sieht dConstruct 2010 Website auf einem Desktop Computer in Safari aus.

dconstruct website on the iPhone

dConstruct 2010 website auf einem iPhone

Wie Sie an den beiden obigen Abbildungen sehen, wurde die Website nicht einfach an die Größe des kleineren Displays angepasst, sondern das komplette Layout wurde für den einfachen Zugriff mit einem kleinen Ausgabemedien optimiert.

Viele von Ihnen werden jetzt vermutlich denken, dass dies ein iPhone-Layout ist. Ist es aber nicht. Das Layout wird exakt so auf meinem Android-Mobiltelefon angezeigt. Mit dem Einsatz von Media Queries und dem Abfragen der Geräte-Eigenschaften versorgt die dConstruct-Site alle Arten von Geräten – sogar solche, an die die Entwickler möglicherweise noch gar nicht gedacht haben!

Media Queries zum Erstellen eines Stylesheet für Mobiltelefone verwenden

Wir legen los und schauen uns zunächst ein sehr einfaches Beispiel an. Die folgende Abbildung zeigt ein schlichtes Zweispalten-Layout.

Simple example in a browser
Die Ausgangssituation

Um das Lesen auf einem Telefon zu erleichtern, habe ich mich dazu entschlossen, das komplette Design zu vereinfachen und die Inhalte in einer einzigen Spalte anzuordnen. Weiterhin soll der Header wesentlich kleiner sein, damit die Anwender nicht lange scrollen müssen, bevor sie an die eigentlichen Inhalte gelangen.

Methode 1 – Alternative im Hauptstylesheet

Media Queries können Sie auf verschiedene Weisen verwenden. Eine Methode ist es, den alternativen CSS-Code direkt in das zentrale Stylesheet einzubinden. Um kleine Geräte anzusprechen, verwenden wir die folgende Syntax:

	@media only screen and (max-device-width: 480px) {

	}

Wir können die alternativen Werte für kleine Displays und Geräte mit geringer Breite innerhalb der geschweiften Klammern einfügen. Indem wir die Kaskade verwenden, können wir ganz einfach alle anderen Deklarationen überschreiben, die wir vorher in unserem CSS-Code für Desktop-Browser notiert haben. Solange dieser Abschnitt an letzter Stelle im Stylesheet steht, werden alle vorhergehenden Regelungen überschreiben.

Um das Layout zu linearisieren und eine kleinere Header-Grafik zu verwenden, füge ich den folgenden Code hinzu:

	@media only screen and (max-device-width: 480px) {
		div#wrapper {
			width: 400px;
		}

		div#header {
			background-image: url(media-queries-phone.jpg);
			height: 93px;
			position: relative;
		}

		div#header h1 {
			font-size: 140%;
		}

		#content {
			float: none;
			width: 100%;
		}

		#navigation {
			float:none;
			width: auto;
		}
	}

Im vorhergehenden Code verwende ich ein alternatives Hintergrundbild, reduziere die Höhe des Headers, setze die zuvor für das zweispaltige Layout deklarierten Floats auf none und überschreibe die ursprüngliche Breite. Diese Vorgaben werden nur bei einem Gerät mit kleinem Display angewendet.

Simple example on a phone

So sieht mein simples Beispiel auf einem iPhone aus.

Methode 2 – Link auf separates Stylesheet setzen

Den spezifischen Code für kleine Geräte inline zu notieren, mag ganz gut sein, wenn Sie nur geringüfige Änderungen vorzunehmen haben. Wenn Sie jedoch größere Änderungen vornehmen oder aus Gründen der Übersichtlichkeit die Stylesheets für Desktop-Browser und Browser kleiner Geräte trennen möchten, empfiehlt sich ein Link auf ein separates Stylesheet.

Um ein separates Stylesheet für kleine Geräte nach Ihrem Hauptstylesheet einzufügen und das Kaskadieren zum Überschreiben der Deklarationen zu nutzen, verwenden Sie den folgenden Code:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

Media queries testen

Sofern Sie ein iPhone und/oder ein Android-Handy oder ein anderes Gerät mit einem media-queries-unterstützenden Browser besitzen, können Sie den CSS-Code selbst testen. Allerdings müssen Sie den Code irgendwo hochladen, um ihn anzeigen zu können. Was tun Sie jedoch, wenn Sie die entsprechenden Geräte nicht besitzen und lokal testen möchten?

Online-Dienste nutzen

Eine hervorragende Website, die Sie beim Entwicklungsprozess unterstützt ist ProtoFluid. Im Formular rechts oben können Sie Ihre URL eingeben (kann auch eine lokale sein) und das Design anschließend in einer Vorschau anzeigen, so wie es auf einem iPhone, iPad und einer Reihe anderer Geräte dargestellt würde. Das folgende Bildschirmfoto zeigt die bereits bekannte dConstruct-Site in der iPhone-Vorschau von ProtoFluid.

dConstruct site in ProtoFluid

Die dConstruct-2010-Website in ProtoFluid

Sie können auch Ihre eigene Fenstergröße eingeben, falls Sie die Darstellung Ihrer App oder Website für ein ganz bestimmtest Gerät testen – vorausgesetzt Sie kennen die Abmessungen des Displays.

Unsere weiter oben verwendete Media Query müssen Sie für das Testen mit ProtoFluid ein wenig ändern, um sowohl max-width als auch max-device-width einzubinden. Damit kommt die Medienabfrage auch ins Spiel, wenn ein Anwender einen Desktop-Browser mit einem sehr kleinen Fenster nutzt.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

	}

Nachdem Sie Ihren Code entsprechend angepasst und die Seite im Browser neu geladen haben, ziehen Sie doch einfach mal das Browserfenster kleiner und schauen Sie, was passiert. Die Regel Media Queries reagiert, sobald der Viewport Ihrem vorgegebenen Wert von 480 Pixeln entspricht.

Das wirklich Schöne an ProtoFluid ist, dass Sie beim Optimieren Ihres Designs auch Tools wie FireBug nutzen können – etwas, worauf Sie verzichten müssen, sobald die Site oder Anwendung auf dem iPhone ist.

Natürlich sollten Sie Ihr Layout auf so vielen verschiedenen Geräten wie möglich anzeigen lassen und ausprobieren. Trotzdem macht ProtoFluid das Entwickeln und Testen wesentlich einfacher.

Hinweis: Wenn Sie vermeiden möchten, dass das Layout Ihrer Website verändert wird, sobald ein Anwender die Größe des Browser-Fensters reduziert, können Sie die Vorgabe für die maximale Breite aus Ihrer Media Query entfernen, bevor Sie die Website frei schalten. So stellen Sie sicher, dass das alternative Layout nur bei der Abfrage mit Browsern kleiner Geräte gezeigt wird, nicht jedoch bei kleinem Viewport von Desktop-Browsern.

Eine bestehende Seite umbauen

Das vorhergehende Beispiel ist sehr einfach gehalten, um die Technik zu demonstrieren. Sie können dieses Beispiel allerdings auch dafür einsetzen, um eine bestehende Website um eine zusätzliche Version für kleine Geräte zu ergänzen. Eines der überzeugendsten Verkaufsargumente für CSS-Layouts war ja gerade die Fähigkeit, alternative Versionen eines Designs zu ermöglichen.

Es folgt ein kleines Experiment mit meiner Firmen-Website, deren Layout ich mithilfe der beschriebenen Technik umbauen werde.

Das Desktop-Layout

Meine Firmen-Website hat zur Zeit ein mehrspaltiges Layout. Die Startseite ist etwas anders gestaltet – ansonsten handelt es sich um drei Spalten mit fester Breite. Das Design ist schon ein paar Jahre alt, so dass wir beim Erstellen Media Queries noch nicht berücksichtigt haben.
edgeofmyseat.com website in Safari on the desktop
Meine Website in einem Desktop-Browser

Das neue Stylesheet einbinden

Da viele Änderungen erforderlich sind, um das Layout zu vereinfachen, werde ich ein separates Stylesheet erstellen und Media Queries dafür verwenden, um das neue Stylesheet nach dem aktuellen Stylesheet zu laden – aber nur dann, wenn die abgefragte maximale Breite weniger als 480 Pixel beträgt.

	<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />

Zunächst erstelle ich eine Kopie des bestehenden Stylesheets und speichere sie unter dem Namen small-device.css. Anschließend überschreibe ich Schritt für Schritt bestimmte Regeln und lösche alles, was ich nicht benötige.

Den Header verkleinern

Meine erste Änderung: Das Logo soll auf einem kleinen Display schön dargestellt werden. Da es als Hintergrundbild eingebunden ist, kann ich in diesem Stylesheet ohne Probleme eine andere Bildquelle für das Logo angeben. Zudem verwende ich ein weiteres Hintergrundbild mit einem kürzeren oberen Bereich, über dem das Logo platziert ist.

	body {
		background-image: url(/img/small-bg.png);
	}

	#wrapper {
		width: auto;
		margin: auto;
		text-align: left;
		background-image: url(/img/small-logo.png);
		background-position: left 5px;
		background-repeat: no-repeat;
		min-height: 400px;
	}

Das Layout linearisieren

Als nächste größere Aufgabe vereinfache ich das Layout und stelle es einspaltig dar. Das Layout für die Desktop-Version wird über floats realisiert. Ich muss daher nur den Parameter der Eigenschaft float auf none setzen und die Breite auf auto. Nun werden die Spalten einfach nacheinander statt nebeneinander dargestellt.

	.article #aside {
		float: none;
		width: auto;
	}

Aufräumarbeiten

Danach kann es gleich an die Optimierung via ProtoFluid und Firebug gehen. Es sind lediglich kleine Änderungen erforderlich, um Ränder und Innenabstände auf passende Werte zu setzen, da die ursprünglichen Spalten nun untereinander, nicht nebeneinander, angeordnet sind.

Ich erledige das, indem ich innerhalb von ProtoFluid mit Firebug herumspiele, und die Werte so lange ändere, bis ich mit dem Ergebnis zufrieden bin. Anschließend kopiere ich den CSS-Code in das Stylesheet.

The mobile layout on ProtoFluid
Testen und Optimieren via ProtoFluid

Auf dem iPhone testen

Nachdem ich das separate Styhlesheet erstellt und auf den Server hochgeladen habe, möchte ich es natürlich auch auf einem real existierenden Zielgerät testen. Ein Aufruf mit dem iPhone zeigt mir, dass die Website nach wie vor ausgezoomt – über die volle Breite – angezeigt wird, anstatt auf meine gute lesbare einzelne Spalte zu zoomen.

Ein Blick in die Website für Safari-Entwickler gibt mir des Rätsels Lösung. Ein Meta-Tag im Header der Website, das die Breite des Viewports vorgibt, schafft Abhilfe:

<meta name=“viewport“ content=“width=device-width“ />

Nach dem Einfügen des Metatags wird die Seite korrekt im einspaltigen Layout auf dem iPhone angezeigt.

edgeofmyseat.com on the iPhone
Dank Metatag sieht die Website nun auch auf dem iPhone gut aus.

An diesem schlichten Umbau können Sie nachvollziehen, wie einfach es ist, Ihrer Website eine mobile Version zu spendieren. Beim Erstellen einer ganz neuen Webpräsenz mit Media Queries würde ich von vornherein etwas anderes vorgehen und auf die folgenden Aspekte achten:

  • geeignete Reihenfolge der Spalten berücksichtigen,
  • so oft wie möglich und wo sinnvoll Hintergrundbilder verwenden, da sie leicht per CSS zu wechseln sind,
  • gegebenenfalls fluid images einsetzen.

In unserem Desktop-Layout gibt es auf der Startseite einen Content Slider für Arbeitsproben. Auf einem Touch-Screen-Gerät ist dieser Content Slider nicht einfach zu bedienen. Daher prüfte ich mithilfe von JavaScript, ob die Größe des Browser-Fensters sehr schmal ist und der Bildwechsler deshalb nicht gestartet wird. Das Script war ohnehin schon so geschrieben, dass der Effekt – das Laden des Sliders zu stoppen, immer dann ausgelöst wird, wenn eine Arbeitsprobe auf dem Bildschirm angezeigt wird. Das schien eine ganz passable Lösung für Anwender mit kleinen Geräten zu sein. Mit etwas mehr Code konnte ich eine alternative Version des Image Sliders für die Anwender mobiler Geräte erstellen, so dass die Art der Interaktion den Gegebenheiten eines Touch Screens besser angepasst ist.

Tutorials und Ressourcen

Obwohl diese Technik noch relativ neu ist, gibt es bereits zahlreiche hervorragende Tutorials zum Einsatz von Media Queries. Wenn Sie weitere gute Tutorials oder Referenzen kennen, posten Sie die Links doch bitte in den Kommentaren.

Weitere Inspirationen

Wenn es Sie interessiert, was man mit Media Queries sont noch anstellen kann, schauen Sie sich doch einmal auf Hicksdesign um. John Hicks verschafft dank Media Queries nicht nur Anwendern mobiler Geräte eine besseres Anwendererlebnis, sondern auch denjenigen Zeitgenossen, die am Desktop PC mit kleinen Browser-Fenstern arbeiten.

Bei Simon Collison kann man weitere interessante Beispiele für den Einsatz dieser Technik sehen.

Probieren Sie es selbst aus

Der Einsatz von Media Queries ist ein guter Ansatz, um CSS 3 in Ihrer täglichen Arbeit zu verwenden. Denken Sie daran, dass Media-Queries-fähige Browser auch eine Reihe anderer CSS-3-Eigenschaften unterstützen. In Ihren zusätzlichen Stylesheets für kleine Geräte können Sie daher unbesorgt weitere CSS-3-Eigenschaften verwenden, um bei Ausgabe auf einem SmartPhone, iPad oder sonstigem mobilen Gerät elegante Effekte zu erzielen.

Über Kommentare zu Ihren Erfahrungen mit Media Queries und anderen CSS-3-Techniken freuen wir uns!

(mm), ™

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Photoshop meistern – Arbeiten mit dem Histogramm

Die Helligkeitsinformationen eines Pixelbildes und seiner Farbkanäle, die Tonwerte, sind die grundlegendste Größe für die Bildfarben und auch der wichtigste Ansatzpunkt für Bildkorrekturen. Ein hervorragendes Photoshop-Werkzeug, zum Prüfen und Korrigieren von Tonwerten ist das Histogramm. Dieses Tutorial von Sibylle Mühlke aus dem Buch Adobe Photoshop CS4 – ein Gastbeitrag von Galileo Design – zeigt, wie’s geht.

Das erste Augenmerk bei einer Korrektur gilt den Lichtern und Tiefen, also den allerhellsten und dunkelsten Tonwerten eines Bildes. An Lichtern und Tiefen treten auch am schnellsten sichtbare Schäden auf. Um so etwas zu vermeiden, sollte eine Bildkorrektur genau an der Problemzone des Bildes ansetzen und Lichter- sowie Tiefenzeichnung (die feine Nuancierung der hellsten und dunkelsten Bereiche im Bild) erhalten. Durch reine Sichtkontrolle am Monitor ist beides schwierig. Das Histogramm ist ein wertvoller Helfer für die Analyse korrekturwürdiger Bilder und unterstützt Sie während der Korrektur.

Mit dem Histogramm stellt Photoshop ein wirkungsvolles Instrument zur Verfügung, um Tonwertverteilung und -umfang eines Bildes objektiv zu prüfen. Sie finden es gleich an mehreren Stellen im Programm:

  • als Teil des Werkzeugs Tonwertkorrektur, mit dem Sie die Tonwerte bearbeiten,
  • als eigenständige Histogramm-Palette (zu finden unter Fenster / Histogramm),
  • integriert in den Dialog Gradationskurven.

Was verrät die Histogramm-Palette?

Die Histogramm-Palette hat den Vorzug, dass sie geöffnet auf der Arbeitsfläche abgelegt werden kann, sodass Sie die Tonwerte eines Bildes jederzeit im Blick behalten können. Darüber hinaus ist ein Histogramm als Hilfswerkzeug auch noch in andere Tools integriert, zum Beispiel in den Import-Dialog für Camera-RawBilder.


Die Histogramm-Palette in der erweiterten Ansicht mit Statistik. Neben dem eigentlichen Histogramm werden in dieser Ansicht auch statistische Informationen zum Bild geliefert. Die verschiedenen Ansichtsoptionen erreichen Sie über das Seitenmenü, das sich wie gewohnt mit dem kleinen Pfeil rechts oben aufklappen lässt.

Die Histogramm-Balken

Ein Histogramm – gleichgültig ob in der Tonwertkorrektur, den Gradationskurven oder der Histogramm-Palette selbst – bildet die Tonwerte aller im Bild vorkommenden Pixel ab. Ganz links sind die schwarzen Bildpixel (in RGB mit dem Tonwert 0) repräsentiert, und die Anzeige verläuft über die Mitteltöne in die hellen Töne bis zu den weißen Bildpixeln ganz rechts (Tonwert 255).

Die Höhe der kleinen Balken in den unterschiedlichen Tonwertbereichen zeigt an, wie oft ein Tonwert im Bild vorkommt. Je öfter ein Tonwert im Bild vertreten ist, desto länger ist der Balken. Diese Tonwertverteilung können Sie sich für das Gesamtbild oder einzelne Kanäle anzeigen lassen. In der Histogramm-Palette finden Sie neben dem Histogramm selbst noch weitere Einstellungen und Informationen.

Quelle: Wenn Ihr Bild mehrere Ebenen enthält, können Sie unter Quelle auswählen, ob Sie die Tonwerte einer bestimmten Bildebene oder des gesamten Bildes ansehen wollen.

Statistik: Unterhalb des Histogramms finden Sie einige Angaben zur Statistik: Der Mittelwert gibt die durchschnittliche Helligkeit eines Bildes an. Liegt der Wert für ein RGB- oder Graustufenbild unter 128, ist das Bild eher dunkel; liegt er darüber, ist das Bild heller. Die Abweichung gibt nochmals in Zahlen an, wie stark die Helligkeitswerte schwanken (das kann man auch der Histogrammkurve ansehen). Der Zentralwert gibt an, wie hell oder dunkel der mittlere Farbwert des Bildes ist. Pixel bezeichnet die Menge der Pixel im Bild, die für das Histogramm herangezogen wurden.

Tonwertangaben: Wenn Sie mit der Maus auf einen Punkt der Histogrammkurve fahren, erscheinen einige Angaben zu dem Tonwert  , den Sie aktuell unter der Maus haben. Sie erfahren, was der genaue Wert ist (Tonwert), wie viele andere Pixel es mit diesem Tonwert gibt (Anzahl) und wie viele dunklere Pixel noch vorhanden sind (Spreizung).

Aktualisieren: Das kleine Warndreieck oben rechts weist Sie darauf hin, dass das Bild geändert wurde, aber dass das Histogramm noch die unveränderte Version anzeigt. Ein Klick auf die darüber liegenden, kreisförmig angeordneten Pfeile  (Recycling-Symbol) aktualisiert die Ansicht.

Cache-Stufe: Die Cache-Stufe bezieht sich nicht auf die Bildqualität oder Bilddaten selbst, sondern systemabhängig darauf, wie diese für das Histogramm aus dem Bild ermittelt werden. Für die Bildkorrektur können Sie diesen Wert ignorieren.

Live-Histogramm: In der Histogramm-Palette sowie in der Tonwertkorrektur in der Korrekturen-Palette können Sie Änderungen am Bild live verfolgen.

Die grauen Hügel zeigen die originalen Werte, und das schwarze Diagramm symbolisiert die Auswirkungen Ihrer aktuellen Tonwertkorrektur-Einstellungen. Achten Sie darauf, dass Quelle: Korrekturcomposite eingestellt ist, sonst funktioniert es nicht.


Sie können auch Bereiche des Histogramms durch Überstreichen markieren und erhalten dazu statistische Informationen.


Das Live-Histogramm im Einsatz

Histogramme interpretieren

Auch wenn jedes Bild sein eigenes Profil hat, gibt es Merkmale, die eine ideale Tonwertverteilung auszeichnen, und andere Merkmale, die für bestimmte Bildfehler symptomatisch sind. Die Histogramm-Hügellandschaft sollte an den Rändern auslaufen und die gesamte Breite der Grafik ausfüllen. Reichen die Histogramm-Hügel nicht über die ganze Breite des Diagramms, fehlen dem Bild eindeutige Tiefen und Lichter. Der Gesamteindruck ist dann meist flau und kontrastarm.


Bei einem so ausgewogenen Histogramm …

… hat das Bild klare Kontraste  /  Bild: Onno K. Gent


Sieht die Tonwertverteilung wie eine Gebirgslandschaft mit zu den Seiten abfallendem Berg aus, wie bei den zwei vorhergehenden Beispielen (kleine graue Dialogfenster), ist das Histogramm ausgewogen.


Bild: C. Börner

Besonders wichtig ist es, dass die gesamte Histogramm-Breite ausgenutzt wird. Schauen Sie genau hin: Auch die unscheinbaren, nur ein Pixel hohen Balken an den Rändern der Histogrammberge zeigen relevante Tonwerte an.

Histogramm zu schmal

In der folgenden Abbildung läuft die Gebirgskette des Histogramms in die Ebene aus, bevor die Kanten des Dateien auf der Diagramms erreicht sind. Das Bild hat denn auch nur geringe KonBuch-DVD: traste und wirkt wie hinter einem Grauschleier. Solche Befunde Strandspaziergang.tif, lassen sich meist gut mit ein paar Handgriffen korrigieren.


Hier wird nicht die gesamte Breite des Histogramms ausgenutzt. Das Bild unten wirkt flau und hat schwache Kontraste.


Bild: Frank Gaebler

Histogramm zu breit

Drängen die Histogramm-Balken aus dem Diagramm hinaus, fehlt es dem Bild vermutlich an Zeichnung in den Tiefen oder Lichtern, also an feiner Modulation der dunkelsten oder hellsten Bildpartien.


In diesem Bild treten deutlich Zeichnungsverluste in den hellen Bereichen zutage.


Bild: Frank Gaebler

Beim obigen Histogramm  sind die Balken, die die hellen Tonwerte repräsentieren (rechts im Histogramm), zwar nicht besonders hoch, aber sie drängen deutlich über den Rand hinaus. Mit Zeichnungsverlusten in den Lichtern des Bildes kann bei einem solchen Histogramm gerechnet werden. Reparieren lassen sich solche Bilder schlecht.

Zeichnungsverluste in den Tiefen

Wo Bildinformationen  fehlen, können auch nachträglich keine beschafft werden. Schauen Sie sich das folgende Beispiel an – hier fehlen Tonwertabstufungen in den dunklen Bildbereichen.


Auch dieses Foto ist durch Zeichnungsverluste gekennzeichnet, diesmal in den Tiefen.


Bild: Frank Gaebler

Die Histogramm-Balken türmen sich am linken Rand, der für die dunklen Tonwerte steht. Die Zeichnungsverluste der Tiefen sind auch im Bild recht gut zu erkennen: Dunkle Bereiche sind kaum nuanciert, sondern einfach schwarze Flecke. Auch hier wird es wohl schwierig, noch etwas aus dem Bild herauszuholen.

Nicht schön, aber reparabel

Anders nun das folgende Beispiel. Dieses Foto ist zwar ebenfalls recht dunkel, doch das Histogramm belegt: Es ist stimmig.


Stimmiges Histogramm


Bild: Sibylle Mühlke

Auch dieses Bild ist recht dunkel, wie auch die Menge der Tonwertbalken im linken Bereich der Histogramm-Grafik zeigt. Allerdings gibt es im Bild trotzdem noch feine Abstufungen der Tiefen. Das Histogramm fällt links steil ab, die Balken drängen nicht gerade aus der Grafik heraus.

Eine besondere Rolle spielt das Histogramm bei der Arbeit mit dem Werkzeug Tonwertkorrektur – dort ist es zentrales Funktionselement.


Bei der manuellen Tonwertkorrektur arbeiten Sie direkt im Histogramm: Die Tonwertspreizungsregler werden ans Histogrammgebirge herangeführt.

Doch auch bei anderen Korrekturen können und sollten Sie die Informationen des Histogramms nutzen – entweder mittels Histogramm-Palette oder bei den Gradationskurven im Werkzeugdialog selbst.

(mm), ™

Kategorien
WordPress

10 praktische Sicherheits-Optimierungen für WordPress

Jean Baptiste-Jung (Übersetzung Manuela Müller)

Sicherheit war schon immer ein heikles Thema. Offline – im realen Leben – kaufen Menschen Häuser und Autos mit Alarmanlagen und allerlei Geräte für mehr Sicherheit. Online ist Sicherheit ebenso wichtig, vor allem dann, wenn Sie vom Betrieb einer Website oder eines Blogs leben. Lernen Sie hier zehn nützliche Maßnahmen kennen, mit denen Sie die Sicherheit Ihres WordPress-Blogs verbessern.

1. Verhindern Sie das Veröffentlichen unwichtiger Informationen

Screenshot

Das Problem
Wenn Ihr Versuch, sich in ein WordPress-Blog einzuloggen, fehlschlägt, gibt das Content-Management-System (CMS) eine Meldung aus, was schief lief. Das ist gut, wenn Sie Ihr Passwort vergessen haben. Noch nützlicher könnte diese Information für Hacker sein, die Ihren Blog entern wollen. Warum hindern Sie WordPress eigentlich nicht daran, solche Meldungen über fehlgeschlagene Logins auszugeben?

Die Lösung
Um Fehlermeldungen über missglückte Logins zu unterbinden, öffnen Sie einfach die Datei functions.php und kopieren den folgenden Code hinein:

add_filter('login_errors',create_function('$a', "return null;"));

Speichern Sie die Datei und prüfen Sie selbst. Es wird keine Meldung ausgegeben, wenn Ihr Login-Versuch scheitert.

Achtung: Es gibt mehrere Dateien namens functions.php. Achten Sie darauf, diejenige im Verzeichnis wp-content zu ändern!

Übrigens: Wo das add_filter() in der Theme-function.php steht, ist im Prinzip nicht wichtig, solange es bei jedem Request ausgeführt wird. Im Zweifel setzt man das einfach ganz an den Anfang des Scripts.

Erklärung des Codes
Mit diesem Code haben wir einen Trick eingefügt, um die login_errors()-Funktion zu überschreiben. Da unsere „aufgebohrte“ Funktion lediglich  null wiedergibt, ist die ausgegebene Meldung ein leerer String.

Quelle

2. Erzwingen Sie den Gebrauch von SSL

Screenshot

Das Problem
Sollten Sie sich darüber Sorgen machen, dass Ihre Daten abgefangen werden, sollten Sie auf unbedingt SSL verwenden. Falls Sie es bisher noch nicht wussten: SSL ist ein Verschlüsselungsprotokoll, das Kommunikation in Netzwerken wie dem Internet sichert.

Wussten Sie, dass es möglich ist, WordPress zum Einsatz von SSL zu zwingen? Nicht alle Hosting-Anbieter gestatten Ihnen den Einsatz von SSL. Bei Firmen wie Wp WebHost oder HostGator ist SSL freigegeben.

Die Lösung
Wenn SSL auf Ihrem Webserver aktiviert werden kann, öffnen Sie die Datei wp-config.php (befindet sich im Root-Verzeichnis Ihrer WordPress-Installation) und kopieren Sie den folgenden Code-Schnippsel hinein:

define('FORCE_SSL_ADMIN', true);

Speichern Sie die Datei. Fall erledigt!

Erklärung des Codes
Nichts Kompliziertes: WordPress setzt eine Menge von Konstanten zur Konfiguration ein. In diesem Fall haben wir schlicht die Konstante FORCE_SSL_ADMIN definiert und Ihren Wert auf true gesetzt. Als Resultat dieser Aktion verwendet WordPress SSL.

Quelle

3. Verwenden Sie .htaccess zum Schutz von wp-config

Screenshot

Das Problem
Als WordPress-Anwender werden Sie vermutlich wissen, wie wichtig die Datei wp-config.php ist. Diese Datei beinhaltet alle erforderlichen Informationen für den Zugriff auf Ihre wertvolle Datenbank: Anwendername, Passwort, den Namen des Servers und so weiter. Der Schutz der wp-config.php ist entscheidend. Warum setzen Sie dafür nicht den Apache-Server ein?

Die Lösung
Die Datei .htaccess befindet sich im Root Ihrer WordPress-Installation. Nachdem Sie eine Sicherheitskopie angelegt haben (die Datei ist so wichtig, dass Sie vom aktuellen Stand stets übere eine Sicherung an einem sicheren Ort verfügen sollten) öffnen Sie die Datei und fügen Sie diesen Zeilen ein:

<files wp-config.php>
order allow,deny
deny from all
</files>

Erklärung des Codes
.htaccess-Dateien sind sehr mächtig und eines der besten Werkzeuge, um unerwünschten Zugriff auf Ihre Dateien zu verhindern. Mit diesem Code haben wir eine Regel erstellt, die jeglichen Zugriff auf die Datei wp-admin.php verhindert, was wiederum gewährleistet, dass böse Bots nicht darauf zugreifen können.

Quelle

4. Setzen Sie unerwünschte Benutzer und Bots auf die schwarze Liste

Screenshot

Das Problem
Dies gilt gleichermaßen fürs virtuelle wie für das reale Leben: Jemand, der Sie heute belästigt, wird Ihnen morgen vermutlich wieder auf die Pelle rücken. Haben Sie schon einmal bemerkt, wie viele Spambots zehnmal täglich wiederkehren, um Ihr Blog mit nervigen Kommentaren zu füllen? Die Lösung dieses Problems ist sehr einfach: Verbieten Sie ihnen den Zugang zu Ihrem Blog.

Die Lösung

Kopieren Sie den folgenden Code in Ihre .htaccess-Datei im Root-Verzeichnis Ihrer WordPress-Installation. Wie bereits erwähnt – machen Sie vor Änderungen stets eine Sicherheitskopie der .htaccess. Außerdem: Vergessen Sie nicht, die in Zeile 4 genannte IP-Adresse durch diejenige zu ersetzen, die Sie sperren wollen:

<Limit GET POST PUT>
order allow,deny
allow from all
deny from 123.456.789
</LIMIT>

Erklärung des Codes
Apache ist sehr wirkungsvoll und lässt sich einfach dafür nutzen, unerwünschte Menschen und Bots von Ihrer Website fern zu halten. Mit dem vorherigen Code weisen wir Apache an, mit Ausnahme der IP-Adresse 123.456.789 jedermann den Besuch unseres Blogs zu erlauben.

Um weitere Anwender auszusperren, fügen Sie einfach die vierte Zeile des oben abgebildeten Codes mit der jeweiligen IP-Adresse in eine neue Zeile ein, wie im folgenden Beispiel:

<Limit GET POST PUT>
order allow,deny
allow from all
deny from 123.456.789
deny from 93.121.788
deny from 223.956.789
deny from 128.456.780
</LIMIT>

Quelle

5. Schützen Sie Ihr WordPress-Blog vor Script Injection

Screenshot

Das Problem

Der Schutz dynamischer Websites ist besonders wichtig. Die meisten Entwickler schützen zwar immer ihre GET– und POST-Abfragen. Aber manchmal ist das nicht genug. Sie sollten Ihren Blog auch gegen so genannte Script Injections schützen und jegliche Versuche von außen, die PHP-Variablen GLOBALS und _REQUEST zu ändern, abwehren.

Die Lösung
Der folgende Code blockiert Script Injections und jegliche Änderungsversuche der PHP-Variablen GLOBALS und _REQUEST. Kopieren Sie ihn in die .htaccess (die Datei befindet sich im Root-Verzeichnis Ihrer WordPress-Installation). Denken Sie an die Sicherheitskopie der .htaccess-Datei.

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{QUERY_STRING} (<|%3C).*script.*(>|%3E) [NC,OR]
RewriteCond %{QUERY_STRING} GLOBALS(=|[|%[0-9A-Z]{0,2}) [OR]
RewriteCond %{QUERY_STRING} _REQUEST(=|[|%[0-9A-Z]{0,2})
RewriteRule ^(.*)$ index.php [F,L]

Erklärung des Codes
Dank der Möglichkeiten von .htaccess, können Sie Anfragen kontrollieren. Mit dem obigen Code wird geprüft, ob die Anfrage ein <script>-Tag enthält und ob mit diesem Script die PHP-Variablen GLOBALS oder _REQUEST geändert werden sollen. Falls eine dieser Bedingungen erfüllt ist, wird die Anfrage blockiert und der Server gibt eine 403-Fehlermeldung an den Client-Browser aus.

Quellen

6. Legen Sie Content-Klauern das Handwerk

Screenshot

Das Problem
Sobald Ihr Blog sich eines noch so kleinen Bekanntsheitsgrads erfreut, werden irgendwelche Leute versuchen, Ihre Inhalte ohne Ihr Einverständnis zu nutzen. Eines der größten Probleme ist das so genannte hot-linking auf Ihre Bilddateien, was die Übertragungsraten Ihres Servers schwächt.

Die Lösung
Um Ihren Blog vor hot-linking und Content-Klau zu schützen, kopieren Sie den folgenden Code in Ihre .htaccess-Datei im Root-Verzeichnis Ihrer WordPress-Installation. Wie bereits erwähnt – machen Sie vor Änderungen stets eine Sicherheitskopie der .htaccess.

RewriteEngine On
#Replace ?mysite.com/ with your blog url
RewriteCond %{HTTP_REFERER} !^http://(.+.)?mysite.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/nohotlink.jpg with your "don't hotlink" image url
RewriteRule .*.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

Sobald Sie die geänderte Datei gespeichert haben, wird nur noch Ihre Website in der Lage sein, auf Ihre Bilder zu verlinken. Oder – um es ganz korrekt auszudrücken – niemand wird mehr auf Ihre Bilder verlinken, weil es zu kompliziert und zu zeitaufwändig ist. Andere Websites werden automatisch das Bild nohotlink.jpg anzeigen. Tipp: Sie können auch ein nicht vorhandenes Bild festlegen, so dass beim Versuch, auf Ihre Bilddateien zu verlinken, einfach nichts angezeigt wird.

Erklärung des Codes

Mit diesem Code fragen wir zuerst ab, ob die anfragende URL mit der URL Ihres eigenen Blogs übereinstimmt und dass der Referrer nicht leer ist. Falls die URLs nicht übereinstimmen, und falls die Datei eine Endung wie JPG, GIF, BMP oder PNG enthält, wird statt des Links das nohotlink-Bild ausgegeben.

Quelle

7. Schützen Sie Ihr Blog mit einem Plugin vor bösartigen URL-Anfragen

Screenshot

Das Problem
Hacker und andere Übeltäter nutzen häufig bösartige Anfragen, um die Schwachpunkte Ihres Blogs anzugreifen. WordPress hat standardmäßig einen guten Schutz; Sie können ihn jedoch noch ausbauen.

Die Lösung
Kopieren Sie den folgenden Code in eine Textdatei und speichern Sie diese als blockbadqueries.php. Laden Sie die Datei anschließend in das Verzeichnis wp-content/plugins Ihrer WordPress-Installation und aktivieren Sie die Datei wie jedes andere Plugin. Schon ist Ihr Blog vor bösartigen Anfragen geschützt.

<?php
/*
Plugin Name: Block Bad Queries
Plugin URI: http://perishablepress.com/press/2009/12/22/protect-wordpress-against-malicious-url-requests/
Description: Protect WordPress Against Malicious URL Requests
Author URI: http://perishablepress.com/
Author: Perishable Press
Version: 1.0
*/

global $user_ID; 

if($user_ID) {
  if(!current_user_can('level_10')) {
    if (strlen($_SERVER['REQUEST_URI']) > 255 ||
      strpos($_SERVER['REQUEST_URI'], "eval(") ||
      strpos($_SERVER['REQUEST_URI'], "CONCAT") ||
      strpos($_SERVER['REQUEST_URI'], "UNION+SELECT") ||
      strpos($_SERVER['REQUEST_URI'], "base64")) {
        @header("HTTP/1.1 414 Request-URI Too Long");
	@header("Status: 414 Request-URI Too Long");
	@header("Connection: Close");
	@exit;
    }
  }
}
?>

Erklärung des Codes

Dieser PHP-Code prüft Anfragen auf extrem lange Strings mit mehr als 255 Zeichen sowie auf das Vorhandensein der PHP-Funktionen eval oder base64. Falls eine dieser Bedingungen zutrifft, sendet das Plugin eine 414-Fehlermeldung an den Browser des Clients.

Quelle

8. Entfernen Sie die Versionsnummer von WordPress … Wirklich!

Screenshot

Das Problem
Wie Sie vermutlich wissen, gibt WordPress die Nummer der verwendeten Version im Kopf der Blog-Datei aus. Das ist relativ harmlos, solange Ihr Blog immer die jüngste Version benutzt (was Sie vermutlich ohnehin tun). Falls Ihr Blog aus irgend einem guten Grund jedoch nicht die neueste Version benutzt (etwa um „Kinderkrankheiten“ der Neuentwicklung abzuwarten), gibt WordPress die Versionsnummer trotzdem aus. Damit bekommen Hacker eine wirklich wichtige Information.

Die Lösung
Kopieren Sie die folgende Code-Zeile in die Datei functions.php Ihres WordPress-Themes. Speichern Sie die Datei, aktualisieren Sie Ihren Blog – et voilà: Der Header erscheint ohne WordPress-Versionsnummer.

remove_action('wp_head', 'wp_generator');

Erklärung des Codes
Zum Ausführen bestimmter Aktionen, verwendet WordPress eine Methode namens hooks. Die Funktion wp_generator, die für die Ausgabe der WordPress-Versionsnummer verantwortlich ist, wird damit „ge-hooked“. SIe können diesen Mechanismus entfernen und dessen Ausführung verhindern, indem Sie die Funktion remove_action() einsetzen.

Quelle

9. Ändern Sie den Standardnamen „Admin“

Screenshot

Das Problem
Brutale Gewalt ist das probateste Mittel, um ein Passwort zu knacken. Die Methode ist einfach: Man probiere so viel verschiedene Passwörter wie möglich und finde dabei das richtige. Die Anwender dieser Methode verwenden dazu Wörterbücher, die ihnen eine Menge Passwort-Kombinationen liefern.

Die Kenntnis Ihres Benutzernamens erleichtert dieses Trial-and-Error-Verfahren dennoch erheblich. Aus diesem Grund sollten Sie den für die Rolle des Administrators standardmäßig vergebenen Benutzernamen „admin“ stets in etwas weniger Offensichtliches ändern.

Hinweis: Mit WordPress 3.0 lässt Sie standardmäßig den gewünschten Benutzernamen auswählen. Dieser Tip ist also auch dann nützlich, wenn Sie in der aktuellen WordPress-Version noch mit einem den „admin“-Account aus einer vorherigen Version arbeiten.

Die Lösung
Sofern Sie den Benutzernamen „admin“ noch nicht geändert haben, senden Sie die folgende SQL-Abfrage an Ihre Datenbank, um das Thema ein für allemal zu erledigen. Ersetzen „Your New Username“ durch einen beliebigen Benutzernamen.

UPDATE wp_users SET user_login = 'Your New Username' WHERE user_login = 'Admin';

Erklärung des Codes
Benutzernamen werden in der Datenbank gespeichert. Zum Ändern genügt eine einfache  UPDATE-Anfrage. Beachten Sie, dass diese Anfrage Posts, die unter dem Benutzernamen „admin“ verfasst wurden, dem neuen Benutzernamen nicht zugeordnet werden. Weitere Informationen dazu finden Sie unter dem folgenden Link.

Quelle

10. Verhindern Sie das Aufrufen Ihrer Verzeichnisse

Screenshot

Das Problem
Standardmäßig erlauben die meisten Hosts die Anzeige des Verzeichnis. Nach der Eingabe von www.yourblog.com/wp-includes in das Adressfeld Ihres Browsers, werden alle vorhandenen Dateien des Verzeichnis‘ angezeigt. Dieses ist ein definitives Sicherheitsrisiko, da ein Hacker sehen kann, wann die Dateien zuletzt geändert wurden und sich somit Zugriff verschaffen.

Die Lösung
Fügen Sie diesen Code in die Apache-Konfiguration Ihre .htaccess-Datei ein:

Options - Indexes

Beachten Sie bitte, dass es nicht genügt, die robots.txt Ihres Blogs mit Disallow: /wp* zu ergänzen. Das würde lediglich verhindern, dass Ihr wp-directory von Suchmaschinen indexiert wird; die Anzeige wird es nicht unterbinden.

Erklärung des Codes
Mit dieser kleinen Ergänzung der .htaccess-Datei verbieten Sie das Auflisten der Dateien im Verzeichnis Ihres Blogs. Über den Platzhalter *, verbieten Sie das Auflisten sämtlicher Verzeichnisse, die mit „wp-“ beginnen.

Quelle

(tm)

Kategorien
Webdesign

Yahoo Query Language (2): YQL-Datenbankabfragen debuggen

Chris Heilmann (Übersetzung Manuela Müller)

Yahoo Query Language (YQL) ist ein Service und eine Sprache, die es spielend leicht macht, Webservices und APIs zu verwenden – sowohl in punkto Zugriff als auch im Hinblick aufs Format. Wie Sie die per YQL erstellten Datenbankabfragen, die wir im ersten Teil des Beitrags erstellt haben, debuggen, erfahren Sie hier. Außerdem listet dieser Teil des Beitrags nützliche Praxisbeispiele und weitere Ressourcen.

YQL-Datenbankanfragen debuggen

Beim Programmieren geht immer mal irgend etwas schief. Das ist furchtbar frustrierend – vor allem dann, wenn Sie nicht wissen, warum. Mit YQL kann Ihnen das natürlich auch passieren. Allerdings bekommen Sie Fehlermeldungen angezeigt, die auch für Menschen lesbar sind. Falls in der Konsole irgend etwas schief läuft, wird unter dem Frage-Bereich ein gelb hinterlegter Kasten angezeigt, der Ihnen mitteilt, was das Problem verursacht.

YQL displaying an error message
Die Fehlermeldung ist durch einen gelben Hintergrund hervorgehoben.

Weiterhin gibt es den Container „diagnostics“ in den von YQL zurückgegebenen Daten, der Ihnen mitteilt, was unter der „Haube“ passiert ist. Wenn es mit dem Zugriff auf einen bestimmten Service Probleme gibt, wird das im Diagnostic-Container zu sehen sein.

Diagnostics in data sets in YQL
Eingebettet in die Ergebnisse liefert YQL eine Diagnose mit etwaigen Fehlermeldungen.

YQL Syntax

Die grundlegende Syntax von YQL ist sehr einfach:

select {what} from {source} where {conditions}

Sie können Ihre Ergebnisse filtern, die Informationen auf bestimmte Einzelheiten reduzieren, die Ergebnisse seitenweise ausgeben oder verschiedene Anfragen ineinander verschachteln. Weitere Informationen zur Syntax mit allen ihren Feinheiten bietet Ihnen die umfangreiche YQL-Dokumentation.

YQL-Praxisbeispiele

Mit YQL können Sie ziemlich faszinierende Sachen machen. Indem Sie Aussagen mit Klammern verschachteln und Ihre Ergebnisse filtern, können Sie ziemlich weit und tief im Netz nach Daten fischen. Klicken Sie einfach auf die folgenden Beispiele, um die Ergebnisse als XML-Dokument anzuschauen. Zum Ausprobieren und Herumspielen kopieren Sie die Beispiele einfach in die Konsole.

Dies ist nur ein kleiner Ausblick auf die zahlreichen Möglichkeiten, die YQL Ihnen bietet. Mehr dazu finden Sie in meinen Präsentationen über Yahoo Query Language.

Die Grenzen von YQL

Es gibt einige (vernünftige) Grenzen für YQL:

  • Sie können auf die URL 10.000 mal pro Stunde zugreifen – was darüber hinaus geht, wird gesperrt. In diesem Fall ist das nicht weiter tragisch, da die Sperre auf den User bezogen ist. Da wir JavaScript verwenden, betrifft das den individuellen Endverbraucher – nicht unsere Website. Falls Sie YQL im Backend verwenden, sollten Sie die Ergebnisse cashen und sich bei dem Service zudem via oAuth authentifizieren, damit Ihnen mehr Anfragen erlaubt werden.
  • Per YQL können Sie Informationen aus beziehungsweise in Datensätzen auffinden, einfügen, aktualisieren, löschen und die zurückgegebenen Daten begrenzen. Zudem können Sie festlegen, wie viele Treffer pro Seite angezeigt werden (0 bis 20, 20 bis 40 und so weiter); auch das Sortieren und Finden nur einmal vorkommender Treffer ist möglich. Nicht möglich sind komplexere Anfrage wie zum Beispiel: „Zeige alle Datensätze, in denen der dritte Buchstabe im Title-Attribute gleich ‚x‘ ist“. Sie können allerdings ein JavaScript schreiben, dass solche Umwandlungen vornimmt, bevor YQL die Daten liefert.
  • Sie haben Zugriff auf alle offenen Daten im Internet. Falls eine Website YQL über die robots.txt-Anweisung blockiert, wird Ihnen der Zugriff jedoch verweigert. Das gilt auch für Datenquellen, die einer Authentifizierung benötigen oder für Daten, die hinter einer Firewall liegen.

Dokumentation (Englisch) und weiterführende Links:

Ausblick

Sie wissen nun, wie man per YQL auf Daten zugreifen kann. Falls Sie eine interessante Datensammlung haben, die Sie in die YQL-Infrastruktur integrieren möchten, können Sie das ebenfalls tun. Wie das im Einzelnen funktioniert, werden wir in einem der nächsten Beiträge erläutern.

(mm),

Kategorien
Webdesign

Was ist… Lexikon: Anonymisierungssoftware

Frank Magdans

Zu Anonymisierungs-Software gehören Programme, die keine direkten Rückschlüsse auf das Surfverhalten des Computernutzers erlauben. Die IP-Adresse wird verdeckt, E-Mails werden verschlüsselt. Datenschutzbeauftragte betrachten das Tarnverfahren als ein Grundrecht jedes Einzelnen.

Zum einen kommen sogenannte Proxy-Server zum Einsatz, die die tatsächliche IP-Adresse des mit dem Internet verbundenen Computers verschleiern. Zu den Anbietern solcher Verfahren gehört beispielsweise das 2001 von der Universität Dresden ins Leben gerufene Projekt JAP (Java Anon Proxy). Hierbei werden Datenpakete über diverse Knotenpunkte, über Mixe, ausgetauscht. Eine Reihe mehrerer Mixe nennt man im Fachjargon Mixkaskaden.

Über die Jahre entwickelte sich das JAP-Programm, das später in AN.ON (Kurzform für Anonymität Online) umbenannt wurde, zu einer festen Größe in der Szene. Mittlerweile ist daraus JonDonym entstanden, ein OpenSource-Dienst, an dem unabhängige Entwickler mitarbeiten können. Kommerzielle Produkte gibt es von Steganos (Internet Anonym VPN) und ArchiCrypt (ArchiCrypt Stealth). Daneben bietet die Firma S.A.D. mit CyberGhost VPN eine Tarnkappenlösung, die auch an öffentlichen Hotspots funktioniert.

Zum anderen existieren Lösungen, die Hard- und Software miteinander kombinieren. Etwa gibt es den Privacy Dongle, einen USB-Stick, auf dem das von Steve Topletz entwickelte OpenSource-Programm TorPark installiert ist. Anbieter ist der FoeBuD, der Verein zur Förderung des öffentlich bewegten und unbewegten Datenverkehrs (e.V.). Die Software basiert auf dem Projekt TOR (The Onion Router – Download), das eigenen Aussagen zufolge als eine Gegenbewegung zur Analyse von Verbindungsdaten gedacht ist. Beim Privacy Dongle liegt ein modifizierter Firefox-Browser vor, der mit dem Tor-Netzwerk verbunden wird, einem Netzwerk, das die Daten über unzählige Computer auf der gesamten Erde verstreut. Ein Verschlüsselungsverfahren überschreibt kontinuierlich die Surfspuren, die währenddessen entstehen.

Im Zuge der Diskussion um die von Ex-Bundesinnenminister Wolfgang Schäuble und Kollegen initiierte Vorratsdatenspeicherung wurde die German Privacy Foundation (Link) gegründet, eine Initiative, die sich an Medienschaffende richtet, um ihnen Wege aufzuzeigen, wie sie ihre privaten Daten schützen können. Beispielsweise bieten sie mit der Privacy Box einen anonymen Kommunikationsdienst an. Neu ist diese Option jedoch nicht. Bereits seit 1991 existiert das von Philip R. Zimmermann geschriebene Programm Pretty Good Privacy (PGP), mit dem sich ebenfalls E-Mails verschlüsseln lassen.

(mm),

Kategorien
Webdesign

Yahoo Query Language macht Content-Abfragen spielend leicht

Chris Heilmann (Übersetzung Manuela Müller)

Ein schöne Benutzeroberfläche zu gestalten ist eine tolle Erfahrung. Leider wird dieses Hochgefühl schnell ruiniert, wenn man sieht, wie das Design zerbröselt, wenn man in die Anwendung richtige Inhalte hineinlädt. Darum ist es besonders wichtig, Ihre Benutzeroberfläche so bald wie möglich mit echtem Content zu testen und zu prüfen, wie Ihr Design unter Realbedingungen aussieht. Mit einem Service wie der Yahoo Query Language gelingt Ihnen das auch ohne Programmierkenntnisse.

Datenbankabfragen waren in den vergangenen Jahren ein Job für Spezialisten. Die unglaubliche Menge an heute verfügbarem Content und Systemen, die diese Informationen verarbeiten können, macht es immer einfacher, solche Webservices einzusetzen – selbst dann, wenn Sie vom Programmieren so gut wie keine Ahnung haben. Wenn Sie sich einmal auf Programmable Web umschauen, werden Sie aktuell 2015 verschiedene Anwenderprogrammierschnittstellen (API) finden. Das bedeutet, dass die Anbieter von Informationen wie Google, Twitter oder Yahoo Ihnen den Zugriff auf deren Rohdaten und das Modifizieren dieser Daten erlauben.

The API listing site programmableweb.com lists 2015 different APIs to chose from.
Programmable Web unterstützt Designer und Entwickler mit zahlreichen APIs und Mashups.

Das Problem mit APIs

Das Schwierige an der Sache ist, dass der Zugriff auf all diese verschiedenen Programmierschnittstellen variiert: Von der simplen Eingabe eines URL über eine Anmeldung am Server bis hin zur Eingabe aller möglichen Informationen über Ihre Anwendung, die Sie ja noch aufbauen wollen, bevor Sie endlich den ersten Block des gewünschten Contents erhalten.

Jede API hat darüber hinaus eine unterschiedliche Vorstellung davon, wie die Informationen aussehen, die Sie senden sollen, welches Format diese Daten haben sollen und in welchem Format die von Ihnen angeforderten Daten dann schließlich zurück geliefert werden. All das macht es sehr zeitaufwändig, die APIs von Drittanbietern in Ihren Produkten zu verwenden. Dieses Problem potenziert sich, mit jeder weiteren eingesetzten API. Wenn Sie beispielsweise Fotos von Flickr brauchen, Aktualisierungen von Twitter und wenn Sie darüber hinaus geografische Informationen in Twitter auf einer Landkarte anzeigen wollen, dann haben Sie einen ziemlich weiten Weg vor sich.

Den Zugriff auf APIs vereinfachen

Die Firma Yahoo benutzt APIs für nahezu alle ihre Produkte. Anstatt auf eine Datenbank zuzugreifen und die abgerufenen Informationen live am Bildschirm auszugeben, setzt sich das Frontend die API auf. Diese bezieht die Informationen aus dem Backend, das seinerseits mit Datenbanken kommuniziert. Das hat den Vorteil, dass die Anwenderschnittstelle skalierbar ist und Millionen von Anfragen bedienen kann, wobei Frontend und Backend unabhängig voneinander und ohne störende Wechselwirkungen geändert werden können.

Da die APIs im Laufe von zehn Jahren programmiert worden sind, unterscheiden sie sich im Format und der Art des Datenzugriffs. Dies kostete Yahoo zuviel Zeit. Aus diesem Grund wurde zunächst Yahoo Pipes entwickelt, um den Prozess zu vereinfachen.

Yahoo Pipes

Pipes ist faszinierend. Es ist ein visueller Weg, um Informationen aus dem Internet miteinander zu vermischen und aufeinander abzustimmen. Allerdings, wenn man Pipes für längere Zeit verwendet, ergeben sich sehr schnell Einschränkungen. Pipes zu versionieren ist nicht sehr einfach. Wenn Sie die Funktionalität einer Pipe auch nur ein wenig ändern wollten, mussten Sie auf das System zurückgreifen, was jedoch wegen der komplexen Konversionsvorgänge dazu neigte, sehr langsam zu werden. Darum bietet Yahoo nun ein neues System für Dinge an, die sich häufig ändern und sehr komplex werden können.

Yahoo Query Language (YQL) ist ein Service und eine Sprache, die es spielend leicht macht, Webservices und APIs zu verwenden – sowohl in punkto Zugriff als auch im Hinblick aufs Format.

Daten mit YQL wieder auffinden

Der einfachste Weg auf YQL zuzugreifen ist es, die YQL console zu verwenden. Diese Konsole ist ein Werkzeug, mit dem Sie Ihre YQL-Arbeit in einer Vorschau anzeigen und mit dem System spielen können, ohne dass Sie dafür jegliche Programmierkenntnisse benötigen. Die Schnittstelle besteht aus verschiedenen Komponenten:

The YQL console
Yahoo Query Language führt Sie in fünf Schritten zu den gewünschten Informationen.

  1. Im YQL-Statement-Bereich geben Sie Ihre Datenbankanfrage ein. YQL hat eine sehr einfache Syntax, auf die wir später noch genauer eingehen. An dieser Stellen können Sie erst einmal den Statement-Bereich ausprobieren. Geben Sie eine Datenbankabfrage ins Feld „Your YQL Statement“ ein; wählen Sie über die Optionsschaltflächen „XML“ oder „JSON“ das gewünschte Format, legen Sie über das Kontrollkästchen „Diagnostics“ fest, ob Sie einen Diagnosebericht haben wollen und klicken Sie schließlich auf „TEST“, um die Abfrage zu starten. Oben rechts gibt es auch einen Permalink. Klicken Sie darauf, um sicher zu gehen, dass Sie Ihre Arbeit nicht verlieren, wenn Sie versehentlich den Back-Button betätigen.
  2. Der mit „2“ gekennzeichnete Ergebnisbereich zeigt Ihnen die zurückgegebenen Informationen des Webservice an. Sie können diese Informationen entweder im XML- oder im JSON-Format lesen – oder klicken Sie auf „TREE VIEW“, um die Daten in einer Baum-artigen Struktur anzeigen und durchblättern zu können.
  3. Der Bereich „REST query“ gibt Ihre Datenbankanfrage als URL aus. Diese URL können Sie zu jeder beliebigen Zeit in einen Browser oder ein Programm Ihrer Wahl kopieren – so einfach ist es, mithilfe von YQL Informationen aus verschiedenen Datenquellen abzufragen.
  4. Im Query-Bereich (die drei oberen Schaltflächen in der rechten Sidebar – siehe Ziffer „4“) können Sie Namen, so genannte „Query Aliases“ für Ihre Datenbankabfragen festlegen. Dieser Service ist vergleichbar mit Lesezeichen in einem Browser. Dazu müssen Sie allerdings registriert sein. Ein Klick auf die Schaltfläche „Recent Queries“ zeigt den Verlauf Ihrer jüngsten Suchanfragen an. Das ist ganz nützlich, wenn Sie etwas durcheinander gebracht haben. Wenn Sie sich erst einmal anschauen wollen, wie solche Abfragen aufgebaut sind, können Sie über die Schaltfläche „Example Queries“ diverse Beispiele aufrufen und den Code im Ergebnisbereich betrachten.
  5. Unter „Data Tables“ in der rechten Sidebar werden alle Services aufgelistet, die Sie über YQL abfragen können. Der Klick auf den Namen einer Tabelle wird in den meisten Fällen eine Demo-Abfrage in der Konsole öffnen. Wenn Sie mit dem Mauszeiger über den Link fahren, werden Ihnen zwei weitere Links angezeigt- desc und src -, die Ihnen Informationen über die Parameter des Webservices geben und Ihnen zeigen, wie Sie mit der Datentabelle umgehen. In den meisten Fällen brauchen Sie nur auf den Namen zu klicken. Sie können die Datentabellen auch filtern, indem Sie einfach eintippen, wonach Sie suchen.

YQL-Daten verwenden

Am einfachsten verwenden Sie YQL-Daten, indem Sie JSON als Ausgabeformat verwenden, und eine Callback-Funktion definieren. In dem Fall können Sie die URL aus der Konsole kopieren und mit einem einfach Stück JavaScript-Code diese Informationen in HTML ausgeben. Lassen Sie uns das direkt ausprobieren:

Als ein sehr einfaches Beispiel werden wir jetzt ein paar Fotos von flickr mit dem Suchbegriff „cat“ abrufen:

select * from flickr.photos.search where text=“cat“

Geben Sie das in die YQL-Konsole ein und drücken Sie den „TEST“-Button. Die Ergebnisse werden in XML ausgegeben – jede Menge Informationen über die Fotos:

getting photos of cats using YQL and Flickr

Anstelle von XML wählen Sie nun JSON als Ausgabeformat und geben myflickr als Namen der Callback-Funktion ein. Als Ergebnis erhalten Sie dieselben Informationen als JSON-Objekt innerhalb des Aufrufs der Funktion myflickr.

getting photos of cats using YQL and Flickr

Sie können die für Sie erzeugte URL aus dem Bereich „The REST query“ kopieren und verwenden.

getting photos of cats using YQL and Flickr

Schreiben Sie nun eine JavaScript-Funktion mit dem Namen myflickr und einem Parameter data. Kopieren Sie die URL als src in einen anderen Script-Block:

<script>

  function myflickr(data){
    alert(data);
  }
</script>
<script src="http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20flickr.photos.search%20where%20tex
t%3D%22cat%22&format=json&env=store%3A%2F%2Fdatatables.org
%2Falltableswithkeys&callback=myflickr"></script>

Wenn Sie dies innerhalb eines Browsers laufen lassen, wird die URL, die Sie hineinkopiert haben, die Daten vom YQL-Server abrufen und sie an die Funktion myflickr als data-Parameter senden. Der data-Parameter ist ein Objekt, das all die vom YQL-Server zurück gegebenen Informationen enthält. Um sicher zu gehen, dass Sie die richtigen Datn erhalten haben, prüfen Sie, ob die Eigenschaft data.query.results existiert. Wenn das der Fall ist, können Sie einen Loop zu den Ergebnissen schreiben.

<script>function myflickr(data){
  if(data.query.results){
    var photos = data.query.results.photo;
    for(var i=0,j=photos.length;i<j;i++){
      alert(photos[i].title);
    }
  }
}</script>
<script src="http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20flickr.photos.search%20where%20text%3D%22cat%22
&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&
callback=myflickr"></script>

Sie können die Struktur der Information und das, was Loop-fähig ist, auf einfache Weise abfragen, in dem Sie einfach die „Tree View“ im Ergebnisfeld der Konsole aktivieren.

The data structure in tree format

Das Ergebnis ist jedoch noch nicht sehr befriedigend, denn es werden zunächst nur die Titel der gefundenen Fotos als Aufruf angezeigt. Das ist nichts weiter als ärgerlich. Um die Fotos im richtigen Format darzustellen, benötigen wir etwas mehr. Aber auch das ist keine Magie.

<div id="flickr"></div>
<script>function myflickr(data){
  if(data.query.results){
    var out = '<ul>';
    var photos = data.query.results.photo;
    for(var i=0,j=photos.length;i<j;i++){
      out += '<li><img src="http://farm' + photos[i].farm +
             '.static.flickr.com/' + photos[i].server + '/' + photos[i].id +
             '_' + photos[i].secret + '_s.jpg" alt="' + photos[i].title +
             '"></li>';
    }
    out += '</ul>';
  }
  document.getElementById('flickr').innerHTML = out;
}</script>
<script src="http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20flickr.photos.search%20where%20text%3D%22cat%22&
format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&
callback=myflickr"></script>

Photos of cats on flickr

Schauen Sie sich diesen Code in Aktion an und Sie bekommen Fotos von Katzen – live von Flickr, ohne dass Sie sich durch einen Authentifizierungsprozess quälen müssen.

Die Komplexität der HTML-Generation für die Wiedergabe variiert von Datensatz zu Datensatz. Essentiell handelt es sich immer um denselben Trick: Definieren Sie eine Callback-Funktion, schreiben Sie sie, kopieren Sie die in der Konsole erzeugte URL. Testen Sie die wiedergegebenen Daten und drehen Sie durch.

HTML-Content per YQL wiederverwenden

Ein andere sehr leistungsfähige Methode, YQL einzusetzen, besteht darin, online auf HTML-Content zuzugreifen und für die Wiederverwendung zu filtern. Diesen Vorgang nennt man „scraping“, was so viel bedeutet wie kratzen oder schürfen. Ähnlich mühsam wie Goldschürfen ist auch das Scraping von HTML-Daten. YQL vereinfacht diesen Vorgang aus zwei Gründen:

  • Es lässt den aus dem Internet abgefragten HTML-Code durch HTML Tidy laufen.
  • YQL erlaubt Ihnen, das Ergebnis mit XPATH zu filtern.

Wenn Sie http://icant.co.uk/ aufrufen, können Sie meine Vortragsliste für diesen Sommer sehen.

christian heilmann's upcoming speaking engagements at icant.co.uk

Sie können Firebug in Firefox einsetzen, um diesen Bereich der Seite näher zu untersuchen. Öffnen Sie einfach Firebug, klicken Sie die Box mit dem Pfeil direkt neben dem Käfer an und bewegen Sie Ihren Mauszeiger solange über die Seite, bis der blaue Rahmen das Objekt umschließt, das Sie gerne untersuchen möchten.

inspecting an element in firebug

Setzen Sie einen Rechtsklick auf den ausgewählten Bereich und wählen Sie „CopyXPATH“ aus dem Kontextmenü.

inspecting an element in firebug
Komfortable Auswahl aus dem Kontexmenü

Wechseln Sie in die YQL-Konsole und tippen Sie das folgende ein:

select * from html where url="http://icant.co.uk" and xpath=''

Kopieren Sie den XPath von Firebug in die Datenbankabfrage und klicken Sie auf „Test“.

select * from html where url="http://icant.co.uk" and
xpath='//*[@id="travels"]'

retrieving HTML in YQL

Wie Sie im Fenster „Formatted View“ sehen können, ruft dies den gewünschten HTML-Content innerhalb von ein wenig XML-Code ab. Der einfachste Weg, diesen Content wiederzuverwenden, ist es, das in YQL so genannte JSON-P-X-Format aufzurufen. Dieses gibt ein einfaches JSON-Objekt wieder, in dem der HTML-Content als String enthalten ist. Um das JSON-Objekt zu nutzen, machen wir folgendes:

  1. Kopieren Sie die URL aus dem blau hinterlegten REST-Bereich der Konsole (siehe Abbildung).
  2. Setzen Sie &format=xml&callback=travels ans Ende der URL.
  3. Fügen Sie die ergänzte URL als src-Element in einen Skriptblock und schreiben Sie diese simple JavaScript-Funktion:
<div id="travels"></div>
<script>function travels(data){
  if(data.results){
    var travels = document.getElementById('travels');
    travels.innerHTML = data.results[0];
  }
}</script>
<script src="http://query.yahooapis.com/v1/public/yql?
q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Ficant.co.uk%22%20
and%20xpath%3D'%2F%2F*%5B%40id%3D%22travels%22%5D'&
diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&
format=xml&callback=travels"></script>

Das Ergebnis ist eine Punktaufzählung meiner Vorträge in Ihrer Website:

scraping and displaying HTML with YQL

Im zweiten Teil dieses Beitrags lesen Sie:

YQL-Datenbankabfragen debuggen
YQL-Syntax
YQL-Praxisbeispiele

(mm),

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Tutorials

Photoshop-Tutorial: Masken-Maßarbeit ganz ohne Pinseln (2)

Masken können Sie in Photoshop äußerst vielseitig einsetzen – nicht nur zum Freistellen, sondern auch zum Bearbeiten von Transparenz oder Helligkeit/Kontrast. Seit Photoshop CS4 macht die verbesserte Masken-Palette die Bearbeitung von Masken schneller, einfacher und vor allem flexibler. Wie Sie Maßarbeiten per Maske ganz ohne Pinsel erledigen,  zeigt der zweite Teil des Tutorials von Sibylle Mühlke aus dem Buch Adobe Photoshop CS4 – ein Gastbeitrag von Galileo Design.

1. Datei vorbereiten

Das Ziel dieses Workshops ist es, eine Maske zu erzeugen, die den Bildhintergrund ausblendet und dabei gleichzeitig die Haarpracht der porträtierten Frau intakt lässt. Danach könnte man einen anderen Bildhintergrund einmontieren, oder man lässt das Bild einfach freigestellt vor Weiß stehen. Das hört sich zunächst trivial an, doch tatsächlich sind solche haarigen Motive sehr anspruchsvoll. Zur Vorbereitung sind drei Schritte zu erledigen: Sie machen aus der Bildebene – die jetzt noch die Hintergrundebene ist – eine normale Bildebene. Dann erzeugen Sie eine neue, weiße Ebene und legen sie unter die Ebene mit dem Motiv. Sie dient der Ergebniskontrolle. Und schließlich wechseln Sie wieder zur Ebene mit dem Bildmotiv und erzeugen dort eine Ebenenmaske.

Die Ausgangsdatei

Ebenenaufbau der Datei

Bye-bye, Extrahieren-Filter

Der „Extrahieren“-Filter sollte das Freistellen kompliziert geformter Objekte erleichtern, aber hat dieses Versprechen eigentlich nie wirklich eingelöst. In Photoshop CS4 ist er im regulären Funktionsumfang nicht mehr enthalten. Hartgesottene Fans können ihn nachinstallieren. Weitere Details und eine Anleitung zur Installation finden Sie hier: Mac: www.adobe.com/support/ downloads/detail.jsp?ftpID=4249 Win: www.adobe.com/support/ downloads/detail.jsp?ftpID=4269 Eine Beschreibung des Extrahieren- Werkzeugs können Sie im BuchUpdate unter www.galileodesign. de/1869 nachlesen.

2. Farbbereich-Dialog starten und einstellen

Markieren Sie nun die Maske in der Ebenen-Palette, und starten Sie den Dialog „Farbbereich“ mit dem entsprechenden Button in der Masken-Palette. Achten Sie, bevor Sie loslegen, darauf, dass alle Optionen richtig eingestellt sind.

Das Vorschau-Bild zeigt, dass hier schon die ersten Klicks gemacht wurden – oben links sieht man die Anfänge einer schwarzen Maskenfüllung.

Sehr wichtig ist die Option „Umkehren“ – sonst sehen Sie nämlich nur eine schwarze Maske. Bei den Pipetten brauchen Sie die Plus- Pipette für multiple Auswahlklicks ins Bild. Unter „Auswahl“ muss selbstverständlich „Aufgenommene Farben“ stehen. Aktivieren Sie auch unbedingt „Lokalisierte Farbgruppen“, und starten Sie mit eher niedrigen Werten bei „Toleranz und Bereich“ – Sie können sich später noch an die beste Einstellung herantasten. Achtung: Der „Bereich“-Regler ist manchmal erst aktiv, nachdem Sie bereits einige Klicks in das Bild gemacht haben. Bei der „Auswahlvorschau“ haben Sie freie Wahl und können entscheiden, mit welcher Darstellung Sie am besten zurechtkommen. Ich fand die im Screenshot gezeigte Konstellation bei diesem Motiv am hilfreichsten.

3. Die ersten Auswahlklicks: Toleranz und Bereich austarieren

Fangen Sie nun an, im Bild oben links Auswahlklicks zu setzen – also in die Bereiche, die maskiert werden sollen. In der Vorschau erscheinen diese Bereiche dann schwarz, im Bild selbst werden sie sofort ausgeblendet, so dass dort die dahinterliegende weiße Ebene sichtbar wird.

Da Sie hier mit geringer Toleranz und einem niedrigen Wert für „Bereich“ arbeiten, sind recht viele Klicks notwendig. Doch nur so ist gewährleistet, dass Sie nicht zu viele Farbbereiche erwischen und dadurch versehentlich zu viel Haar entfernen.

Durch Verschieben der Regler können Sie feststellen, bei welchen „Toleranz-/Bereich“-Werten die Maske bei diesem Motiv am besten wirkt. Beim Verschieben der Regler ändern sich Maske und Bild sofort, und zwar auch rückwirkend für alle bisher getätigten Klicks.

Bei diesem Motiv sind sehr diffuse, weiche Konturen gefragt. Verstellen Sie die Regler entprechend. Je nachdem, wo Sie Ihre Klicks gesetzt haben, sind hier andere Werte optimal, deshalb kann ich hier keine allgemeingültigen Werte nennen. Bei meinen Tests erreichte ich mit geringen „Bereichs“-Werten (um die 20) und höherer „Toleranz“ (70 und drüber) ganz passable Ergebnisse.

4. Fehlerkorrektur

Einzelne Fehlklicks können Sie mit „Bearbeiten / Rückgängig“ sofort wieder zurücknehmen. Die Minus-Pipette ist ein weiteres Mittel, um Farbereiche wieder von der Maskierung auszuschließen. Die Anwendung funktioniert jedoch nicht immer gut, manchmal verschlimmbessert man die Maske nur. Ist Ihnen die ganze Maske missraten, drücken Sie die (Alt)-Taste: Der Button „Abbrechen“ des „Farbbereich“-Dialogs wird zu „Zurücksetzen“. Er nimmt alle Ihre Änderungen zurück, ohne den Dialog zu schließen. Sie können danach sofort wieder von vorn anfangen.

5. Farbbereichsauswahl abschließen

Vermutlich lässt es sich nicht vermeiden, dass auch Bereiche, die gar nicht ausgeblendet werden sollten – zum Beispiel im Gesicht der Frau – teilweise schwarz abgedeckt werden und dadurch im Bild heller erscheinen (sie werden durch die Maske teil-transparent). Das ist jedoch kein Schaden: Solche Stellen lassen sich später leicht manuell überpinseln. Konzentrieren Sie sich einzig auf den Übergang zwischen den Locken und dem gelben Hintergrund. Wenn der in Ordnung aussieht, quittieren Sie den Dialog. Die Nachbearbeitung ist dann ganz einfach – in jedem Fall deutlich einfacher als eine manuell gemalte Lockenmaske!

Korrekturen an der Maske

Es ist wahrscheinlich, dass der „Farbbereich“-Dialog an einem Punkt Ihrer Korrektur so etwas anzeigt wie im Bild oben: Prima Locken-Konturen und dazu einige unerwünscht maskierte Bereiche im Maskeninneren.

6. Zwischenergebnis

Sie haben wahrscheinlich jetzt ein Bild mit einer fast perfekten Maske vor sich. Es müsste ungefähr so aussehen:

Das Zwischenergebnis

Hier sind vor allem die über die Bluse hängenden Locken entfärbt. Das ist ein Resultat der unerwünschten hellgrauen Maskenverfärbung. Die Masken-Fehlstellen über dem Gesicht sind im Bild weniger auffallend.

In der Ebenen-Palette erscheinen Bild und Maske jetzt so.

7. Innenbereiche manuell nachpinseln

Um die Maske weiter zu korrigieren, müssen Sie nun doch ein wenig den Pinsel schwingen. Doch keine Angst – es handelt sich hier nicht um knifflige Konturen, sondern um Innenbereiche der Maske, die Sie großzügig auspinseln können.

Wechseln Sie zur Kanäle-Palette. Dort blenden Sie den Alphakanal ein und die übrigen Kanäle aus. Tipp: Wenn der Alphakanal nicht zu sehen ist, müssen Sie zuerst in der Ebenen-Palette die Ebene mit dem Frauenbild aktivieren. Das Bild erscheint nun in der Graustufenansicht, das heißt, Sie sehen dort die Maske.

Rufen Sie nun das Pinselwerkzeug über die Werkzeugleiste auf oder wählen Sie das Tastaturkürzel „B“, und stellen Sie eine geeignete Pinselgröße ein.

Das Pinselwerkzeug (Kürzel „B“)

Ein weicher, mittelgroßer Pinsel ist gut geeignet. Lediglich für die Kanten der Locken müssen Sie einen kleineren Pinsel nehmen und etwas vorsichtiger zu Wege gehen. Sie wollen ja nicht Ihre Vorarbeit zerstören.

Einstellung der Kanäle-Palette

Korrektur der Korrektur

Korrigieren mit grobem, weichem Pinsel. Hier sieht man auch noch einmal sehr gut die hellgrauen Partien der Maske an den Konturen der Locken: Diese gewährleisten im Bild den sanften, realistischen Übergang zwischen Haar und neuem Hintergrund.

8. Fertig! Das Endergebnis

Das fertige Bild mit korrigierter Maske sieht nun so aus:

Ein überzeugender Freisteller, in kurzer Zeit fertiggestellt.

(mm),

Kategorien
Tutorials

Gimp-Tutorial (2): Farbfotos in schwarzweiß umwandeln – einzelne Farben erhalten

Das Thema Schwarzweiß ist auch in der digitalen Bildbearbeitung und im Webdesign sehr wichtig. Schwarzweißbilder eignen sich auch im Webdesign ganz hervorragend als Stilmittel. Wie Sie mithilfe von Gimp Farbfotos gekonnt in Schwarzweißbilder umwandeln und dabei einzelne Bildelemente farbig erhalten, erläutert der zweite Teil des Gimp-2.6-Tutorials. Die Inhalte dieser Tutorial-Reihe sind ein Beitrag des Galileo-Verlags, in dem das Buch Gimp 2.6 von Jürgen Wolf

Im folgenden Bild sollen die Farben der berühmten „Yellow Cabs“ aus New York erhalten bleiben. Wenn Sie hier mit dem Dialog „Farbton/Sättigung“ alle Regler bis auf den gelben entsättigen würden, würden auch die roten Lichter bei den Taxis grau werden. Wenn Sie allerdings die rote Farbe nicht entsättigen, würden wiederum einige Gebäude und Lichter störend auffallen.


Eine Straßenszene vor dem Flatiron Building in New York   FOTO: Clarissa Schwarz

1. Speziellen Bereich auswählen

Wählen Sie mit dem Werkzeug „Freie Auswahl“ (Taste „F“) den Bereich im Bild aus, bei dem Sie gesondert die Farben entsättigen wollen. Im Beispiel wurden hier die beiden vorderen Taxis ganz knapp ausgewählt.


Das Icon für das Werkzeug Freie Auswahl“

Andere Auswahlwerkzeuge

Im Beispiel wurde zwar das Werkzeug „Freie Auswahl“ verwendet, aber in der Praxis können Sie für solche Arbeiten auch sämtliche anderen Auswahlwerkzeuge oder -techniken benutzen. Dies hängt vom Anwendungsfall ab.


Einen speziellen Bereich auswählen

2. Auswahl entsättigen

Öffnen Sie den Dialog Farben N Farbton/Sättigung, und entsättigen Sie alle Primärfarben bis auf Gelb und Rot. Jetzt sollten im ausgewählten Bereich alle anderen Farben entsättigt sein. Bestätigen Sie den Dialog mit OK.

Auswahl bis auf gelbe und rote Farbe entsättigen

3. Auswahl invertieren

Invertieren Sie die Auswahl über „Auswahl/Invertieren“ oder (Strg)/(Ctrl)+(I), wodurch Sie jetzt alles andere ohne die ursprüngliche Auswahl markiert haben.

4. Invertierte Auswahl entsättigen

Öffnen Sie erneut den Dialog „Farben/Farbton/Sättigung“ und entsättigen Sie alle Farben, indem Sie den Regler „Sättigung“ im Bereich „Gewählte Farbe bearbeiten“ nach links ziehen.


Der Rest wird entsättigt.

Jetzt sollte auch der Hintergrund der Bildes entsättigt sein. Entfernen Sie jetzt noch die Auswahl mit (Ctrl)+(Shift)+(A) .


Das Bild nach dem gezielten Entfernen von Farbe

Mit dem Kanalmixer in Schwarzweiß konvertieren

Der Filter „Farben/Komponenten/Kanalmixer“ dient dazu, die Werte des RGB-Kanals zu kombinieren. Für die Konvertierung in Graustufenbilder bietet der Kanalmixer den RGB-Modus (Standardeinstellung) oder den Monochrom-Modus an.

Mit dem Ausgabekanal wählen Sie einen Kanal (Rot, Grün oder Blau), in den Sie die Werte der anderen Kanäle hineinmixen wollen. Wenn Sie die Eigenschaft Monochrom 3 aktiviert haben, ist dieses Menü ausgegraut. Mit den drei Reglern „Rot“, „Grün“ und „Blau“ steuern Sie, wie stark die einzelnen Farbkanäle beim Mixen berücksichtigt werden. Um zu helle Bilder zu vermeiden, die sich bei zu großen Werten eventuell ergeben, können Sie die Checkbox „Leuchtstärke erhalten“ aktivieren. Über die Schaltfläche „Öffnen“ können Sie zuvor gespeicherte Einstellungen des Filters laden. Speichern können Sie Ihre Einstellungen mit der gleichnamigen Schaltfläche.


Der Dialog Kanalmixer

Schritt für Schritt: Schwarzweißbilder mit dem Kanalmixer erstellen

Diese Schritt-für-Schritt-Anleitung demonstriert die Erstellung von Schwarzweißbildern mit dem Kanalmixer. Bei den verwendeten Werten handelt es sich nicht um fixe Werte, die Sie für jedes andere Bild übernehmen können.

1. Bild laden und Kanalmixer öffnen

Laden Sie zunächst das Bild in GIMP, und öffnen Sie anschließend den Dialog „Farben/Komponenten/Kanalmixer“.


Das Ausgangsbild            FOTO: Ingo Jung / www.digital-expresslabor.de

2. Schwarzweißbild erzeugen

Um aus dem Bild jetzt ein Schwarzweißbild zu erzeugen, aktivieren Sie die Checkbox „Monochrom“. Setzen Sie außerdem ein Häkchen vor „Leuchtstärke erhalten“, um gegebenenfalls zu starken Aufhellungen entgegenzusteuern.


Schwarzweißbild mit dem Kanalmixer erstellen

3. Kanäle bearbeiten

Die Intensität des Schwarzweißbildes passen Sie jetzt mit den Schiebereglern „Rot“, „Grün“ und „Blau“ an. Hiermit färben Sie nichts ein, sondern fügen mehr oder weniger Daten zum ursprünglichen Kanal hinzu.

  • Bei Porträts beispielsweise wird gewöhnlich der Rot-Kanal mehr angehoben, da sich damit der Kontrast erhöhen lässt.
  • Landschaftsaufnahmen hingegen vertragen etwas mehr vom Grün-Kanal. Mit dem Grün-Kanal können Sie zur Detailveränderung beitragen.
  • Der blaue Kanal eignet sich für die Veränderung von Rauschen und Körnigkeit.

Im Beispiel wurden die Werte 60 für Rot, 40 für Grün und 20 für Blau verwendet.


Das erstellte Schwarzweißbild


Nachbearbeitet und mit einem sepiafarbenen Farbverlauf gefüllt

Schwarzweiß mit GEGL

Zwar sind die GEGL-Operationen bei GIMP 2.6 noch experimenteller Natur, aber auch hier finden Sie zwei sehr nützliche Werkzeuge, die aus einem Farbbild ein Schwarzweißbild erstellen. Die GEGL-Operationen rufen Sie über „Werkzeuge/GEGL-Operationen“ auf. Über die Dropdown-Liste erreichen Sie die einzelnen Operationen.

Achtung: Da die GEGL-Operationen wie bereits erwähnt noch in der Entwicklung sind, sind sie teilweise recht langsam in der Ausführung.


Der Dialog zum Auswählen der GEGL-Operationen

Eine ähnliche Funktion wie der „Kanalmixer“ bietet die GEGLOperation „mono-mixer“ an, der ein Bild automatisch in ein Graustufenbild umwandelt. Über die Regler Red, Green und Blue regeln Sie Helligkeit und Kontrast. Die Ergebnisse sind allerdings nicht mit denen des Kanalmixers zu vergleichen, außerdem arbeitet die GEGL-Operation viel feiner, weshalb Sie die Werte mit Gefühl ändern müssen.


Ähnlich wie der Kanalmixer arbeitet die GEGL-Operation mono-mixer.

Wirklich beeindruckende Ergebnisse, die allerdings mit einem enormen Rechenaufwand verbunden sind, erzielen Sie mit der GEGL-Operation C2G (kurz für: color2grey). Dieses Werkzeug erzeugt HDR– und Tonemapping-Effekte. Neben dem Einstellen von Kontrasten und harten Belichtungen lässt sich hiermit auch Körnigkeit simulieren.


Die GEGL-Operation „c2g“ liefert beeindruckende Ergebnisse.

Die folgenden Bilder demonstrieren den Vergleich zwischen den beiden GEGL-Operationen „mono-mixer“ und „c2g“. Das obere Bild wurde mit dem „mono-mixer“ in Schwarzweiß konvertiert und das untere mit „c2g“.


Mit dem „mono-mixer“ in Schwarzweiß konvertiert        FOTO: Brigitte Bolliger


Das gleiche Bild, nur wurde hier die GEGL-Operation „c2g“ verwendet. Beeindruckend, oder?

Im nächsten Teil des Tutorials lesen Sie:

Bilder weichzeichnen

(mm),

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Tutorials

Photoshop: Schnell und flexibel Masken bearbeiten (1)

Masken können Sie in Photoshop äußerst vielseitig einsetzen – nicht nur zum Freistellen, sondern auch zum Bearbeiten von Transparenz oder Helligkeit/Kontrast. Seit Photoshop CS4 macht die verbesserte Masken-Palette die Bearbeitung von Masken schneller, einfacher und vor allem flexibler. Dieses zweiteilige Tutorial von Sibylle Mühlke aus dem Buch Adobe Photoshop CS4 – ein Gastbeitrag von Galileo Design – zeigt, wie’s geht.

Ebenen- und Kanäle-Palette bleiben auch in Photoshop CS4 wichtige Steuerungselemente für Masken. In der Masken-Palette finden Sie zwar auch einige Basis-Funktionen wie Erzeugen, Löschen oder Anwenden von Masken. Vor allem aber ist sie ein Tool, mit dem Sie bereits bestehende Masken nachbearbeiten. Bisher fiel beim Anpassen von Masken viel Handarbeit an: Maskenkonturen mussten oftmals mit mit Pinselwerkzeugen manuell nachgebessert werden. Zuweilen half auch der Einsatz von Filtern wie dem Gaussschen Weichzeichner (unter Filter / Weichzeichnungsfilter – sorgt für weiche Konturen) oder Dunkle/Helle Bereiche vergrössern (unter Filter / Sonstige Filter – diese Filter verkleinern oder erweitern den maskierten Bereich).

All diese Befehle stehen weiterhin zur Verfügung. In der Masken- Palette sind die Entsprechungen zu diesen Funktionen (und noch einige mehr) jedoch bequem zusammengefasst. Und der größte Vorteil: Ihre Anwendung ist reversibel. Mit der Masken-Palette können Sie Konturlinien innerhalb von Masken detailliert anpassen und die Deckkraft der Maske – und damit die Transparenz der maskierten Ebene – steuern. Farbbereiche des Bildes können mit wenigen Klicks zu den maskierten Bereichen hinzugefügt oder von ihnen ausgeschlossen werden.

TOPP-TIPP: Maskenautomatik: „In die Auswahl einfügen“

Unter dem Menüpunkt „Bearbeiten“ findet sich auch der Befehl „In die Auswahl“ einfügen. Damit können in der Zwischenablage befindliche Inhalte in einen zuvor festgelegten Auswahlbereich eingefügt werden. Wenn Sie diesen Befehl wählen, wird eine neue Bildebene mit dem eingefügten Bildgegenstand angelegt, die automatisch eine Maske (die dem zuvor erstellten Auswahlbereich entspricht) enthält. Die Verkettung von Maske und Palette ist bereits aufgehoben. So können Sie durch Bewegen von Maske und eingefügtem Objekt entscheiden, welcher Ausschnitt der beste ist.

In der Datei mit der Tür wurde eine rechteckige Auswahl angelegt. Das Pinienbild wurde in die Zwischenablage kopiert und mit dem Befehl „In die Auswahl einfügen“ eingesetzt.

Vor dem Bearbeiten: Maske auswählen

In einem Dokument können mehrere Masken vorkommen. Deswegen ist die Masken-Palette so eingerichtet, dass Sie die Maske, die Sie bearbeiten möchten, zunächst auswählen müssen. Dazu genügt ein Klick auf die Maskenminiatur in der Ebenen-Palette (!). Die Titelleiste Ihres Dokuments können Sie als Kontrolle nutzen. In dem Abschnitt „Maske aktivieren“, später in diesem Kapitel, finden Sie weitere Informationen zum Thema.

Die Masken-Palette verweigert den Dienst, wenn keine Maske gewählt ist.

Grundfunktionen auf einen Blick

Standardmäßig ist die Masken-Palette in Photoshop immer eingeblendet. Sie teilt sich im Dock das Fach mit der – ebenfalls neuen – Palette Korrekturen. Sie lässt sich auch über den Befehl Fenster / Masken starten. Im Gegensatz zur vollgepackten Ebenen-Palette ist die Masken- Palette recht übersichtlich. Und auch ihre Funktionen sind nicht so erklärungsbedürftig: Zum größten Teil sind sie bereits aus anderen Zusammenhängen bekannt. Das Besondere ist, dass sie hier erstmals auch auf Masken angewandt werden können – dadurch eröffnen sich ganz neue Arbeitsweisen!

Diese Palette ändert die Arbeitsweise mit Masken grundlegend.

Das Miniatur-Vorschaubild oben links zeigt Ihnen an, welche Maske aktuell ausgewählt ist – und auf welche Maske sich Ihre Einstellungen auswirken. Die zwei Buttons oben rechts dienen zum Anlegen neuer Masken. Sie können »normale«, pixelbasierte Ebenenmasken und auf Vektorlinien basierende Vektormasken erzeugen. Die kleinen Icons am Fuß der Palette übernehmen Grundfunktionen, die Sie auch mit der Ebenen-Palette ausführen können: das Löschen , Ein- und Ausblenden und Anwenden von Masken sowie das Erzeugen von Auswahlen aus Masken (mehr dazu finden Sie in Abschnitt „Ebenenmasken, Auswahlen und Kanäle“). Der Button Umkehren vertauscht Schwarz und Weiß in der Maske und kehrt damit auch die Maskierwirkung um.

Transparenz mit dem „Dichte“-Regler steuern

Zwei Regler stehen auf der Masken-Palette zum schnellen Zugriff zur Verfügung. Der obere heißt Dichte. Mit ihm steuern Sie, wie dunkel das Schwarz der Maske erscheint und damit, wie stark die Maske die maskierte Ebene abdeckt. Das Prinzip ist nicht neu: Schwarze Maskenbereiche decken die Ebenen vollständig ab, graue Maskenteile machen Bildebenen leicht transparent oder reduzieren die Korrekturwirkung von Einstellungsebenen (anstatt sie ganz aufzuheben). Seit Photoshop CS4 kann dieser Effekt nun über den Regler stufenlos reguliert und jederzeit geändert werden.

Einige Vergleichsbilder machen die Wirkung des Sliders anschaulich. Dazu nutze ich nochmals den kleinen Leuchtturm vom Kapitelanfang (Abbildungen 14.29 bis 14.35). Die Korrekturwerte wurden jedoch überhöht, damit der Effekt besser zu sehen ist. Dem Ausgangsbild wird eine stark gelb färbende Einstellungsebene Farbton/Sättigung hinzugefügt. Mittels Maske wird die Wirkung dieser Einstellungsebene zunächst auf den Sandstrand im Vordergrund sowie auf die Zaunpfähle und einige andere Details eingegrenzt. Die Dichte der Maske beträgt 100 %.

Das Originalbild, ohne Einstellungsebene, ohne Korrektur und ohne Maske.

Der Ebenenaufbau des Testbildes.

Die Maske mit Dichte 100 % – Schwarz und Weiß und sehr wenig Grautöne bei den Details.

Das Bild mit extrem färbender Einstellungsebene. Durch die Maske wirkt diese zunächst nur auf den Vordergrund.

Der Kontrast zwischen den nicht-maskierten, verfärbten Bildteilen einerseits und den maskierten, nicht verfärbten Bereichen andererseits ist sehr deutlich. Doch was passiert, wenn die Dichte der Maske auf 50 % herabgesetzt wird?

Die Maske bei 50 % Dichte sieht nun so aus. Aus Schwarz wurde Grau – und das ist dafür verantwortlich, dass die färbende Wirkung der Einstellungsebene auch in den maskierten Teilen zum Tragen kommt.

Der Gelbstich wird im gesamten Bild sichtbar. Im Bildhintergrund – der ja immer noch durch die Maske verdeckt ist – erscheint er weniger stark als im unmaskierten Vordergrund.

Wenn man die Dichte der Maske weiter reduziert, nimmt die Deckkraft der Maske ab, und die färbende Wirkung der Einstellungsebene nimmt zu. Bei einer Dichte von 0 % ist die Maskenwirkung völlig aufgehoben. Die Maske erscheint ganz weiß.

Das Beispielbild ist überall stark verfärbt. Die Maske mit einer Dichte von 0 % hat keinerlei filternde Wirkung mehr.

Mit solchen Extremwerten wird man in der Praxis wohl eher selten arbeiten. Im Normalfall werden Sie die Funktion zum feinen Nachjustieren nutzen. Allerdings müssen Sie beachten, dass es bei einer Maske, deren Dichte-Wert mit der Masken-Palette gesenkt wurde, auch nachträglich nicht mehr möglich ist, auf das Maskengrau voll deckendes Schwarz aufzubringen – weder mit dem Pinsel noch mit anderen Maßnahmen. Und Auswahlen, die aus solchen Masken erzeugt werden, sind ebenfalls in der Wirkung reduziert, vergleichbar mit einer global wirksamen „Weichen Auswahlkante“.

Der Korrekturbefehl „Helligkeit/Kontrast“ als Alternative
Der Korrekturbefehl Helligkeit/Kontrast (unter Bild / Korrekturen) kann die Wirkung von Masken insgesamt verschärfen oder abmildern. Er macht aus Schwarz und Weiß Grautöne oder aus Graustufen Schwarz und Weiß. Anders als der Dichte-Slider ist er auch in der Lage, das Maskenweiß zu verändern. Und wenn Sie mit dieser Funktion arbeiten, können Sie graue Maskenbereiche wieder mit Schwarz überpinseln – etwa, um einzelne Details doch vollkommen abzudecken. Einziger Nachteil: Anders als mit den Funktionen der Masken-Palette haben Sie nicht jederzeit einen einfachen Zugriff auf Ihre Einstellungen, um sie zu ändern. Dennoch stellt Helligkeit/Kontrast in einigen Situationen eine sinvolle Alternative zur Dichte-Funktion dar.

Ist die Option „Früheren Wert verwenden“ aktiv, wirkt das Tool insgesamt viel schärfer.

Konturbereiche in Masken nachbessern

Die wahren Problemzonen von Masken sind Kanten und Konturen innerhalb des Bildes und innerhalb der Maske: also die Stellen, an denen maskierte und nicht-maskierte Bereiche aneinanderstoßen. Dort soll die Maske exakt den vorhandenen, manchmal recht gewundenen und kleinteiligen Bildkonturen folgen. Gleichzeitig soll die Maske jedoch auch weich genug sein, damit das maskierte Objekt nicht wie grob mit der Schere ausgeschnitten wirkt. Denn in vielen Fällen ist der Übergang zwischen verschiedenen Bildobjekten eher diffus als klar konturiert, wie die folgenden Abbildungen zeigen.

An Lockenschöpfen wie hier zeigt sich schnell, ob eine Maske gut gemacht ist. Diese ist es nicht: Der Bildhintergrund wurde ausgeblendet und lässt die Haarkonturen grob zugeschnitten stehen.

Zoom auf die Lockenkontur, hier ohne Maske mit dem Originalhintergrund: Eine klare Grenze zwischen Haar und Hintergrund ist schwer auszumachen.

Die Masken-Palette bietet gleich zwei Werkzeuge, um mit dieser schwierigen Materie fertig zu werden.

Weiche Kante nicht nur für Pixel-Masken
Der „Slider Weiche Kante“ ist direkt in der Masken-Palette zugänglich. Er zeichnet Konturen innerhalb der Maske stufenlos weich. Änderungen werden direkt im Bild angezeigt. Korrekturen der Einstellung können jederzeit vorgenommen werden. Diese Funktion lässt sich auf pixelbasierte Ebenenmasken anwenden und – das ist das Besondere – auch auf Vektormasken. Bisher galt: Vektormasken haben stets scharfe, harte Kanten und bestehen nur aus Schwarz oder Weiß; Graustufen und damit weiche Übergänge waren nicht realisierbar. Das ist nun anders, der „Weiche Kante“ -Regler macht auch die Konturen innerhalb von Vektormasken weich. Diese werden dadurch deutlich aufgewertet und bieten gewissermaßen das Beste aus der Pixel- und der Vektorwelt: Sie sind stufenlos skalierbar, kommen nun aber nicht mehr zwangsläufig in harter Scherenschnitt-Optik daher.

Differenzierte Einstellungen: Maskenkante
Differenziertere Einstellungen für die Konturen innerhalb von Masken eröffnen sich mit dem „Maskenkante“-Dialog. Dessen Funktionen lassen sich jedoch nur auf Pixelmasken anwenden. Wohl aus diesem Grund sind die beiden Weiche-Kante-Funktionen innerhalb der Masken-Palette nicht miteinander gekoppelt: Die „Weiche Kante“-Einstellung innerhalb des Dialogs „Maskenkante“ arbeitet völlig unabhängig vom Regler „Weiche Kante“ auf der Masken-Palette.


Hier geht es zum Masken-Feintuning.

TOPP-TIPP: Zwei verschiedene Ansichten gleichzeitig

Mit dem Befehl „Fenster / Anordnen / Neues Fenster für [Dateiname]“ wird eine Datei in zwei Fenstern gleichzeitig angezeigt. Das ist kein Dateiduplikat, sondern lediglich eine zweite Ansicht. Änderungen werden in beiden Fenstern synchron gezeigt. Der Vorteil: Sie können mehrere Ansichtsvarianten eines Bildes gleichzeitig auf dem Schirm haben. So haben Sie bei kniffligen Arbeiten beispielsweise unterschiedliche Maskendarstellungen und Zoomstufen parallel im Blick. Mehr dazu finden Sie im Kapitel „Nützliche Helfer“.


„Maske verbessern“ ist ein neuer Name für Funktionen, die Sie schon von der Auswahlfunktion „Kante verbessern“ kennen.

Wirklich neu sind die Funktionen des Dialogs nicht: Sie kennen sie bereits aus dem „Kante Verbessern“-Dialog der Auswahlwerkzeuge. Es ist jedoch ein absoluter Zugewinn, dass diese Einstellungen nun auch auf Masken angewendet werden können. Das Handling ist einfach und spart gegenüber den bisherigen manuellen Masken-Korrekturen viel Zeit. Und auch diese Einstellungen lassen sich jederzeit erneut aufrufen und ändern.

Das Wunderwerkzeug für komplizierte Masken: „Farbbereich „

Altgediente Photoshop Anwender sind über diese hymnische Überschrift sicherlich etwas verwundert: Schließlich ist der Dialog „Farbbereich“ schon seit gefühlten Ewigkeiten Teil des Photoshop-Funktionsumfanges (im „Auswahl“-Menü). Doch dank der seit CS4 neuen Optionen „Bereich“ und „Lokalisierte Farbgruppen“ und der Anwendbarkeit auf Masken bringt dieser „Oldie“ jetzt einen kräftigen Produktivitätsschub. Wer jemals mit komplizierten Freistellern oder dem alten, seit CS4 nicht mehr vorhanden,  „Extrahieren“-Filter gekämpft hat, wird die Kombination „Farbbereich“ plus Maske sehr zu schätzen wissen.

Zur Nachbearbeitung von Masken ist die „Farbbereich“-Funktion nicht so gut geeignet. Doch Sie können – ohne den Umweg über eine zuvor erstellte Auswahl – Masken erzeugen, die bestimmte Bildteile ausblenden. Welche Bildteile das sind, lässt sich dabei genau steuern. Im zweiten Teil dieses Beitrags erfahren Sie anhand eines handwerklich recht anspruchsvollen Motivs (dem oben abgebildeten Lockenschopf), wie das funktioniert.

Im nächsten Teil lesen Sie

Schritt für Schritt: Masken-Maßarbeit – ganz ohne Pinseln: Farbbereich plus Maske

(mm), ™

Kategorien
Fotografie Inspiration Tutorials

Gimp-Tutorial (1): Schwarzweiß-Bilder bearbeiten

Jürgen Wolf

Das Thema Schwarzweiß ist auch in der digitalen Bildbearbeitung und im Webdesign sehr wichtig. Immer mehr Fotografen und Webdesigner verwenden Schwarzweißbilder als Stilmittel. Gerade bei Akt- und Porträtfotos, aber auch in der Produkt- und Architektur-Fotografie werden Schwarzweißbilder immer beliebter, weil hier Kontraste – genauer: Spitzlichter – stärker betont werden können, was interessante künstlerische Möglichkeiten bietet. Die Inhalte der folgenden Tutorial-Reihe sind ein Beitrag des Galileo-Verlags, in dem das Buch „Gimp 2.6“ von Jürgen Wolf erschienen ist.

Was bedeutet Schwarzweiß genau?

Schwarzweißbilder werden in der Fotografie häufig falsch verstanden. Wenn die Rede von der Schwarzweißfotografie ist, bedeutet dies, dass es sich um eine visuelle Darstellung von Bildern ohne Verwendung von Farben handelt. Stattdessen umfasst sie die Grauwerte. Genau genommen müsste man von Graustufenbildern sprechen.


Foto: Ingo Jung

Ein solches Schwarzweißbild ist nicht nur schwarz und weiß, sondern besteht aus vielen verschiedenen Grautönen.

Schwarzweiß aus der Kamera

Mittlerweile bieten auch die meisten Digitalkameras an, Bilder im Schwarzweißmodus zu fotografieren, um sich so eine nachträglich Konvertierung am Rechner zu sparen. Ich möchte Ihnen davon eher abraten, weil die Möglichkeiten der digitalen Kamera doch noch beschränkt sind. Mit dem Rechner können Sie mehr herausholen. Nehmen Sie daher Ihre Bilder nach wie vor in Farbe auf, und erledigen Sie die Schwarzweißarbeiten nachträglich am Rechner.

So kommen die Bilder in die Kamera

Wenn Sie bei Ihrer Kamera den Auslöser gedrückt haben, nimmt der Kamerasensor ein Graustufenfoto auf. Die Farben entstehen erst im Chip der Kamera, wo jedem Pixel, neben der Rohdatenspeicherung, drei Farbwerte in den Grundfarben Rot, Grün und Blau hinzugefügt werden. 50 % der Pixel sind Grün, und die restlichen 50 % teilen sich auf Rot und Blau auf. Fehlende Informationen werden von der Kamera berechnet. So gesehen und einfach ausgedrückt, werden digitale Bilder in der Kamera aus drei unterschiedlichen Graustufenbildern erstellt.

So entstehen Farbbilder in der Kamera

Aus den drei Graustufenbildern links mit dem roten, grünen und blauen Kanal wird das Ergebnis rechts erstellt, so wie Sie es gewöhnlich als Benutzer der Kamera zu Gesicht bekommen.

Schwarzweißbilder mit GIMP erzeugen

Um Schwarzweißbilder mit GIMP zu erzeugen, stehen Ihnen mehrere Möglichkeiten zur Verfügung. Welche Methode besser geeignet ist und welche eher nicht, wird in den folgenden Abschnitten erläutert.

Entsättigen = Graustufenbild?

Nur weil Sie die Farben aus dem Bild entfernen, heißt dies nicht, dass Sie automatisch ein Bild im Graustufen-Modus erzeugen. Nach dem Entsättigen stehen nach wie vor die drei Kanäle Rot, Grün und Blau zur Verfügung, und das Bild kann somit jederzeit wieder nachträglich eingefärbt werden. Voraussetzung für das Kommando Entsättigen ist außerdem, dass das Bild im RGB-Farbmodell vorliegt.

Der schnellste Weg, ein Bild, die aktive Ebene oder eine Auswahl dass Sie automatisch ein Bild im in Graustufen umzuwandeln, führt über das Kommando Farben – Entsättigen. Nach dem Entsättigen stehen mit Helligkeit, Leuchtkraft und Durchschnitt drei Modi zur Verfügung.

Alle drei Modi unterscheiden sich durch ihre mathematische Formel, nach der die Farben entzogen werden. Auf die Formeln soll hier aber nicht näher eingegangen werden. Wenn Sie das Häkchen vor Vorschau gesetzt haben, können Sie die Wirkung des entsprechenden Modus auch gleich im Bild betrachten.

Den Befehl „Entsättigen“ finden Sie im Dialog „Farbe entfernen“.

Außer den verschiedenen Modi bietet diese Methode keine weiteren Einstellungen, hat aber im Gegensatz zum echten Graustufenmodus den Vorteil, dass die Bilder nach wie vor im RGB-Modus vorliegen und weiter eingefärbt werden können.

Das Ausgangsbild  – Foto: Brigitte Bolliger

Entsättigen mit dem Modus Helligkeit

Entsättigen nach dem Modus Leuchtkraft

Entsättigen nach dem Modus Durchschnitt

Graustufenmodus

Eine weitere Möglichkeit, ein Bild in ein Schwarzweißbild umzuwandeln, ist die Konvertierung des Modus RGB in Graustufen (Menübefehl: Bild – Modus – Graustufen). Allerdings werden in diesem Modus alle nötigen Farbinformationen verworfen. Statt drei RGB-Kanäle gibt es nur noch einen Graustufenkanal. Somit haben Sie keine Möglichkeit mehr, eine Farbe hinzuzufügen.

Außerdem arbeiten viele Funktionen nicht mit dem Graustufenmodus und sind daher ausgegraut. Der einzige sinnvolle Grund, ein Bild in den Graustufenmodus zu konvertieren, ist der, dass Sie dabei Speicherplatz sparen, da die Bilder nun weniger Informationen speichern müssen. Tests haben gezeigt, dass Bilder im Graustufenmodus durchschnittlich nur ein Drittel an Speicherplatz im Vergleich zu Bildern im RGB-Modus benötigen. Allerdings ist Speicherplatz heutzutage billiger denn je zuvor.

Die ungünstigste Möglichkeit, ein Bild in Schwarzweiß zu konvertieren, dürfte das Ändern des Modus von RGB nach Graustufen sein.

Farben zum Teil erhalten

Wenn Sie Bilder nur teilweise entsättigen wollen, bietet Ihnen der Dialog Farbton/Sättigung das ideale Werkzeug dafür. Allerdings ist es nicht immer so simpel, dass es reicht, nur den Schieberegler Sättigung der entsprechenden Farbe nach links zu ziehen. Gelegentlich werden Sie eine Auswahl erstellen müssen, um einen bestimmten Bereich zu schützen.

Im nächsten Teil des Tutorials lesen Sie:

Farben bei komplexeren Bildern erhalten

(mm),