Icons für die multiple Seitendarstellung

Man begegnet nahezu auf jeder Website, die mehrere Seiten als Suchergebnis anzeigt oder eingesetzt als einfache Navigationshilfe zwischen vielen Seiten der selben Kategorie wie zum Beispiel Pics gallery. Einige dieser kleiner Grafiken sind gelungen, andere weniger, aber man sieht: für das gleiche Problem gibt es viele Lösungen. Oder denkt man das nur im ersten Augenblick und dahinter steckt ein inzwischen traditionelles System?

Eine sehr schöne, rein typografische Lösung der nachtagenten, man sieht viele Informationen auf engstem Raum: Anzahl der angezeigten Fotos auf einer Seite, Zahl der Fotos insgesamt, Auf welcher Seite befinde ich mich und Navigation zur nächsten Seite:
Anzeige vor zurück

Der Klassiker, der schon sehr altmodisch aussieht bei ebay. Vielleicht ist die Angabe „Seite 1 von 3“ hilfreicher, jedoch stört die überflüssige, deaktivierte Taste „Zurück“ – sie sollte lieber nur dann auftauchen, wenn sie benötigt wird:

ebay Seitenanzeiger

Sehr praktisch bei sehr vielen Seiten und gut für die Usability:
ebay Seitensprung

Amazon besticht mit einer sehr einfachen und übersichtlichen Lösung, die Anzahl der Websites und die Anzahl der dargestellten Produkte sieht man auf einen Blick:
Icons mehrere Seiten amazon

Bei Otto scheint die Seitenangabe viel zu unruhig und überlastet zu sein:Icons mehrere Seiten Otto

Bei Neckermann hingegen sehen die Tasten für nächste und vorhergehende Seite unlogisch aus – es müssten ein einfache s > oder < dafür stehen:
Icons mehrere Seiten Neckermann

Auf den Seiten von Quelle weiss man nicht so genau wie viele Seiten einen noch erwarten:
Seitennavigation Quelle
Ungünstig weit entfernt von der Navigation findet man die ausführliche, aber auch sehr platzraubende Gesamtseitenangabe:
Anzahl der Seiten bei Quelle

Icons Übersicht:

Icon Seitenanzahl Übersicht

popup mit ausgeschaltetem Javasript (Tutorial & Download html Dateien)

Popups wie die User beim täglichen Browsen erleben, können unglaublich nerven. Doch was ist, wenn diese aufspringenden Fenster nicht automatisch, sondern durch das bewusste Handeln der Benutzer ausgelöst wird? Und dann in diesem Popup eine Illustration, grössere Grafik, Foto, PDF oder einfach nur erklärender Text angezeigt wird? Dann wir dieses Popup zu einem wichtigen Bestandteil vom Webdesign und ist sogar sehr gut für die Usability.
Hier ist eine sehr einfache Lösung für ein passives popup (User muss ein Link anklicken, damit ein popup-Fenster aufspringt):

<a target=“popup“ onclick=“window.open (“, ‚popup‘, ‚width=780,height=400,scrollbars=no, toolbar=no,status=no, resizable=no,menubar=no,location=no,directories=no,top=10,left=10‘) “ xhref=bild_popup.jpg“>

popup ohne javascript Falls Sie Probleme beim Kopieren des Scriptes haben, hier ist ein Screenshot vom html Quellcode im Dreamweaver, zusätzlich können Sie weiter unten die funktionierenden Beispieldaten herunterladen.
Vorteil von diesem kleinem html-Script ist, dass auch beim deaktivierten Javascript ein neues, leeres Fenster mit der Popup-Grafik, Text, Foto usw. erscheint.

Die Höhe und die Breite des Popups können einfach über die Parameter „height“ und „width“ eingestellt werden.

Hier können Sie die Beispieldateien downloaden (2 html Seiten: Ausgangsseite und die Popup-Datei): popup.zip (4 KB)

Bookmarks zwischen mehreren Rechnern abgleichen

Die digitalen Nomaden von heute kennen das Problem: durch Computer-Hopping hat man nie seine bookmarks auf allen Rechnern auf dem aktuellsten Stand. Und gerade die, die man jetzt brauchen könnte sind natürlich in einem anderen Browser, einem anderen Betriebssystem, gefühlte Tausende von digitalen Meilen entfernt.

Natürlich könnte man sie bei del.icio.us online speichern, doch richtige Lesezeichen sind wesentlich schneller abrufbar. Nach langer Suche fand ich eine akzeptable Lösung für Firefox: die Extension „Bookmarks Synchronizer 3“ schafft es eine z.B. auf einem Server liegende xbel Datei immer bei Start und Beenden zu aktualisieren. Richtet man diese Erweiterung an allen Rechnern ein, ist das Problem unterschiedlicher Bookmarks endlich gelöst.

NEU: Diese Firefox Extension funktioniert auch mit FF 2: Bookmark Synchronizer Extension Firefox

Leider hat diese fantastische Erweiterung eine kleine Macke: nach einiger Zeit „hört der Browser auf“ die xbel Datei hoch- und downzuloaden. Folgende Lösung hilft:

1. Im Firefox in die Adressleiste „about:config“ eingeben und Enter drücken.

2. Im Filter „bookmarksftp.browsercount“ eingeben, doppelklicken und den Wert auf 0 setzen.

Jetzt wird die Lesezeichen Synchronisation wieder funktionieren, falls es nach einer Zeit lang gleiche Probleme auftauchen, einfach den Vorgang wiederholen

Fujifilm: Logo im Wandel von 72 Jahren

Fujifilm kommt ab 1. Oktober 2006 mit einem neuen Logo auf den Markt. Die Positionierung des Unternehmens hat sich besonders in den letzten Jahren mit Hinblick auf die technische Entwicklungen der Fotografie sehr stark verändert. Die Kernkompetenz bei photosensitiven Materialien wurde verteidigt und sogar ausgebaut.

Doch das ist nicht genug, die derzeitige Phase bezeichnet das Unternehmen als die „Zweite Gründung“: neue Geschäftsbereiche werden erschlossen (Medical Imaging, Life Science, Grafische Systeme, Dokumentenverwaltung, hochfunktionelle Materialien bsp. Beschichtungen für Flachbildschirme, elektronische Materialien und optische Systeme).

Kein Wunder, dass jetzt auch das Logo als ein Haupterkennungsmerkmal des Unternehmens erneuert wird.

Fuji Film Logos von 1934 bis 2006

Fuji Film Logos im Wandel der Zeit: Am Anfang noch mit dem meistfotografierten der Welt „Fuji“ 😉

Einen ausführlichen Artikel zum Thema gibt es auf dasauge.de.

Update: Hier ist der Link zum Artikel

Adobe bringt Flash Player 9 raus

Mit neuem konstenlosen Flash Player 9 versucht Adobe weiterhin einen technologischen Grundpfeiler für Web 2.0 aufzubauen. ECMAScript für XML, ActionScript Virtual Machine (AVM) und ActionScript in der Version 3 werden jetzt vom Player verstanden. Damit steht der Weg frei für die Nutzung der Rich-Internet-Applikationen, diese sollen dem User mehr Interaktionen und individueller Anpassungen bieten.

Parallel wurde die Flex Familie auf die Version 2 aktualisiert, die sozusagen die neuen Anwendungen erst ermöglichen wird. Denn Flash Player ist eigentlich nur ein „Fenster“ in die neue, interaktive Web 2.0 Welt. Zumindest aus der Sicht von Adobe, denn es gibt eine im Augenblick erfolgreichere Konkurrenz: AJAX (Asynchronous JavaScript and XML) 😉

Flex Anwendung
Sehr sehenswert die neuen Anwendungen (benötigen alle Flash 9 Plugin): Beispiele

Quark Dokumente ins Indesign importieren

Nach langem Suchen kam endlich (leider eine kostspielige) Lösung für das Problem Quark 6.5 Dateien ins Indesign CS2 zu importieren. Das Plugin für Indesign lässt sich problemlos installieren. Die Bedienung ist sehr einfach: über das Menü Öffnen kann Indesign „plötzlich“ auch neue Versionen der Quarkdokumente verstehen.

Eine 12-seitige Broschüre wurde zum größten Teil fehlerfrei konvertiert. Nur bei komplexen Tabellen gab es Ungenauigkeiten, aber es wurde auch vom Hersteller darauf hingewiesen, dass keine Konvertierung perfekt sein wird. Auf jeden Fall eine vernünftige Möglichkeit aufs Indesign umzusteigen. Wenn viele Produktionen weitergeführt werden sollen, lohnt sich die Investition von 199,- Euro auf jeden Fall. Markzware

Visualisierung der html-Struktur

Im Aharef Blog gibt es ein Tool zur Visualisierung der html-Struktur einer Webseite. Mit Hilfe vom Java-Applet können beliebige Internetseiten (einfach URL eingeben) „durchleuchtet“ und als grafische Dokumentenstruktur dargestellt werden. Fast könnte man sagen, es enstehen DNA oder Fingerabdrücke der Internetauftritte. Denn auch die Verschachtelung der Gestaltungselemente ist sehr individuell und variiert stark vom Fall zu Fall (zum Beispiel google vs. cnn.com)
blau: Links, grün: divs, gelb: Formulare

html Struktur design-literatur.de

tag-Struktur der index.html Datei von blog.design-literatur.de

Strukturen der verlinkten html Seiten.

CSS Cursor verändern

Bewege die Maus über die untenstehenden Namen, die auch gleichzeitig die Namen der zu verwendeten Parametern sind. Beispiel für das Einbinden in CSS: <span style=“cursor:e-resize“>

Auto

Crosshair

Default

Pointer

Move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help