us - multimedija - praktikum

UNIVERZITET SINGIDUNUM

FAKULTET ZA INFORMATIKU I MENADŽMENT

Vladislav Miškovic

MULTIMEDIJA- PRAKTIKUM -

Drugo izdanje

Beograd, 2008.

MULTIMEDIJA - PRAKTIKUM

Autor:Doc. dr Vladislav Miškovic

Recenzent:Prof. dr Milan Milosavljevi�

Izdava�:UNIVERZITET SINGIDUNUMBeograd, Danijelova 32

Za izdava�a:Prof. dr Milovan Staniši�

Tehni�ka obrada: Novak Njeguš

Dizajn korica:Aleksandar Mihajlovi�

Godina izdanja:2008.

Tiraž:300 primeraka

Štampa:�ugura - print, Beogradwww.cugura.rs

ISBN: 978-86-7912-086-1

III

PREDGOVOR

Ovaj praktikum je nastao na osnovu dosadašnjeg iskustva u realizaciji predmeta “Multimedija” na Fakultetu za poslovnu informatiku Univerzite-ta Singidunum u Beogradu.

Svaka tema je predstavljena malim teoretskim uvodom i skupom vežbi, koje su opisane kratkom speci� kacijom za kojom sledi detaljnije uputstvo za izvo�enje. Za neke teme se predlaže konsultovanje dodatne literature, kao i izrada samostalnih projekata. Reference na literaturu i Web lokacije za konkretne sadržaje date su u samom tekstu, a opšta literatura je navede-na na kraju pojedinih poglavlja i u spisku literature.

Pošto je jedan od ciljeva vežbi iz ovog predmeta ovladavanje osnovnim nivoom upotrebe više programskih alata neophodnih za kreiranje, obradu i produkciju razli�itih multimedijskh sadržaja (zvuk, slika, video, poslov-ne Web prezentacije), za svaki od neophodnih programskih alata daje se kratko uputstvo za osnovnu upotrebu. Ova uputstva ne mogu da zamene detaljna uputstva za rad, koja su naj�eš�e višestruko obimnija od celog praktikuma.

U realizaciji vežbi ravnopravno se upotrebljavaju komercijalni i ne-komercijalni (freeware, open source) programski alati. Komercijalni i (polu)profesionalni alati se koriste radi potpunije informisanosti i pravov-remene pripreme studenata za dalji rad i u�enje. Nekomercijalni alati se koriste kad god je to opravdano, a obavezno se navode kao alternativa, radi pore�enja i ve�e mogu�nosti izbora.

V

SADRŽAJ

1. OSNOVNI POJMOVI

1.1 MREŽNI ASPEKTI MEDIJA I MULTIMEDIJA ........................1Vežba 1.1.1 Ilustracija razli�itih vrsta multimedjskih sadržaja ...4Vežba 1.1.2 Ilustracija i demonstracija primene alata za kreiranje i prikaz multimedijskih sadržaja ..............8Vežba 1.1.3 Ilustracija poslovnih primena multimedije ..............8Samostalni rad .............................................................................8

2. OSNOVNE MULTIMEDIJSKE TEHNOLOGIJE

2.1 TEKST ........................................................................................ 9Vežba 2.1.1 Ilustracija psiholoških efekata upotrebe razli�itih fontova i veli�ina slova za razli�ite vrste teksta (�lanak, brošura, slajd) .............................................................. 13

2.2 ZVUK ........................................................................................ 20PREPOZNAVANJE GOVORA U KANCELARIJI: SISTEM MICROSOFT OFFICE ................................................... 22

Vežba 2.2.1 Unos teksta glasom ............................................... 25Vežba 2.2.2 Formatiranje teksta glasom ................................... 26Vežba 2.2.3 Kreiranje pro� la govornika .................................. 27Vežba 2.2.4 Sinteza govora na srpskom jeziku (ALFANUM) . 30Samostalni rad .......................................................................... 31

2.2.4 Kompresija zvuka ................................................................ 312.2.5 Alati za reprodukciju i obradu zvuka ................................... 322.2.5.1. Windows Media Player .................................................... 32

Vežba 2.2.5.1.1 Snimanje muzike sa CD, sa i bez gubitka kvaliteta ............................................. 35

2.2.5.2. Audacity ........................................................................... 39OSNOVNA UPOTREBA PROGRAMA AUDACITY ..................... 39

Vežba 2.2.5.2.1 Isecanje zvu�ne podloge i postepena promena nivoa zvuka ...................................... 43Vežba 2.2.5.2.2 Filtriranje šuma razli�itog porekla .................. 45

2.3 SLIKA ....................................................................................... 46

VI

OSNOVNA UPOTREBA PROGRAMA ADOBE PHOTOSHOP ................................................................. 52

Vežba 2.3.1: Pregled i promena atributa digitalne slike ........... 68Vežba 2.3.2: Konverzija formata i kompresija digitalnih slika u boji ........................................................... 71Vežba 2.3.3: Popravka (enhancement) digitalnih fotogra� ja ... 76Vežba 2.3.4: Izrada ukrasnih rasterskih gra� �kih elemenata za isticanje paragrafa teksta (bullets) .................. 77Vežba 2.3.5: Izrada malih ukrasnih rasterskih gra� �kih elemenata za gra� �ko predstavljanje hiperveza (bullets, buttons) .................................................. 79Vežba 2.3.6: Selekcija i razli�ita podešavanja – kreiranje vinjete ................................................... 82Vežba 2.3.7: Selekcija i primena � ltera na odre�ene delove slike - odvajanje detalja od jednoli�ne pozadine . 84Vežba 2.3.8: Kreiranje zaglavlja Web strane, koje služi kao pozadina za animirane reklame, na osnovu rasterskih fotogra� ja ............................................ 86Vežba 2.3.9: Jednostavna rasterska 2D animacija .................... 90

2.4 VIDEO ...................................................................................... 92OSNOVNA UPOTREBA PROGRAMA WINDOWS MOVIE MAKER 2 ................................................. 95Vežba 2.4.1: Kreiranje jednostavnog videa koriš�enjem stati�nih rasterskih slika (WMV) – Windows MovieMaker ...................................................... 104Vežba 2.4.2: Kreiranje jednostavnog videa koriš�enjem video klipova i teksta (WMV) – Windows MovieMaker ...................................................... 107Vežba 2.4.3: Kreiranje jednostavnog videa dodavanjem i sinhronizacijom zvuka (WMV) – Windows MovieMaker ...................................................... 112

2.5 VIRTUELNA STVARNOST .................................................. 116Vežba 2.5.1: Demonstracija jednostavne VR kreacije (Web) . 116Samostalni rad: Virtuelna realnost na � lmu (Tron) ............... 117

2.6 MULTIMEDIJSKE KOMUNIKACIJE ................................. 119Vežba 2.6.1: Kvalitet prenosa video signala u ra�unarskoj mreži .............................................. 119

VII

Vežba 2.6.2: Uticaj kompresije video signala na kvalitet reprodukcije ....................................................... 122

3. INTERNET I WEB TEHNOLOGIJE

3.1 NASTANAK INTERNETA .................................................... 123 Vežba 3.1.1 Primeri Web prezentacija .................................... 126

Vežba 3.1.2 Upoznavanje sa HTML ...................................... 131Samostalni rad ........................................................................ 132

4. OSNOVE WEB DIZAJNA

4.1 OSNOVNI PROGRAMSKI ALATI ....................................... 133UPOZNAVANJE SA PROGRAMOM MACROMEDIA DREAMWEAVER ........................................................................ 134

4.2 ANALIZA I PLANIRANJE .................................................... 1414.3 KREIRANJE WEB LOKACIJE ............................................. 1424.4 KREIRANJE WEB STRANICE ............................................ 143

Vežba 4.4.1 U�itavanje Web stranice ..................................... 143Vežba 4.4.2 Kreiranje li�ne stranice ...................................... 146Vežba 4.4.3 Analiza strukture Web stranice ........................... 150Vežba 4.4.4 Li�na stranica i sopstveni stil (CSS) .................. 154Vežba 4.4.5 Kreiranje Web lokacije - katalog proizvoda sa cenama ........................................................... 157Vežba 4.4.6 Primer kreiranja osnovne Web stranice modernog i funkcionalnog dizajna ..................... 162

4.5 DINAMI�KE WEB STRANICE ........................................... 168UVOD U JAVASCRIPT ................................................................ 169

Vežba 4.5.1 Javascript (klijent) – pozdrav u zavisnosti od vremena ......................................................... 197Vežba 4.5.2 Javascript (klijent) – boja pozadine stranice ...... 198Vežba 4.5.3 Javascript (klijent) – upravljanje interfejsom ..... 200Vežba 4.5.4 Javascript (klijent) – validacija forme (provera bar koda) .............................................. 203Vežba 4.5.5 Javascript (klijent) – valutni kalkulator .............. 205Vežba 4.5.6 Javascript (klijent) – animacija teksta ................ 207Vežba 4.5.7 Javascript (klijent) – animacija rasterske slike ... 208

VIII

Vežba 4.5.8 Primer kreiranja Web lokacije sa dinami�kim elementima u jeziku JavaScript (katalog �estitiki) ................................................ 210

OSNOVE WEB APLIKACIJA ...................................................... 223Vežba 4.5.9 Kreiranje Web aplikacije ‘katalog proizvoda’ (PHP) .................................................................. 230

4.6 OSNOVNI STANDARDI ....................................................... 235Vežba 4.6.1 Testiranje Web stranice na dostupnost (Dreamweaver) ................................................... 236Vežba 4.6.2 VisCheck - simulacija efekta splepila za boje u Web stranicama ............................................... 237

4.7 OSTALI PROGRAMSKI ALATI ........................................... 2404.7.1 Sistemi za upravljanje sadržajem .................................. 2404.7.2 AJAX ............................................................................. 2414.7.3 Alati za animacije i integraciju tehnologija ................... 242

5. POSLOVNE PRIMENE MULTIMEDIJE

5.1 POSLOVNE PREZENTACIJE ............................................... 243MICROSOFT POWER POINT .................................................... 244

5.1.1 Slide-show prezentacije ................................................ 249Vežba 5.1.1.1 Izrada poslovne slide-show prezentacije na zadanu temu (demonstracija i samostalni projekt na zadanu temu) .................................. 250Vežba 5.1.1.2 Konverzija PowerPoint slide-show prezentacije u HTML format i analiza koda ........................ 254Samostalni rad (PowerPoint) .................................................. 2585.1.2 Video prezentacije ......................................................... 258Vežba 5.1.2.1 Kreiranje poslovne multimedijske CD prezentacije (MPEG/WMV) – Windows MovieMaker .................................................... 2595.1.3 Web prezentacije ............................................................ 263Samostalni rad: Izrada poslovne prezentacije na zadanu temu (Web) ....................................... 263

5.2 VIDEOKONFERENCIJE ....................................................... 2655.2.1 Instalacija i podešavanje programa Microsoft NetMeeting .................................................................... 265

IX

Vežba 5.2.1 LAN videokonferencija – tekst .......................... 270Vežba 5.2.2 LAN videokonferencija – gra� ka ....................... 271Vežba 5.2.3 Samostalni rad - internet videokonferencija ....... 272

5.3 IMAGING ............................................................................... 272Vežba 5.3.1 Merenje površina metodom thresholding-a (medicina) .......................................................... 273

5.4 E-POSLOVANJE .................................................................... 276TELEFONSKI IMENIK NA WEB-U ................................. 276Vežba 5.4.1 Ilustracija komercijalnog Web portala: “Telekom Srbija”, bele strane ............................ 276PRIKAZ BEZANSKIH INFORMACIJA (TIKER) ............... 278Vežba 5.4.2 Integracija informacija na Webu: berzanski indeksi ................................................ 279

6. PRAVCI RAZVOJA MULTIMEDIJE

6.1 KOMUNIKACIJE .................................................................. 2856.1.1 VIRTUELNI SAGOVORNICI ..................................... 285Vežba 6.1.1.1 Primeri virtuelnih sagovornika ........................ 285

6.2 WEB I VEŠTA�KA INTELIGENCIJA ................................. 287WEB AGENTI ....................................................................... 288Vežba 6.2.1.1 Primer Web agenta za bibliografske preporuke .................................. 288

6.3 E-BUSINESS ......................................................................... 2946.3.1 e-brokeri ........................................................................ 294Samostalni rad: primer Web aplikacije namenjene podršci berzanskom poslovanju ................... 2946.3.2 e-trgovina ...................................................................... 294Samostalni rad: primer Web lokacije namenjene e-trgovini .. 294

LITERATURA .............................................................................. 295

DODACI ...................................................................................... 296AUDIO FORMATI ....................................................................... 297VIDEO FORMATI ........................................................................ 298STRUKTURA DVD MEDIJUMA ............................................... 299

1OSNOVNI POJMOVI

1. OSNOVNI POJMOVI

1.1 MREŽNI ASPEKTI MEDIJA I MULTIMEDIJA

Cilj

Da se kroz razgovor, ilustracije i demonstracije slušaoci upoznaju sa prednostima multimedijske komunikacije, posebno u tipi�nim po-slovnim primenama.

Uvod Termin multimedija je kovanica, nastala od re�i multi (mnogobrojan, lat-inski multus) i media (kanal ili sistem komunikacije, latinski medium, ali i informacija ili zabava).

Ozna�ava komunikaciju uz pomo� više posrednika istovremeno, što je karakteristika i neposredne ljudske komunikacije, koja je u osnovi audio-vizuelna, jer se obavlja ne samo putem govora, ve� i uz pomo� mimike i gestova, kojima se lakše do�aravaju emocije i smanjuje potreban obim govorne komunikacije.

Na polju informacija, multimedija zna�i više posrednika istovremeno izme�u izvora i odredišta informacije (“multiple intermediaries”), odnos-no višestrukost na�ina (“multiple means”) na koje se informacija �uva, prenosi, prikazuje ili preuzima.

Multimedijska komunikacija je svojstvo ljudske vrste: video komunikacija (gestovi i mimika) koristila se istovremeno sa zvu�nom komunikacijom, koja je u razvoju ljudske vrste evoluirala u govor.

Iako je ljudska komunikacija od nastanka ljudske vrste bila višestruka - izme�u dve individue ili više njih, kao dobro dokumentovani po�etak mul-timedijske komunikacije se �esto uzimaju praistorijski murali iz pe�ine Lasco (Caves of Lascaux) u Francuskoj, koji poti�u iz vremena od oko 15.000 godina pre naše ere.

2 MULTIMEDIJA

Smatra se da su ovi murali imali posebnu ulogu u socijalnoj komunikaciji praistorijskog �oveka.

Stanovnik ovih pe�ina je bio kromanjonski �ovek. Bio je inteligentan u savremenom smislu te re�i i imao je religiozni život. Izradio je prve pred-stave životinjskih � gura u rezonantnim udubljenjima pe�ine. U toku reli-gioznih rituala, ove životinjske predstave su svetlucale u mraku pe�ine i mirisale oštrim mirisima životinjske masti. Delovale su na više ljudskih �ula istovremeno.

Osim obi�nog sporazumevanja i religioznih rituala, �ovek je i druge so-cijalne potrebe zadovoljavao u multimedijskoj komunikaciji. Tako je i zabava od samog po�etka podrazumevala angažovanje više ljudskih �ula istovremeno, odnosno bila je multimedijalna.

Prva zapisana pesma verovatno je himna boginji Nikal, ženi boga meseca, prona�ena na glinenim tablicama nastalim oko 1.400 g.pne. Rekonstrui-sana je 1972 godine, nakon 15 godina istraživanja profesora asirologije Anne Kilmer (University of California). Tablice sadrže detaljno uputstvo za izvo�enje za peva�a sa harfom, kao i uputstvo za podešavanje harfe.Savremeni oblici multimedijske komunikacije u svrhu zabave su opera, balet i srodni scenski oblici, � lm, televizija i digitalna multimedija.

Zašto je više posrednika bolje nego jedan ?

Ilustrativan primer angažovanja više �ula istovremeno je vožnja automo-bila. Sedenje neke osobe na zadnjem sedištu ne angažuje dovoljno njena �ula, tako da je manja verovatno�a da �e zapamtiti pravi put do odredišta. Voza� se mnogo više angažuje na tom zadatku i zato se daleko bolje snala-zi u kretanju.

Istraživanja pokazuju da se uz pomo� zvu�ne (audio) stimulacije zapamti oko 20% sadržaja, uz audio-vizuelnu stimulaciju oko 30%, dok uz pomo� interaktivne multimedijske prezentacije procenat dostiže 60%.

Multimedijska prezentacija sadržaja pove�ava se sposobnost �oveka da primi nove informacije, odnosno pove�ava obim, kvalitet i brzinu u�enja.

Komunikacija �oveka i ra�unara

Pojavom pisma, tekstualna komunikacija je postala jedan od osnovnih na�ina komunikacije u modernoj civilizaciji. Tako je koncipirana i komu-nikacija �oveka s prvim ra�unarima.

3OSNOVNI POJMOVI

Vremenom je tekstualni na�in komunikacije postao neprakti�an i nedovol-jan u mnogim situacijama. Razvoj komercijalnih ra�unara opšte namene (posebno Apple i IBM PC) išao je u pravcu multimedijske komunikacije kroz razvoj relativno jeftinih dodataka za snimanje, prenos i simultanu reprodukciju slike i zvuka.

Odgovaraju�a programska podrška (operativni sistemi, gra� �ki interfejsi, softverski alati i razli�iti pomo�ni programi) nastaje istovremeno sa raz-vojem standarda za kreiranje, prenos i reprodukciju digitalizovanih multi-medijskih sadržaja i njihovu integraciju u druge sisteme i tehnologije.

Palo Alto Research Center (PARC) je bio istraživa�ki i razvojni centar kompanije Xerox u kome su sedamdesetih godina dvadesetog veka nastala mnoga dostignu�a moderne ra�unarske tehnologije: gra� �ki interfejs, per-sonalni ra�unar, laserski štampa�, klijent-server mreže i Ethernet.

Jedan od razvojnih projekata bio je i Dynabook: prenosni interaktivni per-sonalni ra�unar koji bi bio svima pristupa�an kao knjiga, stalno uklju�en u ra�unarsku mrežu, a omogu�avao bi korisniku prepoznavanje i sintezu teksta, glasa, videa, animacije i zvuka, što je uglavnom tehnološki real-izovano pojavom savremenih notebook ra�unara i razvojem Interneta (“Najbolji na�in da predvidite budu�nost je da je stvarate” govorio je Alan Kay, jedan od istraživa�a PARC-a, koji je zamislio ovakav personalni ra�unar budu�nosti).

Još uvek nije ostvarena osnovna zamisao projekta multimedijskog ra�unara: da bude pristupa�an kao knjiga, odnosno da ga svako poseduje.

Primena savremene digitalizovane multimedijske komunikacije je najizra-zitija na Internetu, npr. u poslovnim komunikacijama (e-mail), oglašavanju (advertising), predstavljanju � rmi i proizvoda (presentation), elekronskoj trgovini (e-commerce), elektronskom bankarstvu (e-banking) i telekonfer-encijama (teleconferencing). WorldWideWeb se može posmatrati kao mul-timedijski deo Interneta.

4 MULTIMEDIJA

Primeri primene digitalne multimedije

Vežba 1.1.1 Ilustracija razli�itih vrsta multimedjskih sadržaja

Podsetiti na svakodnevna iskustva u upotrebi digitalnih multimedijskih sadržaja (tekst, slika, zvuk, muzika, video)

1. Ilustracija upotrebe teksta�� vektorski fontovi u MS Of� ce-u (fontovi, veli�ina, kerning,

vertikalni tekst, simboli)

2. Ilustracija upotrebe digitalnih slika�� studentski radovi (obrada digitalnih fotogra� ja, pregled galerije

studentskih radova prethodnih generacija)�� imaging (primeri .jpg)

3. Ilustracija upotrebe videa�� lm (“Gladijator”, prvih 10 min)�� DICOM imaging (.dic)

4. Ilustracija upotrebe animacija, u razli�itim formatima�� rasterska animacija (animirani .gif)�� vektorska animacija (macromedia � ash, Sponge_BOB.swf)�� lmska animacija (animirani video .avi)�� virtuelna stvarnost (VR)

Web, virtuelna tura na http://www.waterspan.com/samples.html

Sledi podse�anje na svakodnevna iskustva u koriš�enju digitalnih multi-medijskih sadržaja.

1. ILUSTRACIJA UPOTREBE TEKSTA

Za svakodnevni rad na ra�unaru dovoljni su standardni vektorski fontovi u nekom od programa za obradu teksta ili tabela, npr. Microsoft Of� ce-u. Koristimo uobi�ajena pisma, stilove i veli�ine slova. Ponekad nam je potreban višekolonski i vertikalni tekst, kao i posebno formatiranje teksta (fontovi, veli�ina, kerning, vertikalni tekst, simboli, gra� ka).

Isti paragraf teksta može se složiti sa monogramom, koriš�enjem vektor-skih fontova...

5OSNOVNI POJMOVI

Z a svakodnevni rad na ra�unaru dovoljni su standardni vektorski fon-tovi u nekom od programa za obradu teksta ili tabela, npr. Microsoft Of� ce-u. Koristimo uobi�ajena pisma, stilove i veli�ine slova.

Ponekad nam je potreban višekolonski i vertikalni tekst, kao i posebno formatiranje teksta (fontovi, veli�ina, kerning, vertikalni tekst, simboli, gra� ka).

... ili se tekst može presložiti u više kolona, radi bolje �itljivosti:

Za svakodnevni rad na ra�unaru dovoljni su standardni vektor-ski fontovi u nekom od pro-grama za obradu teksta ili tabela, npr. Microsoft Of� ce-u. Koris-timo uobi�ajena pisma, stilove i

veli�ine slova. Ponekad nam je potreban višekolonski i vertikalni tekst, kao i posebno formatiranje teksta (fontovi, veli�ina, kerning, vertikalni tekst, simboli, gra� ka).

2. ILUSTRACIJA UPOTREBE DIGITALNIH SLIKA

Na posebnom folderu pripremljenom za ovu vežbu, pregledati galeriju stu-dentskih radova prethodnih generacija izra�enih na kolokvijumima.

Pomo�u sistemskog alata za pregled (preview) razgledati pripremljene ras-terske slike iz medicinske dijagnostike u razli�itim stepenima uve�anja (rentgenski snimci u formatu .jpg).

3. ILUSTRACIJA UPOTREBE VIDEA

Na primeru inserta iz igranog � lma ponoviti upotrebu standardnih sistem-skih alata za prikazivanje video materijala. (prvih 10 minuta � lma Gladi-jator).

Isti materijal zatim zajedni�ki pogledati u velikom formatu, s kvalitetnim zvukom dovoljne ja�ine.

U pripremljenom insertu, koji predstavlja pokušaj rekonstrukcije poznate bitke iz rimskog doba, koja se odigrava u praskozorje, vidi se upotreba više medija istovremeno s namerom da gledaocu stvori utisak prisustva na licu mesta: zvuk (neprekidna muzika u pozadini, kombinovana sa prirodnim zvucima), uvodni tekst, koji objašnjava istorijski kontekst i slika, snim-ljeni � lmski materijal sa potpunom scenogra� jom, kostimima i vizuelnim efektima.

6 MULTIMEDIJA

Upotreba multimedijskog video formata u medicinskoj dijagnostici ilus-truje se pregledom priloženih fajlova u formatu DICOM (su� ksi .dic,.dcm) pomo�u nekog od namenskih programa za pregled (npr. ezDicom).

4. ILUSTRACIJA UPOTREBE ANIMACIJA, U RAZLI�ITIM FORMATIMA

Na pripremljenom folderu sa rasterskim animacijama za ovu vežbu, uver-iti se u u karakteristike prikaza animirane rasterske slike (animirani .gif) u prozoru i njenog uklju�ivanja u MS Of� ce dokumente.

Aktivirati priložene vektorske animacije u formatu Macromedia Flash i uveriti se u karakteristike prikaza vektorke slike u prozoru i reprodukcije zvuka (npr. simpati�nu interaktivnu animaciju Sponge_BOB.swf).

7OSNOVNI POJMOVI

Na primeru � lmske animacije (promotivni video u formatu .mpg za legendarni animirani � lm Tron iz 1986. godine) ponoviti upotrebu stan-dardnih sistemskih alata za prikazivanje video materijala snimljenog u razli�itim formatima.

Za ilustraciju upotrebe tehnologija za stvaranje efekta virtuelne stvarnos-ti (VR), posetiti neku od lokacija na Web-u sa primerima, kao što je http://www.waterspan.com/samples.html i pregleati neku od virtuelnih tura.

Poslovna primena virtuelnih tura se može na�i na lokacijama koje se bave virtuelnim turizmom ili prodajom nekretnina, kao što je http://www.cir-clepix.com/.

8 MULTIMEDIJA

Vežba 1.1.2 Ilustracija i demonstracija primene alata za kreiranje i prikaz multimedijskih sadržaja

Identi� kacija programskih alata i tehnika za kreiranje multimedijalnih sadržaja koje su slušaoci do sada upoznali

1. Prikaz slike i videa (kratka demonstracija funkcionisanja ugra�enih alata Windows Preview, Windows Media Player, Internet Explorer)

2. Rad sa zvukom (kratka demonstracija Windows Sound Recorder)

3. Video editing (kratka demonstracija Windows Movie Maker, Pin-nacle Studio)

Samostalno pregledati priložene materijale pomo�u navedenih alata i tražiti pomo� i objašnjenja za eventualne nejasno�e.

Vežba 1.1.3 Ilustracija poslovnih primena multimedije

Identi� kacija poslovnih primena multimedije

1. Primer poslovne prezentacije (prikaz i komentar kvalitetnog promo-tivnog video spota, npr. “Mobtel”)

2. Primer multimedijskog DVD izdanja (kratka demonstracija interak-cije u izboru sadržaja DVD izdanja “Put oko sveta za 80 dana”)

Prikazati u velikom formatu, s kvalitetnim zvukom dovoljne ja�ine, pro-motivni video spot koji je koristila u promotivnioj kampanji kompanija “Mobtel”.

Interakciju multimedijskog DVD izdanja demonstrirati na pregledu i iz-boru sadržaja proizvoljnog � lmskog DVD izdanja (npr. “Put oko sveta za 80 dana”).

Samostalni rad

Prou�iti �lanak o rezultatima istraživanja instituta ITC koji kvantitativno vrednuje prednosti koriš�enja multimedije u nastavi (ITCStudy.pdf)

9OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE

2. OSNOVNE MULTIMEDIJSKE TEHNOLOGIJE

Namena ovog poglavlja je upoznavanje sa najvažnijim tehnologijama koje koristi savremena digitalna multimedija: tekstom, zvukom, slikom, vid-eom, virtuelnom realnoš�u i digitalnim komunikacijama.

2.1 TEKST

Cilj

Upoznavanje sa osnovnim pojmovima digitalnog prikaza i obrade teksta.

Uvod

Piktogra� i prvo pismo na glinenim tablicama nastali su u Mesopotamiji oko 5.000 godina p.n.e kao ekvivalent govora. Prvi zapisi služili su za ko-munikaciju uskog kruga upu�enih ljudi [1],[2].

Vrednost pisma kao ekvivalenta govora sa�uvala se do savremenog doba, kroz knjige, �asopise i druge pisane materijale. Osnovni na�in komuni-kacije na Internetu tako�e je tekst, a osnovni jezik Hypertext Markup Lan-guage (HTML).

Za uspešno koriš�enje teksta u poslovnim primenama, neophodno je pozna-vati osnovne pojmove iz oblasti digitalnog slaganja i stonog izdavaštva:

�� Pismo (Typeface) – porodica gra� �kih znakova razli�itih tipova, sti-lova i veli�ina (npr. Helvetica, Times, Courier).

�� Font – zbirka znakova iz neke porodice gra� �kih oblika odre�enog stila i veli�ine (npr. Times Italic 12pt). Neka svojstva fonta koja se mogu de� nisati u programima Microsoft Word i Adobe Photoshop vide se na slici.

10 MULTIMEDIJA

- stil – polucrno (boldface), kurziv (italic)

- veli�ina (size): štamparska jedinica mere veli�ine slova je point (1/72 deo in�a, približno 0,35mm), a meri se od vrha velikog slova (ascender) do najnižeg dela malih slova (descender), kao na slici:.

�� Rasterizacija (antialias)

Slovni znaci su vektorske tvorevine, ali se na kraju moraju prikazati na diskretnoj rešetki (rasteru) štampa�a ili ekrana monitora. Utisak i lepota prikaza zavise od na�ina rasterizacije.

Na slici je primer efekta obi�ne rasterizacije (not antialiased), koja ima vidljive nedostatke u maloj rezoluciji, koja je tipi�na za prikaz na monitoru ra�unara.

Popravljena rasterizacija (antialiased) daje mnogo �itljiviji i lepši rezultat za male rezolucije.


�� Kerning

Metrika služi za de� nisanje apsolutnih dimenzija elemenata teksta. Kerning de� niše me�usobni razmak parova znakova za proporcio-nalne fontove (kod kojih se širine pojedina�nih slova razlikuju), koji veoma uti�e na �itljivost i lepotu teksta.

Primeri nekih poznatijih fontova u veli�ini 28 pointa

Serifni fontovi

Sans-Serif fontovi

12 MULTIMEDIJA

Dekorativni i umetni�ki fontovi

�itanje je usko povezano s na�inom funkcionisanja �ula vida, odnosno procesom prepoznavanja oblika u ljudskom mozgu. Velika � eksibilnost ovog sistema omogu�ava �oveku da geometrijski razli�ite oblike pre-poznaje kao predstave jednog istog znaka, odnosno slova.Proces �itanja teksta izaziva pokrete o�nih jabu�ica, odnosno angažovanje i zamor o�nih miši�a prilikom pra�enja teksta, posebno kod sitnih slova i dugih redova. O�i se odmaraju prelaze�i preko praznog prostora, koji ujedno predstavlja i logi�ko odvajanje razli�itih sadržaja.Kao zaklju�ak, nekoliko dizajnerskih sugestija za izbor fontova prilikom izrade multimedijskih prezentacija, prema [2], str. 120-121:- za sitna slova koristiti naj�itljiviji raspoloživi font (ne dekorativni)- koristiti što manji broj razli�itih pisama u istom redu (razli�itost se može

posti�i i razli�itim veli�inama i stilovima)- prored izabrati tako da �itanje bude prijatno (suviše gusti redovi se teško

�itaju)- veli�inu fonta uskladiti s važnoš�u informacije koja se prenosi- koristite kerning, posebno u naslovima- za isticanje slova, koristiti razli�itu boju teksta, kao i pozadine- koristiti popravljenu rasterizaciju (antialiasing)- koristiti inicijale (monograme) za isticanje po�etka pasusa teksta, ako ih

procesor teksta podržava- ako se koristi centrirani tekst, treba se truditi da ima što manje redova


- za privla�enje pažnje koristiti gra� �ki izmenjen tekst (ispis po sferi, prstenu, talasasto, sa prelivima boja i sl.)

- koristiti razli�ite efekte sen�enja- za isticanje naslova koristiti prazan prostor (ispred i iza)- konsultovati i druga mišljenja za pravilan izbor fontova- za linkove u slajdovima i stranicama koristiti smislene nazive, a stil i boju

primenjivati dosledno u celoj prezentaciji (izbegavati dre�avo zelenu, crvenu ili ljubi�astu boju)

- u stranicama važan tekst rasporediti u gornju polovinu ekrana, jer samo 10-15% posetilaca prelistava neku stranicu nadole.

Osnovni principi upotrebe razli�itih vrsta fontova u dizajnu Web stranica mogu se na�i u [3] i [4].

Vežba 2.1.1 Ilustracija psiholoških efekata upotrebe razli�itih fontova i veli�ina slova za razli�ite vrste teksta (�lanak, brošura, slajd)

Ilustracija psiholoških efekata upotrebe razli�itih fontova i veli�ina slo-va za razli�ite vrste teksta (�lanak, brošura, slajd).

1. Pripremiti i pregledati �itljivost i izgled �lanka složenog upotrebom fontova Times New Roman (The Monotype Corporation) i Palatino Linotype (Adobe Systems), u veli�inama 8, 10 i 12.

2. Pripremiti i pregledati �itljivost i izgled brošure složene upotrebom klasi�nih (Times New Roman, Arial) i fontova posebne namene (Comic Sans MS (Microsoft), Mistral(Microsoft)).

3. Pripremiti i pregledati �itljivost i izgled slajda složenog upotre-bom serifnih (TimesNewRoman) i bezserifnih fontova (Arial, Verdana(Microsoft), Tahoma(Microsoft)) u veli�inama potrebnim za prikaz 10,15 i 30 redova teksta po slajdu.

14 MULTIMEDIJA

Ilustracija psiholoških efekata upotrebe razli�itih fontova i veli�ina slova za razli�ite vrste teksta (�lanak, brošura, slajd).

1. �itljivost i izgled �lanka složenog upotrebom fontova Times New Roman (The Monotype Corporation) i Palatino Linotype (Adobe Systems), u veli�inama 8, 10 i 12.

Times New Roman i Palatino Linotype u veli�ini 8 ta�aka (points),:


Times New Roman i Palatino Linotype u veli�ini 10 ta�aka (points):

16 MULTIMEDIJA

Times New Roman i Palatino Linotype u veli�ini 12 ta�aka (points):


2. �itljivost i izgled brošure složene upotrebom uobi�ajenih fontova u operativnom sistemu Windows (Times New Roman (The Monotype Corporation) i Arial (The Monotype Corporation)):

18 MULTIMEDIJA

Uz fontove posebne namene (Comic Sans MS i Mistral(Microsoft)):

3. �itljivost i izgled slajda složenog upotrebom serifnih (Times New Roman, Courier New) i bezserifnih fontova (Arial, Verdana) u veli�inama potrebnim za prikaz 10 i 20 redova teksta po slajdu.

Bezserifni fontovi Arial i Verdana, 10 redova teksta na slajdu:


Serifni fontovi Times New Roman i Courier, 10 redova teksta na slajdu:

Bezserifni fontovi Arial i Verdana, 20 redova teksta na slajdu:

Serifni fontovi Times New Roman i Courier, 20 redova teksta na slajdu:

20 MULTIMEDIJA

2.2 ZVUKZvuk nastaje usled varijacija pritiska vazduha, koje proizvode mehani�ke talase koji se prostiru u vazduhu brzinom 340 m/s.

Govor je sposobnost govornog aparata �oveka da oblikuje glasove i uha da razlikuje i prepoznaje izgovoreno.

Osnovna svojstva zvuka su intenzitet, visina i kvalitet reprodukcije.

Intenzitet [dB] se de� niše kao logaritam relativnog odnosa intenziteta zvu-ka I [W/m2] i intenziteta I0 najtišeg zvuka koga �ujemo:

I0 – donja granica �ujnosti, 10-12 W/m2

Visina [Hz] ili frekvencija zvuka je broj ponavljaju�ih promena zvu�nog signala u jedinici vremena.

Spektar zvuka je distribucija energije zvu�nog izvora u funkciji frekven-cije.

Kvalitet reprodukcije [%] predstavlja vernost reprodukovanog signala orig-inalnom i zavisi od prisustva i reprodukcije viših harmonijskih frekvencija (overtones).

Zvu�ni signal se obi�no pretvara u elektronski oblik pomo�u odgovaraju�eg ure�aja - mikrofona. Analogni mikrofonski signal se za ra�unarsku obradu mora pretvoriti u digitalni oblik.

Konverzija u digitalni oblik se vrši sampliranjem, uzimanjem uzorka sig-nala u odre�enim ta�kama. Najve�e rastojanje izme�u dva uzorka signala koje omogu�ava rekonstrukciju originalnog signala zavisi od svojstava analognog signala i ne sme biti ve�e od odre�ene grani�ne vrednosti (Ny-quist-ov interval).

Nyquist-Shannon1-ova teorema sampliranja traži da najmanja frekvencija sampliranja analognog signala (Nyquist-ova frekvencija) mora biti naj-manje dva puta ve�a od najviše frekvencije signala:

1 Harry Nyquist 1928. godine, dokazao Claude E. Shannon 1949.


Koja je najviša vrekvencija fmax zvu�nog signala? Na to se može odgovoriti tek nakon analize spektra analognog signala.

U praksi se kontinualni signali sastoje od frekvencija koje su iznad najve�e mogu�e frekvencija sampliranja. Prakti�no rešenje za uspešnu digitalizac-iju ovakvih signala je njihovo propuštanje kroz niskopropusne � ltere, koji eliminišu frekvencije koje su iznad polovine izabrane ili mogu�e frekven-cije sampliranja.

Digitalizacijom se prenosi samo deo informacija potreban za savršenu rekonstrukciju analognog signala prilikom reprodukcije na analognom ure�aju – zvu�niku.

Dodatnu grešku unosi proces kvantizacije, koja se vrši jer se nivo signala u odre�enoj ta�ki pamti sa kona�nom preciznoš�u. Pomo�u n bita se može zapamtiti samo 2n razli�itih diskretnih vrednosti. Kvantizacija je postupak zamene izmerene vrednosti signala oznakom intervala vrednosti unutar kojeg se nalazi.

Dobar kvaliteta zvuka se postiže visokom frekvencijom sampliranja, kvantizacijom sa ve�im brojem bita i stvaranjem prostornog utiska, na više na�ina. neki od poznatijih su:

- Stereo sistem snimanja i reprodukcije, koji koristi dva mikrofona za snimanje i dva pogodno postavljena zvu�nika za reprodukciju.

- Sistem Dolby ProLogic Home surround (4 kombinovana kanala, 4+1=5 zvu�nika) daje ograni�eni prostorni utisak za potrebe ku�ne zabave.

- Sistem Dolby AC-3 surround (6 nezavisnih kanala, 5+1=6 zvu�nika), daje puni 3D okružuju�i zvuk.

Postoje i drugi sistemi, koji su razvijeni za bioskopske dvorane.

22 MULTIMEDIJA

PREPOZNAVANJE GOVORA U KANCELARIJI: SISTEM MICROSOFT OFFICE

Prepoznavanje govora se može upotrebiti za diktiranje teksta u bilo kom programu iz sistema Microsoft Of� ce2, kao i za izbor stavki glasom iz menija, palete alatki, dijaloga i drugih elemenata gra� �kog interfejsa (task pane).

Prepoznavanje govora nije predvi�eno kao potpuna zamena, ve� kao do-puna normalnoj upotrebi programa uz pomo� miša ili tastature.

Pre upotrebe, prepoznavanje govora treba instalirati pomo�u menija Tools/Speech programa Microsoft Word ili ru�no. Nakon toga se može koristiti u drugim Of� ce programima pomo�u stavke u meniju Tools.

Preduslovi za koriš�enje prepoznavanja govora

Za upotrebu prepoznavanja govora potrebni su:

�� Kvalitetan mikrofon sa slušalicama za bliski govor (close-talk) sa kontrolom nivoa signala (gain adjustment), poželjno sa USB inter-fejsom.

�� Ra�unar sa procesorom brzine od najmanje 400 MHz

�� Najmanje 128 MB sistemske memorije

�� Windows 2000 with Service Pack 3 ili Windows XP

�� Microsoft Internet Explorer 5.01 ili noviji

Uvežbavanje sistema za prepoznavanje govora

Nakon instalacije, ta�nost prepoznavanja se može poboljšati uvežbavanjem sistema za prepoznavanje govora konkretnog govornika u trajanju od nekoliko minuta.

Nakon �itanja zadanog teksta naglas, “�arobnjak” za obu�avanje može da detektuje karakteristike na�ina govora pojedina�nog govornika i prikupi

2 Materijal je pripremljen na osnovu originalnog teksta iz sistema pomo�i Microsoft Word 2003. Prepoznavanje govora se može koristiti u verzijama Microsoft Of� ce sistema za engles-ki, kineski i japanski jezik (Simpli� ed Chinese, Traditional Chinese, English (U.S.), and Japanese).


uzorke govora koji mogu pomo�i ta�nijoj interpretaciji diktiranog teksta. Zajedno sa podešavanjem mikrofona, obuka traje oko 15 minuta.

Ta�nost prepoznavanja se može još poboljšati naknadnim uvežbavanjem sa dodatnim tekstom.

Diktiranje teksta i zadavanje komandi

Prepoznavanje govora se koristi klikom na taster (ili izgovorom naziva tastera) Language, kojim se vrši prelaz izme�u dva režima prepoznavanja: diktiranja i glasovnih komandi. Paleta Language se pojavljuje u gornjem desnom uglu ekrana.

Paleta Language sa skrivenim opisima tastera (Text Labels)

Napomena: Paleta Language inicijalno prikazuje tekstualna objašnjenja tastera iz palete nad kojim se zadrži pokaziva�, što se može sakriti.

Smanjenje broja promena režima - izme�u diktiranja (Dictation ) i glasovnih komandi (Voice Command ) se postiže ako se prvo završi diktiranje, zatim pregleda dokument i nakon toga izvrši formatiranje i ko-rekcija.

Diktiranje

U režimu diktiranja se može uneti sve što je mogu�e otkucati u nekom Of-� ce programu.

Procesiranje govora se ozna�ava plavom pozadinom teksta na ekranu (blue bar na slici). Kada se re� prepozna, tekst se prikaže na ekranu. Govor i pre-poznavanje se vrše paralelno.

prethodno prepoznat tekst plava pozadina (blue bar) kao indikator procesiranja govora

24 MULTIMEDIJA

Komandovanje glasom

U režimu glasovnih komandi (Voice Command) vrši se izbor izgov-aranjem naziva - stavke iz menija, dijaloga ili prozora sa opcijama (task pane).

Naprimer, za promenu fonta treba re�i “font” (za otvaranje dijaloga Font iz palete Formatting) i zatim izgovoriti samo ime fonta. Za formatiranje selektovanog teksta, dovoljno je izgovoriti “bold” ili “underline”.

Poruke u paleti Language

Prilikom diktiranja, u paleti Language se prikazuju poruke sistema. Nji-hovo pra�enje može da pobolša ta�nost prepoznavanja, npr. poruka “Too soft” zna�i da koristimo suviše mek izgovor teksta (slika).

Poruka u paleti Language

U režimu glasovnih komandi, prikazuje se naziv prepoznate izgovorene komande. Ako se izbor izvrši pomo�u miša ili tastature, u paleti se prika-zuje naziv komande koju je trebalo izgovoriti.2. Koriš�enje prepoznavanja govora

Radi uštede vremena, preporu�ljivo je prvo izdiktirati tekst, pregledati sadržaj i nakon toga izvršiti formatiranje i eventualne ispravke. To sman-juje broj promena režima rada (diktat/glasovne komande).

Procedura upotrebe prepoznavanja govora:

1. Postaviti mikrofon

Preporu�uje se kvalitetniji mikrofon u kombinaciji sa slušalicama, sa potenciometrom za podešavanje nivoa signala i USB interfejsom.

Postavlja se u smeru usana na udaljenosti oko 2 cm, malo sa strane. Ako se u toku govora pomeri, vratiti ga u prvobitni položaj.

2. Aktiviratiti program iz sistema Microsoft Of� ce

Ako se u toku rada aktivira sistem pomo�i (Help) ili se pojavi neka poruka na ekranu, prepoznavanje se nastavlja kada se ponovo klikne u prozor programa.


3. Ako nije uklju�en mikrofon, u paleti Language kliknuti na taster Mi-crophone

4. Po potrebi izabrati režim rada:

4.1 Diktiranje

Za unos izgovorenih re�i u tekst, u paleti Language, izabrati Dic-tation . Izbegavati upotrebu miša i tastature za vreme prepozn-avanja govora, jer to prekida proces prepoznavanja re�i.

4.2 Glasovne komande

Za izbor iz menija, palete, dijaloga i prozora (task pane), u paleti Language, izabrati Voice Command .

5. Na kraju rada isklju�iti mikrofon izborom iz palete Language tastera Microphone .

Vežba 2.2.1 Unos teksta glasom

Uklju�iti pam�enje prepoznatog teksta:

1. Izabrati iz menija Tools opciju Options i karticu Save

2. Pod Save options, ozna�iti Embed linguistic data i potvrditi sa OK.

3. U paleti Language izabrati Speech Tools , a zatim i Save Speech Data.

Isklju�iti pam�enje prepoznatog teksta:


2. Pod Save options, izbrisati Embed linguistic data i potvrditi sa OK.

3. U paleti Language izabrati Speech Tools

4. Poništiti izbor Save Speech Data.

26 MULTIMEDIJA

Uklju�iti pam�enje prepoznatog teksta:


2. Pod Save options, ozna�iti Embed linguistic data i potvrditi sa OK. Ova opcija se tako�e odnosi i na rukom pisani tekst.

3. U paleti Language izabrati Speech Tools , a zatim i Save Speech Data.

Isklju�iti pam�enje prepoznatog teksta:


6. Pod Save options, izbrisati Embed linguistic data i potvrditi sa OK. Ova opcija se tako�e odnosi i na rukom pisani tekst.

7. U paleti Language izabrati Speech Tools

8. Poništiti izbor Save Speech Data.

Napomena Ako se ne izabere �uvanje prepoznatog teksta, diktirani tekst se može preslušati sve dok se ne sa�uva dokument.

Vežba 2.2.2 Formatiranje teksta glasom

Izabrati proizvoljan tekst na ekranu programa Microsoft Word i formatirati ga na slede�i na�in:

1. Ako nije uklju�en mikrofon, u paleti Language kliknuti na taster Microphone

2. U paleti Language, izabrati Voice Command . Izabrati proizvoljan tekst na ekranu glasom.

3. Izgovoriti komandu za formatiranje.

Izabrati proizvoljan tekst na ekranu programa Microsoft Word i formatirati ga na slede�i na�in:

1. Ako nije uklju�en mikrofon, u paleti Language kliknuti na taster Mi-crophone

2. U paleti Language, izabrati Voice Command .


3. Izabrati proizvoljan tekst na ekranu glasom. Naprimer, izgovoriti:o “Select next word” o “Select last word” o “Select next line” o “Select last line” o “Select paragraph”

4. Izgovoriti komandu za formatiranje. Naprimer, izgovoriti:o “bold” o “underline”

ilio “font”o “font face” o “Tahoma”

5. Probati i druge mogu�nosti.

Vežba 2.2.3 Kreiranje pro� la govornika

Korisni�ki pro� li za prepoznavanje govora sadrže informacije koje pomažu ra�unaru u prepoznavanju govora ne samo odre�enog govornika, ve� i razli�itih uslova u kojima se prepoznavanje vrši (npr. razli�iti nivoi šuma, mikrofoni i sli�no).

Kreiranje novog pro� la:

1. Izabrati u Microsoft Windows XP Control Panel, zatim Sounds, Speech, and Audio Devices, pa Speech. U sistemu Windows 2000, u Control Panel aktivirati ikonu Speech.

2. Aktivirati karticu Speech Recognition.

3. U okviru Recognition Pro� les, izabrati New i slediti instrukcije

Izbor pro� la za aktuelnog govornika

1. U paleti Language izabrati Tools .

2. Ozna�iti korisnika u Current User i aktivirati pro� l.

28 MULTIMEDIJA

Korisni�ki pro� li za prepoznavanje govora sadrže informacije koje pomažu ra�unaru u prepoznavanju govora ne samo odre�enog govornika, ve� i razli�itih uslova u kojima se prepoznavanje vrši (npr. razli�iti nivoi šuma, mikrofoni i sli�no).

Kreiranje novog pro� la:

1. Izabrati u Microsoft Windows XP Control Panel, zatim Sounds, Speech, and Audio Devices, pa Speech. U sistemu Windows 2000, u Control Panel aktivirati ikonu Speech.

2. Aktivirati karticu Speech Recognition.

3. U okviru Recognition Pro� les, izabrati New

i slediti instrukcije:


U postupku obu�avanja, sistem zadaje razli�ite tekstove koje govornik treba da pro�ita prirodno, normalnim glasom.

Sistem sam saopštava kad je obu�avanje završeno.

30 MULTIMEDIJA

Po završetku obu�avanja, sistem je spreman za prepoznavanje izgov-orenog teksta novog govornika. Pro� l novog govornika treba zapamtiti pod pogodnim nazivom, koji �e se koristiti za pokretanje prepozna-vanja govora bez ponavljanja procesa obu�avanja.

Izbor pro� la za aktuelnog govornika vrši se na slede�i na�in:

1. U paleti Language izabrati Tools .

2. Ozna�iti korisnika u Current User i aktivirati pro� l.

Vežba 2.2.4 Sinteza govora na srpskom jeziku (ALFANUM)

Na Web lokaciji www.alfanum.co.yu aktivirati demonstraciju sinteze govora na srpskom jeziku.

Za ovu vežbu je potrebna Internet veza, mikrofon i zvu�nik ili slušalice. Izabrati iz menija 02. demonstracije, zatim parametre izgovora, tekst koji treba izgovoriti, jezik i govornika, a zatim pritisnuti taster Izgovori.


Softver Web lokacije za uneseni tekst kreira zvu�ni fajl, koji se reprodu-kuje u podrazumevaju�em programu za reprodukciju zvuka, npr. Windows Media Player-u.

Samostalni rad

Prou�iti informativni sadržaj Web lokacije www.alfanum.co.yu posve�ene prepoznavanju i sintezi govora na srpskom i srodnim jezicima.

Obratiti pažnju na demonstraciju prepoznavanja govora na srpskom jeziku, koja se realizuje pozivanjem telefonskog automata.

2.2.4 Kompresija zvuka

Kompresija zvuka je postupak smanjivanja veli�ine zapisa zvu�nog sig-nala radi bržeg prenosa i manjeg zauze�a memorije. Postoje metode kom-presije bez gubitaka (lossless) i sa gubicima (lossy).

Kompresija bez gubitaka se zasniva na uklanjanju redundancije u podaci-ma, bez ikakve njihove izmene, kao kod arhiviranja podataka programom WinZip.

Jedan od na�ina uklanjanja redundancije je kodiranje kvantizovanih vred-nosti nejednakim brojem bita, zavisno od frekvencije pojavljivanja u nizu vrednosti koje predstavljaju digitalizovani zvu�ni signal. Umesto da se sve vrednosti nakon kvantizacije predstave istim brojem bita, vrednosti koje se �eš�e pojavljuju kodiraju se manjim brojem bita, a one re�e ve�im. Takvim postupkom se obi�no postiže zna�ajno smanjenje ukupne dužine zapisa.

Kompresija sa gubicima se zasniva se na uklanjanju redundancije i manje bitnih podataka, koji nisu važni za samu percepciju zvuka.

Prenos govora bez kompresije je mogu� u digitalnoj telefoniji, jer je ve�ina govornog sadržaja je u opsegu od 4KHz. Teorema o sempliranju zahteva da se sempliranje vrši frekvencijom od najmanje 8KHz. Ako se svaki uzor-ak kvantizuje sa 8 bita, kanal za prenos digitalizovanog govora treba da ima kapacitet od 8 bita/uzorku x 8.000 uzoraka/s = 64.000 bita/s, što je kapacitet modernih ISDN linija.

32 MULTIMEDIJA

Standard kompresije u digitalnoj telefoniji se koristi u modemskoj komu-nikaciji (kompresija MNP4 ili MNP5, standard ECC CCITT V42 ili V42 bis).

Prenos muzi�kih sadržaja preko komunikacionih linija nije mogu� bez kompresije, jer se prenosi muzika u �ujnom opsegu od 20Hz do 22KHz, za koju se sampliranje vrši najmanje sa 44KHz.

Pošto se samplira stereo zvuk (simulira se ljudski sluh), sampliraju se is-tovremeno dva paralelna kanala. Ako se svaki uzorak kvantizuje sa 16 bita po kanalu, potreban je kapacitet prenosa od 32 bita/uzorku x 44000 uzora-ka/s = 1.408.000 bita/s, odnosno 1,4 Mb/s = 176 KB/s za prenos muzike.

Tzv. ‘Red book’ standard (popularni naziv dokumenta iz 1980. godine u kome je de� nisan standard audio kompakt diskova) de� niše format ECC CIRS (Cross Interleave Reed-Solomon) i data rate 176kB/s.

Program za kompresiju/dekompresiju se skra�eno naziva codec (compres-sor/decompressor). Poznatiji codec-i za kompresiju zvuka su PCM (pulse code modulation), GSM i MPEG Layer 3 (skra�eno MP3).

2.2.5 Alati za reprodukciju i obradu zvuka

Postoje profesionalni namenski alata za obradu zvuka (npr. SoundForge, WinLab), kao i brojni besplatni alati (npr. Audacity).

Za reprodukciju muzi�kih i video sadržaja za svakodnevne potrebe u op-erativnom sistemu Windows je predvi�en ugra�eni program Windows Me-dia Player. Može se koristiti i neki od besplatnih programa, kao što je npr. WinAmp.

2.2.5.1. Windows Media Player

Windows Media Player je jedan od alata za reprodukciju i presnimavanje zvu�nih (pre svega muzi�kih) i video sadržaja, koji je deo operativnog sistema Windows.


Slušanje muzike

Zvu�ni zapisi se mogu nalaziti na razli�itim folderima na disku. Dodaju se u biblioteku funkcijom Add to Library i razvrstavaju prema raspoloživim informacijama na samom fajlu po autorima, izvo�a�ima, albumu, žanru i sl.

Reprodukcija se pokre�e i zaustavlja uo�ljivim komandnim tasterima u donjem delu prozora, a nivo reprodukcije zvuka animiranim kliznim po-tenciometrom.

Prikazuju se i osnovni podaci o (zvu�nom) materijalu i statusu programa.

34 MULTIMEDIJA

Reprodukcija se može dodatno podešavati koriš�enjem gra� �kog ekvi-lajzera.

Windows Media Player je složen program, koji može da reprodukuje mul-timedijske sadržaje u razli�itim režimima rada, od lokalnih sadržaja na disku, CD i DVD do pristupa Internet lokacijama koje emituju radio pro-gram (streaming radio).

Osim reprodukcije audio (i video) sadržaja, može da se koristi za kon-verziju zapisa, npr. sa muzi�kog CD u neki od digitalnih formata, MPEG Layer 3 (.mp3) i više varijanti Windows Media Audio (.wma).


Vežba 2.2.5.1.1 Snimanje muzike sa CD, sa i bez gubitka kvaliteta

1. Snimanje muzike sa CD (funkcija rip)

2. Snimanje muzike na CD (funkcija burn)

Svi ozna�eni zapisi �e se konvertovati na izabrani folder u izabranom for-matu. Ovi parametri se postavljaju u dijalogu Tools/Options:

1. Snimanje muzike sa CD (funkcija Rip)

Funkcija Rip omogu�ava konverziju formata zapisa muzi�kog CD u neki od komprimovanih digitalinih formata (mp3 ili wma).

36 MULTIMEDIJA

Nakon ozna�avanja kompozicija koje treba konvertovati, konverzija se pokre�e klikom na taster Rip Music.

Pokre�e se dijalog, koji se odnosi na (1) na�in zaštite muzi�kih sadržaja u novom formatu i (2) potvrdu ili promenu formata i parametara kvalite-ta konverzije (sa gubitkom ili bez gubitka kvaliteta u odnosu na origi-nalni mizi�ki CD).


Izborom promene parametara formata konverzije, može se de� nisati konverzija bez gubitaka originalnog kvaliteta muzi�kog CD ili ponovo podesiti odnos kvaliteta i veli�ina zapisa.

Trajanje konverzije zavisi od procesorske snage ra�unara i dužine za-pisa.

38 MULTIMEDIJA

2. Snimanje muzike na CD (funkcija Burn)

Ozna�eni sadržaji (fajlovi u formatima wma, wav ili mp3) mogu se snimiti na CD u istom formatu ili formatu muzi�kog CD.


2.2.5.2. AUDACITYProgram Audacity3 je editor zvuka otvorenog koda (može se preuzeti sa lokacije http://audacity.sourceforge.net). Služi za editovanje (direktno ili indirektno) zvu�nih zapisa u formatima wav, aiff, mp3 i Ogg Vorbis. Sasvim je dovoljan za izvo�enje predvi�enih vežbi, koje ilustruju os-novne potrebe obrade digitalizovanih zvu�nih materijala.

OSNOVNA UPOTREBA PROGRAMA AUDACITY

Namena ovog uputstva je upoznavanje studenata sa osnovnim funkci-jama jednog predstavnika programa za obradu zvuka i da opiše njegovu upotrebu u jednostavnim zadacima montaže i obrade zvuka, dovoljnim za realizaciju vežbi (snimanje, izdvajanje, kombinovanje, podešavanje nivoa, � ltriranje i izvoz).

Na slici je izgled radne površine ekrana prilikom montaže audio signala. U gornjem delu radne površine su raspore�eni glavni meni, upravlja�ki tasteri i pokaziva�i nivoa signala. Na radnoj površini se još vidi poseban prozor sa gra� �kim prikazom audio signala koji se obra�uje.

3 eng. drskost, hrabrost, odvažnost

40 MULTIMEDIJA

1. UPRAVLJA�KI TASTERI

Upravlja�ki tasteri se nalaze u gornjem levom uglu radne površine pro-grama.

Prvi levi upravlja�ki taster (Selection Tool) služi za selekciju segmenta signala. Taster ispod njega (Zoom Tool) služi za uve�anje/umanjenje pri-kaza signala na vremenskoj skali. Ostali tasteri s leve strane omogu�avaju detaljni pregled signala, izdvajanje, kombinovanje i promenu tempa.

Okrugli upravlja�ki tasteri služe za upravljanje reprodukcijom na uobi�ajeni na�in. Npr., taster sa truglastim simbolom pokre�e reprodukciju, taster sa oruglim simbolom aktivira snimanje zvuka, a taster sa �etvrtastim simbolom prekida snimanje ili reprodukciju.

Osnovni mikser zvuka

Pokaziva�i nivoa reprodukcije signala (levi i desni kanala stereo signala) i nivoa signala prilikom snimanja (tako�e za dva stereo kanala) nalaze se u gornjem desnom uglu:

Jednostavni mikser zvuka realizovan je kao na slici - levi kliza� upravlja nivoom reprodukcije zvuka, a desni nivoom snimanja zvuka iz izvora koji se može izabrati na desnoj strani.

Montaža zvuka

Tasteri za montažu/ure�ivanje (Edit Toolbar) omogu�avaju operacije is-ecanja (Cut), kopiranja (Copy), umetanja (Past) i brisanja ostatka audio signala (Trim Outside), kao i operacije Undo/Redo, uve�anje/umanjenje prikaza - uobi�ajeno (Zoom In/Zoom Out) i na veli�inu prozora za selek-tovani signal ili kompletan projekt (Fit Selection/Fit Project).


Sve operecije se izvršavaju upotrebom miša u prozoru gra� �kog prikaza signala.

Gra� �ki prikaz zvu�nog signala

Na gra� �kom prikazu se vidi promena amplitude u vremenu svih zvu�nih signala koji su uvezeni u projekt. Svaki zvu�ni signal projekta se prikazuje u zasebnom prozoru (stereo signal sa dva povezana kanala) �ijim zatvaran-jem se signal uklanja iz projekta.

2. UPRAVLJANJE FAJLOVIMA

Program svaku obradu tretira kao projekt, koji se može sa�uvati kao fajl u internom formatu programa (Audacity Project, .aup). Zvu�ni zapisi se uvoze u projekt, a rezultat obrade se izvozi u neki od raspoložvih formata audio zapisa (.wav, .aif, .au, .mp3, .ogg, .mid).

Za izvoz u MP3 format, treba prethodno instalirati priloženi programski dodatak (Lame MP3 Encoder).

Snimanje glasa

Snimanje glasa pomo�u mikrofona zapo�inje izborom mikrofona kao iz-vora zvuka na mikseru. Nivo zvuka se podešava eksperimentalno pomo�u kliza�a na mikseru, konsultuju�i pokaziva� nivoa snimanja zvuka.

Zatim se aktivira crveni taster za snimanje, koje se prekida pritiskom na taster za zaustavljanje.

42 MULTIMEDIJA

Uvoz zvu�nih fajlova

Fajl sa zvu�nim zapisom se izabere pomo�u standardnog dijaloga iz me-nija Project/ Import Audio, nakon �ega se otvara novi prozor na radnoj površini s gra� �kim prikazom uvezenog zvu�nog signala.

Zvuk sa audio diskova se prethodno mora konvertovati u neki od predvi�enih formata, npr. pomo�u Windows Media Player-a.

3. MONTAŽA ZVUKA

Montaža se sastoji u izboru segmenata signala i izvršenju operacija nad iz-abranim segmentima (brisanje,dodavanje, kombinovanje, promena atribu-ta i sl.). Svaka promena se može poništiti, sve do snimanja projekta.

Selekcija

Selekcija dela zvu�nog zapisa se vrši na uobi�ajen ma�in: uz aktiviran taster za selekciju, klikne se na ta�ku u prozoru signala (po�etak selekcije) i, ne drže�i pritisnut levi taster miša, prevu�e mišem do kraja selekcije, nakon �ega se pusti levi taster.

Selektovani deo se može preslušati pomo�u tastera za reprodukciju.

Granice selekcije se mogu menjati tako što se miš zadrži na kraju selek-cije, sve dok se ne pojavi kursor u obliku prsta, nakon �ega se klikne na granicu selekcije i, uz pritisnut taster miša, koriguje granica selekcije.

Isti efekt se postiže postavljanjem kursora na neku ta�ku signala (jedan klik) i izborom odgovaraju�e komande (Edit/Select/ Start to Cursor ili Edit/Select/ Cursor to End).

Montaža (ure�ivanje)

Brisanje se vrši izborom Edit / Delete ili pritiskom na taster Del. Za is-ecanje se koristi Edit / Cut, za dodavanje Edit / Paste, a za postepeno poja�avanje ili utišavanje zvuka na standardni na�in Effects/Fade In ili Effects/Fade Out.

Preciznije upravljanje nivoom reprodukcije signala se vrši de� nisanjem posebne krive za nivo reprodukcije zvuka koriš�enjem upravlja�kog tast-era (Envelope Tool).


4. IZVOZ-SNIMANJE ZVUKASnimanje obra�enog zvu�nog materijala u nekom od uobi�ajenih formata zapisa vrši se operacijom izvoza. Dobar izbor je upotreba standardnog for-mata .mp3, koji dozvoljava visok stepen kompresije uz prihvatljiv kvalitet reprodukcije. Pomo�u Edit / Preferences... pod File formats / MP3 Ex-port Setup treba postaviti propusni opseg (Bit rate) za �uvanje muzike najmanje na 128Kbps, dok je za snimanje glasa dovoljno 32Kbps.

Odgovaraju�i parametri se postavljaju i za preciznost nekomprimovanog .wav formata (broj bita), kao i parametar Quality (0..10) za format .ogg (Ogg Vorbis).

5. FILTRIRANJE ZVUKA

Razli�ite mogu�nosti složenije obrade obrade zvuka postoje u meniju Ef-fects, od kojih �e se na vežbama koristiti samo � lter za uklanjanje šuma (Effects/Noise Removal � lter).

Vežba 2.2.5.2.1 Isecanje zvu�ne podloge i postepena promena nivoa zvuka

1. Izdvajanje dela muzi�kog materijala iz MP3 sekvence

2. Priprema zvu�nog kanala za prezentaciju, animaciju ili video sekvencu

�� podešavanje nivoa signala na vremenskoj skali (postepenost)

1. Izdvajanje dela muzi�kog materijala iz MP3 sekvence

Komandom File/Open, otvoriti fajl Kuguars - Dejo.mp3. Na radnoj površini se pojavljuje prikaz izgleda signala svakog od stereo kanala na za�edni�koj vremenskoj skali (slika).

44 MULTIMEDIJA

2. Priprema zvu�nog kanala za prezentaciju, animaciju ili video sekvencu (podešavanje postepenosti nivoa signala na vremenskoj skali).

Selektovati deo signala �iji se nivo zvuka menja, aktivirati Envelope Tool i pokretima miša, pomo�u kontrolnih ta�ki, podesiti krivu promene nivoa zvuka u vremenu (rezultat se vidi na slici).

Izmene se za upotrebu u drugim programima sa�uvaju na isti ili novi fajl pomo�u neke od komadi Export As... ili Export Selection As... (konkretna komanda zavisi od traženog formata).


Vežba 2.2.5.2.2 Filtriranje šuma razli�itog porekla

1. Zašumljena zvu�na sekvenca sa pozadinskim šumom (brum)

2. Upotreba � ltera za uklanjanje pozadinskog šuma.

1. Zašumljena zvu�na sekvenca sa pozadinskim šumom (brum, hum)

2. Upotreba � ltera za uklanjanje pozadinskog šuma

Selektovati deo snimka, gde osim šuma nema drugog sadržaja (npr. na po�etku snimka).

Izabrati iz menija Effects/Noise Removal, a zatim opciju Get Noise Pro� le.

Nakon toga selektovati ceo zapis i izabrati Remove Noise. Deo signala se uklanja zajedno sa šumom, što prouzrokuje izobli�enja originalnog signala.

Ocena rezultata � ltriranja je subjektivna i zavisi od odnosa nivoa sig-nala i šuma. Potrebno je proveriti za više razli�itih položaja potencio-metra, sve dok se ne postigne zadovoljavaju�i (ili najmanje loš) rezul-tat.

46 MULTIMEDIJA

2.3 SLIKA

Cilj

Ovladavanje osnovnim znanjima o obradi rasterskih slika za poslovne primene i prakti�no uvežbavanje upotrebe osnovnih komandi, alata i tehnika izabranog editora rasterskih slika u tipi�nim poslovnim primenama.

VIZUELNA PERCEPCIJA

�ovek svet oko sebe doživljava pre svega kroz �ulo vida, koje angažuje veliki deo kore velikog mozga.

Slika se dobija kao efekt projekcije emitovane ili odbijene svetlosti na mrežnja�u ljudskog oka. Stvara se signal, koji preko o�nog nerva dolazi u koru velikog mozga i formira sliku.

Mrežnja�a (retina) se sastoji od štapi�a (receptori crno/belog za no�ni vid) i �epi�a (receptori za boje).

Postoje tri vrste �epi�a, razli�ite osetljivosti na odre�ene delove vidljivog spektra, pojednostavljeno na crveni, zeleni i plavi (RGB model vida). �epi�i odgovaraju razli�itim tre�inama vidljivog spektra, šalju signale sva-kom od tri suprotna diskriminatora koji odgovaraju promenom frekvencije signala koji šalju mozgu

Žuta mrlja (fovea) je centralni deo mrežnja�e, koji omogu�ava vid visoke rezolucije (npr. razlikovanje do 2 mm na rastojanju od 10 m).

Percepciju boje objašnjava više teorija:

- Teorija komponenti (component color theory,Young-Helmholtz), koja smatra da se boja detektuje posebnim receptorima za tri osnovne boje (crvena, zelena, plava).

- Teorija suprotnih boja (opponent color theory, Ewald Hering), koja tvrdi da se boja detektuje pomo�u tri tipa diskriminatora boje (plava/žuta, crvena/zelena, crna/bela).


- Teorija suprotnih procesa (opponent-process theory) objedinjava pre-thodne uvode�i dve faze: (1) u prvoj �epi�i, koji odgovaraju razli�itim tre�inama vidljivog spektra, šalju signale ka tri suprotna diskriminato-ra i (2) u drugoj, diskriminatori menjaju frekvenciju signala, koji zatim šalju kori velikog mozga.

Iako postoji apsolutni prag osvetljenosti, percepcija osvetljenosti se menja u vremenu, odnosno postoji fenomen adaptacije oka. Na percepciju os-vetljenosti uti�e i lokalna pozadina, odnosno osvetljenost okoline ta�ke koju posmatramo.

Osvetljenje i mesto u vidnom polju uti�u i na oštrinu vida, koja brzo opada ka periferiji vidnog polja. Adaptacija izaziva razli�ite iluzije kod percep-cije kontura i drugih jednostavnih uzoraka.

Kolor modeli

Svetlost je elektromagnetno zra�enje, �ija je osnovna karakteristika frekvencija, odnosno talasna dužina. Talasna dužina vidljive svetlosti je podru�je od 780nm (crvena) do 380nm (ljubi�asta boja).

780 nm 380 nm

Zbog složenosti oka i percepcije boje, za opis boje nije dovoljna samo frekvencija svetlosti koja pada na mrežnja�u. Još u 19. veku psiholozi su boju de� nisali kao kombinaciju obojenosti (hue), zasi�enja (saturation) i osvetljenosti (brightness). Npr. purpur je nezasi�ena crvena boja.

Ra�unarski kolor modeli služe za de� nisanje boje prilikom formiranja i prikaza digitalne slike na razli�itim ure�ajima.

Najpoznatiji kolor modeli su:

- RGB (red, green, blue) predstavlja boju kao mešavinu tri osnovne boje (red, green, blue), odnosno intenzitet svetlosti komponentnih frekvenci-ja. Poklapa se sa mogu�nostima hardvera katodne cevi sa tri boje ta�kica gusto raspore�enih po površini, koje svetle kada ih pogodi snop elek-trona elektronskog topa.

U RGB modelu, crna boja se tretira kao odsustvo bilo kakve kompo-nentne boje, a bela kao suma maksimalnog intenziteta svih komponen-ti.

48 MULTIMEDIJA

- HSB (hue, saturation, brightness) više odgovara percepciji boje u ljud-skom mozgu, sa obojenoš�u (hue) kao spektralnom bojom, zasi�enjem (saturation) kao koli�inom obojenosti koji se dodaje osvetljenosti i osvetljenoš�u (brightness) kao intenzitetom svetla. Drugi naziv je HSL (hue, saturation, lightness).

- HSV (hue, saturation, value) model je sli�an HSB, ali se komponente daju pomo�u uglova i procentualno - blue je 0 i 360 stepeni.

- CMYK (cyan, magenta, yellow, black) je model koji se koristi u štamparstvu. Predstavlja subtraktivan model, u kome se boja de� niše kao razlika komponentnih boja mastila i boje papira.

DIGITALNA SLIKA

Svetlost koju oko detektuje može biti emitovana ili odbijena od predmeta koji posmatramo. Modeliranje vida polazi od shvatanja analogne slike kao ravnog objekta �ija boja (osvetljenje) varira od ta�ke do ta�ke.

Digitalna slika se formira procesom digitalizacije kontinualne slike ili se kreira vešta�ki. Digitalne slike su: bit-mape, nalik fotogra� ji, koje se dobi-jaju se postupkom digitalizacije kontinualne slike (razli�ite kamere i ske-neri); vektorski crtane slike i sintetizovane 3D kreacije, koje se postupkom renderinga pretvaraju u rasterske fotorealisti�ne slike.

Rasterska slika ili bit-mapa je matrica koja opisuje individualne ta�ke, naj-manje elemente digitalne slike (point ili picture element/pixel/pel).

Za prikaz crno-belih slika je dovoljan samo jedan bit po pixel-u (oznaka crno/belo). Sa n bita se može predstaviti 2n razli�itih boja pixel-a. Upotre-bom 8 bita može se predstaviti 256 boja, sa 16 bita 64K boja, dok je 24 bita dovoljno za predstavljanje miliona razli�itih boja (16.777.216).

Više boja daje realisti�niju sliku, ali traži više memorije i vremena (pro-cesorske snage) za obradu.

Formati GIF (Graphics Interchange Format) i PNG (Portable network Graphics) koriste 8-bitnu tabelu boja (color table) kojom se de� niše paleta od 256 razli�itih boja.

Format JPEG ima preciznost prikaza boje (color depth) od 16 bita po pix-el-u, a format PSD (Photoshop Document) �uva 24 ili više bita po jednom pixel-u.


Softver može izvšiti konverziju zapisa bit-mapirane slike (npr. iz 24-bit-nog u 8-bitni zapis).

Rezolucija rasterske slike su dimenzije matrice pixel-a. Prostorna rezolu-cija se izražava kao broj ta�aka po jedinici dužine: dpi (dots-per-inch) ili ppi (pixels-per-inch), a povezana je s prostornom frekvencijom sampli-ranja.

DIGITALIZACIJA SLIKE

Analogni signal se za ra�unarsku obradu mora digitalizovati. Konver-zija u digitalni oblik se vrši sampliranjem, uzimanjem uzorka signala u odre�enim ta�kama.

Najve�e rastojanje izme�u dva uzorka signala koje omogu�ava rekonstruk-ciju originalnog signala zavisi od svojstava analognog signala i ne sme biti ve�e od odre�ene grani�ne vrednosti (Nyquist-ov interval).

Ranije pomenuta Nyquist-Shannon-ova teorema sampliranja traži da naj-manja frekvencija sampliranja (Nyquist-ova frekvencija) mora biti naj-manje dva puta ve�a od najviše frekvencije analognog signala.

Koja je najviša frekvencija fmax analogne slike?

U praksi se kontinualni signali sastoje od frekvencija koje su iznad najve�e mogu�e frekvencija sampliranja. Prakti�no rešenje za uspešnu digitalizac-iju ovakvih signala je njihovo propuštanje kroz niskopropusne � ltere, koji eliminišu frekvencije koje su iznad polovine izabrane ili mogu�e frekven-cije sampliranja.

Nivo signala u odre�enoj ta�ki pamti se u ra�unaru sa kona�nom preciznoš�u (n bita, 2n diskretnih vrednosti).

Kao i prilikom digitalizacije zvuka, vrši se kvantizacija, koja predstavlja postupak zamene izmerene vrednosti oznakom koja odgovara nekom od unapred de� nisanih intervala vrednosti.

KOMPRESIJA RASTERSKIH SLIKA

Kompresija je postupak sažimanja veli�ine zapisa digitalne slike, koja može biti veoma velika za visoke rezolicije i veliku dubinu boje.

Kao i za zvu�ne zapise, koriste se metode kompresije bez gubitaka (loss-less) i sa gubicima (lossy):

50 MULTIMEDIJA

- Kompresija slike bez gubitaka zasniva se na uklanjanju redundancije u podacima, odnosno pikselima, bez ikakve njihove izmene.

- Kompresija slike sa gubicima se zasniva na uklanjanju redundancije i podataka, koji su manje važni za vizualnu percepciju.

Tehnikama kompresije sa gubicima dobijaju se mnogo kra�i zapisi, od kojih se nakon dekompresije dobijaju slike statisti�ki veoma razli�ite od originala, ali na takav na�in da ljudsko oko tu degradaciju gotovo ne prime�uje.

Program za kompresiju se �esto naziva codec (compressor/ decompres-sor). GIF codec koristi kompresiju bez gubitaka i uklanja redundanciju u podacima patentiranim algoritmom LZW (Lempel/Ziv/Welch).

JPEG standard koristi druga�iji pristup: pošto je oko mnogo osetljivije na detalje oblika, koji se predstavljaju osvetljenoš�u, nego na informaciju o boji. Zbog toga vrši odvojenu kompresiju informacije o boji (chromi-nance) i osvetljenosti (luminance).

Standard GIF

Standard GIF bolje komprimuje velike jednobojne površine i umereno sitne detalje, a JPG fotogra� je u punom koloru .

Ograni�enje standarda GIF je 8-bitna preciznost prikaza boje, koja doz-voljava koriš�enje samo 256 boja istovremeno. Ovo nije tako veliko ograni�enje, pošto nisu u pitanju unapred odre�enje boje, ve� se potrebne boje biraju iz mnogo ve�e palete.

Kompresija bez gubitaka se vrši patentiranim algoritmom LZW (Lempel/Ziv/Welch), koji prilikom �itanja formira re�nik sekvenci simbola (kodova boja), a zatim kodira prvo najduže sekvence simbola iz re�nika kra�im kodovima, a za one retke koristi duže.

Pogodan je za vešta�ki formirane slike koje imaju ve�e površine iste boje.

Prošireni standard GIF89a omogu�ava još upravljanje providniš�u slike, preplitanjem i animacijom. Providnost boja se de� niše pomo�u indeksa providnosti, kroz koji se vidi pozadina.

Preplitanje ubrzava prikaz u niskoj rezoluciji, uz pove�anje dužine zapisa oko 10%.


Neki stariji programi ne podržavaju prošireni standard, ve� samo GIF87a (npr. PowerPoint97).

Standard JPEG

JPEG vrši odvojenu kompresiju informacije o boji (chrominance) i os-vetljenosti (luminance), pošto je oko mnogo osetljivije na detalje oblika, koji se predstavljaju osvetljenoš�u, nego na informaciju o boji. Kompre-sija informacija o boji se vrši u ve�oj meri i s gubicima, pa slike u boji imaju ve�i stepen kompresije nego monohromatske.

Standard JPEG je veoma složen standard kompresije sa više razli�itih režima rada:- osnovni: sa gubicima, sekvencijalan, koristi DCT (Discrete Cosine

Transformation);- prošireni režim sa gubicima;- režim bez gubitaka (lossless mode);- hijerarhijski režim (hierarchical mode).

Pogodan je za slike složenije strukture i digitalizovane fotogra� je.

Vektorski crtana slika

Vektorski crtana slika se kreira pomo�u geometrijskih objekata, kao što su linije, pravougaonici, ovali, poligoni, koriš�enjem matemati�kih formula.

Npr., RECT 0,0,300,200,RED,BLUE zna�i (u Dekatrovom koordinatnom sistemu):

“Nacrtaj pravouganik po�evši od 0,0 (gornji levi ugao ekrana) idu�i 300 pixela horizontalno udesno i 200 pixela prema dole, koriste�i CRVENU boju za ivice i PLAVU boju za popunu.”

Obi�no zauzima manje memorije nego bit-mape.

Programi za obradu nepokretnih rasterskih slika (bit mapa) vektorske crteže konvertuju u bitmape postupkom rasterizacije (Adobe Photoshop to radi automatski).

Programi za obradu vektorkih slika (razni programi za vektorsko crtanje, npr. Adobe Ilustrator, Corel DRAW i MS Draw) konvertuju bit-mape u vektorske slike (u stvari, formule) postupkom vektorizacije (npr. “pra�enje oblika”, autotracing ili Trace BitMap).

52 MULTIMEDIJA

Rezultati konverzije se �uvaju u fajlovima odgovaraju�eg tipa, .GIF (Graphics Interchange Format), .PNG (Portable Network Graphics), .JPG (Joint Photographic Experts Group), .TIF (Tagged Image File Format), BMP (Windows Bitmap), .PCX i .PSD (Photoshop Document), kao i for-mat .PICT na Apple sistemima.

Poznatiji vektorski formati su .DWG (AutoCad Drawing), .AI (Adobe Il-lustrator), EPS (Enhanced PostScript), WMF (Windows MetaFile) i .CDR (Corel Draw).

OSNOVNA UPOTREBA PROGRAMA ADOBE PHOTOSHOP

1. Uvod2. Rad sa fajlovima (File/New-Open-Save)3. Osnovna paleta alatki (selekcija, zoom, izbor boje, bojenje, pozadina)4. Osnovne komande za obradu slike (Image)5. Slojevi i tekstualni efekti (tekst)6. Filteri

1. UVOD

Ve�ina rasterskih slika, bez obzira na na�in nastanka (skeniranje, digital-na fotogra� ja, hvatanje sadržaja ekrana) zahteva neku vrstu obrade pre upotrebe. To može biti obi�no prilago�avanje digitalnog formata (isecanje, promena kolor modela), retuširanje radi poboljšanja izgleda ili uklanjanja nedostataka, komponovanje slike iz više izvora, kao i primena posebnih � ltera radi postizanja posebnih vizuelnih efekata.

Adobe Photoshop je program za obradu rasterskih slika. Predstavlja složen i veoma obiman programski proizvod, pa ovladavanje velikim brojem nje-govih funkcija zahteva veoma mnogo vremena.

Za potrebe vežbi i uspešno koriš�enje programa nije potrebno poznavati sve njegove mogu�nosti, ve� je dovoljno ovladati osnovnim funkcijama neophodnim za naj�eš�e obrade rasterskih slika u tipi�nim poslovnim primenama, kao što su izrada poslovnih prezentacija i dizajn Web stranica.


Osnovni elementi interfejsa su: radna površina, osnovna meni linija, paleta alatki, linija s opcijama i plivaju�e palete.

Osnovna meni linija

Osnovne komande se mogu pokrenuti meni linije, a neke od njih i na druge na�ine (pre�ice i iz palete alatki).

Meniji File, Edit, View, Window i Help imaju uobi�ajenu namenu, kao i kod drugih Windows aplikacija.

U meniju Image su nalaze osnovne komande za podešavanje vizuel-nih karakteristika slike, dok su u menijima Layer, Select i Filter brojne speci� �ne komande za rad sa rasterskim slikama.

Kreiranje nove slike i pristup fajlovima sa rasterskim slikama ostvaruje se preko komandi u meniju File (na slede�oj slici), u kome se nalaze i druge komande, kao što su komande za konverziju i štampanje.

54 MULTIMEDIJA

2. RAD SA FAJLOVIMA

Razmotri�e se samo osnovni skup komandi programa za rad s fajlovima - New, Open i Save/Save-As.

New

Kreiranje nove rasterske slike vrši se komandom File/New, nakon �ega se pojavljuje dijalog kao na slici.

Podrazumevaju�e vrednosti za dimenzije slike i kolor model se postavljaju prema poslednjoj slici koja je smeštena u Clipboard, a ime je Untitled-(redni broj). Pozadina može biti bela, trenutna boja pozadine ili providna.

Open

Otvaranje fajlova sa rasterskim slikama vrši komandom File/Open, kroz standardni dijalog kao na slici.


Save

�uvanje sadržaja nove slike prvi put se vrši komandom File/Save As…, koja dozvoljava izbor tipa i imena fajla na koji �e se slika zapamtiti. Ako se modi� kuje postoje�a slika, ovom komandom se dobija kopija, tako da originalni fajl ostaje netaknut.

Naj�eš�i tipovi fajlova su:

�� Photoshop Document (*.psd) – interni format programa Photoshop, koga mnoge aplikacije ne podržavaju, ali je pogodan kao radni for-mat jer omogu�ava potpuno pam�enje svih svojstava i aspekata obrade slike potrebnih za dalji rad.

�� JPEG (*.jpg) – pam�enje slike sa visokim stepenom kompresije, uz gubitak vernosti slike originalnoj. Visok stepen kompresije omogu�ava lakšu razmenu i poslovnu upotrebu velikih slika, kao što su fotogra� je visoke rezolucije u punom koloru. Nivo gubitaka se zadaje kao param-etar Quality.

�� GIF (*.gif) – standardni format za izradu ilustracija i rasterskih ani-macija na Web-u. Ograni�ena je veli�ina i broj boja, ali se dobijaju veoma kompaktne slike za koje nisu potrebni dodatni programi za pri-kaz na Web-u.

�� PNG (*.png) – standardni format za razmenu slika na Web-u. Omogu�ava ve�e fajlove, progresivno kodiranje ve�i i broj boja nego GIF.

�� TIFF (*.tif) – za pam�enje bez gubitaka u kvalitetu (pogodno npr. pri-likom skeniranja).

3. OSNOVNA PALETA ALATKI

Paleta alatki je skup tastera koji služi za brzi izbor odgovaraju�e funkcije ili grupe funkcija programa.

56 MULTIMEDIJA

Naj�eš�e se koriste razli�ite vrste selekcije (geometrijska, slobodna, po boji), uve�anje (slike ili svih prozora), selekcija boja sa slike (pipeta), slikar-ski alati za bojenje (�etkica, pero, kantica i prst) i izbor podrazumevaju�e boje � gura i pozadine (foreground/background).


1. Selekcija

Selekcija služi da se izabere region - deo slike na kome �e se izvršiti neka operacija.geometrijska selekcija

Selekcija dela rasterske slike pravouglog ili elipsastog oblika, odnosno pojedina�nog reda/kolone pixel-a.

Selekcija se odre�uje klikom na po�etak regiona selekcije i pomeranjem miša do kraja selekcije (prikazuje se trep�u�om isprekidanom linijom).

slobodna selekcija

Selekcija dela slike proizvoljnog oblika.

Odre�uje se:

��opisivanjem granica slobodnom rukom (Lasso),

��u obliku poligona (Polygonal) ili

�� slobodno, uz korekciju granice po najve�oj promeni boje i kontrasta (Magnetic Lasso)

selekcija po boji

Selekcija delova rasterske slike iste ili sli�ne boje kao pixel na koji se klikne mišem (Magic Wand).

Parametrima se odre�uje da li se biraju samo susedni ili svi pixel-i slike zadanih karakteristika.

Prilikom selekcije regiona koriste se pomo�ni tasteri Shift i Alt. Taster Shift se koristi kada je potrebno da geometrijski region bude pravilna kružnica ili kvadrat, dok je neprekidno pritisnut Alt potreban za selekciji više odvojenih podru�ja slike istovremeno.

Opercije se vrše nad izabranim podru�jem, dok ostatak slike ostaje netak-nut. Pomo�u funkcije Select/Inverse, vrši se zamena uloga selektovanog podru�ja i ostatka slike, pošto je ponekad lakše ozna�iti deo slike na kome ne treba izvršiti neke operacije.

58 MULTIMEDIJA

Za preciznija podešavanja i pregled slike koristi se alatka za de� nisanje pogleda na sliku (Zoom) – uve�anja ili umanjenja po izabranim kriterijumima.

2. Linija sa opcijama

Prilikom izbora alatke iz palete, pojavljuje se ispod meni linije pripadna linija za de� nisanje detalja izvršenja operacije, u kojoj se vide trenutne vrednosti, koje se mogu promeniti.

Npr. za uve�anje/umanjenje (Zoom), pojavljuje se linija kao na slici, gde se može izabrati umanjenje umesto uve�anja, kao i jednim klikom miša na opciju promeniti pogled na sliku u teku�em prozoru ili svim otvorenim prozorima odjednom.

3. Plivaju�e palete

Posebna grupa malih prozora su “plivaju�e” palete alatki, �iji spisak je u meniju Windows. Mogu se otvarati i zatvarati, smanjiti na veli�inu naslo-va prozora i premeštati po radnoj površini.

Imaju podpanele (panel tabs), pomo�u kojih se dodatno razvrstavaju raspoložive funkcije.Osim toga, svaka plivaju�a paleta ima meni sa op-cijama, koji se aktivira desnim klikom miša na trouglasti taster u gornjrm desnom uglu, kao na slici.

Prikazuju se i sakrivaju pomo�u menija Window. Obi�no su stalno prika-zane palete Navigator, Colors, History i Layers, sa svojim podpanelima.


4. Bojenje i izbor boje

Aktiviranjem izbora boje (iz palete alatki ili nekog menija) pojavljuje se dijalog za izbor boje u HSB, RGB, Lab ili CMYK kolor modelu.

Boja se može izabrati pomeranjem upravlja�kih kontrola za izbor boje na panelu dijaloga ili de� nisati unošenjem numeri�kih vrednosti za kompo-nente boje u nekom od kolor modela. Izborom opcije Only Web Colors ograni�avamo izbor boja na ograni�enu paletu, koju podržavaju i starije verzije Web �ita�a.

4. OSNOVNE KOMANDE ZA OBRADU SLIKE (IMAGE)

Meni Image

Ve�ina osnovnih funkcija za manipulaciju rasterskim slikama nalazi se u meniju Image. Pomo�u njih se mogu menjati mnoga svojstva raster-ske slike i vršiti razli�ita podešavanja, kojima se dobija kona�na potpuno obra�ena slika.

U ovom delu �e se najkra�e opisati namena i upotreba naj�eš�e koriš�enih funkcija iz menija Image: Mode (izbor kolor modela), Adjustments (razli�ita podešavanja), ImageSize (podešavanje prostorne rezolucije i di-menzija slike), Rotate Canvas (rotacija) i Crop (isecanje).

60 MULTIMEDIJA

1. Mode je jedna od naj�eš�ih funkcija, kojom se menja osnovni kolor model slike.

Na slici se vidi da je slika na kojoj se trenutno radi zapam�ena u modelu RGB Color sa 8 bita za svaku od osnovnih boja, ukupno 24 bita po jednom pikselu slike. Model CMYK ima �etiri komponete, pa zahteva 32 bita po pikselu. Izbor 16 bita po osnovnoj boji udvostru�ava potrebnu memoriju za rad i pam�enje slike.

Osim navedenih modela, �esto se koriste: Bitmap, koji zahteva 1 bit po pikselu, Grayscale sa 8 bita po pikselu za prikaz 256 nivoa sivila mono-hromatske slike i Indexed Color, sa 8 bita po pikselu za prikaz slike u boji pomo�u podskupa od 256 izabranih boja iz pune RGB palete.

2. Adjustments

U ovom podmeniju se nalazi skup funkcija za promenu i podešavanje vi-zuelnog izgleda rasterskih slika. Najvažnije funkcije su odvojene u prvom delu menija.


Levels

E� kasan na�in za istovremeno podešavanje osvetljenosti i kontrasta slike je funkcija Image/Adjustments/Levels (pre�ica Ctrl-L), nakon �ega se otvara slede�i dijalog.

U prikazu se vidi ukupna raspodela nivoa osvetljenja od tamnog (0) do svetlog (255). Podešavanje nivoa se vrši pomo�u tri pokaziva�a – za-tamnjenja (shadows), sivih tonova (midtones) i svetlih tonova (high-lights). Pomeranjem pokaziva�a ulevo postavlja se svetlija vrednost, a udesno tamnija.

62 MULTIMEDIJA

Beli pokaziva� je za svetle tonove. Njegovim pomeranjem ulevo osvetl-javaju se najviše osvetljena podru�ja slike. Ovom tehnikom se mogu ukloniti neke greške skeniranja, npr. nepoželjni tekst koji se providi s druge strane papira.

Crni pokaziva� služi za podešavanje nivoa osvetljenosti tamnih delova slike, odnosno zatamnjenosti senki.

Sivi pokaziva� služi za podešavanje nivoa osvetljenosti podru�ja sa srednjim vrednostima ili sivih tonova. Njegovo pomeranje menja ve�inu vrednosti nivoa osvetljenosti na slici, �ime se menja kontrast cele slike.

Opcija Preview omogu�ava pra�enje podešavanja na samoj slici, pre nego se izaberu kona�ne vrednosti sa OK ili odustane sa Reset.

Color Balance

U radu sa kolor slikama korisna je mogu�nost uticaja na pojedine kom-ponente boje, odnosno mastila. Ponekad slike izgledaju kao da imaju previše neke komponente, npr. crvene ili žute.

Korekcija se vrši pomo�u Image/Adjustments/Color Balance (Ctrl-B), nakon �ega se pojavljuje dijalog.

Opcija Preview omogu�ava pra�enje podešavanja na samoj slici. Ba-lans se menja pomeranjem kliza�a od jedne komponente ka drugoj.

Pri tome se mogu izabrati podru�ja slike na koja se izmene odnose – tamni tonovi (shadows), srednji tonovi (midtones) ili svetli tonovi (highlights). Npr. za plave primese senki, treba pove�ati sadržaj žute boje (smanjuje seudeo plave).


Kada je podešavanje zadovoljavaju�e, potvr�uje se sa OK.

Brightness/Contrast

3. Image Size

Za podešavanje prostorne rezolucije i dimenzija slike koristi se opcija Im-age/Image Size. Pojavljuje se dijalog za izbor parametara.

Okvir Pixel Dimensions služi za direktnu promenu veli�ine digitalne slike u pixelima ili procentima, a okvir Document Size za promenu veli�ine i rezolucije slike u izabranim prostornim jedinicama (cm, mm, inches, points, pixels itd).

Kod promene dimenzija, ukoliko je uklju�ena opcija Constrain Propor-tions, promena jedne od dimenzija automatski menja drugu. Ukoliko opci-ja nije uklju�ena, dimenzije se menjaju nezavisno, ali tako da se ne izgubi nijedan piksel.

Prostorna rezolucija slike u dpi (dots-per-inch) ili ppi (pixels-per-inch) podešava se u zavisnosti od namene ili dalje upotrebe.

64 MULTIMEDIJA

Pošto klasi�ni monitori mogu da prikažu svega 72-120 dpi, za slike na-menjene Web-u nije potrebna velika rezolucija, koja samo optere�uje ko-munikaciju. Za dobar kvalitet štampe dovoljan za ku�u i potrebe nastave, dovoljna je rezolucija 200 do 300dpi. Štampanje kvalitetnih publikacija i umetni�kih radova može zahtevati višu rezoluciju, koja zavisi od potreba i mogu�nosti samih ure�aja, a može biti više hiljada dpi.

4. Crop

Vrlo �esto originalne slike nisu odgovaraju�e veli�ine ili imaju neke vizu-elne nedostatke – zbog položaja ure�aja za snimanje osnovni motiv može biti pomeren, iskrivljen ili malo zarotiran. Ovakvi mali nedostaci se mogu otkloniti upotrebom alata za isecanje dela slike (Crop tool).

Funkcija se može izabrati iz menija Image, skra�eno pritiskom na slovo C na tastaturi ili klikom na taster na osnovnoj paleti alatki, nakon �ega se menja oblik kursora. Treba prevu�i kursorom preko slike da se obuhvati deo slike koji �e se izabrati.

Photoshop automatski zatamnjuje deo slike izvan obuhva�enog dela slike. Granice podru�ja koje �e se ise�i mogu se � no korigovati pre isecanja pomo�u vode�ih oznaka na ivicama selekcije.


Za istovremeno rotiranje ise�enog dela slike treba zaustaviti kursor u blizini ivice selekcije dok se ne pojavi par zakrivljenih strelica. Mišem treba uhvatiti i povu�i oznaku rotiranja prozora za isecanje za �eljeni smer i ugao rotacije.

Kada se kona�no podesi prozor, isecanje se pokre�e pritiskom na taster Enter (ili ESC, ako se odustaje). Pojavljuje se dijalog, na kome isecanje treba potvrditi tasterom Crop (ili odustati od izmene).

66 MULTIMEDIJA

Kona�an rezultat je ise�en i zarotiran deo prethodne slike:

5. Rotate Canvas

Naj�eš�i razlog rotiranja je iskrivljenost forogra� je ili skeniranog doku-menta. Rotiranje se standardno vrši opcijom Image/Rotate Canvas. Op-cije se pojavljuju u posebnom dijalogu:

Naj�eš�e se koriste opcije za rotaciju od 180°, 90° CW (clock-wise - u smeru kazaljke na satu) i 90° CCW (counterclock-wise – u smeru su-protnom od kazaljke na satu), dok se za druge varijante rotacije koristi opcija Arbitrary, gde se ugao i smer slobodno biraju.

Simetri�na preslikavanja oko horizontalne ili vertikalne ose (kao u ogleda-lu) vrše pomo�u funkcija Flip Canvas Horizontal i Flip Canvas Vertical.


5. SLOJEVI I TEKSTUALNI EFEKTI

Jedna od osnovnih osobina programa Photoshop, koja omogu�ava složene operacije nad rastrskim slikama, su slojevi (layers). Izrada celokupne slika se može hijerarhijski organizovati po delovima (slojevima) u kojima se kreiraju pojedina�ni objekti, a kona�an izgled se dobija njihovim kom-binovanjem.

Novi sloj se može kreirati iz menija Layer/New, iz dodatnog bo�nog me-nija plivaju�eg prozora Layers ili male palete alatki na dnu tog prozora.

Kreiranje objekata, kao što su tekstovi ili linije, automatski kreira sopstveni novi sloj za taj objekt. Plivaju�i prozor Layers prikazuje sve slojeve slike i njihov redosled. Novi slojevi se kreiraju iznad prethodnih, njihov redosled se može promeniti mišem, premeštanjem slojeva u prozoru Layers.

Dodatni bo�ni meni i mala paleta alatki na dnu prozora omogu�avaju bro-jne operacije nad slojevima, npr. promenu imena ili brisanje sloja.

6. FILTERI

Photoshop sadrži veliki broj programskih dodataka – � ltera, �ijom upotre-bom se mogu dobiti razli�iti složeni vizuelni efekti na digitalnoj slici. Fil-teri se koriste za manja doterivanja, ali i za velike transformacije slike u nešto sasvim novo. Naprimer, donja fotogra� ja se može pretvoriti u pro-zorski vitraž (� lter Filter/Texture/Stained Glass) ili u monohromatsku polutonsku sliku (� lter Filter/Sketch/Halftone Pattern).

Pošto se do rezultata se obi�no dolazi eksperimentalno, svaki � lter se pojedina�no može isprobati aktiviranjem opcije Preview na pripadnom di-jalogu.

Efekat uobi�ajene primene ve�eg broja � ltera može se brzo pregledati u prikazu opcije Filter / Filter Gallery (na slici).

68 MULTIMEDIJA

Primena nekih od �eš�e koriš�enih � ltera �e se prikazati u okviru uputstva za realizaciju laboratorijskih vežbi iz ovog poglavlja.

Vežba 2.3.1: Pregled i promena atributa digitalne slike

1. Otvoriti fajl sa rasterskom slikom u boji (.jpg, preview)

2. Promeniti prostornu rezoluciju slike (dpi)

3. Promeniti dubinu boje (color depth)

Otvoriti fajl sa rasterskom slikom u boji komandom File/Open. Izabrati sliku iz spiska, npr. peach1.jpg. Sa Image/Size prikazati svojstva digitalne slike:


Vidi se da je osnovna reazolucija slike 500x494, dok je prostorna rezolucija 72dpi, što omogu�ava prikaz na ekranu u originalnoj veli�ini (uve�anje 100%).

Promena prostorne rezolucije u ve�u vrednost (300dpi) prouzrokova�e druga�iji izgled prikaza u originalnoj veli�ini (uve�anje 100%). Na pokretnoj paleti za navigaciju se vidi koji deo slike sada predstavljaju pixel-i prikazani u prozoru.

70 MULTIMEDIJA

Cela slika se može prikazati u teku�em prozoru kada se dovoljno umanji (View/Fit on Screen podesi�e umanjenje na 26,4%).


Vežba 2.3.2: Konverzija formata i kompresija digitalnih slika u boji

1. Otvoriti fajl sa rasterskom slikom u boji (.tif, preview)

2. Sa�uvati sliku u formatu .JPG (Quality)

3. Promeniti model boje (RGB u INDEX COLOR)

4. Sa�uvati sliku u formatu .GIF (sa i bez preplitanja)

5. Sa�uvati sliku u formatu .PNG (sa i bez preplitanja)

6. Promeniti model boje (RGB u Grayscale)

7. Sa�uvati sliku u formatu .GIF/.PNG (bez preplitanja)

8. Promeniti model boje (Grayscale u Bitmap)


10. Napraviti uporednu tabelu (broj boja, vernost originalu, veli�ina zapisa)

1. Otvoriti fajl sa rasterskom slikom u boji (Ducky.tif, preview).

Slika je iz kolekcije primera programa Adobe Photoshop (799,8KB, komprimovano 280,2KB).

72 MULTIMEDIJA

2. Sa�uvati sliku u formatu .JPG (Quality 0, 6 i 12)

Sa�uvati sliku u formatu JPEG, podešavaju�i vernost originalnoj bit-mapi pomo�u parametra Quality, koji može da ima vrednost 0..12.

U dijalogu se vidi i procena veli�ine zapisa budu�eg JPEG fajla, zajedno sa procenom potrebnog vremena za prenos pomo�u standardnog modema (56Kbps).

Veli�ina zapisa je procenjena na 24KB uz kvalitet 0, 37KB uz kvalitet 6 i 194KB uz maksimalni kvalitet 12.

3. Promeniti model boje (RGB u Indexed Color..)

Promena modela boje iz RGB u Indexed Color.. smanjuje dubinu boje, odnosno broj bita za predstavljanje jednog piksela sa 24 na 8 bita. Ovo zahteva transformaciju prostora boja i aproksimaciju prema paleti i modelu koji se bira iz dijaloga.

4. Sa�uvati sliku u formatu .GIF (sa i bez preplitanja)


5. Sa�uvati sliku u formatu .PNG (sa i bez preplitanja)

6. Promeniti model boje (Indexed Color.. u Grayscale)

Dobija se monohromatska slika, gde seu boje zamenjene sivim tonovima u 256 nivoa (8 bita).


Slika zauzima 71KB u formatu GIF, a 97KB u formatu PNG (patentirani GIF format je e� kasniji od besplatnog PNG).

8. Promeniti model boje (Grayscale u Bitmap)

Izvrši�e se nova redukcija dubine boje, odnosno zamena sivih tonova jednom od dve mogu�e boje: crnom ili belom. Da bi se sadržaj ostao vidljiv, vrši se zamena sivih površina mešavinom crnih i belih piksela

74 MULTIMEDIJA

odre�ene gustine (dithering). U dijalogu se bira rezolucija i konkretna metoda (prema pragu, po uzorku, difuzijom i polutonskim uzorkom).

Rezultati redukcije za svaku od varijanti se vide na donjim slikama.

50% Threshold Pattern Dither


Diffusion Dither Halftone Screen...


Veli�ina zapisa u GIF formatu je ista za sve tehnike redukcije, 22KB. Približno isti rezultat se dobija i u formatu PNG.

10. Napraviti uporednu tabelu (model, broj boja, vernost originalu, veli�ina zapisa na fajlu). Prethodni rezultati mogu se sumirati slede�om tabelom:

Format Model Broj boja Vernost Veli�inaTIFF RGB 16M 100% 819 KBJPG RGB 16M 12 206 KBJPG RGB 16M 6 48 KBJPG RGB 16M 0 31 KBGIF Indexed color 256 100% 49 KB

GIF Int Indexed color 256 100% 53 KBPNG Indexed color 256 100% 220 KB

PNG Int Indexed color 256 100% 238 KBGIF Grayscale 256 100% 71 KBPNG Grayscale 256 100% 97 KBGIF Bitmap 2 100% 22 KBPNG Bitmap 2 100% 22 KB

76 MULTIMEDIJA

Treba uo�iti e� ksnost zapisa slike u 24-bitnom koloru u formatu JPG. Uz umereni gubitak vernosti originalu (6), zauze�e je manje od veli�ine zapisa monohromatske slike (GIF/PNG) i samo dvostruko ve�e od crno-bele bit-mape.

Vežba 2.3.3: Popravka (enhancement) digitalnih fotogra� ja

1. Otvoriti fajl sa rasterskom slikom u boji (.jpg, preview)

2. Izjedna�iti nivoe osvetljenosti

3. Korigovati nepravilnosti i ošte�enja (retuširanje) i crvenilo iz o�iju

4. Istaknuti vidljivost važnih delova

5. Ublažiti vidljivost pozadine

6. Sa�uvati promenjenu sliku pod novim imenom u formatu .JPG (Quality)

Otvoriti fajl sa rasterskom slikom na kojoj se vide crvene mrlje na zeni-cama ljudi, koje nastaju odbijanjem svetlosti blica od veoma prokrvljenog o�nog dna (mrežnja�e) kroz široko otvorene zenice.

Ukloniti crvenilo iz o�iju na fotogra� ji snimljenoj uz pomo� blica na slede�i na�in:

1. Uve�ati oko na ceo prozor

2. Podesiti podrazumevaju�u boju popune (foreground) na crno, a boju pozadine (background) na belo


3. Otvoriti podmeni tastera za oporavak Heeling Brush Tool palete alatki i izabrati �etkicu Color Replacement Tool.

4. Kliknuti na crveno i, ne otpuštaju�i taster miša, pomerati �etkicu preko crvenog podru�ja. Crvena boja iz oka �e se izgubiti i zameniti nijan-sama crne.

5. Ukloniti crvenilo na slici gde god je još to potrebno.

Vežba 2.3.4: Izrada ukrasnih rasterskih gra� �kih elemenata za isticanje paragrafa teksta (bullets)

1. Kreirati novu RGB kolor sliku 10x12 pixel-a, 72 pixel/inch, sa providnom pozadinom (transparent)

2. Selektovati celu sliku, podesiti/izabrati osnovne boje (foreground/background color) i obojiti selektovanu površinu prelivom (gradient tool, paint bucket tool)

3. Transformisati pravougaonik u pogodan oblik pomo�u perspektivne transformacije (Edit/Transform/Perspective), npr. u trougao ili oval

4. Dodati elemente vizuelnog stila, npr. “Bevel and Emboss”

Sa�uvati kao sliku u formatu .GIF (nije potrebno preplitanje)

Kreirati novu RGB kolor sliku 10x12 pixel-a, 72 pixel/inch, sa providnom pozadinom (transparent).

78 MULTIMEDIJA

Selektovati celu sliku, podesiti/izabrati osnovne boje (foreground/back-ground color) i obojiti selektovanu površinu prelivom (gradient tool, paint bucket tool).

Transformisati pravougaonik u pogodan oblik pomo�u perspektivne trans-formacije (Edit/Transform/Perspective), npr. u trougao ili oval. Na liniji sa opcijama biraju se parametri, a sama transformacija se vrši pomo�u vode�ih markera (promene se mogu poništiti ili potvrditi).

Dodati elemente vizuelnog stila, npr. Bevel and Emboss.

Sa�uvati kao sliku u formatu .GIF, �uvaju�i providnost pozadine (transparency). Preplitanje za ovako malu sliku nije potrebno.


Ovakav mali rasterski element se može koristiti za isticanje para-grafa teksta u nabrajanjima u Web stranama (bullet).

Vežba 2.3.5: Izrada malih ukrasnih rasterskih gra� �kih elemenata za gra� �ko predstavljanje hiperveza (bullets, buttons)


2. Podesiti/izabrati osnovne boje (foreground/background color) i na slici kreirati pogodnu formu navigacionog elementa, npr. oval ili zaobljeni pra-vougaonik, koji �e se obojiti izabranom kombinacijom boja..

3. Dodati elemente vizuelnog stila, npr. “Bevel and Emboss” (2-3 pixel-a)

4. Uneti tekst u slede�em sloju (izabrati font, veli�inu, boju i poziciju teksta) i primeniti, po želji, neki od stilskih elemenata i za sloj teksta

5. Izvršiti stapanje slojeva (Layer/Merge Visible) i sa�uvati sliku u formatu .GIF (nije potrebno preplitanje)

80 MULTIMEDIJA

1. Kreirati novu RGB kolor sliku 60x30 pixel-a, 72 pixel/inch, sa provid-nom pozadinom (transparent).

2. Podesiti/izabrati osnovne boje (foreground/background color) i na slici kreirati pogodnu formu navigacionog elementa, npr. oval ili zaobljeni pravougaonik.

Vektorski iscrtani oblik �e se obojiti izabranom kombinacijom boja.

3. Dodati elemente vizuelnog stila, npr. Bevel and Emboss (2-3 pixel-a).

Za gornji efekt veli�ina konture koja do�arava tre�u dimenziju je 3 piksela.


4. Uneti tekst u slede�em sloju (izabrati font, veli�inu, boju i poziciju teksta) i primeniti.

Po želji, neki od stilskih elemenata i za sloj teksta.

82 MULTIMEDIJA

5. Izvršiti stapanje slojeva (Layer/Merge Visible) i sa�uvati sliku u formatu .gif (nije potrebno preplitanje).

Ovakvi rasterski elementi se koriste za navigaciju u Web stranicama, odnosno gra� �ko predstavljanje hiperveza u obliku tastera (buttons)

.

Vežba 2.3.6: Selekcija i razli�ita podešavanja – kreiranje vinjete

1. Otvoriti sliku u JPEG formatu (.jpg).

2. Izabrati ovalnu selekciju i u paleti opcija, podesiti Feather na 5 px.

3. Selektovati deo slike u obliku elipse koji obuhvata glavu osobe

4. Kopirati selekciju (Edit/Copy).

5. Sa File/New Kreirati novu sliku istih dimenzija sa transparentnom pozadinom.

6. Sa Edit/Paste kopirani sadržaj smestiti u novu sliku.

1. Otvoriti sliku 3GIRLS.JPG sa prikazom � gura tri devoj�ice.

2. Izabrati ovalnu selekciju i u paleti opcija, podesiti Feather na 5 px.

3. Selektovati deo slike u obliku elipse koji obuhvata glavu osobe sa slike:


4. Kopirati selekciju (Edit/Copy).

5. Sa File/New Kreirati novu sliku istih dimenzija sa transparentnom pozadinom.

6. Sa Edit/Paste kopirani sadržaj smestiti u novu sliku.

Dobija se vinjeta sa selektovanim delom slike, umekšanih ivica i providne pozadine, pogodna za ilustracije u Web stranicama.

84 MULTIMEDIJA

Vežba 2.3.7: Selekcija i primena � ltera na odre�ene delove slike - odvajanje detalja od jednoli�ne pozadine

1. Otvoriti sliku u JPEG formatu (.jpg)

2. Izabrati “�arobni štapi�” (Magic Wand Tool) i u liniji s opcijama postaviti na Add To Selection. Opciju Tolerance na vrednost u inter-valu 0..255 (npr. 20)

3. Selektovati deo slike koji pripada pozadini pomo�u “�arobnog štapi�a” (Magic Wand Tool). Može se izabrati više objekata istovre-meno, ako se pozadina sastoji iz više delova.

4. Pritisnuti taster Delete, �ime se briše pozadina slike

1. Otvoriti slike 3GIRLS.JPG sa prikazom ljudske � gure.

2. Izabrati “�arobni štapi�” (Magic Wand Tool) i u liniji s opcijama post-aviti na Add To Selection. Opciju Tolerance na vrednost u intervalu 0..255 (npr. 20).

3. Selektovati deo slike koji pripada pozadini pomo�u “�arobnog štapi�a” (Magic Wand Tool).


Ako se ako se pozadina sastoji iz više delova, može se izabrati više objekata istovremeno.

4. Pritisnuti taster Delete, �ime se briše pozadine slike (veli�ina ostatka slike se može posebno doterati).

Umesto brisanja delova originalne slike može se invertovati selekcija (Select/Inverse), sa Edit/Copy izvršiti kopiranje likova, a sa Edit/Paste njihovo prenošenje u neku drugu sliku (npr. praznu sliku sa transparentnom pozadinom).

86 MULTIMEDIJA

Vežba 2.3.8: Kreiranje zaglavlja Web strane, koje služi kao pozadina za animirane reklame, na osnovu rasterskih fotogra� ja


2. Otvoriti sliku npr. dvostruko manje širine u JPEG formatu (.jpg), koja �e poslužiti kao pozadina.

3. Selektovati celu sliku, kopirati je u clipboard sa Edit/Copy, a sa Edit/Paste u novu sliku i poravnati levi gornji ugao

4. Duplirati sloj ponavljanjem Edit/Paste i poravnavati ga sa desnom ivicom

5. Ukloniti vertikalnu liniju koja je nastala na spoju dve kopije slike kreiranjem mekog prelaza (mešanje, blending):- izabere se Layer 2- izabere se Layer/Add Layer Mask/Hide All- klikne se na Default Foreground/Background Color i Gradient

Tool- klikne se i prevu�e kursor preko preklopljenog dela slike na oko

50% visine. Dobija se ujedna�enija površina cele slike, bez ver-tikalne crte.

Sli�nim postupkom se mogu dodati novi slojevi (Layer 3, ...) i svaki od njih mešanjem nadovezati na prethodni.

6. Tekst se može dodati u nekoj boji koja se preuzima sa slike (pipe-tom), a nakon doterivanja fonta, dimenzija i pozicije na slici, mogu se dodati neki od stilskih efekata iz Layer/Layer Style (Drop Shad-ow, Bevel and Emboss i sl.).

7. Ovakva slika se �uva kao .PSD za dalji rad (uklju�ena opcija Lay-ers) ili se koristi neki od formata pogodnih za Web (.GIF, .PNG ili .JPG) tako što se prethodno izvrši stapanje slojeva (Layer/Merge Visible).


1. Kreirati novu RGB kolor sliku 468x60 pixel-a, 72 pixel/inch, sa belom ili providnom pozadinom (transparent)

2. Otvoriti slike manje širine u JPEG formatu (WINSURF.JPG, GOLFER3.JPG), izdvojiti deo koji �e poslužiti kao delove pozadine i sa Image/Size podesiti njihovu visinu na 60 piksela.

3. Selektovati celu sliku, kopirati je u clipboard sa Edit/Copy, a sa Edit/Paste u novu sliku i poravnati levi gornji ugao

4. Duplirati sloj ponavljanjem Edit/Paste i preklopiti deo slike sa prethodnim kopijama..

5. Ukloniti vertikalnu liniju koja je nastala preklapanjem kopija slike mešanjem (blending):

88 MULTIMEDIJA

- izabrati Layer 2 (desnim klikom ili na plivaju�oj paleti)

- izabrati Layer/Add Layer Mask/Hide All (sloj 2 je sakriven)

- kliknuti mišem na Default Foreground/Background Color i Gradient Tool.

- kliknuti mišem i prevu�i kursor preko preklopljenog dela slike na oko 50% visine

Pojavljuje se sakriveni sloj 2 i dobije se ujedna�enija površina cele slike, sa ublaženim prelazom izme�u dva dela.

U plivaju�oj paleti se dobija oznaka mešanja na sloju 2.


Sli�nim postupkom se mogu dodati novi slojevi (Layer 3, ...) i svaki od njih mešanjem nadovezati na prethodni (preklopljeni delovi se prate na lenjiru).

6. Tekst se može dodati u nekoj boji koja se preuzima sa slike (pipetom), a nakon doterivanja fonta, dimenzija i pozicije na slici, mogu se dodati neki od stilskih efekata iz Layer/Layer Style (Drop Shadow, Bevel and Emboss i sl.).

7. Ovakva slika se �uva u formatu .PSD za dalji rad (uklju�ena opcija Layers) ili se koristi neki od formata pogodnih za Web (.GIF, .PNG ili .JPG). Prethodno se izvrši stapanje slojeva (Layer/Merge Visible).

ANIMACIJA

Biološki fenomen poznat kao tromost oka ili perzistencija vida omogu�ava stvaranje iluzije kontinuiteta kretanja brzom izmenom slika koje se me�usobno vrlo malo razlikuju. U praksi je kao zadovoljavaju�a vred-nost usvojeno za TV sliku 25 (PAL) i 30 (NTSC) promena u sekundi, a za potrebe � lma (igranog ili animiranog) pokret se snima sa 24 diskretne promene u sekundi.

Prošireni standard GIF89a ima mogu�nost snimanja i prikazivanja niza nepokretnih slika u zadanom redosledu i trajanju, pa se može upotrebiti za pam�enje rasterskih animacija i njihovo prikazivanje pomo�u bilo kojeg modernog Web �ita�a.

Program Photoshop ima dodatak ImageReady za izradu rasterskih ani-macija, koji �e se koristiti u narednoj vežbi.

90 MULTIMEDIJA

Vežba 2.3.9: Jednostavna rasterska 2D animacija

Jednostavno kretanje 2D geometrijske � gure ili teksta.

1. Pokrenuti Adobe ImageReady.

2. Primer 1 - pokretni pravougaonik- kreirati praznu rastersku sliku rezolucije 0x0 piksela (prvi frejm)- kreirati objekat za animaciju – pravougaonik 0x0 piksela- kreirati slede�i frejm, kopiranjem prvog fejma, a zatim malim

pomeranjem pravougaonika (trajanje može da bude 1/25s, odnos-no 0,04s)

- na isti na�in formirati ostale frejmove, a pomeranje prilagoditi zamišljenoj trajektoriji kretanja pravougaonika

- snimiti animaciju kao .gif fajl

3. Primer 2 - pokretni tekst- kreirati praznu rastersku sliku rezolucije 0x0 piksela (prvi frejm)- kreirati objekat za animaciju – tekst, koriste�i slova veli�ine 0

dots- kreirati slede�i frejm, kopiranjem prvog fejma, a zatim malim

pomeranjem pravougaonika (trajanje može da bude 1/25s, odnos-no 0,04s)

- na isti na�in formirati ostale frejmove, a pomeranje prilagoditi zamišljenoj trajektoriji kretanja teksta

- snimiti animaciju kao .gif fajl

1. Pokrenuti Adobe ImageReady Program Image Ready se može pokrenuti direktno ili iz menija Photoshop-a (File/Edit in ImageReady). Posebno su važne plivaju�e palete slojeva (Layers) i animacije (Anima-tion), koje treba otvoriti u meniju Window (Window/Layers i Window/ Animation).2. Primer 1 - pokretni pravougaonikPomo�u File/New kreirati praznu rastersku sliku rezolucije, npr. 160x40 piksela (prvi frejm), sa providnom pozadinom (transparent). U paleti ani-macije se pojavljuje prvi frejm. Vreme trajanja se podešava klikom miša na oznaku vremena trajanja i izborom neke ponu�ene ili unosom nove vrednosti (Other...) i može da bude 1/25s, odnosno 0,04s.


Pomo�u alatke za kreiranje pravougaonika , na levom kraju prazne krei-rati 2D objekt za animaciju - pravougaonik duže stranice oko 50 piksela, obojen podrazumevaju�om bojom. U plivaju�oj paleti Animation pojav-ljuje se prvi frejm:

Pomo�u tastera za dupliranje teku�eg frejma kreirati slede�i frejm, a zatim ga izmeniti malim pomeranjem pravougaonika udesno i malo gore ili dole.

Na isti na�in formirati ostale frejmove, a veli�inu pomeranja i trajanje prilagoditi zamišljenoj trajektoriji i planiranoj brzini kretanja pravouga-onika. Brisanje nepotrebnih frejmova vrši se tasterom .Animaciju testirati pomo�u upravlja�kih tastera za prikazivanje

u plivaju�oj paleti Animation, a samu animaciju posma-trati u originalnom prozoru u kome je slika kreirana.Kona�nu verziju male rasterske animacije snimiti kao fajl su formatu .gif koriste�i meni File/Save Optimized As.3. Primer 2 - pokretni tekstPokretni tekst se kreira na isti na�in, samo se kao objekt animacije umesto pravougaonika kreira tekst, pomo�u alatke za kreiraje sloja teksta . Is-tim postupkom sukcesivnog dupliranja teku�eg frejma i malim pomeran-jem objekta odre�en broj puta, dobija se efekt kretanja teksta planiranom brzinom i prema željenoj trajektoriji.Sli�nim postupkom sukcesivnih translacija likova ili ise�aka digi-talizovanih fotogra� ja na pripremljenoj rasterskoj pozadini, mogu se izraditi animirani kolaži u stilu poznate serije “Monty Pyton Flying Cyrcus”.

92 MULTIMEDIJA

2.4 VIDEO

Cilj

Upoznavanje sa konkretnim predstavnicima alata za prikaz, izradu i ure�ivanje videa (Windows Media Player, RealPlayer, Windows Movie Maker, Adobe Premiere, Pinnacle Studio) kroz prakti�an rad na izradi kratkih video materijala.

Uvod

Video (od latinskog “vidim”) je tehnologija elektronskog hvatanja, sni-manja, obrade, skladištenja, prenosa i rekonstrukcije niza nepokretnih slika koje predstavljaju pokretne scene. Filmska tehnologija isti zadatak realizuje fotografskim sredstvima.

Razvijena je za potrebe televizije, ali je snimanje i emitovanje prošireno na ku�nu zabavu i Internet.

Koristi se i kao naziv za razli�ite analogne i digitalne formate skladištenja pokretnih slika. Analogni televiziski signal se emituje u tri standarda: ameri�ki NTSC (SAD, Japan i oko 50 zemalja) i evropski PAL (Evropa, Azija, Australija i ve�ina ostalih zemalja) i SECAM (Francuska, Rusija, centralna Afrika). Poznatiji formati snimanja i skladištenja analognog videa su VHS (ku�ni format) i Betamax (profesionalni).

Osnovna svojstva videa su brzina promene (broj frejmova u sekundi), rezolucija, kolor model i aspekt.

Broj frejmova u sekundi (frames per second, fps) predstavlja broj nepokret-nih slika u sekundi, kojima se stvara iluzija kontinuiteta kretanja. U � lms-koj tehnologiji se koristi 24fps, NTSC standard predvi�a 29.97fps, a stan-dardi PAL i SECAM 25fps (slika u sekundi).Pojedina�na slika na televizijskim i drugim elektronskim ekranima se formira sekvencijalnim iscrtavanjem pojedina�nih ta�aka na diskretnom rasteru (linije i kolone). Redosled i brzina iscrtavanja veoma uti�u na per-cepciju slike. Raster televizijskog ekrana se može iscrtavati progresivno (progressive) ili s preplitanjem (interlaced).Zbog ograni�enog propusnog opsega i smanjenja treptanja usled naglih promena slike, televizijski standardi predvi�aju iscrtavanje slike s prepli-


tanjem, u dva prolaza (poluslike), u kojima se odvojeno iscrtavaju parne i neparne linije slike.Rezolucija analognog videa se meri brojem horizontalnih linija (NTSC 480, a PAL i SECAM 576), a digitalnog videa se meri pikselima (picture element, pixel), odnosno 3D videa prostornim pikselima (volume picture element - voxel).Televizijski standard NTSC predvi�a prikaz u rezolucijama 720 x480, 704x480 ili 640x480 frekvencijom 60Hz sa preplitanjem (30 fps), a PAL i SECAM 768×576 ili 720×576 frekvencijom 50Hz sa preplitanjem (25 fps). Noviji standard HDTV (High De� nition Television) može progresivno da prikaže sliku 1920×1080 na 60Hz (60fps).Televizijski video koristi optimizovan aditivni model predstavljanja boje, koji omogu�ava reprodukciju i na crno-belim aparatima. U tom modelu je prenos slike u boji razdvojen na prenos informacije o osvetljenosti i o ostalim svojstvima prikaza, odnosno osnovni RGB model se konvertuje u model YIQ za NTSC, YUV za PAL i YDbDr za SECAM.Aspekt je odnos horizontalne i vertikalne � zi�ke veli�ine slike, koje zavise od dimenzija ekrana i veli�ine pojedina�nih piksela. Klasi�an televizijski ekran ima odnos horizontalne i vertikalne dimenzije 1,33:1 (4:3), a HDTV 1,78:1 (16:9). Klasi�an 35mm � lmski kadar ima odnos 1,37:1, a široki ekran 1,78:1 (16:9).Ra�unarski monitori imaju sve ve�u rezoluciju, iznad 1280x1024. Zbog toga klasi�na TV slika i video zapis skromne rezolucije zauzimaju samo mali deo ekrana monitora.Puni video zahteva 24-30 fps, a kao aproksimacija za potrebe videokon-ferencija prihvatljivo je 15 fps. Video brzine 7 fps se smatra isprekidanim (choppy), odnosno pri 3 fps veoma isprekidanim, dok se za brzinu promene ispod 3 fps smatra da je u pitanju slide show, a ne video.

Pošto potrebna memorija raste s kvadratom upotrebljene rezolucije, nekom-primovani video zahteva enormnu memoriju.

Video je ure�eni niz slika koje se prikazuju unapred odre�eno vreme (1/24 sekunde ili kra�e). Jedna RGB slika u punom koloru (24 bita po pixel-u, 1 bajt po boji), u rezoluciji 640x480, zauzima 640x480x3 = 921.600 baj-tova.

94 MULTIMEDIJA

Za video sekvencu dužine 1 sat snimljenu sa 30fps potrebno je 921600x3600x30 = 99.532.800.000 bajtova, odnosno 97GB.

To zna�i da jedan TV � lm od 90 minuta u razmatranoj tehnologiji sniman-ja zauzima prostor od oko 146GB, odnosno više od 200 kompakt-diskova (CD) ili 30 DVD diskova.

Kompresija digitalnog videa se vrši na razli�ite na�ine. ISO standard za komresiju digitalnog videa je MPEG kompresija, koja se vrši smanjivan-jem prostorne i vremenske redundancije.

Uklanjanje prostorne redundancije vrši se unutar jednog frejma. Prostorna redundancija se smanjuje složenim algoritmom koji podrazumeva internu konverziju RGB kolor modela u YUV (pošto je manje informacija potreb-no za vernu reprodukciju monohromatske slike, na koju su ljudi osetljiviji nego na hrominiscenciju), podelu slike na makro blokove (grupe pixela, 16x16) i konverziju polja dobijenih vrednosti pomo�u diskretne kosinusne transformacije (Discrete Cosine Transformation, DCT), koja se zasniva na Furijeovoj analizi. Ovim postupkom se isti�u vrednosti vrednosti sa ve�om frekvencijom, dok ostale postaju bliske nuli.

Dodatna redukcija se vrši kvantizacijom rezultata dobijenih diskretnom kosinusnom transformacijom (nivoi kvantizacije se mogu podešavati para-metrom Quality) i pogodnim kodiranjem grupa piksela.

Vremenska redundancija se uklanja pronalaženjem sli�nosti uzastopnih frejmova. Zbog velikog broja frejmova u jedinici vremena, obi�no nije potrebno pamtiti svaki frejm u celini, ve� samo odre�ene delove uzas-topnih frejmova, gde se dešavaju promene.

Poznatiji programski alati za obradu video sadržaja su Avid Liquid, Apple FinalCut Studio, Adobe Premiere, Pinnacle Studio, ULEAD VideoStudio i Microsoft MovieMaker, koji je besplatan na ra�unarima sa operativnim sistemom Windows.


OSNOVNA UPOTREBA PROGRAMAWINDOWS MOVIE MAKER 2

Program Windows Movie Maker 2 je program za izradu i montažu video materijala za potrebe ku�ne zabave, koji se isporu�uje kao deo operativnog sistema Windows XP.

Dovoljan je za ilustraciju osnovnih mogu�nosti kombinovanja razli�itih tehnologija digitalne multimedije u jedinstveni objekt, digitalni video.

Pokre�e se sa Start / Programs / Windows Movie Maker. Na radnoj površini programa se, pored glavne meni linije i osnovnih upravlja�kih tastera na vrhu ekrana, uo�avaju pomalo neuobi�ajeni meniji sa leve strane, sa tri grupe funkcija: 1. za uvoz materijala (Capture Video), 2. za montažu (Edit Movie) i 3. za snimanje kona�nog rezultata (Finish Movie).

U sredini se nalazi prostor za kolekciju multimedijskih komponeti (video sekvence, zvu�ni zapisi i rasterske slike).

Desno se nalazi multimedijski monitor za pregled svih materijala, sa klasi�nim komandama za prikaz, a u donjem delu ekrana traka (sa više kanala) za obradu i montažu novog video materijala.

96 MULTIMEDIJA

1. UVOZ MULTIMEDIJSKOG MATERIJALA

Prva grupa funkcija služi za prikupljanje multimedijskih komponenti: videa (direktno s ure�aja ili iz fajlova), rasterskih slika i zvu�nih zapisa.

Za uvoz materijala iz fajlova se koristi standardni dijalog, u kome se na uobi�ajeni na�in može izabrati jedan ili više fajlova (uz pomo� tastera Ctrl ili Shift).

Uvezeni materijali se pojavljuju kao nove ikone u kolekciji.

Prilikom uvoza videa, bira se režim rada: uvoz videa kao celine ili uz is-tovremeno razbijanje na komponente (Create clips for video � les), koje program samostalno prepoznaje i odvaja.


U zavisnosti od dužine i rezolucije video zapisa, uvoz sa kreiranjem video-klipova može trajati odre�eno vreme, koje je približno ozna�eno na ekranu

Kreirani video-klipovi se pojavljuju u kolekciji kao posebni video ob-jekti, koji se mogu pregledati na multimedijskom monitoru programa.

Prevla�enjem pomo�u miša, materijal se premešta na traku za montažu, koja ima dva režima prikazivanja montiranog videa: po komponentama (storyboard) i po vremenskom trajanju (timeline), koji se menjaju jednim klikom miša na Show Timeline, odnosno Show Storyboard.

98 MULTIMEDIJA

Premeštanje po traci za montažu, kao i promena dužine trajanja (skra�ivanje) video i zvu�nih sekvenci tako�e se vrši mišem, uz pomo� gra� �kih el-emenata, kursora i pokaziva�a.

Podela video sekvence na dva dela u odre�enom vremenskom trenutku vrši se koriš�enjem namenskog tastera multimedijskog monitora.

Ukoliko je u pitanju montirani materijal, koji je uvezen kao celina, iz kon-tekstnog menija (desni klik) može se naknadno pokrenuti kreiranje video klipova.

Radna verzija projekta montaže videa može se sa�uvati za dalji rad na poseban fajl tipa Windows Movie Maker Projects (sa su� ksom .MSWMM). Projektni fajlovi ne sadrže multimedijske objekte iz kolekcije, ve� samo reference na njih.

2. PRELAZNI EFEKTI

Prelazi (transitions) se koriste za povezivanje pojedina�nih video sekvenci u jedinstvenu celinu ublažavanjem naglih promena slike i stvaranjem utis-ka kontinuiteta kretanja u vidnom polju.


Osnovni prelazni efekt je postepeni prelaz jednog videa ili slike u drugi (fade).

Ovi prelazi se na � lmskoj traci vide kao vremensko preklapanje video kli-pova.

Prelazi se prikazuju pomo�u menija Edit Movie/View video transitions. Provera delovanja efekata na monitoru može se izvršiti dvostrukim klikom na sliku efekta.

100 MULTIMEDIJA

Za dodavanje prelaznih efekata na traku za montažu potrebno je uklju�iti storyboard režim prikaza i prevu�i sliku efekta u pravougaonik izme�u video sekvenci.

Prelazi se uklanjaju desnim klikom i izborom iz menija ili pritiskom na taster Delete.

3. DODAVANJE TEKSTA

Tekst se može dodati kao poseban tekstualni slajd odre�enog trajanja u više varijanti: na po�etak � lma, ispred nekog video klipa, preko samog video klipa (kao � lmski titl) ili na kraju � lma, naj�eš�e za informacije o realizaciji (scrooling credits).

Iz menija se izabere Make titles or credits, a zatim varijanta dodavanja teksta (ispred, iza ili preko neke video sekvence).

Zatim se unese tekst u dva podru�ja. Podrazumevaju�i font i animacija tek-sta se mogu menjati izborom opcija Change the title animation i Change the text font and color u donjem delu ekrana kojima se menja boja i providnost pozadine, kao i položaj teksta.

Na monitoru se stalno prikazuju izabrani efekti. Završetak ure�ivanja se potvr�uje sa Done, add title to movie i uneseni animirani tekst se pojav-ljuje na traci za montažu.


4. VIDEO EFEKTI

Osim prelaznih efekata za povezivanje delova u celinu, postoje i video efekti. Nakon provere efekta (dvostruki klik mišem), efekt se dodaje nekom od elemenata na traci prevla�enjem na sam element uz pomo� miša na simbol zvezdice na video klipu.

Drugi na�in je desnim klikom na element na traci i izborom Video Ef-fects..., nakon �ega se pojavljuje dijalog za dodavanje i uklanjanje efekata na jednom video klipu.

102 MULTIMEDIJA

5. DODAVANJE ZVUKA

Zvuk se dodaje u kolekciju izborom Import audio or music, a u vid-eo prevla�enjem na traku za montažu, kanal Audio/Music. Prethodno je potrebno podesiti prikaz na Show Timeline.

Kanal Audio/Music služi za naknadno dodavanje zvuka, dok je originalno snimljeni zvuk u kanalu Audio video klipa. Isklju�ivanje originalnog zvu-ka iz originalnog videa vrši se izborom stavke Mute iz kontekstnog menija (desni klik na Audio kanal).

Snimanje glasa se vrši tako što se pomo�u tastera Narrate Timeline (mi-krofon), kojim se aktivira snimanje sadržaja za Audio/Music kanal. Poja-vljuje se upravlja�ki ekran za podešavanje nivoa snimanja sa mikrofona i upravljanje snimanjem, a zvu�ni zapis se snima na fajl u Windows Media Audio formatu (.wma).


6. SNIMANJE MONTIRANOG VIDEA

Kona�ni video materijal je potrebno snimiti u nekom od digitlnih video formata sa Finish Movie / Save to my computer. Windows Movie Maker omogu�ava snimanje u formatima Windows Movie (.wmv) i nekompri-movani DVI-AVI (.avi).

Ukoliko se želi format zapisa druga�iji od ponu�enog u pogledu rezolu-cije, broja frejmova u sekundi ili potrebnog propusnog opsega, izabere se Show more choices i dobije se prošireni dijalog, na kome treba ozna�iti Other settings i izabrati neki od ponu�enih varijanti formata:

104 MULTIMEDIJA

Za nekomprimovani DVI-AVI(PAL), rezolucija je 720x576 uz 25 slika u sekundi i potreban propusni opseg od 30Mbps.

Obi�no su za prakti�nu upotrebu dovoljno kvalitetni formati Video for broadband (512Kbps) ili Video for local playback (1,5Mbps).

Vežba 2.4.1: Kreiranje jednostavnog videa koriš�enjem stati�nih rasterskih slika (WMV) – Windows MovieMaker

1. Kreiranje/izbor stati�kih slika (slajdovi)

2. Dodavanje prelaznih i video efekata

3. Izbor kodeka i snimanje � nalnog videa�� export videa u formatu windows .wmv

Kreiranje jednostavnog videa koriš�enjem stati�nih rasterskih slika:

1. Na posebnom folderu projekta izabrati i pripremiti rasterske slike za pogodne za izradu video prezentacije. U prozoru Collections izbrisati eventualne stare sadržaje.

2. U meniju Movie Tasks, pod Capture Video, izabrati Import Pictures. Pozicionirati se na folder u kome su slike za uvoz, selektovati slike i potvrditi sa Import.


Sve slike se pojavljuju u prozoru kolekcije.

3. Promeniti prikaz videa u Show Storyboard pogled. Potrebne slike se prevla�e mišem na prikaz video trake, svaka pojedina�no.

4. Pojedine sekvence i komponente se povezuju prelazima (Transition Effect). U meniju Edit Movie, kliknuti na prelaze (Video Transitions) i proveriti njihov efekt na monitoru klikom na taster Play. Izabrani efekt se ugra�uje prevla�enjem u kvadrat izme�u slajdova u prikazu.

106 MULTIMEDIJA

5. Dodati video efekte (Video Effect). Izborom video efekta na levoj strani i klikom na Play proverava se efekt, a prihvata se premeštanjem mišem na simbol zvezdice na samom slajdu. Istovremeno se može primeniti do 6 efekata na jedan slajd.

6. Film se može pogledati klikom na taster Play na monitoru. Pomo�u Alt+Enter se dobija prikaz na celom ekranu, a pritiskom na Esc se pri-kazivanje može prekinuti.

Trajanje slajdova i prelaza se može podesiti sa Tools / Options..., Ad-vanced, kao vrednosti (u sekundama) Picture duration i Transition du-ration.

7. Pomo�u File/Save Project As... se pamti samo projekt, odnosno struk-tura budu�eg video materijala. Sam video se kreira i pamti sa Finish Movie / Save to my computer.

Otvara se po�etni dijalog u kome treba uneti naziv fajla i folder na kome �e se sa�uvati, a zatim (nakon Next) slede�i dijalog u kome se biraju parametri budu�eg video materijala.


Podrazumevaju�e vrednosti su uokvirene u donjem levom delu ekra-na: format WMV (Windows Media Video), a rezolucija 640x480 uz 25 slika (frejmova) u sekundi. Komprimovani video �e zauzeti približno 1,68MB (nekomprimovano 3,55GB).

Prihvatiti ponu�ene vrednosti sa Next i sa�uvati prezentaciju u WMV video formatu (su� ks .wmv), a nakon formiranja videa, završetak se potvrditi tasterom Finish.

Vežba 2.4.2: Kreiranje jednostavnog videa koriš�enjem video klipova i teksta (WMV) – Windows MovieMaker

1. Kreiranje/izbor video sekvenci �� import videa bez zvuka (npr. sky-dive-landing.mpeg)

2. Dodavanje tekstualnih elemenata (slajdovi i titlovi)

3. Izbor kodeka i snimanje � nalnog videa�� export videa u formatima .wmv,.avi

�� sa kompresijom (WMV)�� bez kompresije (AVI)

1. Kreiranje/izbor video sekvenci

U ovom jednostavnom primeru koristi�e se jedna kratka video sekven-ca sky-dive-landing.mpeg na kojoj je snimljeno spuštanje osobe pa-dobranom. Sekvenca traje 2,73 sekunde, a originalno je snimljena u rezoluciji 144x112.

108 MULTIMEDIJA

U meniju Movie Tasks/Capture Video, izabrati Import Video, pozicioni-rati se na folder u kome su slike za uvoz, selektovati slike i potvrditi sa Import.

2. Dodavanje tekstualnih elemenata (slajdovi i titlovi)

Podesiti prikaz videa u Storyboard View, u kome se individualne sekvence prikazuju kao slajdovi. Slajdovi sa natpisima se dodaju izme�u njih, dok se titlovi unose na njih.

Postupak po�inje aktiviranjem Edit Movie/Make Titles or Credits, na-kon �ega se dobija meni sa funkcijama za dodavanje teksta na po�etak � lma, na po�etku sekvence, preko same sekvence, na kraju sekvence ili na kraju � lma.


Naslov videa �e se kreirati sa Add title at the beginning of the movie, npr.

Prikazani tekst (naslov i podnaslov) ima inicijalno postavljene vred-nosti za font, boje i animaciju teksta, koji se mogu menjati dodatnim opcijama u podmeniju, što u ovom slu�aju nije neophodno. Slajd se dodaje na po�etak � lma sa Done, add title to movie.

Tekst preko dela ili cele video sekvence dodaje se izborom iz menija Add title on the selected clip on the storyboard, npr.

Pri tome se tako�e može promeniti font, boja i animacija teksta. Efekti se ne prikazuju na originalnom klipu, ve� na testnoj video sekvenci. Kompletan materijal se bolje vidi u Show Timeline režimu, koji nakon unosa titla sistem bira automatski.

110 MULTIMEDIJA

3. Izbor kodeka i snimanje � nalnog videaSa File/Save Project As... se pamti samo projekt, odnosno struktura budu�eg video materijala. Sam video se kreira i pamti sa Finish Movie / Save to my computer. Otvara se po�etni dijalog u kome treba uneti naziv fajla i folder na kome �e se sa�uvati, a zatim (nakon Next) slede�i dijalog u kome se biraju parametri budu�eg video materijala. Podrazumevaju�e vrednosti su uokvirene u donjem levom delu ekrana: format WMV (Windows Media Video), a rezolucija 320x240 uz 25 slika (frejmova) u sekundi.

Ovaj format je pogodan za upotrebu uz operativni sistem Windows, što na Web-u nije dovoljan nivo kompatibilnosti. Nažalost, relativno jednostavni Windows Movie Maker obezbe�uje samo razli�ite varijante WMV formata i nekomprimovani AVI format zapisa. Ovakav nekomprimovani AVI zapis može se naknadno kom-primovati nekim od besplatnih programa za konverziju formata video zapisa.Ukoliko se želi druga�iji WMV format (rezolucija, broj frejmova, bi-trate) ili nekomprimovani AVI, izabere se Show more choices i dobije se prošireni dijalog, na kome treba ozna�iti Other settings i izabrati neki od ponu�enih varijanti formata:


Za nekomprimovani DVI-AVI(PAL), rezolucija je 720x576 uz 25 slika u sekundi i potreban propusni opseg od 30Mbps. Veli�ina zapisa je nešto manje od 30MB, dok je za komprimovani WMV u rezoluciji 320x240 (koja je tako�e prevelika) oko 940KB.Neki od besplatnih programa za kompresiju AVI i drugih formata za-pisa su MediaCoder (http://mediacoder.sourceforge.net/wiki), SUPER (Simpli� ed Universal Player Encoder & Renderer, www.erightsoft.com) i RAD Video Tools (www.radgametools.com).

112 MULTIMEDIJA

Vežba 2.4.3: Kreiranje jednostavnog videa dodavanjem i sinhronizacijom zvuka (WMV) – Windows MovieMaker

1. Kreiranje/izbor video sekvenci�� import videa bez zvuka (npr. sky-dive-landing.mpeg)

2. Kreiranje/izbor zvu�nih sekvenci�� import zvuka (npr. Kuguars - Dejo.mp3)

3. Sinhronizacija video i zvu�nih sekvenci�� dodavanje zvuka �� odre�ivanje dužine (~3s)

4. Dodavanje efekata za sliku i zvuk (prelazi)

5. izbor kodeka i snimanje � nalnog videa�� export videa

�� windows .wmv (sa zvukom)


U ovom jednostavnom primeru koristi�e se ista kratka video sekven-ca sky-dive-landing.mpeg iz primera 2.4.2, na kojoj je snimljeno spuštanje muške osobe padobranom (traje 2,73 sekunde, u rezoluciji 144x112).

U meniju Movie Tasks/Capture Video, izabrati Import Video, pozicioni-rati se na folder u kome su slike za uvoz, selektovati slike i potvrditi sa Import.

2. Kreiranje/izbor zvu�nih sekvenci.

Može se upotrebiti muzi�ka tema, koja direktno ili na neki posredan na�in asocira na sadržaj videa.

U ovom slu�aju je izabrana tema skandiranja iz numere Kuguars - Dejo.mp3, koja se odnosi na mušku osobu i može se izabrati deo koji završava u raspoloživom vremenu od 2,73 sekunde.


3. Sinhronizacija video i zvu�nih sekvenci

Povezivanje skevenci u jedinstenu video prezentaciju se vrši prevla�enjem na video-traku u donjem delu ekrana.

Za sinhronizaciju zvuka sa video zapisom potrebno je promeniti na�in prikaza u prikaz vremenske skale (Show Timeline), u kome se zvu�ni kanal posebno prikazuje.

114 MULTIMEDIJA

Sinhronizacija zvuka �e se izvršiti prevla�enjem izabrane zvu�ne (muzi�ke) sekvence na zvu�nu traku video zapisa.

Rezultat se proverava na monitoru Windows MovieMaker-a:

Video se može pokrenuti i zaustaviti, a teku�i frejm se može sa�uvati kao rasterska slika.

4. Dodavanje efekata za sliku i zvuk

Za prijatniji utisak, nagle promene zvuka i slike treba ublažiti. To se postiže efektima uvo�enja i prelazima (transitions) u meniju Edit Movie sa leve strane ekrana.


Svaki video efekt je ilustrovan animacijom, a kona�no izabrani efekt se prevla�enjem na traku postavlja na po�etak ili kraj elementarne vid-eo sekvence.

5. Izbor kodeka i snimanje � nalnog videa

Za korisnike programa Windows MovieMaker pretpostavlja se ograni�eno poznavanje standarda snimanja multimedijskih sadržaja i nudi ograni�en izbor na�ina zapisa: razli�ite varijante WMV formata i nekomprimovani AVI format (koji se može naknadno komprimovati nekim od besplatnih programa za konverziju formata video zapisa).

Za uobi�ajenu primenu u svrhu prezentacije pod operativnim siste-mom Windows može se koristiti WMV format zapisa, za koji treba samo odabrati kvalitet i veli�inu zapisa.

116 MULTIMEDIJA

2.5 VIRTUELNA STVARNOST

Uvod

Virtuelne stvarnosti (virtual reality, VR) je vešta�ki kreirano 3D okruženje za ra�unarsku simulaciju prostornih interakcija.

VRML (Virtual Reality Modeling Language) je klasi�an jezik i format za prikaz interaktivne 3D vektorske gra� ke za potrebe Web-a (objekti se ugra�uju u HTML).

Jezik VRML je zamenjen novim ISO standardom X3D, a za prikaz virtuel-nih svetova se koriste i drugi gra� �ki jezici.

Za potpunu interakciju korisnika se upotrebljavaju razli�iti senzori i do-daci (kaciga, 3D nao�are).

Primena tehnologije VR je u edukaciji (razli�iti modeli, npr. anatomski), obuci (trenažeri) i zabavi (video i ra�unarske igre).

Primeri VR kreacija sa Web-a

Vežba 2.5.1: Demonstracija jednostavne VR kreacije (Web)

Demonstracija jednostavnije VR kreacije (.wml)

1. instalacija besplatnog dodatka za Web �ita� (plug-in Cortona VRML Viewer cortwrml.exe)http://www.parallelgraphics.com/products/cortona/

2. prikaz virtielnog sveta (.wml) pomo�u Web �ita�a

Za prikaz virtuelnih svetova u Web �ita�u neophodan je VRML interpreter. Jedan od besplatnih dodataka je VRML Viewer � rme Cortona. Instalira se jednostavnim pokretanjem instalacionog programa cortwrml.exe.

Prikaz jedne od kreacija virtuelne realnosti (sveta) concordeaf.wrl može se izvršiti nakon instalacije dodatka pomo�u Web �ita�a, a upravljanje kre-tanjem vrši se namenskim tasterima koji se prikažu sa strane i pokretima miša.


Samostalni rad: Virtuelna realnost na � lmu (Tron)

Upoznati se sa sadržajem i realizacijom � lma Tron, jednog od prvih � lmova za �iju izradu je koriš�ena (tada) nasavremenija ra�unarska gra� ka za kreiranje sveta virtuelne realnosti u kome se odvijao ve�i deo radnje.

http://www.3gcs.com/tron/http://www.sci� moviepage.com/

Film je bio veoma skup poduhvat studija Walt Disney, a u glavnoj ulozi je Jeff Bridges. Uprkos relativnom neuspehu, postavio je standarde na podru�ju � lmske animacije.

118 MULTIMEDIJA

Film Tron se pojavio 1982. godine, zajedno sa tako�e poznatim ostvarenjem, � lmom Blade Runner studija Warner Bros..


2.6 MULTIMEDIJSKE KOMUNIKACIJE

Cilj

Upoznavanje sa standardima i alatima koji omogu�avaju multi-medijsku komunikaciju u lokalnoj i globalnoj mreži.

Multimedijsko umrežavanje se bavi predstavljanjem, memorisanjem, pronalaženjem, prenosom i distribucijom multimedijskih informacija (tek-sta, glasa, zvuka, slike, animacije i videa) u ra�unarski �itljivom obliku.

Tipi�ne primene su: konferencije (conferencing), razmena poruka (mes-saging), pronalaženje informacija (retrieval), reprodukcija u realnom vre-menu (streaming), video na zahtev (video-on-demand, VOD), interaktivna televizija, elektronsko poslovanje (e-commerce) i dr.

Mrežno povezivanje radi multimedijske komunikacije zahteva upotrebu razli�itih sistema i alata, kao što su npr. alati za audio/videokonferencije, za izradu i prikaz multimedijskih i Web sadržaja (authoring), sistemi elek-tronske pošte, softver neophodan za rad mrežnih servera i dr.

Primeri nekih alata za multimedijsko umrežavanje su Microsoft NetMeet-ing, Windows Media Player, RealPlayer, Windows Movie Maker, Adobe Premiere, Pinnacle Studio.

Vežba 2.6.1: Kvalitet prenosa video signala u ra�unarskoj mreži

Uticaj promene propusne mo�i na kvalitet prenosa video sadržaja:

1. Koriste�i Windows Movie Maker, prekodirati izabrani video insert približno DVD kvaliteta uz ograni�enje propusnosti (brzinu preno-sa) na nekoliko razli�itih manjih vrednosti.

2. Koriste�i Windows Media Player, proveriti uticaj ograni�enja brzine prenosa na prikaz video sadržaja.

120 MULTIMEDIJA

1. Koriste�i video editor Windows Movie Maker, prekodirati izabrani video insert surfcamp.avi rezolucije 320x240, sa 16-bitnim stereo zvukom, u .wmv format uz ograni�enje propusnog opsega (brzinu prenosa) na vrednosti: 38Kbps, 48Kbps, 150Kbps, 512Kbps i 1Mbps.

Video klip surfcamp.avi skromne rezolucije 320x240 bita kodiran je tako da je za normalnu reprodukciju potrebno obezbediti prenos podataka (bitrate) od 1Mbps (za zvuk 1,4Mbps a za sliku 0,74Mbps).

Nakon prevla�enja na izlaznu traku Window Movie Maker-a, prekodiranje se vrši pomo�u “�arobnjaka”, koji se aktivira izborom File/Save Movie File/My Computer.

Odredi se naziv .wmv fajla, a zatim na�in kodiranja (kompresija), npr.:

Postavljanje ograni�enja na brzinu prenosa daje u reprodukciji isti efekt kao i ekvivalentni kapacitet prenosnog puta.


U slede�oj tabeli su na�ini kompresije koje treba izabrati u ovoj vežbi (konkretne parametre slike i zvuka odre�uje sistem):

Protok Kompresija slika zvuk fps

38k Video for dual-up access (38Kbps) 160x120 8 KHz mono 15

48k Video for ISDN (48Kbps) 160x120 8 KHz mono 15

150k Video for broadband (150Kbps) 320x240 16KHz mono 15

512k Video for broadband (512Kbps) 320x240 44KHz stereo 25

1000k High quality (small) 320x240 44KHz stereo 25

2. Koriste�i Windows Media Player, pokrenuti reprodukciju svakog od video materijala sa diska i proveriti uticaj ograni�enja brzine prenosa na kvalitet reprodukcije video sadržaja.

Uo�ava se da na kvalitet reprodukcije ovog kratkog video inserta niske rezolucije i relativno kvalitetnog zvuka u ve�oj meri uti�u zahtevi prenosa i reprodukcije zvuka nego slike.

122 MULTIMEDIJA

Vežba 2.6.2: Uticaj kompresije video signala na kvalitet reprodukcije

Uticaj razli�itih metoda kompresije na kvalitet reprodukcije video sig-nala (sopstveni video materijal).

1. Izabrati više razli�itih video materijala u formatima MPEG/AVI/WMV. Pomo�u funkcije File/Properties Windows Media Player-a ustanoviti naziv codec-a.

2. Pomo�u programa Windows Movie Maker kreirati nekomprimovanu verziju u formatu DV-AVI.

3. Proveriti reprodukciju u razli�itim uslovima (kao u vežbi 2.6.1).

123INTERNET I WEB TEHNOLOGIJE

3. INTERNET I WEB TEHNOLOGIJE

Cilj

Kroz primere, vežbe i demonstracije upoznavanje sa razvojem mul-timedijske komunikacije u globalnoj mreži, posebno Web prezent-acija.

3.1 NASTANAK INTERNETA

Uvod

Internet predstavlja povezan skup ra�unarskih mreža4 (mreža mreža) koje koriste Transmission Control Protocol (TCP) i Internet Protocol (IP), odnosno skup protokola pod zajedni�kim nazivom TCP/IP.

Savremena javna Internet mreža je nastala razvojem i komercijalizacijom tehnologije koju je koristila nau�na ra�unarska mreža ameri�kog ministras-tva odbrane ARPANET (Advanced Researches Projects Agency, ARPA).

Ideju moderne tehnologije povezivanja nau�nih informacija izneo je još 1945. godine ameri�ki nau�nik dr Vannevar Bush u �lanku za �asopis Atlantic Monthly (”As We May Think”, Atlantic Monthly, July 1945), u kome je opisao foto-elektro-mehani�ki ure�aj za pam�enje dokumenata na mikro� šu, koji može da kreira i prati tekstualne veze (links) izme�u njih.

4 Ra�unarska mreža je sistem ra�unara povezanih pomo�u telefonskih linija ili na neki drugi na�in radi deljenja informacija.

124 MULTIMEDIJA

Vannevar Bush je nau�nik koji je tridesetih godina 20. veka razvio prvi elektronski analogni ra�unar. Za vreme drugog svetskog rata bio je nau�ni savetnik ameri�kog predsednika Ruzvelta i osniva� Of� ce of Scienti� c Research and Development, tela koje je nadziralo strategijske projekte, izme�u ostalog i projekt razvoja atomske bombe.

Od 1946 do 1947, Bush je predsedavao telu Joint Research and Develop-ment Board, iz koga se razvila DARPA (Defense Advanced Researches Projects Agency), koja �e pokrenuti projekt ARPANET.

Vizionarski opisao budu�u upotrebu informacionih tehnologija, što je in-spirisalo mnoge kreatore Interneta.

Hipertekst i gra� �ki interfejs

Hipertekst (hypertext) je tekst koji ne mora da bude linearan, odnosno tekst koji sadrži veze prema drugim tekstovima. HyperMedia je hipertekst koji ne mora da bude samo tekst, ve� može da sadrži druge multimedijske sadržaje, npr. gra� ku, video i zvuk.

Za hipermedijske dokumente važe dva osnovna principa:

1. Svaka stranica (page) ima sopstvenu � zi�ku adresu (u slu�aju World-Wide Web-a, njegov Uniform Resource Locator or URL).

2. �italac se može slobodno pomeriti sa jedne stranice na drugu klikom na re�, niz re�i ili sliku, kao vezu (link). Veza je dizajnirana i posebno ozna�ena na ekranu, npr. osvetljena u drugoj boji ili potcrtana.

Klikom miša na takvu vezu, prelazi se na stranicu �ija se adresa kod ve�ine �ita�a prikazuje na dnu aktivnog prozora kada se mišem prelazi preko veze.


Svaka stranica može da ima relativno mnogo mogu�ih veza. �italac može da izabere jednu od njih ili da ru�no unese sasvim proizvoljnu drugu ad-resu.

Termine hypertext i hypermedia uveo je Ted Nelson u �lanku ”A File Structure for the Complex, the Changing, and the Indeterminate”, 20th National Conference, New York, Association for Computing Machinery, 1965.

Zamislio je projekat svetskog sistema za elektronske publikacije koji bi predstavljao neku vrstu univerzalne svetske biblioteke (Xanadu).

WorldWideWeb

WorldWideWeb (WWW, W3 ili samo Web) je sistem Internet servera koji podržava posebno formatirane dokumente. Dokumenti su formatirani u posebnom jeziku pod nazivom HTML (HyperText Markup Language) koji omogu�ava veze prema drugim dokumentima, kao i gra� �kim, audio i video datotekama.

Tehni�ki, predstavlja globalni gra� �ki hypertext informacioni sistem koji se izvršava na Internet mreži. Ne treba ga poistove�ivati sa celim Inter-netom, koji se sastoji od razli�itih vrsta servera, koji nisu deo Web-a.

Pristup dokumentima se ostvaruje preko posebnih aplikacija, tzv. Web �ita�a (Web browsers), kao što su Netscape Navigator, Internet Explorer, Opera ili Mozilla Firefox. Jednim klikom miša se prelazi u neki dokument, bez obzira gde se on � zi�ki nalazi.

Osnovna jedinica sadržaja je Web stranica (Web page), koja tehni�ki pred-stavlja tekst u jeziku HTML.

Prvi gra� �ki hipertekst editori

U evropskom centru za nuklearna istraživanja (CERN) konsultant Tim Ber-ners-Lee se gotovo deceniju bavio problemom stvaranja dobrog hipertekst sistema. Godine1989. u �lanku ”Information Management: A Proposal”, zajedno sa prilogom ”HyperText and CERN”, predložio je a 1990. i razvio program WorldWideWeb kao WYSIWYG browser/editor sa mogu�noš�u direktnog kreiranja linkova.

Za potrebe sistema je prilagodio jezik SGML (Standard Generalized Markup Language), ISO standard za opis stranice i uveo njegovu pojed-

126 MULTIMEDIJA

nostavljenu verziju HTML (HyperText Markup Language) za opis izgleda hipertekst dokumenata.

Prva Web prezentacija

Prvi Web server je imao Internet adresu info.cern.ch i funkcionisao je do 2003. godine. Kao prilog razvoju Interneta, 30. aprila 1993. godine CERN je objavio deklaraciju prema kojoj svako može da koristi WWW tehnologiju besplatno.

Vežba 3.1.1 Primeri Web prezentacija

1. Primer elementarnog hiperdokumenta: holtorfhttps://tspace.library.utoronto.ca/citd/holtorf/0.1.html

2. Primeri klasi�ne primene animacije i zvukahttp://www.centex.net/~elliott http://www.starwars.com

3. Vremenska prognoza IntelliCast http://www.intellicast.com

4. Virtuelna tura (muzeji)http://www.thebritishmuseum.ac.uk/http://www.nhm.ac.uk/http://www.louvre.fr/http://www.louvre.fr/llv/musee/visite_virtuelle.jsp?bmLocale=en

5. Druge lokacije, po izboru studenata

U navedenim primerima treba uo�iti promene u pristupu kreiranju hiper-dokumenata: od shvatanja Web lokacije kao (nelinearne) knjige, koja ima belu podlogu i crna slova, ali se može pomo�u aktivnog sadržaja i pove-zanih pojmova �itati na razli�ite na�ine do savremenih zahtevnih interak-tivnih aplikacija, oboga�enih zvukom, videom i 3D animacijama.

Forma i tehnologija su veoma važne za profesionalni izgled i poverenje posetilaca, ali istraživanja pokazuju da je ipak osnovni razlog pose�enosti neke Web lokacije njen sadržaj, odnosno važnost i kvalitet informacija koje obezbe�uje.


1. Primer elementarnog hiperdokumenta (Cornelius J. Holtorf, Monu-mental Past,1998)

https://tspace.library.utoronto.ca/citd/holtorf/0.1.html

2. Primeri po�etni�ke i klasi�ne primene animacije i zvuka

http://www.centex.net/~elliott

128 MULTIMEDIJA

http://www.starwars.com

3. Vremenska prognoza IntelliCasthttp://www.intellicast.com

4. Virtuelne ture (muzeji)Britanski muzej: http://www.thebritishmuseum.ac.uk/


Prirodnja�ki istorijski muzej http://www.nhm.ac.uk/

Luvr http://www.louvre.fr/

130 MULTIMEDIJA

Luvr - virtuelne ture: http://www.louvre.fr/llv/musee/visite_virtuelle.jsp?bmLocale=en

Virtuelna tura Egyptian Antiquities (QuickTime), sa uve�anjem


Vežba 3.1.2 Upoznavanje sa HTML

Identi� kacija programskih alata i tehnika za kreiranje multimedijskih sadržaja koje su slušaoci do sada upoznali:

1. Kreiranje elementarnog HTML dokumenta pomo�u tekst-editora (Notepad)

2. Pregled i izmene HTML dokumenta pomo�u �ita�a (Internet Ex-plorer)

3. Pregled složenog HTML dokumenta pomo�u �ita�a (Internet Ex-plorer)

1. Kreiranje elementarnog HTML dokumenta pomo�u tekst-editora (Notepad)

Aktivirati Notepad i uneti slede�i tekst:

<html> <head> <TITLE>Jednostavan HTML dokument</TITLE> </head> <body> <H1>HTML je lako nau�iti</H1> <P>Dobro došli u svet HTML. Ovo je prvi paragraf. Iako unesen u dva reda ipak se prikazuje u jednom, ako ima prostora!</P> <P>Ovo je drugi paragraf.</P> </body> </html>

Sa�uvati ga na fajlu pod proizvoljnim imenom, recimo index.html (ili . index.htm)

2. Pregled i izmene HTML dokumenta pomo�u �ita�a (Internet Explor-er)

Pokrenuti Web �ita� (recimo InternetExplorer) i otvoriti index.html.

132 MULTIMEDIJA

Uo�iti naslov prozora i format teksta u prozoru �ita�a (font, stil i veli�ina). Formatiranje teksta je izvršeno na osnovu podrazumevaju�ih vrednosti, koje se de� nišu prilikom instalacije ili podešavanja Web �ita�a, izuzev teksta HTML je lako nauciti, koji je delimi�no formati-ran primenom stila Heading 1 (H1).

3. Pregled složenog HTML dokumenta pomo�u �ita�a (Internet Explor-er).

Izabrati proizvoljnu HTML stranicu i pregledati njen izvorni HTML kod. Uo�iti osnovne HTML oznake, kao i elemente koji spadaju u za-glavlje i telo stranice.

Samostalni rad

1. Pro�itati originalni �lanak iz 1946. godine o predlogu sistema razmene nau�nih informacija iz kog se razvila ideja svetske mreže - Interneta (bush-1945.pdf)

2. Pro�itati originalni �lanak o ideji Web-a i nastanku HTML (pro-posal.rtf)

133OSNOVE WEB DIZAJNA

4. OSNOVE WEB DIZAJNA

Cilj

Ovladavanje osnovama kreiranja hiperdokumenata za Web i prakti�no uvežbavanje izrade stati�kih poslovnih Web prezentacija pomo�u izabranog gra� �kog editora u tipi�nim poslovnim prime-nama.

Iako su moderne Web lokacije po tehnologiji realizacije više informacioni sistemi nego elektronske publikacije, vizuelni izgled i principi dizajna se upravo oslanjaju na pristup koji je razvijen u dizajnu štampanih publikaci-ja, kao što su novine, knjige i �asopisi.

Prvi Web dizajner bio je Tim Berners-Lee, koji je 1990-1991. godine raz-vio globalni hipertekst sistem WorldWideWeb i kreirao prvu Web lokaciju na Internetu info.cern.ch. Osnova ovog hipertekst sistema je jezik HTML. Osim opisa prikaza informacija, HTML je omogu�io povezivanje sadržaja na globalnom nivou pomo�u hiperveza.

Izgled Web stranica je kreiran koriš�enjem tabela za raspored teksta i slika, a zatim i kaskadnih stilova (Cascade Style Sheet, CSS). Ovi mehanizmi su dovoljni za izradu Web lokcija koje se uglavnom sastoje od stati�kih Web stranica.

U daljem razvoju, Web lokacije su postale složeni informacioni sistemi, koji se oslanjaju na baze podataka i serverske jezike (server-side script-ing languages) i koriste posebne razvojne alate za upravljanje dinami�kim sadržajima.

4.1 OSNOVNI PROGRAMSKI ALATIOsnovni programski alati za kreiranje Web stranica �esto se nazivaju alati za neposrednu izradu Web sadržaja (Web authoring tools) ili HTML edito-ri. Ovi alati se koriste za izradu HTML dokumenata i integraciju razli�itih multimedijskih materijala u jedinstvenu celinu - Web lokaciju (site).

Najpoznatiji komercijalni alati ove vrste su gra� �ki (WYSIWYG) editori

134 MULTIMEDIJA

Macromedia Studio Dreamweaver, Microsoft FrontPage, Adobe GoLive i (ranije) Adobe Page Mill. Postoje brojni besplatni alati (open source i freeware) razli�ite složenosti, npr. tekstualni HTML editor Arachophilia i gra� �ki Quanta Plus i Mozilla Composer.

Brojni su i namenski alati za pojednostavljivanje procesa izrade komplet-nih Web lokacija, kao npr. Macromedia HomeSite.

Na vežbama �e se prvenstveno koristiti Macromedia Dreamweaver, a može se koristiti i Microsoft FrontPage, pošto je raspoloživ u okviru ak-tuelne verzije paketa Microsoft Of� ce.

UPOZNAVANJE SA PROGRAMOM MACROMEDIA DREAMWEAVER

1. Priprema za rad

2. Kreiranje stranice

3. Organizacija sadržaja

4. Ure�ivanje stranice

4.1. Unos teksta i nabrajanja

4.2. Kreiranje hiperveza

4.3. Upotreba rasterskih slika

4.4. Upotreba tabela

Dreamweaver je program za izradu Web stranica, koji omogu�ava vizuel-no ure�ivanje, ali i direktno pisanja HTML koda i izradu dinami�kih Web aplikacija uz pomo� serverskih skript jezika kao što su ASP/ASP.NET, JSP, PHP i CFML (Cold Fusion Markup Language).

1. PRIPREMA ZA RAD

Nakon pokretanja programa (Start/Programs/Macromedia/Macromedia Dreamweaver MX), prikazuje se slede�a radna površina:


Kao i kod drugih gra� �ki orijentisanih razvojnih alata, glavni meni je služi za izbor svih funkcija programa, a palete alatki služe za brzi pristup naj�eš�e koriš�enim funkcijama.

Prozor za rad na dokumentu može se proširiti na ceo ekran maksimizovan-jem prozora, zatvaranjem grupe panela sa desne strane klikom na kontrolu u obliku strelice i zatvaranjem donjeg panela za prikaz svojstava objekata (Property Inspector).

Za po�etak rada i kreiranje prve stranice, potrebno je znati na kom folderu �e se kreirati nova stranica, odnosno na kojoj Web lokaciji �e se testirati (koristiti).

2. KREIRANJE STRANICE

Izabrati iz glavnog menija File/New, a zatim u dijalogu izabrati kategoriju Basic page i obrazac stranice HTML. Na kraju povrditi izbor pomo�u tastera Create.

136 MULTIMEDIJA

Nakon toga u meniju View izabrati Code (ili taster Code ) za prikaz HTML koda nove stranice:

Slede�a dva teastera iz palete služe za ozbor gra� �kog na�ina prikaza sadržaja stranice (Design ), kombinovanog prikaza i dizajna i koda (Split ) i za izbor prikaza stvarnog izgleda stranice u Web �ita�u, sa eventualnim dinami�kim podacima (Preview ), za koji je potrebno da se stranica prethodno sa�uva na folderu testnog servera.

Nova stranica ima strukturu HTML dokumenta, ali još nema nikakvog sadržaja za prikazivanje.

Prelaskom u Design View i kucanjem paragrafa teksta, kao u tekst editoru, dobija se stranica teksta, koja se može zapamtiti kao hipertekst dokument.


U Code and Design View, vidi se da je tekst smešten izme�u HTML ozna-ka <body> i </body>. Tekst se prikazuje na samom vrhu ekrana (poravnat je levo gore), u fontu i veli�ini slova koji su podrazumevaju�i za konkretnu instalaciju (mogu se promeniti pomo�u Edit/Preferences/Fonts).

Da bi se video stvarni gra� �ki izgled stranice, potrebno je prethodno stranicu sa�uvati sa File/Save As... na neki folder i dodeliti joj ime.

3. ORGANIZACIJA SADRŽAJA

Korisni sadržaj (tekst i gra� ka) može se uneti u stranicu na proizvoljno mesto i prikaziva�e se relativno - u odnosu na druge sadržaje.

Za dobru organizaciju stranice potreban je mehanizam koji omogu�ava raspore�ivanje elemenata stranice na unapred odre�ena mesta. HTML ta-bele omogu�avaju podelu ekrana na regione �iji položaj i veli�ina se mogu de� nisati, a time i položaj drugih elemenata stranice koji se smeštaju u �elije tabele.

Nešto složeniji mehanizam je mogu�nost podele na podstranice (okvire, frejmove), ali se taj pristup u ovom materijalu ne�e koristiti.

4. UREIVANJE STRANICE

Ure�ivanje stranice se može posmatrati kao raspore�ivanje raspoloživih HTML komponenti po radnoj površini: teksta, nabrajanja, slika, audio i video materijala, tabela, formi itd.

138 MULTIMEDIJA

Unos teksta i nabrajanja

Tekst se unosi neposredno u stranicu. Prikazuje se u podrazumevaju�em fontu, veli�ini i poravnanju, koji se mogu promeniti u panelu svojstava (properties).

Nabrajanje se može uneti sa Insert/HTML/Text object/Unordered list (ili Ordered list), nakon �ega se unosi sadržaj (stavka po stavka) ili kao modi� kacija postoje�eg teksta (a), selekcijom više paragrafa (b) i klikom na odgovaraju�i taster u panelu svojstava (

,)(c).

(a) (b) (c)

Kreiranje hiperveza

Hiperveza se može uneti kao novi HTML objekt (Insert/Hyperlink), a mogu�e je delu postoje�eg teksta dodeliti oznaku hiperveze.

Minimalno se selektuje ili unosi tekst koji �e predstavljati hipervezu na ekranu (Text) i lokacija stranice na koju �e se hipervezom pre�i (Link), a može se uneti oznaka prozora u kome �e se prikazati nova stranica (Target) i drugo.

Ukoliko se ne unese oznaka prozora, nova stranica se prikazuje u istom prozoru (_self), a za prikaz u novom prozoru bira se _blank.


Upotreba rasterskih slika

Rasterske slike su, uz tekst, osnovni elementi vizuelnog dizajna Web stranica. Koriste se kao pasivni objekti (za ilustracije) i kao aktivni objekti (za navigaciju).

Uvoz slika se vrši izborom Insert/Image i pronalaženjem lokacije slike.

U dijalogu se, osim slike, bira i na�in formiranja njene URL adrese. Po-godno je uvek koristiti relativne adrese, pa pre povezivanja treba sve slike prikupiti ispod foldera u kojem se kreiraju Web stranice.

Upotreba tabela

Tabele podržavaju svi Web �ita�i, pa predstavljaju osnovni i pouzdan ele-ment za raspore�ivanje ostalih komponenti po radnoj površini. elije ta-bele je mogu�e objedinjavati/deliti i vertikalno i horizontalno, tako da se mogu realizovati razli�ite šeme rasporeda komponenti stranice.

Tabela se kreira izborom Insert/Table (ili pomo�u tastera ). U dijalogu se zadaju osnovni parametri: po�etni broj redova (Rows) i kolona (Col-umns), razmak izme�u teksta i ivice �elije tabele (Cell padding), razmak izme�u �elija tabele (Cell spacing), kao i debljina linije za iscrtavanje mreže tabele (Border thicknes; bordura 0 zna�i da se linije mreže tabele ne iscrtavaju).

Širina cele tabele tabele (Table width) može se zadati u pikselima ili pro-centualno, u odnosu na širinu prozora Web �ita�a.

140 MULTIMEDIJA

Širina tabele u pikselima se zadaje kada je potrebno o�uvati � ksne širine kolona radi raspore�ivanja rasterskih komponenti, pošto se širina prozora u pikselima menja zavisno od rezolucije ekrana. Procentualno zadavanje širine koristi se kada je potrebno da tabela uvek zauzima celu raspoloživu širinu prozora, bez obzira na rezoluciju ekrana (u primeru na slici 731 piksel).

Tabela se kreira u podrazumevaju�em poravnanju (Align) u odnosu na celu stranicu (obi�no ulevo), što se može promeniti u panelu svojstava. Svo-jstva se dodeljuju celoj tabeli ili samo njenom delu, zavisno od selekcije.

Selekcija se vrši pritiskom na levi taster Shift i prevla�enjem miša preko selektovanih �elija ili klikom miša na svaku �eliju iz selekcije, uz pritisnut taster Shift.

U �elije tabele se mogu unositi drugi HTML elementi (tekst, slike, forme), kao i druge tabele.


4.2 ANALIZA I PLANIRANJEUprkos šaljivom pesimizmu Drugog Golubovog zakona ra�unarstva5, planiranje je nezaobilazni deo dizajna. Prema [4] planiranje izrade Web sajta podrazumeva:

1. planiranje projekta izrade Web sajta kroz izbor saradnika i analizu ciljeva koje treba ostvariti izradom Web sajta

2. izradu detaljne speci� kacije Web sajta, u kojoj se de� nišu ciljevi, tehnološko rešenje, potrebni resursi, rokovi realizacije i na�in veri� -kacije.

Izbor saradnika i analiza ciljeva obuhvata de� nisanje nekoliko osnovnih ciljeva koje treba ostvariti kroz realizaciju sajta, kao i kvalitativne i kvanti-tativne pokazatelje njegove uspešnosti, de� nisanje ciljne grupe korisnika, �ije potrebe i o�ekivanja Web sajt treba da zadovolji, kriti�ku analizu vari-janti dizajna iz korisni�ke perspektive i pregled potrebnog sadržaja.

Speci� kacija Web sajta podrazumeva sažet opis glavnih ciljeva izrade sajta i na�ina na koji �e se oni realizovati na Web-u, okvirni sadržaj samog saj-ta, potrebna � nansijska sredstva, dinami�ki plan realizacije i sve posebne tehni�ke i funkcionalne zahteve.

5 ”Aljkavo planirani projekti traju tri puta duže nego što je predvi�eno; brižljivo planirani projekti traju samo dvostruko duže”

142 MULTIMEDIJA

4.3 KREIRANJE WEB LOKACIJEPrvo smo mislili da je PC kalkulator. Zatim smo otkrili kako da pret-vorimo brojeve u slova pomo�u ASCII koda i mislili da je pisa�a mašina. Zatim smo otkrili gra� ku i mislili da je televizija. Uz World Wide Web, shvatili smo da je brošura.

Daglas Noel Adams (1952-2001), pisac i satiri�ar, autor ”Autostop-erskog vodi�a kroz galaksiju”

Proces razvoja složenijeg Web sajta naj�eš�e se može podeliti na slede�e glavne faze [4]:

1. De� nisanje i planiranje

2. Izrada informacione arhitekture

3. Projektovanje sajta (design)

4. Izrada sajta (construction)

5. Promocija sajta (marketing)

6. Pra�enje, ocenjivanje i održavanje

Na vežbama �e se uglavnom koristiti jasno de� nisani i relativno jednostav-ni primeri stati�kih Web lokacija, tako da sve faze razvoja može da reali-zuje jedna osoba (student) za raspoloživo, dovoljno kratko vreme.


4.4 KREIRANJE WEB STRANICE

Priprema: Pro�itati poglavlje o kreiranju lokacije i Web stranice [4].

Vežba 4.4.1 U�itavanje Web stranice

�� Provera vremena u�itavanja demonstracionih Web stranica:�� samo tekstualni sadržaj�� tekst i sekvencijalno kodirana slika (JPEG, 3MB)�� tekst i progresivno kodirana slika (PNG-24, 9MB)

1. Koriste�i komandu File/Open Dreamweaver-a otvoriti pripremljene demonstracione stranice Tekst.html, SekvSlika.html i ProgrSlika.html.

2. Proveriti izgled stranica u Web �ita�u

144 MULTIMEDIJA


3. Vreme u�itavanja ovih jednostavnih stranica u celini zavisi od vre-mena potrebnog za u�itavanje (kopiranje) velikih slika.

Procena vremena u�itavanja velikih slika pomo�u opcije Save for Web programa Adobe Photoshop ili prate�eg programa Adobe ImegeReady za razli�ite brzine Internet konekcije je:

Brzina Internet konekcije

Sekvencijalno/progresivno kodirana JPEG slika

Progresivno kodirana PNG-24 slika

56Kbps 100s 1.804s

256Kbps 23s 399s

1Mbps 6s 101s

146 MULTIMEDIJA

Vežba 4.4.2 Kreiranje li�ne stranice

Kreirati li�nu stranicu u izabranom alatu (Dreamweaver ili Front Page) na slede�i na�in:

1. Zapo�eti od prazne (osnovne) stranice, a ne od template-a.

2. Na stranici kreirati tabelu od 2x2 elementa. Linije tabele (border) u�initi nevidljivim.

3. U gornju levu �eliju tabele u�itati sliku (insert/image), koju po mogu�nosti zameniti sopstvenom fotogra� jom.

4. U gornju desnu �eliju tebele uneti osnovne podatke o sebi (ime, prezime, JMBG i sli�no), levo poravnato

5. Donje dve �elije tabele spojiti u jednu (selektovati mišem, pa table/merge), a zatim uneti sopstvenu kratku biogra� ju.

6. Stranicu zapamtiti, prikazati u �ita�u i po potrebi modi� kovati.

Ovakva stranica se može upotrebiti za formiranje spiska studenata tre�e godine FPI.

1. Zapo�eti od prazne (osnovne) HTML stranice, a ne od template-a.


2. Na stranici pomo�u Insert/Table kreirati tabelu od 2x2 elementa. Širinu podesiti na 100% (percent), a linije tabele (border thickness) u�initi nevidljivim.

Uneti naziv stranice (title) i sa�uvati stranicu pomo�u File/Save As... na izabrani folder.

3. Na istom folderu kreirati podfolder images, na koji kopirati rastersku sliku do 400 pixel-a (po mogu�nosti sopstvenu fotogra� ju).

Kopirati rastersku sliku u gornju levu �eliju tabele pomo�u Insert/Im-age. Uneti atribut dostupnosti ‘Alternate text’.

Po potrebi mišem podesiti širine kolona tabele.

148 MULTIMEDIJA

4. U gornju desnu �eliju tebele uneti osnovne podatke o sebi (ime, prezime, JMBG i sli�no), levo poravnato. Za manji prored paragrafa treba koristiti Shift+Enter, a u donjem panelu podesiti svojstvo Vert za vertikalno poravnavanje na Top, font i veli�inu slova.

5. Donje dve �elije tabele spojiti u jednu (selektovati ih mišem, pa iza-brati iz menija Modify/Table/MergeCells), a zatim uneti sopstvenu kratku biogra� ju.


6. Stranicu zapamtiti sa File/Save, prikazati u �ita�u i po potrebi modi-� kovati.

150 MULTIMEDIJA

Vežba 4.4.3: Analiza strukture Web stranice

1. Kreiranje Web stranice pomo�u šablona (DreamWeaver ili Front Page)

2. Analiza HTML koda šablona

3. Promena šablona i kreiranje sopstvenog stila

1. Kreiranje Web stranice pomo�u šablona koriste�i Macromedia Dream-weaver (šablon/template Commerce: Product Catalog A).

Stranica je namenjena izlaganju jednog proizvoda. Predvi�en je tekst koji treba zameniti nazivom i cenom, prostor za sliku proizvoda, tekst koji treba zameniti detaljnim opisom proizvoda i elementi za navig-aciju.

2. Analiza HTML koda šablona

Raspored elemenata po površini realizovan je uz pomo� tabele, a nav-igacija hipervezama (tekstovi 1, 2, 3, 4, 5, Previous, Next), koje �e se naknadno prilagoditi konkretnim nazivima stranica na koje treba pre�i klikom miša.


3. Promena šablona i kreiranje sopstvenog stila

Stranica ima de� nisan raspored, ali ne konkretni vizuelni dizajn, koji �e se de� nisati koriš�enjem stilova (Cascaded Style Sheet, CSS). Novi stil se kreira u odgovaraju�em desnom panelu:

Stil tabele �e se sa�uvati na poseban fajl (moj_stil.css), na koji se može povezati svaka stranica na koju �e se primeniti.

152 MULTIMEDIJA

De� nisa�e se stil teksta (Type)

kao i stil koji �e poslužiti za iscrtavanje tabela


Iscrtavanje tabela (vrsta, debljina i boja linije) može biti jednoobrazno za celu tabelu, ali se može de� nisati poseban stil za svaku od �etiri stranice tabele ili �elije.

De� nisani stil se edituje u desnom panelu, a može se videti i kao pose-ban fajl tipa .css.

Izgled stranice nakon povezivanja slike i de� nisanja i primene stila moj_stil je kao na slici (navigacija �e se unositi nakon kreiranja novih stranica).

154 MULTIMEDIJA

Vežba 4.4.4 Li�na stranica i sopstveni stil (CSS)

Kreirati li�nu stranicu u izabranom alatu (DreamWeaver ili Front Page, nastavak vežbe 4.4.3) i promeniti stil na slede�i na�in:

1. Zapo�eti od prazne (osnovne) stranice, a ne od template-a.

2. Na stranici kreirati tabelu od 2x2 elementa. Linije tabele (border) u�initi nevidljivim.

3. U gornju levu �eliju tabele u�itati sliku (insert/image), koju po mogu�nosti zameniti sopstvenom fotogra� jom.

4. U gornju desnu �eliju tebele uneti osnovne podatke o sebi (ime, prezime, JMBG i sli�no), levo poravnato

5. Donje dve �elije tabele spojiti u jednu (selektovati mišem, pa table/merge), a zatim uneti sopstvenu kratku biogra� ju

6. Stranicu zapamtiti i prikazati pomo�u Web �ita�a

7. Izmeniti gra� �ki izgled stranice kreiranjem sopstvenog stila

Ovakva stranica se može upotrebiti za formiranje spiska studenata tre�e godine FPI.

1. Zapo�eti od prazne (osnovne) HTML stranice, a ne od template-a.

2. Na stranici kreirati tabelu od 2x2 elementa. Širinu podesiti na 100% (percent), a linije tabele (border thickness) u�initi nevidljivim.


Uneti naziv stranice (title) i sa�uvati stranicu pomo�u File/Save As... na izabrani folder.

3. Na istom folderu kreirati podfolder images, na koji kopirati rastersku sliku do 400 pixel-a (po mogu�nosti sopstvenu fotogra� ju).

Kopirati rastersku sliku u gornju levu �eliju tabele pomo�u Insert/Im-age. Uneti atribut dostupnosti ‘Alternate text’ i po potrebi mišem po-desiti širine kolona tabele.

4. U gornju desnu �eliju tebele uneti osnovne podatke o sebi (ime, prezime, JMBG i sli�no), levo poravnato.

5. Donje dve �elije tabele spojiti u jednu (selektovati mišem i pokrenuti Modify/Table/Merge), a zatim uneti tekst sopstvene kratke biogra� -je.

6. Stranicu zapamtiti sa File/Save.

7. Izmeniti gra� �ki izgled stranice kreiranjem sopstvenog stila (za sve objekte u okvuru oznake body):

Stil teksta i pozadinu stranice:

156 MULTIMEDIJA

Prikaz u Web �ita�u nakon primene novog stila daje izgled stranice kao na slici:


Vežba 4.4.5 Kreiranje Web lokacije - katalog proizvoda sa cenama

Kreirati Web lokaciju �ija je osnovna namena slanje prigodnih �estitki za novogodišnje praznike pomo�u elektronske pošte (npr. za Microsoft Outlook).

Lokacija treba da se sastoji od najmanje tri Web stranice:

1. Osnovne stranice (Home page), na kojoj se vidi naziv i osnovna na-mena lokacije,

2. Stranice sa katalogom gra� �kih rešenja �estitki, gde se klikom na izabranu �estitku pokre�e e-mail editor poruka sa ve� unesenom iz-abranom �estitkom, a korisnik treba da unese tekst i e-mail adresu primaoca, i

3. Stranice za kontakt, na kojoj se nalaze osnovni podaci o autoru lo-kacije (ime i prezime, adresa, telefon i e-mail adresa).

158 MULTIMEDIJA

1. Kreiranje osnovne stranice (Home page), na kojoj se vidi naziv i os-novna namena lokacije

Osnovna stranica: kreirati novu HTML stranicu (File/New), uneti naslov i tekst i sa�uvati pod nekim imenom (npr. Default.htm).

2. Kreiranje stranice sa katalogom gra� �kih rešenja �estitki.

Katalog �estitki: uneti naslov i kreirati tabelu (Insert/Table) za raspored ilustracija i budu�ih hiperveza na posebne stranice �estitki:


U levu kolonu se unose umanjene ilustracije �estitki (vinjete), a u desnu nazivi �estitki.

Klikom na izabranu ilustraciju ili naziv �estitke, posetilac pokre�e e-mail editor poruka, u kome se otvara poruka sa izabranom �estitkom (slika) i predloženim tekstom. Korisnik treba da unese e-mail adresu primaoca, eventualno promeni tekst i pošalje �estitku.

Najjednostavniji na�in slanja e-mail poruke je kreiranje posebne hiperveze mailto: (koriš�enjem Insert/Email Link).

Pošto je potrebno poslati prigodnu sliku i uneti dodatne podatke, pogodnije je kreirati posebnu stranicu sa slikom i HTML formom za unos potrebnih podataka za slanje �estitke, npr. šablon UI: Send Email A iz grupe Page Designs:

160 MULTIMEDIJA

Element tabele na levoj strani se može upotrebiti kao okvir za gra� �ko rešenje (motiv) �estitke.

Polja forme ”from” i ”to” služe za unos podataka o primaocu i pošiljaocu.

Nakon uvoza gra� ke (Import/Image) i unosa � ksnog teksta, stranica Ces-titka1 dobija izgled kao na slici:


3. Na kraju, treba kreirati jednostavnu stranicu za kontakt, sa osnovnim podacima o lokaciji i licima za kontakt (ime i prezime, adresa, telefon i e-mail adresa)

162 MULTIMEDIJA

Vežba 4.4.6 Primer kreiranja osnovne Web stranice modernog i funkcionalnog dizajna

Kreirati Web stranicu koja ima zaglavlje, vertikalni meni u koloni na le-voj strani, horizontalni meni na dnu stranice, tekstualne sadržaje u cen-tralnom delu, izdvojene sadržaje u istaknutoj koloni na desnoj strani i polje za pretraživanje sadržaja.

Kreirati novu (praznu stranicu pomo�u programa Dreamweaver. Struk-tura stranice �e se de� nisati kreiranjem odgovaraju�e tabele.

Izuzev tekstualnog sadržaja, koji �e se uneti kao paragraf tekst, svi os-tali elementi stranice �e se realizovati kao rasterske slike u pogodnom gra� �kom editoru (Adobe Photoshop).

Proces izrade stranice može te�i slede�im redosledom:

1. Kreiranje jednostavnog rasterskog logotipa

2. Kreiranje rasterske površine i naslova levog bo�nog podru�ja

3. Izrada naslova u rasterskoj gra� ci

4. Priprema slikovitih rasterskih ilustracija

5. Kreiranje i prikaz stranice

U ovom primeru �e se pokazati da za izradu Web stranice ”modernog i funkcionalnog dizajna”6 (”Microsoft Style”) nije uvek neophodno upotre-bljavati složene gra� �ke tehnike. Sasvim je dovoljno koristiti jednostavne sans-serifne fontove, ukrasni tekst konvertovan u rasterske slike, jednobo-jne površine umesto realisti�nih tekstura, blage boje bez kontrasta i obi�ne dvodimenzionalne objekte bez ”savršeno mekih” senki.

U programu Dreamweaver kreirati novu praznu Web stranicu. Kreirati ta-belu slede�e strukture:

6 prema http://www.pegaweb.com/tutorials/web-design-and-adobe-photoshop-tutori-als.htm


Logotip u zaglavlju stranice (237x44) i naziv

Glavni meni (vertikalni)

Pretraživanje

Linkovi

Osnovni tekstovi (sa naslovima) Istaknuti tekstovi sa naslovima

Donji tekstualni meni (horizontalni)

Tabela treba da ima ukupnu širinu 630 ta�aka, belu pozadinu, bez vidljivih ivica i razmaka izme�u kolona. Širine pojedinih kolona podešavati pre-ma širini gra� �kih elemenata i teksta, a vertikalno poravnavanje teksta u kolonama na Top.

Sa�uvati stranicu na novom folderu, npr. eMagacin.

Izuzev obi�nog paragraf teksta, svi ostali elementi se kreiraju kao rasterske slike u gra� �kom editoru (Photoshop).

1. Kreiranje jednostavnog rasterskog logotipa

Logotip može da bude malo krupniji tekst u jednostavnom i elegantnom fontu, uz koriš�enje komplementarnih boja.

Kreirati rastersku sliku dimenzija oko 240x50, izabrati alatku tekst , font Verdana veli�ine 48 i uneti tekst logotipa (npr. eMagacin).

Obojiti prvi deo naziva u srebrno sivo (R/G/B=153/153/153), a ostatak u crno.

Sa�uvati logotip sa File > Save for Web u formatu JPEG, Quality 60, pod nazivom Logo.jpg na posebnom folderu za rasterske slike, npr. images.

164 MULTIMEDIJA

2. Kreiranje rasterske površine i naslova levog bo�nog podru�ja

Kreirati rastersku sliku kao pozadinu budu�eg sadržaja u levoj koloni (npr 144x405) i obojiti je jednoli�no pomo�u . Nebo plava boja (R/G/B=0/153/255) se dobro uklapa sa crnom bojom teksta i belom bojom pozadine.

Može se koristiti preliv, ali je dovoljno obojiti donji deo nešto svetlijom nijansom plave na slede�i na�in:

- u paleti Layers kreirati novi sloj sa providnoš�u 20%

- selektovati srednji deo slike selektorom u obliku ovala

- izabrati pravougaoni selektor i pritiskom na shift proširiti selekciju prema dole

- popuniti selekciju belom bojom

Tre�e, još svetlije podru�je, može se dobiti kopiranjem sloja (desni klik i Duplicate Layer) i njegovim pomeranjem ka dole ( ).

Koriš�enjem alatke tekst može se uneti tekst naslova menija, odnosno podru�ja. Tekst bele boje u fontu Verdana veli�ine 12-14 ta�aka je dovoljno uo�ljiv.

Sa�uvati sa File > Save for Web u formatu JPEG, Quality 60, pod nazivom Levi.jpg.


2. Izrada rasterskih naslovaU Photoshop-u kreirati malu pravouglu rastersku sliku (150x24 piksela) i obojiti je živom bojom pomo�u alatke (zlatno žuta R/G/B=255/204/0, svetlo ljubi�asta R/G/B= 204/204/255 i narandžasta R/G/B=255/153/51)

Koriš�enjem alatke uneti tekst naslova, npr. ”Novo u ponudi” u ranije koriš�enom fontu veli�ine 18 i beloj boji.

Sa�uvati sa File > Save for Web u formatu GIF kao Naslov1.

Ponoviti postupak za još dva naslova i sa�uvati kao Naslov2 i Naslov3.

Drugi stil naslova se može kreirati na beloj ili providnoj pozadini u masnijem fontu istih izabranih živih boja.

Sa�uvati tekst kao Naslov4 i Naslov5.3. Priprema slikovitih rasterskih ilustracija

Izabrati nekoliko ilustracija tekstualnog sadržaja stranice.

U Photoshop-u precizno odrediti deo slike za ilustraciju pomo�u alatke (crop). Pritiskom na shift dobi�e se kvadratni oblik.

Sa Image/Image size rede� nisati sliku na veli�inu približno 70x70.

Sa�uvati sa File > Save for Web u formatu GIF kao Proizvod1.

Ponoviti postupak za još bar dva proizvoda i sa�uvati kao Proizvod2 i Proizvod3.

166 MULTIMEDIJA

4. Kreiranje i prikaz stranice

Nakon unosa paragrafa teksta, mogu�i izgled stranice u Dreamweaver-u je:

Prikaz u Internet Exploreru daje:


Potrebno je još kreirati ostale stranice Web lokacije i predvi�eni tekst me-nija konvertovati u hiperveze, a zatim uneti objekte za pretraživanje i pri-kaz sadržaja lokacije.

168 MULTIMEDIJA

4.5 DINAMI�KE WEB STRANICE

Cilj

Ovladavanje osnovama kreiranja dinami�kih Web stranica i prakti�na izrada Web stranica oboga�enih programskim elemen-tima na klijentskoj strani.

Dinami�ke HTML stranice nemaju kona�nu formu do trenutka izvršavanja. Kona�an oblik dobijaju nakon izvršavanja programskih elemenata umet-nutnutih u HTML kod. Ovi programski elementi (”skriptovi”) mogu da se izvršavaju na Web serveru (server side scripting) ili klijentskom ra�unaru (client side scripting), pomo�u Web �ita�a.

Prvi programski jezik za kreiranje dinami�kih stranica je JavaScript (orig-inalni naziv LiveScript), koji ima posebne podverzije za serversku i klijen-tsku stranu.

Vremenom su razli�iti proizvo�a�i softvera kreirali svoje skript jezike za serversku stranu (VBScript, PHP, C#), dok je JavaScript ostao kao stan-dardni klijentski jezik, koga podržavaju svi Web �ita�i.


UVOD U JAVASCRIPT

1. UVOD

Javascript je interpretativni (skript) jezik namenjen programiranju Web prezentacija, odnosno proširenje mogu�nosti jezika HTML, posebno u in-terakciji s korisnikom.

Program u jeziku JavaScript se izvršava uz pomo� interpretera ugra�enog u Web �ita�e. Originalnu verziju jezika JavaScript razvila je � rma u Netscape, a verzija pod nazivom JScript ugra�ena je u Web �ita� Internet Explorer � rme Microsoft.

Jezik JavaScript je razvijen da olakša programiranje Web strana neprofe-sionalcima, odnosno da bude lakši za razumevanje od jezika Java.

Programski jezik Java se može prevesti u mašinski kod i izvršavati potpu-no samostalno ili u obliku koda koji se pokre�e iz Web �ita�a. Java je ob-jektno orijentisan jezik, ima objekte, klase, nasle�ivanje, strogu tipizaciju promenljivih i druge kontrole u toku prevo�enja programa.

Jezik JavaScript se zasniva na ugra�enim objektima, promenljive se ne moraju deklarisati, pa se reference objekata i tip promenljive odre�uje dinami�ki, za vreme izvršavanja.

Zajedni�ko za oba jezika je da nemaju mehanizme za upis na disk.

Za izradu programa u jeziku JavaScript neophodno je osnovno poznavanje HTML-a. Programski kod se može ugraditi u HTML dokument uz pomo� HTML elementa SCRIPT, koji ima atribut LANGUAGE za de� nisanje programskog jezika skripta, koji ne mora biti samo JavaScript.

170 MULTIMEDIJA

Primer 1: Jednostavni JavaScript program<HTML> <HEAD> <TITLE>Primer jednostavnog JavaScript skripta</TITLE> </HEAD> <BODY> Tekst iz HTML-a. <BR> <SCRIPT LANGUAGE=”JavaScript”> document.write(”<B>Tekst iz JavaScript-a.</B>”) </SCRIPT> </BODY></HTML>

Kada �ita� prilikom prikazivanja HTML dokumenta na ekranu prona�e skript, izvršava ga i rezultat se pojavljuje na ekranu. U ovom jednostavnom primeru, metod write objekta document (to je teku�i HTML dokument, odnosno stranica) ispisuje HTML tekst, koji se nakon evaluacije ispisuje masnim slovima (oznaka bold).

Na slici je prikaz ove HTML stranice, zajedno sa rezultatom izvršavanja JavaScript koda:

Iako su to retke situacije, profesionalno je predvideti problem prikazivanja HTML dokumenta pomo�u nekog starijeg Web �ita�a, koji nema podršku za JavaScript. Prema HTML konvenciji, skript �e se prikazati kao kao obi�an tekst i zbuniti posetioca. Zbog toga se �esto programski kod skripta skriva izme�u ””, odnosno kao deo oznake za HTML komen-tar:

<SCRIPT LANGUAGE=”JavaScript”> </SCRIPT>

Kra�i programski moduli se mogu ugraditi direktno u HTML kod stranice. Ako je programski kod obimniji, izdvaja se u posebne fajlove (su� ks .js) i uklju�uje u HTML dokument pomo�u elementa SCRIPT, koji se obi�no postavlja u zaglavlje dokumenta:

<SCRIPT LANGUAGE=”JavaScript” SRC=”../skript1.js”></SCRIPT>

Osim ve�e preglednosti, izdvojeni kod se može upotrebiti u više HTML dokumenata.

2. SINTAKSA

Sintaksa jezika JavaScript je sli�na velikom broju viših programskih jezika nastalih po ugledu na jezike C/C++.

Osnovni elementi sisntakse su identi� katiri, konstante, promenljive, iz-razi, osnovne naredbe, upravlja�ke strukture (iteracija i selekcija), funkcije i de� nicije objekata.

Prema sintaksi JavaScripta imena promenljivih se sastoje od niza malih i velikuh slova (a..z, A..Z), cifara (0..9) i donje crte (_). Ispravni nazivi promenljivih su Ukup_vrednost, _privr, zbir04.

Nazivi promenljivih, funkcija, metoda ili objekata moraju biti razli�iti od rezervisanih re�i jezika JavaScript:

172 MULTIMEDIJA

abstract do if package throwboolean double implements private throwsbreak else import protected transientbyte extend in public truecase false instanceof return trycatch � nal int short varchar � nally interface static voidclass � oat long super whileconst for native switch withcontinue function new synchronized default goto null this

Sintaksa konstanti zavisi od njihovog tipa. Decimalni celi brojevi se pred-stavljaju kao niz cifara (0-9) bez vode�e nule. Oktalni celi brojevi se pred-stavljaju sa nulom (”0”) iza koje sledi niz cifara (0-7), a heksadecimalni celi brojevi nulom iza koje sledi slovo x (”0x” ili ”0X”) i niz heksadeci-malnih cifara (0-9 i slova a-f ili A-F). Npr. celi broj deset (10) se može zapisati kao 10, 012 i 0xA.

Brojevi u pokretnom zarezu se sastoje od decimalnog celog broja, deci-malne ta�ke (”.”), decimalnog celog broja iza decimalnog zareza, ekspo-nenta (”e” ili ”E”) i celog broja kao eksponenta, npr. 3.14, .1E10, 6E-10, -3.14E2.

String je niz karaktera sa�injen od nula ili više karaktera zatvorenih u jed-nostrukim ili dvostrukim navodnicima, npr. ”tekst” ili ‘tekst’. Navodnici i drugi specijalni karakteri se zadaju pomo�u obrnute kose crte ispred.

3. TIPOVI PODATAKA

Osnovni tipovi podataka u jeziku JavaScript su:

- brojevi (numbers) , celi i realni

- logi�ke vrednosti (booleans), koji mogu biti true ili false

- nizovi karaktera (strings)

- prazna referenca ili null objekt (null), koji se razlikuje od nede� nisane vrednosti.


Pošto nije obavezno deklarisanje tipa promenljivih, istoj promenljivoj se mogu dodeljivati vrednosti razli�itog tipa (poželjno je novu promenljivu prilikom uvo�enja ozna�iti sa var):

var a=42 a=”�etvrtak”

Promenljiva tipa Boolean može da ima samo dve vrednosti: true (ta�no) i false (neta�no).

Stringovi u jeziku JavaScript mogu da sadrže specijalne znake, npr. \b (backspace), \f (form feed), \n (new line), \r (carriage return) i \t (tab).

4. IZRAZI

Izraz u jeziku JavaScript predstavlja ispravno formiran skup konstanti, promenljivih, operatora i izraza koji se može evaluirati u jednu vrednost nekog od mogu�ih tipova (broj, string ili logi�ka vrednost).

Operatori jezika JavaScript su poznati iz jezika C ili C++:

- aritmeti�ki operatori: sabiranje (+), oduzimanje (-), množenje (*), deljenje (/), deljenje po modulu (%), inkrement (x++ i ++x), dekre-ment (x-- i --x) i unarna negacija (-).

- logi�ki operatori: logi�ko i ( a && b), logi�ko ili (a || b) i logi�ka negacija (!a)

- binarni operatori: binarni logi�ki operatori – logi�ko i (a & b), logi�ko ili (a | b), ekskluzivno ili, odnosno XOR (a ^ b), kao i operatori pomer-anja za n mesta u levo (a<<n), u desno sa �uvanjem znaka - a>>n i u desno sa nulama na mestima najve�e težine (a>>>n).

- operatori pore�enja: jednako (a==b), nije jednako (a!=b), ve�e (a>b), ve�e ili jednako (a>=b), manje (a<b), manje ili jednako (a<=b).

- operatori nad stringovima: konkatenacija ili spajanje dva stringa (”dobar ” + ”dan” daje ”dobar dan”)

Na isti na�in se u naredbama dodele vrednosti može koristiti skra�eni zapis operacija: x+=y umesto x=x+y, x-=y umesto x=x-y, x*=y umesto x=x*y, x/=y umesto x=x/y, x%=y umesto x=x%y, x<<=y umesto x=x<<y, x>>=y umesto x=x>>y, x>>>=y umesto x=x>>>y, x&=y umesto x=x&y, x^=y umesto x=x^y i x|=y umesto x=x|y.

174 MULTIMEDIJA

5. UPRAVLJA�KE STRUKTURE

Upravlja�ke strukture jezika JavaScript su uobi�ajene u ve�ini programskih jezika visokog nivoa: selekcija i iteracija, koja može biti prema uslovu ili odre�en broj puta, kao i programski skokovi.

Naredba selekcije može biti u obliku if(uslov){} ili if(uslov){ } else { }:if (n>5){ document.write(”Broj je ve�i od 5”)}else { document.write(”Broj je manje ili jednak 5”)}

Iteracija poznati broj puta ili for petlja (u primeru se ispisuje šest nivoa naslova):

for(i=1;i<=6;i++){ document.write(”<H”+i+”> Heading ” i ”</H”+i+”>”)}

Poseban oblik je for .. in, koja se izvršava onoliko puta koliko neki objekt ima svojstava (properties):

for (prom in obj){ prikazi()}

Iteracija unapred nepoznati broj puta, sve dok se ne zadovolji logi�ki uslov u while. Primer izra�unavanja sume brojeva od 1 do n:

i=1;Suma=0while (i<=n){ i++;Suma+=i}

Izvršavanje petlje se može ranije prekinuti naredbom break, koja prekida izvršavanje for ili while petlje. Izvršavanje programa se nastavlja neposred-no iza prekinute petlje:


while(i<5){ if(i==2){ break}}

Naredba continue tako�e prekida izvršavanje niza naredbi petlje u teku�oj iteraciji, a izvršavanje programa se nastavlja u slede�oj iteraciji:

while(i<5){ if(i==2){ continue}}

6. STRUKTURA PROGRAMA U JEZIKU JAVASCRIPT

Osnovna jedinica strukture programa je naredba ili izraz, koji se završava ta�kom-zarezom (C/C++):

document.writeln(”Po�etak<BR>”);

U prethodnoj komandi se koristi metod writeln, koji je deo objekta document (ta�ka-zarez ozna�ava kraj komande). JavaScript komanda se može rasporediti u više redova, sve do znaka ta�ka-zarez, a može se i više naredbi na�i u jednom redu.

U de� niciji funkcija i upravlja�kim strukturama, naredbe se mogu grupi-sati u blokove ograni�ene velikim zagradama:

{ document.writeln(”Ispis 1 ”); document.writeln(”Ispis 2<BR>”);}

7. ULAZ-IZLAZ

U jeziku JavaScript izlaz se može usmeriti na nekoliko mesta, npr. u tre-nutni prozor dokumenta i pop-up dijalog.

Osnovni izlaz je preusmeravanje prikaza teksta u prozor Web klijenta prosle�ivanjem HTML koda. Rezultuju�i tekst se interpretira kao HTML kod i prikazuje u prozoru klijenta.

176 MULTIMEDIJA

Koristi se metod write, koji šalje tekst u prozor Web �ita�a bez pomeranja ili writeln, kod koga se posle ispisa teksta kursor pomera u slede�i red

document.write(”Tekst”);document.writeln(‘Tekst’);

Alert()

Jezik JavaScript je pogodan za programiranje dijaloga za ispis ili unos teksta koji ne zavisi od sadržaja HTML dokumenta, npr pomo�u metoda alert:

alert(”Za nastavak kliknite na DALJE.”);

Za metod alert() se ne mora obavezno navesti naziv objekta, jer pripada objektu windows, koji je po�etni objekt u stablu objekata i podrazumeva se ako se ne navede.

Metod alert()se koristi da upozori korisnika na nešto, npr. na neta�no unet podatak u formu, pogrešan rezultat kalkulacije i sl.

Primer: Prikaz poruke u dijalogu<HTML> <HEAD> <TITLE>Prikaz poruke</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=”JavaScript”>  </SCRIPT> </BODY></HTML>


Prompt()

Ako je potrebno da korisnik unese neki podatak ili odgovor, koristi se metod prompt(), kojim se kreira prozor za dijalog u kome se prikazuje poruka korisniku i dobija tekstualni odgovor.

prompt(”Unesite ime:”,”anonymous”);

Odgovor korisnika treba dodeliti nekoj promenljivoj ili drugom metodu, npr.:

ime_korisnika = prompt(”Unesite Vaše ime:”, ”anonymous”);

ilidocument.writeln(prompt(”Unesite Vaše ime:”, ”anonymous”));

8. FUNKCIJE

Funkcija u jeziku JavaScript predstavlja skup naredbi koje realizuju neki odre�eni zadatak i može da vrati neku vrednost, koja može biti podatak ili objekt.

Funcije mogu da imaju parametre, koji se prenose po vrednosti. Dopuštena je rekurzija. Dobra je praksa grupisanje funkcija u zaglavlju HTML do-kumenta, izme�u elementa <HEAD> i </HEAD>, jer �e se prilikom u�itavanja HTML dokumenta, funkcije u�itati prve.

178 MULTIMEDIJA

Unutar funkcije je mogu�e pozvati druge funkcije de� nisane unutar istog HTML dokumenta.

De� nicija funkcije po�inje od rezervisane re�i function, iza koga je ime funcije, lista parametara funkcije, koji su odvojeni zarezima i zatvoreni u malu zagradu i skupom JavaScript naredbi koje �ine telo funkcije zat-vorenih u velike zagrade.

Prenos parametara funkcije

Primer je funkcija koja štampa zadani string. function Stampaj(string){ document.write(”<P>” + string)}

Unutar funkcije stampa, možemo pristupati toj promenljivi u kojoj je vrednost prosle�ena funkciji. Funkciji se po vrednosti mogu prosle�ivati i promenljive i konstante.

Parametri postoje samo za života funkcije. Ukoliko zovete funkciju više puta, svaki put kada zovete funkcije ima�ete ”nove” parametre, odnosno vrednost koji �e parametri imati na kraju prethodnog poziva funkcije ne�e biti sa�uvana.

Na primer, kada funkciju stampaj() pozovemo sa promenljivom ime:var ime = ”Petar”;Stampaj();

kada funkcija po�ne da se izvršava, promenljiva string u funkciji �e imati vrednost ”Petar”. Isto tako, funkciju stampaj() možemo da po-zovemo sa konstantom:

Stampaj(”Petar”);

kada funkcija po�ne da se izvršava, promenljiva string u funkciji �e tako�e imati vrednost ”Petar”.

Izvršavanje JavaScript funkcija

Izvršavanje funkcije se pokre�e pozivom, koji se može se može realizovati kao:


1. poziv iz druge funkcije ili JavaScript programa:<SCRIPT LANGUAGE=”JavaScript”> Stampaj(”Ovo je tekst koji �e se prikazati.”)</SCRIPT>

2. odgovor na doga�aj:

<body OnLoad=”Stampaj(”Ovo je tekst koji �e se prikazati.”)”>

3. izbor hiperveze:

<a href=”javascript:Stampaj(”Ovo je tekst koji �e se prikazati.”);”>Štampaj</a>

Vra�anje rezultata iz funkcije

Rezultat se iz funkcije vra�a koriš�enjem naredbe return. Koristi se za vra�anje bilo kog ispravnog izraza, koji može da se izra�una u jednu vred-nost. Na primer, u funciji x2():

function x2(broj) { var x2 = broj*broj;return x2;}

Naredba return vra�a vrednost promenljive x2. Ista funkcija može da se napiše nešto kra�e:

function x2(broj) { return broj*broj;}

Prenos parametara

Parametri jedne funkcije mogu biti brojevi, nizovi karaktera i �itavi ob-jekti.

U slede�em primeru funkcija kojoj se kao parametar prenosi �itav objekat koristi for.. in petlju da bi prebrojala sva svojstva prenesenog objekta i kao rezultat vratila niz karaktera u kome su navedena sva svojstva i njihove vrednosti. Rezultat se vra�a naredbom return.

180 MULTIMEDIJA

function svojstva_i_vrednosti(objekt, ime_objekta){ var i, rezultat = ”” for (i in objekt) rezultat+=ime_objekta+”.”+i+” = ”+objekt[i]+ ”\n” return rezultat}

Funkcija se poziva kao svojstva_i_vrednosti(Automobili, ”Automo-bili”), gde su Automobili objekt koji ima svojstva: proizvodjac, model i godina_proizvodnje, sa vrednostima ”Zastava”, ”YUGO Skala 55” i 1990. Funkcija vra�a rezultat tekst:

Kola.proizvodjac = ZastavaKola.model = YUGO Skala 55Kola.godina_proizvodnje = 1990

Rekurzivnost funkcija

Funkcije mogu biti rekurzivne, odnosno mogu pozivati same sebe. Klasi�an primer za demonstraciju rekurzije je izra�unavanje faktorijela nenegativnog broja:

function faktorijel(n){ if ((n==0)||(n==1)) return 1 else { rezultat = (n * faktorijel(n-1)) return rezultat }}

Rekurzija funkcija je veoma snažan programski mehanizam, koji se veo-ma lako može pogrešno upotrebiti. Uvek se posebna pažnja mora obratiti na uslove terminiranja, zbog ograni�avanja dubine rekurzije, koja može da iscrpi slobodnu memoriju interpretera Web �ita�a.

Oblast važnosti promenljivih u funkciji

U funkciji svojstva_i_vrednosti koristi se naredba var. Oblast važnosti promenljive koja je de� nisana u nekoj funkciji je kontekst same funkcije.

Oblast važnosti promenljivih koje su de� nisane van funcija je ceo skript, odnosno predstavljaju globalne promenljive.


Ukoliko se kao ime promenljive u nekoj funkciji upotrebi ime postoje�e globalne promenljive, u kontekstu funkcije �e se ono koristiti kao lokalno ime, a vrednost globalne promenljive �e ostati nepromenjena.

Kada se argumenti prosle�uju funkciji, kreiraju se svojstva imefunkcije.arguments i imefunkcije.arguments.length. Svojstvo imefunkcije.argu-ments je niz �iji su elementi argumenti funkcije, a svojstvo imefuncije.ar-guments.length je celobrojna promenljiva �ija je vrednost broj argumenata funkcije.

Ugra�ene funkcije

Jezik JavaScript ima nekoliko ugra�enih funkcija: Eval, ParseInt, Parse-Float, Escape, Unescape i IsNaN.

Eval(string)

Argument string može da sadrži string koji predstavlja JavaScript iz-raz, naredbu ili sekvencu naredbi, može da sadrži promenljive i oso-bine postoje�ih objekata.

Funkcija Eval izra�unava izraz ili izvršava naredbe.

Pogodna je za konverziju stringa koji predstavlja numeri�ki izraz u broj, npr. kod unosa numeri�kih podataka putem HTML forme, gde je uneseni podatak string, koji je za dalju upotrebu potrebno konvertovati u broj.

ParseFloat(string)

Vra�a vrednost izraženu kao broj u pokretnom zarezu.

Funkcija parsira string i kad otkrije znak razli�it od predznaka (znak + ili -), decimalne ta�ke ili eksponenta, vra�a vrednost koju je do tada parsirao, a sam znak i ostatak stringa ignoriše. Ako nije mogao da konvertuje u broj ve� prvi znak stringa, vra�a vrednost NaN ili 0 (Win-dows).

ParseInt(string, baza)

ParseInt vra�a vrednost izraženu kao celi broj u zadanoj bazi.

Kada se prvi put pojavi znak razli�it od cifre u zadanoj bazi (za bazu 16 cifre su 0-9 i A-F), vra�a broj prethodno parsiranih cifara i ignoriše taj znak i ostatak stringa. Ukoliko je to prvi znak u ulaznom stringu, vra�a se vrednost NaN ili 0 (Windows).

182 MULTIMEDIJA

Escape(znak)

Vra�a string koji sadrži ASCII kod karaktera u obliku %xx (gde je xx numeri�ki ASCII kod karaktera).

unescape(znak)

Vra�a ASCII karakter na osnovu numeri�kog ASCII koda zadanog u obliku ”%integer” ili ”heksadecimalniKod”.

isNaN(vrednost)

Proverava da li je zadana vrednost NaN (koristi se samo na opera-tivnom sistemu UNIX).

9. DOGAAJI U JAVASCRIPTU

Doga�aji su pojave koje generiše Web �ita�, a nastaju obi�no kao rezultat akcija korisnika (npr. doga�aj je klik mišem, premeštanje fokusa na ele-ment forme i sli�no).

JavaScript programi se ve�inom pokre�u doga�ajima (event-driven), tako što koriste ugra�ene mehanizme za rukovanje doga�ajima (eng. event han-dler) pomo�u kojih se aktiviraju sopstvene funkcije za obradu odre�enog doga�aja.

Programi za rukovanje doga�ajima se u jeziku HTML predstavljaju kao posebni atributi HTML elemenata, koji modi� kuju njihovo ponašanje:

<HTML_Oznaka Ostali_atributi eventHandler=”JavaScriptFunkcija”>

Npr. oznaka po�etka tela HTML dokumenta ima atribut OnLoad, koji obra�uje doga�aj u�itavanja HTML dokumenta.:

<body OnLoad=”alert(Dobrodošli!)”>

U ovom primeru, kada se u�itavanje HTML dokumenta završi, izvrši�e se naredba alert jezika JavaScript koja �e u prozoru �ita�a ispisati pozdravnu poruku ”Dobrodošli”.

Doga�aji su signali koje generiše Web �ita� kada se izvrši odre�ena akcija. Jezik JavaScript može da detektuje te signale i mogu da se pišu programi koji reaguju na te doga�aje.


Doga�aji u Web �ita�u su kada korisnik klikne na hipertekst link, kada se promeni podatak u ulaznoj polji forme ili kada se završi u�itavanje Web dokumenta.

Doga�aj Opis event hendler

blur Ulazni fokus se premešta sa elementa forme na drugi objekt (korisnik kliknuo van polja forme) OnBlur

click Korisnik je kliknuo na formu ili na link OnClick

change Korisnik je promenio vrednost u elementu forme text, textarea ili select OnChange

focus Ulazni fokus se premešta na polje forme OnFocus

load U�itan HTML dokument u Web �ita� OnLoad

mouseover Korisnik pomerio miš preko objekta (JavaScript 1.1, JSCript nema) OnMouseOver

mouseout Miš prešao preko objekta OnMouseOut

select Korisnik izabrao ulazno polje forme OnSelect

submit Forma prosle�ena HTTP serveru (korisnik kliknuo na dugme za slanje sadržaja forme) OnSubmit

unload Korisnik napustio HTML dokument, ali još nije u�itao novi dokument OnUnload

Doga�aje vezujemo za slede�e HTML elemente:- doga�aji Focus, Blur, Change: tekst polja forme, textarea i selek-

cije,- doga�aj Click: tasteri, hiperveze, polja za izbor, polja za selekciju,- doga�aj Select: tekst polja forme, textarea,- doga�aj MouseOver: hiperveze

184 MULTIMEDIJA

Objekti jezika JavaScript imaju de� nisane slede�e doga�aje:

Objekt De� nisani doga�aji

Lista za izbor onBlur, onChange, onFocus

Text element onBlur, onChange, onFocus, onSelect

Textarea element onBlur, onChange, onFocus, onSelect

Button element onClick

Checkbox onClick

Radio Button onClick

Hypertext Link onClick, onMouseOver

Reset Button onClick

Submit Button onClick

Document onLoad, onUnload

Window onLoad, onUnload

Form onSubmit

Emulacija doga�aja

Neki objekti imaju metode koji emuliraju doga�aje. Na primer, tasteri imaju metod click koji emulira pritisnuto dugme. To može biti posebno ko-risno ako želimo da prosledimo sadržaj forme, kada ne želimo da �ekamo da korisnik klikne na dugme za potvrdu (submit button).

U jeziku JavaScript postoje emulatori za doga�aje blur(), click(), fo-cus(), select() i submit().

Primeri obrade JavaScript doga�aja

Naje�eš�e koriš�eni doga�aji iz prethodne tabele omogu�avaju programu da odgovori na neke sistemske doga�aje (OnLoad, OnUnload) i neke ak-cije korisnika (OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSub-mit, OnMouseOver i OnMouseOut).

(1) Sistemski doga�aji se pojavljuju bez uticaja korisnika: npr., signal da je završeno u�itavanje HTML dokumenta (OnLoad) ili da je stranica uklon-jena iz memeorije (OnUnload).OnLoad

Ovaj doga�aj se aktivira nakon u�itavanja kompletnog HTML doku-menta. Imaju ga elementi <BODY> i <FRAMESET>.

Pošto na Internetu nema garancije da �e zapo�eti prenos biti završen (npr. zagušenje ili prekid komunikacije), doga�aj OnLoad se može upotrebiti za potvrdu završetka u�itavanja, posebno ako se koriste fre-jmovi.

Primer upotrebe doga�aja OnLoad

<html><head> <title>Primer upotrebe OnLoad</title> <script language=”JavaScript”>  </script></head><body OnLoad=”Zavrseno()”> <h3>OnLoad</h3> <hr> Tekst dokumenta, koji �e se verovatno tek videti nakon poruke o završetku u�itavanja.</body></html>

186 MULTIMEDIJA

OnUnload

Doga�aj OnUnload se koristi za akcije posle posete nekoj prezent-aciji, npr. zatvaranje svih prozora koji nastaju kao rezultat rada JavaS-cript programa.

Primer upotrebe doga�aja OnUnload<html><head> <title>Primer upotrebe OnUnload</title> <script language=”JavaScript”>  </script></head><body OnUnload=”Dovidjenja()”> <h3>OnUnload</h3> <hr> Kada pre�ete na drugu stranicu, vide�ete pozdravnu poruku.</body></html>

U ovom primeru, kada korisnik napušta HTML dokument (klikom na hipervezu ili pomo�u tastera kao što su Forward, Back ili Refresh Web �ita�a), doga�aj OnUnload pokre�e izvršavanje funkcije Dovidjen-ja().

(2) Doga�aji uzrokovani akcijama korisnika zahtevaju akciju koris-nika, obi�no uz pomo� miša:

OnClick

Doga�a se uvek kada korisnik klikne na objekt koji može da prihvati takav doga�aj (hipervezu, check box i tastere, uklju�uju�i submit, reset i radio buttons). U primeru se koristi jednostavna forma koja odgovara na klik na jednu od svojih komponenti.

Primer upotrebe doga�aja OnClick<html><head> <title>Primer za OnClick</title> <script language=”JavaScript”>  </script></head>

188 MULTIMEDIJA

<body> <h2>onClick</h2> <hr> <a href=”javascript: Obavestenje()”>Hiperveza(link) </a> <form method=”POST”> <input name=”radio1” type=”RADIO” OnClick= ”Obavestenje()”>Radio Button<br> <input name=”check1” type=”CHECKBOX” OnClick= ”Obavestenje()”>CheckBox<br> <input name=”button1” type=”BUTTON” OnClick= ”Obavestenje()” value=”Taster”><br> <input type=”RESET” OnClick=”Obavestenje()”><br> <input type=”SUBMIT” OnClick=”Obavestenje()”><br> </form></body></html>

Doga�aj OnClick se u primeru koristi samo na poljima za unos forme, pa se poruka pojavljuje samo kada korisnik klikne na tastere (Taster, Reset, Submit Query), radio taster ili CheckBox.

OnFocus

Doga�aj OnFocus se pojavljuje kada korisnik klikne mišem na neki objekt ili se pozicionira na njega koriste�i tastaturu. Koristi se samo za objekte text, textarea, password i select.

U primeru se koristi jednostavna forma za unos sa poljima Ime i Prezime. Doga�aj OnFocus dodeljen polju Prezime. Kada se korisnik pozicionira na to polje, prikazuje se dijalog sa porukom.

Primer upotrebe doga�aja OnFocus

<html><head> <title>Primer upotrebe doga�aja OnFocus</title> <script language=”JavaScript”>  </script></head><body> <h2>OnFocus</h2> <hr> <form method=”POST”> Ime: <input name=”ime” type=”TEXT”> Prezime: <input name=”prezime” type=”TEXT” OnFocus= ”Ufokusu()”> </form></body></html>

Prozor sa porukom se pojavljuje kada polje Prezime do�e u fokus.

190 MULTIMEDIJA

OnBlur

Doga�aj OnBlur se pojavljuje kada objekt nije više u fokusu, prilikom prelaska u drugi prozor ili aplikaciju, klikom mišem na drugi objekt ili pozicioniranjem pomo�u tastature. Kao za doga�aj OnFocus, doga�aj OnBlur se koristi samo za objekte text, textarea, password i select.

OnChange

Doga�aj OnChange se zna�i da je objekt izgubio fokus ili se njegova vrednost promenila u objektima tipa text, textarea, password i select.

Koristi se za razli�ite akcije, kao što su izra�unavanja nad unetim vred-nostima.

OnSelect

Doga�aj OnSelect se odnosi samo na objekte text, textarea i password kada korisnik ozna�i deo teksta u jednom od objekata toga tipa:

<input name=”mojobjekt” Type=”TEXT” OnSelect=”Funkcija()”>

OnSubmit

Doga�aj OnSubmit služi da se podaci uneti u polja forme provere ili upotrebe pre slanja HTTP serveru. Provera podataka na klijentskom ra�unaru smanjuje promet i rastere�uje HTTP server.

Ako JavaScript funkcija za proveru vrati vrednost false, sadržaj forme ne�e biti prosle�en HTTP serveru.

Primer upotrebe doga�aja OnSubmit

<html><head> <title>Primer upotrebe doga�aja OnSubmit</title> <script language=”JavaScript”>  </script></head><body> <h3>OnSubmit</h3> <hr> <form name=”JMBG_form” method=”POST” OnSubmit= ”return Validacija(JMBG_form)”> Unesite mati�ni broj: <input name=”JMBG” type=”TEXT” size=”13,1”><br><hr> <INPUT TYPE=SUBMIT value=”Potvrda”> </form></body></html>

192 MULTIMEDIJA

U ovom primeru se proverava samo dužina unetih podataka. Složenija provera unosa mati�nog broja podrazumeva nešto duži kod funkcije za proveru, u kome bi se izvršila kontrola po poznatom algoritmu (pro-vera po modulu 11).

OnMouseOver

Doga�aj OnMouseOver je kada se pointer miša na�e iznad nekog ob-jekta. Može se upotrebiti za objašnjenja hiperveza ili tastera.

OnMouseOver doga�aj menja tekst u prozoru dobijenom primenom metoda alert().

Primer upotrebe doga�aja OnMouseOver

<html><head> <title>Primer upotrebe doga�aja OnMouseOver</title> <script language=”JavaScript”>  </script></head><body> <h3>OnMouseOver</h3> <hr> <a href=”http://www.singidunum.ac.yu” OnMouseOver= ”Pomoc1()”> Univerzitet Singidunum</a><br><br> <a href=”http://www.fpi.singidunum.ac.yu” OnMouseOver= ”Pomoc2()”>Poslovna informatika</a></body></html>

U zavisnosti od hiperveze preko koje pre�emo mišem, prozor za pomo� �e prikazati druga�iji tekst.

Prelazak preko teksta ”Poslovna informatika” daje rezultat kao na sli-ci.

194 MULTIMEDIJA

OnMouseOut

Doga�aj OnMouseOut je kada pointer miša iza�e iz podru�ja prikaza nekog objekta. �esto se koristi paralelno sa doga�ajem OnMouseOver, npr. za brisanje poruke u status liniji �ita�a.

10. OBJEKTI U JAVASCRIPTU

Objektno orijentisano programiranje (eng. Object Oriented Programming, skra�eno OOP) je pristup programiranju kod koga su povezani koncepti grupisani zajedno, tako što se strukture podataka i funkcije koje manipulišu tim podacima grupišu zajedno u jednu celinu koja se naziva objekt.

JavaScript podržava objekte, koji sadrže podatke, osobine objekta kao jedinstvene celine (properties), koji se u jeziku JavaScript tretiraju kao promenljive i metode objekta (methods), koji u jeziku JavaScript pred-stavljaju funkcije.

Jezik JavaScript ima odre�en broj ugra�enih objekata, a mogu se kreirati i sopstveni objekti.

Objekt u jeziku JavaScript ima osobine, kojima se može pristupiti na uobi�ajen na�in:

NazivObjekta.NazivOsobine

U nazivima objekata i osobina objekata razlikuju se mala i velika slova.


Metod je funkcija pridružena objektu. Programer de� niše metod na isti na�in kao što de� niše funkciju. Potom tu funkciju pridruži objektu na slede�i na�in:

NazivObjekta.NazivMetoda = NazivFunkcije

gde je NazivObjekta postoje�i objekat, NazivMetoda je naziv koji dodelju-jemo metodu, a NazivFunkcije je naziv funkcoje koju povezujemo sa ob-jektom.

Metod se koristi navo�enjem naziva objekta i naziva metoda:

NazivObjekta.NazivMetoda(parametri);

Osobinama objekta dodeljuju se vrednosti na standardni na�in:

NazivObjekta.NazivOsobine = vrednost;

ili kao asocijativnom nizu, preko naziva osobine

NazivObjekta[”NazivOsobine”]= vrednost;

ili kao nizu, preko indeksa osobine:

NazivObjekta[index]= vrednost;

Rezervisana re� this se koristi kao referenca na trenutno aktivni objekt (npr. dokument, forma, polje). Npr. funkcija Granice() za proveru grani-ca unesenih numeri�kih vrednosti može se pozvati u svakom elementu forme na doga�aj OnChange, koriste�i this za prosle�ivanje konkretnog elementa forme:

<INPUT TYPE=”text” NAME=”broj” SIZE=13 OnChange=”Granice(this,1,100)”>

Jezik JavaScript sadrži slede�e ugra�ene objekte:

196 MULTIMEDIJA

Detaljnije informacije o ugra�enim objektima mogu se na�i u referentnim priru�nicima [5].

Iako je JavaScript jezik namenjen pre svega radu sa ugra�enim objektima, mogu se kreirati sopstveni objekti, na slede�i na�in:

1. De� niše se tip objekta putem funkcije,

2. Kreira se instanca objekta koriš�enjem konstruktora new.

Funkcija za de� nisanje tip objekta ima oblik:

function NazivObjekta(p1, p2,..., pn) { this.p1=...; this.p1=...; ... this.pn=...;}

gde su pi nazivi osobina ili metoda. Ako je u pitanju naziv metoda, dodelju-je se naziv funkcije, koja mora biti prethodno de� nisana. Objekt može da ima osobinu koja je tako�e objekt..

Instanca objekta se kreira koriš�enjem konstruktora new i funkcije Na-zivObjekta, navode�i pri tome niz konkretnih vrednosti osobina objek-ta:

instanca= new NazivObjekta(”...”, ”...”, ... , ”...”);

Primeri upotrebe programskog jezika Javascript

Na nekoliko primera �e se ilustrovati upotreba programskog jezika Ja-vaScript (JScript) na klijentskom ra�unaru u oboga�ivanju funkcionalnosti Web stranica.

Vežba 4.5.1 Javascript (klijent) – pozdrav u zavisnosti od vremena

Upotreba sistemskog vremena za umetanje pozdrava u Web stranicu.

1. Koriste�i Dreamweaver kreirati praznu HTML stranicu

2. Promeniti prikaz u prikaz HTML koda i uneti slede�i kod:<html> <head><title>Pozdrav po vremenu</title></head> <body bgcolor=white> <center><font color=red> <h1>Javascript pozdrav</h1></font></center> <hr> <p><font size=+2><b> <script language=javascript>  </script> </font></b> <p>Ovaj skript, na osnovu doba dana, formira odgovarajucu pozdravnu poruku i smesta je u Web stranicu. </p> </body></html>

198 MULTIMEDIJA

3. Proveriti prikaz u Web �ita�u:

Vežba 4.5.2 Javascript (klijent) – boja pozadine stranice

Funkcija za promenu boje pozadine Web stranice.

1. Koriste�i Dreamweaver kreirati praznu HTML stranicu

2. Promeniti prikaz u prikaz HTML koda i uneti slede�i kod:

<html><head><title>Boja stranice</title> <script language=”JavaScript”>  </script></head>


<body> <form> <input type=”button” name=”Button1” value=”CRVENA” onclick=”changecolor(‘red’)”> <input type=”button” name =”Button2” value =”ZELENA” onclick=”changecolor(‘green’)”> <input type=”button” name =”Button3” value =”PLAVA” onclick=”changecolor(‘blue’)”> <input type=”button” name =”Button4” value =”BELA” onclick=”changecolor(‘white’)”> </form></body></html>

3. Proveriti prikaz u Web �ita�u

200 MULTIMEDIJA

Vežba 4.5.3 Javascript (klijent) – upravljanje interfejsom

Programska rešenja za nekoliko prakti�nih problema:

1. Otvaranje stranice u novom prozoru

2. Umetanje u stranicu datuma ažuriranja stranice

3. Blokiranje upotrebe desnog tastera

Koriste�i Dreamweaver kreirati dve HTML stranice, Prva.html i Druga.html. Uneti proizvoljan sadržaj u stranicu Druga.html (npr. naslove ”Prva stranica” i ”Druga stranica” u formatu Heading 1) i sa�uvati izmene.

1. Otvaranje stranice u novom prozoru

U stranici Prva.html kreirati hipervezu na stranicu Druga.html (pomo�u Insert / Hyperlink) i postaviti svojstvo target na _blank, �ime se obezbe�uje otvaranje novog prozora za prikaz stranice.

Isti efekat se postiže Javascript kodom pomo�u metoda Open objek-ta Window, koji se može pokrenuti doga�ajem OnClick komandn�g taster� forme:


Oba rešenja otvaraju novi prozor za prikaz stranice Druga.html:

2. Umetanje u stranicu datuma ažuriranja u stranicu

Veoma korisna informacija na stranici je datum poslednje izmene, koji se nalazi u svojstvu lastmodi� ed objekta document.

202 MULTIMEDIJA

Prikaz na stranici se postiže umetanjem Javascript koda:Ažurirano:<SCRIPT LANGUAGE=”JAVASCRIPT”> document.write(document.lastModi� ed)</SCRIPT>

Datum poslednje izmene �e se prikazati u podrazumevaju�em forma-tu:

3. Blokiranje upotrebe desnog tastera

Ponekad je korisno ograni�iti korisnika samo na trenutni zadatak i blokirati neke tastere miša ili tastature. Npr. desni klik miša se može blokirati slede�im Javascript kodom:

<script language=”Javascript”>

function NoRightClick(b) { if(((navigator.appName==”Microsoft Internet Explorer”) && (event.button > 1)) || ((navigator.appName==”Netscape”)&&(b.which > 1))){ alert(”Taster je blokiran”); return false; } }

document.onmousedown = NoRightClick;

</script>

Nakon dodavanja u zaglavlje HTML stranice, desni klik na površinu prozora dokumenta daje:


Vežba 4.5.4 Javascript (klijent) – validacija forme (provera bar koda)

Provera ispravnosti bar koda prilikom unosa u polje Web forme.

Provera podataka unesenih pomo�u Web forme može se izvršiti na više na�ina, zavisno od doga�aja koji pokre�e validaciju: u okviru polja forme, prilikom svake promene; nakon unosa svih podataka u formu i nakon slan-ja podataka serveru (najšeš�e pore�enje sa postoje�im podacima u nekoj bazi podataka).

Provera sintakse (forme) podataka poput poštanskog i telefonskog broja, e-mail adrese, mati�nog broja i bar-koda može se vršiti na klijentu, pre slanja podataka serveru. Time se rastere�uje server, pošto se ne vrše nepot-rebni upiti u bazu podataka.

Sintaksa bar-kod oznake po standardu EAN-13 proverava se izra�unavanjem kontrolne sume prvih dvanaest cifara prema slede�oj tabeli i njenim pore�enjem sa trinaestom, kontrolnom cifrom:

204 MULTIMEDIJA

Cifra 1 2 3 4 5 6 7 8 9 10 11 12 13

Kod bez kont. cifre 6 2 9 1 0 4 1 5 0 0 2 1 Korak 1: pomnožiti x x x x x x x x x x x x

sa 1 3 1 3 1 3 1 3 1 3 1 3 Korak 2: sabrati = = = = = = = = = = = =

suma 6 6 9 3 0 12 1 15 0 0 2 3 = 57

Korak 3: Oduzeti sumu od najbliže ve�e desetice (60) = Kontrolna cifra (3) Kod sa kont. cifrom 6 2 9 1 0 4 1 5 0 0 2 1 3

Procedura se može realizovati slede�om Javascript funkcijom (forma Forma, polje forme barkod):

function ValidacijaBarKoda(){ //-- Kad su unesene sve cifre EAN-13 bar koda, provera is-pravnosti if (document.BarKod_form.BarKod.value.length==13) { var factor, cc, sum, i, barcheck factor = 3; sum = 0; for (i = document.BarKod_form.BarKod.value.length-1; i > 0; --i) { sum = sum + document.BarKod_form.BarKod.value.substring(i-1,i)*factor; factor = 4 - factor; } cc = ((1000 - sum) % 10); barcheck= document.BarKod_form.BarKod.value.substring(12,13)==cc if (!barcheck) { alert(‘Neispravan kod ‘+ document.BarKod_form.BarKod.value.substr(0,12)+’(‘+ document.BarKod_form.BarKod.value.substring(12,13)+’)<>(‘+cc+’)’) } } else { alert(‘Bar kod treba da ima tacno 13 cifara!’); barcheck= false; } return barcheck }

U slu�aju pogrešnog koda, ispisuje se informativno upozorenje o neis-pravnom kodu, a funkcija vra�e vrednost false, što �e onemogu�avati slanje neispravnog koda serveru sve do unosa ispravne vrednosti i uspešne validacije.


Primer provere neispravnog bar-koda (unos bar-koda pomo�u nešto modi-� kovane forme iz primera za OnSubmit):

Vežba 4.5.5 Javascript (klijent) – valutni kalkulator

Kreirati jednostavni valutni kalkulator kalkulator za prera�unavanje iz dinara u EUR. Unosi se dinarski iznos za prera�unavanje i kurs EUR. Kao rezultat ra�unanja se dobija ekvivalentni iznos u EUR.

1. Koriste�i Dreamweaver kreirati HTML formu sa tri polja (za dinarski iznos, kurs EUR i prikaz rezultata u EUR) i taster ”Vrednost u EUR: ”.

2. Za taster ”Vrednost u EUR: ” kreiratit doga�aj OnClick kojim se pokre�e dodela izra�unate vrednosti u EUR.

206 MULTIMEDIJA

Za jednu JavaScript naredbu nije potrebno pisati posebnu funkciju. Pošto se ra�unanje obavljaju na klijentu, ne koristi se taster Submit za slanje un-esenih podataka serveru.

Prikaz funkcionisanja opisane male JavaScript aplikacije je na slici:

Sli�ni kalkulatori za razli�ita prera�unavanja (valute, merne jedinice), koji predstavljaju male segmente �istog JavaScript koda, veoma lako se mogu dodati postoje�im Web stranicama.


Vežba 4.5.6 Javascript (klijent) – animacija teksta

Animacija teksta u prozoru Web �ita�a.

Interesantan efekt kontinualnog pomeranja stilizovanog teksta po površini prozora �ita�a postiže se sukcesivnim pomeranjem prikaza metodom SetTimeout(funkcija_pomeranja, pauza_ms).

1. Koriste�i Dreamweaver kreirati praznu HTML stranicu, promeniti prikaz u prikaz koda i uneti slede�i HTML/Javascript kod:

<html> <head> <title>Vertikalno pomeranje teksta</title>

<script language=”JavaScript”> var slideSpeed = 1; function moveLayer(target,newTop) { if (document.getElementById) { targetLayer = document.getElementById(target).style } else { targetLayer = eval(”document.” + target); } targetLayer.top = newTop; if (newTop < 600) { setTimeout(”moveLayer(‘”+target+”’,”+(newTop+1)+”)”, slideSpeed * 25); } } </script> </head> <body onLoad=”moveLayer(‘myLayer’,0);”> <div id=”myLayer” style=”position: absolute; top: -100;”> <p> Prvi red pokretnog teksta.<br> Drugi red pokretnog teksta.<br> Treci red pokretnog teksta..<br> (Može se dodati potreban broj redova). </p> </div> </body></html>

208 MULTIMEDIJA

Objekt pomeranja je blok teksta, de� nisan HTML oznakom div u posebnom sloju myLayer, za koji je de� nisana apsolutna po�etna pozicija u prozoru �ita�a. Doga�aj OnLoad aktivira funkciju move-Layer, koja pomera objekt tako što menja parametar top sloja u kome je objekt de� nisan.

Procedura se poziva rekurzivno, sve dok se ne završi vertikalno pomer-anje za de� nisanih 600 piksela.

2. Proveriti prikaz pomeranja u Web �ita�u (kompletan tekst se kontinu-alno pomera od vrha ekrana prema dole):

Vežba 4.5.7 Javascript (klijent) – animacija rasterske slike

Animacija pomeranjem rasterske slike u prozoru Web �ita�a (banner)

Metodom iz prethodne vežbe se mogu�e je pomerati i rasterske slike po površini prozora �ita�a.

1. Koriste�i Dreamweaver kreirati praznu HTML stranicu. sa�uvati stranicu na novi folder. U istom folderu kreirati podfolder images, u koji smestiti rastersku sliku, npr. Logo.jpg dimenzija 228x44 piksela.

2. Promeniti prikaz u prikaz koda i uneti slede�i HTML/Javascript kod:


<html> <head> <title>Horizontalno pomeranje bannera</title>

<script language=”JavaScript”> var slideSpeed = 1; function moveLayer(target,newLeft) { if (document.getElementById) { targetLayer = document.getElementById(target).style } else { targetLayer = eval(”document.” + target) } targetLayer.left = newLeft; if (newLeft < 1000) { setTimeout(”moveLayer(‘”+target+”’,”+(newLeft+1)+”)”, slideSpeed * 25); } } </script> </head> <body onLoad=”moveLayer(‘myLayer’,0);”> <div id=”myLayer” style=”position: absolute; left: -100;”> <img src=”images\Logo.jpg”> </div> </body></html>}

Slika �e se pomerati horizontalno, s leva udesno, pa se inicijalno post-avlja izvan ekrana 100 piksela levo (oznaka div).

Rekurzivna funkcija moveLayer vrši pomeranje postepenim pove�avanjem svojstvo left de� nisanoig sloja slike myLayer do vred-nosti 1000.

210 MULTIMEDIJA

3. Provera prikaz u Web �ita�u daje glatko pomeranje slike udesno:

Vežba 4.5.8 Primer kreiranja Web lokacije sa dinami�kim elementima u jeziku JavaScript (katalog �estitiki)

Kreirati Web lokaciju �ija je osnovna namena slanje prigodnih �estitki za novogodišnje praznike pomo�u elektronske pošte.

Lokacija treba da se sastoji od najmanje tri Web stranice:1. osnovne stranice, na kojoj se vidi naziv i osnovna namena lokacije, 2. stranice sa katalogom gra� �kih rešenja �estitki, gde se klikom na

izabranu �estitku pokre�e e-mail editor poruka sa ve� unesenom iz-abranom �estitkom (14,8x10cm), a korisnik treba da unese tekst i e-mail adresu primaoca,Izvršiti proveru unosa e-mail adrese i u slu�aju neispravnosti upo-zoriti korisnika da ponovi unos, i

3. stranice za kontakt, na kojoj se nalaze osnovni podaci o autoru lo-kacije (ime i prezime, adresa, telefon i e-mail adresa).

Na svakoj stranici treba da stoji datum poslednje izmene, koji se au-tomatski ažurira.


Koriste�i Macromedia Dreamweaver, Web lokacija se može kreirati na slede�i na�in:

1. De� nisati Web lokaciju (npr. pomo�u Site/New Site):

Ne�e se koristiti serverske tehnologije, ve� samo JavaScript:

Kreirati lokalni po�etni (root) folder:

212 MULTIMEDIJA

Web lokacija �e se realizovati u lokalnoj mreži, na lokalnim folderu:

Na ovaj na�in je de� nisana lokacija:


2. Kreirati tri stranice: osnovnu (home page), katalog �estitki i stranicu za kontakt.

Osnovna stranica: kreirati novu HTML stranicu (File/New), uneti naslov i tekst i sa�uvati pod nekim imenom (npr. Default.htm).

Katalog �estitki: uneti naslov i kreirati tabelu (Insert/Table) za raspored ilustracija i budu�ih hiperveza na posebne stranice �estitki:

214 MULTIMEDIJA

Stranica za kontakt: kreirati novu HTML stranicu sa osnovnim podac-ima o � rmi.


Povezati nove stranice kreiranjem tekstualnih hiperveza (Link u panelu Properties), npr. iz osnovne stranice na katalog.

216 MULTIMEDIJA

3. Za svaku �estitku izabrati gra� �ki motiv (rastersku sliku iz zbirke), obezbediti unos adresnih podataka i slanje elektronske poruke pomo�u podrazumevaju�eg programa za elektronsku poštu. Veli�inu i oblik gra� �kih motiva raspoloživom prostoru na ekranu i zahtevima zadat-ka, npr. 14,8x10cm uz 72dpi zna�i rezoluciju oko 420x280.

Umanjena verzija motiva �e poslužiti kao ilustracija u katalogu �estitki Katalog.htm. Veli�ina i oblik vinjeta nisu kriti�ni, mogu biti npr. u ok-viru 100x60 piksela.

Sve gra� �ke ilustracije treba prikupiti na posebnom folderu Web lo-kacije (kreirati u panelu Site pomo�u File/New Folder novi folder, npr. images)


4. Za svaku �estitku iz kataloga, kreirati novu stranicu u obliku HTML forme za unos podataka (sadržaj i podaci o primaocu/pošiljaocu). �estitka �e se poslati nakon unosa potrebnih podataka, klikom na tast-er Submit.

Odgovaraju�a stranica se može kreirati koriš�enjem gotovog obrasca (template) UI: Send Email A iz grupe Page Designs:

218 MULTIMEDIJA

Ova HTML stranica ima samo de� nisan raspored elemenata elektron-ske poruke: osnovnog sadržaja (Instructions) i HTML forme za unos naziva poruke (Subject), pošiljaoca (From), primaoca (To) , teksta (Message) i drugih podataka.

Element tabele na levoj strani se može upotrebiti kao okvir za gra� �ko rešenje (motiv) �estitke.

Polja forme ”from” i ”to” služe za unos podataka o primaocu i pošiljaocu.

Nakon uvoza gra� ke (Import/Image) i unosa � ksnog teksta, stranica Cestitka1 dobija izgled kao na slici:


Prikaz (preview) u Web �ita�u daje pravi izgled forme:

5. Prema uslovima zadatka, potrebno je obezbediti programsku kontrolu unosa podatka u polje ”from” i ”to”. U ovom primeru se ne�e provera-vati ispravnost sintakse elektronske adrese, ve� samo da li su podaci uneseni ili ne.

220 MULTIMEDIJA

Najjednostavniji na�in kontrole ispravnosti unosa podataka putem forme (validacija) može se izvršiti koriste�i Javascript funkciju koja se aktivira doga�ajem Submit, koji se de� niše argumentom OnSubmit u de� niciji forme.

Sama procedura može biti veoma jednostavna:

<script language=”JavaScript”> </script>

Izmenjeni kod stranice može sa izgleda kao na slici:

Provera u Web �ita�u daje:

1. Datum poslednje izmene stranice se nalazi kao vrednost svojstva last-modi� ed objekta document. Prikazuje se upisom rezultata evaluacije izraza document.lastmodi� ed na odgovaraju�u poziciju Web stran-ice.

Ažurirano:<script language=”JavaScript”> </script>

Na osnovnoj stranici, umetnuti kod daje rezultat u Web �ita�u:

222 MULTIMEDIJA

Potrebno je dopuniti katalog ve�im brojem �estitki i za svaku kreirati e-mail stranicu.

2. Za ve�i broj �estitki, ipak treba koristiti e� kasniji (programski) na�in kreiranja kona�ne e-mail poruke, koriš�enjem serverske baze podataka i dinami�kih stranica.


OSNOVE WEB APLIKACIJA

Web aplikacije su Web lokacije koja sadrže stati�ke i dinami�ke HTML stranice smeštene na Web server.

Njihov konkretan sadržaj de� niše se u trenutku kada korisnik putem �ita�a zahteva stranicu od Web servera. Tada softver Web servera interpretira umetnuti serverski kod i zamenjuje ga elementima jezika HTML. Poznatiji serverski jezici su npr. serverski JavaScript, JScript, VBScript, C#, Java i PHP.

U ovom delu �e se ukratko ilustrovati upotreba jezika VBScript za pristup bazama podataka (raspoloživ na lokalnom Web serveru ra�unara sa opera-tivnim sistemom Windows 2000/XP/NT Professional ili Server).

OKRUŽENJE ASP

Jezik VBScript je nastao kao alternativa jeziku JScript, verziji serverskog JavaScript-a kompanije Microsoft, koji je nastao po ugledu na C++. Kao i JScript, namenjen je programiranju dinami�kih HTML stranica, poseb-no radi pristupa podacima u bazama podataka. Kompletna tehnologija je dobila naziv Active Server Pages (ASP).

ASP skriptovi se unose u HTML stranice izme�u oznaka <% i %>.

OBJEKTNI MODEL ASP

ASP je objektno okruženje, koje se zasniva na samo pet ugra�enih global-nih objekata: Request, Response, Server, Session i Application.

Objekt Request služi za de� nisanje korisni�kih zahteva Web serveru, Re-sponse za slanje informacija koje predstavljaju odgovor Web servera koris-niku, objekt Server služi za upravljanje Web serverom, objekt Session za memorisanje informacija i postavljanje parametara pristupa sesije (jednog pristupa Web lokaciji), a objekt Application služi za razmenu informacija više kjorisnika u toku izvršavanje teku�e Web aplikacije.

224 MULTIMEDIJA

Sintaksa upotrebe ovih objekata može se sumirati kao:Request[.collection|property|method](variable)Response.collection|property|methodServer.property|methodSession.collection|property|methodApplication.method

Svaki od obekata ima sopstvena svojstva i metode.

PRISTUP PODACIMA

U tehnologiji ASP, pristup podacima, posebno u relacionim bazama po-dataka, ostvaruje se pomo�u namenskih ADO objekata (Microsoft Ac-tiveX Data Objects), koji obezbe�uju jedinstven na�in pristupa razli�itim sistemima za skladištenje podataka na disku.

Za pristup bazi, kreira se instanca COM objekta za pristup bazi pomo�u metoda Server.CreateObject:

Dimm Conn Set Conn = Server.CreateObject(”ADODB.Connection”)

Zatim je potrebno de� nisati vrstu baze podataka i osnovne pristupne el-emente, kao i druge elemente koji zavise od same baze.

Za serverske baze, kao što su Oracle, SQL Server i MySQL ne zadaje se � zi�ka lokacija na disku, ve� lokacija servera i pristupni elment, npr.

Conn.Mode = adModeReadWriteConn.ConnectionString = ”DSN=myDSN; UID=korisnik;” +_ ”PWD=lozinka;”

Za Microsoft Access bazu podataka Primer.mdb na � zi�koj lokaciji C:\Multimedija, mora se de� nisati i njena � zi�ka lokacija na disku, npr.:

Conn.Mode = adModeReadWriteConn.ConnectionString = ”PROVIDER=Microsoft.Jet.OLEDB.4.0;” +_ ”DATA SOURCE=C:\Multimedija\Primer.mdb”Conn.Open

što se može kra�e zapisati:Conn.Mode = adModeReadWriteConn.Open(”PROVIDER=Microsoft.Jet.OLEDB.4.0;” +_ ”DATA SOURCE=C:\Multimedija\Primer.mdb”)


PRIKAZ PODATAKA U ASP STRANICI

Prikaz podataka iz fajla ili tabele baze podataka može se realizovati koriš�enjem ADO objekta i objekta Response, �iji metod write ume�e podatke u HTML dokument pre prikazivanja na klijentu.

U slede�em primeru, pretpostavlja se postojanje Microsoft Access baze podataka Primer.mdb na � zi�koj lokaciji C:\Multimedija, koja sadrži tabelu Korisnik, sa poljima Ime (50), Prezime(50) i eAdresa(50).

Primer dinami�ke Web stranice Korisnik.asp za prikaz podataka iz tabele Korisnik:

<HTML><HEAD> <TITLE>Lista korisnika</TITLE></HEAD><BODY><% Dim DB Set DB = Server.CreateObject(”ADODB.Connection”) DB.Open(”PROVIDER=Microsoft.Jet.OLEDB.4.0;” +_ ”DATA SOURCE=C:\Multimedija\Primer.mdb”) Dim RS Set RS = Server.CreateObject (”ADODB.Recordset”) RS.Open ”SELECT * FROM Korisnik”, DB If RS.EOF And RS.BOF Then Response.Write ”Nema nijednog korisnika u listi” Else RS.MoveFirst While Not RS.EOF Response.Write RS.Fields(”Ime”)+” ” Response.Write RS.Fields(”Prezime”)+”, ” Response.Write RS.Fields(”eAdresa”) Response.Write ”<HR>” RS.MoveNext Wend End If%></BODY></HTML>

226 MULTIMEDIJA

Primer rezultata izvršavanja dinami�ke stranice Korisnik.asp, za tri unesena korisnika:

Pregledniji ispis podataka se može realizovati upotrebom HTML tabele za formatiranje prikaza po redovima i kolonama.

Odgovaraju�i HTML kod za tabelarni prikaz podataka dobija se zamenom naredbi za ispis u while petlji, uz dodatni HTML kod ispred while petlje za ispis zaglavlja tabele.


Primer koriš�enja ove tehnike za ispis liste korisnika iz tabele Korisnik je na slede�oj slici:

<HTML><HEAD> <TITLE>Lista korisnika</TITLE></HEAD><BODY><% Dim DB Set DB = Server.CreateObject(”ADODB.Connection”) DB.Open(”PROVIDER=Microsoft.Jet.OLEDB.4.0;” +_ ”DATA SOURCE=C:\Multimedija\Primer.mdb”) Dim RS Set RS = Server.CreateObject (”ADODB.Recordset”) RS.Open ”SELECT * FROM Korisnik”, DB If RS.EOF And RS.BOF Then Response.Write ”Nema nijednog korisnika u listi” Else Response.Write ”<table border=1>” Response.Write ”<tr> <th>Ime</th><th>Prezime</th>” Response.Write ”<th>e-mail</th> </tr>” RS.MoveFirst While Not RS.EOF Response.Write ”<tr>” Response.Write ”<td>” Response.Write RS.Fields(”Ime”) Response.Write ”</td>” Response.Write ”<td>” Response.Write RS.Fields(”Prezime”) Response.Write ”</td>” Response.Write ”<td>” Response.Write RS.Fields(”eAdresa”) Response.Write ”</td>” Response.Write ”</tr>” RS.MoveNext Wend Response.Write ”</table>” End If%></BODY></HTML>

228 MULTIMEDIJA

Novi izgled prikaza podataka je kao na slici:

AŽURIRANJE PODATAKA POMOU WEB FORME

Primer izgleda Web stranice UnosKorisnika.asp za unos podataka o jed-nom konkretnom korisniku u tabelu Korisnik:

<HTML><HEAD> <TITLE>Unos korisnika</TITLE></HEAD><BODY><% Dim DB Set DB = Server.CreateObject (”ADODB.Connection”) DB.Mode = adModeReadWrite DB.Open (”PROVIDER=Microsoft.Jet.OLEDB.4.0;” +_ ”DATA SOURCE=C:\Multimedija\Primer.mdb”) Dim RS Set RS = Server.CreateObject (”ADODB.Recordset”) RS.Open ”Korisnik”,DB,adOpenStatic,adLockPessimistic RS.AddNew RS (”Ime”)= ”Ivana” RS (”Prezime”)= ”Ivanovi�” RS (”eAdresa”)= ”[email protected]” RS.Update%></BODY></HTML>


Unos podataka o korisnicima se u stvarnosti ne vrši zadavanjem � ksnih vrednosti u samoj stranici, npr. RS(”Ime”)= ”Ivana”, ve� interaktivno, npr. pomo�u HTML forme:

<form action=”UnosKorisnika2.asp” method=”post”> <input type=”hidden” name=”action” value=”validate_login”> <table border=”0”> <tr> <td align=”right”>Ime:</td> <td><input type=”text” name=”frmIme” /></td> </tr> <tr> <td align=”right”>Prezime:</td> <td><input type=”text” name=”frmPrezime” /></td> </tr> <tr> <td align=”right”>e-mail adresa:</td> <td><input type=”text” name=”frmeAdresa” /></td> </tr> <tr> <td align=”right”></td> <td><input type=”submit” VALUE=”Unos” /></td> </tr> </table></form>

Uneseni podaci se koriste za formiranje SQL izraza za dodavanje novog korisnika u tabelu Korisnik baze podataka:

Dim strSQL strSQL= ”INSERT INTO Korisnik (Ime,Prezime,eAdresa)”+ _ VALUES (”+ _ Request.Form(”frmIme”)+”,”+ _ Request.Form(”frmPrezime”)+”,”+ _ Request.Form(”frmeAdresa”)+”);”

SQL re�enica se izvršava metodom Eexecute ADODB objekta:

DB.Execute(strSQL)

230 MULTIMEDIJA

Primer izgleda forme i stranice za unos podataka UnosKorisnika2.asp u �ita�u:

Za unesene podatke, procedura za unos novog korisnika �e formirati i izvršiti SQL izraz:

INSERT INTO Korisnik (Ime, Prezime, eAdresa) VALUES (‘Vladislav’,’Miškovic’,’[email protected]’);

ILUSTRACIJA JEZIKA PHP

ASP i MS Access su komercijalni programi. U slede�oj vežbi �e se na malom primeru ilustrovati izrada Web aplikacije u tehnologiji otvorenog koda - jeziku PHP (PHP Hypertext Preprocessor) i sistemu za upravljanje bazama podataka MySQL. Jezik PHP se ne�e posebno uvoditi, ve� �e se samo objasniti konkretan primer.

Vežba 4.5.9: Kreiranje Web aplikacije ‘katalog proizvoda’ (PHP)

Izraditi dinami�ku Web lokaciju za prikaz liste proizvoda ili usluga, koja se sastoji od klijetskog dela za prikaz i serverskog dela za unos i izmene liste proizvoda.

Realizova�e se dinami�ka Web lokacija za prikaz liste proizvoda, koja se sastoji od klijetskog (front end) i serverskog (back end) dela.

Kada korisnik �ita katalog proizvoda, koristi klijentski deo aplikacije u kojem je interfejs za prikaz promenljivog sadržaja.


Unos i ažuriranje baze podataka proizvoda vrši se pomo�u serverskog dela aplikacije, koji omogu�ava administratoru da dodaje ili briše proizvode.

Serverski deo aplikacije služi za ažuriranje podataka koji �e se prikazi-vati pomo�u klijentskog dela. Klijentski deo aplikacije �e služiti samo za pregled kataloga proizvoda.

1) Serverski deo aplikacije (proizvodi_admin.php)

Serverski deo aplikacije koristi MySQL bazu podataka. Katalog proizvoda je baza podataka Primer, koja se sastoji od jedne tabele Proizvodi �iji su atributi naziv, cena i opis proizvoda (Naziv, Cena i Opis).

HTML kod obi�ne forme za unos je:

<form action=”proizvodi_admin.php” name=”proizvodi” id=”proizvodi”> Naziv:<br> <input type=”text” name=”naziv”><br> <br> Cena:<br> <input type=”text” name=”cena”><br> <br> Opis:<br> <textarea name=”opis”></textarea><br> <input type=”hidden” name=”date” value=”<?print date(”Y-m-d”);?>”> <input type=”submit” name=”submit” value=”submit”> </form>

Web forma ima tri aktivna polja za unos i jedno skriveno polje, koje PHP koristi za štampanje teku�eg datuma.

Svako polje forme za unos ima svoje ime, koje je važno za prenos po-dataka izme�u Web aplikacija: kada se forma pošalje (submit) stranici na-vedenoj u polju ”action” oznake <form>, svako polje za unos i polje za tekst postaje promenljiva, sa imenom de� nisanim u HTML formi. Kada se forma ”proizvodi” pošalje stranici ”proizvodi_admin.php”, vrednost koja je unesena u ulazno polje HTML forme ”naziv” nalazi�e se u promenljivoj $naziv.

Svaki imenovani HTML objekat iz forme postaje promenljiva �ija vred-nost je uneseni sadržaj.

232 MULTIMEDIJA

Forma za unos podataka o proizvodima mogla bi da izgleda ovako (ako je sa�uvana na http://localhost/test/):

Kada se katalog proizvoda realizuje kao tabela SQL baze podataka, server-ski PHP kod za ažuriranje ima slede�i oblik:

<? if ( isset($submit)) { // Uspostavljanje konekcije sa serverom baze pod. // (zadaje se username i password) $link = mysql_connect(”localhost”, ”sa”, ””);

// Selekcija baze na serveru mysql_select_db(”primer”, $link);

// Kreiranje SQL upita $SQL = ”INSERT INTO Proizvodi SET naziv=’$naziv’, cena=’$cena’, opis=’$opis’, date=’$date’ ”; // Upit u bazu podataka mysql_query($SQL, $link); }?>

Pomo�u SQL re�enice INSERT INTO podaci uneseni putem forme se prenose u jedan red tabele baze podataka (svaki pojedina�ni podatak u odgovaraju�u kolonu).


Kompletna stranica proizvodi_ admin.php ima oblik:

/*------------------------------------------------------ proizvodi_admin.php Primer administratorske forme za azuriranje(verzija 1) Administrator azurira formu i završava sa submit. Tek tada se izvrsava PHP segment koda. ----------------------------------------------------*/<? if ( $submit == ”submit”) { // Uspostavljanje konekcije sa serverom baze pod. // (zadaje se username i password) $link = mysql_connect(”localhost”, ”sa”, ””);


// Kreiranje SQL upita $SQL = ”INSERT INTO Proizvodi SET naziv=’$naziv’, cena=’$cena’, opis=’$opis’, date=’$date’ ”; print $SQL; // Upit u bazu podataka mysql_query($SQL, $link); }?><html> <head> <title>Azuriranje baze podataka proizvoda </title> </head> <body> <form action=”proizvodi_admin.php” name=”proizvodi” id=”proizvodi”> Naziv:<br> <input type=”text” name=”naziv”><br> <br> Cena:<br> <input type=”text” name=”cena”><br> <br> Opis:<br> <textarea name=”opis”></textarea><br> <input type=”hidden” name=”date” value= ”<?print date(”Y-m-d”);?>”> <input type=”submit” name=”submit”> </form> </body></html>

234 MULTIMEDIJA

2) Klijentski deo aplikacije (proizvodi.php)

Prikaz podataka se vrši dinami�kom stranicom proizvodi.php:

<html> <head> <title>Prikaz spiska proizvoda</title> </head>

<body> <? // Uspostavljanje konekcije sa serverom baze pod. $link = mysql_connect(”localhost”, ”sa”, ””);


// Kreiranje SQL upita $SQL = ”SELECT * FROM Proizvodi”;

// Upit u bazu i pam�enje rezultata u memoriji $result = mysql_query($SQL, $link);

// Prikaz podataka iz memorije u petlji // Za prikaz se koriste se standardni HTML elementi while ( $row = mysql_fetch_object($result) ) { print ”<h1>$row->naziv</h1><br>”; print ”<h2>$row->cena</h3><br>”; print ”<h3>$row->date</h3><br>”; print ”$row->opis<br><br><br>”; } ?> </body></html>

Podaci se formiraju SQL upitom ”SELECT * FROM Proizvodi”, a prikaz se vrši generisanjem HTML izraza za prikaz svakog podatka, sve dok se od servera dobijaju podaci u promenljivoj $row.


4.6 OSNOVNI STANDARDI

Cilj

Upoznavanje sa standardima dostupnosti kroz prakti�an rad na izradi dostupne Web lokacije.

Prema speci� kacijama WAI (Web Content Accessibility Guidelines 1.0, http://www.w3.org/TR/WAI-WEBCONTENT/) postoje tri nivoa uskla�enosti sa standardima dostupnosti (Conformance Levels):- nivo ”A”: zadovoljeni zahtevi prioriteta 1 (pristup svima)- nivo ”AA”: zadovoljeni zahtevi prioriteta 1 i 2 (pristup bez teško�a)- nivo ”AAA”: zadovoljeni zahtevi prioriteta 1, 2 i 3 (unapre�eni pris-

tup, bez teško�a)

Nivoi prioriteta 1-3 imaju slede�e zna�enje:

1. Zahtevi koji se obavezno moraju zadovoljiti, jer obezbe�uju dostupnost Web dokumenata svim kategorijama korisnika (omogu�avanje pristu-pa)

2. Zahtevi koje treba zadovoljiti, jer spre�avaju teško�e koje �e u pristupu Web dokumentima imati jedna ili više kategorija korisnika (uklanjanje zna�ajnih prepreka)

3. Zahtevi koji se mogu zadovoljiti, pošto spre�avaju neke teško�e koje jedna ili više kategorija korisnika mogu imati u pristupu Web doku-mentima (unapre�enje pristupa)

Validacija dostupnosti se može izvršiti automatizovano i pregledom od strane �oveka. Automatizovane metode su brže, ali ne mogu da otkriju sve mogu�e probleme.

Validaciju treba vršiti ve� u ranim fazama razvoja, jer je tada lakše izbe�i greške i izvršiti eventualne ispravke.Pregled ve�eg broja alata pogodnih za proveru i popravku Web stranica može se na�i na adresi http://www.w3.org/WAI/ER/existingtools.html.

236 MULTIMEDIJA

Vežba 4.6.1: Testiranje Web stranice na dostupnost (Dreamweaver)

1. Kreiranje praznu HTML stranicu .

2. Testirati dostupnost pomo�u funkcije File / Check Page / Check Accessibility

3. Pregledati izveštaj o testiranju na dostupnost u panelu Site Reports.

1. Kreiranje praznu HTML stranicu sa File/New/Basic page/HTML.

2. Testirati dostupnost pomo�u funkcije File / Check Page / Check Acces-sibility

3. Pregledati izveštaj o testiranju na dostupnost u panelu Site Reports (grupa Results)

Rezultati provere se prikazuju u posebnom panelu SiteReports. Crveni znak je oznaka greške prilikom automatizovamog testiranja.

Sivi znak pitanja zna�i da je neophodno izvršiti ru�nu proveru (MANUAL), npr. zbog izostavljenog tekstualnog objašnjenja slike u ALT oznaci.

Za ispravku je potrebno otvoriti stranicu dvostrukim klikom na tekst problema. Problemati�ni deo koda je ve� selektovan. Nakon ispravke se provera može ponoviti.


Pomo�u tastera za svaku grešku se mogu dobiti dodatne informacije i uputstva u panelu Reference.

Pregledati i objasniti dojavljene probleme.

Kreirati novu praznu stranicu, dodati proizvoljan tekst i rastersku gra� -ku, izvršiti testiranje i uporediti dobijene rezultate sa prethodnim.

Vežba 4.6.2 VisCheck - simulacija efekta splepila za boje u Web stranicama

Pomo�u besplatnog alata VisCheck izvršiti proveru proizvoljne javno publikovane Web stranice na uskla�enost sa standardima dostupnosti u odnosu na korisnike sa nedostacima vida u percepciji boja.

1. Pokrenuti Web �ita� i uneti adresu besplatnog (free, open source) Web alata http://www.vischeck.com/vischeck/vischeckURL

238 MULTIMEDIJA

2. Izabrati vrstu slepila za boje (npr. Deuteranope), uneti adresu Web stranice �iji izgled za osobe s tim nedostatkom treba simulirati i potvr-diti tasterom Run Vischeck! Nakon obrade, pojavljuje se dijalog:


3. Za prikaz rezultata u posebnom prozoru �ita�a treba izabrati link Deu-teranope simulation. Dobija se simulirani izgled stranice:

4. Pore�enjem sa originalnom stranicom, vidljivo je da osobe s ovim nedostatkom ne vide dobro neke važne gra� �ke elemente (logotip):

240 MULTIMEDIJA

4.7 OSTALI PROGRAMSKI ALATI

4.7.1 Sistemi za upravljanje sadržajem

Sistem za upravljanje sadržajem (Content Management System, CMS) predstavlja softver pomo�u koga se menja kompletan sadržaj Web sajta. Omogu�ava jednostavno i brzo timsko ažuriranje sadržaja Web sajtova u velikim organizacijama svakome ko ima osnovno znanje koriš�enja ra�unara i programa za obradu i slaganje teksta, kao što je npr. Word.

Obi�no je napisan u jednom ili više jezika za izradu serverskih stranica (npr. ASP/PHP/Java).

CMS se obi�no sastoji iz administrativnog dela, uz pomo� koga se dodaje, briše ili menja kompletan sadržaj stranica i prezentacionog dela, koji ko-risti unapred de� nisane obrasce za prikaz sadržaja (template).

Konkretan sadržaj za prikaz (tekst, slike, zvuk i video) �uva se u bazi po-dataka sajta. Prikaz stranica se vrši tako da se obrasci (dinami�ke stranice) popunjavaju sadržajem iz baze podataka i prikazuju posetiocima.

Ve�ina sistema za upravljanje sadržajem omogu�ava prilago�avanje obima i na�ina upotrebe funkcija konkretnim potrebama organizacije.

Primeri komercijalnih CMS su Macromedia Contribute, Microsoft Con-tent Management Server i HardCore. Primeri besplatnih CMS su eZPublish, Mambo, DotNetNuke i Xaraya.Na slici je radni ekran za unos elemenata sadržaja sistema HardCore i kona�ni izgled jedne stranice u Web �ita�u.


4.7.2 AJAXNaziv poti�e od Asynchronous JavaScript and XML i odnosi se na nestan-darni na�in upotrebe Javascript objekta XMLHttpRequest za povezivanje sa serverskim skript-kodom u razli�itim formatima, npr. XML, HTML i standardni tekst fajl.

Asinhroni na�in rada se odnosi na mogu�nost izmene delova stranice bez osvežavanja kompletne stranice, što omogu�ava bržu reakciju na doga�aje koji nastaju u interakciji s korisnikom. Uz to, predvi�en je i rad sa XML dokumenatima.AJAX predstavlja posebnu kombinaciju više tehnologija:

- prikaz podataka je zasnovan na standardima XHTML i CSS- dinami�ki prikaz i interakcija se realzuju koriš�enjem Document

Object Model-a - razmena i manipulacija podacima se vrši koriš�enjem XML i XSLT - asinhroni pristup podacima se realizuje upotrebom XMLHttpRe-

quest - integracija tehnologija se vrši pomo�u jezika JavaScript.

Na slici je prikazana razlika u modelu klasi�ne i AJAX Web aplikacije:

242 MULTIMEDIJA

Razlika i u modelu interakcije s korisnikom, koji je kod klasi�ne Web ap-likacije sinhroni, a kod Ajax aplikacije asinhroni:

klasi�na sinhrona Web aplikacija

asinhrona Web aplikacija (AJAX)

4.7.3 Alati za animacije i integraciju tehnologija

Brojni alati za izradu vektorskih animacija, kao što je Autodesk Maya i in-tegraciju multimedijskih materijala, kao što je Macromedia Flash zahtevaju širi uvod i izlažu se u okviru odgovaraju�ih predmeta.

243POSLOVNE PRIMENE MULTIMEDIJE

5. POSLOVNE PRIMENE MULTIMEDIJE

Cilj

Upoznavanje sa tipi�nim poslovnim primenama multimedijske tehnologije i alatima za njihovu realizaciju.

U ovom poglavlju �e se prikazati naj�eš�e poslovne primene multimedijske tehnologije: poslovne prezentacije (slide-show, video i Web), videokonferencije, obrada rasterskih slika (imaging) i neki aspekti elektronskog poslovanja na Web-u.

5.1 Poslovne prezentacijePoslovne prezentacije se koriste za komunikaciju, prodaju, analizu i edukaciju. Razvile su se od tradicionalnog govornog na�ina izlaganja u nastupe podržane prenosnim (notebook) ra�unarima i projektorima u boji.

Pojava prenosnih ra�unara sa multimedijskim mogu�nostima i softverom za gra� �ke prezentacije (kao što je Microsoft Powerpoint) omogu�ava izlaga�u da potpuno samostalno kreira prezentaciju i time jednostavno zadovolji sve posebne zahteve.

Naj�eš�e oblik poslovne prezentacije je niz od jednog ili više slajdova koji �ine slideshow. Osim slajdova, prezentacija može da sadrži druge elemente, npr. napomene izlaga�a (speaker’s notes).

Pezentacija ima osnovni uzorak (master slide) kojim se na jednom mestu de� nišu vizuelni stilski elementi slajdova (npr. boje, fontovi i gra� ka).

Poznatiji programi za izradu poslovnih slideshow prezentacija su Microsoft Powerpoint, Lotus Freelance Graphics i Aldus Persuasion.

U ovom praktikumu �e se koristiti Powerpoint, koji je sada deo rasprostranjenog softverskog okruženja za prose�ne poslovne korisnike Microsoft Of� ce.

244 MULTIMEDIJA

MICROSOFT POWER POINT

Microsoft Power Point je program za izradu poslovnih prezentacija, koji mogu da koriste po�etnici, ali koji ima dovoljno mogu�nosti koje upotrebljavaju iskusni dizajneri poslovnih prezentacija.

Ima dobru podršku za brzo kreiranje tekstualnih sadržaja, omogu�ava izradu i uvoz pozadina, ima integrisan softver za izradu složenih gra� kona, ugra�ene funkcije za animaciju i upravljanje bojama, omogu�ava upotrebu uvezenih ilustracija, � lmova, gra� kona, teksta i audio fajlova.

Omogu�ava i kreiranje animiranih prezentacija, publikovanje slajdova u formatu 35 mm, štampanje folija, komentara i izvoz Web prezentacija.

Proces tehni�ke izrade slide-show prezentacije uz pomo� ovog paketa se može ukratko opisati na slede�i na�in (primeri za PowerPoint 2000):

1. Kreiraju se osnovni elementi stila prezentacije, najbrže pomo�u gotovih ugra�enih uzoraka (template):


2. Dodavanje novog slajda (New slide)

3. Slajd sorter omogu�ava preure�enje slajdova: operacije copy, paste, delete i postavljanje prelaznih efekata

246 MULTIMEDIJA

4. Outline hijerarhijski predstavlja sadržaj slajdova. Omogu�ava promenu ivoa teksta (promotion/demotion), ‘vertikalno’ premeštanje teksta i selektivni prikaz teksta u slajdovima (razli�iti nivoi detaljnosti - collapse/expand)

5. Promena stila prezentacije se e� kasno vrši promenom osnovnog obrasca – master slajdova.


6. Prilikom promene slajdova, mogu se korititi razli�iti vizuelni efekti – prelazi

7. Iako je slideshow prezentacija sekvencijalna, koriš�enjem tastera (action buttons), custom shows i menija (agenda slides) može se dobiti druga�ije upravljanje prelazom slajdova (bira se tip prelaza, može se aktivirati odreženi zvuk ili doga�aj).

Može se izabrati i automatski prelaz na slede�i slajd (zadaje se vreme i trajanje prelaza, što omogu�ava kreiranje automatskih prezentacija).

248 MULTIMEDIJA

8. Za prikaz ugra�enih multimedijskih objekata (animacija, zvuk, video) mogu se zadati parametri (slika)

9. Funkcija rehearse timings omogu�ava testiranje vremena trajanja (i linkove na napomene i prikaze)


10. Prelazi se mogu upotrebiti za postepeno prikazivanje ta�aka iz nabrajanja

5.1.1 Slide-show prezentacije

Naj�eš�e oblik poslovnih prezentacija je su slideshow prezentacije. Osim slajdova, koji se mogu kreirati upotrebom složenih multimedijskih objeka-ta, prezentacija može da sadrži dodatne elemente, npr. napomene izlaga�a (speaker’s notes) u obliku teksta ili zvu�nog zapisa, a �esto se kao podset-nik ili propagadni materijal štampa pregled izlaganja (handout) sa mini-jaturnim slajdovima na stranici.

Pezentacija ima osnovni uzorak (master slides) kojim se na jednom mes-tu de� nišu vizuelni stilski elementi slajdova (npr. podrazumevaju�e boje pozadine, teksta i tabela, podrazumevaju�i fontovi, parametri teksta i podrazumevaju�e boje u gra� konima).

250 MULTIMEDIJA

Prilikom kreiranja prezentacije, treba poštovati neke prakti�ne preporuke za izradu dobre slide-show prezentacije:

�� Svaki slajd ima jedinstvenu osnovnu ideju i koristi jednu gra� ku za svaki slajd

�� Svaka linija teksta sadrži najviše 6 -7 re�i, a na slajdu ima najviše 7 linija teksta, nabrajanja ili redova tabela

�� Mora se obezbediti �itljivost svih natpisa, po veli�ini i stilu

�� Koristiti animaciju i prelaze izme�u slajdova za podvla�enje osnovne ideje, a ne radi demonstracije specijalnih efekata

�� Koristiti druga�iji specijalni efekt za isticanje odre�enog mesta u izlaganju

�� Ne zadržavati suviše na jednom slajdu prilikom izlaganja - najviše 2 minuta

�� Mora se obezbediti kompletnost svih slajdova, a ne ponavljati verbalnu prezentaciju

�� Za završetak, dodati zatamnjeni slajd kao poslednji (uz postepeni prelaz do potpunog zatamnjenja).

Vežba 5.1.1.1: Izrada poslovne slide-show prezentacije na zadanu temu (demonstracija i samostalni projekt na zadanu temu)

1. Planiranje prezentacije na zadanu temu (li�na ili prezentacija � rme)

2. Kreiranje prazne slide-show prezentacije na osnovu uzorka (template, Web i PowerPoint).

3. Poštovanje osnovnih principa za izradu dobre slide-show prezentacije

1. Planiranje prezentacije na zadanu temu (li�na ili prezentacija � rme).

Pripremiti sadržaj (tekstualni ili gra� �ki) za prezentaciju zamišljene � rme ili pojedinca.

2. Kreiranje prazne slide-show prezentacije na osnovu template (Web i PowerPoint).


Izabrati neki od postoje�ih obrazaca kao polaznu osnovu za kreiranje prezentacije. Kroz nekoliko dijaloga se izdvaja konkretan uzorak, popunjen organizovanim po�etnim sadržajem prezentacije.

U prvom dijalogu se bira grupa uzoraka, a u drugom neka od ponu�enih tema:

252 MULTIMEDIJA

Zatim se izabere osnovni format slajda (ekranski, za štampu ili � lm)

Zatim se unosi naslov i završava izbor tipske prezentacije (Finish).

Rezultat je potpuno dizajnirana tipska prezentacija, sa organizacijom i po�etnim sadržajem u obliku podsetnika (naslovi, podnaslovi i nabrajanja).


Ponu�eni sadržaj treba zameniti pripremljenim tekstom i podacima o zamišljenoj � rmi ili pojedincu. Po potrebi se može promeniti ponu�eni broj i redosled slajdova, kao gra� �ki izgled prezentacije.

3. Poštovanje osnovnih principa

Može se uklju�iti opcija za stalnu proveru poštovanja osnovnih stilskih preporuka za kreiranje dobre prezentacije.

254 MULTIMEDIJA

Vežba 5.1.1.2: Konverzija PowerPoint slide-show prezentacije u HTML format i analiza koda

1. Otvaranje gotove PowerPont slide-show prezentacije.

2. Provera izgleda i funkcionalnosti pomo�u File/Web Page Preview

3. Konverzija u Web format pomo�u funkcije File/Save as Web Page

4. Provera funkcionalnosti Web prezentacije i analiza HTML koda

1. Otvaranje gotove PowerPont slide-show prezentacije

2. Provera izgleda i funkcionalnosti pomo�u File/Web Page Preview


U prozoru Web �ita�a se pojavljuje osnovna stranica Web prezentacije u kojoj je osnovni sadržaj svake stranice jedan slajd prezentacije. Kao osnovne navigacija, za svaki slajd je kreirana hipeveza u meniju na levoj strani ekrana �ita�a, a u dnu ekrana su kontrole za pomeranje na slede�u ili prethodnu stranicu (slajd).

3. Konverzija u Web format pomo�u funkcije File/Save as Web Page

Pomo�u tastera Publish može se de� nisati forma Web prezentacije (stranice).

256 MULTIMEDIJA

Postoji niz opcija koje se odnose na uslove kreiranja nove prezentacije (npr. navigacija, kompatibilnost s �ita�ima, organizacija fajlova, rezolucija ekrana)


Put za publikovanje se može podesiti sa Browse. Nakon podešavanja parametara, potvr�uje se tasterom Publish.

4. Provera funkcionalnosti Web prezentacije i analiza HTML koda se može izvršiti pomo�u Web �ita�a, pregledom kreirane prezentacije.

258 MULTIMEDIJA

Postoje�i linkovi u PowerPoint prezentaciji (ili izme�u njih) postaju HTML hiperveze.

Samostalni rad (PowerPoint)

Planirati i realizovati li�nu prezentaciju poštuju�i osnovne principe i empirijska pravila izrade dobre slide-show prezentacije.

5.1.2 Video prezentacije

Poslovne slideshow prezentacije se mogu realizovati i pomo�u alata za izradu video sadržaja. U tom slu�aju se pre svega koriste pokretna slika i zvuk, a tekst je samo pomo�no sredstvo za dokumentovanje video materijala (naslovi, prevodi i sli�no).


Vežba 5.1.2.1: Kreiranje poslovne multimedijske CD prezentacije (MPEG/WMV) – Windows MovieMaker


2. Kreiranje/izbor zvu�nih sekvenci


4. Dodavanje efekata



U ovom jednostavnom primeru koristi�e se jedna kratka video sekvenca Skate board.avi na kojoj je snimljeno spuštanje muške osobe padobranom (traje 4,04 sekunde, u rezoluciji 320x240).

U meniju Movie Tasks/Capture Video, izabrati Import Video, pozicionirati se na folder u kome su slike za uvoz, selektovati slike i potvrditi sa Import.

2. Kreiranje/izbor zvu�nih sekvenci

Može se upotrebiti muzi�ka tema, koja direktno ili na neki posredan na�in asocira na sadržaj videa. U ovom slu�aju je izabrana tema grupe Beach Boys - I Get Around, u potrebnom trajanju.

260 MULTIMEDIJA


Povezivanje skevenci u jedinstvenu video prezentaciju se vrši prevla�enjem na video-traku u donjem delu ekrana.


Za sinhronizaciju zvuka sa video zapisom potrebno je promeniti na�in prikaza u prikaz vremenske skale (Show Timeline), u kome se zvu�ni kanal posebno prikazuje.

Sinhronizacija zvuka �e se izvršiti prevla�enjem izabrane zvu�ne (muzi�ke) sekvence na zvu�nu traku video zapisa.

Rezultat se proverava na monitoru Windows MovieMaker-a:

262 MULTIMEDIJA

Video se može pokrenuti i zaustaviti, a teku�i frejm se može sa�uvati kao rasterska slika.

4. Dodavanje efekata

Za prijatniji utisak, nagle promene zvuka i slike treba ublažiti. To se postiže efektima uvo�enja i prelazima (transitions) u meniju Edit Movie sa leve strane ekrana.

Svaki video efekt je ilustrovan animacijom, a kona�no izabrani efekt se prevla�enjem na traku postavlja na po�etak ili kraj elementarne vid-eo sekvence.


Za korisnike programa Windows MovieMaker pretpostavlja se ograni�eno poznavanje standarda snimanja multimedijskih sadržaja i nudi ograni�en izbor na�ina zapisa: razli�ite varijante WMV formata i nekomprimovani AVI format (koji se može naknadno komprimovati nekim od besplatnih programa za konverziju formata video zapisa).

Za uobi�ajenu primenu u svrhu prezentacije pod operativnim siste-mom Windows može se koristiti WMV format zapisa, za koji treba samo odabrati kvalitet i veli�inu zapisa.


5.1.3 Web prezentacijeOsim za realizaciju Web lokacija na Internetu, HTML format se može upotrebiti i za izradu i distribuciju klasi�nih poslovnih prezentacija.

Koriste se HTML editori, slajdovi se zamenjuju stranicama, linkovi HTML linkovima, a posebno se mora voditi ra�una o de� nisanju sopstvenih sti-lova, jer se podrazumevaju�i stilovi razlikuju na razli�itim ra�unarima i Web �ita�ima.

Samostalni rad: Izrada poslovne prezentacije na zadanu temu (Web)

1. Kreiranje prazne prezentacije na osnovu uzorka (Web template).

2. Planiranje prezentacije na zadanu temu (li�na ili prezentacija � rme)

3. Poštovanje osnovnih principa i empirijskih pravila izrade dobre poslovne prezentacije

5.2 VIDEOKONFERENCIJE

Cilj

Upoznavanje sa opremom i softverom za videokonferencije kroz prakti�an rad na instaliranju i podešavanju programa Microsoft NetMeeting za videokonferencijsku vezu dva u�esnika u lokalnoj mreži.

Videokonferencija je dvosmerni prenos sinhronizovane slike (videa) i gov-ora (audio) izme�u dve ili više � zi�ki udaljenih lokacija radi razmene in-formacija, kao da su dva ili više u�esnika zajedno u � zi�koj konverzaciji.

Zajedni�ke osobine stonih (desktop) sistema za videokonferencije su:- sinhrona multimedijalna komunikacija u�esnika, - razmena podataka, - deljenje aplikacija (kreiranje zajedni�kih dokumenata), - sinhronizovano crtanje po zajedni�koj tabli i - chat (razmena tekstualnih poruka).

264 MULTIMEDIJA

Ve�ina klasi�nih sistema koristi standardne protokole H.323 i T.120. H.323 je skup protokola za razmenu audio, video sadržaja i podataka pomo�u paketne mreže, a T.120 predstavlja skup protokola za razmenu podataka izme�u više ta�aka.

Nešto noviji sistemi koriste SIP (Session Initiation Protocol), odnosno podržavaju oba standarda.

Klasi�ni programi za videokonferencije su Microsoft NetMeeting i Lotus SameTime, a videokonferencijske mogu�nosti imaju i noviji klijenti za razmenu tekstualnih poruka u realnom vremenu (instant mesaging), npr. Windows Live Messenger, Skype, Yaho! Messenger i AIM.

Microsoft NetMeeting 3

Jedan od poznatijih i rasprostranjenijih videokonferencijskih alata na Windows sistemima je Microsoft NetMeeting. Ne omogu�uje multi-medijalne konferencije više u�esnika bez dodatne podrške drugih pro-grama ili ure�aja (MCU, Multipoint Control Unit).

Za multilaterarne konferencije se može koristiti softverski MCU (npr. besplatni OpenMCU, http://www.OpenH323.org) ili hardverska rešenja, npr. � rmi Cisco, Emblaze-VCON, Polycom, Sony i Tandberg.

Lotus Sametime

Lotus Sametime je sistem za desktop videokonferencije namenjen radu virtuelnih timova. Osim osnovne, sistem omogu�uje i neke složenije funkcije (instant messaging, sistem rezervacije termina sastanaka, dis-kusione sobe, sobe za timski rad, vo�ene konferencije, snimanje kon-ferencije, integrisani sistem anketa/pitanja i detekciju prisustva osobe u sistemu).

SkypeBesplatni, ali nestandardni klijent za direktnu komunikaciju dva koris-nika ra�unara putem teksta, zvuka ili videa. Podržava grupnu komuni-kaciju putem teksta (chat), a za male grupe i audio putem.Pošto je nestandardan, svi u�esnici moraju imati prethodno instaliran program Skype (http://www.skype.com).

Windows Live MessengerKlijent za komunikaciju putem teksta (chat) sa dobrim videokonferen-cijskim mogu�nostima za operativni sistem Windows se može preuzeti sa adrese http://get.live.com/messenger.


5.2.1 Instalacija i podešavanje programa Microsoft NetMeeting

1. INSTALACIJA I POKRETANJE

1. Za Windows XP, proveriti da li postoji opcija NetMeeting u meniju Start/Programs /Accessories/Communications.

Ako je nema, pokrenuti Start/Run, uneti conf, pa Enter.2. Od administratora lolalne mreže tražiti IP adresu ra�unara koji �e biti

server.

266 MULTIMEDIJA

1.1. Instalacija

Pokrenuti NetMeeting 3 (npr. iz menija Start) i dobiti uvodni dijalog:

Uneti se IP adresu directory servera, npr. 129.128.75.70 i aktivirati Next.

Zatim se mogu uneti li�ni podaci, npr.


Neophodno je izabrati brzinu komunikacije u mreži (4 mogu�nosti):

Nakon toga se pokre�e asistent za podešavanje zvuka:

268 MULTIMEDIJA

Pritiskom na Test �uje se testni zvuk. Potenciometrom Volume podešava se nivo zvuka.

Ako se ne �uje testni zvuk, ispitati napajanje zvu�nika, ispravnost spajanja i funkcionisanje zvu�ne kartice (konsultovati Help).

Nakon Next, ako mikrofon fukcioniše, podešava se nivo zvuka mikrofona.

Ako se ne dobije dijalog, treba proveriti ispravnost priklju�ivanja mikrofona, zvu�nu karticu i njenu programsku podršku (konsultovati Help).

Nakon Next, instalacija je završena i pokre�e se program NetMeeting.


Izabrati mišem directory i funkciju refresh radi prikaza osnovnih informacija o eventualnim u�esnicima konferencije koja je u toku (kao na slici).

Po završetku instalacije zatvoriti NetMeeting (close).

1.2. Postavljanje režima rada (Setup)

Izabere se iz menija Tools stavka Options, opcija General.

Za uklju�enje svojih informacija na directory server, uneti njegovu IP adresu (npr. 129.128.75.70) u polje Server name: i potvrditi opciju log on to the directory server when NetMeeting starts.

270 MULTIMEDIJA

Zatim izabrati brzinu komunikacije pomo�u tastera Bandwidth Settings.

Na vežbama izabrati opciju Local Area Network. Pritisnuti Next.

Za pregled u�esnika na izabranom serveru, kliknuti ikonu.

Dvostruki klik na neko ime iz liste pokre�e pozivanje (conference call).

Vežba 5.2.1: LAN videokonferencija – tekst

Isprobati tekstualnu komunikaciju (chat) koriš�enjem programa Microsoft Net Meeting.

NetMeeting omogu�ava razmenu vizuelnih informacija uz pomo� crta�e table (Whiteboard), na kojoj se prikazuju crteži i slike koje kreiraju u�esnici konferencije.

Crta�a tabla omogu�ava:

- simultani prikaz akcija svih u�esnika konferencije na svim radnim stanicama ili samo nekih od njih


- nezavisno upravljanje izgledom crta�e table na svakoj radnoj stanici

- prenos izgleda delova ili celog desktopa ili prozora na crta�u tablu, kao i rukovanje sadržajem kroz mehanizam dodatnih stranica

- �uvanje sadržaja crta�e table radi kasnije upotrebe

- podržava 24 bitnu boju i obezbe�uje kompatibilnost sa T.126 standardom

Vežba 5.2.2: LAN videokonferencija – gra� ka

Isprobati gra� �ku mrežnu komunikaciju (whiteboard) koriš�enjem programa Microsoft Net Meeting.

Pokre�e se iz menija Tools/Whiteboard ili pomo�u namenskog tastera u paleti.

Sadržaj crta�e table se može zaklju�ati za druge u�esnike pomo�u funkcije Tools/Lock Contents ili odgovaraju�eg tastera.

Podru�je ekrana koje treba kopirati na crta�u tablu bira se tako da se iz menija izabere funkcija Tools/Select Area (ili se izabere odgovaraju�i taster), potvrdi se sa OK i zatim izabere odgovaraju�e podru�je ekrana. Na isti na�in se koristi i funkcija Tools/Select Window.

Uve�anje prikaza sadržaja (samo dva nivoa) vrši se odgovaraju�om funkcijom iz menija View ili pomo�u tastera iz Zoom iz palete.

Dodavanje i brisanje stranica vrši se iz menija Edit (Insert Page Before/After, Clear Page) ili pomo�u odgovaraju�ih tastera.

�uvanje sadržaja se vrši pomo�u funkcije File/Save (ekstenzija .wht za starije verzije ili .nmw).

272 MULTIMEDIJA

Vežba 5.2.3: Samostalni rad - internet videokonferencija

1. Priklju�iti Web kameru (USB) prema uputstvu proizvo�a�a.

2. Ako nije instaliran, instalirati izabranog klijenta za instant messaging (Skype ili Windows Live Messenger)

3. Ostvariti videokonferencijsku veza izne�u dva u�esnika preko odgovaraju�eg Internet servisa.

5.3 IMAGING

Cilj

Upoznavanje sa poslovnim primenama opštih i namenskih alata za obradu rasterskih slika u medicini.

Uvod

Rasterske slike se �esto kreiraju pomo�u skenera - ure�aja za digitalizaciju fotogra� ja, crteža i drugih medija.

Mediji se osvetljavaju � uorescentnim lampama, a odbijenu svetlost registruju, mere i pretvaraju u elektri�ni signal fotoosetljivi elementi, npr. poluprovodni�ki CCD (Charge-Coupled Device).

Broj fotoosetljivih elemenata po in�u odre�uje horizontalnu rezoluciju stonih skenera sa pokretnom glavom. Preciznost kretanja glave duž medija odre�uje vertikalnu rezoluciju skenera (sve u dpi).

Broj bita koji koristi skener za predstavljanje izmerenih veli�ina odre�uje dubinu boje, odnosno broj nijansi koje skener može detektovati u jednom pixel-u (obi�no je to 24-42 bita).

Osim standardnih formata nepokretnih slika, u medicinskim primenama se koristi standard DICOM (Digital Imaging and Communications in Medicine), koji se koristi za �uvanje i razmenu slika u medicinskim primenama u okviru sistema koji se �esto ozna�avaju kao PACS (Picture Archive and Communication System).


Osim namenskih i �esto veoma složenih sistema za obradu slika, u medicini se mogu koristiti i alati za obradu slika opšte namene.

Upotreba opštih alata za obradu slika u medicinskoj dijagnostici

U medicinskoj dijagnostici se koriste razli�ite metode dijagnostike stanja organizma i pojedinih organa, �iji kona�ni rezultat digitalna slika u boji (color image). Programi za automatizovanu analizu ovih snimaka vrše razli�ita merenja na snimcima analiziranog entiteta, npr. snimcima tkiva.

Jedan od opštih zadataka je merenje dimenzija dela slike sa odre�enim karakteristikama (površina, dijametar i sl.). U slede�em primeru se opisuje jedna od tehnika.

Vežba 5.3.1: Merenje površina metodom thresholding-a (medicina)

Postupak merenja je slede�i:

1. Izabrati konkretni snimak za analizu (obi�no u formatu JPEG, obi�no su� ks .jpg).

2. Izvršiti uklanjanje viška informacija metodom thresholding-a.

3. Izvršiti merenje površine odabranih podru�ja slike pomo�u komande Image\Histogram....

Procedura merenja površine pomo�u programa za obradu digitalnih slika, kao što je Adobe Photoshop, može se izvršiti nakon binarne modi� kacije slike tehnikom ujedna�avanja prema pragu (thresholding).

Tehnikom thresholding-a sa slike se uklanja višak informacija, a preostanu samo regioni od interesa, �ija se površina meri uz pomo� odgovaraju�e komande.

Postupak merenja je slede�i:

1. Izabrati konkretni snimak za analizu. Slike su obi�no u formatu JPEG (su� ks .jpg).

2. Izvršiti uklanjanje viška informacija metodom thresholding-a:

Najjednostavnija tehnika ujedna�avanja prema pragu je konverzija slike u boji (RGB) u monohromatsku sliku, pri �emu se istovremeno

274 MULTIMEDIJA

uklanjaju delovi koji nisu od interesa, dok na slici ostaju samo tamno obojena podru�ja koja nas zanimaju.

U svim dobrim programima za obradu ili analizu slika postoji odgovaraju�a funkcija za operaciju ujedna�avanja prema pragu.

U programu Adobe Photoshop, ova funkcija se nalazi u meniju Image/Adjustments/Threshold..., nakon �ega se dobije dijalog za podešavanje vrednosti praga u rasponu 1-256. U primeru je uzeto 128, kao na slici.

Optimalna vrednost se dobija vizuelnom procenom, u više pokušaja, kao na slici. Izabrana vrednost treba da omogu�i uklanjanje detalja ne-potrebnih u daljoj analizi i merenju.


Dobijeni rezultat (pojednostavljena slika) može se dalje obra�ivati ili zapamtiti pod drugim imenom.

3. Izvršiti merenje površine odabranih podru�ja slike:

Pomo�u alata za selekciju (lasso tool) izabere se, odnosno obuhvati podru�je od interesa i o�ita (“izmeri”) njegova površina u izabranim jedinicama (npr. pixel-ima).

U programu Adobe Photoshop, alat za selekciju (lasso tool) se nalazi u osnovnoj paleti alatki, kao na slici

Primer selekcije dva podru�ja od interesa pomo�u ovog alata su na sli-ci:

276 MULTIMEDIJA

Površine ovih podru�ja se meri pomo�u komande Image\Histogram..., kao na slici:

Vidi se da ozna�ena podru�ja imaju ukupnu površinu 309.338 pixel-a (nije problem da se prera�una u cm2 na osnovu drugih podataka o digi-talnoj slici).

Dobijena veli�ina se može upotrebiti kao kvantitativna vrednost jed-nog od obeležja konkretnog medicinskog slu�aja, a može se upotrebiti u statisti�koj analizi odre�ene populacije pacijenata.

Ovo merenja je izvršeno opštim programom za obradu slika. Namen-ski alati za imaging omogu�avaju preciznije, brže i lakše izvo�enje ovih i drugih, složenijih operacija.

5.4 E-POSLOVANJE

TELEFONSKI IMENIK NA WEB-U

Funkcionalan i lepo (donekle i raskošno) dizajniran portal državne teleko-munikacione kompanije Telekom Srbija ima veoma korisne javne telefon-ske imenike � zi�kih i pravnih lica, takozvane “bele” i “žute strane”.

Vežba 5.4.1: Ilustracija komercijalnog Web portala: “Telekom Srbija”, bele strane

1. Prikaz funkcionisanja portala

2. Prikaz funkcionisanja “belih strana” (telefonskog imenika)


Web adresa portala je http://www.telekom.yu. Do telefonskog imenika � zi�kih lica (“bele strane”) može se do�i izborom iz ponu�enih sadržaja na http://www.webstrane.yu ili pretraživanjem.

Na adresi http://www.belestrane.nadlanu.com/site/ može se dobiti telefon-ski broj pretplatnika kome znamo identi� kacione podatke (ime, prezime i adresa) ili obrnuto, ime, prezime i adresa pretplatnika �iji telefonski broj imamo.

278 MULTIMEDIJA

PRIKAZ BERZANSKIH INFORMACIJA (TIKER)

Tiker je traka nekadašnjeg telegrafskog aparata ne kojoj se postepeno ot-kucavala prenesena poruka. Ažurne berzanske informacije se �esto pri-kazuju kao trake (tikeri), u jednom ili svega nekoliko redova pokretnog ekranskog teksta.

Sekvencijalni na�in prikazivanja ve�eg obima informacija na veoma ma-lom prostoru može se uo�iti na primerima portala Beogradske berze (www.belex.co.yu) i nekih brokerskih ku�a (npr. www.senzal.co.yu i www.mvi.co.yu).


Vežba 5.4.2: Integracija informacija na Webu: berzanski indeksi

Kreiranje sopstvene stranice sa ažurnim berzanskim informacijama (Client side Stock Ticker)

1. Kreirati osnovnu HTML stranicu

2. Kopirati softver Client side Stock Ticker na isti folder

3. Uklju�iti tiker u HTML kod

4. Testirati stranicu on-line

1. Kreirati osnovnu HTML stranicu

Za ovu vežbu se može upotrebiti i potpuno prazna HTML stranica, kao i stranica u sklopu neke Web lokacije.

2. Kopirati softver Client side Stock Ticker na isti folder

Za kreiranje linije sa berzanskim informacijama na sopstvenoj stranici upotrebi�e se gotovo programsko rešenje, Client side Stock Ticker (može se preuzeti na http://www.planet-source-code.com/vb/scripts). Na slici je izgled informativne trake koju generiše.

280 MULTIMEDIJA

Ovo rešenje se zasniva na sistemu distribucije berzanskih informacija por-tala � nance.yahoo.com. Pošto je samo direktna distribucija ovih infor-macija sa servera portala (server side) zašti�ena autorskim pravima, po-daci se prvo prikazuju na klijentskoj strani (u samoj stranici).

Tiker zatim preuzima podatke sa klijentske stranice i vrši njihovo formati-ranje, prikazivanje i pomeranje (koriste se VBScript i Javascript rutine). Smešten je u posebnoj stranici “scroller.htm”, koja se u stranicu uklju�uje HTML oznakom:

<iframe id=”scroll” src=”scroller.htm” width=”980” height=”40” bgcolor=”#000000”></iframe>

Opis sadržaja stranice “scroller.htm” je na kraju uputstva za ovu vežbu.

Opis softverskog modula Client side Stock Ticker

Sledi kratki prikaz i objašnjenje upotrebljenog softverskog modula iz stran-ice “scroller.htm”. Stranica �e se prikazati po delovima. Zaglavlje stranice sadrži podatke o autoru u obliku komentara:

Funkcionisanje softvera se zasniva na programskom segmentu napisanom u jeziku VBScript (varijanta Visual Basic-a namenjena programiranju Web aplikacija).Podaci se preuzimaju sopstvenom funkcijom getQuotes, koja pristupa lokaciji http://� nance.yahoo.com. Simboli�kim parametrima nabraja-ju se kompanije �iji se podaci preuzimaju (u ovom primeru skra�enice MSFT,F,GM,COKE ozna�avaju kompanije Microsoft, Ford, General Mo-tors i Coca Cola).Preuzimanje podataka sa portala � nance.yahoo.com se vrši koriš�enjem posebnog VBScript objekta tipa XMLHTTP. Podaci se preuzimaju tako što se zadaju potrebni parametri za prenos (), naredbom objHTTP.Send se pošalje zahtev i pomo�u objHTTP.Respon-


seText se dobije odgovor u obliku teksta, koji se smešta u promenljivu u strResp. Nakon toga se izvrše neophodne manipulacije tekstom i dobija kona�ni format odgovora u promenljivoj strTemp, koji se vra�a kao rezul-tat funkcije getQuotes().

<script language=”vbscript”> Dim strSymbol ‘ add all the symbols that you want to be pulled on the stock

ticker, you can have a comma seperated list. ‘ you can look up the symbols at http://� nance.yahoo.comstrSymbol = “MSFT,F,GM,COKE”

Function getQuotes() Dim strColor, strArrow

‘ here we use MSXML XMLHTTP object ‘ this object is available with IE5.5 or Above on Error Resume Next

Set objHTTP = CreateObject(“Msxml2.XMLHTTP”) objHTTP.Open “GET”, “http://Quote.yahoo.com/d/quotes1.csv?s=”&

strSymbol &”&f=sl1d1t1c1ohgvj1pp2owern&e=.csv”, false objHTTP.Send

strResp = objHTTP.ResponseText set objHTTP = nothing

ArrLines = split(strResp,Chr(10)) For i = 0 to UBound(ArrLines)-1 Arrcontents = split(ArrLines(i),”,”) If Instr(Arrcontents(4),”+”) > 0 Then strColor = “#00CC00” strArrow = “<img src=arrowup.gif border=0>” ElseIf Instr(Arrcontents(4),”-”) > 0 Then strColor = “#FF6600” strArrow = “<img src=arrowdown.gif border=0>” Else strColor = “#0099FF” strArrow = “” End If ‘ check to see if yahoo returned any N/A results If Arrcontents(1) <> “N/A” Then strTemp = strTemp & “<font face=’Arial Narrow’

style=’font: 30px’ color=’” & strColor & “’>” & “ “ & TrimALL(Replace(Replace(Arrcontents(16), chr(34), “”),chr(13),””))

If Instr(Arrcontents(0),”^”) = 0 Then strTemp = strTemp & “ (“ & Replace(Arrcont

ents(0),chr(34),””) & “)” End If strTemp = strTemp & “ “ & strArrow & “ “ &

Arrcontents(1) strTemp = strTemp & “ “ & Arrcontents(4) strTemp = strTemp & “</font> ” End If

282 MULTIMEDIJA

Next strTemp = strTemp & “<font face=’Arial Narrow’

color=’#0099FF’ style=’font: 30px’>” & “ “ & “(stocks delayed by 20 minutes)</font>”

getQuotes = strTempEnd FunctionFunction TrimALL(TextIN) TrimALL = Trim(TextIN) While InStr(TrimALL, String(2, “ “)) > 0 TrimALL = Replace(TrimALL, String(2, “ “), “ “) WendEnd Function

</script>

Prikaz rezultata u Web stranici se vrši programskim kodom u jeziku JavaScript, koji je pogodan za prikaz podataka na klijentskom ra�unaru.

Osnovna funkcija za prikaz je getJStocks(), koja pokre�e prethodno opisanu funkciju getQuotes() i JavaScript funkciju StartScroll().


Nakon preuzimanja podataka pomo�u funkcije getQuotes(), celo vreme prikazivanja stranice tekst tikera se �uva u promenljivoj stocks.

Ostale funkcije iz ovog segmenta Javascript koda (moveImage, movement, setPosition, moveDiv i getPixelWidth) služe za gra� �ki prikaz ovih podataka, koji se sastoji u preciznom pozicioniranju u gra� �kom prozoru �ita�a i ostalim elementima gra� �kog prikaza teksta sa berzanskim podacima, kao što je upravljanje kontinualnim pomeranjem teksta tikera.

284 MULTIMEDIJA

Deo prikaza podataka de� nisan je i neproceduralnim sredstvima, u okviru HTML oznaka koje u telu stranice “scroller.htm”:

<BODY bottommargin=”0” leftmargin=”0” marginheight=”0” marginwidth=”0” rightmargin=”0” topmargin=”0” bgcolor=”#000000” style=”over� ow:hidden”>

<table cellspacing=”0” cellpadding=”0” width=”1000” height=”40” bgcolor=”#000000”>

<tr><td valign=”top” align=”center” nowrap > <div ID=”mi” STYLE=”background:transparent;position:

absolute;visibility:hidden”><Script>document.write(getJsStocks())</Script></div>

</td> </tr> </table> <div id=”hdiv” style=”position:absolute;visibility:hidden;”><Script>

document.write(getPixelWidth())</Script></div><br><script language=”javascript”>// get the width of the stocks stringendX = 0 - (image2.offsetLeft - image1.offsetLeft);</script>

</body>

</html>

Ovaj mali prikaz jednog (besplatnog) programskog rešenja ilustruje �estu praksu u Web tehnologijama da se za rešavanje nekog problema koriste veoma razli�ita izražajna sredstva i više programskih jezika istovremeno.

Ovakva rešenja nisu pogodna za održavanje, jer za razumevanje zahtevaju poznavanje više razli�itih tehnologija i programskih jezika.

285PRAVCI RAZVOJA MULTIMEDIJE

6. PRAVCI RAZVOJA MULTIMEDIJE

6.1 KOMUNIKACIJE

6.1.1 Virtuelni sagovornici

Vežba 6.1.1.1 Primeri virtuelnih sagovornika

��Proveriti na�in komunikacije (tekstom i glasom) virtuelnih sagovornika na lokacijama

http://alicebot.orghttp://www.daden.co.uk/chatbots.html

Virtuelni sagovornici (chat bots, chatterbots, talk bots) predstavljaju kompjuterske programe namenjene oboga�ivanju na�ina komunikacije na Web-u. Predstavljaju modernije verzije poznatog istraživa�kog programa za govornu komunikaciju ELIZA iz 1966. godine.

286 MULTIMEDIJA

Osim što gestovima i mimikom prate pokrete miša, omogu�avaju razmenu poruka, putem teksta i sintezom glasa.


Proveriti mogu�nosti ovih sistema u simulaciji ljudske govorne komunikacije.

6.2 WEB I VEŠTA�KA INTELIGENCIJAVešta�ka inteligencija je grana ra�unarskih nauka koja se bavi ra�unarskim modeliranjem razli�itih aspekata inteligentnog ponašanja �oveka, npr. u robotici, razumevanju govora i izradi sistema zasnovanih na znanju i siste-ma koji u�e.

Posebnu primenu u analizi i zaklju�ivanju o ponašanju i potrebama poseti-laca Web lokacija imaju sistemi mašinskog u�enja.

Inteligentni agenti su softverski programi koji pomažu ljudima obavljaju�i netrivijalne zadatke za koje je obi�no potrebna ljudska inteligencija pove-zane s upotrebom ra�unara i komunikacijom s okolinom.

Prema složenosti zadataka, razlikuju se klase agenata od jednostavnih re-� eksnih, preko agenata koji se zasnivaju na razli�itim modelima do agena-ta koji samostalno u�e.

288 MULTIMEDIJA

WEB AGENTI

Web agenti su programi namenjeni za istraživanje Web-a i autonomno reagovanje na doga�aje i akcije posetilaca Web lokacija u razli�ite svrhe, npr. agenti za e-kupovinu, li�ni pomo�nici, agenti za nadzor i inteligentnu analizu podataka.

Vežba 6.2.1.1 Primer Web agenta za bibliografske preporuke

��Demonstracija Web agenta za pomo� i preporuke oko izbora literature na lokaciji www.ics.uci.edu/~pazzani/Publications.

Osnovna namena ovog adaptivnog Web agenta je pomo� korisniku u navigaciji u oviru Web lokacije. Kada korisnik pregleda neki dokument (HTML ili PDF), adaptivni Web agent preporu�uje za �itanje druge sli�ne publikacije, zavisno od akcija i interesovanja posetioca Web lokacije.

Za zaklju�ivanje i sugestije za izbor publikacija koriste se reference iz same publikacije, frekvencije pristupa publikacijama i težinski vektori prema klju�nim re�ima.


Demonstracija adaptivnog Web agenta:

1. Izabrati Web adresu www.ics.uci.edu/~pazzani/Publications

290 MULTIMEDIJA

2. Izabrati prelistavanjem stranice neku publikaciju, npr. �lanak An Online Algorithm for Segmenting Time Series iz 2001. godine. Izabrani �lanak (PDF) se može pregledati u novom prozoru �ita�a


3. Agent odmah reaguje preporukom za publikaciju Relevance Feedback Retrieval of Time Series Data iz 1999. godine:

Sugestija se može prihvatiti, odbiti ili ignorisati.Iza teksta preporuke se vide uklju�ene opcije za rad agenta: davanje sugestija nakon izbora (Suggest after download) i dva metoda formiranja sugestije (Use Frequency agent i Machine Learning).

292 MULTIMEDIJA

4. Ako se preuzme (pregleda) ponu�eni �lanak, sledi slede�a sugestija:

Osim preporuke za �lanak iz 1998. godine, uklju�uje se još jedan metod formiranja sugestije (Use Cites Agent).

Ako direktno odbijemo ponu�enu sugestiju (No Thanks), agent �e slede�u sugestiju dati nakon izbora slede�e publikacije.


5. Izborom linka Con� gure Agents, vide se sve opcije rada agenta koje se mogu podešavati:

Razumevanje metoda koje koristi ovaj inteligentni agent izlazi iz okvira predmeta. Osnovne informacije se mogu na�i u publikacijama koje se mogu preuzeti sa ove lokacije, npr. u �lanku

Pazzani, M. and Billsus, D., “Adaptive Web Site Agents”, Journal of Agents and Multiagent systems, (2002)

Ako se instalira dodatni softver (www.3dplanet.com, odnosno www.sitepal.com), tekstualna preporuka �e biti animirana slikom i zvukom (text-to-speech konvertor za engleski jezik).

Funkcionisanje agenta je stvar izbora posetioca lokacije i može se po volji uklju�ivati i isklju�ivati.

294 MULTIMEDIJA

6.3 E-BUSINESS

6.3.1 E-Brokeri

Samostalni rad: primer Web aplikacije namenjene podršci berzanskom poslovanju

Upoznati se s primerom Web aplikacije namenjene podršci berzanskom poslovanju.

http://www.nyse.com/pdfs/BBSS.pdf

6.3.2 E-Trgovina

Samostalni rad: primer Web lokacije namenjene e-trgovini

Upoznati se sa namenom, na�inom funkcionisanja i osnovnim svojstvima Web lokacije namenjene e-trgovini.

http://www.mysimon.com

295LITERATURA

LITERATURA

[1] Vaughan Tay, Multimedia: Making It Work, Sixth Edition, Mc-Graw-Hill Technology Education, 2004.

[2] Vaughan Tay, Majstor za multimediju (prevod), Kompjuter bibli-oteka, �a�ak, 2002.

[3] Nielsen J., Designing Web Usability: The Practice of Simplicity, New Riders Press, 1999.

[4] Lynch P. J., Horton S., Web Style Guide: Basic Design Principles for Creating Web Sites, Second Edition, Yale University, 2002.

http://www.webstyleguide.com[5] Goodman D., Morrison M., JavaScript™ Bible, 5th Edition, Wi-

ley Publishing, Inc., Indianapolis, Indiana, 2004.[6] Rosenfeld A., Kak A., Digital Picture Processing, New York: Ac-

ademic Press, 1976 (str. 1-255), 1982[7] Underdahl B., Willet E., Internet Biblija (prevod), Mikroknjiga,

Beograd, 2004.[8] Gertler N., Potpun brzi vodi� za Microsoft Powerpoint 97, QUE,

2001 (prevod), Kompjuter biblioteka, �a�ak, 2000.[9] Pazzani M., Billsus, D., “Adaptive Web Site Agents”, Journal of

Agents and Multiagent systems, 2002.[10] Priru�nici i pomo� Microsoft Word[11] Knjige i priru�nici za Adobe Photoshop (postoje prevodi)[12] Priru�nici i pomo� za Audacity[13] Priru�nici i pomo� za RealAudio[14] Priru�nici i pomo� Microsoft Windows Media Player[15] Priru�nici i pomo� za Microsoft Windows Movie Maker[16] Priru�nici i pomo� za Macromedia Dreamweaver (postoje prevodi)[17] Priru�nici i pomo� za Microsoft FrontPage [18] Priru�nici i pomo� Microsoft PowerPoint[19] Priru�nici i pomo� za Microsoft NetMeeting[20] Izabrani �lanci, po poglavljima[21] Izabrane Web lokacije, po poglavljima

296 MULTIMEDIJA

DODACI

- AUDIO FORMATI

- VIDEO FORMATI

- STRUKTURA DVD MEDIJUMA

297DODACI

AUDIO FORMATI

NAJ�EŠ�I FORMATI ZAPISA DIGITALNOG ZVUKA

Format/su� ks Codec Sempliranje (sample rate)

Bita(bit depth)

Brzina(data rate)

AC3 Dolby (.ac3) AC3

varijabilno, tip. 44.1 ili 96KHz

varijabilno (tip. 24)

varijabilno, tip. 96-112 Kbps po kanalu

MPEG Audio Layer III (.mp3) MP3 varijabilno,

tip. 44.1KHz)varijabilno

(tip. 16)

varijabilno, 16-160 Kbps po kanalu

MS/Apple Inter-change (.wav, .aiff) nema

varijabilno, tip. 11/22 /44.1KHz

varijabilno (tip. 16) varijabilno

Ogg Vorbis (.ogg) Vorbis 8-48KHz 16 i više

varijabilno, tip. 16-128Kbps po kanalu

RealAudio (.ra)

Real Audio 8-48KHz 16 i više varijabilno

Windows Media Audio (.wma) WMA9 do 48KHz varijabilno

(tip. 16)varijabilno, tip. 64-192Kbps

Dodatne informacije:

- MP3 http://www.teamcombooks.com/mp3handbook/12.htm- Ogg Vorbis http://www.vorbis.com/- Real Networks http://www.real.com- http://www.microsoft.com/windows/windowsmedia/forpros/codecs/

audio.aspx- http://www.planetoftunes.com/digiaudio/daudio� les.html- http://www.digitalpreservation.gov/formats/fdd/sound_fdd.shtml

298 MULTIMEDIJA

VIDEO FORMATI

NAJ�EŠ�I FORMATI ZAPISA DIGITALNOG VIDEA

Format/su� ks Codec Primena

Sony Digital Betacam nema nakon kompresije

DV (NTSC/PAL) DV codec nakon konverzije u druge formate

Auidio-Video Interlaced (.avi) više Web � le-sharing

divX vrsta MPEG-4 CD/DVDROM, Web

Flash (.swf) MPEG-4 Flash player

MPEG-1 MPEG-1 CD ROM, Web

MPEG-2 MPEG-2 Sat. i kablovska TV, HDV, DVD video

MPEG-4 (.mpg) više varijanti, H.264 HD DVD, digitalna TV, mob. tel., itd.

QuickTime (.mov, .qt) više QuickTime Player

Real Video/Audio (.ram,.ra,.rm)

više varijanti, RealVideo Video streaming

Windows Media Video (.wmv) više Windows Media Player

Dodatne informacije:

- http://www.planetoftunes.com/dv/video� les.html- http://www.digitalpreservation.gov/formats/fdd/video_fdd.shtml

299DODACI

STRUKTURA DVD MEDIJUMA

Zapis na DVD disku se sastoji od mikroskopskih udubljenja na plasti�na površini, raspore�enih u obliku duge spiralne staze, od centra ka obodu diska. Razmak izme�u staza spirale je svega 740nm, a udubljenja (visine 120nm) imaju dimenzije 320x400nm.

Laserski zrak �ita�a osvetljava površinu diska, koja razli�ito re� ektuje svetlost na onim mestima gde se nalaze udubljenja (zapis 0) i osnovna površina diska (zapis 1).

Više slojeva se dobija upotrebom poluprovidnih re� eksnih površina.Kad bi se staza podataka samo jednog sloja DVD ispravila, imala bi dužinu 12km.

Sadržaj DVD diska

Kada se posmatra sadržaj DVD diska, na vrhu su 2 foldera: AUDIO_TS (Audio Title Set) i VIDEO_TS (Video Title Set).

Na folderu AUDIO_TS se nalaze fajlovi sa zvukom, dok se na folderu VIDEO_TS nalaze svi podaci za � lmove: fajlovi tipa .VOB (Video OBjects), .IFO (InFOrmation) i .BUP (BackUP). Folder AUDIO_TS se koristi za DVD-audio diskove, a na DVD-video diskovima je prazan.

Folder VIDEO_TS sadrži naslove (Title), odnosnoi � lmove ili staze DVD-videa, koji su predstavljeni sa po tri fajla (.VOB, .VFO i .BUP). Maksimalna veli�ina fajlova je 1GB, ali se mogu po potrebi nadovezivati.

1. VOB - Video OBjectsVideo objekti (VOB) su prezentacioni fajlovi, koji sadrže isprepletene menije, audio, video i titlove naslova koji �e se simultano prikazivati. Video je obi�no u formatu MPEG-2, a audio može biti AC-3, PCM, MPEG2 ili MPEG1.Maksimalni protok za zvuk je 448Kb/s, a za video 9.8Mb/s. Istovremeno se može koristiti do 9 audio tokova i do 32 titla, koji predstavljaju posebne �etvorobojne bitmapirane tokove.

2. IFO - InFOrmationIFO fajlovi sadrže navigacione instrukcije u otvorenom tekstu – npr. po�etke poglavlja, audia ili titlova, kao i parametre prikaza, kao što su aspekt ili izbor jezika.

300 MULTIMEDIJA

3. BUP - BackUP

BUP fajlovi predstavljaju sigurnosne kopije IFO fajlova.

Na DVD disku se može nalaziti i drugi materijal, kao što su npr. igre ili Web prezentacije.

us - multimedija - praktikum

Documents