Web razvoj i dizajn 101

web_development_101Želite li znati osnove web razvoja i dizajna? Super…


Ali postoji problem s tim razmišljanjem ili većim brojem njih zapravo …

  • Koja je svrha posjedovanja web stranice? Treba li svima stvarno jedan?
  • Ako je tako, kako napraviti kvalitetnu web stranicu? Ili drugim riječima, kako naučiti osnovni web razvoj i dizajn koji bi vam omogućio da sami napravite kvalitetnu web stranicu?
  • Što je još važnije, možete li prvo izraditi kvalitetnu web stranicu? Ili vam trebaju godine iskustva iza vas, prije nego što se možete nadati bilo kojem rezultatu iznad strašnog?

Odgovorimo na sve to u ovome početnički vodič za razvoj i dizajn web stranica.

[Upozorenje za spojler Da, možete izraditi kvalitetnu web stranicu iz prvog pokušaja.]

Što je obuhvaćeno ovim Vodičem?

U redu, prvo stvari, drago nam je da ste nastavili čitati i da ste odlučili isprobati web razvoj! Evo kako će se to odigrati:

Poglavlja su predstavljena na vrlo jednostavan način, s glavnim sadržajem s lijeve strane i djelotvornim stavkama na desnoj strani. Ovako:

Uvod u vodič: Poglavlje 1

E sad, kako postupiti:

  • Dok ste na prvom čitanju: Preporučujemo vam da čitate cijelu stvar odozgo prema dolje. Ovo će vam pružiti dobar pogled na temu od 10.000 stopa i pomoći vam da razumijete najvažnije njegove dijelove. Također će vam pružiti osnovne alate i metode kako rješavati pojedinačne zadatke.
  • Dok je na vašem drugom čitanju i dalje: Upotrijebite TOC i pređite na onaj dio koji vas najviše zanima. Također slobodno upotrijebite gumbe za dijeljenje pored svakog poglavlja i pošaljite veze sebi ili svojim prijateljima / sljedbenicima koji bi mogli biti zainteresirani.

Spreman? Idemo na prvo poglavlje.

Za koga je ovaj vodič?

Ako želite naučiti osnovne web izrade i dizajna, ovaj je vodič za vas. Kakva god bila vaša motivacija.

Također, za početak rada vam nije potrebno nikakvo prethodno tehničko znanje (osim osnovnih “web vještina”). Cijela smisao ovog vodiča je biti svojevrsni tečaj “101” za sve koji su zainteresirani za izradu web stranica i učenje web razvoja.

Evo nekoliko uobičajenih razloga zbog kojih biste mogli biti zainteresirani:

  • 1. Potrebna vam je web stranica za vaše poslovanje (i želite vidjeti možete li je sami graditi).
  • 2. Želite NAUČITI web razvoj izvan strasti ili privremenog interesa (ništa loše u tome).
  • 3. Potrebna vam je web stranica za školu.
  • 4. Pomažete prijatelju ili članu obitelji kako bi postavili internetsku stranicu.

Glavna ideja koja će nas voditi

Ovo je važno! I nemojte se ljutiti na nas ako ste napredni web programer koji ovo čita, ali glavna ideja koja će nas voditi kroz cjelokupni resurs za web dizajn i dizajn 101 jest:

„Pristup najmanjeg otpora“

Evo tri principa pristupa najmanje otpora:

  • mi smo ne rušeći stvari na molekularnoj razini. Tj nećemo doći do dna kako funkcioniraju jezici programiranja ili kako funkcionira web poslužitelj.
  • mi smo ne izmišljajući kotač. Tj ako je netko već riješio zadani problem i učinio rješenje dostupnim, mi ćemo ga koristiti.
  • mi smo čineći jednostavno rješenje fenomenalnim, radije nego komplicirano i naizgled funkcionalnije rješenje buggy i ne razumljivo.

POGLAVLJE 1: Plan

Vaša ideja, vrsta web stranice, naziv domene i hosting.

Prije nego što postavite web mjesto, trebat će vam plan

Ironično kako zvuči – hit nas emisija 80-ih naučio nas je, dobar plan je ključ uspjeha.

Ako ste neko vrijeme sjedile u vama, zasigurno ste uzbuđeni zbog jedine ideje da se konačno izvučete iz nje da je drugi čitaju i pregledavaju.

Želite da vaša web stranica bude sjajna. Vjerojatno znate kako će to izgledati u određenoj mjeri. Ili možda imate čak i savršen logotip spreman.

Ali…

Ovo uopće nije mjesto na kojem biste trebali započeti. Ako započnete s unaprijed utvrđenim očekivanjima, to će vas samo dovesti do velike zbrke na putu i rezultata podparabora na kraju.

Umjesto toga, smislite sljedeće:

  1. Odvojite se od bilo kakvih tehničkih ciljeva. Kao, na primjer, cilj je naučiti tehnologije web mjesta ili određenog softvera za web mjesto.
  2. Postavite sebi jedno glavno pitanje: “Za šta mi web mjesto treba?”

Ovo nije stvar vas, ovo je cilj web mjesta.

Pitanja koja trebate sebi postaviti prije postavljanja svoje web stranice

  1. Što web mjesto treba postići?
  2. Koja će biti glavna “stvar” predstavljena putem stranice? (npr. svoju tvrtku, proizvod, postove na blogu itd.)
  3. Hoće li web stranica imati neku posebnu svrhu? (npr. trgovina e-trgovine, portfelj fotografa itd.)
  4. Tko je ciljna publika?
  5. Zašto ih zanima tema stranice?
  6. Koju bol rješava web mjesto za pojedine članove publike?

O ova zadnja 3 pitanja razgovarajmo publiku na minutu…

Postoje 2 glavna pravila za izgradnju web stranice. Evo pravila # 1:

 Čitatelj / posjetitelj dolazi na prvo mjesto. Oni su glavna osoba kojoj se vaša web stranica mora zadovoljiti.

Na neki način vaša web lokacija nije vaša. Njihovo je.

(Pravilo br. 2 razgovarat ćemo za minutu.)

Zaboraviti na ovu jednostavnu smjernicu može vas dovesti potpuno pogrešnim putem, čak i do točke kada se nađete s web stranicom koja je zbunjujuća za sve oko vas, osim vas.

„Uh! Ljudi jednostavno ne razumiju o čemu se radi na ovoj web lokaciji. Kako mogu biti tako neznalice ?! ” – završiš razmišljati. Ali kako se ispostavilo, ti si neznalica bio ti.

Jedini način da se to izbjegne je izgradnja vaše web stranice s čitateljem na umu odmah od početka.

Dakle … uzmi taj komad papira i odgovori na sva gornja pitanja.

Nakon što završite, imate svoj najviši skup smjernica na koje ćete djelovati dok radite na svojoj web lokaciji.

Ti će odgovori biti izuzetno moćan alat dok idete dalje. Moći ćete im se obratiti kad god se budete suočili s odlukom koja se tiče vaše web stranice.

Trebate li učiniti ovo * ili * to *? Idite na listu odgovora i saznajte. Treba li koristiti široku ili usku bočnu traku? Dođite do odgovora i saznajte koji je izgledniji odjek u ciljanom čitaču. I tako dalje.

Imena domena i web hosting

Ako želite biti vlasnik web stranice, trebate naziv domene i web-domaćina.

U redu, tehnički gledano, možete napraviti testnu web stranicu na svome računalu i zatim je pokrenuti s lokalnog web poslužitelja (također instaliranog kao softver na vašem računalu), ali to ne bi bilo korisno rješenje za 99% slučaja, pa samo preskočimo.

Dakle, domaćin i domena …

Loša vijest je da oboje koštaju novac.

Dobra vijest … to nije toliko novca u velikoj shemi stvari. Pored toga, dok učite, možete pokrenuti čak i više malih web stranica na jednom nazivu domene i pod jednim web hosterom.

No, krenimo na početku.

Web domaćini:

  • Jednostavno rečeno, web domaćin je mjesto na kojem sjedi vaša web stranica i gdje ga posjetitelji mogu pronaći. Na neki način web hostovi za web stranice slični su stanovima za ljude. Pod pretpostavkom, web domaćini su tvrtke koje iznajmljuju svoje servere u zamjenu za novac (… mali apartmani za vaše web stranice).
  • Za početak će se raditi standardni plan zajedničkog hostinga. Možete ih nabaviti za sve što kreće od $ 3 mjesečno. Evo dobre usporedbe popularnih web-domaćina. Provjerite i odlučite koja od tih tvrtki se čini baš vama. Međutim, naše preporuke odnose se na SiteGround, A2 hosting i Dreamhost.

domene:

  • Ako je web domaćin apartman, tada je domena adresa tog stana. Na primjer, domena ove web stranice je hostingfacts.com.
  • Način za početak je odabrati željeno ime domene, a zatim ga kupiti od registrara. Evo opsežnog vodiča o tome kako kupiti ime domene, a ovdje je popis generatora imena domena.

 

Prijedlozi i savjeti za odabir imena domene

U redu, pa odlazak nekom registru domena i zapravo kupovina domene jedno je, ali kako odabrati pravo ime domene?

Postoji nekoliko škola:

  • Trgovačka imena domena. To su domene sastavljene od nepostojećih riječi. Razmislite, stvari poput Google.com ili Yahoo.com. Prije nego što su se pojavile te tvrtke, te riječi nisu značile ništa. Naglavljeno ime markirane domene jest u tome što je … dobro, visoko markirano, pamtljivo i lako je razlikovati web mjesto od ostalih.
  • Nazivi na temelju ključnih riječi. Oni se sastoje od postojećih riječi, smještenih u nizu koji opisuje svrhu web mjesta. Razmislite, stvari poput Pizza.com ili StartBloggingOnline.com. S takvim imenom domene posjetitelji će moći precizno predvidjeti vrstu web stranice koju će tek posjetiti. Loša strana je ta da su te domene uglavnom manje marljive.
  • Kombinirana imena. To su domene marki i domene temeljene na ključnim riječima. Pomislite, Facebook.com ili Copyblogger.com. Takvi nazivi posjetitelju sugeriraju “neki” dio web stranice, ali oni su i dalje visoko markirani.

Neke opće smjernice bez obzira na vrstu domene koju odaberete:

  • Učinite domenu lako pamtiti.
  • Neka bude kratak i jednostavan. Što je domena dulja, to je i zbunjujuće.
  • Nabavite .com (ako je moguće). .Com je glavna dostupna domena „najviše razine“. Ne slažite se ni sa čim drugim.
  • Pokušajte izbjeći crtice. Nazovite svoje ime u obliku jednog bloka poput “cakerecipes.com” umjesto “cake-recipes.com”

Stvari koje treba pripremiti nakon ovog poglavlja:

  • Naziv domene.
  • Web domaćin.
  • Vaš obrazac odgovora – ciljevi vaše web lokacije i kako će poslužiti publici.

Trebate više pomoći? Evo daljnjeg čitanja za vas:

  • Zašto zajednički hosting? Usporedba glavnih vrsta domaćina
  • 10 stvari zbog kojih je web domaćin dobar
  • 12 pravila za odabir pravog imena domene
  • Opsežan vodič za planiranje web stranica

POGLAVLJE 2: Projektiranje i žičano uokvirivanje

Uzmite papir i olovku te ogrebotine zajedno sa strukturom vaše web stranice

Ok, uđimo u fazu dizajna.

Prvo stvari, evo radne etike kojom idemo ovdje:

  • Koristimo olovku i papir koliko god možemo, a tek potom prebacimo se na računalo. Vjerujte nam, svaka minuta potrošena na radu na vašem dizajnu na papiru uštedjela je sat vremena nakon što započnete podešavanje stvari na računalu.
  • Radimo iterativni rad … Radimo »provjeravamo rezultate« poboljšavamo »provjeravamo rezultate» ponavljamo dok ne završimo.

U prvom poglavlju spomenuli smo nešto što smo nazvali pravilom br. 1 za izradu web stranica. Sada je vrijeme za pravilo br. 2:

Pravilo br. 2 izrade web stranica:

Prvo razmislite o sadržaju.

Sadržaj je najvažniji na web stranici. Ne dizajn. Sadržaj.

Ljudi dolaze zbog sadržaja. Ne dolaze za dizajn. Dizajn je samo vozilo za isporuku sadržaja.

Nikada ne započinjte s izgledom vaše web stranice. Započnite sa sadržajem. Sadržaj. Sadržaj. Sadržaj.

Pa što mislimo pod “sadržajem”? Ukratko, to je stvar koju ljudi žele dobiti s vaše web lokacije. Postovi na blogovima, proizvodi u trgovini, teme na forumima ako gradite forum, članke o vijestima, vašu poslovnu ponudu itd.

“Stvarno? Izgledi zaista nisu bitni? ” – Pitaš.

Umjesto da nas to prebije, pogledajte ovu stranicu:

Jednostavna web stranica

Ova jednostavna web stranica daleko je najbolje objašnjenje što je dizajn i koja svrha služi on-line.

Zato zapamtite, prvo sadržaj!

Sadržaj i struktura web stranica

U redu, pa pošto je sadržaj najvažnija stvar, morate ga pripremiti (većinu) unaprijed. Ili barem trebate dobro znati koliko će se sadržaja nalaziti i u kojem obliku.

Bilješka. Znamo da ovaj dio može biti naporan. Početak sa sadržajem izgleda prilično neprirodno za dizajn web stranica, ali zaista je to najbolji način da na kraju postignete vrhunski rezultat. Stoga razmislite o sadržaju koji želite podijeliti s čitateljem i kako ga želite predstaviti.

Sljedeći je korak izdvajanje pojedinih vrsta stranica koje će vam trebati (poput početne stranice, stranice proizvoda, stranice s kategorijama, stranice o stranici, stranice kontakta, glavnu stranicu prodaje, odredišnu stranicu pretplate na bilten, popis glavnih blogova, pojedinačni postovi, možda trgovina i sve što se čini potrebnim).

Razmislite koji je najučinkovitiji način organiziranja vašeg sadržaja na web mjestu?

Sve to napravite na papiru. Vjerojatno će vam biti lakše i brže od učenja nekog dijela softvera za crtanje grafikona na licu mjesta.

Primjer:

Struktura sadržaja

Ispiši zajedno žičani okvir

Žičani okvir u web dizajnu jednostavno je shema stranice ili nacrt stranice – vizualni vodič koji predstavlja okvir web stranice (kaže nam Wikipedia).

Žičani okviri su fenomenalni! Koristimo ih za većinu stvari koje radimo i koje su namijenjene pojavljivanju na mreži. Na primjer, ovdje je okvir za ovaj vodič:

Stisnite zajedno žičani okvir

Kao što vidite, opet, to je na papiru. Iako postoji više aplikacija za ovakav posao, mi ih zapravo ne savjetujemo. Oni mogu biti sjajni za dizajnere, ali početnik ili srednja osoba izgubit će vrijeme samo naučeći ih, i na kraju neće postići puno poboljšanja u odnosu na ono što bi postigli olovkom i papirom.

Dakle, kako žičati okvir?

Postoje dva pristupa ako ste početnik:

  • Idite uz tok ako se osjećate jako i samo se povucite (nije uvijek savršeno rješenje).
  • Nabavite nekoliko brzih znanja o tome kako pravilno uspostaviti okvir (obično bolje).

Za potonje, idite ovamo – sjajan vodič.

(Obavezno napravite žičani okvir svake važne vrste stranica koje ste naveli u prethodnom koraku.)

Stvari koje treba pripremiti nakon ovog poglavlja:

  • Većina sadržaja web mjesta ili barem većina je predviđala (na primjer, ako se oslanjate na sadržaj koji je stvorio korisnik, teško je imati to prije).
  • Struktura sadržaja vaše web lokacije pripremljena kao grafikon.
  • Žičani okvir pojedinih vrsta stranica koje će vam trebati.

Daljnje čitanje:

  • 9 koraka za planiranje sadržaja web stranica
  • Novo u web dizajnu? Započni ovdje.

POGLAVLJE 3: UX i korisničko sučelje

Nikada ne podcjenjujte važnost korisničkog iskustva i korisničkog sučelja

Kao i u Korisničko iskustvo i korisničko sučelje.

WebDesignerDepot daje nam prilično poetičnu definiciju dvaju:

UI je sedlo, stremovi i kraljuju.

UX je osjećaj koji dobivate mogućnost jahanja konja i uvlačenja stoke.

Za praktičniju definiciju:

  • Korisničko sučelje je ono što korisnik vidi kad pregleda vašu web lokaciju.
  • UX se osjećaju zbog toga.

Par i koliko je dobro izveden u osnovi definiraju korisnost vaše web lokacije za krajnjeg korisnika / posjetitelja.

UX i UI dizajn su velike teme same po sebi, a postoji puno manjih elemenata koji igraju ulogu u konačnom rezultatu.

Ukratko, postoji mnogo toga za naučiti ako tek krećete na put.

Dakle, umjesto da ovdje pokušavamo srušiti čitav tečaj dizajna za UX i UI, nazovimo samo nekoliko važnih elemenata, a zatim vas pošaljemo negdje drugdje na daljnje čitanje.

Ciljevi korisnika

UX se tiče korisničkih ciljeva … Nije baš vaš cilj … Korisnički ciljevi.

Ok, što to znači? Prije svega, vratite se svrsi vaše web stranice – ono na čemu ste radili u prethodnim poglavljima. Razlog zašto izrađujete web stranicu i kako pomaže korisniku / posjetitelju.

Kako se to prevodi u cilj posjetitelja? … Koja je stvar koju posjetitelj želi postići ili postići kada dođe na vašu stranicu? To im je cilj.

Koliko su lako ti ciljevi postići?

Zatim se usredotočite na sljedeće pitanje:

  • Može li posjetitelj lako postići svoj cilj? – Mogu li na jednostavan način doći do tačnih informacija?

Da biste odgovorili na to, vratite se na svoj žičani okvir, strukturu sadržaja i dvostruko provjerite.

Uvjerite se da struktura sadržaja i stranice koje ste izmislili imaju smisla s gledišta korisnika. Provjerite je li na njima moguće slobodno i nesmetano kretanje između važnih stranica.

U suštini, ovdje osiguravamo da web stranica posjetiteljima daje vrijednost.

Iako je teško sve shvatiti sami, nije li to?

Vrlo se preporučuje da provjerite izvore navedene u odjeljku “dalja čitanja” ovog poglavlja … ali možete isprobati i “hack”, da tako kažem.

Naime, razmislite što vas frustrira kada posjetite web stranice koje su slične onome koje želite izgraditi? Možda postoje neke informacije do kojih je stvarno teško doći ili neki element sučelja koji web lokaciju čini zbunjujućim.

Vodite bilješke, izvlačite zaključke, nemojte praviti iste pogreške na web lokaciji.

Korištenje emocija kao alata

Kada radite na korisničkom sučelju i UX-u vaše web stranice, ono što u osnovi ciljate je pozivanje na određene osjećaje kod vašeg posjetitelja..

Želite da se oni osjećaju na određeni način, što će ih onda uvjeriti da djeluju na određeni način. Dakle, čineći vašu web stranicu doista korisnom.

Za rad na emocionalnom dijelu posla jedan je od najboljih alata boja.

Boje imaju različita značenja u različitim kulturama. Razumijevanje tih razlika može vam olakšati posao. Evo lijepog lista za varanje.

Nakon što ste upoznati koje boje želite (vjerojatno) koristiti, evo nekoliko općih smjernica za rad s bojom:

  • Odaberite jednu glavnu shemu boja koja se sastoji od nekoliko boja koje dobro idu zajedno. Evo izvrsnog generatora shema boja.
  • Odaberite jednu boju koja će biti vaša akcentna boja – boju koja će se koristiti za akcijske gumbe, gumbe za kupnju itd. U osnovi, sve što treba korisnikovoj pažnji.

Tipografija

U mnogim je slučajevima tipografija pobjeda (ili gubljenje) igre izgradnje web stranica.

Tako je lako zaboraviti na tipografiju u potpunosti i za sve jednostavno koristiti Arial.

Nije preporučeno.

Danas je rad s prilagođenim fontovima uber-jednostavan, pa čak i ne morate učiniti ništa tehničko da biste omogućili te prilagođene fontove na vašoj web lokaciji..

Velika, velika tipografija danas je vrlo modna u modi, a posao dizajnera, posebno dizajner početnika, mnogo olakšava.

Pogledajte, primjerice, ovu web lokaciju:

bonobo majmuna

Jeste li nešto primijetili? Da, fontovi su ogromni i izgledaju sjajno!

Evo kako raditi na tome:

  • Općenito, svaki dizajn web stranica treba dvije vrste teksta: naslovi i stavci. U većini slučajeva će se raditi samo po jedan font.
  • Idite na Google fontove – Google-ovu vlastitu biblioteku besplatnih fontova koje možete koristiti na svojoj web stranici – i potražite font naslova koji vam se stvarno sviđa.
  • Zatim uzmite ime tog fonta i potražite ga u Font Pair – to je knjižnica unaprijed izrađenih pariranja fontova koji idu dobro zajedno.
  • Odaberite uparivanje koje izgleda sjajno.
  • Zabilježite imena oba slova, trebat će vam kasnije.

Ako to postignete, ubrzaćete postupak i još uvijek ćete pružiti odličan rezultat.

Primjer, u Google Fontovima pronašli smo font pod nazivom Bree Serif u kojem prilično uživamo:

Bree vitica

Zatim smo ga odnijeli u Font Pair, a stranica je sugerirala da Bree Serif dobro ide uz Open Sans. Savršen:

Bree vitica-otvorene-sans

Konačna struktura

Napokon i posljednji korak!

Sva točka ovog poglavlja sastoji se u konačnom izgledu / strukturi koju ćete koristiti za svoje web mjesto. U ovom trenutku trebali biste biti sigurni u stvari koje želite učiniti s vašim dizajnom i korisničkim sučeljem.

Stvari koje treba pripremiti nakon ovog poglavlja:

  • Vaši su ciljevi korisnika jasno navedeni.
  • Vaš žični okvir dvaput je potvrdio kako bi bili sigurni da ti ciljevi nisu zbunjujući.
  • Odabrana shema boja.
  • Tipografija je shvatila.
  • Cijeli izgled / struktura / organizacija web stranice.

Daljnje čitanje: 

  • UX magazin
  • UX kabina
  • Psihologija i emocija koja stoji iza boje u web dizajnu
  • Što je dizajn korisničkog iskustva? Pregled, alati i resursi
  • Postavljanje pametnih poslovnih ciljeva za web mjesto
  • 8 pravila za stvaranje učinkovite tipografije

POGLAVLJE 4: WordPress, HTML ili predloške?

Odlučite kojom rutom ćete ići – sustavi za upravljanje sadržajem ili je kodirajte od nule

Evo gdje započinje pravi, prljavi rukama, pod poklopcem!

Ovo je ujedno i najstrašniji dio postupka (priznajte!).

Jednom je pravo vrijeme da olovku i papir ostavite po strani i počnete raditi s nekim softverom.

I pravo na vrata, eto vas puno pitanja …

  • Trebam li naučiti HTML?
  • Što je s CSS-om?
  • Hoće li spremne predloške HTML web stranica učiniti trik za mene?
  • Trebam li naučiti programski jezik poput PHP-a?
  • Ovih dana čuo sam da je WordPress način stvaranja web lokacije.
  • Vidio sam oglas Squarespace Super Bowl. Što je s tim?
  • Kako se to zove Joomla? ili Drupal?
  • i na i na i na.

Odgovor na sve njih je da.

Kao i da, možete učiniti bilo koje ili sve te stvari, a na vama je samo da odlučite koji put odabrati.

Ono što mi želimo reći je da ovdje nema najboljeg pristupa. Sve ovisi o tome koliko želite biti uključeni u web razvoj, koliko osnova gradnje web stranica želite naučiti, koliko brzo vam je potrebno kvalitetno web mjesto i koliko prilagodljivo želite da to bude kasnije.

Pa evo kako ćemo krenuti od ovog poglavlja naprijed. Prvi, odaberite osobu koja vas najbolje definira:

  • a) Želim naučiti o čemu se radi web razvoj, sve osnove, sve unutarnje funkcioniranje web stranice i svi mehanizmi koji omogućuju rad web stranice.
  • b) Želim naučiti kako koristiti pouzdanog graditelja web stranica koji će se nositi s većinom teških dizanja za mene.
  • c) Ne znam što da radim. Samo želim web stranicu koju mogu sama izgraditi i koja će ispravno funkcionirati.

Odgovorio a)? Idite na 5. poglavlje.

Odgovori b)? Idite na poglavlje 6.

Odgovori c)? Provjerite ovaj članak, a zatim se vratite (trebao bi vam pomoći da odaberete savršen put):

  • Pregledano je 8 najboljih platformi za bloganje i izgradnju web lokacija … Svaka je platforma opisana zajedno sa svojim prednostima i nedostacima, a resurs također sugerira najbolji raspoloživi izbor (Wix ili SB) za vaše specifične potrebe.

Jeste li je pročitali? Sjajno! Dakle, koja od gore opisanih osoba vas najbolje opisuje – a) ili b)?

Alati koji bi vam mogli biti korisni na ovom putu:

  • Grafika: Paint.NET, Gimp, Pixlr.
  • Pisanje koda: Notepad ++, TextWrangler, SublimeText.
  • Upravljanje radom: Trello.
  • Dizajn: sheme boja, Google fontovi, alati odavde.
  • Fotografija: Unsplash, AllTheFreeStock

POGLAVLJE 5: Uvod u HTML, CSS & Javascript

Kako su web stranice ugrađena u stvarnost

U ovom ćemo poglavlju ukazati na osnovne temelje razvoja web-a, objasniti najvažnije pojmove, a zatim ćemo vas poslati nekim određenim resursima na kojima možete nadograditi svoje znanje i vještine.

HTML

HTML je jezik web mjesta. Svaka se web stranica izgradi ili pretvori u HTML u nekom trenutku.

Na primjer, da biste vidjeli HTML strukturu ovog vrlo vodiča koji ovdje čitate, samo pritisnite “Ctrl + U” na tipkovnici.

HTML definira svaki blok koji vidite na web stranici. Na kraju dana, da bi se bilo što prikazalo na web stranici, potrebno ga je pretvoriti u HTML.

Da biste učinkovito naučili HTML, savjetujemo vam da se prijavite na jedan od (besplatnih ili plaćenih) tečajeva dostupnih na internetu. Neke od najboljih možete pronaći u Codeacademy ili Treehouse.

Na primjer, evo posebnog odjeljka o Codeacademy koji govori o HTML-u i CSS-u.

Početna stranica CodeCademy

To je sveobuhvatni pristup HTML-u.

CSS

CSS – za preskakanje dosadnih tehničkih detalja – odgovoran je za oblikovanje svega što je vidljivo na web stranici.

CSS uzima HTML oznake, a zatim ih strukturira i dodaje styling. Stvari poput: podebljani tekst, podešavanja boje, sjene, izgleda, čak i animacije, sada se uglavnom rade pomoću CSS-a.

Da biste bolje razumjeli kako ovo točno djeluje, skočite na ovaj brzi tečaj na Codeacademy.

Za detaljnije učenje, pogledajte i CSS odjeljke bilo na Codeacademy ili Treehouse.

JavaScript, jQuery, Bootstrap itd.

JavaScript je programski jezik koji vam omogućuje uvođenje nekih dinamičnih radnji na vašu web stranicu. Na primjer, možete raditi stvari poput ovjere web obrazaca ili komunicirati s korisnikom na pojednostavljeniji način bez potrebe za ponovnim učitavanjem stranice na kojoj se nalazi. Evo lijepe upute za w3schools.

Imajući to u vidu, jQuery je JavaScript knjižnica koja vam omogućuje stvaranje naprednih stvari s manje kodiranja. Vrlo prikladno za web programere. Saznajte više ovdje.

Konačno, Bootstrap je vrlo zanimljiv izum. Izvorno predstavljen putem Twittera, to je u osnovi okruženje koje ubrzava proces izrade web mjesta isporukom većine uobičajenih elemenata web lokacije već unaprijed izrađenih. Zvuči komplicirano, zar ne??

Ali nije. Samo pogledajte ovaj početni tečaj na Codeacademy-u (usput, tako smo u početku i naučili Bootstrap).

Stvari koje treba pripremiti nakon ovog poglavlja:

  • U osnovi je prvi nacrt vaše HTML / CSS web stranice u potpunosti izgrađen. Odatle možete započeti iteratirati i poboljšati konačni rezultat.

POGLAVLJE 6: Platforme za izgradnju web stranica

Postavljanje prve stranice? Isprobajte besplatne platforme web stranica poput WordPress, Joomla ili Drupal

Poglavlje 6: Platforme za izgradnju web stranica

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Postoji mnogo više graditelja web stranica nego što ih možete riješiti štapom. (Ako ste vrsta osobe koja trese štapove.)

Ok, šale se u stranu.

Jasno je da, ako nemate želju naučiti kako kodirati stvari rukom, sigurno su to mnoga rješenja koja vam mogu pomoći.

Bilješka. Imajte na umu da sve ostalo o čemu smo razgovarali u poglavljima 1-4 vrijedi i ovdje. Čak i ako idete s rješenjem za izradu web mjesta poput ruke, i dalje morate biti oprezni kako bi konačni proizvod bio prilagođen korisnicima i u skladu s ciljevima svih. Ti alati za izradu web lokacija su upravo to … alati.

Počevši od onih koje je najlakše shvatiti:

SquareSpace

Jedina web lokacija koja se oglašava za vrijeme Super Bowla.

Ukratko, vrlo zgodno rješenje koje može koristiti bilo tko. Nisu potrebne prethodne vještine.

Omogućuje vam izradu klasičnih web stranica, blogova, čak i trgovina e-trgovine, čak smo napisali i recenziju o njima. Sučelje i cijeli postupak njegove uporabe prilično je lako razumjeti, a dečki iz Squarespacea pružaju puno zanimljivih vodiča. Pogledajte ih ovdje.

WordPress

Iskreno, volimo WordPress.

Većinu vremena to je savršena platforma za izgradnju web stranice. Ima savršenu ravnotežu između složenosti i jednostavnosti upotrebe i u osnovi je beskrajno prilagodljiv.

WordPress animacija

Također, ovo je trenutno najpopularnija platforma web stranica od svih. Kako je to podijelio tvorac WordPress-a – Matt Mullenweg – WordPress sada pokreće 25% cjelokupnog interneta. Mogu li svi ti ljudi pogriješiti?

U redu, za početak rada s WordPressom u osnovi vam je potrebna samo vaša domena i hosting. Sam WordPress softver je potpuno besplatan.

Za početak slobodno slijedite jedan od ovih staza:

a) “Put brzog starta”

  • Idite ovdje da naučite pojednostavljeni način instaliranja WordPress-a i pokretanja vaše web stranice u poslijepodnevnim satima.
  • Izaberite besplatnu temu iz službenog imenika – provjerite je li u skladu s ciljevima vaše web lokacije i da izgled / dizajn nisu daleko od vaše željene strukture (malo ćete je prilagoditi).
    • Provjerite ta dva resursa da biste saznali kako prilagoditi postojeću temu.
    • Alternativno, možete odabrati višenamjensku premijsku temu koja se može prilagoditi pomoću korisnog sučelja (bez kodiranja). X tema je dobar primjer takvog.
  • Instalirajte neke od najpopularnijih i najboljih dodataka za dodatne značajke.

b) “Dubina puta”

  • Započnite učenjem WordPress-a putem internetskog tečaja. Treehouse nudi fantastičnu.
  • Odaberite svoju temu i dodatke baš kao gore. S druge strane, izradite svoju temu iz temelja.

Na kraju, WordPress je vjerojatno najsvestranija platforma web stranica na tržištu. Pomoću nje možete izgraditi gotovo bilo koju vrstu web mjesta, ne samo blogove ili jednostavne poslovne stranice. Evo popisa 47 (!) Različitih načina korištenja WordPressa, samo da biste razmišljali.

Joomla i Drupal

Iako se malo razlikuju jedni od drugih, Joomla i Drupal izvrsni su sustavi za upravljanje sadržajem za naprednije web projekte.

Nisu tako snažni dizajnirani, ali su vrlo prilagodljivi i sposobni za rukovanje bilo kojom vrstom web mjesta koja možda imate u planu.

Ponekad, ovisno o složenosti vašeg projekta, može im trebati puno više vremena za savladavanje i mnogo više truda u tome.

Za detaljniji trening postoje sjajni tečajevi na Lynda.com, i za Joomla i za Drupal.

Stvari koje treba pripremiti nakon ovog poglavlja:

  • Prvi je nacrt vaše web stranice u potpunosti sastavljen, bez obzira jeste li odlučili koristiti WordPress ili neku drugu platformu.
  • Pobrinite se da je u skladu s vašim početnim ciljevima, ciljnom publikom i da pruža dobar UX.

POGLAVLJE: Dizajn za mobilne uređaje

Više od 60% ljudi koristi mobitele i tablete za pregledavanje interneta

Odzivnost mobilnih uređaja sada je vrlo važan aspekt izgradnje web stranica, vjerojatno više nego ikad prije.

Evo o čemu se radi u čitavom izdanju:

U osnovi, trenutno više ljudi koristi mobilne uređaje za pristup internetu kao ikad prije. Zapravo se procjenjuje da je sada više korisnika mobilnog interneta nego korisnika internetskih računala (75,1% u odnosu na 52,7%).

Ali postoji problem.

Nije svaki dizajn web stranica optimiziran za gledanje na mobilnim uređajima odmah iza vrata.

Neki uobičajeni problemi uključuju:

  • fontovi su premali,
  • sam izgled uopće ne prilagođava manjem zaslonu,
  • ili tehnologiju koja se koristi za izradu web mjesta koja nije dostupna na mobilnim uređajima.

Tu se pojavljuje ideja mobilnog odziva.

Odgovarajuća web lokacija reagira na okruženje u kojemu se gleda. Ako je to stolno računalo, web stranica se prikazuje na određeni način. Ako je mobilni, prikazuje se na drugi način.

Evo boljeg objašnjenja: Što je, dovraga, web dizajn?

Dakle, stvar koju trebate učiniti upravo sada je provjeriti i provjeriti funkcionira li vaša web lokacija na mobilnim uređajima. Upotrijebite svoje uređaje da biste to provjerili, ali isprobajte i Googleov test za mobilne uređaje ili preskočite alat poput Responsive Design Tester.

Ako postoje problemi, trebate ih riješiti.

Neka rješenja:

  • Odgovarajući web dizajn – upute
  • Kako web stranicu učiniti odgovornom za otprilike 15 minuta

POGLAVLJE 8: Objedinjavanje svega

Znate osnove, sada je na vama red

Čekaj, skoro smo tamo!

Ovo je posljednje poglavlje našeg prilično dugog putovanja.

U ovom trenutku trebali biste imati izgrađenu prvu web stranicu … Bilo da je to s WordPressom, ručno izrađenim HTML / CSS-om, nekim graditeljem web mjesta ili bilo kojim drugim alatima koje ste odabrali za posao..

Ukratko, čestitke! Ali još uvijek vrijedi učiniti nekoliko stvari:

  • Dvaput provjerite stvari o kojima smo razgovarali u poglavljima 1 i 2. Pazite da ciljevi doista djeluju za krajnjeg korisnika i da web lokacija nije zbunjujuća.
  • Potvrdite strukturu koda putem W3C usluge provjere markiranja.
  • Provjerite nema li sigurnosnih problema na web mjestu. Za to koristite Sucuri skener.
  • Dobijte povratne informacije od zajednice. Provjerite što drugi ljudi misle o vašem radu. Forumi na stranici mogu biti dobri za to.

Ako vam je ovo prvo čitanje ovog resursa, onda vas zaista potičemo da mu se vratite nekoliko puta i tretiramo ga kao referentnu datoteku za vaše daljnje obrazovanje.

Kao što smo rekli na početku, slobodno koristite TOC i kretajte se od poglavlja do poglavlja i resursa do izvora kako smatrate prikladnim..

Konačno, znatiželjni smo … koji je vaš najveći izazov kada je riječ o izradi web stranica, razvoju web stranica ili dizajnu? Molimo podijelite u komentarima ili putem Twittera. Svi smo uši!

Hvala na čitanju, sjajni ste!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map