Hier gibt es Artikel rund um Webdesign, Grafikdesign, Photoshop, Flash, TYPO3, CSS, Content-Management-Systeme, jQuery, Windows, 3D-Visualisierung und vieles mehr.

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.

Webentwicklung: Traits in Javascript nutzen

Zur Erweiterung der objektorientierten Programmierung in JavaScript bieten sich verschiedene Bibliotheken und Plugins an — größere Frameworks wie MooTools oder Prototype besitzen von Haus aus schon erweiterte Möglichkeiten wie etwa ein Klassen-System. Um in JavaScript die Vorteile von "Traits" nutzen zu können, kann die kleine Bibliothek "Traits.js" genutzt werden. Bei einem Trait können Funktionen innerhalb eines Objekts gespeichert werden und anderen Funktionen verfügbar gemacht bzw. vererbt werden.

Hier ein einfaches Beispiel, bei dem ein eine Funktion als Komposition an eine andere Funktion übergeben wird.

• function ausserhalb(wert1) {
• return Trait({
• aussenFunktion: function() { return wert1; }
• });
• }
•  
• function funktion1(wert2) {
• return Trait.create(
• Object.prototype,
• Trait.compose(
• ausserhalb("test1"),
• Trait({
• innenFunktion: function() { return wert2; }
• })));
• }
•  
• var objekt1 = funktion1("test2");
• objekt1.aussenFunktion(); // Ausgabe: test1

Komplexere Beispiele für die Anwendung von Traits finden sich bei den Tutorials der Website. Die Trait-Bibliothek nutzt zudem die neue Object-Manipulation API von ECMAScript 5.

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.