Osnove Web Dizajna

You might also like

You are on page 1of 33

UVOD

Poeci Interneta potjeu od vojnog projekta SAD-a, odnosno Ministarstva obrane, koji je kasnije predan na upotrebu amerikoj znanstvenoj zajednici, a s pojavom malih kunih raunala toliko se proirio da je postao jedan od najvanijih medija za pronalaenje vijesti, informacija, izmjenu poruka, pisama, zabavu, kupovinu, edukaciju, poslovanje Internet kao medij prijenosa informacija trebao bi svoju primjenu imati i u nastavi stranice kole kao mjesto prikupljanja informacija o samoj koli, nastavnoj grai, osobne stranice uenika, traenje informacija o piscima , slikarima, objavljivanje radova, Vjerujem da se veina uenika i profesora ve susrela sa izrazom Internet, ali se ipak, kada se govori o Internetu, treba poeti od osnovnog pitanja (definicije) -to je zapravo Internet? Oko ove definicije jo se uvijek spore razni strunjaci. Naime nemogue je ukratko opisati ovaj fenomen, pa tako postoji par definicija, a one glase: Internet je: Mrea koja se sastoji od manjih mrea raunala koja koriste protokole iz skupine TCP/IP. Oblik komunikacije ljudske zajednice koja razvija i koristi te mree. Zbirka resursa i podataka do kojih se moe doi na tim mreama. Sve tri definicije zapravo su tone.

Osim to ubrzava rad, Internet omoguuje uvid u vei broj informacija (npr. vei broj reprodukcija odreenog

1.

umjetnika o kojem se govori na satu, ispis djela, biografije) nego je to mogue iznijeti obinim putem (donoenjem velikog broja tekih knjiga, kopiranje u boji, slabe reprodukcije) U ovom radu biti e rijei upravo u primjeni u nastavi likovne kulture, jer do sada ova tema nije bila spominjana ni u jednom udbeniku iz likovne kulture i vrlo ga mali broj nastavnika i profesora koristi. Osim o primjeni Interneta u nastavi likovne kulture, u ovom e radu biti rijei i o te povijesti Interneta, alatima i nainu izrade Web stranica. U prvom poglavlju Povijest i nastanak Interneta biti e rijei upravo o tome kao je tekao razvoj Interneta i Weba, kako se, takorei, od zatvorene dravne vojne mree Internet razvio u ono to je danas. U drugom poglavlju Pretraivanje na Internetu biti e govora o pregledniku (browser) Weba, tj. o programima bez kojih nam Web stranice ne bi bile dostupne Internet Exploreru i Netscapeu i o pretraivaima kao to su Altavista i Yahoo. Zatim slijedi tree poglavlje Programi potrebni za izradu web stranica u kojem e naravno biti rijei o samoj izradi www stranica, poevi od glavnih alata za slaganje i izradu stranica uz kratke opise koji bi mogli pomoi u izboru. Da bi Web stranica bila zanimljiva moraju se koristiti i slike. Gdje ih napraviti, kako i zato govori nam etvrto poglavlje pod nazivom Izrada grafikih dijelova za web stranice. U petom poglavlju Web u Hrvatskoj moete proitati o stanju na domaoj sceni. Razmotrit emo trenutne dosege u dizajnu i kvaliteti Web stranica. Posljednje, esto poglavlje govori o Oblikovanju web stranica i praktinoj primjeni u nastavi.

2.

POVIJEST I NASTANAK INTERNETA Jednom davno 1968. godine ameriko Ministarstvo obrane odluilo je uloiti novac u eksperimentalni projekt, tonije u razvoj mree. Taj projekt povjeren je organizaciji ARPA (Advanced Research Projects Agency), te je tako nastala mrea ARPAnet koja se smatra prethodnicom Interneta. Sama mrea bila je zasnovana na tada posve novoj tehnologiji paketnog prespajanja. Onoga trenutka kada je Ministarstvo obrane odluilo svoju ARPAnet mreu povezati sa drugim javnim, sveuilinim i znanstvenim mreama nastao je Internet kakvog danas poznajemo, ali naravno u puno manjem obliku jer je tadanja mrea obuhvaala samo etiri institucije, uglavnom sveuiline. Stvoren je protokol koji je sluio za prijenos podataka putem te mree pod nazivom IP Internet Protokol. Internet jo nije bio naziv cijele mree nego je ta rije bila skraenica od Internetworking povezivanje mrea. Ova tehnologija omoguila je meusobno komuniciranje razliitih tipova raunala, to je izuzetno vano za daljnji razvoj Interneta. Poetkom osamdesetih godina nastaju nove lokalne mree i sve one htjele su biti spojene na ARPAnet koji je tako postao medij komuniciranja i za mnoge komercijalne organizacije, a ne samo vojne i znanstvene ustanove kako je bilo prvotno zamiljeno. Jedan od najveih problema na samom poetku razvoja Interneta je bilo kako povezati udaljena raunala na novu mreu. Telefonske linije bile su preskupe da bi netko mogao priutiti tisue i tisue kilometara ica do zamiljenog centra. Stoga je odlueno da Internet bude potpuno decentraliziran. Stvorene su regionalne mree po dravama i po veim gradovima, koje su meusobno bile povezane. Na taj nain svako raunalo moe doi do bilo kojeg drugog raunala bilo gdje na mrei. I dan danas Internet upravo tako radi. Godine 1986. zapoeo je rad na intenzivnoj komercijalizaciji mree, vojna raunala prebaena su u posebnu mreu, zastarjeli ARPAnetov sustav zamijenjen je boljim NSFnetom (National Science Fondation) - agencija

3.

HTML (Hipertext Markup Language) > jezik na kojem se temelji Web. Sastoji se od nekoliko desetaka tagova koji uz odgovarajue parametre i varijable tagova odreuju nain formatiranja stranice, njen izgled, hiperlinkove na druge stranice ili datoteke. Tag > osnovni element html-a, koji poinje znakom <, a zavrava > <html> <head> zaglavlje stranice </head> <body> sadraj na stranici </body> </html>

amerike vlade koja se bavi znanou i koja je imala vlastitu mreu sa nekoliko centara sa super-raunalima (sada sasvim prosjeni pentium procesor), a sa drugim mreama bila je povezana ARPAnetom. 1995. godine i NSFnet je zamijenjen, a kraljenicom Interneta sada postaju sve do tada povezane mree. World Wide Web Kako Internet kao mrea postoji ve tridesetak godina tek je sa pojavom World Wide Weba Internet postao ono to je danas. Ono to je Internetu na njegovim poecima nedostajalo bila je udobnost suelja prilikom prikupljanja podataka. Jednostavno nije bilo suelja koje bi objedinilo pristup do svih usluga na Internetu i korisnici su bili prisiljeni runo upisivati naredbe. Veina ljudi nije htjela ili nije znala pisati naredbene retke, kojih je trebalo upisati i po desetak da bi se dolo do podataka. Stoga 1989. godine Tim Berners Lee iz Europskog laboratorija za nuklearnu fiziku u vicarskoj CERN-a pie prijedlog za izradu jedinstvenog hipertekstualnog sustava za distribuciju podataka meu ljudima tj. tada jo uvijek samo znanstvenicima jer 1989. godine jo uvijek nije bilo velikog broja kunih i malih korisnika sa pristupom na Internet. Krajem 1990. godine poeo se razvijati sam projekt World Wide Weba. Poelo se sa razvojem prvog programa za pristup Webu jednostavnog imena WWW. Ovaj program radio je sa tekstualnim sueljem. Krajem 1992. godine ve je postojalo pedesetak posluitelja za WWW. Ubrzo je napisan i prvi preglednik (broswer) sa grafikim sueljem Viola, a napisana je i prva verzija HTML jezika (Hipertext Markup Language) toliko jednostavnija od dananje, ali postojanje hiperlinkova za povezivanje dokumenata omoguilo je lako pretraivanje i sasvim dovoljnu dostupnost informacijama. Poetkom 1993. godine napisao je Marc Andreessen iz NCSA (National Center for Supercomputing Applications) i drugi takav pretraiva nazvan Mosaic. Marc 1994. godine

Link ili Hiperlink > direktna veza na Web stranici koja vodi na neku drugu stranicu ili dokument. Bilo koji tekst ili slika koja je oznaena kao hiperlink odvest e nas na stranicu koja se moe nalaziti bilo gdje na Internetu.

Domena > dio adrese Web stranice. je http://www.umas.hr adresa tj. url, dok je umas.hr domena.

Download > prenoenje datoteka sa Interneta na svoje raunalo.

Plug-in > dodatak za browser, vanjska aplikacija koja se poziva u trenutku kada browser naie na odgovarajui sadraj. Npr. Flash.

4.

osniva firmu Netscape Comunications i smatra se uz Tima Bernersa najznaajnijim ovjekom za razvoj WWW-a. Krajem 1994. godine projekt razvoja World Wide Weba polako preuzima Konzorcij W3 koji su zajedniki osnovali CERN i MIT (Massachusetts Institute of Tehnology). 1994. godine evoluira i HTML jezik koji u svojoj verziji 2.0 donosi podrku za neke kljune stvari kao to su: formulari i obrasci. Iste godine nastaje i prva verzija Netscapea koji donosi jednu vrlo vanu novost, a to je prikazivanje JPEG slika (drugi pretraivai bili su ogranieni samo na GIF-ove). 1995. godine Netscape dolazi do verzije 1.1 i unosi dodatne novosti, ali izvan vaeih standarda, za HTML jezik. Unosi svoje tagove kao to su oni za pozadine i tablice. Iako ovo izaziva brojne rasprave o ispravnosti takvog postupka Netscapeovi tagovi pomalo ovladavaju mreom. 1995. godine izlaze i Windowsi 95 tvrtke Microsoft koja je tada poprilino nesvjesna vanosti Interneta te uz dodatak plus donosi jako slabu verziju pretraivaa pod nazivom Internet Explorer. 1996. godine Netscape izbacuje verziju za verzijom, na to odgovara Microsoft sa IE 2.0, koji nagovjetava stvaranje jo jednog monog pretraivaa, jaku konkurenciju popularnom Netscapeu. Nakon neuspjelih pokuaja standardizacije HTML 3.0 standarda W3 die ruke od HTML-a, ali se nakon izlaska nove verzije IE 3.0 tada ve puno boljeg od istobrojne verzije Netscapea , dogovara i ipak vraa praenju razvoja HTML standarda te izlazi HTML 3.2. 1997. godine donosi se etvrta verzija HTML jezika, a na proljee iste godine obje firme izbacuju svoje pretraivae sa brojem 4.0. I ve je oita velika prednost Microsoftovog IE-a. 1998. godine pod nadzorom W3 konzorcija konano izlazi HTML 4.0 verzija u tri podverzije. HTML 4.0 strict namjenjen je za upotrebu style sheets-a (CSS), HTML 4.0 Transitional ima prezentacijske

5.

mogunosti, te HTML 4.0 Framest za sve ljubitelje okvira (frameova). Napredne tehnologije na Webu

CSS Cascadina Style Sheets Vrlo su moan alat za precizno pozicioniranje slova, tablica i ostalih elemenata na stranici tako da Web stranica moe biti na razini DTP-a ( alata za stolno izdavatvo). Izgled stranice isti je i na ekranu i na papiru i ostalim izlaznim ureajima. Sam HTML jezik nikad nije bio zamiljen kao jezik za grafiko formatiranje stranica pa bi uvoenje CSS-a trebalo ispraviti taj nedostatak. Osim to slui za odreivanje veliina, fonta i boje slova, poloaja odlomaka, podrku za audio pretraivae, prednost kombinacije HTML + CSS ogromna je posebno ako se CSS izdvoji u posebne datoteke jer je na taj nain vrlo jednostavno napraviti stilski predloak za cijeli web site i osigurati dosljednu prezentaciju bez mnogo truda. Na taj nain olakava se i odravanje stranica. Osim toga CSS je bitan ljudima sa potekoama, posebno onima sa oteenim vidom jer im omoguava da sami odrede izgled stranica tj. poveaju slova, promjene boju Tu je jo i iznimna karakteristika CSS-a precizno i apsolutno pozicioniranje objekata, odlomaka i slova to je bitan nedostatak HTML-a. DHTML (Dinamic HTML) Nije nita drugo nego ubacivanje skriptnih programa u HTML kod na Web stranicama, ime se postie interaktivnost. Odnosno DHTML je naziv za kod stranicama kojima je dinaminost postignuta nekim od skriptnih jezika. DHTMLom je omogueno stvaranje animacija, izmjena slika, jednostavna interakcija. Podravaju ga pretraivai etvrte generacije. Java Programski jezik tvrtke Sun kojim se mogu raditi animacije, manji interaktivni apleti, jednostavnije igrice. Podravaju ga gotovo svi pretraivai. Java Script, VBScript,JScript Programski su jezici koji nemaju veze sa Javom. Rije je o skriptnim jezicima iji se kod ne kompilira nego se izravno ubacuje u kod. Ove skripte imaju razne mogunosti izmjena slika, formulari, razne manje animacije. ActiveX Ovom tehnologijom omoguena je izrada raznih animacija i interaktivnih apleta, a podrava je Internat Explorer 3,0 i kasniji. Flash Program za izradu vektorske animacije tvrtke Macromedia. Flash omoguava prikazivanje vektora koji sadre manje kilobajta od obine grafike, pa je mogue stvoriti animirane, interaktivne stranice bogate grafikom. Takve stranice mogu vidjeti svi koji imaju instaliran plug-in ili RealMedia Player 5,0. ASP; PHP; JSP;CGI. Serverske tehnologije bez kojih bi bilo nemogue ispunjavanje raznih obrazaca, formulara i zapisivanje podataka u baze (access, sql) One se odigravaju na serveru i o njemu ovisi da li ih netko moe koristiti ili ne.

6.

PRETRAIVANJE NA INTERNETU BROWSERI Preglednik (browser) je program pomou kojeg pregledavamo Web stranice, a najpopularnija dva su Netscape i Internet Explorer. Prilikom izrade Web stranica, jedan od najveih problema s kojim se suoavamo je ogromna razlika u preglednicima posebno izmeu ova dva najvanija. Sa ubrzanim razvojem svijeta Weba i preglednika teko je jamiti istovjetnost izgleda na svim klijentskim platformama posebno uz injenicu to se oni ponekad i namjerno umjetno razlikuju. U zadnje vrijeme veina ljudi (cca 80%) koristi IE. Evo i kratkog pregleda dva najznaajnija preglednika, njihovih mogunosti i nemogunosti. Netscape Navigator Iako danas nije najbolji ovaj preglednik je bio vodei na samom poetku razvoja WWW-a. Pria o Netscapeu zapoinje prvim grafikim preglednikom Mosaicom napisanim u NCSA-i. Jedan od autora bio je i Marc Andreessen koji je kasnije iz NSCA-e povukao sa sobom ekipu ljudi te osnovao Mosaic Comunications i od Mosaica poeo razvijati novi program poetnog imena Mozilla (naziv su sastavili od reenice Mosaic Meet Godzilla) - izraavajui tako namjeru da naprave program koji e na svim poljima potui Mosaic. Naravno stvar im je uspjela vie nego su oekivali. Program je uskoro nazvan Navigator, a sama tvrtka dobiva naziv Netscape Comunications. Netscape je u svemu bio bolji, isticao se veim brojem opcija, brzinom prikaza stranice, a postavio je i nove standarde za ureenje izgleda Web stranica. Prihvatio je sve HTML standarde ali donosi i nova svojstva jezika poput prikaza okvira, obrazaca Iako to tada nije bilo u standardu Netscape ih je praktiki uinio takvima, a svi sa oduevljenjem prihvatili. Bio je prvi program koji je imao ugraenu podrku za Javu i JavaScript, a u verziji 2.0 uvrteni su i moduli za rad sa Internet potom i News grupama. Tako je dobiven jak program koji u sebi objedinjuje sve to je potrebno za rad na Internetu uz naglasak na jake sigurnosne opcije.

7.

Sve do poetka 1996. godine nije imao ozbiljnije konkurencije, ali kada se na tritu pojavio Microsoftov proizvod IE 3.0 stvari su se poele mijenjati. Iako je Netscape u trenucima pisanja ovog teksta tek lo suparnik IE-u u matinoj tvrtci jo nisu digli ruke od njega i u travnju 2000. godine izala je nova verzija Netscape 6.0 koja se moe pohvaliti da ima gotovo sve to IE ima odavno.

Netscape

Internet Explorer

Dok je Netscape bio na vrhuncu moi Microsoft je zajedno sa Windowsima 95 objavio i prvu verziju svog preglednika. Nakon prvog pogleda na tu prvu verziju stvar je bila jasna, Microsoft je u urbi da nadoknadi prednost izdao lo program. Verzija 2.0 bila je ve solidnija, ali ipak jo daleko od svog konkurenta. U toj verziji podrani su novi elementi HTML jezika program je doguran do sasvim pristojne i upotrebljive razine. Iako je program temeljen na tada ve razvijenom i solidnom

8.

Mosaicu nije jasno kako je mogao biti toliko loiji. Meutim sa verzijom 3.0 stvari su se promijenile i iako su ljudi bili skeptini oni koji su novom IE-u dali priliku potpuno su zaboravili Netscape. Verzija 3.0 dobila je nove mogunosti, mnogo toga to Netscape nije podravao (ActiveX ), veinu funkcija iz novog 3.2 HTML standarda (podrka za CSS, True type fontove, bolju podrku za slojeve - layere), to je omoguilo jednostavno stvaranje dinamikih sadraja na Webu.

Internet Explorer 5.5

Dodajmo uz to novo grafiko suelje, potpuno ispoetka pisan program i integraciju sa Windowsima IE 3.0 predstavlja zaokret u koncepciji pretraivakih programa. Najvea novost koja je pobudila veliko zanimanje javnosti ali i strunih programera bila je podrka za ActiveX. Danas je u upotrebi verzija 5.5 koja je izala kao ispravka verzije 5.0 koja je imala sigurnosne probleme najveu boljku IE-a (Pcchip, travanj 1999). Bitka na tritu pretraivakih programa bila je i biti e zanimljiva, no bez konkurencije nema napretka. PRETRAIVAI NA INTERNETU Osim pretraivakih programa koje svatko mora instalirati na svoje raunalo postoje i stranice sa pretraivakim

9.

mehanizmom i na samom Internetu. Preko Interneta moe se doi do veine informacija koja nas zanima u ovom sluaju do onih vezanih za likovnu kulturu. Internet nam pomou WWW-a omoguava praenje izlobi, posjeivanje muzeja, galerija, knjinica, uvid u informacije o autorima uz vizualni doivljaj njihovih djela, te ispis traenog materijala. Meutim da bi u velikom mnotvu informacija pronali upravo onu koja vas zanima potrebne su stranice kao to su www.altavista.com, www.google.com, www.yahoo.com ili http://cross.carnet.hr, http://search.iskon.hr, http://www.hr za Hrvatsko podruje koje nam omoguavaju jednostavno traenje uz pomo odreenih kljunih rijei, teksta koje sadri traeni dokument, naziva slike Ako npr. traimo djela Vincenta van Gogha dovoljno je upisati njegovo ime u pretraiva npr. Altavisti da bi se dobio popis stranica na kojima imamo traene podatke tj. djela. Takoer na Altavisti postoji i abecedni popis veine stranih umjetnika find by category/ arts&culture/ visual arts/ artist. Na isti nain mogu se pronai i muzeji, galerije, izlobe, razne organizacije vezane uz umjetnost, informacije iz povijesti umjetnosti, te razne novost.

Pretra iv a n je na Altavisti

10.

PROGRAMI POTREBNI ZA IZRADU WEB STRANICA Sve do prije nekoliko godina izrada stranica traila je od autora programerske vjetine jer iako su stranice bile posve grafiki jednostavne, da bi ih mogli sastaviti autori su morali poznavati ve spominjani HTML oblikovni jezik sastavljen od takozvanih tagova, odnosno svojevrsnih ifri kojima je autor unutar obine tekstualne datoteke odreivao kako dio teksta izgleda, na kojem mjestu stoji, da li je hiperlink, koje je veliine, boje i slino. Takve su se stranice radile u tzv. tekstualnim editorima. Neto kasnije na tritu su se pojavili napredniji tekstualni editori sa izbornicima ve gotovih naredbi koje bi automatski u tekst ubacivali tagove, bez da ih sam autor upisuje. Ali i tada izrada Web stranica ostala je dostupna samo programerima. Tako je bilo sve dok na trite nisu izali grafiki editori koji od autora ne zahtijevaju poznavanje HTML jezika. No ipak za profesionalnu izradu Web stranica potrebno je barem osnovno poznavanje HTML-a. Jer je i kod monih alata poput Microsoftovog FrontPagea ili Macromedinog Dreamweavera ipak potrebno uplitanje i ispravljanje direktno u kodu, posebno kada se radi o tablicama. to se tie odabira par najboljih Web editora dvojbe nema. Na prvom mjestu su dva ve spomenuta alata. Macromedia Dreamweaver, koji je u ovom podruju daleko vie napredovao i danas prua nesumnjivo najvie, ali nije jeftin, a ni osobito lak za savladavanje naroito onima koji ne poznaju osnove HTML-a i tehnologije Weba. Stoga za koritenje u nastavi preporuujem Microsoft FrontPage koji je u odnosu na Dreamweaver malo laki, jednostavniji pri koritenju, naroito poetnicima. Naravno na tritu postoji jo Web editora kao to su: Adobe GoLive 4.0, HomeSite 4.5, HotMetal Pro 6.0, Namo Web Editor 3.0, NetObject Fusion 5.0 i Trellix Web 2.6.
Dreamweaver 3.0

Ovaj program nudi elegantno suelje napueno paletama koje nude pristup monim funkcijama, meutim za mnoge koji se po prvi put susreu sa ovim programom upravo

11.

je to razlog zbog kojeg ovaj program djeluje konfuzno i teko za snalaenje. Veina uenika koji su imali nekakav doticaj sa raunalom upoznata je sa izgledom i nainom rada u Microsoft Office programima to ovdje nije sluaj. Meutim ovaj bi program preporuila onim naprednijim uenicima koji ele nauiti neto vie, drugaije. Podrka Dreamweavera za DHTML efekte i CSS omoguuje stvaranje dobro dizajniranih stranica sa potpunom kontrolom svakog elementa. Uz to suelje sadri praktian izbornik tagova i izvjetaj o veliini datoteke u stvarnom vremenu, popraen procijenjenim vremenom uitavanja. Omogueno je dodjeljivanje efekata pokretima mia, mogu se stvoriti animacije pomou vremenske crte izravno na radnom prostoru. Omogueno je i snimanje napravljenih animacija za koritenje na drugim stranicama. Kako Dreamweaver nema interni preview, potrebno je pokrenuti vanjski pretraiva za provjeravanje izgleda i interaktivnih elemenata.

Dreamweaver 3.0

Uz ove efekte Dreamweaver nudi i napredne funkcije za upravljanje site-om ukljuujui i interaktivnu mapu site-a, istodobni pregled lokalnih i daljnjih direktorija, pasivne FTP prijenose i automatsku sinkronizaciju. Nudi se takoer i

12.

jedinstvena mogunost provjere datoteka koje ulaze i izlaze sa servera to je vrlo pogodno za ekipnu izradu stranica. Mogue je stavljati sloj u sloj to je vrlo praktino. Slojeve je mogue grupno konfigurirati, npr. Tako da odredimo udaljenost dva sloja i njihove meusobne odnose. Rad sa svima mrskim tablicama tako je donekle rijeen jer Macromedia podrava ideju prema kojoj je u izradi neke Web stranice bolje koristiti slojeve nego tablice.
FrontPage 2000

FrontPage nudi mnogo mogunosti izbora: od izrade instant Web stranica pomou odgovarajuih arobnjaka, preko mnogobrojnih ve izraenih predloaka automatizirane izrade grafikih elemenata stranica, ova funkcija koju nodi FrontPage pogodna je za one uenike koji se po prvi put susreu sa nekom Web stranicom, pa sve do pune slobode pri izradi cjelokupne strukture, grafikog izgleda i sadraja.

FrontPage 2000

Izrada instant stranica nije ono radi ega e se profesionalac odluiti za ovaj program, ali je idealna za poetno savladavanje osnova. Ono to ini najvaniju odliku ovog programa je upravo jednostavnost upotrebe na bilo kojoj razini kompleksnosti izrade stranica. Sve naredbe i opcije

13.

jednostavno se nalaze, a veina ih je desnoj tipki mia to omoguava bre i lake kreiranje stranica. Suelje FrontPagea ujednaeno je sa drugim Microsoft Office aplikacijama pa e se svatko tko poznaje neke od tih aplikacija ovdje osjeati kao kod kue. Za razliku od Dreamweavera FrontPage u svom sklopu ima integrirani preview tako da se ne mora otvarati vanjski pretraiva za kontrolu izgleda stranica, iako je to potrebno zbog ve ranije spomenute razlike u pretraivaima. FrontPage preview naravno odgovara vie pravom izgledu stranice u Microsoftovom IE-u. Osim samog izgleda stranice omoguen nam je uvid u popis datoteka u aktualnoj mapi, u izvjetaj o verifikaciji linkova, statistiku site-a, dijagram strukture site-a, te popis zadaa koje stvara sam korisnik. Program bez problema unosi veinu Office formata, sjajna je i raznolikost DHTML efekata. Meutim u FrontPageu se ne moe snimiti animacija kao u Dreamweaveru. Ako Windows NT ili Unix Web server na kojem su stranice ima instaliranu podrku za FrontPage Server ekstenzije tada je mogue iskoristiti neke od najimpresivnijih mogunosti ovog programa. Npr. kada se dodaju elementi na site, program e automatski dodati linkove na nove datoteke. Ove FPS ekstenzije prijeko su potrebne za rukovanje obrascima i formularima. Uz ove napredne moguosti FrontPage nudi jednostavno integriranje ActiveX komponenti poput muzike, filmia (*avi) i drugih medija. Takoer FrontPage nam kao i Dreamweaver omoguava postavljane slojeva i njihovo tono pozicioniranje na stranici, kao i mapiranje odreene slike tako da pojedini dijelovi na toj slici budu linkovi. Adobe GoLive 4.01

Adobe GoLive 4.01

14.

Radno okruenje ovog program podsjea na programe za stolno izdavatvo. Stvaranje izgleda stranice radi se odvlaenjem draa (za slike, promjenjive slike) u dokument. Korisna mrea Grid omoguava precizno pozicioniranje elemenata na stranici, a kasnije se u pozadini pretvara u standardnu HTML tablicu. GoLive napredni Web efekti njegova su prednost, JavaScript i DHTML akcije spremne za koritenje nazivaju se CyberObjects i omoguuju korisnicima dovlaenje akcije kao to je npr. rollover efekt. GoLive sadri interni JavaScript editor, video editor za modificiranje QuickTime filmova. Takoer program nadzire status stranica i upozorava na potencijalne probleme kao to su prekinuti linkovi.
HotMetal Pro 6.0

Osim obinog grafikog pogleda, editiranje koda i preview ovaj program nudi i etvrtu opciju nazvanu Tags-on koja umee skripte kao jednostavan kod usred grafikog pogleda. Program nudi palete HTML elemenata, atributa i dogaaja osjetljivih na kontekst koji pomae u ispravnom pisanju koda.

HotMetal Pro 6.0

Namo Web Editor 3.0 Ovaj editor nudi standardno grafiko editiranje, editiranje koda i preview, uz napredne mogunosti poput DHTML-a kao i

15.

predloke poput FrontPagea. Ovaj se program istie jednostavnou izvoenja funkcija koje su u veini programa komplicirane, takoer omoguava prikaz dvije ili vie otvorenih stranica to je vrlo praktino i pojednostavljuje rad. Namo Webster ima i funkciju snimanja animacija i vremenskih crta.

Namo Web Editor 3.0

NetObject Fusion 5.0 NetObject Fusion funkcionira poput alata za stolno izdavatvo. Omogueno je stavljanje slika i drugih elemenata sa preciznou (do jednog piksela) kao i zakljuavanje objekata na njihovom mjestu pa je tako idealan za stvaranje stranica sa puno grafike. Za razliku od drugih programa kada se upisuje tekst ili ubacuje slika Fusion trai da se nacrta okvir koji e sadravati elemente to je odlika upravo alata za stolno izdavatvo. Ravnala sa mjerilima u pikselima omoguuju crtanje vodilica koje pomau pri preciznom postavljanu objekata na vie stranica odjedanput to je posebno korisna dizajnerska mogunost. Fusion koristi posebne formate datoteka tijekom editiranja tako da je pogodan za izradu stranica od poetka jer uvezene stranice reformatira i esto ih krivo posloi.

NetObject Fusion 5.0

16.

Trellix Web 2.6

Kod ovog programa omogueno je jedino grafiko editiranje stranica. Radi slino svakoj standardnoj poslovnoj aplikaciji, te su mu trake sa alatima vrlo sline Microsoft Office programima. Ne podrava CSS stilove kao ni apsolutno pozicioniranje pa nije pogodan za profesionalnu upotrebu.

Trellix Web 2.6

Flash 5.0 Od svoji skromnih poetaka kao Future Splash animator elija, ovaj Macromedijin proizvod evoluirao je u izvrstan alat za izradu interaktivnih Web site-ova. Kako za razliku od drugih alata Flash umjesto bitmapa koristi vektorsku grafiku, moe isporuiti izvanredno bogatu, sloenu i privlanu grafiku. A kako vektoraka grafika sadri manje kilobajta tj. laka je i skalibilna tako je omoguen pregled cijelog site-a od malog przoria pa sve do

Flash 5.0

17.

cijelog ekrana. Flash moda nije zamjena za HTML ali on omoguuje vrlo brzu interaktivnost i zvuk. Meutim da bi ga svi mogli vidjeti potrebno je instaliranje posebnog plug-ina koji preteno dolazi sa stranicama pa ga je jednostavno downloadati. Flash stranice izgledaju i ostavljaju dojam vie kao multimedijalne CD-rom prezentacija. Sa malo ili nita kodiranja mogu se dodati elementi poput kliznika, radio tipki, pop-up izbornika koji su inae dostupni samo u JavaScripti, Javi i ActiveX-u. Sa Flashom se mogu napraviti i jednostavne, a zabavne igrice koje e primamiti ljude da se vrate na te stranice. Dizajnira se tako to se dovlae slike i tekst na uslojeni radni prostor. Flashova vremenska crta s vie slojeva i alati za crtanje jako su jednostavni za upotrebu. Veliki plus su simboli koji mogu biti jedna slika, serija animacija, ili zvuni zapis, a koji se koju spremiti u biblioteku za kasniju upotrebu. Sve promijene koje se naprave na jednom simbolu auriraju se na svim mjestima gdje je simbol umetnut. Kod spremanja onog to je napravljano Flash omoguuje Flash format ukljuujui podrani HTML kod, GIF, JPEG, Quick Time ili Projector format samostalnu exe izvrnu datoteku. ( primjeri u Flashu mogu se nai na www.flahoo.com) Bitmapa vs. Vektori Kada u programu za slikanje nacrtate crtu program je konvertira u sitne etvrtaste toke nazvane pikseli. Ovakve se slike nazivaju bitmape. Meutim u programima za crtanje poput Corel Draw-a crtanjem se stvaraju objekti koji su nezavisne matematiki definirane linije i oblici, a iju putanju raunalo samo izraunava. Kako je raunalo idealno upravo za matematike procese za jedan vektorski krug trebati e manje prostora te manje vremena nego za bitmapirani krug kod kojeg mora pamtiti tonu boju i poloaj svakog pojedinog piksela. Na Webu je za sada vektore mogue vidjeti jedino u Flash-u koji je upravo zbog toga u prednosti pred obinim HTML-om.

Bitmapa

Vektor

18.

IZRADA GRAFIKIH DIJELOVA ZA WEB STRANICE Prikljuivanjem sve veeg broja korisnika na Internet i postavljanje sve veih zahtjeva Web stranice poprimaju atraktivniji izgled. Na poetku 90-tih pretraivai su mogli prikazati samo GIF sliice da bi tek 1994. godine u Netscape ukljueno i prikazivanje JPEG-ova. Osim ova dva grafika formata HTML je u stanju prenositi jo samo jedna grafiki format, a to je PNG, ali je njegova upotreba jako mala za razliku od prva dva spomenuta. Ovi formati zastupljeni su u HTML-u jer omoguavaju saimanje slika koje bi u svom originalnom obliku bile prevelike za prijenos. Npr. Jedna standardna slika veliine 5x5cm (72 dpi) u psd formatu teka je oko 64kB i trebalo bi joj oko pola minute za uitavanje. Nije problem kada je samo jedna slika na stranici , ali veina dobro dizajniranih site-ova ima obilje grafikih elementa i oni moraju biti svedeni na najmanju moguu mjeru da bi uitavanje trajalo to krae. Ljudi ne vole puno ekati uitavanje stranica. GIF radi na principu saimanja boja tako da je sa GIF-om bolje saeti neku jednostavnu sliku bez mnogo prijelaza. JPEG djeluje potpuno drugaije, naime on djeluje na nivou piksela i ovisno o kompresiji JPEG odreuje boju susjednih piksela prema onome u sredini. S JPEG-om je zato bolje saimati slike, fotografije sa obiljem sjena i prijelaza, ali nije pogodan za spremanje crtea naroito onih konvertiranih i eps-a. PNG je 24- bitna verzija GIF formata oblikovana za male slike u boji koje ne trebaju biti puno komprimirane. Bitmap grafika upravlja Webom barem za sada dok jo nije rairena tehnologija Flasha sa jedinim vektorskim oblicima na Webu. Poto grafika bitmape iznose devedeset posto cjelokupne prezentacije na Webu najvei izazov dananjim dizajnerima je kako e saeti tu grafiku, a da najmanje mogue rtvuju kvalitetu. Naravno da bi se uope napravila ili obradila neka sliica mora postojati i program specijaliziran upravo za to. Na tom podruju obradi bitmapa, prvo mjesto zauzima Adobe PhotoShop, slijede ga Corel PhotoPaint, te vrlo dobar shareware PaintShop Pro. U Adobeoveom programu u verziji 5.5 integriran je i odlian program namijenjen ba za izradu i saimanje slika za Web pod nazivom Image Ready. Osim njega postoji jo jedan program namijenjen samo izradi slika za

19.

Web Macromedijin FireWorks. Postoje i programi za izradu animiranih GIF-ova koji se kao banneri koriste kao jedno od najjaih marketinkih privlaenja kupaca na Web. Jedan od najboljih je Ulead GIF Animator koji znatno olakava izradu uz mnotvo filtera i efekata.
GIF skraenica je od Graphic Interchange Format. Za saimanje upotrebljava tzv. LZW kompresiju (Lempel Ziv Welch) koja omoguava utedu prostor bez veih gubitaka i rtvovanja slike, ali GIF moe obraivati samo slike koje sadre do 256 boja. Postoje dvije inaice GIF-a poznate pod kodovima 87a i 89a. GIF 87a podrava iskljuivo neprozirne piksele dok 89a nekim pikselima dozvoljava i transparentnost. GIF je iznimno popularan te nairoko podran format. Mnogo je bolji zbog svojih svojstava za saimanje crtea, teksta ili jednostavnih sliica. Da bi se slika spremila u GIF format potrebno ju je svesti na 256 boja to je mogue naredbom indexed color koja izostavlja sve boje osim onih najbitnijih. JPEG - format nazvan je prema grupi Joint Photographic Expert Group, najkorisniji je format za kompresiju. To je nain slobodne kompresije to znai da rtvuje kvalitetu slike, koja se moe kontrolirati tijekom opcije spremanja. JPEG postavlja sliku u blokove od 8x8 piksela koristei tehniku zvanu Adaptive Discrete Cosine Transform i izraunava 24bitnu prosjenu vrijednost svakog piksela u bloku, zatim pohranjuje prosjenu vrijednost boje u gornji lijevi piksel u bloku i dodjeljuje ostalim pikselima manju vrijednost od prosjene. Zatim JPEG dijeli blok na 8x8 svojih vlastitih blokova zvanih matrica konfiguracije, koji tada homogeniziraju vrijednost piksela mijenjanjem to ih je vie mogue u nulu. Kada PhotoShop otvori JPEG sliku moe povratiti originalnu distinkciju meu originalnim pikselima tako da pikseli poprime istu ili slinu boju. PNG Portable Network Graphic razvila je nekolicina neovisnih grafikih strunjaka . Podrava 24 bitne i 48 bitne slike ali PNG datoteke obino su vee od usporedivih JPEG-ova i GIF-ova. PNG ne podrava slojeve ali omoguuje da ukljuivanje pojedinih kanala maski, pa pod pretpostavkom da pretraiva podrava PNG kanale maski mogu se odrediti prozirnosti ili neprozirnosti, ova opcija transparentnost daje prednost ovog formata pred GIF-ovima i JPEGovima.

Adobe PhotoShop 5.5 Sigurno da su tekstualni sadraji, datotene biblioteke i hiperlinkovi najvanija stvar na Webu, ali grafika je ono to Web ini razumljivim i privlanim, te ono to nas poziva da doemo opet. Grafika je privukla masu na Internet te slike trenutno ine 90% sadraja na Webu, a PhotoShop je svjetski broj 1. u ureivanju slika. Kao rezultat toga PhotoShop je postao nerazdjeljivo povezan sa Webom. Jedan od najvanijih razloga zbog kojeg je PhotoShop ve dugo na prvom mjestu je stabilnost i ugodnost pri radu.

20.

Postoji ogroman broj news grupa i korisnika PhotoShopa koji e vrlo rado svakom poetniku pomoi. No najvaniji razlog njegova uspjeha je to je rad u PhotoShopu svake godine izlaskom nove verzije sve bolji, bri, laki. Iako je ve verzija 4.0 bila odlina i imala sve mogunosti neophodan za ugodno retuiranje najkompleksnijih slika 5.0 verzija je uvela neke nove alate i mogunosti. Najznaajnije je bilo uvoenje viestruke undo naredbe kao i mogunost promijene svojstava svih slika u pojedinom direktoriju odjedanput. Izbornici su pregledni i dobro organizirani i u pravilu ne treba puno traiti odreenu funkciju. Mnogi elementi koji sainjavaju prozor PhotoShopa dobro su poznati korisnicima Windowsa. Slino kao i kod veine alata za slikanje ili crtanje u gornjem lijevom kutu nalazi se traka sa alatima tj. toolbox, koja sadri 20-tak ikonica alata potrebnih za rad. Neke od tih ikona pored glavnog alata imaju i jo par dodatnih srodnih alata. Jedna od najvanijih stvari u PhotoShop koja uveliko olakava rad je primjena vrlo jednostavnih kratica shortcut-ova, npr. Jednostavnim pritiskom na tipku V pojaviti e se strelica za pomicanje Ono to svemu dodaje jo veu upotrebljivost je i koritenje alat uz istodobno pritiskanje tipki ctrl, alt i shift te njihovih kombinacija. Rezultat je irok spektar razliitih funkcija koje obogauju set alata.

PhotoShop 5.5

21.

Osim trake sa alatima PhotoShop ima i plutajue palete koje takoer ubrzavaju rad. Na njima su npr. veliina kistova, boje, slojevi, kanali, pa sve do pojedinih opcija za svaki alat koji je aktivan. U verziji 5.5 integriran je Image Ready, aplikacija za izradu i optimiziranje Web ilustracija, postoji i opcija save for Web koja omoguuje bre i jednostavnije spremanje slika za Web. U novo izaloj verziji 6.0 PhotoShop je jo bolji. Dodani su novi alati i funkcije, a za Web najvanije je uvrtavanje alata slice iz Image Ready-a koji omoguavanje rezanje velike slike na male dijelove pogodne za tablice u Web-u. Uz to najvea novost je upotreba vektora i vektorskih alata preuzetih iz Ilustratora. Najveu promjenu doivio je alat za tekst koji je sada napravljen tako da se tekst pie direktno na sliku bez posebnog dijalokog okvira. Takoer je mogue natpis distorzirati po krivuljama to je do sada bili mogue jedino u vektorskim programima. Image Ready 2.0 Jedan od najboljih alata u ovom programu je slice tool koji slui za rezanje slike na manje dijelove i daljnji neovisni rad na svakom od njih. Svaki dio automatski postaje jedno polje u html tablici, jer se cijela slika automatski pretvara u html kod kada se sauva naredbom save for Web. Slika je naizgled cjelovita, ali svaki dio slice je cjelina za sebe i na svakom se zasebno moe primijeniti druga funkcija. Pojedini dijelovi tako se mogu spremiti u razliitim razluivostima i stupnjevima saimanja, kao i formatu saimanja jpeg, gif, png. Za rad sa JavaScrip-om postoji cijela skupina opcija bez da je potrebno upisivati kod.

Image Ready 2.0

22.

Program stalno ostaje u dinamikoj vezi sa html kodom, tj. svaku promjenu na slici prepoznaje i obnavlja, bilo u JavaScripti ili html dokumentu. Uz to Image Ready sadri komplet alata za izradu animiranih gifova koje automatski optimizira i to sa novom lossy gif tehnologijom. Rezultat je 10% do 50% bolja kompresija bez gubitaka na kvaliteti. Image Ready otvara i Quick Time kompatibilne animacije i filmove (mov, avi, elic, pict) koje su dostupne i za editiranje, a kasnije ih se moe ponovo spremiti u navedene formate. Corel PhotoPaint 9.0 Suelje ovog programa ujednaeno je sa sueljem Corel Draw-a, iako se radi o potpuno drukijem proizvodu. PhotoPaint moe gotovo sve to i PhotoShop, a takoer moe koristiti i sve njegove plug-inove. Jedino to je moda malo bolje je spremanje slika u JPEG. Kod PhotPainta mogue je na jednostavan nain ukloniti sve nepotrebne detalje i tako poveati iskoristivu povrinu za rad. Traka sa naslovom slike sadri mnoge potrebne detalje: stupanj uveanja, broj boja, te naziv i tip izabranog objekta. Mogue je na ekranu prikazati vie paleta sa bojama. Meu brojnim alatima treba spomenuti alat za izradu sjena te mogunost da se u istom tekstu mijeaju razliiti tipovi i veliine slova. PhotoPaint podrava veliki broj grafikih formata ukljuujui i formate za izradu animacija.

Corel PhotoPaint

23.

PaintShop Pro 7.0

PaintShop Pro 7.0

Jedan je od najpopularnijih shareware programa za obradu fotografija, a njegova popularnost lei u injenici da svoj rad omoguuje i na slabijim raunalima dok mu je brzina izvoenja pojedinih radnji na zadovoljavajuoj razini. Ovaj se program najee koristi za unos novih slika i ureivanje istih u to spada dodavanje svijetla, kontrasta, boja Takoer potpuno je kompatibilan sa PhotoShopovim plug-inovima tako da mu tek malo nedostaje da preuzme sve mogunosti PhotoShopa. Izgled radne povrine uobiajen je za Windowse. Vrpca sa alatima toolbar i paleta alata toolpalette mogu biti i pomine.

24.

KRATKI OSVRT NA WEB U HRVATSKOJ 1999. godine IPSA organizacija za istraivanje trita iz Zagreba provela je prvo cjelovito istraivanje Interneta i njegovih korisnika u Hrvatskoj. Ovo istraivanje prvo je takve vrste jer jo od 1991. godine od kada je Hrvatska spojena na Internet nije provedeno niti jedno specijalizirano istraivanje vezano uz Internet u Hrvatskoj i sve njegove korisnike. U prvoj polovici te godine na svih 5 ISP-ova zajedno (CARnet, GlobalNet, HiNet, IBM i Iskon) prijavljeno je oko 99 000 registriranih korisnika, dok je broj neregistriranih korisnika puno vei. Tada je istraeno da za Internet zna otprilike 80% Hrvata. Od onih koji ga koriste polovica je mlaa od 26. godina, a od 10. posjetilaca Interneta 4. su ene. to se tie brojnosti Web stranica hrvatski prostor danas sainjava na tisue stranica razliite tematike. Danas u Hrvatskoj ima oko 250 000 korisnika Interneta. Moe se kazati da je u posljednju godinu dana osim sve veeg broja sadraja na hrvatskom jeziku, domai Internet i dizajnerski sazrio. Sve vie ljudi posebice tvrtki poput npr.; Zagrebake banke, PBZ-a, Zagrebakog kolodvora, shvatilo je da Web stranice moraju posjetioce privui ne samo sadrajem nego i dobrim izgledom. Solidno pa ak i odlino dizajniranih site-ova ima dosta. Osim toga kao jo jedan znak zrelosti naeg Web prostora je i sve uestalije obnavljanje stranica te ponuda sadraja i na vie stranih jezika. Neke od tih stranica dobro dizajniranih i redovito obnavljanih mogu se vidjeti u godinjim top listama tri hrvatska raunalna asopisa: BUG, PCChip i Vidi.

Izbor 50 najboljih stranica na Webu - Bug Top50 HR

25.

I napredne tehnologije su prisutne na hrvatskom Webu. Najbolji primjer je CSS koji je zaista opeprihvaen i u veini sluajeva kvalitetno implementiran. No na alost jo uvijek se koritenje CSS-a svodi na definiranje fontova, a ne na naprednije funkcije. Ali to nije problem samo kod nas nego i svugdje u svijetu sve dok se ne sredi situacija oko pridravanja standarda. DHTML nije zaivio kako treba i ne samo kod nas i u svjetskim se okvirima rijetko nae kakva suvisla upotreba te tehnologije, ako izuzmemo promijene sliica na OnMouse Over razlog tome je isti kao i kod CSS-a. ASP i PHP te sline serverske tehnologije (izvravanje formulara, skripti, direktna komunikacija sa bazama) jo su uvijek rijetke na naem Webu, ali stvari idu prema boljemu. Moe se kazati da od svih novih tehnologija na hrvatskom Webu najbolje stoji Flash no i to treba zahvaliti tek pojedincima koji uporno rade na promoviranju te tehnologije. Iako ih ima malo dizajnerski su izuzetno dobro rijeene. Posljednja dva mjeseca 1999. godine donose i pojaanu aktivnost hackera na domaoj sceni, nakon poprilino malo takvih dogaaja kod nas u ovom kratkom razdoblju napadnuto je nekoliko veih hrvatskih servera. Hackerski dizajn postao je ve svojevrsna supkultura i sve je vie hackera preteito teenegera koji obraaju panju i na izgled, a ne samo na poruku koji iznose.

Primjer hackerskog dizajna

Osim hackerske supkulture pojavom Weba i Interneta stekli su se uvjeti za iru medijsku promociju svih supkultura, esto drutveno minornih (vie u smislu brojnosti, a manje u smislu utjecaja) skupina ljudi. Internet je, vie no ijedan medij u povijesti ovjeanstva, oslobodio prostor za isticanje svih ljudskih okupacija: okultizma, sodome i gomore, cyberpunka, raznih politikih aktivista Samo u SAD-u danas postoji vie

26.

od 5000 supkulturnih skupina, koje se razvijaju najee meu mlaom populacijom starosne dobi izmeu 13. i 35. godina. OBLIKOVANJE WEB STRANICA Povijest i razvoj Kako je tekao razvoj Interneta i World Wide Weba tako se razvijao i dizajn Internet stranica. Na poetku kada su sveuiline znanstvene organizacije dominirale Webom stranice su bile zamiljene kao stranice knjiga bez slika. Nije bio vaan izgled ve sadraj, ali tada ustvari nije ni bilo monih raunala koji bi to uspjeli skinuti preko izuzetno sporih modemskih veza. Takve stranice danas nazivamo Web stranicama prve generacije. Druga generacija nastaje kada je 1995. godine proiren HTML - jezik u kojeg su ubaene mnoge zanimljive naredbe poput <blink> - mirkanje. Linkovi polako postaju grafiki elementi, boja pozadine mogla se mijenjati, nije trebala vie biti bijela. Ovaj mali pomak uvjetovan je naravno razvojem tehnologije i kunih PC-a te modemskim vezama od 14400 i 28800 bauda, ali i razvojem sustava koji je omoguio ubacivanje grafike na Web stranice. Trea generacija Web stranica nije bila popraena velikim skokovima i tehnikim usavravanjima PC-a i pretraivaa. Ona je nastala kada su ljudi shvatili prednosti WWW i kada su stranice poeli ureivati ljudi koji su imali iskustva sa estetikom, dizajnom ali i marketingom. I kada je postalo vano da neke Web stranice privuku to vei broj korisnika (pela i cvijet). Web stranice sada su morale biti privlane, sa mnotvom slika, animiranih efekata, linkova
Zato nam trebaju Internet stranice?

Koji su osnovni uvjeti koje svatko mora ispuniti da ima Web stranice: 1. Prije svega treba se postaviti pitanje; Zato nam trebaju internet stranice? U ovom sluaju mnogo je faktora koji utjeu na odluku o tome da li ili ne neka kola treba imati svoje stranice. Po mom miljenju bilo bi idealni kada bi se sve kole bilo osnovne bilo srednje odluile za to, jer su brojne mogunosti koje one nude. Od prezentiranja

27.

osnovnog programa, koji bi pomogli uenicima da se odlue za npr. srednju kolu, pa sve do tonih informacija gdje, kako neki materijal, knjigu ili neto drugopronai, nabaviti 2. Nakon toga treba izabrati domenu (com, net, org... ili hr ako smo pravna osoba). U dogovoru sa CARnetom svaka kola ima besplatan pristup Internetu (za poblie informacije vidjeti www.carnet.hr ) 3. Pronai prostor kod nekog internet providera (mjesto gdje e stranice biti fiziki smjetene). U hrvatskoj ih ima nekoliko; www.avalon.hr, www.cromedia.com, www.iskon.hr... 4. Izraditi dizajn, HTML, scripte... 5. Osmisliti promociju i odravanje Web stranica.
to je site i kako treba izgledati

Site je skup stranica na jednoj adresi, koje su povezane sadrajem i vizualno. Izradi site-a treba pristupiti sa unaprijed skiciranim planom, jer koliko se god on ini jednostavan ipak je dobro pri ruci imati skicu sa osnovnim zamislima o izgledu, sadraju i strukturi.

Prva stranica na koju posjetilac doe, kada upie adresu u pretraiva, je Home ili Indeks stranica. Home stranica zato mora biti to jednostavnija, ne puno teka ispod 80 KB , da

28.

bi se uitala to prije i tako zadrala posjetioca. Idealno vrijeme za uitavanje Home stranice trebalo bi biti oko 20 sec. U isto vrijeme ona mora imati i privlaan dizajn, te kratki opis sadraja stranica koji mora privui posjetioca da ue. Sve je vie stranica kojima je Home osmiljen sa JavaScriptom.
Skriveni slojevi koji se poka u k a d a p o sje tio c p re e miem iznad njih Primjer JavaScripte upaljeni i ugaeni botuni

Home page Warp Studia

Stranica Who we are

Preteno su to skriveni slojevi sa tekstom ili sliicama koji se pojave kada posjetioc doe na link koji ga zanima. Jedna takva stranica ja http://www.warpstudio.com koja na skrivenim slojevima ima linkove na odlomke na odabranoj stranici. Za razliku od ovog tipa stranica postoje i stranice koje svoj sadraj moraju odmah prezentirati posjetiocu kada ih upie u pretraiva. To su portali, on-line trgovine i slino koje ele svojim sadrajem privui goste. Zbog toga ih je vrlo teko osmisliti, jer u tom mnotvu informacija moraju ostati itljive i pregledne. Najbolji primjer su www.klik.hr i www.monitor.hr . Razlog to su informacije odmah na Home stranici je taj to se ne preporua vie od 4 klika da bi posjetilac doao do podatka koji ga zanima, ali se takoer ne preporua ni razvlaenje stranice put dole, a preporuka je da ne bi trebalo biti vie od 4 klika na scrollbar (kliznik sa strane) da se doe do dna stranice. Osim toga potrebno je i postavljenje linka na dnu stranice za povratak na vrh.

29.

kolske stranice I kola moe imati slian portal sa stalnim auriranim podatcima o raznim natjecanjima, obavijestima o koli, ispitima, knjigama, stranicama uenika. Potrebno je to vie ukljuiti uenike u rad na kolskim stranicama, posebno one koji posjeduju osobno raunalo kod kue (raunalo je za mnoge hrvatske obitelji preskupo), a oni mogu poduavati druge uenike. kolske stranice trebaju biti zanimljive svojim sadrajem, pregledne jer su ipak veina posjetioca uenici, te prije svega zanimljive. to e biti na njima ovisi o nastavnicima ali i o uenicima koji ih rade. Ovdje je mogue ostvarivanje posebnih radionica za izradu stranica, koje mogu biti izborna nastava. Za dobar izgled stranica i pravilan raspored elemenata (slike i teksta) zaslune su ponajvie tablice. Pravilan raspored tablica na stranici ve je vie od pola posla u dobrom komponiranju. Ovdje je dobro uenike podsjetiti na ve nauene vrste kompozicija. Vrlo ja vana podjela stranica u stupce one za navigaciju sa linkovima i one za ostali dio teksta i slike. Stranice se veinom dijele u dva ili tri okomita stupca, gdje onaj skroz lijevo preuzima ulogu navigacijskog stupca (iznimka je kada se koristi prvi vodoravni stupac za navigaciju i botune). Prednost navigacijske strukture sasvim lijevo je to ostaje slobodnog mjesta na vrhu stranice (gdje se preteno stavljaju banneri ili neto drugo to e privui panju posjetitelja). Animirani gifovi i banneri (animirani gifovi tono standardiziranog formata za reklamiranje; 480x60) imaju svoj zaseban ivot na Webu. Ovakvi animirani gifovi rade se u posebnim programima kao to su Image Ready ili Ulead Gif Animator i vrlo su zanimljivi za izradu. Animacija se zapravo sastoji od obinih sliica gifova koji se izmjenjuju odreenom brzinom, a na koju se moe utjecati odreenim parametrima unutar programa. Animacija se moe napraviti automatski, a za to je potrebno napraviti samo prvu i zadnju sliicu. Ali se moe raditi i runo, sliica po sliicu. Na kraju rada animirani gif se mora optimizirati da bi se sveo na to manju teinu. Pa je tako za banner (480x60) idealna teina od 10 do 12 kb, sve preko je previe, a ako moe bolje da je i manje. Samom

30.

animacijom postie se da privlai panju posjetitelja, i za sada je najjae marketinko oruje na Internetu.

Reklamni Banner tvrtke Polar

Pravilni odabir boja je jedan od znaajnijih faktora koji uvjetuju dobar izgled stranica. Posjetiteljima mora biti omogueno to lake itanje i gledanje. Faktor uoljivosti je najvei kada se koriste uta slova na crnoj podlozi, ali ta intenzivnost ometa dugotrajno itanje. Boja koju je najlake gledati na monitoru je siva, ali skoro svi programi imaju svoje prozore u sivim tonovima, pa ne preporuujem njenu upotrebu. Dobar izbor su pastelni tonovi, to se moe vidjeti na veini dobro dizajniranih stranica. Boje linkova takoer moraju biti vidljivije. Ovdje je mogue povezivanje sa bilo kojom nastavnom cjelinom koja se odnosi na boju, bilo da se radi o kontrastima, tonovima Dakle kod izrade stranica valja paziti na itljivost, brzinu uitavanja, dobru i efikasnu navigaciju, dobar ne prenapadan dizajn, prepoznatljivost, redovito obnavljanje sadraja. Veliki problem je i rezolucija prikaza na ekranu. Poto veina kolskih monitora ima rezoluciju od 800x600 piksela (15 inni monitori), pri izradi stranica treba paziti da irina prikazanih elemenata ne bude ira od 760 piksela (kada oduzmemo okvir browsera ostaje nam upravo toliko mjesta).

31.

PRIMJENA INTERNETA U NASTAVI

Internet prua mnogobrojne mogunosti koje olakavaju nastavu. Posebno je pogodan za likovne umjetnosti jer je nastavna graa prvenstveno vizualna umjetnike reprodukcije, slike, crtei, plakati, a kao to znamo uz tekst slike su osnovni dio Interneta. Preduvjet cijelom ovom radu je opremljenost kola raunalima i pristup Internetu. Ve kod same organizacije rada nastavnik moe koristiti podatke sa Interneta to e mu ubrzati i olakati posao, a takoer dati uvid i u najnovije informacije. Osim kod pripreme nastavnika Internet moe sluiti i u direktnom radu sa uenicima. Uenicima se moe zadati odreena tema koju e oni obraditi samo koritenjem Interneta. Sakupljanjem podataka, slika, linkova, dokumenta i svega to je zanimljivo i vezano uz zadanu temu, moe se stvoriti baza podataka koja e olakavati daljnji rad i za nastavnike i za uenike. Kada se npr. na jednom kolskom satu obrauje Impresionizam nastavnik moe vrlo lako i brzo uitati stranice sa djelima impresionista. Odjednom se moe usporediti i analizirati vie djela umjetnika. Same uenike treba to vie osamostaliti u radu dajui im da samostalno sakupljaju podatke na Internetu. Svakome se moe zadati da pronau stranice, linkove i podatke o odreenom umjetniku koje bi tada na satu prezentirali. Osim toga sve te podatke i slike mogue je lako ispisati ili ih koristiti u izradi i nadopunjavanju kolskih stranica. Vea koliina podataka i slika na stranicama same kole jedan je od preduvjeta dobrog rada i iskoritenosti Interneta kao medija. Internet nam prua mogunosti za on-line (dopisna kola preko Interneta) kolu. Tako se ve sada mogu zavriti razni teajevi, kole, edukativni programi preko Interneta (www.e92.hr). Uz Internet mreu postoji i Intranet. Intranet je lokalna mrea temeljena na Internetskim tehnologijama, a omoguava nam fleksibilniji rad unutar neke ustanove. Zakljuak: S obzirom na rastuu informatizaciju drutva prisutnost raunala i Interneta u kolama postat e preduvjet dobrom radu, znanju i mogunostima. Sve vea brzina prijenosa podataka omoguit e istodobno prijenos video i glazbenog materijala te e samim tim korisnost Interneta u nastavi biti sve vea.

32.

Bibliografija:
1. Velika knjiga o World Widw Webu Dario Suanj, Dragan Petric, Znak, Zagreb, 1996. 2. Photoshop 4 Biblija Deke McClelland, Znak, Zagreb, 1997. 3. Corel Draw 7 Biblija Deborah Miller, Znak, Zagreb, 1997. 4. FrontPage 2000 Ivica Kartelo, E 92, Split, 2000. 5. asopis za informatiku BUG: 1998 - svibanj, srpanj/kolovoz 1999 travanj, srpanj/kolovoz, rujan, listopad, studeni, prosinac 2000 - sijeanj, veljaa, srpanj/kolovoz, listopad, studeni, 6. asopis za informatiku VIDI: 1998 prosinac 2000 rujan, studeni 7. asopis za informatiku PCchip: 1998 - rujan, listopad, studeni 1999 sijeanj, veljaa, oujak, travanj, srpanj/kolovoz, 2000 lipanj, listopad 8. http://sokrat.uciteljska-akademija.hr/ 9. www.e92.hr 10. www.carnet.hr 11. www.flahoo.com 12. Likovna umjetnost Dr. Jadranka Damjanov, K Zagreb, 1991. 13. Likovni govor Radovan Ivanevi, Profil, Zagreb, 1997.

33.

You might also like