104
Dr Predrag Staletić PRIRUČNIK iz web dizajna Visoka škola elektrotehnike i računarstva 2012.

WebDizajn-Prirucnik

Embed Size (px)

Citation preview

Page 1: WebDizajn-Prirucnik

Dr Predrag Staletić

PRIRUČNIKiz web dizajna

Visoka škola elektrotehnike i računarstva2012.

Page 2: WebDizajn-Prirucnik

2

PRIRUČNIK IZ WEB DIZAJNA

Autor:dr Predrag Staletić

e-mail korespodencija:[email protected]

Izdavač:Visoka škola elektrotehnike i računarstvaBeograd, Vojvode Stepe 283

Za izdavača:Dr Dragoljub Martinović, direktor

Recenzenti:Prof. dr Miroslav LutovacProf. Dr Dejan Tošić

Četvrto, neizmenjeno izdanje (2012)

Nije dozvoljeno reprodukovati, snimati ni emitovati ni jedan deo ove knjige, bilo kojimsredstvom: elektronskim, optoelektronskim, mehaničkim ili elektronsko-mehaničkim,uključujući foto-kopiranje, snimanje i skeniranje, ili na bilo koji drugi način, bez pisanedozvole autora i izdavača.

CIP – Каталогизација у публикацијиНародна библиотека Србије, Београд

004. 4 ’ 27 : 004 . 738 . 1 ( 075 . 8 ) ( 076 )

СТАЛЕТИЋ, Предраг, 1952 –

Priručnik iz web dizajna / Predrag Staletić. – 4. neizmenjeno izd. – Beograd :Visoka škola elektrotehnike i računarstva, 2012 (Beograd : MST Gajić). – 104str. : ilustr. ; 30 cm

Tiraž 250. – Bibliografija: str. 103-104 i uz svako poglavlje.

ISBN: 978-86-7982-073-0

a) Web презентације – Дизајн – ВежбеCOBISS. SR-ID 193742860

Page 3: WebDizajn-Prirucnik

3

S A D R Ž A J

Prva vežba: Poslovni razgovori s klijentom ........................................................ 9Druga vežba: Zaglavlje web strane .................................................................. 15Treća vežba: Opisne strane ............................................................................. 21Četvrta vežba: Interaktivne strane.................................................................... 29Peta vežba: Strane sa često postavljanim pitanjima i odgovorima (FAQ) ........ 37Šesta vežba: Strane sa uslovima korišćenja intelektualne svojine ................... 43Sedma vežba: Strane namenjene štampanju................................................... 53Osma vežba: Vizuelni identitet kompanije ........................................................ 59Deveta vežba: Kompozicija fotografije.............................................................. 65Deseta vežba: Optimizacija fotografije za web ................................................. 75Jedanaesta vežba: Početna strana .................................................................. 81Dvanaesta vežba: Hosting servisi .................................................................... 89Trinaesta vežba: Publikovanje web sajta.......................................................... 95Bibliografija..................................................................................................... 103

Page 4: WebDizajn-Prirucnik

4

Page 5: WebDizajn-Prirucnik

5

PREDGOVOR

Priručnik iz web dizajna namenjen je studentima koji su izabrali predmet Web dizajn naVisokoj školi elektrotehnike i računarstva strukovnih studija u Beogradu. Sadržajpriručnika usklađen je sa nastavnim programom predmeta Web dizajn.

Izložena materija se realizuje kroz trinaest vežbi u računarskoj laboratoriji, opremljenojodgovarajućim softverskim alatima i povezanoj na Internet.

Zahvaljujem se recenzentima, prof. dr Miroslavu Lutovcu i prof. dr Dejanu Tošiću nasugestijama koje su mi bile dragocene u koncipiranju i pisanju priručnika.

septembra 2012. godine Autor

Page 6: WebDizajn-Prirucnik

6

Page 7: WebDizajn-Prirucnik

7

EVIDENCIJA VEŽBI(2012)

Ime i prezime studenta: ___________________________________________

Indeks broj: ______________ grupa: _____________________________

Vežba Datum potpis1. vežba2. vežba3. vežba4. vežba5. vežba6. vežba7. vežba8. vežba9. vežba10. vežba11. vežba12. vežba

EVIDENCIJA PRAKTIČNIH ZADATAKA

Lični sajt:

Komentar pre publikovanja Datum: Overa:

Komentar posle publikovanja Datum: Overa:

Ocena:

Komercijalni sajt:

Komentar pre publikovanja Datum: Overa:

Komentar posle publikovanja Datum: Overa:

Ocena:

Page 8: WebDizajn-Prirucnik

8

Page 9: WebDizajn-Prirucnik

9

Vežba broj 1

POSLOVNI RAZGOVORI S KLIJENTOM

¨ Odakle početi?

¨ Definisanje problema

¨ Prvi kontakt sa klijentom

¨ Radna beleška

¨ Pitanja koja mogu biti predmet razgovora

¨ Razmena vizit karte

¨ Razgovori sa ostalim ključnim ljudima kompanije

¨ Zadatak

¨ Literatura

¨ Pomoć na Internetu

Page 10: WebDizajn-Prirucnik

10

POSLOVNI RAZGOVORI S KLIJENTOM

Pre početka realizacije tehničkog rešenja web lokacije, tim za izradu web sajta morarešiti brojna pitanja koja imaju za cilj da se upozna sa suštinom problema.

Ako pođemo od pretpostavke da je naručilac posla izrade nove web lokacije – klijentpoznat, kao i kompanija i, uopšteno, znamo kojim se poslovima bavi – to apsolutno nijedovoljno za izradu kvalitetnog predstavljanja nove kompanije na Internetu.

Odakle početi?

Pre sastanka sa klijentom ili ljudima iz njegovog top menadžmenta, treba se pripremitiza sastanak tako što ćete prikupiti informacije o delatnosti kompanije, tržištu, profilimakorisnika, obimu poslovanja i značaju internet podrške u ukupnoj PR i marketingaktivnosti kompanije prema tržištu.

Definisanje problema

Pretpostavimo da sajt radi tim stručnjaka. U fazi definisanja problema, na radnomsastanku vrši se podela poslova. Deo ljudi sakupljače informacije o srodnimkompanijama kod nas i u svetu na Internetu. Radi se o ljudima za prikupljanjeinformacija, koji će u kasnijim fazama biti pisci tekstova za web strane.

Koristeći Web pretraživače, poput Google-a, treba se upoznati sa nekimspecifičnostima posla srodnih kompanija i pripremiti se za razgovor sa naručiocemposla, koji je često vlasnik kompanije za koju se sajt radi.

Važno je pripremiti se za prvi poslovni razgovor sa klijentom i staviti mu do znanja daste profesionalac. A to znači da imate okvirno definisan problem, na osnovu srodnihkompanija koje su već predstavljene na Internetu. Ovo će na klijenta ostaviti dobarutisak; osetiće da ste profesionalac i nastaviće da sarađuje sa vama.

Prvi kontakt sa klijentom

Prvi kontakt sa klijentom radi dogovaranja sastanka, obavlja se po običaju telefonom.Ugovara se sastanak sa naručiocem posla. To može biti vlasnik kompanije koja sepredstavlja na Internetu ili njegovi menadžeri, kao i ljudi zaduženi za marketing iodnose sa javnošću. Sa naručiocem posla vodi se razgovor o tome kakva je njegova

Page 11: WebDizajn-Prirucnik

11

vizija novog sajta.

Ako klijent ili njegovi najbliži saradnici nisu u mogućnosti da vas prime na prvi sastanaku svom kabinetu, nego predlažu restoran, nemojte to shvatiti kao oblik ponižavanja.Poslovni ljudi su stalno u pokretu. Radne sastanke održavaju svuda; u kabinetu,restoranu, automobilu, na sportskom terenu.

Radna beleškaO ključnim stavovima naručioca vodi se beleška. Beleška se vodi na običnom papiru iliu poslovnom notesu, a ne na laptop računaru. Razlog: vaš klijent, naručilac projektaizrade novog sajta, navikao je na takvu vrstu razgovora i na procedure koje se urazgovoru primenjuju. Upotreba laptopa dovodi ga u inferioran položaj i on uskoropočinje da se nervira. Sastanak bi mogao da krene nezadovoljavajućim tokom.

Pogrešno bi bilo na sastanak ne poneti nikakvu beležnicu. To bi ostavilo utisakneprofesionalnosti i traljavosti vas kao potencijalnog poslovnog partera za ovu vrstuposla. Uočili bi ste na početku sastanka po ponašanju klijenta da je nervozan, da žuri,a to može da bude znak da je procenio da niste pravi partner i da sa vama ne želi daobavi ovaj posao.

Pitanja koja mogu biti predmet razgovora

Sa klijentom treba voditi opušten razgovor, a pitanja treba da budu osmišljena kaointervju po principu levka. To znači da na početku treba postaviti nekoliko opštih,nekonvencionalnih pitanja, koja i ne moraju imati mnogo dodirnih tačaka sa poslom,čisto radi stvaranja atmosfere poverenja.

Na primer: Kako ste? Sigurno ste mnogo umorni? Čitao sam „Ekonomist“, našaprivreda ipak pokazuje znake oporavka...

Kasnije prelazite na pitanja od velike važnosti za vaš novi projekat.

Pitanja o kojima treba svakako razgovarati sa klijentom:

¨ Čime se tačno vaša kompanija bavi. Za koje je poslove registrovana?

¨ Kakva je vaša funkcija u top menadžmentu kompanije?

¨ Da li vaša kompanija ima knjigu grafičkih standarda, odnosno da li ima logotip,kompanijsku boju i font?

¨ Koje ciljeve treba da ostvarite pokretanjem web sajta. Kakva su vašaočekivanja?

¨ Koje informacije o kompaniji želite da publikujete na Internetu?

¨ Da li vaši klijenti žive na jednom kompaktnom prostoru, na primer u jednomgradu, kao što je Beograd ili računate na klijente koji žive na ZapadnomBalkanu ili na svetsku Internet zajednicu?

Page 12: WebDizajn-Prirucnik

12

¨ Koje kompanije su vaša konkurencija (nazivi kompanija) i da li te kompanijeimaju web sajtove?

Neki put se može postaviti i više pitanja, što zavisi od uspostavljene atmosfere naradnom sastanku i raspoloženja pregovaračkih strana.

Izbegavajte upotrebu reči iz rečnika programera i web dizajnera.

U konverzaciji sa klijentom, ako ste programer, izbegavajte upotrebu reči koje koristeprogrameri u međusobnim razgovorima; ako ste dizajner, izbegavajte reči koje koristedizajneri, jer vas u oba slučaja sagovornik možda neće razumeti.

Ovde treba imati na umu da naručilac posla ne mora biti „familijaran“ sa web dizajnom ida u vidu ima neko rešenje koje je bilo aktuelno u ranijem vremenu. U razgovoru sanaručiocem, treba ga saslušati. Ne treba mu direktno oponirati i ukazivati na njegovoneznanje. Poslovni ljudi imaju osećaj da su uvek u pravu i takav razgovor mogao bineprijatno da se završi.

Razmena vizit karte

Na kraju sastanka treba odabrati trenutak i razmeniti vizit karte. Vaša namera daostavite svoju vizit kartu pokazuje da ste zadovoljni klijentom i da želite da nastavitedanas uspostavljenu saradnju. Prilikom izrade poslovne vizit karte svakako imajte naumu da sve podatke o kompaniji i sebi, uključujući internet adrese i brojeve telefona,štampate na jednoj strani.

Poleđina vizit karte treba da bude prazna, kako bi se primaocu vaše vizit karteomogućilo da na poleđini nešto dopiše. U ovom slučaju, vaš klijent bi mogao da dodana poleđini o kojoj se osobi ili kompaniji radi i da zapiše termin sledećeg sastanka.

Razgovori sa ostalim ključnim ljudima kompanije

Posle sastanka sa top menadžerom, treba ugovoriti i realizovati sastanke sa drugimključnim ljudima kompanije, radi kompletiranja informacija o kompaniji, koje će bitiuzete u obzir kod izrade web lokacije. Radi se o ljudima koji se bave marketingom,odnosima sa javnošću, distribucijom, korespodencijom, i sl.

Obično svaka kompanija danas ima službenu e-mail adresu. Treba zamoliti službenikazaduženog za korespodenciju elektronskom poštom da omogući uvid u one porukekorisnika koje sadrže sugestije i ideje, potrebe korisnika proizvoda ili usluga kompanije,koje za marketing kompanije na Internetu mogu da budu od velike koristi. Svakakotreba tražiti i proučiti knjigu grafičkih standarda kompanije, jer su ovde sadržanikompanijski logotip, font i boja, koji treba da budu preslikani u interfejsu i, uopšte,dizajnu novog sajta.

Zadatak:Za ispitni zadatak – izrada komercijalnog sajta, štampanim slovima, odgovorite nasledeća pitanja.

Page 13: WebDizajn-Prirucnik

13

1. Definisanje problema – do kojih ste podataka o kompaniji klijenta ili srodnimkompanijama došli na Internetu (navesti i web adrese) pre poslovnog razgovora?

2. Opišite garderobu koju ste izabrali za poslovni sastanak sa top menadžerom ( u smislu,neobavezna garderoba, farmerke, patike, ili odelo sa kravatom. Povežite ovo sa mestom održavanja sastanka).

3. Navedite pitanja koja ste pripremili za direktora kompanije?

4. U čemu je značaj razmene vizit karte na kraju prvog poslovnog sastanka?

5. Na sastanku sa menadžerima kompanije iz marketinga i odnosa s javnošću, kao i saljudima iz distribucije, i ljudima zaduženim za internet korespodenciju, koja pitanjanameravate da im postavite?

6. Opišite garderobu koju ste izabrali za poslovni sastanak sa top menadžerom ( u smislu,neobavezna garderoba, farmerke, patike, ili odelo sa kravatom. Povežite ovo sa mestomodržavanja sastanka.

Page 14: WebDizajn-Prirucnik

14

Literatura:

¨ Jason Beaird: The Principles of Beautiful Web Design, Site Point, Australia,2007.

¨ Thomas A. Powell: Web dizajn, kompletan priručnik, Mikro knjiga, Beograd,2001.

Pomoć na Internetu:

¨ www.webmajstori.net

¨ www.elitesecurity.org

¨ www.dizajnzona.com

¨ www.devprotalk.com

¨ www.apr.gov.rs

Page 15: WebDizajn-Prirucnik

15

Vežba broj 2

ZAGLAVLJE WEB STRANE

¨ Statične i dinamične strane

¨ Struktura web strane

¨ Tip dokumenta za publikovanje na Internetu(DOCTYPE)

¨ Zaglavlje strane

¨ Najvažniji meta tagovi

¨ Oznaka strane¨ Kodni raspored i jezik¨ Opis kompanije ili organizacije čiji je sajt¨ Podaci o autoru sajta¨ Zadatak:¨ Literatura:¨ Pomoć na Internetu:

Page 16: WebDizajn-Prirucnik

16

ZAGLAVLJE WEB STRANE

Web strane čine sadržaj web sajta. Strane su međusobnim vezama povezane ufunkcionalnu celinu – sajt. Sa gledišta korisnika, strana je sadržaj koji se pojavljuje uprozoru pregledača weba. Svaka strana ima apsolutnu Internet adresu, tako da semože url-ovati, pozvati; učitati u računar korisnika.

Statične i dinamične web strane

Prema načinu izrade, web strane se dele na statične i dinamične.

Statične web strane urađene su kao zasebni fajlovi i celine, od kojih svaka ima svojuoznaku (naziv) i linkovima (vezama) su povezane sa ostalim stranama u okviru sajtakao celine, sa multimedijalnim objektima (slikama, audio datotekama) i sa stranamakoje se nalaze na Webu.

Dinamične web strane pretpostavljaju programerska znanja i postojanje baze podatakau okviru memorijskog prostora web servera na koji je sajt postavljen (hostovan). Ovajtip strane, pored HTML koda, koji služi da bi tekst i multimedijalne sadržaje koji seobjavljuju na strani korisnika prikazivao na određenom mestu, sadrži i skript jezik (npr.php ili asp) za povezivanje sa bazom podataka na serveru. Konekcija sa bazompodataka omogućava da se na strani korisnika generiše sadržaj u obliku web strane.

Korisnik će dinamičnu web stranu prepoznati po sintaksi sadržajnoj u adresnom poljupregledača u momentu zahteva za njenim dovlaćenjem sa web servera.

Primer 1:

Dinamične web strane (apsolutna adresa):

¨ http://www.vets.edu.yu/index.php?page=static&id=9

¨ http://www.b92.net/info/vesti/index.php?yyyy=2008&mm=10&dd=14&nav_category=11&nav_id=323441

Dinamične web strane korisnici prepoznaju prema upotrebljenoj sintaksi – "?" i "="

Page 17: WebDizajn-Prirucnik

17

Primer 2:

Statične web strane, posmatrano kroz prethodni primer, imale bi sledeću apsolutnuadresu:

¨ http://www.vets.edu.rs/raspored/index.html¨ http://www.b92.net/info/vesti/index.html

U prvom i drugom primeru vidimo da se kao inicijalni (startni) fajl pojavljuje index.Kod dinamičnih web strana startni fajl ima ekstenziju .php. Umesto .php može da sepojavi .asp, jsp i dr. Kod statičnih web strana inicijalni fajl ima ekstenziju .html ili htm.

Zadatak:

Pronađite tri dinamične i tri statične web strane i upišite njihove apsolutne adrese:A. Dinamične web strane:

B. Statične Web strane:

B. Statične web strane:

Struktura web strane

Web strane, bez obzira na prethodnu klasifikaciju, po pravilu sadrže tri kodne celine:1) Tip dokumenta za publikovanje na Internetu (DOCTYPE)2) Zaglavlje strane3) Telo strane

Iz Windows Web pregledača Internet Explorer strukturu web strane pogledajtepokretanjem opcije iz menija: View/Source

Page 18: WebDizajn-Prirucnik

18

Tip dokumenta za publikovanje na Internetu (DOCTYPE)

Sve do 1999. godine vladao je nered u pogledu elemenata strukture web strana.Međunarodni konzorcijum za standardizaciju Weba (www.w3c.org) postavio jestandarde i uveo red. Sajtovi Web programera koji se pridržavaju specifikacijeKonzorcijuma mogu se bez problema videti na pretraživačima koji rade pod različitimoperativnim sistemima: Windows, Symbian, MAC, Unix, Linux, i dr.

U izradi web strane definisanje tipa dokumenta je jedna od najvažnijih stvari. Iz tihrazloga tip dokumenta upisuje se na početku web strane. Pretraživač, prema tipudokumenta, učitava sadržaj koji može da obradi i prikaže klijentu ili publikuje izveštajklijentu da tražena strana ne postoji.

Doktajp specifikacija ima sledeći oblik:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"">

Doktajp sajta namenjenog korisnicima mobilne telefonije ima drugačiju specifikaciju:

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml">

Prva doktajp specifikacija integrisana je u početnu stranu sajta Visoke školeelektrotehnike i računarstva (www.viser.edu.rs) i može se povući sa web servera prekosvakog web pregledača.Drugi doktajp preuzet je sa wap stranice: http://www.eposlovanje.org/nada/ i može sepreuzeti preko web klijenata optimizovanih za molbilnu telefoniju i preko webpregledača Opera (verzija 9 – 9.6). Firefox i Internet Explorer ovu stranu ne dovlače uračunar klijenta.

Svaki put kad počnete da kreirate web stranu softverom za izradu sajtova(DreamVeaver. Front Page), program će automatski u prvom redu generisati tipdokumenta.

Zadatak:

Upiši apsolutne adrese tri sajta i njihove doktajp specifikacije:

Page 19: WebDizajn-Prirucnik

19

Zaglavlje strane

Zaglavlje web strane predstavlja njen najvažniji deo, ako pođemo od pretpostavke današu web stranu treba da pronađu i upišu web pretraživači i da je lako nalaze korisnici.Posao prilagođavanja sajta prema standardima pretraživača naziva se SEO (SearchEngine Optimization) optimizacija.

Zaglavlje strane smešteno je unutar taga <head> </head> i sadrži programski kod kojise ne objavljuje u istom ili sličnom obliku u prozoru pregledača Weba našeg klijenta,već sadrži instrukcije namenjene programima za upis web strana u baze webpretraživača, instrukcije web čitačima u pogledu kodnog rasporeda, osvežavanjastrane i sl. Takođe, zaglavlje strane sadrži apsolutne adrese datoteka kojima seupravlja vizuelnim oblikovanjem sadržaja strane (npr: text.css), kao i adrese scriptfajlova, koji se koriste u različite svrhe.

Zaglavlje se sastoji iz različitih kodnih specifikacija - meta tagova.

Najvažniji meta tagovi

Oznaka strane

Oznaka strane smeštena je unutar meta taga <title> </title>. Ima najveći značaj jer sviweb pretraživači obavezno indeksiraju sadržaj ovog taga. Može da ima do 15 reči,odnosno 255 karaktera. Pored unicode, prihvata i lokalna pisma (ćirilica i latinica).Sadržinski, treba da ima 3-5 reči i da odražava sadržaj strane. Npr: "NRT – Nastavniplan". Sadržaj treba da bude ekvivalentan upitu koji zadaje klijent web pretraživaču.

Kodni raspored i jezikJedan od razloga velike popularnosti Web-a jeste mogućnost publikovanja sadržaja nalokalnom pismu (ćirilica; latinica). Da bi se lokalno pismo videlo na svim platformama(Windows, Mac, PDA, Unix, Symbian, itd) potrebno je u zaglavlje upisati sledeće metatagove:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><META HTTP-EQUIV="Content-Language" CONTENT="sr">

Ključne reči koje opisuju sadržaj straniceKljučne reči ili kraće rečenice upisuju se bez navodnica. Broj ključnih reči ograničen jena 150.

<META NAME="keywords"CONTENT="odaberite,reci,koje,najbolje,opisuju,vašu,stranicu">

Page 20: WebDizajn-Prirucnik

20

Opis kompanije ili organizacije čiji je sajtU sledećem meta tagu na lokalnom ili na engleskom jeziku treba opisati delatnostkompanije, organizacije ili pojedinca čijem sajtu pripada web strana. To drugim rečimaznači da prethodni i ovaj meta tag imaju isti sadržaj na svim web stranama sajta, što nevaži za meta tag title, koji se razlikuje od strane do strane.

Podaci o autoru sajtaZaglavlje po pravilu sadrži meta tag o autoru sajta. Iza jednog sajta može stajatipojedinac, webmaster (takva je situacija karakteristična za našu sredinu), ali može biti itim stručnjaka. Tag sadrži ime autora i e-mail adresu, radi eventualnog kontakta.

<META NAME="AUTHOR" CONTENT="Web tim VISAR, [email protected]">

U softveru za izradu web sajtova opisani i drugi meta tagovi se upisuju jednostavno.

Zadatak:

U aplikaciji za izradu web sajtova uradi web stranicu "Moja prva web strana" ukojoj će biti integrisani elementi strane opisani u tačci 2. U meta tagu"AUTHOR" napisati ime i prezime, smer i broj indeksa. Datoteku pod nazivom:index.html arhivirati i poslati kao prilog uz poruku na e-mail:[email protected]

Literatura:

¨ Jerri L. Ledford: Search Engine Optimization Bible, Willey Publishing,Indianopolis, 2008.

¨ Dan Sisson: Google SEO Secrets, The Commplete Guide, Redmond, 2006.

Pomoć na Internetu:

¨http://www.conopljanews.net/metatagovi.html¨http://www.seo.com/¨www.elitesecurity.org¨www.devprotalk.com

Page 21: WebDizajn-Prirucnik

21

Vežba broj 3

OPISNE STRANE

¨ Izbor pozadinske boje web strane

¨ Dodavanje pozadinske boje strane i boje fonta

¨ Konvencije u pogledu upotrebe teksta na Webu

¨ Opšte preporuke za pisanje i formatiranje teksta

¨ Alatke za upravljanje tekstom

¨ Fontovi na Web strani

¨ Serifni i beserifni fontovi

¨ Tekstualni sadržaji na web strani

¨ Zadatak 1

¨ Opisne web strane

¨ Zadatak 2

¨ Pomoć na Internetu

Page 22: WebDizajn-Prirucnik

22

OPISNE STRANE

Tekst je osnovno izražajno sredstvo na webu. Multimedijalni sadržaji bitmapirana ivektorska grafika i zvuk) po pravilu se integrišu u web strane da pojačaju utisak naposetioca ili da omoguće lakše razumevanje poruke.

Zbog značaja, u velikim kompanijama posao ažuriranja sajta poverava se timustručnjaka. U timu se po pravilu nalazi urednik teksta.

U ovoj i sledećoj vežbi pažnja će biti posvećena web stranama sa obiljem teksta.

Izbor pozadinske boje Web strane

Jedno od pitanja sa kojim se susrećemo na samom početku kreiranja web strane jesteizbor boje pozadine. U principu, pozadinska boja može biti bitmapirana slika u jednomod formata podržanih na Web-u (JPG, GIF i PNG). Pozadinska slika po pravilupredstavlja logotip kompanije. Pre upotrebe, sliku treba posvetliti u odgovarajućemprogramu za bitmapiranu grafiku (PhotoShop, Gimp), tako da se na web strani dobijeefekat watermark – vodeni žig. Dodavanje pozadinske slike u programu DreamweaverMX vrši se u dijaloškom okviru Page properties/background image i prikazano je naslici 1.

Upotreba pozadinske slike nije uobičajena danas. Ovo pravilo naročito važi zakompanijske sajtove.

Dodavanje pozadinske boje strane i boje fonta

Pozadinsku boju strane postavljamo u dijaloškom okviru Page properties/Backgroundcolor, izborom odgovarajuće boje (Slika 1).

Inicijalno, ako ovo polje ignorišemo, postavljena je bela boja.

Bela boja pozadine karakteristična je za 80% sajtova na webu. Razloge treba tražiti uvelikom uticaju dizajna publikacija (na primer, magazina) na trendove u web dizajnu.

Ako umesto bele, upotrebite drugu boju – boja fonta treba da bude u kontrasti uodnosu na boju pozadine. Na primer, tamno plavoj pozadini odgovarao bi beli ili žutifont.

Za belu pozadinu po pravilu se koristi crna ili siva boja fonta.

Page 23: WebDizajn-Prirucnik

23

Važno. Pozadinska boja i boja i tip fonta predstavljaju elemente stila vašeg web sajta.Zato vaše rešenje treba da bude aplicirano na svim web stranama.

Slika 1. Dijaloški okvir Page properties – podešavanje web strane

Konvencije u pogledu upotrebe teksta na Webu

Tekst na web strani treba da bude kratak, čitak I jasan. Posetilac nema vremena da sebavi nagađanjem šta tekstom želi da se kaže. Tekst apliciran na webu najbliži je postilu i sadržini tekstu u dnevnim novinama. Korisnici različitih nivoa obrazovanja porukuiskazanu tekstom treba bez dileme da razumeju.

Tekst treba obavezno pisati na lokalnom pismu (ćirilica ili latinica). Izbegavati upotreburečenica sastavljenih isključivo iz velikih slova u paragraf tekstu. Upotreba velikih slovaizvan naslova doživljava se kao vikanje na korisnika. Na početnoj strani treba izbećinaslov: DOBRODOŠLI!.

Kod paragraf teksta treba izbegavati podvučen tekst (underline). Podvučen tekst nawebu izaziva asocijaciju kod korisnika da se radi o linku na drugu stranu.

Opšte preporuke za pisanje i formatiranje teksta

¨ Najvažnije informacije uvek stavljajte na početak stranice. Radi se opravilu poznatom u novinarstvu pod nazivom: "pravilo inverzne piramide".Sažetak celog članka stavite u prvi paragraf članka, a najvažniju misao napočetak rečenice i na početak svakog paragrafa. Tako se postiže efekat dačitalac dobija najveću količinu informacija čak i ako ne čita ceo tekst.

¨ Duži tekst podelite na kratke celine. Celina treba u proseku da se sastojiod 4-5 rečenica.

Page 24: WebDizajn-Prirucnik

24

¨ Strane sa tekstom formatirajte u stupce do 600 piksela. Tekst se ne smeprotezati od leve do desne margine, jer se teško čita. Kad čitalac dođe dokraja reda, izgubiće početak sledećeg, jer je red vrlo širok.

¨ Tekst mora biti okružen praznim prostorima – belinama. Stavite i do dvareda razmaka između odlomaka. Ostavite prazan prostor na levim i desnimmarginama oko teksta. Web stranica ne sme biti natrpana tekstom.

¨ Kod teksta većeg obima, koristite podnaslove. Ako vaš tekst sadržiceline koje bi se logički mogle povezati, dajte im podnaslov. Korisnik će takomoći u tekstu identifikovati smislene celine i brže pronaći ono što ga zanima.

¨ Koristite redne liste. One su jedno od najuspešnijih načina formatiranjateksta, jer omogućavaju korisniku da se brzo i lako snalazi. Korisnik običnoletimično prelazi pogledom kroz tekst i zadržava se na rednim listama, kojelako čita. Sve što se u tekstu nabraja ili odvaja zarezom, treba da budeformatirano kao redna lista. Da bi se redne liste još lakše opažale, trebapostaviti prored između redova (povećanje belina). Između dve redne listetreba ostaviti veće slobodne prostore, beline, kako bi se lakše opažale.

¨ Koristite crni tekst na svetloj pozadini. Tekst na webu ima sličnosti satekstom u štampanim medijima. Bela površina papira se podrazuemva.Tekst ispisan crnim slovima na kontrastnoj beloj površini lako se čita.

¨ Upotreba belog teksta na tamnoj pozadini nije ista. Izbegavajte paragraftekstove većeg obima u svetloj ili beloj boji fonta na tamnoj pozadini, jer seteže čitaju.

¨ Kad želite određene delove teksta da naglasite, koristite podebljani font(bold). Podebljani tekst koristiti za naglašavanje ključne misli, a ne za čitaveparagrafe.

¨ Tekst koji sadrži linkove, veze prema drugim fajlovima ili internetdestinacijama, treba da bude ispisan plavom bojom i podvučen.Nepodvučene linkove možete koristiti u navigaciji, ali nikako u tekstu.

¨ Pre publikovanja, tekst treba još jednom proveriti. Najbolje je da proveruvrši lice koje ga nije pisalo. Važno je otkloniti sve pravopisne i stilske greške,kao i greške u kucanju. Greške u kucanju i gramatičke greške nailaze naneodobravanje kod korisnika. Takav sajt smatra se neprofesionalnim.

Alatke za upravljanje tekstom

Softver za izradu i publikovanje web sajta ima moćne alatke za upravljanje tekstom.Osnovne alatke prikazane su na slici 2.

Slika 2. Alatke za formatiranje teksta

Page 25: WebDizajn-Prirucnik

25

Alatke za formatiranje mogu se podeliti u tri grupe:

¨ Izbor, veličina i boja fonta¨ Oblik fonta i formatiranje paragraf teksta¨ Redne liste i podešavanje širine paragrafa u odnosu na margine

Fontovi na Web strani

Na web strani treba upotrebiti sistemske fontove. To su fontovi koji dolaze u paketu saoperativnim sistemom. Sistemski fontovi, koji dolaze u paketu sa operativnim sistemomWindows, su: Arial, Verdana, Georgia i Times New Roman. Ne preporučuje seupotreba fontova, kao što su: C_Times, C_helvetica, Miroslavljevo pismo i sl, jer ovifontovi najverovatnije ne postoje u računaru korisnika, tako da se tekst neće videti unjegovom web pregledaču.

Serifni i beserifni fontovi

Fontovi kao osnovni tipografski elementi dele se, prema obliku, na serifne i beserifne.Serifni fontovi su grafički izvedeni tako da se sastoje iz serifa (stopica, tankih i debelihlinija). Teže se čitaju i manje se upotrebljavaju na webu.

Times New Roman, Georgia – serifni fontoviOva vrsta fontova ima stopice i kvačice (kao T i s).

Arial, Verdana – beserifni fontovi izvedeni su kao tehničko pismo

Tekstualni sadržaji na web strani

Tri su najčešća tesktualna sadržaja koja se apliciraju na web strani: naslov ipodnaslovi, paragraf i redne liste (buliti).

Za naslove i podnaslove treba koristiti gotove šablone, smeštene u padajućoj listiFormat, dijaloškog okvira Properties (slika 2).

Između naslova i paragraf teksta treba ostavljati prazan prostor, beline, kako bi sekorisnik lakše snalazio i čitao odmah deo teksta koji ga interesuje. Isto važi i zarastojanje koje treba da postoji kod paragraf teksta i rednih lista. Uopšte, upotrebapraznih prostora, belina, jeste pravilo u formatiranju web strane, bilo da se radi o tekstuili implementaciji multimedijalnih objekata.

Zadatak 1Uradite na času web stranu sa tekstom, koja ima oznaku: Moja prva strana – ime iprezime studenta.Postavite pozadinsku boju i boju i tip fonta.

Page 26: WebDizajn-Prirucnik

26

Web strana treba da bude ispisana na ćirilici. U tekstu obima stranice A4 treba napisatibiografiju ili CV, obavezno aplicirajući sve sadržaje opisane u tačkama 2 – 2.3. Ovajrad će poslužiti studentu za izradu domaćeg zadatka: lični sajt.

Opisne web strane

Opisnim stranama nazivamo web strane koje sadrže obilje teksta. Strane mogusadržati i neki multimedijalni objekat, ali je tekst koji zauzima prostor od nekoliko A4strana njihova bitna karakteristika.

Ovako obiman tekst težak je za čitanje i nervira korisnika. Takav tekst treba veštopodeliti u više celina, koje su međusobno podeljene podnaslovima. Na početku opisnestrane treba postaviti sve podnaslove. Podnaslovi su linkovani alatkom Anchor (sidro) uodnosu na isti podnaslov koji se nalazi negde na strani. Korisnik bira naslov koji gainteresuje i skače na deo strane gde se taj naslov nalazi, sa pripadajućim paragraftekstom.

Zadatak 2

U programu za izradu web sajtova izaberite prikaz Design i prepišite, koristeći ćiriličnopismo, tekst Pravila studija:

ПРАВИЛА СТУДИЈАНа Високој школи електротехнике и рачунарства

Правила студијаОцењивање

ИспитиМировање права и обавеза студенатаДисциплинска одговорност студента

Правила студија

Приликом уписа сваке школске године студент се опредељује за предмете из студијскогпрограма, у којем је прописано који су предмети обавезни за одређену годину студија.

Студент који се финансира из буџета опредељује се за онолико предмета колико јепотребно да оствари најмање 60 ЕСПБ бодова а студент који се сам финансираопредељује се за онолико предмета колико је потребно да оствари најмање 37 ЕСПБбодова.

За сваки положени испит студент стиче одређени број ЕСПБ бодова у складу састудијским програмом.

Студент који не положи испит из обавезног предмета до почетка наредне школске годинепоново уписује исти предмет.

Студент који не положи изборни предмет, може поново уписати исти или се определитиза други изборни предмет.

Page 27: WebDizajn-Prirucnik

27

ОцењивањеВрх

Успех студената на испиту изражава се оценом од 5 (није положио) до 10 (одличан).Оцене су одређене према броју остварених поена

Испуњавањем предиспитних обавеза и полагањем испита студент може остваритинајвише 100 поена.

Сразмера броја поена стечених у предиспитним обавезама и на испиту утврђује сестудијским програмом, при чему предиспитне обавезе учествују са најмање 30, а највише70 поена.

ИспитиВрх

Испит је јединствен и полаже се усмено, писмено односно практично.

Студент полаже испит непосредно по окончању наставе из тог предмета.

Испит се полаже у седишту Школе, односно у објектима наведеним у дозволи за рад.

Начин полагања испита и оцењивање на испиту ближе се утврђује Правилником остудијама.

Испитни рокови у Школи су: јануарски, априлски, јунски, септембарски и октобарски.

Студент има право на полагање испита из једног предмета највише три пута у току једнешколске године.

Изузетно, студент коме је преостао један неположен испит из студијског програмауписане године, има право да тај испит полаже у накнадном испитном року до почетканаредне школске године.

Школа је дужна да у складу са својим могућностима омогући хендикепираним студентимаполагање испита на начин прилагођен његовим могућностима, у складу са Правилником остудијама.

Мировање права и обавеза студенатаВрх

Студенту се, на његов захтев, одобрава мировање права и обавеза у случају тежеболести, упућивања на стручну праксу у трајању од најмање шест месеци, одслужења идослужења војног рока, неге детета до годину дана живота, одржавања трудноће и удругим случајевима предвиђеним Правилником о студијама.

Дисциплинска одговорност студентаВрх

Студент одговара дисциплински за повреду обавезе која је у време извршења билапредвиђена Правилником о дисциплинској одговорности студената.

За тежу повреду обавезе студенту се може изрећи и мера искључења из Школе.

Дисциплински поступак се може покренути у року од три месеца од сазнања за повредуобавезе и учиниоца, а најкасније шест месеци од како је повреда учињена.

Page 28: WebDizajn-Prirucnik

28

1. Mišem markiraj naslov: Правила студија. Iz kutije sa alatima izaberi alatku

Anchor (sidro) .

2. U polje: Anchor name, upiši latinicom, malim slovima, jednu reč: pravila.Pritisni OK. Ponovi postupak kod ostalih podnaslova, poštujući prethodnopravilo (postavi sidra: ocenjivanje, ispiti, mirovanje, disciplinska).

Slika 3. Dijaloški okvirAnchor name

3. Mišem markiraj naslov na vrhu strane: Правила студија. U meniju Properties, uaktivnom polju Link: upiši: #pravila (vidi sliku 2). Pritisni enter. Markiraj polje:Ocenjivanje. Upiši: #ocenjivanje. Postupak ponovi zaključno sa poljemДисциплинска одговорност студената.

4. Markiraj naslov na vrhu strane: ПРАВИЛА СТУДИЈА. Izaberi alatku Anchor iupiši: početak. Potvrdi sa OK. Markiraj reč: Vrh. Upiši u dijaloškom okviruProperties, aktivno polje Link: #pocetak. Isti postupak ponovi na ostalimmestima gde se pojavljuje reč: Vrh.

5. Dodeli oznaku strane dokumentu – Opisna strana – ime i prezime studenta ibroj indeksa.

6. Snimi datoteku pod nazivom: opisna.htm.Studenti koji ne završe vežbu do kraja časa, treba da je pošalju elektronskompoštom na adresu: [email protected].

Literatura:¨ Thomas A. Powell: Web dizajn, kompletan priručnik

¨ Jason Beaird: The Principles of Beautiful Web Design, Site Point, Australia,

2007.

Pomoć na Internetu:¨ http://www.conectivia.com/ser/kako-napisati-tekst-za-internet-stranu¨ http://www.webmajstori.net/¨ www.elitesecurity.org

Page 29: WebDizajn-Prirucnik

29

Vežba broj 4

INTERAKTIVNE STRANE

¨ Vrste interaktivnih strana¨ Ulazne strane

¨ Procesiranje podataka sa ulazne strane

¨ Izlazne strane¨ Zadatak:¨ Literatura:¨ Pomoć na Internetu:

Page 30: WebDizajn-Prirucnik

30

INTERAKTIVNE STRANE

Interaktivne strane namenjene su korisnicima da uspostave kontakt sa vlasnikom websajta ili sa njegovim administratorima. Korisnici weba oduvek su pokazivali velikointeresovanje za ovu vrstu strana, jer kod pojedinca postoji želja da se pokaže, da zna,da želi da dá sugestiju, da pita nešto što mu se čini nepoznatim. Interaktivne strane sustvorene za takav tip korisnika.

Pomoću interaktivnih strana na webu danas se realizuju najraznovrsniji oblici kontaktasa korisnicima, pomoću kojih se dolazi do brojnih informacija: ko su naši korisnici, kojesadržaje najčešće preuzimaju sa sajta, i dr. Preko interaktivnih strana odvija se proceselektronske trgovine (kupovine) proizvoda na malo preko Interneta (B2C). Robaizložena prodaji, prikazana na sličicama, sa detaljnim tehničkim i drugimkarakteristikama, preuzima se u korpu, gde se izračunava zbirni račun za većukupovinu i odluka o kupovini procesira se vlasniku sajta.

Ako web sajt već nema implementiranu B2C trgovinu, interaktivne strane se postavljajuda bi se postavilo izjašnjavanje korisnika o određenoj temi, koja je po pravilu značajnaza prirodu sajta. Tako na primer, uobičajeno je da se u desnoj koloni, predviđenoj zapromocije, postavi anketa u elektronskoj formi, koja nije ništa drugo nego interaktivnastrana. Možete glasati za jedan od ponuđenih odgovora.

Takođe, kontakt stranica realizuje se kao interaktivna strana.

Model elektronskog poslovanja B2C odvija se isključivo preko Interneta. Kompanijekoje nude proizvode preko Interneta imaju web sajt ili drugu aplikaciju na Internetu,koja registrovanim korisnicima omogućava kupovinu različitih proizvoda.

Za organizovanje posla trgovine preko Interneta nije dovoljno imati samo modernourađen dinamički web sajt koji može da prodaje na globalnom tržištu, 24 sata dnevno.Elektronska prodavnica u punoj eksplikaciji koncepta B2C elektronskog poslovanja,podrazumeva i kompanije „iza zavese“. Radi se najmanje o dve kompanije koje morajupodržavati u poslovnom smislu B2C projekat. Jedna je Payment provajder – banka načiji je račun preko interneta dolaziti uplaćen novac, sa platnih kartica. Ovakav posaona našem tržištu može se realizovati preko kompanije eMS ELECTRONICMERCHANT SERVICES - http://www.e-services.rs/onama.

Početna ulaganja nisu velika, a to je obično nepremostiv problem koji se javlja predljudima prilikom započinjanja novog biznisa. Pre pojave kompanije eMS ELECTRONICMERCHANT SERVICES Banca Intesa, Beograd imala je ponudu payment provajdera,i faktički bila prvi payment provajder kod nas, sa vrlo visokim depozitom. Depozitkompanije eMS ELECTRONIC MERCHANT SERVICES desetak puta je manji i to jeveć prihvatljivo za većinu početnika u e-biznisu.

Page 31: WebDizajn-Prirucnik

31

Slika 1. www.e-services.rs, najpovoljnija ponuda payment provajdera za otvaranje B2C prodavnice

Sledeće rešenje jeste da se narudžbenice sa vaše web strane procesiraju na vaš imejlnalog ili da se generiše posebna web strana sa naručenim proizvodima. Slaba stranaovakvog koncepta, koji je dominirao pre razvoja web tehnologija, jeste u tome što seneko može našaliti i napraviti vam nepotreban trošak. Kupac sa Interneta, koji se lažnopredstavlja, naručuje robu, koju vi nemate u magacinu nego je nabavljate od drugogdobavljača. Kasnije se uspostavi da je to bila samo šala. Otud je kod ovakvogkoncepta, koji se kod nas primenjuje kao način u najvećem broju slučajeva, sa kupcemvode telefonski razgovori i traži se da robu unapred uplati na određeni račun. Roba seisporučuje tek po uplati.

Sledeća slaba strana B2C trgovine, o kojoj morate voditi računa, ako jednoga dananameravate da otvorite prodavnicu na Internetu, jeste isporuka kupljene robe.Kvalitetna distribucija jeste jedan od faktora koji podiže rejting kompanije. Radilo bi seo tome da se roba isporuči kupcu što pre. Kod kompanija koje su uložile veći novac uprojekat B2C (kao što je Apple, u projekat iTunes), tok robe prema kupcu kupac možepratiti preko Interneta u svima fazama: pakovanje, slanje preko odgovarajućeorganizacije, očekivano vreme isporuke (datum i sat). U razvijenijim ekonomijama sudubljim tržištem, ovo je moguće realizovati jer postoji veliki broj kompanija registrovanihza distribuciju, na koje se možete osloniti. Kod nas postoji pošta i privatne eksprespošte.Naposletku, jedan od problema nabavke robe preko Interneta sastoji se u tome štoprodavac ne zna tačno šta kupuje: ne može robu da vidi golim okom i da je isproba. Toje kao kod kupovine robe na berzama: kupuje sa određenim rizikom. Ovo pravilo nevaži kad je u pitanju kupovina softvera, koji se preko Interneta i najviše prodaje.Softverske kuće nude tzv. Trial verzije softvera, koje se mogu koristiti mesec dana ili semogu pokrenuti tridesetak puta. Pošto softver testirate, možete se slobodno opredelitida li ćete ga kupiti ili ne.Ako radite anketu, kojom želite da saznate ko su vaši korisnici i šta misle o kvalitetuvašeg sajta, interaktivne strane su prava stvar. Pažljivo osmislite pitanja i postavite

Page 32: WebDizajn-Prirucnik

32

interaktivnu stranu. Rezultati glasanja šalju se na odgovarajuću elektronsku adresu ilise generišu na posebnu dinamičku stranu, kojoj se pristupa preko posebneregistracione stranice.

Interaktivne strane su nužne ako otvarate forum. Koristite gotova besplatna rešenja uPHP skriptu. Povezujete ga na vašu web lokaciju. Forum po pravilu ne dozvoljavaneregistrovanim korisnicima da ostvare dublji prodor u sadržaj sajta. Zainteresovanimase postavlja registraciona strana sa odgovarajućim pravilima i tek kad joj se pristupi iispuni najznačajnija polja, stiče se uslov za članstvo u forumu.

Koliko ste samo puta popunjavali interaktivne strane?

Većina iskusnih korisnika weba elektronsku poštu danas ažurira preko web mejla. Nataj način, omogućen je pregled elektronske pošte sa svakog računara koji je povezanna svetsku kompjutersku mrežu. Otvaranju naloga na web mejlu prethodi procedurapopunjavanja glomazne web strane sa velikim brojem aktivnih polja, radio dugmadi ipadajućih listi. Pogrešno popunjeno ili izostavljeno polje dovoljan su razlog da vasprogram vrati korak nazad na ponovni unos podataka.

U suštini, interaktivne strane jesu tip web strana koje služe za obavljanje određenihposlova. Ovakve strane često sadrže integrisane kolačiće (cookies) radi postizanjaefekta familijarnosti sa korisnikom i bržeg obavljanja poslova na strani, pretragupodataka u bazi na web serveru, obrasce za registrovanje korisnika, knjigu utisakaposetilaca i sl.

Ne postoji znak jednakosti između interaktivnih strana i weba 2.0. Web 2.0 je konceptweba koji se zasniva na filozofiji da se korisniku ostavlja da sam uredi određenesadržaje na webu. U tom pogledu je početkom 2001. godine pokrenut Web 2.0 krozWiki koncept, poznat kao Wikipedia – najveća enciklopedija na Internetu. Pojedincisami pišu članke ili ispravljaju i dopunjuju već napisane članke o svim pitanjima izživota, na skoro svim jezicima sveta (www.wikipedia.org). Elementi interaktivnih stranamogu da postanu sastavni deo weba 2.0, ali je web 2.0 nešto više – to je „moj prostor“,Blog.

Vrste interaktivnih strana

Interaktivne strane idu uvek u paru; kao sijamski blizanci. Najpre se pred očimakorisnika pojavljuje ulazna strana, u obliku formulara sa brojnim aktivnim poljima kojetreba popuniti, Procesiranjem ulazne strane pojavljuje se izlazna, završna strana.

Ulazne strane

Ulazne strane lako se prepoznaju po brojnim aktivnim poljima za unos ili odabirpodataka.Na početku ulazne strane treba napisati neki naslov. Na primer, registraciona strana.Posle toga sledi kratko objašnjenje ( u formi uvoda) iz kojih razloga se uvodna stranaustanovljava i u koje svrhe će biti upotrebljeni prikupljeni podaci. Vrlo je važno istaći dase ti podaci neće koristiti u cilju narušavanja privatnosti korisnika (mada se danas naInternetu privatnost narušava već time što ostavite svoju e-mail adresu). Već poslenekog vremena možete očekivati email SPAM napade velikih razmera. Pitanja kao štosu – šta su vaše slabe strane, ne treba postavljati. Brojeve telefona ili realnu adresu,takođe treba izbegavati.

Page 33: WebDizajn-Prirucnik

33

Slika 2. registraciona strana društvene mreže www.karike.com

Pitanja sadržana u formularima (obrascima) koji čine osnovu ulaznih interaktivnihstrana treba postavljati sa velikim oprezom. Pitanje koje zadire u privatnost korisnika ilineće biti obuhvaćeno odgovorom ili će biti „prepoznato“, tako da će korisnik odgovoritinerazumljivim i neupotrebljivim sadržajem (dfgh5678jk). Korisnik, kad proceni da se„čačka“ po njegovoj privatnosti, može i na uobičajena pitanja da odgovori pogrešno, ucilju osvete prema vlasniku sajta.

Pitanja koja se postavljaju kroz interaktivne ulazne strane treba svrstati u dvekategorije:

1. Pitanja na koja se obavezno traži odgovor. Ako korisnik ne upiše odgovor,program ga vraća na prethodnu stranicu. Pored ovakvih pitanja treba stavitiznak zvezdica (*)

2. Pitanja na koja korisnik može, ali i ne mora odgovoriti. Pored ovih pitanja netreba stavljati nikakav znak.

Na kraju stranice u obliku napomena postaviti kratku informaciju da se aktivna poljaoznačena zvezdicom (*) obavezno popunjavaju.

Procesiranje podataka sa ulazne strane

Ispod formulara nalazi se dva dugmeta za procesiranje unetog sadržaja. U engleskimverzijama dugmad nose oznake: Submit i Reset.Dugme Submit znači isto što i pošalji podatke sa ove strane, koje sam uneo uodgovarajuća polja formulara. Ovo dugme na srpskom jeziku imalo bi naziv: Pošalji.Dugme Reset obavezan je deo ulazne interaktivne strane. Korisnici su u situaciji da seu zadnji čas predomisle i da odustanu od uspostavljanja kontakta. Prethodno su

Page 34: WebDizajn-Prirucnik

34

popunili korektno sva aktivna polja forme (elektronskog obrasca), ali im se učinilo da jerazlog za slanje podataka da bi se preuzela neka datoteka (koja se može naći i nadrugim lokacijama na Mreži) manje važan od izlaganja personalnih podataka očimanepoznatih ljudi. U tom slučaju treba pored dugmeta Submit da stoji i njegova negacija– Reset. Prevedeno na srpski, ovo dugme imalo bi naziv: Otkaži.U pogledu upotrebe dugmadi Submit i Reset važe sledeće konvencije na webu:

¨ Oba dugmeta idu obavezno u paru

¨ Dugmad su smeštena po pravilu pod desnu stranu, na kraju formulara iudaljena su jedno od drugog fizički belinom (slobodnim prostorom) od 1-2 cm.Ovo je neophodno da bi korisnik koji slabo radi sa mišem odabrao pravo, a nepogrešno dugme. U slučaju izbora pogrešnog dugmeta i nastale trenutne štete,greh bi pao na webmastera.

Aktiviranjem dugmeta Submit, sadržaj formulara pomoću različitih web tehnologija(npr. pomoću Java ili PHP skripta) prosleđuje se na odgovarajuću e-mail adresu, ili seod takvog sadržaja formira dinamička web strana koja tabelarno prikazuje podatkekoje su poslali brojni korisnici. Pristup takvim stranama važi samo za korisnike saposebnim privilegijama (preko registracione strane).

Podaci sa formulara mogu se procesirati metodom GET ili POST, preko programaformail.pl, koji se lako edituje iz bilo kog editora. Ovaj program se izvršava na webserveru i nalazi se u katalogu cgi-bin.

Izlazne strane

Izlazna strana je završnica. U momentu pokretanja dugmeta Submit i transferapodataka na e-mail outgoing server ili u bazu podataka na web serveru, štampa se naekranu korisnika izlazna strana.

Slika 2. izlazna strana kod registracije korisnika na: www.karike.com

Izlazna strana po pravilu je statična strana (izuzev ako ceo sajt nije urađen u php-u).Naslov strane mogao bi da glasi: Obaveštenje. Sledi tekst: Podaci koje ste nam poslaliuspešno su preneti. Zahvaljujemo vam se na saradnji. Ako se radi o ulaznoj strani kojasluži za slanje instant e-mail poruke, treba svakako da stoji: Obaveštavamo Vas da

Page 35: WebDizajn-Prirucnik

35

smo primili vašu poruku, poslatu sa sajta www.viser.edu.rs. Zahvaljujemo se napitanjima, komentarima i sugestijama. Na vašu poruku odgovorićemo vam u štokraćem roku. Sledi potpis imenom i prezimenom lica sa autoritetom: npr. direktorkompanije: dipl. ing Milorad Petrović.

Izlazna strana, kao .htm datoteka, obično nosi naziv: hvala.htm.

Zadatak:

U programu za izradu web sajtova uradi ulaznu stranu, koja obavezno sadrži: Naslov(npr Registraciona strana foruma (neki naziv). Kratko uputstvo šta se traži i u kojesvrhe će se podaci iskoristiti, kao i da se neće zloupotrebljavati.Kreirati formu koja sadrži standardna pravougaona polja za unos podataka (polja zaobavezni unos podataka označi zvezdicom). Obrazac (formular) treba da sadržipadajuću listu (kombo boks) i radio dugmad ili kvadratiće, kao i veće aktivno polje zaunos podataka, kao kod instant poruke.

Uradi izlaznu stranu i snimi je pod nazivom: hvala.htm.

Procesiranje interaktivne strane iz web pregledača treba da se završi učitavanjemstrane: hvala.htm, koja predstavlja izlaznu stranu.

Literatura:

¨ Jason Beaird: The Principles of Beautiful Web Design, Site Point, Australia,2007.

¨ Thomas A. Powell: Web dizajn, kompletan priručnik, Mikro knjiga, Beograd,2001.

Pomoć na Internetu:

¨ www.elitesecurity.org¨ www.dizajnzona.com¨ www.devprotalk.com/

Page 36: WebDizajn-Prirucnik

36

Page 37: WebDizajn-Prirucnik

37

Vežba broj 5

Strane sa često postavljanim pitanjima i odgovorima (FAQ)

¨ Kako najbrže doći do traženog odgovora

¨ Lokalni pretraživač

¨ Strana sa najčešćim pitanjima i odgovorima (FAQ)¨ Primer:

¨ Zadatak:

¨ Literatura:

¨ Pomoć na Internetu:

Page 38: WebDizajn-Prirucnik

38

Strane sa često postavljanim pitanjima i odgovorima (FAQ)

Internet je informaciona i komunikaciona tehnologija koja doživljava ekspanzijuna razmeđu vekova. Godine 2005. je objavljeno da je Internet postao treći pouticaju i značaju medij – iza televizije i radija, potisnuvši sa tog mesta štampu.Web sajt je klasična forma predstavljanja kompanije na Internetu. Preko websajta kompanija je predstavljena 24 časa, 365 dana u godini. Zbogjednostavnosti i brzine ažuriranja informacija, kompanije se danas trude dainformacije za javnost najpre objave preko sajta. Razume se, reč u toj stvari imaprevashodnu ulogu.

Kako najbrže doći do traženog odgovora

Nikad kao u našem vremenu blagovremena informacija nije imala tako velikiznačaj. Slobodno se može reći da u našem vremenu za poslovne ljude važinačelo: Ko prvi stigne do informacije – on je pobednik!Web sajtovi sadrže veliki broj web strana, krcatih informacijama. Obzirom da seweb sajtovi održavaju, sadržaj se stalno obogaćuje. Navigacioni sistem možesamo delimično da nagovesti da li se traženi odgovor našeg korisnika nalazi usadržaju sajta ili ne. Mapa sajta daje nešto bolji pregled orijentacionog sadržajasajta.Da bi se korisnik lakše snašao, pribegava se implementaciji mape sajta,lokalnog pretraživača i stranice sa često postavljanim pitanjima i odgovorima(FAQ).

Lokalni pretraživač

Sajt koji ima više od petnaest web strana treba da ima lokalni pretraživač.Lokalni pretraživač po pravilu je smešten ili ispod glavnog navigacionog sistemaili u desnoj koloni, koja je predviđena za publikovanje promotivnih sadržaja(baneri).

Page 39: WebDizajn-Prirucnik

39

Slika 1. Lokalni pretraživač na weblokaciji: www.eposlovanje.org. Premakonvencijama na webu, lokalni pretraživačpostavlja se ili u okviru zaglavlja websajta, pod desnu stranu, ili u koloni zapromocije.

Prikazano rešenje je standardno na webu:osim što korisnik može da pretraži sadržajsajta, izborom opcije: po celom srpskomwebu, može da izvrši pretraživanje premazadatom upitu preko pretraživača:www.pogodak.rs

Lokalni pretraživač sastoji se aktivnog polja za unos upita i linka (dugmeta) zaprocesiranje sadržaja. Po unosu upita, korisnik procesira podatke klikom naikonicu sa lupom ili na dugme: „pošalji“. Kao rezultat, pojavljuje se izlaznastrana sa unutrašnjim linkovima na kojim se stranama pojavljuje reč ili red rečizadatih u upitu.Lokalni pretraživač relativno jednostavno se implementira u web sajt kadwebmaster sajt radi oslanjajući se u potpunosti na softver za generisanje websajtova. Takođe, web sajt koji se radi u CMS softveru (npr. u Joomli) lako jeoptimizovati da ima lokalni pretraživač. Uopšte, dinamički sajtovi, koji se uformiranju sadržaja web strana oslanjaju na bazu podataka, smeštenu na webserveru, po pravilu imaju lokalni pretraživač.Lokalni pretraživač po pravilu se kombinuje sa pretraživačem celokupnog weba.Korisnik klikom na odgovarajuće dugme može da zada upit lokalnompretraživaču. Ako ne pronađe traženu informaciju, klikom na dugme – Web, upitse zadaje nacionalnom ili svetskom pretraživaču.Slaba strana lokalnog pretraživača jeste u tome što korisnik sajta ne zna tačnošta da upiše kao upit. Sa druge strane je mašina. Ako upit nije ispravno unet,dolazi do nerazumevanja.Rezultat: korisnik nije pronašao željeni odgovor, iako odgovor možda postojinegde na sajtu.Načelo da korisnik mora otići zadovoljan sa web sajta mora se zadovoljiti.Izlaz se nalazi u izradi posebne web strane sa najčešćim pitanjima iodgovorima.

Page 40: WebDizajn-Prirucnik

40

Strana sa čestim pitanjima i odgovorima (FAQ)

Strane sa često postavljanim pitanjima i odgovorima nisu obavezni deosadržine poslovnog web sajta. Iskusni webmasteri, međutim, vrlo čestoimplementiraju FAQ stranice, kako bi korisnici sajta na najlakši i najbrži načindošli do osnovnih informacija o kompaniji ili o nekom proizvodu.Razlog za implementaciju FAQ stranica nalazi se u činjenici da je na jednommestu, pregledno i u sažetoj formi (što je odlika teksta na Internetu) odgovorenona najveći broj mogućih potencijalnih pitanja korisnika. FAQ stranice nemajusamo informativni nego i marketinški značaj.Iskusni korisnici weba, u potrazi za odgovorima na pitanja koja ih interesuju,obično odgovor najpre traže na FAQ stranama. Često ih ovaj odgovorzadovoljava.Pred autorima sajta, naročito pred urednikom teksta, stoji ni malo lak zadatakda pažljivo izabere najvažnija pitanja, posmatrano iz ugla korisnika i da naizabrana pitanja da jasne i jezgrovite odgovore.FAQ stranu najbolje je da sastavlja više ljudi. U izboru pitanja i eksplikacijiodgovora treba konsultovati menadžment i marketing tim kompanije. Takođe,treba se služiti arhivom elektronske pošte. Naime, preko službene elektronskeadrese (npr: [email protected]) klijenti često postavljaju pitanja, na koja sepažljivo daju odgovori. Ova pitanja i odgovori mogu da posluže kao inspiracijakod izrade FAQ strane.Takođe, FAQ stranice ne smeju se smatrati konačnim i završenim. Uredniksajta treba ovu stranicu često ažurirati, proširujući njen sadržaj. Dobra stranasadržaja jeste e-mail adresa, locirana u podnožju FAQ strane, kojom se pružamogućnost klijentima da sami kreiraju ovu stranicu, tako što će putemelektronske pošte dati sugestije i predloge.Strukturu FAQ stranice čine dve celine. Uvodni tekst, kojim se objašnjava šta jepredmet pitanja i odgovora. U istom delu postavlja se e-mail adresa za slanjesugestija i predloga korisnika.Drugi deo sastoji se od pažljivo i jasno definisanih pitanja i odgovora.Redosled eksplikacije teksta odvija se po obrascu:

¨ Pitanje

¨ Odgovor

Primer:

FAQ STRANICA verat.neta o uslovima hostovanja web sajtova

U okviru ove stranice obrađena su najčešće postavljana pitanja vezana za hostovanjevaših prezentacija. Ukoliko imate neka pitanja vezana za hosting, a koja nisu ovdeobrađena možete ih uputiti na email:[email protected]

Page 41: WebDizajn-Prirucnik

41

Q: Zašto je vaš Web hosting tako jevtin?A : Slažemo se da je cena veoma popularna. Razlozi za to su:1. Virtuelne web prezentacije opterećuju naš izlazni link, a on je "mnogo" manjeopterećen od ulaznog.2. Neki napredni koncepti (CGI,SSI,PHP,SQL) su omogućeni od početka, te nemamuke oko naknadnog nameštanja istih.

Q: Ako je moj sajt suspendovan, šta bi mogao da bude razlog?A : Problemi sa plaćanjem: niste platili, istekla vam je kreditna kartica, lažnokorišćenje kreditne kartice... Tehnički razlozi: prekoračena kvota dozvoljenog protoka,sajt prouzrokovao pad servera, zloupotreba servisa... Autorska prava: zaštićen softver,zaštićeni mediji kao što su muzika i video... "Spam": masovno slanje elektronske pošteputem našeg servera, promocija sajta na našem serveru masovnim slanjem e-mail-ova.

Q: Kako da sadržinu formulara sa mog sajta pošaljem sebi na mail?A : Koristite sistemski CGI pod nazivom "cgiemail", idite nahttp://www.vasdomen.co.yu/cgi-bin/cgiemail bićete prebačeni na MIT.EDU (sajt"proizvođača" ovog programa) na kome vas očekuje detaljno uputstvo na engleskom .Ukoliko vam je ovaj program previše komplikovan, skinite program "Form Mail"pisan u Perlu i instalirajte ga (potražite na http://freshmeat.net).

Q: Koji je broj vašeg računa?A : Za sve informacije, vezane za uplate, možete da se informišete kod naše službehosting prodaje na broj telefona: +38111/3065332.

Q: Kolika vam je standardna disk kvota?A : 2 GB. Ukoliko vam treba više nazovite 011/3065-332 i tražite hosting prodaju.

Q: Koliko e-mail adresa imam i kako da ih koristim?A : Pretpostavimo da ste uzeli domen PROBA.CO.RS. Prezentacija je tada vidljiva na:http://www.proba.co.rs. Vaše korisničko ime na serveru neka bude "user". Mi vamnameštamo da sve poruke poslate na [email protected] stižu u "poštansko sanduče"korisnika "user" na serveru pop3.verat.net .Dakle, [email protected] , [email protected]. , neš[email protected] ... će stićiu "user"-ovo sanduče. Na vama je da te poruke preuzmete sa pop3 servera ieventualno razvrstate.

Q: Mogu li da promenim domen?A : Pored YU, kod nas možete registrovati i COM, NET, ORG domene po ceni od 1650dinara. Za detaljnije informacije pozovite 011/3065-332 i tražite hosting prodaju.

Q: Kako se finalna verzija prezentacije prebacuje na vaš server?A : Koristite FTP (File Transfer Protocol),odnosno neki FTP "client" (poslužiće istandardni "Windows ftp.exe"). Adresa servera je www.vašdomen.co.yu , port je 21,korisničko ime je isto kao za "dial-up", šifra takodje (mada možete tražiti da vampromenimo šifru za "upload" prezentacije). Kada se ulogujete na server, na ći ćetese u vašem "HOME" direktorijumu. Tu ćete naći poddirektorijume i to: log (trenutnovas ne zanima) i www. Udjite u (pod)direktorijum www (cd www) i tamo prebacite svefajlove vezane za prezentaciju (html fajlove, jpg,gif slike...) (mput *.htm * ; mput *.jpg)

Q: Kako treba da se zove inicijalni html fajl?

Page 42: WebDizajn-Prirucnik

42

A : Ili index.html ili index.htm ili index.php ili index.shtml (poslednja 2 ima smislakoristiti samo ako smo vam omogućili podršku za PHP odnosno SSI).

Zadatak:

Uraditi FAQ stranu u kojoj će, kroz pitanja i odgovore, biti opisane studije na vašemsmeru.Pridržavati se sugestija za izradu FAQ strane izloženih u ovoj vežbi.Web stranica treba da ima oznaku strane – Moja FAQ stranica. Fajl snimiti podnazivom: faq.htm.Ako saradnik ne stigne da pregleda vašu vežbu na času, fajl u prilogu poslatielektronskom poštom na adresu: [email protected]

Literatura:

¨ Thomas A. Powell: Web dizajn, kompletan priručnik

¨ Jason Beaird: The Principles of Beautiful Web Design, Site Point, Australia,

2007.

Pomoć na Internetu:

¨ www.webpronews.com/.../why-faq-pages-could-boost-your-google-rankings

¨ http://unicode.org/faq/

¨ http://www.seo.com/blog/using-faq-pages-to-capture-organic-search-traffic/

¨ www.faqs.org

Page 43: WebDizajn-Prirucnik

43

Vežba broj 6

STRANE SA USLOVIMA KORIŠĆENJA INTELEKTUALNE SVOJINE

¨ Pojam i sadržina intelektualne svojine

¨ Softverska piraterija

¨ Klasifikacija softverske piraterije

¨ Osvrt na nastanak i razvoj autorskih prava

¨ Sadržaj ugovora o licenci¨ Zadatak:¨ Literatura:¨ Pomoć na Internetu:

Page 44: WebDizajn-Prirucnik

44

STRANE SA USLOVIMA KORIŠĆENJA INTELEKTUALNE SVOJINE

(Korisnički ugovor)

Pitanje zaštite intelektualne svojine izbija u prvi plan sa rastom uticaja Interneta, i,uopšte sa ekspanzijom masovne kulture.

Istovremeno sa razvojem Interneta, naglo je napredovao i proces digitalizacije. Danasse u digitalnom obliku mogu naći knjige, muzička dela, naučne i stručne publikacije,filmovi i dr. Isto tako prikazi umetničkih dela najrazličitijih vrsta su digitalizovani i putemInterneta postali dostupni zainteresovanim korisnicima. Tako je proces digitalizacijeznatno povećao vrstu i broj nematerijalnih dobara koja su se našla na tržištu, što jeotvorilo pitanje korišćenja intelektualne svojine.

Pojam i sadržina intelektualne svojine

Intelektualna svojina omogućava ljudima da poseduju i kontrolišu ostvarenu i priznatukreativnost i inovacije, koja postoji u nematerijalnom obliku (u obliku prava), isto kaošto ljudi poseduju vlasništvo nad materijalnim dobrima. Važno je da vlasnikintelektualne svojine ima pravnu mogućnost da kontroliše njenu upotrebu i da prodajomprava bude materijalno nagrađen. Ovo stimuliše obrazovane i talentovane ljude nakreativnost i inovacije, jer svoja dela mogu da prodaju. Sa druge strane, zaštitaintelektualne svojine podstiče ne samo njeno dalje stvaranje, već i rast privrednih granakoje su bazirane na njoj, kao što je, na primer industrija softvera, filmska industrija,izdavaštvo i druge.

Intelektualna svojina pojavljuje se u četiri osnovne oblasti:

¨ Patenti (izumi). Radi se o proizvodima ili procesima koji se primenjuju uindustriji. Pronalazač kao autor patenta, raspolaže pravom da odluči komeće dati odobrenje (licencu) za njegovo korišćenje i upotrebu. Patenti suobično aplikativnog karaktera, tj. radi se o izumima primenljivim napostojećoj tehnologiji. Prava patenata su teritorijalna, a ne internacionalna.To znači da su regulisana propisima i da se razlikuju od države do države.

¨ Trgovačke marke (brendovi) koriste se za robu i usluge da bi se napravilarazlika među različitim proizvođačima. Trgovačka marka može biti reč,grafički znak (logotip) ili kombinacija grafičkog rešenja i reči. Trgovačkamarka je sinonim za vizelni identitet proizvoda ili kompanije. Trgovačkemarke su zbog velikog značaja, pravno zaštićene ® . Marka se koriti da bi

Page 45: WebDizajn-Prirucnik

45

se ukazalo klijentima i javnosti da se radi o prepoznatljivom brendu(proizvod ili usluga, ili kompanija) koji je po kvalitetu i funkcionalnostisuperiorniji od drugih. Sportska oprema Nejk je kvalitetnija, superiornija isluži vlasniku kao statusni simbol u odnosu na kineske patike šangajke, kojese mogu kupiti na pijacama ili u prodavnicama sa kineskom robom.

¨ Dizajn. Dizajn se vezuje za izgled. Podrazumeva se izgled celog proizvoda.Dizajn obuhvata: grački oblik, konture, teksturu materijala i ornamentaciju.

¨ Autorska prava. Pod autorskim pravima podrazumeva se njihova zaštita.

Oblast primene autorskih prava je širok i primenjuje se na vizuelne i drugeumetnosti (film, softver, muzika, fotografiju i stvaralaštvo koje pripadapodručju multimedije u celini.

Autor koji kod odgovarajuće državne organizacije zaštiti delo autorskimpravom, poseduje ekonomsku zaštitu. To znači da autor raspolaže svojimdelom u potpunosti. Ako neko želi da koristi njegovo delo, podnosi zahtevza kupovinu licence, odnosno prava na korišćenje pod određenim uslovima,a neki put i na određeno vreme.

Ako neko uz pomoć Interneta, na primer, počne neovlašćeno, bez dozvoleautora ili asocijacije kojoj pripada i koju je ovlastio kao pravnog zastupnikada koristi delo nad kojim postoje autorska prava, može biti tužen sudu iosuđen po odredbama krivičnog zakonika. Osim što može biti od nadležnogsuda biti oglašen krivim, lice koje je bez dozvole koristilo delo zaštićenoautorskim pravima može biti osuđeno i na novčanu kaznu za štetu koju jepretrpela organizacija ili pojedinac, čije je delo neovlašćeno korišćeno.

Softverska piraterija

Softverska piraterija je neovlašćeno kopiranje kompjuterskog softvera i digitalnihmultimedijalnih sadržaja, namenjenih tržištu (muzika na diskovima i filmovi). Većinavlasnika računara shvata da je ovo nedozvoljen put pribavljanja softvera. Međutim,zbog slabe platežne moći, pribegavaju ilegalnoj nabavci kopija dela intelektualnesvojine, koja je u vlasništvu i zaštićena je uredno propisima o autorskim pravima.

Softverska piraterija počela je naglo da se širi sa ekspanzijom Interneta kaosvetske računarske mreže. Piratske kopije softvera i multimedijalnih sadržaja (svetšou biznisa) preplavile su Internet. Sajtovi za deljenje i razmenu fajlova (kao što je:www.rapidshare.com) i torenti, predstavljaju veliki izazov za kompanije kojeposlovnu aktivnost zasnivaju na proizvodnji i prodaji autorskih prava u oblastiindustrije softvera i multimedije. Ove web lokacije omogućavaju i upload i downloadsoftvera.

Klasifikacija softverske piraterije¨ Piraterija krajnjeg korisnika¨ Klijent – server Overuse¨ Internet piraterija¨ Hard disk loading¨ Softver counterfeiting

Page 46: WebDizajn-Prirucnik

46

Krajnji korisnik je konačni korisnik, koji je u svom računaru instalirao softver na kojinema licencna prava. Ovde može da se radi o pojedincu ili kompaniji. Neovlašćenimkorišćenjem softvera smatra se i korišćenje akademskog softvera, koji je u akademskojsredini besplatan, kad se koristi u komercijalne svrhe, radi sticanja materijalne koristi.

Klijent-server Overuse je vrsta piraterije koju najčešće primenjuju kompanije. Radi seo tome da je kompanija legalno platila licencu za određeni broj kopija softvera, astvarno je isti instaliran na većem broju računara.

Hard disk loading je oblik piraterije prodavaca računara. Da bi zadovoljili kupca, poredoperativnog sistema, na računar kupca instaliraju piratovani softver po njegovoj želji.

Softver counterfeiting Je vrsta piraterije softverom, gde se proizvede softver koji nijepod licencom, a po funkcionalnosti i korisničkom interfejsu u potpunosti odgovarasoftveru koji je zaštićen autorskim pravima.

Osvrt na nastanak i razvoj autorskih prava

Istorijski posmatrano, pravo intelektualne svojine pojavilo se prvi put 1545. godine. U tovreme pojavilo se notno pismo, dakle mogućnost da kompozitor muzičku formu zainstrument ili grupu instrumenata upriliči u notni sistem i stavi je na papir. Pismenimuzičari kupovali su takvo muzičko delo i izvodili su ga više puta, bez prisustva autora(kompozitora).

Kad je reč o poštovanju prava intelektualne svojine, Internet je kontroverzan medij. Najednoj strani, proizvođači softvera trude se da što više kopija svojih aplikacija prodajupreko Interneta. Na taj način smanjuju maržu, kao trošak trgovinskog posredovanja, aponekad smanjuju i porez, jer proizvod prodaju kupcu – građaninu druge države. Oko37% prodaja preko Interneta odnosi se na kupovinu softvera ili drugih multimedijalnihdigitalnih sadržaja, koji se, kupovinom preko platne kartice, mogu dovući u vaš računar.

Sasvim suprotno, Internet je rasadnik u kojem se mogu naći piratske verzijenajraznovrsnijeg softvera, namenjenog za različite platforme. Naravno, besplatno.

Na web lokacijama koje se bave prodajom digitalnog sadržaja preko interneta ilidavanjem besplatnog sadržaja sa besplatnom licencom, postoje web strane kojeobično nose naziv: Uslovi korišćenja. Na sajtovima na engleskom jeziku ove straniceimaju naziv Terms of Use. Linkovi koji ovde prema stranici o uslovima korišćenja,prema konvencijama na webu, nalaze se u podnožju web sajta.

Na web strani (ili stranicama) Terms of Use detaljno su objašnjeni uslovi korišćenjakomercijalnih elektronskih sadržaja, kao i besplatnih sadržaja koje kompanija nudikorisnicima za preuzimanje preko Interneta. Pogrešno se misli da je softver koji sepreuzima sa sajta kompanije kao besplatan (free) i da treba odmah ići na njegovopreuzimanje sa Mreže i instalaciju. Prilikom ponude registracije, u instalacionompostupku, ne treba odbijati besplatnu registraciju. Vlasnik koji je stavio u prometbesplatni digitalni sadržaj ima svoje ekonomske i marketinške motive i odbijanje da setakav softver registruje kao besplatan može uskoro da ima za rezultat da se taj softverviše ne može pokrenuti na vašem računaru.

Page 47: WebDizajn-Prirucnik

47

Slika 1. stranica Terms of Use - http://creativecommons.org

Na Internetu postoji konvencija o publikovanju dokumenta o uslovima pod kojima semože koristiti intelektualna svojina, koju će korisnik, pošto pročita uslove i prihvati ih,moći da preuzme u svoj računar. Ovaj dokument jeste Ugovor o pravu korišćenjaintelektualne svojine, ako za korisnike koji plaćaju to pravo putem elektronskogplaćanja na Internetu ili na drugi način, tako i za korisnike koji prihvataju ugovorneobaveze za delo koje ne podleže obavezi plaćanja. Dakle, predmet ugovora može biti idelo koje se daje besplatno, ali pod uslovima utvrđenim ugovorom. Uslovi pod kojimase mogu koristiti autorska prva skraćeno se u engleskoj verziji naziva EULA, a nasrpskom, skraćeno: TOU.

EULA dokumenat izveden je u formi teksta i ima karakter obligacionog akta slobodnijeforme (ugovora dve strane, koje ugovor prihvataju slobodnom voljom). Ono što EULAdokumenat razlikuje od klasičnog ugovora koji sastavljaju pravno učeni ljudi jestenedostatak paragrafa (Član 1, Član 2). Ovo je izbegnuto jer deluje vrlo ozbiljno i možeda ima za posledicu da kupac eventualno odustane od kupovine. Umesto paragrafa, uformi opisnog teksta korisniku je predloženo da preuzima pravo na korišćenjeintelektualne svojine pod komercijalnim nazivom „ sowtver ABC„. Probni Trial periodtraje mesec dana. Posle toga isto autorsko pravo može kupiti preko web sajta,plaćanjem preko odgovarajuće platne kartice.

EULA dokumenat sadrži link ka web stranici na kojoj su opširnije data licencna prava,kao i referentna e-mail adresa. U nekim slučajevima, tu je i telefonski broj za ostvarenje

Page 48: WebDizajn-Prirucnik

48

kontakta. Na kraju EULA dokumenta korisniku su na raspolaganju dve opcije:Prihvatam (I accept The agreement) ili: Ne prihvatam (I do not accept The agreement).Prihvatanjem ugovornih uslova otvara se sesija za transfer tražene datoteke u računarklijenta.

Slika 2. Ugovor o licenci za aplikaciju Word to PDF converter

Sadržaj ugovora o licenci

Na početku ugovora stoji da se radi o ugovoru o licenci sadržaja (digitalnog proizvoda,datoteke, multimedijalnog sadržaja, fotografija – navesti ime), koji se prihvata prekoInterneta.

Ako ne prihvatite u daljem tekstu određene uslove, nećete moći da koristite proizvodkoji je predmet ugovora i preuzima se preko ove web strane.

Odeljak 1

Dodela licence

Samo pojedinac kome je kompanija za prodaju softvera ili drugog multimedijalnogsadržaja (naziv kompanije) dodelila korisničko ime I lozinku, može da pristupi sadržaju ida koristi preuzeti softver ili multimedijalni sadržaj. Korisnik koji je kupio licencu poovom ugovoru ni u kom slučaju ne sme da proizvod koji je predmet ugovora stavi naInternet na server za deljenje i umnožavanje.

Sadržaj koji je predmet ugovora nije za dalju prodaju, već može koristiti samo za svrheunutrašnje stvari korisnika, kao što je vođenje svog poslovanja ili pružanje uslugaklijentima korisnika.

Page 49: WebDizajn-Prirucnik

49

Korisnik prihvata da preuzeti sadržaj sa web lokacije ima vrednost i da je u vlasništvukompanije koja je vlasnik web sajta, preko kojega se sadržaj distribuira preko Interneta.Suvlasnici sadržaja koji se preuzima pod uslovima korišćenja mogu biti i treća lica, kaošto su na primer provajderske kuće.

Ako korisnik želi da koristi preuzeti sadržaj na način koji nije predviđen ovim ugovorom,zatražiće dozvolu od kompanije u čijem je vlasništvu sadržaj, uz pismeni opis namene idruge namene (šta se zahteva). Takve dozvole može izdati samo kompanija u čijem jevlasništvu sadržaj koji je izložen prodaji preko ovog web sajta. Davanje takvih dozvolamože prouzrokovati dodatne naknade koje plaća korisnik.

Odeljak 2

Lozinka i zaštite

Korisničko ime i lozinka su lični i poverljivi. Zabranjuje se prenošenje ili deljenje sadrugim licima korisničkog ID-a i lozinke i otkrivanje korisničkog ID-a i lozinke odneovlašćenog lica, koje nije korisnik po ovom ugovoru. Kršenje ovih pravila, rezultiraoduzimanjem prava na dalje korišćenje sadržaja koji je korisnik kupio na web lokaciji iobavezu nadoknade štete kompaniji koja je vlasnik sadržaja.

Odeljak 3

Rezervacija prava

Kompanija prodavac sadržaja preko Interneta I provajderska kuća zadržavaju svaprava, izmene, poboljšanja sadržaja koji je predmet ugovora (upgrade i nove verzijesoftvera).

Odeljak 4.

Trajanje i prestanak

Ovaj ugovor stupa na snagu odmah. Ovaj sporazum će biti na snazi godinu dana i bićeautomatski obnavljan narednih godina, osim ako nije prekinut iz razloga koji su uugovoru navedeni.

Ugovorene strane na sopstveni zahtev imaju pravo raskida ugovora i pre istekanjegovog trajanja, s tim što mora obavestiti drugu stranu o tome pismenim putem,mesec dana pre raskida.

Odeljak 5

Garancije kompanije koja je vlasnik sadržaja koji je predmet kupovine preko Internetada ima pravo da dodeli licencu korisniku i da se sadržajem ne krše prava intelektualnesvojine trećih lica (odredba koja govori o tome da nije u pitanju trgovina piratovanimsoftverom).

Page 50: WebDizajn-Prirucnik

50

Odeljak 6

Naknade štete po korisnika

Korisnik ima pravo na naknadu štete ako se pokaže da je kupio sadržaj za koji imaautorsko pravo druga kompanija, koja mu osporava pravo na licencu. Naknadapodrazumeva povraćaj novca kao i sudske i advokatske troškove.

Odeljak 7

Autorska prava

U pogledu autorskih prava, obe strane će se pridržavati Zakona o autorskim pravima idrugih konvencija koje uređuju ovu materiju.

Odeljak 8

Odgovornost korisnika

Korisnik preuzima svaku odgovornost u vezi planiranih rezultata koje je imao da ostvarisa sadržajem koji je predmet ovog ugovora. Ako kupovinom sadržaja nije ostvarioposlovne rezultate koje je planirao, strana prodavac ne snosi nikakvu odgovornost.

Odeljak 9

Izuzeće od garancije

Odabrani sadržaj (proizvod) za korisnika je dat “kao što jeste“ i kompanija ne dajegaranciju u pogledu njegove upotrebe bez grešaka (bagova).

Odeljak 11

Opšte

Ovaj ugovor će biti regulisan zakonima države Srbije. Konvencija Ujedinjenih Nacijaneće upravljati ovim ugovorom.

Isključiva nadležnost za sve akcije koje proističu iz ovog ugovora nadležan je Prviopštinski sud u Beogradu.

Zadatak:Uradite Ugovor o licenci za zamišljeni proizvod u vašem vlasništvu koji se prodajepreko Interneta (softver, igra, multimedijalne datoteke, e-book).

Page 51: WebDizajn-Prirucnik

51

Proizvod izložen prodaji na Internetu ne može biti roba u fizičkom smislu, koja seisporučuje preko zamoljene organizacije (na primer, preko pošte), već datoteka koja sepo prihvatanju ugovornih uslova isporučuje u arhiviranoj formi.

Ugovor, prema opisanoj konvenciji u pogledu sadržaja, treba da bude na srpskomjeziku i pisan lokalizovanim pismom. U softveru za izradu web sajtova, za izradu ovestrane koristiti alatke za izradu formulara.

Uraditi izlaznu stranu, koja se otvara pokretanjem dugmeta NEXT. Na izlaznoj straninalazi se kratka informacija o vlasniku, nazivu digitalnog proizvoda, tipu datoteke upogledu dužine prava korišćenja (freeware, shareware, trial), kontakt adrese (www, e-mail) i link za preuzimanje datoteke arhivirane .ZIP arhiverom.

Datoteke u .htm formatu snimiti na sledeći način.

Dodeliti oznaku strane: Ugovor o licenci – naziv softverskog proizvoda. Datotekusnimiti pod nazivom: ugovor.htm. Izlaznoj strani dodeliti oznaku: Naziv softvera koji senudi korisniku (npr. naziv video igre). Drugu datoteku snimiti pod nazivom:program.htm.

Literatura:

¨ Thomas A. Powell: Web dizajn, kompletan priručnik

¨ Rastko Ilić: Osnovi intelektualne svojine

¨ Mr Snežana Šarboh: Elektronska trgovina i intelektualna svojina

¨ Jason Beaird: The Principles of Beautiful Web Design, Site Point, Australia,

2007.

Pomoć na Internetu:

¨ http://creativecommons.org/

¨ http://business.cch.com/help/License_Agreement.htm

¨ http://www.microsoft.com/scg/info/cpyright.mspx

¨ www.truste.com

Page 52: WebDizajn-Prirucnik

52

Page 53: WebDizajn-Prirucnik

53

Vežba broj 7

STRANE NAMENJENE ŠTAMPANJU

¨ Priprema strane za štampu

¨ Izrada strane za štampu u HTML-u¨ Zadatak 1:

¨ Izrada strane za štampu u CSS-u

¨ Izrada strane za štampu u .PDF formatu¨ Zadatak 2:¨ Literatura:¨ Pomoć na Internetu:

Page 54: WebDizajn-Prirucnik

54

STRANE NAMENJENE ŠTAMPANJU

Sve do početka milenijuma na Webu su se mogle sresti stranice optimizovane zaobjavljivanje na monitoru korisnika. Web dizajneri su u međuvremenu shvatili dakorisnici često imaju potrebu da web strane štampaju na svojim štampačima, kako bise služili odgovarajućim sadržajem i u vremenu kad se ne nalaze pored računara inisu povezani na Internet.

Izlaz je pronađen u tome da se, uporedo sa stranicom optimizovanom za štampu naekranu, rade stranice namenjene štampanju.

Danas je uobičajeno da se celokupan sajt ili one celine za koje se pretpostavlja da bimogle biti interesantne korisnicima za štampu, prilagođavaju potrebama štampe.

Slika 1. Stranica – www.b92.net, opciono nudi štampu.

Priprema strane za štampu

Strana za štampu može se pripremiti na tri načina:

1. Izradom posebne .htm datoteke koja se po sadržaju značajno razlikuje od straniceprirpemljene za štampanje na ekranu.

2. Izradom stranice koja sadrži eksplikaciju CSS 2.0 specifikacije, namenjeneštampanju.

3. Izradom stranice u .PDF formatu

Page 55: WebDizajn-Prirucnik

55

Izrada strane za štampu u HTML-u

Web dizajneri najčešće pribegavaju izradi stranice za štampu, oslanjajući se nastranicu pripremljenu za ekran. Ovde važe sledeća pravila. Sa stranice namenjeneekranu briše se zaglavlje sajta, a postavlja jedino logotip u gornjem levom uglu.Isključuje se kaskadni stil, koji je upravljao sadržajem na stranici optimizovanoj zaekran, isključuje se celokupan navigacioni sistem i isključuje se sekcija (kolona, desno)za promocije (baneri, flash objekti i sl).

Na taj način postiže se efekat da se sa stranice isključi sve što nije bitno za štampanimaterijal. Isključivanjem objekata u bitmapiranoj i vektorskoj grafici postiže se uštedatonera štampača korisnika.

Slika 2. stranica www.b92 namenjena ekranu

Page 56: WebDizajn-Prirucnik

56

Slika 3. Ista stranica www.b92 namenjena štampanju

Zadatak 1:

Po slobodnom izboru pronađite na webu stranicu. Snimite sadržaj stranice u računar.Editujte datoteku u programu DreamWeaver i napravite novu stranicu za štampanje.Stranicu snimite pod naslovom: print1.htm

Studenti koji ne završe zadatak na vreme, stranicu za štampu, zajedno sa stranicomza publikovanje na ekranu treba da pošalju kao arhivu na email adresu:[email protected].

Izrada strane za štampu u CSS-u

CSS specifikacija 2.0 omogućava prilagođavanje html dokumenta štampanju.

U zaglavlje web strane potrebno je dodati tag:

<LINK REL=”alternate” MEDIA=”print”

HREF=”moj_dokument.ps”

TYPE=”application/postscript”>

Page 57: WebDizajn-Prirucnik

57

Pomoću CSS-a mogu se definisati beline, paginacija strana za štampu, veličinapapira, naslovi i međunaslovi. Jednostavno, primenom CSS specifikacije za štampumoguće je optimizovati dokumenat za štampu koji ispunjava standarde u pogledubelina, implementiranih grafičkih objekata, uređenja teksta, veličine naslova ipodnaslova i sl.

Izrada strane za štampu u .pdf formatu

Web dizajneri često se opredeljuju da stranice namenjene štampanju pripreme u PDFformatu. Neki programeri PDF format koriste i za publikovanje sadržaja na ekranu. Pdfformat je u velikoj upotrebi u elektronskom izdavaštvu. Početkom milenijuma potisnuoje druge softverske alate, tako da se danas pripreme za ofset štampu rade u PDF-u.

Poslednjih nekoliko godina Google pretraživač ovladao je tehnologijom indeksiranjasadržaja datoteka u PDF formatu, što je ovaj format učinilo još više upotrebljivim natržištu multimedije.

Za ofset štampu datoteka treba da bude optimizovana na gustinu od 300-600 pikselapo inču. Takođe, priprema mora biti u formatu Mirrored Output. Radi se o tome daslika koja se dobija na ekranu datoteke namenjene štampariji treba da ima oblik slike uogledalu – čita se s desne prema levoj strani. Podešavanje ove opcije vrši se iz menijaPrint/Propeprties/Advanced/PostScript Options/Mirrored Output/Yes.

Slaba strana upotrebe PDF datoteka na web stranama sastoji se u tome što neki webpregledači ne sadrže plug in koji bi omogućavao da se PDF datoteka obradi u čitačuweb-a. Naprotiv, ako nemate Acrobat Reader – nećete moći da učitate datoteku. Ovdeje zgodno napomenuti da program Foxit reader jeste veoma dobar i brz pregledačPDF datoteka.

PDF format za štampu treba upotrebljavati u situacijama kad HTML i CSS kodom nemožete da izrazite sadržaj koji želite da ponudite korisniku. Na primer, ako se radi odokumentu koji sadrži tehničke crteže i sl, takav dokument treba konvertovati u PDFdatoteku.

Za izradu PDF datoteke koristi se program Adobe Acrobat (tekuća verzija je 9.0). Sveverzije od 7 – 9.0 uspešno pokrivaju pregledače PDF-a.

Zadatak 2:

Uradite u softveru za obradu teksta tabelu u vodoravnoj (landscape) orijentaciji podnazivom: Raspored nastave druge godine smera NRT za tekući semestar. Datotekuuraditi u beserifnom fontu. Datoteku snimiti pod nazivom: nrt3.doc. Datotekukonvertovati u PDF dokumenat. Gustina grafike – 300 piksela; format papira zaštampu: A4.

Page 58: WebDizajn-Prirucnik

58

Studenti koji ne završe zadatak u toku vežbi, stranicu konvertovanu iz Worda u PDFformat treba da pošalju kao arhivu na email adresu: [email protected]

Slika 4. Korisnički interfejs PDFConverter (meni Print)

Literatura:

¨ Jason Beaird: The Principles of Beautiful Web Design, Site Point, Australia,2007.

¨ Thomas A. Powell: Web dizajn, kompletan priručnik, Mikro knjiga, Beograd,2001.

Pomoć na Internetu:

¨ www.elitesecurity.org¨ www.dizajnzona.com¨ www.devprotalk.com/¨ http://foxitsoftware.com/pdf/rd_intro.php

Page 59: WebDizajn-Prirucnik

59

Vežba broj 8

VIZUELNI IDENTITET KOMPANIJE

¨ Kompanijska boja

¨ Klasifikacija logotipa po načinu dizajniranja

¨ Kombinacija grafike i tipografskih elemenata

¨ Ligature¨ Zadatak:¨ Pomoć na Internetu:

Page 60: WebDizajn-Prirucnik

60

VIZUELNI IDENTITET KOMPANIJE

Početkom šezdesetih godina u Americi nastao je pojam korporativnog identiteta.Korporacijom se u ekonomiji naziva velika ekonomska organizacija, koja posedujevlasnički kapital milionske vrednosti i plasira proizvode ili usluge ne samo u matičnojdržavi nego i u drugim zemljama.

Svetska ekonomija šezdesetih godina dvadesetog veka počela je da beleži snažan rasti širenje na svetsko tržište. Pojavio se veliki broj ekonomskih organizacija (preduzeća) iotud se nužno nametala potreba za kreiranjem korporativnog identiteta. Bilo je, naime,potrebno, u javnosti stvoriti projekciju „lica“ kompanije, tako da kompanija ima nekeosobene crte i razlikuje se od drugih kompanija koje na istom tržištu izlaze sa istimproizvodom ili uslugom. Dakle, konkurencija je naterala kompanije da se bavedimenzioniranjem sopstvenog lika, okrenutog prema javnom mnjenju i, uopšte,klijentima.

Oko kreiranja korporativnog identiteta razvile su se čitave nauke. Nema kompanije kojaje danas izložena svetskom tržištu, a da ne brine o svom korporativnom identitetu.Korporativni identitet, ili „lice koje o sebi kompanija stvara“ je višedimenzionalan. Njimese bave stručnjaci za kreiranje tog identiteta, kojima je ovo stalni zadatak. Pomenimosamo neke dimenzije korporativnog identiteta: odnos kompanije prema gorućimpitanjima današnjice (zaštita i unapređenje životne sredine i nezaposlenost). Naravno,kompanija o ovim tako značajnim pitanjima za društvene kolektivitete i pojedincezauzima pozitivan stav. Kompanije javno doniraju brojne društvene akcije, koje se odstrane običnih ljudi mogu oceniti humanitarnim. Kompanija formira zadužbine, odaklese finansira školovanje izuzetnih talenata. Finansiranje projekata u oblasti kulture, naprimer pozorišnih predstava, sportskih takmičenja (generalni sponzor) i sl, jesu samoneke od aktivnosti na kreiranju korporativnog identiteta.

Korporativni identitet delom se realizuje kroz umetničku stranu – vizuelni identitetkompanije. Korporativni identitet uspešno se gradi ako kompanija ima već urađenvizuelni identitet, kao „vizuelni znak prepoznavanja“ u odnosu na ostale kompanije.Lice kompanije se u javnosti pojavljuje kroz njen vizuelni identitet.

Vizuelni identitet kompanije sastoji se iz logotipa i kompanijske boje.

Logotip je grafički znak kompanije ili institucije. Izveden je u jedinstvenom grafičkomstilu i predstavlja mešavinu grafičkih elemenata (likovnih i tipografskih celina) ili jeeksplikacija specifičnog grafičkog rešenja.

Logotip treba da bude izveden jednostavno i da se jasno i trenutno prepoznaje kaoaplikacija kako u boji tako i u crno beloj štampi. Grafički složeni logotipi danas nisu umodi i teško se pamte. Logotip ima zajedničkog sa brendom kompanije. U tom smislulogotip je ništa drugo do deo vizuelnog identiteta kompanije, organizacije ili institucije.Logotip predstavlja firmu, njenu delatnost i izdvaja je od konkurencije. Jednostavnost

Page 61: WebDizajn-Prirucnik

61

oblika i forme, izbor boja i moderna tipografija i likovno rešenje, odlike su dobroglogotipa.

Kompanijska boja

Sastavni deo vizuelnog identiteta jeste kompanijska boja. Zaglavlje i interfejskorporativnog sajta podrazumevaju implementaciju kompanijskog logotipa u levom uglui pozadinsku boju kompanije, koja čini zaglavlje i centralni navigacioni sistem. Logotipkompanije je vruća tačka (link) koji prema konvenciji na Webu vraća korisnika napočetnu stranu.

Kompanijska boja ne sme biti „neodređena“. Najbolje je za kompanijsku boju uzetijednu od šesnaest osnovnih boja. Kompanijska boja treba da odgovara boji koja semože u izvornom obliku štampati u ofset štampi. To znači da izabrana boja treba dapripada jednoj od 800 boja iz engleskog industrijskog standarda Pantone.

Prilikom izbora kompanijske boje treba voditi računa o značenju boja u našoj kulturi iizabrati boju koja odražava polje delatnosti kompanije.

Klasifikacija logotipa po načinu dizajniranja

1. Logotip izveden iz niza usklađenih grafičkih elemenata. Ovaj tip logotipakarakterističan za kompanije koje postoje dugi niz godina i koje su svoj vizuelniidentitet uredile u nekom prošlom vremenu.

Slika 1. Logotipi Beogradskog univerziteta i Košarkaškog kluba C. zvezda

Ovom tipu logotipa pribraja se logotip Visoke škole elektrotehnike i računarstvastrukovnih studija.

Slika 2. Logotip Visoke škole elektrotehnike i računarstva

Logotipima predstavljenim na slici 1. i 2. nedostaje modni stil, karakterističan za epohuglobalizacije. Sastavljeni su iz više likovnih ili tipografskih elemenata i zatvoreni su ucrtež. Ovakvi logotipi teško se pamte. Osnovni smisao – lako i brzo prepoznavanjelogotipa kao vizuelnog identiteta kompanije ili institucije ovim tipom zatvorenog logotipanije zadovoljen.

Page 62: WebDizajn-Prirucnik

62

Globalizacija je sinonim za otvorenost tržišta, kultura, komunikacija, slobode, migracijastanovništva… Ništa što je omeđeno unutar kruga ili druge geometrijske slike nije uduhu globalizacije.

Logotip škole, osim što nije moderan, jer je omeđen krugom, ne emituje nikakvuporuku. Iako škola ima sedam studijskih programa, i pored svih programskih razlika –ono što bi u formi vizuelnog identiteta ujedinilo sve programe u jedan – jeste tipografskilogotip malog slova – e, vešto dorađen. E simbolizuje sve što je elektronski zasnovano– od elektronike do elektronskog poslovanja.

2. Tipografski logotip. Tipografski logotip dizajniran je iz fontova. Kompanija iliinstitucija može biti predstavljena jednim ili sa dva slova ili punim nazivomkompanije, napisanim u odgovarajućem asocijativnom fontu. Tipografski logotipismatraju se modernim i lako se pamte.

Slika 3. Stari IBM logo (1945) i aktuelni, čisto tipografski

Danas, najveći broj kompanija ima tipografske logotipe ili jednostavne grafičkeotvorene logotipe, koji se lako uočavaju i pamte. Logotip nosi brend porukupotencijalnom potrošaču.

Slika 4. Nike – pokret u prostoru

Page 63: WebDizajn-Prirucnik

63

Slika 5. Vešto dizajnirani tipografski logotipi – Idea i Moja kravica

Kombinacija grafike i tipografskih elemenata

Jedan broj kompanija i institucija odlučio se za složenija rešenja: kombinaciju likovnihelemenata i tipografije. Na taj način, tipografijom kao tekstom dopunjen je vizuelniidentitet, koji je naglašen likovnim rešenjem.

Slika 6. Komtrejd, novi logotip; Biciklistički savez Jugoslavije i AerodromBeograd

Logotip Aerodroma Beograd nastao je ranije. Aerodrom je sagrađen 1962. godine ivizuelni identitet toga vremena potvrđuje izrečenu tezu.

Ligature

Ligature su, najjednostavnije rečeno, dva ili tri slova spojena u jedan slovni znak.Slovni znak nastao tipografskom obradom na ovaj način može da bude logotipkompanije. Stari Egipćani su u svojim neponovljivim hijeroglifima spajali znake u jedan.Tako su nastale prve ligature u istoriji, pre pojave industrijskog doba i marketinga:

Page 64: WebDizajn-Prirucnik

64

Slika 7. Hijeroglifi: ligatura nastala spajanjem znakova golub i pismo (pismonoša)

Najeminentniji srpski web dizajner Goran Pilipović - „Bluesman“ dizajnirao je logotipstudijskog programa Elektronsko poslovanje kao susretanje slova E i B – ElectronicBussines:

Slika 8. logotip studijskog programaElektronsko poslovanje (ligatura)

Slika 9. Logotip smera Elektronsko poslovanje u zaglavlju web strane

Zadatak:U softveru za bitmapiranu grafiku uradi logotip virtuelne kompanije ili institucije, zapotrebe poslovnog sajta (domaći zadatak broj 2). Logotip snimiti u formatu .JPG podnaslovom: moj_logo.jpg

Pomoć na Internetu:¨ http://www.serbianlogo.com/ - kolekcija od preko 1800 logotipa srpskih

firmi, organizacija i institucija

¨ http://coollogodesigns.blogspot.com/2009/09/10-posts-of-inspirational-and-creative.html - cool logo design

¨ http://www.adfont.com - besplatni fontovi

¨ www.dizajnzona.com

Page 65: WebDizajn-Prirucnik

65

Vežba broj 9

KOMPOZICIJA FOTOGRAFIJE

¨ Simetrična kompozicija

¨ Asimetrične kompozicije

¨ Tačka interesa

¨ Pravila postavljanja objekata i linija unutar fotografije

¨ Pravilo trećine

¨ Zlatni presek

¨ Pravilo dominacije¨ Zadatak:¨ Literatura:¨ Pomoć na Internetu:

Page 66: WebDizajn-Prirucnik

66

KOMPOZICIJA FOTOGRAFIJE

Web definitivno ne može bez fotografije. Od pojave pregledača Mosaic (1993)fotografija je sve više zastupljena na webu. Postoje berze fotografija, gde se radovifotografa iz celog sveta mogu kupiti ili preuzeti besplatno, pod uslovom da i viparticipirate sa svojim radovima. Postoji, takođe, plac na Internetu gde možetepokazivati svoje fotografije zaljubljenicima u ovu uvek aktuelnu umetnost.

Zamislite se na trenutak – svuda oko vas fotografije. Fotografije sa letovanja,rođendana i venčanja; sa turističkih putovanja. Amaterske. Razlikuju se od fotografijana profesionalno urađenim web lokacijama, fotografija u raskošno opremljenimmagazinima, pa i u dnevnim novinama. Druga vrsta fotografija jesu deloprofesionalaca.

Ono što razlikuje profesionalnu fotografiju od amaterske jeste poštovanje pravilakompozicije.

Reč kompozicija u etimološkom značenju predstavlja nešto što je celina, sastavljena izdelova, objekata i linija; miks.

Kompozicija fotografije sastoji se iz pravila, koja su izvedena iz raznih područja ljudskedelatnosti koje su se razvila prije pojave fotografije kao npr. slikarstva, dizajna iarhitekture.

Šta je kompozicija? Slika po pravilu ima panoramsku ili portret orijentaciju pravougaonioblik). Veština rasporeda sadržaja (različitih elemenata) unutar granica pravougaonikajeste kompozicija.Drukčije rečeno, kompozicija je pojam koji u likovnoj umetnosti označava strukturu kojugrade likovni elementi u svom međusobnom odnosu.

Šta je zajedničko fotografskoj, muzičkoj, slikarskoj, vajarskoj i železničkoj kompoziciji?Razmeštaj elemenata unutar celine – gde je šta i koliko čega ima!

Kompozicija može biti simetrična i asimetrična.

Simetrična kompozicija retko se primenjuje. Koristi se kad postoji razlog da se nafotografiji nešto snažno izrazi. Nedostatak je u tome što ljudi nisu navikli na simetričneprizore iz života, tako da ovaj oblik kompozicije kratko zadržava pažnju.Simetrična kompozicija pretpostavlja oblik koji se na slici nalazi u centru, napodjednakom odstojanju od gornje, donje, leve i desne ivice slike.Dakle, unutar fotografije postoji jedan ili više elemenata, koji mogu ispunjavati sledećeoblike: simetričan, dijagonalan, vertikalan, vodoravan, na polovini, kružni i piramidalan.

Page 67: WebDizajn-Prirucnik

67

Slika 1. Jagoda u simetričnoj kompoziciji.

Slika 2. P. Staletić –Mesečina na Zlatnim Pjascima (simetrična kompozicija)

Simetrična kompozicija u fotografiji I vizuelnim umetnostima koristi se vrlo oprezno.Umetnik pribegava ovoj vrsti kompozicije, koja stavlja objekat u centar fotografije, kadželi nešto snažno da naglase.

Smisao primene simetrične kompozicije je da izazove šok kod gledaoca.

U zavisnosti od scene, simetrija može da bude odlična za dobru fotografiju, ali samoako postoji jaka kompozicija i dobra tačka interesovanja, u suprotnom je treba upotpunosti izbegavati.

Osnovni nedostatak simetrije jeste u nespremnosti gledaoca da se duže zadrži na slici.

Zakon dobre fotografije: zadržati što duže gledaoca na slici.

Asimetrične kompozicije

Na sledećim fotografijama biće prikazane najčešće korišćene asimetrične kompozicije.Na nekim fotografijama kao primer uzete su slike starih renesansnih majstora. Iz togase može izvući zaključak da fenomen kompozicije ili pravila miksa fotografskihelemenata i linija postoje u kulturi u prošlosti I da je poznavanje I dosledna primena tihpravila pojedine umetnike činilo umetničkim veličinama u svom vremenu. Istorija im je,

Page 68: WebDizajn-Prirucnik

68

takođe, odala priznanje jer su ostali besmrtni do današnjih dana, pošto se njihovaimena I dela pominju i danas i služe kao primeri iz kojih se uči .

Asimetrične kompozicije u likovnim umetnostima i na fotografiji dominiraju, jerse u suštini doživljaj čoveka sveta koji ga okružuje, percipira čulom vida,najčešće asimetričan. Drugim rečima, naši svakodnevni vizuelni doživljajistvarnosti sastoje se iz prizora u prirodi koji je po pravilu asimetričan. Otudapravila kompozicije i potreba da se vizuelno izrazi na način na koji postoji uporetku stvari u prirodi.Asimetrične kompozicije objekata i linija, kao standardne celine ili rešenja,prikazane su na sledećim fotografijama.Dijagonalna kompozicija veoma je popularna kod likovnih umetnika. Na slici (sl. 3)srednjevekovnog slikara i arhitekte Mikelanđela – Polaganje u grobnicu, prikazan jebiblijski detalj polaganja tela Isusa Hrista u grobnicu.

Zamišljena dijagonala počinje u levom donjem uglu i završava se u gornjem desnomuglu. Na toj liniji postavljeni su svi likovni elementi.

U skladu sa pravilima čitanja i pisanja u hrišćanskoj, zapadnoj civilizaciji, slika se čitapo značaju likova s leve u desnu stranu. Umetnik je i o tom važnom detalju vodioračuna.

Slika 3. Dijagonalna kompozicija:Mikelanđelo: Polaganje u grobnicu Slika 4. Vodoravna kompozicija. Davinči: Tajna

večera

Page 69: WebDizajn-Prirucnik

69

Slika 5. Vertikalna kompozicija: Breze

Slika 6. Piramidalna kompozicija: RubensSjedinjenje s Bogom

Slika 8 Linijska kompozicija – Vetrenjače unizu u Holandiji.

Linije I oblici predstavljaju osnovni građevinskimaterijal fotografa.

Veštom kombinacijom linija i objekata u okvirupravila kompozicije moguće je ostvaritizanimljive fotografije.

Slika 7. Kružna kompozicija:P. Staletić: Kupole Hrama SvetogSave na Vračaru

Pored najčešćih oblika fotografske kompozicije, postoje pravila raspoređivanja oblika ilinija, kao osnovnog materijala unutar prostora koji je obuhvaćen fotografijom. Sanačela opšteg i šablona, koji je prikazan u odeljku o oblicima kompozicije, prelazimo

Page 70: WebDizajn-Prirucnik

70

na dublju analizu, ulazimo u unutrašnjost fotografije I istražujemo moguće tipoveodnosa između njenih elemenata I linija.

Tačka interesa

Tačka interesa bitna je zafotografiju kao što je maticabitna za košnicu. Okopostavljene tačke interesa krećuse u odgovarajućimproporcijama I odnosima oblici Ilinije, a tačka interesa je onajobjekat ili linija koja se odmahprimeti, prema kojem sve teži Ikoja dominira fotografijom.Fotografija, da bi odigrala uloguda što duže zaokupi pogledgledaoca I da pošalje snažnuvizuelnu poruku, mora imatijasno izraženu tačku interesa.Fotografija može da ima samojednu tačku interesa.Postavlja se pitanje – gde nafotografiji smestiti tačku interesa?

Slika 9. Tačka interesa na dijagonalnoj kompozicijipredstavlja naočare (pravilo trećine)

Pravila postavljanja objekata i linija unutar fotografije

Pravilo trećine

Deoba na trećine u vizuelnim umetnostima i svakidašnjem životu izaziva estetskiosećaj za skladnost i slikovitost. Fotografija snimljena poštovanjem pravila trećineprijatno se projektuje u oko gledaoca i deluje normalno i logično. Slika snimljena naosnovu ovog pravila zadržava dužu pažnju gledaoca, što ima za rezultat da je gledalacu stvari analizira i postepeno uživa u otkrivanju njenih skrivenih poruka.

Princip trećine smatra se danas osnovnim i najvažnijom principom u pravljenjukompozicije u vizuelnim umetnostima.

Pravilo trećine sa podjednakim uspehom se primenjuje kod fotografija snimljenim upanoramskoj i portret orijentaciji.

Page 71: WebDizajn-Prirucnik

71

Slika 10 . Kružićima su označenetačke interesa kod pravila trećine.Ovde treba smestiti objekte ili linije.Sredinu izbegavati.

Slika 11. P. Staletić: Ruze u mojoj basti(dijagonalna kompozicija).

Zlatni presek

Zlatni presek je vrlo popularan način kombinacije objekata i linija unutar fotografije kaoceline. Vrlo je sličan pravilu trećine. Shematski se može prikazati na sledeći način:

Slika 12. Primena pravila zlatnog preseka Slika 13. Primena pravila zlatnog preseka

Page 72: WebDizajn-Prirucnik

72

Slika 14. Kod zlatnog preseka tačka interesa jematematički izračunata. Ovde važi princip: manjideo, odnosi se prema većem, kao veći prematrećini.

Slika 15. Rembrant (holandskislikar, XVII vek); autoportret. Poljeinteresa – desno oko nalazi se uzlatnom preseku.

Sličnosti i razlike u pravilima kompozicije Pravilo trećine i pravilo Zlatni presek

Slika 16. Postoji velika sličnost, ali ne ipodudarnost između pravila trećina ipravila zlatnog preseka.

Na slici su prikazani unutrašnji kružićikao mesta tačke interesa kod primenepravila zlatnog preseka.

Spoljni kružići na slici predstavljajutačke interesa u koje treba smestitiobjekte ili linije, kod primene pravilatrećina.

Sl. 16. Pravilo trećine (spolja) i z. presek - unutra

Pravilo dominacije

Izvorno i etimološki, dominacija (od lat. dominari - gospodariti, vladati) označavaprevlast, ono što se ističe prema ostalom. U likovnom jeziku dominantom nazivamoonaj element koji čini glavni sadržaj i vizualni centar pažnje i u kompoziciji.

Kod dominacije kao fotografskog izraza, potrebno je istaći kontrasno svojstvo premaostatku objekata i linija fotografije.

Page 73: WebDizajn-Prirucnik

73

Slika17. P. Staletić –Razgledanje bižuterije(pravilo trećine)

Sve treba da bude podređeno i u drugom planu u odnosu na objekt interesa.Dominacija se ostvaruje oblikom, svetlinom i veličinom.

Zadatak:

U softveru za izradu web sajtova uradite četiri strane. Svaka od strana treba dasadrži fotografiju iz vaše arhive ili sa weba.

1. Napravite tri strane sa fotografijama od kojih svaka pokriva jedan odopisanih oblika kompozicije (dijagonalni, vodoravni, kružni, linijski,piramidalni, simetrični). Tekstom objasniti iz kojih razloga izabranafotografija na vašoj web strani pripada odgovarajućem obliku.

2. Napravite jednu stranu sa fotografijom u kojoj će biti primenjeno jedno odopisanih pravila kompozicije – pravilo trećina, zlatni presek ili dominacijai opišite ispod slike primenu pravila na konkretnoj fotografiji.

3. Sve četiri web strane treba da imaju ispunjeno zaglavlje premauputstvima sa prve vežbe.

Literatura:

¨ Milan Fizi, Fotografija, Zagreb, 1966.¨ Belić Đulijano, Škola fotografije, IV izdanje, Pula, 2004.

Pomoć na Internetu:

¨ http://gawno.com/2009/05/78-photography-rules¨ http://users.beotel.net/~fotogram/stranice/Licni_pogled_tekstovi.htm¨ http://stock.d2.hu¨ http://www.zuadobank.com¨ www.corbis.com

Page 74: WebDizajn-Prirucnik

74

Page 75: WebDizajn-Prirucnik

75

Vežba broj 10

OPTIMIZACIJA FOTOGRAFIJE ZA WEB

¨ Obrada digitalne fotografije za publikovanje na webu

¨ Dodavanje teksta

¨ Optimizacija slike na rezoluciju od 72 piksela¨ Pomoć na Internetu

Page 76: WebDizajn-Prirucnik

76

OPTIMIZACIJA FOTOGRAFIJE ZA WEB

Web sajt se ne može zamisliti bez fotografija. Zaglavlje sajta, kao podrazumevajućacelina, obično je urađeno kao slika (fotografija).

Pregledači Weba (browseri), kao što su: Internet Explorer, Firefox, Google Chrome,Opera, Safari, Android i drugi, mogu da obrade i prikažu tri vrste fotografija na ekranukorisnika - .JPG, GIF i PNG.

Svaki drugi bitmapirani format (BMP, RAW, TIF) nije podržan na Webu i njegovaupotreba na web stranama tražiće od korisnika da fotografiju snimi na određenojlokaciji u računaru, kako bi je odloženo pregledao preko drugih softverskih alata (naprimer, preko pregledača bitmapiranih slika ili preko editora za bitmapiranu grafiku).

Digitalni foto aparati u potpunosti su zamenili ranija rešenja – mehaničke aparate kojisu koristili celuloidnu filmsku traku. Digitalni aparat sadrži jedan ili više foto osetljivihCMOS uređaja, smeštenih iza objektiva, koji može kvalitetno i verno da prikaže prizorkoji je fotograf želeo da sačuva.

Na tržištu je prisutan veliki broj digitalnih foto aparata, različitih robnih marki, satehničkim karakteristikama koje ih čine amaterskim ili profesionalnim uređajem.

Gustina zapisa fotografije meri se po inču površine i iskazuje se megapikselima.Fotografija je slika; ima oblik pravougaonika i gustina slike dobija se kada se pomnožistranica A stranicom B.Profesionalnim digitalnim foto aparatima pribrajaju se uređaji koji imaju izmenljiveobjektive, ležište za priključak eksternog blica i dva formata digitalne fotografije: JPG iRAW.

Za razliku od JPG formata, koji je relativno skroman i predstavlja jedini digitalni formatbitpamirane slike na amaterskim foto aparatima, RAW format sa 16 miliona boja pružadaleko veće izražajne mogućnosti. Ovaj format može se obraditi u profesionalnimeditorima za digitalnu fotografiju, kao što je PhotoShop.

Amaterski digitalni foto aparati imaju obično jedan CMOS uređaj (profesionalni moguimati do tri), objektiv sa mehaničkim približavanjem – zumom, od 3 -20 puta i gustinuzapisa slike u memoriji od 8 – 12 megapiksela po inču. Objektivi nisu izmenljivi, adodatna rasveta (blic) integrisana je u uređaj, iznad objektiva.

Fotografije načinjene digitalnim foto aparatima namenjene su po pravilu fotolaboratoriji.

Ako bi ste fotografiju od 5 i više megapiksela integrisali u web stranu, posledice bi bilesledeće:

Page 77: WebDizajn-Prirucnik

77

¨ Web strana bi se sporo učitavala sa interneta, što obično iritira korisnika, kojiodmah napušta web lokaciju,

¨ Učitana fotografija zauzimala bi ogroman prostor, tako da bi se samo delim ičnovidela u prozoru pregledača weba. Upotreba alatki za vertikalno i horizontalnokretanje web pregledača bila bi neminovna. Ovo je situacija koja još više iritirakorisnika, koji ponovo napušta sajt.

Iz ovoga možemo izvući zaključak da se fotografija, načinjena digitalnim foto aparatomili skenerom, na gustinu (rezoluciju) optimizovanu za foto laboratoriju, mora adaptirati usoftveru za bitmapiranu grafiku na 72 piksela po inču, kako bi prikaz slike u webpregledaču bio jednak u dimenzijama i veličini, u odnosu na prikaz u bilo kojem editorudigitalne fotografije ili foto pregledaču (viewer-u).

Zadatak:

Obrada digitalne fotografije za publikovanje na webu

¨ Na radnoj površini (desktopu) otvori katalog: fotografije.

¨ Sa web lokacije: www.viser.edu.rs/slike/ izaberi jednu od ponuđenih fotografija ismesti je u katalog fotografije

¨ U softveru za obradu digitalnih fotografija iz padajućeg menija izaberi opciju:

File/Open…

Slika 1. Dijaloški okvir Open

Page 78: WebDizajn-Prirucnik

78

¨ Pomoću padajuće liste Look in: izaberi: Destop/Slike katalog slike. Kad mišempređete preko datoteke, na dnu okvira prikazuje se slika sa veličinom datoteke.Izaberite sliku.

Sliku učitanu u editor softvera za bitmapiranu grafiku sada optimizujete za publikovanjena webu.

Pretpostavimo da slika koju ste izabrali može da posluži za dizajniranje zaglavlja sajta.Vaš klijent poseduje kompaniju koja se bavi planinskim turizmom. Potrebno je, prematome, obrezivanjem (kropovanjem) fotografije odstraniti nepotrebnu celinu i izabrati deokoji će biti pogodan po veličini detaljima za izradu zaglavlja sajta.

Postavlja se pitanje: u kojim dimenzijama treba da bude urađeno zaglavlje sajta? Ovdenema nikakvih pravila. U svakom slučaju, dimenzije zaglavlja zavise od veličine irezolucije monitora koji koriste vaši korisnici. Dimenzije su po pravilu izražene upointima. Pretpostavimo da je širina zaglavlja 1000 puta 120 pointa.

Sliku pejzaz1.jpg u formatu 1920/1200 pointa treba izrezati na približni format 1000/120

pointa. Ovo ćemo postići upotrebom alatke za obrezivanje (Crop), koja se nalaziu kutiji sa alatima.

Slika 2. Obrezivanje slike (selekcija je označena svetlim cfrticama)

Dodavanje teksta

Zaglavlje web strane (sajta) podrazumeva integraciju teksta sa nazivom kompanije iliorganizacije koja je na web lokaciji predstavljena.

Kod ispisa teksta treba voditi računa o izboru fonta. Ako kompanija za koju radite imaknjigu grafičkih standarda, obavezno treba koristiti izabrane kompanijske fontove ilinjihove substitute.

Veličina i boja fonta, kao i oblik (pojačan – bold, iskošen – italic), nije bez značaja.

Page 79: WebDizajn-Prirucnik

79

Treba voditi računa da veličina fonta dominira zaglavljem i da izabrana boja bude ukontrasti sa bojom pozadine (slike). Ako je pozadina tamna, font bi morao biti svetlijeboje.

Treba izbegavati sistemske fontove, koji dolaze uz operativni sistem i služe za pisanjenaslova i paragraf teksta. Sistemski fontovi upotrebljeni u zaglavlju deluju prozaično.

Na Webu se nalazi veliki izbor besplatnih fontova. Web dizajner u slobodnom vremenutreba da napravi svoju biblioteku fontova za različite namene.

Kad izaberete prigodan font, ispis teksta preko slike koja treba da posluži kao zaglavljesajta, može se da se realizuje otvaranjem novog sloja (Layer-a). Jednostavnijavarijanta je da ispis ide preko slike, pri čemu slika ima tretman pozadinskog sloja.

Nedostatak ovakvog rešenja je u tome što je sloj sa fontom nezavistan i ako je slikasačuvana u izvornom .psd formatu za potrebe dalje optimizacije, moguće je kasnijemenjanje pozicije napisa, veličine i pozadinske boje. Takođe, moguće je dodavanjeefekata, kao što je reljefni tekst (emboss), senka (DropShadow) i sl.

U jednostavnijoj varijanti, ispis teksta preko slike tretirane kao pozadinski sloj sastoji seiz sledećih koraka:

¨ iz kutije sa alatima izaberi Set foregrounds color; izaberi boju fonta

¨ iz kutije sa alatima izaberi alatku za pisanje teksta;izaberi opciju: Horizontal Type Tool

¨ Izaberi tačku za početak teksta i upiši tekst u slici.

Optimizacija slike na 72 piksela

Ostalo je da gustinu slike pripremite za realno prikazivanje na webu. Gustina zapisapočetne slike iznosi 300 piksela po inču i takva slika pogodna je za izradu fotografije ufoto laboratoriji ili za integraciju u štampane stvari (knjiga, brošura i sl).

Bez obzira kakvu računarsku opremu koriste klijenti, slike za publikovanje na webutreba da budu optimizovane na gustinu (rezoluciju) od 72 piksela po inču.

Dodatna optimizacija gustine slike naziva se risemplovanjem i vrši se preko opcija:Image/Image Size…(slika 3).

Za potrebe ofset štampe, često se javlja potreba da se slika optimizovana za web na72 piksela po inču, risempluje, tako što joj se softverski podigne gustina zapisa naminimalnih 300 piksela po inču, za potrebe ofset štampe.

Vrhunski softver za bitmapiranu grafiku u osnovnom paketu sadrži rešenja zadegradaciju rezolucije u plusu za najviše 50 procenata. Tako uvećanje ne može dazadovolji zahteve. U tom pogledu, nužno je nabaviti profesionalni softver zarisemplovanje fotografija, kao što je Genuine Fractals(http://www.ononesoftware.com/detail.php?prodLine_id=7)

Page 80: WebDizajn-Prirucnik

80

Slika 3. Dijaloški okvir Image Size

Prilikom risemplovanja, aktivno polje Constrain Proportions treba da bude čekirano,kako bi srazmerno bile umanjene stranice slike kao dvodimenzionalnog objekta.

Takođe, treba da bude izabrana tehnologija Bicubic na padajućoj listi Resample Image.

Slika 4. slika pripremljena za zaglavlje sajta

Pripremljeno zaglavlje integrišite u web stranu. Uradite SEO optimizaciju kojapodrazumeva i personalne podatke autora (ime i prezime, indeks i imejl adresa, radiidentifikacije). Stranici dodelite oznaku strane: ime i prezime i broj indeksa. Datotekusnimite pod nazivom: zaglavlje.html i pošaljite na adresu: [email protected]

Pomoć na Internetu:

¨ www.1001freefonts.com¨ http://baneprevoz.com/tutorijal/PhotoshopTutorijali.pdf¨ http://stock.d2.hu¨ http://www.zuadobank.com¨ www.dizajnzona.com

Page 81: WebDizajn-Prirucnik

81

Vežba broj 11

POČETNA STRANA

¨ Stil web sajta

¨ Navigacija

¨ Ažuriranje informacija

¨ Promotivni značaj

¨ Zadatak:¨ Literatura:¨ Pomoć na Internetu:

Page 82: WebDizajn-Prirucnik

82

POČETNA STRANA

Početna (ili matična) strana po pravilu je najznačajnija web strana sajta. Početnastrana (home; home page, front page) pokrenuta je inicijalnom datotekom (index.html iliindex.php) i predstavlja stvarni ulazak u korisnički interfejs i navigacioni sistem sajta.Drugim rečima početna strana je glavna kapija za ulazak na web sajt.

Lepo urađena i funkcionalna početna strana oduševljava korisnika. On se ne nalazi usukobu sa autorom sajta, nego mu odaje priznanje. Zadovoljan korisnik se vraća čestona sajt koji mu iz nekih razloga odgovara. Ako je početna strana loše urađena, asadržaji dvosmisleni i prosto nabacani, to iritira korisnika i on će, verovatno, napustitipočetnu stranu što pre. Ovo naročito važi ako se početna strana sporo učitava i ako jenezanimljiva, a ima i neprofesionalno urađen korisnički interfejs.

Prema tome, početna strana treba da bude optimizovana da se na računarima većinekorisnika učitava brzo, da se podaci na strani menjaju i da bude dovoljno interesantnau sadržinskom i vizuelnom pogledu, da bi pridobila interesovanje korisnika.

Ako web dizajn ima sličnosti sa dizajnom periodičnih publikacija (ilustrovanih nedeljnihili mesečnih magazina), početna strana je po značaju u rangu naslovne strane ili koricamagazina. Statistika pokazuje da se korisnici Interneta najčešće vraćaju na web sajtako im se dopada sadržaj i vizuelni izgled (korisnički interfejs) početne strane.

Stil web sajta

Na početnoj strani uspostavljen je stil web sajta. Stil se provlači kroz sve njegovestranice. Stilom nazivamo vizuelno-tekstualne celine, koje se sastoje iz grafičkoginterfejsa ili Shella (školjke), po uzoru na druge aplikacije koje rade u savremenim,grafički orijentisanim operativnim sistemima. Onako kako je izveden vizuelni izgledpočetne strane – zaglavlje, navigacija, podnožje, broj kolona i njihove veličine i odnosi,beline, ta “logika” prati svaku web stranu u okviru celine koju nazivamo web sajtom.

Atmosfera sajta – logotip, kompanijska boja i font, pozadinska boja, izgled grafičkoginterfejsa, vrsta i veličina fontova za tekst, tipografija (kaskadni stil), kvalitetnamultimedija, sve su to elementi koji su integrisani u početnu stranu i koji, aplicirani nadrugim stranama u okviru jedinstvenog stila web sajta, čine uspostavljanje atmosferesajta.

Početna strana treba da izgleda drugačije u odnosu na ostale web strane, u smislusadržine teksta i aplicirane multimedije.

Page 83: WebDizajn-Prirucnik

83

Kako bi strana zadržala korisnika, početna strana treba da sadrži što više podataka iuputstava. U tekst unesite obilje ključnih reči, kako bi pregledači lakše pronašli vašunovu stranu. Ukratko predstavite vaše usluge, odnosno proizvode i koristite reči koje bivaši potencijalni korisnici mogli da upišu u pregledače kada traže vas ili vašeproizvode.

Pregledači najveću pažnju posvećuju vašoj prvoj strani, zato je jako važno da na prvojstrani bude kvalitetan i sadržajan tekst.

Prva strana treba da sadrži najmanje 150 reči, a ako je moguće i 250. Izbegavajteopširne tekstove, jer se ljudima žuri da pronađu ključne podatke. Većina ljudi ne čitateskt na strani, več samo preleti preko teksta (skenira naslove) i traži vizuelne naglaskekoji ukazuju na važne podatke i zanimljive informacije.

Velika pažnja posvećuje se grafičkom dizajnu, jer dizajneri web lokacije žele da ostavedobar prvi utisak. To je dobro sve dok ne uključite previše slika i flash objekata iostavite početnu stranu bez upotrebljivog sadržaja. Sadržaj treba da bude tačkainteresa, a web dizajner treba da čeka drugu priliku kada će pokazati sve šta zna dauradi u oblasti moderne multimedije.

Upamtite:

Web sajt ne radite radi dokazivanja šta sve možete da uradite nego da bi ste zadovoljilipotrebe korisnika.

Po svom izgledu, u okviru usvojenog grafičkog interfejsa koji čini suštinu stila lokacije –matična strana treba da predstavlja posebnu i jedinstvenu stranu, koja uvek korisnikusluži kao orijentir. Ako se početna strana sadržinski ne razlikuje od ostalih celina,korisnik će tražiti početnu stranu kao ključni orijentir.

Iz nužnosti da se razlikuje po originalnosti od drugih web strana, početna strana jevizuelno privlačnija od drugih strana i jače naglašena - logotipom, kompanijskom bojomi kompanijskim fontom, velikom fotografijom koja simbolizuje delatnost kompanije -ističe identitet kompanije koja je predstavljena na Internetu.

Iskusni web dizajneri znaju da je početna strana raskrsnica web sajta, odakle vodenajkraći putevi ka najdubljim celinama. Iz tih razloga logotip kompanije, smešten ugornjem levom uglu zaglavlja, predstavlja linkovnu vezu (ili “vruću tačku”) koja sa bilokoje stranice koja se nalazi duboko u unutrašnjosti sajta, vodi na početnu stranu.

Početnu stranu nazivamo raskrsnicom, jer su ovde locirane i lako dostupne linkovnestrane koje pomažu u lakom pronalaženju traženog sadržaja na sajtu. Ovde se nalazimapa sajta i lokalni pretraživač.

Početna strana treba da ispunjava tri bitna uslova:

1. Navigacioni,

2. Informativni,

3. Promotivni

Page 84: WebDizajn-Prirucnik

84

Navigacija

Navigacija može biti razmeštena na više mesta na početnoj strani. Jedna navigacionacelina dominira i smatra se glavnim navigacionim sistemom. Glavni navigacioni sistemu jednostavnijoj grafičko-tekstualnoj formi može biti izveden dva puta na početnojstrani, da bi se korisniku istakao značaj najznačajnijih celina web sajta.

Navigacija mora biti orijentisana prema potrebama korisnika. Navigacioni sistem trebada bude jednostavan. Reči, koje predstavljaju linkovne veze u navigacionom sistemu,treba da budu pažljivo izabrane. Jednom ili sa dve reči treba saopštiti korisniku šta sekrije iza linkovne veze. Do traženog odgovora (web strane sa određenim sadržajem)treba doći najviše u tri koraka (sa tri klika mišem).

Korisnicima treba da bude jasno, posle kratkog vremena provedenog na početnojstrani, da li informacija ili datoteka, koju traže, na sajtu zaista postoji. Navigacionisistem i ostali tekstualni i multimedijalni sadržaji, publikovani na početnoj strani, trebakorisniku nedvosmisleno da najave namenu web sajta. Iz toga on može da izvučezaključak da li se nalazi na pravom mestu ili sajt treba da napusti i nastavi pretragu zaonim što ga interesuje, služeći se pre svega iskustvom i informacijama koje supostavljene na početnoj strani.

Početna strana u informativnom smislu treba da odražava duh delatnostikompanije ili organizacije.

Ažuriranje informacija

Informacije publikovane na matičnoj strani treba redovno da se ažuriraju. Ovo znači dase informacije moraju menjati; stare i neupotrebljive informacije moraju se stavljati uarhivu, a nove informacije moraju se blagovremeno publikovati. Pored publikovaneinformacije po pravilu stoji datum publikovanja, koji jasno korisniku govori o svežini iupotrebljivosti informacije.

Sledeća metoda koja korisniku stavlja do znanja da se sadržaj početne strane čestomenja jesu saopštenja za javnost. Svako novo saopštenje za javnost podrazumevadatum i vreme kada je objavljeno. Ovi podaci se preuzimaju sa web servera, a ne izračunara korisnika, tako da se mogu smatrati tačnim, jer administratori web serveravode računa o datumu i vremenu na web serverima.

Promena glavne fotografije na početnoj strani. Trik kojem često pribegavaju webdizajneri, želeći da dokažu korisnicima da se njihova početna strana često ažurira jestepromena glavne fotografije na web strani. Ovo se može postići odgovarajućimsoftverom, tako da administrator sajta ne bude angažovan svaki put kad slika treba dase promeni. Administrator napravi kolekciju prigodnih fotografija za početnu stranu, azatim se one menjaju prema zadatoj učestalosti.

Naposletku, treba se ugledati na praksu velikih i kompanija. Na primer, praksa portalaYahoo. Promene na početnoj strani ovog popularnog portala su diskretne, ali suočigledne i događaju se nekoliko puta u toku dana. Naime, u gornjem levom uglu, uokviru prostora definisanog posebnim slojem, koji se na strani korisnika pojavljuje kao

Page 85: WebDizajn-Prirucnik

85

pravougaonik sa zaobljenim ivicama, pojavljuje se vest koju urednici sajta u tomtrenutku smatraju aktuelnom.

Slika 1. Yahoo portal svakih nekolikosati menja sadržaj sloja koji sepublikuje kao glavna vest u gornjemlevom uglu početne strane (tzv. slajderdizajn).

3. Promotivni značaj

Početna strana web sajta ima značajnu promotivnu ulogu. Na ovoj strani smešteni sulinkovi ka promotivnim sadržajima. Promotivni sadržaji koncentrisani su neki put u deluzaglavlja sajta. Ovo se odnosi na sajtove koji su namenjeni širokoj publici (portali;društvene mreže). Baner postavljen u zaglavlju sajta, pri čemu je levi ugao iskorišćenza logotip i naziv kompanije, jako je popularan i prostor za zakup banera na ovommestu ima visoku cenu.

Slika 2. Web sajt Blica u zaglavlju drži reklamu novog tržnog centra

Ako je stil lokacije tako organizovan da se prostor za publikovanje različitih sadržaja,koji se nalazi ispod zaglavlja, sastoji iz tri kolone – onda je treća kolona, s leva udesno, zamišljena kao prostor za promocije proizvoda i usluga kompanije, za razmenubanera sa drugim web sajtovima i za oglašavanje drugih kompanija i organizacija nakomercijalnoj osnovi.

Iz do sad rečenog možemo zaključiti da početna strana ima više uloga, koje iskusnikorisnici weba znaju: polazna tačka ili glavni orijentir u kretanju sadržajem sajta,indikator ažurnosti sadržaja sajta (promene sadržaja sajta uvek podrazumevaju ipromene koje se nalaze na početnoj strani) i ugaona tačka oko koje se uspostavlja“atmosfera sajta” (interfejs, navigacioni sistem, pismo, font).

Page 86: WebDizajn-Prirucnik

86

Obzirom na definisan sadržaj, početna strana ne sadrži informacije u obliku opširnijegteksta (na primer, saopštenja za javnost u punom obliku), nego samo kratke najave.Odmah pored najave, korisniku se ostavlja link ‘ “dalje..”, kako bi pristupio informaciji upunom obliku. Iz rečenog se može izvući zaključak da početna strana predstavlja prvisiguran korak, na putu ka sledećim koracima koji su nužni u kretanju do cilja na websajtu.

Iz tih razloga, web dizajner početnu stranu ne pravi u verziji za štampač, jer ne postojipotreba da je korisnici štampaju. Ako nekoga zanima izgled korisničkog interfejsa,preko svog web čitača napraviće kopiju datoteke u HTML formatu ili kao web arhivu(.MHT), da bi odloženo mogao da je analizira.

Činjenica da se početna strana po pravilu ne priprema za štampu na štampaču, webdizajneru ostavlja više prostora za izbor multimedijalnog sadržaja, pozadinske boje iširine ekrana, nego što će to raditi kod unutrašnjih strana, koje su po pravilu rađene i uverziji za štampu na štampaču.

Kad razgleda sadržaj početne strane i uveri se da se nalazi na pravoj lokaciji, korisnikpreduzima sledeći, logičan korak: on iz navigacionog sistema bira stranicu na kojoj senalazi sadržaj zbog kojega je došao na vaš sajt.

Kako treba da izgledaju sve druge, unutrašnje strane?

Unutrašnje strane sajta ne moraju biti u vizuelnom pogledu atraktivne kao početnastrana. Unutrašnje strane služe određenoj nameni, jedanput da se prenese određenosaopštenje ili informacija, drugi put da se ponudi za preuzimanje određena datoteka.Ono što sve ostale strane čini sličnim ili zajedničkim sa početnom stranom jeste stilsajta. To drugim rečima znači da većina unutrašnjih web strana neće se vizuelnorazlikovati od početne strane, jer će stil, izgled, korisnički interfejs preuzeti u celini odpočetne strane.

Zadatak:

U softveru za izradu web sajtova uradi početnu stranu virtuelnog komercijalnog sajta.

¨ Najpre uradi SEO optimizaciju, prema uputstvima sa prve vežbe.¨ Telo strane podelite na sledeće celine: zaglavlje, navigacija, saopštenja za

javnost i promocije i podnožje strane,¨ Navigacioni sistem podrazumeva celine, kao što su, na promer: O nama,

Proizvodi i usluge, Uslovi korišćenja, Najčešća pitanja, Partneri, Posao,Društvena odgovornost, Download, Kontakt,

¨ Kolona u sredini za publikovanje saopštenja za javnost podrazumeva tekst od150-250 karaktera, pisan na lokalnom pismu. Podrazumeva se upotrebanaslova, podnaslova i rednih lista,

¨ Fotografija na početnoj strani treba da odražava poslovnu aktivnost kompanije.¨ Kolona sa promotivni sadržajima treba da se sastoji od banera i flash objekata.¨ Podnožje strane može da ima sekundarni navigacioni meni. Odvojeno je

vodoravnom sivom linijom od tela strane.

Page 87: WebDizajn-Prirucnik

87

Literatura:

¨ Jason Beaird: The Principles of Beautiful Web Design, Site Point, Australia,2007.

¨ Thomas A. Powell: Web dizajn, kompletan priručnik, Mikro knjiga, Beograd,2001.

Pomoć na Internetu:

¨ www.webmajstori.net – hrvatski web sajt u funkciji podrške web dizajnerima

¨ www.elitesecurity.org – najveći web forum na Balkanu za IT tehnologije

¨ http://rapidshare.com/files/292181642/IzradaWeba-Abeceda_za_webmastere.part1.rar

¨ http://rapidshare.com/files/292315253/IzradaWeba-Abeceda_za_webmastere.part2.rar - Luka Abrus: Izrada weba, abeceda zawebmastere, Zagreb, 2003.

¨ www.dizajnzona.com

¨ www.elitesecurity.org

¨ www.devprotalk.com

Page 88: WebDizajn-Prirucnik

88

Page 89: WebDizajn-Prirucnik

89

Vežba broj 12

HOSTING SERVIS

¨ Postavljanje i ažuriranje web sadržaja na web serveru

¨ Softver za upravljanje sadržajem na web serveru(C-panel)

¨ Organizacija datoteka na web serveru¨ Zadatak:¨ Literatura:¨ Pomoć na Internetu:

Page 90: WebDizajn-Prirucnik

90

HOSTING SERVIS

Hosting servis je osnovna usluga provajderskih kuća – kompanija koje se bavepružanjem Internet usluga. Pod hosting servisom podrazumeva se Internet servis kojiobuhvata jedan ili više računara, stalno povezanih na internet. Računari su snabdeveniserver softverom, koji omogućava postavljanje web sajtova. Web sajtovima sedodeljuju odgovarajuće javne IP adrese, tako da se sadržaji stranica web sajtova mogudovlačiti sa bilo koje tačke na svetskoj kompjuterskoj mreži.

Hosting servis čine po pravilu brendirani računari sa diskovima velikog kapaciteta ibrzine pristupa podacima i više procesorskih jedinica, kao i sa velikom radnommemorijom. Linkov prema internetu treba da ima veliku propusnu moć. Svi ovi uslovi suznačajni da bi se zahtevi klijenata za preuzimanje web sadržaja ispunili najvećombrzinom.

Kod provajderskih kuća koje hostuju više stotina ili hiljada sajtova, obično postoji višeračunara servera, povezanih u tzv. „farme“.

Na računarima serverima instalirani su različiti operativni sistemi i web server aplikacijakoja opslužuje zahteve klijenata. Zahtevi klijenata usmereni su ka preuzimanju web idrugih digitalnih datoteka pod http 1.1. ili ftp protokolom sa sajtova koji su ovdehostovani. Sajtovima su dodeljene javne IP adrese, tako da se mogu videti iz celogsveta.

Najčešće korišćeni web serveri su Apache i Microsoft Information server (IIS).

Slika 1. Najčešće korišćeni web serveri (izvor:http://news.netcraft.com/archives/web_server_survey.html)

Dijagram korišćenja web serverskih aplikacija na Internetu u periodu od poslednjihpetnaest godina prikazan je na slici 2. Kao što se vidi, Apache web server je uvek bio uvelikoj prednosti u odnosu na glavnog konkurenta Microsoft Information Server.

Page 91: WebDizajn-Prirucnik

91

Slika 2. Podela tržišta web softvera posmatrana kroz otvorene i korišćene domene uperiodu 1995 -2009.

Postavljanje i ažuriranje web sadržaja na web serveruWeb sadržaji na udaljenom web serveru postavljaju se ili ažuriraju pomoću određenihklijentskih aplikacija. Pristup zakupljenom prostoru web servera sa dodeljenom javnomIP adresom podrazumeva posedovanje javnog ključa, koji se sastoji iz korisničkogimena (po pravilu do devet karaktera) i lozinke.

U operativnom sistemu Windows ne postoji aplikacija sa grafičkim interfejsom zapristup prostoru web servera za postavljanje ili uklanjanje datoteka.

Iz DOS prozora moguće je, zadavanjem određenih komandi sa tastature, pristupitizakupljenom prostoru na web serveru radi obavljanja određenih poslova.

Slika 3. Pristup FTP protokolom iz DOSa sajtu www.eposlovanje.org

Page 92: WebDizajn-Prirucnik

92

Pristup serveru FTP ili HTTP protokolom moguće je ostvariti iz brojnih aplikacija. Naweb lokaciji: www.ftpx.com može se preuzeti aplikacija FTP Explorer. Aplikacija jestandardni FTP klijent za Windows. Korisnički interfejs je rađen u maniru aplikacijeWindows explorer. Takođe, iz aplikacije Cute FTP moguće je ažurirati sadržaje na webserveru. Softver Total Commander, pored niza opcija za uređivanje datoteka namedijima na računaru pod Windows operativnim sistemom, sadrži modul za rad saračunarom na mreži pod FTP protokolom.

Softver za upravljanje sadržajem na web serveru (C-panel)

Kontrol panel je grafički interfejs za pokretanje softvera na web serveru, kojim seadministrira web sajt. C panel je podrazumevani web hosting menadžer modul,instaliran na zakupljenom prostoru web servera kod hosting kompanija koje drže dosvog prestiža (npr. www.sezamhosting.com). Aplikacije iz paketa c-panela namenjenesu komercijalnoj upotrebi web sajta. Autorska prava za korišćenje plaća provajderskakuća. Zakup prava traje po pravilu mesec dana.

Kontrol panelu se pristupa preko web čitača. Podrazumeva se posedovanjeadministratorskih ključeva (korisničko ime ili lozinka) koji važe za FTP pristupzakupljenom prostoru na web serveru. C panelu se po pravilu pristupa prekoodgovarajućeg sigurnosnog sertifikata.

C – panel se prema administratoru sajta pojavljuje kao grafički interfejs koji omogućavapristup za oko 40 aplikacija za upravljanje sadržajima na zakupljenom web serveru.Nabrojaćemo neke od vrlo korisnih aplikacija: imejl servis (otvaranje naloga u okviruzakupljenog domena; ažuriranje e-pošte preko webmejla, kao I preko pop3 I smtpprotokola (OutlookXpress), redirekcija I preusmeravanje elektronske pošte); Fajlmenadžer – slanje i preuzimanje datoteka, orvaranje kataloga, preimenovanje ibrisanje datoteka i dodela permmision atributa – chmod; menadžment poddomena,menadžment MySQL baze, menadžment mejling lista, statistika posećenosti, softverskialati za e-prodavnicu, organizacija FTP servera, ekstenzije za Front Page objekte, CGIaplikacije, postavljanje foruma, postavljanje chata, postavljanje web strane koja sepojavljuje na odgovor web servera – 404 – stranica ne postoji, SSL menadžer zasadržaje koji se prenose SSL protokolom, i dr.

Neki paketi C-panela sadrže modul Fantastico, koji se sastoji iz više aplikacija, koje,kad se implementiraju, mogu da budu od velike koristi administratorima web sajta.Jedna od ovih aplikacija omogućava administratoru ili drugim registrovanim licima da urealnom vremenu posmatraju korisnike web sajta – odakle dolaze, koje strane otvaraju,koliko se zadržavaju i kakve sadržaje preuzimaju sa sajta. Sa korisnicima je mogućeuspostaviti online chat sesiju, pozivom preko administratorskog modula. U pregledaču,na korisničkoj strani, pojavljuje se preko web strane, na sredini ekrana, prozor, nalik naPoruke upozorenja iz Windowsa, sa tekstom kojim administrator poziva korisnika narazgovor.

Upotreba ovih on line servisa povećava posećenost sajta, ali i troškove njegovogodržavanja.

Page 93: WebDizajn-Prirucnik

93

Slika 3. Deo aplikacija cPanela koji nudi provajderska kuća - www.sezamhosting.com

Na levoj strani panela publikuju se značajni statistički podaci: preostali slobodanprostor na web serveru, broj podignutih My SQL baza, broj otvorenih imejl naloga,pokrenute mejling liste, broj otvorenih poddomena, broj imejl naloga koji se prosleđujuna druge imejl adrese, broj otvorenih ftp naloga, operativni sistem pod kojim jepokrenut web server, i dr.

Page 94: WebDizajn-Prirucnik

94

Organizacija datoteka na web serveru

Web sajt se sastoji iz različitih tipova datoteka. Iz tih razloga potrebno je na webserveru otvoriti više direktorijuma (kataloga) za smeštanje odgovarajućih tipovadatoteka. Stavljanjem datoteka u odgovarajuće direktorijume olakšava se posaoažuriranja web sajta. Na primer, sve slike nalaze se u direktorijumu Images. Zamenaslike obavlja se jednostavno i brzo.Otvaranje kataloga vrši se jednostavno iz FTP klijent aplikacija, kao što su: FileManager, iz C-panela, Cute FTP, FTP Explorer, Total Commander, i sl.

Slika 4. Korenski direktorijum i katalozi - www.eposlovanje.org

Zadatak:U programu Ms Word opiši prednosti i nedostatke najčešće korišćenih web servera –apache i IIS. Naslov teksta: Apache i IIS – uporedni prikaz. Naslov word datoteke:Uporedni prikaz web servera.doc

Tekst treba da ima najmanje 2 strane formata A4.

Literatura:Aric Pedersen: cPanel, User Guide and Tutorial, Pact Publishing, Birmingham, 2006.

Pomoć na Internetu:¨ www.elitesecurity.org¨ www.apache.org¨ www.microsoft.com¨ http://news.netcraft.com/archives/web_server_survey.html

Page 95: WebDizajn-Prirucnik

95

Vežba broj 13

PUBLIKOVANJE WEB SAJTA

¨ Besplatni i komercijalni web hosting¨ File Manager

¨ Kreiranje foldera (kataloga)

¨ Transfer fajlova na web server

¨ Transfer inicijalnog fajla index.html

¨ Manipulacije datotekama na web serveru¨ Zadatak:¨ Literatura:

Page 96: WebDizajn-Prirucnik

96

PUBLIKOVANJE WEB SAJTA

Sve što nije objavljeno, ne vredi ništa. Sajt koji ste uradili treba publikovati na Web;tada je vidljiv svima. Greške koje uočite, treba što pre da ispravite.

Postoji više načina za publikovanje vašeg sajta na Internet.

Besplatni hosting (Free web hosting) koristi veliki broj početnika. Besplatni web hostinglako se pronalazi preko web pretraživača. Međutim, ovakav hosting nije pouzdan i nepreporučuje se za postavljanje komercijalnih sajtova.

Kompanija koja nudi besplatni hosting ima svoju računicu – nije nemoguće da se navrhu vaše web strane pojavi zaglavlje sa reklamom, koja će neprijatno delovati nakorisnike vašeg sajta.

Da bi se ovakav rizik izbegao, najbolje je zakupiti hosting kod domaće provajderskekuće.

Cene hostinga su različite, u zavisnosti od vaših zahteva. Najbolje je zakupiti prostorna web serveru provajdera, koji nudi brojne prateće servise, koji mogu da učine vašsajt interesantnijim za korisnike – webmail, FTP, i druge pogodnosti, u paketuprograma za upravljanje prostorom na web serveru, pod zajedničkim imenom C-panel.C-panel deluje na vas kao izazov. Želite da ga savladate i primenite neke njegovemogućnosti. Na taj način usvajate nova znanja i veštine u domenu projektovanja ipublikovanja web lokacije.

Pođimo od pretpostavke da ste zakupili prostor na web serveru (hosting) za potrebepublikovanja vaših domaćih zadataka – ličnog i komercijalnog sajta iz predmeta Webdizajn.

Zakup hostinga vrši se po pravilu na određeno vreme. Najkraće vreme je godinu dana.Zakupom ste dobili prostor izražen u gigabajtima (npr. 5Gb) i prateće servise, uzavisnosti od cene hostinga.

Neki provajderi u cenu hostinga daju set komercijalnih programa za upravljanjesadržajem web lokacije, poznat pod nazivom C-panel. Radi se o pedesetak vrlokorisnih programa, od kojih je jedan File Mannager.

Program File Manager sadrži sve potrebne opcije za publikovanje i ažuriranje websajta. U tom pogledu ne zaostaje za aplikacijama dizajniranim za Windows okruženje,kao što su: Cute FTP, FTP Explorer i Total Commander. Prve dve aplikacije dizajniranesu kao FTP klijenti. Pri tome treba znati da je FTP službeni protokol na Internetu zaprenos datoteka u oba smera. Total Commander nije klasičan FTP klijent, jer jenamenjen za manipulaciju datotekama na računaru pod Windowsom (otvaranje ibrisanje kataloga, preimenovanje fajlova, dodavanje atrributa i sl).

Page 97: WebDizajn-Prirucnik

97

U okviru aplikacija za izradu web sajtova integrisani su moduli za FTP podršku, kojiomogućavaju korisniku da iz ovog softverskog alata ažurira podatke na web lokaciji.

Upotreba File Managera, instaliranog na web serveru u C-panel okruženju, čini senajjednostavnijom za korišćenje. Osim toga, poseduje veliku prednost nad drugim FTPklijentima – radi preko porta 80, koji je dozvoljen na lokalnim mrežama, što nije slučajsa nabrojanim FTP klijentima, koji rade preko porta 21, koji je na lokalnim mrežamaobično zaključan.

Slika 1. C-panel koji dolazi uz hosting kod www.sezamhosting.rs

¨ Pristup C-panel okruženju za hosting kod sezamhosting provajderske kućevrši se preko web pregledača, kad se url-uje web adresa koja ima oblik:www.vasdomen.rs/cpanel

¨ Pošto uspešno ispunite registracioni dijaloški okvir (logovanje), ulazite u C-panel. Izaberite ikonicu File manager, kao na slici 1.

Page 98: WebDizajn-Prirucnik

98

¨

Slika 2. Interfejs File Manager

Gledano s leva u desno, link Create New Folder služi za kreiranje foldera (fascikli) zasmeštanje fajlova, onim redom kako je to linkovima uređeno u vašem računaru(replikacija).

Link Upload File koristi se za slanje fajlova sa vašeg računara na web server. Trebaimati u vidu da je potrebno najpre formirati sve kataloge/foldere, zatim „ući“ u katalog iiz njega vršiti transfer datoteka na web server.

Up One Level – služi za povratak za korak unazad. Ako ste vršili transfer datoteka ukatalog slike, ova alatka vam služi da se malo udaljite i da se vratite na početni nivo,odakle se vide svi katalozi i korenski direktorijum.

Korpa u desnom uglu služi za brisanje kataloga i fajlova.

Kreiranje foldera (kataloga)

Pre nego što izvršite transfer bilo kojeg fajla na web server, treba kreirati sve kataloge(foldere), kao na pripremljenom sajtu u vašem računaru.

Pravilo: naziv kataloga treba da se sastoji iz jedne reči. Npr: slike. Ako ne možete daizbegnete imenovanje fajlova preko jedne reči, koristite najviše dve reči, pri čemu jeseparator između reči znak donja crta: dve_reci.

Pri dodeli naziva kataloga koristiti abecedni karakter set (lokalno pismo je isključeno).Poželjno je nazive kataloga pisati malim slovom.

Sajt za potrebe domaćih zadataka iz predmeta Web dizajn mogao bi da ima sledećekataloge:

¨ admin,¨ dokumenta,¨ english,¨ slike.

Page 99: WebDizajn-Prirucnik

99

Slika 3. Standardni katalozi manjeg sajta

Transfer fajlova na web server

Pozicionirajte se u katalog u koji želite da prevučete fajlove iz vašeg računara. Kliknitena katalog Dokumenta. Otvoriće se prazan prostor. Izaberite alatku Link Upload File.

Slika 4. Transfer datoteka na web server

Iz kataloga /dokumenta izaberite alatkom Browse datoteke sa vašeg računara(najviše dvanaest, odjednom), potvrdite aktivno polje Overwrite existing files ikliknite na dugme za procesiranje transfera Upload.

Page 100: WebDizajn-Prirucnik

100

Slika 5. Datoteke prenete na web server – katalog/dokumenta

Transfer inicijalnog fajla - index.html

Inicijalni fajl index.html pokreće domen, odnosno početnu stranu vašeg web sajta.Inicijalni fajl transferuje se u korenski direktorijum – root.

¨ Izaberite link Up one level za povratak na korenski direktorijum (vidljivi susvi otvoreni katalozi, kao na slici 3.

¨ Pošaljite inicijalni fajl opisanom procedurom za prenos fajlova

Slika 6. Izvršen je transfer u sve kataloge i postavljen je inicijalni fajl

Page 101: WebDizajn-Prirucnik

101

Manipulacije datotekama na web serveru

Datoteke prenete na web server mogu se optimizovati pomoću alata iz programa FileManager.

Slika 7. manipulacije datotekama na web serveru

Izaberite catalog /dokumenta. U desnom uglu ekrana prikazane su transferovanedatoteke – html.dokumenta. Kad mišem označite jednu od datoteka, u levom uglupojavljuje se meni, koji omogućava sledeće operacije:

- Show File – prikaži datoteku kao Source (programski kod)- Delete file – izbrišite datoteku iz kataloga- Edit file – Učitajte datoteku u editor, radi eventualnih promena u programskom

kodu datoteke- Change permissions – izvršite podešavanja CH moda. Datoteka će biti vidljiva

na Internetu i potpuno funkcionalna za klijente, ako je parametar CH modapostavljen na vrednost 755.

- Rename file – dodeljivanje novog naziva datoteci. Novi naziv dodeliti oprezno Iizvršiti sve promene u linkovnim vezama kod ostalih html datoteka, kako bilinkovi bili u funkciji.

- Copy file – kopiranje datoteke na izabrani medijum- Move file – prebacivanje fajla na drugo mesto, odnosno u drugi katalog.

Zadatak:

Student koji ima završen lični ili komercijalni sajt izvršiće transfer sadržaja sajta na webserver preko File Managera. Ostali studenti iz grupe pratiće multimedijalnu projekcijuzadataka u svim fazama opisanim u vežbi.

Preko pregledača weba proveriće se funkcionalnost publikovanog sajta. U slučajugrešaka, koristiti alatke File Managera.

Literatura:¨ Aric Pedersen: cPanel, User Guide and Tutorial, Pact Publishing,

Birmingham, 2006.

Page 102: WebDizajn-Prirucnik

102

Page 103: WebDizajn-Prirucnik

103

BIBLIOGRAFIJA

Publikacije:

1. Aric Pedersen: cPanel, User Guide and Tutorial, Pact Publishing,Birmingham, 2006.

2. Belić Đulijano, Škola fotografije, IV izdanje, Pula, 2004.3. Dan Sisson: Google SEO Secrets, The Commplete Guide, Redmond,

2006.

4. Jason Beaird: The Principles of Beautiful Web Design, Site Point, Australia,2007.

5. Jerri L. Ledford: Search Engine Optimization Bible, Willey Publishing,Indianopolis, 2008.

6. Mr Snežana Šarboh: Elektronska trgovina i intelektualna svojina

7. Milan Fizi, Fotografija, Zagreb, 1966.8. Rastko Ilić: Osnovi intelektualne svojine

9. Saša Prudkov: PhotoShop CS4, Napredne tehnike obrade fotografija,(bespatna e-knjiga na sajtu autora: www.prudkov.com)

10. Thomas A. Powell: Web dizajn, kompletan priručnik, Mikro knjiga, Beograd,2001.

Web lokacije:

1. www.webmajstori.net

2. www.elitesecurity.org

3. www.dizajnzona.com

4. www.devprotalk.com

5. www.apr.gov.rs

6. http://www.conopljanews.net/metatagovi.html7. http://www.seo.com/8. http://www.conectivia.com/ser/kako-napisati-tekst-za-internet-stranu9. http://creativecommons.org/

Page 104: WebDizajn-Prirucnik

104

10. http://business.cch.com/help/License_Agreement.htm

11. http://www.microsoft.com/scg/info/cpyright.mspx

12. www.truste.com

13. http://foxitsoftware.com/pdf/rd_intro.php

14. http://www.serbianlogo.com/

15. http://coollogodesigns.blogspot.com/2009/09/10-posts-of-inspirational-and-creative.html

16. http://www.adfont.com

17. http://gawno.com/2009/05/78-photography-rules18. http://users.beotel.net/~fotogram/stranice/Licni_pogled_tekstovi.htm19. http://stock.d2.hu20. http://www.zuadobank.com21. www.corbis.com22. www.1001freefonts.com23. http://baneprevoz.com/tutorijal/PhotoshopTutorijali.pdf24. http://stock.d2.hu25. http://www.zuadobank.com26. www.apache.org27.www.microsoft.com28. http://news.netcraft.com/archives/web_server_survey.html

_______________________