01. Uvod u Web dizajn

17.1.2012.
WEB DIZAJNER
voditelj: Višeslav Račić, prof, ACE
e‐mail: viseslav.racic@algebra.hr
1
Sadržaj programa obrazovanja
•
•
•
•
•
•
•
•
•
Uvod u web dizajn
HTML
CSS
Fast Track to Adobe Fireworks CS5
Adobe Flash CS5: Rich Content Creation
Adobe Dreamweaver CS5: Website Development
WordPress
R: Optimizacija za web tražilice i Google analytics
160 sati
2
1
17.1.2012.
Umjesto uvoda 
• Nekoliko obavijesti za lakši rad
– Mobiteli ugašeni ili na bešumno
– 75% obrazovnog programa (po modulima)
– Materijali za svaki „modul”
– Programi?  
– Završni ispit i završni rad
– Trajanje programa 16.siječnja – 16. ožujka 2012.
– Besplatni hosting (1 godina) – kada dođe vrijeme za „hostanje”
3
Umjesto uvoda 
• Nekoliko obavijesti za lakši rad
– Nastava 14,00 – 17,10 tj. 4 školska sata
– Nastava u pravilu 2 tjedan pa pauza od tjedan dana:
16.1.2012
17.1.2012
18.1.2012
19.1.2012
20.1.2012
21.1.2012
22.1.2012
23.1.2012
24.1.2012
25.1.2012
26.1.2012
27.1.2012
28.1.2012
29.1.2012
30.1.2012
31.1.2012
1.2.2012
2.2.2012
3.2.2012
4.2.2012
5.2.2012
14,00‐17,10 uvod u WEB
14,00‐17,10
HTML
14,00‐17,10
HTML
14,00‐17,10
CSS
14,00‐17,10
CSS
6.2.2012
7.2.2012
8.2.2012
9.2.2012
10.2.2012
11.2.2012
12.2.2012
13.2.2012
14.2.2012
15.2.2012
16.2.2012
17.2.2012
18.2.2012
19.2.2012
20.2.2012
21.2.2012
22.2.2012
23.2.2012
24.2.2012
25.2.2012
26.2.2012
14,00‐
17,10
FW
14,00‐
17,10
FW
14,00‐
17,10
FL
14,00‐
17,10
FL
27.2.2012
28.2.2012
29.2.2012
1.3.2012
2.3.2012
3.3.2012
4.3.2012
5.3.2012
6.3.2012
7.3.2012
8.3.2012
9.3.2012
10.3.2012
11.3.2012
12.3.2012
13.3.2012
14.3.2012
15.3.2012
16.3.2012
14,00‐
17,10
DW
14,00‐
17,10
DW
14,00‐
17,10
SEO
14,00‐
17,10
WP
ISPIT!
4
2
17.1.2012.
Pitanja???
5
Uvod u web dizajn
voditelj: Višeslav Račić, prof, ACE
e‐mail: viseslav.racic@algebra.hr
6
3
17.1.2012.
Uvod u web dizajn
• WEB vs. linearni mediji
– nelinearni medij – interaktivnost i dinamičnost
• Razlika Internet – www
– Servisi?
• Kratka povijest Interneta
7
Kratka povijest Interneta
• Internet – kraj 50‐ih
– ARPANET – sveučilišta California LA; California SB, Utah, Stanford Research Institute
• 1980. Tim Berners Lee (CERN) – ENQUIRE baza temeljena na hypertextu. Ideja da se na taj način dijele i unose podatci za sve znanstvenike svijeta – “ideju” je nazvao WWW (World Wide Web)
8
4
17.1.2012.
• 1990. prvi web preglednik simboličnog imena WorldWideWeb (imao je i mogućnost izrade web stranica) – radio samo na CERNu
• 06.kolovoz,1991. – prvo predstavljanje Weba kao javne usluge na Internetu
– Berners Lee: “Cilj projekta WWW je stvaranje linkova na sve dostupne informacije”
• 1993. Marc Anderson – prvi grafički browser
Mosaic
• Kraj?
9
• Kraj 90’ih i popularizacija Interneta, te širenje Weba; – Komercijalizacija
– Gubljenje prvotne ideje razmjene informacija i mišljenja
– pojava neželjenih sadržaja
– e‐trgovina
• Rat preglednika: IE – Netscape (FireFox)
• Uspješni projekti: Amazon, Yahoo, Google, eBay, Skype, Gmail, Blogger, YouTube, Wikipedia, Napster, FaceBook
10
5
17.1.2012.
• Web 2.0:
– “web nove generacije – web se tretira kao platforma koja omogućuje korisnicima interaktivnost, jednostavno praćenje, ali i sudjelovanje u kreiranju sadržaja.”
– Spajanje desktop aplikacija i tradicionalnih web stranica (interaktivnost, personalizacija i suradnja); – Web 1.0 – dizajn jedan od faktora privlačenja posjetitelja
– Web 2.0 ‐ naglašena mogućnost sudjelovanja posjetitelja u kreiranju sadržaja
11
– Poanta je u sadržaju: blog; wiki, podcast, RSS feed..
– Primjer ‐ servisi: Flickr, YouTube, Wikipedia, Technorati, Google (razni servisi i usluge)
• Predviđanja NEMOGUĆA
12
6
17.1.2012.
Što je?
• Web dizajn
– Vještina stvaranja hipermedijalnih sadržaja
– Grafički dizajn prikazan u dinamičkom kontekstu
• Web dizajner
– Vizualni aspekt web stvaralaštva
• Web programer
– Aplikacijski dio stranice
• Web stranica (web page)?
– Hipertekstualni, multimedijski dokument. Može sadržavati: tekst, grafiku, zvuk, video
13
• Što je WebSite?
– kolekcija različitih medija (teksta, slika, fotografija, video isječaka, zvuka, itd.) dostupnih online putem WWW
– Skup logički povezanih web stranica
– Predstavljen mapom
• Tipovi websitea?
– osobni, komercijalni, vladin, neprofitnih organizacija
– Domene: • organizacija;: .net; .org; .edu; .com; .gov
• zemalja: .hr; .uk; .it; .fr...
14
7
17.1.2012.
• Web hosting
– Web‐server dizajniran za hosting websitea
– Besplatan/naplatni/ovisno o tehnologiji…
– „Mapa“ u koju postavljamo sadržaj našeg web sitea
• Izrada web stranica zahtijeva
– ozbiljnost, znanje, iskustvo, kreativnost
15
Planiranje web sjedišta
Definiranje ciljeva i namjene
Upoznavanje s ciljanom publikom
Prikupljanje i analiza sadržaja
Izrada idejnog rješenja
Koraci koji slijede
Vizualno oblikovanje
Dinamičnost
Kodiranje (standardizacija)
Postavljanje na server
SEO
16
8
17.1.2012.
• Vizualno oblikovanje
–
–
–
–
–
prvi dojam
komunikacija s korisnikom
prenosi ideju, poruku, svrhu
važno koliko i sadržaj
!!!ne zadovoljavamo vlastiti ukus
• Layout – raspored elemenata na stranici
17
• Uloga dizajnera
– rješava isključivo izgled samog sitea:
– mora ponuditi točno određeni broj vizualnih rješenja:
• Home page; jedna „Normalna“ stranica; detaljizacija proizvoda
• Nikada ne prezentirati više od 2‐3 rješenja
• Obveza prikupljanja materijala, okupljanja prevoditelja....
• Osnovna pitanja s kojima se susreće web dizajner
–
–
–
–
Tko? – čije su stranice
Što? – što se prezentira (i kako)
Kada? ‐ ažuriranost
Gdje? – smještaj
• CSS designer – stvara template stranice
18
9
17.1.2012.
Vizualni elementi ‐ BOJE
• Važan i nezaobilazan parametar pri dizajnu weba. • Doživljaj i poruka; • Brendiranje: – Colca cola, Pepsi, Alkoholna pića
– T‐mobile, Vodafone, Tele2 – Microsoft, Adobe, Apple
– Hard Rock, McDonald’s
19
• simbolizam:
– crvena – boja vatre, krvi, radosti, strasti, energije
– žuta – sreća, radost, veselje, ali i oprez, kukavičluk
– zelena – harmonija, svježina, plodnost, sigurnost
– plava – dubina, stabilnost, odanost, mudrost
– crna – moć, elegancija, formalnost, smrt...
– bijela – svjetlo, dobrota, čistoća...
20
10
17.1.2012.
• regionalni aspekti – bijela: Europa i SAD – čistoća/vrlina : Japan: smrt
– žuta: Europa i SAD – oprez/kukavičluk : Japan: plemenitost, djetinjasto, veselost
– http://www.visibone.com
21
Prostor boja (model boja)
CMYK (suptraktivni) model
• Sustav definiranja, stvaranja i vizualizacije boja
• Svrha: standardizacija prikaza boja
• RGB i CMYK
• kod ofset tiska ‐ sustav koji sve boje opisuje kao kombinaciju četiriju osnovnih komponenti:
• Cyan ‐ Magenta – Yellow – Black
• Svaka od boja zastupljenih na slici izražava postotkom zastupljenosti pojedine C, M, Y i K komponente. • Naziv "suptraktivni" odnosi se na način stvaranja bijele "boje„ –
nastaje odsutnošću (oduzimanjem, tj. suptrakcijom) boja. • Puna mješavina (100% svih komponenti) pak proizvodi crnu "boju".
CMYK model
22
11
17.1.2012.
RGB (aditivni) model
• Red, Green, Blue • bijela "boja" nastaje miješanjem osnovnih komponenti u punom (100%) intenzitetu (dakle, dodavanjem ‐ adicijom), a crna njihovom potpunom odsutnošću
• RGB model se u praksi redovito koristi u uređajima koji raspolažu izvorom raznobojne svjetlosti (npr. televizorima, računalskim monitorima, skenerima)
RGB model
23
RGB
• RGB model: tri boje (kanala): R, G i B, na tri osi: X, Y i Z u
Kartezije-vom koordinatnom sustavu.
• Boja se predstavlja kroz 24-bitni prikaz, tj. kroz 8 bita za
svaku od tri komponente (28 =256 tj. 224 =16,7 mil. boja)
• Boje se nalaze između 0 i 255.
• Unose se sve tri vrijednosti:
– 255, 255, 0 = žuta
– 255, 0, 0 = crvena
• Imenovanje boja u kodu:
RGB model
– Imenom boje
– RGB vrijednošću
– Heksadecimalnim kodom boje
24
12
17.1.2012.
• Heksadecimalni kod boje
– sastoji se od znaka ljestve „#” i 6znakova (brojeva i/ili slova)
– Boje se kreću od 0 (tj. #00) do 255 (tj. #FF) Color
Red
Green
Blue
Hexadecimal
Kratki hex.
Black
0
0
0
#000000
#000
White
255
255
255
#FFFFFF
#FFF
Red
255
0
0
#FF0000
#F00
Green
0
255
0
#00FF00
#0F0
Blue
0
0
255
#0000FF
#00F
255
255
0
#FFFF00
#FF0
Yellow
25
• Web sigurne boje
– Bez obzira na mogućih 16,7 milijuna boja preporuča se korištenje 256 osnovnih boja, koje se svode na skup 216 sigurnih boja (dio boja otpada na boje koje koristi operativni sustav)
– Korištenjem tih 216 boja slika će biti identična na svim monitorima
– Ako sustav ne može prikazati neku boju izvan tog spektra sustav će miješanjem složiti sličnu
26
13
17.1.2012.
Vizualni elementi ‐ TIPOGRAFIJA
• Tipografija: znanost o slovima; umjetnost odabira pisma u cilju učinkovite komunikacije
• Razlika tiskani medij – zaslon
• Problemi –
–
–
–
–
velika količina teksta odbija (max. 2‐3 ekrana) problem praćenja teksta (max. 10‐12 riječi u širinu)
čitanje na ekranu umara i duže traje
prevelik broj fontova – vizualni kaos
Korisnik ih mora imati na svom računalu; ponuditi download
• http://www.dafont.com/
27
• Tekstualni sadržaji
– Logotip – prvi se uočava, identifikacija branda
– Navigacija – čist i čitak – funkcionalnost
– Naslovi – služe isticanju, veći su i jednostavniji od ostatka teksta
– Podnaslovi – objašnjenja, nadopune (obično istog tipa slova kao i naslov)
– Sadržaj – zauzima najveći dio prostora, mora biti čitak, dobre veličine i boje
28
14
17.1.2012.
• Vrste fontova
– Serifni / Neserifni
– Web sigurni / web nesigurni
– Pixel font
• Bitmap (rasterski ili pixel) font je tip računalnog slova koji pohranjuje svaki znakovnik (glyph) kao niz točaka (pixela) a to tvori bitmapu (sliku od točaka).
• Web sigurni fontovi (web safe fonts) – sistemski fontovi, prisutni na računalu
– ako nema fonta prikazuje se zamjenski – loše / ili prikaz dijelova teksta kao slika – potencijalno loše
29
Serifni (Serif fonts)
• Imaju male ukrase (serife)
• Koriste se za: – Naslove, povećane dijelove teksta
– Nije pogodan za menji tekst na monitoru (ekranu), dok se dosta koristi u tiskarstvu
• Najpoznatiji predstavnici
– Times New Roman
– Garamond
– Georgia
Neserifni (Sans Serif fonts)
• Nemaju rubne ukrase
• Koristi se za:
– veće količine teksta (sadržaj web stranica)
• Najpoznatiji predstavnici:
– Verdana
– Arial
– Trebuchet MS
Izvor slika: http://www.insidegraphics.com
30
15
17.1.2012.
• Font Family
– CSS svojstvo koje se upotrebljava za definiranje grupe (obitelji) fontova koje se koriste na stranici i na elementima unutar nje (naslov, sadržaj, link…)
– Font‐family: Arial, “Trebuchet MS“, Helvetica, sans‐serif;
• Kao glavni font na stranici koristi se Arial;
• Ako nema Ariala koristi se „Trebuchet MS“…
• Ako nema nijednog od navedenih odaberi „bilo koji“ od
neserifnih fontova
31
Vizualni elementi ‐ GRAFIKA
VEKTORSKA GRAFIKA ili Objektno – orijentirana grafika
• daje maksimalnu kontrolu, fleksibilnost
• Crtanje linija, krivulja – geometrijski oblici – opisani skupom matematički jednadžbi
• Pri tom svaka linija sadrži tri podatka: duljinu, smjer, te podatak o boji linije. U slučaju da te linije tvore neki objekt, četvrti podatak je boja ispune. • Veličina vektora mijenja se matematički promjenom vrijednosti duljine i smjera.
• Kvaliteta prikaza grafike ne mijenja se
• najrašireniji način prikaza grafike pomoću računala, bilo da se radi o tekstu, grafičkim sučeljima, modelima, nacrtima, slikama i sl.
32
16
17.1.2012.
•
•
•
•
•
•
•
•
•
•
•
•
•
AI (Adobe Illustrator)
CDR (CorelDRAW)
CGM (Computer Graphics Metafile)
EPS (Encapsulated PostScript)
HVIF (Haiku Vector Icon Format)
ODG (OpenDocument Graphics)
PDF (Portable Document Format)
PGML (Precision Graphics Markup Language)
SVG (Scalable Vector Graphics)
SWF (Shockwave Flash)
VML (Vector Markup Language)
WMF / EMF (Windows Metafile / Enhanced Metafile)
XPS (XML Paper Specification)
33
RASTERSKA GRAFIKA ili Bitmap grafika
• raster kao pojam teoretski označava "nešto što je načinjeno od više elemenata u nekom vidljivom dvodimenzionalnom sustavu” ‐ mozaik
• Bitmapa‐mreža polja (piksela)
• rasterska grafika je "crtanje" pomoću mozaika piksela; svaki piksel posebno nosi informaciju o boji koju reproducira (može prikazati samo jednu boju).
• sadrži podatke o svim bojama koje može prikazati
• može prikazati foto kvalitetu, punu dubinu boje
• jedini način da se pomoću računala prikaže fotorealistična slika. 34
17
17.1.2012.
• Rezolucija
– Broj piksela na površini određene veličine
– Više piksela  veća kvaliteta  veća težina datoteke
– Promjena veličine  gubitak kvalitete – (tzv. Lossy grafika)
35
•
•
•
•
•
•
•
•
•
•
•
JPEG (Joint Photographic Experts Group)
TIFF (Tagged Image File Format)
PNG (Portable Network Graphics)
GIF (Graphics Interchange Format)
BMP (BMP file format ‐ Windows bitmap)
JPEG XR (New JPEG standard based on Microsoft HD Photo)
FITS (Flexible Image Transport System)
PGF (Progressive Graphics File)
XCF (eXperimental Computing Facility format, native GIMP format)
PSD (Adobe PhotoShop Document)
PSP (Corel Paint Shop Pro)
36
18
17.1.2012.
• Napomene:
– NIKAD se ne radi na originalima već na kopijam
– Optimizirati grafiku za web
• Vektorska – nema problema
• Rasterska – zadržati što veću kvalitetu pazeći na brzinu učitavanja
• Ovisi i o „publici” kojoj je namijenjena
37
Datotečni formati grafike za web
GIF (Graphics Interchange Format)
• Podržava do 8‐bita po pixelu, tj. može sadržavati slike koje sadrže 2, 4, 8, 16, 32, 64, 128 ili 256 boja (nijansi sive)
• Male datoteke, • koristi se za tekst, linijske crteže, jednostavnu grafiku, gumbe..
• Ima mogućnosti koje drugi formati nemaju: prozirnost (trasnparency); i animacija (animation)
• Ne dolazi do gubitka kvalitete (lossless)
38
19
17.1.2012.
JPEG (JPG) (Joint Photographic Experts Group
• Koristi se za pohranjivanje fotografija ili umjetničkih slika
• Podržava 24‐bitnu kompresiju, dakle može sadržavati slike koje imaju od 2 do 16.777.216 boja (nijansi sive)
• Ne podržava prozirnost i animaciju
• Vrsta kompresije s gubitkom kvalitete (lossy), moguće je odabrati stupanj kompresije
39
PNG (Portable Network Graphics / Png's Not Gif) • napredna je zamjena za GIF
• Nema gubitka kvalitete (lossless)
• Podržava do 256 boja (nijansi sive)
• 3 prednosti pred GIF‐om: – alpha kanali (promjenjiva prozirnost), – gamma korekcija – vertikalno i horizontalno komprimiranje.
40
20
17.1.2012.
SWF (Shockwave Flash) • Multimedijalni format za prikaz pokretne slike u komprimiranom formatu (animacija), zvukova, vektorske i rasterske grafike:
• Značajke:
–
–
–
–
Podržava vektorsku i rastersku grafiku
Djelomična transparenciju
Male datoteke (vektorski zapis)
Omogućava programiranje uz ActionScript
• Računala moraju imati instaliran Flash Player
kako bi reproducirale SWF datoteke
41
REZOLUCIJA
•
•
•
•
Pixel (Digital Picture Element) – najmanje jedinica koju je moguće prikazati na monitoru Veća rezolucija  više piksela  veća kvalita
Rezolucija grafike za web 72dpi (dots per
inch – točaka po inču) ili 72ppi (pixel per
inch)
Rezolucija kod tiska 300dpi
42
21
17.1.2012.
Osnovni strukturalni elementi web stranice
• Kontejner – drži sadržaj cjelokupne stranice. Širina je u pikselima ili postotcima
• Zaglavlje – u njega se najčešće smješta logo
• Navigacija – omogućuje kretanje po stranici
• Sadržaj – glavni element stranice. Kvaliteta i jasnoća
• Podnožje – informativni sadržaji (autor, nositelj prava, kontakt..)
43
Layout
44
22
17.1.2012.
Navigacija (menu)
• Svrha: jednostavno kretanje stranicom
• „Tipovi”
– Glavna – nazivi glavnih cjelina; nekoliko stavki (elemenata)
– Sekundarna – nadogradnja glavne navigacije
– Kontekstualna – nadopuna glavnog sadržaja
– FooterNav – linkovi u podnožju
• Vizualna rješenja
–
–
–
–
Animirana – Flash
Skrivena – otkriva se tek prelaskom miša
Horizontalna / vertikalna
nekonvencionalna
45
„Alati” web dizajnera
• HTML (Hypertext Markup Language) – jezik za označavanje; određuje strukturu stranice
• CSS (Cascading Style Sheet) – stilski jezik za uređivanje HTML elemenata
• FIREWORKS – izrada, obrada i optimizacija grafike za web
• FLASH – razvoj multimedijalnih elemenata
• DREAMWEAVER – aplikacija za oblikovanje i izradu web stranica
• WORDPRESS – CMS aplikacija
46
23
17.1.2012.
WEB UPOTREBLJIVOST
• Web usability
– pristup koji „označava” način na koji je stranica napravljena – Jednostavnost korištenja od strane krajnjeg korisnika bez da mora „učiti” kako koristiti stranicu
– Određene „akcije” su intuitivne. Klik na link ili gumb izaziva neku reakciju…
• Ciljevi:
–
–
–
–
–
Prezentirati informacije na jasan način
Omogućiti korisniku izbor
Uklanjanje nejasnoća (zabuna)
Najvažnije stvari – najdostupnije
Efikasno pretraživanje
47
Uspješna web stranica
http://www.web‐upotrebljivost.com/savjeti/web‐dizajn/osnove‐web‐dizajna.php
48
24
17.1.2012.
Izvori slika
•
•
•
•
http://www.insidegraphics.com
http://fasade.hr
http://developer.apple.com
http://www.web‐upotrebljivost.com
49
25