Click here to load reader
Upload
svetlana-milanovic
View
92
Download
15
Embed Size (px)
DESCRIPTION
multimedija
Citation preview
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.
11OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
�� 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
13OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
- 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),:
15OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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):
17OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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:
19OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
21OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
23OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
25OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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:
1. Izabrati iz menija Tools opciju Options i karticu Save
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:
1. Izabrati iz menija Tools opciju Options i karticu Save
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:
5. Izabrati iz menija Tools opciju Options i karticu Save
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 .
27OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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:
29OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
31OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
33OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
35OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
37OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
39OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
41OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
43OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
45OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
47OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
- 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.
49OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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%.
51OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
53OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
55OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
57OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
59OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
61OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
63OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
65OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
67OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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:
69OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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%).
71OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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)
9. Sa�uvati sliku u formatu .GIF/.PNG (bez preplitanja)
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)
73OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
7. Sa�uvati sliku u formatu .GIF/.PNG (bez preplitanja)
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
75OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
Diffusion Dither Halftone Screen...
9. Sa�uvati sliku u formatu .GIF/.PNG (bez preplitanja)
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
77OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
79OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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)
1. Kreirati novu RGB kolor sliku 60x30 pixel-a, 72 pixel/inch, sa providnom pozadinom (transparent)
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.
81OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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:
83OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
85OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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
1. Kreirati novu RGB kolor sliku 468x60 pixel-a, 72 pixel/inch, sa providnom pozadinom (transparent)
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).
87OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
89OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
91OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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-
93OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
95OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
97OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
99OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
101OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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).
103OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
105OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
107OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
109OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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:
111OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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)
1. Kreiranje/izbor video sekvenci
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.
113OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
115OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
117OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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..
119OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
121OSNOVONE MULTIMEDIJSKE TEHNOLOGIJE
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.
125INTERNET I WEB TEHNOLOGIJE
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.
127INTERNET I WEB TEHNOLOGIJE
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/
129INTERNET I WEB TEHNOLOGIJE
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
131INTERNET I WEB TEHNOLOGIJE
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:
135OSNOVE WEB DIZAJNA
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.
137OSNOVE WEB DIZAJNA
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.
139OSNOVE WEB DIZAJNA
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.
141OSNOVE WEB DIZAJNA
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.
143OSNOVE WEB DIZAJNA
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
145OSNOVE WEB DIZAJNA
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.
147OSNOVE WEB DIZAJNA
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.
149OSNOVE WEB DIZAJNA
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.
151OSNOVE WEB DIZAJNA
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
153OSNOVE WEB DIZAJNA
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.
155OSNOVE WEB DIZAJNA
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:
157OSNOVE WEB DIZAJNA
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:
159OSNOVE WEB DIZAJNA
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:
161OSNOVE WEB DIZAJNA
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
163OSNOVE WEB DIZAJNA
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.
165OSNOVE WEB DIZAJNA
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:
167OSNOVE WEB DIZAJNA
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.
169OSNOVE WEB DIZAJNA
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:
171OSNOVE WEB DIZAJNA
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 ”<!--” i ”-->”, odnosno kao deo oznake za HTML komen-tar:
<SCRIPT LANGUAGE=”JavaScript”> <!-- HTML komentar skriva kod od starih �ita�a document.write(”<B>Tekst iz JavaScripta.</B>”) // Kraj komentara --></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.
173OSNOVE WEB DIZAJNA
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:
175OSNOVE WEB DIZAJNA
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”> <!-- alert(”Vaš Web �ita�\n podržava JavaScript.”); document.write(‘<P>Dobar dan</P>’); // --> </SCRIPT> </BODY></HTML>
177OSNOVE WEB DIZAJNA
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:
179OSNOVE WEB DIZAJNA
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.
181OSNOVE WEB DIZAJNA
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.
183OSNOVE WEB DIZAJNA
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>.
185OSNOVE WEB DIZAJNA
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”> <!-- function Zavrseno(){ window.alert(”JavaScript: zavrseno u�itavanje dokumenta!”); } // --> </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”> <!-- function Dovidjenja(){ window.alert(”Hvala na poseti.”); } // --> </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().
187OSNOVE WEB DIZAJNA
(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”> <!-- function Obavestenje(){ window.alert(”Aktiviran je onClick dogadjaj!”); } // --> </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.
189OSNOVE WEB DIZAJNA
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”> <!-- function Ufokusu(){ window.alert(”Polje ‘Prezime’ je u fokusu.”); } // --> </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.
191OSNOVE WEB DIZAJNA
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”> <!-- function Validacija(){ if (document.JMBG_form.JMBG.value.length == 13) { window.alert(”Ispravan unos mati�nog broja.”); return true; } else { window.alert(”Mati�ni broj ima ta�no 13 znakova.”); return false; } } // --> </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().
193OSNOVE WEB DIZAJNA
Primer upotrebe doga�aja OnMouseOver
<html><head> <title>Primer upotrebe doga�aja OnMouseOver</title> <script language=”JavaScript”> <!-- function Pomoc1(){ window.alert(”Sajt naseg univerziteta”); } function Pomoc2(){ window.alert(”Sajt naseg fakulteta”); } // --> </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.
195OSNOVE WEB DIZAJNA
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=...;}
197OSNOVE WEB DIZAJNA
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> <!-- { systime = new Date() hrs = systime.getHours() if (hrs < 7){tmsg = ”Ustali ste <B>stvarno</B> rano! ”} if (hrs > 6 && hrstime <12){tmsg = ”Dobro jutro! ”} if (hrs > 11 && hrstime <18){tmsg = ”Dobar dan! ”} if (hrs >17){tmsg = ”Dobro vece! ”} document.write(tmsg) } // --> </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”> <!-- function changecolor(code) { document.bgColor=code; } --> </script></head>
199OSNOVE WEB DIZAJNA
<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:
201OSNOVE WEB DIZAJNA
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:
203OSNOVE WEB DIZAJNA
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.
205OSNOVE WEB DIZAJNA
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.
207OSNOVE WEB DIZAJNA
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:
209OSNOVE WEB DIZAJNA
<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.
211OSNOVE WEB DIZAJNA
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:
213OSNOVE WEB DIZAJNA
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.
215OSNOVE WEB DIZAJNA
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)
217OSNOVE WEB DIZAJNA
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:
219OSNOVE WEB DIZAJNA
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”> <!-- function Validacija(){ if (document.form1.to.value.length > 0) && (document.form1.from.value.length > 0) { return true; } else { window.alert(”Unesite pošiljaoca(From) i primaoca (To)!”); return false; } } // --></script>
Izmenjeni kod stranice može sa izgleda kao na slici:
221OSNOVE WEB DIZAJNA
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”> <!-- document.write(document.lastmodi� ed);// --></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.
223OSNOVE WEB DIZAJNA
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”)
225OSNOVE WEB DIZAJNA
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.
227OSNOVE WEB DIZAJNA
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>
229OSNOVE WEB DIZAJNA
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.
231OSNOVE WEB DIZAJNA
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).
233OSNOVE WEB DIZAJNA
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”, ””);
// 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’ ”; 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”, ””);
// Selekcija baze na serveru mysql_select_db(”primer”, $link);
// 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.
235OSNOVE WEB DIZAJNA
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.
237OSNOVE WEB DIZAJNA
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:
239OSNOVE WEB DIZAJNA
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.
241OSNOVE WEB DIZAJNA
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):
245POSLOVNE PRIMENE MULTIMEDIJE
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.
247POSLOVNE PRIMENE MULTIMEDIJE
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)
249POSLOVNE PRIMENE MULTIMEDIJE
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).
251POSLOVNE PRIMENE MULTIMEDIJE
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).
253POSLOVNE PRIMENE MULTIMEDIJE
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
255POSLOVNE PRIMENE MULTIMEDIJE
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)
257POSLOVNE PRIMENE MULTIMEDIJE
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).
259POSLOVNE PRIMENE MULTIMEDIJE
Vežba 5.1.2.1: Kreiranje poslovne multimedijske CD prezentacije (MPEG/WMV) – Windows MovieMaker
1. Kreiranje/izbor video sekvenci
2. Kreiranje/izbor zvu�nih sekvenci
3. Sinhronizacija video i zvu�nih sekvenci
4. Dodavanje efekata
5. Izbor kodeka i snimanje � nalnog videa
1. Kreiranje/izbor video sekvenci
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
3. Sinhronizacija video i zvu�nih sekvenci
Povezivanje skevenci u jedinstvenu video prezentaciju se vrši prevla�enjem na video-traku u donjem delu ekrana.
261POSLOVNE PRIMENE MULTIMEDIJE
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.
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.
263POSLOVNE PRIMENE MULTIMEDIJE
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.
265POSLOVNE PRIMENE MULTIMEDIJE
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.
267POSLOVNE PRIMENE MULTIMEDIJE
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.
269POSLOVNE PRIMENE MULTIMEDIJE
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
271POSLOVNE PRIMENE MULTIMEDIJE
- 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).
273POSLOVNE PRIMENE MULTIMEDIJE
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.
275POSLOVNE PRIMENE MULTIMEDIJE
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)
277POSLOVNE PRIMENE MULTIMEDIJE
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).
279POSLOVNE PRIMENE MULTIMEDIJE
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-
281POSLOVNE PRIMENE MULTIMEDIJE
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().
283POSLOVNE PRIMENE MULTIMEDIJE
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.
287PRAVCI RAZVOJA MULTIMEDIJE
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.
289PRAVCI RAZVOJA MULTIMEDIJE
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
291PRAVCI RAZVOJA MULTIMEDIJE
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.
293PRAVCI RAZVOJA MULTIMEDIJE
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.