Veebiarendus ja disain 101

veebiarendus_101Kas soovite teada veebiarenduse ja disaini põhitõdesid? Vinge…


Kuid sellel mõttelõigul on probleem või mitmed neist tegelikult …

  • Mis on veebisaidi pidamise eesmärk?? Kas tõesti vajavad kõik ühte?
  • Kui jah, siis kuidas luua kvaliteetset veebisaiti?? Teisisõnu, kuidas õppida põhilisi veebiarendusi ja -kujundust, mis võimaldaks teil selle kvaliteetse veebisaidi ise üles ehitada?
  • Veelgi olulisem on see, kas saate oma FIRST proovimisel luua kvaliteetse veebisaidi? Või on teil vaja seljataga aastatepikkust kogemust, enne kui saate loota mis tahes tulemusele, mis on üle kõige kohutav?

Vastame sellele kõigele selles algajate juhend veebiarenduse ja -kujunduse jaoks.

[Spoileri hoiatus. Jah, saate oma esimesel proovimisel luua kvaliteetse veebisaidi.]

Mida see juhend hõlmab??

Okei, kõigepealt on meil hea meel, et jätkasite lugemist ja otsustasite proovida veebiarendust! Mängimine toimub järgmiselt:

Peatükid on esitatud väga lihtsal viisil, põhisisu vasakul ja toimingud paremal. Meeldib nii:

Juhendi sissejuhatus: 1. peatükk

Nüüd, kuidas edasi minna:

  • 1. lugemise ajal: Soovitame teil kogu asja ülevalt alla lugeda. See annab teile teemast hea 10 000 jalga ülevaate ja aitab teil mõista selle kõige olulisemaid osi. See pakub teile ka põhilisi tööriistu ja meetodeid üksikute ülesannete käsitlemiseks.
  • 2. lugemise ajal ja edasi: Kasutage TOC-d ja liikuge üle selle osa, mis teid kõige rohkem huvitab. Kasutage julgelt ka iga peatüki kõrval olevaid jagamisnuppe ja saatke lingid endale või oma sõpradele / jälgijatele, kes võivad teid huvitada.

Kas olete valmis? Vaatame 1. peatükki.

Kelle jaoks see juhend on??

Kui soovite õppida põhilisi veebiarendusi ja -kujundust, on see juhend teile. Mis iganes su motivatsioon olla võiks.

Samuti ei vaja te alustamiseks eelnevaid tehnilisi teadmisi (peale põhiliste veebioskuste). Selle juhendi mõte on olla omamoodi “101” kursus kõigile, kes on huvitatud veebisaitide loomisest ja veebiarenduse õppimisest.

Siin on mõned levinumad põhjused, miks võite teid huvitada:

  • 1. VAJAD oma ettevõtte veebisaiti (ja soovite teada, kas saate seda ise ehitada).
  • 2. Soovite veebiarendust Õppida kirest või ajutisest huvist (selles pole midagi halba).
  • 3. VAJUTATE kooli veebisaiti.
  • 4. Aitate sõbral või pereliikmel oma veebisaiti veebis üles leida.

Peamine idee, mis meid juhendab

See on tähtis! Ja ärge ärge pahatagege meie pärast, kui olete seda kogenud veebiarendaja, kuid peamine mõte, mis meid kogu veebiarenduse ja kujunduse 101 ressursi juures juhendab, on järgmine:

“Kõige vähem vastupanuvõimalus”

Siin on kolm väikseima vastupanuvõimega lähenemisviisi:

  • Me oleme mitte molekulaarsel tasemel asju lagundada. St. me ei kavatse põhjalikult uurida, kuidas programmeerimiskeeled toimivad või kuidas veebiserver töötab.
  • Me oleme mitte leiutada ratast. St. kui keegi on antud probleemi juba lahendanud ja lahenduse kättesaadavaks teinud, hakkame seda kasutama.
  • Me oleme lihtsa lahenduse muutmine vingeks, pigem keeruline ja pealtnäha funktsionaalsem lahendus lollakas ja pole arusaadav.

1. PEATÜKK: Plaan

Teie idee, veebisaidi tüüp, domeeninimi ja hostimine.

Enne veebisaidi seadistamist on teil vaja plaani

Irooniline, nagu see ka ei kõla – 80-ndate hittide saade “A-meeskond” on meid õpetanud, hea plaan on edu võti.

Kui teil on mõnda aega teie sees olnud veebisait, siis olete kindlasti elevil ainsa idee pärast, et lõpuks see teistele välja lugeda ja sirvida..

Soovite, et teie veebisait oleks fantastiline. Tõenäoliselt teate, mis see mingil määral välja näeb. Või on teil isegi täiuslik logo valmis.

Aga…

See pole üldse koht, kus peaksite alustama. Kui alustate eelnevalt paika pandud ootustega, tekitab see teid teel ainult palju segadust ja lõpus lõpptulemus..

Mõelge selle asemel järgmisele:

  1. Eraldage end kõigist tehnilistest eesmärkidest, mis teil võivad olla. Nagu näiteks eesmärk veebisaiditehnoloogiate või teatud veebisaiditarkvara õppimiseks.
  2. Esitage endale üks põhiküsimus: “Milleks ma seda saiti vajan?”

See ei käi teie kohta, see puudutab saidi eesmärki.

Küsimused, mida peate enne oma veebisaidi seadistamist endalt küsima

  1. Mida selle saidi eesmärk on saavutada?
  2. Mis on peamine saidi kaudu tutvustatav asi? (nt teie ettevõte, toode, ajaveebi postitused jne)
  3. Kas veebisaidil on mõni spetsiaalne eesmärk? (nt e-poe pood, fotograafi portfell jne)
  4. Kes on sihtrühm?
  5. Miks neid huvitab saidi teema??
  6. Millist valu see sait üksikute publiku liikmete jaoks lahendab?

Nende kolme viimase küsimuse kohta räägime minut aega vaatajaskonnast …

Veebisaidi loomiseks on 2 peamist reeglit. Siin on reegel nr 1:

 Lugeja / külastaja on esimene. Nad on peamine isik, kellele teie veebisait peab meeldima.

Teatud mõttes pole teie veebisait teie oma. See on nende oma.

(Reeglit nr 2 arutame mõne minutiga.)

Selle lihtsa juhise unustamine võib viia teid täiesti valesti, isegi kuni punktini, kus leiate end veebisaidist, mis ajab segadusse kõik, kes teid ümbritsevad.

Uhh! Inimesed lihtsalt ei saa aru, mis sellel saidil on. Kuidas nad saavad olla nii võhiklikud?! ” – mõtled lõpuks. Kuid nagu selgub, oli võhiklik sina ise.

Ainus viis selle vältimiseks on oma veebisaidi loomine lugejat silmas pidades kohe alustades.

Niisiis… võtke see paber ja vastake kõigile ülaltoodud küsimustele.

Kui olete lõpetanud, on teil olemas lõplik juhendikomplekt, mida kavatsete oma veebisaidil töötades järgida.

Need vastused on kaasa minnes erakordselt võimas tööriist. Teil on võimalik nende juurde tagasi pöörduda, kui olete silmitsi otsusega, mis käsitleb teie veebisaiti.

Kas peaksite tegema seda * või * seda *? Minge vastuste lehele ja saate teada. Kas peaksite kasutama laia või kitsast külgriba? Minge vastuste juurde ja uurige, milline on tõenäolisem, kui sihilugeja resoneerib. Ja jne.

Domeeninimed ja veebimajutus

Kui soovite olla veebisaidi omanik, vajate domeeninime ja veebi.

Noh, okei, tehniliselt öeldes saate testi veebisaidi ehitada kõik oma arvutisse ja seejärel käivitada selle kohalikust veebiserverist (installitud ka teie arvutisse tarkvarana), kuid see poleks 99% -le kasutatav lahendus juhtudel, nii et jätame selle lihtsalt vahele.

Nii et host ja domeen …

Halb uudis on see, et mõlemad maksavad raha.

Hea uudis … see pole mitte niivõrd raha, kui asjade suures plaanis. Lisaks saate õppimise ajal käivitada isegi mitu väikest veebisaiti ühel domeeninimel ja ühe veebimajutaja all.

Alustame aga alguses.

Veebimajutajad:

  • Lihtsamalt öeldes on veebimajutaja koht, kus teie veebisait istub ja kust teie külastajad seda leiavad. Teatud mõttes on veebisaitide veebimajutajad täpselt nagu korterid inimestele. Kapoti all on veebihostid ettevõtted, kes rendivad raha eest oma serverid välja (… teie veebisaitide väikesed korterid).
  • Alustamiseks tehakse tavaline jagatud hostimise plaan. Neid saate hankida ükskõik mille eest, alates 3 dollarist kuus. Siin on kena võrdlus populaarsetest veebihostidest. Vaadake seda ja otsustage, milline neist ettevõtetest tundub teile kõige sobivam. Meie soovitused kehtivad siiski saidi SiteGround, A2 Hosting ja Dreamhost kohta.

Domeenid:

  • Kui veebimajutaja on korter, on domeen selle korteri aadress. Näiteks on selle veebisaidi domeen hostfacts.com.
  • Alustuseks on valida soovitud domeeninimi ja osta see siis registripidajalt. Siit leiate põhjaliku juhendi domeeninime ostmise kohta ja siin on domeeninimede generaatorite loend.

 

Soovitused ja näpunäited domeeninime valimiseks

Olgu, nii et mõne domeeniregistri juurde minek ja tegelikult domeeni ostmine on üks asi, aga kuidas valida õige domeeninimi?

Seal on paar kooli:

  • Bränditud domeeninimed. Need on domeenid, mis koosnevad olematuist sõnadest. Mõelge näiteks Google.com või Yahoo.com. Enne kui need ettevõtted kaasa tulid, ei tähendanud need sõnad midagi. Bränditud domeeninime varjukülg on see, et see on… hästi kaubamärgitav, meeldejääv ja teie saiti on lihtne teistest eristada.
  • Märksõnapõhised nimed. Need koosnevad olemasolevatest sõnadest jada, mis kirjeldab saidi eesmärki. Mõelge, näiteks Pizza.com või StartBloggingOnline.com. Sellise domeeninime korral saavad külastajad täpselt ennustada, millist veebisaiti nad just külastavad. Negatiivne külg on see, et need domeenid on üldiselt vähem kaubamärgitavad.
  • Liidetud nimed. Need on kaubamärgiga domeenid ja märksõnapõhised domeenid kokku pandud. Mõelge, Facebook.com või Copyblogger.com. Sellised nimed viitavad külastajale veebisaidi teatud osale, kuid nad on endiselt väga kaubamärgilised.

Mõned üldised juhised sõltumata valitud domeenitüübist:

  • Tehke domeeni meeldejätmine hõlpsaks.
  • Tehke see lühikeseks ja lihtsaks. Mida pikem domeen on, seda segasemaks see läheb.
  • Hankige .com (kui võimalik). .Com on peamine saadaolev tippdomeen. Ärge leppige millegi muuga.
  • Püüdke vältida sidekriipsu. Hankige oma nimi ühe blobina nagu „cakerecipes.com”, mitte „cake-recipes.com”

Pärast seda peatükki peaksid asjad valmis olema:

  • Domeeninimi.
  • Veebimajutaja.
  • Teie vastuste leht – saidi eesmärgid ja kuidas see publikut teenib.

Kas vajate rohkem abi? Siin on teile järgmine lugemine:

  • Miks just virtuaalserverit? Peamised võõrustajate tüübid võrreldud
  • 10 asja, mis teevad veebi hostist hea
  • 12 reeglit õige domeeninime valimiseks
  • Põhjalik veebisaidi kavandamise juhend

2. PEATÜKK: Kujundamine ja juhtmete raamimine

Võtke paber ja pastapliiats ja kriimustage koos oma veebisaidi struktuuriga

Olgu, siseneme projekteerimisetappi.

Esiteks, siin on tööeetika, mida siin järgima hakkame:

  • Me kasutame pliiatsi ja paberit nii kaua kui võimalik, ja alles siis vahetame arvuti. Uskuge meid, iga minut, mis kulub paberil kujunduse kallal töötamiseks, on tund salvestatud, kui hakkate arvutis asju häälestama.
  • Teeme korduvat tööd … Me kontrollime tulemusi »parandame» tulemusi kontrollime »korrake, kuni need on tehtud.

1. peatükis mainisime midagi, mida kutsusime veebisaidi loomise reegliks nr 1. Nüüd on aeg reeglile nr 2:

Veebisaidi loomise reegel nr 2:

Mõelge kõigepealt sisule.

Veebisaidil on oluline sisu. Mitte kujundus. Sisu.

Inimesed tulevad sisu pärast. Nad ei tule disaini jaoks. Kujundus on ainult vahend sisu edastamiseks.

Ärge kunagi alustage sellest, kuidas teie veebisait välja näeb. Alustage sisust. Sisu. Sisu. Sisu.

Mida me mõtleme “sisu” all? Ühesõnaga, see on asi, mida inimesed soovivad teie veebisaidilt saada. Blogipostitused, poes olevad tooted, foorumi lõimed, kui loote foorumit, uudisteartikleid, oma ettevõtte pakkumist jms.

“Kas tõesti? Välimus pole tegelikult oluline? ” – Te küsite.

Selle asemel, et seda maha lüüa, vaadake seda lehte:

Lihtne veebisait

See lihtne veebileht on vaieldamatult parim selgitus selle kohta, mis on disain ja mis eesmärki see võrgus teenib.

Nii et pidage meeles, esiteks sisu!

Veebisaidi sisu ja ülesehitus

Olgu, nii et kuna sisu on kõige olulisem, peate selle (suurema osa) eelnevalt valmis saama. Või vähemalt peab teil olema hea ettekujutus sellest, kui palju sisu seal saab olema ja mis kujul.

Märge. Me teame, et see osa võib olla raske. Sisuga alustamine tundub veebisaitide kujundamisel üsna ebaloomulik, kuid see on tõesti parim viis lõpuks suurepärase tulemuse saamiseks. Mõelge siis sisule, mida soovite lugejaga jagada, ja kuidas soovite seda esitada.

Järgmine samm on vajalike üksikute lehtede tüüpide (nt avaleht, tooteleht, kategooria leht, umbes leht, kontaktleht, müügi peamine leht, mõni uudiskirja tellimuste sihtleht) eraldamine, põhiblogi kirje, üksikud postitused, võib-olla pood ja mis iganes muu vajalik tundub).

Mõelge, mis on kõige tõhusam viis veebisaidi sisu korraldamiseks?

Tehke seda kõike paberil. Tõenäoliselt on see teie jaoks lihtsam ja kiirem kui mõne diagrammi joonistamise tarkvara õppimine kohapeal.

Näide:

sisustruktuur

Kraapige raami kokku

Raamraam veebidisainis on lihtsalt lehe skeem või kavand – visuaalne juhend, mis kujutab veebisaidi raamistikku (Wikipedia ütleb meile).

Raamiraamid on fantastilised! Me kasutame neid enamikus toimingutes, mis on mõeldud võrgus kuvamiseks. Näiteks siin on selle juhendi juhtraam:

Kraapige kokku raamiraam

Nagu näete, on see jällegi paberil. Kuigi seda tüüpi töö jaoks on mitu rakendust, ei soovita me neid tegelikult kasutada. Need võivad olla suurepärased profidisaineritele, kuid algajad või vahepealsed inimesed kaotavad nende õppimiseks aega vaid kokkuvõttes ega saavuta palju paremat sellega, mida nad pastaka ja paberi abil saavutaksid..

Niisiis, kuidas raamida?

Noh, kui olete algaja, on kaks lähenemisviisi:

  • Minge vooluga kaasa, kui tunnete end tugevana, ja tõmmake lihtsalt eemale (mitte alati ideaalne lahendus).
  • Hankige kiireid teadmisi, kuidas korralikult raamida (tavaliselt parem).

Viimase jaoks minge siia – suurepärane juhend.

(Veenduge, et moodustaksite kaadriraami igat tüüpi olulisele lehele, mille olete eelmises sammus loetlenud.)

Pärast seda peatükki peaksid asjad valmis olema:

  • Suurem osa saidi sisust või vähemalt suurem osa selle ennustamisest (näiteks kui tuginete kasutaja loodud sisule, on seda raske eelnevalt hankida).
  • Teie veebisaidi sisustruktuur on koostatud graafikuna.
  • Raamiraam konkreetsete lehtede tüüpide kohta, mida vajate.

Lisalugemist:

  • 9 sammu veebisaidi sisu kavandamiseks
  • Kas olete veebikujunduse jaoks uus? Alusta siit.

3. PEATÜKK: UX ja UI

Ärge kunagi alahinnake kasutajakogemuse ja kasutajaliidese tähtsust

Nagu ka, kasutajakogemus ja kasutajaliides.

WebDesignerDepot annab meile nende kahe vahel üsna poeetilise määratluse:

KÜ on sadul, segajad ja valitsemisajad.

UX on tunne, et saate hobusega sõita ja oma karja köita.

Praktilisema määratluse jaoks:

  • Kasutajaliides on see, mida kasutaja teie saiti vaadates näeb.
  • UX on see, kuidas nad sellesse suhtuvad.

Paar ja see, kui hästi see on teostatud, määratleb põhimõtteliselt teie veebisaidi kasulikkuse lõppkasutajale / külastajale.

Nii UX kui ka UI disain on iseenesest suured teemad ja lõpptulemuses on palju väiksemaid elemente.

Ühesõnaga, kui te alles alustate oma teekonda, on palju õppida.

Nii et selle asemel, et proovida siin kogu UX-i ja UI-de kujundamise kursust kramplikult alla tõmmata, osutagem vaid peotäis olulisi elemente ja siis saadame teid kuskile mujale edasiseks lugemiseks.

Kasutaja eesmärgid

UX on seotud kasutaja eesmärkidega … mitte nii palju teie eesmärkidest … Kasutaja eesmärkidest.

Okei, mida see tähendab? Kõigepealt minge tagasi oma veebisaidi eesmärgi juurde – asi, mille kallal töötasite eelmistes peatükkides. Põhjus, miks te veebisaiti loote ja kuidas see kasutajale / külastajale abiks on.

Kuidas see kajastub külastaja eesmärgis? … Mis on üks asi, mida külastaja soovib teie saidile tulles saada või saavutada? See on nende eesmärk.

Kui lihtsad on need eesmärgid saavutada?

Järgnevalt keskenduge järgmisele küsimusele:

  • Kas külastaja saab oma eesmärgi hõlpsalt saavutada? – Kas nad saavad lihtsal viisil täpse teabe kätte, mille eest nad tulid??

Sellele vastamiseks peate naasma oma juhtraami, sisu struktuuri ja kontrollima asju uuesti.

Veenduge, et sisustruktuur ja teie poolt mõelnud lehed oleksid kasutaja seisukohast mõistlikud. Veenduge, et neil oleks võimalik olulistel lehtedel vabalt ja segamatult liikuda.

Põhimõtteliselt tagame siin, et veebisait annaks teie külastajatele väärtust.

Raske seda kõike ise välja mõelda, kas pole??

On tungivalt soovitatav tutvuda selle peatüki jaotises „Edasine lugemine” loetletud ressurssidega, kuid võite proovida ka nn häkkida..

Nimelt mõelge, mis teid pettumust valmistab, kui külastate veebisaite, mis sarnanevad sellele, mida soovite ehitada? Võib-olla on mõni teave, mida on tõesti keeruline juurde pääseda, või mõni liideselement, mis muudab saidi segaseks.

Tehke märkmeid, tehke järeldusi ja ärge tehke oma veebisaidiga samu vigu.

Emotsiooni kasutamine tööriistana

Kui töötate oma saidi kasutajaliidese ja kasutajaliidesega, peate põhimõtteliselt oma külastaja teatud emotsiooni esile kutsumist.

Tahad, et nad tunneksid kindlat viisi, mis veenab neid siis teatud viisil käituma. Seega on teie veebisaidist tõeliselt abi.

Töö emotsionaalse osa nimel töötamiseks on üks parimaid tööriistu värv.

Värvidel on erinevates kultuurides erinev tähendus. Nende erinevuste mõistmine võib teie töö palju lihtsamaks teha. Siin on kena petuleht.

Kui olete jõudnud mänguväljakule, milliseid värve soovite (võimalusel) kasutada, on siin mõned üldised juhised värviga töötamisel:

  • Valige üks põhivärviskeem, mis koosneb paarist värvist, mis sobivad hästi kokku. Siin on suurepärane värviskeemide generaator.
  • Valige üks värv, mis muutub teie aktsentvärviks – värv, mida kasutatakse toimingunuppude, ostunuppude jms jaoks. Põhimõtteliselt kõik, mis vajab kasutaja tähelepanu.

Tüpograafia

Paljudel juhtudel võidavad (või kaotavad) veebisaidi loomise mängu tüpograafia.

Nii lihtne on unustada tüpograafia ja kasutada kõige jaoks Arialit.

Ei soovita.

Tänapäeval on kohandatud fondidega töötamine ülilihtne ja te ei pea nende kohandatud fondide lubamiseks oma saidil isegi midagi tehnilist tegema..

Suur, suurejooneline tüpograafia on tänapäeval moes väga palju ja see teeb disaineritööd – eriti algaja disaineritööd – palju lihtsamaks.

Vaadake näiteks seda saiti:

bonobos

Kas olete midagi märganud? Jep, fonte on tohutult ja need näevad suurepärased välja!

Selle kallal töötamiseks toimige järgmiselt.

  • Üldiselt vajab iga veebisaidi kujundus kahte tüüpi teksti: rubriigid ja lõigud. Enamikul juhtudel tehakse iga fondi kohta ainult üks font.
  • Minge saidile Google Fonts – Google’i enda tasuta fontide kogu, mida saate oma veebisaidil kasutada – ja otsige pealkirjafonti, mis teile tõesti meeldib.
  • Seejärel võtke selle fondi nimi ja otsige seda üles fontide paarist – see on raamatukogu eelnevalt tehtud fontide sidumisest, mis sobivad hästi kokku.
  • Valige paar, mis tundub fantastiliselt hea.
  • Pange mõlema fondi nimed kirja, vajate neid hiljem.

Sel moel kiirendate teie protsessi ja saate siiski suurepärase tulemuse.

Näiteks leidsime Google Fontsist fondi nimega Bree Serif, mis meile väga meeldib:

Bree-Serif

Seejärel viisime selle fondi paari ja sait soovitas, et Bree Serifil läheks Open Sansiga hästi. Täiuslik:

Bree-Serif-avatud sans

Lõplik ülesehitus

Lõpuks viimane samm!

Selle peatüki mõte on maanduda lõplikul paigutusel / struktuuril, mida kavatsete oma saidil kasutada. Sel hetkel peaksite oma kujunduse ja kasutajaliidese osas olema peaaegu kindel.

Pärast seda peatükki peaksid asjad valmis olema:

  • Teie kasutaja eesmärgid on selgelt loetletud.
  • Teie juhtraami kontrolliti üle, et veenduda, kas need eesmärgid pole segadusse ajavad.
  • Valitud värviskeem.
  • Tüpograafia sai aru.
  • Teie kogu saidi paigutus / veebisaidi struktuur / veebisaidi korraldus.

Lisalugemist: 

  • Ajakiri UX
  • UX Booth
  • Veebidisaini värvi psühholoogia ja emotsioonid
  • Mis on kasutajakogemuse kujundamine? Ülevaade, tööriistad ja ressursid
  • Veebisaidi arukate ärieesmärkide seadmine
  • 8 reeglit efektiivse tüpograafia loomiseks

4. PEATÜKK: WordPress, HTML või mallid?

Otsustage, millist marsruuti minna – sisuhaldussüsteemid või kodeerige see nullist

Siit algab tõeline, käte räpane ja kapoti all töö!

See on ka tõenäoliselt protsessi kõige hirmutavam osa (tunnistage seda!).

Korraks on õige aeg panna pliiats ja paber kõrvale ning hakata mõne tarkvaraga töötama.

Ja otse väravast, on palju küsimusi …

  • Kas peaksin HTML-i õppima??
  • Aga CSS?
  • Kas valmis HTML-i veebisaidi mallid teevad minu jaoks triki?
  • Kas ma pean õppima programmeerimiskeelt nagu PHP?
  • Olen kuulnud, et WordPress on tänapäeval saidi loomise viis.
  • Ma nägin seda Squarespace Super Bowli reklaami. Mis sellest saab?
  • Mis on see asi, mida nimetatakse Joomla? Või Drupal?
  • ja edasi ja edasi ja edasi.

Vastus kõigile neile on jah.

Nagu jah, saate teha ühe või mitu neist asjadest ja ainult teie otsustada, millist teed valida.

Me proovime öelda, et siin pole parimat lähenemisviisi. Kõik sõltub sellest, kui palju soovite veebiarendusega tegeleda, kui suurt osa veebisaidi loomise põhitõdedest soovite õppida, kui kiiresti peate kvaliteetse saidi valmis tegema ja kui kohandatavaks soovite, et see hiljem oleks.

Niisiis jätkame sellest peatükist edasi. Esiteks, vali persona, kes sind kõige paremini määratleb:

  • a) Ma tahan teada saada, mida veebiarendus endast kujutab, kõiki veebisaidi põhitõdesid, sisemist tööd ja kõiki mehhanisme, mis panevad veebisaidi tööle.
  • b) Tahan õppida, kuidas kasutada usaldusväärset veebisaidi ehitajat, kes saab hakkama suurema osa minu jaoks raskete raskustega.
  • c) Ma ei tea, mida teha. Tahan lihtsalt veebisaiti, mille saaksin ise üles ehitada ja mis toimiks korralikult.

Vastati a)? Minge 5. peatükki.

Vastati b)? Minge 6. peatükki.

Vastatud c)? Vaadake julgelt seda artiklit ja tulge siis tagasi (see peaks aitama teil valida ideaalse tee):

  • Üle vaadatud on 8 parimat ajaveebi- ja veebisaitide loomise platvormi … Iga platvormi kirjeldatakse koos plusside ja miinustega ning ressurss soovitab ka teie vajadustele vastava parima võimaliku valiku (Wix või SB)..

Kas olete seda lugenud? Tore! Milline ülaltoodud isikutest kirjeldab teid kõige paremini – a) või b)?

Tööriistad, mis võivad sellel teel käepärast olla:

  • Graafika: Paint.NET, Gimp, Pixlr.
  • Koodi kirjutamine: Notepad ++, TextWrangler, SublimeText.
  • Töö juhtimine: Trello.
  • Kujundus: värvilahendused, Google Fonts, tööriistad siit.
  • Fotograafia: Unsplash, AllTheFreeStock

5. PEATÜKK: Sissejuhatus HTML-i, CSS-i & Javascript

Kuidas veebisaidid on sisseehitatud reaalsus

Selles peatükis toome välja veebiarenduse tühjad põhitõed, selgitame kõige olulisemaid termineid ja saadame teid siis üle mõnele konkreetsele ressursile, kus saate oma teadmisi ja oskusi edasi arendada..

HTML

HTML on veebisaitide keel. Iga veebileht on mingil hetkel üles ehitatud või teisendatud HTML-iks.

Näiteks selle siin loetava juhendi HTML-i struktuuri nägemiseks vajutage lihtsalt klaviatuuril „Ctrl + U“.

HTML määratleb iga bloki, mida näete veebilehel. Päeva lõpus tuleb veebisaidil ükskõik millise kuvamiseks see HTML-i teisendada.

HTML-i tõhusaks õppimiseks soovitame teil registreeruda ühele veebis saadaolevale (tasuta või tasulisele) kursusele. Mõned parimad neist leiate Codeacademy või Treehouse’ist.

Näiteks siin on konkreetne jaotis Codeacademy kohta, mis käsitleb kõike HTML-i ja CSS-i.

CodeCademy koduleht

Nii et see on kõikehõlmav lähenemine HTML-ile.

CSS

CSS – igavate tehniliste üksikasjade vahelejätmiseks – vastutab kõige selle eest, mis on veebilehel nähtav.

CSS võtab HTML-sildid ning struktureerib ja lisab neile stiilid. Selliseid asju nagu: paks tekst, värvikohandused, varjud, paigutused ja isegi animatsioonid tehakse nüüd peamiselt CSS-iga.

Selle paremaks mõistmiseks liikuge Codeacademy’s sellele kiirele kursusele.

Põhjalikumaks õppimiseks vaadake ka CSS-i jaotisi kas Codeacademy või Treehouse’is.

JavaScript, jQuery, Bootstrap jne.

JavaScript on programmeerimiskeel, mis võimaldab teil oma veebisaidil tutvustada mõnda dünaamilist toimingut. Näiteks saate teha selliseid vorme nagu veebivormide valideerimine või kasutajaga sujuvamaks suhelda, ilma et peaksite uuesti laadima lehte, kus nad on. Siin on w3koolide kena õpetus.

Seda silmas pidades on jQuery JavaScripti teek, mis võimaldab teil luua keerukamaid asju vähem kodeerimisega. Veebiarendajale väga mugav. Lisateavet leiate siit.

Ja lõpuks, Bootstrap on väga huvitav leiutis. Algselt Twitteris kasutusele võetud, on see põhimõtteliselt kasutajaliidese keskkond, mis kiirendab veebisaidi loomise protsessi, edastades enamiku juba valmis ehitatud tavalistest saidielementidest. See kõlab keeruline, kas pole?

Kuid see pole nii. Vaadake lihtsalt seda Codeacademy stardikursust (muide, nii õppisime algselt Bootstrap’i).

Pärast seda peatükki peaksid asjad valmis olema:

  • Põhimõtteliselt on teie HTML / CSS-i veebisaidi esimene mustand täielikult ehitatud. Sealt saate hakata itereerima ja lõpptulemust parandama.

6. PEATÜKK: Veebisaidi loomise platvormid

Kas seadistate oma esimese saidi? Proovige tasuta veebisaidiplatvorme, nagu WordPress, Joomla või Drupal

6. peatükk: Veebisaidi loomise platvormid

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Seal on rohkem veebisaitide ehitajaid, kui võite kleepida. (Kui olete selline inimene, kes raputab asjadele pulmi.)

Olgu, naljad kõrvale.

On selge, et kui teil pole soovi õppida asju käsitsi kodeerima, on tegemist kindlasti mitme lahendusega, mis aitavad teid.

Märge. Pidage meeles, et kõik muu, mida peatükkides 1-4 arutasime, kehtib siiani. Isegi kui kasutate saidi loomise lahendust, mis on omamoodi käepärast, peate siiski olema ettevaatlik, et lõpptoode oleks kasutajatele sõbralik ja kõigi eesmärkidega kooskõlas. Need saidi loomise tööriistad on täpselt sellised ….

Alustades neist, mida on kõige lihtsam haarata:

SquareSpace

Ainus veebiplatvorm, mis reklaamib Super Bowli ajal.

Ühesõnaga, väga mugav lahendus, mida saab kasutada igaüks. Eelnevad oskused pole vajalikud.

See võimaldab teil luua klassikalisi veebisaite, ajaveebisid ja isegi e-poe poode, kirjutasime nende kohta isegi arvustuse. Liidesest ja kogu selle kasutamise protsessist on üsna lihtne aru saada, lisaks pakuvad Squarespace’i poisid palju huvitavaid õpetusi. Vaadake neid siit.

WordPress

Ausalt, me armastame WordPressi.

Enamasti on see ideaalne platvorm veebisaidi loomiseks. Sellel on täiuslik tasakaal keerukuse ja kasutusmugavuse vahel ning see on põhimõtteliselt lõputult kohandatav.

WordPressi animatsioon

See on ka nende kõigi kõige populaarsem veebiplatvorm. Nagu WordPressi looja Matt Mullenweg jagas, on WordPressil nüüd 25% kogu internetist. Kas kõik need inimesed võivad eksida??

Hea küll, nii et WordPressiga alustamiseks vajate põhimõtteliselt ainult oma domeeni ja hostimist. WordPressi tarkvara on iseenesest täiesti tasuta.

Alustamiseks liikuge julgelt ühele neist radadest:

a) „Kiire algus”

  • Siit saate õppida WordPressi installimise ja saidi pärastlõunal käivitamise lihtsustatud viisi.
  • Valige ametlikust kataloogist tasuta teema – veenduge, et see oleks kooskõlas teie saidi eesmärkidega ja et paigutus / kujundus pole soovitud struktuurist kaugel (kavatsete seda pisut kohandada).
    • Kontrollige neid kahte ressurssi, et õppida olemasoleva teema kohandamist.
    • Teise võimalusena võite valida mitmeotstarbelise premium-teema, mida saab reguleerida käepärase kasutajaliidese kaudu (kodeerimine pole seotud). X-teema on hea näide sellisest asjast.
  • Installige lisafunktsioonide saamiseks mõned populaarsemad ja parimad pistikprogrammid.

b) „Põhjalik tee“

  • Alustage WordPressi õppimisest veebikursuse kaudu. Treehouse pakub suurepärast.
  • Valige oma teema ja pistikprogrammid nagu ülal. Teise võimalusena saate oma teema üles ehitada juba algusest peale.

Lõpuks on WordPress tõenäoliselt kõige mitmekülgsem veebisaidi platvorm turul. Selle abil saate luua praktiliselt igat tüüpi veebisaite, mitte ainult ajaveebide või lihtsate ettevõtete saite. Siin on nimekiri 47 (!) Erinevast viisist WordPressi kasutamiseks, lihtsalt selleks, et mõtlema panna.

Joomla ja Drupal

Ehkki Joomla ja Drupal on üksteisest pisut erinevad, on nad mõlemad suurepärased sisuhaldussüsteemid arenenumate veebiprojektide jaoks.

Nad ei ole nii tugevad disainilahenduste poolest, kuid on väga kohandatavad ja võimelised töötama mis tahes veebisaidiga, mis teil plaanis võib olla.

Aeg-ajalt, sõltuvalt teie projekti keerukusest, võivad nad nõuda kapteniks palju rohkem aega ja palju rohkem pingutusi.

Põhjalikumaks koolitamiseks on Lynda.com veebis vinge kursused, nii Joomla kui ka Drupali jaoks.

Pärast seda peatükki peaksid asjad valmis olema:

  • Teie veebisaidi esimene mustand on täielikult üles ehitatud, olenemata sellest, kas otsustasite kasutada WordPressit või mõnda muud platvormi.
  • Veenduge, et see oleks kooskõlas teie esialgsete eesmärkide, sihtrühmaga ja kas see pakub head UX-i.

7. PEATÜKK: Mobiilne tundlik disain

Enam kui 60% inimestest kasutab veebi sirvimiseks mobiiltelefone ja tahvelarvuteid

Mobiilne reageerimine on nüüd veebisaidi loomisel väga oluline aspekt, arvatavasti rohkem kui kunagi varem.

Kogu teema teema on järgmine:

Põhimõtteliselt on praegu rohkem inimesi, kes kasutavad veebi saamiseks mobiilseadmeid, kui kunagi varem. Tegelikult arvatakse, et praegu on mobiilse Interneti-kasutajaid rohkem kui lauaarvuti Interneti-kasutajaid (75,1% vs 52,7%).

Kuid seal on probleem.

Mitte iga veebisaidi kujundust ei optimeerita nii, et seda saaks vaadata mobiilseadmetes otse väravast.

Mõned levinumad probleemid on järgmised:

  • fondid on liiga väikesed,
  • paigutus ise ei kohandu üldse väiksema ekraaniga,
  • või saidi ehitamiseks kasutatavat tehnoloogiat, mis pole mobiilseadmetes saadaval.

Siin tuleb mängu mobiilse reageerimise idee.

Vastuvõtlik veebisait vastab keskkonnale, mida sellel vaadatakse. Kui see on lauaarvuti, renderdab veebisait teatud viisil. Kui see on mobiil, siis renderdab see muul viisil.

Siin on parem seletus: milline kurat on tundlik veebikujundus?

Seega oleks praegu vaja kontrollida ja veenduda, et teie veebisait töötab mobiilseadmetes. Selle kontrollimiseks kasutage oma seadmeid, kuid proovige ka Google’i mobiiltesti või liikuge üle tööriistale, näiteks Responsive Design Tester.

Kui on probleeme, peate need parandama.

Mõned lahendused:

  • Vastuvõtlik veebidisain – kuidas
  • Kuidas muuta veebisait reageerivaks umbes 15 minutiga

8. PEATÜKK: Pange see kõik kokku

Teate põhitõdesid, nüüd on käes teie kord

Pidage kinni, oleme peaaegu kohal!

See on viimane peatükk meie üsna pikal teekonnal.

Sel hetkel peaksite oma esimese veebisaidi üles ehitama … olgu see siis WordPressi, käsitsi ehitatud HTML / CSS-i, mõne veebisaidi koostaja või mõne muu töö jaoks valitud tööriistaga.

Lühidalt, palju õnne! Kuid tegemist on veel paar asja, mida tasub teha:

  • Kontrollige uuesti asju, mida peatükkides 1 ja 2 arutasime. Veenduge, et eesmärgid tõepoolest töötaksid lõppkasutaja jaoks ja veebisait ei segaks.
  • Kinnitage oma koodistruktuur W3C märgistuse valideerimise teenuse abil.
  • Kontrollige, kas saidil pole turvaprobleeme. Kasutage selleks Sucuri skannerit.
  • Hankige kogukonnalt tagasisidet. Vaadake, mida teised inimesed teie tööst arvavad. Sitepointi foorumid võivad selleks head olla.

Kui see on selle ressursi esimene lugemine, siis soovitame teil tõesti paar korda selle juurde tagasi tulla ja käsitleda seda oma täiendõppe viitefailina.

Nagu me alguses ütlesime, kasutage julgelt juhendit ja liikuge peatükkide kaupa peatükkidelt ja ressurssidelt ressurssidele vastavalt oma vajadustele.

Lõpuks oleme uudishimulikud … mis on teie suurim väljakutse veebisaidi loomise, veebiarenduse või kujunduse osas? Jagage palun kommentaarides või Twitteri kaudu. Me kõik oleme kõrvad!

Täname, et lugesite, olete fantastiline!

  • Kokku116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector