web mjesta

Web dizajn
Dean Valdec, dipl. ing.
E-mail: dean.valdec@velv.hr
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.
2.
3.
4.
5.
6.
7.
Planiranje, struktura, organizacija web mjesta
Izrada mape (site map) i skice web mjesta (wireframe)
Vizualno oblikovanje web mjesta
Kodiranje web stranice, validnost koda
Kodiranje HTML/CSS predloška
Oblikovanje navigacije web mjesta
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?
Mapa web mjesta
• Prikaz mape web mjesta: http://www.draw.io
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

Download Report