Tag: werkzeuge

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.

Flame: Zeichenprogramm für digitale Leuchteffekte

Die Ära der kreativen Zeichenprogramme erfreut sich ständiger Bereicherung. Mit Flash, Java oder JavaScript werden Anwendungen geschaffen, die durch innovative Konzepte beeindrucken. LiveBrush, SketchPad oder Fractal 4D zählen zu den Vorreitern dieses Metiers.
Peter Blaškovič hat als Experiment eine Online-Anwendung für das Erstellen von digitalen Flammen entwickelt: Bei Flame können Benutzer kreativ werden und durch einfache Bewegungen aufwendige Effekte erzeugen. Mit einem animierten Zeichenstift lassen sich dadurch fraktale Gebilde erschaffen, die durch weiche Übergänge und Transparenzeffekte aufgewertet werden.

Der digitale Pinsel kann durch verschiedene Einstellungen (Farbe, Opazität, Verlauf, Überblendung, Weichzeichner, Form, usw.) angepasst und verfeinert werden. Die Java-Anwendung, die auf Processing basiert, bietet zudem eine "Undo"-Funktion an. Per Knopfdruck lassen sich die Werke als JPG-Grafik in einer Auflösung von 1680 × 1050 speichern.
Wer ausprobieren möchte, wie es sich mit Flüssigkeit malen lässt, sollte den Fluid Painter des Entwicklers ausprobieren.

Support Details: Systemdaten anzeigen lassen

Wenn es um die Abstimmung von Webprojekten geht, ist die Kommunikation mit dem Kunden ein wichtiger Aspekt. Um Missverständnisse auf der technischen Seite zu vermeiden, müssen Entwickler über die Systemdaten des Computers (Betriebssystem, Browser-Version, Bildschirmauflösung, Flash-Version, etc.) des Kunden und der Zielgruppe informiert sein. Oft ist es der Fall, dass nicht alle notwendigen Details bekannt sind oder ausfindig gemacht werden können. Um nun Kunden das Auslesen der notwendigen Daten zu erleichtern, kann beispielsweise die Seite "Support Details" genutzt werden.

Die Website stellt alle notwendigen Daten als Grafiken dar und verschickt die Zusammenfassung bei Bedarf per E-Mail an den gewünschten Empfänger. Sehr gelungen ist vor allem die "Export PDF"-Funktion, mit der die Systemdaten in einem PDF-Dokument aufgeschlüsselt werden und anschließend heruntergeladen werden können. Alternativ können die Informationen als CSV-Tabelle gespeichert werden.

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.

RequireJS: JavaScript-Dateien als Module laden

Bei größeren Projekten kann es vorkommen, dass durch die Komplexität mehrere JavaScript-Dateien verwendet werden oder diese aufgrund eines bestehenden Frameworks schon vorhanden sind. Dann kann es der Fall sein, dass bestimmte Funktionen oder Aufrufe erst erfolgen sollen, nachdem eine Bibliothek fertig geladen wurde. Als Entwickler hat man ohne zusätzlichen JavaScript-Code keinen Einfluss auf die Reihenfolge, in der die Dateien einer Website geladen werden. Eine Möglichkeit besteht in der Umstrukturierung des HTML-Gerüsts, doch dieser Ansatz lässt sich in der Praxis nur selten umsetzen.
Um JavaScript-Dateien nun als separate Module zu nutzen, bietet sich ein Skript wie RequireJS an — dadurch werden Befehle erst dann ausgeführt, wenn die gewünschten Skripte fertig geladen wurden. Die Implementierung für das einfache Laden von mehreren Dateien könnte dann so aussehen:

• …
• <script src="scripts/require.js"></script>
• <script>
• require(["datei1.js", "datei2.js", "datei3.js"],
• function() {
• // This function will be called when all the
• // dependencies listed above are loaded.
• // Note that this function could be called
• // before the page is loaded. This callback
• // is optional.
• }
• );
• </script>
• …

Mit RequireJS lassen sich Skripte zudem als Module mit bestimmten Abhängigkeiten behandeln. Weiterhin können sich mit der Bibliothek Sprachvarianten (I18N) für die Ausgabe von Texten erstellt werden. Mehr über die Verwendung der unterschiedlichen Funktionen findet sich in der API-Dokumentation. Eine Schnittstelle für jQuery ist ebenfalls enthalten.
Interessant ist schließlich das Optimization Tool, das den Google Closure Compiler nutzt, um mehrere JavaScript-Dateien in einer Datei zu kombinieren. Dieser Schritt sollte am Ende der Entwicklungsphase stehen und reduziert die Anzahl der Requests, die für ein JavaScript-Projekt benötigt werden.

jQuery: Klicks außerhalb eines Elements feststellen

Bei der Entwicklung von Benutzeroberflächen und Interaktionen sind in manchen Fällen die gegebenen Möglichkeiten unzureichend. Daher haben einige Entwickler schon virtuelle DOM-Events konzipiert, mit denen erweiterte Abfragen möglich sind — so lässt sich beispielsweise feststellen, wie lange der Mauszeiger über einer Fläche verweilt oder wie lange die Maustaste vom Anwender betätigt wurde. Eine weitere Funktionalität in Form eines jQuery-Plugins bietet Ben Alman mit seinem "clickoutside"-Event an: Damit können Programmierer auf Ereignisse reagieren, die auftreten, sobald der Benutzer einen Punkt außerhalb eines entsprechenden Elements angeklickt hat.

Dies könnte zum Beispiel bei einer Lightbox der Fall sein. Das Verwenden einer großen Overlay-Fläche würde dadurch entfallen. Testen lässt sich das jQuery-Event auf der Demoseite.
Ein Bonbon gibt es vom Plugin-Autor für interessierte JavaScript-Entwickler: Der Quelltext ist kommentiert und kann bei GitHub eingesehen werden.

SQLiteSpy: Verwaltung von SQLite-Datenbanken

Für bestimmte Webprojekte kann es erforderlich sein, dateibasierte Datenbanken zu verwenden. Bei kleineren Projekten kann es sich daher lohnen, auf das relationale Datenbanksystem SQLite zurückzugreifen. Die PHP-Erweiterung ist ab PHP 5.0 integriert und kann daher direkt genutzt werden.
Für die grafische Verwaltung und Bearbeitung von SQLite-Datenbanken bieten sich verschiedene Programme an: SQLiteSpy stellt seine sehr schöne Lösung dar, mit der sich derartige Datensammlungen editieren lassen.

Die Windows-Anwendung stellt die Relationen der Datenbank in entsprechenden Spalten dar und bietet bequeme Bearbeitungsmöglichkeiten für Tabellendaten. Wer unter Mac OS X oder Linux arbeitet, kann den "SQLite Database Browser" in Erwägung ziehen, da dieses Programm plattformunabhängig entwickelt wurde.
Seit Version 3 wird auch in Mozillas Firefox SQLite verwendet (z.B. für Lesezeichen). Dementsprechend gibt es auch für Firefox eine sehr komfortable Erweiterung, mit der sich SQLite-Datenbanken editieren lassen. Mit dem "SQLite Manager" können so auch die SQLite-Datenbanken des Firefox-Browsers angesehen werden.
Ein Pendant für die Administration von MySQL-Datenbanken steht beispielsweise mit HeidiSQL zur Verfügung.

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.