Conținut de conținut Instrumente, sfaturi și un exemplu dinamic

Deoarece proiectarea în browser devine mai populară (și convenabilă), nevoia de instrumente utile de proiectare crește. Un set de instrumente care devine destul de util se învârte în jurul conținutului de umplutură. În prezent, există o varietate de resurse pentru a ajuta designerii care au nevoie de conținut de umplere, fie că este vorba de text sau imagini.

Deoarece o mare parte a designului site-ului a avut loc în Photoshop, copierea / lipirea manuală a textului de pe web a fost cea mai bună metodă de "completare" a unui design cu conținut fals. Cu toate acestea, acum că o mulțime de design site-ul web are loc în browser, de ce nu a face computerul face toate "completarea" munca pentru tine?

Vom acoperi opțiunile pentru materialele de umplutură din acest tutorial. Totul, de la copierea / lipirea textului static și a imaginilor pentru generarea dinamică a acestora.

Un cuvânt despre conținutul Filler

Există purici care recomandă evitarea conținutului de umplutură cu orice preț. Un argument este că conținutul de umplere vă abstractează de la experiența "reală" a site-ului pe care îl construiți:

Obiectivul aici este de a obține cât mai aproape de experiența reală a clienților cu putință. Nu vă abateți de experiența reală. Fiecare strat eliminat vă împinge mai departe și mai departe de experiența reală a clienților.

De fapt, uneori nu puteți imita experiența reală a clienților. Dacă aveți site-uri de marketing simple cu conținut static elaborat de un strategist de conținut, atunci cu toate mijloacele, utilizați acest conținut pentru a construi designul site-ului. Conținutul trebuie să informeze proiectul. Dar dacă proiectați o aplicație web umplute cu conținut generat de utilizatori, este adesea imposibil de proiectat în jurul conținutului real pentru că tu însuți nu o poți genera; acest lucru este făcut de utilizatorii dvs. În plus, din perspectiva confidențialității, este posibil să nu aveți permisiunea de a utiliza date reale despre clienți pentru a popula machete. Deci nu vă puteți împiedica să obțineți cât mai aproape de experiența utilizatorului din cauza problemelor legale sau de confidențialitate.

Există, totuși, pași pe care îi puteți lua pentru a rămâne aproape de experiența reală a clienților:

Dacă site-ul sau aplicația dvs. necesită introducerea de date, introduceți cuvinte reale și relevante și introduceți textul, nu doar lipiți-l dintr-o altă sursă. Dacă este un nume, introduceți un nume real. Dacă este un oraș, tastați un oraș real.

Dacă utilizați tipul potrivit de conținut de umplutură, este posibil să se apropie foarte mult de experiența utilizatorului final. Spuneți, de exemplu, că designul dvs. solicită o listă de nume. În loc de a folosi:

Lorem Ipsum
Stați Amet
Faucibus Eros
Carin Pulvinar

Puteți utiliza nume reale:

John Stalewood
Jessica Alley
Stan Norwood
Trevor Singley

Din nou, Scopul aici este de a obține cât mai aproape de experiența reală a clienților cu putință. Și dacă puteți face asta folosind conținut de umplutură, mergeți la el!

Pentru că ne pasă de ambarcațiunile noastre, discuțiile noastre despre instrumente și tehnici se bazează adesea pe cele mai bune practici și soluții perfecte. Pentru că ne pasă, fluxul de lucru și expertiza noastră sunt îmbunătățite cu fiecare proiect. Cu toate acestea, soluțiile perfecte nu există adesea în lumea reală. Acesta este motivul pentru care alternativele pragmatice (cum ar fi conținutul de umplere) ajută la finalizarea proiectelor în timp util. Cred că acest lucru este perfect, atâta timp cât nu compromităm principiile noastre.

simulările

O machetă preliminară, după cum știm cu toții, nu este acolo unde este aproape de experiența reală a clienților. Designul dvs. se va schimba probabil în mod drastic între prima și ultima iterație. Conținutul de conținut poate fi în continuare un instrument valoros pentru a vedea modul în care textul se scurge pe pagină, în jurul imaginilor și prin puncte de întrerupere. Acesta vă poate ajuta să obțineți un simț pentru plasarea elementelor de design, echilibrul paginii și utilizarea spațiului negativ.

Făcând-o cu ea complet nu are sens. Conținutul de umplere poate fi un instrument critic în faza de proiectare inițială pentru prototiparea rapidă și repetarea conceptelor de proiectare. Odată ce treceți de la stadiile incipiente de proiectare, ar fi foarte util să folosiți conținut care seamănă mai mult cu ceea ce va vedea în cele din urmă utilizatorul.

Concluzie

În cazul în care trageți linia pe utilizarea conținutului de umplutură este de până la tine. Nu există nici o definiție "da, folosește-o!" sau "nu, este o rușine!". Răspunsul la "ar trebui să folosesc conținut de umplutură?" este, așa cum pare întotdeauna, "depinde". Uneori vorbim despre faptul că nu folosești conținut de umplere este mai mult despre o lume ideală și nu despre lumea reală. Ești un profesionist, decizi tu. În cele din urmă, veți afla dacă ați luat sau nu decizia corectă, iar data viitoare când vă confruntați cu întrebarea "ar trebui să folosesc conținut de umplutură?", Veți ști mai bine cum să răspundeți la această întrebare.

Filler Images

Există o serie de soluții găzduite pentru inserarea imaginilor în documentul HTML, permițându-vă să specificați diferite atribute de imagine printr-o adresă URL. De exemplu, pentru a utiliza placekitten pur și simplu puneți dimensiunea imaginii de care aveți nevoie după adresa URL. Apoi, utilizați adresa URL ca src de dumneavoastră element:

Dacă nu vă placeți pisicile (de ce vă aflați pe internet?), Iată câteva servicii similare care oferă personalizări diferite (consultați această rubrică pentru mai multe opțiuni):

lorempixel
placehold.it
dummyimage

Filler Text

Există o serie de motive pentru care ar trebui să generați textul de umplere. Poate că trebuie să generați paragrafe întregi pentru conceptualizarea unui design de blog. Sau, poate aveți nevoie pentru a genera categorii de text, cum ar fi e-mailuri și nume pentru styling un tabel de design. Indiferent de nevoia dvs., există o varietate de soluții pentru generarea de text în desenele dumneavoastră.

Copiați / inserați textul

Există numeroși generatori de text de umplutură pe web. Deoarece designul web se ocupă deseori de liste, tabele și alte structuri de date, mulți generatori oferă mai mult decât materialul de umplere al paragrafului Lorem Ipsum. Mai jos este o listă (mică) de generatoare de text de umplere. Fiecare dintre ele oferă o varietate de configurații de text, cum ar fi generarea de limbi diferite, includerea textului în etichete HTML, textarea cu titluri / subtitluri, ajustarea lungimii textului și bolding sau cursive.

lipsum
HTML-ipsum
Text Generator Blind
Generator text generic
Generator de texte aleatoare

Pentru liste mai cuprinzătoare de site-uri generatoare de text, iată câteva exemple:

webdesigner depot
Demostene
un alt demosthenes
codarea groazei

Dinamic generați text

Puteți genera dinamic conținutul de umplutură în documentele dvs. HTML utilizând o bibliotecă JavaScript, cum ar fi:

Fixie.js
Faker.js

Având în vedere că proiectarea în browser devine mai populară, vechea tehnică de copiere / lipire pentru conținutul de umplutură poate deveni ineficientă. De ce nu lăsa computerul să se ocupe de acea slujbă? Să acoperim mai profund această tehnică.

Punându-le pe toate împreună, Dinamic

Să încercăm să punem în practică câteva dintre ceea ce am acoperit până acum în practică prin crearea unui machet de design. Pentru simplitate, să ne imaginăm că suntem însărcinați cu crearea unui design de bază de site care să prezinte extrase din articolele preferate ale cuiva din toată lumea. O vom numi pe această persoană Franky și vom numi designul "Franky's Fav Five".

Acest mic exemplu ar trebui să contribuie la demonstrarea utilității conținutului generat dinamic atunci când proiectați un mockup în browser.

Pasul 1: HTML și CSS de bază

Mai întâi, să subliniem HTML-ul nostru de bază.

   Frank Fav Five

După cum puteți vedea, vom include trei resurse suplimentare în pagina noastră: o resetare CSS, o foaie de stil CSS personalizată (pe care o vom scrie ulterior) și un link către versiunea găzduită de Google a jQuery. Acum, în nostru styles.css fișier, să includeți câteva reguli de bază pentru stilul nostru de mockup:

 / * General ============================== * / corp font: 1em / 1.45 Georgia, serif; fundal: # e9e9e9 repeat; culoare: # 222;  img max-lățime: 100%; înălțime: auto;  puternic font-weight: bold;  .wrapper lățime: 95%; marja: 0 auto;  .content padding: 0 2em;  a culoare: # 9c0001;

Pasul 2: Creați și stylizați antetul

Acum, să creăm un antet simplu pentru pagina noastră. Din nou, nimic prea sofisticat, deoarece acesta este doar un exemplu de machetă.

  Frank Fav Five

Acum vom adăuga un stil simplu la antetul nostru

 / * Header ============================== * / .header padding: .5em 0; fundal: # 333; culoare albă; text-align: centru; box-shadow: 0 1px 3px rgba (0,0,0, .5); fundal: # 45484d; / * Browseruri vechi * / background: -moz-linear-gradient (top, # 45484d 0%, # 000000 100%); / * FF3.6 + / fundal: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0%, # 45484d), oprire color (100%, # 000000)); / * Chrome, Safari4 + * / fundal: -webkit-gradient linear (top, # 45484d 0%, # 000000 100%); / * Chrome10 +, Safari5.1 + * / fundal: -o-gradient linear (top, # 45484d 0%, # 000000 100%); / * Opera 11.10+ * / fundal: -ms-gradient linear (top, # 45484d 0%, # 000000 100%); / * IE10 + * / fundal: gradient liniar (la fund, # 45484d 0%, # 000000 100%); / * W3C * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 45484d", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /. Titlu-titlu font-size: 1.25em; font-familie: helvetica; font-weight: bold; text-shadow: 0 1px 0 # 000;

Acum avem o pagină simplă cu un antet, după cum urmează:

Pasul 3: Articolul principal

Acum, să creăm marcajul pentru extrasul din articolul nostru. Ideea acestui articol nu este de a arăta tehnicile de codare CSS și HTML, ci mai degrabă cum să lucrați cu conținut de umplutură. Prin urmare, vom acoperi aceste etape foarte repede cu copierea și lipirea simplă. Mai întâi vom configura un articol și un articol principal.

Notă: Apreciez un nume de clasă de "articol" pe un element de articol poate părea un pic absurd - amintiți-vă acest lucru este doar un demo ...

Imagine a articolului

Vom folosi serviciul de substituție a imaginilor lorempixel pentru plasarea imaginilor în marcajul nostru. Având în vedere că recipientele noastre pentru articole sunt setate la o lățime maximă de 600 pixeli, dimensiunea imaginii pe care o luăm de la lorempixel.

Textul articolului

Acum vom plasa tot textul articolului într-un div. Modelele noastre simple vor folosi urmatoarele piese de continut repetabile:

Titlul articolului
Informațiile Meta despre articol
- Numele autorului
- Sursa articolului
Articol extras
Citiți mai multe link-uri

  Titlul articolului Aici
  autor: Numele autorului
 sursă: onlinesource.com
 
 Aici intră tot textul paragrafului… Citeste mai mult "

În esență, acesta este modelul nostru pentru prezentarea fragmentelor citirilor favorite ale lui Franky. Acum haideți să-l stil!

Stilul articolul

Avem marcajul nostru de bază, așa că vom începe prin stilizarea conținutului.

 / * Articolul ============================== * / .article max-width: 600px; umplutură: 0 0 2em; fundal: #fff; marja: 3em auto; frontieră: 1px solid #ddd; raza de graniță: 5px; box-shadow: 0 1px 2px rgba (0,0,0, .1);  .article a text-decoration: none;  .article a: hover text-decorare: subliniere;  .article img border-radius: 5px 5px 0 0;  .article-title display: bloc; dimensiune font: 1.125em; linia-înălțime: 1,2; culoare: # 222; marja: 1em 0 0; font-weight: bold; font-familie: Helvetica, Arial, sans-serif; text-transform: capitalizare; / * faker nu va scoate capitalizarea corectă, dar CSS se poate descurca! * / .article-paragraf culoare: # 555; font-size: .875em; Înălțimea liniei: 1,5cm;  .article-paragraph: prima literă text-transform: uppercase;  / * Articolul Meta * / .article-meta culoare: # 777; font-size: .75em; font-family: arial; marja: .25em 0 1em; overflow: ascuns;  .article-meta li float: left; margin-dreapta: 1em;  .article-meta li: după conținut: '\ 00B7'; margin-stânga: 1em; culoare: #ccc;  .article-meta li: ultimul copil: după display: none;  .article-autor span font-style: italic;

Acum veți avea un șablon destul de simplu pentru a afișa fragmente de articole care arată astfel:

Pasul 4: Introducerea unui mic PHP

Până în prezent, avem un fragment de articol (din cinci, deoarece acesta este "Frank Fav Five"). În loc să copiem / lipim marcajul de patru ori, vom folosi a pentru buclă în PHP. În acest fel, vom păstra un șablon unic al extrasului nostru de articol în timp ce îl editați, dar mai multe fragmente de articol când se vizualizează în browser. Acest lucru permite o întreținere ușoară; dacă vreodată vrem să tweak șablonul excerpt de articol, nu va trebui să o facem de mai multe ori.

Să ne înfășurăm articol element în următorul cod:

  //  element aici

Observați-ne pentru buclă începe cu variabila $ i fiind egal cu unul și va rula până când nu este mai mic de 6 (deci rulează de 5 ori).

NOTĂ: Asigurați-vă că ați redenumit fișierul dvs. cu extensia .php dacă nu ați făcut-o încă.

Acum ar trebui să aveți ceva de genul:

Observați cum imaginea noastră din lorempixel este aceeași în fiecare articol? Pentru a obține o machetă mai realistă, vom modifica ușor imaginea src așa că obținem o imagine diferită pentru fiecare articol.

Obținerea de imagini diferite utilizând LoremPixel

LoremPixel vă permite să personalizați ușor tipul de imagine pe care îl preluați. Iată personalizările pe care le permit în structura adreselor URL:

http://lorempixel.com/400/200
- Solicită o imagine aleatoare de 400 x 200 pixeli
http://lorempixel.com/400/200/sports
- Solicită o imagine aleatorie a categoriei de sport
http://lorempixel.com/400/200/sports/1
- Solicită imaginea nr. 1/10 din categoria de sport

În prezent, folosim adresa URL http://lorempixel.com/600/200. Ceea ce vom face este să alegeți o categorie, cum ar fi sportul, apoi să folosim variabila noastră de numărare PHP $ i pentru a modifica adresa URL astfel încât fiecare fragment de articol să solicite o imagine separată din categoria de sport.

Pentru a face acest lucru, găsiți element și modificați sursa acestuia astfel:

Acum, ca variabila de numarare php $ i crește cu fiecare pentru buclă, adresele URL ale imaginii vor solicita o imagine diferită de fiecare dată. Marcajul HTML produs de PHP va arata acum cam asa:

  ... 
  ... 
  ...

Acum ar trebui să avem ceva care arată astfel:

Pasul 4: Introducerea dinamică a conținutului de umplere

Acum, că avem șablonul de bază în loc cu o imagine diferită pentru fiecare extras, dorim să avem un conținut diferit de umplere pentru fiecare articol. Acest lucru ne va ajuta să vizualizăm mai bine produsul final.

Acesta este locul în care o bibliotecă de conținut de umplutură, cum ar fi faker.js, vine la îndemână. Folosind API-ul de la faker.js împreună cu un pic de jQuery putem umple dinamic șablonul nostru HTML la încărcarea paginii. Folosirea API-ului faker.js este destul de simplă. Puteți găsi întreaga API pe pagina faker.js github. Iată exemplul de utilizare:

După cum puteți vedea, prin includerea facter.js în pagina noastră, avem apoi acces la API-ul său, care poate genera nume de umplutură, e-mailuri, adrese, conținut și multe altele. Pur și simplu invoca obiectul Faker cu una dintre metodele sale corespunzătoare.

Implementarea Faker.js în Pagina noastră

Mai întâi, să adăugăm faker.js pe pagina noastră. Vom adăuga

Acum, să încercăm să generăm titluri de conținut fals folosind faker.js și jQuery. Dacă vă uitați prin API-ul faker.js, veți observa că există metode pentru generarea de fraze, paragrafe și cuvinte din conținutul Lorem Ipsum. Deoarece vrem ceva similar cu titlul unui articol, vom dori o propoziție de Lorem Ipsum: Faker.Lorem.sentence (). Aceasta va scuipa o singură propoziție, cum ar fi "praesentium est alias dolor omnis sequi voluptatibus", care va fi un bun conținut de umplere pentru un titlu al articolului.

 Notă: faker.js nu va afișa o propoziție capitalizată. Prin utilizarea regulii CSS text-transform: capitalizare putem forța propoziția să fie capitalizată; astfel ne apropiam de formatarea corecta.
 Vom începe prin adăugarea unei clase de falsificator-teză la șablonul titlului nostru de articol. Acest lucru va acționa ca un cârlig care permite jQuery să găsească toate elementele care ar trebui să aibă conținutul lor înlocuit cu propoziții de lorem ipsum.
  Titlul articolului Aici
 Apoi, folosind jQuery, vom trece prin fiecare falsificator-teză ieșirea elementelor prin PHP și înlocuirea conținutului nostru static de umplere "Titlul articolului aici" cu o propoziție generată aleatoriu de Lorem Ipsum.
  $ ('. faker-sentence') fiecare (funcția () $ (this) .html (Faker.Lorem.sentence ()););
 Acum ar trebui să avem ceva în care fiecare dintre titlurile articolelor noastre variază în funcție de conținut și de lungime și seamănă mai mult cu conținutul dinamic al site-ului nostru.
  
  Pasul 5: Completarea întregii pagini 
 Acum că am înlocuit toate titlurile articolelor noastre. Să ne gândim la celălalt conținut de pe pagina pe care dorim să o înlocuim. Încă mai dorim să completați următoarele exemple de șabloane:
  Numele autorului - cum ar fi John Williamson
 Sursa online - cum ar fi domainname.com
 Textul paragrafului - cum ar fi un paragraf lorem ipsum
 
 Mai degrabă decât să scriem jQuery pentru fiecare piesă de șablon pe care dorim să o înlocuim, vom elimina generarea și înlocuirea conținutului și apoi pur și simplu vom trece în ceea ce ne dorim înlocuit ca argumente.
 Determinați ce va genera faker.js
 În primul rând, să ne dăm seama ce părți din faker.js vom folosi pentru a genera conținutul de umplutură de care avem nevoie. Așa cum am menționat, avem nevoie de numele unei persoane, de un nume de domeniu și de conținutul paragrafului. Faker.js are următoarele metode pe care le putem folosi:
   Faker.Name.findName () - ne dă un nume, cum ar fi John Williamson
  Faker.Internet.domainName () - ne dă un nume de domeniu, cum ar fi eldridge.co.uk
  Faker.Lorem.paragraph () - ne oferă un paragraf de conținut Lorem ipsum
 
 Adăugați clase HTML unde plasăm conținut de conținut
 Acum, când știm ce conținut generăm, trebuie să adăugăm un element și o clasă în care să punem conținutul nostru de umplutură. Așa cum am făcut mai sus, vom prefixa fiecare clasă cu "faker-", în acest fel atunci când ne mișcăm dincolo de crearea unui mock și ne oprim folosind faker.js putem găsi cu ușurință și eliminăm clasele de umplutoare de care nu avem nevoie.
 Notă: asigurați-vă că clasele de conținut de umplere se potrivesc cu numele metodelor faker.js. Asa de Faker.Name.findName () va avea nevoie de clasa HTML falsificator-findName și Faker.Internet.domainName () va avea nevoie de clasă falsificator-DOMAINNAME etc Acest lucru va fi de ajutor atunci când automatizăm găsirea și înlocuirea conținutului de umplutură în jQuery.
 În primul rând, hai să ne ocupăm de autor adăugând a deschidere element cu clasa corespunzătoare:
  autor: Numele autorului
  autor: 
 Acum vom gestiona sursa prin adăugarea unei clase adecvate la linkul sursă:
  sursă: onlinesource.com
  sursă: onlinesource.com
 În cele din urmă, hai să rezolvăm fragmentul de articol adăugând o deschidere element în cazul în care umplutura noastră lorem ipsum va merge:
  Aici intră tot textul paragrafului … Citeste mai mult »  
… Citeste mai mult »
 Acum scriem doar un mic jQuery care va gasi toate elementele noastre de continut de umplutura si le vom umple cu continut de umplutura generat de faker.js.
 Să creăm o variabilă numită args. Aici vom defini metodele API-ului faker.js pe care le vom folosi. Amintiți-vă că clasele noastre de hartă HTML se conformează metodelor faker.js și sunt pur și simplu prefixate escroc-.
 Notă: adaugam Faker.Lorem.sentence () la argumentele noastre, astfel încât să puteți elimina JavaScript creat anterior la pasul 4 pentru a găsi / înlocui titlurile articolelor.
  var args = 'Lorem': ['paragraphs', 'sentence']], // maps to Faker.Lorem.paragraphs () și Faker.Lorem.sentence () 'Name': ['findName'], // maps la Faker.Name.findName () 'Internet': ['domainName'] // hărți la Faker.Internet.domainName ()
 Acum ne batem peste fiecare dintre argumentele noastre. Cheia din matrice devine obiectul faker.js în timp ce valoarea din matrice devine metoda faker.js. Valoarea din matrice armonizează clasa HTML astfel încât jQuery știe ce element să caute.
  // bucla peste args pentru (var var în args) var obj = args [cheie]; pentru (var prop in obj) // jQuery gaseste elementele potrivite si le umple $ ('. faker -' + obj [prop]) fiecare (function () // Faker.Lorem.paragraphs .Internet.domeniuName () $ (acest) .html (Faker [cheie] [obj [prop]] ());); 
 Asta e! Acum ar trebui să aveți ceva de genul:
  Abstractizarea procesului de conținut al materialelor de umplere face ca adăugarea / eliminarea unor noi tipuri de materiale de umplere să fie foarte ușoară. Acum, în viitor, dacă doriți să adăugați un nou tip de conținut de umplutură de la faker.js, cum ar fi un e-mail Faker.Internet.email () tot ce trebuie să faceți este să îl adăugați la args variabilă și apoi să creați un element HTML cu o clasă de falsificator-mail ori de câte ori doriți un e-mail fals generat.
 
 Concluzie
 Am construit o simplă machetă în browser, prezentând un exemplu de design de cinci fragmente de articol.
  Șablonul nostru pentru fiecare fragment de articol este de numai 13 linii de PHP / HTML, în timp ce HTML-ul rezultat ar fi mult mai mult decat atat. Acest lucru face ca prototipul să fie rapid și ușor. În acest moment, am putea testa cu ușurință natura receptivă a designului și să vedem cum se revigorează conținutul și textul. Am putea modifica oricare CSS care o cere sau am putea foarte ușor să adăugăm mai multe elemente de design cu conținut de umplutură corespunzător. Conținutul dinamic de umplere face ca prototiparea rapidă a modelelor. Poate că veți găsi o nevoie pentru asta într-un proiect viitor!
 Alte utilizări
 Așa cum ați putea vedea, acest tip de prototipuri ar putea fi util pentru multe alte sarcini de web design - în special cele bazate pe date. De exemplu, dacă ați avea nevoie să creați o tabelă de contacte cu nume, adrese, e-mailuri, numere de telefon și multe altele, ați putea folosi faker.js pentru a genera cu ușurință orice conținut de umplere de care aveți nevoie. Acest lucru vă permite să vă concentrați mai ușor asupra designului tabelului, decât să copiați / lipiți tone de date în codul dvs. HTML, doar pentru a vă simți cum arată și răspunde.



		
			
	   
	




Web design