us multimedija

Multimedija

Autori:dr Ranko Popović, vanredni profesordr Dragan Cvetković, vanredni profesordr Dragan Marković, docent

Recenzenti:Prof. dr Slavko Pešić, Mašinski fakultet Univerziteta u BeograduProf. dr Dejan Živković, Univerzitet "Singidunum" u Beogradu

Izdavač:UNIVERZITET SINGIDUNUMDEPARTMAN ZA INFORMATIKU I RAČUNARSTVOBeograd, Bulevar Zorana Ðinđića 44

Za izdavača:Prof. dr Milovan Stanišić

Tehnička obrada:Dragan Cvetković

Dizajn korica:Dragan Cvetković

Godina izdanja:2010.

Tiraž:320 primeraka

Štampa:Mladost GrupLoznica

ISBN: 978-86-7912-278-0

Sadržaj

Predgovor ix

1 Šta je multimedija? 11.1. Definicije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2. CD-ROM, DVD i multimedijalni put . . . . . . . . . . . . . . . . . . . . 3

1.2.1. CD-ROM, DVD i multimedija . . . . . . . . . . . . . . . . . . . . 31.2.2. Multimedijalni put . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.3. Gde koristiti multimediju? . . . . . . . . . . . . . . . . . . . . . . . . . . 41.3.1. Multimedija u poslovanju . . . . . . . . . . . . . . . . . . . . . . 41.3.2. Multimedija u školama . . . . . . . . . . . . . . . . . . . . . . . 51.3.3. Multimedija u kućama . . . . . . . . . . . . . . . . . . . . . . . 71.3.4. Multimedija na javnim mestima . . . . . . . . . . . . . . . . . . . 81.3.5. Virtuelna realnost . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2 Tekst 112.1. Značenje i njegova snaga . . . . . . . . . . . . . . . . . . . . . . . . . . 122.2. O fontovima . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.2.1. Tipografski merni sistem . . . . . . . . . . . . . . . . . . . . . . 142.2.2. Serif i Sans Serif . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.3. Upotreba teksta u multimediji . . . . . . . . . . . . . . . . . . . . . . . 202.3.1. Dizajniranje pomoću teksta . . . . . . . . . . . . . . . . . . . . . 202.3.2. Izbor tekstualnih fontova . . . . . . . . . . . . . . . . . . . . . . 212.3.3. Meniji za navigaciju . . . . . . . . . . . . . . . . . . . . . . . . . 222.3.4. Dugmad ili tasteri za interakciju . . . . . . . . . . . . . . . . . . 232.3.5. Polja za čitanje . . . . . . . . . . . . . . . . . . . . . . . . . . . 242.3.6. HTML dokumenti . . . . . . . . . . . . . . . . . . . . . . . . . . 252.3.7. Simboli i ikonice . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.3.8. Animirani tekst . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

2.4. Računari i tekst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292.4.1. Kako nastaje font? . . . . . . . . . . . . . . . . . . . . . . . . . 292.4.2. PostScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292.4.3. Konturni fontovi . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.4.4. Bezierove krive . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.4.5. Hint mehanizmi . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

ii Multimedija

2.4.6. Digitalne slovolivnice . . . . . . . . . . . . . . . . . . . . . . . . 332.5. Kodni sistemi za prikazivanje znakova . . . . . . . . . . . . . . . . . . . 35

2.5.1. Kodni sistem ASCII (ISO 646) . . . . . . . . . . . . . . . . . . . 362.5.2. ISO Latin 1 (ISO 8859-1) . . . . . . . . . . . . . . . . . . . . . . 372.5.3. WINDOWS set znakova . . . . . . . . . . . . . . . . . . . . . . . 382.5.4. ISO 8859 porodica . . . . . . . . . . . . . . . . . . . . . . . . . 382.5.5. Unicode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

2.6. Jezici u svetu računara . . . . . . . . . . . . . . . . . . . . . . . . . . . 412.7. Uređivanje teksta - pojmovi, pravila, saveti . . . . . . . . . . . . . . . . . 422.8. Alati za dizajniranje i uređenje fontova . . . . . . . . . . . . . . . . . . . 44

2.8.1. Fontographer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452.9. Hipermedija i hipertekst . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

2.9.1. Prednosti hiperteksta . . . . . . . . . . . . . . . . . . . . . . . . 462.9.2. Upotreba hiperteksta . . . . . . . . . . . . . . . . . . . . . . . . 472.9.3. Pretraga po rečima . . . . . . . . . . . . . . . . . . . . . . . . . 48

3 Zvuk 493.1. Prednosti zvuka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493.2. Multimedijalni sistemski zvuci . . . . . . . . . . . . . . . . . . . . . . . . 503.3. Digitalni audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

3.3.1. Priprema digitalnih audio datoteka . . . . . . . . . . . . . . . . . 533.4. Kreiranje MIDI audia . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563.5. Formati za audio datoteke . . . . . . . . . . . . . . . . . . . . . . . . . . 57

3.5.1. Vrste audio formata . . . . . . . . . . . . . . . . . . . . . . . . . 583.5.2. Način rada pri komprimovanju zvučnih podataka . . . . . . . . . 60

3.6. MIDI i digitalni audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613.7. Zvuk za WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623.8. Dodavanje zvuka u multimedijalni projekat . . . . . . . . . . . . . . . . . 63

4 Slike 654.1. Kreiranje statičnih (nepokretnih) slika . . . . . . . . . . . . . . . . . . . 65

4.1.1. Bitmape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 664.1.2. Clip Art-ovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684.1.3. Softver za bitmape . . . . . . . . . . . . . . . . . . . . . . . . . 694.1.4. "Hvatanje" i editovanje slika . . . . . . . . . . . . . . . . . . . . 714.1.5. Skeniranje slika . . . . . . . . . . . . . . . . . . . . . . . . . . . 724.1.6. Vektorska grafika . . . . . . . . . . . . . . . . . . . . . . . . . . 734.1.7. 3D crteži i renderovanje . . . . . . . . . . . . . . . . . . . . . . . 74

4.2. Boje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 774.2.1. Razumevanje boja . . . . . . . . . . . . . . . . . . . . . . . . . . 784.2.2. RGB – osnovne aditivne boje . . . . . . . . . . . . . . . . . . . . 804.2.3. HSV, HSI i HSL modeli boja . . . . . . . . . . . . . . . . . . . . 814.2.4. CMY, CMYK i PANTONE modeli boja . . . . . . . . . . . . . . 834.2.5. Još ponešto o bojama . . . . . . . . . . . . . . . . . . . . . . . . 874.2.6. "Matematičke operacije" sa bojama . . . . . . . . . . . . . . . . 87

Sadržaj i predgovor iii

4.3. Grafički formati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904.3.1. Konfiguracija datoteke slike . . . . . . . . . . . . . . . . . . . . . 91

4.4. Komprimovanje (sabijanje) podataka slike . . . . . . . . . . . . . . . . . 914.4.1. Često korišćeni Windows grafički formati . . . . . . . . . . . . . . 934.4.2. Macintosh grafički formati . . . . . . . . . . . . . . . . . . . . . 974.4.3. Još neki grafički formati . . . . . . . . . . . . . . . . . . . . . . . 97

5 Animacija 995.1. Istorija animacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 995.2. Principi animacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1025.3. Tipovi animacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1025.4. Računarska animacija . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1035.5. Vrste računarske animacije . . . . . . . . . . . . . . . . . . . . . . . . . 1055.6. Budućnost računarske animacije . . . . . . . . . . . . . . . . . . . . . . 108

6 Video 1096.1. Kako video radi? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1106.2. Standardi za analogno prikazivanje . . . . . . . . . . . . . . . . . . . . . 111

6.2.1. NTSC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1126.2.2. PAL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1126.2.3. SECAM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1126.2.4. HDTV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

6.3. Standardi za digitalno prikazivanje . . . . . . . . . . . . . . . . . . . . . 1136.3.1. Dodatni prolazi i bezbedna oblast za naslove . . . . . . . . . . . 1146.3.2. Boje u videu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1146.3.3. Efekti preplitanja . . . . . . . . . . . . . . . . . . . . . . . . . . 1146.3.4. Kalibracija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1156.3.5. Tekst i naslov za televiziju . . . . . . . . . . . . . . . . . . . . . 115

6.4. Digitalni video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1166.4.1. Analogno i digitalno . . . . . . . . . . . . . . . . . . . . . . . . . 1166.4.2. Digitalna obrada signala . . . . . . . . . . . . . . . . . . . . . . . 1186.4.3. Prednosti DSP-a . . . . . . . . . . . . . . . . . . . . . . . . . . 120

6.5. Digitalni video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1216.5.1. Merenje vremena u video klipu . . . . . . . . . . . . . . . . . . . 1216.5.2. Kako vremenska baza i brzina slika utiču jedna na drugu? . . . . . 1226.5.3. Merenje vremena korišćenjem vremenskog koda . . . . . . . . . . 1246.5.4. Televizijska slika . . . . . . . . . . . . . . . . . . . . . . . . . . . 1246.5.5. Merenje veličine slike i rezolucije . . . . . . . . . . . . . . . . . . 1266.5.6. Proporcija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1266.5.7. Nekvadratni pikseli . . . . . . . . . . . . . . . . . . . . . . . . . 1266.5.8. Veličina slike . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1276.5.9. Preskeniranje i bezbedne zone . . . . . . . . . . . . . . . . . . . 1286.5.10. Dubina bita . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1296.5.11. Razumevanje komprimovanja video podataka . . . . . . . . . . . 1306.5.12. Izbor metoda za kompresiju video zapisa . . . . . . . . . . . . . . 130

iv Multimedija

6.5.13. Prostorno komprimovanje . . . . . . . . . . . . . . . . . . . . . . 1316.5.14. Temporalno komprimovanje . . . . . . . . . . . . . . . . . . . . . 1316.5.15. Komprimovanje sa očuvanjem kvaliteta . . . . . . . . . . . . . . 1326.5.16. Komprimovanje sa narušavanjem kvaliteta . . . . . . . . . . . . . 1336.5.17. Asimetrična i simetrična kompresija . . . . . . . . . . . . . . . . 1336.5.18. DV komprimovanje . . . . . . . . . . . . . . . . . . . . . . . . . 1336.5.19. Digitalno presnimavanje video zapisa . . . . . . . . . . . . . . . . 1346.5.20. Digitalizacija DV-a . . . . . . . . . . . . . . . . . . . . . . . . . 1356.5.21. Digitalizacija analognog video klipa . . . . . . . . . . . . . . . . . 1356.5.22. Razumevanje digitalnog zvuka . . . . . . . . . . . . . . . . . . . 1356.5.23. Sinhronizacija zvuka i video klipa . . . . . . . . . . . . . . . . . . 136

6.6. Kompresija audio/video podataka i optički medijumi . . . . . . . . . . . 1366.6.1. Zašto je digitalni video komprimovan? . . . . . . . . . . . . . . . 1376.6.2. Kompresija bez gubitaka . . . . . . . . . . . . . . . . . . . . . . 1376.6.3. Kompresija sa gubitkom . . . . . . . . . . . . . . . . . . . . . . . 1386.6.4. Psihoakustička audio kompresija . . . . . . . . . . . . . . . . . . 1386.6.5. Psihovizuelna video kompresija . . . . . . . . . . . . . . . . . . . 1386.6.6. Kako je nastao MPEG? . . . . . . . . . . . . . . . . . . . . . . . 1386.6.7. Osnove MPEG-4 standarda . . . . . . . . . . . . . . . . . . . . . 1396.6.8. MPEG-4 Video . . . . . . . . . . . . . . . . . . . . . . . . . . . 1396.6.9. MP4 format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1406.6.10. MPEG-4 audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1406.6.11. MPEG-7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1416.6.12. Neki tipovi digitalnih audio datoteka . . . . . . . . . . . . . . . . 1416.6.13. Neki tipovi digitalnih video datoteka . . . . . . . . . . . . . . . . 142

6.7. Snimanje i editovanje (uređenje) videa . . . . . . . . . . . . . . . . . . . 1436.7.1. Planiranje ili scenario . . . . . . . . . . . . . . . . . . . . . . . . 1436.7.2. Platforma za snimanje . . . . . . . . . . . . . . . . . . . . . . . 1436.7.3. Osvetljenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1446.7.4. Hroma ključevi (Chroma Keys) . . . . . . . . . . . . . . . . . . . 144

6.8. Optimizovanje video fajlova za CD-ROM . . . . . . . . . . . . . . . . . . 1456.9. Virtualna realnost (stvarnost) . . . . . . . . . . . . . . . . . . . . . . . . 146

6.9.1. Definicija i princip virtalne realnosti . . . . . . . . . . . . . . . . 1466.9.2. Uređaji za virtaulnu realnost . . . . . . . . . . . . . . . . . . . . 1486.9.3. Primene virtaulne realnosti . . . . . . . . . . . . . . . . . . . . . 1546.9.4. Proširena realnost (stvarnost) . . . . . . . . . . . . . . . . . . . . 155

7 Grafički editori 1577.1. Adobe Dreamweaver CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . 157

7.1.1. Pokretanje Dreamweaver-a . . . . . . . . . . . . . . . . . . . . . 1597.1.2. Komponente interfejsa . . . . . . . . . . . . . . . . . . . . . . . 1597.1.3. Definisanje novog sajta . . . . . . . . . . . . . . . . . . . . . . . 1667.1.4. Upravljanje sajtovima . . . . . . . . . . . . . . . . . . . . . . . . 1707.1.5. Postavljanje karakteristika novog dokumenta . . . . . . . . . . . . 1717.1.6. Uvoženje Microsoft Word dokumenata . . . . . . . . . . . . . . . 178

Sadržaj i predgovor v

7.1.7. Postavljanje slika na Web stranicu, izmena svojstava slike iPhotoshop integracija . . . . . . . . . . . . . . . . . . . . . . . . 180

7.1.8. Ubacivanje multimedijalnih fajlova . . . . . . . . . . . . . . . . . 184

8 XML, HTML, XHTML i DHTML 1878.1. XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

8.1.1. Šta je XML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1898.1.2. Šta XML nije? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1898.1.3. Namena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1908.1.4. Standard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1918.1.5. Kako radi XML? . . . . . . . . . . . . . . . . . . . . . . . . . . . 1928.1.6. Imenovanje elemenata . . . . . . . . . . . . . . . . . . . . . . . . 1958.1.7. Sintaksa XML-a . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

8.2. HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1998.2.1. Šta je to HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . 2008.2.2. Istorijat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2018.2.3. Sintaksa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2018.2.4. Elementi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2028.2.5. Atributi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2028.2.6. Entiteti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2038.2.7. Karakteri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2048.2.8. Struktura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2058.2.9. HTML element . . . . . . . . . . . . . . . . . . . . . . . . . . . 2058.2.10. HEAD element . . . . . . . . . . . . . . . . . . . . . . . . . . . 2068.2.11. BASE element . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2068.2.12. LINK element . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2078.2.13. STYLE element . . . . . . . . . . . . . . . . . . . . . . . . . . . 2078.2.14. SCRIPT element . . . . . . . . . . . . . . . . . . . . . . . . . . 2088.2.15. BODY element . . . . . . . . . . . . . . . . . . . . . . . . . . . 2098.2.16. Komentar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2108.2.17. Meta tagovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2108.2.18. Atributi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2138.2.19. Događaji u Web čitaču . . . . . . . . . . . . . . . . . . . . . . . 2168.2.20. Hx elementi - naslovi . . . . . . . . . . . . . . . . . . . . . . . . 2168.2.21. P element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2178.2.22. BR element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2178.2.23. STRONG, EM, CITE, DFN, VAR, B, I & U element . . . . . . . 2188.2.24. FONT element . . . . . . . . . . . . . . . . . . . . . . . . . . . 2198.2.25. Center element . . . . . . . . . . . . . . . . . . . . . . . . . . . 2198.2.26. BLOCKQUOTE element . . . . . . . . . . . . . . . . . . . . . . 2198.2.27. HR element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2208.2.28. Povezivanje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2208.2.29. A element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2218.2.30. Tabele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2228.2.31. Obrasci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

vi Multimedija

8.2.32. Element FORM . . . . . . . . . . . . . . . . . . . . . . . . . . . 2248.3. XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

8.3.1. Mane HTML-a . . . . . . . . . . . . . . . . . . . . . . . . . . . 2328.3.2. Razlike . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2328.3.3. Osnove XHTML dokumenta . . . . . . . . . . . . . . . . . . . . 2358.3.4. Deklaracija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2368.3.5. Validacija XHTML sa DTD . . . . . . . . . . . . . . . . . . . . . 237

8.4. Dinamički HTML – DHTML . . . . . . . . . . . . . . . . . . . . . . . . 2378.4.1. Statičke i dinamičke stranice . . . . . . . . . . . . . . . . . . . . 2388.4.2. DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

9 Uvod u CSS 2419.1. Dodavanje CSS u HTML stranu . . . . . . . . . . . . . . . . . . . . . . 2429.2. CSS "kutije" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2449.3. CSS pozicioniranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2489.4. Identifikatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2519.5. Linkovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2539.6. CSS dokument . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2549.7. Osvrt na klase, nasleđivanje, kaskade, ... . . . . . . . . . . . . . . . . . . 256

10 Uvod u JavaScript 25910.1. Programiranje u JavaScript-u . . . . . . . . . . . . . . . . . . . . . . . . 261

10.1.1. Brojevi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26510.2. Operatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

10.2.1. Aritmetički operatori . . . . . . . . . . . . . . . . . . . . . . . . 26610.2.2. Logički operatori . . . . . . . . . . . . . . . . . . . . . . . . . . 26610.2.3. Operatori poređenja . . . . . . . . . . . . . . . . . . . . . . . . . 26710.2.4. String operatori . . . . . . . . . . . . . . . . . . . . . . . . . . . 26710.2.5. Operatori za manipulaciju bitovima . . . . . . . . . . . . . . . . . 26710.2.6. Operatori dodele . . . . . . . . . . . . . . . . . . . . . . . . . . . 26810.2.7. Ternarni operator uslovnog izraza . . . . . . . . . . . . . . . . . . 26910.2.8. Specijalni operatori . . . . . . . . . . . . . . . . . . . . . . . . . 269

10.3. Kontrolne strukture i petlje . . . . . . . . . . . . . . . . . . . . . . . . . 26910.3.1. Naredbe odlučivanja . . . . . . . . . . . . . . . . . . . . . . . . . 27010.3.2. Programske petlje . . . . . . . . . . . . . . . . . . . . . . . . . . 27110.3.3. Nizovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27310.3.4. Funkcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

10.4. Objekti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27610.4.1. Objekat window . . . . . . . . . . . . . . . . . . . . . . . . . . . 27810.4.2. Iskrsavajući prozori . . . . . . . . . . . . . . . . . . . . . . . . . 28010.4.3. Objekat document . . . . . . . . . . . . . . . . . . . . . . . . . . 28310.4.4. Objekat Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28410.4.5. Objekat Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

10.5. Događaji u JavaScriptu . . . . . . . . . . . . . . . . . . . . . . . . . . . 28610.5.1. Šta su to događaji? . . . . . . . . . . . . . . . . . . . . . . . . . 286

Sadržaj i predgovor vii

10.6. Animiranje objekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28710.6.1. Funkcija fade() . . . . . . . . . . . . . . . . . . . . . . . . . . . 29010.6.2. Funkcija fadeCallback() . . . . . . . . . . . . . . . . . . . . . 29010.6.3. Funkcija getOpacity() . . . . . . . . . . . . . . . . . . . . . . . 29110.6.4. Funkcija setOpacity() . . . . . . . . . . . . . . . . . . . . . . . 29110.6.5. Dilema – setTimeout() ili setInterval()? . . . . . . . . . . . 292

10.7. Provera matičnog broja građanina pomoću JavaScripta . . . . . . . . . . 29510.8. Kolačići . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29710.9. Namenske JavaScript biblioteke . . . . . . . . . . . . . . . . . . . . . . . 299

10.9.1. DOM pristup i manipulacija . . . . . . . . . . . . . . . . . . . . . 30010.9.2. Olakšavanje i ubrzavanje programiranja . . . . . . . . . . . . . . 30010.9.3. Proširivanje funkcionalnosti pomoću gotovih komponenti . . . . . 30110.9.4. Izbor JavaScript biblioteke . . . . . . . . . . . . . . . . . . . . . 301

10.10.Fiksni i "kolapsabilni" paneli . . . . . . . . . . . . . . . . . . . . . . . . 30110.10.1. Dizajn fiksnog panela . . . . . . . . . . . . . . . . . . . . . . . . 30110.10.2. Dizajn "kolapsabilnog" panela . . . . . . . . . . . . . . . . . . . 30510.10.3. Osnovna JavaScript DOM svojstva . . . . . . . . . . . . . . . . 30810.10.4. Dizajn animiranog kolapsabilnog panela . . . . . . . . . . . . . . 30910.10.5. Reverzni inženjering . . . . . . . . . . . . . . . . . . . . . . . . 312

11 Multimedijalno umrežavanje 31311.1. Multimedijalne mrežne aplikacije . . . . . . . . . . . . . . . . . . . . . . 313

11.1.1. Streaming uskladištenog audio i video sadržaja . . . . . . . . . . 31311.1.2. Streaming audio i video signala – zapisa "uživo" . . . . . . . . . 31411.1.3. Interaktivni audio i video u realnom vremenu . . . . . . . . . . . 31411.1.4. Prenos glasa preko Interneta (Voice over IP – VoIP) . . . . . . . 31411.1.5. Problemi sa multimedijom na Internetu . . . . . . . . . . . . . . 314

11.2. Streaming uskladištene audio i video aplikacije . . . . . . . . . . . . . . . 31511.2.1. Tipična arhitektura za striming . . . . . . . . . . . . . . . . . . . 31611.2.2. Protokol za striming signala u realnom vremenu . . . . . . . . . . 318

11.3. Multimedija u realnom vremenu:Proučavanje telefoniranja preko Interneta . . . . . . . . . . . . . . . . . 319

11.4. Protokoli za interaktivne aplikacije koje rade u realnom vremenu . . . . . 32011.4.1. Real Time Protocol – RTP . . . . . . . . . . . . . . . . . . . . . 32111.4.2. Real Time Control Protocol – RTCP . . . . . . . . . . . . . . . . 32111.4.3. Session Initiation Protocol – SIP . . . . . . . . . . . . . . . . . . 322

11.5. Računarske mreže sa distribuiranim sadržajima za isporuku . . . . . . . . 32211.6. Distribuirani multimedijalni sistemi . . . . . . . . . . . . . . . . . . . . . 32311.7. Iznad najboljeg pokušaja . . . . . . . . . . . . . . . . . . . . . . . . . . 325

12 Internet i Web servisi 32712.1. Umrežavanje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

12.1.1. Domeni najvišeg nivoa . . . . . . . . . . . . . . . . . . . . . . . 32712.1.2. IP adrese i paketi podataka . . . . . . . . . . . . . . . . . . . . . 32812.1.3. Povezivanje na Internet . . . . . . . . . . . . . . . . . . . . . . . 328

viii Multimedija

12.1.4. Mala širina propusnog opsega . . . . . . . . . . . . . . . . . . . . 32812.2. Internet servisi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329

12.2.1. MIME tipovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33012.3. Mrežne aplikacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

12.3.1. World Wide Web i HTTP . . . . . . . . . . . . . . . . . . . . . . 33112.3.2. Protokol za transfer fajlova (File Transfer Protocol – FTP) . . . . 332

12.4. World Wide Web i HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 33412.4.1. Dinamičke Web stranice i XML . . . . . . . . . . . . . . . . . . . 334

12.5. Web servisi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33512.6. Mrežne multimedijalne aplikacije . . . . . . . . . . . . . . . . . . . . . . 335

13 PHP 33713.1. Interakcija sa server stranom . . . . . . . . . . . . . . . . . . . . . . . . 33713.2. Sintaksne karakteristike . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

13.2.1. Promenljive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33913.2.2. Osnovni tipovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33913.2.3. Strings (nizovi karaktera - znakova) . . . . . . . . . . . . . . . . 34013.2.4. Operatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34013.2.5. Pre-definisane funkcije . . . . . . . . . . . . . . . . . . . . . . . 34013.2.6. Konverzije tipova . . . . . . . . . . . . . . . . . . . . . . . . . . 34013.2.7. Izlaz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34113.2.8. Kontrolne naredbe . . . . . . . . . . . . . . . . . . . . . . . . . . 34113.2.9. Nizovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34113.2.10. Kreiranje nizova . . . . . . . . . . . . . . . . . . . . . . . . . . 34113.2.11. Pristupanje elementima niza . . . . . . . . . . . . . . . . . . . . 34213.2.12. Rad sa nizovima . . . . . . . . . . . . . . . . . . . . . . . . . . 34213.2.13. Sortiranje niza . . . . . . . . . . . . . . . . . . . . . . . . . . . 34213.2.14. Funkcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34313.2.15. Parametri funkcije . . . . . . . . . . . . . . . . . . . . . . . . . 34313.2.16. Doseg i trajanje promenljivih . . . . . . . . . . . . . . . . . . . . 34313.2.17. Rad sa formama . . . . . . . . . . . . . . . . . . . . . . . . . . 34313.2.18. Fajlovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34413.2.19. Kolačići (cookies) . . . . . . . . . . . . . . . . . . . . . . . . . . 34513.2.20. Praćenje sesije . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

13.3. Arhitekture za pristup bazama podataka . . . . . . . . . . . . . . . . . . 34613.3.1. Arhitektura za pristup bazi podataka . . . . . . . . . . . . . . . . 34713.3.2. MySQL sistem baze podataka . . . . . . . . . . . . . . . . . . . 34713.3.3. Pristup bazi podataka sa PHP/MySQL . . . . . . . . . . . . . . 347

Literatura 349Sajtovi sa Interneta u vezi sa materijom . . . . . . . . . . . . . . . . . . 352

Predgovor

Multimedija je zajednički naziv za medije koji kombinuju više tipova pojedinačnih medija,da bi se stvorila jedna celina. U običnom govoru multimedija najčešće znači interaktivniračunarski projekat u kome se koristi film, tekst i zvuk, kao što su, na primer, interaktivneenciklopedije, obrazovni kompakt diskovi ili DVD-i.

Proteklih godina, multimedija se sve više koristi u školstvu. Mogućnost ujedinjenja višekomponenti (5 stubova multimedije – audio i video zapis, tekst, grafika i animacija) poma-že prosvetnim radnicima da prenesu učenicima i studentima znanje kroz jedinstven način.Učenici i studenti bolje i brže uče koristeći ove metode, a nastavni materijal je zanimljivijii može biti zabavan.

Ova knjiga spada u grupu stručnih dela iz oblasti računarskih i inženjerskih nauka, kojapokriva značajno područje, koje se izučava na nivou dodiplomskih i poslediplomskih studijadanas i u svetu i kod nas. Predviđena je da bude osnovni udžbenik iz predmeta Multi-medija koji se izučava unutar studijskih programa Informatika i računarstvo i Poslovnaekonomija (izborna opcija Brendiranje i dizajn) na Univerzitetu "Singidunum" u Beogradu.Ova knjiga može da se koristi i na ostalim visokoškolskim ustanovama za predmete kojiimaju sličan sadržaj.

Tokom pisanja ove knjige ideja je bila da se materija izloži u što popularnijem stilu dabi bila dostupna i razumljiva i studentima sa manjim obimom predznanja iz ove oblasti.Knjiga je namenjena širem spektru potreba.

Knjiga se sastoji iz trinaest poglavlja. Prvi deo knjige, od prvog do šestog poglavlja,predstavlja multimediju kao izatkanu kombinaciju digitalno manipulisanog teksta,grafike, zvuka, animacije i video elemenata. Danas tekst i sposobnost čitanja predstav-ljaju "prolaz" ka znanju i, eventualno, moći. Čitanje i pisanje su očekivane i neophodneveštine u većini modernih društava. Kao što je bio slučaj kroz istoriju, tekst i dalje predajeinformacije mogu imati moćna značenja. Drugo poglavlje se bavi ovom problematikom.Zvuk je verovatno najuzbudljiviji deo multimedije. To je univerzalan govor na bilo komjeziku. Pruža zadovoljstvo slušanja muzike, a može i da iznenadi senzacionalnim speci-jalnim efektima ili da utiče na raspoloženje iz "drugog plana". Način na koji se koristizvuk može da označi razliku između obične i profesionalne, spektakularne multimedi-jalne prezentacije. Treće poglavlje je posvećeno ovoj problematici. Ono što se vidi naekranu multimedijalnog računara u bilo kom trenutku je mešavina teksta, simbola, fo-tografskih bitmapa, vektorske grafike, trodimenzionalnih prikaza, različitih dugmadi kojutreba kliknuti i prozora pokretnog videa. Neki delovi ove slike se mogu pomerati ill kretati

x Multimedija

tako da ekran nikad ne izgleda mirno i izaziva oči. Računarski ekran je akcija – sadržimnogo više od poruke; to je, takođe, osnovna veza gledaoca sa svim sadržajima nekogprojekta. U četvrtom poglavlju se nalazi priča "vezana" za slike. Animacija je postupakstvaranja iluzije kretanja crtežima, modelima ili beživotnim stvarima. To je optička iluzijakretanja zahvaljujući fenomenu poznatom kao perzistencija vida i može se izvesti na višenačina. Pokretni video je elemenat multimedije koji može čvrsto da drži interes studentaza učenje pomoću računara. Digitalni video najviše i angažuje od svih multimedijalnihmogućnosti; to je vrlo moćno sredstvo da se korisnici računara približe realnom svetu.Peto i šesto poglavlje se bave ovom vrstom problematike.

Web tehnologija je doživela značajni napredak od svog nastanka do danas. Klasične (sta-tične) Web stranice pisane u HTML-u danas polako nestaju, a nove tehnologije kao štosu DHTML, PHP, Java, JavaScript, ASP sve se više koriste i složenost izrade Web stranicasve je veća. U sedmom poglavlju se govori o grafičkim editorima i odgovarajućim pro-gramskim paketima, kao i primenom njihovog sadržaja. U osmom poglavlju bilo je rečio jezicima XML, HTML, XHTML i DHTML, gde će se obratiti pažnja na svaki od njih. Reč jeglavnim tehnologijama koje se koriste u razvoju jednostavnih, složenih, kao i dinamičkihWeb sajtova. U devetom poglavlju obrađen je CSS, koji predstavlja specifikaciju koja služiza definisanje stilova koji određuju izgled nekog HTML elemenata (fontovi, boje, pozicija,dimenzija...). JavaScript je programski jezik koji se interpretira, sa objektno orijenti-sanim mogućnostima. Po sintaksi, jezgro jezika JavaScript slično je jezicima C, C++ iJava, i ovoj problematici je posvećeno deseto poglavlje.

U jedanaestom poglavlju definisani su principi multimedijalnog umrežavanja i mrežniservisi. Klasifikovane su multimedijalne aplikacije i dati su mehanizmi za obezbeđivanjekvaliteta servisa, odnosno specifični protokoli za servis najboljeg pokušaja. Prikazani suodgovarajući protokoli i arhitekture. Dvanaesto poglavlje se bavi, u kratkim crtama, In-ternetom i Web servisima. PHP predstavlja jezik za pisanje skriptova koji rade na serveru.Projektovan je za upotrebu na Web-u. Trinaesto poglavlje se bavi ovim jezikom, i to samou glavnim crtama.

Sledi jedna napomena. Deo knjige, od 1. do 6. poglavlja napisao je Dragan Cvetković,deo od 7. do 10. poglavlja napisao je Dragan Marković, a deo od 11. do 13. poglavljanapisao je Ranko Popović.

Na kraju je prikazan spisak literature, s tim što treba napomenuti da je korišćena literaturaprikazana na krajnje proizvoljan način.

dr Slavko Pešić, dipl. inž., redovni profesor Mašinskog fakulteta Univerziteta u Beogradui dr Dejan Živković, dipl. mat., vanredni profesor Univerziteta "Singidunum" u Beogradu,pomogli su nam korisnim primedbama i sugestijama, koje su uputili tokom pisanja oveknjige, i mi koristimo ovu priliku da im se još jednom zahvalimo.

Beograd, jul 2010. godine Autori

Glava 1

Šta je multimedija?

Multimedija predstavlja pojavljivanje mačijih očiju na tamnom ekranu. To je crvena ružakoji se rastvara u lice devojčice kada pritisne na taster Valentine’s Day. To je mali videoprozor postavljen na mapu Indije, koji prikazuje starca koji ide prašnjavim putem. To jekatalog sjajnih vozila sa vodičem koji će korisniku pomoći da kupi jedan. To je video urealnom vremenu konferencije sa kolegama u Parizu, Londonu, Hong Kongu na računaruu kancelariji. Kod kuće, to su lekcije iz algebre, geometrije ili geografije za učenje nadaljinu. U arkadnim igricama, to su deca sa "razrogačenim" očima koja lete u borbenimavionima u svetu virtuelne realnosti.

Slika 1.1. Simbolično prikazani multimedijalni elementi

Multimedija je bilo koja kombinacija teksta, grafike, zvuka, animacije i videa dostavljena naračunar korisnika ili na neki drugi elektronski način. To su izuzetno bogate prezentacije.Kada se zajedno povežu senzualni multimedijalni elementi – blistave slike i animacije,privlačan zvuk, neodoljivi video klipovi, kao i tekstualne informacije (slika 1.1), tada se

2 Multimedija

mogu pobuditi misli i centri akcije unutar svesti ljudi. Kada im se omogući interaktivnakontrola procesa, korisnici mogu biti očarani. Multimedija uzbuđuje oči, uši, ruke, i što jenajvažnije, glavu.

1.1. Definicije

Multimedija je, kako je gore opisano, izatkana kombinacija digitalno manipulisanogteksta, grafike, zvuka, animacije i video elemenata. Kada se dozvoli krajnjem korisniku(poznatom kao gledaocu multimedijalnog projekta) da kontroliše šta se od elemenata ikada dostavlja, to je interaktivna multimedija. Kada je obezbeđena struktura povezanih(linkovanih) elemenata kroz koje korisnik može da se kreće, interaktivna multimedijapostaje hipermedija.

Iako je definicija multimedije jednostavna, kreiranje multimedijalnog dela može biti kom-plikovano. Ne samo da mora da se razume kako svaki multimedijalni element stoji iradi, nego treba i znati kako multimedijalni računar koristi alate i tehnologije da bi ihukomponovao zajedno. Ljudi koji komponuju multimedijalne sadržaje u smislene celine sumultimedijalni programeri.

Noseći softver, poruke i sadržaji predstavljeni na računaru, televizijskom ekranu, PDA(Personal Digital Assistant) ili mobilnom telefonu zajedno čine multimedijalni projekat.Ako će projekat biti isporučen ili prodat kupcima ili krajnjim korisnicima, obično kao celina,kao nadogradnja ili na Internetu, sa ili bez uputstva, to je multimedijalni proizvod. Pro-jekat, takođe, može da bude stranica ili sajt na WWW, gde multimedijalni elementi moguda se "ubacuju" pomoću HTML (Hypertext Markup Language) ili DHTML (DynamicHypertext Markup Language) ili XML (eXtensible Markup Language) dokumenata i gdemogu da se koriste dodatke kao što je Macromedia Flash, Adobe LiveMotion ili AppleQuickTime za prikazivanje multimedijalnih dela koristeći pretraživač (browser) kao što suInternet Explorer ili Firefox.

Multimedijalni projekat ne treba da bude interaktivan da bi se zvao multimedija – koris-nici mogu da sede i da ga gledaju kao film ili televiziju. U takvim slučajevima projekat jelinearan, sa definisanim početkom i gledanjem do kraja. Kada su korisnicima date navi-gacione kontrole i mogu da "lutaju" kroz sadržaj po želji, multimedija postaje nelinearnaa korisnik interaktivan, što dovodi do moćnog ličnog prolaza ka informacijama.

Određivanje kako će korisnik vršiti interakciju i navigaciju kroz sadržaj projekta zahtevaveliku pažnju na prateće poruke, izvršavanje skripti ili scenario kompletnog dela i pro-gramiranja. Ako se ne vodi računa o svemu, može se prelomiti ceo projekat sa loše di-zajniranim interfejsom. Takođe, može se prelomiti projekat sa neadekvatnim ili netačnimsadržajem.

Multimedijalni elementi su obično ukomponovani zajedno u projekat pomoću autorizo-vanih alata. Ovi softverski alati su dizajnirani za upravljanje pojedinačnim multimedi-jalnim elementima i obezbeđuju interakciju korisnika. Pored pružanja načina za korisnikeda komuniciraju sa projektom, većina autorizovanih alata, takođe, nudi mogućnosti da sestvaraju i uređuju tekst i slike, sa formatima koji im omogućavaju da pokreću prikazivanje

Šta je multimedija? 3

videoporuka na dostupnom perifernom hardveru. Zvuci i filmovi su obično izrađeni po-moću alatki za uređivanje na ovim medijima, a zatim se elementi uvoze u autorizovanisistem za reprodukciju. Rezultat toga šta se dobija na plejbek i kako je to prikazanogledaocu na monitoru je grafički korisnički interfejs ili GUI (Graphical User Interface).Ovaj interfejs propisuje pravila o tome šta se dešava sa ulazom kao što je stvarna grafika naekranu. Hardver i softver koji određuju granice onoga šta se može desiti su multimedijalneplatforme ili multimedijalno okruženje.

1.2. CD-ROM, DVD i multimedijalni put

Multimedijalni sadržaji zahtevaju veliku digitalnu memorije kada se nalaze u bibliotecikrajnjeg korisnika (na njegovom računaru) ili veliki propusni opseg kada se distribuirajupreko mreža koja su povezane žicom ili staklenim vlaknima, kao i preko bežičnih mreža.Što je veći propusni opseg, veći je i protok, tako da se više sadržaja može brzo isporučitikrajnjem korisniku.

1.2.1. CD-ROM, DVD i multimedija

CD-ROM (Compact Disc Read-Only Memory) je nastao tokom poslednjih godina kaonajisplativiji medij za distribuciju multimedijalnih projekata. CD-ROM može da se jeftinomasovno proizvodi i može da sadrži do 84 minuta video ili audio elemenata koji se prikazujupreko celog ekrana. Može da sadrži i jedinstvene mešavine slika, zvukova, teksta, videai animacija pod kontrolom autorizovanog sistema kako bi se obezbedila neograničena in-terakcija korisnika.

Diskovi mogu biti izrađeni od polikarbonatne plastike tako brzo kao kolačići na proizvod-noj pekarskoj liniji. Podrazumeva se da većina današnjih prodatih PC-a ima ugrađen iliCD-ROM ili DVD plejer i prateći softver koji omogućava njihov rad. Mnogi sistemi seisporučuju i sa DVD plejerima koji su u stanju da čitaju i CD-ROM diskove. Tehnologijavišeslojnih DVD-eva (Multilayered Digital Versatile Disc) je na putu da poveća kapaciteti multimedijalne mogućnosti aktuelnih CD-ROM-ova na 18 gigabajta na jednom disku.CD i DVD rezači se koriste za njihovo čitanje i za izradu više njih, u željenim formatima.

1.2.2. Multimedijalni put

Sada kada su telekomunikacione mreže postale globalne i kada su provajderi i vlasniciutvrdili vrednost svojih proizvoda i kako će naplaćivati novac za njih, informacioni ele-menti će se konačno povezati u mreži, kao distribuirani resursi na "autoputu podataka"(u stvari više kao put sa naplatom drumarine), gde će se plaćati sticanje i korišćenje in-formacija zasnovanih na multimedijalnim elementima.

Kompletni sadržaji knjiga i časopisa će biti dostupni putem modema i elektronskih veza,igrani filmovi će se gledati kod kuće, novinski izveštaji u realnom vremenu iz bilo kogmesta na Zemlji će biti na raspolaganju, predavanja sa univerziteta će se pratiti u svrhuučenja na daljinu, mape ulica bilo kog grada će biti vidljive, sa preporukama za restorane,na bilo kom jeziku i gde će se uključivati određene izjave i video zapisi. Ovo nije naučna

4 Multimedija

fantastika, to se sada dešava. Svaki od ovih interfejsa ili puteva ka informacijama sumultimedijalni projekti koji samo čekaju da budu razvijeni.

Dostupni aktuelni sadržaji bi trebalo da generišu ideje kreativnih ljudi kako bi se pokrenulisvi stanovnici u cilju kreiranja boljeg sveta. Kompanije za zabavu na lagan način svojesadržaje pretvaraju u multimedijalne projekte i udružuju se sa odgovarajućim kompani-jama kako bi se projekti distribuirali kroz kablovsku televiziju. Filmski studiji formirajunove ogranke kako bi proizvodili interkativne multimedijalne sadržaje, a talentovani ljudise udržuju, formiraju nove kompanije i pridružuju se akciji. Velike medijske korporacije seujedinjuju, čak i bez jasnog poslovnog modela i poznatog profita, kreirajući velike kon-glomerate kako bi kontrolisali sadržaje i isporuku "sutrašnjih informacija".

Neke kompanije će posedovati puteve za prenos podataka, druge kompanije će posedovatihardver i softverske interfejse na kraju linije, u kancelarijama i domovima. Neke će povezatisve to zajedno i omogućiti isporuku po zahtevu i naplaćivaće usluge. Bez obzira na toko je vlasnik puteva za prenos i hardvera, proizvođači multimedijalnih sadržaja će stvaratinove literature i bogate sadržaje koje će slati dalje. To je nova i uzbudljiva industrija, alii dalje se suočava sa mnogim "dečijim bolestima".

1.3. Gde koristiti multimediju?

Multimedija je odgovarajuća kada ljudski interfejs povezuje korisnika sa elektronskim infor-macijama bilo koje vrste. Multimedija prenebregava minimalističke tekstualne računarskeinterfejse i daje merljivu iskorišćenost sticanjem i držanjem pažnje i interesovanja, štoznači da multimedija poboljšava zadržavanje informacija. Kada je pravilno izgrađena,multimedija može biti duboko zabavna, kao i korisna.

1.3.1. Multimedija u poslovanju

Poslovne aplikacije za multimediju uključuju prezentacije, obuku, marketing, oglašavanja,demo proizvode, baze podataka, kataloge, umrežene komunikacije. Govorne pošte i videokonferencije će uskoro biti dostupne kroz mnoge lokalne i šire mreže (LAN – Local AreaNetwork i WAN – Wide Area Network) korišćenjem distribuiranih mreža i Internet protokola.

Multimedija uživa široku primenu u programima obuke. Lekari i veterinari mogu da vežbajuoperacione metode putem simulacije pre aktuelne operacije. Mehaničari uče da popravljajumotore. Prodavci uče o proizvodnim linijama i za sobom ostavljaju softver za obuku svojimklijentima. Piloti borbenih aviona uvežbavaju letačke manevre pomoću simulatora, prenego što sednu u pravi avion. Povećanje upotrebe jednostavnih autorizovanih programaza krajnjeg korisnika i medijska produkcija alata omogućava čak i radnicima na linijamada kreiraju svoje sopstvene programe obuke za korišćenje od strane svojih vršnjaka (slika1.2).

Multimedija oko i unutar kancelarija je postala uobičajena. Hardver koji radi sa slikamase koristi za kreiranje ID kartica zaposlenih i popunjavanja odgovarajućih baza podataka,za video komentare i za telekonferencije u realnom vremenu. Laptop računari opremljeni


najbržim procesorima dolaze kompletni sa CD-ROM ili DVD uređajima i spremni su zamultimedijalne prezentacije.

Slika 1.2. Animirane instrukcije i odgovarajući simulator

Kada kompanije i preduzeća shvate snagu i prednosti multimedije, tada cena ugradnjemultimedijalnih elemenata opada, što dovodi do toga da će se više aplikacija razvijati i ukući i od strane trećih lica, kako bi pokretanje posla u preduzećima išlo glatko i efikasno.

1.3.2. Multimedija u školama

Škole su možda najpotrebnija destinacija za multimediju. Multimedija će izazvati radikalnepromene u nastavnom procesu u toku narednih decenija, posebno što pametni učeniciotkrivaju da mogu pomeriti dalje granice tradicionalne metode nastave. Zaista, u nekimslučajevima, nastavnici mogu postati više kao vodiči i mentori, a ne primarni distributeriinformacija i razumevanja. Učenici, a ne nastavnici postaju jezgro nastave i učenja. Ovoje osetljiva tematika među vaspitačima, tako da se obrazovni softver često pozicionira kao"obogaćivanje" procesa učenja, a ne kao potencijalna zamena za tradicionalne metodezasnovane na nastavniku.

Multimedija za učenje ima mnoge oblike. Slika 1.3 prikazuje elemente pionirskog i nagrađi-vanog rada autora Mercer Meyer pod nazivom Just Grandma and Me koji je namenjen zadecu uzrasta od 3 do 8 godina na engleskom govornom području. Čitanje se poboljšavakroz prepoznavanje reči – tasterom miša se klikne na bilo koju reč kako bi se ta reč repro-dukovala. Računar čita priču glasno, a ponekad speluje i definiše pravopis pojedinačnihreči. Ako se klikne na poštansko sanduče iskače simpatična žaba i kašlje zbog dima izdimnjaka, telefon zvoni, ali ako niko nije kod kuće čuje se bakina sekretarica. Trebalo bije sačekati da se vrati sa plaže.

Slika 1.4, koja je na drugom kraju kontinuuma obrazovanja, pokazuje naslovni ekran sanaprednim elektronskim nastavnim sredstvom koje je pripremila Yale University School ofMedicine. Ona pruža lekarima preko 100 prezentacija i daje kardiolozima, radiolozima,studentima medicine i drugim specijalistima priliku za "dubinsko" učenje novih kliničkihtehnika. Odrasli, kao i deca, uče pomoću istraživanja i otkrića, tako da multimedijalnisadržaji dolaze do punog izražaja.

6 Multimedija

Slika 1.3. Interaktivna priča za decu od 3 do 8 godina

Slika 1.4. Medicinski multimedijalni projekat


Interesantna upotreba multimedije u školama uključuje i same đake ili studente. Studenti iđaci sastavljaju interaktivne časopise i biltene, kreiraju originalna umetnička dela pomoćusoftvera za uređivanje slika, oni intervjuišu đake, studente, građane, učitelje i nastavnike,a mogu i da kreiraju QuickTime filmove. Oni, takođe, mogu da dizajniraju i pokreću Webstranice.

ITV (Interaktivna TV) se naširoko koristi po kampusima kako bi se udružili studenti sarazličitih lokacija u jednu klasu sa jednim nastavnikom ili učiteljem. Pokretna vozila saračunarima, generatorima i satelitskom antenom mogu da se pošalju u oblasti u kojimaljudi žele da uče, ali nemaju računare ili škole u blizini njih. U on-line verziji škole, učenicimogu da se upišu u škole širom sveta i da imaju interakciju sa posebnim nastavnicima idrugim učenicima – nastavi se može pristupiti kad god to student poželi, dok nastavnikmože da bude na plaži i komunicira putem bežičnih sistema.

1.3.3. Multimedija u kućama

Od bašte, kuvanja, dizajniranja kuće, adaptacije do uređenja porodičnog stabla (slika 1.5),multimedija je uveliko ušla u kuće. Na kraju, većina multimedijalnih projekata će stićikući preko televizora ili monitora sa ugrađenim mogućnostima interaktivnog ulaza ili nastarinski kolor televizor ili novije sisteme.

Slika 1.5. Softver za kreiranje i uređenje porodičnog stabla

Danas, kućni i ostali korisnici multimedijalnih sadržaja poseduju računare sa ugrađenimCD-ROM ili DVD uređajima ili dodatne konzole koje se priključuju na televizore, kao

8 Multimedija

što su Sega, Nintendo, X-box ili Sony PlayStation. Postoji sve veće približavanjeračunarske zabave i multimedijalnih sadržaja sa raznoraznim računarskim igricama, kojepokrivaju različite žanrove. Na primer, Nintendo je prodao više od 750 miliona igricapopulaciji od oko 100 miliona igrača širom sveta.

Sve više korisnika koristi on-line igrice koje plaća preko Interneta i gde im je omogućeno daigraju međusobno, a koriste usluge lokalnih provajdera. Microsoft Internet Gaming

Zone i Sony Stations sajtovi mogu se pohvaliti sa više od milion registrovanih korisnikasvaki – Microsoft tvrdi da je uspešniji, sa desetinama hiljada ljudi koji su se prijavili iigraju se svake večeri.

Dom u budućnosti će biti dosta drugačiji kada cene računarskog hardvera i multimedijalnetelevizije postanu masovno pristupačne i kada multimedijlna veza sa podacima postaneširoko dostupna. Kada se broj multimedijalnih domaćinstava poveća od stotine hiljadado mnogo miliona, biće potreban veliki izbor multimedijalnih naslova i materijala kako bise zadovoljili zahtevi ovog tržišta, a biće u opticaju i ogromne količine novca koje će seostvariti putem proizvodnje i distribucije ovih multimedijalnih proizvoda.

1.3.4. Multimedija na javnim mestima

U hotelima, železničkim stanicama, tržnim centrima, muzejima, prodavnicama prehram-benih namirnica i prodavnicama, multimedija će postati dostupna na samostalnim termi-nalima ili kioscima za pružanje informacija (slika 1.6) i pomoć. Takve instalacije omogu-ćavaju smanjenje tražnje na tradicionalnim informacionim pultovima i smanjenje pratećegosoblja, i oni mogu da rade neograničeno, čak i u sred noći, kada je "živa" pomoć vandužnosti.

Slika 1.6. Samostalni terminali (kiosci) sa pratećim softverom


Slika 1.6 levo prikazuje kisok iz supermarketa koji pruža informacije o uslugama u rasponuod planiranja obroka do završne kupovine. Hotelski kisoci izlistavaju restorane u blizini,mapu grada, avio rasporede i pružaju gostima usluge kao što je automatizovana naplata.Štampači su često povezani sa ovim kisocima, tako da korisnici mogu da odšetaju sainformacijom u štampanom obliku.

1.3.5. Virtuelna realnost

Jedan od računarskih koncepata o kojem se veoma mnogo piše i govori jeste pojava tzv.virtuelne realnosti (Virtual Reality). Iako je reč "virtuelno" višeznačna (u Vujakliji imadesetak različitih interpretacija) u kontekstu računarske terminologije ona označava onošto oponaša prirodno ali nije od prirode, već samo spolja ima njen izgled.

U praktičnom pogledu ovaj koncept je zaživeo najviše u trodimenzionalnim kompjuterskimigrama i tzv. simulacionom softveru. S obzirom da su računari u poslednjih desetak godinaimali vrtoglavi razvoj po pitanju brzine centralnih procesorskih jedinica, video komponentii količine informacija koju je moguće skladištiti i obraditi, danas se došlo do toga da jegrafički moguće fotorealistično prezentovati stvari realnog sveta. To praktično znači daračunarski generisanu sliku (vizuelizaciju) nekog prirodnog modela (na primer, čoveka)gotovo je jedva moguće odvojiti od realne slike.

Postoje čak posebni sajtovi na Internetu na kojima se nudi niz slika kod kojih trebapogoditi da li je u pitanju računarski generisana vizuelizacija nekog prirodnog modela ilipak prirodna fotografija.

Slika 1.7. Virtuelne scene i aktivni učesnici u njima

Smatrajući da su realni svet i planeta Zemlja već u dovoljnoj meri poznati i iskorišćeni,čovek se okrenuo istraživanju i praktičnoj primeni sveta virtuelne realnosti. Tako je nas-tao paralelni svet virtuelnih zajednica različitih interesnih grupa. Svet virtuelne realnostikreiran je kao slika realnog, što se može smatrati ostvarenim uvođenjem treće dimenzijeu virtuelna okruženja. U ovom trenutku njegovog razvoja, međutim, na sceni je obrnuti

10 Multimedija

proces – primena rešenja iz virtuelne realnosti u stvarnom svetu. I, kao što se svet virtuelnerealnosti proširio i sa nastankom Interneta postao globalni fenomen, tako će primenomrešenja iz sveta virtuelne realnosti u stvarnom svetu nastati 3D Internet.

Unutar WWW, razvijeni su standardi za prenos virtuelne realnosti sveta ili scena u VRML(Virtaul Reality Modeling Language) dokumentima (gde je ekstenzija takvih fajlova .wrl).Firma Intel i softverski kreatori kao što je Adobe najavili su podršku za nove 3D tehno-logije.

Slika 1.8. Simulator letenja za avion Learjet 45

Prvi primer poslovne primene virtuelne realnosti predstavlja simulator letenja za avionLearjet 45 (firme Silicon Graphics), a zatim je taj princip iskorišćen u automobilskojindustriji za simulaciju vožnje i testiranje ergonomskih komandi za upravljanje vozilima(Volvo, BMW, Mercedes-Benz). Bez virtuelne realnosti i 3D okruženja danas se ne moguni zamisliti proizvodnja u automobilskoj industriji, izrada različitih projekata u građevinar-stvu i arhitekturi, medicinska dijagnostika, hirurgija i mnoge druge oblasti industrije, naukei tehnike. Ali, sve su to pojedinačni primeri primene 3D okruženja. Treba napomenuti da3D Internet podrazumeva globalno povezivanje ljudi i njihov pristup različitim sadržajimau 3D okruženju.

Glava 2

Tekst

Korišćenje teksta i simbola za komuniciranje je započelo pre skoro 6 000 godina u zemljamaMediterana (u Mesopotamiji, Egiptu, Sumeru i Vavilonu), kada su prvi simboli ispisivanina glinenim pločicama i ostavljani da se suše na suncu. Samo je članovima vladajućeklase i sveštenstva bilo dozvoljeno da čitaju i pišu piktografske znake i oznake na glinenimpločicama.

Najranije poruke pisanim rečima su, obično, predstavljale informacije od vitalnog značajaza upravljanje ljudima, politikom i porezima. Pošto ovaj novi medij nije zahtevao daslabašna čovekova siva masa (mozak) uči napamet, pisane poruke su postale popularnemeđu elitom. Ovakve nove poruke nisu bile u velikoj opasnosti da nestanu usled razno-raznih razloga. Čak i ako bi poruku presreli neprijatelji, ili konkurenti, ona bi i dalje bilanerazrešiva za sve, osim za one koji su već stekli veštinu čitanja.

Slika 2.1. Egipatski hijeroglifi

12 Multimedija

U nekim ranijim dobima najveći prekršaj čoveka je bilo znanje čitanja, ako nije pripadao"višoj" društvenoj klasi, ili ako vladari za to nisu dali "odobrenje".

Danas tekst i sposobnost čitanja predstavljaju "prolaz" ka znanju i, eventualno, moći.Čitanje i pisanje su očekivane i neophodne veštine u većini modernih društava. Kao štoje bio slučaj kroz istoriju, tekst i dalje predaje informacije mogu imati moćna značenja.

Nakon "eksplozije" Interneta i World Wide Weba, tekst je postao važniji nego ikad.Maternji jezik Weba je HTML (Hypertext Markup Language), prvobitno dizajniran daprikaže jednostavne tekstualne dokumente na računarskom ekranu, uz poneku sliku uba-čenu kao ilustraciju. Akademski članci, novinski članci, kompleksni priručnici i sadržajikompletnih knjiga su sada dostupni da se čitaju preko Interneta. Ugrađivanjem funkcijakoje, na klik mišem, povezuju odabrane reči i fraze sa drugim sličnim i možda, detaljnijimmaterijalom, korisnik može da surfuje kroz medije koji su mnogo bogatiji nego papirnestranice knjige.

Društveni uticaj ovog medija na način na koji ljudi pristupaju informacijama i koriste ih bićefundamentalan sa sazrevanjem Weba. Suprotno današnjem televizijskom mediju, koji sesastoji od zvuka i slike sa nekoliko naslova koji su usmereni na pasivnu publiku, Web nudiaktivno iskustvo sa dovoljno izbora. Više od televizije, sa svojih 5, 50, ili, čak, 500 kanala,Web nudi "istraživački raj" od nekoliko miliona HTML dokumenata. Nedavno je firmaYahoo izjavila da kroz njeno indeksiranje korisnik može da pronađe više od 20 milijardidokumenata, u zavisnosti od toga šta traži. Pošto je reč o ozbiljnoj firmi, svakodnevnoažuriranje uključuje preko 19, 2 milijarde Web dokumenata, 1, 6 milijardi slika i preko 50miliona audio i video fajlova.

2.1. Značenje i njegova snaga

Čak i obična reč može da ima više značenja, pa kada se počinje sa radom u nekom medijuvažno je da se konkretne reči precizno definišu. U multimediji to su, uglavnom, reči kojeće se pojaviti u naslovima, menijima i navigacionim pomagalima.

Mnogi primeri demonstriraju sledeći princip multimedije – važno je dizajnirati oznakeza naslove ekrana, menije i dugmad, koristeći reči sa najpreciznijim i najsnažnijimznačenjima kako bi se izrazilo ono što zaista treba. Treba shvatiti suptilne razlike iodgovorajuće nijanse. GO BACK! je jače i "oštrije" nego Previous; Quit je "jače" negoClose. Na primer, odgovor FANTASTIČNO! može da bude mnogo bolji od "Taj odgovorje ispravan."

Reči i simboli u bilo kom obliku, izrečeni ili zapisani, najčešći su sistem komunikacije.Trebalo bi predočiti najšira značenja najvećem broju ljudi - precizno i u detalje. Zato suti elementi od vitalne važnosti za multimedijalne menije, navigacione sisteme i sadržaj.

Da bi se poboljšala priča oko ovoga svega, u aplikacije se ugrađuju odgovorajući elektronskirečnici (slika 2.2). Treba proveravati i prelistavati priložene rečnike. Korisnik može da seiznenadi brojem sinonima i srodnih reči od kojih može da počne, kako bi uradio ono štotreba; sigurno je da će pronaći savršenu reč za konkretnu potrebu. Najveći broj današnjihprocesora reči isporučuje se sa priloženim elektronskim rečnikom.

Tekst 13

Slika 2.2. Prateći elektronski rečnik

2.2. O fontovima

Pismo (typeface) je osnovni pojam u tipografiji. Pismo je glavno oruđe tipografije. Sastojise od svih slovnih i ostalih znakova (znakovi interpunkcije, brojke, posebni znakovi) kojiimaju karakteristiku jednoobraznosti, tj. slični su po vizuelnim i ostalim karakteristikama.

Font je pojam koji je u digitalnom dobu, pogotovo od procvata stonog izdavaštva uosamdesetim godinama dvadesetog veka postao praktično istovetan sa pojmom pismo, tedanas gotovo svi kada kažu font, zapravo misle na pismo. Međutim, kroz celu istorijutipografije, font je predstavljao sve znakove jednog pisma u jednoj veličini.

Naime, svako pismo, dolazi u više veličina (na računarima te veličine teoretski mogu rastigotovo do beskonačnosti), i ako se uzme, na primer, da je početna veličina 4pt, sledeća5pt, i tako dalje, recimo sve do 72pt, svi znakovi svih veličina u tom rasponu čine pismo,ali, zato skup svih znakova veličine 4pt čini jedan font tog pisma, skup svih znakovaveličine 5pt čini drugi font tog istog pisma itd.

Iako ova podela na font i pismo ima svoj smisao i praktičnu svrhu, danas se gotovo upotpunosti izgubila. Po pravilu, kod računarske pripreme za štampu, isključivo se koristinaziv font.

Pre nego što se krene u praktično istraživanje fenomena tipografije, potrebno je na početkudefinisati šta je to uopšte tipografija. Jer, iako je tipografija pojam koji je gotovo svako-

14 Multimedija

dnevan u govoru, mnogi ljudi ne znaju tačno da definišu tipografiju i mnogobrojne pratećeelemente.

Tipografija je pojam koji dolazi od dve grčke reči typos - žig, pečat + graphein - pisati,te se definiše na razne načine – kao nauka o slovima, umetnost korišćenja tipografskihslova, veština slaganja, izrade, oblikovanja i funkcionalnog korišćenja slova. Ipak, ononajvažnije se sastoji u tome da je glavni cilj tipografije što efikasniji način ponovnog ko-rišćenja tipografskog materijala (olovnih i digitalnih znakova).

Najkraća definicija tipografije mogla bi glasiti: "umetnost, nauka i tehnika korišćenja iizrade slova i slovnog materijala".

Tipografija ima neka svoja određena tehnička, funkcionalna i estetska pravila, no ona seu nekim slučajavima mogu i napustiti (na primer, u savremenom grafičkom dizajnu). Usvakom slučaju tipografija je jedinstven spoj umetnosti i tehnike, koja se služi naizgled jed-nostavnim slovnim oblicima, no dobar tipograf i dizajner će od tih znakova moći načinititehničko-umetnička dela jedinstvene lepote.

Tipografija se razvijala paralelno sa tehnološkim napretkom, stoga danas obuhvata širokspektar delovanja: od kaligrafije i rukopisa, preko klasičnih primena u grafičkoj industrijii grafičkom dizajnu, do korišćenja slova u Web dizajnu, korišćenju na raznim elektron-skim uređajima (mobilni telefoni, razni plejeri i sl.), korišćenju slova u TV produkciji,računarskim igrama i uopšteno svim aspektima u kojima se pojavljuju razni natpisi.

2.2.1. Tipografski merni sistem

Ovaj deo će korisnika možda malo zbuniti i u početku neće u potpunosti razumeti o čemuse radi. Veći deo ovde iznesenog se danas retko koristi i ovde se navodi uglavnom izistorijskih razloga, ali ne sasvim, jer tipografski merni sistem i danas stoji u pozadini celetipografije, a njen najvažniji pojam – tipografska tačka, danas se toliko široko koristi iosnova je za razumevanje tipografije.

Tipografski merni sistem bio je karakterističan uglavnom za olovni slog (slika 2.3). Pre-laskom na ofset štampu polako izlazi iz upotrebe, međutim ima istorijsku važnost i uprkossvemu i danas je na evropskom prostoru prihvaćen kao bazni sistem, što je potvrđenoprimenom odgovarajućeg standarda (DIN 16507).

Za početak malo istorije: prva potreba za uvođenjem jedinstvenog sistema kojim bi semogla tačno odrediti veličina tipografskog i slagarskog materijala javlja se već u dobapronalazača savremenog štamparstva Johannesa Guttenberga. Prvi ozbiljniji pokušaj stan-dardizacije preduzeo je Joseph Moxon u Engleskoj 1683. god. Ipak, prve praktične rezul-tate postigao je Pierre Simon Fournier koji je uveo tipografski merni sistem u komeje osnovna veličina tipografska tačka (point typographique) - pt. 1775. god. FrancuzFrancois-Ambroise Didot sa sinom Firminom usavršava svoj tipografski sistem kome jeosnova bila tipografska tačka koja preračunata u metrički sistem iznosi 0, 3514mm. Tajsistem je upravo gore spomenuti sistem koji je i danas prihvaćen kao evropski standard.Sistem je duodecimalan, tj. 12 tipografskih tačaka čini jedan cicero. Cicero je pojam kojise najčešće koristio kao standardna mera pre uvođenja standardizovanog mernog sistema.

Tekst 15

Slika 2.3. Olovna slova i slog

Preračunavanje Didotovog sistema na metričku meru preduzeo je 1876. godine nemačkislovolivac Hermann Berthold, te je na taj način utvrdio precizni tipometar čiju je dužinuod 30 cm podelio na 133 nonparela po 6 tipografskih tačaka, iz čega sledi da tipometarima 798 tipografskih tačaka, odnosno 62 1/2 cicera.

Slika 2.4. Didotov tipometar

Preračunavanje Didotovog sistema na metričku meru preduzeo je 1876. godine nemačkislovolivac Hermann Berthold, te je na taj način utvrdio precizni tipometar čiju je dužinuod 30 cm podelio na 133 nonparela po 6 tipografskih tačaka, iz čega sledi da tipometarima 798 tipografskih tačaka, odnosno 62 1/2 cicera.

U anglosaksonskim zemljama upotrebljava se engleski tačkasti sistem u kome jedan pointima 0, 352mm odnosno 0.013832 inča, a engleski cicero (pica) ima 4, 212mm odnosno0.1666 inča. Od 1866. godine tipografska mera se zasniva na dužini od 35 cm koja jepodeljena na 166 nonparela odnosno 996pt. Masovnim prodorom računara u područjegrafike počinje u novije vreme da se koristiti i merna jedinica poznata kao DTP tačka kojaiznosi 0, 35277mm.

Cicero, iako se danas više ne koristi tako često pod tim imenom, i u digitalno doba ostaoje glavna veličina, jer je upravo najveća većina štampe na računarima ispisana upravo uveličini od 12pt.

Iako je je tipografski merni sistem standardizovan, ljudima je i dalje lakše da razmišljajuu metričkom sistemu. Zbog toga se koriste dole navedene formule za preračunavanje iztipografskih u metričke jedinice i obrnuto, mogućnost da će korisniku zatrebati je relativnomala, ali nije na odmet imati te informacije pri ruci.

16 Multimedija

Preračunavanje tipografskih tačaka u milimetre:

n [pt]× 3 : 8 = n [mm]

Na primer, za 12 tipografskih tačaka:

12× 3 : 8 = 4, 5 [mm]

Preračunavanje milimetara u tipografske tačke:

n [mm]× 8 : 3 = n [pt]

Na primer, za 6mm

6× 8 : 3 = 16 [pt]

Na sledećoj slici prikazana su imena "fontova", koja se danas više praktično ne koriste.Ovde su navedena čisto iz istorijskih razloga.

Slika 2.5. Stari nazivi fontova

Veličina fonta ne opisuje tačno visinu ili širinu njegovih znakova. Razlog je činjenica davisina označena brojem 3 na slici 2.6 (visina malog slova x) u dva fonta može varirati, avisina velikih slova tih fontova je ista. Računarski fontovi automatski dodaju prostor ispod

Tekst 17

donjeg dela slova (poneki put i iznad) da bi napravili odgovarajući razmak između redova;engleski izraz je leading, što vodi poreklo od tankih olovnih traka koje su tradicionalnislovoslagači umetali između linija. Treba posebno napomenuti da mogu postojati znatnerazlike između fontova.

Slika 2.6. Merenje veličine pisma

Na slici 2.6 korišćene su sledeće oznake: Cap Height je visina velikog slova (1); PointSize predstavlja ukupnu visinu jednog reda (2); x-Height je visina malog slova x (3); SetWidth predstavlja promenljivu širine predviđene za jedno slovo (4); Shoulder je dodatnorastojanje do naredne linije teksta (5); Baseline je osnovna linija po kojoj se piše tekst(6); Counter označava centralno slovo i brojač (7); Serif predstavljaju dodatne kvačicena slovima (8); Mean Line je glavna linija (9); Ascender predstavlja uzlazni potez (10);Descender je oznaka za silazni potez (11).

Prored (Leading) može da se podešava u većini programa i na Macintoshu i pod operativ-nim sistemom Windows. Obično će se naći ovo fino podešavanje u meniju Text programaza obradu slika ili u meniju Paragraph tekst procesora, mada to nije zvaničan standard.Bez obzira gde je to, korisnik mora da eksperimentiše sa ovom vrednošću da bi postigaonajbolje rezultate za svoj font. Na slici 2.7 prikazano je nekoliko primera.

Slika 2.7. Definisanje veličine proreda

18 Multimedija

Sa programima za editovanje fontova prilagođenja se, takođe, mogu praviti po horizon-talnoj osi teksta – mogu se menjati metrika svakog znaka i kernovanje parova znakova,tj. selektivno menjati rastojanje između parova slova radi bolje čitljivosti i ravnomernostirazmaka između slova. Metrika znaka je opšta mera primenjena na pojedinačne zna-kove; kernovanje je razmak između parova znakova. Radeći sa fontovima kao što suPostScript, TrueType i Master, ali ne i sa bitmapiranim fontovima, metrika fonta semenja da bi se napravili interesantni efekti. Na primer, može se prilagoditi širina telasvakog znaka od regular preko condensed do expanded, kao što je prikazano na slici 2.8.

Slika 2.8. Podešavanje razmaka

Pored ovoga, može da se prilagođava razmak između karaktera (tracking) i kernovanjeizmeđu parova znakova, tj. karaktera (slika 2.9).

Slika 2.9. Dodatno podešavanje razmaka

Kada crta ili rasterizuje slovo A na ekranu ili štampanom izlazu (proces se naziva ras-terizacija), računar mora da zna kako da prikaže slovo korišćenjem sićušnih kvadratnihpiksela (elementi slike) ili tačaka. To radi u skladu sa raspoloživim hardverom i po speci-fikaciji iz izbora raspoloživih pisama i fontova. Monitori visoke rezolucije i štampači moguda kreiraju atraktivnije i raznovrsnije znakove. Današnji širok izbor softverskih fontovaolakšava nalaženje pravog pisma i fonta za svačije potrebe. Na slici 2.10 nalazi se nekolikoprimera istog slova prikazanog različitim fontovima.

Slika 2.10. Dodatno podešavanje razmaka

U vekovima kada se slagalo ručno, slova za pojedinačni font su uvek bila čuvana u dveposude ili kutije (case); gornja kutija je sadržala velika slova, a donja mala. Danas sena engleskom jeziku veliko slovo zove uppercase, a malo slovo je lowercase, a kod nas suodomaćeni nazivi verzal i kurent.

U nekim situacijama (na primer, za lozinke) računar pravi razliku između velikih i malih

Tekst 19

slova (case sensitive). U većini situacija koje zahtevaju unos sa tastature računar prepoz-naje i mala i velika slova kao ista. Zbog toga se za računar kaže da je case insensitive, tj."neosetljiv" na veličinu slova.

Nedavno su postali popularni nazivi kompanija i proizvoda poput TheArt, FireWorks,PhotoDisc, PageMaker, MakeMotion, FileMaker i WebPage. Postavljanje velikog slova usredinu reči (intercap) je trend potekao od računarskog programiranja, gde su programeriotkrili da tako bolje vide reči koje upotrebljavaju za promenljive i naredbe.

2.2.2. Serif i Sans Serif

U svim slovnim znakovima mogu se pronaći neki oblici koji su više-manje zajednički. Tioblici grade slovo i nazivaju se elementi slovnih znakova. Svaki znak se sastoji od ele-menata, ali se ne nalaze svi elementi u svakom znaku.

Pisma mogu biti opisana na mnogo načina. Pisma su bila opisivana kao ženska, muška,delikatna, formalna, kapriciozna, duhovita, komična, srećna, tehnička, novinska itd. Jedanpristup kategorizovanju pisama je univerzalno poznat, manje se tiče lika slova, a više jereč o mehaničkim i istorijskim osobinama pisma. U ovom pristupu koriste se izrazi serif isans serif.

Detaljno poznavanje ovih elemenata nije potrebno u praktičnom radu sa fontovima, važnijeje samim dizajnerima i autorima pisama. Pri praktičnom radu najvažniji, praktično i jedinivažan element je serif koji je vrlo koristan pri razlikovanju i odabiru pisama. Ipak, dobroje upoznati barem najosnovnije elemente.

Slika 2.11. Elementi slovnih znakova

Serif naspram sans serif je najjednostavniji način za kategorizaciju pisma. Pismoili ima serife ili nema (na francuskom "sans" znaci "bez"). Serif je mali ukras nakraju poteza kojim se ispisuje slovo. Times New Roman, Times, Bookman, New CenturySchoolbook i Palatino su primeri serif-nih fontova. Helvetica, Arial, Optima i AvantGarde su sans serif fontovi. Na slici 2.12 prikazan je odnos između ova dva fonta.

Na štampanoj strani serif-ni fontovi se tradicionalno koriste za osnovni tekst, jer setvrdi da ovi fontovi pomažu u vođenju očiju čitaoca po redu ili redovima teksta. Sa drugestrane, sans serif fontovi se koriste za naslove i važne izjave.

20 Multimedija

Slika 2.12. Elementi slovnih znakova

Računarski svet standardne monitorske rezolucije od 72dpi nije isto što i svet štampe,što znači da može da se zastupa teza da su sans serif fontovi čitljiviji i privlačniji kadase koriste u malim veličinama tekstualnog polja na ekranu. Zaista, pažljiv izbor sans

serif fontova dizajniranih da budu čitljivi u malim veličinama ima puno smisla kada sepredstavlja velika količina teksta na ekranu. Font Times veličine 9pt može da izgleda"prezaposleno" i, zapravo, može da bude težak i umarajući za čitanje. Ogroman, polucrniserif font za naslov ili podnaslov može da prenese poruku elegancije i određenog stavau grafičkom dizajnu. Trebalo bi koristiti ono što je dobro za sistem isporučivanja, koji nemora da bude istovremeno dobar i za štampanje materijala na papiru. Razlog je to štoštampanje onoga što je kreirano na računarskom monitoru, WYSIWYG (What You SeeIs What You Get, šta vidiš to i dobijaš) više predstavlja cilj nego apsolutnu činjenicu.

2.3. Upotreba teksta u multimediji

Treba zamisliti projekat bez ikakvog teksta. Njegov sadržaj ne bi nikako mogao da budekompleksan, a bilo bi potrebno mnogo slika i simbola kako bi se korisnici obučili da sekreću kroz projekat. Neko bi pomislio da je rešenje primena glasa i zvuka i da bi to mogloda vodi publiku, ali korisnici bi se brzo odvikli od toga – veći napor se traži pri obraćanjupažnje na izrečene reči, nego pri prelistavanju teksta.

Jedan jedini član tekstualnog menija propraćen jednom akcijom (klik mišem, pritisak nataster na tastaturi ili prst uperen ka monitoru) zahteva malo obuke, a jednostavan je ineposredan. Treba koristiti tekst za naslove i podnaslove ("O čemu je uopšte reč?"), zamenije ("Gde da se ide?"), za navigaciju ("Kako da se dođe do potrebne lokacije?") i zasadržaj ("Šta se vidi kada se tamo stigne?").

2.3.1. Dizajniranje pomoću teksta

Računarski ekrani pružaju vrlo mali radni prostor za razvoj kompleksnih ideja. U određe-nom trenuiku korisnik će morati da isporuči "snažne" ili vrlo koncizne tekstualne porukena ekranu u što kraćem obliku. Iz perspektive dizajna, izbor veličine fonta i broj naslovakoji se postavljaju na konkretan ekran moraju imati neku vezu i sa kompleksnošću porukei sa njenim delokrugom.

Ako su poruke deo interaktivnog projekta ili Web sajta gde se zna da će korisnik tražitiinformacije, mogu se upakovati velike količine tekstualnih informacija na ekran, pre negošto to sve postane napadno. Većina korisnika voli "gusto spakovan" materijal i skrolovanje

Tekst 21

("putovanje") kroz relevantan tekst, kao i proučavanje detalja. Tu bi morala da se nađemera. Premalo teksta na ekranu zahteva beskonačno i iritirajuće prelistavanja stranica,nepotrebne klikove mišem i čekanja; previše teksta može da učini da ekran bude natrpani neprijatan.

Sa druge strane, ako se daje javna podrška glasom, tekst se uključuje u "živu" prezentacijui naglašava glavnu poruku. U takvom slučaju treba koristiti velike fontove i malo reči samnogo praznog prostora. Na taj način će se publika skoncentrisati na govornika na podi-jumu, umesto da troši vreme na čitanje poruka koje su projektovane na ekran.

2.3.2. Izbor tekstualnih fontova

Biranje fontova za upotrebu u multimedijalnoj prezentaciji može ponekad da bude teškozbog dizajna. Stvaralac multimedijalnog projekta u isto vreme mora da bude poeta, psiho-log i grafički dizajner. Preporuka je da stvaralac treba da pokušava da oseti potencijalnureakciju korisnika na ono što se dešava na ekranu. Sledi nekoliko dizajnerskih sugestijakoje mogu biti od izuzetne pomoći:

• Za mala slova treba koristiti najčitljiviji raspoloživi font. Dekorativni fontovi koje jenemoguće pročitati su beskorisni (slika 2.13).

Slika 2.13. Isto pitanje, ista veličina (11pt) i različiti fontovi

• Treba koristiti što manji broj različitih pisama u istom radu, ali trebalo bi menjatitežinu i veličinu karaktera stilovima tipa bold i italic, gde god oni izgledaju dobro.

• U pasusima treba prilagoditi prored kako bi razmak između redova bio prijatan zaoko. Redovi "spakovani" isuviše gusto se teško čitaju.

• Trebalo bi menjati veličinu fonta srazmerno važnosti poruke koja se isporučuje.

• U naslovima sa velikim slovima trebalo bi podesiti razmak između slova (kerning)kako bi se stekao pravi osećaj.

• Trebalo bi istražiti efekte primene različitih boja kako bi stvaralac bio siguran da seslova ističu ili da bi bila čitljivija, a trebalo bi razmisliti i o postavljanju teksta narazličite pozadine.

• Treba koristiti opciju anti-aliasing za tekst gde je potreban blag i stopljeni izgled zanaslove i podnaslove. To odaje profesionalniji izgled. Pomenuta opcija stapa bojepo ivicama slova (to se zove dithering) da bi se napravio mekan prelaz između slovai pozadine.

22 Multimedija

• Treba pokušavati sa upotrebom inicijala za pasuse (slika 2.14) i početnim velikimslovima kako bi se rečima obezbedila dodatna težina. Većina tekst procesora ieditora teksta omogućavaju olakšanu primenu inicijala i umanjenih velikih slova(SMALL CAPS) u tekstu.

Slika 2.14. Primena inicijala na dva različita načina

• Ako se koriste centrirana slova u tekstualnom bloku, broj redova treba da bude štomanji.

• Ako treba privući pažnju, stvaralac bi mogao da grafikom izmeni i modifikuje željenitekst.

• Trebalo bi eksperimentisati sa primenom senki. Takav tekst može postati ubojitijii imati mnogo više značenja. Na Web sajtovima osenčeni tekst i grafika na čistojbeloj pozadini dodaju dubinu strani.

• Naslove treba oivičiti sa mnogo praznog prostora. Beli prostor (white space) je izrazza prostrane prazne oblasti.

• Treba odabrati fontove koji izgledaju dobro za prenos poruke.

• Treba koristiti smislene reči i izraze za linkove i elemente menija.

• Tekstualni linkovi (anchors) na Web stranama mogu da promene težište poruke; is-taknuti su bojom i podvučeni su. Trebalo bi koristiti boje za linkove na konzistentannačin kroz ceo sajt i trebalo bi izbegavati "drečave" zelene, crvene ili ljubičaste bojena strani.

• Trebalo bi podebljati (bold) ili naglasiti tekst kako bi se istakle ideje ili koncepti,ali ne bi trebalo praviti tekst da izgleda kao link ili dugme kada on to nije.

• Na Web strani trebalo bi staviti najvažnije tekstualne elemente i elemente menija uprvih 320 piksela. Proučavanje surferskih navika otkriva da samo 10÷ 15% surferaprelistava ijednu stranu na dole.

2.3.3. Meniji za navigaciju

Interaktivni multimedijalni projekat ili Web sajt se obično sastoji iz tela informacije ilisadržaja kroz koji se korisnik kreće pritiskom na taster, klikom miša ili pritiskom na ekransa detekcijom dodira. Najjednostavniji meniji sastoje se od tekstualne liste tema. Korisniciodaberu temu i kliknu je. Kako multimedija i grafički korisnički interfejsi (Graphical User

Tekst 23

Interface – GUI) postaju sveprisutni u računarskoj zajednici, izvesne intuitivne akcije seuče na sve više mesta.

Na primer, ako su na računarskom ekranu tri reči, tipičan odgovor od strane korisnika, ada računar ne postavi poseban podsticaj, je da klikne na jednu od tih reči da bi izazvaoaktivnost. Ponekad su elementi menija okruženi okvirima ili napravljeni da liče na dugmadkoju treba pritiskati. Da bi se prostor trošio što manje, tekst poput Throw Tomatoes,Play Video ili Press to Quit se često skraćuje u Tomatoes, Video i Quit. Bez obzirana to, namera ostaje jasna korisniku.

Slika 2.15. Tekstualna lista tema za jednostavne menije

Tekst pomaže da se korisnicima stalno daju obaveštenja gde su unutar dokumenta. Kadakorisnici moraju da kliknu gore i dole po mnogim nivoima menija da bi stigli do cilja, lakomože da se dođe u situaciju da ne znaju gde se nalaze. Ovo je naročito tačno ako sekorisnik sporo kreće od ekrana do ekrana na putu ka cilju (slika 2.15). Ako Motor vodi uZeleno ili Crveno, zatim u Plavo ili Crno, pa ka Kardan ili Sajla, potom ka Svecice

ili Kurbla, zatim ka Kljuc ili Kalauz i tako dalje, korisnik može da završi uvezan unavigaciono stablo ako nema pomoć ili mapu.

Slika 2.16. Celokupna interaktivna tekstualna lista tema

Međutim, ako se stalno prikazuje interaktivna tekstualna ili simbolička lista preduzetihgrananja (sve do samog početka, slika 2.16), korisnik može, kad god hoće, da izbegnemeđukorake na nelinearan način ili da se lako vrati na jednu od prethodnih lokacija nalisti.

2.3.4. Dugmad ili tasteri za interakciju

U multimediji dugmad su objekti, kao što su i blokovi teksta ili fotografija, koji prouz-rokuju neku akciju pošto se klikne na njih. Izmišljena su samo da bi neko mogao da ihgurne ili pritisne kursorom, mišem, tasterom ili prstom – i da prikažu osobine kao štosu osvetljavanje ili neki drugi vizuelni ili zvučni efekti, kako bi naznačili da je korisnik"pogodio" cilj. Na Webu tekst i grafika mogu biti dugmad. Za sada, trebalo bi zapamtitida se pravila za pravilan izbor teksta i fontova u projektima odnose na dugmad, baš kaoi na podnaslove, oznake pasusa i blokove teksta.

Pre nego što se krene u upotrebu odgovarajućeg fonta, njega mora da prepozna operativnisistem računara. Ako stvaralac multimedijalnog projekta želi da koristi neke druge fontove,a ne one koji su instalirani kad i operativni sistem, mora da ih naknadno instalira. Kada senaknadno instaliraju aplikacije, drugi fontovi obično bivaju dodati u postojeću kolekciju.

24 Multimedija

U većini autorizovanih sistema lako je napraviti sopstvenu dugmad od bitmapa ili nacrtanihobjekata. U autorizovanim sistemima sa prenošenjem poruka, u kojima se skriptom opisujeaktivnost kada se dugme miša nađe iznad ili ispod objekta, može se brzo zameniti jednabitmapa drugom, istaknutom ili osvetljenom verzijom, kako bi se pokazalo da li je dugmebilo "pritisnuto" ili da je miš iznad njega. Pravljenje sopstvenih dugmadi od bitmapa ilinacrtanih objekata daje autoru veću dizajnersku moć i slobodu i istovremeno predstavljaosiguranje od problema nedostajućih fontova. Sa druge strane, to može da zahteva i daoduzme mnogo više vremena. Interesantna tekstualna i grafička dugmad za Web mogu sepraviti od GIF ili JPEG bitmapa, koje, kada se klikne na njih, vode ka drugim stranama.

2.3.5. Polja za čitanje

U startu, rad autora je već otežan kada dizajnira tekst koji treba čitati sa ekrana. Ekspe-rimenti su pokazali da je čitanje teksta na računarskom ekranu sporije i teže od čitanjaistog teksta sa papira ili iz knjige. Mnogi korisnici radije odštampaju izveštaje i elektronskeporuke i čitaju ih sa papira, umesto da ih čitaju preko ekrana. Čitanje odštampanog ma-terijala ostaje udobnije.

Ako cilj multimedijalnog projekta ili Web sajla nije da prikazuje velike blokove teksta, ondabi trebalo pokušati da se prezentira korisniku samo po nekoliko pasusa teksta po strani.Trebalo bi upotrebiti font koji se lako čita, umesto lepšeg fonta koji je nečitljiv. Trebalo bipokušati da se prikažu celi pasusi na ekranu i treba izbegavati prekide gde korisnik morada se "šeta" između strana da bi pročitao pasus.

Portrait ili Landscape

Tradicionalni odštampani dokumenti su viši nego što su širi, ali nisu čitljivi na običnommonitoru koji je širi nego što je visok. Orijentacija tipa "viši nego širi" se označava kaoportrait; to je veličina 8, 5 × 11 inča (215, 9 × 279, 4mm), specifična za SAD, dok uostatku sveta važi internacionalna velicina A4 (210 × 297mm). Orijentacija tipa "širinego viši" je tipična za monitore i zove se landscape. Smanjivanje stranice na visinumonitora nije baš uspešno. Postoje četiri mogućnosti ako se radi sa blokom teksta koji jeveći nego što može da stane:

• Trebalo bi staviti tekst u polje sa skrolovanjem. To rešenje preuzimaju Web pre-traživači.

• Trebalo bi staviti tekst u jedno jedino polje ili grafičku sliku u projektnom prozorui omogućiti korisniku da premešta ceo prozor nagore ili nadole, po komandi. Tonajviše ima smisla kada treba da se prikaže tekst sa prekidima strana i formatiranjemkoje je identično štampanom dokumentu. Ovo koristi Acrobat Reader za prikazivanjePDF datoteka.

• Trebalo bi prelomiti tekst u polja koja će stati na ekranske strane i dizajnirati kon-trolnu dugmad da se može prolaziti kroz te strane.

• Trebalo bi dizajnirati multimedijalni projekat za specijalan monitor koji je viši negošto je širi (portrait). Takvi monitori su skupi; koriste se za komercijalno štampanje

Tekst 25

i prelom. Video kontroleri unutar operativnih sistema Windows i MAC OS mogu dazarotiraju tekst za korisnika (slika 2.17).

Slika 2.17. Rotiranje teksta unutar operativnog sistema

2.3.6. HTML dokumenti

HTML (HyperText Markup Language, jezik za označavanje hiperteksta) je opisni jezikspecijalno namenjen opisu Web stranica. Pomoću njega se jednostavno mogu odvojitielementi kao što su naslovi, paragrafi, citati i slično. Pored toga, u HTML standard suugrađeni elementi koji detaljnije opisuju sâm dokument kao što su kratak opis dokumenta,ključne reči, podaci o autoru i slično. Ovi podaci su opštepoznati kao meta podaci i jasnosu odvojeni od sadržaja dokumenta.

Aktuelna verzija standarda je HTML 4.01, a sâm standard održava Konzorcijum za Web(W3C, World Wide Web Consortium).

HTML je nastao uprošćavanjem SGML (Standard Generalized Markup Language, stan-dardizovani uopšteni jezik za označavanje) standarda sa svrhom opisa dokumenta koji seobjavljuju na Webu.

U početku je bio prilično ograničen što se označavanja sadržaja tiče i pružao je uglavnomelementarne stvari za označavanje i formatiranje teksta (paragrafi, naslovi, citati itd.).Kako je Web rastao tako je rasla i potreba za bogatijim sadržajem te je u tom smerurazvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika, slo-jeva, napredno formatiranje teksta itd.

Svi HTML dokumenti bi trebali da počinju sa definicijom tipa dokumenta (DocumentType Definition – DTD) koji pretraživaču definiše po kom standardu je dokument pisan.

26 Multimedija

Osnov HTML-a predstavljaju tagovi i atributi. Pomoću tagova se određeni deo dokumentaodvaja od ostatka i na njega se primenjuju pravila definisana samim tagom. Atributi senalaze unutar tagova i omogućavaju da se pored samog imena taga i unapred definisanogponašanja još bliže odredi način prikaza i ponašanja označenog dela dokumenta. Slededva primera:

<p>Tekst paragrafa.</p>

<p>align="right">Tekst paragrafa</p>

U prvom primeru se odabrani deo označava kao paragraf. U drugom slučaju se poredsamog označavanja govori pretraživaču da odabrani paragraf poravna po desnoj.

Dok se svojstva, tagovi, dodatni programi i specijalni skriptovi ubacuju ili ugrađuju uHTML da bi se zadovoljila potražnja za multimedijalnim interfejsima, u jednom trenutkuće HTML morati da bude redizajniran od nule – kao sredstvo za isporuku multimedije, nesamo kao sredstvo za prikaz raznih dodataka. Taj redizajn se trenutno dešava u oblikudinamičkog HTML-a (DHTML).

HTML dokumenti se sastoje iz dva osnovna dela: dela koji opisuje dokument i dela kojipredstavlja sadržaj dokumenta. Informacije koje opisuju sâm dokument se smeštaju uhead tag, dok se sâm sadržaj smešta u body tag. Oba elementa se nalaze unutar htmltaga.

<html>

<head>

<title>Naslov dokumenta</title>

</head>

<body>

<h1>Primer dokumenta</h1>

<p>Ovo je primer jednog prostog HTML dokumenta.</p>

</body>

</html>

2.3.7. Simboli i ikonice

Simboli su koncentrovan tekst u obliku samostalne grafičke konstrukcije. Oni prenosesmislene poruke. Kanta za otpatke, na primer, kaže gde da se odbace stare datoteke; kur-sor u obliku rotirajućeg peščanog sata kaže da treba sačekati dok računar nešta obrađuje.lako o simbolima korisnik može da misli kao o nečemu što pripada isključivo grafičkojumetnosti, u multimediji ih treba tretirati kao tekst ili vizuelne reči, jer sadrže značenje.Simboli, kao što su poznata kanta za otpatke ili peščani sat, ispravnije se nazivaju ikonice;to su simboličke prezentacije objekata i procesa koji su zajednički za korisničke interfejsemnogih operativnih sistema.

Za milione ljudi značenja reči ostaju ista, ali to ne važi za specijalne simbole koji se praveza multimedijalni projekat; simboli moraju prvo biti naučeni da bi postali korisni prenosiociporuka. Neki simboli su lakše i univerzalnije prihvaćeni, ali čak i značenje tih zajedničkih

Tekst 27

simbola (slika 2.18) mora da nauči. Učenje sistema simbola može biti isto tako teško kaoi lekcije stranih jezika.

Slika 2.18. Neke od uobičajenih ikonica (simbola)

A evo i nekih astronomskih simbola iz dana Keplera i Galileja koje mnogi nisu učili dosada; i dalje ih mnogo koriste astrolozi, a predstavljaju 12 zodijačkih znakova (slika 2.19).

Slika 2.19. Znaci zodijaka

28 Multimedija

Ipak, nekoliko simbola je "isplivalo" na površinu sveta interaktivne multimedije kao prih-vaćeni leksikon navigacionih smernica kojima ne treba propratni tekst. Daleko od toga dasu ti simboli univerzalni, ali na slici 2.20 vidi se da ti simboli vuku korene iz ranijih doba.Čak i za te česte simbole obično se dodaju tekstualne oznake da bi se izbegla neizvesnost.

Slika 2.20. Prepoznatljivi simboli koji su u svakodnevnoj upotrebi

2.3.8. Animirani tekst

Ima mnogo načina da se zadrži pažnja posmatrača kada se prikazuje tekst. Na primer,korisnik može da animira označene pasuse i može da ih natera da "uleću" u ekran; može dapovećava naslov znak po znak. Za govornike jednostavno isticanje važnog teksta dobrodeluje kao sredstvo za pokazivanje. Kada treba napraviti nekoliko poenti, mogu da sestave ključne reči na gomilu i osvetljavati ih po određenom redosledu. Neke reči mogu dalete po ekranu, neke mogu da se rastapaju, rotiraju, sve dok se ne dobije dinamičan spisakreči interesantan za gledanje. Ipak, treba biti pažljiv – nema preterivanja sa specijalnimefektima ili će svi postati dosadni.

Moćne, ali jeftine aplikacije, kao što je TypeCaster firme Xaos Tools omogućava kreiranje3D teksta (slika 2.21) i od TrueType i od Type 1 Adobe fontova. Takođe, mogu se uzetiizlazne EPS (Encapsulated PostScript) datoteke iz programa CorelDRAW ili Illustratori da se naprave slike u 3D i zatim da se rezultati animiraju kako bi se napravili filmovi uformatu QuickTime, sa profesionalnim kvalitetom prikaza.

Slika 2.21. Neki primeri 3D teksta

Tekst 29

2.4. Računari i tekst

Vrlo rano u razvoju monitora za računar Macintosh Apple je odabrao rezoluciju od 72slikovna elementa (piksela) po inču. To se uparuje sa standardnom merom u štamparskojindustriji (72 pointa po inču) i omogućava stonom izdavaču i dizajneru da vide na monitoruna šta će ličiti to što se odštampa (zove se "šta vidiš to i dobiješ", What You See Is WhatYou Get, skraćeno WYSIWYG).

2.4.1. Kako nastaje font?

Mnogi slovni oblici nastaju kao skice koje dizajner crta na papiru. Posle toga je neophodnoprevođenje crteža u digitalni oblik, što se rešava na dva načina. Jedan od njih je skeniranjei vektorizacija crteža, a drugi je upotreba grafičkih tabli; pri tom je najvažnije prepoznatiključne tačke na konturi (prevoji i uglovi). Ove metode omogućavaju da se naknadnimdoterivanjem u font editoru dobije optimalni oblik konture.

Veoma je bitna veličina uzorka koji se skenira, pošto ona utiče na preciznost vektorizacije.Prilikom skeniranja i "trejsovanja" crteža uvek dolazi do greške, tako da se kao prostopravilo može usvojiti da je potrebna dvostruko veća tačnost od one koju na kraju korisnikželi da postigne. Ako se, na primer, kreira TrueType font u kome su slova definisanau matrici 2048 × 2048 (ova vrednost se naziva UPM), a preciznost grafičke table je 300tačaka po inču, potrebno je da se skenira crtež čija je minimalna veličina 7×7, a optimalna13× 13 inča (2048/300 = 6, 28).

Jedna od opcija je i crtanje kontura direktno na ekranu monitora - potreban je što većimonitor i najveća moguća rezolucija. Tokom doterivanja oblika konture treba obezbeditida ona bude opisana najmanjim brojem tačaka, ali premalo tačaka ne dozvoljava da sekontura precizno definiše. Na slici je prikazan pokušaj da se u TrueType formatu definišekrug pomoću četiri tačke (nedovoljno) i šesnaest tačaka (isuviše). Optimalna vrednost jeu ovom slučaju osam kontrolnih tačaka (slika 2.22).

Slika 2.22. Konture treba definisati minimalnim brojem kontrolnih tačaka

2.4.2. PostScript

Profesionalno bavljenje DTP-om podrazumeva upotrebu raznovrsnih programa za unosteksta, prelom, obradu slika, crtanje... na Windows, Unix ili Macintosh platformama. Tuje i poduži spisak hardvera u koji spadaju laserski štampači, slajd-rekorderi, osvetljivači...

30 Multimedija

Svemu nabrojanom je zajednički PostScript, kamen temeljac ne samo DTP-a, već i mo-derne grafičke industrije.

PostScript se može ukratko predstaviti kao specijalizovani programski jezik za opis stranice(page description language) koji je posebno optimizovan za manipulacije nad 2D grafičkimobjektima, u koje spada i tekst. Iz ove rečenice se teško može zaključiti koliko je PostScriptuticao na proces pripreme za štampu, omogućivši da se skupi sistemi vredni milione dolarazamene neuporedivo jeftinijim Macintosh ili PC računarima. PostScript je bio predodre-đen da uspe jer je izvanredan primer integrativnog faktora koji omogućava platformskunezavisnost i portabilnost dokumenata, uz hardversku nezavisnost sa svim pogodnostimakoje ovakav koncept donosi.

Početkom osamdesetih godina prošlog veka, PC računari su tek ulazili u širu upotrebu. Po-stojalo je na desetine različitih tekst procesora od kojih nijedan nije omogućavao efikasnuintegraciju teksta i slike, a sva rešenja su bila međusobno nekompatibilna. Još 1978. godi-ne je u laboratorijama firme Xerox razvijen programski jezik PostScript, zamišljen upravokao celovit i pažljivo odabran skup naredbi za manipulaciju tekstom i grafikom. Jedan odautora PostScript jezika, John Warnock, je 1982. godine osnovao firmu Adobe SystemsIncorporated, a ostatak priče ne pripada samo istoriji DTP-a, nego i istoriji računarsketehnologije. Najpre je, pre svih, firma Linotype-Hell svom foto-slogu dodala RIP (RasterImage Processor) sa ugrađenim PostScript interpreterom.

Tako se dogodilo ono što je izgledalo nezamislivo: iz kućnog DTP okruženja (u tom mo-mentu rezervisanog za Macintosh računare) postalo je moguće, posredstvom PostScriptdatoteke, pristupiti direktno bilo kom osvetljivaču. Svako ko danas na svom računaru imanajobičniji softverski PostScript RIP poput onog ugrađenog u Acrobat Distiller, posedujeverne kopije "pogonskog agregata" koji se nalazi u ogromnom broju izlaznih uređaja.

2.4.3. Konturni fontovi

Današnji računari opremljeni su monitorima i laserskim štampačima koji su u osnovi raster-ski uređaji. Oni su pogodni za bilo koju vrstu grafike, a slika se formira pomoću piksela.Samim tim, računari se mogu koristiti i za prelom teksta, upotrebom rasterskih (bitmapi-ranih) fontova.

Bitmapirani font je kolekcija piksela, precizno izabranih tako da što bolje oponašaju ori-ginalni dizajn. Za svaku veličinu slova izraženu u tačkama potreban je zasebni font. Bitnaje i rezolucija izlaznog uređaja – govori se, na primer, o fontu Times Roman veličine 12pt,koji je predviđen za štampač rezolucije 300 tačaka po inču. Za veće rezolucije potrebnoje više piksela za opisivanje slovnog lika, ali se ujedno može reprodukovati i više detalja.

Koncept rasterskih fontova deluje jednostavno - korisnik ima potpunu kontrolu nad izgle-dom slova na ekranu ili štampaču, dovoljno je samo da pravilno odabere piksele za datuveličinu slova i rezoluciju. Za ovaj posao može se, naravno, upotrebiti i računar. Zlatnodoba bitmapiranih fontova na PC računarima bilo je vreme prvih HP LaserJet štampača.U kombinaciji sa DTP programom Xerox Ventura Publisher, bile su neophodne i odgo-varajuće kolekcije SFP fontova u nekoliko standardnih veličina.

Iako su ovi fontovi završavali posao, rešenje je iz pozicije korisnika bilo komplikovano i

Tekst 31

neefikasno. Ukoliko se, na primer, želeo vertikalni ispis, postojeći SFP fontovi bili su ne-upotrebljivi. Doduše, postojao je alat koji je "okretao" fontove (tako su nastajali fajlovi saekstenzijom SFL), ali se i utrošak prostora na disku značajno povećavao. Ekranski prikazje, takođe, bio nezadovoljavajući: često je, radi ekonomičnosti, postojao prilično suženizbor ekranskih fontova, dok su se međuvarijante dobijale interpolacijom. Kao rezultatpojavljivala su se prilično ružna i nečitljiva slova.

Tadašnji font editori trudili su se da maksimalno pojednostave mukotrpni proces pravljenjaslovnih likova. Postojale su i automatske funkcije za podebljavanje ili iskošenje, ali od njihnije bilo velike koristi - samo je ručno podešena bitmapa mogla da zadovolji estetske kri-terijume, a kompenzacije od svega par piksela ponekad su mogle drastično da popraveizgled slova.

I pored toga što je DTP na PC računarima jedno vreme bio zasnovan rasterskim fontovima,oni su morali da siđu sa scene. Izlaznim uređajima će i dalje morati da se dostavljaju tač-kice, ali je način njihove pripreme iz korena promenjen. Trend povećanja rezolucije izlaznihuređaja trasirao je put masovnoj upotrebi tehnologije konturnih fontova.

2.4.4. Bezierove krive

Nekoliko stotina godina razvoja tipografije iznedrilo je hiljade različitih oblika slova. Upo-treba računara u pripremi za štampu dovela je do potrebe da se slovni likovi "prevedu"u oblik koji je razumljiv računaru. U početku je izgledalo da je to samo matematičkiproblem: trebalo je "samo" naći pogodan način da se definišu krive linije koje opisujuslova. Karakteristično je da te krive imaju glatke prelaze, baš kao i površi karoserija auto-mobila ili trupa aviona. Fundamentalni doprinos dao je francuski matematičar Pjer Bezije(Pierre Bezier), koji je početkom sedamdesetih radio u fabrici automobila Reno (Renault).Osnovni cilj je bio da se segment krive linije može menjati intuitivnije, bez potrebe da sedizajner ili konstruktor zamara sa previše matematike.

Praktični značaj Bezierovih krivih, pored toga što su definisane koordinatama samo četiritačke, predstavlja mogućnost da se njihov oblik interaktivno menja promenom položajakontrolnih tačaka. Čak i neko ko prvi put vidi Bezierovu krivu (slika 2.23) i ne želi dase upušta u matematiku lako shvata kako se upravlja njenim oblikom. Zbog navedenihsvojstava Bezierove krive su odmah široko prihvaćene u projektovanju, a stvorile su i pre-duslov za nastanak digitalne tipografije. Skup slovnih likova (typeface) opisan Bezierovimkrivama naziva se konturni ili vektorski font.

Slika 2.23. Bezierov kubni segment

32 Multimedija

Matematički model za predstavljanje slovnih oblika pomoću Bezierovih kubnih segmenataje samo prvi korak u razvoju konturnih fontova. Najhitnija je mogućnost da se, iz jedin-stvenog zapisa, slovni lik po potrebi povećava ili smanjuje (skalira) jednostavnim trans-formacijama, tako da se dobije proizvoljan broj gradacija nekog fonta. Konturni fontoviomogućavaju proizvoljan broj gradacija slova! Ovo je džinovski napredak u odnosu nabitmapirane fontove, kod kojih za svaku veličinu slova i za svaku rezoluciju izlaznog ure-đaja postoji posebna datoteka sa fontom. Kada se pomenu konturni fontovi, danas se,uglavnom, misli na Adobe Type 1 i TrueType fontove.

2.4.5. Hint mehanizmi

Da priča o konturnim fontovima ne bi bila tako jednostavna, pobrinula se priroda izlaznihjedinica kao što su ekran, štampač ili osvetljivač. Dok na jednoj strani postoji idealanmatematički opis slova, osnovna jedinica kojom barataju izlazni uređaji je tačka (piksel)koja, u zavisnosti od fizičke rezolucije, može biti sitnija ili krupnija. Postupak pretvaranjakonture slovnog lika u "tačkasti" opis naziva se rasterizacija (slika 2.24). Kada je re-zolucija pri kojoj se obavlja rasterizacija dovoljno velika (tipično 2540 tačaka po inču zafoto-slog, što znači da na svakom kvadratnom milimetru površine ima raspoloživih 10000tačaka), odstupanje idealnog oblika konture od rasterske mreže je minimalno i neprimetnoza oko. Ali, kod manjih rezolucija rasterizacija može biti nezadovoljavajuća, jer varijacijaod samo jedne tačke drastično menja oblik slova. To je posebno vidljivo kod slova m:očekuje se da sva tri vertikalna stuba budu iste debljine i da udaljenost između njih budejednaka, a kod serifnih fontova očekuje se ujednačenost svih serifa. Narušavanje nekogod ovih pravila dovodi do neusaglašenog izgleda fonta.

Slika 2.24. Rasterizacija slova

Rasterizator ne zna šta su to "stubovi", "serifi", "linije poravnanja" i slične stvari odgo-vorne za ravnomeran izgled fonta. Zato sastavni deo savremenih konturnih fontova čine idodatna uputstva rasterizatoru koja su vitalna za rad u nižim rezolucijama. Ova uputstvasu poznatija kao hintovi ili hint mehanizmi, a postupak naznačavanja fonta naziva sehinting.

Pored vektorske definicije slova i njihovih razmaka, hintovi su bitna karakteristika fonta(slika 2.25). U slučaju da se font pretvori u krive (kao što se ponekad radi prilikom slanjau štampariju) ostaju samo crteži slova sa zatečenim razmacima, a hintovi se gube, pa seponekad dešava da sitna slova u štampi ispadnu deblje ili sa neujednačenim stubovima.

Tekst 33

Zbog toga je važno da slova ostanu u obliku fonta da bi se rasterizacija vršila onako kakoje propisano hintovanjem.

Slika 2.25. Poželjan izgled slova koji treba da se dobije primenom hintovanja

PostScript i TrueType fontovi definisani su na različite načine, pa im se i hintovanje raz-likuje. Kod PostScript formata vektorska definicija je jednostavnija, a hintovanje se lakšesprovodi. Kada se dobro podese parametri, automatsko hintovanje daje sasvim zadovolja-vajuće rezultate. TrueType format predviđa tri vrste različitih programa (instrukcija) kojina različitim nivoima kontrolišu pozicioniranje tačaka prilikom rasterizacije. Ovi programikoriste poseban programski jezik i veoma su delotvorni, ali i komplikovani za primenu,pa se hintovanje TrueType fontova obično poverava ekspertima specijalizovanim za ovuoblast. Dobro urađeno TrueType hintovanje daje bolje rezultate od PostScript (Type1) hintova u malim veličinama, posebno kod kurzivnih fontova.

2.4.6. Digitalne slovolivnice

Ako korisnik pokuša da odgonetne šta čini dobar i tehnički besprekoran font, moraćezasebno da razmotri kvalitet kontura i hintova. Izuzimajući dizajn, videće da su kodprvoklasnih fontova konture precizno kodirane, a svi elementi koji izgledaju identično,predstavljeni su potprogramima kako bi se osigurala efikasnost i konzistentnost fonta. UType 1 fontovima su, gde god je to moguće, upotrebljeni flex i hint replacement meha-nizmi. Konture su opisane minimalnim brojem kontrolnih tačaka, a kerning informacijebrižljivo podešene.

Analiza kvaliteta TrueType fontova je veoma komplikovana, pošto se sa pravom očekujei korišćenje složenih instrukcija koje optimizuju bitmape. Veoma mali broj iskusnih pro-gramera u stanju je da napiše TrueType kôd koji je bolji od automatskih hint alata,kao što je Font Lab. Nekoliko firmi, koje će se pomenuti, proizvodi fontove vrhunskogkvaliteta i okuplja najveće eksperte u oblasti digitalne tipografije.

Adobeova kolekcija Type Library je polazna tačka za profesionalni DTP. Ova kolekcija jeraznovrsna i bogata i plod je Adobeove saradnje sa firmom Linotype, koja je među prvimapočela sa prevođenjem klasičnih tipova pisama u fotokompozitni, a zatim i digitalni ob-lik. Adobe je licencirao Linotypeove biblioteke i prodaje ih pod svojim imenom. Postojii skup fontova pod nazivom Adobe Originals, koji sadrži originalne Adobeove dizajne i

34 Multimedija

neke uspešne varijacije klasičnih fontova. Potom se pojavila prva kolekcija njihovih ručnohintovanih TrueType fontova, pod nazivom Adobe WebType. Dvanaest fontova u ovompaketu su Minion, Myriad, Caflisch Script, Mezz, Penumbra i Giddyup, kao i njihove va-rijacije.

Agfa niz godina uspešno sarađuje sa Hewlett-Packardom, koji je svojevremeno ugrađivaonjihove konturne fontove u LaserJet III štampače. Agfa ima dobro kompletiranu Type 1

biblioteku i prilično skroman izbor TrueType fontova, koji su veoma pažljivo hintovani.Ovi fontovi su poznatiji pod nazivom HP Font Pack - radi se o kolekciji koja je ugra-đena u novije modele HP štampača i čija je osnovna namena korektan ekranski prikaz uaplikacijama.

Slika 2.26. Varijacije fonta Rockwell

Bitstream je, zahvaljujući Corelu koji je otkupio pravo da uz svoje grafičke pakete is-poručuje brojna pisma, postao sinonim za korektne, entry-level fontove. To je jedna odretkih firmi koja kompletan skup od 1000 Type 1 fontova ima i u TrueType obliku. Kvali-tet Bitstream TrueType fontova na niskim rezolucijama nije bolji od Type 1 parnjaka,što znači da je primenjen neki od metoda automatskog konvertovanja.

Font Bureau je bostonska firma koja pravi neke od najboljih TrueType fontova, dovodećipotencijale programskog jezika do krajnjih granica.

Font Bureau je hintovao fontove u nekadašnjim Microsoftovim TrueType Font Pack kolek-cijama. U fontu Augsburger Initials primenjen je verovatno najsloženiji ikad napisan kôdza optimizaciju slovnih likova, koji uklanja fine detalje na nižim rezolucijama. Pomenutipristup vraća u život davno zaboravljeno nelinearno skaliranje, specijalitet starih majstoraklasične tipografije. Hint program najpre proverava broj piksela koji je na raspolaganju zarasterizaciju konture; ako je broj ispod zadate vrednosti, suptilni detalji se u potpunostiodstranjuju, jer bi od njihovog prikazivanja/štampanja bilo više štete nego koristi.

ITC (International Typeface Corporation) je poznat po sopstvenim obradama klasičnihfontova, kao što su ITC Garamond ili ITC Bodoni. Ova firma okuplja kvalitetne dizajnere ičesto licencira svoje fontove drugim tipografskim kućama, kao što su Adobe ili Bitstream.ITC izdaje popularni časopis Uc&lc (Uppercase & Lowercase) koji tretira pitanja digitalnetipografije, analizira dizajn novih pisama i tehnološke trendove.

Linotype, pored klasične Type 1 kolekcije, nudi TrueType verzije mnogih čuvenih fontovakao što su Helvetica i Palatino. Microsoft od verzije Windows 2000, isporučuje i Open-Type implementaciju fonta Linotype Palatino sa dizajnerskim rešenjima Hermanna Zapfa.Radi se o svojevrsnom priznanju Linotypeu, nakon što je Microsoft godinama bio veran(neubedljivoj) Monotype-ovoj verziji Book Antiqua.

Tekst 35

Monotype je kreirao osnovni set fontova za Windows plaforme, superiorno hintovaneTimes New Roman, Arial i Courier New fontove. Ovi fontovi sadrže WGL4 set karaktera,što znači da podržavaju gotovo sva evropska pisma, uključujući YU ćirilicu i latinicu. Naj-veći broj Monotypeovih fontova i dalje je u Type 1 formatu. Jedino se njihova bibliotekamože po sveobuhvatnosti i kvalitetu porediti sa Adobe-ovom bibliotekom. Monotype-oviTrueType fontovi nose oznaku ESQ, koja ukazuje na to da je posebna pažnja posvećenanjihovoj čitljivosti na niskim rezolucijama. Ovo je ujedno i njihova preporuka za Web.

Microsoft je licencirao TrueType fontove firme Monotype, ali ima i sopstvene dizajne,kao što su Verdana, Georgia, Trebuchet i Comic Sans. Svi ovi fontovi su besprekornohintovani, a i besplatni, što ima za cilj popularisanje TrueType formata i kontrolu nadWeb tipografijom. U tom svetlu treba sagledati i činjenicu da postoje Macintosh verzi-je pomenutih fontova. Microsoft to objašnjava težnjom za unificiranim prikazom tekstana raznim platformama, ali su pretenzije za nametanjem sopstvenog standarda sasvimočigledne.

ParaType je ruska firma specijalizovana za proizvodnju ćiriličnih fontova. ParaType Lib-rary CD je izvanredna biblioteka ćiriličnih Type 1 i TrueType fontova urađenih po stan-dardnim kodnim rasporedima. Kako je prvih 128 pozicija identično u svim osmobitnimkodnim stranama, ParaType fontovi sadrže i osnovni set latiničnih znakova. Ovo je bitnojer se u ćiriličnim tekstovima često pojavljuju i latinični segmenti. U toj situaciji će bes-prekorna usklađenost između latinice i ćirilice doprineti vizuelnom efektu na stranici. Kaoosnovu za ćirilične fontove, ParaType je pretežno koristio odabrane ITC fontove, kao štosu Garamond, Kabel ili AvantGarde. Iako set karaktera podržava i srpski jezik, nije upotpunosti poštovana Adobeova ćirilična specifikacija, pa nedostaju karakteristična srpskakurzivna slova. Kvalitet fontova je neosporan.

URW prodaje biblioteke TrueType i Type 1 fontova koje su svojevremeno bile spasonosnorešenje za korisnike u Jugoslaviji. Za nas su posebno značajni bili Eastern paketi, koji susadržavali sva naša latinična slova i mogli su se nesmetano koristiti u svim Windows ap-likacijama. URW fontovi su kvalitetni, sa neobično velikim brojem kerning parova. Zarazvoj i dizajn, URW koristi sopstvene (pre)skupe alate Ikarus i Kernus. Pored latiničnih,URW u ponudi ima i nekoliko ćiriličnih fontova, pretežno dekorativnih. Za ime ove firmevezuje se i najpopularniji PostScript emulator, Ghostscript. Za osnovni skup od 35 Type1 fontova koji su sastavni deo svakog PS interpretera, u Ghostscriptu su odabrani URWfontovi.

2.5. Kodni sistemi za prikazivanje znakova

Kodiranje podrazumeva proces prikaza informacija u nekom obliku. Jezik ljudi je kodnisistem kojim se predstavljaju informacije kao nizovi leksičkih jedinica, a njih pak kaozvukove, odnosno, mimiku. Pisani jezik je izvedeni sistem kodiranja kojim te nizove lek-sičkih jedinica, zvukova i gestova predstavljaju grafičkim simbolima koji sačinjavaju nekisistem pisma.

U računarskim sistemima, kodira se pismo na način da predstavlja grafeme i druge ele-mente pisanog teksta kao nizove znakova, jedinica tekstualne informacije unutar nekog

36 Multimedija

sistema za prikaz teksta. Ovi znakovi su u računaru prikazani na jedini način sa kojimračunarski sistemi znaju baratati: binarnim brojevima. Kodni sistemi za prikaz znakovarade upravo to.

Svako kodiranje uključuje dve osnovne komponente: niz znakova i nekakav sistem zanjihovo prikazivanje u obliku obradivih jedinica unutar računara. Naravno, ne postoji pre-dodređen način na koji se ovo radi. ASCII standard je jedan od sistema, ali ne i jedini.Na taj način, isti niz brojeva može se protumačiti na beskonačno mnogo načina, zavisnood konvencija koje se pretpostavljaju. U najjednostavnijem slučaju, koji je još uvek naj-rašireniji, jedan oktet bitova (bajt) odgovara jednom znaku prema nekoj kodnoj tabeli.Ovako je moguće prikazati 256 različitih znakova. Za pravilan način dekodiranja, morabiti poznato koja tabela se koristi.

Dok je ranije ASCII kodiranje bilo najučestalije, danas je raširen ISO Latin 1 načinkodiranja, koji se može smatrati ekstenzijom ASCII-a. ASCII je bio dovoljan samo zaprikaz teksta na američkom engleskom. Nije bio dovoljan za britanski engleski, a ka-moli za izdavaštvo na engleskom govornom području ili gotovo bilo kom drugom jeziku.Ubrzo su prodrli novi standardi i to iz dva izvora: ustanova za standardizaciju i nezavisniproizvođači softvera i hardvera. Tako su firme IBM (codepage 437, 852, 855), Apple iMicrosoft (codepage 1252 = Western = Latin 1) stvarali standarde usput kako su im za-trebali za proizvode koje su izdavali. Ako bi neki takav standard postao široko prihvaćen,nacionalno standardizacijsko telo ga je moglo proglasiti nacionalnim standardom, a takvisu standardi ponekad postajali i međunarodni. Uz celo mnoštvo ovako nastalih standarda,događalo se da neki standardi podržavaju određene znakove koji ne postoje u drugim.

Takođe se dešavalo da su podržani isti setovi znakova, ali na nekompatibilan način. Oviproblemi se danas rešavaju Unicode standardom, ali nasleđeni standardi se ne mogu jed-nostavno zanemariti.

Svaki komercijalni softverski proizvod je eksplicitno dizajniran da podržava određeni setstandarda za kodiranje znakova. Sve njegove operacije sa tekstom biće izvedene podpretpostavkom da je aktivan jedan od tih standarda. Ako podaci nisu tačno ili uopšteoznačeni kojim standardom su kodirani, doći će do neočekivanih rezultata.

Problem sa softverom baziranom na standardima se javlja ako je potrebno raditi sa kom-pletom znakova koji softver ne prepoznaje, onda se može reći da je korisnik "zapeo". Ovoje posebno bio problem za lingviste koji rade sa manje zastupljenim jezicima. Takvi ondakreiraju vlastita rešenja za svoje potrebe koja su sasvim dobra za vlastitu primenu, alizakazuju kada dođe do potrebe za razmenom na višem nivou. Način za izbegavanje ovihproblema je upotreba standardnog kodiranja koje uključuje sve znakove. Upravo takavtip rešenja nudi Unicode koji se razvija sa ciljem da ima univerzalni set znakova koji bipokrivao potrebe na svetskom nivou.

2.5.1. Kodni sistem ASCII (ISO 646)

American Standard Code for Information Interchange je oznaka za repertoar znakova, setkodiranih znakova i obrazac za kodiranje. Većina postojećih kodova sadrže ASCII kao svojpodskup u nekom smislu. Naziv ACSII se koristi naširoko i često pa se tako ponekad misli

Tekst 37

na tekst uopšteno, ili tekstualnu datoteku za razliku od binarne. ASCII po definiciji sadržii set kontrolnih kodova, ali pravi repertoar znakova koji se sastoji od ispisivih znakova jeprikazan na slici 2.27.

Slika 2.27. ASCII - ISO 646 proširen

Set kodiranih znakova definisan ASCII standardom je sledeći: kodne vrednosti su dodelje-ne znakovima redom koji je naveden prethodno, počevši od 32 za prazninu i završavajućisa 126 (tilda). Mesta 0 ÷ 31 i 127 su rezervisana za kontrolne kodove koji imaju stan-dardizovana imena i opise, ali im primena varira.

Obrazac za kodiranje je vrlo jednostavan i prilično očigledan za sve kodove znakova gdekodni brojevi ne prelaze 255 – svaki kodni broj je predstavljen kao oktet (bita) iste vred-nosti. Okteti 128÷ 255 se ne koriste u ASCII-u.

2.5.2. ISO Latin 1 (ISO 8859-1)

ISO 8859-1 standard (koji je deo ISO 8859 porodice standarda) definiše repertoar znakovakoji se naziva "Latin alphabet No. 1", obično zvan "ISO Latin 1", te set kodiranih znakova.

38 Multimedija

Repertoar sadrži ASCII kao podskup i kodni brojevi za te znakove su isti kao u ASCII-u.Standard specificira i obrazac za kodiranje koji je sličan onome u ASCII-u – svaki znak jepredstavljen oktetom.

Kao dodatak ASCII znakovima, ISO Latin 1 sadrži različite znakove sa naglascima i drugaslova potrebna za pisma zapadne Evrope i neke posebne znakove. Ovi znakovi zauzimajumesta 160÷ 255 i prikazani su na slici 2.28.

Slika 2.28. ASCII - ISO 8859-1 - ISO latin 1

2.5.3. WINDOWS set znakova

Tokom razvoja Windowsa Američki Nacionalni Institut za Standarde (ANSI) je razvijaostandard koji je postao ISO 8859-1 "Latin". Microsoft je kreirao svoju kodnu stranicu1252 za zapadno evropske jezike na osnovi ranog nacrta ANSI predloga i to nazvao "ANSIkodna stranica". Kodna stranica 1252 je finalizovana pre nego ISO 8859-1 i to dvojenisu isti – 1252 je širi od ISO 8859-1. Kasnije je Microsoft počeo koristiti "ANSI" usmislu bilo koje Windows kodne stranice, za razliku od Unicode.

U ISO 8859-1 standardu, kodne pozicije 128 ÷ 159 su eksplicitno rezervisane za kon-trolne svrhe tj. odgovaraju kombinacijama bitova koje ne predstavljaju grafičke znakove.Takozvani Windows set znakova (WinLatin1 ili Windows kodna stranica 1252) koristi nekeod tih pozicija za ispisive znakove. Korišćenje kodnih znakova pod brojevima 128÷ 159u programu koji očekuje pravi ISO 8859-1 može izazvati različita ponašanja. Može sedesiti da se ti znakovi ignorišu, da izgledaju kao nešto što ima smisla ili da se interpretirajukao kontrolni znakovi.

2.5.4. ISO 8859 porodica

Postoji nekoliko sistema kodova znakova koji su ekstenzija ASCII-a na isti način kao što suto ISO 8859-1 i Windows set znakova. Sam ISO 8859-1 je deo veće porodice znakovnih

Tekst 39

kodova ISO 8859 čiji kodovi proširuju repertoar ASCII-a na različite načine sa različitimposebnim znakovima (koji se koriste u raznim jezicima i kulturama). Baš kao što ISO

8859-1 sadrži ASCII znakove i kolekciju znakova potrebnih za jezike zapadne (i severne)Evrope, tu je i ISO 8859-2 poznat i kao ISO Latin 2 (slika 2.29) koji je konstruisanslično za jezike srednje/istočne Evrope itd.

Slika 2.29. ASCII - ISO 8859-2 - ISO latin 2

ISO 8859 kodovi su izomorfni u sledećem smislu:

• kodni brojevi 0÷ 127 sadrže iste znakove kao i ASCII,

• mesta 128÷ 159 su neiskorišćena (rezervisana za kontrolne znakove),

• mesta 160÷ 255 su promenljivi deo koji se koristi različito u različitim izdanjima.

Iako se ISO 8859-1 koristio kao da je predodređen za kodiranje u mnogim primenama,on u principu nema neku posebnu ulogu. Očekivalo se da će ISO 8859-15 (poznat kaoISO Latin 9 zameniti ISO 8859-1, budući da sadrži politički važan simbol za evro AC,ipak se čini da nema veliku praktičnu primenu.

2.5.5. Unicode

Unicode je standard, od strane Unicode konzorcijuma, koji definiše repertoar znakova iset kodiranih znakova koji su u potpunosti kompatibilni sa ISO 10646 i obrazac za kodi-ranje znakova. ISO 10646 je uopšteniji i po prirodi apstraktniji, dok Unicode "namećedodatna ograničenja na implementaciju da bi osigurao uniforman tretman znakova nasvim platformama, programima i jezicima".

Unicode rešava sve one probleme oko jednoznačnosti, transformacija među različitimkodnim tabelama, raspoloživog opsega znakova koji su isticani u dosadašnjem tekstu.Unicode standard je prihvaćen od vodećih industrijskih firmi kao što su: Apple, HP, IBM,

40 Multimedija

Microsoft, Oracle i mnogih drugih. Unicode je potreban kod modernih standarda kao štosu: XML, Java, JavaScript, WML itd. Podržan je od strane mnogih operativnih sistemai svih savremenih čitača.

Slika 2.30. Unicode

Tekst 41

Unicode je prvobitno zamišljen kao 16-bitni kôd, ali proširen je tako da su trenutne kodnepozicije predstavljene celim brojevima u heksadecimalnom rasponu 0÷10FFFF (decimalno0÷1 114 111). Taj prostor podeljen je u 16-bitne "ravni". Do skoro, upotreba Unicode-aje uglavnom bila ograničena na "osnovnu višejezičnu ravan" (BMP) koja se sastoji odraspona 0÷ FFFF.

UTF-32 kodira svaki kodni broj kao 32-bitni celi broj, tj. kao 4 bajta. Ovo je vrloočito i jednostavno kodiranje. Sa druge strane, neefikasno je s obzirom na broj korišćenihbajtova. Ako se ima normalni engleski tekst ili neki drugi tekst koji sadrži samo znakoveiz tablice ISO Latin 1, dužina kodiranog niza bajtova je 4 puta duža u Unicode-u nego uISO 8859-1 kodu. UTF-32 se retko koristi, osim možda u internim operacijama.

UTF-16 predstavlja svaki kodni broj u osnovnoj višejezičnoj ravni kao dva bajta. Unicodese može kodirati na druge načine, kao što su sledeći:

• UTF-8 - kodovi znakova manji od 128 (efektivni ASCII repertoar) se predstavljaju"kao takvi", koristeći jedan oktet za svaki kôd (znak). Svi drugi kodovi su prikazaniprema relativno komplikovanoj metodi, tako da je jedan znak predstavljen kao nizod dva do četiri okteta, od kojih je svaki u rasponu 128÷255. Ovo znači, da u nizubajtova, oni koji su u rasponu 0 ÷ 127 direktno predstavljaju ASCII znakove, dokbajtove u rasponu 128÷ 255 treba interpretirati kao stvarno kodirane prezentacijeznakova.

• UTF-7 - svaki kôd znaka je predstavljen nizom jednog ili više okteta u rasponu0÷127. Većina ASCII znakova je tako predstavljena, svaki po jedan oktet, ali očitoje da neke vrednosti moraju biti rezervisane za upotrebu kao "okteti za beg", kojigovore da oktet zajedno sa određenim brojem okteta koji slede formira višeoktetnuprezentaciju jednog znaka. UTF-7 se vrlo malo koristi, dok se UTF-8 favorizuje zbogefikasnosti.

2.6. Jezici u svetu računara

U modernijim zapadnim jezicima reči se prave od simbola ili slova složenih zajedno, prezen-tujući kao celinu zvukove izgovorene reči. To nije tako u istočnjačkim jezicima, kao što sukineski, japanski i korejski (isto važi i za stare jezike Sumera, Egipta i Mesopotamije). Uovim jezicima ceo koncept bi mogao biti predstavljen simbolom od jedne reči, koji nemaneke veze sa konkretnim fonetskim zvukom.

Slova ili simboli jezika su njegov alfabet. U engleskom alfabet se sastoji od 26 romanskihili latinskih slova. U japanskom kanji alfabet ima više od 3 000 kana ili celih reči. Ruskialfabet, napravljen od ćiriličnih znakova zasnovanih na starom grčkom alfabetu, ima ot-prilike isti broj slova kao i romanski alfabet. Svi jezici imaju svoj posebni alfabet.

Najveći broj modernih alfabeta ima jedan veoma važan atribut – grafičke oblike i metodeza pisanje arapskih cifara 0, 1, 2, 3, 4, 5, 6, 7, 8 i 9. To je jednostavan sistem za predstav-ljanje decimalnih brojeva, što omogućava lako čitanje, pisanje, manipulaciju i proračun.Izražavanje i izračunavanje

16 + 32 = 48

42 Multimedija

je mnogo lakše u arapskim ciframa, nego u rimskim ili grčkim "brojevima":

XVI+ XXXII = XLVIII

ι ζ+ λβ = μη

Korišćenje arapske notacije se vremenom raširilo po svetu i zamenilo druge sisteme, iakose rimska notacija i danas koristi u zapadnom svetu u izvesnim formama i kontekstima.

Prevođenje ili dizajniranje multimedije (ili bilo kog računarski zasnovanog materijala) ujezik koji se razlikuje od onog za koji je prvobitno pisan zove se lokalizacija. Taj processe bavi svime – od redosleda mesec/dan/godina za izražavanje datuma do omogućavanjaposebnih alfabetskih znakova na tastaturama i štampačima. Čak i u mnogim zapadnimjezicima kojima je romanski alfabet zajednički, postoje posebnosti i često se zahtevajuposebni znakovi da prikažu posebne zvuke.

2.7. Uređivanje teksta - pojmovi, pravila, saveti

Prelom teksta – regulisanje prelaska u novi red. Cilj je postići podjednake razmake izme-đu reči na celoj stranici. U širem smislu pretvaranje čistog teksta u smislenu dizajniranucelinu sa svim grafičkim i ostalim elementima, na primer, knjigu.

Poravnanje (alignment), isključivanje teksta – uređivanje teksta počinje definisanjemizgleda poravnavanja levog i desnog ruba (ivice). Tipografi tu aktivnost nazivaju "isključi-vanje teksta". Naša praksa najčešće dizajnira tekst razvučen na "puni format" (justified)sa poravnatim stupcima sa leve i desne strane. Uobičajena su još tri načina isključivanja:"u levo" – sa leve strane je poravnat tekst, a sa desne strane je nazupčena linija (nere-dovan kraj), "u desno" – sa leve strane je neredovan početak, a desna strana je poravnata,"u sredinu" – i sa leva i sa desna je tekst "jednako nazupčen" sa centriranim redovima.Ova tri načina najčešće su slaganja bez deljenja reči sa jednakim belinama među rečimau celom tekstu.

Čitljivost slova (teksta): Ljudsko oko najbolje vidi slova na udaljenosti od približno25 ÷ 30 cm. Zato se ta udaljenost uzima kao daljina sa koje proveravamo da li su slovačitljiva. Najbolji odnos za čitanje slova je 1 : 100 (to je odnos udaljenosti oka od teksta iveličine slova, slika 2.31).

Slika 2.31. Najbolji odnos za čitanje slova je 1:100

Za idealnu čitljivost slovnih znakova uzima se 52 znaka po redu. Razmak između reči jeslovni znak i ubraja se u pomenuti broj od 52 znaka ili karaktera.

Tekst 43

Osnovni font/tekst (body text) je veličina i vrsta pisma u nekoj publikaciji kojim jerešena tipografija većine teksta. Zahteva se maksimalna čitljivost, funkcionalnost i pri-lagođenje sadržaju. Za knjižno čitanje sa udaljenosti oko 30 cm slova su najčešće veličineod 10 do 12 tačaka pismovnog reza bez proširenja, nisu kurzivna, nisu podebljana, nemajunikakve efekte naglašavanja ili ukrašavanja.

Neki fontovi su jako nečitljivi (na primer, klasična antiqua) i zato se oni nikada ne ko-riste u službenim dokumentima, već se tamo koriste slova koja su izrazito čitljiva i lakoprepoznatljiva - serifi (uspravni i još bitnije vodoravni potezi – male crtice na dnu ina vrhu fonta) vizuelno povlače crtu ispod reda teksta i time olakšavaju čitanje, odnosnopraćenje linije teksta. Opšte je pravilo da u telo teksta ide serif-ni font (postoje izuzeci).Čitljivost, takođe, jako zavisi od pismovnog reza. Slova koja koriste 20% prostora u čet-vercu su najbolja za čitanje.

Masna (debela - boldface) slova nisu čitljiva ako su mala pa se koriste samo za naslove ito jako velika. Slova sa manje od 20% zacrnjenja koriste se isključivo na glatkoj površini,jer im je čitljivost smanjena.

Kurzivna pisma su manje čitljiva pa se upotrebljavaju za naglašavanje, isticanje, prekidritma čitanja najčešće u osnovnom (body) fontu.

Sužena slova (condensed) – uža verzija fonta ili sužavanje slova. Koristi se u uređivanjuteksta kada na primer korisnik želi da "ugura" više slova u red ili stisne veći tekst naograničen prostor stranice.

Kontrast pozadine i slova (crna pozadina, bela slova) koristi se da se nešto jako istakne,jer oko nije naviknuto na takva slova.

Slika 2.32. Kontrasti (veliko – malo, usko – široko, geometrijsko – organsko,uspravno – nagnuto, svetlo – tamno)

Kod naslova i uopšte krupnijih slova ono što će svakako zatrebati jeste smanjivanje raz-maka između krupnijih slova. Razlog ovom zbijanju nalazi se u prirodi ljudske percepcije:sa porastom veličine slova standardni razmak između njih doživljava se jače nego kod sit-nijih slova. Jednostavnije rečeno, kod vrlo krupnih slova smanjivanje "spacinga" doprinosičitljivosti. Takođe, u naslov treba staviti, na primer, font Arial ili Chicago, a ne, na primer,Times ili Garamond, jer su ovi potonji "lagani" fontovi i koliko god da se povećaju, oni

44 Multimedija

će i dalje bit "lagani" i neće biti u stanju privući čitaočevu pažnju kao Chicago ili Arialkoji su poprilično "teški (masni)" fontovi.

Štampana slova (small caps) – sa stanovišta klasične tipografije upotreba velikih slovau osnovnom tekstu je nepoželjna pojava. Velika slova skreću pažnju i odskaču od ostatkateksta tako da njihova nekritička primena ometa čitanje. Velika slova se, međutim, povre-meno moraju upotrebiti za skraćenice, lična imena ili prezimena, uvodne reči u pasusu...Da bi se pojavni oblik velikih slova uskladio sa malim slovima upotrebljavaju se štampanaslova ili umanjeni verzal (engleski termin je small caps). Štampana slova po obliku odgo-varaju velikim slovima (verzalu), a po veličini malim slovima (kurentu). Ona nisu dobijenaobičnim smanjivanjem velikih slova jer su takve varijante small caps slova primetno tanjeod ostatka teksta, a nema razloga da se koriste slovni oblici koji bespotrebno odudarajuod osnovnog teksta. Prava štampana slova su specijalno dizajnirani karakteri kod kojih jedebljina poteza i serifa, kao i veličina čitavih slova, proračunata tako da bude usklađenasa malim slovima. Upotreba štampanih slova je jedan od dokaza tipografske profinjenostikoja osigurava vrhunsku čitljivost teksta.

Linije: u tipografiji se upotrebljavaju kao okviri, za podcrtavanje, kao ukrasi i kao sigur-nosne linije. Za podcrtavanje nekih važnih delova teksta se koriste ravne i valovite linije.Sigurnosne linije se koriste u službenim dokumentima. Ako se preko te linije napiše tekst,menjanjem teksta se menjaju i linije pa se zato te linije koriste za proveru autentičnostinpr. vlastoručnog potpisa.

Ukrasne linije su tipične za nacionalna obeležavanja. Uz njih (ili u njih) se mogu staviti ineki ukrasni elementi (zvezdice, trouglići,..).

Inicijalno slovo (drop cap) – početno verzalno slovo odlomka ili paragrafa. Obično je toslovo veće ili iz drugog fonta ili je to slovo iz ukrasnog pisma. Nastoji se naglasiti početaknovog sadržaja.

Predznak (bullet) – tačka, crtica, kvadratić ili drugi poseban karakter koji se stavlja napočetak reda, služi za nabrajanje, naglašavanje novog podnaslova, naglašavanje sledećegreda sa izuzetnim sadržajem.

Uniformnost dizajniranja dokumenta postiže se upotrebom fontova iz iste porodice. Po-jedine tipografske kuće ili korporacije naručuju vlastitu familiju fonta. I pojedine grupedizajnera komuniciraju na način da definišu porodicu fonta kao "tipografija". Pri tomegovore o "osnovnoj tipografiji", "sekundarnoj tipografiji" ...

2.8. Alati za dizajniranje i uređenje fontova

Korisnik može da koristi posebne alate za editovanje (uređenje) fontova za pravljenje sop-stvenog fonta, tako da može tačno da prenese ideju ili grafički osećaj. Sa ovim alatima,profesionalni tipografi mogu da prave upečatljive likove teksta i prikaza. Grafički dizajne-ri, izdavači i reklamne agencije mogu da prave brze varijacije na temu postojećih likovafontova.

Povremeno će multimedijalni projekti zahtevati primenu posebnih znakova. Sa odgovara-jućim alatima korisnik može sâm da napravi specijalne znakove i da ih smesti umesto

Tekst 45

nekorišćenih znakova u proširenom skupu znakova. Postoji mogućnost i da se u font uba-ci i nekoiiko prilagođenih verzija logotipa naručioca ili neki drugi posebni simboli koji surelevantni za sadržaj i temu.

2.8.1. Fontographer

Fontographer, koji isporučuje firma Fontolab, Ltd. lociran na adresi www.fontlab.com,predstavlja specijalizovani grafički editor i za Macintosh i za Windows. Može da se koristiza pravljenje PostScript, TrueType ili bitmapiranih fontova za Macintosh, Windows, DOS,NeXT i Sun radne stanice. Dizajneri, takođe, mogu da menjaju postojeće slovne likove,umeću crteže unutar PostScripta, automatski pretvaraju skenirane slike u crteže i pravedizajn od nule. Primer ekrana u Fontographeru dat je na slici 2.33.

Slika 2.33. Alat za dizajniranje i editovanje fontova – Fontographer

U osobine Fontographera ubrajaju se i crtanje slobodnom rukom za pravljenje profesional-nih i preciznih unutrašnjih i spoljnjih okvira crteža kaligrafskih i skript znakova, korišćenjemmiša ill alternativnih ulaznih metoda (olovke osetljive na pritisak, digitalizujući tableti itable za crtanje). Fontographer dozvoljava stvaranje višestrukih dizajna fontova od dvapostojeća lika fonta, a može da pravi lakše ili teže fontove izmenom čitavog lika fonta.Fontographer za Windows otvara svaki PostScript Type 1 i TrueType font za PC iomogućava stvaranje kondenzovanih, proširenih i okruglih verzija istog fonta ili izmenubilo kog od tih fontova, u skladu sa dizajnerskim željama. Jedan znak, nekoliko znakova iliceli fontovi mogu biti skalirani, rotirani i deformisani da bi se pravili novi i jedinstveni likovi

46 Multimedija

fontova. Metrički prozor omogućava kompletnu kontrolu nad širinom znaka, razmakom,uvlačenjem i kernovanjem.

2.9. Hipermedija i hipertekst

Multimedija (kombinacija teksta, slike i audio elemenata u jedinstvenu kolekciju ili pre-zentaciju) postaje interaktivna multimedija kada se korisniku dodeli neka kontrola nad timkoja se informacija gleda i kada se gleda. Interaktivna multimedija postaje hipermedijakada njen dizajner dâ strukturu povezanih elemenata kroz koje se korisnik kreće i sa ko-jima je u interaktivnoj vezi.

Kada hipermedijski projekat sadrži velike količine tekstualnog ili simboličkog sadržaja, tajsadržaj može biti indeksiran, a njegovi elementi povezani da bi se omogućilo brzo elektron-sko vraćanje povezanih informacija. Kada je reč indeksirana ili povezana odgovorajućimključem sa drugim rečima, onda je reč o sistemu hiperteksta. Tekstualni deo ovog izrazapredstavlja sadržaj i značenje projekta, a ne grafičku prezentaciju teksta. World Wide

Web nije ništa drugo nego hipertekst.

Kada tekst "oživi" u računaru umesto na štampanim stranama, mogućnost računara dabrzo i efikasno obrađuje može da se upotrebi tako da tekst postane pristupačniji i smis-leniji. Tekst, onda, može da se nazove hipertekst. Pošto su reči, sekcije i misli povezane,korisnik može da se kreće kroz tekst na nelinearan način, brzo i intuitivno.

Koristeći sisteme hiperteksta, korisnik može elektronski da pretraži ceo tekst knjige naračunaru, da pronađe reference na neku reč i da odmah vidi stranu gde je reč pronađena.Pored ovoga, može da pravi komplikovana logička pretraživanja (koristeći Bulove izrazekao što su AND, OR, NOT i BOTH) da bi se otkrio položaj povezanih reči. Treba napomenutida mogu i celi dokumenti da se "vezuju" na druge dokumente.

Pošto hipertekst predstavlja organizovanje unakrsnog povezivanja reči ne samo sa drugimrečima, nego i na srodne slike, video spotove, zvukove i ostale vrste prikaza, hipertekstčesto postaje dodatna osobina sveukupnog multimedijalnog dizajna. Kada se interakcija iunakrsno povezivanje dodaju multimediji, a navigacioni sistem je nelinearan, multimedijapostaje hipermedija.

2.9.1. Prednosti hiperteksta

U potpuno indeksiranom sistemu hiperteksta sve reči mogu odmah biti pronađene. Sledijedan jednostavan primer. Pretražuje se velika baza podataka za reč boats (čamci) i došlose do prevelikih 1 743 referenci ili pogodaka – između njih Noah’s Ark (otvoren čamac uvodi), televizijske komedije situacije (The Love Boat), politički kriticizam ministara kojisu promenili "status quo" (rocked the boat - zanjihali čamac), ministre koji su bili glupi(missed the boat - promašili čamac) i prilozi za Božićnu večeru (Grandmother’s gravyboat - bakin nadev sa sosom). Sužavanjem pretraživanja i traženjem boats i water (voda)i kada su obe reči pomenute na istoj strani – ovog puta se dobija 287 pogodaka. Boats,water i storms (oluje) daju 36 pogodaka, a boats, water, storms i San Francisco daju jedanjedini pogodak. Sa više od 1 000 pogodaka, korisnik je izgubljen. Sa jednim pogotkom,

Tekst 47

ima se nešto! Međutim, i jedan jedini pogodak ne garantuje korisniku da će dobiti bašono što traži i što mu treba.

Moć ovakvih sistema za pretraživanje i dobavljanje koju daje računar za ogromne količinepodataka je velika, ali je jasno da ona mora biti kanalisana na svrsishodne načine. Vezeizmeđu reči i grupa informacija moraju biti dizajnirane da imaju smisla. Mora se zauzetistav o vezama i načinu na koji je informacioni sadržaj organizovan i raspoloživ za koris-nike. Filtere, kroz koje se ogromne količine podataka propuštaju, moraju "prizemljiti" ioblikovati oni koji dizajniraju sistem za pristup.

Multimedijalni dizajner upravlja mehanizmima za filtriranje u mulumedijalnom projektu.Na primer, proizvođač koji predstavlja svoje proizvode kroz interaktivnu multimediju možepredati mnoštvo informacija i prodajne "elemente" u ruke korisnika, uključujući pozadinskeinformacije, odgovarajući marketinški materijal, cenovne statistike i tehničke podatke.Dizajn projekta će, naravno, biti pristrasan – prodati što više proizvođačevih proizvoda igenerisati više profita; ta pristrasnost se podrazumeva i razume u ovakvim okolnostima.Kada se pretpostavke u bilo kojoj informaciji pokažu kao pogrešne, kada se fiktivni ilinekompletni podaci prikazuju kao činjenice, prednosti i snaga multimedije i hipermedijemogu imati svoj najpogubniji uticaj.

2.9.2. Upotreba hiperteksta

Napravljeni su posebni programi za upravljanje informacijama i hipertekstom da bi seelektronski tekst, slike i drugi elementi predstavili u obliku baza podataka. Napravljenisu komercijalni sistemi velike i komplikovane mešavine teksta i slika – na primer, detaljanpriručnik za opravke za avion Boeing 747, katalog delova za turbine Pratt & Whitney

i elektronski referentni leksikoni za pravnike i biblioteke. Takve mašine za pretraživanje seuveliko koriste na Webu, gde softverski roboti posećuju milione Web stranica i indeksirajukompletne sajtove. Hipertekstualne baze podataka zasnivaju se na sopstvenim indeksnimsistemima koji pažljivo pretražuje sav tekst i prave veoma brze unakrsno-referentne indeksekoji pokazuju na položaj konkretnih reči, dokumenata i slika. Hipertekstualni indeks možebiti veći za 50 do 100 odsto od veličine originalnog dokumenta. Indeksi su od suštinskevažnosti za brzo pretraživanje. Mašina za pretraživanje Google pravi 247 000 000 pogodaka(slika 2.34) za 0, 15 sekundi!

Slika 2.34. Pretraživač Google i upit "multimedia"

48 Multimedija

2.9.3. Pretraga po rečima

Iako dizajner multimedijalne baze podataka pravi pretpostavke, on će dati korisniku ialate i adekvatan interfejs da proveri te pretpostavke. Pomoću interfejsa korisnici moguda pretražuju baze po rečima da bi našli vrlo specifične kombinacije. Slede tipični metodiza pretragu po rečima u hipertekstualnom sistemu:

• Kategorije: Biranje ili ograničavanje dokumenata, stranica, polja teksta u okvirukojih treba tražiti reč ili reči.

• Veza između reči: Pretraživanje po rečima po njihovoj opštoj sličnosti i redosledu;na primer, korisnik može da traži party (zabava) i bear (pivo) samo kada su na istojstrani ili u istom pasusu.

• Susedstvo: Traženje reči koje su jedna iza druge, obično u izrazima ili ličnimimenima – na primer, pronaći pauka widow (udovica) samo ako je pre nje reč black(crna).

• Naizmeničnost: Primena kriterijuma OR da se traže dve ili više reči, kao što subacon (slanina) i eggs (jaja).

• Pridruženost: Primena kriterijuma AND da se traže dve ili više reči, kao što su skiff(čamac jednosed), tender (izviđački brod) i boat (čamac).

• Negacija: Primena kriterijuma NOT da se isključivo traže reference na reč koja nijepovezana sa njom – na primer, pronaći sva pojavljivanja reči paste kada reč librarynije prisutna u istoj rečenici.

• Skraćenje: Traženje reči sa bilo kojim od mogućih sufiksa – na primer, da bi sepronašla sva pojavljivanja reči girl i girls može se zadati nešto nalik na girl#. Vi-šestruki znakovni sufiksi se mogu nalaziti pomoću još jednog znaka, tako da geo*može dati geo, geology i geometry, ali i George.

• Umetnute reči: Pretraživanje po rečima koje se nalaze između delova što bi nor-malno bile susedne reči – na primer, srednje ime ili inicijal u ličnom imenu.

• Frekvencija: Pretraživanje po traženim rečima, zasnovano na tome koliko se čestopojavljuju – što se više puta izraz pomene u tekstu, to je dokumenat relevantniji zaovaj izraz.

Glava 3

Zvuk

Zvuk je verovatno najuzbudljiviji deo multimedije. To je univerzalan "govor" na bilo komjeziku, od šapata do zaglušujuće buke mlaznog aviona u poletanju. Pruža zadovoljstvoslušanja muzike, a može i da iznenadi senzacionalnim specijalnim efektima ili da utičena raspoloženje iz "drugog plana". Način na koji se koristi zvuk može da označi razli-ku između obične i profesionalne, spektakularne multimedijalne prezentacije. Pogrešnaupotreba zvuka, međutim, može da upropasti projekat.

3.1. Prednosti zvuka

Kada nešto vibrira u vazduhu krećući se napred – nazad (na primer, konus zvučnika),stvaraju se talasi pritiska. Ovi talasi se šire kao nabori vode od kamička bačenog u bazen,a kada dosegnu bubne opne korisnika, korisnik će osetiti promene pritiska ili vibracije,kao zvuk. U vazduhu, talasanja se šire brzinom od 1 225km

hili 1Mah na nivou mora.

Zvučni talasi se menjaju zavisno od pritiska zvuka (amplituda) i frekvencije – visine zvuka.Mnoštvo zvučnih talasa spojenih u jedno čini "zvučnu oblast" simfonijske muzike, govoraili, jednostavno, buke.

Akustika je grana fizike koja proučava zvuk. Nivoi zvučnog pritiska (glasnoća ili jačina)mere se u decibelima (dB); ta mera je, zapravo, proporcija između izabrane referentnetačke na logaritamskoj skali i nivoa koji se stvarno oseća. Kad se učetvorostruči snagazvuka, to je povećanje od samo 6dB; kada se napravi 100 puta jača buka, uvećanje udB nije stotinu puta, nego samo 20dB. Ova skala ima smisla, jer ljudi primaju (registru-ju) nivoe zvučnog pritiska kroz veoma širok dinamički raspon. Skala decibela sa nekimprimerima prikazana je u tabeli 3.1; vidljiva je veza između snage (merene u vatima) i dB.

Zvuk je energija, kao talasi koji se lome o peskovitu plažu i prejak zvuk može za stalnooštetiti delikatne mehanizme za prijem iza bubnih opni, što obično smanjuje sluh naraspon od 6 kHz. U terminima jačine ono što korisnik čuje subjektivno nije i ono što čujeobjektivno. Percepcija glasnosti (jačine) zavisi od frekvencije – na nižim frekvencijamazahteva se više snage kako bi se isporučila ista primljena zvučnost, kao i za zvuk u srednjimili u višim frekventnim rasponima. Zvuk se može više osetiti, nego čuti. Na primer, kada jeambijentalni nivo buke viši od 90dB na radnom mestu, ljudi obično prave veći broj grešaka

50 Multimedija

u obavljanju osetljivih zadataka – naročito ako je u buci prisutna neka visoka frekvencija.Kada je nivo buke iznad 80dB, potpuno je nemoguće koristiti telefon. Eksperimenti unaseljenim oblastima pokazali su da izvor buke od 45dB ne proizvodi nikakvu reakcijukod suseda, od 45 do 55dB prouzrokuje sporadične žalbe, od 50 do 60dB žalbe na svestrane, od 55 do 65dB pretnje da će okolina reagovati, a na više od 65dB nastaje žestokareakcija okoline. Ovo istraživanje je obavljeno oko 1950. godine i danas je koristan vodičza rok muzičare i za stvaraoce multimedije.

Tabela 3.1. Uobičajeni nivoi zvuka u decibelima i vatima

U akustici ima još mnogo toga, osim jačine i visine tona. Upotreba zvuka u multimedi-jalnim projektima neće verovatno zahtevati visokospecijalizovano poznavanje harmonika,intervala, sinusnih krivih linija, nota, oktava i fizike akustike i vibracija, ali stvaralac mul-timedijalnog projekta bi morao da zna:

• kako se proizvodi zvuk,

• kako se zvuk snima i menja na računaru i

• kako se zvukovi ugrađuju u muliimedijalni projekat.

3.2. Multimedijalni sistemski zvuci

Korisnik može odmah da koristi zvukove i na multimedijalnom PC-u pod operativnimsistemom Windows i na Macintoshu, jer su bipovi i zvuci upozorenja raspoloživi čim seinstalira operativni sistem. Treba otvoriti Sounds Control Panel kako bi se preslušaliovi zvuci i kako bi se postavili željeni ili napravili novi, prilagođeni zvuci (slika 3.1).

Pod operativnim sistemom Windows sistemski zvuci su WAV datoteke, a nalaze se u di-rektorijumu Windows > Media. Na raspolaganju su mnogobrojni sistemski zvuci, a ko-risnik može da dodeli ove zvuke sistemskim događajima, kao što su startovanje opera-tivnog sistema Windows, upozorenja iz drugih aplikacija ili klik van otvorenog dijaloga

Zvuk 51

(što prouzrokuje podrazumevani bip u Windowsu). Treba napomenuti da mogu da seprave i šeme zvukova i da se odabere posebna šema, prema raspoloženju. Korisnik možeda doda svoje zvučne datoteke i da ih instalira da se aktiviraju prilikom nekog sistemskogdogađaja – treba postaviti WAV datoteke u direktorijum Windows > Media i unutar SoundControl Panel ih odabrati.

Slika 3.1. Kontrolni panel za zvuk i prateće efekte

Unutar operativnog sistema OS X na Macintosh-u korisnik može jedino da menja sistemskizvuk upozorenja. Korisnik može i ovde da doda svoje zvučne datoteke i da ih instalira dase aktiviraju prilikom pomenutog sistemskog događaja – treba postaviti AIF datoteke udirektorijum Library > Sounds i unutar Sound Preference Panel ih odabrati.

3.3. Digitalni audio

Digitalni audio se kreira kada se prezentuje zvučni talas brojevima – to je proces poznatpod nazivom digitalizacija. Korisnik može da digitalizuje zvuk sa mikrofona, sintisajze-ra, postojeće snimljene trake, "živog" radija i televizije, kao i sa popularnih CD-ova iliDVD-eva. Praktično, korisnik može da digitalizuje zvuk sa bilo kog izvora, prirodnog iliveštačkog.

Digitalizovani zvuk je uzorkovani zvuk. Svakog n-tog delića sekunde uzorak zvuka seuzima i snima kao digitalna informacija u bitovima i bajtovima. Kvalitet ovog digitalnogzapisa zavisi od toga koliko često se uzimaju uzorci (brzina uzorkovanja ili frekvencija,merena u kilohercima - kHz ili hiljadama uzoraka u sekundi) i sa koliko se brojeva prezen-tuje vrednost svakog uzorka (veličina uzorka, bitdepth, rezolucija ili dinamički opseg).Što se češće uzima uzorak i što se više podataka zapamti o uzorku, biće finija rezolucijai veći kvalitet uhvaćenog zvuka prilikom reprodukcije. Pošto je kvalitet zvuka baziran na

52 Multimedija

kvalitetu uređaja za snimanje, a ne od kvaliteta uređaja za reprodukciju, za digitalni audiose kaže je nezavisan od uređaja.

Tri frekvencije uzorkovanja se najčešće koriste u multimediji i to su sledeće frekvencijeCD kvaliteta – 44, 1 kHz, 22, 05 kHz i 11, 025 kHz. Veličine uzoraka su 8 ili 16 bitova.Treba napomenuti da što je veća veličina uzorka, prikupljeni podaci će bolje da opišusnimljeni zvuk. Osmobitni uzorak daje 256 jednakih jedinica za opis dinamičkog raspona(amplitude) – nivo zvuka u tom trenutku – od dela "uhvaćenog" zvuka. Sa druge strane,šesnaestobitna veličina uzorka daje 65 536 jednakih jedinica za opis dinamičkog raspona.Delovi analognog talasnog oblika se uzorkuju u različitim frekvencijama (slika 3.2), a svakidiskretni uzorak je onda zapamćen kao 8 ili kao 16 bitova podataka.

Slika 3.2. Rekonstruisanje talasnog oblika – nemoguće je obaviti kvalitetnurekonstrukciju ako je frekvencija uzorkovanja mnogo mala

Vrednost svakog uzorka se zaokružuje na najbliži ceo broj (kvantizacija), a ako je ampli-tuda veća od raspoloživih intervala, nastupa odsecanje na vrhu i dnu talasa (slika 3.3).Kvantizacija može da napravi neželjenu pozadinsku buku, a odsecanje može oštro daizobliči zvuk.

Slika 3.3. Kvanitozovanje i odsecanje talasa

Zvuk 53

3.3.1. Priprema digitalnih audio datoteka

Priprema digitalnih audio datoteka je prilično jednostavna. Ako korisnik ima analogneizvore materijala – muziku ili zvučne efekte koje je snimio na analognom mediju poputkasete – prvi korak je da se digitalizuje analogni materijal snimanjem u digitalni medijkoji računar može da pročita. U većini slučajeva to prosto znači reprodukovanje zvuka sajednog uređaja, kao što je kasetofon, pravo u računar, upotrebom odgovarajućeg softveraza audio digitalizaciju.

Treba se skoncentrisati na dva bitna aspekta pripreme digitalnih audio datoteka:

• Balansiranje potrebe za visokim kvalitetom u odnosu na prateću veličinu datoteke.Bolji kvalitet obično znači da je i veća datoteka, koja zahteva duže vreme da se"skine" sa Interneta i više prostora da se smesti na CD ili DVD.

• Postavljanje pogodnih nivoa snimanja da se dobije dobar, čist snimak.

Veličina datoteke i kvalitet

Mera uzorkovanja određuje frekvenciju snimka. Uzorkovanje na višim nivoima (kao što su44, 1 kHz ili 22, 05 kHz) sigurnije hvata više frekvencije zvuka. Audio rezolucija (8-bitnaili 16-bitna) određuje preciznost sa kojom se zvuk može digitalizovati. Upotreba većegbroja bitova za veličinu uzorka daje snimak koji više zvuči kao original.

Stereo snimci su realističniji, zato što ljudi imaju dva uveta. Mono snimci su dobri, alizvuče "ravno" i neinteresantno kada se porede sa stereo snimcima. Logično, stereo snimcizahtevaju dva puta više prostora, nego mono datoteke za isto vreme reprodukcije.

U tabeli 3.2 date su neke česte frekvencije uzoraka i rezolucije, sa pripadajućim veličinamadatoteka.

Evo formula za određivanje veličine (u bajtovima) digitalnog snimka. Za mono snimak:

FU× TS(sek)× R(bit)

8× 1

gde su sledeće oznake u gornjoj formuli: FU - frekvencija uzorkovanja, TS(sek) - trajanjesnimka u sekundama i R(bit) - rezolucija u bitovima.

Za stereo snimak:

FU× TS(sek)× R(bit)

8× 2

Formula za snimak od 10 sekundi na 22, 05 kHz u osmobitnoj rezoluciji glasi:

22050× 10× 8

8× 1 = 220 500 bajtova

Formula za snimak od 10 sekundi na 44, 1 kHz u šesnaestobitnoj rezoluciji glasi:

44100× 10× 16

8× 2 = 1 764 000 bajtova

54 Multimedija

Tabela 3.2. Snimanje digitalnog audia u trajanju od jednog minutana uobičajenim frekvencijama i rezolucijama

Formula za mono snimak od 40 sekundi na 11 kHz u osmobitnoj rezoluciji glasi:

11000× 40× 8

8× 1 = 440 000 bajtova

Za potrošački nivo audio CD diskovi se snimaju kao stereo sa uzorkovanjem od 44, 1 kHz

i 16-bitnom rezolucijom.

Uređivanje digitalnih snimaka

Kada je snimak načinjen, gotovo je sigurno da će morati da se uređuje (edituje). Naslici 3.4 prikazan je program Audicity koji je besplatan i može da radi na operativnimsistemima Windows, Macintosh i Linux. Ovim alatom može da se prave zvučni snimci ida se vrše digitalni miksevi. Sledi opis osnovnih operacija uređenja koje su potrebne većinimultimedijalnih stvaralaca.

Višestruke staze. Omogućeno je editovanje i kombinovanje više staza (za zvučne efekte,glas naratora, muziku itd.) i njihovo spajanje u staze i eksportovanje kao "finalni miks"u jednu audio datoteku i to je izuzetno važno.

Trimovanje ili odsecanje. Uklanjanje praznog prostora sa početka i svakog nepotrebnogdodatnog vremena sa kraja snimka je prvi zadatak u editovanju zvuka. Odsecanje čak i

Zvuk 55

malog broja sekundi može da napravi ogromne razlike u veličini datoteka. Odsecanje se,obično, postiže prevlačenjem kursora miša preko grafičke prezentacije snimka i izboromkomandi iz menija (na primer, Cut, Clear, Erase ili Silence).

Slika 3.4. Osnovni ekran programa Audicity

Preplitanje i sastavljanje. Korišćenjem istih alata kao i za trimovanje, moguće je odstra-niti dodatnu buku koja neminovno ulazi u snimak. Čak i u najkontrolisanijim studijskimuslovima ponekad će biti potrebna ovakva intervencija. Osim toga, možda će biti potrebnoda se sastavi duži snimak isecanjem i lepljenjem mnoštva malih snimaka.

Podešavanje jačine. Ako korisnik pokuša da sastavi 10 različitih snimaka u jedan, malesu šanse da će svi segmenti biti iste jačine. Da bi se dobio konzistentan nivo jačine, trebaoznačiti sve podatke u datoteci i povisiti ill sniziti ukupnu jačinu za izvestan iznos.

Slika 3.5. Normalizovanje nivoa zvuka u audio datoteci

Najbolje je upotrebiti zvučni editor za normalizivanje sastavljene audio datoteke na odre-đeni nivo – na primer, 80 do 90% maksimuma (bez trimovanja) ili na oko −16dB. Bez

56 Multimedija

normalizacje finalni snimak će se reprodukovati ili isuviše jako ili isuviše slabo. Trebalobi napomenuti da ni profesionalci ne mogu da izostave ovaj važan korak. Na slici 3.5prikazan je proces normalizovanja u programu Sound Forge.

Konverzija formata. U nekim slučajevima softver za digitalno editovanje može da čitaformat različit od onog koji je potreban za prezentaciju ili autorski program. Najveći brojprograma za editovanje zvuka će sačuvati datoteke u željenom formatu koji multimedijalnisistem može da pročita.

Ponovno uzorkovanje. Ako je korisnik snimio i editovao zvuk na 16-bitnim frekven-cijama, ali koristi niže frekvencije i rezolucije u projektu, morao bi ponovo da uzorkujedatoteku. Taj proces će uštedeti znatne količine prostora na disku.

Fade-in i Fade-out. Najveći broj programa nudi mogućnost obavijanja zvuka, što jekorisno za duge sekcije za koje korisnik želi da se lagano pojačavaju (fade-in) ili smanjuju(fade-out) po jačini. Obavijanje je vrlo važno da se "ispeglaju" sâm početak i kraj zvučnedatoteke.

Izjednačavanje. Neki programi nude digitalno izjednačavanje (EQ) kojim se menjafrekvencija sadržaja, tako da snimak zvuči "svetlije" ili "tamnije".

Vremensko razvlačenje. Napredniji programi omogućavaju izmenu (u vremenu) zvučnedatoteke, bez promene visine tona. To može biti vrlo korisno, ali treba paziti da većinaalgoritama za širenje može ozbiljno da degradira audio kvalitet datoteke ako se dužinapromeni za više od nekoliko procenata u svakom pravcu.

Digitalna obrada signala. Neki programi omogućavaju obradu signala specijalnim efek-tima. Mogućnost da se zvučni izvor nadogradi efektima može mnogo da doprinese pro-jektu. Stvaranje okoline stavljanjem zvuka u neku sobu, hol ili u katedralu može da unesedubinu i da doda dimenziju projetku. Ali, ne sme se preterivati sa zvučnim efektima!Kada se obradi i izmiksuje, snimak ne može dalje da se menja; uvek treba snimiti originalda opet može da se menja ako korisnik nije zadovoljan.

Invertovanje zvuka. Još jedna jednostavna manipulacija je da se invertuje sve ili deodigitalnog audio snimka. Zvuci, naročito izgovoreni dijalozi, mogu napraviti nadrealneefekte kada se reprodukuju unatrag.

3.4. Kreiranje MIDI audia

Komponovanje originalne muzike može biti jedan od najkreativnijih i najzahvalnijih as-pekata pravljenja multimedijainog projekta, a MIDI (Musical Instrument Digital Interface)je najbrži, najlakši i najfleksibilniji alat za to. Ipak, pravljenje originalne MIDI partitureje težak posao. Poznavanje elemenata muzike, sposobnost da se svira klavir i mnogodobrih ideja su tek preduslovi za pravljenje dobre partiture; bez toga, treba puno vremenai muzičke veštine da se radi sa MIDI-em.

Da bi se napravila MIDI kompozicija, potreban je softver za sekvenciranje (kao onajkoji je prikazan na slici 3.6) i sintetizator zvuka (obično je ugrađen u zvučnu karticu PCračunara, ali isto tako i dodatna kartica). MIDI tastatura je, takođe, izuzetno korisna,

Zvuk 57

jer pojednostavljuje komponovanje, mada nije neophodna za reprodukciju i funkcioniše iako ne postoji ugrađen sopstveni sistem za sekvenciranje.

Slika 3.6. Softver za sekvenciranje

Softver za sekvenciranje omogućava snimanje i menjanje MIDI podataka i kvantifikovanjenota kako bi se ispravile vremenske neusaglašenosti. Softver snima akcije korisnika naMIDI tastaturi (ili na nekom drugom MIDI uređaju) u realnom vremenu i reprodukovaćebaš ono što je odsvirano na tastaturi; softver, takođe, može da odštampa lepo sređenukopiju nota na papir.

Pravo mesto za MIDI u multimedijalnom radu može da bude kao proizvodni alat, umestomedija za disiribuciju. MIDI je najbolji način da se kreira originalna muzika za multi-medijalne projekte, pa ga treba koristiti za dobijanje na fleksibilnosti i kreativnoj kontroli.Kada je muzika kompletirana i odgovara projektu, trebalo bi je zaključati radi distribucijepretvaranjem u digitalne audio podatke.

Mnoge aplikacije za sekvenciranje omogućavaju štampanje MIDI nota na papiru. Pro-gram AudioScore nije samo program za sekvenciranje – može da se koristi i u suprotnomsmeru, što znači da će korišćenjem skenera prepoznati notaciju i pretvoriće note u MIDIdatoteke u računaru (slika 3.7).

3.5. Formati za audio datoteke

Kada se pravi multimedija, korisnik će morati da se pozabavi formatima datoteka i prevo-diocima za tekst, zvuk, slike, animacije i digitalne video spotove. Format zvučne datoteke

58 Multimedija

je poznata metodologija za organizovanje bitova i bajtova digitalizovanog zvuka u dato-teku podataka. Struktura datoteke mora biti poznata, naravno, pre nego što podaci budusnimljeni i kasnije učitani u računar da bi bili menjani i/ili odsvirani kao zvuk.

Slika 3.7. Program AudioScore pretvara note u MIDI datoteke

Fenomen digitalnih audio formata koji su nastali za upotrebu na računarima tu je manje oddesetak godina. Uprkos tome, uspio je iz temelja da izmeni sve aspekte muzičke kulture.Popularnost MP3 datoteka je neosporna. Ovaj format je brzo osvojio Internet zajednicuzbog male veličine datoteka i zbog dobrog kvaliteta zvuka.

3.5.1. Vrste audio formata

Kao što je to slučaj sa mnogobrojnim grafičkim formatima koji definišu na koji način sezapisuju i čuvaju slike, formati audio datoteka koriste razne načine za skladištenje po-dataka. Korisnik najčešće može da se sretne sa tri vrste audio datoteka: WAV, MP3 i WMA.

Razlog za relativno velik broj različitih formata za zapis zvuka leži u činjenici da je zvukmemorijski vrlo zahtevan. Skladištenje informacija o nekom zvuku zahteva velike količinepodataka. Neki formati datoteka, poput WAV formata unutar operativnog sistema Win-dows, ne koriste nikakvo komprimovanje (sabijanje), pa su datoteke velike i neprimenjiveza upotrebu na Internetu ili za slanje elektronskom poštom.

Drugi formati datoteka koriste komprimovanje ili sabijanje. Sabijanje može biti izvedenona način da nema gubitka informacija (lossless sabijanje). Formati datoteka koji nudeovakve algoritme sabijanja uvek imaju manju uspešnost, pa su datoteke veće. Prednosttakvih datoteka je taj da je zvuk uvek moguće rekonstruisati u originalnom obliku. Danas

Zvuk 59

su najpopularniji formati koji koriste tehniku sabijanja zvuka sa "gubitkom nekih informa-cija". Prilikom takvog sabijanja ne čuvaju se svi podaci o zvuku, već algoritam za sabijanjeodbacuje manje važne podatke koji predstavljaju zvukove koje ljudsko uvo ne bi mogloda čuje. Konačna veličina takvih datoteka mnogo je manja u odnosu na nekomprimovanedatoteke (ponekad i do 20 puta). Primer takvog zapisa je MP3.

Svaki tip računarske platforme i operativnog sistema koristi svoj jedinstven format audiozapisa za reprodukciju i snimanje. Neki od najpoznatijih audio formata koji se koriste naInternetu su: WMA, MP3 itd. Sledi spisak audio formata koji se najčešće sreću:

• MIDI (.MID) – MIDI format koji je nezavisan od platforme;

• Wave (.WAV) – format za digitalni audio unutar operativnog sistema Windows;

• Audio Interchange File (.AIF) – format za digitalni audio unutar operativnog sistemaMacintosh-a;

• Sun Audio (.AU) – format za digitalni audio firme Sun Microsystems;

• Audio CD (.CDA) – format zvuka na audio CD-u;

• Windows Media Audio codec (.WMA) – komprimovan format za digitalni audiounutar operativnog sistema Windows;

• MPEG Audio Layer 3 (.MP3) – komprimovan format za digitalni audio koji je sveviše u upotrebi.

Format .WAV

WAV (od engleske reči wave – talas) je matični format zvuka u operativnom sistemuWindows. Sve Windows aplikacije koje imaju ikakve veze sa zvukom znaju da rade saWAV datotekama. Nekomprimovane WAV datoteke mogu da budu vrlo velike. Za jednuminutu muzike u WAV formatu, smeštene u CD kvalitetu, biće više od 10Mb podatakana disku. Za skladištenje jednog muzičkog CD-a na hard disku u WAV formatu bi bilopotrebno oko 600Mb. Čak i uz današnje kapacitete hard diskova ovo je vrlo mnogo.

Format .MP3

MP3 je kraći naziv za algoritam kodiranja zvuka čije je puno ime MPEG-1 Layer 3. Skra-ćenica MPEG dolazi od Moving Pictures Experts Group što označava "grupu stručnjaka zapokretne slike", koja je deo Međunarodne organizacije za standarde ISO.

Jedna od najvećih prednosti formata MP3 nad ostalim formatima muzičkih datoteka jesteu tome što korisnici mogu sami da odaberu stepen komprimovanja (sabijanja). Logikaje jasna – veći stepen sabijanja daje manju MP3 datoteku, ali i lošiji kvalitet zvuka, dokmanji stepen sabijanja stvara veću datoteku, ali i vernije odgovara originalnom zvučnomzapisu iz kojeg je stvoren. Merilo kvaliteta MP3 zapisa je bit rate, dakle količina bitovakojom je predstavljena jedna sekunda zvučnog zapisa. Veći bit rate znači da se koristimanji stepen sabijanja i obrnuto.

60 Multimedija

Osnovne karakteristike MP3 formata i glavni razlog njegove popularnosti su velika kom-presija uz očuvanje kvaliteta zvuka. Ipak, MP3 format koristi algoritam koji odstranjujedeo informacija iz ulaza sa ciljem smanjenja veličine datoteke. Ovaj gubitak je, međutim,neprimetan, budući da MP3 algoritam odstranjuje, uglavnom, delove koje ljudsko uvo neregistruje i ne primećuje. Na ovaj način, MP3 omogućava veliku kompresiju uz (naizgled)neprimetan gubitak kvaliteta zvuka.

Format .WMA

Firma Microsoft suočena sa očitim nedostacima WAV datoteka, razvila je vlastiti kompri-movani format muzičkih datoteka WMA (što je skraćenica za Windows Media Audio). Tajformat primarno namenjen za upotrebu na programu Windows Media Player. Sve su češćii prenosni MP3/WMA player-i, a ovaj format zapisa muzike prihvatili su i divovi muzičkeindustrije poput firme Sony.

3.5.2. Način rada pri komprimovanju zvučnih podataka

Većina ljudi nije ni svesna da se sa kompresijom audio podataka, tačnije sa smanjenjemprotoka podataka, susreću svaki dan koristeći mobilni telefon. Uopšteno gledano, smanje-nje protoka podataka nije nova stvar. Može se reći da je već kod telegrafa i prvog prenosaanalognog signala bežičnim ili žičanim putem, postojala neka vrsta smanjenja protoka po-dataka. Međutim, kod svih kompresija postoji isti problem, a to je kako dovoljno smanjitiprotok informacija, a da se ne izgubi na kvalitetu signala. Kod audio signala je to vrlovažno jer je ljudsko uvo dosta osetljivo na izobličenja i razne druge promene, ali kao štoće se videti i ljudsko uvo može da se prevari.

Zvuk koje ljudsko uvo čuje se kreće od 20Hz do 20 kHz. To znači da sve frekvencije ispodili iznad čovek ne primećuje u prirodi i nije potrebno njihova reprodukcija. Naime, ljud-sko uvo prepoznaje pojedine frekvencijske pojaseve kao grupe, odnosno tipove zvukova,u grubo – niske frekvencije, srednje frekvencije i visoke frekvencije. Niske frekvencije sepribližno nalaze u pojasu od 20Hz do 400Hz, srednje frekvencije od 400Hz do 8 000Hz,a visoke frekvencije od 8 000Hz do 20 000Hz. Prag čujnosti ljudskog uva je vrednost naj-manje promene zvučnog pritiska koje uvo može da detektuje, i iznosi oko 20 mikropaskala.Ta vrednost je prosečna vrednost i različite osobe mogu bolje ili slabije čuti od te prosečnevrednosti. Prag čujnosti na frekvenciji 1 kHz uzeta je kao referentna vrednost i označenaje sa 0dB.

Karakteristično je za ljudsko uvo da subjektivno ne čuje sve frekvencije jednako. Ljudskouvo je osetljivije na srednje frekvencije, nego na niske i visoke frekvencije. Što je visinasignala viša, to se razlike između pojedinih frekvencija smanjuju. Tako, kada se čovekpribliži granici bola (otprilike 120dB) ove razlike u čujnosti različitih frekvencija se sma-njuju. Ova pojava je uzeta u obzir kod kompresije. Osim te pojave u obzir je uzet i efekatmaskiranja. Tačnije, jedan od osnovnih koncepata na kojima se temelje svi psihoakustičkialgoritmi kodiranja zvučnih signala je maskiranje. Šta je to maskiranje? Maskiranje jeakustički efekat kada snažniji zvuk ili zvuk sa nekim posebnim karakteristikama, potpunoprekriva neki drugi zvuk i čini ga nečujnim za slušaoca.

Zvuk 61

Kako je ljudsko uvo lako prevariti, može se iskoristiti mogućnost da, ako se pored signalajedne frekvencije nalazi signal druge, bliske frekvencije sa manjim intenzitetom, onda ćeglasniji signal maskirati tiši. Laički rečeno, ovaj tiši signal se može izbaciti. Algoritamanalizira signal u frekvencijskom domenu, tako da celi spektar deli na određeni broj delova.Ako se u nekom frekvencijskom pojasu uoči ovaj efekat maskiranja, onda se taj pojas nećeubaciti u niz podataka i na taj način se dobija smanjenje protoka podataka. Dinamikaljudskog sluha, odnosno razlika između praga čujnosti, odnosno najtiših signala i pragabola je otprilike 120dB, ali samo na spomenutim srednjim frekvencijama.

3.6. MIDI i digitalni audio

MIDI (Musical Instrument Digital Interface) je komunikacioni standard razvijen za elek-tronske muzičke instrumente i računare. Dozvoljava da muzika i zvučni sintisajzeri različi-tih proizvođača komuniciraju među sobom duž kablova kojima su uređaji povezani. MIDIobezbeđuje protokol za prosleđivanje detaljnih opisa muzičke notacije, kao što su note,nizovi nota i koji instrument će svirati te note. Ali, MIDI podaci nisu digitalizovan zvuk;to je stenografsko predstavljanje muzike snimljene u numeričkom obliku. Digitalni audioje snimak, MIDI su note - prvo zavisi od mogućnosti zvučnog sistema koji se upotrebljava,a drugo od kvaliteta muzičkog instrumenta i mogućnosti sistema.

MIDI datoteka je spisak vremenski označenih naredbi koje su snimljene muzičke akcije (pri-tiskanje dirke na klavijaturi, održavanje pritisnute pedale ili pokret upravljačkog točka)koji, kada se upute MIDI uređaju za reprodukciju, proizvode zvuk. Koncizne MIDI porukemogu da prouzrokuju kompleksne zvukove ili nizove zvukova na instrumentu ili sinti-sajzeru.

Nasuprot MIDI podacima, digitalni audio je stvarna prezentacija zvuka, snimljena u oblikuhiljada individualnih brojeva (koji se zovu uzorci). Digitalni podaci predstavljaju trenutnuamplitudu zvuka (ili zvučnost) u diskretnim vremenskim intervalima. Pošto ne zavise oduređaja, digitalni audio zvuči uvek isto kad god se reprodukuje. Ta konzistencija ima svojucenu – velike datoteke za čuvanje podataka. Digitalni zvuk se koristi za muzičke CD-ovei MP3 datoteke.

MIDI podaci su za digitalni audio isto što je vektorska grafika za bitmapiranu grafiku.MIDI zavisi od uređaja, a digitalni podaci ne zavise. Kao što se izgled vektorske grafikerazlikuje u zavisnosti od štampača ili monitora, tako zvukovi koje prave MIDI datotekezavise od konkretnog MIDI uređaja za reprodukciju. Digitalni podaci proizvode zvukovekoji su manje ili više identični, bez obzira na reprodukcioni sistem. MIDI standard liči naPostScript jer omogućava instrumentima da komuniciraju na standardizovan način.

MIDI ima nekoliko prednosti u odnosu na digitalni audio i dve mane. Prednosti su:

• MIDI datoteke su mnogo kompaktnije, nego datoteke za digitalni audio, a veličinaMIDI datoteke ne zavisi od kvaliteta reprodukcije. Generalno, MIDI datoteke će biti200 do 1 000 puta manje od datoteka digitalnog audia CD kvaliteta. Pošto su MIDIdatoteke male, ne zauzimaju previše RAM-a, prostora na disku i resursa centralnogprocesora.

62 Multimedija

• Pošto su MIDI datoteke male, te datoteke ugrađene u Web strane učitavaju se iizvode brže nego njihovi digitalni ekvivalenti.

• U nekim slučajevima MIDI datoteke mogu zvučati bolje od digitalnog audia ako sekoristi MIDI uređaj visokog kvaliteta.

• Dužina MIDI datoteke može da se menja (promenom tempa), bez promene visinetona ili gubljenja audio kvaliteta. MIDI podaci su kompletno promenljivi, i to svedo nivoa pojedinačne note. Korisnik je u stanju da manipuliše i najmanjim delomMIDI kompozicije, što je nemoguće sa digitalnim audiom.

Pomenuto je da MIDI ima dve mane u odnosu na digitalni audio i one su:

• Pošto MIDI podaci ne predstavljaju zvuk nego muzičke instrumente, onda je si-gurno da će reprodukcija biti precizna samo ako je reprodukcioni uređaj identičanproizvodnom.

• MIDI ne može lako da se upotrebi za reprodukciju govornog dijaloga, iako postojeskupi i tehnički komplikovani digitalni sampleri.

Najvažnija prednost digitalnog audia je njegov stalni kvalitet izlaznog zvuka, gde je MIDInajmanje pouzdan! Sa digitalnim audiom korisnik može da ima više samopouzdanja daće audio snimak za multimedijalni projekat zvučati isto na kraju kao i na početku, kadaje napravljen. Zbog toga, nije iznenađenje da se digitalni audio koristi mnogo češće, negoMIDI podaci za multimedijalne zvučne podloge.

Postoje još dva razloga da se radi sa digitalnim audiom, umesto sa MIDI podacima:

• Postoji širi izbor aplikacionog softvera i sistemske podrške za digitalni audio, i zaMacintosh i za Windows.

• Priprema i programiranje za pravljenje digitalnog audia ne zahtevaju poznavanjemuzičke teorije; rad sa MIDI podacima obično zahteva solidnije znanje o muzičkimpartiturama, klavijaturama, notama i audio proizvodnji.

3.7. Zvuk za WWW

U ranim danima Interneta, kada su povezane mašine obično radile u Unix okolini, zajed-nički format datoteke za zvuk (.au) bio je međunarodni telefonski format (CCITT G711).To je omogućavalo 8 kHz frekvencija za uzorke za osmobitni mono, ali je davalo veomamale veličine datoteka. Sada ima i mnogo drugih tipova zvučnih datoteka na Webu.

Postoje dve metode za reprodukciju bilo digitalnog, bilo MIDI zvuka na Webu. Prvo,korisnik može da sačeka da se cela zvučna datoteka prenese na računar (učita) i da jeonda odsvira pomoćnom aplikacijom. Drugo, korisnik može da počne da svira prenesenizvuk čim se dovoljno podataka prenese u bafer računara (mesto gde se podaci smeštajuprivremeno), a prenos nastavlja da ispunjava bafer brže nego što može da se isprazni svi-ranjem zvučne datoteke. Strimovanje (streaming - protok) datoteka prvenstveno zavisiod brzine povezivanja – moraće duže da se čeka na reprodukciju ako se koristi modem

Zvuk 63

brzine 28, 8Kbps (mali opseg prenosa), nego kada se koristi brza T1 konekcija (velikiopseg prenosa).

Program Flash firme Adobe (slika 3.8) omogućava integraciju zvučnih numera koje senaprave editorom zvuka u multimedijalnu prezentaciju zasnovanu na Webu, uključujući izvukove događaja, kao što su klikovi na dugmad, i protočne zvukove, kao što je muzika upozadini. Osposobljen da čita i zapisuje .mp3 datoteke, Flash nudi Web dizajneru ozbiljnei moćne opcije za rešavanje problema visokokvalitetnih (dugih) datoteka i sporog prenosa,nasuprot niskokvalitetnih (kratkih) datoteka i brze isporuke - sa lepim rezultaiima.

Slika 3.8. Program Adobe Flash Professional može da se upotrebi za integraciju audiodatoteka i njihovo isporučivanje na Web

3.8. Dodavanje zvuka u multimedijalni projekat

Bez obzira da li korisnik radi na Macintosh-u ili unutar operativnog sistema Windows,moraće da prođe izvesne korake kako bi "uveo" audio snimak u multimedijalni projekat.Evo kratkog pregleda procesa:

1. Treba odrediti koja vrsta zvuka se traži (kao što su muzika u pozadini, posebnizvučni efekti ili govorni dijalog).

64 Multimedija

2. Treba odrediti gde ovi zvučni događaji treba da se odigraju tokom projekta.

3. Treba uneti naznake položaja zvuka u scenario ili napraviti poseban spisak takvihnaznaka.

4. Treba odlučiti kada i gde će se koristiti digitalni zvuk ili MIDI daloteke.

5. Treba nabaviti izvorni materijal praveći ga od nule ili kupovinom.

6. Treba editovati i uređivati zvukove kako bi odgovarali projektu.

7. Treba testirati zvukove kako bi se videlo da li su ispravno povezani sa slikama izprojekta. To može da znači ponavljanje koraka od 1 do 6, dok se sve ne sinhronizuje.

Kada dođe vreme da se skupljeni i editovani zvuci uvezu u projekat, korisnik mora dazna kako konkretna multimedijalna softverska okolina radi sa zvučnim podacima. Svakiprogram to radi malo drugačije, ali proces je, uobičajeno, pravolinijski – softveru trebareći koju datoteku da svira i kada da je svira. To se, obično, ručno obavlja tokom procesauvoženja ili "povezivanja" i tom prilikom se vrši i identifikacija datoteka.

Skript jezici, kao što su Lingo (Director) i ActionScript (Flash), daju veći nivo kontrolenad reprodukcijom zvuka, ali korisnik mora da zna taj jezik i sredinu. U određenim auto-rizovanim sredinama obično je potrebno jednostavno odsvirati zvuk kada korisnik pritisnedugme, ali to možda neće biti dovoljno. Ako korisnik menja ekrane dok svira dugačkadatoteka, na primer, možda će morati da isprogramira da zvuk stane pre napuštanjaaktuelnog ekrana. Ako datoteka koju treba odsvirati ne može da se pronađe na harddisku, možda će korisnik morati da kodira celu sekciju radi obrade grešaka i položaja da-toteke. I u štampanoj dokumentaciji i u dokumentaciji u računaru obično su prikazanenaredbe za reprodukciju zvuka.

Glava 4

Slike

Ono što se vidi na ekranu multimedijalnog računara u bilo kom trenutku je mešavina tek-sta, simbola, fotografskih bitmapa, vektorske grafike, trodimenzionalnih prikaza, različitihdugmadi koju treba kliknuti i prozora pokretnog videa. Neki delovi ove slike se mogupomerati ill kretati tako da ekran nikad ne izgleda mirno i izaziva oči. Računarski ekranje akcija – sadrži mnogo više od poruke; to je, takođe, osnovna veza gledaoca sa svimsadržajima nekog projekta.

Grafički elementi se, obično, mogu skalirati na različite veličine, obojiti, išarati ili učinitiprovidnim, mogu biti ispred ili iza ostalih objekata, ili se naredbama mogu učiniti vidljivimili nevidljivim. Kako se štampaju ti elementi, kako se biraju boje i fontovi, kojim trikovimase skreće pažnja, koliko je vešt u korišćenju alata – to su oznake veštine korisnika, talenta,znanja i kreativnosti, spojene u važnu vizuelnu vezu sa gledaocima.

4.1. Kreiranje statičnih (nepokretnih) slika

Statične (nepokretne) slike mogu biti male ili velike, čak i preko celog ekrana. Mogu bitiobojene, mogu se postaviti na ekran na krajnje proizvoljan način, mogu biti ravnomernihili čudnih geometrijskih oblika. U bilo kom obliku, statične slike se na računaru prave nadva načina: kao bitmape (rasterska grafika) i kao vektori (vektorska grafika).

Bitmape se koriste za fotorealistične slike i za kompleksne crteže koji zahtevaju fine detalje.Vektorski objekti se koriste za linije, okvire, krugove, poligone i druge matematičke oblikekoji mogu matematički biti izraženi u uglovima, koordinatama i rastojanjima ili dužinama.Iscrtani objekat može biti ispunjen bojom i mustrom (pattern) i može da se markira(izabere) kao jedinstven objekat. Izgled obe vrste slika zavisi od rezolucije prikaza i mo-gućnosti grafičkog hardvera i monitora računara. Obe vrste slika se pamte u različitimformatima podataka i mogu se prevoditi iz jedne aplikacije u drugu ili sa jedne računarskeplatforme na drugu. Obično se slikovne datoteke komprimuju (sabijaju), radi uštede me-morije i prostora na disku; mnogi formati slika već koriste kompresiju u okviru samedatoteke – na primer, GIF, JPEG i PNG.

Statične slike mogu da budu najvažniji elemenat multimedijalnog projekta. Ako korisnik

66 Multimedija

sâm dizajnira multimediju, trebalo bi da se postavi u ulogu crtača ili prelamača. Trebalobi utrošiti vreme da se nauče svi trikovi koje sadrži softver za crtanje. Kompetentnost iračunarska opismenjenost u korišćenju grafičkog dizajna su od vitalnog značaja za uspehprojekta.

4.1.1. Bitmape

Bit je najjednostavniji element u digitalnom svetu i predstavlja elektronsku cifru kojamože da ima vrednosti on ili off, može bude crna ili bela boja ili true (1) ili false (2).Referenciran je kao binarni sistem, jer samo dva stanja (on ili off) su na raspolaganju.Mapa predstavlja dvodimenzionalnu matricu bitova. To znači da bitmapa predstavljajednostavnu matricu malih tačaka koje formiraju sliku, koja se ili prikazuje na monitoru ilise štampa.

Jednodimenziona matrica (1-bit depth) se koristi za prikaz monohromatskih slika – bitma-pa gde je, uobičajeno, svaki bit podešen da bude ili crn ili beo. U zavisnosti od korišćenogsoftvera, bilo koje dve boje mogu prezentuju stanja on ili off (1 ili 0). Potrebno je mnogoviše podataka kako bi se opisala siva skala ili više od 16 miliona boja koje ima svakielement kolorne slike, kao što je ilustrovano na slici 4.1.

Slika 4.1. Bitmapa predstavlja matricu podataka koji opisuju karakteristike svih pikselakoji kreiraju sliku (svaka kocka predstavlja jedan bit podataka)

Ovi elementi slike (poznati kao pikseli) mogu da imaju vrednosti on ili off unutar 1-bitnebitmape ili treba više bitova kako bi se oni opisali, ako prezentuju odgovarajuće nijanseboje (4 bita za 16 boja; 8 bitova za 256 boja; 16 bitova za 65 536 boja; 24 bita za16 772 216 boja). Na primer, za 2-bitne bitmape dostupne nule i jedinice mogu da sekombinuju na četiri načina i mogu da opišu 4 boje (tabela 4.1).

Tabela 4.1. Dostupne binarne operacije za opisivanje boja

Slike 67

Zajedno, stanje svih piksela na računarskom ekranu sačinjava sliku koju gledalac vidi, bilou kombinacijama crnog i belog ili obojenih piksela u liniji teksta, slici koja liči na fotografijuili na jednostavan obrazac (šablon) pozadine. Slika 4.2 prikazuje različite dubine boja iodgovarajući broj koji se prikazuju, kao što i piše u komentaru na slici.

Slika 4.2. Prikaz dubine boja bitmapa kao što je to definisano slikom 4.1

Odakle dolaze bitmape? Kako se prave? Korisnik može da uradi sledeće:

• može da napravi bitmapu od nule programom za crtanje ili bojenje;

• može da "uhvati" bitmapu sa aktivnog računarskog ekrana programom za hvatanjeekrana (Screen Capture) i da je premesti u program za bojenje ili u odgovarajućuaplikaciju;

68 Multimedija

• može da "uhvati" bitmapu sa fotografije, crteža ili televizijske slike korišćenjemskenera ili uređaja za "hvatanje videa" koji digitalizuje sliku.

Kada se jednom napravi, bitmapa može da se kopira, menja, šalje elektronskom poštomili da se koristi na mnoge kreativne načine.

4.1.2. Clip Art-ovi

Ako korisnik nije u mogućnosti da pravi sopstvene, može da dobije bitmape od isporučilacaveć pripremljenih slika i od dobavljača fotografija koji su već digitalizovali slike. Gotoveslike se nalaze na CD ROM-ovima i unutar on-line servisa. Mnoge grafičke aplikacije seisporučuju sa gotovim slikama i korisnom grafikom, a postoji i mogućnost da kompanijapošalje zbirku kada korisnik registruje proizvod. Kolekcija gotovih slika može da sadržislučajan izbor slika ili to mogu biti nizovi grafike, fotografja, zvuka i videa koji se odnose najednu temu. Na primer, firma Corel kombinuje velike kolekcije slika sa svojim softveromza editovanje slika. Neki programi za 3D modelovanje sadrže već gotove 3D modele,omogućavajući korisniku da prevuče gotove objekte u scenu.

Slika 4.3. Sadržaj dva diska sa slikama

Slike 69

Na slici 4.3 prikazane su dve stranice slika iz komercijalnog resura zvanog PhotoDisc.Svaki CD ROM sadrži oko 400 bitmapa u punom koloru i visokoj rezoluciji, sa licencomza "neograničenu upotrebu". Ako se obrati pažnja, "neograničena upotreba" baš i nijeneograničena – u mnogim slučajevima postoji granica za broj proizvoda koji se možedistribuirati bez dodatnog plaćanja, tako da treba pročitati kompletan ugovor. Međutim,te cene su obično razumne i utiču samo na komercijalne izdavače multimedije.

Kada se već dođe do Clip Art-ova, korisnik može njima da manipuliše i da prilagođavamnoge njihove osobine (kao što su sjajnost, kontrast, dubina boja, zasićenje i veličina).Mogu i da se isecaju i premeštaju između mnogih bitmapa, korišćenjem posebnih programaza editovanje slika. Ako je slika u visokoj rezoluciji (usmerena za štampanje na 300 ili600dpi, umesto na monitore od 72dpi), korisnik može da uzme mali deo slike visokerezolucije, a to će izgledati odlično kada se uveća na rezoluciju monitora.

4.1.3. Softver za bitmape

Mogućnosti i sposobnost programa za editovanje slika i za Macintosh i za Windows su urasponu od jednostavnih do kompleksnih. Bolji editori postoje u verzijama koje se izvrša-vaju i izgledaju isto na obe platforme, a grafičke datoteke koje se pravi mogu da budusnimljene u mnogim formatima, i ti formati su čitljivi na obe platforme.

Macintosh se ne isporučuje sa alatom za bojenje, a Windows daje samo program Paint

(slika 4.4), mada za ozbiljnije poslove korisnik mora da nabavi dodatni softver za obraduslika. Većina multimedijalnih autorskih sistema nudi mogućnosti za editovanje bitmapa.Program Director (slika 4.5) uključuje moćan editor slike koji ima dodatne sposobnosti,kao što su rad po slojevima i filtri, korišćenjem zajedničkih dodatnih programa (plug-ins)iz firme Adobe i od ostalih nezavisnih dizajnera.

Slika 4.4. Program Paint za editovanje slika

70 Multimedija

Slika 4.5. Program Director za editovanje slika

Za fotorealizam i dobijanje realističnih slika, trebalo bi skenirati fotografiju ili upotrebitidigitalnu kameru, pa, nakon toga, editivati slike u programima Photoshop, Fireworks ilinekom drugom programu za editovanje slika. Bukvalno je nemoguće "naslikati" realističnufotografiju korišćenjem programa za bojenje i editovanje.

Slika 4.6. Program Corel Painter X za "umetničko oslikavanje"

Slike 71

Alatke za umetnike i umetničko slikanje pruža program Corel Painter X (slika 4.6)koji ima u sebi na stotine vrsta četkica, sprejeva, mastila, vodenih boja i tekstura i kojiomogućava da se to sve primeni u cilju kreiranja odgovorajuće bitmape.

Korisnik može da koristi editor slika da pravi originalne slike, kao što su stripovi, simboli,dugmad, bitmapiran tekst i apstraktne slike koje imaju rafiniran "grafički" izgled. Mnogidizajneri kreiraju svoja rešenja primenom odgovarajućih programa za vektorsko crtanje kaošto su CorelDRAW, Adobe Illustrator ili Adobe InDesign, i tako kreirana vektorskarešenja pretvaraju u bitmape.

4.1.4. "Hvatanje" i editovanje slika

Slika koja se vidi na monitoru je digitalna bitmapa smeštena u video memoriji, osveženana svakih 1/60 sekunde ili brže, zavisno od frekvencije skeniranja monitora. Dok korisnikskuplja slike za multimedijalni projekat, može često da ima potrebu da "hvata" (capture)i pamti sliku direktno sa ekrana monitora. Najjednostavniji način da se "uhvati" ono štose vidi na ekranu u nekom trenutku je da se pritisnu odgovarajući tasteri (ili kombinacijatastera) na tastaturi računara. To prouzrokuje konverziju iz ekranskog bafera u formatkoji može da se koristi.

• Radna okruženja i na Macintoshu i pod operativnim sistemom Windows imaju Clip-board – oblast u memoriji gde se podaci, kao što su tekst i slike, privremeno čuvajukada se vrši isecanje (Cut) ili kopiranje (Copy) u nekoj aplikaciji. Unutar operativnogsistema Windows, kada se pritisne taster Print Screen ili PrtScr, primerak slikeekrana ide u klipbord. Iz klipoborda korisnik može da prenese bitmapu u aplikaciju(kao što je Paint, koja dolazi uz Windows).

• Na Macintoshu kombinacija tastera Command-Shift-3 pravi čitljivu datoteku podnazivom Picture, u formatu PNG i smešta je u osnovni direktorijum aktivnogdiska. Nakon toga, kreirana datoteka može da se importuje u multimedijalni sistemili program za editovanje i bojenje. Pritiskom na taster Command-Control-Shift-4korisnik može da iscrta (definiše) pravougaonik na ekranu, "hvatajući" njegovu sa-držinu i stavljajući je u klipbord, za premeštanje u neki drugi program.

• Pomoćni programi za "hvatanje ekrana" (Screen Capture) za Macintosh i Windowsidu korak dalje i neizostavni su za multimedijalne umetnike. Pritiskom na definisanitaster omogućava se izbor oblasti ekrana i snimanje u različitim formatima.

Osim što dozvoljavaju uvećavanje i pravljenje složenih slika, alati za editovanje slikaomogućavaju i izmenu i distorziju slika. Elementima na fotogorafiji u boji može da budepromenjena boja, mogu da se premeštaju, rastežu, deformišu i sve to u cilju kreiranjaefektnijih slika. Morfiranje (Morphing) je još jedan efekat u nizu koji može da se koristiza manipulaciju nepokretnim slikama ili da se prave interesantne, a često i čudne animi-rane transformacije. Morfiranje omogućava glatko stapanje dve slike, tako da izgleda kaoda se jedna slika utapa u sledeću, što često daje zabavne rezultate.

Na tržištu postoji mnogo programa koji su u stanju da odrade sve po pitanju morfiranja(slika 4.7). Na slici 4.8 prikazana su dva primera morfiranja i to sa različitim objektima.

72 Multimedija

Slika 4.7. Jedan od programa koji omogućava morfiranje

Slika 4.8. Dva primera morfiranja

4.1.5. Skeniranje slika

Svakodnevni objekti mogu da se skeniraju i unutar programa za editovanje slika može dase manipuliše njima, da se naprave neobični efekti koji privlače pažnju. Treba otvoritiskeniranu sliku u programu za editovanje slika i eksperimentisati sa različitim filtrima,kontrastom i različitim specijalnim efektima. Treba biti kreativan, ne treba se plašiti dase probaju čudne kombinacije - poneki put greške daju najinteresantnije rezulate.

Slike 73

4.1.6. Vektorska grafika

Većina multimedijalnih sistema omogućava upotrebu vektorski nacrtanih objekata kao štosu linije, pravougaonici, elipse, poligoni, kompleksni objekti kreirani od jednostavnijih itekst.

• Programi za dizajn (projektovanje) pomoću računara (CAD) tradicionalno koristevektorski nacrtane objektne sisteme da se naprave veoma kompleksni i geometrijskiprikazi (renderi) potrebni arhitektama i inženjerima.

• Grafički umetnici koji dizajniraju za štampane medije koriste vektorski nacrtaneobjekte, zato što ista matematika koja stavlja pravougaonik na ekran može dapostavi taj pravougaonik (ili Bezierove krive pomoću dobre linijske ilustracije) napapir, bez "reckavosti". To zahteva veću rezoluciju štampača, upotrebom jezika zaopis stranice, kao što je PostScript.

• Programi za 3D animaciju, takođe, koriste vektorsku grafiku. Na primer, različitepromene u položaju, rotaciji i senčenju svetlosti koje se zahtevaju za obrtanje složeni-jeg sistema moraju da budu matematički izračunati.

Kako funkcioniše vektorska grafika (vektorsko crtanje)?

Vektor je linija opisana položajem svoje dve krajnje tačke. Kvadrat, na primer, može dase definiše kao:

RECT 0,0,200,200

Upotrebom Dekartovih koordinata, softver će nacrtai ovaj kvadrat, počevši od gornjeglevog ugla ekrana, 200 piksela horizontalno u desnu stranu i 200 piksela na dole. Zasledeću sintaksu:

RECT 0,0,200,200,RED,BLUE

softver će nacrtati isti kvadrat sa crvenom konturnom linijom i ispunio bi kvadrat plavombojom. Korisnik uvek može da doda druge parametre kako bi opisao, na primer, šaru iliteksturu za ispunu zatvorene konture ili širinu granične linije.

Dekartove koordinate predstavljaju par brojeva koje opisuju tačku u dvodimenzinalnomprostoru (2D) i koja predstavlja presek horizontalnih i vertikalnih linija (x i y ose). Ovajpar je uređen i uvek se prikazuje u oblik (x, y). U trodimenzionalnom prostoru (3D),treća dimenzija – dubina ili visina – definisana je z koordinatom i tačka je definisana kao(x, y, z).

Odnos vektorske i rasterske grafike

Koncizan opis vektorskog obojenog kvadrata, opisanog u prethodnom delu, sadrži manjeod 30 bajtova alfanumeričkih podataka (čak i manje kada se opis komprimuje ili sabije).Sa druge strane, opis istog kvadrata kao nekomprimovane bitmapirane slike, u crno-belojtehnici (što zahteva najmanje memorije na jednobitnoj dubini boje po pikselu), zauzeo bi

74 Multimedija

5 000 bajtova (200 × 200/8). Nepovoljnija varijanta je kada je slika napravljena u 256boja (8-bitna kolorna dubina po pikselu) zahtevala bi neverovatnih 40 000 bajtova kaobitmapa (200× 200/8× 8 = 200× 200).

Zbog očigledne prednosti po pitanju veličine datoteka, Web stranice koje koriste vektorskugrafiku u dodatnim programima (plug-ins), kao što je Adobe Flash, učitavaju se brže i,kada se koriste za animaciju, iscrtavaju se brže od bitmapa. Tek kada se krene u crtanjeviše stotina objekata na ekranu, korisnik može da registruje usporenje dok čeka da se ekran"osveži" – veličina, položaj i drugi parametri moraju da se izračunaju za svaki objekat. Naprimer, jedna slika sastavljena od 500 pojedinačnih linija i pravougaonih objekata, možeračunaru da oduzme više vremena za obradu i slanje na ekran, nego za sliku koja se sastojiod nekoliko iscrtanih krugova.

Vektorski objekti se lako skaliraju bez gubljenja rezolucije ili kvaliteta slike. Velika iscrtanaslika može da se smanji na veličinu poštanske markice i, mada ne mora da izgleda dobrona monitoru računara na 72dpi, izgledaće i dalje dobro kada se odštampa na 300dpina štampaču u boji. Kada je u pitanju bitmapa tu je priča sasvim drugačija. Promenaveličine bitmape zahteva ili povećanje broja piksela (umetanjem novog piksela između dvasusedna i određivanje boje novonastalog piksela odgovarajućim algoritmom) ili smanjenjebroja piksela (eliminisanjem određenog broja detalja).

4.1.7. 3D crteži i renderovanje

Crtanje u perspektivi ili u 3D na dvodimenzionalnoj površini zahteva posebnu veštinui talenat. Kreiranje 3D objekata koji se prikazuju na računarskom monitoru može bitiizuzetno teško za dizajnere (projektante) koji su navikli da rade sa kvadratima, kružnicamai drugim ravanskim geometrijskim elementima. Postoji specijalizovani softver za pri-kazivanje trodimenzionalnih scena, kompletno sa usmerenim osvetljenjem i specijalnimefektima, ali korisnik mora da se pripremi za još učenja! Za put od pravljenja 3D tekstado stvaranja detaljnih šetnji kroz 3D prostor svaka aplikacija zahteva studiranje i vežbu,pre nego što korisnik postane efikasan u radu.

Proizvodne vrednosti multimedijalnih projekata su se dramatično uvećale, ali kako sekvalitet proizvodnje pobioljšavao, tako su i očekivanja korisnika rasla. Ravni i bezbojni2D ekrani više nisu dovoljni za uspešan komercijalni muliimedijalni projekat. Grafika ianimacija u 3D su postale opšte mesto, dajući "životnost" projektima. Na svu sreću do-sta se promenilo – u oblasti gde su ranije radile samo moćne radne stanice, u današnjevreme jeftini PC računari i odličan softver su učinili 3D modelovanje pristupačnim većinimultimedijalnih dizajnera.

Danas su mnogi proizvodi – uključujući u tu celu priču i programe Carrera, form*Zi Cinema 4D (slika 4.9) – označeni kao sredstva od suštinske važnosti za ilustraciju,animaciju i multimedijalnu produkciju.

Za 3D, dubina ili visina (z dimenzija) kocki i lopti mora biti izračunata i prikazana takoda perspektiva prikazanog objekta izgleda ispravno. Kao što je prikazano na slici 4.9,najveći broj 3D softverskih paketa daje prilagodljive poglede, tako da korisnik može dagleda svoj rad sa vrha, odozdo ili sa strane.

Slike 75

Slika 4.9. 3D aplikacije daju poglede koji mogu da prilagođavaju

Ogromna količina informacija je potrebna da bi se prikazala 3D scena. Scene se sastojeod objekata koji se sami za sebe sastoje od mnoštva malih elemenata, kao što su blokovi,valjci, lopte ili kupe (opisani upotrebom matematičkih konstrukcija ili formula). Trebaposebno napomenuti da što je više elemenata sadržano u objektu, to će komplikovanijabiti njegova struktura, biće glatkiji, a njegova rezolucija finija.

Slika 4.10. Žičani modeli bolida formule 1 i motora

Objekti i elementi u 3D prostoru nose sa sobom svojstva ili osobine kao što su oblik, boja,tekstura, senčenje i lokacija. Scena sadrži mnogo različitih objekata i korisnik može dauveća prikaz određenog dela scene kako bi video detalje (slika 4.10). Objekti su sastavljeniod različitih blokova i pravougaonika i kreiraju se modelovanjem u kojem se koriste 3Daplikacije.

76 Multimedija

Da bi se modelovao objekat koji korisnik želi da postavi u scenu, mora da se počnesa oblikom. Korisnik može da kreira oblik od nule ili da uveze prethodno napravljeneiz biblioteke geometrijskih oblika koji se nazivaju primitivi i obično je reč o blokovima,valjcima, loptama, kupama i piramidama. U većini 3D aplikacija korisnik može da napravibilo koji 2D oblik alatom za crtanje ili postavljanjem konture, a zatim se 3D objekat dobijaizvlačenjem i rotacijom u trećoj dimenziji duž ili oko z ose (slika 4.11). Kada se "izvlači"ravna površina, ona produžava svoj oblik za izvesno rastojanje ili upravno na konturuoblika ili po definisanoj putanji (slika 4.11, levo). Kada se rotira oblik, profil oblika serotira oko definisane ose (korisnik definiše smer) da se napravi 3D objekat. Drugi metodiza pravljenje 3D objekata se razlikuju od programa do programa.

Slika 4.11. Kreiranje 3D objekata iz 2D oblika

Pošto napravi 3D objekat, korisnik može da primeni na njega teksturu i boje da bi izgledaorealnije - neravno i grubo, ili sjajno i glatko. Mogu da se primene boje, šare, ili, čak, ibitmapirane slike kako bi se napravila tekstura objekta. Da bi se izvršilo modelovanjescene, treba postaviti sve objekte u 3D prostor, bez obzira na njihov broj.

Slika 4.12. Različiti prikazi površine definisanog objekta

Slike 77

U modelovanu scenu korisnik može da postavi jedno ili više svetala koja će praviti difuznuili oštru senku na objekte, a reflektovaće i blještaće tamo gde je svetlo najjače. Nakontoga, može da se doda pozadina i da se postave kamere kroz koje se gleda na finalnoizrađenu scenu.

Senčenje i prikazivanje površina modela se, obično, može primeniti na nekoliko načina.Ravno senčenje (flat shading) je za računar najbrže i najčešće se koristi u režimu prethod-nog pregleda (Preview). Ostala, kompleksnija senčenja (Gouroud shading, Phong shadingi Ray tracing) traju duže, ali daju fotorealistične slike. Prikazivanje površina (slika 4.12)može da bude različito. Počev od prikazivanja žičanim modelom, preko površina kojesu aproksimirane pravougoanim ili trougaonim poligonima i tim istim poligonima koji su"ispeglani", pa do "zalepljene" teksture na željeni objekat.

Slika 4.13. Definisani objekat ukomponovan u odgovarajuću pozadinu

Kada se kompletira modelovanje scene ili objekta u njoj, korisnik mora da prikaže finalnirezultat. Renderovanje (rendering) je proces kada računar konačno koristi ugrađene al-goritme da primeni efekte koji su zadati za objekte koji su napravljeni. Na slici 4.13predstavljeni su pozadina, objekat i prikazana kompozicija.

4.2. Boje

Računari su postali moćna alatka za brzo i ekonomično pravljenje slika i fotografija. Udanašnje vreme se više obraća pažnja na to da se sa potencijalnim kupcima komuniciraputem slika i fotografija, tj. putem primene boja. Primena boja i vizuelizacija svakogproizvoda je siguran put ka potencijalnom kupcu. To je pokazala praksa i na tome seintenzivno radi. Kao što se zna da su dizajn, grafika i profesionalna prezentacija putem

78 Multimedija

fotografija bitni činioci, takođe se zna da je primena boja krucijalni deo procesa prodaje, jerje to bitan deo prilikom odlučivanja potencijalnog kupca o kupovini. Ako se boje efikasnoprimenjuju u proizvodnji i marketingu, onda je sigurno da će potencijalni kupci obratitipažnju na takav proizvod. U ovom poglavlju će se obratiti pažnja na psihodinamikuboja, kao i na vezu između njih, na kulturološko značenje boja, na upotrebu realističnihpaleta pseudoboja za slike koje su namenjene specifičnom auditorijumu, na strukturiranjepogleda ili prikaza za istinsko razumevanje, na modifikovanje slika za stvarni video prikaz ilištampu, na smeštanje ključnih informacija u boje ili druge vizuelne podatke, na upotrebuteksta u slikama radi prezentacije konteksta ili informacija u pozadini, kao i na vizuelnukorisničku povratnu spregu unutar grafičkih operacija.

4.2.1. Razumevanje boja

Da bi se razumelo kako se boja "meri", trebalo bi se pozabaviti fizičkim i fiziološkim osobi-nama boja. Boja predstavlja rezultat interakcije između svetlosti, objekta i posmatrača.Reč je o modifikovanju svetlosti na objektu, gde modifikovana svetlost dolazi do posma-trača i isporučuje mu odgovarajuću informaciju u vidu jasnih boja. Očigledno je da čovekmora, najpre, da razmotri neke stvari u vezi sa svetlošću da bi došao do odgovarajućihinformacija o bojama.

Svetlost je vidljivi deo elektromagnetnog spektra. Svetlost se obično opisuje kao skup jed-nakih talasa. Svaki talas je definisan svojom talasnom dužinom (slika 4.14), gde talasnadužina predstavlja rastojanje od maksimuma jednog talasa do maksimuma drugog talasa.Talasne dužine se mere u milionitim delovima milimetra, nanometrima (nm).

Slika 4.14. Grafički prikaz talasne dužine

Region elektromagnetskog spektra koji je vidljiv za ljudsko oko je u opsegu od 400nmdo 700nm (slika 4.15). Na primer, ako senzori registruju sve vidljive talasne dužine,onda to mozak shvata kao belu boju. Ako nema detektovanih vidljivih talasnih dužina,to znači da nema prisutne svetlosti i to mozak shvata kao crnu boju. Unutar celokupnogelektromagnetskog spektra postoje i talasi koji se ne vide, ali mogu da se iskoriste odstrane ljudi. Na primer, mogu da se iskoriste talasi sa kratkom talasnom dužinom (Xzraci) koji se koriste za rendgenske snimke, kao i talasi sa dugačkom talasnom dužinom,koji mogu da se upotrebe za radio i televiziju.

Kao što je već pomenuto, ljudsko oko registruje boje u opsegu od oko 400nm do 700nm,tj. tačnije vrednosti su od 380nm do 780nm. Do sada je zaključeno da ljudske oči imozak ili registruju prisustvo svetlosti (postoje talasi sa vidljivim talasnim dužinama) iliregistruju da nema svetslosti uopšte (nema talasa sa vidljivim talasnim dužinama).

Slike 79

Slika 4.15. Vidljivi opseg elektromagnetskog spektra

Kada se pusti zrak bele svetlosti kroz staklenu prizmu (slika 4.16), zrak svetlosti se razlažei korisnik može da vidi kako oko reaguje na svaku pojedinačnu talasnu dužinu. Ovaj eks-periment dokazuje da različite talasne dužine omogućavaju da se vide različite boje. Naovaj način mogu da se registruju dominantni opsezi crvene, narandžaste, žute, zelene,svetloplave, tamno (indigo) plave i ljubičaste boje vidljivog spektra, kao i "duge" ostalihboja između dominantnih opsega. Na slici 4.16 prikazani su ovi dominantni opsezi savrednostima talasnih dužina pomenutih opsega.

Slika 4.16. Vidljivi opseg elektromagnetskog spektra i dugine boje

Kada čulo vida ili vizuelni sistem detektuje talasnu dužinu vrednosti oko 700nm, onda tajsistem vidi "crveno"; kada vizuelni sistem detektuje talasnu dužinu vrednosti koja se krećeoko 450 ÷ 500nm, onda taj sistem vidi "plavo"; kada vizuelni sistem detektuje talasnudužinu vrednosti oko 400nm, onda taj sistem vidi "ljubičasto" itd. Ovakvi "odgovori"vizuelnog sistema su osnova za registrovanje miliona i miliona različitih boja od straneljudskog oka ili pomenutog vizuelnog sistema.

Uprošćeno posmatrano, moglo bi se reći da ljudsko može da vidi sve talasne dužine odjed-nom (vidi belu svetlost), ili može da vidi samo jednu talasnu dužinu. Međutim, svet bojaje mnogo kompleksniji sistem od gore pomenutog, jer boja nije deo svetlosti, nego je boja

80 Multimedija

svetlost. Kada čovek vidi neku boju, on vidi svetlost koja je modifikovana i komponovanaod mnogo talasnih dužina. Na primer, ako korisnik vidi crveni objekat, to znači da ondetektuje svetlost koja se, uglavnom, sastoji od "crvenih" talasnih dužina. To znači daobjekat dobija svoju boju modifikovanjem svetlosti.

4.2.2. RGB – osnovne aditivne boje

RGB model boja je dobio ime po početnim slovima tri osnovne boje koje učestvuju uovom modelu: R je početno slovo od crvene boje (engleski naziv je Red), G je početnoslovo od zelene boje (engleski naziv je Green) i B je početno slovo plave boje (engleskinaziv je Blue). Crvena, zelena i plava boja su osnovne (primarne) boje (osnovne boje sedodaju i mešaju kako bi se dobila željena boja i nijansa). Osnovne boje se prikazuju u 3DDekartovom koordinatnom sistemu (slika 4.17).

Slika 4.17. RGB model boja u obliku kocke

Nacrtana prostorna dijagonala, od temena sa crnom bojom ka temenu sa belom bojom,predstavlja liniju gde je podjednako učešće svih osnovnih boja u željenoj nijansi, i ta di-jagonala predstavlja različite nivoe sive boje. Uobičajeni naziv za nivoe sive boje je sivaskala.

U tabeli 4.2 su prikazane RGB vrednosti za uobičajeni video test signal sa 100% amplitu-dom i sa 100% zasićenošću.

Tabela 4.2. RGB: 100% zasićenost boja i 100% amplituda

Opseg W Y C G M R B BKR 0 ÷ 255 255 255 0 0 255 255 0 0G 0 ÷ 255 255 255 255 255 0 0 0 0B 0 ÷ 255 255 0 255 0 255 0 255 0

RGB model boja je nadmoćan u odnosu na ostale modele boja po pitanju računarskegrafike zbog toga što i monitori u boji koriste crvenu, zelenu i plavu boju kako bi napraviliželjenu boju. Iz tog razloga izbor RGB modela je pojednostavio arhitekturu i dizajnračunara. Sistem koji je dizajniran da koristi RGB model boja je u prednosti u odnosu nadruge sisteme zbog toga što se ovaj model boja nije menjao godinama.

Međutim, RGB model boja nije baš najbolji kada radi sa "realnim" slikama. Sve tri

Slike 81

RGB komponente moraju da imaju istu širinu opsega kako bi generisale boju unutar RGBmodela kocke. Rezultat ovoga je pojava bafera kodova koji ima istu pikselsku dubinui istu rezoluciju za svaku RGB komponentu. Bafer kodova predstavlja deo memorijedispleja računara koji je predviđen za čuvanje sadržine jedne slike na ekranu. Kada jevideo adapter u tekstualnom režimu, ovi podaci su u obliku ASCII znakova, a kada je ugrafičkom režimu, podaci definišu svaki piksel. Takođe, obrada slika u RGB prostoru bojanije baš najbolje rešeno, a izuzetno je sporo.

Mešanje ovih osnovnih boja (RGB) u različitim kombinacijama dovodi do stvaranja nijansiboja koje su približne bojama u prirodi. Mešanjem crvene (R) i zelene boje (G) dobijase žuta (Y) boja, mešanjem crvene (R) i tamnoplave (B) boje dobija se ljubičasta (M)boja i mešanjem tamnoplave (B) i zelene (G) boje dobija se svetloplava (C) boja. Ako jeodbijena svetlost "siromašna" primesama crvene, zelene i plave boje, onda to ljudsko okoshvata kao belu (W) boju. Ako svetlost nije prisutna, onda ljudsko oko to shvata kaocrnu (BK) boju. Ove kombinacije su prikazane na slici 4.18, gde se vidi međusobni uticajboja.

Slika 4.18. RGB - osnovne aditivne boje

Kombinovanjem dve "siromašne" osnovne boje za dodavanje (RGB) dobijaju se osnovneboje za "oduzimanje", tj. osnovne suptraktivne boje. Ove osnovne boje su cijan (C),magenta (M) i žuta (Y) i one stoje nasuprot crvenoj (R), zelenoj (G) i tamno plavoj (B)boji.

4.2.3. HSV, HSI i HSL modeli boja

HSI (nijansa, zasićenost i intenzitet) i HSV (nijansa, zasićenost i vrednost) su modeli bojakoji su razvijeni da bi korisnici lakše baratali bojama i ovi modeli su dizajnirani tako daaproksimiraju put kako čovekovo oko oseća i tumači boje. Vrednost H vraća korisnika uoriginalni spektar boja i može da ima vrednosti crvene, žute, zelene, svetloplave, plavei ljubičaste boje. Vrednost S definiše koliko se bele svetlosti sadrži u boji i ta vrednostse koristi za razlikovanje svetle boje od tamne. Ovi modeli su razvijeni u doba kada suse boje pravile "ručno", ali korisnici su navikli da ih koriste i u današnje vreme. HSL(nijansa, osvetljenost i zasićenost) je model boja sličan HSV modelu boja (samo što sekoristi osvetljenost umesto intenziteta).

Razlika između HSI i HSV modela boja je u načinu izračunavanja komponente osvetljenosti

82 Multimedija

ili sjajnosti (I ili V), pri čemu se određuju distribucija i dinamički opseg obe komponente(I ili V) i zasićenost (S). Model boja HSI je bolji kada se koriste tradicionalne funkcije zaobradu slika kao što su savijanje, izjednačavanje, uravnotežavanje i histogrami; te funkcijemanipulišu osvetljenjem, dok je parametar I zavisan od RGB komponenti. Model bojaHSV omogućava manipulaciju nijansama i zasićenošću (dodavanjem ili regulisanjem koli-čine boje) i na taj način se dolazi do većeg dinamičkog opsega zasićenosti.

Slika 4.19 levo ilustruje HSV model boja u obliku jednostruke šestostrane piramide. Vrhpiramide predstavlja vrednost V = 1, što znači da je tu maksimalni intenzitet (jačina)boja. Tačka na tom mestu predstavlja belu boju. Tačka u osnovi piramide predstavlja crnuboju i njena vrednost je V = 0. Komplementarne boje se nalaze na suprotnim pozicijamajedna u odnosu na drugu, pod uglom od 180◦. Vrednost ugla određuje osa H koja se rotiraoko vertikalne V ose. Počinje se sa vrednošću 0◦ što je oznaka za crvenu boju. Vrednostose S je prenosivi odnos, koji se kreće od vrednosti 0 na preseku osa S i V, pa do vrednosti1 na stranicama piramide. Na primer, tačka sa vrednostima S = 0 i V = 1 predstavljabelu boju. Sve vrednosti na osi S mogu da se usaglase sa vrednošću V = 0. Sve vrednostikoje se nalaze na osi V za vrednost S = 0 predstavljaju sivu skalu. Očigledno je da kadaje S = 0, onda su vrednosti na osi H nebitne.

Slika 4.19. HSV i HSI modeli boja u obliku šestostrane piramide

Sa tačke gledišta umetnika, boje sa koordinatama V = 1 i S = 1 su boje slabog intenziteta.Dodavanje bele boje se odvija smanjivanjem vrednosti S (bez promene vrednosti V), adodavanje crne boje se vrši povećanjem vrednosti V (bez menjanja vrednosti S). Sleditabela 4.3 koja prikazuje parametre HSV modela boja, i to za već pominjane odnose ugornjim tabelama: 100% zasićenost boja i 75% amplituda signala.

Slike 83

Tabela 4.3. HSV model boja: 100% zasićenost boja i 75% amplituda

Opseg W Y C G M R B BKH 0◦ ÷ 360◦ - 60◦ 180◦ 120◦ 300◦ 0◦ 240◦ -S 0÷ 1 0 1 1 1 1 1 1 0V 0÷ 1 0, 75 0, 75 0, 75 0, 75 0, 75 0, 75 0, 75 0

Slika 4.19 desno ilustruje HSI model boja u obliku dvostruke šestostrane piramide. Vrh ovepiramide ima vrednost I = 1, što odgovara beloj boji. Najniža tačka piramide predstavljacrnu boju i tu je I = 0. Komplementarne boje se nalaze na suprotnim pozicijama jedna uodnosu na drugu, pod uglom od 180◦.

Sledi tabela koja prikazuje parametre HSI modela boja, i to za već pominjane odnose ugornjim tabelama: 100% zasićenost boja i 75% amplituda signala.

Tabela 4.4. HSI model boja: 100% zasićenost boja i 75% amplituda

Opseg W Y C G M R B BKH 0◦ ÷ 360◦ - 60◦ 180◦ 120◦ 300◦ 0◦ 240◦ -S 0÷ 1 0 1 1 1 1 1 1 0V 0÷ 1 0, 75 0, 375 0, 375 0, 375 0, 375 0, 375 0, 375 0

Na slici 4.20 prikazan je pojednostavljen HSL model boja. Kao što je već rečeno, HSL jemodel boja koji je sličan HSV modelu boja.

Slika 4.20. HSL model boja

4.2.4. CMY, CMYK i PANTONE modeli boja

Ovi modeli boja bazirani su na apsorpciji svetlosti, tj. na osobini koju ima mastilo napapiru. Kako bela svetlost pada na poluprozirno mastilo, određene vidljive talasne dužinese apsorbuju, dok se ostale reflektuju nazad ka očima posmatrača. Kada se bela svetlostreflektuje sa papira i ako posmatrač vidi svetloplavu boju, to je zbog toga što svetlostapsorbuje crvenu boju i reflektuje svetloplavu (cijan). Slično tome, ljubičasta boja apsor-buje zelenu boju, a žuta apsorbuje plavu. To znači da svetloplava boja (C), ljubičasta(M) i žuta (Y) stvaraju subtraktivni model boja. U svakom modelu boja postoji tačka

84 Multimedija

(komponenta) gde je nemoguće dodati bilo koju boju. U subtraktivnom modelu je reč obeloj boji. To znači da se željena boja dobija na taj način što se od bele boje oduzimaneka boja, i zbog toga je ovaj model boja idealan za štampu na belom papiru. Ovakavmodel se naziva CMY model boja.

U teoriji, čiste komponente svetloplave boje (C), ljubičaste (M) i žute (Y) boje, kada sepomešaju, trebalo bi da apsorbuju svu svetlost i tako prikažu crnu boju. Međutim , svaštamparska mastila sadrže primese, tako da ova tri mastila (boje) proizvode tamnobraonnijansu umesto crne. To je dovelo do toga da mora da se uključi i crna boja u model bojakako bi ta boja figurisala u štampanom materijalu. Sa K se označava crna boja i na ovajnačin se došlo do "novog" modela boja pod nazivom CMYK.

U režimu CMYK, svakom pikselu se dodeljuje procentualna vrednost svake boje. Na-jsvetlije boje sastoje se od malog procenta mastila (boja), dok tamnije sadrže veće pro-cente. Na primer, svetlocrvena boja može da sadrži 2% svetloplave boje (C), 93% lju-bičaste boje (M), 90% žute boje (Y) i 0% crne boje (K). Na slikama koje su urađene umodelu boja CMYK, bela boja se dobija kada sve komponente imaju vrednost 0%.

Slika 4.21. Komponente CMYK modela boja i kompletan CMYK model boja

Pored ovih modela boja, pojavljuje se i PANTONE (Pantone Matching System) sistemusklađivanja boja. To je standardni sistem specifikovanja boja mastila u grafičkoj umet-nosti i štampanju, koji se sastoji od knjige uzoraka u kojoj je svakoj od oko 500 bojadodeljen broj. PANTONE može da se smatra međunarodnim sistemom boja koji se sas-toji od 14 osnovnih boja, za dobijanje preko hiljadu različitih nijansi izvedenih boja porecepturi PANTONE uzoraka boja. Na slici 4.22 prikazani su kolorni gamuti boja zaobičan monitor, u poređenju modela boja CMYK i PANTONE, i sa vidljivim spektromboja.

Monitori i skeneri koriste aditivne osnovne boje zbog toga što su emisioni uređaji, što značida oni direktno dodaju R,G i B komponente svetla tamnoj pozadini. Štampači, u druguruku, moraju da renderuju boje na papiru, tako da oni rade sa reflektovanim svetlom.Da bi ovo uopšte moglo da se odradi, štampač mora da radi sa suptraktivnim osnovnimbojama – cijan, magentom i žutom.

Na slici 4.23 prikazane su kombinacije boja u modelima boja CMY i CMYK. Trebanapomenuti da žuta (Y) boja apsorbuje tamnoplavu (B) boju, magenta (M) boja ap-sorbuje zelenu (G) boju i cijan (C) boja apsorbuje crvenu (R) boju. Na slici 4.23 se vidida pomenute boje stoje jedna nasuprot drugoj unutar dijagrama.

Slike 85

Slika 4.22. Komponente CMYK modela boja i kompletan CMYK model boja

Prevođenje CMY modela boja u RGB model boja može da se prikaže pomoću sledećegizraza: ⎡

⎣C

M

Y

⎤⎦ =

⎡⎣

111

⎤⎦−

⎡⎣

R

G

B

⎤⎦ .

Ne treba posebno pominjati da je ovo pojednostavljen izraz, ali je dovoljan kako bi korisnikstekao odgovarajući utisak.

Slika 4.23. CMY i CMYK - osnovne boje za "oduzimanje"

Konvertovanje CMYK u RGB

Da bi se izvršilo konvertovanje CMYK modela boja u RGB model boja, mora da se napravimeđukorak. To znači da se najpre CMYK model boja konvertuje u CMY model boja, aonda se CMY model boja konvertuje u RGB model boja. Treba napomenuti da se ovdebarata vektorima, što znači da se vrednosti svih komponenti svih modela boja nalaze uopsegu od 0 do 1. Da se ne bi stvorila zabuna, moraju da se uvedu sledeće oznake:

86 Multimedija

• komponente CMY modela biće označene indeksom 1, tj. CMY model će se označa-vati kao C1M1Y1; i

• komponente CMYK modela biće označene indeksom 2, tj. CMYK model će seoznačavati kao C2M2Y2K.

Konvertovanje CMYK modela u CMY model boja obavlja se pomoću izraza:

C1 = C2 (1 − K)K

M1 = M2 (1− K)K

Y1 = Y2 (1− K)K

Konvertovanje CMY modela u RGB model boja obavlja se pomoću sledećih izraza:

R = 255 (1− C1)

G = 255 (1−M1)

B = 255 (1− Y1)

Konvertovanje RGB u CMYK

Za konvertovanje RGB modela boja u CMYK model boja, takođe je potreban međukorak.To znači da se najpre RGB model boja konvertuje u CMY model boja, a onda se CMYmodel boja konvertuje u CMYK model boja. Treba još jednom napomenuti da se ovdebarata vektorima, što znači da se vrednosti svih komponenti svih modela boja nalaze uopsegu od 0 do 1. Konvertovanje RGB modela u CMY model boja obavlja se pomoćuizraza:

C1 = 1− R

255

M1 = 1− G

255

Y1 = 1− B

255

Sada sledi konvertovanje CMY modela u CMYK model boja, a to se obavlja pomoćusledećih izraza:

C2 = C1 − (C1,M1, Y1)min

M2 = M1 − (C1,M1, Y1)min

Y2 = Y1 − (C1,M1, Y1)min

K = K

gde član (C1,M1, Y1)min predstavlja najmanju vrednost prikazane tri komponente i nji-hovih vrednosti. Na primer, ako su komponente CMY modela boja (0, 45; 0, 23; 0, 88),onda će taj član da ima vrednost:

(C1,M1, Y1)min = 0, 23

za sve tri komponente CMYK modela boja: C2, M2 i Y2.

Slike 87

4.2.5. Još ponešto o bojama

Dubina boja pokazuje koliko boja i nijansi boja hardver i prateći softver mogu da prikažu.Uobičajeni sistemi nude 8-bitne (256 boja), 16-bitne (oko 64 000 boja) i 24-bitne (oko 16miliona boja) dubine boja. Naravno, poneki put se dubina boja opisuje kao aktuelni brojboja koje sistem može da prikaže, kao 256 boja ili 16, 7 miliona boja.

Hardver je ograničavajući faktor po pitanju boja. Internet pretraživač će iskoristiti onolikoboja koliko sistem može da upotrebi. Na primer, ako prikazanoj grafici treba 16, 7 milionaboja, ali hardver podržava prikazivanje samo 256 boja, onda će pretraživač da svede brojprikazanih boja na uobičajenu paletu boja, koju diktira hardver (to često nije ugodno).

Sledeći ograničavajući faktor je tip slike koju treba prikazati. Na primer, GIF format doz-voljava da se prikaže slika sa samo 256 boja od mogućih 16, 7 miliona. To je ograničenjeformata, a ne slike! To znači da JPG format može da prikaže svih 16, 7 miliona boja. Ovoje doprinelo tome da JPG postane najpopularniji format za prikazivanje realističnih slika.

8-bitnost boja omogućava prikazivanje 256 boja i to je minimalna mogućnost svakogsistema. Takvi su VGA sistemi i njihove mogućnosti su zato prilično ograničene. Kako se,uopšte, dolazi do broja boja? Do broja od 256 boja dolazi se na sledeći način:

28 = 256 ,

a to je posledica toga što postoji 8 bitova i 2 mogućnosti kao odgovor (ON i OFF ili 0 i 1).Sistemi sa 8-bitnim bojama daju siromašan prikaz i, uglavnom, su prevaziđeni.

16-bitnost boja omogućava prikazivanje oko 64 000 boja, što baš i nije tačan broj. Tačanbroj je:

216 = 65 536 ,

ali je odomaćen izraz od 64 000 boja ili 64K boja. Ove boje su dobar izbor za sisteme saograničenim mogućnostima video memorije.

24-bitnost boja omogućava prikazivanje oko 16, 7 miliona boja, što nije tačan broj. Tačanbroj je:

224 = 16 777 216 ,

ali je odomaćen izraz od 16, 7 miliona boja. Ove boje su najbolje rešenje za pravljenje iprikazivanje slika na računaru. Korišćenjem 24-bitnih boja, na primer, najbolje se prikazujugradijentni prelazi i najbolje se uklanjaju nazubljene ivice sa figure ili linije, pri radu sagrafikom.

4.2.6. "Matematičke operacije" sa bojama

Osnovni matematički i algebarski izrazi mogu da se primene i na boje da bi se iskazalielementarni principi sa bojama (uvedene su odgovarajuće aproksimacije kako ne bi došlodo kompleksnih problema).

Princip simetričnosti pokazuje da redosled prilikom dodavanja primarnih boja nije istikada se kreira i pojavljuje izlazna boja (slika 4.24). U izlaznoj boji primarne boje se po-javljuju u obrnutom redosledu, tj. najpre se pojavljuje primarna boja koja je poslednjadodata, i tako redom unazad.

88 Multimedija

Slika 4.24. Princip simetričnosti

Ako se prva boja označi slovom A, a druga boja slovom B, onda se princip simetričnostimože prikazati u matematičkom obliku:

A+ B = B+A

Dodavanje (ili oduzimanje) dve ili više boja dovodi do promene izlazne boje po pitanjunijanse, ali mora da se obrati pažnja na kumulativni porast zapremine (količine) boje.Na ovaj način se dolazi do principa kumulativne zapremine. Ako se saberu dve boje,izlazna boja ima zapreminu koja je zbir zapremina ulaznih primarnih boja. Prvi slučaj jesabiranje dve jedinične zapremine (količine) iste boje (slika 4.25).

Slika 4.25. Zbir dve boje

Ako se boja označi slovom A, onda se zbir dve jedinične mere ove boje može prikazati umatematičkom obliku:

1 ·A+ 1 ·A = 2 ·ADrugi slučaj je sabiranje jedinične mere različitih boja, gde je rezultat treća boja, a izlaznazapremina je jednaka zbiru jediničnih zapremina primarnih (ulaznih) boja (slika 4.26).

Slika 4.26. Zbir dve različite boje

Ako se ulazne primarne boje označe slovima A i B, a izlazna boja slovom C, onda se zbirjediničnih mera primarnih boja može prikazati u matematičkom obliku:

1 ·A+ 1 · B = 2 · CNa slici 4.27 ilustrovana su pojedinačna sabiranja primarnih boja CMY modela boja.Sabiranjem cijan i magente dobija se tamno (indigo) plava boja, sabiranjem cijan i žuteboje dobija se zelena izlazna boja i sabiranjem magente i žute dobija se crvena izlaznaboja.

Slika 4.27. Sabiranje primarnih boja

Slike 89

Zbir jediničnih mera primarnih boja može se prikazati u matematičkom obliku:

1 · C+ 1 ·M = 2 · B1 · C+ 1 · Y = 2 ·G1 ·M+ 1 · Y = 2 · R

Kada se pomešaju sve tri primarne boje u istoj proporciji (iste količine primarnih boja),onda se dobija crna boja kao izlazna boja (slika 4.28).

Slika 4.28. Sabiranje istih količina primarnih boja

Zbir jediničnih mera primarnih boja može se prikazati u matematičkom obliku:

1 · C+ 1 ·M+ 1 · Y = 3 · BKNa slici 4.29 prikazane su kombinacije koje proizvode crnu boju.

Slika 4.29. Dobijanje crne boje kao izlazne boje

Zbir jediničnih mera primarnih boja i određenih količina sekundarnih elemenata može seprikazati u matematičkom obliku:

1 · C+ 2 · R = 3 · BK1 ·M+ 2 ·G = 3 · BK1 · Y + 2 · B = 3 · BK

Šta se dobija ako se sekundarni elementi (boje) dodaju u istoj razmeri (slika 4.30), kaošto se to radilo sa primarnim bojama?

Slika 4.30. Sabiranje istih količina sekundarnih boja

Ako se krene od slike 4.29 i pripadajućih izraza, onda se dolazi do sledećih izraza:

2 · R = 3 · BK− 1 · C2 ·G = 3 · BK− 1 ·M2 · B = 3 · BK− 1 · Y

90 Multimedija

Sabiranjem levih strana gore navedenih izraza dolazi se do izraza:

2 · R+ 2 ·G+ 2 · B = 3 · BK − 1 · C+ 3 · BK − 1 ·M+ 3 · BK− 1 · Y

Ako se gornji izraz malo sredi, onda se dobija:

2 · (R+G+ B) = 3 · BK+ 3 · BK+ 3 · BK− (1 · C+ 1 ·M+ 1 · Y)

Daljim sređivanjem dobija se:

2 · (R+G+ B) = 9 · BK − 3 · BK = 6 · BK

Odavde sledi da je tražena izlazna boja:

R+G+ B = 3 · BK

Traženi rezultat je prikazan i na slici 4.31.

Slika 4.31. Rezultat sabiranja istih količina sekundarnih boja

Ove matematičke aproksimacije u potpunosti odgovaraju stvarnosti. To znači da trebasabrati identične jedinične mere sve tri komponente da bi se kao izlaz dobila crna boja.Ako sve tri komponente imaju vrednost 255, onda se kao izlaz dobija bela boja. Naovaj način se dolazi do odgovarajuće nijanse sive boje na prostornoj dijagonali unutar 3Dmodela boja u obliku kocke.

4.3. Grafički formati

Svaka sačuavana slikovita prezentacija naziva se grafičkom datotekom ili slikom. Kadasu u pitanju rasterski grafički sistemi, prikaz na displeju u boji je prezentovan u baferukodova kao grupa piksela sa RGB vrednostima. Monohromatske slike se čuvaju u formatubit mape (koristi se po jedan bit za svaki piksel). Uopšteno gledajući, bilo kakva rasterskaprezentacija slike naziva se rasterska datoteka. Mnogi grafički formati su razvijeni, arazvijaju se i dan danas, kako bi se organizovale informacije za adekvatan prikaz slike.Rasterske datoteke u "punoj" boji su velike datoteke, tako da su razvijeni neki grafičkiformati koji omogućavaju primenu odgovarajuće kompresije podataka kako bi se smanjilaveličina datoteke, jer je manju datoteku lakše čuvati i može lakše da se "transportuje".Kao dodatak ovome, broj boja prikazanih na kolornoj slici mora da se smanjuje kada setakva slika prikazuje na sistemu sa ograničenim mogućnostima za prikazivanje boja, ilikada je slika sačuvana u formatu koji ne podržava 24 bita po pikselu. U ovom delu ćese obratiti pažnja na upoznavanje sa najčešće korišćenim grafičkim formatima, kao i sametodama za redukciju veličine i slika i broja boja koje treba prikazati.

Slike 91

4.3.1. Konfiguracija datoteke slike

Vrednosti boja svakog piksela unutar rasterske slike se čuvaju kao pozitivne vrednosti ite vrednosti se nalaze u opsegu koji je diktiran brojem dostupnih bitova po pikselu. Naprimer, za "punu" boju (24 bita po pikselu) RGB slike, vrednost svake komponente bojesmeštena je u jedan bajt, gde se vrednosti R, G i B boja nalaze u opsegu od 0 do 255.Ostali modeli boja, kao što su HSV , HSB ili HSL, koriste se u komprimovanim formatima.

Grafički formati datoteka uključuju zaglavlja koji obezbeđuju informacije o strukturi tihdatoteka. Kada je reč o komprimovanim datotekama, zaglavlje može da sadrži u sebii tabelu i ostale detalje koji su neophodni za dekodiranje i prikazivanje komprimovaneslike. Zaglavlje može da sadrži različite informacije, kao što su veličina datoteke (brojlinija skeniranja i broj piksela po svakoj liniji skeniranja), broj bitova ili bajtova "dodelje-nih" jednom pikselu, upotrebljenu metodu komprimovanja (kompresije) da bi se smanjilaveličina datoteke, opseg boja za vrednosti koje se dodeljuju pikselu, kao i boju pozadinesame slike.

Neki algoritmi za komprimovanje slika koriste operacije sa pokretnim zarezom, čija primenamože da dovede do odgovarajućih greški. Kao dodataka ovome, neke metode koristeaproksimacije koje dovode do modifikovanja boja unutar slike. Kao rezultat, pojavljujese dekodirana slika iz komprimovane datoteke sa vrednostima boja koje ne odgovarajuoriginalnoj slici. Na primer, RGB boja definisana vrednostima (247, 109, 175) unutar ori-ginalne slike, može da postane boja sa vrednostima (243, 111, 177) posle dekodiranjakomprimovane datoteke. Ovakva promena boja može da se toleriše, jer ljudsko oko nijetoliko osetljivo na male razlike u boji.

4.4. Komprimovanje (sabijanje) podataka slike

Komprimovanje podataka je način da se ista informacije zapiše na disku, a da zauzmemanje mesta. Pošto postoje razni sadržaji i različite namene datoteka, onda je normalnoda postoji i veliki broj algoritama koji vrši komprimovanje na različite načine. Svim al-goritmima za komprimovanje je zajedničko da organizuju podatke u datoteci na složeniji(komplikovaniji) način, u odnosu na to kako su ti podaci organizovani u originalnoj da-toteci.

Komprimovane datoteke se čuvaju na disku i da bi se pročitale mora da, unutar sistema,postoji program koji će izvršiti dekompresiju. Komprimovanje i dekompresija su procesikoji traju, tako da korisnik mora da vodi i o tome računa kada se odlučuje za kompri-movanje podataka i kada se odlučuju za odgovarajući algoritam koji treba primeniti.

Svi poznati algoritmi za komprimovanje se dele u dve grupe:

1. algoritmi za komprimovanje bez gubitaka omogućavaju korisniku da dobije iden-tičnu datoteku, posle komprimovanja, originalnoj datoteci; i

2. algoritmi za komprimovanje sa gubicima omogućavaju korisniku da dobije da-toteku sa "gubicima", gde se "žrtvuju" neki podaci unutar datoteke i zbog toganovodobijena datoteka nije identična originalu.

92 Multimedija

Algoritmi za komprimovanje sa gubicima su daleko "moćnije" alatke, jer su komprimovanedatoteke i po nekoliko puta manje od originala. To se postiže, kako je već pomenuto,zanemarivanjem nekih podataka unutar originalne datoteke, ali nastale razlike, obično,nisu vidljive za ljudsko oko, što je posledica nesavršenosti samog ljudskog oka.

RLE komprimovanje (kodiranje)

Ova metoda komprimovanja naziva se kodiranje ograničavanjem radne dužine, dokRLE predstavlja skraćenicu od engleskog naziva Run-Length Encoding. RLE predstavljaformat komprimovanja podataka kod kojeg se čuvaju samo prvi uzastopni identični pikseliu nizu, zajedno sa ukupnim brojem piksela u jednom radnom navratu. Kada se datotekadekomprimuje (dekodira), svaki reprezentativni piksel se kopira ispravan broj puta da bise predstavili i pikseli koji nisu sačuvani. RLE komprimovanje je najbolje za jednostavnucrno-belu grafiku ili grafiku u jednoj boji.

Na primer, ako se vrednost 124 ponavlja 8 puta duž linije skeniranja, onda će u kom-primovanoj datoteci biti "spakovane" samo vrednosti 8 i 124. Ovo smanjuje originalnuveličinu od 8 (osam) bajtova na 2 (dva) bajta. Uvedeno je i pravilo da se negativnimbrojevima definiše broj vrednost koje se ne ponavljaju. Kao primer ove priče, sledeća listavrednosti

{20, 20, 20, 20, 98, 67, 31, 40, 40, 40, 40, 40, 40, 40, 40, ...}

može da se komprimuje (kodira) kao

{4, 20, -3, 98, 67, 31, 8, 40, ...}

gde se ukazuje na to da se vrednost 20 pojavljuje 4 puta, da slede 3 vrednosti koje sene ponavljaju, a reč je o vrednostima 98, 67 i 31, i nastavlja se ukazivanjem na to da sevrednost 40 pojavljuje 8 puta, itd. Ovaj primer komprimovanja (kodiranja) pokazuje dase 15 bajtova prvobitne datoteke komprimovalo na 8 bajtova.

LZW komprimovanje (kodiranje)

Ova metoda komprimovanja naziva se LZW kodiranje, dok LZW predstavlja skraćenicukoja je formirana od početnih slova imena autora ove metode, a reč je o autorima Lempel,Ziv i Welch. LZW metoda komprimovanja koristi ponavljanje nizova podataka prilikomnjihove kompresije u kodirani niz. Trebalo bi i pomenuti da ova metoda predstavlja osnovuza GIF kompresiju. Na primer, sledeća lista od 12 vrednosti

{128, 95, 200, 30, 10, 128, 95, 50, 240, 200, 30, 10, ...}

sadrži dva "šablona" koji se ponavljaju, i to su {128, 95} i {200, 30, 10}. Korisnik možeova dva šablona da zameni kodovima c1 i c2 kao:

{c1} = {128, 95} ,{c2} = {200, 30, 10} ,

Slike 93

dok preostalom šablonu {50, 240} može da se dodeli treći kôd:

{c3} = {50, 240} .

Ovo sve redukuje prvih 12 vrednosti ulazne liste na sledećih 5 bajtova:

{c1, c2, c1, c3, c2, ...}

Korisnik ne mora da dodeljuje poseban kôd za vrednosti koje se ne ponavljaju, kao što jeto bila vrednost {50, 240}, već u novu listu može da ostavi te vrednosti kako su se pojavilei u ulaznoj listi.

4.4.1. Često korišćeni Windows grafički formati

Stotine i stotine formata je razvijeno za prezentaciju grafičkih podataka sa različitim kon-tekstom i za različite sisteme. Operativni sistemi, na primer, obično koriste određen brojspecijalno dizajniranih formata sa različitim rutinama. Individualni formati su pravljeni zaspecifične aplikacije, kao što su aplikacije za trodimenzionalno modelovanje, za animaciju,za grafičke korisničke interfejsa, za video zapis, za vizuelizaciju načnih podataka, za slikanjei bojenje, za rad sa unakrsnim tabelama, za Internet komunikaciju, za difuzno emitovanjeili za transmisiju putem faksa. Trebalo bi pomenuti da su unutar ISO i ANSI standardadefinisani određeni formati i određene metode kompresije podataka za opštu upotrebu.

Grafički format je specifičan format u kojem je datoteka sa slikom sačuvana (zapisana).Naziv datoteke se sastoji iz dva dela - naziv datoteke i ekstenzija. Format se identifikujepomoću tri slova ekstenzije, a neki grafički formati imaju definisanu ekstenziju i sa četirislova. Definisanjem samog formata datoteke postoji mogućnost da korisnik odredi brojbita po pikselu, kao i neke dodatne informacije.

Slike koje mogu da se koriste i obrađuju na personalnim računarima čuvaju se u različitimformatima. Različiti grafički formati su sposobni da sadrže različite "kvalitete" boja. Svakiformat može da se klasifikuje prema broju "bitova po pikselu" koje taj format podržava,tj. da se klasifikuje prema "dubini boje":

• 1 bit po pikselu upućuje na sliku sa 2 boje;

• 4 bita po pikselu upućuje na sliku sa 16 boja;

• 8 bitova po pikselu upućuje na sliku sa 256 boja;

• 16 bitova po pikselu upućuje na sliku sa 32 768 boja;

• 24 bita po pikselu upućuje na sliku sa 16 777 216 boja.

Ovde će se pomenuti grafički formati koji se često koriste, jer je skoro nemoguće nabrojatisve grafičke formate koji postoje.

94 Multimedija

JPEG format

Skraćenica JPEG potiče od engleskog naziva Joint Photographics Experts Group, što značida je reč o formatu koji je formirala zajednička grupa fotografskih stručnjaka. Ako serealno pogleda, JPEG nije grafički format. nego je reč o izuzetnoj tehnici komprimovanjagrafičkih podataka sa gubicima. Ova tehnika može, bez vidljivih gubitaka u kvalitetu slikeza ljudsko oko, smanjiti veličinu datoteke i po nekoliko puta. To znači da JPEG pravikompromis između kompresije i gubitaka – postiže koeficijent kompresije od 100 : 1 saznačajnim gubicima i 20 : 1 sa malim gubicima.

Očigledno je da JPEG koristi osobinu ljudskog oka da slabije uočava razlike u nijansamaboje nego u intenzitetu svetlosti. Zato se ovom tehnikom najbolje komprimuje fotografijau punoj boji. Kada je fotografija "prevedena" u sivu skalu, onda su rezultati malo lošiji,jer su nijanse sive boje nijanse svetlosti. Kod crteža i kod teksta rezultati su najslabiji, jerse i pri manjem stepenu kompresije uočavaju defekti, tj. nedostaci.

Osnovni problem kod JPEG tehnike je što su oštećenja trajna i još gore je što se ti gubiciakumuliraju prilikom višetrukog uređenja (editovanja) slike. Posle određenog broja uređe-nja jedne iste slike, slika više neće izgledati kako treba, tj. biće mnogo lošija od originala(slika 4.32).

Slika 4.32. JPEG - pre i posle višestrukog komprimovanja

Zbog ovog problema ne bi trebalo uređivati (editovati) JPEG slike. Preporučuje se ure-đivanje slike u "sirovom" (nekomprimovanom) obliku ili slike koja se komprimuje bezgubitaka primenom odgovarajuće metode. To znači da korisnik može da se "igra" sa ne-komprimovanim originalom koliko hoće, a JPEG sliku pravi posle svih izmena kada hoćeda napravi malu datoteku koju treba poslati ili distribuirati.

BMP format

Ovo je uobičajeni format za bitmapiranu grafiku unutar operativnog sistema Windows.Prilikom stvaranja ovog formata ili pretvaranja nekog drugog formata u BMP format,korisnik može da izabere "dubinu boje". Ovaj format podržava sve dubine boja, a što sekomprimovanja tiče, BMP format podržava i RLE algoritam za komprimovanje za slike sa4 ili 8 bita po pikselu.

Slike 95

PCX format

Ovaj format je razvijen unutar firme ZSoft Corporation za program PC Paintbrush. Toje jedan od najstarijih formata za bitmapiranu grafiku, a koristi se i dan danas. To značida nema grafičkog paketa koji ovaj format ne prepoznaje i ne može da ga koristi. Slikesačuvane u PCX formatu podržavaju sve dubine boja, a vrednosti piksela mogu da sespecificiraju upotrebom RGB komponenti ili tabele boja. Kod PCX formata, podaci suuvek komprimovani i koriste RLE algoritam za kompresiju.

TIFF format

Skraćenica TIFF potiče od engleskog naziva Tag Image File Format. Ovaj format je raz-vio konzorcijum računarskih kompanija u cilju transfera rasterskih slika između različitihaplikacija i različitih sistema. Iako je TIFF format izuzetno kompleksan, treba priznatida je krajnje prilagodljiv i da može da se prilagodi pojedinačnim aplikacijama. Trebalo bipomenuti da ovaj format podržava i različite metode komprimovanja grafičkoh podataka.Uobičajeno je da se slike u TIFF formatu koriste u stonom izdavaštvu, prilikom prikazivanjamedicinskih slika, u grafičkim korisničkim interfejsima, prilikom prikazivanja satelitskihsnimaka, kao i prilikom transmisije putem faksa.

GIF format

Skraćenica GIF potiče od engleskog naziva Graphics Interchange Format. Ovaj format jejedan od starijih formata, mada se i dan danas koristi za prikazivanje jednostavnih slikana vebu. Dubina boje GIF formata se kreće od 1 do 8 bita po pikselu, što znači da ovajformat podržava maksimalno 256 boja. Slike sa GIF formatom su uvek komprimovane iprimenjena je LZW metoda komprimovanja grafičkih podataka.

GIF format je dobar za jednostavne crteže, crno-bele slike i za sitniji tekst. Jednostavneslike u GIF formatu se odlično komprimuju, tako da izlaz predstavljaju izuzetno mali fa-jlovi. To je jedan od razloga što se slike u GIF formatu dosta koriste na vebu. Ovaj formatima još neke osobine koje su razlog njegovog opstanka na tržištu, a to su transparentnost(providnost) i mogućnost animacije.

Sve bitmapirane slike u računaru prikazane su pravougaonom matricom piksela. Trans-parentnost omogućava varijantu da slika u GIF formatu ne mora da ima pravougaonukonturu, kao slike u ostalim formatima. Ako se neki piksel proglasi da je transparentan(providan), onda se kroz njega providi pozadina na kojoj GIF slika leži.

Pokazalo se da GIF format, pored statičnih, podržava i animirane slike. Dovoljno je kreiratinekoliko slika, koje posmatrane u nizu predstavljaju animaciju. To je najbolje odraditi krozslojeve u programu Photoshop, a onda pomoću programa ImageReady formirati animacijugde će svaki sloj biti pojedinačni kadar u animaciji. Prikazivanje svakog kadra na ekranuse naknadno podešava, tako da korisnik ima punu slobodu u kreiranju željene animacije.

96 Multimedija

PNG format

Skraćenica PNG potiče od engleskog naziva Portable Network Graphics. Format PNG jenovi format sa komprimovanim grafičkim podacima, koji može da koristi svako, bez ikakvihograničenja. Ovaj format je predviđen da bude standardni grafički format na vebu, madato ide dosta sporo.

Kada se uporede PNG i GIF formati ima mnogo preplitanja, ali PNG format ima triprednosti u odnosu na GIF. Te prednosti su: alfa kanali (reč je o mogućnosti podešavanjanivoa transparentnosti), gama korekcija (to je mogućnost da se kontroliše koliko je slikasvetla ili tamna) i 2D preplitanje (reč je o primenjenoj metodi za progresivno prikazivanje).Kada je reč o komprimovanju podataka, PNG format ima bolju kompresiju od GIF formata,ali ukupna razlika je između 5% i 25%. Trebalo bi pomenuti da PNG nema podršku zaanimaciju.

TGA format

Skraćenica TGA potiče od engleskog naziva Truevision Graphics - Adapter i ovaj formatje razvijen od strane Truevision korporacije. Trebalo bi napomenuti da je TGA format unarodu poznat i kao "Targa" format. Format TGA se obično koristi za editovanje (uređi-vanje) video materijala. Ovaj format podržava sve dubine boja, a što se komprimovanjatiče, TGA format podržava i RLE algoritam za komprimovanje za "veće" slike.

Slika 4.33. Upoređenje formata i veličina fajlova

Na slici 4.33 prikazane su iste slike ruskog borbenog aviona Su-27, ali zapisane u pome-nutim formatima. Na osnovu prikazanih podataka korisnik može da donese odgovarajućezaključke. Na gornjim slikama postoje tekstualni podaci i reč je o sledećim informacijama:

• JPEG format slike zauzima 593Kb na disku.

• BMP format slike zauzima 4 448Kb ∼= 4, 45Mb na disku.

Slike 97

• PCX format slike zauzima 3 958Kb ∼= 3, 96Mb na disku.

• TIFF format slike zauzima 4 467Kb ∼= 4, 47Mb na disku.

• PNG format slike zauzima 1 295Kb ∼= 1, 3Mb na disku.

• TGA format slike zauzima 4 446Kb ∼= 4, 45Mb na disku.

4.4.2. Macintosh grafički formati

Na Macintoshu praktično svaka aplikacija može da uveze ili izveze PICT datoteke. PICTje komplikovan, ali raznovrstan format – razvijen je kao zajednički format koji je uvekna raspolaganju korisnicima Macintosh-a. U PICT datoteci i bitmape i vektorski objektimogu da egzistiraju jedan pored drugog. Mnogi programi za crtanje za Macintosh-a, kaošto su Illustrator ili Freehand, dozvoliće uvoz bitmape, ali nemaju sposobnost daje edituju. Multimedijalni programi koji mogu da uvezu PICT slike možda neće koristitiiscrtane objekte koji su deo datoteke, ali će ih obično pretvoriti u bitmape.

4.4.3. Još neki grafički formati

Do sada je bilo reči o grafičkim formatima koje korisnik sreće svakog dana i sa kojima radi.Kako je već rečeno, postoji još mnogo grafičkih formata i čovek ne može sve da ih pomene.U ovom delu će se izvršiti nabrajanje još nekih formata sa osnovnim objašnjenjima. To susledeći grafički formati koje korisnik može da sretne u radu sa odgovarajućim apliakcijama:

• EPS - skraćenica od engleskog naziva Encapsulated PostScript. Predstavlja stan-dardan format datoteka za importovanje i eksportovanje postskript datoteka. Onošto je bitno za ovaj format je to da EPS datoteka može da bude "uključena" udrugu datoteku. Trebalo bi napomenuti da EPS datoteka može u sebi da sadržikombinaciju teksta, grafike i slika.

• AI - skraćenica od engleskog naziva programa Adobe Illustrator. Ovo je osnovnadatoteka za crtanje unutar ovog programskog paketa i kompatibilna je sa većinomostalih grafičkih paketa.

• WMF - skraćenica od engleskog naziva Windows MetaFile. Ova oznaka predstavljaosrednji vektorski format za programe unutar operativnog sistema Windows i koristise za lokalnu razmenu podataka.

• CDR - skraćenica od engleskog naziva programa CorelDRAW. Ovo je osnovna da-toteka za crtanje unutar ovog programskog paketa i kompatibilna je sa većinomostalih grafičkih paketa.

• DWG - predstavlja grafički format programa za projektovanje AutoCAD firme Au-todesk. Ovo je osnovna datoteka za crtanje unutar ovog programskog paketa iu poslednje vreme postaje komaptibilna sa većinom formata ostalih grafičkih ap-likacija.

98 Multimedija

• DXF - skraćenica od engleskog naziva Drawing eXchange Format. DXF format jevektorski format programa za projektovanje AutoCAD firme Autodesk i možda jenajpodržavaniji vektorski format u svetu danas. Većina grafičkih paketa ovaj for-mat sadrže u sebi, tako da je moguća razmena podataka bez gubitaka pomoću ovogformata.

• 3DS - predstavlja grafički format programa 3D Studio MAX, koji je neprevaziđenpo pitanju vizuelizacije i, eventualno, animacije. I grafički format 3DS postaje sveviše kompatibilan sa novijom generacijom određene vrste grafičkih aplikacija.

Kao što je već rečeno, ovo su grafički formati koji se "sreću" u svakodnevnoj upotrebiračunara i odgovarajućih grafičkih aplikacija, a o ostalim formatima drugi put više.

Slika 4.34. Raznovrsni primeri 3D modela i prateće kompozicije

Glava 5

Animacija

Animacija je postupak stvaranja iluzije kretanja crtežima, modelima ili beživotnim stvari-ma. To je optička iluzija kretanja zahvaljujući fenomenu poznatom kao perzistencija vidai može se izvesti na više načina. Najčešći metod prikazivanja animacije je film ili videoprogram, mada postoji i nekoliko drugih formi predstavljanja animacije.

Moguće je animirati ceo projekat ili pojedine njegove delove, čime se oni naglašavaju ili imse daje poseban značaj. Za kratku demonstraciju proizvoda sa malo korisničke interakcijeima smisla da se dizajnira ceo projekat kao film i da se drži cela prezentacija stalno upokretu. Za podršku govorniku može se animirati označeni tekst, može da se napravi dataj tekst uleće ili mogu da se naprave histogrami sa količinama koje rastu i smanjuju se;zatim, treba dati govorniku kontrolu nad ovim elementima koji privlače pažnju.

Vizuelni efekti kao što su brisanje, nestajanje, zumiranje i rastapanje su na raspolaganju uvećini programskih paketa, a ponešto od toga može da se koristi za primitivnu animaciju.

5.1. Istorija animacije

Rani pokušaji da se zabeleži fenomen pokretnih crteža pronađeni su na crtežima u peći-nama iz paleolitskog doba, gde su životinje prikazane sa više nogu u različitim pozicijama,pokušavajući da prikažu privid kretanja.

Slika 5.1. Zemljana vaza pronađena u Iranu pre više hiljada godina ima 5 crteža u nizu

Jedan od prvih uređaja koji je napravljen da stvara pokretne slike bio je Zoetrope. Na-pravljen je u Kini, a kasnije se u raznim varijantama pojavljivao u više različitih zemaljasveta sa sličnom tehnikom rada. Izraz zoetrope potiče iz grčkog jezika sa sledećimznačenjem: zoe – "život" i tropos – "okret", što bi se moglo prevesti kao "točak života".

100 Multimedija

Slika 5.2. Moderna replika Zoetropa

Sastoji se od cilindra sa prorezima sa strane. Oko unutrašnje strane cilindra nalazi seniz slika ispod proreza. Kako se cilindar okreće, posmatrač gleda kroz proreze crteže nasuprotnom kraju cilindra čime se stvara iluzija pokreta.

Magična lampa je prethodnik modernog projektora (slika 5.3). Sastojala se od providneslike i jednostavne lampe. Konkavno ogledalo se nalazilo iza svetlosnog izvora koje je sa-kupljalo svetlost i projektovalo je kroz otvor na kome se nalazila slika. Sočiva su prikazivalauvećanu sliku na platnu. U početku su glavni izvori svetlosti bile sveće ili uljne lampe.Ovakvi izvori svetlosti bili su prilično neefikasni i stvarali su slabe projekcije.

Slika 5.3. Magična lampa

Sa pronalaskom Argandove lampe, slika je postala kvalitetnija, i svetlija. Kasnije su usle-dila mnoga poboljšanja koja su sliku činila stabilnijom, a mnogi izumi su doveli do togada su napravljeni prvi uređaji koji su mogli da prikazuju pokretne slike.

Upotreba ovakvih uređaja bila je šarolika. Koristili su ih u pozorištima, gde bi prikazivalislike iz stvarnog života pre početka pozorišne predstave, koristili su ih mađioničari, slikari,pesnici, i mnogi drugi koji su na taj način pokušavali da svoj rad učine bližim publici, daim se dopadnu, da ih očaraju i zadive, a često su ih koristili i razni šarlatani koji su na taj

Animacija 101

način prikazivali duhove, pokojne vraćali u život i činili sve samo da bi izvukli novac odlakoverne publike.

Sve ove naprave osmislili su zaljubljenici u svet pokretnih slika, koji su na taj način želelida uhvate jedan trenutak iz života i da ga zauvek sačuvaju od zaborava. Njihov trud sena kraju isplatio i već su krajem devetnaestog i početkom dvadesetog veka počeli da sepojavljuju prvi animirani filmovi.

Ne postoji jedna osoba koja se može smatrati "tvorcem" animacije, pošto je veći broj ljudibio uključen u razne projekte koji se mogu smatrati raznim tipovima animacije.

Georges Melies je bio tvorac specijalnih efekata na filmu. Jedan je od prvih ljudi koji jeupotrebio animaciju u svojim tehnikama.

Stuart Blackton je verovatno prvi američki filmadžija koji je upotrebio stop motion i rukomcrtanu animaciju. Pomoću ovih tehnika pravio je crteže na tabli koji su izgledali kao dase kreću i menjaju oblike. Njegov animirani film Humorous phases of funny faces čestose navodi kao prvi animirani film, a njega smatraju prvim pravim animatorom.

Slika 5.4. Tradicionalna animacija – animatori crtaju ključne frejmove, a asistenti crtajufrejmove između ključnih frejmova

Francuski umetnik Emile Cohl, započeo je crtanje stripa i stvorio je film Fantasmagorie.Film se sastojao od figure koja se kretala menjajući svoj oblik, kao što je flaša koja sepretvara u cvet. Film je napravljen tako što je svaki frejm iscrtavan na papiru, a potomfotografisan na negativu filma. Ovaj postupak čini da se film Fantasmagorie smatra prvimanimiranim filmom koji je napravljen, korišćenjem tehnike koja je kasnije postala poznatakao tradicionalna animacija.

102 Multimedija

Francuzi, August i Luj Lumijer patentirali su tehnologiju za snimanje sekvencijalnih slikana fleksibilnoj filmskoj osnovi. Većina prvih animiranih filmova je bila iz Francuske, gdesu prikazivani po restoranima, kafeterijama i pozorištima. Početkom dvadesetog veka,tehnika celuloida i papira već je dominirala animiranom produkcijom u Americi. Ovakavvid animacije bio je pogodan za izradu animiranih filmova u stilu montažne trake gde jeradio čitav niz ljudi koji su obavljali određene i jednostavne zadatke. U Evropi, takav stilrada nije bio popularan, pa je bila zastupljenija animacija glinom i druge forme animacijekoje su zahtevale samo nekoliko osoba u postupku izrade animacije.

5.2. Principi animacije

Animacija je moguća zbog biološkog fenomena poznatog kao perzistencija vida i odgo-varajućeg psihološkog fenomena. Objekat koji vidi ljudsko oko ostaje hemijski preslikanna očnoj retini jedan kratak period posle viđenja. U kombinaciji sa potrebom ljudskoguma da konceptualno dovršava percipiranu akciju, omogućava se da se niz slika koje semenjaju vrlo malo i vrlo brzo, jedna za drugom, stopi u vizuelnu iluziju pokreta. Sledećaslika pokazuje nekoliko ćelija ili okvira u rotirajućem logotipu. Kada se slike progresivno ibrzo menjaju, strelica kompasa se percipira kao da se vrti.

Slika 5.5. Ključni kadrovi za kretanje kazaljke kompasa ili kazaljke na satu

Televizijski video gradi 30 okvira (frame) ili slika svake sekunde; brzina kojom se svakiokvir zamenjuje sledećim omogućava da izgleda kao da se slike glatko spajaju u pokret.Film se obično snima brzinom od 24 okvira u sekundi, ali upotrebom projekcionih trikova(blenda u projektoru šalje svetio dva puta kroz svaku sliku) treptanje se "penje" na 48puta u sekundi i ljudsko oko to vidi kao pokretnu sliku. Na nekim projektorima svaki okvirse prikazuje tri puta pre nego što zupčanik povuče traku naniže do sledećeg okvira, zaukupnih 72 treptaja u sekundi, što pomaže da se eliminiše efekat treptanja – što je višeprekida u sekundi, to zrak svetla izgleda neprekidniji. Brza promena posmatrane slike jeprincip animatične knjige za brzo prelistavanje, ili zoetropa. Da bi se objekat nateraoda "putuje" preko ekrana dok menja oblik, treba mu samo promeniti oblik i transliratiga za nekoliko piksela u svakom okviru. Zatim, kada se ubrzano reprodukuju frejamovi,promene se spoje i pojavljuje se pokret i animacija.

5.3. Tipovi animacije

Od nastanka animacije do danas razvili su se razni oblici animacije. Neki su koristili uto vreme postojeće tehnike i dalje ih razvijali i prilagođavali svojim potrebama, drugi sustvarali i kasnije patentirali svoje tehnike animacije, tako da danas postoji više tehnikakoje su u upotrebi, svaka za posebnu namenu.

Animacija 103

Stop motion je vrsta animacije gde se pravi privid fizičkog kretanja objekata. Objekat sepomera u malim razmacima, svaki pokret se fotografiše, i kada se pusti kao kontinuiranasekvenca, stvara se iluzija kretanja. Na taj način mogu da se prave kretanja objekata kojisu inače statični, kao što je kretanje čaše ili novčića po stolu.

Clay animacija je jedna od mnogih oblika stop motion animacije. Svaki animirani predmetse može deformisati, napravljen je obično od gline, oko žičanog skeleta. Kao u drugimoblicima animacije, objekat se formira, postavlja se na scenu, fotografiše se, zatim seručno pomeri i modeluje, ponovo se fotografiše, i taj posao se ponavlja dok se ne dobijedovoljna dužina filma.

5.4. Računarska animacija

Računarska ili kompjuterska animacija obuhvata različite tehnike, zajedničko im je toda su stvorene digitalno na računaru.

U početku, računari su korišćeni za jednostavnije grafičke elemente, pošto tadašnja tehno-logija nije bila u mogućnosti da manipuliše grafikom, na način koji bi bio zadovoljavajućiu poređenju sa tadašnjom tradicionalnom animacijom.

Izraz "računarska grafika" nastao je 1960. godine i njegov tvorac je bio Williams Fetter,grafički dizajner za Boeing. Računarska grafika se razvijala zajedno sa grafičko - raču-narskim hardverom.

Prvi kompjuterski displej je imao MIT Whirlwind I kompjuter, koji je generisao jed-nostavne slike. Kasnije su usledile verzije TX-0 i TX-2, što je povećalo interesovanje zaračunarsku grafiku kasnih pedesetih godina dvadesetog veka. Nastanak Sketchpad-a, kojije konstruisao Ivan Sutherland, predstavlja prve korake interaktivne računarske grafike igrafičkog korisničkog interfejsa.

Slika 5.6. Sketchpad koji je konstruisao Ivan Sutherland

104 Multimedija

Sredinom šezdesetih godina, veliki kompjuterski grafički projekti su započeti na MIT-u,General Motors-u, Bell Labs-u. MIT je razvio napredni kompajlerski jezik za grafičkoprogramiranje. Apple je 1968. godine izmislio ray tracing – sistem renderovanja putempraćenja svetlosnog zraka.

Tokom sedamdesetih godina, personalni kompjuteri su postali jači, sposobni da iscrtavajukako osnovne, tako i složene oblike. Umetnici i grafički dizajneri su počeli da koristepersonalne računare, posebno Commodore Amiga i Macintosh, kao ozbiljne dizajnerskealate, što im je štedelo vreme, a njihovi crteži su bili precizniji od drugih metoda.

Moderni računari, počev od 1980-ih, počeli su da koriste grafički korisnički interfejs (GUI).Grafika je jedan od važnih pet elemenata multimedijalne tehnologije. 3D grafika postajepopularna 1990-ih u video igricama, multimediji i animaciji. Razvijaju se moćne mašine sahardverom koji je bio u stanju da u realnom vremenu iscrtava kompleksne oblike koristećirazne tehnike i napredne algoritme, koji su omogućili fotorealistične efekte, što je doprineloda industrija računarskih igrica tokom 1990-ih doživi pravi "bum", sa tržištem vrednimstotine milijardi dolara na godišnjem nivou. Tokom 1996. godine, na svetskom tržištu sepojavio Quake, jedna od prvih kompletnih 3D igrica (slika 5.7).

Slika 5.7. Određeni ekrani iz računarske igrice Quake

Računarski stvorene slike (Computer-generated imagery, CGI) je polje računarske grafikekoje se bavi specijalnim efektima. CGI se koristi u filmovima, televezijskim programima ireklamama. Takođe, CGI može da se vidi u računarskim igrama, iako veoma ograničeno,jer se grafika izvršava odmah (što je veoma zahtevno), stoga se češće vide uvodne scenekoje su već unapred stvorene (a visokog su kvaliteta).

CGI se koristi zbog toga što je u većini slučajeva jeftiniji nego fizičke metode, kao što jeskupljanje velike mase ljudi da bi simulirali pubilku i slično. Takođe, umetnik koji radi saCGI ne treba glumce, on ih pomoću računara stvara.

Time se ušlo u novu eru gde se pokazala puna snaga modernih računara, koji su sada biliu stanju da pruže mnogo više i na polju animacije. Iako je i ranije bilo pokušaja da senapravi animirani CGI film, Toy Story (slika 5.8) se smatra prvim animiranim filmom kojije u potpunosti urađen kompjuterskom tehnologijom. Zarada koju je ovaj film postigaoširom sveta, sjajne kritike i pohvale, kako na račun novih tehnoloških inovacija tako i napolju same animacije, učinile su ovaj film predvodnikom novog kompjuterskog doba.

Kompjuterska animacija se pravi pomoću hardvera računara i određenog programa zaanimaciju. Dobri rezultati se mogu postići sa osnovnim programima, ipak rendering možeoduzeti mnogo vremena na običnom kućnom računaru.

Animacija 105

Slika 5.8. Animirani film Toy Story

Zbog toga, profesionalni animatori koriste moćne radne stanice, koje koriste dva ili četiriprocesora, i koje su specijalizovane za renderovanje. Veliki broj radnih stanica (poznatijihkao rendering farme), umrežavaju se kako bi zajedno činile jedan gigantski računar.Kao rezultat, dobija se slika sa izuzetno velikim brojem detalja, fotorealističnih karaktera,a ušteda vremena u odnosu na tradicionalnu animaciju je ogromna.

U narednom odeljku, biće više reči o vrstama računarske animacije. Neki tipovi animacijei način rada su preuzeti iz klasične animacije, a neki do krajnjih granica koriste računarekako bi stvorili izuzetne digitalne slike.

5.5. Vrste računarske animacije

2D animacija je proces stvaranja pokretnih slika u dvodimenzionalnom prostoru, bilo daje reč o tradicionalnoj animaciji ili kompjuterskoj animaciji. Svaki frejm se posebno slika,a zatim se sve slike naizmenično prikazuju, jedna za drugom, brzinom od 24 sličice usekundi ili brže. Tim postupkom oko može da se zavara, da bi se stvorila iluzija pokreta.

Slika 5.9. Primeri 2D animacije

106 Multimedija

Kompjuterska animacija je digitalni naslednik stop motion animacije. Slike se stvaraju uračunaru, animator pravi pokrete pomoću određenog programa. Program ne pravi svakifrejm, već se nacrta početna i krajnja pozicija objekta koji treba animirati, tj. pravese ključni frejmovi, a računar automatski izračunava frejmove koji se nalaze između dvaključna frejma. Ovakav način upotrebe računara dosta je skratio period koji je bio potrebanda bi se uradio jedan sekund animacije na tradicionalan način, a mnogobrojne animatorezamenili su računari izvanrednih performansi.

CGI (Computer Generated Imagery) animacija je umetnost stvaranja pokretnih slikauz upotrebu računara. 3D animatori izrađuju modele uz pomoć posebnog programa, timodeli se "kače" na virtuelni skelet, zatim se ruke, noge, oči, usta, odeća figure pomerajuu ključnim frejmovima. Razliku između ključnih frejmova računar automatski proračunavau procesu koji je poznat kao tweening ili morphing. Konačno, animacija se renderuje.

Slika 5.10. CGI u punom sjaju

Najčešća upotreba CGI-a je u domenu 3D računarske grafike, specijalnim efektima nafilmu, televiziji, u reklamama i raznim vrstama simulacija.

CGI se često upotrebljava za vizuelne efekte, jer se mogu bolje kontrolisati od nekih drugihfizičkih procesa kao što je izrada minijaturnih modela, scena ili unajmljivanje mnogobroj-nih statista za masovne scene u filmovima. Ušteda u svemu, posebno u novcu, je velika.

Ubrzani razvoj CGI softvera i povećana snaga računarskih procesora, omogućavaju umet-nicima i malim kompanijama da proizvedu profesionalne filmove, igrice i razne umetničkeforme, koristeći kućne računare.

Motion capture, motion tracking ili mocap su termini koji opisuju proces snimanjapokreta, a zatim prenošenje tih pokreta na digitalni model. Primena mu je raznovrsna, odvojne upotrebe, preko sveta zabave i sporta, do primena u medicini. U filmskoj industriji,motion capture se odnosi na snimanje jednog ili više glumaca u sceni, koji su obučeniu posebno odelo (slika 5.11). Na odelu su prikačeni specijalni svetleći markeri, kamerasnima njihove promene položaja i rotacije i tako snimljena scena se ubacuje u računar,koji uzima podatke sa markera i primenjuje ih na digitalno izrađeni model. Može da seprati motion capture kamere, da bi se napravila virtuelna kamera koja će moći da radi kaoprava. Na taj način će digitalni karakteri imati istu perspektivu kao i glumac na sceni.

Animacija 107

Slika 5.11. Igrač u specijalnom odelu sa svetlećim markerima

Ovaj sistem ima i svoje prednosti i svoje mane. Prednosti su sledeće:

• Ovaj sistem može da prikaže rezultate rada gotovo u realnom vremenu, što znatnosmanjuje troškove produkcije.

• Količina rada ne varira sa kompleksnošću izvođenja na sceni, kao kod tradicionalneanimacije, što omogućava da se izvrše mnogobrojni testovi i različiti pristupi presamog snimanja.

• Kompleksni i realistični pokreti mogu se snimiti sa velikom preciznošću.

Slika 5.12. Primeri karakter animacije

Glavne mane sistema su:

• Potreban je poseban hardver i softver da bi se izvršilo procesuiranje podataka.

• Sama cena opreme i osoblja koji bi njom rukovali može biti ograničavajući faktor zamanje produkcije.

• Rezultati su ograničeni snimljenim materijalom, naknadno se ne mogu dodavati novipodaci.

108 Multimedija

• Pokreti koji ne slede fizičke zakonitosti, ne mogu se snimiti.

Karakter animacija je specijalizovano područje animacije vezano za animaciju jednogili više karaktera u animiranom filmu (slika 5.12). Predstavlja deo velike produkcije, i uumetničkom smislu je jedinstvena jer uključuje prikaz misli i emocija kao dodatak fizičkompokretu. Iako je tipična namena karakter animacije u animiranom filmu, njena ulogau industriji računarskih igrica je ogromna. Ljudi koji razvijaju igrice, koriste komplikovanekaraktere koji omogućuju korisniku da se u potpunosti sjedini sa likom u igri kako bi njegovdoživljaj bio što potpuniji.

5.6. Budućnost računarske animacije

Upotreba računara dovela je do novog pristupa animaciji. Počelo je tako što su raču-narski stručnjaci videli mogućnost u računarima kako bi izradili odlične slike, koje bi bileteško, ako ne i nemoguće napraviti na drugačiji način. Tokom druge polovine dvadesetogveka, računarski generisana grafika upotrebljena je veoma uspešno u velikim holivudskimfilmovima kao što su: Zvezdane Staze, Park iz doba Jure itd.

CGI je upotrebljen za izradu impresivnih scena, za koje bi inače bilo potrebno mnogonovca za izradu realističnih maketa. Jedan od većih izazova u kompjuterskoj animaciji,predstavlja izrada fotorealističnih ljudskih karaktera. Do sada, uglavnom su pravljene ani-macije životinja, science fiction karaktera i crtanih ljudskih figura.

Neki filmovi su napravili pokušaj da prikažu realistična ljudska bića, kao što je to urađenou filmu Final Fantasy (slika 5.13), ali zbog izuzetne kompleksnosti ljudskog tela, pokretai mimike, realistična simulacija ljudi ostaje jedan od najvećih izazova u računarskoj ani-maciji.

Slika 5.13. Scene iz filma Final Fantasy

Budućnost animacije je teško zamisliti, a naročito predvideti. Svaki dan neki novi program,nova tehnika izlazi na tržište i postavlja nove kriterijume u računarskoj animaciji.

U budućnosti, neki ljudi očekuju da će virtuelna realnost zameniti sadašnje tehnike 2Di 3D animacije, što znači da će osoba koja gleda film, videti sebe u tom filmu kao i osobakoja taj film posmatra sa strane.

Glava 6

Video

Pokretni video je elemenat multimedije koji može čvrsto da drži interes studenta za učenjepomoću računara. Digitalni video najviše i angažuje od svih multimedijalnih mogućnosti;to je vrlo moćno sredstvo da se korisnici računara približe realnom svetu. To je, takođe,efikasan metod da se isporuči multimedija publici koja je odrasla uz televiziju. Sa videoelementima u projektu, korisnik može efikasno da predstavi svoje poruke i da pojača priču,a gledaoci naginju ka tome da usvoje što više od onog što vide. Ali, treba biti krajnjeoprezan! Video koji nije dobro osmišljen ili nije dobro produciran u stanju je da degradiraprezentaciju.

Od svih multimedijalnih elemenata video postavlja najviše izvođačke zahteve pred računari njegovu memoriju. Treba se setiti da nepokretna slika najvišeg kvaliteta na računarskomekranu može da zahteva čak megabajt memorije. To treba pomnožiti brojem 30 (tolikoputa u sekundi se slika menja da bi se dobio privid pokreta) i potrebno je 30 megabajtamemorije po sekundi kako bi se reprodukovala, ili 1, 8 gigabajta memorije u minutu, ili108 gigabajta na sat. Samo premeštanje svih ovih slika iz memorije računara na ekrantom brzinom bilo bi problem i za superračunar. Neke od najinteresantnijih i najčudnijihmultimedijalnih tehnologija i istraživanja danas se posvećuju komprimovanju podataka zaslike digitalnog videa u upravljive tokove informacija.

Ako je korisnik u stanju da kontroliše platformu za isporučivanje za projekat, može da do-bije najveće video performanse dodavanjem posebnih hardverskih i softverskih proširenja.Hardver za video kompresiju će obezbediti da se radi sa videom na celom ekranu, u punompokretu. Razvijene audio kartice će omogućiti da se koristi zvuk CD kvaliteta. Korisnikmože da instalira i superbrze RAID (Redundant Array of Independent Disks) diskove kojiće podržavati velike brzine transfera, a u sistemu može da se definiše da se video podelovima unosi u RAM, radi brže reprodukcije.

Pažljivo isplaniran, dobro izveden video spot može da napravi dramatičnu razliku u mul-timedijalnom projektu. Međutim, pre nego što se korisnik odluči da u svoj projekat dodavideo, od suštinske važnosti je da razume medij, njegova ograničenja i troškove.

Video standardi i formati se i dalje usavršavaju dok se tehnologije prenosa, skladištenja,kompresije i prikaza formiraju u laboratorijama i na tržištu, gde su uključeni oprema i

110 Multimedija

postprocesiranje od analognog početka do digitalnog završetka, od "hvatanja" ekrana dokrajnjeg prikazivanja. Rad sa današnjim multimedijalnim videom može da se uporedi saputom kroz pustinju – korisnik može da postavi šator na udobnom visokom zemljištu ida otkrije da je pokretni pesak, preko noći, "sahranio" i njegov pristup i njegovu investi-ciju. U današnje vreme tehnologije sve ima tendenciju da se brzo menja, tako da trebadržati korak sa zahtevima i potrebama. To je tačno, posebno u današnja vremena kada setelevizije kreću od NTSC (National Television Standard Committee) standarda ka novomDTV (Digital Televison) standardu.

6.1. Kako video radi?

Kada svetlo odbijeno od objekta prolazi kroz objektiv video kamere, pretvara se u elektron-ski signal specijalnim senzorom koji nosi oznaku CCD i predstavlja akronim od engleskognaziva Charge-Coupled Device. Vrhunske kamere za emitovanje mogu da imaju čak triCCD-a (po jedan za crvenu, zelenu i plavu boju) da bi se povećala rezolucija kamere. Izlaziz CCD-a obrađuje kamera u signal koji sadrži tri kanala informacija o boji i sinhroniza-cionim pulsevima (sync). Ako se svaki kanal kolorne informacije prenese preko sopstvenogprovodnika, izlazni signal se zove RGB (red, green i blue), što je najomiljeniji metod zaviši i profesionalni nivo video rada.

U analognim sistemima video signal iz kamere se isporučuje na Video In konektor video-rekordera, gde se snima na magnetsku videotraku. Kamkorder može da kombinuje ikameru i snimanje na traku u jednom uređaju. Jedan ili dva kanala zvuka se, takođe,mogu snimiti na traku (mono ili stereo). Video signal se snima na traku obrtanjem glaveza snimanje koja menja lokalne magnetske osobine površine trake u nizu dugačkih dijago-nalnih pruga. Pošto traka sledi helikoidalnu putanju, to se zove prolazno helikoidalno

snimanje. Kao što je to ilustrovano na slici 6.1, svaka pruga predstavlja informaciju zajedno polje video okvira.

Slika 6.1. Dijagram putanje trake preko video glavo za analogno snimanje

Video 111

Pojedinačni video okvir se sastoji od dva isprepletena polja. Audio se snima na zasebnompravolinijskom zapisu na vrhu videotrake, iako se u nekim sistemima za snimanje (za trakuod 3/4 inča i za traku od 1/2 inča sa audiom visokog kvaliteta) zvuk snima helikoidalnoizmeđu video pruga. Pri dnu trake je kontrolni zapis, koji sadrži impulse za regulisanjebrzine. Treking (tracking) je fino podešavanje traka da se one ispravno poravnavaju kakose kreću po reprodukcionim glavama.

U digitalnim sistemima video signal iz kamere se najpre digitalizuje kao pojedinačni frejmi podaci se komprimuju pre nego što se upišu na traku u jednom od nekoliko formata: DV,DVCPRO ili DVCAM (slika 6.2). Postoje i druge konfiguracije video traka koje se koriste uprofesionalnim produkcijama sa profesionalnom opremom.

Slika 6.2. Dijagram putanje trake preko video glavno za digitalno snimanje

Do pre izvesnog vremena, video rekorder je mogao da doda video i zvučne signale i da ihmoduliše u radio frekvenciju (RF) u FM emisionom području. To su NTSC, PAL ili SECAMsignali koji se dobijaju na Antenna Out konektoru rekordera. Obično korisnik može dabira između određenih frekvencija, a rezultujući signal može da se vidi na televiziji. Mnogitelevizijski aparati daju zaseban konektor za kompozitni signal da bi se izbegao nepotrebankorak modulisanja i demodulisanja signala na frekventni opseg emitovanja. Video monitoriimaju samo konektor za kompozitni signal i ne mogu da primaju RF signale.

6.2. Standardi za analogno prikazivanje

Najčešće se koriste četiri standarda za emitovanje videa i formata za snimanje: NTSC, PAL,SECAM i HDTV. Pošto ove standarde i formate nije lako razmenjivati međusobno, važno je dakorisnik zna gde će njegov multimedijalni projekat da se koristi. Video kaseta snimljena uSAD neće moći da se reprodukuje na televizijskom aparatu u evropskim zemljama, uprkostome što je način snimanja i stil kasete VHS. Slično tome, trake snimljene u evropskimformatima PAL ili SECAM neće moći da se prikažu na NTSC video rekorderu. Svaki sistemse zasniva na različitom standardu koji definiše kako se tekuća informacija enkodira da bi

112 Multimedija

se napravio elektronski signal koji na kraju stvara televizijsku sliku. Multiformatni videorekorderi mogu da reprodukuju sva tri standarda, ali obično ne mogu da konvertuju sajednog standarda na drugi. Presnimavanje (dubbing) u tu svrhu i dalje zahteva vrhunsku,specijalizovanu opremu.

6.2.1. NTSC

SAD, Kanada, Meksiko, Japan i mnoge druge zemlje koriste sistem za emitovanje i prikazvidea koji se zasniva na specifikacijama koje je 1952. godine postavio Nacionalni komitetza televizijske standarde (National Television Standards Commitee - NTSC). Ti standardidefinišu metod za enkodiranje informacije u elektronski signal koji na kraju stvara televizij-sku sliku. Kao što je zacrtano u NTSC standardu, jedan frejm videa je napravljen od 525horizontalno skeniranih linija, koje na unutrašnjoj strani fosforom premazane cevi svakih1/30 delova sekunde iscrtava brzopokretni elektronski zrak. Iscrtavanje se dešava takobrzo da oči "vide" sliku kao stabilnu. Elektronski zrak pravi, u stvari, dva prolaza dok crtajedan video frejm - prvo sve neparne, zatim sve parne linije. Svaki od ovih prolaza (kojise dešavaju frekvencijom od 60 u sekundi, ili 60Hz) crta polje. Proces pravljenja jednogfrejma od dva polja zove se preplitanje (interlacing), i to je metod koji pomaže da sespreči treptanje na TV ekranima. Računarski monitori koriste tehnologiju progresivnogprolaženja i crtaju linije celog frejma u jednom prolazu, bez preplitanja.

6.2.2. PAL

Sistem Phase Alternate Line – PAL koristi se u Velikoj Britaniji, Zapadnoj Evropi, Australiji,Južnoj Africi, Kini i Severnoj Maerici. PAL sistem je povećao rezoluciju ekrana na 625linija frekvencijom od 25 frejmova u sekundi. Kao i kod NTSC sistema, parne i neparnelinije su isprepletane; svako polje se crta za 1/50 sekunde (50Hz).

6.2.3. SECAM

Sistem Sequential Color and Memory – SECAM se koristi u Francuskoj, Istočnoj Evropi,Rusiji i nekoliko drugih zemalja. Iako SECAM ima 625 linija na 50Hz, mnogo se razlikuje iod NTSC i od PAL sistema po osnovama svoje tehnologije i metodu emitovanja. Međutim,TV aparati koji se prodaju u Evropi često koriste dualne komponente, pa mogu da koristei PAL i SECAM sisteme.

6.2.4. HDTV

Televizija visoke definicije (High Definition Television – HDTV) daje visoku rezolucijuu odnosu 16 : 9 (slika 6.3). Taj odnos omogućava gledanje Cinemascope i Panavisionfilmova. Postoji spor između industrije emitovanja i industrije računara da li da se koristipreplitanje ili progresivno prolaženje. Industrija emitovanja promoviše format ultravisokerezolucije 1 920 × 1 080 sa preplitanjem, koji treba da postane okosnica nove generacijevrhunskih centara za zabavu, a industrija računara bi želela da se "zaustavi" na rezoluciji1 280×720 sa progresivnim prolaženjem za HDTV. Format 1 920×1 080 daje više piksela

Video 113

nego 1 280×720, ali frekvencije "osvežavanja" su sasvim drugačije. Format više rezolucijesa preplitanjem daje samo polovinu slike svakih 1/60 u sekundi, a, zbog preplitanja, vrlodetaljne slike će treptati na 30Hz. Nasuprot tome, računarski stručnjaci kažu da je kvalitetslike na 1 280× 720 superioran i postojan.

Slika 6.3. Razlika u proporcijama između VGA i HDTV standarda

Oba formata su uključena u HDTV standard od strane Komiteta za TV sisteme novegeneracije (Advanced Television Systems Committee - ATSC), a potrebne informacije moguda se pronađu na sajtu http://www.atsc.org/cms/.

6.3. Standardi za digitalno prikazivanje

Najčešće se koriste tri standarda za emitovanje videa i formata za snimanje: ATSC, DVBi ISDB. Pošto i ove standarde i formate nije lako razmenjivati međusobno, važno je, i uovom slučaju, da korisnik zna gde će njegov multimedijalni projekat da se koristi.

• Digitalni TV standard Advanced Television System Committee – ATSC se koristi uSAD, Kanadi, Meksiku, Tajvanu i Južnoj Koreji. Podržava odnos 16 : 9 sa slikamačija je rezolucija 1 920 × 1 080, a može da prikazuje i slike drugih rezolucija, idozvoljava prikazivanje šest "virtualnih kanala" na jednom TV-u koristeći postojećikanal 6MHz. Može da se pohvali i kvalitetnim zvukom koristeći Dolby Digital AC-3format i 5.1 zvučni sistem.

• Standard Digital Video Broadcasting – DVB se uglavnom koristi u Evropi u kojojstandardi definišu fizički sloj i sloj sa vezom ka podacima distributivnog sistema.

• Standard Integrated Services Digital Broadcasting – ISDB se koristi u Japanu kako biomogućio radio i televizijskim stanicama da svoje emtiovanje konvertuju u digitalniformat.

114 Multimedija

6.3.1. Dodatni prolazi i bezbedna oblast za naslove

Kao što je ilustrovano na slici 6.3, česta je praksa u televizijskoj industiji da se emitujeveća slika nego što može da stane na standardni TV ekran, tako da će "ivica" slike kojuvidi gledalac biti uvek omeđena fizičkim okvirom TV aparata. To se naziva overscan ilidodatno iscrtavanje linija. Kao suprotnost tome, računarski monitori prikazuju manjusliku, ostavljajući crni okvir u fizičkom okviru. Kada se slika digitalizovanog videa razmeštana RGB ekran, postojaće granica oko nje, a kada se računarska slika pretvara u video,spoljne ivice slike neće ispuniti TV ekran. Samo oko 360 do 480 linija računarskog ekranaće biti vidljivo.

6.3.2. Boje u videu

Reprodukcija i prikaz boje se razlikuju na televizijskim i računarskim monitorima. Poštoračunari koriste RGB komponentni video (tj. razlažu boje na crveni, zeleni i plavi signal),njihove boje su čistije i tačnije nego one koje se vide na ekranu televizijskog monitora.Posledica je da boje koje pravi računar za računarski video mogu da se prikažu drugačijenego kad se ta slika pretvori u NTSC televizijski video. Ako monitor, skener i štampačnisu kalibrisani i prilagođeni zahtevima kolornog sistema kao što je Pantone Color Sys-tems, onda je nemoguće videti korektne krajnje boje u projektu.

Treba posebno napomenuti da NTSC televizija koristi ograničenu paletu boja i ograničenenivoe sjajnosti (brightness) i nivoe raspodele crnih oblasti. Neke boje generisane iz raču-nara koje se lepo prikazuju na RGB monitoru mogu biti neadekvatne za prikaz na NTSCteleviziji. One su očigledne u nijansama crvenih i belih nivoa, a posebno kada se radi onekalibrisanim monitorima kada izazivaju svetlucanje ili pojavu šumova kada se prikazujuna televiziji. Većina komercijalnih stanica za emitovanje i TV studiji će odbiti da emitujeprograme koji sadrže neadekvatne boje. Postoje filtri za pretvaranje neadekvatnih boja uadekvatne, u okviru aplikacija za editovanje videa i slika.

Kada se vrši produkcija multimedijalnog projekta, trebalo bi razmotriti da li će se repro-dukovati na RGB monitoru i/ili na uobičajenom TV prijemniku. Ako je rad usmeren, naprimer, na igračke konzole, kao što su SEGA, Sony PlavStation ili Nintendo, trebalo biodabrati boje po NTSC specifikaciji boja. Ima mnogo promenljivih u dobijanju savršenihboja na televiziji. Krajnji korisnici mogu da koriste zasićenje i balans (prilagođenje kojemnogi RGB monitori nemaju), a nije verovatno da će mnogo gledalaca projekta imatisavršeno kalibrisan TV prijemnik. Po ovome, korisnik već u startu vodi izgubljenu bitku.Pomaže ako se naprave kolorne korekcije i editovanje na računaru, pa se pregleda isprav-ljena slika na stvarnom TV ekranu, ne samo na RGB monitoru. Za to je potrebna karticaza konvertovanje signala iz hardvera na matičnoj ploči koji ima NTSC izlaz; video karticeza preklapanje obično nude ovu mogućnost.

6.3.3. Efekti preplitanja

Unutar televizije, elektronski zrak pravi dva prolaza preko ekrana, dok crta jedan frejmvidea, prvo sve neparne, pa sve parne linije – one su isprepletane. Na RGB monitorulinije se crtaju širinom ("debljinom") od jednog piksela i nisu prepletene. Linije od jednog

Video 115

piksela prikazane na RGB monitoru izgledaju dobro; na TV-u one sjajno trepću, jer sepojavljuju u svakom drugom polju. Da bi se sprečilo to treptanje, trebalo bi obezbeditida su linije šire ("deblje") od dva piksela i trebalo bi izbegavati fontove sa veoma tankimili komplikovanim serif-ima. Ako se "hvataju" slike sa video signala, korisnik može daih filtrira kroz filter za poništenje isprepletenosti, koji daju aplikacije za editovanje slika,kao što su Photoshop i Fireworks. Što se tiče fontova, treptanje isprepletenosti se čestomože izbeći "umekšavanjem" (anti-aliasing) slova, kako bi se njihove ivice malo stopile.Izraz "preplitanje" ima drugačije značenje na Webu, gde opisuje progresivni prikaz linijapiksela kako se slikovni podaci prenose, odajući utisak da slika dolazi iz nejasnog u fokus,kako sve više podataka stiže.

6.3.4. Kalibracija

Suviše mali akcenat je stavljen na kalibraciju videa, svetla, monitora, zvuka i ostale opremekoja se koristi za obavljanje prezentacija. Koliko puta je neko završio video zapis nečegamisleći da je sve besprekorno, a onda bi bio iznenađen kada bi video da reprodukcija ličina neku zamrljanu varijantu i da se od toga "diže kosa na glavi". Kod nekih uređajakorisnik može da jednostavno pritisne svu dugmad kako bi ujednačio snimljeni materijal.

6.3.5. Tekst i naslov za televiziju

Naslovi za video produkcije mogu da se naprave analognim generatorom karaktera, aliračunar to može da digitalizuje upotrebom softvera za editovanje videa i slika. Evo neko-liko sugestija za pravljenje dobrih naslova:

• Fontovi za naslove treba da budu prosti (jednostavni), bez serif-a i bold-ovani dase lako čitaju.

• Kada se stavlja tekst na tamnu pozadinu, trebalo bi koristiti belu ili svetlu boju zatekst.

• Odgovarajućim senčenjem treba razdvojiti tekst od pozadinske slike.

• Nikada ne treba koristiti crni ili obojen tekst na beloj pozadini.

• Ne treba povećavati razmak između slova (kerning) previše.

• Ako se koristi podvučeni tekst ili vektorska grafika, linije treba da uvek budu široke("debele") najmanje dva piksela. Ako se koriste linije široke ("debele") jedan piksel(ili širina merena neparnim brojem piksela), zbog preplitanja će linija treptati kadase prenese na video.

• Retko upotrebljavati približene linije, okvire i koncentrične krugove. Kada se, ipak,koriste, neka budu veliki i sa širokim ("debelim") linijama.

• Treba izbegavajte boje koje su isuviše tople.

• Susedne boje treba da budu značajno različitih jačina. Na primer, trebalo bi koristitisvetloplavu i tamnocrvenu, ali ne srednjeplavu i srednjecrvenu.

116 Multimedija

• Neka grafika i naslovi budu u bezbednoj oblasti ekrana. Treba stalno voditi računao tome da kada se sadržaj seli da televizije deo računarskog izlaza šalju u deo ekranakoji se ne vidi zbog kutije prijemnika.

• Naslove bi trebalo uvoditi polako, držati ih na ekranu dovoljno vremena i onda ihizblediti.

• Treba izbegavati da naslovni ekrani budu pretrpani informacijama; umesto toga,trebalo bi upotrebiti više strana.

6.4. Digitalni video

Puna integracija videa na računarima eliminiše analognu televizijsku formu videa sa plat-forme na koju će se isporučiti video. Ako je video spot snimljen kao podatak na tvrdi disk,CD ROM ili neki drugi uređaj masovne memorije, taj spot može biti reprodukovan namonitoru računara bez kartica za preklapanje video signala, čitača videodiskova ili drugogmonitora. Reprodukcija digitalnog videa postiže se softverskim arhitekturama, kao štosu QuickTime ili AVI. Kao multimedijalni producent ili stvaralac, korisnik može da imapotrebu da konvertuje izvorni video materijal iz njegove još uvek česte analogne forme(video-traka) u digitalni oblik, kojim može upravljati njegov računarski sistem.

6.4.1. Analogno i digitalno

Osnovni element računarske tehnologije u svakodnevnoj praksi je mikroprocesor, skupviše miliona tranzistora integrisanih u malom kućištu ne većem od kutije šibica, okosnicamikroračunarskog sistema, koji se može programirati da izvrši zadatke prema željamakorisnika. Procesor u suštini vrši obradu podataka, prema zadatom programu, te se naosnovu saznanja u postojećim podacima stiču nova saznanja kao proizvod njihove obrade.

Podatak je u osnovi poruka koja se može i ne mora iskoristiti. Ako postoji i najmanjaverovatnoća da se poruka jednoznačno i tačno iskoristi, te predstavlja neoborivu činjenicu,tada predstavlja informaciju. Dakle, svaka poruka može i ne mora sadržavati informaciju.

Nužno je da računar rezultat obrade podataka prikaže ili pošalje korisniku te podatke zaobradu primi na odgovarajući način, odnosno treba da ostvari komunikaciju i izvrši raz-menu informacija. Stanje ili proces materijalnog sistema koji prenosi informaciju (poruku)od izvora prema odredištu u obliku pogodnom za prenos naziva se signal (akustički, elek-trični, svetlosni itd.), a medij kroz koji signal prolazi naziva se prenosni put. Pretvaranjeporuke u signal vrši predajni uređaj, a pretvaranje signala u poruku vrši prijemni uređaj, acelokupni sistem prenosa poruke predstavlja komunikacijski sistem.

Različite vrste poruka, pa stoga i mogućih informacija, mogu se grupisati prema sledećem:

• zvučna informacija (na primer, telefon),

• nepokretna slika (na primer, telefaks),

• pokretna slika (na primer, televizija),

Video 117

• telesignalizacija (na primer, daljinsko upravljanje procesima),

• podaci (grupe znakova, slika...).

Električni signal, kao neposredni nosilac informacije, od posebnog je značaja. Trebanapomenuti da nije i jedini. Govorom u slušalicu telefonskog aparata (predaja), govorniorgani proizvode akustički signal koji se pomoći mikrofona pretvara u električni signalkoji sada u sebi sadrži govornu informaciju. Na prijemu se električni signal pomoću slu-šalice ponovo pretvara u akustički signal gotovo istovetan onome na izvoru, a koga sadaobrađuju slušni organi (prijem).

Kako se oblik akustičkog signala govora slaže sa oblikom signala koji se prenosi komuni-kacijskim sistemom i pretvara u gotovo istovetan oblik akustičkog signala na odredištu,te po obliku pri prenosu ne doživljava izmene i verno prati promene izvora, takav signalnaziva se analogni signal.

Slika 6.4. Analogni signal

Tokom prolaska kroz provodnik (prenosni put) signal je izložen smetnjama i izobličava-nju što ponekad može imati za rezultat nerazumljivost poruke na odredištu. Razumljivaporuka, po kojoj sledi ispravna akcija, predstavlja - sadrži informaciju.

Slika 6.5. Digitalni signal

Izvor informacije može predati poruku i na drugi način. Poruka se prema dogovoru izvorai odredišta pretvori u signal sastavljen od kombinacije impulsa, svetlosnih, akustičkih islično, od kojih svaka pojedina kombinacija predstavlja neki znak, kao kod Morzeove

118 Multimedija

abecede. Takav način prenosa impulsima nejednakog trajanja i dužine neprikladan je zabrze komunikacije, te se u računarskoj tehnici prihvatio dosledniji način prenosa impulsa.Na primer, pritiskom na taster tastature računara (ili teleprintera) stvara se odgovarajućiniz (povorka) impulsa jednakih po obliku i dužini trajanja niza (broja mesta za impulse),ali različit po broju impulsa u nizu i njihovom rasporedu unutar niza za svaki znak tas-tature. Takav niz se sa tastature šalje računaru i sadrži poruku o pritisnutom tasteru i opripadnom znaku.

Na istovetan način će se razmenjivati poruke između računara prema dogovorenoj tablicisignala za pojedine znakove. Kako su broj mesta, broj impulsa u nizu i njihov međusobniraspored unutar niza elementi nekog brojnog sistema, te računar primljeni niz prepoz-naje kao odgovarajući broj, signal prikazan na prethodnoj slici naziva se digitalni signal(digit = broj).

U principu, postoje dva načina obrade – analogna obrada i digitalna obrada signala. Kaoprimer analogne obrade signala može se uzeti ljudsko telo. Naše telo pretvara informacijeprimljene ušima, očima i kožom u električne signale različitih inteziteta, koji prolaze kroznervni sistem do mozga. Naš mozak obrađuje te promenljive koje su u ovom slučaju kon-tinualni ili analogni signali. Zovu se kontinualni zato što mogu imati beskonačno mnogovrednosti između minimalne i maksimalne vrednosti. Posle obrade tako primljenih infor-macija i donešenih odluka na osnovu njih, on šalje električne signale u druge delove telakao odgovor na spoljne nadražaje. Digitalna obrada signala sadrži još jedan međukorak.Pošto računar koji vrši obradu signala "ne razume" analogne vrednosti, potrebno je istepretvoriti u njemu prihvatljiv "jezik". Kada se usvoji stav da nisu važne sve vrednosti, većsamo određen, unapred dogovoren broj nivoa analognog signala, dolazi se do kvantovanjaanalognog signala. Na taj način "preveden" analogni signal je "razumljiv" za računar.Ulogu prevodioca ima na primer, mikrofon koji pretvara energiju zvučnih talasa u elek-trične, električne signali se zatim kvantuju (digitalizuju) pomoću konvertora i kao takvipredaju računaru. Posle obrade se preko zvučnika ponovo pretvaraju u zvučne signale.

6.4.2. Digitalna obrada signala

Šta je digitalna obrada signala (Digital Signal Processing – DSP) uopšte i zašto treba dase koristi?

Termin DSP uopšteno označava da se koriste digitalni računari za obradu signala. Na-ravno, ovi signali se mogu obrađivati analognim procesima ali, iz raznih razloga, daje seprednost digitalnoj obradi.

Da bi se shvatile relativne prednosti jedne obrade u odnosu na drugu, pogodno je da seuporede ove dve tehnike kod neke opšte poznate aplikacije. Na slikama 6.6 i 6.7 prikazanasu dva pristupa snimanju zvuka (govora ili muzike). Na slici 6.6 je prikazano analognosnimanje i ono radi na sledeći način:

• Zvučni talasi dopiru do mikrofona, gde se pretvaraju u električne impulse.

• Ovi električni impulsi se pojačavaju, zatim pretvaraju u magnetna polja pomoćuglave za snimanje (upisivanje).

Video 119

• Kako se magnetna traka pomera ispod glave za snimanje, intenzitet magnetnih poljase smešta na traku.

Proces reprodukcije je inverzan procesu snimanja:

• Kako se magnetna traka pomera ispod glave za reprodukciju (čitanje), magnetnopolje sa trake se pretvara u električni signal.

• Signal se zatim pojačava i šalje na zvučnike. Zvučnici pretvaraju ovako pojačansignal nazad u zvučni talas.

Slika 6.6. Snimanje analognog signala

Prednost analognog procesa je dvostruka – prvo, on je konceptualno sasvim jednostavan;drugo, po definiciji, analogni signal može da ima praktično beskonačan broj vrednosti unu-tar dinamičkog opsega signala. Nažalost, ovaj analogni proces je sam po sebi nestabilan.Pojačavači su izloženi varijaciji pojačanja u zavisnosti od temperature, vlažnosti i vre-mena. Magnetna traka se tokom vremena gužva i isteže, usled čega se signal izobličava.Magnetna polja će tokom vremena usled toga gubiti jačinu. Varijacije brzine motora kojipremotava traku izazivaju dodatna izobličenja. Svi ovi faktori zajedno utiču na pogoršanjekvaliteta izlaznog signala u odnosu na ulazni signal. Svaki put kada signal prolazi krozsledeći analogni proces (presnimavanje trake), ovi neželjeni efekti se umnožavaju. Retkokoji analogni sistem može da napravi više od dve ili tri generacije kopija.

Slika 6.7. Snimanje digitalnog signala

Sada treba pogledati digitalni proces snimanja (slika 6.7):

• Kao i kod analognog snimanja, zvučni talasi dopiru do mikrofona i pretvaraju se uelektrične signale. Ovi električni signali se zatim pojačavaju do upotrebljivog nivoa.

• Električni signali se mere ili, drugim rečima, pretvaraju u brojeve.

120 Multimedija

• Ovi brojevi sada mogu da se memorišu ili obrađuju u računaru kao bilo koji brojevi.

• Da bi se signal reprodukovao, brojevi se jednostavno pretvore nazad u električnesignale. Kao i kod analogne tehnike, ovi signali se zatim odvode na zvučnike gdese pretvaraju u zvučne talase.

Kod digitalnog procesa postoje dva očigledna nedostatka – prvo, on je mnogo kompliko-vaniji od analognog procesa; drugo, računari mogu da rade samo sa brojevima konačnerezolucije. Prema tome, gubi se potencijalna "beskonačna" rezolucija analognog signala.

6.4.3. Prednosti DSP-a

Očigledno, mora da postoje neke pogodnosti digitalnog procesa kada se on sve više i višekoristi. Prvo, kada se signal pretvori u brojeve, signal je bezuslovno stabilan. Upotrebomraznih tehnika, kao što su detekcija i korekcija greške, moguće je memorisati, preneti ireprodukovati brojeve bez oštećenja. Dvadeseta generacija snimka je, prema tome, kvali-tetna isto kao i prva.

Ova činjenica ima neke interesantne implikacije. Na primer, buduće generacije nikadaneće znati kako su Bitlsi zaista zvučali. Raspoloživa analogna tehnologija šezdesetih go-dina jednostavno nije mogla precizno da snimi i reprodukuje signale. Nekoliko generacijaanalognih signala bilo je potrebno da bi se reprodukovao zvuk – prvo, trebalo je da sesnimi tzv. master traka, a zatim da se miksuje i montira; od nje se pravila metalna ma-trica pomoću koje su se pravili plastični otisci (gramofonske ploče). Svaka etapa procesaimala je novu generaciju snimka, a svaka novo snimanje uticalo je na signal kao filtarkoji redukuje frekventni sadržaj i menja fazu signala. Kao i kod slika u Sikstinskoj kapeli,prave boje i sjaj originalnog dela izgubili su se tokom vremena.

Što se tiče muzičara, stvari danas izgledaju sasvim drugačije. Hiljadu godina od danas,naši potomci će moći verno da reprodukuju današnje digitalno pripremljene CD-ove. Samikompakt diskovi mogu da se deformišu ili oštete, ali pre nego što se to desi, digitalni bro-jevi na njima mogu da se kopiraju sa savršenom tačnošću na novi medijum. Signali koji sumemorisani u digitalnom obliku su u stvari veliki nizovi brojeva. Kao takvi, oni su otpornina fizička ograničenja analognih signala.

Takođe, postoje i druge značajne prednosti digitalne obrade signala. Geofizičari su biliprvi koji su primenili tehnike obrade signala. Seizmički signali, koji su za njih interesantni,često su veoma niske frekvencije, od 0, 01Hz do 10Hz. Teško je napraviti analogne filtrekoji rade na ovim niskim frekvencijama. Vrednosti komponenti moraju biti toliko velike daje fizički nemoguće napraviti filtar. Međutim, kada su signali pretvoreni u brojeve, sasvimje jednostavno napraviti program koji će obaviti filtriranje.

Druga prednost digitalnih signala je njihova izdašnost. Na primer, DSP može da omogućiveliki propusni opseg signalima koji treba da se šalju preko uskopojasnih kanala. Signalfrekvencije 20KHz može da se digitalizuje, a zatim šalje preko kanala od 5KHz (učes-tanost nosioca). Signalu će biti potrebno četiri puta više vremena da se prenese prekouskopojasnog kanala, ali kada stigne na drugu stranu (odredište), može da se rekonstruišena svoj puni propusni opseg od 20KHz.

Video 121

Na isti način, sigurnost komunikacije može se znatno poboljšati preko DSP-a. Pošto sesignal šalje kao niz brojeva, on može lako da se šifrira. Kada bude primljen na odredištu,brojevi se dešifruju i zatim reprodukuju kao originalni signal.

6.5. Digitalni video

Izrada video klipa (video zapisa) podrazumeva rad u tri opšte faze:

• Preprodukcija - Podrazumeva izradu skripta, vizuelizaciju scena skiciranjem ustripu knjige snimanja, kao i izradu produkcijskog rasporeda za snimanje pojedinihscena.

• Produkcija - Podrazumeva snimanje scena.

• Postprodukcija - Podrazumeva montiranje najboljih scena u konačni video pro-gram, korekciju i unapređenje video i audio zapisa prema potrebi. Montaža pod-razumeva prvu verziju ili grubu montažu (rough cut) u kojoj može da se dobijeokvirna ideja o mogućnostima koje autoru stoje na raspolaganju sa klipovima kojeposeduje. U nastavku montaže video program će moći fino da se podešava uza-stopnim intervencijama sve dok se ne dođe do konačnog rezultata. U tom trenutkunastaje završni rez (final cut). Programi za nelinearnu montažu su osmišljeni takoda obezbeđuju efikasno montiranje, korekciju i poboljšavanje izgleda klipova, čimepredstavljaju vrlo dragocenu alatku u postprodukciji.

Očekuje se da korisnik svoje projekte realizuje samostalno, međutim ako projekat u bilokom trenutku zahteva spoljne saradnike, kao što su recimo usluge postprodukcije, pre negošto uopšte započne dati projekat, najbolje je da se posavetuje sa njima. Oni mogu dapomognu da korisnik utvrdi koje parametre treba da koristi u različitim fazama projekta,kao i da pomognu da izbegne eventualne greške koje ga mogu koštati vremena i novca.Na primer, ako izrađuje video klip za televizijsko emitovanje, potrebno je da zna da liisti izrađujete za standard NTSC (National Television Standards Committee) koji se koristiuglavnom u Severnoj Americi i Japanu; standard PAL (Phase Alternate Line) koji sekoristi uglavnom u Evropi, Aziji i južnoj Africi; ili standard SECAM (Sequential CouleurAvec Memoire) koji se koristi u Francuskoj, na Bliskom Istoku i u severnoj Africi.

Međutim, pre nego što se upusti u avanturu zvanu digitalni video, poželjno je da se upoznasa nekim pojmovima iz te oblasti i njihovim značenjem.

6.5.1. Merenje vremena u video klipu

U stvarnom svetu vreme se oseća kao stalni tok događaja. Međutim, u toku rada navideo klipu zahteva se precizna sinhronizacija, tako da se vreme mora meriti korišćenjempreciznih brojeva. Uobičajene merne jedinice kao što su časovi, minuti i sekunde nisudovoljno precizni za video montažu, pošto se u jednoj sekundi može naći više od jednogdogađaja. Video profesionalci mere vreme korišćenjem standardnih postupaka koji brojedelove jedne sekunde u slikama.

122 Multimedija

6.5.2. Kako vremenska baza i brzina slika utiču jedna na drugu?

Određivanjem vremenske baze (timebase) nekog projekta određuje se način merenjavremena u njemu. Na primer, vremenska baza od 30 označava da je svaka sekunda podelje-na na 30 jedinica. Tačno vreme u kome dolazi do montiranja zavisi od navedene vremenskebaze, pošto do montiranja može doći samo u vremenskim jedinicama. Korišćenje različitihvremenskih baza dovodi do toga da vremenske jedinice nastupaju na različitim mestima.

Vremenski intervali u izvornom klipu uslovljeni su izvornom brzinom slika (source framerate). Na primer, kada se izvorni klipovi dobijaju korišćenjem kamere čija je brzina 30slika u sekundi, to znači da kamera beleži radnju tako što snima po jednu sliku u svakomtridesetom delu jedne sekunde. Treba imati u vidu da sve ono što se dešavalo izmeđuovih intervala u jednoj sekundi nije zabeleženo. Otud manja brzina slika, na primer 15 fps(frames per second) beleži manje informacija o nekoj radnji koja traje, dok veća brzinaslika, na primer 30 fps, beleži više ovakvih informacija.

Određivanjem brzine slika datog projekta (project frame rate) određujete koliko čestoaplikacija generiše slike iz projekta. Brzina slika nekog projekta od 30 slika u sekundioznačava da će aplikacija izraditi 30 slika na osnovu svake sekunde projekta.

Da bi se postigla fina i konzistentna reprodukcija, vremenska baza, izvorna brzina slika ibrzina slika datog projekta treba da budu istovetne.

Tabela 6.1. Vrste video montaža i njihove brzine

Napomena: NTSC sistem je prvobitno izrađen za crno-bele slike brzine 30 fps, ali je, dabi se udovoljilo slikama u boji, modifikacijom signala sredinom dvadesetog veka standardNTSC izmenjen u 29, 97 fps.

Ponekad se vremenski sistemi ne podudaraju. Na primer, od autora može de se zatraži daizradi video klip predviđen za distribuciju na kompakt diskovima u kome treba kombinovatiizvorne klipove igranog filma koji su digitalizovani na 24 fps sa izvornim video klipovimadigitalizovanim na 30 fps, korišćenjem vremenske baze od 30 da bi se dobila konačnabrzina slika za kompakt disk od 15 fps. Kada se neke od ovih vrednosti ne podudaraju,matematička nužnost je da se pojedine slike ponavljaju ili izostavljaju. Dobijeni efekatmože biti iritirajući ili neprimetan zavisno od razlika između vremenske baze i brzine slikakoja je korišćena u projektu.

Savet: Preporučuje se da se klipovi digitalizuju pri istoj brzini slika u kojoj autor nameravada izveze svoj projekat. Na primer, ako zna da će izvorni klipovi biti izvezeni pri brzini

Video 123

od 30 fps, trebalo bi da ih digitalizuje pri brzini od 30 fps umesto na 24 fps. Ukoliko tonije moguće (na primer, DV se može digitalizovati jedino na 29, 97 fps), izlaz bi trebaloda ima brzinu slika koja vremensku bazu deli na jednake delove.

Slika 6.8. A. Video zapis od 30fps (prikazana je polovina sekunde) B. Vremenska bazaod 30 za video produkciju. Kada se izvorna brzina slika podudara sa vremenskom

bazom, sve slike su prikazane prima očekivanjima.

Kada se vremenski sistemi ne podudaraju, najvažnije je odrediti vremensku bazu kojutreba izabrati imajući u vidu najosetljiviji odredišni medijum.

Slika 6.9. A. Izvorni klip igrartogfiima od24fps (prikazana je polovina sekunde) B.Vremenska baza od 30 za video produkciju. Da bi se reprodukovala jedna sekunda slika

od 24 fps u vremenskoj bazi od 30, izvorne slike 1, 5 i 9 su ponovljene.

Ako se priprema reklamni spot za film, odnosno trejler ili foršpan (engleski naziv trailer;nemački naziv vorspan) koji autor želi da prikaže i na televiziji, možda će da odluči da jefilm najvažniji medijum za dati projekat i za vremensku bazu će da odredi 24.

Slika 6.10. A. Vremenska baza od 30 (prikazana je polovina sekunde) B. Završna brzinaslika od 15, za Web film. Kada je vremenska baza ravnomerno deljiva brzinom slika,

slike na vremenskoj bazi su ravnomerno obuhvaćene.

Važno je upamtiti sledeće: Najpredvidljiviji rezultati će se dobiti ako su vremenska bazai brzina slika međusobno ravnomerno deljive. Najbolji rezultati će se dobiti ako su oneidentične.

124 Multimedija

Slika 6.11. A. Vremenska baza od 24 za igrani film (prikazana je polovina sekunde) B.Završna brzina slika od 15, za Web film. Vreme nije ravnomerno deljivo brzinom slika,tako da slike nisu ravnomerno obuhvaćene. Konačnom brzinom slika od 12 fps slike bi

bile generisane ravnomernije.

6.5.3. Merenje vremena korišćenjem vremenskog koda

Vremenski kôd (timecode) definiše način brojanja slika i odražava se na način prikazi-vanja vremena u nekom projektu, kao i njegovog određivanja. Vremenski kôd nikada nemenja vremensku bazu ili brzinu slika nekog klipa ili projekta, već jedino menja način nakoji se ove slike broje.

Stil vremenskog koda određuje se na osnovu medijuma koji je najznačajniji za projekat.Kada se video klip montira za emitovanje na televiziji, način brojanja slika razlikuje seod načina brojanja slika prilikom montiranja video klipa za igrani film. Video aplikacijeobično prikazuju vreme korišćenjem vremenskog koda za video SMPTE (Society of MotionPicture and Television Engineers), gde trajanje od 00 : 06 : 51 : 15 označava da je utoku 6. minut, 51. sekunda i 15. slika datog klipa. U bilo kom trenutku autor može dase prebaci na neki drugi sistem prikazivanja vremena, kao što su stope i slike u filmu od16mm ili 35mm. Profesionalni uređaji za reprodukciju video traka i kamkorderi mogu dapročitaju i upišu vremenski kôd direktno na video traku, što autoru omogućava da zvuk,video i montirani materijal sinhronizuje ili da montira van mreže.

Prilikom korišćenja vremenske baze standarda NTSC od 29, 97, razlika između ove vre-menske baze i vremenskog koda od 30fps dovodi do odstupanja između prikazanog tra-janja datog programa i njegovog stvarnog trajanja. Iako je ovo neslaganje u početkuneznatno, u toku trajanja programa ono se vremenom uvećava čime autoru onemogućavada precizno izradi program određene dužine. Vremenski kôd sa odbacivanjem slike(drop-frame timecode) predstavlja SMPTE standard za video od 29, 97 koji eliminiše ovugrešku čime čuva tačnost NTSC vremena.

6.5.4. Televizijska slika

Slika na televiziji ili na računarskom monitoru sastoji se od horizontalnih linija. Ove linijemogu da se prikažu na više načina. U prikazu većine personalnih računara koristi se pro-gresivno skeniranje (progressive scan) ili prikaz bez preplitanja (Non-interlaced) u komesu linije na nekoj slici prikazane odjednom odozgo nadole pre nego što se pojavi narednaslika. Televizijski standardi kao što su NTSC, PAL ili SECAM su sa preplitanjem (interlaced)pri čemu je svaka slika podeljena na dve poluslike (field). Svaka poluslika sadrži svakudrugu horizontalnu liniju na datoj slici. TV prikazuje prvu polusliku naizmeničnih linija

Video 125

preko čitavog ekrana, a zatim prikazuje drugu polusliku i popunjava naizmenične procepekoje je napravila prva poluslika. Jedna slika u video standardu NTSC koja je prikazanapribližno na svaki trideseti deo sekunde sadrži dve prepletene poluslike, pri čemu se svakaprikazuje približno na svaki šezdeseti deo sekunde. Slike u video standardu PAL i SECAMprikazuju se približno na svaki dvadeset peti deo sekunde i sadrže dve prepletene poluslike,pri čemu se svaka prikazuje približno na svaki pedeseti deo sekunde. Poluslika koja sadržiprvu ekransku liniju na vrhu date slike naziva se gornja poluslika (upper field), a drugapoluslika se naziva donja poluslika (lower field). Prilikom reprodukcije ili izvoženja uvideo sa preplitanjem trebalo bi nastojati da se navedeni redosled poluslika podudara saprijemnim video sistemom, jer će u suprotnom pokreti biti isprekidani, a ivice objekta naslici poprimiće izgled češlja.

Slika 6.12. Video sa preplitanjem predstavlja sliku u dva prolazanaizmeničnih ekranskih linija

Napomena: Kada je reč o analognom videu, redosled poluslika mora da se podudara saredosledom poluslika kartice za digitalizaciju (koji mora biti naveden u unapred definisanimparametrima). Kada je reč o digitalnom videu (DV), donja poluslika uvek dolazi prva uredosledu poluslika. Autor mora da se postara da uvek prvo izabere ispravne unapreddefinisane parametre. Na taj način će ispravno navesti redosled poluslika.

Slika 6.13. Video sa progresivnim skeniranjem predstavlja sliku u jednom prolazupomoću sekvencijalnih ekranskih linija – desna slika

Ako autor namerava da uspori ili zadrži neku sliku u video klipu sa preplitanjem, rasplita-njem (de-interlacing) njegovih slika sprečiće drhtanje ili vizuelno prekidanje. Na ovaj način

126 Multimedija

isprepletene poluslike će biti konvertovane u dovršene slike. Ako koristi izvorne klipove kojisu progresivno skenirani (kao što su recimo, igrani film ili računarski generisana animacija)u videu koji je predviđen za isprepleten prikaz kao što je recimo televizija, slike može daizdvoji u poluslike postupkom koji se naziva generisanje poluslika (field rendering) takoda pokret i efekti budu pravilno isprepleteni.

6.5.5. Merenje veličine slike i rezolucije

Prilikom digitalnog montiranja video klipova važno je imati u vidu nekoliko svojstavavezanih za veličine slike (frame size): piksel i proporciju (razmeru) slike, rezoluciju klipa,veličinu slike u projektu i dubinu bita. Piksel (element slike) predstavlja najmanju jedinicukoja se može koristiti za izradu neke slike. Ništa što je manje od jednog piksela ne možese precizno prikazati.

6.5.6. Proporcija

Proprocija (aspect ratio) neke slike označava odnos njene širine i njene visine. Na primer,proporcija video zapisa u NTSC standardu iznosi 4 : 3, dok se u video formatima DVD,HDTV i na nekim slikama u igranom filmu koristi produžena proporcija od 16 : 9.

Slika 6.14. Slika na kojoj se koristi proporcija 4:3 (leva), i slika na kojoj se koristiproporcija 16:9 (desno)

U nekim video formatima koristi se različita proporcija (razmera) za piksele koji sačinjavajudatu sliku. Kada se video klip u kome su korišćeni nekvadratni pikseli (non-square pixels)(pikseli koji su duži nego širi, odnosno širi nego duži), prikaže na sistemu zasnovanom nakvadratnim pikselima, kao i obrnuto, dolazi do istezanja oblika i pokreta. Na primer,krugovi poprimaju oblik elipsi.

6.5.7. Nekvadratni pikseli

Većina programa za nelinearnu montažu ima podršku za različite razmere nekvadratnihpiksela, uključujući i DV-ovu razmeru Widescreen (Cinema) za DV od 16 : 9, kao i razmerupiksela Anamorphic od 2 : 1.

Kada na ekranu svog računara korisnik gleda video klip sa nekvadratnim pikselima, ap-likacija za montažu prikazuje odgovarajuću razmeru na monitoru računara kako slika ne bi

Video 127

bila izobličena. U parametrima za pokret i neprovidnost, kao i kod geometrijskih efekatatakođe se koristi odgovarajuća razmera, tako da nema izobličenja posle montiranja iligenerisanja videa.

Slika 6.15. Kadar sa različitim pikselima

6.5.8. Veličina slike

U programima za montažu po pravilu može da se definiše veličina slike za reprodukcijuvidea, a prema potrebi i za izvoženje videa u datoteku. Velična slike iskazuje se horizon-talnim i vertikalnim iznosima u pikselima. Na primer, 640 sa 480 piksela. Kod digitalnevideo montaže veličina slike označava se i kao rezolucija.

Slika 6.16. Veličina slike u različitim sistemima

128 Multimedija

Uopšteno govoreći, veća rezolucija značajnije čuva detalje na slici i prilikom montiranjazahteva veću količinu memorije (RAM) i prostora na disku. Povećanjem dimenzija slikepovećaće se broj piksela koje aplikacija mora da obradi i sačuva za svaku sliku, tako daje vrlo važno znati koja se rezolucija zahteva za konačni video format. Na primer, slika uNTSC formatu čije su dimenzije 720 sa 480 piksela (DV standard) sadrži 345 600 piksela,dok slika u PAL formatu čije su dimenzije 720 sa 576 piksela sadrži 414 720 piksela. Akose odredi suviše mala rezolucija, slika će izgledati grubo, a pikseli će biti uočljivi. Ako seodredi suviše velika rezolucija, upotrebiće se više memorije nego što je zaista neophodno.Prilikom promene veličine slike treba nastojati da dimenzije budu u skladu sa proporcijamaizvornog video klipa.

Savet: Ako korisnik namerava da radi u većoj rezoluciji i/ili ako je zabrinut zbog mo-gućnosti obrade koje obezbeđuje CPU, može da odredi jedan ili više radnih diskova zadodatni RAM i prostor na disku.

6.5.9. Preskeniranje i bezbedne zone

Ako se video klip priprema za emitovanje na televiziji, veličina slike može da odvedeautora u pogrešnom pravcu. Većina televizijskih prijemnika gledalaca u NTSC sistemuuvećava sliku. Na taj način spoljnje ivice slike izlaze sa ekrana. Ovaj postupak se nazivapreskeniranje (overscan). Kako stepen preskeniranja nije konzistentan na svim televizi-jama, poželjno je radnju i potpise (titlove) smestiti unutar dve bezbedne površine: zonebezbedne za radnju i titlove.

Slika 6.17. Zona bezbedna za akciju i zona bezbedna za potpis

Zona bezbedna za radnju je površina koja je približno za 10% manja od stvarne veličineslike. Zona bezbedna za titlove je približno za 20% manja od stvarne veličine slike. Dabi autor bio siguran da će svi značajni elementi video zapisa biti u potpunosti prikazani,treba da nastoji da se celokupna značajna radnja smesti unutar zone bezbedne za radnju,kao i da se sav tekst i važni grafički elementi nađu unutar zone bezbedne za titlove. Nataj način će izbeći izobličenja teksta i grafičkih objekata do kojih dolazi na ivicama mnogihtelevizijskih prijemnika. Moguće preskeniranje autor može uvek da predvidi korišćenjem

Video 129

bezbednih zona, pri čemu važna radnja i tekst ostaju unutar njih, a video klip bi trebaloisprobati na pravom televizijskom prijemniku.

6.5.10. Dubina bita

Verovatno je većina upoznata sa činjenicom da bit predstavlja osnovnu mernu jedinicu začuvanje informacija u računaru. Što je veći broj bitova koji se koriste za opisivanje nečega,to će dati opis biti verniji. Dubina bita (bit depth) označava broj bitova koji su izdvojeniza opisivanje boje jednog piksela. Što je dubina bita veća, slika može da sadrži veći brojboja, a to omogućava precizniju reprodukciju boja i veći kvalitet slike. Na primer, slikakoja čuva 8 bitova po slici (8-bitna slika) može da prikaže 256 boja, a 24-bitna slika možeda prikaže više od 16 miliona boja.

U aplikacijama za montažu obično može da se koristi video klip koji je digitalizovan isačuvan korišćenjem bilo koje dubine bita, ali one, uglavnom, klipove interno konvertujuu format boje YUV koji se koristi na televiziji. Format YUV može da sačuva kvalitetanvideo zapis korišćenjem 16 bitova po pikselu (format boje RGB zahteva 24 bita po pikselu).Time se postižu veći kvalitet i brzina obrade.

Prostor boje YUV osmišljen je ranih pedesetih kao način da se televizijskom programuobezbedi boja, a da se pri tom očuva kompatibilnost unazad sa crno-belim parovima i dase pri tom ograniči veličina tzv. propusnog opsega koji je neophodan za signal. U sistemuYUV, tri komponente boje sistema RGB matematički se konvertuju u svetlosni signal (tj.u crno-belu boju) plus u dva signala u boji. S obzirom na način na koji se izvodi ovakonverzija, količina podataka za celokupni signal se znatno smanjuje, a da se pri tom negubi na kvalitetu.

Da bi se dobio vrhunski kvalitet slike, neophodno je da:

• Izvorni klipovi i zamrznute slike budu sačuvani u formatu od 24 bita po pikselu (iakomogu da se koriste klipovi sa manjom dubinom bitova).

• Ako dati klip sadrži masku alfa kanala, sačuvati ga u izvornoj aplikaciji korišćenjem32 bita po pikselu (naziva se takođe 24-bitni sa 8-bitnim alfa kanalom ili milioniboja). Na primer, QuickTime filmovi mogu da sadrže do 24 bita boje sa 8-bitnimalfa kanalom, a u zavisnosti od konkretnog formata koji se koristi.

• Mnoge aplikacije za video montažu (recimo, Premiere Pro) interno uvek obrađujuklipove korišćenjem 24 bita po pikselu bez obzira na to koja je izvorna dubina bitasvakog klipa (16 bita za YUV plus 8-bitni alfa kanal). Na taj način se čuva kvalitetslike prilikom primenjivanja efekata ili superponiranja klipova.

Ako se video klip priprema za NTSC standard, trebalo bi da se ima na umu da je opsegboja NTSC standarda ograničen načinom na koji se prenose signali boja bez obzira nato što formati 16-bitni YUV i 24-bitni RGB obezbeđuju pun opseg boja. NTSC ne možeprecizno da reprodukuje zasićene boje i nežne prelive boja. Najbolji način da se sprečeeventualni problemi kod boje u NTSC standardu, sastoji se u tome da video klip u tokumontaže treba pregledati na pravilno kalibrisanom NTSC monitoru.

130 Multimedija

6.5.11. Razumevanje komprimovanja video podataka

Montiranje digitalnog video klipa podrazumeva čuvanje, premeštanje i izračunavanje izu-zetno velikih količina podataka u poređenju sa drugim vrstama datoteka. Mnogi personalniračunari, a posebno stariji modeli nisu adekvatno opremljeni za obrađivanje podataka kojise prenose velikom brzinom (količina video informacija koje se obrađuju u sekundi) ivelikih datoteka koje sadrže nekomprimovane video zapise. Da bi se smanjila brzinaprenosa podataka digitalnog video klipa i da bi bila svedena na meru koju računar možeda obradi, potrebno je da se koristi komprimovanje.

Prilikom digitalizacije izvornog videa, pregledanja montiranog materijala, reprodukcije iizvozenja vrlo su značajni parametri za komprimovanje. Navedeni parametri neće biti istiu svim situacijama:

• Dobra je zamisao komprimovati video klip koji dolazi u računar. Cilj je da za potrebemontiranja očuva što bolji kvalitet slike, a da se pri tom brzinu podataka održi ugranicama mogućnosti računara.

• Video klip koji izlazi iz računara treba takođe komprimovati. Trebalo bi pokušatida se postigne što bolji kvalitet slike prilikom reprodukcije. Ako se izrađuje videotraka, neka brzina podataka ostane u granicama računara koji će reprodukovativideo zapis na video traku. Ako se izrađuje video zapis koji će biti reprodukovanna nekom drugom računaru, neka brzina podataka ostane u granicama mogućnostiplaniranih modela računara. Ako se izrađuje video klip sa neometanim tokom po-dataka (streamed) sa Web servera, neka brzina podataka bude odgovarajuća zadistribuciju na Internetu.

• Primenjivanje parametara za komprimovanje predstavlja vrlo osetljivo pitanje, aizbor najboljih parametara može da se razlikuje od projekta do projekta. Ako seautor odluči za komprimovanje koje je suviše malo, brzina podataka će biti prevelikaza dati sistem što će dovesti do grešaka, poput odbačenih slika. Ako se odluči zastepen komprimovanja koji je prevelik, čime se brzina podataka znatno smanjuje,neće moći u potpunosti da iskoristi mogućnosti svog sistema što će nepotrebno ićina uštrb kvaliteta slike.

Napomena: DV poseduje fiksnu brzinu podataka od 3, 5 megabajta u sekundi, nominalno25 megabita po sekundi. Stepen standardnog komprimovanja za DV je 5 : 1.

6.5.12. Izbor metoda za kompresiju video zapisa

Suština komprimovanja podataka sastoji se u tome da se isti sadržaj predstavi sa što manjepodataka. Da bi se upravljalo komprimovanjem na odgovarajući način, potrebno je da senavede kompresor/dekompresor, odnosno, kodek. Kodek može da koristi jednu ili višestrategija za komprimovanje, pošto nijedna metoda sama po sebi ne predstavlja najboljerešenje za sve moguće situacije. Ovde su opisane uobičajene strategije za komprimovanjekoje koristi kodek, kao i vrste video klipova za čije komprimovanje su predviđene.

Video 131

6.5.13. Prostorno komprimovanje

Prostorno komprimovanje (spatial compression) pronalazi načine za komprimovanjeneke slike utvrđivanjem šablona i ponavljanja među pikselima. Na primer, umesto daopisuje svaki od nekoliko hiljada piksela na nekoj slici plavog neba, prostorno kompri-movanje može da zabeleži znatno kraći opis, kao što je recimo ovaj: "Svi pikseli na ovojpovršini su svetloplavi". Kodiranje sa promenljivom dužinom kodne reči (run-lengthencoding) predstavlja verziju ovog postupka koju koriste mnogi kodeci. Kodeci koji ko-riste prostorno komprimovanje, kao što su QuickTime Animation ili Microsoft RLE

funkcionišu dobro na video klipovima koji sadrže velike površine jednoličnih boja, kao štoje recimo animacija u crtanom filmu.

Slika 6.18. Digitalne slike se sastoje od piksela (A), koji zauzimaju mnogo prostora nadisku ako nisu komprimovani (B). Primenjivanjem metode kodiranja promenljivom

dužinom kodne reči isti podaci na slici zauzimaju mnogo manje mesta (C).

U načelu, povećanjem prostornog komprimovanja smanjuje se brzina podataka i veličinadatoteke, a slika gubi oštrinu i definiciju. Međutim, korišćenjem pojedinih vrsta metodekodiranja promenljivom dužinom kodne reči u potpunosti se čuva kvalitet slike, ali sezahteva veća snaga za obrađivanje.

6.5.14. Temporalno komprimovanje

Temporalnim (vremenskim) komprimovanjem sažimaju se izmene u sekvenci slikautvrđivanjem šablona i ponavljanja u toku vremenskog trajanja. U pojedinim video klipo-vima, kao što je recimo klip televizijskog spikera, temporalno komprimovanje će uočiti dase iz slike u sliku jedino menjaju oni pikseli koji formiraju lice spikera. Svi ostali pikseli sene menjaju (kada je kamera nepokretna). Umesto da opisuje svaki piksel na svakoj slici,temporalnim komprimovanjem se opisuju svi pikseli na prvoj slici, a zatim za svaku sledećusliku opisuju samo oni pikseli koji su različiti u odnosu na prvu sliku. Ovaj postupak senaziva utvrđivanje razlike među slikama (frame differencing). Kada se na nekoj sliciveliki broj piksela razlikuje u odnosu na prethodnu sliku, preporučljivo je da se cela slikaponovo opiše. Svaka cela slika se naziva ključna slika koja uspostavlja novo polazište zautvrđivanje razlike među slikama. Aplikacije za montažu obično omogućuju da na nekinačin autor kontroliše način izrade ključnih slika.

132 Multimedija

Slika 6.19. U ovoj animaciji jedina izmena je krug koji se pomera oko broda

Ako za kodek ne mogu da se odrede ključne slike, to znači da on najverovatnije i ne koristitemporalno komprimovanje. Temporalno komprimovanje pruža najbolje rezultate kada sevelike površine u video klipovima ne menjaju, a mnogo je manje delotvorno kada se slikastalno menja, kao recimo u muzičkim video klipovima.

Slika 6.20. (A) Čuvanjem klipa koji nije komprimovan beleže se svi pikseli na svimslikama. (B) Primenjivanjem temporalnog komprimovanja na osnovu prve slike se

izrađuje ključna slika, a za naredne slike beleže se jedino izmene.

6.5.15. Komprimovanje sa očuvanjem kvaliteta

Neki kodeci koriste komprimovanje sa očuvanjem kvaliteta (lossless; bez gubitaka)koje obezbeđuje da se sve informacije – a samim tim i sav kvalitet – u izvornom klipusačuvaju posle komprimovanja. Međutim, očuvanje izvornog nivoa kvaliteta predstavljaograničavajući faktor za stepen do koga se brzina podataka i veličina datoteke mogu sma-njiti, a brzina podataka koja se dobija kao rezultat može biti prevelika za finu reprodukciju.Kodeci koji koriste ovaj metod komprimovanja, kao što je recimo Animation (parametarBest quality) upotrebljavaju se za očuvanje maksimalnog kvaliteta u toku montaže ili zazamrznute slike gde brzina podataka ne predstavlja problem.

Napomena: Da bi se obezbedila fina reprodukcija, za video klip koji sadrži sve slike upunoj veličini se u slučaju korišćenja ovog komprimovanja zahteva veoma veliki disk i vrlobrz računar koji je predviđen za brz protok podataka.

Video 133

6.5.16. Komprimovanje sa narušavanjem kvaliteta

Većina kodeka koristi komprimovanje sa narušavanjem kvaliteta (lossy; sa gubitkom)koje prilikom komprimovanja odbacuje neke od izvornih podataka. Na primer, ako pik-seli koji sačinjavaju nebo, zapravo sadrže 78 nijansi plave boje, kodek koji koristi ovumetodu komprimovanja može da zabeleži 60 nijansi plave boje. Iako sa jedne stranekomprimovanje sa narušavanjem kvaliteta predstavlja svojevrstan kompromis u odnosu nakvalitet, ono kao rezultat nudi manje brzine podataka i veličine datoteka u odnosu nakomprimovanje sa očuvanjem kvaliteta. U tom smislu su kodeci koji koriste ovaj metodkomprimovanja, kao što su Cinepak ili Sorenson Video široko prihvaćeni u završnojprodukciji video klipa koji se isporučuju posredstvom kompakt diskova ili Interneta.

6.5.17. Asimetrična i simetrična kompresija

Izabrani kodek bitno utiče na tok rada u produkciji, ne samo u pogledu veličine datotekeili brzine reprodukcije, već i u pogledu vremena koje se zahteva da bi kodek komprimovaodati broj slika. Brza komprimovanja ubrzavaju video produkciju, a brza dekomprimovanjaolakšavaju pregledanje, međutim za mnoge kodeke potrebno je mnogo više vremena zakomprimovanje slika nego što je potrebno za njihovo dekomprimovanje u toku reproduk-cije. U tom smislu je klip od 30 sekundi potrebno nekoliko minuta obrađivati pre samereprodukcije. Kodek se smatra simetričnim onda kada zahteva podjednaku količinu vre-mena za komprimovanje i dekomprimovanje nekog klipa. Kodek je asimetričan ondakada se vreme potrebno za komprimovanje razlikuje od vremena potrebnog za dekompri-movanje.

Komprimovanje video klipa je baš kao pakovanje kofera. Stvari se mogu zapakovati pod-jednako brzo kao i kod raspakivanja ako se jednostavno pobacaju u kofer, međutim ako seodvoji malo više vremena i lepo se složi i organizuje garderoba, u isti kofer će stati mnogoviše stvari.

6.5.18. DV komprimovanje

DV je format koji koristi veliki broj digitalnih video kamera. DV, takođe, označava vrstukomprimovanja koju ovi kamkorderi koriste, a kojim se video zapis komprimuje u samojkameri. U uobičajenoj formi DV komprimovanja koristi se fiksna brzina podataka od 25megabita u sekundi (3, 5 megabajta u sekundi) i stepen komprimovanja od 5 : 1. Ovokomprimovanje se naziva DV25. U većini video aplikacija postoji generička podrška zaDV25 i druge DV kodeke, a izvorni digitalni video klip može da se pročita bez dodatnihkonverzija.

Ni za jedan jedini kodek ne može da se kaže da je idealan za sve situacije. Kodek koji sekoristi za izvoženje dovršenog programa mora biti dostupan širokom auditorijumu. Takoda iako je specijalizovani kodek koji dolazi u sastavu specifične kartice za digitalizacijunajbolje rešenje za digitalizovanje izvornih klipova, on svakako nije najbolje rešenje zaizvoženje klipova, pošto je malo verovatno da će svaki pripadnik najšireg auditorijumaimati baš tu specifičnu karticu i specijalizovani kodek koji dolazi uz nju. Ovo je naročitoznačajno prilikom izvoženja tzv. striming medijuma (sa neometanim tokom podataka),

134 Multimedija

pošto tri najpopularnije arhitekture za neometani tok podataka (RealMedia, WindowsMedia i QuickTime) koriste sopstvene kodeke u svojim programima za reprodukciju. Naprimer, tok podataka RealMedia ne može uvek da se reprodukuje posredstvom programaza reprodukciju Windows Media i obrnuto. Da bi se izašlo u susret auditorijumu kojiposeduje najrazličitije programe za reprodukciju u svojim pretraživačima Weba, medijumsa neometanim tokom podataka obično se kodira u više formata.

6.5.19. Digitalno presnimavanje video zapisa

Da bi autor mogao da montira video program, svi izvorni klipovi moraju biti trenutnodostupni sa diska, a ne sa video trake. Izvorni klipovi se u računar uvoze sa izvornih videotraka korišćenjem postprodukcijske metode koja se naziva digitalno presnimavanje videozapisa (video capture). Shodno tome, na svom disku autor mora da ima dovoljno prostorada bi mogao da sačuva sve klipove koje želi da montira. Da bi uštedeo prostor na disku,trebalo bi da digitalizuje samo one klipove za koje zna da će ih koristiti.

Izvorni klipovi postoje u dva osnovna oblika:

• Digitalni medijumi - Ova vrsta medijuma je već izražena u obliku digitalnog for-mata koji računar može da pročita i direktno obradi. Mnogi noviji modeli kamkorderadigitalizuju i čuvaju video zapis u digitalnom formatu direktno u kameri. Ovakvikamkorderi koriste jedan od mnogobrojnih DV formata koji na izvorni materijal pri-menjuju standardnu količinu komprimovanja. Zvučni zapis se može takođe zabeležitiu digitalnom formatu. Zvučne trake se često obezbeđuju u digitalnoj formi, na pri-mer na kompakt disku. Digitalne izvorne datoteke koje su sačuvane na DV traci ilinekom drugom digitalnom medijumu moraju da se digitalno presnime (prenesu) napristupačan disk pre nego što se budu koristile na računaru u nekom video projektu.Najjednostavniji način da se digitalizuje DV sastoji se u tome da se DV uređaj (re-cimo kamkorder ili magnetoskop) (deck) poveže sa računarom posredstvom portaIEEE 1394 (poznatog i kao FireWire ili i.Link). Kada je reč o prefinjenijim zahte-vima digitalizacije, neophodno je koristiti specijalizovane DV kartice za digitalnopresnimavanje. Aplikacije za montažu podržavaju širok raspon DV uređaja i karticaza digitalizaciju čime se olakšava postupak digitalizacije DV izvornih datoteka.

• Analogni medijumi - Ova vrsta medijuma se mora digitalizovati. To znači daona mora biti konvertovana u digitalni oblik i sačuvana u digitalnom formatu dabi računar mogao da je sačuva i obradi. Klipovi sa analognih video traka (recimoHi-8), igrani film, konvencionalne audio trake i zamrznute slike kontinuiranih tonova(recimo slajdovi) predstavljaju primere analognih medijuma. Kada se analogni videouređaj (kao što je recimo analogna video kamera ili magnetoskop) u kombinacijisa odgovarajućom karticom za digitalizaciju poveže sa računarom, aplikacija zamontažu može da digitalizuje, komprimuje i prenese analogni izvorni materijal nadisk u formi klipova koji se potom mogu dodati digitalnom video projektu.

Napomena: Hardverska oprema za digitalizaciju video zapisa nije uvek ugrađena u per-sonalne računare, tako da se najčešće mora dodati sistemu instaliranjem kompatibilnekartice za digitalizaciju.

Video 135

6.5.20. Digitalizacija DV-a

Prilikom snimanja digitalnog video zapisa (DV) slike se konvertuju direktno u digitalni(DV) format u samom DV kamkorderu, gde se reportaža čuva na DV traci. Slike su većdigitalizovane i komprimovane, tako da su spremne za digitalnu montažu video zapisa.DV reportaža može da se prenese direktno na disk.

Da bi autor prebacio DV na svoj disk, neophodan mu je računar u kome postoji podrškaza OHCI interfejs, kao i port IEEE 1394 (FireWire ili i.Link). Ovo predstavlja standard nanovijim modelima Windows i Macintosh računara. Da bi obezbedio port IEEE 1394 autoralternativno može da instalira odgovarajuću DV karticu za digitalizaciju. Trebalo bi danastoji da instalira pripadajući OHCI drajver (upravljački program) za koji postoji podrška,kao i poseban programski dodatak (plug-in) za aplikaciju koja se koristi. Međutim, kadaje reč o konkretnim karticama, najbolje je pročitati prateću dokumentaciju.

6.5.21. Digitalizacija analognog video klipa

Prilikom digitalizovanja analognog video klipa neophodno je da se prvo poveže kamkor-der ili magnetoskop za karticu za digitalizaciju koja je instalirana na sistemu. Zavisnood opreme, autoru će biti na raspolaganju više od jednog formata za prenošenje izvornereportaže uključujući komponentni video, kompozitni video i S-video. Bliže informacije otome trebalo bi potražiti u pratećoj dokumentaciji za kamkorder i karticu za digitalizaciju.

Da bi se izašlo u susret korisnicima, softver za većinu kartica za digitalizaciju video klipovanapisan je tako da se njene kontrole pojavljuju i u okviru interfejsa programa za videomontažu, bez obzira na činjenicu što se najveći deo stvarnog obrađivanja video klipa odvijana kartici, izvan samog programa. Većina kartica za koje postoji podrška u programu,obezbeđuje datoteku sa unapred podešenim parametrima koja automatski podešava pro-gram za montažu tako da on optimalno podrži datu karticu. Najveći broj parametara kojikontrolišu način digitalizacije nekog klipa iz kamere ili sa magnetoskopa nalazi se u grupiopcija Capture Settings. Zavisno od vrste instalirane kartice za digitalizaciju video klipana raspolaganju mogu stajati najrazličitiji formati za digitalizaciju.

6.5.22. Razumevanje digitalnog zvuka

Zvuk može da se čuje zato što je uho u stanju da prepozna varijacije u vazdušnom pritiskukoje stvara zvuk. Analogni zvuk proizvodi ove zvučne varijacije izradom ili očitavanjemvarijacija u električnom signalu. Digitalni zvuk proizvodi zvuk odmeravanjem (uzimanjemuzorka) zvučnog pritiska ili nivoa signala pri zadatoj brzini i njegovim konvertovanjem ubroj.

Kvalitet digitalnog zvuka zavisi od brzine odmeravanja (uzorkovanja) i dubine bita. Brzi-na odmeravanja (sample rate) označava učestanost digitalizovanja nivoa zvuka. Brzinaodmeravanja od 44.1 kHz poseduje kvalitet zvuka sa kompakt diska, dok se za zvuk naCD-ROM-u ili Internetu koristi brzina odmeravanja od 22 kHz ili niža. Dubina bita (bitdepth) označava opseg brojeva koji se koriste za opisivanje zvučnog uzorka. Dubina od16 bita odgovara kvalitetu zvuka sa kompakt diska. Niže vrednosti za dubinu bita i brzi-

136 Multimedija

nu odmeravanja nisu pogodne za zvuk visoke vernosti, ali mogu biti prihvatljive (iako sašumom) za dijalog. Povećavanjem, odnosno, smanjivanjem brzine odmeravanja ili dubinebita veličina datoteke se saglasno povećava, odnosno, smanjuje.

Napomena: DV kamkorderi podržavaju samo zvuk od 32, odnosno 48 kHz, ali ne iod 44, 1 kHz. Tako da prilikom digitalizovanja izvornog materijala sa DV-a ili njegovogobrađivanja, treba nastojati da se zvuk podesi na 32, odnosno 48 kHz.

6.5.23. Sinhronizacija zvuka i video klipa

Brzinu odmeravanja treba uskladiti sa vremenskom bazom i brzinom slika u samom pro-jektu. Uobičajena greška je da se izrađuje film čija je brzina slike recimo 30fps, dok jebrzina odmeravanja 44, 1 kHz, a da se zatim ovakav film reprodukuje na 29, 97fps (videostandard NTSC). Kao rezultat se dobija postepeno usporavanje video zapisa dok zvuk(u zavisnosti od hardverske opreme) nastavlja da se reprodukuje odgovarajućom brzinom,tako da vremenom prestigne video klip. Razlika između 30 i 29, 97 dovodi do odstupanjau sinhronizaciji koje se pojavljuje brzinom od jedne slike na 1 000 slika, odnosno od 1 slikena svakih 33, 3 sekunde (nešto ispod 2 slike u minuti). U slučaju da se uoči ovakav stepenrazmimoilaženja zvuka i video klipa, treba proveriti da li je brzina slika datog projektausklađena sa vremenskom bazom.

Do sličnog problema može doći prilikom montiranja igranog filma koji je prethodno pre-bačen na video. Filmski zvuk se obično beleži na digitalnoj audio traci (DAT) brzinomod 48 kHz pri čemu je sinhronizovan sa filmskom kamerom koja beleži brzinom od 24fps.Kada se film prebaci na video zapis brzine 30fps, razlika u brzini video zapisa dovešćedo toga da zvuk preduhitri sliku ukoliko se DAT reprodukcija ne umanji za 0, 1% prilikomprebacivanja na računar. Zbog ovog problema, korišćenjem računara ne može da se kon-vertuje brzina odmeravanja posle izvornog snimanja. Najbolje rešenje se sastoji u tomeda se izvorni zvuk beleži korišćenjem DAT magnetoskopa koji može da beleži za 0, 1%brže (48, 048 kHz) prilikom sinhronizacije sa filmskom kamerom.

Na starijim CD-ROM-ovima ponekad je korišćena brzina odmeravanja zvuka vrednošću od22, 254 kHz. Danas je uobičajenija brzina od 22, 250 kHz. Ako se uoči odstupanje zvukakoje odgovara brzini nastaloj usled razlike između ove dve brzine odmeravanja (1 slikana svakih 3, 3 sekunde), to znači da se miksuju novi i stari audio klipovi koji su beleženikorišćenjem dve različite brzine odmeravanja.

6.6. Kompresija audio/video podataka i

optički medijumi

Prilično često se sreće termin "kompresija", pa je vreme da se detaljno objasni i da sepokaže zašto je značajan. Kompresija bi najjednostavnije mogla da se definiše kao "sabi-janje". Treba zamisliti neki objekat kao što je hamburger. Pod hamburgerom se običnopodrazumeva nekoliko različitih sastojaka kao što su zelena salata, krompirići, meso izemičke. Kvalitetan hamburger ume da bude toliko veliki da ga je nekada nemogućezagristi, a da se pre toga ne pritisne, kako bi uopšte mogao da stane u usta. Moglo bi

Video 137

se reći da to predstavlja neku vrstu kompresije koja prethodi žvakanju. Sastojci se sabi-jaju na različite načine - lepinja u sebi sadrži dosta vazduha tako sa da njom ide veomalako. Međutim, meso može da se komprimuje samo malo zato što je već sabijeno u samupljeskavicu. Sve u svemu, korisnik na kraju dobijate manji hamburger u kome su nekekomponente sabijene manje, a neke više.

Verovali ili ne, kompresija karakteristična za računare zasniva se na istim principima. Tek-stualne datoteke su prepune "međuprostora" tako da se veoma uspešno komprimuju, tj.nakon sabijanja može se dobiti datoteka koja je 90% manja, što znači da je kompre-sija izuzetno velika. Neki drugi tipovi datoteka kao što su video ili fotografije manje sekomprimuju, jer se one nalaze u formatu koji je već komprimovan.

6.6.1. Zašto je digitalni video komprimovan?

Možda zvuči čudno, ali jedan od razloga zbog kojih je digitalni video komprimovan je tajšto ljudksa čula to ne primećuju. Poznato je da ljudsko uho može da registruje samozvuke između 20 i 20 000 herca. Slično tome, ljudsko oko može da registruje otprilike1024 nijanse iste boje, od milijardi boja do kojih je moguće doći matematičkim putem.Prema tome, ima li smisla zadržati baš sve boje ako naše oko ionako nije u stanju daih razlikuje. Pored toga postoje i redundantne (suvišne) slike - ako se u svakoj sekundinekog videa od 60 sekundi na istom mestu pojavljuje ista stolica, zašto bi se podaci o njojsnimali u svakom kadru video zapisa. Drugi razlog za postojanje kompresije jeste prostorkoji je neophodan za skladištenje digitalnog videa.

Veličina kadra K =(širina u pikselima × dužina u pikselima × dubina bitova)/8/1024

Veličina kadra K = (720× 576× 24)/8/1024 = 1215Kb

Ovaj obrazac govori da samo jedan kadar sirovog, nekomprimovanog video materijala ustandardnoj digitalnoj video rezoluciji (720 × 576) zauzima preko 1Mb prostora. Poštovideo snimci obično imaju oko 25 kadrova u svakoj sekundi, ovde se govori o preko 30Mb

prostora po svakoj sekundi (Mbps) video snimka. Za 60 minuta videa to je oko 120Gb

prostora. Kada se tome doda zvuk, ovaj broj je još veći. Drugim rečima, bez kompri-movanja bi rad sa digitalnim videom bio izuzetno težak ili praktično nemoguć.

6.6.2. Kompresija bez gubitaka

Pod terminom bez gubitaka ovde se podrazumeva "nepostojanje gubljenja podataka".Kada se neka datoteka komprimuje bez gubitaka, to znači da su apsolutno svi podaci jošuvek tu. Dobar primer je zip format Microsoft Word dokumenta. Kada se raspakujedokument, u njemu su sva ona slova koja je imao i pre postupka komprimovanja. Sličnotome, i video materijal je moguće snimati bez gubitka podataka. U ovom slučaju se podacisamo sabijaju u manji format. U formate kompresije bez gubljenja podataka spadaju AVI,WAV i bitmapa (BMP datoteka).

138 Multimedija

6.6.3. Kompresija sa gubitkom

U kompresije kod kojih postoji gubitak podataka ubrajaju se formati WMV, WMA i MPEG. Pri-likom svakog snimanja datoteka u nekom od ovih formata odbacuje se sve više podataka.Kod visoke kompresije slika ili videa gubitak podataka postaje primetan, obično u vidudelimične deformacije oblika, tj. glatkih linija. Zato će autor, kad god neki video zapissnima u komprimovanom formatu, morati da balansira između kvaliteta i veličine.

6.6.4. Psihoakustička audio kompresija

Formati MP3, WMA ali i mnogi drugi, baziraju se na moćnim matematičkim algoritmimakoji odbacuju informacije o zvucima koje ljudi ne bi bili u stanju da čuju. Evo jednogprimera: kada bi autor istovremeno zavrištao najjače što može i lagano tapkao nogom popodu, verovatno se ne bi čuo zvuk koji je pravio nogom, mada ovaj zvuk ipak postoji.Odbacivanjem ovog zvuka imaće manje informacija, a to znači i manju datoteku.

6.6.5. Psihovizuelna video kompresija

U psihovizuelnim modelima izbacuje se ono što nije moguće videti. Primera radi, u ne-komprimovanom video snimku zida crne boje postojao bi crni piksel za svaku tačku nazidu. Ali ako se ovakvi pikseli ponavljaju u nedogled, zašto se ne bi snimio samo jedanpiksel koji će da se replicira i popuni prostor. Ova vrsta kompresije naziva se statističkaredundantnost podataka i ona odbacuje podatke koji se ponavljaju. Zahvaljujući ovim,ali i nekim drugim matematičkim trikovima, moguće je da formati kao što su WMV i MPEGbudu visoko komprimovani, a da ipak imaju solidan kvalitet slike.

6.6.6. Kako je nastao MPEG?

MPEG (Motion Pictures Experts Group) je radna grupa formirana krajem osamdesetihpri Međunarodnoj organizaciji za standarde ISO, sa ciljem da stvori otvoreno i standardnorešenje za kompresiju audio i video materijala, kako bi se sprečilo upadanje u zamkuzatvorenih i nedokumentovanih rešenja. Nastao je kao reakcija industrije na slučaj kadaje Intel otkupio algoritam video-kompresije (kasnije poznat pod imenom Indeo) koji jerazvijen u akademskoj sredini. Bazirajući svoj rad na iskustvima srodne JPEG radne grupe,ali i radnih grupa koje su pri CCITT/ITU stvarale H.26x standarde, MPEG relativno brzopredstavlja prvi rezultat, standard danas poznat kao MPEG-1.

Jedna od prvih praktičnih primena ovog standarda bio je VideoCD format, koji je omogu-ćavao da se na jedan CD smesti oko 45 minuta filma u kvalitetu koji otprilike odgovaraVHS trakama. VideoCD nije postigao svetsku popularnost, mada je često korišćen naDalekom Istoku. MPEG-1 je korišćen i za Philips-ove digitalne audio-kasete, ali je njegovkonačni trijumf doneo Internet, pre svega neočekivanim uspehom audio formata poznatogpod imenom MP3.

Sledeći cilj bila je komercijalna distribucija digitalnog TV programa, a rešenje je bio stan-dard MPEG-2. MPEG-2 je predstavljao nadogradnju - kvalitet slike je poboljšan za oko

Video 139

20% i uvedena je podrška za interlace video, što je tehnika koju koriste postojeći tele-vizijski sistemi. MPEG-2 je našao široku primenu u digitalnim satelitskim i zemaljskimsistemima prenosa, a proširio se i na kućnu elektroniku - vlasnici DVD uređaja svakodnev-no se susreću sa njim, pošto DVD koristi upravo MPEG-2 kompresiju.

MPEG-2 je doneo i zanimljive novine na polju zvuka, ali taj segment nije doživeo širupopularnost. Podrška za višekanalni audio trebalo je da predstavlja jednu od udarnih oso-bina DVD standarda, ali je univerzalno prihvaćeno drugo rešenje - Dolby AC3. MPEG-2je doneo i potpuno novi audio kodek, poznat kao Advanced Audio Coding, ali ni on, presvega zahvaljujući Dolby-ju koji je nosilac licencnih prava za ovaj kodek, nije pronašaoput do šireg auditorijuma. Tako se MPEG-2 audio, uglavnom koristi (u MPEG-1 kompa-tibilnom modu) na digitalnim emisionim sistemima.

Sledeći zadatak za MPEG grupu bila je televizija visoke definicije (HDTV) i bilo je planiranoda ove primene podrži standard MPEG-3. Pokazalo se, međutim, da MPEG-2 obuhvatai ove potrebe, pa se MPEG grupa okrenula ka nižim nivoima propusnih opsega, naročitonakon velikog rasta popularnosti i primene Interneta. Tako je nastao MPEG-4.

6.6.7. Osnove MPEG-4 standarda

Originalna primena MPEG-4 standarda trebalo je da bude distribucija multimedijalnihsadržaja na nižim propusnim opsezima (dakle, na Internetu). Vremenom su tvorci shvatilida su uređaji za masovno skladištenje podataka kao što su CD-R(W), DVD-R i slični, postalidaleko rasprostranjeniji nego što se to očekivalo u vreme kada je MPEG-4 planiran, pa jenamena standarda proširena i na takve primene.

Zbog šireg opsega primena u odnosu na dva prethodna standarda, MPEG-4 je uveomogućnost korišćenja ne samo realnog digitalizovanog audio i video sadržaja, već i kom-pjuterski generisanog. Tako MPEG-4 podržava tekst, bitmape, 2D i 3D vektorske grafičkeobjekte, sintetički govor i muziku (Text-To-Speech, MIDI), kao i jezike koji služe za kom-poziciju svih tih objekata, kreiranje scena i interakcije objekata sa korisnikom. Ove ciljeveje ispunio Macromedia Flash koji je, iako zatvoren, u međuvremenu postao de factostandard na Internetu.

Za MPEG-4 je, međutim, planirana šira primena koja se odnosi na digitalnu televiziju,HDTV, videofoniju, mobilne komunikacije.

6.6.8. MPEG-4 Video

Sticajem okolnosti, neki elementi MPEG-4 standarda ušli su u upotrebu mnogo brže negošto su tvorci očekivali. Glavni razlog za to je gotovo neverovatna popularnost video-kodeka. Zamisao je bila da MPEG-4 omogući kvalitet slike približan DVD-u na dalekomanjim propusnim opsezima. Teorijski, algoritam je trebalo da omogući DVD kvalitet u3− 6 puta manjem fajlu. Donja granica otprilike odgovara kapacitetu CD-a.

Prvu implementaciju napravio je Microsoft; ta verzija je bila dostupna u izvornom oblikuali i kao Video for Windows kodek. Tako je šira javnost prvi put i došla u kontakt saMPEG-4 videom i uvidela njegove potencijale. Microsoft je želeo da primenu zadrži za

140 Multimedija

sebe, pa je Microsoft-ov MPEG-4 kodek radio samo sa Microsoft-ovim zatvorenim for-matom koji se zove ASF/VMW. Odgovor video entuzijasta bio je krekovanje kodeka - kakobi krekovani i originalni kodek mogli da rade u isto vreme, autori kreka su promenili imekrekovanog kodeka u DivX, po propalom sistemu za digitalne video diskove nalik DVD-u,ali u kome je diskovima isticao rok upotrebe nakon 48 sati.

DivX je ubrzo postao za filmove ono što je MP3 bio za muziku – filmski studiji i distributeridobili su još jedan razlog za glavobolju, ali su autori kreka uvideli potencijale pa su formi-rali kompaniju koja se danas zove Divx Networks. Ova kompanija je razvila sopstvenuimplementaciju MPEG-4 video-kodeka (Divx 4 i 5). Razvoj ovog kodeka jedno vremeje bio u formi open source projekta OpenDivx, iz čega je posle raznih peripetija stvorenprojekat Xvid, čiji se kodek smatra jednom od najboljih i najkompletnijih implementacijaMPEG-4 video-kodeka.

Danas postoji gomila komercijalnih, besplatnih i slobodno dostupnih implementacija:MPEG-4 video nudi i Apple, ali i kompanije kao što su Sorensen, 3ivx, Envivo... Za-hvaljujući popularnosti DivX-a, pojavili su se i stoni uređaji koji mogu da emituju ovakvefajlove.

6.6.9. MP4 format

Divx, Xvid i ostali danas se najčešće koriste kao video-kodek u AVI formatu fajlova, alije AVI zastareo format koji omogućava samo delić onoga što MPEG-4 nudi. Za punupodršku biće potrebno masovnije korišćenje MPEG-4 formata fajla. MPEG-4 je, sličnoformatima AVI ili MOV, po tipu "kontejnerski", što znači da je namenjen smeštanju raznihdrugih informacija, u ovom slučaju video i audio materijala i drugih sadržaja koje MPEG-4podržava. Posebno je zanimljivo što je za ovaj format usvojena ekstenzija MP4, čime je ustartu dobijena besplatna reklama.

MPEG-4 format je nastao na osnovu Apple-ovog QuickTime-a (MOV), što ne treba da čudi.QuickTime tehnologija je u startu razvijana za profesionalne primene, pa je i QuickTimeformat zapisa omogućavao zanimljive stvari kao što je podrška za titlove ili spisak efekatakoje pri reprodukciji treba izvesti nad slikom ili zvukom. QuickTime nije u široj upotrebisamo zato što je Windows implementacija katastrofalno loša (verovali ili ne, QuickTimeza Windows se oslanja na Mac-ov API koristeći emulacioni sloj koji prevodi pozive Mac-ovog API-ja u Win32!?), čime je Apple propustio da svojoj tehnologiji obezbedi veći brojkorisnika.

MPEG-4 format daleko proširuje ove mogućnosti podrškom za različite tipove multimedi-jalnog sadržaja koji su deo MPEG-4 specifikacije, kao i jezikom za definisanje "scena", tekompozicije objekata, njihove međusobne interakcije i interakcije sa korisnikom. Uz sveovo dolazi i obavezni mrežni streaming, kao i (za sada delimična) podrška za skaliranje uskladu sa raspoloživim propusnim opsegom.

6.6.10. MPEG-4 audio

Iz tonskog aspekta MPEG-4 standard ne donosi mnogo toga novog, ali se očekuje daće MPEG-4 audio postići tržišni uspeh. Glavni audio-kodek je već poznat iz MPEG-2

Video 141

standarda kao AAC (MPEG-2 Advanced Audio Coding, originalno ime je bilo MPEG-2Non Backwards Compatible). Glavne karakteristike su ostale iste - AAC omogućava do48 audio kanala uz njihovo uparivanje po potrebi, 15 LFE kanala, ugrađivanje podataka,podršku za različite jezike i slično. Osim MPEG-4 AAC, MPEG-4 format može da primi iprethodne MPEG audio standarde (MP2, MP3, MPEG-2 AAC), i ima rezervisane tipoveobjekata za ove kodeke.

MPEG-4 AAC teorijski treba da omogući audio Hi-Fi kvalitet sa propusnim opsegom odoko 48Kbps. Jedna od specifičnosti MPEG standarda je da su formati zapisa i standardiza dekodere strogo fiksirani, ali da je enkodiranje ostavljeno tržištu. Zato postoje razlikeu kvalitetu između raznih video i audio enkodera i kod videa i kod (recimo) MP3 fajlo-va. Postojeći AAC enkoderi su, prema nekim procenama, na oko 60% teorijski mogućegkvaliteta.

Mogućnost skladištenja i upotrebe sintetničkog sadržaja predstavlja glavnu razliku uodnosu na MPEG-1 i MPEG-2. Umesto realnog digitalizovanog zvuka i slike, objekti mogubiti i kompjuterski generisani – umesto prave, snimljene i digitalizovane muzike, MPEG-4može da ima MIDI muziku koja će biti sintetizovana prilikom reprodukcije. Umesto pravogglasa, autor MPEG-4 sadržaja može navesti samo tekst koji treba da bude pročitan, tedefinisati (ili ostaviti korisniku da to uradi) uslove pod kojima će tekst biti pročitan - pol"spikera", boja glasa itd. Isto tako, vizuelni sadržaji mogu biti predstavljeni raznim 2D ili3D objektima.

MPEG-4 sadrži jezik koji služi za opis i upravljanje ovakvim zvučnim i vizuelnim objektima,koji je nazvan BIFS - Binary Format For Scenes. On omogućava manipulaciju objektimai dinamičke promene njihovih svojstava. Pandan BIFS-u su već pomenuti MacromediaFlash ili W3C jezik VRML. Razlika između njih je što je MPEG-4 otvoren standard, a velikaprednost u odnosu na VRML je mogućnosti za streaming u realnom vremenu. MPEG-4podržava i Javu kroz ekstenziju specifikacije nazvanu MPEG-J.

6.6.11. MPEG-7

MPEG grupa je u 1996. počela sa radom na novom standardu MPEG-7. MPEG-7 najnovijiproizvod MPEG familije (multimedia content description interface - kratko MPEG-7), kojiće specificirati standardni set deskriptora koji mogu da opišu različite tipove multimedi-jalnih podataka. MPEG-7 će, pored toga, standardizovati i način da se opišu i drugačijideskriptori, kao i strukture (opisne šeme) za deskriptore i njihove veze. Ovi opisi (kombi-nacija deskriptora i opisnih šema) će biti povezani sa sadržajem da bi se obezbedila brzai efikasna pretraga stvari koji interesuju korisnika. MPEG -7 će, takođe, standardizovatii jezik za specificiranje opisnih šema - Description Definition Language (DDL). Video ma-terijal koji bude imao MPEG-7 udružene podatke moćiće da bude indeksiran i pretraživanpo njima.

6.6.12. Neki tipovi digitalnih audio datoteka

Windows Audio Video (WAV) – Ove datoteke predstavljaju kompresiju bez gubitakatako da su prilično velike. Pesme u ovom formatu obično su veće od 40Mb, ali i izuzetno

142 Multimedija

kvalitetne, pa se mogu snimati koliko god puta treba, bez ikakvog gubitka kvaliteta. Svevideo aplikacije prihvataju ovaj format kao zvučni izvor.

Windows Media Audio (WMA) – Ovo je jedan od najboljih formata za komprimovanjedigitalnog zvuka. WMA datoteke poseduju kvalitet MP3 formata, ali sa upola manjimdatotekama i protokom podataka. Nažalost, dosta programa ne prihvata WMA format.

MP3 – Format MP3 ili MPEG Layer 3 je predak svih audio kompresija sa gubitkom. MP3datoteke imaju sasvim prihvatljiv kvalitet zvuka, a deset puta su manje od WAV datoteka,što ih čini izuzetno popularnim. Danas gotovo svaki paket za uređivanje videa može daprihvati ovaj format zvučnog zapisa.

6.6.13. Neki tipovi digitalnih video datoteka

Audio Video Interleaved (AVI) – Ovaj format je jedan od najstarijih i najrasprostra-njenijih video formata namenjenih PC platformama. AVI datoteke u osnovi predstav-ljaju "kontejnere" za video. Ako se pri kompresiji ne koristi neki moćan kodek (kompre-sor/dekompresor), ove datoteke su veoma velike. Kod većine standardnih kodeka snimanjeu AVI formatu predstavlja kompresiju bez gubljenja podataka.

Windows Media Video (WMV) – U ovom formatu se podaci odbacuju primenomposebnih psihovizuelnih kodeka nakon čega se dobija veoma kvalitetan video zapis kojizauzima iznenađujuće malo prostora. Na primer, AVI datoteka komprimovana u WMV for-matu može da zauzima i do 20 puta manje prostora, a da razlike u kvalitetu ne budumnogo primetne.

Moving Picture Experts Group (MPEG) – Format MPEG je dugo prisutan i pred-stavlja osnovu mnogih drugih postojećih video formata. Ovo je prvi format namenjen PCračunarima koji je omogućavao komprimovanje ogromnih AVI datoteka u mnogo manjedatoteke uz zadržavanje pristojnog kvaliteta. Ove datoteke mogu da se reprodukuju uWindows Media Player-u, a u većini programa za uređivanje videa postoji mogućnostizbacivanja neke varijante MPEG formata.

MPEG2 – Ovaj format je novija verzija MPEG-a koja omogućava dobijanje kvalitetnijihvideo zapisa. MPEG2 datoteke se snimaju u kompresiji sa gubitkom podataka, i često imajuproširenje .m2v.

MPEG4 – Ovaj format je vremenom prerastao u zamenu originalnog MPEG video for-mata. Većina aktuelnih video formata se bazira na standardu MPEG4, i on predstavljajezgro najvećeg dela striming videa (video snimak čija reprodukcija počinje pre potpunogzavršetka preuzimanja – uživo) koji danas postoji.

RealVideo – Nekada je bio neprikosnoveni gospodar striminga. Mana mu je to što da bimogao da se reprodukuje RealVideo materijal neophodan je RealOne plejer, što je smetnjakada korisnik hoće da razmenjuje svoje snimke sa drugima (oni takođe moraju da preuzmuposeban plejer kako bi mogli da vide te snimke).

QuickTime – Ovaj format posebno je popularan među filmskim kompanijama koje svojetrejlere objavljuju na Webu. Video kvalitet ovog formata je izuzetan, a njegov strimingveoma uspešan.

Video 143

DivX – Ovaj format je relativno nov, i reč je o kodeku za AVI format baziranom na stan-dardu MPEG-4 pomoću koga se dobijaju izuzetno komprimovane video datoteke vrhunskogkvaliteta. Zbog toga, ali i zbog besplatnih alatki za pravljenje i reprodukciju ovog formata,DivX je veoma zanimljiv. Posebno je popularan za razmenjivanje filmova. Ipak i ovaj for-mat ima svoje nedostatke. Ako se korisniku pošalje elektronskom poštom AVI datoteka uDivX formatu, on će u svom Windows Media Player-u moći da čuje zvuk, ali neće moćida vidi sliku. Tada će korisnik morati da poseti adresu www.divx.com i preuzme njihovbesplatni softver. To nije teško, ali ipak predstavlja neku komplikaciju.

6.7. Snimanje i editovanje (uređenje) videa

Da bi se multimedijalnom projektu dodao video preko celog ekrana i u punom pokretu,autor će morati da investira u specijalizovan hardver i softver ili da plati usluge profesio-nalnog studija za video produkciju. U mnogim slučajevima profesionalni studio će, takođeimati alate za editovanje i postprodukcione sposobnosti koje korisnik ne može da imati naMacintoshu ili PC-u.

Skupa profesionalna video oprema i usluge ne moraju dati proporcionalno veću korist uodnosu na korišćenje opreme za široku potrošnju i nelinearne editore. Ako je autor, kojimslučajem, u stanju, trebalo bi da eksperimentiše sa raznim kombinacijama video snimanjai uređaja za reprodukciju koji su povezani na hardver za video digitalizovanja i da testirarezultate na multimedijalnoj platformi. Može se na zadovoljavajući način obaviti mnogoposla sa video kamerama potrošačkog nivoa, ako se razumeju ograničenja tehnologije.

6.7.1. Planiranje ili scenario

Planiranje ili scenario je faktor koji ne može biti ignorisan bez troškova zbog gubitkavremena, puno nepotrebnih pogoršanja i gubitka novca koji bi se bolje upotrebio na nekomdrugom mestu. Uspešna video produkcija, bilo koje vrste, zaslužuje vreme koje je potrebnoda bi se napravio plan da se sprovede. Možda će biti potrebno malo više vremena prvi put,ali je očigledno da je to korisna stvar na duge staze. Scenario predstavlja strip koji se čitasvakodnevno. Za svaki dan postoje tri ili četiri panela koji prikazuju napredovanje priče.Treba naći vremena da se napravi struktura produkcije, a zatim sledi grupa crteža kojipokazuju kamere i scenu, uglove snimanja, osvetljenje, akcije, specijalne efekte i kolikoobjekata će se kretati kroz scenu, od početka do kraja. Scenario mogu svi učesnici dobitibrzo na jednoj jedinoj stranici.

6.7.2. Platforma za snimanje

Nikada se ne sme potcenjivati vrednost postojane platforme za snimanje. Klasični simbolamaterskih kućnih snimaka je kamera koja se trese u ruci. Postavljanjem kamere nastabilnu osnovu, kao što je presavijeni džemper na haubi kola, može poboljšati snimak.Uz malo pažnje i pažljivog prilagođavanja šrafova za učvršćivanje, metalni tronožac ćeučiniti čuda. Ako korisnik mora da snima iz ruke, trebalo bi da pokuša da koristi kameru

144 Multimedija

sa stabilizacijom elektronske slike za nepokretne snimke, dodatke tipa steady cam, ili dapokreće kameru i/ili ono što snima da bi zamaskirao nedostatak postojanosti.

6.7.3. Osvetljenje

Verovatno najveća razlika između profesionalnih i potrošačkih kamkordera je sposobnostsnimanja po slabom svetlu. Upotrebom jednostavnog priručnog osvetljavanja ili, čak samoobezbeđivanjem da dnevna svetlost prodre u sobu korisnik može znatno da poboljša sliku.Pokretna svetla na baterije za kamkordere mogu biti od koristi, ali samo tamo gde svetlodejstvuje za osvetljavanje detalja na licu osobe. Kao u fotografiji, dobre tehnike osvetlja-vanja razdvajaju amatere od profesionalaca u snimanju videa.

Na slici 6.21 je ekran programa AGi32 Lighting software kompanije LightLab Inter-national. Prikazana je jedna od standardnih postava osvetljenja u studiju, sa svetlosnimizvorom sa jedne strane. Promenom ovog svetla ili dodavanjem drugih svetala dobijaju sedramatični efekti na sliku. Sa desne strane slike 6.21 prikazan je dijalog koji omogućavauključenje dnevnog ili noćnog svetla u tekuću scenu.

Slika 6.21. Dobro osvetljenje je veoma bitno za snimanje kvalitetnog videa

6.7.4. Hroma ključevi (Chroma Keys)

Hroma ključevi ili Chroma Keys se koriste za brzo uklanjanje ili maskiranje dela slike.Mogu se koristiti za razne svrhe uključujući: uklanjanje pozadine sa slika, maskiranje slika,generisanje ikonica, isecanje ili odsecanje delova slika, stvaranje nepravilnog oblika slikeitd.

Filmska industrija je rešila ovaj problem razvojem plavog ekrana, a kasnije i zelenog (slika6.22). Koristeći ovaj metod, glumci (u prvom planu) su snimani ispred plave pozadine.Plava pozadina je kasnije zamenjena elektronskom ili drugom slikom ili videom. Plaviekran je popularan metod za pravljenje multimedijalnih naslova, zato što se ne zahtevaskupa scenografija. Neverovatne pozadine se mogu napraviti 3D modelovanjem i grafičkimsoftverom i na njih se mogu pogodno razmestiti jedan ili više glumaca, prevoznih sredstavaili drugih objekata. U današnje vreme mnoge aplikacije imaju tu mogućnost.

Video 145

Slika 6.22. Snimanje scena ispred plave pozadine

Kada se snima plavi ekran, treba proveriti da li je svetlo na zaslonu apsolutno ravnomerno;fluktuacije u jačini će učiniti da taj "ključ" izgleda kao brdovit ili slomljen. Snimanje podnevnom svetlu (omogućavanje da sunce osvetli zaslon) ublažiće ovaj problem. Ako glumcistoje previše blizu zaslona, obojeno svetio odbijeno od zaslona će se razliti po njima, paće delovi njihovih tela "nestati". I dok podešavanja u većini programa omogućavaju dase ovakve greške isprave, treba imati na umu da su te mogućnosti ograničene.

6.8. Optimizovanje video fajlova za CD-ROM

CD ROM je odličan medij za distribuciju video materijala koji je urađen na računaru – jeftinje za masovnu proizvodnju i može da nosi veliku količinu informacija. Čitači CD ROM-asporo prenose podatke, ali adekvatan video transfer može da se postigne ako se ispravnopripreme digitalne video datoteke. Ako autor ne uloži dosta truda, digitalne datoteke semogu sporo reprodukovati kada je propusni opseg mali ili je kompresija prevelika. Sledinekoliko saveta.

• Treba ograničiti sinhronizaciju između videa i audia. Kod AVI datoteka audio i videopodaci su već isprepletani (aktivirana opcija flatten), ali kod QuickTime datotekatrebalo bi da se ceo film prebaci u istu ravan. To znači da treba aktivirati pomenutuopciju i primeniti je i na audio i na video segmente.

• Treba koristiti ravnomerno raspoređene ključne frejmove, na rastojanju od 10 do 15frejmova, tako da privremena kompresija može da ispravi zastoje zbog pretraživanja.Vreme pretraživanja (seek time) pokazuje koliko treba čitaču CD ROM-a da nađezadate podatke na disku.

• Veličina video prozora i frekvencije "osvežavanja" frejmova drastično utiču na per-formanse. U QuickTime formatu 20 frejmova u sekundi reprodukovano u prozoru160×120 je ekvivalentno reprodukciji od 10 frejmova u sekundi u prozoru 320×240.Što više podataka treba da bude dekomprimovano i preneto sa CD ROM-a na ekran,to je sporija reprodukcija.

• Trebalo bi izvršiti defragmentaciju fajlova pre nego što se projekat ne nareže na CD.

146 Multimedija

• Iako će preplitanje zvuka CD kvaliteta u video produkciji teoretski dati zvuk najvišegkvaliteta, količina podataka može biti prevelika za prenos sa CD ROM-a u realnomvremenu. Trebalo bi koristiti manju frekvenciju uzorkovanja i manju veličinu uzorkada bi se smanjila količina audio podataka.

6.9. Virtualna realnost (stvarnost)

Stalni razvoj računara i informatičkih tehnologija omogućuje realizaciju i primenu novihmetoda i sistema kakve ranije nisu bile moguće. Jedan primer takvog razvoja je i tehno-logija virtualne stvarnosti ili virtualne realnosti ili virtualnog okruženja. Tehnikamavirtualne stvarnosti moguće je ostvariti realistične simulacije koje su korisne u mnogimpodručjima ljudske delatnosti. Simulacije su dakako bile poznate i ranije, ali tehnike vir-tualne stvarnosti mogu ostvariti utisak "uplivavanja" čoveka u nepostojeći, virtualni iliprividni svet.

Takav utisak prisutnosti u prividnom svetu moguće je ostvariti pomoću naprednih računarai uređaja za komunikaciju između čoveka i računara. Tehnike virtualne stvarnosti kori-ste i savremene računarske mreže da bi ostvarile komunikaciju između čoveka i od njegaudaljene okoline sa svrhom ostvarivanja delovanja na daljinu.

Početkom devedesetih godina dvadesetog veka javno shvatanje virtualne stvarnosti prili-čno je iskrivljeno. Naime, zahvaljujući njenom odjeku u štampi, filmovima i televiziji, odvirtualne stvarnosti su se doslovno očekivala čuda. Ali, iako su to neki predviđali, virtualnastvarnost nije ušla u široku primenu. Tako je kod dela javnosti, ali i kod nekih stručnjakadošlo do velike promene u stavovima o virtualnoj stvarnosti, pa su tu tehnologiju proglasilibeskorisnom.

Međutim, u poslednje vreme pronađene su brojne praktične primene virtualne stvarnosti.Iako one nisu toliko široke koliko se nekada proricalo, definitivno su vredne razmatranja.Virtualna stvarnost našla je svoju primenu u prividnom svetu trgovina, pustolovnim igrama,naučno-istraživačkim projektima, vojnim projektima, primenama u industriji...

Osnovna korist prividnog sveta jeste u tome što željeni objekat ili okolina mogu da sedožive, mogu da se istražuju i otkrivaju nedostaci, a da se to u stvarnosti uopšte ne izgra-di. To vodi značajnoj uštedi na materijalu, vremenu izgradnje, postupku učenja i sticanjaiskustava.

6.9.1. Definicija i princip virtalne realnosti

Da bi pojam i princip virtualne stvarnosti bio što je moguće jasniji, na samom početkupotrebno je pojasniti pojam percepcije. Percepcija je proces u kojem se prikupljaju iinterpretiraju informacije o svetu oko korisnika. U procesu percepcije učestvuju čula imozak.

Postoje dve vrste čula - spoljašnja i unutrašnja. Spoljašnja detektuju pojave izvan orga-nizma, a unutrašnja detektuju pojave unutar organizma (glad, umor, bol, žeđ...). Spolja-šnja čula mogu još da se podele na daljinska (toplota, vid, sluh) i kontaktna (miris,

Video 147

dodir, ukus). Kada je u pitanju virtualna stvarnost, za sada su dobro razvijeni samosistemi koji utiču na daljinska čula, mada se postupno razvijaju i sistemi koji utiču nakontaktna čula.

Čula prenose informacije iz okoline, dok mozak interpretira primljene informacije. Osimčula, na percepciju utiču i iskustva, znanje, emocije i motivacija. Da bi se prevario sistempercepcije, osnovna ideja je da realne nadražaje koje primaju čovekova čula treba zamenitiveštački generisanim nadražajima. Na taj način može realna okolina da se zameni pri-vidnom okolinom. Kao posledica se javlja to da se u sistemu percepcije stvara utisak oprisutnosti osobe u prividnoj, nepostojećoj okolini.

Virtualna realnost (Virtual Reality – VR) je računarski kreirano senzorsko iskustvo kojeomogućava korisniku da poveruje u prividnu stvarnost. Korisnik je tada ili potpunookružen tim virtualnim svetom ili delomično uključen slušajući i gledajući aplikacije vir-tualne stvarnosti. Virtualna stvarnost je skup tehnologija koje korisnika "uranjaju" uvirtualno okruženje. Pritom, u idealnom slučaju, korisnikova čula detektuju samo vir-tualne nadražaje proizvedene računarom, a uz to je ostvaren direktan unos korisnikovihpokreta u računar. Za postizanje ovih efekata koriste se različiti uređaji, o čemu će kasnijebiti reči.

Virtualna okruženja (VO) se zasnivaju na predmetima koji su definisani u memorijiračunara na takav način da računar kasnije može da prilaže te predmete na ekranu uzmogućnost interakcije. Kombinovanjem elemenata nestvarne (izmišljene) okoline i stvarneokoline (koja može biti i udaljena), kod korisnika se stvara utisak o prisutnosti u nekojvirtualnoj okolini. To je prikazano i na sledećoj slici.

Slika 6.23. Virtualna okruženja

Sledeća slika prikazuje osnovni princip virtualne stvarnosti. Korisnik se nalazi u zatvorenojpetlji i povezan je sa računarom pomoću ulaznih i izlaznih jedinica. Ulazne jedinice (1)prate pokrete korisnika i prosleđuju ih računaru (2), koji na osnovu tih i drugih podatakavrši simulaciju virtualnog okruženja (VO). Pomoću izlaznih jedinica (3) računar prikazujevirtualno okruženje korisniku, i to što je moguće direktnije.

148 Multimedija

Slika 6.24. Princip virtuelne realnosti

U idealnom slučaju, korisnikova čula bi trebala da detektuju samo veštački generisanenadražaje (od računara), i time bi stvarni svet bio potpuno isključen. Tako u primeruna slici korisnik (4) vidi samo sliku stvorenu na računaru. Time je petlja zatvorena, akorisnik direktno vidi, čuje (i eventualno oseća, miriše, proba...) virtualno okruženje saneposrednim rezultatima vlastitih pokreta.

Trenutni praktični dometi ove ideje ograničeni su nemogućnošću da se realna čula zameneveštačkim čulima, a posebno je teško preneti kontaktna čula (dodir, miris, ukus).

U praksi je granica između virtualne stvarnosti i "običnog" virtualnog okruženja vrlorelativna i slabo definisana, i zavisi od toga šta se uzima kao glavno svojstvo virtualnestvarnosti.

Ako se kao glavno svojstvo virtualne stvarnosti uzima to da korisnika "ubacuje" u virtualnookruženje, to jest da korisnik ima osećaj da se nalazi negde drugo, onda se ta granica možepostaviti bilo gde. U tom slučaju se virtualnom stvarnošću može smatrati i obična knjigaili film, jer se i u njih korisnik može toliko udubiti da mu se čini da se nalazi negde drugde.

Ipak, najčešće se virtualnim okruženjem smatra interaktivna 3D grafika na personalnomračunaru sa mišem, a virtualnom stvarnošću se smatraju sistemi koji korisnika još više"ubacuju" u virtualno okruženje korišćenjem raznih dodatnih uređaja.

6.9.2. Uređaji za virtaulnu realnost

Uređaji za virtualnu stvarnost dele se, najpre, na ulazne i izlazne, a zatim na vrste ipodvrste unutar svake kategorije.

Ulazni uređaji

U ulazne uređaje spadaju:

• Senzori pozicije/orijentacije – elektromagnetski, akustički, optički, mehanički,inercijski.

• Senzori sile/momenta sile – Spaceball i slično.

• Senzori položaja tela/ruke – senzorska rukavica DataGlove, senzorsko odela Body-Suit.

Video 149

• Senzori pokreta – pokretna traka, bicikl ergometar, veslački ergometar itd.

• Ostalo – upravljanje putem disanja, praćenje lica, praćenje očiju, prepoznavanjegovora.

Elektromagnetski senzori koriste izvor elektromagnetskog polja, te elektromagnetskesenzore, a položaj izvora je fiksan i poznat. Senzori koji se nalaze na glavi i rukama ko-risnika primaju elektromagnetski signal te ga prosleđuju središnjoj jedinici koja na osnovuprimljenog signala računa položaj i orijentaciju senzora unutar elektromagnetskog polja,dakle položaj i orijentaciju u odnosu na izvor. Izvor i senzori povezani su sa središnjomjedinicom pomoću kabla.

Akustički senzori rade po sličnom principu kao i elektromagnetski, samo što umestoelektromagnestkih talasa svaki odašiljač šalje zvuk visoke frekvencije koji primaju prijem-nici - specijalni mikrofoni. Prednosti ovog sistema su prihvatljiva cena i dobar domet, alii ovaj sistem ima svoje nedostatke. Između odašiljača i prijamnika ne sme biti nikakvihprepreka, sistem ne može da podržava veći broj istovremenih senzora, preciznost je lošijaod magnetskih senzora, a i dimenzije prijamnika mogu predstavljati poteškoću za pojedineprimene.

Optički senzori (motion tracking, optical motion capture) su deo sistema koji pomoćuvećeg broja kamera prate oznake (markere), te kombinovanjem položaja markera u vidnompolju svake kamere izračunavaju položaj markera u prostoru (3D). U radu ovih sistemakoriste se različiti principi praćenja, najčešće uz pomoć markera od sjajnog materijala.Kamere, osetljive na infracrveno svetlo prate markere, odnosno pokrete tela u prostoru.Kamere moraju biti kalibrisane, tj. njihovi međusobni položaji i orijentacije poznate. Kom-binovanjem zapisa 2D položaja markera (iz svih kamera), uz informaciju o položajima ikarakteristikama kamera, precizno se utvrđuje 3D položaj markera. Glavne prednostioptičkog praćenja su izuzetno velika tačnost, velika količina uzorkovanja podataka, temogućnost istovremenog korišćenja velikog broja senzora (čak i do stotinu). Ovakav na-čin najčešće se koristi u biomehaničkim laboratorijima gde se analiziraju kinematičke idinamičke komponente gibanja.

Slika 6.25. Exoskeleton - mehanička konstrukcija montirana na telo

150 Multimedija

Mehanički senzori konceptualno su najjednostavniji. Postoji mehanička konstrukcija saodređenim brojem zglobova u kojima se meri ugao rotacije zgloba. Iz ovih uglova, poz-natih dužina segmenata među zglobovima, jednostavnim rešavanjem direktne kinematikedobija se položaj zadnjeg segmenta u odnosu na prvi, fiksni segment konstrukcije. Upotre-bom tzv. exoskeletona (mehaničke konstrukcije montirane na telo, slika 6.25) mehaničkopraćenje može se koristiti za praćenje položaja zglobova u telu, a time i položaj čitavogtela. Prednosti ovakvih uređaja su visoka preciznost i velika frekvencija uzorkovanja, alinedostatak je nepraktična izrada uzrokovana veličinom.

Inercijski senzori mere ubrzanje i ugaono ubrzanje segmenata određujući na taj načinnjihov položaj i orijentaciju. Zbog tačnosti merenja potrebno je precizno odrediti početnipoložaj.

Senzori sile (momenta sile) su uređaji koji mere silu, odnosno moment sile, a mogu senalaziti u uređajima poput spaceball-a (slika 6.26 sredina) ili su deo kompleksnijeg sistemaza simulaciju sile ili dodira (slika 6.26 levo). Koriste se za intuitivniju manipulaciju 3Dpredmetima i prirodnije kretanje kroz virtualnu okolinu.

Slika 6.26. Senzori sile i senzori položaja

Senzori položaja tela sastoje se od velikog broja senzora za registraciju položaja i ori-jentacije (10 do 100) koji su integrisani u odelo. Informacije koje emituju senzori gotovo upotpunosti i u realnom vremenu opisuju kretanje segmenata u prostoru (slika 6.26 desno).

Senzori položaja ruke (data glove) su ulazni uređaji u obliku rukavice koji putem mnogo-brojnih senzora registruju položaj šake i poziciju prstiju mereći ugao pomaka (slika 6.27).Ovaj tip uređaja moguće je kombinovati sa simulatorima sile ili dodira čime rukavicapostaje i haptički izlazni uređaj.

Uloga senzora pokreta sastoji se u obeležavanju pozicije objekata u realnom svetu,te prosleđivanje informacije do računara. Obrađenu informaciju o poziciji tela računarsprema, grafički prikazuje ili dodeljuje objektu sa kojim je korisnik u interakciji.

Zanimljivo je kako konstrukcija senzora pokreta omogućuje njihovu upotrebu i u kinezio-loškoj praksi. Trenažeri poput bicikl ergometara, veslačkih ergometara, pokretnih trakai drugih različitih platformi mogu biti upotpunjeni takvim senzorima u svrhu detaljnijeguvida u pokretnu strukturu.

Video 151

Slika 6.27. Senzori polođaja ruke (Data Glove)

Zajednička karakteristika navedenih sistema je mogućnost prikupljanja informacija (motioncapture) o položaju referentnih tačaka u prostoru u realnom vremenu. Dobijeni poda-ci mogu poslužiti za vizualizaciju događaja u tri dimenzije i njihovu analizu. Različiteaplikacije za modelovanje i animiranje 3D objekata u mogućnosti su da koriste informacijeprikupljene sa senzora pri izradi animacija.

Izlazni uređaji

U izlazne uređaje spadaju:

• Uređaji za 3D prikaz – stereo naočare, Head Mounted Display, stereo ekrani (saizmenjivanjem slike ili sa dvostrukom slikom), projekcioni sistemi (stereo projekcijena jedno platno, CAVE, širokougaone projekcije, virtualni radni sto).

• Uređaji za generisanje 3D zvuka

• Uređaji za generisanje čula dodira i sile – taktilni izlazni uređaji, uređaji zapovratne sile, pomične platforme.

• Ostalo – miris, vetar, toplota.

Da se postigne stereoskopski efekat potrebno je da se projektuju dve slike, na svako okopo jednu. Head Mounted Display – HMD ima za svako oko poseban zaslon (slika 6.28).Zbog malih dimenzija uređaja, zasloni su preblizu da bi ih neposredno posmatrali, pase između oka i zaslona postavlja odgovarajući optički sistem koji omogućuje gledanjezaslona.

Slika 6.28. Head Mounted Display

152 Multimedija

Najvažnije karakteristike HMD-a, uz veličinu, težinu i udobnost, ogledaju se u veličini vid-nog ugla i rezoluciji zaslona. Mogu se pronaći u raznim oblicima, od kaciga do naočara.Danas se teži minimalističkom pristupu i što većoj praktičnoj primenjivosti. Cilj je stvoritidovoljno mali uređaj koji ne ometa slobodno izvođenje kretnji. Takvi uređaji mogu bitiopremljeni, uz slušalice, i senzorima položaja i orijentacije.

Najnapredniji projekcioni sistem je CAVE (Cave Automatic Virtual Environment) sistem.Sastoji se od prostora omeđenog projekcionim platnima (koji kreiraju sobu u kojoj se nalazikorisnik) na koje se projektuje računarom generisana stereo slika (slika 6.29). Korisniknosi naočare putem kojih se ostvaruje trodimenzionalni doživljaj pružajući pritom zado-voljavajući periferni vid. Doživljaj je izuzetno realističan da su neprimetni spojevi izmeđupostavljenih projekcionih platana.

Slika 6.29. Šematski i stvarni prikaz CAVE sistema

Zvučna simulacija uključuje reprodukciju ili generisanje zvuka u virtualnom okruženju.Uključivanjem trodimenzionalnosti zvuka dobija se dojam precizne lokacije izvora zvukau prostoru. Efekat se postiže razlikom primljene jačine zvuka u levom i desnom uvu, natemelju odbijanja zvučnih talasa na ušnoj školjci i njenoj okolini, te različitim rezultatimaovog odbijanja za različite frekvencije koje su sastavni deo zvuka.

Haptički uređaji omogućuju simulaciju dodira i/ili sile, čime se kod korisnika stvara ose-ćaj kontakta (dodira) sa virtualnim predmetom.

Simulacija dodira (tactile feedback) obično se temelji na vibrirajućim ili termičkim ele-

Video 153

mentima koje korisnik nosi na prstima i koji se aktiviraju kada korisnik "dodirne virtualnipredmet", za što je potrebno precizno praćenje položaja korisnika, odnosno ruku.

Simulacija sile (force feedback) uključuje praćenje položaja uz uključivanje aktivnih ele-menata (motora, elektromagneta, servo motora) koji vrše silu na korisnikovu ruku, delovetela ili na alat kojim barata.

Pomične platforme su haptički sistemi kojima se simulira pozicija korisnika pomicanjemčitave platforme na kojoj stoji ili sedi. Usklađenost pozicije sa vizualnim informacijamapojačava osećaj učešća u simulaciji.

Ovaj tip haptičkog sistema najčešće se koristi u kompleksnim simulatorima, simulatorimavožnje automobilom, avionom i slično (slika 6.30).

Slika 6.30. Razni simulatori

154 Multimedija

6.9.3. Primene virtaulne realnosti

Virtualna stvarnost se najviše primenjuje u sledećim područjima:

• medicina,

• vojne primene,

• obrazovanje,

• zabava,

• dizajn i razvoj,

• marketing.

Medicina je jedno od najjačih područja primjene virtualne stvarnosti. Koristi se u područjuhirurgije, kako za obuku (učenje na virtualnim ljudskim modelima), tako i za planiranjehirurških zahvata. Iz medicinskih snimaka mogu se dobiti 3D prikazi (slika 6.31), što je svečešći slučaj na modernim uređajima u medicini. U psihijatriji se virtualna stvarnost koristiza lečenje raznih psihičkih poremećaja, počevši od straha od letenja do posttraumatskogstresnog poremećaja, gde se postižu vrlo dobri rezultati.

Slika 6.31. Primeri kreirane vizualizacije pomoću računara u medicini

Jedan od najjačih ulagača u virtualnu stvarnost su vojne organizacije, i mnoge VR tehno-logije su ugrađene u simulatore raznih vojnih uređaja (slika 6.32).

Slika 6.32. Simulator aviona, tenka i helikoptera

Simulacije raznih vozila su među najčešćim primenama virtualne stvarnosti. Brojni struč-njaci se usavršavaju na različitim simulatorima, a posebno je važno da mogu da seuvežbavaju situacije koje se u stvarnosti retko dešavaju, na primer, spašavanje talaca.

Video 155

Virtualna stvarnost je idealna za industriju zabave, zbog mogućnosti kreiranja iluzija. Uzabavnim parkovima kao što je Disneyland postoji veliki broj atrakcija koje koriste tehnikevirtualne stvarnosti. U salonima igara pojavljuje se sve više igara koje koriste ovu tehniku,i pitanje je vremena kada će ova tehnologija postati dostupna i kućnim igračima raču-narskih igara.

Virtualna stvarnost može da se koristi i za prezentacije budućih projekata u arhitekturi,stvaranje prototipa budućih proizvoda, kao uspešan alat za promociju i marketing na iz-ložbama, sajmovima itd., jer je sama pojava 3D projekcije još uvek dovoljno zanimljivada privuče znatiželjnike.

Usprkos brojnim područjima primene, postoje i ograničenja. Iako je poslednjih godinadošlo do znatnog napretka, oprema je i dalje nepraktična, velika, skupa i složena. Određenevrste virtualne stvarnosti mogu kod korisnika izazvati mučninu, a čak i ako je ne izazovu,previše su neudobne za dugotrajnu upotrebu. Mučnina koja se javlja kao posledica raz-like između vizualnog nadražaja i signala centru za ravnotežu naziva se simulatorska

mučnina.

6.9.4. Proširena realnost (stvarnost)

Proširena realnost (Augmented Reality – AR) dodaje elemente virtualnog okruženja ustvarni svet tako da izgledaju kao deo stvarnog sveta. Time se korisnikovo viđenje svetaproširuje dodatnim informacijama koje su direktno ugrađene u stvarni svet.

U nekim primenama nije potrebno potpuno zameniti realnost sa virtualnim svetom, nekadje potrebno samo nadopuniti ili poboljšati realnost nekim virtualnim delovima (slika 6.33).

Slika 6.33. Stvarnost i proširena realnost

Proširena realnost (stvarnost) je relativno novo područje. Iako se osnovna ideja javila jošdvadesetih godina dvadesetog veka, tek devedesetih godina počinje intenzivno da se radina njenom razvoju, i to je razlog što, uglavnom, još nije zrela za široku upotrebu. Onapruža direktan pristup informacijama tako da su one prikazane u samom vidokrugu koris-nika i isprepletene sa stvarnim svetom. Time se omogućuje brži, kvalitetniji i jednostavnijipristup informacijama. Moguća područja primene su: medicina, proizvodnja i održavanje,arhitektura, robotika, vojne primene, komercijalne primene, zabava.

156 Multimedija

Kada su u pitanju medicinske primene, medicinske slike se preklapaju sa pacijentom, čimese dobija vrsta virtualnog rendgena u realnom vremenu. Dobijeni efekat se ogleda u tomeda lekar vidi organe pacijenta kao da je telo prozirno. Za sada nisu u širokoj primeni.

Kod proizvodnje i održavanja vizuelne instrukcije se prikazuju direktno na opremi/mašina-ma, pa operater, umesto da gleda dokumentaciju, ima sve potrebne informacije u pravovreme na pravom mestu.

Proširena realnost može da se koristi u dizajnu enterijera, vizualizaciji struktura ili insta-lacija. Na primer, može da se razmešta virtualni nameštaj po stvarnoj prostoriji, čimemože da se stekne utisak o prostornim odnosima i o tome kako će prostorija zaista izgle-dati sa nekim nameštajem.

Pomoću proširene realnosti vojni piloti mogu dobijati dodatne informacije kao što su na-vođenje, prikaz ciljeva ili navođenje projektila. Prikaz je ugrađen u kacigu ili na kabinu.

Cilj proširene realnosti je da korisniku pruži jednostavan i intuitivan pristup podacima.Da bi se to ostvarilo, potrebne su prilično složene tehnologije. Tri osnovna problema su:mešanje slike, poravnanje i prikupljanje podataka. Mešanjem slike omogućuje se istovre-meni prikaz stvarne i virtualne slike. Poravnanje osigurava da se virtualni predmeti tačnopoklapaju sa stvarnim.

Proširena realnost ima veliki potencijal, ali današnji sistemi proširene realnosti (stvarnosti)su još uvek dosta nezgrapni, neprecizni i troše previše energije, pa je ove probleme potre-bno rešiti.

Slika 6.34. Primeri proširene realnosti

Glava 7

Grafički editori

Web je danas uz elektronsku poštu najzastupljeniji Internet servis i kao takav zauzimaznačajno mesto u prezentiranju i oglašavanju firmi, ustanova i pojedinaca.

Web tehnologija je doživela značajni napredak od svog nastanka do danas. Klasične (sta-tične) Web stranice pisane u HTML-u danas polako nestaju, a nove tehnologije kao štosu DHTML, PHP, Java, JavaScript, ASP sve se više koriste i složenost izrade Web stranicasve je veća.

Uopšteno se programi za izradu Web stranica po svom principu rada mogu podeliti u dvekategorije:

• programi koji rade na WYSIWYG (what you see is what you get) principu,

• programi kod kojih se direktno uređuje/edituje HTML kôd Web stranice.

Neki programi koriste kombinaciju ova dva pristupa.

Kod programa koji koriste WYSIWYG princip rada izrade Web stranica svodi se na "lepljenje"delova stranice u grafičkom okruženju bez potrebe za poznavanjem HTML-a. Prednostim je jednostavnost korišćenja i činjenica da nije potrebno poznavati HTML za izradujednostavnih Web stranica tako da su idealni za početnike.

Programi koji su namenjeni za direktno editovanje HTML koda pružaju mnogo više mo-gućnosti prilikom izrade Web stranica, ali zahtevaju podrobno poznavanje HTML-a zaizradu Web stranica.

7.1. Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 svojom popularnošću predstavlja standard vizuenih alata zaizradu Web stranica. Mnoštvom naprednih funkcija, nezaobilazan je alat Web dizajnera iprogramera. To je program koji može dati gotovo savršen vizuelni identitet Web strani-cama, što ga u današnje vreme marketinške eksplozije i važnosti prisutnosti na Internetučini značajnim faktorom u njihovoj izradi.

Radi se o kompletnom alatu za pravljenje Web lokacija i upravljanje njima. Radi sa Web

158 Multimedija

tehnologijama, kao što su HTML, XHTML, CSS i JavaScript. Zahvaljujući poboljšanjimau ovoj verziji, pravljenje Web lokacija je lakše nego ranije. Konkretno, osvežena podrškaza CSS obezbeđuje pristup najnovijim Web tehnikama kako bi se pravile Web strane kojese brzo učitavaju i koje je lako izmeniti, a nova tehnologija Spry omogućuje da jednimpritiskom tastera miša pristupite složenim, interaktivnim elementima, kao što su pada-jući meniji. Dreamweaver, takođe, sadrži mnoge alatke za upravljanje Web lokacijama.Pomoću njih se može proveravati da li postoje pokidane veze (linkovi), koristiti šabloneza primenjivanje izmena na celoj lokaciji i veoma brzo ponovo organizovati Web lokaciju.Dreamweaver je, takođe, ozbiljan alat za pravljenje dinamičkih Web lokacija (zasnovanihna bazama podataka). Postoje i drugi programi za Web dizajn – u stvari, ima mnogotakvih programa, međutim Dreamweaver je postao jedan od vodećih zahvaljujući sledećimključnim karakteristikama:

• Vizuelno pravljenje strana. Dreamweaver ima vizuelni pristup pravljenju Webstrana. Ako se slika postavi na stranu, Dreamweaver prikazuje tu sliku na ekranu.Kao program za obradu teksta koji prikazuje dokumente na ekranu onako kako ćeizgledati kada se odštampaju, Dreamweaver prikazuje Web stranicu približno onakokako će izgledati u Web čitaču.

• Složena interaktivnost. U Dreamweaveru CS4 postoji jednostavna i inovativnatehnologija Spry, zasnovana na JavaScriptu. Pomoću tehnologije Spry, lako se mogupraviti interaktivni padajući meniji, dodavati napredni elementi rasporeda, kao štosu panoi sa karticama i dodavati sofisticiranu proveru ispravnosti obrazaca kako bisprečili posetioce Web lokacije da šalju obrasce sa neodgovarajućim informacijama.

• Dvosmerni kôd. Kompanija Adobe je shvatila da mnogi profesionalni Web dizaj-neri još uvek dosta posla obavljaju pišući HTML kôd ručno. Prelazak iz vizuelnogrežima – koji se naziva prikaz dizajna strane (design view) – u prikaz koda (codeview) neprimetan je i, što je najbolje, nije štetan. Za razliku od mnogih programaza vizuelno pravljenje Web stranica u kojima se pri unošenju izmena u pomenutomrežimu WYSIWYG menja i HTML kôd, Dreamweaver poštuje ručno napisan kôdi ne pokušava da ga zameni (osim ako se to ne zatraži). Dreamweaver može daotvori mnoge druge tipove datoteka koji se uobičajeno koriste na Web lokacijama,kao što su spoljne JavaScript datoteke (.js datoteke), pa nema potrebe menjatiprogram da bi se radilo s njima.

• Alatke za upravljanje lokacijom. Dreamweaver-ove alatke za upravljanje lokaci-jom olakšavaju izradu lokacije. Dreamweaver automatizuje mnoge rutinske za-datke sa kojima se suočava svaki Web master – od upravljanja linkovima, slikama,stranama i drugim medijima, do saradnje sa timom i prebacivanja lokacije na Webserver.

• Deo paketa Creative Suite. Od kada je kompanija Adobe kupila kompaniju Mac-romedia (tvorca Dreamweavera), Web dizajneri imaju pristup mnogo većoj porodicidizajnerskih alatki, uključujući Adobe Photoshop i Illustrator. Dreamweaver CS4

još uvek ne izgleda kao Adobe aplikacija, ali sadrži neke korisne integracije sa Adobesvetom: sada se mogu prenositi slike iz Photoshopa direktno u Dreamweaver, a

Grafički editori 159

pomoću programa Adobe Device Central mogu se testirati Web stranice na različitimmodelima mobilnih telefona.

7.1.1. Pokretanje Dreamweaver-a

Prvi element interfejsa Dreamweavera sa kojim se korisnik upoznaje je okvir za dijalogDefault Editor ili ekran dobrodošlice (slika 7.1). Kada se pokrene Dreamweaver, ekrandobrodošlice se pojavljuje na radnoj površini. Ovaj prikaz je automatski omogućen pa ćese pojaviti prilikom svakog pokretanja aplikacije.

Slika 7.1. Ekran dobrodošlice

Ako ne želite da vam se prikazuje ovaj ekran, imate mogućnost u levom donjem delu togprozora da potvrdite opciju Don’t show again.

Ekran dobrodošlice sadrži takozvane brze linkove (Quick links) za kreiranje novih doku-menata i linkove ka poslednjim fajlovima na kojima ste radili. Pored tih linkova sadrži iWeb linkove ka video fajlovima za obuku iz Adobe biblioteke i ka Dreamweaver ExchangeWeb sajtu. Takođe, tu su i linkovi ka priručnicima "Getting strated" i "New features" kojise nalaze na Adobeovom sajtu. Oni su posebno korisni za one koji žele u kratkim crtamada saznaju šta je novo u Dreamweaveru CS4.

7.1.2. Komponente interfejsa

Interfejs Dreamweavera (slika 7.2) omogućava lako snalaženje u mnogobrojnim moguć-nostima ovog programa, a podeljen je na nekoliko funkcionalnih celina. Na vrhu prozora

160 Multimedija

aplikacije je traka koja sadrži logo Dreamweavera, zatim meni aplikacije, dugme Layout

za selektovanje različitih prikaza stranica, dugme Extend Dreamweaver za pristup me-nadžeru ekstenzija (Extension Manager) i Dreamweaver Exchange sajtu gde se mogupreuzeti razne ekstenzije. Tu je i dugme Site za brzo upravljanje novim sajtovima ieditovanje/uređivanje već postojećih sajtova, zatim dugme Workspace Layout za pre-bacivanje između različitih opcija aranžiranja elemenata radne površine. Na desnom krajupalete je polje Search pomoću koga korisnik može da potraži pomoć na Web straniciAdobe Community Help.

Slika 7.2. Interfejs Dreamweavera CS4

Izdvajaju se sledeće funkcionalne celine:

1. Naslovna traka i glavni meni – koji sadrže sve komande i opcije ovog programa:

• File - sadrže standardne komande kao što su New, Open, Save, Save as,Close i Print. File meni sadrži i različite komande za prikaz i rad na tekućemdokumentu (Preview in Browser, Print Code).

• Edit - sadrži komande kao što su Copy, Cut i Paste, kao i komande za selekcijui pretraživanje (Select All, Find and Replace), te komande za pristup editoruza prečice sa tastature (Keyboard Shortcuts), kao i postavljanju preferenci.


• View - omogućava izbor različitih prikaza dokumenta (Design View, CodeView) i prikazivanje i skrivanje raznih elemenata strane i Dreamweaver alata.

• Insert - predstavlja alternativu panelu Insert. Služi za dodavanje objekata udokument. Iz ovog menija na stranu je moguće dodati slike, tabele, linkove,Flash fajlove i sve ostale sadržaje HTML strane.

• Modify - daje mogućnost promene karakteristika selektovanog elementa stra-nice. Koristeći ovaj meni mogu se editovati tag atributi i menjati elementitabela. Jedna od bitnih komandi iz ovog menija je Page properties koja omo-gućava izmenu atributa same HTML strane.

• Format - obezbeđuje lako formatiranje teksta. U okviru ovog menija su ko-mande za izbor fontova, stil teksta (bold, italic, underline), kao i komande zaporavnavanje teksta.

• Commands - omogućava pristup različitim komandama, uključujući i one zaoptimizaciju slika sa Adobe Photoshopom. Takođe, iz ovog menija je mogućesnimiti akciju korisnika kako bi se, kasnijem pozivanjem te akcije, ubrzao radna aktivnostima koje se ponavljaju.

• Site - pruža komande za kreiranje, otvaranje i editovanje sajtova.

• Window - omogućava pristup svim panelima, inspektorima i prozorima u pro-gramu Dreamweaver. Takođe, moguće je menjati radnu površinu po predefi-nisanim izborima za dizajnera ili kodera.

• Help - standardno uključuje Help sistem za korišćenje Dreamweavera. Takođe,ovde se nalaze i opcije za registraciju kopije Adobe Dreamweavera.

2. Panel Insert - sadrži padajući meni sa opcijama za unos različitih tipova objekata udokument, kao što su slike, tabele, slojevi itd. Može se izabrati tematska kategorijasa najčešće korišćenim komandama iz nekoliko oblasti. Na raspolaganju su sledećeopcije:

• Common - Prikazuje najčešće korišćene mogućnosti kao što su linkovi, tabelei slike

• Layout - Prikazuje slojeve i opcije za tabele koje omogućavaju kreiranje dizajnapo specifičnim zahtevima

• Forms - Prikazuje najčešće korišćene komande vezane za forme kao što suradio button-i i check box-ovi.

• Data - Opcije iz ove grupe se koriste pri kreiranju dinamičkih Web strana kojeimaju pristup bazi podataka

• Spry - Opcije iz ove grupe se odnose na novi tip gotovog koda koji je uvedenu najnovijoj verziji Dreamweavera.

• Text - Prikazuje najčešće komande za formatiranje teksta, kao što su izborstila fonta, stil zaglavlja, znak za paragraf, liste itd.

• Favorites - ova opcija služi za prilagođavanje panela Insert potrebama ko-risnika. Desnim klikom miša na oblast ove opcije prikazuju se dodatne opcije.

162 Multimedija

3. Prozor Document - zauzima najveći deo ekrana i predstavlja osnovnu radnu oblast.Postoji tri režima rada/prikaza: Code, Design i Split. Na ovaj način u zavisnostiod potrebe prilagođava se prikaz radne površine. Ukoliko korisnik nije upoznat saprogramskim jezikom HTML, najbolji izbor je Design, jer daje pun vizuelni prikazHTML strane. Ukoliko korisnik želi da uči kôd strane dok kreira stranu, najboljiizbor bi bio režim Split. Režim Code je najbolje rešenje ako se kreira strana di-rektnim kucanjem koda. Ubacivanjem elemenata na stranu u delu Design, moguse pratiti promene u kodu. Na vrhu ovog prozora nalazi se prostor za upisivanjenaslova strane (Page title).

4. Panel Properties (inspector) - Daje nam mogućnost izmene parametara eleme-nata na strani. Skoro svaki element na HTML strani, bilo da je to tabela, slika ilitekst može se menjati promenom parametara u ovom delu radnog prostora. Narav-no, opcije u Properties inspectoru se menjaju u zavisnosti od toga da li je trenutnoselektovana slika, tabela, tekst ili nešto drugo. Klikom na strelicu u donjem desnomuglu dobijamo dodatne mogućnosti za izmenu parametara elementa na strani.

5. Docking panels - klikom na Title bar svakog panela on se razvija i daje mogućnostdodavanja novih i editovanja postojećih elemenata na strani.

CSS panel - Ima dva dela, CSS Styles i Layers gde je moguće dodavati CSS fajlove strani,menjati same CSS-ove i dodavati i menjati layer-e na strani. Korišćenje CSS stilova zna-čajno ubrzava proces vizuelnog uređenja i kasnije izmene HTML strane.

Application panel - Koristi se pri izradi kompleksnijih dinamičkih stranica koje koristepodatke iz baze podataka.

Tag panel - Postoje dva dela, Attributes (u kojem je moguće editovanje atributa svakogHTML taga) i Behaviours (u kojem je moguće dodavanje akcija elementima strane).

Panel Files - Panel koji služi za upravljanje i koordinaciju fajlovima koje koristimo priizradi sajta. U okviru panela moguće je pretraživati fajlove po lokalnom računaru ili pofolderu koji smo odredili za naš sajt. Klikom na Manage Sites dobijamo mogućnost dadodajemo, editujemo i brišemo sajtove na kojima trenutno radimo. Korišćenje ove opcijeje vrlo korisno u situacijama kada simultano radimo na više projekata.

Novi dokument na kojem ćemo raditi možemo otvoriti klikom na File > New. U nared-nom okviru za dijalog će nam biti ponuđeno nekoliko kategorija i vrsta dokumenata i uzavisnosti od potrebe izvršićemo selekciju vrste dokumenta.

Snimanje izmena na dokumentima možemo izvršiti klikom na File > Save. Možemobirati između različitih tipova dokumenata, a Dreamweaver će nam automatski ponuditipreporučeni format novog dokumenta.

Prozor Document

Prozor dokumenta se sastoji iz više delova od kojih su neki uvek vidljivi, dok se ostalimogu prebacivati iz vidljivog u nevidljivo stanje. Ti delovi su: traka sa nazivima aktivnihdokumenata (Document tab bar), paleta alatki za rad sa dokumentom (Document tool-


bar), lenjiri (Rulers), mreža (Grid), vođice (Guides) i traka sa statusnim informacijama(Status bar).

Document tab bar

Document tab bar se nalazi direktno ispod Toolbar aplikacije i prikazuje ime fajla i njegovuputanju. Kada je otvoreno više fajlova, porenani su s leva na desno, svaki fajl ima svojTab u Tab bar-u. Ako želite da vidite vaša dokumenta u nekom posebnom nizu, možeteprevući levim klikom miša dokument na željeno mesto (metoda Drag and Drop). Akoje otvoreno više dokumenata, tada se putanja fajla neće videti, ali dovoljo je da prenetemišem preko imena fajla i putanja će se prikazati. Jedna od novih opcija u Dreamweaver-uCS4 jeste prikaz svih eksternih fajlova vezanih za aktivni dokument u Tab bar-u.

Pogodnost ove opcije je da kada menjamo, na primer, CSS fajl, a promene sačuvamo,nije potrebno da prelazimo u html fajl da bismo pokrenuli dokument u čitaču i videli kakose stranica ponaša, kao u prošlim verzijama Dreamweaver-a, već nam je omogućeno dadirektno iz CSS fajla pokrenemo čitač.

Document toolbar

Document toolbar se nalazi na vrhu svakog otvorenog dokumenta, a ispod ApplicationToolbar-a i Document Tab bar-a i prikazuje sve opcije i detalje vezane za aktivan doku-ment. Prelaskom miša preko svake opcije pojavljuje se koristan Tooltip koji prikazujeime i funkciju dugmeta.

U Document Toolbar-u postoje dugmad koja omogućavaju različite prikaze vaše stranice.Postoji pet režima prikaza:

• Code view - Prikazuje kôd vašeg dokumenta. Ovaj prikaz nam omogućava ručnokodiranje u HTML-u, CSS-u, JavaScript-u ili ako radimo sa dinamičkim stranicama,u PHP-u, ASP-u itd. Uobičajeni font teksta koji prikazuje kôd je Courier 9pt, amože se promeniti u prozoru Preferences, zatim kartica Font.

• Design view - Ovaj prikaz je WYSIWYG (What You See Is What You Get) i onnam omogućava vizuelni prikaz koda koji se nalazi u Body Tag-u dokumenta. Iakoje prikaz prilično sličan onome što ćete videti i u prozoru čitača, Design view ipakne može da prikaže neke interaktivne elemente kao što su linkovi ili JavaScript.

• Split View - Ovaj prikaz se koristi da biste istovremeno videli i kôd i dizajn stranice.Pomoću bar-a koji ih razdvaja mogu se podesiti veličine dela koji prikazuje kôd idela koji prikazuje dizajn.

Postoje još neke opcije koje se nalaze u Layout padajućem meniju u Applicationbar-u, a to su:

– Split code view - Ovaj prikaz se koristi kada želimo da prikažemo istovremenodva različita dela koda jedne te iste stranice.

164 Multimedija

– Design view on top - Prikaz dizajna stranice može da bude u donjem ili ugornjem delu ekrana. Ako želite da bude u gornjem, iskoristite opciju DesignView on top.

– Split verticaly - Ova opcija se koristi za prikazivanje panela vertikalno, jedanpored drugog.

– Design View on left - Kada izaberete Split, tada se kôd u Code and Designprikazu nalazi na levoj straniDocument prozora, a dizajn se prikazuje na desnoj.Ovom opcijom možete da promenite redosled, da se dizajn prikazuje na levojstrani, a kôd dokumenta da desnoj.

• Live View - Ovo je nova opcija koja se pojavila u Dreamweaver-u CS4. Ona omo-gućava da vidite vaš kôd zajedno sa dinamičkim sadržajem stranice, slično prikazustranice u čitaču.

• Live Code - Takođe nova opcija u Dreamweaver-u CS4. Kada je omogućen LiveView klikom na Live Code dugme, omogućeno nam je da selektujemo elemente udizajn prikazu i brzo identifikujemo odgovarajući kôd.

Dreamweaver CS4 je dobar primer za efikasnost, zahvaljući opcijama Live View i LiveCode. Standardna praksa prilikom izrade Web stranica jeste provera njihovog izgleda uWeb čitaču. Činjenica je da je ovakva provera veoma važna i da je zaista merodavnojedino to kako se stranice prikazaju u Internet Exploreru, Mozilla Firefoxu i drugim popu-larnim čitačima, ali svaki pritisak na taster Refresh traži određeno vreme da se stranicainterpretira i prikaže na ekranu. Pomnožite to sa stotinama ili hiljadama provera... Boljije pristup da se čitač iskoristi za završno testiranje, a da se radne provere obavljaju uživo,baš kao što omogućava Dreamweaver CS4.

Dreamweaver CS4 kao sopstveni modul koristi WebKit, rendering engine otvorenogkoda, kao podlogu za prikaze Live View i Live Code. U jednom delu ekrana imamoprikaz Web stranica, u drugom njen kôd. Promene u kodu (prikaz Live Code) trenutnose odražavaju na stranicu (prikaz Live View). Naravno, do promene će doći tek kadunesemo potpunu ispravku koja daje ispravnu sintaksu, bez potrebe za ručnim osvežava-njem prikaza. Ušteda vremena nije zanemarljiva, jer je kombinacija Live View i Live Codeprikaza otprilike duplo brža nego provera izgleda stranice u čitaču.

Sledeći element Document Toolbar-a je Title. Ovde nam je omogućeno da na brz načindodamo naslov našem dokumentu. Tako ne možemo kucati naslov Web stranice direktnou kodu u Title Tag-u. Ovaj naslov se pojavljuje u Title bar-u čitača.

• File Management: Koristi se za preuzimanje i prenos fajlova na Web server.

• Preview/Debug in browser: Koristi se za prikaz stranice u čitaču.

• Refresh Design View (F5): Kada napravite promene u Code prikazu, kliknite naovo dugme da biste osvežili Design prikaz.

• View options: U padajućem meniju ovog dugmeta nalaze se opcije za uključi-vanje/isključivanje lenjira, mreže, vođica, zatim Header bar-a (opcija Head Con-tent).


• Visual Aids: Koristi se za uključivanje/isključivanje raznih alata koji mogu da vamasistiraju kod postavljanja parametara za izgled Web stranice.

• Validate Markup: U padajućem meniju ovog dugmeta nalaze se opcije za validacijutrenutnog fajla na kome radite, celog Web sajta ili više selektovanih fajlova. Tu je iSettings opcija koja otvara Preferences prozor gde možete da odredite DOCTYPEprema kome će biti izvršena validacija. Rezultati podrazumevaju prikaz grešaka,upozorenja i poruka.

• Check Page: Ovaj alat proverava kompatibilnost vašeg fajla na kome trenutnoradite sa raznim čitačima (Browsers).

Lenjiri

Lenjiri su odličan alat koji može da vam asistira kod merenja i postavljanja elemenata naWeb stranicu. Pojavljuju se na levoj i gornjoj ivici prozora dokumenta. Desnim klikommiša možete odrediti da li će podela na lenjirima biti prikazana u pikselima, centimetrimaili inčima. Koordinatni početak za obe ose standardno je postavljen u gornjem levomuglu stranice (prozora). Ovaj početak se može pomeriti na bilo koju lokaciju na stranicitako što ćemo kliknuti levim tasterom miša na kvadratić u gornjem levom uglu i povućido željene lokacije na stranici. X/Y koordinate se tada pomeraju na koordinatni početak(0, 0) na novoj poziciji. Vraćanje na staru poziciju se može izvršiti preko opcije ResetOrigin. Isključivanje vidljivosti lenjira se vrši preko opcije Hide Rulers.

Mreža

Linije mreže se protežu duž celog dokumenta u jednakim intervalima, sa leve na desnustranu i od vrha ka dnu dokumenta. One su pomoćno sredstvo za tačno pozicioniranjeobjekata na Web stranici. Može se uključiti opcija Snap to Grid (privlačenje mreži) zajoš bolje poravnavanje. U podešavanjima mreže (View/Grid/Grid Settings) možeteodrediti koje boje će biti linije u mreži, zatim možete odrediti koliki će biti razmak izmeđutih linija i da li će se mreža prikazivati u vidu linija ili tačkica.

Vođice

Postoje horizontalne i vertikalne vođice koje možete dovući u otvoren dokument da bivam pomogle u merenju i postavljanju novih objekata na web stranicu. Da biste kreiralivođice, potrebno je da je prvo lenjir uključen, zatim ćete kliknuti levim dugmetom mišana lenjir i povući vođicu do željene lokacije na stranici. Na primer, ako želite da postaviteAP Div na stranicu, 250px od leve ivice dokumenta i 300px od gornje ivice dokumenta,postavićete vođice na tu lokaciju i uključićete Snap to Guides (View/Guides/Snap to

guides), zatim ćete samo privući Div ka toj lokaciji i on će se sam "zalepiti" za to mesto.Vođice su vidljive samo na radnoj površini u Dreamweaver-u, a ne vide se na Web straniciu čitaču.

166 Multimedija

Slika 7.3. Aktivni prikazi Split i Live View sa uključenim prikazivanjem lenjira,rasterske mreže i vođica

Statusne informacije

Status bar sadrži dosta priručnih alata. U levom delu status bar-a se nalazi Tag selektori omogućava vam da selektujete sadržaj određenog taga. U desnom uglu status bara suSelect tool, Hand tool. Zatim prikaz trenutne veličine prozora dokumenta u pikselima iprocenjeno vreme otvaranja stranice. I na kraju status bara je Document encoding.

7.1.3. Definisanje novog sajta

Kreiranje novog Web sajta u Dreamweaveru podrazumeva definisanje lokalnog sajta naautorovom računaru kako bi Dreamweaver znao gde da sačuva i nađe dokumente i fajlovevezane za sajt koji se kreira.

Postoji više načina za otvaranje okvira za dijalog Site Definition preko koga se definišenovi sajt:

• preko dugmeta Site na paleti Application,

• preko opcije Site u meniju aplikacije.

• preko panela Files i opcije Manage Sites.


Poslednja opcija otvara okvir za dijalog Manage Sites preko koga se može kreirati novisajt ili upravljati već postojećim Web sajtovima.

Kada se izabere opcija New Site, otvara se okvir za dijalog Site Definition sa izabranomkarticom Basic (slika 7.4). Ova kartica omogućava definisanje novog sajta pomoću SiteWizard-a i postavlja/setuje samo osnovne karakteristike kao što su ime sajta, HTTPadresa sajta i Root folder sajta.

Slika 7.4. Definisanje novog sajta u režimu Basic

Kartica Advanced (slika 7.5) se koristi za naprednije definisanje novog sajta.

Local info

Ova opcija ima sledeće mogućnosti:

• Site name - Ovde se definiše ime novog sajta unutar Dreamweavera. Ovo imeobično predstavlja ime klijenta ili označava namenu Web sajta i služi samo autoruza identifikaciju tokom rada, posetioci Web sajta ga neće videti.

• Local Root Folder - Ovo je hijerarhijski folder najvišeg nivoa ili Root folder novogsajta. Sva dokumenta i fajlovi novog sajta moraju biti sadržani u ovom folderu.Klikom na ikonu foldera može se potražiti Root folder na lokalnom računaru. Akojoš nije kreiran, pozicioniranjem na Parent folder tj. folder u kome treba da budeRoot folder novog sajta i klikom na ikonicu New folder kreira se taj folder.

168 Multimedija

• Default Images Folder - Ovo polje je opcionalno. Svakog puta kada se ubaci slikau sajt, Dreamweaver je automatski kopira u ovaj folder.

Slika 7.5. Definisanje novog sajta u režimu Advanced

• Links relative to - Kada se linkuju/povezuju stranice u jednom sajtu, postoje dveopcije za to: Document i Site Root.

• HTTP Address - Ovo polje se ostavlja prazno ako se označi radio dugme LinksRelative to Document i ako se testira sajt u lokalu.

• Case-sensitive links - Neki serveri (Linux, Unix) su Case sensitive (prave razlikuizmeđu velikih i malih slova). Ovo polje treba potvrditi da bi se obezbedilo daDreamweaver ne zameni jedan fajl za drugi kad bude proveravao linkove. U opera-tivnom sistemu Windows nije moguće napraviti kombinaciju fajlova kontakt.html iKontakt.html, stoga ovo polje može da se ostavi prazno.

• Cache - Ova opcija ubrzava rad sa fajlovima u Dreamweaver-u.

Remote info

Pomoću ove opcije postavlja se kako Dreamweaver da pristupi udaljenom serveru. Kadase otvori Remote info, dobija se jedan padajući meni pod imenom Access. Ponuđeno ješest opcija:


• None - Ova opcija se bira ako se sajt ne postavlja na Internet ili ako će se kasnijepostaviti na udaljeni server.

• FTP - Ovo je najčešći izbor i to je modul File Transfer Protocol koji je ugrađen uDreamweaver za pristup udaljenom serveru.

• Local/Network - Ako kreator sajta ima lokalni server na svom računaru (na primerWamp), tada bira ovu opciju.

• WebDAV - Ova opcija koristi WebDAV protokol za komunikaciju sa udaljenimserverom. Potrebno je da udaljeni server podržava ovaj protokol.

• RDS - Ova opcija koristi Remote Development Service koji je podržan samo odstrane ColdFusion servera.

• Microsoft Visual SourceSafe - Ova opcija zahteva pristup Microsoft Visual SourceSafe bazi podataka.

Testing Server

Selektovanjem ove opcije dobijaju se dva padajuće liste Server model i Access. Ovo jenajbitniji izbor kod kreiranja dinamičkih web sajtova u Dreamweaveru. Ako se pogrešnopostavi neka od opcija, Dreamweaver neće moći da komunicira sa pripadajućom bazompodataka.

Version Control

Version Control sa izabranom opcijom Subversion se ponaša kao neka vrsta baze podatakakoja čuva projektne fajlove u različitim fazama razvoja. Umesto da presnimi originalni fajl,ova baza podataka čuva snimak (Snapshot) svake etape rada na fajlu.

Cloacking

Ako je potrebno da se čuvaju izvorni Photoshop ili Flash fajlovi u Root folderu sajta, ovaopcija omogućava da se oni sakriju i izuzmu od bilo kojih operacija u okviru Dreamweavera.

Design Notes

Ovo je višenamenska opcija. Jedna od namena je da se čuvaju beleške o individualnimfajlovima. Ovo se uglavnom koristi kada tim učestvuje u razvoju Web sajta pa različitičlanovi tima mogu da ostave belešku koja se tiče određenog fajla. Takođe, Dreamweaverautomatski kreira Design Notes gde čuva informacije o povezanim fajlovima, sinhronizacijifajlova i lokalno kreiranim varijablama. Inicijalno, ova opcija je omogućena i Dreamweaverbeleške kreira u skrivenom folderu _notes unutar većine foldera sajta. Ako beleške nisupotrebne, mogu se isključiti tako što će se deselektovati opcija Maintain Design Notes.

170 Multimedija

File View Columns

Ova opcija omogućava da se podesi izgled panela Files.

Contribute

Kada se kreira sajt koji će koristiti Adobe Contribute Software, mora se omogućiti ovaopcija.

Templates

Ova opcija je za kompatibilnost sa starijim verzijama Dreamweaver Template-a. Inicijalnoje omogućena i poželjno je da tako treba i ostane.

Spry

Adobe Ajax Framework Spry ima biblioteke koda koje se moraju poslati na udaljeniserver. Inicijalno, Dreamweaver ih smešta u folder Spry Assets u Root folderu sajta koji sekreira. Ukoliko je potrebna druga lokacija za Spry biblioteke koda može se ovde definisati.

7.1.4. Upravljanje sajtovima

Da bi se promenila podešavanja u definiciji sajta, klikom miša na stavku Manage Sitesmenija Site na ekranu se pojavljuje okvir za dijalog Manage Sites (slika 7.6).

Slika 7.6. Okvir za dijalog Manage Sites


Pojavljuju se sledeće opcije:

• New - Imamo dve opcije: Site, koja otvara okvir za dijalog Site Definition zadefinisanje novog sajta i FTP and RDS Servers koja se retko koristi, a omogućavada se kreira direktna FTP konekciju ka udaljenom serveru (RDS se koristi samo zaColdFusion). Ova opcija je korisna kada je potrebno postaviti samo jedan fajl bezdefinisanja lokalnog sajta u Dreamweaveru.

• Edit - Selektuje se ime sajta koji treba preurediti i zatim klikom na ovo dugme dobijase okvir za dijalog Site Definition gde se mogu uneti promene kod već definisanogsajta.

• Duplicate - Ova opcija pravi egzaktnu kopiju definicije sajta koji je selektovan ulevom delu ovog okvira. Ovo može biti korisno ako se pravi novi sajt koji će imatiista ili slična podešavanja kao već neki postojeći sajt.

• Remove - Sa ovom opcijom brišu se definicija sajta iz Dreamweavera, postojećifajlovi a folderi sajta ostaju netaknuti.

• Export - Ova opcije izvozi definiciju sajta kao XML fajl (Dreamweaver daje fajlu ek-stenziju .ste). Može se selektovati više sajtova iz levog dela prozora (Shift klik)da bi se izvezlo više definicija odjednom. Ako definicija sajta koja se eksportrujesadrži Login detalje za udaljeni server, Dreamweaver će pitati da li treba da uradipodršku (Back up) podešavanja zajedno sa korisničkim imenom i lozinkom. Ako seselektuje radio dugme Share Settings With Other Users, tada će korisničko ime ilozinka biti izostavljani. Izabrana opcija primeniće se na sve definicije sajtova (akoje selektovano više sajtova u isto vreme).

• Import - Ova opcija uvozi definicije sajta (fajlove sa ekstenzijom .ste). Ako su .stefajlovi u istom folderu, može se uvesti više sajtova odjednom. Ako već postoji sajtsa tim imenom, Dreamweaver ne piše preko već postojeće definicije, već kreira novudefiniciju sa istim imenom i brojem pored.

Podešavanje opcija koje se odnose na sve sajtove

Opcije koje su podešene u Site Definition su specifične za svaki sajt. Sve promene kojese naprave u podešavanjima, primenjuju se samo na taj sajt i ni na jedan drugi.

Panel Dreamweaver Preferences omogućava podešavanja koja utiču na sve sajtove. Ovompanelu može se pristupiti preko dugmeta Edit u meniju aplikacije ili preko tastature ak-tiviranjem tastera Ctrl+U.

7.1.5. Postavljanje karakteristika novog dokumenta

Stavka New Document postavlja globalne karakteristike za sve Web stranice koje sekreiraju u Dreamweaveru. Postoje sledeće opcije:

172 Multimedija

• Default document - Ova opcija postavlja tip podrazumevanog dokumenta, tj.omogućava da se izabere tip dokumenta koji će biti kreiran kada se koristi prečicasa tastature za novi dokument, Ctrl + N. Da bi ovo funkcionisalo, mora se nadnu okvira za dijalog deselektovati opcija Show New Document dialog box on Con-trol+N.

• Default Extensions - Ovo se odnosi samo na HTML dokumenta. Ako stari sajtoviimaju ekstenziju .htm treba promeniti ovu opciju na .htm da bi bili dostupni.

• Default Document Type (DTD) - Ova opcija postavlja podrazumevanu DOC-TYPE deklaraciju za sve nove Web stranice.

• Default Encoding - Ova opcija omogućava da se izabere set karaktera koji će sekoristiti na svakoj stranici. Inicijalna postavka u Dreamweaveru je Unicode UTF-8.Polje za potvrdu ispod ove opcije, ako je omogućeno, saopštava Dreamweaveru dapostojeće stranice koje nemaju specificiranu šemu karaktera prikaže u gore izabra-nom setu karaktera.

• Unicode Normalization Form - Ova opcija je obavezna samo ako je izabran Encod-ing UTF-8. Trebalo bi da bude podešena na C (Canonical Decomposition, followedby Canonical Composition), a polje za potvrdu koje sledi Include Unicode Signature(BOM) bi trebalo da je deselektovano.

Default Document Type (DTD)

Namena DTD-a je da kaže čitaču kako je kodirana stranica i da ubrza pravilno prikazivanjedizajna. Ako se izostavi DOCTYPE deklaracija, tada čitači mogu da uđu u tzv. QuirksMode što može za rezultat dati neočekivani prikaz stranice. Podrazumevano podeša-vanje je XHTML 1.0 Transitional i ono je prikladno za većinu korisnika ove aplikacije akorazumeju striktnija pravila XHTML-a. Na Web adresi su navedene razlike između HTML-ai XHTML-a – http://www.w3.org/TR/xhtml1/#diffs. Deklaracija DOCTYPE raspo-laže sledećim opcijama:

• None - Ne preporučuje se izbor ove stavke jer svaka stranica mora imati svojuDOCTYPE deklaraciju.

• HTML 4.01 Transitional - Ova opcija se bira ukoliko se ne koristi XHTML.

• HTML 4.01 Strict - Opcija za dobre poznavaoce HTML-a koji neće koristitiXHTML.

• XHTML 1.0 Transitional - Ova opcija omogućava istu fleksibilnost kao HTML4.01 Transitional sa dodatim striktnijim pravilima XML-a.

• XHTML 1.0 Strict - Za dobre poznavaoce XHTML-a.

• XHTML 1.1 - Ova opcija ne bi trebalo da se koristi na stranicama koje koristetext/html MIME type, što je trenutni standard za Web servere.


• XHTML Mobile 1.0 - Ovo je podskup XHTML Basic za mobilne uređaje. Detalj-nija specifikacija može se pogledati na lokaciji:http://www.openmobilealliance.org/tech/affiliates/wap/

Podešavanje podrazumevanog Web čitača

Kada se pritisne taster F12 na tastaturi ili klikne mišem na opciju iz menija File, a zatimPreview in Browser, stranica koja je trenutno aktivna u Document prozoru će se otvoritiu podrazumevanom Web čitaču.

Dreamweaver detektuje podrazumevanog čitača kada korisnik prvi put upotrebi ovu opciju.Međutim, moguće je definisati i druge čitače aktiviranjem menija Edit i izborom opcijePreferences, a potom stavke Preview in Browser. Ako je Dreamweaver detektovao drugeWeb čitače u sistemu, on će ih prikazati u polju Browsers. Može se definisati da jedanod njih bude sekundarni čitač što će omogućiti njegovo pokretanje preko tasterske prečiceCtrl+ F12.

Slika 7.7. Izbor podrazumevanog čitača

Dodavanje Web čitača se vrši preko + (plus) dugmeta. Upiše se ime tog čitača i pronađenjegov izvršni fajl na računaru. Dugme Edit omogućava promenu detalja selektovanogčitača. Dugme − (minus) omogućava da se ukloni čitač sa liste. Prečice sa tastatureomogućavaju pokretanje samo primarnog i sekundarnog čitača dok se ostali čitači pokrećupreko opcije Preview/Debug in Browser ili preko menija File/Preview in Browser.

Panel Preferences nudi i opciju pregleda stranica uz korišćenje privremenog fajla. Inici-jalno, ova opcija je deselektovana. Postoje različita mišljenja da li omogućiti ovu opciju

174 Multimedija

ili ne. Prednost upotrebe ove opcije je što ne mora da se čuva fajl pre nego što se prikažeu čitaču a samim tim može se testirati dosta toga čuvajući originalan fajl. S druge strane,ako se radi sa bazama podataka, ovaj privremeni fajl ne dozvoljava testiranje opcije ServerBehaviors koja manipuliše bazom podataka. Ako se testira sajt u lokalnom okruženju ovuopciju treba ostaviti deselektovanu, ali ako je definisan udaljeni server kao testni server,tada ovu opciju treba omogućiti.

Kreiranje novih dokumenata i svojstva novog dokumenta

Kod kreiranja novih dokumenata Dreamweaver omogućava stvaranje više različitih tipovadokumenata, zatim nekoliko različitih načina za kreiranje novog dokumenta kao i nekolikoveć dizajniranih fajlova koji mogu poslužiti kao polazna osnova za dalji dizajn.

Najbrži način da se kreira novi dokument kada se otvori Dreamweaver je izborom opcijesa centralne liste Create New na ekranu dobrodošlice. Ako se izabere jedna od prvečetiri opcije (HTML, ColdFusion, PHP, ASP VBScript), Dreamweaver otvara dokumentsa DOCTYPE deklaracijom koja je setovana u panelu. Opcija koja omogućava kreiranjenovog dokumenta, a ima najviše izbornih podešavanja dostupna je preko menija File injegove stavke New.

Slika 7.8. Kreiranje novog dokumenta

Ovaj okvir za dijalog podeljen je na više sekcija, a u zavisnosti od toga koja stavkaje selektovana u levom delu ovog okvira, zavisiće i opcije koje će biti na raspolaganju.Postoje sledeće stavke:


• Blank Page - Ova opcija omogućava da se izabere jedan od 17 različitih tipovaWeb dokumenata. Ako se izabere stavka <none> u koloni Layout, Dreamweaverće kreirati dokument koji će sadržati samo osnovni HTML skelet dokumenta (kojisadrži svaka Web stranica).

• Blank Template - Ova opcija omogućava kreiranje šablona, kako se kaže, "odnule" (From scratch).

• Page from Template - Kada se izabere ova stavka, izlistaće se svi sajtovi koji sudo tada definisani u Dreamweaveru na lokalnom računaru zajedno sa šablonima kojisu povezani sa svakim sajtom.

• Page from Sample - Ova stavka nudi kolekciju primera CSS-a koji se mogu isko-ristiti kao početna tačka kreiranja sopstvenih stilova.

• Other - Ova opcija omogućava kreiranje drugih dokumenata koji su u vezi sa Web-om, uključujući i običan tekst fajl.

Page Properties

Svojstva stranice se mogu podesiti preko okvira za dijalog Page Properties koji se otvaraizborom istoimene stavke u meniju Modify ili pomoću tasterske prečice Ctrl+ J.

Slika 7.9. Podešavanje svojstava stranice

Na levoj strani ovog okvira za dijalog nalazi se šest stavki u listi Category:

176 Multimedija

• Appearance (CSS) - Ovom opcijom definišu se osnovni font i veličina fonta, bojateksta, boja pozadine, pozadinska slika stranice, kao i margine stranice.

• Appearance (HTML) - Ova opcija definiše pozadinsku sliku stranice, stil linkova.

• Links (CSS) - Ova opcija omogućava podešavanje fonta i boja hiperlinkova.

• Opcije boja su ekvivalentne sledećim pseudo klasama u CSS-u:

– Link color - a:link– Visited links - a:visited– Rollover links - a:hover– Active links - a:active

Opcija Underline style dozvoljava da se izabere da li će linkovi biti uvek podvučeni,nikad, samo kada se prelazi mišem preko linka ili da se sakrije podvučena linija kadase prelazi mišem preko linka.

• Heading (CSS) - Ova opcija omogućava da se definišu fontovi za naslove, kao iveličina i boja za svaki nivo naslova posebno.

• Title/Encoding - Omogućava da se promeni naslov stranice, DOCTYPE deklara-cija, kodiranje znakova itd.

• Tracing Image - Neki dizajneri vole da koriste sliku kao vodič za aranžiranje ele-menata stranice (Layout). Ova opcija omogućava da se doda takva slika stranici ida se kontroliše njena providnost. Važno je znati da ta slika nije deo stranice i dase ne prikazuje u čitaču.

Ubacivanje teksta u Dreamweaver

Tekst se u Dreamweaveru kreirara kucanjem ili prebacivanjem iz nekog drugog programa.Funkcije za kucanje, editovanje ili selektovanje teksta su iste kao u programima za edito-vanje teksta.

Tekst se može dodati ili u Design ili Code režimu rada. U režimu Design postavi se kursorna mesto gde treba da se doda tekst i tu se započne kucanje. U režimu Code može sedodati tekst bilo gde unutar Body tag-a, uključujući i unutar ćelija tabela, DIV tagova,SPAN tagova.

Copy i Paste

Kada se, na primer, kreira Web sajt za klijenta, uobičajeno je da se dobije tekst pripremljenu nekom od programa za obradu teksta. U tom slučaju, takav tekst se otvori u odgo-varajućem programu, kopira u klipbord a zatim postavi (pomoću opcije Edit/Paste) uDreamweaver. Dramweaver će sačuvati većinu, ako ne i svo formatiranje teksta, a postojii opcija da se izabere šta će se od formatiranja zadržati.

U panelu Preferences može se definisati ponašanje opcije Paste (slika 7.10) u programuDreamweaver.


Slika 7.10. Podešavanje ponašanja opcije Paste

Postoje sledeće opcije:

• Text only - Samo tekst u bukvalnom smislu, svako formatiranje je izuzeto.

• Text with structure (paragraphs, lists, tables, etc) - Ova opcija će pored tekstaostaviti i naslove, pasuse, tabele, liste i drugo strukturno označavanje.

• Text with structure plus basic formatting (Bold, Italic) - Ova opcija će ostavitiBold i Italic formatiranje.

• Text with structure plus full formatting (Bold, Italic, Styles) - Ova opciijakonvertuje fontove, boje i druge stilove u CSS fajl. Rezultat u Design prikazu jeimpresivan, ali CSS fajl je noćna mora. Nemojte koristiti ovu opciju. Mnogo jebolje da izaberete Text with structure plus basic formating pa da napišete CSS fajl.

• Retain line brakes - Ovaj kvadratić za izbor uključenja/isključenja opcije namomogućava da odredimo da li će razmaci izmenu linija biti prikazani ili ne.

• Clean up Word paragraph spacing - Ova opcija izbacuje ekstra liniju izmeđuparagrafa u tekstu dodatom iz Microsoft Worda.

Postoji još jedna opcija za prebacivanje teksta, a to je Paste Special. Dobija se prekostavke menija Edit. Ona se koristi kada je potrebno izbeći standardno podešeno (po-drazumevano) ponašanje opcije Paste. Aktiviranjem ove opcije otvara se okvir za dijalogPaste Special u kome se mogu dalje definisati željene opcije koje se odnose na formatiranjeteksta.

178 Multimedija

7.1.6. Uvoženje Microsoft Word dokumenata

Dreamweaver ima opciju za direktno uvoženje Word dokumenata u prozor Document. Dabi se uvezao Word fajl u meniju File treba izabrati stavku Import/Word Document.

Otvara se okvir za dijalog Import Word Document. Program Dreamweaver podržavauvoženje fajlova sa .doc i .docx ekstenzijom. Pri dnu prozora tzv. padajuća lista Format-ting nudi iste opcije koje su dostupne i kod stavke Copy/Paste u panelu Preferences.

Slika 7.11. Opcije formatiranja kod uvoženja Word dokumenta

Uvoženjem Word dokumenta dobija se isti rezultat kao i kod primene Copy/Paste opcije,jedina razlika je što ne mora da se otvara Word dokument kako bi se postavio njegovsadržaj na Web stranicu.

Liste

U Dreamweaveru liste (slika 7.12) se mogu ubaciti koristeći odgovarajuće dugme na paletialatki panela Property Inspector u režimu HTML prikaza ili izborom stavke List umeniju Format.

Mogu se uneti nenumerisane i numerisane liste. Ove opcije rade isto kao i odgovarajućeopcije u Wordu. Takođe, postoji mogućnost ubacivanja ugnježdenih listi upotrebom opcijeIndent Text.

Panel Assets

Najjednostavniji način za ubacivanje slika u Dreamweaver je da se slike prevuku ili izpanela Files ili iz panela Assets. Da bi se koristio panel Assets sve slike optimizovaneza Web moraju se smestiti u folder Images koji se nalazi u Root folderu sajta koji se kreira.


Slika 7.12. Ubacivanje liste u dokument

Panel Assets sortira elemente sajta u devet kategorija kojima se pristupa klikom na jednuod ikonica na levoj strani panela.

• Images - U ovoj kategoriji se nalaze svi .jpg, .png i .gif fajlovi i prikazane su njihovedimenzije, veličina i putanja do njihovog mesta na računaru.

• Colors - Ova kategorija prikazuje sve boje koje su specificirane na vašem sajtuuključujući i pozadinske boje, boju teksta i linkova.

• Links - Ovde su prikazani svi linkovi, ne samo eksterni http:// nego i e-mail linkovi,FTP adrese i JavaScript linkovi.

• Multimedia - Flash, Shockwave i Movies - svaka kategorija prikazuje fajl sa odgo-varajućom ekstenzijom .swf (Flash), .dcr (Shockwave) i .mov ili .mpg (QuickTimei MPEG)

• Scripts - Ova kategorija prikazuje JavaScript fajlove, i to eksterne skript fajloveka kojima Web stranica ima linkove (na primer, JavaScript fajlovi koji su deo SpryFramework-a, koji su prikačeni za stranicu kada se koriste Spry Widget-i ili efekti).U ovoj kategoriji nisu prikazani JavaScript fajlovi koji su ugnježdeni u Web stranicu(na primer kada se koristi Dreamweaver Behaviors).

• Templates i Library - Šabloni i biblioteke.

180 Multimedija

Klikom miša na radio dugme na vrhu panela vrši se prebacivanje iz kategorije Site uFavorites i obrnuto. Site prikazuje sve elemente izabrane kategorije koji se nalaze na Websajtu. Favorites daje mogućnost da se kreira lista vaših najvažnijih elemenata i elemenatakoji se najviše koriste.

Slika 7.13. Ubacivanje slike u dokument

Kada se klikne na neku sliku, u gornjem delu panela se prikazuje minijatura slike (Thumb-nail), zatim dimenzije slike, veličina, tip i cela putanja do slike. Ako je potrebno da seslika prepravi/edituje pre ubacivanja na sajt klikom miša na dugme Edit u donjem desnomuglu panela otvara se podrazumevana grafička aplikacija.

Slika se može ubaciti na Web stranicu iz panela Assets tako što se postavi kursor nastranici gde je ciljno mesto slike, zatim se slika selektuje i klikom miša na dugme Insert

finalizuje procedura. Ako se naknadno uvozi dodatni fajl slike na Web sajt, da bi se videoi taj fajl u panelu Assets mora se uraditi tzv. osvežavanje klikom miša na dugme RefreshSite List u donjem desnom uglu panela.

7.1.7. Postavljanje slika na Web stranicu, izmena svojstava slikei Photoshop integracija

Fajlovi slika se ubacuju u HTML pomoću taga <img> sa atributima koji opisuju izvor togfajla, širinu i visinu slike i alternativni tekst za čitače koji ne prikazuju slike. Kada seubacuje slika u režimu Design ili Code sâm Dreamweaver generiše neophodan kôd.

Postoji nekoliko načina za ubacivanje slika. Prethodno je objašnjen postupak preko panela


Assets i Files. Drugi način za ubacivanje slika u Dreamweaver je preko okvira za dijalogSelect Image Source koji se otvara izborom u meniju Insert stavke Image. U ovom okviruza dijalog (slika 7.14) ukoliko je potvrđeno polje Preview images prikazuju se još minijaturaslike, dimenzije i veličina slike.

Slika 7.14. Okvir za dijalog Select Image Source

Ako stranica u koju se ubacuje slika nije sačuvana u Root folderu sajta koji se kreira, linkka toj slici u Dreamweaveru će biti:

<img src=file:///C|/Documents and Settings/.../logo.png alt

="" width="100" height="100" />

Čim se sačuva/snimi stranica u Root folderu Dreamweaver će sam promeniti putanju:

<img src="Zdrava hrana/images/logo.png" alt="" width="100"

height="100" />

Pre nego što se slika "ubaci" na Web stranicu, Dreamweaver će otvoriti okvir za dijalogImage Tag Accessibility Attributes (slika 7.15) koji zahteva da se unese alternativni tekstkao opis slike. Ovaj tekst se ubacuje u atribut Alt tag-a <img>. Ovaj tekst služi slepim islabovidim korisnicima koji koriste pomoćne tehnologije za čitanje Web stranica.

Slika 7.15. Upisivanje alternativnog teksta za sliku

182 Multimedija

Kada se umetne slika na stranicu koja već sadrži tekst, tekst se poravnava sa podnožjemte slike. Ranije su se koristili atributi Align, Vspace i Hspace taga <img> da bi se rešio pro-blem poravnavanja slike i teksta. Međutim, pošto to nije XHTML standard, ovaj problemse rešava preko CSS-a.

Rezervisanje mesta za sliku

Dešava se da prilikom aranžiranja elemenata stranice neka slika nije na raspolaganju i utom slučaju koristi se opcija Image Placeholder. Da bi se rezervisalo mesto za sliku, tj.postavio tzv. čuvar mesta (placeholder) u meniju Insert treba izabrati stavku Image Ob-jects, a zatim Image Placeholder. Na ekranu se otvara okvir za dijalog Image Placeholder(slika 7.16) sa svojim opcijama.

Slika 7.16. Okvir za dijalog Image Placeholder

• Name - Ovde se upisuje ime čuvara mesta. Ime koje se ovde upiše koristi se iza atribute ID i Name taga <img>, stoga mora početi slovom i ne sme sadržatirazmake ili neki specijalni karakter. Ako se ovo polje ostavi prazno, Dreamweaverneće ubaciti ID atribut, a za Name atribut će upisati name=" ".

• Width - Ovde se unosi širina čuvara mesta u pikselima. Standardana širina je 32px.

• Height - Ovde se unosi visina čuvara mesta pikselima. Standardna visina je 32px.

• Color - Ova opcija unosi Inline CSS atribut za pozadinsku boju (Backgorund-color).Namena ove opcije je da se istakne čuvar mesta ili da se utopi sa ostatkom sadržajastranice. Može se iskoristiti Color Picker za odabir boje ili jednostavno ukucatiheksadecimalna vrednost boje. Ako se ne izabere boja, Dreamweaver neće kreiratiStyle Attribute, ali će u režimu Design prikazati čuvara mesta u svetlo sivoj boji.

• Alternate text - Ovde se unosi tekst koji će biti vrednost atributa Alt. Ako se neunese ništa, Dreamweaver će prikazati alt="" u tagu <img>.

Kada se klikne na dugme OK, Dreamweaver će ubaciti čuvara mesta na Web stranicu igenerisaće sledeći kôd:

<img name="Placeholder" src="" width="200" height="100" alt=""

style="background-color: #9999CC" />


U režimu Design prikazuje se ime čuvara mesta i njegove dimenzije (slika 7.17).

Slika 7.17. Prikaz čuvara mesta slike u režimu Design

Kada se obezbedi slika tada je moguće obaviti zamenu čuvara mesta pravom slikom. Da bise to realizovalo u režimu Design treba mišem kliknuti na čuvara mesta da bi se pokazaleopcije panela Property Inspector.

Sada se može ili kreirati nova slika ili zameniti čuvar mesta već postojećom slikom nasledeći način:

• Kreiranje nove slike - Da bi se kreirala nova slika treba na panelu Property In-spector kliknuti na dugme Create. Ovo dugme pokreće grafičku aplikaciju AdobeFireworks, ukoliko je instalirana na računaru (ova opcija pokreće samo Firworks,Photoshop se neće pokrenuti iako je on najverovatnije podrazumevani editor slikana lokalnom računaru).

• Zamena čuvara mesta već postojećom slikom - U polje Src upiše se putanja doslike. Takođe, mogu se koristiti i ikone mete i foldera desno od polja Src kako bi sedefinisalo izvorište slike.

Koji god način da se izabere, Dreamweaver će zameniti čuvara mesta novom slikom iautomatski će preuzeti visinu i širinu nove slike.

Photoshop Smart Objects

Smart objekat je Web slika (.jpg ili .gif fajl) koji zadržava link do originalnog izvornogfajla od koga je nastao. Samim tim je olakšano editovanje i optimizovanje Web slike.

184 Multimedija

Kada se radi sa smart objektima, originalan fajl ostaje netaknut, a promene se primenjujusamo na Web primerak.

Da bi se ubacio smart objekat nema potrebe za otvaranjem Photoshop aplikacije, čak nemora ni da bude instalirana na računaru. Ono što je potrebno je .psd fajl na lokalnomračunaru, a Dreamweaver ima mogućnost da od tog fajla kreira .gif, .jpg ili .png fajl.Smart objekat se ubacuje isto kao i običan fajl slike. U meniju Insert izabere se stavkaImage, a zatim locira .psd fajl na lokalnom računaru. Taj fajl ne mora biti u Root folderuWeb sajta, već može biti bilo gde na računaru. Međutim, ta lokacija Photoshop fajlamora biti konstanta kako bi Smart Object link funkcionisao. Kada se selektuje .psd fajli klikne na dugme OK, otvara se okvir za dijalog Image Preview (slika 7.18) gde će seoptimizovati za Web upotrebu selektovani .psd fajl pre postavke na Web stranicu.

Slika 7.18. Okvir za dijalog Image Preview

Ovaj okvir za dijalog nudi puno opcija od kojih je svaka detaljno opisana kada se klikne nadugme Help u donjem levom uglu. Prozor Preview na desnoj strani ovog okvira za dijalogprikazuje spljoštenu verziju celog .psd fajla. Da bi se videla cela slika trebalo bi upotrebitialatke Pointer i Zoom. Alatka Export Area koja izgleda kao alatka Crop u Photoshopudefiniše oblast koja će biti izvezena/eksportovana iz .psd fajla.

7.1.8. Ubacivanje multimedijalnih fajlova

Dreamweaver olakšava posao umetanja Flash fajlova, muzičkih i video fajlova, usklađujeatribute koji određuju kako će ti fajlovi biti prikazani na web stranici i tamo gde je pri-menljivo, Dreamweaver daje mogućnost promene načina na koji korisnik interaguje sa timfajlovima.

Flash fajlovi

Postoji nekoliko tipova Flash fajlova koji se mogu ubaciti na Web stranicu:

• fla (Flash fajlovi ili Flash filmovi) - Ovo su originalni, izvorni Flash fajlovi za kreiranje.swf fajlova.


• swf fajlovi - Ovo su kompresovane verzije .fla fajlova koje se mogu prikazati uDreamweaveru i reprodukovati u čitačima. Flash dugmad i tekst takođe koriste.swf fajlove. Ovaj tip fajlova nema mogućnost editovanja kao izvorni .fla fajlovi.

• swt fajlovi - Ovo su Flash šabloni koji omogućavaju da se promene informacije u.swf fajlovima. Na primer, dugme koje je kreirano u Flashu može koristiti .swt fajlkoji će omogućiti da se generiše više dugmadi sa različitim tekstom.

• swc fajlovi - Ovo su SWF fajlovi koji se koriste za Rich Internet Applications.

• flv fajlovi (Flash video fajlovi) - Ovi fajlovi sadrže enkodirane audio i video podatkekoji omogućavaju da ih besplatni Flash Player pušta na Web stranicama.

Ubacivanje Flash filmova

Pre nego što se ubace Flash fajlove u Dreamweaver, moraju se prvo kreirati u Flashaplikaciji i snimiti sa .swf ekstenzijom. Ubacivanje Flash filmova je jako slično kao i uba-civanje slika, međutim prateći kôd se dosta razlikuje. Da bi se ubacio .swf fajl u programDreamweaver, postavi se kursor na mesto gde treba da se ubaci fajl, zatim se u menijuInsert selektuje stavka Media/SWF.

Na ekranu se otvara okvir za dijalog Object Tag Accessibility Attributes gde se upisujuvrednosti za polja Title, Acces key i Tab index. Sva tri atributa su opciona, ali je dobrapraksa da se da bar ime filmu. Ako se klikne na Cancel, film će se ipak insertovati nastranicu za razliku od Image fajlova, gde kada se klikne Cancel, slika se ne ubacuje.

Slika 7.19. Prikaz čuvara mesta .swf fajla u Dreamweaveru

Da bi se videlo kako izgleda film zajedno sa sadržajem stranice, u režimu Design trebakliknuti mišem na čuvara mesta a na panelu Property Inspector kliknuti na dugme Play.Reprodukcija Flash filma će se pokrenuti.

186 Multimedija

Slika 7.20. Reprodukcija .swf fajla u dokumentu

Takođe, može se kliknuti i na dugme Live View da se vidi kako će stranica izgledati u Webčitaču. Obavezno treba kliknuti na dugme Stop u Property Inspector-u kada se završipregled .swf fajlova jer taj pregled troši resurse računara.

Panel Property Inspector raspolaže sa dosta opcija za kontrolu i podešavanje Flash filmova.U levom gornjem uglu prikazuje se tip fajla i veličina, odmah ispod je polje u kome senalazi ID atribut taga <object>. Dreamweaver automatski dodeljuje vrednost FlashIDza prvi ubačeni swf objekat. Svi naredni objekti koji se ubacuju dobijaju sekvencijalnoidentifikatore FlashID2, FlashID3 itd. Ovo polje je editabilno tako da može da se upišeproizvoljan ID.

Dreamweaver postavlja svetlo plavu traku iznad swf objekta u režimu Design sa ikonicomotvorenog oka u desnom uglu te trake. Kada se klikne na tu ikonicu, otvara se alternativnisadržaj koji će se prikazati ako korisnik nema najnoviju verziju Flash Playera. Takođe,sadržaj se može ili editovati ili obrisati. Da biste zatvorili prikaz, kliknite na ikonicu sadazatvorenog oka.

Ubacivanje Flash video fajlova

Flash video fajl je drugačiji od regularnog swf objekta jer ima .flv ekstenziju što omogućavada se doda već gotov film na Web stranicu. Potrebno je samo da se enkodiraju drugiformati video fajlova u .flv format i umetnu tako što se u meniju Insert selektuje stavkaMedia, a zatim FLV. Ova opcija omogućava da se umetne .flv fajl bez korišćenja Flashaplikacije i omogućava da Web čitači pokrenu umetnuti video sa prikazanim kontrolamaza reprodukciju. Na ekranu će se otvoriti dijalog Insert FLV sa malo drugačijim opcijamau zavisnosti da li se za Video Type bira Progressive Download ili Streaming Video.

Glava 8

XML, HTML, XHTML i DHTML

U ovom poglavlju biće reči o pomenutim jezicima, gde će se obratiti pažnja na svaki odnjih. Reč je glavnim tehnologijama koje se koriste u razvoju jednostavnih, složenih, kao idinamičkih Web sajtova.

8.1. XML

Još dalekih 60-tih godina, ljudi su se bavili idejom o strukturiranju dokumenata u stan-dardizovani oblik da bi se olakšala razmena i rukovanje podacima. Tada je IBM kreiraoGML (Generalized Markup Language) za vlastite potrebe. Koristili su GML za izveštaje,knjige, i druge dokumente iz izvornih datoteka. I druge organizacije i kompanije stva-rale su vlastita rešenja strukturiranja informacija, ali ništa nije bilo napravljeno za opštuupotrebu.

Prva značajna standardizovana tehnologija strukturiranja informacija bio je SGML (Stan-dard Generalized Markup Language), takođe iz IBM-a. SGML je dao način formatiranjai održavanja pravovaljanih dokumenata unutar IBM-a, a kasnije je proširen i prilagođenza upotrebu u raznim područjima industrije kao opšti standard informatizacije. Ipak, tek1986. godine SGML je prihvaćen od ISO standarda. Iako velikih mogućnosti, SGML jevrlo složen, dok obrada traži zahtevnu programsku podršku. U ranim danima Interneta,zbog složenosti i zahtevnosti, SGML sigurno nije mogao predstaviti hipertekst.

Tim Berners-Lee i Andres Berglund, dva istraživača iz CERN-a, 1989. godine kreiralisu jezik oznaka (markup language) za obeležavanje tehničkih dokumenata koji su se preno-sili putem Interneta. Ovaj jezik se razvio kao pojednostavljena primena SGML-a, nazvanje HTML (HyperText Markup Language), i postao standardni oblik prikaza informacijaza Web.

Razvoj Web aplikacija u zadnjih deset godina dostigao je takav nivo da problemi kojedanas susrećemo nisu se tada mogli ni zamisliti. Sistemi koji su distribuirani hiljadamakilometara moraju zadržati brzinu i besprekornu funkcionalnost bez obzira na udaljenost.Svi se prenosi moraju obaviti tako da ni najmanji deo pojedinog podatka iz baze podataka,heterogenog sistema, direktorijuma usluga i aplikacija ne bude izgubljen. Aplikacije moraju

188 Multimedija

biti u stanju da komuniciraju, ne samo unutar poslovnih komponenti već sa svim poslovnimsistemima, često preko različitih proizvođača, pa čak i različitih tehnologija. Klijenti višenisu strogo definisani, nego mogu biti i mrežni pretraživači koji podržavaju HTML, mobilnitelefoni koji podržavaju WAP (Wireless Application Protocol) ili personalni organizatorisa potpuno drugačijim jezicima oznaka. Osnova razvoja svih današnjih aplikacija postalisu podaci i informacije izvedene iz tih podataka. [H.M. Deitel, P.J. Deitel, T.R. Nieto:"Internet and World Wide Web - How to Program", Prentice Hall, Upper Saddle River,New Jersey, 2000.]

HTML nije imao rešenje za sve ove probleme. Najočiglednije ograničenje HTML-a je nje-gov strogo definisan skup oznaka. Članovi World Wide Web Consortiuma (W3C) 1996.godine uočili su tri značajne prednosti SGML-a u odnosu na HTML, i to su: proširivost,strukturiranost i pravovaljanost.

Okupili su tim SGML stručnjaka koji su kreirali novi jezik oznaka s jezgrom SGML-a ijednostavnošću HTML-a. Nastao je XML (eXtensible Markup Language) jezik. [T. Bray,J. Paoli, C.M. Sperberg-McQueen, E. Maler: "Extensible Markup Language (XML) 1.0(Second Edition) ", W3C Recommandation, 2000. http://www.w3.org/TR/REC-xml].

Kao i SGML, i XML se koristi za definisanje drugih jezika, pa se naziva meta - jezik. Među-tim, XML je mnogo jednostavniji od SGML-a. XML je jezik oznaka koji ne ograničavaskup oznaka (markup tags) koje se mogu koristiti niti gramatiku tog jezika. Skup oznaka(tag set) za jezik oznaka tačno definiše oznake - tagove koje ćemo koristiti i kako. Pos-toje dva osnovna koncepta kod XML dokumenta. Prvi koncept uslovljava da svaki XMLdokument mora bit dobro strukturiran (well-formed) da bi bio iskoristiv i ispravno razložen(parsiran). Dobro strukturiran dokument je onaj čiji su svi otvoreni tagovi i zatvoreni i topo istom redosledu, te korišćena sintaksa sledi specifikaciju. Definisanje specifikacije zadokumente ne ograničava proširivost XML-a, već je potrebna da bi date principe mogleiskoristiti aplikacije i parseri XML dokumenta a da bi se tako uređeni podaci mogli ispravnoupotrebiti.

Drugi koncept XML dokumenta je pravovaljanost (valjanost ili validnost) dokumenta.Pravovaljan dokument je onaj koji se pridržava svoje definicije tipa dokumenta (DTD -Document Type Definition). DTD tačno navodi oznake elemenata koje se mogu koristitiu XML dokumentu i raspored tih elemenata. Ako XML dokument ima DTD specifikacijui ako se upravlja prema tim DTD pravilima, kaže se da je XML dokument valjan.

DTD definiše pravila za pojedinačni XML dokument ili skup dokumenata. Razvojni pro-gramer ili autor sadržaja dokumenta takođe kreira pripadajući DTD kao dodatni dokumentna koji se poziva u svojim XML datotekama ili je već uključen u sam XML dokument.Tako, ne može se smatrati da DTD na bilo koji način ograničava XML. U stvari, DTDje taj koji omogućava prenosivost XML podataka. Prema definiciji tipa dokumenta u ap-likaciji se može odrediti da li je sadržaj XML dokumenta prihvatljiv i na taj način sprečitigreške.

XML, HTML, XHTML i DHTML 189

8.1.1. Šta je XML?

XML predstavlja podatke za opis podataka tj. sintaksu, u tekstualnom formatu. On jekreiran sa namerom da bude jednostavan za učenje, jevtin, brz i optimizovan za Internet.XML se naziva i eXcellent Marketing Language jer predstavlja:

• Univerzalni format podataka – XML omogućuje kreiranje sopstvenih formatapodataka i njihovu razmenu preko postojećih mreža i aplikacija.

• Integracija podataka – XML vrši jednostavnu integraciju podataka kod već pos-tojećih aplikacija i platformi.

• Prilagodiv – On je prilagodiv tj. razumljiv i za čoveka i za mašinu, primaoca i po-šiljaoca, te predstavlja najupotrebljiviji standard za manipulaciju podataka i njihovurazmenu.

Svrha XML je da generiše sopstvene tagove, njihovo značenje i njihov prikaz. XMLneradi ništa, on samo nosi informacije okružene XML tagovima. Znači, XML definišestrukturu dokumenata. On menja način na koji browser-i prikazuju, organizuju i pretražujuinformacije. XML se može shvatiti kao osiromašena verzija SGML-a i proširiv je za razlikuod HTML. XML uklanja granice HTML-ovog ograničenog skupa oznaka, dozvoljavajućiljudima koji se bave rezvojem da definišu neograničen broj oznaka za opis bilo kakvihpodataka.

8.1.2. Šta XML nije?

XML je jezik za označavanje i ništa više od toga. To treba zapamtiti. Priča o XML-u setoliko naduvala da ima ljudi koji od XML-a očekuju da radi sve i svašta, ako treba i kolada opere.

Pre svega, XML nije programski jezik. Ne postoji kompajler XML-a koji čita XMLdatoteke i daje izvršni kôd. Eventualno biste mogli definisati skript jezik koji koristi formatXML-a kao matični, a interpretira ga neki binarni program, ali bi čak i ta primena bilaneobična. XML se može upotrebiti kao format naredaba u programima koji nešto rade, kaošto i tradicionalni programi mogu čitati tekstualne konfiguracijske datoteke i preduzimatirazne akcije na osnovu pročitanog. Zaista nema razloga da konfiguracijska datoteka nebude u formatu XML, umesto u formatu nestrukturiranog teksta. Neki noviji programiupotreb?avaju XML konfiguracijske datoteke; ali je uvek program taj koji preduzima akciju,a ne sam XML dokument. XML dokument ne radi ništa, on samo postoji.

Drugo, XML nije protokol za mrežni prenos. XML ne šalje podatke preko mreže,kao ni HTML. Podaci poslati preko mreže HTTP-om, FTP-om, NFS-om ili nekim drugimprotokolom, mogu biti kodirani u XML-u; ali opet mora postojati neki softver izvan XMLdokumenta koji će poslati dokument.

Najzad, da pomenemo primer gde priče najčešće sakrivaju istinu, XML nije baza podataka.XML-om ne možete zameniti Oracle ili MySQL server. Baza podataka može sadržati XMLpodatke, bilo kao VARCHAR ili BLOB ili neki namenski XML tip podataka, ali samabaza podataka nije XML dokument. XML podatke možete smestiti u bazu podataka na

190 Multimedija

serveru i preuzeti ih iz nje u formatu XML, ali vam za to treba softver napisan na pravomprogramskom jeziku kao što su C ili Java. Da bi smestio XML podatke u bazu podataka,softver na klijentskoj strani šalje ih serveru pomoću ustanovljenog mrežnog protokola kaošto je TCP/IP. Softver na serverskoj strani prima XML podatke, raščlanjuje ih i smeštau bazu. Da biste preuzeli XML dokument iz baze podataka, po pravilu ćete morati daupotrebite neki posrednički program (middleware product) kao što je Enhydra, koja ćenapraviti i poslati SQL upite bazi podataka, a skup rezultata formatirati kao XML prenego što ih vrati klijentu. Činjenica je da neke baze podataka integrišu taj softver u svojeservere ili za obavljanje te funkcije obezbeđuju softverske dodatke, kao što je Oracle-ov servlet XSQL. U tim scenarijima, XML služi veoma dobro kao sveprisutan prenosniformat, nezavisan od platforme. Međutim, on nije baza podataka, niti ga tako trebaupotrebljavati.

8.1.3. Namena

XML je tu da opiše strukturu, integriše protokole između aplikacija, da razmenjuje po-datke. XML je skup pravila koja omogućavaju kreiranje tekstualnog formata koji opisujestrukturu podataka (adresari, konfiguracioni parametri, finansijske transakcije itd.)

XML opisuju podatke u tekstualnom formatu te omogućuje razmenu podataka nezavisnood sistema i formata podataka i predstavlja budućnost mrežnog programiranja. Velikuprimenu ima u razmeni podataka, pogotov za komunikaciju client-server preko Interneta.Pogledajmo gde je sve XML našao svoju primenu:

• XML for Content Providers – Istoj informaciji može se pristupati i čitati narazličitim jezicima. Različit prikaz istih podataka mogu se prezentovati različitimkorisnicima. Svaki XML dokument može da sadrži opis gramatike ili sintakse kakobi se moglo proveriti i ispravnost sadržaja.

• XML for Content and knowledge management – Pretraživanje, indeksiranje ilokacija podataka postaje jednostavnija pošto XML nosi informaciju o sadržaju, onje samo opisujući dokument. Transformacija podataka iz XML omogućava prikazna različite medije (Web, CD ROM, papir) bez nepotrebnih modifikacija i dupliranjasadržaja.

• XML for Content Aggregation – XML obezbeđuje da se informacije sa različitihmesta integrišu na jednom mestu i da se one prikupljaju na osnovu akcija krajnjegkorisnika. XML na taj način obezbeđuje vezu B2C preko B2B veze.

• XML for Electronic Document Interchange – XML omogućava kreiranje struk-ture za razmenu informacija kao i da objedini postojeće protokole i standarde.

• XML and E-Commerce – XML obezbeđuje sintaksu da indetifikuje svaku informa-ciju potrebnu za kompletnu transakciju. Drugi spoj je poverenje, jer XML omogućujeda se informacija o učesnicima u transakciji nosi zajedno sa transakcijom. Da bi sepratila promena tržišta potrebno je mnogo manje vremena i novca sa XML-om.


• XML for Design – Scalable Vector Graphic (SVG) predstavlja jezik za opis dvodi-menzionalnih vektora pomoću XML-a. SVG-a omogućuje da svaki korisnik u real-nom vremnu pristupa slici u bilo koje vreme i sa bilo kojim uređajem, sa bilo kogmesta.

XML omogućuje da se strukturni podaci iz različitih izvora jednostavno kombinuju. XMLdokument kao poruka je samobjašnjiv skup podataka, jer pored samih podataka koji supredmet poruke, XML dokument sadrži i meta podatke pomoću kojih se ti podaci moguinterpretirati. Programski agenti, mogu se koristiti da integrišu podatke u srednjem slojuservera iz baze za druge aplikacije. Ovi podaci mogu da se prenose klijentima ili drugimserverima za dalju agregaciju, procesiranje ili distribuciju. Fleksibilnost XML-a omogućavada se opišu podaci sadržani u širokom krugu različitih aplikacija, od opisa Web strane dopolja baze podataka.

Prvi čitač Weba koji je omogućio pregled XML -a je Internet Explorer 5.0+, a Netscapepodržava XML specifikaciju od verzije 6 svog čitača.

8.1.4. Standard

Mogućnost da se podaci odvoje od procesa predstavlja ključ uspeha XML-a. XML jeotvoreni standard, te omogućava da XML funkcioniše na bilo kojoj platformi sa bilo kojimprogramskim jezikom. Veliki broj programskih jezika omogućuje rad sa XML-om poputJave, MS Visual Basica, MS Visual C++, Perl, Cobol i C#.

Pomoću XML mogu se napisati i novi jezici. WML (Wireless Markup Language), koristise za kreiranje Internet aplikacija u mobilnim telefonima, i napisan je u XML-u. XML jenezampamćenom brzinom postao standard, zbog svoje jednostavnosti.

• XML 1.0, je usvojen kao W3C Recommendation u februaru 1998. godine i pred-stavlja sintaksu definisanu po W3C specifikaciji.

Takođe W3C omogućava progrmiranje efikasinijim, kreirajući familiju tehnologija kojepodržavaju XML kao što su:

• XML Schema, takođe predstavlja XML dokument, omogućava modularnost jerkreira strukturu i opis samih XML dokumenta. Jednostavno kombinuje više različitihšema koje pokriva i sjedinjava strukturu dokumenta. Znači, nasleđuju se pravilasa drugih šema. Nastale su kao alternativna zamena za DTD (Document TypeDefinition), pošto DTD nije bio XML dokument. XML šeme obezbeđuju podrškuza standardne tipove podataka kao što su broj, datum,... i omogućuju definisanjenovih tipova.

• Namespace, eleminiše konfuziju prilikom kombinovanja više šema u jednom XMLdokumentu. On upućuje XML procesor da pronađe strukturna pravila (definisanih ušemi) koji se primenjuju na sam dokument. U slučaju kada u dokumentu koristimodva eksterna dokumenta koji poseduju isti naziv, a različito značenje elemenatakoristimo namespace, kako bi ukazali na koje se elemente odnose i koje značnjeposeduju. Namespace ukazuje na šemu koja sadrži informacije o dokumentu koji sekoristi.

192 Multimedija

• XSLT/xPath vrši transformaciju sadržaja XML dokumenta u bilo šta, najčešćeHTML, omogućavajući na taj način razdvajanje podataka od prezentacije.

8.1.5. Kako radi XML?

XML je na prvom mestu tehnologija i sam za sebe ne predstavlja nešto posebno već teksa srodnim tehnologijama daje pune rezultate. Srodne tehnologije su:

• DTD,

• CSS,

• XLS,

• DOM,

• ADO,

• XLink,

• XFragments,

• XPointer,

• ... itd.

U nekim od pomenutih tehnologija XML se ponaša kao klijent dok je za neke server, amože biti i jedno i drugo istovremeno.

Jedan od najvećih problema kada je u pitanju transfer informacija je njihov sadržaj ulogičkom smislu te reči. XML služi kao kontejner za transfer jer u sebi pored informacijeima i njenu poziciju u odnosu na ostale informacije - XML pored informacije opisuje istrukturu. Detaljna specifikacija XML-a je data na adresi www.w3.org i svakako je vredipročitati.

XML je u svojoj osnovi informacija o informaciji. Više nije dovoljno imati samo infor-maciju, jer to u današnjim uslovima znači tražiti i pronaći istu već je potreban načinda opišemo informaciju, a da taj opis informacije upotrebimo dalje za pronalaženje istei za njenu dalju obradu. Neka vam je potrebna neka konkretna informacija. Možeteotići na neki sajt i tamo pronaći tu informaciju, ali to zahteva da neka osoba to i uradi.Možda biste mogli i da napišete neki parser koji će sadržaj tog sajta rasčlaniti i pronaćipotrebnu informaciju, ali zamislite šta vam je sve potrebno da znate da napišete takavparser. Morate znati gde je i kako je ta informacija smeštena. Prilično komplikovano, arezultati su i dalje diskutabilni. Međutim kada biste imali informaciju koja opisuje infor-maciju stvari bi bile mnogo lakše. Lako biste mogli da dođete do potrebne informacije -to bi mašina mogla da uradi umesto vas, a kad neko stalno nudi takve informacije kojimabiste mogli da pristupite lako onda je pojam Web servisa lako razumljiv. Ideja se daljerazvija i dobijamo Internet kao mrežnu infrastrukturu tako da na kraju krajeva Internet ilibarem jedan njegov segment će biti uskoro čisto poslovna mreža kojom će se razmenjivatisamo informacije u sirovom obliku. Uslov te razmene je da informacije na neki način budu


obeležene da bi se mogle identifikovati i koristiti, a upravo to je ono što XML nudi.

Podaci se smeštaju u XML dokumente u obliku znakovnih nizova (strings), između tek-stualnih oznaka koje ih opisuju. Osnovne jedinice podataka i oznaka u XML-u nazivajuse elementi. XML specifikacija precizno definiše sintaksu koje se morate pridržavati pripisanju oznaka – kako su elementi razgraničeni oznakama, kako oznaka izgleda, kakvaimena elementi mogu imati, gde se stavljaju atributi itd. Površno gledano, oznake XMLdokumenta mnogo liče na oznake HTML dokumenta, ali među njima postoje bitne razlike.

Najvažnije je da je XML jezik za metaoznačavanje. To znači da on nema fiksan skupoznaka i elemenata koji bi trebalo da zadovolje svačije potrebe u svim oblastima i zauvek.Svaki pokušaj da se napravi konačan skup takvih oznaka, osuđen je na neuspeh. Umestotoga, XML omogućava programerima i piscima da izmišljaju potrebne elemente ondakad im zatrebaju. Hemičari mogu upotrebljavati elemente koji opisuju molekule, atome,veze, reakcije i ostale entitete koji se sreću u hemiji. Agenti za prodaju nekretnina moguupotrebljavati elemente koji opisuju stanove, stanarine, provizije, lokacije i druge entitetepotrebne za nekretnine. Muzičari mogu upotrebljavati elemente koji opisuju četvrtinenota, polovine nota, violinske ključeve, tekstove pesama i ostale objekte uobičajene umuzici.

Slovo X u imenu XML potiče od reči Extensible (proširiv), što znači da se jezik možeproširivati i prilagođavati da bi zadovoljio različite potrebe.

Iako je XML veoma fleksibilan kad je reč o elementima koji se mogu koristiti, veomaje strog u mnogim drugim aspektima. Specifikacija XML-a definiše gramatiku XML do-kumenata, koja kazuje gde se oznake moraju staviti, kako one moraju izgledati, kakvasu imena (nazivi) elemenata dozvoljena, kako se elementima pridružuju atributi itd. Tagramatika je dovoljno specifična da omogućava pravljenje raščlanjivača i analizatora sin-takse XML-a koji mogu pročitati svaki XML dokument. Za dokumente koji zadovoljavajupravila te gramatike kažemo da su dobro oblikovani (well-formed). Dokumenti koji nisudobro oblikovani bivaju odbijeni, kao što biva odbijen svaki C program koji sadrži sintak-snu grešku. Programi za obradu XML-a (XML processors) odbijaju dokumente koji nisudobro oblikovani.

Radi interoperabilnosti, pojedinci i organizacije mogu se dogovoriti da upotrebljavaju samoodređene oznake. Takve skupove XML oznaka nazivamo primene XML-a (XML appli-cations) ili XML aplikacije. XML aplikacija nije softverska aplikacija koja upotrebljavaXML, kao što su Mozilla ili Microsoftov Word. To su primene XML-a u određenoj oblasti,na primer, u vektorskoj grafici ili u kulinarstvu.

Oznake u XML dokumentu opisuju njegovu strukturu. Pomoću njih možete videti kojielementi su pridruženi kojim drugim elementima. U dobro projektovanom XML dokumen-tu, oznake opisuju i semantiku dokumenta. Primera radi, oznaka može ukazati na to daje element datum ili ime osobe ili bar-kod. U dobro projektovanim XML aplikacijama,oznake ništa ne kazuju o tome kako dokument treba prikazati. Drugim rečima, ne kazujuda li je određeni element ispisan polucrno ili kurzivom ili je stavka nabrajanja u listi. XMLje jezik za označavanje strukture i semantike, a ne za označavanje načina prikazivanja.

Postoji nekoliko XML aplikacija za opisivanje načina predstavljanja teksta; jedna takva

194 Multimedija

je XSL-FO (XSL Formatting Objects). Međutim, to su izuzeci koji potvrđuju pravilo.Iako XSL-FO opisuje prezentaciju, XSL-FO dokument se nikada ne piše direktno. Umestonjega napisali biste semantički bolje strukturiran XML dokument, a potom biste upotre-bili opis stilova XSL Transformations da biste strukturno orijentisani XML izmenili uprezentacijski orijentisan XML.

Oznake dozvoljene u određenoj primeni XML-a mogu se dokumentovati u šemi (schema).Sa šemom se mogu porediti pojedini primerci dokumenta. Za dokumente koji zadovolja-vaju šemu kažemo da su validni (valid). Za one koji ne zadovoljavaju tu šemu kažemoda su, u odnosu na nju, nevalidni (invalid). Dakle, validnost dokumenta zavisi od šemesa kojom se dokument poredi. Ne moraju svi dokumenti biti validni. Za mnoge primenedovoljno je da dokument bude dobro oblikovan.

Postoji mnogo raznih jezika za XML šeme i njihovi nivoi izražajnosti su različiti. Na-jrašireniji jezik za XML šeme i jedini definisan u samoj specifikaciji XML-a jeste definicijatipa dokumenta (document type definition – DTD). Svaki DTD navodi sve dozvoljeneoznake i određuje gde se i na koji način one mogu pojaviti u dokumentu.

U XML-u DTD-ovi nisu obavezni, nego opcioni. S druge strane, DTD-ovi nisu uvek do-voljni. Sintaksa DTD-ova je veoma ograničena i ne omogućava pravljenje raznih korisnihiskaza poput "Ovaj element sadrži broj" ili "Ovaj znakovni niz je datum koji pada između1974. i 2032". Takva ograničenja možete izraziti jezikom XML Schema Language, kojije prihvatio W3C. (Taj jezik se ponekad pogrešno naziva opštim imenom schemas, tj.šeme.) Pored DTD-a i XML Schema Language-a, postoji još mnogo jezika za opisivanješema.

Prethodno je navedeno da je za funkcionalnost koju pruža XML potreban parser. Parsi-ranje, kada je XML u pitanju znači sledeće – raščlanjivanje tekstualnog fajla i pravljenjestrukture koja se rekurzivno puni elementima XML stabla. To, očigledno, znači da parserizvodi sledeće operacije:

1. Iščitava preprocesorski deo dokumenta (deo na početku dokumenta između ? zna-kova) da bi došao od informacija koje se odnose na dokument, a nisu deo samogXML stabla. Na primer: <?xml version="1.0" encoding="windows-1252"?>

2. Zatim se isčitava prvi tag u XML strukturi i zapisuje njegovo ime – ovo je top levelili startni tag.

3. Sledi zapisivanje imena elementa.

4. Potom se iščitavaju ostali elementi redom da bi se odredilo koja svojstva ima datielement strukture i zatim se ta svojstva upisuju – ako je u pitanju element upisuje senjegova vrednost ili u formi uređenih parova atribut = vrednost, ako je u pitanjuatribut.

5. Ako sledeći tag nakon prvog nađenog nije oznaka za zatvaranje iščitava se sledećitag i on se definiše kao dete trenutnog elementa. Onda se parser vraća na korak 3.Ako je nađeni tag oznaka za zatvaranje onda je element definisan.

6. Ovaj proces se ponavlja dok se ne obradi čitav dokument.


8.1.6. Imenovanje elemenata

XML elementi moraju da poštuju sledeća pravila:

• Imena mogu sadržavati slova brojeve i druge karaktere.

• Imena ne smeju počinjati brojem ili interpunkcijskim karakterom.

• Imena ne smeju počinjati slovima xml ili XML ili Xml.

• Imena ne mogu imati prazan prostor u sebi.

Sledi nekoliko opštih preporuka. Imena treba da budu samoopisujuća. Primeri su:

<prezime>, <adresa_stanovanja>

Imena treba da budu kratka i jasna, jer to olakšava rukovanje:

<naslov_knjige>

a ne

<naslov_knige_u_biblioteci>

XML dokumenti imaju često odgovarajuću bazu podataka pa nazivi elemenata treba daodgovaraju poljima u bazi.

XML atributi

XML elementi mogu imati atribute u otvarajućem tagu kao i HTML. Oni se koriste zadodatne informacije o elementu. Iz HTML-a se sećamo ovoga:

<IMG SRC="slika.gif">

Atribut SRC daje dodatne informacije o IMG elementu. Atributi često pružaju informacijekoje nisu deo podataka. U sledećem primeru tip fajla je irelevantan za podatke, ali jeveoma bitan za softver koji manipuliše elemenom:

<file type="gif">slika.gif</file>

Znaci navoda

Vrednosti atributa moraju uvek biti unutar znaka navoda. Međutim moguće je koristitijednostruke ili dvostruke znake navoda:

<ime="Krcun">

ili:

<ime=’Krcun’>

Dupli znaci navoda su češći, međutim, nekada je neophodno koristiti jednostruke kao usledećem primeru:

<ime=’Slobodan "Krcun" Penezic’>

196 Multimedija

Šta koristiti - element ili atribut?

Podaci se mogu skladištiti ili u elementima ili u atributima. Element ima sledeću formu:

<ime>Krcun</ime>

dok je atribut u formi:

<nesto ime="Krcun">

Pogledajmo sledeća dva primera:

<komintent tip="nabavljac">

<ime>Pera</ime>

<prezime>Peric</prezime>

</komintent>

ili

<komintent>nabavljac</komintent>

<ime>Pera</ime>

<prezime>Peric</prezime>

U prvom primeru tip je atribut. U drugom primeru tip je element. Oba primera daju isteinformacije. Ne postoje određena pravila kada koristiti atribute a kada elemente. Nekanačelna preporuka je da se elementi koriste kada je u pitanju nešto što je samo po sebicelokupna informacija a ne neki njen pomoćni deo.

Potencijalni problemi prilikom korišćenja atributa

• Atributi ne mogu sadržavati višestruke vrednosti (elementi mogu).

• Atributi nisu lako proširivi.

• Atributi ne opisuju strukturu.

• Atributima se teže manipuliše u programskom kodu.

• Vrednosti atributa se teško testiraju u odnosu na DTD (Document Type Definition- definicija tipa dokumenta).

8.1.7. Sintaksa XML-a

Sintaksna pravila XML-a su veoma jednostavna i striktna. Lako se uče i još lakše prime-njuju. Zbog toga je kreiranje aplikacija koje su u stanju da čitaju i manipulišu XML-omrelativno jednostavno. Pogledajmo opet primer:


<?xml version="1.0" ?>

<note>

<to>Pera</to>

<from>Mika</from>

<subject>pozdrav</ subject>

<body>Puno pozdrava iz Beograda</body>

</note>

Prva linija XML dokumenta – XML deklaracija – određuje XML verziju dokumenta. Uovom slučaju dokument poštuje specifikaciju 1.0 XML-a koju propisuje W3Consortium.Ovaj red ujedno i govori Internet Exploreru da parsira (rasčlani) dokument XML parseromodnosno da dokument tretira kao XML fajl, a ne kao HTML fajl. Bez ove linije dobilibismo poruku o grešci od IE. Ova linija nema svoj zatvarajući ekvivalent, jer ona nije deoXML dokumenta već njegova deklaracija. Sledeće je osnovni tag koji dokument formirakao poruku (<note>). Moguć je samo jedan osnovni tag, inače opet dobijamo porukuo grešci. Sledeće četiri linije opisuju četiri podčlana osnovnog člana (to, from, subject ibody). Poslednja linija zatvara osnovni tag (</note>).

• Svi XML elementi moraju da budu zatvoreni.

U XML-u, izostavljanje završnog taga vodi u grešku. Dok je u HTML-u prolazilo:

<p>ovo je paragraf<p>ovo je jos jedan paragraf

u XML-u ovo ne bi bilo ispravno, već bi ispravan dokument izgledao ovako:

<p>ovo je paragraf</p><p>ovo je jos jedan paragraf</p>

• XML tagovi razlikuju mala i velika slova.

Za razliku od HTML-a, XML tagovi su case sensitive. U XML-u, tag <Poruka> nije istikao tag <poruka>. Stoga, trebalo bi voditi računa da otvarajući i zatvarajući tagovi budupotpuno identični. I po nazivu i po upotrebljenim karakterima:

<Poruka>Ovo je neispravno</poruka>

<poruka>Ovo je ispravno</poruka>

• Svi XML elementi moraju biti propisno ugnežđeni.

Neispravno ugnežđeni elementi nemaju smisla u XML-u. Dok se u HTML-u elementimogu preklapati u XML to nikako nije slučaj. Pogledajmo sledeći primer:

HTML ispravno

<b><i>Ovo je tekst</b></i>

XML ispravno

<b><i>Ovo je tekst</i></b>

198 Multimedija

• Svi XML dokumenti moraju da imaju osnovni (top level) ili startni tag.

Prvi tag u XML dokumentu je osnovni tag. Svi XML dokumenti moraju da imaju jedan partagova koji definiše osnovni tag. Svi ostali elementi su ugnežđeni u osnovni tag. Gnežđenjeu dubinu je neograničeno. Znači, element može imati neograničen broj elemenata – dece.Odnos koji vlada je takozvani roditelj – dete odnos.

<note>

<to>Pera</to>

<from>Mika</from>



</note>

Ovde je par osnovnih tagova <note> i </note>, dok su podčlanovi parovi:

<to> i </to>

<from> i </from>

<subject> i </subject>

<body> i </body>

• Vrednosti atributa moraju biti pod znacima navoda.

U XML-u se vrednosti atributa moraju uokviriti znacima navoda. XML elementi moguimati atribute u formi ime = vrednost parova (kao i u HTML). Pogledajmo ova dvaXML dokumenta. Prvi je neispravan, a drugi je ispravan:

<?xml version="1.0"?>

<note date=10/06/2000>

<note>

<to>Pera</to>

<from>Mika</from>



</note>

<?xml version="1.0"?>

<note date="10/06/2001">

<note>

<to>Pera</to>

<from>Mika</from>



</note>

• U XML-u je sačuvan prazan prostor.

Korišćenjem XML-a prazan prostor je prikazan u parsiranom dokumentu. Na primer:



će u parseru biti:Puno pozdrava iz Beogradadok to sa HTML-om nije slučaj.

• U XML-u, CR/LF karakteri se pretvaraju u LF karakter.

U XML-u, nov red u tekstu je uvek sačuvan kao LF (line feed). U Windows aplikacijamanov red je par CR (carriage return) i LF (line feed) karaktera. Kod UNIX sistema karakterza nov red je LF, mada neke aplikacije koriste i samo CR. Ova razlika među operativnimsistemima često za posledicu ima da se podaci vraćaju u obliku strima (toka), a ne uželjenom formatu.

• XML nije nešto specijalno, ali ima svoje male tajne.

XML je zapravo samo tekst, dizajniran tako da ga čita mašina odnosno softver, a nečovek. Softver koji podržava čisti tekst može da obrađuje XML. Na primer, u Notepad-use može obrađivati XML dokument. XML može da sadrži ne-engleske karaktere (č, ć, ž,đ...), međutim tada je potrebno dokument sačuvati u Unicode formatu, što nije mogućeu nekim verzijama Windows na primer u 95/98 dok je pod Windows 2000 operativnimsistemima to moguće. Stoga je u samu deklaraciju XML fajla uveden i atribut encoding(dešifrovanje) što zapravo govori čitaču koju kodnu stranu da koristi.

<?xml version="1.0" encoding="windows-1252"?>

Ovde je potrebno obratiti pažnju. Fajlovi sačuvani kao Unicode ne mogu imati i encodingatribut, inače se pojavljuje greška u Internet Exploreru.

Do sada smo se upoznali sa XML-om, njegovom strukturom, sintaksom i stekli smo pred-stavu o njegovoj nameni. Međutim priča o XML-u se tu ne završava, ali to prevazilazinamenu ove knjige.

8.2. HTML

Kada u svom Web čitaču otkucate adresu Web sajta koga želite da pogledate, vaš zahtevse preko DNS servisa usmerava na IP adresu računara gde se nalazi zahtevani Web sajtili strana. Terminološki ovo se naziva zahtevom (Request).

Kada sa pronađe zahtevana IP adresa računara ka njoj se prosleđuje ovaj zahtev. Naredneakcije koje preduzima Web server zavise od toga šta ste tražili – da li je zahtevanastatična ili dinamična Web strana, neki dokument ili na primer multimedijalni sadržaj. Unajjednostavnijem slučaju, kada je zahtevana statička Web stranica, Web server na vašuIP adresu (setite se da i vi imate jedinstvenu IP adresu kada ste povezani na Internet),prosleđuje traženu HTML stranu. Ovaj postupak se naziva odgovorom (Response). Ovapriča je ilustrovana na slici 8.1.

200 Multimedija

Slika 8.1. Procedura Request / Response

Na kraju vaš Web čitač prikazuje uredno formatiranu stranicu sa slikama, linkovima iostalim elementima.

Ono što verovatno nije očigledno većini korisnika računara je da će se ova stranica na(skoro) isti način prikazati bez obzira na operativni sistem, tip računara ili Web či-tača/pretraživača koji se koriste. Očigledno postoji standardizovani način formatiranjai prikaza Web strana koji su svi usvojili.

HTML je standardizovan jezik koji se koristi na Webu i čija je namena opisivanja formataWeb stranice i njenih elemenata.

Da biste bili uspešan stvaralac Web stranica morate znati HyperText Markup Languagetj. HTML. On je relativno jednostavan jezik za opis dokumenata i njihovih međusobnihveza a koji se prikazuju u Web čitačima (browser-ima).

8.2.1. Šta je to HTML?

HTML predstavlja hipertekstualne (hypertext) dokumente, dokumenti koji su međusobnopovezani. Hipertekst se sastoji od međusobno povezanih delova teksta (ili drugih in-formacija) tako da čitalac interaktivno određuje redosled čitanja. Kretanje kroz takvedokumente neziva se navigacija a ne čitanje. Zato Web dokumenti treba da pruže koris-niku utisak da se može slobodno kretati kroz informacioni prostor. Međusobno povezanidokumenti na Webu nisu samo tekstovi već i slike, zvuci, video, pa se Web može nazvatihipermedijalnim sistemom. A kako se dokumenti mogu nalaziti bilo gde na mreži svihmreža, ovo je distribuirani sistem.

HTML nije zaista programski jezik u onom smislu u kom su to C++ ili Visual Basic, onje više sintaksni jezik za formatiranje dokumenata, nastao je od SGML-a (Standard Gene-ralized Markup Language), koji je daleko kompleksniji "meta jezik" a služi za specifiranjeelemenata koje se koriste u dokumentima i značenje elemenata. Rast HTML-a je iniciraoNetscape, uvođenjem nestandardnih proširenja u jezik, a trenutno se proširenjima i novimverzijama bavi se W3C komitet. Znači HTML je živ jezik koji se intezivno razvija, pa sepovremeno se pojavljuju problemi sa novitetima koje pojedini Web čitači ne podržavaju.

HTML je u tekstualnom formatu pa se može kreirati u bilo kom od tekst editora, poseduje


ekstenziju .htm ili .html. Postoje mnogi programi koji pojednostavljuju kreiranje HTMLWeb strana, ali potpuna kontrola podrzumeva mnoge akcije na najnižem nivo.

Da bi ste izbegli da izgled vaše strane zavisi od Web čitača u kojem se pregleda, držite sepodalje od elemenata koji su specifični za neki od Web čitača i nisu podržani u ostalima.

8.2.2. Istorijat

Autor HTML je Tim Barners-Lee iz CERN-a (Švajcarska, centar za visokoenergetskufiziku) i nastao je 1991. godine na osnovama SGML-a (Standard Generalized Markup Lan-guage). Značajan doprinos razvoju i prihvatanju Web-a je dao program za pregled HTMLstrana tj. Web čitač , Mosaic za X i MS Windows. Prvi Web čitač razvijen januara1993. godine u NCSA instituciji (National Centre for Supercomputing, Chicago, autorimnogih programa u slobodnoj distribuciji za pristup Internet-u). Sistem je brzo stekaoveliku popularnost i do danas su razvijeni mnogi Web čitači.

Početkom 1994. godine HTML specifikacija je zastarela u odnosu na razvoj jezika većimplementiranog u Web čitačima kao što je NCSA Mosaic. Najvećim delom oslanjajućise na poboljšanja u ovom Web čitaču, Dan Connelly je napravio reviziju prve specifikacijei nazvao je HTML 2.0.

Uporedo je počeo sa formiranjem komiteta za dalji razvoj jezika. Prvi sastanak je bio naWWW konferenciji u CERN-u, maja 1994. godine, a sledeći na IETF (Internet Engineer-ing Task Force) sastanku u Torontu, kada je oformljena HTML radna grupa.

HTML 2.0 specifikacija je pokušala da obuhvati postojeće načine korišćenja HTML-a.Osnovne novine se tiču rada sa slikama i fontovima kao i formama. HTML 2.0 je postaozvanični standard za kreiranje Web strana. Strane kreirane u ovo standardu mogu i daljeda se prikazuju u okviru Web čitača.

HTML 3.0 specifikacija donosi novosti u svim aspektima jezika, a pre svega u radu samatematičkim formulama, tabelama, internacionalnoj podršci itd. Ubrzo je zamenjena saHTML 3.2 specifikacijom koja se i danas koristi.

Pojavom četvrte verzije, HTML se vratio svom početnom cilju. HTML treba da budestrukturni jezik, a ne jezik za formatiranje korišćenjem tagova <font> ili <b> za prikaz.

Najznačajnija specifikacija HTML 4.1 omogućava formatiranje HTML dokumenta iz odvo-jnih šema stilova (style sheet), jednostvno skriptovanje dokumenta i poseduje veću kon-trolu nad HTML elementima.

Rast HTML-a je inicirao Netscape, uvođenjem nestandardnih proširenja u jezik, a trenutnose proširenjima i novim verzijama bavi se W3C komitet.

8.2.3. Sintaksa

HTML dokument je tekstualni fajl sa ekstenzijom .htm ili .html, koji sadrži set eleme-nata i atributa, kojim se određuje struktura sadržaja kojeg nosi. HTML može da se piše uobično tekstualnom editoru, kao što je Notepad ili u nekom od specijalizovanih programaza obradu Web dokumenata.

202 Multimedija

Bez obzira na automatizaciju procesa kreiranja Web dokumenata, morate posedovati dostaznanja o HTML-u, kako bi posedovali punu kontrolu nad Web dokumentima. ZnanjeHTML nije prednost već uslov da bi bili uspešan kreator Web prezentacija. HTML doku-ment sastoji se od deklaracija, elemenata i atributa.

8.2.4. Elementi

Elementi predstavljaju strukturu HTML-a a opisuju delove HTML dokumenta. Mogu dase nalaze bilo gde u okviru HTML dokumentu. Na primer, P element predstavlja paragraf,dok EM element proizvodi naglašen sadržaj. Svaki element poseduje tri dela: početni tag,sadržaj i završni tag.

Tag je specijalni tekst tkz. "markup" – marker koji je ograđen sa < i >. A završni taguključuje i znak / posle znaka <. Znači sve što se nalazi u tagovima HTML dokumentaWeb čitač prihvata kao komande, a sve ostalo predstavlja klasičan tekst u ekranu Webčitača. Na primer EM element ima početni tag, <EM>, i završni, </EM>. Početni i završnitag okružuju sadržaj EM elementa:

<EM>Ovo je naglesen tekst</EM>

U HTML-u ne postoji razlika između malih i velikih slova za elemente u tagovima tako,na primer, <em>, <eM> i <EM> predstavljaju iste elemente. Preporučuje se da elementeHTML-a pišete malim slovima. Takođe sve suvišne znakove razmaka (space), tabulator iznake za novi red Web čitač ignoriše, ali utiču na veličinu samih Web dokumenata.

Elementi ne smeju da se preklapaju tj. ukoliko se početni tag EM elementa pojavljujezajedno sa tagom P elementa, tada se završni tag EM elementa mora takođe pojavitizajedno sa završnim tagom P elementa.

Neki elementi dopuštaju da se izuzme završni tag, na primer, element LI opciono može dasadrži završni tag pošto se on u stvari završava sa sledećim početnim tagom LI elementa:

<UL>

<LI>Prvi, nema zavrsni tag

<LI>Drugi, opcioni zavrsni tag je ukljucen</LI>

<LI>Treci, nema zavrsni tag

</UL>

Neki elementi nemaju završni tag pošto nemaju sadržaj kao, na primer, BR element zanovi red (line breaks).

Web čitači u mnogome nepoštuju ova pravila, tako da se i nepravilni HTML dokument"pravilno" prikazuje, ovo je nastalo usled rata Web čitača, kada su se grabili za tržište išto veću upotrebljivost pa i kod nekvalitetnih Web dokumenata.

8.2.5. Atributi

Elementi mogu da sadrže atribute, to je par ključa i vrednosti koji definiše različite osobineelementa. Na primer, IMG element poseduje SRC atribut koji obezbeđuje lokaciju slike iatribut ALT koji obezbeđuje alternativni tekst ukoliko se slika ne učita:


<IMG SRC="slika.gif" ALT="ZdravaHrana.com ’my’ Logo">

Atributi se uvek uključuju u početni tag nikad u završni, a sintaksa je sledeća:

Naziv_Atributa = " Vrednost_Atributa "

Vrednost atributa ukoliko postoji je ograničena jednostrukim ili dvostrukim navodnicima.Uobičajeno je da se navode dvostruki kako bi u okviru njih mogli postaviti i jednostruki.Kod atributa ne smeju da se mešaju mala i velika slova, oni su osetljivi na promenu slova(case-sensitive).

8.2.6. Entiteti

Specijalni znaci ili entiteti obezbeđuju metod da se unesu karakteri koji ne mogu da seunesu sa tastature ili su zauzeti, na primer, znak manje < ne može da se koristi pri unosusadržaja, pošto se taj znak koristi za tagove.

Samo pojedini karakteri imaju svoje nazive (slovnu oznaku) dok se ostali dobijaju navođe-njem broja karaktera tj. njegovog koda. Možemo ispisati bilo koji znak iz Unicode kodnograsporeda. Entiteti imaju sledeću sintaksu:

• &naziv_entiteta;

• &#broj_entiteta;

• &#xheksadecimalni_broj_entiteta;

Da bi ispisali znak manje moramo u HTML dokumentu otkucati <

Primer upotrebe entiteta:

204 Multimedija

8.2.7. Karakteri

HTML 4.0. usvojio je Universal Character Set kao svoj karakter set. Ovaj karakter set jeekvivalent Unicode 2.0 kodnom rasporedu koji sadrži karaktere skoro svih svetskih jezikeuključujići i naš. Prethodne verzije HTML koristile su ISO-8859-1 kodni raspord koji jepodržavao samo karaktere nekih Zapadno Evropskh jezika.

Najednostvniji način da koristite naša slova je da HTML dokument sa našim slovimasnimite u UTF-8 formatu i da u zaglavlju HTML dokumenta tj. u okviru HEAD tagovaunesete sledeće:

<meta content="text/html; charset=utf-8" http-equiv=content-type>

Ubacivanje naših slova pomoću kodnog rasporeda CP1250 je vrlo jednostavno, i sastoji seiz dva koraka:1. U HTML kodu svake stranice unutar HEAD tagova ubacite META tag:

<meta http-equiv="Content-Type" content="text/html;

charset=windows-1250">

Napomena: LATIN-2 kodni raspored omogućuje prikaz naših latiničnih slova u prozoruWeb čitača, a odgovara kodnoj strani 1250 u Windowsu.2. U vašem HTML kodu na mestu gde treba da stoji neko naše slovo ubacite sledećeASCII kodove tj. simbole:

• Č za naše veliko Č

• č za naše malo č

• Ć za naše veliko Ć

• ć za naše malo ć

• Š za naše veliko Š

• š za naše malo š

• Đ za naše veliko Ð

• đ za naše malo đ

• Ž za naše veliko Ž

• ž za naše malo ž

Primer upotrebe CP1250 kodnog rasporeda:


8.2.8. Struktura

Svaki HTML dokument poseduje svoju strukturu koja se sastoji od nosača HTML doku-menta, a koji sadrži samo zaglavlje i telo HTML dokumenta. U zaglavlju se definišu raznipodaci potrebni web čitaču dok telo sadrži sadržaj i HTML elemenate za formatiranje togsadržaja.

Elementi najvišeg nivoa:

• HTML

– HEAD

– BODY

DOCTYPE

HTML dokument započinje sa DOCTYPE (Document Type Declaration) deklaracijomkoja definiše verziju HTML u kojoj je dokument napisan. U verziji 4.01 postoje sledećedefinicije:

• HTML 4.01 Strict, opisuje strukturu HTML 4.01 dokumenta i ne poseduje ele-mente i atribute za okvire (frames).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

• HTML 4.01 Transitional, uključuje i elemente za formatiranje tkz. prezentacionemarkere kao što su <B> i <FONT>, ali ne uključuje okvire.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

• HTML 4.01 Frameset, poseduje sve što i prethodni plus opis za okvire.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

8.2.9. HTML element

Da bi Web čitač utvrdio da je tekstualni dokument ustvari HTML dokument on uvek morada započinje tagom <HTML> i da se završava sa tagom </HTML>. Ovi tagovi predstavljajuelemente najvećeg nivoa i govore Web čitaču da dokument sadrži HTML elemente.

HTML tag može da sadrži sledeće argumente TITLE i LANG koji služe da se definišekomentar odnosno da se setuje jezik koji će da koristi dati dokument (na primer, "en" zaEngleski, "de" za Nemački, "sr" za Srpski itd.) Unutar <HTML> tagova definiše se jedinozaglavlje (Head) i telo (Body) HTML dokumenta.

Kompletan HTML dokument:

206 Multimedija



<HTML title="Ovo je HTML dokument" lang="sr">

<HEAD>

<TITLE>Naslov dokumenta</TITLE>

</HEAD>

<BODY>

Zdravo, Svete!

</BODY>

</HTML>

Napomena: Otkucajte ovaj kôd u običnom tekst editoru, na primer, Notepad-u (ili gaprebacite u Notepad sa Copy/Paste) i snimite ga sa ekstenzijom .htm ili .html, potomisti dokument otvorite u jednom od najpopularnijih Web čitača kako bi videli rezultat.

Za određivanje prikaza elemenat koristite CSS, a ne HTML tagove tipa FONT ili B.

8.2.10. HEAD element

Zaglavlje služi da prosleđuje razne informacije Web čitaču, da definiše Web dokument, ane utiče na prikaz HTML dokumenta. Definiše se pomoću <HEAD> i </HEAD> tagova unu-tar kojih obavezno se postavlja naslov, a koji se nalazi između tagova <TITLE> i </TITLE>(naslov se prikazuje na vrhu Web čitača zajedno sa imenom Web čitača).

U okviru HEAD elementa navode se razne informacije Web čitaču kao što je naslov doku-menta, uključivanje eksternih stilova i script funkcija i informacije o samo Web dokumentutj. meta informacija.

HEAD može da sadrži sledeće HTML elemente:

• BASE - Osnovna adresa dokumenta

• LINK - Povezivanje dokumenata

• SCRIPT - Navođenje klijentskog skript - programskog koda koji Web čitač razume

• STYLE - Definisanje stilova za prikaz

• ISINDEX - Input prompt

• TITLE - Naslov dokumenta

• META - Meta informacije, informacije o samom web dokumentu

8.2.11. BASE element

BASE element navodi osnovnu URL adresu Web prezentacije i pomaže Web čitaču uslučaju određivanja relativnih adresa koje se navode prilikom referenciranja u okviru A

elementa.


Osnovna adresa na osnovu koje se određuju relativne adrese navodi se u atributu HREF.

<BASE HREF="http://www.ZdravaHrana.com">

8.2.12. LINK element

LINK element se koristi za povezivanje HTML dokumenta sa nekim drugim objektom.Prima iste atribute kao i A element. Najviše se koristi za povezivanje eksterne stil šemesa HTML dokumentom.

<LINK REL="stylesheets" HREF="stilovi.css">

Atribut REL koristi se za navođenje odnosa između dokumenta, tj. dokument koji se uvozije šema stilova stylesheets.

Netscape Navigator 4.0 koristi ovaj element za koncept "dinamičkih fontova" tj. povezi-vanje fontova sa HTML dokumentom na sledeći način:

<LINK REL="fontdef" SRC="http://site/path/fontdef.pfr">

Gde je fontdef.pfr dokument koji obezbeđuje fontove. Internet Explorer podržavadinmičke fontove ali kroz W3C standard za šeme stilova.

8.2.13. STYLE element

STYLE element se koristi za definisanje stilova u okviru samog HTML dokumenta. Koristiatribute TYPE da se navede MIME tip za stil šeme tj. "text/css" i TITLE u kome možeda se naslovi definicija šeme stilova.

<HTML>

<HEAD>

<TITLE>Introduction to Style Sheets</TITLE>

<STYLE TYPE="text/css" TITLE="Bright Colours">

BODY { color : white}

P { color : blue;

font-size : 12pt;

font-family : Arial}

H1 { color : red;

font-size : 18pt}

</STYLE>

</HEAD>

<BODY>

...

Po HTML4 specifikaciji ukjučen je i atribut MEDIA u okviru STYLE taga za određivanjemedija na koji se stil primenjuje. Atribut MEDIA ima sledeće vrednosti:

208 Multimedija

• sreen – Izlazni medij je ekran.

• print – Izlazni medij je štampač.

• projection – Izlazni mediji je projektor.

• speech – Izlazni medij je uređaj za sintezu govora.

• all – Koristi sve izlazne medije.

Atribut MEDIA omogućava definisanje različitih stilova za različite medije, pogodni supriliko definisanja strana koje su samo, na primer, za štampanje itd.

8.2.14. SCRIPT element

Ovim elementom možete uključiti klijentski skript, a zadaje se pomoću tagova <SCRIPT>

i </SCRIPT>. Klijentski skript "client-side script" omogućava veću intraktivnost u doku-mentu odgovarujući korsniku na određene događaje.

Na primer, skriptovi se koriste da se proveri validnost unešenih informacija u formularekako bi odmah obavestio korisnika na grešku, bez potrebe slanja informacija preko Inter-neta na Web server. Može da se nalazi i u okviru BODY elementa ali prepručujemo da seSCRIPT blokovi nalazi u okviru HEAD elementa zato što se nalaze iznad elementa kojipozivaju te skriptove u suprotnom Web čitač će izadati grešku.

Pomoću atribut LANGUAGE navodimo jezik koji koristimo za klijentski script, na primer,JavaScript, PHP & VBScript.

<script language=javascript>



</script>

Korišćenjem atributa SRC možete uključiti eksterni skript.

<script language="javascript" src="szw.js">



</script>


8.2.15. BODY element

Sve što se nalazi unutar HEAD tagova ne prikazuje se u Web čitaču. Unutar BODY taganalaze se svi ostali tagovi (inline elementi i block elementi) i naravno sam sadržaj.



<HTML title="Ovo je HTML dokument" lang="sr">

<HEAD>

<TITLE>Naslov dokumenta</TITLE>

</HEAD>

<BODY>

Zdravo, Svete!

</BODY>

</HTML>

Znači prethodni primer na ekranu Web čitača prikazaće:

Zdravo, Svete!

BODY tag sadrži mnoge atribute za kontrolu i format prikaza koji se odnose na ceodokument neki od njih su:

• BGCOLOR - pomoću koga se navodi boja pozadine.

• TEXT - boja teksta.

• LINK - boja linka (kojeg nismo dirali).

• VLINK - boja posećenog linka (na koji smo već kliknuli).

• ALINK - boja aktivnog linka (to je boja koja se prikazuje sve vreme dok je linkaktivan, tj. kliknut).

Boja se unosi kao heksadecimalni broj prema RGB kolornoj šemi, kojoj prethodi znak #.Prva dva heksadecimalna broja se odnose na crvenu, druga dva na zelenu i zadnja dva naplavu (na primer, crvena boja je #FF0000).

<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF

VLINK=#800080 ALINK=#FF0000>

Unapred definisane vrednosti za hiperveze (linkove) su: LINK=plavo, VLINK=ljubičasto,ALINK=crveno.

Unutar BODY taga može se navesti i slika pozadine pomoću atributa BACKGROUND:

<BODY BACKGROUND="pozadina.gif" TEXT=#000000 LINK=#0000FF

VLINK=#800080 ALINK=#FF0000>

210 Multimedija

Slika za pozadinu se ponavlja po širini i visini ekrana koliko puta je potrebno. Pri tometreba birati slike koje su specijalno dizajnirane za tu namenu (da se nebi primećivalanadovezivanja). Slike za pozadinu se nazivaju pločice (tile) - pošto se lepe kao pločice napozadinu ekrana.

Poželjno je da pozadina bude neutralna i da ne umanjuje čitljivost teksta. InterlacedGIF-ove ne treba koristiti za pozadinu. Po nekim autorima, najbolja veličina za pozadinuje 256 bajta. Ukoliko želite da fiksirate pozadinsku sliku tako da se ona ne skroluje kaonormalna pozadinska slika, postavite atribut BGPROPERTIES=FIXED u BODY elementuali preporuka je korišćenje CSS-a:

<BODY BACKGROUND="nazivslike.gif" BGPROPERTIES=FIXED>

8.2.16. Komentar

Između ovih tagova  se unosi komenar. Web čitač ignoriše tekst koji se nalaziunutar ovih tagova. Mogu se nalaziti bilo gde unutar HTML dokumenta, služe za opissloženih stranica. Pazite na razmake tj. <! --. Neki Web čitači podrzumevaju da je >

oznaka za kraj komentara.



Komentar može da se unese i pomoću tagova <COMMENT>:

<COMMENT>Tekst izmedju ovih tagova se ne prikazuje u Web citacu

tako da se izmedju njih moze napisati svasta</COMMENT>

8.2.17. Meta tagovi

Meta elementi se koriste unutar HEAD elemenata, a koriste se za dodavanje informacijakoja nije definisana od strane drugih elemenata. META tagovi služe Web čitaču korisnikada uradi potrebne radnje sa stranom koju učitava, pri čemu se prema strani odnosi kaoprema objektu. Ovim tagovima može se postići, na primer, vreme trajanja strane u kešu(cache) tj. memoriji Web čitača, automatski redirekt (prebacivanje na drugi URL) Webstrane, onemogućavanje pojavljivanja strane u tuđem okviru (frejmu) itd.

Ove informacije koriste i razni serverski programi, kako bi lakše protumačili Web dokument.Rangiranje sajta na pretraživačima često zavisi baš od informacija u okviru ovih taga, aneki pretraživači neće ni uzeti u obzir Web prezentaciju, ukoliko ih nemate. Često su oniuzrok dolaska novih posetilaca na Web prezentaciju, zato ne potcenjujte META tagove.Ali, ni ovde ne treba preterivati. Pre njihovog korišćenja treba obratiti pažnju na svrhusvakog od njih i pažljivo odabrati sadržaj.

Pozabavićemo se sa najinteresantnijim:


HTTP-EQUIV atribut upisuju se HTTP zaglavlje pri prenosu HTML dokumenta na In-ternetu. Za više informacije o HTTP 1.1 specifikaciji trebalo bi pogledati na adresihttp://www.ietf.org/rfc/rfc2616.txt. Atribut NAME koristi se za imenovanje me-ta informacije i ne koristi se zajedno sa HTTP-EQUIV argumenta. A meta informacijunavodimo u okviru atributa CONTENT.

Sledi spisak meta tagova sa HTTP-EQUIV atributom:

Pomoću HTTP-EQUIV="Content Type" navodi se karakter set HTML dokumenta. Reci-mo, kada u HTML dokumentu želite da koristite windows-1250 kodnu stranu koja sadržii naše latinične znake onda otkucajte sledeći META tag:

<META HTTP-EQUIV="Content Type" CONTENT="text/HTML;

charset=windows-1250">

Meta tag sa HTTP-EQUIV="Expires" govori Web čitaču od kada da smatra tu stranu"isteklom". Dakle, ako se korisniku strana već nalazi u keš memoriji, i ima ovaj tag, kojije istekao, Web čitač će od servera da zatraži novu stranicu, i neće koristiti onu iz keša.

<META HTTP-EQUIV="expires" CONTENT="Fri, 21 Jan 2000 14:05:00 GMT>

Meta tag sa HTTP-EQUIV="Refresh" ponovo učitava stranu što omogućuje komu-nikaciju sa serverom tkz. client-pull, ili, ukoliko sadrži URL neke druge strane prosleđujekorisnika na tu stranu. U navedenom primeru, "5" označava vreme u sekundama poslekoga reload/redirekt počinje, a www.svezaweb.com adresa označava adresu na koju bikorisnik bio prosleđen posle 5 sekundi:

<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.svezaweb.com">

Meta tag sa HTTP-EQUIV="Window-target" meta tag određuje ime prozora u kome sepojavljuje stranica. To je korisno kada neko hoće da stavi vašu stranicu u frejm (okvir)na njegovom sajtu, tako da izgleda da je i vaša strana deo sadržaja njegovog sajta.

<META HTTP-EQUIV="Window-target" CONTENT="_top">

Meta tag sa HTTP-EQUIV="Set-Cookie" postvlja kolačić (cookie) u Web čitač. Ukolikomu zadate expires atribut biće snimljen na disk i postojaće sve do dana postavljenimovim atributom, u suprotnom kolačić biće validan samo u toku sesije i biće izbrisan pozatvaranju Web čitača.

<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;

expires=Tuesday, 31-Oct-99 14:32:21 GMT; path=/">

212 Multimedija

Definicije skripta i stila koji se koriste u okviru dokumenta:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Najznačajnji su META tagovi sa NAME atributom, jer imaju najveću ulogu pri prijavlji-vanju Web strana na pretrazivače (search engines). Upravo oni sadrže podatke koje pre-traživači najviše cene (naravno, osim samog sadržaja strane). To su, na primer, ključnereči (keywords) i opis strane (description).

NAME atributi su:

Posle prijave vašeg sajta na pretrazivače, "robot" pretrazivača poseti vašu stranu i pokupipotrebne podatke za indeksiranje. Da bi taj proces bio brži, tj. da robot ne bi skupljaosve ključne reči iz teksta strane, potrebno je navesti meta tag sa sledećim atributomNAME="Keywords". Dok ključne reči sa HTML dokumenta navodite u okviru atributaCONTENT="rec1, rec2, ... ".

<META NAME="keywords" content="web, dizajn, uputstva, HTML,

html, napredni, elementi, meta">

Ovom tagu se obično pridružuje i tag za opis vaše strane:

<META NAME="description" content=" Ova strana sadrzi uputstvo za

koriscenje Osnovnih HTML elemenata. Osnovni elementi su: html,

head i body. Naucite vise o njima i njihovom koriscenju.">

Opisni META tag takođe koriste roboti za pretraživanje, tj. kada vaš sajt bude pronađenprilikom pretraživanja ispod vaše Web adrese pisaće opis koji se nalazi u ovom tagu.Preporučuje se da u okviru opisa ne koristite naša slova.

Još jedan zanimljiv i koristan META tag je za navođenje autora HTML dokumenta:

<META NAME="author" CONTENT="Darone, [email protected]">

Meta tag sa NAME="ROBOTS" govori robotima pretrazivača šta da rade sa dotičnomstranom, a opcije se navodi u okviru CONTENT:

• ALL da indeksira tu stranu, i da indeksira strane koje su povezane linkovima...

• NONE ni jedno ni drugo.


• INDEX samo da indeksira.

• FOLLOW samo da prati linkove.

• NOINDEX da ne indeksira.

• NOFOLLOW da ne prati linkove.

<META NAME="robots" CONTENT="all">

Možete zamoliti pauka (tj. agenti za pretraživanje sadržaja na Internetu) da vam dođeponovo u posetu, kako ne bi lutao mrežom:

<META NAME="revisit-after" CONTENT="14 days">

8.2.18. Atributi

Po HTML 4.0 specifikaciji skoro svi HTML elementi podržavaju jedan skup zajedničkihatributa (Common Attributes) a to su:

• ID

• CLASS

• STYLE

• TITLE

• LANG

• DIR

Ovi atributi omogućavaju lako povezivanje elemenata sa stilovima i skriptovima, defin-isanja lokalnog jezika kao i mnoge skript događaje.

ID atribut

Atribut ID postvlja jedinstveni identifikator za element u dokumentu. Ne mogu postojatidva elementa sa istom vrednošću ID atributa u jednom dokumentu. U sledećem primeruID atribut se koristi da identifikuje koji paragraf je prvi, a koji drugi u dokumentu:

<P ID=prvi>Moj prvi paragraf.</P>

<P ID=drugi>Moj drugi paragraf.</P>

Paragrafi u ovom primeru mogu da se kroz ID atribut povežu sa stilom definisanom u stilšemi (Cascading Style Sheet):

214 Multimedija

P#prvi {

color: navy;

background: transparent

}

P#drugi {

color: black;

background: transparent

}

Takođe ID atribut se koristi da obezbedi jedinstveno ime za HTML element kako bi muse moglo pristupiti kao objektu iz skripta:

alert(prvi.innerText); //Direktno

ili

alert(document.all("prvi").innerText); //Preko kolekcije elemenata

CLASS atribut

Atribut CLASS se koristi za povezivanje elementa sa pravilima definisanim u šemi stilova.Na primer:

<DIV CLASS=navbar>

<P><A HREF="/">Home</A> | <A HREF="./">Index</A> |

<A HREF="/search.html">Search</A></P>

<P><A HREF="/"> <IMG SRC="logo.gif" ALT="SveZaWeb Logo"></A></P>

</DIV>

U ovom primeru koristimo CLASS atribut kako bi povezali stil sa elementom:

.navbar {

margin-top: 2em;

padding-top: 1em;

border-top: solid thin navy

}

.navbar IMG { float: right }

@media print {

.navbar { display: none }

}

STYLE atribut

Atribut STYLE omogućava da se navede stil u okviru samog elementa tj. van okvira šemestilova na primer:


<P>Popularni font za \v citanje preko ekrana monitora je

<SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

Kada se STYLE atribut koristi potrebno je da se postavi style sheet language pomoćuMETA taga na sledeći način:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Preporučuje se upotreba CLASS ili ID atributa za postavljanje stilova u odnosu na STYLEpošto ID i CLASS mogu da se primene na različite medije i obezbeđuju odvajanje sadržajai formatiranja prikaza.

TITLE atribut

Atribut TITLE obezbeđuje naslov za element i implementiran je kao "tooltip" u Webčitačima. Primena ovog atributa mnogo koristi kod referenciranja, slika itd., a koriste gai mnogi pretraživači. Koristite ovaj atribut na svakom mestu.

<A HREF="mailto:[email protected]" TITLE="Posaljte mail autoru

sajta">[email protected]</A>

<A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/

cgi_docs.html" TITLE="CGI.pm - a Perl5

CGI Biblioteka">CGI.pm</A>

<LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr

TITLE="Version francaise"> <OBJECT CLASSID="java:Yahtzee.class"

CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready

to play Yahtzee?" TITLE="My Yahtzee Game">

<IMG SRC="yahtzee.gif" ALT="A Yahtzee animation picture" TITLE="A

Yahtzee animation"> Yahtzee is my <EM>favorite</EM> game! </OBJECT>

LANG atribut

Atribut LANG definiše jezik za sadržaj elementa uključujući i ostale HTML elemente ko-ji se nalaze u njemu, a nije naveden atribut LANG. Ovaj atribut je veoma značajan zapretraživače Interneta.

Vrednosti atributa su definisani prema specifikaciji RFC 1766, evo nekoliko primera: sr

za Srpski, en za Engleski, en−US za Američki engleski.

Korišćenjem LANG atributa omogućava vam i lako menjanje stila sadržaja zavisno odjezika. Osnovni jezik HTML dokumenta se postavlja korišćenjem LANG atributa kodHTML elementa ili korišćenjem Content-Language u HTTP zaglavlju pomoću meta ta-gova.

<html lang="sr">

<head>

<meta http-equiv="Content-Language" content="sr">

</head>

216 Multimedija

8.2.19. Događaji u Web čitaču

Broj atributa koji definišu klijentski skript je zajednički za većinu elemenata. Vrednostatributa je ili poziv funkcije ili pet kratkih komandi koji se izvršavaju pošto se događajdesi.

<INPUT TYPE=submit ONMOUSEOVER=’window.status="Did you fill in all

required fields?";’ ONMOUSEOUT=’window.status="";’>

Kada se koristi atribut za događaj potrebno je da se definiše osnovni script jezik:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

Mogući događaji su sledeći:

• ONCLICK, kada je nad elementom pristisnuto dugme na mišu;

• ONDBLCLICK, kada je nad elementom načinjen dvostruki klik na mišu;

• ONMOUSEDOWN, kada se nad elementom drži pritisnuto dugme na mišu;

• ONMOUSEUP, kada se nad elementom pusti dugeme na mišu;

• ONMOUSEOVER, kada se pređe mišem preko elementa;

• ONMOUSEMOVE, kada se miš pomeri u okviru elementa;

• ONMOUSEOUT, kada se mišem pomeri sa elementa;

• ONKEYPRESS, kada se pritisne tipka nad elementom;

• ONKEYDOWN, kada se drži pritisnut taster nad elementom;

• ONKEYUP, kada se pusti taster nad elementom.

Napomenimo još jednom da su ovi atributi zajednički za skoro sve elemente i da se veomaupotrebljivi jer omogućuju proširenje funkcionalnosti samih Web dokumenata.

8.2.20. Hx elementi - naslovi

U svakom dokumentu potrebno je prvo da definišemo naslov tj. tekst koji se prikazujeslovima većim od standardnih, kako bi bio upadljiviji. Na raspolaganju je šest nivoa nas-lova.

Najveća slova odgovaraju naslovu prvog nivoa <H1>, a najmanja naslovu obeleženomkao <H6>. Ustvari H1 treba da predstavlja naslov knjige, H2 naslov sekcije, a H3 naslovpoglavlja itd., ali HTML standard to ne zahteva.


Pored zajedničkih atributa koristi i ALIGN atribut sa vrednostima: left, right i center.

8.2.21. P element

Pasus (paragraf) se definiše tagom <P>, a sadrži tekst i ostale HTML elemente, osimTABLE i ADRESS elementa. Između pasusa se prikazuje jedna prazna linija. Završni tagje opcioni, ali se preporučuje da ga koristite pogotova, ako povezujete ovaj element sašemom stilova.

Pored zajedničkih atributa koristi i ALIGN atribut sa vrednostima: left, right, center ijustify. U sledećem primeru, tekst u okviru pasusa možemo poravnati sa levom ili desnomivicom ekrana ili pak da ga centriramo, korišćenjem atributa ALIGN.

8.2.22. BR element

Prelazak u novi red vrši se komandom <BR>, skraćenica od Brek Line (prelomi liniju).<BR> tag nema završni tag pošto nema nikakav sadržaj.

Preporuka je da se ovaj tag ipak zatvara (da ne ostaje otvoren), na primer, <br /> zbogXHTML specifikacije.

218 Multimedija

Pored zajedničkih atributa koristi i CLEAR atribut sa vrednostima: left, right, all i none.Atribut CLEAR se koristi kod slika ili tabela da bi novi red započeo ispod ovih elemenata.

8.2.23. STRONG, EM, CITE, DFN, VAR, B, I & U element

Kada treba nešto isticati, a ne predstavlja ni poseban pasus, niti naslov koristimo pode-bljana ili iskošena slova. Za jako isticanje koristimo elementa <STRONG>, Web čitači ovajelemnt prikazuju kao "bold" tj. podebljana slova, ali preko stilova možemo da regulišemoprikaz ovog elementa.

Za slabije isticanje koristimo element <EM>, Web čitač ovaj element prikazuju kao "italic"tj. iskošena slova, ali preko stilova možemo regulisati i prikaz ovog elementa. Ovi elementiprihvataju jedino zajedničke atribute (id, class, style, lang i dir).

Element <b> se više koriste kada je potrebno prikazati samo jedan znak kao podebljan, usuprotnom koristite element STRONG. Dok umesto elementa <i> preporučuje se više dakoristite <em>, <dfn>, <var> ili <cite>, jer ističu više smisao teksta kojeg formatiraju.

Navođenje nekog teksta je obično italic, pa se koristi element <CITE> koji u Web čitačuprikazuje sadržaj tog elementa iskošenim slovima.

Takođe, prilikom definisanja promenjivih u tekstu koriste se iskošena slova pa se zatoumesto <i> elementa koristi <VAR> element.

Napomena: Podvučen tekst treba izbegavati, jer se sa njim označavaju reference kadrugim dokumentima.

Tagovi, kao što smo napomenuli, se ugnježđavaju, a nikad ne ukrštaju:


8.2.24. FONT element

Element <FONT> vam omogućuje da definišete veličinu, boju i tip (font) teksta.

Tag Font sadrži argumente:

• SIZE koji se odnosi na veličinu fonta,

• COLOR koji se odnosi na boju fonta i

• FACE koji se odnosi na tip fonta.

Atribut SIZE prima vrednosti od 1 do 7, a ukoliko se ne navede njegova vrednost je 3.

Najmanje treba definisati dva fonta, uz to treba imati u vidu koji su fontovi najviše zas-tupljeni na računarima i da li u našem slučaju podržavaju naša slova. U opštem slučajuto su: Arial, Times New Roman, Verdana, Tahoma i Courier fontovi.

8.2.25. Center element

Tag <center> služi za centriranje svih elemenata zaključno sa </center>. Element neposeduje atribute.

Centriranje postoji kao atribut u mnogim elementima, na primer, za naslov:

Kod HTML-a nije moguće poravnanje obe ivice teksta, on raspoređuje tekst poravnat salevom ivicom ekrana.

8.2.26. BLOCKQUOTE element

Citati se navode pomoću taga BLOCKQUOTE on može da sadrži i ostale HTML elemente.Pored zajedničkih atributa koristi i CITE atribut u kome se navodi lokacija citata.

220 Multimedija

<blockquote>

Sta ce se desiti ako ovde stavimo novi pasus i novi red pa

pogledajmo kako to izgleda: <p align="right"> Pasus </p>

<p> Pasus 2</p>

<p align="center"> Pasus 3 </p>

<p> Prva linija <br> druga linija <br> treca linija ....

</blockquote>

8.2.27. HR element

Tekstove možemo razdvajati i horizontalnim linijama pomoću taga <hr> (horizontal ruler).

Debljina linje se posatvlja u pikselima pomoću atributa size i ukoliko se ne zada imavrednost 2, širina se zadaje u procentima ekrana, a može i u pikselima atributom width,a boja se zadaje u heksadecimalnom formatu color atributom. Atribut color podržavasamo Internet Explorer.

8.2.28. Povezivanje

Najvažnija osobina HTML dokumenta je ta da se oni mogu međusobno referencirati(povezati tj. da jedan ukazuje na drugi itd.), što je zapravo osobina hiperteksta.


8.2.29. A element

Element HTML koji omogućuje povezivanje HTML dokumenta naziva se Anchor "sidro"i definiše se tagom <A> i </A>. Kako bi se razlikovala od ostatka teksta, veza izmeđudokumenata je obično podvučena i/ili u drugoj boji.

Veza ka drugom dokumentu ostvaruje se navođenjem mesta gde se nalazi referenciranidokument, pomoću atributa href (koji je inače obavezan, a ostali atributi su neobavezni)u a tagu. Referencirani dokument može da se nalazi u istom ili drugom katalogu (direk-torijumu) ili na drugom. Obavezno koristite TITLE atribut.

Veza ka <a href="adresa_drugog_dokumenta" title="Ovo je prica

o vezi ka drugom dokumentu"> drugom </a> dokumentu.

U Web čitaču se pojavljuje podvučena reč "drugom" i ako kliknemo na podvučenu reč,automatski se otvara dokument sa zadate adrese.

Adresa je u opštem slučaju u istom katalogu <a href="primer.htm"> drugom </a> iliu nekom drugom. Pri tome se koristi UNIX sintaksa sa desnim kosim crtama / i gde trebavoditi računa o malim i velikim slovima.

Ukoliko se dokument nalazi u prethodnom direktorijum u odnosu na tekući u kome senalazi i sam dokument referenca glasi:

<a href="../primer.htm">drugom</a>

A ukoliko se dokument nalazi u sledećem podktalogu u odnosu na tekući:

<a href="podkatalog/datoteka.htm">drugom</a>

Ako je referencirana datoteka slika, klik na referencu će prikazati tu sliku na praznomekranu:

Pogledajte <a href="slika.gif">sliku</a> velicine 20kb.

Pri referenciranju dokumenata na drugim računarima, uz korišćenje raznih mrežnih pro-tokola navodi se kompletna URL adresa. Uniform Resurce Locator, skraćeno URL pred-stavalja adresu preko koje se pristupa određenom mrežnom servisu, a sadrži naziv pro-tokola, adresu servera i putanju do dokumenta.

<a href="http://zmaj.etf.bg.ac.rs/Etf/Rc/index.html" > RC ETF BG </a>

222 Multimedija

Pomoću ove komande mogu se pozvati i drugi mrežni servisi (ovi podaci se navode uokvru HREF atributa):

• gopher://galeb.etf.bg.ac.rs/linux/texts/sendmail

• ftp://ubbg/net/internet/netscape/n601.exe

• telnet://afrodita.rcub.bg.ac.rs

• news:soc.culture.rs

8.2.30. Tabele

Tabele sadrže tri glavna elementa. Tag <TABLE>, zatim tag reda u tabeli <TR> i tag ćelije<TD>. Sledi lista tagova i njihovih atributa koji se koriste u izradi tabela.

Atributi taga <TABLE>:

• align - smešta tabelu u levu, centar ili desnu stranu stranice.

• bgcolor - definiše boju pozadine cele tabele.

• border - određuje debljinu ivice tabele u pikselima.

• cellpadding - je nevidljivi prostor između sadržaja ćelije i zida ćelije.

• cellspacing - je prostor između dve ćelije.

• width - definiše širinu tabele u pikselima ili procentima.

Primer koda:

<TABLE align="left" bgcolor="red" border="1" cellpadding="5"

cellspacing="2" width="100%">

Atributi taga <TR>:

• align - smesta sadržaj reda u levo, sredinu ili desno.

• bgcolor - definiše boju pozadine reda.

• valign - smešta vertikalno sadržaj reda gore, sredina i dole.

Primer koda:

<TR align="right" bgcolor="blue" valign="middle">

Atributi taga <TD>:

• align - smešta sadržaj ćelije u levo, sredinu ili desno.

• background - smešta sliku pozadine u ćeliju.

• bgcolor - definiše boju pozadine ćelije.


• colspan - pokazuje preko koliko kolona se proteže ćelija.

• height - određuje visinu ćelije u pikselima

• rowspan - pokazuje preko koliko redova se proteže ćelija.

• valign - vertikalno pomera sadržaj ćelije gore, u sredinu ili dole.

• width - definiše širinu ćelije u pixelima ili procentima.

Primer koda:

<TD align="center" background="pozadina.gif" bgcolor="red"

colspan="2" height="150" rowspan="2" valign="bottom" width="250">

Sada pošto ste upoznati sa osnovnim tagovima i pripadajućim atributima za pravljenjetabela pogledajte par praktičnih primera tabela sa pripadajućim programskim kodom.

224 Multimedija

8.2.31. Obrasci

Web stranice često prikupljaju podatke od korisnika. Obrasci (Forms) omogućavaju dakorisnici pomoću svog čitača unose neke podatke i šalju ih na e-mail, snimaju na serveruili prosleđuju nekoj aplikaciji. Obrasci u sebi sadrže različite vrste polja za unos ili izborponuđenih podataka.

8.2.32. Element FORM

Element (tag) FORM između ostalog pokazuje čitaču gde počinje i gde se završava obra-zac/formular. Unutar početnog i krajnjeg taga se smeštaju elementi za unos podataka(tzv. ulazne kontrole), ali mogu i svi drugi mogući HTML tagovi. Na primer, možemouneti tekst koji objašnjava šta pisati u poljima, slike, linkove itd. Takođe, vrlo često seelementi forme raspoređuju tabelarno, što znači da se i tabele mogu smeštati u formama,itd. Minimalni izgled forme je:

<body>

<form>

</form>

</body>

Ovaj kod naravno nema nikakvu funkciju. FORM tag treba shvatiti kao nevidljivi kontejneru kome se smeštaju elementi forme koji su vidljivi.

Svaka forma može imati svoje ime. Ime forme je neophodno nekim skriptama koje sekoriste u izradi Web stranica, na primer JavaScript skriptama.

<body>

<form NAME="forma1">



</form>

</body>

Obratite pažnju na navodnike u imenu. Vrednosti nekih atributa ne moramo stavljati udvostrukim navodnicima, ali ovde to moramo. Da ne bi razmišljali u kojim to atributimane moraju navodnici a u kojim moraju savetuje se da sve moguće vrednosti svih HTMLatributa smeštate u dvostrukim navodnicima jer tako sigurno nećete nikad pogrešiti.

Kao što smo već napisali, elementi forme su vidljivi i oni sakupljaju podatke. Kad se kliknena submit dugme sve te podatke, iz svih elemenata, forma šalje nekoj skripti na obradu.Definisanje adrese, tj. skriptnog fajla kome se šalju podaci vrši se ACTION atributom kojise smešta u FORM tagu:

<form ACTION="cgi/obrada.cgi">

U vrednost atributa ACTION se dakle stavlja adresa skripte za obradu podataka. Možetepodatke prikupljene iz forme poslati na neku mejl adresu. U tom slučaju bi kôd izgledao:

<form method="post" action="mailto:[email protected]" enctype="text/plain">

Postoje dva metoda prenosa podataka. Zato i u samoj formi ponekad moramo definisatimetodu prenosa podataka. Atribut kojim se definiše metoda prenosa je METHOD. Metodaprenosa podataka nije direktno bitna za samu formi, već za skriptni deo. Za JavaScriptgotovo da i nije bitna, ali na primer za PHP skripte je neophodna. Te dve metode su GET

i POST. Znači ako je potrebno u formi definisati metodu prenosa onda se piše:

<form METHOD="POST">

Ako koristimo sve elemente forme osim element za ubacivanje fajlova (slika, videa, muzikeitd), onda su NAME, ACTION i METHOD argumenti sasvim dovoljni u FORM tagu (osim akošaljete podatke na mejl jer onda je obavezno i enctype="text/plain" kao što je već rečeno).

Pošto postoji očigledna potreba za više različitih načina prikupljanja podataka od korisnika,postoje i različiti elementi za prihvat podataka od kojih svaki ima neke svoje osobine. Nekielementi imaju mogućnost direktnog unosa podataka od strane korisnika, dok mu drugiomogućuju da izabere jednu od ponuđenih vrednosti, neke vidi u formi a neke ne. Sadaćemo se upoznati sa svim tim različitim elementima i njihovim karakteristikama.

Elementi HTML forme:

226 Multimedija

• Element tipa text

• Element tipa textarea

• Element tipa hidden

• Element tipa checkbox

• Element tipa radio

• Element tipa select

• Element tipa submit

• Element tipa reset

Standardno, u okviru svake web forme postoje dva dugmeta: submit (potvrdi) i reset(poništi).

Dugme submit prosleđuje unete podatke Web serveru na obradu. Dugme reset poniš-tava (briše) podatke koje je korisnik uneo, ili ih postavlja na inicijalne vrednosti akopostoje. Oznaka za oba dugmeta je <input> a razlikuje ih atribut type:

<form>

<input type="submit" value="Potvrdi" />

<input type="reset" value="Ponisti" />

</form>

Za unos teksta koristi se oznaka <input> sa atributom type="text".

<input type="text" />

Pošto obično u okviru jedne Web forme postoji više različitih ulaznih kontrola, obavezno sesvakoj dodeljuje jedinstveno ime. Ovo se radi pomoću atributa name="ime_kontrole".Dopunite primer na sledeći način:

<form>

Ime: <input type="text" name="tIme" /><br />

Prezime: <input type="text" name="tPrezime" /><br />



</form>

U kontroli za unos teksta obično se postavljaju još dva atributa – size="x", gde je x brojkaraktera koji definiše širinu kontrole i maxlength="y", gde y predstavlja maksimalnomogući broj karaktera koji se može uneti u kontrolu.

Dopunite kôd:


<form>

Ime: <input type="text" name="tIme" size="10" maxlength="10"/><br />

Prezime: <input type="text" name="tPrezime" size="15"

maxlength="20" /><br />



</form>

Ulazna kontrola radio omogućava korisniku da izabere jednu od ponuđenih opcija. Opcijese međusobno isključuju i obično se postavlja da najčešća od njih bude inicijalno uključena.Atribut type za ovu kontrolu je "radio".

<input type="radio" name="ime_kontrole" valu-e="vrednost_kontrole" />

U našem primeru želimo da znamo da li je korisnik student ili profesor. Pošto ima višestudenata, postavićemo da inicijalno bude označen:

<form>

Ime: <input type="text" name="tIme" size="10" maxlength="10"/><br />

Prezime: <input type="text" name="tPrezime" size="15"

maxlength="20" /><br />

Student:<input type="radio" name="status" valu-e="student"

checked /><br />

Profesor:<input type="radio" name="status" valu-e="profesor" /><br />

<input type="submit" value="Potvrdi">

<input type="reset" value="Poni\v sti">

</form>

Parametar checked znači da će kontrola biti inicijalno označena.

Ime (name atribut) je isti kod obe kontrole što znači da predstavljaju istu grupu - samojedna u okviru grupe može biti označena.

Atribut value, za razliku od ranije, ne označava natpis na kontroli već vrednost koja ćebiti preneta serveru kada korisnik klikne na submit dugme.

Polje za potvrdu je tip ulazne kontrole koji korisniku omogućava odabir jedne ili višeponuđenih opcija, što ovu kontrolu razlikuje od radio dugmadi, kod kojih korisnik može ugrupi odabrati samo jednu od ponuđenih opcija. Atribut type za ovu kontrolu je "check-box". Web čitač ovu kontrolu prikazuje kao prazan kvadrat, koji može biti čekiran.

<input type="checkbox" name="ime_kontrole"

value="vrednost_kontrole" checked >

Vrednost koju vidi korisnik

</input>

Da bismo isprobali ovu i druge kontrole, napravićemo jednu stranicu za prijavu diplomskograda. Prvo ćemo napraviti novu Web stranicu i u nju dodati kontrole koje smo prethodnoopisali.

228 Multimedija

<form>

<h1>Prijava diplomskog rada</h1>

Ime i prezime: <input type="text" name="tImePrezime" size="30"

maxlength="50"/>

<br />

Naziv teme: <input type="text" name="tTema" size="30"

maxlength="50" />

<br />

<br />

<input type="submit" value="Prijavi">

<input type="reset" value="Ponisti">

</form>

Ulazna kontrola select služi za kreiranje tzv. padajućih listi, koristi se u kombinaciji saOPTION tagom kojim se određuju stavke u listi. Ako želimo da omogućimo izbor višeopcija mora se navesti svojstvo multiple.

<p> Govorim:

<select multiple>

<option value="it" selected> italijanski </option>

<option value="eng" selected> engleski </option>

<option value="ru" selected> ruski </option>

</select>

</p>

Ulazna kontrola textarea predstavlja tip ulazne kontrole, koja korisniku omogućava unosviše linija teksta ili informacija. Obavezno je definisanje rows i cols atributa, jer oni od-ređuju veličinu kontrole (broj redova teksta i broj kolona u svakom redu). Ovi atributi neograničavaju dužinu teksta za unos, već samo opisuju veličinu definisane kontrole. Ukolikoje zbog veličine unešenog teksta neophodno, pojavljuju se skrolbarovi. Atribut wrap savrednošću virtual nije obavezan, a stavlja se ukoliko ne želite da se pojavljuje horizontalniskrolbar.

<textarea name="ime_kontrole"

rows="visina kontrole u redovima"

cols="sirina kontrole u kolonama"

wrap="virtual">

inicijelni tekst koji vidi korisnik

</textarea>

Ulazna kontrola hidden definiše nevidljivo ulazno polje čija će vrednost biti poslata sadrugim vrednostima iz formulara kada se ovaj pošalje ka serveru kao, na primer, sledećiformular:

<FORM>

<input type=hidden name=ident value="08100-BGD-3088">

</FORM>


Multimedija

Najnovija HTML specifikacija omogućava da se skoro sve može uključiti u HTML doku-ment kao, na primer, Java apleti, ActivX kontrole, muzički fajlovi i drugi objekti. Ubaci-vanje ne tekstualnih medija u dokument datira još iz HTML 2.0 kada je omogućenoubacivanje slika pomoću <IMG> elementa.

IMG element

Element <IMG> drugi je po važnosti element (posle anchor elementa) jer Web ne bi biodanas to što jeste da nema slika.

Preporuka je da se .GIF format koristi za ikone, a .JPG za skenirane slike u istom ilinekom drugom katalogu. Treba biti umeren oko broja i veličine slika jer znatno utiču nabrzinu učitavanja sajta.

Pored gore navedenih atributa IMG tag podržava i zajedničke atribute.

Obavezno pri unosu slika unesite i njihovu širinu (WIDTH) i dužinu (HEIGHT) jer ubrzavaučitavanje tako što Web čitača ne mora da troši vreme na izračunavanje tih podataka.Pored toga najvažniji atribut je ALT koji ispsuje tekst umesto slike dok se ona ne učita(vrlo korisno ako se slike koriste kao reference ka drugim dokumentima).

Ako se slika nalazi u drugom katalogu treba navesti relativnu putanju:

<img src="../slike/slika.gif" width=161 height=151 border=1

alt="autor">

Reference ka slikama na drugom računaru izbegavajte zbog brzine i efikasnosti rada. Slikese veoma lepo koriste za referenciranje drugih dokumenata ako se između krajeva referencina drugom dokumentu stavi prikaz slike, klikom na sliku dobija se referencirani dokument.

<a href="../index.htm"><img src="../slike/slika.gif" width=161

height=151 border=0 alt="Bla .. bla "></a>

Pomoću BORDER atributa zadajemo okvir slike u pikselima, ukoliko je slika referenciranakao u prethodnom primeru poželjno je da border bude postavljen na nulu da se ne bipojavio plavi okvir oko nje koji ukazuje da je slika referncirana na neki dokument.

230 Multimedija

Atributom ALIGN možemo da postignemo da se tekst pojavljuje sa leve ili desne straneslike. ALIGN ima vrednost left, right, middle, top i bottom.

Ako je poravnavanje ulevo, slika ide na levu stranu a tekst desno od nje. Prilikom po-ravnavanja udesno slika se prikazuje na desnoj ivici ekrana, a tekst ide u levo. PomoćuMIDDLE vrednosti atributa ALIGN centriramo sliku unutar linije sa tekstom.

Atributima VSPACE i HSPACE kontrolišemo vertikalni prostor iznad i ispod slike tj. hori-zontalni ispred i iza slike. Vrednosti se postavljaju u pikselima. Ovo je dobro ukoliko sevrši poravnavanje teksta sa slikom, jer omogućava razdvajanje teksta i slike.

Ponekad je potrebno stavljanje velike količine slika na Web (katalozi proizvoda) koje pred-stavljaju kvalitetne fotografije pa im je veličina poveća. Stoga se vrši pravljenje umanjenihsličica (thumbnail) koje predstavljaju linkove ka orginalima – male slike su obično dovoljneda se sazna o čemu se radi.

EMBED

EMBED element omogućava ugrađivanje objekata bilo kog tipa u HTML dokument, pritome korisnik mora posedovati aplikaciju na svom sistemu koja omogućava pregled datihobjekata, ili da poseduje plug-in za pregled datih objekta.

<EMBED SRC="_URL_">

<NOEMBED>Alternative content</NOEMBED>

</EMBED>

<EMBED> element je sličan <IMG> elementu pa nasleđuje iste atribute kao što su ALIGN,ALT, BORDER, WIDTH, HEIGHT, HSPACE, VSPACE i NAME (za referenciranje ugrađenog ob-jekta kroz skript).

Mnogi atributi ovog elementa zavise od dodatka (plug-in), ali poseduje i standardne atri-bute za rad sa dodacima:

Za ubacivanje VRML datoteka jednostavno u okviru taga referencirate datu datoteku:

<EMBED SRC="../Media_Embedding/example.wrl" WIDTH="200" HEIGHT="150">

Web čitači će da povežu datu datoteku sa dodatkom koji omogućava pregled VRML-a.


BGSOUND

<BGSOUND> element omogućava da se pušta muzika u .WAV, .AU i .MID format. Muzičkifajl koji želimo da pustimo navodi se kao vrednost atributa SRC.

<BGSOUND SRC="start.wav">

Pomoću atributa BALANCE podešavamo jačinu zvuka stereo balance i poprima vrednostiizmeđu −10 000 i 10 000.

Atributom LOOP podešavamo koliko se puta ponavlja muzička numera. Ukoliko se LOOP

atribut postavi na −1 ili INFINITE muzička numera se non stop vrti.

Atributom VOLUME podešavamo jačinu između −10 000 i 0, pri čemu je 0 maksimalnajačina tj. jačina će biti 100% prema podešavanju jačine zvuka na korisnikovom sistemu.

<BGSOUND SRC="../Dynamic_Documents/clouds.mid">

Ovaj element podržava samo Internet Explorer, ali isti efekat se postiže korišćenjem EMBED

elementa.

<EMBED SRC="../DynamicDocuments/clouds.mid" HIDDEN="True">

8.3. XHTML

XHTML (eXtensible HyperText Markup Language) nastao je sa ciljem da reši problemekoje je HTML zajedno sa Web čitačima doneo. XHTML je identičan sa HTML 4.01 i vraćaHTML prvobitnoj nameni, a to je struktuiranje Web dokumenata. XHTML je definisankao XML (eXtensible Markup Language) tj. svi elementi iz HTML 4.01 kombinovani sasnitaksom XML-a. XHTML 1.0 je oficijalna preporuka W3C od 26. januara 2000. godine,te predstavlja standard za kreiranje Web dokumenata.

XHTML je svojevrsni pogled na HTML kroz oči strogo definisanog XML-a. Pritom, svapravila definisana u XML-u primenjena su na jezik HTML. Rezultat je XHTML – jezik zaopis Web stranica, strogo definisanih sintaktičkih i strukturnih pravila.

Uvođenjem XHTML-a, radi se na odvajanju prezentacije od sadržaja, dok je HTML,osim za opis sadržaja, često bio korišćen i za prezentaciju (grafičko oblikovanje sadržaja).XHTML stavlja veći naglasak na standarde i ispravno oblikovane dokumente, koji će semoći ispravno prikazivati na svim platformama (desktop, laptop, PDA, mobilnim i sličnimuređajima).

U primeni na webu, XHTML ne bi imao velik značaj da ne podržava usku integraciju satehnologijom CSS (Cascading Style Sheets) koja omogućuje izradu prezentacijskog slojaWeb stranice. Iako XHTML stranici nije potrebno pružiti CSS definicije kako bi ista bilasintaksno ispravna, svakako se preporučuje da ih dodate jer će u protivnom svaki čitačXHTML sadržaj prikazati prema svojim unapred definisanim postavkama.

CSS takođe omogućuje definisanje zasebnih stilova prikaza Web stranice za prikaz narazličitim medijima – računarskom monitoru, elektronskom projektoru, PDA uređaju, ispis

232 Multimedija

sadržaja na štampaču i dr. Uz navedenu funkcionalnost, omogućeno je da se izgled (pre-zentacija) Web stranice, neretko i znatno promeni u zavisnosti od medija na kom je istupotrebno prikazati.

Kod kvalitetno dizajniranih korisničkih interfejsa na Webu koja koriste XHTML i CSS, upotpunosti je odvojen sadržaj Web stranice od prikaza iste (prezentacijski sloj). Trebalobi XHTML-om opisivati samo elemente sadržaja i hijerarhijske strukture stranice, pritomizostavljajući opisne atribute koji bi definisali kako taj podatak prikazati u čitaču.

8.3.1. Mane HTML-a

HTML je bar u početku sadržao jednostavnu sintaksu, koja je godinama rasla. Ta jed-nostavnost se pretvorila u najveću noćnu moru. Ne mogu da se stvore sopstvene oznakekoje označavaju semantičke odnose unutar sadržaja, jer HTML nije proširiv. Prilikomautomatske, pouzdane razmene podataka HTML ne pomaže. Nedostaje podrška struktureu HTML i proveravanje sintakse. Web stranice se stalno pomeraju, a webmaster-i nemogu da idu u korak sa promenama URL-ova, tj. problem je što HTML nema koncepcijucentralne baze linkova.

Mnoge stranice na Internetu sadrže loš HTML. U sledećem primeru videćemo loš HTMLkôd, ali koji će raditi u Web čitačima, iako se ne drži HTML pravila:

<html>

<head>

<title>Ovo je los HTML</title>

<body>

<h1>Los HTML

</body>

XML je markerski jezik u kome sve mora da se markira ispravno. XML je napravljen daopiše informacije, a HTML da ispisuje te informacije. Danas postoje različiti Web čitači,neki prikazuju Internet na računaru, a neki na mobilnim telefonima i PDA uređajima. Tidrugi Web čitači nemaju resursa da interpretiraju "loš" markerski jezik, ali XHTML je tuda premosti tu manu kombinujući snagu HTML i XML kako danas, tako i u budućnosti.

8.3.2. Razlike

XHTML strane mogu biti gledane na svim uređajima koji podržavaju XML. XHTMLpredstvlja sledeću generaciju HTML. U suštim XHTML nije toliko različit od HTML 4.01,i ukoliko ste prebacili vaš HTML kôd na ovaj standard, neće vam biti teško da pređete naXHTML.

Odmah sad započnite da HTML kod pišete malim slovima i sve elemente zatvarajtezavršnim tagom, pogotovo mislim na paragraf </p> i elemente liste </li> kod kojih jezavršni tag opcioni.

Pogledajmo razlike između XHTML i HTML-a i neka osnovna pravila.


Ugnježđavanje

Kao prvo svi XHTML elementi moraju biti ispravno ugnježđeni:

Dokument mora biti pravilno struktuiran

Svi XHTML elementi moraju biti unutar <html> tj. osnovnog elementa. Svi ostali ele-menti mogu da imjau svoje podelemente (decu). Elementi koji sadrže podelemente, tj.decu nazivaju se roditelji, na primer, <html> je roditelj za sve ostale elemente. Decamoraju da budu u paru i pravilno ugnježđeni sa roditeljem. Osnovna struktura dokumentaje:

<html>

<head> ... </head>

<body> ... </body>

</html>

Imena elementa u tagovima moraju biti pisana malim slovima. Zato što je XMLcase-sensitve tj. osetljiv je na znakove, ili pišete sve malim ili sve velikim. Ispravno jesamo <html> dok je <HtML> neispravno, tj. tag <li> je različit od <LI>.

Svi elementi moraju imati svoj početni i završni tag. Ispravno je samo napisanasledeća konstatacija <p>Ovo je paragraf</p>, dok <p>Ovo je paragraf je neisprav-no.

Prazni elementi moraju biti zatvoreni. Prazni elementi tj. elementi koji ne sadrženikakav sadržaj moraju biti zatvoreni. Prazni elementi započinju sa početnim tagom imoraju da se završavaju sa />.

Atributi u tagovima moraju biti pisani malim slovima. XML je case-sensitive, tj.osetljiv je na znakove. Zato je ispravno napisati samo <table width="100%">, dok je<table WIDTH="100%"> neispravno.

Vrednosti atributa obavezno se pišu pod navodnicima. I ovde je ispravno je samo

234 Multimedija

napisati <h1 align="center">, dok je <h1 align=center> neispravno.

Nije dozvoljena minimizacija atributa:

Evo liste minimiziranih atributa u HTML-u i kako oni treba da se pišu u XHTML:

Normativa

Postoje elementi kojima je zabranjeno da sadrže pojedine elemente, tj.

• a – ne sme da sadrži druge a elemente.

• pre – ne sme da sadrži img, object, big, small, sub ili sup elemente.

• button – ne sme da sadrži druge input, select, textarea, label, button, form, fieldset,iframe ili isindex elemente.

• label – ne sme da sadrži druge label elemente.

• form - ne sme da sadrži druge form elemente.

Script i Style elementi

Pošto unutar script i style elemenata se nalazi ne-XML sadržaj, pa bi se znak manjetretirao kao < i skript ne bi radio. Tada se takav ne-XML sadržaj postavlja unutarCDATA elementa, kako se ne bi vršila data konverzija.

<script type="text/javascript">

<![CDATA[

... unescaped script content ...

]]>

</script>

Atribut "id" zamenjuje "name" atribut. U HTML 4.01 definisan je atribut name zaelemente a, applet, frame, iframe, img i map, a u XHTML on je isključen i umesto njegakoristi se id atribut.

Lang atribut

Atribut lang primenjuje se na skoro svaki XHTML element i navodi jezik sadržaja unutarelementa.

<div lang="no" xml:lang="no">Heia Norge!</div>

8.3.3. Osnove XHTML dokumenta

Svaki XHTML dokument započinje sa DOCTYPE deklaracijom, što predstavlja definicijustrukture dokumenta u vidu DTD-a (Document Type Definitions).

Minimalna osnova XHTML dokumenta:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Virtual Library</title>

</head>

<body>



<p>Moved to <a href="http://example.org/">example.org</a>.</p>

</body>

</html>

1. Osnovni element mora biti html.

2. Osnovni element mora da poseduje deklaraciju namespace-a, tj. da definiše datuadresu http://www.w3.org/1999/xhtml.

3. Mora da započinje sa DOCTYPE deklaracijom koja referencira na jednu od tridefinisane definicije tipa dokumenta, tj. DTD.

236 Multimedija

8.3.4. Deklaracija

DOCTYPE deklaracija nije XHTML element i nema svoj završni tag. Deklaracija morauvek da se nalazi u prvoj liniji XHTML dokumenta i nosi tip DTD-a, tj. tip definicijedokumenta.

DTD specificira sintaksu Web strana u SGML-u, kao na primer, HTML, gde su navedenapravila o primeni markera na određeni tip, uključujići set elemenata i deklaracije entiteta.Znači, DTD definiše strukturu dokumenta, odnosno, sâm XHTML i njegovo značenje.Primer DTD-a je HTML specifikacija koja definiše značenje HTML elemenata koju Webčitači koriste kako bi prikazali Web stranicu. Inače bi svaki Web čitač tumačio HTML nasvoj način.

XHTML DTD omogućava sintaksu i gramatiku XHTML markera, a koristi se za validacijusamog dokumenta. Postoje tri deklaracije: Strict, Transitional i Frameset. Najpopularnijaje XHTML Transitional.

XHTML 1.0 Strict

Strict DTD uključuje definicuju elementa i atributa za strukturu HTML dokumenata bezelemenata i atributa formatiranja sadržaja, a ne sadrži definiciju okvira (framesets):

<!DOCTYPE html



Ova deklaracija se koristi kada imate čist kôd i želite da izbegnete greške, a koristite CSS(Cascading Style Sheets).

XHTML 1.0 Transitional

Transitional DTD uključuje sve elemente i atribute, bez definicije okvira:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ova deklaracija se koristi kada koristite sve prednosti HTML-a i kada želite da podržiteWeb čitače koji ne razumeju CSS.

XHTML 1.0 Frameset

Frameset DTD uključuje sve što i prethodni plus okvire:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Ovu deklaraciju upotrebljavate kada koristite HTML okvire za deljenje prozora Web čitačana dva ili više okvira.


8.3.5. Validacija XHTML sa DTD

Prethodno opisanim radnjama pretvorite vaš HTML u XHTML. Da bi izvršla validacijaXHTML dokumenta potrebno je referencirati odgovarajući DTD fajl. W3C validator senalazi na adresi http://validator.w3.org/.

Pomoću programa HTML TIDY možete automatski prebaciti kod iz HTML u XHTML.Program HTML TIDY autora Davea Raggetta je besplatni program za validaciju i čišćenjeHTML koda. Omogućava i čišćenje nepotrebnog koda kojeg unose razni HTML editori irazni drugi alati, na primer, Microsoft Word. Program zamenjuje složene atribute fontovastilovima i uvlači oznake radi bolje čitljivosti. Program je veličine 136 kilobajta i koristi seiz komandne linije. Program se može preuzeti sa www.w3.org/people/raggett/tidy

strane.

I na kraju sledi jednostavan XHTML dokument:

<!DOCTYPE html



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sr" lang="sr">

<head>

<title>Jednostavan dokument</title>

</head>

<body>

<p>Jednostavan paragraf</p>

</body>

</html>

Ukoliko započinjete kreiranje Web prezentacije rukovodite se ovim pravilima radi standar-dizacije i kreiranja čistog koda.

8.4. Dinamički HTML – DHTML

Većina današnjih internet stranica su izrađene u većoj ili manjoj meri korišćenjem di-namičkog HTML-a (u nastavku teksta – DHTML). Iako bi se po samom nazivu dalozaključiti da je reč samo o novijoj tj. naprednijoj verziji jezika HTML, DHTML predstavljaipak nešto drugo. DHTML je samo oznaka da se pri izradi Internet stranica koristi neko-liko tehnologija. To je zapravo ideja o tome koje (već postojeće) jezike i na koji način ihkoristiti pri izradi stranica. Ti jezici su:

• HTML;

• CSS;

• skriptni jezik: JavaScript, VBScript.

Ovde je važno pomenuti i Document Object Model (skraćeno DOM). DOM ne predstavljaneki konkretan jezik, već je to model po kom se u HTML-u stranica gradi od objekata.

238 Multimedija

On je bitan, jer predstavlja vezu između HTML-a koji sadrži objekte i CSS-a i skriptnogjezika koji tim objektima na neki način upravljaju, tj. dodeljuju ili menjanju objektima uHTML-u neka svojstva.

Ispravnom upotrebom i kombinacijom jezika koji sačinjavaju DHTML pružaju se velikemogućnosti za manipulisanje stranicama. Vredi istaći par najvažnijih (u zagradi je nave-deno koji od jezika omogućava pojedinu opciju):

• interakcija s posetiocem stranice (JavaScript),

• mogućnost prilagođenja stranica ljudima s posebnim potrebama (CSS),

• menjanje izgleda stranice nakon učitavanja – "živi" elementi (JavaScript) i

• lakše održavanje, tj. izmena izgleda stranica (CSS).

Slika 8.2. Grafički prikaz odnosa klijentskih Web tehnologija

8.4.1. Statičke i dinamičke stranice

Osnovni HTML dokumenti su statični; prikaz u pretraživaču se ne menja ukoliko nekliknete na link za drugu stranicu. Jezik JavaScript, predstavljen prvi put 1995. go-dine u Netscapeu 2.0, uneo je revoluciju u Web stranice time što ih je učinio dinamičkim.Sa JavaSciptom su došle forme koje se dinamički ažuriraju i upozoravaju nas ako une-semo pogrešne podatke, grafika koja se menja kada pređete mišem preko nje, i dosadneskrolujuće poruke u statusnoj liniji. Dok JavaScript daje život statičkom HTML-u, on nečini da cela Web strana bude dinamička – skriptovi mogu da menjaju grafiku, statusnuliniju ili forme u realnom vremenu, ali ne postoji način da se promeni zaglavlje na vrhustrane ili neki manji deo teksta u okviru stranice.

DHTML uklanja ova ograničenja. Upotrebom DOM-a, skript može da modifikuje bilokoji deo stranice – bilo koju reč, link ili čak celu stranicu. Da biste ovo postigli možeteda koristite isti JavaScript jezik sa novim objektima koji su dostupni uz DOM.


Kao primer koji pokazuje moć DHTML-a, pomislite na grafiku koja se menja kada jepokazivač miša nad njom – danas su ovakve stvari rasprostranjene na Webu. To se postižeupotrebom JavaScripta koji zamenjuje jednu sliku sa drugom. Upotrebom DHTML-amožete da primenite istu mogućnost na tekstualne menije. Reči u meniju mogu dinamičkida menjaju boju, stil ili font.

Pomoću CSS-a i DHTML-a možete da odredite tačnu poziciju objekta u prozoru pretraži-vača, dok ovo nije moguće učiniti upotrebom HTML-a. Takođe, možete dinamički damenjate poziciju objekta čime se omogućava animacija.

DHTML animacija je korisna za igre i specijalne efekte, ali može biti korišćena i u stan-dardnim stranicama – meniji mogu da klize po ekranu kada se aktiviraju ili tekst može dase kreće preko ekrana da bi skrenuo pažnju.

Kada se DHTML prvi put pojavio u pretraživačima verzije 4.0, bio je usmeren na koncepteslojeva – delovi unutar Web stranice koji mogu da budu sakriveni, pokazivani ili pomeranidinamički. Iako su Netscape i Internet Explorer podržavali dosta različitih metoda zaupotrebu slojeva, oni su i dalje bili veoma popularni elementi dinamičkih sajtova. Iako noviDOM dozvoljava dinamičku kontrolu nad svim elementima na stranici u pretraživačimakoji ga podržavaju, slojevi i dalje predstavljaju pogodan način rukovanja sa delovima nastranici, kao što su meniji.

CSS (Cascading Style Sheets) menja način upotrebe teksta na Webu. Sada postoji stan-dardan i precizan način kontrole fonta, veličine, boje i pozicije teksta u okviru Web stra-nica. Iako sa regularnim HTML-om možete, do neke mere, da kontrolišete izgled teksta,proizvod toga je kompleksan HTML koji nije standardan i može da "sruši" neke pretraži-vače. Sa CSS-om, možete da kontrolišete izgled stranice na standardan način, a starijipretraživači će biti u stanju da prikažu taj dokument bez prednosti CSS-a. Takođe, dabiste tekst učinili dinamičnim, možete da koristite DHTML. Možete podesiti da tekstbledi i da se vraća u normalno stanje, možete da ga pomerate po ekranu, da mu menjateveličinu, boju ili font, na komandu.

8.4.2. DOM

Kao što je prethodno rečeno, DOM predstavlja izuzetno bitan faktor u DHTML-u. Prevodbi za Document Object Model bio objektni model dokumenta. Upravo se iz imena moževideti čemu on služi. Kao prvo, reč je o modelu, tj. definisanju strukture HTML doku-menta. Prilikom definisanja strukture HTML dokumenta postavljaju se sledeća pitanja:

• Koji sve tagovi postoje na stranici?

• Koliko ih ima?

• Na koji način su poređani?

• Koja su svojstva tih tagova?

• Na koji se način elementi tih tagova prikazuju na stranici?

240 Multimedija

DOM daje odgovor na ova pitanja. On izražava strukturu HTML dokumenta na univerza-lan, sadržajno nezavisan način. Postoji više nivoa DOM-a koji se međusobno razlikuju poobjektima koje sadrže kao i mogućnostima menjanja svojstava i prikaza tih objekata.

DOM nivo 0

Kada ga je Netscape prvi put predstavio, JavaScript je uključivao hijerarhiju objekata podimenom DOM, a još više objekata je dodato u Netscapeu 3.0. Iako nisu bili standardi-zovani, ipak su bili podržani od strane Microsofta koji je razvijao nove verzije InternetExplorera.

Ako ste koristili JavaScript za upravljanje statusnom linijom, prozorom, formom ili slikama,onda ste sigurno koristili ovaj jednostavan DOM. Ovi objekti su se nezvanično nazivaliDOM nivo 0, iako nisu bili W3C standard.

DOM nivo 1

W3C je otišao korak napred i kreirao standardnu hijerarhiju DOM objekata koji su nazvaniDOM nivo 1. Ova preporuka W3C-a je uključivala osnovne nivo 0 objekte koji su većbili podržani od strane oba popularna pretraživača. Nivo 1 sadrži objekte koji dozvoljavajuupravljanje sa bilo kojim delom Web stranice. Oni obezbeđuju iste osobine, kao i dodacikoji su specifični za svaki pretraživač, ali na standardan način. Posle mnogih protestaWeb dizajnera, koji su imali mnogobrojne glavobolje zbog višestrukih DOM standarda,Netscape i Misrosoft su odlučili da podrže W3C DOM standard. Netscape 6.0 i InternetExplorer 5.0 su bile prve verzije koje su podržavale standardni DOM.

DOM nivo 2

W3C je nastavio sa radom na DOM specifikaciji i kao preporuku dao DOM nivo 2. Nivo2 dodaje brojne osobine, uključujući mogućnost menjanja stilova (definisanih CSS-om)dinamički na standardan način.

DOM u nivou 3 se, uglavnom, fokusira na podršku za XML.

Glava 9

Uvod u CSS

CSS (Cascading Style Sheets) je specifikacija koja služi za definisanje stilova koji određujuizgled nekog HTML elemenata (fontovi, boje, pozicija, dimenzija...). Ti stilovi se čuvajuili u eksternim fajlovima sa ekstenzijom .css , ili su interni gde se vezuju samo za jednustranicu kojoj pripadaju ili se pišu inline, tj. u okviru taga samog elementa.

Web dokument može da se sastoji od tri sloja – sadržaj, prezentacija i ponašanje. Slojprezentacije definiše kako će izgledati sadržaj kada mu korisnik pristupi. Konvencionalninačin je da se sadržaj razgleda Web čitačem ali postoje i drugi načini pristupa. Na primer,sadržaj može da se konvertuje u sintetizovani govor za korisnike koji su slabovidi ili imajuprobleme sa čitanjem.

Slika 9.1. Slojevi Web dokumenta

CSS stilovi pružaju dizajnerima dve ključne prednosti. To je, najpre, precizno razdva-janje forme od sadržaja, pri čemu naznačavanje teksta odražava logičku strukturu in-formacija, a dizajner ima slobodu da odredi kako će koji HTML tag izgledati. Drugapogodnost je efikasna kontrola velike količine dokumenata, jer se izmenom jedne da-toteke koja sadrži opise stilova, automatski menja dizajn proizvoljnog broja Web stranica.Stilovi omogućavaju veću kontrolu sa manje koda, što ubrzava proces izrade i održavanjaprezentacija. Da bismo u standardom HTML-u oblikovali svojstva elementa <h1> koji senajčešće koristi za naslove, koristićemo nešto nalik na:

242 Multimedija

<h1 align="center">

<font face="Verdana, Helvetica,Arial, sans-serif" size="6"

color="gray">Naslov odeljka</font></h1>

Ovakvo formatiranje ima lokalni domet i odnosi se samo na tekući pasus označen tagom<h1>; svaki sledeći naslov morao bi da bude oblikovan na isti način. Ako svojstva ovogpasusa definišemo stilom, tj. skupom pravila za formatiranje, stil utiče na sve instanceelementa <h1> u svim dokumentima na koje se taj stil odnosi. Da bi se to ostvarilo po-trebno je da HTML stranice u svom zaglavlju, negde između oznaka <head> i </head>,sadrže nešto poput

<link rel="stylesheet" href="stilovi.css" type="text/css">

U ovom slučaju radi se o spoljašnjim kaskadnim stilovima. Iako stilove možemo da defi-nišemo u okviru jedne Web stranice ili lokalno, za jedan tag, centralizovano upravljanjemoguće je samo ako opise stilova izdvojimo u zasebnu datoteku. Radi se o najobičnijemtekstualnom fajlu (u našem primeru stilovi.css) koji sadrži i sledeći segment:

h1 { text-align: center;

font-size: 16pt;

font-family: Verdana,

Helvetica, Arial,

sans-serif; color: gray;}

CSS je predstavljen kao skup pravila, koja se pišu na sledeći način:

selektor

{

atribut1: vrednost1;

atribut2: vrednost2;

}

Selektor može biti HTML element, stil klasa, kao i pseudo klasa ili pseudo element.

9.1. Dodavanje CSS u HTML stranu

CSS stil se može dodati u Web stranu korišćenjem sledećih načina:1. inline (definicija stila se vezuje za pojedinačni HTML element preko HTML atributastyle):

<html>

<head>

<title>Primer za inline CSS stil</title>

</head>

<body style="background-color: #c0c0c0;">

<p>Ova strana ima sivu pozadinu.</p>

</body>

</html>

Uvod u CSS 243

2. ugrađivanjem (interni stil - definicije stilova su sastavni deo HTML dokumenta,dodaju se u <head> deo dokumenta pomoću taga <style>):

<html>

<head>

<title>Primer za ugradjivanje CSS stila</title>

<style type="text/css">

body {background-color: #c0c0c0;}

</style>

</head>

<body>

<p>Strana sa sivom bojom pozadine.</p>

</body>

</html>

3. povezivanjem (eksterni stil - definicije stilova su u odvojenom CSS dokumentu):

<html>

<head>

<title>Primer povezivanja eksternog CSS-a

</title>

<link rel="stylesheet" type="text/css" href="stil.css" />

</head>

<body>

</body>

</html>

Navedeni načini za kreiranje stila mogu biti istovremeno definisani za jednu Web stranui/ili njene pojedinačne elemente. U takvom slučaju, kreira se novi "virtuelni" stil, koji seprimenjuje sledećim redosledom: 1 – eksterni, 2 – interni i 3 – inline.

Način primene je kaskadni – stil na nižem nivou prekriće stil na višem nivou, odnosno,inline stil ima najveći prioritet, što znači da će prekriti stil definisan unutar <head> taga,a stil, definisan unutar <head> taga, prekriće stil definisan u posebnom CSS dokumentu.

Slika 9.2. Kaskadni način primene stilova

244 Multimedija

9.2. CSS "kutije"

Stilovi (CSS) uz pomoć HTML <div> elemenata nude veću kontrolu prikaza stranice. Sanjima možemo neki sadržaj pozicionirati bilo gde na stranici uz preciznost u pikselima. Bilokoji sadržaj se može staviti unutar <div> elemenata i onda oblikovati uz pomoć stilova.Može se menjati bordura, pozadina, veličina i pozicija elementa na stranici. U ovomslučaju, tabele su potrebne samo u svojoj osnovnoj formi - za prikaz skupa numeričkihpodataka.

Ovi odeljci su kao mini stranice i često se nazivaju CSS kutije (CSS boxes). To su fun-damentalni gradivni blokovi kada su u pitanju Web stranice i raspoređivanje elemenata nanjima.

CSS kutije imaju širinu (width) i visinu (height), boju podloge (background colour) iličak sliku pozadine (background image) koja može da se ponavlja i tako formira mustru.Podrazumeva se da se CSS kutija proteže od leve margine do desne margine tela stranice.Ukoliko niste specificirali margine tela stranice, to će biti puna širina prozora čitača. Akone specificirate visinu CSS kutije, ona je neće imati. Ako stavite neki tekst u kutiju, onaće se raširiti po vertikali da se prilagodi tom tekstu - ili slici. Da biste tekst odmakli odivice kutije možete dodati tzv. padding (uvlake).

Slika 9.3. Uvlake

Primer koda:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Leva uvlaka</title>

</head>

<body>

<DIV style="padding-left:100px;">Ovaj red (kutija) ima levu

uvlaku od 100 piksela.</DIV>

</body>

</html>

Uvod u CSS 245

Slika 9.4. Prikaz u Internet Exploreru

Morate biti pažljivi kod korišćenja paddinga zato što on funkcioniše potpuno drugačije uMicrosoft Internet Exploreru nego kod drugih čitača. Za razliku od prikazane slike, IEstavlja padding unutar kutije, tako da njena visina i širina ostaju iste. Svi drugi čitačistavljaju paddding izvan kutije, dodajući ga na visinu i širinu. Prema tome, veličina kutijeće se menjati u zavisnosti od toga koji se čitač koristi za pregledanje stranice i to možestvoriti potpuno nepredviđene rezultate ako vaš layout zavisi od preciznih pikselskih mera.

Pored paddinga, možete definisati i granicu (border).

Slika 9.5. Granica

Primer koda:




<head>


<title>Dvostruka bordura</title>

</head>

246 Multimedija

<body>

<DIV style="width:300px; border-style:double">Oko ove kutije je

dvostruka bordura.</DIV>

</body>

</html>


Da biste odvojili jednu kutiju od druge, možete im dodeliti margine.

Slika 9.7. Margine

Primer koda:




<head>

Uvod u CSS 247


<title>Desna margina</title>

</head>

<body>

<DIV style="margin-right:350px; border-style:double">Ova kutija ima

desnu marginu od 350 piksela.</DIV>

</body>

</html>


Margine i padding se često "brkaju". Zapamtite da kod tela Web stranice margine idu odivica ka unutra, a sve druge CSS margine idu u polje.

Slika 9.9. Razlika između uvlaka i margina

248 Multimedija

9.3. CSS pozicioniranje

Postoje više potpuno različitih metoda za pozicioniranje sadržaja na stranici, to su: rela-tivno, apsolutno i fiksno pozicioniranje, kao i pozicioniranje sadržaja float metodom štose smatra za potpuno izdvojenu tehniku u odnosu na tri prvo navedena.

Prvo ćemo da biste tehnike pozicioniranja što lakše shvatili , pre nego što svaku detaljnoobjasnimo ponaosob, utvrditi generalnu razliku između relativnog, apsolutnog i fiksnogpozicioniranja sa jedne strane i pozioniranja float metodom sa druge strane. Dakle, dokprve tri metode (positioning) koriste x i y koordinate za precizno pozicioniranje elemenatana stranici mereno u pikselima, float metod je pozicioniranje gde se određenom sadržaju"naređuje" da se prilepi krajnje levo ili krajnje desno koliko god može do susednog elemen-ta i na ovaj način elementi se "lepe" jedan do drugog i na taj način postavljaju na stranici.Svaka od ovih metoda ima neke svoje prednosti i ne možete se osloniti na korišćenje samojedne metode, već ćete ih koristiti sve zavisno od slučaja do slučaja.

Apsolutno pozicioniranje

Pored visine i širine, CSS kutije se mogu postaviti na bilo koje mesto na stranici specifi-ciranjem parametra position:

position: absolute;

Apsolutno pozicioniranje je lako razumeti, jer po tom principu funkcionišu i stvari urealnom životu. Vaša kuća može biti na 50m od centra grada, a kilometar od železničkestanice, na primer.

Češći je slučaj da se položaj kutije definiše sledećim tipom specifikacije:

top:50px; left:100px

to ne znači da mora da budu parametri top i left, to mogu biti i top i right, bottom i leftili bottom i right.

Primer koda za apsolutno pozicioniranje slika:

<html>

<head><title> Absolute position </title></head>

<body>

<img style="position:absolute; top:100px; left:20px"

width="164" height="110" src="C:/Documents and

Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg">

<img style="position:absolute; top:100px; left:200px"

width="164" height="110" src="C:/Documents and

Settings/All Users/Documents/My Pictures/Sample Pictures/Winter.jpg">

</body>

</html>

Uvod u CSS 249


Relativno pozicioniranje

Ukoliko želite da opišete poziciju kuće svog najbližeg suseda, možete reći da je 60mod centra grada ili možete reći da je 10m od vaše kuće. Relativno pozicioniranjepodrazumeva da su CSS kutije jedna do druge. Prva kutija je na vrhu, sledeća je ispodi tako redom. One efektivno plove nizbrdo od vrha stranice. To je nešto što se retkodešava u realnom životu, ali možete to zamisliti kao bazen koji je pun vazdušnih dušeka.Jedan može biti na vrhu, sledeći pluta i podvučen je delom pod onaj koji je iznad njegaitd. Primer koda za relativno pozicioniranje slika:

<html>

<head><title> Relative position </title></head>

<body>

<img width="164" height="110" src="C:/Documents and Settings/

All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg">

<img style="position:relative; left:100px" width="164"

height="110" src="C:/Documents and Settings/All Users/

Documents/My Pictures/Sample Pictures/Winter.jpg">

</body>

</html>


250 Multimedija

Fiksno pozicioniranje

Kod ove vrste pozicioniranja elementu zadajete koordinate na stranici gde se položajelementa neće menjati ni ukoliko, na primer, skrolujete celu stranicu. Ovo je veoma za-nimljiva mogućnost, jer je možete recimo koristiti kako biste napravili meni za vaš Websajt koji uvek stoji u istoj poziciji (recimo sam vrh ili sam levi ugao) nezavisno od ostatkasajta koji se nezavisno od ovog elementa sasvim normalno skroluje. Takođe, ovako možetefiksirati polozaj i bilo kog drugog elementa, recimo slike.

Pozicioniranje metodom float

Da dobijete da CSS kutije budu jedna pored druge, a ne jedna ispod druge, trebalo bi daspecificirate:

float: left;

ili

float: right;

Kao i napumpani vazdušni dušeci u širokom bazenu kutije će biti jedna pored druge gde imadovoljno prostora. U suprotnom dolazi do preklapanja. Da biste izbegli tu situaciju trebada obezbedite da ukupna širina svih kutija u jednom redu bude manja od širine stranice.To možete postići specificiranjem širine u pikselima – ali total treba da bude manji odminimalne širine prozora čitača. Takođe, možete da koristite procentualne vrednosti, i nataj obezbeđujući da total bude manji od 100 procenata. Kod relativnog pozicioniranjaizbegavajte da mešate piksele i procentualne vrednosti, jer se rezultati ne mogu predvideti.

Primer koda sa float za realizaciju tzv. inicijala u tekstu:




<head>


<title>Inicijal 1</title>

</head>

<body>

<DIV style="text-align:justify;width:250px">

<p>

<span style="float:left;color:red;font-size:100px;line-height:70px;

padding-top:2px;font-family: Times, serif, Georgia;">P</span>rimer

inicijala, tj. prvog slova u prvom redu koje visinom zahvata vise

redova. Velicina fonta je podesena na 100 piksela dok je visina

reda 70 piksela. Probana je visina reda od 80 piksela ali je tada

bilo previse beline.

</p>

Uvod u CSS 251

</DIV>

</body>

</html>


9.4. Identifikatori

Kod definisanja <div> elementa unutar HTML koda, može mu se dodeliti atribut id kojiga jedinstveno definiše. Primer koda:

<div id="mojDiv">

Ovde ide sav potreban sadrzaj.

</div>

Identifikatorski atribut omogućuje da <div> elementu menjamo razna svojstva korišćenjemstilova. Evo primera kako se gornji element može oblikovati:


#mojDiv{definicije stilova koji oblikuju <div> element}

</style>

Važno je odmah na početku primetiti da se koristi znak # ispred imena id elementa.Tom oznakom dajemo čitaču na znanje da koristi tačno definisane stilove za jedan <div>

element koji ima takav id.

Ako želimo koristiti iste stilove na više <div> elemenata, tada ne koristimo atribut id većclass. U stilovima onda definišemo tzv. klase koje započinju znakom . (tačka).

Pomoću ovog selektora možete pridodati različite stilove istoj vrsti HTML elementa.

Klase (ali ne id-ovi) mogu da se primene na nivou teksta. Ako želimo da obojimo tekst u

252 Multimedija

crvenu boju, a samo par reči u plavu boju, možemo kreirati klase, nazovimo ih .redtext

i .bluetext.

<html>

<head>


.redtext,.bluetext {

font-family: Arial;

}

.redText {

color : red

}

.blueText {

color : blue

}

</style>

</head>

<body>

<div class="redText">

Tekst ove stranice je crven <span class="blueText"> izuzev

dela</span> koji je plav.

</div>

</body>

</html>

Iz listinga se vidi da umesto "pakovanja" teksta koji želimo da obojimo u plavu boju utagove <div>...</div>, koristimo tagove <span>...</span>.


Uvod u CSS 253

9.5. Linkovi

Suština HTML-a je to što je HT (HyperText) hipertekstualan dokument. Linkovi (veze)dodati na reči, fraze ili slike mogu se klikom miša aktivirati i prebaciti vas na neko drugomesto. Ta druga mesta se nazivaju ankeri (kotve, sidra; engleski anchors). Baš kao što sebrod ukotvljuje, tako se i ovde ukotvljujete na nekom mestu u okviru mora World WideWeb.

Svaka stranica ima bar jedan anker. Podrazumevani anker je upravo vrh stranice, alimožete dodati još ankera na bilo koji deo stranice na koji želite da omogućite skok.

<a href="http://www.xxxxxx.com/index.htm">Ovo je link na home page</a>

Kao što znate, linkovi na stranici se vizuelno prikazuju drugačije od okolnog teksta. Po-drazumevana prezentacija hipertekst linkova u HTML-u ima tri različita stanja.

Naravno, sa dizajnerske tačke gledišta nismo zadovoljni podrazumevanim izgledom lin-kova. Podvučeni tekst je možda praktičan, ali deluje nekako ružno. Ključni zahtev kojitreba ostvariti je da linkovi izgledaju drugačije od okolnog teksta kako bi označavali neštoposebno. Kontekst je takođe važan faktor. Neki tekst je očigledno meni izbora bez obzirada li je podvučen ili ne. Njegova istaknutost i položaj na stranici i činjenica da vas rečipozivaju da idete negde daju jasno značenje njegove funkcije.

Slično, kada reč ili fraza unutar bloka teksta izgleda drugačije, može se smatrati da imaposebno značenje. Naravno, ponovo je kontekst taj koji daje konačno značenje a za to jepotrebno da i druge slične reči ili fraze imaju isti konzistentan izgled. Ovo ne funkcionišeako svaki link ima drugačiju boju.

CSS omogućava da se poigrate sa izgledom linkova. Linkovi ne moraju biti podvučeni, nemoraju biti plavi. Sve što treba da uradimo je da postavimo definiciju za a - anker.

a:link { color: #696; text-decoration: none }

Pošto naša stranica ima drugačiju kolornu šemu od podrazumevane (crno-belo), bojelinkova se mogu promeniti u neke druge koje nisu podrazumevane blue/purple.

text-decoration:none

Ovime se oslobađamo podvlačenja. Ako želite da posećeni (visited) link bude druge boje,to radite sa kodom:

a:visited { color: #699; text-decoration: none }

CSS omogućava i dodatno stanje koje se naziva hover. To stanje nastaje kada se pokazi-vačem miša prelazi preko teksta i tekst menja boju čime daje jasan signal da se radi ohipertekstualnom linku.

a:hover { color: #c93; text-decoration: underline }

Tradicionalno podvlačenje je ponovo na sceni ako to želite, ali samo privremeno dok jepokazivač iznad teksta.

254 Multimedija

Aktivno (active) stanje linka je ono što vidite kada kliknete mišem na link. Obično setada menja boja a neki čitači još stavljaju okvir oko teksta linka.

Da bi postavili stilove za linkove koji se primenjuju na celu stranicu, treba unutar definicijastilova u zaglavlju stranice da stavite nešto slično niže navedenom kodu.

a:link { color: #696; text-decoration: none; background-color:

transparent }

a:visited { color: #699; text-decoration: none; background-color:

transparent }

a:hover { color: #c93; text-decoration: underline; background-color:

transparent }

a:active { color: #900; text-decoration: underline; background-color:

transparent }

Ovde je važan redosled definicija stilova. Obično, redosled nema uticaj u CSS definicijamaali ovde je važno da a:hover i a:active definicije budu poslednje ili neće raditi.

9.6. CSS dokument

Detaljnije ćemo se baviti definisanjem stilova Web strane, korišćenjem posebnog CSSdokumenta.

CSS dokument je tekstualna datoteka sa ekstenzijom .css koja sadrži niz CSS pravila.Dodavanje <link> taga u <head> sekciju Web strane, omogućava formatiranje te stranena način definisan u CSS dokumentu.

U našem primeru, CSS dokument se zove HorNav.css. Njime definišemo navigacionutraku stranice sajta. Jedna ili više HTML strana, može biti povezana sa istim CSS doku-mentom. Time postižemo da promena, načinjena u CSS dokumentu, bude vidljiva na svimstranama, koje za svoje formatiranje koriste taj CSS dokument. Ako je potrebno promenitiboju pozadine, na primer na 50 strana, CSS stil u kome je definisana boja pozadine i kojije povezan sa tim stranama, će nas spasiti od menjanja svih 50 Web strana.

Listing CSS dokumenta HorNav.css:

#navhorizontal {

MARGIN-TOP: 0px; FLOAT: left; MARGIN-BOTTOM: 0px; MARGIN-LEFT:

0px; WIDTH: 740px; LIST-STYLE-TYPE: none; BACKGROUND-COLOR: #b3200c

}

#navhorizontal UL {

MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 0px; MARGIN-LEFT:

0px; LIST-STYLE-TYPE: none

}

#navhorizontal LI {

PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP:

0px; TEXT-ALIGN: right

}

Uvod u CSS 255

#navhorizontal UL LI A {

PADDING-RIGHT: 21px; DISPLAY: block; PADDING-LEFT: 21px; FONT-WEIGHT:

normal; FONT-SIZE: 0.8em; PADDING-BOTTOM: 8px; BORDER-LEFT:

#fff 1px solid; COLOR: #ecf9ff; LINE-HEIGHT: 2.5em; MARGIN-RIGHT: 0px;

PADDING-TOP: 8px; BACKGROUND-COLOR: #b3200c; TEXT-DECORATION: none

}

#navhorizontal LI A:hover {

COLOR: #ecf9ff; BACKGROUND-COLOR: #e67e1f

}

#navhorizontal UL LI .selected {

COLOR: #ecf9ff; BACKGROUND-COLOR: #e67e1f

}


Listing HTML stranice koja koristi CSS dokument HorNav.css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML>

<HEAD>

<TITLE>Moja kompnija</TITLE>

<META http-equiv=Content-Type content="text/html; charset=utf-8">

<LINK href="HorNav.css" type=text/css rel=stylesheet>

<META content="MSHTML 6.00.6000.16544" name=GENERATOR></HEAD>

<BODY>

<DIV id=navhorizontal>

<UL>

<LI><A href="kontakt.htm">Kontakt </A></LI>

<LI><A href="reference.htm">Reference </A></LI>

256 Multimedija

<LI><A href="projekti.htm">Projekti </A></LI>

<LI><A href="usluge.htm">Usluge </A></LI>

<LI><A href="ofirmi.htm">O kompaniji </A></LI>

<LI><A class=selected href="index.htm">Mati\v cna </A></LI>

</UL>

</DIV>

</BODY>

</HTML>

9.7. Osvrt na klase, nasleđivanje, kaskade, ...

Koncept CSS stilova sličan je stilovima koji se koriste u Wordu ili DTP programima. Samipo sebi, stilovi ne znače ništa - radi se o skupu pravila koji moramo najpre da povežemo saelementom. Povezivanje se sastoji od selektora (imena elementa) i pravila koje navodimounutar vitičastih zagrada i razdavajamo znakom tačka-zarez.

Važni detalji ovog koncepta su klase i nasleđivanje. Iako zvuči previše programerski, radise o principima od suštinskog značaja za efikasnu primenu stilova, pa ćemo ih podrobnoopisati.

Pretpostavimo da na Web stranicama neke delove teksta želimo da ispišemo na žutojpozadini, tako da budu posebno istaknuti. U datoteku stilovi.css unećemo definiciju.istaknuto {background-color: yellow;}. Pasus koji započnemo sa sledećom kon-statacijom <p class="istaknuto"> biće ispisan na žutoj pozadini. Sva ostala svojstvakoja smo definisali ostaće netaknuta, menja se samo boja pozadine.

Slika 9.15. Primer višestrukog korišćenja klase stila

Pogodnost je u tome što klasu koju smo upravo definisali mogu da koriste i drugi elementi,baš kao što je prikazano u primeru na slici. Klase lako postaju stilovi karaktera – ukoliko

Uvod u CSS 257

želimo da samo jedan deo teksta unutar pasusa istaknemo, stavićemo ga unutar oznaka<span class="istaknuto"> i </span>. Alternativa za klase je upotreba id atributa, sasličnim efektom.

HTML dokumenti imaju implicitnu strukturu. Obavezno je prisustvo elementa <html>

unutar koga se nalaze elementi <head> i <body>. Elementi <head> i <body> mogu dasadrže elemente <title> i <p>, respektivno, ali to nije obavezno.

Kako će Web čitač protumačiti pravila koja smo definisali? Svi pasusi u navedenom pri-meru nalaze se unutar elementa <body> i svi nasleđuju njegove atribute koje smo zadali ustilu. Pasus koji se ne nalazi unutar tagova, biće centriran i ispisan fontom Georgia, veli-čine dvanaest tačaka. Pasus označen tagom <p> nasleđuje atribute elementa <body>, alise ispisuje crvenom bojom, u skladu sa sopstvenim stilom. Kako to da se prethodni pasusispisao crnom bojom, iako ona nigde nije navedena? Neki atributi se podrazumevaju, akoih nismo zadali. Na mnoge default parametre možemo da utičemo u podešavanjima Webčitača i tako ostvarimo kontrolu nad onim svojstvima koja nisu eksplicitno definisana naWeb stranicama. Podrazumevana boja ispisa teksta je crna i nju će čitač automatskidodeliti elementu <body>, ako to dizajner ne promeni.

Slika 9.16. Stablo elemenata

Element <b> nasleđuje atribute elementa <p>, pa će deo teksta u drugom pasusu bitiispisan bold varijantom fonta. Kada bi u definiciji tekućih stilova postojalo i sledeće prav-ilo b {color: yellow;}, bilo koji tekst koji se nalazi unutar tagova <b> i </b> bio biispisan žutom bojom. Atributi se, dakle, nasleđuju, ali svaka lokalna promena određenogatributa poništava dejstvo nasleđivanja. Ovde možemo uspostaviti analogiju sa objek-tima na matičnim stranama u nekom od DTP programa. Svojstva takvih objekata važei na stranicama dokumenta, ali ukoliko promenimo boju objekta na stranici dokumenta,izmene boje na matičnoj strani više se neće odražavati na taj objekat.

Kaskadni stilovi su zasnovani upravo na upotrebi različitih pravila, pri čemu elementi nekapravila nasleđuju, a druga poništavaju novim pravilom. Radi se o sistemu po kome jemoguće utvrditi koja se pravila primenjuju u dokumentu koji sadrži mnoštvo stilova. Naprimer, pravilo za element <p> koji koristi atribut id ima prioritet nad klasom, a klasa imaprioritet nad samim elementom <p>. Lokalni, inline stilovi su "stariji" ili "jači" od stilovadokumenta ili eksternih stilova.

Što je pravilo specifičnije, njegova snaga je veća. Drugim rečima, prioritet ima ono pravilokoje je "bliže" tagu. Ukoliko želimo da većem broju elemenata dodelimo ista pravila,

258 Multimedija

navešćemo ih razdvojene zarezima. Navođenje elemenata bez zareza ukazuje na kon-tekstualne selektore. Na primer, p strong {color: green;} označava da će element<strong> unutar elementa <p> biti ispisan zelenom bojom. Ako se element <strong>nađe, na primer, unutar elementa <h1>, boja ne mora biti zelena, već je određena nasleđi-vanjem.

Vratimo se tipografskim parametrima koja nam omogućavaju stilovi. Neki od njih zahte-vaju određenu meru, pa se najčešće koriste oznake pt (tipografska tačka), px (piksel), in(inč), pc (pajk), cm, mm, em (označava em kvadrat) itd. Na primer, font-size: 12pt

zadaje veličinu slova, a line-height: 2 definiše dvostruki prored. Moguće je napisati iline-height: 14pt i time zadati apsolutnu meru proreda. Kada je u pitanju poravna-vanje teksta, na raspolaganju nam je pravilo text-align i njegovi atributi left (podrazu-mevani), right, center i justified.

Iako se na Web stranama može koristiti obostrano poravnati tekst, još uvek smo dalekood pogodnosti koje nam pružaju programi za prelom stranica. Pošto nema automatskehifenacije, poravnanje se postiže promenom razmaka između reči, što često daje neprih-vatljive rezultate. Obostrano poravnanje ima smisla samo ako su redovi dovoljno široki,u protivnom ga treba izbegavati.

Programi za Web ne podržavaju kerning, a u mnoge Web fontove kerning nije ugrađen, štomože da stvori probleme sa estetikom stranica na kojima se koriste krupna slova. Atributletter-spacing može da bude od velike pomoći, jer se njime zadaje razmak izmeđuslova. Ako u nekoj klasi definišemo negativan razmak i primenimo ga na izabrane paroveslova, postići ćemo efekat kerning-a. Atribut text-indent određuje uvlačenje prvog redapasusa i eliminiše potrebu za postavljanjem nevidljivih piksela.

Kaskadni stilovi na Web stranama predstavljaju veoma moćnu tehnologiju kojom se možeupravljati i ugrađenim, do skora potpuno nedodirljivim elementima HTML jezika. U ti-pografskom pogledu, mnoge parametre formatiranja možemo da kontrolišemo isključivostilovima. Njihovom pravilnom i preciznom upotrebom tekst na prezentacijama može dase oblikuje tako da bude usklađen sa karakteristikama ekrana. To obuhvata izbor fonta,proreda, poravnanja, dužine redova i mnogih drugih elemenata preloma koji imaju istiznačaj i funkciju kao i u štamparstvu.

Dizajn Web stranica otvara mnoge teme koje nismo obradili u ovom tekstu. Tu je kontra-verzna problematika veličine slova, koja se različito prikazuju u Windows i Macintoshokruženjima, kao i večita dilema treba li dozvoliti korisnicima da menjaju veličinu tek-sta. Kada su u pitanju tehnike dizajna, još uvek se intenzivno koriste tabele, iako CSSomogućava precizno raspoređivanje tekstualnih i grafičkih objekata zadavanjem njihovihapsolutnih ili relativnih pozicija, prilagođavanje širine stranice rezoluciji prozora čitača itd.

Glava 10

Uvod u JavaScript

JavaScript je programski jezik koji se interpretira, sa objektno orijentisanim mogućnos-tima. Po sintaksi, jezgro jezika JavaScript slično je jezicima C, C++ i Java, s program-skim konstrukcijama kao što su naredba if, petlja while i operator &&. Međutim, ovasličnost se završava sa sintaksom. JavaScript je slabo tipiziran jezik, što znači da se zapromenljive ne mora definisati tip. Objekti u JavaScriptu preslikavaju (mapiraju) imenasvojstava u proizvoljne vrednosti svojstava. Zbog toga su sličniji heš tabelama ili aso-cijativnim nizovima (u Perlu), nego strukturama (u C-u) ili objektima (u jezicima C++ili Java). Mehanizam objektno orijentisanog nasleđivanja u JavaScriptu zasnovan je naprototipovima, kao u malo poznatom jeziku Self. On je potpuno različit od nasleđivanjau jezicima C++ i Java. Kao i Perl, JavaScript je jezik koji se interpretira i nadahnut jePerlom u mnogim oblastima, kakve su regularni izrazi i mogućnosti rada sa nizovima.

Jezgro (core) jezika JavaScript podržava brojeve, znakovne nizove (strings) i logičkevrednosti kao osnovne tipove podataka. Osim toga, ono ima ugrađenu podršku za ob-jekte kao što su nizovi (arrays), datumi i regularni izrazi.

JavaScript se najčešće koristi u čitačima Weba (Web browsers), pa se jezgro opšte nameneproširuje objektima koji omogućavaju skriptovima interakciju sa korisnikom, upravljanječitačem Weba i izmene sadržaja dokumenta koji se pojavljuje unutar prozora čitača. Ovaugrađena (embedded) verzija JavaScripta izvršava skriptove koji su ugrađeni u HTMLWeb stranice. To se obično zove klijentski (client-side) JavaScript, da bi se naglasilokako se skriptovi izvršavaju na klijentskom računaru, a ne na Web serveru.

Jezgro jezika JavaScript i njegovi ugrađeni tipovi predmet su međunarodnih standarda, iveoma je dobra kompatibilnost različitih implementacija. Neki delovi programa klijentskogJavaScripta zvanično su standardizovani, neki su de facto standardi, a ostali predstavljajuproširenja koja zavise od čitača. Kompatibilnost između različitih čitača značajna je zaprogramere koji koriste klijentski JavaScript.

Jedna od najčešćih zabluda o JavaScriptu jeste da je to pojednostavljena verzija Jave,programskog jezika kompanije Sun Microsystems. Osim delimične sličnosti u sintaksi ičinjenice da i Java i JavaScript daju sadržaj koji može da se izvršava u čitačima Weba,između ova dva jezika ne postoji nikakva veza. Sličnost naziva je čisto marketinški potez

260 Multimedija

kompanija Netscape i Sun (ovaj jezik je prvobitno nazvan LiveScript i ime mu je u posled-njem trenutku promenjeno u JavaScript). Međutim, JavaScript može da skriptuje Javu.

Pošto se JavaScript interpretira umesto da se prevodi, često se smatra da je to jezik zaskriptovanje, a ne pravi programski jezik. Time se nagoveštava da su jezici za skriptovanjejednostavniji i da su to programski jezici za osobe koje nisu programeri. Činjenica da jeJavaScript manje strog po pitanju tipova podataka čini ga nešto pristupačnijim neiskus-nim programerima. Osim toga, mnogi Web dizajneri mogu da koriste JavaScript za brzorešavanje manjih programerskih zadataka.

Međutim, ispod svoje tanke glazure jednostavnosti, JavaScript je programski jezik sa pot-punim skupom mogućnosti, složen kao i bilo koji drugi, a od nekih i složeniji. Programerikoji pokušaju da iskoriste JavaScript za rešavanje netrivijalnih zadataka često otkrivajuda je taj postupak težak, ukoliko dobro ne razumeju ovaj jezik.

Kao i sve nove tehnologije, JavaScript se brzo razvijao u početku, što je rezultiralo broj-nim verzijama. Međutim, vremenom se jezik ustalio i standardizovalo ga je udruženjeEuropean Computer Manufacturer’s Association (ECMA). Zvanično ime (naziv) jezikaje ECMAScript, prema standardu ECMA-262. Međutim, ovaj zbunjujući naziv koristi sesamo pri eksplicitnom pozivanju na standard. Naziv "JavaScript" se tehnički odnosi samona implementacije ovog jezika, koje su dale kompanije Netscape i Mozilla Foundation. Upraksi, svi taj jezik zovu JavaScript.

Osim specifikacije ECMA-262, koja standardizuje jezgro jezika JavaScript, organizacijaECMA objavila je još jedan standard koji se, takođe, odnosi na JavaScript. Specifika-cija ECMA-357 standardizuje proširenje JavaScripta, poznato kao E4X ili ECMAScriptza XML. To proširenje dodaje ovom jeziku tip podataka XML, zajedno sa operatorima inaredbama za rad sa vrednostima tipa XML.

Razmatranje predloga za četvrto izdanje specifikacije ECMA-262, kojom bi se standardi-zovao JavaScript 2.0, odlaže se godinama. U tim predlozima je potpuna revizija jezika,uključujući strogo tipiziranje i pravo nasleđivanje, zasnovano na klasama.

Kada je interpreter JavaScripta umetnut u čitač Weba, rezultat je klijentski JavaScript.To je, do sada, najčešća varijanta JavaScripta – kada se govori o JavaScriptu, većina ljudimisli na klijentski JavaScript. U klijentskom JavaScriptu kombinuju se mogućnosti inter-pretera JavaScripta da izvršava skriptove sa objektnim modelom dokumenta (DocumentObject Model – DOM), definisanim u čitaču Weba. Dokumenti mogu da sadrže skriptovenapisane na JavaScriptu, a ti skriptovi mogu da koriste DOM za izmenu dokumenta iliupravljanje čitačem Weba koji prikazuje taj dokument. Drugim rečima, možemo kazati daklijentski JavaScript dodaje ponašanje statičkim sadržajima Weba. Klijentski JavaScriptčini srž tehnika koje služe za razvoj Web aplikacija, kao što je DHTML i arhitektura kaošto je Ajax.

JavaScript je programski jezik opšte namene i ne koristi se samo u čitačima Weba.JavaScript može da bude umetnut u bilo koju aplikaciju i da obezbedi izvršavanje skrip-tova. U stvari, od prvih dana su Netscapeovi Web serveri uključivali interpreter Java-Scripta, tako da su se serverski skriptovi mogli pisati na JavaScriptu. Slično, Microsoftkoristi svoj interpreter za JScript u svom IIS Web serveru i u svom proizvodu Windows

Uvod u JavaScript 261

Scripting Host, pored toga što ga koristi u Internet Exploreru. Adobe koristi jezik izvedeniz JavaScripta, za izvršavanje skriptova u programu Flash Player. Kompanija Sun dodajeinterpeter za JavaScript prilikom distribuiranja svoje Jave 6.0, tako da se mogućnostiizvršavanja skriptova lako mogu dodati svakoj aplikaciji napisanoj na Javi.

I Netscape i Microsoft učinili su svoje interpretere za JavaScript dostupnim kompanijamai programerima koji hoće da ih uključe u svoje aplikacije. Netscapeov interpreter je objav-ljen u vidu otvorenog koda i sada je dostupan preko organizacije Mozilla (Internet adresahttp://www.mozilla.org/js/).

10.1. Programiranje u JavaScript-u

Pre nego što počnete da programirate u jeziku JavaScript, potrebno je da znate kakose izvršava jedan takav program. Svaki JavaScript program napravljen za izvršavanje uWeb čitaču mora da bude uključen u Web dokument. U većini slučajeva to će biti HTMLili XHTML dokument, ali može da bude XML, SVG ili nešto sa čime se do sada nismosusreli. Ovde ćemo razmatrati uključivanje u HTML, zato što 99% ljudi koristi JavaScriptu toj kombinaciji.

Da bi uključili JavaScript kôd u HTML stranicu, morali bi da uključimo tag/marker podnazivom <script> unutar zaglavlja (head) dokumenta. Dati skript ne mora da budeJavaScript, zato moramo čitaču da saopštimo koji tip skripta uključujemo dodavanjematributa type sa vrednošću text/javascript:



<html lang="en-US">

<head>

<title>Pozdrav</title>

<meta http-equiv="Content-Type"

content="text/html; charset=utf-8">


</script>

</head>

</html>

Možete da stavite onoliko JavaScript koda koliko želite unutar taga <script> – čitač ćega izvršiti čim bude učitan:



<html lang="en-US">

<head>



content="text/html; charset=utf-8">


262 Multimedija

alert("Zdravo svima!");

</script>

</head>

</html>

Mada je dosta zgodno i lako direktno uključiti JavaScript kôd u HTML kôd, preporučujese da uključujete JavaScript kôd iz posebnog spoljašnjeg fajla. Ovaj pristup ima višeprednosti:

• Zadržava odvojenost sadržaja i ponašanja (HTML i JavaScript).

• Olakšava održavanje Web stranica.

• Omogućava da lakše višestruko koristite iste JavaScript programe na različitim stra-nicama sajta.

Da biste naveli/referencirali spoljašnji JavaScript fajl, potrebno je da koristite atribut srcunutar <script> taga:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

<head>



content="text/html; charset=utf-8" />

<script type="text/javascript" src="primer.js"></script>

</head>

</html>

Slično atributu src kod uključivanja slika u HTML, možete da referencirate fajl koji senalazi bilo gde na vašem serveru ili bilo kom serveru:

<script type="text/javascript"

src="http://www.NekiServer.com/script.js"></script>

Ukoliko želite možete na stranicu uključiti više spoljašnjih skriptova:

<script type="text/javascript" src="library.js"></script>

<script type="text/javascript" src="animacija.js"></script>

<script type="text/javascript" src="example.js"></script>

U programiranju se koristi princip raščlanjavanja problema na manje probleme koje računarponaosob može da razume i reši u okviru jednog koraka. Svaki takav mali korak kojipreduzmete u programu naziva se naredba i saopštava čitaču da izvrši neku radnju.Slažući nizove tih radnji pravimo program. Naredbe su za programe ono što su rečeniceza knjige.

U JavaScriptu svaka naredba trebalo bi da bude odvojena znakom za novi red ili tačka-zapetom. Prema tome, dve naredbe se mogu napisati na sledeći način:


Naredba 1

Naredba 2

ili na sledeći način:

Naredba 1;Naredba 2;

Komentar je napomena u programskom kodu koju će čitač potpuno ignorisati. U principu,komentari objašnjavaju programski kôd čime omogućavaju lakše ažuriranje koda u nekombudućem vremenu od strane autora programa ili nekoga ko bude održavao program tokomeksploatacije. JavaScript podržava dva tipa komentara. Prvi tip je jednoredni komentar,koji počinje sa dve kose crte (//) i proteže se do kraja reda:

Naredba 1; // Jednoredni komentar

Naredba 2;

Kada prilikom interpretiranja koda čitač naiđe na dve kose crte, on ignoriše sve što senalazi posle toga u tom redu i nastavlja da čita dalje sledeći red programa na uobičajen.

Ukoliko se javi potreba da napišete veći komentar, možete ga smestiti u više redova takošto ćete ga staviti između sledećih oznaka /* i */:

/* Ovo je moj prvi JavaScript program. Oprostite ako ima gresaka.

Pronadjene greske mozete mi prijaviti na mail [email protected]. */

Naredba 1; // Prva naredba

Naredba 2;

Možete da napišete program kod koga je unapred definisan svaki podatak koji on koristi,što se može uporediti sa upravljanjem ski liftom – nemate mogućnost promene odredišta,stalno se vozite istom stazom. Ukoliko želite da napišete program koji će komuniciratisa korisnikom i prilagođavati se različitim situacijama, morate imati mogućnost rada savrednostima koje ne poznajete.

Promenljiva/varijabla omogućava da se nekom podatku dodeli naziv, zatim se taj podataku programu može referencirati preko tog naziva. Na taj način može se koristiti neki poda-tak, a da se unapred ne zna njegova stvarna vrednost, ono čega treba da se seća programerje naziv promenljive.

U JavaScriptu promenljiva se kreira upotrebom službene reči var i specificiranjem nazivakoji želimo da koristimo:

var boja;

Prethodni red koda se naziva deklarisanje promenljive.

Nakon što je deklarisana, promenljiva boja je spremna da joj se dodeli podatak. To seradi upotrebom operatora dodeljivanja (=), tako što se naziv promenljive postavlja saleve strane tog operatora, a podatak sa desne:

var boja;

boja = "plavo";

264 Multimedija

Cela procedura se može skratiti objedinjavanjem deklarisanja i dodeljivanja u jednu na-redbu:

var boja = "plavo";

U praksi, to je ono što radi većina JavaScript programera – deklariše promenljivu upravoonda kada se toj promenljivoj prvi put dodeljuje neki podatak.

Iako niste prethodno referencirali/deklarisali konkretan naziv promenljive, možete joj do-deliti vrednost bez upotrebe var službene reči za deklarisanje:

boja = "plavo";

JavaScript interpreter će detektovati da ta promenljiva nije prethodno deklarisana i au-tomatski će je deklarisati prilikom dodeljivanja vrednosti.

Službena reč var treba da se koristi samo prilikom deklarisanja promenljive. Ukoliko kasniježelite da promenite vrednost promenljive, to radite bez var:

var boja = "plavo";

boja = "crveno";

Za korišćenje vrednosti promenljive dovoljno je navesti naziv promenljive. Svako po-javljivanje naziva promenljive biće automatski zamenjeno sa njenom vrednošću prilikomizvršavanja programa:

var boja = "plavo";

alert(boja);

Druga naredba u prethodnom segmentu koda saopštava čitaču da prikaže okvir za upozo-renje sa obezbeđenom vrednošću, koja će u ovom slučaju biti vrednost promenljive boja.

Nazivi promenljivih mogu se obrazovati skoro iz bilo koje kombinacije slova i brojeva,uz ograničenje da znaci razmaka/belina nisu dozvoljeni. Većina znakova interpunkcije isimboli imaju specijalno značenje u okviru programa JavaScript, stoga su znak za dolar($) i podvlaka (_) jedini ne-numerički znaci/karakteri dozvoljeni za korišćenje u nazivimapromenljivih. Nazivi promenljivih su osetljivi na tip veličine slova (Case sensitive), stoganazivi boja, Boja i BOJA referenciraju unikatne/različite promenljive koje mogu da postojeistovremeno.

Mnogi programski jezici karakteristični su po tome što koriste strogo tipizirane promen-ljive. Kod njih morate programu prilikom deklarisanja promenljive da saopštite koji tippodatka će promenljiva sadržati i ne može se promeniti tip promenljive kada je jednomkreirana.

Međutim, JavaScript je slabo tipiziran jezik – skript jezik koji ne vodi računa šta pro-menljive sadrže. Promenljiva, na primer, u početku može čuvati broj, zatim može sadržajpromeniti u znak, reč ili nešto drugo.

Uprkos činjenici da ne morate u startu da deklarišete tip podatka, bitno je da znate kojitip podatka promenljiva može da čuva kako biste mogli da ih korektno koristite u okviruprograma. U JavaScript programima možete da radite sa brojevima, stringovima (niskamakaraktera), logičkim vrednostima (Booleans), nizovima i objektima.


10.1.1. Brojevi

Brojevi se u JavaScriptu pojavljuju u dva oblika, kao celi i decimalni brojevi. U svetuprogramiranja celi brojevi se terminološki označavaju kao integer ili int, a decimalni kaobrojevi sa pokretnom tačkom/zapetom (floating point number) ili float.

Da biste kreirali promenljivu koja će čuvati numerički podatak treba da nazivu promenljivedodelite broj:

var ceobroj = 3;

var decimalni = 3.14159265;

Brojevi sa pokretnom tačkom mogu imati proizvoljan broj decimalnih mesta:

var kratakDecimalni = 3.1;

var dugDecimalni = 3.14159265358979323846264338327950288419716939937;

I brojevi sa pokretnom tačkom i celi brojevi mogu imati negativne vrednosti ako se staviznak minusa ispred njih:

var negativniInt = -3;

var negativniFloat = -3.14159265;

10.2. Operatori

U ovom odeljku biće predstavljeni svi operatori koje JavaScript podžava a koji su organi-zovani po sledećim kategorijama:

• aritmetički operatori,

• logički operatori,

• operatori poređenja,

• operatori stringova,

• operatori za manipulaciju bitovima,

• operatori dodele,

• uslovni operatori.

Započnimo razjašnjavanje terminologije. Operator se koristi za transformisanje jedne, iliviše vrednosti u jednu rezultujuću vrednost. Vrednosti na koje se operator primenjuje nazi-vaju se operandi. Kombinacija operatora i njegovih operanada poznata je kao izraz. Izrazise izračunavaju da bi se odredila sama vrednost izraza, koja predstavlja rezultat primeneoperatora nad operandima. Neki operatori, kao, na primer, operator (dodele) =, kaoishod daju vrednost koja se dodeljuje promenljivoj. Drugi proizvode vrednost koja se možekoristiti u drugim izrazima.

Za neke operatore, kao što je * operator množenja, redosled operanada nije važan - na

266 Multimedija

primer, x * y = y * x predstavlja tačan izraz za sve cele i realne brojeve. Drugi ope-ratori, kao što je + (konkatenacija stringova) operator, daju različite rezultate za različiteredoslede svojih operanada. Na primer, .ab.+.cd. nije isto što i .cd.+.ab..

Unarni operatori se koriste samo sa jednim operandom. Na primer, unarni operator ! seprimenjuje na logičku vrednost i vraća logičku not vrednost te vrednosti. Većina JavaScriptoperatora predstavlja binarne operatore, koji imaju po dva operanda. Jedan primer bi-narnog operatora je operator * (množenja), koji se koristi za izračunavanje proizvoda dvabroja. Na primer, dati izraz 8 * 6 se izračunava kao 48 primenom * operatora nad ope-randima 8 i 6.

Do sada smo se bavili samo prostim izrazima. Složeniji izrazi mogu da se naprave kombi-novanjem prostih unarnih i binarnih izraza. Da biste izračunali složene izraze, morate da ihraščlanite na njihove komponente unarnih i binarnih izraza, primenjujući pravila redosleda,ili prioriteta (na primer, izračunavanjem grupa pre njihovog sabiranja ili množenja).

10.2.1. Aritmetički operatori

Aritmetičke operatore svakodnevno koristimo za izvršavanje jednostavnih matematičkihizračunavanja. Matematički operatori koje podržava JavaScript se nalaze ispod:

• (+) �−→ sabiranje;

• (-) �−→ oduzimanje ili unarna negacija;

• (*) �−→ množenje;

• (/) �−→ deljenje;

• (%) �−→ moduo;

• (++) �−→ inkrementiraj i vrati vrednost (ili vrati vrednost, pa inkrementiraj);

• (--) �−→ dekrementiraj i vrati vrednost (ili vrati vrednost, pa dekrementiraj).

Operator % (moduo) izračunava ostatak deljenja dva cela broja. Na primer, za dati izrazrazultat je 17 % 3 = 2, zato što je 17/3 = 5 sa ostatkom 2.

10.2.2. Logički operatori

Logički operatori se koriste za izvođenje logičkih (Boolean) operacija nad logičkim operan-dima, kao što su logičko I, logičko ILI i logička negacija. Logički operatori koje podržavaJavaScript prikazani su ispod.

• (&&) �−→ logičko I;

• (.) �−→ logičko ILI;

• (!) �−→ logička negacija.


10.2.3. Operatori poređenja

Operatori poređenja se koriste za određivanje kada su dve vrednosti jednake, ili za po-ređenje numeričkih vrednosti, da bi se ustanovilo koja je vrednost veća od one druge.Operatori poređenja koje podržava JavaScript prikazani su ispod.

• (==) �−→ jednako;

• (===) �−→ strogo jednako;

• (!=) �−→ nije jednako;

• (!==) �−→ strogo nije jednako;

• (<) �−→ manje;

• (<=) �−→ manje ili jednako;

• (>) �−→ veće;

• (>=) �−→ veće ili jednako.

Operatori jednako (==) i nije jednako (!=) vrše konverziju tipa pre provere jednakosti.Na primer, .5. == 5 se izračunava kao true. Operatori strogo jednako (===) i strogonije jednako (!==) ne vrše konverziju tipa pre provere jednakosti. Na primer, .5. === 5

se izračunava kao false, a .5. !== 5 vraća true. Operatori strogo jednako (===) i strogonije jednako (!==) su deo ECMAScript 1 standarda. Oni su uvedeni u Navigatoru samoza JavaScript 1.3 i podržali su ih Navigator 4.06 i kasniji. Takođe su ih podržali InternetExplorer 4 i kasniji.

10.2.4. String operatori

String operatori se koriste za izvođenje operacija nad stringovima. JavaScript trenutnopodržava samo operator string konkatenacije +. On se koristi za spajanje dva navedenastringa nadovezivanjem. Na primer, .ab. + .cd. proizvodi .abcd..

10.2.5. Operatori za manipulaciju bitovima

Operatori za manipulaciju bitovima sprovode operacije nad vrednošću predstavljenu bito-vima, kao što su pomeranje bitova ulevo ili udesno. Operatori za manipulaciju bitovimakoje podržava JavaScript prikazani su ispod.

• (&) �−→ I;

• (|) �−→ ILI;

• (^) �−→ ekskluzivno ILI;

• (<<) �−→ pomeranje ulevo;

• (>>) �−→ pomeranje udesno sa čuvanjem znaka;

• (>>>) �−→ pomeranje udesno sa punjenjem mesta najveće težine nulama.

268 Multimedija

10.2.6. Operatori dodele

Operatori dodele se koriste za ažuriranje vrednosti promenljive. Neki operatori dodele sekombinuju sa drugim operatorima, da bi sproveli proračun nad vrednošću koja se nalazi upromenljivoj i da, potom, ažuriraju promenljivu novom vrednošću. Operatori dodele kojepodržava JavaScript prikazani su ispod.

• (=) �−→ Postavlja promenljivu sa leve strane operatora = na vrednost izraza sanjegove desne strane.

• (+=) �−→ Uvećava promenljivu sa leve strane operatora += za vrednost izraza sanjegove desne strane. Kada se koristi sa stringovima vrednost sa desne strane senadovezuje na vrednost promenljive sa leve strane operatora +=.

• (-=) �−→ Umanjuje promenljivu sa leve strane operatora -= za vrednost izraza sanjegove desne strane.

• (*=) �−→ Množi promenljivu sa leve strane operatora *= sa vrednošću izraza sanjegove desne strane.

• (/=) �−→ Deli promenljivu sa leve strane operatora /= sa vrednošću izraza sa njegovedesne strane.

• (%=) �−→ Izdvaja moduo promenljive sa leve strane operatora %=, koristeći izraz sanjegove desne strane.

• (<<=) �−→ Pomera ulevo promenljivu sa leve strane operatora <<=, upotrebljavajućivrednost izraza sa njegove desne strane.

• (>>=) �−→ Sprovodi pomeranje udesno sa zadržavanjem znaka promenljive sa levestrane operatora >>=, koristeći vrednost izraza sa njegove desne strane.

• (>>>=) �−→ Sprovodi pomeranje udesno sa punjenjavanjem mesta najveće težinenulama promenljive sa leve strane operatora >>>=, koristeći vrednost izraza sa nje-gove desne strane.

• (&=) �−→ Sprovodi logičko I nad bitovima promenljive sa leve strane operatora &=,koristeći vrednost izraza sa njegove desne strane.

• (=) �−→ Sprovodi logičko ILI nad bitovima promenljive sa leve strane operatora =,koristeći vrednost izraza sa njegove desne strane.

• (^=) �−→ Sprovodi ekskluzivno ILI nad bitovima promenljive sa leve strane opera-tora ^=, koristeći vrednost izraza sa njegove desne strane.


10.2.7. Ternarni operator uslovnog izraza

JavaScript podržava operator uslovnog izraza ? :, koji se može naći i u Javi, C-u i C++-u. Ovo je ternarni operator, budući da prihvata tri operanda – uslov koji treba izračunatii dve alternativne vrednosti, od kojih treba vratiti samo jednu, u zavisnosti da li je uslovispunjen ili ne. Format za ovaj uslovni izraz je sledeći:

uslov ? vrednost1 : vrednost2

Uslov je izraz koji kao rezultat daje logičku vrednost – na primer, tačno, ili netačno. Akoje uslov tačno, vrednost1 je rezultat ovog izraza. U suprotnom, rezultat je vrednost2.Primer upotrebe ovog izraza je sledeći:

(x > y) ? 5 : 7

Ako je vrednost promenljive x veća od vrednosti koja se nalazi u promenljivoj y, rezultatizraza je 5. Ako je vrednost x manja od vrednosti y ili su njih dve jednake, rezultat ovogizraza je 7.

10.2.8. Specijalni operatori

JavaScript podržava i brojne specijalne operatore, koji se ne uklapaju ni u jednu od kate-gorija operatora navedenih u prethodnim odeljcima:

• ZAREZ (,) OPERATOR - Ovaj operator izračunava dva izraza i vraća vrednost dru-gog. Razmotrite naredbu a = (5+6),(2*2). Oba izraza (5+6) i (2*2) se izraču-navaju, a vrednost drugog izraza (4) se dodeljuje promenljivoj a.

• DELETE OPERATOR - koristi se za brisanje osobine nekog objekta ili elemenata niza donavedenog indeksa. Na primer, delete myArray[5] briše šest elemenata myArrayniza. Od JavaScript verzije 1.2 delete operator uvek vraća undefined vrednost.

• NEW OPERATOR - koristi se za kreiranje nove instance nekog tipa objekta.

• TYPEOF OPERATOR - vraća string vrednost čiji je zadatak da identifikuje tip operan-da. Trebalo bi razmotriti naredbu a = typeof 17. Vrednost dodeljena promenlji-voj a je number. Pokušajte da upotrebite typeof sa različitim izrazima i da viditevrednosti koje ovaj operator vraća. Možete ga koristiti i sa objektima i funkcijama.

• VOID OPERATOR - ne vraća vrednost. On se, obično, koristi sa JavaScript protoko-lom da vrati URL koji nema vrednost.

10.3. Kontrolne strukture i petlje

Vrste naredbi koje donose oduke i ponavljaju se u petlji u programiranju se nazivajukontrolne strukture. Važan deo komandne strukture je uslov. Svaki uslov je jedan logičkiizraz koji dobija vrednost true ili false. JavaScript obezbeđuje nekoliko vrsta kontrolnihstruktura za različite programske situacije.

270 Multimedija

10.3.1. Naredbe odlučivanja

Najjednostavnija odluka u programu jeste praćenje neke grane ili putanje programa akoje ispunjen određen uslov. Formalna sintaksa za ovu konstrukciju je:

if (uslov) {

kôd koji se izvrsava ako je vrednost izraza true

}

Ako su umesto jedne grane potrebne dve ili više koje obrada treba da prati, koristi seif.. else tj. if.. else if.. else konstrukcija. Formalna definicija if.. else je:

if (uslov) {

kôd koji se izvrsava ako je vrednost izraza uslov true

}

else {

kôd koji se izvrsava ako je vrednost izraza uslov false

}

Konstrukcija if.. else if.. else\verb je pogodna kada je potrebno pratiti nekolikoizvršnih linija. Sintaksa:

if (uslov1) {

kôd koji se izvrsava ako je vrednost izraza uslov1 true

}

else if (uslov2) {

kôd koji se izvrsava ako je vrednost izraza uslov2 true

}

else {

kôd koji se izvrsava ako ni jedan od izraza uslov1 i uslov2

nema vrednsot true

}

Pod nekim okolnostima, odluka tipa true ili false nije dovoljna za obradu podataka uskriptu. Svojstvo objekta ili vrednost promenljive mogu sadržavati bilo koju od nekolikovrednosti i potreban je poseban put izračunavanja za svaku od njih. U JavaScriptu postojikontrolna struktura koju koriste mnogi jezici. Na početku strukture se identifikuje o komizrazu se radi i svakoj putanji izvršavanja dodeljuje se oznaka koja odgovara određenojvrednosti. U pitanju je switch naredba.

switch(izraz) {

case oznaka1:

naredbe

break

case oznaka2:

naredbe

break

default:


naredbe

}

Izraz može biti bilo koji znakovni niz ili numerička vrednost. Naredba default obezbeđujenastavak po putanji izvršavanja kada vrednost izraza ne odgovara ni jednoj oznaci naredbecase.

Naredba break, koja služi za izlazak iz petlje, ovde ima značajnu ulogu. Naime, ako nijenavedeno break posle svake grupe naredbi u case granama, izvršiće se sve naredbe iz svakecase grane, bez obzira na to da li je nađena odgovarajuća oznaka.

10.3.2. Programske petlje

Za neke JavaScript skriptove bitno je da mogu da kruže kroz svaki element niza ili svakustavku formulara/obrasca. Jedna od struktura JavaScripta koja dozvoljava ponavljanjeprolazaka jeste petlja for.

for (pocetniIzraz; uslov; korak) {

naredbe

}

Tri naredbe unutar zagrada (parametri petlje for) igraju ključnu ulogu. pocetniIzraz upetlji for izvršava se samo jednom, prvi put kada se pokreće petlja. Najčešća primenapočetnog izraza je dodela imena i početne vrednosti promenljivoj brojača petlje. Koristise naredba var koja i deklariše ime promenljive i dodeljuje joj početnu vrednost. Kadaje promenljiva brojača definisana u početnom izrazu, izraz uslov obično definiše do kojevrednosti brojač petlje treba da ide pre nego što se kruženje završi. Poslednji izraz, korak,izvršava se na kraju svakog izvršenja petlje nakon što su se pokrenule sve naredbe unutarfor-a. Obično je to povećavanje brojača petlje za jedan za svaki sledeći prolaz, tzv. in-krementiranje vrednosti.

Sledeći primer je skript koji ispisuje brojeve od 0 do 10, svaki u posebnom redu. Znači,početna vrednost je 0, a krajnja, maksimalna, je 10. Inkrement iznosi 1. Dakle, sve doki ne dobije vrednost 10, skript ispisuje brojeve svaki put povećavajući brojač i za 1.

<html>

<body>

<script language="javascript">

for (var i=0; i<=10; i++) {

document.write("Broj " + i)

document.write("<br>")

}

</script>

</body>

</html>

Svaki od parametara for petlje je opcioni. Ponekad se vrednost brojača petlje kontrolišena osnovu vrednosti koje se izvršavaju unutar tela petlje. Pogledajmo primer. Poslednjiparametar – inkrementacija vrednosti – je izostavljen.

272 Multimedija

<html>

<body>

<script language="javascript">

document.write("Parni brojevi u otvorenom intervalu od 1 do 10 su:");

for (var i=1; i<=10) {

if (i%2 == 0) {

document.write("Broj " + i+ "je paran!");

document.write("<br>");

i += 2;

}

else {

i++;

}

}

</script>

</body>

</html>

Petlja for nije jedina vrsta ponavljačke petlje u JavaScript-u. Druga naredba, while,postavlja malo drugačiju petlju. While petlja pretpostavlja da će naredbe skripta doći ustanje u kome se automatski izlazi iz petlje.

while (uslov) {

naredbe

}

Ova petlja izvodi akciju sve dok izraz uslov ne dobije vrednost false. JavaScript nudi jošjednu konstrukciju petlje zvanu do.. while. Formalna sintaksa za ovu konstrukciju jesledeća:

do {

naredbe

}

while (uslov)

Razlika između while i do.. while petlje je ta što se u do.. while petlji naredbeizvršavaju bar jednom pre nego što se uslov ispita, dok u petlji while to nije slučaj.

Break i continue

U neke konstrukcije petlje skript ulazi samo kada se ispuni određeni uslov usled čega višenemaju potrebu da nastave kruženje kroz ostatak vrednosti u opsegu brojača petlje. Zaizlazak iz petlje koristi se naredba break. Ona govori JavaScriptu da izađe iz petlje for,a izvršavanje skripta se nastavlja odmah iza te petlje (iza vitičaste zagrade koja zatvaratelo petlje).

for (var i=0; i< array.length; i++) {


if (array[i]. property == wantedValue) {

naredbe;

break

}

}

Petlja for omogućava i da se preskoči izvršavanje naredbi unutar nje zbog samo jednoguslova. Može da postoji neka vrednost brojača za koju nije poželjno da se naredbe izvrše.Naredba continue primorava skript da, ako je uslov ispunjen, pređe na sledeći korak tj.poveća vrednost brojača i nastavi petlju od te vrednosti.

for(var i=1; i <=20; i++){

if (i==13) {

continue;

naredbe

...

U slučaju ugnežđenih for petlji, naredba continue utiče na petlju for u čiji trenutni opsegspada i konstrukcija if.

10.3.3. Nizovi

Nizovi u JavaScriptu su jedna od najkorisnijih struktura podataka. Elementi niza sunumerisani, počevši od nule, i redni broj predstavlja indeks datog elementa. Da bi sepristupilo nekom elementu niza, potrebno je znati njegovo ime i indeks. Pošto vrednostiindeksa počinju nulom, broj elemenata niza (što je određeno svojstvom niza length), uvekje za jedan veći od najvećeg indeksa niza. Elementi u nizovima JavaScripta mogu dapripadaju bilo kom tipu podataka, uključujući i objekte.

Niz je smešten u promenljivoj tako da kada se pravi niz, promenljivoj se dodaje noviobjekat niza. Posebna ključna reč – new – prethodi pozivu funkcije za generisanje niza uJavaScriptu, koja u memoriji obezbeđuje prostor za niz. Međutim, u JavaScriptu veličinuniza moguće je promeniti bilo kad.

new mojNiz = new Array(duzina)

Popunjavanje niza vrši se operatorom dodele, prethodno se u uglastim (velikim) zagrada-ma navodi indeks elementa.

mojNiz [0] = "tekst"

mojNiz [1] = "slika"

mojNiz [2] = "zvuk"

Postoji i kraći način formiranja niza. Umesto serije naredbi dodele, podaci se predaju kaoparametri konstruktoru Array():

mojNiz = new Array ("tekst", "slika", "zvuk")

274 Multimedija

Za pristup podacima niza ključ je indeks niza. Ime niza i indeks u uglastim zagradamadobijaju vrednost sadržaja te lokacije u nizu.

Da bi se obrisao sadržaj koji je zauzimao prostor na određenoj lokaciji niza, dovoljno jepostaviti ga na null ili prazan znakovni niz. Međutim, stvarno brisanje elementa nizamoguće je operatorom delete.

mojNiz.length; // rezultat je 3

delete mojNiz[1];

mojNiz.length = 3; // rezultat je ponovo 3

mojNiz[1]; // rezultat je undefined

Primetimo da operator delete briše dati element, ali ne narušava strukturu niza! Dakle,sadržaj koji se nalazio na datoj poziciji više ne postoji, ali uređenost niza je sačuvana inema potrebe za premeštanjem elemenata i menjanjem njihovih indeksa da bi se očuvalauređenost niza. Znači, mesto sa datim indeksom postoji u nizu, ali je prazno.

10.3.4. Funkcije

Vrlo često javlja se potreba da se neki delovi programa izvršavaju u različito vreme ilida se isti kod izvršava više puta. Da bi to elegantno izveli potrebno je da odgovarajućiprogramski kôd stavimo u funkcije.

Funkcije su mali paketi JavaScript koda koji čekaju da budu pozvani da obave svoj posao.Već ste se upoznali sa jednom funkcijom u ovom poglavlju – alert funkciju smo koristilida u čitaču aktivira tzv. iskačući okvir. Funkcija alert je sastavni deo svih čitača – toznači da je ugrađena u čitačev JavaScript interpreter. Pored toga, vi imate mogućnost dakreirate svoje funkcije koje ćete pozivati kada vi to želite. Funkcija se može posmatratikao omotač bloka programskog koda. Ono što je potrebno da uradite je da dodelite nazivtom bloku koda i moći ćete da ga pozivate iz drugih delova svog programa kada poželite.

Funkcije se definišu upotrebom službene reči function. Ta reč saopštava programu daželite da definišete novu funkciju i da se kôd koji se nalazi između tzv. vitičastih zagradaizvršava svaki put kada se ta funkcija pozove:

function upozorenje()

{

alert("Ovo je kriticno upozorenje!");

}

Termin koji sledi službenu reč function je naziv koji želite da date funkciji (nazivi funkcijapodležu istim ograničenjima kao i nazivi promenljivih). To je naziv koji ćete pozivati/na-voditi kadgod želite da se u programu izvrši kôd koji se nalazi unutar funkcije. Naziv morabiti praćen malim zagradama – u prethodno navedenom slučaju one su prazne, međutimto neće uvek biti tako što ćete videti u primerima koji će kasnije biti navedeni.

U prethodnom primeru kreirana je funkcija koja se zove upozorenje, stoga kadgod po-zovemo tu funkciju, izvršavaće se naredbe unutar funkcije koje aktiviraju pojavljivanjeiskačućeg okvira koji prikazuje tekstualnu poruku "Ovo je kriticno upozorenje!". Kao i


kod deklaracije funkcije, male zagrade se moraju pojaviti neposredno posle naziva funkcijeprilikom pozivanja funkcije:

upozorenje();

Te zagrade imaju dvostruku ulogu: one saopštavaju programu da želite da izvršite tufunkciju i one mogu da sadrže podatke – koji se terminološki nazivaju argumenti – koježelite da prosledite funkciji. Ne moraju svakoj funkciji da budu prosleđeni argumenti, alije obavezno da se koriste male zagrade u pozivu funkcije.

Vratimo se na primer korišćenja funkcije alert. Svakako ste uočili da smo kod pozivanjafunkcije stavljali neki string unutar zagrada:

alert("Ubaci i igraj");

String "Ubaci i igraj" je u stvaru argument koji smo prosledili funkciji alert; upozorenje jedizajnirano tako da prihvati argument i prikaže ga u okviru upozorenja čitača.

Funkcije mogu biti dizajnirane da prihvate više argumenata i ti argumenti ne moraju dabudu stringovi – mogu biti podaci bilo kog tipa koji možete kreirati u JavaScriptu.

Kada definišete svoju funkciju, možete da obezbedite nazive za argumente koji će joj bitiprosleđeni. Oni se uključuju unutar malih zagrada neposredno posle naziva funkcije i akoih ima više odvajaju se zagradama:

function sendvic(hleb, meso)

{

alert(hleb + meso + hleb);

}

Kada je naziv argumenta definisan u deklaraciji funkcije, taj argument postaje promenljivakoja je na raspolaganju svaki put kada se funkcija izvršava i ona omogućava da koristimofunkciji prosleđene podatke unutar same funkcije.

Iz prethodnog primera funkcije sendvic vidite da su definisana dva argumenta: hleb imeso. Ta dva argumenta se koriste kod pozivanja upozorenja da generišu donekle zakorisnika besmislenu poruku.

Prema tome, rezultat rada većine funkcija koje napišemo biće prikazivanje okvira upo-zorenja sa porukom korisniku. Međutim, postoje situacije kada su nam potrebne neštointeligentnije funkcije koje prosleđuju podatak drugim delovima programa. Funkcija možeda vrati (return) podatak naredbi koja ju je pozvala. Zgodna stvar u svemu ovome jeda možete dodeliti poziv funkcije kao vrednost promenljive i da tako vrednost promenljivebude nešto što funkcija vrati kao rezultat svog izračunavanja. Da bi funkcija mogla davrati vrednost potrebno je da se upotrebi u telu funkcije službena reč return iza koje sledivrednost koja treba da se vrati:

function sendvic(hleb, meso)

{

var napravljen = hleb + meso + hleb;

return napravljen;

}

276 Multimedija

Sada je funkcija potpuno spremna da se koristi u nekom izrazu:

var dorucak = sendvic("Tost", "Sir");

Promenljiva dorucak sada sadrži string "TostSirTost". Možemo biti i malo dovitljiviji ikoristiti mogućnost da vraćena vrednost može biti čak i izraz:

function sandwich(hleb, meso)

{

return hleb + meso + hleb;

}

U ovakvom slučaju biće izračunat izraz i biće vraćen rezultat koji će proizvesti isti efekatkao prethodna verzija koda.

Naredba return je uvek završni/konačni akt funkcije; ništa se više ne dešava u funkcijiposle vraćanja vrednosti.

10.4. Objekti

Do sada smo razmatrali promenljive i funkcije, a sada je red da razmotrimo objekte.Objekti su u suštini amorfni programski blokovi. Oni su amalgam svih drugih tipova po-dataka i uglavnom postoje da olakšaju život programerima. Njihov nejasan karakter jošuvek ne znači da oni nisu korisni.

Objekti egzistiraju kao oblik organizovanja promenljivih i funkcija u logičkim grupama.Ako se vaš program bavi zečevima i robotima onda ima smisla da imate sve funkcije ipromenljive koje se odnose na robota u jednoj oblasti a sve funkcije i promenljive kojese odnose na zečeve u drugoj oblasti. Objekti to rade grupisanjem skupova svojstava imetoda.

Svojstva su promenljive kojima se može pristupiti samo preko njihovog objekta, a metodesu funkcije kojima se može pristupiti samo preko njihovog objekta. Zahtevajući da se svapristupanja svojstvima i metodama obavljaju preko objekata koji ih sadrže, JavaScriptobjekti olakšavaju programerima upravljanje programima.

Skriptabilni čitač ima dosta posla oko pravljenja programskih objekata, koji generalno pred-stavljaju vidljive elemente HTML stranice u prozoru čitača. U vidljive objekte spadaju slikei elementi obrazaca. Međutim, postoje objekti koji nisu tako očigledni, ali imaju smislakada se uzmu u obzir HTML oznake koje su korišćene da bi se napravio sadržaj stranice.Da bi se pomoglo skriptovima da kontrolišu ove objekte, ali i autorima da pronađu nekisistem u mnoštvu objekata na stranici, definisan je model objekata dokumenta (DocumentObject Model, DOM). Model je nešto kao prototip ili plan organizacije objekata na stranici.

Svaki objekat je na neki način jedinstven. Tri najvažnije odlike objekta, uobičajeno, defi-nišu šta je on – kako izgleda, kako se ponaša i kako ga skript kontroliše. To su svojstva(properties), metode i procedure za obradu događaja (event handlers).

Svaki fizički objekat ima skup karakteristika koji ga definiše – oblik, boju, težinu i još


mnogo drugih koje ga razlikuju od ostalih objekata. Svaka od ovih osobina naziva se svoj-stvo, i svako od svojstava ima neku vrstu vrednosti koja mu je dodeljena. Svojstva HTMLobjekta najčešće se podešavaju atributima HTML oznaka. Prisustvo JavaScripta čestododaje opcione atribute čija se inicijalna vrednost može modifikovati kada se dokumentučita.

Ako svojstvo liči na opisni pridev za objekat (name, value, ...), onda je metoda glagol.Metoda je sve u vezi sa akcijom objekta. Ona ili nešto radi objektu, ili nešto sa objektomšto ima uticaja na ostale delove skripta ili dokumenta. One su neka vrsta komandi, alitakvih čija su ponašanja povezana sa određenim objektima.

Jedan objekat može imati neodređen broj metoda koje su sa njim povezane uključujućii ni jednu. Imena metoda se završavaju parom zagrada, a da bi se metoda pokrenula,naredba JavaScripta mora sadržati njenu referencu, preko njegovog objekta.

document.orderForm.submit()

Ponekad metoda zahteva da se s njom pošalju i dodatne informacije tj. parametri iliargumenti, koji se tada navode unutar zagrada.

Poslednja karakteristika objekta JavaScripta je procedura za obradu događaja. Događaji(events) su akcije koje se odvijaju u dokumentu, obično kao posledica akcije korisnika kaošto su pritisak mišem na dugme ili upisivanje teksta u polje za unos.

Gotovo svaki objekat JavaScripta u dokumentu prima događaj neke vrste. Da li će objekaturaditi bilo šta drugo kao odgovor na događaj, zavisi od atributa koji se unosi u definicijuHTML objekta. Atribut se sastoji od imena objekta i znaka jednakosti, kao i uputstva štada se radi kada određeni događaj otpočne.

Slika 10.1. Hijerarhija objekata Navigatora

278 Multimedija

Slika 10.2. Hijerarhija objekata Internet Explorer

10.4.1. Objekat window

Objekat prozor tj. window, nalazi se na vrhu hijerarhije objekata JavaScripta i predstavljamesto za sadržaj HTML dokumenta u prozoru browser-a. Kako se sve akcije dokumentaodigravaju unutar prozora, prozor je na vrhu hijerarhije objekata JavaScripta. Njegovefizičke granice sadrže JavaScript. Pored onog dela prozora gde se smešta sadržaj doku-menta, sfera uticaja prozora uključuje dimenzije prozora i sve ostale potrebne sastavnedelove koji okružuju oblast sa sadržajem, kao što su scrollbars, toolbars, menu, statusbari dr.

Svojstva i metode objekta prozora mogu se u skriptu referencirati na nekoliko načina.Najčešći način je da se u referencu uključi objekat prozora:

window.imeSvojstva

window.imeMetoda(parametri)

Kada pri referenciranju skript pokazuje na prozor u kome je smešten dokument, za objekatprozora postoji i sinonim – self. Nije poželjno da se self kombinuje u referencama uskriptu za prozor sa jednim okvirom; kada postoji više okvira self svakako olakšava čitanjei ispravku koda.

self.imeSvojstva

self.imeMetoda(parametri)

Nije uvek potrebno praviti novi objekat window koristeći kôd JavaScripta. Skript ne praviglavni prozor čitača, to čini korisnik aktiviranjem čitača ili otvaranjem URL-a ili datotekeiz menija čitača. Taj prozor je automatski formiran valjan objekat window čak iako jeprazan. Ali skript može generisati bilo koji broj potprozora ako je otvoren glavni prozor (iako sadrži dokument čiji će skript otvoriti potprozor).

Metoda koja pravi novi prozor je window.open() i sadrži više parametara koji definišukarakteristike prozora.


window. open("URL", "imeProzora", "osobineProzora")

osobineProzora je znakovni niz koji se sastoji od liste atributa, razdvojenih zarezima.Atributi koji se mogu kontrolisati u novonapravljenim prozorima su: toolbar, location,directories, status, menubar, scrollbar, resizable, copyhistory, width, height.

<html><head><title>otvaranje prozora</title>

<script language = " javascript">

function openAccessories(){

window.open ("accessories.html", "accessories", width= 100,

height= 100, scrollbars= no, resizable= no, menubar= yes,

location= yes ")

}

</script>

</head>

<body>

<form>

<input type="button" value="accessories" onclick= "openAccessories()">

</form>

</body>

</html>

Na sledećoj slici vidi se novootvoreni manji prozor koga je "definisao" i otvorio gornjiskript.

Slika 10.3. Otvaranje novog prozora

Čim se napravi drugi prozor u okruženju Web stranice, vazno je obratiti pažnju na up-ravljenje prozorskim slojevima. Korisnik vrlo lako može izgubiti manji prozor iza većeg.

280 Multimedija

Metoda window. focus() stavlja navedeni prozor ispred svih prozora. Nasuprot focus()je blur() koja odabrani prozor gura u pozadinu svih otvorenih prozora.

Statusbar na dnu prozora čitača redovno prikazuje URL veze kada na nju postavite pokazi-vač/kursor miša. I druge poruke se pojavljuju na statusnoj traci u vreme kad se dokumentučitava. JavaScript se može zgodno iskoristiti za prikazivanje vlastite poruke na status-noj traci u željenom trenutku. Svojstvu window.status se može pridružiti neki drugitekst. Da bi se promenio tekst u vezi, akcija se pokreće procedurom za obradu događajaonMouseOver= povezanog objekta. Osobitost korišćenja ove naredbe za podešavanje sta-tusne trake je da dodatna naredba return true mora da bude deo procedure za obradudogađaja. Radi jednostavnijeg podešavanja svojstva window.status, naredbe skripta senajčešće pišu kao skriptovi u redu u sklopu definicije procedure za obradu događaja.HTML se označi, a jednostavno se dodaju naredbe skripta:

<a href="http://home.mySite.com"

onMouseOver=

"window.status=’posetite homepage mog website- a’ ; true"> mySite

</a>

Još jedna zanimljiva i korisna metoda objekta window je setInterval. setInterval()se koristi kada je potrebno da skript pozove funkciju ili više puta izvrši neki izraz sa fiksnimkašnjenjem između poziva te funkcije i izraza. Tipične aplikacije su animacije, pomeranjemobjekta po stranici kontrolisanom brzinom. Objekat prozora reaguje na nekoliko događajakoje prouzrokuje sistem i korisnik, ali verovatno najčešće korišćen je događaj koji se aktiviraodmah čim se cela stranica učita – onload=. Prednost korišćenja ovog događaja je štopruža sigurnost o tome da su svi objekti u modelu jer ako se dozvoli pristup elementuobjekta, dok objekat još nije učitan, može se desiti greška u skriptu. Procedure za obradudogađaja objekta prozora smeštaju se unutar oznake body.

10.4.2. Iskrsavajući prozori

JavaScript omogućava kreiranje tri "iskrsavajuća/iskačuća" prozora (popup box):

1. alert box (upozorenje)

2. confirm box (dijalog za potvrdu)

3. prompt box (odzivni okvir za dijalog).

Metoda alert() generiše okvir za dijalog koji prikazuje svaki tekst koji se preda kaoparametar, a dugme OK omogućava korisniku da ukloni upozorenje. Čitač ubacuje rečikoje ukazuju na to da je alert box upozorenje JavaScripta – JavaScript Alert, i ovaj tekstse ne može menjati skriptom; samo se sadržaj druge poruke može menjati. Sledi sintaksa:

alert("sometext")

Sledi primer primene upozorenja. U pitanju je skup radio dugmadi čiji atributi value sadržeimena boja. Petljom for skript nalazi odabrano dugme i upozorava korisnika.


<html>

<head>

<title>alert box boje</title>

<script language= "javascript">

function kojaBoja() {

var form= document.forms[0]

for (var i=0; i< form.boje.length; i++) {

if (form.boje[i].checked) {

break

}

}

alert(’odabrali ste’ + form.boje[i].value + ’!’)

}

</script>

</head>

<body>

<form>

<input type="radio" name="boje" value= "crvena" onClick="kojaBoja() ">

<input type="radio" name="boje" value= "plava" onClick="kojaBoja() ">

<input type="radio" name="boje" value= "zuta" onClick="kojaBoja() ">

</form>

</body>

</html>

Vidimo da, ako je svojstvo checked true, tj. data opcija je odabrana, break naredbauslovljava izlazak iz petlje i indeks odabrane opcije pronađen pomoću for petlje koristi seza ispis poruke alert prozora.

Drugi stil iskrsavajućeg prozora prikazuje dva dugmeta: Cancel i OK, i naziva se confirmbox. window.confirm() je jedna od metoda koja vraća vrednost: true ako korisnikpritisne OK i false ako pritisne Cancel. Ovaj okvir za dijalog može se koristiti kao pod-sticaj korisniku da donese odluku o tome kako da se nastavi skript. Izlazna vrednost možese koristiti i kao uslov u nekoj if konstrukciji. Sledi sintaksa:

confirm("sometext")

Sledeći primer prikazuje kako to korisnik preko confirm prozora može uticati na dalji "tok"skripta:

<html>

<head>

<script language = " javascript">

function potvrdi() {

var odgovor = confirm("Napustate ovu stranicu?")

if (odgovor){

alert("Dovidjenja!")

window.location = "http://www.singidunum.ac.rs/";

282 Multimedija

}

else{

alert("Hvala sto ostajete!")

}

}

</script>

</head>

<body>

<form>

<input type="button" onclick="potvrdi()" value="Napusti ...">

</form>

</body>

</html>

Slika 10.4. Iskrsavajući prozor tipa Confirm

Dakle, ako korisnik potvrdi odlazak pritiskajući OK (promenljiva odgovor je true), skriptga šalje na matičnu stranu Univerziteta Singidunum (www.singidunum.ac.rs). Inače,iskače alert prozor koji zahvaljuje korisniku što ostaje.

Poslednji okvir za dijalog objekta prozora – prompt box, prikazuje zadatu poruku i obe-zbeđuje polje za unos teksta u koje korisnik unosi odgovor. Dva dugmeta, Cancel iOK, omogućavaju korisniku da ukloni okvir za dijalog sa dva efekta – otkazivanje celeoperacije ili prihvatanje unetog. Metoda window.prompt() ima dva parametra. Prvije poruka koja se prikazuje korisniku. U polju za unos može se priložiti podrazumevaniodgovor kao drugi parametar metode. Ako to nije potrebno, navodi se prazan niz – "".Pritiskom na dugme Cancel, metoda vraća null (u uslovu neke if konstrukcije smatra seza false); pritiskom na OK vraća se vrednost unetog znakovnog niza. Sintaksa je:

prompt("sometext", "defaultvalue")


Sledi primer:

<head>


function prompter() {

var reply =

prompt("Dobar dan korisnice! Kako je Vase ime?", "")

alert (reply)

}

</script>

</head>

<body>

<input type="button" onclick="prompter()" value="Moje ime!">

</body>

Slika 10.5. Iskrsavajući prozor tipa Prompt

Skript u gornjem primeru koristi prompt prozor da bi od korisnika dobio informaciju onjegovom imenu, a zatim ga prikazuje u alert prozoru.

10.4.3. Objekat document

Objekat document sadrži stvarni sadržaj stranice i on je sve ono što postoji u oblastiprozora čitača ili okvira prozora (naravno, izuzev trake sa alatima, statusne trake i sl.).

Svojstva i metode ovog objekta utiču na izgled i sadržaj dokumenta koji se nalazi u prozoru.Mnoga od tih svojstava uspostavljaju se pomoću atributa iz tagova/oznaka body, i mnogadruga svojstva su nizovi drugih objekata u dokumentu. Svojstvima i metodama objektadokumenta pristupa se direktno:

284 Multimedija

window.document.imeSvojstva

window.document.imeMetoda(parametri)

Referenca window je opciona kada se pristupa objektu dokumenta koji sadrži skript.

Ne zadaju se sva svojstva vezana za objekat dokumenta kao atributi oznaka body. Akose stranica naslovi nalazi unutar oznaka title u zaglavlju, na taj naslov utiče svojstvodocument.title. Naslov dokumenta je uglavnom kozmetičko podešavanje koje se prika-zuje u naslovnoj traci čitača. Takođe, skriptovi unutar oznaka script su deo dokumenta.

Drugi način da se napravi dokument je metodom document.write() i da se jednostavnoceo sadržaj ili deo HTML stranice smesti u prozor ili okvir. Metoda document.write()

se koristi u dve vrste skriptova – u trenutnim koji prave sadržaj stranice dok se učitava, iu odloženim, koji prave novi sadržaj u postojećem ili novom prozoru. Dva najbezbednijanačina za upotrebu metoda document.write() i document.writeln() (razlikuje se odwrite() po tome što dodaje još i novi red) su sledeća:

• ugrađivanje skripta u HTML dokument da bi se napisao deo ili ceo sadržaj stranice;

• slanje HTML koda, ili u novi prozor ili uzaseban okvir u prozoru sa više okvira.

U prvom slučaju se prepliću delovi skripta i HTML-a; skript se pokreće kada se dokumentučita, upisujući HTML sadržaj. U drugom slučaju, skript prihvata unos korisnika u jednomokviru i određuje izgled i sadržaj koji je namenjen drugom okviru.

10.4.4. Objekat Math

JavaScript obezbeđuje mnoštvo matematičkih mogućnosti. Sve ove mogućnosti sadržanesu u matemetičkom objektu Math. Ovaj objekat se razlikuje od drugih objekata programaJavaScripta po tome što se za njegovu upotrebu ne pravi njegova kopija. Skriptovi direktnopozivaju svojstva i metode objekta Math i on je deo reference.

var brojPi = Math.PI

var drugiKoren = Math.SQRT2

Metode pokrivaju širok dijapazon trigonometrijskih i drugih matematičkih funkcija kojerade sa brojnim vrednostima koje su prethodno definisane u skriptu.

var kojiJeVeci = Math. max(broj1, broj2)

var naStepen = Math. pow (broj, stepen)

var zaokruzi = Math.round(broj)

10.4.5. Objekat Date

Rad sa datumom počinje pozivanjem konstruktora objekta Date da bi se dobio jedanobjekat klase Date povezan sa određenim vremenom i datumom.

var danas = new Date()


Objekat Date uzima snimak PC-jevog internog sata i vraća datumski objekat za taj mome-nat. Interno, vrednost datumskog objekta u nekom momentu je vreme u milisekundamapočev od nula časova 1. januara 1970. po Griniču (GMT) - svetskoj referentnoj tački zasve vremenske konverzije. Tako datumski objekat sadrži informacije i o datumu i o vre-menu. Moguće je definisati objekat Date za neki drugi trenutak, navodeći tu informacijukao parametar u konstruktorskoj funkciji Date:

var nekiDatum = new Date ("Month dd, yyyy hh:mm:ss")

var nekiDatum = new Date ("Month dd, yyyy")

var nekiDatum = new Date (yy, mm, dd)

Komponente datumskog objekta mogu se izdvojiti pomoću niza metoda koje se moguprimeniti na trenutni datumski objekat, kao što su: getTime(), getYear(), getHours(),..., setMinutes(val), setSeconds(val).

Slika 10.6. Rezultat rada skripta za prikaz tekućeg vremena

Sledi primer skripta za prikaz trenutnog vremena.

<html>

<head>


function startTime() {

var today=new Date()

var h=today.getHours()

var m=today.getMinutes()

var s=today.getSeconds()

m=checkTime(m)

s=checkTime(s)

document.getElementById(’txt’).innerHTML=h+":"+m+":"+s

286 Multimedija

t=setTimeout(’startTime()’,500)

}

// ispred brojeva manjih od 10 dodaje se nula

function checkTime(i) {

if (i<10) { i="0" + i }

return i

}

</script>

</head>

<body onload="startTime()">

<h1>

<div id="txt"></div>

</body>

</html>

10.5. Događaji u JavaScriptu

JavaScript programi su većinom pokretani događajima (event-driven). Događaji su akcijekoje se pojavljuju, obično, kao rezultat nečega što korisnik uradi. Na primer, događaj jeklik mišem, kada elemenat forme dobije fokus i slično.

Koristeći obrađivače događaja (event handler) ugrađene u JavaScript, mogu se pisatifunkcije koje se aktiviraju kada se određeni događaj desi.

Obrađivači događaja su predstavljeni kao specijalni atributi koji modifikuju ponašanjeHTML elemenata u okviru kojih se nalaze. Na primer:

<body OnLoad="alert(Dobrodosli!)">

U prethodnom, oznaci početka tela HTML dokumenta dodat je atribut OnLoad, kojiobrađuje događaj učitavanja HTML dokumenta. U konkretnom slučaju, kada se učitavanjeHTML dokumenta završi, izvršiće se naredba JavaScripta dodeljena atributu OnLoad, uprozoru će se ispisati poruka "Dobrodosli".

Generalno, sintaksa za upotrebu obrađivača događaja je:

<HTML_Oznaka Ostali_atributi eventHandler="JavaScript program">

10.5.1. Šta su to događaji?

Događaji su signali koji se generišu kada se odigra određena akcija. JavaScript može dadetektuje te signale i mogu da se pišu programi koji reaguju na te događaje.

Događaji se u čitaču javljaju kada korisnik klikne na hipertekstualni link, kada se promenipodatak u ulaznom polju obrasca ili kada se završi učitavanje Web dokumenta itd.


10.6. Animiranje objekta

Koncept animiranja objekta u JavaScriptu je sličan animiranju grafičkog objekta u bilokom programskom jeziku. Objekat se animira tako što se "menja" u više koraka tokomnekog definisanog vremenskog intervala. U svakom od koraka objekat može biti promenjenna više načina, tj. mogu mu se menjati različita svojstva (veličina, položaj, transparent-nost, ...).

Jedna od animacija koju je relativno lako realizovati u JavaScriptu je iščezavanje ob-jekta, tj. promena transparentnosti. Međutim, pre nego što se upustimo u programiranje,potrebno je objasniti jednu važnu funkciju i jedan stil.

Funkcija setTimeout() je deo JavaScript biblioteke i poziva specificirani programski kôdcode posle isteka nekog vremenskog intervala milliseconds. Ovo je podržano od svih či-tača pošto se radi o delu standardne biblioteke.

Stil transparentnosti je uveden sa tehnologijom CSS2. Podržan je i u Internet Exploreru(IE) i u Mozilla tipu čitača (Firefox, Safari, ... ), ali je različito implementiran. U IEje implementiran kao filtar (obj.style.filter), sa vrednošću alpha(opacity=o), gdeje o broj između 0 i 100. Vrednost 0 znači potpunu providnost, dok 100 znači potpununeprovidnost. Kod Mozilla tipa čitača implemeniran je kao stil (obj.style.opacity),opacity, sa vrednošću između 0 i 1, gde 0 znači potpunu providnost, a 1 potpunu ne-providnost.

Kod animacije iščezavanja (fade animation), objekat koji iščezava postepeno menja trans-parentnost između graničnih vrednosti. Sledeći primer demonstrira animaciju iščezavanja,tj. objektu se menja neprovidnost od 100% do 0%, u 10 "koraka".

<head>

<title>Uvod u Javascript animaciju - jednostavan primer</title>

<script language="Javascript">

288 Multimedija

//

//Detekcija citaca

browser = undefined;

if(navigator.userAgent.indexOf("MSIE")!=-1)

browser = "IE";

else

browser = "Mozilla";

//Pozivanje funkcije fade

function fade(element)

{

//Objekat iscezava u 10 koraka

var steps = 10;

//postavljanje startne providnosti

setOpacity(element, 1);

// Petlja tajmerske funkcije

for(i=0; i<steps; ++i) {

setTimeout(function(){fadeCallback(element);}, (30*i));

}

}

//Callback to timer function

function fadeCallback(element)

{

//Prihvatanje tekuce providnosti

var opacity=getOpacity(element);

//Postavljanje nove providnosti

setOpacity(element, opacity-0.1);

}

//Detektovanje providnosti

function getOpacity(element)

{

var opacity = null;

//Providnost tekuceg citaca

if(browser=="IE") {

filter = element.style.filter;

if(filter) {


alpha = filter.split("alpha(opacity=");

opacity = alpha[1].substr(0,(alpha[1].length-1))/100;

}

}

else {

opacity = element.style.opacity;

}

return opacity;

}

//postavljanje providnosti

function setOpacity(element, o)

{

//detekcija koji citac se koristi i postavljanje providnosti

if(browser=="IE") {

element.style.filter = "alpha(opacity=" + (o*100) + ")";

}

else {

element.style.opacity = o;

}

}

</script>

</head>

<body>

<div style="width: 50px; height: 50px; background-color: red;"

onClick="fade(this);"></div>

</body>

Animacija se izvršava pozivanjem funkcije fade (element), gde je element referenca naelement/objekat, na primer:


onClick="fade(this);">

</div>

</body>

Usled čega iščezava DIV element kada se na njega klikne mišem.

Verovatno da je za većinu početnika teško da shvate kompletan programski kôd kojirealizuje pomenutu animaciju i zato izdelićemo ga na sekcije i ponaosob obrazložiti.


290 Multimedija

browser = "IE";

else


Prvi deo koda na jednostavan način detektuje o kom tipu čitača se radi pošto je tobitno kod potonje primene promene transparentnosti. Kôd koristi sledeću promenljivupod nazivom navigator.userAgent koja vraća identifikacioni string tekućeg čitača, azatim proverava da li sadrži "MSIE", što bi značilo da se radi o Internet Exploreru. Akonije u pitanju IE, tada je nebitno koji je čitač jer svi ostali koriste isti standardni stilprovidnosti.

10.6.1. Funkcija fade()


{

//Objekat iscezava u 10 koraka

var steps = 10;

//postavljanje startne providnosti


// Petlja tajmerske funkcije

for(i=0; i<steps; ++i) {

setTimeout(function(){fadeCallback(element);}, (30*i));

}

}

Ova funkcija se poziva da realizuje iščezavanje objekta. Ona prihvata jedan argument,element, koji je referenca elementa koji iščezava. Funkcija setTimeout() se poziva unu-tar ove funkcije. Ona se poziva u petlji i ona ujedno poziva funkciju fadeCallback()

koja će promeniti transparentnost iščezavajućeg objekta/elementa. Izraz (30*i) definiševremenski interval posle koga se funkcija fadeCallback poziva, tj. ona se poziva svakih30 milisekundi. Neprovidnost elementa je postavljena na 1 i to je početna vrednost.Trebalo bi imati u vidu da je funkcija povratnog poziva (callback function) omeđena safunction(){...}. To je zato što funkcija ima argumente primenjene na element iakoje jednostavno zapisana kao fadeCallback(element) tako da treba da bude pozvananeposredno, a ne da bude setovana kao vremenska funkcija.

10.6.2. Funkcija fadeCallback()


{

//Prihvatanje tekuce providnosti


//Postavljanje nove providnosti



}

To je funkcija povratnog poziva koju poziva funkcija setTimeout(). Ona utvrđuje tekućutransparentnost elementa koji iščezava i zatim postavlja novu smanjujući tekuću trans-parentnost za 0.1.

10.6.3. Funkcija getOpacity()


{

var opacity = null;

//Providnost tekuceg citaca

if(browser=="IE") {


if(filter) {



}

}

else {


}

return opacity;

}

Ova funkcija registruje tekuću transparentnost elementa koji iščezava. Pošto je imple-mentacija transparentnosti u čitačima različita, ova funkcija koristi ranije postavljenu pro-menljivu browser da utvrdi koju metodu da primeni. Na kraju vraća transparentnost kaoskaliranu vrednost između 0 i 1.

10.6.4. Funkcija setOpacity()


{

//detekcija koji citac se koristi i postavljanje providnosti

if(browser=="IE") {


}

else {


}

}

292 Multimedija

To je funkcija koja postavlja providnost/neprovidnost elementa koji se animira/iščezava.Kao i funkcija getOpacity(), radi detekciju tipa čitača korišćenjem prethodno postavljenepromenljive browser i menja providnost.

10.6.5. Dilema – setTimeout() ili setInterval()?

Postoje dve ključne funkcije u JavaScriptu koje mogu da se koriste kod animacije ob-jekata. Jedna, koju smo već upoznali, je setTimeout(), a druga je setInterval().Obe obavljaju sličnu operaciju, ali postoji suptilna razlika. Ono što je zajedničko za obe jepoziv funkcije pošto je istekao vremenski period specificiran u milisekundama. Međutim,dok setTimeout() poziva tu funkciju posle isteka specificiranog perioda samo jedanput,dotle setInterval() poziva tu funkciju posle svakog protoka specificiranog perioda, upetlji, sve dok se ne pozove funkcija clearInterval().

Koju funkciju je bolje koristiti? Posle eksperimentisanja sa obe funkcije utvrđeno je da suobe podjednako korisne i da obe zahtevaju pisanje koda koji proverava da li je animacijazavršena ili ne. U slučaju korišćenja funkcije setTimeout(), funkcija fade() izraču-nava koliko puta je mora pozvati na osnovu broja koraka, a u slučaju korišćenja funkcijesetInterval(), kôd u funkciji povratnog poziva određuje da li je animacija završenaili ne. U slučaju prikazanog primera jednostavne animacije, setTimeout() je pogodnijajer se broj pozivanja animacionog povratnog poziva izračunava u funkciji fade(), dokse u slučaju setInterval() u animacionoj funkciji povratnog poziva utvrđuje da li jeanimacija završena ili ne i ID tajmera mora biti memorisan (analizirati sledeći primer).Međutim, ustanovljeno je da je za veće i složenije animacije funkcija setInterval()

pogodnija naročito kod metode variranja inkrementiranjem/dekrementiranjem transpa-rentnosti po koraku.

Sledi primer animacije koja koristi funkciju setInterval().

<head>

<title>Uvod u Javascript animaciju - koristi se setInterval()</title>

<script language="Javascript">

//

//Detekcija citaca

browser = undefined;


browser = "IE";

else


timer = null;

//Called to fade element



{

//We will fade the object in 10 steps

var steps = 10;

//Set the timer interval to 30ms and store the setInterval() ID

timer = setInterval(function(){fadeCallback(element);}, 30);

}

//Callback to timer function


{

//Get the current opacity


if((opacity-0.1)==0)

clearInterval(timer);

//Sets the new opacity


}

//Gets an element’s opacity


{

var opacity = null;

//Get the opacity based on the current browser used

if(browser=="IE") {


if(filter) {



}

}

else {


}

//If no opacity has been set make it 100%

if(!opacity) {


opacity = 1;

}

294 Multimedija

return opacity;

}

//Sets an element’s opacity


{

//Set the opacity based on the current browser used

if(browser=="IE") {


}

else {


}

}

</script>

</head>

<body>


onClick="fade(this);"></div>

</body>

Primer je sličan primeru koji koristi funkciju setTimeout(), ali postoji par bitnih razlika.Pažljivim proučavanjem prethodnog listinga uočava se da je kôd za utvrđivanje okončanjaanimacije uključen u animacionu funkciju povratnog poziva.


{

//Get the current opacity


if((opacity-0.1)==0)

clearInterval(timer);

Pomenuti segment koda koristi funkciju clearInterval(), koja briše tajmer koji jekreirala funkcija setInterval(), čiji je jedini argument ID (identifikator) kreiranog tajme-ra. Kao što se iz primera vidi, ID tajmera se vraća kada se poziva funkcija setInterval().

//Set the timer interval to 30ms and store the setInterval() ID

timer = setInterval(function(){fadeCallback(element);}, 30);

Prema tome, ID se mora memorisati/čuvati kako bi tajmer mogao da se obriše poslekorišćenja.


10.7. Provera matičnog broja građanina pomoću

JavaScripta

Često je potrebno na Webu u nekom formularu upisati jedinstveni matični broj građanina,JMBG. Broj je dužine 13 znakova/cifara i moguće su greške prilikom upisivanja, zato jepotrebno izvršiti proveru unetog podatka.

Matični broj ima 13 cifara od kojih je trinaesta cifra kontrolni broj.

Oblik/struktura matičnog broja je DDMMGGGRRSSSK, gde je:

• DD - dan rođenja,

• MM - mesec rođenja,

• GGG - godina rođenja, bez prve cifre,

• RR - oznaka regiona,

• SSS - redni broj osobe unutar datuma rođenja i regiona plus oznaka pola (ako jeSSS < 500, onda je reč o muškom polu, a za SSS > 499 reč je ženskom polu),

• K - kontrolni broj (od 0 do 9).

Računanje kontrolnog broja:

D D M M G G G R R S S S K

7 6 5 4 3 2 7 6 5 4 3 2

1. Pomnoži se gornji broj (prvi red) sa donjim (drugi red) i dobijeni umnošci saberu.

2. Označimo dobijeni zbir sa SUMA.

3. Podelimo celobrojno dobijeni zbir sa 11, tj. SUMA%11.

4. Označimo dobijeni ostatak kao OST.

5. Oduzmimo ostatak od 11 i dobijenu razliku označimo kao RAZ (RAZ=11-OST).

• Ako je ostatak 1 (OST=1, RAZ=10) matični broj je pogrešan.

• Ako je ostatak 0 (OST=0, tj. SUMA je deljiv sa 11 bez ostatka), kontrolni brojK je 0.

• Ako je ostatak broj između 1 i 11 (1<OST<11) kontrolni broj K je razlika između11 i ostatka (K=RAZ).

• Ako je K različito od RAZ matični broj je pogrešan.

Niže je dat primer HTML formulara u koji se upisuje samo JMBG i vrši provera unosa.

296 Multimedija

<HTML>

<HEAD>

<SCRIPT type="text/javascript">

function validJMBG(jmbg)

{

kon="765432765432";

suma=0;

len=jmbg.length;

digits="0123456789123";

if(len != 13)

{ alert("JMBG nije korektne duzine!")

document.dataentry.jmbg.focus()}

for(i=0; i<13; i++)

{if (digits.indexOf(jmbg.charAt(i))<0)

{alert("Svi znaci moraju biti brojevi!")

document.dataentry.jmbg.focus()

}

}

for(i=0; i<12; i++)

{s=jmbg.substring(i,i+1);

s=parseInt(s);

kk=kon.substring(i,i+1);

kk=parseInt(kk);

suma=suma+s*kk;

}

ost=suma%11;

raz=11-ost;

k=jmbg.substring(12,13);

if(ost==1)

{alert("JMBG nije ispravno upisan!")


if(k!=raz)

{alert("JMBG nije ispravno upisan!")


}

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="dataentry">

<h2>Provera ispravnosti JMBG-a</h2>

<p>

Upi\v site JMBG broj (9999999999999):<br>

<INPUT TYPE="text" NAME="jmbg" SIZE=10 >

<P>

<INPUT TYPE="button" VALUE="Posalji"


onClick="validJMBG(jmbg.value)">

</BODY>

</HTML>

Slika 10.7. Formular sa proverom JMBG pomoću Javascripta

10.8. Kolačići

Svakako nešto sa čime se srećemo relativno često na Webu jesu kolačići - cookies. Me-hanizam cookies omogućava skladištenje male količine informacija na računaru na dostabezbedan način. Cookie se često koristi za skladištenje korisnikovog imena i/ili lozinke naWeb prezentacijama. Postoji nekoliko vrsta cookies-a:

• Name cookie - prvi put kada neko poseti Web prezentaciju koja sadrži skript za ovajcookie, posetilac mora da unese neko korisničko ime. To ime se čuva u cookie-jui sledeći put kada dati korisnik pristupi toj lokaciji, dobiće pozdravnu poruku tipa:"Zdravo Jelena!". Ime se izdvaja iz cookie-ja.

• Password cookie - slično Name cookie-ju, ali ovde se unosi lozinka koja se takođečuva u cookie-ju.

• Date cookie - datum prve posete datog korisnika Web prezentaciji stavlja se ucookie. Pri sledećoj poseti moguće je ispisati poruku korisniku tipa: "Poslednji putste posetili ovu prezentaciju u utorak, 20.03. 2010."

Kada se prvi put takve informacije unesu u obrazac koji se šalje CGI programu (skriptna serverskoj strani), CGI program preporučuje čitaču da tu informaciju zapiše na harddisk računara. Međutim, čitač ne otvara svima direktorijum hard diska. Mehanizamcookies obezbeđuje pristup do posebne tekstualne datoteke na hard disku, koja se nalazi

298 Multimedija

na mestu koje zavisi od operativnog sistema. U Windows verziji Navigatora datoteka sezove cookies.txt i smeštena je u direktorijumu Navigatora. Internet Explorer koristi malodrugačiji sistem – svaki cookie se snima u sopstvenu datoteku u direktorijumu Cookieskoji je smešten među sistemskim direktorijumima. U poljima svakog zapisa cookie nalazise sledeće:

• domen servera koji je napravio cooki-e

• informacija o tome da li je potrebna zaštićena HTTP veza da se pristupi cookie-ju

• putanja URL-a koji mogu pristupiti cookie-ju

• ime cookie-ja

• znakovni nz koje je povezan sa cookie-jem

Pristup cookies-ima iz JavaScripta ograničen je na postavljanje vrednosti (sa opcionimparametrima) i čitanje podataka iz njih (bez parametara). Da bi se podaci sa cookie-jaupisali u za njih predviđenu datoteku, koristi se JavaScript operator dodele i svojstvodocument.cookie. Sintaksa za dodeljivanje vrednosti kolačiću je:

document. cookie =" cookieName= cookieData

; expires= timeInGMTString

; path= pathName

; domain= domainName

; secure "

Svaki cookie mora imati ime i znakovni niz kao vrednost (čak i kada je u pitanju prazanniz). Par ime – podatak mora biti jedan niz bez tačke i zareza, zareza ili znaka razmaka.Za razmak između reči poželjno je koristiti funkciju escape() koja kodira ASCII razmak kao%20 (a zatim unescape() za dekodiranje na običan razmak za kasnije kada cookie budepozvan). Na primer, ako se kolačiću userName dodaje znakovni niz Jelena, to izgledaovako:

document. cookie = "userName=Jelena"

Ako se dodaje još parametara i oni svi moraju biti uključeni u jedan znakovni niz ipridruženi svojstvu document.cookie. Dakle, podaci koji se pozivaju iz cookie-ja po-moću JavaScripta smeštaju se u jedan znakovni niz, uključujući i ceo par ime - podatak.

Kolačići se ne mogu tretirati kao objekti, već se iz znakovnog niza mora izdvojiti željenipodatak iz para ime - podaci koristeći metod substring(). Prvi parametar metoda sub-string sadrži znak jednakosti, kojim se razdvaja ime od podataka.

Najbolje rešenje je napraviti funkciju opšte namene koja može da radi i samo sa jednim isa više cookies-a.

function getCookie(c_name) {

if (document.cookie.length>0) {

c_start=document.cookie.indexOf(c_name + "=")


if (c_start!=-1) {

c_start=c_start + c_name.length+1

c_end=document.cookie.indexOf(";",c_start)

if (c_end==-1) c_end=document.cookie.length

return

unescape(document.cookie.substring(c_start,c_end))

} } return "" }

Pozivanjem ove funkcije predaje se ime cookie-ja kao parametar. Funkcija raščlanjujeceo znakovni niz cookie-ja odbacujući sve unose koji se ne slažu sve dok ne pronađe imecookie-ja.

Cookies imaju i rok trajanja. Ako cookie treba da opstane i posle tekuće sesije, on imai rok trajanja koji postavlja pisac cookie-ja. Datum roka trajanja mora biti predat kaoznakovni niz koji označava vreme po Griniču (GMT).

Sledeća funkcija kao parametre ima ime cookie-ja, njegovu vrednost i broj dana preostalihdo isteka roka cookie-ja. Prvo, broj dana se konvertuje u odgovarajući datum, zatim sedodaje broj dana posle kog ističe rok cookie-ja. Posle toga, pamti se ime, vrednost idatum isteka roka cookie-ja u document.cookie objektu.

function setCookie(c_name,value,expiredays){

var exdate=new Date()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" :

;expires="+exdate.toGMTString()) }

Konačno, funkcija koja ispisuje pozdravnu poruku nakon što prepozna korisnika po koris-ničkom imenu, ako je cookie postavljen. Ako cookie nije postavljen, od korisnika se tražida unese ime u prompt box.

function checkCookie() {

username=getCookie(’username’)

if (username!=null && username!="") {

alert(’Welcome again ’+username+’!’)}

else {

username=prompt(’Please enter your name:’,"")

if (username!=null && username!="") {

setCookie(’username’,username,365)

}}}

10.9. Namenske JavaScript biblioteke

Prateći razvoj Weba i trendove u dizajnu primećuje se da pored velike pažnje koju jeprivukao tzv. Web 2.0 koncept može se izvući par korisnih i suštinskih zaključaka. Iakosu namenske/specijalizovane JavaScript biblioteke postojale u principu otkad postoji i

300 Multimedija

sâm JavaScript došlo je vreme da takve biblioteke postanu opšteprihvaćene. Istovre-menim razvojem Web 2.0, AJAX-a i modernih Web aplikacija (kao što su Google Mail iliGoogle Docs&Spreadsheets) počelo se o tim bibliotekama sve više pričati. Očito je da sekonstantno napredovanje tehnologija i softvera odrazilo i na ponudu Web aplikacija – sveviše stvari je moguće ponuditi korisnicima kroz Web stranice i prozor čitača.

Većina osveženja na aktuelnim dinamičnim i interaktivnim stranicama je napravljena po-moću neke od namenskih JavaScript biblioteka koje omogućuju fleksibilno i jednostavnokreiranje takvih sadržaja. Nameće se potreba za razmatranjem kakve prednosti Web stva-raocima donose te mnogobrojne JavaScript biblioteke.

Funkcionalnost JavaScript biblioteka možemo podeliti u tri osnovne kategorije:

• DOM pristup i manipulacija,

• olakšavanje i ubrzavanje programiranja,

• proširivanje funkcionalnosti pomoću gotovih komponenti.

10.9.1. DOM pristup i manipulacija

DOM pristup i manipulacija su najvažniji za efikasno upravljanje sadržajem Web stranice.DOM je standardni model koji raščlanjuje Web stranicu na tačno definisani niz (stablo)objekata koji sadrže druge objekte, i pomoću takvog modela moguće je pristupiti bilokom delu Web stranice da bi pročitali ili izmenili neko njegovo svojstvo. Zbog toga je radsa DOM-om zapravo jezgro oko kog se temelji bilo kakva manipulacija Web stranicama.DOM je vrlo pouzdan i podržan u svim čitačima, ali osnovne metode implementirane uJavaScript (jedna od njih je i, na primer, document.getElementById) često su nedo-voljne za elegantno rešavanje tipičnih zadataka. Tu na red dolaze razne biblioteke kojeunapređuju i olakšavaju rad sa DOM-om. Osim toga, neke biblioteke čak nude imple-mentaciju novih CSS selektora (koji su uvedeni u novu verziju 3 CSS standarda koji jošnije implementiran u sve čitače) ili neke druge načine pristupa elementima.

Osim podrške za DOM skoro sve biblioteke pokušavaju (i uspevaju) što je moguće višeizgladiti svima mrske razlike prikaza elemenata između raznih čitača.

Ako animaciju na Web stranici posmatramo kao promenu nekog svojstva određenogelementa tokom vremena, onda ćemo lako zaključiti da pomoću JavaScript bibliotekamožemo jednostavno izraditi animacije koje će podići nivo upotrebljivosti i zanimljivostiWeb stranica (naravno, uz smišljenu i umerenu upotrebu).

10.9.2. Olakšavanje i ubrzavanje programiranja

Osim samog olakšavanja pristupa i manipulacije DOM objektima (elementima stranice),JavaScript biblioteke omogućuju korisnicima razne druge mogućnosti koje se razlikuju odbiblioteke do biblioteke i zavise od njene namene. Većina ih ima ugrađene efekte kojeje moguće primeniti na elemente web stranica. Efekti se kreću od običnih promena CSSsvojstva elementa do animacija i sličnih komplikovanih efekata koje bi bilo vrlo teškopouzdano implementirati u JavaScriptu.


Skoro sve biblioteke olakšavaju najkomplikovaniji i možda najvažniji deo razvijanja Weba,takozvani event handling (upravljanje "događajima" koji pokreću neki efekt, npr. dolazakpokazivača miša iznad nekog elementa). Biblioteke pomoću svojih ugrađenih metodapružaju programeru lakši i razumljiviji način pokretanja čestih funkcija, koje će u bilokom čitaču imati isti efekt. Većina njih olakšava manipulaciju stringovima i kolekcijama(bilo kakvih podataka) i podržava asinhrono dohvatanje/dopremanje podataka sa raznihlokacija (najčešće u XML ili JSON obliku).

10.9.3. Proširivanje funkcionalnosti pomoću gotovih komponenti

Neke biblioteke podržavaju dodavanje gotovih komponenti koje proširuju funkcionalnoststranica na vrlo jednostavan način. Primer proširenja je jQuery.lightbox koji omo-gućava efektno pregledavanje slika. Obično su te komponente osmišljene na način dazauzimaju malo prostora i da se lako dodaju već aktivnoj biblioteci. Na taj način je mogućeuz relativno malo truda dodati stranici novu funkcionalnost čija je implementacija većproverena i radi brzo i pouzdano umesto da svaki autor razvija svoju varijantu potrebnogdodatka.

10.9.4. Izbor JavaScript biblioteke

Trenutno se na Internetu može pronaći ogroman broj biblioteka (prema nekim izvorimapreko 1 000). Ali od takvog "izobilja" u obzir se isplati uzeti samo nekih 20-ak biblioteka.Ostale otpadaju iz raznih razloga (funkcionalnost, nepridržavanje standarda, prestanakrazvoja i sl.).

Za izbor JavaScript biblioteke su presudna dva faktora – namena i veličina biblioteke. Pos-toje krajnosti koje omogućuju napredno objektno programiranje u JavaScriptu i koje pred-stavljaju pravo malo razvojno okruženje. Primer takvog okruženja je Prototype+ExtJS,gde ExtJS predstavlja samu JavaScript biblioteku. Nedostaci takvih okruženja su komp-likovano korišćenje, teško savladavanje osnova i veličina same biblioteke koja će usporitiučitavanje Web stranice. Postoje i biblioteke koje jednostavno olakšavaju manipulacijuelementima stranice, dodajući razne efekte i olakšavajući izbor DOM elementa kojim ma-nipulišemo. Takve biblioteke su jednostavnije koncipirane, manje su i lakše je naučitinjihovo korišćenje. Primeri takvih biblioteka su jQuery i Mootools (koja čak omogućavada odaberemo samo one funkcionalne delove koji su nam potrebni).

10.10. Fiksni i "kolapsabilni" paneli

U ovom delu biće reči o fiksnim i "kolapsabilnim" panelima, a biće prikazani i odgovarajućiprimeri.

10.10.1. Dizajn fiksnog panela

Prvo ćemo krenuti sa izradom fiksnog panela. To bi zaista trebalo da bude trivijalno.Mislim da je sasvim jasno da je lako kreirati i koristiti HTML TABLE sa dva reda, gde

302 Multimedija

se u prvom redu nalazi tekst naslova i neka obojena pozadina. Da bi sve izgledalo lepše,trebalo bi dodati i borduru.

To je zaista lako, međutim, većina Web programera troši ogromno vreme na izbor naj-boljih atributa, kolornih šema, rasporeda i definicija. Tu su od ogromne pomoći šabloni(templejti), zato što su taj deo posla već odradili neki drugi ljudi.

Takođe, postoji mnogo potencijalnih prepreka. Na primer, postavljanje bordure border=1za element TABLE daje punu borduru široku jedan piksel. Zatim, tabele sa podrazumeva-nim bordurama ne izgledaju isto u Internet Exploreru i Firefoxu. Prema tome, bolje je dakoristite CSS, sa stilom style="border: solid 1px".

<html>

<body>



<table cellspacing="0" cellpadding="5" width="170"

border="1" style="border-color:#336699; text-align:center;">

<tr><td bgcolor="#336699" style="color:#ffffff;">

N A S L O V

</td></tr>

<tr><td bgcolor="#f5f5f5">

<img width="150" height="100" src="../images/photo.jpg"

alt="Ovo je slika" title="Ovo je slika" /><br />

Sadrzaj ...

</td></tr>

</table>

</body>

</html>

Takođe, preporučuje se da koristite DIV, a ne TABLE, sa istom CSS style postavkom zaborduru. I DIV i TABLE su blok HTML elementi, ali DIV rendering se smatra pouzdanijim.

Pored toga, ne morate uopšte da koristite TR i TD elemente. Bilo kako bilo, mnoge tehnikekoriste ili DIV, ili TABLE, ili kombinaciju.

Nisu potrebne slike, JavaScript kôd, eksterni fajlovi ili druge sekvence koda. Koristimotakvu kolornu šemu (dark blue za traku sa potpisom za sliku i tanku borduru – u tonu sadominantnom bojom slike – a svetlo sivu za pozadinu) da je kontrast dovoljno izražen ida su linije oštre.

Obratite pažnju na korišćenje float:right stila u DIV elementu, koji omogućava daporavnamo boks desno u redu sa tekstom.

Donekle zbunjujući su oni atributi koji se odnose na margine između "rođačkih" (sibling)i ugnježđenih (nested) HTML elemenata. TABLE cellpadding – koji podrazumevano nijenula – definiše prostor između zida ćelije i sadržaja (margine).

TABLE cellspacing - takođe podrazumevano nije nula – definiše prostor između susednihćelija i redova. Ukoliko vam nisu potrebni, isključite ih eksplicitnom postavkom na 0.

Bolje je da ih definišete kroz CSS. Oni važe i za TABLE i za DIV, a možete da ih deklarišetepojedinačno za svaku stranu (top, bottom, left i right). Za TABLE, padding je sličan sacellpadding, ali ne postoji CSS atribut za razmak. Postoji atribut margin, ali on definišeprostor upolje (outer space) – ne unutar – ono što ostaje između elementa i njegovogprethodnika (roditelja).

Sledi HTML kôd za jednostavan panel sa zaista tankom bordurom, koji koristi TABLEkontejner i neposrednu stilsku deklaraciju unutar reda:

<html>

<body>



<table cellspacing="0" cellpadding="0"

style="width:170px; border: solid 1px #336699; text-align:center;">

<tr>

<td style="background-color:#336699;color:#ffffff;padding:5px;">

N A S L O V

</td>

</tr>

<tr><td style="background-color:#f5f5f5;padding:10px;">


alt="Ovo je slika" title="Ovo je slika " /><br />

Sadrzaj...

</td></tr>

</table>

</body>

</html>

A evo i ekvivalentne verzije koja koristi DIV kontejner:

<html>

<body>

304 Multimedija



<div style="width:170px;border:solid 1px #336699;text-align:center;">

<div style="background-color:#336699;color:#ffffff;padding:5px;">

N A S L O V

</div>

<div style="background-color:#f5f5f5;padding:10px;">



Sadrzaj...

</div>

</div>

</body>

</html>

Dalji rad nastavićemo sa potonjom DIV verzijom i dodaćemo još dva nova elementa: (1)gradijentnu pozadinu za naslovnu traku i (2) senku ispod panela sa sadržajem.

Gradijentne pozadine prikazuju osnovnu boju u različitim nijansama, od svetle do tamne,po vertikalnoj ili horizontalnoj osi. Najjednostavnije rešenje za gradijentnu pozadinu je danapravite malu sliku koja se ponavlja (repeat). Ovde je upotrebljena plava grdijentna slikadimenzija 20× 60 piksela u PNG formatu, koja će se ponavljanjem "razvući" (popločati)prema veličini naše trake sa naslovom. Sve što je potrebno da uradite je da zamenitestilski atribut background-color za naslovnu traku sa atributom background-image. Na-ravno, nemojte da zaboravite deklaraciju background-repeat:repeat-x, za automatskoponavljanje slike duž horizontalne ose.

Postoji više tehnika za kreiranje senke (shadow), ali je svakako najjednostavnije i vizuelnosasvim efektno korišćenje jedne proste slike koja se dodaje neposredno ispod panela. Slikamora da bude dovoljno velika kako bi mogla da se koristi i kod najvećeg mogućeg panelakoji u tom trenutku koristite. Kada se prikaže unutar IMG taga, njena širina mora da budepostavljena na širinu koju ima i panel. Njena visina takođe mora da bude prilagođena saistim faktorom kako bi se održala proporcionalnost.

<html>

<body>



<div style="width:170px;border:solid 1px #336699;text-align:center;">

<div style="background-image: url(../images/gradient_blue.png);

background-repeat: repeat-x; color:#ffffff; padding:5px;">

N A S L O V

</div>

<div style="background-color:#f5f5f5;padding:10px;">


alt="This is an image" title="This is an image" /><br />

Sadrzaj...

</div>

</div>


<img width="170" height="20" src="../images/shadow.gif" alt="" />

</body>

</html>

10.10.2. Dizajn "kolapsabilnog" panela

Sledi jedan relativno složen primer izrade tzv. "kolapsabilnog" panela u kome će bitiobjedinjeno znanje HTML-a, CSS-a i JavaScripta.

Došlo je vreme da dodamo našem panelu funkcionalnost skupljanja i razvijanja (expandand collapse). Ovo dinamičko ponašanje zahteva JavaScript kôd na klijentskoj strani.

Pre toga, potrebno je da dodamo jedan vizuelni element, takozvani ševron (chevron ima-ge, trakasti čin) na naslovnoj traci, koji se koristi kao okidač događaja za razvijanje iskupljanje, a takođe pokazuje tekuće stanje panela. Stoga su nam potrebne dve slikeza ševron, druga je za 180 stepeni zarotirana prva slika. Imenovaćemo ih jednostavnoexpand.gif i collapse.gif, a kreirati kao transparentne GIF slike.

Prikazaćemo ševron na desnoj strani trake za naslov, a tekst potpisa poravnaćemo ulevo.Da bi to realizovali, podelićemo naš prethodni DIV caption element (element za naslovi ševron sliku) na dva DIV-potomka, koji koriste float:left i float:right stilove zasvoje horizontalno poravnanje unutar pretka. Kada pređemo mišem preko njih pokazivačmenja oblik u šaku sa ispruženim kažiprstom i kada kliknemo "okida" se događaj podnazivom togglePanelStatus.

Za pretraživač Firefox, potrebno je takođe da postavimo njegovu visinu. CSS postavkaoverflow:hidden diktira da će bilo koji ugrađeni sadržaj koji je veći od pretka biti au-tomatski sakriven.

Podrazumeva se da većina čitača ne štampa pozadinske slike i boje. To možete videtiu Print Preview režimu, ako je vaša Page Setup ili čitačeva postavka koja se odnosi nabackground printing isključena. Naš panel neće štampati svoju boju pozadine naslovne

306 Multimedija

trake, ali bi želeli da vidimo bar jednu tanku liniju koja odvaja potpis od sadržaja. Zatosmo postavili stil atribut border-top za oblast sadržaja.

<html>

<head>


.squarebox {

width: 100%;

border: solid 1px #336699;

text-align: center;

overflow: hidden; }

.squareboxgradientcaption {

color: #ffffff;

padding: 5px;

background-image: url(../images/gradient_blue.png);

background-repeat: repeat-x; }

.squareboxcontent {

background-color: #f5f5f5;

padding: 10px;

overflow: hidden;

border-top: solid 1px #336699; }

</style>

<script language="javascript" type="text/javascript">

function togglePannelStatus(content)

{

var expand = (content.style.display=="none");

content.style.display = (expand ? "block" : "none");

var chevron = content.parentNode

.firstChild.childNodes[1].childNodes[0];

chevron.src = chevron.src

.split(expand ? "expand.gif" : "collapse.gif")

.join(expand ? "collapse.gif" : "expand.gif");

}

</script>

</head>

<body>



<div style="width:170px;">

<div class="squarebox"><div

class="squareboxgradientcaption"

style="height:20px; cursor: pointer;"

onclick="togglePannelStatus(this.nextSibling)"><div

style="float: left">N A S L O V...</div><div

style="float: right; vertical-align: middle"><img

src="../images/collapse.gif" width="13"


height="14" border="0"

alt="Show/Hide" title="Show/Hide" /></div>

</div><div class="squareboxcontent">

<img width="150" height="100"

src="../images/photo.jpg"


Sadrzaj...

</div>

</div>

<img width="170" height="20" alt="" src="../images/shadow.gif" />

</div>

</body>

</html>

Uočite par izmena u ovom kodu. Odvojili smo glavne CSS stilove kao CSS klase, dekla-risane u bloku STYLE sekcije HEAD Web stranice.

Slika 10.8. Animirani kolapsabilni panel u akciji

308 Multimedija

Stilovi se sada referenciraju od strane HTML elemenata po nazivu (imenu) klase. Ovo jezgodno zbog višestruke iskoristivosti, boljeg strukturiranja i kreiranja kompaktnijeg HTMLkoda. Ako kreirate više panela na istoj stranici sa sličnim stilovim, lakše je da specifici-rate samo naziv CSS klase, a ne da ponavljate više puta iste vrednosti. Kadgod su vampotrebni dodatni stilovi za HTML element koji je već renderovan kroz CSS klasu, dodajtestilski atribut neposredno preko inline pristupa.

Pogledajte sada JavaScript kôd, unutar SCRIPT tagova u sekciji HEAD. Potpis (captiontitle) poziva togglePannelStatus funkciju kada se na njega klikne, prosleđujući kaoargument DIV content element. Ovaj element će biti sakriven (display="none") kod sku-pljanja (on collapse), a prikazan (display="block") kod razvijanja (on expand). Ostatakkoda menja izvor slike ševrona. Zapazite da sa SPLIT-JOIN kombinacijom na SRC stringatributu od IMG, menjamo samo naziv fajla, ne vodeći računa o celoj URL putanji.

10.10.3. Osnovna JavaScript DOM svojstva

Većina implementacija sličnih kolapsabilnih panela koje možete naći na vebu su sasvimnepotrebno suviše složeni. Neki zahtevaju jedinstvene vrednosti id atributa, kukije naklijentskoj strani, elemente kojima se pristupa kroz pozive document.getElementById...U našem slučaju nije potrebno ništa od toga. Koristićemo samo JavaScript DOM (Docu-ment Object Model) blok koda i ništa više, i to ćemo referencirati ka HTML elementimana relativan način. U tom smislu postoje četiri osnovna DOM svojstva koja treba daznate i da koristite, a prikazana su na slici: parentNode, nextSibling, firstChild ichildNodes.

JavaScript DOM je sada standard za većinu čitača, ali postoji jedna stvar o kojoj trebada vodite računa: za razliku od Internet Explorera, Firefox neće ignorisati beline izmeđudva elementa, već će ih smatrati #Text DOM čvorom. Stoga striktno se pridržavajteneposrednog ređanja HTML tagova, bez belina između zatvarajućeg taga i početka sle-dećeg taga.

Mogli biste i da enkapsulirate kompletan HTML kôd panela u funkciju, klasu ili Webkontrolu na serverskoj strani, koju možete pozvati sa različitim vrednostima parametara,kao što su da li je panel inicijalno razvijen ili skupljen, njegova širina, string naslova,HTML sadržaj, da li želite senku itd.

Dobra stvar kod serverske ASP.NET/PHP ili čak klijentske JavaScript funkcije je da možeteautomatski da podesite veličinu slike senke i da vaš kôd postane još kompaktniji. Buduća


poboljšanja ove funkcije bi mogla da se odnose na automatsko propagiranje na sve stranicesajta gde se panel koristi.

10.10.4. Dizajn animiranog kolapsabilnog panela

Trenutak je da se doda završna finesa – animacija. Kada se panel razvija ili skuplja,korisnik mora da vidi da se visina sadržaja postepeno povećava ili skuplja, što u stvaristvara utisak animacije.

I ovoga puta učinjen je pokušaj da se stvari učine što je moguće prostijim, tako da jeizbegavano korišćenje ID-ova ili smeštanje međuvrednosti u kukije na klijentskoj strani.

Potpuno je jasno da treba da odredimo šta će biti visina (height) renderovanog sadržaja.To je obično teško, zato što nemamo postavljenu vrednost visine i stvarna vrednost visinese dinamički određuje u vreme izvršavanja od strane čitača.

Međutim, srećna okolnost je što imamo na raspolaganju offsetHeight svojstvo HTMLelementa, ali on mora biti vidljiv (HTML element). Kada je naš sadržaj skupljen i sa-kriven, prva stvar koju moramo da uradimo je da ga učinimo vidljivim (postavljamo dis-play="block") i očitavamo njegov offsetHeight.

<html>

<head>

<link type="text/css" rel="stylesheet"

href="Animated-Collapsible-Panel-5.css" />

<script language="javascript" type="text/javascript"

src="Animated-Collapsible-Panel-5.js"></script>

</head>

<body>

<!-Animirani kolapsabilni panel, sa odvojenim CSS-om i JavaScriptom->

<div style="width:170px;">

<div class="squarebox"><div

class="squareboxgradientcaption"

style="height:20px; cursor: pointer;"

onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)"><div

style="float: left">N A S L O V...</div><div

style="float: right; vertical-align: middle"><img

src="../images/collapse.gif"

width="13" height="14" border="0"

alt="Show/Hide" title="Show/Hide" /></div>

</div><div class="squareboxcontent">

<img width="150" height="100"

src="../images/photo.jpg"

alt="This is an image" title="This is an image" /><br />

Sadrzaj...

</div>

</div>

310 Multimedija

<img width="170" height="20" alt="" src="../images/shadow.gif" />

</div>

</body>

</html>

Završna implementacija koristi posebne CSS i JavaScript fajlove, koje referencira HTMLstranica.

Eksterni stilski fajlovi (.css) mogu da se referenciraju sa

<link type="text/css" rel="stylesheet" href="...css" />

redom koda u sekciji HEAD. Sledi sadržaj CSS-a koji smo prethodno koristili:

.squarebox {

width: 100%;

border: solid 1px #336699;

text-align: center;

overflow: hidden; }

.squareboxgradientcaption {

color: #ffffff;

padding: 5px;

background-image: url(../images/gradient_blue.png);

background-repeat: repeat-x; }

.squareboxcontent {

background-color: #f5f5f5;

padding: 10px;

overflow: hidden;

border-top: solid 1px #336699; }

Eksterni JavaScript fajl (.js) sa kodom može se referencirati sa

<script type="text/javascript" src="...js"></script>

Sledi potrebni JavaScript (JS) fajl koji smo odvojili od HTML stranice:

function togglePannelStatus(content)

{


content.style.display = (expand ? "block" : "none");

toggleChevronIcon(content);

}

var currentContent = null;

function togglePannelAnimatedStatus(content, interval, step)

{

if (currentContent==null)

{


currentContent = content;


if (expand)

content.style.display = "block";

var max_height = content.offsetHeight;

var step_height = step + (expand ? 0 : -max_height);

toggleChevronIcon(content);

content.style.height = Math.abs(step_height) + "px";

setTimeout("togglePannelAnimatingStatus("

+ interval + "," + step

+ "," + max_height + "," + step_height + ")", interval);

}}

function togglePannelAnimatingStatus(interval,

step, max_height, step_height)

{

var step_height_abs = Math.abs(step_height);

if (step_height_abs>=step && step_height_abs<=(max_height-step))

{

step_height += step;

currentContent.style.height = Math.abs(step_height) + "px";

setTimeout("togglePannelAnimatingStatus("

+ interval + "," + step

+ "," + max_height + "," + step_height + ")", interval);

} else {

if (step_height_abs<step)

currentContent.style.display = "none";

currentContent.style.height = "";

currentContent = null; }}

function toggleChevronIcon(content)

{

var chevron = content.parentNode

.firstChild.childNodes[1].childNodes[0];

var expand = (chevron.src.indexOf("expand.gif")>0);

chevron.src = chevron.src

.split(expand ? "expand.gif" : "collapse.gif")

.join(expand ? "collapse.gif" : "expand.gif"); }

Da bi inicijalno prikazali panel u skupljenom stanju, radimo ono što smo i ranije radili,postavljamo stil za prikaz sadržaja na "none", a izvor ševrona na expand.gif.

Držimo neanimirano skupljeno stanje panela preko togglePanelStatus. Odvojili smo

312 Multimedija

menjanje ševron slike u toggleChevronIcon, zato što ta akcija mora da se koristi za ani-mirani panel. Svaka animacija pozivaće togglePanelAnimatedStatus, prosleđujući kaoargumente neke parameter za podešavanje animacije – interval specificira broj milisekundiizmeđu osvežavanja prikaza čitača za vreme animacije, a step daje broj piksela za kojise uvećava ili smanjuje visina između dve sekvence osvežavanja. Kombinacija ove dveveličine definiše u suštini brzinu animacije.

Kada animacija skupljanja/razvijanja počne, globalna promenljiva currentContent je pos-tavljena na panel koji se procesira. Ovo sprečava uticaj na druge panele u tom trenutku.Ne treba da se poziva document.getElementById iz togglePanelAnimatingStatus.Realizovano je tako zato što je planirano da se ova poslednja funkcija uvek izvršava poslevrednosti interval preko Javascript poziva setTimeout, i ne možete proslediti objekte kaoargumente ovoj funkciji.

Da bi koristili ove funkcije i za skupljanje i za razvijanje, pozitivnu step_height vred-nost prosleđujemo za skupljanje, a negativnu za razvijanje. Kada step_height (koja držitekuću visinu animiranog panela) postane manja od 0 ili veća od max_height (koja držirenderovanu offsetHeight vrednost panela) animacija se završava.

10.10.5. Reverzni inženjering

Kada ovo vidite, prvo što ćete se zapitati: "Kako je ovo urađeno?" To nije teško utvrditi.Skoro sve "kockice su skrojene" od malih slika i CSS klasa primenjenih na HTML elemen-te. Ako se javlja neko dinamičko ponašanje usled korisnikove akcije, kao što je skupljanjeili razvijanje, ili promena oblika na klik miša ili prelazak miša preko elemenata, to najve-rovatnije znači da neki HTML elementi imaju JavaScript funkcije "prikačene" njihovimdogađajima. Ono što je potrebno da locirate i izdvojite kako bi kreirali svoja rešenja je:

• Blok HTML koda koji renderuje prezentacioni boks. Dovoljno je da pogledate izvornikôd i locirate određene sekvence tražeći neke vidljive ključne reči prema prikazanomtekstu.

• Definicije CSS stilova korišćenih sa tim HTML elementima. Neki elementi mogu daimaju tzv. inline stilske deklaracije, preko style i drugih HTML specifičnih atributa.Međutim, većina Web programera koristi posebne CSS definicije, bilo inline, unutarSTYLE blokova deklarisanih na istoj stranici, ili češće u posebnim CSS fajlovima,linkovanih iz header sekcije stranice. Kad god vidite HTML atribut class, radi se oCSS stil definiciji, lociranoj negde, a koja je potrebna za vaš dizajn.

• Slike korišćene za okvir. One se mogu pojaviti i kao IMG tagovi u HTML sekvencii u CSS stil definicijama.

• Definicija eventualnog JavaScript koda koji se koristi za boksove. JavaScript funkcijei kôd pojavljuju se često unutar deklaracija događaja HTML elementa, kao što jeonclick, onmouseover, onmouseout... Kao i kod CSS-a, JavaScript kôd može bitiili deklarisan inline, na istoj Web stranici, unutar SCRIPT blokova, ili definisan uposebnim JS fajlovima, linkovanih iz header sekcije stranice.

Glava 11

Multimedijalno umrežavanje

Definisaćemo principe multimedijalnog umrežavanja i mrežne servise. Klasifikovaćemomultimedijalne aplikacije i dati mehanizme za obezbeđivanje kvaliteta servisa, odnosnospecifične protokole za servis najboljeg pokušaja. Prikazaćemo odgovarajuće protokole iarhitekture.

11.1. Multimedijalne mrežne aplikacije

Osnovne karakteristike multimedijalnih aplikacija su:

1. tipična osetljivost na kašnjenje (end-to-end kašnjenje, jitter kašnjenje – promenakašnjenja paketa unutar istog toka paketa) i

2. tolerancija gubitaka.

Ove karakteristike se razlikuju od "elastičnih" Web aplikacija, e-mail, FTP i Telnet, kojesu netolerantne na gubitke, ali tolerantne na kašnjenje.

Postoje tri klase multimedijalnih aplikacija:

1. Streaming (kontinualna isporuka) uskladištenog audio i video sadržaja,

2. Streaming audio i video signala-zapisa "uživo" i

3. interaktivni audio i video u realnom vremenu.

11.1.1. Streaming uskladištenog audio i video sadržaja

Osnovne karakteristike ove klase aplikacija su:

• Audio i vodeo sadržaj je memorisan na hard disku. Moguće je koristiti funkcijepauze, brzog premotavanja itd.

• Reprodukcija zvuka/videa iz fajla koji je uskladišten na server strani može da otpočnei pre kompletnog "skidanja" fajla sa servera.

314 Multimedija

• Kontinualna reprodukcija.

Vremenska ograničenja za podatke koji još uvek treba da se prenesu nisu toliko stroga kaokod aplikacija "uživo", interaktivnih aplikacija kao što su telefoniranje preko Interneta ivideo konferencije.

Za reprodukciju se najčešće koristi sledeći softveri – RealPlayer, QuickTime i MediaPlayer.

11.1.2. Streaming audio i video signala – zapisa "uživo"

Ova klasa aplikacija radi kao klasični radio i televizijski difuzni prenos gde je prenosnimedijum Internet. Koriste se IP tehnike višestrukog upućivanja. Mogu da se tolerišu kaš-njenja do desetine sekundi od trenutka podnošenja zahteva za reprodukcijom. Nemugućeje brzo premotavanje, ali je moguće premotavanje, pa pauza. Primeri aplikacija su Internetradio talk show, uživo sportski događaji itd.

11.1.3. Interaktivni audio i video u realnom vremenu

Tipične aplikacije su: IP telefoniranje, video konferencije, distribuirane interaktivne apli-kacije itd. Pri prenosu glasa kašnjenja manja od 150ms slušalac ne primećuje, kašnjenjaizmeđu 150ms i 400ms mogu biti prihvatljiva.

11.1.4. Prenos glasa preko Interneta (Voice over IP – VoIP)

Prototip sistema za telefoniranje preko Interneta na osnovu prenosa paketa napravljenje osamdesetih godina prošloga veka. Prva varijanta Internet telefoniranja realizovana jedevedesetih godina dvadesetog veka od jednog PC-ja do drugog PC-ja. Komunikacijaglasom preko Interneta postala je popularna krajem devedesetih godina. Aplikacija odPC-ja do telefona dozvoljava korisniku sa Internet konekcijom i mikrofonom da pozovesvaki običan telefon. Veza se ostvaruje od PC-ja, preko mrežnog prolaza, komutiranihtelefonskih mreža, do telefona (fiksnog i/ili mobilnog). Za komunikaciju preko Internetaizmeđu PC-ja i mrežnog prolaza, koriste se protokoli kao što je RTP, SIP i H.323. Drugaklasa aplikacija je od telefona preko Interneta do telefona. Ovo telefoniranje je jeftinijeod klasičnog telefoniranja.

11.1.5. Problemi sa multimedijom na Internetu

Multimedijalne aplikacije su tipično osetljive na kašnjenja, ali su tolerantne na gubitke, zarazliku od od aplikacija koje rade sa podacima.

IP protokol obezbeđuje najbolju moguću uslugu svim datagramima (podaci na nivoumrežnog sloja) koji se prenose preko Interneta. Protokol ne može da garantuje određenovreme prenosa zbog različitih kašnjenja individualnih paketa od jednog do drugog kraja izbog promene kašnjenja paketa unutar toka paketa. Protokol ne garantuje ni propusnost.Kako TCP (Transmission Control Protocol) i UDP (User Datagram Protocol) protokoli radena vrhu IP (Internet protocol) protokola, oni ne garantuju određeno kašnjenje aplikacijama

Multimedijalno umrežavanje 315

koje ih pozivaju. Sistem Internet telefona i interaktivni video u realnom vremenu manjesu se koristili od prenosa uskladištenog zvučnog/video zapisa u realnom vremenu. Jitter("treperenje") predstavlja različita kašnjenja paketa unutar istog toka paketa. Širina pro-pusnog opsega, odnosno zagušenje na linkovima utiče na kvalitet prenosa glasa i videa urealnom vremenu.

Aplikacijama se nudi najbolje rešenje od ponuđenih servisa najboljih pokušaja:

• bafering na klijent strani;

• korišćenje UDP protokola umesto TCP protokola;

• korišćenje više tipova kodiranja i izbor onog tipa koji se najbolje može isporučiti.

11.2. Streaming uskladištene audio i video aplikacije

Poslednjih godina protok (streaming) zvučnog/video signala u realnom vremenu je bioveoma popularna aplikacija. Kako cene diskova padaju, a kapaciteti rastu i kako se brzineprenosa koje su korisnicima na raspolaganju povećavaju (kablovski modemi, ADSL), kaoi primena distribuiranog sadržaja (keširanje i CDN – Content Delivery Network) i novihprotokola koji zadovoljavaju određeni QoS (Quality of Service), ove aplikacije se sve višekoriste. Jedna od takvih aplikacija je i video visokog kvaliteta na zahtev korisnika.

Internet podržava QoS na tri načina:

• ne menja se ništa – koriste se tehnike aplikacionog nivoa da bi se ublažili efekti kaš-njenja i džitera; ISP povećavaju širinu propusnog opsega kako zahtevi rastu; mrežesa distribucijom sadržaja CDN repliciraju uskladišten sadržaj na krajeve Internet-a(Web strane, MP3, video); koristi se višestruko upućivanje na aplikacionom sloju zaprenos "uživo" (sportski događaji), ...

• integrisani servisi – treba da se izvrše fundamentalne promene rutera i host raču-nara tako da se obezbedi da virtuelna kola garantuju širinu propusnog opsega iodgovarajuća kašnjenja.

• različite klase servisa – od klase virtuelnih kola gde se garantuje širina propusnogopsega i određeno kašnjenje korisnika kojima se garantuje određeni saobraćaj naInternetu.

Na klijentov zahtev server šalje komprimovani zapis na soket kao krajnju tačku komuni-kacija. U praksi se za multimedijalne aplikacije koriste UDP soketi. Pre slanja datotekesa audio/video zapisom u mrežu, datoteka se deli na segmente, a zaglavlja se običnoenkapsuliraju u UDP segment. Protokol RTP (Real Time Protocol) za rad u realnom vre-menu predstavlja standard za enkapsulaciju. Interaktivnost korisnika (pauza, skok, ...) jeobezbeđena protokolom RTSP (Real Time Streaming Protocol).

Klijent prima zahtevanu datoteku koristeći medija plejer aplikaciju. Medija plejer imagrafički interfejs sa odgovarajućim tasterima (kontrolna dugmad) kojima se ostvaruje in-teraktivnost. Funkcije medija plejera su:

316 Multimedija

• dekompresija audio/video zapisa,

• uklanjanje jitter-a koristeći privremenu memoriju (bafer),

• ispravljanje grešaka (prenos redundantnih paketa, ponovni prenos izgubljenih paketana zahtev klijenta, ...).

11.2.1. Tipična arhitektura za strimingOva arhitektura zahteva dva servera, HTTP server koji opslužuje Web stranice (uključujućimetadatoteke) i striming server, koji opslužuje audio/video fajlove.

Slika 11.1. Tipična arhitektura za striming – od striming servera do medija plejera

U ovom slučaju medija plejer koji izvršava reprodukciju audio/video datoteka, zahteva fajlod striming servera, a ne od Web servera. Ovi serveri mogu međusobno da komunicirajukoristeći sopstvene protokole.

Komprimovani video se smešta na prijemnoj strani u privremenu memoriju medija ple-jera. Posle početnog kašnjenja od nekoliko sekundi, medija plejer čita iz svoje privremenememorije brzinom d i prosleđuje deo iz bafera na dekompresiju i reprodukciju.

Bafer se na klijent strani puni promenljivom brzinom x(t) i prazni brzinom d koja je kon-stantna u vremenu (slika 11.2).

Izbegavanje jitter-a se ostvaruje pridruživanjem broja sekvenci (sequence numbers), vre-menskim markicama (timestamps) i playout kašnjenjem (slika 11.3).

Opšte osobine TCP protokola su:

• konekciono – orijentisani: zahteva se setup između klijent i server procesa


• pouzdani transport između šaljućeg i primajućeg procesa

• kontrola toka: pošiljalac neće preplaviti primaoca paketima

• kontrola preopterećenja: zagušenje pošiljaoca kada mreža postane preopterećena

• ne obezbeđuje određeno vreme, niti garantuje minimum širine opsega

Slika 11.2. Uklanjanje džitera koristeći privremenu memoriju (bafer)

Opšte osobine UDP protokola su:

• nepouzdani transfer podataka između procesa koji šalju i primaju podatke

• ne obezbeđuje se: setup konekcija, pouzdanost, kontrola toka, kontrola zagušenja

• ne garantuje se određeno vreme, ni širina opsega

Slika 11.3. Kašnjenje usled džitera

318 Multimedija

Za multimedijalne aplikacije više se koristi UDP protokol za koga je karakteristično:

• server šalje pakete brzinom koja odgovara klijentu (često se ignoriše kontrola mrežnihzagušenja)

brzina slanja = brzina kodiranja = konstantna brzina

brzina punjenja = konstantna brzina - paketni gubici

• kratko kašnjenje (2÷ 5 sekundi) reprodukcije (playout) da bi kompenzovalo mrežnojitter kašnjenje

• oporavak od greške ako vreme dozvoljava

Za TCP kada se koristi za multimedijalne aplikacije karakteristično je:

• slanje maksimalno mogućom brzinom uz kontrolu zagušenja

• brzina punjenja se menja zbog TCP kontrole zagušenja i retransmisije izgubljenihpaketa

• veće playout kašnjenje da bi bila "glatka" TCP brzina isporuke

• HTTP/TCP prolazi lakše kroz zaštitne barijere na Internetu

Tabela 11.1. Aplikacije i odgovarajući transportni protokoli

11.2.2. Protokol za striming signala u realnom vremenu(Real Time Streaming Protocol - RTSP)

Protokolu HTTP nije primarni cilj prenos multimedijalnog sadržaja. Ne postoje komandeza brzo premotavanje, repozicioniranje itd. Protokol RTSP (definisan RFC 2326) je klijent-server protokol aplikacionog sloja. Korisniku je omogućeno da kontroliše displej: premo-tavanje, brzo premotavanje, pauzu, nastavak itd.


Ovaj protokol ne definiše kompresione šeme za audio i video signale, ne definiše kako jeaudio/video enkapsuliran za striming preko mreže, ne određuje kako se strimovani multi-medijalni podaci transportuju (može biti transportovan preko UDP-a ili TCP-a) i ne određujekako media player baferuje audio/video pakete.

Na donjoj slici je prikazan način rada RTSP. Web brauzer zahteva metafajl od Web servera.Brauzer startuje plejer. Player postavlja RTSP kontrolnu konekciju i konekciju za podatkeka streaming server-u.

Slika 11.4. Rad RTSP protokola

11.3. Multimedija u realnom vremenu:

Proučavanje telefoniranja preko Interneta

Kada govornik priča koristeći računar, naizmenično se smenjuju priča-govor (talkspurt) itišina. Frekvencija odabiranja audio signala je 64 kbps za vreme priče, gde se i paketigenerišu samo za vreme priče. Trajanje paketa je 20ms, odnosno 160 bajtova po paketu.Svakom skupu podataka govora dodaje se zaglavlje aplikacionog sloja, gde se zajednoenkapsuliraju u UDP segment. Aplikacija šalje UDP segment na soket svakih 20ms zavreme talkspurt (slika 11.5).

320 Multimedija

IP datagram može biti izgubljen zbog zagušenja na mreži računara (to znači da je popu-njen bafer rutera).

Mogući su gubici usled kašnjenja: IP datagram stiže suviše kasno za playout kod primaoca.Ti gubici su zbog kašnjenja usled procesiranja, rada sa redovima u mreži i kašnjenja zbogprostiranja od kraja do kraja mreže (pošiljalac i primalac). Tipično maksimalno dozvolje-no kašnjenje je 400ms, dok je kašnjenje manje od 150ms idealno.

Tolerancija gubitaka zavisno od kodiranja glasa, prikrivanja gubitaka, brzine gubitaka pa-keta ne prelazi 20%.

Za prenos multimedijalnih podataka na Internetu koristi se UDP protokol da bi se izbe-glo kašnjenje koje unosi TCP protokol zbog kontrole zagušenja (congestion control) zavremenski – osetljiv saobraćaj. Na klijent strani koristi se adaptivno playout kašnjenje zakompenzaciju kašnjenja. Na server strani podešava se širina propusnog opsega strima odklijenta do servera.

Slika 11.5. Enkapsulacija i prenos paketa

Oporavak od grešaka (na vrhu UDP-a) se izvodi preko preklapanja i ponovnog slanjapaketa (retransmisija).

11.4. Protokoli za interaktivne aplikacije koje rade u

realnom vremenu – RTP, RTCP i SIP

Razmotrićemo sada osnovne osobine standarda za interaktivne aplikacije u realnom vre-menu.


11.4.1. Protokol za rad u realnom vremenu(Real Time Protocol – RTP)

Ovaj protokol određuje strukturu paketa audio i video strimova. Predajna strana multi-medijalne aplikacije dodaje polja zaglavlja malim delovima paketa (chunk) koji nose audioi video podatke pre nego što ih prosledi transportnom sloju. Ta polja zaglavlja uključujuidentifikaciju korisnika, brojeve sekvenci i vremenske oznake paketa.

Ovaj protokol se koristi za interoperabilnost između multimedijalnih aplikacija (Internetphone aplikacije). Radi na vrhu UDP protokola, odnosno RTP paketi su enkapsulirani uUDP segmente (RFC 1889). RTP radi na krajevima sistema. RTP biblioteke obezbeđujuinterfejs transportnog sloja što proširuje UDP: broj porta, IP adresa, identifikacija tipapodataka koji se prenose, brojevi sekvenci i vremenske oznake paketa.

Slika 11.6. RTP se može posmatrati kao podsloj transportnog sloja

Kao primer posmatramo slanje 64 kbps PCM – kodiranog glasa (impulsno kodna mo-dulacija) preko RTP-a. Aplikacija sakuplja kodirane podatke u celine (na primer, svakih20ms, odnosno 160 bajtova po chunk-u).

Audio chunk sa RTP header-om formira RTP paket, koji je enkapsuliran u UDP segment.RTP header pokazuje tip audio kodiranja u svakom paketu. Sender može da menjakodiranje za vreme konferencije.

RTP ne daje bilo kakav mehanizam za obezbeđivanje isporuke podataka za određenovreme ili druge garancije za kvalitet servisa.

RTP enkapsulacija se jedino vidi na krajevima sistema: ona se ne vidi na ruterima između.

Ruteri koji obezbeđuju servis najboljeg pokušaja ne čine ništa da bi obezbedili da RTPpaketi stignu na odredište za određeno vreme.

11.4.2. Real Time Control Protocol – RTCP

Radi u spoju sa RTP protokolom. Svaki učesnik u RTP sesiji periodično transmitujeRTCP kontrolne pakete svim ostalim učesnicima. Svaki RTCP paket sadrži sender i/ili

322 Multimedija

receiver izveštaje - statistiku. Statistika uključuje za korisnika koji šalje pakete: sinhro-nizaciju kolizije, trenutno vreme, broj poslatih paketa, broj poslatih bajtova. Na prijemnojstrani: broj izgubljenih paketa, broj poslednje sekvence, srednju vrednost jitter-a itd.

Povratna sprega može da se koristi za kontrolu performansi (kontrola zagušenja, tipkodovanja). Pošiljalac može da modifikuje transmisiju korišćenjem povratne sprege. Zajednu RTP sesiju postoji tipično jedna višestruka (multicast) adresa; svi RTP i RTCPpaketi koji pripadaju toj sesiji koriste tu multicast adresu.

Paketi se šalju koristeći isti mehanizam kao podaci, jednostruko ili višestruko upućivanje(unikast ili multikast).

RTP i RTCP paketi se razlikuju međusobno po različitim brojevima portova (+1). Da biograničili saobraćaj, svaki učesnik smanjuje svoj RTCP saobraćaj kako se broj učesnika nakonferenciji povećava.

RTCP pokušava da ograniči svoj saobraćaj na 5% širine opsega sesije. Na primer – pret-postavimo da jedan korisnik šalje video zapis brzinom od 2Mbps. RTCP pokušava daograniči svoj saobraćaj na 100Kbps. RTCP daje 75% od ove brzine primaocu; preostalih25% pošiljaocu. 75 kbps se podjednako deli između primaoca. Sa R primaoca, svaki pri-malac dobija da pošalje RTCP saobraćaj od 75/R kbps. Pošiljalac dobija za slanje RTCPsaobraćaj brzine 25 kbps.

Učesnik određuje RTCP brzinu transmisije paketa proračunavajući srednju vrednost veli-čine RTCP paketa (kroz celu sesiju) i deleći je sa alociranom brzinom.

11.4.3. Protokol za inicijalizaciju sesije(Session Initiation Protocol – SIP)

Pretpostavimo: da svi telefonski pozivi i pozivi video konferencija idu preko Interneta, dase ljudi identifikuju po imenima ili e-mail adresama radije nego po telefonskim brojevimai da se korisnik koji poziva može naći (dostupan je) bez obzira gde je ili koji IP uređajtrenutno koristi.

Uspostavljanje poziva se zasniva na startu, upoznavanju pozvanog korisnika sa željom zauspostavljanje poziva i završetku poziva, kao i dogovaranju o tipu medijuma i kodiranju.

Obezbeđuje se tekuća IP adresa pozivaoca. Mapiranje imena i e-mail adrese na IP adresudefiniše mobilnost, promenu IP adrese zavisno od DHCP-a, više različitih IP uređaja pokorisniku i preusmeravanje poziva.

Upravljanje pozivom podrazumeva: dodavanje novih strimova za vreme poziva, promenuvrste kodiranja za vreme poziva, poziv drugih korisnika i transfer i zadržavanje poziva.

11.5. Računarske mreže sa distribuiranim sadržajima

za isporuku

Problem predstavlja slanje velikih fajlova (na primer, video stream-a) sa jednog izvorišnogservera u realnom vremenu drugim klijentima koji se nalaze na geografski udaljenim mes-


tima. Rešenje je pravljenje replika sadržaja na stotine servera kroz Internet, i mešanjesadržaja "blizu" korisnika izbegavajući gubitke i kašnjenja sadržaja koji se šalje duž dugihputanja. CDN (Content Delivery Network) server se nalazi tipično na ivici/pristupnoj mreži(slika 11.7).

Slika 11.7. Tipičan CDN distribuirani čvor za isporuku sadržaja

Na slici 11.8 izvorni server (www.foo.com) distribuira HTML stranu. Zamenjuje adresu:

http://www.foo.com/sports.ruth.gif

adresom

http://www.cdn.com/www.foo.com/sports/ruth.gif

CDN kompanija (cdn.com) distribuira određeni gif fajl. Koristi svoj authoritative (nadle-žan) DNS server da rutira odnosno preusmeri zahteve.

11.6. Distribuirani multimedijalni sistemi

Multimedijalne aplikacije zahtevaju nove sistemske mehanizme kako bi sebi obezbedile radsa velikim brojem vremenski zavisnih podataka (slika 11.9).

324 Multimedija

Slika 11.8. Rutiranje (preusmeravanje) zahteva

Najvažniji od ovih mehanizama se bave upravljanjem kvalitetom servisa. Oni treba daalociraju širinu propusnog opsega i druge resurse na način koji obezbeđuje ispunjenjezahteva aplikacije.

Slika 11.9. Tipična infrastruktura za multimedijalne aplikacije

Upravljanje kvalitetom servisa definisano je zahtevima aplikacije: širina propusnog opsega,kašnjenje i broj izgubljenih paketa strima, kontrola pristupa, pregovori sa aplikacijom okokarakteristika. Jednom kada se QoS zahtevi prihvate, resursi se rezervišu i garantuju apli-kaciji.


Oblikovanje saobraćaja koristi algoritme koji baferuju podatke u realnom vremenu kakobi saobraćaj bio uravnotežen (bez "uskog grla" i "špiceva"), koristeći princip "kofe kojacuri" (slika 11.10).

Slika 11.10. Algoritmi za ujednačavanje saobraćaja

Strimovi se mogu prilagoditi za iskorišćenje više resursa smanjenjem širine opsega resursa(skaliranje) ili u tačkama na putu prenosa (filtriranje), gde se mogu rezervisati određeneširine propusnog opsega.

"Tigar" video fajl server je primer skalabilnog sistema (Sjedinjene američke države) kojiobezbeđuje isporuku video strimova u realnom vremenu na zahtev na velikim rastojanjimasa jakim garancijama za QoS. Sistem može da servisira 602 istovremene isporuke strimovabrzinom od 2Mbps sa gubicima koji su manji od jednog bloka (video strim trajanja 1 s)od 180 000 prenetih blokova.

11.7. Iznad najboljeg pokušaja

Postavlja se pitanje kako razvijati Internet da bi se obezbedio garantovani kvalitet usluga(QoS) korisnikovim aplikacijama.

Slika 11.11. Garantovani kvalitet usluga (QoS)

326 Multimedija

Postoje četiri principa kao odgovor na ovo pitanje:

1. markiranje paketa za ruter kako bi vodio računa o različitim klasama, kao i novapolitika raspoređivanja na ruterima na osnovu koje se tretiraju paketi;

2. obezbeđivanje zaštite (izolacije) jedne klase od drugih;

3. što efikasnije korišćenje resursa; i

4. dopuštanje poziva – protok deklariše svoje potrebe, mreža može da blokira poziv(na primer, signal zauzeća) ako ne može da ispuni zahtevani uslov.

Glava 12

Internet i Web servisi

Internet je nastao kao rezultat rada istraživačke mreže američke agencije ARPA krajemšezdesetih godina dvadesetog veka. Od tada, ubrzani razvoj Interneta je doveo do togada je 2009. godine. Internetom bilo povezano 1, 73 milijarde korisnika i registrovano višeod 81, 8 miliona domena imena ".com". Tokom 1992. godine dozvoljeno je komercijalnoi poslovno korišćenje Interneta.

12.1. Umrežavanje

Mreža je skup računara, sa jednim računarom koji radi kao server da bi obezbedio mrežneservise kao što je fajl transfer, elektronska pošta ili štampanje dokumenata na računaruklijenta. Koristeći mrežne prolaze i rutere, lokalne mreže (LAN) mogu da se povežu sadrugim lokalnim mrežama i formiraju veće mreže (WAN). Ove mreže mogu da se povežuna Internet kroz servere koji obezbeđuju neophodan softver za Internet i konekciju zapodatke (obično širokopropusne telefonske linije).

12.1.1. Domeni najvišeg nivoa

Kada su originalni ARPANET protokoli za komunikaciju između računara uključeni uprotokol TCP/IP (Transmission Control Protocol/Internet Protocol) 1983. godine, sistemdomenskih imena (Domain Name System – DNS) je bio razvijen za dodelu imena i adresaračunarima koji su povezani na Internet. Domeni najvišeg nivoa (TLD) su uspostavljenikao kategorije za lakše snalaženje korisnika na Internetu (com, edu, gov, int, mil, net,org, kodovi od dva slova za više od 240 zemalja i teritorija). Ime se gradi od domenanajvišeg nivoa, preko domena različitih nivoa odvojenih tačkom polazeći od desne straneka levoj.

Za e-mail račun se kaže da je "na" ("at" - @) domenu. U nazivu e-mail adrese nema blankznakova i mada se adrese na Internetu mogu pisati i velikim i malim slovima, uobičajenoje da se koriste mala slova.

328 Multimedija

12.1.2. IP adrese i paketi podataka

Kada se tok (stream) podataka pošalje preko Interneta, TCP protokol ga prvo podeli napakete. Svaki paket uključuje adresu odredišnog računara, broj sekvence ("ovo je paketbroj 7"), informacije za korekciju greške i deo podataka koji se šalju. Nakon kreiranjapaketa od strane TCP protokola, IP protokol šalje paket na odredište duž putanje (rute)koja može da uključi više drugih računara.

Tridesetdvobitna adresa (IPv4) uključena u paket podataka, IP adresa, je stvarna Internetadresa. Sastavljena je od četiri broja odvojena tačkama (na primer, 140.174.162.10).Neki od ovih brojeva su dodeljeni od strane Interneta, a neki mogu dinamički biti dodeljeniod strane Internet Service Providera (ISP) kada se računar priključi na Internet preko dial-up konekcije. U primeni je nov standard 128-bitnog adresiranja IPv6.

Na Internetu postoje serveri domenskih imena čiji je posao da brzo pretraže tekstualneadrese imena domena u velikim distribuiranim bazama podataka, konvertuju ih u realneIP adrese, a zatim ih vrate i insertuju u pakete podataka. Kad god se konektujete na

http://www.google.com

ili pošaljete e-mail, server domena imena se konsultuje i odredišna adresa se konvertuje ubrojeve. IP adrese i imena domena mogu da se koriste naizmenično. Servis ping, ili "whois"funkcija u Unix-u, mogu da otkriju IP adresu domena. Adresiranje uključuje osim IP adresei broj porta. Popularnim protokolima aplkacijskog sloja dodeljeni su određeni brojeviportova, na primer za HTTP server 80, za mail server 25 itd. Spisak poznatih brojevaportova za sve standardne Internet protokole nalazi se na adresi: http://www.iana.org.

12.1.3. Povezivanje na Internet

Postoji više načina povezivanja na Internet: telefonski dial-up račun ili širokopojasni kabl,digitalne pretplatničke linije (DSL), ili bežična oprema za povezivanje na Internet ServiceProvider (ISP). Postoje i online servisi kao što su America Online (AOL) ili Microsoft Net-work (MSN) koji koriste specijalni softver i rade kao provajderi za povezivanje na "kičmu"Interneta - ultra širokopojasne mreže sa kojima rade MCI, AT&T, Sprint i druge teleko-munikacione kompanije.

12.1.4. Mala širina propusnog opsega

Propusni opseg se definiše preko količine podataka, odnosno preko broja bitova u sekundu(bps), koji se mogu poslati sa jednog računara na drugi u datom intervalu vremena. Štoje brži prenos (što je veća širina propusnog opsega određene veze) manje vremena se čekana tekst, slike, zvuk i animirane ilustracije za upload ili download sa računara na računar.Ako želite da računate brzinu u bajtovima u sekundu, podelite brzinu sa 8.

Internet i Web servisi 329

12.2. Internet servisi

Za mnoge korisnike Internet znači World Wide Web. Ali Web je samo poslednji i najpo-pularniji od servisa koji su dostupni na Internetu. E-mail, fajl transfer, diskusione grupe ivesti, ćaskanje u realnom vremenu koristeći tekst, glas i video, i sposobnost prijave (logo-vanja) na udaljene računare su ostali Internet servisi.

Svaki Intenet servis je implementiran na Internet serveru kao posvećeni softver poznat kaodaemon. (Ustvari,daemon-i samo postoje u Unix/Linux sistemima. Na drugim sistemimakao što je Windows NT, servisi mogu da rade kao obične aplikacije ili procesi koji rade upozadini). Postoji podela Internet servisa na osnovne, javne, sigurnosne i sistemske.

330 Multimedija

Daemon je agent program koji se izvršava u pozadini, čekajući da reaguje na spoljnezahteve. u slučaju Interneta, daemon-i podržavaju protokole kao što je HTTP za WorldWide Web, POP3 protokol za e-mail, ili FTP protokol za razmenu fajlova. Ovi programimogu biti smešteni na različitim serverima.

12.2.1. MIME tipovi

Rad sa multimedijom na Internetu zahteva rad sa odgovarajućim protokolima koristeći pre-poznatljiva dokumenta i formate. Snimljeni glas kao attachment e-mail poruci, na primer,mora da identifikuje Post Office daemon, a zatim treba da bude prenešen sa korektnimkodovanjem do odredišnog računara. Odredišni računar treba da ima odgovarajući softver(i hardver) za dekodiranje informacija i preslušavanje poruke. Da bi identifikovao prirodupodataka koji se prenose, i zaključio koja je svrha tih podataka, Internet koristi stan-dardnu listu ekstenzije imena fajla zvanu MIME – tipovi (Multipurpose Internet MailExtensions). Mnogi brauzeri dozvoljavaju definisanje MIME – tipova. Na primer, saNetscape navigatorom možete da definišete Adobe-ove akrobat fajlove (PDF fajlove) kaoMIME – tip i selektujete Acrobat Reader kao plejer aplikaciju.

Ovo ne koristi samo e-mail daemon, već, po konvenciji, i drugi Internet daemoni uključu-jući Web-ov HTTP daemon. Možda najčešće instaliran HTTP softver za upravljanje Webstranicama je aplikacija otvorenog koda zvana Apache (http://www.apache.org).

Multimedijalni elementi su tipično čuvani i prenošeni na Internetu u odgovarajućem MIME-tip formatu i imaju odgovarajuće ekstenzije toga tipa. Na primer, Shockwave Flash fajlovisa animacijom imaju ekstenziju .swf, fajlovi sa slikom .jpg, .jpeg, .gif ili .png, fajlovisa zvučnim zapisom završavaju se sa .au, .wav, .aif, .mp3; Quick Time i drugi videoklipovi završavaju se ekstenzijom .qt, .mov ili .avi.

Slika 12.1. Browser (aplikacija za pronalaženje i prikaz Web stranica) određuje kako daprocesira podatke


12.3. Mrežne aplikacije

Klijent je proces koji inicira komukikaciju sa serverom. Server je proces koji pruža us-luge klijentima. Proces je program koji se izvršava na host računaru. Na istom hostu,dva procesa komuniciraju koristeći međuprocesne komunikacije (definisane operativnimsistemom). Procesi na različitim hostovima komuniciraju razmenom poruka. Proces ša-lje/prima poruke ka/od svog socket-a. Soket je krajnja tačka komunikacije. Trebalo bi inapomenuti da postoji analogija soketa i vrata.

Mrežne aplikacije mogu biti klijent server, P2P i njihova kombinacija.

12.3.1. World Wide Web i HTTP

Web obezbeđuje interfejs za pristup ogromnim količinama zvučnog i video materijala kojise čuva na Internetu. Ovim i drugim multimedijalnim sadržajima se pristupa na zahtev.

Web strana (dokument) se sastoji od objekata. Objekat može biti HTML fajl, JPEGslika, Java aplet, audio fajl... Web strana se sastoji od osnovnog HTML-fajla koji uključujenekoliko referenciranih objekata. Svaki objekat može da se adresira koristeći URL (UniformResource Locator), na primer:

www.someschool.edu/someDept/pic.gif

gde prvi deo definiše ime host računara, a drugi deo putanju do određenog objekta, uovom slučaju gif fajla. Browser je korisnički agent za Web. Softverski agent se definišekao autonomni proces sposoban da reaguje i inicira promene u svom okruženju, posebnou saradnji sa drugim korisnicima i drugim agentima. Proces je program u izvršenju.

HTTP (Hypertext Transfer Protocol) je protokol sloja Web aplikacija. On definiše načinna koji Web klijenti (na primer brauzeri - čitači, pregledači) traže Web strane od Webservera, kao i način na koji Web serveri šalju tražene strane klijentima.

Posmatramo klijent/server model. Klijent koristi browser koji zahteva, prima, "prikazujena displeju" Web objekte. Server šalje objekte kao odziv na zahteve klijenta. Klijentinicira TCP konekciju (kreira soket) ka serveru, port 80. Server prihvata TCP konekcijuod klijenta. HTTP poruke (poruke protokola aplikacijskog sloja) se razmenjuju izmeđubrowser-a (HTTP klijent) i Web servera (HTTP server). Zatvara se TCP konekcija.

HTTP je "stateless" protokol, odnosno server ne održava informacije o prethodnim zahte-vima klijenata. Interakcija između korisnika i servera se odvija preko kolačića (cookies),koji vode računa o "stanju" konekcija. Tehnologija kolačića definisana je preko četirikomponente:

• linija u zaglavlju HTTP odzivne poruke

• linija u zaglavlju HTTP poruke sa zahtevom

• cookie fajl koji se čuva na korisnikovom host računaru i kojim se upravlja od stranekorisnikovog browser-a

• pozadinsku bazu podataka koja se nalazi na Web lokaciji

332 Multimedija

Kolačiće koriste veliki portali, sajtovi za elektronsku trgovinu, oglašavanje itd. Korišćenjekolačića može narušiti privatnost klijenata.

Web keš (zastupnik – proksi server) se koristi da se zadovolji klijentov zahtev bez uključenjaizvornog Web servera. Korisnik startuje browser koji šalje sve HTTP zahteve kešu. Akoje objekat u kešu – keš vraća objekat, ako nije, keš zahteva objekat od izvornog servera,a zatim vraća objekat klijentu. Zašto se koristi Web keširanje? Smanjuje se vreme odzivana zahtev klijenta. Smanjuje saobraćaj na pristupnom linku korisnika. Internet sa kešomomogućuje da "siromašan" sadržaj provajdera bude efikasno isporučen.

Slika 12.2. Zahtev za korišćenje objekata koristeći Web keš

12.3.2. Protokol za transfer fajlova(the File Transfer Protocol – FTP)

Ovaj protokol se koristi za transfer fajlova ka ili sa udaljenog host računara. Posmatra seklijent/server model, odnosno klijent je strana koja inicira transfer (daljinski), a server jeudaljeni host računar. Definisan je u RFC 959.

Slika 12.3. Elektronska pošta

FTP klijent kontaktira FTP server na portu 21, određujući TCP kao transportni protokol.Klijent dobija autorizaciju preko kontrolne konekcije. Klijent pretražuje udaljeni direktori-jum šaljući komande preko kontrolne konekcije. Kada server primi komandu za transfer


fajla, server otvara TCP konekciju za prenos podataka ka klijentu. Nakon transfera jednogfajla, server zatvara konekciju.

FTP server održava "stanje" korisnika – tekući direktorijum, prethodna autorizacija, ko-risnički nalog itd.

Postoje tri glavne komponente elektronske pošte korisnički agenti, mail serveri i protokolza transfer elektronske pošte (Simple Mail Transfer Protocol – SMTP).

Korisnički agent (aplikacija), često nazvan i "čitač pošte", kreira, edituje, čita mail poruke.Popularni korisnički agenti su Mozilla Firefox, Microsoft Outlook, Netscape Messenger, atekstualni elm, mail itd. Odlazeće i dolazeće poruke su uskladištene na serveru.

Mail serveri u mailbox – poštanskom sandučetu sadrže dolazeće poruke za korisnika, kaoi red odlazećih poruka (koje će biti poslate). Za slanje poruka između mail servera koristise SMTP protokol.

Za pouzdan transfer e-mail poruke od klijenta do servera na portu 25 koristi se TCPprotokol. Transfer je direktan bez posrednika od servera koji šalje do servera koji primaporuke.

SMTP je mnogo stariji protokol od HTTP-a. SMTP koristi perzistentne konekcije i za-hteva da poruka (zaglavlje i telo) bude u 7-bitnom ASCII formatu, dok HTTP protokolnema to ograničenje. Dakle, oba protokola se koriste za transfer fajlova. HTTP protokolje "pull" protokol koji "vuče" podatke, dok SMTP "push" "gura" podatke. Oba protokolaimaju interakciju komanda/odziv u ASCII kodu i statusni kôd. Kod HTTP protokola svakiobjekat je enkapsuliran u svoju sopstvenu odziv-poruku. Kod SMTP protokola svi objekatisu u jednoj poruci.

MIME (Multipurpose Internet Mail Extension) je proširenje za rad sa multimedijom (RFC2045, RFC 2056). Dodatne linije u zaglavlju poruke deklarišu MIME tip sadržaja.

Slika 12.4. Format poruke: multimedijalne ekstenzije

Protokoli za pristup pošti (mail access protocol) i pronalaženje pošte na serveru su POP3

(Post Office Protocol) (RFC 1939) i IMAP (Internet Mail Access Protocol) (RFC 1730)koji ima bolje karakteristike, ali je kompleksniji.

Postoje i Web bazirani e-mail koji rade sa HTTP protokolom: Hotmail, Yahoo, Mail itd.

334 Multimedija

12.4. World Wide Web i HTML

World Wide Web je startovao 1989. godine u CERNU kao "distribuirani kolaborativnihipermedijalni informacioni sistem". Projektovao ga je Tim Berners - Lee kao protokolza povezivanje više dokumenata lociranih na računaru bilo gde na Internetu. Hyper TextTransfer Protocol (HTTP) je obezbedio pravila za jednostavne transakcije između dvaračunara na Internetu a sastavljen je od

1. uspostavljanja konekcije,

2. zahteva da dokument treba da bude poslat,

3. slanja dokumenta, i

4. zatvaranja konekcije.

On takođe zahteva jednostavan format dokumenta nazvan Hypertext Markup Language(HTML) za predstavljanje strukturiranog teksta pomešanog sa slikama.

Jedan HTML dokument može da sadrži hiperlinkove ili anchor-e koji upućuju na drugeslične dokumente. Korisnik može da surfuje iz dokumenta u dokument po Webu koristećiHTML okruženje.

12.4.1. Dinamičke Web stranice i XML

HTML je pogodan za pravljenje i isporuku jednostavnijih statičkih Web stranica. Među-tim, za isporuku dinamičkih stranica izgrađenih kao kombinacija teksta, grafike, animacijainformacija sadržanih u bazama podataka ili dokumentima, potrebni su drugi alati i pro-gramerske veštine. JavaScript i programi napisani u Java programskom jeziku mogu dase insertuju u HTML stranice kako bi se izvršile funkcije i složeniji zadaci.

Cold Fusion i PHP su aplikacije koje rade jedna sa drugom i sa Web serverom kao štoje Apache; oni skeniraju odlazeću Web stranicu za specijalne komande i naredbe, običnougrađene u specijalne tagove. Kada naiđe na specijalni tag na stranici, softver će uraditiono što tag definiše, na primer, "uzmi današnji datum i ubaci ga u ćeliju tabele". Radećiparalelno sa aplikacionim serverima, Oracle, Sybase i mySQL nude softver za upravljanjeSQL (Structured Query Language) bazama koje mogu da sadrže ne samo teks već i grafikui multimediju.

Flash animacije i Director aplikacije mogu takođe da se pozovu iz HTML stranica. Ovemultimedijalne mini aplikacije, često programirane od strane Web developer-a, koristebrauzerove plaginove za prikaz akcije i izvođenje zadataka kao što su izvođenje zvučnihzapisa, prikazivanje videa ili neko drugo izračunavanje. Kao i Cold Fusion i PHP i onikoriste programske jezike, odnosno, skripta (ActionScript i Lingo).

XML (eXtensible Markup Language) ide iznad HTML-a. To je novi korak u razvoju Inter-neta za formatizovanje i isporuku Web stranica koristeći stilove. Za razliku od HTML-amožete da kreirate sopsvene tagove u XML-u za opis tačno onoga što podaci znače imožete dobiti te podatke sa bilo kog mesta na Webu. Na primer:


<voce>

<vrsta>Jabuka</vrsta>

<podneblje>Metohija </podneblje>

<cena>50dinara </cena>

</voce>

AJAX (Asynchronous JavaScript AND XML) kao nova tehnika za isporuku Web stranica,koristi kombinaciju XML-a, CSS-a (cascading style sheets informacije o obeležavanju istilu) i JavaScript za generisanje dinamičkih prikaza i interakciju unutar Web brauzera.

12.5. Web servisi

Web servis je sofverski sistem dizajniran da podrži interoperabilne interakcije od računaraka računaru preko računarske mreže. Interfejs je opisan u formatu koji može da procesiraračunar WSDL (Web Services Description Language). Drugi sistemi interaguju sa Webservisom na način opisan koristeći SOAP (Simple Object Access Protocol) poruke, tipičnoprenošene koristeći HTTP sa XML serijalizacijom u spoju sa drugim Web-povezanim stan-dardima.

Web servis je apstraktan pojam koji mora biti implementiran konkretnim agentom. Agentje deo softvera ili hardvera koji šalje ili prima poruke, dok je servis resurs okarakterisan saapstraktnim skupom funkcionalnosti kojima je obezbeđen.

12.6. Mrežne multimedijalne aplikacije

Postavljanje multimedijalne aplikacije 1994. godine između Kalifornije i Kopenhagenatrajalo je nekoliko dana i koštalo je oko 100 000 dolara za radne sate, opremu i komu-nikacije. Od tada cena postavljanja multimedijalnih aplikacija stalno opada. Multimedi-jalne mrežne aplikacije prožimaju sve oblasti od video igara na računarskim mrežama doedukacije, odnosno, učenja na daljinu.

Postoji još jedna klasifikacija multimedijalnih aplikacija u dve grupe. Prva grupa aplokacijaMultimedia Content Delivery – MCD aplikacije koje dozvoljavaju ljudima da pristupe i radesa elektronskim sadržajem (isporuka multimedijalnog sadržaja). Primeri su – pristup digi-talnim video bibliotekama, praćenje video programa, kombinovanje delova različitih videoprograma da bi se napravio novi program.

Druga grupa zvana PMC – Personal Multimedia Communication aplikacije koje omogućujuljudima širok opseg komunikacionih aplikacija sa bilo kog terminala i sa bilo koje lokacije.Primeri PSTN i ISDN su osnov telefonskih servisa i video konferensije, dok primeri iz svetamobilnih telefona (cellular) i Internet sveta koriste dobro poznate multimedijalne servisekao što su SMS/MMS, Presence, Instant Messaging, Push to Talk, Unified Messagingitd.

Na komercijalnom nivou provajderi pristupa nude istovremeno fiksne i mobilne IP tele-fonske servise, IPTV i Web pristup i pružaju korisniku mogućnost da plaća sve servisepreko jednog računa.

336 Multimedija

Ako kao primer uzmemo Microsoft Messenger servis, on obezbeđuje ne samo rad saporukama nego i telefiniranje, video telefoniranje, razmenu sadržaja, tekstualne/audio/vi-deo vesti, jaku spregu ka elektronskoj pošti, news grupe, kupovinu preko mreže, blogoveitd. Ovo znači da je veoma teško posmatrati određeni servis kao usamljenu mrežnu ap-likaciju. To je komponenta koja treba da bude pridružena drugim mrežnim aplikacijamauz standardizovane mrežne interfejse, ne samo za korisnika sevisa (klijenta) nego i zainfrastrukturu servis provajdera.

Tehnički posmatrano postoji trend konvergencije PC industrije i difuzne (broadcast) in-dustrije.

Televizijski terminali zahtevaju uređaje koji primaju i dekodiraju digitalni televizijski signalkoji se difuzno prostire i imaju interfejs ka Internetu kroz korisnikov televizor. U IPTVmrežama, taj uređaj je mali računar koji obezbeđuje dvosmernu komunikaciju na IP mrežii dekodira video striming podatke. Ovo dozvoljava podacima iz različitih aplikacija da seprostiru zajedno sa TV strimovima, interaguju sa TV programom i kreiraju nove aplikacije.

Internet Protocol televizija (IPTV) je sistem koji televizijske i/ili video signale distribuirado pretplatnika ili gledaoca koristeći difuzne konekcije preko Internet protokola. Često jeovo paralelno sa pretplatnikovom Internet konekcijom dobijenom od broadband operatorakoristeći istu infrastrukturu, ali preko dodeljene određene širine propusnog opsega. Dokfiksne broadband konekcije imaju dovoljno veliku širinu propusnog opsega koja garantujevisok kvalitet interaktivnih multimedijalnih aplikacija, ovo još uvek nije primenjeno naGSM/GPRS pristup mobilnim mrežama.

IPTV kombinuje televiziju visoke definicije (High Definition TV – HDTV) i nove standardekompresije AVC (Advanced Video Compression). Prednosti IPTV uključuju dvosmernukomunikaciju kao i point-to-point distribuciju dozvoljavajući svakom gledaocu da gledaprogram koji želi. Ovo znači – sopstvena kontrola (pauza, premotavanje ...) i slobodnaselekcija programa. Omogućena je i integracija sa drugim uređajima kao što su PDA imobilni telefoni.

Interaktivna televizija nudi (Interactive Digital Television – iDTV) prošireni TV sa različitimsadržajem (teks, grafika ili video), Internet dozvoljavajući korisniku da surfuje Webom,elektronsku poštu (čitanje i pisanje), ćaskanje itd. Individualno korišćenje TV resursaomogućuje korisniku promenu ugla kamere, pozive i trenutne odgovore. Drugi zajedničkielementi iDTV su video na zahtev (Video-on-Demand – VOD) i funkcije personalnog videorekordera.

Glava 13

PHP

PHP predstavlja jezik za pisanje skriptova koji rade na serveru. Projektovan je za upotrebuna Web-u. Njegovu početnu verziju je 1994. godine napravio Rasmus Lerdorf. Razvijenje da bi mogao da "prati" posetioce njegovog sajta. Kasnije je PHP prošao kroz nekolikoverzija dok nije došao do aktuelne verzije PHP 5.

PHP je inicijalno bila skraćenica za Personal Home Page, ali je značenje kasnije izmenjeno,pa sada označava PHP Hypertext Preprocessor.

PHP je proizvod otvorenog koda, tj. slobodan je pristup njegovom izvornom kodu kojimože besplatno da se koristi, menja i dalje distribuira.

PHP se koristi za rad sa formama, procesiranje fajlova i pristup bazama podataka (MSSQL Server, MySQL, Oracle, PostgreSQL, Sybase...).

Kao Web server može da koristi: Apache, MS Internet Information Server (IIS)... OdPHP-a verzija 4, a posebno u PHP 5 omogućeno je objektno orijentisano programiranje.Koristi se za kreiranje zaštićenih Web strana.

PHP je alternativa sledećim tehnologijama CGI (Common Gateway Interface), ASP.NET(Active Server Pages) i Java servletima. PHP procesor ima dva moda – copy (XHTML) iinterpret (PHP).

PHP naredbe se ne vide na klijentskoj strani zato što interpreter PHP koda naredbezamenjuje rezultatom. To znači da se iz PHP koda dobija čisti HTML kôd koji se možepregledati pomoću svakog čitača – brauzera.

PHP kôd se interpretira i izvršava na serveru (za razliku od JavaScript koda koji se izvršavaunutar čitača na klijentskoj strani). PHP sintaksa je slična sintaksi JavaScript-a.

13.1. Interakcija sa server stranom

U odnosu na svoje glavne konkurente koji se koriste za programiranje na server strani(Perl, MS ASP.NET, JSP i ColdFusion), PHP ima sledeće prednosti:

• Visoke performanse. PHP je vrlo efikasan.

338 Multimedija

• PHP je besplatan. Trebalo bi napomenuti da najnovija verzija može da se preuzmesa adrese http://www.php.net.

• Lako se uči i upotrebljava. Sintaksa PHP-a je slična sintaksama drugih programskihjezika

• Prenosivost. PHP je na raspolaganju za različite operativne sisteme. Napisani kôdnajčešće će raditi bez izmena i pod drugim operativnim sistemima gde je instaliranPHP.

• Izvorni kôd je dostupan svima.

• Dobra podrška za objektno-orijentisano programiranje (nasleđivanje, privatni i za-štićeni atributi i metode, apstraktne klase i metode, intefejsi, konstruktori i destruk-tori).

• Ugrađene biblioteke za obavljanje velikog broja poslova uobičajenih u Web aplikaci-jama. PHP-ove biblioteke omogućavaju veliki broj funkcija kao što su: generisanjeslike tokom rada aplikacije, uspostavljanje veze sa Web servisima, korišćenje XMLdokumenata, generisanje PDF dokumenata, slanje poruke e-mail-om itd.

• Povezivanje sa brojnim sistemima za upravljanje bazama podataka.

Primeri aplikacija na server strani koji su urađeni u PHP-u su:

• Sistemi pretraživanja

• Sistemi upravljanja dokumentima

• Registracija/administracija/profili korisnika

• Transakcije

• E-komerc

13.2. Sintaksne karakteristike

PHP tag, koji pokazuje serveru gde počinje, a gde se završava PHP kôd u okviru HTMLkoda, može biti napisan na više načina od kojih su najčešći:

interno:

<?php

?>

ili eksterno:

include ("myScript.inc")

PHP 339

Prazan prostor - beline nemaju uticaja. Naredbe se završavaju sa ; (tačka zapeta). Star-tovanje može da se ostvari preko komandne linije ili preko Web servera. Web serverinterpretira PHP kôd. Može doći do "mešanja" PHP koda i HTML koda, što kao rezultatdaje teško održavanje koda i odvajanje sadržaja od stila (koriste se šabloni).

Komentari se pišu na sledeće načine:

// Mozete da koristite

# stil komentara

/* koji vama

odgovara */

Ime promenljive počinje sa $. Imena promenljivih su case sensitive. Skup naredbi se for-mira koristeći zagrade. Skup naredbi ne može da definiše lokalni doseg promenljivih (osimu funkciji)

Rezervisane reči PHP-a nisu case sensitive.

Slika 13.1. Rezervisane reči

13.2.1. Promenljive

Ne postoji deklaracija tipa (type). Neoznačena (neograničena, nereferencirana) varijablaima vrednost NULL. Funkcija unset postavlja varijablu na NULL. Funkcija IsSet se koristi zaodređivanje da li je varijabla NULL. Kada se neograničena varijabla referencira interpreterprikazuje grešku

error_reporting(15);

13.2.2. Osnovni tipovi

Postoje četiri skalarna tipa: boolean, integer, double i string; dva složena tipa: array –niz i object – objekat; dva specijalna tipa: resource i NULL. Celobrojna varijabla integer ipromenljiva dvostruke tačnosti double su kao kod drugih jezika, dok je boolean – vrednostili true ili false (case insensitive).

340 Multimedija

13.2.3. Strings (nizovi karaktera - znakova)

Karakter je jedan bajt. String literali koriste jednostruke ili dvostruke znake navoda.

13.2.4. Operatori

Operatori su simboli koji omogućavaju izvršavanje operacija nad vrednostima i promenlji-vama. U PHP-u postoje sledeće vrste operatora:

• Aritmetički operatori

• String operator (operator za konkatenaciju, tj. spajanje stringova)

• Operatori dodele (na primer, =, +=, -= i dr.)

• Operatori poređenja

• Logički operatori

• Operatori nad bitovima

• Operatori za rad sa nizovima (na primer, [ ] za pristup elementu niza)

• Ostali operatori (na primer, operator zanemarivanja greške, uslovni operator i dr.)

13.2.5. Pre-definisane funkcije

Aritmetičke funkcije

• floor, ceil, round, abs, min, max, rand itd.

String funkcije

• strlen, strcmp, strpos, substr

• chop - uklanja prazan prostor sa desnog kraja

• trim - uklanja prazan prostor sa oba kraja

• ltrim - uklanja prazan prostor sa leve strane

• strtolower, strtoupper

13.2.6. Konverzije tipova

Implicitna konverzija tipa, na primer konverzija stringa u broj:

• Ako string sadrži e ili E, konvertuje se u double; inače u integer

• Ako string ne počinje znakom ili cifrom koristi se nula

PHP 341

Eksplicitna konverzija - casts (kastovanje), na primer: (int)$total ili intval($total)ili settype($total, "integer").

Tip ili varijabla mogu da se odrede sa gettype ili is_type funkcijom na primer:

• gettype($total) može da vrati "unknown"

• is_integer($total) vraća Boolean vrednost

13.2.7. Izlaz

Izlaz iz PHP skripta je XHTML koji se šalje brauzeru kroz standardni output. Postoje trinačina da bi se proizveo output: echo, print i printf. Ako se koriste echo i print uzima sestring. Na primer:

echo "Hello there!"; echo("Hello there!"); echo $sum;

print "Welcome!"; print("Wellcome"); print (46);

13.2.8. Kontrolne naredbe

Selekcije

• if, else, else if

• switch, pri čemu switch izraz mora biti integer, double ili string.

Petlje

• while, do-while, for.

13.2.9. Nizovi

Nizovi nisu definisani kao kod drugih programskih jezika. PHP niz je generalizacija nizovadrugih jezika. PHP niz je stvarno mapiranje ključeva na vrednosti, gde ključevi mogu dabudu brojevi (da bi dobili tradicionalni niz) ili stringovi (da bi dobili hash).

13.2.10. Kreiranje nizova

Koristi se array() konstrukcija, koja ima jedan ili više parova (ključ => vrednost) kaoparametre i vraća niz njihovih vrednosti. Ključevi su nenegativni integer literali ili stringliterali – slova. Kao vrednost može da se uzme bilo šta. Slede primeri nizova i elemenata:

$list1 = array();

$list2 = array (17, 24, 45, 90);

$list3 = array(0 => "jabuke", 1 => "pomorandze", 2 => "kruske")

$list4 = array("Joe" => 42, "Mary" => 41, "Jan" => 17);

342 Multimedija

13.2.11. Pristupanje elementima niza

Individualnim elementima može da se pristupi kroz indekse

$list[4] = 7;

$list["day"] = "Tuesday";

$list[] = 17;

Ako elemenat sa određenim ključem ne postoji, kreira se. Ako niz ne postoji, niz se kreira.Ključevi ili vrednosti mogu da se dobiju iz niza:

$highs = array("Mon" => 74, "Tue" => 70, "Wed" => 67, "Thu" => 62,

"Fri" => 65);

$days = array_keys($highs);

$temps = array_values($highs);

13.2.12. Rad sa nizovima

Niz može biti izbrisan sa unset, na primer:

• unset($list);

• unset($list[4]); # Ne postoji više element niza sa indeksom 4

• is_array($list) vraća true ako je $list niz

• in_array(17, $list) vraća true ako je 17 element niza $list

• explode(" ", $str) kreira niz čija su vrednosti karakteri reči $str odvojeni raz-maknicom (spacebar-om)

• implode(" ", $list) kreira string elemenata od reči $list odvojenih praznim(blanko) znacima

13.2.13. Sortiranje niza

Za sortiranje vrednosti niza koristi se funkcija sort, ostavljajući ključeve u njihovom sa-dašnjem redosledu. Funkcija je namenjena za tradicionalne nizove. Na primer:

sort($list);

radi i za stringove i za brojeve, čak i mešovito

$list = (’h’, 100, ’c’, 20, ’a’);

sort($list);

// Proizvodi (’a’, ’c’, ’h’, 20, 100)

PHP 343

13.2.14. Funkcije

Funkcije se definišu na sledeći način:

function ime_funkcije([formalni_parametri]) {

...

}

Funkcije ne treba da se definišu pre poziva. Preklapanje funkcija nije podržano. Pogrešnoje redefinisanje funkcije. Imena funkcija nisu case sensitive. Naredba return vraća vrenostiz funkcije.

13.2.15. Parametri funkcijeAko pri pozivu funkcije ima previše stvarnih parametara, funkcija ignoriše višak. Defaultmetod prosleđivanja parametara je prosleđivanje po vrednosti – pass by value (jednosmernakomunikacija). Da bi se odredilo prosleđivanje po referenci – pass-by-reference, dodaje seampersand & ispred formalnog parametra:

function addOne(&$param) {

$param++;

}

$it = 16;

addOne($it); // $it je sada 17

13.2.16. Doseg i trajanje promenljivih

Promenljive definisane u funkciji imaju lokalni doseg - local. Da bi pristupili varijablamakoje nisu lokalne u funkciji, mora varijable da deklarišemo kao globalne - global (unutarkoda funkcije)

global $sum;

Normalno, vreme trajanja varijable u funkciji je od njenog prvog poziva do kraja izvršenjafunkcije.

13.2.17. Rad sa formama

Formama treba da rukuje isti dokument koji kreira formu, ali ovo može biti zbunjujuće.Odvojeni dokument koji rukuje formom može da bude specificiran kao vrednost actionatributa.

Nije važno da li se GET ili POST metodi koriste za prenos podataka forme.

PHP gradi niz vrednosti forme

• $_GET za GET metod

• $_POST za POST metod

gde su indeksi imena kontrola (widget).

344 Multimedija

13.2.18. Fajlovi

PHP je sposoban da kreira fajlove, čita iz fajlova i upisuje u fajlove na server sistemu.

Otvaranje fajla se izvršava funkcijom fopen gde se fajlu pridružuje varijabla za budućereferenciranja. Na primer:

$fptr = fopen(filename, use_indicator)

Svaki otvoren fajl ima interni pointer. Ako fopen ne uspe, koristi se die

$file_var = fopen ("test.dat", "r") or

die ("Error - test.dat can’t be opened");

Indikatori korišćenja fajla su: "r", "r+", "w", "w+", "a", "a+".

Koristite file_exists(ime_fajla) za određivanje da li fajl postoji pre pokušaja otva-ranja. Za zatvaranje fajla koristi se fclose(file_var).

Čitanje iz fajla se može prikazati preko sledećih primera:

1. Čitanje celog ili dela fajla i ubacivanje tog sadržaja u string varijablu:

$str = fread($file_var, #bytes)

Za čitanje celog fajla treba da se koristi filesize(ime_fajla) kao drugi parame-tar:

$file_string = fread ($file_var, filesize("test.dat"));

2. Čitanje linija iz fajla i smeštanje u niz:

$file_lines = file(ime_fajla);

Ne podrazumeva se otvaranje ili zatvaranje fajla.

3. Čitanje jedne linije iz fajla

$line = fgets(file_var, #bytes)

čita karaktere do kraja linije eoln, do kraja fajla eof, ili broja bajtova #bytes karak-tera koji se čitaju.

4. Čita se jedan karakter:

$ch = fgetc(file_var)

Kontrola čitanja linija ili karaktera do detekcije kraja fajla koristeći feof (TRUE za eof;FALSE za ostalo):

PHP 345

while(!feof($file_var)) {

$ch = fgetc($file_var);

}

Upis u fajl:

$bytes_written = fwrite($file_var, $out_data);

fwrite vraća broj upisanih bajtova.

Fajlovi mogu biti zaključani (da bi se izbego problem istovremenog pristupa) koristećifunkciju flock koja ima dva parametra, promenjivu koja je pridružena fajlu i ceo broj kojiodređuje određenu operaciju: 1 – fajl mogu da čitaju drugi, 2 – zabranjeno korišćenje fajlai 3 – otključavanje fajla.

13.2.19. Kolačići (cookies)

Kolačić - kuki je mali objekat informacija koji je sastavljen od imena i tekstuelnih vrednosti.Kuki kreira neki softverski sistem na serveru. U trenutku kada se kreira daje mu sevreme trajanja – lifetime. Svaka HTTP komunikacija između brauzera i servera uključujeinformacije u njegov heder o poruci (ovo može da uključi cookies). Brauzer može da budepostavljen da odbaci sve kolačiće.

Kolačići se kreiraju funkcijom setcookie:

setcookie(cookie_name, cookie_value, lifetime);

setcookie("voted", "true", time() + 86400);

Kolačići mora da budu kreirani pre bilo kog drugog XHTML kreiranja od strane PHPdokumenta, zato što se kolačići skladište u zaglavlju HTTP protokola.

Slika 13.2. Korišćenje Cookie mehanizma

13.2.20. Praćenje sesije

Sesija je vreme za koje brauzer interaguje sa određenim serverom. HTTP protokol nevodi računa o statusu konekcija (stateless). Alternativa su kolačićima. Postoji nekolikorazloga zašto je koristan za server koji povezuje zahtev sa sesijom:

346 Multimedija

• šoping karta za mnoge različite simultane potrošače,

• potrošački profili za reklamiranje i

• potrošački interfejsi za određene klijente.

Za praćenje sesije, PHP kreira i održava identifkacioni broj – session tracking id. Kreira seid pozivom session_start bez parametara. Varijabla sesije se kreira ili menja dodelom$_SESSION niza.

Kao primer posmatraćemo broj poseta strani nekog sajta. Treba da se postavi sledeći kôdu sva dokumenta:

session_start();

if (!IsSet($_SESSION["page_number"}))

$_SESSION["page_number"]= 1;

$page_num = $_SESSION["page_number"];

print("You have now visited $page_num");

print(" page(s) <br />");

$_SESSION["page_number"]++;

13.3. Arhitekture za pristup bazama podataka

Posmatramo dvoslojni sistem sa klijentima koji su povezani direktno na server baze po-dataka. Zadaci klijenata su:

• obezbediti kako da korisnici ostvare podnošenje – submit upita,

• startovati aplikacije koje koriste rezultate upita i

• prikazati rezultate upita.

Zadatak servera baze podataka je implementacija jezika za manipulaciju podacima, kojimože direktno da pristupi i ažurira bazu podataka. Rešenje problema dvoslojnih sistema jedodavanje komponente u sredini čime se kreira troslojni sistem. Za Web bazirani pristupbazi podataka, srednji sloj može da startuje aplikacije (klijent samo treba da pokupirezultate).

Slika 13.3. Troslojna Web bazirana arhitektura

Svaka relaciona baza podataka se sastoji iz kolekcije tabela. Svaki red je jedinstveni zapis– record, dok je svaka kolona atribut zapisa. Primarni ključ je jedan ili više ključeva kojijedinstveno identifikuju svaki red u tabeli.

PHP 347

13.3.1. Arhitektura za pristup bazi podataka

Treba definisati API interfejs (Application Programming Interface) za svaki specifičan sis-tem baze podataka (na primer MySQL API). Pogodan je za Web pristup bazama podataka,zato što se PHP izvršava na Web serveru.

13.3.2. MySQL sistem baze podataka

MySQL je slobodna, efikasna, široko korišćena SQL (Structured Query Language) imple-mentacija. Ova baza podataka je definisana na adresi http://www.mysql.org. Da bipristupili MySQL bazi podataka u Unix sistemu treba da dodate mysql vašoj tekućoj listipaketa. Treba da kreirate račun - account:

create_mysql

i promenite šifru kada se sledeći put prijavite

mysql [-u USERNAME] [DATABASE NAME] -p

USERNAME je MySQL korisničko ime, DATABASE NAME je ime baze podataka koje je naj-češće isto kao i vaše Unix korisničko ime. Opcija -p vam omogućava ubacivanje šifre.Promenite šifru sa:

set PASSWORD=PASSWORD(’Vasa_nova_sifra’);

Tabele kreirate komandom CREATE TABLE

CREATE TABLE Equipment (Equip_id INT UNSIGNED NOT NULL

AUTO_INCREMENT PRIMARY KEY, Equip CHAR(10));

Tabele baze podataka možete videti sa:

SHOW TABLES;

Opis tabele (kolone) vidi se pomoću:

DESCRIBE Equipment;

Druge komande – INSERT, SELECT, DROP, UPDATE, DELETE su iste kao SQL komande(MySQL Reference Manual za verziju 4.0.13).

13.3.3. Pristup bazi podataka sa PHP/MySQL

Za povezivanje PHP-a na bazu, koristi se mysql_connect, koji može imati tri parametra:

• Host (default je localhost)

• Username (default je korisničko ime PHP script)

• Password (default je blanko, koji radi ako baza ne zahteva šifru)

348 Multimedija

$db = mysql_pconnect();

obično proverava greške. Zatvorite konekciju ka bazi sa:

mysql_close

Selektujte bazu podataka sa:

mysql_select_db("automobili");

Poziv MySQL operacija je sa Call mysql_query sa string parametrom koji je SQL ko-manda:

$query = "SELECT * from States";

$result = mysql_query($query);

Sledi rad sa rezultatima. Broj redova rezultata se definiše:

$num_rows = mysql_num_rows($result);

Broj polja u rezultatu se definiše kao:

$num_fields = mysql_num_fields($result);

Uzmi redove sa mysql_fetch_array. Vrati niz iz sledećeg reda:

for ($row_num = 1; $row_num < = $num_rows; $row_num++)

{

$row = mysql_fetch_array($result);

print "<p> Result row number" . $row_num . " State_id: ";

print htmlspecialchars($row["State_id"]);

print "State: ";

print htmlspecialchars($row["State"]);

print "</p>";

}

Literatura

1. Tay Vaughan: Multimedia: Making it Work, Seventh Edition, McGraw-Hill Os-borne Media, 2006.

2. Ze-Nian Li, Mark S. Drew: Fundamentals of Multimedia, Prentice-Hall, 2004.

3. Nigel Chapman: Jenny Chapman: Digital Multimedia, Wiley, 3rd edition, 2009.

4. Ray Villalobos: Exploring Multimedia for Designers (Design Exploration), Del-mar Cengage Learning, 1st edition, 2007.

5. Stephen M. Alessi: Multimedia for Learning: Methods and Development, 3rdEdition, Allyn & Bacon, 2000.

6. Ken Jordan, Randall Packer: Multimedia – From Wagner to Virtual Reality,Expanded Edition, W. W. Norton & Company, 2002.

7. Timothy Garrand: Writing for Multimedia and the Web, Third Edition: APractical Guide to Content Development for Interactive Media, Focal Press, 2006.

8. William Lee, Diana Owens: Multimedia-based Instructional Design: Compu-ter-Based Training; Web-Based Training; Distance Broadcast Training; Per-formance-Based Solutions, Second Edition, Pfeiffer, 2004.

9. Edward Counts: Multimedia Design and Production for Students and Teach-ers, Allyn & Bacon, 2003.

10. Sanjaya Mishra, Ramesh C. Sharma: Interactive Multimedia in Education andTraining, Idea Group Publishing, 2005.

11. Jakob Nielsen: Multimedia and Hypertext: The Internet and Beyond (Inter-active Technologies), Morgan Kaufmann, 1995.

12. Grupa autora: Computer Graphics, Multimedia & Animation, 6th Edition, Pen-rose Pr., 2001.

13. Luke Welling, Laura Thomson: PHP and MySQL Web Development, 4th edi-tion, Addison-Wesley Professional, 2005.

14. James Kurose, Keith Ross: Computer Networking, 5th edition, Addison-Wesley,2010.

350 Multimedija

15. Andrew Tanenbaum: Computer Networks, 4th edition, Prentice Hall, 2003.

16. George Coulouris, Jean Dollimore, Tim Kindberg: Distributed Systems, 4th edi-tion, Addison Wesley, 2005.

17. Fred Halsall: Computer Networking and the Internet, 5th edition, AddisonWesley, 2005.

18. Boriana Koleva: Web Programming and Scripting, Teaching slides, University ofNottingham, 2010.

19. Grupa autora: Adobe Dreamweaver CS4 – Classroom in a Book, Adobe Press,2008.

20. Dragan Cvetković: Računarska grafika, CET i Računarski fakultet, Beograd, 2006.

21. Duncan Marsh: Applied geometry for computer graphics and CAD, 2nd edition,Springer undergraduate mathematics series, Springer-Verlag London Limited, 2005.

22. John Vince: Geometric Algebra for Computer Graphics, Springer-Verlag LondonLimited, 2008.

23. Philip J. Schneider, David H. Eberly: Geometric Tools for Computer Graphics,Elsevier Science (USA), 2003.

24. J.D.Foley, A.van Dam, S.K.Feiner, J.F.Hughes: Computer Graphics - Principlesand Practice, Second Edition in C, Addison-Wesley Publishing Company, Inc.,Boston, SAD, 1997.

25. J.Vince: Geometry for Computer Graphics - Formulae, Examples & Proofs,Springer-Verlag, New York, SAD, 2005.

26. J.Vince (Ed.): Handbook of Computer Animation, Springer-Verlag, New York,SAD, 2003.

27. David Salomon: Computer Graphics and Geometric Modeling, Springer, 1.edition, 1999.

28. John Dimarco: Computer Graphics and Multimedia: Applications, Problemsand Solutions, Idea Group Publishing, 2004.

29. Rafael C. Gonzalez, Richard E. Woods: Digital Image Processing, Second Edition,Prentice Hall, SAD, 2002.

30. Ching-Kuang Shene: Raytracing as a Tool for Learning Computer Graphics,32nd ASEE/IEEE Frontiers in Education Conference, Boston, 2002.

31. T. J. Jankun-Kelly: Visualizing Visualization - A Model and Framework forVisualization Exploration, University of California, Davis, SAD, 2003.

Literatura i sajtovi 351

32. Peter Shirley: Fundamentals of Computer Graphics, 1st edition, AK Peters, Ltd.,2002.

33. Garth Gardner: Computer Graphics and Animation: History, Careers, ExpertAdvice, Garth Gardner Company, 2002.

34. Elizabeth Castro: HTML, XHTML, and CSS, Sixth Edition, Peachpit Press,2006.

35. David Sawyer McFarland: CSS: The Missing Manual, O’Reilly Media, 2009.

36. Simon Collison, Andy Budd, Cameron Moll: CSS Mastery: Advanced Web Stan-dards Solutions, Second Edition, friends of ED, 2009.

37. Andy Harris, Chris McCulloh: HTML, XHTML, and CSS – All-in-One DeskReference For Dummies, For Dummies, 2008.

38. Chuck Musciano, Bill Kennedy: HTML & XHTML: The Definitive Guide, 6thedition, O’Reilly Media, 2006.

39. Jennifer Niederst Robbins, Aaron Gustafson: Learning Web Design: A Begin-ner’s Guide to (X)HTML, StyleSheets, and Web Graphics, O’Reilly Media,2007.

40. David Flanagan: JavaScript: The Definitive Guide, O’Reilly Media, 2006.

41. David Sawyer McFarland: JavaScript: The Missing Manual, Pogue Press, 2008.

42. Grupa autora: Adobe Flash CS4 Professional Classroom in a Book, AdobePress, 2008.

43. Grupa autora: Adobe Photoshop CS4 Professional Classroom in a Book, AdobePress, 2008.

44. Jon Duckett: Beginning HTML, XHTML, CSS, and JavaScript (Wrox Pro-grammer to Programmer), Wrox, 2009.

45. Robin Nixon: Learning PHP, MySQL, and JavaScript: A Step-By-Step Guideto Creating Dynamic Websites, O’Reilly Media, 2009.

46. Patrick Carey: New Perspectives on Creating Web Pages – HTML, XHTMLand XML, Comprehensive (New Perspectives), Course Technology, 2005.

47. Don Gosselin: JavaScript, Course Technology, 2007.

48. Guy W. Lecky-Thompson: Just Enough Web Programming with XHTML,PHP, and MySQL, Course Technology PTR, 2008.

49. Tim Converse: PHP Bible, 2nd edition, Wiley, 2002.

50. Rasmus Lerdorf, Kevin Tatroe: Programming PHP, O’Reilly Media, 2002.

352 Multimedija

51. Adam Trachtenberg, David Sklar: PHP Cookbook: Solutions and Examples forPHP Programmers, O’Reilly Media, 2006.

52. Jenq-Neng Hwang: Multimedia Networking: From Theory to Practice, Cam-bridge University Press, 2009.

53. Kevin Jeffay, Hong Jiang Zhang: Readings in Multimedia Computing and Net-working (The Morgan Kaufmann Series in Multimedia Information and Sys-tems), Morgan Kaufmann, 2001.

54. Fred Halsall: Multimedia Communications: Applications, Networks, Proto-cols and Standards, Addison Wesley, 2000.

55. Jerry D. Gibson: Multimedia Communications: Directions and Innovations(Communications, Networking and Multimedia), Academic Press, 2000.

Sajtovi sa Interneta u vezi sa materijom

• http://www.aonlinetraining.com/

• http://www.scholarshipsinindia.com/courses.html

• http://www.artdes.monash.edu.au/multimedia/courses.html

• http://www.pearsonlongman.com/ae/multimedia/

• http://www.kcc.ac.uk/multimedia-and-graphic-design/

• http://www.gatlineducation.com/multimediadesign.htm

• http://www.pressassociation.com/training/courses/multimedia.html

• http://www.wu.ece.ufl.edu/courses/eel6935f04/index.htm

• http://www.csd.uwo.ca/courses/CS1033/labs.html

• http://www.csd.uwo.ca/courses/CS1033/lectures.html

• http://www.cs.tufts.edu/comp/150MMC/

• http://ocw.mit.edu/courses/

• http://ocw.usq.edu.au/

• http://www.fanshawec.ca/EN/mmd1/program/next/courses.asp

• http://www.princetonreview.com/Majors.aspx?cip=090702&page=1

• http://bcq.sagepub.com/content/60/2/51.abstract

Odlukom Senata Univerziteta “Singidunum”, Beogrаd, broj 636/08 od 12.06.2008, ovaj udžbenik je odobren kao osnovno nastavno sredstvo na studijskim programima koji se realizuju na integrisanim studijama Univerziteta “Singidunum”.

CIP - Каталогизација у публикацијиНародна библиотека Србије, Београд

004.4’27

ПОПОВИЋ, Ранко, 1956- Multimedija / Ranko Popović, Dragan Cvetković, Dragan Marković. - Beograd : Univerzitet Singidunum, Departman za informatiku i računarstvo, 2010 (Loznica : Mladost grup). - X, 352 str. : ilustr. ; 25 cm

Tiraž 320. - Bibliografija: str. 349-352.

ISBN 978-86-7912-278-01. Цветковић, Драган, 1963- [аутор] 2. Марковић, Драган, 1956- [аутор]a) МултимедијиCOBISS.SR-ID 177910540

© 2010.Sva prava zadržana. Ni jedan deo ove publikacije ne može biti reprodukovan u bilo kom vidu i putem bilo kog medija, u delovima ili celini bez prethodne pismene saglasnosti izdavača.