I.

ta je multimedija i hipermedija
1. Definicije i opti pojmovi
1.1. Multimedija (MM)
pojam multimedija (multimedia) - dolazi od latinskih rei multus (mnogi) i medium (medijum) predstavlja integraciju razliitih medijskih elemenata koji su u osnovi samostalni sadraji multimedija je informacija predstavljena ili sauvana kao kombinacija teksta, grafike, zvuka, animacije i videa koji su objedinjeni pomou raunara aplikacije i dokumenti poboljani dodavanjem zvuka, animacije ili videa; u stvari najirem smislu programska podrka koja korisnicima omoguuje pristup ovim medijima interaktivna multimedija korisnicima je omoguena kontrola nad aplikacijom, ako je dodana struktura hiperveza onda se radi o tzv. hipermediji

1.2. Hipertekst
hipertekst (hypertext) - nelinearna metoda organizovanja i prikazivanja informacija u obliku teksta koji sadri veze prema drugim dokumentima veze su hiperveze (hyperlinks, hot words, hot links) itatlac hiperteksta stvara svoj sopstveni put pretraivanja i itanja

1.3. Hipermedija (HM)

hipermedija (hypermedia) - naglaava netekstualne komponente dodane hipertekstu (animaciju, zvuk i video) ukratko:

hipermedija = hipertekst + multimedija hipermedijski sistem sastoji se od vorova (nodes, concepts) i veza (links, hyperlinks, relationships) model podataka zasnovan na paradigmi vor-veza (node-link paradigm) vor obino predstavlja jedinstveni pojam; vorovi su s drugim vorovima povezani putem veza hipermrea (hiperweb) - kolekcija primitivnih vorova s vezama koji predstavljaju odnose meu njima standardizovani pregled informacija kod hipermree: ako vie veza izvire iz nekog vora, tada se bilo koja veza moe odabrati kako bi se prelo kroz hipermreu do odredita te veze, gdje se itavi opisani proces ponavlja

1.4. Interaktivnost
interaktivnost vrsta dijaloga korisnika i aplikacije

hipermedija kao svoju bitnu komponentu ukljuuje interaktivnost i od korisnika zahteva aktivnost: hipermedijske teme su povezane tako da korisnik u potrazi za informacijom prelazi s predmeta na drugi povezani predmet interaktivnost omoguuje korisniku biranje, odluivanje, ali i povratni uticaj na program u realnom vremenu - zahvaljujui postojanju vie navigacijskih putanja u hipermedijskom programu navigacija (navigation) - nain kretanja korisnika kroz hipermedijsku aplikaciju vrsta navigacije odreena je modelom koji je korien pri izgradnji aplikacije (linearna, hijerarhijska, kruna, slobodna navigacija) olakavanje navigacije u aplikaciji: dodaju se pomoni alati kao to su mape, dugmad s tekstom ili simbolima, ikone itd.

Nivoi interaktivnosti po: 1. stepenu kontrole koju ima korisnik 2. stepenu povratnih informacija koju nudi program 3. kreiranju novih iskustava za korisnika od strane programa Nivoi na primeru Internet aplikacija: 1) stepen kontrole korisnika: navigacija korienjem menija, funkcija dugmadi (Home, Back, Forward, History, ...), hiperveza 2) povratne informacije: nova strana na osnovu izbora hiperveze, rezultat pretraivanja, simulacije, ... 3) kreiranje novih iskustava: a) jednostavna navigacija klikovima b) alati koji omoguuju reavanje problema, reavanje testova ili kvizova, crtanje, raunanje, ... c) alati koji omoguuju komunikaciju (sinhronu i asinhronu) d) inteligentni alati koji menjaju sadraj informacija na osnovu posmatranja ponaanja korisnika (agenti)

1.5. Globalna hipermedija ili mreni hipermedijski sistemi

u poetku singularni pristup neumreenoj hipermediji: jedan korisnik u interakciji s jednom aplikacijom (obino na CD-ROM-u) razvoj raunarskih mrea - istovremeni pregled aplikacije od strane vie korisnika unutar kompanija, kola, kod kua,... posebno znaajno korienje Interneta, tj. veba kao globalnog mrenog hipermedijskog sistema

- nastao kao hipertekstualni sistem, dodavanjem multimedijskih elemenata postaje hipermedijski sistem - globalna hipermedija (hiperveze povezuju vorove na raunarima bilo gdje na Internetu) - klijentsko/serverski model - HTTP, URL, HTML Poreenje Interneta i CD-ROM-a

Prednosti CD-ROM-a
vea brzina prenosa primena zvuka i videa bri i ugodniji pregled mogunost povezivanja na Internet kvalitetnija grafika

Prednosti Interneta
besplatni dostup do informacija globalni pristup mogua komunikacija lako auriranje nije potrebna fizika distribucija

Ogranienja CD-ROM-a
nije mogue auriranje zahteva fiziku distribuciju ograniena koliina, te cena koja zavisi od koliine nije mogua komunikacija

Ogranienja Interneta
brzina veze ograniena primena videa loiji kvalitet grafike potrebna veza preko nekog ISP

2. Nedostaci hipermedijskog modela i mogua reenja

2.1. Nedostaci
nedostatak vor-veza modela podataka: ne odvaja strukturu hipermedijske baze podataka od stvarnog sadraja o problem: stvaranje i odravanje strukture hipermree pretpostavka da e korisnikova interpretacija ponuenog znanja biti smislenija od autorove o problem: dezorjentisanost korisnika prilikom kretanja kroz hipermedijski prostor ili sindrom "izgubljenosti u hiperprostoru" (lost in hyperspace) kod veba: o statinost hiperveza (<A> ili oznake sidra (anchor tag) ukljuene u HTML dokumente) o sloenost izrade i odravanja veb aplikacija raste proporcionalno broju dokumenata i veza meu njima (broken links problem) o nazavisnost veza od sadraja - sve su veze prisutne u dokumentu u isto vreme (ne vodi se rauna i o individualnim osobinama korisnika)

2.2. Reenja
nove veb tehnologije za stvaranje dinamikih i interaktivnih veb stranica o DHTML (Dynamic HTML) tehnologije - kombinacija HTML-a, script - jezika (JavaScript, VBScript, Jscript), stilova (style sheets) o ostale tehnologije na klijentskoj strani (client-side technology): ActiveX, Java appleti o tehnologije na serverskoj strani (server-side technology): CGI skripte, PHP, Java servleti, JSP (JavaServer Pages), ASP (Active Server Pages), ASP.NET prilagodiva hipermedija

3. Kratak istorijski pregled

zaeci hipermedije - ideje o stvaranju radnog i obrazovnog okruja slinog ljudskom miljenju 1945. esej Vannevara Busha "As We May Think" opisuje mainu "memex" pomou koje korisnik ima mogunost uvanja podataka, te kreirenja i kasnijeg koritenja hipertekstualnih veza meu njima po principu asocijativnog indeksiranja 60-ih godina Ted Nelson uvodi re hipertekst i predvia drutvo u kojem e hipertekstualni dokumenti biti uobiajeni kao i knjige i asopisi ideja zaivjela tek 80-ih godina kada se tehnologija dovoljno razvila da je omogui 1984. Apple Macintosh raunar s WIMP (Window-Icon-Mouse-Pointer) korisnikim interfejsom HyperCard program za razvoj hipermedijskih aplikacija 1985. nastaje Microsoft Windows 1989. nastaje veb kao hipertekstualni sistem na Internetu 1990. prva specifikacija multimedijskog PC za Windows platformu dopunjena 1991. 1993. nastaje prvi grafiki pregleda NCSA Mosaic - globalna hipermedija

4. Primena multimedije i hipermedije

adekvatni u svim podrujima gdje je potreban pristup elektronskim informacijama ovek je u stanju zapamtiti oko 20% podataka ako ih je samo uo, 40% ako ih je video i uo, te 75% ako ih je video, uo i aktivno koristio

U poslovanju poslovne multimedijalne aplikacije: marketing, prezentacije, reklame, simulacije, katalozi, ... obuka zaposlenih videokonferencije on-line prodaja

Na javnim mestima hoteli, autobuske i eljeznike stanice, trgovaki centri, muzeji i sl. - gde kiosci tj. samostojea raunara nude prolaznicima informacije i pomo

Kod kue PC raunari, Internet samostalni ureaji za zabavne i edukativne sadraje koji mogu biti i prikljueni na televizor (Playstation, Nintendo, Xbox i sl.)

U obrazovanju obrazovne ustanove su najprikladnije mesto za upotrebu multimedije najmlai uzrast - vana grafika i animacija, te zvuk koji vrlo esto zamjenjuje ili nadopunjuje tekst (npr. kod uenja itanja) odrasli - slike-fotografije upotpunjene tekstom i video zapisi oblik koritenja multimedije u edukaciji: ukljuivanje studenata u proces izrade multimedijalne aplikacije obrazovanje na daljinu

5. Multimedijalni raunarski sistemi

raunarski sistemi za razvoj (autori) i za pregledavanje (korisnici) multimedijskih aplikacija preovladavaju Windows i Macintosh platforme - odabir ovisi o linoj sklonosti, financijskim mogunostima, vrsti sadraja koji e se koristiti u aplikaciji, ... opte pravilo: vrlo brzi raunari sa velikom radnom memorijom i hard diskom

5.1. Hardware
memorija i ureaji za uvanje podataka o RAM, ROM, hard disk o disketa, zip, magneto-optiki ureaji o DVD (Digital Versatile Disc) o CD-ROM itai i snimai ulazni ureaji o tastatura, mi, trekbol, ekran sa dodirom (touchscreen), grafika ploa (tablet), skener, digitalna kamera, mikrofon, sistem za raspoznavanje glasa, izlazni ureaji o monitor, zvunici, video ureaj, projektor, tampa komunikacijski ureaji o modem, ISDN adapter, ADSL modem

MPC standardi "Multimedia PC (MPC)" standard utemeljili Multimedia PC Marketing Council opisuje IBM-kompatibilni PC s minimalnom specifikacijom za dostavljenje multimedijalnih MS-Windows aplikacija

MPC-1 Godina CPU RAM Hard disk CD-ROM Zvuna kartica Video kartica MPEG-1 OS 1991. 386SX 2 MB. 30 MB 1x 8-bit 640x480, 16 boja Ne Win 3.x 1993.

MPC-2 1995.

MPC-3

25 Mhz 486SX 4-8 MB 160 MB 2x 16-bit 640x480, 64k boja Ne Win 3.x

75 MHz PentiumTM 8 - 12 MB 540 MB, 15 ms 4x 16-bit, wave table, MIDI 600x800, 16m boja 352x240/288 @ 30/25 fps Win 3.1/95

nakon 1995. nema slubenih preporuka bri razvoj hardvera od razvoja specifikacija obavezni element dananjih MPC - prikljuak za Internet

5.2. Softverski alati

sistemski softver obrada teksta i OCR programi alati za crtanje, slikanje i obraivanje grafike 3-D modeliranje, VRML obrada zvuka animacija i video multimedijalni autorski alati

6. Osnovni multimedijalni elementi

6.1. Grafika
vana za vizuelni utisak multimedijalne aplikacije bitmape tj. rasterska grafika (paint) ili vektorska grafika (drawn) o bitmape za foto-realistine slike i za kompleksne crtee koji zahtevaju fine detalje o vektorska grafika - za grafike oblike koji se mogu matematiki izraziti koordinatama, duljinom i kutevima (linije, poligoni, krugovi, fontovi...)

6.2. Tekst
polja sa tekstom za prezentovanje samog sadraja aplikacije tekst bitan za interakciju i navigaciju kroz aplikaciju: meni, dugmii, kljune rei fontovi, stilovi, veliine, boje hipertekst i oznaavanje hiperveza

6.3. Zvuk
dve vrste zvukovnih datoteka: datoteke u talasnom obliku ili digitalizovane audio (digital audio) datoteke i MIDI datoteke digitalizovane audio datoteke - zvuni talasi se unose u raunar u analognom obliku i putem zvune kartice se pretvaraju u digitalni oblik MIDI datoteke sadre sauvana MIDI uputstva za reprodukciju zvuka koje se alju na sintetizator zvune kartice

6.4. Animacija
animacija - brzo prikazivanje sekvenci crtea - kadrova (frames) obino statina pozadina i lik - objekt (elija) koji djeluje kao da se kree po sceni pozadine privid pokreta postie se crtanjem objekta u razliitim poloajima u svakom kadru izgleda da se objekt mie kada se kadrovi prikazuju zajedno odreenom brzinom neke tehnike o tweening - potrebno napraviti samo odreene kadrove sekvence, a softver dovrava meukorake o morphing - jedna slika se preobraava u drugu

6.5. Video
video - film sainjen od niza kadrova tj. neznatno razliitih slika koje (kao i kod animacije) brzo prikazane u nizu stvaraju utisak pokreta najvei zahtevi za dodatnim hardverom za ubrzavanje (videokartice, kartice za video kompresiju) i memorijom za smetaj

II. Prilagodiva hipermedija

1. Hipermedijski programi za uenje
korienje raunara u obrazovanju za uenje i poduavanje uvoenjem hipermedijske paradigme za kreiranje programa za uenje postie se: o aktivnost studenata koji biraju sopstveni nain obrade prezentisane grae za uenje o vea motivisanost studenata za uenje zbog koritenja razliitih netekstualnih medija rezultat: studenti lake ue i pamte sadraje koji im se nude

2. Nedostaci hipermedijskog modela

hipermrea - kolekcija vorova sa vezama koji predstavljaju odnose meu njima pregled hipermree: moe se odabrati bilo koja veza koja izlazi iz nekog vora o problem: korisnik postaje izgubljen u hiperprostoru (lost in hyperspace) vor-veza model podataka ne odvaja strukturu hipermedijske baze podataka od stvarnog sadraja o problem: kreiranje i odravanje strukture hipermree

3. Nedostaci kod veba

1. 2. 3. 4. tradicionalni nain organizovanja i nuenja sadraja na vebu: kreira se vei broj HTML dokumenata (vorova), HTML dokumenti se meusobno poveu hipervezama, HTML programska podrka postavlja se na HTTP server korisnici pristupaju putem veb klijenata pregledaa sloenost izrade i odravanja veb programa proporcionalno raste sa brojem dokumenata i veza meu njima - problem prekinutih veza dodatni nedostaci kod veza: o statino su ukljuene u HTML dokumente (oznaka sidra <a>) o ne mogu se slediti unatrag, od odredinog dokumenta prema izvornom o ne zavise od sadraja, sve su prisutne u dokumentu u isto vreme posljedica: veb sadraji se ne mogu ponovo upotrebljavati bez menjanja hiperveza

4. Veb sistemi za uenje

kod veba se prilagoavanje grae za uenje korisnicima sa razliitim interesima, osobinama ili nivoima znanja reava tek ponovnom izradom programa za uenje

potrebno razviti celovite veb sisteme za uenje koji e omoguiti: o jednostavnije kreiranje i odravanje grae za uenje o kvalitetnije prezentovanje grae za uenje, prilagoeno osobinama studenta koji ui

5. Prilagodivi hipermedijski sistemi

nastoje reiti problem izgubljenosti u hiperprostoru korisnika hipermedijskih sistema novi smer u istraivanju na podruju hipermedijskih sistema nastao iz potrebe da se prevlada prevelika samostalnost studenta u navigaciji kroz programsku podrku za uenje osnovne osobine prilagodivih sistema: o utemeljenost na hipermediji ili hipertekstu o jasno odreeni model korisnika koji uva njihove osobine o model domena kao skup elementarnih delova ekspertnog znanja i veza meu njima o mogunost promjene delova sistema na osnovu informacija koje sadri model korisnika dve vrste prilagodivosti: o prilagodiva prezentacija (prilagoavanje sadraja) o prilagodiva navigacija (prilagoavanje hiperveza) prilagodivi sistemi se razlikuju po nivou prilagodivosti primena: obrazovni hipermedijski sistemi, online informacijski sistemi s dokumentacijom, online sistemi pomoi, elektronske enciklopedije, ...

6. Struktura prilagodivih hipermedijskih sistema

Komponente prilagodivog hipermedijskog sistema osnovne komponente: a. model domena (domain model) b. model korisnika ili studenta (user or student model)

c. model prilagodivosti (adaptive model)

a. Model domena opisuje strukturu znanja koje se ui slui kao osnova za strukturiranje prilagodivog sadraja obrazovne prilagodive aplikacije: model objanjava ta se ui osnovni oblik: skup koncepata domena o koncepti - elementarni delovi znanja za dati domen (podruje uenja) sloeniji oblik: mrea u kojoj vorovi odgovaraju konceptima domena, a veze predstavljaju odreene relacije meu konceptima (npr. preduslovna relacija: koji koncepti moraju biti poznati pre odreenog koncepta)

b. Model korisnika slui za predstavljanje korisnikih sklonosti, prethodnih iskustava, ciljeva, znanja, istorije navigacije, ... obrazovne prilagodive aplikacije: model objanjava ko ui dva osnovna oblika: o model prekrivanja (overlay model) - znanje studenta predstavlja se pomou skupa parova tipa koncept-vrednost; vrednosti su binarne (zna, ne zna), kvalitativne (dobar, prosjean, lo) ili kvantitativne (verovatnoa da korisnik poznaje koncept) o model stereotipa (stereotype user model) - svakom studentu se pridruuje jedan od unapred definisanih tipova korisnika ili stereotipa (na primer poetnik, prosjeni student, ekspert)

c. Model prilagodivosti nadgleda pregled ekspertskog znanja i odreuje koji su sadraji odgovarajui za pojedine korisnike obrazovne prilagodive aplikacije: model objanjava kako se ui proces prilagoavanja u tri faze: o prikupljanju se podaci o korisniku o prikupljeni podaci se obrauju kako bi se inicijalizovao ili aurirao model korisnika o model korisnika se primenjuje za izvoenje prilagodivosti

7. Vrste prilagodivosti
a. Prilagoavanje sadraja (prilagodiva prezentacija) korisnicima prilagodivih hipermedijskih sistema e se sadraji modela domena prezentovati na razliite naine zavisno od njihovog predznanja, sklonosti ili drugih karakteristika iz modela korisnika

metode prilagoavanja sadraja: o dodatna objanjenja samo za one korisnike koji ih mogu razumeti o preduslovna objanjenja ponavljanje onih koncepata za korisnike koji nemaju dovoljno predznanja o uporedna (komparativna) objanjenja za objanjavanje novih koncepata koji su slini ve usvojenima o varijante objanjenja - svi korisnici trebaju iste informacije ili objanjenja, ali razliito prezentisana (na primer, samo tekst ili i s grafikom ili samo zvuk) o sortiranje - iste informacije ureene po individualnim kriterijima neke tehnike za implementiranje metoda: o proirljiv tekst (strechtext) - odabirom kljune rei novi fragment s objanjenjem ubacuje se na istu stranu (ne na novu kao kod hiperteksta); za dodatna, preduslovna i uporedna objanjenja o varijante fragmenata i varijante stranica - pripremljeno nekoliko razliitih varijanti fragmenata ili stranica o istim konceptima i na osnovu modela korisnika odluuje se koju prikazati; za varijante objanjenja

b. Prilagoavanje hiperveza (prilagodiva navigacija) upravljanjem strukturom i prezentacijom veza postie se dvostruka uloga: o voenje korisnika prema relevantnim i zanimljivim informacijama o korisnik zaobilazi informacije ili stranice koje jo ne bi mogao razumjeti najee metode prilagoavanja hiperveza: o globalno i lokalno voenje korisniku se sugerie navigaciona putanja na nivou itave aplikacije ili prvi sledei korak koji mu najvie odgovara o potpora globalnoj i lokalnoj orjentaciji - korisniku se navodi strukture hiperveza u itavoj aplikaciji ili samo u njenom delu; na poseban nain oznaavaju se hiperveze na nauene, preporuene ili zabranjene vorove neke tehnike za implementiranje metoda: o direktno voenje na primer, dugme "Sledei" o sortiranje hiperveza - obino su veze na vrhu popisa najrelevantnije za korisnika o skrivanje i brisanje hiperveza - izostavljaju se veze koje vode na nerelevantne vorove (npr. zabranjene) o oznaavanje hiperveza odreuje se relevantnost koncepta za pojedinog korisnika; koristite se razliite boje, tipovi ili veliine fonta, te posebne ikone (npr. najrelevantnije veze zelene)

III. Grafika
1. Vrste grafike
slike na raunaru: o bitmape (paint ili rasterska grafika) o vektorske (drawn grafika)

1.1 Bitmape
sastavljene od pojedinanih toaka - piksela (picture element) svaki piksel iste veliine rezolucija - broj piksela odreuje kvalitetu slike matrica za smetaj informacija o svakom pikselu koji ini sliku (lokacija, boja), dimenzija matrice ovisi broju boja:

Primer matrice za crno-belu i RGB bitmapu ("CorelDRAW! za dizajnere")

Originalna slika i njezino uveanje (dithering (zamuivanje), anti-aliasing, zupasta izoblienje crta)

Crno-bela slika (monochrome) svaki piksel se uva kao jedan bit (0 ili 1)

640 x 480 slika zahteva 37.5 KB (640 x 480 / 8 / 1024)

Crno-bela slika bez ditheringa i sa ditheringom Slika u tonovima sive boje (gray-scale) svaki piksel se uva kao bajt (vrednost izmeu 0 to 255) 640 x 480 slika zahteva preko 300 KB

Slika u 8-bitnoj boji (indeksirana) svaki piksel je sauvan kao bajt (vrednost izmeu 0 to 255) jer sadri podatak o boji koristi se indeksirano opisivanje boja pomou posebnih tablica (Color Look-Up Tables - LUTs) 640 x 480 slika zahteva preko 300 KB

Slika u 24-bitnoj boji

svaki piksel je sauvan kao 3 byta (za svaku RGB boju po jedan) podrava 256 x 256 x 256 moguih kombinacija boja (16,777,216) 640 x 480 slika zahteva 921.6 KB mnoge RGB slike se uvaju kao 32-bitne slike jer se dodatni bajt podataka za svaki piksel koristi za uvanje alpha vrednosti, koja predstavlja informaciju o nekim posebnim efektima

1.2. Vektorska grafika

vektor opisuje se intenzitetom i smerom u prostoru slikovne datoteke sadre opise pomou linija, oblika i boja

Npr. RECT 0,0,200,200 RECT 0,0,200,200,RED,BLUE Poreenje bitmape i vektorske grafike veliina datoteke - za gornji primer oko 30 bajtova alfanumerfikih podataka prema 5000 bajtova (200x200/8) za crno-belu sliku ili 40 000 (200x200) za sliku sa 256 boja kod vektorskih slika se ne mogu pojedine informacije pridruivati nekom delu objekta (npr. delovi crte u vie boja) pri poveanju bitmap slike opada kvaliteta slike (zupasta izoblienje crta - jaggies) delovi bitmap slike se ne mogu pomerati tako da se sauvaju objekti koji su nacrtani ispod (kod pomeranja ostaje prazni prostor)

2. Izvori slika
2.1 Bitmape
clip art zbirke slika, npr. http://www.freeimages.co.uk/ (fotografije), http://www.coolarchive.com/ (pozadine, strelice, ikone, dugmii...) "hvatanje slike" s raunarskog ekrana i prebacivanje u neki drugi program kreiranje sopstvenih slika - programi za izradu bitmap slika ili paint programi (npr. Adobe Photoshop)

uitavanje u raunar ve postojee slike pomou skenera, digitalnih kamera

2.2. Vektorska grafika

CAD (Computer-Aided Design) programi programi za 3-D animaciju programi za crtanje (Corel Draw)

3. Boje
RGB (Red, Green, Blue) model boja za monitore

- crvena, zelena i plava - aditivne primarne boje - ekran monitora izvor svjetla; sa stranje strane je fosforescentni sloj - toke promjera .30 mm ili manje u R, G i B boji, izloene su elektronima koji iscrtavaju sliku velikom brzinom - kada se oduzme jedna od primarnih boja, doivljava se primarna subtraktivna boja (C, M ili Y) - npr. R+G+B = bela, R+B=magenta, R+G=yellow, G+B = cyan - crna - nema ni jedne boje CMY (Cyan, Magenta,Yellow) model boja za tampanje

- primarne subtraktivne boje - tampana strana sastoji se od vrlo sitnih takica primarnih boja i crne

(Multimedia Systems http://www.cs.sfu.ca/CourseCentral/365/li/material/syllabus.html )

Palete boja piksel je na monitoru obino izraen kao odreena koliina R, G i B boje palete su tablice koje definiu boju piksela prikazanog na ekranu broj boja na ekranu ovisi o dubini boja: Dubina boje 1-bit 4-bita 8-bita 16-bita 24-bita 16 boja 256 boja 65 536 boja 16 777 216 boja Dostupne boje Crna i bela (ili bilo koje 2 boje)

problem kod prebacivanja slika iz jedne 256 palete u drugu (palette flashing) dithering - kada se slika s 16 mil. boja prebacuje na 256 boja svaki se piksel prebacuje u boju koja najvie odgovara originalnoj uz pomo posebnih algoritama o uzorak u kojem se boje kombinuju tako da simuliraju one boje piksela kojih nema u paleti prikazivanje boje u HTML: o svaki od 3 kanala (RGB) koji zauzima 8 bita ili raspon od 0-255 predsavlja se heksadecimalnom vrednou (od 00 do FF) o npr. ista crvena boja (nema G i B): #FF0000, magenta (oduzeta G od R+B): #FF00FF, bela: #FFFFFF, crna: #000000

4. Formati slika
za bitmape i vektorsku grafiku zavisni od platforme i nezavisni od platforme sa kompresijom i bez kompresije

Ime formata Tagged Image File Format GIF (Graphics Interchange Format) JPEG PNG (Portable Network Graphics) Encapsulased PostScript Windows Bitmap Windows Metafile Macintosh PICT i PICT2 Adobe Photoshop Adobe Illustrator CorelDraw CRD

Tip datoteke .TIFF .GIF .JPG .PNG .EPS .BMP .WMF .PIC .PSD .AI .CRD bitmapa bitmapa bitmapa bitmapa vektorska bitmapa vektorska oba bitmapa vektorska vektorska

Tip slike

5. Grafika za veb
kompresovani formati slika zbog breg prenoenja mreom kompresovovanje uz gubitak informacijskog sadraja (lossy compression) i bez gubitaka (lossless compression) vektorska grafika za veb: Scalable Vector Graphics (SVG) bitmap grafika: GIF, JPEG, PNG

Scalable Vector Graphics (SVG) nije format, nego jezik za opisivanje 2-D grafike u XML-u linkovi: o Scalable Vector Graphics (SVG) 1.0 Specification http://www.w3.org/TR/SVG/ o XML.com: An Introduction to Scalable Vector Graphics http://www.xml.com/pub/a/2001/03/21/svg.html o Adobe SVG http://www.adobe.com/svg/ (download plug-ina za SVG)

PNG (Portable Network Graphics) noviji format, zamjena za GIF kompresovanje bez gubitaka prednosti u odnosu na GIF: o alfa kanali (promjenjiva prozirnost (transparency) po stupnjevima) o gama korekcija (mogunost kontrole svetlosti slike zavisno od platforme) o 2-dimenzionalno preplitanje (interlacing) kao nain progresivnog prikaza linkovi: o Portable Network Graphics Home Page http://www.libpng.org/pub/png/ (Primeri: http://www.libpng.org/pub/png/pngintro.html)

Poreenje PNG 2D preplitanja (levo) i GIF 1D preplitanja (desno)

Slike sa stranice http://www.libpng.org/pub/png/pngintro.html Poreenje GIF i JPEG formata: Format GIF Broj boja 256 Kompresovanje lossless shema ne gube se detalji lossy shema prilikom uvanja se gube detalji Kada se koristi slike sa malo boja; potrebnije je sauvati detalje nego smanjiti veliinu datoteke za fotografije (puno boja); nisu potrebni detalji, nego da datoteka bude mala za prenoenje

JPEG

16.7 miliona

GIF (Graphics Interchange Format) 8-bitna boja (prikaz do 256 boja) pogodan za slike s veim podrujima u istoj boji (ilustracije, ikone, logo, dugmii...) kompresovani format bez gubitaka; kompresuje se red po red tako to se skup piksela iste boje zamjenjuje jedinstvenim opisom (npr. manja je slika sa vodoravnim linijama, nego slika iste dimenzije sa vertikalnim linijama) mogunosti: prozirnost (transparency), preplitano uitavanje (interlacing), animacija optimizovanje: o redukovanje broja boja o redukovanje simuliranjem nepostojeih boja (dithering) o korienje "lossy" GIF-a izbacivanje nekih piksela prilikom kompresovanja o paziti pri dizajnu: koristiti vea podruja u istoj boji, izbjegavati postepene ispune i okomite crte veb paleta o paleta ugraena u preglednike, potrebna za 8-bitne monitore o 216 boja za koje nije potreban dithering na PC i Mac platformi

JPEG ime po Joint Photographic Experts Group, organizaciji koja je kreirala standard 24-bitna boja (preko 16 miliona boja) pogodan za fotografije kompresovani format s gubitkom izbjegavati snimanje ve postojee JPEG sliku ponovo u JPEG formatu kompromis izmeu nivoa kompresovanja (veliine slike) i kvaliteta slike bolji rezultati za "zamagljene" slike bez otrih prelaza i jednolinih boja progresivni JPEG dekompresovanje vri ga pregleda prije prikaza optimizovanje o koristiti vei stepen kompresovanja o koristiti optimizovani JPEG o "zamagliti" sliku ili samo manje vane delove (npr. alatom Photoshopa nazvanim Blur)

Nekoliko preporuka
DA GIF, JPEG i PNG format za slike GIF za otre ivice i jednoline boje JPEG za fotografije Datoteke sa slikama do 30K Iskljuiti ivice slika koje su hiperveze Male slike na strani kao veze na velike slike Alternativni tekst za slike NE BMP, TIF i ostali bitmap formati za slike Slike koje izgledaju kao dugmad (a nisu) Slike neujednaene sa tekstom Puno slika razliitih dimenzija Previe animacija, pogotovo uz tekst Animacije koje su same sebi svrha

IV. Tekst
polja sa tekstom za predstavljanje samog sadraja aplikacije rei i simboli vani za naslove, menije, dugmad i ostale navigacione elemente pravilo: "malo rei, puno znaenja" birati oznake sa snanim znaenjem, npr. "Go back!" umesto "Previous" istraivati sinonime

1. Unos teksta u raunar

Runa ugradnja - upis teksta ASCII (TXT) zapis (npr. Notepad) HTML zapis (npr. MS Frontpage) poseban oblik programa za oblikovanje teksta (npr. MS Word)

Mainski upis optiko prepoznavanje teksta skeniranje teksta kao slikovnog zapisa te prepoznavanje znakova i pretvaranje u tekstualni zapis pomou OCR (Optical Character Recognition) programa tampani tekst, ali i tekst ispisan rukom

2. Fontovi
oblik (typeface) skup grafikih znakova koji imaju isti prepozantljiv oblik i dizajn npr. Times, Arial, Courier,... pismo ili font skupina znakova iste veliine i stila koji pripadaju odreenom obliku, npr. Times 12-point bold stil fonta: podebljano (bold), nakoeno (italic), podvueno (underline),... veliina fonta: izraava se pomou points (0.0138 ili 1/72 incha)

(Vaughan, Multimedia: Making It Work) 1. Serif oblik fonta koji ukljuuje ucrtane stope na kraju glavnih crta kojima se ispisuje znak (npr. s oznakom Roman, Bookman, Palatino,...) itljivo pismo za tampani tekst za odlomke; stope vode oko du redova sa tekstom nije preporuljivo za ekran velika i mala slova (uppercase/lowercasse) itljivija kombinacija malih i velikih slova proporcionalni (varijabilna irina znakova, npr. Times) i neproporcionalni font (stalna irina znakova, npr. Courier) kategorizovanje oblika: Serif i San Serif:

2. San Serif font bez oznaka, manje itljiv, za naslove (Arial, Helvetica, Tahoma) bolji za prikaz na ekranu, posebno za manji tekst (10 pt)

2.1. Kodiranje znakova

dve grupe kodnih skupova: o standardi koje definiu internacionalne ili nacionalne organizacije (ISO) o standardi koje definiu proizvoai informatike opreme (npr. IBM, Microsoft) - de facto standardi

ASCII kod 7-bitni sistem za kodiranje znakova koji omoguuje opisivanje 128 znakova; dovoljan za predstavljenje slova engleske abecede (uz slova, arapske bojke, reenini znakovi, simboli, kontrolni znakovi) Latin Alphabet 1 (ISO 8859-1) koristi 8 bitova (256 znakova); do 128 znakova standardni ASCII + posebni nacionalni znakovi u sljedeih 128 znakova; slova abecede nekih zapadnoeuropskih zemalja Latin Alphabet 2 (LATIN 2) ISO 8859-2 za prikaz latinikih znakova Microsoft CP-1250 - Microsoftova verzija kodnog skupa za raunare pod Microsoft Windows platformom koja sadri latinine znakove Unicode (ISO 10646-1 odnosno Unicode verzija 2) 16 bitni sistem (65536 znakova) kako bi se svi mogui oblici znakova u nacionalnim pismima kod jezika to se danas upotrebljavaju za uobiajenu komunikaciju ugradili u jedan standard

problem za upotrebu srpskog jezika u radu sa raunarom - nekompatibilni kodni skupovi: ISO 8859-2, Microsoft CP-1250 i YUSCII

3. Korienje teksta kod multimedije

tekst se koristi za: o naslove (o emu se radi) o menije (gdje se moe ii) o navigaciju (kako negdje doi) o sadraj (to e se vidjeti kad se stigne na odreeno mesto)

3.1. Dizajniranje teksta

Multimedijske aplikacije s veom koliinom teksta: paziti na raspored po stranama/ekranima premalo teksta zahteva od korisnika este akcije za prelaz na sljedeu stranu previe teksta neitko i zamorno

Prezentacije s naglaskom na druge medijske elemente: koristiti tekst za naglaavanje glavnih poruka veliki fontovi, malo rei i puno praznog prostora

3.2. Izbor fontova - saveti

izabrati font koji se ini odgovarajui da prenese poruku aplikacije, ali ga proveriti tako da se pokae i korisnicima aplikacije za sitnija slova koristiti itljivi font (izbjegavati ukrasne, tj. serif fontove) koristiti to manje razliitih oblika, ali za isti oblik menjati veliinu i stil u blokovima teksta odabrati dovoljno veliki razmak meu redovima menjati veliinu fonta u zavisnosti od vanosti poruke kod velikih naslova paziti na razmak meu slovima i po potrebi ga smanjiti koristiti razliite boje za tekst i za podlogu, ali paziti na slaganje boja koristiti anti-aliased tekst (npr. za dugmad) ako je tekst centralno poravnat, paziti da je broj redova to manji koristiti razne efekte za tekst, npr. sjenke, oblik sfere... izdabrati smislene rei ili fraze za hiperveze i elemente menija konzistentno oznaiti hiperveze na veb strani i veb sajtu vane tekstualne elemente postaviti u gornji deo veb strane

3.3. Upotreba boja

prednosti boja u odnosu na crno-beli prikaz: o poveavaju razumljivost, prihvatljivost i snalaenje u elektronskom tekstu o poveavaju atraktivnost sadraja i motivisanost itaoca

o o Boja crvena

poveavaju mogunost razdvajanja sadraja po nivoima, zavisno od znaenja i kvaliteta ne koristiti preveliki broj boja (do 5) Uticaj izrazito prihvatljiva s visokim stepenom primjeivanja. Obino oznaava opasnost, upozorenje, zaustavljanje (ljudsko oko inae ovu boju najlake prevodi u oblik koji se u mozgu interpretira kao boja)

zelena plava bela crna siva

otvorena, vesela boja iako su pojedine nijanse vrlo neugodne pa treba biti pozoran pri definisanju nijansi ove boje vrsta, razumljiva i staloena, pa je opte prihvaena kao najpogodnija boja za postavljanje teksta na ekranski prikaz (kao boja pozadine) vrsta, jasna ali je treba paljivo kombinovati sa drugim bojama ozbiljna, teka, treba je pozorno koristiti. Vrlo esto je pogodna za pozadinu preko koje se ispisuje tekstualni iskaz neutralna, ozbiljna i jednostavna. esto je pogodna za neutralne napomene i usmeravanje na druge sadraje kroz oblikovanje dugmadi, linija navigacije i sl.

uta narandasta

za oznaavanja mesta panje, bilo u tekstu ili na odreenom delu ekrana. Medutim, suvina upotreba zamara i smeta otvorena, radosna, neutralna i lako prihvatljiva boja koju se obino stavlja kao prelaz izmedu tekih boja Tablica uticaja boja na itaoce

3.4. Opcije za navigaciju

najjednostavniji oblik: tekstulana lista hiperveza koje vode na pojedine teme ostalo: padajui meniji, iskaui meniji, mape aplikacije paziti kako imenovati stavke menija

3.5. Dugmad
kod multimedije, to su objekti ijim se izborom (klikom na njih) izvrava odreena akcija dugmad sa standardnim oznakama (npr. strelice za napred-natrag, za povratak na naslovnu stranu) ili dugmad s vlastitim natpisima za tekst natpisa i izbor fonta vrede ista pravila kao za ostale tekstualne elemente

3.6. Polja teksta

itanje teksta na ekranu raunara sporije je i tee od itanja tog istog teksta u tampanom obliku ako multimedijska aplikacija ne zahteva puno teksta, treba prezentovati samo nekoliko odlomaka po strani/ekranu polja nainiti tako da veliinom odgovaraju ekranu (ne preiroka i ne preuska)

3.7. Simboli
grafika koja nosi prepoznatljivu poruku te se zbog toga u multimediji smatra tekstom na primer:

:-)

:-(
paziti da se koriste standardni simboli koji imaju univerzalno znaenje izbjegavati izmiljanje sopstvenih simbola; ukoliko se ve koriste, upotpuniti ih tekstualnim objanjenjima

3.8. Animirani tekst

banneri, "letei" tekst, animacije kao bullets u listama,... odvlae panu pri itanju umjereno ih koristiti ili sasvim izbjegavati

4. Hipermedija i hipertekst
hipermedijske aplikacije imaju vie teksta - korienje hiperteksta paljivo treba kreirati hiperveze i vruih rei (hotwords) tj. odrediti povezivanje s drugim delovima teksta ili s ostalim medijskim objektima u aplikaciji veze trebaju biti jasno oznaene - korisnik e pre nego to pone itati najpre u tekstu strane uoiti hiperveze potrebno odabirati kljune rei (izbjegavati tzv. "here syndrome") pojam koji se pojavljuje nekoliko puta u tekstu ne treba svaki puta oznaiti kao vezu (dovoljno je kod prvog spominjanja, pogotovo ako je re o kraem tekstu)

4.1. Struktura hipermedije i navigacija

meusobno povezivanje vorova (hipermedijskih strana) hipervezama nekoliko navigacijskih struktura: linearna, hijerarhijska, kompozitna

strukture organizacije (Vaughan, Multimedia: Making It Work) hijerarhijska organizacija - sa svake strane omoguen je povrat na prethodni nivo u hijerarhiji, te na poetak (home page), sadraj (ili index), help linerana organizacija veze za prelaz na prethodnu i sledeu stranu - postie se tok itanja koji je autor predvidio kompozitna organizacija najslobodnija, "lost in hyperspace" problem

5. Primena teksta na vebu

HTML je standardni format dokumenata za veb fontovi, boje: paziti sve pre navedeno preglednik prikazuje tekst u fontovima koji su instalirani na raunaru korisnika - kod izrade strana izbjegavati nestandardne fontove slike za delove teksta za koje elimo biti sigurni da e se tako prikazati svim korisnicima kodna stranica koristiti meta oznaku za skup znakova Central European (Windows1250):

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> tabele za odreivanje irine, visine, razmetaja teksta po stranici CSS za preciznije definisanje elemenata teksta

elementi za navigaciju: o traka sa alatima (toolbar) sadri vodoravne dugmie ili hiperveze; panel sadri uspravne dugmie ili hiperveze o padajui meniji (pull-down menues) o tabovi o tekstualni linkovi prate kretanje kroz nie nivoe hijerarhije o mape veb sajtova ili aplikacije (grafike ili kao liste hiperveza) pretraivanje (search box) nekoliko preporuka: DA NE Centrirati sve elemente na strani Meati sva 3 poravnanja na strani Neitke arene podloge Pisati dui tekst velikim slovima (CAPS) Koristiti italic za vie od par rei Umetati <BR> zbog formatiranja Font SIZE= -2 ili manji, <H5> i <H6> Beli tekst na crnoj podlozi uz sitnija slova

Duina strane 2-3 ekrana Svetle boje hiperveza ako je podloga tamna Kljune rei kao hiperveze umesto "here" Provjeriti greke u tekstu Isti dizajn istih elemenata teksta Razbiti tekst prazninama i dr. elementima Suziti irinu teksta pomou tablice

V. Zvuk
1. Vrste zvukovnih datoteka
1.1. MIDI datoteke
MIDI (musical instrument digital interface digitalni interfejs muzikih instrumenata) protokol koji upravlja razmjenom podataka izmeu elektronskih muzikih instrumenata i raunara MIDI datoteka sadri uputstva za sviranje nota (nije digitalizovani audio zapis) uputstva se alju na sintetizator te kontroliu visinu svakog tona, vreme njegovog pojavljivanja, trajanje... MIDI uputstva mogu se slati na nekoliko kanala istovremeno sviranje nekoliko ureaja sintetizatora

Reprodukcija MIDI datoteke sintetizator na zvunoj kartici ili spoljanji sintetizator sintetizatori razlikuju se po nainu proizvodnje zvuka, broju zvukova glazbala, broju tonova koji mogu svirati odjednom (npr. osnovni: 3 melodije muzikih instrumenata i 6 tonova istovremeno) 2 naina proizvodnje zvuka o FM sinteza jednostavnije, korienje matematikih formula za proizvodnju zvuka o uzorkovani zvukovi (sampled sounds) kratke digitalne snimke pravih muzikih instrumenata za reprodukciju na raunaru odgovarajui program, npr. Windows Media Player

Reprodukcija MIDI datoteke (Collin, Kako radi multimedija) Stvaranje MIDI muzike na raunarima MIDI sekvencer posebni softver za snimanje, izmene i reprodukciju MIDI datoteke elektronski muziki instrument koji podrava MIDI (klavijatura, gitara) spoji se na MIDI prikljuak; izvodi se sekvencijski program koji snima sve to se svira na instrumentu

sekvencer prikazuje snimljene tonove pomou muzike skale sa notama ili u nekom jednostavnijem prikazu muzika se moe i direktno komponovati upisujui note u skale sekvencera moe se snimiti vie raznih instrumenata (svaki na svom kanalu) General MIDI standard o definie brojeve (ID kodove) za 128 muzikih ureaja i ostalih zvukova koji se mogu sintetizovati (npr. 40 violina, 68 oboa, 123 ptiji pjev) o osigurava da MIDI datoteka podeena na jednom sintetizatoru jednako zvui na drugom sintetizatoru

1.2. Datoteke u talasnom obliku (digital audio)

snimanje i reprodukcija datoteke u talasnom obliku uz pomo zvune kartice

Snimanje digital audio datoteke (Collin, Kako radi multimedija)

Reprodukovanje digital audio datoteke (Collin, Kako radi multimedija) digital audio datoteka nastaje uzorkovanjem (sampling) "semplovani" zvuk (sampled sound) svakih n delova sekunde uzima se uzorak zvunog talasa odreene veliine m i uva kao digitalna informacija u bitovima na osnovu sauvanih informacija zvuna kartica vri rekonstrukciju zvunog talasa; pri tome se koriste filteri za izglaivanje zvunog talasa

Parametri za sempliranje zvunog talasa (Vaughan, Multimedia: Making It Work) brzina uzorkovanja (sampling rate) o broj uzoraka uzet u sekundi (mjeri se u Hz ili kHz) o 1 kHz je brzina uzorkovanja od 1000 puta u sekundi o standardne brzine uzorkovanja: 11.025 ili 22.05 ili 44.1 kHz veliina uzorka (sampling size) o broj bitova koriten za smetanje uzorka o npr. uzorak od 8 bita ima 256 jedinica za opisivanje raspona amplitude o zvuk je kvalitetniji to je vea brzina uzorkovanja i to je vei uzorak proporcionalno sa kvalitetom zvuka raste veliina datoteke formula za odreivanje veliine (u bajtovima) kod digital audio datoteke: brzina uzorkovanja * trajanje zvuka u sekundama * (veliina uzorka/8) * N N = 1 za mono snimke; N = 2 za stereo snimke Na primer, 10 sekundi zvuka snimanog s 22,05 kHz, 8-bitnim uzorcima iznosi 22050 * 10 * 8/8 * 1 = 220 500 bajtova

Minut digital audio zvuka snimljenog nekim uobiajenim brzinama uzorkovanja, tj. sampliranja i veliinama uzorka (Vaughan, Multimedia: Making It Work)

1.3. Poreenje MIDI datoteka i datoteka u talasnom obliku

Vrsta datoteke Prednosti Mala veliina datoteka. Manje optereenje procesora. MIDI Ne moe se uvati govor. Za neke zvukove kvalitetniji zvuk nego digital audio. Vea mogunost izmene zvuka. Pouzdanija reprodukcija zvuka. digital audio Mogunost visokog kvaliteta zvuka. Zvuk se moe znatno razlikovati na razliitim raunarima (sintisajzerima). Ne mogu se ureivati detalji zvuka. Veliina datoteka. Znatno optereenje procesora. Nedostaci Tee za korienje jer zahtevaju muziko znanje.

1.4. Compact Disc Digital Audio (CD-DA)

format koji se koristi za reprodukciju zvuka standardnih audio CD-a na raunaru Red book audio standard za audio CD nije re o standardnom formatu datoteke, ve se zvuk dohvata jedino direktno sa CD-a uz pomo posebnog programa (na primer Windows Media Player) zvuk sa CD-a se digitalizuje uzorcima od 16 bita na 44.1 KHz

2. MPEG kompresovanje zvuka

MPEG (Moving Picture Experts Group) grupa koja donosi standarde za kopresiju, dekompresiju, obradu i kodiranje zvuka i videa MPEG-1 audio kodiranje redukuje veliinu izvornog zvuka sa CD-a bez gubitka kvaliteta zvuka tri nivoa, danas najvie koritena MPEG-1 Audio Layer 3 - MP3 o otvoren format, sve popularniji posebno na Internetu o podravaju ga razliiti softveri npr. LAME kodiranje .wav u .mp3

3. Formati zvunih datoteka

zavisni od platforme i nezavisni od platforme sa kompresijom i bez kompresije neki poznatiji formati:

Ime formata
MIDI Wave Audio Interchange File Format (AIFF) Sun Audio audio CD Windows Media audio codec MPEG Audio Layer 3

Tip datoteke
.MID .WAV .AIF

Opis
MIDI format nezavistan od platforme Microsoft format za digital audio Macintosh format za digital audio

.AU .CDA .WMA .MP3

Sunov kompresovani digital audio Format zvuka na audio CD Microsoft kompresovani format Kompresovani format sve vie u upotrebi

4. Primena zvuka na vebu

4.1. Dovlaenje zvuka
obina hiperveza na datoteku sa zvunim zapisom klikom na vezu zvuk se moe sauvati ili se moe izvesti u odgovarajuem programu (npr. Windows Media Player integrisn u prozor IE pregledaa) paziti na veliinu datoteke preporuka: koristiti MP3 ili druge kompresovane formate

4.2. Pozadinski zvuk za veb stranice (background sound)

zvuk koji se automatski poinje izvoditi nakon to se uita veb stranica izbjegavati njegovo korienje, osim ako zaista nije jako pogodan za tu veb stranicu

4.3. Streaming audio

izvoenje zvuka bez uvanja na raunaru zapoinje odmah i nastavlja se izvoditi kako se datoteka dio po dio dovlai sa servera prednost: nema dugog ekanja da se dovue cela velika datoteka moe se dovlaiti muzika ili govor u realnom vremenu (na primer, prenositi neki muziki dogaaji) najpopularniji format RealAudio (.RA) tvrtke Real Networks www.realnetworks.com postoji i Microsoftov Advanced Streaming Format (.ASF)

VI. Animacija
brzo prikazivanje kadrova (frames) niza crtea objekta koji se razlikuju po nekim detaljima privid pokreta: crtanje objekta u razliitim poloajima u svakom kadru - kad se kadrovi prikazuju zajedno odreenom brzinom izgleda kao da se objekt mie grafici je dodana vremenska dimenzija: "grafika u pokretu"

1. Korienje animacije u multimediji

animacije glavni izvor akcije u multimedijskim prezentacijama o itavi multimedijalni projekt kao animacija demonstracije ili prezentacije koje ne zahtevaju interakciju s korisnikom manje animacije kao dodatak projektu cilj: privui panju korisnika o jednostavno animiranje teksta i objekata razliiti efekti npr. kod MS PowerPointa o prikazivanje procesa ili prirodnih pojava (npr. kretanje planeta oko Sunca)

2. Vrste animacije
2-D animacija i 3-D animacija

2-D animacija najee koriena vrsta animacije uopte (npr. crtani filmovi), kao i na raunarima

3-D animacija osim visine i irine, objektima dodaje dubinu zahtevnija za izradu i korienje crta se iani model objekata te se dodaje odgovarajua tekstura, zatim se objekti smjetaju na neku pozadinu posebni programi za izradu (CAD, za izradu VRML objekata)

3. Principi animacije
animacija mogua zbog tromosti oka objekt koga je videlo oko ostaje zapamen jo nekoliko trenutaka nakon gledanja niz slika koje se razlikuju u detaljima (poloaj, oblik) i brzo se zamjenjuju, te se stapaju jedna u drugu

Pojedinani kadrovi i animacija TV video: 30 kadrova u sekundi (fps - frames per second) filmovi: snimaju se s 24 kadra u sekundi (npr. za crtani film 24 fps = 1440 slika u minuti); brzina se duplicira jer se svjetlost dva puta proputa kroz objektiv filmskog projektora uzrokuje brzinu od 48 puta u sekundi animacije na raunaru moe i manje kadrova (npr. Flash 12 fps; to ih je vie kadrova, to je animacija kvalitetnija jer se odvija s manje preskakanja ("glatkija" animacija) kontrola animacije na raunaru: o pomou vremenske osi (timeline) definie se ukupno trajanje animacije te kada se koji kadar pojavljuje o postavljanjem broja kadrova animacije (frame rate)

4. Tehnike animacije
4.1. Animacija po stazi (path-based animacija)
objekt se pomie po odreenoj putanji - ne menja se njegov oblik nego samo poloaj

Pojedinani kadrovi i animacija

4.2. Animacija s razliitim kadrovima

crta se (runo ili raunarom) serija kadrova (crtea) animacije zapoinje i zavrava se sa kljunim kadrovima (keyframes) prvi i zadnji kadar akcije meukadrovi se crtaju procesom koji se naziva tweening ("tween" - in between, eng. izmeu) postepeno se prelazi iz prvog u zadnji kadar crtanjem odgovarajueg broja meukadrova po odreenoj putanji tehnika postala poznata nakon Disneyevih crtanih filmova korienje elija (prozirnih folija) za meukadrove ponekad se prvi i zadnji kadar animacije znatno razlikuju, pa se tweening ne koristi (animacija kadar po kadar):

Pojedinani kadrovi i animacija

4.3. Animacija preobraavanjem (morphing)

jedna slika se pretvara u drugu raunarski program genere meuslike

5. Proces kreiranja animacije

koraci: 1. 2. 3. 4. kreirati slike-kadrove (sve ili samo kljune) dodati zvuk (opcionalno) snimiti animaciju u odgovarajuem formatu proveriti kako se animacija izvodi u nekom programu za reprodukciju (npr. Windovs Media Player) 5. ukljuiti animaciju u multimedijsku aplikaciju

6. Formati datoteka
Ime formata Animirani gif Windows Audio Video Interleaved (AVI) QuickTime Flash Shockwave Virtual Reality Modeling Language (VRML) .MOV .SWF .DCR .WRL Tip datoteke .GIF .AVI Opis Posebna opcija slikovnog GIF formata Format za animacije i video na Windows platformi; temeljen na bitmapama (velike datoteke) Apple format za animacije i video penosiv i na druge platforme 2-D animacija za veb Director animacije prilagoene za veb 3-D objekti za veb

7. Primena animacije na vebu

7.1. Flash animacija
pregledaima potreban poseban plug-in (Flash Player) kako bi se animacije mogle prikazivati unutar veb stranice animacija kadar po kadar i proraunavanjem meukadrova (motion i shape tween) moe se dodati zvuk manje datoteke u odnosu na GIF SWF - vektorska grafika

7.2 Animirani GIF-ovi

obine GIF datoteke prikazuje ih svaki veb pregleda jedna datoteka sadri vie odvojenih slika (kadrova) moe se odrediti: koliko puta se niz slika ponavlja, koliko dugo je svaki kadar vidljiv, nain na koji jedan kadar smjenjuje drugi, da li je pozadina slike prozirna nema mogunosti dodavanja zvuka razliiti alati za kreiranje (npr. koristiti Flash i File -> Export Movie opciju)

Nekoliko preporuka
izbegavati vie od jedne animacije na stranici (ekranu) koristiti animaciju da se prenese neka poruka ili neto naglasi (ne samo iz estetskih razloga) izbegavati animacije na stranicama s puno teksta jer ometaju koncentraciju pri itanju voditi rauna veliini datoteke s animacijom uitavanje na veb stranicu moe trajati dosta vremena beskonano ponavljanje animacije u petlji koristiti ako je zaista neophodno isprobati razliiti tempo izvoenja (npr. pauze izmeu petlji)

VII. Video
1. Korienje videa pri multimediji
digitalni video dodaje multimedijskim prezentacijama element stvarnosti video moe preneti poruku uspenije od zvuka ili teksta, na primer pri prikazu istorijskih dogaaja mogunost prenoenja najvie informacija u najmanje vremena i sa najveim uticajem s druge strane, lo video degradira multimedijalnu prezentaciju u odnosu na ostale medijske elemente video zahteva najvie raunarskih performansi (velike koliine podataka koje se trebaju brzo preneti s diska i prikazati na ekranu)

2. Vrste videa
2.1. Analogni video
tradicionalni oblik videa na kojem se temelji televizijski video i video na kazetama razliitih formata (VHS, S-VHS, Beta,...) u osnovi se sastoji od niza pojedinanih slika (kadrova); prikazivanje veeg broja kadrova u sekundi stvara iluziju kretanja 24-30 kadrova u sekundi (kps) standardna rezolucija: 720x480 ili 350,000 piksela pikseli nose informaciju o boji i svetlosti slike osnovni problem: generacijski gubitak (generational loss) svaka kopija videa loija je od prethodne; javlja se jer se analogni signali kod svakog kopiranja moraju pojaati pri emu se dodaje odreena koliina umova

2.2. Digitalni video

u multimedijalne projekte ugrauje se digitalni video svaki piksel pojedinih kadrova predstavljen binarnim brojevima bitna 4 elementa: o broj kadrova u sekundi, o veliina prozora u kome se prikazuje video, o kvalitet slike, o brzina prenosa podataka ureaja za uvanje (hard disk, CD-ROM) princip iluzije kretanja kao i kod analognog videa s manjim brojem kadrova u sekundi (10-15 kps) ispod 10 kps izgleda kao serija slika veliina prozora broj piksela koji se prikazuju vodoravno i uspravno, neke tipine veliine: 160x120, 240x180, 320x240, 640x480 kvalitet slike: 8-bitna i 24-bitna reprezentacija za reprezentaciju slike na veliinu datoteke s videom utie i zvuk opte pravilo za veliinu: 1 M po kadru ili 30 M po sekundi smanjivanje ili broja piksela ili veliine prozora u kojem se gleda video + kompresovanje kompromis izmeu kvaliteta digitalnog videa i veliine datoteke

Na primer: Parameteri videa: 640 X 480 veliina kadra 30 kadrova u sekundi 24-bita za prikaz 16 mil. boja 44.1 KHz, 16-bit Stereo Audio (CD kvaliteta)

Potreban koliina memorije (u bajtovima) za smetaj slike: 640 X 480 piksela = 307,200 piksela po kadru 307,200 X 30 kps = 9,216,000 piksela po sekundi 9,216,000 X 3-bajtova po pikselu = 27 M po sekundi

Potrebna koliina memorije (u bajtovima) za smetaj zvuka: 44,100 KHz X 16/8 X 2 = 176,400 bajtova po sekundi

Ukupno: 27,648,000 + 176,400 = 27,824,400 = 28 M po sekundi videa

Prednosti korienja digitalnog videa nia cena poboljana interaktivnost (brzo dovlaenje dohvat bilo kog dela filma) potrebno manje prostora za smetaj lako ureivanje

3. Kompresija videa
MPEG saimanje unutar kadra i meu kadrovima uvaju se samo odreeni kadrovi, te razlike meu njima - posmatranjem kadrova predviaju se izmene meu njima te se na osnovu uoenih razlika uklanjaju redundantni podaci veinom MPEG-1 (zahteva najmanje raunarskih resursa) i MPEG-2, u razvoju MPEG-4 i MPEG-7 samo softversko ili hardversko kompresovanje, ili oboje codec (compresion/decompresion) SW i/ili HW ureaj koji vre kompresovanje dvojaka uloga: kompresovanje prilikom smetanja datoteke na raunaru i dekompresovanje kod otvaranja datoteke standardi HW kompresije: JPEG, MPEG, DVI JPEG redukuje redundantne podatke unutar kadra

razliite firme razvijaju razliite tehnologije za kompresiju videa (npr. AppleQuickTime, Microsoft-AVI, WMV, ASF)

AVI - Audio-Video Interleaved video i audio loiji kvalitet i nivo kompresije u odnosu na MPEG ee koriteni Microsoftov format podrka na veini raunara koristi se i za animacije umesto animiranih GIF-ova (prednost: vie boja)

WMV - Windows Media Video noviji Microsoftov format dizajniran za korienje na Internetu nii kvalitet videa, ali mala koliina podataka

QuickTime DivX za video ono to je MP3 za muziku popularan za razmenu filmova na Internetu koristi MPEG-4 tehnologiju format je AVI datoteka koja se sastoji od MPEG-4 video i MPEG-3 audio sloja tehnologija koristi HW kompresiju za dohvatanje, upravljanje i smetaj videa, ali samo SW kompresiju za izvoenje videa na raunaru krajnjeg korisnika standardizovani format datoteke za izradu i izvoenje videa video s audiom se snima na jednom raunaru, a izvodi na bilo kom raunaru sa instaliranim QuickTime playerom podrava preplitanje audia i videa (sinhronizovanost)

4. Uitavanje videa u raunar

u poetku su za gledanje videa na raunaru koriene radne stanice s 2 monitira: jedan za samu multimedijsku aplikacija, drugi za prikaz videa s videorekordera (ili playera) sledei korak: videokartice za prikaz analognog videa na itavom ekranu monitora ili manjem prozoru unutar prozora aplikacije potreba za pretvaranjem videa u digitalni oblik: o analogni audio/video ureaj za uitavanje ("hvatanje" capture) videa koji se prikljuuje na raunar i na koji se spaja video kamera (analogna) ili videorekorder o posebne video capturing kartice ugraene u raunar na kojima se nalaze ulazi za kameru ili VCR o video se pretvara iz analognog u digitalni format i uva u obliku datoteke na hard disk, CD-ROM i sl.

digitalne video camere (DV kamere) zahtevaju IEEE 1394 prikljuak na raunaru za prenoenje videa u raunar uz korienje odgovarajueg programa (npr. Windows Movie Maker) playback: programi kao to su Widows Media Player, QuickTime i sl. o Windows Media Player radi s vie razliitih video formata, podrka za nove dodavanjem codeca

5. Video standardi
5.1. Standardi video signala
meunarodni standardi za prenoenje i prikaz televizijske slike: NTSC (USA, Kanada, Japan,...), PAL (Europa, Kina, Australija,...), SECAM (Francuska,...) razlikuju se po nainu na koji se informacije kodiraju kako bi proizvele elektronski signal koji kreira TV sliku nisu meusobno kompatibilni

NTSC

TV kadar na ekran crta elektronski zrak koja prolazi 2 puta (preplitanje interlacing) TV slika se izgleda stabilno, bez titranja kadar ima rezoluciju od 525 vodoravnih crta, iscrtava se 30 kps omjer slike je 4:3

PAL metoda dodavanja boje crno-belom TV signalu koja iscrtava 625 vodoravnih linija brzinom 25 kps koristi preplitanje

HDTV (High Definition Television) za prenos i prikaz TV slike koristi digitalni umesto analognog signala kvalitetnija slika iscrtava se 1080 vodoravnih linija brzinom 60 kps proporcija slike je 16:9

5.2. Formati za snimanje video zapisa

analogni: VHS, 8mm (nieg kvaliteta), SVHS, Hi8 (vieg kvaliteta) digitalni: DV, DVD, ...

Digitalni formati DV format univerzalno prihvaen za digitalne kamere kompresija podataka od oko 3.5 MB/sec kvaliteti vei od analognih formata DVD, miniDVD, VCD, SVCD: formati za uvanje videa na CD-R/RW diskovima koji se mogu izvoditi na raunarima ili kunim DVD playerima (za neke formate s mogunou reprodukcije CD-R ili CD-RW)

DVD - 'Digital Versatile Disc' DVD-Video snimljen na DVD-R ili DVD-RW disk, sadri visokokvalitetni video (MPEG-2) i audio DVD video parameteri: o veliina kadra: 720x480 (NTSC) ili 720x576 (PAL) o broj kadrova u sekundi: 29.97 fps (NTSC) ili 25 fps (PAL) o prenos podataka: 4~8 Mbps o audio: stereo, 48 kHz i 192~384 kbps MPEG audio o obino moe sadrati vie od 1 sata videa

miniDVD slian DVD, 18 min videa

VCD - 'Video Compact Disc' CD-ROM disk s videom i audiom obino moe sadravati oko 74 minu a (650MB) videa i stereo zvuka spremljenih u MPEG-1 formatu veliina kadra od 352x240 piksela (celi TV ekran) kvaliteta VCD videa priblino jednaka kao VHS video

SVCD - 'Super Video Compact Disc' CD-ROM disk s visokokvalitetnim videom i audiom obino moe sadravati oko 35~45 minuta (650MB) videa i stereo zvuka spremljenih u MPEG-2 formatu (slino kao DVD) kvaliteta SVCD videa bolja od VHS

6. Primena videa na vebu

6.1. Dovlaenje videa
obina hiperveza na datoteku sa video zapisom:

<A HREF="primer.mov">primer QuickTime videa (2.1M)</A> klikom na vezu video se moe sauvati ili se moe izvesti u odgovarajuem programu (npr. Windows Media Player integrsan u prozor IE pregledaa) paziti na veliinu datoteke preporuka: koristiti kompresovane formate (obino AVI, MPG)

6.2. Video ukljuen unutar veb stranice

korienje HTML <OBJECT> ili <EMBED> oznaka:

<EMBED SRC="primer.mov width=160 height=120> prozor s videom postavlja se unutar sadraja prikazane veb strane (slino kao HTML oznaka za sliku)

6.3. Streaming video

izvoenje videa bez uvanja na raunar zapoinje odmah i nastavlja se izvoditi kako se datoteka dio po dio dostavlja sa servera koristi poseban RTSP protokol i zahteva specijalizovani streaming servis. prednost: nema dugog ekanja da se dostavi cela velika datoteka najpopularniji formati: o RealNetworks RealVideo format Microsoft ASF (Advance Streaming Format) streaming na zahtev (koristi obian HTTP protokol i metod progresivnog preuzimanja datoteka se preuzima cela na raunar, ali se pokree im je preuzet dovoljan deo)

Formati datoteka za veb

Ime formata QuickTime AVI Audio-Video Interleaved WMF - Windows Media Format MPEG ASF (Advance Streaming Format) RealNetworks RealVideo format Tip datoteke .MOV .AVI .WMV .MPG, .MP2 .ASF .RM Opis Macintosh video standard Microsoft video standard noviji Microsoft standard podravaju ga sve platforme Microsoftov stream format streaming format

Zahvalnica
Materijal koji je ukljuen u ovaj dokument je preuzet od prof. dr Natae Hoic-Boi, sa Odseka za Informatiku Univerziteta u Rijeci. Hvala prof. Hoic-Boi na pomoi.