web dizajn - skripte,Sandra

1 Kontraverze oko pitanja ndash sta je dobar dizajn2 Web dizajn ndash definicija i sadržaj 3 Elementi dobrog dizajna4 Kodni raspored za stranice sa tekstom na ćirilici i latinici

5 Zaglavlje Web strane Sadrzaj Znacaj meta tagovi

Pravilna upotreba zaglavlja

Zaglavlja (naslov ili header) iz HTML-a i XHTML-a su oznake koje se koriste za definisanje naslova na strani Postoji šest nivoa naslova počev od lth1gthelliplth1gt do lth6gthelliplth6gt Najznačajniji je naslov prvog nivoa H1 Ostale oznake označavaju podnaslove dok se naslovi petog i šestog nivoa koriste samo u složenim dokumentimaZaglavlja opisuju strukturu a ne vizuelni sadržaj Za izgled je zadužen CSS

Ubacivanje HTML elementa

Posle deklaracije DOCTYPE dokument započinjemo od osnovnog elementa

Element html smatra se osnovnim elementom korenom svakog HTML dokumenta

Svaki html element ima svoju oznaku za otvaranje lthtmlgt i oznako za zatvaranje lthtmlgt Ovo važi za sve elemente HTML jezikalthtmlgt lthtmlgt

Ovo je dovoljno za običan HTML dokument ali ne i za XHTML dokument koji smo mi naveli u deklaraciji dokumenta Zato dodajemo i atribut xmlns Atributom xmlns (skr od XML namespace) smo došli do X-a iz XHTML-a XML je skraćenica od eXtensible Markup Language ali o tome nekom drugom prilikomlthtml xmlns=httpwwww3org1999xhtmlgt lthtmlgtElementi head i title

Postavili smo osnovu dokumenta Odredili smo tip dokumenta (DOCTYPE) i identifikovali smo ga kao XHTML Idemo dalje Dodavanjem elemenata head i title zapravo počinjemo kreiranje naše web strane ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgt

1

ltheadgt lthtmlgt

Zašto su ovi elementi bitni

Element head takođe ima svoje oznake za otvaranje i zatvaranje (ltheadgt i ltheadgt) i ne traži nikakve atribute Ipak skoro je neophodno popuniti neke ako ne i sve atribute head elementa

Atribut FunkcijaTitle element omogućava da u dokument ubacimo naslov dokumentaMeta element omogućava da u dokument ubacimo ključne reči opis ime autora i slične dodatne opise straneScript element omogućava ubacivanje skriptova u dokumentStyle element omogućava ubacivanje informacija o primenjenom CSS stiluLink element se najčešće koristi za povezivanje na spoljašnje fajlove sa stilovima

Element meta

Iako nije obavezan ovaj element ima puno različitih funkcija Kodiranje dokumenata

Kodiranje dokumenta se odnosi na skup karaktera koji se koristi na web strani što je jako bitno ako web strana sadrži specifične karaktere Na primer naša slova (ČčĆćŽžŠšĐđ) ili slične specifične karaktere Da bi se ovi i slični karakterili pravilno prikazivali neophodno je ispravno navesti kodni raspored koji se koristi na strani Za engleski jezik standard je ISO 8859-1 dok je za ostale jezike preporučljivo koristiti UTF-8Detalje pogledajte na httpwwwwebstandardsorglearnaskw3cdec2002htmlKljučne reči opis autor

Element meta se može koristiti (i koristi se) za opis ključnih rečii opis sajta potpis autora i sl Ovo je izuzetno korisno kod optimizacije sajta za pretraživače

Ključne reči su reči ili fraze koje se mogu koristiti tokom pretraživanjaOve informacije se ne vide na web strani ali su jako korisne ispod haube i pomažu vidljivosti vašeg sajta na pretraživačima

6 Kaskadni model planiranja Web lokacije

Ovo je najčešći model planiranja Suština polazi se od opšteg prema pojedinačnomFAZE PLANIRANJA

2

1048729 Definicija problemarazrada ideje1048729 Analiza zahtevaspecifikacija1048729 Izrada prototipa dizajna1048729 Realizacija i provera prototipa1048729 Integracija i sistemska provera1048729 Objavljivanje rad i održavanje

7 Sadrzaj plana web lokacije

1048729Opis namene lokacije1048729Rasprava o korisnicima ndash profili korisnika1048729Rasprava o scenariju korišćenja lokacije ndash broj preuzetih datoteka broj posećenih strana broj ispunjenih formulara1048729 Zahtevi u pogledu sadržaja spisak tekstova slika i drugog materijala pogodnog za objavljivanje na Web-u1048729 Tehnički zahtevi HTML Java script CGI programi1048729 Zahtevi u pogledu izgleda korisnički interfejs1048729 Zahtevi u pogledu isporuke korisnicima kapacitet linka1048729 Finansijski zahtevi troškovi radne snage marketinga licence i zakup hosta

8 Plan lokacije ndash izrada profila korisnika

DEFINISASNJE PROFILA KORISNIKA1048729 Kod definisanja profila korisnika treba odgovoriti na sledeća pitanja1048729 Identifikacija korisnika (ko su zaista vaši korisnici)1048729 Gde se oni nalaze1048729 Koliko godina imaju1048729 Kojeg su pola1048729 Kojim jezikom govore1048729 Koja su njihova tehnička predznanja1048729 Na koji način su povezani sa Internetom1048729 Koji Web čitač koriste1048729 Šta žele da obave na lokaciji

Profil kosrisnika1048729 Ne smete NAGAĐATI o željama vaših korisnika Predrasude su uvek tu1048729Korisnike treba intervjuisati sa njima treba razgovarati kako bi se proverile pretpostavke o njihovim zahtevima i očekivanjima1048729 Rezultat istraživanja (razgovora intervjua ankete) napraviti STEREOTIPE korisnika buduće lokacijesajta

Klasfikacija tipova korisnika1048729 Neiskusni korisnici1048729 Korisnici koji imaju neka iskustva sa web-om1048729 Vrlo iskusni korisnici

3

9 Organizacija cije na Web serveru

Dva pristupa1048729 Celokupan sadržaj smestiti u korenski direktorijum (root)1048729 Sadržaj web lokacije organizovati po fasciklama - folderima po definisanom ključu a inicijalni fajl smestiti u root (korenski direktorijum) Ovo rešenje smatra se profesionalnijim i ima brojne prednosti u odnosu na gornje Sadržaji uređeni prema fasciklama (folderima) omogućavaju brzo pronalaženje datoteka koje ćebiti ažurirane

10Pojam i bitni elementi web strane Značaj web strane

Web strane čine elemente suštinu web lokacijesajta Strana je suštinski deo veće strukture sajtaStrana je sadržaj koji se pojavljuje u prozoru čitača web-aStrana se sastoji od svojih delova-celina zaglavlja rečenica pasusa ilustracija (multimedijskih elemenata) podnožjaStrane su međusobno povezane vezama-linkovimaSvaka strana ima apsolutnu Web adresu može se url-ovati pozvati Npr httpwwweposlovanjeorgbilostahtmJedan URL ndash poziv može rezultirati učitavanjem više nezavisnih strana u posebnim manjim prozorima (strane sa okvirima ili pop- up strane)Svrha organizovanja Web lokacije jeste raspoređivanje određenog sadržaja na više međusobno povezanih strana koje će korisnik lako usvojiti

11Tipologija web strana

-Uvodna strana -Matična strana-Interaktivne strane-Strane za obavljanje određenih poslova-Strane za pretraživanje web lokacije-Strane za uspostavljanje kontakta-Strane sa sadržajem (bookmarkovane strane)-Strane sa često postavljanim pitanjima (FAQ)-Strane namenjene za štampanje-TLB strane -Navigacione strane-Strane sa informacijama o specijalnim pravima korišćenja (o autorskim pravima i pravu na licencu)-Strane siročići

12Uvodna strana (pojamkada se i kako implementira na web lokaciji)

Engl Splash page jesu udarne strane web lokacije Ideja je da se ostavi u startu što snažniji utisak na posetioca

4

-Karakteriše se obimnom primenom grafike animacije i zvuka Najčešće su sva tri aspekta multimedije aplicirana u uvodnoj strani-Od alata skoro je neizbežan softver kompanije Macromedia -Jako podsećaju na INTROE pravljene za kompjuterske igre Webmasteri ih često tako i nazivaju-ldquoTeškerdquosu za učitavanje tako da treba ostaviti mogućnost korisniku da ovu stranu preskoči-Uvodna strana nije obavezni deo Web lokacije Naprotiv aplicira se samo na malom broju lokacija projektovanih za specifične korisnike-Smisao uvodne strane uspostavljanje neophodnog ambijenta za ostatak sadržaja lokacije-Nepostojanje uvodne strane kod specifičnih sajtovaweb lokacija može da unese određenu vrstu nerazumevanja kod posetilaca A to ima efekat sličan efektu projekcije filma kojem je izostavljena špica

PrimenaUvodna strana neophodna je kod izrade Web sajtova za kompanije ili organizacije koje se bave zabavom (pop grupe video klubovi kladionice sportski klubovi filmske kuće itd)

Ne iritirajte posetioca

-Obezbedite vezu (link) negde na strani kojim se uvodna strana može preskočiti-Implementirajte cookie(kolačić) u uvodnu stranu tako da je prezentirate samo novim posetiocima-Iskoristite uvodnu stranu da pored prikazivanja logotipa kompanije i bogate multimedije ndashposluži za proveru da li posetilac ima instalirane potrebne alate za praćenje osnovnog sadržaja lokacije (npr flashplayer) -Sugestija iskoristite uvodnu stranu za instaliranje neophodnog softvera sa Mreže

-Veliki broj korisnika smatra da su uvodne strane nepotrebnejer produžavaju vreme preuzimanja lokacije

-Koristite je oprezno imajući u vidu zahteve korisnika i činjenicu da je ova strana način da se odmah snažno privuče pažnja posetioca i on usmeri prema lokaciji

13Matična strana (pojam svojstva matične strane)

1048729 Home Pagenaslovna sranaprva strana1048729 Front Page (Microsoft je za svoj generator Web-a izabrao naziv Front Page što govori o značaju strane) Ima je svaki web sajt Neki sajtovi (objavljeni ranije ilisajtovi u radu) imaju samo matičnu stranu1048729 ovo naravno nije rešenje za predstavljanje kompanije na Internetu

5

Matična strana je po pravilu prva strana koju posetilac ugleda kad stigne na web lokaciju Matična strana jeste svojevrstan ulazkapija lokacije Ulaz posetioci pamte

Svojstva matične strane

1048729 Treba da izgleda drugačije od ostalih strana Web lokacije1048729 Matična strana je polazna tačka lokacije i korisnik ima potrebu u toku pristupa lokaciji često da se vraća na tu polaznu tačku1048729 Sa te strane može se najbrže stići na bulo koju stranu lokacije namenjenu korisnicima1048729 Veoma često radi se po ugledu na dizajn naslovnih strana nedeljnih novina časopisa magazina

Matična strana ndash promotivni aspekti1048729Snažno je marketingško sredstvo Web lokacije - sajta1048729Promocije inovacija kompanije u vidu proizvoda ili usluga postavljene su u vidu banera u formi animiranog gif-a ili kao swf datoteke (najčešće u zaglavlju ili u desnoj koloni)Istraživanja pokazuju da se15 posetilaca vraća na Web lokaciju ako im se matična strana dopada

Matična strana u funkciji naglašavanja identiteta kompanije1048729Iz potrebe da multimedijalno odrazi duh kompanije ndash matična strana vizuelno je atraktivnija od unutrašnjih strana konceptualizirana je tako da snažno ističeidentitet kompanije1048729MATIČNA STRANA uspostavlja atmosferu lokacije osnovni elementi dizajna lokacije su tu ndash logotip boja upotrebljeni fontovi (tip) jednom rečju ono štočini grafički stil lokacijesajta) npr Oblik veličina i boja ikonica dugmadi itd Takođe na strani je uspostavljen određen sistem navigacije (navigacionimeni) koji je na isti način prisutan na svim unutrašnjim stranama

14Tri najvažnija zahteva matične strane

1048729 Prezentacijska strana Već je rečeno da mora multimedijom i rečju snažno da odrazi delatnost kompanije1048729 Informaciona strana Mora da nagovesti informacije koje posetilac može da nađe na Web lokaciji Posetilac treba da razume ili ldquoda osetirdquo sta se nalazi a šta ne na lokaciji1048729 Navigaciona strana Glavni navigacioni meni nalazi se na matičnoj strani Tako da ova strana treba da omogući posetiocima da se lako snađu pri kretanju lokacijom To je uglavnom i razlog zbog kojeg se korisnici često pri traganjuza određenim informacijama vraćaju na matičnu stranu

15Osobine i obavezne komponente matične strane

1048729 Mora da se učitava brzo (najduže 30 sec) Brzina učitavanja zavisi od težine implementiranog sadržaja i od kvaliteta linka ISP-a

6

1048729 Naslovna strana mora da bude sveža To znači da se redovno ažurira menjaSamo strane koje se redovno menjaju mogu ponovo privući posetioce

Kako obavestiti korisnike da se strana menja-Postavljanje datuma1048729 Postavljanje važnih aktuelnih obaveštenja u skraćenom obliku (saopštenja za javnost)1048729 Postavljanje linka ka delu lokacije ldquoObaveštenjardquo-Zamena ili pomeranje glavne slike na strain povremeno ili po unapred utvrđenoj šemi-Postavljanje datuma i vremena poslednje izmene strane

Lokalni pretraživačAko Web lokacija ima vise od 15 web strana ndash postaviti pretraživač sadržaja lokacijeMapa sajtaJedan od značajnijih elemenata matične strane kod većih web lokacija jeste Mapa sajta Link prema stranici sa mapom sajta može biti implementiran i na drugim web stranamaKontakt sa korisnicimaSa matične strane treba omogućiti posetiocima kontakt sa vlasnicima ili administratorom lokacije1048729pokretanjem E-mail klijenta1048729putem instant poruke napisane u formularu i procesirane na email adresu

Statistika posećenosti lokacijeNa matičnoj strani može se nalaziti merač posećenosti lokacije Merač posećenosti može biti vidljiv svakom korisniku i tada se registruje samo posećenost matične strane

16 Pojam i smisao interaktivnih strana

Interaktivne strane namenjene su za obavljanje određenih poslova na lokacijiSajt bez interaktivne strane je nepotpun1048729 Na Web lokaciji korisniku se pruža prilika da nešto uradi Dakle ne samo da vidi pročita nego da uradi nešto osobeno i lično da obavi pretraživanje kupi proizvod preuzme datoteku registruje se za prijem obaveštenja (mailing lista) itd1048729 Poslovi koje se mogu obaviti na Web lokaciji su brojni Zavise od karaktera lokacije1048729Strane za obavljanje kontakta su vrlo popularne tako da ih treba svakako implementirati u svoju Web lokaciju

17Strane za uspostavljanje kontakta (načini uspostavljanja kontakta sa korisnicima ndash dobre i loše strane)

7

Strane za uspostavljanje kontakta jesu najčešći tip interaktivnih strana Ako web lokacija zbog svoje prirode ne sadrži druge vrste interaktivnih strana ndash treba da ima stranu za uspostavljanje kontakta Kontakt je pismeno obraćanje korisnikawebmasteru ili vlasniku Web lokacije

Realizacija1048729 Odgovarajućim tagom koji pokreće E-mail klijent (npr Outlook Express) u računaru korisnika i automatski uspisuje E-mail adresu primaoca u polje za unos elektronske adrese1048729 Postavljanjem posebne Web strane sa formularom -obrascem za unosenje sadržaja (teksta) namenjenog vlasniku ili administratoru sajta

Uspostavljanje kontakta preko E-mail klijentaMeta tag za automatski upis polja Subjectlta href=mailtodirektorvhseduyuSubject=Poslato sa sajtaSkolegtDobre i loše strane rešenja kontakta preko E-mail klijentaLoše strane1048729 Nema svaki korisnik podignut E-mail klijent1048729 Ako korisnik pristupa interaktivnoj strani preko tuđeg računara (od druga iz Cyber Cafe-a etc) poruku ne može da pošalje1048729 Ovo je jedan od načina koji dovode u pitanje privatnost Email adreseDobre strane1048729 Korisnik može poslati obimniji tekst vlasniku ili odgovornom licu kompanije1048729 Uz poruku može se priložiti i odgovarajuća datoteka

18Ulazne i izlazne web strane

Web strane za uspostavljanje kontakta preko mehanizama Web lokacije po pravilu su organizovane u paru kao ulazne i izlazne strane1048729Ulazne strane po pravilu su formulari sa različitim tipovima polja To mogu biti aktivna polja za unos teksta (ime i prezime telefon E-mail) i polja organizovana kao padajuće liste iz kojih korisnici biraju jedan od ponuđenih odgovora (npr Gender malefemale)1048729 Na početku ulazne strane nalazi se tekst-upustvo sa kojim se ciljem postavlja ulazna strana koja polja treba obavezno popuniti i u koje svrhe će prikupljeni podaci biti upotrebljeni1048729Na kraju ulazne strane nalazi se dugme za slanjeprocesiranje sadržaja SUBMITpošalji

Ulazna i izlazna ndash u paru1048729 Ulazna strana mora biti koncizna i jasna Ne smete tražiti obavezno podatke koji mogu da zadiru u sferu privatnosti korisnika1048729 Ako je ulazna strana početna i glavna izlazna strana je završnica Ona je potvrda da je korisnik uspešno obavio operaciju slanja podataka koji suod njega traženi

8

19Strane sa sadržajem (najčešći sadržaji na web stranama)

Tekst predstavlja osnovno izražajno sredstvo na Webu1048729 Multimedijalni i drugi sadržaji jesu važni ali su oni po pravilu implementrirani da pojačaju utisak na korisnika ili da ldquorazjasne neke nedoumicerdquo1048729 Strane sa sadržajem organizuju se u zavisnosti od samog sadržaja koji se stavlja na uvid korisnicimaNajčešći sadržaji na komercijalnim weblokacijama1048729 Saopštenja za javnost1048729 Specifikacije proizvoda1048729 Biografije1048729 Izjave potrošača1048729 Dokumentacija za tehničku podršku1048729 Članci iz štampe1048729 Finansijski izveštaji1048729 Programi kurseva1048729 Domaći zadaci

20Opisne strane

Opisnim stranama nazivamo Web strane sa obiljem teksta Podrazumeva se da je tekstualnih sadržaja tako mnogo da se korisniku otvara vertikalna traka za kretanje (gore-dole) Radi lakšeg snalaženja tekst treba podeliti u odeljke aodeljke označiti ndash bookmarkovati1048729 Odeljke ndash podnaslove ili naslove treba postaviti na vrhu strane1048729 Da bi ste korisniku uštedeli vreme oko pomeranja strane na kraju svake tekstualne celine obezbedite povratak na početak ndash grafičkim znakom strelicom na gore ili tekstualnim linkomrdquopovratak na početakrdquo

21FAQ strane

FAQ strane Često se sreću na Internetu Zbog obilja važnih informacija iskusni korisnici Web-a često ih posećuju1048729 Svrha da se odgovori na osnovna pitanja nađu u jednom dokumentu i korisniku omogući da dođe do traženog odgovora na najjednostavniji način1048729 Korisnici takav dokumenat po pravilu mogu da odštampaju da bi ih kasnije koristili kao podsetnik1048729 FAQ strana ima smisla i ispuniće svoju svrhu ako se na njoj nalaze esencijalna pitanja i odgovori vezani za kompaniju koja je predstavljena na Internetu1048729 Zato se ova strana priprema studiozno i krajnje ozbiljnoDa bi se postigla puna orijentisanost sadržaja FAQ strane potrebama korisnika posle svakog odgovora treba ostaviti mogućnost korisniku da se putem interaktivnih sadržaja izjasni o kvalitetu odgovora1048729 Drugim rečima podrazumeva se implementacija interaktivnih sadržaja na strani sa pitanjem da li ste zadovoljni odgovorom1048729 Alternativno 1) DA 2) NE i ostavljena mogućnost komentara korisnika 3) Nešto drugo ndash šta

9

FAQ strane ndash principi1048729Obezbedite mehanizam na stranici kojim će korisnici moći da izlože svoje mišljenje o njenoj upotrebljivosti1048729Iskoristite primedbe i sugestije i ugradite ih u izmenjenu verziju FAQ strane

22Strane ndash siročići

Siročići su Web stranice koje predstavljaju slepu ulicu Do njih se po pravilu ne može stići preko glavne raskrsnice lokacije matične strane Strane-siročići lišene su osnovnog stila lokacije i osnovne navigacije Mada po pravilu sadrže minimalnu navigaciju za izlazak iz ćorsokaka i elemente identifikacije boju i logotip1048729 Strane ndash siročići mogu biti organizovane kao potpuno slepe ulice bez osnovne navigacije i elemenata identifikacije1048729 O njihovom postojanju zna malo ljudi najčešće vlasnik lokacije i webmaster1048729 Jedan od razloga njihovog postojanja može da bude praćenje statistike posećenosti web lokacije1048729Nprhttpwwweposlovanjeorgwebalizerwebindexhtml1048729 Razlog autor Web lokacije ne sme da opterećuje informacijama o posećenosti korisnike lokacije Osim toga ovakav tip informacija može se smatrati zonom privatnosti kompanije predstavljene na Internetu

23Strane namenjene štampanju

Web dizajn podložan je modnim trendovima i to se može pokazati na primeru stranica namenjenih štampanju U stvari načelo prilagodi web lokaciju potrebama korisnika navelo je dizajnere da urade dve verzije nekih značajnih Web strana lokacije za ekran i za štampu Neke Web lokacije idu dalje i obezbeđuju mogućnosti korisnicima da stranicu pošalju elektronskom poštom kako bi se što veći broj ljudi upoznao sa sadržajem strane

24Priprema strana za štampanje

Svaka strana može se poslati na štampač Direktnim štampanjem strana troši se mnogo papira i tonera1048729 Strane pripremljene za štampu treba da imaju sitnije fontove i da su prilagođene standardnom formatu papira (A4)1048729 Iz stranice za štampu treba da bude odstranjena navigacija i pozadinska slika1048729 Manji logotip kompanije i URL adresu web strane svakako treba uključiti u stranicu optimizovanu za štampu1048729 Isključiti promotivne sadržaje oglase banere i sl

25Realizacija strane za štampu

Strana za štampu može se realizovati na dva načina1048729izbacivanjem većeg dela HTML koda iz HTML dokumenta ili se može napraviti nov HTML document optimizovan za štampanje1048729Izrada nove strane za štampanje pomoću kaskadnih stilova (CSS)U sekciji ltHEADgt treba ugraditi dva elementa ltLINKgtltLINK REL=ldquostylesheetrdquo HREF=ldquonormalcssrdquogt

10

ltLINK REL=ldquostylesheetrdquoHREF=ldquoprintcssrdquoMEDIA=ldquoprintrdquogt

Više o stranama za štampu pomoću CSS-a1048729 Stil se mоže iskoristiti da bi se promenio prored veličina fonta boje fontova da bi se uklonila navigacija ili zadao prelom strane Sve ovo dozvoljava CSS2 specifikacija1048729 Videti wwww3orgStyleCSS1048729 Primer wwwwebdesignrefcomchapter9printpagehtm

26Strana za štampu u PDF formatu (kad i kako)1048729Strana za štampu napravljena u PDF formatu urađena je u visokoj rezoluciji Kad se odštampa izgledaće kao stranica neke publikacije1048729PDF format može biti izveden pomoću aplikacije Adobe Acrobat v 80 u verziji za ekran (web) ili u verziji za štampu (veća datoteka)1048729PDF format koristiti oprezno ndash kad su u pitanju prikazivanja složeni podaci (matematičke formule tehnička uputstva složeni finansijski i grafički podaci kojise moraju preslikati)

1048729PDF datoteke su po pravilu velike i učitavanje strane dugo traje Ubacite ikonicu i naznačite veličinu datoteke1048729Obavestite korisnike kako da ih koriste postavite link prema Adobe web lokaciji

Priprema PDF dokumenta za publikovanje na Webu [slajd 5]

1048729 Za generisanje dokukmenta u PDF formatu potreban je program AdobeAkrobat ndash 60 ndash 801048729 Kad instalirate program Adobe Akrobat u sekciji Printprinters generiše se drajver za printer preko kojeg je moguće generisati dokument u PDF formatu (npr Tekst napisan u programu Word ili tehnički crtež urađen u CoreluGenerisanje PDF dokuemnta za publikovanje na Webu 21048729 Izaberite dugme PROPERTIES kad je aktivan Adobe PDF printer1048729 Dobićete dijaloški okvir kao na donjoj slici1048729 Postavite standard strane ndash page size ndash A41048729 IZABERITE PapersQualityGenerisanje PDF dokuemnta za publikovanje na Webu 31048729 Sa kartice PaperQuality izaberite dugme AdvancedGenerisanje PDF dokuemnta za publikovanje na Webu 41048729 Podesite opciju Print quality sa 1200 (inicijalno) na rezoluciju zaštampanje na ekranu od 72 dpi1048729 Pritisnite OK za povratak i Print za stampanje dokuemnta u PDFformatu

27Sličnosti i razlike između navigacije u realnom životu i na Web-u

Sa problemom navigacije srećemo se svakodnevno U gradskoj gužvi trudimo se da što pre stignemo na odredište Navigacija pomaže ljudima da nađu sebi putLjudi u svakodnevici stalno postavljaju pitanja

11

1048729 gde se nalazim1048729 Kuda mogu da idem1048729 Kako mogu da stignemgde sam naumio1048729 Koliko ću dugo putovati

1048729 Navigacija ne Web-u ima drugačiju podlogu nego u realnom svetu tako da se gornja pitanja i ne postavljaju (jer nemaju smisla) Korisnik je informacioni svaštojed ndash nalik životinji koja traži hranu i ne ume da razmišlja1048729 Korisnik njuška za podacima a kad ih namiriše ndash vodi računa da ih ne izgubi Izgubi li se na tom putu vraća se korak po korak unazad

28Orijentacija na web-u

1048729 Tačan položaj korisnika (gde se nalazim) nije toliko važan Važan je osećaj korisnika da je na tragu ndash na pravom putu1048729 PRAVILODobro izvedena navigacija mora da pruži osećaj korisniku da je na pravom putu1048729Ovo se postiže dodavanjem repera - pomoćnih elemenata-URL-ovi oznake strana orijentiri i trake za navigaciju-URL daje tačan položaj ali malo saopštava korisnicima o dužini puta koji još treba preći do cilja-Tačan položaj određuje se URL adresom httpwwweposlovanjeorg

29Pravila u pogledu oznake strane kao elementa navigacije

1048729 Da bi ste prilagodili navigaciju potrebama korisnika koristite URL adrese koje se lako pamte1048729 Npr wwwvetseduyuobavestenja1048729 Ne skrivajte URL-ove osim ako postoji potreba da sprečite korisnike da se direktno povezuju sa njima1048729 Strana ima oznaku (naziv -Title) koja ukazuje na njen sadržaj1048729 Kako upisati oznaku strane u programu Front Page

1048729 Oznake strane treba sprovesti dosledno a opis mora biti nedvosmislen jasanPrimer nedoslednosti u primeni načela opisa strane [slajd 6]1048729 Oznaka strane opisno ukazuje na njen sadržaj1048729 Oznaka se nalazi se u vrhu strane u levom uglu (pravilo) i nije posebno istaknuta1048729 Pored sadržaja (teksta) oznaka strane može da sadrži sasvim u levom uglu i logotip lokacije (umesto oznake čitača web-a)

30Orijentacija pomoću grafičkih oznaka

1048729 Širom lokacije razmestiti oznake lokacije (logotipe naziv kompanije) koje ćekorisnika kad ih aktivira mišem vratiti na matičnu stranuPODRAZUMEVANE OZNAKE NA STRANI1048729 Grafička dugmad za navigaciju ili implementirani Java Script menja boju linka(sličice teksta) kad otvori stranu

12

31Orijentacija pomoću merača dubinePogledati slajd 61048729 Označavanje pomoću merača dubine jeste napredniji način označavanja strana Dubina pokazuje do koje je strane u odnosu na početnu korisnik došao1048729 Orijentacija pomoću merača dubine danas se smatra konvencijom preporukom pravilom na Web-u1048729 Merač dubine treba da izvire s leve i da se kreće prema desnoj margini u duhu karatera pisma zapadnih kultura (čitaj s leva na desno)

32Orijentacija pomoću statusne linije

1048729 Statusna linija nalazi se na dnu prozora čitača Uobičajeno je da se prevlačenjem preko nekog linka na web strain prikaže apsolutna putanja u levom uglu statusne linije1048729 Tokom standardnog vremena statusna linija je prazna ali se može pomoću skript komande izvesti da pokazuje oznaku tekuće strane

Ovaj efekat se postiže umetanjem Java skript rutine vezane za događaj onLoad unutar HTML oznake Bodybull Primer ltBODY onLoad=ldquowindowdefaultStatus=`Currentpage Robot Trainer(httpwwwdemocompanycomproductsrobottrainerhtm)`return trueldquogtbull Nedostatak ovog rešenja korisnik poruku možda neće primetiti ili neće primetiti razliku u odnosu na standardnu situaciju kad se preko linka strane prevuče mišem

33Orijentacija pomoću stila lokacije

1048729 Webmasteri često pribegavaju rešenju da različite delove lokacije (celine) označavaju različitim bojama Ostali delovi stila ostaji nepromenjeni1048729 Ako se primeni ovaj stil boje treba da budu dovoljno različite kako bi se odmah uočile (postoji 12 osnovnih boja)1048729 Oko primene ovog stila ne postoji saglasnost među autorima Neki ovo smatraju kičem Mada se ovaj stil često sreće na Webu

34Kolačići kao elementi navigacije (personalizacija strane pomoću kolačića kolačići i načelo privatnosti korisnika

U računaru korisnika kopira se datoteka Izvršava se kad korisnik ponovo pristupi toj strani Kolačić je Java Script umetnut u odgovarajuću web stranu1048729 Implementacija ldquokolačićardquo u web stranice najnapredniji je način kojim se utvrđuje da ih je korisnik već jednom posetio1048729 Pomoću kolačića vlasnici web lokacije mogu pratiti ponašanje korisnika i identifikovati njegove navike1048729 Korisniku se takođe ukazuje pomoć pri navigaciji ndash snalaženju (ne mora da posećuje već odgledane strane lokacije)1048729 Kolačiće treba postavljati uz saglasnost korisnika uvek kad je to moguće

13

35Sistem navigacije Principi Mesta na strani gde može biti postavljen navigacioni meni

Sistem za navigaciju treba da bude u funkciji upotrebljivosti lokacijePodručja za smeštenje sistema navigacije (navigacionog menija)1048729Gornja ivica strane (vrh)1048729Donja ivica strane (podnožje)1048729Leva ivica strane1048729Desna ivica strane1048729Centar strane

36Navigacioni meni na vrhu strane ndash dobre i loše strane

1048729Dizajneri danas sve češće pribegavaju rešenju ugradnje navigacionog menija pri vrhu web strane1048729Obično se glavni navigacioni meni postavlja u sastavu zaglavlja ili neposredno ispod njega

Sakriven navigacioni meni pri vrhu strane

Radi racionalizacije prostoraza prikaz osnovnog sadržaja Web strane često se pribegava postavljanju padajućeg menija na događaj OnMouse

Navigacioni meni pri vrhu strane - dobre strane

1048729Saglasna je sa konvencijom koja važi za računarske aplikacije svuda je meni programe svuda je meni postavljen uz gornju ivicu interfejsa1048729Korisnik uobičajeno web stranu pregleda odozgo na dole tako da je sasvim prirodno da se navigacioni meni nađe na samom vrhu

Slabe strane navigacionog menija na vrhu strane

Ako web lokacija nije izvedena kroz frejmove (okvire) kako korisnik napušta vrh strane tako se navigacioni meni gubi

U ovakvoj situaciji treba postaviti sekundarni navigacioni meni na dnu strane ili link ka vrhu strane (ldquoPočetak stranerdquo) ili postaviti grafičku oznaku - strelicu usmerenu naviše

37Sekundarni navigacioni meni ndash kad i kako

14

PODNOŽNI MENIPo pravilu se primenjuje kad su u pitanju lokacije sa navigacionim menijem izvedenim pomoću graf elemenata (dugmadi) ili se radi o meniju smeštenom na vrhu strane

1048729Karakterističan je za opisne web strane (sa mnogo teksta) Implementacijom ovog dodatnog navigacionog sistema omogućava se lakše kretanje i orijentacija kroz lokaciju1048729Izveden je tekstualnoj formi sa grafičkim separatoprima koji su podržani sa tastature1048729Po pravilu sadrži linkopve ka najvažnijim delovima web lokacije

Kad i kako

1048729Navigacioni meni pri dnu strane urađen je u maniru tekstualne veze Separatori su po pravilu grafički znaci (nprvertikalna linija)1048729Nije preporučivo postavljanje grafičkih elemenata za navigaciju u dnu strane jer se tamo po konvenciji ne nalaze nikakve ldquovruće tačkerdquo (kontrolni objekti reperi orijentiri)

Kad je glavni navigacioni meni izveden kroz datoteke (dugmadi) sekundarni se podrazumeva

38 Navigacioni meni izveden uz levu ivicu strane

Najveci broj webmastera navigacioni meni postavlja uz levu stranicu Tako organizovane strane nazivaju se TLB stranama

Dobre strane

1048729Korisnici koji pripadaju zapadnim kulturama tekst čitaju s leva u desno tako da će navigacioni meni tražiti na levoj strani kao na sasvim prirodnom mestu1048729Leva strana ekrana koristi se za navigaciju i u mnogim programima Npr paleta Views Baru programu Front Page1048729Čak se i u dizajniranju publikacija (časopisa knjiga) leva strana koristi za navigaciju sadržaj

Slabe strane

1048729Navigacija remeti sadržaj ili smanjuje prostor na strani1048729Treba izbeći mogućnost otvaranja horizontalne trake čitača web-a kako se strana ne bi pregledala po širini

Sakrijte navigacioni meni postavljen uz levu stranu

15

Da bi otklonili nedostatke primene navigacije uz levu ivicu web strane neki web dizajneri primenjuju Java Script tako da se navigacioni meni pojavljuje samo na zahtev korisnika (vezano za događaj OnMouse)

Primer takve stranice na Mrežiwwwwebdesignrefcomchapter5dynamicleftnavhtmNavigacija koja povremeno nestaje omogućava korisniku da se u većoj meri koncetriše na sadržaj strane

39Navigacioni meni uz desnu ivicu strane ndash prednosti i nedostaci

Ovakve web lokacije mogu se retko sresti ali ih ima na Mreži

1048729Uglavnom su implementirane na web lokacijama koje su izvedene pomoćuistočnjačkih pisama gde čitanje počinje od desne ivice prema levoj (arapski jezik)

Dobre strane

1048729Implementacija menija uz desnu ivicu strane opravdava se činjenicom da se sadržaj strane u ovom slučaju nesmetano čita (ne morate preskakati navigacioni meni)1048729Navigacioni meni smešten pod desnu ivicu strane nalazi se pored trake za vertikalno pomeranje strane tako da korisnik ne mora da čita mišem po strani

Slabe strane

1048729Desna ivica strane zna da bude problem u zavisnosti od def rezolucije i veličine monitora korisnika Može se otvarati horizontalna traka pa tek onda da se vidi navigacioni meni (na nekim rezolucijama je na sredini a negde se otvara horizontalna traka)1048729Konvencija je glavna prepreka da se meni ne postavlja ovde To je mesto za promocije oglase i sl sadržaje

40 Navigacioni sistem u centalnom delu strane (pravila dobre i loše strane)

Navigacioni sistem u centralnom delu strane nije karakterističan za TLB strane 1048729Kao rešenje primenljivo je samo kod matične strane ili kod strana sa linkovima (namenjenih pristupu drugim sadržajima lokacije)

16

1048729Eventualno postavljanje navigacije u centralnom delu strane opterećivalo bi sadržaj strane tako da bi implementacija sadržaja bila gotovo nemoguća

dobre i loše strane

1048729Takvo rešenje čini matičnu stranu različitom od ostalih strana pa se lako koristi kao orijentir1048729Ovakvo rešenje navigacije nije konvencija na Web-u

Pravilo primene menija na sredini strane

1048729Kad je na matičnoj strani navigacioni meni smešten na sredini strane sledeće strane organizovane su tako da je navigacija smeštena pri vrhu ili pod levu ivicu strane Eventualno je implementiran i sekundarni ndashpodnožni meni1048729Na ovaj način implementirana je navigacija kod web lokacija koje pripadaju kategoriji portala Portali obiluju brojnim sadržajima koji se ne mogu pokriti klasičnim navigacionim menijem

41Tekst na Web-u kontraverze medijuma Tipografija Problemi primene tipografskih pravila na web-u

42Upravljanje tekstom pomoću slika43Nedostaci rešenja ugradnje teksta u sliku44Fontovi na Web-u Klasifikacija45 Aplikacija fontova na web sajtovima ndash sistemski fontovi

46 Boje Značenje boja u zapadnim kulturama

Web je vizuelni medijum Poruke koje se prenose preuzima čulo vida Boja slike i drugi vizuelni sadržaji koriste se da bi strana privukla korisnika1048729 Upotreba boja za dizajnere моže da bude zamka treba poznavati poruke koje boje nose u kulturi jednog naroda i tako ih upotrebljavati1048729 Takođe prevelika upotreba slika ima za posledicu sporo učitavanje stranica što iritira korisnike Za sve ovo treba naći srednju meru1048729 Boje namenjene web-u Njima upravlja video kartica različita od korisnika do korisnika Prikazuje od 16 ndash 65535 bojaPravilo web dizajn treba da bude urađen da podržava i sistem korisnika sa najslabijim perfomansama

Boja ndash značenjeCrvena Vruće greška stop upozorenje agresija vatra

17

Ružičasta Žensko privlačnoNarandžasta Toplo jesenjeŽuta Sreća oprez sunčano radosno usporiBraon Toplo jesen prljavoZelena Zavist idila ljubomora neiskustvo plodnostPlava Spokoj tuga voda muškoPurpurna Kraljevski luksuznoCrna Zlo smrt naricanje avetinjski noć strahSiva Sumrak starostBela Devičanski čisto nevino zima hladno

47Konvencije u pogledu upotrebe boja na web-u

KONVENCIJE1048729 Plavi podvučen tekst ndash veza ka drugoj web strani ili web lokaciji1048729 Ljubičast podvučen tekst ndash strana koju ste već posećivali (nalazi se u lokalnom kešu korisnikovog računara)1048729 Strane sa obimnim tekstom imaju belu pozadinu (tako ih korisinici lakše čitaju)1048729 Zaključak korisnicima odgovara komunikacija putem boja fontova i boja pozadine Ali web je postao popularan tek sa upotrebom slika Korisnici krstare webom često tražeći slike

48 Upotreba slika na web-u Kombinacija slika i teksta

Slikama možemo brzo saopštiti informacije korisniku1048729 Po pravilu slike se kombinuju sa tekstom kada se postiže puni efekat (npr Auto-karta)1048729 Tekst u obliku slike (ikonica kao deo stila dizajna web lokacije) omogućuje da se korisniku prenese još informacija osim onoga što na ikonici piše1048729 Kod upotrebe slika na web-u treba voditi računa

ZAKLJUČAK1048729Korisnicima odgovara komunikacija putem boja fontova i boja pozadine1048729 Ali web je postao popularan tek sa upotrebom slika Korisnici krstare webomčesto tražeći slike

Kod upotrebe slika na web-u treba voditi računa1048729 O vrsti datoteke i njenoj veličini o mestu na lokaciji gde će biti čuvane (katalog slike) itd Kad sve slike držite u jednom katalogu lokacija se lakše ažurira1048729 Slikama treba dodeliti nazive koji imaju smisla tako da se lako nalaze u katalogu i ažuriraju

49Slike ldquoosetljive na dodirrdquo (bitmape)

18

Slike su danas često elementi navigacije Kad sa jedne slike kreću linkovi-veze ka drugim web stranicama takve slike nazivamo slikama osetljivim na dodir ili mapiranim slikama

50Tipologija bitmapiranih grafičkih formata podržanih na web-u

Web podržava dva tipa slika bitmapirane (rasterske slike) a uz upotrebu dodatnih programa (plugin-a) i vektorske slike (Flash)1048729 Bitmapirana slika sastavljena je iz ekranskih tačaka (pixela) kojih standardno treba da bude 72 po inču (za potrebe web-a) Pixeli različitih boja i nijansi činebitmapiranu sliku1048729 Web čitači podržavaju tri bitmapirana formata GIF JPG i PNG

51Gif format ndash nastanak karakteristike upotreba I ograničenja

1048729 GIF format nastao je pre masovne upotrebe Interneta Compuserve ndash regionalna računarska mreža koristila je ovaj tip slika u poslovima reklamiranja i prodaje različitih proizvoda preko Mreže1048729 Gif je kompresivni format koji može da prikaže do 256 boja U verziji Gif 89A format podržava i prozračne boje pretplitanje i animaciju

GIF datoteka za prozracnom celinomPravilo opcija je omogućena za format Gif 89a1048729 Prilikom obrade slike površinu koja će biti prozračnaobojiti jednobojno1048729 U postupku snimanja datoteke boju koja treba da budeprikazana kao prozračna označiti

52Animirani gif

Najprisutniji oblik GIF datoteke na web-u Koristi se u promotivne svrhe kao sličica koja se vrti i predstavlja link prema drugoj web stranici1048729 Izrada GIF datoteke1048729 Najpre se pristupa izradi delovasegmenata animiranog gif-a u formatu Gif 89A1048729 Segmenti se spajaju u celinu određenim redosledom u sličicu koja se ldquovrtirdquo u prozoru čitača web-a pomoću posebnih programa kao što je Ulead gifanimator (wwwuleadcom)

53Jpg format

1048729 Koristi se za slike koje imaju bogatstvo boja Format može da prikaže 65535 boja Portreti pejzaži fotografije ndash publikuju se u JPG formatu1048729 Ovaj format je takođe kompresivan i ima gubitaka Datoteke snimljene u JPG formatu po pravilu su nešto veće1048729 Prilikom snimanja u Photo Shop-u u procesu optimizacije izabrati HIGH opciju

19

Prilikom optimizacije slike za web izabrati RGB sistem boja a ne CMYK ovaj drugi se koristi za pripremu slika za ofset štampu1048729 JPG se može prikazati kao slika u segmentima u vidu padajuće zavese (opcija progresive)1048729 Slike optimizovane kao progresive ne mogu se štampati na štampaču

54Značaj isporuke web lokacije (gde dizajneri greše)Pod isporukom se podrazumeva prenos sadržaja lokacije korisnicima preko Web-a U principu ovde se radi o optimizaciji lokacije za brzu isporuku korisniku Brzina isporuke skopčana je sa različitim činiocima1048729 Težina tj veličina web strana lokacije (tabele mulitmedijalni sadržaji) tj kako je web strana optimizovana1048729 Brzina (i opterećenje) web servera koji hostuje web lokaciju1048729 Gustina Internet saobraćaja u datom trenutku1048729 Kvalitet Internet komunikacionih kanala (propusna moć) provajderaPRAVILO korisnik neće ulaziti u razloge zašto je odziv lokacije spor nego će problem posmatrati kao celinu1048729 Ako ne mora na lokaciju sa sporim odzivom korisnik se po pravilu neće vraćatiGde dizajneri greše

Dizajneri Web-a znaju da korisnici ne vole spore lokacije Zato u toku izrade optimizuju lokaciju (kompresije slika optimiziacija teksta)1048729 Problem je u tome da dizajneri moraju posvetiti pažnje i drugim aspektima problema ndash zbog kojih lokacija može biti sporaPravilo trudite se da korisnik uvek bude zadovoljan

Izbor servera za zahtevne lokacijeAko ste uradili lokaciju kojoj pristupa u istom trenutku veliki broj korisnika ili akose preko nje šalje strujeći (stream) multimedijalni sadržaj (radio ili TV stanica) od presudne važnosti je da je hostuje web server sa snažnim računarom (višeod 1 procesorske jedinice) povezan na DSL link velike propusne moći (34 ili 155 Mbsec)

55 Protokoli na web-u (HTTP protokol kako funkcioniše veza klijent-web server)

PROTOKOLI NA WEB-UWeb kao servis Interneta izgrađen je na grupi protokola čije karakteristike utiču na brzinu isporuke lokacije Razumevanje funkcionisanja protokola pomaže dizajneru u optimizaciji web lokacije1048729 Protokoli su programi kojima se sporazumevaju računari umrezeni na Internet i vrše međusobnu razmernu informacija1048729 Aktiviranje protokola podstiče korisnik koji npr poziva da se učita matična strana određene web lokacijeHTTP protokol

20

1048729Ovo je osnovni protokol koji služi za komunikaciju između korisnika koji poseduje čitač Web-a i Web servera (na kojem se nalazi sadržaj web lokacije ndash sajt)1048729Protkol je jednostavan Radi na principu zahtevodgovor Namenjen je isporuci statičnog sadržaja

Kako funkcioniše HTTP protokolČitač Weba (npr Internet Explorer) našeg korisnika zahteva dovlačenje određene strane sa celokupnim sadržajem sa web servera u računar korisnika HTTP specifikacijom koju šalje Web serveru u sledećoj formi

GET ispitiepo_januar2008htm HTTP11 Connection Keep-AliveUser Agent Mozilla 40 (compatible MSIE 600 Windows XP Pro)Accept applicationx-comet imagegif imagex-xbitmap imagejpeg imagepjpeg Accept language en-us

Transfer sadržaja HTTP protokolom

Kad web server primi zahtev odgovoriće sopstvenom porukom Ako tražena strana ne postoji na web serveru odgovor će imati formu ldquo404 Not foundrdquoNeki provajderi stranu 404 su optimizovali i prilagodili potrebama korisnika ( Npr stoji tekst Pozvana strana ne može da se dovuče - web server wwwvetseduyu)Ako strana postoji Web server šalje Mrežom odgovor u formi HTTP11 200 OKPošto su Web čitač korisnika i server koji hostuje web lokacijusajt uspešno razmenili poruke i ldquorazumeli serdquo ndash server će početi sa isporukom traženog sadržaja Pod sadržajem se podrazumeva HTML i multimedijalni sadržaj ndash slike zvuk itd

Isporuka različitih tipova datoteka

1048729 Kroz 4 otvorena komunikaciona kanala čitač web-a na strani korisnika (Internet Explorer) preuzima traženi sadržaj sa web lokacije Najpre obrađuje HTML sadržaj (tekst) a zatim i implementirane multimedijalne sadržaje GIF JPG PNG1048729 Čitač Web-a korisnika može biti ojačan plugin-ima tako da može da obrađuje i druge datoteke ndash PDF MOV RA SWF DOC itd

Datoteke koje čitač ne može da obradi

1048729 Kad čitač web-a primi datoteku koju ne može da obradi ponudiće korisniku da tu datoeku snimi na njegov lokalni disk (ovo se uvek događa kad se sa mreže dovlače razni programi arhivirani Winzip ili nekim drugim arhiverom)

21

1048729 Za svaki objekat implementiran na web strani čitač će poslati poseban zahtev Server zahtev razmatra Ako objekat postoji a nije definisan poseban uslov ndash šalje odgovor a onda objekat1048729 Ova prepiskakomunikacija nekad traje i preko 15 servera i ume da traje

56 Http protokol I dizajn web strana (specifičnosti TCP protokola u pogledu brzine prenosa datoteka)

1048729 Odvojenost zahteva za isporukom HTML sadržaja i svakog implementiranog multimedijalnog objekta mora se stalno imati na umu1048729 Očigledno ovaj proces koji traje jedan je od razloga što se web strane sporo učitavaju i što su korisnici nezadovoljni1048729 Nezadovoljstvo korisnika ume da bude najveće baš zbog toga što se strane sporo učitavaju

1048729 Pravilo Pokušajte da broj objekata po web strani smanjite ili da neke objekte pripojite drugim stranama Na taj način ćete dobiti na brzini isporuke sadržaja1048729 TCP protokol za prenos datoteka postuže pun kapacitet tek posle izvesnog vremena Male datoteke (20-30 kb) prenose se ispod potencijalno optimalne brzine prenosa (što nije slučaj sa velikim datotekama)

57 Izbor naziva domena web lokacije (značaj trikovi sa adresama)

Izbor imena domena Web lokacije veoma značajno1048729 Kod izbora imena domena treba voditi računa da ime bude kratko i da se prema tome lako pamti1048729 Npr firma MOTOROLA izabrala je ime wwwmotcom a firma Hewlett Pacard ndash wwwhpcom

Web lokacije se adresiraju putem Uniformnih Lokacija Resursa (URL)1048729 Domen se može odrediti kao najkraća adresa lokacije1048729 Npr wwwibmcom1048729 Kad korisnik ukuca gornju adresu saopštava web serveru da pristupi korenskom direktorijumu i preuzme indeksnu datoteku zajedno sa njenimSadržajem

Trikovi sa adresama Web lokacija1048729Neki vlasnici Web lokacija služe se trikovima tako da simboličke adrese prijavljuju kao numeričkeNpr http1952134512

Ovakve adrese su korektne sa stanovišta adresiranja Ipak najčešće ukazuju na neku vrstu ilegale Brojne lokacije za prodaju porno sadržaja ili ilegalnog piratovanog softvera sakrivaju se iza numeričkih adresa Kako je ovo postalo

22

konvencija na Web-u pretraživač IE 60 će vas Upozoriti pre učitavanja sadržaja sa takve adrese na eventualni rizik

Dinamicke Web strane

1048729 Neke web stranice ldquogenerišu se u leturdquo ndash na zahtev korisnika1048729 U pitanju su dinamičke web strane Dinamičke Web strane povlače podatke iz baze podataka koja se nalazi na istom Web serveru1048729 Tipične dinamičke strane jesu lokacije koje omogućavaju Webmail i E-trgovinu glasanje i sl

Prepoznavanje dinamičkih Web strana

1048729 Ove stranice mogu se prepoznati po tome što započinju znakom pitanja1048729 Npr wwwvetseduyustudentiepo run-search cgiquery=+027velimir+stanojevicy27Razmak je u ovoj sintaksi pretvopren u znak ldquo+rdquo dok je 027 sintaksa znake navoda ldquo ldquo1048729 Sintaksa za prepoznavanje ampPRAVILO U hipervezama unutar lokacije izbegavajte direktno (tekstualno) navođenje ovakvih adresa kako ne biste zbunili korisnika

58 Web serveri pojam struktura i zadaci web servera

Web serveri su računari na kojima se izvršava program koji opslužuje zahteve korisnika web sajtova koji su na tom računaru postavljeni (hostovani)

SERVER SE SASTOJI OD HARDVERA I SOFTVERA

Zadaci Web servera

1048729Da što većom brzinom učita sa sopstvenog HD datoteke koje udaljeni korisnik traži i isporuči ih preko Interneta1048729Da izvršava programe koje korisnici pokrenu (CGI) i brzo vraća korisniku njihove rezultate

59 Hardver i softver za web server

HardverZa web server treba izabrati moćan računar sa velikom količinom RAM memorije velikim kapacitetom HD i po mogućnosti sa više procesora

Razlog Na web serveru se u istom trenutku izvršava na hiljade operacija nastalih na osnovu zahteva korisnika Samo dovoljno snažan računar takvo obilje zahteva može da prihvati i brzo da obradi

23

Softver

1048729Na tržištu postoji velik broj aplikacija za web server besplatnih i komercijalnih1048729Pravilo Proizvođač određenog web servera uradio je program za određenu platformu ndashoperativni sistem (Unix Windows XP)

60Apache server ndash dobre I loše strane

Najpopularniji je serverski softver za web na Internetu Popularnost besplatan je i veoma je brz Podržava brojne besplatnedodatke za izvršavanje skriptova (Perl PHP itd)NEDOSTACIPostoji u verziji za OS LinuxPostoji I verzija za WindowsServer je besplatan nije komercijalan tako da se uz njegovu isporuku ne pruža tehnička podrškaNeke kompanije značajne poslove za poslovanje obavljajuna serverima za koje se pruža tehnička podrška što je u biznisu izuzetno važno

61MIIS server ndash dobre i loše strane

Integrisan je u softverski paket Windows zasnovan na NT tehnologiji

1048729Optimizovan je za računare (servere) koji rade pod Windows NT tehnologijom1048729Odlično je integrisan sa drugim značajnim Microsoftovim proizvodima kao što je baza SQL1048729Slaba strana manje je fleksibilan od Apache servera specifičnim zahtevima web lokacija

62Bezbednost web servera metodi zaštite web servera

Bezbednost web serveraProblem bezbednosti sadržaja web servera aktuelizovan je sa pojavom i ekspanzijom elektronskog poslovanjaRazlozi upada na web servere (hakovanje) jesu radoznalost političkiideološki i kriminalni (pribavljanje neovlašćene koristi ndash krađa)

METODI NAPADA NA WEB SERVERE-Pogađanje lozinke (postoje i softverski alati koji mogu pomoći)-Zloupotreba operativnog sistema ndashplatforme Server programa-Podvaljivanje ndashlažno predstavljanje hakera

Posledice upada na web lokacije

-Materijalna šteta

24

-Narušavanje ugleda kompanije čija je lokacija uhakovana Metodi zaštite web servera1048729Koristite dugačke lozinke za pristup sadržaju svoje web lokacije Lozinke treba da predstavljaju besmislenu kombinaciju slova i brojeva i moraju se često menjati1048729Održavajte redovno operativni sistem koji opslužuje program Web server Npr Apgrejdujte redovno Windows XP pro server (poslednja revizija Servis Pack 2)1048729Smanjite broj tačaka pristupa web serveru svedite protokol na Web (HTTP)

Zaštita pomoću digitalnog sertifikata

1048729Koristite digitalne certifikate da bi identitet vaše lokacije mogao biti potvrđen Koristite HTTPS protokole za razmenu podatakawwwverisigncom Kad su u pitanju podaci poput broja čekovne kartice korisnika

63Analiza posećenosti web lokacije ndash značaj

1048729Analiza posećenosti sajta-lokacije je veoma važan posao za administratore lokacije

1048729Upravljanje lokacijom ne može se zamisliti bez analize posećenosti

1048729Smisao analize posećenosti da se utvrdi ko odakle koliko često i koje delove web lokacije posećuje

1048729Na osnovu takvih informacija vlasnik lokacije pravi strategiju Veću pažnju posvećuje sadržajima koji se često preuzimaju

64Tehnike praćenja posećenosti web lokacije ndash dobre I loše strane

Praćenje posećenosti preko Free stat (tracking) servera-web lokacija 1048729httpwwwextreme-dmcom

Dobre strane

1048729Pruža više informacija o korisnicima lokacije od brojača posete

Slabe strane

1048729Ne može da pruži potpun uvid u aktivnosti i interesovanja korisnika za sadržaj lokacije

25

1048729Matična strana na kojoj je implementuran link prema Stat serverusporije se učitava jer veza prema serveru mora da se uspostaviA server je dalek i opterećen

65Praćenje posećenosti web lokacije pomoću dnevnika web servera Web serveri generišu dnevnik posećenosti web sajtova koji su na njima hostovani tako što prave log fajl Dnevnik posećenosti sadrži brojne podatke od značaja za vlasnike web lokacije odakle dolaze korisnici koliko dugo ostaju na lokaciji koje sadržaje preuzimaju itd Tekstualni podaci mogu biti povezani sa programom Web Analyzer kompanije Netiq instaliranom na web serveru

26

ltheadgt lthtmlgt

Zašto su ovi elementi bitni

Element head takođe ima svoje oznake za otvaranje i zatvaranje (ltheadgt i ltheadgt) i ne traži nikakve atribute Ipak skoro je neophodno popuniti neke ako ne i sve atribute head elementa

Atribut FunkcijaTitle element omogućava da u dokument ubacimo naslov dokumentaMeta element omogućava da u dokument ubacimo ključne reči opis ime autora i slične dodatne opise straneScript element omogućava ubacivanje skriptova u dokumentStyle element omogućava ubacivanje informacija o primenjenom CSS stiluLink element se najčešće koristi za povezivanje na spoljašnje fajlove sa stilovima

Element meta

Iako nije obavezan ovaj element ima puno različitih funkcija Kodiranje dokumenata

Kodiranje dokumenta se odnosi na skup karaktera koji se koristi na web strani što je jako bitno ako web strana sadrži specifične karaktere Na primer naša slova (ČčĆćŽžŠšĐđ) ili slične specifične karaktere Da bi se ovi i slični karakterili pravilno prikazivali neophodno je ispravno navesti kodni raspored koji se koristi na strani Za engleski jezik standard je ISO 8859-1 dok je za ostale jezike preporučljivo koristiti UTF-8Detalje pogledajte na httpwwwwebstandardsorglearnaskw3cdec2002htmlKljučne reči opis autor

Element meta se može koristiti (i koristi se) za opis ključnih rečii opis sajta potpis autora i sl Ovo je izuzetno korisno kod optimizacije sajta za pretraživače

Ključne reči su reči ili fraze koje se mogu koristiti tokom pretraživanjaOve informacije se ne vide na web strani ali su jako korisne ispod haube i pomažu vidljivosti vašeg sajta na pretraživačima

6 Kaskadni model planiranja Web lokacije

Ovo je najčešći model planiranja Suština polazi se od opšteg prema pojedinačnomFAZE PLANIRANJA

2








3









4









5










6








7







8



20Opisne strane


21FAQ strane


9










10









11










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26








3









4









5










6








7







8



20Opisne strane


21FAQ strane


9










10









11










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26









4









5










6








7







8



20Opisne strane


21FAQ strane


9










10









11










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26









5










6








7







8



20Opisne strane


21FAQ strane


9










10









11










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26










6








7







8



20Opisne strane


21FAQ strane


9










10









11










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26








7







8



20Opisne strane


21FAQ strane


9










10









11










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26







8



20Opisne strane


21FAQ strane


9










10









11










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26



20Opisne strane


21FAQ strane


9










10









11










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26










10









11










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26









11










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26










12









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26









13













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26













14



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26



Kad i kako





Dobre strane


Slabe strane



15






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26






Dobre strane


Slabe strane




16











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26











17









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26









18







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26







52Animirani gif


53Jpg format


19







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26







20










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26










21










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26










22









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26









Zadaci Web servera





23

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26

Softver











-Materijalna šteta

24











Dobre strane


Slabe strane


25



26











Dobre strane


Slabe strane


25



26



26

Documents

web dizajn - skripte,Sandra