Tag: tutorials

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.

Cheat-Sheets.org: Große Sammlung an Referenzen

Vor einiger Zeit berichtete ich über die Seite "DevCheatSheet", auf der sich eine umfangreiche Liste an Cheat Sheets (Referenzkarten) findet. Da man nie genug Ressourcen zur Verfügung haben kann, gibt es eine weitere Sammlung, die eine Unmenge an Cheat Sheets für Programmiersprachen und Programme beinhaltet. Bei Cheat-Sheets.org hat man sich auf das Wesentliche konzentriert: Auf der linken Seite findet sich eine Liste mit den verfügbaren Sprachen und Anwendungen, während im rechten Bereich die Links zu den Cheat Sheets platziert sind.

In der Sammlung finden sich alle denkbaren Bereiche, angefangen bei Auszeichnungssprachen über Content-Management-Systeme bis hin zu Datenbanken und Programm-Shortcuts. Sicherlich sind manche Referenzkarten nicht aktuell, aber dennoch dürften sich in der Liste nützliche Übersichten finden.

JSPatterns: Nützliche Funktionen und Entwurfsmuster

Stoyan Stefanov dürfte vielen Webentwicklern durch sein Blog "PHPied" ein Begriff sein. Er hat diverse Bücher veröffentlicht, darunter auch "Object-Oriented JavaScript ". Der Entwickler betreibt seit geraumer Zeit auch eine Website, die sich mit allgemeinen Funktionen und Entwurfsmustern (Design Patterns) für JavaScript befasst. Bei JSPatterns sammelt und erklärt Stoyan Stefanov diverse JavaScript-Snippets, die zum Teil sehr interessante Eigenschaften der Skriptsprache offenlegen. Dabei geht es hauptsächlich um Klassen, Vererbung (Inheritance) oder andere objektorientierte Aspekte.

Die Patterns sind meistens mit praxisnahen Beispielen versehen, so dass sie besser verstanden werden können. JavaScript-Entwickler werden in der Sammlung viele hilfreiche Funktionen finden. Die Snippets sind in der Regel nicht komplex und dennoch interessant. So findet sich auf dem Blog beispielsweise ein Pattern, mit dem eine Funktion beim Instanziieren eine einmalige Funktion ausführt — dies kann etwa für das Einstellen (Setup) von Eigenschaften sinnvoll sein. Das Snippet wäre:

• function setup() {
• alert(1);
• return function() {
• alert(2);
• };
• }
•  
• var my = setup(); // Ausgabe: 1
• my(); // Ausgabe: 2

Wer Grundkenntnisse oder eine umfangreiche Einführung in JavaScript benötigt, ist mit "Eloquent JavaScript" bestens bedient.

Webentwicklung: Ablauf eines URL-Aufrufs

Grundlegende und selbstverständliche Dinge in Bereich der Web-Technik sind nicht immer selbstverständlich. In manchen Bereichen genügen Basiskenntnisse aus, um die Arbeit an Projekten durchführen zu können. Wer sich dennoch etwas tiefer mit bestimmten Aspekten befassen will, findet im Netz genügend Ressourcen. So gibt es auch einen ausführlichen Artikel von Igor Ostrovsky über den Ablauf eines URL-Aufrufs. Der Entwickler geht in seinem Beitrag auf die einzelnen Vorgänge ein, die nach dem Eingeben einer Adresse in den Browser durchgeführt werden.

Der Autor untermalt die theoretischen Erklärungen durch Illustrationen und Aufzählungen, was die ganze Thematik noch besser verständlich macht. Dabei werden die einzelnen Stationen wie Webserver-Software, Request-Handler, Redirects oder AJAX-Anfragen anhand von Beispielen beschrieben.
Für das Auffrischen oder Nachschlagen dieser Thematik ist der Artikel also empfehlenswert und zudem verständlich geschrieben.

MooTools: Tipps und Tricks zu nützlichen Funktionen

Zur Abwechslung gibt es wieder einen Link-Tipp für MooTools-Entwickler: Mark Obcena (Keetology) hat kürzlich den neuesten Artikel seiner Reihe "Up The Moo Herd: MooTools Tips and Tricks" veröffentlicht. In dem Beitrag geht der Autor auf verschiedene Hilfsfunktionen des MooTools-Frameworks ein. Dabei geht es hauptsächlich um die Arbeit mit Klassen und deren Eigenschaften.

MooTools kommt mit diversen Klassen-Funktionen, mit denen versucht wird, eine objektorientierte Programmierung möglich zu machen. Mark Obcena geht zudem auf Bedingungen (Conditions), Objekte und Funktionsparameter ein. Der Beitrag ist sehr ausführlich geschrieben und mit Code-Beispielen geschmückt.
Die MooTools-Bibliothek zählt neben jQuery zu den einfach erlernbaren JavaScript-Frameworks und bietet dennoch genügend Funktionen für ansprechende Webanwendungen. Ryan Florence hat vor kurzem einen aktuellen Vergleich von jQuery 1.4 und MooTools 1.2 verfasst. Dabei geht es um die neuen Funktionen der Frameworks — in dem Blog-Eintrag finden sich zu den Unterschieden beeindruckende Live-Beispiele, die direkt getestet werden können.

JavaScript-Frameworks: Ein ausführlicher Vergleich

Vor einiger Zeit hatte ich mit der JavaScript Framework Matrix eine Übersicht der beliebtesten JavaScript-Bibliotheken und deren Funktionen veröffentlicht. Wer sich darüber hinaus noch tiefer mit der Materie der verschiedenen Frameworks beschäftigen will, kann sich das kürzlich von IBM veröffentlichte Dokument ansehen. Der ausführliche Artikel beschreibt diverse Funktionalitäten von vielen Frameworks wie jQuery, MooTools, Prototype oder Ext JS.

Neben Grundfunktionen wie Selektoren, DOM-Manipulation oder Ajax werden weiter unten im Beitrag auch Plug-Ins für die Frameworks (UX Enhancements) vorgestellt, mit denen sich erweiterte Benutzeroberflächen realisieren lassen. Zudem gibt es noch eine kleine Matrix ("Framework Comparison"), in der die unterschiedlichen Funktionalitäten aufgelistet sind und so leichter verglichen werden können.
Der komplette Artikel kann auch als PDF heruntergeladen werden. IBM stellt viele umfangreiche Artikel zu JavaScript und weiteren Sprachen zur Verfügung, die zum größten Teil interessante Informationen liefern.

Webentwicklung: Checkliste für Website-Launch

Wenn die Programmierung an einem Webprojekt abgeschlossen ist, kann die Seite in der Regel veröffentlicht und der Zielgruppe zugänglich gemacht werden. Mit dem Upload der entsprechenden Dateien oder der Freischaltung durch ein Content-Management-System ist der Vorgang prinzipiell abgeschlossen. Dennoch können sich bei dem Launch einer Website schnell Fehler einschleichen oder banale Dinge unbeachtet bleiben. Gemeint sind hier in erster Linie technische Details und Kleinigkeiten, die etwa für Suchmaschinen relevant sind. Die Überprüfung der Dateien nach dem Upload sollte selbstverständlich sein. Zudem verläuft die Live-Schaltung einer Website von Projekt zu Projekt unterschiedlich, weshalb sich nur allgemeine Tipps geben lassen.

Ich habe daher eine kleine Checkliste erstellt, in denen die wichtigsten Punkte enthalten sein sollen, die vor dem Launch beachtet werden sollten.

jQuery: Gravitation in Animationen erzeugen

Durch physikalische Bewegungsabläufe lassen sich Realismus und Dynamik in Animationen erzeugen. Dabei spielt Gravitation eine wichtige Rolle, die jedoch in Verbindung mit Easing (Abbremsen bzw. Beschleunigen) relativ einfach simuliert werden kann. Im ThemeForest-Blog gab es dazu einen interessanten Artikel, der an einem einfachen Beispiel Gravitationseffekte zeigt.

Unter Verwendung des jQuery Easing Plugins lassen sich solche Effekt sehr gut umsetzen. Die relevanten jQuery-Zeilen entsprechen in etwa:

• yPos = $(block).position()["top"] – $("#air").position()["top"];
• hoehe = ($("#air").outerHeight() – yPos) – $(block).outerHeight();

Das DOM-Element "air" ist das Elternelement (in dem Beispiel die hellblaue Fläche), während "block" den aktuell animierten Block beschreibt. Anschließend wir der CSS-Wert "marginTop" des "block"-Elements mit dem Easing-Parameter "easeOutBounce" animiert. Diese mathematische Berechnung sorgt für den springenden Bewegungsablauf, was dem schwarzen Objekt Gewicht und Material verleiht.

jQuery-Tutorial: Eigenes Tooltip-Plugin erstellen

Das jQuery-Framework bietet eine sehr gute und einfache Schnittstelle für individuelle Plugins. So finden sich im Netz unzählige Lösungen und Skripte, die bei Projekten viel Arbeit und Zeit sparen können. Dennoch kann die Notwendigkeit oder das Interesse bestehen, ein eigenes Plugin zu entwickeln. In diesem Workshop will ich die Schritte der Plugin-Entwicklung anhand eines simplen Tooltip-Plugins erklären. Zudem soll das Tutorial ein paar neue Funktion von jQuery 1.4 demonstrieren, da die aktuelle Version des JavaScript-Frameworks mit interessanten Features ausgestattet wurde.

Zur Veranschaulichung, worum es sich bei dem Tooltip-Plugin handelt, folgt hier ein Demo-Link:

Tooltip-Demo

Der Inhalt dieses Tooltips wird aus dem title-Tag des Demo-Links extrahiert. Später werde ich noch eine Variante des Skriptes erstellen, die es ermöglicht, für mehrere Elemente individuelle Inhalte per Parameter festzulegen. So können mit einem einzigen Plugin-Aufruf viele Elemente mit unterschiedlichen Texten und dem Tooltip-Effekt ausgestattet werden.

Der Workshop richtet sich an jQuery-Einsteiger, die schon Erfahrung mit dem Framework gesammelt haben und JavaScript-Kenntnisse besitzen. Für die interaktive Entwicklung des Tutorial-Codes kann JS Bin verwendet werden.

jQuery-Tutorial: Eingabefelder bei Fokus leeren

Mit jQuery können schnell und relativ einfach Ereignisse (Events) abgefragt und mit Funktionen belegt werden. Eine beliebte Funktionalität stellen so auch Eingabefelder dar, die mit einem vordefinierten Beispieltext gefüllt sind und bei einer Aktivierung (Fokus) geleert werden — anschließend kann das leere Feld mit Benutzereingaben gefüllt werden. Dies findet sich häufig in Suchfeldern oder Kontaktformularen wieder.

In diesem Tutorial will ich die Schritte beschreiben, die in jQuery notwendig sind, um eine derartige Funktionalität zu entwickeln. Hierfür werden nur wenige Befehle und eine Variable benötigt, weshalb diese kleine Anleitung besonders für Einsteiger interessant sein kann. Eine Besonderheit stellt in der hier vorgestellten Lösung die Wiederverwendbarkeit dar: Die Funktion kann auf beliebig viele Eingabefelder angewendet werden, so dass auch größere Formulare damit ausgestattet werden können.