Embed Size (px)
Citation preview
PRAVILA
• Ukupno: 12 vježbi (dozvoljena max 3 izostanka)
• Tematski vježbe prate predavanja
– Prije dolaska na vježbe pripremiti se tako da se upoznate sa gradivom sa predavanja
– KOMPLEKSNO GRADIVO! – potrebno kontinuirano pratiti i samostalno vježbati
– Preporuka – Pišite bilješke!
• Obvezna registracija na: eva‐sms.org/claroline
– Web dizajn 2013/2014
• Ocjenjivanje – sustav Eva (eva‐sms.org)
TEME ZA VJEŽBE
1. Planiranje, struktura, organizacija web mjesta
2. Izrada mape (site map) i skice web mjesta (wireframe)
3. Vizualno oblikovanje web mjesta
4. Kodiranje web stranice, validnost koda
5. Kodiranje HTML/CSS predloška
6. Oblikovanje navigacije web mjesta
7. Multimedijske mogućnosti HTML 5
TEME ZA VJEŽBE
8. Cross-browser kompatibilnost (IE/Opera/Chrome/Safari/Firefox)
9. jQuery biblioteka
10. Responzivni (prilagodljivi) web dizajn
11. Responzivno strukturiranje web mjesta
12. Optimizacija za tražilice (SEO), postavljanje web stranice na FTP server i testiranje
13. Uređivanje sadržaja pomoću CMS sustava
TEME ZA IZRADU WEB STRANICE
• TEMA 1: Turizam i putovanja
• TEMA 2: Sport, zdravlje i prehrana
• TEMA 3: Zabava, moda, glazba
• Izrada početne web stranice na neku od ponuđenih tema: – najviše 5 studenta iz iste grupe mogu odabrati istu temu
• Radovi prijašnjih generacija: – http://legen.velv.hr/~devaldec/WD-radovi/
– shorten URL: http://bit.ly/velv-wd12
Zadatak 1: Planiranje i struktura
Planiranje, organizacija i struktura (vlastitog) web mjesta obuhvaća sljedeće:
• Tema i naziv web mjesta
• Odgovori na slijedeća pitanja: – Svrha web mjesta? Ciljevi? Ciljana skupina? Sadržaj web mjesta?
– Kako će funkcionirati web mjesto? Koja su potrebna umijeća i resursi?
• Mapa web mjesta (web map)
• Skica web mjesta (wire frame) – za početnu stranicu i za stranicu članka
– Koristiti alternativni tekst (Lorem ipsum): naglasak na strukturu
• Koncept navigacije
• Predaje se na Claroline/Zadatak 1: prezime_ime_Z1.pdf
Zadatak 1: Planiranje i struktura
KOMPETENCIJE EVA • planiranje i site map
• wire frame
• navigacija
www.eva-sms.org
Zadatak 1: Što se ocjenjuje?
• planiranje i site map: – ocjenjuju se odgovori za 6 postavljenih pitanja vezanih uz planiranje
– ocjenjuje se organizacija informacija pomoću mape weba mjesta
• wire frame: – ocjenjuje se skica predloška za početnu stranicu i za stranicu članka
– definiranje strukturalnih i ostalih elemenata dizajna u pixelima
• navigacija: – ocjenjuje se koncept navigacije, primarna i sekundarna navigacija
– povezivanje stranica međusobno unutar web sjedišta te način imenovanja glavnih kategorija i potkategorija
Zadatak 2: Oblikovanje web mjesta
Grafičko oblikovanje (vlastitog) web mjesta (dizajn) obuhvaća:
• Grafičko rješenje naslovne stranica web sjedišta – Koristiti alternativni tekst (Lorem ipsum)
– Definirati shemu boja
• Predaje se na Claroline/Zadatak 2: – kao PNG ili PSD datoteka
– prezime_ime_Z2
Zadatak 2: Oblikovanje web mjesta
KOMPETENCIJE EVA
• dizajn
• funkcionalnost
• navigacija
www.eva-sms.org
Zadatak 2: Što se ocjenjuje?
• dizajn: – ocjenjuje se vizualni izgled stranice te raspored elemenata i ravnoteža
stranice
– shema boja (boja teksta i pozadine, boja linkova te samog sučelja)
• funkcionalnost: – ocjenjuje se da li je dizajn u funkciji svrhe i ciljeva web stranice
• navigacija: – ocjenjuje se dizajn elemenata navigacije (Odgovori na pitanja.):
Koliko načina navigacije sadrži stranica te grupiranje linkova?
Da li gumbi pozivaju na akciju?
Da li su linkovi podijeljeni u logičke kategorije?
Kako su imenovani linkovi web sjedišta?
Zadatak 3: Produkcija web stranice
Završno, funkcionalno (vlastito) web mjesto obuhvaća:
• HTML dokument – s funkcionalnom navigacijom
– umetnutim sadržajem prema definiranoj temi (tekst, slike, …)
• CSS dokument – grafičke datoteke
• Dinamične (JavaScript) elemente
• Postavlja se na server – index.html, stil.css, mape sa multimedijskim sadržajem
– http://legen.velv.hr/~username
Zadatak 3: Produkcija web stranice
KOMPETENCIJE EVA
• html i css
• dinamičnost
• sadržaj
www.eva-sms.org
Zadatak 3: Što se ocjenjuje?
• html i css : – ocjenjuje se definiranje sadržaja primjenom HTML-a
– ocjenjuje se oblikovanje web stranice primjenom CSS-a
– validnost koda
• dinamičnost: – ocjenjuje se primjena animacija (bannera, „fun” elemenata)
– dinamičnost stranice te interaktivnost sa korisnicima
• sadržaj: – ocjenjuje se korisnost sadržaja stranice i njegova preglednost
– oblikovanje teksta, čitljivost i gramatika
– karakteristike multimedijskih sadržaja
Faze procesa razvoja web mjesta
• Planiranje
• Struktura (site map i wire frame)
• Dizajn
• Produkcija (kodiranje i programiranje)
• Testiranje i postavljanje
• Održavanje
Planiranje
• Sastanak sa klijentom
– Prikupljanje potrebnih informacija od klijenta
– Poslovni ciljevi, organizacija institucije
– Prikupljanje materijala
• Odrediti jedinstveni koncept
– Definirati prednosti web stranice pred konkurencijom
– Planirati konkurentnost po cijeni, kvaliteti ili jedinstvenosti svojih proizvoda, usluga ili ideja
– Pregledati slične web stranice
Planiranje
• Svrha? – Koja je svrha web stranice? Analiza razloga za publiciranje na webu.
• Ciljevi? – Što se želi postići izradom web stranice?
• Ciljana skupina? – Tko će koristiti to Web sjedište? Dali postoji ciljana skupina ljudi koji će
vam omogućiti postizanje ciljeva? Koji problem će moji korisnici pokušati riješiti?
Planiranje
• Sadržaj? – Koju vrstu informacija će ciljana skupina tražiti na stranici?
• Kako će funkcionirati Web mjesto?
– Način komunikacije i aktivnosti koje će Web mjesto podržavati, SHTML/DHTML.
• Koja su potrebna umijeća i resursi za razvoj Web mjesta?
– Analiza posjedovanja potrebnih umijeća i resursa i planiranje njihova pribavljanja.
Struktura i organizacija
• organizacija informacija: podjela prikupljenih informacija u manje cjeline
• definiranje veza među tim cjelinama vidljiva je kroz strukturu web mjesta
• faza u kojoj usklađuje nekoliko razina: – podatkovnu (tekstualni podaci, sadržaj)
– interakcijsku (programi, skripte)
– prezentacijsku (dizajn)
• Desktop first vs. Mobile first – što odabrati? – grid, 960 px
Hijerarhija web sjedišta
• Linearni model (step by step)
• Vertikalna hijerarhija
• Princip središnje strane
• Mrežni model (web)
Hijerarhija web stranice
• Hijerarhijska struktura u kombinaciji s mrežnom strukturom
Povezivanje web stranica
• Preplitka hijerarhijska poveznica
• Preduboka hijerarhijska poveznica
• Balansirana struktura hijerarhije
Mapa web mjesta
• popis svih važnih kategorija i potkategorija
• lako razumljiv navigacijski sustav
• krajnji korisnik mora biti u centru pažnje
• organizacija prema određenoj hijerarhiji ili logičkoj strukturi
1. Korak – Nizanje pojmova vezanih uz odabrano web mjesto
2. Korak – Razrada strukture i koncepta
Mapa web mjesta
1. Mind map (mentalna mapa)
2. Smisleno povezivanje pojmova
3. Evaluacija veza
Kako povezati?
Raspored elemenata web stranice
• Grupiranje elemenata sličnih funkcija
• Svi linkovi u pretraživaču izgledaju posve jednako: – primarna
– sekundarna
– funkcionalna
Raspored elemenata web stranice
Wire frame
• Skica raspored elemenata dizajna prikazana pomoću geometrijskih likova sa definiranom veličinom u pixelima
• umjesto na sadržaj usredotočimo na ravnotežu - formu
• povezuje strukturu informacija, vizualni dizajn i marketing
• obuhvaća ne više od tri predloška (početna stranica, stranica glavne kategorije, stranica potkategorije, stranica članka)
• počinje sa izradom skice na papiru, a nakon završetka jedan ili dva „wire framea“ za svaki predložak prezentirat će se klijentu
Wire frame
• je proces koji može značajno smanjiti vrijeme potrebno za dizajn i razvoj web mjesta
• izradom „wireframea“ vrijeme razvoja može se smanjiti za jednu trećinu
• kada je „wire frame“ definiran i odobren, prijelaz u vizualni dizajn bit će mnogo lakši i efikasniji
• Izrada skice web mjesta: – mockingbird: https://gomockingbird.com/
– Lovely Charts, Cacoo, Gliffy, Lumzy, …
Wire frame - primjer
Početna stranica Stranica članka
Zadatak
Planiranje, organizacija i struktura web mjesta
• Studentski informativni multimedijski portal – Popis pojmova (glavni i vezani pojmovi)
– Mapa web mjesta
– Skica web mjesta
