Multimedija na Internetu

V I S O K A T E H N I Č K A Š K O L A

N I Š

SEMINARSKI RAD

Multimedija na Internetu

Predmet: Napredne Internet i WEB tehnologije

Mentor: Student:

Veličković Zoran Pavlović Milan

RTs 24/10

Niš, 2011

1

Multimedija na Internetu

Sadržaj

Sadržaj .................................................................................................................................... 1 1. Uvod .................................................................................................................................. 2 2. Tekst ………………………….. ....................................................................................... 33. Slika …………………………........................................................................................... 64. Zvuk ………………………………………….. ................................................................ 10 5. Video ……………………………… …………... ............................................................. 146. Zaključak ........................................................................................................................... 197. Literatura ............................................................................................................................ 20

Multimedija na Internetu - Uvod -

1. UVOD

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. Multimedija je već duže vreme oko nas i

upotrebljava se u različitim okolnostima, uključujući korporacijske prezentacije, edukativne

aktivnosti i reakciju u obliku video igara. Smatra se da je multimedija postala fenomen

savremenog društva, koga posmatramo kao sredstvo u procesu interakcije čoveka sa okruženjem.

Multimedija svojim postojanjem i napretkom postavlja nove izazove i granice razvoju

tehnologije, jer se pojavljuje potreba za bržim prenosom signala, efikasnijim načinom kodiranja i

kvalitetnijim prikazom. Multimedija nalazi široku primenu skoro u svim oblastima a jedan od

njih su i Web prezentacije. U ovom radu pokušaću da objasni na koji način je moguće da se

multimedijalni sadržaj prikaže na jednoj HTML strani i kako će on uticati na vizuelni doživljaj

korisnika.

http://bs.wikipedia.org/wiki/Ra%C4%8Dunarstvo

Multimedija na Internetu - Tekst -

2. TEKST

Čitači HTML dokumenta prikazuju tekst stranice u svom podrazumevanom fontu i stilu,

podrazumevane boje i veličine. Upotrebom početne i završne oznake i definiše se

kako će izgledati tekst na web stranici. Savremeni način promene izgleda teksta se ostvaruje

primenom CSS pravila.



Atributi navedeni unutar početne oznake nalažu čitaču weba na koji način da prikažu tekst iz

HTML fajla. Atribut „color“ određuje boju teksta. Vrednosti ovog atributa mogu biti simboličke

(yellow, red, green...) ili heksadecimalne vrednosti (#00C000, #FF0000, #990000“...). Atribut

„size“ određuje veličinu fonta. Atribut „face“ određuje ime fonta kojim će se ispisati tekst (npr.

Times New Roman, Arial, Helvetica...) Ako traženi font nije instaliran na računaru posetioca

weba, čitač će ignorisati ovaj atribut i zameniti ga podrazumevanim fontom.

Pored ovih atributa u HTML-u postoje i nekoliko oznaka za formatiranje teksta koji se mogu

koristiti za menjanje izgleda teksta. Formatiranje teksta može se obavati unošenjem početne

oznake formata na sam početaka teksta. Najčešće oznake koje se koriste su :

PREDMET: Tekst koji se nalazi između ovih oznaka biće prikazan polucrnim fontom.

MENTOR: Tekst koji se nalazi između ovih oznaka biće prikazan kurzivom.

STUDENT: Tekst koji se nalazi između ovih oznaka biće podvučen.

Čitač weba kontroliše podrazumevane vrednosti boja, veličine i fonta. Povratak ispisivanja

teksta na podrazumevani font obezbeđujemo stavljanjem završne oznake na kraju teksta

koji ste menjali atributima oznake . Takođe treba napomenuti da postavljanje teksta na

željenom mestu na web stranici zna da predstavlja problem, zbog ćega se često koriste tabele u

kojima se ubacuje tekst.

U nastavku rada prikazan je slika prve vežbe za uređene teksta i kompletan kod:


Slika 1. Vežba 1 – tekst

<html>

<head>

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

</head>

<body>

NAPREDNE

INTERNET I WEB TEHNOLOGIJE



<hr>



<table border="2" style="border-collapse: collapse" width="100%"

bgcolor="#C0C0C0" bordercolor="#000000">

<tr>

<td align="center"><a href="index.htm">


TEKST</a></td>

<td align="center"><a href="zvuk.htm">


color="#990000">ZVUK</a></td>

<td align="center"><a href="slika.htm">


color="#990000">SLIKA</a></td>

<td align="center"><a href="video.htm">



VIDEO</a></td>

</tr>

</table>

 

PREDMET: Napredne Internet i WEB

tehnologije

MENTOR: mr. Veličković

Zoran

STUDENT: Pavlović

Milan

BROJ INDEKSA: RTs

24/10




Visoka tehnička škola Niš



<hr>

</body>

</html>

Multimedija na Internetu - Slika -

3. SLIKA

Glavni cilj kada radite sa grafikom je da zadržite odgovarajuće veličine a da pritom ne

žrtvujete kvalitet. Razumevanje postojećih formata fajlova koji se koriste za grafiku na webuje

osnova. Osim toga, jedan od bitnih faktora za konstruisanje web sajta je potreba za

visokokvalitetnom dobro dizajniranom grafikom.

GIF je format fajla koji upotrebljava tip kompresije koja se naziva “lossless” (najmanji

gubitak kvaliteta). Kompresija je bazirana na komplikovanom matematičkom algoritmu koji radi

tako šro proverava koliko slika upotrebljava istu boju.

GIF je ograničen na maksimalno 256 boja, pa je prema tome rezultujući numerički obrazac

veoma specifičan. Ako imate 15 nijansa plave u okviru grafike koja je snimljena u GIF formatu,

to se prevodi u 15 pojedinačnih šablona. Ako postoje više od 256 nijansi algoritam kompresije

mora da odluči koja nijansa će biti izostavljena. Ovo se određuje ograničavanjem boje koja se

najmanje pojavljuje.

JPEG dozvoljava visoki kvalitet kompresije, dok istovremeno može da sadrži milione boja.

JPEG definiše “lossy” metod kompresije. Algoritam se bazira na uklanjanju podataka za koje se

ispostavlja da su nebitne, a prazna mesta se popunjavaju informacijama koje treba da budu

sačuvane. JPEG metod izvodi ovu kompresiju tako što deli podatke na slici na pravougaone

delove pre nego što se primeni algoritam. JPEG format je dizajniran pre svega za rad sa

fajlovima koji imaju veliki broj boja.

PNG format je definisan tokom 1995, i 1996, godine da bi bili nadvladani problemi zbog

autorskih prava GIF formata koji je tada postojao. Kao i GIF, PNG upotrebljava “lossless”

kompresiju. Jedna od velikih prednosti po kojoj PNG nadmašuje GIF kompresiju je mogućnost

smeštanja slike koja obuhvata alfa kanal. Ovo omogućava odgovarajuće smanjivanje prelaza,

eleminišu se oštre ivice oko fontova i slika i dozvoljava se kreiranje transparentnih slika.

Dodavanje slike na web stranama je prvi korak napred od jednostavnog formatiranja

dokumenta u svetu dizajna. Slike dodaju indetitet, boju, oblik i prisustvo. Upotrebom oznake

<img> možete postaviti sliku na web stranicu. Da biste prikazali sliku oznaka <img> treba da

sadrži atribut „src“, koji šitašu predočava putanju do datoteke sa traženom slikom.

Mnogi atributi moga da budu dodati oznaci “img” da bi bio kontrolisan način na koji

pretraživač kontroliše sliku. Ovi atributi obuhvataju sledeće:


- src=”x” - Ovo je atribut ya iyvor koji se upotrebljava ili sa apsolutnim ili relativnim

URL-om koji ukazuje na lokaciju slike.

- width=”x” – Ovim atributom se dozvoljava da pretraživač preddefiniše širinu koja je

potrebna za sliku.

- height=”x” – Ovim atributom se dozvoljava da pretraživač preddefiniše visinu koja je

potrebna za sliku.

- border=”x” – Ovaj atribut se koristi za dodavanje ili uklanjanje okvira oko slike.

- align=”x” – Možete da poravnate sliku na strani horizontalno i vertikalno upotrebom

ovog atributa.

- alt=”opis slike” – Ovaj atribut obezbeđuje tekst za čitače koji ne mogu da prikažu sliku.

Rezervni tekst čitači koriste i kao tekst koji se prikazuje u blizini pokazivača miša na

ekranu kada je on na slici.

- hspace=”x” – Horizontalni prostor se upotrebljava za dodavanje prostora, sa numeričkom

vrednošću oko horizontalne ose slike.

- vspace=”x” – Vertikalni prostor definiše razmak slike uz vertikalnu osu.

<img border="0" src="images/Slika1.jpg" width="160" height="120"

alt="Slika 1" title="Slika 1" vspace="10" hspace="10">

U nastavku rada prikazana je slika prve vežbe sa postavljenim slikama i kompletan kod.


Slika 2. Vežba 1 – slika

<html>

<head>



</head>

<body>





<hr>





<tr>













</tr>

</table>

<center>

<a href="images/Slika%2011.jpg">

<img border="0" src="images/Slika%201.jpg" width="160" height="120" alt="Slika

1" title="Slika 1" vspace="10" hspace="10"></a>



2" title="Slika 2" vspace="10" hspace="10"></a>




3" title="Slika 3" vspace="10" hspace="10"></a>

<img border="0" src="images/5.gif" width="160" height="160" alt="Slika 4"

title="Slika 4" onmouseover="this.src='images/6.gif'"

onmouseout="this.src='images/5.gif'">

</center>




Visoka tehnička

škola Niš

<hr>

</body>

</html>

Multimedija na Internetu - Zvuk -

4. ZVUK

Postavljanje audio fajlova na web stranici može dodatno da “oživi” web sajt. Prilikom

postavljanja audio fajlova treba obratiti pažnju na njegovu veličinu. Uvek treba smanjiti audio

fajlove što je više moguće. Jedan od važnih faktora koji direktno utiče na veličinu fajla je

kvalitet. Kvalitet zvučnog zapisa dosta varira i formati određenih fajlova su boji za bolji kvalitet

audio zapisa.

Viša frekvencija odmeravanja i rezolucija zahtevaju više prostora i veći propusni opseg.

Morate da odlučite da li želite da žrtvujete prostor na disku i propusni opseg i korist kvaliteta

audio fajlova. Audio zapisi dužine od jednog minuta koji je 8-bitni mono zapis, sa frekvencijom

od 8 KHz ima veličinu oko 150 KB, a 16-bitni stereo fajl koji je odmeravan sa frekvencijom od

44.1 KHz može da ima do 10 MB. Ponekad će manji kvalitet audio fajla ispuni očekivanja

posetilaca sajta.

Audio formata koji se najviše upotrebljavaju su:

- WAV

Kao odgovarajući format za Microsfot i IBM, najviše se koristi na Windows platformi. Podržan

jeod strane svih računara sa operativnim sistemom Windows, i svih popularnih web browsera.

radi se o formatu baziranom na RIFF specifikaciji koja govori o načinu čuvanja (memorisanja)

multimedijalnih datoteka.

- MP3 (MPEG)

Jedan od svakako najraširenijih standarda zvučnih zapisa u svetu je svakako MP3 (MPEG-1

Audio Layer 3) format zapisa. To je tehnologija kompresije audio signala koja je u stanju da fajl

za digitalni audio svede na oko 10% svoje veličine, uz samo neznatan gubitak u kvalitetu zvuka.

- MIDI

Za razliku od drugih formata Musical Instrument Digital Interface (MIDI) nije specifikacija za

digitalni audio zapis. MIDI datoteke neuporedivo su manje od svih pre spomenutih datoteka

upravo zbog činjenice da se u MIDI datotekama čuvaju note i mnoštvo parametara, a ne

uzorkovani zvuk. Naravno, zbog toga je kvalitet reprodukovanih MIDI zapisa daleko manji od

uzorkovanog zvuka.


- RMF

Rich Music Format je relativno nov format koji se emituje na Beatnik programu. RMF upotrebljava Java

Script da bi dodao audio fajl web strani, a ti fajlovi su dosta mali i brzo se učitavaju. Ako korisnik nema

ovaj program za emitovanje onda jednostavno neće da čuje muziku.

Postoje dva načina na koje može da se postave audio zapisi na Web sajt i koji će biti

odgovarajući za pretraživače: upotrebom oznake sidra i pomoću elementa embed. Upotreba

elementa sidra je ista kao i smeštanje linka u okviru dokumenta:

<a href="Letnja sema.mp3">Pusti pesmu</a>

Ako upotrebljavate ovaj metod korisnici će moći da snime fajl na svoj računar. Ako želite da

se audio zapis prikaže na strani sa ostalim sadržajem morate da upotrebite element embed.

Upotreba oznake embed je slična kao i upotreba oznake img. Međutim oznaka embed zahteva da

imate instalirane određene dodatke inače nećete moći da pustite pesmu.

<embed src="file:///C:/User/Desktop/Vezba1/Letnja sema.mp3"

type="application/x-mplayer2" width="300" height="42"

autostart="false" loop="false"

pluginspage="http://www.microsoft.com/Windows/MediaPlayer/download/

default.as”></embed>

Atributi za oznaku embed i njihove vrednosti su sledeće:

height=”pixel/percent”

Ovim atributom određujete visinu plejera na Web stranici.

width=”pixel/percent”

Najbolje je da se širina kontroliše u pikselima, ali možete da navedete i procente da bi ste

rekli pretraživaću koliko prostora strane treba da zauzme.

autostart=”true/false”

Ako je vrednost true pesma će početi odmah pri učitavanju web strane. Ako je vrednost

false korisnik mora da klikne na dugme da bi pustio pesmu.

loop=”true/false”

Ako želite da se pesma stalno ponavlja podesite ovu vrednost na true. Ako želite da se

pustite pesmu samo jednom a zatim da stane podesite ovu vrednost na false.

pluginspage=”gohere.html”

Ovo vodi korisnike koji nemaju odgovarajuće pluginove na odgovarajuću stranu gde

mogu da ih nađu.


U nastavku rada prikazana je slika prve vežbe sa plejerom preko kojeg može da se pusti

pesma i kompletan kod.

Slika 3. Vežba 1 – zvuk

<html>

<head>



</head>

<body>





<hr>






<tr>













</tr>

</table>



<embed src="file:///C:/Users/Pavle/Desktop/Vezba1/Letnja sema.mp3"

type="application/x-mplayer2" autostart="false" width="300" height="42"


default.asp"></embed>







<hr>

</body>

</html>

Multimedija na Internetu - Video -

5. VIDEO

Izbor video formata će zavisiti od odsta faktora, kao što su mogućnost platforme, editori koji

se koriste za obradu i lično iskustvo. MPEG je format koji se najviše koristin na Webu. Ovo je i

ujedno i najefikasniji format, zato što ima i najbolje tehniku za kompresovanje. Dosta

programera više voli QuickTime fajlove ili AVI fajlove zato što su obično manji i brže se

preuzimaju. MPEG i QuivkTime fajlovi su ipak najbolji izbor jer je MPEG pre svega dosta

rasprostranjen a QuickTime alati i danas su veoma popularni. AVI je ipak dosta okrenut

Microsoftu i radi samo unutar IE pretraživača a podržava i neke druge.

Ako želite da dodate video Web sajtu treba da eksperimentišete sa ovim fajlovima da biste i

sami uvideli koji je format najbolji za korisnike. Takođe morate da razmotrite da svi alati za

editovanje video zapisa ne odgovaraju svim formatima.

Video formata koji se najviše upotrebljavaju su:

- AVI

Audio/Video interfejs se upotrebljava u Windows operativnim sistemima za obezbeđivanje audio

i video zapisa, gde se audio zapis tretira kao važniji. Može se desiti da se ispuste neki kadrovi ali

zvuk i dalje mora da postoji. Ovaj format radi na skoro svim Windows mašinama od onih vrlo

slabih do najjačih.

- WMV

Za WMV potrebno je imati instaliran operativni sistem Windows i na njemu poslednju verziju

Windows Media Player-a, programa s kojim se WMV može reprodukovati (i drugi programi

mogu reprodukovati video zapise ako je na računaru instaliran odgovarajući video kodek, ali je

obično slika nekvalitetna u tom slučaju, zbog Majkrosoftove politike softvera zatvorenog koda).

Verzije WMV 7 i 8 su vlasnički, tek je verzija 9 slobodna za upotrebu.

- MPEG

Međunaradna organizacija za standarde je kreirala Moving Picture Expert Group (MPEG) format za

audio i video kompresiju fajlova. MPEG koderi su omiljeni velikom broju korisnika weba. Tehnika

kompresije stvara male fajlove koji su obično manji od svih ostalih a visokog su kvaliteta. Danas se

koriste MPEG, MPEG1, MPEG2 i MPEG4 a u razvoju su i još naprednije varijante ovog

standarda (MPEG7 i MPEG21).

http://sr.wikipedia.org/sr-el/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%B8_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC


- MOV

MOV format je razvijen od strane Apple. MOV je čest format na Internetu i za njegovu reprodukciju

potreban je QuickTime Player. Zbog toga da bi Windows pustio MOV format potrebno je instalirati

dodatne komponente.

Postavljanje video zapisa na Web stranicu je slično kao i kod postavljanja audio zapisa. Jedan od

načina da se postavi video jeste pomoću oznake <object>.

<object id=MMPlayer1

codebase=http://activex.microsoft.com/activex/controls/mplayer/en/

nsmp2inf.cab#Version=5,1,52,701

type=application/x-oleobject height="350" width="350" align=absmiddle

classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 >

<param name="FileName" value="file:///C:/Users/ Desktop/Vezba1/Heineken.wmv"

>

<param name="ShowControls" value="1">

<param name="ShowStatusBar" value="0">

<param name="ShowDisplay" value="0">

<param name=”PlayCount” value="1">

<param name="Autostart" value="0">

</object >

U okviru oznake „object“ mogu se koristiti razni atributi. Jedni od njih su „codebase” koji

definiše gde mogu da se nađu kodeci za taj “object”, “height” i “width” definišu visinu i širinu,

pomoću “FileName” definišemo gde se nalazi video zapis, “Autostart” određuje da li video zapis

poćinje odmah ili je potrebno da korisnik startuje video. Međutim pošto jedan deo pretraživača

ne podržava oznaku <object> preporučuje se korišćenje oznake <embed> ili da se oznaka

<embed > ubaci u okviru oznake <object>.

<embed src="file:///C:/Users/Desktop/Vezba1/Heineken.wmv" height="350"

width="350" autostart="0" loop="0"

align="absmiddle" type="application/x-mplayer2"


default.asp"

showcontrols="1" showdisplay="0" showstatusbar="0" > </embed>

Kao i kod audio zapisa i kod video zapisa moguće je koristiti razne atribute u okviru oznake

<embed>. Neke od tih atributa su:


“hight” i “width”

Određuju visinu i širinu video plejera.

“autostart”

Određuje da li video zapis počinje odmah ili je potrebno da korisnik startuje video.

“loop”

Pomoću ovog atributa određujemo da li će se video ponavljati ili ne.

“align”

Ovim atributom definišemo poziciju video zapisa u okviru oznake <embed>.

“type”

Ovim atributom definišemo tip video plejera.

“pluginspage”

Ovaj atribut vodi korisnike ako nemaju odgovarajuće pluginove tamo gde ih ogu naći.

“showcontrols”

Pomoću ovog atributa određujemo da li če biti prikazana kontrolna tabla (play, pause,

stop…)

“showdisplay”

Ovim atributom prikazujemo u okviru plejera ime video fajla.

“showstatusbar”

Ovaim atributom možemo da prikažemo napredak baferovanja.

U nastavku rada prikazana je slika prve vežbe sa plejerom preko kojeg može da se pusti video

zapis i kompletan kod.


Slika 4. Vežba 1 – video

<html>

<head>



</head>

<body>





<hr>





<tr>














</tr>

</table>



<object id=MMPlayer1

codebase=http://activex.microsoft.com/activex/controls/mplayer/en/

nsmp2inf.cab#Version=5,1,52,701

type=application/x-oleobject height="350" width="350" align=absmiddle

classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 >

<param name="FileName"

value="file:///C:/Users/Pavle/Desktop/Vezba1/Heineken.wmv" >

<param name="ShowControls" value="1">

<param name="ShowStatusBar" value="0">

<param name="ShowDisplay" value="0">

<param name=”PlayCount” value="1">

<param name="Autostart" value="0">

<embed

src="file:///C:/Users/Pavle/Desktop/Vezba1/Heineken.wmv" height="350"

width="350" autostart="0" loop="0"

align="absmiddle" type="application/x-mplayer2"


default.asp"

showcontrols="1" showdisplay="0" showstatusbar="0" > </embed></object>








<hr>

</body>

</html>

Multimedija na Internetu - Zključak -

6. ZAKLJUČAK

Iz ove vežbe smo videli da dodavanjem multimedijanog sadržaja HTML stranici možemo

znatno da “oživimo” našu Web prezentaciju. Glavna uloga dodavanja multimedijalnog sadržaja

je da krajnji korisnik bude zainteresovan za našu Web prezentaciju. Zbog toga ne treba

pretrpavati Web prezenraciju raznim slikama i audio/video zapisima. To treba da odradimo što

jednostavnije gledano sa strane korisnika i pritom treba da obratimo pažnju da izgled Web

prezentacije bude zanimljiv korisniku.

Iako ubacivanje muldimedijalnih zapisa u HTML kod izgleda jednostavno u nekim

slučajevima zna da predstavlja veliki problem. Programe mora da pazi da njegova Web

prezentacija bude podržana od strane svih pretraživača kako bih zadovoljio sve korisnike.

Jednostavno rečeno, programer pri pravljenju Web prezentacije mora u nekim slučajevima da

razmišlja kao krajnji korisnik kako bi uspeo da napravi dobru Web prezentaciju.

Multimedija na Internetu - Literatura -

7. LITERATURA

[1] Molly Holzschlag, "HTML and XHTML", David Culverwell, 2003.

[2] David Flanagan, "250 HTML and Web Design Secrets", Wiley Publishing, 2004.

[3] Zoran Veličković, "Internet tehnologije", 2006.

[4] Web sajt " http://sr.wikipedia.org/sr-el/Multimedija ", 08.01.2011.

[5] Web sajt " http://en.wikipedia.org/wiki/Multimedia", 08.01.2011.

http://www.google.com/search?tbs=bks:1&tbo=p&q=+inauthor:%22David+Flanagan%22

http://books.google.com/url?id=2weL0iAfrEMC&pg=PP1&q=http://oreilly.com&clientid=ca-print-oreilly&channel=BTB-ca-print-oreilly+BTB-ISBN:0596101996&linkid=1&usg=AFQjCNG7jTwfVvpuS8xlpUp29gJ4Asoe4A&source=gbs_pub_info_s&cad=3

http://www.google.com/search?tbs=bks:1&tbo=p&q=+inauthor:%22David+Flanagan%22

Documents

Multimedija na Internetu