Tag: tipps

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.

Cached Commons: JavaScript-Bibliotheken per CDN

Die aktuelle Version von jQuery oder Prototype lässt sich in Web-Projekte sehr gut über die Google Libraries API einbetten. Dort finden sich alle bekannten JavaScript-Frameworks, die als minifizierte Skript-Dateien abgerufen und eingesetzt werden können. Für viele Bibliotheken gibt es mittlerweile eine große Menge an Plugins — zudem existieren kleinere JavaScript-Projekte, mit denen sich beispielsweise Diagramme darstellen oder physikalische Effekte simulieren lassen. Für diese Art von Bibliotheken gibt es nun das Projekt Cached Commons, bei dem kleinere JavaScript-Libraries und jQuery-Plugins vorliegen und per script-Tag in einem Web-Projekt eingebunden werden können.

Die Übersicht von Cached Commons ist sehr gelungen: Zu jedem Skript liegen Links zur Website und eventuellen Demos vor. Per Klick auf die jeweilige Bibliothek erhält man den JavaScript-Code. Entsprechend gibt es die Minified-Version, wenn die Bezeichnung "(min)" angeklickt wird. Der Vorteil an Cached Commons liegt vor allem in der Verwendung der GitHub-CDNs, die als schnell und zuverlässig gelten. Übrigens können Benutzer auch Anfragen für weitere Skripte an die Seite übermitteln, so dass die Listen noch wachsen dürften.

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.

Cuzillion: Website-Komponenten analysieren

Ich habe beim Surfen eine interessante Seite gefunden, auf die ich früher schon einmal gestoßen war: Das Projekt "Cuzillion" von Steve Souders stellt ein nützliches Tool dar, mit dem sich verschiedene Komponenten einer Website konfigurieren und testen lassen. Zu den Komponenten zählen Inline-Skripte, verlinkte Skript-Dateien, externe Stylesheets, Bilder und iframes. Mit dem Werkzeug lassen sich beliebige Blöcke in einem fiktiven HTML-Konstrukt platzieren und anpassen. Anschließend kann die Ladezeit getestet und die optimale Reihenfolge der Komponenten ermittelt werden.

Steve Souders ist ein Spezialist, was Komprimierung und Caching von Websites angeht. Ein interessanter Punkt, den er aufzählt, stellt beispielsweise die Tatsache dar, dass Firefox maximal 2 Dateien parallel herunterlädt, während Internet Explorer 8 bis zu 6 Elemente synchron laden kann. Cuzillion ist also dafür gedacht, Differenzen der verschiedenen Browser ausfindig zu machen und zu verstehen. Die Konfigurationen der Komponenten können als permanente Links verschickt und somit von mehreren Entwicklern verwendet werden.

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.

JavaScript: Ajax-Inhalt durch Deep-Links darstellen

Der Artikel bei Impressive Webs ist zwar schon etwas älter, aber vielleicht kann er bei dem einen oder anderen Web-Projekt behilflich sein. In dem Beitrag geht es um die Umsetzung von Deep-Links in JavaScript- und Ajax-Anwendungen. Das bedeutet, dass bestimmte Inhaltsbereiche über einen Hash-Link (#-Zeichen) abgerufen und dargestellt werden können. In dem Artikel wird die Programmierung einer solchen Funktionalität in JavaScript beschrieben.

Neben dem eigentlichen JavaScript-Teil ist auch die Umsetzung der eigentlichen Seite interessant: Hier wurde eine PHP-Datei geschrieben, die verschiedene Inhalte per GET-Parameter im Stil von "?view=employee1" darstellt. Durch JavaScript wird anschließend der Teil "?view=" durch das Hash-Zeichen "#" ersetzt, so dass entsprechende Deep-Links entstehen, die bei einem direkten Aufruf den referenzierten Inhalt darstellen. Auf der Demo-Seite kann die Funktionalität angesehen werden.
Das Ganze lässt sich auch sehr einfach mit jQuery umsetzen, falls mit der Bibliothek gearbeitet wird. Hier wird der Ajax-Inhalt in den Container mit der ID "ajaxcontent" geladen:

• $(document).ready(function(){
• function ajaxHashContent(ajaxFile) {
• $("#ajaxcontent").load(ajaxFile);
• }
•  
• ajaxHashContent(location.hash.substr(1) + ".html");
• });

Voraussetzung ist natürlich, dass die Ajax-Dateien die Endung ".html" besitzen und sich im gleichen Verzeichnis befinden.

Webentwicklung: PHP-Endung bei URLs entfernen

Mit .htaccess-Befehlen lassen sich wichtige Aspekte der Suchmaschinenoptimierung umsetzen. Neben 404-Fehlerseiten oder dem Entfernen der "www"-Subdomain zählen vor allem saubere URLs zu den Vorzügen von .htaccess-Dateien. Wer eine einfache Website mit PHP realisiert hat und verschiedene Dateien in Form von "http://www.domain.com/name-der-seite.php" vorliegen hat, kann bei Bedarf die Erweiterung ".php" mit ein paar Zeilen .htaccess-Code ausblenden. Bei stuntSnippets findet sich dazu ein kleiner Artikel, in dem die Thematik behandelt wird.

Neben diesem Beitrag finden sich bei stuntSnippets noch weitere interessante Code-Bausteine, so dass die kleinen Lösungen der Seite in vielen Fällen behilflich sein dürften.
Unabhängig davon folgt hier noch ein kleines .htaccess-Snippet, durch das saubere URLs mit PHP und einer Struktur im Stil von "index.php?id=seite" erreicht werden können:

• RewriteEngine On
•  
• RewriteCond %{REQUEST_FILENAME} -f [OR]
• RewriteCond %{REQUEST_FILENAME} -d
• RewriteRule ^(.+) – [PT,L]
•  
• RewriteRule ^(.*) index.php?id=$1
• RewriteRule ^(.*)/(.*) $2

Weitere nützliche .htaccess-Snippets finden sich unter Anderem hier.