A tilfelli fyrir kóðun vírbrautanna

Vinna sem hönnuður dag eftir dag getur verið laborious. Til allrar hamingju hefur svæðið stækkað og því hefur ferlið orðið einfaldara. Mörg ókeypis verkfæri og úrræði eru þarna úti.

Wireframes koma glæsileika að hönnun mock-ups. Þau eru grundvallarskipulag vefsvæðis, með litum og aukahlutum fjarlægt.

Þeir eru notaðir til að skoða hönnun hugtök með bara berum meginatriðum, og þeir geta veitt gagnlegt sjónarhorn á hvaða verkefni sem er.

Flestar vírbrautir eru búnar til í hugbúnaðarpakkar eins og Adobe Photoshop og Fireworks, en sumar vefsíður gera þér kleift að búa til vírrammyndir í hægri vafranum.

Í þessari færslu munum við fara yfir kóðun á grunn vírmynda í HTML og CSS og sjá hvernig það getur gagnast skapandi ferlinu.

Afhverju ertu að trufla?

Af hverju að eyða tíma í að skissa uppbyggingu vefsíðu? Í sumum tilfellum gæti verið óþarfi, en það getur hjálpað þegar þú ert fastur í rif eða baráttu við að sjá stóra myndina.

Það getur gagnast bæði hönnuðum og viðskiptavinum. Í greiddum vinnu ertu ábyrgur fyrir því að þóknast viðskiptavininum. Sýnir grunn uppbyggingu þeirra fljótlega til að vera hönnuð website getur gefið viðskiptavinum léttir og tilfinningu fyrir stjórn á öllu ferlinu.

En ef hönnunin er mjög einföld eða hefur einföld uppbygging þá gæti það ekki verið þess virði að búa til vírframa. Mocking allt hlutur í Photoshop, með hnöppum og litum, gæti verið eins fljótt.

Ákveða hvaða skref að taka þarf tíma og gagnrýna hugsun. Eftir allt saman er vírframleiðsla eingöngu verkfæri. Það er vanmetið af mörgum vefhönnuðum en ótrúlega gagnlegt skilið einu sinni.

Prototyping Wireframes í kóða

Í mörg ár hefur Adobe hugbúnaðarhugbúnaður verið fyrstur föruneyti fyrir vírframleiðslu, en vefurinn hefur gengist undir verulega breytingu og er enn að þróast.

Hækkun kóðunarstaðla og aukning í HTML5 skjöl eru stór skref í átt að sameiginlegum vefur. Nú er kóða undirstöðu vírramma í HTML og CSS ekki meira en að takast á við starfið í Flugelda.

Með vírbrautum geturðu ráðið verkefnisstöng frá mörgum sjónarhornum. Þú getur jafnvel prófað fyrir eindrægni með CSS2 og CSS3 tækni og vöfrum. Hlutir þurfa ekki að vera flóknar í upphafi; a wireframe þjónar einfaldlega sem traustan grunn til að hefja erfðaskrá.

Hlutdeild efni verður einnig auðveldara með vírframleiðslu. Þú getur hýst öllum skrám sem þú þarft á hvaða vefþjóni sem er og þú getur sett upp kynningarskrá og framsenda virkjar uppfærslur til viðskiptavina og umsjónarmanna verkefnisins. Gerðu breytingar, eins og fljótleg klip til margra og breidda í CSS skjalinu, er einfalt líka.

Staðlaðu kóða til lengri tíma

Wireframes spara tíma í þróunarferlinu. Ef CSS-stílin fyrir grunnþáttana þína eru þegar skrifuð, þá er restin bara filler (mikilvægt filler, hugaðu þér).

Byrjaðu á réttan hátt með rétta HTML skjal tegund og skrá uppbyggingu. Skjal gerðir eru ekki of ólíkir hver öðrum. Þú getur lesið um þau á W3C forskriftarsíða . Þeir skiptast ekki máli í gamla World Wide Web líkaninu, en HTML5 er ítarlegur og gerir vefsvæðið þitt kleift að vaxa.

Þú verður að prófa eindrægni á eins mörgum stýrikerfum og vöfrum eins og mögulegt er og víddarprentunarstigið er fullkominn tími til að gera þetta, vegna þess að þú hefur þegar lagt áherslu á að skipuleggja útlitið.

Þetta er líka góð tími til að vinna á farsímavænni sniðmát. Þegar uppbyggingin breytist ættir þú að geta fært inn hugmyndir og unnið með númerið á skjalinu. Þróun verður auðveldara vegna þess að það er minna kóða til að ringulreiða upp farsíma og sérsniðnar stíll.

Upphaf uppbyggingar skjalsins

Besta leiðin til að byrja er með óháð ákveða, því það gefur þér sköpunargáfu. Augljósir þættir sem koma fram í kóðanum (eins og í öðru vefskjali) eru html , head og body .

Þetta er beinagrindin. Þú þarft nokkrar fleiri þætti til að víraframleiðandinn líti vel út. The div (eða deild) er athyglisvert. Þetta er þátturinn sem notaður er til að henda ákveðnum sviðum síðunnar, svo sem merkið eða leitarreitinn.

Divs eru byggingarblokkir HTML5 vírframleiðslunnar. Nokkuð og allt getur verið umslagið í a div , og stíl er gola þegar þú notar námskeið og kennitölur við þætti. Mikið af aðalkóðanum þínum verður skipt upp eftir divs vegna þess að þeir eru grundvallarþættirnir.

Með nýju HTML5-forskriftirnar er þáttur sem heitir nav hefur verið kynnt. Þetta er hægt að sameina með óskipuðum lista og sumum CSS eiginleikum til að búa til og skilgreina helstu flakkarsvæði vefsvæðisins. Hér að neðan er einfalt dæmi um hvernig þú gætir byggt upp þinn nav :

Vinna með header og footer Elements

Þú munt taka eftir í dæminu hér fyrir ofan sem ég notaði div með kennimerki header að aðskilja fyrirsögnina mína. Þetta er fullkomlega ásættanlegt og ekkert er athugavert við ofangreindan kóða. HTML5 gefur okkur aðra möguleika, þó.

The header þáttur í nýju HTML5 forskriftunum gerir þér kleift að skilgreina frekar uppbyggingu þína, sem er gagnlegt að mestu leyti fyrir vefskriðlaugendur og skjálesendur, sem aðskilja "fyrirsögn" hluta efnisins. Það ætti ekki að skipta máli fyrir notendur þína og það heldur kóðanum þínum og sýnir að þú skilur raunverulega hvað þú ert að tala um.

Annar áhugaverður þáttur sem hefur verið bætt við er footer . Sami hugmynd: Notaðu þennan þátt í stað a div til að aðgreina fóturinn þinn. Almennt eru fótspor út úr því og innihalda grunnupplýsingar um vefsíðuna eða fyrirtækið.

Þú gætir bætt við tenglum við fótinn og notað a nav þáttur til að skilgreina sum þeirra, en það væri óráðlegt. The nav Eining tilgreinir helstu flakkarsvæði, svo að bæta því við fótinn eða annars staðar væri óþarfi.

Í þessari atburðarás, með því að nota footer þáttur og aðskilja leiðsöguhlekkana sem óskráð listi er best. Þú getur notað dálkinn fótur, með fjölda dálka tengla. Þetta gæti verið aðskilið div þættir sem birtast við hliðina á hvoru öðru, allt sem er pakkað í aðalfótinn.

CSS Techniques fyrir Styling Wireframes

Ef þú skilur HTML og hefur unnið með netið um stund, þá þekkir þú líklega nokkur grunn CSS. Margir af nýju eiginleikum CSS3 eru til þess að bæta við ímyndaðum hringlaga hornum og dropaskuggum í texta.

Ég meina ekki að stinga upp á að CSS stíl sé ekki mikilvægt, en kjarna skipulag og staðsetning er það sem að lokum byggir uppbyggingu vefsvæðisins. Með CSS skilgreinir þú breidd, framlegð og bil. Þetta eru helstu eiginleikar flestra vefþætti, og þau eru síðasta skrefið í að skapa sannarlega framúrskarandi vírramma.

Ef þú hefur áhuga á nýjum eiginleikum CSS3 og valmöguleikum, skoðaðu þá Webdesigner Depot's safn aukahluta . Það inniheldur handbækur um allan vefinn um nýja eiginleika í CSS3.

Bætir við clearfix að stílum

Ef þú ert ókunnur með clearfix tækni, gerðu það nokkrar rannsóknir . Það er vinsæll flokkur sem þú vilt bæta við í div gámur sem geymir tvær eða fleiri fljótandi blokkir.

Ef þú hefur aldrei heyrt um clearfix, gæti það virst ruglingslegt en hugtakið er einfalt. Hugsaðu um gám div það hefur tvö div s inni í henni, báðir fljóta til vinstri. Sjálfgefin myndu flestir vöfrum gera tvær dálkar eins og að snerta hvort annað og innihalda div myndi stækka niður síðuna til að passa hver sú dálkur er lengst.

Með því að bæta við clearfix flokki í ílátið þitt, munu bæði dálkar passa hamingjusamlega inni í ílátinu div , sem stækkar niður nógu mikið til að passa bæði þætti. Þetta leysir mörg vandamál í prototyping vírframleiðslu, sérstaklega með tveimur dálkum skipulagi (þ.e. aðal innihald og hliðarstiku). Þessi aðferð mun einnig virka fyrir þriggja og jafnvel fjóra dálka skipulag, hver dálkur þyrfti bara að passa í minni rými.

Sýni CSS: Halda stílum utanaðkomandi

Hvað á að gera við CSS staðsetningu er önnur mikilvæg ákvörðun. Professional vefhönnuðir og forritarar benda einfaldlega á að halda sjálfstæðum .css skrá, aðskilin frá HTML kóða þínum.

Þannig er uppbyggingin í einu skjali og útlit og hönnun er í öðru. Báðir eru jafn mikilvægir fyrir vírframleiðslu, en þeir framkvæma mismunandi verkefni.

Öll HTML kóða þín er stranglega skipulögð. Þú getur sett tengla inni málsgreinar í gámum div s inni í öðrum ílátum og svo framvegis. Stíllinn stjórnar stærð, bili, brúnum og bókstöfum málsgreinar og tengla og vírframan skilgreinir breidd gáma og staðsetningu þeirra á síðunni.

Page þættir veita frekari dæmi. Þú myndir kóðaðu div gáma fyrir innihald og skenkur, en þú myndir stilla og setja þær með CSS. Fyrir hönnuður, skilning á því hvernig á að skilja efni og stíl er lykillinn að því að mastera vírframleiðslu.

Settu inn Dynamic Page-Element Placeholders

Ímynda sér jQuery áhrif og Ajax-efied vefþætti virðast vera allt reiði. Stefna vaxandi, og næstum allir vinsælar vefsíður eru með breytilegt efni. Það er mikilvægt að íhuga. Ef þeir bætast við hönnuninni, af hverju ekki að finna blokkir í vírframleiðslu þinni?

Þróun heillegs bakviðskerfis fyrir öflugt innskráningarreit gæti ekki verið hagnýt, en að skrá JavaScript bókasöfnin sem þú þarft er frábær byrjun. Þú gætir líka kóðað stíl sem byggir upp þennan reit og settu hluti í stað síðar, þegar þú myndir bæta við lit og smáatriðum.

Þessi þemu er hægt að beita á mörgum mörkum tengi. Þú gætir notað leitarfyrirmæli svipað Google eða skilið eftir athugasemdum í kóðanum þínum til að framkvæma dynamic fréttir eða Twitter-fæða kassi, annaðhvort sem myndi gera vírframleiðslan þín virk og veita glæsilegan hátt til að tákna fastan hlut í stað hreyfils efnis . Á frumgerðarsíðunni er þetta allt sem þú þarft samt.

Common Wireframe Development Mistök

Það er erfitt að fara úrskeiðis þegar þú ert bara að byrja að kóða grunn uppbyggingu vefsvæðis, en hafðu ákveðnar upplýsingar í huga.

Mundu að vírframleiðsla er tilgangur þess að leggja fram ramma án mikillar smáatriða. Það er gagnlegt á fyrstu stigum að skipuleggja síðuþætti; þú getur djúpt djúpt inn á vefsvæðið þitt og séð stóra myndina.

Halda hlutum einfalt og í lagi. Yfirlit yfir þetta er algeng mistök og það mun örvænta getu þína til að mæta fresti. A wireframe þarf ekki að vera einhvers staðar nálægt fullkomnu; Það átti að vera gróft yfirlit vefsins. Jafnvel strangt HTML og CSS vírframe ættu aðeins að samanstanda af síðuþáttum.

Forðastu vegfarendur með því að einbeita þér að helstu markmiðum þínum. Mundu hvers vegna þú byrjaðir ferlið með vírframe í fyrsta sæti!

Wireframes geta einnig leyst mörg vandamál sem taka á sig hönnunarferlið. Kóðun frumgerð í HTML og CSS er besta leiðin til að fá forskot á vefverkefni, stórt eða lítið. Það er einföld og skilvirk leið til að móta hugmyndir þínar.

A tonn af greinum á vefnum tengjast vírframleiðsluferlinu. Ég hef fjallað um kóðun og þróun hliðar, en að læra meira um vírframleiðslu. Hönnunarábendingar eru þarna úti; þú verður bara að finna þá!

Þessi færsla var skrifuð eingöngu fyrir Webdesigner Depot by Jake Rocheleau , ástríðufullur vefur hönnuður og félagslegur fjölmiðla áhugamaður. Jake elskar að lesa og skrifa um nýjustu stafræna þróun á netinu og net í hönnunarfélaginu. Athugaðu hann út á Twitter @jakerocheleau fyrir meira um starf hans.

Hvað eru reynslu þína með vírframleiðsluferlinu? Ertu að vinna í kóða fyrst eða í annarri tegund hugbúnaðar? Hvað finnst þér einhverjir kostir við frumgerð í kóðanum fyrst?