http://www.free-powerpoint-templates-design.com

6. 1. Timska izrada web stranica razreda6. Izrada web stranica

http://www.free-powerpoint-templates-design.com/http://www.free-powerpoint-templates-design.com/

Osnovni pojmovi

• Web stranica je pojedinačni HTML ili hipertekstualni dokument. Kako uz

tekst često sadrži slike, animacije, audio i video zapise možemo ju nazvati i

hipermedijskim (multimedijskim) dokumentom.

• HTML ili Hyper Text Markup Language je opisni jezik namijenjen izradi

web stranica pomoću tako zvanih HTML kodova (engl. tag). HTML kodovi

(tagovi) služe za izradu web stranice, omogućavaju da preglednik može

prikazati web stranicu.

• Poveznice su posebno oblikovane riječi ili slike kojima povezujemo web

stranice.

• Web mjesto (Web site) ili web sjedište je mjesto na lokalnom ili udaljenom

računalu (web poslužitelju) koje obuhvaća više povezanih web stranica. To

je zapravo mapa koja obuhvaća sve povezane sadržaje.

Početna stranica

• Svako web mjesto ima početnu stranicu koja opisuje osnovnu namjenu web mjesta te sadrži poveznice

prema ostalim stranicama web mjesta. Početna stranica najčešće ima naziv index.html.

• Kada se web stranica nalazi na Internetu, index.html prikazuje se kao adresa web stranice, kao što je

http://www.alfa.hr

http://www.alfa.hr/

HTML kod• Kada želimo vidjeti kako izgleda HTML kod u kojem je napravljena web stranica,

desno kliknemo u određeni dio web stranice i odaberemo Pogledaj izvor stranice

(View source)

• Kada to učinite možete primijetiti da se stranica s HTML oznakama (kodovima,

naredbama) otvorila u novom prozoru, tako zvanom novom tabu. To inače činimo

naredbom CTRL+T.

Što je timski rad i zašto ga primjenjujemo?

• Tim čini mala skupina ljudi (najčešće stručnjaka u svojim područjima) čije se

vještine i znanja nadopunjuju, a usmjereni su na rješavanje određenog zadatka ili

postizanje zajedničkog cilja.

• Kako bismo čim bolje shvatili kako timski rad funkcionira, primijenit ćemo

metodu „Šest šešira“.

• Bijeli šešir: usmjerava se na

podatke, činjenice i raspoložive

informacije. Učenik kojem je

dodijeljena bijela boja treba

zaboraviti na prijedloge i sugestije

i koncentrirati se na to koja su

informacije potrebne i raspoložive i

na koji način se do njih može doći.

Plavi šešir: kada vidite plavu boju,

razmišljajte o plavetnilu neba, pregledu

situacije s odmakom. Osoba s plavim

šeširom razmatra proces razmišljanja i

kontrolira rad grupe ili razreda.

• Crveni šešir: osobe kojima

dodijelite ovaj šešir trebaju se

usredotočiti na svoje osjećaje i

predosjećaje kada razmišljaju o

problemu i iznijeti ih timu.

• Žuti šešir: optimist koji

razmišlja o najboljim

mogućim (realnim)

rezultatima i kao protuteža

Crnom šeširu zagovara

pozitivne strane rješenja

problema ili mogućnosti.

• "Šest šešira za razmišljanje" je tehnika koja nam pomaže da pogledamo projekt s različitih stajališta.

• Crni šešir: oprezno razmišlja o rizicima i

mogućim negativnim posljedicama,

zagovara oprez i ističe sve što se ne može

riješiti.

Zeleni šešir: kreativno

razmišlja o mogućem rastu ili

razvoju, idejama koje mogu

proizaći jedna iz druge,

postavlja pitanje "Može li se

ovo napraviti na bilo koji

drugi način?".

Planiranje web stranice

• Svaka web stranica je multimedijski dokument.

• Međutim, na stranici treba izbjegavati nepotrebne slike koje usporavaju učitavanje web stranice.

• Posjetitelji web stranice moraju se moći lako snalaziti na našem webu.

• Jako je važno paziti na doživljaj korisnika našeg weba i intuitivnost, mogućnost da se lako

snalazimo na web stranici, „user experience - UX“.

• Uz intuitivnost weba važna je i dobra organizacija rasporeda web stranice.

Što je korisničko iskustvo

(UX - user experience)

• Korisničko iskustvo (user experiance - UX) je pojam koji opisuje ukupnu

razinu zadovoljstva u trenutku korištenja određenog weba.

• Ako je to iskustvo pozitivno, korisnik je zadovoljan.

UX=zbroj različitih interakcija

• Korisničko iskustvo (UX) predstavlja opći dojam nakon niza interakcija

između ljudi, uređaja, događaja ili kombinacije navedenih.

• Prije stvaranja web sjedišta moramo znati što želimo.

• Za početak prikupljamo materijale za rad: tekstove, slike i video.

• Kao prvi korak dobro je napraviti skicu na papiru, te je zatim prikazati u programu za

izradu skica kao „wireframe“.

• Bilo da je nacrtana ručno ili pomoću softvera, skica pokazuje koji elementi i gdje će

se nalaziti na web stranici, ali ne prikazuje boje, vrstu fonta, pravu veličinu elemenata

i slično.

• Postoje različiti programi za izradu skica, jedan od boljih je Balsamiq

(http://www.balsamiq.com).

Raspored elemenata na web stranici

http://www.balsamiq.com/

Redoslijed rada

• Skica

• Sadržaj

• Dizajn

• Izrada stranica

• Raspored, organizaciju web stranica često ćete naći pod nazivom mapa

sjedišta (site map).

Primjer mape

Adobe Dreamwever

• Adobe Dreamwever je program za izradu

web- stranica.

• Trial verziju programa Dreamweaver možemo preuzeti

• s web sjedišta: http://www.adobe.com.

http://www.adobe.com/

• Svaka web stranica je multimedijski dokument.

• Korisničko iskustvo je pojam koji opisuje ukupnu razinu

zadovoljstva u trenutku korištenja određenog weba.

• "Vidi Web Top 100" je najpoznatiji natječaj za izbor

najboljeg weba.

• Balsamiq je program za izradu skica (wireframeova).

• Mapa sjedišta (site map) je organizacija web stranica.

• Adobe Fireworks je program za obradu slika.

• Adobe Dreamweaver je program za izradu web stranica

Sažetak