Tag: tricks

pChart: Graphen und Diagramme mit PHP erstellen

Für die Darstellung von Statistiken muss nicht immer JavaScript eingesetzt werden — PHP kann in Verbindung mit der GD-Bibliothek zuverlässig Bilddaten generieren. Um Zahlen nun als Diagramme darzustellen, bietet sich eine Bibliothek wie pChart an — das Open Source-Projekt erlaubt es, Graphen aus SQL-Daten, CSV-Dateien oder durch manuelle Werte zu erstellen. Dabei stehen verschiedene Stile zur Auswahl: Linien, Flächen, dreidimensionale Tortendiagramme oder Kurven können mit der PHP-Bibliothek gezeichnet werden. Zudem werden die Legenden sehr ansprechend dargestellt.

Diagramme können auch mit zusätzlichen Informationen (Labels) versehen werden. Mit der pCache-Klasse lassen sich generierte Graphen in einem Cache-Verzeichnis als statische Bilddateien aufbewahren, um Ladezeiten zu verringern.
Bei den Beispielen lässt sich der dazugehörige Quelltext einsehen und die Dokumentation ist ausführlich und verständlich. Für die farbliche Darstellung können verschiedene Farbschemata als Add-Ons installiert werden. Zum besseren Verständnis der Funktionsweise haben die Entwickler ein Flussdiagramm konzipiert, das die technischen Aspekte beleuchten soll.

Die pChart-Bibliothek gibt es schon länger, dennoch sind die Entwickler für mögliche Bug-Reports dankbar.

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.

Password Meter: Sichere Passwörter erstellen

Die Sicherheit beim Surfen im Netz wird von verschiedenen Faktoren beeinflusst. Eine vollständige Sicherheit wird nie gewährleistet sein und dennoch lässt sich das Risiko auf ein Minimum reduzieren. Dabei spielen vor allem starke Passwörter eine wichtige Rolle. Ein gutes und sicheres Passwort besteht aus verschiedenen Komponenten und Kombinationen — dazu gehören Zahlen, Groß- und Kleinbuchstaben sowie Sonderzeichen. Dennoch sollte man sich ein Passwort in der Regel merken können, weshalb es nicht zu kompliziert sein sollte. Um also ein gutes Passwort zu erstellen, bietet sich ein Werkzeug wie der Password Meter an. Bei der JavaScript-Anwendung wird in Echtzeit die Stärke eines Passwortes ermittelt. Dadurch kann ein Benutzer durch Ausprobieren die Stärke des Passwortes wesentlich erhöhen.

Der Password Meter (oder Password Strength Checker) ist sehr durchdacht und bezieht bei der Bewertung eines Passwortes intelligente Aspekte ein. So werden verschiedene Bereiche (wiederholende Zeichen, Sonderzeichen, Buchstabenanteil, aufeinanderfolgende Zeichen, etc.) ausgewertet und im Optimalfall mit einem Bonus versehen.
Der Password Meter lässt sich auch herunterladen und kann somit offline genutzt werden.

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.

MySQL: Übersicht für allgemeine SQL-Queries

Für angehende oder bestehende MySQL-Entwickler kann es nützlich sein, einen Überblick über die Funktionswelt von MySQL zu haben — bei DevCheatSheet gibt es etliche "SQL Cheat Sheets", die eine Auflistung der SQL-Befehle beinhalten. Einen Schritt weiter ist man bei Artful Software gegangen: Die Autoren stellen zum einen auf ihrer Website verschiedene Kapitel ihres Buches "Get It Done With MySQL 5&6" komplett zur Verfügung (mit einem Stern gekennzeichnet). Zum anderen haben sie eine hilfreiche Übersicht geschaffen, in der unzählige Lösungen für allgemeine SQL-Queries aufgelistet sind. Bei den "Common MySQL Queries" finden sich Code-Bausteine für verschiedene Situationen.

Dazu zählen sowohl einfache SQL-Queries (Sammeln, Vergleichen, etc.) als auch spezifischere Beispiele. So finden sich in der umfangreichen Sammlung unter Anderem Lösungen für Kalender, Statistiken, Hierarchien oder komplexe Sortierungen. Die SQL-Bausteine enthalten neben dem eigentlichen SQL-Code Beispiele und kleine Erläuterungen. Neben der Baumansicht gibt es noch eine aufgeklappte Version der Übersicht.

Ketchup: Moderne Formular-Validierung mit jQuery

Zur Überprüfung von Benutzereingaben in HTML-Formularen eignet sich JavaScript bestens. Für jQuery gibt es diverse Plugins, mit denen Formulare in Echtzeit verifiziert werden können. Ein aktuelles Skript dieser Art stellt Ketchup dar — mit dieser jQuery-Erweiterung werden bei fehlenden Eingaben über den entsprechenden Feldern (input) Hinweise eingeblendet, die den Benutzer auf das Pflichtfeld aufmerksam machen.

Das Skript erwartet spezielle Klassen (class) und wird im JavaScript-Code auf das Formular-Element (form) angewendet:

• HTML:
• <form id="element" action="index.php" method="post">
• <input type="text" class="validate(required, username)" />
• </form>
•  
• jQuery:
• $("#element").ketchup();

Neben einfachen Pflichtfeldern können damit auch weitere Funktionalitäten realisiert werden. So kann etwa überprüft werden, ob es sich bei der Benutzereingabe um eine valide Datumsangabe oder E-Mail-Adresse handelt. Das Aussehen der Hinweise lässt sich per CSS anpassen und konfigurieren. Die Nachrichten sind in einer separaten Datei ("jquery.ketchup.messages.js") gespeichert. Beim Download des Skriptes sind bereits diverse Beispiele und Möglichkeiten enthalten.
Interessant bei der Klassen-Schreibweise im HTML-Teil ist übrigens die W3C-Validierung.

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.

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-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.

Quix: Bookmarklet für Webentwickler und Surfer

Kleine Skripte, die in Form eines JavaScript-Links in der Navigations-Symbolleiste (Toolbar) des Webbrowsers platziert werden, können in vielen Bereichen nützlich sein. Es gibt im Web ein großes Angebot an Bookmarklets, die sowohl für Webentwickler als auch für Surfer oder Blogger hilfreich sein können. Ein umfangreiches Bookmarklet (oder Favlet), das sehr viele Funktionen in sich vereint, steht mit Quix zur Verfügung. Bei dem dynamischen Lesezeichen handelt es sich lediglich um einen Dialog, der Befehle entgegen nimmt. Doch das Repertoire von Quix zeichnet sich durch viele interessante Kürzel und Webdienste aus. Eine kleine Einführung für die Benutzung des Lesezeichens gibt es hier.

Hat man das Bookmarklet in der gewünschten Symbolleiste platziert, sollte man sich einen Überlick der Befehle verschaffen — entweder mit dem Befehl "help" oder durch die Hilfeseite. Der Code hinter Quix besteht nur aus wenigen Zeilen, da alle Anfragen an einen entsprechenden Parser der Quix-Website weitergeleitet werden.
Das komplexe Bookmarklet bietet neben einfachen Suchfunktionen (Google, Amazon, Flickr, etc.) und Social Network-Komponenten (wie Facebook, Delicious oder Twitter) auch vor allem Dienste für Webmaster und -entwickler. So gibt es viele Befehle aus dem Bereichen Suchmaschinenoptimierung (SEO), Validierung (W3C) und Debugging. Per "resize 1280 800" wird das Browserfenster beispielsweise auf 1280×800 verkleinert. Der Befehl "php substr" durchsucht die PHP-Funktionsliste nach "substr". Zudem wurden andere beliebte Bookmarklets wie XRAY oder der Soma FontFriend integriert.
Quix kann zudem durch eigene Befehle erweitert werden. Die neuen Befehle müssen nur in einer Textdatei abgespeichert und auf der Quix-Website hochgeladen werden.