3.

kolokvij
1. OBLIKOVANJE WEB STRANICA

Web izdavaštvo podrazumijeva proizvode u obliku web mjesta.

Web mjesto:

 sastoji se od hijerarhije elemenata koji djeluju zajedno kao

 individualne povezane stranice koje dijele zajednički grafički i navigacijski izgled
 elementi dizajna koje dijele stranice stvaraju iluziju kontinuiteta kroz web mjesto
 individualne web stranice su tvorbene jedinice web mjesta – sve što karakterizira strukturu
web mjesta mora se pojaviti na predlošku (web) stranice

Oblikovanje, dizajniranje web mjesta (web site design) - objedinjava se planiranje informacijske
arhitekture, elementa navigacije i korisničko sučelje i počinje strukturirati stvarno web mjesto u html-
u i css-u.

Raspored stranice (layout):

1) Interni predlošci web stranica (internal page templates) – funkcije:

 globalna i lokalna navigacija – logički konzistentna s informacijskom infrastrukturom i
strukturalnom organizacijom web mjesta
 okviri dizajna – organizacija sadržaja konzistentno kroz web mjesto
 grafički dojam (ton): postavljanje izgleda i dojma web
2) Informacijska arhitektura:
 strukturalni dizajn okolina za dijeljenje informacija (web stranica logično)
 kombinira sustava označavanja, pretraživanja i navigacije unutra web mjesta
3) Web mjesta organizirana hijerarhijski:
 Vertikalne dimenzije (stranica) i horizontalni prostor sa sadržajem koji grafički i
organizacijski omogućuju navigaciju
 Predlošci web stranica druge razine (sekundarnih web stranica) moraju biti usklađeni sa
predlošcima internih stranica uz dodatne funkcije ostvarenja hijerarhije zaglavlja koje
čine vezu između sekundarnih i početne stranice, osiguranje različitog izgleda
sekundarne stranice
 Početna stranice (home pafe) dizajenira se posljednja, a mora sadržavati 4 elementa:
identitet, navigaciju, žarište sadržaja i alate (search ...)

Vizualni dizajn:

 Jednostavni grid - rešetka za uspostavu funkcionalnih područja

 Stranice koriste poznate principe prijeloma pa korisnici mogu predvidjeti lokaciju glavnih
komponenata i funkcionalnih elemenata
 Prilikom dizajna (zbog stvaranja lako prepoznatljive strukture) potrebno voditi računa o:
razmaku (spacing), grupiranju (grouping), sličnosti (similarity), i općoj vizualnoj logici uzorka
(overall visual logic of the patterns)
  Osnovna svrha: kreiranje vizualne hijerarhije tako da je moguće uočiti što je važno a što nije,
definirati funkcijska područja, grupirati elemente stranice tako da je vidljiva struktura
sadržaja
 Konzistentnost (consistency) - postavljanje prijeloma (layouta) i njegova primjena
 Grafički dizajn (visual information management) - uz pomoć alata prijeloma, tipografije i
ilustracije vodi korisnikov pogled kroz stranicu. Korisnici prvo zapažaju boje i oblike, zatim
pregledavaju slike i na kraju pretražuju tekst.
 Opći grafički balans - ravnoteža između privlačenja pogleda vizualnim kontrastom i osiguranja
jasne organizacije
 Gestlat vizualni dizajn nastao na temelju gestlat psihologije koja pručava sposobnost uma da
vidi sjedinjene “cjeline” iz sume kompleksnih vizualnih dijelova. Principi koji prevladavaju u
ljudskom vizualnom zaključivanju i prepoznavanju uzoraka: blizina (proximity) – elementi koji
su blizu percipiraju se kao više povezani nego oni koji su udaljeni, sličnost (similarity) –
promatrač će povezati i tretirati kao grupu elemente koji imaju slične vizualne karakteristike,
kontinuitet (continuity) – preferiramo kontinuirane, neprekinute konture i putanje.
 Uniformno povezivanje (uniform connectedness) – odnosi između elemenata koji su opasani
drugim elementima

Širina stranice:

 Fiksna širina: često se koriste (za složene prijelome stranica s mnogo funkcijskih
podpodručja -web stranice novina), prijelom je stabilan bez obzira na veličinu korisnikova
ekrana ili prozora preglednika (fiksira poziciju elemenata na stranici i kontrolu tipografskih
svojstava , održava gestalt vizualnu i prostornu logiku odnosa različitih komponenata u
prijelomu, kod velikih monitora veći dio površine ostaje neiskorišten, a kod užih prozora
preglednika korisnik mora horizontalno pomicati prikaz, problem sa uvećanim tekstom
 Optimalna, “sigurna” širina stranice je konstantno promjenjiva jer se prosječna veličina
računalnih monitora stalno povećava
 Hibridna alternativa: kombinacija jedne ili više kolona fiksne širine s fleksibilnom središnjom
kolonom (jednostavne strukture sadržaja koja se prilagođava i ispunjava punu širinu prozora
preglednika)
 Izgled web stranice ovisi o: veličini zaslona, rezoluciji, postavkama boja, visini i širini prozora
preglednika, softverskim postavkama. Web stranica mora biti: čitljiva, prilagodljiva svim
uređajima, pristupačna svima.
 Fleksibilna širina: najčešća metoda – korištenje postotaka za definiciju širine različitih
elemenata stranice, možda nije najbolji pristup kod kompleksnih prijeloma stranica koji ovise
o relativno fiksnim vizualnim odnosima izmeĎu veličine stranica, tipografije i slika

Dužina stranice:

 Određivanje odgovarajuće dužine web stranice je ravnoteža četiri faktora: odnosa između
stranice i veličine zaslona, sadržaja dokumenta, da li čitatelj očekuje pregledava sadržaj ili
ispisuje ili preuzima, pojasne širine (bandwidth) dostupne publici
 Duge web stranice zahtijevaju pamćenje previše informacije tijekom pregledavanja ali su
lakše za organiziranjei preuzimanje
  Rješenje za postizanje kvalitetnog online sučelja za duže dokumente, jednostavni ispis ili
pohranu: podjela dokumenta na dijelove (jedna do dvije stranice), osiguranje poveznica do
datoteke koja sadrži tekst cijele dužine kao jedne stranice koju je moguće ispisati ili pohraniti
u jednom koraku, korištenje tipaka za pozicioniranje
 Kraće bi trebale biti: početne (home) stranice i stranice izbornika, navigacije, dokumenti koji
će se pregledavati i čitati, stranice sa velikim slikama
 Duži dokumenti su: laki za održavanje ( sadržaj u jednom komadu a ne u povezanim
dijelovima), više nalikuju strukturi papirnatih kopija, laki za preuzimanje (pohranu) i ispis

Tipografija:

 Elementi: čitljivost (legibility), poravnanje i bjeline (alignment and white space), dužina
retka (line length), razmak (leading), boja slovnih znakova (type color), oblik, veličina slovnih
znakova (type size), isticanje (emphasis)

Web čitljivost:

 mjera je koliko dobro i s kojom lakoćom se prenosi smisao teksta sa zaslona čitatelju.
 Faktori koji utječu na čitljivost: oblik i veličina fonta, razmak i raspored, struktura teksta,
poteškoće s rječnikom ...
 Kontrast između boja - crni tekst na bijeloj podlozi ili bijeli tekst na crnoj podlozi najbolji je za
ljude s problemima s čitanjem ili za loše monitore koji imaju problem s prikazom slike

Web (sigurne) boje:

 Web safe colors – 216 boja (boja koja nije unutar 216 web boja daje dojam dithered boja)
 Metrike upotrebljivosti su: razumiljivost (sposobnost korisnika da sam prepozna funkcije
softvera koji zadovoljava njegove potrebe), lakoća čitanja (koliko je potrebno korisniku da
nauči neke određene funkcije koristeći se dokumentacijom), operabilnost (da li se korisnik
može služiti s funkcijama softvera), atraktivnost (ocjenjuju kakav je izgled sučelja), sukladnost
(procjenjuju da li su primijenjeni standardi, konvencije, stil vodiča ili propisa koji se odnose na
upotrebljivost).

Web pristupačnost:

 Web pristupačnost predstavlja mogućnost da ljudi s posebnim potrebama koriste web (da
mogu percipirati, razumjeti, navigirati i imati interakciju s webom, te da mogu doprinijeti
webu). Web pristupačnost donosi prednosti i drugima, uključujući i starije osobe kojima se
mijenjaju sposobnosti s procesom starenja.
 Cilj web pristupačnosti: vizualne (smanjene vizualne sposobnosti koja uključuju sljepoću,
slabovidnost, razne vrste sljepoće na boju), motorne( problem ili nemogućnost korištenja
ruku), slušne (gluhoća ili smanje slušne sposobnosti), napadaji (epileptični napadaji
uzrokovani bliještećim sadržajima), kognitivne/intelektualne (poteškoće u razvoju, učenju),
te kognitivni problemi različitog podrijetla, koji utječu na pamćenje, pozornost, razvojnu
"zrelosti", rješavanje problema i logiku.
 Pomoć pojedincima za pristupanje webu: “čitač ekrana (softver koji može na glas čitati
odabrani element koji je prikazan na monitoru, Braille terminali (koji se sastoje od Braille
 ekrana koji prikazuje tekst u Braille jeziku, softver za povećavanje sadržaja prikazanog na,
softver za prepoznavanje govora, dodaci za tipkovnice.
 Smjernice web pristupačnosti WCAG 2.0 (The Web Content Accessibility Guidelines) -
smjernice koje služe dizajnerima web stranica da se pridržavaju nekih pravila s kojima će
učiniti sadržaj svojih stranica. Sadržaj stranice mora biti: uočljiv (informacija i korisničko
sučelje moraju biti prezentirani korisnicima na način na koji oni mogu to opaziti), operabilan
(komponente korisničkog sučelja i navigacije moraju biti operabilne, razumljiv (informacije i
funkcije korisničkog sučelja moraju biti razumljive), robustan (sadržaj mora biti dovoljno
robustan da se može interpretirati širokim spektrom korisničkih agenata).

3. 3D RAČUNALNA GRAFIKA

Trodimenzionalni model (3D model) :

 skup podataka za prikaz objekta u virtualnom 3D prostoru. Informacije za prikaz virtualnog

objekta mogu biti u obliku skupa podataka o točkama, koordinatama, dimenzijama,
materijalima i sl. Proces kreiranja matematičke reprezentacije trodimenzionalnog objekta
poznat je kao 3d modeliranje
 Podrazumijeva korištenje poligona ili NURBS-a (Non-Uniformal Rational Bézier Splines) kao
osnovnih gradivih elemenata objekta. Poligon je ploha omeđena s minimalno tri točke.
Međusobnim povezivanjem poligona pomoću točaka odvija se proces modeliranja. NURBS
model je matematički opis oblika Bézierovim krivuljama, rezultat je 3D model koji se može
prikazati kao 2D.

Poligonalno modeliranje:

 Poligonalno modeliranje modele predstavlja nizom poligonalnih površina. Temeljna

sastavnica je rubna točka 3D prostora (eng. vertex). Dvije povezane točke čine rub (eng.
edge), dok tri točke generiraju trokut (eng. triangle) koji je ujedno i najjednostavniji poligon.
Trostrani i četverostrani poligoni najčešći su elementi poligonalnog modeliranja.
 Model (mesh): grupa poligona povezanih zajedničkim rubnim točkama.
 NURBS modeliranje: matematički izraz koji 3D modele prikazuje pomoću krivulja i površina.
Rezultat je glatka površina bez nazubljenosti rubova neovisno o veličini monitora ili rezoluciji.
Geometrija NURBS-a bazira se na Bézierovoj krivulji koju program automatski iscrtava između
kontrolnih vrhova. Svaka krivulja ima početak, kraj i zakrivljenost. Stupanj zakrivljenosti ovisi
o kontrolnim vrhovima unutar krivulje. Dodavanjem vrhova u krivulju, dobivaju se nove točke
za manipulaciju pri čemu se ne narušava glatkoća niti zaobljenost.
 Subdivizijsko modeliranje površina: kombinaciju NURBS-a i poligona. Modeliranje najčešće
počinju kao poligonalno, a zatim se koristi matematika NURBS-a kako bi se zagladili grubi
rubovi modela. Subdivizijske površine su definirane rekurzivno. Proces počinje sa dobivenim
poligonalnim mrežama koje se usavršavaju te se ponovno primjenjuju.
 Fraktalno modeliranje: bazira se na procesu generiranja, a ne na ručnom kreiranju modela.
 3D digitalizacija je procedura koja se koristi za izgradnju digitalne 3D kopije fizičkih površina.
Proces 3D digitalizacije se provodi različitim vrstama 3D skenera. Postoje bezkontaktni i
kontaktni skeneri (pretežito se koriste bezkontaktni 3D skeneri). Ovisno koju vrstu svjetla i
koju tehniku mjerenja duljina koriste, dijele se na pasivne i aktivne. 3D skeneri koji ulaze u
područje mikroskeniranja dijele se u dvije osnovne skupine: laserske i fotogrametrijske
 Osnovni produkt 3D laserskog ili fotogrametrijskog skeniranja je mjerljiv 3D model u obliku
oblaka točaka gdje svaka točka ima svoju prostornu koordinatu definiranu u Kartezijevom
pravokutnom koordinatnom sustavom X, Y, Z. Kod 3D skeniranja objekata i prostora može se
postići velika gustoća prikupljenih podataka odnosno točaka
 Fotogrametrijsko skeniranje koristi metodu tzv. stereografije, odnosno mogućnost izrade 3D
modela preciznim i kalibriranim kamerama ili fotoaparatima koji prikupljaju fotografije
objekta s različitih pozicija. Njihov međusobni položaj je precizno definiran, te se na temelju
stereopara fotografija s različitih pozicija dobiva treća dimenzija. Posebnim algoritmima
automatski se mogu interpolirati prostorne 3D točke te je konačan rezultat 3D model. Rad
terestričkih 3D laserskih skenera bazira se na LIDAR (Light Detection And Ranging) tehnologiji
poznavanja brzine svjetlosti i uskom koherentnom snopu laserske koju uređaj emitira u
prostor.
 Pulsni ili TOF (Time Of Flight) laserski 3D skeneri
 Fazni (Phase shift) laserski 3D skeneri Fazna mjerenja duljina
 Uz izradu CAD tehničkih crteža presjeka, pogleda, tlocrta, izvorni oblak točaka u stvarnim
bojama može se iskoristiti i za izradu 3D poligonalnih modela na način da se točke povežu u
sustav trokuta (3D modeli s plohama).

3. ELEKTRONIČKE PUBLIKACIJE

Elektronička knjiga:

 sadržaj knjige koji je čitatelju dostupan u elektroničkom obliku (moguće njihovo čitanje,
preuzimanje, ispis ...), Knjige tiskane na zahtjev (POD: print-on-demand books) – sadržaj
knjige je pohranjen u sustavu povezanim s brzim, visokokvalitetnim printerima na kojima se
ispisuju i uvezuju kopije producirane na zahtjev
PDF( Portable Document Format) - univerzalni format za pohranu fontova, slika i izgleda
izvornog/originalnog dokumenta stvorenog u raznim aplikacijama i platformama.

Programi koji simuliraju okolinu za čitanje – omogućuju navigaciju kroz dokument, pretraživanje,
oznake stranica, naglašavanje teksta, crtanje, povezivanje s rječnicima i Text-to-Speach

e-book reader, e-book device, e-reader: uređaj namijenjen isključivo za čitanje digitalnih
(elektroničkih) knjiga koji koristi tehnologiju el. tinte za prikaz sadržaja

ClearType:

 Microsoftova softverska tehnologija za poboljšanje čitljivosti teksta na LCD (Liquid Crystal

Displays) zaslonima (izgledaju oštro i čisto kao i one tiskane na papiru). Svaki piksel na LCD
zaslonu formira se od pojedinačnih vertikalnih traka (elemenata) – podpiksela (sub-pixel)
 Tehnologija: Tradicionalna tehnologija - piksel je uključen ili isključen i nema interne
strukture (siva skala – izglađivanje rubova na štetu oštrine), a ClearType (3 podpiksela)
koristi ljudski vid (model) za odabir vrijednost svjetline podpiksela: slova izglađena, zaobljena,
nisu nazubljena a rubovi ostaju oštri

Elektornička tinta:

 spoj kemije, fizike i elektronike. Osnovna komponenta su milijuni sićušnih mikrokapsula,

svaka kapsula sadrži pozitivno nabijene bijele čestice i negativno nabijene crne čestice koje
lebde u prozirnoj tekućini (carrier medium). Negativno el. polje privlači na vrh mikrokapsule
čestice bijele boje koje postaju vidljive korisniku
4. PRISTUPAČNOST PUBLIKACIJI

Prezentacija ima 17 slajdova, a i nema ništa konkretnog (definicija), samo o pristupu osoba s
potrebama e-publikacijama.

5. VIZUALIZACIJA INFORMACIJ I POSLOVNA GRAFIKA

Vizualizacija informacija: oblikovanje mentalnog modela podataka. 3 aspekta vizualizacije:

 Predočavanje, prikazivanje (representation) - vizualno ili slušno šifriranje podataka

(univarijantni, bivarijantni, trivarijantni i hipervarijantni podaci, linije, mape i dijagrami,
stabla, grafikoni). Grafikoni: pie chart (kružni grafikoni, izbjegavati 3d jer iskrivljuju podatke),
bar chart (grafikon s pravokutnim stupcima/trakama (postavljenim vertikalno ili
horizontalno) čija je duljina), line chart (linijski)
 Izvođenje, predstavljanje (presentation) - odabir i izgled/format podataka
 Interakcija (interaction) - poduzeta kako bi se dobila nova gledišta(“views”-vidici,pogledi) na
podatke

Vizualizacija ideja:

 Mind map – mentalna/umna mapa (dijagram u čijem je centru koncept, ideja ili tema, a iz
njega se granaju ostali semantički povezani koncepti

6. FONTOVI

Izrada sloga:

 Ručni slog - slaganje riječi obavlja se tako da se u slagaljku (composing stick) koja se drži u
ruci stavljaju slova od kojih se oblikuju riječi, rečenice, reci, poglavlja – cijeli tekst.
Pismovni materijal (type material) – metalno slovo (metal sort): tiskovna površina (face),
trup (body or shank), širina trupa (point size), slobodna površina (shoulder), signatura (nick),
podrezak (groove), donja ploha (baza) trupa - podnožje (foot).
 Foto slog - temelji se na izradi snimke slova i ostalih znakova na filmu.
 Računalni slog - računalno upravljana obrada teksta i slike (izrada tiskovne forme: digitalna
slika slovnih znakova).

RIP (Raster Image Procesor) - komponenta (HW/SW) koju koristi sustav za ispis kako bi proizveo
rastersku sliku (bitmapu) koja se zatim šalje pisaču na ispis

Font

 skup znakova istog oblika (npr. Courier), stila (npr.kosi), težine poteza (npr. masni), te veličine
 font sadrži informacije za pozicioniranje i iscrtavanje znakova koje predstavlja
 Pismo : pismovni re (izvedba pisma), Porodice fontova s obzirom na: težinu ( debljinu
poteza), Širinu (uski, bold, wide...), Kurziv (Italic/oblique).
 Vrste prema širini znakova: Fiksne širine (nerazmjerni font – sva slova zauzimaju isto
prostora). Proporcionalne širine (razmjerni font – svako slovo ima određeni prostor koji mu
treba).
Vrste prema tehnologiji: Obrisni i Bitovni.
  Fontovi s obzirom na promijenjivost: skalibilni (skupovi znakova u kojima su izgled i težina
znakova stalni, a visina promjenljiva), neskalibilni (skupovi znakova nepromjenljive veličine).
 Fontovi prema tehnologiji: digitalni uređaji prikazuju sliku uz pomoć točaka. Znak je crtež od
niza točaka koji se spremaju kao font a uređaji te crteže/slike prikazuju na određenom
mjestu. Točka se opisuje jednim bitom = bitmapa. Fontovi koji se temelje na toj tehnologiji su
bitmapirani, bitovni fontovi (bitmapped, bitmap fonts.
Bitovni fontovi = svaki je znak opisan jedinstvenim uzorkom bitova (uzorkom točaka). Za
svaku veličinu fonta potreban je poseban skup točaka (posebni font. Prikaz bitmapiranog
fonta ovisan o rezoluciji uređaja na kojem se prikazuje.
Obrisni fontovi = oblik znakova određen je matematički stvorenim crtama i krivuljama
umjesto uzorcima točaka. Znak je opisan matematički pomoću crta i krivulja tj. vektorima pa
se obrisni fontovi nazivaju i vektorskim fontovima – vector fonts. Obrisi znakova mogu se
dimenzionirati na bilo koju veličinu bez izobličavanja oblika ili proporcija znaka
 Fontovi prema načinu pohrane i upotrebe: Ugrađeni fontovi (built-in) - fontovi tvornički
ugrađeni u pisače (nalaze se spremljeni u memoriji pisača). Cartridge fontovi - spremljeni u
dodatnim modulima (cartridge. Kasetni font - fontovi u dodatnom modulu koji se priključuje
na odgovarajući utor (slot) pisača, fontovi iz dodatnog modula koji se spremaju u ROM.
Programski fontovi (soft font): programski definiran skup znakova određene veličine i oblika
 Sadržaj datoteke font - najvažnije informacije su sami obrisi znakova, a svi znakovi nekog
fonta se nazivaju skup znakova (character set) i za većinu alfanumeričkih fontova su u
određenoj mjeri standardizirani . Obrisi znakova su neovisni o veličini. Tabela širina (width
table) sadrži informacije o horizontalnom prostoru dodijeljenom svakom znaku. Font sadrži i
tablice širina ostalih oblika (izvedbi) lovnih znakova (regular – roman, italic, bold, bold italic)

Font formati:

 OpenType – razvio ga Adobe i Microsoft, u potpunosti skalilabilni.

 TrueType – razvio ga Apple, mijenja se veličina bez gubitka kvalitete. Omogućuje tijekom
razvoja fonta visoki stupanj kontrole nad time kako će fontovi biti prikazani. TrueType
rasterizator - omogućuje rasterizaciju (pretvorba grafičkih elemenata u točke – raster). Font
pohranjen u datoteci koja sadrži: opis svakog znaka, informacije o vertikalnim i horizontalnim
razmacima između znakova, informacije o mapiranju (preslikavanju) znakova, hintingu,
kerningu i opće podatke. Obris znaka (glif) se sastoji od jedne ili više kontura: Jednostavni
glif (simple glyph) može imati samo jednu konturu, Kompleksni glifovi (complex glyph)
mogu imati dvije ili više kontura i Složeni, kompozitni glif (composite glyph) nastaje
kombinacijom dva jednostavna glifa. Hints: instrukcije ugrađene u obrisne fontove koje
omogućuju da se znakovni oblici pri malim veličinama točke i niskim razlučivostima, ispišu što
je moguće sličnije dizajniranom obliku znaka. Hinting (instructing): metoda definiranja koji
pikseli se uključuju kako bi se proizveo što bolji bitmapirani oblik znaka.
 FNT – windows font style koji može bit ili vektorski ili rasterski.
 Post Script - jezik za opis stranice – koristi se za pripremu elektronički oblikovanih stranica za
ispis, neovisan je o računalu, printeru, operativnom sustavu, računalnom programu. Opis uz
pomoć Bézierovih krivulja omogućuje da se veličina glifova prilagodi uz pomoć matematičkih
transformacija i ispisa na PostScript pisaču.

Scan konverzija:
  Proces popunjavanja obrisa znaka – generira se bitmapa znaka tako da se uključe pikseli
unutar obrisa i na njemu. Za izradu pravilne bitmape koristi se tzv. dropout kontrola (na
mjestima gdje je znak previše tanak i centar piksela ne dodiruje obris znaka)

Programska rješenja za fontove:

 upravljanje fontovima (font management) – pomoć pri organizaciji i upravljanju velikim

brojem fontova koji mogu prenapučiti računalo
 kreiranje fontova (font editing) – za kreiranje fontova ispočetka: crtanje kontura (outlines) i
njihovo uređivanje. Font editor – aplikacija za kreiranje fontova (bitmapiranih ili obrisnih)