Kõik teavad ja armastavad Lego klotse. Mind sidus lapsepõlves Legos, ja ma armastan neid tänaseni. Oma mänguasja saate igasugustest Legodest kokku panna kõikvõimalikel viisidel, üks tükk korraga. Seejärel võite alustada otsast ja ehitada nendest samadest juppidest teise mänguasja. Võimalusi on lõputult.

kurb panda viga sisselogimise tulemuste lehe parsimisel

Veebisaidi moodulid sarnanevad palju Legosega. Mõelge moodulitest kui Lego tükkidest, mis võimaldavad teil oma veebisaiti üles ehitada. Kui ühendate need õigesti kokku, moodustavad nad veebilehed. Legos-suguste veebisaitide loomiseks peate mõtlema veebisaitidele kui iseseisvate moodulite kogumile. See artikkel aitab teil just seda teha oma esiotsa arenduse ja kujundusega.

Mooduli kollaažid

Projekti kavandamisfaasi sisenedes kipun asju alustama disaini inspiratsioonikollaažide ja moodulikollaažide kokkupanekuga. See on protsess, mis sarnaneb Dan Malliga, kes nimetab neid kollaaže kujundada kompositsioonijärgse ajastu tulemusi . Inspiratsioonikollaažid on ekraanipiltide kogumid, mida ma kliendile esitan, lihtsalt selleks, et saada ülevaade visuaalsest suunast, kuhu suundume. Need on lihtsalt ekraanipildid veebisaitidest, mis meeldivad mulle ja kliendile.

Kui saame kinnituse, et oleme stiili poolest samal lehel, saan hüpata oma graafilisse redaktorisse (eelistan Visand ) ja luua moodulikollaaže. Need kollaažid on kõige sagedamini kasutatavate moodulite kogumid - nupud, vormid, pealkirjad, lõigud, loendid, pildid ja nii edasi. Moodulikollaažid võimaldavad mul kiiresti luua tükke sellest, milline veebisait välja näeb ja kuidas see välja näeb.

Siin on osa minu hiljutisest moodulikollaažist, näide nupust, mille ma kujundasin Visand projekti alguses:

Võib-olla mõtlete, millal tulevad mängu staatilised kompaktid ja pikslite täiuslike kujunduste esitamine kliendile. Nad ei tee seda - ma jätan need peaaegu täielikult oma protsessis vahele. Protsessi selle osa vahelejätmine võimaldab mul projekti sisse lülitada väga varakult ja prototüüpide koodidesse (jõuan varsti nendeni) või teisisõnu brauseris kujundada. Siin on mõned brauseris kujundamise eelised:

• Brauser on veebisaidi loomulik keskkond ja graafilises redaktoris tehtud ideedest kinnipidamine võib anda tagasilöögi. Brauserites on loomulik katsetada ja kujundusotsuseid teha. Olete seda varem kuulnud, kuulete uuesti - see pole seotud selle välimusega, vaid sellega, kuidas see töötab.

Brauser on veebisaidi loomulik keskkond ja graafilises redaktoris tehtud ideedest kinnipidamine võib anda tagasilöögi. Piiksuma

• Staatiliste mõnitamiste ja selle vahel, mille lõpuks jõuate, on alati disaini vastuolusid brauseris kui need on koodiks tõlgitud. Nende vastuolude vältimiseks minge reaalsete kujundusprobleemide lahendamiseks koodiredaktorisse ja brauserisse.

• Staatilised kompid ei pruugi õiget sõnumit kätte saada. Interaktiivsuse integreerimisel on välimus ja tunne palju erinev - näiteks hõljumisolekud, üleminekud ja animatsioonid.

• Selle asemel, et veeta tundide kaupa mitme resolutsiooni jaoks mitu staatilist maketti, saan varakult koodi sisestades säästa palju aega. CSS-i kohandamine võimaldab mul kiiresti demonstreerida muutusi ja kliendile reageerivat aspekti erinevates seadmetes - nutitelefonides, tahvelarvutites jne.

Niisiis, säästke aega ning avage koodiredaktor ja brauser, et hakata seda looma UX nii vara kui võimalik. Minu kogemuse kohaselt küsib enamik kliente enne kodeerimisega jätkamist lehe või kahe täieliku maketi ja see on täiesti hea. Kliendi jaoks on oluline tuleviku kujunduse hea tundmine. Tavaliselt kasutan Visioon , mis on suurepärane vahend varajaste makettide, muudatuste, kommentaaride ja muu jälgimiseks. Klientide jaoks on siiski väga oluline mõista, et Sketch ja InVision ei vii neid väga kaugele.

Eesmise arendamise moodulite ehitamine

Kui klient on moodulikollaaži ja minu loodud makettidega rahul, saan hakata kodeerima ja määratleda nende elementide tegeliku ilme ja tunde.

õppida, kuidas programmeerida c ++ keeles

Moodulikujundus on iteratiivses protsessis põimunud mooduliarendusega. Kodeerin mooduli üles, proovin siis brauseris, kuidas see töötab, ja vajadusel kordan. See protsess sarnaneb jällegi Legode ehitamisega - põhimõtteliselt kujundate ja arendate samal ajal ning proovite erinevaid variatsioone, kuni tunnete end selles hästi.

Alustan sageli moodulite väljatöötamist millegi lihtsa ehitamisega, näiteks nupu abil. Kujutage ette, et ehitate selle ise ja peate kodeerima oranži nupu, mida tavaliselt kasutatakse kontaktivormi jaoks. Siit võiksite tulla:

.submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; } A link

Piisavalt lihtne, eks? Rakendate oma HTML-ile klassi .submit-button ja see lahendaks teie praeguse probleemi. Mis juhtuks siis, kui peate looma uue nupu, täpselt sama, kuid sinise taustavärviga? Tõenäoliselt kopeerite selle täpse klassi, seejärel muutke klassi nime ja taustavärvi. Kiire ja räpane. Kujutage ette, et peate siis kasutama sama nuppu, kuid oranži taustaga. Näete, kuhu see läheb - võite lõpuks palju CSS-i korrata. Ülipisiku projekti puhul ei pruugi see tõeliseks probleemiks kujuneda, kuid suuremate puhul ilmselt. Enne kui teate, on teie CSS ülespuhutud ja seda on raske hooldada.

Kui olete kunagi välja töötanud keskmise suurusega projekti, olete kahtlemata kogenud oma peavalu. Need võisid olla põhjustatud järgmistest põhjustest:

• Kood, mis on räpane, ebajärjekindel, seda on raske skannida ja sellest aru saada.
• Paisutatud kood ja XXL CSS-failid, millel on palju dubleerimist.
• Kood, mida on raske hooldada.
• Struktuuri ja naha eraldamise puudumine.

Ärge muretsege, te pole üksi. Vean kihla, et kõik esiotsa arendajad olen neid valusaid probleeme aeg-ajalt kogenud ja ilmselt palju muudki. Võin julgelt öelda, et mul on varem olnud palju projekte, kus ma olen kokku puutunud kõigi nende tüüpiliste probleemidega.

Üks viis nende probleemide vältimiseks või minimeerimiseks on modulaarne ehitamine.

Modulaarne nupp

Kuidas seda nuppu modulaarselt kodeerida? Modulaarne lähenemisviis oleks koodi kirjutamine, mida saate uuesti kasutada. Pidage meeles neid Legosid, mida saab uuesti kasutada.

.button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; } A link

See, mida oleme teinud, on stiilide nutikas eraldamine. Klass .button sisaldab stiile, mida iga teie projekti nupp kasutab, nii et te ei pea seda kordama. Klass .button-orange kasutab ainult oranži nupu jaoks asjakohaseid stiile. Teeksite sama kõigi teiste nuppude jaoks ning määraksite nende tausta ja teksti värvid.

Teie nupumoodul võib lõpuks koosneda mitmest iseseisvast nupust, mis on valmis kasutamiseks alati, kui neid vajate.

Aga keerulisem kraam?

Järgite samu põhimõtteid kõigi teiste komponentide jaoks, mida vajate. Eesmärk on luua moodulid, mis on eraldiseisvad elemendid, sõltumatud teistest moodulitest. Kombineerituna moodustavad need moodulid mallid, kus saate mooduleid vastavalt vajadusele taaskasutada ja töötada oma disaini lõpuleviimiseks.

Modulaarse esiotsa arenduse lugemiseks soovitan tungivalt SMACSS , mis on arhitektuur, mida ma kipun kasutama kõigis oma projektides, nii suurtes kui väikestes.

kes lõi c programmeerimiskeele

Pidage meeles, et modulaarne protsess seisneb ehitamises, testimises ja kordamises. Kõigepealt toodetakse moodul teie redaktoris, seejärel testitakse brauseris ja seejärel vajadusel itereteeritakse. Korrake seda tsüklit, kui vaja.

Kliendi kaasamine

Ärge unustage kliendi vajadusi - nad tahavad, et neid hoitakse kursis ja nad saavad kinnituse, et nad saavad oma raha väärt. Selle arendusprotsessi ilu on see, et kliendid saavad olla teie meeskonna aktiivsed liikmed. Saate neile turvaliselt mooduleid näidata ja nad saavad toote paremaks muutmiseks kogu aeg tähelepanuta jätta arendusprotsessi ja sisse astuda. Enne tegeliku progressi nägemist ei pea nad ootama staatilise kompakti valmimist ega verstapostini jõudmist. Kui võtate mõnda aega aega, et oma klientidele moodulite tööd selgitada, saavad nad paremini aru ja hindavad disainiprotsessi ja nende ehitamiseks kulutatud aega.

See, kuidas ma tavaliselt klientidele mooduleid tutvustades käin, on väga sarnane Bootstrap teeb seda - isoleeritud mooduli seadistamine koos selle koodiga on suurepärane viis kõigi disainerite, arendajate ja klientide protsessi kaasamiseks.

Kasutage ehitatud mooduleid lehtede ehitusmaterjalidena. Indeksilehe jaoks võite panna navigeerimismooduli ülemisele osale, kangelasemooduli järgmisena, mõned sisumoodulid järgmisena, seejärel oma jala alaossa. Enne kui teate, on teil juba HTML-i prototüübi leht. Aga mis täpselt on prototüüp? Mulle on alati meeldinud Leah Buley definitsioon prototüübist tema suurepärasest raamatust The Kasutajakogemus Ühe meeskond:

Toimivad või pooleldi toimivad näited selle kohta, kuidas disain peaks pärast rakendamist käituma ja toimima.

Ehitades prototüübi, saate just selle projekti varases etapis - pooleldi toimiva veebisaidi. Seal, kus staatilised maketid ja InVision alla jäävad, paistavad silma HTML-i prototüübid. Prototüüp on täiuslik reageeriv tulemus oma klientidele. Ja kui kliendil on teie prototüübi välimus ja tunnetus korras, on vaja ainult lihvida, kuni see töötab nii, nagu vaja. Ehitamine, testimine, kordamine.

Taaskasutage ehitusplokke

Moodulid ja prototüübid võimaldavad teil koodi uuesti kasutada praeguse projekti jaoks, kuid ka tulevaste projektide jaoks. Viimasest projektist mooduli kohandamine võib säästa palju aega - igas projektis vajalikud moodulid on sageli sarnased. Mul on suur moodulite kogu, mida ma sageli taaskasutan: vahelehed, navigeerimismenüüd, nupud, riivsai, vormid, tabelid, lehekülgede paigutamine, loendid jne. Kuigi nende moodulite kood pole kõigis projektides täpselt sama, on selle head tükid saab taaskasutada, säästes palju arendusaega. Minu nõuanne teile on luua korduvkasutatavad moodulid ka enda jaoks. Kontrollige BASSCSS , Puhas ja Täitmine inspiratsiooni saamiseks.

kuidas tarkvara koodi kirjutada

Ärge laske end sellest heidutada, kui modulaarsele kujundusele ja arendusele üleminek võtab aega. Muidugi, kui modulaarsed põhimõtted on teie jaoks uued, nõuavad need teie disaini- ja arendusprotsessi muutmist, kuid muudatus võib osutuda kasulikuks.

Modulaarsed meetodid ja tehnikad, mida ma selles artiklis käsitlesin, lihtsalt kriimustavad pinda. Sellegipoolest loodan siiralt, et see artikkel on olnud kasulik ja et see on teid huvitanud modulaarsesse disaini ja arendusse sukelduma.