Webdesign mit Online-GeneratorenNützliche Tools für Webdesigner

Code-Generatoren

Webdesign mit Online-Generatoren

Böse Zungen behaupten, dass das so genannte Aal-Prinzip (andere arbeiten lassen) das vorherrschende Geschäftsmodell im Zeitalter von Web 2.0 ist. Das Prinzip lässt sich auch auf die Bereiche Webdesign und -programmierung übertragen, und zwar dann, wenn man sich der zahlreichen Code-Generatoren bedient, die es für alle möglichen Anwendungsfälle im Web gibt.

Das Prinzip ist einfach: Als Input gibt der Designer zum Beispiel die Parameter des Layouts einer Seite ein, und er erhält als Output den Code für ein passendes Stylesheet. Das Angebot an solchen Generatoren im Web ist sehr umfangreich und lässt sich in die nachfolgenden Bereiche gliedern:

Gemessen an der Anzahl steht CSS sehr weit oben. Mit Hilfe solcher CSS-Generatoren kann man sich sowohl komplette Seiten-Layouts generieren lassen als auch Spezialfälle wie Menüs, Tabellen, Listen oder Rollovers in den Griff bekommen.

Ein breites Angebot gibt es auch für das Problem Formulare. Manche Generatoren beschränken sich hier auf das Layout, während andere mit einer kompletten Validierung der Feldinhalte und sogar mit einer Schnittstelle zu einer Datenbank aufwarten. Auch einfache Form-Mailer und Feedback-Formulare mit einem schicken Outfit lassen sich damit erstellen.

Bilder und Farben

Auch das Feld Bilder, Farben, Buttons und Grafiken ist gut mit Online-Tools abgedeckt. Ob ein einfacher Farbwähler gefragt ist oder ein Favicon-Generierer, für beide Fälle gibt es passende Tools. Die eigene Codierung kann man sich für einen Thumbnail-Generator ebenso ersparen wie für aufwendige Buttons, Backgrounds oder Dia-Präsentationen. Auch wer nach Metatag-, robots.txt-, htaccess-, Passwort, Popup- oder Sitemap-Generatoren sucht, wird im Web schnell fündig.

Wie die Arbeit mit diesen Generatoren in der Praxis funktioniert, soll an einigen ausgewählten Beispielen für ein fortschrittliches Seitenlayout mit CSS gezeigt werden.

CSS-Generatoren

Webdesign mit Online-Generatoren

Ein Grundlayout für eine Webseite oder ein Template zu entwerfen und diesen Entwurf mit Hilfe von CSS zu realisieren, erfordert viele Zeilen Code. Wenn Sie diesen Aufwand vermeiden wollen, sollten Sie den CSS Layout Generator hier einmal testen.

Für die Nutzung dieses Tools ist eine kostenlose Anmeldung notwendig. Als Erstes wählen Sie dann via Pulldown-Menü den Doctype Ihrer Seite aus. Alle gängigen HTML- und XHTML-Varianten stehen hier zur Auswahl. Als Nächstes legen Sie via Radio-Buttons die Ausrichtung der Seite fest (links, zentriert oder voll). Anschließend legen Sie die minimale und maximale Breite fest, wahlweise in dem Maßeinheiten px, em oder %. Dann können Sie wählen, ob ein Header definiert werden soll. Haben Sie sich für einen Header entschieden, legen Sie dessen Höhe und Hintergrundfarbe fest. Optional können Sie auf diese Weise das Layout um eine linke und rechte Spalte sowie um einen Footer ergänzen. Für die Wahl der Hintergrundfarbe steht Ihnen jeweils ein komfortabler Farbwähler mit Schiebebalken für die Grundfarben nach dem RGB-Schema zur Verfügung. Haben Sie alle notwendigen Felder ausgefüllt, generieren Sie mit einem Klick auf Generate Layout das Ergebnis: ein HTML- und ein CSS-File. Haben Sie sich bei der Eingabe der Maße vertan, erscheint eine Fehlermeldung mit konkreten Hinweisen darauf, wo ein Problem besteht. Die Wahl der Farben können Sie in einer Echtzeit-Vorschau jederzeit kontrollieren.

Ein einfaches Tool für die Generierung von Boxen mit abgerundeten Ecken gibt es auf dieser Seite. Der Input beschränkt sich die auf die Auswahl der passenden Farben. Als Ergebnis werden die daraus resultierenden Style-Definitionen und eine HTML-Fragment mit Blindtext angezeigt. Eventuelle Positionierungen müssen allerdings explizit im Code vorgenommen werden, denn das leistet das Online-Tool nicht.

Sehr hilfreich, wenn es um das Grundlayout einer kompletten Seite geht, ist der Layout-o-matic. Insbesondere wird die Arbeit durch die Einblendung einer Thumbnail-Vorschau in Echtzeit unterstützt. Zuerst wählen Sie aus einem Pulldown-Menü das Grundlayout aus. Zur Auswahl stehen neben der Option Full page mit einem Banner im Head-Bereich ein Dreispalten-Layout und zwei Varianten mit zwei Spalten (Sidebar links oder rechts). Anschließend müssen noch die Breite, der Abstand der Elemente und das Padding innerhalb der Boxen definiert werden. Ein spezielle Box-Hack für den Internet Explorer wird auf Wunsch integriert. Die Farbdefinitionen sind leider manuell vorzunehmen, da Layout-o-matic hier keine Unterstützung bietet. Das fertige Layout kann man sich anschließend als HTML-File auf den eigenen PC laden.

Menü-Generatoren

Webdesign mit Online-Generatoren

Auch beim Aufbau von CSS-Menüs und Navigationsleisten kann man sich die Arbeit mit einem Online-Generator wesentlich vereinfachen. Ein gutes Tool dafür finden Sie hier.

Eine Anmeldung ist hier nicht erforderlich. Das Ganze funktioniert nach dem Copy-and-Paste-System. Der Generator bietet Ihnen vier verschiedene Grundstile für das Menü zur Auswahl. Via Radio-Button wählen Sie den gewünschten Stil aus. Auf der folgenden Seite legen Sie die Breite der Navigationsbox fest sowie die Farben für die Hintergründe, die Schrift und die Mouseover-Effekte. Sie können sich dafür eines optionalen Farbwählers bedienen. Anschließend bestimmen Sie noch die Schriftart- und größe. Zum Abschluss müssen Sie natürlich noch die Menübeschriftungen und -Links eingeben. Nach einem Klick auf Generate Code wird Ihnen in einem jeweils separaten Fenster der CSS- und HTML-Code angezeigt, den Sie in Ihre Seite oder Ihr Template übernehmen können. Zu bemängeln gibt es bei diesem Generator die Fixierung auf die Maßeinheit px bei der Definition der Breite und der Schriftgröße.

Der Nutzen eines Menügenerators ist ohnehin relativ zu sehen, da sich in der Regel die Struktur einer Website-Navigation häufiger ändern kann und es zu aufwendig ist, dafür jedes Mal das komplette Menü neu zu generieren. Besser fahren Sie hier, wenn Sie mit diesem Generator ein Grundschema entwerfen, dieses dann in Ihre Site integrieren und es von Fall zu Fall manuell anpassen und erweitern.

Ein Menü-Generator mit mehr Optionen ist der List-o-Matic. Vor allem die Auswahl an Menü-Stilen ist hier wesentlich größer. Neben vertikal angeordneten gibt es auch solche mit horizontaler Anordnung. Umgesetzt werden die Vorgaben des Designers bei List-o-Matic mit ul- und li-Elementen und den entsprechenden CSS-Formatierungen. Diese müssen dann ebenfalls per Copy and Paste in die eigene Site integriert werden.

Skript-Statements

Webdesign mit Online-Generatoren

Ein nettes Tool für Programmierer aller Arten von Skriptsprachen stellt Response.Right dar. Bei der Mischung von HTML- und Skriptcode tritt immer mal das Problem auf, dass man ein längeres HTML-Statement in Form zum Beispiel einer PHP-Variablen benötigt. Bei der manuellen Umwandlung können sich wegen der häufig auftretenden Anführungszeichen schnell Tippfehler einschleichen. Die kann man vermeiden, wenn man sich dieses Generators bedient. Die Handhabung ist einfach: Zue
rst wird die gewünschte Skriptsprache ausgewählt. Zur Verfügung stehen hier PHP, ASP (VBscript oder Javascript) und JSP. In das darunter liegende Fenster kopiert man dann einfach das umzuwandelnden Ascii- oder HTML-Statement. Schließlich gibt man dem zu erstellenden String noch einen Namen, und fertig ist das fehlerfreie Skriptstatement.

Auf derselben Seite findet man übrigens auch noch einen HTML-to-Javascript-Konverter. Er wandelt bei Bedarf umfangreiche HTML-Passagen in eine Serie von document.write().Statements um.

Es geht aber noch besser. Mit dem Tool POG (PHP Object Generator) lässt sich die Datenbank-Programmierung mit PHP erheblich vereinfachen. Was dahinter steht, ist Folgendes: Sie benötigen für eine Website-Applikation eine MySQL-Datenbank zur Ablage und Verwaltung bestimmter Daten. Dabei sollen die Operationen Anlegen, Abfragen, Aktualisieren und Löschen abgedeckt werden.

So etwas manuell zu programmieren, kann aufwendig sein. Das Online-Tool POG erledigt das in wenigen Schritten. Als Erstes wählen Sie die PHP-Version und anschließend den gewünschten Database-Wrapper. Es handelt sich dabei um eine separate Klasse, in dem der gesamte datenbankspezifische Code, also Connect zum Datenbank-Server und Authentifizierung, zusammengefasst ist. Hat man die PHP-Version 5.1 gewählt, steht die PDO-Schnittstelle als zusätzlich Option zur Verfügung.

Dann muss das zu generierende Objekt noch benannt werden, und man kann mit der Definition der Attribute beginnen. Diese stehen für die einzelnen Felder der Tabelle, in der die Daten später abgelegt werden sollen. Man muss also eine Bezeichnung und den Typ des Feldes festlegen. Ist dieser Schritt abgeschlossen, kann mit einem Klick auf Generate Code das passende Datenbank-Objekt generiert werden. Der fertige Code wird in einem neuen Fenster präsentiert und kann per Copy and Paste in die eigene Applikation übernommen werden.

Zugriff auf Datenbanken

Webdesign mit Online-Generatoren

Das fertige Objekt stellt die fünf typischen CRUD-Methoden für die Arbeit mit einer Datenbank zur Verfügung CREATE, RETRIEVE, UPDATE und DELETE. Es sollte an dieser Stelle natürlich nicht verschwiegen werden, dass zum Beispiel Pear und andere PHP-Klassensammlungen ähnliche Objekte und Klassen für die Datenbank-Programmierung zur Verfügung stellen. Wer damit jedoch nicht arbeiten will oder kann, weil Pear zum Beispiel nicht zur Verfügung steht, für den ist POG eine Alternative, die einfach zu handhaben ist.

Neben diesen Generatoren, die weiter verwendbaren Code produzieren, sollte man als Webdesigner auch noch einen Blick auf die zahlreichen Validierer werfen. Diese generieren zwar keinen Code, liefern dafür aber umfangreiche Reports, die wertvolle Hinweise geben, wie es zum Beispiel um die Korrektheit der Syntax, die Browser-Kompatibilität und die Barrierefreiheit einer Seite steht.