us - multimedija

MULTIMEDIJA

Dragan CvetkovićDragan MarkovićNikola Savanović

MULTIM

EDIJA

MULTIMEDIJA


Dragan Cvetković

Dragan M

arkovićN

ikola Savanović

Un i v er z i t e t S ingidunum

Beograd, 2015.

ww

w.singidunum

.ac.rs

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 interaktivni računarski projekat u kome se koristi film, tekst i zvuk, kao što su, na primer, interaktivne enciklopedije, obrazovni kompakt diskovi ili DVD-i.

Proteklih godina, multimedija se sve više koristi u školstvu. Mogućnost ujedinjenja više komponenti (pet 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 zanimljiviji i može biti zabavan.

Ova knjiga spada u grupu stručnih dela iz oblasti računarskih i inženjerskih nauka, koja pokriva značajno područje, koje se izučava na nivou dodiplomskih i poslediplomskih studija danas i u svetu i kod nas. Predviđena je da bude osnovni udžbenik iz predmeta Multimedija koji se izučava unutar studijskih programa Informatika i računarstvo, Informacione tehnologije i Elektrotehnika i računarstvo na Univerzitetu "Singidunum" u Beogradu. Ova knjiga može da se koristi i na ostalim visokoškolskim ustanovama za predmete koji imaju sličan sadržaj.

DIGITALNO MANIPULISANI ZVUČNI I VIZUELNI SADRŽAJI

DIGITALNO MANIPULISANI ZVUČNI I VIZUELNI SADRŽAJI

9 788679 126092

UNIVERZITET SINGIDUNUM


MULTIMEDIJA

Prvo izdanje

Beograd, 2015.

MULTIMEDIJA

Autori:Prof. dr Dragan Cvetković, redovni profesorProf. dr Dragan Marković, vanredni profesorNikola Savanović, saradnik

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

Izdavač:Univerzitet „Singidunum” Beograd, Danijelova 32www.singidunum.ac.rs

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

Tehnička obrada:Dragan Cvetković

Dizajn korica:Aleksandar Mihajlović

Godina izdanja:2015.

Tiraž:600 primeraka

Štampa:Mobid, Loznica

ISBN: 978-86-7912-609-2

Copyright:© 2015. Univerzitet SingidunumIzdavač zadržava sva prava. Reprodukcija pojedinih delova ili celine ove publikacije nije dozvoljena.

Sadržaj

Predgovor ix

1 Šta je multimedija? 1

1.1. Definicije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2. CD-ROM, DVD i multimedijalni put . . . . . . . . . . . . . . . . . . . . . . 3

1.2.1. CD-ROM, DVD i multimedija . . . . . . . . . . . . . . . . . . . . . 3

1.2.2. Multimedijalni put . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.3. Gde koristiti multimediju? . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.3.1. Multimedija u poslovanju . . . . . . . . . . . . . . . . . . . . . . 4

1.3.2. Multimedija u školama . . . . . . . . . . . . . . . . . . . . . . . 5

1.3.3. Multimedija u kućama . . . . . . . . . . . . . . . . . . . . . . . 7

1.3.4. Multimedija na javnim mestima . . . . . . . . . . . . . . . . . . . 8

1.3.5. Virtuelna realnost . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2 Tekst 11

2.1. Značenje i njegova snaga . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.2. O fontovima . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.2.1. Tipografski merni sistem . . . . . . . . . . . . . . . . . . . . . . 14

2.2.2. Serif i Sans Serif . . . . . . . . . . . . . . . . . . . . . . . . 18

2.3. Upotreba teksta u multimediji . . . . . . . . . . . . . . . . . . . . . . . 20

2.3.1. Dizajniranje pomoću teksta . . . . . . . . . . . . . . . . . . . . . 20

2.3.2. Izbor tekstualnih fontova . . . . . . . . . . . . . . . . . . . . . . 20

2.3.3. Meniji za navigaciju . . . . . . . . . . . . . . . . . . . . . . . . . 22

2.3.4. Dugmad ili tasteri za interakciju . . . . . . . . . . . . . . . . . . 23

2.3.5. Polja za čitanje . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

ii Multimedija

2.3.6. HTML dokumenti . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

2.3.7. Simboli i ikonice . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

2.3.8. Animirani tekst . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2.4. Računari i tekst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

2.4.1. Kako nastaje font? . . . . . . . . . . . . . . . . . . . . . . . . . 28

2.4.2. PostScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

2.4.3. Konturni fontovi . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

2.4.4. Bezierove krive . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

2.4.5. Hint mehanizmi . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

2.4.6. Digitalne slovolivnice . . . . . . . . . . . . . . . . . . . . . . . . 32

2.5. Kodni sistemi za prikazivanje znakova . . . . . . . . . . . . . . . . . . . 33

2.5.1. Kodni sistem ASCII (ISO 646) . . . . . . . . . . . . . . . . . . . 34

2.5.2. ISO Latin 1 (ISO 8859-1) . . . . . . . . . . . . . . . . . . . . 35

2.5.3. WINDOWS set znakova . . . . . . . . . . . . . . . . . . . . . . . . 36

2.5.4. ISO 8859 porodica . . . . . . . . . . . . . . . . . . . . . . . . . 36

2.5.5. Unicode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

2.6. Jezici u svetu računara . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

2.7. Uređivanje teksta – pojmovi, pravila, saveti . . . . . . . . . . . . . . . . 40

2.8. Alati za dizajniranje i uređenje fontova . . . . . . . . . . . . . . . . . . . 42

2.9. Hipermedija i hipertekst . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

2.9.1. Prednosti hiperteksta . . . . . . . . . . . . . . . . . . . . . . . . 44

2.9.2. Upotreba hiperteksta . . . . . . . . . . . . . . . . . . . . . . . . 45

2.9.3. Pretraga po rečima . . . . . . . . . . . . . . . . . . . . . . . . . 45

3 Zvuk 47

3.1. Prednosti zvuka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

3.2. Multimedijalni sistemski zvuci . . . . . . . . . . . . . . . . . . . . . . . . 48

3.3. Digitalni audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

3.4. Kreiranje MIDI audia . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

3.5. Formati za audio datoteke . . . . . . . . . . . . . . . . . . . . . . . . . . 55

3.5.1. Vrste audio formata . . . . . . . . . . . . . . . . . . . . . . . . . 56

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

3.6. MIDI i digitalni audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

3.7. Zvuk za WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

3.8. Dodavanje zvuka u multimedijalni projekat . . . . . . . . . . . . . . . . . 61

Sadržaj i predgovor iii

4 Slike 63

4.1. Kreiranje statičnih (nepokretnih) slika . . . . . . . . . . . . . . . . . . . 63

4.1.1. Bitmape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

4.1.2. Clip Art-ovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

4.1.3. Softver za bitmape . . . . . . . . . . . . . . . . . . . . . . . . . 66

4.1.4. "Hvatanje" i editovanje slika . . . . . . . . . . . . . . . . . . . . 68

4.1.5. Skeniranje slika . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

4.1.6. Vektorska grafika . . . . . . . . . . . . . . . . . . . . . . . . . . 70

4.1.7. 3D crteži i renderovanje . . . . . . . . . . . . . . . . . . . . . . . 71

4.2. Boje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

4.2.1. Razumevanje boja . . . . . . . . . . . . . . . . . . . . . . . . . . 74

4.2.2. RGB – osnovne aditivne boje . . . . . . . . . . . . . . . . . . . . 76

4.2.3. HSV, HSI i HSL modeli boja . . . . . . . . . . . . . . . . . . . . . 78

4.2.4. CMY, CMYK i PANTONE modeli boja . . . . . . . . . . . . . . . . . 80

4.2.5. Još ponešto o bojama . . . . . . . . . . . . . . . . . . . . . . . . 83

4.2.6. "Matematičke operacije" sa bojama . . . . . . . . . . . . . . . . 84

4.3. Grafički formati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

4.4. Komprimovanje (sabijanje) podataka slike . . . . . . . . . . . . . . . . . 87

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

4.4.2. Macintosh grafički formati . . . . . . . . . . . . . . . . . . . . . 93

4.4.3. Još neki grafički formati . . . . . . . . . . . . . . . . . . . . . . . 93

5 Animacija 95

5.1. Istorija animacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

5.2. Principi animacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

5.3. Tipovi animacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

5.4. Računarska animacija . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

5.5. Vrste računarske animacije . . . . . . . . . . . . . . . . . . . . . . . . . 101

5.6. Budućnost računarske animacije . . . . . . . . . . . . . . . . . . . . . . 104

6 Video 105

6.1. Kako video radi? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

6.2. Standardi za analogno prikazivanje . . . . . . . . . . . . . . . . . . . . . 107

6.2.1. NTSC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

6.2.2. PAL i/ili SECAM . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

6.2.3. HDTV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

6.3. Standardi za digitalno prikazivanje . . . . . . . . . . . . . . . . . . . . . 109

iv Multimedija

6.3.1. Dodatni prolazi i bezbedna oblast za naslove . . . . . . . . . . . 109

6.3.2. Boje u videu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

6.3.3. Efekti preplitanja . . . . . . . . . . . . . . . . . . . . . . . . . . 1106.3.4. Kalibracija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

6.3.5. Tekst i naslov za televiziju . . . . . . . . . . . . . . . . . . . . . 111

6.4. Digitalni video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

6.4.1. Analogno i digitalno . . . . . . . . . . . . . . . . . . . . . . . . . 112

6.4.2. Digitalna obrada signala . . . . . . . . . . . . . . . . . . . . . . . 113

6.4.3. Prednosti DSP-a . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

6.5. Digitalni video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

6.5.1. Merenje vremena u video klipu . . . . . . . . . . . . . . . . . . . 116

6.5.2. Kako vremenska baza i brzina slika utiču jedna na drugu? . . . . . 117

6.5.3. Merenje vremena korišćenjem vremenskog koda . . . . . . . . . . 119

6.5.4. Televizijska slika . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

6.5.5. Merenje veličine slike i rezolucije . . . . . . . . . . . . . . . . . . 121

6.5.6. Proporcija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

6.5.7. Nekvadratni pikseli . . . . . . . . . . . . . . . . . . . . . . . . . 121

6.5.8. Veličina slike . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

6.5.9. Preskeniranje i bezbedne zone . . . . . . . . . . . . . . . . . . . 123

6.5.10. Dubina bita . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

6.5.11. Razumevanje komprimovanja video podataka . . . . . . . . . . . 124

6.5.12. Izbor metoda za kompresiju video zapisa . . . . . . . . . . . . . . 125

6.5.13. Prostorno komprimovanje . . . . . . . . . . . . . . . . . . . . . . 125

6.5.14. Temporalno komprimovanje . . . . . . . . . . . . . . . . . . . . . 126

6.5.15. Komprimovanje sa očuvanjem kvaliteta . . . . . . . . . . . . . . 127

6.5.16. Komprimovanje sa narušavanjem kvaliteta . . . . . . . . . . . . . 127

6.5.17. Asimetrična i simetrična kompresija . . . . . . . . . . . . . . . . 127

6.5.18. DV komprimovanje . . . . . . . . . . . . . . . . . . . . . . . . . . 128

6.5.19. Digitalno presnimavanje video zapisa . . . . . . . . . . . . . . . . 128

6.5.20. Digitalizacija DV-a . . . . . . . . . . . . . . . . . . . . . . . . . . 129

6.5.21. Digitalizacija analognog video klipa . . . . . . . . . . . . . . . . . 130

6.5.22. Razumevanje digitalnog zvuka . . . . . . . . . . . . . . . . . . . 130

6.5.23. Sinhronizacija zvuka i video klipa . . . . . . . . . . . . . . . . . . 130

6.6. Kompresija AV podataka i optički medijumi . . . . . . . . . . . . . . . . 131

6.6.1. Zašto je digitalni video komprimovan? . . . . . . . . . . . . . . . 131

6.6.2. Kompresija bez gubitaka . . . . . . . . . . . . . . . . . . . . . . 132

6.6.3. Kompresija sa gubitkom . . . . . . . . . . . . . . . . . . . . . . . 132

Sadržaj i predgovor v

6.6.4. Psihoakustička audio kompresija . . . . . . . . . . . . . . . . . . 132

6.6.5. Psihovizuelna video kompresija . . . . . . . . . . . . . . . . . . . 133

6.6.6. Kako je nastao MPEG? . . . . . . . . . . . . . . . . . . . . . . . . 133

6.6.7. Osnove MPEG-4 standarda . . . . . . . . . . . . . . . . . . . . . 134

6.6.8. MPEG-4 Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

6.6.9. MP4 format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

6.6.10. MPEG-4 audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

6.6.11. MPEG-7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

6.6.12. Neki tipovi digitalnih audio datoteka . . . . . . . . . . . . . . . . 136

6.6.13. Neki tipovi digitalnih video datoteka . . . . . . . . . . . . . . . . 136

6.7. Snimanje i editovanje (uređenje) videa . . . . . . . . . . . . . . . . . . . 137

6.7.1. Planiranje ili scenario . . . . . . . . . . . . . . . . . . . . . . . . 138

6.7.2. Platforma za snimanje . . . . . . . . . . . . . . . . . . . . . . . 138

6.7.3. Osvetljenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

6.7.4. Hroma ključevi (Chroma Keys) . . . . . . . . . . . . . . . . . . 139

6.8. Optimizovanje video fajlova za CD-ROM . . . . . . . . . . . . . . . . . . . 139

6.9. Virtualna realnost (stvarnost) . . . . . . . . . . . . . . . . . . . . . . . . 140

6.9.1. Definicija i princip virtalne realnosti . . . . . . . . . . . . . . . . 141

6.9.2. Uređaji za virtaulnu realnost . . . . . . . . . . . . . . . . . . . . 142

6.9.3. Primene virtaulne realnosti . . . . . . . . . . . . . . . . . . . . . 147

6.9.4. Proširena realnost (stvarnost) . . . . . . . . . . . . . . . . . . . . 149

7 XML – format za razmenu podataka na Web-u 151

7.1. Šta XML jeste? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

7.2. Šta XML nije? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

7.3. Namena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

7.4. Standard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

7.5. Kako radi XML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

7.6. Imenovanje elemenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

7.7. Sintaksa XML-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

8 HTML/HTML5 163

8.1. HTML i osnove Web strana . . . . . . . . . . . . . . . . . . . . . . . . . . 164

8.2. HTML i tekst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

8.3. HTML i slike i/ili fotografije . . . . . . . . . . . . . . . . . . . . . . . . . 177

8.4. HTML i linkovi i/ili veze . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

8.5. HTML i tabele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

vi Multimedija

8.6. HTML, zvuk i video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

8.7. HTML i forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

8.8. HTML i sekcije i/ili frejmovi . . . . . . . . . . . . . . . . . . . . . . . . . 209

8.9. Šta donosi HTML5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

8.10. HTML5 i semantika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

8.11. HTML5 i grafika (canvas) . . . . . . . . . . . . . . . . . . . . . . . . . . 217

8.12. HTML5 – video i audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

9 CSS/CSS3 223

9.1. CSS od nule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

9.2. CSS i pozicioniranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

9.3. CSS i tekst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

9.4. CSS i vizuelni efekti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251

9.5. "Najbitnije" CSS3 komande i noviteti . . . . . . . . . . . . . . . . . . . . 268

9.5.1. CSS3 i granični okviri . . . . . . . . . . . . . . . . . . . . . . . . 269

9.5.2. CSS3 i pozadine . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

9.5.3. CSS3 i gradijentni prelazi boja . . . . . . . . . . . . . . . . . . . 271

9.5.4. CSS3 i efekti na tekstu . . . . . . . . . . . . . . . . . . . . . . . 273

9.5.5. CSS3 i ravanske (2D) transformacije . . . . . . . . . . . . . . . . 274

9.5.6. CSS3 i prostorne (3D) transformacije . . . . . . . . . . . . . . . . 275

9.5.7. CSS3 i prelazni (tranzicioni) efekti . . . . . . . . . . . . . . . . . 275

9.5.8. CSS3 i animacija . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

9.5.9. CSS3 i višestruke kolone . . . . . . . . . . . . . . . . . . . . . . . 277

10 Uvod u JavaScript 279

10.1. Programiranje u JavaScript-u . . . . . . . . . . . . . . . . . . . . . . . 280

10.2. Operatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

10.2.1. Aritmetički operatori . . . . . . . . . . . . . . . . . . . . . . . . 285

10.2.2. Logički operatori . . . . . . . . . . . . . . . . . . . . . . . . . . 285

10.2.3. Operatori poređenja . . . . . . . . . . . . . . . . . . . . . . . . . 285

10.2.4. String operatori . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

10.2.5. Operatori za manipulaciju bitovima . . . . . . . . . . . . . . . . . 286

10.2.6. Operatori dodele . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

10.2.7. Ternarni operator uslovnog izraza . . . . . . . . . . . . . . . . . . 287

10.2.8. Specijalni operatori . . . . . . . . . . . . . . . . . . . . . . . . . 287

10.3. Kontrolne strukture i petlje . . . . . . . . . . . . . . . . . . . . . . . . . 287

10.3.1. Naredbe odlučivanja . . . . . . . . . . . . . . . . . . . . . . . . . 288

Sadržaj i predgovor vii

10.3.2. Programske petlje . . . . . . . . . . . . . . . . . . . . . . . . . . 289

10.3.3. Nizovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

10.3.4. Funkcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

10.4. Objekti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

10.4.1. Objekat window . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

10.4.2. Iskrsavajući prozori . . . . . . . . . . . . . . . . . . . . . . . . . 297

10.4.3. Objekat document . . . . . . . . . . . . . . . . . . . . . . . . . . 300

10.4.4. Objekat Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

10.4.5. Objekat Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

10.5. Događaji u JavaScript-u . . . . . . . . . . . . . . . . . . . . . . . . . 302

10.6. Animiranje objekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

10.6.1. Funkcija fade() . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

10.6.2. Funkcija fadeCallback() . . . . . . . . . . . . . . . . . . . . . 305

10.6.3. Funkcija getOpacity() . . . . . . . . . . . . . . . . . . . . . . . 306

10.6.4. Funkcija setOpacity() . . . . . . . . . . . . . . . . . . . . . . . 306

10.6.5. Dilema – setTimeout() ili setInterval()? . . . . . . . . . . . 306

10.6.6. Provera matičnog broja građana . . . . . . . . . . . . . . . . . . 308

10.7. Kolačići . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

10.8. Namenske JavaScript biblioteke . . . . . . . . . . . . . . . . . . . . . 313

10.8.1. DOM pristup i manipulacija . . . . . . . . . . . . . . . . . . . . . . 313

10.8.2. Olakšavanje i ubrzavanje programiranja . . . . . . . . . . . . . . 314

10.8.3. Proširivanje funkcionalnosti pomoću gotovih komponenti . . . . . 314

10.8.4. Izbor JavaScript biblioteke . . . . . . . . . . . . . . . . . . . . 314

10.9. jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

10.9.1. Instalacija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

10.9.2. Sintaksa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

10.9.3. Selektori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

10.9.4. Događaji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

10.9.5. Efekti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318

10.9.6. Dodavanje i uklanjanje elemenata . . . . . . . . . . . . . . . . . 322

10.9.7. Dodavanje i podešavanje CSS klasa . . . . . . . . . . . . . . . . . 323

10.9.8. Uvod u AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324

11 Processing 325

11.1. Okruženje za rad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

11.2. Processing i drugi uređaji . . . . . . . . . . . . . . . . . . . . . . . . . 327

11.3. Processing IDE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

viii Multimedija

11.4. Kako se izvršava processing? . . . . . . . . . . . . . . . . . . . . . . . . 329

11.5. Kako se Processing prikazuje? . . . . . . . . . . . . . . . . . . . . . . 330

11.6. Animacija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332

11.7. Interakcija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

11.8. Osnovni algoritam fizike u Processingu . . . . . . . . . . . . . . . . . . 334

11.9. Umesto zaključka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

Literatura 339

Sajtovi sa Interneta u vezi sa materijom . . . . . . . . . . . . . . . . . . 342

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) po-maže prosvetnim radnicima da prenesu učenicima i studentima znanje kroz jedinstvennačin. Učenici i studenti bolje i brže uče koristeći ove metode, a nastavni materijal jezanimljiviji i 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, Informacionetehnologije i Elektrotehnika i računarstvo na Univerzitetu "Singidunum" u Beogradu. Ovaknjiga može da se koristi i na ostalim visokoškolskim ustanovama za predmete koji imajusličan sadržaj.

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

Knjiga se sastoji iz jedanaest poglavlja. Prvi deo knjige, od prvog do šestog poglavlja, pred-stavlja multimediju kao izatkanu kombinaciju digitalno manipulisanog teksta, grafike,zvuka, animacije i video elemenata. Danas tekst i sposobnost čitanja predstavljaju "pro-laz" ka znanju i, eventualno, moći. Čitanje i pisanje su očekivane i neophodne veštine uvećini modernih društava. Kao što je bio slučaj kroz istoriju, tekst i dalje predaje informa-cije mogu imati moćna značenja. Drugo poglavlje se bavi ovom problematikom. Zvuk jeverovatno najuzbudljiviji deo multimedije. To je univerzalan govor na bilo kom jeziku. Pru-ža zadovoljstvo slušanja muzike, a može i da iznenadi senzacionalnim specijalnim efektimaili da utiče na raspoloženje iz "drugog plana". Način na koji se koristi zvuk može da označirazliku između obične i profesionalne, spektakularne multimedijalne prezentacije. Trećepoglavlje je posvećeno ovoj problematici. Ono što se vidi na ekranu multimedijalnogračunara u bilo kom trenutku je mešavina teksta, simbola, fotografskih bitmapa, vek-torske grafike, trodimenzionalnih prikaza, različitih dugmadi koju treba kliknuti i prozorapokretnog videa. Neki delovi ove slike se mogu pomerati ill kretati tako da ekran nikad

x Multimedija

ne izgleda mirno i izaziva oči. Računarski ekran je akcija – sadrži mnogo više od poruke;to je, takođe, osnovna veza gledaoca sa svim sadržajima nekog projekta. U četvrtompoglavlju se nalazi priča "vezana" za slike. Animacija je postupak stvaranja iluzije kre-tanja crtežima, modelima ili beživotnim stvarima. To je optička iluzija kretanja zahvalju-jući fenomenu poznatom kao perzistencija vida i može se izvesti na više načina. Pokretnivideo je elemenat multimedije koji može čvrsto da drži interes studenta za učenje pomoćuračunara. Digitalni video najviše i angažuje od svih multimedijalnih mogućnosti; to je vrlomoćno sredstvo da se korisnici računara približe realnom svetu. Peto i šesto poglavlje sebave ovom vrstom problematike.

Web tehnologija je doživela značajni napredak od svog nastanka do danas. Statične Webstranice pisane u HTML-u danas polako nestaju, a nove tehnologije kao što su DHTML, PHP,Java, JavaScript, ASP sve se više koriste i složenost izrade Web stranica sve je veća. Usedmom poglavlju se govori o XML formatu za razmenu podataka na Web-u. Jezik HTML

(HyperText Markup Language) je standarizovani jezik koji se koristi pri strukturiranjutekstova, medija i ugrađenih objekata u Web stranice i elektronsku poštu. Ovom jeziku jeposvećeno osmo poglavlje, kao i njegovoj najnovijoj verziji – HTML5. U devetom poglavljuobrađen je CSS, koji predstavlja specifikaciju koja služi za definisanje stilova koji određujuizgled nekog HTML elemenata (fontovi, boje, pozicija, dimenzija...); pored osnovnih ele-menata, obrađena je i najnovija verzija – CSS3. Prateći fajlovi za sedmo i osmo poglavljebiće priloženi na stranici predmeta, na sajtu Fakulteta za informatiku i računarstvo Uni-verziteta "Singidunum" u Beogradu. JavaScript je programski jezik koji se interpretira,sa objektno orijentisanim mogućnostima. Po sintaksi, jezgro jezika JavaScript slično jejezicima C, C++ i Java, i ovoj problematici je posvećeno deseto poglavlje. jQuery pred-stavlja JavaScript biblioteku otvorenog koda koja pojednostavljuje interkaciju izmeđuHTML dokumenta (preciznije objektnog modela dokumenta, DOM) i JavaScripta. Reč jeo "laganoj" JavaScript biblioteci, gde se obično "piše manje, a uradi više". U desetompoglavlju je bilo reči i o ovoj biblioteci.

Processing je programski jezik namenjen za generisanje i modikovanje grafike, a baziran jena Java programskom jeziku. On integriše programski jezik i razvojno okruženje u jedin-stveni sistem koji olakšava kreiranje računarske grafike i interaktivnosti, uključujući vek-torske i rasterske slike, interaktivne događaje, mrežno komuniciranje i objektno programi-ranje. Processing povezuje koncepte programiranja sa principima vizuelne forme, pokretai interakcije. Kreiran je za učenje osnova računarskog programiranja unutar vizuelnog kon-teksta. U jedanaestom poglavlju je bilo reči o ovom.

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

Redovni profesori Mašinskog fakulteta Univerziteta u Beogradu, dr Slavko Pešić, dipl. inž. idr Aleksandar Bengin, dipl. inž., kao i dr Dejan Živković, dipl. mat., redovni profesor Uni-verziteta "Singidunum" u Beogradu, pomogli su nam korisnim primedbama i sugestijama,koje su uputili tokom pisanja ove knjige, i mi koristimo ovu priliku da im se još jednomzahvalimo.

Beograd, septembar 2015. 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 semogu 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.

2 Multimedija

1.1. Definicije

Multimedija je, kako je gore opisano, izatkana kombinacija digitalno manipulisanog

teksta, 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 i radi,nego treba i znati kako multimedijalni računar koristi alate i tehnologije da bi ih ukompo-novao zajedno. Ljudi koji komponuju multimedijalne sadržaje u smislene celine su multi-

medijalni programeri.

Noseći softver, poruke i sadržaji predstavljeni na računaru, televizijskom ekranu, PDA (Per-

sonal 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, kaonadogradnja ili na Internetu, sa ili bez uputstva, to je multimedijalni proizvod. Projekat,takođe, može da bude stranica ili sajt na WWW, gde multimedijalni elementi mogu da se"ubacuju" pomoću HTML (Hypertext Markup Language) ili DHTML (Dynamic Hypertext

Markup Language) ili XML (eXtensible Markup Language) dokumenata i gde mogu dakoriste dodatke kao što je Macromedia Flash, Adobe LiveMotion ili Apple QuickTime

za prikazivanje multimedijalnih dela koristeći pretraživač (browser) kao što su Internet

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 naviga-cione kontrole i mogu da "lutaju" kroz sadržaj po želji, multimedija postaje nelinearna,a 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 scenarija kompletnog dela i pro-gramiranja. Ako se ne vodi računa o svemu, može se prelomiti ceo projekat sa loše dizaj-niranim interfejsom. Takođe, može ds se prelomi 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 multimedijal-nim elementima i obezbeđuju interakciju korisnika. Pored pružanja načina za korisnike dakomuniciraju 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 prikazivanjevideoporuka na dostupnom hardveru. Zvuci i filmovi su obično izrađeni pomoću alatki zauređivanje na ovim medijima, a zatim se elementi uvoze u autorizovani sistem za reproduk-ciju. Rezultat toga šta se dobija na plejbek i kako je to prikazano gledaocu na monitoru jegrafički korisnički interfejs ili GUI (Graphical User Interface). Ovaj interfejs propisujepravila o tome šta se dešava sa ulazom kao što je stvarna grafika na ekranu. Hardver i

Šta je multimedija? 3

softver koji određuju granice onoga šta se može desiti su multimedijalne platforme ilimultimedijalno 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. Štoje 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, videa ianimacija 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 proizvodnojpekarskoj liniji. Podrazumeva se da većina današnjih prodatih PC-a ima ugrađen ili CD-ROMili DVD plejer i prateći softver koji omogućava njihov rad. Mnogi sistemi se isporučuju i saDVD plejerima koji su u stanju da čitaju i CD-ROM diskove. Tehnologija višeslojnih DVD-eva(Multilayered Digital Versatile Disc) je na putu da poveća kapacitet i multimedijalnemogućnosti aktuelnih CD-ROM-ova na 18 gigabajta na jednom disku. CD i DVD rezači sekoriste 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 vlasnici utvr-dili vrednost svojih proizvoda i kako će naplaćivati novac za njih, informacioni elementi ćese konačno povezati u mreži, kao distribuirani resursi na "autoputu podataka" (u stvariviše kao put sa naplatom drumarine), gde će se plaćati sticanje i korišćenje informacijazasnovanih na multimedijalnim elementima.

Kompletni sadržaji knjiga i časopisa će biti dostupni putem elektronskih veza, igrani fil-movi će se gledati kod kuće, novinski izveštaji u realnom vremenu iz bilo kog mesta naZemlji će biti na raspolaganju, predavanja sa univerziteta će se pratiti u svrhu učenja nadaljinu, mape ulica bilo kog grada će biti vidljive, sa preporukama za restorane, na bilo komjeziku i gde će se uključivati određene izjave i video zapisi. Ovo nije naučna fantastika,to se sada dešava. Svaki od ovih interfejsa ili puteva ka informacijama su multimedijalniprojekti 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 svoje

4 Multimedija

sadrž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 korporacijese ujedinjuju kako bi kontrolisale sadržaje i isporuku "sutrašnjih informacija". Neke kom-panije će posedovati puteve za prenos podataka, druge kompanije će posedovati hardveri softverske interfejse na kraju linije, u kancelarijama i domovima. Neke će povezati sveto zajedno i omogućiti isporuku po zahtevu i naplaćivaće usluge. Bez obzira na to ko jevlasnik puteva za prenos i hardvera, proizvođači multimedijalnih sadržaja će stvarati noveliterature i bogate sadržaje koje će slati dalje. To je nova i uzbudljiva industrija, ali i daljese suočava sa mnogim "dečijim bolestima".

1.3. Gde koristiti multimediju?

Multimedija je odgovarajuća kada ljudski interfejs povezuje korisnika sa elektronskim in-formacijama bilo koje vrste. Multimedija poboljšava zadržavanje informacija i kada jepravilno 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 (Local Area Network, LAN) i širemreže (Wide Area Network, WAN) korišćenjem distribuiranih mreža i Internet protokola.

Slika 1.2. Animirane instrukcije i pripadajući simulator

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) i da to prikažu kroz animirane instrukcije, simulatore i animacije (slika 1.3).


Slika 1.3. Simulatori i animacije

Multimedija oko i unutar kancelarija je postala uobičajena. Hardver koji radi sa slikama sekoristi za kreiranje ID kartica zaposlenih i popunjavanja odgovarajućih baza podataka, zavideo komentare i za telekonferencije u realnom vremenu. Laptop računari su opremljeninajbržim procesorima i dolaze kompletni sa CD-ROM ili DVD uređajima, kao i sa odgovara-jućim memorijskim uređajima i elementima i spremni su za multimedijalne prezentacije.

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.4 prikazuje elemente pionirskog i nagrađi-vanog rada autora Mercer Meyer pod nazivom Just Grandma and Me koji je namenjenza decu 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.5, koja je na drugom kraju kontinuuma obrazovanja, pokazuje naslovni ekran sanaprednim elektronskim nastavnim sredstvom koje je pripremila Yale University School

of Medicine. Ona pruža lekarima preko 100 prezentacija i daje kardiolozima, radiolozima,studentima medicine i drugim specijalistima priliku za "dubinsko" učenje novih kliničkih

6 Multimedija

tehnika. Odrasli, kao i deca, uče pomoću istraživanja i otkrića, tako da multimedijalnisadržaji dolaze do punog izražaja.

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

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.

Slika 1.5. Medicinski multimedijalni projekat i prateća knjiga

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 kojima


ljudi ž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 samog porodičnog stabla(slika 1.6), multimedija je uveliko ušla u kuće. Na kraju, većina multimedijalnih projekataće stići kući preko televizora ili monitora sa ugrađenim mogućnostima interaktivnog ulazaili na starinski kolor televizor ili novije sisteme.

Slika 1.6. 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 štosu Sega, Nintendo, X-box ili Sony PlayStation. Postoji sve veće približavanje računarskezabave i multimedijalnih sadržaja sa raznoraznim računarskim igricama, koje pokrivajurazličite žanrove. Na primer, Nintendo je prodao više od 750 miliona igrica populaciji odoko 100 miliona igrača širom sveta.

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

Zone i Sony Stations sajtovi mogu se pohvaliti sa više od milion registrovanih korisnika

8 Multimedija

svaki – 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 hiljada domnogo 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.7) 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.7. Samostalni terminali ili kiosci sa pratećim softverom

U sredini na slici 1.7 prikazan je kisok iz supermarketa koji pruža informacije o uslugamau rasponu od planiranja obroka do završne kupovine. Hotelski kiosci izlistavaju restoraneu blizini, mapu grada, avio rasporede i pružaju gostima usluge kao što je automatizovananaplata. Štampači su često povezani sa ovim kisocima, tako da korisnici mogu da odšetajusa informacijom u štampanom obliku.

1.3.5. Virtuelna realnost

Jedan od računarskih koncepata o kojem se veoma mnogo piše i govori jeste pojava ta-kozvane virtuelne realnosti (VR, Virtual Reality). Iako je reč "virtuelno" višeznačna (uVujakliji ima desetak različitih interpretacija) u kontekstu računarske terminologije onaoznač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 računarskimigrama i tzv. simulacionom softveru. Pošto su računari u poslednjih desetak godina imalivrtoglavi razvoj po pitanju brzine centralnih procesorskih jedinica, video komponenti ikolič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.8. 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-

10 Multimedija

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 obrnutiproces – 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 firma Adobe najavili su podršku zanove 3D tehnologije.

Slika 1.9. 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će kla-se 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 da sla-bašna čovekova siva masa (mozak) uči napamet, pisane poruke su postale popularne međuelitom. Ovakve nove poruke nisu bile u velikoj opasnosti da nestanu usled raznoraznih ra-zloga. Čak i ako bi poruku presreli neprijatelji, ili konkurenti, ona bi i dalje bila nerazrešivaza 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. Či-tanje i pisanje su očekivane i neophodne veštine u većini modernih društava. Kao što jebio 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. Ma-ternji jezik Weba je HTML (Hypertext Markup Language), prvobitno dizajniran da prikažejednostavne tekstualne dokumente na računarskom ekranu, uz poneku sliku ubačenu kaoilustraciju. Akademski članci, novinski članci, kompleksni priručnici i sadržaji kompletnihknjiga su sada dostupni da se čitaju preko Interneta. Ugrađivanjem funkcija koje, na klikmišem, povezuju odabrane reči i fraze sa drugim sličnim i možda, detaljnijim materijalom,korisnik može da surfuje kroz medije koji su mnogo bogatiji, po pitanju raznih sadržaja,nego papirne stranice knjige.

Društveni uticaj ovog medija na način na koji ljudi pristupaju informacijama i koristeih biće fundamentalan sa sazrevanjem Weba. Suprotno današnjem televizijskom mediju,koji se sastoji od zvuka i slike sa nekoliko naslova koji su usmereni na pasivnu publiku,Web nudi aktivno 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. Nedavnoje firma Google izjavila da kroz njeno indeksiranje korisnik može da pronađe više od20 milijardi dokumenata, u zavisnosti od toga šta traži. Pošto je reč o ozbiljnoj firmi,svakodnevno ažuriranje uključuje preko 30 milijardi Web dokumenata, 3 milijarde slika ipreko 80 miliona 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 oznake

za naslove ekrana, menije i dugmad, koristeći reči sa najpreciznijim i najsnažnijim

značenjima kako bi se izrazilo ono što zaista treba. Treba shvatiti suptilne razlikei odgovorajuće nijanse. Izraz GO BACK! je jači i "oštriji" nego PREVIOUS; izraz QUIT je"jači" nego CLOSE. Na primer, odgovor FANTASTIČNO! može da bude mnogo bolji od TAJ

ODGOVOR JE ISPRAVAN!

Reči i simboli u bilo kom obliku, izrečeni ili zapisani, najčešći su sistem komunikacije. Tre-balo bi predočiti najšira značenja najvećem broju ljudi – precizno i u detalje. Zato su tielementi 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) kojisu slični 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,te danas 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-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 tipografskih

14 Multimedija

slova, veština slaganja, izrade, oblikovanja i funkcionalnog korišćenja slova. Ipak, ono naj-važnije se sastoji u tome da je glavni cilj tipografije što efikasniji način ponovnog korišćenjatipografskog materijala (olovnih i digitalnih znakova).

Najkraća definicija tipografije mogla bi da glasi – umetnost, nauka i tehnika korišćenja

i izrade 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 naizgledjednostavnim slovnim oblicima, no dobar tipograf i dizajner će od tih znakova moći danačini tehnič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 slično), 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 če-mu se 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).

Slika 2.3. Olovna slova i slog

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 doba

Tekst 15

pronalazača savremenog štamparstva Johannesa Guttenberga. Prvi pokušaj standardiza-cije preduzeo je Joseph Moxon u Engleskoj 1683. godine. Ipak, prve praktične rezultatepostigao je Pierre Simon Fournier koji je uveo tipografski merni sistem u kome je osnovnaveličina tipografska tačka (point typographique) – pt. Tokom 1775. godine. 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 stan-dard. Sistem je duodecimalan, tj. 12 tipografskih tačaka čini jedan cicero. Cicero je pojamkoji se najčešće koristio kao standardna mera pre uvođenja standardizovanog mernog sis-tema.

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 "podeoka" po 6 tipografskih tačaka, iz čega sledi da tipometarima 798 tipografskih tačaka, odnosno 62

12 cicera.

Slika 2.4. Didotov tipometar

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 "podeoka", 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.

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]

16 Multimedija

Na primer, za 6mm

6× 8 : 3 = 16 [pt]

Na sledećoj slici prikazana su imena ili nazivi "fontova", koja se danas više praktično nekoriste. 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 ispoddonjeg 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.

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).

Tekst 17

Slika 2.6. Merenje veličine pisma

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

Slika 2.7. Definisanje veličine proreda

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

18 Multimedija

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 neko-liko primera istog slova prikazanog različitim fontovima.

Slika 2.10. Slovo A "kroz" različite fontove

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 se naengleskom 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 malihslova (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 slovau sredinu 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 je

Tekst 19

reč 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. Pismo iliima serife ili nema (na francuskom sans znači bez). Serif je mali ukras na kraju potezakojim se ispisuje slovo. Times New Roman, Times, Bookman, New Century Schoolbooki Palatino su primeri serif-nih fontova. Helvetica, Arial, Optima i Avant Garde susans serif-ni fontovi. Na slici 2.12 prikazan je odnos između ova dva fonta.

Slika 2.12. Elementi slovnih znakova

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.

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 stava

20 Multimedija

u 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 See IsWhat 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 za sadrž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("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 potencijalnu

Tekst 21

reakciju 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.

• 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 i editorateksta omogućavaju olakšanu primenu inicijala i umanjenih velikih slova (SMALLCAPS) 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.

22 Multimedija

• 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;istaknuti 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 UserInterface, GUI) postaju sveprisutni u računarskoj zajednici, izvesne intuitivne akcije se učena 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 23

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,lako mož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 Svećice

ili Kurbla, zatim ka Ključ 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.

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 elektronske

24 Multimedija

poruke i čitaju ih sa papira, umesto da ih čitaju preko ekrana. Čitanje odštampanog ma-terijala ostaje udobnije.

Ako cilj multimedijalnog projekta ili Web sajta nije da prikazuje velike blokove teksta,onda bi trebalo pokušati da se prezentira korisniku samo po nekoliko pasusa teksta postrani. Trebalo bi upotrebiti font koji se lako čita, umesto lepšeg fonta koji je nečitljiv. Tre-balo bi pokušati da se prikažu celi pasusi na ekranu i treba izbegavati prekide gde korisnikmora da 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 u ostatkusveta važi internacionalna veličina A4 (210× 297mm). Orijentacija tipa "širi nego viši"je tipična za monitore i zove se landscape. Smanjivanje stranice na visinu monitora nijebaš uspešno. Postoje četiri mogućnosti ako se radi sa blokom teksta koji je veći nego štomože da stane:

• Trebalo bi staviti tekst u polje sa skrolovanjem. To rešenje preuzimaju pretraživači.

• Trebalo bi staviti tekst u jedno jedino polje ili grafičku sliku u projektnom prozoru iomogućiti korisniku da premešta ceo prozor nagore ili nadole, po komandi. To najvišeima smisla kada treba da se prikaže tekst sa prekidima strana i formatiranjem kojeje identično štampanom dokumentu.

• 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 štampanjei prelom. Video kontroleri unutar operativnih sistema Windows i MAC OS moguda zarotiraju tekst za korisnika (slika 2.17).

Slika 2.17. Rotiranje teksta unutar operativnog sistema

Tekst 25

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 odvojiti ele-menti kao što su naslovi, paragrafi, citati i slično. Pored toga, u HTML standard su ugrađenielementi koji detaljnije opisuju sâm dokument kao što su kratak opis dokumenta, ključnereči, podaci o autoru i slično. Ovi podaci su opštepoznati kao meta podaci i jasno suodvojeni od sadržaja dokumenta.

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

HTML je nastao uprošćavanjem SGML (Standard Generalized Markup Language, stan-dardizovani uopšteni jezik za označavanje) standarda sa svrhom opisa dokumenata 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. Ka-ko je Web rastao tako je rasla i potreba za bogatijim sadržajem te je u tom smeru razvijan iHTML standard. Tada su standardu dodate elementi za opis tabela, slika, slojeva, naprednoformatiranje teksta itd.

Svi HTML dokumenti bi trebali da počinju sa definicijom tipa dokumenta (Document TypeDefinition, DTD) koji pretraživaču definiše po kom standardu je dokument pisan. OsnovHTML-a predstavljaju tagovi i atributi. Pomoću tagova se određeni deo dokumenta odvajaod ostatka i na njega se primenjuju pravila definisana samim tagom. Atributi se nalazeunutar tagova i omogućavaju da se pored samog imena taga i unapred definisanog po-našanja još bliže odredi način prikaza i ponašanja označenog dela dokumenta. Slede dvaprimera:

<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 margini.

Dok se svojstva, tagovi, dodatni programi i specijalni skriptovi ubacuju ili ugrađuju u HTML

da bi se zadovoljila potražnja za multimedijalnim interfejsima, u jednom trenutku će HTMLmorati da bude redizajniran od nule – kao sredstvo za isporuku multimedije, ne samo kaosredstvo za prikaz raznih dodataka. Taj redizajn se trenutno dešava u obliku dinamičkogHTML-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 u headtag, dok se sâm sadržaj smešta u body tag. Oba elementa se nalaze unutar html taga.

<html>

<head>

<title>Naslov dokumenta</title>

</head>

26 Multimedija

<body>

<h1>Primer dokumenta</h1>

<p>Ovo je primer jednostavnog 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; kursoru obliku rotirajućeg peščanog sata kaže da treba sačekati dok računar nešta obrađuje. Iakoo simbolima korisnik može da misli kao o nečemu što pripada isključivo grafičkoj umetnosti,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 susimboličke prezentacije objekata i procesa koji su zajednički za korisničke interfejse mnogihoperativnih 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čkihsimbola (slika 2.18) mora da nauči.

Slika 2.18. Neke od uobičajenih ikonica ili simbola

Tekst 27

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

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

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žeda povećava naslov znak po znak. Za govornike jednostavno isticanje važnog teksta dobrodeluje kao sredstvo za pokazivanje. Kada treba napraviti nekoliko poenti, mogu da se staveključne reči na gomilu i osvetljavati ih po određenom redosledu. Neke reči mogu da letepo 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 Illustrator

28 Multimedija

i 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

2.4. Računari i tekst

Vrlo rano u razvoju monitora za računar Macintosh Apple je odabrao rezoluciju od 72

slikovna 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 IsWhat You 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 vektorizaci-je. 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 2.048 × 2.048 (ova vrednost se naziva UPM), a preciznost grafičke table je 300

tačaka po inču, potrebno je da se skenira crtež čija je minimalna veličina 7×7, a optimalna13× 13 inča (2.048/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še

Tekst 29

krug 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... Svemu nabrojanom je zajednički PostScript, kamen temeljac ne samo DTP-a, već imoderne 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.

30 Multimedija

2.4.3. Konturni fontovi

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

Bitmapirani font je kolekcija piksela, precizno izabranih tako da što bolje oponašaju origi-nalni dizajn. Za svaku veličinu slova izraženu u tačkama potreban je zasebni font. Bitna jei 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. Ukombinaciji sa DTP programom Xerox Ventura Publisher, bile su neophodne i odgovara-juće kolekcije SFP fontova u nekoliko standardnih veličina.

Iako su ovi fontovi završavali posao, rešenje je iz pozicije korisnika bilo komplikovano ineefikasno. 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 estetskekriterijume, 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 au-tomobila ili trupa aviona. Fundamentalni doprinos dao je francuski matematičar PierreBezier), koji je početkom sedamdesetih radio u fabrici automobila Renault. Osnovni ciljje bio da se segment krive linije može menjati intuitivnije, bez previše matematike.

Tekst 31

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

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).

Slika 2.24. Rasterizacija slova

32 Multimedija

Kada je rezolucija pri kojoj se obavlja rasterizacija dovoljno velika (tipično 2.540 tačaka poinču za foto-slog, što znači da na svakom kvadratnom milimetru površine ima raspoloživih10.000 tačaka), odstupanje idealnog oblika konture od rasterske mreže je minimalno ineprimetno za oko. Ali, kod manjih rezolucija rasterizacija može biti nezadovoljavajuća,jer varijacija od samo jedne tačke drastično menja oblik slova. To je posebno vidljivo kodslova m – očekuje se da sva tri vertikalna stuba budu iste debljine i da udaljenost izmeđunjih bude jednaka, a kod serifnih fontova očekuje se ujednačenost svih serifa. Narušavanjenekog od ovih pravila dovodi do neusaglašenog izgleda fonta.

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 hint mehanizmi, a postupak naznačavanja fonta naziva se hinting.

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 prilikomslanja u štampariju) ostaju samo crteži slova sa zatečenim razmacima, a hintovi segube, pa se ponekad dešava da sitna slova u štampi ispadnu deblje ili sa neujednačenimstubovima. Zbog toga je važno da slova ostanu u obliku fonta da bi se rasterizacija vršilaonako kako je 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će zaseb-no da razmotri kvalitet kontura i hintova. Izuzimajući dizajn, videće da su kod prvoklasnih

Tekst 33

fontova konture precizno kodirane, a svi elementi koji izgledaju identično, predstavljeni supotprogramima kako bi se osigurala efikasnost i konzistentnost fonta. U Type 1 fontovimasu, gde god je to moguće, upotrebljeni flex i hint replacement mehanizmi. Konture suopisane minimalnim brojem kontrolnih tačaka, a kerning informacije briž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.

Slika 2.26. Varijacije fonta Euclid

Adobeova kolekcija Type Library je polazna tačka za profesionalni DTP. Ova kolekcijaje raznovrsna i bogata i plod je Adobe-ove saradnje sa firmom Linotype, koja je međuprvima počela sa prevođenjem klasičnih tipova pisama u fotokompozitni, a zatim i digi-talni oblik. Kompanija Adobe je licencirala Linotypeove biblioteke i prodaje ih pod svo-jim imenom. Postoji i skup fontova pod nazivom Adobe Originals, koji sadrži originalneAdobe-ove dizajne i neke uspešne varijacije klasičnih fontova. Potom se pojavila prva kolek-cija njihovih ručno hintovanih TrueType fontova, pod nazivom Adobe WebType. Dvanaestfontova u ovom paketu su Minion, Myriad, Caflisch Script, Mezz, Penumbra i Giddyup,kao i njihove varijacije.

2.5. Kodni sistemi za prikazivanje znakova

Kodovanje ili kodiranje podrazumeva proces prikaza informacija u nekom obliku. Jezikljudi je kodni sistem kojim se predstavljaju informacije kao nizovi leksičkih jedinica, a njihpak kao zvukove, odnosno, mimiku. Pisani jezik je izvedeni sistem kodiranja kojim te nizo-ve leksičkih jedinica, zvukova i gestova predstavljaju grafičkim simbolima koji sačinjavajuneki sistem 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 nekogsistema 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 za nji-hovo prikazivanje u obliku obradivih jedinica unutar računara. Naravno, ne postoji predo-dređen način na koji se ovo radi. ASCII standard je jedan od sistema, ali ne i jedini. Na taj

34 Multimedija

način, isti niz brojeva može se protumačiti na beskonačno mnogo načina, zavisno od kon-vencija koje se pretpostavljaju. U najjednostavnijem slučaju, koji je još uvek najrašireniji,jedan oktet bitova (bajt) odgovara jednom znaku prema nekoj kodnoj tabeli. Ovako jemoguće prikazati 256 različitih znakova. Za pravilan način dekodiranja, mora biti poznatokoja tabela se koristi.

Dok je ranije ASCII kodiranje bilo najučestalije, danas je raširen ISO Latin 1 način kodi-ranja, koji se može smatrati ekstenzijom ASCII-a. ASCII je bio dovoljan samo za prikazteksta na američkom engleskom. Nije bio dovoljan za britanski engleski, a kamoli za iz-davaštvo na engleskom govornom području ili gotovo bilo kom drugom jeziku. Ubrzo suprodrli novi standardi i to iz dva izvora – ustanova za standardizaciju i nezavisni proizvođačisoftvera i hardvera. Tako su firme IBM (codepage 437, 852, 855), Apple i Microsoft(codepage 1252 = Western = Latin 1) stvarali standarde usput kako su im zatrebaliza proizvode koje su izdavali. Ako bi neki takav standard postao široko prihvaćen, na-cionalno standardizacijsko telo ga je moglo proglasiti nacionalnim standardom, a takvi sustandardi 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 pod pret-postavkom da je aktivan jedan od tih standarda. Ako podaci nisu tačno ili uopšte označenikojim 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)

ASCII (American Standard Code for Information Interchange) je oznaka za repertoarznakova, set kodiranih znakova i obrazac za kodiranje. Većina postojećih kodova sadržeASCII kao svoj podskup u nekom smislu. Naziv ACSII se koristi naširoko i često pa se takoponekad misli na tekst uopšteno, ili tekstualnu datoteku za razliku od binarne. ASCII podefiniciji sadrži i set kontrolnih kodova, ali pravi repertoar znakova koji se sastoji od ispi-sivih znakova je prikazan na slici 2.27. Set kodiranih znakova definisan ASCII standardomje sledeći – kodne vrednosti su dodeljene znakovima redom koji je naveden prethodno,počevši od 32 za prazninu i završavajući sa 126 (tilda). Mesta 0÷ 31 i 127 su rezervisanaza kontrolne kodove koji imaju standardizovana imena i opise, ali im primena varira.

Tekst 35

Slika 2.27. ASCII – ISO 646 proširen

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 zna-kova koji se naziva Latin alphabet No. 1, obično zvan ISO Latin 1, te set kodiranihznakova. Standard specificira i obrazac za kodiranje koji je sličan onome u ASCII-u; svakiznak je predstavljen oktetom.

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

36 Multimedija

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

2.5.3. WINDOWS set znakova

Tokom razvoja operativnog sistema Windows Američki nacionalni institut za standarde(ANSI) je razvijao standard koji je postao ISO 8859-1 Latin. Kompanija Microsoft jekreirala svoju kodnu stranicu 1252 za zapadno evropske jezike na osnovi ranog nacrtaANSI predloga i to nazvala "ANSI kodna stranica". Kodna stranica 1252 je finalizovana prenego ISO 8859-1 i to dvoje nisu isti – 1252 je širi od ISO 8859-1. Kasnije je kompanijaMicrosoft počela da koristi ANSI u smislu bilo koje Windows kodne stranice, za razlikuod Unicode.

U ISO 8859-1 standardu, kodne pozicije 128÷159 su eksplicitno rezervisane za kontrolnesvrhe tj. odgovaraju kombinacijama bitova koje ne predstavljaju grafičke znakove. Tako-zvani Windows set znakova (WinLatin1 ili Windows kodna stranica 1252) koristi nekeod tih pozicija za ispisive znakove. Korišćenje kodnih znakova pod brojevima 128÷ 159 uprogramu koji očekuje pravi ISO 8859-1 može izazvati različita ponašanja. Može se desitida se ti znakovi ignorišu, da izgledaju kao nešto što ima smisla ili da se interpretiraju kaokontrolni 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. Sâm ISO 8859-1 je deo veće porodice znakovnihkodova 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.

Tekst 37

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čitim kod-nim tabelama, raspoloživog opsega znakova koji su isticani u dosadašnjem tekstu. Ovajstandard je prihvaćen od vodećih industrijskih firmi kao što su – Apple, HP, IBM, Mi-crosoft, Oracle – kao i mnoge druge. Unicode je potreban kod modernih standarda kaošto su: XML, Java, JavaScript, WML itd. Podržan je od strane mnogih operativnih sistemai svih savremenih čitača.

38 Multimedija

Slika 2.30. Unicode

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

je, uglavnom, bila ograničena na "osnovnu višejezičnu ravan" koja se sastoji od raspona0÷ FFFF.

Tekst 39

UTF-32 kodira svaki kodni broj kao 32-bitni celi broj, tj. kao 4 bajta. Ovo je vrlo očitoi jednostavno kodiranje. Sa druge strane, neefikasno je s obzirom na broj korišćenih baj-tova. Ako se ima normalni engleski tekst ili neki drugi tekst koji sadrži samo znakove iztablice 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 Sumerije, 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 japanskoj kanji alfabet ima više od 3 000 kana ili celih reči. Ruski alfa-bet, napravljen od ćiriličnih znakova zasnovanih na starom grčkom alfabetu, ima otprilikeisti 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 zapredstavljanje decimalnih brojeva, što omogućava lako čitanje, pisanje, manipulaciju iproračun. Izražavanje

16 + 32 = 48

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

XVI+ XXXII = XLVIII

ι ζ+ λβ = μη

40 Multimedija

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 (neredovankraj), "u desno" – sa leve strane je neredovan početak, a desna strana je poravnata, "usredinu" – i sa leva i sa desna je tekst "jednako nazupčen" sa centriranim redovima. Ovatri načina najčešće su slaganja bez deljenja reči sa jednakim belinama među rečima ucelom 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.

Osnovni font/tekst (body text) je veličina i vrsta pisma u nekoj publikaciji kojim je rešenatipografija većine teksta. Zahteva se maksimalna čitljivost, funkcionalnost i prilagođenjesadržaju. Za knjižno čitanje sa udaljenosti oko 30 cm slova su najčešće veličine od 10 do12 tačaka pismovnog reza bez proširenja, nisu kurzivna, nisu podebljana, nemaju nikakveefekte naglašavanja ili ukrašavanja.

Tekst 41

Neki fontovi su jako nečitljivi (na primer, klasična antiqua) i zato se oni nikada ne koristeu službenim dokumentima, već se tamo koriste slova koja su izrazito čitljiva i lako pre-poznatljiva – serifi (uspravni i još bitnije vodoravni potezi – male crtice na dnu i na vrhufonta) vizuelno povlače crtu ispod reda teksta i time olakšavaju čitanje, odnosno praćenjelinije teksta. Opšte je pravilo da u telo teksta ide serifni font (postoje izuzeci). Čitljivost,takođe, jako zavisi od pismovnog reza. Slova koja koriste 20% prostora u četvercu sunajbolja 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 kodsitnijih slova. Jednostavnije rečeno, kod vrlo krupnih slova smanjivanje spacinga dopri-nosi č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 sepovećaju, oni će i dalje bit "lagani" i neće biti u stanju da privuku čitaočevu pažnju kaoChicago ili Arial koji su poprilično "teški (masni)" fontovi.

42 Multimedija

Š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 os-tatka teksta tako da njihova nekritička primena ometa čitanje. Velika slova se, međutim,povremeno moraju upotrebiti za skraćenice, lična imena ili prezimena, uvodne reči u pa-susu... Da bi se pojavni oblik velikih slova uskladio sa malim slovima upotrebljavaju seštampana slova ili umanjeni verzal (engleski termin je small caps). Štampana slova poobliku odgovaraju velikim slovima (verzalu), a po veličini malim slovima (kurentu). Onanisu dobijena običnim smanjivanjem velikih slova jer su takve varijante small caps slovaprimetno tanje od ostatka teksta, a nema razloga da se koriste slovni oblici koji bes-potrebno odudaraju od osnovnog teksta. Prava štampana slova su specijalno dizajniranikarakteri kod kojih je debljina poteza i serifa, kao i veličina čitavih slova, proračunatatako da bude usklađena sa malim slovima. Upotreba štampanih slova je jedan od dokazatipografske profinjenosti koja osigurava vrhunsku čitljivost teksta.

Linije – u tipografiji se upotrebljavaju kao okviri, za podcrtavanje, kao ukrasi i kao si-gurnosne linije. Za podcrtavanje nekih važnih delova teksta se koriste ravne i valovitelinije. Sigurnosne linije se koriste u službenim dokumentima. Ako se preko te linije napišetekst, menjanjem teksta se menjaju i linije pa se zato te linije koriste za proveru auten-tičnosti npr. 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" itd.

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 dizajneri,izdavači i reklamne agencije mogu da prave brze varijacije na temu postojećih fontova.

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 umestonekorišćenih znakova u proširenom skupu znakova. Postoji mogućnost i da se u font ubacii nekoliko prilagođenih verzija logotipa naručioca ili neki drugi posebni simboli koji surelevantni za sadržaj i temu.

Tekst 43

Program Fontographer (slika 2.33), koji isporučuje firma Fontolab, Ltd. lociran na pri-padajućoj Internet adresi www.fontlab.com, predstavlja specijalizovani grafički editor iza Macintosh i za Windows. Može da se koristi za pravljenje PostScript, TrueType ilibitmapiranih fontova za Macintosh, Windows, DOS, NeXT i Sun radne stanice. Dizajne-ri, takođe, mogu da menjaju postojeće slovne likove, umeću crteže unutar PostScripta,automatski pretvaraju skenirane slike u crteže i prave dizajn od nule.

Slika 2.33. Alat za dizajniranje i editovanje fontova – Fontographer

U osobine Fontographera ubrajaju se i crtanje slobodnom rukom za pravljenje profe-sionalnih i preciznih unutrašnjih i spoljnjih okvira crteža kaligrafskih i skript znakova,korišćenjem miša ill alternativnih ulaznih metoda (olovke osetljive na pritisak, digitalizujućitableti i table za crtanje). Fontographer dozvoljava stvaranje višestrukih dizajna fontovaod dva postojeća lika fonta, a može da pravi lakše ili teže fontove izmenom čitavog likafonta. Fontographer za Windows otvara svaki PostScript Type 1 i TrueType font za PC

i omoguć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 likovifontova. 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 tim

44 Multimedija

koja se informacija gleda i kada se gleda. Interaktivna multimedija postaje hipermedija

kada 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(WWW) 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 Buloveizraze kao što su AND, OR, NOT i BOTH) da bi se otkrio položaj povezanih reči. Treba na-pomenuti da 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.944 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) ikada su obe reči pomenute na istoj strani – ovog puta se dobija 327 pogodaka. Boats, wa-ter i storms (oluje) daju 42 pogodaka, a boats, water, storms i San Francisco daju jedanjedini pogodak. Sa više od 1.000 pogodaka, korisnik je izgubljen. Sa jednim pogotkom,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 koju daje računar za ogromne količine podataka jevelika, ali mora biti kanalisana na svrsishodne načine. Veze između reči i grupa informacijamoraju biti dizajnirane da imaju smisla. Mora se zauzeti stav o vezama i načinu na koji jeinformacioni sadržaj organizovan i raspoloživ za korisnike. Filtere, kroz koje se ogromnekoličine podataka propuštaju, moraju "prizemljiti" i oblikovati oni koji dizajniraju sistem.

Tekst 45

Multimedijalni dizajner upravlja mehanizmima za filtriranje u mulumedijalnom projektu.Na primer, proizvođač koji predstavlja svoje proizvode kroz interaktivnu multimedijumože predati mnoštvo informacija i prodajne "elemente" u ruke korisnika, uključujućipozadinske informacije, odgovarajući marketinški materijal, cenovne statistike i tehničkepodatke. Dizajn projekta će, naravno, biti pristrasan – prodati što više proizvođačevihproizvoda i generisati više profita; ta pristrasnost se podrazumeva i razume u ovakvimokolnostima. Kada se pretpostavke u bilo kojoj informaciji pokažu kao pogrešne, kadase fiktivni ili nekompletni podaci prikazuju kao činjenice, prednosti i snaga multimedije ihipermedije mogu 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 ielektronski 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% od veličine originalnog dokumenta. Indeksi su od suštinske važnostiza brzo pretraživanje. Mašina za pretraživanje Google pravi 247.000.000 pogodaka (slika2.34) za 0, 15 sekundi!

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

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.

46 Multimedija

• 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 raz-liku 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 ba-zen, a kada dosegnu bubne opne korisnika, korisnik će osetiti promene pritiska ili vi-bracije, kao zvuk. U vazduhu, talasi se prostiru brzinom od 1.225km

hili 1Maha na nivou

mora. Zvučni talasi se menjaju zavisno od pritiska zvuka (amplituda) i frekvencije – visinezvuka. Mnoštvo zvučnih talasa spojenih u jedno čini "zvučnu oblast" simfonijske muzike,govora ili, 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 na rasponod 6kHz. U terminima jačine ono što korisnik čuje subjektivno nije i ono što čuje objek-tivno. Percepcija glasnosti (jačine) zavisi od frekvencije – na nižim frekvencijama zahtevase više snage kako bi se isporučila ista primljena zvučnost, kao i za zvuk u srednjim ili uvišim frekventnim rasponima. Zvuk se može više osetiti, nego čuti. Na primer, kada je am-bijentalni nivo buke viši od 90dB na radnom mestu, ljudi obično prave veći broj grešaka

48 Multimedija

u obavljanju osetljivih zadataka – naročito ako je u buci prisutna neka visoka frekven-cija. Kada je nivo buke iznad 80dB, potpuno je nemoguće koristiti telefon. Eksperimentiu naseljenim 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 operativnim sis-temom Windows i na Macintosh-u, jer su bipovi i zvuci upozorenja raspoloživi čim seinstalira operativni sistem. Treba otvoriti Sounds Control Panel kako bi se preslušali ovizvuci 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 direk-torijumu Windows > Media. Na raspolaganju su mnogobrojni sistemski zvuci, a korisnik

Zvuk 49

može da dodeli ove zvuke sistemskim događajima, kao što su startovanje operativnogsistema Windows, upozorenja iz drugih aplikacija ili klik van otvorenog dijaloga (štoprouzrokuje podrazumevani bip u Windowsu). Treba napomenuti da mogu da se pravei šeme zvukova i da se odabere posebna šema, prema raspoloženju. Korisnik može dadoda svoje zvučne datoteke i da ih instalira da se aktiviraju prilikom nekog sistemskogdogađaja – treba postaviti WAV datoteke u direktorijum Windows > Media i odabrati ihunutar Sound Control Panel.

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 odabrati ih unutar Sound Preference Panel.

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 frekven-cija, merena u kilohercima – kHz ili hiljadama uzoraka u sekundi) i sa koliko se brojevaprezentuje vrednost svakog uzorka (veličina uzorka, bitdepth, rezolucija ili dinamičkiopseg). Što se češće uzima uzorak i što se više podataka zapamti o uzorku, biće finijarezolucija i veći kvalitet uhvaćenog zvuka prilikom reprodukcije. Pošto je kvalitet zvuka

50 Multimedija

baziran na kvalitetu uređaja za snimanje, a ne od kvaliteta uređaja za reprodukciju, zadigitalni audio se kaže je nezavisan od uređaja.

Tri frekvencije uzorkovanja se najčešće koriste u multimediji i to su sledeće frekvencije CD

kvaliteta – 44, 1kHz, 22, 05kHz i 11, 025kHz. Veličine uzoraka su 8 ili 16 bitova. Trebanapomenuti da što je veća veličina uzorka, prikupljeni podaci će bolje da opišu snim-ljeni zvuk. Osmobitni uzorak daje 256 jednakih jedinica za opis dinamičkog raspona iliamplitude – nivo zvuka u tom trenutku – od dela "uhvaćenog" zvuka. Sa druge strane,16-bitna veličina uzorka daje 65.536 jednakih jedinica za opis dinamičkog raspona. De-lovi 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 kvalitetnu

rekonstrukciju ako je frekvencija uzorkovanja mnogo mala

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

Slika 3.3. Kvantizovanje i odsecanje talasa

Zvuk 51

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, 1kHz ili 22, 05kHz) 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, 05kHz u osmobitnoj rezoluciji glasi:

22050× 10×8

8× 1 = 220.500 bajtova

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

44100× 10×16

8× 2 = 1.764.000 bajtova

52 Multimedija

Tabela 3.2. Snimanje digitalnog audia u trajanju od jednog minuta

na uobičajenim frekvencijama i rezolucijama

Formula za mono snimak od 40 sekundi na 11kHz 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, 1kHz

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 imalog broja sekundi može da napravi ogromne razlike u veličini datoteka. Odsecanje se,

Zvuk 53

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. Najboljeje 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 normalizacjefinalni snimak će se reprodukovati ili isuviše jako ili isuviše slabo. Trebalo bi napomenutida ni profesionalci ne mogu da izostave ovaj važan korak. Na slici 3.5 prikazan je procesnormalizovanja 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 frekvenci-jama, 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ćina

54 Multimedija

algoritama za širenje može ozbiljno da degradira audio kvalitet datoteke ako se dužinapromeni za više od nekoliko procenata u svakom pravcu.

Slika 3.5. Normalizovanje nivoa zvuka u audio datoteci

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! Kadase obradi i izmiksuje, snimak ne može dalje da se menja; uvek treba snimiti original daopet može da se menja ako korisnik nije zadovoljan.

Invertovanje zvuka. Još jedna jednostavna manipulacija je da se invertuje sve ili deo digi-talnog audio snimka. Zvuci, naročito izgovoreni dijalozi, mogu napraviti nadrealne efektekada 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 Inter-

face) je najbrži, najlakši i najfleksibilniji alat za to. Ipak, pravljenje originalne MIDI parti-ture je 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 PC

računara, ali isto tako i dodatna kartica). MIDI tastatura je, takođe, izuzetno korisna,jer pojednostavljuje komponovanje, mada nije neophodna za reprodukciju i funkcioniše iako ne postoji ugrađen sopstveni sistem za sekvenciranje.

Zvuk 55

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.

Slika 3.6. Softver za sekvenciranje

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 multimedi-jalne projekte, pa ga treba koristiti za dobijanje na fleksibilnosti i kreativnoj kontroli. Kadaje muzika kompletirana i odgovara projektu, trebalo bi je zaključati radi distribucije pret-varanjem u digitalne audio podatke.

Mnoge aplikacije za sekvenciranje omogućavaju štampanje MIDI nota na papiru. ProgramAudioScore nije samo program za sekvenciranje – može da se koristi i u suprotnom smeru,što znači da će korišćenjem skenera prepoznati notaciju i pretvoriće note u MIDI datotekeu 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

56 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 manjeod desetak godina. Uprkos tome, uspio je iz temelja da izmeni sve aspekte muzičke kul-ture. Popularnost MP3 datoteka je neosporna. Ovaj format je brzo osvojio Internet zajed-nicu zbog 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 57

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 operativnogsistema Macintosh-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 podataka nadisku. Za skladištenje jednog muzičkog CD-a na hard disku u WAV formatu bi bilo potrebnooko 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čnjakaza pokretne 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). Logika jejasna – veći stepen sabijanja daje manju MP3 datoteku, ali i lošiji kvalitet zvuka, dok manjistepen sabijanja stvara veću datoteku, ali i vernije odgovara originalnom zvučnom zapisuiz kojeg je stvoren. Merilo kvaliteta MP3 zapisa je bit rate, dakle količina bitova kojom jepredstavljena jedna sekunda zvučnog zapisa. Veći bit rate znači da se koristi manji stepensabijanja i obrnuto.

58 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 komp-rimovani format muzičkih datoteka WMA (što je skraćenica za Windows Media Audio).Taj format primarno namenjen za upotrebu na programu Windows Media Player. Svesu češći i prenosni MP3/WMA playeri, a ovaj format zapisa muzike prihvatili su i divovimuzičke industrije 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 20kHz. 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 frekvencijese približno nalaze u pojasu od 20Hz do 400Hz, srednje frekvencije od 400Hz do8.000Hz, a visoke frekvencije od 8.000Hz do 20.000Hz. Prag čujnosti ljudskog uva jevrednost najmanje promene zvučnog pritiska koje uvo može da detektuje, i iznosi oko20 mikropaskala. Ta vrednost je prosečna vrednost i različite osobe mogu bolje ili slabiječuti od te prosečne vrednosti. Prag čujnosti na frekvenciji 1kHz uzeta je kao referentnavrednost i označena je 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 59

Kako je ljudsko uvo lako prevariti, može se iskoristiti mogućnost da, ako se pored sig-nala jedne frekvencije nalazi signal druge, bliske frekvencije sa manjim intenzitetom, ondaće glasniji 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 de-lova. Ako se u nekom frekvencijskom pojasu uoči ovaj efekat maskiranja, onda se taj pojasneće ubaciti 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-ove iMP3 datoteke.

MIDI podaci su za digitalni audio isto što je vektorska grafika za bitmapiranu grafiku. MIDIzavisi od uređaja, a digitalni podaci ne zavise. Kao što se izgled vektorske grafike ra-zlikuje 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 MIDI

datoteke male, ne zauzimaju previše RAM-a, prostora na disku i resursa centralnogprocesora.

60 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 sve donivoa pojedinačne note. Korisnik je u stanju da manipuliše i najmanjim delom MIDI

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 MIDI

najmanje 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, zajedni-čki format datoteke za zvuk (.au) bio je međunarodni telefonski format (CCITT G711). Toje omogućavalo 8kHz frekvencija za uzorke za osmobitni mono, ali je davalo veoma malevelič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 61

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

Slika 3.8. Program Adobe Flash Professional može da se upotrebi za integraciju

audio datoteka i njihovo isporučivanje na Web

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.

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 pro-jekat. 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).

62 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žajadatoteke. 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 mogu po-merati ill kretati tako da ekran nikad ne izgleda mirno i izaziva oči. Računarski ekran jeakcija – sadrži mnogo više od poruke i predstavlja vezu gledaoca sa sadržajima 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 de-talje. Vektorski objekti se koriste za linije, okvire, krugove, poligone i druge matematičkeoblike koji mogu matematički biti izraženi u uglovima, koordinatama i rastojanjima ilidužinama. Iscrtani objekat može biti ispunjen bojom i mustrom (pattern) i može da semarkira (izabere) kao jedinstven objekat. Izgled obe vrste slika zavisi od rezolucije prikazai moguć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 korisniksâm dizajnira multimediju, trebalo bi da se postavi u ulogu crtača ili prelamača. Trebalo

64 Multimedija

bi 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 koja možeda ima vrednosti on ili off, može bude crna ili bela boja ili true (1) ili false (2). Referenciranje kao binarni sistem, jer samo dva stanja (on ili off) su na raspolaganju. Mapa predstavljadvodimenzionalnu matricu bitova. To znači da bitmapa predstavlja jednostavnu matricumalih tačaka koje formiraju sliku, koja se ili prikazuje na monitoru ili se š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

piksela koji 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

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 fotografiju

Slike 65

ili 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;

• može da "uhvati" bitmapu sa fotografije, crteža ili televizijske slike korišćenjemskenera ili uređaja za "hvatanje videa" koji digitalizuje sliku i koja je, nakon toga,na raspolaganju korisniku za dalju upotrebu ili uređenje.

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ži slu-č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, omo-gućavajući korisniku da prevuče gotove objekte u scenu.

66 Multimedija

Slika 4.3. Sadržaj dva diska sa slikama

Na slici 4.3 prikazane su stranice slika iz komercijalnog resursa zvanog PhotoDisc. Sva-ki 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že dis-tribuirati bez dodatnog plaćanja, tako da treba pročitati kompletan ugovor. Međutim, tecene 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 pro-grama za editovanje slika. Ako je slika u visokoj rezoluciji (usmerena za štampanje na 300

ili 600dpi, 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,

Slike 67

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

Slika 4.5. Program Director za editovanje slika

68 Multimedija

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"

Alatke za umetnike i umetničko slikanje pruža program Corel Painter X (slika 4.6) koji imau sebi na stotine vrsta četkica, sprejeva, mastila, vodenih boja i tekstura i koji omogućavada 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 ili Adobe Illustrator, i tako kreirana vektorska rešenja pretvarajuu 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.

Slike 69

• Radna okruženja i na Macintosh-u i pod operativnim sistemom Windows imajuClipboard – oblast u memoriji gde se podaci, kao što su tekst i slike, privremenočuvaju kada se vrši isecanje (Cut) ili kopiranje (Copy) u nekoj aplikaciji. Unutaroperativnog sistema Windows, kada se pritisne taster Print Screen ili PrtScr,primerak slike ekrana ide u klipbord. Iz klipborda korisnik može da prenese bitmapuu aplikaciju (kao što je Paint, koja dolazi uz Windows).

• Na Macintosh-u kombinacija tastera Command-Shift-3 pravi čitljivu datoteku podnazivom Picture, u formatu PNG i smešta je u osnovni direktorijum aktivnog diska.Nakon toga, kreirana datoteka može da se importuje u multimedijalni sistem iliprogram 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 Windows

idu 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 slika omo-guć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 (slika 4.7). Morfiranje omogućava glatko stapanje dve slike, tako daizgleda kao da se jedna slika utapa u sledeću, što često daje zabavne rezultate.

Slika 4.7. Dva primera morfiranja

4.1.5. Skeniranje slika

Svakodnevni objekti mogu da se skeniraju i unutar programa za editovanje slika možeda se 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.

70 Multimedija

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 obliku (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). Sadruge strane, opis istog kvadrata kao nekomprimovane bitmapirane slike, u crno-belojtehnici (što zahteva najmanje memorije na jednobitnoj dubini boje po pikselu), zauzeo

Slike 71

bi 5.000 bajtova (200× 200/8). Nepovoljnija varijanta je kada je slika napravljena u 256

boja (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 300dpi

na š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žni-cama i drugim ravanskim geometrijskim elementima. Postoji specijalizovani softver zaprikazivanje 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 poboljšavao, tako su i očekivanja korisnika rasla. Ravni i bezbojni 2Dekrani više nisu dovoljni za uspešan komercijalni muliimedijalni projekat. Grafika i anima-cija u 3D su postale opšte mesto, dajući "životnost" projektima. Na svu sreću dosta sepromenilo – u oblasti gde su ranije radile samo moćne radne stanice, u današnje vremejeftini PC računari i odličan softver su učinili 3D modelovanje pristupačnim većini multi-medijalnih dizajnera.

Danas su mnogi proizvodi – uključujući u tu celu priču i programe Carrera, form*Z iCinema 4D (slika 4.8) – označeni kao sredstva od suštinske važnosti za ilustraciju, ani-maciju i multimedijalnu produkciju.

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

72 Multimedija

Slika 4.8. 3D aplikacije daju poglede koji mogu da se 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.9. Ž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 3D

aplikacije.

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 napravi

Slike 73

bilo 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.10). 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.10, 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.10. 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.11. Različiti prikazi površine definisanog objekta

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 pret-hodnog pregleda (Preview). Ostala, kompleksnija senčenja (Gouroud shading, Phong

shading i Ray tracing) traju duže, ali daju fotorealistične slike. Prikazivanje površina (slika4.11) 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.

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-

74 Multimedija

goritme da primeni efekte koji su zadati za objekte koji su napravljeni. Na slici 4.12predstavljeni su pozadina, objekat i prikazana kompozicija.

Slika 4.12. Definisani objekat ukomponovan u odgovarajuću pozadinu

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 putemfotografija bitni činioci, takođe se zna da je primena boja krucijalni deo procesa prodaje,jer je to bitan deo prilikom odlučivanja potencijalnog kupca o kupovini. Ako se bojeefikasno primenjuju u proizvodnji i marketingu, onda je sigurno da će potencijalni kupciobratiti pažnju na takav proizvod. U ovom delu ć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škimosobinama boja. Boja predstavlja rezultat interakcije između svetlosti, objekta i posma-trača. Reč je o modifikovanju svetlosti na objektu, gde modifikovana svetlost dolazi do

Slike 75

posmatrača i isporučuje mu odgovarajuću informaciju u vidu jasnih boja. Očigledno je dačovek mora, najpre, da razmotri neke stvari u vezi sa svetlošću da bi došao do odgovara-jućih informacija o bojama.

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

Slika 4.13. Grafički prikaz talasne dužine

Region elektromagnetskog spektra koji je vidljiv za ljudsko oko je u opsegu od 400nm

do 700nm (slika 4.14). 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 od straneljudi. Na primer, mogu da se iskoriste talasi sa kratkom talasnom dužinom (X zraci) kojise koriste za rendgenske snimke, kao i talasi sa dugačkom talasnom dužinom, koji moguda 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).

Slika 4.14. Vidljivi opseg elektromagnetskog spektra

Kada se pusti zrak bele svetlosti kroz staklenu prizmu (slika 4.15), 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.15 prikazani su ovi dominantni opsezi savrednostima talasnih dužina pomenutih opsega.

76 Multimedija

Slika 4.15. Vidljivi opseg elektromagnetskog spektra i dugine boje

Kada čulo vida ili vizuelni sistem detektuje talasnu dužinu vrednosti oko 700nm, ondataj sistem vidi "crveno"; kada vizuelni sistem detektuje talasnu dužinu vrednosti koja sekreće oko 450 ÷ 500nm, onda taj sistem vidi "plavo"; kada vizuelni sistem detektujetalasnu dužinu vrednosti oko 400nm, onda taj sistem vidi "ljubičasto" itd. Uprošćenoposmatrano, moglo bi se reći da ljudsko može da vidi sve talasne dužine odjednom (vidibelu svetlost), ili može da vidi samo jednu talasnu dužinu. Međutim, svet boja je mnogokompleksniji sistem od gore pomenutog, jer boja nije deo svetlosti, nego je boja svetlost.

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 (Red), G je početno slovo od zeleneboje (Green) i B je početno slovo plave boje (Blue). Crvena, zelena i plava boja su os-novne (primarne) boje (osnovne boje se dodaju i mešaju kako bi se dobila željena boja inijansa). Osnovne boje se prikazuju u 3D Dekartovom koordinatnom sistemu (slika 4.16).

Slika 4.16. RGB model boja u obliku kocke

Slike 77

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 siva

skala. U tabeli 4.2 su prikazane RGB vrednosti za uobičajeni video test signal sa 100%

amplitudom 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 BK

R 0 ÷ 255 255 255 0 0 255 255 0 0

G 0 ÷ 255 255 255 255 255 0 0 0 0

B 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 dizajn raču-nara. Sistem koji je dizajniran da koristi RGB model boja je u prednosti u odnosu na drugesisteme 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 RGBkomponente moraju da imaju istu širinu opsega kako bi generisale boju unutar RGB modelakocke. Rezultat ovoga je pojava bafera kodova koji ima istu pikselsku dubinu i istu rezolu-ciju za svaku RGB komponentu. Bafer kodova predstavlja deo memorije displeja računarakoji je predviđen za čuvanje sadržine jedne slike na ekranu. Kada je video adapter u tek-stualnom režimu, ovi podaci su u obliku ASCII znakova, a kada je u grafičkom režimu,podaci definišu svaki piksel. Takođe, obrada slika u RGB prostoru boja nije baš najboljereš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) dobija sežuta (Y) boja, mešanjem crvene (R) i tamnoplave (B) boje dobija se ljubičasta (M) boja imešanjem tamnoplave (B) i zelene (G) boje dobija se svetloplava (C) boja. Ako je odbijenasvetlost "siromašna" primesama crvene, zelene i plave boje, onda to ljudsko oko shvatakao belu (W) boju. Ako svetlost nije prisutna, onda ljudsko oko to shvata kao crnu (BK)boju. Ove kombinacije su prikazane na slici 4.17, gde se vidi međusobni uticaj boja.

Slika 4.17. RGB – osnovne aditivne boje

78 Multimedija

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, plave iljubičaste boje. Vrednost S definiše koliko se bele svetlosti sadrži u boji i ta vrednost sekoristi za razlikovanje svetle boje od tamne. Ovi modeli su razvijeni u doba kada su seboje pravile "ručno", ali korisnici su navikli da ih koriste i u današnje vreme. HSL (nijan-sa, osvetljenost i zasićenost) je model boja sličan HSV modelu boja (samo što se koristiosvetljenost umesto intenziteta).

Razlika između HSI i HSV modela boja je u načinu izračunavanja komponente osvetljenostiili 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 boja HSV

omogućava manipulaciju nijansama i zasićenošću (dodavanjem ili regulisanjem količineboje) i na taj način se dolazi do većeg dinamičkog opsega zasićenosti.

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

Slike 79

Slika 4.18 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.

Sa tačke gledišta umetnika, boje sa koordinatama V = 1 i S = 1 su boje slabog inten-ziteta. Dodavanje bele boje se odvija smanjivanjem vrednosti S (bez promene vrednostiV), a dodavanje crne boje se vrši povećanjem vrednosti V (bez menjanja vrednosti S). Naslici 4.19 prikazan je pojednostavljen HSL model boja. Kao što je već rečeno, HSL je modelboja koji je sličan HSV modelu boja.

Slika 4.19. HSL model boja

Sledi tabela 4.3 koja prikazuje parametre HSV modela boja, i to za već pominjane odnoseu gornjim tabelama – 100% zasićenost boja i 75% amplituda signala.

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


H 0◦÷ 360

◦ - 60◦

180◦

120◦

300◦

0◦

240◦ -

S 0÷ 1 0 1 1 1 1 1 1 0

V 0÷ 1 0, 75 0, 75 0, 75 0, 75 0, 75 0, 75 0, 75 0

Slika 4.18 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.

80 Multimedija

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


H 0◦÷ 360

◦ - 60◦

180◦

120◦

300◦

0◦

240◦ -

S 0÷ 1 0 1 1 1 1 1 1 0

V 0÷ 1 0, 75 0, 375 0, 375 0, 375 0, 375 0, 375 0, 375 0

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 svetlost ap-sorbuje crvenu boju i reflektuje svetloplavu (cijan). Slično tome, ljubičasta boja apsorbujezelenu 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 (komponenta)gde je nemoguće dodati bilo koju boju. U subtraktivnom modelu je reč o beloj boji. Toznači da se željena boja dobija na taj način što se od bele boje oduzima neka boja, i zbogtoga je ovaj model boja idealan za štampu na belom papiru. Ovakav model 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. Najsvetlijeboje sastoje se od malog procenta mastila (boja), dok tamnije sadrže veće procente. Naprimer, svetlocrvena boja može da sadrži 2% svetloplave boje (C), 93% ljubičaste boje(M), 90% žute boje (Y) i 0% crne boje (K). Na slikama koje su urađene u modelu bojaCMYK, bela boja se dobija kada sve komponente imaju vrednost 0%.

Slika 4.20. 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 boja

Slike 81

dodeljen broj. PANTONE može da se smatra međunarodnim sistemom boja koji se sastojiod 14 osnovnih boja, za dobijanje preko hiljadu različitih nijansi izvedenih boja po re-cepturi PANTONE uzoraka boja. Na slici 4.21 prikazani su kolorni gamuti boja za običanmonitor, u poređenju modela boja CMYK i PANTONE, i sa vidljivim spektrom boja.

Slika 4.21. Kolorni gamut monitora, modeli boja i vidljivi spektar boja

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. Dabi ovo uopšte moglo da se odradi, štampač mora da radi sa suptraktivnim osnovnimbojama – cijan, magentom i žutom.

Na slici 4.22 prikazane su kombinacije boja u modelima boja CMY i CMYK. Treba napome-nuti da žuta (Y) boja apsorbuje tamnoplavu (B) boju, magenta (M) boja apsorbuje zelenu(G) boju i cijan (C) boja apsorbuje crvenu (R) boju. Na slici 4.22 se vidi da pomenute bojestoje jedna nasuprot drugoj unutar dijagrama.

Slika 4.22. CMY i CMYK – osnovne boje za "oduzimanje"

82 Multimedija

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

⎣C

M

Y

⎤⎦ =

⎡⎣

1

1

1

⎤⎦−

⎡⎣

R

G

B

⎤⎦ .

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, a ondase CMY model boja konvertuje u RGB model boja. Treba napomenuti da se ovde baratavektorima, što znači da se vrednosti svih komponenti svih modela boja nalaze u opseguod 0 do 1. Da se ne bi stvorila zabuna, moraju da se uvedu sledeće oznake:

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

• komponente CMYK modela biće označene indeksom 2, tj. CMYK model će se označa-vati 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. Toznači da se najpre RGB model boja konvertuje u CMY model boja, a onda se CMY modelboja konvertuje u CMYK model boja. Treba još jednom napomenuti da se ovde baratavektorima, što znači da se vrednosti svih komponenti svih modela boja nalaze u opseguod 0 do 1. Konvertovanje RGB modela u CMY model boja obavlja se pomoću izraza:

C1 = 1−R

255

M1 = 1−G

255

Y1 = 1−B

255

Slike 83

Sada sledi konvertovanje CMY modela u CMYK model boja, a to se obavlja pomoću sledećihizraza:

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)minpredstavlja 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.

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 (oko16 miliona boja) dubine boja. Naravno, poneki put se dubina boja opisuje kao aktuelnibroj boja 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 što postoji 8 bitova i 2 mogućnosti kao odgovor (ON i OFF ili 0 i 1). Sistemisa 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.

84 Multimedija

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.23). U izlaznoj boji primarne boje se po-javljuju u obrnutom redosledu, tj. najpre se pojavljuje primarna boja koja je poslednjadodata, i tako redom unazad.

Slika 4.23. 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. Naovaj način se dolazi do principa kumulativne zapremine. Ako se saberu dve boje, izlaznaboja ima zapreminu koja je zbir zapremina ulaznih primarnih boja. Prvi slučaj je sabiranjedve jedinične zapremine (količine) iste boje (slika 4.24).

Slika 4.24. 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 ·A

Drugi 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.25).

Slika 4.25. Zbir dve različite boje

Slike 85

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 · C

Na slici 4.26 ilustrovana su pojedinačna sabiranja primarnih boja CMY modela boja. Sabi-ranjem cijan i magente dobija se tamno (indigo) plava boja, sabiranjem cijan i žute bojedobija se zelena izlazna boja i sabiranjem magente i žute dobija se crvena izlazna boja.

Slika 4.26. Sabiranje primarnih boja

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

1 · C+ 1 ·M = 2 · B

1 · C+ 1 · Y = 2 ·G

1 ·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.27).

Slika 4.27. 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 · BK

Na slici 4.28 prikazane su kombinacije koje proizvode crnu boju.

Slika 4.28. Dobijanje crne boje kao izlazne boje

86 Multimedija

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 · BK

1 ·M+ 2 ·G = 3 · BK

1 · Y + 2 · B = 3 · BK

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

Slika 4.29. Sabiranje istih količina sekundarnih boja

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

2 · R = 3 · BK− 1 · C

2 ·G = 3 · BK− 1 ·M

2 · B = 3 · BK− 1 · Y

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.30.

Slika 4.30. 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. Akosve tri komponente imaju vrednost 255, onda se kao izlaz dobija bela boja. Na ovaj načinse dolazi do odgovarajuće nijanse sive boje na prostornoj dijagonali unutar 3D modelaboja u obliku kocke.

Slike 87

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 for-matu bit mape (koristi se po jedan bit za svaki piksel). Uopšteno gledajući, bilo kakvarasterska prezentacija slike naziva se rasterska datoteka. Mnogi grafički formati su razvi-jeni, a razvijaju se i dan danas, kako bi se organizovale informacije za adekvatan prikazslike. Rasterske datoteke u "punoj" boji su velike datoteke, tako da su razvijeni nekigrafički formati koji omogućavaju primenu odgovarajuće kompresije podataka kako bi sesmanjila veličina datoteke, jer je manju datoteku lakše čuvati i može lakše da se "trans-portuje". Kao dodatak ovome, broj boja prikazanih na kolornoj slici mora da se smanjujekada se takva slika prikazuje na sistemu sa ograničenim mogućnostima za prikazivanjeboja, ili kada je slika sačuvana u formatu koji ne podržava 24 bita po pikselu. U ovomdelu će se obratiti pažnja na upoznavanje sa najčešće korišćenim grafičkim formatima, kaoi sa metodama za redukciju veličine i slika i broja boja koje treba prikazati.

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. Ostalimodeli 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 pozadine.

Neki algoritmi za komprimovanje slika koriste operacije sa pokretnim zarezom, čija pri-mena može da dovede do odgovarajućih greški. Kao dodatak ovome, neke metode koristeaproksimacije koje dovode do modifikovanja boja unutar slike. Kao rezultat, pojavljuje sedekodirana slika iz komprimovane datoteke sa vrednostima boja koje ne odgovaraju origi-nalnoj slici. Na primer, RGB boja definisana vrednostima (247, 109, 175) unutar originalneslike, može da postane boja sa vrednostima (243, 111, 177) posle dekodiranja kompri-movane datoteke. Ovakva promena boja može da se toleriše, jer ljudsko oko nije tolikoosetljivo 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 normalno

88 Multimedija

da 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 siste-ma, postoji program koji će izvršiti dekompresiju. Komprimovanje i dekomprimovanje suprocesi koji traju, tako da korisnik mora da vodi i o tome računa kada se odlučuje za kom-primovanje 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.

Algoritmi za komprimovanje sa gubicima su daleko "moćnije" alatke, jer su komprimova-ne datoteke 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 vrednosti 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 da se15 bajtova prvobitne datoteke komprimovalo na 8 bajtova.

Slike 89

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} ,

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":

90 Multimedija

• 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.

JPEG format

Skraćenica JPEG potiče od engleskog naziva Joint Photographics Experts Group, štoznači da je reč o formatu koji je formirala zajednička grupa fotografskih stručnjaka. Akose realno 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šestrukog uređenja (editovanja) slike. Posle određenog broja ure-đenja jedne iste slike, slika više neće izgledati kako treba, tj. biće mnogo lošija od originala(slika 4.31).

Slika 4.31. JPEG – pre i posle višestrukog komprimovanja

Slike 91

Zbog ovog problema ne bi trebalo uređivati (editovati) JPEG slike. Preporučuje se uređiva-nje slike u "sirovom" (nekomprimovanom) obliku ili slike koja se komprimuje bez gubitakaprimenom odgovarajuće metode. To znači da korisnik može da se "igra" sa nekomprimo-vanim originalom koliko hoće, a JPEG sliku pravi posle svih izmena kada hoće da napravimalu 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, koris-nik može da izabere "dubinu boje". Ovaj format podržava sve dubine boja i RLE algoritamza komprimovanje za slike sa 4 ili 8 bita po pikselu.

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 su uvekkomprimovani i koriste RLE algoritam za kompresiju.

TIFF format

Skraćenica TIFF potiče od engleskog naziva Tag Image File Format. Ovaj format je ra-zvio 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. Trebalobi pomenuti da ovaj format podržava i različite metode komprimovanja grafičkih po-dataka. Uobičajeno je da se slike u TIFF formatu koriste u stonom izdavaštvu, prilikomprikazivanja medicinskih slika, u grafičkim korisničkim interfejsima, prilikom prikazivanjasatelitskih snimaka, kao i prilikom transmisije putem faksa.

GIF format

Skraćenica GIF potiče od engleskog naziva Graphics Interchange Format. Ovaj formatje jedan od starijih formata, mada se i dan danas koristi za prikazivanje jednostavnih slikana Webu. 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 Webu. Ovaj formatima još neke osobine koje su razlog njegovog opstanka na tržištu, a to su transparentnost(providnost) i mogućnost animacije.

92 Multimedija

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 određenih programa 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.

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 Webu.

Kada se uporede PNG i GIF formati ima mnogo preplitanja, ali PNG format ima tri prednostiu odnosu na GIF. Te prednosti su alfa kanali (reč je o mogućnosti podešavanja nivoatransparentnosti), gama korekcija (to je mogućnost da se kontroliše koliko je slika svetlaili tamna) i 2D preplitanje (reč je o primenjenoj metodi za progresivno prikazivanje). Kadaje reč o komprimovanju podataka, PNG format ima bolju kompresiju od GIF formata, aliukupna razlika je između 5% i 25%. Format PNG nema podršku za animaciju.

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đivanje)video materijala. Ovaj format podržava sve dubine boja, a što se komprimovanja tiče, TGAformat podržava i RLE algoritam za komprimovanje za "veće" slike.

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

Slike 93

Na slici 4.32 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.

• 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 Macintosh-u 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 na Macintosh-u,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 kojimaradi. Kako je već rečeno, postoji još mnogo grafičkih formata i čovek ne može sve daih pomene. U ovom delu će se izvršiti nabrajanje još nekih formata sa osnovnim obja-šnjenjima. To su sledeći grafički formati koje korisnik može da sretne u radu sa odgo-varajuć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.

94 Multimedija

• 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.

• 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 formatsadrž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.33. 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 ima 5 crteža u nizu

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

96 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 jesakupljalo svetlost i projektovalo je kroz otvor na kome se nalazila slika. Sočiva su prikazi-vala uvećanu sliku na platnu. U početku su glavni izvori svetlosti bile sveće ili uljnelampe. 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 97

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 irukom crtanu animaciju. Pomoću ovih tehnika pravio je crteže na tabli koji su izgledalikao da se kreću i menjaju oblike. Njegov animirani film Humorous phases of funny faces

često se navodi kao prvi animirani film, a njega smatraju prvim pravim animatorom.

Slika 5.4. Tradicionalna animacija – animatori crtaju ključne frejmove, a asistenti

crtaju frejmove 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.

98 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, gde suprikazivani po restoranima, kafeterijama i pozorištima. Početkom dvadesetog veka, teh-nika celuloida i papira već je dominirala animiranom produkcijom u Americi. Ovakav vidanimacije bio je pogodan za izradu animiranih filmova u stilu montažne trake gde je radiočitav niz ljudi koji su obavljali određene i jednostavne zadatke. U Evropi, takav stil radanije bio popularan, pa je bila zastupljenija animacija glinom i druge forme animacije kojesu 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 svaki okvirzamenjuje sledećim omogućava da izgleda kao da se slike glatko spajaju u pokret. Film seobično snima brzinom od 24 okvira u sekundi, ali upotrebom projekcionih trikova (blendau projektoru šalje svetio dva puta kroz svaku sliku) treptanje se "penje" na 48 putau 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 naterao da"putuje" preko ekrana dok menja oblik, treba mu samo promeniti oblik i translirati ga zanekoliko piksela u svakom okviru. Zatim, kada se ubrzano reprodukuju frejamovi, promenese 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 99

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 animiranipredmet se može deformisati, napravljen je obično od gline, oko žičanog skeleta. Kao udrugim oblicima animacije, objekat se formira, postavlja se na scenu, fotografiše se, zatimse ruč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čunar-skim hardverom.

Prvi kompjuterski displej je imao MIT Whirlwind I računar, koji je generisao jednostavneslike. Kasnije su usledile verzije TX-0 i TX-2, što je povećalo interesovanje za računarskugrafiku kasnih pedesetih godina dvadesetog veka. Nastanak Sketchpad-a, koji je konstrui-sao Ivan Sutherland, predstavlja prve korake interaktivne računarske grafike i grafičkogkorisničkog interfejsa.

Slika 5.6. Sketchpad koji je konstruisao Ivan Sutherland

100 Multimedija

Sredinom šezdesetih godina, veliki računarski grafički projekti su započeti na MIT-u, Gene-

ral Motors-u, Bell Labs-u. MIT je razvio napredni kompajlerski jezik za grafičko programi-ranje. Apple je 1968. godine izmislio ray tracing – sistem renderovanja putem praćenjasvetlosnog zraka.

Tokom sedamdesetih godina, personalni računari su postali jači, sposobni da iscrtavajukako osnovne, tako i složene oblike. Umetnici i grafički dizajneri su počeli da koriste perso-nalne računare, posebno Commodore Amiga i Macintosh, kao ozbiljne dizajnerske alate,š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 grafikapostaje popularna 1990-ih u video igricama, multimediji i animaciji. Razvijaju se moćnemašine sa hardverom koji je bio u stanju da u realnom vremenu iscrtava kompleksne oblikekoristeći razne tehnike i napredne algoritme, koji su omogućili fotorealistične efekte, što jedoprinelo da industrija računarskih igrica tokom 1990-ih doživi pravi "bum", sa tržištemvrednim stotine milijardi dolara na godišnjem nivou. Tokom 1996. godine, na svetskomtržištu se pojavio 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čunarskegrafike koje se bavi specijalnim efektima. CGI se koristi u filmovima, televezijskim pro-gramima i reklamama. Takođe, CGI može da se vidi u računarskim igrama, iako veomaograničeno, jer se grafika izvršava odmah (što je veoma zahtevno), stoga se češće videuvodne scene koje 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 publiku 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 sadabili u stanju da pruže mnogo više i na polju animacije. Iako je i ranije bilo pokušaja dase napravi animirani CGI film, Toy Story (slika 5.8) se smatra prvim animiranim filmomkoji je u potpunosti urađen računarskom 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 računarskog doba.

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

Animacija 101

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. Kaorezultat, dobija se slika sa izuzetno velikim brojem detalja, fotorealističnih karaktera, auš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 računarskoj animaciji. Svaki frejm se posebno slika, azatim se sve slike naizmenično prikazuju, jedna za drugom, brzinom od 24 sličice u sekundiili brže. Tim postupkom oko može da se zavara, da bi se stvorila iluzija pokreta.

Slika 5.9. Primeri 2D animacije

102 Multimedija

Računarska 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. prave seključ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, specijalnih efekata na filmu,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 radikao prava. Na taj način će digitalni karakteri imati istu perspektivu kao i glumac na sceni.

Animacija 103

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.

104 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 ove vrste animacije u animiranom filmu, njena uloga uindustriji 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čunarskistručnjaci videli mogućnost u računarima kako bi izradili odlične slike, koje bi bile teško,ako ne i nemoguće napraviti na drugačiji način. Tokom druge polovine dvadesetog veka,računarski generisana grafika upotrebljena je veoma uspešno u velikim holivudskim fil-movima kao što su Zvezdane Staze, Park iz doba Jure, Gospodar prstenova, Hobit itd.

CGI je upotrebljen za izradu impresivnih scena, za koje bi inače bilo potrebno mnogo novcaza izradu realističnih maketa. Jedan od većih izazova u računarskoj animaciji, predstavljaizrada fotorealističnih ljudskih karaktera. Do sada, uglavnom su pravljene animacije živ-otinja, 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 2D i3D 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 krajnje op-rezan! 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) diskovekoji ć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

106 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 inves-ticiju. 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 i ka-meru i snimanje na traku u jednom uređaju. Jedan ili dva kanala zvuka se, takođe, mogusnimiti na traku (mono ili stereo). Video signal se snima na traku obrtanjem glave zasnimanje 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 glave za analogno snimanje

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 regulisanje

Video 107

brzine. 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 1 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 jeda korisnik zna gde će njegov multimedijalni projekat da se koristi. Video kaseta snimljenau SAD 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 bise 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 komitet

108 Multimedija

za televizijske standarde (National Television Standards Commitee – NTSC). Ti standardidefinišu metod za enkodiranje informacije u elektronski signal koji na kraju stvara televi-zijsku sliku. Kao što je zacrtano u NTSC standardu, jedan frejm videa je napravljen od 525

horizontalno 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 progresivnog

prolaženja i crtaju linije celog frejma u jednom prolazu, bez preplitanja.

6.2.2. PAL i/ili SECAM

Sistem Phase Alternate Line – PAL koristi se u Velikoj Britaniji, Zapadnoj Evropi, Aus-traliji, Južnoj Africi, Kini i Severnoj Americi. PAL sistem je povećao rezoluciju ekrana na625 linija 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).

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.3. HDTV

Televizija visoke definicije (High Definition Television – HDTV) daje visoku rezolucijuu odnosu 16 : 9 (slika 6.3). Taj odnos omogućava gledanje Cinemascope i Panavision

filmova.

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

Video 109

Postoji spor između industrije emitovanja i industrije računara da li da se koristi preplitanjeili progresivno prolaženje. Industrija emitovanja promoviše format ultravisoke rezolucije1.920 × 1.080 sa preplitanjem, koji treba da postane okosnica nove generacije vrhunskihcentara za zabavu, a industrija računara hoće da se "zaustavi" na rezoluciji 1.280×720 saprogresivnim prolaženjem za HDTV. Format 1.920×1.080 daje više piksela nego 1.280×720,ali frekvencije "osvežavanja" su sasvim drugačije. Format više rezolucije sa preplitanjemdaje samo polovinu slike svakih 1/60 u sekundi, a, zbog preplitanja, vrlo detaljne slikeće treptati na 30Hz. Nasuprot tome, računarski stručnjaci kažu da je kvalitet slike na1.280× 720 superioran i postojan.

Oba formata su uključena u HDTV standard od strane Komiteta za TV sisteme nove ge-neracije (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 6 "virtualnih kanala" na jednom TV-u. Može da se pohvali ikvalitetnim zvukom koristeći Dolby Digital AC-3 format 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 kakobi omogućio radio i televizijskim stanicama da svoje emitovanje konvertuju u digi-talni format.

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 koju vidigledalac biti uvek omeđena fizičkim okvirom TV aparata. To se naziva overscan ili dodat-

no iscrtavanje linija. Računarski monitori prikazuju manju sliku, ostavljajući crni okviru fizičkom okviru. Kada se slika digitalizovanog videa razmešta na RGB ekran, postojaćegranica oko nje, a kada se računarska slika pretvara u video, spoljne ivice slike neće ispunitiTV 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 (razlažu boje na crveni, zeleni i plavi signal),

110 Multimedija

njihove boje su čistije i tačnije nego one koje se vide na ekranu televizijskog monito-ra. 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č nisukalibrisani i prilagođeni zahtevima kolornog sistema kao što je Pantone Color Systems,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 NTSC

televiziji. 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. Po-maže ako se naprave kolorne korekcije i editovanje na računaru, pa se pregleda ispravljenaslika na stvarnom TV ekranu, ne samo na RGB monitoru. Za to je potrebna kartica zakonvertovanje signala iz hardvera na matičnoj ploči koji ima NTSC izlaz; video kartice zapreklapanje 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 monitoru lini-je se crtaju širinom ("debljinom") od jednog piksela i nisu prepletene. Linije od jednogpiksela 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.

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".

Video 111

6.3.5. Tekst i naslov za televiziju

Naslovi za video produkcije mogu da se naprave analognim generatorom karaktera, ali ra-čunar to može da digitalizuje upotrebom softvera za editovanje videa i slika. Evo nekolikosugestija 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 izbegavati 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.

• 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 tvrdidisk, 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 dru-gog monitora. 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.

112 Multimedija

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); po-kretna slika (na primer, televizija); telesignalizacija (na primer, daljinsko upravljanjeprocesima); podaci (grupe znakova, slika...).

Električni signal, kao neposredni nosilac informacije, od posebnog je značaja. Trebalo binapomenuti 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 signal

koji 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.

Video 113

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 Morzeoveabecede. Takav način prenosa impulsima nejednakog trajanja i dužine neprikladan jeza brze komunikacije, te se u računarskoj tehnici prihvatio dosledniji način prenosa im-pulsa. Na primer, pritiskom na taster tastature računara (ili teleprintera) stvara se odgo-varajući niz (povorka) impulsa jednakih po obliku i dužini trajanja niza (broja mesta zaimpulse), ali različit po broju impulsa u nizu i njihovom rasporedu unutar niza za svakiznak tastature. Takav niz se sa tastature šalje računaru i sadrži poruku o pritisnutomtasteru i o pripadnom 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 delovetela kao odgovor na spoljne nadražaje. Digitalna obrada signala sadrži još jedan međuko-rak. Pošto računar koji vrši obradu signala "ne razume" analogne vrednosti, potrebno jeiste pretvoriti u njemu prihvatljiv "jezik". Kada se usvoji stav da nisu važne sve vred-nosti, već samo određen, unapred dogovoren broj nivoa analognog signala, dolazi se dokvantovanja analognog signala. Na taj način "preveden" analogni signal je "razumljiv" zaračunar. Ulogu prevodioca ima na primer, mikrofon koji pretvara energiju zvučnih talasau električne, električne signali se zatim digitalizuju pomoću konvertora i kao takvi predajurač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?

114 Multimedija

Termin DSP uopšteno označava da se koriste digitalni računari za obradu signala. Naravno,ovi signali se mogu obrađivati analognim procesima ali, iz raznih razloga, daje se prednostdigitalnoj obradi.

Da bi se shvatile relativne prednosti jedne obrade u odnosu na drugu, pogodno je dase uporede ove dve tehnike kod neke opšte poznate aplikacije. Na slici 6.6 je prikazanoanalogno snimanje 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).

• Kako se magnetna traka pomera ispod glave za snimanje, intenzitet magnetnih poljase smešta na traku.

Slika 6.6. Snimanje analognog signala

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.

Prednost analognog procesa je dvostruka – on je sasvim jednostavan i analogni signal možeda ima praktično beskonačan broj vrednosti unutar dinamičkog opsega signala. Nažalost,ovaj analogni proces je sam po sebi nestabilan. Pojačavači su izloženi varijaciji pojačanjau zavisnosti od temperature, vlažnosti i vremena. Magnetna traka se tokom vremenagužva i isteže, usled čega se signal izobličava. Magnetna polja će tokom vremena gubitijačinu. Varijacije brzine motora koji premotava traku izazivaju dodatna izobličenja. Sviovi faktori utiču na pogoršanje kvaliteta izlaznog signala u odnosu na ulazni signal. Svakiput kada signal prolazi kroz sledeći analogni proces (presnimavanje trake), ovi neželjeniefekti se umnožavaju. Retko koji analogni sistem može da napravi više od 2 ili 3 kopije.

Slika 6.7. Snimanje digitalnog signala

Video 115

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.

• 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 gde sepretvaraju 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 matricapomoću koje su se pravili plastični otisci (gramofonske ploče). Svaka etapa procesa imalaje novu generaciju snimka, a svaka novo snimanje uticalo je na signal kao filtar koji redukujefrekventni sadržaj i menja fazu signala. Kao i kod slika u Sikstinskoj kapeli, prave boje isjaj 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, digitalnibrojevi na njima mogu da se kopiraju sa savršenom tačnošću na novi medijum. Signalikoji su memorisani u digitalnom obliku su u stvari veliki nizovi brojeva. Kao takvi, oni suotporni na fizička ograničenja analognih signala.

Takođe, postoje i druge značajne prednosti digitalne obrade signala. Geofizičari su bili prvikoji su primenili tehnike obrade signala. Seizmički signali, koji su za njih interesantni, čestosu veoma niske frekvencije, od 0, 01Hz do 10Hz. Teško je napraviti analogne filtre kojirade na ovim niskim frekvencijama. Vrednosti komponenti moraju biti toliko velike da jefizički nemoguće napraviti filtar. Međutim, kada su signali pretvoreni u brojeve, sasvim jejednostavno napraviti program koji će obaviti filtriranje. Druga prednost digitalnih signalaje njihova izdašnost. Na primer, DSP može da omogući veliki propusni opseg signalima

116 Multimedija

koji treba da se šalju preko uskopojasnih kanala. Signal frekvencije 20KHz može da sedigitalizuje, a zatim šalje preko kanala od 5KHz (učestanost nosioca). Signalu će bitipotrebno četiri puta više vremena da se prenese preko uskopojasnog kanala, ali kadastigne na drugu stranu (odredište), može da se rekonstruiše na svoj puni propusni opsegod 20KHz.

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 skripti, vizuelizaciju scena skiciranjem u stripuknjige snimanja, kao i izradu produkcijskog rasporeda za snimanje pojedinih scena.

• Produkcija podrazumeva snimanje scena.

• Postprodukcija podrazumeva montiranje najboljih scena u konačni video program,korekciju i unapređenje video i audio zapisa prema potrebi. Montaža podrazumevaprvu verziju ili grubu montažu (rough cut) u kojoj može da se dobije okvirna idejao mogućnostima koje autoru stoje na raspolaganju sa klipovima koje poseduje. Unastavku montaže video program će moći fino da se podešava uzastopnim interven-cijama sve dok se ne dođe do konačnog rezultata. U tom trenutku nastaje završni

rez (final cut). Programi za nelinearnu montažu su osmišljeni tako da obezbeđujuefikasno montiranje, korekciju i poboljšavanje izgleda klipova, čime predstavljajuvrlo 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, prenego što uopšte započne dati projekat, najbolje je da se posavetuje sa njima. Oni moguda pomognu 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. Naprimer, ako izrađuje video klip za televizijsko emitovanje, potrebno je da zna da li istiizrađujete za standard NTSC (National Television Standards Committee), standard PAL

(Phase Alternate Line) ili standard SECAM (Sequential Couleur Avec Memoire).

Međutim, pre nego što se autor upusti u avanturu zvanu digitalni video, poželjno je da seupozna sa 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 jednog

Video 117

događaja. Video profesionalci mere vreme korišćenjem standardnih postupaka koji brojedelove jedne sekunde u slikama.

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 frame

rate). Na primer, kada se izvorni klipovi dobijaju korišćenjem kamere čija je brzina 30

slika 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.

118 Multimedija

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 od30 fps, trebalo bi da ih digitalizuje pri brzini od 30 fps umesto na 24 fps. Ukoliko to nijemoguće (na primer, DV se može digitalizovati jedino na 29, 97 fps), izlaz bi trebalo da imabrzinu slika koja vremensku bazu deli na jednake delove.

Slika 6.8. A. Video zapis od 30fps (prikazana je polovina sekunde) B. Vremenska

baza od 30 za video produkciju. Kada se izvorna brzina slika podudara sa

vremenskom bazom, sve slike su prikazane prema 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 od 24fps (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

brzina slika 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 vremenskabaza i brzina slika međusobno ravnomerno deljive. Najbolji rezultati će se dobiti ako suone identične.

Video 119

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. Ka-da se video klip montira za emitovanje na televiziji, način brojanja slika razlikuje se odnačina brojanja slika prilikom montiranja video klipa za igrani film. Video aplikacije običnoprikazuju vreme korišćenjem vremenskog koda za video SMPTE (Society of Motion Picture

and Television Engineers), gde trajanje od 00 : 06 : 51 : 15 označava da je u toku 6.

minut, 51. sekunda i 15. slika datog klipa. U bilo kom trenutku autor može da se prebacina neki drugi sistem prikazivanja vremena, kao što su stope i slike u filmu od 16mm ili35mm. Profesionalni uređaji za reprodukciju video traka i kamkorderi mogu da pročitajui upišu vremenski kôd direktno na video traku, što autoru omogućava da zvuk, video imontirani materijal sinhronizuje ili da montira van mreže.

Prilikom korišćenja vremenske baze 29, 97 standarda NTSC, razlika između ove vremen-ske baze i vremenskog koda od 30fps dovodi do odstupanja između prikazanog trajanjadatog programa i njegovog stvarnog trajanja. Iako je ovo neslaganje u početku neznatno, utoku trajanja programa ono se vremenom uvećava čime autoru onemogućava da preciznoizradi 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 ovu greš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 progre-

sivno 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

120 Multimedija

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 prolaza

naizmenič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 prolazu

pomoću sekvencijalnih ekranskih linija – desna slika

Ako autor namerava da uspori ili zadrži neku sliku u video klipu sa preplitanjem, ras-

plitanjem (de-interlacing) njegovih slika sprečiće drhtanje ili vizuelno prekidanje. Na

Video 121

ovaj način isprepletene poluslike će biti konvertovane u dovršene slike. Ako koristi izvorneklipove koji su progresivno skenirani (kao što su recimo, igrani film ili računarski generisa-na animacija) u videu koji je predviđen za isprepleten prikaz kao što je recimo televizija,slike može da izdvoji u poluslike postupkom koji se naziva generisanje poluslika (field

rendering) tako da 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 svojstava ve-zanih 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, HDTVi 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 koristi

proporcija 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, kru-govi 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

122 Multimedija

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

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 slike

Video 123

povećaće se broj piksela koje aplikacija mora da obradi i sačuva za svaku sliku, takoda je vrlo važno znati koja se rezolucija zahteva za konačni video format. Na primer,slika u NTSC formatu čije su dimenzije 720 sa 480 piksela (DV standard) sadrži 345.600piksela, dok slika u PAL formatu čije su dimenzije 720 sa 576 piksela sadrži 414.720

piksela. Ako se odredi suviše mala rezolucija, slika će izgledati grubo, a pikseli će bitiuočljivi. Ako se odredi suviše velika rezolucija, upotrebiće se više memorije nego što jezaista neophodno. Prilikom promene veličine slike treba nastojati da dimenzije budu uskladu sa proporcijama izvornog video klipa.

Savet: Ako korisnik namerava da radi u većoj rezoluciji i/ili ako je zabrinut zbog mogu-ćnosti obrade koje obezbeđuje CPU, može da odredi jedan ili više radnih diskova za dodatniRAM 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. Na tajnač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šćenjembezbednih zona, pri čemu važna radnja i tekst ostaju unutar njih, a video klip bi trebaloisprobati na pravom televizijskom prijemniku.

124 Multimedija

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 konvertuju uformat boje YUV koji se koristi na televiziji. Format YUV može da sačuva kvalitetan videozapis korišćenjem 16 bitova po pikselu (format boje RGB zahteva 24 bita po pikselu). Timese 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. ucrno-belu boju) plus u dva signala u boji. S obzirom na način na koji se izvodi ova kon-verzija, količina podataka za celokupni signal se znatno smanjuje, a da se pri tom ne gubina 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 opseg bojaNTSC standarda ograničen načinom na koji se prenose signali boja bez obzira na to štoformati 16-bitni YUV i 24-bitni RGB obezbeđuju pun opseg boja. NTSC ne može preciznoda reprodukuje zasićene boje i nežne prelive boja. Najbolji način da se spreče eventualniproblemi kod boje u NTSC standardu, sastoji se u tome da video klip u toku montaže trebapregledati na pravilno kalibrisanom NTSC monitoru.

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 personalni

Video 125

računari, a posebno stariji modeli nisu adekvatno opremljeni za obrađivanje podataka koji

se 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 brzina pre-nosa podataka digitalnog video klipa i da bi bila svedena na meru koju računar može daobradi, 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.

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 da

126 Multimedija

opisuje 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-length

encoding) predstavlja verziju ovog postupka koju koriste mnogi kodeci. Kodeci koji koristeprostorno 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 što je recimoanimacija u crtanom filmu.

Slika 6.18. Digitalne slike se sastoje od piksela (A), koji zauzimaju mnogo prostora

na disku ako nisu komprimovani (B). Primenjivanjem metode kodiranja

promenljivom dužinom kodne reči isti podaci na slici zauzimaju 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.

Slika 6.19. U ovoj animaciji jedina izmena je krug koji se pomera oko broda

Video 127

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 svim

slikama. (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 mogusmanjiti, a brzina podataka koja se dobija kao rezultat može biti prevelika za finu re-produkciju. Kodeci koji koriste ovaj metod komprimovanja, kao što je recimo Animation

(parametar Best quality) upotrebljavaju se za očuvanje maksimalnog kvaliteta u tokumontaže ili za zamrznute 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.

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 pikselikoji sačinjavaju nebo, zapravo sadrže 78 nijansi plave boje, kodek koji koristi ovu metodukomprimovanja može da zabeleži 60 nijansi plave boje. Iako sa jedne strane komprimovanjesa narušavanjem kvaliteta predstavlja svojevrstan kompromis u odnosu na kvalitet, onokao rezultat nudi manje brzine podataka i veličine datoteka u odnosu na komprimovanjesa očuvanjem kvaliteta. U tom smislu su kodeci koji koriste ovaj metod komprimovanja,kao što su Cinepak ili Sorenson Video široko prihvaćeni u završnoj produkciji video klipakoji 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 komprimovao

128 Multimedija

dati 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 repro-dukcije. U tom smislu je klip od 30 sekundi potrebno nekoliko minuta obrađivati presame reprodukcije. Kodek se smatra simetričnim onda kada zahteva podjednaku količinuvremena 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),pošto tri najpopularnije arhitekture za neometani tok podataka (RealMedia, Windows

Media 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 video

zapisa (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.

Video 129

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 mate-rijal primenjuju standardnu količinu komprimovanja. Zvučni zapis se može takođezabeležiti u digitalnom formatu. Zvučne trake se često obezbeđuju u digitalnoj formi,na primer na kompakt disku. Digitalne izvorne datoteke koje su sačuvane na DV traciili nekom drugom digitalnom medijumu moraju da se digitalno presnime (prenesu)na pristupačan disk pre nego što se budu koristile na računaru u nekom video pro-jektu. Najjednostavniji način da se digitalizuje DV sastoji se u tome da se DV uređaj(recimo 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 digitalno

presnimavanje. 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.

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. DVreportaž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 standardna novijim modelima Windows i Macintosh računara. Da bi obezbedio port IEEE 1394

autor alternativno 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.

130 Multimedija

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 video mon-taž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, 1kHz poseduje kvalitet zvuka sa kompakt diska, dok se za zvuk naCD-ROM-u ili Internetu koristi brzina odmeravanja od 22kHz 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-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 48kHz, ali ne i od44, 1kHz. Tako da prilikom digitalizovanja izvornog materijala sa DV-a ili njegovog obra-đivanja, treba nastojati da se zvuk podesi na 32, odnosno 48kHz.

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 30 fps, dok jebrzina odmeravanja 44, 1kHz, a da se zatim ovakav film reprodukuje na 29, 97 fps (videostandard NTSC). Kao rezultat se dobija postepeno usporavanje video zapisa dok zvuk (uzavisnosti od hardverske opreme) nastavlja da se reprodukuje odgovarajućom brzinom,

Video 131

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) brzi-nom od 48kHz pri čemu je sinhronizovan sa filmskom kamerom koja beleži brzinomod 24 fps. Kada se film prebaci na video zapis brzine 30 fps, razlika u brzini video zapisadovešće do toga da zvuk preduhitri sliku ukoliko se DAT reprodukcija ne umanji za 0, 1%

prilikom prebacivanja na računar. Zbog ovog problema, korišćenjem računara ne može dase konvertuje brzina odmeravanja posle izvornog snimanja. Najbolje rešenje se sastoji utome da se izvorni zvuk beleži korišćenjem DAT magnetoskopa koji može da beleži za 0, 1%

brže (48, 048kHz) prilikom sinhronizacije sa filmskom kamerom.

Na starijim CD-ROM-ovima ponekad je korišćena brzina odmeravanja zvuka vrednošću od22, 254kHz. Danas je uobičajenija brzina od 22, 250kHz. 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 AV podataka i optički medijumi

Prilično često se sreće termin "kompresija", pa je vreme da se detaljno objasni i dase pokaže zašto je značajan. Kompresija bi najjednostavnije mogla da se definiše kao"sabijanje". Treba zamisliti neki objekat kao što je hamburger. Pod hamburgerom se obi-čno podrazumeva 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će zagri-sti, a da se pre toga ne pritisne, kako bi uopšte mogao da stane u usta. Moglo bi se reći dato predstavlja neku vrstu kompresije koja prethodi žvakanju. Sastojci se sabijaju na različitenačine – lepinja u sebi sadrži dosta vazduha tako sa da njom ide veoma lako. Međutim,meso može da se komprimuje samo malo zato što je već sabijeno u samu pljeskavicu. Sveu svemu, korisnik na kraju dobija manji hamburger u kome su neke komponente sabijenemanje, a neke više.

Kompresija karakteristična za računare zasniva se na istim principima. Tekstualne datotekesu prepune "međuprostora" tako da se veoma uspešno komprimuju, tj. nakon sabijanjamože se dobiti datoteka koja je 90% manja, što znači da je kompresija izuzetno velika. Nekidrugi tipovi datoteka kao što su video ili fotografije manje se komprimuju, jer se one nalazeu 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 samo zvuke

132 Multimedija

između 20 i 20.000 herca. Slično tome, ljudsko oko može da registruje otprilike 1.024 ni-janse iste boje, od milijardi boja do kojih je moguće doći matematičkim putem. Prematome, ima li smisla zadržati baš sve boje ako naše oko ionako nije u stanju da ih raz-likuje? Pored toga postoje i redundantne (suvišne) slike – ako se u svakoj sekundi nekogvidea od 60 sekundi na istom mestu pojavljuje ista stolica, zašto bi se podaci o njoj snimaliu svakom kadru video zapisa. Drugi razlog za postojanje kompresije jeste prostor koji jeneophodan za skladištenje digitalnog videa.

Veličina kadra K =(širina u pikselima × dužina u pikselima × dubina bitova)/8/1.024

Veličina kadra K = (720× 576× 24)/8/1.024 = 1.215Kb

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 podacijoš 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).

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 po-dataka. Kod visoke kompresije slika ili videa gubitak podataka postaje primetan, običnou vidu delimične deformacije oblika, tj. glatkih linija. Zato će autor, kad god neki videozapis snima 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 nogompo podu, verovatno se ne bi čuo zvuk koji je pravio nogom, mada ovaj zvuk ipak pos-toji. Odbacivanjem ovog zvuka imaće manje informacija, a to znači i manju datoteku.

Video 133

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čka

redundantnost 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 odgovara VHS

trakama. VideoCD nije postigao svetsku popularnost, mada je često korišćen na DalekomIstoku. MPEG-1 je korišćen i za Philips-ove digitalne audio-kasete, ali je njegov konačnitrijumf doneo Internet, pre svega neočekivanim uspehom audio formata poznatog podimenom 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 20%

i uvedena je podrška za interlace video, što je tehnika koju koriste postojeći televizijskisistemi. MPEG-2 je našao široku primenu u digitalnim satelitskim i zemaljskim sistemimaprenosa, a proširio se i na kućnu elektroniku – vlasnici DVD uređaja svakodnevno se susrećusa 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-2 jedoneo 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šao putdo šireg auditorijuma. Tako se MPEG-2 audio, uglavnom koristi (u MPEG-1 kompatibilnommodu) 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 obuhvata iove 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.

134 Multimedija

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 uveo mo-gućnost korišćenja ne samo realnog digitalizovanog audio i video sadržaja, već i računarskigenerisanog. Tako MPEG-4 podržava tekst, bitmape, 2D i 3D vektorske grafičke objekte,sintetički govor i muziku (Text-To-Speech, MIDI), kao i jezike koji služe za kompozicijusvih tih objekata, kreiranje scena i interakcije objekata sa korisnikom. Ove ciljeve je ispunioMacromedia Flash koji je, iako zatvoren, u međuvremenu postao de facto standard naInternetu.

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 daleko manjimpropusnim opsezima. Teorijski, algoritam je trebalo da omogući DVD kvalitet u 3÷ 6 putamanjem 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 zasebe, 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 vreme jebio 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.

Video 135

6.6.9. MP4 format

Divx, Xvid i ostali danas se najčešće koriste kao video-kodek u AVI formatu fajlova,ali je 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čno for-matima 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-4

podrž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 formatzapisa QuickTime omogućavao zanimljive stvari kao što je podrška za titlove ili spisakefekata koje pri reprodukciji treba izvesti nad slikom ili zvukom. QuickTime nije u širojupotrebi samo zato što je Windows implementacija katastrofalno loša, čime je Apple

propustio da svojoj tehnologiji obezbedi veći broj korisnika.

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 ćeMPEG-4 audio postići tržišni uspeh. Glavni audio-kodek je već poznat iz MPEG-2 standardakao AAC (MPEG-2 Advanced Audio Coding, originalno ime je bilo MPEG-2 Non Back-

wards Compatible). Glavne karakteristike su ostale iste – AAC omogućava do 48 audiokanala uz njihovo uparivanje po potrebi, 15 LFE kanala, ugrađivanje podataka, podrškuza različite jezike i slično. Osim MPEG-4 AAC, MPEG-4 format može da primi i prethodneMPEG audio standarde (MP2, MP3, MPEG-2 AAC), i ima rezervisane tipove objekata za ovekodeke.

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 računarski generisani – umesto prave, snimljene i digitalizovane muzike, MPEG-4 možeda ima MIDI muziku koja će biti sintetizovana prilikom reprodukcije. Umesto pravog glasa,autor MPEG-4 sadržaja može navesti samo tekst koji treba da bude pročitan, te definisati(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 2D ili 3D objektima.

136 Multimedija

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 Macromedia

Flash ili W3C jezik VRML. Razlika između njih je što je MPEG-4 otvoren standard, a ve-lika prednost 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, standardizovati ijezik 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 izuzetnokvalitetne, 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 manjim da-totekama 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 predstavlja-ju "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 koji

Video 137

zauzima 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 PC

rač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 MPEG-4, 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 dabi mogao da se reprodukuje RealVideo materijal neophodan je RealOne plejer, što jesmetnja kada korisnik hoće da razmenjuje svoje snimke sa drugima (oni takođe moraju dapreuzmu poseban 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.

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 naMacintosh-u 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 snimanja

138 Multimedija

i 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 prviput, ali je očigledno da je to korisna stvar na duge staze. Scenario predstavlja strip kojise čita svakodnevno. Za svaki dan postoje tri ili četiri panela koji prikazuju napredovanjepriče. Treba naći vremena da se napravi struktura produkcije, a zatim sledi grupa crtežakoji pokazuju 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 na sta-bilnu osnovu, kao što je presavijeni džemper na haubi kola, može poboljšati snimak. Uzmalo pažnje i pažljivog prilagođavanja šrafova za učvršćivanje, metalni tronožac će učinitičuda. Ako korisnik mora da snima iz ruke, trebalo bi da pokuša da koristi kameru sa stabi-lizacijom elektronske slike za nepokretne snimke, dodatke tipa steady cam, ili da pokrećekameru 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šasliku. Kao u fotografiji, dobre tehnike osvetljavanja razdvajaju amatere od profesionalacau snimanju videa.

Slika 6.21. Dobro osvetljenje je veoma bitno za snimanje kvalitetnog videa

Video 139

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 prikazana je scena generisana unutarpomenutog softvera.

6.7.4. Hroma ključevi (Chroma Keys)

Hroma ključevi ili Chroma Keys se koriste za brzo uklanjanje ili maskiranje dela slike.Mogu da se koriste za razne svrhe – uklanjanje pozadine sa slika, maskiranje slika, gene-risanje ikonica, isecanje/odsecanje delova slika, stvaranje nepravilnog oblika slike itd.

Filmska industrija je rešila ovaj problem razvojem plavog ekrana, a kasnije i zelenog(slika 6.22). Koristeći ovaj metod, glumci (u prvom planu) su snimani ispred plave poza-dine. 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.

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 da seovakve 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 ispravno

140 Multimedija

pripreme 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 do15 frejmova, tako da privremena kompresija može da ispravi zastoje zbog pretraži-vanja. Vreme pretraživanja (seek time) pokazuje koliko treba čitaču CD-ROM-a danađe zadate 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 veličine320×240. Što više podataka treba da bude dekomprimovano i preneto sa CD-ROM-ana ekran, to je sporija reprodukcija.

• Trebalo bi izvršiti defragmentaciju fajlova pre nego što se projekat ne nareže na CD.

• 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 bile poznate i ranije, ali tehnike virtualnestvarnosti mogu ostvariti utisak "uplivavanja" čoveka u nepostojeći ili prividni 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 koriste isavremene računarske mreže da bi ostvarile komunikaciju između čoveka i od njega uda-ljene 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.

Video 141

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 i inter-pretiraju informacije o svetu oko korisnika. U procesu percepcije učestvuju čula i mozak.

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, dodir,ukus). Kada je u pitanju virtualna stvarnost, za sada su dobro razvijeni samo sistemi kojiutiču na daljinska čula, mada se postupno razvijaju i sistemi koji utiču na kontaktna č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 za-meniti veštački generisanim nadražajima. Na taj način može realna okolina da se zameniprividnom 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 potpuno okružentim virtualnim svetom ili delomično uključen slušajući i gledajući aplikacije virtualnestvarnosti. Virtualna stvarnost je skup tehnologija koje korisnika "uranjaju" u virtualnookruženje. Pritom, u idealnom slučaju, korisnikova čula detektuju samo virtualne nadra-žaje proizvedene računarom, a uz to je ostvaren direktan unos korisnikovih pokreta uračunar. Za postizanje ovih efekata koriste se različiti uređaji, o čemu će kasnije biti reči.

Virtualna okruženja (VO) se zasnivaju na predmetima koji su definisani u memoriji ra-čunara na takav način da računar kasnije može da prilaže te predmete na ekranu uz mo-guć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)

142 Multimedija

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.

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. 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 odelaBodySuit.

Video 143

• 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 po-moću većeg broja kamera prate oznake (markere), te kombinovanjem položaja marke-ra u vidnom polju svake kamere izračunavaju položaj markera u prostoru (3D). U raduovih sistema koriste se različiti principi praćenja, najčešće uz pomoć markera od sjajnogmaterijala. Kamere, osetljive na infracrveno svetlo prate markere, odnosno pokrete telau prostoru. Kamere moraju biti kalibrisane, tj. njihovi međusobni položaji i orijentacijepoznate. Kombinovanjem zapisa 2D položaja markera (iz svih kamera), uz informaciju opoložajima i karakteristikama kamera, precizno se utvrđuje 3D položaj markera. Glavneprednosti optičkog praćenja su izuzetno velika tačnost, velika količina uzorkovanja po-dataka, te moguć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 kine-matičke i dinamičke komponente gibanja.

Slika 6.25. Exoskeleton – mehanička konstrukcija montirana na telo

144 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, poznatihdužina segmenata među zglobovima, jednostavnim rešavanjem direktne kinematike dobijase položaj zadnjeg segmenta u odnosu na prvi, fiksni segment konstrukcije. Upotrebomtzv. exoskeletona (mehaničke konstrukcije montirane na telo, slika 6.25) mehaničko pra-ć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 3D

predmetima 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 mno-gobrojnih senzora registruju položaj šake i poziciju prstiju mereći ugao pomaka (slika6.27). Ovaj tip uređaja moguće je kombinovati sa simulatorima sile ili dodira čime ruka-vica postaje i haptički izlazni uređaj.

Slika 6.27. Senzori položaja ruke (Data Glove)

Video 145

Uloga senzora pokreta sastoji se u obeležavanju pozicije objekata u realnom svetu, teprosleđivanje informacije do računara. Obrađenu informaciju o poziciji tela računar sprema,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.

Zajednička karakteristika navedenih sistema je mogućnost prikupljanja informacija (mo-

tion capture) o položaju referentnih tačaka u prostoru u realnom vremenu. Dobijeni po-daci 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.

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 oko pojednu. Head Mounted Display – HMD ima za svako oko poseban zaslon (slika 6.28). Zbogmalih dimenzija uređaja, zasloni su preblizu da bi ih neposredno posmatrali, pa se izmeđuoka i zaslona postavlja odgovarajući optički sistem koji omogućuje gledanje zaslona.

Slika 6.28. Head Mounted Display

Najvažnije karakteristike HMD-a, uz veličinu, težinu i udobnost, ogledaju se u veličini vidnogugla i rezoluciji zaslona. Mogu se pronaći u raznim oblicima, od kaciga do naočara. Danasse teži minimalističkom pristupu i što većoj praktičnoj primenjivosti. Cilj je stvoriti dovoljnomali uređaj koji ne ometa slobodno izvođenje kretnji. Takvi uređaji mogu biti opremljeni,uz slušalice, i senzorima položaja i orijentacije.

146 Multimedija

Najnapredniji projekcioni sistem je CAVE (Cave Automatic Virtual Environment) sis-tem. Sastoji se od prostora omeđenog projekcionim platnima (koji kreiraju sobu u ko-joj se nalazi korisnik) na koje se projektuje računarom generisana stereo slika (slika6.29). Korisnik nosi naočare putem kojih se ostvaruje trodimenzionalni doživljaj pruža-jući pritom zadovoljavajući periferni vid. Doživljaj je izuzetno realističan da su neprimetnispojevi između postavljenih 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-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.

Video 147

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

6.9.3. Primene virtaulne realnosti

Virtualna stvarnost se najviše primenjuje u sledećim područjima – medicina, vojna primena,obrazovanje, zabava, dizajn i razvoj, marketing.

148 Multimedija

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 se uvež-bavaju situacije koje se u stvarnosti retko dešavaju, na primer, spašavanje talaca.

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, ipitanje je vremena kada će ova tehnologija postati dostupna i kućnim igračima računarskihigara.

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 i tako dalje, jer je pojava 3D projekcije još uvek dovoljno zanimljivada privuče znatiželjnike.

Usprkos brojnim područjima primene, postoje i ograničenja. Iako je poslednjih godina došlodo znatnog napretka, oprema je i dalje nepraktična, velika, skupa i složena. Određene vrstevirtualne stvarnosti mogu kod korisnika izazvati mučninu, a čak i ako je ne izazovu, previše

Video 149

su neudobne za dugotrajnu upotrebu. Mučnina koja se javlja kao posledica razlike izmeđuvizualnog 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.

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 in-stalacija. 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.

150 Multimedija

Cilj proširene realnosti je da korisniku pruži jednostavan i intuitivan pristup podacima. Dabi se to ostvarilo, potrebne su prilično složene tehnologije. U opticaju su tri osnovna prob-lema – mešanje slike, poravnanje i prikupljanje podataka. Mešanjem slike omogućuje seistovremeni prikaz stvarne i virtualne slike. Poravnanje osigurava da se virtualni predmetitačno poklapaju 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

XML – format za razmenu podataka na

Web-u

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 stvaralesu vlastita rešenja strukturiranja informacija, ali ništa nije bilo za opštu upotrebu.

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 je vrlosložen, dok obrada traži zahtevnu programsku podršku. U ranim danima Interneta, zbogsloženosti i zahtevnosti, SGML sigurno nije mogao predstaviti hipertekst.

Tim Berners-Lee i Andres Berglund, dva istraživača iz CERN-a, 1989. godine kreirali sujezik 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 informacija zaWeb.

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 hiljadama kilo-metara moraju zadržati brzinu i besprekornu funkcionalnost bez obzira na udaljenost. Svise prenosi moraju obaviti tako da ni najmanji deo pojedinog podatka iz baze podataka,heterogenog sistema, direktorijuma usluga i aplikacija ne bude izgubljen. Aplikacije morajubiti 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.

152 Multimedija

HTML nije imao rešenje za sve ove probleme. Najočiglednije ograničenje HTML-a je njegovstrogo definisan skup oznaka. Članovi World Wide Web Consortiuma (W3C) 1996. godineuočili su tri značajne prednosti SGML-a u odnosu na HTML, i to su – proširivost, strukturi-ranost i pravovaljanost.

Okupili su tim SGML stručnjaka koji su kreirali novi jezik oznaka sa jezgrom SGML-a i jed-nostavnošću HTML-a. Nastao je XML (eXtensible Markup Language) jezik.

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čava skupoznaka (markup tags) koje se mogu koristiti niti gramatiku tog jezika. Skup oznaka (tagset) za jezik oznaka tačno definiše oznake – tagove koje ćemo koristiti i kako. Postojedva osnovna koncepta kod XML dokumenta. Prvi koncept uslovljava da svaki XML doku-ment mora biti 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 ito po istom redosledu, te korišćena sintaksa sledi specifikaciju. Definisanje specifikacijeza dokumente 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. Pra-vovaljan dokument je onaj koji se pridržava svoje definicije tipa dokumenta (Document

Type Definition, DTD). DTD tačno navodi oznake elemenata koje se mogu koristiti u XML

dokumentu i raspored tih elemenata. Ako XML dokument ima DTD specifikaciju i ako seupravlja 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, DTD je taj kojiomogućava prenosivost XML podataka. Prema definiciji tipa dokumenta u aplikaciji semože odrediti da li je sadržaj XML dokumenta prihvatljiv i na taj način sprečiti greške.

7.1. Šta XML jeste?

XML predstavlja podatke za opis podataka tj. sintaksu, u tekstualnom formatu. On je krei-ran sa namerom da bude jednostavan za učenje, jeftin, brz i optimizovan za Internet. XMLse naziva i eXcellent Marketing Language jer predstavlja:

• Univerzalni format podataka – XML omogućuje kreiranje sopstvenih formata po-dataka i njihovu razmenu preko postojećih mreža i aplikacija.

• Integracija podataka – XML vrši jednostavnu integraciju podataka kod već posto-jećih aplikacija i platformi.

• Prilagodiv – On je prilagodiv tj. razumljiv i za čoveka i za mašinu, primaoca i poši-ljaoca, te predstavlja najupotrebljiviji standard za manipulaciju podataka i njihovurazmenu.

XML – format za razmenu podataka na Web-u 153

Svrha XML je da generiše sopstvene tagove, njihovo značenje i njihov prikaz. XML ne radiništa, on samo nosi informacije okružene XML tagovima. Znači, XML definiše strukturudokumenata. On menja način na koji browser-i prikazuju, organizuju i pretražuju infor-macije. XML se može shvatiti kao osiromašena verzija SGML-a i proširiv je za razliku odHTML. XML uklanja granice HTML-ovog ograničenog skupa oznaka, dozvoljavajući ljudimakoji se bave rezvojem da definišu neograničen broj oznaka za opis bilo kakvih podataka.

7.2. Šta XML nije?

Pre svega, XML nije programski jezik. Ne postoji kompajler XML-a koji čita XML da-toteke i daje izvršni kôd. Eventualno može da se definiše 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 preduzi-mati razne akcije na osnovu pročitanog. Zaista nema razloga da konfiguracijska datotekane bude u formatu XML, umesto u formatu nestrukturiranog teksta. Neki noviji programiupotrebljavaju 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 XML

dokumenta koji će poslati dokument.

Najzad, da se pomene primer gde priče najčešće sakrivaju istinu, XML nije baza po-dataka. XML-om ne može da se zameni Oracle ili MySQL server. Baza podataka možesadržati XML podatke, bilo kao VARCHAR ili BLOB ili neki namenski XML tip podataka, alisama baza podataka nije XML dokument. XML podaci mogu da se smeste u bazu podatakana serveru i da se preuzmu iz nje u formatu XML, ali 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šta ubazu. Da bi se preuzeo XML dokument iz baze podataka, po pravilu mora da se upotrebineki posrednički program (middleware product) kao što je Enhydra, koja će napraviti iposlati SQL upite bazi podataka, a skup rezultata formatirati kao XML pre nego što ihvrati klijentu. Činjenica je da neke baze podataka integrišu taj softver u svoje servereili za obavljanje te funkcije obezbeđuju softverske dodatke, kao što je Oracle-ov servletXSQL. U tim scenarijima, XML služi veoma dobro kao sveprisutan prenosni format, nezavi-san od platforme. Međutim, on nije baza podataka, niti ga tako treba upotrebljavati.

7.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.)

154 Multimedija

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 Inter-neta. 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 kako bise moglo proveriti i ispravnost sadržaja.

• XML for Content and knowledge management – Pretraživanje, indeksira-nje i lokacija podataka postaje jednostavnija pošto XML nosi informaciju o sadržaju,on je 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 kreiranjestrukture za razmenu informacija kao i da objedini postojeće protokole i standarde.

• XML and E-Commerce – XML obezbeđuje sintaksu da indetifikuje svaku infor-maciju potrebnu za kompletnu transakciju. Drugi spoj je poverenje, jer XML omogu-ćuje da se informacija o učesnicima u transakciji nosi zajedno sa transakcijom. Dabi se pratila 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 2Dvektora pomoću XML-a. SVG omogućuje da svaki korisnik u realnom vremnu pristupaslici u bilo koje vreme i sa bilo kojim uređajem, sa bilo kog mesta.

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.

7.4. Standard

Mogućnost da se podaci odvoje od procesa predstavlja ključ uspeha XML-a. XML je ot-voreni 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, kao štosu Java, MS Visual Basic, 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 koje po-drž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 pravila sadrugih šema. Nastale su kao alternativna zamena za DTD (Document Type Defini-

tion), pošto DTD nije bio XML dokument. XML šeme obezbeđuju podršku za stan-dardne tipove podataka kao što su broj, datum,... i omogućuju definisanje novihtipova.

• Namespace, eleminiše konfuziju prilikom kombinovanja više šema u jednom XML

dokumentu. 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.

• 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.

7.5. Kako radi XML?

XML je na prvom mestu tehnologija i sam za sebe ne predstavlja nešto posebno već tek sasrodnim 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 informaciju,jer to u današnjim uslovima znači tražiti i pronaći istu već je potreban način da opišemoinformaciju, a da taj opis informacije upotrebimo dalje za pronalaženje iste i za njenudalju obradu. Neka vam je potrebna neka konkretna informacija. Možete otići na neki

156 Multimedija

sajt i tamo pronaći tu informaciju, ali to zahteva da neka osoba to i uradi. Možda bistemogli i da napišete neki parser koji će sadržaj tog sajta rasčlaniti i pronaći potrebnu infor-maciju, ali zamislite šta vam je sve potrebno da znate da napišete takav parser. Morateznati gde je i kako je ta informacija smeštena. Prilično komplikovano, a rezultati su i daljediskutabilni. Međutim kada biste imali informaciju koja opisuje informaciju stvari bi bilemnogo lakše. Lako biste mogli da dođete do potrebne informacije – to bi mašina moglada uradi umesto vas, a kad neko stalno nudi takve informacije kojima biste mogli da pris-tupite lako onda je pojam Web servisa lako razumljiv. Ideja se dalje razvija i dobijamoInternet kao mrežnu infrastrukturu tako da na kraju krajeva Internet ili barem jedan njegovsegment će biti uskoro čisto poslovna mreža kojom će se razmenjivati samo informacije usirovom obliku. Uslov te razmene je da informacije na neki način budu obeležene da bi semogle 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 XML

dokumenta mnogo liče na oznake HTML dokumenta, ali među njima postoje bitne razlike.

Najvažnije je da je XML jezik za meta označavanje. To znači da on nema fiksan skupoznaka i elemenata koji bi trebalo da zadovolje svačije potrebe u svim oblastima i zau-vek. Svaki pokušaj da se napravi konačan skup takvih oznaka, osuđen je na neuspeh. Ume-sto toga, 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 četvrtine nota,polovine nota, violinske ključeve, tekstove pesama i ostale objekte uobičajene u muzici.

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, veoma jestrog u mnogim drugim aspektima. Specifikacija XML-a definiše gramatiku XML dokume-nata, koja kazuje gde se oznake moraju staviti, kako one moraju izgledati, kakva su imena(nazivi) elemenata dozvoljena, kako se elementima pridružuju atributi itd. Ta gramatika jedovoljno specifična da omogućava pravljenje raščlanjivača i analizatora sintakse XML-a kojimogu pročitati svaki XML dokument. Za dokumente koji zadovoljavaju pravila te gramatikekažemo da su dobro oblikovani (well-formed). Dokumenti koji nisu dobro oblikovani bi-vaju odbijeni, kao što biva odbijen svaki C program koji sadrži sintaksnu grešku. Programiza obradu XML-a (XML processors) odbijaju dokumente koji nisu dobro 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 upotrebljava XML,kao što su Mozilla ili Microsoftov Word. To su primene XML-a u određenoj oblasti, naprimer, u vektorskoj grafici ili u kulinarstvu.


Oznake u XML dokumentu opisuju njegovu strukturu. Pomoću njih možete videti koji ele-menti su pridruženi kojim drugim elementima. U dobro projektovanom XML dokumentu,oznake opisuju i semantiku dokumenta. Primera radi, oznaka može ukazati na to da jeelement datum ili ime osobe ili bar-kod. U dobro projektovanim XML aplikacijama, oznakeništa ne kazuju o tome kako dokument treba prikazati. Drugim rečima, ne kazuju da li jeodređeni element ispisan polucrno ili kurzivom ili je stavka nabrajanja u listi. XML je jezikza 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 jeXSL-FO (XSL Formatting Objects). Međutim, to su izuzeci koji potvrđuju pravilo. IakoXSL-FO opisuje prezentaciju, XSL-FO dokument se nikada ne piše direktno. Umesto njeganapisali biste semantički bolje strukturiran XML dokument, a potom biste upotrebili opisstilova XSL Transformations da biste strukturno orijentisani XML izmenili u prezentaci-jski 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. Najraširenijijezik za XML šeme i jedini definisan u samoj specifikaciji XML-a jeste definicija tipa doku-

menta (document type definition – DTD). Svaki DTD navodi sve dozvoljene oznake iodređuje gde se i na koji način one mogu pojaviti u dokumentu.

U XML-u DTD-ovi nisu obavezni, nego opcioni. Sa 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š 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 level

ili 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 se

158 Multimedija

njegova 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 korak3. Ako je nađeni tag oznaka za zatvaranje onda je element definisan.

6. Ovaj proces se ponavlja dok se ne obradi čitav dokument.

7.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:

{\ttfamily

<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’>

Š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).

160 Multimedija

7.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. U ovomslučaju dokument poštuje specifikaciju 1.0 XML-a koju propisuje W3Consortium. Ovaj redujedno i govori Internet Exploreru da parsira (rasčlani) dokument XML parserom odnosnoda dokument tretira kao XML fajl, a ne kao HTML fajl. Bez ove linije dobili bismo porukuo grešci od IE. Ova linija nema svoj zatvarajući ekvivalent, jer ona nije deo XML doku-menta već njegova deklaracija. Sledeće je osnovni tag koji dokument formira kao poruku(<note>). Moguć je samo jedan osnovni tag, inače opet dobijamo poruku o grešci. Sledećečetiri linije opisuju četiri podčlana osnovnog člana (to, from, subject i body). Poslednjalinija 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 isti kaotag <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 elementi mogupreklapati 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>


• 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 mogu imatiatribute u formi ime = vrednost parova (kao i u HTML). Pogledajmo ova dva XML doku-menta. 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:

162 Multimedija


će u parseru biti:

Puno pozdrava iz Beograda!

dok 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 čo-vek. Softver koji podržava čisti tekst može da obrađuje XML. Na primer, u Notepadu++

se 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. Stoga je u samudeklaraciju XML fajla uveden i atribut encoding (dešifrovanje) što zapravo govori čitačukoju 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 encoding

atribut, 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.

Glava 8

HTML/HTML5

Jezik HTML (HyperText Markup Language) je standarizovani jezik koji se koristi pri struk-turiranju tekstova, medija i ugrađenih objekata u Web stranice i elektronsku poštu. Kaomodifikovanu i pojednostavljenu verziju SGML jezika, HTML standardizuje i održava World

Wide Web Consortium (W3C). Prva zvanična verzija jezika HTML je izašla tokom juna1993. godine.

Jezik HTML je sačinjen od običnog teksta i tagova (znakova ili oznaka). Iako se HTML

znakovi (tags) često nazivaju kodom, tehnički HTML nije kôd, jer računarski kodovi suinstrukcije koje od računara traže da izvrši određenu operaciju. Svrha HTML tagova je dase struktura dokumenta "označi" tako da bi korisnikov agent (user agent), tj. Internetpretraživač mogao da prepozna strukturu dokumenta i ispravno je prikaže u prozoru pre-traživača kojeg korisnik koristi.

Jezik HTML koristi veoma "labavu" sintaksu, ali i dalje postoji nekoliko stvari o kojima bitrebalo voditi računa i kojih korisnik mora da bude svestan:

• HTML je "osetljiv" na veličinu slova. Za elemente, atribute i vrednosti atributa moguda se koriste proizvoljne veličine karaktera. Mogu da se koriste i kombinuju veličine(mala i velika slova), ali trebalo bi biti dosledan kako bi kôd bio čitljiviji.

• HTML je "neosetljiv" po pitanju belina. U okviru tagova (znakova ili oznaka), elementmora odmah da prati otvorenu zagradu. Nakon toga, međutim, može da se stavi"praznog" prostora ili "belina" koliko korisnik hoće, između elementa i atributa,između atributa, a pre zatvaranja zagrade. Izvan tagova, korisnik može da koristibeline po nahođenju, jer nemaju uticaja na konačni izgled ekrana unutar aktivnogpretraživača. Pretraživači uvek ignorišu više od jednog uzastopnog karaketara kojisignalizira na blanko prostor.

• Kada se koriste atributi, vrednosti atributa mogu da se prilože između jednostrukihili dvostrukih navodnika. Neki vrednosti atributa ne moraju da imaju navodnike, alije lakše uvek ih koristiti, nego da se razmišlja kada su neophodni, a kada ne.

Za dodatno modifikovanje Web stranica postoje:

• CSS ili Cascading Style Sheets za izgled i položaj prezentacije;

164 Multimedija

• skriptni jezici (JavaScript, VBScript) za omogućavanje dinamičnosti i interak-tivnosti na Web prezentacijama;

• DOM ili Document Object Model, koji označava vezu između skripti i elemenata nastranici.

8.1. HTML i osnove Web strana

Mnogi ljudi stvaraju Web stranice pomoću tekst editora ili tekst procesor. U popularnetekst editore spadaju Notepad for Windows (u poslednje vreme Notepad++) i SimpleText

for Macintosh, a u popularne tekst procesore Microsoft WordPad i Microsoft Word.

Da bi se podesila Web stranica, trebalo bi, najpre, uneti tekst koji će se pojaviti napomenutoj stranici. Preporuka je da se tekst ne formatira koristeći tekst editor ili tekstprocesor. Moraju da se dodaju HTML oznake (tagovi) kako bi se promenio izgled tek-sta. HTML tagovi pružaju uputstva za formatiranje i struktuiranje Web stranice.

Nakon unošenja teksta za Web stranicu, trebalo bi sačuvati istu kao tekstualni dokumenti navesti ime za Web stranicu sa ekstenzijom .html ili .htm. Ime Web stranica može dasadrži slova i brojeve, ali bez razmaka. Glavna Web stranica ili početna stranica, na Websajtu, se obično zove index.html.

Postoje neki osnovni HTML tagovi koje bi trebalo dodati svakoj Web stranici koja sekreira. Tagovi se pišu u okviru oznaka < i >. Većina tagova ima početni i završni tag. Zavr-šni tag se dobija dodavanjem znaka / i označava mesto na kome prestaje dejstvo početnogtaga. HTML tagovi ne zavise od veličine slova kojim se pišu; mogu se da se pišu malim ilivelikim slovima (case insensitive).

Oznaka ili tag <HTML> treba da se pojavi na vrhu svake Web stranice koja se kreira. Ovajtag identifikuje dokument kao Web stranicu koja sadrži HTML kôd.

Oznaka <HEAD> treba da se pojavi neposredno ispod oznake <HTML>. Oznaka identifikujedeo glave Web stranice, koji sadrži informacije o Web stranici, kao što je naslov.

Oznaka <TITLE> se pojavljuje u odeljku glave Web stranice. Ovaj tag omogućava da seWeb stranici dodelu naslov. Svaka Web stranica koja se pravi mora da ima naslov. Naslovise obično pojavljuju u naslovnoj traci prozora Web pretraživača. Naslov Web stranica tre-balo bi da sadrži samo slova i brojeve.

Oznaka <BODY> identifikuje telo Web stranice. U ovaj odeljak su uključeni sadržaj Webstranice, tekst, slike, tabele i drugi elementi koje korisnici žele da vide kada posete Webstranicu.

Minimalna struktura HTML dokumenta je prikazana ispod:

<html>

<head>

<meta charset="UTF-8">

<!-na\v sa slova-KOMENTAR->

<title>

HTML/HTML5 165

<!-naziv stranice-KOMENTAR->

</title>

</head>

<body>

<!-izgled stranice-KOMENTAR->

</body>

</html>

Prikazivanjem Web stranici u Web pretraživaču omogućeno je da se vidi kako će sepojaviti stranica na Internetu. Potreban je Web pretraživač, kao što su Microsoft Internet

Explorer, Mozilla Firefox, Google Chrome, Apple Safari, Opera.

Web pretraživač čita HTML kodove koji su korišćeni za kreiranje Web stranice i zatimprikazuje Web stranicu u prozoru Web pretraživača. Kako Web pretraživač čita svaki deoHTML koda, tako dobijene informacije prikazuje na ekranu. To znači da Web pretraživačmože da prikaže deo Web stranice pre nego što je u potpunosti završena obrada stranice.

Kao primer svega rečenog, na slici 8.1 je prikazan sadržaj dokumenta HTML-001.html saprimenjenim osnovnim tagovima.

Slika 8.1. Prikaz ekrana na osnovu dokumenta HTML-001.html

Trebalo bi prikazati napravljenu Web stranicu u nekoliko Web pretraživačima, da bi sevidelo kako će svaki pretraživač da prikaže Web stranicu. Svaki Web pretraživač može datumači drugačije HTML oznake i neki Web pretraživači ne podržavaju sve HTML funkcije. Naprimer, najnovije verzije Web pretraživača mogu da prepoznaju nove HTML funkcije, dokstariji Web pretraživači ne mogu pravilno da prikažu te funkcije.

Web pretraživači obično ignorišu pritisak na taster Enter prilikom kucanja u tekst editoruili tekst procesoru. Korisnik mora da koristite oznaku ili tag <P> da bi odredio gde želi dasvaki novi paragraf ili pasus počne. Sintaksa ovog elementa je:

166 Multimedija

<p> Paragraf </p>

Kada se prikazuje Web stranicu u Web pretraživaču, između svakog paragrafa će se pojavitiprazan red, koji je definisan upotrebom taga <P>. Ovo može da poboljša izgled i čitljivostWeb stranice na osnovu "razbijanja" velikih delova teksta (slika 1.2).


Po pravilu, većina Web pretraživača poravnava tekst po levoj margini. Atribut ALIGN

omogućava da se promeni poravnanje paragrafa. Paragrafi ili pasusi mogu da budu porav-nati po levoj margini (left), po desnoj margini (right), po obe margine(justify), a moguda budu i centrirani (center).


HTML/HTML5 167

Promena poravnanje važnog paragrafa može da ga izdvoji iz ostatka Web stranice. Naslici 1.3 su prikazana sva četiri poravnanja unutar istog dokumenta, gde svaki pasus imadrugačije poravnanje.

Tag <BR> određuje da Web pretraživač zaustavi postavljanje teksta i drugih elemenata utrenutnu liniju i da počne novu liniju u prozoru Web pretraživača. Ova oznaka je korisnaza odvajanje kratkih redova teksta, kao što je tekst adrese ili pesme. Za razliku od mnogihHTML tagova, tag <BR> nema krajnji tag.

Tag <BR> je, takođe, koristan za povećanje količine prostora između elemenata na Webstranici. Na primer, može da se koristi ovaj tag da bi se dodala još jedna prazna linijaizmeđu dva pasusa. Svaki tag <BR> će stvoriti dodatnu liniju prostora.


Web pretraživači obično ignorišu neke dodatne prostore kada se unosi tekst za Web strani-cu. Ako korisnik želi da uključi dodatne prazne prostore na Web stranici, onda bi trebalo dakoristi kôd. Ubacivanje praznih prostora je korisno za uvlačenje prve linije pasusa(slika 8.5).


Razmaci su, takođe, korisni za odvajanje elemenata na Web stranici, kao što su slike. Naprimer, ubacivanje praznog prostora između dve slike koje stoje jedan uz drugu, može

168 Multimedija

da spreči da se slike pojavljuju kao jedna velika slika. Kôd stvara prostor bezprekida. Kucanjem umesto da se kuca razmak između dve reči će sprečiti da rečibudu odvojene kada Web pretraživač završava tekst i pokušava da ga uklopi u prozor. Ovoosigurava da će se dve reči uvek pojaviti u istoj liniji.

Naslovi (headings) mogu da pomognu da se organizuju informacije na Web stranici. Ko-risnici mogu da pregledom naslova na Web stranici brzo pronađu informacije od interesa.

Postoji šest nivoa naslova koji mogu da se koriste. Nivo 1 (<H1>) je najveći, a nivo 6

(<H6>) je najmanji (slika 8.6). Nivoi <H1>, <H2> i <H3> se često koriste za naslove Webstranica i naslove poglavlja, dok su nivoi <H5> i <H6> korisni za informacije o ograničavanjuodgovornosti, kao i za autorske informacije. Nivo <H4> je obično iste veličine kao i glavnitekst na Web stranici. Korišćenje naslova u 6 nivoa će pomoći da korisnici razumejustrukturu Web stranice. Da bi se izbegla konfuzija, ne bi trebalo koristiti više od tri različitanivoa naslova na jednoj Web stranici.


Web pretraživači, obično, prikazuju naslove masnim (bold) tekstom sa praznom linijomiznad i ispod naslova. U većini Web pretraživača, uobičajeno je da su naslovi poravnati polevoj margini. Atribut ALIGN omogućava da se promeni poravnanje naslova (slika 8.7).


Opšti oblik taga za naslov (slika 8.6) je:

<Hn> Naslov na nivou n </Hn>

HTML/HTML5 169

gde n predstavlja nivo na kome se naslov nalazi. Opšti oblik taga za naslove (slika 8.7) je:

<h1 align="left">Naslov 1. nivoa (UZ LEVU MARGINU)</h1>

<h2 align="center">Naslov 2. nivoa (CENTRIRAN)</h2>

<h3 align="right">Naslov 3. nivoa (UZ DESNU MARGINU)</h3>

gde broj predstavlja nivo na kome se naslov nalazi.

Web pretraživač obično ignoriše blanko linije i razmake koji se dodaju kada se unosi tekstu Web stranicu. Tag <PRE> nalaže Web pretraživaču da zadrži razmak koji se ukucavaunutar tekst editora ili tekst procesora (slika 8.8).


Web pretraživači prikazuju preformatirani tekst u monospace fontu, kao što je Courier.Ova vrsta fonta je takva da svaki znak zauzima istu količinu prostora. Kada se pre-formatira tekst, Web pretraživač će prikazati tekst sa tačnim razmacima koji su unetii neće "razvlačiti" tekst kako bi se na "silu" popunio prozor unutar Web pretraživa-ča. Preformatirani tekst je koristan za kreiranje jednostavnih tabela.

Dodavanje komentara na Web stranici je korisno kada autor želi da se podseti daažurira deo teksta ili da pokaže zašto je koristio određenu oznaku. Komentar mora dabude okružen oznakama <!- i ->. Web pretraživači će ignorisati informacije između ovihoznaka i sprečavaće komentare da se pojavljuju na Web stranici. Trebalo bi imati na umuda će korisnici koji gledaju HTML kôd moći da čitaju komentare "iza" Web stranice. Evoprimera određenog koda:

<pre>

Posada: 2 <!- Ovo je komentar!!!! ->

Duzina: 12,25m

Razmah krila: 9,88m

Visina: 4,3m <!- Da li je dobra visina? ->

Povrsina krila: 19,5m2

</pre>

HTML standard omogućava kodiranje znakova za dodavanje specijalnih karaktera i/iliznakova na Web stranicu (slika 8.9). Ovo omogućava da se uključuju znakovi koji se nepojavljuju na tastaturi, kao što su matematički simboli. Kada se dodaje poseban karakter,za njega bi trebalo navesti broj koda ili ime koda. Broj koda ili brojčani kôd se sastojiod zagrada, broja znaka, broja karaktera i zareza. Ime koda se sastoji od zagrada, nazivakaraktera i zareza. Kodiranje znakova je korisno za dodavanje znakova koji se koriste za

170 Multimedija

izradu Web stranica, kao što su <, >, " i &, jer Web pretraživači mogu pogrešno protu-mačiti ove likove. Na primer, Web pretraživači mogu da protumače znak < kao početaktaga.


Trebalo bi imati na umu da će pojava specijalnih znakova, dodatih na Web stranicu,zavisiti od konfiguracije Web pretraživača korisnika i instaliranih fontova na korisnikovomračunaru.

8.2. HTML i tekst

Sledi kratka priča o tekstu, njegovom uređenju, biranju i definisanju određenih fontova,kao i odgovarajućih lista za nabrajanje unutar željene Web stranice.

Da bi se naglasio tekst na Web stranici, korisnik će možda da ga podeblja (Bold), zakosi(Italic), podvuče (Underline) ili "precrta" (Strike), kao što je prikazano na slici 8.10.


Oznaka <B> omogućava ispisivanje "masnih" ili podebljanih slova, dok oznaka <I> omo-gućava ispisavanje zakošenog teksta (kurzivom). Podebljani i zakošeni tekst su korisni zauvođenje novih termina i isticanje važnih fraza na Web stranici.

Oznaka <U> podvlači tekst. Trebalo bi biti obazrivi prilikom podvlačenja teksta, jer ko-risnici mogu ovakav tekst da zamene za link. Oznaka <STRIKE> "postavlja" liniju kroztekst (precrtava tekst). Ova oznaka je korisna za prikazivanje promena u informacijamana Web stranici. Na primer, precrtavanje prethodnih cena je efikasan način da se pokažeda je cena bila smanjena.

HTML/HTML5 171

Oznaka <SUP> omogućava da se kreira stepen (eksponent) na Web stranici. Tekst ste-pena ili eksponenta se pojavljuje nešto iznad glavnog teksta na Web stranici. Oznaka<SUB> omogućava da se kreira indeks na Web stranici. Tekst indeksa se pojavljuje neštoniže od glavnog teksta na Web stranici (slika 8.11).


Eksponenti i indeksi su idealni za prikazivanje matematičkih jednačina, hemijskih formula,naučnih zapisa i fusnota. Web pretraživači mogu da prikazuju tekst indeksa i eksponentau manjoj veličini fonta, nego što je veličina glavnog teksta na Web stranici. Preporuka jeda se koristi dovoljna veličina glavnog fonta, kako bi se pravilno prikazali i videli i indeksii eksponenti.

Korišćenjem oznake <FONT> sa atributom <FACE> omogućena je promena fonta za jedandeo teksta na Web stranici. Može da se odredi novi font po imenu, kao što je Courier,ili prema vrsti, kao što je monospace. Ako se određuje font po imenu, onda bi trebaloda se navede više od jednog fonta u slučaju da prvi izbor nije dostupan na korisnikovomračunaru. Jedan od fontova, koje bi trebalo navesti, je "zajednički font" za sve računarei operativne sisteme, kao što je Arial, kako bi se povećala verovatnoća da će računarprikazati jedan od izabranih fontova (slika 8.12).


Iako ne postoji ograničenje po pitanju broja fontova koliko Web stranica može da podrži,korišćenje više fontova može da odvuče pažnju korisnika.

Atribut <SIZE> omogućava da se promeni veličina teksta na Web stranici. Povećanjeveličine teksta čini tekst lakšim za čitanje, a smanjenje veličine teksta omogućava dastane više informacija na ekranu (slika 8.13).

172 Multimedija


Upotreba atributa <SIZE> sa oznakom (tagom) <BASEFONT> omogućava da se promeniveličina celokupnog teksta na Web stranici. Korišćenjem atibuta <SIZE> sa oznakom<FONT> omogućava da se promeni veličina jednog dela teksta. Postoji 7 veličina slovakoje mogu da se koriste. Najmanja veličina fonta je 1, a najveća veličina je 7. Trebalobi imati na umu da korišćena veličina slova može da se ne pojavi onako kako korisnikočekuje na nekim računarima, budući da neki autori mogu podese svoje Web pretraživačeda prikazuju veličinu fonta kako im odgovara.

Menjanje boje celokupnog teksta ili nekog dela unutar Web stranice može da doprinesevizuelnom interesu raznih korisnika za Web stranicu. Korišćenjem atributa <TEXT> satagom <BODY> omogućeno je da se promeni boja kompletnog teksta na Web stranici. Ko-rišćenjem atributa <COLOR> sa tagom <FONT> omogućeno je da se promeni boja delateksta (slika 8.14).


Kada se menja boja teksta, mora da se navede ime ili heksadecimalna vrednost bojekoju korisnik želi da koristi. Heksadecimalna vrednost je kôd koji govori Web pretraži-vaču koju boju bi trebalo prikazati. Kôd se sastoji od znaka (#), a iza nje slede RGB

(red, green, blue) komponente boje. Postoji samo 16 boja koje mogu da se izaberu po

HTML/HTML5 173

imenu – aqua (#00FFFF) tirkizno plava; black (#000000) crna; blue (#0000FF) plava;fuchsia (#FF00FF) tirkizno roze; gray (#808080) siva; green (#008000) tamno zelena;lime (#00FF00) tirkizno zelena; maroon (#800000) bordo/braon; navy (#000080) marinplava; olive (#808000) maslinasto zelena; purple (#800080) ljubičasta; red (#FF0000)crvena; silver (#C0C0C0) srebrna; teal (#008080) plavo/zelena; white (#FFFFFF) bela;yellow (#FFFF00) žuta.

Atribut <BGCOLOR> omogućava da se promeni boja pozadine Web stranice. Kada se menjaboja pozadine, mora da se navede ime ili heksadecimalna vrednost boje koju autor želi dakoristi (slika 8.15).


Trebalo bi odabrati boju pozadine koja "radi" dobro sa bojom teksta. Na primer, crvenitekst na plavoj pozadini može biti težak za čitanje.

Promena margina unutar Web stranice omogućava autoru da podesi veličinu prostora kojise pojavljuje između sadržaja stranice i ivica prozora Web pretraživača (slika 8.16). Ovomože da poboljša izgled Web stranice.


Po pravilu, većina Web pretraživača prikazuje Web stranicu sa marginama čija je vred-nost oko 10 piksela. Atributi LEFTMARGIN, RIGHTMARGIN, TOPMARGIN i BOTTOMMARGINomogućavaju autoru da promeni margine koje se pojavljuju kada se Web stranica. Oviatributi nisu deo HTML standarda, ali su podržani od strane većine Web pretraživača.

Korišćenjem oznaka (tagova) <TT>, <CODE>, <KBD> ili <SAMP> omogućen je prikaz tekstana Web stranici u monospace fontu. Reč je o vrsti fonta, kao što je Courier, gde svaki

karakter zauzima istu veličinu prostora (slika 8.17).

174 Multimedija


Oznaka <TT> je najčešće korišćena oznaka za prikazivanje teksta u monospace fontu. Ovaoznaka je korisna za vizuelno odvajanje reči ili fraza koje korisnik želi da naglasi, ali kojenemaju određenu svrhu, kao što su uputstva.

Ako tekst ima specifičnu namenu, onda bi trebalo koristiti tagove <CODE>, <KBD> ili<SAMP> kako bi se prikazao tekst u monospace fontu. Oznaka <CODE> se obično koristiza tekst koji predstavlja računarski kôd. Oznaka <KBD> je korisna za isticanje teksta kojebi trebalo da korisnici kucaju. Oznaku <SAMP> bi trebalo koristiti za prikazivanje tekstaprimera ili rezultata, kao što je izlaz iz računarskog programa. Uobičajen monospace fontje Courirer New.

Kod nekih Web pretraživača moguće je primeniti dodatno formatiranje teksta koji koristi<CODE>, <KBD> ili <SAMP> tagove. Na primer, Web pretraživači mogu da podebljaju (bold)tekst koji koristi <KBD> oznaku.

Oznaka <BLOCKQUOTE> omogućava da se kreira tekstualni blok na Web stranici. Teks-tualni blok je deo teksta koji je odvojen od ostatka teksta na Web stranici (slika 8.18).


Tekstualni blokovi se, obično, pojavljuju uvučeni sa obe strane Web stranice i često sekoriste za prikazivanje dugih ili važnih citata. Ne postoji ograničenje u iznosu teksta koji

HTML/HTML5 175

može biti uključen u tekstualni blok. Ako je tekstualni blok veoma dug, onda bi trebalorazmisliti o korišćenju taga <P> kako bi se "razbio" tekst u tekstualnom bloku na paragrafeili pasuse.

Numerisana lista je korisna za prikazivanje stavki koje se nalaze u određenom redosledu,kao što je set instrukcija ili sadržaj.

Kada se pravi numerisana ili uređena lista, postoje dve glavne oznake koje moraju da sekoriste. Oznaka <OL> označava početak uređene liste i oznaka <LI> označava početaksvake stavke u listi. Iako ne postoji ograničenje po pitanju veličine teksta stavki u listi,preporuka je da se svaka stavka ograniči na jedan ili dva reda teksta. Ovo će poboljšatičitljivost spiska.

Slika 8.19. Prikaz ekrana na osnovu dokumenata HTML-020.html, HTML-021.html

i HTML-022.html

Uobičajeno je da se brojevi (1, 2, 3, . . .) pojavljuje pored svake stavke u numerisanojlisti. Atribut <TYPE> omogućava da se promeni način obeležavanja stavki u listi. Nakonkreiranja uređene liste, korisnik može da doda novu stavku u listu u bilo kom trenutku. Webpretraživač će automatski da prenumeriše stavke unutar liste.

Atributi START i VALUE omogućavaju da se prilagode "naručene" liste. Atribut START

omogućava da se započne numerisanje liste brojem različitim od broja 1. Atribut VALUEomogućava da se "preskoče" dodeljeni brojevi i da se dodeli novi broj stavki u listi.

Nenumerisane ("neuređene") liste su korisne kada je potrebno prikazati stavke beznekog posebnog reda, kao što su liste proizvoda ili Web sajtova. Kada se pravi neuređenalista, postoje dve glavne oznake koje moraju da se koriste. Oznaka <UL> označava početakjedne neuređene liste i oznaka <LI> označava početak svake stavke unutar liste.

Slika 8.20. Prikaz ekrana na osnovu dokumenata HTML-023.html i HTML-024.html

Da bi se poboljšala čitljivost neuređene liste, trebalo bi pokušati da se svaka stavkaograniči na jedan ili dva reda teksta. Web pretraživači, obično, počinju da "ređaju" stavkeu neuređenim listama od leve ivice prozora Web pretraživača.

176 Multimedija

Uobičajeno je da Web pretraživač obeležava svaku stavku u nenumerisanoj listi ispu-njenom kružnicom. Atribut TYPE omogućava da se promeni stil obeležavanja stavki. Naraspolaganju su tri stila – ispunjena kružnica (disc), prazna ili neispunjena kružnica (circle)i ispunjen kvadrat (square).

Ugnežđena lista je lista unutar liste. Ova vrsta liste omogućava autoru da pruži dodatneinformacije o određenoj stavci unutar listi. Na ovaj način mogu da se kreiraju liste sanekoliko nivoa stavki.


Da bi se kreirala ugnježđena lista, trebalo bi dodati novu uređenu ili neuređenu listu unutarpostojeće liste na Web stranici. Ovo je korisno kada bi trebalo samo neke stavke numerisatiili ih složiti po određenom redosledu. Formatiranje je identično kao i formatiranje uređenihili neuređenih listi.

Lista definicija (lista za rečnike) prikazuje uslove i njihove definicije. Ovaj tip liste jeidealan za rečnike. Postoje tri glavne oznake koje se koriste za kreiranje liste definici-je. Oznaka <DL> označava početak liste definicije, oznaka <DT> označava početak svakogtermina u listi i oznaka <DD> označava početak svake definicije u listi. Web pretraživačiautomatski poravnava termine u listi definicije po levoj margini. Definicije se pojavljujuispod termina i uvučene su u odnosu na termine (slika 8.22).


Unutar definicione liste ne moraju da se navode oznake <DT> i <DD> naizmenično. Akoje potrebno navesti nekoliko termina za jednu definiciju, onda može da se koristi oznaka<DT> nekoliko puta u jednom redu. Slično tome, ako je potrebno specificirati nekolikodefinicija za jedan termin, onda može da se koristi oznaka (tag) <DD> nekoliko puta uredu.

HTML/HTML5 177

8.3. HTML i slike i/ili fotografije

Sledi kratka priča o slikama ili fotografijama, njihovom smeštanju unutar Web stranice,njihovom međusobnom pozicioniranju i pozicioniranju u odnosu na druge elemente, odgo-varajućim formatima i podešavanjima veličine.

Oznaka <IMG> omogućava da se doda slika u Web stranicu. Slike predstavljaju linijskeelemente, što znači da će Web pretraživači automatski da prikažu slike u okviru teksta, ane u novoj liniji.


Ima mnogo mesta koja "nude" slike koje mogu da se koriste na Web stranicama, kaošto su Web sajtovi i "skladišni prostor" na eksternim računarima. Takođe, može da koristiskener za skeniranje slike i smeštanje u računar ili može da se koristi program za uređivanjeslika u cilju kreiranja sopstvenih slika. Trebalo bi voditi računa oko dozvola za korišćenjebilo koje slike koju autor nije kreirao sâm. Slike povećavaju potrebno vreme da se prikažesadržaj Web stranice na monitoru. Kad god je moguće, trebalo bi koristiti slike manjerezolucije, jer se ove slike učitavaju mnogo brže. Slike koje se dodaju u Web stranice bitrebalo da budu u GIF ili JPEG formatu.

Neki korisnici imaju Web pretraživače koji ne mogu da prikažu slike, dok drugi isključujuprikaz slika radi bržeg pregledanja Web stranica. Trebalo bi koristiti atribut <ALT> kakobi se prikazao propratni tekst, ako se određena slika ne pojavi na Web stranici. To će datikorisnicima informacije koje slike nisu prikazane.


178 Multimedija

Korišćenjem atributa BACKGROUND unutar oznake (taga) <BODY> omogućeno je da se doda

pozadinska slika za Web stranicu. Pozadinska slika je mala slika koja se ponavlja kakobi se popunila celokupna Web stranica.

Prilikom dodavanja pozadinske slike, trebalo bi koristiti sliku koja stvara zanimljive poza-dinske "efekte", bez "gušenja" sadržaja Web stranice. Dobra pozadinska slika bi trebaloda ima nevidljive ivice, tako da kada se slika ponavlja prilikom ispunjavanja Web stranice,formiraće besprekornu pozadinu.


Budući da slike u pozadini (pozadinske slike) povećavaju vreme koje je potrebno dase Web stranica pojavi na ekranu (monitoru), trebalo bi korisiti pozadinske slike maleveličine. Trebalo bi se uveriti i da pozadinska slika ne utiče na čitljivost Web stranice. Možeda se desi da će autor morati da promeni boju teksta kako bi se lakše čitalo unutar Webstranice sa postavljenom pozadinskom slikom.

Atribut BORDER omogućava da se doda granični okvir slici na Web stranici. Graničniokvir ili okvir može sliku da ističe i može da poboljša izgled Web stranice.

Kada se dodaje granični okvir, mora da se navede "debljina" (širina linije) okvira u pikse-lima. Okvir koji se dodaje bi trebalo da bude dovoljno veliki da bude vidljiv, ali i dovoljnomali da ne skreće pažnju sa same slike.


Atribut BORDER je, takođe, koristan za uklanjanje graničnog okvira koji se automatskipojavljuje oko linka slike (image link). Da bi se uklonio okvir sa linka slike, trebalo biodrediti "debljinu" graničnog okvira na 0 piksela. Nakon uklanjanja okvira, trebalo bi seuveriti da li sama slika još uvek predstavlja link (vezu), jer mnogi korisnici očekuju da"slikoviti" linkovi prikazuju okvire.

HTML/HTML5 179

Atribut ALIGN omogućava da se tekst "prelomi" oko slike. Ovo može pomoći da Webstranica dobije profesionalni izgled. Ako je autor već koristio atribut ALIGN da uskladisliku sa tekstom, onda ne može da koristi ovaj atribut i za prelom teksta.

Kada se vodi računa o prelomu teksta oko slike, trebalo bi koristiti vrednosti left i right,kako bi se definisalo kako će se tekst urediti u odnosu na sliku. Vrednost left ostavlja slikuna levoj strani teksta, a vrednost right ostavlja sliku na desnoj strani teksta.


Ako autor želi da se samo neki tekst "prelomi" oko slike, onda bi trebalo da koristi atributCLEAR sa oznakom <BR> za obeležavanje gde bi trebalo zaustaviti prelom teksta okoslike. Trebalo bi koristiti vrednosti left, right ili all kako bi se definisalo kako će tekstda nastavi da se pruža, kada leva, desna ili obe margine budu "oslobođene" od prisustvaslike.


Trebalo bi koristiti atribut ALIGN sa vrednostima top, middle ili bottom kako bi se povertikali uskladili slika i tekst. Uobičajeno je da Web pretraživači poravnavaju donji deoslike sa donjom linijom teksta.

Ako postoji više od jedne slike na istoj liniji, onda može da se desi da određene usklađivanjene ispadne onako kako je autor očekivao. Kada se ovako nešto radi, onda bi Web stranicutrebalo pogledati u par različitih Web pretraživača, kako bi se videlo na šta to liči. Ako jepodešen prelom teksta slike, onda pada u vodu poravnavanje slike i teksta.

180 Multimedija


Pored pomenutih vrednosti (top, middle i bottom) postoje i sledeće vrednosti texttop,absmiddle i absbottom, koje imaju isto dejstvo kao pomenute vrednosti, ali ove novo-pomenute vrednosti nisu sastavni deo HTML standarda. Trebalo bi pomenuti da vrednostitexttop, absmiddle i absbottom nisu podržane od strane svih Web pretraživača.

Uobičajeno je da većina Web pretraživača prikazuje samo nekoliko piksela praznog pros-tora (beline) između slika i drugih elemenata Web stranice. Povećanje veličine praznog

prostora oko slike može da poboljša ukupni izgled Web stranice.

Dodavanje praznog prostora (beline) između slike i okolnog teksta će omogućiti lakšečitanje teksta. Povećanje količine praznog prostora između dve slike, koje se pojavljuju"rame uz rame", će sprečiti slike da se pojavljuju kao jedna velika slika.


Atribut HSPACE omogućava da se doda prazan prostor (belina) sa leve i desne straneslike. Atribut VSPACE omogućava da se doda prazan prostor iznad i ispod slike. Ne može dase dodaje prazan prostor sa samo jedne strane slike koristeći atribute HSPACE i VSPACE. Dabi se dodao prazan prostor samo na jednoj strani slike, onda bi trebalo promeniti samusliku unutar programa za obradu slika.

Oznaka <HR> omogućava da se doda horizontalna linija za razdvajanje unutar Webstranice i reč je o liniji koja vizuelno razdvaja delove Web stranice. Na primer, moždaće autor da poželi da koristi horizontalnu liniju da razdvoji delove teksta ili pasuse odzaglavlja na Web stranici.

HTML/HTML5 181


Trebalo bi izbegavati "preteranu" upotrebu horizontalnih linija za razdvajanje unutar Webstranice, jer to može da bude zbunjujuće i može da proizvede da Web stranica bude teškočitljiva. Preporuka je da se ne stavlja više od jedne horizontalne linije za razdvajanje posvakom ekranu.

Uobičajeno je da "debljina" (širina) dodate horizontalne linije za razdvajnaje bude 2 pik-sela. Atribut SIZE omogućava da se promeni vrednost "debljine" (širine) horizontalnelinije.

Ako autor ne želi da se horizontalna linije prostire, po širini, preko cele Web stranice,onda bi trebalo koristiti atribut WIDTH, koji omogućava da se definiše dužina horizontalnelinije za razdvajanje. Trebalo bi navesti novu dužinu horizontalne linije za razdvajanje kaoprocentualnu vrednost celokupne širine Web stranice unutar prozora Web pretraživača.

Kreiranje liste koja koristi slike umesto uobičajenih markera (bullets) omogućava daliste postanu dopadljive unutar Web stranice. Na primer, autor će možda poželeti da dodamanju verziju logoa firme ispred svake stavke na listi proizvoda.

Slika koja bi se koristila za listu trebalo bi da bude mala slika, koja će se uklopiti uzsvaku stavku na listi. Da bi se kreirale ovakve slike, trebalo bi koristiti program za obraduslike, kao što su Adobe Photoshop ili GIMP. Kada se dodaje slika u listu umesto markera,trebalo bi koristiti atribut ALIGN sa vrednostima top, middle ili bottom koje definišu nakoji način se slike usklađuju sa tekstom unutar liste. Vrednost top poravnava vrh slike satekstom, vrednost middle usaglašava sredinu slike po visini sa tekstom i vrednost bottomporavnava donji deo slike sa tekstom.


Atributi HSPACE i VSPACE omogućavaju da se poveća veličina praznog prostora koji sepojavljuje između slika i teksta (predmeta) u iisti. Ovo može da poboljša izgled i čitljivost

182 Multimedija

liste. Kada se koriste ovi atributi, onda bi trebalo definisati veličinu dodatnog praznogprostora u pikselima.

Ako slika koju bi trebalo dodati u Web stranicu nije u GIF ili JPEG formatu, onda bi jetrebalo pretvoriti u pomenute formate. Formati GIF i JPEG su najpopularniji formati zaslike na Internetu.

Slile u GIF (Graphics Interchange Format) formatu su ograničene na 256 boja i čestose koriste za prikazivanje logoa, banera i računarski generisanih "umetničkih dela". GIFslike podržavaju funkcije kao što su animacija (animation) i transparentnost (trans-

parency). GIF slike imaju ekstenziju .gif; na primer, logo.gif.

Slike u JPEG (Joint Photographic Experts Group) slike mogu da sadrže oko 16, 7 milio-na boja i često se koriste za fotografije i veoma velikih slika. JPEG slika može da sadržimilione boja, ali i dalje da zadrži malu veličinu, omogućavajući da se slika brzo prenesepreko Interneta. JPEG slike obično imaju ekstenziju .jpg; na primer, univerzitet.jpg.

Da bi se pretvorila slika GIF ili JPEG format, autoru je potreban program za obradu slike,kao što su GIMP ili Adobe Photoshop.

Definisanje veličine slike na Web stranici može da pomogne da se Web stranica po-javljuje na ekranu brže unutar aktivnog Web pretraživača. Da bi se definisala veličinaslike, najpre mora da se odredi veličina slike pomoću programa za obradu slika. Jednomkada se saznaju dimenzije slike u pikselima, onda upotrebom atributa WIDTH i HEIGHTmože da se definiše veličina slike.


Kada se definiše veličina slika na Web stranici, Web pretraživači mogu da odrede kolikoće prostora da zauzimaju na pripadajućoj Web stranici pre nego što se slike prebace naračunar. Ovo sprečava Web pretraživače da promene izgled Web stranice svaki put kadase slika prenosi na računar. Kao rezultat toga, korisnici mogu lako da pročitaju tekst naWeb stranici, dok se vrši transfer slike.

Atributi WIDTH i HEIGHT omogućavaju da se poveća veličina slike na Web stranici bezpovećanja veličine datoteke slike. Ovo omogućava da se uključuje velika slika na Web

HTML/HTML5 183

stranici bez povećanja potrebnog vremena za transfer Web stranice na računar. Poveća-njem veličine slike, određuje se nova veličina slike u pikselima ili u procentima prozoraWeb pretraživača. Trebalo bi izbegavati da slika bude prevelika, jer slika može da izgleda"zrnasto".

Kada se navodi nova veličina slike u pikselima, trebalo bi koristiti atribute WIDTH iHEIGHT. Da bi se izbeglo deformisanje ili iskrivljenje slike, odnos širine i visine slike bitrebalo da bude proporcionalan. Kada se navodi novu veličina slike kao procenat prozoraWeb pretraživača, onda ne mora da se navode vrednosti za širinu i visinu. Web pretraživačće automatski da izračuna drugu procentualnu vrednost kako bi se osiguralo da slika nebude iskrivljena ili deformisana.

Možda će autor želeti da smanji veličinu velike slike, kako bi zauzimala manje prostorana Web stranici. Smanjenje dimenzija slike smanjuje veličinu slike. Ovo omogućava da seslika prenese brže i da se brže pojavi na monitoru korisnikovog računara. Za ovo bi trebalokoristiti program za uređivanje slika, kao što je GIMP ili Adobe Photoshop, kako bi sesmanjila veličina slike.

Slika 8.34. Smanjenje veličine slike u programu Adobe Photoshop

Većina programa za uređivanje slika omogućava da se nova veličina slike navede u pikse-lima. Kada se odredi nova širina za sliku, program će automatski da izračuna visinu kakobi se zadržala proporcija celokupne slike. Nakon smanjenja veličine slike, trebalo bi novusliku sačuvati u novom fajlu, kako bi na računaru ostala i originalna slika. Ovo omogućavada zadržana originalna slika na računaru može i kasnije da se iskoristi, pa čak i ako suzahtevi drugačiji. Na primer, autor može da poželi da koristi originalnu sliku za stvaranjeumanjenih fotografija (thumbnail images).

Opsecanje ili odsecanje slike omogućava autoru da ukloni delove slike koji mu ne tre-baju. Ovo je korisno kada se želi da korisnik obrati pažnju na važan deo slike. Kada seizreže slika ili njen deo, veličina datoteke slike se smanjuje. Ovo omogućava da se slikabrže prenese i pojavi na ekranu.

Mnogi programi za uređivanje slika, kao što su GIMP i Adobe Photoshop, imaju alat kojimože da se koristi za odsecanje ili isecanje slike. Nakon odsecanja ili isecanja slike, trebalo

184 Multimedija

bi izmene snimiti u novom fajlu, da bi se sačuvala i originalna slika. Ovo omogućava dase zadrži originalna slika na računaru u slučaju da će originalna slika biti potrebna i unekom kasnijem trenutku. Čuvanje originalne slike na računaru, takođe, omogućava da seponovo opseca kasnije, ako je autor nezadovoljan rezultatima.

Slika 8.35. Opsecanje slike u programu Adobe Photoshop

Autor će možda želeti da pozadina GIF slike bude transparentna, tako da se pozadinauklopi u Web stranicu. Potreban je program za obradu slike, kao što je GIMP ili Adobe

Photoshop, da bi se napravila pozadina GIF slike transparentnom.


Da bi pozadina GIF slike bila transparentna, cela pozadina mora da sadrži samo jednuboju. Program za obradu slike će svaki piksel koji sadrži tu boju pretvoriti u transparentan

HTML/HTML5 185

ili providan. Ako je pozadina slike sa više boja (raznobojna), samo pikseli koji sadržedefinisanu boju će postati transparentni, što će učiniti da pozadina slike izgleda čudno.

8.4. HTML i linkovi i/ili veze

U ovom delu biće reči o linkovima ili vezama ka drugim Web stranicama, ka elementimaunutar tekuće Web stranice, ka slikama ili fotografijama, ka fajlovima, ka serverima, kaoi njihovom podešavanju.

Upotrebom oznake <A> može da se poveže tekst ili slika na Web stranici sa drugom Web

stranicom na Internetu. Kada korisnik izabere vezu ili link, sadržaj druge Web straniceće se pojaviti na ekranu. Trebalo bi se uveriti da tekst ili slika jasno pokazuje gde će vezaili link odvesti" korisnika.


Link može da odvede korisnike na Web stranicu unutar autorovog sajta ili na bilo kojustranicu na Internetu. Kada se kreira veza ka Web stranici koju nije autor napravio,određuje se aposlutna adresa URL (Uniform Resource Locator) Web stranice. ApsolutnaURL adresa je puna adresa Web stranice, kao što je http://www.singidunum.ac.rs. Ka-da se kreira vezu ka Web stranici na sopstvenom sajtu, onda bi trebalo koristiti relativnuURL adresu.

Trebalo bi izbegavati stavljanje dva teksta linkova rame uz rame na Web stranici, jer koris-nici mogu teško da raspoznaju da se dai o dve odvojene veze (linka). Kada se napravi vezaili link u obliku slike, trebalo bi imati na umu da neki korisnici ne vide slike unutar svogWeb pretraživača. Možda bi trebalo uključiti i dodatne odgovarajuće tekstualne linkoveza ovakve korisnike.

Možda će autor poželeti da uključi vezu (link) unutar svoje Web stranice, koja ćekorisnike "odvesti" do druge oblasti u istoj Web stranici. Ovo omogućava korisnicima dabrzo prikažu informacije od interesa. Na primer, možda će želeti da naprave sadržaj kojisadrži linkove ka različitim delovima dugih Web stranica.

Da bi se napravila veza na Web stranici, najpre bi trebalo imenovati oblast Web stranicekoju korisnici žele da brzo prikažu. Ova oblast se često naziva i sidro. Korišćenjem oznake<A> sa atributiom NAME imenuje se oblast Web stranice. Ime se zadaje i može da sadržisamo slova i brojeve.

186 Multimedija


Nakon što je imenovana oblast Web stranice, trebalo bi formirati link ili vezu ka toj ob-lasti. Oznaka <A> sa atributom HREF omogućava da se kreira veza ka specifičnoj oblastitekuće Web stranice. Kada korisnik odabere link, naznačena oblast Web stranice će sepojaviti na ekranu. Kada se kreira više veze u okviru iste Web stranici, trebalo bi proveritida li je svakoj oblasti dodeljen drugi naziv ili drugačije ime.

Ako autor želi da uključi veliku sliku na svoju Web stranicu, trebalo bi da razmisli o krei-ranju veze koja će korisnike "odvesti" do slike. To će dati korisnicima pristup slikamabez povećanja potrebnog vremena za učitivanja Web stranice.


Kreiranje linka ka slici je korisno kada je autor uključio umanjene fotografije (thumbnail

images) u svoju Web stranicu. Umanjene fotografije (thumbnails) predstavljaju male ver-zije slika koje korisnici mogu da odaberu kako bi se prikazale veće slike. Ovo omogućavakorisnicima da odluče da li žele da čekaju veću sliku da se prenese do njihovog računara.

Stvaranje linka na sliku je, takođe, korisno kada autor želi da uključi sliku koju neki Webpretraživači ne mogu da prikažu, kao što je BMP (Windovs Bitmap) slika. Kada korisnikodabere link, slika će se pojaviti u programu na korisnikom računaru.

Kada se kreira veza ili link ka slici, trebalo bi obezbediti dodatni opis slike, uključujući iveličinu "povezane" slike u kilobajtima (Kb). Ovo pomaže korisnicima da procene kolikodugo će trebati da se povezana slika učita u njihov računar.

HTML/HTML5 187

Kreiranje linka, kojim korisnici mogu da odaberu određenu datoteku za prenos na svojeračunare, omogućava da fajlovi, kao što su dokumenti i programi, budu na raspolaganjukorisnicima.

Kada se kreira veza ka datoteci ili fajlu, mora da se navede lokacija datoteke na raču-naru. Ako je datoteka sačuvana u istom direktorijumu kao i Web stranica, onda bi trebalosamo navesti ime datoteke (na primer, proba.exe). Ako je datoteka sačuvana u poddi-rektorijumu, onda bi trebalo navesti i ime poddirektorijuma i naziv datoteke (na primer,programi/proba.exe).


Kada korisnik izabere link ka datoteci, korisnikov Web pretraživač će pokušati da prikažesadržinu izabrane datoteke (fajla). Ako pretraživač ne može da prikaže datoteku, onda ćepokušati da otvori datoteku u odgovarajućem programu na korisnikovom računaru. Akokorisnik nema program koji može da prikaže ili pokrene datoteku, Web pretraživač će datikorisniku mogućnost da sačuva datoteku na svom računaru.

Uključivanje opisa, pored linka ka fajlu, pomaže korisnicima odluče da li žele da učitajuili prenesu datoteku. Opis treba da sadrži vrstu i veličinu datoteke. Takođe bi trebaloobezbediti i vezu (link) koja će "odvesti" korisnike na Web lokaciju na kojoj mogu da sepronađu i dobiju programi koji će prikazati ili pokrenetu datoteku.

Određena Web stranica može da sadrži link koji omogućava korisnicima da pošalju e-mail

poruku. Kreiranje linka ka elektronskoj pošti je korisno kada autor želi da korisnici moguda pošalju pitanja i da dobiju povratne informacije, kojima mogu da poboljšaju izgled svojeWeb stranice.


Kad se kreira e-mail link, mora da se navede e-mail adresa osobe koja bi trebalo da primiporuke od strane korisnika. Na primer, autor će, možda, želeti da napravi e-mail link kojiomogućava korisnicima da kontaktiraju njega ili nekog od zaposlenih.

188 Multimedija

Kada se koristi tekst za e-mail link, trebalo bi proveriti da li tekst jasno ukazuje na to koće da primi e-mail poruke. Ovo pomaže korisnicima da utvrde da li su kontaktirali pravuosobu.

Ako se koristi slika za e-mail link, trebalo bi postaviti i odgovarajući tekstualni link tekstaza korisnike koji ne mogu da vide slike. Neki korisnici isključuju prikaz slika radi bržegpregledanja Weba, dok drugi koriste Web pretraživače koji ne mogu da prikažu slike.

Određena Web stranica može da sadrži vezu koja će korisnike "odvesti" do FTP (File

Transfer Protocol) sajtova. FTP sajtovi su namenjeni za čuvanje datoteka koje korisnicimogu da preuzmu.

Kada se kreira veza sa FTP sajtom, mora da se navede puna adresa sajta, počevši saftp://. Na primer, da bi se stvorila vezu sa ftp.dvd.com sajtom, moralo bi da se ukucaftp://ftp.dvd.com.

Kada korisnik izabere link ka eksternom (FTP) sajtu, glavni direktorijum sajta se, obično,pojavljuje na ekranu. Korisnik može, zatim, da se kreće kroz sajt kako bi pronašao fajlovekoji ga zanimaju. U većini slučajeva, korisnici mogu da anonimno posete FTP lokacije, štoznači da im ne treba korisničko ime i lozinka kako bi posetili ove sajtove. Ako FTP sajtzahteva korisničko ime i lozinku, onda bi trebalo ove informacije uključiti u link.

Atribut TARGET omogućava da se otvori neki link u novom prozoru. Prozor koji sadržilink će ostati otvoren, omogućavajući korisnicima da se brzo vrate na Web stranicu, kadazavrše pregled povezane informacije.


Prilikom otvaranja linka u novom prozoru, trebalo bi navesti ime za prozor pomoću atributaTARGET. Ime koje se odredi će identifikovati prozor Web pretraživačima, ali se ime nećepojaviti u prozoru. Da bi se nekoliko linkova otvorilo u istom prozoru, trebalo bi navesti

HTML/HTML5 189

isto ime za svaki link. Imena prozora vode računa o velikim i malim slovima (razlikuju ih),tako da bi trebalo koristiti ista velika i mala slova za svako ime.

Da bi se veza (link) otvorila u novom, neimenovanom prozoru, trebalo bi koristiti vrednost_blank u atributu TARGET. Svaki link koji koristi _blank vrednost će se otvoriti u drugomprozoru.

Atributi LINK, VLINK i ALINK omogućavaju da se promeni boja linkova na Web stranici.Trebalo bo koristiti atribut LINK da se promeni boja linkova koje korisnici još nisu izabrali,a atribut VLINK za promenu boje linkova koje su korisnici prethodno već izabrali. AtributALINK omogućava da se promeni boja aktivnih linkova. Aktivan link je link koji korisniktrenutno bira.

Kada se menja boja linkova, trebalo bi voditi računa o tome da se biraju različite bojeza "neaktivirane", "aktivirane" i aktivne linkove. Takođe bi trebalo voditi računa da seizabrane boje dobro vide u odnosu na boju pozadine Web stranice.


Trebalo bi voditi računa i o tome da izabrane boje mogu da se prikažu na neodgovarajućinačin na nekim računarima, jer neki korisnici mogu da setuju svoje Web pretraživače da"premoste" izabrane boje.

Korišćenjem atributa ACCESSKEY unutar oznake ili taga <A> mogu da se stvaraju prečice

na tastaturi za linkove. Prečice na tastaturi omogućavaju korisnicima da izaberu vezebez upotrebe miša.

Kada se kreira prečica za vezu, trebalo bi navesti slovo ili broj koji bi trebalo koristiti zaprečicu. Takođe bi trebalo da sadrži opis koji će omogućiti korisnicima da znaju kako dakoriste prečicu.

Da bi se izabrala veza pomoću prečice na tastaturi, korisnik će držati pritisnut tasterAlt dok pritiska navedeno slovo ili broj. Korisnik može, zatim, da pritisne taster Enter

kako bi posetio link. Kreirane prečice na tastaturi za veze još uvek ne rade na Macintosh

računarima, jer će Macintosh korisnici, verovatno, koristiti taster Command pre negotaster Alt, kada su podržane prečice.

Prečice sa tastature, koje su kreirane za linkove, će "nadjačati" prečice na tastaturi zaWeb pretraživače. Na primer, ako se napravi prečica Alt + F na tastaturi, korisnici višeneće moći da koriste Alt+ F da bi prikazali meni File u Internet Explorer-u.

190 Multimedija


Korisnici mogu da se kreću kroz linkove na Web stranici korišćenjem Tab tastera. Uobi-čajeno je da se, na ovaj način, korisnici kreću po linkovima po redosledu koji je kreiranu HTML kodu. Promenom redosleda kretanja po linkovima pomoću Tab tastera može dapomogne korisnicima da izaberu linkove po nekom logičkom redu.


Korišćenjem atributa TABINDEX može da se promeni redosled biranja linkova pomoćutastera Tab unutar Web stranice. Da bi se uključila veza (link) u redosled biranja pomoćuTab tastera, trebalo bi linku dodeliti TABINDEX vrednost između 1 i 32.767. Da bi seisključila veza iz Tab naloga, trebalo bi dodeliti negativnu TABINDEX vrednost (na primer,TABINDEX="-1").

Kada korisnici koriste taster Tab za biranje linkova, redosled počinje sa linkom koji imanajnižu vrednost, a završava sa linkom koji ima dodeljenu najvišu vrednost. Ako dva linkaimaju istu vrednost, onda će se aktivirati veza koja se prva pojavljuje u HTML kodu.

Atribut TABINDEX može da se koristi i sa drugim HTML elemenatima, kao što su slike iforme ili sekcije.

8.5. HTML i tabele

Tabele su sastavni deo skoro svake Web stranice i u ovom delu biće reči o njima – kakose kreiraju, podešavaju, povezuju, kako im se spajaju "ćelije", kako im se menjaju boje,kako se podešava vidljivost graničnih linija ili okvira i slično.

HTML/HTML5 191

Kreiranjem tabele omogućava se uredno prikazivanje informacija na Web stranici, kaošto su finansijski podaci ili cenovnik.


Kada se pravi tabela, moraju da se koriste oznake ili tagovi zakreiranje redova i ćelijau tabeli. Oznaka <TR> omogućava kreiranje redova i oznake <TH> i <TD> omogućavajukreiranje ćelija.

Postoje dve vrste ćelija koje mogu da se kreiraju u tabeli. Oznaka <TH> omogućava dase kreiraju ćelije zaglavlja i oznaka <TD> omogućava da se kreiraju ćelije podataka. Ćelijezaglavlja obično sadrže tekst koji opisuje podatke u redu ili koloni, dok ćelije podataka,obično, sadrže glavne informacije u tabeli. Tekst u ćelijama zaglavlju je obično podebljan(bold) i centriran unutar ćelija.

Atribut BORDER omogućava da se dodaju granične linije u tabeli. Granična linija ćerazdvojiti svaku ćeliju u tabeli, što dovodi do lakšeg čitanja podataka u tabeli.


Kada se dodaje granična linija u tabelu, trebalo bi definisati "debljinu" ili širinu linije u pik-selima. Navedena "debljina" linije će uticati samo na spoljašnju graničnu liniju tabele. Dabi se promenila "debljina" granične linije između ćelija u tabeli, trebalo bi koristite atributCELLSPACING.

Granične linije tabele se obično pojavljuju kao sive linije u Web stranici. Ako je promenje-na boja pozadine Web stranice, može da se desi da Web pretraživači prikazuju graničnuliniju tabele u istoj boji kao i pozadina. Trebalo bi koristiti atribut BORDERCOLOR za de-finisanje drugačije boje granične linije tabale. Iako je atribut BORDERCOLOR podržan odstrane većine Web pretraživača, nije deo HTML standarda.

Ako se koristi tabela za organizovanje izgleda Web stranice, onda je poželjno da se graničnelinije privremeno vide, kako bi moglo da se vidi gde su smešteni tekst, slike i drugi ele-menti. Lako mogu da se uklone granične linije kada je rad na Web stranici završen. Oznaka<CAPTION> omogućava da se doda naslov tabeli. Naslovi su korisni za sumiranje infor-macija u tabeli.

192 Multimedija

Po pravilu, većina Web pretraživača će prikazati centrirane naslove iznad tabele. Ovo jekorisno za prikazivanje naslova za tabelu. Korišćenje atributa ALIGN sa vrednošću bottom

omogućava da se naslov pojavljuju ispod tabele. Prikazivanje naslova ispod tabele je ko-risno kada autor želi da dostavi dodatne informacije o tabeli ili kada želi da sumira podatkeu tabeli.


HTML standard određuje da ne bi trebalo dodavati više od jednog naslova tabeli na Webstranici. Dok neki Web pretraživači podržavaju korišćenje više tagova <CAPTION> sa jed-nim tagom <TABLE>, rezultati su različiti u različitim Web pretraživačima.

Oznake <COLGROUP> i <COL> omogućavaju da se grupišu kolone u tabeli. Grupisanjekolona deli tabelu u vertikalne sekcije, omogućavajući da se formatira jedna ili više kolonaćelija u isto vreme.

Upotrebom oznake <COLGROUP> se vrši kreiranje strukturnih grupa kolona koje razdvajajutabelu u logične celine. Na primer, može da se koristi jedna grupisana kolona ćelija zanaslove, dok druga strukturna kolona grupu služi za smeštaj ostalih kolona u tabeli.

Oznaka <COL> omogućava da se kreiraju nestrukturne grupe kolona, koje razdvajaju tabeluu sekcije bez definisanje strukture unutar tabele. Ovo je korisno kada sve kolone sadržeistu vrstu informacija.

Kada se naprave grupe kolona u tabeli, onda može da se pristupi njihovom formatiranju ioblikovanju. Na primer, može da se iskoristi atribut BGCOLOR unutar tagova <COLGROUP>

i <COL> kako bi se boja svim ćelijama u grupisanoj koloni.

Korišćenjem tagova <THEAD>, <TBODY> i <TFOOT> je omogućeno kreiranje grupisanih

redova u tabeli. Grupisani redovi dele tabelu u horizontalne sekcije, što omogućava brzoformatiranje više redova ćelija u isto vreme.

Oznaka <THEAD> omogućava da se kreira grupisani red zaglavlja (heading) u tabeli. Ovoje korisno za zaglavlja ili podnaslove koje bi trebalo oblikovati drugačije u odnosu na os-novne podatke u tabeli. Oznaka <THEAD> može samo jednom da se pojavi u tabeli.

Korišćenjem oznake <TBODY> je omogućeno kreiranje jedne ili više "glavnih" grupa utabeli. Ove grupe obično sadrže redove sa podacima u tabeli.

Oznaka <TFOOT> omogućava da se kreirate grupisani red podnožja (footer) u tabeli. Ovoje korisno za prikazivanje zbirnih podataka ili iznosa koji se pojavljuju na dnu tabele. Oz-naka <TFOOT> može samo jednom da se pojavi u tabeli.

HTML/HTML5 193

Atribut BGCOLOR omogućava da se doda boja u tabeli na Web stranici. Ovo može dapomogne da se ukaže na važne informacije u tabeli.


Boja može da se doda ćeliji (<TH> ili <TD>), grupisanoj koloni (<CELGROUP> ili <COL>),grupisanom redu (<THEAD>, <TBODY> ili <TFOOT>) ili celoj tabeli (<TABLE>).

Kada se dodaje boja, trebalo bi da se navede ime ili heksadecimalna vrednost boje kojuautor želi da koristi. Heksadecimalna vrednost je kôd koji govori Web pretraživaču kojuboju treba da prikaže. Kôd se sastoji od znaka (#), koga slede crvena, zelena i plava (RGB)komponenta boje.

Trebalo bi proveriti da boja, koja se koristi, ne utiče na čitljivost podataka unutar tabele.Možda će morati da se promeni boja teksta da bi se podaci u tabeli lakše pročitali.

Korišćenjem atributa BACKGROUND omogućeno je dodavanje pozadinske slike jednoj

ćeliji ili celoj tabeli. Dodavanje pozadinske slike jednoj ćeliji može da pomogne da seinformacije u ćeliji ističu. Dodavanje pozadinske slike celokupnoj tabeli može da doprinesezanimljivom dizajnu tabeli.

Trebalo bi se uveriti da izabrana pozadinska slika ne utiče na čitljivost podataka utabeli. Takođe bi trebalo proveriti da li je pozadinska slika odgovarajuće veličine. Akose koristi pozadinska slika koja je veća od ćelije ili tabele, Web pretraživač će da "odseče"sliku kako bi stala u tabelu.


Prilikom dodavanja pozadinske slike celokupnoj tabeli, trebalo bi obratiti pažnju na to daće različiti Web pretraživači prikazivati pozadinsku sliku na različite načine.

Atributi ALIGN i VALIGN omogućavaju da se promene horizontalno i vertikalno poravnanje

podataka u tabeli.

194 Multimedija


Za promenu horizontalnog poravnanja podataka trebalo bi koristit atribut ALIGN. Uobiča-jeno je da su podaci u ćelijama zaglavlja (<TH>) centrirani, a podaci u ćelijama podataka(<TD>) poravnati po levoj margini.

Atribut VALIGN omogućava da se promeni vertikalno poravnanje podataka. Uobičajeno jeda se podaci pojavljuje u sredini svake ćelije u tabeli. Korisniku je dozvoljeno da promeniporavnanje podataka u ćeliji (<TH> ili <TD>), redu (<TR>), grupisanoj koloni (<COLGROUP>ili <COL>) ili grupisanom redu (<THEAD>, <TBODY> ili <TFOOT>).

Promena veličine tabele je korisna kada autor želi da tabelom zauzme određeni prostorna Web stranici.

Atribut WIDTH omogućava da se promeni širina tabele navođenjem nove širine u pikse-lima ili u procentima prozora Web pretraživača. Kada se navodi širina u pikselima, trebalobi koristiti širinu od 600 piksela ili manje, kako bi se cela tabela videla na monitorukorisnika. Ako autor želi da širina tabele varira u zavisnosti od veličine prozora Web pre-traživača, onda bi trebalo odrediti širinu kao procenat prozora Web pretraživača.


Korišćenjem atributa HEIGHT omogućena je promena visine tabele navođenjem nove visineu pikselima ili u procentima prozora Web pretraživača. Atribut HEIGHT nije deo HTML

standarda za tabele i može da se desi da neki Web pretraživači u potpunosti ne podržavajuovaj atribut.

Ako se navedu širina ili visina koje su manje od sadržaja tabele, Web pretraživač ćepokazati tabelu kako bi se sadržaj tabele prikazao kako treba. Promena veličine ćelija

u tabeli može da poboljša izgled tabele. Atribut WIDTH omogućava da se navede nova

HTML/HTML5 195

širina ćelije u pikselima ili u procentima širine tabeli. Atribut HEIGHT omogućava da seodredi nova visina ćelije u pikselima.


Ne mora da se menja veličina svake pojedinačne ćelije u tabeli. Kada se promeni širinaćelije, sve ćelije u istoj koloni će prikazati novu širinu. Kada se promeni visina ćelije, svećelije u istom redu će prikazati novu visinu.

Ako se navedu širina ili visina koji su manji od sadržaja ćelije u koloni ili redu, Webpretraživač će prikazati kolonu ili red toliko malim koliko to sadržaj ćelije omogućava.

"Spajanje" ćelija omogućava da se kombinuju dva ili više ćelija u redu ili koloni ujednu veliku ćeliju. Ovo je korisno kada autor želi da prikaže naslov na vrhu ili u dnutabele. "Spajanje" ćelija je, takođe, korisna kada autor želi da prikaže naslov preko višeredova ili kolona.


Upotreba atributa COLSPAN unutar tagova <TH> ili <TD> omogućava "spajanje" ćelijaunutar kolone. Korišćenjem atributa ROWSPAN unutar tagova <TH> ili <TD> omogućeno je"spajanje" ćelija unutar reda.

Kada se vrši "spajanje" ćelija duž kolone ili reda, autor mora da navede broj ćelija koje sespajaju u jednu.

Atributi CELLSPACING i CELLPADDING se često koriste za poboljšanje izgleda i čitljivostitabele. Atribut CELLSPACING omogućava da se promeni veličina prostora između svake

ćelije u tabeli. Promenom razmaka ćelija promeniće se veličina granične linije između

196 Multimedija

ćelija. Veličina dodatnog prostora se navodi u pikselima. Uobičajeno je da tabele prikazujućelije sa "slobodnim" prostorom od 2 piksela.

Atribut CELLPADDING omogućava da se promeni veličina prostora oko sadržaja svake

ćelije u tabeli. Ovo pospešuje bolji izgled tabele, gde tabela ne izgleda da je pretrpa-na. Uobičajeno je da se ostavlja slobodan prostor od 1 piksela oko sadržaja ćelija.


Promena praznog prostora oko sadržaja ćelija u tabeli će uticati na usklađivanje i porav-nanje podataka u tabeli. Na primer, ako su podaci poravnati po gornjoj (top) marginićelije ili u odnosu na vrh ćelije i ako se odredi vrednost atributa CELLPADDING da bude 5

piksela, onda će se podaci spustiti 5 piksela ispod vrha ćelije.

Kada se doda granična linija tabeli upotrebom BORDER atributa, onda se granična linija(okvir) automatski pojavljuje oko spoljne strane tabele i između svake ćelije. Upotrebomatributa FRAME i RULES omogućeno je da se prikažu samo neke granične linije u tabeli.

Atribut FRAME omogućava da se odredi koje spoljna granične linije treba prikazati. AtributRULES omogućava da se odredi koje unutrašnje granične linije treba prikazati.

Korišćenje atributa FRAME i RULES unutar istog taga <TABLE> omogućava autoru dakreira interesantne prikaze graničnih linija u tabeli. Na primer, može da kreira tabelu kojaprikazuje vertikalne granične linije sa svake strane kolona, bez horizontalnih graničnihlinija.


Atribut FRAME može da ima različite vrednosti u cilju prikazivanja spoljašnjih ili spoljnjihgraničnih linija. Te vrednosti su prikazane u tabeli 8.1.

HTML/HTML5 197

Tabela 8.1 Atribut FRAME i prikaz spoljašnjih graničnih linija

Vrednost Šta se prikazuje?

void Nema eksternih graničnih linijaabove Granična linija iznad tabelebelow Granična linija ispod tabelerhs Granična linija sa desne strane tabelelhs Granična linija sa leve strane tabelehsides Granična linija i iznad i ispod tabelevsides Granična linija i sa leve i sa desne strane tabeleborder Sve spoljašnje granične linije (deafult)

Atribut RULES može da ima različite vrednosti u cilju prikazivanja unutrašnjih graničnihlinija. Te vrednosti su prikazane u tabeli 8.2.

Tabela 8.2 Atribut RULES i prikaz unutrašnjih graničnih linija

Vrednost Šta se prikazuje?

none Nema internih graničnih linijacols Granična linija između kolonarows Granična linija između redovagroups Granična linija između grupisanih kolona i redovaall Sve unutrašnje granične linije (deafult)

Web pretraživač će, obično, automatski da prenese tekst u naredni red u ćeliji u zavisnostiod veličine tabele i veličine Web prozora. Upotrebom atributa NOWRAP onemogućava sebilo kakav prelom teksta u ćeliji. Ovo je korisno kada se želi da se sav tekst u ćelijipojavi u jednoj liniji.


Trebalo bi koristiti atribut NOWRAP samo u ćelijama koje sadrže malu količinu teksta, kaošto su ćelije koje sadrže naslov ili ime proizvoda. Korišćenje atributa NOWRAP u ćeliji kojasadrži veliku količinu teksta će stvoriti široku (dugačku) ćeliju koja može da izazove databela "izađe" van granica prozora Web pretraživača.

Kada se koristi atribut NOWRAP u ćeliji, trebalo bi imati na umu da se tekst u ćeliji nećepojaviti u jednoj liniji, ako se tagovi <P> ili <BR> pojavljuju u ćeliji.

198 Multimedija

Smeštanje (ugnežđivanje) tabele unutar druge tabele omogućava da se kreirajusloženiji rasporedi tabela.

Da bi se "ugnezdila" tabela, trebalo bi prvo napraviti glavni tabelu, ostavljajući praznućeliju u koju autor želi da smesti drugu tabelu. Onda može da se "ugnezdi" tabela, krei-ranjem nove tabele u praznoj ćeliji.


Prilikom kreiranja tabela, trebalo bi proveriti da li su uključene sve krajnje oznake ili tagovi(</TH>, </TD>, </TR> i </TABLE>) i za glavnu i za ugnežđenu tabelu. Zaboravljanje ovihkrajnjih tagova može negativno da utiče na izgled tabele.

Atribut ALIGN omogućava da se prelomi tekst oko tabele. Ovo može da pomogne daWeb stranica dobije profesionalniji izgled.

Kada se vrši prelom teksta oko tabele, trebalo bi koristiti vrednost left i right, kako bise odredilo kako će se tekst rasporediti oko tabele. Vrednost left ostavlja tabelu sa levestrane teksta, a vrednost right ostavlja tabelu sa desne strane teksta.


Ako autor želi da se samo deo teksta prelomi oko tabele, trebalo bi da koristi atribut CLEARsa tagom <BR> na mestu gde bi trebalo zaustaviti prelamanje teksta oko tabele. Trebalobi koristiti vrednosti left, right ili all kako bi se definisalo da li će se tekst nastavititamo gde su leva, desna ili obe margine "oslobođene" prisustva bilo kakve tabele.

Preporuka je da se vrši prelamanje teksta samo oko malih tabela unutar Web strani-ce. Prelom teksta oko velikih tabela može da proizvede neočekivane rezultate, kao što jepreklapanje teksta i tabele.

HTML/HTML5 199

8.6. HTML, zvuk i video

U ovom delu će biti priče oko zvučnog i video materijala (fajlova sa zvukom, kao štosu pesme i fajlova sa videom, kao što su filmovi i "klipovi") i kako ih "ugraditi" u Webstranicu, kao i mogućim problemima prilikom "ugradnje" fajlova.

Svaka Web stranica može da sadrži link ka zvučnoj datoteci kojim korisnici mogu daizaberu da se čuje zvuk (pesma, zvučni signal i slično).

Kada se kreira veza (link) ka zvučnoj datoteci, trebalo bi proveriti da li je format zvučnedatoteke prikladan za korišćenje na Internetu. Takođe bi trebalo proveriti da li se imadozvola za korišćenje zvučne datoteke koju autor nije kreirao sâm.


Kada korisnik izabere link ka zvučnoj datoteci, Web pretraživač će pokušati da repro-dukuje zvuk. Ako Web pretraživač ne može da reprodukuje zvuk, pretraživač će pokušatida ga reprodukuje u nekom programu na korisnikovom računaru. Ako korisnik nema odgo-varajuću program, Web pretraživač će omogućiti korisniku da sačuva zvučnu datoteku nasvom računaru.

Postoji nekoliko tipova zvučnih datoteka koje mogu da se uključe u Web stranicu. Naj-popularniji format zvučne datoteke je WAV. Ekstenzija zvučne datoteke ukazuje na vrstuzvuka. Sledeća tabela prikazuje formate zvučnih datoteka koji se najčešće koriste na In-ternetu.

Tabela 8.3 Najčešće korišćeni zvučni formati

Vrsta zvuka Ekstenzija Koristi se za

MIDI .mid Instrumentalnu muzikuMP3 .mp3 PesmeRealAudio .ra Emitovanje uživoWAV .wav Kratke zvučne snimke

Oznaka ili tag <EMBED> omogućava da se "ugradi" zvuk u Web stranicu. Ugrađen zvukće se reprodukovati direktno na Web stranici.

Kada se ugradi zvuk, Web stranica će prikazati specifične kontrole koje omogućavaju ko-risnicima da pokreću i zaustavljaju reprodukciju zvuka. Upotreba atributa WIDTH i HEIGHTomogućava autoru da definiše veličinu zvučnih kontrola.

200 Multimedija


Uobičajeno je da neki Web pretraživači automatski reprodukuju ugrađen zvuk kada koris-nik poseti Web stranicu. Trebalo bi iskoristiti atribut AUTOSTART sa vrednošću false kakobi se sprečilo automatsko reprodukovanje zvuka. Ako autor želi da se ugrađeni zvuk re-produkuju u kontinuitetu (stalno), trebalo bi da iskoristi atribut LOOP sa vrednošću true.

Da bi reprodukovali ugrađeni zvuk, Web pretraživači moraju da imaju adekvatan dodatnimodul (plug-in) instaliran. Dodatni modul je softver koji dodaje i proširuje funkcije Webpretraživaču. Ako korisnik nema ispravan dodatni modul, onda može da se desi da Webpretraživač zatraži od njega da preuzme softver sa Interneta i da ga instalira.

Možda će autor želeti da kreira vezu ili link na Web stranici kako bi korisnici mogli da oda-beru reprodukovanje video materijala. Video, koji korisnici reprodukuju izborom linka,naziva se eksterni video.

Kada se kreira link ka video materijalu trebalo bi obezbediti i kratak opis videa, kojiuključuje tip i format videa, veličinu i dužinu vremena koliko reprodukovanje materi-jala traje. Ovo može da pomogne korisnicima da odluče da li uopšte žele da gledajuvideo. Takođe bi trebalo proveriti da li je format video materijala odgovarajući za ko-rišćenje na Internetu.


Kada korisnik izabere video link, Web pretraživač će pokušati da reprodukuje video. AkoWeb pretraživač ne može da pokrene i reprodukuje video, pretraživač će pokušati daotvori video nekim programom na korisnikovom računaru. Ako korisnik nema odgovarajućiprogram, Web pretraživač će omogućiti korisniku da snimi video na svom računaru. Postojinekoliko tipova video datoteka koje mogu da se uključe u Web stranicu. Ekstenzija videodatoteke ukazuje na vrstu materijala i prateći format. Sledeća tabela prikazuje formatevideo datoteka koji se najčešće koriste na Internetu.

HTML/HTML5 201

Tabela 8.4 Najčešće korišćeni video formati

Vrsta zvuka Ekstenzija

AVI .avi

MPEG .mpg ili .mpegQuickTime .mov ili .qt

Oznaka ili tag <EMBED> omogućava da se "ugradi" video u Web stranicu. Ugrađen videoće se reprodukovati direktno na Web stranici.

Kada se ugradi video, Web stranica će prikazati specifične kontrole koje omogućavajukorisnicima da pokreću i zaustavljaju reprodukciju video materijala. Upotreba atributaWIDTH i HEIGHT omogućava autoru da definiše veličinu zvučnih kontrola. Trebalo bi isko-ristiti programe za reprodukciju video materijala, kao što su Windows Media Player iliQuickTime Player, kako bi se odredile ispravne vrednosti za atribute WIDTH i HEIGHT.


Upotreba atributa AUTOSTART i LOOP omogućava autoru da definiše kako će da se repor-dukuje video materijal. Trebalo bi iskoristiti atribut AUTOSTART sa vrednošću true kakobi se aktiviralo automatsko reprodukovanje video materijala. Ako autor želi da se ugrađenizvuk reprodukuju u kontinuitetu (stalno), trebalo bi da iskoristi atribut LOOP sa vrednošćutrue.

Da bi reprodukovali ugrađeni video, Web pretraživači moraju da imaju adekvatan dodatnimodul (plug-in) instaliran. Dodatni modul je softver koji dodaje i proširuje funkcije Webpretraživaču. Ako korisnik nema ispravan dodatni modul, onda može da se desi da Webpretraživač zatraži od njega da preuzme softver sa Interneta i da ga instalira.

8.7. HTML i forme

Oblici ili forme omogućavaju da se prikupe informacije od korisnika koji posećuju Webstranice. Na primer, forme ili oblici omogućavaju korisnicima da pošalju pitanja i komen-

202 Multimedija

tare o svojim Web stranicama. Neki oblici (forme) omogućavaju korisnicima da kupujuproizvode i zahtevaju usluge.

Upotrebom taga <FORM> omogućeno je uspostavljanje obrasca ili forme na Web stranici.Autor mora da podesi formu pre nego što može da doda informacije u tu istu formu. Webstranica može da sadrži više od jedne forme ili više od jednog obrasca.

Atribut METHOD omogućava da se odredi kako će unete informacija u formu da korisnikprenese preko Interneta. Najčešći metod prenosa je post.

Korišćenjem atributa ACTION se precizira gde će Web pretraživač poslati podatke koje jekorisnik uneo u polje forme. Web pretraživač može da pošalje informacije CGI scenarijimana svom Web serveru ili na e-mail adresu koja je navedena u formi.

CGI scenario (Common Gateway Interface Script, scenario opšteg interfejsa mrežnogprolaza) je program koji Web server staruje u cilju obrade informacije iz forme. Ako je ovoneophodno, onda autor treba da se obrati administratoru Web servera kako bi odrediolokaciju CGI scenarija na svom Web serveru.

Ako autor odluči da Web pretraživač pošalje rezultate unutar forme na e-mail adresu,onda bi trebalo da koristi atribut ENCTYPE sa vrednošću text/plain kako bi se osiguraoda će se informacije korisnika preneti u odgovarajućem formatu. Slanje rezultata forme nae-mail adresu je korisno ako Web server ne dozvoljava upotrebu CGI scenarija. Neke Webpretraživači ne podržavaju slanje rezultata forme na e-mail adresu.

Okvir za tekst ili polje za unos teksta (text box) omogućava korisnicima da unesu kratkuliniju teksta. Okvir za tekst se obično koristi za unos imena, adrese i kratkih odgovora.


Kada se kreira okvir za tekst, trebalo bi iskoristiti atribut NAME da bi se obezbedilo imeza polje za unos teksta. Ime koje se odredi će identifikovati okvir za tekst u rezultatimaformulara ili forme. Ime može da sadrži slova i brojeve, ali ne bi trebalo da sadrži razmakeili znakove interpunkcije. Ako autor želi da uključi prostor u imenu, trebalo bi da koristidonju liniju (_).

Trebalo bi koristiti atribut SIZE da se definiše širina (dužina) okvira za tekst, koji bitrebalo prikazati. Uobičajeno je da je dužina (širina) okvira za tekst oko 20 otkucanihkaraktera. Širina ili dužina ne utiče na broj karaktera koje korisnik može da unese u poljeza unos teksta.

HTML/HTML5 203

Da bi se odredio maksimalni broj karaktera koje korisnik može da unese u polje za unosteksta, trebalo bi koristiti atribut MAXLENGTH. Ovo može da pomogne da korisnik budesiguran koliko karaketara može da ukuca u polje za unos teksta.

Upotrebom oznake ili taga <TEXTAREA> omogućava da se kreira velika oblast za unos

teksta unutar forme, u kojoj korisnici mogu da unesu nekoliko linija teksta ili nekolikopasusa. Ovo je korisno za prikupljanje komentara ili pitanja.

Atribut NAME omogućava da se obezbedi ime za veliku oblast teksta koja se kreira. Imeće identifikovati tekstalno područje u rezultatima formulara.


Atributi ROWS i COLS omogućavaju da odredi visina i širina velikog prostora za unos tek-sta. Pošto korisnici neće moći da promene veličinu ovog prostora za unos teksta na svojojWeb stranici, autor bi trebalo da proveri da je napravljeno tekstualno područje dovoljnoveliko da se prikaže celokupni korisnikov tekst i da će to područje moći da se prikaže upotpunosti na monitoru.

Korišćenjem WRAP atributa određuje se maksimalna "dužina" linije teksta, pre nego što setekst prelomi i pređe u novi red ili liniju. Vrednost soft će omogućiti prelamanje velikekoličine teksta, ali neće da prelomi tekst u rezultatima formulara. Vrednost hard vrši prela-manje i velike količine teksta i teksta unutar formulara. Trebalo bi koristiti vrednost offkada se ne želi da se tekst, koji korisnik ukucava, automatski prenosi u naredni red. Iakoje atribut WRAP podržan od strane većine Web pretraživača, nije deo HTML standarda.

Uključivanje polja za potvrdu (check box) unutar formi ili obrazaca omogućava se koris-nicima da mogu da izaberu ili markiraju jednu ili više opcija.

Atribut NAME omogućava da se obezbedi ime za svaku kreiranu grupu polja za potvrdu. Na-vedena imena će prepoznati svaku grupu polja za potvrdu u rezultatima formulara.

Atribut VALUE omogućava da se navede ime svakog polja za potvrdu unutar grupe. Imekoje se odredi za polje će se pojaviti u rezultatima formulara, ako korisnik izabere to poljeza potvrdu. Trebalo bi korisititi imena koja mogu lako da se identifikuju, kao što je tekstkoji se pojavljuje pored polja u Web stranici. Ako se ne koristi atribut VALUE, rezultatiformulara prikazati ime on za svako izabrano polje za potvrdu, tako da se neće znati kojeje polje stvarno markirano.

Imena specificirana upotrebom atributa NAME i VALUE mogu da sadrže slova i brojeve, aline bi trebalo da sadrži razmake ili znakove interpunkcije. Ako autor želi da uključi prostor

204 Multimedija

u imenu, trebalo bi da koristi donju liniju (_). Autor će možda želeti da koristi atributCHECKED, kako bi se pojavilo markirano (izabrano) jedno ili više polja za potvrdu kadase aktivira forma. Ovo je korisno kada očekujete da će većina korisnika izabrati određenopolje u pripadajućem formularu ili obrascu.


Uključivanjem radio dugmadi ili dugmadi za izbor opcije (radio buttons) u obrazac jepoželjno kda se želi da korisnici izaberu samo jednu opciju, od nekoliko ponuđenih.

Atribut NAME omogućava da se obezbedi ime za svaku kreiranu grupu radio dugmadi. Na-vedena imena će prepoznati svaku grupu radio dugmadi u rezultatima formulara.


Atribut VALUE omogućava da se navede ime svakog radio dugmeta unutar grupe. Ime kojese odredi za dugme će se pojaviti u rezultatima formulara, ako korisnik izabere to radiodugme polje za potvrdu. Trebalo bi korisititi imena koja mogu lako da se identifikuju, kaošto je tekst koji se pojavljuje pored polja u Web stranici. Ako se ne koristi atribut VALUE,rezultati formulara prikazati ime on za izabrano radio dugme, tako da se neće znati kojeje dugme stvarno markirano.

Imena specificirana upotrebom atributa NAME i VALUE mogu da sadrže slova i brojeve, aline bi trebalo da sadrži razmake ili znakove interpunkcije. Ako autor želi da uključi prostoru imenu, trebalo bi da koristi donju liniju (_).

Ako autor želi da obezbedi korisnicima listu opcija za biranje, trebalo bi da doda meni uformu ili formular. Meniji se obično koristi za prikazivanje liste starosnih grupa, država iproizvoda.

HTML/HTML5 205

Atribut NAME omogućava da se obezbedi ime za svaki kreiran meni. Navedena imena ćeprepoznati svaki meni u rezultatima formulara.


Uobičajeno je da se meni pojavljuje u obrascu kao padajući meni sa vidljivom prvom opci-jom. Ako autor želi da se vidi više od jedne opcije, onda bi trebalo da koristi atribut SIZEkako bi definisao broj vidljivih opcija unutar pripadajućeg padajućeg menija.

Oznaka ili tag <OPTION> omogućava da se odrede informacije za jednu opciju menija. Tre-balo bi koristiti atribut VALUE za definisanje imena opcije. Ime će se pojaviti u rezultatimaformulara ako korisnik izabere tu opciju. Preporuka je da se koriste imena koja mogu lakoda se identifikuju, kao što je tekst koji se pojavljuje u meniju na Web stranici.

Forma, obrazac ili formular može da sadrži prostor koji omogućava korisnicima da pošalju

(upload) fajl. Omogućavajući korisnicima da pošalju fajlove je korisno za prikupljanje infor-macija koje su najbolje prikazane u posebnom fajlu, kao što je rezime ili narudžbenica. Faj-lovi koje korisnici šalju se obično čuvaju na Web serveru.


U tagu <FORM> trebalo bi koristiti atribut ENCTYPE sa vrednosšću multipart/form-data

kako bi se osiguralo da će korisnici svoje fajlove poslati u odgovarajućem formatu.

Korišćenjem atributa NAME unutar taga <INPUT> omogućava se definisanje imena datotekekoju korisnici šalju. Ime će identifikovati datoteku na Web serveru.

Kada je omogućeno korisnicima da šalju fajlove, Web stranica će prikazati polje u ko-jem korisnici mogu da unesu lokaciju i ime datoteke koju žele da pošalju. Atribut SIZE

omogućava da se odredi širina ili dužina polja za unos ovih podataka. Povećanje širine

206 Multimedija

ovog polja mogu pomoći da se osigura da će korisnici moći da vide celu putanju do da-toteke. Web stranica će prikazati i dugme Browse koje će da pomogne korisnicima dapronađu datoteke koje žele da pošalju.

Uključujući dugme za slanje (Submit) unutar obrasca, autor omogućava korisnicima dašalju informacije koje su uneli u obrazac ili formular.

Upotrebom atributa VALUE definiše se tekst koji bi trebalo da se pojavu na dugmetu zaslanje. Ako se ne koristi atribut VALUE, onda će se na dugmetu pojaviti podrazumevanitekst kao Submit Query ili Submit.


Kreiranje dugmeta za resetovanje (Reset) unutar obrasca, omogućeno je korisnicima daobrišu informacije koje su uneli u formular ili obrazac. Kada korisnik klikne na dugme zaresetovanje, korisnikov Web pretraživač će resetovati sve elemente obrasca na prvobitnepostavke Ovo omogućava korisnicima da počnu ispočetka, ako su napravili grešku prilikompopunjavanja formulara.

Upotrebom atributa VALUE definiše se tekst koji bi trebalo da se pojavu na dugmetu za re-setovanje. Ako se ne koristi atribut VALUE, onda će se na dugmetu pojaviti podrazumevanitekst kao Reset.

Kada korisnik klikne na dugme za slanje (Submit) ili resetovanje (Reset), njegov Web pre-traživač će poslati ili obrisati informacije u svim elementima obrasca ili formulara. Korisnikneće biti u stanju da poništi (undo) ili preokrene operacije slanja ili resetovanja.

Grafičko dugme za slanje (Submit) predstavlja sliku koja omogućava korisnicima daunesu informacije i da dostave rezultate iz formulara u isto vreme.

Kada korisnik klikne na grafičko dugme za slanje, horizontalna i vertikalna koordinatekorisnikovog miša se šalju zajedno sa ostalim informacijama u formularu. Ovo je korisnokada područja na slici predstavljaju različite opcije, kao što su lokacija na planu karte ilispratu kuće. Trebalo bi obezbediti i tekst koji upozorava korisnike da će, klikom na sliku,dostaviti sve svoje informacije.

Atribut SRC unutar taga <INPUT> omogućava da se navede lokacija i ime GIF ili JPEGslike koju bi trebalo koristiti.

Atribut NAME omogućava da se obezbedi ime za grafičko dugme za slanje. Ime će iden-tifikovati horizontalne (x) i vertikalne (y) koordinate miša u rezultatima formulara. Ovekoordinate će se meriti u pikselima od gornjeg levog ugla slike.

HTML/HTML5 207


Sakriveno polje ili polje koje se ne vidi (hidden field) element formulara koji se nećepojaviti na Web stranici, ali će se pojaviti u rezultatima formulara. Sakrivena polja sukorisna za uključivanje informacija, kao što su datum i vreme kada je kreirana forma iliobrazac.

Kada se pravi sakriveno polje, trebalo bi koristiti atribut NAME da obezbedi naziv zasakriveno polja i atribut VALUE da odredi informacije koje bi sakriveno polje trebalo dasadrži.


Ako u Web stranici postoje višestruki obrasci, sakrivena polja mogu pomoći prilikomidentifikacije informacija koje podnose korisnici. Na primer, sakriveno polje može da seiskoristi da se svakom obrascu dodeli drugo ime ili broj. Kada se vide rezultati formulara,ime ili broj će identifikovati formular koji je korisnik popunjavao.

208 Multimedija

Ako obrazac ili formular sadrži mnogo elemenata, možda će autor želeti da koristi tag<FILEDSET> da organizuje elemente u grupe. Web pretraživači, koji podržavaju oznaku<FILEDSET>, vizuelno će odvoje elemente i da ih uključe u grupu ili grupe. Na primer,Internet Explorer prikazuje tanku, graničnu jednobojnu liniju oko elemenata.

Organizovanje elemenata formulara može pomoći korisnicima da razumeju formu, koja jepodeljena u logične celine. Na primer, možda bi trebalo stvoriti jednu grupu za traženeinformacije i drugu grupu za opcione informacije.


Oznaka ili tag <LEGEND> omogućava da se doda naslov grupisanim elementima. Ako seautor odluči da uključi naslov, onda atribut ALIGN omogućava da se definiše mesto gdeće se naslov pojaviti – levo, desno, iznad ili ispod grupe elemenata.

Korišćenjem oznake ili taga <LABEL> omogućeno je da se u formular ubacuje tekst kao

labela (oznaka) za određene elemente. Ovo nalaže Web pretraživaču da interpretira tekstkao deo elementa obrasca.

Da bi se "etiketirao" ili "obeležio" element formulara, trebalo bi koristiti atribut ID ucilju identifikacije elementa kojibi trebalo obeležiti. Zatim bi trebalo iskoristiti atribut FORunutar taga <LABEL> za identifikovanje teksta za labele.


HTML/HTML5 209

Obeležavanje elemenata obrasca može pomoći korisnicima da brzo dođu do informacijau formularu. Na primer, kada korisnik klikne na labelu pored polja za potvrdu na Webstranici, polje za potvrdu će biti izabrano ili markirano. Slično tome, korisnici mogu dakliknu na labelu za polje za unos teksta kako bi se postavio kursor miša u polje za unosteksta.

Iako je tag <LABEL> deo HTML standarda, trenutno nije podržan od strane mnogih Webpretraživača.

Korisnici mogu da se kreću kroz elemente formulara korišćenjem Tab tastera. Uobičajenoje da se pritiskom na taster Tab korisnik kreće po elementima kako se pojavljuju u HTML

kodu. Promena ovog redosled može pomoći korisnicima da popune formular u logičkomredosledu.


Da bi se promenio ovaj redosled, trebalo bi koristiti atribut TABINDEX unutar tagovaza svaki element formulara. Da bi se elementi uključili u Tab redosled, trebalo bi ele-mentima dodeliti TABINDEX vrednosti da budu između 1 i 32.767. Da bi se elementisključio iz Tab reda, trebalo bi elementu dodeliti negativnu TABINDEX vrednost (na primer,TABINDEX="-1").

Kada korisnici krene kroz formular pritiskom na taster Tab, najpre će se markirati elementsa dodeljenom najnižom vrednošću, a na kraju će biti element sa najvećom vrednošću. Akodva elementa imaju istu vrednost, onda će element koji se prvi pojavljuje u HTML koduimati prednost.

Atribut TABINDEX može da se koristi sa elementima izvan formulara, kao što su slike(<IMG>), linkovi (<A>) i mapirane oblasti slika (<AREA>).

Iako je atribut TABINDEX deo HTML standarda, on još uvek nije u potpunosti podržan odstrane nekih Web pretraživača.

8.8. HTML i sekcije i/ili frejmovi

U ovom delu biće reči o frejmovima ili sekcijama pomoću kojih je omogućeno da se podelitekući prozor Web pretraživača u određene oblasti, o njihovom kreiranju i o njihovimpratećim elementima i osobinama. Ako je Web sajt veliki i složen, onda primena frejmovaili sekcija nudi mnoge prednosti koje mogu da pomognu korisnicima da bolje razumeju

210 Multimedija

strukturu sajta i kretanje kroz Web stranice. Frejmovi omogućavaju prikazivanje više Webstranica u jednom prozoru Web pretraživača. To omogućava da se odjednom prikažu ra-zličite informacije na ekranu. Upotreba frejmova, takođe, omogućava da se zadrži podaci,kao što je logo firme, na ekranu u svakom trenutku, bez potrebe da se dodaju informacijena svaku Web stranicu unutar Web sajta. Mnogi autori Web stranica smatraju frejmovekorisnim elementima za prikazivanje navigacije unutar sajta. Ovo omogućava korisnicimada vide strukturu Web sajta u svakom trenutku i omogućava im lak pristup informacijamaod interesa.


Kao i sve u životu, moraju da postoje i određeni nedostaci kada su frejmovi u pitanju. Poštofrejmovi "dele" prozor Web pretraživača u sekcije, onda je prostor za gledanje svake Webstranice smanjen. Web stranice dizajnirane da budu prikazane u celokupnom prozoru Webpretraživača ne mogu dobro da se uklope u frejmove (sekcije). Prilikom kreiranja frejmova,može da se da bude teško da se odredi najbolja veličina za svaki frejm. Teško je predvidetikako će se frejmovi prikazivati na korisničkim računarima, jer korisnici na različite načineodređuju količinu informacija koja se pojavljuje u frejmovima. Ljudi koji koriste manjerezolucije ekrana neće videti toliko informacija u svakom kadru. Takođe, trebalo bi imatiu vidu i da svi Web pretraživači ne podržavaju frejmove.

Frejmovi omogućavaju da se podeli prozor Web pretraživača na sekcije. Svaka sekcija ćeprikazati različite Web stranice unutar tekućeg Web sajta.

Frejmovi su korisni kada autor želi da zadrži informacije na ekranu u svakom trenutku. Naprimer, postaviti sadržaj ili navigacione veze u frejm, kako bi se pomoglo korisnicima popitanju kretanja kroz Web stranice i pronalaženja informacija od interesa.

Da biste kreirali frejmovi, trebalo bi podesiti Web stranicu definisanje strukture frejmo-va upotrebom tagova ili oznaka <FRAMESET> i <FRAME>. Oznaka ili tag <FRAMESET>

omogućava da se kreira skup frejmova (framest) koji deli prozor Web pretraživača u redovei kolone. Trebalo bi navesti visinu ili širinu za svaki red ili kolonu koristeći procentualnuvrednost prozora Web pretraživača, broj piksela ili zvezdicu (*). Kada se koristi zvezdica,veličina frejma će zavisiti od veličine drugih frejmova. Na primer, ako jedan frejm koristi70% prozora, frejm sa zvezdicom će koristiti 30% prozora.

Upotrebom taga <FRAME> omogućeno je specificiranje informacija za svaki frejm., kao štosu ime frejma i Web stranice koja bi trebalo da se pojavu u tom frejmu.

Upotrebom atributa TARGET sa tagom <A> omogućeno je kreiranje linka koji korisnici moguda odaberu i da prikažu Web stranicu u drugom frejmu. Kreiranje veze ka frejmovima

ili sekcijama može da olakša korisnicima kretanje kroz Web sajt. Na primer, mogu da

HTML/HTML5 211

se kreiraju navigacioni linkovi u jednom frejmu koji će se otvoriti u drugom frejmu. Toomogućava da se navigacioni linkovi prikazuju na ekranu, dok korisnici pregledaju stranice.


Kada se kreira veza sa frejmom, trebalo bi definisati ime pomoću atributa TARGET. Akose ne koristi atribut TARGET da se navede ime jednog frejma, veza će se otvoriti u frejmukoji sadrži link.

Uobičajeno je da će Web pretraživači prikazati trake za pomeranje sadržaja prozora ilitrake za skrolovanje (scroll bar) frejma samo ako Web stranica sadrži previše informacijakoje je nemoguće uklopiti u postojeći frejm. Korišćenje atributa SCROLLING sa vrednostimano ili yes omogućava da se trake za skrolovanje ne prikazuju ili prikazuju, za sva vremena.


Ako autor ne želi da prikažete traku za skrolovanje frejma, onda bi trebalo definisativrednost no. Skrivanje ili ne prikazivanje trake za skrolovanje se korisno zbog smanjenja"gužve" u malom frejmu. Ako autor želi da se stačno prikazuje traka za skrolovanje, ondabi trebalo definisati vrednost yes. Ovo je korisno, jer trake za skrolovanje poboljšavajuizgled frejma (slika 8.78 levo).

Upotreba atributa NORESIZE sprečava korisnika da promeni veličine frejmova. Ovo jekorisno kada autor ne želi da menja izgled i raspored frejmova (slika 8.78 desno).

212 Multimedija

Ako se ne spreče korisnici da menjaju veličinu frejmova, oni mogu da prevuku graničniokvir na novu lokaciju kako bi se promenila veličina frejma ili sekcije. Korisnici, obično,žele da promene veličinu frejma kada hoće da prikažu više informacija u frejmu.

Kada se "odradi" sprečavanje korisnika da promena veličine frejmova, korisnici, takođe,neće moći da promene veličinu i frejmova koji dele iste granične okvire. Ova osobina ukidapotrebu da se koristi atribut NORESIZE za sve frejmove.

Ako se već ukida mogućnost korisniku da promeni veličine frejmova, onda bi trebalo daje autor siguran u predložene veličine frejamova, kako bi stale sve relevantne informa-cije. Trebalo bi imati na umu da će korisnici koji vide Web stranice na nižim rezolucijamavideti manje informacija u svakom frejmu.

Postoji nekoliko opcija na raspolaganju za promenu izgleda graničnih linija između frej-mova ili sekcija.

Korišćenjem atributa BORDER sa tagom <FRAMESET> je omogućeno da se promeni "deblji-na" (širina) graničnih linija frejmova. Uobičajeno je da većina Web pretraživača prikazujegranične linije frejmova širine ("debljine") oko 6 piksela.


Web pretraživači, obično, prikazuju granične linije frejmova u sivoj boji. Korišćenjematributa BORDERCOLOR sa tagom <FRAMESET> je omogućeno da se promeni boja graničnihlinija frejma. Ovo je korisno kada autor želi da koordinira boju graničnih linija sa bojompozadine Web stranica u koje su prikazane u frejmovima.

Iako su atributi BORDER i BORDERCOLOR podržani od strane većine Web pretraživača, oninisu deo HTML standarda za frejmove ili sekcije (slika 8.79 levo).

Da bi se sakrile sve granične linije između frejmova, potrebno je koristiti FRAMEBORDERsa tagom <FRAMESET>. Ovo je korisno kada autor želi da se sadržaj frejmova pojavi kaojedna Web stranica. Nakon što se sakriju granične linije frejmova, ostaje prazan prostorizmeđu frejmova. Da bi se potpuno uklonio prostor, trebalo bi postaviti atribut BORDER

na vrednost 0 piksela (slika 8.79 desno).

Atribut FRAMEBORDER sa oznakom ili tagom <FRAMESET> je podržan od strane većineWeb pretraživača, iako nije deo HTML standarda.

Promena margina frejma omogućava da se podesi veličina prostora između sadržaja frej-ma i same ivice frejma (slika 8.80 levo). Ovo može da poboljša izgled frejma. Uobičajenoje da većina Web pretraživača prikazuje margine frejmova veličine oko 10 piksela. Upo-

HTML/HTML5 213

trebom atributa MARGINWIDTH i MARGINHEIGHT mogu da se promene veličine marginasamog frejma. Atribut MARGINWIDTH omogućava da se odredi nova veličina leve i desnemargine, u pikselima.


Atribut MARGINHEIGHT omogućava da se odredi nova veličina gornje i donje margine, upikselima. Ako autor želi da se sadržaj frejma direktno pojavi uz samu ivicu frejma, ondabi trebalo podesiti margine frejma na vrednost od 0 piksela. Samo neki Web pretraživačimogu da prikažu margine čija je vrednost 0 piksela.

Kada se menjaju margine frejmova, trebalo bi proveriti da li su navedene vrednosti marginai po visini i po dužini (širini). Ako se navede samo jedna veličina margina (ili visina ili ši-rina), Web pretraživač može automatski da promeni i drugu veličinu margine na najmanjumoguću veličinu koju pretraživač podržava.

Upotrebom oznake ili taga <IFRAME> omogućeno je kreiranje "plutajućeg" frejma unu-tar Web stranice (slika 8.80 desno). "Plutajući" frejm ili "plutajuća" sekcija je frejm kojise pojavljuje u okviru sadržaja Web stranice.

Upotrebom atributa NAME se definiše i obezbeđuje ime za "plutajući" frejm. Imenovanjeovakve vrste frejma omogućava da se kasnije stvore veze ili linkovi koji će otvoriti jošjednu Web stranicu u okviru "plutajućeg" frejma.

Upotrebom atributa WIDTH i HEIGHT je omogućeno da se definišu visina i širina "pluta-jućeg" frejma. Trebalo bi se uveriti da je navedena veličina dovoljno velika da se pravilnoprikazuje sadržaj frejma. Korisnici neće moći da promene veličinu "plutajućeg" frejma naWeb stranici.

8.9. Šta donosi HTML5?

HTML5 je najnoviji standard za HTML. Ranije verzije HTML i HTML 4.01 su se pojavile još1999. godine, a Internet se, od tada, značajno promenio. HTML5 je dizajniran da zameniHTML 4, XHTML i HTML DOM Level 2. Trebalo bi napomenuti da je specijalno dizajniranda pruži bogat sadržaj bez potrebe za dodacima (plugins). Trenutna verzija "donosi"animaciju u grafiku, muziku u filmove, a može da se koristi i za izgradnju komplikovanihWeb aplikacija. HTML5 je dizajniran da radi bez obzira da li se koristi PC, tablet, smarttelefon ili smart TV.

214 Multimedija

Internet i korišćenje Interneta se dosta promenilo od 1999. godine kada je HTML 4.01

postao standard. Danas, neki elementi u HTML 4.01 su zastareli, nikada se nisu koristili ilise ne koristi na način na koji su namenjeni. Svi ti elementi su uklonjeni ili ponovo napisaniu HTML5. Za bolje rukovanje unutar Interneta, HTML5 je, takođe, uključio nove elementeza crtanje grafike, prikazivanje medijskog sadržaja, bolju strukturu stranice i bolje formeza rukovanje. Pored toga, uključio je i nekoliko novih API-a (Application Programming

Interface), kao što su povući i pustiti (drag and drop), dobijanje geografskog položajakorisnika, smeštanje podataka "u lokalu" i još mnogo toga.

Ispod je prikazana sintaksa jednostavnog HTML5 dokument, sa minimumom potrebnihtagova ili oznaka:

<!DOCTYPE html>

<html>

<head>


<title>Naslov dokumenta ...</title>

</head>

<body>

Sadrzaj dokumenta ...

</body>

</html>

8.10. HTML5 i semantika

Semantički elemenat jasno opisuje svoje značenje kako pretraživaču, tako i programeru.Nesemantički elementi, kao što su <div> ili <span> ne govore ništa o njihovom sadržaju.Semantički elementi, kao što su <form>, <table> ili <img> jasno definišu njihov sadržaj.

Slika 8.81. Struktura Web stranice u HTML5

HTML5 nudi nove semantičke elemente koji jasno definišu različite delove Web strani-ce: <header>, <nav>, <section>, <article>, <aside>, <figure>, <figcaption>,<footer>, <details>, <summary>, <mark> i <time>.

HTML/HTML5 215

Element <section> definiše odeljak ili sekciju unutar dokumenta (slika 1.84). Komplet-na sintaksa je prikazana u fajlu HTML5-001.html, a prikaz ekrana u Internet Explorer-una slici 8.82.

Slika 8.82. Prikaz ekrana na osnovu dokumenta HTML5-001.html

Element <article> određuje nezavisan i samostalan sadržaj (slika 8.83). Primenaovog elementa trebalo bi da ima smisla sama po sebi i trebalo bi da omogući distribuiranjenjegovog sadržaja nezavisno od ostatka sajta. Element <article> može da se koristi zaforume, blogove, vesti i komentare.


Element <nav> definiše skup navigacionih linkova (slika 8.83). Ovaj element je name-njen za velike blokove navigacionih linkova, mada ne bi trebalo da svi linkovi u dokumentubudu unutar elementa <nav>.


216 Multimedija

Element <aside> definiše neki sadržaj pored postavljenog sadržaja (slika 8.85). Reč jeo bočnom stupcu (sidebar, blok teksta smešten sa strane glavnog teksta dokumenta,često odvojen linijom ili nekim drugim grafičkim elementom). Sadržaj elementa <aside>

bi trebalo da se odnosi na okolni sadržaj.


Element <header> određuje zaglavlje dokumenta ili sekcije (slika 8.86). Ovaj elementbi trebalo da se koristi kao kontejner za uvodni sadržaj. Trebalo bi napomenuti da ujednom dokumentu može da se nalazi nekoliko <header> elemenata.


Element <footer> određuje podnožje dokumenta ili sekcije (slika 8.87). Ovaj elementbi trebalo da sadrži informacije o sadržaju elementa. Podnožje, obično, sadrži informacijeautora o dokumentu, informacije o autorskim pravima, linkove sa uslovima korišćenja,kontakt informacije itd. U dokumentu može da postoji nekoliko <footer> elemenata.


Oznaka <figure> navodi sopstveni sadržaj, kao što su crteži, dijagrami, fotografije,

listing koda itd. Dok se sadržaj elementa <figure> odnosi na glavni tok informacija

HTML/HTML5 217

unutar Web stranice, njegova pozicija je nezavisna od glavnog toka, a ako bude uklonjenne bi trebalo da utiče na tok informacija u dokumentu. Oznaka <figcaption> definišenaslov za <figure> element.


8.11. HTML5 i grafika (canvas)

HTML5 element <canvas> se koristi za crtanje grafičkih elemenata u hodu, korišćenjemnekog od skript jezika (obično JavaScript). Ovaj element je samo kontejner za grafi-ku. Autor mora da koristi skript jezik kako bi mogao da nacrta određene grafičke ele-mente. Element <canvas> ima nekoliko metoda za crtanje putanja, pravougaonika ilikvadrata, kružnica ili elipsi, za dodavanje teksta i ubacivanje slika ili fotografija.

Element <canvas> predstavlja pravougaonu površina unutar Web stranice i to je nave-deno primenom ovog elementa. Po pravilu, ovaj elemenat nema granični okvir i nemasadržaj. Inicijalna sintkasa izgleda ovako:

<canvas id="myCanvas" width="200" height="100"></canvas>

Trebalo bi napomenuti da se uvek navodi ID atribut (koji je definisan u skript jeziku),kao i širina (width) i visina (height) koji pripisuju veličinu pravougaone površine zacrtanje. Na jednoj Web stranici može da se primeni više <canvas> elemenata.


218 Multimedija

Svi nacrtani grafički entiteti, unutar <canvas> elementa, definišu se primenom odgovara-juće sintakse programskog jezika JavaScript.


Sledi kratko objašnjenje dela sintakse unutar fajla HTML5-009.html:

var c = document.getElementById("Moj_Canvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(0,0,150,75);

Najpre se traži <canvas> element:

var c = document.getElementById("Moj_Canvas");

Onda se poziva getContext() metoda (mora da se unese tekstualni string "2d" unutarove metode):

var ctx = c.getContext("2d");

Objekat getContext("2d") je "zadužen" za "izgradnju" HTML5 objekata, sa pripada-jućim osobinama i metodama za crtanje putanja, pravougaonika ili kvadrata, kružnica ilielipsi, krerianje tekstualnih poruka, "ubacivanje" slika ili fotografija i još mnogo toga.

Sledeće dve linije koda su "zadužene" za iscrtavanje crvenog pravougaonika:

ctx.fillStyle = "#FF0000";

ctx.fillRect(0,0,150,75);

Atribut fillStyle može da ponudi CSS boju, određenu gradijetnu raspodelu dve i višeboja, kao i odgovarajući šablon. Uobičajena vrednost ovog atributa je #000000 (reč jeo crnoj boji). Metoda fillRect(x,y,width,height) iscrtava pravougaonika koji je is-punjen, u ovom slučaju, bojom koja je definisana atributom fillStyle.

Element <canvas> predstavlja dvodimenzionalnu zamišljenu mrežu (grid). Gornji leviugao ove zamišljene mreže je koordinata (0, 0). Kao što se vidi u pomenutom delu sintakse,metod fillRect() ima parametre (0, 0, 150, 75). To znači da se iscrtava pravougaonikkoji počinje u gornjem levom uglu (0, 0) i iscrtava pravogaonik čije su dimenzije 150× 75

piksela.

Za crtanje prave linije unutar <canvas> elementa, koriste se sledeće dve metode:

HTML/HTML5 219

• moveTo(x,y) definiše polaznu tačku linije i

• lineTo(x,y) definiše završnu tačku linije.

Da bi se stvarno nacrtala linija (da se linija vidi), trebalo bi koristiti jedan od atributa zadefinisanje "vidljivog mastila", a u fajlu HTML5-010.html je korišćen atribut stroke().


Da bi se nacrtala kružnica unutar <canvas> elementa, može da se koristi sledeća metoda:

• arc(x,y,r,start,stop)

U fajlu HTML5-011.html je definisana kružnica kao

ctx.arc(150,100,80,0,2*Math.PI);

Iscrtava se kružnica čiji se centar nalazi u koordinati (150, 100), čiji je poluprečnik 80 iiscrtava se ugao od 2π ili od 360

◦ (slika 8.92). Da bi se stvarno nacrtala kružnica (dase linija vidi), trebalo bi koristiti jedan od atributa za definisanje "vidljivog mastila", a ufajlu HTML5-011.html je korišćen atribut stroke().


Za "iscrtavanje" teksta unutar <canvas> elementa, najvažnije su sledeće tri stvari:

• font – definiše svojstva primenjenog fonta za tekst;

• fillText(text,x,y) – "iscrtava" ispunjen tekst;

220 Multimedija

• strokeText(text,x,y) – "iscrtava" samo spoljašnju konturu teksta.

Kao što je već pomenuto, upotrebom komande fillText() dobija se slika 8.93 levo, aupotrebom komande strokeText() dobija se slika 8.93 desno.

Slika 8.93. Prikaz ekrana na osnovu HTML5-012.html i HTML5-013.html

Gradijentne raspodele mogu da se koriste za popunjavanje pravougaonika ili kvadrata,krugova ili elipsi, teksta itd. Primena ovih metoda unutar <canvas> elementa nije ogra-ničena na primenu jednobojnih elemenata (solid colors). Postoje dve vrste gradijentneraspodele:

• createLinearGradient(x,y,x1,y1) – kreira se linearna raspodela (linear gra-

dient) i

• createRadialGradient (x,y,r,x1,y1,r1) – kreira se radijalna/kružna raspo-dela (radial gradient).

Kada se pojavi objekat koji ima gradijentnu ispunu, onda moraju da se definišu dve ili višeboja, gde počinju i gde se "zaustavljaju".

Atribut AddColorStop() određuje boju "zaustavljanja" gradijentne raspodele, a njegovpoložaj se nalazi duž gradijenta. Pozicija gradijenta može da se nalazi bilo gde izmeđuvrednosti 0 i 1. Da bi se koristila gradijentna raspodela, trebalo bi podesiti atributefillStyle ili strokeStyle na vrednost grd za gradijentnu raspodelu, a zatim bi trebalodefinisati oblik koji se ispunjava (pravougaonik, tekst ili linijski objekat).

Upotrebom komande createLinearGradient() dolazi se do linearne preraspodele bojaunutar zatvorene "konture", a dva primera su prikazana na slici 8.94.

Slika 8.94. Prikaz ekrana na osnovu HTML5-014.html i HTML5-015.html

HTML/HTML5 221

Upotrebom komande createRadialGradient() dolazi se do radijalne ili kružne pre-raspodele boja unutar zatvorene "konture", a primer je prikazan na slici 8.95.


Da bi se "ugradila" slika ili fotografija unutar elementa <canvas>, trebalo bi koristitisledeću metodu – drawImage(img,x,y) gde se definiše koja se slika "ubacuje" u element<canvas> i definiše se koordinata gornjeg levog ugla slike unutar elementa. Upotrebomkomande drawImage() dolazi se do "ubacivanja" slike u radni <canvas> prostor, a primerje prikazan na slici 8.96.


8.12. HTML5 – video i audio

Mnogi savremeni sajtovi pokazuju video materijale. HTML5 obezbeđuje standard za njihovoprikazivanje. Pre HTML5, nije bilo definisanog standarda za prikazivanje video materijala ilifilmova na Web stranicama. Pre HTML5, video je mogao da radi jedino sa ugrađenim do-datkom (plug-in, kao što je Flash). Međutim, različiti pretraživači su podržavali različitedodatke. HTML5 definiše novi element koji određuje standardan način da se ugradi videoili film na Web stranicu, a reč je o <video> elementu.

Kontrolni atribut dodaje video kontrole, kao što su play, pause i volume. Takođe je dobraideja da uvek uključuju vrednosti width (širina) i height (visina) atributi. Ako su defi-nisane vrednosti visine i širine, prostor potreban za video je "rezervisan" kada se stranica

222 Multimedija

učitava. Međutim, bez ovih atributa, pretraživač ne zna veličinu video snimka i ne možeda zadrži odgovarajući prostor za njega. Efekat će biti da će se raspored na Web stranicipromeniti tokom učitavanja (loading) video snimka (dok su video ne učita). Takođe bitrebalo da se ubaci određeni tekstualni sadržaj između oznaka <video> i </video>, kojibi "signalizirao" da tekući pretraživač ne podržava <video> element. Element <video>omogućava primenu i upotrebu više <source> elemenata. Elementi <source> mogu dase povezuju na različite video fajlove. Pretraživač će koristiti prvi prepoznat format zareprodukovanje video materijala.


Trenutno, postoje 3 podržana video formata za element <video> – MP4 fajlovi sa H264

video kodekom i sa AAC audio kodekom; WebM fajlovi sa VP8 video kodekom i Vorbis audiokodekom; Ogg fajlovi sa Theora video kodekom i Vorbis audio kodekom.

HTML5 obezbeđuje standard za slušanje audio fajlova. Pre HTML5, nije bilo standard zaslušanje audio fajlova unutar Web stranice. Pre HTML5, audio fajlovi su mogli da se slušajujedino sa ugrađenim dodatkom (plug-in, kao što je to Flash). Međutim, različiti pretraži-vači se podržavali različite dodatke. HTML5 definiše novi element koji određuje standardannačin da se "ugradi" audio fajl na Web stranicu, a reč je o <audio> elementu.


Kontrolni atribut dodaje audio kontrole, kao što su play, pause i volume. Takođe bi tre-balo da se ubaci određeni tekstualni sadržaj između oznaka <audio> i </audio>, kojibi "signalizirao" da tekući pretraživač ne podržava <audio> element. Element <audio>omogućava primenu i upotrebu više <source> elemenata. Elementi <source> mogu dase povezuju na različite audio fajlove. Pretraživač će koristiti prvi prepoznat format zareprodukovanje audio materijala.

Trenutno, postoje 3 podržana audio formata za <audio> element – MP3, najrasprostra-njeniji audio format u kome je primenjena kompresija sa gubitkom; Ogg "otvoreni" format(open source) sa višim stepenom kompresije, ali i manjom rasprostranjenošću; Wav audioformat za audio fajlove na personalnim računarima (Waveform Audio File Format, WAVEili odomaćeno WAV).

Glava 9

CSS/CSS3

"Ispod" svih Web stranica nalazi se stari i dobar HTML jezik, koji kontroliše stvari kaošto su veličina fonta, boja teksta, gde slika ide, kao i informacije o drugim elementimana stranici. HTML jezik se ponekad naziva običan HTML jezik, da bi se razlikovale Webstranice izgrađene sofisticiranijim tehnikama, kao što su liste stilova (style sheets). I rečobičan je sigurno dobra za HTML.

Bez pomoći, HTML često stvara, zaista, dosadne stranice. Zbrka nastaje kada se pokušavada se napravi Web stranica koršćenjem samo HTML koda. Tu priskaču u pomoć liste stilova(style sheets).

CSS (Cascading Style Sheets, kaskadne liste stilova) je tehnologija preporučena od straneWorld Wide Web konzorcijuma (W3C) tokom 1996. godine. Jednostavan način da serazume svrha CSS-a je da se na njega gleda kao na dodatak HTML-u koji pomaže da seolakša i unapredi dizajn Web stranice. U stvari, neki CSS efekti nisu mogući bez pomoćiHTML jezika.

Još jedna prednost CSS-a je da omogućava da stil odredi jednom, a pretraživač možetaj stil da primeni mnogo puta u dokumentu. Na primer, ako autor želi da neka slika,prikazana na njegovom Web sajtu, da ima tanak, plavi okvir, može da definiše ovaj okvirkao stil u CSS-u. Zatim, umesto da ponavlja HTML definiciju tankog i plavog okvira, svakiput kada želi da se promeni konkretni okvir, može samo da ubaci CSS stil kao atribut zasvaki grafički element koji želi da bude uramljen.

Drugačije rečeno, CSS bi trebalo koristiti za definisanje opštih pravila o tome kako seelementi ponašaju unutar Web stranica i kako izgledaju, gde se nalaze, njihove veličine,transparentnost itd. Onda bi samo trebalo viditi računa o imenu pravila koje treba primenitii koje treba sprovesti u pripadajućoj HTML stranici.

Evo primera CSS pravila koje definiše nekoliko osobina koje bi trebalo primeniti na najvećinaslov H1 unutar HTML stranice:

<style>

H1 {font-size:16pt color:blue;}

</style>

224 Multimedija

Sa ovim CSS pravilom na snazi, bilo koji HTML kôd koji sadrži H1 element će ovaj naslovispisati veličinom 16pt i plavom bojom:

<html>

<body>

<h1>Ovaj naslov je plave boje i velicine 16pt</h1>

</body>

</html>

CSS pravila mogu da se definišu u posebnom .css fajlu (datoteci) ili mogu da buduugrađena u HTML fajl. Sledi primer CSS pravila koje će biti "ugrađeno" u zaglavlje HTML

fajla:

<html>

<head>

<style>

h1 {font-size:16pt color:blue;}

</style>

</head>

<body>

<h1>Ovaj naslov je plave boje i velicine 16pt</h1>

</body>

</html>

Trebalo bi obratiti pažnju na <style> element, jer mogu unutar ovog elementa da sedefinišu CSS stilovi. Unutar Web stranice, mogu da postoje višestruki <style> elementi,ako autor to želi.

9.1. CSS od nule

U ovom delu će biti predstavljeno nekoliko, donekle, teorijskih koncepata koji su bitni zarazumevanje CSS-a. Autor može da napiše CSS koristeći bilo koji običan tekst editor. Kaoi XML i drugi savremeni računarski jezici izvedeni iz HTML-a, i CSS ne pravi pokušaj dastvori neki čudni, specijalizovani jezik kodova, koji ne bi mogao lako da se čita i piše.

Lista stilova se često piše i čuva kao .css datoteka na hard disku. Nakon toga, svakaHTML (sa ekstenzijama .htm ili .html) stranica koja želi da koristi stilove definisane udatoteci .css trebalo bi samo da je referencira kao link. Očigledna je veza između HTML-ai CSS-a.

Na primer, trebalo bi pokrenuti program Notepad++. Onda bi trebalo ukucati sledećusintaksu stila koja govori Web sajtu kako da prikaže tekstualne paragrafe:

p{color: blue; text-align: right; font-family: courier;}

Ovaj stil bi trebalo zapamtiti primenom komande Save As unutar programa Notepad++,a zatim imenovati fajl kao CSS-1.css. Može da se koristi bilo koje ime, ali to ime mora dase referencira u HTML kodu željene Web stranice. Trebalo bi zatvoriti ovaj fajl i startovatinovi dokument unutar programa Notepad++, gde će se otkucati sledeći tekst:

CSS/CSS3 225

<html>

<head>

<title>G-4 Super Galeb</title>


<link type="text/css" rel="stylesheet" href="CSS-1.css">

</head>

<body>

<h1>G-4 Super Galeb</h1>

<p align="justify">Avion G-4 Super Galeb je napredni avion ...</p>

</body>

</html>

Ova veoma pojednostavljena sintaksa Web stranice ilustruje kako se radi sa eksternomCSS datotekom. U datoteci .css je specificirano da se paragraf teksta <p> ispisuje plavombojom, da je poravnat tekst po desnoj margini i da se koristi font Courier. U prikazanomHTML kodu, izvršeno je linkovanje ka listi stilova pod nazivom CSS-1.css. Ova lista stilovase nalazi u istom direktorijumu kao i .htm ili .html fajl.

Slika 9.1. Prikaz ekrana na osnovu dokumenta CSS-001.html

U ovom slučaju nije definisan stil za zaglavlje i naslov H1, tako da se za ovaj naslov pri-menjuju podrazumevane standardne veličine koje "propagiraju" pretraživači, kao i boje,pozicije, font (a možda i druge osobine). Kod većine pretraživača naslov je poravnat uzlevu marginu, crne je boje i ispisuje se serifnim fontom.

Kada je sintaksa u pitanju, svako pravilo CSS-a je podeljeno na tri dela – selektor(selector), osobina (property) i vrednost (value); upareni elementi su odvojeni velikimzagradama od ostatka sintakse:

{property: value pair}

Takođe, osobina je odvojena od vrednosti dvotačkom. Kompletno CSS pravilo izgledaovako:

selector {property: value};

226 Multimedija

Evo primera CSS stila iz realnog sveta. Definisan je HTML paragraf <p> i dodeljeno mu jeda se tekst ispisuje plavom bojom:

p {color: blue};

Selektor CSS-a je ono što se u HTML-u zove tag ili element – stavka u HTML kodu koja jeokružena uglastim zagradama (kao što su <h3>, <p> ili <td>).

Prethodna pisanija opisuje najjednostavnije CSS pravilo. Međutim, može da se primenigrupa više selektora na jedan stil (na primer, elementima h1, h2, p mogu u jednompravilu da budu dodeljene određene osobine). Isto tako, može grupa više osobine da budeu jednom pravilu, kao što je prikazano u narednom primeru:

p {

color: blue;

text-align: right;

font-family: courier;

}

Kao i HTML kôd, CSS kôd može slobodno da se preuredi na bilo koji način – linija kodamože da se formatira na bilo koji način. Sledeća sintaksa je identična prethodnoj:

p {color: blue;

text-align: right; font-family: courier;}

Ova dva pravila (načina pisanja sintakse) znače potpuno istu stvar u Web pretraživaču,ali CSS programeri imaju svoje lične želje u vezi formatiranja.

CSS osobina (property) je ono što se u HTML-u zove atribut – ime osobine ili kvalitetakoje je specificirano (kao što su boja ili veličina fonta). Mnogi računarski jezici, takođe,koriste termin property na isti način.

Konačno, CSS vrednost (value) pokazuje stvarne podatke o osobini. Drugim rečima, vred-nosti crno ili zeleno mogu biti vrednosti osobine za color. Vrednost u CSS ima isti kon-cept kao vrednost koja je definisana za promenljivu ili konstantu veličinu u programi-ranju. Računarski programski jezici koriste termin value na isti način na koji to i CSS radi.

Neke vrednosti su opisane sa više od jedne reči, kao što je upotreba boje minty green

umesto green. Kada je vrednost definisana sa više reči, onda se naziv vrednosti daje podnavodnicima:

p {color: "minty green";}

Ako autor želi, može da definiše više tagova (selektora) odjednom. Ovo može da uštedidosta vremena, ako želi, na primer, da mu svi naslovi budu ispisani Arial fontom. HTMLima četiri elementa za naslove H1, H2, H3 i H4. Umesto definisanja svakog pojedinačnogelementa u CSS fajlu, mogu da se navedu i definišu svi selektori zajedno, odvojeni zarezi-ma. Na primer, sledeća sintaksa pokazuje da se svi naslovi (bez obzira na veličinu) ispisujufontom Arial:

h1,h2,h3,h4

{font-family: Arial;}

CSS/CSS3 227

Na slici 9.2 prikazan je izgled ekrana nakon startovanja programa CSS-002.html u ak-tivnom Web pretraživaču.


Evo sledećeg primera. Autor želi da mu se većina paragrafa u tekstu ispisuje crnom bo-jom, ali želi da naglasi neke paragrafe i ti paragrafi bi trebalo da se ispisuju crvenombojom. To je lako uraditi ako se doda klasa (class) selektoru, kao što je prikazano udonjoj sintaksi. Ovde su definisane klase bodytext i uzbuna za selektor p:

p.bodytext {color: black}

p.uzbuna {color: red}

Nakon što se navedu svi članovi klasa selektora p, onda taj deo HTML dokumenta možeda izgleda kao u uokvirenoj sintaksi na slici 9.3.


Autor ne mora uvek da dodeljuje klasu tagu (oznaci). Može da se odredi generička klasakoja se može primeniti na bilo koju vrstu oznake (taga) u HTML kodu. Na ovaj način možeda se izbegne dodeljivanje specifične vrednosti svakom tagu ponaosob. Ovakva generičkaklasa može da se dodeli svakom elementu, kada je to potrebno (na primer, kad god bitrebalo da neki element bude plav).

Na primer, ako autor želi da bude u stanju bilo koji plavi tekst naznači ili istakne (high-light), onda bi trebalo izostaviti ime selektora i pratećih elemenata (na primer, izostaviti

228 Multimedija

oznaku p u prethodnoj sintaksi), kada se vrši definisanje highlight klase u CSS datote-ci. Sledeća generička klasa definiše primenu plave boje:

/* Ova klasa se koristi u svakom HTML tagu */

.highlight {color: blue}


Ako treba da se doda komentar u okviru CSS fajla, onda se komentar prilaže između/* i */ simbola. Svrha komentarisanja sopstvenog koda je lakše njegovo kasnije čitanjei, eventualno, modifikovanje; komentari su od izuzetnog značaja i kada treba promeniti"tuđi" kôd; odmah se pročita svrha ili korišćena tehnika, kada je komentarisan kôd:

/* Ovo je KOMENTAR */

ID selektori (ID selectors) su slični generičkim klasama i oni su nezavisni od konkretnihelemenata dokumenata. Ali ID selektori se razlikuju od klasa u tome što ID selektori radesamo jednom na datoj Web stranici – utiče se samo na jedan element (na jedan sa ID

selektorom). Sve naredne reference u HTML kodu ignorišu već iskorišćen ID selektor.

U sledećoj sintaksi, ID selektor sa nazivom highlight je definisan u zaglavlju (<style>),tako da može da se koristi unutar Web stranice gde god se pominje ID.

<style>

#highlight {color: green; font-style: italic}

</style>

<h2 id="highlight"> ZELENI NASLOV I ITALIC</h2>

<p id="highlight" align="justify">Avion Super Galeb poseduje ...</p>

Na slici 9.5 prikazan je izgled dokumenta na osnovu opisanih elemenata, a celokupan tekstse nalazi u fajlu CSS-005.html.


CSS/CSS3 229

Kada se kuca HTML i CSS kôd (obično) nije važno da li se to radi malim ili velikimslovima. Imena tagova, atributa i tako dalje mogu da se napišu na bilo koji način – Webpretraživač će razumeti da se radi o jednom entitetu. Na primer, BODY, body, Body, boDYili BoDy su sve dozvoljeni tagovi "tela teksta" i mogu da se koriste naizmenično.

U praksi, većina ljudi, uglavnom, pokušava da piše svoje programe u HTML, CSS i drugimkodovima u potpunosti malim slovima. Ako ništa drugo, lakše je za kucanje. Kao drugo,neće biti signaliriziranja oko grešaka ako je negde, greškom, korišćeno neko veliko slovo. Naprimer, XHTML zahteva primenu samo malih slova.

Dodatni izuzeci po pitanju "osetljivosti" na mala i velika slova su izlazne sekvence kojepočinju karakterom & i Internet adresom (URL, Uniform Resource Locator, uniformnilokator resursa). Nisu sve URL adrese "osetljive" na mala i velika slova, ali neke jesu. Ovavrsta konfuzije i neefikasnosti je zaista previše dosadna i nepotrebna.

Nekoliko faktora određuju koji stil "pobeđuje" kada se stilovi "sudare" – nasledstvo,strukturalno drvo u dokumentu, kao i specifičnost (ili bliskost) stila. Verovatno je najlak-še razumeti pravila prilikom "sudara" stilova na osnovu toga gde su stilovi definisani ilocirani. CSS stilovi mogu da se definišu u četiri glavne lokacije:

• podrazumevani stilovi Web pretraživača;

• eksterna lista stilova (.css fajl koji sadrži definicije stila je označen unutar HTMLdokumenta pomoću elementa link);

• ugrađena lista stilova(stilovi su definisani u okviru HTML dokumenta unutar <head>taga i ova vrsta stila se ponekad naziva interna);

• redni stil (definisan kao atribut u samom HTML elementu, a čije je dejstvo ograničenosamo na taj elemenat).

Na primer, ovo je tipičan redni (inline) stil:

<p style="color: blue;" align="justify">

Ova lista, takođe, ilustruje redosled kojim konfliktni stilovi "pobeđuju" u svakom "sukobu"ili preklapanju.


Kada se odredi stil pomoću CSS, stilovi se primenjuju i na elementu i njegovim "potom-cima". Na primer, ako autor navede da <p> element treba da bude prikazan sa zelenompozadinom, onda većina elemenata "dece" tog <p> elementa će imati zelenu pozad-inu. Evo kako to radi:

230 Multimedija

<style type="text/css">

p {background: green}

</style>

Dodatna sintaksa je prikazana u datoteci CSS-007.html, a izgled dokumenta u određe-nom Web pretraživaču je prikazan na slici 9.7.


Bez obzira koliko ko poznaje CSS, većina će nastaviti da piše tekst upozorenja kao HTML

kôd na sledeći način:

<h3><font color="red">UPOZORENJE</font></h3>

To je vrsta linije koja se, verovatno, piše i desetak puta unutar jednog Web sajta. Recimo,na primer, da autor ima niz upozorenja kroz Web sajt i da svakom upozorenju prethodiH3 naslov u crvenoj boji. Za svaki naslov, mora da se navede da je crven pomoću <font>

elementa.

Onda se pojavljuje CSS. Sada može da se napravi jedan selektor H3 na jednoj lokaciji, aipak će da utiče na sve H3 naslove širom celog Web sajta. Taj stil čini da su H3 nasloviautomatski crveni. Ako kasnije autor odluči da promeni H3 naslove iz crvene boje u pode-bljane (bold) naslove, nema problema. Mora tu promenu da obavi samo jednom u CSS

stilu, umesto na desetinama mesta gde su H3 elementi "rasuti" širom HTML koda.

Selektor određuje na koji element u HTML kodu se primenjuje pravilo CSS stila. Na primer,trebalo bi koristiti selektor p ako se želi da se pravilo primenjuje na HTML element <p>

za paragrafe. Ili koristiti selektor h1 da se definiše CSS pravilo koje se primenjuje na H1

naslove u HTML kodu. Drugim rečima, CSS selektor predstavlja HTML element, bez zagrada(<>). Evo kako izgleda definisanje selektora H1 u okviru CSS pravila:

<style> h1 {color: red;} </style>

Ovo pravilo znači da će svaki put, kada bude izabran element H1 u HTML kodu, na njegabiti primenjena crvena boja. Selektori govore CSS-u na koje se HTML elemente primenjujeCSS pravilo.

Da bi ove sitnice mogle da se primenjuju bez upotrebe univerzalnog selektora, trebalo binapraviti grupu selektora na sledeći način:

body, p, table, h1, h2, h3, h4, {font-weight: bold;}

Umesto izgradnje ogromne grupe selektora, može jednostavno da se koristi univerzalniselektor i da promeni tekst celog Web sajta da bude podebljan na sledeći način:

CSS/CSS3 231

* {font-weight: bold;}

Zvezdica, sama po sebi, je univerzalni selektor. To znači da se naznačena osobina pri-menjuje na sve elemente u dokumentu. U prethodnoj sintaksi je obavljeno dodeljivanjeosobine font-weight sa vrednošću bold svakom elementu.

Bilo je već reči o grupisanju. Na jednom mestu je bilo specificirano više selektora, a zatimim je dodeljen stil koji bi trebalo da dele, na sledeći način:

h1, h2, h3, h4, {font-weight: bold;}

Mogu da se koriste i višestruke deklaracije (parovi osobina/vrednost unutar zagrada), nasledeći način:

h1 {font-weight: bold; font: 24px Arial; color: green;}

Trebalo bi zapamtiti, kada se koristi višestruka deklaracija, da se odvajaju tačkom-zarezom(;). Prostori (blanko prostori) se ovde, jednostavno, ignorišu od strane CSS-a, tako da nemogu da se računaju kao prostor za razdvajanje deklaracija, jednih od drugih.

Međutim, izostavljanje konačne (završne) tačke-zareza nije dobra ideja. Jednostavno trebada autoru pređe u naviku da svaku deklaraciju završava tačkom-zarezom. Izostavljanjetačke-zareza iz liste deklaracija veoma često izaziva konfuziju unutar Web pretraživača. Naslici 9.8 prikazan je primer gde je naslov H1 prikazan zelenom bojom i podebljan, fontomArial i veličinom 28pt.


Na osnovu ovoga, sledi i logičan zaključak da je moguće istovremeno grupisati i selektorei deklaracije, na sledeći način:

h1, h2, h3, h4 {color: green; background: white; font-family: Arial;}

Selektori atributa mogu da prošire korisnost i fleksibilnost klasa i ID atributa, pružajućiveću slobodu da se probaju neki korisni trikovi.


232 Multimedija

Do sada je bilo eksperimentisanja sa kratkim primerima – definisanje jednog selektora idodavanje jednog ili dva elementa u HTML kôd. U primeru CSS-010.html kreirana je Webstranica, a unutar CSS-5.css datoteke (koja je uvrštena u sintaksu pomenutog .html

fajla) mogu da se menjaju određeni parametri.


Izgled sadržaja fajla CSS-010.html je prikazan na slici 9.11.

Slika 9.11. Prikaz sadržaja dokumenta CSS-010.html

Sadržaj pratećeg CSS-5.css, koji se nalazi unutar fajla CSS-010.html, je:

strong {color: #400000;}

em {color: #400000;}

p {mso-margin-top-alt: auto;

margin-right: 0mm;

mso-margin-bottom-alt:auto;

margin-left: 0mm;

text-indent: 12.25pt;

mso-pagination: widow-orphan;

font-size: 12.0pt;

font-family:"Trebuchet MS";

CSS/CSS3 233

mso-fareast-font-family: Times;}

h1,h2,h3,h4 {font-family:"Trebuchet MS";

mso-fareast-font-family: Times;}

Trebalo bi obratiti pažnju da su oba selektora (strong i em) definisana da imaju boju savrednošću #400000. Pošto su ovi stilovi ugrađeni u ovom HTML dokumentu, oni menjajueksterne liste stilova, koje su povezane sa dokumentom. Ugrađeni stilovi su "preči" odspoljašnjih stilova, koji su namenjeni da menjaju HTML tagove. "Preči" stilovi se, takođe,opisuju kao precizniji ili specifičniji. Dakle, ugrađeni stilovi "pobeđuju" ako dođu u "sukob"sa eksternim stilovima.

Evo nekih pravila o specifičnostima CSS-a:

• Elementi koji se tretiraju kao "deca" (kao što element <p> paragrafa u okviru jednog"roditelja" <body>) nasleđuju stilove roditelja. Ako <body> ima stil u vezi sa timda se tekst naglašava podvlačenjem, onda će i svaki <p> element unutar roditeljskogelementa <body> naslediti isticanje teksta podvlačenjem. Međutim, ako postojespecifičniji ("važniji") stilovi u Web stranici (kao što je inline stil), onda će oni"nadjačati" i zameniti stil sa podvlačenjem teksta.

• CSS stilovi sadržani u HTML dokumentu (ugrađeni ili inline stilovi) imaju prednostnad spoljnim stilovima (nalazi u posebnom .css fajlu i navedeni su u HTML kodupomoću taga <link>).

• Stil sa !Important komandom ima prednost, nezavisno od drugih faktora.

9.2. CSS i pozicioniranje

Možda jedan od najosnovnijih elemenata dizajna je pozicioniranje. Na primer, korisnik do-bije pet objekata i od njega se traži da ih organizuje (pozicionira) unutar okvira. Tekstura,boja ili oblik tih pet objekata nisu mnogo važni. Ako je korisnik talentovan, onda možeda napravi da ti objekti izgledaju dobro unutar okvira uređujući (pozicionirajući) ih nanajbolji način.

Pozicioniranje elemenata na Web stranici je, takođe, od ključnog značaja za "uspeh" testranice. Autor ne želi da ljudi misle da su elementi samo pali tu i da se slučajno nalazena tim mestima.

Uobičajeno je da jednostavna Web stranica organizuje njene elemente od vrha do dna,ređajući ih jednu ispod druge, poravnavajući ih uz levu marginu stranice. Sledeća skraćenasintaksa prikazuje dva paragrafa, sa slikom između njih:

<html>

<head>

<title>G-4 Super Galeb</title>


<link type="text/css" rel="stylesheet" href="CSS-5.css">

234 Multimedija

</head>

<body>

<h1 align="center">G-4 Super Galeb</h1>

<p align="justify">Prvi paragraf ...</p>

<p>

<img src="g-4-05.jpg"> <img height="200" width="530" src="g-4-05.jpg">

</p>

<p align="justify"> Drugi paragraf ...</p>

</body>

</html>


Poboljšanje dizajna prikazanog na slici 9.12 je postignuto na jednostavan način – dodatje atribut da centrira naslov:

<h1 align="center">G-4 Super Galeb</h1>

HTML nije dizajniran da se efikasno bavi izgledom i razmeštajem elemenata van strani-ce. CSS je, delom, razvijen da reši ovaj problem. CSS sadrži različite alate za pozicioni-ranje, uključujući i sofisticirano relativno pozicioniranje. Može da se definiše relativnalokacija jednog objekta u odnosu na drugi, koji se već nalazi unutar Web stranice. Ovorešava problem korisnika prilikom promene veličine prozora Web pretraživača. Relativnopostavljeni objekti zadržavaju međusobni odnos, bez obzira šta se dešava sa samim pre-traživačem. Relativno pozicioniranje znači da je elemenat lociran (pozicioniran) u odnosuna neki drugi ili postojeći element.

Relativna lokacija može da znači da je element smešten u sredini drugog elementa, ili 35piksela sa njegove leve strane ili 25% ispod njegovog vrha. Suština je da pozicija prvogelementa zavisi od lokacije (pozicije) drugog elementa.

Apsolutno pozicioniranje navodi određeni broj (piksela, tačaka, inča, šta god izabranimerni sistem zahteva) kojim element treba da bude pozicioniran i posatvljen na određeni

CSS/CSS3 235

položaj. Apsolutna veličina je opisana brojevima koji definišu širinu i visinu, kao što jeopisana veličina slike u ranijem HTML kodu:

<img height="200" width="530" src="g-4-05.jpg">

Apsolutni položaj se opisuje sa dva broja – gornji (top) i levi (left). Ovi brojevi se u tehnicinazivaju koordinate, jer dva broja će "reći" pretraživaču gde tačno da postavi element uprozoru pretraživača. Vrednost top 70mm će smestiti element 70mm ispod gornje iviceokvira prozora pretraživača, a vrednost left 50mm će pomeriti element 50mm od leveivice okvira prozora pretraživača. Koristeći ove dve koordinate, autor može da postavi bilošta, bilo gde.

Sledi pregled različitih načina kako može da se promeni ili definiše pozicija u CSS selektoru:static, relative, absolute, fixed i inherit.

Režim static je sličan uobičajenom (default) režimu – šta se dešava kada se ne navedenikakva vrednost položaja ili pozicije. Statički elementi se prostiru na podrazumevaninačin (slažu se sa leve strane), ali ne mogu biti premešteni; oni ostaju gde jesu i ne moguda im se dodele top i left koordinate. Ne može da se podešava položaj statičnog ele-menta ni korišćenjem skript jezika, kao što su VBScript ili JavaScript. Ti elementi ostajutamo gde su – statični (static).

Relativno pozicioniranje je slično statičnom pozicioniranju, ali može da koristi top ileft koordinate, kako bi se menjalo uobičajeno "prostiranje" ili pozicioniranje elemenata,relativno (relative) u odnosu na druge i postojeće elemente.

Apsolutno pozicioniranje odvaja element od drugih objekata – njegova pozicija nema"veze" sa njima i nije u relativnom odnosu na njih. Reč je o nezavisnom pozicioni-ranju. Nalazi se u prozoru pretraživača na odredjenim rastojanjima u odnosu na gornjui levu ivicu prozora. Ako se primene top i left atributi i ako im se dodele vrednostitop: 0px; left: 0px, onda će element da bude smešten u gornjem levom uglu prozorapretraživača.

Da bi se videlo kako apsolutno pozicioniranje utiče na smeštaj slike, trebalo bi probatisintaksu ispod (to je deo sintakse koja se nalazi u fajlu CSS-012.html):

<style> .klasa {position: absolute; top: 0px; left: 0px;} </style>

<p><img class="klasa" src="g-4-05.jpg"></p>


236 Multimedija

Ovaj primer pokazuje kako pozicioniranje grafike na koordinatu 0, 0 (absolute) uzrokujeda se delimično pokrije naslov i potpuno pokrije tekst unutar elementa <body>.

Šta ako se promeni atribut po pitanju poziciniranja, od apsolutnog u relativni? Sintaksaje slična prethodnoj, samo je promenjen atribut absolute u relative:

<style>

.klasa {position: relative; top: 0px; left: 0px;}

</style>

<p><img class="klasa" src="g-4-05.jpg"></p>

Promena atributa pozicinoiranja sa apsolutne relativnu vrednost dovodi do uobičajenogponašanja. Grafički element je postavljen na "normalno" mesto – po redosledu elemenatana osnovu njihovog reda u HTML kodu, kao što je prikazano na slici 9.14.


Elementi sa fiksnom vrednošću za položaj ostaju na svojoj lokaciji u pretraživaču, čak iako korisnik skroluje (pomera sadržaj prozora) kroz pretraživač. Ostali elementi koji nisufiksni se pomeraju prilikom skrolovanjam ali fiksni elementi ne. Ovaj trik može da se koristikako bi iz dobio "putujući" naslov ili ako treba naslove polja fiksirati za vrh tabele.

Vrednosti top i left su specifične lokacije u odnosu na prihvatni objekat. Na primer,ako specifični element nije "zatvoren" unutar drugog elementa, vrednosti top i left supodrazumevane za smeštaj takvih elemenata u odnosu na prozor pretraživača (ili prozorprikaza ili viewport).

Ponekad su elementi pozicionirani u okviru drugih elemenata (kao što je paragraf <p> unu-tar bloka <div>). U tom slučaju, precizirajući vrednosti top i left u odnosu na element"kontejner", blok <div> će da okruži paragraf <p>.

Trebalo bi zamilsiti dokument koji je sastavljen od blokova koji su smešteni unutar drugihblokova. Jednostavan dokument sa nizom paragrafa (<p>) može da se posmatra kao ele-ment <body> koji sadrži <p> elemente. Onda bi zvanična terminologija mogla da bude dase tekstualni blok sastoji od blokova paragrafa.

CSS/CSS3 237

9.3. CSS i tekst

CSS nudi mnogo načina da se uredi tekst. Ako se naprave mudri izbori, ukupni dizajn Webstranica može da utiče na posetioce sajta. Sa druge strane, inače elegantna i moćna Webstranica može biti uništena ako tekst nije na odgovarajući način integrisan sa grafičkimefektima.

Korisnik vidi na odgovarajućem sajtu i grafiku i tekst. Kao dizajner, autor je odgovoranza izbegavanje očiglednih problema, kao što su dovoljno tamne grafičke pozadine da jetekst u prvom planu nečitljiv, "iskačuće" animacije, odvlačenje pažnje bojama, loš opštidizajn itd.

Ali autor je odgovoran i za izbor karakteristika teksta i grafičkih elemenata, kako bisveukupni dizajn odražavao ideju koju autor želi da projektuje do korisnika. Čak i kadase izabere vrsta slova, moraju da se razmotre i druga pitanja prilikom izrade CSS stilovaza tekst – veličina fonta, da li se ispisuje podebljano (bold) ili zakošeno (italic), da li jetekst centriran ili poravnat po obe margine, kako se pišu stepeni ili indeksi, da li se pišeprvo slovo poglavlja uvećano ili da li je tekst trebalo da bude podvučen.

Prvo, porodice fontova (font families) dele dovoljno karakteristika, tako da je to dovljno uvećini slučajeva. Šta više, velika većina Web korisnika koristi operativni sistem Windows,koji se isporučuje sa standardnim setom fontova, uključujući Times New Roman. Ovo jefont koji će koristiti većina dizajnera, a čak neka ispitivanja pokazuju da font Times New

Roman koristi oko 96% dizajnera.

Porodice fontova su, što nije iznenađujuće, navedene u CSS pravilima korišćenjem atributaili osobine font-family. Ako autor želi da svi paragrafi u dokumentu koriste font Arial,onda bi sintaksa trebalo da izgleda ovako:

p {font-family: arial;}

Neka imena fontova imaju više reči (i međuprostor), kao što su Times New Roman iliShowcard Gothic. U tim slučajevima (kao i ako naziv sadrži simbole kao što su % ili @),trebalo bi umetnuti ume u pojedinačne navodnike, na sledeći način:

p {font-family: ’Showcard Gothic’, Arial;}

Fontovi spadaju u dve osnovne kategorije, na osnovu toga da li imaju ili nemaju "zavijutke"i različite širine linija. Na slici 9.15 prikazan je primer SansSerif fonta i ti fontovi imajujednostavan stil, fiksnu širinu linija i linije se jasno završavaju.

Slika 9.15. SansSerif fontovi

Kada se pogleda slika 9.16, vidi se očigledna razlika kada je u pitanju Serif font. Stil nijejednostavan, postoje linije različite širine, a i postoje završeci, koji nisu baš preporučljivi.

Slika 9.16. Serif fontovi

238 Multimedija

Ne bi trebalo ni trošiti mnogo vremena monospace fontove. Ovakvi fontovi (Courier) sekoriste poodavno. Oni su se koristili, ne zato što su izgledali dobro ili što su bili laki začitanje, već zato što su rešili tehnološki problem. Ova vrsta fonta ima istu širinu svakogkaraktera, čak i kada je to besmisleno. Drugim rečima, slovo i je iste širine kao i w. Dakle,postoji "hrpa" belog prostora na obe strane slova i, tako da ostala slova imaju ili previšeili premalo prostora između njih.

Kada autor želi da podesi "težinu" (weight, darkness, boldness, lightness) fonta, ondamože da pribegne relativnim CSS vrednostima – normal, bold, bolder, lighter, 100,200, 300, 400, 500, 600, 700, 800, 900, inherit. Što je veća vrednost, to je font"tamniji" ili "teži". Najčešće se jednostavno koristi bold vrednost:

H2 {font-weight: bold;}

Vrednosti od 100 do 900 su samo naznake željene težine, ali malo korisničkih pisamaimaju ovoliko raznovrsnu težine. Iako ova šema nije apsolutna, vrednosti od 100 do 300

mogu da budu ekvivalentne vrednosti light, kao što je font Copperplate Gothic Light,vrednosti od 400 do 500 kao redovni (CSS vrednost normal) i vrednosti od 600 do 900

kao bold. Međutim, ako font ima definisanu "težinu" kao bold, ultrabold i slično, ondabrojčane vrednosti dodaju na njegovoj specifičnosti.

Autor može da koristi vrednosti lighter ili bolder kako bi naveo stepen naglašenosti uodnosu na osobine "roditeljskog" elementa, na sledeći način:

body {font-weight: bold;}

p {font-weight: bolder;}

U ovom slučaju, <body> elementi su podebljani, ali <p> elementi su, ako je to moguće,prikazani u još "debljem" izdanju. Font Times New Roman nema nikakvu "težinu" izvanvrednosti bold, tako da vrednost bolder, kod njega, nema nikakvog efekta. Međutim,u sledećoj sintaksi, tekst van <p> oznake je redovna (vrednost regular), onda je tekstunutar <p> tagova podebljan (vrednost bold):

body {font-weight: regular;}

p {font-weight: bolder;}

Vrednost small-caps je specijalizovana varijanta sa normalnim slovima. To stvara velikaslova koja su oko 75% veličine normalnih velikih slova. Ovo se ne koristi često, ali izgledadobro kada je potrebno. Najčešće se koriste kada treba označiti datum, kao što je na slici9.17 reč o datumu pre nove ere.


CSS/CSS3 239

Dve stvari bi trebalo zapamtiti prilikom odlučivanja o veličini fonta za Web stranicu. Prvo,trebalo bi se ograničiti se na dve ili tri veličine po strani; previše različitih veličina zbuničitaoce i stranice izgledaju pretrpano i neorganizovano. Isti efekat može da se dobije iizborom previše različitih fontova. Drugo, veličine fontova bi trebalo da odgovaraju pros-toru predviđenom za to na stranici. Korišćenje malih veličina slova u velikom praznomprostoru može da bude dezorjentišuće. Jednako neatraktivno je primena velikih slova umalom prostoru.

Trebalo bi povesti računa o još jednoj stvari kada se razmatra veličina fontova. Reč jeo veličini monitora korisnika i njihova rezolucija. Uobičajeno je da se prave Web strani-ce za veličine monitora od 17 do 19 inča, koristeći 800 × 600 ili 1024 × 768 rezolucije,a rezultat će verovatno zadovoljiti blizu 96% ljudi koji posete Web sajt. Oni će koristitimonitore slične veličine, kao i slične Web pretraživače. Ovo nije razlog za brigu. Ako autorpokušava da zadovolji sve oprečne zahteve (različite veličine monitora, različite rezolucije,softver otvorenog koda, prenosni uređaj sa malim ekranima, različiti operativni sistemi),neće zadovoljiti nikoga. Preporuka je da se "prati" većina i da se vidi šta većina korisnikaima na raspolaganju.

Razlike u veličinama i rezolucijama monitora većine ljudi nisu ogromne, ali trebalo bi koris-titi relativne veličine i pozicije, unutar Web stranice, kad god je to moguće. Na ovaj način,dobijaju se najpredvidljivije proporcije na većini pretraživača. Evo CSS vrednosti koje moguda se dodele atributu font-size kako bi se definisala veličina fonta: xx-small, x-small,small, medium, large, x-large, xx-large, smaller, larger, length, percentage iinherit.


Vrednost xx-large je najveća vrednost na listi mogućih vrednosti za veličinu CSS teks-ta. Međutim, ako se zatim primeni larger vrednost, onda Web pretraživač neće da prikažejoš veći tekst, nego će i da ga smanji.

Takođe, mogu da se izbegnu relativističke specifikacije do sada raspravljane i veličina slovamože da se se definiše u mernim jedinicama, kao što su 0.5 inča ili 12pt. Sledeći primerdefiniše da se tekst ispisuje fontom čija je veličina dve desetine inča, a da se naslov prvognivoa (h1) ispisuje fontom veličine 24pt:

body {font-size: .2in;}

h1 {font-size: 24pt;}

Tokom dosadašnje pisanije videlo se da postoji mnogo načina kako da se definiše kako ćeda izgleda tekst i koje će osobine da budu aktivne:

240 Multimedija

p {font-family: Arial; font-size: 24px;

font-weight: bold; font-style: italic;}

Ali, ako autor voli da koristi skraćenice, to je njegova stvar, ali trebalo bi probati kada suu pitanju font atributi. Prethodna sintaksa za p može da se kondenzuje na sledeći način:

p {font: bold italic 24px Arial;}

Oba stila će imati isti rezultat, ali kondenzovano verzija štedi malo vremena ako se autorseća pravila! A pravilo glasi da prve dve vrednosti u listi (style i weight) mogu bitinavedene bilo kojim redom. Na primer, prethodna sintaksa može da se napiše i na sledećinačin, bez ikakvih posledica na izgled teksta u Web stranici:

p {font: italic bold 24px Arial;}

Visine linija teksta su prilagođene iz dva osnovna razloga. Naslovi često izgledaju boljesa manje praznog prostora između redova; tekst sa fontom manje veličine su bolje čitatisa više belog prostora između redova.


Kao što se može videti na slici 9.19, prilagođena visina linije teksta na dnu pretraživačaizgleda bolje nego podrazumevana na vrhu. Novine i časopisi, a da se ne pominju TV,bilbordi i drugi mediji, gotovo uvek smanjuju prored u svojim naslovima. To jednostavnoizgleda bolje nego da nepotrebno beli prostor pluta u između redova.

Korisnici programa Micorsoft Word su navikli na neke nazive efekata na tekstu, ali CSSmalo odstupa od "odomaćenih" naziva. Na primer, u Word-u precrtavanje slova se nazivastriketrough, ali u CSS-u ta vrsta efekta "nosi" naziv line-through. Autori i korisnici bitrebalo da se naviknu na ovo i da budu spremni da prihvate određene izmene i prome-ne. Primena uobičajenih efekata na otkucani tekst prikazana je na slici 9.20.


CSS/CSS3 241

U CSS stilu ili pravilu, može da se opiše pozicija i veličina na mnogo načina, koristećirazličite merne jedinice. Često mogu da se izaberu proizvoljne jedinice, mada neke speci-fične vrste mernih jedinica najbolje rade u određenim situacijama.

Na primer, mnogi dizajneri koji rade sa papirom i olovkom koriste tačke (points) za određi-vanje veličine fontova. Tačka je apsolutna dužina i iznosi 1/72 inča. Korišćenje apsolutnihveličina slova prilikom specifikacija za magazin ili knjige je dobro – na kraju krajeva, ko-risnik ne može da smanji, isteže ili promeni razmeru (odnos visine i širine) stranice uknjizi. To kod pretraživača može da se menja po volji. Ako se "vuče" jedna strana pre-traživača, korisnik ga menja i prozor pretraživača postaje tanji ili širi (deblji). Drugimrečima, menjanjem oblika prozora pretraživača menja se i razmera stranice; na primer, izkvadrata u pravougaonik.

Sledi spisak i objašnjenje svih jedinica koje mere dužinu:

• px (pixels, pikseli) – pikseli su najmanja jedinica na displeju – ove tačkice nekadmogu da se vide ako se korisnik približi dovoljno blizu TV-u ili monitoru; na primer,postavljanjem rezolucije monitora na 800×600 piksela, znači da je na tom monitoruprikazano 800piksela po širini i 600 piksela po visini.

• pt (points, tačke) – tačka je jednaka 1/72 inča; points i picas su klasični tip merenjaslova, a kod većine pretraživača uobičajena je veličina fonta 12pt.

• pc (picas, pajkovi) – jedan pajk iznosi 12pt.

• mm (milimeters, milimetri) – milimetar je 0, 0394 inča, tako da jedan inč sadrži25, 4mm; jedan centimetar sadrži 10mm i veći deo sveta koristi ovaj metričkisistem.

• cm (centimeters, centimetri) – centimetar je 0, 3937 inča, tako jedan inč sadrži2, 54 cm.

• in (inch, inč) – inč je jedinica koju koriste SAD, Velika Britanija i još neke zemlje. Je-dan inč iznosi 25, 4mm.

• em – ovo je jedinica mere koja potiče od približne širine slova m tekućeg fonta; ovose generalno smatra najboljim načinom za definisanje dužina.

• ex (the x-height, visina slova x) – predstavlja visinu malog slova x tekućeg fonta;Web pretraživači obično dele vrednost em sa 2 kako bi dobili vrednost ex.

• % (percent, procanat) – procenti su odlični za određivanje relativne veličine.

Stručnjaci preporučuju da se em koristi prilikom dizajniranja Web stranice, jer je fleksibilna.Jedinice em i ex su relativne u odnosu na svaku familiju fontova. Ovo je korisno jer toznači da se veličina određena pomoću em menja na precizan način, na osnovu rezolucijekorisnikovog monitora, prioritetnih postavki i drugih faktora. Drugim rečima, koristećiem omogućeno je da se odredi šta se dešava u odnosu na familiju fontova. Rezultat jeproporcionalan ostalim kvalitetima sloga i okolnog teksta. Takođe, relativne specifikacijeprimenom em omogućavaju ljudima sa hendikepom da uvećavaju slog u svom pretraživačupo potrebi. Fiksne specifikacije kao što su px ili pt ne nude korisniku ovu opciju.

242 Multimedija


Ako je autor ili korisnik upoznat sa klasičnim HTML procentualnim specifikacijama (naprimer, <p width=’80%’>), neće imati problema sa razumevanjem kako procenti rade uCSS-u. Definisani HTML kôd u stvari kaže da se formira paragraf širine 80% (četiri petine)od ukupne širine prozora Web pretraživača. Drugim rečima, procenat je u specifičnomodnosu prema pripadajućem "ontejneru" ili "roditelju". CSS procenti rade na isti način.


Boja je korisno i za projektovanje i organizovanje Web stranice. Izbor efikasnih, odgo-varajućih i harmoničnih boja dosta doprinosi ukupnom uspehu Web stranice. Možda jemanje očigledna uloga koju boju igra u privikavanju oka na strukturu i logiku primenjenograsporeda.

Mogu da se kreiraju logičke zone sa bojom, baš kao što se to radi tabelama ili linija-ma. Na primer, može da se pomogne korisnicima bojenjem linkova istom bojom ili njihovimgrupisanjem u posebnoj oblasti na Web stranici, sa zajedničkom pozadinskom bojom. Sveovo pomaže da posetilac sajta shvati da svi naslovi u ovoj oblasti, sa primenjenim bojama,imaju nešto zajedničko. A ako autor zaista želi da im privuče pažnju, onda bi trebalo daizabere neku specifičnu i nesvakidašnju boju.

Mnogi od najbolje dizajniranih sajtova imaju učitanu pozadinsku sliku, jer stvaranje takveslike u grafičkom programu kao što je Photoshop daje autoru kontrolu nad svakim pikse-lom pozadine. Na taj način autor može da kreira prijatan, složen dizajn bilo koje vrste, ane da statička boja "izigrava" pozadinu:

<body background="Pogled-na-vodu.jpg">

CSS/CSS3 243

Na primer, autor piše Web stranicu koja sadrži posebne stavove upozorenja, a želi da seta upozorenja izdvajaju. Pored toga što će takav tekst da zakosi (italic), želeće i da gaispiše crvenom bojom. Da bi se postigao ovaj efekat, trebalo bi definisati stil paragrafakoji se zove upozorenje, a zatim bi trebalo dodati zakošenje i specificirati boju:

<style> p.upozorenje {color: #FF0000; font-style: italic;} </style>


Boja pozadine se ne odnosi samo na tekst. Može da se koristi da se odredi boja

graničnog okvira ili okvira. U sledećoj sintaksi podešava se color atribut "na" slikuskyblue. Alternativno, može da se koristi border-color atribut, ako autor to želi. Poredtoga, može da se podesi border-width kako bi se "proširila" granična linija okvira. Ta-kođe, mora da se navede i atribut border-style:

<style>

img {border-style: solid; border-width: 25px; color: skyblue;}

</style>


Ako autor želi da kreira suptilne, atraktivne granice, može da koristiti komandu inset sarazličitim bojama za okvir oko grafičkog elementa. To stvara zakošen izgled okvira (slika9.25), koji je svakako korak napred u odnosu ravne, obične granične okvire prikazane naslici 9.24.


244 Multimedija

Kada se koristi inset dizajn potamnjuju se boje koje se koriste za levu i gornju graničnuliniju, a ostavlja ravne donju i desnu graničnu liniju. Tasteri, koji nisu aktivirani (primenjenoutset), imaju svetlije gornju i levu graničnu liniju, u odnosu na tamnije donju i desnugranične linije. Zašto je to tako?

Kod grafičkih elemenata operativnog sistema Windows (meniji, dugmad, prozorski okvirii tako dalje), pretpostavlja se da svetlo "pada" iz gornjeg levog ugla ekrana. Onda jelogično da neaktivirani elementi budu svetliji u gornjem levom uglu, a da senka pada kadonjem desnom uglu. Međutim, ako se objekat "pritisne" i on "utone" u pozadinu, ondase dešava suprotna situacija.

U prethodnoj sintaksi trebalo bi promeniti atribut inset u outset i rezultat ove promeneće biti vidljiv na slici 9.26:

<style>

img {border-right: silver outset; border-left: silver outset;

border-top: silver outset; border-bottom: silver outset;

border-width: 15px;}

</style>


Pozadina elementa uključuje i njegove granice i dodatne sadržaje ili proširenja. Opcijapadding dodaje prostor oko elementa. Evo primera koji ilustruje kako utiču atributipadding i background-color na izgled dokumenta (slika 9.27).


Atribut background-color prihvata iste vrednosti boje kao što ih ima boja prednjeg(foreground) plana. Uobičajeno je da je pozadinska boja transparentna, tako da će seteksture, slike ili drugi elementi, koji se nalaze ispod pozadine, videti. Takođe, pozadinskaboja može da se dodeli skoro svakom elementu – od linijskih em elemenata do celokupnog<body> teksta.

CSS/CSS3 245

Trebalo bi izbegavati "čudne" kombinacije boja. Neki dizajneri Web stranica u iskušenjuda stvore "specijalne efekte", stvaraju grozomorne, neki bi čak rekli vulgarne, boje zakrpana svojim stranicama. Osim ako se ima vrlo dobar razlog da se to uradi, trebalo bi izbega-vati neisplanirane, detinjaste izglede stranica, sa različitim zonama boje. Klasičan primeronoga što ne bi trebalo raditi je sledeća sintaksa:

<style>

body {background-color: DodgerBlue;}

p {background-color: lightgreen; color: HotPink; font-size: 48px;}

i {background-color: OliveDrab; color: orange;}

</style>

Ne samo da se takve stranice teško čitaju, nego su one jednostavno ružne, kao što tomože da se vidi na slici 9.28.


Ako CSS ne učini ništa drugo nego autoru dodeli kontrolu nad time kako će Web stranicada izgleda, to bi i dalje bilo ogromno poboljšanje u odnosu na HTML. U ovom delu ćebiti reči o različitim načinima da se poboljša izgled Web stranica koje koriste posebnealate i tehnike. Može da se počne od opcije kerning – podešavanja razmaka između

karaktera unutar teksta.

Opcija kerning – prilagođavanje prostora između karaktera – ponekad se pogrešno koristiza isticanje. Neki dizajneri Web stranica pokušavaju da "razvlačenjem" reči, primenomove opcije, naglase neke stvari. Trebalo bi primeniti i ostale načine kako bi se neki tekstnaglasio – podebljanje, boja, velika slova i slično. Ali praksa pokazuje da bi ove vizuelnetrikove trebalo izbegavati kao način naglašavanja reči ili fraza. Za naglašavanje reči ilifraze trebalo bi koristiti italic, i samo italic.

Opcija kerning se koristi da "podesi" razmak između slova u naslovima. Autor možeda smanji razmak između slova kako bi reči u naslovu bile zajedno i kako bi naslov biokompaktniji. Većina fontova (osim monospace fontova kao što je Courier) imaju varijacijeu razmaku između slova kako bi se poboljšala čitljivost familije fontova.


246 Multimedija

Kao što se vidi na slici 9.29, kada se koristi negativna vrednost za letter-spacing

(-0.08em u ovom primeru; redefiniše širinu slova m), karakteri u naslovu su zbijeniji. Tra-dicionalno, blago "sabijanje" prostora između karaktera u naslovima se smatra estetskisuperiornim u odnosu na nemodifikovanu verziju istog naslova. Ako se autor ili korisnik neslažu da donji naslov na slici 9.29 izgleda previše "labavo" sa podrazumevanim razmakomizmeđu slova, onda bi u sintaksi trebalo postaviti vrednost 0em, što znači da nema promenau odnosu na uobičajeni razmak između slova.

Ukoliko neki od karaktera iz naslova izgleda previše "labavo", možda će autor želetida odvoji vreme za malo ručno podešavanje. Opcija kerning je često, naročito efikasnakada veliko slovo prati malo slovo, na način na koji malo slovo e prati veliko K u rečiKerning. Bez primenjene opcije kerning, ostaje "nepristojan" jaz između slova, kao štoje prikazano na slici 9.30.


Na slici 9.31 je još vidljiviji efekat primene opcije kerning, jer je očigledno šta se dešavasa međuprostorom između pojedinih karaktera.

Slika 9.31. Kerning – vidljivi efekti

Ako se naslov sastoji iz više redova, onda bi trebalo da se autor pozabavi i vertikalnim po-dešavanjem proreda – smanjenje belog prostora između redova teksta, kao što je prikazanona slici 9.32.


CSS/CSS3 247

Ako vrednost atributa font-size "prati" kosa crta i iza nje procentualna vrednost, ondato definiše procentualno prilagođavanje željene visine linije. U donjoj sintaksi, preciziranavrednost 99%, ali autor može da se "igra" sa razmakom dok ne dođe do izgleda koji njemuodgovara:

<style>

h1.spaced {font:bold 48px/.99 "Arial Black"; letter-spacing:-.06em;}

h1 {font-family:Arial Black; font-size: 48px; letter-spacing:-.06em;}

h1.normal {letter-spacing:normal;}

.kern {letter-spacing:-.16em;}

.ultrakern {letter-spacing:-.20em;}

</style>

Atribut word-spacing, kao i letter-spacing, može da se koristi za kreiranje poravnatog(justifed) teksta po obe margine. Međutim, Web dizajneri mogu dobro da iskoriste opcijukerning na naslove, kako bi smanjili nepotrebne bele razmake između reči. Evo primerakoji smanjuje prostor između reči za 0,45em:

style>

h1.WordSpaced {font-family: Arial Black;

font-size: 48px; word-spacing: -.45em;} </style>

Kao što može da se vidi na slici 9.33, smanjivanje prostora između reči poboljšava izglednaslova.


Kao i kod određivanja praznog prostora između karaktera i linija, i ovde mogu da sekoriste bilo koje CSS jedinice za određivanje razmaka između reči. Međutim, jedinica em

je obično najpouzdaniji ako, iz nekog razloga, Web pretraživač korisnika zameni izvornifont. Merenje pomoću jedinice em je najpreciznije merenje prosečne veličine karaktera zavećinu fontove.

Ovde će biti malo više priče o različitim mogućim poravnanjima. Atribut vertical-alignodređuje kako se tekst poravnava po vertikali u odnosu na drugi element, kao što su tekstili slike.

Atributu vertical-align može da se dodeli jedna od sledećih osam vrednosti: bottom,baseline, middle, sub, super, text-top, text-bottom i top. Ovom atributu moguda se dodele u određene vrednosti, kao što su, na primer, 5px ili procenti.

248 Multimedija

U okviru elemenata bloka, atribut vertical-align nema efekta u odnosu na blok. Me-đutim, taj atribut radi na usklađivanju elemente unutar ćelije tabele ili unutar parcijalnogteksta.


Ako autor želi da koristi stepene (superscript) ili indekse (subscript), trebalo bi da ima naumu da se veličina teksta ne smanjuje automatski. Ako se želi taj efekat, onda bi moralada se navede manja veličina fonta. Da bi se dobio željeni efekat (prikazan na slici 9.35),trebalo bi kombinovati stepene sa procentualnim smanjenjem atributa font-size.


Mogu da se odrede i apsolutna rastojanja kada se koristili poravnavanje po vertikali. Do-voljno je koristiti bilo koju od uobičajenih mernih jedinica, kao što su px, inch i takodalje.

Podešavanje (poravnavanje) teksta po horizontali pomoću atributa text-align je sličnoporavnanju po vertikali, osim što se koriste vrednosti left, center, right i justify, arezultati se odnose na celokupni paragraf, a ne na pojedinačne reči.

Vrednosti, u suštini, propagiraju ista poravnanja koja mogu da se pronađu u bilo kom pro-gramu za obradu teksta. Uobičajeno poravnanje je poravnanje po levoj margini (left). Atri-but text-align može da se koristi samo sa elementima na nivou bloka, kao što je elementparagrafa <p>, kao što je prikazano na slici 9.36.


CSS/CSS3 249

HTML nije imao sposobnost uvlačenja prvog reda paragrafa ili pasusa, tako da su ljudipribegavali ubacivanju nevidljivih slika i drugim trikovima. Dodavanje prostora ne radizbog toga što je kod HTML-a isključena opcija za dodavanje razmaka. CSS je odličnoreagovao sa svojim atributom text-align, po tom pitanju. Kada se ovaj atribut koristisa elementima na nivou blokova kao što je <p>, onda može da se odredi veličina zauvlačenje prvog reda kao, na primer, 6em, 5px ili procentualna vrednost. Na slici 9.37 jeprikazano kako se definiše vrednost uvlačenja prvog reda paragrafa ili pasusa.


Većina Web sajtova izgledaju najbolje sa nekom pozadinskom teksturom i grafikom."Obične" pozadinske boje deluju prilično "grubo", ali lepa, uzdržana, bleda tekstura izateksta unapređuje mnoge Web stranicu. Dobro postavljena pozadinska grafika može samoda unapredi Web stranicu. Tekstura, takođe, pomaže da se ujedine stranicu, povezivanjemrazličitih zona.

Na primer, može da se kreira pozadina od male, ponavljajuće teksture. Primer na slici 9.38pokazuje pozadinu sastavljenu od "pločice" veličine 236 × 214 piksela, kao deo teksturekoja se pruža preko celokupne pozadine pretraživača. Uz operativni sistem "dolaze" imnoge teksture, ali autorove teksture (koje on napravi sâm) su prilično superiorne uodnosu na one koje su isporučena sa operativnim sistemom Windows.


Autor može da podesi pozadinu za celu stranu (u <body> elementu), ili za pojedineelemente, kao što je naslov (h2) u sintaksi ispod. Sposobnost da se doda grafika ili teksturaiza svakog vizuelnog elementa preko CSS-a je veoma korisna Web dizajnerima. Pomenutasintaksa je:

250 Multimedija

h2 {background: url("Novcic.png") no-repeat left top;

Trebalo bi primetiti da je fotografija novčića uključena kao deo definicije h2 elementa, takoda se pojavljuje u gornjem levom uglu svakog h2. Međutim, dodatne osobine kao što suwidth i padding definišu razmak naslova, a određena svojstva se koriste za naglašavanjeteksta naslova.

To je slično načinu na koji osobine fonta mogu da imaju višestruke vrednosti. Međutim,svojstva fonta mogu da se individualizuju ako autor to želi (na primer, font-size), atakođe mogu da se pojedinačno navedu svojstva pozadine, ako autor želi, na sledeći način:

body {background: white url("pozadina.jpg") repeat;}

Osim ako nije drugačije određeno, pozadinska slika se ponavlja i po vertikali i po

horizontali, dok se ne ispuni prozor. Međutim, ako autor želi da se tekstura prostore polevoj margini, odozgo na dole, onda se to postiže vrednošću repeat-y (slika 9.39).

Slika 9.39. Prikaz ekrana na osnovu dokumenta CSS-037a.html

Međutim, ako autor želi da se tekstura prostore od leve margine, sa leve na desnu stranu,onda se to postiže vrednošću repeat-x (slika 9.40).

Slika 9.40. Prikaz ekrana na osnovu dokumenta CSS-037b.html

CSS/CSS3 251

Atribut background-position može da ima sledeće vrednosti: left, middle, right,top i bottom. Ove vrednosti mogu i da se kombinuju na sledeći način:

background-position: top right;

Kao što se i pretpostavlja, mogu da se procentualne vrednosti da se odredi pozicije poza-dine. Procenti rade malo čudno, jer se definišu dve procentualne vrednosti:

background-position: 100% 100%;

Ove x/y koordinate se koriste i za slike i za "roditelja". Drugim rečima, koordinata100% 100% označava poziciju dole desno. Dakle, donji desni ugao slike je postavljenu donjem desnom uglu roditeljskog elementa. Koordinata 0% 0% locira gornji levi ugaoslike u gornjem levom uglu elementa. Koordinata 50% 50% centrira slika. Sve varijacijeprocentualnih koordinata postavljaju sliku gde god autor želi u okviru roditeljskog ele-menta. Gde će se slika, sa koordinatom 20% 80%, nalaziti?


Ako autor želi, može da definiše i negativne procentualne ili apsolutne jedinice, čime sekreće na slici malo van prostora elementa (izlazi iz okvira slike ili prozora). Prikazan kôdu fajlu CSS-039.html pomera sliku novcic.png za 5% i 100% u negativnom smeru, kaošto je prikazano na slici 9.42.


9.4. CSS i vizuelni efekti

Dobro osmišljena Web stranica je "čudo", ali to ne traje zauvek. Sada, Web stranice seprvenstveno takmiči sa časopisima i drugim statičkim medijima. Međutim, ovo neće uvekbiti slučaj. Na kraju, Web stranice mora da se "bori" protiv uzbuđenja koje nudi televizijai drugi aktivni, dinamični, animirani mediji. U stvari, jednog dana mogu da se "stope" u

252 Multimedija

jedan medij Web i TV. Na kraju krajeva, piksel je piksel, a sve što razdvaja Internet odtelevizije su neka hardverska ograničenja, neke stare navike koje se malo teže "probijaju" i,iznad svega, činjenica da su TV produkcija i Web dizajn, za sada, 2 različita radna mesta.

Inicijal (drop cap) na slici 9.43 je napravljen korišćenjem sledeće tehnike. Trebalo bidefinisati klasu koja će specificirati font koji je veći od svog roditeljskog elementa, kojipluta na levoj strani svog roditelja i, ako autor želi, može da ima drugu boju. U kodu unutarfajla CSS-040.html je definisan element dropcap koji se ispisuje podebljano (bold) i kojije 400% veći od okolnog paragrafa teksta. Onda bi trebalo koristiti element <span> da sedefiniše početno veće slovo.


Svaki vizuelni element u CSS-u ima imaginarni "prazan pravougaonik" oko njega, kojiuzrokuje da zauzima više prostora na stranici od njenog sadržaja (tekstualnih ili grafičkihelemenata). Drugim rečima, autor može da opciono doda padding, granične okvire imargine elementu, kako bi se proširilo područje koje element koristi.

Ako autor želi da paragraf ili pasus budu podvučeni ili odvojeni jednom linijom koja jesastavljena od tačaka, onda su u igri vrednost border-bottom i border-top:

<p style="border-bottom: 8px blue dotted" align="justify">

<p style="border-top: 12px red dotted" align="justify">


Ako se eksplicitno ne navedu elementi pozicioniranja, elementi Web stranica se "slažu"koristeći podrazumevani tok – pretraživač jednostavno gomila elemente duž leve straneekrana u cilju da ih locira u HTML kodu, kao što je prikazano na slici 9.45.

CSS/CSS3 253


Ovo podrazumevano pozicioniranje je stalno aktivno, osim ako se izričito ne koristi ko-mande za pozicioniranje, koje će narušiti podrazumevano ili uobičajeno slaganje. Uoičajenoje da visina elementa, na najosnovnijem nivou, određuje sadržaj elementa. Na primer, fo-tografija aviona Su-27 na slici 9.45 je ove veličine u pretraživaču jer je tolika u stvarnosti.Veličina datoteke Su-27-01.jpg definiše ovu sliku.

Slično tome, može da se utiče na visinu paragrafa teksta tako što će se suziti paragraf,a isti će da "poraste" u visinu kako bi se prikazao sav tekst. Precizirajući da bi širinaparagrafa trebalo da bude samo 60% (širine prozora pretraživača), može da se desi da savtekst ne može da se vidi unutar "otvorenog" prozora pretraživača, nego će se dodeliti itraka za pomeranje (scroll bar) sa strane. Na slici 9.46 nema trake za pomeranje, jer jesav tekst stao unutar prozora.


Pored ovoga, može da se razmotri primer koji pokazuje da boja pozadine ilustruje atributwidth paragrafa, a rezultat je prikazan na slici 2.47.


254 Multimedija

Ali ako se dodaju prazan prostor (padding) i margine paragrafu, onda, na taj način, možeda se poveća širina (width) predviđenog prostora (box) za dati tekst (slika 9.48).


Ako se obrati pažnja i ako se uporedi sadržaj slike 9.47 sa slikom 9.48, očigledno je daparagraf na slici 9.48 ima širu boju pozadine (atribut padding) i takođe je postavljendalje po horizontali od leve ivice prozora pretraživača (atribut margin).

Dizajneri Web stranica često pogrešno veruju da kada oni definišu atribut width, da oninavode udaljenost između njenih levih i desnih graničnih linija. Ili još gore, neki misleda definisana width vrednost označava celokupno vidljivo rastojanje između tekućeg isledećeg elementa. U stvari, atributi padding, širina graničnih linija i margine moraju dase uzmu u obzir.

Horizontalne linije predstavljaju, često, veoma efikasan način odvajanja različitih logičkihoblasti na Web stranici. One organizuju stvari vizuelno za čitaoca na način koji je i ne-nametljiv i efikasan. Takođe, može da se poboljša estetski izgled dodavanjem raznih linija.

Čitaoci su veoma zahvalni ako je moguće vizuelno "razbiti" stranicu koja sadrži ve-liku količinu teksta. Da bi se to uradilo, od velike pomoći su naslovi i podnaslovi, kaoi granične linije, pozadinske boje i teksture. Ali jedan od najboljih načina da se ukaže nato da paragrafi pripadaju zajedno nekoj grupi je jednostvano ubacivanje horizontalne linijepo potrebi. Verovatno najlakši način da se "uposli" horizontalna linija je da se koristi <hr>element, kao što je prikazano na slici 9.49.


CSS/CSS3 255

Ako autor želi da eksperimentiše, može da proba sa atributom background-image i daga transformiše u liniju razdvajanja sa grafikom. Međutim, ako želi da razdvoji paragrafeslikama, trebalo bi voditi računa o dve stvari:

• Trebalo bi koristiti <img> element da "uposli" grafiku, radije nego da "uvrće" ho-rizontalne elemente i da se desi nešto nepredviđeno.

• Trebalo bi pažljivo razmisliti o vizuelnom efektu korišćenja grafike umesto jednos-tavnih linija za razdvajanje paragrafa.

Ako autor ima neodoljivu želju da isprobava novitete, kompletan kôd se nalazi u fajlu podnazivom CSS-047.html. Slika 9.50 ilustruje šta se dešava kada entuzijazam trijumfujenad zdravim razumom.


Granice i granični okviri mogu da budu dobar način da se pomogne korisnicima dashvate izgled Web stranice, da shvate njene različite zone i njihove potrebe. Paragrafi sunačin se podeli tekst na logičke jedinice – čitalac zna da podela pomoću paragrafa ukazujena novu ideju ili dalje širenje ideje iz prethodnog pasusa.

Slično tome, sami paragrafi mogu se grupisati u veće logičke jedinice. Na primer, Webstranica može biti podeljena u deo koji opisuje kompaniju, drugi deo koji sadrži linkove karaznim lokacijama unutar Web sajta i još jedan deo za reklamiranje najnovijeg proizvoda.

Ako je autor odlučio da "zaokruži" elemente Web stranice granicama ili graničnim linijama,onda je imao sreće; CSS nudi dosta načina da se iskoriste i primene granice i graničnelinije, a, takođe, omogućava da se dodaju granični elementi (granice) na bilo koji element.

Autoru su na raspolaganju različite granične linije kada je rešio da koristi CSS. Najjedno-stavnija specifikacija granice (granične linije) samo koristi atribut border praćen serijomod tri vrednosti (width, style i color) odvojene praznim prostorom, kao što je toprikazano u donjem delu koda:

<style>

body {font-size:14px;}

p {border: thick solid red;} </style>

256 Multimedija

<p align="justify">Pocetni...</p>

<p style="border:10px groove gray" align="justify">Avion...</p>

<p style="border:5mm ridge mintcream" align="justify">Avion...</p>

<p style="border:6px double blue" align="justify">Avion G-4...</p>


Može da se odredi osam različitih graničnih stilova – solid, dotted, dashed, double,groove, ridge, inset ili outset. Slika 9.52 ilustruje svaki stil, iako su neki od njih maloširi nego što se obično koriste. Unutar fajla CSS-049.html svaka granična linija je široka8 piksela, kako bi se linije lakše videle na slici u ovoj knjizi. Uopšteno govoreći, samogranični stilovi groove, ridge, inset i outset bi trebalo koristiti u "debljoj" formi; onisu dizajnirani da prikažu senku i efekte senčenja.


Na slici 9.53 prikazane su granične linije u različitim Web pretraživačima – Internet Ex-

plorer (gore levo), Mozilla Firefox (gore desno), Google Chrome (dole levo) i Apple

Safari (dole desno).

CSS/CSS3 257

Slika 9.53. Prikaz sadržaja dokumenta CSS-049.html u različitim pretraživačima

Ako autor želi, može da koristi samo jednostrano granicu (ili dvostranu ili trostranu). Možečak i da meša stilove; na primer, jedna strana slike je ograničena isprekidanom linijom iostale duplom punom linijom. Zašto bi to autor poželeo da uradi je drugo pitanje, ali nadonjoj slici su prikazane sve četiri granične linije različite.


Širina ("debljina") granične linije se obično definiše uobičajenim CSS skupom jedinica (px,in, em i tako dalje), ili pomoću deskriptivnih vrednosti kao što su thin, medium ili thick.


258 Multimedija

Boja okvira se specificira atributom border-color. Trebalo bi imati na umu da ako seizostavi ovaj atribut, granična linija "uzima" boju okolnog teksta ili teksta roditeljskogelementa, ukoliko lokalni elemenat nema boje. Uobičajena boja granične linije je crna.

Ako autor želi da se igra sa nekim svetlosnim efektima kako bi granične linije dobiledimenzioni kvalitet, može da odredi četiri različite boje, po jednu za svaku stranu granice.


CSS dozvoljava svakom elementu da "pluta" ili "teče" (float), baš kao što omogućava iprimenu mnogih drugih osobina na svim elementima, iako su neki elementi bili ograničeniu standardnom HTML-u. Dizajneri su bili u mogućnosti da puste da tekst "teče" (float) ilida se "omota" (wrap) oko slike ili tabele pomoću koda align = "right" u HTML-u, alisada može da primeni float na sve što želi. Očigledno je da CSS daje dizajnerima dalekoveću slobodu u dizajniranju, nego što je to ranije bilo moguće.


Ali, kada se doda atribut float, tekst i drugi elementi okružuju "plutajuće" elemente. Usledećem primeru, slika je okružena i naslovom i tekstom koji ga prati, kao što je prikazanona slici 9.58 levo.

Slika 9.58. Prikaz sadržaja dokumenata CSS-054.html i CSS-055.html

CSS/CSS3 259

Kada se pogleda kôd u fajlu CSS-054.html vidi se da slika predstavlja inline element,smešten unutar H1 elementa. Kada se element ovako "ugnezdi", to osigurava da većinaWeb pretraživača poravnava gornju ivicu teksta naslova i slike. Slika 9.58 desno prikazujepromenu atributa float, upotrebom prethodnog koda, ali sa jednom promenom:

float: right;

Ako autor želi da tekst "teče" i sa leve i desne strane, onda bi trebalo da definiše dvaputa vrednost atributa float. Slika 9.59 ilustruje ovu dvostruku primenu atributa float.


Šta bi autor trebalo da uradi ako poželi da primora neki tekst da se odvoji od slike, kako binormalno "tekao" okolo? Šta ako želi da tekst pomeri dole, ispod slike? Ponekad ne želida tekst bude povezan sa određenom slikom. Jedan od problema sa primenom atributafloat nastaje kada se ima nekoliko slika na stranici. Atribut clear može da pomogne uosiguravanju da se svaki element teksta pojavljuje uz sliku sa kojom je povezan ili na kojuse odnosi.

CSS verzija "čišćenja" je slična tradicionalnom HTML elementu <br>, kada se koristi atributclear. U CSS-u, trebalo bi koristiti atribut clear zajedno sa vrednostima left, rightili both. Samo korišćenje elementa <br> sa ovim CSS atributom "tera" tekst na silu dasledi <br> element i da se pomeri ispod svih postojećih margina; drugim rečima, tekst sepomera na dole do prve prazne oblasti na stranici.

Evo jednog primera koji ilustruje efekat koji ima atribut clear. Kôd u fajlu CSS-057.html

ubacuje običnu oznaku <br>, ali ne pomera pasus teksta ispod slike. Element <br> pre-mešta tekst na dole za jednu liniju (u narednu liniju), kao što je prikazano na slici 9.60.


260 Multimedija

Međutim, dodavanjem CSS atributa clear sa dodeljenom vrednošću left, pomera setekst ispod "plutajuće" slike, kao što to slika 9.61 ilustruje.


CSS element box (zamišljeni pravougaonik) je virtuelni, imaginarni oblik sastavljen odsadržaja elementa, kao i njegovog praznog prostora, graničnih linija i margina, ako ihima. Dimenzije ovog pravougaonika se često ne poklapaju sa vidljivim sadržajem ili vid-ljivim granicama. Ako se koristi atribut padding, kutija raste ua njegovu dimenziju. Akose dalje dodaje granične linije ili margine, to takođe, povećava veličinu zamišljenog pravo-ugaonika. Međutim, atribut padding nije vidljiv, jer samo stvara prostor između tekućegelementa i okolnih elemenata ili okvira pretraživača.

Sledeći primer omogućava pretraživaču automatsko podešavanje veličine desne margine,kako bi se osiguralo da paragraf zadrži svoju fiksnu veličinu i na fiksnoj udaljenosti odleve strane prozora pretraživača. Autor može individualno da odredi left, right, top ibottom margine, kao što je prikazano u donjoj sintaksi:

p {width: 150px; margin-right: auto; margin-left: 150px;}

Ovaj zanimljiv stil kaže da bi sadržaj trebalo da bude fiksiran na širinu od 150 piksela,kao i da je leva margina fiksna i iznosi 150 piksela. "Roditeljski" element je, u stvari, sâmprozor pretraživača (tehnički, roditelj je <body> elemenat ako nijedan drugi roditelj nijeuključen, ali prozor pretraživača svakako izgleda kao roditelj). Drugim rečima, ukupnadužina od leve strane prozora pretraživača do desne strane tekstualnog paragrafa morada se održava na 300 piksela. Desna margina, međutim, automatski se podešava kakobi održale ove dve druge širine fiksnim. Efekat atributa auto je da se zamrzne paragrafna određenoj horizontalnoj lokaciji u prozoru pretraživača, čak i ako korisnik "rasteže" ilismanjuje prozor pretraživača.

Na slici 9.62 se vidi efekat dodavanja CSS stila koji "angažuje" atribut auto. Evo kodakoji izaziva zamrzavanje paragrafa u jednom položaju ("stabilna" ili fiksna udaljenost odleve strane prozora pretraživača roditelja):

<style>

p {width:250px; margin-right:auto; margin-left:150px;

border:2px solid;}

</style>

CSS/CSS3 261


Slika 9.62 pokazuje da istezanje (promena veličine) prozora pretraživača ne razvlači iparagraf. Desna margina na ovoj slici se automatski prilagođava, bez obzira na veličinuneophodnu da se održi veličina paragrafa i pozicija.

Ako se navedu vrednosti leve (left) i desne (right) margine, ali se ne precizira širina,element će razvlačiti svoju širinu kako bi se održale fiksne tražene margine. Na primer,ako se navede da su i leva i desna margina 50 piksela, onda će atribut width paragrafadobiti vrednost auto, ako to bude bilo neophodno.

<style>

p {width:auto; margin-right:50px; margin-left:50px; border:2px solid;}

</style>

Na slici 9.63 je prikazano dejstvo preciziranja leve i desne margine, ali izostavljanje speci-fikacije širine (width) izaziva da pretraživač pretpostavlja da se širina automatski podešava.


Kao što mogu da se podese sva tri svojstva da imaju vrednost auto kada se vrši dimen-zionisanje i pozicioniranje po horizontali (width, left i right margina), tako mogu, uteoriji, da se dodele vrednosti auto i ekvivalentnim vertikalnim atributima – height, topi bottom margine.

Autor može da "zamrzne" top poziciju jednog elementa koristeći sledeći kôd. Samo bitrebalo odrediti atribut margin-top, ali bi trebalo ignorisati visinu elementa:

262 Multimedija

<style>

p {width:auto; margin-top:100px; margin-bottom:100px;

border:2px solid;}

</style>

Slika 9.64 pokazuje kako to izgleda kada se elemenat postavi na specifičnu vertikalnulokaciju, ali njegova visina nije zamrznuta. Promena veličine prozora pretraživača (iliroditeljskog elementa) može da doda ili oduzme od visine elementa (na slici 9.64 desnose vidi kako se paragrafu smanjuje visina kada se "razvlači" prozor pretraživača).


U CSS, redni (inline) element je mali elemenat koji je "usaglašen", na neki način, sa linijomteksta (kao što su elementi <em> ili <i>). Autor može da se "igra" sa inline elementimau tekstu na mnogo načina – crtanje graničnih linija oko pojedinih reči ili fraza, dodavanjebeline, uključivanje margina, ubacivanje dodatnih velikih znakova ili reči, ubacivanje slikeili fotografije u sredinu paragrafa itd.

Manipulisanje tekstom, uopšteno govoreći, je najbolje prepustiti onima koji su i dizajniralifont ili familiju fontova. Dodatno dodavanje ugnežđenih okvira, granica, margina, velikihznakova ili grafike u red teksta može da dovede da je takav tekst neugledan, težak začitanje i slično.

Autor može da ima savršeno podešen paragraf i da ga "unakazi" dodavanjem inline

elementa, u ovom slučaju span element, koji definiše granični okvir oko izabranog teksta,kao što je prikazano na slici 9.65.


Umesto ovoga, autor može da iskoristi boje i pomoću njih da istakne i naznači deo teks-ta. Evo koda koji proizvodi poseban efekat prikazan na slici 9.66:

<style> p {font-size: 24px;}

span {background: yellow;} </style>

CSS/CSS3 263


Sada se dolazi do klasike, prepodobne okosnice klasičnog HTML-a. Reč je o tabelama. Štabi Web dizajneri ikada učinili bez tabela? Nalazili bi se unutar tradicionalnog izgleda Webstranice koji bi bio omeđen frejmovima i ne bi bio nešto preterano fleksibilan.

Liste su "jednostavniji" rođaci tabela. Umesto stavki koje se šire u dva pravca – i pohorizontali i po vertikali – kao u tabeli, kod lista se horizontalne stavke "izlistavaju"kao da je reč o tabeli sa jednom kolonom. Pošto je reč o jednostavnijem formatu, lis-tama obično "ne treba pomoć" u vidu graničnih linija u cilju razgraničenja pojedinačnihćelija. Simboli za nabrajanje (bullets), dekorativni elementi (dingbats) ili brojevi generalnosluže za vizuelno odvajanje komponenti unutar jedne liste.

CSS omogućava da se definišu liste na mnogo načina koji nisu moguće u HTML-u. Moguda se koriste jedan od tri grafička simbola kao simboli za nabrajanje (bullets) stavkiliste. Očigledno, čak i lista sa simbolima za nabrajanje nije nasumična. Koriste se trisimbola za nabrajanje – disc (najčešći simbol; reč je o crnoj ispunjenoj tački i to jepodrazumevani CSS stil za liste); circle (prazan kružić;) square (ispunjen kvadrat).

Sledi spisak 6 stilova za numeričko označavanje stavki unutar liste – decimal (1. 2. 3.);lower-roman (i. ii. iii.); upper-roman (I. II. III.); lower-alpha (a. b. c.);upper-alpha (A. B. C.); none (stavke u listi su uvučen kao i svim drugim listama, alibez grafičke ili numeričkim simbolima).


Ako autor želi da koristite drugi grafčki element kao simbol za nabrajanje, nešto uzbudljivijeili egzotičnije od priložene crne ispunjene tačke, praznog kružića ili ispunjenog kvadrata,onda bi trebalo da koristi atribut list-style-image, kao što je prikazano na slici 9.67desno.

Trebalo bi posebno napomenuti da je nemoguće promeniti veličinu simbola za nabra-janje kada se koristi atribut list-style-image koristeći, na primer, vrednosti heightili width. Umesto toga, veličina takve slike ili grafičkog simbola (elementa) mora da sepodesi u nekoj grafičkoj aplikaciji, kao što su Photoshop ili GIMP.

264 Multimedija

Ako autor želi da prilagodi način na koji će simboli za nabrajanje biti definisani i pozicioni-rani u odnosu na teskt stavki (posebno kada stavke imaju više redova teksta), onda bitrebalo da definiše vrednosti inside ili outside unutar atributa list-style-position.Efekat je relativno mali, ali ako se izabere vrednost inside, dobiće se sličan efekat kao štosu inicijali (drop caps). Donji deo koda proizvodi inside efekat prikazan na slici 9.68levo:

ul {list-style-position: inside}


Uobičajena vrednost ovog atributa je outside i rezultat njegove primene je prikazan naslici 9.68 desno.

Zašto je stil prikazan na slici 9.68 desno (podrazumevan, uobičajen, default) najpopu-larniji? Izgleda bolje, a pomaže čitaocu na isti način kao što to rade simboli za nabrajanjeili brojevi – brzo prepoznaju stavke u listi.

Danas se tabele koriste u Web stranicama za daleko više stvari, nego što je prvobitnobilo planirano. Plan je bio da se jednostavno koriste za prikaz tabelarnih podataka i dase formiraju obične tabele sa informacijama. Međutim, tabele su služile godinama kaopomoćna mreža linija (grid) na kojoj će se graditi celu Web stranica.

Osnovni problem je u tome što HTML nije pružio održiv način da se organizuju različitekomponente ili vizuelne zone unutar stranice. Dizajneri koji rade sa časopisima, u oglaša-vanju i drugim oblastima očekuju da će moći da pozicioniraju elemente stranice upravotamo gde žele i da to definišu do najsitnijih detalja.

CSS atribut table-layout omogućava se odredi da li ćelija može da promeni svojuveličinu kako bi se prikazao njen celokupni sadržaj ili će veličina ćelije da ostane fik-sna. Podrazumevana vrednost je auto, što znači da će da se pretraživač bavi izračuna-vanjem veličine svake ćelije, pre nego što prikaže tabelu i njen sadržaj. Međutim, autormože da koristi fiksnu vrednost za table-layout atribut i da ubrza stvar navodeći mak-simalnu veličinu za ćelije. Ovo može, međutim, da "odseče" deo fotografije, kao što jeprikazano na slici 9.69.

Kao što može da se vidi u sledećem kodu, slika na levoj strani (prva cifra je navedenau kodu) je u tabeli definisan pomoću fiksne vrednost atributa table-layout. Nikakvapromena veličine prozora pretraživača ne utiče na veličinu slike – ona je fiksirana i u ovomprimeru iznosi 230 piksela. Ovo "manevrisanje" nikako ne utiče na visinu ćelije ili ćelija.

<table style="table-layout:fixed; width:230px; border:solid">

<table style="table-layout: auto; border: solid" >

CSS/CSS3 265

Druga tabela je postavljena na auto i na taj način je pretraživaču dozvoljeno da "razvlači"određene ćelije, kako bi se prikazao njihov celokupan sadržaj, kao što može da se vidi utabeli sa desne strane na slici 9.69.


Podešavanje rasporeda u više kolona (multicolumns) je možda najčešći način organizacijeza Web stranice, baš kao što su prikazane kolone sa tekstom u novinama i časopisi-ma. Kolone služe da organizuju sadržaje po horizontali, baš kao što elementi kao štosu paragrafi, pravila i naslovi pomažu čitaocu da vide kako su informacije organizovanepo vertikali. Rezultat, u većini stranica, se svodi na pomenute vrste zamišljenih mreža(grid), koje, u suštini, predstavljaju tabele, skup "ćelija" koje sadrže paragrafe ili grupeparagrafa. I već godinama, ugnežđene tabele (tabele unutar tabela) su bile jedino održivorešenje za kreiranje različitih Web stranica.

CSS je specijalizovan u opisivanju kako bi stvari trebalo da izgledaju, uključujući i kako bitrebalo da budu postavljene ili pozicionirane. Atributi top, left i position omogućavajuda se kreiraju stilovi koji opisuju različite zone na Web stranici.

U fajlu CSS-069.html je definisan kôd koji koristi apsolutno pozicioniranje, što dovodido toga da je svaka sekcija pozicionirana nezavisno od svih drugih sekcija (slika 9.70levo). Tako definisane sekcije ne mogu da se preklapaju i ne mogu da se "sudaraju". Ta-kođe, kada se koriste procentualne vrednosti da opišu položaj (vrednosti top, left iwidth), promenom veličine prozora pretraživača se vrši pomeranje pomenutih elemenata,tako da zadržavaju određeni odnos i položaj u odnosu na ostale elemente, bez obzira nato kakav je oblik poprimio izabrani element.

Slika 9.70 levo ima svoje probleme. Na primer, nije uravnotežena kao što bi mogla da bude,sa tendencijom da bude "teža" ka gornjem levom uglu i nema centralnu tačku. Ništa nijeu "žarištu" da privuče pažnju. Šta bi se desilo ako bi se dodala pozadinska grafika?

<style>

body {background-image: url(Ribnjak_providan.jpg);

background-repeat: no-repeat;}

</style>

266 Multimedija


Ova pozadina sadrži "plutajuću" ključnu tačku, a takođe pomaže da se ujedini ostatakstranice sa svetlom i "kružnim" dizajnom. Da bi sve bolje izgledalo, trebalo bi prilagodititekstualne blokove i trebalo bi im ukloniti lokalnu pozadinu i "spustiti" tekst na pozadin-sku sliku (slika 9.70 desno).

Ako je reč o dizajnu koji ne može da podnese "malo" pomeranje elemenata, onda bitrebalo koristiti konkretne merne jedinice (zajedno sa apsolutnim koordinatama pozicija)u cilju popravljanja veličine i položaja tekstualnih blokova i drugih elemenata.

Međutim, autoru možda ne odgovara apsolutno pozicioniranje. Tada autor može da poveže<div> elemente sa njihovim pozicijama (relativno u odnosu na druge), tako da čak i ako seprozor pretraživača menja, unutrašnji dizajn i vizuelni odnosi između grafičkih elemenatana stranici ostaju fiksni. Način da se to uradi je da se zamene sve procentualne vrednostisa specifičnim mernim jedinicama, kao što su inči ili pikseli.


Slika 9.71 desno pokazuje istu stranicu kao i slika 9.71 levo, ali prozor pretraživača (njegovaveličina) je promenjen. Ako se obrati pažnja, onda je očigledno da interni dizajn – veličinui položaj elemenata – nije promenio izgled i sve je ostalo stabilno i fiksno.

Kada se sve sagleda, autor može da ukine tabele i da ih izbaci iz upotrebe. Može da koristitehnike slične onima koje su opisane za definisanje rasporeda u slobodnoj formi, ali kada sedefinišu stilovi, onda bi trebalo odrediti da blokovi budu plivajući" ili "plutajući" (float). Usledećem primeru, koriste se dve kolone teksta koje menjaju veličinu kada se menja veličinaprozora pretraživača. Slika 9.72 pokazuje kako se koriste klasične kolone i koje se, na gra-ciozan način, sužavaju ili proširuju kada se menja veličina prozora pretraživača.

CSS/CSS3 267


Pošto ovaj dizajn koristi dve kolone, trebalo bi odrediti float: left, ali i obezbeditida zbir širina dve kolone (plus padding, granične linije ili margine) ne mogu da buduveće od 100%. U ovom primeru, klasa .levakolona je navedena da je širine 30%, aširina klase .desnakolona 60%. Na ovaj način, bez obzira na to koliko korisnik može dapromeni veličinu pretraživača, širine kolona zadržavaju svoje relativne veličine, kao što jeto pokazano na slici 9.72. Leva kolona je oko polovine veličine desne kolone.

"Zamrzavanje" ili fiksiranje širine kolona (umesto što im omogućava da promene veličine)je lako uraditi. Trebalo bi definisati position: absolute vrednost i odrediti položaj iveličinu kolona (njihove vrednosti left, top i width) sa fiksnim mernim jedinicama, kaošto su pikseli.


Kada se koriste apsolutne pozicije, autor je odgovoran za osiguravanje da left svojstvakolona rade kako bi trebalo. Širina kolone sa leve strane, na primer, pomaže autoru dautvrdi koliko bi trebalo da bude širina sledeće kolone. U kodu u fajlu CSS-073.html prvoj

268 Multimedija

koloni je dodeljena širina od 200 piksela (sa dodatnih 25 piksela koji je odvajaju za to-liko od leve ivice prozora pretraživača). Drugoj koloni je dodeljena širina od 200 piksela,ali left pozicija njenog početka je na 260 piksela. Treća kolona počinje na poziciji 495piksela i široka je 200 piksela (slika 9.73 levo).

Kada se kreiraju fiksne kolone, bez obzira koliko korisnik menja veličinu prozora pretraži-vača, tekstualne kolone ostaju u istom položaju (u odnosu na gornji levi ugao prozora), atakođe ne menjaju svoju veličinu ili oblik (slika 9.73 desno).

U narednim fajlovima prikazan je način kako može da se preraspodeljuje pozadinska bojakroz različite gradijentne (linearne, elipsaste i kružne) prelaze sa primenom 2, 3 ili 4

boje.

Slika 9.74. Prikaz sadržaja dokumenta od CSS-076.html do CSS-085.html

9.5. "Najbitnije" CSS3 komande i noviteti

CSS3 je najnoviji standard za CSS i u potpunosti je kompatibilan sa ranijim verzijamaCSS-a. CSS3 je podeljen na "module", koji sadrže "stare CSS specifikacije" (koje su pode-

CSS/CSS3 269

ljene na manje elemente). Pored toga dodati su novi moduli. Neke od najznačajnijih CSS3

modula su selektori (selectors), modeli pravougaonih površi (box models), pozadine i

granični okviri (backgrounds and borders), vrednosti slike i zamenjen sadržaj (image

values and replaced content), efekti na tekstu (text effects), 2D i 3D transforma-

cije (2D/3D transformations), animacije (animations) i višestruke kolone (multiple

column layout).

9.5.1. CSS3 i granični okviri

Upotrebom CSS3 autor može da kreira zaobljene granične okvire (granice), da dodajesenku pravougaonim površinama i da koristi sliku kao granicu ili granični okvir, bezupotrebe eksternih programa kao što su GIMP ili Photoshop. U ovom delu će biti reči o triatributa koji su "vezani" za granične okvire ili granice – border-radius, box-shadow iborder-image.

Kreiranje zaobljenih ćoškova u CSS2 je bilo malo komplikovano. Morale su da se ko-riste različite slike za svaki ugao. U CSS3 stvaranje zaobljenih ćoškova je lako. U CSS3,atribut border-radius se koristi za kreiranje zaobljenih ćoškova, kao sto je prikazano naslici 9.75 levo. U CSS3, atribut box-shadow se koristi za dodavanje senke pravougaonimpovršinama, koje se koriste u najrazličitije svrhe, kao što se vidi na slici 9.75 desno.

Slika 9.75. Prikaz sadržaja dokumenata CSS3-001.html i CSS3-002.html

Atribut border-image može da koristi sliku u cilju kreiranja graničnog okvira ili granice.Ovaj atribut omogućava i da autor sâm izabere ili definiše sliku koja će "glumiti" graničnielement. Originalna slika, koja se koristila u fajlu CSS3-003.html za kreiranje granice jeprikazana u dnu slike 9.76.

Slika 9.76. Prikaz sadržaja dokumenta CSS3-003.html

270 Multimedija

9.5.2. CSS3 i pozadine

CSS3 sadrži nekoliko novih atributa po pitanju pozadina, kojai omogućavaju veću kontrolunad pozadinskim elementima. U ovom delu će se pomenuti atributi background-size ibackground-origin. Pored ovih atributa, obratiće se pažnja i na korišćenje višestrukihpozadinskih slika.

Atribut background-size određuje veličinu pozadinske slike. Pre CSS3, veličina poza-dinske slike je bila određena stvarnom veličinom slike. U CSS3 moguće je odrediti veličinupozadinske slike, što omogućava da iste slike ponovo koriste u pozadini, u različitimkontekstima. Veličina slike može da se odredi u pikselima ili u procentima. Ako se veličinaodredi u procentima, veličina se određuje u odnosu na širinu i visinu "roditeljskog" ele-menta (slika 9.77 levo). Pozadinska slika može i da se "razvuče" (stretch) kako bi upotpunosti popunila željeni prostor, kao što se se vidi na slici 9.77 desno.


Atribut background-origin određuje područje gde će biti pozicionirana pozadinskaslika. Pozadinska slika može da se postavi u pravougaonu površinu sa određenim sadrža-jem (content box), u oblast sa dodatnim belim prostorom (padding box) ili u graničnuoblast pravouagaone površine namenjene za neki sadržaj (border box), kao što je prikazanona slici 9.78.


CSS3 omogućava autoru da koristi nekoliko pozadinskih slika za određeni element. Na slici9.79 prikazane su dve pozadinske slike koje su "vezane" za <body> element, a kompletnasintaksa se nalazi u fajlu CSS3-007.html.

CSS/CSS3 271


9.5.3. CSS3 i gradijentni prelazi boja

Gradijentni prelazi u CSS3 dozvoljavaju autoru da prikaže glatke prelaze između dve ili višespecificiranih boja. Ranije su morale slike da se koriste za ove efekte. Međutim, koristećiCSS3 gradijentne prelaze može da se smanji vreme preuzimanja i korišćenja odgovarajućegopsega. Pored toga, elementi sa gradijentnim prelazima izgledaju bolje kada se zumiraju,jer gradijentni prelazi se generišu od strane pretraživača. CSS3 definiše dva tipa gradijent-nih prelaza:

• linearni gradijentni prelazi (linear gradients) koji se pružaju dole, gore, levo,desno ili dijagonalno;

• radijalni gradijentni prelazi (radial gradients) koji su definisani njihovim centrom.

Da bi se kreirao linearni gradijentni prelaz autor mora da definiše najmanje dve zaustavneboje ili dve boje, uopšte. Zaustavne boje (color-stop) su boje između kojih autor želi dakreira "gladak" prelaz. Takođe, autor može da podesi početnu tačku i pravac (ili ugao),zajedno sa gradijentnim efektima.

Opšta sintaksa za linearni gradijentni prelaz ima oblik:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

a njena primena je prikazana na slici 9.80. Na slici 9.80 levo prikazana je podrazumevanavrednost za direction, a to je Top to Bottom, a definisana je crvena boja kao početna,a plava kao završna.

Slika 9.80. Prikaz sadržaja dokumenata od CSS3-008.html do CSS3-010.html

272 Multimedija

Primer na slici 9.80 sredina (fajl CSS3-009.html) pokazuje linearni gradientni prelaz kojipočinje sa leve strane. Počinje sa crvenom bojom, a prelazi u plavu.

Autor može da napravi i dijagonalni gradientni prelaz navođenjem i horizontalne i verti-kalne startne pozicije (to bootom right). Primer na slici 9.80 desno pokazuje linearnigradijentni prelaz koji počinje u gornjem levom uglu i ide ka donjem desnom uglu. Počinjesa primenom crvene boje, a završava se plavom bojom.

Ako autor želi više kontrole nad pravcem gradijentnog prelaza, to može definisanjemugla, umesto unapred definisanih pravaca (to bottom, to top, to right, to left,to bottom right itd). Opšta sintaksa za ovakvu vrstu linearnog gradijentnog prelazaima oblik:

background: linear-gradient(angle, color-stop1, color-stop2);

a definisani ugao je naveden kao ugao između horizontalne linije i linije gradijenta, koji"ide" u suprotnom smeru od smera kretanja kazaljke na satu. Drugim rečima, vrednost0deg (0◦) stvara gradijentni prelaz od dna ka vrhu, dok vrednost 90deg (90◦) generišegradijentni prelaz sa leve na desnu stranu. U fajlu CSS3-011.html su definisani različitiuglovi za prostiranja linearnog gradijentnog prelaza, a rezultat je prikazan na slici 9.81.


Fajl CSS3-012.html pokazuje kako se podešava više zaustavnih boja i kako se definišenjihova raspodela (ravnomerna ili neravnomerna). U fajlu CSS3-013.html je definisanasintaksa za kreiranje linearnog gradijentnog prelaza u duginim bojama sa pratećim teks-tom; rezultat rada je prikazan na slici 9.82.


CSS/CSS3 273

Radijalna gradijentna raspodela je definisana centrom ili tačkom centra. Da bi sekreirala radijalna ili kružna gradijentna raspodela, moraju se definisati najmanje dve zaus-tavne boje. Obično može da se odredi centar gradijentne raspodele, oblik (kružnica ilielipsa), kao i njena veličinu. Uobičajene vrednosti (bez podešavanja) definišu radijalnugradijentnu raspodelu čiji je centar i tačka centra, oblika elipse, a proteže se do najdaljedostupne tačke.

Opšta sintaksa za radijalni ili kružni gradijentni prelaz ima oblik:

background: radial-gradient(center, shape size,

start-color,..., last-color);

a njena primena prikazana je na slici 9.83. Podrazumevana vrednost je da su boje rav-nomerno raspoređene (slika 9.83 levo). Radijalna gradijentna raspodela boja sa različitimraspoređivanjem boja je prikazan na slici 9.83 desno, a sintaksa je u fajlu CSS3-015.html.


9.5.4. CSS3 i efekti na tekstu

Dodavanje senke tekstu je posledica primene atributa text-shadow sa pratećim elemen-tima i njihovim vrednostima. Treba napomenuti da ovaj atribut prihvata da ima u sebi iviše definisanih senki, ali moraju da budu odvojene tačkom-zarezom (;). Sintaksa je:

text-shadow: h-shadow v-shadow blur-radius color

|none|initial|inherit;

Elementi sa svojim vrednostima su:

• h-shadow – obavezan podatak; definiše horizontalni položaj senke. Negativne vred-nosti mogu da se primenjuju.

• v-shadow – obavezan podatak; definiše vertikalan položaj senke. Negativne vred-nosti mogu da se primenjuju.

• blur-radius – opcioni podatak; definiše poluprečnik "mrljanja".

• color – opcioni podatak; definiše boju senke.

274 Multimedija

• none – uobičajena vrednost; nema senke.

• initial – podešava sve vrednosti na inicijalne ("fabričke") vrednosti.

• inherit – "preuzimaju" se vrednosti objekta za koji se definiše senka.

Slika 9.84. Prikaz sadržaja dokumenata CSS3-016a.html i CSS3-016b.html

9.5.5. CSS3 i ravanske (2D) transformacije

Sa primenom CSS3 transformacija autor ili korisnik može da premešta ili pomera elemente(move), da skalira (scale), rotira (rotate), "uvrće" (spin) i razvlači (stretch). Transforma-cija je efekat koji omogućava da jedan element menja oblik, veličinu i položaj. Elementimogu da se transformišu primenom 2D ili 3D transformacija.

U ovom delu biće reči o sledećim metodama za 2D transformacije – translate(),rotate(), scale(), skew() i matrix(). Primenom metode translate(), element sepomera sa svoje trenutne pozicije, u zavisnosti od zadatih parametara, u levu ili desnustranu (x osa) i gore ili dole (y osa), što je prikazano na slici 9.85, prva sa leve strane.

Slika 9.85. Prikaz sadržaja dokumenata od CSS3-017.html do CSS3-022.html

Primenom metode rotate(), elemenat se rotira u smeru kretanja kazaljke na satu zaugao koji je definisan u stepenima. Negativne vrednosti su dozvoljene i rotiraju element usuprotnom smeru od smera kretanja kazaljke na satu (slika 9.85, druga sa leve strane).

Primenom metode scale(), povećava se ili se smanjuje veličina elementa, zavisno odzadatih parametara za širinu (x osa) i visinu (y osa). Ovo je prikazano na slici 9.85, trećasa leve strane.

CSS/CSS3 275

Primenom metode skew(), vrši se "zakošenje" ili "smicanje" pojedinih elemenata premazadatom uglu, koji zavisi od zadatih parametara za horizontalne (xosa) i vertikalne (y osa)linije (slika 9.85, četvrta sa leve strane). Vrednost skew(30deg,20deg) "smiče" elementza 30

◦ po x osi i 20◦ po y osi (slika 9.85, peta sa leve strane).

Primenom metode matrix() kombinuju se sve metode 2D transformacija u jednu. Ovametoda uključuje primenu šest parametara, koji sadrže matematičke funkcije koje omo-gućavaju rotiranje, skaliranje, pomeranje (transliranje) i "smicanje" (slika 2.85, prva sadesne strane).

9.5.6. CSS3 i prostorne (3D) transformacije

CSS3 omogućava oblikovanje elemenata i pomoću 3D transformacija. U ovom delu će biti,ukratko, reči o dve metode za 3D transformacije – rotateX() i rotateY().

Primenom metode rotateX(), element se rotira oko njegove x ose za određeni ugao,koji je definisan u stepenima. Primenom metode rotateY(), element se rotira oko svojey ose za određeni ugao i vrednost ugla je definisana u stepenima. Kompletna sintaksa zaove transformacije se nalazi u fajlovima CSS3-023.html i CSS3-024.html.

9.5.7. CSS3 i prelazni (tranzicioni) efekti

Primenom CSS3, autor može da doda efekat kada se prelazi iz jednog stila u drugi,bez upotrebe Flash animacija ili programskog jezika JavaScript. CSS3 tranzicioni efektiomogućavaju da se elemenat postepeno menja iz jednog stila u drugi. Da bi se to uradilo,moraju da se navedu dve stvari – CSS atribut na koji se dodaje efekat i vreme trajanjasamog efekta.

Trebalo bi napomenuti da ako vreme trajanja efekta nije navedeno ili definisano, onda"tranzicija" neće imati efekta, jer podrazumevana vrednost je 0. Efekat tranzicija će početikada navedeni CSS atribut menja vrednost. Tipičan promena CSS atributa se dešava kadakorisnik "prelazi" kursorom miša preko elementa.


Kada se kursor miša pomeri van određene oblasti elementa ili samog elementa, njegovostanje se postepeno vraća svom originalnom stilu.

Da bi se dodali prelazni efekti na više od jednog CSS atributa, onda se atirbuti, u sintaksi,odvajaju zarezom, kao što je prikazano u fajlu CSS3-026.html.

276 Multimedija


Primer u fajlu CSS3-027.html (slika 9.88) koristi sva četiri tranziciona atributa kako biželjeni efekat primenio kako treba.


9.5.8. CSS3 i animacija

Adekbvatnom primenom CSS3, autor može da stvori animacije koje mogu da zamene Flash

animacije, animirane slike i JavaScript u postojećim Web stranicama. Kada se animacijakreira unutar pravila @keyframe, mora da se "veže" za selektore, inače animacija nećeimati nikakvog efekta. "Vezivanje" animacije za selektor (element) se vrši navođenjemnajmanje dva atributa – ime i vreme trajanja animacije.


Trebalo bi napomenuti da ako vreme trajanja efekta nije navedeno, onda animacija nećeimati efekta, jer je podrazumevana (uobičajena) vrednost 0.

Animacija omogućava da se element postepeno menja iz jednog stila u drugi. Može dapromeni onoliko atributa koliko treba i koliko puta treba. Prilikom određivanja trenutaka

CSS/CSS3 277

kada će se promene događati, mogu vrednosti da se definišu u procentima ili mogu dase koriste ključne reči from i to (što predstavlja vrednosti 0% i 100%). Vrednost 0%

predstavlja početak animacije, 100% je kada je animacija završena. U primeru u fajluCSS3-029.html izvršena je promena boja elementa kroz animaciju 25%, a onda 50%, dabi na kraju bila vrednost 100%, kada je animacija završena.


9.5.9. CSS3 i višestruke kolone

Sa CSS3, autor može da kreira više kolona za upisivanje teksta – kao kolone (stupci) unovinama! U ovom delu će, ukratko, biti reči o atributima koji "barataju" sa više kolona,a to su column-count, column-gap i column-rule.

Atribut column-count određuje na koliko bi kolona element trebalo da bude podeljen. Uprimeru u fajlu CSS3-030.html se deli <div> element na 3 kolone (slika 9.91).


Atribut column-gap određuje fiksno rastojanje između formiranih kolona. U primeru pri-kazanom u fajlu CSS3-031.html definisano je fiksno rastojanje od 35 piksela izmeđukolona (slika 9.92).


278 Multimedija

Atribut column-rule određuje vrstu linije koja se iscrtava između kolona, kao i njenuširinu i boju. U primeru prikazanom u fajlu CSS-032.html je definisana linija širine ("de-bljine") 4 piksela i određene boje (#ff00ff). Sintaksa prikazana ispod potvrđuje to:

<style>

.visekolona

{

-webkit-column-count:3; /* Chrome, Safari, Opera */

-moz-column-count:3; /* Firefox */

column-count:3;

-webkit-column-gap:40px; /* Chrome, Safari, Opera */

-moz-column-gap:40px; /* Firefox */

column-gap:40px;

-webkit-column-rule:4px outset #ff00ff; /* Chrome, Safari, Opera */

-moz-column-rule:4px outset #ff00ff; /* Firefox */

column-rule:4px outset #ff00ff;

}

</style>

Kao što se vidi iz gornje sintakse, dokument je podeljen na 3 kolone sa međusobnimfiksnim rastojanjem od 40 piksela i sa linijom između kolona "debljine" 4 piksela i bojeff00ff. Iz primera se vidi da je sintaksa različita za Internet Explorer (podrazumevanipretraživa c) i Firefox, dok je jedinstvena sintaksa za pretraživače Chrome, Safari i Opera.Rezultat primene pomenute sintakse unutar pretraživača Internet Explorer je prikazan naslici 9.93.


Glava 10

Uvod u JavaScript

JavaScript je kompaktan i objektno-orijentisan skriptni jezik za razvoj Internet aplikacija,po sistemu klijent–server. Programski kôd se upisuje direktno u HTML stranicu i omogućavaizradu dinamičnih Web stranica. U današnje vreme, većina Web sajtova i stranica imaju iJavaScript jezik u izvornom kodu. JavaScript je relativno lak za učenje; lakši je za učenjeod jezika C++ ili Java, ali je teži od HTML-a. Da bi se shvatio i naučio jezik JavaScript ucilju njegovog dodavanja i umetanja u Internet stranice, potrebno je i da se poznaje HTML.

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 objektekao što su nizovi (arrays), datumi i regularni izrazi.

JavaScript se najčešće koristi u pretraživačima Weba (Web browsers), pa se jezgro opštenamene proširuje objektima koji omogućavaju skriptovima interakciju sa korisnikom, up-ravljanje pretraživačem Weba i izmene sadržaja dokumenta koji se pojavljuje unutarprozora čitača. Ova ugrađena (embedded) verzija JavaScripta izvršava skriptove koji suugrađeni u Web stranice. To se obično zove klijentski (client-side) JavaScript, da bi senaglasilo kako 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 predstav-ljaju proširenja koja zavise od pretraživača. Kompatibilnost između različitih pretraživačaznačajna je za programere 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 pretraživačimaWeba, između ova dva jezika ne postoji nikakva veza. Sličnost naziva je čisto marketinškipotez kompanija Netscape i Sun (ovaj jezik je prvobitno nazvan LiveScript i ime mu je uposlednjem trenutku promenjeno u JavaScript). Međutim, JavaScript može da skriptujeprogramski jezik Java.

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 skriptovanje

280 Multimedija

jednostavniji 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.

Kada je interpreter JavaScripta umetnut u pretraživač Weba, onda to "dovodi do pojave"klijentskog JavaScripta. To je, do sada, najčešća varijanta JavaScripta – kada se govori oJavaScriptu, većina ljudi misli na klijentski JavaScript. U klijentskom JavaScriptu kom-binuju se mogućnosti interpretera JavaScripta da izvršava skriptove sa objektnim mod-elom dokumenta (Document Object Model, DOM), definisanim u pretraživaču Weba. Do-kumenti mogu da sadrže skriptove napisane u JavaScriptu, a ti skriptovi mogu da ko-riste DOM za izmenu dokumenta ili upravljanje pretraživačem Weba koji prikazuje tajdokument. Drugim rečima, može da se kaže da klijentski JavaScript dodaje ponašanjestatičkim sadržajima Weba. Klijentski JavaScript čini srž tehnika koje služe za razvoj Webaplikacija, kao što je DHTML i arhitektura kao što je Ajax.

10.1. Programiranje u JavaScript-u

Pre nego što se počne sa programiranjem u jeziku JavaScript, potrebno je znati kako seizvršava jedan takav program. Svaki JavaScript program napravljen za izvršavanje u Webpretraživač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 autor nijesusreo. Ovde će se razmatrati uključivanje u HTML, zato što 99% ljudi koristi JavaScript

u toj kombinaciji.

Da bi se uključio JavaScript kôd u HTML stranicu, trebalo bi uključiti tag/marker podnazivom <script> unutar zaglavlja (head) dokumenta. Dati skript ne mora da budeJavaScript, zato mora da se pretraživaču saopšti koji se tip skripta uključuje dodavanjematributa type sa vrednošću text/javascript:

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>Pozdrav</title>

<meta http-equiv="Content-Type"

content="text/html; charset=utf-8">

<script type="text/javascript">

</script>

</head>

</html>

Uvod u JavaScript 281

Može da stavi onoliko JavaScript koda koliko autor želi unutar taga <script> – pretraži-vač će ga izvršiti čim bude učitan:

<!DOCTYPE html>

<html lang="en-US">

<head>



content="text/html; charset=utf-8">


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 se uključuje 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 se lakše višestruko koriste isti JavaScript programi na različitimstranicama sajta.

Da bi se naveo/referencirao spoljašnji JavaScript fajl, potrebno je koristiti atribut src

unutar <script> taga:

<!DOCTYPE html>

<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že da se referencira fajl koji se nalazibilo gde na autorovom serveru ili bilo kom serveru:

<script type="text/javascript"

src="http://www.NekiServer.com/script.js"></script>

Ukoliko autor želi, može na stranicu da uključi 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>

282 Multimedija

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 koji sepreduzme u programu naziva se naredba i saopštava čitaču da izvrši neku radnju. Slažućinizove tih radnji pravi se program. Naredbe su za programe ono što su rečenice za knjige.

U JavaScriptu svaka naredba trebalo bi da bude odvojena ili znakom za novi red ilitačka-zarezom (;). Prema tome, dve naredbe mogu da se napišu 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 pretraživač potpuno ignorisati. Uprincipu, komentari objašnjavaju programski kôd čime omogućavaju lakše ažuriranje kodau nekom budućem vremenu od strane autora programa ili nekoga ko bude održavao pro-gram tokom eksploatacije. JavaScript podržava dva tipa komentara. Prvi tip je jednorednikomentar, koji počinje sa dve kose crte (//) i proteže se do kraja reda:

Naredba 1; // Jednoredni komentar

Naredba 2;

Kada prilikom interpretiranja koda pretraživač naiđe na dve kose crte, on ignoriše sve štose nalazi posle toga u tom redu i nastavlja da čita dalje sledeći red programa na uobičajennačin.

Ukoliko se javi potreba da se napiše veći komentar, može da se smesti u više redova takošto će da se "stavi" između sledećih oznaka /* i */:

/* Ovo je moj prvi JavaScript program. Oprostite ako ima gresaka.

Pronadjene greske mozete prijaviti na mail [email protected]. */

Naredba 1; // Prva naredba

Naredba 2;

Može da se napiše program kod koga je unapred definisan svaki podatak koji on koristi, štose može uporediti sa upravljanjem ski liftom – nema mogućnost promene odredišta, stalnose korisnici voze istom stazom. Ukoliko autor želi da napiše program koji će komuniciratisa korisnikom i prilagođavati se različitim situacijama, mora da ima mogućnost rada savrednostima koje ne poznaje.

Promenljiva ili varijabla omogućava da se nekom podatku dodeli naziv, zatim se tajpodatak u programu može referencirati preko tog naziva. Na taj način može se koristitineki podatak, a da se unapred ne zna njegova stvarna vrednost, ono čega treba da se sećaprogramer je naziv promenljive.

U JavaScriptu promenljiva se kreira upotrebom službene reči var i specificiranjem nazivakoji bi trebalo da se koristi:

var boja;


Prethodni red koda se naziva deklarisanje promenljive. Nakon što je deklarisana, pro-menljiva boja je spremna da joj se dodeli podatak. To se radi upotrebom operatora

dodeljivanja (=), tako što se naziv promenljive postavlja sa leve strane tog operatora, apodatak sa desne:

var boja;

boja = "plavo";

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 up-ravo onda kada se toj promenljivoj prvi put dodeljuje neki podatak. Iako nije prethodnoreferenciran/deklarisan konkretan naziv promenljive, može da joj se dodeli vrednost bezupotrebe 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 trebalo bi dase koristi samo prilikom deklarisanja promenljive. Ukoliko kasnije autor želi da promenivrednost promenljive, to radi bez var:

var boja = "plavo";

boja = "crveno";

Za korišćenje vrednosti promenljive dovoljno je navesti naziv promenljive. Svako pojavlji-vanje naziva promenljive biće automatski zamenjeno sa njenom vrednošću prilikom izvr-šavanja programa:

var boja = "plavo";

alert(boja);

Druga naredba u prethodnom segmentu koda saopštava pretraživaču da prikaže okvir zaupozorenje sa obezbeđenom vrednošću, koja će u ovom slučaju biti vrednost promenljiveboja.

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 nenumerič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 pro-menljive. Kod njih mora programu prilikom deklarisanja promenljive da se saopšti koji tippodatka će promenljiva sadržati i ne može da se promeni tip promenljive kada je jednom

284 Multimedija

kreirana. Međutim, JavaScript je slabo tipiziran jezik – skript jezik koji ne vodi računašta promenljive sadrže. Promenljiva, na primer, u početku može čuvati broj, zatim možesadržaj promeniti u znak, reč ili nešto drugo.

Uprkos činjenici da ne mora u startu da se deklariše tip podatka, bitno je da se zna kojitip podatka promenljiva može da čuva kako bi mogle da se korektno koriste u okviruprograma. U JavaScript programima može da se radi sa brojevima, stringovima (niskamakaraktera), logičkim vrednostima (Booleans), nizovima i objektima.

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 decimalnikao brojevi sa pokretnom tačkom/zapetom (floating point number) ili float. Da bise kreirala promenljiva koja će čuvati numerički podatak, trebalo bi nazivu promenljivedodeliti 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 do-

dele i uslovni operatori.

Operator se koristi za transformisanje jedne ili više vrednosti u jednu rezultujuću vred-nost. Vrednosti na koje se operator primenjuje nazivaju se operandi. Kombinacija opera-tora i njegovih operanada poznata je kao izraz. Izrazi se izračunavaju da bi se odredilasama vrednost izraza, koja predstavlja rezultat primene operatora nad operandima. Nekioperatori, kao, na primer, operator (dodele) =, kao ishod daju vrednost koja se do-deljuje promenljivoj. Drugi proizvode vrednost koja se može koristiti u drugim izrazima. Zaneke operatore, kao što je (*) operator množenja, redosled operanada nije važan; naprimer, x * y = y * x predstavlja tačan izraz za sve cele i realne brojeve. Drugi opera-tori, kao što je (+) operator, daju različite rezultate za različite redoslede svojih operana-da. Na primer, (.ab.+.cd.) nije isto što i (.cd.+.ab.).


Unarni operatori se koriste samo sa 1 operandom. Na primer, unarni operator (!) se pri-menjuje na logičku vrednost i vraća logičku not vrednost te vrednosti. Većina JavaScript

operatora predstavlja binarne operatore, koji imaju po dva operanda. Jedan primer binar-nog operatora je operator * (množenja), koji se koristi za izračunavanje proizvoda dvabroja. Izraz 8*6 se izračunava kao 48 primenom * operatora nad operandima 8 i 6.

Do sada je bilo reči samo o "prostim" izrazima. Složeniji izrazi mogu da se naprave kombi-novanjem prostih unarnih i binarnih izraza. Da bi se izračunali složeni izrazi, moraju da seraščlane 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 su: (+) sabiranje; (-)oduzimanje ili unarna negacija; (*) množenje; (/) deljenje; (%) moduo; (++) povećanjei "vraćanje" vrednosti ili "vraćanje" vrednosti i, nakon toga, povećanje; (--) smanjenjei "vraćanje" vrednosti ili "vraćanje" vrednosti i, nakon toga, smanjenje.

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 su: (&&) 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 poređe-nje numeričkih vrednosti, da bi se ustanovilo koja je vrednost veća od one druge. Operatoripoređenja koje podržava JavaScript su: (==) jednako; (===) strogo jednako; (!=) nijejednako; (!==) 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.

10.2.4. String operatori

String operatori se koriste za izvođenje operacija nad stringovima. JavaScript trenutnopodržava samo operator +. On se koristi za spajanje dva navedena stringa nadovezivanjem.Na primer, (.ab. + .cd.) proizvodi (.abcd.).

286 Multimedija

10.2.5. Operatori za manipulaciju bitovima

Operatori za manipulaciju bitovima sprovode operacije nad vrednošću predstavljenu bitovi-ma, kao što su pomeranje bitova ulevo ili udesno. Operatori za manipulaciju bitovima kojepodržava JavaScript su: (&) I; (|) ILI; (^) ekskluzivno ILI; (<<) pomeranje ulevo;(>>) pomeranje udesno sa čuvanjem znaka; (>>>) pomeranje udesno sa punjenjem mestanajveće težine nulama.

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 sa njegovedesne strane.

• (+=) uvećava promenljivu sa leve strane operatora += za vrednost izraza sa njegovedesne strane.

• (-=) umanjuje promenljivu sa leve strane operatora -= za vrednost izraza sa njegovedesne strane.

• (*=) množi promenljivu sa leve strane operatora *= sa vrednošću izraza sa njegovedesne 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 leve straneoperatora >>=, koristeći vrednost izraza sa njegove desne strane.

• (>>>=) sprovodi pomeranje udesno sa punjenjavanjem mesta najveće težine nulamapromenljive sa leve strane operatora >>>=, koristeći vrednost izraza sa njegove desnestrane.

• (&=) sprovodi logičko I nad bitovima promenljive sa leve strane operatora &=, ko-risteći vrednost izraza sa njegove desne strane.

• (=) sprovodi logičko ILI nad bitovima promenljive sa leve strane operatora =, ko-risteći vrednost izraza sa njegove desne strane.

• (^=) sprovodi ekskluzivno ILI nad bitovima promenljive sa leve strane operatora^=, 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 jezicima Java,C i C++. Ovo je ternarni operator, budući da prihvata tri operanda – uslov koji trebaizračunati i dve alternativne vrednosti, od kojih treba vratiti samo jednu, u zavisnosti dali je uslov ispunjen 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 odkategorija operatora navedenih u prethodnim odeljcima:

• Zarez (,) – ovaj operator izračunava dva izraza i vraća vrednost drugog; tre-balo bi razmotriti naredbu a = (5+6),(2*2), gde se oba izraza (5+6) i (2*2)izračunavaju, a vrednost drugog izraza (4) se dodeljuje promenljivoj a.

• Delete – koristi se za brisanje osobine nekog objekta ili elemenata niza do nave-denog indeksa. Na primer, delete myArray[5] briše 6 elemenata myArray niza.

• New – koristi se za kreiranje nove instance nekog tipa objekta.

• Typeof – vraća string vrednost čiji je zadatak da identifikuje tip operanda; tre-balo bi razmotriti naredbu a = typeof 17, gde vrednost dodeljena promenljivoj apredstavlja number.

• Void – ne vraća vrednost; obično se koristi sa JavaScript protokolom da vrati URLkoji 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.

288 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) {kod 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) {kod koji se izvrsava ako je vrednost izraza uslov true}

else {kod 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) {kod koji se izvrsava ako je vrednost izraza uslov1 true}

else if (uslov2) {

kod koji se izvrsava ako je vrednost izraza uslov2 true }

else {

kod koji se izvrsava ako ni jedan od izraza uslov1 i uslov2

nema vrednost 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, akonije navedeno break posle svake grupe naredbi u case granama, izvršiće se sve naredbe izsvake case 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. edna 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. pocetniIzrazu petlji 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 1 za svaki sledeći prolaz, tzv. inkre-mentiranje 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. U primeru ispod poslednji para-metar – inkrementacija vrednosti – je izostavljen.

<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>

290 Multimedija

</body>

</html>

Petlja for nije jedina vrsta ponavljačke petlje u JavaScriptu. 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 koraktj. 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 trenutniopseg spada i konstrukcija if.


10.3.3. Nizovi

Nizovi u JavaScriptu su jedna od najkorisnijih struktura podataka. Elementi niza su nu-merisani, počevši od nule, i redni broj predstavlja indeks datog elementa. Da bi se pristu-pilo nekom elementu niza, potrebno je znati njegovo ime i indeks. Pošto vrednosti indeksapočinju nulom, broj elemenata niza (što je određeno svojstvom niza length), uvek je zajedan veći od najvećeg indeksa niza. Elementi u nizovima JavaScripta mogu da pripadajubilo kom tipu podataka, uključujući i objekte.

Niz je smešten u promenljivoj tako da kada se pravi niz, promenljivoj se dodaje novi ob-jekat 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")

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

Trebalo bi primetiti da operator delete briše dati element, ali ne narušava strukturuniza! Dakle, sadržaj koji se nalazio na datoj poziciji više ne postoji, ali uređenost niza jesačuvana i nema potrebe za premeštanjem elemenata i menjanjem njihovih indeksa da bise očuvala uređ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 ili dase isti kod izvršava više puta. Da bi to elegantno izveli potrebno je da se odgovarajućiprogramski kôd stavi u funkcije.

292 Multimedija

Funkcije su mali paketi JavaScript koda koji čekaju da budu pozvani da obave svojposao. Funkcija alert je sastavni deo svih pretraživača – to znači da je ugrađena uJavaScript interpreter pretraživača. Pored toga, postoji mogućnost da se kreiraju sop-stvene funkcije koje mogu da se pozovu kada autor to poželi. Funkcija se može posmatratikao omotač bloka programskog koda. Ono što je potrebno da se uradi je da se dodeli nazivtom bloku koda i autor će moći da ga poziva iz drugih delova programa kada poželi.

Funkcije se definišu upotrebom službene reči function. Ta reč saopštava programu daautor želi da definiše 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 izuzetno bitno upozorenje!");

}

Termin koji sledi službenu reč function je naziv koji autor želi da dâ funkciji (nazivifunkcija podležu istim ograničenjima kao i nazivi promenljivih). To je naziv koji će sepozivati/navoditi kadgod autor želi da se u programu izvrši kôd koji se nalazi unutarfunkcije. Naziv mora biti praćen malim zagradama – u prethodno navedenom slučaju onesu prazne, međutim to neće uvek biti tako što će se videti u primerima koji će kasnije bitinavedeni.

U prethodnom primeru kreirana je funkcija koja se zove upozorenje, tako da kadgodse pozove ta funkcija, izvršavaće se naredbe unutar funkcije koje aktiviraju pojavljivanjeiskačućeg okvira koji prikazuje tekstualnu poruku – Ovo je izuzetno bitno upozore-

nje! Kao i kod deklaracije funkcije, male zagrade se moraju pojaviti neposredno poslenaziva funkcije prilikom pozivanja funkcije:

upozorenje();

Te zagrade imaju dvostruku ulogu – one saopštavaju programu da autor želi da izvrši tufunkciju i one mogu da sadrže podatke, koji se terminološki nazivaju argumenti, koje bitrebalo proslediti funkciji. Ne moraju svakoj funkciji da budu prosleđeni argumenti, ali jeobavezno da se koriste male zagrade u pozivu funkcije.

Trebalo bi pogledati ponovo primer korišćenja funkcije alert. Očigledno je da se kodpozivanja funkcije stavljao neki string unutar zagrada:

alert("Ubaci i igraj");

String "Ubaci i igraj" je u stvaru argument koji je prosleđen funkciji alert; upozorenje jedizajnirano tako da prihvati argument i prikaže ga u okviru upozorenja pretraživač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še svoju funkciju, autor može da obezbedi nazive za argumente koji će joj bitiprosleđeni. Oni se uključuju unutar malih zagrada neposredno posle naziva funkcije i akoih ima v še odvajaju se zagradama:

294 Multimedija

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, JavaScript

objekti olakšavaju programerima upravljanje programima.

Pretraživač koji podržava skript jezike ima dosta posla oko pravljenja programskih ob-jekata, koji generalno predstavljaju vidljive elemente HTML stranice u prozoru čitača. Uvidljive objekte spadaju slike i elementi obrazaca. Međutim, postoje objekti koji nisu takoočigledni, ali imaju smisla kada se uzmu u obzir HTML oznake koje su korišćene da bi senapravio sadržaj stranice. Da bi se pomoglo skriptovima da kontrolišu ove objekte, alii autorima da pronađu neki sistem u mnoštvu objekata na stranici, definisan je modelobjekata dokumenta (Document Object Model, DOM). Model je nešto kao prototip ili planorganizacije 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 HTML

objekta najčešće se podešavaju atributima HTML oznaka. Prisustvo JavaScripta često do-daje 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. Me-toda je sve u vezi sa akcijom objekta. Ona ili nešto radi objektu, ili nešto sa objektom štoima uticaja na ostale delove skripta ili dokumenta. One su neka vrsta komandi, ali takvihčija su ponašanja povezana sa određenim objektima. Jedan objekat može imati neodređenbroj metoda koje su sa njim povezane uključujući i ni jednu. Imena metoda se završavajuparom zagrada, a da bi se metoda pokrenula, naredba JavaScripta mora sadržati njenureferencu, preko njegovog objekta – document.orderForm.submit().

Ponekad metoda zahteva da se s njom pošalju i dodatne informacije tj. parametri ili argu-menti, koji se tada navode unutar zagrada. Poslednja karakteristika objekta JavaScripta jeprocedura 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 upisivanjeteksta 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.

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. Njegove


fizič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, statusbar

i drugo.

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 u skriptuza prozor sa jednim okvirom; kada postoji više okvira self svakako olakšava čitanje iispravku koda.

self.imeSvojstva

self.imeMetoda(parametri)

Nije uvek potrebno praviti novi objekat window koristeći kôd JavaScripta. Skript ne praviglavni prozor pretraživača, to čini korisnik aktiviranjem pretraživača ili otvaranjem URL-aili datoteke iz menija čitača. Taj prozor je automatski formiran valjan objekat window čakiako je prazan. Ali skript može generisati bilo koji broj potprozora ako je otvoren glavniprozor (i ako 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")

Parametar osobineProzora je znakovni niz koji se sastoji od liste atributa, razdvojenihzarezima. 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>

296 Multimedija

Na sledećoj slici vidi se novootvoreni manji prozor koga je "definisao" i otvorio gornjiskript.

Slika 10.1. Otvaranje novog prozora

Čim se napravi drugi prozor u okruženju Web stranice, vazno je obratiti pažnju na upravlja-nje prozorskim slojevima. Korisnik vrlo lako može izgubiti manji prozor iza većeg. Metodawindow. focus() stavlja navedeni prozor ispred svih prozora. Nasuprot atributu 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. HTMLse 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đaja


koje 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. Pretraživač ubacujereči koje ukazuju na to da je alert box upozorenje JavaScripta – JavaScript Alert, i ovajtekst se ne može menjati skriptom; samo se sadržaj druge poruke može menjati. Sledisintaksa:

alert("sometext")

Sledi primer primene upozorenja. U pitanju je skup radio dugmadi čiji atributi valuesadrže imena 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>

298 Multimedija

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 koristise za ispis poruke alert prozora.

Drugi stil iskrsavajućeg prozora prikazuje dva dugmeta: Cancel i OK, i naziva se confirm

box. window.confirm() je jedna od metoda koja vraća vrednost: true ako korisnik pri-tisne OK i false ako pritisne Cancel. Ovaj okvir za dijalog može se koristiti kao podsticajkorisniku da donese odluku o tome kako da se nastavi skript. Izlazna vrednost može sekoristiti 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/"; }

else{ alert("Hvala sto ostajete!") } } </script>

</head>

<body>

<form>

<input type="button" onclick="potvrdi()" value="Napusti ...">

</form>

</body></html>

Slika 10.2. 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 obez-beđuje polje za unos teksta u koje korisnik unosi odgovor. Dva dugmeta, Cancel i OK,omogućavaju korisniku da ukloni okvir za dijalog sa dva efekta – otkazivanje cele operacijeili prihvatanje unetog. Metoda window.prompt() ima dva parametra. Prvi je poruka kojase prikazuje korisniku. U polju za unos može se priložiti podrazumevani odgovor kao drugiparametar metode. Ako to nije potrebno, navodi se prazan niz – "". Pritiskom na dugmeCancel, metoda vraća null (u uslovu neke if konstrukcije smatra se za false); pritiskomna 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.3. Iskrsavajući prozor tipa Prompt

300 Multimedija

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 slično).

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:

window.document.imeSvojstva

window.document.imeMetoda(parametri)

Referenca window je opciona kada se pristupa objektu dokumenta koji sadrži skript. Nezadaju se sva svojstva vezana za objekat dokumenta kao atributi oznaka body. Ako sestranica 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() sekoristi 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 direk-tno pozivaju 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.4. Rezultat rada skripta za prikaz tekućeg vremena

Sledi primer skripta za prikaz trenutnog vremena.

302 Multimedija

<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

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 JavaScript-u

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šanje HTMLelemenata 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">


Š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 link, kada se promeni podatak uulaznom 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 – mogu se menjati različita svojstva (veličina, položaj, transparentnost, ...).

Jedna od animacija koju je relativno lako realizovati u JavaScriptu je iščezavanje objekta,tj. promena transparentnosti. Međutim, trebalo bi najpre objasniti jednu važnu funkciju ijedan 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 pre-traživač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 pretraživača (Firefox, Safari, ... ), ali je različito implementiran. UIE je implementiran kao filtar (obj.style.filter), sa vrednošću alpha(opacity=o),gde je 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".

304 Multimedija

<head>

<title>Uvod u Javascript animaciju - jednostavan primer</title>

<script language="Javascript">

browser = undefined;

if(navigator.userAgent.indexOf("MSIE")!=-1)

browser = "IE"; else

browser = "Mozilla";

function fade(element) {

var steps = 10;

setOpacity(element, 1);

for(i=0; i<steps; ++i) {

setTimeout(function(){fadeCallback(element);}, (30*i)); } }

function fadeCallback(element) {

var opacity=getOpacity(element);

setOpacity(element, opacity-0.1); }

function getOpacity(element) {

var opacity = null;

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; }

function setOpacity(element, o) {

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>

Kao posledica ovoga iščezava DIV element kada se na njega klikne mišem. Verovatno daje za većinu početnika teško da shvate kompletan programski kôd koji realizuje pomenutuanimaciju i zato izdelićemo ga na sekcije i ponaosob obrazložiti.



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 promenljivu podnazivom navigator.userAgent koja vraća identifikacioni string tekućeg čitača, a zatimproverava da li sadrži "MSIE", što bi značilo da se radi o Internet Exploreru. Ako nije upitanju IE, tada je nebitno koji je čitač jer svi ostali koriste isti standardni stil providnosti.

10.6.1. Funkcija fade()

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. Tre-balo 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.

function fade(element)

{

//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)); } }

10.6.2. Funkcija fadeCallback()

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.

function fadeCallback(element)

{

//Prihvatanje tekuce providnosti


//Postavljanje nove providnosti

setOpacity(element, opacity-0.1);

}

306 Multimedija

10.6.3. Funkcija getOpacity()

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.

function getOpacity(element)

{

var opacity = null;

//Providnost tekuceg citaca

if(browser=="IE") {


if(filter) {



else {opacity = element.style.opacity;}

return opacity; }

10.6.4. Funkcija setOpacity()

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.

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; } }

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(). Obeobavljaju 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čunavakoliko 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šena


ili ne. U slučaju prikazanog primera jednostavne animacije, setTimeout() je pogodnijajer se broj pozivanja animacionog povratnog poziva izračunava u funkciji fade(), dok seu slučaju setInterval() u animacionoj funkciji povratnog poziva utvrđuje da li je ani-macija završena ili ne i ID tajmera mora biti memorisan (analizirati sledeći primer). Među-tim, ustanovljeno je da je za veće i složenije animacije funkcija setInterval() pogodnijanaročito kod metode variranja inkrementiranjem/dekrementiranjem transparentnosti pokoraku. Sledi primer animacije koja koristi funkciju setInterval().

<head>

<title>Uvod u Javascript animaciju - koristi se setInterval()</title>

<script language="Javascript">

browser = undefined;


browser = "IE"; else


timer = null;

function fade(element) {

var steps = 10;

timer = setInterval(function(){fadeCallback(element);}, 30); }

function fadeCallback(element) {


if((opacity-0.1)==0)

clearInterval(timer);

setOpacity(element, opacity-0.1); }

function getOpacity(element) {

var opacity = null;

if(browser=="IE") {


if(filter) {



else {opacity = element.style.opacity;}

if(!opacity) {


opacity = 1; }

return opacity; }

function setOpacity(element, o) {

if(browser=="IE") {

element.style.filter = "alpha(opacity=" + (o*100) + ")";}

else {element.style.opacity = o;} }

</script> </head>

<body>


onClick="fade(this);"></div>

</body>

308 Multimedija

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.

function fadeCallback(element)

{

//Podesavanje tekuce transparentnosti


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 taj-mera. Kao što se vidi, ID tajmera se vraća kada se poziva funkcija setInterval().

//Podesavanje tajmera na 30ms i smestanje u 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.6.6. Provera matičnog broja građana

Često je potrebno na Webu u nekom formularu upisati jedinstveni matični broj građana,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či se dobijeni zbir sa SUMA.

3. Podeli se celobrojno dobijeni zbir sa 11, tj. SUMA%11.

4. Označi se dobijeni ostatak kao OST.

5. Oduzme se ostatak od 11 i dobijena razlika se označi 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. parametar SUMA je deljiv sa 11 bez ostatka),kontrolni broj K 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.

<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)

310 Multimedija

{alert("JMBG nije ispravno upisan!")

document.dataentry.jmbg.focus()}

if(k!=raz)

{alert("JMBG nije ispravno upisan!")

document.dataentry.jmbg.focus()} }

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="dataentry">

<h2>Provera ispravnosti JMBG-a</h2>

<p>

Upisite 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.5. Formular sa proverom JMBG pomoću Javascripta

10.7. 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 zaovaj cookie, 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, 23.06.2015."

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. Mehanizam cook-

ies obezbeđuje pristup do posebne tekstualne datoteke na hard disku, koja se nalazi namestu koje zavisi od operativnog sistema. U Windows verziji Navigatora datoteka se zovecookies.txt i smeštena je u direktorijumu Navigatora. Internet Explorer koristi malo dru-gačiji sistem – svaki cookie se snima u sopstvenu datoteku u direktorijumu Cookies kojije smešten među sistemskim direktorijumima. U poljima svakog zapisa cookie nalazi sesledeće:

• domen servera koji je napravio cookie;

• 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 niz 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. Zarazmak 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:

312 Multimedija

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ščlanjuje ceoznakovni 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 i datumisteka 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.8. 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. Iako sunamenske/specijalizovane JavaScript biblioteke postojale u principu otkad postoji i sâmJavaScript došlo je vreme da takve biblioteke postanu opšteprihvaćene. Istovremenimrazvojem Web 2.0, AJAX-a i modernih Web aplikacija (kao što su Google Mail ili Google

Docs&Spreadsheets) počelo se o tim bibliotekama sve više pričati. Očito je da se kon-stantno napredovanje tehnologija i softvera odrazilo i na ponudu Web aplikacija – sve višestvari 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že da se podeli u tri osnovne kategorije:

• DOM pristup i manipulacija,

• olakšavanje i ubrzavanje programiranja,

• proširivanje funkcionalnosti pomoću gotovih komponenti.

10.8.1. DOM pristup i manipulacija

DOM pristup i manipulacija su najvažniji za efikasno upravljanje sadržajem Web strani-ce. 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 bilo komdelu Web stranice da bi pročitali ili izmenili neko njegovo svojstvo. Zbog toga je rad saDOM-om zapravo jezgro oko kog se temelji bilo kakva manipulacija Web stranicama. DOM jevrlo pouzdan i podržan u svim čitačima, ali osnovne metode implementirane u JavaScript

(jedna od njih je i, na primer, document.getElementById) često su nedovoljne za ele-gantno rešavanje tipičnih zadataka. Tu na red dolaze razne biblioteke koje unapređujui olakšavaju rad sa DOM-om. Osim toga, neke biblioteke čak nude implementaciju novihCSS selektora (koji su uvedeni u novu verziju 3 CSS standarda koji još nije implementiranu sve čitače) ili neke druge načine pristupa elementima. Osim podrške za DOM skoro svebiblioteke pokušavaju (i uspevaju) što je moguće više izgladiti svima mrske razlike prikazaelemenata između raznih čitača.

314 Multimedija

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.8.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 razlikujuod biblioteke 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 CSS

svojstva elementa do animacija i sličnih komplikovanih efekata koje bi bilo vrlo teško pouz-dano 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; na primer,dolazak pokazivača miša iznad nekog elementa). Biblioteke pomoću svojih ugrađenihmetoda pružaju programeru lakši i razumljiviji način pokretanja čestih funkcija, koje ćeu bilo kom čitaču imati isti efekt. Većina njih olakšava manipulaciju stringovima i kolek-cijama (bilo kakvih podataka) i podržava asinhrono dohvatanje/dopremanje podataka saraznih lokacija (najčešće u XML ili JSON obliku).

10.8.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.8.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 bibliote-ka. Ostale otpadaju iz raznih razloga (funkcionalnost, nepridržavanje standarda, prestanakrazvoja i slično).

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 manipulaciju


elementima 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čiti nji-hovo korišćenje. Primeri takvih biblioteka su jQuery i Mootools (koja čak omogućava daodaberemo samo one funkcionalne delove koji su nam potrebni).

10.9. jQuery

jQuery predstavlja JavaScript biblioteku otvorenog koda koja pojednostavljuje interkacijuizmeđu HTML dokumenta (preciznije objektnog modela dokumenta, DOM) i JavaScripta.Reč je o "laganoj" JavaScript biblioteci, gde se obično "piše manje, a uradi više". Svrhaprimene biblioteke jQuery je lakše korišćenje JavaScripta unutar sajta koji pravi au-tor. jQuery uzima "pod svoje" mnogo zajedničkih zadataka koji zahtevaju dosta ispisanihlinija JavaScript koda kako bi se ti zadaci postigli i "prepakuje" ih kako bi mogli dase pozovu jednom linijom koda. jQuery, takođe, pojednostavljuje mnogo komplikovanihstvari iz JavaScripta, kao što su manipulacije unutar AJAX-a i DOM-a. jQuery bibliotekasadrži sledeće karakteristike – HTML/DOM manipulacija; CSS manipulacija; HTML metodeza upravljanje događajima; efekti i animacije; AJAX i pomoćne aplikacije.

10.9.1. Instalacija

Da bi se koristila biblioteka jQuery, trebalo bi tu inicijalnu biblioteku preuzeti sa nekogsajta (na primer http://jquery.com/download/) i trebalo bi je uključiti na stranice gdeje predviđeno da se koristi. jQuery biblioteka je jedna JavaScript datoteka i referencirase pomoću HTML taga <script>:

<head> <script src="jquery.js"></script> </head>

Trebalo bi obratiti pažnju na to da <script> oznaka ili tag mora da se nalazi unutar sekcije<head>. Da li se neko pita zašto nema type="text/javascript" unutar <script>

taga? Ovo nije potrebno u HTML5. JavaScript je podrazumevani skript jezik u HTML5 i usvim modernim pretraživačima!

10.9.2. Sintaksa

Sa izabranom jQuery bibliotekom vrši se izbor i upit određenih HTML elemenata, kao iodgovarajuće akcije na njima ili sa njima. Sintaksa jQuery je "skrojena" za izbor HTMLelemenata i za obavljanje nekih akcija na i sa elementima. Osnovna i uopštena sintaksaima oblik $(selector).action(), a značenje pojedinih elemenata sintakse je:

• znak $ ili definiše ili pristupa jQuery;

• (selector) je "zadužen" za upit ili pronalaženje HTML elemenata;

• action() definiše jQuery akciju koju bi trebalo izvršiti na elementu ili elementima.

Evo nekoliko primera za sintaksu jQuery:

316 Multimedija

• $(this).hide() – skriva trenutni element;

• $("p").hide() – skriva sve <p> elemente;

• $(".proba").hide() – skriva sve elemente sa klasom class="proba";

• $("#proba").hide() – skriva sve elemente sa id="proba".

Ovo je namenjeno da se spreči bilo kakvo pokretanje jQuery koda pre nego što se završiučitavanje samog dokumenta. To je izuzetno dobra praksa. Ovo, takođe, omogućava au-toru da ima svoj JavaScript kôd deklarisan pre <body> dela dokumenta, u sekciji <head>.

10.9.3. Selektori

Selektori jQuery su jedan od najvažnijih delova jQuery biblioteke i oni omogućavajubiranje i manipulisanje HTML elementima. Sa jQuery selektorima mogu da se nađu elementina osnovu njihovih ID, klasa, vrsta, atributa, vrednosti atributa itd. Zasnovani su napostojećim CSS selektorima, a pored toga, mogu da imaju i neke sopstvene prilagođeneselektore. Sintakse svih vrsta jQuery selektora počinju znakom dolara i zagradama – $().

Elementarni selektor

jQuery elementarni selektor bira elemente na osnovu njihovih imena tagova. Na primer,mogu da se izaberu svi <p> elementi na stranici pomoću sintakse $("p"). Sledeća sintaksaomogućava da se pritiskom na dugme (button) "sakriju" svi <p> elementi:

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

#id selektor

jQuery #id selektor koristi ID atribut HTML taga kako bi se pronašao konkretan ele-ment. HTML atribut ID je jedinstven na Web stranici, tako da bi trebalo koristiti selektor#id kada autor želi da pronađe jedan, jedinstveni element. Da bi se pronašao elementsa specifičnim ID, trebalo bi napisati karakter # (odomaćen je naziv "taraba" za ovajkarakter), iza koga sledi ID elementa – $("#proba"). Sledeća sintaksa omogućava da sepritiskom na dugme (button) "sakrije" element sa id="proba":



$("#proba").hide();

});

});


.class selektor

Ovaj jQuery selektor pronalazi elemente sa određenom klasom. Da bi se pronašao elementsa određenom klasom, trebalo bi otkucati tačku, a iza nje ime klase – $(".proba"). Sle-deća sintaksa omogućava da se pritiskom na dugme (button) "sakriju" elementi sa klasomclass="proba":



$(".proba").hide();

});

});

Slede primeri jQuery selektora:

• $("*") – selektuje sve elemente;

• $(ovo) – selektuje tekući HTML element;

• $("p.proba") – selektuje sve <p> elemente sa class="proba";

• $("p:ffff") – selektuje sve ffff <p> elemente;

• $("ul li:prvi") – selektuje prvi <li> element <ul>;

• $("[href]") – selektuje sve elemente sa href atributom;

• $("a[target=’_blank’]") – selektuje sve <a> elemente sa vrednošću "_blank"

atributa target;

• $("a[target!=’_blank’]") – selektuje sve <a> elemente čija vrednost atributatarget nije jednaka vrednosti "_blank".

10.9.4. Događaji

jQuery biblioteka je prilagođena za rukovanje HTML/DOM događajima. Uobičajeno je da sestavi jQuery kôd, po ovom pitanju, u sekciju <head>. U sledećem primeru, funkcija sepoziva kada je aktiviran događaj za dugme:

<!DOCTYPE html>

<html>

<head>

<script src="jquery.js"></script>

<script>



$("p").hide();

});

});

318 Multimedija

</script>

</head>

<body>

<h2>Ovo je naslov!</h2>

<p>Ovo je prvi paragraf!</p>

<p>Ovo je drugi paragraf!</p>

<button>PRITISNI TASTER</button>

</body>

</html>

Ako Web sajt sadrži mnogo stranica i ako autor želi da jQuery funkcije budu jednos-tavne za održavanje, onda može da "stavi" sve svoje jQuery funkcije u poseban .js

fajl. U dosadašnjim primerima sve jQuery funkcije su dodavane direktno u <head> sek-ciju. Međutim, ponekad je bolje da se željene funkcije postave u posebnu datoteku, kaošto je prikazano u sintaksi ispod (trebalo bi koristiti atribut src kako bi se naznačilo dase sintaksa i putanja odnose na .js fajl):

<head>

<script src="jquery.js"></script>

<script src="moje_jquery_funkcije.js"></script>

</head>

10.9.5. Efekti

U efekte spadaju "skrivanje" (hide), pokazivanje i naglašavanje (show), prebacivanje izjednog stanja u drugo (toggle), "klizanje" (slide), "bledilo" (fade) i animiranje (ani-

mate). O svakom efektu će biti malo priče.

"Skrivanje" i prikazivanje

Sa jQuery, autor može da "skriva" i prikazuje HTML elemente pomoću metoda hide() ishow():

$("#hide").click(function(){ $("p").hide(); });

$("#show").click(function(){ $("p").show(); });

Uopštena sintaksa je oblika:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

Opcioni parametar speed određuje brzinu "skrivanja"/prikazivanja i može da ima vred-nosti – slow, fast ili da se brzina definiše u milisekundama. Drugi opcioni parametarcallback predstavlja naziv funkcije koja bi trebalo da se izvrši nakon "skrivanja" iliprikazivanja. Sledeći primer pokazuje parametar speed unutar metode hide():


$("p").hide(1275); });


Prelazak iz jednog stanja u drugo

Sa jQuery, autor može da se prebacuje između metoda hide() i show() pomoću metodetoggle(). To znači da elementi mogu da se "sakriju", kao i da se "sakriveni" elementiponovo prikažu. Uopštena sintaksa za ovo je:

$(selector).toggle(speed,callback);

Opcioni parametar speed određuje brzinu "skrivanja"/prikazivanja i može da ima vred-nosti – slow, fast ili da se brzina definiše u milisekundama. Drugi opcioni parametarcallback predstavlja naziv funkcije koja bi trebalo da se izvrši nakon što se metodatoggle() završi.

"Bledilo"

Sa jQuery autor može da bledi elemente i da im podešava vidljivost. jQuery ima naraspolaganju sledeće fade metode – fadeIn(), fadeOut(), fadeToggle() i fadeTo().

Metoda fadeIn() se koristi da "izbleđuje" skriveni element. Uopštena sintaksa ove me-tode ima oblik:

$(selector).fadeIn(speed,callback);

Opcioni parametar speed određuje brzinu "skrivanja"/prikazivanja i može da ima vred-nosti – slow, fast ili da se brzina definiše u milisekundama. Drugi opcioni parametarcallback predstavlja naziv funkcije koja bi trebalo da se izvrši nakon "izbleđivanja" ele-menta. Sledeća sintaksa pokazuje fadeIn() metodu sa različitim parametrima:


$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(2500); });

Metoda fadeOut() se koristi da "vraća" vidljivost skrivenom elementu nakon njegovog"izbleđivanja". Uopštena sintaksa ove metode je:

$(selector).fadeOut(speed,callback);

Opcioni parametar speed određuje brzinu "skrivanja"/prikazivanja i može da ima vred-nosti – slow, fast ili da se brzina definiše u milisekundama. Drugi opcioni parametarcallback predstavlja naziv funkcije koja bi trebalo da se izvrši nakon "izbleđivanja" ele-menta. Sledeća sintaksa pokazuje fadeOut() metodu sa različitim parametrima:


$("#div1").fadeOut();

$("#div2").fadeOut("fast");

$("#div3").fadeOut(4000); );

Metoda fadeToggle() omogućava prebacivanje između fadeIn() i fadeOut() metoda.Ako je element izbledeo, fadeToggle() mu "vraća" vidljivost, a ako je element vidljiv,onda će ga fadeToggle() izbledeti. Uopštena sintaksa ove metode je:

320 Multimedija

$(selector).fadeToggle(speed,callback);

Opcioni parametar speed određuje brzinu "skrivanja"/prikazivanja i može da ima vred-nosti – slow, fast ili da se brzina definiše u milisekundama. Drugi opcioni parametarcallback predstavlja naziv funkcije koja bi trebalo da se izvrši nakon što fadeToggle()

"završi" svoje. Sledeća sintaksa pokazuje fadeToggle() sa različitim parametrima:


$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(5750); });

Metoda fadeTo() omogućava da se tokom izbleđivanja elementu dodaje i prozirnost(vrednost između 0 i 1). Uopštena sintaksa ove metode je:

$(selector).fadeTo(speed,opacity,callback);

Opcioni parametar speed određuje brzinu "skrivanja"/prikazivanja i može da ima vred-nosti – slow, fast ili da se brzina definiše u milisekundama. Drugi opcioni parametaropacity definiše određenu vrednost providnosti ili prozirnosti, a vrednost se kreće između0 i 1. Treći opcioni parametar callback predstavlja naziv funkcije koja bi trebalo da seizvrši nakon što metoda fadeTo() "završi" svoje. Sledeći primer pokazuje fadeTo()

metod sa različitim parametrima:


$("#div1").fadeTo("slow",0.22);

$("#div2").fadeTo("fast",0.43);

$("#div3").fadeTo(6000,0.55); });

"Klizanje"

jQuery metoda slide omogućava elementima da "klize" gore i dole. jQuery ima sledećeslide metode na raspolaganju – slideDown(), slideUp() i slideToggle().

Metoda slideDown() omogućava elementu da "klizi" nadole. Metoda slideUp() omo-gućava elementu da "klizi" nagore. Uopštena sintaksa ovih metoda je:

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

Opcioni parametar speed određuje brzinu "skrivanja"/prikazivanja i može da ima vred-nosti – slow, fast ili da se brzina definiše u milisekundama. Drugi opcioni parametarcallback predstavlja naziv funkcije koja bi trebalo da se izvrši nakon što pomenute me-tode "završe" svoje.

Sledeće sintakse pokazuje kako rade slideDown() i slideUp() metode:

$("#flip").click(function(){$("#panel").slideDown();});

$("#flip").click(function(){$("#panel").slideUp();});


Metoda slideToggle() omogućava prebacivanje između slideDown() i slideUp()metoda. Ako element klizi nadole, onda će ga metoda slideToggle() povući nagore iobrnuto. Uopštena sintaksa je:

$(selector).slideToggle(speed,callback);

Opcioni parametar speed određuje brzinu "skrivanja"/prikazivanja i može da ima vred-nosti – slow, fast ili da se brzina definiše u milisekundama. Drugi opcioni parametarcallback predstavlja naziv funkcije koja bi trebalo da se izvrši nakon što slideToggle()

"završi" svoje. Sledeća sintaksa demonstrira kako radi slideToggle() metoda:

$("#flip").click(function(){$("#panel").slideToggle();});

Animacija

Metoda animate() omogućava autoru da kreira prilagođene animacije. Uopštena sintaksaima oblik:

$(selector).animate({params},speed,callback);

Zahtevani parametar params definiše CSS osobine ili atribute koje bi trebalo animira-ti. Opcioni parametar speed određuje brzinu "skrivanja"/prikazivanja i može da imavrednosti – slow, fast ili da se brzina definiše u milisekundama. Treći opcioni parame-tar callback predstavlja naziv funkcije koja bi trebalo da se izvrši nakon što metodaanimate() "završi" svoje. Sledeći primer pokazuje jednostavnu upotrebu animate();element <div> se kreće u levu stranu dok ne dođe do vrednosti od 250px:


$("div").animate({left:’250px’});

});

Svi HTML elementi imaju statične pozicije (što je podrazumevano stanje) i ne mogu dase pomeraju. Da bi se manipulisalo pozicijama, trebalo bi se podsetiti da se to radi uzpomoć CSS-a i da pomeranje može da bude relativno, fiksno ili apsolutno! Metoda stop()omogućava autoru da zaustavi animacije ili efekte pre nego što se sami po sebi završe. Ovametoda radi sa svim do sada pomenutim efektima. Uopštena sintaksa je:

$(selector).stop(stopAll,goToEnd);

Opcioni parametar stopAll određuje da li se sve animacije zaustavljaju ili ne; uobičajenavrednost za ovaj parametar je false, što znači da će samo aktivna animacija biti zaus-tavljena, dozvoljavajući da se ostale animacije, koje se nalaze u redu za čekanje, izvršekasnije. Opcioni parametar goToEnd određuje da li da se trenutna animacija odmah završiili ne; uobičajena vrednost je false. To znači da je uobičajeno da metoda stop() "ubija"trenutnu animaciju koja se obavlja na izabranom elementu. Sledeći primer pokazuje me-todu stop(), bez definisanih parametara:

$("#stop").click(function(){

$("#panel").stop();

});

322 Multimedija

10.9.6. Dodavanje i uklanjanje elemenata

Sa jQuery, lako je dodati nove elemente ili sadržaje. Ovde će se obratiti pažnja na četirinačina koje koristi jQuery za dodavanje novih sadržaja:

• append() – umeće ili insertuje sadržaj na kraju odabranih elemenata;

• prepend() – umeće sadržaj na početak odabranih elemenata;

• after() – umeće sadržaj iza izabranih elemenata;

• before() – umeće sadržaj ispred odabranih elemenata.

Metoda append() ubacuje sadržaj na kraju odabranih HTML elemenata. Primer za ovo jeprikazan sledećom sintaksom:

$("p").append("Tekst koji se dodaje!");

Metoda prepend() ubacuje sadržaj na početak odabranih HTML elemenata. Sledeća sin-taksa prikazuje primenu:

$("p").prepend("Tekst se dodaje na pocetak!");

Metoda after() ubacuje sadržaj posle izabranih HTML elemenata. Metoda before()

ubacuje sadržaj pre izabranih HTML elemenata. Sledeće sintakse pokazuju kako se to radi:

$("img").after("Tekst posle!");

$("img").before("Tekst pre!");

Sa jQuery, lako je ukloniti postojeće HTML elemente. Da bi se uklonili elemente i sadržaji,postoje, uglavnom, dve jQuery metode:

• remove() – uklanja odabrani element (i elemente koji su proizašli iz njega);

• empty() – uklanja proizašle elemente iz izabranog elementa.

Metoda remove() uklanja izabrani element ili elemente i proizašle elemente iz njega(uobičajen naziv je element "roditelj" i proizašli elementi "deca"). Uobičajena sintaksa zaprimenu ove metode je:

$("#div1").remove();

Metoda empty() uklanja elemente "decu" koji su proizašli iz izabranog elementa "rodi-telja". Uobičajena sintaksa za primenu ove metode je:

$("#div1").empty();

Metoda remove() prihvata jedan parametar koji omogućava autoru da filtrira elementekoji bi trebalo da budu uklonjeni. Sledeća sintaksa omogućava uklanjanje svih <p> eleme-nata sa klasom italic:

$("p").remove(".italic");


10.9.7. Dodavanje i podešavanje CSS klasa

Sa jQuery, lako je manipulisati sa CSS elemenatima. jQuery ima nekoliko metoda zamanipulacije sa CSS elementima i ovde će biti reči o sledećim načinima:

• addClass() – dodaje jednu ili više klasa odabranim elementima;

• removeClass() – uklanja jednu ili više klasa odabranim elementima;

• toggleClass() – omogućava dodavanje i/ili uklanjanje klasaiz odabranim elemen-tima;

• css() – postavlja ili vraća stil atributa.

Sledeći primer pokazuje kako da se dodaju klase atributa različitim elementima. Naravno,može da se izabere više elemenata, kada se dodaju klase:


$("h1,h2,h3,p").addClass("red");

$("div").addClass("important"); });

Sledeći primer pokazuje kako se uklanja određena klasa atributa iz različitih elemenata:

$("button").click(function(){$("h1,p").removeClass("red");});

Sledeći primer pokazuje kako se koristi metoda toggleClass(). Ova metoda omogućava"kretanje" ili "šetanje" između dodavanja i uklanjanja klasa iz izabranih elemenata:

$("button").click(function(){$("h1,p").toggleClass("red");});

Metoda css() vraća jedan ili više stilova osobina (atributa) za izabrane elemente. Da bise "vratila" određena CSS osobina, trebalo bi koristiti sledeću sintaksu:

css("propertyname");

Sledeći primer će vratiti vrednost background-color (vrednost prvobitne pozadinskeboje) za prvi uparen element:

$("p").css("background-color");

Da bi se postavila određena CSS osobina (određeni atribut), trebalo bi koristiti sintaksu:

css("propertyname","value");

Sledeći primer će postaviti vrednost background-color za sve uparene elemente:

$("p").css("background-color","yellow");

Za istovremeno postavljanje više CSS svojstava, trebalo bi koristiti sledeću sintaksu:

css({"propertyname":"value","propertyname":"value",...});

Sledeći primer će postaviti background-color i veličinu slova za sve uparene elemente:

$("p").css({"background-color":"yellow","font-size":"200%"});

324 Multimedija

10.9.8. Uvod u AJAX

AJAX (Asynchronous JavaScript and XML) je namenjen za razmenu podataka sa serverai ažuriranje delova Web stranice, bez ponovnog učitavanja cele stranice. jQuery nudinekoliko metoda kada je u pitanju AJAX funkcionalnost. Sa jQuery AJAX metodama,autor može da zatraži tekst, HTML, XML ili JSON (JavaScript Object Notation) sa udalje-nog servera koristeći i HTTP Get i HTTP Post i može da učita spoljne podatke direktnou odabrane HTML elemente svojoj Web stranici! Bez jQuery, AJAX kodiranje može bitimalo problematično! Redovno pisanje AJAX koda može da bude problematično, kako jeveć pomenuto, jer različiti pretraživači imaju različite sintaksu za implementaciju samogAJAX-a. To znači da će morati da se piše dodatni kôd za testiranje na različitim pretraži-vačima. Međutim, jQuery je "preuzeo brigu" o tome, tako da funkcije AJAX-a mogu dase pišu u samo jednoj liniji koda.

jQuery metoda load() je jednostavna, ali moćna AJAX metoda. Ova metoda učitavapodatke sa servera i stavlja ih na raspolaganje izabranom elementu. Uopštena sintaksa zaprimenu ove metode je:

$(selector).load(URL,data,callback);

Potreban parametar URL specificira adresu URL (Uniform Resource Locator) sa koje bitrebalo učitati potreban materijal. Opcioni parametar data navodi niz "parova" koji sešalju zajedno sa zahtevom. Treći opcioni parametar callback predstavlja naziv funkcijekoja bi trebalo da se izvrši nakon što metoda load() "završi" svoje.

jQuery metode get() i post() se koriste da zatraže podatke sa servera uz pomoć zahtevaHTTP GET ili POST. Dva najčešće korišćene metode za podnošenje zahteva i odgovoraizmeđu klijenta i servera su GET i POST; GET zahteva podatke iz određenog izvora i POSTdostavlja podatke koji se obrađuju određenom resursu.

GET se, u osnovi, koristi samo za dobijanje (preuzimanje) nekih podataka sa servera. POSTmože da se koristi i za dobijanje nekih padataka sa servera, ali se češće koristi za slanjepodataka uz zahtev.

Metoda $.get() zahteva podatke sa servera sa zahtevom HTTP GET. Uopštena sintaksaove metode je:

$.get(URL,callback);

Parametar URL određuje Internet adresu kojoj se upućuje zahtev. Opcioni parametarcallback predstavlja naziv funkcije koja bi trebalo da se izvrši ako zahtev uspe.

Metoda $.post() zahteva podatke sa servera pomoću zahteva HTTP POST. Uopštenasintaksa je:

$.post(URL,data,callback);

Potreban parametar URL specificira Uniform Resource Locator adresu sa koje bi trebaloučitati potreban materijal. Opcioni parametar data navodi neke podatke koji se šaljuzajedno sa zahtevom. Treći opcioni parametar callback predstavlja naziv funkcije kojabi trebalo da se izvrši ako zahtev bude uspešan.

Glava 11

Processing

Processing je programski jezik namenjen za generisanje i modikovanje grafike, a baziran jena Java programskom jeziku. On integriše programski jezik i razvojno okruženje u jedin-stveni sistem koji olakšava kreiranje računarske grafike i interaktivnosti uključujući vek-torske i rasterske slike, interaktivne događaje, mrežno komuniciranje i objektno programi-ranje. Processing povezuje koncepte programiranja sa principima vizuelne forme, pokretai interakcije. Kreiran je za učenje osnova računarskog programiranja unutar vizuelnog kon-teksta.

Okruženje Processing-a uključuje kompajler, tekst editor, kao i prozor za prikazivanjegrafike i animacije. Okruženje za programiranje Processinga (PDE) olakšava rada pisanjaProcessing programa. Programi se uvek pišu u tekst editorima, a pokreću se pritiskomna Run dugme. Program koji se izvršava zove se Sketch. U okviru Processing-a, postojiSketchbook koji se generiše prilikom pokretanja Processing-a. Sketchbook se pravi u formifoldera, koji se nalazi na računaru. Njemu se vrlo lako pristupa pritiskom na dugme Open.

U okruženju za rad postoje dve main funkcije void setup() i void draw(). Sadrži izaseban prozor koji služi za kompajliranje, odnosno, izvršavanje animacija.

Šta main funkcija void setup() dozvoljava? Pomoću ove funkcije možemo da progra-miramo otvaranje ili zatvaranje prozora, aktiviranje animacija, kao i njihovo programi-ranje. Sve što se dešava u void setup() funkciji, izvršava se samo jednom i to na početkuskripte. Ono što je bitno, to je da se u ovoj main funkciji inicijalizuju sve promenljive, kaošto su veličina ekrana, boja pozadine ekrana, definisanje fontova, veličina slika itd.

Main funkcija void draw() se uvek poziva direktno posle void setup(). Sve što seizvršava u draw() funkciji, izvršava se konstantno, upadajući u petlju, odnosno, loop. Ta-kvo neprekidno ponavljanje se zaustavlja funkcijom noLoop(). U jednom skeču sme pos-tojati samo jedan draw(), nikako ne sme dva ili tri. Ukoliko se definiše i postavlja pozadinabackground() u draw() funkciji, trebalo bi je pozivati odmah na početku funkcije, kakobi se očistio ekran od sadržaja (ukoliko je postojao). Ukoliko se nađe u petlji, može daprouzrokuje lošu vidljivost kada se crtaju linije ili ukoliko se ispisuje tekst.

Veoma je važno istaći da u jednom programu može i sme da postoji samo jedna setup()

funkcija i ne bi je trebalo ponovo pozivati nakon inicijalnog izvršavanja.

326 Multimedija

Skečevi mogu biti dvodimenzionalni i trodimenzionalni. Standardni render je prvenstvenonamenjen za dvodimenzionalnu grafiku. P3D render dozvoljava crtanje trodimenzionalnegrafike, što omogućava kontrolisanje kamere, osvetljenje i materijale. P2D render je brz,ali manje precizan render za crtanje dvodimenzionalne grafike. Ukoliko na računaru pose-dujete grafičku karticu koja ima OpenGL, u tom slučaju će P2D i P3D renderi biti vrlostabilni.

Mogućnosti Processing-a su proširena bibliotekama i alatima. Biblioteke omogućavajuskečevima da izvršavaju stvari iza samog jezgra koda. Processing sadrži Java biblioteke,a koje priprema i importuje Processing zajednica. Neke od tih biblioteka mogu da rade sahardverom, puštaju zvuk, prave virtuelnu stvarnost, rade sa naprednom 3D geometrijomitd. Alati koji proširuju PDE, olakašavaju pravljenje skečeva na način što pružaju interfejsza neke od zadataka, kao što je, na primer, biranje boja.

Processing ima različite programske režime kako bi omogućio pravljenje skečeva za različi-te platforme, kao i programe na drugačiji način. Standardni režimi u Processing-u su Java

i Experimental. Drugi programski režimi, poput JavaSkript-a ili Android-a, uključuju sepritiskom na Add Mode iz linije menija.

11.1. Okruženje za rad

PDE sadrži liniju menija, liniju sa alatima i najčešćim funkcijama. Takođe, sadrži jednosta-van tekst editor za pisanje koda, kao i konzolu za ispisivanje poruka. Meni se menja zavisnood režima u kom se piše skeč. U standardnom okruženju aktivan je Java režim. Režim sebira u gornjem desnom uglu.

Slika 11.1. Okruženje za rad

Da ponovimo, program napisan koristeći Processing zove se Sketch. Skečevi se pišu u teksteditoru. Kao i svaki standardni tekstualni editor ima opcije cut, paste, copy i search, koječesto olakšavaju posao prilikom pisanja koda. Ukoliko se program izvršava i ima grešku,u editoru se obeležava linija koda koja nije ispravna. Konzola prikazuje grešku ukoliko sepozovu funkcije print() ili println().

Processing 327

Slika 11.2. Dostupni alati

Na slici 11.2 se nalaze alati koji se nalaze u liniji sa alatima i sledi kratak opis njihovihfunkcija:

1. Run – pokreće skeč u Java modu; kompajlira kôd i otvara novi prozor;

2. Stop – zaustavlja rad programa;

3. New – pravi novi skeč ili projekat u istom prozoru; bira se File – New;

4. Open – otvara fajlove sa bilo koje lokacije računara;

5. Save – čuva skeč koji je trenutno aktivan na njegovu lokaciju; ukoliko je potrebnopromeniti standardnu lokaciju, potrebno je izabrati Save As.

6. Export – eksportuje skeč kao Java aplikaciju ili u nekom drugom formatu, zavisnood izabranog režima.

Dodatne komande mogu da se nađu u File, Edit, Sketch i Help meniju. Meni se menja,zavisno od režima i konteksta u kom se nalazi aplikacija.

11.2. Processing i drugi uređaji

Da je Processing više od "suvog" programiranja, potvrđuje činjenica da Processing možeda se koristi i za pravljenje različitih uređaja. Neki od primera gde je moguće koris-titi Processing su mobilni telefoni, tableti, dizajniranje senzorskih uređaja (često se ko-risti u mašinskoj industriji), moguće je programirati ograničenja za CPU ili memoriju idrugo. Takođe, često se koristi u Web baziranim tehnologijama, a u Internet prezentaci-jama može da se koristi kao 2D ili 3D interaktivna animacija. Moguće ga je koristiti upravljenju virtuelne stvarnosti u interakciji između čoveka i računara. Postavlja se kaoparadigma za nova dostignuća u interakciji između računara i ljudi.

Za pametne telefone sa Android operativnim sistemom se pokazao kao prirodno rešenje iobezbeđuje potpuno usklađenu i kompaktibilnu interakciju. Za Android platformu postojiposebna Internet stranica, na kojoj se mogu naći razne informacije vezane za programi-ranje aplikacija: https://github.com/processing/processing-android. Ono što jepotrebno da bi se pravile aplikacije za pametne telefone je Android SDK, Android API

7, a prednost je što nije potreban uređaj sa Android OS, već postoji integrisan simulatorkoji je moguće koristiti.

11.3. Processing IDE

Processing ima svoje integrasano razvojno okruženje (Integrated Develpoment Environ-

ment, IDE), razvijeno u Javi. Jednostavno je i lako za korišćenje. Okruženje i podrška

328 Multimedija

su sasvim dovoljni za većinu aplikacija. Podržava migriranje kompleksnih aplikacija uokruženje kao što je Eclipse i slične razvojne softvere. U terminologiji je poznat podsvojim nazivom Processing development environment, PDE.

Slika 11.3. Processing IDE

Kada se čuva aplikacija, direktorijum sa nazivom aplikacije se generiše u istom. Ekstenzijaza glavni fajl aplikacije je .pde, koji se takođe nalazi u direktorijumu gde je sačuvanaaplikacija. Za naziv aplikacije je moguće iskoristiti najviše 64 karaktera, bez razmaka.

Više kodovanih fajlova je moguće generisati i napisati za istu aplikaciju. U tom smisli, mislise na pravljenje novih tabova. Prečica za pravljenje novog taba je Ctrl+ Shift+N. Popravljenju novog taba (nove klase ili instance), fajl dobija istu ekstenziju .pde. Isto tako,fajlove je moguće prevesti u .java ekstenziju i takvi fajlovi će biti pročitani kao Java

izvorni fajl, odnosno, kôd. Ukoliko bi aplikacija trebalo da ima nekoliko klasa, potrebnoje napraviti novi skeč (fajl ili tab), koji će biti implementiran u funkciju setup() glavneklase. Ukoliko se otvara sačuvani projekat, potrebno je iz direktorijuma otvoriti samoglavni (main) .pde fajl.

Run i Stop – dozvoljavaju da se pokrene (start) i prekine (interrupt) izvršavanje ap-likacije. Eksportovanje dozvoljava da se generiše applet za aplikaciju. Takođe, iz menijaExport Application, komanda dozvoljava da se generiše aplikacija ready-to-run za Win-

dows, Linux ili Mac OS i to se generiše u specifičnom direktorijumu aplikacije.

Skecthbook je standardni korisnikov direktorijum – ali nije jedini i on može biti promenjenna bilo koju lokaciju.

Pored pomenutih, ima u opticaju još par "zanimljivih" funkcija:

• Import Library – dozvoljava učitavanje dobro poznatih biblioteka;

• Add File – pravi i uključuje elemente multimedijalnog sadržaja (font, slika itd.);

• Create font – pravi aplet koji obezbeđuje pravilno prikazivanje fontova;

• Help – pomoć, kao referenca za funkcije Processing-a.

Processing 329

Processing je zasnovan na Javi, koji podržava određene verzije, izvršavane u pozadini;takođe, obezbeđuje i strukturno programiranje, što je karakteristika za programski jezikC. Nije greška ukoliko se koristi takav set funkcija, ali je bezbednije i stabilnije objektno-orijentisano programiranje, što više odgovara Javi.

11.4. Kako se izvršava processing?

Set instrukcija počinje Processing-om iz Processing koda u Java kôd, zatim, kompajlirase Java kôd u bajtkôd (.class) i konačno, izvršavanje Java virtualne mašine – JVM:

Slika 11.4. Instrukcije

Kao i u Javi, Processing ima tipove, nizove, konstante, inicijalizacije, operatore, logičkeupite itd.

• Tipovi: byte, short, int, long, float, double, char i boolean (ima vrednost TRUE iFALSE)

• Promenljive: tip imePromenljive;

• Niz: byte[] niz;

• Konstante: final int imePromenljive = vrednost;

• Inicijalizacija: tip imePromenljive = vrednost;

• Aritmetički operatori: +, −, /, ∗, %, −−, ++

• Relacije: ==, ! =, >, <, >=, <=

• Logički operatori: ||, |, &&, &, !

• Zadaci: =, − =, + =, / =, ∗ =, & =, % =

Pored pomenutih elemenata, pojavljuju se i odgovarajući blok kodovi. Reč je o sledećimblok kodovima:

• while – izvršavanje skeča dok se ne desi uslov:

while (uslov) {instrukcije}

• do while – čita se "radi dok"

do {instrukcije} while (uslov)

• for – čita se "za određeni iskaz, izvrši"

330 Multimedija

for (pocetak; kraj; ukljucuje) {instrukcije}

• if – proveravanje nekog uslova

if (uslov) {instrukcije}

• if/else – grananje

if (uslov) {nstrukcije}

else {instrukcije}

• Vraćanje vrednosti: return;

• Zaustavljanje petlje: break;

• Nastavak petlje: continue;

Radi preglednosti koda i boljeg razumevanja, poželjno je pisati komentare u kodu. Komen-tari u kodu često olakšavaju posao programerima. Komentar koji se upisuje nije vidjiv popokretanju aplikacije, ali olakšava rad ukoliko je kod dugačak. U processing-u se komentaripišu isto kao i u Javi. Postoje dva tipa komentarisanja koda:

• komentar za jednu liniju koda (//) i komentar sa nekoliko redova (/* i */).

Tih standarda bi se, svakako, trebalo pridržavati. Primeri komentara:

//Komentar za jednu liniju koda

i

/* Komentar koji se upisuje

u vise linija */

• Stringovi – služe za definisanje teksta.

String tekst = "Zdravo svete!";

Postoji mnogo metoda kako string može da se definiše, da se odredi dužina stringa, kao štoje length() metoda, pristupanju karaktera charAt(), izmene contact(), replace().Takođe, zavisno od slučaja, nekada je potrebno velika slova pretvoriti u mala slova, a zato se koristi metoda toLowerCase().

11.5. Kako se Processing prikazuje?

Processing ima nekoliko različitih pristupa prikaza, može koristiti određene biblioteke, amože koristiti režim OpenGL-a, Java2D, P2D i P3D. Njegov standardni režim je Java2D.

Za prikazivanje ovih režima, potrebno je definisati i veličinu prozora u kojoj će se prikazivatigrafika – size(argumenti).

Processing 331

Pozicioniranje prozora počinje od gornjeg levog ugla prozora i tu se nalazi koordinatnipočetak (0, 0). Reč je o klasičnom Dekartovom koordinatnom sistemu, gde se x osa krećeu smeru desno – u pozitivnom smeru, a y osa u smeru ka dole – takođe u pozitivnomsmeru.

Najčešći primitivni elementi koji se koriste u Processing-u su: tačke (points), krugovi(ellipse), linije (line), pravougaonici (rect), slobodne forme (shape), krive (bezier).

Boja pozadine prozora se često koristi i njena metoda je background(). Očekivani para-metri u pozadini su sledećeg tipa:

• Za crno-belu boju, boje se kreću u rasponu od 0 do 255, gde je 0 crna, a 255 belaboja; na primer:

background (0);

• Za pozadinu u boji, odnosni RGB sistem, koriste se sve tri boje; na primer:

background (50,100,200);

Takođe, postoje metode koje ne boje pozadinu, niti povlače liniju po ivicama pozadine, ato su noFill() i noStroke().

Sledi primer iscrtavanja linije do polovine ekrana, u prozoru veličine 300 × 300, kaošto je prikazano na slici 11.5a:

size (300, 300); //pozicija 300 po X-osi, pozicija 300 po y-osi

background(0); //pozadina 0 - crna boja

stroke(255); //linija obojena u belu boju

strokeWeight(2); //debljina linije

/*line: pozicija 1 pocetak linije: 0,0 po x i y-osi i

150, 150 po X i Y-osi - pozicija 2 zavrsetak linije */

line(0, 0, 150, 150);

Slika 11.5. Crtanje osnovnih entiteta

Ono što se najčešće koristi u Processing-u su krugovi. Crtanje krugova u Processing-u seradi pozicioniranjem kruga na x i y osi, kao i definisanje njegove širine i visine:

ellipse (x, y, width, height);

332 Multimedija

Sledi primer crtanja kruga u prozoru veličine 200 × 200, kao što je prikazano na slici11.5b:

size (200, 200); //velicina prozora

background (150); //pozadina prozora

stroke (150, 0, 0); //boja linije oko kruga

strokeWeight(2); //debljina linije

fill (0, 150, 0); //boja kruga

ellipse (150, 150, 50, 50); //pozicije kruga

Crtanje pravougaonika se obavlja komandom rect (x, y, width, height);, gde sedefiniše njegova pozicija na x i y osi, kao i njegova širina i visina. Crtanje trougla seobavlja po sličnom principu, ali pošto da postoje tri tačke koje je neophodno definisati,kôd se piše nešto drugačije:

triangle (x1, y1, x2, y2, x3, y3);

Sledi primer crtanja trougla pomoću gore pomenute sintakse, a rezultat je vidljiv na slici11.5c:

size (400, 400);

background (255);

stroke (50, 50, 0);

strokeWeight (5);

fill (50, 0, 250);

triangle (200, 50, 50, 350, 350, 350);

11.6. Animacija

U Processing-u postoje dve funkcije setup() i draw(). Kako je u ranijem tekstu nave-deno, u setup() funkciji se definišu sve promenljive i sve metode koje se primenjuju nacelu aplikaciju (sketch), dok se u draw() funkciji crtaju elementi i konstantno izvršavajuanimacije, "upadajući" u petlju.

U nastavku će biti prikazan jednostavan primer kretanja lopte po x osi do desne iviceekrana i nazad. Ono što je karakteristično za ovaj primer je kako rešiti problem da sekrug, koji se kreće od svoje pozicije u pozitivnom smeru (desno), "odbije" od desne iviceekrana i vrati se nazad do leve ivice ekrana.

int x = 100;

int dx = 1; //promenljiva koja se koristi za kretanje po X osi

void setup () {

size (640, 480);

}

void draw() {

background (155); //Boja ekrana

ellipse(x, 100, 50, 50); //Pocetak kruga i njegova velicina

Processing 333

x = x + dx;

if (x + 25 > width || x - 25 < 0) {

dx *= -1; //kretanje po X osi

}

}

11.7. Interakcija

Processing pruža jednostavne metode za interakciju. Korišćenjem jednostavnih sistemskihpromenljivih i definisanjem seta povratnih funkcija, lako se pozivaju tasteri miša i tastature.

Kada se radi o interakciji sa hardverom, pozivaju se sistemske promenljive unutar draw()funkcije. Postavlja se pitanje kako radi interakcija? Radi na sledeći način, definiše se tastermiša ili tastature, a da li se dešava neki događaj ili ne, samu aplikaciju to ne zanima,već aplikacija "konstantno" izvršava funkciju koja je zadata. Podrazumevano je da se neizvršava bukvalno tom smislu, jer bi to značilo rasipanje resursa, već se funkcije stavljajuu red za čekanje (queue) na neki događaj. Na taj način se omogućava sigurno izvršavajnesvakog događaja.

Praćenje miša može se izvršiti pomoću dve funkcije: mouseX i mouseY. Te dve funkcijevode računa o trenutnoj poziciji miša; mouseX čuva koordinate po x osi, a mouseY čuvakoordinate po y osi.

Sledi primer kretanja kruga pomerajem miša, a rezultati su vidljivi na slici 11.6a:

void setup() {

size(600, 600);

noStroke();

smooth(); // antialiasing tehnika

background(0);

}

void draw() {

ellipse(mouseX,mouseY,20,20);

/* Funkcije mouseX i mouseY cuvaju odgovarajuce pozicije,

a velicina kruga je 20x20 */

}

Slika 11.6. Primeri interakcije

334 Multimedija

Interakcija čuvanja pozicije miša, na osnovu prethodnog frejma se radi pozivanjem funkcijapmouseX i pmouseY. Prethodni primer može malo da se izmeni i da se pozovu dve novefunkcije (slika 11.6b).

void setup() {

size(600, 600);

stroke(255);

strokeWeight(5);

smooth();

background(0);

}

void draw() {

line(pmouseX, pmouseY, mouseX, mouseY);

}

Takođe, postoji interakcija mišem na takav način da ukoliko se desi neki događaj, u ovomslučaju klik tasterom miša, izvršava se određen prekid. Preciznije rečeno, ukoliko je bilokoji taster miša pritisnut biće TRUE, u suprotnom FALSE. Nadovezaćemo se na prethodniprimer i uključiti iskaz if, gde će biti pozvan mousePressed (slika 11.6c).

void setup() {

size(600, 300);

stroke(255);

strokeWeight(5);

smooth();

background(0);

}

void draw() {

if (mousePressed)

line(pmouseX, pmouseY, mouseX, mouseY);

}

11.8. Osnovni algoritam fizike u Processingu

Processing, kao što je ranije rečeno, koristi Java biblioteke. Poznato je da Java ima do-bru podršku za programiranje fizike u igricama. Samim tim, u Processing-u mogu da sekoriste te metode i funkcije, što nam olakšava rad. U Javi bi morali svaki put da učitamobiblioteku, prilagodimo našem projektu, a zatim da tu biblioteku pozivamo glavnoj klasiili pak u klasama. Ovde to nije slučaj, već postoje učitane biblioteke i ono što je potrebnoje da pozivamo samo tipove funkcija.

U sledećem primeru ideja je da se krug kreće strelicama na tastaturi. Dakle, kao što smoranije radili i pozivali taster miša, sada se pravi kontakt sa tastaturom. Ideja ove jednos-tavne igrice je da krug ima osobine gravitacije. Dajemo određene komande krugu. Strelicena tastaturi (gore, dole levo i desno) služe za kontrolu kretanja kruga. Želimo da pritiskomna jedan od tastera krug dobije određeno ubrzanje, u ovom slučaju za 0, 05. To znači da

Processing 335

će na svakoj novoj poziciji na ekranu igrica dobiti pomenuto ubrzanje. Kao što smo rekliu ranijim primerima, potrebno je da definišemo pozicije po x i y osi. Zatim, da definišemobrzinu kretanja po osama, kao i potrebno ubrzanje.

float xPos;

float yPos;

float xSpeed;

float ySpeed;

float accel=0.05;

void setup() {

size(800,800);

Pozicioniramo početak igrice na sredinu ekrana. To radimo jednostavnom funkcijom, gdeširinu x ose i visinu y ose delimo sa 2.

xPos = width/2;

yPos = height/2;

}

void draw() {

fill (0,10);

rect (0,0,width,height);

U Processing-u postoji funkcija keyPressed, koja se odnosi na pritisnut taster. U sledećimiskazima ispitujemo da li su tasteri pritusnuti i određujemo njihove događaje.

if (keyPressed&&key == CODED){

if(keyCode == UP) {

//Pozitivna vrednost po Y-osi je kretanje na dole

ySpeed -= accel;

}

if (keyCode == DOWN) {

ySpeed += accel; //drugacije receno xSpeed = xSpeed-accel

}

if (keyCode == RIGHT) {

xSpeed += accel;

}

if (keyCode == LEFT){

xSpeed -= accel;

}

}

Funkcija za ispisivanje na konozoluje je identična kao u Javi i piše se println(). U ovomslučaju println() nam služi kao debaging, kako bi smo mogli da pratimo na konzolibrzinu koju dobijamo. Takođe, u println() funkciji možemo da upišemo i tekst, kojiće se štampati na standardnom izlazu, ali je tekst neophodno staviti pod navodnike; naprimer println("Zdravo svete!");

println(xSpeed);

336 Multimedija

Na trenutnu poziciju dodajemo brzinu kretanja

xPos += xSpeed;

yPos += ySpeed;

fill(255);

noStroke();

ellipse(xPos, yPos, 25, 25);

}

Prethodni primer možemo malo da prepravimo i da uključimo matematičke operacijesin i cos i promenićemo pravila kretanja kruga. Krug se kreće oko svoje ose, a zavisnood njegove trenutne pozicije u tom krugu, dobija smer kretanja. Ideja je da krug koji kojipomeramo ima svoj životni vek. Taj period trajanja kruga je dva minuta (120 sekundi). Zavreme koje teče i kako se približava kraj igrice, krug se smanjuje. Takođe, kada krug dobijaubrzanje, njegov obim se uvećava i dobija svetliju boju, a kada mu se umanjuje brzina,menja se boja i njegov obim se smanjuje. Prateći elementi su prikazani na slici 11.7, aelementi će biti naznačeni u samoj sintaksi programa.

Slika 11.7. Programiranje fizičkih elemenata

float xPos;

float yPos;

float xSpeed;

float ySpeed;

float size; //deklarisanje velicine za zivotni vek kruga

float life = 120.0; //vreme trajanja kruga

float ugao = 90.0;

float speed = 0.0; //brzina kruga na kraju igre

float size_part = 0.0;

float boja;

boolean kraj;

int start_time;

int current_time;

int lived_for;

float accel = 0.05; //ubrzanje kruga

Definiše se timestamp, odnosno pretvaranje vremena u sekunde:

int timestamp() {return second() + 60*minute() + 60*60*hour();}

Processing 337

void setup() {

size(800, 800);

xPos=width/2;

yPos=height/2;

start_time = timestamp();

kraj = false;

}

void draw() {

current_time = timestamp(); //poziva se vreme

lived_for = current_time - start_time; //vreme trajanja kruga

fill (0, 10);

rect (0, 0, width, height);

//naredna sintaksa se odnosi na sliku 11.7a

if (keyPressed&&key == CODED) {

if (keyCode == UP) {

speed += 0.05;

}

if (keyCode == DOWN) {

speed -= 0.05;

}

if (keyCode == RIGHT) {

ugao -= 0.05;

}

if (keyCode == LEFT) {

ugao += 0.05;

}

xSpeed = sin(ugao)*speed;

ySpeed = cos(ugao)*speed; //zavrsava se sintaksa za sliku 11.7a

}

Kako se približava kraju životni vek kruga, brzina se umanjuje za 0, 05. Proverava se dali je brzina manja od 0, ukoliko jeste, brzina se postavlja na nulu i krug se zaustavlja natrenutnoj poziciji.

if ( kraj ) {

speed -= 0.05;

if (speed<0) speed = 0;

}

xPos += xSpeed;

yPos += ySpeed;

//naredna sintaksa se odnosi na sliku 11.7b

boja = 63+((speed/7.>=1.)?192:192*speed/7.);

//promena boje u zavisnosti od kretanja

size_part = 40*(1.0-lived_for/15.);

338 Multimedija

//obim kruga zavisno od kretanja

size = ((speed/5.>=1.)?15:15*speed/5.) + size_part;

//obim kruga prema zivotnom veku

//zavrsava se sintaksa za sliku 11.7b

//naredna sintaksa se odnosi na sliku 11.7c

if ( kraj ) {

size = 10; //velicina kruga po isteku 120 sekundi

boja = 50; //boja kruga po isteku 120 sekundi

}

fill(boja);

noStroke();

ellipse(xPos, yPos, size, size); //zavrsava se sintaksa za sliku 11.7c

if ( size_part < 1.0 ) {

println("Kraj!");

kraj = true;

}

}

11.9. Umesto zaključka

Filozofija programiranja je da je sve zasnovano na algoritmima. Suština rešavanja prob-lema algoritama u Processing-u je zasnovana na ideji, zatim, kako matematički pristupitiproblemu, kako razrešiti problem kodom i na kraju, kako implementirati započeti algori-tam. Vrlo je bitno da se koriste olakšice za debaging aplikacije. Da ponovimo iz ranijegteksta, debaging može da se aktivira println() funkcijom, koji je u vidu Stringa, kakobi se ispisivao određen deo koda prilikom rada aplikacije. Ispisivanje, odnosno, debaging,može da se svede na ispisivanje pozicije objekta koji se kreće po površini, zatim, ispisi-vanje pozicije miša ili bilo koje druge operacije. To znatno olakšava posao, ukoliko znamoodređene parametre kuda objekat mora da se kreće. Na konzolnom prikazu ćemo na tajnačin lakše videti da se objekat nalazi ili ne nalazi na pravoj poziciji.

Processing, kao samo okruženje je vrlo pojednostavljen za pisanje kodova. Jednostavnorečeno, koristi tekst editor (na kraju krajeva, može se koristiti i Notepad) koji u sebi imaplejer za puštanje animacija i grafike.

Kao i većini programskih jezika, trebalo bi voditi računa o velikim i malim slovima uProcessing-u, on je case sensitive, što znači da ukoliko je neka promenljiva deklarisanapočetnim malim slovom, ukoliko je pozovemo u nekom delu koda velikim slovom, javljaćese greška da takva promenljiva ne postoji. Na primer, ukoliko želimo da nacrtamo krugi upišemo Ellipse umesto ellipse, to neće raditi, a Processing će vratiti grešku. Takođe,na zvaničnoj stranici Processing-a (http://processing.org/reference) postoji velikibroj referenci gde su detaljno opisane funkcije, sintakse i parametri.

Literatura

1. Tay Vaughan: Multimedia: Making it Work, Eighth Edition, McGraw-Hill Os-borne Media, 2011.

2. Tay Vaughan: Multimedia: Making it Work, Seventh Edition, McGraw-HillOsborne Media, 2006.

3. Ze-Nian Li, Mark S. Drew: Fundamentals of Multimedia, Prentice-Hall, 2004.

4. Nigel Chapman: Jenny Chapman: Digital Multimedia, Wiley, 3rd edition, 2009.

5. Ray Villalobos: Exploring Multimedia for Designers (Design Exploration), Del-mar Cengage Learning, 1st edition, 2007.

6. Stephen M. Alessi: Multimedia for Learning: Methods and Development, 3rd

Edition, Allyn & Bacon, 2000.

7. Ken Jordan, Randall Packer: Multimedia – From Wagner to Virtual Reality,Expanded Edition, W. W. Norton & Company, 2002.

8. Timothy Garrand: Writing for Multimedia and the Web, Third Edition: A Prac-

tical Guide to Content Development for Interactive Media, Focal Press, 2006.

9. 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.

10. Edward Counts: Multimedia Design and Production for Students and Teach-

ers, Allyn & Bacon, 2003.

11. Sanjaya Mishra, Ramesh C. Sharma: Interactive Multimedia in Education and

Training, Idea Group Publishing, 2005.

12. Jakob Nielsen: Multimedia and Hypertext: The Internet and Beyond (Inter-

active Technologies), Morgan Kaufmann, 1995.

13. Grupa autora: Computer Graphics, Multimedia & Animation, 6th Edition,Penrose Pr., 2001.

14. Boriana Koleva: Web Programming and Scripting, Teaching slides, Universityof Nottingham, 2010.

340 Multimedija

15. Grupa autora: Adobe Dreamweaver CS4 – Classroom in a Book, Adobe Press,2008.

16. Dragan Cvetković: Računarska grafika, CET i Računarski fakultet, Beograd, 2006.

17. Duncan Marsh: Applied geometry for computer graphics and CAD, 2nd edi-

tion, Springer undergraduate mathematics series, Springer-Verlag London Limited,2005.

18. John Vince: Geometric Algebra for Computer Graphics, Springer-Verlag LondonLimited, 2008.

19. Philip J. Schneider, David H. Eberly: Geometric Tools for Computer Graphics,Elsevier Science (USA), 2003.

20. J.D.Foley, A.van Dam, S.K.Feiner, J.F.Hughes: Computer Graphics - Principles

and Practice, Second Edition in C, Addison-Wesley Publishing Company, Inc.,Boston, SAD, 1997.

21. J.Vince: Geometry for Computer Graphics - Formulae, Examples & Proofs,Springer-Verlag, New York, SAD, 2005.

22. J.Vince (Ed.): Handbook of Computer Animation, Springer-Verlag, New York,SAD, 2003.

23. David Salomon: Computer Graphics and Geometric Modeling, First Edition,Springer, 1999.

24. John Dimarco: Computer Graphics and Multimedia: Applications, Problems

and Solutions, Idea Group Publishing, 2004.

25. Rafael C. Gonzalez, Richard E. Woods: Digital Image Processing, Second Edi-

tion, Prentice Hall, SAD, 2002.

26. Elizabeth Castro: HTML, XHTML, and CSS, Sixth Edition, Peachpit Press,2006.

27. David Sawyer McFarland: CSS: The Missing Manual, O’Reilly Media, 2009.

28. Simon Collison, Andy Budd, Cameron Moll: CSS Mastery: Advanced Web Stan-

dards Solutions, Second Edition, friends of ED, 2009.

29. Andy Harris, Chris McCulloh: HTML, XHTML, and CSS – All-in-One Desk

Reference For Dummies, For Dummies, 2008.

30. Chuck Musciano, Bill Kennedy: HTML & XHTML: The Definitive Guide, 6th

edition, O’Reilly Media, 2006.

31. Jennifer Niederst Robbins, Aaron Gustafson: Learning Web Design: A Begin-

ner’s Guide to (X)HTML, StyleSheets, and Web Graphics, O’Reilly Media,2007.

Literatura i sajtovi 341

32. David Flanagan: JavaScript: The Definitive Guide, O’Reilly Media, 2006.

33. David Sawyer McFarland: JavaScript: The Missing Manual, Pogue Press, 2008.

34. Grupa autora: Adobe Flash CS4 Professional Classroom in a Book, AdobePress, 2008.

35. Lisa DaNae Dayley, Brad Dayley: Photoshop CS5 Bible, Wiley Publishing, Inc.,2010,

36. Jon Duckett: Beginning HTML, XHTML, CSS, and JavaScript (Wrox Pro-

grammer to Programmer), Wrox, 2009.

37. Robin Nixon: Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide

to Creating Dynamic Websites, O’Reilly Media, 2009.

38. Patrick Carey: New Perspectives on Creating Web Pages – HTML, XHTML

and XML, Comprehensive (New Perspectives), Course Technology, 2005.

39. Don Gosselin: JavaScript, Course Technology, 2007.

40. Jenq-Neng Hwang: Multimedia Networking: From Theory to Practice, Cam-bridge University Press, 2009.

41. 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.

42. Fred Halsall: Multimedia Communications: Applications, Networks, Proto-

cols and Standards, Addison Wesley, 2000.

43. Jerry D. Gibson: Multimedia Communications: Directions and Innovations

(Communications, Networking and Multimedia), Academic Press, 2000.

44. Ian Devlin: HTML5 Multimedia: Develop and Design, Peachpit Press, 2012.

45. Richard York: Beginning JavaScript and CSS Development with jQuery, WileyPublishing, Inc., 2009.

46. David Sawyer McFarland: JavaScript & jQuery: The Missing Manual, Second

Edition, O’Reilly Media, Inc., 2011.

47. Craig Grannell, Victor Sumner, Dionysios Synodinos: The Essential Guide to

HTML5 and CSS3 Web Design, Apress and friends of ED books, 2012.

48. Jonathan Lane, Tom Barker, Joseph R. Lewis, Meitar Moscovitz: Foundation

Website Creation with HTML5, CSS3, and JavaScript, Apress and friends ofED books, 2012.

49. Paul Wilton, Jeremy McPeak: Beginning JavaScript, Third Edition, Wiley Pub-lishing, Inc., 2007.

342 Multimedija

50. Grupa autora: jQuery Cookbook, O’Reilly Media, Inc., 2010.

51. Bear Bibeault, Yehuda Katz: jQuery in Action, Second Edition, Manning Publi-cations Co., 2010.

52. Scott Duffy: How to Do Everything with JavaScript, McGraw-Hill/Osborne,2003.

53. Rob Huddleston: HTML, XHTML, and CSS: Your visual blueprint for design-

ing effective Web pages, Wiley Publishing, Inc., 2008.

54. Casey Reas, Ben Fry: Processing: A Programming Handbook for Visual De-

signers and Artists, Second Edition, The MIT Press, 2007.

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/programs-courses

• http://www.princetonreview.com/Majors.aspx?cip=090702&page=1

• http://bcq.sagepub.com/content/60/2/51.abstract

• https://processing.org

• https://github.com/processing

Na osnovu člana 23. stav 2. tačka 7. Zakona o porezu na dodatu vrednost („Službeni glasnik RS”, br. 84/2004, 86/2004 (ispr.), 61/2005, 61/2007 i 93/2012), Odlukom Se-nata Univerziteta Singidunum, Beograd, broj 260/07 od 8. juna 2007. godine, ova knjiga je odobrena kao osnovni udžbenik na Univerzitetu.

CIP - Каталогизација у публикацијиНародна библиотека Србије, Београд

004.4’27(075.8) ЦВЕТКОВИЋ, Драган, 1963- Multimedija / Dragan Cvetković, Dragan Marković, Savanović Nikola. - 1. izd. - Beograd : Univerzitet Singidunum, 2015 (Loznica : Mladost grup). - X, 342 str. : ilustr. ; 24 cm Tiraž 600. - Bibliografija: str. 339-342. ISBN 978-86-7912-609-2

1. Марковић, Драган, 1967- [аутор] 2. Савановић, Никола, 1988- [аутор]a) Мултимедији

COBISS.SR-ID 217265676

© 2015.Sva prava zadržana. Nijedan deo ove publikacije ne može biti reprodukovan u bilo kom vidu i putem bilo kog medija, u delovima ili celini bez prethodne pismene saglas-nosti izdavača.

us - multimedija

Documents