Definition

Die transform-Eigenschaft ist eigentlich recht simpel:

<transform> =
none|<transform-function>[ <transform-function>]*

Der Standardwert ist schlicht none, es wird also keine Transformation durchgeführt. Alternativ kann eine einzelne oder eine Folge von beliebig vielen Transformationsfunktionen angegeben werden, die entsprechend ihrer Reihenfolge durchgeführt werden.

Zusätzlich existiert eine zweite Eigenschaft namens transform-origin. Sie definiert, wo der Ursprung des zu transformierenden Objektes liegt. Dies ist beispielsweise bei Rotationen interessant, da es einen Unterschied macht, ob ich ein Objekt um sich selbst (Ursprung = der eigene Mittelpunkt) drehe, oder es auf die Umlaufbahn um ein anderes Objekt schicke (Ursprung = Mittelpunkt der Umlaufbahn). Unverständlich? Dann hilft ein Blick auf das Beispiel zur Rotation und das anschließende Beispiel zum versetzten Ursprung.

Standardmäßig ist der Ursprung immer der Mittelpunkt des zu transformierenden Objektes. transform-origin ist wie folgt definiert:

<transform-origin>=
[[<percentage>|<length>|left|center|right] [<percentage>|<length>|top|center|bottom]?] |
[[left|center|right] || [top|center|bottom]]

Der Ursprung kann also aus einer Prozent/Länge/Keyword-Kombination definiert werden, z.B. 50% 50% für den Mittelpunkt, 0 0 für die linke, obere Ecke oder right bottom für die untere, rechte Ecke. Wird nur ein Wert angegeben, wird der zweite Wert als center angenommen. Der erste Wert steht jeweils für die horizontale und der zweite Wert für die vertikale Richtung, wobei bei Verwendung von zwei Keywords die Reihenfolge auch geändert werden kann, da sich die Ausrichtung dann aus den Keywords ergibt.

Funktionen und Parameter

Wie zuvor erwähnt, erhält die transform-Eigenschaft nicht einfach nur ein paar Parameter, sondern verschiedene Funktionen, die der Reihe nach abgearbeitet werden. In diesem Abschnitt werde ich die matrix-Funktion genauer erläutern und auf die weiteren kurz eingehen. Die anschließende Sektion Beispiele zeigt die einzelnen Funktionen dann im Einsatz.

matrix(<number>,<number>,<number>,<number>,<number>,<number>)

matrix ist sozusagen die Mutter aller Transformationsfunktionen. Mit ihr lassen sich alle folgenden Funktionen und deren Kombinationen in einer einzelnen Funktion abbilden. Das ist nicht so intuitiv und lesbar, wie es die Verwendung der anderen Funktionen wäre, kann aber gerade bei komplexen Funktionsfolgen deutlich kürzer und bei dynamischen Variationen (z.B. via JavaScript) praktischer sein. Wem die Matrixschreibweise zu kompliziert ist, der kann auch direkt zu den anderen Funktionen springen. Ich bemühe mich, alles einigermaßen verständlich zu erklären, auch wenn dabei möglicherweise die mathematische Genauigkeit ein wenig verloren geht. Anschließend gibt es aber noch ein paar Links zur Vertiefung im Detail

Alle Transformationen können mit einer 3×3-Matrix dargestellt werden, wie in der rechten Abbildung zu sehen ist. Da die letzte Zeile konstant ist, müssen wir der Matrixfunktion nur 6 Parameter übergeben: matrix(a,b,c,d,e,f). Eine solche Matrix definiert den Unterschied von einem neuen Koordinatensystem zum ursprünglichen Koordinatensystem. Unser Objekt wird also in ein neues Koordinatensystem übertragen. Die einfachste Abbildung ist diejenige, die nichts verändert: matrix(1,0,0,1,0,0). e und f ermöglichen es uns, unser Objekt zu verschieben (Translation). Setzen wir z.B. jeweils 10px ein, dann verschieben wir das Objekt 10 Pixel nach rechts und 10 Pixel nach unten, ändern es aber sonst nicht: matrix(1,0,0,1,10px,10px). Für die anderen Transformationen sieht es so aus:

• Scaling via Matrix: matrix(x,0,0,y,0,0)
  Mit x definieren wir die Skalierung in der x-Achse (Breite) und mit y in der y-Achse (Höhe). Setzen wir x z.B. auf 2, dann verdoppeln wir die Breite, setzen wir y auf 0.5, dann halbieren wir die Höhe.
• Rotation via Matrix: matrix(cos(x), sin(x), -sin(x), cos(x), 0, 0)
  Hier entspricht x dem Winkel der Rotation. Wollen wir unser Objekt um den Winkel x=90° drehen, dann wäre der Funktionsaufruf matrix(0,1,-1,0,0,0).
• Skew X via Matrix: matrix(1, 0, tan(x), 1, 0, 0)
  Skew Y via Matrix: matrix(1, tan(x), 0, 1, 0, 0)
  Auch beim Scheren brauchen wir einen Winkel. Dieser beschreibt, wie sich die zu verändernde Achse im Verhältnis zur anderen Achse bewegen soll. Daher auch der Begriff “scheren”: wir klappen die Achsen des Koordinatensystems wie eine Schere zusammen bzw. auseinander. Wollen wir um 45° längs der x-Achse scheren, dann wäre der Aufruf matrix(1, 0, 1, 1, 0, 0), d.h. wir drehen die x-Achse um 45° auf die y-Achse zu.

Wollen wir mehrere Transformationen hintereinander mit einer Matrix ausführen, dann müssen wir die Matrizen miteinander multiplizieren. Die Ergebnismatrix ist dann sozusagen unser all-inclusive-Paket, wie man beim Beispiel zur Kombination von Funktionen sehen kann. Um diesen Schritt etwas zu vereinfachen, habe ich einen CSS3 transform Matrizenrechner zusammengebaut. Damit könnt ihr Transformationsmatrizen miteinander multiplizieren, einzelne Funktionen auf eure Matrix anwenden, ein Beispiel ansehen (sofern es in das Sichtfeld passt ) und auch die Rechenschritte beim Multiplizieren der Matrizen nachvollziehen.

Hier noch ein paar weiterführende Links, bevor wir uns den einfacheren Alias-Funktionen zuwenden:

• Definition der Transformationsmatrix beim W3C
• Wikipedia: Lineare Transformationen
• Wikipedia: Matrizenmultiplikation

translate(<translation-value>[,<translation-value>])

Translate verschiebt das Objekt entsprechend des angegebenen Längenwertes (z.B. 10px). Der erste Wert bezieht sich auf die x-Achse (horizontal), der zweite Wert auf die y-Achse (vertikal). Wird der zweite Wert nicht angegeben, wird 0 angenommen. Alternativ kann mit translateX(<translation-value>) bzw. translateY(<translation-value>) direkt ein Wert für Verschiebung auf der x- bzw. y-Achse angegeben werden. (Somit sind translate(<translation-value>) und translateX(<translation-value>) synonym.) [Beispiel]

scale(<number>[,<number>])

Skaliert das Objekt um den numerischen Wert, also z.B. 2 für die doppelte und 0.5 für die halbe Größe. Der erste Wert bezieht sich auf die x-Achse (horizontal), der zweite auf die y-Achse (vertikal). Wird nur der erste Parameter angegeben, wird der Wert für beide Achsen verwendet. Alternativ kann mit scaleX(<number>) oder scaleY(<number>) eine Achse auch direkt verändert werden. [Beispiel]

rotate(<angle>)

Dreht das Objekt gemäß dem angegebenen Winkel um den Ursprung. Winkel werden als Zahl + deg geschrieben, also wäre der Parameter 90deg für eine Rotation um 90°. [Beispiel]

skew(<angle>[,<angle>])

Schert das Objekt. Auch hier sind Winkelangaben (Zahl + deg, also z.B. 90deg für 90°) notwendig. Der erste Wert steht für die Scherung zur x-Achse, der zweite Wert für die Scherung zur y-Achse. Wird nur der erste Wert angegeben, wird für die y-Achse 0° (= keine Änderung) angenommen. Alternativ gibt es skewX(<angle>) bzw. skewY(<angle>), um gezielt eine Achse anzusprechen. [Beispiel]

Solange sich die Eigenschaft noch in Entwicklung befindet, verwenden Webkit- und Mozilla-Browser ein Präfix. Möchte man sie bereits verwenden, muss sie daher mehrfach mit gleichen Parametern definiert werden: transform[-origin] (Opera), -moz-transform[-origin] (Mozilla) und -webkit-transform[-origin] (Webkit).

Beispiele

Die folgenden Beispiele werden an einem 50% transparenten, gelben DIV-Element mit rotem Rahmen gezeigt. Im Zentrum des DIV-Elements steht zudem der einfache Text CSS3. Zum besseren Verständnis befindet sich im Hintergrund ein Koordinatensystem, dass zusätzlich durch einen schwarzen Rahmen die Ursprungsform des DIV-Elements zeigt. So sieht das ganze ohne Transformationen aus (der schwarze Ursprungsrahmen ist hier natürlich nicht zu sehen):

Für eigene Experimente eignet sich der CSS3 transform Matrizenrechner.

1. Translation

Bei der Translation handelt es sich um die einfachste Form der Transformation. Das Objekt wird einfach innerhalb des Koordinatensystems verschoben. Eine Translation kann folgendermaßen definiert werden:

2. Rotation

Bei einer Rotation wird das Objekt einem Winkel entsprechend um den Ursprung gedreht. Per Default liegt der Ursprung in der Mitte des Objektes:

3. Ursprung

Am Beispiel der Rotation kann die Eigenschaft transform-origin schön demonstriert werden. Eigentlich gilt der Mittelpunkt des Objektes als Ursprung, aber mit transform-origin kann er beliebig verschoben werden. Das folgende Beispiel zeigt rotate mit den gleichen Parametern, wie sie in Beispiel 2 gesetzt waren, verschiebt aber den Ursprung von der Mitte in die linke, obere Ecke des Objektes:

4. Scaling

Scaling ermöglicht es uns, unser Objekt in die x- bzw. y-Richtung zu skalieren, also zu verkleinern oder zu vergößern. Im Beispiel wird die Höhe halbiert und die Breite verdoppelt:

5. Skew

Mit Skew können wir unser Objekt längs seiner x- bzw. y-Achse scheren. Im Beispiel wird um 45° längs der y-Achse verzerrt:

6. Kombinationen

Natürlich können wir die einzelnen Funktionen auch kombinieren – entweder in einer Matrix, oder eben durch Hintereinanderausführen der Funktionen:

Weitere Artikel zum Thema:

• CSS3: color (Farben) mit Farbtabellen (0)
• CSS3: box-shadow (Schatten) (0)
• CSS3: border-radius (abgerundete Ecken) (1)
• Mal kurz rundgeschaut… #24 (0)
• Mal kurz rundgeschaut… #23 (0)

Definition

Schauen wir uns zunächst wieder die Definition an:

<border-radius> =
[<length>|<percentage>]{1,4}
[/[<length>|<percentage>]{1,4}]?

Das bedeutet, dass die Eigenschaft 1-4 Parameter erhält und optional nochmal zusätzlich weitere 1-4 Parameter, die mit einem Schrägstrich (/) von den vorhergehenden Werten abgetrennt werden. Bei den einzelnen Werten handelt es sich entweder um Längenangaben oder um Prozentwerte, die in Relation zur gesamten Box stehen.

Alternativ können die einzelnen Ecken auch gezielt angesteuert werden, was etwas umständlicher, aber dafür leichter zu überblicken ist:

<border-[top-right|bottom-right|bottom-left|top-left]-radius> =
[<length>|<percentage>] [<length>|<percentage>]?

Hier bekommen also die Eigenschaften border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius einen Parameter (Länge oder Prozent) und optional einen weiteren Wert, der durch ein Leerzeichen abgetrennt wird.

border-radius ist natürlich immer vom bestehenden border abhängig. Ohne Rahmen gibt es auch keine runden Ecken

Parameter

Schauen wir uns nun an, wozu diese ganzen Parameter gut sein sollen. Sprechen wir eine Ecke direkt an, dann steht der erste Wert für den horizontalen (h) und der optionale zweite Wert für den vertikalen (v) Radius einer Ellipse (siehe Grafik links), die die Form der abgerundeten Ecke beschreibt. Ist kein zweiter Wert angegeben, dann entspricht der erste Wert dem Radius (h = v) des Kreises, der die Form beschreibt.

Etwas komplizierter wird es, wenn wir border-radius verwenden. Vor dem Schrägstrich (/) stehen die horizontalen Werte, dahinter die vertikalen Werte, dementsprechend reden wir wieder von einem Kreis (h=v), wenn der optionale Part (/ + Werte) weggelassen wird. Auf welche Ecken sich die Werte beziehen, hängt nun von deren Anzahl ab. Hier die Übersicht:

• 1 Wert: gilt für alle Ecken
• 2 Werte: (top-left & bottom-right) (top-right & bottom-left)
• 3 Werte: top-left (top-right & bottom-left) bottom-right
• 4 Werte: top-left top-right bottom-right bottom-left

Es ist durchaus möglich, für den horizontalen und den vertikalen Radius jeweils eine andere Anzahl Werte zu setzen, also z.B. ein Einheitswert horizontal und vier Einzelwerte vertikal. 0 steht immer für keine Rundung.

Solange sich die Eigenschaft noch in Entwicklung befindet, verwenden Webkit- und Mozilla-Browser ein Präfix. Möchte man sie bereits verwenden, muss sie daher mehrfach mit gleichen Parametern definiert werden: border-radius (Opera), -moz-border-radius (Mozilla) und -webkit-border-radius (Webkit).

Beispiele

Die folgenden Beispiele sollten das Prinzip verdeutlichen. Sofern Dein Browser bereits border-radius unterstützt, kannst Du den Effekt in der jeweiligen Box Live-Demo ansehen. Ansonsten sollten normale Boxen erscheinen.

1. Gleichmäßige Rundung

2. Elliptische Rundungen

3. Variierende Ecken

6. Prozentangaben

5. Variierende Rahmendicke

Interessant ist zu sehen, wenn sauber die “runden Ecken” gerendert werden, wenn die Rahmendicke variiert. Das padding dient in dem Beispiel dazu, dass der Inhalt nicht in den Rahmen läuft.

6. Rahmen dicker als Radius

Ist der Rahmen dicker als der Radius, dann bleibt die Ecke auf der Innenseite eckig:

Weitere Artikel zum Thema:

• Mal kurz rundgeschaut… #17 (0)
• CSS3: transform (Lineare Transformationen) (0)
• CSS3: color (Farben) mit Farbtabellen (0)
• CSS3: box-shadow (Schatten) (0)
• Mal kurz rundgeschaut… #24 (0)

Piwik ist eine wunderbare Alternative zu Google Analytics, insbesondere da es die Auswertung der Statistiken auf dem eigenen System erlaubt, d.h. man muss die Informationen über seine Nutzer nicht an Google weiterleiten. Außerdem hat man volle Kontrolle darüber, was gespeichert wird, und kann sich so an die Anforderungen der Datenschützer halten. Daher war es natürlich schon ein wenig kurios, dass die Graphen in WP-Piwik bisher von der Google Chart API erzeugt wurden. Zwar wurden dadurch natürlich keine Nutzerdetails weitergegeben, aber zumindest die eigenen Statistiken hat man Google wieder auf dem Silbertablett präsentiert. Da WP-Piwik mittlerweile auch von bloggenden Unternehmen eingesetzt wird, war dies eine nicht zu unterschätzende Schwachstelle.

In vorherigen Versionen habe ich deshalb die Möglichkeit angeboten, die Anzeige der Charts zu deaktivieren. Das löst zwar das Problem, aber natürlich auf eine unschöne Weise, denn Statistiken ohne hübsche Graphen sind natürlich auch nicht das Gelbe vom Ei.

Mit der neuen Version 0.8.0 habe ich aber endlich die Google Chart API entfernt und durch jqPlot ersetzt. Die Open-Source JavaScript-Bibliothek von Chris Leonello baut auf dem eh in WordPress enthaltenen jQuery auf und ermöglicht so brauchbare Graphen ohne unnötigen Ballast. Für die Nutzer bedeutet dies vor allen Dingen, dass die Graphen lokal erzeugt werden, d.h. es müssen keine Daten mehr an einen Drittdienst versendet werden.

Ich hoffe, dass die neuen Graphen gut ankommen. Feedback, egal ob Lob, Kritik oder Bugmeldung, einfach in die Kommentare schreiben. Danke!

Detailinformationen zum Plugin – Download im WordPress Plugin-Verzeichnis

Weitere Artikel zum Thema:

• WP-Piwik – WPMU-Piwik (49)
• Umstieg auf WordPress 3.0 (0)
• Neues WordPress-Plugin: WP-Piwik (15)
• Mein erstes WP-Plugin: Inofficial Bee5 API (0)
• Mal kurz rundgeschaut… #23 (0)

Bisher wurden Farben entweder über die HTML4-Keywords, die SVG- bzw. X11-Keywords oder als hexadezimale RGB-Angaben definiert. Während die möglichen Farben via Keyword natürlich recht begrenzt sind, ist die hexadezimale RGB-Angabe (z.B. #FF0000 oder #F00 als Kurzfrom für rot) kaum intuitiv. Zunächst muss das richtige Mischverhältnis von rot, grün und blau gefunden werden, danach müssen die Werte noch in hexadezimale Werte umgerechnet werden. Dank CSS3 wird dies aber alles einfacher. Die hier vorgestellten Methoden zur Farbdefinition werden, abgesehen von Einschränkungen beim IE, bereits von allen modernen Browsern unterstützt.

RGB: Angabe in Dezimalzahlen und Prozent

Wie bereits erwähnt, mussten Farben bisher in hexadezimalen Werten angegeben werden. Mit der rgb-Funktion können Farben nun aber auch über eine Ganzzahl von 0-255 oder eine Prozentangabe von 0-100 definiert werden. Somit hätten wir nun folgende Möglichkeiten, die Farbe gelb darzustellen:

Das Ergebnis ist jeweils gleich (hier im Beispiel mit background-color):

HSL: Hue (Farbton), Saturation (Sättigung), Luminance (Helligkeit)

Deutlich intuitiver als die Angabe von Farben im RGB-Format ist die HSL-Variante. Dabei wird die Farbe über die drei Werte Farbton, Sättigung und Helligkeit definiert. Unter Farbton versteht man die Auswahl der Farbe aus einem Farbkreis durch die Angabe eines Wertes in Grad (°) von 0-359. Die folgende Skala zeigt die Verteilung der Farbtöne:

Bildquelle: Wikipedia; gemeinfrei.

Wie es sich für einen Kreis “gehört” entspricht also der Wert 360 dem Wert 0 (=rot). Gelb liegt bei 60°, grün bei 120° und blau bei 240°. Somit kann recht leicht ein Farbton ausgewählt werden, die Angabe erfolgt ohne Einheit. Nun kann die Farbe mit den Angaben für Sättigung und Helligkeit weiter variiert werden. Beide Werte werden in Prozent von 0-100 angegeben. Eine Sättigung von 100% zeigt die gewünschte Farbe wie im Farbkreis gezeigt. Wird sie hingegen auf 0% gesenkt, dann erhält man nur noch grau. Die Helligkeit entspricht mit 50% der normalen Helligkeit der Farbe, 0% führt zu schwarz, 100% zu weiß. Mit folgender Demo kann der Effekt der einzelnen Werte ausprobiert werden:

Beispiele
Hier als Beispiele einmal die Farben des Farbkreises in 30°-Schritten (100% Sätting, 50% Helligkeit):

Alphatransparenz

Ein ganz besonderes Schmankerl der neuen Farbfunktionen ist die direkte Unterstützung von Alphatransparenz, die bisher nur mit Grafiken zu realisieren waren. Um eine transparente Farbe zu definieren, ersetzen wir rgb() durch rgba() bzw. hsl() durch hsla() und ergänzen einen vierten Parameter in Form des Alphawertes zwischen 0 und 1. Wird 1 angegeben, dann ist die Farbe “massiv”, also gar nicht transparent, bei einer 0 wird die Farbe vollständig transparent, also unsichtbar. Rot mit 50% transparenz würde also so aussehen:

Im folgenden Beispiel lege ich DIVs mit obigen Angaben als background-color über das gezeigte Bild der Farbskala:

HTML4-Farben

Hier eine Liste der in HTML4 vordefinierten Farben:

X11-Farben (SVG)

Abschließend die definierten X11-Farben:

Weitere Artikel zum Thema:

• HTML5 und CSS3 (0)
• Mal kurz rundgeschaut… #23 (0)
• Mal kurz rundgeschaut… #19 (1)
• CSS3: transform (Lineare Transformationen) (0)
• CSS3: box-shadow (Schatten) (0)

Definition

Definiert ist die Eigenschaft folgendermaßen:

<shadow> = inset? && [<length>{2,4} && <color>?]

Das bedeutet, dass man optional inset für einen inneren Schatten angegeben kann, 2 bis 4 Längenangaben notwendig sind und wiederum optional eine Farbe definiert werden kann. Bei den Längenangaben kann es sich um positive und teils auch um negative Werte handeln, die Farbe kann natürlich neben dem klassischen Hex-Code bzw. den vordefinierten Konstanten auch mit den neuen Farbmöglichkeiten von CSS3 angegeben werden.

Parameter

Schauen wir uns zunächst die einzelnen Parameter und deren Bedeutung im Detail an:

• Länge 1: Horizontaler Versatz des Schattens. Ein positiver Wert zeichnet den Schatten nach rechts, ein negativer Wert nach links.
• Länge 2: Vertikaler Versatz des Schattens. Ein positiver Wert zeichnet den Schatten nach unten, ein negativer Wert nach oben.
• Länge 3 (optional): Laufweite des Weichzeichners. Hier sind nur positive Werte möglich.
• Länge 4 (optional): Aufsatz auf den Schatten. Ein positiver Wert erweitert den Schatten, ein negativer Wert zieht ihn zusammen.
• Farbe (optional): Die Farbe des Schattens.
• Inset (optional): Wird dieser Wert angegeben, dann handelt es sich um einen inneren Schatten.

Solange sich die Eigenschaft noch in Entwicklung befindet, verwenden Webkit- und Mozilla-Browser ein Präfix. Möchte man sie bereits verwenden, muss sie daher mehrfach mit gleichen Parametern definiert werden: box-shadow (Opera), -moz-box-shadow (Mozilla) und -webkit-box-shadow (Webkit).

Beispiele

Sofern Dein Browser box-shadow (ggf. mit Präfix) bereits unterstützt, kannst Du den Effekt jeweils in der Box Live-Demo sehen. Browser, die box-shadow noch nicht unterstützen, zeigen einfach nur die Box ohne Schatten.

1. Ganz einfacher Schatten:

2. Farbiger Schatten:

3. Weichzeichner:

4. Mit Aufsatz:

5. Mit Abzug:

6. Negativer Versatz:

7. Innerer Schatten:

8. Mehrere Schatten:
Es können auch mehrere Schatten definiert werden, wenn diese per Komma getrennt werden:

Weitere Artikel zum Thema:

• CSS3: transform (Lineare Transformationen) (0)
• CSS3: color (Farben) mit Farbtabellen (0)
• CSS3: border-radius (abgerundete Ecken) (1)
• Mal kurz rundgeschaut… #24 (0)
• Mal kurz rundgeschaut… #23 (0)

Hans-Jürgen Bucher. Ist das Internet “ready” für seine Nutzer? Online-Angebote zwischen Gebrauchstauglichkeit und Kommunikationsqualität. In: Jäckel, Michael; Haase, Frank (Hrsg.): In medias res: Herausforderung Informationsgesellschaft*, S. 81–116, 2005. (ISBN 3-935686-97-8)

Usability (Nutzerfreundlichkeit) ist per Norm ISO 9241-11 als Zweck-Mittel-Relation definiert. Es wird demnach gemessen, wie effektiv, effizient und (aus Anwendersicht) zufriedenstellend ein Werkzeug zur Erledigung der ihm bestimmten Aufgabe beiträgt. Diese Definition soll für die Beurteilung von Online-Angeboten um weitere Dimensionen ergänzt werden: Dimension des Gegenstandes (internetspezifische Kriterien), Handlungsdimension (Interaktivität von Internet-Angeboten), soziale Dimension (Online-Nutzung auch sozialer Kontakt mit nicht-anwesenden Partnern) und die kulturelle Dimension (interkulturelle Nutzung des globalen Internet).

Weiter nennt Bucher fünf onlinespezifische Kommunikationsprobleme: Orientierungsproblem (Aufbau und Struktur einer Webseite), Einstiegsproblem (Multifunktionalität der Homepage), Navigationsproblem (Gestaltung des Systems, Verlinkung, Sequenzierung), das Sequenzierungs- oder Einordnungsproblem (Berücksichtigung unterschiedlicher Voraussetzungen von Nutzern mit unterschiedlichen Herkunftsmodulen) und das Rahmungsproblem (klarer Aufbau, Gestalttheorie).

Möglichkeiten zur Messung verschiedener Nutzeraktivitäten gibt es zu genüge, beispielsweise Logfiles über den Aufruf, den Besuchspfad und das Verlassen eines Webangebots. Auch Mausbewegungen und Scrollverhalten können verfolgt und somit ausgewertet werden. Aber alle diese Verfahren erlauben nur einen recht einseitigen Blick auf das Nutzerverhalten und lassen kaum Schlüsse über die Intention seines Verhaltens zu. Deswegen müssen verschiedene Ansätze kombiniert werden, wie dies z.B. im Rahmen von Forschungsprojekten an der Universität Trier vorgenommen wird. Das Verhalten des Nutzers vor dem Bildschirm wird gefilmt, seine Bildschirmaktionen (Mausbewegungen, Scrolling, Texteingaben) werden ebenfalls gesichert und zusätzlich gibt der Nutzer selbst, während er verschiedene Aufgaben löst, sprechend Feedback über seine Eindrücke.

Bei allen Untersuchungen ist auffallend, dass die Nutzer die Interaktion mit dem System tatsächlich als solche bewerten, also als würden sie mit Menschen interagieren. Dies zeigen vor allem die sprachlichen Äußerungen wie “Da haben sie mich rausgekickt” oder “Die wollen mir doch jetzt keine Rechnung schicken?”

Letztlich bestätigten die Untersuchungen, dass Erwartungshaltungen der Nutzer gegenüber der Webseiten (z.B. Platzierung von Navigationselementen) bestehen, Irreführungen durch Nichtberücksichtung der Gestalttheorie nachweisbar sind, und ebenso, dass tatsächlich kulturelle Unterschiede bestehen. So sind westliche Nutzer mit chinesisches Portalen überfordert, während Chinesen solche Seiten zwar als übefüllt bewerten, sich aber dennoch gut drauf zurechtfinden können.

Der Text kann im Text-Archiv Medientheorie der Mediendaten Südwest als PDF heruntergeladen werden.

Weitere Artikel zum Thema:

• Eigenschaften von Hypertext aus textlinguistischer Sicht (1)
• Werbung: Eine textlinguistische Einstiegshilfe (0)
• Web-Entwicklung 3: Tabellen (HTML) (0)
• Mal kurz rundgeschaut… #20 (0)
• Web-Entwicklung 2: HTML (0)

Weitere Artikel zum Thema:

• Mal kurz rundgeschaut… #16 (0)
• Mal kurz rundgeschaut… #15 (0)
• WordPress: Empfehlungen auf der 404-Seite (0)
• The Real Life Social Network (0)
• Mal kurz rundgeschaut… #23 (0)

Das Google Watchblog fragt sich anhand dieser Präsentation, ob es ein klares Indiz dafür ist, dass der vermeintliche Facebook-Killer Google Me bereits seit Monaten in Entwicklung ist und kurz vor dem Start steht. Das ist natürlich alles möglich, jedoch ist die Präsentation nicht wirklich neu. Wie der Name bereits andeutet, ist The Real Life Social Network v2 die zweite Version der drei Monate alten Präsentation Bridging the gap between our online and offline social network. Was natürlich andererseits wieder belegen könnte, dass Google sich schon länger mit der Thematik beschäftigt.

Jetzt packen wir aber mal die Glaskugel weg, denn wir werden ja sehen, was bald passiert. Hier nun die Slides:

Weitere Artikel zum Thema:

• Fraunhofer-Studie: Social-Networking-Portale gefährden Privatsphäre (4)
• Nachtrag: Zunächst kein Google Street View in Schleswig-Holstein (0)
• Google Chrome und die schizophrene Gesellschaft (5)
• Wieso kryptische Passwörter sicherer sind (0)
• Warum die Piratenpartei nicht wählbar ist… (8)

Alle hier genannten Lösungen beziehen sich auf den “schweren Modus” der ursprünglichen Fassung, die mit der Lösung für die neue Version (ohne unterschiedliche Schwierigkeitsgrade) übereinstimmen sollten. Mein Top-Link für alle LucasArts-Adventures ist nach wie vor die Tentakelvilla, die unter diesem Link eine Komplettlösung anbietet. Alternativ könnt ihr euch bei Adventure Corner umsehen.

Aber viel wertvoller sollte mein Tipp sein: Gerade Spieler, die die Klassiker nicht kennen, verzweifeln gerne an den Rätsel. Solltet ihr mal absolut nicht weiterkommen, schlaft eine Nacht d’rüber! Schaut nicht in eine der Lösungen, sondern gönnt euch eine Pause und versucht es mit frischen Ideen erneut. Ich garantiere euch: Es lohnt sich! Die Spiele sind teilweise schwer, aber lösbar. Mit einer Lösung klaut ihr euch selbst den Spaß des “um-die-Ecke-Denkens”.

Wer nicht lesen mag, der kommt auch bei YouTube auf seine Kosten. Folgendes Video ist der Auftakt einer “Durchspielreihe”:

Teil 2 Teil 3 Teil 4 Teil 5 Teil 6 Teil 7 Teil 8 Teil 9 Teil 10 Teil 11 Teil 12 Teil 13 Teil 14 Teil 15 Teil 16

Jetzt aber viel Spaß beim Knobeln… und strengt euch an

Weitere Artikel zum Thema:

• Monkey Island: Guybrush kehrt zurück! (4)
• iPhone Apps und mehr (0)
• "iC64" – Apple lehnt mobilen Commodore ab (0)
• Mal kurz rundgeschaut… #13 (0)
• Killerspiele – Die unendliche Debatte (0)

Das Problem

Mein Fehler lag darin, dass ich vor lauter Wald die Bäume nicht mehr gesehen habe. Voller Begeisterung für die Positionierungsmöglichkeiten von CSS habe ich das Diagramm aus augenscheinlich zusammenhangslosen DIVs gebaut. Dabei bietet HTML doch durchaus sinnvolle Möglichkeiten zur sinnvollen Erfassung solcher Daten, die dann wiederum mit CSS auf den entsprechende Format gebracht werden können. Beispielsweise lassen sich die Daten in einer Tabelle erfassen, die für lesende Software nachvollziehbar sind, und die dann dank CSS optisch aufbereitet werden.

Ein Beispiel

Thomas verwies auf einen von ihm gebauten CSS-Graphen, der sehr eindrucksvoll die Möglichkeiten zur Formatierung einer korrekten Tabelle mit CSS präsentiert. Die Werte werden bei eingeschaltetem CSS in einem mehrdimensionalen Balkendiagramm dargestellt, wobei die Balken aus entsprechend verschobenen Grafiken bestehen. Solltet ihr an einer solchen komplexen Lösung interessiert sein, schaut mal in den kommentierten Quelltext. Schaltet man CSS aus, so bekommt man eine ganz normale Tabelle der gezeigten Werte zu Gesicht.

Das gestrige Beispiel mit TABLE

Die Verwendung einer TABLE hat nicht nur den Vorteil, dass die Daten auch ohne CSS interpretierbar sind, sondern auch, dass wir auf die ganzen Positionierungen verzichten können. Somit ist diese Variante nicht nur barrierefrei, sondern zudem auch deutlich einfacher. Zunächst zeige ich den allgemeinen CSS-Teil der Umsetzung:

Sieht schon deutlich einfacher aus, oder? Mit dem obigen Code ist schon alles vorbereitet. Nun müssen wir nur noch die Balken mit Farben (bzw. Hintergrundgrafik) und Länge definieren, wobei hier auch wieder 1 Pixel für 0,25 Prozent genommen wurde:

Bleibt jetzt noch die zugehörige Tabelle:

Zur Darstellung der Balken verwende ich einfach leere DIVs (ein Leerzeichen &nbsp; ist darin, um Warnungen des Validators zu umgehen), die dank CSS optisch gestaltet werden. Folgender Screenshot zeigt das Ergebnis:

Das Schöne ist, dass die ganze Sache auch deutlich kompakter wird. Inkl. Spritegrafik bringt diese Lösung (ohne Minimierung des Codes) weniger als 2 Kilobyte auf die Waage. Mit deaktiviertem CSS sieht es dann wie auf diesem Screenshot aus:

Daher nochmal vielen Dank an Thomas für den sinnvollen Hinweis in die richtige Richtung!

Weitere Artikel zum Thema:

• Balkendiagramme mit CSS (6)
• Mal kurz rundgeschaut… #23 (0)
• Mal kurz rundgeschaut… #19 (1)
• Little Boxes Teil 1 gratis (0)
• HTML5 und CSS3 (0)