Timska izrada web stranica razreda

Izrada web stranica

1.4

.20

20

.

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 pomodu tako zvanih HTML kodova (engl. tag). HTML kodovi (tagovi) služe za izradu web stranice, omogudavaju da preglednik može prikazati web stranicu.

1.4

.20

20

.

Osnovni pojmovi

• 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 obuhvada više povezanih web stranica. To je zapravo mapa koja obuhvada sve povezane sadržaje.

1.4

.20

20

.

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šde 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

1.4

.20

20

.

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 (Viewsource)

• 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.

1.4

.20

20

.

Zadatak

• Otvorite i zatim pogledajte kod slijededih stranica:

• http://www.alfa.hr

• http://www.mzos.hr

• http://www.carnet.hr

• http://www.skole.hr

1.4

.20

20

.

Prokomentirajmo

• Od kojih se dijelova sastoji HTML dokument?

• Što mislite zašto su određeni kodovi (tagovi) u drugačijim bojama?

• Možete li se prisjetiti čemu nam još služi tipka TAB?

1.4

.20

20

.

Zapamtimo

• Kod rada s HTML dokumentima važno je paziti na pravilno pisanje naredbi.

• Svaki otvoreni tag ima svoj zatvoreni tag.

• Za bolju preglednost koda radimo hijerarhijski prikaz koda upotrebom uvlaka pomodu tipke Tab.

1.4

.20

20

.

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

• Tim čini mala skupina ljudi (najčešde 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.

1.4

.20

20

.

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 modi lako snalaziti na našem webu.

• Jako je važno paziti na doživljaj korisnika našeg weba i intuitivnost, mogudnost da se lako snalazimo na web stranici, „user experience - UX“.

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

1.4

.20

20

.

Š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 opdi dojam nakon niza interakcija između ljudi, uređaja, događaja ili kombinacije navedenih.

1.4

.20

20

.

Interakcije

• Neke interakcije su aktivne: npr. sklanjanje od iznenadne kiše tijekom izleta u prirodi. Neke su pasivne: uživanje u prekrasnom zalasku sunca izazvat de kemijske reakcije u našem tijelu kao npr. dopamin (prirodni hormon srede)

• Neke su sekundarne: hrana je ukusna jer je šef kuhinje odabrao kvalitetne namirnice i ima znanje kako ih ukusno pripremiti. Namirnice su pak dobre kvalitete zbog dobre brige i dovoljnog navodnjavanja.

1.4

.20

20

.

UX dizajner

• Dobar dizajner korisničkog iskustva mora imati globalnu sliku, jer iskustvo korisnika prelazi granice vizualnog dizajna i čiste korisnosti. Kao UX dizajneri, mi orkestriramo različitim interakcijama.

• U Hrvatskoj je najpoznatiji natječaj za izbor najboljeg weba "Vidi Web Top 100". Sve je počelo 1999. godine kada je osnovan "Vidi Web Top 100" – hrvatski nacionalni natječaj za najbolje web stranice. Želja organizatora – izdavačke kude Vidi, bila je popularizacija Interneta i weba u hrvatskom društvu i gospodarstvu. Bilo je to u vrijeme kada i neke od najvedih hrvatskih kompanija uopde nisu imale svoje web stranice.

1.4

.20

20

.

Primjeri nekoliko jako dobrih web stranica (prema procjeni Vidi Web Top 100)

• http://www.iskon.hr

• http://www.hrt.hr

• http://www.coolinarika.com

1.4

.20

20

.

Raspored elemenata na web stranici• 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 pomodu softvera, skica pokazuje koji elementi i gdje de 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).

1.4

.20

20

.

Redoslijed rada • Skica

• Sadržaj

• Dizajn

• Izrada stranica

• Raspored, organizaciju web stranica često dete nadi pod nazivom mapa sjedišta (site map). Primjer za našu mapu sjedišta napravit demo u programu Balsamiq

1.4

.20

20

.

Adobe Dreamwever

• Kako bismo krenuli u čim bolji prikaz izrade web stranica, upoznat demo se s programom za izradu web stranica, Adobe Dreamweaverom.

• Trial verziju programa Dreamweaver možemo preuzeti s web sjedišta: http://www.adobe.com.

1.4

.20

20

.

Adobe Dreamwever

• Program pokredemo iz izbornika Start – Programs – Adobe Dreamweaver

• Kad se program otvori prikazuje nam se pogled u kojem možemo odabrati tri moguda stanja (pogleda) koja koristimo kod izrade web stranica: Design, Code i Split.

• Mi demo raditi u pogledu Design.

1.4

.20

20

.

Adobe Dreamwever

• Prvo što radimo kod izrade web stranica je definiranje mape web sjedišta odabirom naredbe:

Site - New site

1.4

.20

20

.

Adobe Dreamwever

• U mapu (Moj prvi web) demo spremati sve podatke s kojima demo raditi (slike, dokumente, zvuk, animacije).

• Čarobnjak nas vodi kroz proces stvaranja mape.

• Uvijek je dobro podatke zbog bolje organizacije rasporediti po mapama.

• Na početku demo prvu stranicu nazvati index.html, te ju spremiti odabirom naredbe File – Save As.

• Primjedujete kako računalo automatski sprema HTML dokument u mapu koju smo nazvali Moj prvi web.

1.4

.20

20

.

Adobe Dreamwever

• Slijededi korak je određivanje svojstava dokumenta odabirom naredbe Modify – Page properties.

• Ovdje stavljamo naslov dokumentu (Web site: Ime učenika), određujemo boju slova i linkova, te da li demo imati pozadinsku sliku ili boju.

• Mi demo staviti pozadinsku sliku.

• Prije stavljanja slike u dokument važno je na Internetu nadi sliku vedih dimenzija, najmanje 1024*768.

• Dobar izbor slika nadi demo upisivanjem u tražilicu google ključne riječi: beautiful backgrounds

1.4

.20

20

.

Adobe Dreamwever

• Kada smo napravili prikupljanje sadržaja i stavili pozadinsku sliku pomodu naredbe Modify – Page properties (Ctrl+J), unijeti demo tablicu odabirom naredbe Insert – Table

1.4

.20

20

.

Adobe Dreamwever

• Svaka tablica sastoji se od redaka i stupaca, te joj možemo odrediti dimenzije u postotcima ili pikselima.

• S obzirom na različite rezolucije preglednika bolje je raditi web stranice u postotcima.

• Važno je primijetiti naredbe Cell spacing i Cell padding. Cellspacing određuje razmak između rubova delija, dok Cellpadding određuje razmak između rubova delije i sadržaja.

1.4

.20

20

.

Adobe Dreamwever

• Kad smo tablicu unijeli u web stranicu možemo je dodatno uređivati na kartici Properties.

• Spremljeni dokument indeks.html i slika koju smo stavili kao pozadinu web stranice vidljivi su u mapi Moj prvi web, na kartici Files.

• Sve kartice možemo uključivati i isključivati pomodu izbornika Window.

1.4

.20

20

.

Adobe Dreamwever

• Kada je tablica unesena, napravit demo poveznice s kojima demo povezati naš dokument index.html.

• Prvo demo upisati u prvi red tablice nazive linkova koje demo imati na svojoj web stranici

• Home,

• O meni,

• O školi,

• Društvene mreže,

• Blog.

• Kada smo napisali, svaku riječ označavamo, te u Propreties upisujemo nazive linkovima (home.html, omeni.html, oskoli.html, drustvenemreze.html, blog.html)

1.4

.20

20

.

1.4

.20

20

.

Adobe Dreamwever• Nakon toga web stranice spremamo s tim imenima u mapu

Moj prvi web.

• Sve se sad nalaze u mapi Moj prvi web, te ih možemo zasebno uređivati nakon otvaranja (File - Open) unutar Dreamweavera.

• Razmake između riječi dobivamo pomodu ASCII koda  .

• Taj kod predstavlja znak razmaka, a nadi demo ga odabirom naredbe Window – Bindings – Insert, te odabirom na non breaking space

1.4

.20

20

.

Adobe Dreamwever

• Sadržaj svih web stranica radimo odabirom u 2. red tablice, te odabirom naredbe Insert

• Tu možemo unijeti slike (Images), animacije (Media), nove tablice (Table), veze na druge web stranice (Hyperlink), veze na e-mail (Email link), datuma (date), te mnogih drugih mogudnosti.

1.4

.20

20

.

Zadatak

• Napravite raspored elemenata vašeg bududeg web sjedišta.

• Može vam kao inspiracija poslužiti prethodni primjer skice.

• Što je važno kod stvaranja rasporeda elemenata?

• Nađite na Internetu 5 web stranica koje vam se sviđaju.

• Po čemu su one drugačije od ostalih web stranica?

1.4

.20

20

.

Sažetak

• 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

1.4

.20

20

.

1. Što znači skradenica UX?

2. Što je zajedničko jako dobrim web stranicama?

3. Navedi 3 web stranice koje su ti najljepše i objasni zašto si ih odabrao/la?

4. Od kojih se dijelova sastoji HTML dokument?

5. Što mislite zašto su određeni kodovi (tagovi) u drugačijim bojama?

6. Možete li se prisjetiti čemu nam još služi tipka TAB?

7. Koji je redoslijed rada kod izrade web stranica?

8. Kako pokredemo program Adobe Dreamweaver?

9. Kako mijenjamo pozadinsku sliku u Adobe Dreamweaveru?

10. Koja je poželjna rezolucija za slike koje stavljamo na web stranice?

11. Kako unosimo tablicu?

12. Kako spremamo web stranice?

1.4

.20

20

.