Füllinhalt: Tools, Tipps und ein dynamisches Beispiel

German (Deutsch) translation by Valentina (you can also view the original English article)

Da das Entwerfen im Browser immer beliebter (und praktischer) wird, steigt der Bedarf an hilfreichen Entwurfswerkzeugen. Eine Reihe von Tools, die sehr hilfreich werden, dreht sich um Füllstoffinhalte. Derzeit gibt es eine Vielzahl von Ressourcen, um Designern zu helfen, die Füllinhalte benötigen, sei es Text oder Bilder.

Da in Photoshop viele Website-Designs verwendet wurden, war das manuelle Kopieren / Einfügen von Text aus dem Web die beste Methode, um ein Design mit Dummy-Inhalten zu „füllen“. Nachdem jedoch viele Website-Designs im Browser ausgeführt werden, kann der Computer dann alle für Sie ausgefüllten Aufgaben ausführen.

In diesem Tutorial werden wir Ihre Optionen für Füllinhalte behandeln. Alles vom Kopieren / Einfügen von statischem Text und Bildern bis zum dynamischen Generieren.

Ein Wort zum Füllinhalt

Es gibt Puristen, die empfehlen, den Füllstoffgehalt um jeden Preis zu vermeiden. Ein Argument ist, dass Füllinhalte Sie von der "echten" Erfahrung der Website, die Sie erstellen, abstrahieren:

Ziel ist es, dem realen Kundenerlebnis so nahe wie möglich zu kommen. Abstrakt dich nicht von der realen Erfahrung. Jede entfernte Ebene drückt Sie immer weiter vom tatsächlichen Kundenerlebnis weg.

Tatsache ist, dass Sie manchmal das echte Kundenerlebnis nicht nachahmen können. Wenn Sie einfache Marketing-Websites mit statischen Inhalten haben, die von einem Content-Strategen erstellt wurden, verwenden Sie diese Inhalte auf jeden Fall, um das Design der Website zu erstellen. Der Inhalt sollte das Design informieren. Wenn Sie jedoch eine Webanwendung entwerfen, die mit benutzergenerierten Inhalten gefüllt ist, ist es oft unmöglich, echte Inhalte zu entwerfen, da Sie diese selbst nicht generieren können. Das machen deine Benutzer. Aus Sicht des Datenschutzes ist es außerdem wahrscheinlich, dass Sie keine tatsächlichen Kundendaten zum Auffüllen von Modellen verwenden dürfen. Sie werden daher aufgrund von rechtlichen oder datenschutzrechtlichen Problemen daran gehindert, der Benutzererfahrung so nahe wie möglich zu kommen.

Es gibt jedoch einige Schritte, die Sie unternehmen können, um dem tatsächlichen Kundenerlebnis nahe zu bleiben:

Wenn für Ihre Site oder Anwendung Daten eingegeben werden müssen, geben Sie echte und relevante Wörter ein und geben Sie den Text ein. Fügen Sie ihn nicht einfach aus einer anderen Quelle ein. Wenn es sich um einen Namen handelt, geben Sie einen echten Namen ein. Wenn es eine Stadt ist, geben Sie eine echte Stadt ein.

Wenn Sie die richtige Art von Füllstoffinhalt verwenden, ist es möglich, der endgültigen Benutzererfahrung sehr ähnlich zu sein. Angenommen, Ihr Design fordert eine Liste von Namen. Anstatt zu verwenden:

Lorem Ipsum
Setz dich Amet
Faucibus Eros
Carin Pulvinar

Sie können echte Namen verwenden:

John Stalewood
Jessica Alley
Stan Norwood
Trevor Singley

Auch hier geht es darum, dem realen Kundenerlebnis so nahe wie möglich zu kommen. Und wenn Sie das mit Füllstoff tun können, machen Sie es!

Da uns unser Handwerk am Herzen liegt, basieren unsere Diskussionen über Werkzeuge und Techniken häufig auf Best Practices und perfekten Lösungen. Weil es uns wichtig ist, werden unser Workflow und unser Fachwissen mit jedem Projekt verbessert. Perfekte Lösungen gibt es in der realen Welt jedoch nicht oft. Aus diesem Grund helfen pragmatische Alternativen (z. B. Füllstoffe) dabei, Projekte rechtzeitig abzuschließen. Ich glaube, das ist vollkommen in Ordnung, solange wir unsere Prinzipien nicht gefährden.

Modelle

Wie wir alle wissen, ist ein vorläufiges Modell nicht annähernd das endgültige, echte Kundenerlebnis. Ihr Design wird sich wahrscheinlich zwischen der ersten und der letzten Iteration drastisch ändern. Füllinhalte können immer noch ein wertvolles Werkzeug sein, um zu sehen, wie Text über die Seite, um Bilder und durch Haltepunkte fließt. Es kann Ihnen helfen, ein Gefühl für die Platzierung von Designelementen, die Ausgewogenheit der Seite und die Verwendung von negativem Leerzeichen zu bekommen.

Es macht keinen Sinn, es komplett abzuschaffen. Der Füllstoffinhalt kann in der anfänglichen Entwurfsphase ein wichtiges Werkzeug für das schnelle Prototyping und die Iteration von Entwurfskonzepten sein. Sobald Sie die frühen Phasen des Designs hinter sich gelassen haben, ist es sehr hilfreich, Inhalte zu verwenden, die dem, was der Benutzer letztendlich sehen wird, ähnlicher sind.

Abschluss

Wo Sie die Grenze für die Verwendung von Füllstoffinhalten ziehen, liegt bei Ihnen. Es gibt kein definitives "Ja, benutze es!" oder "nein, es ist eine Schande!". Die Antwort auf "Soll ich Füllstoff verwenden?" ist, wie es immer zu sein scheint, "es kommt darauf an". Manchmal geht es bei der Rede davon, keine Füllstoffe zu verwenden, eher um eine ideale Welt und nicht um die reale Welt. Du bist ein Profi, entscheidest du. Am Ende erfahren Sie, ob Sie die richtige Entscheidung getroffen haben oder nicht, und wenn Sie das nächste Mal vor der Frage stehen, ob ich Füllinhalte verwenden soll, wissen Sie besser, wie Sie diese Frage beantworten können.

Füllbilder

Es gibt eine Reihe von gehosteten Lösungen zum Einfügen von Bildern in Ihr HTML-Dokument, mit denen Sie verschiedene Bildattribute über eine URL angeben können. Um beispielsweise Placekitten zu verwenden, geben Sie einfach die gewünschte Bildgröße nach deren URL ein. Verwenden Sie dann diese URL als src Ihres <img>-Elements:

<img src="http://placekitten.com/200/300" />

Wenn Sie Kätzchen nicht mögen (warum sind Sie im Internet?), Finden Sie hier einige ähnliche Dienste, die unterschiedliche Anpassungen bieten (weitere Optionen finden Sie in dieser Zusammenfassung):

Fülltext

Es gibt eine Reihe von Gründen, warum Sie Fülltext generieren müssten. Möglicherweise müssen Sie ganze Absätze für die Konzeption eines Blog-Designs generieren. Oder Sie müssen möglicherweise Textkategorien wie E-Mails und Namen für die Gestaltung eines Tabellendesigns generieren. Unabhängig von Ihren Anforderungen gibt es eine Vielzahl von Lösungen zum Generieren von Text in Ihren Designs.

Text kopieren / einfügen

Es gibt zahlreiche Fülltextgeneratoren im Web. Da sich das Webdesign häufig mit Listen, Tabellen und anderen Datenstrukturen befasst, bieten viele Generatoren mehr als nur Lorem Ipsum-Absatzfüller. Unten finden Sie eine(kleine) Liste von Fülltextgeneratoren. Jedes bietet eine Vielzahl von Textkonfigurationen, z. B. das Generieren verschiedener Sprachen, das Einschließen von Text in HTML-Tags, das Schnüren von Text mit Überschriften / Unterüberschriften, das Anpassen der Textlänge und das Fettdrucken oder Kursivschreiben von Wörtern.

Für eine umfassendere Liste von Websites zur Texterzeugung finden Sie hier einige Zusammenfassungen:

Text dynamisch generieren

Sie können Füllinhalte in Ihren HTML-Dokumenten mithilfe einer JavaScript-Bibliothek dynamisch generieren, z. B.:

Da das Entwerfen im Browser immer beliebter wird, kann die alte Kopier- / Einfügetechnik für Füllinhalte ineffizient werden. Warum nicht den Computer diesen Job erledigen lassen? Lassen Sie uns diese Technik genauer behandeln.

Alles dynamisch zusammenfügen

Lassen Sie uns versuchen, einige der bisher behandelten Themen in die Praxis umzusetzen, indem wir ein Designmodell erstellen. Stellen wir uns der Einfachheit halber vor, wir hätten die Aufgabe, ein grundlegendes Website-Design zu erstellen, das Auszüge der Lieblingsartikel von jemandem aus dem gesamten Web zeigt. Wir nennen diese Person Franky und nennen das Design "Franky's Fav Five".

Dieses kleine Beispiel soll zeigen, wie nützlich dynamisch generierte Inhalte beim Entwerfen eines Modells im Browser sind.

Schritt 1: Grundlegendes HTML und CSS

Lassen Sie uns zunächst unseren grundlegenden HTML-Code skizzieren.

<html>
<head>
    <title>Franky's Fav Five</title>
    <link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

Wie Sie sehen können, fügen wir unserer Seite drei zusätzliche Ressourcen hinzu: einen CSS-Reset, ein benutzerdefiniertes CSS-Stylesheet (das wir später schreiben werden) und einen Link zu Googles gehosteter Version von jQuery. Lassen Sie uns nun in unserer Datei styles.css einige grundlegende Stilregeln für unser Modell einfügen:

/* General
============================== */
body {
    font: 1em/1.45 Georgia, serif;
    background: #e9e9e9 repeat;
    color: #222;
}
img {
    max-width: 100%;
    height: auto;
}
strong {
    font-weight: bold;
}
.wrapper {
    width: 95%;
    margin: 0 auto;
}
.content {
    padding: 0 2em;
}
a {
    color: #9c0001;
}

Schritt 2: Erstellen und formatieren Sie die Kopfzeile

Lassen Sie uns nun einen einfachen Header für unsere Seite erstellen. Auch hier ist nichts zu raffiniert, da dies nur ein Beispielmodell ist.

<header class="header">
    <h1 class="header-title">Franky's Fav Five</h1>
</header>

Jetzt fügen wir unserem Header ein einfaches Styling hinzu

/* Header
============================== */
.header {
    padding: .5em 0;
    background: #333;
    color: white;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.header-title {
    font-size: 1.25em;
    font-family: helvetica;
    font-weight: bold;
    text-shadow: 0 1px 0 #000;
}

Jetzt haben wir eine einfache Seite mit einer Überschrift wie folgt:

Schritt 3: Hauptartikel

Jetzt erstellen wir das Markup für unseren Artikelauszug. In diesem Artikel geht es nicht darum, CSS- und HTML-Codierungstechniken zu zeigen, sondern darum, wie mit Füllinhalten gearbeitet wird. Daher werden wir diese Schritte sehr schnell durch einfaches Kopieren und Einfügen behandeln. Zuerst richten wir einen Wrapper und einen Hauptartikel ein.

<section class="wrapper">
    <article class="article">
    </article>
</section>

Hinweis: Ich schätze, dass der Klassenname "Artikel" in einem Artikelelement etwas absurd erscheint - denken Sie daran, dass dies nur eine Demo ist.

Artikelbild

Wir verwenden den Lorempixel-Bildplatzhalterdienst, um Bilder in unserem Markup zu platzieren. Da unsere Artikelcontainer auf eine maximale Breite von 600 Pixel eingestellt sind, ist dies die Bildgröße, die wir von Lorempixel erhalten.

<img src="http://lorempixel.com/600/200/" />

Artikel Text

Jetzt platzieren wir unseren gesamten Artikeltext in einem div. In unserem einfachen Modell werden die folgenden wiederholbaren Inhalte verwendet:

Artikelüberschrift
Meta-Informationen zum Artikel
- Name des Autors
- Quelle des Artikels
Artikelauszug
Lesen Sie mehr Link

<div class="content">
    <h2><a href="#" class="article-title">Article Title Here</a></h2>
    <ul class="article-meta">
        <li><strong>author</strong>: Author Name</li>
        <li><strong>source</strong>: <a href="#">onlinesource.com</a></li>
    </ul>
    <p class="article-paragraph">This is where all the paragraph text will go&hellip; <a href="#">read more &raquo;</a></p>

</div>

Im Wesentlichen ist dies unsere Vorlage für die Präsentation von Auszügen aus Frankys Lieblingslesungen. Jetzt lass es uns stylen!

Gestalte den Artikel

Wir haben unser grundlegendes Markup, also beginnen wir mit dem Styling des Inhalts.

    /* Article
============================== */
.article {
    max-width: 600px;
    padding: 0 0 2em;
    background: #fff;
    margin: 3em auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.article a {
    text-decoration: none;
}
.article a:hover {
    text-decoration: underline;
}
.article img {
    border-radius: 5px 5px 0 0;
}
.article-title {
    display: block;
    font-size: 1.125em;
    line-height: 1.2;
    color: #222;
    margin: 1em 0 0;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    text-transform: capitalize; /* faker won't output the right capitlization, but CSS can handle it! */
}
.article-paragraph {
    color: #555;
    font-size: .875em;
    line-height: 1.5em;
}
.article-paragraph:first-letter {
    text-transform: uppercase;
}

/* Article Meta */
.article-meta {
    color: #777;
    font-size: .75em;
    font-family: arial;
    margin: .25em 0 1em;
    overflow: hidden;
}
.article-meta li {
    float: left;
    margin-right: 1em;
}
.article-meta li:after {
    content: '\00B7';
    margin-left: 1em;
    color: #ccc;
}
.article-meta li:last-child:after {
    display: none;
}
.article-author span {
    font-style: italic;
}

Jetzt haben Sie eine ziemlich einfache Vorlage zum Anzeigen von Artikelausschnitten, die ungefähr so aussieht:

Schritt 4: Einführung eines kleinen PHP

Bisher haben wir einen Artikelauszug (von fünf, da dies "Franky's Fav Five" ist). Anstatt das Markup noch viermal zu kopieren / einzufügen, verwenden wir eine for-Schleife in PHP. Dadurch wird beim Bearbeiten eine einzelne Vorlage unseres Artikelauszugs beibehalten, beim Anzeigen im Browser jedoch mehrere Artikelauszüge. Dies erleichtert die Wartung. Wenn wir jemals unsere Artikelauszugsvorlage optimieren möchten, müssen wir dies nicht mehrmals tun.

Lassen Sie uns unser article-Element in den folgenden Code einschließen:

<?php for($i=1;$i<6;$i++) { ?>
    // <article> element here
<?php } ?>

Beachten Sie, dass unsere for-Schleife mit der Variablen $i beginnt, die gleich eins ist, und ausgeführt wird, bis sie kleiner als 6 ist (also fünfmal ausgeführt wird).

HINWEIS: Stellen Sie sicher, dass Sie Ihre Datei mit der Erweiterung .php umbenennen, falls Sie dies noch nicht getan haben.

Jetzt sollten Sie so etwas haben:

Beachten Sie, wie unser Bild von Lorempixel in jedem Artikel gleich ist? Um ein realistischeres Modell zu erhalten, ändern wir den src des Bildes geringfügig, sodass wir für jeden Artikelauszug ein anderes Bild erhalten.

Abrufen verschiedener Bilder mit LoremPixel

Mit LoremPixel können Sie den Abruftyp, den Sie abrufen, leicht anpassen. Hier sind die Anpassungen, die sie in ihrer URL-Struktur zulassen:

http://lorempixel.com/400/200
- Fordert ein zufälliges Bild von 400 x 200 Pixel an
http://lorempixel.com/400/200/sports
- Fordert ein zufälliges Bild der Sportkategorie an
http://lorempixel.com/400/200/sports/1
- Fordert Bild-Nr. 1/10 aus der Sportkategorie

Derzeit verwenden wir die URL http://lorempixel.com/600/200. Wir wählen eine Kategorie aus, z. B. Sport, und verwenden dann unsere PHP-Zählvariable $i, um die URL so zu ändern, dass jeder Artikelauszug ein separates Bild aus der Sportkategorie anfordert.

Suchen Sie dazu das <img>-Element und ändern Sie seine Quelle wie folgt:

<img src="http://lorempixel.com/600/200/sports/<?php echo $i ?>" />

Wenn nun die PHP-Zählvariable $i mit jeder for-Schleife zunimmt, fordern unsere Bild-URLs jedes Mal ein anderes Bild an. Das von PHP ausgegebene HTML-Markup sieht nun ungefähr so aus:

    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/1" />
        .
        .
        .
    </article>
    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/2" />
        .
        .
        .
    </article>
    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/3" />
        .
        .
        .
    </article>

Jetzt sollten wir etwas haben, das so aussieht:

Schritt 4: Dynamisches Einfügen von Füllinhalten

Nachdem wir nun unsere Basisvorlage mit einem anderen Bild für jeden Auszug erstellt haben, möchten wir für jeden Artikel einen anderen Füllstoffinhalt haben. Dies hilft uns, das Endprodukt besser zu visualisieren.

Hier bietet sich eine Füllinhaltsbibliothek wie faker.js an. Mit der API von faker.js und ein wenig jQuery können wir unsere HTML-Vorlage beim Laden der Seite dynamisch füllen. Die Verwendung der API faker.js ist recht einfach. Sie finden die gesamte API auf der Github-Seite faker.js. Hier ist das Anwendungsbeispiel:

<script src = "Faker.js" type = "text/javascript"></script>
<script>
    var randomName = Faker.Name.findName(); // Caitlyn Kerluke
    var randomEmail = Faker.Internet.email(); // Rusty@arne.info
</script>

Wie Sie sehen können, haben wir durch die Aufnahme von faker.js in unsere Seite Zugriff auf die API, mit der Füllernamen, E-Mails, Adressen, Inhalte und mehr generiert werden können. Rufen Sie einfach das Faker-Objekt mit einer der entsprechenden Methoden auf.

Implementierung von Faker.js auf unserer eigenen Seite

Fügen wir zunächst faker.js zu unserer Seite hinzu. Nach unserem Aufruf von jQuery fügen wir das <script> dafür unten auf der Seite hinzu. Hier ist noch einmal der Link: faker.js.

<script src="faker.js"></script>

Versuchen wir nun, mit faker.js und jQuery gefälschte Inhaltstitel zu generieren. Wenn Sie sich die API von faker.js ansehen, werden Sie feststellen, dass es Methoden zum Generieren von Sätzen, Absätzen und Wörtern mit Lorem Ipsum-Inhalten gibt. Da wir etwas Ähnliches wie einen Artikeltitel wollen, wollen wir einen Satz von Lorem Ipsum: Faker.Lorem.sentence(). Dies wird einen einzelnen Satz wie "praesentium est alias dolor omnis sequi voluptatibus" ausspucken, der einen guten Füllstoffgehalt für einen Artikeltitel darstellt.

Hinweis: faker.js gibt keinen großgeschriebenen Satz aus. Durch Verwendung der CSS-Regel text-transform: capitalize können wir die Großschreibung des Satzes erzwingen; Dies bringt uns der richtigen Formatierung näher.

Wir beginnen damit, unserer Artikeltitelvorlage eine Klasse von faker-sentence hinzuzufügen. Dies fungiert als Hook, mit dem jQuery alle Elemente finden kann, deren Inhalt durch Sätze von Lorem Ipsum ersetzt werden soll.

<h2><a href="#" class="article-title faker-sentence">Article Title Here</a></h2>

Dann werden wir mit jQuery jedes der von PHP ausgegebenen faker-sentence-Elemente durchlaufen und unseren statischen Füllinhalt "Article Title Here" durch einen zufällig generierten Satz von Lorem Ipsum ersetzen.

$('.faker-sentence').each(function(){
    $(this).html(Faker.Lorem.sentence());
});

Jetzt sollten wir etwas haben, bei dem jeder unserer Artikeltitel in Inhalt und Länge variiert und dem dynamischen Inhalt unserer Website ähnlicher ist.

Schritt 5: Ausfüllen der gesamten Seite

Jetzt haben wir alle unsere Artikeltitel ersetzt. Lassen Sie uns über den anderen Inhalt der Seite nachdenken, den wir ersetzen möchten. Wir möchten noch die folgenden Vorlagenstücke ausfüllen:

Autorenname - wie John Williamson
Online-Quelle - wie domainname.com
Absatztext - z. B. ein Lorem-Ipsum-Absatz

Anstatt jQuery für jedes Vorlagenelement zu schreiben, das wir ersetzen möchten, werden wir das Generieren und Ersetzen von Inhalten abstrahieren und dann einfach das, was wir ersetzen möchten, als Argumente übergeben.

Bestimmen Sie, was faker.js generiert

Lassen Sie uns zunächst herausfinden, welche Teile von faker.js wir verwenden, um den benötigten Füllstoffinhalt zu generieren. Wie bereits erwähnt, benötigen wir den Namen einer Person, einen Domainnamen und den Inhalt des Absatzfüllers. Faker.js hat die folgenden Methoden, die wir verwenden können:

Faker.Name.findName() - gibt uns einen Namen wie John Williamson
Faker.Internet.domainName() - gibt uns einen Domainnamen wie eldridge.co.uk
Faker.Lorem.paragraph() - gibt uns einen Absatz mit Lorem ipsum-Inhalten

Fügen Sie HTML-Klassen hinzu, in die wir Füllinhalte einfügen

Nachdem wir nun wissen, welchen Inhalt wir generieren, müssen wir ein Element und eine Klasse hinzufügen, in die wir unseren Füllinhalt einfügen. Wie oben beschrieben, werden wir jeder Klasse "faker-" voranstellen. Wenn wir also nicht mehr nur ein Modell erstellen und faker.js nicht mehr verwenden, können wir die nicht benötigten Füllklassen leicht finden und entfernen.

Hinweis: Stellen Sie sicher, dass die Füllstoffinhaltsklassen mit den Methodennamen faker.js übereinstimmen. Faker.Name.findName() benötigt also die HTML-Klasse faker-findName und Faker.Internet.domainName() benötigt die Klasse faker-domainName usw. Dies ist hilfreich, wenn wir das Suchen und Ersetzen von Füllstoffinhalten in jQuery automatisieren.

Lassen Sie uns zunächst den Autor behandeln, indem wir ein span-Element mit der entsprechenden Klasse hinzufügen:

<li><strong>author</strong>: Author Name</li>
<!-- should become -->
<li><strong>author</strong>: <span class="faker-findName"></span></li>

Jetzt behandeln wir die Quelle, indem wir dem Quelllink eine entsprechende Klasse hinzufügen:

<li><strong>source</strong>: <a href="#">onlinesource.com</a></li>
<!-- should become -->
<li><strong>source</strong>: <a href="#" class="faker-domainName">onlinesource.com</a></li>

Zuletzt wollen wir den Artikelauszug behandeln, indem wir ein span-Element hinzufügen, in das unser Füller lorem ipsum gehen wird:

<p class="article-paragraph">This is where all the paragraph text will go &amp;hellip; <a href="#">read more &amp;raquo;</a>

<!-- should become -->
<p class="article-paragraph"><span class="faker-paragraphs"></span>&amp;hellip; <a href="#">read more &amp;raquo;</a>

Jetzt schreiben wir einfach eine kleine jQuery, die alle unsere Füllstoffinhaltselemente findet und sie mit Füllstoffinhalten füllt, die von faker.js generiert wurden.

Lassen Sie uns eine Variable namens args erstellen. Hier definieren wir die API-Methoden von faker.js, die wir verwenden werden. Denken Sie daran, dass unsere HTML-Klassen den Methoden faker.js zugeordnet sind und einfach faker- vorangestellt werden.

Hinweis: Wir fügen unseren Argumenten Faker.Lorem.sentence() hinzu, sodass Sie das zuvor in Schritt 4 erstellte JavaScript entfernen können, um die Artikeltitel zu finden / zu ersetzen.

var args = {
    'Lorem'         :   ['paragraphs', 'sentence'], // maps to Faker.Lorem.paragraphs() and Faker.Lorem.sentence()
    'Name'          :   ['findName'],               // maps to Faker.Name.findName()
    'Internet'      :   ['domainName']              // maps to Faker.Internet.domainName()
}

Jetzt durchlaufen wir einfach jedes unserer Argumente. Der Schlüssel im Array wird zum Objekt faker.js, während der Wert im Array zur Methode faker.js wird. Der Wert im Array wird der HTML-Klasse zugeordnet, sodass jQuery weiß, nach welchem Element gesucht werden muss.

// loop over args
for (var key in args) {
   var obj = args[key];

   for (var prop in obj) {
        // jQuery finds the appropriate elements and fills them
        $('.faker-'+obj[prop]).each(function(){
            // Faker.Lorem.paragraphs()
            // Faker.Internet.domainName()
            $(this).html( Faker[key][obj[prop]]() );
        });
   }
}

Das ist es! Jetzt sollten Sie so etwas haben:

Wenn Sie unseren Füllstoffinhaltsprozess auf diese Weise abstrahieren, ist das Hinzufügen/Entfernen neuer Arten von Füllstoffinhalten sehr einfach. Wenn Sie jetzt in Zukunft einen neuen Füllstoffinhaltstyp aus faker.js hinzufügen möchten, z. B. eine E-Mail an Faker.Internet.email(), müssen Sie ihn nur der Variablen args hinzufügen und dann ein HTML-Element mit erstellen Eine Klasse von faker-email, wo immer Sie eine gefälschte E-Mail generieren möchten.

Abschluss

Wir haben ein einfaches Modell im Browser erstellt, das ein Designbeispiel mit fünf Artikelausschnitten zeigt.

Unsere Vorlage für jeden Artikelauszug besteht nur aus 13 Zeilen PHP / HTML, während das resultierende HTML viel mehr wäre. Dies ermöglicht ein schnelles und einfaches Prototyping. An diesem Punkt konnten wir leicht die Reaktionsfähigkeit des Designs testen und sehen, wie Inhalt und Text zurückfließen. Wir könnten jedes CSS optimieren, das dies erfordert, oder wir könnten sehr einfach weitere Designelemente mit entsprechendem Füllstoffgehalt hinzufügen. Der dynamische Füllstoffgehalt ermöglicht ein schnelles Prototyping von Designs. Vielleicht werden Sie in einem zukünftigen Projekt einen Bedarf dafür finden!

Andere Verwendungen

Wie Sie vielleicht sehen werden, kann diese Art des Prototyping für viele andere Webdesign-Aufgaben nützlich sein - insbesondere für datengesteuerte. Wenn Sie beispielsweise eine Kontakttabelle mit Namen, Adressen, E-Mails, Telefonnummern usw. erstellen müssen, können Sie mit faker.js auf einfache Weise den gewünschten Füllinhalt generieren. Auf diese Weise können Sie sich leichter auf das Design der Tabelle konzentrieren, anstatt Tonnen von Daten in Ihren HTML-Code kopieren/einfügen zu müssen, um ein Gefühl dafür zu bekommen, wie sie aussehen und reagieren.