Embed Size (px)
Citation preview
Veb programiranje– MathML, SVG, Canvas, SMIL –
dr Jelena Graovac
Matematicki fakultetUniverzitet u Beogradu
MathMLSVG
CanvasSMIL
Pregled
1 MathML
2 SVG
3 Canvas
4 SMIL
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
MathML
Problem predstavljanja matematickih sadrzaja na Veb umasinski citljivom obliku postaje izuzetno znacajan.
Jezik HTML ne nudi velike mogucnosti za predstavljanjematematickog sadrzaja.
U HTML-u su podrzani:
predstavljanje eksponenta — sub i suppredstavljanje izraza sa osnovnim racunskim operacijama —(x + y) ∗ zkoriscenje simbola drevnih alfabeta kroz Unicode skupkaraktera
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
MathML
Moguce resenje je da se matematicki izrazi predstave uslikama i da se kao slike ukljuce u HTML dokumente.
Slike se obicno kreiraju specijalizovanim alatima, najcesceverzijama LATEX-a.
Neki od problema:
azuriranje ovakvih dokumenata je komplikovano,nije moguce indeksirati i pretrazivati formule na osnovunjihovog sadrzaja,slike su relativno veliki objekti i zauzimaju mrezne resurseprilikom preuzimanja.
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
MathML
W3C konzorcijum predlaze standardni format za predstavljanjei razmenu matematickog sadrzaja.
Izme�u ostalog, ovaj standard je prilago�en za objavljivanje naVebu.
Format je zasnovan na XML-u i nazvan je MathematicalMarkup Language (MathML).
Tekuca verzija standarda je MathML 3.0.
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
MathML
Osnovni ciljevi prilikom koncipiranja MathML jezika su:
Omogucavanje zapisa matematickih sadrzaja za potrebeucenja matematike, naucne komunikacije na svim nivoima, itd.Omogucavanje kodiranja kako sintakse, tj. vizuelneprezentacije matematickog sadrzaja tako i semantike tj.znacenja sadrzaja.Omogucavanje (dvosmernog) konvertovanja izme�u MathML-ai ostalih matematickih formata, kako na nivou sintaksematematickih izraza, tako i na nivou njihove semantike.
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
MathML
MathML moze da se prikaze:
u uobicajenom grafickom obliku,u obliku tekstualnog prikaza (ASCII) pogodnog za prikaz naterminalima,u stampanom obliku, ukljucujuci i Brajevu azbuku.
MathML moze da se kombinuje sa XHTML-om. PregledaciVeba omogucavaju kvalitetan prikaz matematickog sadrzaja uokviru Veb stranica.
MathML sadrzaj umetnut u Veb stranice moze da interagujesa korisnikom (npr. da reaguje na akcije misem).
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
MathML
MathML — fleksibilan, prosiriv, moguca je interakcija samnostvom matematickog softvera i ima mogucnostproizvodnje visokokvalitetnog predstavljanja na razlicitimmedijima.
U idealnom slucaju, MathML bi trebalo da postane osnovniformat za predstavljanje celokupnog matematickog sadrzaja itrebalo bi da bude nezaobilazan deo svakog matematickogsoftverskog alata.
Na zalost, moze se reci da MathML nije uspeo da se dovoljnosnazno pozicionira i ispuni sve predvi�ene ciljeve.
Sto se tice podrske u okviru Veb pregledaca, pregledaciFirefox, Opera i Safari su u mogucnosti da prikazu MathML,dok Microsoft Internet Explorer tu mogucnost dobija nakoninstalacije odre�enih dodataka (npr. MathPlayer).
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
MathML
Postoje dva razlicita oblika MathML-a:
Presentation MathML — sluzi iskljucivo za predstavljanjesintakse (vizuelne prezentacije) matematickih izraza,Content MathML — sluzi za predstavljanje semantike(znacenja izraza).
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Presentation MathML — primer
Na primer, izraz (a + b)2 u Presentation MathML-u moze bitiopisan na sledeci nacin:
mi — za predstavljanje identifikatora
mo — za predstavljanje operacija
mn — za predstavljanje brojeva
msup — opisuje eksponent
mrow — sluzi za grupisanje drugihelemenata
mfenced — za predstavljanje zagrada
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Content MathML — primer
Izraz (a + b)2 u Content MathML-u moze biti opisan nasledeci nacin:
ci — sluzi za predstavljanjeidentifikatora
cn — za predstavljanje brojeva
apply — sluzi da oznaci primenuodre�ene matematicke operacije
plus i power — oznacavaju redomsabiranje i stepenovanje
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Presentation MathML — primer
x =−b ±
√b2 − 4ac
2a
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Content MathML — primer
x =−b ±
√b2 − 4ac
2a
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Presentation MathML i HTML5 — primer
U HTML5 postoji mogucnost direktnog koriscenja MathMLelemenata unutar dokumenta pomocu math elementa.
{ax + by = e
cx + dy = f
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Presentation MathML i HTML5 — primer
(a bc d
)(xy
)=
(ef
)
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Presentation i Content MathML — primer
∫ t
1
dx
x
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Presentation i Content MathML — primer
A =
[x yz w
]
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
MathML — primeri
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
MathML
Korisni linkovi:
https://www.w3.org/Math/
https://www.w3.org/TR/2014/REC-MathML3-20140410/chapter2.html
http://www.zvon.org/xxl/MathML/Output/index.html
http://www.tutorialspoint.com/html5/html5_mathml.htm
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Pregled
1 MathML
2 SVG
3 Canvas
4 SMIL
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG
SVG je skracenica od Scalable Vector Graphics
Koristi se za definisanje grafike na Vebu
SVG je W3C preporuka
Jezik zasnovan na XML-u
Od HTML5 podrzan je element svg za direktno ukljucivanjesvg-a u veb-stranu.
Pregledaci Veba koji podrzavaju svg element:
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis pravougaonika
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis pravougaonika
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis pravougaonika
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis kruga
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis elipse
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis linije
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis poligona
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis poligona
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis izlomljene linije
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis teksta
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG — opis teksta
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SVG
Prikazani primeri preuzeti su sa sajta:http://www.w3schools.com/svg/default.asp
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Pregled
1 MathML
2 SVG
3 Canvas
4 SMIL
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Canvas
HTML element canvas se koristi za crtanje grafike naveb-stranici.
Razlika izme�u SVG i Canvas-a je u tome sto Canvas crta 2Dgrafike koriscenjem JavaScript jezika a SVG je jezik zaopisivanje 2D grafika u XML-u.
Pregledaci Veba koji podrzavaju canvas element:
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Canvas — crtanje pravougaonika
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Canvas — crtanje pravougaonika
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Canvas — crtanje linije
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Canvas — crtanje kruga
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Canvas — crtanje slike
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Canvas
Prikazani primeri preuzeti su sa sajta:http://www.w3schools.com/html/html5_canvas.asp
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Pregled
1 MathML
2 SVG
3 Canvas
4 SMIL
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SMIL
Synchronized Multimedia Integration Language (SMIL)(izgovara se ,,smajl“) je standard predvi�en za opisaudiovizuelnih prezentacija i animacija
U ove svrhe, u danasnje vreme se prevashodno koristekomercijalni formati i alati (pre svega Adobe Flash)
Za razliku od ovoga, SMIL je otvoren, standardizovan formatkoji je W3C preporuka.
Poslednja verzija SMIL-a je 3.0
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SMIL — osobine
Neke od osobina SMIL-a:
Moze se koristiti za kreiranje prezentacija sa slajdovima(Internet odgovor na Power Point).Prezentacije mogu da kombinuju razlicite tipovemultimedijalnog sadrzaja (tekst, video, audio, itd.)Moguce je istovremeno prikazivanje razlicitih multimedijalnihdatoteka koje dolaze sa razlicitih Veb serveraPrezentacije mogu da sadrze veze sa drugim SMILprezentacijama.Prezentacije mogu da sadrze kontrolnu dugmad (stop, start,next, ...)Moguce je definisanje redosleda prikazivanja elemenataprezentacije kao i duzine trajanja njihovog prikazivanja.Moguce je definisanje pozicije na kojoj ce se prikazivatiodgovarajuci elementi prezentacije.
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SMIL
Microsoft Internet Explorer (od verzije 5.5 na dalje) imamogucnost direktnog prikazivanja SMIL prezentacija, dokdrugi pregledaci zahtevaju instalaciju dodatnih alataSMIL je XML format i datoteke koje sadrze SMIL prezentacijebi trebalo da su tipa:<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 3.0 Language//EN"
"http://www.w3.org/2008/SMIL30/SMIL30Language.dtd">
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SMIL – primer
U sledecem primeru opisuje se prezentacija koja beskonacnosmenjuje dve slike, pri cemu svaku sliku prikazuje tacno trisekunde.<?xml version="1.1" encoding="UTF-8"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 3.0 Language//EN"
"http://www.w3.org/2008/SMIL30/SMIL30Language.dtd">
<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0"
baseProfile="Language">
<body>
<seq repeatCount="indefinite">
<img src="image1.jpg" dur="3s" />
<img src="image2.jpg" dur="3s" />
</seq>
</body>
</smil>
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SMIL
SMIL prezentacije je moguce umetati direktno u XHTMLdokumenteDa bi se SMIL elementi mogli koristiti u okviru HTML strane,potrebno je dodati ,,time“ prostor imena (namespace). Da bise SMIL atributi mogli koristiti, potrebno je definisati ,,time“klasu. Primer:<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
<?import namespace="time" implementation="#default#time2">
<style>.time {behavior: url(#default#time2)}</style>
</head>
<body>
<time:seq repeatCount="indefinite">
<img class="time" src="image1.jpg" dur="3s" />
<img class="time" src="image2.jpg" dur="3s" />
</time:seq>
</body>
</html>
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SMIL i SVG
Predvi�eno je, tako�e, da se SMIL koristi sa SVG u ciljuizrade animacija.
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
SMIL
Tutorijal:http://www.w3ctutorial.com/multimedia/learn-smil
dr Jelena Graovac Veb programiranje
MathMLSVG
CanvasSMIL
Literatura
Zasnovano na:Filip Maric: Uvod u Veb i Internet tehnologije, 2013.(www.matf.bg.ac.rs/~filip/uvit/uvit.pdf)
dr Jelena Graovac Veb programiranje
