Lekcija 5

Web sajt
 Web sajt
• Predstavlja skup međusobno povezanih web stranica i
multimedijalnih dokumenata, koji se nalaze na
zajedničkom domenu
• – Web sajtu se pristupa pomoću web browser-a na
određenoj IP adresi ili URL-u.
Kojic, N., Web dizajn: HTML, CSS i JavaScript, Univerzitet Singidunum, Beograd, 2018

http://gs.statcounter.com/browser-market-share
• Čemu služe web sajtovi?
• Fokusirani su na jednu, određenu temu ili namenu.
Vrste:
• Informativni
• Promotivni
• Za komunikaciju

Kojic, N., Web dizajn: HTML, CSS i JavaScript, Univerzitet Singidunum, Beograd, 2018
 Web portal
• Web portal je web sajt koji prikazuje informacije iz
različitih izvora
– Izvori su obično tematski grupisani
Vrste web portala
– Lični
– Državni
– Korporativni
– Medijski portali (Blic, Novosti, Kurir, ...)
Kojic, N., Web dizajn: HTML, CSS i JavaScript, Univerzitet Singidunum, Beograd, 2018
 Dodatno
• Knjiga : Web dizajn – HTML-CSS i JavaScript – Nenad
Kojić

• https://singipedia.singidunum.ac.rs/izdanje/42767-web-
dizajn-html-css-i-javascript
 Zašto je potreban Web sajt?
• Povećava vidljivost – Visibility
• Povećava doseg – Reach
• Pospešuje potrošačku usluga– Customer service
• Kvalitetnija borba sa konkurencijom – Competition
• Kredibilitet je na višem nivou - Credibility
Kreiranje Web sajta
(Ne)Planiranje
Aktivnosti pre razvoja sajta
Kupiti:
• Domen
• Hosting
• .biz—Rezervisano za biznis
• .edu—obrazovanje i univerziteti
• .gov—za državne institucije
• .info—info sajtovi
• .jobs—sajtovi za poslove
• .net—za mreže i internet provajdere
• .org—za nekomercijalne organizacije
• .com – za komercijalne organizacije
• 1. Insurance.com 35,6m
• 2.VacationRentals.com – 35m
• 3. PrivateJet.com – 31,18m
• 4.Internet.com 18m
• 5.360.com 17m
• 6.Insure.com 16m
• 7. Sex.com – 14m
• 8. Hotels.com – 11m
• 9. Fund.com – 9,9m
• 10. Porn.com – 9,7m
• 11. Fb.com – 8,5m
• 12. Business.com and Diamond.com – 7,5m
• 13. Beer.com – 10m
http://thenextweb.com/shareables/2013/08/13/15-of-the-most-expensive-domains-of-all-
time/
• http://stuffonix.com/top-10-expensive-domain-names-ever-sold/
https://uk.godaddy.com
• Registar nacionalnog Internet domena Srbije - Зашто је
.RS најбољи избор?

.rs .рс
https://www.youtube.com/watch?v=qo-wYrMC_YE
 RNIDS -Зашто је .RS најбољи избор?
• Prisustvo
• Dostupost
• Identitet
• Bezbednost
• Pripadnost
 Pravila za određivanje imena domena:
• Spojiti top 5 ključnih reči
• Jedinstvenost
• Ako se razmišlja globalno potreban je .com
• Lak i kratak za pamćenje
• Ime da bude povezano sa sadržajem
• Lak za brendiranje
• Izbegavati crtice i brojeve
 Dodatano:
• DIDS: Šta Google misli o .rs domenu?
• https://www.youtube.com/watch?v=o_1cNVf1jjM&feature
=youtu.be
• DIDS : Izbor pravog internet hostinga
• https://www.youtube.com/watch?v=fV1uAp8ATQI
• DIDS: Koraci do dobrog domena
• https://www.youtube.com/watch?v=K7UUejcWskI
 Dodatno
• https://instantdomainsearch.com/

• www.bustaname.com
• https://www.snapnames.com/

• https://archive.org/web/
Upamtite: Domen je samo adresa ne i
sajt!!!
 Hosting

Veljko Đurić: „ – Hosting je “kuća” vašeg sajta.

Domaćin svih vaših članaka, slika, video
materijala, baza, mailova itd. “

http://veljko.info/kako-da-napravim-sajt/
 Hosting - Vrste
• Lokalni – Nedovoljno brza konekcija – Samo za ličnu upotrebu
• InHouse – Svoj web server držimo u prostorijama hosting
kompanije – Odgovarajuća brzina konekcije – Upitna bezbednost
– Neoptimalna cena
• Shared – Na jednom web serveru se nalazi veliki broj web sajtova
različitih vlasnika – Ugovorna ograničenja (TOS)
• Dedicated – Virtual machine – Zakup celog servera
• Cloud – Skalabilnost
Kojic, N., Web dizajn: HTML, CSS i JavaScript, Univerzitet Singidunum, Beograd, 2018
 Šta je bitno za hosting?
• Količine prostora (obično se meri u gigabajtima),
• Maksimalan mesečni protok (bandwidth u gb, i predstavlja
količinu podataka koju tokom meseca sajt sme da ostvari)
• Broj MySQL baza (baze podataka)
• Broj e-mail naloga
• Broj dodatnih domena
http://adriahost.rs/
 Ivan Ćosić
• Proces – faze izrade web sajta :
• 1. Ideja
• 2. Planiranje
• 3. Dizajniranje
• 4. Kreiranje sadržaja https://www.linkedin.com/in/ivancosic

• 5. Programiranje
• 6. Lansiranje
• 7. Održavanje
http://www.slideshare.net/ivancosic/proces-izrade-web-sajta
 1. Ideja
• Istražiti i odgovoriti na pitanja:
1. Koja je ciljna grupa
2. Zašto naš sajt treba da postoji?
3. Koji je budžet?
4. Koji su rokovi?
5. Da li postoje sajtovi istog ili sličnog tipa?
Zašto naš sajt treba da postoji?

https://www.bleacherreport.com/about
 Koliki nam je budžet potreban?

http://progressivemedia.rs/kako-se-odreduje-cena-web-sajta/
Da li postoje sajtovi istog ili sličnog tipa?
 2. Planiranje
UREĐAJI

SADRŽAJ
EMOCIJE

IZGLED
http://www.givememarketing.com/wp-content/uploads/2012/04/Blog_01_Image_011.jpg
 3. Dizajniranje

Sve da bi posetioci bili „srećni“ dok koriste web sajt!!!

1. Odnosi se na proces kreiranje izgleda web stranice -
Grafički dizajn (vektorska i raster grafika)
1. Kreiranje strukure web stranica - UI (user interface –
dizajn interfejsa) i UX (user experience – korisničko
iskustvo) dizajn
- Navigacija
- Raspored elemenata na stranici
- Responsive design
Primer strukture web stranice
 Važno razumeti:
• Posetioci dolaze na sajt da traže informacije
• Sajt mora da ima smisla posetiocima
• Sajt mora da se jasno obraća posetiocima od samog
početka
Prilagodljivi dizajn - „Responsive design“
se odnosi na prilagođavanje web stranice
uređaju tj. ekranu
http://i.imgur.com/Ewgwz5k.jpg
http://adriahost.rs/wp-content/uploads/2014/07/cenovnik_dizajnera.jpg
 Ivanova Dizajn check lista
• Da li je dizajn u službi sadržaja ili odvlači pažnju?
• Da li dizajn pomaže u pregledu sadržaja?
• Da li je tekst čitljiv?
• Da li su slike efektne / da li dobro ilustruju sadržaj?
• Da li dizajn ima dovoljno praznog prostora?
• Da li su dobro iskorišćene boje?
• Da li pozadina sajta smeta ili dopunjuje utisak
• Da li su podnaslovi i specijalni stilovi dobro istaknuti u odnosu na tekst?
• Da li se dobro vidi u različitim pretraživačima?
• Da li se dobro vidi na mobilnim uređajima?
• Da li je navigacija intuitivna?
 4. Kreiranje sadržaja
• Web sajt ima samo nekoliko sekundi da izazove
interesovanje
• Kreirajte orginalan sadržaj (pričaćemo kasnije od SEO
copywriting )
• Vodite računa o naslovima (80% ljudi pročita naslov, a 20 %
čita tekst)
• Uvek je bitno da odgovorite na neko pitanje
• Informacije moraju biti tačne
 Tipovi web stranica
• Glavna strana – Prva strana – „Homepage“
• Kategorije – „Category page“
• Landing page
• O nama – „About us page“
Glavna strana – Prva strana – „Homepage“

• Govori korisnicima o čemu je sajt i šta on radi

• Treba da ima slogan (tagline) koji podržava sav sadržaj
• Sadrži najsvežiji i najvažniji sadržaj na sajtu
• Pomaže korisnicima da se orijentišu
www.singidunum.ac.rs
• www.dropbox.com
www.google.com
https://www.bleacherreport.com/
http://www.espn.com/
 Kategorije – „Category page“

Glavna stranica za svaku kategoriju na sajtu koja pomaže

korisnicima da se orijentišu i pretražuju sajt
https://sport.blic.rs/
 Landing page

Tip „category page“ koji ima specifični fokus ili CTA

(CALL TO ACTION) kao i detail/product page
http://mondo.rs/a1189646/Sport/Fudbal/Crvena-zvezda-sampion-Evrope-29.-maj-1991.html
 O nama – „About us page“
Treba da sadrži:
• Lokaciju
• Ko smo
• Kontakt detalje
• Radno vreme
• Našu priču i istoriju
• U čemu smo dobri i zbog čega
• Klijente
• Portfolio (timeline)
• FAQ
https://copa90.com/en/about-us
Pokušao da nađem sajt...
Ljudi sa ekrana čitaju 25% sporije nego sa papira

Uglavnom, kada se radi o tekstu za sajt treba koristiti samo

50% teksta koji bi se koristio za štampanu verziju.

KRATKE I JEDNOSTAVNE REČI, PARAGRAFI I

STRANICE
• ŠTA POSETIOCI RADE KAD ČITAJU TEKST:

1) Skeniraju tekst
2) Čitaju bullete
3) Traže ključne reči i poznate fraze
4) Čitaju ceo tekst kad ih interesuju detalji
5) Kliknu kad hoće interakciju
6) Vode se slikama koje vide u postu

http://www.fatdux.com/blog/2009/08/07/20-tips-for-writing-
for-the-web/
 Čitanje

• Ljudsko oko se kreće po strani u dva modeIa Z i F

• PRVI PARAGRAFI STRANICE ĆE DOBITI NAJVIŠE
PAŽNJE, zatim naslovi pa liste
• Naslovi treba da nose korisne informacije o sadržaju i
informacijama u sledećem paragrafu
• Najbolji su oni naslovi koji unapred najavljuju sadržaj
• SVE TREBA DA BUDE KRATKO I JASNO
Primer čitanja sadržaja na web sajtu
 Po Ivanu Ćosiću dobar web sadržaj je:
• Adekvatan
• Koristan
• Okrenut korisniku
• Jasan
• Konzistentan
• Kratak
• Relevantan
 Dodatno za pročitati
• https://blog.hubspot.com/marketing/elements-of-modern-
web-design-list
 Programiranje

Obuhvata kreiranje front-end i back-end koda

 5. Programiranje
• Obuhvata još:
• Kreiranje glavnih templejta
• Prebacivanje dizajna u stranice
• Izbor CMS-a
• Neophodne funkcionalnosti
• Povezivanje stranica sa bazom
• Punjenje osnovnim sadržajem
A šta je to “Front-end?

https://www.youtube.com/watch?v=iJR-TbIjb2w
 Šta je posao Front-end developera
• “U narodu poznatije kao “pravljenje sajtova”, front end veb
dev bavi se onim delom sajta ili veb aplikacije koji se
prikazuje u vašem pretraživaču
• Na primer, pojam se može odnositi na nekoga ko od
dizajnera dobija takozvani “mock up” iz fotošopa i
pretvara ga u stvaran sajt pomoću HTML-a, CSS-a i
eventualno JS-a. Ovde bi adekvatniji naziv bio “UI
developer”.”
Preuzeto sa: https://startit.rs/front-end-web-development/
ŠTAAA? MORAM
NEKE REČI DA
ZNAM I NA
ENGLESKOM
HTML 5

CSS 3
 HTML
• “Hyper Text Markup Language”,
• nije programski jezik, već jezik oznaka (eng. Markup -
Oznaka).
• HTML koristi oznake (tagove) da opiše različite elemente
internet stranice. Na primer, HTML oznaka <p> govori da
se radi o paragrafu teksta, dok oznaka <a> predstavlja
link.”
• Služi za strukturiranje web stranice po elementima,
http://wskola.blogspot.rs/2014/02/htmlcss-za-pocetnike-1-uvod-u-html.html
 CSS
• “Cascading Style Sheets”
• Skup vizuelnih stilova koji se koriste na sajtu
• CSS definiše stilove (izgled) svih HTML/XHTML
elemenata.
• CSS nije programski jezik već skup instrukcija koje
definišu izgled nekog HTML elementa.
• Odvojeno se kreiraju sadržaj i dizajn stranice.
 Back-end
• “Back end se odnosi na softver koji živi na serveru
• Back end web development tiče se poslovne logike koja
se izvršava na serveru i direktno komunicira sa bazom
podataka, dajući u isto vreme klijentskoj strani interfejs za
pristup tim podacima.”

Preuzeto sa https://startit.rs/back-end-web-development/
ŠTAAA? MORAM
NEKE REČI DA
ZNAM I NA
ENGLESKOM
CMS
 CMS
• “Content Management System”– Sistem za upravljanje
sadržajem

• CMS obuhvata:
- Baza podataka
- Interfejs prema bazi podataka
- Programski jezik u kom je pisan CMS (PHP,Node.net,
Java ...)
- Razvijanje grafičkog interfejsa za CMS
 CMS
• Wordpress
• Joomla
• Drupal
• “Custom CMS”
Razlika između “Front end” i “Back end”

https://www.youtube.com/watch?v=nMtgFZSdtwk
 6. Lansiranje
• Prebacivanje na glavni hosting
• Integracija društvenih mreža
• Reklamiranje
• Offline aktivnosti
 Offline aktivnosti

• URL na vizit kartama i promotivnim materijalima

• URL na uniformama
• URL na kompanijskim automobilima
 7. Održavanje
• Analiza poseta
• Testiranje brzine učitavanja
• Optimizacija sajta
• Optimizacija za pretraživače
• Punjenje novim sadržajima
 Testiranje brzine čitanja web sajta
• https://developers.google.com/speed/pagespeed/insights/
Gde se moj sajt nalazi u odnosu na
konkurenciju?

• https://www.similarweb.com/
http://www.similarsites.com/
 Rezime by Google

https://www.youtube.com/watch?v=EdUu_TNI5V0
 Dodatno
• Kako se prave ti sajtovi?
• Lazar Bošković
• https://www.youtube.com/watch?v=5OAyr3HlOfE