Contenuto di riempimento strumenti, suggerimenti e un esempio dinamico

Poiché la progettazione nel browser diventa più popolare (e conveniente), la necessità di strumenti di progettazione utili è in aumento. Un set di strumenti che sta diventando molto utile ruota intorno al contenuto di riempimento. Attualmente esistono una varietà di risorse per aiutare i progettisti che hanno bisogno di contenuti di riempimento, che si tratti di testo o immagini.

Poiché un sacco di design del sito Web si svolgeva in Photoshop, copiare / incollare manualmente il testo dal web era il metodo migliore per "riempire" un disegno con un contenuto fittizio. Tuttavia, ora che un sacco di design del sito web si svolge nel browser, perché non fare in modo che il computer esegua tutto il lavoro per te?

Copriremo le tue opzioni per i contenuti di riempimento in questo tutorial. Tutto da copiare / incollare testo statico e immagini per generarli dinamicamente.

Una parola sul contenuto del riempitivo

Ci sono puristi che raccomandano di evitare il contenuto di riempimento a tutti i costi. Un argomento è che il contenuto di riempimento ti astrae dall'esperienza "reale" del sito web che stai creando:

L'obiettivo qui è quello di avvicinarsi il più possibile alla reale esperienza del cliente. Non astrarti dalla vera esperienza. Ogni livello rimosso ti spinge sempre più lontano dalla reale esperienza del cliente.

Il fatto è che a volte non è possibile imitare la reale esperienza del cliente. Se disponi di semplici siti web di marketing con contenuti statici creati da uno stratega dei contenuti, quindi utilizza tutti i contenuti per creare il design del sito web. Il contenuto dovrebbe informare il design. Ma se stai progettando un'applicazione web piena di contenuti generati dagli utenti, è spesso impossibile progettare contenuti reali perché tu stesso non puoi generarli; questo è fatto dai tuoi utenti. Inoltre, dal punto di vista della privacy, è probabile che non sia consentito utilizzare i dati dei clienti effettivi per popolare i prototipi. Pertanto, ti viene impedito di avvicinarti il più possibile all'esperienza utente a causa di problemi legali o di privacy.

Tuttavia, ci sono dei passaggi che puoi seguire per rimanere vicino alla reale esperienza del cliente:

Se il tuo sito o applicazione richiede l'immissione di dati, inserisci parole reali e pertinenti e digita il testo, non limitarti a incollarlo da un'altra fonte. Se si tratta di un nome, digita un nome reale. Se è una città, digita una città reale.

Se si utilizza il giusto tipo di contenuto di riempimento, è possibile assomigliare da vicino all'esperienza dell'utente finale. Supponiamo, ad esempio, che il tuo progetto richieda un elenco di nomi. Invece di usare:

Lorem Ipsum
Sit Amet
Faucibus Eros
Carin Pulvinar

Puoi usare nomi reali:

John Stalewood
Jessica Alley
Stan Norwood
Trevor Singley

Di nuovo, l'obiettivo qui è quello di avvicinarsi il più possibile alla vera esperienza del cliente. E se puoi farlo usando il contenuto del filler, fallo!

Poiché ci preoccupiamo della nostra attività, le nostre discussioni su strumenti e tecniche sono spesso basate su best practice e soluzioni perfette. Perché ci preoccupiamo, il nostro flusso di lavoro e le nostre competenze sono migliorate con ogni progetto. Tuttavia, le soluzioni perfette non esistono spesso nel mondo reale. Questo è il motivo per cui le alternative pragmatiche (come il contenuto di riempimento) aiutano a finire i progetti in modo tempestivo. Credo che sia perfettamente soddisfacente, purché non compromettiamo i nostri principi.

Mockups

Un mockup preliminare, come tutti sappiamo, non è vicino alla finale, reale esperienza del cliente. Il tuo progetto probabilmente cambierà drasticamente tra la prima e l'ultima iterazione. Il contenuto del riempitivo può ancora essere uno strumento prezioso per vedere come il testo scorre lungo la pagina, attorno alle immagini e attraverso i punti di interruzione. Può aiutarti a prendere confidenza con il posizionamento di elementi di design, il bilanciamento della pagina e l'uso dello spazio negativo.

Eliminarlo completamente non ha senso. Il contenuto di riempimento può essere uno strumento fondamentale nella fase di progettazione iniziale per la prototipazione rapida e l'iterazione di concetti di progettazione. Una volta superata la fase iniziale della progettazione, sarebbe molto utile utilizzare contenuti che assomiglino più a quelli che l'utente alla fine vedrà.

Conclusione

Dove si disegna la linea sull'uso del contenuto del riempitivo dipende da voi. Non esiste un preciso "sì, usalo!" o "no, è una disgrazia!". La risposta a "dovrei usare il contenuto del riempitivo?" è, come sembra sempre essere, "dipende". A volte parlare di non usare il contenuto di riempimento è più di un mondo ideale e non del mondo reale. Sei un professionista, decidi tu. Alla fine, imparerai se hai preso o meno la decisione giusta e la prossima volta che affronti la domanda "dovrei usare il contenuto del riempitivo?", Saprai meglio come rispondere a questa domanda.

Immagini di riempimento

Esistono numerose soluzioni in hosting per l'inserimento di immagini nel documento HTML, che consente di specificare vari attributi dell'immagine tramite un URL. Ad esempio, per utilizzare il placekitten è sufficiente inserire la dimensione dell'immagine necessaria dopo il loro URL. Quindi, usa quell'URL come src del tuo elemento:

Se non ti piacciono i gattini (perché sei su internet?), Ecco alcuni servizi simili che offrono diverse personalizzazioni (vedi questa carrellata per più opzioni):

lorempixel
placehold.it
dummyimage

Testo di riempimento

Esistono diversi motivi per cui è necessario generare testo di riempimento. Forse hai bisogno di generare interi paragrafi per concettualizzare il design di un blog. Oppure, forse è necessario generare categorie di testo, come e-mail e nomi per lo styling di un disegno da tavolo. Qualunque sia la tua esigenza, ci sono una varietà di soluzioni per generare testo nei tuoi progetti.

Copia / incolla il testo

Esistono numerosi generatori di testo di riempimento sul Web. Poiché il web design spesso si occupa di elenchi, tabelle e altre strutture di dati, molti generatori offrono più del filler di Lorem Ipsum. Di seguito è riportato un (piccolo) elenco di generatori di testo di riempimento. Ognuno offre una varietà di configurazioni di testo come generare lingue diverse, racchiudere il testo in tag HTML, allacciare il testo con intestazioni / sottotitoli, regolare la lunghezza del testo e le parole in grassetto o in corsivo.

lipsum
HTML-ipsum
Generatore di testo cieco
Dummy Text Generator
Generatore di testo casuale

Per elenchi più completi di siti Web che generano testo, ecco alcuni rastrellamenti:

deposito di webdesigner
Demostene
un altro demostene
codice horror

Genera dinamicamente il testo

Puoi generare dinamicamente contenuti di riempimento nei tuoi documenti HTML utilizzando una libreria JavaScript come:

Fixie.js
Faker.js

Poiché la progettazione nel browser diventa più popolare, la vecchia tecnica di copia / incolla per il contenuto del riempitivo può diventare inefficiente. Perché non lasciare che il computer gestisca quel lavoro? Copriamo questa tecnica in modo più approfondito.

Mettendo tutto insieme, in modo dinamico

Proviamo a mettere un po 'di quello che abbiamo visto finora nella pratica creando un mockup di design. Per ragioni di semplicità, immaginiamo di avere il compito di creare un sito web di base che mostri estratti degli articoli preferiti di qualcuno da tutto il web. Chiameremo questa persona Franky e chiameremo il design "Franky's Fav Five".

Questo piccolo esempio dovrebbe aiutare a mostrare l'utilità del contenuto generato dinamicamente quando si progetta un mockup nel browser.

Passaggio 1: HTML di base e CSS

Per prima cosa, descriviamo il nostro HTML di base.

   Favky di Franky's Five

Come puoi vedere, includiamo tre risorse aggiuntive nella nostra pagina: un reset CSS, un foglio di stile CSS personalizzato (che scriverò in seguito) e un link alla versione di jQuery ospitata da Google. Ora, nel nostro styles.css file, includiamo alcune regole di stile di base per il nostro mockup:

 / * Generale ============================== * / body font: 1em / 1,45 Georgia, serif; sfondo: # e9e9e9 ripetizione; colore: # 222;  img larghezza massima: 100%; altezza: auto;  strong font-weight: bold;  .wrapper width: 95%; margine: 0 auto;  .content padding: 0 2em;  a color: # 9c0001;

Passaggio 2: crea e modella l'intestazione

Ora creiamo una semplice intestazione per la nostra pagina. Di nuovo, niente di troppo sofisticato in quanto questo è solo un esempio di mockup.

  Favky di Franky's Five

Ora aggiungeremo uno stile semplice alla nostra intestazione

 / * Intestazione ============================== * / .header padding: .5em 0; sfondo: # 333; colore bianco; allineamento del testo: centro; box-shadow: 0 1px 3px rgba (0,0,0, .5); sfondo: # 45484d; / * Vecchi browser * / sfondo: -moz-linear-gradient (in alto, # 45484d 0%, # 000000 100%); / * FF3.6 + * / background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0%, # 45484d), color-stop (100%, # 000000)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (in alto, # 45484d 0%, # 000000 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (in alto, # 45484d 0%, # 000000 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (in alto, # 45484d 0%, # 000000 100%); / * IE10 + * / background: gradiente lineare (in basso, # 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;

Ora abbiamo una pagina semplice con un'intestazione, come questa:

Step 3: Articolo principale

Ora creiamo il markup per il nostro estratto dell'articolo. Il punto di questo articolo non è quello di mostrare le tecniche di codifica CSS e HTML, ma piuttosto come lavorare con il contenuto di riempimento. Pertanto, tratteremo questi passaggi molto rapidamente con semplici operazioni di copia e incolla. Per prima cosa installeremo un wrapper e un articolo principale.

Nota: Apprezzo che un nome di classe di "articolo" su un elemento di un articolo possa sembrare un po 'assurdo - ricorda che è puramente una demo ...

Immagine dell'articolo

Useremo il servizio segnaposto immagine lorempixel per l'inserimento delle immagini nel nostro markup. Poiché i contenitori dei nostri articoli sono impostati su una larghezza massima di 600 px, questa è la dimensione dell'immagine che afferreremo da lorempixel.

Articolo Testo

Ora inseriremo tutto il testo dell'articolo in a div. Il nostro mockup semplice utilizzerà i seguenti contenuti ripetibili:

Titolo dell'articolo
Meta informazioni sull'articolo
- Nome dell'autore
- Fonte dell'articolo
Estratto dell'articolo
Leggi altro link

  Titolo articolo qui
  autore: Nome dell'autore
 fonte: onlinesource.com
 
 Questo è dove andrà tutto il testo del paragrafo… leggi di più "

Essenzialmente, questo è il nostro modello per mostrare estratti delle letture preferite di Franky. Ora diamo uno stile!

Stile l'articolo

Abbiamo il nostro markup di base, quindi inizieremo disegnando il contenuto.

 / * Articolo ============================== * / .article larghezza massima: 600 px; riempimento: 0 0 2em; sfondo: #fff; margine: 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; altezza della linea: 1,2; colore: # 222; margine: 1em 0 0; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-transform: capitalize; / * faker non produrrà la giusta capitolazione, ma i CSS possono gestirlo! * / .article-paragraph color: # 555; font-size: .875em; line-height: 1.5em;  .article-paragraph: first-letter text-transform: uppercase;  / * Articolo Meta * / .article-meta color: # 777; font-size: .75em; font-family: arial; margine: .25em 0 1em; overflow: nascosto;  .article-meta li float: left; margine-destra: 1em;  .article-meta li: after content: '\ 00B7'; margin-left: 1em; colore: #ccc;  .article-meta li: last-child: after display: none;  .article-author span font-style: italic;

Ora avrai un modello piuttosto semplice per mostrare estratti di articoli che assomigliano a questo:

Passaggio 4: presentazione di un piccolo PHP

Finora abbiamo un estratto di un articolo (su cinque, dato che questo è "Franky's Fav Five"). Piuttosto che copiare / incollare il markup altre quattro volte, useremo a per loop in PHP. In tal modo manterrà un singolo modello del nostro estratto dell'articolo durante la modifica, ma più estratti di articoli durante la visualizzazione nel browser. Questo facilita la manutenzione; se mai vogliamo modificare il nostro modello di estratto articolo, non dovremo farlo più volte.

Facciamoli avvolgere articolo elemento nel seguente codice:

  //  elemento qui

Nota il nostro per il ciclo inizia con la variabile $ i essere uguale a uno e funzionerà fino a quando non sarà inferiore a 6 (quindi viene eseguito 5 volte).

NOTA: Assicurati di rinominare il tuo file con l'estensione .php se non l'hai ancora fatto.

Ora dovresti avere qualcosa di simile a questo:

Nota come la nostra immagine di lorempixel è la stessa in ogni articolo? Per ottenere un mockup più realistico, modificheremo leggermente l'immagine src quindi otteniamo un'immagine diversa per ogni estratto di articolo.

Ottenere immagini diverse usando LoremPixel

LoremPixel ti consente di personalizzare leggermente il tipo di immagine che stai recuperando. Ecco le personalizzazioni che consentono nella loro struttura URL:

http://lorempixel.com/400/200
- Richiede un'immagine casuale di 400 x 200 pixel
http://lorempixel.com/400/200/sports
- Richiede un'immagine casuale della categoria sportiva
http://lorempixel.com/400/200/sports/1
- Richieste foto n. 1/10 dalla categoria sportiva

Attualmente stiamo usando l'URL http://lorempixel.com/600/200. Quello che faremo è scegliere una categoria, come gli sport, quindi utilizzare la nostra variabile conteggio PHP $ i per modificare l'URL in modo che ogni estratto dell'articolo richieda un'immagine separata dalla categoria sportiva.

Per fare questo, trova il elemento e modificare la sua origine in questo modo:

Ora, come la variabile di conteggio php $ i aumenta con ogni ciclo for, i nostri URL di immagine richiedono ogni volta un'immagine diversa. L'output di markup HTML da PHP sarà ora simile a questo:

  ... 
  ... 
  ...

Ora dovremmo avere qualcosa che assomigli a questo:

Passaggio 4: inserimento dinamico del contenuto del riempitivo

Ora che abbiamo il nostro modello base in atto con un'immagine diversa per ogni estratto, vogliamo avere diversi contenuti di riempimento per ogni articolo. Questo ci aiuterà a visualizzare meglio il prodotto finale.

È qui che una libreria di contenuti di riempimento come faker.js è utile. Utilizzando l'API di faker.js e un po 'di jQuery possiamo riempire dinamicamente il nostro modello HTML al caricamento della pagina. L'utilizzo dell'API faker.js è piuttosto semplice. Puoi trovare l'intera API sulla pagina github di faker.js. Ecco l'esempio di utilizzo:

Come puoi vedere, includendo faker.js nella nostra pagina abbiamo quindi accesso alla sua API che può generare nomi di riempimento, e-mail, indirizzi, contenuti e altro ancora. Richiama semplicemente l'oggetto Faker con uno dei suoi metodi corrispondenti.

Implementazione di Faker.js nella nostra pagina

Innanzitutto, aggiungiamo faker.js alla nostra pagina. Aggiungeremo il

Ora proviamo a generare titoli di contenuti falsi usando faker.js e jQuery. Se osservi l'API di faker.js, noterai che esistono metodi per generare frasi, paragrafi e parole di Lorem Ipsum. Dato che vogliamo qualcosa di simile a un titolo di un articolo, vorremmo una frase di Lorem Ipsum: Faker.Lorem.sentence (). Questo sputerà una singola frase come "praesentium est alias dolor omnis sequi voluptatibus", che sarà un buon riempitivo per un titolo di articolo.

 Nota: faker.js non genererà una frase in maiuscolo. Usando la regola CSS text-transform: capitalize possiamo forzare la frase per essere capitalizzata; portandoci quindi più vicino alla corretta formattazione.
 Inizieremo aggiungendo una classe di faker frase al nostro modello di titolo dell'articolo. Questo fungerà da hook permettendo a jQuery di trovare tutti gli elementi che dovrebbero avere il loro contenuto sostituito con frasi di lorem ipsum.
  Titolo articolo qui
 Quindi, usando jQuery, scorreremo ciclicamente ciascuno dei faker frase elementi pubblicati da PHP e sostituiscono il nostro contenuto di riempimento statico "Titolo articolo qui" con una frase generata a caso di Lorem Ipsum.
  $ ('. faker-sentence'). each (function () $ (this) .html (Faker.Lorem.sentence ()););
 Ora dovremmo avere qualcosa in cui ogni titolo dei nostri articoli varia nel contenuto e nella lunghezza e assomiglia più strettamente al contenuto dinamico del nostro sito.
  
  Passaggio 5: compilazione dell'intera pagina 
 Ora che abbiamo sostituito tutti i titoli dei nostri articoli. Pensiamo agli altri contenuti della pagina che vogliamo sostituire. Vogliamo ancora compilare i seguenti modelli:
  Nome dell'autore - come John Williamson
 Fonte online - come domainname.com
 Testo del paragrafo - come un paragrafo di lorem ipsum
 
 Piuttosto che scrivere jQuery per ogni pezzo di modello che vogliamo sostituire, estraiamo la generazione e la sostituzione del contenuto e quindi semplicemente passiamo in quello che vogliamo sostituire come argomenti.
 Determina cosa verrà generato da Faker.js
 Innanzitutto, vediamo quali parti di faker.js verranno utilizzate per generare il contenuto di riempimento di cui abbiamo bisogno. Come accennato, abbiamo bisogno del nome di una persona, di un nome di dominio e del contenuto del paragrafo di riempimento. Faker.js ha i seguenti metodi che possiamo usare:
   Faker.Name.findName () - ci dà un nome, come John Williamson
  Faker.Internet.domainName () - ci dà un nome di dominio, come eldridge.co.uk
  Faker.Lorem.paragraph () - ci fornisce un paragrafo di Lorem ipsum
 
 Aggiungi classi HTML dove stiamo mettendo il contenuto del riempitivo
 Ora che sappiamo quali contenuti stiamo generando, dobbiamo aggiungere un elemento e una classe in cui metteremo il nostro contenuto di riempimento. Come abbiamo fatto sopra, prefixeremo ogni classe con "faker-", in questo modo quando andremo oltre la creazione di una simulazione e smettiamo di usare faker.js possiamo facilmente trovare e rimuovere le classi di riempimento che non abbiamo bisogno.
 Nota: assicurati che le classi di contenuto del filler corrispondano ai nomi dei metodi faker.js. Così Faker.Name.findName () avrà bisogno della classe HTML falsario-FindName e Faker.Internet.domainName () avrà bisogno della classe falsario-domainName ecc. Ciò sarà utile quando automatizzeremo la ricerca e la sostituzione del contenuto del riempitivo in jQuery.
 Per prima cosa, gestiamo l'autore aggiungendo un campata elemento con la classe appropriata:
  autore: Nome dell'autore
  autore: 
 Ora gestiremo la fonte aggiungendo una classe appropriata al link di origine:
  fonte: onlinesource.com
  fonte: onlinesource.com
 Infine, gestiamo l'estratto dell'articolo aggiungendo un campata elemento in cui andrà il nostro filler lorem ipsum:
  Questo è dove andrà tutto il testo del paragrafo … leggi di più »  
… leggi di più »
 Ora scriviamo un po 'di jQuery che troverà tutti i nostri elementi di contenuto di riempimento e li riempirà di contenuti di riempimento generati da faker.js.
 Creiamo una variabile chiamata args. Questo sarà dove definiremo i metodi API di faker.js che utilizzeremo. Ricorda, le nostre classi HTML si associano ai metodi faker.js e sono semplicemente precedute da prefisso impostore-.
 Nota: stiamo aggiungendo Faker.Lorem.sentence () ai nostri argomenti, in modo da poter rimuovere il JavaScript creato in precedenza nel passaggio 4 per trovare / sostituire i titoli degli articoli.
  var args = 'Lorem': ['paragraph', 'sentence'], // mappa per Faker.Lorem.paragraphs () e Faker.Lorem.sentence () 'Name': ['findName'], // maps to Faker.Name.findName () 'Internet': ['domainName'] // esegue la mappatura su Faker.Internet.domainName ()
 Ora passiamo su ciascuno dei nostri argomenti. La chiave nella matrice diventa l'oggetto faker.js mentre il valore nella matrice diventa il metodo faker.js. Il valore nell'array si associa alla classe HTML in modo che jQuery sappia quale elemento cercare.
  // loop over args for (var key in args) var obj = args [chiave]; for (var prop in obj) // jQuery trova gli elementi appropriati e li riempie $ ('. faker -' + obj [prop]) each (function () // Faker.Lorem.paragraphs () // Faker .Internet.domainName () $ (this) .html (Faker [chiave] [obj [prop]] ());); 
 Questo è tutto! Ora dovresti avere qualcosa di simile a questo:
  L'astrazione del processo di riempimento del contenuto in questo modo rende molto semplice l'aggiunta / rimozione di nuovi tipi di contenuto di riempimento. Ora in futuro, se desideri aggiungere un nuovo tipo di contenuto di riempimento da faker.js, ad esempio un'email Faker.Internet.email () tutto quello che devi fare è aggiungerlo al args variabile e quindi creare un elemento HTML con una classe di falsario-mail ovunque tu voglia una email falsa generata.
 
 Conclusione
 Abbiamo creato un semplice mockup nel browser, mostrando un esempio di design di cinque estratti di articoli.
  Il nostro modello per ogni estratto dell'articolo è solo 13 righe di PHP / HTML, mentre l'HTML risultante sarebbe tanto più di quello. Questo rende la prototipazione rapida e semplice. A questo punto, potremmo facilmente testare la natura reattiva del progetto e vedere come il contenuto e il testo si riflettono. Potremmo modificare qualsiasi CSS che lo richiede o aggiungere molto facilmente più elementi di design con il corrispondente contenuto di riempimento. Il contenuto dinamico del filler consente una rapida prototipazione dei progetti. Forse ne troverai la necessità in un progetto futuro!
 Altri usi
 Come si può vedere, questo tipo di prototipazione potrebbe essere utile per molte altre attività di progettazione Web, in particolare quelle basate sui dati. Ad esempio, se è necessario progettare una tabella di contatti con nomi, indirizzi, e-mail, numeri di telefono e altro, è possibile utilizzare faker.js per generare facilmente qualsiasi contenuto di riempimento necessario. Questo ti permette di concentrarti più facilmente sul design del tavolo piuttosto che dover copiare / incollare tonnellate di dati nel tuo HTML solo per avere un'idea di come appare e risponde.



		
			
	   
	




Web design