HTML5 og CSS3: Wireframing í endanlegri vöru

Það er klassískt tilfelli af Photoshop á móti vefsíðu. Núverandi vírframleiðsla og frumgerðartæki eru ófær um að endurspegla umhverfið á vefnum nákvæmlega.

Þeir framleiða kyrrstöðu hönnun sem ekki er hægt að sjá með breytu þekkt sem vefskoðarinn. Og þegar þú býrð til loka vefsvæðisins munu sum atriði ekki líta nákvæmlega út eins og drög hliðstæða þeirra, og viðskiptavinurinn mun taka eftir þeim minniháttar munur á letri, staðsetningu osfrv.

Þú gætir verið öruggari með grafík forrit, og það getur virst að hönnun endurtekningarnar taki lengri tíma ef þú þarft að höndla HTML kóða.

Hins vegar eru kostir þess að búa til vírframleiðslu í HTML frá upphafi byrjað að vega þyngra en valin eru: ekki aðeins höfum við nýjar skipulagsþættir í HTML5 og öflugri valmælum og stílum í CSS3, en með því að sameina þær getum við kastað saman einfaldan skipulag fljótt.

Við heyrum nýtt fyrirtæki á hverjum degi ( 37Signal , Atomiq og aðrir ) útskýra samþykki HTML prototyping þess. Helsta ástæðan er sú að ferlið er furðu auðvelt þegar þú hefur rétt verkfæri á sínum stað. Þú ert að fara að læra hversu auðvelt þetta ferli getur verið, og þegar þú ert búinn verður þú að byrja á næsta byggingu.

Snið skipulag með HTML5

HTML5 setur upp á frábærum nýjum skipulagsþáttum sem auðvelda að fletta upp skjal með færri flokka og ids. Þegar þú hefur skilið tilgang þessara þátta, verður þú að geta búið til gróft blaðsíðu skipulag á nokkrum mínútum.

Ef þú ert ókunnur með þessar nýju þætti er hér fljótlegt kynning. Nýju þættirnar gefa upp hreinni skjalasamsetningu en áður, en frelsa þig til að flytjast í burtu frá mikilli notkun deilda. Lachlan Hunt lýsir þessum þáttum vel í " Preview of HTML5 ":

The article þáttur táknar sjálfstæðan hluta skjals, síðu eða vefsíðu. Það er hentugur fyrir efni eins og fréttir og bloggfærslur, umræður og einstök athugasemdir.
The section þáttur táknar almenna hluta skjals eða forrits, svo sem kafla.
The header þáttur táknar haus hluta. Fyrirsagnir geta innihaldið meira en bara kaflans kafla; Til dæmis, það væri sanngjarnt að innihalda undirfyrirsagnir, útgáfu söguupplýsingar og víxlínur.
The nav þáttur táknar hluta af flakki. Það er hentugur fyrir bæði vefleiðsögn og efnisyfirlit.
The aside Einingin er fyrir efni sem er í snertingu við efnið í kringum hana og það er gagnlegt til að merkja upp hliðarstikur.
The footer þáttur táknar fæti hluta. Það inniheldur yfirleitt upplýsingar um þann hluta, svo sem nafn höfundar, tenglar á tengdum skjölum og höfundarréttarupplýsingum.

Í vefsíðunni fyrir dæmi mína vil ég miðju síðu, með haus, hliðarstiku til vinstri, svæði fyrir aðal innihald og fót. Ég hef notað HTML5 þætti til að merkja uppbyggingu, með article þáttur til að innihalda allt.

Example
>

Þessir þættir og deildir eru víddalausar og ósýnilegar nema þú setir stiltákn eða setur efni í þau. Til að gera þær aðgengilegum þurfum við að tengja tímabundið hæðir til þeirra. Við ættum einnig að setja HTML-þætti í display: block; þannig að vafrinn viðurkennir þá (aukakostnaður er krafist fyrir IE).

article, header, nav, aside, section, footer {display: block;min-height: 100px; }

Áður en staðsetningarnar eru settar, þurfum við að geta séð útlitið. Hin fullkomna lausn til að visualize uppbyggingu án efnis væri auðvelt að fjarlægja seinna og myndi ekki hafa áhrif á hönnunina.

Valkostur 1: Yfirlit

Yfirlitið stillingin er samhæf við alla nútíma vafra og hefur ekki áhrif á breidd þætti, en border eiginleiki gerir það.

article, header, nav, aside, section, footer {outline: 1px solid #000; }

Valkostur 2: HSLa

HSLa (eða jafnvel RGBa) gefur þér betri lýsingu á stigveldi frumefna því að ógagnsæi muni skarast þættir birtast dekkri. En ef þú ætlar að hafa undirstöðu bakgrunnslitum í mock-up þá gæti þetta aðferð ekki virkt vel.

article, header, nav, aside, section, footer {background: hsla(200, 30%, 30%, .4); }

Staðsetning

Aðferðin við staðsetningarþætti er spurning um persónulega val og þú hefur nóg af valkostum: Mælitæki í vafranum eða stýrikerfinu, bakgrunnsnetsmyndum (sem ég hef valið), CSS ramma með rist og uppsetningaraðstoð eða hugbúnað eins og Dreamweaver. Staðsetning er mikilvægasti hluti og verður að virka rétt frá upphafi. Kóðinn sem þú skrifar hér mun líklegast vera áfram í lokaprófi.

Í dæminu mínu, ég hef gefið blaðinu fastan breidd, með skenkur til vinstri og innihald til hægri, bæði á milli haus og fótspor.

body > article {width: 760px;margin: 0 auto; }article article {overflow: hidden;width: 750px;margin: 20px 0;padding: 5px; }aside {width: 150px;float: left; }section {float: right;width: 590px; }

Í öllu ferlinu get ég séð hverja hluti og séð hvar það mun birtast. Hér er niðurstaðan:

Ekki hafa áhyggjur af samhæfni vafrans þangað til þú kemst að loka vörunni. Ég mæli eindregið með því að fara með athugasemdir í gegnum CSS athugasemdir og merkja hvaða svæði þú þarft að koma aftur til (sem verður fyrst og fremst að velja og eiginleikar sem krefjast frekari umhyggju fyrir tilteknum vöfrum).

Frumgerðarefni

Þegar útlitið er lokið getur þú þurft að bæta við sýnishorninu. Algengasta aðferðin í dag er að kasta klumpur af Lorem Ipsum og vatnslagaðri ljósmyndun á síðunni. Hvers vegna endurfjármagna hjólið?

HTML Ipsum er frábært vefsíða sem hylur Lorem Ipsum texta í sameiginlegri merkingu. Að vera fær um að grípa allt á einum síðu gæti ekki verið auðveldara.

PlaceHold.it býður upp á staðbundnar myndir í hvaða stærð sem þú þarft með því að hringja í hverja mynd með vefslóð beiðni (ss http://placehold.it/350x150 , þar sem fyrsta gildi er breidd og annað hæð):

PlaceKitten virkar nákvæmlega eins og PlaceHold.it, nema með betri myndum:

Frekar en að bæta við háþróaðri JavaScript fyrir kort, getur þú dregið í grunnkort sem mynd um Google Static Maps . API lykill eða einstök undirskrift er krafist, en þú verður að fá það þó ef endanleg vara mun innihalda kort.

Simulation hegðun

Nútíma vefsíður innihalda virkni sem er erfitt að hafa samskipti í gegnum truflanir vírbrautir: stækkandi og hrynjandi þættir, umbreytingar, draga og sleppa, breytilegar valmyndir osfrv. Þú verður að nota JavaScript bókasafn loksins samt, svo hleðsla bókasafns núna og forskriftarþarfir í sumum grunnvirkni myndi ekki meiða.

Þú getur forðast niðurhal með því að hlaða jQuery frá efnisnetinu. Líkja eftir fyrirhuguðum hegðun með nokkrum aðgerðum í stað þess að skrifa raunverulegan kóða. Til dæmis, ef þáttur ætti að birtast þegar tengill er smellt á (segðu innskráningar gluggi eða snertingareyðublað), þá ertu að búa til fljótleg vírframleiðslu gluggans, fela það sjálfgefið og síðan nota jQuery til að sýna það á smell.

Svo lengi sem þú gerir nógu gott starf til að líkja eftir hegðuninni, getur viðskiptavinurinn séð árangur fyrir sig, frekar en að þurfa að hella yfir röð flæðirit eða skýringar.

Simulating States

Ef þú ert að búa til vírframleiðslu fyrir vefforrit frekar en vefsíðu, gætirðu viljað geta fljótt sýnt nokkur ríki á einni síðu. Þú gætir búið til mismunandi eintök af vírrammanum, hver breytt til að sýna tiltekið ástand, eða þú gætir notað PolyPage .

PolyPage er jQuery tappi sem gerir þér kleift að nota flokka í merkjaprófinu til að tákna þætti sem væri til staðar fyrir mismunandi ríki (til dæmis skráðir inn og útskráðir). Þú getur skipt um hvert ríki með tengil og þannig auðveldað þér að kynna muninn fyrir viðskiptavininn án þess að þurfa nokkrar síður.

Loka hugsanir

Þó að upprunalegu hönnunin sé alltaf glæsileg á pappír eða í PDF, þá hefur það nokkra kosti að byggja upp HTML síðurnar frá upphafi.

Þú sparar tíma sem þú hefur eytt í að endurskapa hönnunina í kóða. Þú forðast rugl að spá í því hvers vegna endanleg vara lítur ekki nákvæmlega út eins og upprunalega. Og þú spara bæði þig og viðskiptavininn tíma, peninga og taugar.

Michael Botsko er vefur verktaki og vefur tækni kennari í Portland, Oregon. Hann nýtur þess að vinna bæði viðskiptavini og opinn uppspretta verkefni með Botsko.net , LLC. Þegar hann er ekki að virka nýtur hann tíma með tveimur börnum sínum og dásamlegum konum.

Hvaða hraða skipulag og frumgerðartæki hafa ég gleymt? Hverjir eru kostir þess að hanna fyrst og byggja síðar?

html5 forritun css3 wireframing html kóða