Filler-inhoud tools, tips en een dynamisch voorbeeld

Omdat ontwerpen in de browser steeds populairder (en handig) wordt, neemt de behoefte aan handige ontwerptools toe. Een reeks hulpmiddelen die vrij nuttig wordt, draait om de inhoud van de vuller. Momenteel bestaan er verschillende bronnen om ontwerpers te helpen die opvulmateriaal nodig hebben, of dit nu tekst of afbeeldingen zijn.

Omdat veel webdesign vroeger in Photoshop plaatsvond, was het handmatig kopiëren / plakken van tekst op het web de beste methode om een ontwerp met dummy-inhoud 'in te vullen'. Nu er echter veel website-ontwerp plaatsvindt in de browser, waarom laat u de computer dan niet alles voor u invullen??

In deze zelfstudie behandelen we uw opties voor het invullen van inhoud. Alles, van het kopiëren / plakken van statische tekst en afbeeldingen tot het dynamisch genereren ervan.

Een woord over Filler-inhoud

Er zijn puristen die adviseren om vullerinhoud te vermijden ten koste van alles. Een argument is dat de inhoud van de opvuller je afleidt van de 'echte' ervaring van de website die je aan het bouwen bent:

Het doel is om zo dicht mogelijk bij de echte klantervaring te komen. Vat jezelf niet af van de echte ervaring. Elke verwijderde laag duwt je verder en verder weg van de daadwerkelijke klantervaring.

Het is een feit dat je soms de echte klantervaring niet kunt imiteren. Als u eenvoudige marketingwebsites hebt met statische inhoud gemaakt door een contentstrateeg, gebruik dan die inhoud om het ontwerp van de website uit te bouwen. De inhoud moet het ontwerp informeren. Maar als u een webtoepassing ontwerpt die is gevuld met door gebruikers gegenereerde inhoud, is het vaak onmogelijk om te ontwerpen op basis van echte inhoud, omdat u deze zelf niet kunt genereren; dat is gedaan door uw gebruikers. Bovendien is het vanuit een privacyperspectief waarschijnlijk dat u geen daadwerkelijke klantgegevens mag gebruiken om mockups in te vullen. U kunt dus niet zo dicht mogelijk bij de gebruikerservaring komen vanwege juridische of privacyproblemen.

Er zijn echter stappen die u kunt nemen om dicht bij de echte klantervaring te blijven:

Als uw site of applicatie gegevensinvoer vereist, voert u echte en relevante woorden in en typt u de tekst. Plak deze niet gewoon in vanuit een andere bron. Als het een naam is, typt u een echte naam. Als het een stad is, typ dan een echte stad.

Als u het juiste type vulstofcontent gebruikt, is het mogelijk om sterk op de uiteindelijke gebruikerservaring te lijken. Stel dat uw ontwerp bijvoorbeeld om een lijst met namen vraagt. In plaats van gebruiken:

Lorem Ipsum
Zit Amet
Faucibus Eros
Carin Pulvinar

U kunt echte namen gebruiken:

John Stalewood
Jessica Alley
Stan Norwood
Trevor Singley

Nogmaals, het doel is om zo dicht mogelijk bij de echte klantervaring te komen. En als je dat kunt doen met behulp van de inhoud van de filler, ga ervoor!

Omdat we om ons vak geven, zijn onze discussies over tools en technieken vaak gebaseerd op best practices en perfecte oplossingen. Omdat het ons iets kan schelen, worden onze workflow en expertise met elk project verbeterd. Perfecte oplossingen bestaan echter niet vaak in de echte wereld. Daarom helpen pragmatische alternatieven (zoals inhoud van de filler) om projecten tijdig af te ronden. Ik geloof dat dit prima is, zolang we onze principes niet schaden.

mockups

Een voorlopige mockup, zoals we allemaal weten, staat niet dicht bij de uiteindelijke, echte klantervaring. Uw ontwerp zal waarschijnlijk drastisch veranderen tussen de eerste en laatste iteraties. Filler-inhoud kan nog steeds een waardevol hulpmiddel zijn om te zien hoe tekst langs de pagina, rond afbeeldingen en door breekpunten stroomt. Het kan u helpen een gevoel te krijgen voor de plaatsing van ontwerpelementen, de balans van de pagina en het gebruik van negatieve ruimte.

Het helemaal niet doen heeft geen zin. Filler-inhoud kan een cruciaal hulpmiddel zijn in de initiële ontwerpfase voor snelle prototyping en iteratie van ontwerpconcepten. Als je eenmaal de beginfase van het ontwerp bent gepasseerd, zou het erg handig zijn om inhoud te gebruiken die meer lijkt op wat de gebruiker uiteindelijk ziet.

Conclusie

Waar je de grens trekt met het gebruik van filler-content is aan jou. Er is geen definitieve "ja, gebruik het!" of "nee, het is een schande!". Het antwoord op "moet ik vulinhoud gebruiken?" is, zoals het altijd lijkt, "het hangt ervan af". Soms gaat praten over het niet gebruiken van vulstofinhoud meer over een ideale wereld en niet over de echte wereld. Je bent een professional, jij beslist. Uiteindelijk zul je leren of je de juiste beslissing hebt genomen en de volgende keer dat je de vraag krijgt "moet ik vulinhoud gebruiken?", Dan zul je beter weten hoe je die vraag moet beantwoorden..

Filler afbeeldingen

Er zijn een aantal gehoste oplossingen voor het invoegen van afbeeldingen in uw HTML-document, zodat u verschillende afbeeldingskenmerken via een URL kunt opgeven. Als u bijvoorbeeld placekitten wilt gebruiken, plaatst u eenvoudig de gewenste afbeeldingsgrootte na de URL. Gebruik die URL vervolgens als src van uw element:

Als je Kittens niet leuk vindt (waarom ben je op internet?), Volgen hier een aantal vergelijkbare diensten die verschillende aanpassingen bieden (zie deze samenvatting voor meer opties):

lorempixel
placehold.it
dummyimage

Filler-tekst

Er zijn een aantal redenen waarom u vultekst zou moeten genereren. Misschien moet je hele alinea's genereren voor het conceptualiseren van een blogontwerp. Of misschien moet u categorieën tekst genereren, zoals e-mails en namen voor het stylen van een tabelontwerp. Wat uw behoefte ook is, er zijn verschillende oplossingen voor het genereren van tekst in uw ontwerpen.

Tekst kopiëren en plakken

Er zijn talloze generatoren voor het genereren van opvulstekst op het internet. Omdat webontwerp vaak te maken heeft met lijsten, tabellen en andere datastructuren, bieden veel generatoren meer dan Lorem Ipsum-alinea-opvuller. Hieronder vindt u een (kleine) lijst met generators voor vultekst. Elk biedt een verscheidenheid aan tekstconfiguraties, zoals het genereren van verschillende talen, het insluiten van tekst in HTML-tags, het rijgen van tekst met koppen / subkoppen, het aanpassen van de tekstlengte en vet toevoegende of cursiverende woorden.

Lipsum
HTML-ipsum
Blinde tekstgenerator
Dummy-tekstgenerator
Willekeurige tekstgenerator

Voor meer uitgebreide lijsten met tekstgenererende websites, volgen hier een paar razzia's:

webdesigner depot
demosthenes
een andere demosthenes
coderende horror

Dynamisch tekst genereren

U kunt inhoud van de opvuller dynamisch genereren in uw HTML-documenten met behulp van een JavaScript-bibliotheek, zoals:

Fixie.js
Faker.js

Naarmate ontwerpen in de browser populairder wordt, kan de oude kopieer- / plaktechniek voor inhoud van de opvulling inefficiënt worden. Waarom laat je de computer die klus niet aan? Laten we deze techniek dieper ingaan.

Alles samenvoegen, dynamisch

Laten we proberen een deel van wat we tot nu toe hebben behandeld in de praktijk te brengen door een ontwerpmodel te maken. Laten we ons in eenvoud voorstellen dat we de taak hebben om een basisontwerp voor de website te maken waarin fragmenten van iemands favoriete artikelen van overal op het web te zien zijn. We zullen deze persoon Franky noemen en we zullen het ontwerp "Franky's Fav Five" noemen.

Dit kleine voorbeeld moet de bruikbaarheid van dynamisch gegenereerde inhoud laten zien bij het ontwerpen van een mockup in de browser.

Stap 1: Basic HTML en CSS

Laten we eerst onze eenvoudige HTML beschrijven.

   Franky's Fav Five

Zoals je ziet, voegen we drie extra bronnen toe aan onze pagina: een CSS-reset, een aangepaste CSS-stylesheet (die we later zullen schrijven) en een link naar de gehoste versie van Google van jQuery. Nu, in onze styles.css bestand, laten we enkele basisstijlregels opnemen voor onze mockup:

 / * Algemeen ============== * / lichaam font: 1em / 1.45 Georgia, serif; achtergrond: # e9e9e9 herhalen; kleur: # 222;  img max-width: 100%; hoogte: auto;  sterk font-weight: bold;  .wrapper width: 95%; marge: 0 auto;  .content opvulling: 0 2em;  a color: # 9c0001;

Stap 2: Maak en ontwerp de koptekst

Laten we nu een eenvoudige koptekst voor onze pagina maken. Nogmaals, niets te geavanceerd omdat dit slechts een voorbeeldmodel is.

  Franky's Fav Five

Nu voegen we wat eenvoudige styling toe aan onze header

 / * Header ============== * / .header opvulling: .5em 0; achtergrond: # 333; kleur wit; text-align: center; vakschaduw: 0 1px 3px rgba (0,0,0, .5); achtergrond: # 45484d; / * Oude browsers * / achtergrond: -moz-linear-gradient (bovenaan, # 45484d 0%, # 000000 100%); / * FF3.6 + * / achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, kleur-stop (0%, # 45484d), kleur-stop (100%, # 000000)); / * Chrome, Safari4 + * / achtergrond: -webkit-lineair verloop (bovenaan, # 45484d 0%, # 000000 100%); / * Chrome10 +, Safari5.1 + * / achtergrond: -o-lineaire gradiënt (boven, # 45484d 0%, # 000000 100%); / * Opera 11.10+ * / achtergrond: -ms-linear-gradient (bovenaan, # 45484d 0%, # 000000 100%); / * IE10 + * / achtergrond: lineair verloop (naar beneden, # 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; lettertype: vet; tekstschaduw: 0 1px 0 # 000;

Nu hebben we een eenvoudige pagina met een koptekst, zoals deze:

Stap 3: Hoofdartikel

Laten we nu de markup voor ons artikelfragment maken. Het doel van dit artikel is niet om CSS- en HTML-coderingstechnieken weer te geven, maar veeleer om te werken met inhoud van de opvuller. Daarom zullen we deze stappen zeer snel behandelen met eenvoudig kopiëren en plakken. Eerst stellen we een wrapper en een hoofdartikel in.

Notitie: Ik waardeer dat een klassenaam van "artikel" op een artikelelement misschien een beetje absurd lijkt - onthoud dat dit puur een demo is ...

Artikel afbeelding

We zullen de placeholder-service lorempixel image gebruiken om afbeeldingen in onze opmaak te plaatsen. Omdat onze artikelcontainers zijn ingesteld op een maximale breedte van 600 pixels, is dat de afbeeldingsgrootte die we van lorempixel pakken.

Artikel Tekst

Nu plaatsen we de gehele tekst van ons artikel in a div. Onze eenvoudige mockup gebruikt de volgende herhaalbare stukjes inhoud:

Artikel titel
Meta-informatie over het artikel
- Auteursnaam
- Bron van het artikel
Artikel uittreksel
Lees meer link

  Artikel titel hier
  schrijver: Auteur naam
 bron: onlinesource.com
 
 Dit is waar alle alinea-tekst zal gaan… Lees verder "

In wezen is dit onze sjabloon voor het presenteren van fragmenten van Franky's favoriete voordrachten. Laten we het nu stylen!

Style het artikel

We hebben onze standaardmarkeringen, dus we beginnen met het inrichten van de inhoud.

 / * Article ============== *=============== * / .article max-width: 600px; opvulling: 0 0 2em; achtergrond: #fff; marge: 3em auto; border: 1px solid #ddd; grensradius: 5px; vakschaduw: 0 1px 2px rgba (0,0,0, .1);  .artikel a text-decoration: none;  .artikel a: hover text-decoration: onderstrepen;  .article img border-radius: 5px 5px 0 0;  .article-title display: block; lettergrootte: 1.125em; regelhoogte: 1,2; kleur: # 222; marge: 1em 0 0; lettertype: vet; font-family: Helvetica, Arial, sans-serif; text-transform: hoofdletter maken; / * faker voert de juiste capitlisatie niet uit, maar CSS kan het aan! * / .artikel-paragraph color: # 555; font-size: .875em; regelhoogte: 1.5em;  .artikel-paragraph: eerste letter text-transform: hoofdletter;  / * Article Meta * / .article-meta color: # 777; lettertypegrootte: .75em; lettertype-familie: arial; marge: .25em 0 1em; overloop verborgen;  .artikel-meta li float: left; margin-right: 1em;  .article-meta li: after content: '\ 00B7'; marge links: 1em; kleur: #ccc;  .article-meta li: last-child: after display: none;  .artikel-auteurbereik font-style: italic;

Nu heb je een vrij eenvoudige sjabloon om artikelfragmenten weer te geven die er ongeveer zo uitziet:

Stap 4: Introductie van een beetje PHP

Tot nu toe hebben we één artikelfragment (van de vijf, want dit is "Franky's Fav Five"). In plaats van de markup nog vier keer te kopiëren / plakken, gebruiken we a voor loop in PHP. Als u dit doet, houdt u tijdens het bewerken één sjabloon bij van ons artikelfragment, maar meerdere artikelfragmenten bij weergave in de browser. Dit zorgt voor eenvoudig onderhoud; als we onze artikeluittreksjabloon ooit willen aanpassen, hoeven we het niet meerdere keren te doen.

Laten we onze pakken artikel element in de volgende code:

  //  element hier

Let op onze voor lus begint met de variabele $ i gelijk zijn aan één en loopt tot het minder dan 6 is (dus het loopt 5 keer).

NOTITIE: Vergeet niet uw bestand te hernoemen met de extensie .php als je dat nog niet hebt gedaan.

Nu zou je zoiets als dit moeten hebben:

Merk op hoe ons beeld van lorempixel in elk artikel hetzelfde is? Om een meer realistische mockup te bereiken, zullen we de afbeelding iets aanpassen src dus we krijgen een ander beeld voor elk artikelfragment.

Verschillende afbeeldingen krijgen met LoremPixel

Met LoremPixel kunt u het type afbeelding dat u ophaalt enigszins aanpassen. Dit zijn de aanpassingen die ze toestaan in hun URL-structuur:

http://lorempixel.com/400/200
- Verzoekt een willekeurige afbeelding van 400 x 200 pixels
http://lorempixel.com/400/200/sports
- Verzoekt een willekeurige afbeelding van de sportcategorie
http://lorempixel.com/400/200/sports/1
- Verzoeken afbeelding nr. 1/10 van de sportcategorie

Momenteel gebruiken we de URL http://lorempixel.com/600/200. Wat we zullen doen is een categorie kiezen, zoals sport, en dan onze PHP-telvariabele gebruiken $ i om de URL te wijzigen, zodat voor elk artikeluittreksel een afzonderlijke afbeelding uit de sportcategorie wordt gevraagd.

Om dit te doen, zoek de element en wijzig de bron zoals zo:

Nu, als de php-telvariabele $ i toeneemt met elke for-lus, vragen onze afbeeldings-URL's telkens om een andere afbeelding. De HTML-markup-uitvoer van PHP ziet er nu ongeveer zo uit:

  ... 
  ... 
  ...

Nu zouden we iets moeten hebben dat er zo uitziet:

Stap 4: Dynamisch invoegen van Filler-inhoud

Nu we onze basissjabloon voor elk fragment in een andere afbeelding hebben staan, willen we voor elk artikel een andere inhoud voor de opvulling. Dit zal ons helpen om het eindproduct beter te visualiseren.

Hier komt een filler content-bibliotheek als faker.js van pas. Door de API van faker.js samen met een klein beetje jQuery te gebruiken, kunnen we onze HTML-sjabloon dynamisch aanvullen bij het laden van de pagina. Het gebruik van de faker.js API is vrij eenvoudig. U kunt de volledige API vinden op de github-pagina van faker.js. Hier is het gebruiksvoorbeeld:

Zoals u kunt zien, hebben we door faker.js op onze pagina op te nemen toegang tot de API die vulernamen, e-mails, adressen, inhoud en meer kan genereren. Roep het Faker-object eenvoudig aan met een van de bijbehorende methoden.

Implementatie van Faker.js in onze eigen pagina

Laten we eerst faker.js toevoegen aan onze pagina. We zullen het toevoegen

Laten we nu proberen fake-inhoudstitels te genereren met faker.js en jQuery. Als u door de API van faker.js kijkt, ziet u dat er methoden zijn voor het genereren van zinnen, alinea's en woorden van Lorem Ipsum-inhoud. Omdat we iets willen dat lijkt op de titel van een artikel, willen we een zin van Lorem Ipsum: Faker.Lorem.sentence (). Dit spuugt een enkele zin uit zoals "praesentium est alias dolor omnis sequi voluptatibus", wat een goed vulmiddel is voor de titel van een artikel.

 Notitie: faker.js voert geen hoofdletter uit. Door de CSS-regel te gebruiken text-transform: hoofdletter we kunnen de zin dwingen om te worden gekapitaliseerd; waardoor we dichter bij de juiste opmaak komen.
 We beginnen met het toevoegen van een klasse van faker-zin naar de titel van ons artikel. Dit zal fungeren als een haak waarmee jQuery alle elementen kan vinden waarvan de inhoud moet worden vervangen door zinnen van lorem ipsum.
  Artikel titel hier
 Vervolgens, met behulp van jQuery, fietsen we door elk van de faker-zin elementen output door PHP en vervang onze statische inhoud "Artikel titel hier" met een willekeurig gegenereerde zin van Lorem Ipsum.
  $ ('. faker-zin'). each (function () $ (this) .html (Faker.Lorem.sentence ()););
 Nu zouden we iets moeten hebben waar elk van onze artikeltitels qua inhoud en lengte varieert en meer overeenkomt met de dynamische inhoud van onze site.
  
  Stap 5: De hele pagina vullen 
 Nu hebben we al onze artikeltitels vervangen. Laten we eens nadenken over de andere inhoud op de pagina die we willen vervangen. We willen nog steeds de volgende sjabloondelen invullen:
  Naam van de auteur - zoals John Williamson
 Online bron - zoals domainname.com
 Alineastekst - zoals een paragraaf over loremipsum
 
 In plaats van jQuery uit te schrijven voor elk sjabloonstuk dat we willen vervangen, abstraheren we het genereren en vervangen van inhoud en geven we eenvoudigweg door wat we willen vervangen als argumenten.
 Bepaal wat faker.js zal genereren
 Laten we eerst eens kijken welke delen van faker.js we gaan gebruiken om de inhoud van de opvulling te genereren die we nodig hebben. Zoals vermeld, hebben we de naam van een persoon, een domeinnaam en een alinea-inhoud nodig. Faker.js heeft de volgende methoden die we kunnen gebruiken:
   Faker.Name.findName () - geeft ons een naam, zoals John Williamson
  Faker.Internet.domainName () - geeft ons een domeinnaam, zoals eldridge.co.uk
  Faker.Lorem.paragraph () - geeft ons een alinea met Lorem ipsum-inhoud
 
 HTML-klassen toevoegen waar we Filler-inhoud plaatsen
 Nu we weten welke inhoud we genereren, moeten we een element en een klasse toevoegen waar we onze inhoud zullen plaatsen. Zoals we hierboven hebben gedaan, zullen we elke klasse een voorvoegsel geven met "faker-", op die manier wanneer we verder gaan dan het maken van een mock en stoppen met het gebruik van faker.js kunnen we de opvulklassen die we niet nodig hebben eenvoudig vinden en verwijderen.
 Notitie: zorg ervoor dat de inhoudsklassen voor de opvulling overeenkomen met de namen van de faker.js-methode. Zo Faker.Name.findName () heeft de HTML-klasse nodig faker-findName en Faker.Internet.domainName () zal de klas nodig hebben faker-domainName enz. Dit zal nuttig zijn wanneer we het vinden en vervangen van vulstofinhoud in jQuery automatiseren.
 Laten we eerst de auteur behandelen door een span element met de juiste klasse:
  schrijver: Auteur naam
  schrijver: 
 Nu gaan we om met de bron door de juiste klasse aan de bronlink toe te voegen:
  bron: onlinesource.com
  bron: onlinesource.com
 Tenslotte, laten we het artikelfragment behandelen door een span element waar onze filler lorem ipsum zal gaan:
  Dit is waar alle alinea-tekst zal gaan … Lees verder »  
… Lees verder »
 Nu schrijven we gewoon een klein jQuery dat al onze filler content-elementen zal vinden en zal ze vullen met filler content gegenereerd door faker.js.
 Laten we een variabele maken genaamd args. Hier worden de faker.js API-methoden gedefinieerd die we zullen gebruiken. Houd er rekening mee dat onze HTML-klassen verwijzen naar de faker.js-methoden en dat deze eenvoudig worden voorafgegaan door oplichter-.
 Notitie: we voegen toe Faker.Lorem.sentence () aan onze argumenten, zodat u het JavaScript kunt verwijderen dat we eerder in stap 4 hebben gemaakt om de artikeltitels te vinden / vervangen.
  var args = 'Lorem': ['paragraph', 'sentence'], // maps to Faker.Lorem.paragraphs () en Faker.Lorem.sentence () 'Name': ['findName'], // maps to Faker.Name.findName () 'Internet': ['domainName'] // kaarten naar Faker.Internet.domainName ()
 Nu lopen we gewoon over elk van onze argumenten heen. De sleutel in de array wordt het object faker.js terwijl de waarde in de array de faker.js-methode wordt. De waarde in de array wordt toegewezen aan de HTML-klasse, dus jQuery weet welk element moet worden gezocht.
  // loop over args for (var-key in args) var obj = args [key]; for (var prop in obj) // jQuery vindt de juiste elementen en vult ze $ ('. faker -' + obj [prop]). each (function () // Faker.Lorem.paragraphs () // Faker .Internet.domainName () $ (this) .html (Faker [key] [obj [prop]] ());); 
 Dat is het! Nu zou je zoiets als dit moeten hebben:
  Het op deze manier samenvatten van ons filler-inhoudsproces maakt het toevoegen en verwijderen van nieuwe soorten vulstofinhoud heel eenvoudig. Nu in de toekomst, als u een nieuw inhoudstype voor de opvulling wilt toevoegen van faker.js, zoals een e-mail Faker.Internet.email () alles wat je hoeft te doen is het toevoegen aan de args variabele en maak vervolgens een HTML-element met een klasse van faker-mail waar je maar wilt, een nep email gegenereerd.
 
 Conclusie
 We hebben een eenvoudige mockup in de browser gebouwd met een designvoorbeeld van vijf artikelfragmenten.
  Onze sjabloon voor elk artikelfragment is slechts 13 regels PHP / HTML, terwijl de resulterende HTML zou zijn veel meer dan dat. Dit zorgt voor snelle en eenvoudige prototyping. Op dit punt kunnen we eenvoudig de responsieve aard van het ontwerp testen en zien hoe inhoud en tekst terugstromen. We kunnen elke CSS die dit vereist aanpassen, of we kunnen heel gemakkelijk meer ontwerpelementen toevoegen met bijbehorende inhoud. De dynamische inhoud van de filler zorgt voor snelle prototyping van ontwerpen. Misschien vindt u er in een toekomstig project behoefte aan!
 Andere gebruiken
 Zoals u misschien ziet, kan dit type prototyping nuttig zijn voor vele andere webontwerptaken, met name gegevensgestuurde taken. Als u bijvoorbeeld een tabel met contactpersonen met namen, adressen, e-mails, telefoonnummers en meer wilt ontwerpen, kunt u faker.js gebruiken om gemakkelijk alle gewenste inhoud te genereren. Hierdoor kunt u gemakkelijker op het ontwerp van de tafel focussen in plaats van dat u heel veel gegevens in uw HTML hoeft te kopiëren / plakken om een idee te krijgen van hoe het eruit ziet en antwoordt.



		
			
	   
	




Web ontwerp