Share
Når utformingen i nettleseren blir mer populær (og praktisk), er behovet for nyttige designverktøy økende. Et sett med verktøy som blir ganske nyttig dreier seg om fyllmateriale. For tiden finnes det en rekke ressurser for å hjelpe designere som trenger fillerinnhold, enten det er tekst eller bilder.
Fordi en masse nettside design pleide å finne sted i Photoshop, var manuell kopiering / innføring av tekst fra nettet den beste metoden for å fylle inn et design med dummyinnhold. Men nå, når mye webdesign foregår i nettleseren, hvorfor ikke ha datamaskinen til å fylle inn alt for deg?
Vi dekker alternativene dine for fyllstoffer i denne opplæringen. Alt fra å kopiere / lime inn statisk tekst og bilder for å generere dem dynamisk.
Det er purister som anbefaler å unngå filler innhold til enhver pris. Ett argument er at fyllmaterialet abstrakterer deg fra den "ekte" opplevelsen av nettstedet du bygger:
Målet her er å komme så nær den virkelige kundeopplevelsen som mulig. Ikke abstrakt deg selv fra den virkelige opplevelsen. Hvert lag fjernet presser deg lenger og lenger unna den faktiske kundeopplevelsen.
Faktum er, noen ganger kan du ikke etterligne den virkelige kundeopplevelsen. Hvis du har enkle markedsføringswebsteder med statisk innhold laget av en innholdsstrategist, så bruker du alt innholdet til å bygge opp nettstedets design. Innholdet skal informere designen. Men hvis du designer en webapplikasjon fylt med brukergenerert innhold, er det ofte umulig å designe rundt ekte innhold fordi du selv ikke kan generere det; det er gjort av brukerne dine. I tillegg, fra et personvernperspektiv, er det sannsynlig at du ikke har lov til å bruke faktiske kundedata for å fylle ut mockups. Så du er forhindret i å komme så nær brukeropplevelsen som mulig på grunn av juridiske eller personvernproblemer.
Det er imidlertid skritt du kan ta for å holde deg nær den virkelige kundeopplevelsen:
Hvis nettstedet ditt eller programmet krever datainngang, skriv inn virkelige og relevante ord og skriv inn teksten, ikke lim det inn fra en annen kilde. Hvis det er et navn, skriv inn et ekte navn. Hvis det er en by, skriv inn en ekte by.
Hvis du bruker riktig type fyllstoffinnhold, er det mulig å ligner på den endelige brukeropplevelsen. Si for eksempel at designet ditt krever en liste over navn. Istedenfor å bruke:
Du kan bruke ekte navn:
Igjen, Målet her er å komme så nær den virkelige kundeopplevelsen som mulig. Og hvis du kan gjøre det med filler innhold, gå for det!
Fordi vi bryr oss om vårt håndverk, er våre diskusjoner om verktøy og teknikker ofte basert på beste praksis og perfekte løsninger. Fordi vi bryr oss, blir vår arbeidsflyt og kompetanse forbedret med hvert prosjekt. Imidlertid finnes det ikke perfekte løsninger i den virkelige verden. Dette er grunnen til at pragmatiske alternativer (som fillerinnhold) hjelper til med å fullføre prosjekter i tide. Jeg tror dette er helt greit, så lenge vi ikke bringer våre prinsipper i fare.
En foreløpig mockup, som vi alle vet, er ikke hvor nær den endelige, virkelige kundeopplevelsen. Ditt design vil trolig endres drastisk mellom de første og siste iterasjonene. Fyllingsinnhold kan fortsatt være et verdifullt verktøy ved å se hvordan tekst flyter nedover siden, rundt bilder og gjennom breakpoints. Det kan hjelpe deg med å få en følelse for plassering av designelementer, balansen på siden og bruken av negativ plass.
Å gjøre unna med det, gir ingen mening. Fyllinnhold kan være et kritisk verktøy i den første designfasen for rask prototyping og iterasjon av designkonsepter. Når du beveger deg forbi de tidlige stadiene av design, vil det være svært nyttig å bruke innhold som mer ligner på hva brukeren til slutt vil se.
Hvor du tegner linjen på bruker fyllstoffer innholdet er opp til deg. Det er ingen bestemt "ja, bruk den!" eller "nei, det er en skam!". Svaret på "skal jeg bruke filler innhold?" er, som det alltid synes å være, "det avhenger". Noen ganger snakkes det om å ikke bruke filler innhold handler om en ideell verden og ikke den virkelige verden. Du er en profesjonell, bestemmer du. Til slutt lærer du om du har tatt den riktige avgjørelsen, og neste gang du møter spørsmålet "skal jeg bruke fyllstoffer?", Vil du bedre vite hvordan du svarer på det spørsmålet.
Det finnes en rekke vertsbaserte løsninger for å sette inn bilder i HTML-dokumentet ditt, slik at du kan spesifisere ulike bildeattributter via en URL. For eksempel, for å bruke stedkitten, sett ganske enkelt bildestørrelsen du trenger etter deres URL. Bruk deretter denne nettadressen som src av din
Hvis du ikke liker kattunger (hvorfor er du på internett?), Her er noen lignende tjenester som tilbyr forskjellige tilpasninger (se denne runden for flere alternativer):
Det er flere grunner til at du trenger å generere fillertekst. Kanskje du trenger å generere hele avsnitt for å konseptualisere en bloggdesign. Eller kanskje du må generere kategorier av tekst, for eksempel e-post og navn for styling av borddesign. Uansett hva du trenger, finnes det en rekke løsninger for å generere tekst i designene dine.
Det er mange filler tekstgeneratorer på nettet. Ettersom webdesign ofte omhandler lister, tabeller og andre datastrukturer, tilbyr mange generatorer mer enn Lorem Ipsum-fiksere. Nedenfor er en (liten) liste over filler tekstgeneratorer. Hver enkelt tilbyr en rekke tekstkonfigurasjoner som generering av forskjellige språk, omslutting av tekst i HTML-koder, lacing av tekst med overskrifter / underposisjoner, justering av tekstlengde og fet skrift eller kursivisering av ord.
For mer omfattende lister over tekstgenererende nettsteder, er det noen få roundups:
Du kan dynamisk generere fyllmateriale i HTML-dokumentene dine ved hjelp av et JavaScript-bibliotek som:
Som design i nettleseren blir mer populær, kan den gamle kopi / limteknikken for fyllmateriale bli ineffektiv. Hvorfor ikke la datamaskinen håndtere den jobben? La oss dekke denne teknikken mer i dybden.
La oss prøve å sette noe av det vi har dekket så langt i praksis ved å lage en designmockup. For enkelhets skyld, la oss forestille oss at vi har til oppgave å skape et grunnleggende nettsteddesign som viser utdrag av noens favorittartikler fra hele nettet. Vi kaller denne personen Franky og vi kaller designet "Franky's Fav Five".
Dette lille eksemplet skal bidra til å vise fram bruk av dynamisk generert innhold når du utformer en mockup i nettleseren.
Først, la oss skissere vår grunnleggende HTML.
Franky er Fav Five
Som du ser, inkluderer vi tre ekstra ressurser til vår side: en CSS-tilbakestilling, et tilpasset CSS-stilark (som vi skriver senere) og en kobling til Googles hostedversjon av jQuery. Nå, i vår styles.css fil, la oss ta med noen grunnleggende styling regler for vår mockup:
/ * Generelt ============================== * / kropp font: 1em / 1.45 Georgia, serif; bakgrunn: # e9e9e9 repeat; farge: # 222; img maksimal bredde: 100%; høyde: auto; sterk font-weight: bold; .wrapper width: 95%; margin: 0 auto; .content padding: 0 2em; en farge: # 9c0001;
La oss nå lage en enkel topptekst for siden vår. Igjen, ingenting for sofistikert som dette er bare et eksempel mockup.
Franky er Fav Five
Nå legger vi til noen enkle styling i vår topptekst
/ * Header ============================== * / .header padding: .5em 0; bakgrunn: # 333; farge: hvit; tekst-align: center; boks-skygge: 0 1px 3px rgba (0,0,0, .5); bakgrunn: # 45484d; / * Gamle nettlesere * / bakgrunn: -moz-lineær-gradient (topp, # 45484d 0%, # 000000 100%); / * FF3.6 + * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # 45484d), fargestopp (100%, # 000000)); / * Chrome, Safari4 + * / bakgrunn: -webkit-lineær-gradient (topp, # 45484d 0%, # 000000 100%); / * Chrome10 +, Safari5.1 + * / bakgrunn: -o-lineær-gradient (topp, # 45484d 0%, # 000000 100%); / * Opera 11.10+ * / bakgrunn: -ms-lineær gradient (topp, # 45484d 0%, # 000000 100%); / * IE10 + * / bakgrunn: lineær gradient (til bunn, # 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-familie: helvetica; font-weight: bold; tekstskygge: 0 1px 0 # 000;
Nå har vi en enkel side med et overskrift, slik som dette:
La oss nå lage oppslaget for vårt artikkelutdrag. Poenget med denne artikkelen er ikke å vise CSS- og HTML-kodingsteknikker, men heller hvordan å jobbe med fyllmateriale. Derfor vil vi dekke disse trinnene veldig raskt med enkel kopiering og liming. Først vil vi sette opp en wrapper og hovedartikkel.
Merk: Jeg setter pris på et klassenavn for "artikkel" på en artikkelelement kan virke litt absurd - husk at dette er rent demo ...
Vi bruker lorempixel-bildeplassholdertjenesten for å plassere bilder i vårt oppslag. Ettersom våre artikkelfilter er satt til en maksimal bredde på 600px, er det bildestørrelsen vi tar fra lorempixel.
Nå legger vi all vår artikkeltekst i en div. Vår enkle mockup vil bruke følgende repeterbare innholdstyper:
Artikkeltittel her
- forfatter: Forfatternavn
- kilde: onlinesource.com
Dette er hvor all avsnittet tekst vil gå… Les mer "
I hovedsak er dette vår mal for å vise utdrag av Frankys favorittleser. La oss stil det!
Vi har vår grunnleggende oppslag, så vi begynner med å utforme innholdet.
/ * Artikkel ============================== * / .artikkel maks-bredde: 600px; polstring: 0 0 2em; bakgrunn: #fff; margin: 3em auto; grense: 1px solid #ddd; border-radius: 5px; boks-skygge: 0 1px 2px rgba (0,0,0, .1); .artikkel a tekst-dekorasjon: ingen; .artikkel a: svever tekst-dekorasjon: understreke; .article img border-radius: 5px 5px 0 0; .artikkel-tittel display: block; skriftstørrelse: 1,125em; linjehøyde: 1,2; farge: # 222; margin: 1em 0 0; font-weight: bold; font-familie: Helvetica, Arial, sans-serif; tekst-transformere: kapitalisere; / * faker vil ikke sende ut riktig capitlization, men CSS kan håndtere det! * / .artikkel-avsnitt farge: # 555; skriftstørrelse: .875em; linjehøyde: 1,5em; .artikkel-avsnitt: første bokstav text-transform: store bokstaver; / * Artikkel Meta * / .article-meta color: # 777; skriftstørrelse: .75em; font-familie: arial; margin: .25em 0 1em; overløp: skjult; .artikkel-meta li float: left; margin-høyre: 1em; .artikkel-meta li: etter innhold: '\ 00B7'; margin-venstre: 1em; farge: #ccc; .artikkel-meta li: siste barn: etter display: none; .article-author span font-style: kursiv;
Nå har du en ganske enkel mal for å vise artikkelutdrag som ser noe ut som dette:
Så langt har vi en artikkel utdrag (ut av fem, da dette er "Franky's Fav Five"). I stedet for å kopiere / lime opp merket fire flere ganger, bruker vi en til loop i PHP. Hvis du gjør det, vil det opprettholdes en enkelt mal i vårt artikkelutdrag mens du redigerer, men flere artikkelutdrag når du ser på nettleseren. Dette gir lett vedlikehold; hvis vi noen gang vil tilpasse vår artikkel utdragsmal, må vi ikke gjøre det flere ganger.
La oss pakke inn vår artikkel element i følgende kode:
//element her
Legg merke til vår til sløyfe starter med variabelen $ i være lik en og vil løpe til den er mindre enn 6 (slik at den går 5 ganger).
MERK: Pass på å gi nytt navn til filen din med utvidelsen .php hvis du ikke har det ennå.
Nå burde du ha noe slikt:
Legg merke til hvordan bildet vårt fra lorempixel er det samme i hver artikkel? For å oppnå en mer realistisk mockup, vil vi litt endre bildet src så vi får et annet bilde for hvert artikkelutdrag.
LoremPixel lar deg litt tilpasse hvilken type bilde du henter. Her er tilpassingene de tillater i URL-strukturen:
For tiden bruker vi nettadressen http://lorempixel.com/600/200. Det vi skal gjøre er å velge en kategori, for eksempel sport, bruk så vår PHP-tallvariabel $ i for å endre nettadressen, slik at hver artikkel utdrag ber om et eget bilde fra sportskategorien.
For å gjøre dette, finn
Nå, som php count variabelen $ i øker med hver for sløyfe, vil våre bildeadresser be om et annet bilde hver gang. HTML-markup-utdataene fra PHP vil nå se slik ut:
...
...
...
Nå burde vi ha noe som ser slik ut:
Nå som vi har vår grunnleggende mal på plass med et annet bilde for hvert utdrag, vil vi ha forskjellige fyllstoffer for hver artikkel. Dette vil hjelpe oss med å visualisere sluttproduktet bedre.
Dette er hvor et fyllmaterialebibliotek som faker.js kommer til nytte. Ved hjelp av API av faker.js sammen med en liten bit av jQuery kan vi dynamisk fylle opp vår HTML-mal på sidebelastning. Bruk av faker.js API er ganske enkelt. Du kan finne hele API-en på faker.js github-siden. Her er brukseksemplet:
Som du kan se, ved å inkludere faker.js på vår side, har vi tilgang til API-en som kan generere fillernavn, e-postadresser, adresser, innhold og mer. Bare bruk Faker-objektet med en av de tilsvarende metodene.
Først la vi legge til faker.js på vår side. Vi legger til Nå, la oss prøve å generere falske innholdtitler ved hjelp av faker.js og jQuery. Hvis du ser gjennom API for faker.js, vil du legge merke til at det finnes metoder for generering av setninger, avsnitt og ord av Lorem Ipsum innhold. Siden vi vil ha noe som ligner på en artikkel tittel, vil vi ha en setning av Lorem Ipsum: Merk: faker.js vil ikke sende ut en aktivert setning. Ved å bruke CSS-regelen Vi starter med å legge til en klasse av Deretter bruker vi jQuery til å sykle gjennom hver av Nå skal vi ha noe der hver av våre artikkeltitler varierer i innhold og lengde og ligner mer på det dynamiske innholdet på nettstedet vårt. Nå har vi erstattet alle våre artikkeltitler. La oss tenke på det andre innholdet på siden vi vil erstatte. Vi vil fortsatt fylle ut følgende mallstykker: I stedet for å skrive ut jQuery for hvert malestykke vi ønsker å erstatte, vil vi trekke ut genereringen og utskifting av innhold og deretter bare passere i det vi vil erstatte som argumenter. Først må vi finne ut hvilke deler av faker.js vi skal bruke for å generere fyllmaterialet vi trenger. Som nevnt, trenger vi en persons navn, et domenenavn og fiksjonsinnhold. Faker.js har følgende metoder vi kan bruke: Nå som vi vet hvilket innhold vi genererer, må vi legge til et element og en klasse der vi legger til innholdet på oss. Som vi gjorde over, vil vi prefikse hver klasse med "faker-", slik at når vi beveger oss utover å skape en mock og slutte å bruke faker.js, kan vi enkelt finne og fjerne fyllingsklassene vi ikke trenger. Merk: Kontroller at innholdsstoffklassene for fyllstoffer samsvarer med faker.js-metodenavnene. Så Først, la oss håndtere forfatteren ved å legge til en Nå skal vi håndtere kilden ved å legge til en passende klasse til kildelinken: Til slutt, la oss håndtere artikkelutsnittet ved å legge til en Dette er hvor all avsnittet tekst vil gå … Les mer » … Les mer » Nå skriver vi bare en liten jQuery som vil finne alle våre fyllstoffer innholdsdeler og fylle dem med fyllstoffer innhold generert av faker.js. La oss lage en variabel som heter Merk: vi legger til Nå går vi bare over hvert av våre argumenter. Nøkkelen i arrayet blir faker.js-objektet mens verdien i arrayet blir faker.js-metoden. Verdien i matrisen kartet til HTML-klassen, så jQuery vet hvilket element du skal se etter. Det er det! Nå burde du ha noe slikt: Ved å samle ut innholdet av fyllstoffer på denne måten, er det enkelt å legge til / fjerne nye typer fyllstoffer. Nå i fremtiden, hvis du vil legge til en ny filler innholdstype fra faker.js, for eksempel en e-post Vi har bygget en enkel mockup i nettleseren, og viser et designeksempel på fem artikkelutdrag. Vår mal for hvert artikkelutdrag er bare 13 linjer med PHP / HTML, mens den resulterende HTML-filen vil være mye mer enn det. Dette gir rask og enkel prototyping. På dette tidspunktet kan vi enkelt teste designets responsive karakter og se hvordan innhold og tekst reflows. Vi kan tilpasse CSS som krever det, eller vi kan veldig enkelt legge til flere designelementer med tilsvarende fyllstoffer. Dynamisk fyllstoffinnhold gir rask prototyping av design. Kanskje du finner et behov for det i et fremtidig prosjekt! Som du kanskje ser, kan denne typen prototyping være nyttig for mange andre webdesignoppgaver - spesielt data-drevne. For eksempel, hvis du trengte å designe et bord med kontakter med navn, adresser, e-postadresser, telefonnumre og mer, kan du bruke faker.js til å enkelt generere innhold av fyllstoffer du trenger. Dette gjør at du lettere kan fokusere på utformingen av bordet enn å måtte kopiere / lime inn tonnevis av data i HTML-en din, bare få en følelse av hvordan den ser ut og reagerer. Faker.Lorem.sentence (). Dette vil spytte ut en enkelt setning som "praesentium er alias dolor omnis sequi voluptatibus", som vil være godt filler innhold for en artikkel tittel.tekst-transformere: kapitalisere Vi kan tvinge setningen til å bli kapitalisert; og dermed bringe oss nærmere riktig formatering.faker-setning til vår artikkel tittelmal. Dette vil fungere som en krok som gjør det mulig for jQuery å finne alle elementene som burde ha sitt innhold erstattet med setninger av lorem ipsum.
Artikkeltittel her
faker-setning elementer som utgis av PHP og erstatter vårt statiske filler innhold "Artikkel Tittel Her" med en tilfeldig generert setning av Lorem Ipsum. $ ('faker-sentence'). hver (funksjon () $ (dette) .html (Faker.Lorem.sentence ());); 
Trinn 5: Fyller hele siden
Bestem hva faker.js vil generere
Faker.Name.findName () - gir oss et navn, for eksempel John WilliamsonFaker.Internet.domainName () - gir oss et domenenavn, for eksempel eldridge.co.ukFaker.Lorem.paragraph () - gir oss et avsnitt med Lorem ipsum innholdLegg til HTML-klasser der vi legger innhold på fyllstoffer
Faker.Name.findName () trenger HTML-klassen faker-findName og Faker.Internet.domainName () trenger klassen faker-domain etc. Dette vil være nyttig når vi automatiserer funnet og erstatning av fyllmateriale i jQuery.span element med riktig klasse:
span element der vårt filler lorem ipsum vil gå:
args. Dette vil være der vi definerer faker.js API-metodene vi skal bruke. Husk, våre HTML-klasser kart til faker.js-metodene og er ganske enkelt prefixed med faker-.Faker.Lorem.sentence () til våre argumenter, slik at du kan fjerne JavaScript vi opprettet tidligere i trinn 4 for å finne / erstatte artikkeltitlene. var args = 'Lorem': ['avsnitt', 'setning'], // kart til Faker.Lorem.paragraphs () og Faker.Lorem.sentence () 'Name': ['findName'], // maps til Faker.Name.findName () 'Internet': ['domainName'] // kart til Faker.Internet.domainName ()
// loop over args for (var nøkkel i args) var obj = args [key]; for (var prop i obj) // jQuery finner de aktuelle elementene og fyller dem $ ('. faker -' + obj [prop]). hver (funksjon () // Faker.Lorem.paragraphs () // Faker .Internet.domainName () $ (dette) .html (Faker [key] [obj [prop]] ());); 
Faker.Internet.email () alt du trenger å gjøre er å legge det til args variabel og deretter opprette et HTML-element med en klasse av faker-e-post uansett hvor du vil ha en falsk e-post generert.
Konklusjon
Andre bruksområder
Accentsconagua
... 
... 
...