Dummy: Umfassendes PHP-Toolkit für das Rapid Prototyping von Websites

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Wenn man täglich auf der Suche nach neuen, interessanten Technologien und Tools ist, die das Berufsleben eines Webworkers erleichtern und im besten Falle bereichern können, ist man einiges gewohnt und nicht mehr so leicht zu begeistern. Das PHP-Toolkit Dummy von David Kerns, um das es im folgenden Beitrag gehen soll, hat es dennoch geschafft. Dummy kann eine komplette Website mit flexiblen Inhalten versehen, die sich zudem bei jedem Browser-Reload ändern. Vergessen wir die ganzen statischen Platzhalter-Inhaltsdienste. Jetzt kommt Dummy!

PHP-Toolkit für Rapid Prototyping

PHP-Dummy: Prototyping mit dynamischen Inhalten

In den letzten Wochen stellten wir im Dr. Web Magazin eine ganze Reihe von Platzhalterdiensten vor. Mit diesen lassen sich Text- oder Bildinhalte generieren, die ein Layout mit Inhalten füllen, bevor es echte Kundeninhalte gibt. Derlei Dienste sind für erste Mockups nahezu unverzichtbar, will man nicht immer den gleichen Lorem Ipsum einkopieren und (pfui!) das gleiche 1-Pixel-Gif hoch skalieren. Ich weiß, letzteres macht keiner (mehr)…

Mit dem PHP-basierten Toolkit Dummy lassen sich sowohl Text-, wie auch Bildinhalte generieren und einfügen. Die verwendete Syntax ist dabei fast schon natürlich-sprachlich, jedenfalls leicht verständlich und lesbar. Neben der Generierung von Zufallsinhalten ist Dummy in der Lage, diese in Länge und/oder Ausführung zu variieren. Das ist insbesondere dann nützlich, wenn letztlich die echten Inhalte aus einer oder mehreren Datenbanken kommen werden. So lassen sich mit Dummy schon im Vorfeld sauber die Auswirkungen von sehr viel oder sehr wenig Content auf das Layout simulieren.

Das klingt alles extrem theoretisch, deshalb werde ich etwas in Detail gehen. Voraussetzung für die erfolgreiche Verwendung des Toolkit ist eine Apache-Installation mit PHP und GD-Support. Diese Konfiguration ist bei jedem mir bekannten Hoster Standard, so dass der Prototyp auch dem Kunden via Web gezeigt werden kann. Entwickelt wird selbstverständlich ausschließlich lokal.

Jedes Dokument, welches mit Dummy bestückt werden soll, erhält in der ersten Zeile folgenden Aufruf:

<? require_once("dummy/dummy.php") ?>

Dummy generiert Textinhalte

Dummy beherrscht eine ganze Reihe verschiedener Textinputs und kann so zielgenau Inhaltselemente bestücken. Eine Überschrift als Headline würde man so erzeugen:

<? dummy("text@headline") ?>

Auf die gleiche Weise werden Teasertexte, ganze Absätze oder Infoschnipsel, wie Datum, Autor oder Zeit erzeugt. Innerhalb des Verzeichnisses dummy/assets/text finden sich alle verwendeten Texte im Nur-Text-Format. So können sie leicht verändert oder auf größere Projekte gezielt angepasst werden.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

PHP-Toolkit für Rapid Prototyping
Per Dummy generierte Startseite eines potenziellen Nachrichtenmagazins

Dummy generiert Bildinhalte

In ähnlich lesbarer Weise werden mit Dummy Bildinhalte generiert. Hierzu wird Dummy bereits mit einer großen Zahl unter CC-Lizenz stehender Bilder ausgeliefert. Ähnlich wie bei den Texten, ist es aber auch hier möglich, eigene Bilder zu hinterlegen.

Im einfachsten Fall möchte man mit Dummy ein Bild einbinden, für das man die Ausrichtung Querformat und eine Größe von 480 x 320 Pixeln definiert. Das ginge so:

" />

Statt der Pixelwerte ist es auch möglich, nur Seitenverhältnisse, etwa 16:9, oder eine Mischung aus beiden zu verlangen. Pixelwerte können zudem auf Wunsch auch nur teilweise gesetzt werden, wie das folgende Beispiel zeigt:

" />

Hier wurde auch auf die zuvor getroffene Festlegung der Bildausrichtung verzichtet, diese ergibt sich aus dem Seitenverhältnis. Angefordert wird ein Bild im Format 16:9, das eine Breite von 640 Pixeln hat. Die Angabe des Seitenverältnisses wird mit einem Komma von der Angabe der Pixelwerte getrennt. In welcher Reihenfolge deklariert wird, ist egal.

Für die Einbindung von simulierten Werbeanzeigen führt Dummy ein eigenes Element und ist in der Lage, diese als Bild oder – wie immer noch in der Werbeindustrie üblich – als Flash zu platzieren.

<? dummy("ad@120x90") ?>

Dumb Luck: Dummys eigentliche Stärke

Dummy beschränkt sich nicht auf die zweifellos bereits ausreichend hohe Nützlichkeit der zuvor genannten Möglichkeiten. Mit der Funktion dumb_luck integriert es vielmehr eine wirklich mächtige Funktionalität, die generierten Inhalte nahezu beliebig zu manipulieren.

So ließen sich gezielt Tests fahren, wie ein Layout auf eine Veränderung, auch eine massive Veränderung der Inhalte reagieren wird. Zudem ist dumb_luck in der Lage, ein Element in beliebiger Zahl anzuzeigen. Das ist praktisch, wenn man beispielsweise eine Thumbnail-Galerie simulieren will.

Wir schauen uns wieder ein paar Beispiele an, um das Konzept zu verdeutlichen. In der einfachsten Variante des Funktionsaufrufs lassen sich mit dumb_luck Wahrscheinlichkeiten abbilden. So könnte man eine Art A/B-Test anlegen, bei dem mit einer Wahrscheinlichkeit von z.B. 50% ein Element im Layout enthalten ist.

<? if (dumb_luck("50%")): ?>
  Dieser Text, der auch ein Bild oder eine ganze Funktionseinheit sein könnte, wird in 50% aller Fälle angezeigt.
<? endif ?>

Dadurch, dass hier eine Standard-PHP-Syntax verwendet wird, können die Konstrukte beliebig komplex werden.

<? if (dumb_luck("95%")): ?>
  Das hier passiert fast immer.
<? else: ?>
  Dieses hier nur in 5% aller Fälle.
<? endif ?>

Will man beispielsweise eine Thumbnailgalerie in das Layout integrieren, wäre das in manueller Arbeit, speziell dann, wenn die Galerie eine nennenswerte Größe haben soll, ein ziemlicher Aufwand. Mit Dummy beschränkt sich der Aufwand auf eine einzelne Code-Zeile:

<? while (dumb_luck("50-100")): ?>
  <? dummy("image@35x35") ?>
<? endwhile ?>

Im Beispiel würde eine Bilddatei mit 35 x 35 Pixeln Größe zwischen 50 und 100 Mal in das Layout eingefügt. Durch die Dynamik lässt sich erkennen, wie sich mehr oder weniger Content auf das Design auswirkt.

In gleicher Weise würde man mit Text-Inhalten verfahren. Das folgende Beispiel erzeugt eine unsortierte Liste mit fünf bis zehn Eintragungen eines Textes aus der Kategorie Headline, bei denen eine 50%ige Wahrscheinlichkeit besteht, dass sie zusätzlich mit einem Link versehen sind.

<? else: ?>

    • <? dummy(“text@headline”) ?>

<? endif ?> <? endwhile ?>

Ich erwähnte es bereits eingangs, ich bin in der Tat von den Möglichkeiten begeistert und werde Dummy mit Sicherheit beim nächsten Prototypen eine Chance geben. Das Projekt steht auf GitHub zum kostenlosen Download bereit. Es wiegt derzeit rund 30MB, was vor allem an der Vielzahl der mitgelieferten, mit ihren Lizenzen dokumentierten Bildern liegt.

Links zum Beitrag:

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Peter
Gast

Zensur der Kommentare? Ging und wird auch immer nach hinten los gehen…..

Andreas Hecht
Gast

Sehr coole Sache und unheimlich nutzbringend. Schade nur, dass keine Bilddateien mit Exif-Daten bereit gestellt werden, dass hätte ich für ein neues Projekt gerade sehr gut gebrauchen können.

wpDiscuz