Transcript Hipermedija
Hipermedija
Multimediji
Tehnološki fakultet
Univerzitet u Banjoj Luci
Definicija
• Hipermedija je termin koji se odnosi na sadržaj
koji obuhvata tekst, slike, zvuk, video,
animacije, itd. povezan je linkovima i
omogućava interakciju sa korisnikom
• Naglasak je na interaktivnosti koja ne mora da
bude prisutna u svakoj multimedijalnoj
aplikaciji
• WWW je primjer hipermedije
• Generalizacija koncepta hiperteksta
Alati za razvoj hipermedije
• Alati za kreiranje WWW sadržaja
– HTML editori
• Alati za razvoj multimedijalnih aplikacija
– Adobe Flash
– Adobe Director
• Alati za kreiranje prezentacija
– MS Powerpoint
– LibreOffice Impress
• Alati za kreiranje CD/DVD sadržaja
• Alati za uređivanje teksta omogućavaju dodavanje hiperlinkova
–
–
–
–
MS Office
LibreOffice
Adobe InDesign
Adobe Acrobat
Hipermedija i WWW
• HTML (HyperText Markup Language) je standardni jezik
za označavanje (markup language) koji se koristi za
kreiranje web stranica
• Najnovija verzija je HTML5
• HTML opisuje strukturu web stranice
– Razdvajanje strukture od prezentacije
– U ranijim verzijama standarda bilo je moguće opisivati i
izgled stranice, ali ta mogućnost je napuštena
– Za opis izgleda stranice koriste se druge tehnologije (CSS)
• Web čitači formiraju vizuelnu ili audio stranicu na
osnovu HTML fajla
Zašto je potrebno poznavati HTML?
• Različiti browseri i aplikacije različito renderišu
iste oznake
– Firefox, Chrome, IE, Opera,...
– Verzija za monitor, štampu, mobilni uređaj, Brajevo
pismo, audio verzija,...
• Browseri i uređaji mogu da budu različito
podešeni
• Browseri imaju bagove
• Jedan vizuelni stil može imati različita semantička
značenja
– Šta znači bold tekst?
HTML elementi
• HTML dokument sadrži HTML elemente koji se
sastoje od tagova (oznaka) u uglastim zagradama,
npr. <html>, i sadržaja elemenata
• Tagovi se obično javljaju u parovima: otvarajući i
zatvarajući tag
– Otvarajući tag: <p>
– Zatvarajući tag: </p>
• Prazni elementi su predstavljeni neuparenim
tagovima, npr. <img>
• Elementi mogu imati i atribute koji se definišu u
otvarajućem tagu
Struktura HTML dokumenta
• HTML dokument počinje deklaracijom tipa
dokumenta (doctype)
– Potrebna iz istorijskih razloga
– Kada je prisutna čitač nastoji da prati relevantnu
specifikaciju jezika
<!DOCTYPE html>
Struktura HTML dokumenta
• HTML dokument ima strukturu stabla
• Korijen stabla je html element
– <html>...</html>
• Na sljedećem nivou nalaze se elementi head i
body
– <head>...</head> sadrži informacije o dokumentu
– <body>...</body> sadrži vidljivi sadržaj stranice
Primjer HTML dokumenta
<!DOCTYPE html>
<html>
<head>
<title>Naslov stranice</title>
</head>
<body>
<h1>Moj prvi podnaslov.</h1>
<p>Moj prvi paragraf.</p>
</body>
</html>
Značenje tagova
• Tekst između <title> i </title> je naslov
dokumenta
• Tekst između <h1> i </h1> je podnaslov
• Podnaslovi na različitim nivoima se označavaju
sa <h1> do <h6>
• Tekst između <p> i </p> je paragraf
HTML atributi
•
•
•
•
HTML elementi mogu imati atribute
Atributi sadrže dodatne informacije o elementu
Atributi se uvijek zadaju u otvarajućem tagu
Atributi se sastoje iz parova ime/vrijednost:
ime=“vrijednost”
• Npr. jezik dokumenta se definiše sa:
– <html lang=‘sr’>
– Važno za pretraživače i čitače ekrana
– Kodovi jezika definisani u ISO 639-1
Prazan element
• Prazni elementi nemaju sadržaj
• Predstavljaju se neuparenim tagovima
• Primjer: definisanje skupa znakova
– <meta charset=“utf-8”>
Linkovi
• HTML linkovi su hiperlinkovi
• Hiperlink je element, tekst ili slika na koju se može kliknuti
(u nedostatku boljeg termina) i preći na drugi dokument
• Linkovi se definišu pomoću taga <a>
–
–
–
–
<a href=“adresa”>tekst linka</a>
Atribut href sadrži adresu odredišta
Tekst linka je vidljivi dio linka
Vidljivi dio linka ne mora da bude tekst, može biti slika ili bilo
koji drugi HTML element
• Primjer:
– <a href=“http://www.etfbl.net”>Elektrotehnički fakultet</a>
Slike
• HTML omogućava da se u stranicu uključi slika
• Slika se uključuje pomoću taga <img>
–
–
–
–
<img src=“adresa” alt=“neki tekst”>
Prazan HTML element, sadrži samo atribute
src atribut je adresa slike
alt atribut je tekst koji se ispisuje ako se slika ne može prikazati (npr.
ako se koristi audio čitač)
• Primjer:
– <img src=“lena.jpg” alt=“Slika djevojke” width=“256” height=“256”>
– Atributima width i height definisana je veličina slike
– Dobra je praksa da se koriste kako bi se omogućilo čitaču da rezerviše
prostor za sliku prije nego što se slika učita (izbjegava se treperenje
ekrana)
Audio
• HTML5 posjeduje standardno rješenje za
reprodukciju audio fajlova
• Prije HTML5 nije postojalo standardno rješenje za
reprodukciju audio fajlova na web stranicama
– Morao se koristiti plug-in (npr. Flash)
• Za reprodukciju audio fajla koristi se <audio> tag
• Podržani tipovi audio fajlova:
– WAV – audio/wav
– MP3 – audio/mpeg
– Ogg – audio/ogg
Audio primjer
<audio src=“acoustic.wav” controls>
Čitač ne podržava audio element.
</audio>
• controls atribut dodaje kontrole: play, pause, volume
• src ukazuje na audio fajl
• Tekst između <audio> i </audio> tagova će se ispisati
ako čitač ne podržava <audio> element
• Moguće je koristiti <source> tagove
– Čitač će iskoristiti prvi prepoznati format
Video
• HTML5 posjeduje standardno rješenje za
reprodukciju video fajlova
• Prije HTML5 nije postojalo standardno rješenje za
reprodukciju video fajlova na web stranicama
– Morao se koristiti plug-in (npr. Flash)
• Za reprodukciju video fajla koristi se <video> tag
• Podržani tipovi video fajlova:
– MP4 – video/mp4
– WebM – video/webm
– Ogg – video/ogg
Video primjer
<video src=“mobile.mp4” controls>
Čitač ne podržava video element.
</video>
• controls atribut dodaje kontrole: play, pause
• src ukazuje na video fajl
• Tekst između <video> i </video> tagova će se ispisati
ako čitač ne podržava <video> element
• Moguće je koristiti <source> tagove
– Čitač će iskoristiti prvi prepoznati format
Grafika
Canvas element
• Kontejner za grafiku u HTML5 standardu je <canvas>
element
• HTML canvas je pravougaoni region na HTML stranici
• Canvas posjeduje metode za crtanje linija,
pravougaonika, kružnica, ispisivanje teksta i
prikazivanje slika
• Primjer:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
Crtanje
Canvas element
• Za crtanje je potrebno koristiti Javascript
• Primjer, crtanje linije:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Grafika
Scalable Vector Graphics
• Scalable Vector Graphics (SVG) se koristi za
definisanje vektorske grafike na webu
• Kontejner za SVG grafiku je <svg> element
• SVG ima metode za crtanje linija,
pravougaonika, kružnica, ispis teksta i
prikazivanje slika
Primjer
SVG crtanje
<svg width="400" height="100">
<rect width="400" height="100" fill="#0000FF"
stroke-width="10" stroke="#000000" />
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="100" y="86">SVG</text>
</svg>
Razlike između SVG i canvas grafike
• SVG je jezik za opis 2D grafike
• Canvas se koristi za crtanje grafike u hodu (pomoću
Javascripta)
• Svaki oblik nacrtan pomoću SVG se čuva kao objekat i
moguće ga je promijeniti i ponovo renderovati
• Objekti u canvas grafici se ne mogu mijenjati u hodu,
moguće je samo ponovo iscrtati čitavu scenu
• SVG je pogodan za renderovanje većih područja (npr.
Google Maps)
• SVG se može sporo renderovati
• Canvas grafika je pogodna za grafički intenzivne igre
Stilovi na webu
Cascading Style Sheets – CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>Ovo je podnaslov</h1>
<p>Ovo je paragraf.</p>
</body>
</html>
CSS
• Stilovi se HTML elementu mogu pridružiti na tri načina:
– Inline – korištenjem style atributa HTML elementa
• Pogodno za pridruživanje stila jednom HTML elementu
– Interni – korištenjem <style> elementa u HTML <head>
sekciji
• Pogodno za pridruživanje stilova elementima jedne HTML strane
– Eksterni – korištenjem jednog ili više eksternih CSS fajlova
• Pogodno za pridruživanje stilova elementima na više strana
• Sintaksa:
– element { osobina: vrijednost; osobina: vrijednost}
• element je ime HTML elementa
• osobina je CSS osobina
• vrijednost je CSS vrijednost
Stilovi fontova
• CSS osobina color definiše boju teksta HTML elementa
• CSS osobina background-color definiše bolju pozadine
HTML elementa
– Boje se zadaju u RGB kolor- modelu: decimalnim ili
heksadecimalnim vrijednostima, te simboličkim imenima
• CSS osobina font-family definiše font za HTML element
• CSS osobina font-size definiše veličinu fonta HTML
elementa
• CSS osobina font-style definiše oblik fonta: normal,
italic ili oblique
• itd.
Okvir elementa
• Svaki vidljivi HTML element
ima okvir (iako on često nije
vidljiv)
• CSS osobina border definiše
okvir HTML elementa
• CSS osobina padding
definiše razmak između
okvira i sadržaja unutar
okvira
• CSS osobina margin definiše
prostor izvan okvira –
razmak do susjednog
elementa
CSS za pojedine elemente
• Do sada opisani stilovi se primjenjuju na sve
elemente istog tipa
• Da bi se definisao poseban stil za određeni
element koristi se id atribut elementa
– <p id=“p01”>Drugačiji paragraf</p>
• ... i definiše se poseban stil
– p#p01 { color: blue; }
• Element sa određenim id atributom mora biti
jedinstven
CSS za pojedine klase elemenata
• Da bi se definisao stil za određenu klasu
elemenata koristi se atribut class
– <p class=“c01”>Paragraf posebne klase.</p>
• ... za koju se definiše stil
– p.c01 { color: magenta; }
• Može postojati više elemenata sa istim class
atributom