Kasulikke näpunäiteid ja tööriistu veebidisaini eksperimentide jaoks

Tänane artikkel julgustab teid harjuma pühendama aega väikestele katsetele. Ideede katsetamine ja probleemide lahendamine madalrõhulises ja võib-olla isegi lõbusas keskkonnas võib teie haridust märkimisväärselt edendada ja viia vinge uuenduseni.

Alustame mõningate eeliste ja näpunäidetega veebiarendusprojektidega katsetamiseks ning lõpetame lühidalt mõne tööriistaga, mida ma isiklikult kasutan oma katsete koostamiseks. Alustame!

Katsetamise eelised

Katsetamine on võimas asi. Tegelikult nimetaksin seda absoluutselt ülioluliseks elemendiks iga veebiarendaja täiendõppes, olenemata sellest, kas olete olnud kümme päeva või kümme aastat. Kõik teadmised veebikujunduse kohta maailmas ei tähenda kükitamist, kui te ei hüppa sisse ja käsi puhtaks.

"Minu jaoks on absoluutselt parim viis õppida midagi selles valdkonnas tekstiredaktorit käivitama ja endale seda laskma."

Loen regulaarselt veebidisaini raamatuid ja vähemalt sirvin, kui mitte täielikult, iga päev mitu veebikujunduse õpetust. Need on suured ressursid, kuid minu jaoks on absoluutselt parim viis õppida midagi selles valdkonnas tekstiredaktorit käivitama ja ise seda laskma.

Tundub, et teooria ja juhised hoiavad minu ajus üsna ajutist kohta, kuid praktiline projekt mahutab end sügavalt mu pikaajalisse mällu. Põhjus on tavaliselt üsna lihtne: pettumus. Tõde on see, et ma kindla idee või katse teostamisel ebaõnnestub regulaarselt. Tavaliselt ei tööta asjad lihtsalt nii sujuvalt, kui ma neid ette kujutan, ning tulemuseks on see, et ma istun ja kipun tundide kaupa probleemiga tegelema.

Frustratsioon esitab mulle väljakutse. Kui olen silmitsi probleemiga, mida ma ei suuda kohe lahendada, otsustan selle iga hinna eest peksa saada. Projektil endal on vähe tagajärgi või see puudub üldse, see on välja töötamine, mis sunnib mind oma teadmiste baasi suurendama, mis omakorda aitab kõigis tulevastes projektides edasi liikuda.

Näpunäited katsetamiseks

Enne kui vaatame mõnda tööriista, mida ma isiklikult kasutan oma ideede kiireks rullimiseks, tutvume mõne põhiasjaga, mida tuleks omaenda veebiarenduse eksperimentide alustamisel meeles pidada.

Teil pole tingimata vaja eesmärki

Mõne koodiga näpistamisel aitab see kindlasti eesmärki või sihtkohta meeles pidada, kuid tõepoolest ei tohiks te praktikat vältida ainult seetõttu, et teil pole mingit suurejoonelist ideed või tüli.

Kirjanikud tegelevad selle harjutusega sageli seal, kus nad lihtsalt tulevad maha ja kirjutavad oma mõtted üles, kui nad tulevad, see on suur komme sattuda ja võib tõesti genereerida mõnda kindlat kirjutamisideed. Arendajana peaksite proovima sama asja. Kui teil on ühel pärastlõunal igav ja teil on tapmiseks kolmkümmend minutit, alustage lihtsalt kodeerimist, et näha, kuhu see teid viib. See kõlab autsaideritele kohutavalt igavalt, kuid usaldage mind, kui olete õige eriala, siis armastate seda iga minut.

Kaeva teiste inimeste koodis ringi

Eksperimenteerimisel ei pea te nullist alustama, see on üks parimaid viise, kuidas uusi tehnikaid korjata, selleks, et avada kellegi teise kood, et näha, mis selle linnukese teeb. Kui olete sisse jõudnud, ärge lihtsalt sirvige, asuge asju muutma ja kommenteerige jaotisi, et näha, kuidas leht reageerib. Pea alati meeles, et küsida „miks?“ kui näete midagi, millest te ei saa aru!

Mõningad suurepärased kohad alustamiseks on eelnevalt ehitatud raamistikud ja katteplaadid, näiteks HTML5 katteplaat. Seda tüüpi tööriistad on loodud hõlpsaks sirvimiseks, nii et lisaks üsna edasijõudnutele on need ka eriti hästi dokumenteeritud ja korraldatud.

Unustage reeglid

Professionaalset veebisaiti kodeerides veenduge, et tegutseksite kehtiva semantilise koodi ja brauseriteülese ühilduvuse korral parimal viisil. Kui aga katsetate, ärge kartke visata ettevaatust tuule poole ja proovige kõike, mis meelde tuleb.

Probleemi lahendamisel on oluline teada, mis töötab ja miks, isegi kui teie lahendus osutub elavas veebikeskkonnas vastuvõetamatuks, võib see aidata teil selleni jõuda.

Lisaks on HTML5 ja CSS3 vahel hulgaliselt uusi tehnikaid, mis lihtsalt ootavad, et saaksite tulevikus proovida, kuidas tulevikus veebidisainile pilgu peale saada. Paljud neist töötavad ainult kahel brauseril või vähem, kuid see ei tähenda, et pole mõtet sisse kaevata ja vaadata, kuidas need töötavad!

Kui olete oma Frankensteini veebikoletise loomise lõpetanud, käivitage see läbi valideerija või kiu tööriista, et näha mõned selgitused, miks see pole õige, ja soovitused selle parandamiseks.

Võta juhendaja

Veel üks suurepärane katsetamise katalüsaator on veebikujunduse õpetus, nagu need, mida näete sellel saidil ja muud. Kui näete mõnda neist, sirvige seda ja küsige endalt, kas pakutav lahendus on parim.

Ärge järgige lihtsalt mõistlikult juhiseid, mõelge, kuidas saaksite seda protsessi parandada, vähendades ebaefektiivsust. Konkurendid teie seas leiavad, et kui seista silmitsi vastasega, keda proovite kõige paremini proovida, aetakse teid palju kaugemale, kui tavaliselt teeksite.

Tööriistad katsetamiseks

Selle asemel, et anda teile tohutu nimekiri ressurssidest, mida peate tõeliste kalliskivide leidmiseks ise läbi sorteerima, otsustasin seekord pakkumist vähendada ja esitada ainult need tööriistad, mida ma isiklikult katsetamiseks kasutan.

Allpool olevad tööriistad on põhimõtteliselt üsna sarnased, kuid erinevad piisavalt palju, et leian, et kasutan neid erinevate asjade jaoks. Neid proovides ja mõlemasse tunnetades näete, mida ma mõtlen.

Espresso Maci jaoks

Alustame nimekirja ainsa mittevaba ressursiga. Espresso ei ole lihtsalt eksperimenteerimisvahend, see on täielik professionaalse IDE töö, mis maksab teile umbes 80 dollarit. Kui olete aga professionaalne veebidisainer, on see väärt iga senti.

On miljon põhjust, miks see sobib suurepäraselt teie esmaseks kodeerimiskeskkonnaks, kuid peamine põhjus, miks see katsetamiseks sobib, on reaalajas eelvaate aken. Koodimise ajal värskendatakse HTML-i eelvaadet reaalajas ilma käsitsi värskendamiseta.

Kasutage Divvy või mõnda muud sarnast tööriista, et jagada ekraani kinnisvara koodi- ja eelvaateakende vahel ning teil on endal ületamatu katsetamise töövoog. Veel üks vinge eelis, mida te tasuta veebitööriistadest sageli ei leia, on automaatne lõpuleviimine, mis tõesti säästab palju trükiaega ja võimaldab teil need katsed kolmandiku ajast välja lükata.

Kui olete juba Espresso fänn, siis vaadake Espresso 2 Kaboomi väljaannet!

CSSDesk

Kas soovite kodeerimiskeskkonda, mis värskendaks reaalajas, kuid ei maksaks teile peenraha? Tutvuge CSSDeskiga. See vinge väike tööriist koosneb kolmest peamisest valdkonnast: CSS, HTML ja eelvaade. Kui kodeerite ekraani vasakpoolses servas asuvasse väikest laiendatavat sahtlit, värskendatakse paremal asuvat eelvaadet reaalajas, muutes selle suurepäraseks võimaluseks, et saaksite oma veebidisaini ideid kiiresti proovida.

CSSDesk on äärmiselt kasulik ja sellel on mõned suurepärased funktsioonid, sealhulgas võimalus oma loomingut jagada või alla laadida. Üks ainulaadne asi, mida ma pole kusagil mujal näinud, on võime kohandada teie katsete tausta. See on tõesti suurepärane, kui te ei kodeeri tervet lehte, vaid soovite keskenduda ühele üksusele.

Armastate ka ridade nummerdamise, koodide esiletõstmise ja koodi sahtli täieliku peitmise eeliseid, et katset saaks näha kogu akna suuruses.

jsFiddle

jsFiddle sarnaneb palju CSSDeskiga, ainult funktsionaalsuse olulise tõukega (mis võib olla lihtsa eksperimendi eeliseks või vastupidiseks). Alustuseks, nagu nimigi viitab, on siin suur rõhk JavaScriptil. Selleks, et abiks olla, ei pea te siiski kirjutama JavaScripti ühte rida.

JsFiddle'is on teil neli muudetavat ala, üks HTML-i, CSS-i, JavaScripti ja eelvaate jaoks. Erinevalt kahest eelmisest valikust tuleb eelvaadet käsitsi värskendada iga kord, kui soovite seda vaadata.

Üks jsFiddle'i vinge omadus on võime kiiresti laadida populaarsetes JavaScripti teekides, näiteks MooTools ja jQuery. Samuti saate oma töid salvestada, jagada ja neid kahvlida. Koodi korrastamiseks ja teiste eksperimentide kommentaaride tegemiseks on nupud.

Mulle tõesti meeldib lihtne ja tõhus CSSDeski keskkond, kuid tegelikult on jsFiddle minu kiireks katsetamiseks veebipõhine koht. Ma lihtsalt armastan seda tööriista ega oska piisavalt soovitada, et teeksite nädalase harjumuse, kui kulutaksite siia tulekuks aega ja mõtleksite läbi ideede või probleemidega, mis teil on olnud.

Järeldus

Kokkuvõtteks võib öelda, et sagedane katsetamine on teie kui veebidisainerite ja arendajate jaoks kriitilise tähtsusega. Liiga lihtne on langeda lõksu, kus kasutatakse iga projekti puhul samu vanu meetodeid, mis võib kergesti põhjustada andekate paigalseisu. Veebidisaineri karjääris pole midagi ohtlikumat kui mahajäämine ja vananemine!

Ülaltoodud katsetamise näpunäited on suunatud peamiselt koodijatele, kuid neid saab hõlpsasti rakendada ka pikslilõikuritele. Teie mänguväljak oleks siin lihtsalt Photoshop, Illustrator ja / või ilutulestik, kuid üldised vabavormide eksperimenteerimise soovitused, inspiratsiooni otsimine teiste töödest ja teie tüüpiliste harjumuste murdmine kehtivad endiselt.

Jäta kommentaar allpool ja anna meile teada, kui palju aega pühendad lihtsalt mängimisele ja uute asjade proovimisele. Kui palju väärtust sellest ajast saate ja milliseid tööriistu kasutate?