Web sajt – ko kako i zašto ga pravi?
Pre nego krenemo da se bavimo teorijom i principima dizajna web sajtova napravićemo mali uvod o tome šta je veb-sajt uopšte, iako to svi znamo jer svakodnevno koristimo internet ipak retko ko razmišlja o tome malo dublje. Prvi veb sajtovi su se pojavili početkom 90-ih godina prošlog veka tačnije 1991. godine i to je usko vezano i sa nastankom HTML-a kao jezika i za to je zaslužan Tim Berners Lee koji je za potrebe CERN-a napisao ovaj jezik da bi lakše delili tekstualne materijale između sebe.
Na početku samo da se osvrnemo i na internet kao globalnu mrežu koja služi za razmenu podataka i za pristup internetu potrebna nam je adresa (IP – internet protocol) i da bi sve to bilo što lakše uvedeni su domeni kao tekstualni ispis imena vašeg sajta. Za prebacivanje IP broja u tekstualni naziv domena koristi se Domain Name System (DNS). Podatke držimo na serveru koji je zapravo tamo neki udaljeni računar gde smeštamo naše fajlove sajta i to se zove hosting koji ima instalirane određenje softvere koji nam omogućuje lako korišćenje servera. Kada kupimo kod hosting provajdera domen i hostinge DNS serveri su automatski podešeni, ali kada to nije slučaj imamo npr domen od radnije i kupimo kod drugog provajdera hosting, onda moramo da usmerimo domen ka konkretnom serveru, u praksi unesemo odgovarajuće DNS servere koje dobijemo od hosting kompanije. Naša preporuka za ovaj posao je Contrateam, što zbog vrhunske usluge s tehničke strane, tako i zbog podrške koja je početnicima veoma važna.
Važno je napraviti razliku između veb stranice i veb sajta jer je veb sajt zapravo skup stranica koje su povezane iinkovima, ali u poslednje vreme su veoma popularna jednostranična rešenja (one page) iz prostog razloga ako je prezentacioni sajt u pitanju prosto ceo sadržaj je je na jednom mestu (stranici) i “naterate” posetioca da pogleda sve, pod uslovom da mu nije “mrsko” skrolovanje. Upravo zbog ovakvih i sličnih stvari i započinjemo serijal o principima veb dizajna i kako možemo da zadovoljimo klijenta, jer klijenti često hoće “gomilu sadržaja” a da se sve to spakuje i da nema skrola i da bude pregledno, zapravo veoma je često potrebna i edukacija klijenta kako tj na koje načine se može prikazati njegova potreba, jer to sve zavisi od kontenta i njegovog obima.
Da bi pristupili veb sajtu negde na internetu potreban nam je veb prelgedač izvorno jel tako browser koji komunicira sa serverom i vrši dobavljanje podataka (serviranje) i sve to prikaže kako su veb dizajneri i programeri napravili da izgleda lepo grafički. Unosom veb adrese zatražimo željeni sajt i njegov sadržaj. Poznati softveri (pregledači) su: Google Chrome, Microsoft Edge, Safari, Mozilla Firefox, Opera… Postoje sitne razlike u prikazivanju nekih HTMl elemenata, ali to svakako kontroliše CSS. Tako i sva pravila CSS-a nisu podržana u svim pregledačima i iz tog razloga je porebno biti u toku sa Konzorcijumom world wide weba koji se bavi standardizacijom.
Vrste veb sajtova
Možemo da napravimo podelu i u smislu jezika u kojima su pravljeni. I prvo su to klijentski jezici jer se izvršavaju na računaru posetioca i tu su već dobro poznate kombinacije: HTML, CSS. JS, Jquery…Da bi posetioc video sajt potreban mu je veb pregledač (browser) i ono što je je interesntno ceo kod ovakvog sajta možemo videti u pregledaču klikom na desni klik i odabirom opcije View page source.
Druga vrsta sajtova su veb sajtovi napravljeni u tehnlogijama koje se izvršavaju na serveru: PHP, Java, Python, Go, Ruby, Perl….Neophodan je server da bi se izvršio kod i u većini slučajeva i baza podataka. Ovakvi sajtovi su korisni kada imamo nekakve funkcionalnosti tipa web prodavnica, oglasnik…ali i i dinamički sadržaj u svakom slučaju neophodnan im je html i css da bi se prikazao sadržaj u njima napisan.
Druga i važna podela je na statiče i dinamičke sajtove. Piscu ovih redova je ovo bilo takođe maglovito na početku (smeh). Ovo se lako razumeva kada se krene raditi i oseti se pod prstima.
Statički veb sajtovi se prave pomoću jezika HTML i CSS, koji su u samom zečetku bili jedan jezik i sam CSS je bio ugrađen pisao se inline, sada je to na nivou svetogrđa (smeh). Promene nisu toliko česte kada koristimo ovaj pristup i kao prezentacija bez novosti, bloga tj kontenta što se s vremena na vreme “objavljuje”. Najveći problem ovakvih sajtova što se sve radi peške mnogo je linija koda koje se ponavljaju, nije optimizovan pre svega HTML, ne odvajaju se templejti ili delovi stranica već se sve piše na svakoj stranici, ovo je najbolje shvatiti kao polaznu tačku iz koje možemo da gradimo dublje sajt koristeći PHP, JS, WordPress. Ali ima potrebe za ovakvim sajtovima, postoje subjekti koji hoće da postave zapravo svoju prezentaciju firme ili neke organizacije i da im to služi da pošalju link umesto PDF-a, sa druge strane imaju email vezan za domen. Sve u svemu viđao sam dosta poslova na Upworku koji su baš izrada statičkog sajta. A sa druge strane znam firme koje nemaju svoje Frontend odeljenje već outsorsuju druge firme za HTML i CSS. Ali svakako je preporuka ići dalje sa učenjem iako kao top majstor u CSS-u možete naći lako posao, ali da baš “razbijate”.
Dinamički sajtovi imaju bazu podataka. Možete to shvatiti na primer plastično da na istu strukturu HTML-a možete iz baze podataka dobiti različit sadržaj, zapravo na strukturu koja je statička mi nadograđujemo sajt korišćenjem backend jezika. Uzmemo strukturu obavijemo je nekom petljom i na određeni zahtev zahtevamo sadržaj. Zatim koristimo funkcije i određene delove koda odvajamo kako nam treba ili kao temlejt ili kao funckionalnost… Kada korisnik zatraži neki sadržaj zahtev se šalje serveru i taj sadržaj mu se servira. Na primer imamo stranicu vesti i dodajemo nove vesti u bekendu, na frontendu će se dodati u redosledu hronološkom od najnovijih ka najstarijim, tako i ako imamo veb šop, oglasnik bilo šta imamo izlistan sadržaj pomoću nekog bekend jezika. Ugnjezdimo jednu vest, proizvod, oglas lupom (petljom) i iz baze vadimo naslove, kad je izdato, kategoriju, sliku, opis cenu…..Znači ne dodajemo u kodu takav sadržaj već ili u bazu podataka ili kroz dashboard ako je neki CMS (Content Management System). Odličan primer dinamičkih sajtova su i društvene mreže gde se menja sadržaj stranica po želji korisnika sajta, nije isti sistem koji sam opisao malopre, iako i na blogovima ili veb prodavnicima korisnik sajta može da komentariše, ostavi review i slične akcije. Takođe interesantni su veb sajtovi događaja, konferencija ili festivala, gde na primer dolaskom narednog događaja može potpuno da se izmeni stranica, jer se poziva iz baze podataka događaj koji je naredni, a onaj koji je prošao se ne vidi. Ne mora da se menja potpuno prikaz može u prvi plan da dođe novi događaj, ali da se vide i prošli događaji i to može da bude samo deo prikaza stranice.
Veoma interesante su i jednostranične veb aplikacije (SPA – single page aplication) to je zapravo jedna stranica veb sajta koja poseduje stanja i u zavisnosti na kom delu aplikacije se nalazimo dobijamo određeni prikaz. Za ovakve poslove koristimo Angular, React, Vue, Laravel….Ali i derivate kao što su Gatsby JS, Next JS i drugi….Odlikuje ih velika brzina i veoma su tražene ovakve tehnologije na tržištu.
Web pretraživači
Već dugo vremena važnu ulogu sa omasovljenjem upotrebe veb sajtova, teško je pronaći subjekt bilo koje vrste koji nema sajt (smeh) ili se prave sajtovi novima ili se radi redizajn. I važno je da taj sajt bude vidljiv u pretraživačima kao što su: Google, Yahoo i Bing koji su i 3 glavna pretraživača, ali je Google zapravo preko 90% ostali dele ostatak “kolača”. Sami sistemi rada pretraživača nisu skroz poznati (obavijeni su velom tajne, smeh) ali se u biti odnose na softvere koji pretražuju internet i zovu se Spider-i koji pretražuju i prikupljaju informacije i ova faza se zove Crawling. Zapravo je ovo otvorilo velike mogućnosti za posao Search engine optimizacije koji su postali jednako važni kao i izrada samog sajta, jer džaba nam sajt ako ga niko ne vidi. Ako želite da naučite ovo da radite imate veliko super stara Nedima Šabića koji se skoro 2 decenje bavi ovim poslom njegovu SEO školu koja je jedna od najboljih online edukacija koje postoje na internetu.
Pomenuli smo spidere koji kupe informacije o našoj veb lokaciji kao što je kvalitet, relevantnost i sam sadržaj. Sadržaj je jedna od najvažnijih stavki, ako nemate sadržaja teško će vaš sadržaj organski da bude prepoznat od pretraživača. Zato je važno da pored osnovnog sadržaja koji je opisan imate i nešto kao blog, novosti gde pišete na teme vaših usluga ili onoga što promovišete. I važna je relevantnost, da to prepoznaju i objave ili linkuju i druge relevantne veb lokacije.
Treba se baviti odabirom ključnih reči u niši u kojoj se nalazite jer sam pretraživač funkcioniše na bazi unošenja ključnih reči i fraza i izbacuju rezultate pretrage.
Ono što svi želimo je što bolje i “višlje” mesto u pretrazi, naravno sad postoje i instant načini kroz oglašavanje na društvenim mrežama kao i na google-u.
I na kraju šta je potrebno da bi bili dizajner (a bogami i programer) veb sajtova
Ovaj posao se menja kako se “dešava” razvoj tehnolgija veba. Trenutno postoje 2 osnovna pravca to je izrada ideje i izgleda sajta u alatima Figma, In vison, Photoshop, Illustrator, Adobe XD i ovaj deo je više umetnički i rade ga ili grafički dizajeni ,a često i umetnici. Dok je drugi segment set alata za prebacivanje grafičkog izgleda u sam veb sajt i tu u osnovi rade HTML i CSS, ali sa dodatkom Javascripta za neke delove kao što su slideri, mobilna navigacija accordioni tj svi sadržaji koji se uslovno prikaziju ili su prosto interaktivni. Treća opcija je korišćenje CMS sistema kao što su WordPress, Joomla, Drupal, Magento, Webflow…..Popularan način je da se to radi pomoću page bildera u WordPressu koji zauzima bezmalo 43% svih sajtova na svetu i to su Elementor, Beaver builder, Themify, Divi, Oxygen…..Ovaj sistem ima određena ograničanja i naš savet je Custom WordPress pristup, gde od otkucanog HTML-a i CSS-a sa ugrađenim PHP funkcijama u WordPressu dobijamo jedan potpuno dinamičan sajt koji je potpuno u našoj kontroli. A užasno je zabavno usput jer se pored krajnjeg izgleda bavite i razmišljanjem kako onaj ko održava sajt da to radi u komandnoj tabli, pored fronta gradimo i u bekendu izgled veb sajta tj načina kako će se unositi sadržaj i to su mahom Custom polja ili Custom post tajpovi gde izbacujemo namenski sadržaj na određenim mestima koja je ništa drugo nego prilagođeni blog post. A dolaskom Gutenberg editora možeo veoma lepo da stilizujemo takce stranice dok možemo i tu da napravimo namenski izgled sa Custom poljima…Veoma zabavno zar ne, mada verovatno teško razumljivo nekom ko nikada nije video WordPress (smeh).
Kao poseban pravac su veb aplikacije i prevazilaženja „običnog“ sajta koje rade programeri, a ne veb dizajneri, iako im se jedan veliki deo posla preklapa.
To je bilo ukratko o veb sajtovima, ko ih pravi, kako i zašto, a krećemo dallje sa serijalom objava na društvenim mrežama gde ćemo pisati o teoriji i principima veb dizajna. Do čitanja 😉
