17.1.2012. WEB DIZAJNER voditelj: Višeslav Račić, prof, ACE e‐mail: [email protected] 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: [email protected] 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
© Copyright 2024 Paperzz
