Tag: webdesign

Fonts2u: Umfangreiches Schriftarten-Archiv

Wer seine Quellen für Schriftarten um ein sortiertes und gut gefülltes Archiv ergänzen möchte, sollte einen Blick auf Fonts2u werfen. Die Sammlung beinhaltet etliche Kategorien, die mit Freeware-, Shareware-, Donationware- oder GNU/GPL-Schriftarten von unterschiedlichen Designern bestückt sind. Die Zeichensätze können mit einem individuellen Beispieltext dargestellt und durch verschiedene Kriterien sortiert werden. Zudem werden die Schriften von der Community bewertet und so gibt es auch die Kategorien "Top rated fonts" oder "Top downloads". Sehr schön ist die Einblendung der Lizenz bzw. Nutzungsart, in der die Fonts bereitgestellt werden — dennoch sollte man stets doppelt überprüfen, für welche Zwecke eine Schriftart genutzt werden darf (Textdateien finden sich in der Regel in der ZIP-Datei).

Die Seite ist in vielen Sprachen verfügbar und wertet mit weiteren Bereichen auf: Die Schrift-Designer werden alphabetisch in einem Verzeichnis aufgelistet und in der "Tools"-Abteilung finden sich viele Programme, mit denen sich Schriftarten verwalten oder erstellen lassen. Zudem steht ein Online-Converter bereit, mit dem Schrift-Dateien konvertiert werden können.

CSS3: Generator für Cross-Browser-Deklarationen

Die Idee von Border-Radius.com scheint großen Anklang zu finden und so haben Paul Irish und Jonathan Neal einen Generator für moderne CSS3-Effekte entwickelt. Mit CSS3 Please! steht ein komfortabler Editor für die möglichen CSS-Regeln zur Verfügung, mit dem sich einfach Cross-Browser-Regeln erstellen lassen. Bei dem interaktiven Editor ist eine Echtzeit-Vorschau enthalten, so dass man die Effekte direkt anpassen kann. Per Knopfdruck kann der CSS-Code in die Zwischenablage kopiert werden.

Zur Auswahl stehen Effekte wie abgerundete Ecken, Schatten, Verläufe, Rotationen oder die @font-face-Technik. Sehr schön sind die generierten Deklarationen für Internet Explorer, da nahezu alle Effekte mit "DXImageTransform"-Filtern realisiert werden können. Eine Ausnahme bilden runde Ecken, die erst mit Version 9 des Microsoft-Browsers verwendet werden können. Erlaubt es die Zielgruppe eines Webprojektes, kann mit der Verwendung von CSS3-Effekten viel Zeit gespart werden, da unnötige Verschachtelungen und transparente PNG-Grafiken entfallen.

Border-Radius.com: Vorschau für abgerundete Ecken

CSS3-Effekte und WebKit-Funktionen erfreuen sich trotz der relativ geringen Verbreitung großer Beliebtheit. Die Entscheidung über die Verwendung von modernen CSS-Deklarationen liegt nicht zuletzt beim Kunden und dessen gewünschter Zielgruppe für ein Projekt. Es wird sicherlich noch eine Zeit vergehen, bis die neue Browser-Ära einen globalen Anklang gefunden haben wird. Besonders Microsofts Internet Explorer 9 dürfte noch eine Weile auf sich warten lassen. Version 6 wurde am 1. März 2010 offiziell in Denver begraben (sogar Microsoft schickte Blumen mit Gruß).
Der Microsoft-Browser stellt das eigentliche Dilemma bei abgerundeten Ecken dar: Hierfür gibt es nur diverse Workarounds, ein HTC-Skript sowie eine offizielle Stellungnahme der Microsoft-Entwickler.
Wer bei Projekten dennoch modernen CSS-Code einsetzen kann, findet auf Border-Radius.com einen schönen Echtzeit-Generator für abgerundete Ecken.

Das kleine Online-Tool bietet die Möglichkeit, für jede Ecke einen anderen Radius zu definieren. Als Ausgabe erhält man Deklarationen für WebKit, Gecko und CSS3. Die CSS3-Eigenschaft "border-radius" ist hauptsächlich für Opera notwendig, da Apple- und Mozilla-Browser mit den eigenen Definitionen auskommen.

ZURB CSS Grid Builder: CSS-Code für Raster erstellen

Für das Erstellen von CSS-Rastern gibt es mittlerweile verschiedene Tools: Mit dem Yahoo! CSS Grid Builder oder Plumb lässt sich CSS-Code für die entsprechenden CSS-Frameworks erstellen. Eine Overlay-Grafik kann beispielsweise mit dem Gridmaker von Paul Holliday generiert werden und mithilfe von Hashgrid lässt sich per jQuery ein Raster über der Website einblenden.
Wer nun ein CSS-Raster erstellen möchte, ohne dabei auf ein CSS-Framework zurückgreifen zu wollen, kann den ZURB CSS Grid Builder nutzen. Die Online-Anwendung bietet komfortable Möglichkeiten, fertigen CSS-Code aus benutzerdefinierten Vorgaben zu generieren.

Neben der Spaltenbreite kann der Abstand zwischen den Spalten angegeben werden. Schließlich lässt sich noch die Anzahl der Unterteilungen definieren. Sehr schön bei dem Werkzeug ist die verkleinerte Browserfenster-Vorschau, in der das finale Raster betrachtet werden kann. Das Miniatur-Fenster kann auf verschiedene Breiten (1440, 1280 und 1024 Pixel) eingestellt werden. Per Knopfdruck wird im unteren Seitenbereich der fertige CSS-Code angezeigt. Interessant sind unter Anderem die Korrekturen für Internet Explorer 6, die für eine konstante Browser-Darstellung sorgen.

MooTools 1.2 Beginner's Guide: Eine Rezension

Mit MooTools lassen sich relativ einfach und schnell dynamische Webprojekte realisieren. Neben Effekten und Animationen stellt Ajax ein weiterer Bereich dar, für den die JavaScript-Bilbiothek gute Möglichkeiten bietet. Das MooTools-Framework ist aktuell in Version 1.2 verfügbar und zeichnet sich vor allem auch durch seinen objektorientierten Ansatz aus — JavaScript bietet nativ nur eingeschränkte Möglichkeiten für Objekte, Klassen und Vererbung.

Für MooTools gibt es mittlerweile verschiedene Bücher. Ich habe das kürzlich veröffentlichte Werk "MooTools 1.2 Beginner's Guide" von Jacob Gube (Six Revisions) und Garrick Cheung unter die Lupe genommen. In dieser Rezension will ich den Inhalt des Buches, das sich an Einsteiger und Anfänger richtet, beleuchten. Voraussetzung für die Arbeit mit dem Buch (und entsprechenden Projekten) sind JavaScript-Grundkenntnisse sowie fortgeschrittene HTML- und CSS-Fähigkeiten.

Adobe Font Finder: Schriftarten von Adobe finden

Adobe verfügt über ein umfangreiches Repertoire an Schriftarten, die im Adobe Store ab 29,99 USD erworben werden können. Dabei handelt es sich meistens um OpenType-Fonts, die sich auf allen gängigen Systemen einsetzen lassen. Wichtig bei den Schriftarten sind die Lizenzen zur Einbettung (Embedding) — soll eine Schriftart im Web verwendet werden (etwa durch Cufón oder "@font-face"), muss der Zeichensatz entsprechenden Lizenzbestimmungen unterliegen. Bei Adobe gibt es daher die Variante "Editable" bei den Richtlinien (Embedding Permissions) für das Einbetten von Schriftarten. So unterliegen beispielsweise alle Fonts der Familie "Adobe Originals" dem Lizenztyp "Editable" und können entsprechend genutzt werden.
Für das Durchsuchen der Adobe-Schriftarten bietet Adobe auch ein Werkzeug an, mit dem sich Fonts nach Klassifizierung, Stil, Thema oder Benutzung sortieren lassen. Der Adobe Font Finder ermöglicht zudem eine Echtzeit-Vorschau für selbst definierte Vorschau-Texte der Schriftarten.

Die Flash-Anwendung listet die gefundenen Schriftarten alphabetisch auf. Per Klick gelangt man direkt zur Detailseite des gewünschten Zeichensatzes. Anschließend kann die Schriftart einzeln oder im Paket gekauft werden. An manchen Stellen lässt die Kategorisierung des Font Finders noch zu wünschen übrig. Dennoch stellt die Seite ein schönes Werkzeug für das Stöbern in der Font-Sammlung dar.

AD Gallery: Moderne jQuery-Galerie mit vielen Extras

Skripte für Bildergalerien, Slideshows oder Lightboxes gibt es mittlerweile mehr als genug. Einige Plugins wurden wieder eingestellt, andere wurden verbessert. Und manche Entwickler haben sich etwas Neues überlegt. Dazu zählt auch Anders Ekdahl, der mit seinem jQuery-Plugin "AD Gallery" eine sehr moderne Galerie für Websites entwickelt hat. Dabei liegt der Fokus auf der Präsentation von mehreren Bildern, bei denen eine Übersicht gewährleistet sein soll. Dies hat der Entwickler durch die Darstellung eines Filmstreifens erreicht, in dem alle Bilder ausgewählt werden können.

Beeindruckend sind die verschiedenen Animationen, mit denen die Bilder bei einem Wechsel angezeigt werden. Dabei stehen sowohl gewöhnliche Überblendungen als auch alternative Effekte ("Shrink", "Wild") zur Verfügung. Per Knopfdruck kann eine automatische Slideshow gestartet werden. In der einfachen Variante wird das Skript so angewendet:

• $("element").adGallery();

Man sollte sich die Dokumentation auf der Website und auch das Beispiel ansehen, das heruntergeladen werden kann. Obwohl das jQuery-Plugin sehr komplex ist, kommt es in der komprimierten Variante mit einer Dateigröße von etwa 10 KB aus.

SimpleSlider: Einfacher Schiebe-Effekt mit jQuery

Nicht immer sind aufwendige und effektlastige Animationen bei Webprojekten gefragt — einfache Effekte können dezent die gewünschten Informationen übertragen oder bestimmte Aspekte besser beleuchten. Wer auf der Suche nach einem einfachen Slider (Verschiebung) ist, kann sich das jQuery-Plugin von Justin Jones ansehen: Der SimpleSlider wurde von dem Entwickler für ein eigenes Projekt erstellt und erfüllt seinen Zweck. Listenelemente (li) aus einer Liste (ul) werden einfach von rechts nach links animiert. Zudem kann die Animation manuell durch Schaltflächen gesteuert werden.

Das Skript kann in 3 Demonstrationen getestet werden: Als Basis-Version, mit CSS-Eigenschaften oder erweiterten Einstellungen. Das Plugin wird in der einfachen Variante wie folgt eingebettet:

• $("element").simpleslider();

Bei dem aufgerufenen Element handelt es sich wie oben erwähnt um eine Liste, deren Kind-Elemente animiert werden. In den Optionen des jQuery-Plugins können diverse Anpassungen (Geschwindigkeit, Schaltflächen, etc.) vorgenommen werden. Die Buttons können per CSS umgestaltet werden.

CSS-Frameworks: Übersicht mit Beschreibungen

Durch den Einsatz von CSS-Frameworks lässt sich Zeit sparen, so dass bei der Entwicklung der Fokus auf die Ausgestaltung der Stile und Designvorgaben gelegt werden kann. Bekannte Frameworks wie Blueprint oder Tripoli erfüllen schon seit geraumer Zeit ihren Zweck. Dennoch gibt es eine große Auswahl an unterschiedlichen CSS-Bibliotheken, die teilweise für verschiedene Einsatzgebiete ausgelegt sind.
Die Wahl des perfekten Frameworks ist von diversen Faktoren und nicht zuletzt von den Projektvorgaben abhängig. Ein guter Leitfaden wurde gestern bei DevSnippets veröffentlicht, in dem sowohl aktuelle als auch altbekannte CSS-Frameworks vorgestellt und beschrieben werden.

Die Auflistung ist knapp und dennoch ausreichend. Zu jedem Framework wurde abschließend in einem Satz festgehalten, was die jeweilige Bibliothek bietet. So finden sich in der Liste sehr interessante Systeme wie das "Fluid 960 Grid System" oder das "1KB CSS Grid" — Letzteres generiert per Konfigurator den gewünschten CSS-Code mit Reihenanzahl und Größenangaben.
Sicherlich eignen sich derartige Frameworks nicht für jedes Projekt und die Entscheidung liegt letztendlich beim Entwickler. Das Angebot an CSS-Bibliotheken sollte man dennoch im Hinterkopf behalten.

Wireframing: Sammlung mit Werkzeugen und Tipps

Bei der Konzeption von Webprojekten spielt die Erstellung von groben Layouts (Mock-Ups oder Wireframes) eine wichtige Rolle. So lässt sich unter Anderem mit dem Kunden sehr früh abstimmen, wie Elemente platziert werden sollen. Die detaillierte Ausgestaltung des grafischen Entwurfs erfolgt im zweiten Schritt, so dass in der Wireframing-Phase Entscheidungen über den Aufbau und das Inhaltskonzept getroffen werden können.
Bei W3Avenue wurde kürzlich ein ausführlicher Artikel über Techniken und Werkzeuge für den Wireframing-Prozess veröffentlicht.

In der Liste finden sich neben Offline-Anwendungen auch viele Webdienste, die das Erstellen von Mock-Ups erlauben — MockFlow und iPlotz zählen sicherlich zu den bekanntesten Wireframing-Tools. Die altbekannte Firefox-Erweiterung Pencil wurde kürzlich aktualisiert und kann zudem auch als Standalone-Version heruntergeladen werden. Mit den Design Stencils von Yahoo! oder Konigi stehen fertige Schablonen zur Verfügung.
Schließlich sollte man im Hinterkopf behalten, dass Wireframes einfache Strichzeichnungen darstellen, die auch auf dem Papier erstellt werden können. Bei "A List Apart" findet sich zu diesem Thema ein schöner Beitrag.