Denis Potschien 19. April 2013

Schnell und flexibel HTML-Mockups erstellen mit RoughDraft.js

Während der Entwicklung einer Website kommt stets ganz früh schon der Moment, wo ein fertig aussehendes Layout mit Inhalten dargestellt werden muss. Diese Inhalte gibt es zu diesem Zeitpunkt meist nicht, weshalb Blindtexte und allgemeine Fotos herhalten müssen. RoughDraft.js erstellt solche „Blindinhalte“ inklusive des nötigen HTML-Gerüstes mit wenig Aufwand für den Entwickler.

roughdraftjs

RoughDraft.js: Viel Inhalt mit wenig Quelltext

RoughDraft.js ist ein Tool, welches Inhalte basierend auf individuellen Vorgaben automatisiert ausgibt. Nachdem die JavaScript-Bibliothek eingebunden und gestartet ist, reichen wenige Zeilen HTML, um beliebig viele Inhalte in unterschiedlicher Form zu erzeugen:

<div data-draft-repeat="20">
  <img data-draft-image="200/100" />
  <p data-draft-text="15/w"></p>
</div>

Die zu generierenden Inhalte werden ganz normal per HTML ausgezeichnet. Über Data-Attribute werden den Elementen Informationen übergeben, mit denen RoughDraft.js die Inhalte generiert. Im Beispiel wird ein DIV-Element erzeugt, welches 20 Mal wiederholt wird. Darin enthalten ist jeweils ein Bild mit 200 mal 100 Pixel Größe, gefolgt von einem Textabsatz, der aus je 15 Wörtern besteht.

Um die generierten Inhalte per CSS gestalten und gegebenenfalls mit Funktionen versehen zu können, lassen sich die HTML-Elemente auch mit Klassen und weiteren Attributen versehen.

Blindtexte und Bilder einbinden

Die verwendeten Blindtexte und Bilder bezieht RoughDraft.js aus verschiedenen Quellen. Für Texte steht neben dem klassischen „Lorem Ipsum“ unter anderem auch die Alternative „Bacon Ipsum“ zur Verfügung. Bilder können von den Seiten Placehold.it, Placekitten.com und etlichen weiteren bezogen werden. Die Quellen können je nach Vorliebe ausgewählt werden:

$(window).roughDraft({
  "author": "bacon",
  "illustrator" : "placehold"
});

Während die Größe der Bilder in Pixeln angegeben wird, gibt es für die Textlänge unterschiedliche Einheiten. Neben der Anzahl der Wörter eines Textes („#/w“) gibt es die Möglichkeit, die Anzahl der Sätze („#/s“) oder Absätze („#/p“) vorzugeben.

Außerdem existieren spezielle Textformate, zum Beispiel für die Ausgabe von Zahlen oder Benutzerinformationen:

<p data-draft-number="100-999"></p>
<p data-draft-user="email"></p>

Bei Zahlen ist es möglich, einen Zahlenbereich vorzugeben, aus der eine Zahl per Zufall ausgewählt wird. Bei Benutzerinformationen stehen verschiedene Ausgaben wie Name, E-Mail-Adresse, Telefonnummer und Land zur Verfügung.

Fazit: RoughDraft.js ist schnell eingebunden und bietet viele Möglichkeiten, um unterschiedliche Inhalte sehr individuell generieren zu lassen. Vor allem ist es einfach möglich, Veränderungen vorzunehmen. Die Länge der Texte oder Größe der Bilder ist im Nu geändert.

Der Entwickler hat übrigens schon Ideen, um weitere Inhalte wie Videos und Zitate per RoughDraft.js in HTML-Mockups einbauen zu können.

Links zum Beitrag

  • Quickly create and prototype a full interactive HTML mock-up | RoughDraft.js

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.