Osnove veb dizajnadr Suzana Marković, dipl.ing. el.suzana.markovic@bss.edu.rs

Osnovni aspekti veb dizajna

SVRHA(ekonomičnost)

FORMA(vizuelni

elementi)

SADRŽAJ

FUNKCIJA(tehnologija)

Dinamika veb-sajta

Veb-sajt je aktivna i dinamična tvorevinaSadržaj dobrih sajtova redovno se ažuriraSajt koji sadrži zastarele informacije gubi na

svojoj svrsi i nameniOdržavanje sajta zahteva stalna vraćanja i

reviziju kompletiranih delovaUspešne firme sebi nikad ne bi smele da dozvole

da informacije na sajtu budu starije od nekoliko dana, bez obzira o kakvoj vrsti poslovanja se radi

Podela sajtovaPrema sadržaju - nameni:

Personalni (lični), Komercijalni - imaju za cilj da predstave proizvode i usluge koje nudi

vlasnik sajta, Informativni - npr. www.wikipedia.org koji predstavlja najveću online

enciklopediju, Blogovi – vlasnik postavlja temu, a ostali komenatrišu npr.

www.blog.rs, Forumi - za razliku od bloga imaju unapred zadate oblasti o kojima se

diskutuje, a započinju ih korisnici. Socijalne mreže - za masovno međusobno povezivanje ljudi, razmene

informacija, fotografija i drugih ličnih podataka, Facebook, Twiter,… Veb-sajtovi za deljenje sadržaja - za postavljanje odgovarajućih

sadržaja na internet (slike, muziku, video klipove...) i te sadržaje dele sa drugima. Najpoznatiji međi takvim web sajtovima je Youtube.

Podela sajtova Prema interaktivnosti sa posetiocima:

Statički - Najčešće se rade u HTML-u, odnosno u XHTML-u u kombinaciji sa CSS-om. Nemaju interaktivnost sa posetiocima.

Dinamički - omogućavaju interakciju sa posetiocima, prikupljaju podatke o njima i njihovim interesovanjima. Obično se rade u nekom programskom jeziku (npr. php) i kôd im se izvršava na serveru, pa tek potom šalje browser-u.

Prema tehnologiji izrade: HTML, XHTML, veb-sajtovi sa CMS-om, Flash veb-sajtovi,…

Odluka o vrsti veb-sajta zavisiće od potreba ali i finansijskih mogućnosti klijenta.

Razvoj veb-prezentacije

Konstruisanje podrazumeva primenu jednog od modela:Vodopadni,Inkrementalni,JAD, RAD,…

Definisanje i planiranje

prezentacije

Informaciona arhitektura

Dizajn prezentacije

Konstruisanje prezentacije

Marketing prezentacije

Praćenje, evaluacija i održavanje

Definisanje i planiranjeRazvojni tim

u realnim uslovima često se razvojni tim svodi na par, a neretko i na samo jednu osobu

Tehnologijapretraživači i operativni sistemi, brzina protoka

informacija, dinamički HTML, JavaScript, Java applets, Style sheets,…

Veb server podrškaDa li postoji veb server unutar firme ili će se koristiti

veb server ISP-a, dostupnost veb adrese, ograničenja po pitanju veličine prezentacije ili količine protoka,…)

Budžet – Za razvojni tim, za održavanje,…

Definisanje i planiranjeDefinisanje cilja prezentacije

Da li je cilj impresionirati druge veb dizajnere? Da li je cilj zadovoljan klijent? Da li je cilj dobar profit?

Namena (svrha) sajtaNajčešće – pružanje informacija i obaveštenja o nekoj

usluzi ili proizvodu

Znati šta korisnici sajta žele – koji je njihov ciljDostupnost sajta na svim raspoloživim

uređajima (engl. responsive design)http://stunningcss3.com/code/bakery/index.html

Definisanje i planiranje

Osmisliti osnovne opcije i izgled Kompletna prezentacija mora biti u jednom

(prepoznatljivom) stilu ili „template“-u Uvek je poželjno ostvariti link ka sličnim

sadržajima Višejezička podrška je poželjna

Planiranje i analiza

Imati predstavu o stilu i značenju veb-sajta Prepoznavanje ciljnog korisnika pomaže pri

definisanju korisnikovih ciljeva i ponašanja Zašto posetioci dolaze na sajt? Šta već znaju o toj temi i šta je moguće još

ponuditi? Da li žele štampanu informaciju?

Definisanje i planiranje

Pregled sajta planiranje stranica sajta, kako su grupisane i

kako će korisnik posetiti sve postavljene stranicekoji globalni ili top-level linkovi treba da se nalaze

na svakoj straniako postoji više sekcija treba obezbediti

jednostavan način da se pronađe željenaoptimizovati sajt, tako da se ključni pojmovi i

informacije lako uočekoristiti principe grafičkog dizajna (jednostavnost,

kontrast, prazan prostor, balans i poravnanje)

http://www.grf.bg.ac.rs/studije

Projektovanje vizuelnog sadržaja veb prezentacije

Adekvatna podela informacija na odgovarajuće grupe

Relevantost elemenata iste grupe Uniformne oznake za grupe Konzistentnost, odnosno kontinuirana upotreba

prethodno definisanih dizajnerskih rešenja Označavanje informacija - sugeriše posetiocu

prirodu informacije Projektovanje informacionog sadržaja – logička

podela informacija posle njihove analize

Konstriusanje prezenatcije

Faza projektovanja i programiranja „frontend“ i „backend“ delova sajta.

Izbor tehnologija i softverskih alata Ako je u pitanju lična prezentacija (takozvani sajt

od pet strana tipa vizit karte) dovoljan je CSS/HTML kod.

Ako je u pitanju složeni poslovni portal koriste se različite tehnologije: .net, php, baza podataka (MS SQL, MySqL…)...

Implementacija sajta

Realizacija sajta Hand coding (HTML kodiranje) - način ručnog

kodiranja i kreiranja sajta u tekst editoru (npr. Notepad, Notepad++) poznavanjem HTML koda

WYSIWYG (What You See Is What You Get) - vizuleni način kreiranja sajtova (Dreamweaver, SharePoint Designer)

CMS (Content Management System) – kreiranje i upravljanje sadržajem (WordPress, Joomla…)

Poznavanjem HTML koda mogu da se isprave:sve nesavršenosti WYSIWYG editorasve browser nekompatibilnosti čime je omogućena

ravnopravna vidljivost u svakom veb-pretraživaču

Testiranje sajta Da li posetioci mogu pronaći ono što traže na sajtu? Da li je kompatibilan sa aktualnim veb browser-ima? Da li se jednako otvara na svim uređajima? Da li svi linkovi rade? Da li je svaka strana linkovana na naslovnu stranu? Da li je kod tačan? Da li se sajt otvara dovoljno brzo? Da li je sajt uvek dostupan? Da li je tekst čitljiv i za slabovide korisnike? Da li je meni jezgrovit i precizan? Sajt mora da radi brzo i bez greške i pristup sajtu mora biti

100%.

Testiranje sajta. Validatori 1. HTML Validator . Ovaj HTML Validator proverava i

obeležava ispravne i neispravne delove dokumenta HTML, XHTML, itd.

2. CSS Validator . CSS Validator – proverava i potvrđuje CSS stilove ili dokumente korišćenjem CSS stilova.

3. Link Validator . Analizator linkova tj.veza (hyperlinks) u HTML/XHTML dokumentima. Jako je koristan jer pronalazi prekinute i neispravne veze.

4. RSS Feed Validator . Ovo je W3C Feed Validation Servis, besplatan je i proverava RSS sintaksu.

5. Multipage Validator . Ovaj validator skenira ceo sajt, proverava greške i tzv. "mrtve linkove" a takođe i generiše izveštaj o testiranju u realnom vremenu.

Testiranje sajta. Pretraživači i brzina

Sajt mora jednako dobro da se prikazuje na svim pretraživačima.

Provera sajta može otkriti greške koje smetaju u procesu SEO pozicioniranja sajta.

Browsershots . Moćan servis za testiranje veb-sajta na svim pretraživačima i na većini operativnih sistema.

Brzina sajta je veoma važna kako za posetioce, tako i za pretraživače.

Sajt opterećuju velike slike, CSS, JS fajlovi, pogrešni <div> tagovi i ostalo.

http://www.webpagetest.org/ - testiranje performansi i mogućnosti sajta

Veb-hosting Veb-hosting je servis koji omogućava smeštanje HTML

dokumenta veb-sajta i ostalih fajlova na veb server Ovim se sajt pušta u rad i čini dostupnim svima na

Internetu Može se definisati i kao iznajmljivanje prostora na veb

serveru Pri izboru provajdera važna je tehnologija koju on

podržava, (da li će sajt raditi korektno na datom provajderu)

Raspoloživi prostor na serveru zavisi od izabranog hosting paketa, pri čemu pored trenutne veličine sajta treba uzeti u obzir i mogućnost proširenja, odnosno prelaska na neki veći hosting paket.

Postoje i besplatni veb hosting servisieHost, Web.com, iPage…

Marketing prezentacije Internet marketing uopšteno predstavlja korišćenje

pretraživanja i prezentovanja na Internetu u cilju sticanja profita.

Kreiranje sadržaja za online promociju Baneri na portalima koji se tiču ciljne grupe Forumi - kanal za dobijanje potrebnog feedback-a, blaža forma

promocije Youtube kanal za „kačenje“ klipova koji objašnjavaju detalje

proizvoda itd.

Vođenje naloga na društvenim mrežama LinkedIn, Twiter, Facebook oglašavanje, …

Google oglašavanje Google sa svojim AdWords sistemom oglašavanja

Radio, štampa, TV

Google AdWords

„Mogu li ja na Guglu da budem prvi u pretrazi?” Odgovor je DA, može pomoću Google AdWords-a. Spada u nešto što se zove plaćeni saobraćaj (paid

traffic). Cena je po kliku – minimum 1 cent. Funkcioniše po principu aukcije, odnosno “ko da

više”. Quality score je broj od 1 do 10 koji određuje sam

Google nakon nekog vremena trajanja kampanje, i on opisuje koliko je reklama relevantna, tj. koliko vodi čoveka na ono što je baš tražio.

Promocija veb-sajta –marketing prezenatcije

Privlačenje korisnika na sajt:prijavljivanje na Internet pretraživače, ubacivanje meta tagova, razmena linkova sa drugim sajtovima, Npr. servis Google mapa – Google omogućava

besplatno obeležavanje lokacije firme na mapi sveta, pa čak i da postavljanje slike proizvoda i video snimaka

Prijavljivanje na pretraživače

Nakon kreiranja i postavljanja sajta na domen on neće biti vidljiv u Google pretrazi.

Koraci za omogućavanje vidljivosti su: Posetite ovaj link:

http://www.google.com/addurl/?continue=/addurl Ukucate URL (adresu) vašeg sajta. Ukucate antibot slova/brojeve Pritisnete ADD URL.

Za prijavu na Bing ili Yahoo uputstvo: http://itobuka.blogspot.com/2013/05/kako-prijaviti-sajt-na-poznate.html#ixzz4v1TLxZls

Kako povećati vidljivost sajta

Izbor dobrog URL-a (u skladu sa poslom)To je prvo mesto koje Google gleda da razume sajt,

sazna o čemu je i tako ga rangira.

Naslovi i opisi svake stranice Jednom kad se sajt pojavi na rezultatima pretrage,

pretraživači će čitati naslov i opis da nauče o čemu je sajt i odlučiti da li da ga provere.

Označiti i opisati slikeDodavanje alt-atributa slikama pomaže pretraživačima

da kategorizuju izabrane slike, bolje je razumeju, što dovodi do boljeg SEO rangiranja.

Kako povećati vidljivost sajta

Kvalitetan sadržaj - ključne reči i fraze koje će posetioci sajta koristiti u potrazi za sličnim sajtovima

Promovisanje sajta na relevantnim domaćim direktorijumimadirektorijumi (adresari) sadrže linkove ka drugim

veb sajtovima grupisanih po sadržaju. mogu izlistati link ka vašem veb sajtu a ta usluga

se nekada plaća, a nekada je besplatna pojedini sajtovi mogu zahtevati povratni link ka

njima na vašem veb sajtu.

Meta tagovi

Meta tagovi su informacije smeštene u "head" prostor veb strana.

To su HTML tagovi koji pružaju informacije ili brauzeru ili nekom pretraživaču o sadržaju veb strane.

Meta tagovi su važni za indeksiranje sajta. Unutar meta tagova u zaglavlju se navodi opis i ključne reči

radi lakšeg indeksiranja. Uvek je poželjno imati ključnu reč (ime kompanije i sl.) unutar

URL adrese. Mašine za pretraživanje koriste meta tagove radi rangiranja sajta u rezultatima pretrage. Najvažniji tagovi za pretragu su: TITLE – iako nije meta tag,

DESCRIPTION,

KEYWORD.

<title>Универзитет у Београду, Електротехнички факултет</title>

<meta name="description" content="Elektrotehničkifakultet, Univerzitet u Beogradu" />

<meta name="keywords" content="ETF, beograd, srbija" />

Primer upotrebe meta taga

https://www.metatags.org/meta_name_robots

Meta tagovi

<meta name="robots" content="index, follow">Indeksira se ceo sajt, a ne samo prva stranahttps://www.wordstream.com/meta-tags

<meta name="keywords" content="text">https://www.metatags.org/meta_name_keywords

<meta name=„description„ content=„………………“>https://seoptimizacijasajta.com/seo-optimizacija-meta-opisa/

Indeksiranje Google i ostali pretraživači, na veb stranici “vide”

samo tekst. Vizuelni sadržaj veb stranice za njih ne postoji

ukoliko nije opisan tekstom. Zato je “optimizacija slika za veb” borba za vidljivost i bolju poziciju u Google pretragama.

Za bolje indeksiranje, poželjno je dodeliti ALT tag svakoj slici na sajtu, jer se prema njemu indeksiraju slike na image pretraživačima (npr. Image Search na Google-u).

Dobro je koristiti Robots.txt, tekst fajl koji se smešta u root direktorijum sajta na veb serveru (pretraživači ga prvo pregledaju i u njemu se navodi šta od sadržaja se indeksira).

Robots.txt

Robots.txt fajl je običan tekstualni fajl pomoću koga je moguće dati određene instrukcije pretraživačima ili veb robotima u pogledu toga koje stranice na sajtu da indeksiraju, a koje ne.

Npr. Google ima svoje veb robote tj. programe koji pretražuju internet i indeksiraju sve veb stranice na koje naiđu.

Pomoću robots.txt fajla moguće je reći Googlu da neku stranicu ili ceo direktorijum ne indeksira i samim tim ne prikazuje u rezultatima pretraživanja.

Ne koristiti robots.txt fajl za skrivanje važnihinformacija na sajtu.

Zašto je nužno optimizovati veb-sajt?

Kod dobro optimizovanih veb-sajtova više od 80% posetilaca dolazi upravo preko pretraživača. Retko ko pamti adresu nekog veb-sajta.

Osnovni cilj optimizacije veb-sajta - SEO (Search Engine Optimisation) je dostizanje TOP 10 pozicije u rezultatima pretrage za određenu ključnu reč.

Cilj je doći na prvu stranu Google-a za ključnu reč koja predstavlja traženi veb-sajt. Za komercijalne veb-sajtove to je od izuzetnog značaja jer

ima direktnog uticaja na poslovanje.

Ključne reči i optimizacija Google (i drugi pretraživači) koristi preko 200 kriterijuma po

kojima vrši rangiranje veb-sajtova u rezultatima pretrage. Kriterijumi rangiranja i algoritmi po kojima se rade su jedna od

najstrože čuvanih poslovnih tajni. Optimizacija veb-sajta najlakše se radi u toku same izrade veb-

sajta. Jedan od najvažnijih faktora dobre optimizacije je jedinstven i

kvalitetan tekst na internet stranicama. U tim tekstovima, bitno je prepoznati ključne reči koje će

posetioce dovesti na dati sajt. Svaka veb stranica treba da ima jednu glavnu ključnu reč

(ključni izraz) i više sekundarnih ključnih reči (ključnih izraza). Najveću pažnju treba posvetiti naslovnoj stranici, gde treba da

se nađe glavna ključna reč za ceo veb-sajt.

Podela SEO optimizacije

On-site SEO:ono što se radi unutar veb stranica: pravilna

upotreba META, alt, title h1 do h6 tagova, optimizacija sadržaja, pravilna struktura stranice, opisi, naslovi itd.

Off-site SEOsve što se radi na drugim veb-sajtovima:

backlinks (povratni linkovi), razmena banera i linkova, prijave u razne veb direktorijume, profili na društvenim mrežama, postavljanje objava za medije na specijalizovane portale i drugo.

Korisni linkovi

https://seoptimizacijasajta.com/on-page-seo-optimizacija/

https://seoptimizacijasajta.com/kako-optimizovati-slike-za-web/

https://searchengineland.com/when-good-seo-becomes-bad-information-architecture-47373

Praćenje, evaluacija i održavanje

Pre potpisivanja ugovora sa Pružaocem Internet usluga (ISP) obavezno se raspitati o uslugama analize posećenosti sajta!!!

Održavanje prezentacijeBackup i arhiviranje prezentacijeGoogle Analytics – besplatan servis

https://www.google.rs/intl/sr_ALL/analytics/index.html

Koristan link http://www.statcounter.com/