6. 1. Timska izrada web stranica razreda

6. Izrada web stranica

1.6.

2020

.

Osnovni pojmovi

• Web stranica je pojedinačni HTML ili hipertekstualnidokument. 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.

1.6.

2020

.

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

1.6.

2020

.

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

1.6.

2020

.

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 (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.6.

2020

.

Zadatak

• Otvorite i zatim pogledajte kod slijedećih stranica:

• http://www.alfa.hr

• http://www.mzos.hr

• http://www.carnet.hr

• http://www.skole.hr

1.6.

2020

.

http://www.alfa.hr/http://www.mzos.hr/http://www.carnet.hr/http://www.skole.hr/

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

2020

.

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 pomoću tipke Tab.

1.6.

2020

.

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

1.6.

2020

.

Kako bismo čim bolje shvatili kako timski rad funkcionira, primijenit ćemo metodu „Šest šešira“.

1.6.

2020

.

"Šest šešira za razmišljanje"

• "Šest šešira za razmišljanje" je tehnika koja nam pomaže da pogledamo projekt s različitih stajališta. Pomaže pri poticanju kreativnosti, izbjegavanju grupnog razmišljanja u timskom radu.

• Tehniku je osmislio Edward de Bono i opisao u knjizi "Šest šešira za razmišljanje". Svaki šešir donosi drugačiji stil razmišljanja. De Bonovi šeširi za razmišljanje mogu se koristiti u različitim situacijama, no evo opisa originalnih šešira:

"Šest šešira za razmišljanje"

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

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

1.6.

2020

.

"Šest šešira za razmišljanje"

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

• Ž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. Nije poput Crvenog šešira već svoj optimizam temelji na logičkim osnovama.

1.6.

2020

.

"Šest šešira za razmišljanje"

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

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

1.6.

2020

.

Radionica

• Svatko u timu neka bude svaki od ovih šešira na par minuta, u rješavanju zadanog nam problema.

• Problem koji treba riješiti je kako najbolje organizirati učeničku zadrugu koja priprema prodaju ukrasa napravljenih na satovima likovne kulture.

• Na kraju svi trebaju iznijeti svoje mišljenje o tome koji su oni šešir inače u životu i u koji se šešir nisu mogli uživjeti kada su radili u timu.

• Poanta je u tome da bi se svi trebali češće staviti u poziciju onog šešira kojeg ne obožavaju, da bi naučili razmišljati iz različitih perspektiva, što pomaže u rješavanju problema i postizanju pravog osjećaja prema drugima (koji su inače taj šešir).

1.6.

2020

.

Prokomentirajmo

• Koje su prednosti, a koji nedostatci timskog rada?

• Koja boja šešira vam je bila najdraža?

• Koja boja šešira prevladava u razredu?

1.6.

2020

.

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.

1.6.

2020

.

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

1.6.

2020

.

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 će kemijske reakcije u našem tijelu kao npr. dopamin (prirodni hormon sreće)

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

2020

.

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 kuće Vidi, bila je popularizacija Interneta i weba u hrvatskom društvu i gospodarstvu. Bilo je to u vrijeme kada i neke od najvećih hrvatskih kompanija uopće nisu imale svoje web stranice.

1.6.

2020

.

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

2020

.

http://www.iskon.hr/http://www.hrt.hr/http://www.coolinarika.com/

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

1.6.

2020

.

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 za našu mapu sjedišta napravit ćemo u programu Balsamiq

1.6.

2020

.

Adobe Dreamwever

• Kako bismo krenuli u čim bolji prikaz izrade web stranica, upoznat ćemo 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.6.

2020

.

http://www.adobe.com/

Adobe Dreamwever

• Program pokrećemo iz izbornika Start – Programs – AdobeDreamweaver

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

• Mi ćemo raditi u pogledu Design.

1.6.

2020

.

Adobe Dreamwever

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

Site - New site

1.6.

2020

.

Adobe Dreamwever

• U mapu (Moj prvi web) ćemo spremati sve podatke s kojima ćemo 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 ćemo prvu stranicu nazvati index.html, te ju spremiti odabirom naredbe File – Save As.

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

1.6.

2020

.

Adobe Dreamwever

• Slijedeći 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 ćemo imati pozadinsku sliku ili boju.

• Mi ćemo staviti pozadinsku sliku.

• Prije stavljanja slike u dokument važno je na Internetu naći sliku većih dimenzija, najmanje 1024*768.

• Dobar izbor slika naći ćemo upisivanjem u tražilicu googleključne riječi: beautiful backgrounds

1.6.

2020

.

Adobe Dreamwever

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

1.6.

2020

.

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 ćelija, dok Cellpadding određuje razmak između rubova ćelije i sadržaja.

1.6.

2020

.

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 pomoću izbornika Window.

1.6.

2020

.

Adobe Dreamwever

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

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

• Home,

• O meni,

• O školi,

• Društvene mreže,

• Blog.

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

1.6.

2020

.

1.6.

2020

.

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 pomoću ASCII koda  .

• Taj kod predstavlja znak razmaka, a naći ćemo ga odabirom naredbe Window – Bindings – Insert, te odabirom na nonbreaking space

1.6.

2020

.

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 mogućnosti.

1.6.

2020

.

Zadatak

• Napravite raspored elemenata vašeg budućeg 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.6.

2020

.

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

2020

.

1. Što znači skraćenica 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 pokrećemo 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.6.

2020

.