Tag: webdesign

Mashi: JavaScript-Toolkit für Timeline-Animationen

Für linear ablaufende Animationen (etwa in Slideshows, Produkt-Präsentationen oder E-Learning-Anwendungen) im Web bietet sich neben Flash der Einsatz von JavaScript an. So können beispielsweise längere Texte in mehrere Bereiche aufgeteilt werden, die per Klick nacheinander angesehen werden können. Auch Geschichten lassen sich durch lineare Abläufe oder Bilderfolgen in HTML erzählen.
Ein aktuelles Toolkit, mit dem sich solche Anwendungen in JavaScript entwickeln lassen, stellt Mashi dar. Dieses Projekt von Uli Preuss und Alp Uçkan soll die Umsetzung von JavaScript-Animationen, die auf Zeitleisten (Timelines) basieren, vereinfachen.

Das Mashi-Toolkit steht als Paket zum Download bereit und kann sofort eingesetzt werden. Die Bibliothek kommt mit einem eigenen Namespace, so dass es auch in Kombination mit anderen Frameworks eingesetzt werden kann. Ein Mashi-Projekt unterliegt einer bestimmten Modul-Architektur, so dass die eigentliche Logik für die Animationen in einer separaten Datei ("app.js") platziert ist. Ein Beispiel:

• app.add(2000, function() {
• app.set({
• html: 'Ich bin ein Mashi-Projekt.',
• style: {
• backgroundColor: '#123456'
• }
• });
• });
•  
• app.add(1000, function() {
• …
• });

Die Einstellung "2000" in Zeile 1 bewirkt also, dass die zweite Funktion in Zeile 10 nach 2 Sekunden durchgeführt wird. So können sehr einfach sequentielle Präsentationen erstellt werden. In der Galerie finden sich erweiterte Beispiele und Infos gibt es in der Dokumentation.

JPEG Lossless Rotator: JPEG-Bilder verlustfrei drehen

Der Name ist Programm und verrät schon, worum es geht: Mit dem JPEG Lossless Rotator können vorhandene JPG-Grafiken verlustfrei rotiert werden. Dabei können Bilder um 90° nach rechts, nach links oder auch horizontal und vertikal gedreht werden. Die Software erlaubt es zudem, mehrere Dateien gleichzeitig zu markieren und zu rotieren.

Sicherlich ist eine derartige Funktionalität in etlichen Bildbetrachtern bereits integriert. Dennoch stellt die Anwendung eine unkomplizierte Lösung dar, vor allem wenn sehr viele Grafiken gedreht werden müssen. Zudem liegt eine portable Version des Programms vor, so dass keine Installation durchgeführt werden muss. Ein kleines Manko der Anwendung bzw. der verlustlosen JPG-Rotierung stellt der Punkt dar, dass die meisten Bilder in ihrer Höhe oder Breite um etwa 15 Pixel zugeschnitten (Crop) werden müssen.
Übrigens gibt es von dem Entwickler auch einen lobenswerten Farbwähler namens Just Color Picker, der vorher unter dem Namen "Anry Color Picker" geführt wurde.

ColorBlendy: Farben im Browser mischen

In Bildbearbeitungsprogrammen lassen sich über die "Blending Modes" mehrere Ebenen miteinander mischen. Dabei können verschiedene Methoden der Überblendung eingestellt werden (wie etwa "Überlagern", "Negativ multiplizieren" oder "Abdunkeln"). Je nach Modus entstehen unterschiedliche Belichtungen und Effekte.
Um mit Farben experimentieren zu können, bieten sich solche Überblendungen an. Ein Projekt, welches beim 10K Apart-Contest eingesandt wurde, bietet genau diese Möglichkeit: Mit ColorBlendy lassen sich 2 Farbwerte durch verschiedene Überblendungsmethoden mischen, so dass eine dritte Farbe entsteht.

Bei ColorBlendy müssen lediglich die beiden HEX-Codes der gewünschten Farbwerte eingegeben — anschließend können die Farben über 5 Methoden vermischt werden.
Der Entwickler, Andrey Petrov, hat die Überblendungen zudem nicht mit dem HTML5-Element "canvas", sondern mit JavaScript umgesetzt. Dadurch funktioniert das kleine Tool auch unter Internet Explorer.

Webdesign: Muster für interaktive Bedienelemente

Umfangreiche und anschauliche Bücher stellen neben Ressourcen aus dem Internet die beste Methode dar, um sich mit einem Thema vertraut zu machen. Ein schönes Werk zum Thema Web-Benutzeroberflächen stellt beispielsweise ein Buch vom O’Reilly-Verlag dar, in dem Prinzipien und Entwurfsmuster für interaktive Web-Auftritte behandelt werden. Passend zum Buch gibt es eine Website, auf der sich die Inhalte des Buches in einer kurzen Übersicht betrachten lassen. Weiterhin finden sich auf der Seite aber auch interessante Blog-Artikel: In diesem Beitrag werden 12 Beispiele zu bekannten Bedienelementen vorgestellt und beschrieben.

Dabei geht es also hauptsächlich um die Gestaltung und Darstellung von Spalten, Tabellen, Suchergebnissen, Formularen, Paletten oder sonstigen Anwendungsbereichen. In dem Beitrag finden sich zu jedem Entwurfsmuster verschiedene Screenshots von vorbildlichen Beispielen.
Weiterhin gibt es in dem Blog schöne Beiträge über Web-Komponenten oder interaktive Steuerelemente von Websites. Einen guten Artikel über die zukünftige Welt des User Interface Designs gab es übrigens im Februar bei WebDesignerWall.

Grid Designer 2: Raster und Typografie erstellen

Online-Portale und inhaltsstarke Websites benötigen ein durchdachtes Raster, um viele Inhalte unterbringen und ansprechend darstellen zu können. Für die Erstellung eines CSS-Rasters bieten sich etliche Werkzeuge an, die online abgerufen werden können (siehe Liste). Ein aktuelles Projekt, um entsprechende Raster und auch gleich die dazugehörigen Typografie-Einstellungen zu erzeugen, stellt der Grid Designer 2 von Rasmus Schultz dar. Hier können wie gewohnt die Anzahl und Größen der Spalten festgelegt werden — die restlichen Berechnungen übernimmt das Online-Tool.

Hat man sich für eine Einteilung entschieden, können im zweiten Abschnitt etliche Anpassungen für die Textdarstellung der Seite vorgenommen werden. Hierzu zählen Einstellungen wie Schriftgröße, Schriftart, Zeilenhöhe, Laufweite sowie gängige Textformatierungen. Im letzten Schritt kann schließlich der finale CSS- und HTML-Code eingesehen und kopiert werden. Bei Bedarf können ein skalierbares Raster und auch gleich ein CSS-Reset ausgegeben werden.
Da sich mittlerweile etliche Raster-Werkzeuge im Netz finden, gibt es hier eine kleine Liste der verbreiteten Projekte:

• Gridulator
• Grid System Generator
• ZURB CSS Grid Builder
• Yahoo! CSS Grid Builder
• Hashgrid
• GridFox
• Gridmaker

Von Online-Diensten über Photoshop-Skripte bis hin zu Firefox-Erweiterungen ist hier alles dabei. Die Werkzeuge können bei der Erstellung von komplexen Rastern viel Zeit sparen, so dass sich ein Blick auf die einzelnen Projekte lohnt.

CSS 3.0 Maker: CSS3-Effekte im Browser erstellen

Inzwischen sind Editoren, die fertigen CSS3-Code für neue Effekte generieren, massenhaft im Netz vertreten. Neben dem CSS3 Playground oder dem CSS3 Generator gibt es nun den CSS 3.0 Maker, der ebenfalls komfortable Werkzeuge für die Erstellung von neuen CSS-Effekten bietet.

So können mit dem Online-Editor CSS-Codes für Textschatten, Verläufe, abgerundete Ecken, Animationen, Rotationen oder @font-face-Deklarationen erstellt werden. Die Seite bietet schöne Echtzeit-Werkzeuge, mit denen sich die verschiedenen Effekte sehr gut anpassen und einstellen lassen. Derartige Editoren sind für CSS3-Effekte notwendig, da sich genaue Anpassungen und visuelle Kleinigkeiten direkt betrachten lassen. Aktuelle CSS3-Editoren unterscheiden sich kaum von ihrer Funktionalität — für Webentwickler zählen im Endeffekt nur die Bedienbarkeit eines Editors und der persönliche Geschmack.

jQuery Image Scroller: Mini-Vorschau zur Navigation

Kürzlich berichtete ich über das jQuery-Plugin miniZoomPan, mit dem sich Bildausschnitte eines größeren Bildes in einem Ausschnitt bewegen lassen. Ein ähnliches Skript gibt es nun von Trevor Davis: Mit dem jQuery Image Scroller wird eine kleine Vorschau eines Bildes eingeblendet, über die das Ursprungsbild angesehen und verschoben werden kann.

In dem Blog-Eintrag werden die verschiedenen Teiles des Plugins beschrieben. Zudem gibt es eine Demo-Seite, auf der das Skript getestet werden kann. Die Implementierung erfolgt wie gehabt:

• $(document).ready(function() {
• $("element").imageScroller();
• });

Auf der Miniatur-Vorschau wird also eine graue Fläche angezeigt, die den sichtbaren Bereich repräsentiert. Wird sie mit der Maus bewegt, verschiebt sich dementsprechend das Original-Bild im Sichtbereich. Dadurch können alle Bereiche von größere Grafiken (wie etwa von Produktbildern) im Detail angesehen werden. Das Skript ist momentan auf ein vertikales Verschieben ausgelegt, so dass die Breite des Original-Bildes festgelegt werden muss. Eventuell folgt bald eine Möglichkeit für eine horizontale Verschiebung.

Webdesign: Farben großflächig auswählen

Farben sind im Bereich des Webdesigns ein wichtiger Aspekt, der wesentlich über das Erscheinungsbild einer Website entscheidet. Wenn eine Farbe ausgewählt werden soll, bieten sich mittlerweile gute Tools wie Adobe Kuler, Color Explorer oder Color Blender an. Wer es ganz konventionell mag, kann das Color-Werkzeug von Arne Martin Aurlien ausprobieren. Dabei wird die komplette Fläche des Browserfensters mit einer Farbe gefüllt, die durch Mausbewegungen definiert werden kann.

Der überdimensionierte Farbwähler bietet zudem schöne Optionen an, durch die sich ein Farbwert, der mit der linken Maustaste fixiert werden kann, als RGB-, HEX- oder HSL-Wert kopieren lässt. Wer also wieder einmal auf der Suche nach einer guten Farbe ist, kann diese mit dem Online-Tool zuvor großflächig begutachten.