Spletni razvoj in oblikovanje 101

web_development_101Želite spoznati osnove spletnega razvoja in oblikovanja? Super …


Vendar pa obstaja težava s to miseljo ali številnimi dejansko …

  • Kaj je namen spletnega mesta? Ali ga resnično potrebujejo vsi?
  • Če je odgovor pritrdilen, kako sestaviti kakovostno spletno stran? Ali z drugimi besedami, kako se naučite osnovnega spletnega razvoja in oblikovanja, s katerim bi lahko sami izdelali kakovostno spletno mesto?
  • Še pomembneje je, ali lahko v prvem poskusu zgradite kakovostno spletno mesto? Ali pa potrebujete dolgoletne izkušnje za seboj, preden se lahko nadejate kakšnega rezultata nad groznim?

Odgovorimo na vse to v tem vodnik za začetnike pri spletnem razvoju in oblikovanju.

[Opozorilo o spojlerju Da, lahko v prvem poskusu sestavite kakovostno spletno mesto.]

Kaj je zajeto v tem priročniku?

V redu, najprej stvari, veseli smo, da ste še naprej brali in da ste se odločili, da poskusite s spletnim razvojem! Tukaj je opisano, kako se bo igralo:

Poglavja so predstavljena na zelo preprost način, z glavno vsebino na levi in ​​deljivimi elementi na desni. Takole:

Uvod v vodnik: Poglavje 1

Zdaj, kako naprej:

  • Medtem ko ste ob prvem branju: Priporočamo, da celotno stvar preberete od zgoraj navzdol. To vam bo omogočilo dober pogled na temo v višini 10.000 čevljev in vam pomagalo razumeti najpomembnejše dele tega. Omogočil vam bo tudi osnovna orodja in metode za obvladovanje posameznih nalog.
  • Medtem ko ste na drugem branju in naprej: Uporabite TOC in se pomaknite na tisti del, ki vas najbolj zanima. Poleg tega lahko uporabite gumbe za skupno rabo poleg vsakega poglavja in pošljite povezave do sebe ali do prijateljev / sledilcev, ki bi jih lahko zanimali.

Pripravljeni? Pojdimo na prvo poglavje.

Za koga je ta priročnik?

Če se želite naučiti osnovnega spletnega razvoja in oblikovanja, je ta vodnik za vas. Ne glede na vašo motivacijo.

Prav tako za začetek ne potrebujete nobenega predhodnega tehničnega znanja (razen osnovnih “spletnih veščin”). Celoten smisel tega priročnika je, da je nekakšen tečaj “101” za vse, ki jih zanima gradnja spletnih strani in učenje spletnega razvoja.

Tukaj je nekaj pogostih razlogov, zakaj bi vas lahko zanimali:

  • 1. Potrebujete spletno stran za svoje podjetje (in želite videti, ali lahko sami zgradite).
  • 2. Spletni razvoj želite izučiti iz strasti ali začasnega zanimanja (nič hudega v tem).
  • 3. Potrebujete spletno mesto za šolo.
  • 4. Prijatelju ali družinskemu članu pomagate razviti spletno mesto.

Glavna ideja, ki nas bo vodila

To je pomembno! In prosim, ne bodite jezni na nas, če ste napredni spletni razvijalec, ki to bere, toda glavna ideja, ki nas bo vodila skozi celoten vir spletnega razvoja in oblikovanja 101, je:

“Najmanjši odporni pristop”

Tu so tri načela pristopa najmanj odpora:

  • Smo ne razbijati stvari na molekularni ravni. I.e. ne bomo prišli do dna, kako delujejo jeziki za programiranje ali kako deluje spletni strežnik.
  • Smo ne izumljati kolesa. I.e. če je nekdo že rešil določeno težavo in dal rešitev na voljo, jo bomo uporabili.
  • Smo narediti preprosto rešitev super, raje kot zapletena in na videz bolj funkcionalna rešitev buggy in ne razumljiva.

POGLAVJE 1: Načrt

Vaša ideja, vrsta spletnega mesta, ime domene in gostovanje.

Preden nastavite spletno mesto, potrebujete načrt

Ironično je, kot se morda sliši – naučila se nas je uspešnica 80-ih iz oddaje A-Team, dober načrt je ključ do uspeha.

Če ste že nekaj časa sedeli v vas, potem ste zagotovo navdušeni nad edino idejo, da ga končno sprostite, da ga drugi preberejo in brskajo..

Želite, da je vaše spletno mesto super. Verjetno veste, kako bo videti do neke mere. Ali pa imate celo pripravljen popoln logotip.

Ampak…

Tu sploh ne bi smeli začeti. Če začnete z vnaprej postavljenimi pričakovanji, vas bo to le pripeljalo do veliko zmede na poti in rezultata na koncu dela.

Namesto tega pomislite na naslednje:

  1. Ločite se od morebitnih tehničnih ciljev. Kot na primer cilj učenja tehnologij spletnih strani ali določene programske opreme za spletne strani.
  2. Zastavite si eno glavno vprašanje: “Za kaj potrebujem spletno mesto?”

Ne gre za vas, ampak za cilj spletnega mesta.

Vprašanja, ki si jih morate zastaviti, preden nastavite spletno mesto

  1. Kaj naj bi spletna stran dosegla?
  2. Kaj bo glavna “stvar”, predstavljena na spletnem mestu? (npr. vaše podjetje, izdelek, objave v spletnem dnevniku itd.)
  3. Bo spletno mesto imelo kakšen poseben namen? (npr. trgovina e-trgovine, portfelj fotografa itd.)
  4. Kdo je ciljna publika?
  5. Zakaj jih zanima tematika spletnega mesta?
  6. Kakšne bolečine reši spletno mesto za posamezne člane občinstva?

O zadnjih treh vprašanjih naj se za trenutek pogovarjamo občinstvo …

Obstajata 2 glavna pravila za gradnjo spletnih strani. Tu je pravilo št. 1:

 Bralec / obiskovalec je na prvem mestu. So glavna oseba, ki jo mora prositi vaše spletno mesto.

Na neki način vaše spletno mesto ni vaše. To je njihovo.

(Pravilo # 2 bomo razpravljali čez minuto.)

Če pozabite na to preprosto vodilo, vas lahko vodi popolnoma napačno, celo do točke, ko se znajdete s spletnim mestom, ki je zmedeno za vse okoli vas, razen vas.

“Uh! Ljudje preprosto ne razumejo, za kaj gre na tem spletnem mestu. Kako so lahko tako nevedni ?! ” – na koncu razmišljaš. A kot kaže, ste bili nevedni vi.

Edini način, da se temu izognete, je graditi svoje spletno mesto z bralcem v mislih že od začetka.

Torej … vzemite ta list papirja in odgovorite na vsa zgornja vprašanja.

Ko končate, boste imeli na koncu pravilne smernice, na katere boste delovali, ko boste delali na svojem spletnem mestu.

Ti odgovori bodo izjemno zmogljivo orodje. K njim se boste lahko vrnili vsakič, ko se boste srečali z odločitvijo o svojem spletnem mestu.

Ali bi morali storiti * to * ali * to *? Pojdite na seznam za odgovore in se pozanimajte. Bi morali uporabiti široko ali ozko stransko vrstico? Pojdite na odgovore in ugotovite, katera je bolj verjetno odmevati s ciljnim bralcem. In itd.

Imena domen in spletno gostovanje

Če želite biti lastnik spletnega mesta, potrebujete ime domene in spletnega gostitelja.

No, tehnično gledano, lahko preizkusno spletno mesto zgradite vse na svojem računalniku in ga nato zaženete z lokalnega spletnega strežnika (vgrajenega tudi kot programska oprema v računalniku), vendar to ne bi bila uporabna rešitev za 99% primerov, zato jo preprosto preskočimo.

Gostitelj in domena …

Slaba novica je, da oba staneta denar.

Dobra novica … v veliki shemi stvari ni toliko denarja. Poleg tega lahko med učenjem celo zaženete več majhnih spletnih mest v enem imenu domene in pod enim spletnim gostiteljem.

Toda začnimo na začetku.

Spletni gostitelji:

  • Preprosto povedano, spletni strežnik je tam, kjer sedi vaše spletno mesto in kjer ga lahko najdejo vaši obiskovalci. Na neki način so spletni gostitelji spletnih mest podobni stanovanjem za ljudi. Gostitelji spletnih strani so podjetja, ki v zameno za denar najamejo svoje strežnike (… majhna stanovanja za vaša spletna mesta).
  • Za začetek bo veljal standardni načrt skupnega gostovanja. Lahko jih dobite za karkoli, ki se začne že od 3 USD / mesec. Tu je lepa primerjava priljubljenih spletnih gostiteljev. Oglejte si in se odločite, katero od teh podjetij se vam zdi ravno prav. Vendar pa naša priporočila veljajo za SiteGround, A2 gostovanje in Dreamhost.

Domene:

  • Če je spletni gostitelj stanovanje, potem je domena naslov tega stanovanja. Na primer, domena tega spletnega mesta je hostingfacts.com.
  • Način za začetek je, da izberete želeno ime domene in ga nato kupite pri registrarju. Tu je izčrpen vodič o nakupu imena domene in tukaj je seznam generatorjev domen.

 

Predlogi in nasveti za izbiro imena domene

Ok, torej iti do kakšnega registrarja domene in dejansko kupiti domeno je ena stvar, ampak kako izbrati pravo ime domene?

Obstaja nekaj šol:

  • Imena domen z blagovno znamko. To so področja, ki jih sestavljajo neobstoječe besede. Pomislite, stvari, kot sta Google.com ali Yahoo.com. Preden so se ta podjetja pojavila, te besede niso pomenile nič. Na vrh strani ime domene z blagovno znamko je, da je … dobro, zelo tržno, nepozabno in je preprosto razlikovati vaše spletno mesto od drugih.
  • Imena na podlagi ključnih besed. Te so sestavljene iz obstoječih besed, danih v zaporedju, ki opisuje namen spletnega mesta. Pomislite, stvari, kot sta Pizza.com, ali StartBloggingOnline.com. S takim imenom domene bodo vaši obiskovalci lahko natančno predvideli vrsto spletnega mesta, ki ga bodo ravnokar obiskali. Slaba stran je, da so te domene na splošno manj prodajne.
  • Združena imena. To so domene z blagovno znamko in domene, ki temeljijo na ključnih besedah. Pomislite, Facebook.com ali Copyblogger.com. Takšna imena kažejo, da je “del” narave spletnega mesta obiskovalec, vendar so še vedno zelo prepoznavni.

Nekaj ​​splošnih smernic ne glede na izbrano vrsto domene:

  • Naj bo domena lahka zapomniti.
  • Naj bo kratek in preprost. Daljša kot je domena, bolj je zmedena.
  • Pridobite .com (če je mogoče). .Com je glavna “domena najvišje ravni”, ki je na voljo. Ne nasedaj se ničesar drugega.
  • Poskusite se izogniti vezajem. Pridobite svoje ime v obliki enobarvnih blokov, kot je “cakerecipes.com” namesto “cake-recipes.com”

Kaj morate pripraviti po tem poglavju:

  • Ime domene.
  • Spletni gostitelj.
  • Vaš odgovor z odgovori – cilji vašega spletnega mesta in kako bo služil občinstvu.

Potrebujete več pomoči? Tukaj je nadaljnje branje za vas:

  • Zakaj skupno gostovanje? Primerjava glavnih vrst gostiteljev
  • 10 stvari, zaradi katerih je spletni gostitelj dober
  • 12 pravil za izbiro pravega imena domene
  • Obširen vodič za načrtovanje spletnih strani

POGLAVJE 2: Oblikovanje in žičnati okvir

Vzemite papir in pisalo ter se opraskajte skupaj s strukturo svojega spletnega mesta

Ok, vstopimo v fazo načrtovanja.

Najprej najprej, tukaj je delovna etika, po kateri bomo šli:

  • S pisalom in papirjem uporabljamo kolikor dolgo lahko in šele nato preklopimo na računalnik. Verjemite nam, da je vsaka minuta, porabljena za vaš dizajn na papirju, prihranjena eno uro, ko začnete uravnavati stvari v računalniku.
  • Delamo iterativno delo … »preverjamo rezultate« izboljšujemo »preverjamo rezultate« ponavljamo, dokler ne končamo.

V 1. poglavju smo omenili nekaj, kar smo poimenovali pravilo št. 1 za gradnjo spletnih strani. Zdaj je čas za pravilo 2:

2. pravilo gradnje spletnega mesta:

Najprej pomislite na vsebino.

Vsebina je tisto, kar je pomembno na spletni strani. Ne zasnova. Vsebina.

Ljudje pridejo po vsebino. Ne pridejo po zasnovo. Zasnova je samo vozilo za dostavo vsebine.

Nikoli ne začnite s tem, kako izgleda vaše spletno mesto. Začnite z vsebino. Vsebina. Vsebina. Vsebina.

Kaj torej mislimo pod “vsebino”? Skratka, ljudje želijo dobiti vaše spletno mesto. Objave v spletnem dnevniku, izdelki v trgovini, teme na forumih, če oblikujete forum, članke o novicah, poslovno ponudbo itd.

“Res? Izgledi res niso pomembni? ” – Sprašujete.

Namesto da bi to premagali, poglejte to stran:

Preprosta spletna stran

Ta preprosta spletna stran je daleč najboljša razlaga, kaj je zasnova in kakšen namen služi spletu.

Torej, ne pozabite, vsebina najprej!

Vsebina in struktura spletnega mesta

V redu, torej ker je vsebina najpomembnejša, jo morate imeti (večino) predhodno pripravljeno. Ali vsaj dobro vedeti, koliko vsebine bo in v kakšni obliki.

Opomba. Vemo, da je ta del lahko težek. Začetek z vsebino se zdi precej nenavaden za oblikovanje spletnih strani, vendar je res najboljši način, da na koncu dobite vrhunski rezultat. Zato razmislite o vsebini, ki jo želite deliti z bralcem, in o tem, kako jo želite predstaviti.

Naslednji korak je, da izločite posamezne vrste strani, ki jih boste potrebovali (npr. Domačo stran, stran izdelka, stran z kategorijami, stran o stran, kontaktna stran, glavna prodajna stran, nekatera ciljna stran za naročnino na glasilo, seznam glavnih dnevnikov, posamezne objave, morda trgovina in vse, kar se mi zdi potrebno).

Pomislite, kakšen je najučinkovitejši način za organizacijo vsebine na spletnem mestu?

Vse to naredite na papirju. Za vas bo verjetno lažje in hitreje, kot če bi na kraju samem naučili kakšen del programske opreme za risanje grafikonov.

Primer:

vsebinska struktura

Pišite skupaj žični okvir

Žični okvir v spletnem oblikovanju je preprosto shema strani ali načrt – vizualni vodnik, ki predstavlja okvir spletnega mesta (Wikipedia pripoveduje).

Žični okviri so super! Uporabljamo jih za večino stvari, ki jih počnemo in so mišljene za prikaz na spletu. Na primer, tukaj je vodnik za ta vodnik:

Pišite skupaj žični okvir

Kot vidite, je to spet na papirju. Čeprav obstaja več aplikacij za tovrstno delo, jih dejansko ne svetujemo. Morda bodo odlični za profesionalne oblikovalce, toda začetnik ali vmesna oseba jih bo le izgubila na času za učenje, na koncu pa ne bodo kaj dosti izboljšali, kaj bi dosegli s pisalom in papirjem.

Torej, kako žičati okvir?

No, če ste začetnik, obstajata dva pristopa:

  • Pojdi s tokom, če se počutiš močno, in samo potegni stran (ni vedno popolna rešitev).
  • Pridobite nekaj hitrih znanj, kako pravilno naokviriti okvir (ponavadi bolje).

Za slednje pojdite sem – odličen vodič.

(Prepričajte se, da ustvarite žični okvir vsake pomembne vrste strani, ki ste jo navedli v prejšnjem koraku.)

Kaj morate pripraviti po tem poglavju:

  • Večino vsebine spletnega mesta ali vsaj večino napovedano (na primer, če se zanašate na vsebino, ki jo ustvari uporabnik, je težko imeti to vnaprej).
  • Vsebinska struktura vašega spletnega mesta je pripravljena kot graf.
  • Okvir posameznih vrst strani, ki jih boste potrebovali.

Nadaljnje branje:

  • 9 korakov za načrtovanje vsebine spletnega mesta
  • Novost v spletnem oblikovanju? Začni tukaj.

POGLAVJE 3: UX in uporabniški vmesnik

Nikoli ne podcenjujte pomena uporabniške izkušnje in uporabniškega vmesnika

Kot v uporabniški izkušnji in uporabniškem vmesniku.

WebDesignerDepot nam daje precej poetično opredelitev teh dveh:

UI je sedlo, strese in kraljujejo.

UX je občutek, da lahko jahaš konja in pleteš živino.

Za bolj praktično opredelitev:

  • Uporabniški vmesnik je tisto, kar uporabnik vidi, ko pogleda vašo spletno stran.
  • UX se tako počutijo.

Par in kako dobro je izveden v bistvu določa uporabnost vašega spletnega mesta za končnega uporabnika / obiskovalca.

UX in UI zasnova sta sama po sebi velika tema in veliko je manjših elementov, ki igrajo vlogo pri končnem rezultatu.

Skratka, veliko se moramo naučiti, če šele začnete svojo pot.

Torej, namesto da bi se tukaj trudili preseči celoten tečaj oblikovanja UX in UI, pokažemo nekaj pomembnih elementov, nato pa vas pošljimo kam drugam na nadaljnje branje.

Uporabniški cilji

UX govori o uporabniških ciljih … Ne toliko o vaših ciljih … Uporabniški cilji.

Ok, kaj to pomeni? Najprej se vrnite na namen svojega spletnega mesta – stvar, pri kateri ste delali v prejšnjih poglavjih. Razlog, zakaj gradite spletno mesto in kako pomaga uporabniku / obiskovalcu.

Kako to pomeni cilj obiskovalca? … Kaj je tisto, kar želi obiskovalec doseči ali doseči, ko pride na vašo spletno stran? To je njihov cilj.

Kako enostavno so ti cilji dosegljivi?

Nato se osredotočite na naslednje vprašanje:

  • Ali lahko obiskovalec zlahka doseže svoj cilj? – Ali lahko na preprost način pridejo do natančnih informacij?

Če želite odgovoriti na to, se morate vrniti na svoj žični okvir, svojo vsebinsko strukturo in dvakrat preveriti stvari.

Prepričajte se, da so vsebinska struktura in strani, ki ste jih domislili, z vidika uporabnika smiselni. Prepričajte se, da je mogoče prosto in nezaupljivo krmariti med pomembnimi stranmi.

V bistvu tukaj zagotavljamo, da spletno mesto daje obiskovalcem vrednost.

Težko je vse to sam ugotoviti, kajne?

Zelo priporočljivo je, da preverite vire, naštete v razdelku “nadaljnje branje” tega poglavja … lahko pa poskusite tudi s “kramp”, tako rekoč.

Namreč, pomislite, kaj vas moti, ko obiščete spletna mesta, ki so podobna tistemu, ki ga želite zgraditi? Mogoče je nekaj informacij, do katerih je res težko priti, ali kak element vmesnika, ki spletno mesto zmede.

Beležite si, sklepajte, ne delajte enakih napak s svojim spletnim mestom.

Uporaba Čustva kot orodja

Ko delate na uporabniškem vmesniku in uporabniškem UX-ju svojega spletnega mesta, je tisto, kar si v osnovi prizadevate, privabiti določeno čustvo pri svojem obiskovalcu..

Želite, da se počutijo na določen način, kar jih bo nato prepričalo, da bodo ravnali na določen način. Tako je vaše spletno mesto resnično koristno.

Za delo na čustvenem delu dela je eno najboljših orodij barva.

Barve imajo v različnih kulturah različne pomene. Če razumete te razlike, vam lahko delo olajša. Tukaj je lep list za goljufanje.

Ko se seznanite s tem, katere barve želite (po možnosti) uporabljati, je nekaj splošnih smernic pri delu z barvo:

  • Izberite eno glavno barvno shemo, sestavljeno iz nekaj barv, ki se dobro ujemajo. Tu je odličen generator barvnih shem.
  • Izberite eno barvo, ki bo vaša naglasna barva – barvo, ki se bo uporabljala za gumbe za akcijo, gumbe za nakup itd. V bistvu vse, kar potrebuje pozornost uporabnika.

Tipografija

Tipografija je v mnogih primerih zmagala (ali izgubila) v igri za gradnjo spletnih strani.

Tako enostavno je, da popolnoma pozabiš na tipografijo in samo uporabiš Arial za vse.

Ni priporočljivo.

V teh dneh je delo s pisavami po meri preprosto uber in vam ni treba storiti ničesar tehničnega, da bi te pisave po meri omogočili na svojem spletnem mestu.

Danes je velika, velika tipografija v modi zelo modna, delo oblikovalcev pa še posebej – delo oblikovalcev za začetnike.

Oglejte si to spletno mesto, na primer:

bonobi

Ste opazili kaj? Ja, pisav je ogromno in videti so super!

Tukaj je postopek za to:

  • Vsako oblikovanje spletnega mesta na splošno potrebuje dve vrsti besedila: naslovi in odstavkov. V večini primerov bo le ena pisava na vsakega.
  • Pojdite na Google Fontovi – Googlova lastna knjižnica brezplačnih pisav, ki jo lahko uporabite na svojem spletnem mestu – in poiščite pisavo naslova, ki vam je v resnici všeč.
  • Nato vzemite ime te pisave in jo poiščite v Font Pair – to je knjižnica vnaprej izdelanih dvojic pisav, ki gredo dobro skupaj.
  • Izberite paritev, ki je videti čudovito.
  • Zapišite imena obeh pisav, ki jih boste potrebovali pozneje.

Na ta način boste pospešili postopek in še vedno dali odličen rezultat.

Primer: v Googlovih pisavah smo našli pisavo z imenom Bree Serif:

Bree-Serif

Nato smo ga odnesli v Font Pair in spletna stran je predlagala, da se Bree Serif odlično ujema z Open Sans. Popolno:

Bree-Serif-open-sans

Končna struktura

Končno še zadnji korak!

Poanta tega poglavja je, da ugotovite končno postavitev / strukturo, ki jo boste uporabili za svoje spletno mesto. Na tej točki bi morali biti skoraj prepričani glede stvari, ki jih želite narediti z vašim dizajnom in uporabniškim vmesnikom.

Kaj morate pripraviti po tem poglavju:

  • Vaši cilji uporabnikov so jasno navedeni.
  • Vaš žični okvir je dvakrat preveril, da se prepričate, da ti cilji niso zmedeni.
  • Izbrana barvna shema.
  • Tipografija je ugotovila.
  • Celotna postavitev / struktura / organizacija spletnega mesta.

Nadaljnje branje: 

  • Revija UX
  • UX kabina
  • Psihologija in čustva za barvo v spletnem oblikovanju
  • Kaj je oblikovanje uporabniške izkušnje? Pregled, orodja in viri
  • Postavljanje pametnih poslovnih ciljev za spletno mesto
  • 8 pravil za ustvarjanje učinkovite tipografije

POGLAVJE 4: WordPress, HTML ali predloge?

Odločite se, na katero pot naj gredo – sistemi za upravljanje vsebine ali jo kodirajte od začetka

Tu se začnejo prava, umazana z rokami dela pod pokrovom!

To je verjetno tudi najstrašnejši del postopka (priznajte!).

Za enkrat je pravi čas, da odložite pero in papir ter začnete delati z neko programsko opremo.

In takoj za vrata, tu je vrsta vprašanj …

  • Naj se naučim HTML?
  • Kaj pa CSS?
  • Ali bodo pripravljene predloge spletnega mesta HTML naredile trik zame?
  • Ali se moram naučiti programskega jezika, kot je PHP?
  • Danes sem slišal, da je WordPress način za izdelavo spletnega mesta.
  • Videl sem oglas Squarespace Super Bowl. Kaj je s tem?
  • Kako se imenuje Joomla? Ali pa Drupal?
  • in naprej in naprej.

Odgovor na vse to je pritrdilen.

Da, da, lahko storite eno ali vse te stvari in samo vi boste odločili, katero pot izbrati.

Poskušamo povedati, da tukaj ni najboljšega pristopa. Vse je odvisno od tega, kako se želite ukvarjati s spletnim razvojem, koliko osnov gradnje spletnega mesta se želite naučiti, kako hitro potrebujete kakovostno spletno mesto in kako prilagodljivo želite, da bo pozneje.

Torej, tukaj bomo nadaljevali od tega poglavja naprej. Najprej, izberite osebo, ki vas najbolje definira:

  • a) Želim se naučiti o tem, kaj se razvija splet, vse osnove, vse notranje delovanje spletnega mesta in vse mehanizme, zaradi katerih spletna stran deluje.
  • b) Želim se naučiti, kako uporabiti zanesljivega graditelja spletnih strani, ki se bo spoprijel z večino težkega dviga.
  • c) Ne vem, kaj naj naredim. Samo želim spletno stran, ki si jo lahko sestavim sam in ki bo delovala pravilno.

Odgovoril a)? Pojdite na 5. poglavje.

Odgovoren b)? Pojdite na poglavje 6.

Odgovori c)? Oglejte si ta članek in se vrnite (naj vam pomaga izbrati popolno pot):

  • Pregledano je 8 najboljših platform za bloganje in oblikovanje spletnih mest … Vsaka platforma je opisana skupaj s svojimi prednosti in slabostmi, vir pa tudi predlaga najboljšo razpoložljivo izbiro (Wix ali SB) za vaše posebne potrebe.

Ste že prebrali? Super! Katera od zgornjih oseb vam najbolje opisuje – a) ali b)?

Orodja, ki bi vam lahko prišla na vrsto:

  • Grafika: Paint.NET, Gimp, Pixlr.
  • Pisanje kode: Beležnica ++, TextWrangler, SublimeText.
  • Vodenje dela: Trello.
  • Oblikovanje: barvne sheme, Google Fontovi, orodja od tu.
  • Fotografija: Unsplash, AllTheFreeStock

POGLAVJE 5: Uvod v HTML, CSS & Javascript

Kako so spletna mesta vgrajena resničnost

V tem poglavju bomo poudarili gole osnove spletnega razvoja, razložili najpomembnejše izraze in vas nato poslali v nekatere posebne vire, kjer boste lahko svoje znanje in spretnosti izpopolnili..

HTML

HTML je jezik spletnih mest. Vsaka spletna stran je v nekem trenutku sestavljena ali pretvorjena v HTML.

Na primer, če si želite ogledati strukturo HTML tega vodnika, ki ga berete tukaj, na tipkovnici samo pritisnite »Ctrl + U«..

HTML definira vsak blok, ki ga vidite na spletni strani. Na koncu dneva je za prikaz karkoli na spletni strani potrebno pretvoriti v HTML.

Za učinkovito učenje HTML vam svetujemo, da se prijavite na enega od (brezplačnih ali plačanih) tečajev, ki so na voljo na spletu. Nekatere najboljše najdete v Codeacademy ali Treehouse.

Na primer, tukaj je poseben razdelek o Codeacademy o HTML in CSS.

Domača stran CodeCademy

To je celovit pristop k HTML-ju.

CSS

CSS – za preskok dolgočasnih tehničnih podrobnosti – je odgovoren za oblikovanje vsega, kar je vidno na spletni strani.

CSS vzame oznake HTML in jih nato strukturira ter jim doda stile. Stvari, kot so: krepko besedilo, barvne prilagoditve, sence, postavitve, celo animacije, se zdaj izvajajo predvsem s CSS.

Za boljše razumevanje, kako to natančno deluje, skočite na ta hitri tečaj na Codeacademy.

Za bolj poglobljeno učenje preverite tudi razdelke CSS na Codeacademy ali Treehouse.

JavaScript, jQuery, Bootstrap itd.

JavaScript je programski jezik, ki vam omogoča uvajanje nekaterih dinamičnih dejanj na vašem spletnem mestu. Na primer, lahko počnete stvari, kot so preverjanje spletnih obrazcev ali interakcijo z uporabnikom na bolj racionalen način, ne da bi vam bilo treba ponovno naložiti stran, na kateri je. Tu je lepa vadnica w3schools.

Glede na to je jQuery knjižnica JavaScript, ki vam omogoča ustvarjanje naprednih stvari z manj kodiranja. Zelo priročno za spletnega razvijalca. Več o tem lahko preberete tukaj.

Končno je Bootstrap zelo zanimiv izum. Prvotno ga je predstavil Twitter, v bistvu je osrednje okolje, ki pospeši postopek izdelave spletnega mesta z oddajo večine že sestavljenih običajnih elementov spletnega mesta. Sliši se zapleteno, kajne??

Ampak to ni Oglejte si ta začetni tečaj na Codeacademy (mimogrede, tako smo se sprva naučili Bootstrap).

Kaj morate pripraviti po tem poglavju:

  • V bistvu je prvi osnutek vašega spletnega mesta HTML / CSS v celoti sestavljen. Od tam lahko začnete iterati in izboljšati končni rezultat.

POGLAVJE 6: Platforme za gradnjo spletnih strani

Nastavitev vašega prvega spletnega mesta? Preizkusite brezplačne spletne strani, kot so WordPress, Joomla ali Drupal

Poglavje 6: Platforme za gradnjo spletnih strani

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Tam je več graditeljev spletnih strani, kot jih lahko stresate. (Če ste taka oseba, ki stresa palice.)

Ok, šale na stran.

Če se ne želite naučiti, kako stvari ročno kodirati, so zagotovo več rešitev, ki vam lahko pomagajo.

Opomba. Upoštevajte, da vse ostalo, o čemer smo razpravljali v poglavjih 1-4, še vedno velja tukaj. Tudi če uporabljate rešitev za gradnjo spletnih mest, ki je primerna, morate biti še vedno previdni, da bo končni izdelek prijazen uporabnikom in v skladu s cilji vseh. Ta orodja za gradnjo spletnih mest so ravno ta orodja.

Začenši s tistimi, ki jih je najlažje razumeti:

SquareSpace

Edina spletna platforma, ki se oglašuje v času Super Bowla.

Skratka, zelo priročna rešitev, ki jo lahko uporablja kdorkoli. Predhodne veščine niso potrebne.

Omogoča vam izdelavo klasičnih spletnih strani, blogov, celo trgovin e-trgovine, o njih smo celo napisali recenzijo. Vmesnik in celoten postopek njegove uporabe je dokaj enostavno razumeti, poleg tega pa fantje iz Squarespacea nudijo veliko zanimivih vadnic. Oglejte si jih tukaj.

WordPress

Iskreno, imamo radi WordPress.

Večino časa je to odlična platforma za izdelavo spletnega mesta. Ima popolno ravnovesje med kompleksnostjo in enostavnostjo uporabe ter je v osnovi neskončno prilagodljiv.

WordPress animacija

Prav tako je trenutno najbolj priljubljena spletna platforma vseh. Kot je dejal ustvarjalec WordPressa – Matt Mullenweg – WordPress zdaj pokriva 25% celotnega interneta. Ali se lahko vsi ti ljudje motijo?

V redu, tako da začnete z WordPressom, v bistvu potrebujete samo svojo domeno in gostovanje. Programska oprema WordPress sama je popolnoma brezplačna.

Za začetek lahko sledite eni od teh poti:

a) “Hitra pot”

  • Pojdite sem, da se naučite poenostavljen način namestitve WordPress-a in zagon vašega spletnega mesta popoldne.
  • Izberite brezplačno temo iz uradnega imenika – prepričajte se, da je skladna s cilji vašega spletnega mesta in da postavitev / zasnova ni daleč od želene strukture (malo jo boste prilagodili).
    • Preverite ta dva vira, če želite izvedeti, kako prilagoditi obstoječo temo.
    • Lahko pa izberete večnamensko premijsko temo, ki jo lahko prilagodite s priročnim uporabniškim vmesnikom (brez kodiranja). Tema X je dober primer takega.
  • Za dodatne funkcije namestite nekaj najbolj priljubljenih in najboljših vtičnikov.

b) “Poglobljena pot”

  • Začnite z učenjem WordPress-a prek spletnega tečaja. Treehouse ponuja super.
  • Izberite svojo temo in vtičnike tako kot zgoraj. Lahko pa tudi sami od doma pripravite svojo temo.

Na koncu je WordPress verjetno najbolj vsestranska spletna platforma na trgu. Z njim lahko zgradite praktično katero koli spletno stran, ne le bloge ali preprosta poslovna mesta. Tukaj je seznam 47 (!) Različnih načinov uporabe WordPressa, samo da boste razmišljali.

Joomla in Drupal

Čeprav se Joomla in Drupal nekoliko razlikujeta, sta odlična sistema za upravljanje vsebin za naprednejše spletne projekte.

Niso tako močni oblikovalsko, vendar so zelo prilagodljivi in ​​sposobni ravnati s katero koli spletno stranjo, ki jo morda imate v načrtu.

Včasih, odvisno od zahtevnosti vašega projekta, lahko zahtevajo veliko več časa za obvladovanje in veliko več truda za to.

Za bolj poglobljeno usposabljanje so na Lynda.com na voljo super tečaji, tako za Joomla kot Drupal.

Kaj morate pripraviti po tem poglavju:

  • Prvi osnutek vaše spletne strani je v celoti sestavljen, ne glede na to, ali ste se odločili za WordPress ali kakšno drugo platformo.
  • Prepričajte se, da je skladen z vašimi začetnimi cilji, ciljno publiko in da bo imel dobro uporabniško izkušnjo.

POGLAVJE 7: Odzivno oblikovanje za mobilne naprave

Več kot 60% ljudi uporablja mobitele in tablice za brskanje po spletu

Odzivnost mobilnih telefonov je zdaj zelo pomemben vidik pri gradnji spletnih strani, verjetno bolj kot doslej.

O tem govori celotna težava:

V bistvu je trenutno več ljudi, ki uporabljajo mobilne naprave za dostop do spleta kot kdaj koli prej. Dejansko je po ocenah zdaj več uporabnikov mobilnega interneta kot namiznih uporabnikov interneta (75,1% v primerjavi z 52,7%).

Vendar obstaja težava.

Vsak dizajn spletnega mesta ne bo optimiziran za ogled na mobilnih napravah takoj izven vrat.

Nekatere pogoste težave vključujejo:

  • pisave so premajhne,
  • sama postavitev se na manjši zaslon sploh ne prilagaja,
  • ali tehnologija, uporabljena za izdelavo spletnega mesta, ki ni na voljo na mobilnih napravah.

Tu se začne igrati ideja mobilne odzivnosti.

Odzivno spletno mesto se odziva na okolje, na katerem si ga ogledujejo. Če je namizni računalnik, spletno mesto upodablja na določen način. Če je mobilni, se upodablja na drug način.

Tu je boljša razlaga: Kaj za vraga je odziven spletni dizajn?

Zdaj je treba storiti, da preverite in preverite, ali vaše spletno mesto deluje na mobilnih napravah. Če želite to preveriti, uporabite svoje lastne naprave, preizkusite pa tudi Googlov mobilni test ali pa preskočite na orodje, kot je odzivni preizkuševalnik oblikovanja.

Če obstajajo težave, jih morate odpraviti.

Nekaj ​​rešitev:

  • Odziven spletni dizajn – navodila
  • Kako narediti spletno stran odzivno v približno 15 minutah

POGLAVJE 8: Združitev vsega skupaj

Poznate osnove, zdaj je na vrsti vaša

Počakaj, skoraj smo že tam!

To je zadnje poglavje na naši precej dolgi poti.

Na tej točki bi morali izdelati prvo spletno mesto … Naj bo to z WordPressom, ročno izdelanim HTML / CSS, nekim graditeljem spletnega mesta ali katerim koli drugim orodjem, ki ste ga izbrali za to delovno mesto.

Skratka čestitke! Vendar je treba narediti še nekaj stvari:

  • Dvakrat preverite stvari, o katerih smo razpravljali v poglavjih 1 in 2. Poskrbite, da cilji resnično delujejo za končnega uporabnika in da spletno mesto ne bo zmedeno.
  • Preverite svojo kodno strukturo s pomočjo storitve W3C za preverjanje označevanja.
  • Preverite, ali na spletnem mestu ni težav z varnostjo. Za to uporabite skener podjetja Sucuri.
  • Pridobite povratne informacije od skupnosti. Preverite, kaj si drugi mislijo o vašem delu. Forumi na spletnem mestu Sitepoint so lahko dobri za to.

Če ste prvič prebrali ta vir, vas resnično spodbujamo, da se mu nekajkrat vrnete in ga obravnavate kot referenčno datoteko za vaše nadaljnje izobraževanje.

Kot smo rekli na začetku, lahko uporabite TOC in se premikajte od poglavja do poglavja in virajte po virih, kot se vam zdi primerno.

Nazadnje smo radovedni… kaj je vaš največji izziv, ko gre za gradnjo spletnih strani, razvoj spletnih strani ali oblikovanje? Prosimo, delite v komentarjih ali preko Twitterja. Vsa ušesa smo!

Hvala za branje, čudoviti ste!

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

About the author

Adblock
detector