HTML5 PDF

Mark Pilgrim
HTML 5
AZ J SZABVNY
Ugorjunk fejest a webfejleszts jvjbe!
A kiadvny a kvetkez angol eredeti alapjn kszlt:

Dive Into
HTMLS
Copyright 2011 by Mark Pilgrim. Some rights reserved!

Kiskapu Kft. 2011
A kiads a Creative Commons engedlyvel kszlt a CC-BY-3.0vltozat alapjn.
Fordts s magyar vltozat 2011 Kiskapu Kft. Kapcsold jogok fenntartva!

A kiad a lehet legnagyobb krltekintssel jrt el e kiadvny elksztsekor. A kiad
nem vllal semminem felelssget vagy garancit a knyv tartalmval, teljessgvel
kapcsolatban. A kiad nem vonhat felelssgre brmilyen baleset vagy kresemny
miatt, mely kzvetve vagy kzvetlenl kapcsolatba hozhat e kiadvnnyal.
Fordts s lektorls: Rzmves Lszl
Mszaki szerkeszt: Tth Klra
Trdels: Tth Klra
Felels kiad a Kiskapu Kft. gyvezet igazgatja
2011 Kiskapu Kft.
1134 Budapest, Csng u. 8.;

Fax: (+36-l) 303-1619;
http://www.kiskapukiado.hu/;
e-mail: kiado@kiskapu.hu
ISBN: 978 963 9637 77 l
Nyomdai elllts: Radin Group

Felels vezet: Antun Basic
Kereskedelmi kpviselet: Kvadrt '97 Kft.
Tel./Fax: +361 319 1599. Mobil: +36 302806656 E-mail:kvadrat97@gmail.com
Tartalom
Elsz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1. fejezet- Hogyan jutottunk el idig?
. . . . . . .
13
MIME-tpusok. . . . . . . .
Ugorjunk fejest!
13
Hossz kitr a szabvnyok szletsrl

Treden fejlds .
. . . . . .
. .
14
. 23
A HTML fejldsnek trtnete 1997 s 2004 kztt .
. 25
Minden, amit az XHTML-rl tudunk, tves
. 26
Egy versenykpes ltoms.
. 28
Milyen munkacsoport?.
. 30
Vissza a W 3C-hez. .
. 32
Utsz . . . . .
. 33
Tovbbi olvasmnyok
. 34
2. fejezet- A HTML5-kpessgek szlelse
. . . . .
. 35
szlelsi mdszerek . . . . . . . .
. 35
Modernizr: egy HTML5-szlel knyvtr
. 36
A rajzvszon . .
. 37
Rajzvszonra rt szveg.
. 38
Ugorjunk fejest!
Vide
. . .
. . . . . . .
. 40
Videoformtumok
. 41
Krdezzk meg Lerkd professzort!
. 44
Helyi trols. . . . . . . . . .
. 44
Webmunksok . . .
. 45
. .
. .
Kapcsolat nlkli webalkalmazsok.
. 46
Helymeghatrozs
. 48
Bevitelielem-tpusok. .
Helyrz szveg . .
. 49
. .
51
Automatikus rlapfkusz .
. 52
Mikroadatok. . .
. 53
Tovbbi olvasmnyok . .
. 54
3. fejezet- Mit jelent mindez?
. .
. 57
A dokumentumtpus.
. 57
A gykrelem
. 60
Ugorjunk fejest!
.
A <head> elem .
. 61
Karakterkdols .
. 62
Viszonyler elemek .
. 64
Egyb viszonyler elemek a HTML5-ben
. 67
j jelentstkrz elemek a HTML5-ben
. 71
Hossz kitr arrl, hogy miknt kezelik a bngszk

az ismereden elemeket.
Cmsorok .
. . . .
Cikkek . . . .
. 73
. 77
. 80
Dtumok s idpontok.
. 83
Navigci .
. . .
. 85
Lblcek .
. . . .
. 87
Tovbbi olvasmnyok
. 90
4. fejezet- A rajzvszon rdge (ne fessk a falra!)
Ugorjunk fejest!
. . .
Egyszer alakzatok .
. 93
. 94
Rajzvszon-koordintk
. 96
tvonalak. .
. 98
Szveg .
101
Szntmenetek
105
Kpek .
109
Mi a helyzet az Internet Explorerrel?
113
Egy teljes plda. . .
115
Tovbbi olvasmnyok
120
5. fejezet- Vide a Weben
Ugorjunk fejest!
121
Videorrolk.
122
Videokodekek
123
H.264
125
Theora . . .
126
VP8 .
126
Audiokodekek
127
MPEG-1 Audio Layer 3
129
Advanced Audio Coding .
130
Yorbis .
130
. . .
Ami a Weben mkdik
A H.264-videk felhasznlsi engedlyvel kapcsolatos krdsek.
131
134
Ogg-videk kdolsa a Firefogg segtsgveL
136
Ogg-videk ktegelt kdolsa az ffmpeg2theora segtsgvel
143
145
H.264-videk ktegelt kdolsa a HandBrake segtsgvel .
.153
WebM-videk kdolsa az ffmpeg segtsgve!.
154
s vgl, a lerkd! .
157
H.264-videk kdolsa a HandBrake segtsgvel
A MIME-tpusok belekpnek a levesbe
161
163
Egy teljes plda .
!64
Tovbbi olvasmnyok .
165
. .
6. fejezet- Itt ll n (s mindenki ms)
167
A Geolocation API
167
Mutasd a kdot!
168
A hibk kezelse
171
Ugorjunk fejest!
Vlasztst! Szabad vlasztst!
172
175
A felment sereg: geo.js.
176
Egy teljes plda .
178
Tovbbi olvasmnyok
179
7. fejezet- A helyi trols mltja, jelene s jvje a webalkalmazsokban
Ugorjunk fejest!
. .
. .
181
A helyi trolsra a HTML5 eltt alkalmazott

trkkk rvid trtnete .
182
Bemutatkozik a HTML5-trol
. .
A HTML5-trol hasznlata
183
185
A HTML5-trolterlet vltozsainak nyomon kvetse.
186
A jelenleg hasznlt bngszk korltai .
188
A HTML-trol mkds kzben
. .
188
A kulcs-rtk prokon tl: verseng elkpzelsek
191
Tovbbi olvasmnyok .
193
. .
8. fejezet- Bontsuk a kapcsolatot!

.
195
A gyorstrjegyzk.
Ugorjunk fejest!
196
Hlzati szakaszok
198
Tartalk szakaszok
199
Az esemnyfolyam
201
A hibakeress mvszete, avagy "lj meg! lj meg itt s most!"

ptsnk egyet!. . .
206
Tovbbi olvasmnyok . .
207
. .
203
9. fejezet- rltrlapok
Ugorjunk fejest!
. . . .
Helyrz szveg
. .
209
. . .
209
Automatikus fkuszls mezk
211
E-mail cmek
213
Webcmek. . . .
.215
Szmok lptetmezkben .
217
Szmok csszkkon
220
Dtumvlasztk
221
Keresmezk
Sznvlasztk
224
226
s mg egy dolog...
226
Tovbbi olvasmnyok
228
1 O. fejezet- .,Elosztott", .,bvthetsg" s ms divatos szavak

Ugorjunk fejest!
Mik azok a mikroadatok? .
229
230
A mikroadarok adatmodellje.
232
Szemlyek felcmkzse.
236
Bemutatkozik a Google Rich Snippets .
243
Szervezetek felcmkzse .
246
Esemnyek felcmkzse . .
251
A Google Rich Snippets visszatr .
257
Kritikk felcmkzse
259
Tovbbi olvasmnyok
263
Fggelk
A "mindent egyben tartalmaz
s majdnem bcsorrendbe rendezett" tmutat,
amelyet kvetve brmit szlelhetnk
Az elemek listja .
Index
265
265
Tovbbi olvasmnyok
271
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . ..
273
Elsz
Mi a HTMLS? A HTMLS a HTML kvetkez nemzedke, amely a HTML 4.01,

az XHTML
1.0 s az XHTML 1.1 felvltsra hivatott. A HTMLS olyan j
szolgltatsokat knl, amelyek elengedhetetlenek a modern webalkalma

zsokban, ezen kvl szabvnyoss teszi a webes fellet szmos olyan lehet
sgt, amelyeket a webfejlesztk mr vek ta hasznlnak, de a szabvnygyi
bizottsgok eddig mg nem foglaltak rsba. (Meglepdnnk, ha megtudnnk
pldul, hogy a Window objektumot mg soha nem rtk le hivatalosan?
A HTMLS tesz elszr ksrletet arra, hogy formlis lerst adjon sok-sok "de
facto" szabvnyrl, amelyeket a webbngszk mr j ideje tmogatnak.)
Eldeihez hasonlan a HTML5-t is gy terveztk, hogy rendszerfggeden
legyen. Ahhoz, hogy kihasznlhassuk a HTMLS elnyeit, nem kvetelmny,
hogy Windows, Mac OS X, Linux, Multics vagy brmilyen ms konkrt
opercis rendszert futassunk, csupn egy modern webbngszre van szk
sgnk (de arra felttlenl). Modern webbngszk ingyenesen elrhetk
minden fontosabb opercis rendszerhez. Az Apple Safari, a Google Chrome,
a Mozilla Firefox vagy az Opera legjabb vltozatai kivtel nlkl tmogatjk
a HTMLS szmos szolgltatst. (A knyvben a bngszk megfelelsgrl
rszletesebb tblzatokkal is tallkozni fogunk.) Az iPhone, iPad s Android
mobilkszlkekre elre teleptett mobil webbngszk mind kitn tmo
gatst nyjtanak a HTMLS-hz. Mg a Microsoft is bejelentette, hogy az
Internet Explorer kzelg 9-es vltozata is ismerni fogja a HTMLS szmos
elemr.
Ebben a knyvben nyolc tmakrrel foglalkozunk:
j nyelvi elemek, pldul a <header>, a <footer> vagy a <section>
(3.
fejezet)
A rajzvszon-az a ktdimenzis rajzfellet, amelyet JavaScript segtsg

vel programozhatunk
(4. fejezet)
Elsz
A weboldalakba kls bvtmnyek segtsge nlkl begyazhat videk

(5. fejezet)
Helymeghatrozs- hogyan oszthatjk meg a weboldalak ltogati a tartz

kodsi helyket a webalkalmazsokkal (6. fejezet)
Tarts helyi trols kls bvtmnyek segtsge nlkl (7. fejezet)

Kapcsolat nlkli webalkalmazsok, amelyek a hlzati kapcsolat meg
szakadsa utn is kpesek mkdni (8. fejezet)
A HTML tovbbfejlesztett webes rlapjai (9. fejezet)

Mikroadatok, amelyek lehetv teszik, hogy a HTML5-be beptett sz
trakon tl sajt sztrakat hozzunk ltre, s egyni rtkekkel lssuk el
a weboldalainkat (10. fejezet)
A HTML5-t gy terveztk, hogy amennyire lehetsges, visszamenlegesen

kpes legyen egyttmkdni a meglev webbngszkkeL Az j szolgltatsok
a mr meglevkre plnek, s megengedik, hogy helyettest tartalmat bizto
stsunk a rgebbi bngszknek Ha pedig mg jobban kzben szeretnnk
tartani a weboldalaink mkdst, nhny sornyi JavaScript-kddal kidert
hetjk, hogy egy adott bngsz tmogatja-e a HTML5 szksges szolgltat
sait (2. fejezet). Ne a trkeny "bngszszimatol" kdokra tmaszkodjunk
annak meghatrozsban, hogy mely bngszk tmogatjk a HTML5-t:
a vizsglatot vgezzk el magnak a HTML5-nek a segtsgve!!
A knyvben hasznlt jellsek

A knyv tipogrfiai jellsei a kvetkezk:
Dlt bet
Az j fogalmakat, az URL-eket, az elektronikus levlcmeket, a fjl
neveket s a fjlkiterjesztseket dlt betvel rtuk.
lland szlessg bet (rgpbet)
Ezt a betstlust hasznltuk a programkdokhoz, valamint amikor a trzsszvegen bell olyan programelemekre hivatkoztunk, mint
a vltoz- s fggvnynevek, az adatbzisok, az adattpusok, a kr
nyezeti vltozk, az utastsok s a kulcsszavak.
10
Elsz
Flkvr, lland szlessg bet

Ez a stlus azokat a parancsokat s ms elemeket jelli, amelyeket
pontosan a megadott mdon kell berni.
Dlt, lland szlessg bet
Azokat az elemeket szedtk gy, amelyeknek a helyre a megfelel

- a felhasznl ltal megadott vagy a krnyezet ltal meghatrozott
rtkeknek kell kerlnik
Ez az ikon jelzi a tippeket, javaslatokat vagy ltalnos megjegyzseket.
Ha egy webcm vagy egy programutasts nem frt el egy sorban, gy je

lltk, hogy folytatlagosan rand:
return ! ! (v. canPlayType
&&
v. canPlayType (' video/ogg; codecs= "theora '" )
replace (/no/, ' ' ) ) ;
Megjegyzs a knyv klnbz vltozatairl

A knyv eredeti kiadsnak nyomtatott vltozatt a szerz ltal karbantartott
HTML5-forrsbl ksztettk, amelyet a http://diveintohtml5.orgl cmen
rhetnk el. Ha a nyomtatott vltozatot olvassuk, s kvncsiak vagyunk
a tbbi hivatkozsra is, tekintsk meg az eredeti forrst. Mivel a szerz
a http://diveintohtml5.org/ oldalt HTML5 nyelven tartja fenn, a knyvben
szerepl pldakdok az oldalon mkd vltozatban tallhatk - sokat k
zlk nmileg mdostani kellett a kzzttelhez. Ha ltni szecetnnk ezeket
a pldkat, ltogassunk el a http://diveintohtml5.orgl cmre, de vegyk figye
lembe, hogy az egyes bngszkben nem biztos, hogy egyfon;nn mkdnek.
1.
fejezet
Hogyan jutottunk el idig?
Ugorjunk fejest!
Nemrg rbukkantam a Mozilla egyik fejlesztjnek rsra, aki a szabvnyok
megalkotsnak eredend nehzsgrl rtekezett (http:!llists. w3. orgiArchvesi
Public/public-html/201 Ojan/Ol 01 html}:

A megvalsrsok s a szabvnylersok bonyolult tncot lejtenek egy
ms krL Nem akarjuk, hogy a megvalsrsok elkszljenek, mieltt
a szabvnyt vglegestenk, mert a felhasznJk ezeknek a megvalst
soknak a rszleteitl kezdenek majd fggni, s ez korltozn a szabvnyt.
Ugyanakkor azt sem akarjuk, hogy a szabvnylers ksz legyen, mieltt
megszletne nhny megvalsts, s a programozk kiprbltk volna
azokat, mert a szabvnyhoz szksg van visszajelzsre. Ez hatatlanul
feszltsghez vezet, amivel viszont meg kell tanulnunk egytt lni.
Tartsuk szben a fenti idzetet, mikzben elmeslem, hogyan is szletett meg
a HTML5.
MIME-tpusok
Ez a knyv a HTML5-rl szl, nem a HTML korbbi vltozatairl, s nem is
az XHTML brmelyik vltozatrl. Ahhoz azonban, hogy megrthessk
a HTML5 trtnett s megalkotsnak mozgatrugit, tisztban kell lennnk
nhny technikai rszlettel- egszen pontosan a MIME-tpusok mibenltvel.
Minden alkalommal, amikor a webbngsznk egy oldalt kr, a webki
szolgl elszr nhny fejlcet kld neki, mieltt tadn az oldal tnyleges
l. fejezet
Hogyan jutottunk el idig? l 13
jellnyelvi kdjt. Ezek a fejlcek alapesetben lthatk, br tbb webfejleszt

eszkz is ltezik, amelyekkel lthatatlann tehetjk ket, amennyiben erre
lenne szksgnk. A fejlcek lnyegesek, mert ezek ruljk el a bngsznek,
hogy miknt kell rtelmeznie az utnuk kvetkez oldaller kdot. A legfon
tosabb fejlc neve Content-Type, s gy nz ki:
Content-Type: text/html
A text/html az oldal "tartalomtpusa" (content type) vagy "MIME

tpusa". Ez a fejlc az egyeden dolog, ami meghatrozza, hogy valjban mi
lyen forrsanyagrl van sz, s ebbl kvetkezen hogyan kell megjelenteni.
A kpeknek sajt MIME-tpusuk van (a JPEG-kpek esetben ez az image/
jpeg,
a PNG-kpeknl az image/png, s gy tovbb), s a JavaScript-fjlok
is sajt MIME-tpussal rendelkeznek, akrcsak a CSS-stluslapok. Mindennek

megvan a maga MIME-tpusa- a W ebet a MIME-tpusok mkdtetik.
A valsg persze bonyolultabb ennl. A nagyon rgi webkiszolglk (s itt
most 1993-ra gondolok) nem kldtk el a Content-Type fejlcet, mert az
akkor mg nem is ltezett (csak 1994-ben talltk fel). Az egszen 1993-ig
visszanyl megfelelsg rdekben egyes npszer webbngszk bizonyos
krlmnyek kztt figyelmen kvl hagyjk a Content-Type fejlcet. (Ezt
hvjk "tartalomszimatolsnak ", angolul "content sniffing "-nek.) ltalnos
alapszablyknt azonban elfogadhatjuk, hogy minden, amivel csak tallko
zunk a Weben- HTML-oldalak, kpek, parancsfjlok, videk, PDF-ek vagy
brmi, aminek van URL-je - egy a Content-Type fejlcben megadott
konkrt MIME-tpus szerint jut el hozznk a kiszolgltl.
Ezt tzzk a kalapunkra, mert mg visszatrnk r.
Hossz kitr a szabvnyok szletsrl

Mirt ltezik az <img> elem? Nem hiszem, hogy ezt a krdst gyakran tesz
szk fel magunknak. Valaki bizonyra megalkotta- ilyesmik nem pattannak
el csak gy a semmibl. Ez minden elemre, minden jellemzre s minden
HTML-szolgltatsra rvnyes, amit valaha csak hasznltunk: valakik ltre
hoztk ket, eldntttk, hogyan mkdjenek, aztn lertk ezt az egszet.
Az alkotk nem istenek, csupn egyszer halandk, gy nem is hibtlanok.
Persze okos emberek, de csak emberek.
14
l Hogyan jutottunk el idig?
l. fejezet
A "nylt terepen" fejlesztett szabvnyokban az az egyik legjobb, hogy visz

szarnehetnk az idben, s megvlaszolhatjuk az ilyen krdseket. A vita
levelezlistkon zajlik, amelyeken az zeneteket ltalban archivljk, s nyil
vnosan kereshetv teszik. Ezrt aztn gy dntttem, hogy vgzek egy kis
"
"email-satst , hogy rbukkanjak az <img> elem eredetre. Olyan rgre
kellett visszamennem, amikor a World Wide Web Consortium (W3C) nev
szervezet mg nem is ltezett: a Web kezdeteihez, amikor a kt keznk ujjain
megszmolhattuk az sszes webkiszolglt (na j, taln nhny lbujjat is
ignybe kellett vennnk).
1993. februr 25-n Marc Andreessen ezt rta:*
Szeretnk javasolni egy j, nem ktelez HTML-cmkt:
IMG
Ktelez argumentuma: SRC= "ur 1 ".
Egy bitkpes vagy pixelkpes fjlt nevezne meg, amelyet a bngsz a
hlzaton keresztl megksrelhet letlteni s kpknt rtelmezni, majd
beszrni a szvegbe ott, ahol a cmke szerepel.
Plda:
<IMG SRC=
"file: l /foobar. com/foo/bar/blargh. xbm ">
(Zr cmke nincs; az IMG nll cmke lenne.)

Ezt a cmkt ugyangy be lehetne gyazni egy horgonyba, mint brmi
mst. Ilyenkor egy ikon vlna belle, amelyet ugyangy aktivini le
hetne, mint egy szokvnyos szveghorgonyt.
A bngszk rugalmasak lehetnek abban, hogy mely kpformtumokat
tmogatjk- az Xbm s az Xpm pldul j vlaszts. Ha egy bngsz
nem tudja rtelmezni az adott formtumot, tetszs szerint jrhat el. (Az
X Mosaic egy alaprtelmezett bitkpet jelent meg helyrzknt.)
Az X Mosaicban ez beptett kpessg. Nlunk mkdik, s legalbbis
bels hasznlatra ignybe fogjuk venni. Termszetesen nyitott vagyok
minden javasiatra, hogy mikm kezelhetnnk ezt a cmkt a HTML-ben.
Ha valakinek jobb tlete van, mint amit n az imnt bemutattam, krem,
hrtp:lll997.webhisrory. org/www.lisrsiwww-ralk.1993ql/0182.hrml. A kvetkez nhny olda

lon lert zenetvlrs a "Nexr message" (Kvetkez zener) s "Previous message" {Elz ze
net) hivatkozsokra kaninrva kverher.
1. fejezet
Hogyan jutottunk el idig? l
15
tudassa velem.Tudom, hogy a kpformtum szempontjbl kds meg

olds, de egyelre nem tudok jobbat annl, mint hogy egyszeren azt
mondjuk, hogy "csinlja a bngsz azt, amire kpes", s vrunk, hogy
megszlessen a tkletes megolds (egy nap taln a MIME).
Ez az idzet nmi magyarzatra szorul. Elszr is, az Xbm s az Xpm a Unix

rendszerek npszer grafikus formtumai voltak akkoriban, a Mosaic pedig
az egyik legrgebbi webbngsz. (Az X Mosaic ennek volt a Unix rendsze
reken fut vltozata.) Amikor Marc ezt az zenetet rta 1993 elejn, mg nem
alaptotta meg azt a vllalatot, a Mosaic Communications Corporationt,
amely hress tette, s mg nem kezdett el dolgozni a vllalat legfbb termkn,
a Mosaic Netscape-en. (A vllalat s a program ksbbi nevei taln ismer
sebbek: a Netscape Corporation-rl s a Netscape Navigatorrl van sz.)
Az " egy nap taln a MIME" a tartalomegyeztetsre utal: a HTTP-nek
arra a szolgltatsra, amelynek az a lnyege, hogy az gyfl (pldul egy
webbngsz) elrulja a kiszolglnak (pldul egy webkiszolglnak), hogy
milyen tpus "erforrsokat" tmogat (pldul az image/jpeg tpus k
peket), hogy a kiszolgl az gyfl ltal elnyben rszestett formtumban
adhasson vissza valamit. "Az eredeti HTTP, ahogy 1991-ben lenk " (1993
februrjban ez volt az egyetlen megvalstott vltozat) nem adott mdot az
gyflnek arra, hogy kzlje a kiszolglkkal, hogy milyen fajta kpeket t
mogat - ez okozott fejtrst Marcnak a tervezs sorn.
Nhny rval ksbb Tony Johnson vlaszolt:
Nekem van valamim a Midas 2.0-ban, ami nagyon hasonl (itt, az
SLAC-n mr hasznljuk, s elvileg heteken bell sor kerl a nyilvnos
kzzttelre is), csak az elnevezse ms, s van mg egy argumentuma,
a
NAME="nv".
Majdnem pontosan gy mkdik, mint a javasolt
IMG
cmke. Itt egy plda:

<ICON name= "NoEntry" href= "http: //note/foo/bar/NoEntry .xbm ">
name paramtert azrt talltuk ki, mert gy a bngsz rendelkezhet

egy "beptett" kpkszletteL Ha a megadott nv megegyezik egy "be
ptett" kpvel, a bngsz ezt a beptett kpet hasznlhatja, s nem
kell lekrnie a kpet. A nv ezen kvl a "szveges" bngszknek is segt,
hogy tudjk, milyen jelet kell helyrzknt betennik a kp helyre.
16
1.
fejezet
Nekem nem szmtanak klnsebben a paramter- vagy cmkenevek,

de sszer lenne ugyanazokat az elnevezseket hasznlni. A rvidtseket
nem szecetern- mirt ne lehetne pldul IMAGE= s SOURCE=? Az ICON-t
azrt rszestenm elnyben, mert utal arra, hogy az IMAGE-nek kicsinek
kell lennie - vagy mr tl sok dolgot akarunk rtukmlni az ICON-ra?
AMidas szintn a korai webbngszk egyike- az XMosaic kortrsa- volt.
Rendszerfggetlen bngszkm Unix s VMS rendszeren egyarnt futott.
Az SLAC" a Stanford Linear Accelerator Center-re utal (ma SLAC National
"
Accelerator Laboratory-nak hvjk), ahol az Egyeslt llamok els webki
szolgljt (Eurpn kvl a legels webkiszolglt) zemeltettk. Amikor
Tony a fenti zenetet rta, az SLAC mr rgi rootorosnak szmtott a WWW
terletn, mivel t oldalt mkdtetett a webkiszolgljn, mghozz pldt
lanul hossz ideig- 441 napig.
Tony gy folytatta:
H a mr j cmkkrl esik sz, van egy msik, nmileg hasonl cmkm,
amit tmogatni szecetnk aMidas 2.0-ban. Elvileg gy nz ki:
<INCLUDE HREF= "... ">
A clja az lenne, hogy egy msodik dokumentumot lehessen begyazni
az elsbe ott, ahol a cmke szerepel. A hivatkozott dokumentum elvileg
brmi lehet, de elssorban kpeket szecetnk begyazni (ez esetben tet
szleges mretben) szveges dokumentumokba. Amikor aztn megrke
zik a HTTP2, a begyazott dokumentum formrumt kln meg le
hetne vitatni.
A HTTP2" a Basic HTTP 1992-es vltozatra utal, amit ekkor - 1993
"
elejn- mg nagyrszt nem valstottak meg. A "HTTP2"-knt isrne.llt vz
latot aztn tovbbfejlesztettk, s vgl HTTP 1.0" nven vlt belle szab
"
vny. A HTTP 1.0-ba valban belefoglaltk a tattalomegyeztetsre szolgl
krelemfejlceket, vagyis eljtt "a MIME napja".
To ny ugyanakkor mg tovbb ment:
Egy msik megolds, amin tprengtem, ez volt:
<A HREF= ... " INCLUDE>See photo< /A>
l. fejezet
Nem igazn szeretnk tovbbi feladatokat rni az
<A>
cmkre, de gy
meg lehetne rizni az egyttmkdst az INCLUDE paramtert figyelembe

venni nem kpes bngszkkeL A cl az lenne, hogy az INCLUDE-ot rt
bngszk a horgonyszveget (ami itt a
See
photo
Lsd a kpet)
a begyazott dokumemumea (kpre) cserljk, mg a rgebbi vagy bu

tbb bngszk teljesen figyelmen kvl hagyjk az INCLUDE cmkt.
Ezt a javaslatot soha nem valstottk meg, br az az tlet, hogy a bngsz
szveget jelentsen meg a hinyz kpek helyn, igen fontosnak bizonyult az
akadlymemests szempomjbl, s ezt a megoldst Marc eredeti javaslata
az <IMG> cmkre nem tartalmazta. vekkel ksbb ebbl lett az <img
alt> jellemz, amelyet a Netscape rgtn el is szrt, mert tvesen sgsz
vegkm kezelte.
Nhny rval azt kveten, hogy Tony kzztette a levelt, T im Berners
Lee vlaszolt r:
n gy kpzeltem, hogy az brkat gy rnnk le:
<a name=figl href= "fghj kdfghj
REL="EMBED, PRESENT ''>bra </a>
A fenti viszonyrtkek jelentse pedig ez lenne:

EMBE D
Eztgyazd be ide, am ikor m egjelented
PRESENT
Jelentsct meg a forrsdokumentum megjelentsekor
szrevehet, hogy a fentieknek klnbz kombincii lehetnek, s ak

kor sincs gond, ha a bngsz nem tmogatja valamelyiket.
Beltom ugyanakkor, hogy a kivlaszthat ikonok megvalstsnak ez
a mdszere horgonyok begyazst jelenten-hmmm ... -de nem
akartam kln cmkt erre a clra.
Ezt a javaslatot sem valstottk meg, de a rel jellemz mg ma is ltezik
(lsd a "Viszonyler elemek" cm rszt a 3. fejezetben).
Jim Davis a kvetkezket f zte hozz a tmhoz:
Klassz lenne, ha lenne r valamilyen md, hogy megadjuk a tartalom
tpust. Pldul:
<IMGHREF="http://nsa.gov/pub /sounds/gorby.au"CONTENT-TYPE=audio/basic>
18 l Hogyan jutottunk el idig?
l. fejezet
Persze n teljesen jl elvagyok azzal a kvetelmnnyel, hogy a tartalom

tpust a fjlkiterjeszts hatrozza meg.
Ezt a javaslatot sem valstottk meg, de a Netscape ksbb beptette a tet
szleges mdiaobjektumok begyazsnak lehetsgt az <embed> elemmel.
Jay C. Webber ezt a krdst tette fel:
A kpek nlam az els helyen llnak a WWW-bngszkben tmoga
tand mdiatpusok kvnsglistjn, de nem gondolom, hogy kln
horgokat kellene megadnunk minden egyes kp begyazsakor. Hov
lett a MIME-tpusok irnt rzett lelkeseds?
Marc Andreessen ezt vlaszolta:
Ez nem helyettesten a jvbeli MIME-ot, mint szabvnyos doku
mentumler mdszert, csupn egyszer megvalsitst nyjtan egy
a MIME-tl fggetlenl szksges szolgltatsnak.
Jay C. Webber erre ezt rta vissza:
Akkor egy idre feledkezznk meg a MIME-rl, ha elfedi a lnyeget. n
azt kifogsoltam, hogy azon tprengnk, hogy " miknt tmogassuk a
kpek begyazst", ahelyett, hogy arrl beszlnnk, hogy " miknt t
mogathatnnk a klnfle hordozkba begyazott objektumokat".
Ha ebben az irnyban tapogatzunk, a jv hten valaki majd azzal ll
el, hogy vegynk fel egy
<AUD
SRC=">file://foobar.com/foo/bar/
blargh. snd "> alak j cmkt a hangfjlok szmra.
Szeriotem jobb lenne valamilyen ltalnosabb megoldst alkalmazni.

Visszatekintve gy tnik, hogy Jay teljesen jogosan aggdott. Valamivel to
vbb tartott egy htnl, de a HTMLS vgl csak bevezetett j <video> s
<audio> elemeket.
Jay eredeti zenetre vlaszolva Dave Raggett a kvetkezket rta:

Milyen igaz! n is sok-sok kp- s vonalrajztpust szeretnk hasznlni,
s lehetsget szeretnk a formtum egyeztetsre. Ezen fell Tim
l. fejezet
megjegyzse a kpeken belli kattinthat terletek tmogatsrl ugyan

csak fontos.
1993 folyamn ksbb Dave felvetette a HTML+, mint a HTML-szabvny
tovbbfejlesztse tlett. A javaslatt soha nem valstottk meg, vgl pedig
tllpett rajta a HTML 2.0. A HTML 2.0 "retrospektv szabvnynak " k
szlt, vagyis olyan szolgltatsokat szabvnyostott, amelyeket mr rgta
szles krben hasznltak. "Ez a szabvny azokat a lehetsgeket gyjti ssze,
tisztzza s rja le formlisan, amelyek nagyjbl megfelelnek a HTML 1994
jniusa eltt ltalnosan hasznlt szolgltsainak."
Dave ksbb a HTML+ rgi vzlata alapjn megrta a HTML 3.0-t, de
a W3C sajt referencia-megvalststl, azArentl eltekintve ezt sem val
stottk meg. A helybe a szintn "retrospektv szabvny" HTML 3.2 lpett:
"A HTML 3.2 szles krben hasznlt elemekkel- tblzatokkal, kisalkalma
zsokkal s kpek kr folyatott szveggel- bvti a nyelvet, mikzben teljes
kr visszamenleges egyttmkdst biztost a meglev HTML 2.0 szab

vnnyal."
Dave ksbb trsszerzknt kzremkdtt a HTML 4.0 elksztsben,
megalkotta a HTML Tidy-t, s segtett az XHTML, az XForms, a MathML
s ms jabb W3C-szabvnyok kidolgozsban.
De trjnk vissza 1993-hoz. Marc ezt felelte Dave-nek:
Tulajdonkppen lehet, hogy egy ltalnos cl, eljrskzpont grafikai
nyelvet kellene kidolgoznunk, amelyen bell lehetsg lenne tetszleges,
ikonokra, kpekre, szvegre vagy brmi msra mutat hiperhivatkozsok
begyazsra. Ismeri ms is az Intermedia ilyen irny kpessgeit?
Az Intermedia a Brown Egyetem hiperszveges programja volt, amelyet
1985-tl 1991-ig fejlesztettek, s azA/UX-en, a korai Macintosh-szmtgpek
Unix-szer opercis rendszern futott.
Az "ltalnos cl, eljrskzpont grafikai nyelv" tlete vgl teret is

nyert. A mai bngszk mind az SVG-t (deklaratv lerkd begyazott pa
rancsokkal), mind a <canvas>-t (eljrskzpont, kzvetlen md grafikai

API) tmogatjk, br az utbbi magnfejleszts bvtmnyknt kezdte a p
lyafutst, mieltt a WHAT munkacsoport "retrospektv szabvnyostssal"
hivataloss tette volna.
Bill Janssen az albbiakat vlaszolta:
l. fejezet
Vannak ms figyelemre mlt rendszerek is, amelyek rendelkeznek az

emltett ( meglehetsen hasznos) kpessgekkel: az Andrew s a Slate. Az
Andrew-t gynevezett "bett"-ek (inset-ek) ptik fel, amelyeknek k

lnbz rdekes tpusai vannak: szveg, bitkp, rajz, animci, zenet,
tblzat, s gy tovbb. Az Andrew-ban adott a tetszleges szim be

gyazs lehetsge, vagyis brmilyen bett begyazhat brmilyen ms
bettbe, amely tmogatja a begyazst. Egy bett pldul begyazhat
egy szvegvezrl szvegnek brmely pontjn, vagy egy rajzvezrl tet
szleges tglalap alak terletbe, vagy egy tblzat brmely celljba.
Az "Andrew " az Andrew User Interface System-re utal, br akkor mg csak
egyszeren Andrew Project-km ismertk.
Kzben Thomas Fine egy msik tlettel llt el:
Az n vlemnyem a kvetkez. A WWW-ben a kpek begyazsra
a legjobb megolds a MIME hasznlata. Biztos vagyok benne, hogy a
pastscript mr tmogatott altpus a MIME-ban, s a pastscript nagyon
gyesen kezeli a kpekkel kevert szvegeket.
Csak ppen nem kattimhat, ugye? Igen, gy igaz- de gyantom, hogy
erre mr van megolds a display postscriptben. De mg ha nincs is,
a szabvnyos pastscript knnyen bvthet vele. Csak meg kell hat
rozni egy horgonyparancsot, amely megadja az URL-t, s az aktulis
elrsi utat a gomb zrt terletekm hasznlja. Mivel a pastscript na
gyon jl kezeli az elrsi utakat, tetszleges gombalakot lehet ltrehozni
pofonegyszeren.
A Display Postscript egy kpernys megjelentsi technolgia volt, amelyet
kzsen fejlesztett ki az Adobe s a NeXT.
Ezt a javaslatot sem valstottk meg, de az tlet, miszerint a HTML hi
bit gy lehet a legjobban kijavtani, hogy valami teljesen msra cserljk, ma
is idrl idre felbukkan.
1993. mrcius 2-n Tim Berners-Lee az albbi megjegyzst fzte a tmhoz:

A HTTP2 brmilyen tpus adatot megenged egy dokumentum
ban, amelyrl a felhasznl azt lltja, hogy kpes kezelni, nem csak a
bejegyzett MIME-tpusokat. Teht ksrletezhetnk. Azt hiszem, lenne
1. fejezet
ltjogosultsga a hiperszveges postscriptnek, azt viszont nem tudom,

hogy a display postscript elg rvet tud-e felsorakoztatni mellette. Azt
tudom, hogy az Adobe fejleszti a sajt, postscript alap "PDF" -jt,
amelyben hivatkozsok is lesznek, s az Adobe sajt megjelentprog
ramjaival lehet majd olvasni.
Arra gondoltam, hogy ha a horgonyokhoz lenne egy ltalnos (HyTime
alap?) "rfektet" nyelv, akkor a hiperszveges s a grafika- vagy vicleoszab
vnyok egymstl fggetlenl fejldhetnnek, ami mindkettn segtene.
Legyen az IMG cmke INCLUDE, s mutasson tetszleges dokumentumt
pusra. Vagy legyen EMBED, ha az INCLUDE gy hangzana, mintha cpp
begyazsrl lenne sz, amitl az ember azt vrja, hogy SGML-forrs
kdot ad, amit helyben kell feldolgozni - mrpedig nem ez a cl.
A HyTime egy korai, SGML alap hiperszveges dokumentumrendszer volt,
s az rnyka kezdetben jcskn rverlt a HTML-lel s ksbb az XML-lel
kapcsolatos eszmecserkre.
Timnek az <INCLUDE> cmkre vonatkoz javaslatt soha nem valstot
tk meg, br az rksge tetten rhet az <object>, az <embed> s az
<iframe> elemben.
Vgll993. mrcius 12-n Marc Andreessen is visszatrt az zenetszlhoz:
Ismt a begyazott kpekrl: egyre kzelebb kerlk a Mosaic vO.lO
kiadshoz, amely - ahogy korbban emltettem - tmogaeni fogja a
begyazott GIF s XBM kpeket/bitkpeket. [...]
Jelenleg nem llunk kszen az INCLUDE!EMBED tmogatsra, [...] ezrt
valsznleg az <IMG SRC="url"> vltozatnl maradunk (nem az ICON
mellett dntttnk, mert nem minden begyazott kpre igaz, hogy ikon
lenne). A begyazott kpek egyelre nem kapnak kifejezetten tartalom
tpust, de ksbb ezt is tmogatni tervezzk (a MIME ltalnos megva
lstsval egytt). A kpolvas eljrsok, amelyeket jelenleg hasznlunk,
valjban mener kzben kpesek felismerni a kp formtumt, ezrt
a fjlnv-kiterjesztsnek nem is lesz jelentsge.
22
l.
fejezet
Tretlen fejlds
Engem minden szempontbl lenygz ez a 17 ves eszmecsere, amely vgl
egy olyan HTML-elem megalkotshoz vezetett, amelyet szinte minden va
laha ltrehozott weboldalon felhasznltak. Gondoljuk csak vgig:
A HTTP mg mindig ltezik. Sikeresen eljutott a 0.9-estl az 1.0-s, majd

ksbb az 1.1-es vltozatig, s mg mindig fejldik (http:llwww.ieif.org/
dynlwglcharterlhttpbis-charter. html}.
A HTML mg mindig ltezik. Ez a kezdetleges adatformrum (mg

a szvegbe gyazott kpeket sem tmogatta!) sikeresen elrte a 2.0, 3.2
s 4.0 vltozatszmoL A HTML fejldsnek vonala tretlen. Kanyar
gs, itt-ott csomkkal s vadhajtsokkal tarktott - evolcis fja jcs
kn tartalmaz "halott gakat", vagyis olyan helyeket, ahol a szabvnyok
megszllottjai nmagukat (s persze a programozkat) is megelztk -,
de akkor is tretlen, s ma, 2010-ben az 1990-bl szrmaz weboldalak
mg mindig megjelenthetk a mai bngszkben. pp az imnt tltr
tem be egyet simn a cscstechniks Android mobiltelefonom bng
szjbe, s mg olyan zenetet sem kaptam, hogy "krem, vrjon, amg
a bngsz feldolgozza a rgi formtumot ...".
A HTML mindig is npszer trsalgsi tma volt a bngszkszrk,

a szakknyvrk, a szabvnyokkal foglalkozk s ms emberek krben,
akik brmikor szvesen cserlnek eszmt a cscsos zrjelekrL A HTML
legsikeresebb vltozatai "retrospektv" szabvnyok voltak, amelyek egy
szerre igyekeztek lpst tartani a vilggal s a helyes irnyba terelni azt.
Azok, akik azt mondjk, hogy a HTML-nek "tisztnak" kellene maradnia
(felteheten a bngszgyrtk, a programozk vagy mindkt csoport
figyelmen kvl hagysval), egyszeren nincsenek tisztban a helyzetteL
A HTML soha nem volt tiszta, s minden ksrlet, amely a megtiszt
rsra irnyult, ltvnyosan elbukott, akrcsak a felvltsra tett pr
blkozsok.
Az 1993-ban hasznlt bngszk egyike sem ltezik semmilyen felismer

het formban. A Netscape Navigator fejlesztst 1998-ban abbahagy
tk, s az alapoktl jrartk a programot - ebbl lett a Mozilla Suite,
majd a projekt egyik elgazsbl megszletett a Firefox. Az Internet
Explorer szerny "kezdetei " a Microsoft Plus! for Windows 95-ig nylnak
1.
fejezet
Hogyan jutottunk el idig? J 23
vissza, ahol a programot mg asztaltmkkal s egy flipperjtkkal cso

magoltk ssze. Persze, ha akarjuk, a bngsz eredethez mlyebbre is
shatunk.
Az 1993-ban ltez opercis rendszerek nmelyike ma is megvan, de egyik

sem jtszik lnyeges szerepet a Web szempontjbL A V ilghl lmnyt
"
" megtapasztal felhasznlk tbbsge ma (2000 utni) Windowst vagy
valamilyen Linux rendszert futtat PC-t, Mac OS X rendszer Mac-et,
illetve az iPhone-hoz hasonl kzi eszkzket hasznl. 1993-ban a Win
dows mg csak a 3.1-es vltozatnl tartott (s az OS/2-vel versenyzett
a piacrt), a Mac-ek a System 7-re pltek, a Linuxot pedig aUseneten
keresztl terjesztettk. ( Szeretnnk egy jt nevetni? Keressnk egy sz
szakll informatikust, s mondjuk neki, hogy "Trumpet Winsock" vagy
azt, hogy "MacPPP".)
Azoknak a kereteknek a kidolgozsban, amelyeket ma egyszeren "web

szabvnyoknak" neveznk, a " rgiek" kzl is rszt vesznek nhnyan.
Pedig azta eltelt 20 v! Vannak, akik mg a HTML elfutrain is dol
goztak, az 1980-as vekben vagy mg rgebben.
Ha mr az elfutrokrl beszlnk . .. A HTML s a Web mai npsze

rsge knnyen elfeledteti az emberrel azokat a velk egyids form
tumokat s rendszereket, amelyek nagy hatssal voltak a fejldskre.
Mieltt elolvastuk ezt a fejezetet, hallottunk valaha az Andrew-rl? s az
lntermedirl? Vagy a HyTime-rl? A HyTime radsul nem valamilyen
ttt-kopott kutatintzeti projekt volt, hanem katonai hasznlatra elfo
gadott ISO-szabvny- Nagy zlet! Magunk is olvashatunk rla a http:/1
www.sgmlsource.comlhistorylhthist. html cmen.
Ez persze mind szp, de nem ad vlaszt az eredeti krdsnkre: mirt ltezik

az <img> elem? Mirt nem <icon>-nak hvjk? Vagy <include>-nak? Mirt
nem hiperhivatkozs include jellemzvel, vagy rel rtkek valamilyen kombi
ncija? Mirt pont az <img> elemet fogadtk el? Nos, egyszeren azrt, mert
Marc Andreessen kidolgozta s kzztette, s mindig a ksz kd nyer.
Ezzel persze nem azt akarom mondani, hogy minden ksz kd nyer vgtre is, az Andrew, az Intermedia s a HyTime is ksz kdokbl lltak.
A ksz kd szksges, de nem elgsges a sikerhez. s termszetesen nem is
gy rtem, hogy a szabvny elkszlte eltt leszlltott kd a legjobb megol
ds. Marc <img> eleme nem kvetelt meg egy adott grafikaformtumot;
1.
fejezet
nem szabta meg, hogyan folyja krl a szveg a kpet; s nem tmogatta
a helyettest szvegeket vagy a rgebbi bngszknek nyjtott alaprtelme
zett tartalmat. 17 vvel ksbb mg mindig kszkdnk a tartalom kiszimato
lsval, ami mg mindig rlt biztonsgi kockzatok forrsa. Mindezt nyomon
kvethetjk a Nagy Bngszhborn t egszen 1993. februr 25-ig, amikor
"
Marc Andreessen mellkesen odavetette, hogy "egy nap taln a MIME , aztn
ettl fggetlenl kzreadta a kdjt.
A HTML fejldsnek trtnete 1997 s 2004 kztt

1997 decemberben a World Wide Web Consortium (W3C) kzztette
a HTML 4.0-t, s nyomban le is lltotta a HTML-munkacsoport (HTML
Warking Group) munkjt. Kevesebb mint kt hnappal ksbb a W3C egy
msik munkacsoportja kzreadta az XML 1.0-t. Mindssze hrom hnappal
ezt kveten a W3C "Shaping the Future of HTML" (A HTML jvjnek
alaktsa) cmmel mhelyt szervezett, hogy vlaszt adjon a krdsre: "AW3C
"
feladta a HTML fejlesztst? . A vlaszuk ez volt:
A megbeszlsek sorn egyetrtettnk abban, hogy a HTML 4.0 tovbbi
bvtse krlmnyes lenne, akrcsak a 4.0 talaktsa XML-alkalma

zss. A korltok kzl gy kvnunk kitrni, hogy a HTML kvetkez
nemzedkt j alapokra helyezzk, s XML-elemhalmazokra ptjk.
A W3C jjszervezte a HTML-munkacsoportot, s azt a feladatot adta neki,
"
hogy alkossa meg ezeket az "XML-elemhalmazokat . A munkacsoport ragjai
els lpsknt 1998 decemberben elksztettek egy ideiglenes szabvnyvz
latot, amely egyszeren XML-ben fogalmazta jra a HTML-t, anlkl, hogy
brmilyen j elemet vagy jellemzt adott volna hozz. Ez a szabvnylers vlt
ksbb XHTML 1.0 nven ismertt. A vzlat az XHTML-dokumentumok
szmra egy j MIME-tpust hatrozott meg, az application/xhtml+
xml-r. Ugyanakkor a meglev HTML 4 szabvny oldalak talakrsnak
megknnytse rdekben hozzbiggyesztettk a C f ggelket, amely "sz

szefoglalja a tervezsi irnyelveket azoknak az oldalfejlesztknek a sz
mra, akik az XHTML-dokumentumaik megfelel megjelentst a meglev
"
HTML-megjelent programokban is biztostani szeretnk . A C fggelk
l. fejezet
kimondta, hogy megengedett olyan "XHTML-oldalak " ksztse, amelyeket

a kiszolgl tovbbra is a text/html MIME-tpussal ad t.
A kvetkez clpontot a webes rlapok jelentettk. 1999 augusztusban
ugyanez a HTML-munkacsoport kzztette az XHTML Extended Forms
(XHTML bvtett rlapok) lersnak els vzlatt. A munkacsoport tagjai
mr a vzlat els nhny mondatban (http:llwww.w3.org/TR/1999/WD
xhtmljorms-req-19990830#intro) megfogalmaztk az elvrsaikat:

Gondos mdegels utn a HTML Warking Group arra a megllaptsra
jutott, hogy az rlapok kvetkez nemzedkre hrul feladatok nem
egyeztethetk ssze a HTML korbbi vltozataihoz tervezett bng
szknek val visszamenleges megfelelsggeL A clunk az, hogy egy
tiszta, j rlapmodellt ("XHTML Extended Forms") lltsunk fel, amely
jl meghatrozott kvetelmnyeknek tesz eleget. Az ebben a dokumen
tumban lert kvetelmnyek az rlapalkalmazsok igen szles krnek
hasznlata sorn szerzett tapasztalatokra plnek.
Nhny hnappal ksbb az "XHTML Extended Forms " -t tneveztk
"
"XForms -ra, s kln munkacsoportot jelltek ki a kidolgozsra. Ez a cso
port prhuzamosan dolgozott a HTML-munkacsoporttal, s az XForms els
kiadst vgl 2003 oktberben tette kzz.
Kzben, az XML-re trtn tlls befejeztvel, a HTML-munkacsoport
tagjai nekilttak "a HTML kvetkez nemzedknek " megalkotshoz.
200 l mjusban kzztettk az XHTML 1.1 els kiadst, amely csak n
hny aprbb szolgltatssal bvtette az XHTML l.O-t, viszont kikszblte
a C fggelkbl ered ellentmondst. Az 1.1-es vltozattl kezdve minden
XHTML-dokumentumot az application/xhtml+xml MIME -tpussal
kell szolgltatni.
Minden, amit az XHTML-rl tudunk, tves

Mirt fontosak a MIME -tpusok? Mirt trek vissza hozzjuk jra meg jra?
Kt szban sszefoglalhatom: a drki hibakezels miatt. A bngszk mindig
"
"elnzek voltak a HTML nyelv dokumentumokkal szemben. Ha elksz
tnk egy HTML-oldalt, de elfelejtnk cmer adni neki a <title> elemmel,
l. fejezet
a bngszk akkor is megjelentik a lapot, annak ellenre, hogy a <title>

elem mindig is ktelez volt, a HTML minden vltozatban. Ezen kvl bi
zonyos cmkk nem megengedettek ms cmkken bell, de ha olyan oldalt
ksztnk, amely ilyen cmkket gyaz egymsba, a bngszk (valamilyen
mdon) megbirkznak vele, s mg csak hibazenetet sem adnak.
Ahogy az vrhat is volt, az a tny, hogy a webbngszkben a "hibs"

HTML-kdok is mkdnek, ahhoz vezetett, hogy a szerzk hibs HTML
oldalakat ksztettek. Sok-sok hibs oldalt. Egyes becslsek szerint a Weben
ma tallhat HTML-oldalak 99 szzalka tartalmaz legalbb egy hibt. Mi
vel azonban ezek a hibk nem knyszertik lthat hibazenetek megjelent
sre a bngszket, senki sem veszdik a kijavtsukkal.
A W3C ezt alapvet problmaknt rtkelte a Webbel kapcsolatban, s
elhatrozta, hogy megoldst ad r. Az 1997-ben kzztett XML szaktott az
elnz gyflprogramok hagyomnyval, s minden XML-fogyaszt program
szmra ktelezv tette, hogy az gynevezett "jlformltsgi hibkat " vg
zetes hibnak kell tekinteni. Az els hiba vgzetessgnek ez az elve " drki
hibakezels" nven vlt ismertt, az i.e. VII. szzadban lt grg trvnyhoz,
Drakn utn, aki a viszonylag kisebb kihgsokat is halllal bntette. Amikor
a W3C XML-sztrknt jrafogalmazta a HTML-t, a feladattal megbzott
szakemberek megkveteltk, hogy az j application/xhtml+xml MIME
tpussal kiszolglt valamennyi dokumentum drki elbrls al essen a hibk
szempontjbL Ha az XHTML-oldalunkon akr csak egyetlen hiba is van,
a webbngszknek nincs ms vlasztsuk, mint hogy lelltsk az oldal fel
dolgozst, s hibazenetet jelentsenek meg a vgfelhasznlnak
Ez az elv nem rvendett ltalnos npszersgnek. Mivel a meglev olda
lak a becslsek szerint 99 szzalkban hibsak voltak, s gy a vgfelhaszn
lknak folyamatosan hibazeneteket kellett volna kldeni, az XHTML 1.0
s 1.1 j szolgltatsainak szkssge pedig nem ellenslyozta ezt az rat,
a weboldalak szerzi lnyegben figyelmen kvl hagytk az application/
xhtml+xml-t.
Ez persze nem azt jelenti, hogy teljesen levegnek nztk az
XHTML-t. A legkevsb sem. Az XHTML 1.0 szabvnylers C fggelke

biztostott egy kiskaput a vilg webfejlesztinek: "Hasznljunk valami olyas
mit, ami hasonlt az XHTML nyelvtanra, de adjuk t tovbbra is a text/
"
html MIME-tpussal. A webfejlesztk ezrei pontosan ezt tettk: "frisstet
"
tek az XHTML nyelvtanra, de a dokumentumokat tovbbra is a text/
htm l
MIME-tpussal szalgltk ki.
1. fejezet
Mg ma is, amikor szmtalan weboldal lltja magrl, hogy XHTML

nyelv -az els sorban az XHTML dokumentumtpus-meghatrozssal
kezddik, kisbets cmkeneveket hasznl, idzjelek kz zr minden jellem
zrtket, s zr perjelet tesz az olyan res elemek utn, mint a <br
a <hr
/> -csupn az oldalak tredke hasznlja az
/> vagy
application/
xhtml+xml MIME-tpust, amely kivltan az XML drki hibakezelst.
A text/html MIME-tpussal kiszolglt oldalakat azonban a dokumen

tumtpusuktl, a nyelvtanuktl s a kdolsi stlusuktl fggetlenl kivtel
nlkl egy "elnz" HTML-rtelmez dolgozza fel, amely csendben figyel
men kvl hagyja a lerkd hibit, s soha nem figyelmezteti a vgfelhasz
nlt (vagy brki mst), mg ha az oldal technikailag hibsnak minsl is.
Az XHTML 1.0-ban mg megvolt ez a kiskapu, de az XHTML U lezrta,
a vglegestsig soha el nem jut XHTML 2.0 pedig folytatta a drki hibake
zels hagyomnyt. Ezrt lteznek oldalak millirdjai, amelyek XHTML l. O
tpusnak adjk ki magukat, s ezrt van csak egy maroknyi, amely azt lltja
magrl, hogy az XHTML 1.1-et (vagy az XHTML 2.0-t) kveti. Valban
XHTML-t hasznlunk ht? Nzzk meg a MIME-tpust (valjban, ha nem
tudjuk, milyen MIME-tpust hasznlunk, elg biztosra vehet, hogy mg
mindig a text/html lesz): hacsak nem az application/xhtml+xml
MIME-tpussal szolgltatjuk az oldalainkat, az lltlagos "XHTML-olda
laink " csak a nevkben kvetik az XML-t.
Egy versenykpes ltoms

2004 jniusban a W3C Workshop on Web Applications and Compound
Documents rendezvnyn rszt vettek a bngszgyrtk s a webfejleszt
cgek kpviseli, valamint a W3C ms tagjai. Az rdekelt felek -kztk
a Mozilla Foundation s az Opera Software -egy csoportja eladst tartott
arrl, hogy k hogyan kpzelik el a Web jvjt: a meglev HTML 4 szab
vny tovbbfejlesztsvel, s a modern webalkalmazsok fejlesztst segt j
szolgltatsok beptsvel
(http://www. w3. org/2004/04/webapps-cdfws/
paperslopera. htm/):
A kvetkez ht alapelv jelkpezi, hogy mi mit tartunk a legfontosabb
kvetelmnyeknek:
l.
fejezet
Visszirny megfelelsg, vilgos tllsi tvonal

A webalkalmazsok technolgiinak olyan szabvnyokon kell alapulniuk,
amelyeket a webfejlesztk jl ismernek, belertve a HTML-t, a CSS-t,
a DOM-ot s a JavaScriptet.
A webalkalmazsok alapszolgltatsainak megvalsthatnak kell len
nik a ma az IE6-ban rendelkezsre ll mveletek, parancskclak s
stluslapok segtsgve!, hogy a fejlesztk vilgos tllsi tvonalat k
vethessenek. Igen valszntlen, hogy brmely olyan megolds sikeres
nek bizonyulna, amely nem alkalmazhat binris bvtmnyek nlkl
a jelenleg a legnagyobb piaci rszesedssei br bngszben.
jl krlrt hibakezels
A hibakezelst a webalkalmazsokban olyan rszletessggel kell megha
trozni, hogy a bngszknek (felhasznli gynkknek-User Agent,
UA) ne kelljen sajt hibakezel eljrsokat kidolgozniuk, vagy ms fel
hasznli gynkk kdjt visszafejtenik
Afelhasznlnak nem szabad tallkoznia a szerzi hibkkal

A szabvnyoknak pontosan le kell rniuk a hiba utni helyrellts md
jt minden lehetsges hibaforgatknyvre. A hibakezelst, amikor csak
lehet, elegns helyrellsknt kell megvalstani (mint a CSS-ben), nem
pedig nyilvnval s katasztroflis vszhelyzetknt (mint az XML-ben).
Gyakorlati haszon
A webalkalmazsok szabvnyaiba bekerl minden szolgltatsnak iga
zolhat gyakorlati haszna kell legyen. Ennek fordtottja nem felttlenl
igaz: nem minden gyakorlati haszon igazolja egy j szolgltats szks
gessgt.
A gyakorlati hasznot igazol hasznlati eseteket lehetleg olyan vals
webhelyekrl kell venni, ahol a szerzk korbban ms, sikertelen meg
oldssal prbltak tllpni a korltokon.
A parancskdok velnk maradnak...

. . . ugyanakkor kerlendk, amennyiben knyelmesebb, deklaratv ler
kd is hasznlhat helyettk. A parancskdoknak eszkz- s megjelent
fggetleneknek kell lennik, kivve ha a hatkrket eszkzfgg m
don hatrozzk meg (vagyis XBL-be foglaljk).
Az eszkzfgg profilokat clszer elkerlni

A szerzknek kpesnek kell lennik ugyanazokra a szolgltatsokra t
maszkodni a felhasznli gynkk asztali s mobilvlrozataiban.
1.
fejezet
29
Nyltfolyamat
A Web nyer azzal, hogy a fejlesztse nylt krnyezetben folyik. A Web
kzppontjban a webalkalmazsok fognak llni, ezrt ezek fejlesztsnek
is nyltan kell trtnnie. A levelezlistkat, archvumokat s szabvny
tervezeteket folyamatosan elrhetv kell tenni a nagykznsg szmra.
A mhely rsztvevit megszavaztattk, hogy "a W3C deklaratv bvtseket
dolgozzon ki a HTML-hez s a CSS-hez, valamint imperatv bvtseket
a DOM-hoz, hogy eleget tegyen a kzpszint webalkalmazsok kvetelm
nyeinek" vagy "kifinomult, teljes rtk, opercis rendszer szint alkalma
"
zsprogramozsi felleteket ? Az els megoldsra 8-an, a msodikra ll-en
(http:llwww.w3.org/2004104/webapps
cdfwslsummary) a W3C tagjai ezt rtk: " A W3C jelenleg nem kvn semmi
szavaztak. A mhely sszefoglaljban
lyen erforrst ldozni a harmadik szavazs krdsben rintett terletre a HTML s a CSS bvtsre a webalkalmazsokat illeten -, eltekintve
a W3C munkacsoportjai ltal jelenleg is fejlesztett technolgiktl."
Ezzel a dntssel szembeslve azoknak, akik a HTML s a HTML
rlapok tovbbfejlesztst javasoltk, kt lehetsgk maradt: feladjk, vagy
a W3C keretein kvl folytatjk a munkjukat. Az utbbi mellett dntttek:
bejegyeztettk a whatwg.org tartomnynevet, s 2004 jniusban megszle
tett a WHAT Warking Group.
Milyen munkacsoport?
Mi a tr az a WHAT Warking Group? Mondjk el k a sajt szavaikkal
(http://www. whatwg. orginewsistart):

A Web Hypertext Applications Technology Warking Group web
bngsz-gyrtk s webfejlesztsben rdekelt felek laza, nem hivatalos,
nylt trsulsa. A csoport clja szabvnyok kidolgozsa a HTML s
a hozz kapcsold technolgik alapjn, hogy megknnytse az egytt
mkdni kpes webalkalmazsok ksztst, s eredmnyeit szndk
ban ll benyjtani egy szabvnygyi szervezetnek. Ezek a benyjtott
tervezetek kpeznk a HTML szabvnyos, hivatalos bvtsnek alapjt.
1.
fejezet
Frumunkat tbb hnapnyi, az emltett technolgik szabvnyairl foly

tatott privt elektronikus levelezs utn nyitottuk meg. Eddig a HTML4
Forms bvtsre sszpomostottunk, azzal a cllal, hogy gy tmogassuk
a webfejlesztk ltal ignyelt j szolgltatsokat, hogy kzben visszame
nlegesen megrizzk az egyttmkdst a meglev tartalmakkal. A cso
portot azzal a szndkkal hoztuk ltre, hogy biztostsuk az emltett szab
vnyok jvbeli fejlesztsnek teljes nyilvnossgt egy a nagykznsg
szmra hozzfrhet, nylt levelezlistn keresztl.
A kulcsmondat itt a "visszamenlegesen megrizzk az egyttmkdst
a meglev tartalmakkal ". Az XHTML (leszmtva a C fggelk nyjtotta
kiskaput) visszamenlegesen nem egyeztethet ssze a HTML-lel: teljesen j
MIME-tpust ignyel, s drki hibakezelst kvetel meg minden ilyen MIME
tpussal szolgltatott tartalom esetben. Az XForms sem kpes a visszirny
egyttmkdsre a HTML-rlapokkal, mert csak olyan dokumentumokba
pthet be, amelyek az XHTML j MIME-tpust hasznljk, ami azt je
lenti, hogy az XForms is ktelezv teszi a drki hibakezelst. Minden t
a MIME-hoz vezet.
Ahelyett, hogy sutba dobott volna egy vtizednyi, a HTML-be fektetett
erfesztst, s hasznlhatatlann tette volna a meglev weboldalak 99 sz
zalkt, a WHAT munkacsoport gy dnttt, hogy ms megkzeltst
kvet: dokumentlja a bngszk ltal tnylegesen alkalmazott " elnz"
hibakezel algoritmusokat. A webbngszk mindig is elnzek voltak
a HTML-hibkkal szemben, de senki sem vette a fradsgot, hogy pontosan
lerja a viselkedsket. Az NCSA Mosaic-nak sajt algaritmusai voltak a hi
bs oldalak kezelsre, s a Netscape ezekhez prblt igazodni. Aztn az
Internet Explorer kvette a Netscape-et, az Opera s a Firefox megprblta
utnozni az Internet Explorert, aSafari pedig a Firefox nyomba eredt, s gy
tovbb, egszen a mai napig. Kzben pedig a fejlesztk ezer meg ezer mun
kart ltek abba, hogy a termkeiket egyenrtkv tegyk a versenytrsak
programjaivaL
Ha ez eszetlen mennyisg munknak tnik, az azrt van, mert tnyleg
az. Vagy legalbbis az volt. Sok vbe telt, de a WHAT munkacsoport (nhny
homlyos esetet leszmtva) sikeresen dokumentlta, hogyan kell a HTML-t
a meglev webes tartalmakkal sszeegyeztethet mdon rtelmezni. A vgs
l.
fejezet
31
algoritmusban egyetlen olyan lps sincs, amely megkveteln a HTML

rtelmez programtl, hogy lltsa le a feldolgozst, s jelentsen meg hiba
zenetet a vgfelhasznlnak
Mikzben ez a visszafejts folyt, a WHAT munkacsoport csendben ms
dolgokon is gykdtt. Az egyik egy szabvny volt, amelynek kezdetben
a Web Forms 2.0 nevet adtk, s j fajta vezrlkkel bvtette a HTML
rlapokat (a webes rlapokrl a 9. fejezetben bvebben is sz lesz), a msik
pedig egy szabvnytervezet "Web Applications 1.0" cmen, a mely olyan jelen
tsebb j szolgltatsokat tartalmazott, mint a kzvetlenl festhet rajzv
szon (lsd a 4. fejezetet) vagy a videk s hangfjlok bvtmnyek nlkli,
beptett tmogatsa (lsd az 5. fejezetet).
Vissza a W3C-hez
A W3C s a WHAT Warking Group lnyegben vekig levegnek nzte
egymst. Mikzben a WHAT munkacsoport a webes rlapokra s az j
HTML-szolgltatsokra sszpontostott, a W3C HTML-munkacsoportja az
XHTML 2.0-s vltozatn szorgoskodott. 2006 oktberre azonban vilgoss
vlt, hogy a WHAT munkacsoport jelents elnyre tett szert, mg az X HTML
2 mg mindig csak vzlatszinten ltezett, s egyetlen komolyabb bngsz
sem valstotta meg. 2006 oktberben Tim Berners-Lee - szemlyesen
a W3C alaptja- bejelentette, hogy a W3C a jvben a WHAT munkacso
porttal kzsen fog dolgozni a HTML rovbbfejlesztsn
(http://dig.esail.
mit. edu!breadcrumbs/node/166):
Bizonyos dolgok vekkel ksbbrl visszatekintve vilgosabb vlnak.
A HTML-t fokozarosan tovbb kell fejleszteni. A ksrlet, hogy a vilgot
rvegyk arra, hogy egyszerre lljon t az X ML-re, zrja idzjelek kz
a jellemzrtkeket, zrja le perjellel az res cmkket, s hasznljon
nvtereket, megbukott. A HTML-oldalakat kszt nagykznsg nem
mozdult, nagyrszt azrt, mert a bngszk nem panaszkodtak. Egyes
nagyobb kzssgek megvalstottk ugyan az tllst, s lvezik
a jlformlt rendszerek elnyeit, de nem mindenki. Fontos, hogy folya
matosan tovbbfejlesszk a HTML-t, mikzben nem mondunk le
32
1.
fejezet
a jlformlt vilg fel vezet tmenetrl sem, s egyre hatkonyabb

tesszk ezt a vilgot.
Tervnk egy teljesen j HTML-csoport fellltsa. Az elztl eltren
ennek az lesz a feladata, hogy fokozatosan tovbbfejlessze a HTML-t s vele
prhuzamosan az XHTML-t. A csoport vezetsge s tagjai kicserldnek,
s egytt fognak munklkodni a HTML-en s az XHTML-en. Az j
csoport ers tmogatssal br, tbbek kztt a bngszgyrtk rszrl.
Az rlapok fejlesztsn is dolgozni kvnunk. Ez bonyolult terlet, mivel
mind a meglev HTML Forms, mind az XForms rlapnyelv. A HTML
rlapokat mindentt hasznljk, de az X-rlapoknak is szmos megvals
tsa s felhasznlja ltezik. Ezenkivl a Webforms-csapat benyjtott tervei
is sszer bvtseket javasolnak a HTML-rlapokhoz. A Webforms
csapat terve- elmondsuk szerint- a HTML-rlapok bvtse.
A W3C jonnan fellltott HTML-munkacsoportjnak egyik legels dn
tse az volt, hogy a "Web Applications l. O" nevet "HTML5"-re vltoztattk
s ezzel el is rkeztnk a HTML5-hz.
Utsz
2009 oktberben a W3C lelltotta az XHTML 2 Working Group munk
jt, s a dnts indoklsaknt a kvetkez nyilatkozatot bocstotta ki
www. w3.
(http:/1
org/2009/06/xhtml-faq. htm/):
Amikor a W3C 2007 mrciusban bejelentette a HTML- s XHTML

2-munkacsoporrok megalaktst, jelezte, hogy folya matosan figyelni
fogja az XHTML 2 piacnak alakulst. A W3C fontosnak tartja, hogy
vilgoss tegye az llspontjt a kzssgnek a HTML jvjrl.
Mikzben rtkeljk az XHTML 2-munkacsoportnak az vek sorn
tett erfesztseit, a rsztvevkkel folytatott megbeszls utn a W3C
vezetsge gy dnttt, hogy a munkacsoport 2009 vgn lejr meg
bzatst nem kvnja megjtani.
Mindig a ksz kd nyer.
1. fejezet
Hogyan jutottunk el idig?
33
Tovbbi olvasmnyok
The History of the Web (http:llhixie.chlcommentarylweblhistory)- lan

Hickson rgi vzlata
Michael Smith, Henri Sivonen s msok: HTML/History (http:llesw.
w3.orgltopic!HTML/history)
Scott Reynen: A Brief History of HTML (http://www.atendesigngroup.
comlbloglbriefhistory-ofhtml}
2.
fejezet
A HTML5-kpessgek szlelse
Ugorjunk fejest!
Joggal tehetjk fel a krdst: "Hogyan kezdhetnk el tllni a HTML5 hasz
nlatra, ha a rgebbi bngszk nem tmogatjk?". A krds azonban flre
vezet, ugyanis a HTML5 nem egyetlen nagy egysg, hanem nll szolgl
"
tatsok gyjtemnye. A "HTML5-tmogats teht nem derthet fel, mert
ilyesmi nem ltezik. Az egyes szolgltatsok- a rajzvszon, a vicleobegyazs
vagy a helymeghatrozs - megltt azonban igenis szlelhetjk.
szlelsi mdszerek
Amikor a bngsznk megjelent egy weboldalt, egy dokumentumobjektum
modellt (Document Object Model, DOM) pt fel, ami nem ms, mint az olda
lon tallhat HTML-elemeket brzol objektumok gyjtemnye. Minden
elemet- minden <p>-t, minden <d iv>- et s minden <span>-t- nll objek
tumok kpviselnek a DOM-ban. (Ugyanakkor lteznek globlis objektumok is,
mint a window vagy a document, amelyek nem ktdnek konkrt elemekhez.)
Minden DOM-objektum rendelkezik bizonyos kzs tulajdonsgokkal, de
egyes objektumoknak tbb tulajdonsga van, mint msoknak. A HTML5
szolgltatsait tmogat bngszkben egyes objektumok egyedi tulajdons
gokkal brnak, gy egy gyors pillants a DOM-ra elrulja, hogy a bngsz
milyen szolgltatsokat tmogat.
Ngy egyszer mdszer ltezik arra, hogy feldertsk, hogy egy adott bn
gsz rendelkezik-e egy bizonyos kpessggel. Ezek a legegyszerbbtl a leg
sszetettebb fel haladva a kvetkezk:
l. Megvizsgljuk, hogy egy globlis objektum (pldul a window vagy
a navigator) rendelkezik-e egy adott tulajdonsggal. A helymeghatroz

2. fejezet
HTML5-kpessgek szlelse l 35
API tmogatsnak vizsglatra pr oldallal ksbb, a fejezet "Helymeg

hatrozs" cm rszben lthatunk pldt.
2. Ltrehozunk egy elemet, majd megvizsgljuk, hogy rendelkezik-e egy
adott tulajdonsggaL A rajzvszon tmogatsnak vizsglatt bemutat

plda gy egy oldallal ksbb szerepel.
3. Ltrehozunk egy elemet, megvizsgljuk, hogy rendelkezik-e egy adott
tagfggvnnyel, majd meghvjuk ezt a tagfggvnyt, s megvizsgljuk a
fggvnytl visszakapott rtket. A tmogatott videoformtumok kide
rtsre a "Videoformtumok" cm rszben lthatunk pldt.
4. Ltrehozunk egy elemet, egy adott tulajdonsgt egy bizonyos rtkre l
ltjuk, majd megvizsgljuk, hogy a tulajdonsg megtartotta-e az rtkr.
A tmogatott <inpu t > pusok kidertsre a "Bevitelielem-tpusok" cm
rsz mutat egy pldt.
-
Modernizr: egy HTML5-szlel knyvtr

A Modernizr
(http://www.modernizr.com)
egy nylt forrs, MIT felhaszn
lsi engedllyel terjesztett JavaScript-knyvtr, amely szmos HTML5- s

CSS3 -szolgltats tmogatsnak szlelsre kpes. E knyv rsnak idejn
a legjabb vltozata az 1.1-es szmot viselte, de mindig a legfrissebb vltozatot
clszer hasznlni. Ehhez az albbi <script> elemet kell feltntetnnk az
oldal elejn:
<! DOCTYPE html>
<html>
<head>
<meta char set= utf-8 ">
<title>Dive into HTMLS</title>
<script src="modernizr .min. js"X/script>

</head>
<body>
</body>
</html>
AModernizr nmkden indul el, teht nincs modernizr _init() fgg

vny, amelyet meg kellene hvnunk. Amikor a knyvtr betltdtt, ltrehoz
egy Modernizr nev globlis obejktumot, amely minden ltala szlelhet
szolgltats szmra tartalmaz egy-egy logikai tulajdonsgot. Ha a bng36
2. fejezet
sznk pldul ismeri a Canvas API-t (lsd a 4. fejezetben), a Modernizr.

canvas tulajdonsg rtke true lesz. Ha viszont a bngsz nem tmogatja
ezt a programozsi felletet, az emltett tulajdonsg a false rtket kapja:

if (Modernizr. canvas)
l l Rajzoljunk
l else {
ll
l
alakzatokat!
nincs elrhet beptett rajzvszon-tmogats
:(
A rajzvszon
A HTML5 a <canvas>, vagyis rajzvszon" elemet (http://bit.ly/9]Hz0j) gy
"
hatrozza meg: egy a felbontstl fgg bitkpes rajzvszon, amelyet grafiko
"
nok, jtkgrafikk, illetve ms kpi elemek futs kzbeni megjelentsre hasz
nlhatunk". A rajzvszon egy tglalap alak terlet az oldalon, amire JavaScript
kdok segtsgvel brmit rajzolhatunk. A HTML5 klnfle fggvnyeket
( Canvas API") hatroz meg alakzatok rajzolshoz, tvonalak meghatrozs
"
hoz, szntmenetek ltrehozshoz s transzformcik alkalmazshoz.
A rajzvszon-API tmogatsnak feldertse a 2. szlelsi mdszerrel (lsd
az szlelsi mdszerek" cm rszt a fejezet elejn) trtnik. Ha a bng
"
sznk tmogatja a Canvas API-t, az ltala ltrehozott, a <canvas> elemet
jelkpez DOM-objektum rendelkezni fog egy getContext ( ) nev tag
fggvnnyel (lsd a 4. fejezet "Egyszer alakzatok" cm rszt). Amennyiben
a bngsznk nem tmogatja a rajzvszon-API-t, a <canvas> elem szmra
ltrehozott DOM-objektum csak ltalnos tulajdonsgokkal fog brni, ame
lyek kztt nem tallunk olyanokat, amelyek kifejezetten a rajzvszonhoz
kapcsoldnak. A rajzvszon tmogatst ezzel a fggvnnyel vizsglhatjuk:
function supports canvas ( )
_
return! !docurnent.createElernent('canvas') .getContext;
Ez a fggvny elszr egy <canvas> nev ldemet hoz ltre:

return 1 1docurnent.createElement('canvas') .getContext;
Ez az elem soha nem kapcsoldik az oldalhoz, teht soha senki nem fogja
ltni. Csupn ott lebeg a memriban ttlenl s cltalanul, mint egy kenu
a lustn hmplyg folyn.
2.
fejezet
Amint ltrehozzuk a <canvas> lelemet, megvizsgljuk, hogy ltezik-e a

getContext ( ) tagfggvny. Ez a tagfggvny csak akkor lesz jelen, ha a
bngsz tmogatja a Canvas API-t:

return
!document.createElement('canvas')
.getContext;
Vgl, a ketts tagads trkkjnek segtsgvel az eredmnyt logikai alakba
(true vagy
return
false) knyszertjk:
!document.createElement('canvas') .getContext;
Ez a fggvny a rajzvszon-API lehetsgeinek nagy rszt kpes szlelni,

belertve az alakzatrajzols kpessgt (lsd az "Egyszer alakzatok" cm
rszt a 4. fejezetben), az tvonalakat ("tvonalak", 4. fejezet), a szntmene
teket ("Szntmenetek", 4. fejezet) s a mintzatokat. A kls fejleszts
explorercanvas knyvtrat ( lsd a "Mi a helyzet az Internet Explorerrel?"
dm rszt a 4. fejezetben), amely a Canvas API-t a Microsoft Internet Explo
rerben valstja meg, nem tudja szlelni.
Ahelyett, hogy magunk rnnk meg a fenti fggvnyt, hasznlhatjuk
a Modernizr knyvtrat is (amelyet az elz rszben mutattunk be) a rajz
vszon-API tmogatsnak szlelsre:
if (Modernizr.canvas) {
l l Rajzoljunk alakzatokat!
} else {
l l nincs elrhet beptett
}
rajzvszon-tmogats
A rajzvszonra rt szvegek API-jnak szlelsre kln vizsglatot kell vgez

nnk, amelyet az albbiakban mutatok be.
Rajzvszonra rt szveg
Mg ha a bngsznk tmogatja is a rajzvszon-API-t, nem biztos, hogy a
rajzvszonra rt szvegek API-jt ( Canvas text API) is ismeri. A Canvas API
idvel egyre bvlt, s szvegr fggvnyeket adtak hozz, a rajzvszont
tmogat bngszk kzl azonban nmelyiket mr az eltt piacra dobtk,
hogy a szveg-API elkszlt volna.
38
2. fejezet
A Canvas text API feldertse szintn a 2. szlelsi mdszerrel (lsd az

"
"szlelsi mdszerek cm rszt a fejezet elejn) trtnik. Ha a bngsznk
tmogatja a Canvas API-t, az ltala ltrehozott, a <canvas> elemet jelk
pez DOM-objektum rendelkezni fog a getContext ( ) tagfggvnnyel
(lsd a 4. fejezet "Egyszer alakzatok" cm rszt). Amennyiben a bng
sznk nem tmogatja a rajzvszon-API-t, a <canvas> elem szmra ltreho
zott DOM-objektum csak ltalnos tulajdonsgokkal fog brni, amelyek
kztt nem tallunk olyanokat, amelyek kifejezetten a rajzvszonhoz kapcso
ldnak. A rajzvszonra rhat szvegek tmogatst ezzel a fggvnnyel vizs
glhatj uk:
function supports _canvas _text ()
if
(! supports _canvas () ) {
return false; }
var dummy_canvas =document. createElement (' canvas');

var context =dummy_canvas. getContext ('2d' ) ;
return typeof context. fillText
==
'function';
A fggvny elszr a rajzvszon tmogatst vizsglja az elz rszben meg

ismert supports
if
canvas ( ) fggvny segtsgve!:
(!supports_canvas()) {
return false;}
Ha a bngsz nem tmogatja a Canvas API-t, termszetesen nem fogja t

mogatni a Canvas text API-t sem!
Kvetkez lpsknt ltrehozunk egy <canvas> lelemet, s lekrdezzk
a rajzolkrnyezett (context). Ez biztosan mkdik, mert a supports
canvas ( ) fggvny mr kidertette, hogy a getContext (l tagfggvny
minden rajzvszon-objektum esetben ltezik:

document. createElement {' canvas');
dUJIIIIY_canvas. getContext(' 2d') ;
var dummy_ canvas

var context
Vgl, megvizsgljuk, hogy a rajzolkrnyezet rendelkezik-e fillText ( )

nev fggvnnyeL Ha igen, akkor a Canvas text API elrhet:
return
typeof context. fillText
'function' ;
Ezt a fggvnyt sem kell magunknak megrnunk, hanem hasznlhatjuk he

lyette a Modernizr knyvtrat is (lsd a "Modernizr: egy HTML5-szlel
2.
fejezet
HTML5-kpessgek szlelse l
39
knyvtr" cm rszt a fejezet elejn) a rajzvszonra rt szvegek API-tmo

gatsnak szlelsre:
if (Modernizr.canvastext)
l l rjunk szveget!
l else (
l l nincs elrhetbeptett szvegtmogats a rajzvszonhoz
Vide
A HTML5 egy j, <v ideo> nev elemet hatroz meg a weboldalakba gyaz
hat videk rszre. A videk begyazsa korbban nem volt lehetsges olyan
kls fejleszts bvtmnyek (plug-in) nlkl, mint az Apple QuickTime
vagy az Adobe Flash.
A <video> elemet gy terveztk, hogy mindenfle szlel parancskd
nlkl hasznlhat legyen. Tbb vicleofjlt is megadhatunk, s a HTML5
videotmogatsval rendelkez bngszk aszerint vlaszthatnak kzlk,
hogy mely vicleoformtumokat ismerik.*
A HTML5-viclet nem tmogat bngszk teljesen figyelmen kvl
hagyjk a <video> elemet, de ezt az elnynkre fordthatjuk, s ilyenkor
utasthatjuk a bngszt, hogy egy kls bvtmny segtsgvel jtssza le
a videt. Kroc Camen tervezett egy Vicleo for Everybody! nev megoldst
{http:!lcamendesign.com!code!video_for_everbody), amely a HTML5-videra

tmaszkodik, amennyiben az rendelkezsre ll, a rgebbi bngszkben vi
szont kpes helyette a QuickTime-ra vagy a Flash-re szortkozni. Ez a megol
ds egyltaln nem hasznl JavaScriptet, s lnyegben minden bngszben
mkdik, belertve a mobileszkzk bngszit is.
Ha tbbet szeretnnk annl, hogy a vide csak felbukkan az oldalon, s a
bngsz lejtssza, JavaScript-kdot kell hasznlnunk. A vicleotmogats feldertse a 2. szlelsi mdszerrel (lsd az "szlelsi mdszerek" cm rszt a
fejezet elejn) trtnik. Ha a bngsznk tmogatja a HTML5-videkat, az
ltala ltrehozott, a <video> elemet jelkpez DOM-objektum rendelkezni
A klnbz videoformrumokkal kapcsolarban lsd: "A gentie inrroducrion ro vicleo encoding,
part l: conrainer formars" (http:lldiveintomark.orglarchivesl20081121181give-part-1-container
Jormats) s "par r 2: lossy vicleo codecs" {http:lldiveintomark.orglarchivesl2008112118lgive
part-2-lossy-video-codecs).
40 l
2. fejezet
fog egy canPlayType ( ) nev tagfggvnnyeL Amennyiben a bngsz

nem tmogatja a HTML5-videt, a <video> elem szmra ltrehozott
DOM-objektum csak az sszes elemnl rendelkezsre ll ltalnos tulajdon
sgokkal fog brni. A vicleotmogatst ezzel a fggvnnyel vizsglhatjuk:
function supports victea
_
() {
return ! ! ctocurnent. createElement (' victeo' ) . canPlayType;
Ezt a fggvnyt sem kell magunknak megrnunk: a HTML5-videk tmoga

tsnak szlelsre is hasznlhatjuk a Modernizr knyvtrat (lsd a "Mo
dernizr: egy HTML5-szlel knyvtr" cm rszt a fejezet elejn):
(Modernizr.video) {
l l Jtsszunk le egy victet!
} else {
if
ll
ll
nincs elrhet beptett victeatmogats :
prbljuk meg helyette esetleg a QuickTime-ot vagy a Flash-t
A bngszben lejtszhat videoformtumok szlelsre kln vizsglatot

kell vgeznnk; ennek bemutatsa kvetkezik most.
Videoformtu mok
A videoformtumok olyanok, mint az rott nyelvek. Egy angol nyelv jsg
tartalmazhatja ugyanazokat a hreket, mint egy spanyol, de ha csak ango
lul tudunk, csak az egyiknek vehetjk hasznt. Ahhoz, hogy le tudjon
jtszani egy videt, a bngsznknek rtenie kell a "nyelvet", amelyen a vi
det "rtk ".
A videk nyelvt "kodeknek " hvjk- ez az az algoritmus, amelyet a vide
bitfolyamm alaktsra hasznltak. A vilgon kodekek tucatjai lteznek melyiket hasznljuk? A HTML5-vide sajnlatos valsga az, hogy a bng
szk nem tudnak megegyezni egyeden kodekben, de szerencsre gy tnik,
sikerlt leszktenik a krt kettre. Az egyik kodekrt fizetni kell (mert
szabadalmaztatott), viszont mkdik aSafariban s az iPhone kszlkeken
(st az Adobe Flash-ben is, ha egy olyan megoldst alkalmazunk, mint
a Vicleo for Everybody!). A msik kodek ingyenes, s az olyan nylt forrs
bngszk is ismerik, mint a Chrome vagy a Mozilla Firefox.
2. fejezet
A videoformtumok tmogatsnak feldertse a 3. szlelsi mdszerrel
(lsd az "szlelsi mdszerek" cm rszt a fejezet elejn) trtnik. Ha a bn

gsznk tmogatja a HTML5-videkat, az ltala ltrehozott, a <video>
elemet jelkpez DOM-objektum rendelkezni fog a canPlayType () nev
tagfggvnnyeL Ez a tagfggvny rulja el, hogy a bngsz tmogat-e egy
adott videoformtumot.
Az emltett fggvny itt a Mac-ek s iPhone-ok ltal tmogatott, szabada
lommal sjtott formtumot vizsglja:
function supports_h 2 64_baseline_video ()
if ( ! supports_video{))
return false; )
var v= document. createElement ( "v ideo") ;

return v. canPlayType ( 'video/mp4; codecs="avcl. 42E01E, mp4a. 40.2 "');
)
A fggvny elszr a HTML5-videk tmogatst vizsglja az elz rszben

bemutatott supports _video() fggvny segtsgve!:
if (!supports_video())
returnfalse;)
Ha a bngsz nem tmogatja a HTMLS-videkat, termszetesen nem fog

tmogatni egyetlen vicleoformtumot sem!
Kvetkez lpsknt a fggvny ltrehoz egy <video> nev ldemet
(de nem kapcsolja azt az oldalhoz, teht nem lesz lthat), s meghvja a
canPlayType () tagfggvny t. Ez a tagfggvny biztosan ltezik, mert
a supports _video() fggvny ppen az imnt vizsglta ezt:

var v= document.createElement ("video");
return v. canPlayType ( 'video/mp4; codecs="avcl.42E01E, mp4a.40. 2"');
A "videoformtumok" valjban klnfle dolgok kombincii. A bngsz

tl konkrtan azt kell megkrdeznnk, hogy le tudja-e jtszani a MPEG-4
trolha csomagolt H.264 Baseline kdols video- s AAC LC kdols

hangsvokat.*
A canPlayType () fggvny nem true vagy false rtket ad vissza,
hanem a vicleoformtumok sszetettsgt szem eltt tartva egy karakterlncot:
Azr, hogy ez ponrosan mir jelenr, az 5. fejezerben magyarzom el, de rdemes teher elolvasni az
"
"A genrle inrroducrion ro vicleo encoding (http://diveintomark.orgltaglgive) cm rsr is.
42
2. fejezet
"probably"
A bngsz meglehetsen biztos benne, hogy le tudja jtszani az adott

formtumot ( "valsznleg" ).
"maybe"
A bngsz gy vli, hogy taln le tudja jtszani az adott formtumot

("taln").
" " (res karakterlnc)
A bngsz biztos benne, hogy nem tudja lejtszani az adott formtumot.
Az albbi msodik fggvny a Mozilla Firefox s ms nylt forrs bn
gszk ltal tmogatott nylt vicleoformtumot vizsglja. Az eljrs pon
tosan ugyanaz, az egyeden klnbsget a canPlayType ( ) fggvnynek
tadon karakterlnc jelenti. Itt technikailag azt krdezzk a bngsztl,
hogy le tudja-e jtszani az Ogg trolba csomagolt Theora kdols video
s Yorbis kdols hangsvokat.
function supports_ ogg_theora_video ()
if
(! supports_video () ) {
return false;
var v = document. createElement ( "video");

return v. canPlayType ( 'video/ogg; codecs="theora, vorbis'"};
Vgl jjjn a WebM (http://www.webmproject.org), az a nemrg nylt forr

sv vlt (s szabadalmakkal nem sjtott) videokodek, amelyet beptenek
majd az olyan fontosabb bngszk kvetkez vltozatba, mint a Chrome,
a Firefox s az Opera. A nylt WebM-videk tmogatst ugyanazzal a md
szerrel szlelhetjk:
function supports webm _video (}
_
if
( ! supports_video () ) {
return false;
var v= document. createElement ("video");

return v. canPlayType ('video/wel::m; codecs="vp8, vorbis"');
Ezt a fggvnyt sem kell magunknak megrnunk: a klnbz HTML5videoformtumok tmogatsnak szlelsre is hasznlhatjuk a Modernizr
knyvtrat (megjegyzend, hogy a Modernizr mg nem kpes szlelni a nylt
WebM vicleoformtum tmogatst):
2.
fejezet
if (Modernizr. v ideo) (
ll
Jtsszunk le egy videt! De milyet?
(Modernizr.video.ogg) (
l l megprbljuk az Ogg trolba csomagolt
l l Ogg Theora + Verbis formtumot
l else if (Modernizr.video.h264) (
l l megprbljuk az MP4 trolba csomagolt
l l H. 264 vide+ MC hang formtumot
l
l
if
Helyi trols
A HTML5-trol (http:lldev. w3. orglhtm/5/webstorage/) arra ad mdot a web
helyeknek, hogy informcikat troljanak a felhasznl szmtgpn, ame
lyeket ksbb kinyerhetnek. A HTML5-trol mkdsi elve hasonl a stik
hez (cookie), de nagyobb mennyisg informcihoz terveztk. A stik mrete
korltozott, s a bngsz minden alkalommal elkldi ket a webkiszolgl
nak, amikor j oldalt kr (ami tovbbi idbe telik, s rtkes svszlessget
emszt fel). A HTML5-trol a felhasznl szmtgpn marad, s a web
helyek JavaScript-kd segtsgvel rhetik el, miutn az oldal betltdtt.

Krds: A helyi trols valban rsze a HTML5-nek? Mirt kapott helyet
kln szabvnylersban?
Vlasz: Az els krdsre a rvid vlasz: igen, a helyi trols a HTML5
rsze. Kicsir bvebben kifejtve: a helyi trols rgebben a HTML5 f
szabvnylersnak rsze volt, de vgl kln lersban kapott helyet,
men a HTMLS-munkacsoport egyes tagjai panaszkodtak, hogy a HTMLS
tl nagy. Ha ez gy hangzik, mimha a kalrik szmr cskkenrend
tbb szelerre vgnnk egy tortt..., nos, nem tvednk. dv a szabv
nyok bizarr vilgban!
A HTML5-trol tmogatsnak feldertse az l. szlelsi mdszerrel (lsd az

"szlelsi mdszerek" cm rszt a fejezet elejn) trtnik. Ha a bngsznk
44 l
2. fejezet
tmogatja a helyi trolst, a globlis window objektum rendelkezni fog egy

localStarage
nev tulajdonsggaL Amennyiben a bngsz nem tmogatja
a helyi trolst, a localStarage tulajdonsg undefined (nem meghatro

zott) lesz. A HTML5-trol tmogatst ezzel a fggvnnyel vizsglhatjuk
function supports_local_storage ( )
return (' localStorage' in window) && window
[' localStorage' J
! =null;
Ezt a fggvnyt sem kell magunknak megrnunk: a HTML5 -fle helyi tro
ls tmogatsnak szlelsre is hasznlhatjuk a Modernizr knyvtrat (lsd
"
a "Modernizr: egy HTML5-szlel knyvtr cm rszt a fejezet elejn):
(Modernizr .localstorage) (
l l A window .localStorage elrhet!
j else {
l l nincs elrhet beptett tmogats a helyi trolshoz : (
l l prbljuk meg esetleg aGears-t vagy egy msik kls megoldst
if
Megjegyzend, hogy a JavaScript megklnbzteti a kis- s nagybetket. AMo

dernizr jellemzjt localstarage-nek hvjk (csupa kisbetvel), a DOM
tulajdonsg neve azonban window.localStorage (nagy S-sel).

Krds: Mennyire biztonsgos a HTML5-troladatbzisom? Brki el
olvashatja?
Vlasz: Brki, aki fizikailag hozzfr a szmtgpnkhz, valsznleg
beletekinthet a HTML5-troladatbzisba (st meg is vltoztathatja azt).
A bngszn bell minden webhely olvashatja s mdosthatja a sajt
rtkeit, de a ms webhelyek ltal trolt rtkekhez nem frhet hozz. Ezt
a korltozst hvjk az " azonos eredet elvnek" (http://bit.lyi9YyPpj).
Webmunksok
A webmunksok (Web Worker API, http://bit.ly/9jheoj) szabvnyos mdot
adnak a bngszknek arra, hogy JavaScript-kdokat futtassanak a httrben.
2.
fejezet
A webmunksok segtsgvel tbb " szlat" indthatunk, amelyek tbb-ke

vsb mind egyszerre futnak. (Gondoljunk arra, hogyan futtat a szmtgp
prhuzamosan tbb alkalmazst, s nagyjbl megrtettk a lnyeget.) Ezek
a "httrszlak " bonyolult matematikai szmtsokat vgezhetnek, hlzati
krelmeket adhatnak ki, vagy mveleteket vgezhetnek a helyi troln, mi
kzben a f weboldal arra reagl, ahogy a felhasznl grget, kattint vagy
szveget gpel be.
A webmunksok tmogatsnak feldertse az l. szlelsi mdszerrel (lsd
az "szlelsi mdszerek " cm rszt a fejezet elejn) trtnik. Ha a bng

sznk tmogatja a Web Warker API-t, a globlis window objektum rendel
kezni fog egy Warker nev tulajdonsggaL Amennyiben a bngsz nem
tmogatja a webmunksok programozsi fellett, a Warker tulajdonsg
undefined (nem meghatrozott) lesz. A webmunksok tmogatst ezzel
a fggvnnyel vizsglhatjuk:
function supports_web_ workers ( )
return ! 1 window. Worker;
Ezt a fggvnyt sem kell magunknak megrnunk: a webmunksok tmoga

tsnak szlelsre is hasznlhatjuk a Modernizr knyvtrat (lsd a "Mo
if (Modernizr. webworkers) {
l l A window. Worker elrhet!
J else {
l l nincs elrhetbeptett tmogats a webmunksok szmra : (
l l prbljuk meg esetleg aGears-t vagy egy msik klsmegoldst
)
Megjegyzend, hogy a JavaScript megklnbzteti a kis- s nagybetket. A

Modernizr jellemzjt webworkers-nek hvjk (csupa kisbetvel), a DOM
tulajdonsg neve azonban window. Warker (a "Worker" szban nagy W-vel).
Kapcsolat nlkli webalkalmazsok

Statikus weboldalakat olvasni kapcsolat nlkli mdban knny: csatlako
zunk az Internetre, letltnk egy weboldalt, megszaktjuk az internetkap
csolatot, bezrkzunk egy szobba, s addig olvasgatjuk az oldalt, amg csak
46 l A HTML5-kpessgek szlelse
2.
fejezet
akarjuk. (Bezrkzni persze nem felttlenl kell.) De mi a helyzet az olyan

webalkalmazsok kapcsolat nlkli hasznlatval, mint a Gmail vagy a Google
Docs? A HTML5-nek ksznheten brki (nem csak a Google!) kszthet
kapcsolat nlkl is mkd webalkalmazsokat.
A kapcsolat nlkli (ofHine) webalkalmazsok termszetesen kezdetben
online webalkalmazskm mkdnek. Amikor elszr ltogatunk el egy kap
csolat nlkl is mkd webhelyre, a webkiszolgl elrulja a bngsznknek,
hogy mely fjlokra van szksge ahhoz, hogy a webhely kapcsolat nlkl is
mkdjn. Ezek a fjlok brmilyen tpus llomnyok lehetnek: HTML,
JavaScript, kpek, st akr videk is (lsd a "Vide" cm rszt a fejezet els
felben). Ha a bngsz egyszer minden szksges fjlt letlttt, az adott
webhelyre akkor is elltogathatunk, ha ppen nem kapcsoldunk az Inter
netre. A bngsznk szre fogja venni, hogy kapcsolat nlkl dolgozunk, s
a korbban letlttt fjlokat fogja betlteni. Amikor aztn ismt csatlakozunk
a Vilghlhoz, minden vgrehajtott vltoztatst feltlthetnk a tvoli web
kiszolglra.
A kapcsolat nlkli munka tmogatsnak feldertse az l. szlelsi md
szerrel (lsd az "szlelsi mdszerek " cm rszt a fejezet elejn) trtnik. Ha
a bngsznk tmogatja a kapcsolat nlkli webalkalmazsokat, a globlis
window objektum rendelkezni fog egy applicationCache nev tulajdon
sggaL Amennyiben a bngsz nem tmogatja a kapcsolat nlkli webalkal

mazsokat, az applicationCache tulajdonsg undefined (nem meg
hatrozott) lesz. A kapcsolat nlkli webalkalmazsok tmogatst ezzel
a fggvnnyel vizsglhatjuk:
function supports_offline
() {
return! !window.applicationCache;
)
Ezt a fggvnyt sem kell magunknak megrnunk: a kapcsolat nlkli web

alkalmazsok tmogatsnak szlelsre is hasznlhatjuk a Modernizr knyv
trat (lsd a "Modernizr: egy HTML5-szlel knyvtr" cm rszt a fejezet
elejn):
(Modernizr.applicationcache) {
l l A window. applicationCache elrhet!
) else {
l l nincs elrhet beptett tmogats a kapcsolat nlkli munkhoz : (
if
2. fejezet
A HTML5-kpessgek szlelse l 47
Megjegyzend, hogy a JavaScript megklnbzteti a kis- s nagybetket.

A Modernizr jellemzjt applicationcache-nek hvjk (csupa kisbetvel),
a DOM-tulajdonsg neve azonban window. applicationCache (nagy C-vel
a "Cache" sz elejn).
Helymeghatrozs
A helymeghatrozs (geolokci) annak a mvszete, hogy kidertsk, hol
tartzkodunk a Fldn, s (ha kvnjuk) megoszthassuk ezt az informcit
azokkal, akikben megbzunk. A tartzkodsi helynket sokflekppen ki le
het derteni - az IP-cmnkbl; a drt nlkli hlzati kapcsolatunkbl; ab
bl, hogy a mobiltelefonunk melyik adtoronnyal ll ppen kapcsolatban;
vagy egy GPS-eszkz segtsgve!, amely a Fld krl kering mholdaktl
kapott informcik alapjn llaptja meg a szlessgi s hosszsgi fokot.

Krds: A helymeghatrozs rsze a HTML5-nek? Mirt beszlnk rla?
Vlasz: A helymeghatrozs tmogatsnak beptse a bngszkbe

ppen most zajlik, akrcsak ms HTML5-kpessgek. Szigoran vve
a helymeghatrozst a HTML5-munkacsoporttl fggetlen Geolocation
Working Group (http:!lwww.w3.org/2008/geolocation) szabvnyostja.
n ennek ellenre szt ejtek a helymeghatrozsrl ebben a knyvben,
merr rsze a Web jelenleg is zajl evolcijnak.
A helymeghatrozs tmogatsnak feldertse az l. szlelsi mdszerrel (lsd

az "szlelsi mdszerek " cm rszt a fejezet elejn) trtnik. Ha a bngsznk
tmogatja a Geolocation API-t, a globlis navigator objektum rendelkezni
fog egy geolocation nev tulajdonsggaL Arnennyiben a bngsz nem
tmogatja a helymeghatrozs programozsi fellett, a geolocation tulaj
donsg undefined (nem meghatrozott) lesz. A helymeghatrozs tmoga
tst ezzel a fggvnnyel vizsglhatjuk
function supports_geolocation ( ) {
return ! ! navigator .geolocation;
48
l A HTML5-kpessgek szlelse
2.
fejezet
Ezt a fggvnyt sem kell magunknak megrnunk: a Geolocation API tmo

gatsnak szlelsre is hasznlhatjuk a Modernizr knyvtrat (lsd a "Mo
if (Modernizr.geolocation) {
l l Dertsk ki, hol vagyunk!
) else {
l l nincs elrhet beptett tmogats a helymeghatrozshoz : (
)
Akkor sincs minden veszve, ha a bngsznk nem tmogatja beptve a hely

meghatroz API-t. A Gears
(http:lltools.google.comlgearsl) egy nylt forrs
bngszbvtmny a Google-tl, amely Windows, Mac, Linux, Windows

Mobile s Android rendszeren is mkdik, s szmos szolgltatst knl
azoknak a rgebbi bngszknek, amelyek nem tmogatnak minden csillog
villog jdonsgot, amelyrl ebben a fejezetben szt ejtettnk. AGears kn
latnak rsze egy helymeghatroz API is- igaz, nem a navigator.geo
location API, de ugyanazt a clt szolglja.
Lteznek konkrt eszkzkre rt helymeghatroz API-k is, az olyan mo

biltelefon-rendszerek szmra, mint a BlackBerry, a Nokia, a Palm vagy az
OMTP BONDI.
A 6. fejezetben kimert rszletessggel fogjuk trgyalni ezeknek a kln
fle API-knak a hasznlatr.
Bevitelielem-tpusok
Ismerjk a webes rlapokat, igaz? Ltrehozunk egy <form> elemet, hozz
adunk nhny <input type="text"> elemet, esetleg egy <input type=
"password"> mezt, s egy <input type="submit"> gombbal tesszk
teljess a mvnket.
Nos, ez sznalmasan kevs. A HTMLS a beviteli elemeknek tbb mint
egy tucat j tpust hatrozza meg, amelyeket felhasznlhatunk az rlap
jainkon:
<input type="search''>
A keresmezket lsd:
2.
fejezet
http:llbit.fyl9mQt5C.
A
HTML5-kpessgek szlelse l
49
<input type="number">
A lptetmezket lsd: http://bit.lylaPZHjD.

<input type="range">
A csszkkat lsd: http://bit.fyldmLiRr.

<input type="color">
A sznvlasztkat lsd: http://bit.fylbwRcMO.

<input type="tel">
A telefonszmokat lsd: http://bit.fylamkWLq.

<input type="url">
A webcmeket lsd: http://bit. fylcjKb3a.

<input type="email">
Az e-mail cmeket lsd: http://bit.fylaaDrgS.

<input type="date">
A dtumvlaszt naptrakat lsd: http:!lbit.fylc8hL58.

<input type="month">
A hnapvlasztkat lsd: http://bit.fylcDgHRI

<input type="week">
A htvlasztkat lsd: http:llbit.fylbR3r58.

<input type="time">
Az idblyegeket lsd: http:llbit.fy!bjMCMn.

<input type="datetime">
A precz, abszolt dtum/idblyegeket lsd: http://bit.fylc46zVW.

<input type="datetime-local">
A helyi dtumokat s idpontokat lsd: http:llbit.fylaziNkE.

A HTML5 bevitelielem-tpusainak feldertse a 4. szlelsi mdszerrel (lsd
az "szlelsi mdszerek" cm rszt a fejezet elejn) trtnik. Elszr ltreho
zunk egy <input> ldemet a memriban:
var i= document. createElement ("input");
Minden <input> elemnek a "t ext" az alaprtelmezett tpusa. Ez ltfontos

sg, ezrt jl jegyezzk meg.
A kvetkez lps, hogy az <inp ut> ldern ty p e jellemzjt arra a be
vitelielem-tpusra lltjuk, amelynek a ltezst ki szeretnnk derteni:
i. setAttribute ("type", "color'');
50
2. fejezet
Ha a bngsznk tmogatja az adott bevitelielem-tpust, a type tulajdonsg

megrzi az ltalunk belltott rtket, ha azonban nem, a bngsz figyelmen
kvl hagyja azt, s a type tulajdonsg rtke tovbbra is "text" lesz:
return i. type !
==
"text";
Ahelyett, hogy magunk rnnk meg 13klnbz fggvnyt, a HTML5-ben

meghatrozott sszes j bevitelielem-tpus szlelsre hasznlhatjuk a Mo
dernizr knyvtrat is (lsd a "Modernizr: egy HTML5-szlel knyvtr"
cm rszt a fejezet elejn). A Modernizr egyetlen <input> elemet hasznost
jra mind a 13bevitelielem-tpus tmogatsnak szlelsre, majd felpt egy
Modernizr.inputtypes nev hasttblt, amely 13 kulcsot tartalmaz
(a HTML5 type jellemzit), valamint 13logikai rtket (true, ha a beviteli

elem tmogatott, s false, ha nem):
if (!Modernizr.inputtypes.date) (
llnincs elrhet beptett tmogats az <input type="date ">-hez : (
llesetleg rjuk meg magunk
llaDojo
llvagy a j Query segtsgvel
)
Helyrz szveg
Az j tpus beviteli elemek mellett a HTML5 tbb apr jtst is tartalmaz
a meglev rlapokhoz. Az egyik ilyen j szolgltats, hogy helyrz szveget
tehetnk egy beviteli mezbe. A helyrz szveg addig lesz lthat a beviteli
mezben, amg a mez res, s nincs rajta a fkusz. Amint azonban a beviteli
mezre kattintunk (vagy a tabultorbillentyvel lltjuk r a fkuszt), a hely
rz szveg eltnik. Ha nehezen tudjuk magunk el kpzelni a dolgot, a 9.
fejezet elejn, a "Helyrz szveg" cm rszben tallunk hozz kpernyfel
vteleket.
A helyrz szvegek tmogatsnak feldertse a 2. szlelsi mdszerrel
(lsd az "szlelsi mdszerek " cm rszt a fejezet elejn) trtnik. Ha a bn
gsznk tmogatja a helyrz szvegeket a beviteli mezkben, az ltala ltre
hozott, az <input> elemet jelkpez DOM-objektum rendelkezni fog egy
placeholder (helyrz) nev tulajdonsggal (mg akkor is, ha a HTML
kdban nem szerepeltetnkplaceholder jellemzt). Amennyiben a bngsz
2. fejezet
nem tmogatja a helyrz szvegeket, az <input> elem szmra ltrehozott

DOM-objektumnak nem lesz placeholder tulajdonsga. A helyrzk t
mogatst az albbi mdon vizsglhatjuk
function supports_input_placeholder
() {
var i= document. createElement ('input');

return 'placeholder' in i;
)
Ezt a fggvnyt sem kell magunknak megrnunk: a helyrz szvegek tmo

gatsnak szlelsre is hasznlhatjuk a Modernizr knyvtrat (lsd a "Mo
(Modernizr.input.placeholder) {
l l A helyrz sz vegnek mr lthatnak kell lennie!
) else {
l l a helyrz szvegek nem tmogatottak : (
l l parancskdot alkalmaz megoldsra kell szor tkoznunk
if
Automatikus rlapfkusz
Sok webhely JavaScript-kdot hasznl arra, hogy a fkuszt automatikusan a
webes rlapok els beviteli mezjre lltsa. A Google.com nyitoldala pl
dul automatikusan a keresmezre lltja a fkuszt, hogy a keresett kifeje
zst azonnal berhassuk, anlkl, hogy elbb a mezbe kellene kattintanunk
Ez a legtbb ember szmra knyelmes, de a gyakorlott felhasznlknak vagy
a klnleges ignyekkel br felhasznlknak idegest lehet: ha lenyomjuk a
szkz billentyt, arra szmtva, hogy ezzel grgetjk az oldalt, csaldni fo
gunk, mert a fkusz mr egy rlapmezben tallhat, ezrt az oldal nem fog
lejjebb grdlni. (Helyette egy szkzt runk a beviteli mezbe.) Ha egy m
sik beviteli mezre lltjuk a fkuszt, mikzben az oldal mg tltdik, a web
hely amofkusz-kezel parancskdja "segt", s visszateszi a fkuszt az eredeti
beviteli mezbe, amint az oldal teljesen betltdtt, gy megszaktja a mun
knkat, s rossz helyre fogunk gpelni.
Mivel az automatikus fkuszllts JavaScript-kd segtsgvel trtnik,
nehz lehet minden szlssges esetet kezelni, s nem sok lehetsge marad
azoknak, akik nem akarjk, hogy a weboldal " ellopja " a fkuszt.
A problma megoldsra a HTML5 egy autofocus nev jellemzt vezet
be a webes rlapok minden vezrlje szmra. Az autofocus jellemz pon52 l A HTML5-kpessgek szlelse
2. fejezet
tosan azt teszi, amire a neve utal: a fkuszt egy adott beviteli mezre lltja.
Mivel azonban ez csak lerkd, s nem parancskd, a viselkedse minden
webhelyen azonos. Ezen kvl a bngszgyrtk (illetve a bvtmnyek k
szti) mdot adhatnak a felhasznlknak az automatikus fkuszls kikap
csolsra.
Az autofkusz tmogatsnak feldertse a 2. szlelsi mdszerrel (lsd az
szlelsi
mdszerek " cm rszt a fejezet elejn) trtnik. Ha a bngsznk
"
tmogatja a webes rlapok vezrlinek automatikus fkuszlltst, az ltala
ltrehozott, az <input> elemet jelkpez DOM-objektum rendelkezni fog
egy autofocus nev tulajdonsggal (mg akkor is, ha a HTML-kdban
nem szerepeltetnk autofocus jellemzt). Amennyiben a bngsz nem
tmogatja a webes rlapvezrlk autofkusz szolgltatst, az <input> elem
szmra ltrehozott DOM-objektumnak nem lesz autofocus tulajdonsga.
Az automatikus fkuszllts tmogatst az albbi fggvnnyel vizsgl
hatjuk:
function supports input_autofocus
var i
() {
document. createElement ('input' ) ;
return 'autofocus' in i;
Ezt a fggvnyt sem kell magunknak megrnunk: az rlapmezk aurafkusz

tmogatsnak szlelsre is hasznlhatjuk a Modernizr knyvtrat (lsd a
"
"Modernizr: egy HTML5-szlel knyvtr cm rszt a fejezet elejn):
(Moderni.zr. input. autofocus) {
l l Az automatikus fkusz mkdik!
) else {
l l nincs autofkusz-tmogats : (
l l parancskdot alkalmaz megoldsra kell szortkoznunk
if
Mikroadatok
A mikroadatok
(http://bit.lylckt9Rj)
szabvnyos mdot adnak arra, hogy to
vbbi, jelentssei br elemekkel bvtsk a weboldalainkat. Mikroadatok

segtsgvel pldul bejelenthetjk, hogy egy bizonyos fnykp egy adott
Creative Commons felhasznlsi engedly hatlya al tartozik. Ahogy a 10. feje
zetben ltni fogjuk, mikroadatokat hasznlva "Nvjegy" oldalt is ltrehozhatunk,
2.
fejezet
a bngszk, bngszbvtmnyek s keresprogramok pedig a HTML5-s

mikroadatkdot egy vCard-d alakthatjk, ami az elektronikus nvjegykr
tyk szabvnyos formtuma. Ezenkvl sajt mikroadat-sztrakat is megha
trozhatunk
A HTML5-mikroadatok szabvnya HTML-kdot (elssorban a keres
matorok szmra) s DOM-fggvnyeket (fknt a bngszk szmra) is
tartalmaz. Mikroadatkdot nyugodtan beilleszthetnk a weboldalainkba,
krt nem okozunk vele - csupn nhny jl elhelyezett jellemzrl van sz,
s azok a keresk, amelyek nem ismerik a mikroadat-jellemzket, egyszeren
figyelmen kvl hagyjk ket. Ha viszont a DOM-on keresztl kell elrnnk
vagy mdostanunk mikroadarokat, ellenriznnk kell, hogy a bngsz t
mogatja-e a mikroadatok DOM API-jt.
A HTML5-mikroadatok API-tmogatsnak feldertse az l. szlelsi
mdszerrel (lsd az "szlelsi mdszerek" cm rszt a fejezet elejn) trtnik.
Ha a bngsznk tmogatja a HTML5 MicrodataAPI-t, a globlis document
objektum rendelkezni fog egy get Items ( ) nev fggvnnyeL Amennyiben
a bngsz nem tmogatja a mikroadatokat, agetitems () fggvny nem
meghatrozott lesz. A tmogatst az albbi mdon vizsglhatjuk:
function supports_microdata_api ( ) {
return! !document.getitems;
)
A Modernizr knyvtr egyelre nem kpes a Microdata API szlelsre, ezrt

mindenkppen egy a fentihez hasonl fggvnyt kell hasznlnunk.
Tovbbi olvasmnyok
Szabvnyok s egyb lersok:
A <canvas> elem (http:llbit.lyi9]Hz0j)

A <v ideo> elem (http://bit.ly/a3kpiq)
< i nput> -tpusok
(http://bit.ly/akweH4)
Az <input placeholder> jellemz (http:llbit.lylcaGLBN)

Az <input autofocus> jellemz (http:llbit.lyldbJFj4)
HTML5-trol (http:lldev.w3.orglhtml5/webstoragel)
Webmunksok (http://bit.ly/9jheoj)
Kapcsolat nlkli webalkalmazsok (http://bit.lyldBZgzX)
54 l A HTML5-kpessgek szlelse
2.
fejezet
A Geolocation helymeghatroz API (http:llwww.w3.org/TR!geolocation
APII)
JavaScript-knyvtrak:
A Moclernizr HTML5-szlel knyvtr (http://www.modernizr.com/)

A geo.js helymeghatroz API-burkol (http:llcode.google.comlplgeo-location
javascript)
Egyb cikkek s oktatanyagok
Vicleo for Everybocly! (http:llcamendesign.comlcode/video_for_everybody)

"
"A gentie introcluction to vicleo encocling (http:lldiveintomark.orgltagl
giv e)
"
"Vicleo type parameters (http://wiki.whatwgorglwiki/Video_type_parameters)
Jelen ktet Fggelke
3. fejezet
Mit jelent mindez?
Ugorjunk fejest!
Ebben a fejezetben fogunk egy HTML-oldalt, amellyel az gvilgon semmi
gond nincs, s javtunk rajta. Egyes rszei rvidebbek, msok hosszabbak
lesznek - de az egsz sokkal olvashatbb fog vlni. Lenygz lesz!
A krdses oldal ezen a cmen tallhat: http:lldiveintohtml5.orglexamples/
blog-original.html. Olvassuk t tzetesen. ljk t. Szeressk. Nyissuk meg
egy j bngszlapon, s vissza se jjjnk, amg legalbb egyszer ki nem ad
tuk a "Forrs megtekintse" parancsot.
A dokumentumtpus
Az oldal forrsa gy kezddik:
<! DOCTYPE
html
PUBLIC
//W3C//DTD XHTML l.
Strict//EN
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
Ezt hvjk dokumentumtpusnak (doctype). A dokumentumtpusnak hossz

-fekete mgitl sem mentes-trtnete van. Az Internet Explorer 5 for Mac
fejlesztse kzben a Microsoft meglep problmval tallta magt szemben.
A bngsz kszl vltozata annyit fejldtt a szabvnyok tmogatsa tern,
hogy a rgebbi oldalakat tbb nem tudta megfelelen megjelenteni. Ponto
sabban, az oldalak (a szabvnyok szerint) helyesen jelentek meg, a felhaszn
lk viszont ppen hogy azt vrtk, hogy a bngsz helytelenl kpezze le
azokat. A weboldalakat ugyanis az akkori piacvezet bngszk-elssorban
a Netscape 4 s az Internet Explorer 4 - trkkjeihez igazodva rtk. Az lES/
Mac viszont annyira fejlett volt, hogy tulajdonkppen tnkretette a Webet.
3.
fejezet
Mitjelent mindez? l
57
A Microsoft jszer megoldssal llt el. Az lES/Mac egy oldal lekpezse

"
eltt megvizsglta a "dokumenrumtpust , ami jellemzen a HTML-forrs
els sorban szerepel (mg a <html> elem eltt). A rgebbi oldalak (amelyek
a rgi bngszk lekpezsi trkkjeire tmaszkodtak) ltalban egyltaln
nem hatroztk meg a dokumentum tpust- ezeket az oldalakat az lES/Mac
gy jelentette meg, minr a rgebbi b ngszk. Ahhoz, hogy az j szabvny
"
tmogats "letbe lpjen , a weboldalak szerzinek kifejezetten meg kellett
adniuk a megfelel dokumenrumtpust a <html> elem eltt.
Az tlet futtzknt terjedt, s hamarosan minden fonrosabb b ngsz
"
kt lekpezsi mddal rendelkezett: a "trkkz mddal (quirks mode) s
"
a "szabvnykvet mddal (standards mode). A dolgok azonban termsze
tesen - hiszen a Webrl van sz - hamarosan kicssztak az rintettek kez
bl. Kzvetlenl a Mozilla bngsz 1.1-es vltozatnak megjelense eltt
a Mozilla fejleszti szrevettk, hogy a bngsz olyan oldalakat is szabvny
kvet mdban jelent meg, amelyek valjban egy bizonyos trkkre tmaszkod
nak. A Mozilla lekpezmotorjt nem sokkal korbban javtottk ki, hogy
kikszb ljk ezt a trkkt, s oldalak ezrei vltak egyszerre mkdskpte
"
lenn. gy szletett meg- s ez nem vicc- a "majdnem szabvnykvet md

(almost standards mode).
"
"Activating Browser Modes with Doctype (http:llhsivonen.iki.fi/doctypel)
cm korszakalkot mvben Henri Sivonen gy foglalja ssze a klnbz

lekpezsi mdokat:
Trkkz md
A trkkz mdban a bngszk megsrtik a mai webformtum-szab
vnyok elrsait, hogy elkerljk azoknak az oldalaknak a mkds
kptelenn vlst, amelyeket az 1990-es vek vgn uralkod gyakor
latot kvetve rtak.
Szabvnykvet md
A szabvnykvet mdban a bngszk a jlformlt dokumentumokat
igyekeznek a szabvnyokban lertaknak megfelelen megjelenteni, ameny
nyire ezt az adott bngsz megvalstsa megengedi. A HTMLS ezt
"
a mdot "nem trkkz mdnak (no quirks mode) hvja.
Majdnem szabvnykvet md
A Firefox, a Safari, a Chrome, a (7.5-s vagy jabb) Opera s az lES ren
delkezik az gynevezett "majdnem szabvnykvet mddal" is, amely
58
l Mitjelent mindez?
3.
fejezet
a tblzatcellk fggleges mretezst nem szigoran a CSS2-szabvny

szerint, hanem hagyomnyos mdon valstja meg. A HTML5 ezt
"
a mdot "korltozott trkkz mdnak (limited quirks mode) hvja.
,,,,
Henri cikknek a tbbi rszt is rdemes elolvasni, mert n itt
jelentsen leegyszerstettem. Pldul egyes rgebbi dokumentumtpusok
mg az IE5/MAC-ben sem kapcsoltk be a szabvnyok tmogatst. Ezen

kvl a trkkk szma idvel ntt, akrcsak azok a dokumentumtpu
sok, amelyek trkkz mdra knyszertettk a bngszket. Amikor
legutbb megprbltam megszmolni, 5 dokumentumtpust talltam,
amely "majdnem szabvnykvet" mdot vltott ki, s 73-at, amely trk
kzt. Biztosan kihagytam persze nhnyat, s akkor mg nem is beszl
tem arrl, hogy mit csinl az Internet Explorer 8, hogy vltani tudjon
a ngy- igen, ngy! - klnbz lekpezsi mdja kztt. Van rla egy
folyamatbra a http:llhsivonen.iki.fi!doctypelie8-mode.png cmen. Pusztt
suk el. Vessk mglyra.
Hol is tartottunk? Ja, persze, a dokumentumtpusnl:
<' DOCTYPE
html
XHTML l. 0 Strict//EN"
l /www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd ">
PUBLIC "-//W3C//DTD
"http:
Ez trtnetesen egyike annak a 15 dokumenrumtpusnak, amely szabvnyk

vet mdot vlt ki minden modern bngszben. Nincs vele semmi gond.
Ha tetszik, tartsuk meg. Vagy vltoztassuk a HTML5 dokumentumtpusra,
ami rvidebb s bartsgosabb, s szintn szabvnykvet mdban kezeli
minden mai bngsz.
A HTML5 dokumentumtpus gy fest:
<! DOCTYPE
html>
Ennyi az egsz. Mindssze 15 karakter. Annyira egyszer, hogy sajt kezleg

is begpelhetjk, s nem fogjuk elrontani.
3. fejezet
Mitjelentmindez? l 59
Lerkd professzor azt mondja

A dokumentumtpusnak a HTML-fjl legels sorban kell szerepelnie.
Ha brmi ms van eltte -akr egyetlen res sor -, egyes bngszk
gy fogjk kezelni az oldalt, mintha egyltaln nem hatrozta volna
meg a dokumentumtpust. Dokumentumtpus nlkl pedig a bngsz
trkkz mdban jelenti meg az oldalt. Ezt a hibt nagyon nehz sz
revenni, mert a fls trkzk ltalban nem szmtanak a HTML-ben,
gy a szemnk hajlamos tsiklani felette - ebben az esetben viszont
nagyon fontos!
A gykrelem
A HTML-oldalak egymsba gyazott elemek sorbl llnak, teht egy oldal
szerkezete olyan, mint egy fa. Egyes elemek "testvrek", mint kt g, amely
ugyanannak a fnak a trzsbl ered. Olyan elemek is vannak, amelyek ms
elemek "gyermekei", mint amikor egy vkonyabb g hajt ki egy vastagabbL
(Ez a msik irnyban is rvnyes: azokat az elemeket, amelyek ms elemeket
tartalmaznak, a kzvetlen gyermekelemeik "szlcsompontjnak", illetve az
"
"
"
"unokik "seinek h vjuk.) A gyermektelen elemek a "levlcsompontok .
A legkls elem, amely az oldalon tallhat sszes tbbi elem se, a "gykr
elem". A HTML-oldalak gykreleme mindig a <html>.
A mintaoldalunkon (http:l!diveintohtm/5. orglexampleslblog-original. htm/)

a gykrelem gy fest:
<html xmlns= "http:
l/www. w 3 .org/1999/xhtml
lang="en
xml:lang=en">
Ezzel a kddal nincs semmi gond. Megint csak azt mondhatom, ha tetszik,
tartsuk meg, hiszen rvnyes HTML5-kd. Egyes rszei ugyanakkor mr nem
szksgesek a HTML5-ben-ha ezeket eltvoltjuk, nyerhetnk nhny bjtot.
Az els dolog, amirl szt kell ejtennk, az xmlns jellemz. Ez mg az
XHTML l. O rksge. Azt mondja a bngsznek, hogy az oldalon rallhat
elemek az XHTML nvtr (http://www.w3.org/1999/xhtml) rszei.
A HTML5-ben azonban az elemek mindig ebben a nvtrben tallhatk,
60 l Mitjelent mindez?
3.
fejezet
ezrt ezt nem kell kifejezetten bejelentennk. A HTML5-oldalaink pontosan

ugyangy fognak mkdni minden modern bngszben, akr jelen van ez
a jellemz, akr nincs.
Ha az xmlns jellemzt elhagyjuk, ezt a gykrelemet kapjuk:
<html lang= "en" xml: lang="en">
Mindkt jellemz- a lang s az xml: lang- amelyet itt ltunk, a HTML

"
"
oldal nyelvt hatrozza meg. (Az en az "English , vagyis "angol rvidtse.*)
Mirt kell kt jellemz ugyanarra a clra? Ez megint csak az XHTML rksge,
a HTML5-ben viszont csak a lang jellemznek van hatsa. Az xml: lang
jellemzt is megtarthatjuk, ha akarjuk, de ha gy tesznk, gyelnnk kell r,
hogy ugyanaz legyen az rtke, mint a lang jellemznek
Az XHTML-re, illetve onnan val tlls megknnytse rdekben a szer
zk megadhatnak egy nvtr s eltag nlkli jellemzt az "xml:lang"
krnyezeti nvvel a HTML-dokumentumok HTML-elemeire, de ilyen
jellemzt csak akkor szabad megadni, ha egy nvtr nlkli lang jel
lemz szintn szerepel, s mindkt jellemznek ugyanaz az rtke, ha
a kis- s nagybetket nem megklnbztetve, ASCII-karakterekknt
hasonltjuk ssze ket. A nvtr s eltag nlkli, az "xml:lang" krnye
zeti nvvel szerepl jellemznek nincs hatsa a nyelvi feldolgozsra.
Kszen llunk ht, hogy ejtsk a msodik jellemzt? Semmi baj, csak enged
jk el. Egyik kz, msik kz... mehet! gy ez a gykrelem marad:
<html lang="en">
Errl nincs is tbb mondanivalm.
A <head> elem
A gykrelem els gyermeke ltalban a <head> elem. A <head> elem
metaadatokat tartalmaz - informcikat az oldalrl, nem pedig az oldal
Nem angolul runk? Keressk meg az lralunk hasznlc nyelv kdjr a http:llwww.w3.org/
lnternationallquestionslqa-choosing-langrtage-tags cmen.
3. fejezet
Mitjelent mindez? J 61
szvegtrzsrl. (Az oldal trzse- nem meglep mdon- a <body> elemben

tallhat.) Maga a <head> elem elg unalmas, s a HTML5-ben sem esett
t semmilyen rdekes vltozson. Ami izgalmas, azt a <head> elemen bell
talljuk Ehhez ismt a mintaoldalunkhoz fordulunk:
<head>
<me ta http-equi v"Content-Type" content "text/html; charsetutf-8" />
<ti tle>My Weblog</ title>
<link rel"stylesheet" type "text/ess" href"style-original.ess" />
<link rel"al ternate" type"application/atom+xml"
ti tle"My Weblog feed"
href"/feed/" />
<link rel"search" type"application/opensearchdescription+xml"
ti tle"My Weblog search"
href"opensearch.xml" />
<link rel "shortcut icon" href
"l favicon.ico" />
</head>
Elszr is lssuk a <meta> elemet!
Karakterkdols
Amikor azt ltjuk, hogy "szveg", valsznleg azokra a " karakterekre s je
lekre" gondolunk, amelyeket "a szmtgp kpernyjn ltunk ". A szmtg
pek azonban nem foglalkoznak karakterekkel s jelekkel, csak bitekkel s bj
tokkal. Minden szveg, amir a szmtgp kpernyjn ltunk, valjban egy
adott karakterkdolssal troldik. Sokfle klnbz karakterkdols ltezik:
vannak, amelyeket bizonyos nyelvekhez igaztottak, pldul az oroszhoz, a k
naihoz vagy az angolhoz, mg msokat tbbfle nyelvhez is hasznlhatunk.
Nagy vonalakban: a karakterkdols bizrosrja a megfelelterst a kpernyn
ltott szveg s a szmtgp memrijban, illetve lemezn trolt dolog kztt.
A valsgban ez persze bonyolultabb. Sok karaktert tbb kdtblban is
megrallunk, de az egyes kdolsok ms-ms bjtsorozatot hasznlharnak
ahhoz, hogy ezeker a karaktereket a memriban vagy a lemezen troljk.
A karakterkdolsra teht a szveg egyfajta visszafejt kulcsaknt gondolha
runk. Amikor valaki egy bjtsorozatot ad t neknk, s azt llrja rla, hogy
"
"szveg , tudnunk kell, hogy milyen karakterkdolst hasznlt, hogy a bj
rokat visszafordrhassuk karakterekre, s megjelenthessk (vagy feldolgoz
hassuk stb.) azokat.
62
l Mitjelent mindez?
3.
fejezet
Hogyan llaptja meg a bngsz egy webkiszolgltl kapott bjtfolyam

karakterkdolst? rlk a krdsnek. Ha ismerjk a HTTP-fejlceket, ta
ln mr lttunk ilyen fejlcet:
Content-Type: text/html; charset; "utf-8"
Ez rviden annyit tesz, hogy a webkiszolgl gy vli, hogy egy HTML

dokumentumot kld neknk, s hogy a dokumentum az UTF-8 karakterk
dolst hasznlja. Sajnos a Vilghl szvevnyben nagyon kevs weboldal
szerzje tartja tnylegesen az irnytsa alatt a HTTP-kiszolglt. Gondol
junk pldul a Bloggerre (http://www.blogger.com}: a tartalmat nll szerzk
szolgltatjk, de a kiszolglkat a Google zemelteti. A HTML 4 ezrt m
dot adott r, hogy magban a HTML-dokumentumban megadhassuk a ka
rakterkdolst. Valsznleg ilyesmit is lttunk mr:
<meta http-equiv;"Content-Type" content;"text/html; charset;utf-8">
Ez rviden azt jelenti, hogy a a weboldal szerzje gy vli, hogy egy HTML
dokumentumot ksztett, s ehhez az UTF-8 karakterkdolst hasznlta.
Mindkt emltett mdszer mkdik a HTML5-ben is, a HTTP-fejlcben
megadott karakterkdols viszont elnyt lvez, s - ha szerepel az oldalon fellbrlja a <meta> elemet. HTTP-fejlcet azonban nem mindenki llthat
be, ezrt a
<meta>
cmke mg mindig ltezik- st, a HTML5-ben valj
ban kicsit egyszersdtt is. Most gy nz ki:

<meta char set;"utf-8" />
Ez minden bngszben mkdik. De hogyan szletett meg ez a rvid forma?

me a legjobb magyarzat, amit talltam (http:lllists.w3.org/Archives/Publicl
public-html/2007]ul/0550.html}:
A <meta char set=""> jellemzkombinci mellett az az rv szl,
hogy a felhasznli prograrnak (a bngszk) mr megvalstottk, mert

a felhasznJk hajlamosak lehagyni az idzjeleket. Pldul:
<META HTTP-EQUIV;Content-Type CONTENT;text/html; charset;IS0-8859-1>
Ha nem hisszk el, hogy a bngszk mr alkalmazzk ezt a megoldst, ta

llunk nhny
<meta
charset>-tesztesetet is (http://simon.html5.orgltestl
htmllparsinglencoding).
3. fejezet
Mitjelent mindez? l 63

Krds: n soha nem hasznlokfurcsa karaktereket. Akkor is be kelljelen
tenem az ltalam hasznlt karakterkdolst?
Vlasz: Igen! Mindig, minden HTML-oldalunkon clszer megadni
egy karakterkdolst, mert ennek elmulasztsa biztonsgi rst thet az
oldalon (http://code.google. comlpldoctypelwiki!ArticleUtj7).
sszefoglalva: a karakterkdols bonyolult, s a helyzeten nem knnytett az

a sok-sok rosszul megrt szoftver sem, amit az vtizedek sorn a "msols s
"
beilleszts mdszerrel dolgoz fejlesztk hasznltak. Mindig, minden HTML
dokumentumban adjuk meg a karakterkdolst, klnben prul jrunk. Mind
egy, hogy a Content-Type HTTP-fejlc, a <meta
http-equiv> vagy
a rvidebb <meta char set> cmke segtsgve!, de mindenkppen tegyk

meg. A Web elre is kszni.
Viszonyler elemek
A szokvnyos hivatkozsok (<a href>) egyszeren egy msik oldalra mu
tatnak. A viszonyler elemek magyarzzk meg, hogy mirt mutatunk egy
msik oldalra. Lnyegben befejezik a mondatot: "Azrt mutatok erre a m
sik oldalra, mert...
"
...az egy stluslap, amely azokat a CSS-szablyokat tartalmazza, amelye

ket a bngsznek erre az oldalra alkalmaznia kell.
...az egy hrfolyam, amely ugyanazt tartalmazza, mint ez az oldal, de

szabvnyos elfizethet formtumban.
...az ennek az oldalnak egy msik nyelvre fordtott vltozata.

.. az ugyanazt tartalmazza, mint ez az oldal, de PDF formtumban.
.
...az a kvetkez fejezete egy elektronikus knyvnek, amelynek ez is egy

oldala.
s gy tovbb. A HTML5 a viszonyler elemeket kt csoportba sorolja (http:/1
bit.ly!d2cbiR):
64
l Mitjelent mindez?
3.
fejezet
A viszonyler elemekkel ktfle hivatkozs hozhat ltre. A kls er
forrsra mutat hivatkozsok olyan erforrsokra mutatnak, amelyek

az adott dokukentumot egsztik ki, mg ahiperhivatkozsok ms do
kumentumokra mutat kapcsok. [. ..]
A kls erforrsra mutat hivatkozsok pontos viselkedse a konkrt
kapcsolattl fgg, amelyet az adott hivatkozstpusra meghatroztak.
Az imnti pldk kzl csak az els (rel= "stylesheet ") kls erforrsra
mutat hivatkozs, a tbbi ms dokumentumokhoz kapcsold hiperhivat
kozs. Ez utbbi hivatkozsokat tetszs szerint kvethetjk, vagy nem kvet
hetjk, de az aktulis oldal megtekintshez nincs szksg rjuk.
A viszonyokat a leggyakrabban az oldal <head> rszben szerepl <link>
elemek adjk meg. Egyes viszonyok az <a> elemekben is megadhatk, de ez
mg a megengedett esetekben is ritka. A HTML5 az <area> elemekben is
megenged bizonyos viszonyler elemeket- amit mg ritkbban szoktak kihasz
nlni. (A HTML 4 nem engedlyezte a rel jellemzket az <area> elemek
ben.) A viszonyler elemek teljes tblzata megtekinthet a http://bit. ly/a3nsqi
cmen. Itt ellenrizhetjk, hogy hol hasznlhatjuk az egyes rel-rtkeket.

Krds: Egyni viszonyler elemeket is ltre lehet hozni?
Vlasz: j viszonyler elemekre - gy tnik - vg nlkl szletnek
tletek. Megakadlyozand, hogy a felhasznlk a sajt fejk utn men
jenek, a WHAT munkacsoport jegyzket tart fenn az elfogadsra be
nyjtott j rel-rtkekrl (http://wiki.whatwg.orglwiki/RelExtensions),
s meghatrozta az engedlyezsi eljrs pontos menett.
rel= stylesheet
Nzzk meg az els viszonyler elemet a mintaoldalunkon:

<link rel;"stylesheet" href; "style-original. ess" type;"text/ess" />
Ez a leggyakrabban hasznlt viszonyler elem a vilgon (sz szerint). A

<link rel= "stylesheet ">nll fjlban trolt CSS-szablyokra mutat.
A HTML5-ben ezen egy olyan apr finomrst vgezhetnk, hogy elhagyjuk

3.
fejezet
Mitjelent mindez? l
65
a type jellemzt. A Weben csak egy stluslapnyelv ltezik, a CSS, ezrt

a type jellemznek ez az alaprtelmezett rtke:
<link rel= "stylesheet" href= "style-original. ess"
l>
Ez minden bngszben mkdik. (Egy nap persze valaki feltallhat egy j

stluslapnyelvet, de ha ez bekvetkezik, csak annyit kell majd tennnk, hogy
visszatesszk a type jellemzt.)
rel= alternate
Folytassuk a mintaoldalunkat:
<link rel="alternate"
type="application/atorn+xrnl"
title="My Weblog feed"
href=
"lfeed/" l>
Ez a viszonyler elem ugyancsak meglehetsen gyakori. A <link
rel=
"alternate ">a type
jellemzben az RSS vagy Atom mdiatpussa l kom

binlva az gynevezett "automatikus hrfolyam-feldertst" teszi lehetv, va
gyis a segtsgvel az olyan hrfolyamolvask, mint a Google Reader, szlel
hetik, ha egy webhely hrfolyamot nyjt a legfrissebb cikkeibL A legtbb
bngsz azzal is tmogatja az automatikus hrfolyam-feldertst, hogy egy
klnleges ikont jelent meg az URL mellett. (A rel= "stylesheet" tpus
tl eltren itt szmt a type jellemz, ezrt ne hagyjuk el!)
A rel="alternate" viszonyler elemet mindig furcsa mdon keverve
hasznltk, mg a HTML 4-ben is. A HTML5-ben egyrtelmbb tettk s
kibvtettk a meghatrozst, hogy pontosabban rja le a meglev webes
tartalmakat. Ahogy az imnt emltettem, a rel="alternate" s a type=
application/atom+xml
hasznlata azt jelzi, hogy az adott oldahoz Atom
hrfolyam tartozik. A rel="alternate" viszonyler elemet azonban ms

type
jellemzkkel is prosthatjuk, hogy jelezzk: a tartalom ms form
tumban, pldul PDF-knt is elrhet.

A HTML5 annak a rgi vitnak is vget vet, hogy pontosan hogyan kell
hivatkozni a dokumentumok ms nyelvre lefordtott vltozataira. A HTML
4 azt mondja, hogy a lang jellemzt kell hasznlni a rel="alternate"
viszonyler elemmel prban, hogy megadjuk a hivatkozott dokumentum
nyelvt, de ez tveds. A HTML 4 hibajegyzke ngy egyrtelm hibt sorol
fel a HTML 4 szabvnylersbl (szmos "nyomdahiba" mellett), s ezek
3.
fejezet
egyike ppen az, hogy miknt kell egy a rel= "alte rnate" elemmel hivat
kozott dokumentum nyelvt meghatrozni. (A helyes megolds - ahogy
a HTML 4 hibajegyzkben s most mr a HTML5-ben is ll- a h reflang
jellemz hasznlata.) Sajnos ezeket a hibajavtsokat soha nem ptettk be
a HTML 4 szabvnyba - mivel a W3C HTML-munkacsoportjbl mr
senki nem dolgozott tbb a HTML-en.
Egyb viszonyler elemek
HTML5-ben
rel = "archives"
(http://bit.lylclzlyG) "Azt jelzi, hogy a hivatkozott dokumentum jegyze

tek, dokumentumok vagy ms trtneti rdekessg anyagok gyjtem
nyt rja le. Egywebnapl (blog) nyitoldala pldul a rel= "archives"
segtsgvel hivatkozhat a korbbi naplbejegyzsek trgymutatjra."

rel = "author"
Ez az elem az oldal szerzjre vonatkoz informcikra mutar. Az infor

mci lehet pldul egy ma i lto: cm, br nem muszj annak lennie
- a hivatkozs mutathat egyszeren egy kapcsolati rlapra vagy egy a
szerzt bemutat oldalra ( " about the author " ) is.
rel = "external"
(http://bit.ly/dBV009) "Azt jelzi, hogy a hivatkozs egy olyan dokumen

tumhoz vezet, amely nem rsze annak awebhelynek, amelyen az aktulis
dokumentum tallhat." Azt hiszem, ezt a viszonyler elemet a Word
Press tette elszr npszerv, ahol a hozzszlk ltal beszrt hivatko
zsokra alkalmazzk
rel = "start", rel= "p rev " s rel= "next "
(http:llwww.w3.org/TR!html40Jitypes.html#type-links) Ezekkel olyan ol

dalak kztt hatrozunk meg kapcsolatokat, amelyek egy sorozat rszt
(pldul egy knyv fejezeteit vagy akr egy webnapl bejegyzseit) kpezik.
Az egyetlen, amelyet valaha is helyesen hasznltak, a rel= "next";
rel= "prev" helyett viszont mr rel= "previ ous "-t szaktak rni,
rel= "start" helyett a helytelen rel= "begi n" vagy rel= "first"
alakot hasznljk, rel= "last" helyett pedig a rel= "end "-et. Ja, s
a sajt ujjukbl szopott rel= " up" hivatkozssal mutatnak a "szl
oldalakra".
3.
fejezet
Mit jelent mindez? J
67
A HTML5 ugyanakkor tartalmazza a rel="first" alakot, amelyet

a leggyakrabban hasznltak arra, hogy azt mondjk, hogy "egy sorozat
"
els oldala (a visszamenleges megfelelsg kedvrt a rel="start"
is megmaradt), a HTML 4-hez hasonlan a re l="prev" s rel=
"next" viszonyler elemeket (ezenkvl a visszamenleges megfelel
sg kedvrt tmogatja a rel="previo us "-t), valamint a sorozat

utols tagjra mutat rel= "las t "-ot (a re l= "first" prjt) s
a rel="up" viszonyt is.
A rel="u p" leginkbb a "morzsatvonalra
"
( breadcrumb navi
gation) hasonlt, amelyen valsznleg a nyitoldalunk az els oldal, az

aktulis oldal pedig az tvonal utols eleme. A rel="up" a morzsa
tvonal utols eltti elemeknt szerepl oldalra mutat.
rel= "icon"
(http://bit.ly/diA]UP) Ez a msodik legnpszerbb viszonyler elem (http:/1

code.google. com/webstats/2005-12/linkrels. html) a re l="st ylesheet"
utn. ltalban a shortcut-tal egytt szerepel, valahogy gy:
<link rel= "shortcut icon" href= "/favicon. ico">
Minden jelentsebb bngsz tmogatja, hogy gy trsrsunk egy apr

ikont az oldalhoz, ami ltalban a bngsz cmsvjban az URL mellett
jelenik meg, vagy az oldalhoz tartoz bngszfln, vagy mindkt helyen.
Szintn jdonsg a HTML5-ben, hogy a s izes jellemzt az icon
elemmel egytt hasznlva a hivatkozott ikon mrett is jelezhetjk
(http://bit.ly/diA]UP).
rel= "license"
(http:llbit.lyl9n9Xjv) Ezt a viszonyler elemet a mikroformtumok k

zssge tallta ki. Azt jelzi, hogy "a hivatkozott dokumentum adja meg,
hogy milyen szerzi s felhasznlsi felttelek hatlya al tartozik az
"
aktulis dokumentum.
rel = "nofollow"
(http://bit.lylcGjSPi) "Azt jelzi, hogy az eredeti szerz vagy az oldal ze

meltetje nem vllal felelssget a hivatkozott dokumentumrt, vagy
hogy a hivatkozs elssorban azrt kerlt a dokumentumba, mert a kt
"
oldalhoz trsthat szemlyek zleti kapcsolatban llnak egymssal.
Ezt az elemet a Google tallta ki, s a mikroformtumok kzssge szab
"
vnyostotta. Az elgondols az volt, hogy ha a "nofollow ( "nem kve-
3.
fejezet
tend") hivatkozsok nem szmtanak a keresk oldalrangsorban (Page

Rank), akkor a levlszemetelk feladjk, hogy kretlen leveleket kldz
gessenek a blogokra. Ez hi brndnak bizonyult, de a rel="nofollow"
megmaradt, s sok npszer webnaplrendszer alaprtelmezs szerm
a rel="nofollow" viszonyt rendeli a hozzszlk ltal beszrt hivat
kozsokhoz.
rel = "noreferrer"
(http:llbit.lylcQMS]g) Azt jelzi, hogy a hivatkozs kvetsekor nem sza
"
bad informcit kiszivrogtatni a hivatkozrl (referrer)". Ezt jelenleg
egyetlen forgalomban lev bngsz sem tmogatja, de nemrg bekerlt
a WebKit-be, gy vgl meg fog jelenni a Safariban, a Google Chrame
ban s ms WebKit alap bngszkben. A rel= "noreferrer "-hez
a http:llwearehugh. comlpublic/2009104/rel-noreferrer. htm! cmen tallha
tunk egy tesztesetet.
rel
"pingback"
(http:l!bit.lylc!AGXB) Egy pingback" kiszolgl cmt adja meg.Ahogy
"
a Pingback lersban (http://hixie. chlspecslpingbacklpingback-1. O) szere
pel, a pingback rendszer arra szolgl, hogy egy webnapl automatikus
"
rtestst kaphasson, amikor ms webhelyek r mutat hivatkozst tesz
nek kzz. [.. ], vagyis fordtott hivatkozst tesz lehetv, a hivatkozsi
.
lncon felfel haladva, s nem egyszeren mlyebbre sva." A webnapl

rendszerek-elssorban a WordPress-a pingback ( visszhangrtests")
"
megvalstsval rtestik a szerzket a rjuk mutat j hivatkozsokrl,
amikor j webnapl-bejegyzst hoznak ltre.
rel = "prefetch"
(http:!lbit.ly/9oOnMS) Azt jelzi, hogy a megadott erforrs elzetes le

"
krse s gyorstrazsa jtkony hats lehet, mivel igen valszn, hogy
a felhasznlnak szksge lesz r." A keresprogramok nha hozzadjk
a <link
rel="prefetch"
helyre rangsorolt oldal
h ref ="<emphasis>Az
els
URL-je</emphasis>"> kdot
a tallari oldalhoz, ha gy rzik, hogy az els helyre rangsorolt oldal

lnyegesen npszerbb a tbbin!. Prbljuk ki pldul a Firefoxban,
hogy a Google-ben vgrehajtunk egy keresst a CNN kifejezsre: ha
megnzzk a tallari oldal forrst, megtallhatjuk benne a prefetch
kulcsszt. Jelenleg a Mozilla Firefax az egyetlen bngsz, amelyik t
mogatja a rel="prefetch" viszonyler elemet.
3. fejezet
Mit jelent mindez? l 69
rel= "search"
(http:!lbit.ly!aApkaP) "Azt jelzi, hogy a hivatkozott dokumentum ren
delkezik kifejezetten a dokumentumban s a hozz kapcsold er

forrsokban val keressre szolgl fellettel." Ha azt szeretnnk, hogy
a rel="search" valban hasznos legyen, a hivatkozsnak egy Open
Search-dokumentumra kell mutatnia, amely lerja, hogy a bngszk
hogyan pthetnek fel egy olyan URL-t, amellyel egy adott kulcssz
elfordulsait megkereshetik az aktulis webhelyen. Az OpenSearch
dokumentumokat (illetve a rel="search" hivatkozsokat, amelyek
ilyen ler OpenSearch-dokumentumokra mutatnak) a Microsoft Inter
net Explorer a 7-es, a Mozilla Firefox pedig a 2-es vltozat ta tmo
gatja.
rel= "sidebar"
(http:!!bit.lylazTA9D) "Azt jelzi, hogy a hivatkozott dokumentumot

amennyiben lekrik- (lehetsg szerint) egy msodiagos bngszkr
nyezetben, s nem az aktulis bngszkrnyezetben kell megjelen
teni." Mit jelent mindez? Az Operban s a Mozilla Firefaxban azt, hogy
"amikor erre a hivatkozsra kattintok, krdezd meg a felhasznlt, hogy
ltre kvn-e hozni egy knyvjelzt, amely a Boomarks (Knyvjelzk)
menbl kivlasztva egy oldalsvban nyitja meg a hivatkozott doku
mentumot." (Az Opera valjban "panelnek" hvja az "oldalsvot".) Az
Internet Explorer, a Safari s a Chromc figyelmen kvl hagyja a rel =
"sidebar "-t, s a hivatkozst norml hivatkozsknt kezeli. A rel=
"sidebar "-hoz a
http://wearehugh. comlpublic/2009/04/rel-sidebar. html
cmen tallhatunk egy tesztesetet.

rel= "tag"
(http:!lbit.lyl9bYlfo) "Azt jelzi, hogy a cmke, amelyet a hivatkozott do

kumentum jelkpez, alkalmazhat az aktulis dokumentumra." A "cm
kk" (kategria-kulcsszavak) megjellst a rel jellemzvel a Technorati
tallta ki, hogy segtsen a webnapl-bejegyzsek csoportostsban, ezrt
a rgebbi webnaplk s oktatanyagok "Technorati-cmkk" nven hi
vatkoztak rjuk. (Igen, jl rtettk: egy zleti vllalkozs rbeszlte az
egsz vilgot, hogy hasznljanak metaadatokat, hogy megknnytsk
a cg dolgt. Szp teljestmny!) Az utastsformt ksbb a mikroform
tumok kzssge szabvnyostotta; itt kapta az egyszer rel= "t ag"
nevet. A legtbb webnaplrendszer, amely megengedi, hogy az egyes
70 l Mitjelentmindez?
3. fejezet
bejegyzseket kategrikba soroljuk, illetve kulcsszavakat vagy cmkket

rendeljnk hozzjuk, re l= "tag" hivatkozsokkal ltja el a bejegyzse
ket. A bngszk ezekkel nem csinlnak semmi klnset, hiszen csupn
arra valk, hogy a keresknek jelezzk, hogy mirl szl az adott oldal.
j jelentstkrz elemek
HTML5-ben
A HTML5-nek nem csak az a clja, hogy a meglev kdokat lervidthessk

( br jelentsen segt ebben), hanem tbb j jelentstkrz (szemantikus)
elemet is meghatroz. A HTML5 szabvny a kvetkez elemeket rja le:
<section>
A s ection (szakasz) elem egy dokumentum vagy alkalmazs egy l

talnos rtelemben vett szakaszt jelkpezi. Ebben az sszefggsben
a szakasz egy adott tma kr csoportostott tartalom, amelynek jellem
zen van egy cmsora. Szakaszok pldul a fejezetek, a fles prbeszd
ablakok klnfle lapjai, vagy egy szakdolgozat szmozott rszei. Egy
webhely nyitoldalt klnbz szakaszokra- bevezets, hrek, kapcso
lati informcik- lehet osztani.
<nav>
A nav elem egy oldal egy olyan szakaszt jelkpezi, amely ms olda
lakra vagy az adott oldal ms rszeire hivatkozik, teht egy navigcis
hivatkozsokkal elltott szakaszt. Egy oldalon nem minden hivatkozs
csoportnak kell nav elemen bell szerepelnie, hanem csak azoknak
a szakaszoknak, amelyek fontosabb navigcis blokkokbl llnak. A lb
lcben pldul a webhely klnbz oldalaira murat hivatkozsok- szol
gltatsi felttelek, nyitoldal, szerzi jogok stb. - rvid listjt szaktk
elhelyezni, de ilyenkor a footer (lblc) elem nmagban elg, nincs
szksg nav elemre.
<arti ele>
Az a rticle (cikk) elem egy nll, fggetlen kzzttelre vagy jra

hasznostsra (pldul hrsugrzsra) alkalmas egysget jelkpez egy do
kumentumon, oldalon, alkalmazson vagy webhelyen bell. Ez az egysg
lehet frum- vagy webnaplbejegyzs, jsgcikk, felhasznli hozzsz
ls, interaktv vezrl, illetve brmilyen ms nll tartalomegysg.
3.
fejezet
Mit jelent mindez? J 71
<aside>
Az asi d e ("mellesleg") elem egy oldal egy olyan szakaszt jelkpezi,

amely a krltte lev tartalomhoz csupn rintlegesen kapcsoldik,
de attl fggetlennek tekinthet. Az ilyen szakaszokat nyomtatsban
ltalban kln dobozba (oldalsvba) rakjk. Az aside elemet olyan
tipogrfiai hatsokhoz hasznlhatjuk, mint a behzott idzetek vagy az
oldalsvok, illetve reklmokat, na v elemcsoportokat, valamint az oldal
f tartalmhoz szorosan nem ktd ms tartalmakat helyezhetnk el
bennk.
<hgroup>
A hgroup (cmsorcsoport) elem egy szakasz cmsorait jelkpezi. Ezzel

az elemmel csoportosthatjuk a hl-h6 elemeket, amikor a cmsoroknak
tbb szintje van, pldul alcmeket vagy mottkat is hasznlunk.
<header>
A header (cmsor/fejlc) elem bevezet elemek vagy navigcis seg

dek egy csoportjt jelkpezi. ltalban egy szakaszcmsort (egy hl-h6
vagy egy hgroup elemet) helyeznek el benne, de ez nem ktelez.
A header elem egy szakasz tartalomjegyzknek, egy keresrlapnak
vagy egy kapcsold emblmnak a beburkolsra is hasznlhat.
<footer>
A footer (lblc) elem a legkzelebbi szakaszkpz szltartalom vagy

gykrelem lblct jelkpezi. A lblcben jellemzen olyan informcik
szerepeinek a vonatkoz szakaszrl, mint a szakasz szerzje, a kapcso
ld dokumentumokra mutat hivatkozsok, a szerzi jogi informcik
s hasonlk. A lblceknek nem felttlenl kell egy szakasz vgn szere
pelnik br ltalban ott szoktk elhelyezni ket. Ha a footer elem
teljes szakaszokat tartalmaz, fggelket, trgymutatt, hossz kolofont,
rszletes felhasznlsi engedlyt vagy ms hasonl tartalmat jell.
<time>
A time (id) elem vagy egy (24 rs idbeoszts) idpontot, vagy egy
konkrt dtumot jell a Gergely-naptrban (nem ktelezen kiegsztve
egy idponttal s egy idzna-eltrssel).
<mark>
A mark (megjells/kiemels) elem egy olyan szvegrszt jelkpez egy

dokumentumon bell, amelyet hivatkozs cljbl megjelltek vagy ki
emeltek.
3.
fejezet
Tudom, hogy az Olvas mr alig vrja, hogy hasznlatba vegye ezeket az j

elemeket - klnben nem olvasn ezt a fejezetet. Elszr azonban mg ten
nnk kell egy kis kitrt.
Hossz kitr arrl, hogy miknt

kezelik a bngszk az ismeretlen elemeket
Minden bngsznek van egy " mesterlistja" azokrl a HTML-elemekrl,
amelyeket tmogat. A Mozilla Firefox listjt pldul az nsElementTable.cpp
fjl trolja (http:llmxr.mozilla.orglseamonkeylsourcelparserlhtmfparserlsrclmElement
Tabfe.cpp). Az ebben a listban nem szerepl elemek "ismeretlen elemeknek " mi
nslnek. Az ismereden elemekkel kapcsolatban kt alapvet krds merl fel:
Hogyan formzand az elem?

Alaprtelmezs szerint a <p> elemek felett s alatt trkz tallhat,
a <blockquote> elemek balrl behzottak, a <hl> elemek pedig
nagyobb betvel jelennek meg.
Hogyan kell k inznie az elem DOM-jnak?

A Mozilla nsElementTable.cpp fjlja arrl is tartalmaz informcit, hogy
az egyes elemek milyen ms elemeket tartalmazharnak. Ha azt rjuk
pldul, hogy <p><p>, akkor a msodik bekezdselem kzvetetten be
zrja az elst, gy a kt elem testvr lesz, nem pedig szl s gyermek.
Ha viszont azt rjuk, hogy <p><span>, akkor a span nem zrja be
a bekezdst, mert a Firefox tudja, hogy a <p> tmbelem (blokkelem),
amely tartalmazhat bels <span> elemet. A <span> teht a <p>
gyermeke lesz a DOM-ban.
A klnbz bngszk ms-ms vlaszt adnak ezekre a krdsekre. ( Tudom,
megdbbent.) A fontosabb bngszk kzl a Microsoft Internet Explorer
vlaszaival van a legtbb gond.
Az els krdsre adott vlasznak viszonylag egyszernek kellene lennie: az
ismereden elemek ne kapjanak semmilyen klnleges formzst, csak rkl
jk azokat a CSS-tulajdonsgokat, amelyek a megjelensk helyn rvnyben
vannak az oldalon, s minden formzst az oldal szerzje hatrozzon meg
CSS segtsgveL Sajnos az Internet Explorer (a 9-es vltozat eltt) egyltaln
3.
fejezet
Mit jelent mindez? l
73
nem engedi meg az ismereden elemek formzst. Tegyk fel pldul, hogy
a kvetkez lerkdunk van:
<style type="text/ ess">
article
display: black; border: lpx solid red
</style>
<article>
<hl>Welcome to Initech</hl>
<p>This is you r <span>first day</ span>. </p>
</article>
Az Internet Explorer (az IE8-cal bezrlag) nem tesz vrs keretet a cikk
kr. E knyv rsnak idejn az Internet Explorer 9 mg csak btavltozat
ban ltezett, de a Microsoft bejelentette (s a fejlesztk megerstettk), hogy
az Internet Explorer 9-ben mr nem lesz jelen ez a problma.
A msik gondot a DOM okozza, amelyet a bngszk akkor ptenek fel,
amikor ismereden elemekkel tallkoznak. Ebben a tekintetben is az Internet
Explorer a fekete brny. Ha az IE nem ismeri fel egyrtelmen az elem nevt,
akkor az elemet res, gyermektelen csompontknt szrja be a DOM-ba. gy
minden elem, amelyrl azt feltteleznnk, hogy az ismereden elemnek kz
veden gyermeke lesz, ehelyett testvrknt kerl a DOM-ba.
Lssuk a klnbsget egy ASCII-brn! Ez a DOM kvetkezne a HTMLS
bl:
article
+--hl (az article gyermeke)
l
l
+--szvegcsompont "Welcome to Initech"
l
+--p (az article gyermeke, a hl testvre}
l
+--szvegcsompont "This is your "
l
+--span
l
l
l
l
+--szvegcsompont "first da y"
+--szvegcsompont ".
74
l Mitjelent mindez?
"
3.
fejezet
Az Internet Explorer azonban valjban ezt a DOM-ot hozza ltre:

article (nincsenek gyermekek)
hl (az article testvre)
l
+--szvegcsompont "Welcome to Initech
p (a hl testvre)
l
+--szvegcsompont "This is your
l
+--span
l
l
l
+--szvegcsompont "first da y
l
+--szvegcsompont "."
Van azonban egy csodlatos kerl megolds erre a problmra. Ha JavaScript

segtsgvel ltrehozunk egy <article> lelemet, mieltt ezt az elemet
hasznlnnk az oldalon, az Internet Explorer varzstsre felismeri, s hagyja,
hogy CSS-sel formzzuk Az ldemet egyltaln nem szksges beszrni
a DOM-ba. Elg (oldalanknt) egyszer ltrehozni az elemet, hogy megtant
suk az IE-nek, hogy formznia kell az ismeretlent. Pldul:
<html>
<head>
<st y le>
artiele
display: block; border: lpx solid red
</st yle>
<script>document.createElement("article");</script>
</head>
<body>
<article>
<hl>Welcome to Initech</hl>
<p>This is your <span>first day</span>. </p>
</article>
</body>
</html>
Ez a megolds az Internet Explorer valamennyi vltozatban mkdik, eg

szen az IE 6-ig visszamenleg! A mdszert kiterjeszthetjk, s egyszerre min
den j HTML5-elembl ltrehozhatunk lpldnyokat - amelyek soha nem
kerlnek be a DOM-ba, gy nem is fogjuk ltni ket-, s rgtn hasznlatba
is vehetjk ket, anlkl, hogy tlsgosan aggdnunk kellene a HTML5-t
nem ismer bngszk miatt.
3.
fejezet
Mit jelent mindez? l
75
Remy Sharp ppen ezt tette a tallan "HTML5 enabling script"-nek el

nevezett parancskdjval (http:llremysharp.com/2009/0I/07/html5-enabling
script). A parancskd szmos tdolgozson esett t, de az alapdet ez:

<1--[if lt IE 9]>
<script>
var e: ("abb r,article,aside,audio,canvas, datalist, details, "+
"figure,footer,header,hgroup,mark,menu,meter,nav,output, " +
"progress,section,time,video").split(' ,');
for (var i: O; i< e.length; i++) {
document.createElement(e[i]);
)
</script>
<! [endif]-->
Az rszek feltteles megjegyzsek,
amelyeket az Internet Explorer gy rtelmez, mint egy if ( "ha") utastst:

"ha az aktulis bngsz az Internet Explorer 9-esnl rgebbi vltozata, hajtsd
vgre ezt a kdblokkot". Minden ms bngsz HTML-megjegyzsknt ke
zeli a teljes blokkot. Az eredmny: az Internet Explorer (a 8-as vltozattal

bezrlag) vgrehajtja a fenti parancskdot, a tbbi bngsz azonban telje
sen figyelmen kvl hagyja, gy az oldal gyorsabban tltdik be azokban
a bngszkben, amelyekben nincs szksg erre a trkkre.
Maga a JavaScript-kd viszonylag egyszer. Az e vltozbl egy olyan ka
rakterlncokbl ll tmb lesz,mint az "abbr ",az "article ",az "a side",
s gy tovbb. Ezt kveten egy ciklussal vgigjrjuk ezt a tmbt, s a
document. createElement ( ) meghvsval ltrehozzuk a nevestett ele
meket. Mivel azonban a visszakapott rtket figyelmen kvl hagyjuk, az

elemek nem szrdnak be a DOM-ba. Mindazonltal, ez elg ahhoz, hogy
az Internet Explorer gy kezelje ezeket az elemeket, ahogy szeretnnk, ami
kor az oldal ksbbi rszben tnylegesen hasznlatba vesszk ket.
A "ksbb " lnyeges: ennek a parancskdnak az oldal elejn kell szerepel
nie - lehetleg a <head> elemben -, nem pedig a vgn. gy az Internet
Explorer mg az eltt vgrehajtja a parancskdot, hogy feldolgozn a cmk
ket s a jellemzket. Ha a parancskdot az oldal vgre tesszk, tl ks lesz:
az Internet Explorer ekkorra mr flrertelmezi a lerkdot,s hibs DOM-ot
hoz ltre - emiatt a parancskd miatt pedig nem fog visszamenni, s kijav
tani a hibt.
Remy Sharp "sszesrtette" ezt a parancskdot, s elhelyezte a Google

Project Hosting (http:llcode.google.comlplhtml5shivl) oldaln. (Ha esetleg
76
l Mit jelent mindez?
3.
fejezet
rdekelne minket, maga a parancskd nylt forrs, s MIT-engedllyel ren

delkezik, gy tetszleges projektben felhasznlhatjuk.) Ha szeretnnk, mg
"
"forr hivatkozssal is kapcsoldhatunk a parancskdhoz, teht kzvetlenl
mutathatunk a fenti cmen elhelyezett vltozatra- valahogy gy:
<head>
<meta charset= utf-8" />
<title>My Weblog</title>

</head>
Ezzel kszen is llunk a HTML5 j jelentstkrz elemeinek hasznlatra.
Cmsarok
Trjnk vissza a mintaoldalunkhoz- egszen pontosan a cmsorokhoz:
<div id= "header">
<hl>My Weblog</hl>
<p class="tagline">A lot of effort went into ma king this effortless. </p>
</div>
<div class="entry">
<h2>Travel day</h2>
</div>
<div class= entry">

<h2> I'm going to Prague 1 </h2>
Ezzel a rsszel nincs semmi gond. Ha tetszik, megtarthatjuk, mert rvnyes

HTML5-kd. A HTML5 azonban tovbbi elemeket is biztost a cmsorok s
szakaszok szmra.
Elszr is, szabaduljunk meg a <d iv id= "header"> rsztl. Ez nagyon
gyakori cmke, de semmit nem jelent. Adivelemnek nincs meghatrozott
jelentse, ahogy az id jellemznek sem. (A bngszknek nem szabad sem
milyen jelentsre kvetkeztetnik az id jellemz rtkbl.) Ha az emltett
3.
fejezet
Mitjelent mindez? l
77
cmkt mondjuk <div
id="shazbot">-ra vltoztatnnk, ugyanannyi je
lentssel brna - semennyiveL

A HTML5 azonban erre a clra meghatroz egy <header> elemet. A
HTML5 szabvnylersa tbb, a vals letbl vett pldt is bemutat a <header>
elem hasznlatra. A mintaoldalunkon gy festene:
<header>
<hl>My Weblog</hl>
<p class "tagline ">A lot of effort went into ma king this effortless. </p>
</header>
Ez j, mert brkinek, akit rdekel, elrulja, hogy egy cmsorrl van sz. De
mi a helyzet a roottval (tagline)? Ilyet is gyakran szoktak hasznlni, de eddig
nem volt r szabvnyos lerkd, mert nem knny jellni. A mott olyan,
mint egy alcm, de az elsdleges cmhez "kapcsoldik "- vagyis olyan alcm,
amely nem hoz ltre sajt szakaszt.
Az oldal szerkezett olyan cmsorelemek hozzk ltre, mint a <hl> s
a <h2>. Egytt egy olyan vzlatot alaktanak ki, amely segt magunk el
kpzelni az oldalt, illetve megknnyti a mozgst az oldalon bell. A kper
nyolvas prograrnak a dokumentumvzlatra tmaszkodva segtik a vak
felhasznlkat, hogy eligazadjanak az oldalon. A dokumentumvzlat kpi
megjelentsre internetes eszkzket (http:llgsnedders.html5.orgloutlinerl) s
bngszbvtmnyeket (http:llchrispederick. comlworklweb-developerl) is hasz
nlhatunk.
A HTML 4-ben kizrlag <hl>-<h6> elemekkel lehetett dokumentum
vzlatot ltrehozni. A mintaoldalunk vzlata gy fest:
MyWeblog (hl)
l
+--Travel day (h2)
l
+--I'm going to Prague! (h2)
Ez mind szp, de azt jelenti, hogy nincs md az "A lot of effort went into
making this effortless" ( "Egy csom problmt oldottunk meg, hogy a meg
olds problmamentes legyen" ) mott felcmkzsre. Ha <h2> cmsorknt
prbljuk megjellni, egy fanromcsompont jelenik meg a dokumentum
vzlatban:
78
l Mitjelent mindez?
3.
fejezet
My Weblog (hl)
l
+--A lot of effort went into making this effortless. (h2)
l
+--Travel day (h2)
l
+--I'm going to Prague'
(h2)
Ez azonban nem a dokumentum tnyleges szerkezete, hiszen a mott csupn

egy alcm; szakaszt nem jelkpez.
s mi lenne, ha a mottt <h 2> cmsorknt jellnnk meg, az egyes cikkek
cmei viszont <h3> cmkt kapnnak? Nem, ez mg rosszabb:
My Weblog (hl)
l
+--A lot of effort went into making this effortless. (h2)
l
+--Travel day (h3)
l
A fantomcsompont tovbbra is ott van a dokumentumvzlatban, radsul
ellopja" a gykrcsomponthoz tartoz gyermekeket. Pontosan ebben rejlik

"
a problma: a HTML 4 nem ad mdot arra, hogy anlkl adjunk meg egy
alcmet, hogy hozzadnnk a dokumentumvzlathoz. Nem szmt, hogyan
keverjk a krtykat, az "A lot of effort wem into making this effortless"
mott mindenkppen fel fog bukkanni a vzlatban - ezrt hasznltunk egy
olyan jelentssei nem br kdot, mint a <p class= "tagline">.
A HTML5 azonban knl erre egy megoldst: a <hgroup> elem haszn
latr. A <hgroup> elem kt vagy tbb kapcsold cmsorelem burkoljaknt

mkdik- de mit jelent az, hogy kapcsold"? Nos, azt jelenti, hogy a kap
"
csold elemek egytt egyeden csompontot hoznak ltre a dokumentum
vzlatban.
Vegyk ezt a lerkdot:
<header>
<hgroup>
<hl>My Weblog</hl>
<h2>A lot of effort went into making this effortless. </h2>
</hgroup>
</header>
3. fejezet
Mitjelent mindez? l
79
<div class= "entry">

<h2>Travel day</h2>
</div>
<d iv class= "entry">

<h2>I'm going to Prague! </h2>
</div>
A fenti kd ezt a dokumentumvzlatot hozza ltre:

My Weblog (a hgroup hl eleme)
l
+--Travel day (h2)
l
A sajt oldalainkat a HTML5 Outliner segtsgvel megvizsglva gyzd
hetnk meg arrl, hogy helyesen hasznljuk-e a cmsorelemeket.
Cikkek
A mintaoldalunkat folytatva, lssuk, mit tehetnk ezzel a kddal:
<div class="entry">
<p class="post-date">October 22, 2009</p>
<h2>
<a href="#
rel="bookmark
title="link to this post">

Travel day
<la>
</h2>
</div>
Ez ismt csak rvnyes HTML5-kd, de a HTML5-ben van egy konkrtabb

elem is arra, hogy egy oldalon megjelljnk egy cikket - a tall nev
<article> ("cikk") elem:
<article>
80
l Mitjelent mindez?
3.
fejezet
<h 2>
<a href="#
rel="bookmark
title= "link to this post">

Travel day
</a>
</h2>
</article>
Na persze ez nem ilyen egyszer. Mg egy mdostst vgre kell hajtanunk.

Elszr megmutatom, aztn elmagyarzom:
<article>
<header>
<hl>
<a href="#"
rel="bookrnark"
Travel day
</a>
</hl>
</header>
</article>
szrevettk? A <h2> elemet <hl>-re vltoztattam, s egy <header> elembe

burkoltam. A <header> elemet mr lttuk mkds kzben. A clja az,
hogy beburkolja a cikk fejlct alkot sszes elemet (vagyis ebben az esetben
a cikk kzzttelnek dtumt s a cikk cmt). De ... de ... de <hl> elembl
nem csak egy lehet egy dokumentumban? Nem fogja ez tnkretenni a doku
mentumvzlatot? Nem, de ahhoz, hogy megrthessk, mirt nem, vissza kell
lpnnk egy kicsit.
A HTML 4-ben kizrlag <hl>-<h6> elemekkeliehetett dokumentum
vzlatot ltrehozni. Ha a vzlatban csak egyetlen gykrcsompontot akar

tunk, a lerkdban egyetlen <hl> elemre kellett szortkoznunk. A HTML5
szabvny azonban egy olyan algoritmust hatroz meg a dokumentumvzla
tok ellltsra, amely a HTML5 j jelentstkrz elemeire tmaszkodik.
A HTML5 algoritmusa azt mondja, hogy az <article> elemek j szakaszt
hoznak ltre, vagyis j csompontot a dokumentumvzlatban- a HTML5ben viszont minden szakasznak sajt <hl> eleme lehet.
3.
fejezet
Ez drasztikus s elnys vltozs a HTML 4-hez kpest. Hogy mirt el

nys? Nos, sok weboldalt valjban sablonok alapjn lltanak el. A tartalom
egy rszt az egyik forrsbl nyerik ki s szrjk be az oldalba, a msik rsze
pedig egy msik forrsbl szrmazik, s az oldal egy msik rszn helyezik el.
Sok oktatanyagat ugyangy ptenek fel: "Itt egy HTML-rszlet- csak m
soljuk le, s illesszk be az oldalunkba.". Ez kis mennyisg tartalomnl meg
felel, de mi a helyzet, ha a heilleszrend kd egy reljes szakaszt fellel? Ebben
az esetben az oktatanyag valami ilyesmit fog mondani: ",tt egy HTML
rszlet - csak msoljuk le, illesszk be egy szvegszerkesztbe, s igaztsuk a
cmsorelemeket gy, hogy megfeleljenek a cloldal cmsorelemei begyazsi
szintjnek.".
Hadd fogalmazzam meg msknt. A HTML 4-ben nincs ltalnos cm
sorelem, csak hat szigoran szmozott cmsor (<hl>-<h6>), amelyeket pon
tosan a szmozsnak megfelel sorrendben kell egymsba gyazni. Ez elg
knyelmetlen, klnsen ha az oldalunkat " sszeszereljk ", nem pedig " meg
rjuk ". Ezt a problmt oldja meg a HTML5 az j szakaszal elemekkel s
a meglev cmsorelemekre vonatkoz j szablyokkaL Ha az j szakaszal
elemeket hasznljuk, ezt a kdot ajnihatom fel:
<article>
<header>
<hl>A syndicated post</hl>
</header>
<p> Lorern ipsum blah blah... </p>
</article>
Ezt a kdot lemsolhatjuk, s az oldalunkon brhov beilleszthetjk mdos

ts nlkl. Az, hogy tartalmaz egy <hl> elemet, nem jelent gondot, mert az
egszet egy <article> elem zrja magba. Az <article> elem egy nll
csompontot hatroz meg a dokumenrumvzlarban, a <hl> elem ennek
a csompontnak a cmt adja meg, az oldal sszes tbbi szakaszal eleme
pedig azon a begyazsi szinten marad, mint korbban.
82 l Mit jelent mindez?
3.
fejezet

Mint mindenre, ami a Weben tallhat, a fentiekre is igaz, hogy a va
lsg kiss bonyolultabb annl, mint ahogy n lefestem. Az j "kifeje
zett" szakaszol elemek (mint az <article> elembe burkolt <hl>)
kiszmthatatlan klcsnhatsba kerlhetnek a rgi, "belertett" szaka

szol elemekkel (az nmagukban ll <hl>-<h6> elemekkel). Az le
tnk egyszerbb lesz, ha csak az egyiket vagy a msikat hasznljuk, de
nem mindkettt. Ha mindkettt hasznlnunk kell egy oldalon bell,
mindenkppen ellenrizzk az eredmnyt a HTML5 Outlinerben, s
gyzdjnk meg rla, hogy rtelmes dokumentumvzlatot kapunk.
Dtumoks idpontok
Izgalmas, nem? Persze nem annyira izgalmas, mint meztelenl lesikJani
a Mount Everestrl, mikzben visszafel nekeljk az amerikai himnuszt, de
egy jelentstkrz lerkdtl nem rossz. De folytassuk a minraoldalunk
elemzst. A kvetkez sor, amire fel szeretnm hvni a figyelmet, ez:
<div class= "entry ">

<h2>Travel day</h2>
</div>
Mr megint a rgi nta, igaz? Egy szokvnyos informcikzls - egy cikk

kzztteli dtumnak jelzse -, amelyhez nem ll rendelkezsre megfelel
jelentstkrz elem, ezrt a szerzknek egyni
class
jellemzkkel elltott
ltalnos lerkdokra kell szortkozniuk. Itt is igaz persze, hogy ez rvnyes

HTML5-kd, teht nem ktelez megvltoztatnunk. A HTML5 azonban
konkrt megoldst is knl az ilyen esetekre: a <time> elemet:
<time date time= "2009-10-22" pubdate>October 22, 2009</time>
A <time> elemek hrom rszbl llnak:
A szmtgp ltal olvashat idblyegbl

Az ember ltal rtelmezhet szveges tartalombl
Az elhagyhat pubdate jelzbl
3. fejezet
Ebben a pldban a datetime jellemz csak egy dtumot hatroz meg,

idpontot nem. A formtum: ngy szmjegy v, kt szmjegy hnap s kt
szmjegy nap, ktjelekkel elvlasztva:
<time datetime="2009-10-22" pubdate>October 22, 2009</time>
Ha idpontot is meg akarunk adni, rjuk a T bett a dtum utn, majd az

idpontot 24 rs formban, vgl pedig egy idzna-eltrst:
<time datetime "2009-10-22T13: 59:47-04:00" pubdate>
October 22, 2009
l: 59pm EDT
</time>
A dtum- s idformtum elg rugalmas. A HTMLS szabvnylersa tbb

pldt is tartalmaz az rvnyes dtum- s id-karakterlncokra.
Figyeljk meg, hogy megvltoztattam a szvegtartalmat-a <time> s
</time> cmkk kztti rszt-, hogy illeszkedjen a szmtgp ltal olvas
hat idblyeghez. Ez nem ktelez; a szvegtartalom tetszleges lehet, amg
a datetime jellemzben egy szmtgp ltal olvashat dtum- s idblye
get adunk meg. Ez teht rvnyes HTMLS-kd:
<time datetime "2009-10-22 ">mlt
cstrtk</ time>
s ez is:
<time datetime "2009-10-22 "></time>
A kiraksjtk utols darabja itt a pubdate jellemz. Ez egy logikai jel

lemz, ezrt csak annyit kell tennnk, hogy berjuk, ha szksgnk van r,
valahogy gy:
<time datetime "2009-10-22 "pubdate>October 22, 2009</time>
Ha nem szeretjk a "csupasz" jellemzket, rhatjuk az albbit is, ami egyen

rtk a fenti kddal:
<time datetime "2009-10-22 "pubdate="pubdate">October 22, 2009</time>
Mi a jelentse pubdate jellemznek? Nos, kt dolgot jelenthet. Ha a <time>

elem egy <article> elemben tallhat, akkor azt jelenti, hogy ez az idb
lyeg a cikk kzztteli dtuma (publication date). Ha viszont a <time> elem
nem egy <art icle> elem belsejben tallhat, akkor a jelentse az, hogy az
idblyeg a teljes dokumentum kzzttelnek dtumt adja meg.
84 l Mit jelent mindez?
3.
fejezet
me a teljes cikk tdolgozott, a HT ML5 elnyeit teljes mrtkben kihasznl

vltozata:
<article>
<header>
"2009-10-22 " pubdate>

22, 200 9
<time datetirne=
October
</time>
<hl>
<a href=
"
rel="bookrnark"
Travel day
</a>
</hl>
</header>
<p> Lorern ip sum dolor sit amet ... </p>
</article>
Navigci
Minden webhelynek a navigcis sv az egyik legfontosabb rsze. A CNN.
com webhely minden oldalnak tetejn "flek " tallhatk, amelyek a kln
bz hresokrokra- "T ech " (Tudomny), "Health " (Egszsg), " Spons" (Sport)
stb. - hivatkoznak. A Google keres tallari oldalai hasonl svot jelentenek

meg az oldal tetejn, ami lehetv teszi, hogy a keresst a Google klnfle
szolgltatsaival- "Images" (Kpek), "Video" ( Videk), "Maps" (T rkp) stb.
- hajtsuk vgre. A mintaoldalunk fejlcben is van egy navigcis sv, amely
hivatkozsokat tartalmaz a kpzeletbeli webhelynk klnbz - " home"
(nyitoldal), "blog" (webnapl), "gallery " (kpgalria) s "abour" (nvjegy) szakaszaira.
A navigcis sv lerkdja erederileg gy nzett ki:

<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="l'>blog</a></li>
<li><a href=
'>gallery</a></li>
<li><a href="l">about</a></li>
</ul>
</div>
3.
fejezet
Mitjelent mindez? l
85
Ez megint csak rvnyes kd a HTMLS-ben, csak ppen egy ngy elembl

ll listt jell, s semmi sem utal arra, hogy ez a lista a webhely navigcis
rendszernek rsze. A ltvnybl persze kitallhatjuk, mivel a lista az oldal
fejlcben szerepel, s a hivatkozsok szvege is elrulja, de szemantikailag
semmi nem klnbzteti meg ezt a hivatkozslistt a tbbi, nem navigcis
hivatkozstL
De kinek szmt, hogy egy webhely navigcis rendszernek jelentstk
rz lersa legyen? Nos, pldul a fogyatkkal lknek (http://diveinto
accessibility.org). Mirt? Vegyk a kvetkez forgatknyvet: mozgskorlto

zottak vagyunk, gy csak nehezen vagy egyltaln nem tudjuk hasznlni az
egeret. Ennek ellenslyozsra egy bngszbvtmnyt hasznlunk, amely
lehetv teszi, hogy a kvnt f navigcis hivatkozsra ugorjunk (vagy ppen
tugorjuk azt). Vagy nzznk egy msik esetet: a ltsunk korltozott, ezrt
egy gynevezett "kpernyolvas" programot hasznlunk, amely hangosan
felolvassa s sszefoglalja a weboldalak szvegt. Az oldal cme utn minden
oldalon a f navigcis hivatkozsok jelentik a kvetkez fontos informci
kat. Ha az adott webhelyen belli mozgst szeretnnk felgyorstani, arra uta
stjuk a kpernyolvast, hogy ugorjon a navigcis svra, s olvassa fel azt.
Ha viszont az oldal tartalma rdekel minket, azt mondjuk a kpernyolvas
nak, hogy ugorja t a navigcis svot, s az oldal szvegt kezdje felolvasni.
Mindkt esetben fontos azonban, hogy kpesek legynk programozott m
don meghatrozni a navigcis hivatkozsokat.
Teht nincs ugyan semmi baj azzal, ha a <div id="nav"> kddal jell
jk meg a webhely navigcis elemeit, de nem is klnsebben hasznos, mert
azokat, akiknek tnyleg szksgk van r, nemigen segti. A HTML5-ben
viszont mr lehetsgnk van jelentstkrz mdon megadni a navigcis
szakaszokat- a <nav> elemmel.
<nav>
<ul>
<li><a href= "#">home</a></li>
<li><a href= "# ">blog</ a></li>
<li><a href= "# ">gallery</ a></ li>
<li><a href= "# ">about</a></li>
</ul>
</nav>
86
l Mitjelent mindez?
3.
fejezet

Krds: Az ugrhivatkozsok (skip link) sszeegyeztethetk a <nav> elem
mel? Szksg van egydita/n a HTML5-ben is ugrhivatkozdsokra?
Vlasz: Az ugrhivatkozsok lehetv teszik a kpernyolvasknak,
hogy tugorjk a navigcis szakaszokat, ami hasznos azoknak a fogya
tkkal l felhasznlknak, akik valamilyen kls programmal olvas
tatjk fel a weboldalakat, s egr nlkl mozognak a webhelyeken bell.
Arrl, hogy hogyan s mikor hasznlhatunk ugrhivatkozsokat, a http:/1
www.webaim.org/techniqueslskipnav cmen olvashatunk rszletesebben.
Amint frisstik a kpernyolvaskat, hogy felismerjk a <n av> elemet,
az ugrhivatkozsok feleslegess vlnak, mivel a kpernyolvas progra
mok kpesek lesznek kvnsgra automatikusan tugrani a <n av> kd
dal megjellt navigcis szakaszokat. Mindazonltal idbe telik, mire
a Weben minden fogyatkkal l felhasznl HTML5-kpes kperny
olvasra vlt, ezrt tovbbra is clszer ugrhivatkozsokat biztostani
a <n av> szakaszok tlpshez.
Lblcek
Vgre-valahra elrkeztnk a mintaoldalunk vghez. Az utols, amirl be
szlni szeretnk, az oldal utols eleme: a lblc. A lblc erede ti kdja gy
nzett ki:
<div id= faoter ">
<p>&U67;</p>
<p>&#l69; 2001–9 <a href= "#">Mark Pilgrim</ a></p>
</div>
Ez ismt csak rvnyes HTML5-kd, de a HTML5-ben van egy megfelelbb

elem is erre a clra-a <footer> ("lblc") elem:
<footer>
<p>§</p>
<p>© 2001–9 <a href= "#''>Mark Pilgrim</a></p>
</footer>
Mit helynval egy <footer> elembe tenni? Valsznleg minden olyasmit,

amit most egy <d iv id= "footer "> elemben helyeznk el. Na j, ez a vlasz
3. fejezet
Mitjelent mindez? J
87
egy nnn farkba harap kgy volt, de tnyleg ennyi az egsz. A HTMLS
szabvnylersa ezt mondja: "A lblc jellemzen olyan informcikat tartal
maz a szakaszrl, amelyhez tartozik, mint a szakasz szerzje, hivatkozsok
kapcsold dokumentumokra, szerzi jogi informcik s hasonlk.". Ilyen
a mintaoldalunk lblce is: egy rvid copyright-szveg szerepel benne, vala
mint egy hivatkozs a szerzrl szl oldalra. Ha krlnznk nhny np
szer webhelyen, ms elemeket is lthatunk, amelyek alkalmasak arra, hogy
egy lblcben helyezzk el ket:
A CNN oldalnak lblce a szerzi jogi informcikat tartalmazza, va

lamint hivatkozsokat az oldal ms nyelvre fordtott vltozataira, a szol
gltatsi felttelekre, az adatvdelmi nyilatkozatra, illetve az " about us"
("rlunk" ), "contact us" ("elrhetsgeink " ) s " help" ("sg " ) oldalakra.
A lblc mindegyiknek tkletes hely.
A Google nyitoldala hresen sprtai, de az aljn tallunk nhny hi
vatkozst- "Advertising Programs" (Hirdetsi programok), "Business

Solutions" (zleti megoldsok), "About Google " (Rlunk)-, valamint
a szerzi jogi informcikat s egy hivatkozst a Google adatvdelmi
irnyelveire. Ezek mind olyan dolgok, amiket be lehet csomagolni egy
<footer> elembe.
Az n webnaplm (http://diveintomark.org) lblce az egyb webhelye

imre mutat hivatkozsokar, valamint a szerzi jogi informcikat tar
talmazza- ezek egyrtelmen egy <footer> elembe valk. (Megjegy
zend, hogy magukat a hivatkozsokat nem szabad egy <nav> elembe
burkolni, mert nem a webhely navigcis hivatkozsairl van sz, csupn
ms webhelyeken foly projektekre mutat hivatkozsokrl.)
Manapsg a kvr lblcek (http:llui-patterns.comlpattern/FatFooter) nagy sl

gernek szmtanak. Vessnk egy pillantst a W3C webhelyn (http://www.
w3.org) tallhat lblcre: ez a lblc hrom oszlopbl- "Navigation" (Navi
gci), "Contact W3C " (A W3C elrhetsgei) s "W3C Updates" (Frisst
sek)- ll. A lerkdja pedig tbb-kevsb gy fest:
<div id=
"
w3 c
<di v class=
faoter">
"
w3 c
footer-nav">
<h3>Navigation</h3>
<ul>
<li><a href= l ">Home< la></li>
<li><a href="/standards/">Standards</a></li>
88
l Mit jelent mindez?
3.
fejezet
<li><ahref="/participate/">Participate</a></li>
<li><ahref="/Consortium/membership">Membership</a></li>
<li><ahref="/Consortium/">About W3C</a></li>
</ul>
</div>
<div class="w3 c footer-nav">
<h3>Contact W3C</h3>
<ul>
<li><ahref="/Consortium/contact">Contact</a></li>
<li><ahref="/Help/">Help and FAQ</a></li>
<li><ahref="/Consortium/sup">Donate</a></li>
<li><ahref="/Consortium/siteindex">Site Map</a></li>
</ul>
</div>
<div class="w3c footer-nav">
<h3>W3C Updates</h3>
<ul>
<li><ahref= "http:
l /twitter.com/W3C">Twitter</a></li>
<li><ahref="http://identi.ca/w3c">Identi.ca</a></li>
</ul>
</div>
<p class="copyright ">Copyright
200 9
W3C</p>
</div>
Ahhoz, hogy ezt jelentstkrz HTML5-kdd alaktsuk, n a kvetkez

mdostsokat hajtanm vgre:
Alaktsuk a kls <div
id="w 3 c
footer"> derner <footer>
elemm.
Alaktsuk a <div
class="w3c
footer-nav"> els kt pldnyt
<nav> elemekk, a harmadik pldnyt pedig egy <section> elemm.
Alaktsuk a <h3> cmsorokat <hl> cmsorokk, mivel mindegyik egy

szakaszal elembe fog kerlni. A <n av> elem egy szakaszt hoz ltre a do
kumentumvzlatban, akrcsak az <ar ticle> elem (lsd a "Cikkek"
cm rszt egy kicsir korbban).
A vgs lerkd valahogy gy nzne ki:

<footer>
<nav>
<hl>Navig ation</hl>
<ul>
<li><ahref=
"l ">Home</a></li>
<li><ahref="/standards/ ">Standards</ a></li>

<li><ahref="/participate/">Participate</a></li>
<li><ahref= /Consortium/membership">Membership</a></li>
<li><ahref="/Consortium/">About W3C</a></li>
</ul>
3. fejezet
</nav>
<nav>
<hl>Contact W3C
</hl>
<ul>
<li><ahref="/Consortium/contact">Contact</a></li>
<li><a href="/Help/">Help and FAQ</a></li>
<li><ahref="/Consortium/sup">Donate</a></li>
<li><a href= /Consortium/siteindex ">Site Map</a></li>
</ul>
</nav>
<section>
<hl>W3C Updates
</hl>
<ul>
<li><ahref="http://twitter.com/W3C">Twitter</a></li>
<li><ahref="http://identi.ca/w3c">Identi.ca</a></li>
</ul>
</section>
<p class="copyright">Copyright 200 9 W3C</p>
</footer>
Tovbbi olvasmnyok
A fejezetben szerepl mintaoldalak:
Az eredeti (HTML 4) (http://diveintohtml5.orglexamples/blog-original.html)

A mdostott (HTML5) (http://diveintohtml5.orglexampleslblog-html5.
html)
A karakterkdolsrl:
Joel Spolsky: "The Absolute Minimum Every Software Developer Abso

lutely, Positively Must Know About Unicode and Character Sets (No
Excuses!)" (h ttp:llwwwjoelonsoftware.com/articiesiUnicode.html)
Tim Bray: " On the Goodness ofUnicode " (http:l!www.tbray.org/ongoingl

When/200x/2003/04/06/Unicode), "On Character Strings" (http://www.tbray.org/
ongoing!When/200x/2003!04113/Strings) s "Characters vs.Bytes " (http:/1
www.tbray.org/ongoing/When/200x/2003/04126/UTF)
A HTML5 engedlyezsrl az Internet Explorerben:
Sjoerd Visscher: "How to style unknown elements in IE " (http:llxopus.
com/devblog/2008/style-unknown-elements.html)
John Resig: HTML5 shiv (http:!lejohn.org!bloglhtml5-shivl)
3.
fejezet
Remy Sharp: HTMLS enabling script (http:llremysharp.com/2009/01/07/
html5-enabling-scriptl)
A szabvnykvet mdrl s a dokumentumtpus-kiszimatolsrl:
Henri Sivonen: "Activating Browser Modes with Doctype" (http://hsivonen.
iki.Ji!doctypel)- ez az egyetlen cikk, amelyet muszj elolvasnunk a tmrl.
Sok ms cikket rtak rla, de azok elav ultak, hinyosak vagy tvedseket
tartalmaznak.
A HTML5-t ismer ellenrz rendszer:
Validator.nu (X)HTMLS Validator (http://html5.validator.nu)
4.
fejezet
rajzvszon rdge (ne fessk a falra!)
Ugorjunk fejest!
A HTMLS gy hatrozza meg a <canvas> ("rajzvszon") elemet
ly/9]Hz0j): "felbontstl fggeden
(http:!lbit.
bitkpes rajzvszon, amelyet grafikonok, j

"
tkgrafikk s ms kpi elemek menet kzbeni megjelentsre hasznlhatunk .
A rajzvszon egy tglalap alak terlet az oldalon, amelyre JavaScript-kd segts
gvel tetszleges dolgot rajzolharunk Az albbi tblzat megmutatja, hogy e knyv
rsnak idejn mely bngszk knlnak alapszint tmogatst a rajzvszonhoz:
.Chmm.
7.0+
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+
'Az Internet Explorerben a tmogatshoz a kls explorercanvas knyvtr szksges
Hogyan nz ki egy rajzvszon? Tulajdonkppen sehogy. A <canvas> elem

nek nincs tartalma, s nincs sajt szeglye. A lerkdja gy fest:
<canvas width= "300" height= "225"></ canvas>
A 4.1. bra pontozott krvonallal mutatja a rajzvsznat, hogy lssuk, mivel is

van dolgunk.
Egy oldalon tbb <canvas> elem is lehet. Mindegyik rajzvszon megje
lenik a DOM-ban, s mindegyiknek sajt llapota van. Ha az egyes rajzvsz
nakhoz id jellemzket rendelnk, ugyangy rhetjk el ket, mint brmely
ms elemet.
Bvtsk ki ht a fenti kdot, hogy id jellemz is legyen benne:
<canvas id="a" width="300 height="225"></canvas>
Most mr egyszeren megtallhatjuk ezt a <canvas> elemet a DOM-ban:

var a_canvas = document. getElementByid ( "a") ;
4. fejezet
A rajzvszon rdge
... l 93
4. l. bra
Rajzvszon szegllyel
Egyszer alakzatok
IP
Arefox
Safari
Chrome
7.0+
3.0+
3.0+
3.0+
ra
10.0+
!Phone
Androld
1.0+
1.0+
Az Internet Explorerben a tmogatshoz a kls explorercanvas knyvtr szksges
Kezdetben minden rajzvszon res. Ez nagyon unalmas, gyhogy rajzoljunk

valamir! Az onclick esemnykezel segtsgvel meghvhatunk egy fgg
vnyt, amely egy ngyszget rajzol (egy interaktv pldt a http:lldiveintohtm/5.
orglcanvas.html cmen lthatunk):
function draw_b ()
var b_canvas
var b_context
docurnent. getElementByid( "b");

=
b_canvas. getContext( "2d ");
b_context.fil1Rect(50, 25,150, 100);
A fggvny els sorban nincs semmi klnleges: csak megkeresi a <canvas>

elemet a DOM-ban. A msodik sorban kezd rdekess vlni a dolog. Minden
rajzvszonnak van egy rajzkrnyezete (context), s itt trtnnek az izgalmas
dolgok. Miurn megtalltuk (akr a document.getElementByid(), akr
egy kedvnkre val msik tagfggvny segtsgve!) a kvnt <canvas> ele
met, meghvhatjuk a getContext O tagfggvnyt. Ennek a tagfggvny
nek ktelez a "2 d" karakterlncot tadnunk:
94
l A rajzvszon rdge...
4.
fejezet
function draw_b()
var b_canvas
document. getElementByld ("b");
var h_context =b_canvas .getContext("2d");

25, 150, 100);
b_context.fillRect(SO,

Krds: Ltezik hromdimenzis rajzvszon is?
Vlasz: Mg nem. Egyes gyrtk ksrleteznek sajt hromdimenzis
rajzvszon-API-val, de mg egyik sem vlt szabvnny. A HTML5
lersa csak annyit jegyez meg, hogy "e szabvny valamelyik jvbeli
vltozata valsznleg meg fog hatrozni egy hromdimenzis krnye
zetet is".
Van teht egy <canvas> elemnk, s rendelkeznk a rajzkrnyezetveL

A rajzkrnyezet hatrozza meg az sszes rajzolfggvnyt s rajztulajdons
got. A ngyszgek rajzolshoz tulajdonsgok s tagfggvnyek egsz cso
portja ll rendelkezsre:
A fil1St y le (kitltsi stlus) tulajdonsg rtke egy CSS-kddal meg

hatrozott szn, mintzat vagy szntmenet lehet. (A szntmenetekrl
hamarosan bvebben is sz lesz.) Az alaprtelmezett fillStyle az egy
szn fekete, de ezt tetszs szerint mdosthatjuk. Minden rajzkrnye
zet emlkszik a sajt tulajdonsgaira, amg az oldal nyitva van, hacsak
nem tesznk valamit, hogy visszalltsuk azokat az alaprtelmezett r
tkeikre.
A fillr ect(x,
y,
szlessg,
magassg)
egy ngyszget rajzol
az rvnyben lev kitltsi stlussaL
A strokeStyle (krvonalstlus) tulajdonsg olyan, mint a fillStyle:

az rtke egy CSS-szn, -mimzat vagy -szntmenet lehet.
A strokeRect(x,
y,
szlessg,
magassg)
egy ngyszget
rajzol az rvnyben lev krvonalstlussal. A strokeRect nem tlti ki a

ngyszget, csak az oldalait rajzolja meg.
A clearRect(x,
y,
szlessg,
magassg)
trli a megadott
ngyszg kppontjait.
4.
fejezet
rajzvszon rdge... \
95
Krds: "Aiaphelyzetbe" lehet lltani egy rajzvsznat?

Vlasz: Igen. Ha egy <canvas> elemnek mdostjuk a szlessgt vagy
a magassgt, a tartalma trldik, s a rajzkrnyezetnek minden tulaj
donsga visszall az alaprtelmezett rtkre. St nem is kell mdostani
a szlessget- elg, ha "belltj uk" az aktulis rtkre, valahogy gy:
var b_canvas = document .getElementByid ("b");
b_canvas . width =b_canvas . width;
Trjnk vissza az elz pldban szerepl kdhoz:

var b_canvas = document. getElementByid ("b");
var b_context =b_canvas. getContext ( " 2 d ) ;
b_context.fillRect(SO, 25, 150, 100);
A fillRe ct() tagfggvny meghvsa egy ngyszget rajzol a rajzvszonra,

s az rvnyben lev kitltsi stlussal- vagyis fekete sznnel, ha nem mdo
stottuk az alaprtelmezst- tlti ki azt. A ngyszget a bal fels sarka
25),
a szlessge
(150)
s a magassga
(100)
(50,
hatrozza meg. Hogy jobban el
tudjuk kpzelni, hogyan is mkdik ez az egsz, nzzk meg a rajzvszon

koordintarendszert.
Rajzvszon-koordintk
A rajzvszon egy ktdimenzis rcs. A
(O, O)
koordinta a rajzvszon bal fels
sarkt jelli. Az x-tengelyen az rtkek a rajzvszon jobb szle fel nnek, mg

az y-tengelyen a rajzvszon als szle fel.
A 4.2. brn lthat koordinta-diagramot egy <canvas> elem segts
gvel rajzoltam, s a kvetkezkbl ll:
Piszkosfehr fggleges vonalakbl
Piszkosfehr vzszintes vonalakbl
Kt fekete vzszintes vonalbl
Kt apr fekete tls vonalbl, amelyek egy nyilat formznak
Kt fekete fggleges vonalbl
96
A rajzvszon rdge...
4. fejezet
Kt apr fekete tls vonalbl, amelyek egy jabb nyilat formznak
Az
"x
Az
"
"(500, 375)
Egy pontbl a bal fels s egy msik pontbl a jobb als sarokban
"
betbl
Az "y" betbl
A "(O, O)" szvegbl a bal fels sarok kzelben
szvegbl a jobb als sarok kzelben
(0,0)
x
--------7
(500 ,375}
4.2. bra
Rajzvszonkoordinta-diagram
A kvetkezkben megvizsgljuk, hogyan rhetjk el a kpen lthat hatst.

Elszr is, meg kell hatroznunk magt a <canvas> elemet. A <canvas>
elem adja meg a ngyszg szlessgt
mint az azonostjt
(id),
(width)
s magassgt
(height),
vala
hogy ksbb megtallhassuk:
<canvas id; "c width; "500" height; "375 "></canvas>
Ez utn egy parancskdra van szksgnk, amely megkeresi a <canvas>

elemet a DOM-ban, s kiolvassa a rajzkrnyezett:
4. fejezet
A rajzvszon rdge.. .
J 97
varc_canvas=document.getElementByid( c ");
varcontext=c_canvas.getContext ("2 d");
Most mr nekillhatunk megrajzolni a vonalakat.
tvonalak
7.0+
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+
Kpzeljk el, hogy tollal rajzolunk egy kpet. Nem akarunk csak gy fejest
ugrani a rajzolsba, mert ha esetleg hibzunk, nem tudjuk majd kijavtani.
Ehelyett elszr ceruzval felvzoljuk a vonalakat, s ha elgedettek vagyunk
velk, kihzzuk a vzlatot tollal.
Minden rajzvszonhoz tartozik egy tvonal (path). Az tvonal meghat
rozsa olyan, mint ceruzval rajzolni. Azt rajzolunk, amit akarunk, de az nem
lesz a vgs alkots rsze, amg tollal ki nem hzzuk.
Ha egyenes vonalakat szeretnnk ceruzval rajzolni, az albbi kt md
szert alkalmazhatjuk:
moveTo (x,
y) -A ceruzt a megadott kezdpontba mozgatja.
lineTo (x,
y) -A megadott vgpontig hz vonalat.
Minl tbbszr hvjuk meg a moveTo () s lineTo ( ) fggvnyeket, annl

hosszabb lesz az tvonal. Ezek " ceruza-tagfggvnyek " - annyiszor hvjuk
meg ket, ahnyszor csak akarjuk, de a rajzvsznon semmit sem fogunk ltni,
amg meg nem hvjuk valamelyik " tolltagfggvnyt".
Kezdjk a piszkosfehr rcs megrajzolsval:
500; x+=lO)
0);
context.lineTo(x, 375);
for(varx=O.S; x<
context.moveTo(x,
}
for(vary=O.S; y<
375;
y+=lO)
context.moveTo(O, y);
context.lineTo(SOO, y);
}
98 l
A rajzvszon rdge...
4. fejezet
A fentiek mind "ceruza-tagfggvnyek", teht tnylegesen mg semmit nem

rajzoltunk a rajzvszonra. Ahhoz, hogy a rajz maradand legyen, egy "toll
tagfggvnyre" van szksgnk:
context. strokeStyle; "!Ieee";
context.stroke();
A stroke() egyike a "tolltagfggvnyeknek": fogja amoveTo () s lineTo ()
hvsokkal meghatrozott bonyolult tvonalat, s tnylegesen felrajzolja
a rajzvszonra. A vonalak sznt a strokeStyle szablyozza. Az eredmnyt

a 4.3. bra mutatja.
4.3. bra
Rajzvszonra rajzolt rcs
4. fejezet
A rajzvszon rdge. .
J 99

Krds: Mirt indul az x s az y 0.5-tl? Mirt nem O-tl?
Vlasz: Minden kppontot gy kell elkpzelnnk, mint egy nagy ngy
zetet. A ngyzet sarkait az egsz szm koordintk (O, l, 2. .. ) jelkpe
zik. Ha egsz szm koordintk kztt rajzolunk egy egy egysg szles
vonalat, az a kppontngyzet mindkt szemben lev oldalt le fogja
fedni, gy az eredmnyknt kapott vonal kt kppont szlessg lesz.
Ha olyan vonalat szecetnnk rajzolni, amelyik csak egy kppont szles,
a koordintkat a vonaira merlegesen el kell tolnunk 0,5-tel.
Most rajzoljuk meg a vzszintes nyilat. Az azonos tvonalon lev vonalak s

grbk rajzolsa ugyanazzal a sznnel (vagy szntmenettel - igen, mindjrt
odarnk) trtnik, mi viszont ms sznnel - piszkosfehr helyett feketvel
- szeretnnk megrajzolni a nylhegyet, ezrt j tvonalat kell kezdennk:
context.beginPath();
context.moveTo (O, 4O) ;
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo (495, 45);
A fggleges nyl ehhez igen hasonl, mivel azonban a szne megegyezik

a vzszintes nyl sznvel, nem kell msik tvonalat kezdennk. A kt nyl
hegy ugyanannak az tvonalnak lesz a rsze:
context .lineTo(60, 153);
Azt mondtam, hogy a nyilak feketk lesznek, de a strokeStyle mg min

dig piszkosfehr. (A fil1Style s strokeStyle tulajdonsgok nem llnak
vissza az alaprtelmezett rtkre, amikor j tvonalat kezdnk.) Ezzel nincs
semmi gond, mert most csak "ceruzavonalakat" hztunk Mieltt azonban
100 l A rajzvszon rdge...
4.
fejezet
tnylegesen, "tollal" megrajzolnnk az brt, a strokeStyle-t feketre kell

lltanunk, klnben a kt nyl is piszkosfehr lesz, s nemigen fogjuk ltni
ket. A kvetkez sarok lltjk feketre a sznt, s rajzoljk ki a vonalakat
a rajzvsznon:
context.strokeStyle
context.stroke();
"#OOO ;
Az eredmnyt a 4.4. bra mutatja.
4.4. bra
Felcmkzetlen tengelyek egy rajzvsznon
Szveg
7.0+
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+

A Mozilla Firefax 3.0-ban a tmogatshoz egy kiegszt (.,shim") szksges
4. fejezet
A rajzvszon rdge . ..
l 101
A rajzvsznakra nem csak vonalakat, hanem szveget is rajzolhatunk A kpet

krlvev weboldalon lev szveggel ellenttben azonban itt nincs dobozmo
dell. Ez azt jelenti, hogy az ismers CSS-eljrsok egyike sem hasznlhat:
nincsenek sztatott elemek, nincsenek kls s bels margk, s nincs szha
tron automatikus sortrs. (Ezt taln nem is bnjuk.) Csak nhny betjel
lemzt llthatunk be, majd kivlaszthatunk egy pontot a rajzvsznon, s
onnan indtva kirhatjuk a szveget.
A rajzkrnyezetben a kvetkez betjellemzket hasznlhatjuk (lsd az
Egyszer
alakzatok" cm rszt a fejezet elejn):
"
A font rtke brmi lehet, amit egy font CSS-szablyba tennnk: betst
lus, betvltozat, betvastagsg, betmret, vonalmagassg s betcsald.
A textAlign a szveg igazrst szablyozza. A text-align CSS

szablyhoz hasonlan mkdik (de nem azonos azzal). Lehetsges rt
kei: start, end, left, right s center.
A textBaseline a szvegnek a kezdponthoz viszonytott helyzett

adja meg. Lehetsges rtkei: top, hanging, middle, alphabetic,
ideographic s bottom.
A textBaseline (szveg-alapvonal) hasznlata bonyolult, mert maguk a sz

vegek is azok. (Na j, nem mindegyik, de egy rajzvszonra brmilyen Unicode
karaktert rajzolhatunk, s az Unicode mr nem olyan egyszer.) A HTML5
szabvnylersa gy magyarzza el a klnbz szveg-alapvonalakat:*
Az em-ngyzet fels vonala (top) egy bettpus karakterjeleinek (glifi
nek) nagyjbl a tetejn hzdik; a fgg alapvonal (hanging) ott,
ahov az olyan glifket horgonyozzk, mint a 3If karakter; a kzpvonal
(middle) flton tallhat az em-ngyzet teteje s alja kztt; az alfabe
tikus alapvonal (alphabetic) az olyan karakterek horgonyvonalt jelzi,
mint az , az y-, az f s az O ; az ideografikus alapvonal (ideographic) az
olyan karakterek horgonyvonalt, mint a b. s a li ; mg az em-ngyzet
als vonala nagyjbl a bettpusok glifinek aljt jelzi. A befoglal do
boz alja s teteje tvol is eshet ezektl az alapvonalaktl, mivel egyes ka
rakterjelek messze tlnylnak az em-ngyzeten (lsd a 4.5. brt).
http://bit.ly/aHCdDO
102
rajzvszon rdge...
4. fejezet
kfeografikus
em-nQvzet a
A befog lal doboz alja
4.5. bra
Szveg-alapvonalak
Az olyan egyszer bck esetben, mint az angol, nyugodtan maradhatunk

a textBaseline tulajdonsg top, middle vagy bottom rtknL
Rajzoljunk is egy kis szveget! A rajzvszon belsejbe rajzolt szveg mag
nak a <canvas> elemnek a betmrett s betstlust rkli, de ezt fell
brlhatjuk, ha mdostjuk a font tulajdonsg rtkt a rajzkrnyezetben:
context. font= "bold 12px sans-serif" ;
context.fillText( "x", 248, 43);
context.fillText("y", 58, 165);
A tnyleges szveget a fillText ( ) tagfggvny rajzolja ki:

context. font= "bold 12px sans-serif";
context.fillText( "x", 248, 43);
context.fillText("y", 58, 165);

Krds: Megadhatok viszonytott betrnretet is, amikor rajzvszonra raj
zo/ok szveget?
Vlasz: Igen. Mint egy oldal minden ms HTML-elemnek, magnak
a <canvas> elemnek is van egy szmtott betmrete, amely az oldal
CSS-szablyain alapul. Ha a context. font tulajdonsgot egy olyan
relatv betmrettel adjuk meg, mint az l. Sem vagy a 150%, a bng
sz ezt a <canvas> elem szmtott betmretvel fogja sszeszorozni.
4. fejezet
l 103
Tegyk fel, hogy a bal fels sarokba kerl szveg esetben azt szeretnnk,
hogy a szveg teteje y=S-nl hzdjon. Viszont lustk vagyunk, s nem akar
juk megmrni a szveg magassgt, s kiszmtani az alapvonalat. Ehelyett
bellthatjuk a textBaseline tulajdonsgot a top rtkre, s tadhatjuk
a szveget befoglal doboz bal fels sarknak koordintjt:
context. textBaseline
"top";
context.fillText( "(O,
O)", 8, 5);
Most pedig jjjn a jobb als sarokba kerl szveg! Tegyk fel, hogy a szveg
jobb als sarkt a (492,
370) koordintkra szeretnnk helyezni- csupn
nhny kppontnyira a rajzvszon jobb als sarktl -, de megint csak nem

akarjuk megmrni a szveg magassgt vagy szlessgt. lltsuk a textAlign
tulajdonsgot right (jobbra), a textBaseline tulajdonsgot pedig bottom
(alul) rtkre, majd hvjuk meg a fillText ( ) tagfggvnyt a szveget befog
lal doboz jobb als sarknak koordintival:
context. textAlign
"right ";
context. textBaseline
context. fillText (
"bottom";
" ( 500, 375 ) ", 492, 370);
(0,0)
(500,375)
4.6. bra
104 l
Felcmkzett tengelyek egy rajzvsznon
A rajzvszon rdge...
4. fejezet
Hopp! Elfelejtettk a pontokat a sarkokban! Hamarosan megtudjuk, hogyan

rajzolhatunk krket, de most csalunk egy kicsit, s ngyszgekknt rajzoljuk
meg a pomokat (lsd az "Egyszer alakzatok " cm rszt a fejezet elejn):

context.fillRect(O, O, 3, 3);
context.fillRect(497, 372, 3, 3);
Ennyi az egsz! A vgeredmnyt a 4.7. brn lthatjuk.
(0,0)
-------- --------
(500 ,375)
4.7. bra
Rajzvszonkoordinta-diagram egy rajzvsznon
Sz ntmenetek
Andmid
Lineris szntmenetek 7 .0+
3.0+
3.0+
Sug_aras szntmenetek .
3.0+
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+
10.0+
1.0+
1.0+
A fejezet korbbi rszben megtanulruk, hogyan rajzolharunk egyetlen szn

nel kirlttt ngyszgeket (lsd az "Egyszer alakzatok" cm rszt a fejezet
elejn), illetve egyszn vonalakat ("tvonalak", szintn ebben a fejezetben).
4.
fejezet
A rajzvszon rdge. ..
105
A lehetsgeink azonban nem korltozdnak egyszn alakzatokra s vo

nalakra - szntmenetekkel (gradient) mindenfle dolgot varzsolhatunk.
A 4.8. brn lthatunk egy pldt.
A lerkd ugyanolyan, mint brmely ms rajzvszon esetben:
<canvas id= ct
width=
"
300 height= "225"></canvas>

.
Elszr meg kell keresnnk a <canvas> elemet, s ki kell olvasnunk a rajz

krnyezetr:
var d_canvas = document. getElementByid ( "d");
var context = d_canvas. getContext ( "2d");
4.8. bra
Balrl jobbra halad lineris szntmenet
Ha megvan a rajzkrnyezet, nekilthatunk meghatrozni egy szntmenetet.

A szntmenet egyenletes tmenetet jelent kt vagy tbb szn kztt. A rajz
vszon rajzkrnyezete ktfle szntmenetet tmogat:
A createLinearGradient(xO,
tl az (xl,
yO,
x l,
yl) az (xO,
yO) pont
yl) pontig tart egyenes mentn fest.
A createRadialGradient(xO,
yO,
rO,
x l,
yl,
rl) egy kt
kr ltal meghatrozott kp mentn fest. Az els hrom paramter adja

meg a kezdkrt, amelynek a kzppontja (xO,
yO), a sugara pedig rO.
Az utols hrom paramter a zrkrt hatrozza meg, (x l,
yl) kzp
ponttal s rl sugrral.
Ksztsnk lineris szntmenetet! A szntmenetek tetszleges mretek lehet
nek, de ezt most a rajzvszonnal megegyezen 300 kppont szlesre vesszk:
106
4.
fejezet
var my_gradient
context.createLinearGradient(O, O, 300, 0);
Mivel mindkt y-rtk (a msodik s a negyedik paramter) O, a szntmenet

balrl jobbra egyenletes lesz.
Miutn ltrehoztunk egy szntmenet-objektumot, meghatrozhatjuk
a szntmenet szneit. A szntmenetek kt vagy tbb sznllomsbl llnak,
amelyek a szntmenet brmely pontjn lehetnek. Sznllomst gy adha
tunk a szntmenethez, hogy megadjuk a helyzett (pozcijt) az tmenet
mentn. A szntmenet-pozcik O s l kztt tetszleges rtket vehetnek fel.
Hatrozzunk meg egy olyan szntmenetet, amely feketbl (black) fe
hrbe (white) tart:
my_gradient. addColorStop
(0,
"black");
my_ gradient.addColorStop (l, "white");
A szntmenet meghatrozsval mg semmit nem rajzolunk a rajzvszonra,

csupn egy objektumot hozunk ltre valahol a memriban. A szntmenet
megrajzolshoz a fil1St yle rtkl kell adnunk a szntmenetet, s rajzol
nunk kell egy alakzatot (pldul egy ngyszget) vagy egy vonalat:
context. fillStyle
my_gradient;
300, 225);
context.fillRect(O, O,
4.9. bra
Balrl jobbra tart lineris szntmenet
Tegyk fel, hogy egy olyan szntmenetet szeretnnk, amely fellrl lefel
halvnyodik. Amikor ltrehozzuk a szntmenet-objektumot, az x-rtkek (az
els s a harmadik paramter) legyenek llandk, mg az y-rtkek (a msodik
s a negyedik paramter) essenek O s a rajzvszon magassga kz:
4. fejezet
A rajzvszon rdge .
. .
J 107
var my_gradient
context.createLinearGradient (O,
O, O, 225) ;
my_gradient.addColorStop (0, "black");

my_gradient.addColorStop (l, "white");
context.fillStyle
my_gradient;
context.fillRect(O, O,
300, 225);
4.1 O. bra
Fellrllefel halad lineris szntmenet
tls szntmeneteket is ltrehozhatunk. Lssunk egy pldt:

var my_gradient
context.createLinearGradient (0,
O, 300, 225);
my_gradient.addColorStop(O, "black");
my_gradient. addColorStop
context.fillStyle
context.fillRect
(0,
(l,
"white");
my_gradient;
O,
300, 225);
Az eredmnyt a 4.11. brn lthatjuk.
4.11. bra
108
tls lineris szntmenet
4.
fejezet
Kpek
7.0+
3.0+
3.0+
Cbrome_Ooera
iPhone
Android
3.0+
1.0+
1.0+
10.0+
A 4.12. brn egy macskrl kszlt rajzor lthatunk, amelyet az <img> elem
jelent meg.
'
-
4.12. bra
''
Macska egy <img> elemben
A 4.13. bra ugyanezt a macskt mutatja, de egy rajzvszonra rajzolva.
....,.._ J:
4.13. bra
Macska egy <canvas> elemben
Tbb mdja is van annak, hogy kpeket rajzoljunk egy rajzvszonra:
A drawimage (kp,
dx,
dy) fogja a paramterkm radott kpet, s
a rajzvszonra rajzolja. A megadott (dx,

fels sarkt jellik. Ha a (0,
dy) koordintk a kp bal
0) koordintkat adjuk meg, a kp a rajz
vszon bal fels sarkba kerl.

4. fejezet
J 109
A drawimage (kp,
adott kpet,
dw
dy,
szlessgre s
rajzolja a megadott
(dx,
A drawimage (kp,
dx,
dy)
sx,
dw,
fogja a paramterknt t
dh)
magassgra lltja, s a rajzvszonra
dh
koordintkon.
sy,
sw,
sh,
dx,
a paramterknt tadon kpet, kivgja belle az
dy,
(sx,
dw,
dh)
fogja
sy,
sw,
sh)
ngyszget, a kivgott rszt dw szlessgre s dh magassgra lltja, s

a rajzvszonra rajzolja a
(dx,
dy)
koordintkon.
A HTML5 szabvny lersa gy magyarzza el a drawimage () paramtereit
(http://bit.ly/9WTZAp):
A
forrsngyszg az a ngyszgletes terlet [a forrskpen bell], amely
nek a sarkait az
(sx,
sy+sh)
(sx,
sy), (sx+sw,
sy), (sx+sw,
sy+sh)
pontok adjk meg.
A clngyszg az a ngyszgletes terlet [a rajzvsznon bell], amelynek
a sarkait a
dy+dh)
(dx,
dy), (dx+dw,
dy), (dx+dw,
dy +dh)
(dx,
pontok adjk meg.
A fenti paramtereket a 4.14. bra szemllteti.
Ha kpet szeretnnk rajzolni egy rajzvszonra, akkor szksgnk van egy

kpre. A kp lehet egy mr ltez <img> elem, de ltrehozhatunk egy
Image
objektumot is JavaScript-kd segtsgveL Mindkt esetben gondoskodnunk

kell azonban arrl, hogy a kp teljesen betltdjn, mieltt a rajzvszonra
rajzolhatnnk.
Ha egy meglev
<img>
elemet hasznlunk, biztonsgosan a rajzvszonra
rajzolhatjuk a window.onload esemny sorn:

<img id= ca t src= "images/cat .png
alt=" sleeping cat
width="177
height="ll3">
<canvas id="e" width="177 height= "113"></canvas>
<script>
window. onload = function ( )
var canvas = document. getElementByid( e") ;

var context
canvas. getContext ("2d ");
var cat= document. getElementByid ("cat");

context.drawlmage(cat,
O, 0);
};
</script>
110
A rajzvszon rdge...
4. fejezet
Forrskp
sy
Rajzvszon
sx
dx
dh
4.14. bra
fgy kpez le egy kpet a drawlmage() egy rajzvszonra
Ha a kpet teljes egszben JavaScript-kddal hozzuk ltre, a kpet az Image.

on load
esemny sorn rajzolhatjuk biztonsgosan a rajzvszonra:
<canvas id= e" width="l77 height= 113 "></canvas>

"
<script>
var canvas
var context
document.getElementByid("e");
canvas. getContext ("2 d");
var cat = new Image() ;

cat.src
"images/cat.png ";
cat. onload = function () (

context.drawlmage(cat, O, 0);
};
</script>
A drawimage ( ) tagfggvny elhagyhat harmadik s negyedik paramtere
a kp mrett szablyozza. A 4.15. bra ugyanezt a macskarajzor mutatja, de

feleakkora szlessgben s magassgban, s klnbz koordintkon tbb
szr kirajzolva egy rajzvsznon bell.
4. fejezet
rajzvszon rdge... l lll
"
A "macskamintt ez a parancskd lltja el:

ca t. onload = function()
for(varx=O, y=O;
x< 500 && y< 375;
x+=50, y+= 37)
context.drawimage(cat, x, y,
88, 56);
)
);
4.15. bra
Macskamintal
Ez a sok erfeszts felvet egy jogos krdst: mirt akarnnk egyltaln egy
rajzvszonra rajzolni egy kpet? Milyen elnyei vannak ennek a bonyolultabb
megoldsnak egy <i mg> elemmel s nhny CSS-szabllyal szemben? Mg
"
a "macskamintt is el tudnnk lltani 10 egymst tfed < img> elemmel.
A vlasz rviden annyi, hogy ugyanazrt tesznk ilyesmit, amirt szveget
"
rajzolnnk egy rajzvszonra (lsd a fejezet korbbi, "Szveg cm rszt).
A rajzvszonkoordinta-diagramunk (lsd a fejezet korbbi, "Rajzvszon112 l A rajzvszon rdge...
4. fejezet
koordintk" cm rszt) szveget, vonalakat s alakzatokat is tartalmazott,

a rajzvszonra rajzolt szveg teht csak egy rsze volt egy nagyobb alkotsnak.
Egy mg bonyolultabb diagramon a drawimage ( ) segtsgvel egyszeren
feltntethetnnk ikonokat s ms kpelemeket is.

A Microsoft Internet Explorer (a 8-as vltozattal bezrlag, amely knyvnk
rsnak idejn a legfrissebb kiads volt) nem tmogatja a Canvas API-t, vi
szont a Microsoft sajt megoldst, a VML-t igen, amely sok szempontbl
hasonl dolgokra kpes, mint a <canvas> elem. gy szletett meg az
excanvas.js.
Az ExplorerCanvas
(http:l!code.google.comlplexplorercanvasl)- excanvas.js
-egy nylt forrs, az Apache License hatlya al tartoz JavaScript-knytr,

amely megvalstja a Canvas API-t az Internet Explorerben. A hasznlathoz
az albbi <script> elemet kell elhelyeznnk az oldalunk elejn:
<' DOCTYPE html>
<html>
<head>
<me ta charset="utf-8 ">
<title>Dive Into HTML 5</title>

</head>
<body>
</body>
</html>
A rszek feltteles megjegyzsek, amelye
ket az Internet Explorer gy rtelmez, mint egy if ( " ha" ) utastst: "ha az
aktulis bngsz az Internet Explorer brmelyik vltozata, hajtsd vgre ezt
a kdblokkot". Minden ms bngsz HTML-megjegyzsknt kezeli a teljes
blokkot. Az eredmny: az Internet Explorer letlti s vgrehajtja az excanvas.
js parancsfjlt, a tbbi bngsz azonban teljesen figyelmen kvl hagyja
(nem tlti le, nem hajtja vgre stb.), gy az oldal gyorsabban tltdik be azok
ban a bngszkben, amelyek bels tmogatst nyjtanak a Canvas API-hoz.
4. fejezet
A rajzvszon rdge...
113
Ha beemeltk az excanvas.js parancsfjlt az oldal <he ad> rszben, mst

mr nem kell tennnk ahhoz, hogy kpess tegyk az Internet Explorert
a rajzvszon kezelsre. Csak hozz kell adnunk a <canvas> elemeket a le
rkdhoz, vagy dinamikusan ltrehozni azokat JavaScript segtsgveL
A <canvas> elemek rajzkrnyezett a fejezet utastsait kvetve olvashatjuk
ki, s mris rajzolhatunk alakzatokat, szveget s mintzatokat.
Illetve ... nem egszen. Van nhny korltozs:
A szntmenetek (lsd a fejezet korbbi, "Szntmenetek " cm rszt)

csak linerisak lehetnek, mert az excanvas.js nem tmogatja a sugaras
szntmeneteket.
A mintzatoknak mindkt irnyban ismtldnik kell.

A kivghat terletek nem tmogatottak.
A krvonalak mretezse helytelen lesz, ha nem egysgesen mreteznk.
Az excanvas.js lass. Ez persze senkit nem rhet nagy meglepetsknt,
hiszen az Internet Explorer JavaScript-feldolgozja eleve lassabb ms
bngszknL Ha bonyolult alakzatokat kezdnk rajzolni egy olyan
JavaScript-knyvtron keresztl, amely az utastsokat egy teljesen ms
technolgira fordtja le, a feldolgozs lelassul. A sebessgcskkenst nem
fogjuk szrevenni, ha olyan egyszer mveleteket vgznk, mint nhny
vonal rajzolsa vagy egy kp transzformcija, de azonnal feltnik majd,
ha rajzvszon alap animciba vagy ms rlt dolgokba kezdnk.
Az excanvas.js hasznlatnak van mg egy htultje, amibe akkor szaladtam

bele, amikor elksztettem ennek a fejezetnek a pldit. Az ExplorerCanvas
automatikusan elkszti a sajt l-rajzfellett, amikor beemeljk az excanvas.js
parancsfjlt egy HTML-oldalba, ez azonban nem jelenti azt, hogy az Internet
Explorer is rgtn hasznlatba tudja venni. Bizonyos esetekben megtrtn
het, hogy az l-rajzfellet majdnem hasznlatra ksz, de nem teljesen. Ennek
az llapotnak az elsdleges jele az, hogy az Internet Explorer panaszkodik,
hogy " az objektum nem tmogatja ezt a tulajdonsgot vagy tagfggvnyt",
amikor csinlni prblunk valamit egy <canvas> elemmel, pldul meg
prbljuk kiolvasni a rajzkrnyezett.
A legegyszerbb megolds erre a problmra az, ha minden rajzvszon
mveletet elhalasztunk az on load esemny utnra. A betlts eltarthat egy
ideig - pldul ha az oldalon sok kp vagy vide tallhat, az kslelteti az
114 l A rajzvszon rdge ...
4. fejezet
esemny bekvetkezst- de idt ad az ExplorerCanvasnak, hogy

felkszljn a varzslatra.
onload
Egy teljes plda

A Halma egy tbb vszzados tblajtk, amelynek szmos vltozata ltezik.
Ebben a pldban a Halmnak egy egyszemlyes vltozatt ksztettem el,
kilenc "bbuval " egy 9 x 9-es tbln. A jtk kezdetn a bbuk egy 3 x 3-as
ngyzetet formznak a tbla bal als sarkban. A jtk clja az, hogy addig
mozgassuk a bbukat, amg a tbla jobb fels sarkban nem alkotnak egy 3
x 3-as ngyzetet, mghozz a lehet legkevesebb lpssel.
A Halmban ktfle lps megengedett:
Fogunk egy bbut, s valamelyik res szomszdos mezre lpnk vele.

Az "res mez" azt jelenti, hogy a mezben jelenleg nem tartzkodik
bbu. A "szomszdos mez" olyan mez, amely kzvetlenl a bbu je
lenlegi helye felett vagy alatt, attl kzvetlenl jobbra vagy balra, kzvet
lenl tlsan balra felfel vagy lefel, illetve kzvetlenl tlsan jobbra
felfel vagy lefel tallhat. (A tbla egyik oldala nem folytatdik a m
sik oldalon, teht a bal szls oszlopban lev bbuk nem mozoghatnak
balra, illetve tlsan balra felfel vagy lefel, a jobb szls oszlopban lev
bbuk pedig nem mozoghatnak jobbra, illetve tlsan jobbra felfel vagy
lefel.)
Fogunk egy bbut, s tugrunk vele egy vagy- ha tehetjk- tbb szom
szdos bbut. Teht ha tugrunk egy szomszdos bbut, majd egy msi
kat, amely az j pozcival szomszdos mezben ll, az egyetlen lpsnek
szmt. St, tetszleges alkalommal ugorhatunk egyms utn, az mg
mindig ugyanaz a lps lesz. (Mivel a cl a lehet legkevesebb lpsbl
megoldani a feladatot, a Halmban akkor jtszunk jl, ha egy-egy mezt
kihagyva hossz lncot ptnk a bbukbl, hogy a tbbi bbu minl
tbbet tugorhasson kzlk.)
A jtkrl a 4.16. brn lthatunk egy kpernyfelvtelt. Az Interneten (http:/1

diveintohtml5.orglexampleslcanvas-halma.html) is jtszhatunk vele, ha meg
szecetnnk vizsglni a bngsznk fejleszteszkzeiveL
4.
fejezet
rajzvszon rdge .. l
.
115
De hogyan mkdik a jtk? rlk a krdsnek. Itt nem fogom az egsz

kdot bemutatni (de ha kvncsiak vagyunk r, megtallhatjuk a http:/1
diveintohtml5.orglexampleslhalmajs cmen). Magnak a jtkot vezrl kd
nak a nagyjt kihagyom, de kiemelnk nhny olyan kdrszt, amely a rajz
vszonra rajzolssal kapcsolatos, illetve a <canvas> elemen vgrehajtott
egrkattintsokat kezeli.
ooo
ooo
ooo
Lps: O
l
4.16. bra
A Halmajtk kezdllsa
A jtkot az oldal betltse kzben ksztjk el, a <canvas> elem mretei

nek belltsval, illetve egy a rajzvszon rajzkrnyezetre mutat hivatkozs
elraktrozsval:
gCanvasElement. width= kPixelWidth;
gCanvasElement. height = kPixelHeight;
gDrawingContext= gCanvasElement. getContext ("2 d") ;
116
A rajzvszon rdge...
4. fejezet
Ezt kveten valami olyasmit csinlunk, amivel eddig mg nem tallkoz

tunk: hozzadunk egy esemnykezelt a <canvas> elemhez, amellyel a kat
timsi esemnyeket (click) figyeljk:
gCanvasElement. addEventListener ( "click", halmaOnClick, false);
A halmaOnClick() fggvny akkor hvdik meg, amikor a felhasznl
valahol a rajzvszonra kattint. A fggvny argumentuma egy MouseEvent

(egresemny) objektum, amely megadja, hogy a felhasznl hol kattintott:
function halmaOnClick(e) {
var cell= getCursorPosition(e);
l l a tbbi csak a jtk vezrllogikja

for (var i=O; i<gNumPieces; i++) {
if ((gPieces [i]. row == cell.row)
&&
(gPieces [i]. column== cell.column))

clickOnPiece(i);
return;
J
J
clickOnEmptyCell(cell);
A kvetkez lps, hogy fogjuk a MouseEvent objektumot, s kiszmtjuk,
hogy a felhasznl a Halma-tbla melyik mezjre kattintott. A Halma-tbla

elfoglalja az egsz rajzvszont, teht minden kattints a tbla valamelyik r
szre trtnik - csak ki kell dertennk, hogy melyikre. Ez nem egyszer,
mert az egresemnyeket szinte minden bngszben mskpp valstot
tk meg:
function getCursorPosition(e)
var x;
var y;
if (e.pageX ll e.pageY)
x= e.pageX;
y= e.pageY;
)
else {
x= e. clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y= e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
4. fejezet
A rajzvszon rdge ...
117
Itt mg a dokumentumhoz (vagyis a teljes HTML-oldalhoz) viszonytott
s y koordintink vannak, de mi a rajzvszonhoz viszonytott koordintkat

szeretnnk. gy juthatunk hozzjuk:
x-= gCanvasElement.offsetLeft;
y-= gCanvasElement.offsetTop;
Az
s y koordintink most mr a rajzvszonhoz viszonytottak (lsd

a "Rajzvszon-koordintk " cm rszt a fejezet korbbi rszben), vagyis ha
most x = O s y
0, akkor tudjuk, hogy a felhasznl a rajzvszon bal
x
fels sarkban tallhat kppontra kattintott.

Innen mr kiszmthatjuk, hogy a felhasznl melyik Halma-mezre kat
tintott, majd ennek megfelelen cselekedhetnk:
var cell= new Cell(Math. floor(y/kPieceHeight),
Math.floor(x/kPieceWidth));
return cell;
Hha! Az egresemnyekkel nem knny bnni! Viszont ugyanezt a logikt

(st akr pontosan ezt a kdot) alkalmazhatjuk minden rajzvszon alap
alkalmazsban. Jegyezzk meg: egrkattints->dokumentumhoz viszony
tott koordintk->rajzvszonhoz viszonytott koordintk->alkalmazs
fgg kd.
Ok, akkor most nzzk a f rajzoleljrst. Mivel a grafika nagyon egy
szer, gy dntttem, hogy minden lps utn trlm s jrarajzolom az
egsz tblt, de ez nem felttlenl szksges. A rajzvszon rajzkrnyezete
megrzi, amit korbban a vszonra rajzoltunk, mg akkor is, ha a felhasznl
kigrdti a rajzvsznat az ablakbl, vagy egy msik bngszlapra vlt, aztn
ksbb visszatr a jtkhoz. Ha bonyolultabb grafikj rajzvszon alap jt
kot (pldul valamilyen gyessgi jtkot) fejlesztnk, nvelhetjk a sebess
gt, ha nyomon kvetjk a rajzvszon "piszkos" mezit, s csak azokat rajzol
juk jra - ez azonban tlmutat ennek a knyvnek a keretein. me a tblt
tisztra trl kd:
gDrawingContext.clearRect(O, O, kPixelWidth, kPixelHeight);
A tblarajzol eljrsnak mr ismersnek kell lennie: nagyon hasonlt ahhoz,

ahogy a rajzvszonkoordinta-diagramot rajzoltuk meg (lsd a fejezet "Rajz
vszon-koordintk" cm rszt):
118
A rajzvszon rdge...
4. fejezet
gDrawingContext.beginPath();
l* fggleges vonalak* l
for (var x=0; x<= kPixelWidth; x+= kPieceWidth)
gDrawingContext.moveTo (0.5+x, 0);
gDrawingContext .lineTo (0.5+ x, kPixelHeight);
l* vizszintes vonalak*l
for (var y=0; y<=kPixelHeight; y+= kPieceHeight)
gDrawingContext .moveTo (O, O.5+ y);
gDrawingContext.lineTo (kPixelWidth, O.5 + y);
l * Raj zoljuk ki! *l

gDrawingContext.strokeStyle= "#ccc ";
gDrawingContext.stroke();
Az igazi mka akkor kezddik, amikor nekiltunk megrajzolni az egyes b

bukat. A bbukat egy-egy kr jelkpezi - ilyesmit sem rajzoltunk mg.
Tovbb, ha a felhasznl kivlaszt egy bbut, amellyel lpni szeretne, ezt
a bbut egy kitlttt krrel szeretnnk jellni. Az albbiakban a p argumen
tum jelkpezi a bbut, a bbu jelenlegi helyt a tbln pedig ennek a
s
column
(oszlop) tulajdonsgai. A
(column,
row)
row (sor)
koordintkat n
hny, csak ebben a jtkban rvnyes lland segtsgvel lefordtjuk rajzv

szonhoz viszonytott (x,
y) koordintkra, majd rajzolunk egy krt, s (ha
a felhasznl kivlasztotta a bbut) kitltjk azt egy sznnel:

function drawPiece (p, selected)
var column= p.column;
var row=p. row;
var x= (column* kPieceWidth)+ (kPieceWidthl2);
var
y=
(row * kPieceHeight) + (kPieceHeight l2);
var ractius = (kPieceWidth/2) - (kPieceWidthllO);
Itt r vget a jtk programlogikja. Most mr megvannak a rajzvszonhoz

viszonytott (x,
y) koordintink, amelyek megadjk a kirajzolni kvnt
kr kzppontjt. A Canvas API-ban nincs circle () tagfggvny, de arc()

tagfggvny igen- a kr (circle) pedig nem ms, rnint egy nmagba zrd
v (arc), nem igaz? Mrtan alapfokon. Az arc() tagfggvnynek egy (x, y)
kzppontot, egy sugarat, egy kezd- s zrszget (radinban), valamint
egy irnyjelzt
4. fejezet
(false,
ha az ramutat jrsval egyez, s
true,
A rajzvszon rd g e...
ha az
119
ramutat jrsval ellenttes) kell tadnunk. A radinszmtshoz a Java

Scriptbe beptett Math modult hasznlhatjuk:
gDrawingContext.beginPath();
gDrawingContext.arc(x, y, radius, O, Math.PI*2, false);
gDrawingContext.closePath();
Vrjunk csak! Semmi nem rajzoldik ki! A moveTo( ) s l i neTo() tagfgg

vnyekhez hasonlan az arc( ) is "ceruza-tagfggvny" (lsd a fejezet "tvo
nalak" cm rszt): ahhoz, hogy a krt valban kirajzoljuk, be kell llta
nunk a krvonalstlust (strokeStyle), s meg kell hvnunk a
tagfggvnyt, hogy "tollal" kihzzuk a ceruzavonalakat:
gDrawingContext.strokeStyle
stroke()
"#OOO";
gDrawingContext.stroke();
Mi a helyzet akkor, ha kivlasztott bburl van sz? Nos, ekkor jrahaszno

sthatjuk azt az tvonalat, amelyet a bbu krvonalnak megrajzolsra hoz
tunk ltre, s kirlthetjk egy sznnel:
if (selected) {
gDrawingContext.fillStyle
"#OOO ;
gDrawingContext.fill();
Lnyegben ennyi az egsz. A program tbbi rsze a jtkot vezrl logika:

a szablyos s szablytalan lpsek megklnbztetse, a lpsek szmnak
nyomon kvetse, a jtk vgnek megllaptsa. Kilenc krrel, nhny egye
nes vonallal s egy onclick esemnykezelvel megalkottunk egy teljes jt
kot egy
<canvas>
elemben! ljen!
Tovbbi olvasmnyok
Canvas-ranfolyam (https:lldeveloper. mozilla. orglen!Canvas_tutorial) a

Mozilla Developer Center webhelyn
Mihai Sucan: "HTML5
canvas
the basics" (http:!!dev.opera.com /
articles/view!html-5-canvas-the-basics/)
Canvas Dernos (http:!!www.canvasdemos.com}: bemutatk, eszkzk s
oktatanyagok a HTML <canvas> elemhez
"
"The canvas element (http:llbit.lyi9]Hz0j) a HTML5 szabvnyterve
zetben
120 l A rajzvszon rdge...
4.
fejezet
5.
Vide
fejezet
Weben
Ugorjunk fejest!
Brki, aki elltogatott a YouTube.com oldalra az elmlt ngy vben, tudja,
hogy a weboldalakba videkat is begyazhatunk A HTMLS eltt azonban
ennek nem volt szabvnyokon alapul mdja. Lnyegben minden vide,
amit valaha lttunk " a Weben", egy kls bvtmny (plug-in) - esetleg
a QuickT ime, a RealPlayer vagy a Flash - segtsgvel jutott el hozznk.
(A YouTube a Flash-t hasznlja.) Ezek a bvtmnyek elg jl beplnek
a bngszbe, ezrt nem is nagyon vesszk szre, amikor hasznljuk ket legalbbis amg egy olyan rendszeren nem prblunk megtekinteni egy
videt, amelyik nem tmogatja az adott bvtmnyt.
A HTMLS ezzel szemben szabvnyos mdszert hatroz meg a videk
weboldalakba gyazsra: a <video> elem hasznlatr. A <video> elem
tmogatsa mg kplkeny - ami udvarias megfogalmazsa annak, hogy
egyelre nem mkdik (legalbbis nem mindenhol). De ne essnk ktsgbe!
Bsgesen van alternatva, alaprtelmezs s kerlt. Az 5.1. tblzat
megmutatja, hogy knyvnk rsnak idejn mely bngszk tmogattk
a <video> elemet .
./
./
./
./
./
./
Magnak a <video> elemnek a tmogatsa azonban csak egy kis rsze

a trtnetnek. Mindazonltal, mieltt a HTMLS-videkrl beszlhetnnk,
tbbet kell tudnunk a videkrl gy ltalban. (Ha ezen a tren kielgtek
az ismereteink, nyugodtan ugorjunk az " Ami a Weben mkdik " cm

rszre.)
5.
fejezet
Vide a Weben l 121
Videatralk
A videofjlokra ltalban gy szoktunk gondolni, hogy "A VI-fjlok" vagy
"
"
"
"MP4-fjlok , a valsgban azonban az "AVI s az " MP4 csupn trol
formtumok. Ahogy egy ZIP-fjl is brmilyen tpus fjlt tartalmazhat,
a videotrol-formtumok is csak azt hatrozzk meg, hogy miknt kell bennk
trolni adatokat - azt viszont nem, hogy ezek milyen fajta adatok lehetnek.
(A dolog persze kicsit bonyolultabb ennl, mivel nem minden video-adatfolyam
tehet brmilyen formtum trolba, de ezzel most ne trdjnk.)
A vicleofjlok ltalban tbb svbl (track) llnak: egy videosvbl (hang
nlkl), s egy vagy tbb audiosvbl (kpet nem tartalmaz hangsvbl).
A svok jellemzen ssze vannak kapcsolva: a hangsvok pldul jelzket
tartalmaznak, amelyek a kp s a hang sszehangolst segtik. Az egyes s
vokhoz metaadatok is rendelhetk, pldul a kp oldalarnya vagy a hangsv
nyelve. A trolknak szintn lehetnek metaadataik, pldul a vide cme, a
vide "bortkpe", (tv-msorok esetben) az epizd sorszma, s gy tovbb.
Rengeteg vicleotrol-formtum ltezik. A legnpszerbbek kz tartoz
nak pldul az albbiak:
MPEG-4
Az MPEG-4 fjlok kiterjesztse ltalban .mp4 vagy .m4v. Az MPEG-4
trol az Apple rgebbi QuickTime trolformtumn (.mov) alapul.
Az Apple webhelyn megtekinthet filmelzetesek mg mindig a rgi
QuickTime formtumot hasznljk, az iTunes-rl rendelt mozifilme
ket azonban MPEG-4 trolha csomagolva kapjuk meg.
Flash Video
A Flash-videofjlok kiterjesztse ltalban .flv. A Flash-videk ksz
tsre - nem meglep mdon - az Adobe Flash programot hasznl
jk. A Flash 9.0.60.184 (ms nven: Flash Player 9 Update 3) eltt ez
volt az egyetlen trolformtum, amelyet a Flash tmogatott, a Flash
jabb vltozatai azonban mr az MPEG-4 trolt is ismerik.
Ogg
Az Ogg-fjlok kiterjesztse ltalban .ogv. Az Ogg nylt szabvny,
amely tmogatja a nylt forrst, s nem veri bilincsbe semmilyen
szabadalom. A Firefox 3.5, a Chrome 4 s az Opera 10.5 beptett
tmogatst knl hozz, teht az Ogg trolformtumhoz, az Ogg
videkhoz ( "Theora" ) s az Ogg-hangfjlokhoz (" Vorbis" ) ezekben
122 l Vide a Weben
5. fejezet
a bngszkben nincs szksg kln az adott rendszerre rt bvtm

nyekre. Az asztali opercis rendszerek kzl minden fontosabb
Linux-terjeszts beptett tmogatst nyjt az Ogg-hoz, de Mac-en s
Windowson is hasznlhat, ha teleptjk a QuickTime-sszetevket
(Mac), illetve DirectShow-szrket (Windows). Az Ogg-fjlok min
den rendszeren lejtszhatk a kitn VLC (http:llwww.videolan.org/
vlcl) segtsgvel is.

WebM
A WebM-fjlok kiterjesztse .webm. A WebM egy j trolformtum,
amely a felptse szempontjbl nagyon hasonlt a Marroska nev
formtumra. A WebM-et a 2010-es Google 1/0-n jelentettk be, s
kizrlagosan a VP8 videokodekkel, illetve a Yorbis audiokodekkel
val hasznlatra terveztk. (Ezekrl hamarosan bvebben is szt ej
tnk.) A Chromium, a Google Chrome, a Mozilla Firefox s az Opera
kvetkez vltozatai beptve, az adott rendszerre rt bvtmnyek nl
kl fogjk tmogarni. Az Adobe ezenkvl bejelentette, hogy a Flash
kvetkez vltozata is tmogatja majd a WebM-videkat.
Audio Video Interleave

Az Audio Vicleo Interleave-fjlok kiterjesztse ltalban .avi. Az AVI
trolformtumot a Microsoft fejlesztette ki egy boldogabb idben,
amikor mr az is csodaszmba ment, hogy a szmtgp egyltaln
kpes viclet lejtszani. Az AVI hivatalosan nem tmogatja az jabb
trolformtumok szmos szolgltatst, pldul hivatalosan semmi
lyen video-metaadatot nem engedlyez, st a ma hasznlatban lev
modern video- s audiokodekek tbbsgnek hasznlatt sem. Az
idk sorn a klnbz cgek - egymssal ltalban ssze nem fr
mdon - megprbltk kibvteni, hogy tmogassa ezt vagy azt, s
az AVI mig az alaprtelmezett trolformtuma az olyan npszer
kdolprogramoknak, mint az MEncoder (http://www.mplayerhq. hul
DOCS/HTML/enlencoding-guide.html).
Videokodekek
Amikor azt mondjuk, hogy " megnznk egy videt", valsznleg egy video
adatfolyam s egy audio-adatfolyam egyttesre gondolunk, de nem kt
5.
fejezet
Vide a Weben l 123
kln fjlunk van, csak "egy videnk ", ami lehet egy AVI-fjl vagy- mond
juk- egy MP4-fjl. Ahogy az elz rszben emltettem, ezek csupn trol
formtumok, mint a ZIP, amelyben tbbfle fjl is lehet. A trolformtum
szabja meg, hogy a video- s audio-adatfolyamokat hogyan lehet egyetlen
fjlban trolni.
Amikor "megnznk egy videt ", a videolejtsz egyszerre tbb dolgot

is csinl:
rtelmezi a trolformtumot, hogy kidertse, milyen video- s hang

svok llnak rendelkezsre, s azok hogyan troldnak a fjlon bell,
hogy kpes legyen megtallni a kvetkezknt visszafejtend adatokat.
Visszafejti a videofolyamot, s megjelenti a kpek sorozatt a kpernyn.

Visszafejti az audiofolyamot, s a hangot a hangszrkra kldi.
A videokodek az az algoritmus, amellyel a vicleofolyamot kdoltk - vagyis

azt adja meg, hogy miknt kell vgrehajtani a 2. lpst a fentiek kzl.
(A "kodek " sz a "kdol " s "dekdol " kifejezsek kombincijbl szle
tett.) A videolejtsznk a videokodeknek megfelelerr visszafejti ( "dekdolja")
a videofolyamot, majd megjelenti a kpek sorozatt (a "kpkockkat", frame)
a kpernyn. A legtbb modern videokodek mindenfle trkkel igyekszik
cskkenteni az egyms utni kpkockk megjelentshez szksges inform
cimennyisget, pldul ahelyett, hogy minden egyes kpkockt troina
(mintha kperny-pillanatfelvtelek lennnek), csak a kpkockk kztti k
lnbsgeket jegyzi meg. A legtbb vide valjban nem vltozik tl sokat
egyik kpkockrl a msikra, ezrt ez a megolds nagyfok tmrtst tesz
lehetv, ami kisebb fjimretet eredmnyez.
Lteznek vesztesges s vesztesgmentes videokodekek is. A vesztesgmen
tes videk tlsgosan nagyok ahhoz, hogy hasznukat vehessk a Weben, ezrt
a vesztesges kodekekre fogunk sszpontostani. Amikor vesztesges video
kodeket hasznlunk, a kdols sorn vgrvnyesen elvesztnk bizonyos in
formcikat. Ugyangy, mint amikor egy audiokazettt msolgatunk, min
den alkalommal, amikor kdoljuk a videofolyamot, jabb s jabb rszleteket
vesztnk el a forrsvidebL gy a minsg egyre romlik, csak ami a hang
kazettknl "sziszegsknt" jelentkezik, az a tbbszr jrakdolt videknl
"
"kocksodst eredmnyez, klnsen a sok mozgst tartalmaz jelenetek
ben. (Ez valjban akkor is megeshet, ha kzvetlenl az eredeti forrsbl
124 l Vide a Weben
5.
fejezet
kdolunk, amennyiben gyenge minsg videokodeket hasznlunk, vagy

rossz paramtereket adunk meg a szmra.) Msrszt viszont a vesztesges
videokodekek dbbenetes mrtk tmrtst tesznek lehetv, s sok kodek
"
" csalni is kpes: lejtszs kzben klnfle mdszerekkel elfedi a kocksodst,
hogy az az emberi szemnek kevsb legyen szrevehet.
Videokodekbl tengernyi ltezik, a szmunkra legfontosabb hrom azon
ban a H.264, a Theora s a VP8.
H.264
A H.264 kodek
(http:!len.wikipedia.orglwiki/H264) tbbfle nven is isme
retes: "MPEG-4 part 10", "MPEG-4 AVC ", "MPEG-4 Advanced Vicleo
Coding". A H.264-et az MPEG-csoport fejlesztette ki, s 2003-ban szabv
nyostotta. Clja, hogy egyetlen kodeket biztostson az alacsony svszlessg

s alacsony CPU-teljestmny eszkzk (pldul a mobiltelefonok), a nagy
svszlessg s nagy CPU-teljestmny eszkzk (a modern asztali szmt
gpek) s a kett kztt tallhat minden ms eszkz szmra. Ennek rde
kben a H.264 szabvnyt " profilokra" bontottk, amelyek mindegyike ms
ms mrtkben ldozza fel a minsget a fjlmret oltrn. A magasabb
profilokban tbb kiegszt lehetsg rhet el, jobb kpminsget kapunk,
mikzben kisebb fjlmrettel dolgozunk, gy viszont tovbb tart a kdols,
a vals idej visszafejtshez pedig nagyobb CPU-teljestmny szksges.
Taln gy jobban el tudjuk kpzelni a profilknlator: az Apple iPhone-ja
a Baseline (Alap) profilt tmogatja, az AppleT V set-top box a Baseline s
Main (F) profilokat, az asztali PC-ken fut Adobe Flash pedig a Baseline,
Main s High (Magas) profilokat. A YouTube (amelynek a tulajdonosa
a Google, a szerz munkaadja) ma mr a H.264 segtsgvel kdolja az
Adobe Flash-en keresztl lejtszhat cscsminsg videkat, ugyanakkor
mobileszkzkhz- kztk az Apple iPhone-hoz s a Google Android nev
mobil opercis rendszert futtat telefonokhoz - is knl H.264 kdols
videkat. A H.264 ezenkvl egyike a Blu-ray szabvny ltal megkvetelt
videokodekeknek is. Az ilyen kdols Blu-ray lemezek ltalban a High
profilt hasznljk.
Azok a nem szmtgpes eszkzk, amelyek kpesek H.264-videkat le
jtszani ( belertve az iPhone-okat s az nll Blu-ray lejtszkat) a dekdolst
5.
fejezet
Vide a Weben l
125
egy kifejezetten erre a clra szolgl lapka segtsgvel vgzik, mivel a kz

ponti feldolgozegysgk teljestmnye messze elmarad arrl, ami a videk
vals idej visszafejtshez szksges. Sok asztali rendszerhez kszlt grafikus
krtya ugyancsak hardveres tmogatst nyjt a H.264 visszafejrshez. H.264kdolbl tbb, egymssal verseng vltozar ltezik, kztk a nylt forrs
x264 knyvtr. A H.264 szabvnyt szabadalrnak ktik; felhasznlsi enged
lyeit az MPEG LA csoport kezeli. H.264 kdols viclet a legtbb npszer
trolformtumba begyazharunk (lsd a "Videorrolk " cm rszt a fejezet
elejn), tbbek kztt az MP4-be (ezt elssorban az Apple iTunes boltja hasz
nlja) s az MKV-ba (ez elssorban a lelkes vicleoamatrk vlasztsa).
Theora
A Theora
(http:llen.wikipedia.orglwiki/7heora) a VP3 kodekbl fejldtt ki,
s azta a Xiph.org Foundation fejleszti. A Theora jogdjmentes kodek, ame

lyet nem kt semmilyen ismerr szabadalom az eredeti VP3-szabadalmakon
kvl, amelyek szintn jogdjmentesen felhasznlhatk. Br a szabvny 2004
ra "fagyasztott" llaporban van, a Theora projekt (amely egy nylt forrs
referencia-kdolbl s -dekdolbl ll) csak 2008 novemberben jelentette
meg az 1.0-s vltozatot, s 2009 szeptemberben az 1.1-esr.
A Theora-videk brmilyen trolformtumba begyazhatk, br a leg
gyakrabban Ogg trolkban szakrak elfordulni. Minden fonrosabb Linux
terjeszrs beptve tmogatja a Theort, a Mozilla Firefax 3.5 pedig ugyan
csak natv tmogatst nyjt az Ogg-rrolban elhelyezett Theora-videkhoz.
"
"Natv alatt itt azt rtem, hogy "minden platforrnon elrhet platformfgg
bvtmny nlkl ". A Theora-videk Windowsan s Mac OS X-en is lejrsz
hark, ha teleptettk a Xiph.org nylt forrs dekdol szofrverr.
VP8
A VP8
(http://en.wikipedia.orglwiki/VPB) egy msik videokodek az On2-rl,
teht ugyanarrl a vllalatrl, amelyik erederileg a VP3-ar is ksztette (ebbl

lett ksbb a Theora). A VP8 a minsgr tekintve hasonl a H.264 Baseline
kdolshoz, de rengeteg teret ad a jvbeli tovbbfejlesztsnek
126 l Vide a Weben
5. fejezet
2010-ben a Google megszerezre az On2-t, s kzztette a videokodek le

rst, valamint egy nylt forrs mintakdolt s -dekdolt. Ezzel prhu
zamosan a Google " megnyitotta" az On2 ltal a VP8-ra benyjtott sszes
szabadaimat is, s a felhasznlsukat jogdjmentess tette. (A szabadalrnak
esetben ennl tbbet nem is vrhatunk, mivel a nyltt vlsuk utn nem
jelentherk be jra vagy vonhatk vissza. Ahhoz, hogy tmogassk a nylt
forrs fejlesztst, jogdjmentess kell tenni ket, gy brki felhasznlhatja
a szabadalrnak ltal lefedett technolgikat anlkl, hogy fizetnie kellene r
tk, vagy engedlyhez kellene folyamodnia.) 2010. mjus 19. ta a VP8 jogdj
mentes, modern kodek, amelyet nem kt semmilyen ismert szabadalom az On2
(most mr a Google) ltal korbban jogdjmentess tett szabadalmakon kvl.
Audiokodekek
Hacsak nem ragaszkodunk az 1927 eltt kszlt filmekhez, a videinkban
biztosan szerernnk hangsvot is. A videokodekekhez hasonlan az audio
kodekek is kdol algoritmusok, csak ppen ezek hang-adarfolyamok kdo
lsra szolglnak. Ahogy a videokodekekbl, gy az audiokodekekbl is l
teznek vesztesgesek s vesztesgmentesek, s mint a vesztesgmentes videk,
a vesztesgmentes audiofjlok is tl nagyok a webes felhasznlshoz, ezrt
a vesztesges audiokodekekre fogunk sszpontostani.
A krt valjban mg tovbb szkthetjk, mert a vesztesges audio
kodekeknek klnbz csoportjai lteznek. Hangot sok olyan helyen is alkal
maznak, ahol nincs kp (pldul telefonlsnl), s audiokodekek egsz sort
hangoltk kifejezetten beszd kdolsra. Ezekkel a kodekekkel nem CD-krl
fogunk zent lelopni, mivel az eredmny gy hangzana, mintha egy ngyves
gyerek nekelne egy hangtlcsrbe, egy Asterisk PBX-ben azonban igenis ezt
fogjuk hasznlni, mert a svszlessg nagy kincs, ezek a kodekek pedig az
emberi beszdet annak a mrernek a tredkre kpesek sszenyomni, amit
egy ltalnos cl kodekkel elrhetnk. Mindazonltal a bngszk s kls
bvtmnyek tmogatsnak hinyban a beszdre optimalizlt audiokodekek
soha nem terjedtek el igazn a Weben, ezrt inkbb az ltalnos cl veszte
sges audiokodekeket fogjuk az eltrbe helyezni.
Ahogy a fejezet "Videokodekek" dm rszben emltettem, amikor "videt
nznk", a szmtgpnk tbb dolgot csinl egyszerre:
5.
fejezet
Vide a Weben l
127
l. rtelmezi a trolformtumot.
2. Visszafejti a videofolyamot.
3. Visszafejti az audiofolyamot, s a hangot a hangszrkra kldi.

Az audiokodek a 3. lps vgrehajtsnak mikntjt rja le: azt, hogy mi
knt lehet visszafejteni az audiofolyamot, s digitlis hullmformv alak
tani azt, amit aztn a hangszrk hangg alaktanak. A videokodekhez ha
sonlan az audiokodekek is mindenfle trkkel igyekeznek cskkenteni az
audiofolyamban trolt informcimennyisget. Mivel pedig most vesztes
ges audiokodekekrl beszlnk, ez azt jelenti, hogy a hang rgztsbl, k
dolsbl, visszafejtsbl s lejtszsbl ll letciklusa sorn informcit
vesztnk. A klnbz audiokodekek ms-ms informcikat dobnak el,
de mindnek ugyanaz a clja: becsapni a flnket, hogy ne vegyk szre
a hinyz hangokat.
A hang esetben egy olyan fogalmat is meg kell ismernnk, ami a videnl
nem ltezik: ez a csatorna. A hangot a hangszrkra kldjk, igaz? Nos, hny
hangszrnk is van? Ha a szmtgpnk eltt lnk, valsznleg kett: egy a
bal, egy pedig a jobb oldalunkon. Az n asztali rendszeremen hrom mkdik:
a bal, a jobb s mg egy hangszr a padln. Az gynevezett "surround" (tr
hats) rendszerek hat vagy mg tbb hangszrval is rendelkezhetnek, amelye
ket a szoba adott pontjain keU elhelyeznnk Mindegyik hangszr egy bizo
nyos csatorna hangjt kapja meg az eredeti felvtelbL A trhats hang elmlete
szerint a hat hangszr kztt lnk, gy sz szerint hat kln hangcsatorna
hangja vesz krl minket, s az agyunk gy rakja ssze ezeket, hogy gy rez
zk, mi is rszesei vagyunk az esemnyeknek. s hogy tnyleg mkdik-e?
Sokmillirdos ipar plt r- a befektetk nyilvn gy gondoljk, hogy igen.
A legtbb ltalnos cl audiokodek kt hangcsatornt kpes kezelni: a
rgzts sorn bal s jobb csatornra bontja a hangot; kdolskor mindkettt
ugyanabba az audiofolyamba menti; visszafejtskor pedig mindkt csatornt
dekdolja, s a megfelel hangszrra kldi. Egyes audiokodekek kettnl
tbb csatornt is tudnak kezelni, s nyomon kvetik, hogy melyik csatorna
melyik, gy a lejtsz a megfelel hangokat kldheti az egyes hangszrkra.
Rengeteg audiokodek ltezik. Ugyanezt mondtam volna a videokodekekrl
is? Felejtsk el. Audiokodekbl sokkal, de sokkal tbb van - a Weben azon
ban igazn csak hrom szmt: az MP3, az AAC s a Vorbis.
128
l Vide a Weben
5.
fejezet
MPEG-1 Audio Layer 3

Az MPEG-1 Audio Layer 3 (http:llen.wikipedia.orglwiki/MPEG-l_Audio_
Layer_3) kodeket kznsgesen csak "MP3" -knt ismerjk. Ha mg nem
hallottunk az MP3-rl, akkor nem tudom, mit is mondjak. A Tescban lehet
kapni ilyen hordozhat zenelejtszkat, amiket gy hvnak, hogy "MP3-
lejtsz ". A Tescban. Na mindegy...
Az MP3-fjlok legfeljebb kt hangcsatornt tartalmazhatnak, viszont

klnfle bitsebessggel (bitrtval) kdolhatk: 64 kbps, 128 kbps, 192
kbps, s gy tovbb, 32 s 320 kbps (kilobit/msodperc) kztt. A maga
sabb bitsebessg nagyobb fjlmretet, de jobb hangminsget jelent, br a
minsg nem egyenesen arnyos a bitsebessggeL (A 128 kbps bitsebessg
fjlok ktszer olyan jl szlnak, mint a 64 kbps bitsebessgek, a 256 kbps
azonban nincs ktszer olyan j, mint a 128 kbps.) Ezen fell az MP3 for
mtum (amelyet 1991-ben szabvnyostottak), vltoz bitsebessg kdolst
is lehetv tesz, ami azt jelenti, hogy a kdolt adatfolyam egyes rszei er
sebben, mg ms rszei kevsb tmrtettek. Az egyes hangok kztti
csend pldul nagyon alacsony bitrtval is kdolhat, hogy aztn a bitse
bessg egy pillanattal ksbb, amikor tbb hangszer szlaltat meg egy bo
nyolult akkordot, megugorjon. Az MP3-fjlok ugyanakkor lland bitse
bessggel is kdolhatk (ezt hvjk- min meglepets
lland bitsebessg
kdo/snak).
Az MP3-szabvny nem hatrozza meg pontosan, hogy miknt kell kdoini
az MP3-fjlokat (a dekdalsuk mdjt azonban pontosan lerja). A klnfle
kdoJk ms-ms pszichoakusztikus modellt kvetnek, amelyek jelentsen
eltr eredmnyt adnak, de ugyanazok a lejtszk mindet kpesek visszafej
teni. A legjobb ingyenes kdol a nylt forrs LAME, a legalacsonyabb bit
sebessgektl eltekintve pedig valsznleg ltalban vve is a legjobb kdol
(s pont).
Az MP3 formtumot szabadalrnak ktik, ami megmagyarzza, mirt nem
kpes a Linux kiegsztk nlkl MP3-fjlokat lejtszani. Lnyegben min
den hordozhat zenelejtsz tmogatja az nll MP3-fjlokat, az MP3-audio
folyamok pedig brmely videotrolba begyazhatk. Az Adobe Flash az
nll MP3-fjlokat s az MP4 videotrolba gyazott MP3-audiofolyamokat
is kpes lejtszani.
5. fejezet
Vide a Weben l 129
Advanced Audio Coding

Az Advanced Audio Coding kodeket (http://en.wikipedia.orglwiki/Advanced_
Audio_Coding), bizalmas nevn az "AAC"-t, 1997-ben szabvnyostottk, s
akkor kerlt reflektorfnybe, amikor az Apple ezt vlasztotta az iTunes Store

alaprtelmezett formtumnak Az iTunes Store-bl "vsrolt" AAC-fjlokat
eredetileg levdtk az Apple sajt, FairPlay nev DRM-smjval, ma azonban
mr sok dal vdelem nlkli AAC-fjl formjban rhet el a boltban- ezeket
az Apple " iTunes Plus"-nak hvja, mert ez sokkal jobban hangzik, mintha
minden mst "iTunes Minus"-nak neveznnek. Az AAC formtumot szaba
dalrnak ktik; a felhasznlsi jogdjak az Interneten megtekinthetk.
Az AAC-t gy terveztk, hogy azonos bitsebessgnl jobb hangminsget

nyjtson, mint az MP3, s az AAC tetszleges hitrrval kdolhat. (Az MP3
esetben csak adott szm bitrta ll rendelkezsre, a fels hatr pedig 320
kbps.) Az AAC akr 48 hangcsatorna kdolsra is kpes, br a gyakorlatban
ezt senki nem hasznlja ki. Az AAC formtum abban is klnbzik az
MP3-tl, hogy tbb profilt hatroz meg, a H.264-hez hasonlan, s azzal
azonos clbl. A " low complexity " ( "alacsony bonyolultsg" ) profilt a korl
tozott CPU-teljestmnnyel rendelkez eszkzkn trtn vals idej lejt
szsra szntk, mg a magasabb profilok azonos bitsebessg mellett jobb
hangminsget knlnak, aminek az ra a lassabb kdols s visszafejts.
Minden jelenlegi Apple-termk- belertve az iPod-okat, az AppleT V-t s
a QuickTime-t- tmogat bizonyos AAC-profilokat az nll audiofjlokban,
illetve MP4 videotrolba gyazott audiofolyamokban. Az Adobe Flash az
AAC valamennyi profiljt tmogatja az MP4-ben, akrcsak a nylt forrs
MPlayer s VLC videlejtszk. Kdolsra az FAAC knyvtr nyjt nylt
forrs lehetsget; a knyvtrat fordtskor pthetjk be az mencoder-be s
az ffmpeg-be.
Varbis
A Yorbist (http://en.wikipedia.orglwiki/Vorbis) gyakran hvjk "Ogg Vorbis"
nak, br ez technikailag helytelen, hiszen az "Ogg" csupn egy trolformtum
(lsd a fejezet "Videotrolk " cm rszt), a Yorbis audiofolyamok pedig ms
trolformtumokba is begyazhatk. A Yorbist nem kti semmilyen ismert
130
l Vide a Weben
5.
fejezet
szabadalom, ezrt a fontosabb Linux-terjesztsek, illetve a nylt forrs Rock

Box firmware-t ( "begetett szoftvert" ) futtat hordozhat eszkzk kivtel nl
kl beptett tmogatst nyjtanak hozz. A Mozilla Firefox 3.5 tmogatja az
Ogg trolha gyazott Yorbis audiofjlokat, illetve a Yorbis audiosvval rendel
kez Ogg videkat, s az Android mobiltelefonok is kpesek lejtszani az nll
Yorbis audiofjlokat. A Yorbis audiofolyamokat ltalban Ogg vagy WebM
trolha gyazzk, de MP4 vagy MKV, st nmi trkkzssel AYI trolha is
begyazhatk. A Yorbis tetszleges szm hangcsatornt kpes kezelni.
Yorbis-kdolbl s -dekdolbl is lteznek nylt forrs vltozatok, pl
dul az OggConvert kdol, az ffmpeg dekdol, az aoTu Y kdol s a Hbvorbis
dekdol. A Yorbist Mac OS X-en QuickTime-sszetevk, Windowsan pedig
DirectShow-szrk segtsgvel jtszhatjuk le.
Ami
Weben mkdik
Ha mg nem ragadt le a szemnk, akkor jobban brjuk a tbbsgnL Amint

lthatjuk, a vide- s hangfjlok tmakre meglehetsen sszetett - s ez mg
a rvidtett vltozat volt! Most biztosan azon gondolkodunk, hogyan kapcso
ldik mindez a HTML5-hz. Nos, gy, hogy a HTML5-nek rsze a <vide o>
elem, amelyet videk weboldalakba gyazsra hasznlhatunk. A videkban
hasznlhat videokodekekre s audiokodekekre, illetve a trolformtumokra
nzve nincsenek korltozsok. Egy <video> elem tbb videofjlra is mutat
hat, amelyek kzl a bngsz az els olyat vlasztja ki, amelyet le tud jt
szani. Azt viszont neknk kell tudnunk, hogy mely bngszk mely trolkat s
kodekeket tmogatjk.
Knyvnk rsnak idejn a HTML5-videk helyzete gy festett:
A Mozilla Firefox (3.5-s s ksbbi vltozatai) az Ogg-trolba gyazott

Theora-videosvokat s Yorbis-hangsvokat tmogatjk.
Az Opera (10.5-s s jabb kiadsai) az Ogg-trolba gyazott Theora

videosvokat s Yorbis-hangsvokat tmogatjk.
A Google Chrome (3.0-s s ksbbi kiadsai) az Ogg-trolba gyazott

Theora-videosvokat s Vorbis-hangsvokat, valamint az MP4-trolba
gyazott H. 264-videosvokat (valamennyi profilt) s AAC-audiosvokat
(valamennyi profilt) tmogatjk.
5.
fejezet
Vide a Weben l
131
Jelenleg (2010. jnius 9-n) a Google Chrome "dev channel "-je, a Chro
mium napi kiadsai, a Mozilla Firefox napi kiadsai s az Opera ksrleti
kiadsai mind tmogatjk a WebM-trolba gyazott V P8-videosvokat
s Vorbis-audiosvokat. (A legfrissebb informcikrt ltogassunk el a web
mproject.org oldalra, ahol a WebM-et ismer bngszk letltsi olda
lra mutat hivatkozsokat is tallunk.)
ASafari Mac-re s Windowsra rt (3.0-s s ksbbi) vltozatai minden olyas

mit tmogarnak, amit a QuickTime tmogat. Elmletileg megkrhetjk
a felhasznlinkat, hogy teleptsenek kls QuickTime-bvtmnyeket, a
gyakorlatban azonban nagyon kevesen fogjk ezt megtenni, gy azoknl
a formtumoknl kell maradnunk, amelyeket a QuickTime " bept ve"
tmogat. Az eredetileg is tmogatott formturnak listja hossz, de nem
szerepel rajta sem a Theora-vide, sem a Vorbis-audi, sem az Ogg-trol.
Ugyanakkor a QuickTime tmogatja az MP4-trolba gyazott (Main
profil) H.264-videosvokat s AAC-audiosvokat.
Az olyan mobileszkzk, mint az Apple iPhone vagy a Google Android,

az MP4-trolba gyazott (Baseline profil) H.264-videosvokat s ( "low
complexity" profil) AAC-audiosvokat tmogatjk.
Az Adobe Flash (9.0.60.184-es s jabb) vltozatai az MP4-trolba

gyazott H.264-videosvokat (valamennyi profilt) s AAC-audiosvokat
(valamennyi profilt) tmogatjk.
Az Internet Explorer 9 tmogaeni fogja az MP4-trolba gyazott

H.264-videosvokat s AAC-audiosvokat, de azt mg nem lehet tudni,
hogy mely profilokat.
Az Internet Explorer 8 egyltaln nem tmogatja a H TML5-videkat, de

lnyegben minden Internet Explorer-felhasznl rendelkezik az Adobe
Flash bvtmnnyel. A fejezet ksbbi rszben megmutatom, hogyan
gyazhatunk be gy HTML5-videkat, hogy ha szksges, elegnsan
helyettesthessk ket Flash-fjlokkal.
A fenti informcikat emszthetbb formban megtalljuk az 5.2. tblzat

ban is.
5.2. tblzat A hasznlatban lev bngszk ltal tmogatott videokodekek
Theora+Vorbis+Ogg
132
l Vide a Weben
IE
Flrefox
3.5+
5.0+
10.5+
5. fejezet
Arefmc
H.264+AAC +MP4
Satari
Cbrome
3.0+
5.0+
3.0+
2.0+
WebM
A helyzet egy ven bell jelentsen meg fog vltozni: a WebM-et tbb bn
gszben is megvalstjk, mghozz nem ksrleti formban, s a felhaszn
Jk frisstik a bngszjket ezekre az j vltozatokra. A kodekek tmogatsa
vrhatan az 5.3. tblzatban foglaltak szerint alakul majd.
5.3. tblzat
A jvbeli bngszk ltal tmogatott videokodekek
Theora+VorbiS+Og_g
3.0+
H.264+AAC+MP4
WebM
Az Internet Explorer
5.0+
3.5+
9.0+
10.5+
3.0+
5.0+
6.0+
4.0+
2.0+
11.0+
9 csak akkor fogja tmogatn i a WebM-et,.ha a felhasznl teleptett egy
VP8-kodeket'; ami arra utal, hogy a Microsoft nem fogja mellkelni magt a kodeket.
b
A Google elktelezte magt amellett, hogy az Android.egy jvbeli kiadsban"tmogatni

fogja a WebM-et, de mg nincs biztos temterv.
s most jjjn a feketeleves ...

A trolknak s kodekeknek nincs olyan kombincija, amelyik min
den HTML5-kpes bngszben mkdne.
Ez nem valszn, hogy a kzeljvben meg fog vltozni.
Ahhoz, hogy a videink minden eszkzn s rendszeren megtekinthe
tk legyenek, tbb vltozatban kell kdolnunk ket.
Ha a lehet legtbb bngszvel s rendszerrel szeretnnk egyttmkdni,

a videink elksztsnl az albbi munkafolyamatot kell kvetnnk:
l. Ksztnk egy Ogg-trolba gyazott, Theora-v ideosvbl s Vorbis
audiosvbl ll vltozatot.
2. Ksztnk egy msik, WebM (VP8
5.
fejezet
Vorbis) formtum vltozatot.
Vide a Weben l
133
3. Ksztnk mg egy, MP4-trolba gyazott, H.264 Baseline videosv
bl s AAC "low complexity" audiosvbl ll vltozatot.

4. Mindhrom videofjlra hivatkazunk egy <v ideo> elembl, s szksg
esetn Flash alap videolejtszsra vltunk vissza.
A H.264-videk
felhasznlsi engedlyvel kapcsolatos krdsek
Mieltt folytatnnk, fel kell hvnom a figyelmet arra, hogy a videk tbbszri
kdolsnak ra van. A nyilvnval kltsgen fell- mrmint azon tl, hogy a
tbbszri kdolshoz tbb id s tbb szmtgp-hasznlat szksges- a H.264
kdols videkhoz egy nagyon is valsgos kltsg kapcsoldik: a jogdj.
Emlkezhetnk r, hogy amikor elszr szba kerlt a H.264 (lsd a "H.264"

cm rszt nhny oldallal korbban), emltettem, hogy ezt a videokodeket
szabadalrnak ktik, s a felhasznlst az MPEG LA konzorciummal kell
engedlyeztetni. Ez meglehetsen fontos krds, de ahhoz, hogy megrthes
sk, mirt is lnyeges, lljon itt egy rszlet a H.264 Licensing Labyrinth cm
cikkbl*:
Az MPEG LA a H.264 jogdj-portfolijt ktfle felhasznlsi enge
dlyre bontja: az egyik a kdolk s dekdolk gyrtinak, a msik
a tartalomszolgltatknak kszlt. [. ]
. .
A szolgltati oldal engedlyeit tovbbi ngy alkategriba soroltk,

amelyek kzl kett (az elfizets s a cmenknti vsrls vagy felhasz
nls) esetben a vgfelhasznl kzvetlen l fizet a videoszolgltsokrt,
mg kett (a "szabad" televzis s internetes sugrzs) esetben nem
a vgfelhasznltl, hanem ms forrsbl szedik be a jogdjat. [... ]
A "szabad" televzis felhasznls jogdja ktfle lehet. Az els eset
ben AVC-tviteli dekderenknt 2500 dollr egyszeri djat kell fizetni,
mely dekdert "az Engedlyes kzvetlenl vagy tttelesen hasznlja
AVC-videk sugrzsra a Vgfelhasznlnak ", aki dekdolja s meg
tekinti azokat. Ha azon tprengnk, hogy ilyenkor vajon ktszeresen
http:l!www.streamingmedia.com/Articles/Editorial/Featured-Articles/The-H.264-Licensing
Labyrinth-65403.aspx
134 l Vide a Weben
5.
fejezet
szmtanak-e fel jogdjat, a vlasz: igen. A kdolt gyrt cggel mr

megfizettettk a jogdjat, de a msorszolgltatnak is ki kell fizetnie
a ktfle tpus jogdj egyikt.
A jogdj msodik tpust az ves sugrzsi dj jelenti. [...] Az ves
sugrzsi djat a piac mrete (az elfizetk szma) alapjn llaptjk meg:
Naptri venknt s 100 OOO-tl 499 999 televzikszlkig terjed sugr

zsi piaconknt 2500 dollr
Naptri venknt s 500 OOO-tl 999 999 televzikszlkig terjed sugr

zsi piaconknt 5000 dollr
Naptri venknt s l OOO OOO vagy annl tbb televzikszlkig terjed

sugrzsi piaconknt 10 OOO dollr
[...] Mirt fontos a "szabad" televzis felhasznls jogdja azoknak,
akik nem msorsugrzssal terjesztik a tartalmakat? Ahogy korbban

emltettem, a jogdj-ktelezettsg a tartalomszolgltats minden tpu
sra vonatkozik. Az MPEG LA a "szabad " televzis sugrzs meghat
rozst a fldi sugrzson tlra is kiterjesztette, ezen fell pedig az imer
netes sugrzsra is jogdjakat llaptott meg, mint "AVC-videk olyan
terjesztsre a Vilghln, amelynek sorn a vgfelhasznlk nem fizet
nek a letlts vagy megtekints jogrt". Ms szavakkal, minden nyilv
nos sugrzs, legyen az fldi, kbeles, mholdas vagy internetes szolgl
tats, jogdjkteles. [... ]
Az internetes sugrzs jogdja valamivel magasabb lehet- nyilvn
abbl indultak ki, hogy az internetes tartalomkzvetts sokkal gyor
sabb nvekedst fog felmutatni, mint a fldi sugrzs vagy a kbeles,
illetve mholdas "szabad" televzizs. Az MPEG LA a "szabad telev
zis sugrzs" piaci djhoz adna mg egy kiegszt djat, de ennek
megfizetse all az els (2010. december 31-n lejr) engedlyes peri
dus vgig felmentst adott, s leszgezte, hogy "a jogdj az els peridus
utn sem lesz magasabb a szabad televzis sugrzsrt azonos idszakra

fizetett sszegnl".
A cikk elkszlte ta mr vltoztattak is az internetes sugrzs jogdjszerkeze

tn. Az MPEG LA nemrg bejelentette, hogy 2015. december 31-ig kiterjeszti
az ingyenes internetes sugrzs lehetsgt. s hogy utna m i lesz? Ki tudja...?
5.
fejezet
Vide a Weben J
135
Ogg-videk kdolsa a Firefogg segtsgvel

(Ebben a rszben az "Ogg-vide" kifejezst a "Theora-vide s Yorbis-audi
egy Ogg-trolban" helyett hasznlom. Ez az a kodek+trol kombinci,
amelyet a Mozilla Firefox s a Google Chrome beptve tmogat.)
A Firefogg egy nylt forrs, GPL felhasznlsi engedly Firefax-bvt
mny az Ogg-videk kdolshoz. A hasznlathoz teleptennk kell a Mozilla
Firefox 3.5-s vagy ksbbi vltozatt, majd el kell ltogatnunk a Firefogg
webhelyre, amelyet az 5.1. brn lthatunk.
Kattintsunk az InstallFirefogg (AFirefogg teleptse) gombra. AFirefox ekkor
megkrdezi, hogy valban engedlyezni szeremnk-e a webhelynek egy bvtmny
teleptst. A folytatshoz kattintsunk azAllow (Engedlyezs) gombra (5.2. bra).
AFirefox ekkor a szokvnyos szoftverreleptsi ablakot jelenti meg. A foly
tatshoz kattintsunk az Install Now (Telepts most) gombra (5.3. bra). A te
lepts befejezshez a RestartFirefox (AFirefox jraindtsa) lehetsget kell
vlasztanunk (5.4. bra). Miutn a Firefox jraindult, a Firefogg webhely
megersti, hogy a Firefogg teleptse sikeresen lezajlott (5.5. bra).
A kdolst a Make Ogg Vicleo (Ogg-vide ksztse) hivatkozsra kat
tintva indthatjuk el (5.6. bra), a forrsviclet pedig a Select file (Fjl kiv
lasztsa) gombbal vlaszthatjuk ki (5.7. bra).
Firefog g
'fldeoentodinganduploldlngforfuefo
Sifnus!ngf!rafuqg-Ustf!rmqgonYPyrS!II-
o.
5.1. bra
A Firefogg honlapja
136 l Vide a Weben
5.
fejezet
Frcftu: prcwntcd th" Jltc (fircfogg.org) from 1sl:mg you to tnsUU sof'twnrt on yout computer.
Firefog g
vid eo eneolting and uptoalftno ror Flrefox
sttuuslngFtrefogg - Usef!refoggonyoyrSrts-
.. yg
Stopptd
5.2. bra
A Firefogg teleptsnek engedlyezse
5oft.- ht.ilation
Install add-ons only from authors whom you t rust.
Maliciaus software can damage you r computer or viclate you r privacy.
You have asked to install the follawing item:

Firefogg-l.O.O.xpi
(Avthar not veri[ied)
http ://firefogg .org/win 3 2/Firefo gg -l. O. O.xp i
Cancel
5.3. bra
A Firefogg teleptse
5. fejezet
Vide a Weben l
137
Restart Firefax to complete your changes.
Firefogg 1.0.0
Restart to cornplete the mstallat1on.
..
-- .\_
- :,.
' ---
---
fa'\.._.:
J.JIJ.J.V,_--'iol0..-:...
. .. .. - .
..
-.l.Oc
,.,.,.,.,.-\_.1
:-- :.O..
Close
5.4. bra
A Firefox jrainditsa
Firefog g
vid eo en toding and uploadlng for Firefox
Sdesysjng F!ratogg. Use FjrefoagpovourSrte
Done
5.5. bra
138
A telepts sikerlt
l Vide a Weben
5.
fejezet
-.o!!!!f ... !'P!!!!!'!f!eo---fM_ {dit Yiew Hittory
JfOOkmlo
r,,.,
"''._.;.
L0
..;"
;.
'
' .;.-- --- -------'""'1 =-----..,.;
: C X
"[;
p.j
""1Rt ;._
http/fiRtogg.g/
\:ilodlg-
Firefogg
vieleo en coding and uploading for Firetoll
S1te sysingfjrefoag- Usefjretoggonmyr Sjtfl -
"===:::c
-""-
http://firefogg.orrJ/mtkt[lftdex.html
5.6. bra
Ksztsnk videt!
............ ,.....
:LJ http://fireft,gg.org/mtktlindtx.html
TD Flrefogg- M.ke09g
v.., ln,... - ru
.
,..
Ma ke O gg V i d e o
Firefoga-vieleo encoding and u pioaCiing for Firefok
Srtgs US!OQfirefoga. use flll!foggonygyr $(ta. Matca Ogg Video
- Selectfile
{')
.,:. lll """"

5.7. bra
5.
''"'
A vicleofjl kivlasztsa
fejezet
Vide a Weben l
139
A Firefogg f fellete hat " lapbl " ll (lsd az 5.8. brt):
Preset (Sablon)
Az alaprtelmezett sablon a "web video", ami a cljainknak tklete

sen megfelel.
Encoding range (Kdolsi tartomny)

A vide kdolsa hossz ideig tarthat. Amikor elszr kdolunk, rde
mes lehet a videnak csak egy rszt (mondjuk az els 30 msodperct)
kdolni, amg meg nem talljuk a neknk tetsz belltsokat.
Basic quality and reso/ution control (Alapszint minsg- sfelbontsszablyozs)

A lnyeges belltsok tbbsge itt tallhat.
Metadata (Metaadatok)
Ezzel a lappal itt nem foglalkozom, de annyit elmondhatok, hogy
olyan metaadatokat adhatunk a videhoz, mint a vide cme s szer
zje. Az iTunes vagy valamelyik msik zenerendszerez segtsgvel
mr valsznleg adtunk metaadatokat a zenegyjtemnynkhz a mkdsi elv ugyanaz.
Advanced video encoding controls (Halad videokdols-szablyzk)

Ezekhez csak akkor nyljunk, ha pontosan tudjuk, mit csinlunk. (A
Firefogg interakdv segtsget nyjt a legtbb belltshoz. Ha tbbet sze
retnnk tudni egy lehetsgrl, kartintsunk a mellette lthat "i" jelre.)
Advanced audio encoding controls (Halad hangkdols-szablyzk)
Ezeket is csak akkor szabad piszklnunk, ha pontosan tudjuk, mit

csinlunk.
. (_...,....
...,
....._.w......... .,.-
---
5.8. bra
140
Kdoljunk videt!
l Vide a Weben
5.
fejezet
Csak a "Basic quality and resolution control " lapot (5.9. bra) nzzk meg
rszletesen, mert minden fontos bellts ezen tallhat:
Video Quality (Kpminsg)

A kpminsget egy O-tl (legrosszabb minsg) 10-ig (legjobb mi
nsg) terjed skla mri. A nagyobb rtkek nagyobb fjimretet
jelentenek, ezrt ksrleteznnk kell, hogy megllaptsuk, milyen m
ret/minsg arny felel meg leginkbb az ignyeinknek.
Audio Quality (Hangminsg)

A hangminsget egy -l-tl (legrosszabb minsg) 10-ig (legjobb
minsg) terjed skln szablyozhatjuk A nagyobb rtkek a kp
minsghez hasonlan itt is nagyobb fjimretet jelentenek.
Video Codec (Videokodek)
Itt mindig a "theora" rtket kell megadnunk.
Audio Codec (Audiokodek)
Itt mindig a "vorbis" rtket kell megadnunk.
Video Width and Video Height (Kpszlessg s kpmagassg)

Ezek alaprtelmezs szerint a forrsvide szlessghez s magassg
hoz igazodnak Ha a viclet kdols kzben t is szeretnnk mre
tezni, itt mdosthatjuk a szlessgt vagy a magassgt. A Firefogg
automatikusan tlltja a msik kiterjedst, hogy megtarrsa az eredeti
arnyokat, gy a vide kpe nem nyomdik ssze vagy nylik meg.
Az 5.10. brn azt lthatjuk, hogy a viclet az eredeti szlessgnek a felre
kicsinyrjk. Figyeljk meg, hogy a Firefogg nmkden ehhez igaztja
a magassgot.
5.
fejezet
Vide a Weben l 141
New0r1ee.ns2006 dv
Preset: Web Video Theora, Vorbis 400kbs & 400px max width
Encodlng umye
r -b
oasic qualhy nd resolution control
OVideo Ouahty
OTVIIO Pass Encodmg
f!
8Audio Ouahty
OVdeoCodec
1heor.
OAudo Codec
vorb1s
-YSI'*
Oont
5.9. bra
0.408> .
Alapszint minsg- s felbontsszablyzs
New0rleons2006 dv
Preset Custom settlngs
Encoding ranye
Basic quality and resolution control
OTVIIO Pass Encod1ng
OAudiO Oualdy
OVIdeoCodec
OAudio Codec
OVideo
Widlh
OVideoHeght
3211
-===
113
httpJ!firtfogg.orgfmkt/indtX.htmlft
5.1 O. bra
142
A vide kpszlessgnek s kpmagassgnak szablyozsa
l Vide a Weben
s_ fejezet
Miutn belltottunk minden szablyzt, kattintsunk a Save Ogg (Ogg-fjl

mentse) gombra, hogy elindtsuk a tnyleges kdolst
(5.11. bra). A Firefogg
ekkor egy fjlnevet kr a kdolt vide szmra.
--
Li
&
__
w select new file
Sl!IW 0gg
New0r1eans2006 dv
.eJ
Preset Custom senings
Encoding range
Basic quality and resolution control
Metadala for the clip
Advanced video
'
Advanced audio encodlng
encoding controls
controls
http://firrlogg.org/mlktfmdex.htmltli
5.11. bra
http://firtfogg.orglmi:tftndex.htm.-
__
ArefOgg
Y"tdeoln,-
IIIYSiow
o...,,
A kdolst a .save Ogg" gombra kattintva indthatjuk el
A Firefogg a vide kdolsnak elrehaladst egy csinos folyamatsvon mu

tatja (lsd az
5.12.
brt). Neknk csak annyi a teendnk, hogy vrunk (s
vrunk, s vrunk .. . ).
Ogg-videk ktegelt kdolsa

az ffmpeg2theora segtsgvel
(Ahogy az elz rszben, az "Ogg-vide" kifejezst itt is a "Theora-vide s
Yorbis-audi egy Ogg-trolban" jelentsben fogom hasznlni. Ez az a kodek+
trol kombinci, amelyet a Mozilla Firefox s a Google Chrome beptve
tmogat.)
Az Ogg-videk ksztshez tbb kapcsolat nlkl hasznlhat kdol is
rendelkezsre ll. Ha sok vicleofjlt szeretnnk ktegelve, automatizltan
5.
fejezet
Vide a Weben l 143
kdolni, mindenkppen prbljuk ki az ffmpeg2theora nev programot
(http://v2v. celj/ffmpeg2theora/).
Az ffmpeg2theora egy nylt forrs, GPL felhasznlsi engedllyel ren
delkez alkalmazs Ogg-videk kdolshoz. Elre lefordtott binris vlto
zatai Mac OS X-re, Windowsra s jabb Linux-terjesztsekre is elrhetk. Az
ffmpeg2theora szinte brmilyen vicleofjlt elfogad bemenetknt, belertve
az tlagfogyaszti piacra sznt karnkorderek ltal ellltott DV-videkat is.
Az ffmpeg2theora-t a parancssorbl meghvva vehetjk hasznlatba.
Windowson kvessk a Start, Programs, Accessories, Command Prompt (Start,
Programok, Kellkek, Parancssor), Mac OS X-en pedig az Applications, Uti
lities, Terminal (Alkalmazsok, Segdprogramok, Terminl) tvonalat.
5.12. bra
f.netdlng vldeo to Oqq
!O
O% Transcoded
Preset CUS(Otn setti

Encoding rnge
Basic qu.tlily nd reso
=
n tr
:.::
utl i
:.::
:.::
co
:;:
:.::
: ' ---------:
..:- a VSiow
o.....,
A kdols folyamatban
Az ffmpeg2theora szmos parancssori kapcsolt elfogad. (Ha mindet ltni

szeretnnk, rjuk be az ffmpeg2theora
help parancsot.) n csak hr
--
mat emelnk ki kzlk:
--v ideo-quality
Q (kpminsg), ahol a Q egy O s 10 kztti szm
--audio-quality
Q (hangminsg), ahoi a Q egy -2 s 10 kztti szm
144 l Vide a Weben
5. fejezet
--max_ size=WxH (maximlis mret), ahol a W s a H a vide szmra
engedlyezett maximlis szlessg (width) s magassg (height). (A kett k

ztti "x" csupn egy "x".) Az ffmpeg2theora a viclet arnyosan mretezi t
a megadott keretek kztt, gy elfordulhat, hogy a kdols utn a vide
kisebb lesz a megadott WxH mretnl. Pldul ha egy 720x480 kppontos

viclet kdolunk a --max _ size 320x240 belltssal, eredmnyknt
egy 320 kppont szles s 213 kppont magas viclet kapunk.
A fentiek szerm teht az ffmpeg2theora-ban gy kdolhatunk egy viclet
ugyanazokkal a belltsokkal, mint amelyeket az elz rszben ("Ogg-videk
kdolsa a Firefogg segtsgve!" ) hasznltunk:
you@ localhas t$ ffmpeg2theora --videoquality 5
--audioquality l
--max size 320x240
pr6.dv
Az .ogv kiterjesztssei elltott kdolt vide ugyanabba a knyvtrba kerl,

mint ahol az eredeti vide is tallhat. Msik helyet vagy fjlnevet gy adha
tunk meg, ha tadjuk az
--
output= / a / kdolt / vide / elrsi / tj a
parancssori kapcsolt az ffmpeg2theora-nak.
H.264-videk kdolsa
a HandBrake segtsgvel
(Ebben a rszben a "H.264-vide " kifejezst a "Baseline profil H.264-vide
s low complexity profil AAC-audi egy MPEG4-trolban" helyett hasz
nlom. Ez az a kodek+trol kombinci, amelyet a Safari, az Adobe Flash,
az iPhone s a Google Android eszkzk beptve tmogatnak.)
A jogdj krdstl eltekintve (lsd a fejezet "A H.264-videk felhaszn
lsi engedlyvel kapcsolatos krdsek " cm rszt kicsit korbban) a H.264videk kdolsnak legegyszerbb mdja a HandBrake (http://handbrake.fr)
hasznlata. A HandBrake egy nylt forrs, GPL felhasznlsi engedllyel
rendelkez alkalmazs H.264-videk kdolshoz. (Rgebben ms video
formtumokat is tudott kezelni, de a legjabb vltozatban a fejlesztk gy
dntttek, hogy a legtbb formtum tmogatst elhagyjk, s minden
erfesztsket a H.264-videkra sszpontostjk.) A HandErake-bl elre
5.
fejezet
Vide a Weben l
145
lefordtott binris vltozatok Windowsra, Mac OS X-re s jabb Linux-ter

jesztsekre is elrhetk (http://handbrake.fr/downloads.php).
A HandBrake ktfle kivitelben kszl: grafikus fellet s parancssori
vltozatban. n elszr a grafikus felletet mutatom be, majd azt is megnz

zk, hogyan adhatk meg a javasolt belltsok a parancssorban.
Miutn megnyitottuk a HandBrake alkalmazst, az els dolgunk a forrs
vide kivlasztsa (lsd az 5.13. brt). A fjl kivlasztshoz kattintsunk
a Source (Forrs) ikonra, majd a lenyl listbl vlasszuk a Video File
(Videofjl) lehetsget. A HandBrake szinte brmilyen vicleofjlt elfogad be
menetknt, belertve az tlagfogyaszti piacra sznt karnkorderek ltal el
lltott DV-videkat is.
5.13. bra
A forrsvide kivlasztsa
A HandBrake ekkor panaszkodni fog, hogy mg nem lltottunk be alapr
telmezett knyvtrat, ahov a kdolt videkat mentheti (lsd az 5.14. brt).

Ezt a figyelmeztetst nyugodtan figyelmen kvl hagyhatjuk, de azt is meg
tehetjk, hogy megnyitjuk a belltablakot (a Tools-Eszkzk- menbl),
s megadunk egy alaprtelmezett kimeneti knyvtrat.
146 l Vide a Weben
5. fejezet
'Selea.cCif'JITJ.Ie
i<OO:o'!2) -
.,.., es:
:1
..
jl1v.:u;t.
oo.z
.._ ..
dJiftgS"(Prl:)
] Pod5GR.I)p0rt
"""'
IOI!oEI!!!!)lr,1ooJ......
1ZD> <80
j""
Asced.P
...., KeepAspertJlat!D
You currtntly "AutOfl'\ltK:1IJy nme. output files"ltnlbled forthe

destIVbon file*. but you do no1 have dd11ult directory set.
You should set 1 "Dd1ult P.th" '" H.ndBkH preferenus. ($ee 'lools'
menu >'Options'> ..r hb> 'tnfult hth')
pUe Stra:t
SQ:'!'
C2D
'h$480
5.14. bra
Ezt a figyelmeztetst hagyjuk figyelmen kvl
A jobb oldalon talljuk a sablonok listjt. Ha az "iPhone &iPod Touch"

sablont vlasztjuk, mint az 5.15. brn, a belltsok tbbsge az ltalunk
kvnt rtkeket kapja.
Az egyik lnyeges bellts, amely alaprtelmezs szerint ki van kapcsolva,
a Web opeimized (Optimalizls a Webre). Ha ezt a lehetsget az 5.16. b
rnak megfelelen bekapcsoljuk, egyes metaadatok trendezdnek a kdolt
videban, s a vide megtekintst mr akkor meg lehet majd kezdeni, ami
kor a nagy rsze mg tltdik a httrben. n melegen ajnlom, hogy mindig
kapcsoljuk be ezt a belltst. Mivel a kdolt vide minsgre vagy fjim
retre nincs hatssal, igazn nincs okunk r, hogy ne tegyk.
A Picture (Kp) lapon a kdolt vide lehetsges legnagyobb szlessgt
s magassgt llthatjuk be (lsd az 5.17. brt). A Keep Aspect Ratio (01dalarny megtartsa) lehetsget ugyancsak clszer bekapcsolni, nehogy
a HandBrake tmrerezs kzben sszenyomja vagy megnyjtsa a kpet.
5.
fejezet
Vide a Weben l
147
Queue !ti:! ShowQueue . PrNI_. !II]ActMtyWindow

.......
BAUnivet<HII
.....
-
B ........
-....
HighPt-ofie
Bl<Y
oa
..
k
Applenr teoacy
iPhone leoacy
iPodlt!:c;J<K:Y
Tq>
'"' U
Q?
lot
5. l 5. bra
Vlasszuk az i Phone sablont
li Souru Ci Start m Add to Queue ffiJ ShowQueue lill Previ- [ll] A.ctMty Window
Sourcc:.
Tlte:
lt(00:02:22)
l Chapten:
li:..=3
ltYou;tl
c=3
Pr
0.../Jti::Jn: 00:02:22
, ------
output SdtinQS (Pt'Uet Custom)

Ctri.Iler:
[K"Re
]l':t"..oefiescze
PicttJ"e Veo Fbrs Yideo
Pod5G5lClJ)Ort
Audo J Chapters Adv-anced

Cropping
Souce:
120x<480
As;:Ject.Ratio:
1.36
: Heqt:
KeepAspectRolltlo
.,
....,,..."
,_.
==
'""
,...
D
u
n-
ScanComplet:ed
5.1 6. bra
148
Mindig optimalizljunk a Webre
l Vide a Weben
5.
fejezet
.. -.-
--
.. - -
,- ..... - .. - .
.-. - '
-.-
lSourct Cjsurt. -AddtoQutut 1fiJ91owQutut .Prtvrw -ActMty'W'indow

""'"'"'
Tti&:
b(OO:!)?:Z2)
Chapters:
tt..ouc;t.
-
--- 'kJ-s!ij
CUo"l:
00:1l2:22
---
"''
Output Scttlnp (Preset: Custom)
Ccrtaher:
'""' Fie
luroefilsize
rl)Webopbnczed f)PodSGRQUt
""""'
<-
ScMce: 720x480
AspectRlo:
_,Ih-'
tt;!lll
KAs!mB
-li'i'-
1.36
"""'Wid:h
f)CuR:OfTI
Top
Loft
r-
o--:p
Rdt
o
.;..
"""""
Suned
, r--
5.1 7. bra
-=a:W--.--a-:.o....w.,.
____"...",.
'""'- -
lltsuk be a szlessget s a magassgot
A "Video" lapon, amelyet az 5.18. brn lthatunk, tbb fontos belltst

adhatunk meg:
Video Codec (Videokodek)

gyeljnk r, hogy itt a H.264 (x264) rtket vlasszuk.
2-Pass Encoding (Ktmenetes kdols)

Ha ezt a ngyzetet bekapcsoljuk, a HandBrake ktszer futtatja le
a videokdolt. Elszr csupn elemzi a videt, s olyan dolgokat
vizsgl, mint a sznsszettel, a mozgs s a jelenethatrok. A vide
tnyleges kdolst a msodik menetben hajtja vgre, az els krben
sszegyjttt informcik felhasznlsval. Ahogy ez vrhat, ez
a mdszer krlbell ktszer annyi ideig tart, mint az egymenetes
kdols, viszont jobb minsg videt eredmnyez a fjlmret nve
lse nlkl. n mindig engedlyezem a ktmenetes kdolst a H.264videk esetben. Hacsak nem a kvetkez YouTube-ot ptjk, s
napi 24 rban videkat kdolunk, valsznleg neknk is rdemes
a ktmenetes kdolst vlasztanunk.
5. fejezet
Vide a Weben l 149
Turbo First Pass (Gyors els menet)

Ha a ktmenetes kdolst vlasztottuk, ennek a ngyzetnek a bekap
csalsval nmi idt takarthatunk meg. Ez a bellts gy cskkenti
az els menetben elvgzett munka mennyisgt (a vide elemzsnek
alapossgt), hogy kzben csak kis mrtkben rontja a minsget. n
ltalban engedlyezem ezt a lehetsget, de ha neknk a minsg
kiemeit szempont, jobb, ha kikapcsoljuk.
Quality (Minsg)
A kdolt vide "minsgt" tbbflekppen is megadhatjuk: bellt

hatjuk a clfjl mrett - ez esetben a HandBrake minden tle tel
hett megtesz, hogy a vgeredmnykm kapott vide ne legyen
nagyobb ennl a mretnl -; bellthatunk egy tlagos "bitsebess
get", ami sz szerm a kdolt vide egy msodpercnek trolshoz
szksges bitek szmt jelenti (azrt hvjk "tlagos" bitsebessgnek,
mert egyes msodpercek tbb bitet ignyelnek, mint msok); de egy
O-tl 100 szzalkig terjed skln megadhatunk egy lland min
sget is (a magasabb rtkek jobb minsget, de nagyobb fjlokat
eredmnyeznek). A minsg belltsra nincs ltalnos szably.

Krds: Ogg-vide is kszthet ktmenetes kdolssal?
Vlasz: Igen, de a kdol mkdsnek alapvet klnbsge miatt erre
valsznleg nincs szksg. A ktmenetes H.264-kdols szime min
dig jobb minsg viclet eredmnyez, a ktmenetes Ogg-kdolsnak
azonban csak akkor vesszk hasznt, ha a kdolt vide fjljnak adott
mretnek kell lennie. (Lehet, hogy ppen ez rdekel minket, de az itt
bemutatott pldk nem errl szlnak, s a webes videk kdolsra
valsznleg nem ri meg ennyivel tbb idt fordtani.) Az Ogg-videk
minsgt szablyozzuk inkbb a Quality-belltssal, s ne veszdjnk
a ktmenetes kdolssaL
150 l Vide a Weben
5. fejezet

-:------
Souru i; Sbrt. (Add to Queue ShowQueue
PrN!ew
[IIJ A.ttMtyWindow
Source
_,
l ("'""'"') - il """'" C:=::J -
7"""
Pl'
""'-'
oo,oz,zz
Output (PTeset: CtKtom)

cc:n-:
[K>1Fie
__
--:JrJla'oeflesiZe
fil
l ll
0 web [liPodSG
NKel \I':!Mf!sr-sl l,., ..l-lQl,aptm JA,Nanc:pd,

.....
.......
YldeoeodM:
!"-"'...!. "">"
Framerate(R>S):
3e
il
e Target.Size(MB):
8 Avostrate(l!b9s):
c Const.-tQualty:
2-Passfnccd'lo
60.78"lloRf:20
TU'bofirstPass
..
5.18. bra
!
:l
A kpminsgre vonatkoz belltsok
A pldban 600 kbps tlagos bitsebessget vlasztottam, ami egy 320x240-es

videhoz elg magas rtk. Ezen kvl engedlyeztem a ktmenetes kdolst
is, gyors els menettel.
Az Audio (Hang) lapon, amelyet az 5.19. brn lthatunk, valsznleg
semmit sem kell megvltoztatnunk Ha a forrsvidenkban tbb hangsv is
tallhat, szksges lehet kivlasztani, hogy melyik kerljn be a kdolt vide
ha. Ha a vide nagyrszt abbl ll, hogy egy ember beszl (teht nem zene
vagy alfest hang hallhat benne), a hangsv bitsebessgt valsznleg 96
kbps-re vagy valamilyen hasonl rtkre cskkenthetjk. Ettl eltekintve azon
ban az "iPhone" sablonbl rklt alaprtelmezsek tbbnyire megfelelnek.
5. fejezet
Vide a Weben l 151
OuQiut 5etbngf (Preet Co.Ktom)

ccn- j...,..B=
-l
._...,..
..
"Wl!bQJibliZed
PodSG
5.19. bra
A hangminsgre vonatkoz belltsok
Kvetkez lpsknt kattintsunk a Next (Tovbb) gombra, s vlasszunk egy

knyvtrat, illetve fjlnevet a kdolt vide szmra (5.20. bra), vgl pedig
indtsuk el a kdolst a Start gombbal (5.21. bra). A HandBrake a vide
kdolsa kzben statisztikai adatokat jelent meg (5.22. bra).
-
... ...
Sbrt
....
...
,_",_",..,.
llie.,I(00:02:22}
i!l Add tn Qutut
ltiJ ShcMr Qutut
Prtvttw
f"-<, u::-:3 ......
--
[II]AcbYityWndow
.,.._
,,.,.,._"
.....r
...
R.: C:
Duqlui:SetttnQs(Pteu.tom)
.... Re
Yidlol'bfs'l1lllo
.....
" Wtlboptmacj
lMQBf'-Sile
...... .._.
- --.
Audiolr-.b
l:iiiiiii:J
Selectedtradt:Newtredo.
"""
[--
,:... -
....
)IU
"""'
"""""""'
MC(foMC)
l.
"'-
5. 20 . bra
OOb)'Pt-GLOQic n
.......... ..,...
.
ORC
.[.....::;JO
Sln!Pwat.Qtf.z)
..
,,.
8blte('li:bpJ)
ORC
0.0
.l
Adjuk meg a clfjl nevt
152 l Vide a Weben
5. fejezet
;,_,;!ifAJ
" ......
li"' ,\ti"'-""'"""'"'"'-""' lll""'""'""""""

-.Tda:
!J(OO:Ill-.m
l ' C:3
tt-nJu;to
C:3 t'Uabon:
001ll:22
U!!iiiJ
fle: C:fp9.,..M'W
output Sdtfroc)l' (PrH: eu.tom)
[ijifit=::;J U L9eNesize
cont-.:
(l]Wflb
PodSG
lti-----,,
AudioTradu:
Tradi:NIMTrd
s-u
1Track
Aldo Codec:
llMC->
Sotne
f4xdDoon
ll-
At.doCodac
P4xdaown
AN:.(JMQ
ProL.ogocn
Sarrcllwate
ate(lrH;z)
-5.21. bra
Ksztsnk videt!
5.22. bra
Trelem,
!ar.u
ll- l o
lllnte(Kbps)
ifj padawan!
H.264-videk ktegelt kdolsa

a HandBrake segtsgvel
(Az elz rszhez hasonlan a "H.264-vide" kifejezst itt is a "Baseline pro
fil H.264-vide s low complexity profil AAC-audi egy MPEG4-t
rolban" kifejezs helyett hasznlom. Ez az a kodek+trol kombinci, ame
lyet a Safari, az Adobe Flash, az iPhone s a Google Android eszkzk beptve
tmogatnak.)
Ahogy fentebb emltettem, a HandBrake-nek parancssori vltozata is l
tezik. A grafikus kiadshoz hasonlan ennek is tltsk le a legfrissebb vlto
zatt, a
http:llhandbrakefrldownloads2.php cmrL
Az ffmpeg2theora-hoz ( lsd a fejezet "Ogg-videk ktegelt kdolsa az

ffmpeg2theora segtsgvel" cm rszt) hasonlan a HandBrake parancssori
5. fejezet
Vide a Weben l 153
vltozata is szdt mennyisg kapcsolt knl. (Ha az sszeset meg szeret

nnk tekinteni, rjuk be a HandBrakeCLI --help parancsot egy terminl
vagy parancsablakba.) Itt csak nhny fontosabbat tekintnk t:
--preset
"X", ahol az "X" egy HandErake-sablon neve (lnyeges,
hogy a nevet idzjelbe tegyk). A webes H.264-videkhoz az "iPhone

"
& iPod Touch sablonra van szksgnk.
--width W, ahol a W a kdolt vide szlessge. A HandErake automa-
tikusan tlltja a magassgot, hogy megtartsa az eredeti vide arnyait.
--vb
Q, ahol a Q az tlagos bitsebessg (kilobit/msodpercben mrve)
--two-pass- ez a kapcsol engedlyezi a ktmenetes kdolst

--turbo- ez a kapcsol engedlyezi a gyors els menetet a ktmenetes
kdols sorn
--input F, ahol az Fa forrsvide fjlneve.

--output E, ahol az E a kdolt vide clfjljnak a neve.
me egy plda a HandErake meghvsra a parancssorbl, azokkal a parancs

sori kapcsolkkal, amelyek megfelelnek a HandErake grafikus vltozatban
vlasztott belltsoknak:
you@localhost$
HandBrakeCLI --preset"iP hone & iPod Touch"
-- width 320
--vb 600
--two-pass
--turbo
--inputpr6.dv
--outputpr6 .mp4
Fellrl lefel: a parancs elindtja a HandErake-et az "iPhone & iPod Touch"

sablonnal, a viclet tmretezi 320x240 kppontosra, 600 kbps tlagos bitse
bessget llt be, engedlyezi a ktmenetes kdolst gyors els menettel, be
olvassa a pr6.dv fjlt, s pr6.mp4 nven mentve kdolja azt.
WebM-videk kdolsa az ffmpeg segtsgvel

A WebM formtumot 2010. mjus 19-n tettk kzz-egyetlen nappal az
eltt, hogy ezt a rszt rtam. gy nem csoda, hogy mg nem volt nagy v
lasztk kdoleszkzkbl s tmutatkbl. A helyzet persze egyszer154
l Vide a Weben
5. fejezet
sdni fog, amint megrjk (vagy frisstik) a WebM egykattintsos tmoga

tshoz szksges eszkzket. Addig azonban ezekre az eszkzkre lesz
szksgnk:
a libvp8 knyvtrra, valamint az ffmpeg egy klnleges, kiegszt fol

tokkal elltott (a libvp8-hoz kapcsoldni kpes) vltozatra, amely mg
nem rsze a hivatalos ffmpeg-gyjtemnynek:
-tmutat Linuxhoz (http:lllardbucket.org/bloglarchives/2010/05119/vpB
webm-and-Jfmpeg/)- ezt szemlyesen teszteltem Ubuntu "Lucid" 10.04

rendszeren
-tmutat Windowshoz (http:!lwww.ioncannon.netlmeta/1128/compiling
webm-jfmpeg-windowsl)- ezt mg nem prbltam ki
az mkclean legjabb vltozatra (http://www.matroska.orgldownloads/
mkclean.html).
Kszen llunk? Rendben. A parancssorbl indtsuk el az ffmpeg-et param
terek nlkl, s gyzdjnk meg rla, hogy a fordts sorn belekerlt a VP8tmogats:
you@localhost$
f!p!g
FFmpeg version SVN-r23197, Copyright (c) 2000-2010 the FFmpeg developers

built on May 19 2010 22:32:20 with gcc 4.4.3
configuration: --enable-gpl --enable-version3 --enable-nonfree --enablepostproc
--enable-pthreads --enable-libfaac --enable-libfaad --enable-libmp3lame
--enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libtheora
--enable-libx264 --enable-libxvid --enable-xllgrab
--enable-libvpx-vpB
Ha nem ltjuk az --enable-libvpx-vp8 varzsszavakat, az ffmpeg-nek

nem a megfelel vltozatval rendelkeznk. (Ha megesksznk r, hogy az
imnt fordtottuk le helyesen, ellenrizzk, hogy nincs-e belle kt pld
nyunk. Ez nem okoz gondot, mert nem fognak tkzni egymssal - csak
ppen a teljes elrsi utat meg kell majd adnunk az ffmpeg VP8-at ismer
vltozatnak elindtshoz.)
Most azt mutatom be, hogy miknt lehet ktmenetes kdolst vgrehaj
tani (lsd a fejezet "H.264-videk kdolsa a HandBrake segtsgve!" cm
rszt). Az els menet csak vgigpsztzza a bemen vicleofjlt (-i pr6.dv) ,
s adatokat r ki rla egy naplfjlba (ami automatikusan a pr6.dv-O.log nevet
kapja). A videokodeket a -vcodec kapcsolval adhatjuk meg:
5. fejezet
Vide a Weben l 155
you@localhost$ ffmpeg -pass l -passlogfile pr6. dv -threads 16 -token_
parti tions 4
O -g 250 -mb_static_threshold O
-skip_threshold O -cp:nin l qmax 51 -i pr6. dv -vcodec li.bvpx_vp8
-altref l-lag 16 -keyint_min
-
-an
-f rawvideo -y NUL
A parancssorba rt ffmpeg-utasts nagy rsznek semmi kze a VP8-hoz vagy

a WebM-hez. A libvp8 ugyan tbb VP8-belltst is tmogat, amelyeket tadha
tunk az ffmpeg-nek, de ezeknek a mkdst mg nem ismerem. Amint tal
lok rluk egy j lerst, felteszek egy hivatkozst ennek a knyvnek a webhelyre.
A msodik menetben az ffmpeg kiolvassa az els menetben rgztett sta
tisztikai adatokat, s tnylegesen vgrehajtja a kp- s a hangsv kdolst. Az
eredmny egy MKV-fjl lesz, amit majd mi alaktunk ksbb WebM-fjll.
(Az ffmpeg idvel kpes lesz kzvedenl WebM-fjlokat kirni, de jelenleg
rejtlyes s veszlyes hibkat okoz, ha ilyesmivel prblkozunk.)
me a msodik menet parancsa:
you@localhost$ ffmpeg -pass 2 -passlogfile pr6. dv-threads 16 -token_
partitions 4
O -g 250 -mb_static_threshold O
O -cp:nin l qmax 51 -i pr6. dv -vcodec li.bvpx _vp8
-b 614400 -s 320x240 -aspect 4:3 -acodec vorbis -y pr6 . mkv
-altref l-lag 16 -keyint_min

-skip_threshold
Ebben a z utastssorban t fontos paramter tallhat:

-vcodeclibvpx_vp8
Ez a paramter azt adja meg, hogy a VP8 videokodekkel vgezzk a kdolst.

A WebM mindig a VP8 kodeket hasznlja.
-b 614400
Ez a bitsebessget hatrozza meg. Ms formtumoktl eltren a libvp8-nak

a bitek szmval, s nem kilobitben kell megadnunk a bitrtt, ezrt ha 600
kbps bitsebessg videt szeretnnk, a 600-at meg kell szoroznunk 1024-gyel
(gy jn ki a 614 400).
-s 320x240
Ez a clfjl kpmrett adja meg, a szlessg s a magassg szorzataknt.

-a spect 4:3
156
l Vide a Weben
5.
fejezet
Ez a vide kparnyt hatrozza meg. Az alapfelboms videk ltalban 4:3

oldalarnyak, a magas minsg videk oldalarnya azonban tbbnyire
16:9 vagy 16:10. A tesztels sorn gy talltam, hogy ezt kifejezetten meg kell
adnunk a parancssorban, s nem szabad az ffmpeg automatikus szlelsre
tmaszkodnunk.
-acodec vorbis
Ez a paramter azt adja meg, hogy a Yorbis audiokodekkel kdolunk A WebM

mindig a Yorbis audiokodeket hasznlja.
Ezzel egy MKY-fjlt kapunk, YP8 kdols kppel, s Yorbis kdols
hanggal. Ez nagyon kzel ll ahhoz, amit szerernnk, mert a WebM trol
formtuma szinte megegyezik az MKY formtumval (valjban annak egy
rszhalmaza). Csak nhny hitet kell tlltanunk a vgleges WebM-videofjl
ellltshoz a korbban emltett mkclean segdprogram segtsgve!:
you@localhost$ rnkclean -doc type
pr 6 .rnkv pr 6. webrn
s ennyi az egsz!
s vgl,
lerkd!
Felmerlhet bennnk a krds, hogy ha ez egy HTML-rl szl knyv amiben eddig biztosak volrunk -, akkor hol a lerkd? Nos, a HTML5-ben
ktfle mdszerrel gyazhatunk be egy videt egy weboldalba, de mindket
thz szksgnk van a <video> elemre. Ha csak egy videofjlunk van,
egyszeren hivatkozhatunk r egy
src
jellemzbL Ez nagyon hasonlt ah
hoz, mint amikor egy kpet gyazunk be egy <img
"
src= .. .
"> cmkvel:
<video src="pr6. wel:m"></video>
Elmletileg sszesen ennyire van szksg, de az <img> cmkkhez hasonlan

a <video> cmkkben is mindig clszer megadni a width s height jel
lemzket is. A width (szlessg) s height (magassg) jellemzk rtke
ugyanaz lehet, mint amit a kdols sorn maximlis szlessgknt s magas
sgkm megadtunk:
<video src= "pr 6. webrn" width="320" height="240"></video>
5.
fejezet
Vide a Weben l
157
Ne aggdjunk, ha a vide valamelyik kiterjedse kicsit kisebb a fentinl, a bn

gsz ugyanis a <video> elem ltal meghatrozott doboz kzepre igaztja
a videt, gy az soha nem fog arnytalanul sszenyomdni vagy megnylni.
Alaprtelmezs szerint a <video> elem nem jelent meg semmilyen
lejtszsvezrlt; ezeket egyszer HTML-, CSS- s J avaScript-kddal hozhat
juk ltre. A <video> elemnek vannak olyan tagfggvnyei, mint a play()
(lejtszs) s a pause() (sznet), valamint rendelkezik egy rhat s olvas
hat, currentTime (aktulis id) nev tulajdonsggal, illetve szintn rhat
olvashat volume (hanger) s muted (elnmtott) tulajdonsgokkal, teht
minden olyasmivel, amire a sajt felletnk felptshez szksgnk lehet.
Ha nem akarunk sajt felletet pteni, a bngszt is utasthatjuk, hogy
jelentse meg a beptett vezrlket. Ehhez csak a controls jellemzt kell
belefoglalnunk a <video> elembe:
<v ideo src= "pr 6. webm
width= "320" height= "240" controls></video>
Van mg kt tovbbi elhagyhat jellemz, amelyekrl emltst szeretnk

tenni, mieltt rovbbmennnk: a preload s az autoplay. Ne bntsuk
a hrhozt: hadd magyarzzam el, hogy ezek mirt hasznosak. A preload
jellemz azt mondja a bngsznek, hogy azt szeretnnk, hogy kezdje el le
tlteni a videofjlt, amint az oldal betltse elindul. Ennek akkor van rtelme,
ha az oldal kimondottan azt a clt szolglja, hogy megtekintsk a videt. Ha
viszont a vide csak kiegszt tartalom, amit csak nhny ltogat fog meg
nzni, a preload jellemzt none rtkre lltva utasthatjuk a bngszt,
hogy cskkentse a minimumra a hlzati forgalmat.
me egy plda egy olyan videra, amelynek a letltse (de nem a lejtszsa)
rgtn elindul az oldal betltsekor:
<v ideo src= "pr 6. webm
width= "320
height= "240 preload></video>
Ez pedig egy olyan vide, amely az oldal betltsekor nem tltdik le azonnal:
<video src= "pr 6. webm
width= "320" height= "240 preload="none"></video>
Az autoplay (automatikus lejtszs) jellemz pontosan azt eredmnyezi,

amire a neve utal: azt kzli a bngszvel, hogy a videofjl letltst az oldal
betltsekor rgtn el szeretnnk kezdeni, s a vide lejtszst is el szeret
nnk indtani, amint lehet. Vannak, akik rajonganak ezrt, s vannak, akik
gyllik, de hadd magyarzzam el, mirt fontos, hogy a HTML5-ben legyen
158
l Vide a Weben
5.
fejezet
egy ilyen jellemz. Egyesek akkor is automatikusan el szeretnk indtani

a videikat, ha ez idegesri a felhasznlkat. Ha a HTML5 nem hatrazna
meg egy szabvnyos mdszert a videk automatikus lejtszsra, a fejlesztk
JavaScript-trkkkkel akkor is megoldank, pldul meghvnk a vide
play() tagfggvnyt az ablak load esemnye kzben. Ez ellen a ltogatk
sokkal nehezebben tudnak vdekezni, egy olyan bvtmnyt viszont egysze

ren hozz lehet adni a bngszhz (vagy rni is lehet egyet, ha szksges),
amely lehetv teszi, hogy azt mondjuk: " hagyd figyelmen kvl azautoplay
jellemzt, mert egyetlen viclet sem szeretnk automatikusan elindtani".
me egy plda egy olyan videra, amelynek a letltse s a lejtszsa az
oldal betltse utn a lehet leghamarabb elindul:
<video src="pr 6. webm" width= "320" height= "240" autoplay><lvideo>
Az albbiakban pedig egy olyan Greasemonkey-parancsfjlt (http://www.
greasespot.net) lthatunk, amelyet a Firefax-pldnyunkra teleptve meg

akadlyozhatjuk a HTML5-videk automatikus lejtszst. A parancsfjl a
HTML5 ltal meghatrozott autoplay DOM-jellemzt hasznlja, ami
a HTML-kd autoplay jellemzjnek JavaScript-megfelelje:
ll ==UserScript==
ll @name
Disable video autoplay
ll @namespace
ll @description
http:lldiveintomark.orglprojectslgreasemonkeyl
Ensures that HTMLS video elements do not autoplay
ll @include
ll ==IUserScript==
var arVideos = document.getElementsByTagName ('video') ;
for (var i = arVideos.length
l; i >= O;
i--)
var elmVideo = arVideos [i];
elmVideo. autoplay
false;
De vrjunk csak egy percet! Ha vgig figyelemmel ksrtk a fejezetet, akkor

tudjuk, hogy nem csak egy, hanem hrom videofjlunk van. Az egyik egy
.ogv fjl, amelyet a Firefogg (lsd: "Ogg-videk kdolsa a Firefogg segts
gve!") vagy az ffmpeg2theora (lsd: " Ogg-videk ktegelt kdolsa az
ffmpeg2theora segtsgve!") hasznlatval hoztunk ltre, a msodik egy
.mp4 fjl, amelyet a HandErake-kel (lsd: "H.264-videk kdolsa a Hand
Brake segtsgve!") ksztettnk el, a harmadik pedig egy .webm fjl, ame
lyet az ffmpeg-gel (lsd: "WebM-videk kdolsa az ffmpeg segtsgve!")
5. fejezet
Vide a Weben l
159
lltottunk el. A HTML5-ben rendelkezsre ll egy elem, amelybl mind

hromra hivatkozhatunk: a <source>. Minden <video> elem tetszleges
szm <source> elemet tartalmazhat. A bngsz sorban vgigmegy a video
forrsok listjn, s az els olyat vlasztja, amelyet kpes lejtszani.
Ez felvet egy jabb krdst: honnan tudja a bngsz, hogy melyik viclet
tudja lejtszani? Nos, a legrosszabb esetben mindegyiket betlti, s megpr
blja lejtszani ket, ami persze hatalmas svszlessg-pazarls. Ha a bn
gszt viszont mindegyik viderl elre tjkoztatjuk, jelentsen cskkent
hetjk a hlzati forgalmat. Ezt a <source> elemben elhelyezett type
jellemzvel tehetjk meg:
<videe width="320' height="240
centrels>
<seurce src="pr6 .mp4" type=' videe/mp4; cedecs= "avcl. 42E01E, mp4a. 40.2 '" >
<source src="pr6. wetm" type=' videe/webm; cedecs= 'vp8, verbis"' >
<source src="pr6.ogv" type=' videe/egg; cedecs= "theera, verbis" >
</videe>
Nzzk meg rszletesen a fenti kdot! A <video> elem meghatrozza a vide

szlessgt s magassgt, de tnylegesen nem hivatkozik egyeden videofjlra
sem. A <video> elemen bell azonban van kt <source> elem: mindkett
egy-egy videofjlra mutat (az src jellemzvel), s megadja annak formtu
mt (a type jellemzvel).
A type jellemz bonyolultnak tnik- s bizony az is! Hromfle infor
mcit tartalmaz: a t:rolformtumot (lsd: "Videotrolk"), a videokodeket

(lsd: "Videokodekek") s az audiokodeket (lsd: "Audiokodekek"). Kezdjk
a lista vgvel. Az .ogv vicleofjl esetben a trolformtum az Ogg, amit itt
a video/ogg jell. (Ez az Ogg-videofjlok MIME-tpusa.) A videokodek
a Theora, az audiokodek pedig a Vorbis. Ez elg egyszer, attl eltekintve,
hogy a jellemz rtkt kicsit macers megadni: magnak a codecs rtk
nek is idzjelben kell llnia, ezrt a teljes type rtket msfajta idzjelek
kz kell zrnunk:
<seurce src="pr 6. egv
type=' video/ogg; codecs="theora, vorbis'" >
A WebM-fjl <source> eleme nagyon hasonl, csak a MIME-tpus ms
(video/ogg helyett video/webm), illetve msik videokodek (theora he

lyett vp8) szerepel a codecs paramteren bell:
<seurce src= "pr 6. webm" type=' video/wetm; codecs="vpB, vorbis"'
160 l Vide a Weben
>
5.
fejezet
A H.264-fjl <source> eleme mg bonyolultabb. Emlksznk mg r, hogy

azt mondtam, hogy mind a H.264-vide (lsd:
H.264"), mind az AAC

"
audi (lsd: "Advanced Audio Coding") klnfle "profil" lehet? Mi a k
"
dolst a Baseline H.264-profillal s a low complexity AAC-profillal vgez
"
tk, majd az egszet egy MPEG-4 trolba csomagoltuk Ezek az informcik
mind szerepeinek a type jellemzben:
<source src= "pr 6 .mp4" type='vicleo/mp4; coclecs="avcl.42E01E, mp4a. 40 .2'">
Ennek a bonyolult meghatrozsnak az az elnye, hogy a bngsz a type

jellemzt megvizsglva eldntheti, hogy le tudja-e jtszani az adott videofjlt.
Ha gy dnt, hogy erre nem kpes, nem tlti le a fjlt - mg egy rszt sem.
Ezzel svszlessget takartunk meg, s a ltogatink gyorsabban tekinthetik
meg azt a videt, amirt jttek.
Ha a videink kdolsakor a fejezet utastsait kvetjk, egyszeren be
msolhatjuk a type-jellemzrtkeket az itteni pldbl - ha nem, akkor
magunknak kell kitallnunk a megfelel type paramtereket.

E knyv rsnak idejn (2010. mjus 20-n) az iPad tartalmazott egy
hibt, amely megakadlyozta, hogy az els felsorolt videoforrson kvl
brmit felismerjen. Sajnos ez azt jelenti, hogy az MP4-fjlt kell az els
helyre tennnk, s csak az utn kvetkezhetnek az ingyenes video
formrumok. Shaj.
AMIME-tpusok belekpnek a levesbe

A vides kiraksjtknak annyi darabja van, hogy nem is igazn merem fel
hozni, de muszj, mert egy rosszul belltott webkiszolgl vgtelen knlds
hoz vezethet, amikor megprbljuk kiderteni, hogy mirt tudjuk lejtszani
a videinkat a sajt szmtgpnkn, de az zemi webhelynkn nem. Ha
ebbe a problmba tkznk, az okot valsznleg a MIME-tpusokban kell
keresnnk.
5.
fejezet
Vide a Weben l
161
Az l. fejezetben mr emltettem a MIME-tpusokat, de akkor valsz

nleg nem mrtk fel a jelentsgket. gy ht megismtlem csupa nagy
betvel:
Lerkd professzor azt kiablja

VIDEOFJLOKAT A MEGFELEL MIME-TPUSSAL KELL
SZOLGLTATNI!
De mi a megfelel MIME-tpus? Mr lttuk: a <source> elem type jellem

zjben szerepl rtk egyik rsze. A type jellemz belltsa a HTML-kdban
azonban nem elg. Arrl is gondoskodnunk kell, hogy a webkiszolgl belefog
lalja a helyes MIME-tpust a Content-Type H TTP-fejlcbe.
Ha az Apache webkiszolglt vagy annak valamelyik rokont hasznljuk,
Add Type utastsokat hasznlhatunk az egsz webhelyre rvnyes httpd.
conf fjlban vagy a videofjljainkar trol knyvtr .htaccess fjljban. (Ha
ms webkiszolglt zemeltetnk, nzznk urna a kiszolgl dokumentci
jban, hogy miknt llrhatunk be konkrt fjltpusokat a Content-Type
HTTP-fejlcben.) A kvetkez Add Type urasrsokat kell beszrnunk:
AddType video/agg .ogv
AddType video/mp4 .mp4
AddType video/webm . webm
Az els sor az Ogg-trolban elhelyezett, a msodik az MPEG-4 trolha

burkolt, a harmadik pedig a WebM-videk tpust adja meg. Ezeket csak
egyszer kell belltanunk, aztn megfeledkezhetnk rluk. Ha viszont nem
adjuk meg ezeket a belltsokat, a videink egyes bngszkben biztosan
nem lesznek lejtszhatk, mg akkor sem, ha a H TM L-kdban megadjuk
a MIME-tpust a type jellemzben.
A webkiszolgl bellrsnak egyb vres rszleteit megtalljuk a Mozilla
Developer Center egyik kitn cikkben, amelynek cme "Configuring ser
vers for Ogg media" (" Kiszolglk belltsa Ogg-mdiafjlok szmra",
https:lldeveloper. mozilla. orglen/Conjiguring_servers_for Ogg_media a cikk
ben olvashat tancsok az MP4- s WebM-videkra is rvnyesek).
_
162
J Vide a Weben
5.
fejezet

Mikzben a knyvet rtam, a Microsoft megjelentette az Internet Explorer 9
"
" fejleszti elzetest . Ez mg nem tmogatta a HTML5 <video> elemt, de
a Microsoft nyilvnos gretet tett (http:l/blogs.msdn.com/ie/archive/2010/03/161
html5-hardware-accelerated-jirst-ie9-platform-preview-available-for-developers.
aspx), hogy az IE 9 vgleges vltozata tmogatui fogja az MPEG-4 trolban
elhelyezett, H.264-videosvval s AAC-audiosvval rendelkez videofjlokat,
akrcsak a Safari az asztali Mac, illetve a Mobile Safari az iOS rendszereken.
De mi a helyzet az Internet Explorer rgebbi vltozataival- pldul az IE
8-cal vagy az eltte kiadott vltozatokkal? Nos, a legtbb Internet Explorer
felhasznl telepti az Adobe Flash bvtmnyt is, mrpedig a Flash jabb
vltozatai (a 9.0.60.184-estl kezdve) tmogatjk az MPEG-4 trolban el
helyezett, H.264-videosvval s AAC -audiosvval rendelkez videofjlokat.
A Safarira elksztett H.264 kdols videkat (lsd a fejezet "H.264-videk
kdolsa a HandBrake segtsgve!" cm rszt) lejtszhatjuk egy Flash
alap videolejtszban is, ha szleljk, hogy a ltogat nem rendelkezik
HTML5-kpes bngszvel.
A FlowPlayer (http://fiowplayer.orgl) egy nylt forrs, GPL felhasznlsi
engedly, Flash alap videolejtsz. (Kereskedelmi felhasznlsi engedllyel
is elrhet; lsd a http:llflowplayer.orgldownload/ cmen.) A FlowPlayer mit
sem tud a <video> elemrl, s nem kpes varzslattal Flash-objektumm
alaktani egy <v ideo> cmkt, de a HTML5-t felksztettk az ilyen esetek
kezelsre, hiszen egy <video> elembe begyazhatunk egy <object> ele
met. A HTML5-videkat nem tmogat bngszk figyelmen kvl hagyjk
a <video> elemet, s helyette egyszeren a begyazott <object> elemet
jelentik meg, amely meghvja a Flash bvtmnyt, s lejtssza a filmet a Flow
Playeren keresztl, mg a HTML5-videkat ismer bngszk megkeresik az
ltaluk lejtszhat videoforrst, s azt jtsszk le, teljesen figyelmen kvl
hagyva a begyazott <object> elemet.
Az utols mondat az egsz kiraksjtk kulcsa: a HTML5 kimondja, hogy
a <video> elemek minden gyermekt (a <source> elemeket kivve) telje
sen figyelmen kvl kell hagyni. Ez teszi lehetv, hogy az jabb bngszk
lejtsszk a HTML5-videkat, mikzben a rgebbi bngszk elegnsan
a Flash-re szortkoznak, anlkl, hogy brmilyen JavaScript-trkkre lenne
5.
fejezet
Vide a Weben l
163
szksg. A mdszerrl a Vicleo for Everybody! webhelyn (http:llcamendesign.
comlcodelvideo_for_everybody) bvebben is olvashatunk.
Egy teljes plda

Nzznk meg egy pldt, amely a fenti eljrsokat alkalmazza. A Vicleo for
Everybody! kdjt kiegsztettem, hogy WebM formtum vide is legyen
benne. Az albbi parancsokkal hrom formtumban kdoltam a forrsvidet:
U
Theora/Vorbis/Ogg
you@localhost$ ffmpeg2theora --videobitrate 200 --max_size 320x240 --output
pr6.ogv pr6. dv
H.264/AAC/MP4
you@localhost$ HandBrakeCLI --preset "iPhone & iPod Touch"
--vb 200 --width 320
--two-pass --turbo --optimize --input pr6. dv --output pr6. mp4
##
VP8/Vorbis/WebM
you@localhost$ ffmpeg -pass l -passlogfile pr6. dv -threads 16 -token_
partitions 4
O -q 250 -mb_static_threshold O
O -qmin l qmax 51 -i pr6. dv -vcodec libvpx_vp8
-altref l -lag 16 -keyint_min

-skip_threshold
-an -f rawvideo -yNULffmpeg --videobitrate 200

you@localhost$ ffmpeg -pass 2 -passlogfile pr6. dv -threads 16 -token_
partitions 4
l -lag 16 -keyint_min O -g 250 -mb_static_threshold O

O -qmin l qmax 51 -i pr6. dv -vcodec libvpx vp8
-b 204800 -s 320x240 -aspect 4:3 -acodec vorbis -ac 2 -y pr6 . mkv
you@localhost$ mltclean --doctype 4 p r6 .mkv pr6. wel:m
-altref
-skip_threshold
A vgleges lerkd egy <video> elemet hasznl a HTML5-videolejtszshoz,

a rgebbi bngszk pedig az ebben lev begyazott <object> elemet jtsz
hatjk le a Flash segtsgve!:
<video id="movie" width="320" height="240
preload controls>
<source src= npr6.mp4" type=' video/mp4; codecs="avcl.42E01E, mp4a.40.2 "' />

<source src= npr6. webm" type=' video/webm; codecs= "vp8, vorbis"' l>
<source src="pr6.ogv" type=' video/ogg; codecs= ''theora, varbis '" l>
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.l.swf">
<param name="movie" value="flowplayer-3. 2.l. swf" l>
<param name="allowfullscreen" value="true" />
<par am name="flashvars" value=' config= {
"elip": {"url n: "http: l/wearehugh. com/dihSigood/bbb_480p.mp4",
164 l Vide a Weben
5. fejezet
autoPlay : false, autoBuffering : true l
l'
/>
<p>Download video as <a href= "pr 6.mp4 ">MP4</a>,

<a href= "pr 6. webm ">WebM</a>, or
<a href= "pr 6. ogv ">Ogg</a>.</p>
</object>
</video>
A HTML5 s a Flash egyttes hasznlatval a viclet szinte brmely bng

szben s eszkzn megtekinthetjk
Tovbbi olvasmnyok
"The <v ideo> element" a HTML5 szabvnylersban (http://bit.lyla3kpiq)

Vicleo for Everybody! (http:llcamendesign.com/codelvideo_for_everybody)
"A gende introduction to video eneading" (http:lldiveintomark.orgltaglgive)
"
Christopher Blizzard: "Theora l. l is released-what you need to know
(http:llhacks.mozilla.org/2009/09/theora-1-1-re!eased/)
Configuring servers for Ogg media" (https:lldeve!oper.mozil!a.orglen/Con
"
figuring_servers_for_Ogg_media)
"Encoding with the x264 codec" (http:llwww.mplayerhq.hu/DOCSIHTMLI
enlmenc-feat-x264. html)
Video type parameters" (http://wiki.whatwg.orglwiki/Video_type_para
"
meters}
Zeneader Vicleo JS (http://videojs.com)- egyni vezrlk HTML5-videkhoz
Simon Pieters: Everything you need to know about HTML5 audio and
"
video" (http:lldev.opera.comlartic!es/viewleverything-you-need-to-know-about
htm!5-video-and-audiol )
6.
fejezet
Itt ll n (s mindenki ms)
Ugorjunk fejest!
A helymeghatrozs (geolokci) annak a mvszete, hogy kidertsk, hol is
vagyunk a vilgban, s (ha akarjuk), megosszuk ezt az informcit azokkal,
akikben megbzunk. A tartzkodsi helynkrl sok minden rulkodik - az
IP-cmnk; a drt nlkli hlzati kapcsolatunk; az adtorony, amellyel a mo
biltelefonunk kommunikl; de egy GPS-eszkz is megmondhatja a szlessgi s
a hosszsgi fokot az rben kering mholdakrl kapott informcik alapjn.

Krds: A helymeghatrozs veszlyesnek tnik. Ki lehet kapcso/ni?
Vlasz: Termszetes, hogy nem szvesen osztunk meg olyan magnjel
leg informcikat, mim a tartzkodsi helynk, egy tvoli webkiszol
glvaL A Geolocation API egyrtelmen kimondja (http://www.w3.
org/TR/geolocation-API/#security), hogy "a bngszknek nem szabad
a helyre vonatkoz informcikar radniuk a webhelyeknek a felhasz
nl kifejezett engedlye nlkl". Ms szavakkal, ha nem akarjuk el
rulni a tartzkodsi helynket, nem kell.
Geolocation API
A G e olocation API segtsgvel megbzhat webhelyekkel oszthatjuk meg

a tartzkodsi helynket. Az oldalon tallhat JavaScript-kd hozzfr a sz
lessgi s hosszsgi fokhoz, s ezt az informcit a tvoli webkiszolglnak
6. fejezet
Itt ll n (s mindenki ms) l
167
elkldve olyan helyfgg mveleteket vgezhet, mint a helyi zletek keresse

vagy a tartzkodsi helynk megjelentse egy trkpen.
Ahogy a 6.1. tblzatbl lthatjuk, a helymeghatroz API-t a fontosabb
asztali s mobil bngszk tbbsge tmogatja. Ezen fell burkolknyvtrak
segtsgvel egyes rgebbi bngszk s eszkzk is kpess tehetk a haszn
latra- ezt is ltni fogjuk a fejezet ksbbi rszben.
6.1. tblzat A Geolocation API tmogatsa
3.5+
5.0+
5.0+
3.0+
2.0+
A szabvnyos helymeghatroz API mellett a mobileszkzk klnfle esz

kzfgg programozsi felleteket is tmogatnak, amelyekrl szintn szt
ejtnk majd ebben a fejezetben.
Mutasd a kdot!
A helymeghatroz API kzppontjban a globlis
egy j tulajdonsga ll: a
navigator
navigator .geolocation.
objektum
A helymeghatroz
API legegyszerbb hasznlata gy fest:

function get_location() {
navigator.geolocation.getCurrentFosition(show_map);
Nincs kpessgrzkels, nincs hibakezels, s nincsenek kapcsolk. A web

alkalmazsnak azonban ezek kzl legalbb az els kettre szksge szokott
lenni. A helymeghatroz API tmogatsnak szlelsre (lsd a 2. fejezet
"Helymeghatrozs" cm rszt) a Modernizr-t hasznlhatjuk:
function get_location () {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
l l nincs beptett tmogats; prbljuk meg esetleg a Gearst?
}
}
Az, hogy mit csinlunk, ha a helymeghatroz API nem tmogatott, csak

tlnk fgg. A Gears hasznlatr, mint alaprtelmezett helyettest megol168 l Itt ll n (s mindenki ms)
6. fejezet
dst, hamarosan elmagyarzom, de elszr arrl szeretnk szt ejteni, hogy

mi trtnik a getCurrentPosition () hvs kzben. Ahogy a fejezet elejn
emltettem, a helymeghatrozs tmogatsa engedlyezshez kttt. Ez azt
jelenti, hogy a bngsznk soha nem fog arra knyszerteni minket, hogy
fedjk fel az aktulis tartzkodsi helynket egy tvoli kiszolglnak. A fel
hasznl ltal tapasztalt viselkeds minden bngszben ms s ms: a Mozilla
Firefaxban a Geolocation API getCurrentPosition () fggvnynek meg
hvsa azt eredmnyezi, hogy a bngsz egy informcis svot" jelent meg
"
a bngszablak tetejn. Az informcis sv kinzett a 6.1. brn lthatjuk.
cfrveintohtm15.org wants to lmow your location.
6.1. bra
l Shtrc location J l ()g_n t Share J
.Rember for this srte
A helymeghatroz informcis sv
Az informcis sv megjelense a kvetkezkrl tjkoztat minket, mint vg

felhasznlkat, illetve a kvetkez mveletekre s dntsekre ad lehetsget:
Kzli, hogy egy webhely tudni szeretn a tartzkodsi helynket.
Kzli, hogy melyik webhely szeretn tudni a tartzkodsi helynket.
Egy kattintssal a Mozilla Location-Aware Browsing" ("Tartzkodsi

"
helyet figyelembe vev bngszs") cm sgoldalra ugorhatunk, amely
elmagyarzza, mirl is van sz.
Engedlyezhetjk a tartzkodsi helynk megosztst.
Megtilthatjuk a tartzkodsi helynk megosztst.
Utasthatjuk a bngszt, hogy jegyezze meg, mit vlasztottunk (a meg

osztst engedlyezst vagy letiltst), gy a szban forg informcis
sv tbb nem fog megjelenni az adott webhely megltogatsakor.
Az informcis sv ezen kvl
nem modlis, teht nem akadlyozza meg, hogy msik bngszablakra

vagy -lapra vltsunk,
laphoz ktd, teht eltnik, ha msik bngszablakra vagy -lapra vl

tunk, s jra megjelenik, amikor visszakapcsolunk az eredeti lapra,
felttlenl megjelenik, teht egy webhely semmikppen nem kerlheti meg,

blokkol, teht a webhely nem kpes kiderteni a tartzkodsi helyn
ket, amg a vlaszunkra vr.
6.
fejezet
Itt ll n (s mindenki ms) l
169
Kicsit feljebb lttuk a JavaScript-kdot, amelynek a hatsra megjelenik az

emltett informcis sv. Egy egyszer fggvnyhvsrl van sz, amelynek
a paramtere egy visszahv fggvny (itt show _ map() nven). A getCurrent
Pos ition () hvs azonnal visszaadja a vezrls t, de ez nem jelenti azt, hogy
elrhetjk a felhasznl tartzkodsi helyt. A tartzkodsi helyrl elszr
a visszahv fggvnyben kapunk biztosan informcit. A visszahv fgg
vny gy fest:
function show_map (position)
var latitude
= position.coords.latitude;
= position. coords.longitude;
var longitude
ll
Jelentsnk meg egy trkpet, vagy csinljunk valami rdekeset!
A visszahv fggvny egyetlen paramterrel hvdik meg; ez a paramter egy

objektum, amelynek kt tulajdonsga van: a coords (koordintk) s a
timestamp (idblyeg). Az idblyeg pontosan az, amire a neve utal:
a tartzkodsi hely kiszmtsnak dtuma s ideje. (Mivel a mvelet aszink
ron mdon trtnik, nem tudhatjuk elre, hogy ez mikor kvetkezik be.
A felhasznlnak idbe telhet, amg elolvassa az informcis svot, s bele
egyezik, hogy megossza a tartzkodsi helyt; a GPS-sel felszerelt eszkzk
nek idbe telhet, amg kapcsoldnak egy GPS-mholdhoz, s gy tovbb.)
A coords objektumnak olyan tulajdonsgai vannak, mint a l atitude
(szlessgi fok) s a longitude (hosszsgi fok), amelyek pontosan azt adjk
meg, amire a nevk ural: a felhasznli fldrajzi helyt. A position objek
tum tulajdonsgait a 6.2. tblzat sorolja fel.
6.2. tblzat A position objektum tulajdonsgai
Tu
coords.latitude
double
tizedfok pontossggal
coords.longitude
double
tizedfok pontossggal
coords.altitude
double vagy null
az alapfelleti ellipszoid felett. mterben
coords.accuracy
double
mterben
coords. altitudeAccuracy
double vagy null
mterben
coords.heading
double vagy null
a valdi szaktl szmtott fokban, az

ramutat jrsa szerint
coords.speed
double vagy null
mter/msodpercben
timestarop
DOMTimeStamp
Olyan, mint egy Date
170
l Itt ll n (s mindenki ms)
()
objektum
6.
fejezet
Ezek kzl csak hrom tulajdonsg (coords .lati tude, coords .longi tude
s coords. accuracy) jelenlte garantlt. A tbbi null rtket is kaphat,
az eszkz s a vele kommunikl helymeghatroz httrkiszolgl kpess
geitl fggen. A heading (irny) s speed (sebessg) tulajdonsgok kisz
mtsa a felhasznl elz tartzkodsi helye alapjn trtnik (amennyiben
ez rendelkezsre ll).
A hibk kezelse
A helymeghatrozs bonyolult, mert sok minden kisiklathatja a mveletet.
A felhasznli beleegyezst" mr emltettem. Ha a webalkalmazsunk meg
"
szeretn tudni a felhasznl tartzkodsi helyt, de a felhasznl nem akarja
megadni azt, meg vagyunk lve. Mindig a felhasznl nyer. De hogyan fest
mindez kdban? gy tnik, a g etCurrentPosition() fggvnynek egy
msodik paramtert kell tadnunk- egy hibakezel visszahv fggvnyt:
navigator.geolocation.getCurrentPosition(
show_map, handle_error)
Ha brmi flresiklik, a hibakezel fggvnynk hvdik meg egy Po sition

Error
objektummaL E nnek az objektumnak a tulajdonsgait a 6.3. tbl
zatban lthatjuk.
6.3. tblzat A PositionError objektum tulajdonsgai
sek
nous
code
short
felsorol rtk
messa_g_e
DOMString
nem a v_g_felhasznlknak sznva
A code tulajdonsg rtke a kvetkezk egyike lehet:
PERMISSION
DENlED
(l) -"A hozzfrs megragadva": ezt az rt
ket akkor kapjuk, ha a felhasznl a Don't Share (Nincs megoszts) gombra

kattint, vagy ms mdon megragadja, hogy hozzfrjnk a tartzkdsi
helyhez.
POSITION
UNAVAILABLE
(2) -"A hely nem hozzfrhet": ezt az
rtket akkor kapjuk, ha nincs hlzati kapcsolat, vagy ha a helymegha

troz mholdakat nem lehet elrni.
6. fejezet
Itt ll n (s mindenki ms) J 171
TIMEOUT
(3) -"Idtllps": ezt az rtket akkor kapjuk, ha a hlzati
kapcsolat l ugyan, de tl sokig tart kiszmtani a felhasznl tartzko

"
dsi helyt. Mennyi id szmt "tl soknak ? A kvetkez rszben meg
mutatom, hogyan hatrozhatjuk meg.
UNKNOWN _ERROR
"
(0) -"Ismeretlen hiba : ezt az rtket akkor kap
juk, ha brmilyen ms hiba lp fel.

Pldul:
function handle_error (err) {
if (err.code=l) {
l l A felhasznl nemet mondott 1

Krds: A helymeghatroz API a Nemzetkzi rllomson, a Holdon s
ms bolygkan is mkdik?
Vlasz: A Geolocation API szabvnylersa (http:llwww.w3.org/TRI
geolocation-API/#coordinates_interfoce} ezt mondja: A fldrajzi vonat
"
koztatsi rendszer, amelyet e fellet jellemzi hasznlnak, a World
Geodetic System (2d) [WGS84] (geodziai vilgrendszer). Egyetlen
ms vonatkoztatsi rendszer sem tmogatott." A Nemzetkzi rlloms
Fld krli plyn mozog, ezrt az llomson tartzkod rhajsok
(http:!!twitter.com/Astro_Tj) a helyzetket le tudjk rni szlessgi s

hosszsgi fokokkal, illetve magassggaL A geodziai vilgrendszer
ugyanakkor Fld-kzpont, ezrt nem hasznlhat helymeghatro
zsra sem a Holdon, sem ms bolygkon.
Vlasztst! Szabad vlasztst!

Egyes npszer mobileszkzk -pldul az iPhone s az Android telefonok
- kt mdszert tmogatjk a tartzkodsi hely meghatrozsnak. Az els
mdszer hromszgelssei szmtja ki a helyzetnket a telefonszolgltatnk
klnbz adtornyaihoz viszonytott kzelsgnk alapjn. Ez a mdszer
172
6.
fejezet
gyors, s nem ignyel semmilyen klnleges GPS-hardvert, viszont csak

durva kzeltssel adja meg, hogy hol tartzkodunk. Attl fggen, hogy
hny mobiladtorony van a krzetnkben, ez a durva kzelts" lehet csupn
"
egy hztmbnyi, de akr minden irnyban plusz-mnusz egy kilomter is.
A msodik mdszer ezzel szemben valban az eszkznk GPS-hardvert
hasznlja, hogy kommunikljon a Fld krl kering helymeghatroz m
holdakkal. A GPS ltalban nhny mter pontossggal kpes megllaptani
a helynket. A htrnya az, hogy a mobileszkzk GPS-lapkja sok energit
fogyaszt, ezrt a telefonok s ms ltalnos cl mobileszkzk tbbnyire
kikapcsoljk a lapkt, amg tnylegesen szksg nincs r. Ez azt jelenti, hogy
nmi idt ignyel, amg a lapka kapcsolatot teremt az rben kering GPS
mholdakkal. Ha valaha is hasznltuk a Google Maps szolgltatst egy
iPhone-kszlken vagy ms okostelefonon, mr mindkt mdszert lttuk m
kds kzben. Elszr egy nagy kr jelenik meg, amely hozzvetlegesen mutatja
a helyzetnket (a legkzelebbi mobiladtorony alapjn), majd egy kisebb kr
(a ms adtornyokkal vgzett hromszgels alapjn), vgl pedig egy pont, ami
a pontos helyzetnket mutatja (a GPS-mholdaktl kapott adatok szerint).
Azrt rom le mindezt, mert a webalkalmazsunktl fggen nem biztos,
hogy nagy ponrossgra van szksgnk. Pldul ha a kzelben lev mozik
msorra vagyunk kvncsiak, valsznleg az alacsony pontossg" hely
"
meghatrozs is elegend. Annyira nincs sok filmsznhz, mg a srn lakott
vrosokban sem, s valsznleg magunk is ismernk nhnyat. Ha viszont
vals idej tbaigaztst adunk sarokrl sarokra, pontosan tudnunk kell a fel
hasznl helyt, hogy azt mondhassuk: "20 mteren bell fordulj jobbra" (vagy
valami ilyesmit).
A getCurrentPasit ion() fggvny egy nem ktelez harmadik para
mtert is elfogad: egy PositionOptions objektumot. A PositionOptions
objektumoknak hrom tulajdonsga llthat be (lsd a 6.4. tblzatot). Egyik
tulajdonsg megadsa sem ktelez: bellrhatunk egyet, kettt vagy hrmat,
de akr el is hagyhatjuk mindet.
6.4. tblzat
A PositionOptions objektum tulajdonsgai
rtetmezs
enableHighAccuracy
boolean
false
a true lassabb lehet
timeout
long
(nincs alaprtelmezs)
ezredmsodpercben
maximumA9:e
long_
ezredmsode.ercben
6. fejezet
Itt ll n (s mindenki ms) l 173
Az enableHighAccuracy ("nagy pontossg engedlyezse") tulajdonsg

pontosan arra val, amire a neve utal: ha true-ra lltjuk, s az eszkz tmo
gatja, illetve a felhasznl is beleegyezik, hogy megossza a pontos helyzett,
az eszkz megprblja kiderteni a pontos helyet. Az alacsony s a nagy pon
tossg helymeghatrozst az iPhone s Android telefonokon egyarnt kln
kell engedlyezni, ezrt elfordulhat, hogy a getCurrentPosition() h
vsa enableHighAccuracy: true rtkkel kudarcot vall, de enableHigh
Accuracy: false rtkkel sikerrel jr.
A timeout tulajdonsg azt adja meg, hogy a webalkalmazsunk hny

ezredmsodpercet hajland vrni a helymeghatrozsra. Az idzt csak az
utn kezd visszaszmolni, hogy a felhasznl engedlyt adott a helyzete ki
szmtsra, teht nem a felhasznlnak ketyeg az ra, hanem a hlzatnak.
A maximumAge tulajdonsg lehetv teszi az eszkznek, hogy azonnal
visszaadjon egy elraktrozott helyzetet. Tegyk fel pldul, hogy els alka
lommal hvjuk meg a getCurrentPasition() fggvnyt. A felhasznl
engedlyezi a mveletet, az ehhez kttt visszahv fggvny ( "success_
callback") pedig egy olyan helyzettel hvdik meg, amelynek a kiszmtsa
pontosan dleltt
10 rakor trtnt. Pontosan egy perccel ksbb (de. 10:01-
kor) ismt meghvjuk a getCurrentPasition () fggvnyt, a maximumAge

tulajdonsgnak a 75000 rtket adva:
navigator.geolocation.getCurrentPosition(
success_callback, error_callback,
{ maximumAge: 7 5000}) ;
Itt azt mondjuk, hogy nem felttlenl a felhasznl jelenlegi helyzetre

vagyunk kvncsiak; azzal is megelgsznk, ha tudjuk, hol volt
perccel
(75
75 msod
OOO ezredmsodperccel) ezeltt. Esetnkben az eszkz azt tudja,
hogy hol tartzkodott a felhasznl
60 msodperccel (60
OOO ezredmsod
perccel) korbban, mert kiszmtotta a helyzett, amikor elszr hvtuk meg

a getCurrentPosition() fggvnyt. Mivel ez a megadott idtartom
nyon bellre esik, az eszkz nem veszdik azzal, hogy ismt kiszmalja a fel
hasznl helyzett, hanem pontosan azt az informcit adja vissza, amit az
els alkalommal: ugyanazt a szlessgi s hosszsgi fokot, ugyanazt a pon
tossgot, s ugyanazt az idblyeget
(10:00 AM).
Mieltt azonban lekrdeznnk a felhasznl helyzett, vgig kell gondol

nunk, hogy milyen ponrossgra van szksgnk, s ennek megfelelen kell
belltanunk az enableHighAccuracy tulajdonsgot. Ha a felhasznl
174
6.
fejezet
helyt egynl tbbszr kell meghatroznunk, azt is tisztznunk kell, hogy

legfeljebb milyen rgi lehet az informci ahhoz, hogy mg hasznt vehessk,
s ennek megfelelen be kell lltanunk a maximumAge tulajdonsg rtkt
is. Ha viszont folyamatosan kell figyelnnk a felhasznl helyzett, akkor
a getCurrentPosition () fggvny nem felel meg neknk- helyette a
watchPosition()
fggvnyt kell hasznlnunk.
A watchPosition () fggvny felptse megegyezik a getCurrent

Position ()
fggvnyvel: ugyangy kt visszahv fggvnyt kell megad
nunk neki - egyet siker, egyet pedig kudarc esetre-, s ugyangy elfogad
egy PositionOptions objektumot (az imnt ltott tulajdonsgokkal).
A klnbsg annyi, hogy a visszahv fggvny minden alkalommal meghvdik,
amikor a felhasznl helyzete megvltozik Nincs szksg teht a tartzko
dsi hely aktv lekrdezsre: az eszkz hatrozza meg az optimlis lekrdezsi
idkzt, s gondoskodik a visszahv fggvny meghvsrl, amikor gy
tli meg, hogy a felhasznl helyet vltoztatott. Ezt felhasznlhatjuk pldul
arra, hogy egy trkpen jelezzk a felhasznl mozgst; utastsokat adjunk
neki, hogy merre menjen; s gy tovbb. A lehetsgeknek csak a fantzink
szab hatrt.
Maga a watchPosition() fggvny egy szmot ad vissza, amelyet
rdemes elraktroznunk valahol. Ha mr nem kvnjuk figyelni a felhasz
nl helyvltoztatst, ezt a szmot tadva hvjuk meg a clearWatch()
fggvnyt, s az eszkz abbahagyja a visszahv fggvnynk hvogatst.
A dolog ugyangy mkdik, mint a JavaScriptben a setinterval () s
clearinterval ()
fggvnyek.

Az Internet Explorer nem tmogatja a W3C helymeghatroz API-jt, amely
rl eddig beszltnk (lsd a fejezet "A Geolocation API" dm rszt), de ne
essnk ktsgbe. AGears (http:lltools.google.comlgearsl) egy nylt forrs bn
gszbvtmny a Google cgtl, amely Windowson, Macen, Linuxon, vala
mint Windows Mobile s Android rendszereken is mkdik, s klnfle
szolgltatsokat biztost a rgebbi bngszk szmra - tbbek kztt egy
helymeghatroz API-t. Ez a programozsi fellet nem teljesen azonos a W3C
Geolocation API-jval, de ugyanazt a clt szolglja.
6.
fejezet
Itt ll n (s mindenki ms) l 175
Ha mr a rgi rendszereknl tartunk, szeretnk rmutatni, hogy a mobil

telefonokon az eszkztl fggen klnfle helymeghatroz API-kkal tall
kozhatunk. A BlackBerry, a Nokia, a Palm s az OMTP BONDI mind sajt
helymeghatroz felletet biztostanak, amelyeknek a mkdse termsze
tesen eltr a Gearstl, ami viszont mskpp mkdik, mint a W3C Geo
location API-ja. . .
A felment sereg: geo.js

A geo.js (http:llcode.google.comlplgeo-location-javascriptl) egy nylt forrs,
MIT felhasznlsi engedly JavaScript-knyvtr, amely elsimtja a klnb
sgeket a W3C helymeghatroz API-ja, a Gears API-ja s a mobileszkzk
ltal knlt klnfle API-k kztt. A hasznlathoz kt <script> elemet
kell beszrnunk az oldalunk aljra. (Elmletileg brhov tehetjk ezeket, de
a <head> rszben elhelyezett parancsfjlok lelasstjk az oldal betltst,
ezrt ne oda tegyk ket!)
Az els parancsfjl a gears_init.js (http:llcode.google.comlapislgearslgears_
initjs), amely elkszti a Gearst, amennyiben az teleptve van, a msik pa

rancsfjl pedig a geo.js (http:llgeo-location-javascript.googlecode.comlsvnltrunkl
jslgeojs}. Az oldalba pldul az albbihoz hasonl kddal szrhatjuk be ket:

<! DOCTYPE html>
<html>
<head>
<meta char set= "utf-8 ">
<title>Dive Into HTML 5</title>
</head>
<body>
<script src="gears_init. js "X/ script>

<script src="geo. js "X/ script>
</body>
</html>
Most mr kszen llunk brmelyik teleptett helymeghatroz API hasznlatra:

if (geo_position_js.init())
geo_position_js.getCurrentPosition(geo_success, geo_error);
176 l Itt ll n (s mindenki ms)
6. fejezet
Nzzk vgig egyenknt a lpseked Elszr is, kifejezetten meg kell hvnunk
egy init() fggvnyt, amely true-t ad vissza, ha valamelyik tmogatott
helymeghatroz API elrhet:
if (geo_yosition_js.init()) {
Az i nit () fggvny meghvsval mg nem dertjk ki a felhasznl tartz

kodsi helyt, csupn arrl bizonyosodunk meg, hogy a helymeghatrozs
lehetsges. Ahhoz, hogy tnylegesen megtudjuk a felhasznl helyzett, meg
kell hvnunk a getCurrentPosition() fggvnyt:
geo_yosition_js.getCurrentPosition(geo_success, geo_error);
A getCurrentPosition() fggvny hatsra a bngsz engedlyt kr

a felhasznltl, hogy meghatrozza s megossza a tartzkodsi helyt. Ha a
helymeghatrozst a Gears biztostja, egy prbeszdablak jelenik meg, amely
azt krdezi, hogy a felhasznl megbzik-e a webhelyben annyira, hogy meg
engedje neki a Gears hasznlatr. Ha a bngsz beptve tmogatja a Geo
location API-t, a prbeszdablak mskpp fog kinzni. A Firefox 3.5 pldul
egy informcis svot jelent meg az oldal tetejn, s a felhasznl ezen enge
dlyezheti a helyzete megosztst a webhelynkkeL
A getCurrentPosition () fggvny paramterknt kt visszahv
fggvnyt vr. Ha a getCurrentPosition() fggvny sikeresen megha
trozta a felhasznl helyzett - vagyis a felhasznl engedlyt adott erre, s
a Geolocation API el is vgezte a feldart -, az els paramterknt kapott
fggvnyt hvja meg. Az albbi pldban a siker viszahv fggvnye a
success nevet viseli:
geo
Ez a visszahv fggvny egyeden paramtert vr, amelyben a tartzkodsi

helyet ler adatok tallhatk:
function geo_success (p) {
alert('Found you at latitude
"
p.coords.latitude +
longitude "+p.coords.longitude);
Ha a getCurrentPosition() fggvny nem tudta kiderteni a felhasznl

tartzkodsi helyt - vagy azrt, mert a felhasznl ezt nem engedlyezte;
vagy azrt, mert a helymeghatroz API nem jrt sikerrel valamilyen okbl
6. fejezet
Itt ll n (s mindenki ms)
177
kifolylag-, akkor a msodik paramterknt kapott fggvnyt hvja meg. Az

albbi pldban a kudarc viszahv fggvnye a geo
error nevet viseli:
Ennek a visszahv fggvnynek nincsenek paramterei:

function geo_error() (
alert('Could not find you!
'
);
A geo.js jelenleg nem tmogatja a watehPosition () fggvnyt. Ha folya

matos helymeghatrozsra van szksgnk, magunknak kell jra s jra le
krdeznnk a helyet a getCurrentPosition () fggvnnyeL
Egy teljes plda

Nzznk vgig egy pldt arra, hogy a geo.js segtsgvel hogyan derthetjk
ki a felhasznl helyzett, s jelenthetnk meg egy trkpet a kzvetlen kr
nyezetrl!
Amikor az oldal betltdik, meg kell hvnia a geo _ position _js.
init() fggvnyt, hogy megllaptsa, hogy van-e lehetsg helymeghatro
zsra a geo.js ltal tmogatott valamelyik felleten keresztl. Ha igen, akkor

ltrehozhatunk egy hivatkozst, amelyre kattintva a felhasznl kidertheti a
helyzett. A hivatkozsra kattints az albb lthat lookup _ loeation()
fggvnyt hvja meg:
function lookup _location ()
geo_position_js.getCurrentPosition(show_map, show_map_error);
)
Ha a felhasznl engedlyt ad a helyzete nyomon kvetsre, s a httrszal

gitats tnylegesen kpes megllaptani a helyzett, a geo.js meghvja az els,
show _map() nev visszahv fggvnyt, a loe nev egyetlen paramter
rel. A loe objektum eoords tulajdonsga tartalmazza a szlessgi s hosz

szsgi fokot, valamint a helymeghatrozs pontossgt ler informcikat.
(Ez utbbit nem hasznljuk fel ebben a pldban.) A show _map() fgg
vny tbbi rsze egy begyazott trkpet jelent meg a Google Maps API se
gtsgve!:
178 l Itt ll n (s mindenki ms)
6.
fejezet
function show_map(loe) {
$("1geo-wrapper") .css({'width':'320px','height' :'350px' ));
var map new GMap2 (document .getElementByid( "geo-wrapper '));
var center new GLatLng (loe. eoords .latitude, loe. coords. longitudel;
map.setCenter(center, 14);
map.addControl (new GSmallMapControl ());
map.addControl (new GMapTypeControl ());
map.addOverlay (new GMarker (center, {draggable: false, title: 'You are here
(more or less)")));
)
Amennyiben a geo.js nem kpes meghatrozni a helyzetet, a msodik vissza

hv fggvnyt, a show_ map_ error()-t hvja meg:
function show_map_error () {
$( '#live-geolocation") .html('Unable to determine your location.');
)
Tovbbi olvasmnyok
A W3C helymeghatroz API-ja (http://www.w3.org!TR!geolocation-APII)

Gears (http://tools.google. comigears/j
A BlackBerry helymeghatroz API-ja (http:llwww.tonybunce.com/2008/
05108/Blackberry-Browser-Amp-GPS.aspx)
A Nokia helymeghatroz API-ja (http:llwww.forum.nokia.com/infocenterl
index.jsp?topic=!Web_Developers_Library!GUID-4DDE3IC7-ECOD4EEC-BC3A-AOB0351154F8. html)
A Palm helymeghatroz API-ja (http:l!developer.palm.comlindex.php?
option=com_content&view=article&id=1673#GPS-getCurrentPosition)
Az OMTP BONDI helymeghatroz API-ja (http:llbondi.omtp.org!I.O/
apislgeolocation.html)
geo.js (http:llcode.google.comlplgeo-location-javascriptl)- a helymeghat
roz API burkol parancsfjlja
7.
fejezet
A helyi trols mltja, jelene s jvje
a webalkalmazsokban
Ugorjunk fejest!
A maradand helyi trols az egyik olyan terlet, ahol a beptett gyflprog
rarnak hagyomnyosan elnyt lveznek a webalkalmazsokkal szemben.
A beptett alkalmazsok szmra az opercis rendszer jellemzen egy el
vont rteget biztost az olyan, alkalmazshoz kapcsold adatok trolsra s
kinyersre, mint a felhasznli belltsok vagy a futsi llapot. Ezek az
adatok troldhatnak a rendszerler adatbzisban (bellrsjegyzkben),
INI-fjlokban, XML-fjlokban s ms helyeken is, a rendszer hagyomnyai
nak megfelelen. Ha egy beptett gyflalkalmazsnak a kulcs-rtk pro
kon tlmutat helyi trolsra van szksge, hasznlhat sajt adatbzist, sajt
fjlformtumot vagy ms, tetszleges megoldst.
A webalkalmazsok hagyomnyosan nem rendelkeznek ilyen luxusszol
gltatsokkal. A Vilghl trtnetnek korai idszakban feltallrk ugyan
a stiket (cookie), amelyek valban hasznlhatk is kis mennyisg informci
maradand helyi trolsra, de szmos htrnyuk van, amelyek vloknak
bizonyulharnak:
A stiket minden HTTP-krelemhez mellkelni kell, ami szksgtelenl

lelasstja a webalkalmazst, hiszen ugyanazokat az adarokat kldjk el
jra s jra.
A stiket a HTTP-krelmekhez mellkeljk, ami azt jelenti, hogy az

adatokat titkosrs nlkl kldjk el az Interneten t (kivve akkor, ha
a teljes webalkalmazs SSL-kapcsolaton keresztl mkdik).
A stik legfeljebb 4 KB adatot trolhatnak. Ez elg ahhoz, hogy lelasstsa

az alkalmazst (lsd feljebb), de ahhoz mr kevs, hogy igazn hasznos
legyen.
7. fejezet
A helyi trols mltja, jelene s jvje ...
181
Amire tnylegesen szksgnk van:

Jelents mret trolhely...
az gyflgpen...
amely oldalfrissts utn is megrzi a tartalmr ...
s nem kldi el azt a kiszolglnak.
Ezeknek a cloknak az elrsre szmos megolds szletett, de vgssoron gy vagy gy - egyik sem bizonyult kielgtnek.
A helyi trolsra a HTMLS eltt alkalmazott trkkk

rvid trtnete
Kezdetben csak az Internet Explorer ltezett - legalbbis a Microsoft azt
akarta, hogy a vilg ezt higgye. Ennek rdekben az els Nagy Bngszh
bor ideje alatt a Microsoft egy csom dolgot tallt fel s ptett be " a bng
szbe, amely rkre vget vet minden bngszhbornak", vagyis az Internet
Explorerbe. Ezek egyike volt a DHTML Behaviors ("DHTML-viselkedsek"
vagy "DHTML-mveletek"), amelynek a rszt kpezte a userData ("fel
hasznli adatok") nev "viselkeds".
A userDate tartomnyonknt 64 KB-nyi, hierarchikus XML alap szer
kezetben elhelyezett adat trolst teszi lehetv a weboldalaknak (A meg

bzhat tartomnyok - pldul az intraneres vagy bels hlzati webhelyek
-tzszer ennyi adatot trolhatnak 640 KB-nak elgnek kell lennie brkinek,
nem?) Az IE nem jelent meg semmilyen engedlykr prbeszdablakot, s
nem engedi meg a rendelkezsre ll trolhely nvelst sem.
2002-ben az Adobe beptett egy szolgltatst a Flash 6-ba, amely a sze
rencsden s flrevezet "Flash-stik" nven vlt ismertt, de a Flash-kr
nyezeten bell Local Shared Objects (rviden LSO, magyarul " helyi megosz
tott objektumok") a tisztessges neve. Az LSO rviden annyit csinl, hogy
lehetv teszi a Flash-objektumoknak, hogy tartomnyonknt akr 100 KB
adatot troljanak 2005-ben Brad Neuberg kifejlesztette a Flash-JavaScript
hd egy korai prototpust, amelyet AJAX Massive Storage Systemnek
(AMASS) nevezett el, de ezt korltok kz szortotta a Flash nhny tervezsi
furcsasga. 2006-ra - az Externallnterface megjelensvel a Flash 8-ban- az
LSO-k JavaScript-kdbl trtn elrse nagysgrendekkel knnyebb s
182
A helyi trols mltja, jelene s jvje...
7. fejezet
gyorsabb vlt. Brad trta az AMASS-t, s dojox.storage nven beptette

a npszer Dojo Toolkitbe. Ennek a megoldsnak ksznheterr minden tar
tomny "ingyen" megkapja a szoksos 100 KB trolhelyet, radsul a fel
hasznl nagysgrendenknt (l MB, 10 MB stb.) eldntheti, hogy nveli-e
a trolhely mrett.
2007-ben aztn aGoogle tjra bocstotta aGearst- azt a nylt forrs
bngszbvtmnyt, amelyet azzal a cllal ksztettek, hogy kiegszt k
pessgekkel lssa el a bngszket. (AGearsrl korbban mr ejtettnk szt,
amikor a helymeghatroz API tmogatsrl beszltnk az Internet Explo
rerben - lsd az elz fejezet "Mi a helyzet az Internet Explorerrel?" cm
rszt.) A Gears egy az SQLite-on alapul begyazott SQL-adatbzishoz
nyjt felletet. AGearsnek csak egyszer kell megszereznie a felhasznl en
gedlyt, s tartomnyonknt korldan mennyisg adatot trolhat az SQL
adatbzis tbliban.
Kzben Brad Neuberg s msok folytattk a dojox.storage felturb
zst, hogy egysges felletet biztostsanak a klnbz bvtmnyekhez s
API-khoz. 2009-re a do j ox. starage kpess vlt nmkden szlelni
(s egysges fellettel elltni) az Adobe Flash, aGears s az Adobe AIR tro
lit, valamint a HTML5-trol korai prototpust, amelyet csak a Firefax
rgebbi vltozataiban valstottak meg.
Ha ttekintjk ezeket a megoldsokat, kirajzoldik egy minta: minden
megolds vagy egy adott bngszhz ktdik, vagy egy kls bvt
mnyre tmaszkodik. A megoldsok a klnbsgek kiegyengetsre irnyul
(a do jox. storage-ben megvalstott) minden hsies erfeszts ellenre
gykeresen eltr fellettel, trolsi korltokkal s felhasznl lmnnyel ren
delkeznek. Ezt a problmt igyekszik orvosoini a HTMLS: szabvnyos fel
letet igyekszik nyjtani, amelyet a klnfle bngszk beptve s egysge
sen valstanak meg, anlkl, hogy kls bvtmnyekre tmaszkodnnak.
Bemutatkozik a HTML5-trol
Az, amit n "HTMLS-trolnak " (HTMLS Storage) nevezek, valjban
a Web Starage nevezet szabvny, amely egy idben rsze volt magnak a
HTMLS -szabvnytervezetnek, de ksbb - szmunkra rdektelen zlet
politikai okokbl - nll lersba klntettk el. Egyes bngszgyrtk
7. fejezet
A helyi trols mltja, jelene s jvje . .

.
183
"
"
"Local Storage (helyi trol) vagy " DOM Storage (DOM-trol) nven is
hivatkoznak r. A helyzetet mg jobban bonyoltja, hogy bizonyos hasonl
cl, kidolgozs alatt ll szabvnyok, amelyekre a fejezerben mg kitrek,
hasonl nevek alatt futnak.
Mi is valjban a HTML5-trol? Egyszeren megfogalmazva, egy md
szer, amellyel a weboldalak nevestett kulcs-rtk prokat trolhatnak hely
ben, az gyfl webbngszjn bell. A stikben trolt adatokhoz hasonlan
ezek az adatok is megrzdnek, amikor tvozunk a webhelyrl, bezrjuk
a bngszablakot, kilpnk a bngszbl, vagy ms hasonl mveletet vg
znk. A stikkel ellenttben azonban ezeker az adatokat soha nem visszk t
egy tvoli webkiszolglra (hacsak valamilyen rejtlyes okbl kifolylag nem
tesszk meg ezt sajt kezleg). Ezen fell a maradand helyi trolsra ir
nyul (fentebb ismertetett) korbbi ksrletekkel ellenttben a HTML5trolt a webbngszk belsleg valstjk meg, teht ott is elrhet, ahol
nem llnak rendelkezsre kls bngszbvtmnyek.
Mely bngszkrl is van sz? Ahogy a 7.1. tblzatban lthatjuk, a
HTML5-t lnyegben minden bngsz legjabb vltozata tmogatja mg az Internet Explorer is!
7.1. tblzat
3.5+
8.0+
4.0+
4.0+
10.5+
2.0+
2.0+
A HTML5-trolt JavaScript-kdbl a globlis window objektum l o c a l

Starage objektumn keresztl rhetjk el. Mieltt azonban hasznlatba
vehetnnk, ki kell dertennk, hogy a bngsz tmogatja-e (lsd a "Helyi

trols" cm rszt a 2. fejezetben):
function supports htmlS storage ()
_
return (' loealStor age' in window) && window [' localStorage'
! null;
Azt is megreherjk, hogy nem magunk rjuk meg ezt a f ggvnyt, hanem
a Modernizr-t hasznljuk (lsd a 2. fejezet "Modernizr: egy HTML5-szlel
knyvtr" cm rszt) a HTML5-trol tmogatsnak feldertsre:
if (Modernizr .localstorage) {
l l A window. loealS torage elrhet!
) else {
184
helyi trols mltja, jelene s jvje...
7.
fejezet
l l Nincs beptett tmogats a HTML5-trolhoz
l l Prbljuk meg esetleg a dojox.storage

l l vagy egy kls megolds hasznlatt
A HTML5-trol hasznlata
A HTML5-trol kulcs-rtk prokon alapul. Az adatokat egy nevestett
kulccsal troljuk, s ugyanezzel a kulccsal nyerhetjk ki ket:
interface Storage (
getter any getltem (in DOMString key);
setter creator void setitem (in DOMString key, in any data);
);
A nevestett kulcs egy karakterlnc, az adatok pedig brmilyen tpusak le

hetnek, amit a JavaScript tmogat: karakterlncok, logikai rtkek, egsz
vagy lebegpontos szmok. Ugyanakkor az adatok tnylegesen karakter
lncknt troldnak. Ha nem karakterlncot, hanem valami mst szeret
nnk trolni s visszanyerni, olyan fggvnyeket kell hasznlnunk, mint
a parseint () vagy a parseFloat (), amelyek a kinyert adatokat a vrt
JavaScript-adattpusra alaktjk.
Ha a setitem ()-et egy mr ltez nevestett kulccsal hvjuk meg, a fgg
vny sz nlkl fellrja a korbbi rtket. Ha a getrtem ()-et nem ltez
kulccsal hvjuk meg, a fggvny kivtel kivltsa helyett null-t ad vissza.
Ms JavaScript-objektumokhoz hasonlan a loealStorage objektumot
is kezelhetjk trsrsos (asszociatv) tmbknt, gy a getrtem () s setitem()
fggvnyek helyett rhatunk egyszeren szgletes zrjeleket is. Ezt a kd
rszletet pldul. ..
var foo
localStorage.get!tem("bar");
l l ...
localStorage.setitem("bar", foo);
... erre is trhatjuk:

var foo
localStorage["bar" l ;
l l ...
localStorage["bar"]
7. fejezet
foo;
A helyi trols mltja, jelene s jvje .. .
l 185
Arra is lteznek tagfggvnyek, hogy eltvoltsuk egy adott nevestett kulcs

rtkr, vagy kipucoljuk a teljes trolterletet (vagyis egyszerre trljnk
minden kulcsot s rtket):
interface Starage
deleter void removertem (in DOMString key);

void clear () ;
};
Ha a removertem ()-et egy nem ltez kulccsal hvjuk meg, nem csinl
semmit.
Vgl, van olyan tulajdonsg is, amellyel megkaphatjuk a trolterleten
tallhat rtkek szmt, illetve sorszm szerint vgigmehetnk az sszes kul
cson (hogy kiolvassuk az egyes kulcsok nevt):
interface Starage
readonly attribute unsigned long length;

getter DOMString key (in unsigned long index);
};
Ha a key()-t egy olyan sorszmmal hvjuk meg, amely nem O s (length-l)

-vagyis a tmb hossza mnusz l -kz esik, a fggvny null-t ad vissza.
A HTML5-trolterlet vltozsainak nyomon kvetse

Ha nyomon szeretnnk kvetni a trolterlet vltozsait, a storage ese
mnyt kell elfognunk. A window objektum storage esemnye akkor k
vetkezik be, amikor valaki meghvja a setitem(), a removertem (l vagy
a ele ar () fggvnyt, s az tnylegesen megvltoztat valamit. Pldul ha egy
elemet egy mr ltez rtkre lltunk, vagy akkor hvjuk meg a clear ()-t,
amikor nincsenek nevestett kulcsok, a storage esemny nem indul el, mert
a trolterleten nem trtnik semmilyen vltozs.
A storage esemny mindenhol tmogatott, ahol a localStarage ob
jektum, gy az Internet Explorer 8-ban is. Az IE 8 ugyanakkor nem tmo
gatja a W3C szabvnyos addEventListener fggvnyt (br az IE 9-be
mr be fog kerlni a tmogatsa), gy a storage esemnyhez csak akkor
kapcsoldhatunk, ha elbb megvizsglj uk, hogy a bngsz melyik esemny
kezel rendszert ismeri. (Ha mr csinltunk ilyesmit ms esemnyekkel kap
csolatban, nyugodtan tugorhatjuk ezt a rszt. A storage esemny elfogsa
186 l A
helyi trols mltja, jelene s jvje ...
7.
fejezet
ugyangy trtnik, mint ms esemnyek csapdba ejtse. Ha az esemnyke

zelink bejegyzsre a jQuery-t vagy valamelyik msik JavaScript-knyvtrat
rszestjk elnyben, a starage esemny esetben sem kell lemondanunk
rluk.) Ezt kell tennnk:
if (window.addEventListener)
window.addEventListener ("starage", handle _storage, false) ;
) else {
window.attachEvent("onstorage", handle_storage);
l;
A hand le
starage () visszahv fggvny egy StarageEvent objek
tummal hvdik meg, kivve az Internet Explorerben, ahol az esemnyobjek

tum a windaw.event-ben troldik:
function handle_storage (e) {
if (!e) { e= window.event; l
Ezen a ponton az e vltozban egy StarageEvent objektum tallhat,

amelynek hasznos tulajdonsgait a 7.2. tblzat sorolja fel.
7 .2. tblzat A StarageEvent objektum tulajdonsgai
sek
key
String
A hozzadott, eltvoltott vagy mdostott nevestett kulcs
oldValue
tetszleges
A korbbi rtk (amelyet fellrtunk) vagy null, ha
j elemet
hoztunk ltre
j rtk vagy null, ha eltvoltottunk egy elemet
newValue
tetszleges
Az
url
String
A vltozst elidz tagfggvnyt meghv oldal
Az url tulajdonsg neve eredetileg uri volt, s egyes bngszk ez utbbi tulajdonsggal
kerltek piacra, mg az eltt, hogy a szabvnylers megvltozott volna. A lehet legteljesebb
kr egyttmkds rdekben clszer elbb az url tulajdonsg ltezst ellenriznnk,
majd- ha nem ltezik- megvizsglnunk, hogy ltezik-e az uri tulajdonsg.
A starage esemny nem vonhat vissza. A hand le
starage () vissza
hv fggvnyen bellrl nincs r md, hogy megakadlyozzuk a vltozs

bekvetkezst. Az esemny csupn arra szolgl, hogy a bngsz kzlhesse
velnk: "Ez trtnt az imnt. Semmit nem tehetsz ellene; csak azt akartam,
hogy tudd.".
7. fejezet
187
A jelenleg hasznlt bngszk korltai

Amikor a kls bvtmnyekkel megvalstott helyi trolsi megoldsokrl
beszltem (lsd e fejezet "A helyi trolsra a HTML5 eltt alkalmazott trk
kk rvid trtnete " cm rszt), kln hangslyoztam az egyes mdszerek
korltait, pldul a trolhat adatok mennyisgt. A most mr szabvnyos
tott HTML5-trol korltairl azonban mg egy szt sem ejtettem.
Alaprtelmezs szerint minden webhely 5 MB trolterletet kap. Ez meg
leperr egysges minden bngszben, annak ellenre, hogy a HTML5-trol
szabvnylersa csupn ajnlsknt fogalmazza meg. Az egyik dolog, amit
szben kell tartanunk, hogy az adatokat nem az eredeti formjukban, hanem
karakterlncokknt troljuk. Ha sok egsz vagy lebegpontos szmot tro
lunk, az brzols eltrse sszessgben jelents klnbsget eredmnyezhet,
mert minden szmjegy karakterknt troldik, nem pedig a lebegpontos
szmok szoksos brzolsa szerint.
Ha tllpjk a rendelkezsnkre ll trhelyet, QUOTA
EXCEEDED
ERR kivtel lp fel. A kvetkez krdsnk nyilvn az lesz, hogy "Krhetek
a felhasznltl tbb trhelyet?". A vlasz: "Nem". E knyv rsnak idejn

egyetlen bngsz sem tmogatja semmilyen mdszert annak, hogy a web
fejlesztk tovbbi trolterletet ignyeljenek. Vannak ugyan bngszk pldul az Opera -, amelyek lehetv teszik a felhasznlnak, hogy szab
lyazza az egyes webhelyek trhelykvtjt, de ez kizrlag a felhasznltl
fgg; a webfejleszt nem ptheti be a webalkalmazsaiba.
A HTML-trol mkds kzben

Nzzk meg egy pldn keresztl, hogyan is mkdik a HTML5-trol!
Idzzk fel magunkban a 4. fejezetben elksztett Halma-jtkot (lsd az
emltett fejezet "Egy teljes plda" cm rszt). A jtkkal van egy aprcska
gond: ha jtk kzben bezrjuk a bngszablakot, elvesztjk az addigi lp
seket. A HTML5-trolval azonban kpess vlunk arra, hogy helyben, ma
gn a bngszn bell mentsk a jtkot. A http:lldiveintohtml5.orglexamples/
localstorage-halma.html cmen megtekinthetjk, hogyan is mkdik ez l

ben. Vgrehajtunk nhny lpst, bezrjuk a bngszlapot, majd jra meg
nyitjuk. Ha a bngsznk tmogatja a HTML5-trolt, a bemutatoldal
188
l A helyi trols mltja, jelene s jvje...
7. fejezet
csodk csodjra emlkezni fog a jtk llsra- belertve a lpseink szmt

s a bbuknak a tbln elfoglalt helyt -, st mg arra is, hogy melyik bbu
volt kivlasztva.
Hogyan mkdik mindez? Nos, minden alkalommal, amikor valami
megvltozik a jtkban, meghvjuk ezt a fggvnyt:
function saveGameState ( )
{
(! supportsLocalStorage ( )) { return false; )
localStarage["halma.game. in.progress "l =gGameinProgress;
for (var i= 0; i< kNumPieces; i++) {
localStarage[ "halma.piece. " + i + ". row "l = gPieces[il .row;
localStarage [ "halma.pie ce." + i + ".column "l
gPieces[il .column;
if
}
localStarage ["halma.selectedpiece "l = gSelectedPieceindex;
localStorage["halma.selectedpiecehasmoved"l gSelectedPieceHasMoved;
localStarage["halma.movecount "l = gMoveCount;
return true;
Amint lthatjuk, a kd a
(a
gGameinPrag ress
objektum segtsgvel menti
localStarage
logikai vltozba), hogy folyamatban van-e egy j
tk. Ha igen, akkor vgigmegy a bbukon (a
gPieces
JavaScript-tmbn),
s mindegyikrl elraktrozza, hogy hnyadik sorban s oszlopban ll. Ezt

kveten tovbbi informcikat ment a jtk llapotrl, pldul azt, hogy
melyik bbu van kivlasztva (a
gSelectedPieceindex
egsz szm tpus
vltozba), hogy a bbu egy potencilisan hossz ugrssorozat kzepn tar

tzkodik-e (a
gSelectedPieceHasMaved
addig megtett lpsek szmt (a
gMoveCaunt
logikai vltozba), illetve az

egsz tpus vltozba).
Az oldal betltsekor ahelyett, hogy automatikusan egy newGame () nev

fggvnyt hvnnk meg, amely a bedrtozott alaprtkekre lltan visz
sza az emltett vltozkat, egy
resumeGame ()
res umeGame ()
fggvnyt hvunk meg. A
fggvny a HTML5-trolra tmaszkodva megvizsglja,
hogy vannak-e a helyi trolban mentett adatok egy folyamatban lev jtk
llapotrl, s ha igen, visszalltja az rtkeket a localStarage objektum
segtsgvel:
function resumeGame ()
if
{! supportsLocalStorage ()) { return false; }
gGameinProgress = (localStarage ["halma.game. in.progress "l

if ('gGameinProgress)
==
"true");
{ return false;}
gPieces=new Array (kNumPieces);

for (var i= O; i< kNumPieces; i++)
7. fejezet
A helyi trols mltja, jelene s jvje . .

.
189
var row= parseint(localStarage ["halma.piece." + i + ".row "l ) ;

var column= parseint( localStarage ["halma.piece."+i+ ".column"]);
gPieces [i] = new Cell(row, column);
l
gNumPieces= kNumPieces;
gSelectedPieceindex
parseint (localStarage ["halma. selectedpiece "l);
gSelectedPieceHasMoved= localStarage ["halma. selectedpiecehasmoved "] ==
"true";
gMoveCount= parseint( localStarage ["halma .movecount "l);

drawBoard();
return true;
Ennek a fggvnynek a legfontosabb rsze azzal az ellentmondssal kapcsolatos,

amelyet a fejezet korbbi rszben emltettem. Mg egyszer: az adatok tnylege
sen karakterlncknt troldnak- ha nem karakterlncot, hanem valami mst
trolunk, visszanyers eltt magunknak kell azt a megfelel adattpusra alakta
nunk. Az a jelz pldul, amelyik megadja, hogy van-e folyamatban lev jtk
(gGameinProgress), Boolean tpus. A saveGameState () fggvnyben
csak elraktroztuk ezt a jelzt, s nem foglalkoztunk az adattpusval.
localStarage [ "halma.game.in. progress "l = gGameinProgress;
A resumeGame () fggvnyben azonban a helyi trolbl kiolvasott rtket

karakterlncknt kell kezelnnk, s sajt kezleg kell felptennk a megfe
lel logikai rtket:
gGameinProgress= (localStarage ["halma .game. in.progress"]
"true");
Ehhez hasonlan a lpsek szma egsz szmknt troldik a gMoveCount

vltozban. A saveGameState () fggvnyben csak elraktroztuk:
localStarage ["halma. movecount "l = gMoveCount;
A resumeGame () fggvnyben azonban az rtket egsz szmm kell ala

ktanunk a JavaScript beptett parseint () fggvnynek segtsgvel:
gMoveCount= parseint(localStarage ["halma .movecount "l);
190 l A helyi trols mltja, jelene s jvje...
7. fejezet
A kulcs-rtk prokon tl: verseng elkpzelsek

Mg a mlt trkkkkel s kerl megoldsokkal terhelt (lsd az "A helyi t
rolsra a HTML5 eltt alkalmazott trkkk rvid trtnete" cm rszt a fe
jezet elejn), a HTML5-trols jelene meglehetsen rzss: szabvnyostottak
egy j API-t, amelyet meg is valstottak minden fontosabb bngszben,
rendszeren s eszkzn. Webfejlesztknt nem mindennap ltunk ilyesmit,
nem igaz? Az let azonban tbbrl szl, mint 5 megabjtnyi kulcs-nk pr
rl, a maradand helyi trols jvje pedig... hogy is mondjam?... fogalmaz
zunk gy, hogy tbb, egymssal verseng elkpzels ltezik.
Az egyik ltomst egy betsz jelkpezi, amellyel mr valsznleg tall
koztunk: az SQL. 2007-ben a Google tjra bocstotta a Gearst- azt a nylt
forrs, bngszfggetlen bvtmnyt, amely egy az SQLite-on alapul be
gyazott adatbzist tartalmaz. Ez a korai prototpus ihlette ksbb a Web
SQL Database szabvnyt. A Web SQL Database (korbbi nevn: "WebDB")
egy SQL -adatbzishoz kszlt vkony burkol, s az albbihoz hasonl m
veletek elvgzst teszi lehetv JavaScript-kdokbl:
openDatabase (' documents', 'l. 0', 'Local document storage', 5*1024*1024,
function (db) {
db. changeVersion (' ' , ' l. O' , function (t) {
t. executeSql ( CREATE TABLE doci ds (id, name) ' ) ;
} , error);
) );
'
Amint lthatjuk, a lnyeg az executeSql ( ) tagfggvnynek tadon karak

terlncban trtnik. Ez a karakterlnc brmilyen tmogatott SQL-utasts
lehet, belertve a SELECT, az UPDATE, az INSERT s a DELETE utastst
is. Pontosan olyan, mint a httradatbzisok programozsa, csak ppen
JavaScriptbL Min lvezet!
A 7.3. tblzat megmutatja, mely bngszk valstottk meg eddig a Web
SQL Database szabvnyt:
7.3. tblzat A Web SQL Database tmogatsa
IE
7. fejezet
Firefox
Satari
Chrome
4.0+
4.0+
iPhone
10.5+
Android
3.0+
A helyi trols mltja, jelene s jvje . ..
l 191
Termszetesen, ha mr tbb adatbzis-termket is hasznltunk letnkben,

akkor tisztban vagyunk vele, hogy az "SQL" inkbb piaci mrka, mintsem
kbe vsett szabvny. (Egyesek ugyanezt mondank a HTML5-rl is, de ez
zel most ne trdjnk.) Ltezik persze tnyleges SQL-szabvny is- SQL-92nek hvjk - de nincs a vilgon olyan adatbzis-kiszolgl, amely kizrlag
ehhez a szabvnyhoz igazodna. Van az Oracle SQL-je, a Microsoft SQL-je,
a MySQL SQL-je, a PostgreSQL SQL-je, az SQLite SQL-je, s ezen temkek
mindegyike folyamatosan j szolgltatsokkal bvl, teht mg az sem rja
krl pontosan, hogy mirl beszlnk, ha azt mondjuk, hogy "SQLite SQL''
-azt kell mondanunk, hogy "az SQL-nek az a vltozata, amelyet az SQLite
"
X.Y.Z. vltozata tartalmaz .
Mindez az albbi nyilatkozathoz vezet minket, amely jelenleg a Web SQL
Database szabvny elejn olvashat:
Ez a szabvny zskutcba kerlt: minden rdekelt megvalst ugyanazt
az SQL-httrkiszolglt (Sqlite) hasznlja, de tbb fggetlen megval
srsra van szksgnk ahhoz, hogy a szabvnyosrst folytathassuk.
Amg egy jabb fejlesztcg rdekeltt nem vlik abban, hogy megval
stsa ezt a szabvnyt, az SQL-nyelvjrs lersa egyszeren egy az Sqlite-ra
mutat hivatkozs marad, ami egy szabvny esetben elfogadhatatlan.
Ennek a httrinformcinak a birtokban muratom be a kvetkez elkp
zelst, amely a webalkalmazsok szmra biztostott fejlett, maradand he
lyi trols megvalstsra irnyul: az Indexed Database API-t, amelyet
"
"
korbban "WebSimpleDB -knt ismertek, ma pedig "lndexedDB -nek be
cznek.
Az lndexed Database API egy gynevezett objektumtrolt tesz elrhetv.
Az objektumtrolk sok szempontbl hasonltanak az SQL-adatbzisokra:
"
"
vannak "adatbzisok "rekordokkal , s minden rekord adott szm "mez
"
vel rendelkezik. Minden meznek van egy meghatrozott adattpusa, ame
lyet az adatbzis ltrehozsakor kell megadni. Kijellhetjk a rekordok egy
"
rszhalmazt, majd kinyerhetjk azokat egy "kurzorral (sormutatval). Az
"
objektumtr mdostsa "tranzakcikon keresztl trtnik.
Ha mr programoztunk SQL-adatbzisokat, ezek a kifejezsek valszn
leg ismersek a szmunkra. A legfontosabb klnbsget az jelenti, hogy az
objektumtrnak nincs strukturlt lekrdeznyelve. Nem ptnk fel olyan
192
7. fejezet
utastsokat, mint a "SELECT
from USERS where ACTIVE
'Y'",
hanem ehelyett az objektumtr ltal biztostott tagfggvnyekkel megnyi

tunk egy sarmutatt a USERS nev adatbzisban, vgigmegynk vele a re
kordokon, kiszrjk az inaktv felhasznJk rekordjait, s kiolvassuk az egyes
mezk rtkt a fennmarad rekordokbL Az early walk-through ofindexedDB"
"
(http:!lhacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabasel) reme
kl bemutatja az IndexedDB mkdst, s egyms mell helyezve sszehason
ltja az IndexedDB-t a Web SQL Database-szel.
E knyv rsnak idejn az IndexedDB-t mg nem valstottk meg egyet
len fontosabb bngszben sem. 2010 jniusnak elejn a Mozilla azt mondta,
hogy nhny hten bell rendelkezsre ll majd pr tesztvltozat", de arrl
"
semmi hr, hogy akr a Firefox 4-be bekerlne az IndexedDE tmogatsa.
(Ezzel szemben viszont a Mozilla kijelentette, hogy soha nem fogja megval
stani a Web SQL Database-t.) A Google lltsa szerint gondolkodik az
IndexedDE tmogatsn, s mg a Microsoft is gy nyilatkozott, hogy
az IndexedDE kitn megolds a Web szmra".
"
Mit kezdhetnk teht mi, webfejlesztk, az IndexedDB-vel? Jelenleg az
gvilgon semmit. s egy v mlva? Taln valamit. Addig is bngssznk a
Tovbbi olvasmnyok" cm alatt tallhat oktatanyagok kztt, hogy le
"
gyen honnan elindulnunk
Tovbbi olvasmnyok
HTML5-trol:
A HTML5-trol szabvnylersa (http:lldev.w3.orglhtml5/webstoragel)

Introduction to DOM Storage" (http:llmsdn.microsoft.com/en-us/libraryl
"
ccl97062(VS.85).aspx) az MSDN-en
Shwetank Dixit: ,;web Storage: easier, more powerful dient-side data storage"
(http:lldev.opera.com/articles/view/web-storagel)
Introduction to DOM Storage" (https:l/developer.mozilla.orglen/dom/

"
storage) a Mozilla Developer Center oldaln. (Megjegyzs: az oldal nagy
rszt a globalStarage objektum Firefox-beli prototpus-megvalst
snak szenteltk, amely egy nem szabvnyos elfutra a localStarage
objektumnak. A Mozilla a Firefox 3.5-ben adta a bngszhz a szab
vnyos localStarage fellet tmogatst.)
7. fejezet
A helyi trols mltja, jelene s jvje ...
193
"
"Unlock local storage for mobile Web applications with HTML5 (http:/1
www.ibm. comldeveloperworks/xmlllibrarylx-html5mobile2/), oktatanyag
at IBM DeveloperWorks oldaln
Brad Neuberg s msok korai (a HTMLS eltti) munki:
"
"Internet Explorer Has Native Support for Persisrence?!?! (http:llcoding
inparadise. orgiweblog/2005/08/ ajax-internet-explorer-has-native. html}, a
userData objektumrl az Internet Explorerben
Dojo Storage (http://docs.google.com/View?docid=dhkhksk4_8gdp9gr#dojo_

storage), egy nagyobb oktatanyag rsze, amely a (ma mr nem fejlesz
tett) Dojo Offline knyvtrrl szl
A dojox.storage.manager API lersa (http://api.dojotoolkit.org/
jsdoc/HEAD/dojox.storage.manager)
A dojox.starage Subversion-tr (http:llsvn.dojotoolkit.orglsrcldojoxl
trunklstoragel)
Web SQL Database:
A Web SQL Database szabvnylersa (http:!ldev.w3.orglhtml5/webdatabasel)

Remy Sharp: "Introducing Web SQL Databases" (http:llhtml5doctor.com/
introducing-web-sql-databasesl)
Web Database-bemutat (http:llhtml5demos.comldatabase)
persistence.js (http:llzefme/2774/persistence-js-an-asynchronous-javascript
orm-for-html5gears), egy "aszinkron JavaScript OR M", amely a Web
SQL Database s Gears tetejre pl

IndexedDB:
Az Indexed Database API szabvnylersa (http:lldev.w3.org/2006/webapil
IndexedDB!)
Arun Ranganathan s Shawn Wilsher: "Beyond HTML5: Database APis

and the Road to IndexedDB" (http:llhacks.mozilla.org/2010/06/beyond
html5-database-apis-and-the-road-to-indexeddb!)
Arun Ranganathan: "Firefox 4: An early walk-through of IndexedDB"
(http:llhacks.mozilla.org/20l0/06/comparing-indexeddb-and-webdatabase/)
8.
fejezet
Bontsuk a kapcsolatot!
Ugorjunk fejest!
Mi az a kapcsolat nlkli webalkalmazs? Az elnevezs els hallsra nellent
mondsnak tnik, hiszen a weboldalakat letltjk, hogy megjelenthessk,
a letlts pedig hlzati kapcsolatot felttelez. Hogyan tlthetnk le valamit,
ha nem kapcsoldunk a hlzatra? Termszetesen sehogy- akkor viszont
igen, amikor a kapcsolat l. A kapcsolat nlkli (offiine) HTML5-alkalmazsok
pontosan gy mkdnek.
A legegyszerbb formjban egy kapcsolat nlkli webalkalmazs csupn
egy sor URL, amelyek HTML-, CSS- vagy JavaScript-fjlokra, kpekre s
egyb erforrsokra mutatnak. A kapcsolat nlkli webalkalmazs kezdol
dala erre a jegyzkfjlnak (manifest fjlnak) nevezett listra mutat, ami nem
ms, mint egy egyszer szvegfjl, ami valahol a webkiszolgln tallhat.
A kapcsolat nlkli HTML5-alkalmazsokra felksztett webbngszk ki
olvassk az URL-cmeket a jegyzkfjlbl, letltik az erforrsokat, helyi gyors
trba rjk ket, s nmkden frisstik a helyi msolatokat, ha az eredetijk
megvltozik Amikor a webalkalmazst hlzati kapcsolat nlkl prbljuk
elrni, a webbngsz automatikusan a helyi msolatra vlt.
A fentieken kvl szinte minden msrl mi, a webfejlesztk gondoskodunk.
A DOM-ban van egy jelz, amely tjkoztat rla, hogy hlzati kapcsolattal
vagy anlkl dolgozunk, s bizonyos esemnyek is elindulnak, amikor az l
lapot megvltozik (vagyis amikor az egyik pilanatban nincs kapcsolat, aztn
ismt van, vagy fordtva), de lnyegben ennyi. Ha az alkalmazsunk adato
kat hoz ltre vagy llapotot ment, a mi feladatunk helyben elraktrozni ezeket
az informcikat (lsd a 7. fejezetet), amg nem l a kapcsolat, majd sszehan
golni azokat a tvoli kiszolglval, amint ismt kapcsoldtunk a hlzatra.
Ms szavakkal, a HTML5 kpes kapcsolat nlkl is megrizni a webalkal
mazsunkat, de az mr tlnk fgg, hogy mit csinlunk, amikor a kapcsolat
8.
fejezet
Bontsok a kapcsolatot! l 195
megszakad.A 8.1. tblzatban megtekimhetjk, hogy mely bngszk tmo

gatjk a kapcsolat nlkli webalkalmazsokat.
.;;u
:.
' li:.
... :...
:.
' . k:...
8.1. tblzat A kapcsolat nlk
m ...
a
m... ;.
a.
o. g:.;.
d... :...
. ':.
e. s:...
... t:.
. :...
s=-.: a.;.;t:...
Flrefox
IE
Satari
Chrame
-------------.
ra
iPhone
_c../
_ ___
Android
../
A gyorstrjegyzk
A kapcsolat nlkli webalkalmazsok mkdshez elengedhetetlen egy
gyorstrjegyzk (cache manifest). Ahogy mr emltettem, a jegyzk sorolja fel
az sszes erforrst, amire a webalkalmazsnak szksge lehet, amikor nem
kapcsoldik a hlzathoz. Ahhoz, hogy lehetv tegyk az erforrsok letl
tst s gyomrba rst, a <html> elemben a manifest jellemzvel hivatkoznunk kell a jegyzkfjlra:
< ' DOCTYPE HTML>

<htrnl manifest=" /cache.manifest">
<body>
</body>
</htm l>
A gyorstrjegyzk brhol lehet a webkiszolgln, de mindenkppen a text/

eaehe-manifest tartalomtpussal kell szolgltatni. HaApache alap web
kiszolglt futtatunk, valsznleg elg egy AddType utastst elhelyeznnk

a webknyvtr gykerben tallhat .htaccess fjlban:
AddType text/eaehe-manifest . manifest
gyeljnk r, hogy a gyorstrjegyzk fjlneve .manifest-re vgzdjn. Ha

msik webkiszolglt vagy ms Apache-belltsokat hasznlunk, nz
znk utna a kiszolgl dokumentcijban, hogy mikm szablyozhatjuk a
Content-Type fejlcet.
196 l Bontsok a kapcsolatot!
8. fejezet

Krds: A webalkalmazs om tbb oldaltfog t. Minden oldalon szksg van
kln manifest jellemzre, vagy elg csak a kezdoldalon elhelyezni egyet?
Vlasz: A webalkalmazs minden oldaln lennie kell egy manifest

jellemznek, ami a reljes alkalmazs gyorstrjegyzkre mutat.
J, teht minden egyes HTML-oldalunk hivatkozik a gyorstrjegyzkre, s

a gyorstrjegyzket a megfelel Content-Type fejlccel szolgltatjuk. De
mi kerl a jegyzkfjlba? A dolog itt kezd rdekess vlni.
Minden gyorstrjegyzk els sora gy fest:
CACHE MANIFEST
Ezt kveten minden jegyzkfjl hrom rszre oszlik: a kifejezett szakaszra,

a tartalk szakaszra s a hlzati fehrlista szakaszra. Mindegyik szakaszt
kln sorban szerepl fejlc vezeti be. Ha a jegyzkfjlban nincsenek szakasz
fejlcek, akkor minden felsorolt erforrs gy tekintend, mintha a kifejezett
szakaszban szerepelne. A terminolgival ne foglalkozzunk tl sokat, nehogy
sztrobbanjon a fejnk.
me egy rvnyes jegyzkfjl, amely hrom erforrst- egy CSS- s egy Java
Script-fjlt, valamint egy JPEG-kpet - sorol fel (amelyekbl egy ra ll ssze):
CACHE MANIFEST
/clock.css
/clock.js
/clock-face. jpg
Ebben a jegyzkfjlban nincsenek szakaszfejlcek, teht minden felsorolt er

forrs a laprtelmezs szerint a kifejezett szakaszba tartozik. A kifejezett sza
kaszban szerepl erforrsok letltdnek s a helyi gyorstrba kerlnek, az
alkalmazs pedig ezeket a msolatokat hasznlja a hlzaton tallhat eredeti
fjlok helyett, ha ppen nem kapcsoldunk a hlzatra. Amikor teht berlt
jk a fenti gyorstrjegyzket, a bngsz letlti a clock.css, clock.js s clock
face.jpg fjlokat a webkiszolgl gykrknyvtrbL Ezt kveten kihz
hatjuk a hlzati kbelt, s jratlthetjk az oldalt: valamennyi erforrs
kapcsolat nlkl is elrhet lesz.
8.
fejezet

Krds: A HTML-o/dalaimat isfol kell sorolnom a gyorstdrjegyzkben?
Vlasz: Igen is, meg nem is. Ha a teljes webalkalmazst egyetlen oldal
tartalmazza, csak arrl kell gondoskodnunk, hogy az oldal a man ifest
jellemzben hivatkozzon a gyorstrjegyzkre. Amikor egy manifest
jellemzvel rendelkez HTML-oldalra ugrunk, ezt az oldalt a bngsz
a webalkalmazs rsznek tekinti, teht nem kell feltntetnnk mag
ban a jegyzkfjlban. Ha azonban a webalkalmazs tbb oldalt fog
t, az sszes HTML-oldalt fel kell sorolnunk a jegyzkben, klnben
a bngsz nem fogja tudni, hogy vannak ms HTML-oldalak is, ame
lyeket le kell tltenie s gyorstrba rnia.
Hlzati szakaszok
Nzznk egy kicsit bonyolulrabb pldt! Tegyk fel, hogy azt szeretnnk,
hogy az raprogramunk nyomon kvesse a ltogatkar egy tracking.cgi nev
parancsfjl segtsgve!, amely dinamikusan tltdik be egy <img
src>
jellemzbL Ezt az erforrst nem rhatjuk gyorsrrba, mert az meghistan

a nyomon kvetsr. Fel kell teht rntetnnk, hogy soha nem kerlher gyors
trba, s gy nem rhet el kapcsolat nlkl:
CACHE MANIFEST
NETWORK:
/tracking.cgi
CACHE:
/clock.css
/clock.js
/clock-face. jpg
Ez a gyorstrjegyzk mr tartalmaz szakaszfejlcekeL A NETWORK: ("hl

zar") sor a hlzari fehrlista szakasz kezdete. Az ebben a szakaszban felsorolt
erforrsok soha nem rdnak gyorstrba, s nem rhetk el kapcsolat nlkl.
(Ha kapcsolat nlkl prbljuk betlteni ket, hibt kapunk.) A CACHE:
szveget tartalmaz sor a kifejezett szakasz kezdett jelzi. A jegyzkfjl fenn
marad rsze megegyezik az elz pldban szerepiveL A felsorolt hrom
erforrst a bngsz gyorstrazza, s kapcsolat nlkl elrhetv teszi.
8. fejezet
Tartalk szakaszok
A jegyzkfjlokban egy msik tpus szakasz is lehet: a tartalk szakasz.
A tartalk szakaszokban azt adhatjuk meg, hogy mivel helyettesthetk azok
a hlzati erforrsok, amelyek valamilyen oknl fogva nem rhatk gyors

trba, vagy a gyorstrazsuk nem sikerlt. A HTML5-szabvnylers ezt
a pldt hozza fel a tartalk szakaszok hasznlatra:
CACHE MANIFEST
FALLBACK:
l /offline.html
NETWORK:
Mit eredmnyez ez a jegyzkfjl? Elszr is, gondoljunk egy olyan webhelyre

- mondjuk a Wikipedira -, amely oldalak milliit tartalmazza. A teljes web
helyet nem tlthetjk le - nem is akarnnk ilyet tenni. De tegyk fel, hogy
egy rszt elrhetv tehetjk kapcsolat nlkl. Mi alapjn dntennk el,
hogy mely oldalakat rjuk gyorstrba? Mi szlnnk ehhez: minden olyan
oldalt letltnk s elraktrozunk, amit valaha is megtekintettnk a kpzele
tnkben ltez, kapcsolat nlkl is mkd Wikipedin. Ebbe beletartozik
az enciklopdia minden olyan cikke, amelyet valaha olvastunk, minden cse
vegoldala (ahol vitatkozhatunk egy adott szcikkrl) s minden szerkeszt
oldala (ahol mdosthatjuk az emltett cikket).
Erre val a fenti jegyzkfjL Tegyk fel, hogy a Wikipedin minden
HTML-oldal (cikk, csevegoldal, szerkesztoldal, elzmnyoldal) hivatkozik
erre a gyorstrjegyzkre. Ha elltogatunk egy olyan oldalra, amely erre
a gyorstrjegyzkre mutat, a bngsz azt mondja: "H, ez az oldal egy kap
csolat nlkli webalkalmazs rsze! Ismerem ezt a webalkalmazst?". Ha a bn
gsz mg soha nem tlttte le ezt a bizonyos jegyzkfjlt, ltrehoz egy j kap
csolat nlkli "alkalmazs-gyorstrat" (application cache, rviden "appcache" ),
letlti a jegyzkfjlban felsorolt sszes erforrst, majd hozzadja az aktulis
oldalt az alkalmazs-gyorstrhoz. Ha a bngsz mr korbban ltrehozta az
emltett jegyzkfjlt, egyszeren hozzadja az oldalt a meglev alkalmazs
gyorstrhoz. A megltogatott oldal mindkt esetben az alkalmazs-gyorstr
ban kt ki. Ez lnyeges, mert azt jelenti, hogy lehet egy kapcsolat nlkli
webalkalmazsunk, amely " nmkden" rgzti a megltogatott oldalakat,

gy nem kell minden egyes HTML-oldalt felsorolnunk a gyorstrjegyzkben.
8.
fejezet
Most nzzk meg a tartalk szakaszt. A jegyzkfjl tartalk szakasza

egyetlen sort tartalmaz. A sor els fele (a szkz eltti rsz) nem URL-cm,
hanem egy URL-minta. Az egyetlen perjel (/ ) karakter a webhely minden
oldalra illeszkedik, nem csak a kezdoldalra. Amikor egy oldalt kapcsolat
nlkl prblunk megtekinteni, a bngsz megnzi, hogy megvan-e az al
kalmazs-gyorstrban. Ha ott megtallja az oldalt (mert mr megtekintettk
azt, amg a hlzatra kapcsoldtunk, s gy a bngsz rgztette az oldalt az
alkalmazs-gyorstrban), megjelenti az oldal trolt msolatt. Ha a bngsz
nem tallja az oldalt az alkalmazs-gyorstrban, nem hibazenetet jelent
meg, hanem az /offiine.html oldalt, amit a tartalk szakasz sornak msodik
fele hatroz meg.
Vgl vizsgljuk meg a hlzati szakaszt. A fenti jegyzkfjl hlzati sza
kasza szintn egyeden sorbl ll, amelyben csak egy csillag (*) karakter tall
hat. Ennek a karakternek klnleges jelentse van a hlzati szakaszban- ez
a "hlzati fehrlista ltalnos helyettest karaktere ". Ez a nyakatekert nv
csak annyit takar, hogy ami nem szerepel az alkalmazs-gyorstrban, azt
nyugodran tltsk le, ha l a hlzati kapcsolat, ami egy "nylt vg", kapcso
lat nlkli webalkalmazs esetben igazn fontos. A pldnkat folytatva, ez
azt jelenti, hogy mikzben a hlzaton bngsznk a kpzeletbeli, kapcsolat
nlkl is mkd Wikipedin, a bngsznk a szoksos mdon letlti a k
peket, videkat s ms begyazott erforrsokat, mg akkor is, ha azok egy
msik tartomnyban tallhatk. (Ez megszakott a nagyobb webhelyeken,
mg ha azok nem is egy kapcsolat nlkli webalkalmazs rszei: a HTML
oldalak elllrsa s kiszolglsa helyben trtnik, mg a kpek s videk egy
msik tartomnyban tallhat tartalomszolglrat hlzatrl szrmaznak.)
Az ltalnos helyettest karakter nlkl a kpzeletbeli, kapcsolat nlkl is
mkd Wikipedia furcsn viselkedne, amikor a hlzaton vagyunk: konk
rtan, nem tltene be egyeden kls trols kpet s videt sem!
Teljes ez a plda? Nem. A Wikipedia nem csak HTML-fjlokbl ll: az
oldalak szokvnyos CSS- s JavaScript-fjlokat, illetve kpeket is tartalmaz
nak. Ezen erforrsok mindegyikt kifejezetten fel kellene sorolnunk a jegy
zkfjl CACHE: szakaszban ahhoz, hogy az oldalak helyesen jelenjenek meg
s mkdjenek kapcsolat nlkl is. A tartalk szakasz clja azonban ppen az,
hogy lehessen egy "nylt vg" kapcsolat nlkli webalkalmazsunk, amely
tlnylik a jegyzkfjlban konkrtan felsorolt erforrsokon.
8.
fejezet
Az esemnyfolyam
Amit eddig a kapcsolat nlkli webalkalmazsokrl, a gyorstrjegyzkekrl s
a kapcsolat nlkli alkalmazs-gyorstrakrl ("appcache" ) mondtam, flig
meddig hkuszpkusznak tnhet: az erforrsok letltdnek, a bngsz
dmseket hoz, s minden "csak gy mkdik". Ezt persze nem hisszk el,
ugye? Vgtre is, webfejlesztsrl van sz, ahol soha semmi nem mkdik
"
"csak gy .
Elszr is az esemnyfolyamrl, konkrtan a DOM-esemnyekrl kell
szt ejtennk. Amikor a bngsznk megnyit egy oldalt, amely egy jegyzk
fjira mutat, egy sor esemnyt indt el a window. applicationCache
objektumon (lsd albb). Tudom, hogy bonyolultnak tnik, de higgyk el,
ennl egyszerbben nem tudnm megfogalmazni gy, hogy ne hagyjak ki
fontos informcikat. me a folyamat:
l. Amint szrevesz egy manifest jellemzt a <html> elemben, a bn
gsz elindt egy checking esemnyt. (Minden itt felsorolt esemny a

window. applicationCache objektum esemnyeknt indul el.) A checking
esemnyre mindig sor kerl, fggetlenl attl, hogy korbban elltogat

tunk-e mr erre vagy brmely ms oldalra, amely ugyanerre a gyorstr
jegyzkre mutat.
2. Ha a bngsz mg soha nem tallkozott ezzel a jegyzkfjllal:
Elindt egy downloading esemnyt, majd megkezdi a gyorstrjegyzkben

felsorolt erforrsok letltst.
Mikzben letlt, a bngsz idrl idre progress esemnyeket indt

el, amelyek arrl tartalmaznak informcit, hogy a bngsz hny fjlt
tlttt mr le, s hny fjl vr mg letltsre.
Miutn a jegyzkben szerepl sszes erforrst sikeresen letlttte, a bn

gsz elindt mg egy utols, cached nev esemnyt. Ez jelzi, hogy a kap
csolat nlkli webalkalmazs teljes egszben a gyorstrba kerlt, s kszen
ll a kapcsolat nlkli hasznlatra. Ennyi az egsz; kszen vagyunk.
3. Ezzel szemben, ha az emltett oldalt vagy brmely ms oldalt, amely

ugyanarra a jegyzkfjira mutat, korbban mr megltogattuk, a bngsznk
mr tudni fog errl a jegyzkfjlrl, s mr el is helyezhetett bizonyos erforrso
kat- akr a teljes kapcsolat nlkli webalkalmazst-az alkalmazs-gyorstrban.
8.
fejezet
A krds ebben az esetben teht az, hogy a jegyzkfjl megvltozott-e azta,

hogy a bngsz utoljra ellenrizte?
Ha a vlasz nem, teht a jegyzkfjl nem vltozott meg, a bngsz
azonnal elindt egy noupdate esemnyt, s ezzel vgzett is.

Ha a vlasz igen, teht a jegyzkfjl megvlrozott, a bngsz egy
downloading esemnyt indt el, s megkezdi a jegyzkben felsorolt va
lamennyi erforrs letltst.

Mikzben lerlt, a bngsz idrl idre progress esemnyeket indt el,
amelyek arrl tartalmaznak informcit, hogy a bngsz hny fjlt tlttt
mr le, s hny fjl vr mg letltsre.
Miutn a jegyzkben szerepl sszes erforrst sikeresen jra letlttte,
a bngsz elindt mg egy utols, updateready nev esemnyt. Ez jelzi,
hogy a kapcsolat nlkli webalkalmazs j vltozata teljes egszben a gyors
trba kerlt, s kszen ll a kapcsolat nlkli hasznlatra. Ekkor azonban
mg nem az j vltozatot ltjuk. Ha "menet kzben" az j vltozatra szeret
nnk vltani, anlkl, hogy a felhasznlt az oldal jratltsre knyszerte
nnk, sajt kezleg meg kell hvnunk a window.applicationCache.
swapCache ( ) fggvnyt.
Ha a folyamat brmely pontjn flresiklik valami, a bngsz egy error

esemnyt vlt ki, s lellrja a mveletet. Hogy mi okozhat hibt? me egy
a vgletekig lervidtett lista:
A jegyzkfjl egy 404-es (Page Not Found- "Az oldal nem tallhat ")
vagy 410-es (Permanemly Gone- "Vglegesen trlve") HTTP-hibt ad
ViSSZa.
A jegyzkfjl megvan, s nem vltozott meg, de a r mutat HTML

oldal nem tltdtt le helyesen.
A jegyzkfjl megvan, s megvltozott, de a bngsznek nem sikerl

letltenie a benne felsorolt erforrsok egyikt.
202
l Bontsok a kapcsolatot!
8.
fejezet
A hibakeress mvszete,
avagy "lj meg!
lj meg itt s most!"
Kt fontos dologra szeretnm felhvni itt a figyelmet. Az elsrl ppen most

olvastunk, de lehet, hogy nem igazn fogtuk fel, gyhogy elismtlem: ha
a jegyzkfjlban felsoroltak kzl akr csak egyetlen erforrs letltse is sikerte
len, a kapcsolat nlkli webalkalmazs gyorstrazsnak teljes mvelete kudar

cot vall. A bngsz elindtja az error esemnyt, de arrl nem kapunk visz
szajelzst, hogy pontosan mi volt a problma, ami a hibakeresst rendkvl
bosszantv teheti a kapcsolat nlkli webalkalmazsokban.
A msik fontos dolog elmleti rtelemben nem hiba, de komoly bngsz
hibnak tnhet, amg r nem jvnk, hogy mirl is van sz. Arrl ugyanis,
hogy a bngsz pontosan hogyan is ellenrzi, hogy a jegyzkfjl megvlto
zott-e. A mvelet hrom lpsbl ll. Tudom, hogy unalmas, de muszj tud
nunk, gyhogy figyeljnk. me az eljrs:
l. A bngsz a szokvnyos HTTP-eljrsokkal ellenrzi, hogy a gyors
trjegyzk lejrt-e. Mint minden ms fjl esetben, amelyet HTTP-n keresz

tl szolgltat, a webkiszolgl ltalban az ilyen fjlokrl is metaadatokat
helyez el a HTTP-vlaszfejlcekben. Egyes HTTP-fejlcek (az Expires s a
Cache-Control) arrl tjkoztatjk a bngszt, hogy milyen felttelekkel

gyorstrazhatja a fjlt anlkl, hogy megkrdezn a kiszolgltl, hogy a fjl
megvltozott-e. Ennek a fajta gyorstrazsnak semmi kze a kapcsolat nl
kli webalkalmazsokhoz: lnyegben minden HTML-oldalra, stluslapra,
parancsfjlra, kpre s ms webes erforrsra vonatkozik.
2. Ha a jegyzkfjl lejrt (a HTTP-fejlcek szerint) , a bngsz megkr
dezi a kiszolgltl, hogy van-e belle j vltozat, s ha igen, letlti azt. Ehhez
a bngsz egy HTTP-krelmet ad ki, amely tartalmazza a jegyzkfjl utols
mdostsnak dtumt - azt a dtumot, amelyet a webkiszolgl kzlt
a HTTP-vlaszfejlcben, amikor a bngsz utoljra letlttte a fjlt. Ha a
webkiszolgl gy tallja, hogy a jegyzkfjl nem mdosult az emltett d
tum ta, egyszeren a 304 (Not Modified)- "Nem mdosult"- vlaszkdot
adja vissza. Ez sem kizrlag a kapcsolat nlkli webalkalmazsok sajtossga
- lnyegben minden erforrs esetben ez trtnik a Weben.
3. Ha a webkiszolgl gy gondolja, hogy a jegyzkfjl megvltozott az
emltett dtum ta, a 200-as (OK) HTTP-llapotkdot adja vissza, amelyet
az j fjl tartalma, valamint az j
8.
fejezet
eaehe-Control
fejlcek s az utols
mdosts j dtuma kvet. Ez biztostja, hogy az l. s 2. lps legkzelebb is

helyesen mkdjn. (A HTTP klassz. A webkiszolglk mindig gondolnak
a jvre. Ha a webkiszolglnak felttlenl el kell kldenie neknk egy fjlt,
mindent megtesz annak rdekben, hogy feleslegesen ne kelljen ktszer elkl
denie.) Miutn a bngsz letlttte az j jegyzkfjlt, sszeveti annak tartal
mt a legutbb letlttt msolattal. Ha a jegyzkfjl tartalma megegyezik a
korbbi vltozatval, a bngsz nem tlti le jra a jegyzkfjlban felsorolt
egyik erforrst sem.
A fenti lpsek brmelyike buktatnak bizonyulhat, amikor egy kapcsolat
nlkli webalkalmazst fejlesztnk s tesztelnk Tegyk fel pldul, hogy
kzzresznk egy vltozatot a jegyzkfjlunkbl, majd 10 perccel ksbb
rjvnk, hogy mg egy erforrst hozz kell adnunk. Semmi gond, igaz?
Csak belerunk a jegyzkbe mg egy sort, s jra kzztesszk a fjlt. Csak
hogy ekkor a kvetkez trtnik: jratltjk az oldalt, a bngsz szleli
a manifest jellemzt, elindtja a checking esemnyt, s ... semmi nem
trtnik. A bngsz makacsul ragaszkodik ahhoz, hogy a gyorstrjegyzk
nem vltozott meg. Mirt? Azrt, mert a webkiszolglt alaprtelmezs sze
rint valsznleg gy lltottk be, hogy a bngszket arra utastsa, hogy
nhny rig gyorstrazzk a statikus fjlokat (HTTP-eljrsokon keresztl,
a eaehe-Control fejlcek hasznlatval). Ez azt jelenti, hogy a bngsz
soha nem jut tl a hromlpses mvelet l. lpsn. A webkiszolgl term
szetesen tudja, hogy a fjl megvltozott, de a bngsz nem jut el odig, hogy
ezt megkrdezze a webkiszolgltL Mirt? Azrt, mert amikor utoljra letl
ttte a jegyzkfjlt, a webkiszolgl azt mondta neki, hogy nhny rig ezt
az erforrst trolja a gyorstrban (HTTP-eljrsokon keresztl, a eaehe
Control fejlcek hasznlatval). A bngsz pedig most, 10 perccel ksbb,
pontosan ezt teszi.

Vilgoss szeretnm tenni, hogy ez nem hiba, hanem knyelmi szolgl
tats, ami pontosan gy mkdik, ahogy mkdnie kell. Ha a webkiszol
glknak nem lenne r mdjuk, hogy kzljk a bngszkkel (s a kztes
szmtgpekkel), hogy bizonyos dolgokat gyorstrazniuk kell, a Web egy
szempillants alatt sszeomlana. Ez persze nem vigasztal minket, ha rkat
tltttnk azzal, hogy rjjjnk, mirt nem veszi szre a bngsznk, hogy
a jegyzkfjl frisslt. (s ami a legszebb az egszben: ha elg ideig vrunk,
az alkalmazs ismt mkdni kezd! Mert a HTTP-gyorstr elvlt! Ahogy az
el van rva! ljetek meg! ljetek meg itt s most!)
8.
fejezet
Egy dolgot teht mindenkppen el kell mg vgeznnk: t kell lltanunk

a webkiszolglt, hogy a jegyzkfjl ne kerlhessen a HTTP-gyorstrba. Ha
Apache alap webkiszolglt futtatunk, elg ezt a kt sort elhelyeznnk a
.htaccess fjlban:
ExpiresActive On
ExpiresDefault access
Ez a kt sor letiltja az adott knyvtrban s annak alknyvtraiban tallhat

fjlok gyorstrazst. Az zemi krnyezetben valsznleg nem ezt szeret
nnk, ezrt vagy minstennk kell a fenti meghatrozst egy <Fi les> uta
stssal, hogy csak a jegyzkfjlunkra vonatkozzon, vagy ltre kell hoznunk
egy alknyvtrat, amelyben csak a gyorstrjegyzk s ez a .htaccess fjl tall
hat. Ahogy az lenni szokott, a bellts rszletei a klnfle webkiszolgl
kan eltrhetnek, ezrt nzznk utna a kiszolgl dokumentcijban, hogy
miknt szablyozhatjuk a HTTP-gyorstr fejlceit.
Mindazonltal a HTTP-gyorstrazs letiltsa a gyorstrjegyzkre vonat
kozan nmagban nem oldja meg minden gondunkat. gy is elfordulhat,
hogy mdostjuk az alkalmazs-gyorstr valamelyik erforrst, de az to
vbbra is ugyanazon az URL-en tallhat a webkiszolgln. Ebben az eset
ben a hromlpses mvelet 2. lpse akaszt meg minket. Ha a jegyzkfjl
nem vltozott meg, a bngsz soha nem fogja szrevenni, hogy az egyik
korbban gyorstrba rt erforrs mdosult. Vegyk az albbi pldt:
CACHE MANIFEST
#rev
42
c lock. js
clock.css
Ha mdostjuk a clock.css fjlt, s jra kzztesszk, nem fogjuk ltni a vl

tozst, mert maga a gyorstrjegyzk nem mdosult. Minden alkalommal,
amikor vltoztatunk a kapcsolat nlkli webalkalmazs valamelyik erforr
sn, magt a jegyzkfjlt is mdostanunk kell, de ehhez elg akr egyeden
karaktert megvltoztatni. Taln az a legegyszerbb, ha a jegyzkfjlban el
helyeznk egy megjegyzssort a vltozat szmval, s amikor vltoztatunk
valamelyik erforrson, a megjegyzsben szerepl vltozatszmot rjuk t.
A webkiszolgl a mdostott jegyzkfjlt adja vissza, a bngsz pedig sz
reveszi, hogy a fjl tartalma megvltozott, s jra letlti a jegyzkben felsorolt
sszes erforrst:
8.
fejezet
CACHE MANIFEST
t rev 43
clock.js
clock.css
ptsnk egyet!
Emlksznk mg a Halma-jtkra, amelyet a 4. fejezetben ksztettnk (lsd
ott az "Egy teljes plda" cm rszt), majd ksbb kiegsztettnk, hogy kpes
legyen maradand helyi trol ba memeni a jtk llapott ( "A HTML-trol
mkds kzben")? Nos, itt az ideje, hogy a Halma-jtkunkat levlasszuk
a hlzatrl.
Ehhez egy jegyzkfjlt kell ksztennk, amely felsorolja az sszes er
forrst, amire a jtknak szksge van. Van ugye a f HTML-oldal, egy
JavaScript-fjl, amely a jtk kdjt tartalmazza, s .. . ennyi. Nincsenek k
pek, mivel a grafikt teljes egszben programbl, a Canvas API-n keresztl
vezreljk (lsd a 4. fejezetet), s minden szksges CSS-stlus egy <style>
elemben tallhat a HTML-oldal elejn. A jegyzkfjlunk teht gy fest:
CACHE MANIFEST
halma.html
../halma-localstorage.js
Egy megjegyzs az elrsi utakkal kapcsolatban: ltrehoztam egy offiine/

alknyvtrat az examples/ knyvtrban, s a fenti jegyzkfjl ebben az al
knyvtrban kapott helyet. Mivel a HTML-oldalt egy apr kiegsztssel kell
elltnunk, hogy kapcsolat nlkl is mkdjn (erre mindjrt visszatrnk),
ksztettem egy msolatot a HTML-fjlrl, s ezt is az offiine/ alknytrba
tettem. Maga a JavaScript-kd azonban nem vltozott a helyi trols tmo
gatsnak hozzadsa ta (lsd a 7. fejezet "A HTML5-trol mkds kz
ben" cm rszt), ezrt ugyanazt a .js fjlt hasznostjuk jra, amelynek a helye
a szlknyvtr (examples/). sszefoglalva, a fjlok helye gy fest:
/examples/localstorage-halma.html
/examples/halma-localstorage.js
/examples/offline/halma.manifest
/examples/offline/halma.html
A gyorstrjegyzkben
(lexampleslofflinelhalma. manifest) kt fjira szeretnnk

(lexamplesloffline/
hivatkozni. Az els a HTML-fjl kapcsolat nlkli vltozata
206 J Bontsok a kapcsolatot!
8.
fejezet
halma.html), amely a jegyzkfjlban tvonalelrag nlkl szerepel, mert

a kt fjl ugyanabban a knyvtrban tallhat. A msodik a JavaScript-fjl,
amelynek a helye a szlknyvrr (lexampleslhalma-localstoragejs), s amelyet
a jegyzkben relatv URL-cmmel tntetnk fel
tosan gy hasznljuk az <img
(. ./halma-localstoragejs). Pon
src> jellemzkben is a relatv URL-eket.
Ahogy a kvetkez pldban Jrni fogjuk, (az aktulis tartomny gykerbl

kiindul) abszolt elrsi urakat vagy akr (ms tartomnyok erforrsaira
murat) abszolt URL-eket is hasznlhatunk.
A HTML-fjlhoz hozz kell adnunk a manifest jellemzt, amely a jegy
zkfjira murat:
<! OOCTYPE html>
<htmllang= "en" manifest="halma. manifest">
Ennyi az egsz! Amikor egy kapcsolat nlkli mkdst tmogat bngsz

elszr tlti be a kapcsolat nlkli mkdsre felksztett HTML-oldalt, le
tlti a hivatkozott jegyzket, annak alapjn pedig a szksges erforrsokat,
s elraktrazza azokat a kapcsolat nlkli alkalmazs-gyorstrban. Innen
kezdve a kapcsolat nlkli alkalmazs algoritmusa veszi t az irnytst, ami
kor csak betltjk az oldalt. A jtkot gy kapcsolat nlkl is jtszhatjuk, s
mivel az alkalmazs helyben menti a jtk llapott, akkor fggesztjk fel,
vagy indtjuk jra, amikor csak akarjuk.
Tovbbi olvasmnyok
Szabvnyok:
Kapcsolat nlkli webalkalmazsok a HTML5-szabvnylersban (http:/1
bit.lyleCkWZa)
A bngszgyrtk dokumentcii:
"
"Offline resources in Firefox (https:lldeveloper.mozilla.org/En/Ofjiine_
resources_in_Firefox) a Mozilla Developer Center webhelyn
"
"HTML5 Offline Application Cache (http:lldeveloper.apple.comlsaforil
libraryldocumentation/iPhone/Conceptual/Safori]SDatabaseGuide!Offline
ApplicationCache!OfjiineApplicationCache.html), a "Safari Client-Side Storage
and Offline Applications Programming Guide" (http://developer.apple.com/
8.
fejezet
saforillibraryldocumentationliPhone/Conceptual!Safori]SDatabaseGuide!
!ntroductionl!ntroduction.htm l} rsze
Oktatanyagok s bemutatk:
Andrew Grieve: "Gmaii for Mobile HTMLS Series: Using Appeaehe to

Launeh Offiine-part l" (http:!lgooglecode.blogspot.com/2009/04/gmail
for-mobile-html5-series-using. html)
Andrew Grieve: "G maii for Mobile HTMLS Series: Using Appcaehe to
Launeh Offline-part 2" (http:llgooglecode.blogspot.com/2009/05/gmail
for-mobile-html5-series-part-2.html}
Andrew Grieve: "Gmaii for Mobile HTMLS Series: Using Appeaehe to

Launeh Offline-part 3" (http:!lgooglecode.blogspot.com/2009/05/gmail
for-mobile-html5-series-part-3.html)
Jonathan Shark: "Debugging HTMLS Offline Application Caehe
"
(http:lljonathanstark.com/blog/2009/09/27/debugging-html-5-offline
application-cachel)
Paul Ro uget: "An HTMLS offline image editor and u pioader applieation
"
(http://hacks. mozilla. orgi201 0/02/an-htm/5-offline-image-editor-and

uploader-application/)
9. fejezet
rlt rlapok
Ugorjunk fejest!
Mindenki ismeri a webes rlapokat, nem igaz? Ltrehozunk egy <form>
cmkt, hozzadunk nhny <input type="text"> s taln egy <input
type="password"> elemet, az rlapot egy <input
type="submit">
gombbal tesszk teljess, s kszen is vagyunk.

Ez smafu. A HTML5 tbb mint egy tucat j bevitelielem-tpust hatroz
meg, amelyeket az rlapokon hasznlhatunk. Amikor pedig azt mondom,
hogy " hasznlhatunk ", gy rtem, hogy azon nyomban- mindenfle trkk,
szemfnyveszts s kerl megolds nlkl. Azrt ne rljnk tlsgosan:
nem azt akarom mondani, hogy a bngszk kivtel nlkl tmogatjk is az
izgalmas j szolgltatsok mindegyikt.
, dehogy. A legkevsb sem. A leg
jabb bngszkben persze hastani fognak az rlapjaink, a rgi bngszk

ben azonban ppen hogy csak mkdnek majd - hastsrl nemigen beszl
hetnk. Ami viszont j hr, hogy ez azt jelenti, hogy az emltett szolg!tatsok
minden bngszben elegnsan kapcsolnak alacsonyabb fokozatba. Mg az
IE 6-ban is.
Helyrz szveg
Az els tbbletszolgltats, amellyel a HTML5 kiegszti a webes rlapokat,
az a lehetsg, hogy helyrz szveget helyezhetnk el a beviteli mezkben.
A helyrz szveg addig lthat a beviteli mezben, amg a mez res, s
nincs rajta a fkusz. Amint a mezbe kattintunk (vagy a tabultorbillenty
vel lltjuk r a fkuszt), a helyrz szveg eltnik.
Valsznleg tallkoztunk mr helyrz szvegekkel. Ahogy a 9.1. brn
lthatjuk, a Mozilla Firefox 3.5 pldul a "Search Bookmarks and History"
9.
fejezet
rltrlapok l
209
(Keress a knyvjelzk s az elzmnyek kztt) szveget jelenti meg a cm

svban.
l(
9.1. bra
Search Bookmorks ond Hstmy
Helyrz szveg a Firefox keresmezjben
Ha a cmsvra kattintunk (vagy a tabultorbillentyvel rllrjuk a fkuszt),

a helyrz szveg eltnik (lsd a 9.2. brt).
9.2. bra
A helyrz szveg eltnik, amikor a fkuszt a mezre visszk
Ironikus mdon a Firefox 3.5 azt nem tmogatja, hogy a sajt webes rlapja
inkat is helyrz szveggel lssuk el. C'est la vie. A helyrz szveg tmoga
tst a klnfle bngszkben a 9.1. tblzat mutatja.
9.1. tblzat A helyrzk tmogatsa
IE
Firefox
Satari
Chrome
3.7+
4.0+
4.0+
Helyrz szveget egybknt az albbi mdon szrhatunk be egy webes r

lapba:
<form>
<input name=
"q" placeholde="Search Bookmarks and History">
<input type= "submit" value= "Search">

</form>
A helyrzker nem tmogat bngszk egyszeren figyelmen kvl hagyjk

a placeholder (helyrz) jellemzt.
210
l rltrlapok
9.
fejezet

Krds: A placeholder jellemzben szerepe/het HTML-kd? Egy kpet sze
retnk beszrni, vagy esetleg megvltoztatnm a szneket.
Vlasz: A placeholder jellemz csak szveget tartalmazhat, HTML

kdot nem. Egyes gyrtknak ugyanakkor vannak sajt CSS-bvtmnyei
(http: 1/trac. webkit. org/export/3 7527/trunkiLayout Tests/fast/forms/
placeholder-pseudo-style.html), amelyek lehetv teszik, hogy bizonyos bn
gszkben formzzuk a helyrz szveget.
Automatikus fkuszls mezk

Sok webhely JavaScript-kd segtsgvel nmkden a webes rlapok els
beviteli mezjre lltja a fkuszt. A Google.com nyitoldala pldul automati
kusan a keresmezre lltja a fkuszt, hogy a kulcsszavakat azonnal ber has
suk, anlkl, hogy elbb a mezbe kellene vinnnk a kurzort. Ez a legtbb
ernber szmra knyelmes, de a gyakorlott felhasznlknak vagy a klnleges
ignyekkel br felhasznlknak idegest lehet: ha lenyomjuk a szkz bil
lentyt, arra szmtva, hogy ezzel grgetjk az oldalt, csaldni fogunk, mert
a fkusz mr egy rlapmezben tallhat, ezrt az oldal nem fog lejjebb gr
dlni. Helyette egy szkzt runk a beviteli mezbe. Ha egy msik bevi
teli rnezre lltjuk a fkuszt, rnikzben az oldal mg tltdik, a webhely
amofkusz-kezel parancskdja "segt", s visszateszi a fkuszt az eredeti be
viteli mezbe, amint az oldal teljesen betltdtt, gy megszaktja a munkn
kat, s rossz helyre fogunk gpelni.
Mivel az automatikus fkuszllts JavaScript-kd segtsgvel trtnik,
nehz lehet rninden szlssges esetet kezelni, s nem sok lehetsge marad
azoknak, akik nem akarjk, hogy a weboldal ellopja" a fkuszt.
"
A problma megoldsra a HTML5 egy autofocus nev jellemzt vezet
be a webes rlapok rninden vezrlje szmra. Az autofocus jellemz pon
tosan azt teszi, arnire a neve utal: a fkuszt egy adott beviteli mezre lltja.
Mivel azonban ez csak lerkd, s nem parancskd, a viselkedse minden
webhelyen azonos. Ezen kvl a bngszgyrtk (illetve a bvtmnyek
kszti) rndot adhatnak a felhasznlknak az automatikus fkuszls
9.
fejezet
rltrlapok l 211
kikapcsolsra. Azt, hogy mely bngszk tmogatjk az automatikus fku

szlst, a 9.2. tblzatban lthatjuk.
9.2. tblzat Az a utofkusz tmogatsa
Flrefox
IE
Safarl
4.0+
gy tehetnk egy rlapmezt automatikus fkuszlsv:

<form>
<input name= "q"
autofocus>
<input type= "submit" value="Search">

</form>
Az autofkuszt nem tmogat bngszk egyszeren figyelmen kvl hagy

jk az autofocus jellemzt.
Tessk? Azt szeretnnk, hogy az automatikus fkuszls mezink min
den bngszben mkdjenek, ne csak a csili-vili HTML5-s bngszkben?
Nos, a rgi amofkusz-kezel parancskdunkat nyugodtan megtarthatjuk,
csak kt apr vltoztatst kell vgrehajtanunk:
l. Adjuk hozz az autofocus jellemzt a HTML-kdhoz.
2. Dertsk ki, hogy a bngsz tmogatja-e az autofocus jellemzt

(lsd az "Automatikus rlapfkusz" cm rszt a 2. fejezetben), s csak akkor
futtassuk a sajt amofkusz-kezel parancskdunkat, ha a bngszben nincs
beptett tmogats az automatikus fkuszlshoz:

<form name= "f ">
<input id= q"
autofocus>
<script>
if
(! ( "autofocus" in document. =eateElement ("input") )
document .getElementByld ("q") . focus ();
)
</script>
<input type="submit value="Go">
</form>
Ha ltni szecetnnk egy pldt az autofocus jellemz hasznlarra bizton

sgi tartalkra val visszakapcsolssal egytt, ltogassunk el a http:lldive
intohtml5.orglexampleslinput-autofocus-withfallback.html oldalra.
212
l rltrlapok
9.
fejezet

Sok webhely vr a fkusz belltsval, amg a window.onload ese
mny be nem kvetkezik. Ez az esemny azonban addig nem indul el, amg
valamennyi kp be nem tltdtt. Ha az oldalon sok-sok kp tallhat,
a fentihez hasonl naiv parancskd visszallthatja a fkuszt a mezre,
mikzben a felhasznl mr az oldal msik rszn tevkenykedik. (Ezrt
utljk a halad felhasznJk az aurofkusz-parancskdokat.) A fenti plda
az amofkusz-parancskdot kzvetlenl a hivatkozott rlapmez utn
helyezi el, a httrrendszereink azonban nem biztos, hogy ilyen rugalma
sak. Ha nem tudunk az oldal kzepre parancskdot beszrni, a f
kuszt a window.onload helyett egy olyan egyni esemnyben kell
belltanunk, mint a jQuery $ (document). ready () esemnye.
E-mail cmek
Tbb mint egy v tizeden keresztl a webes rlapok csupn nhny fajta me
zbl lltak. A legelterjedtebbeket a 9.3. tblzat sorolja fel.
9.3. tblzat Bevitelimez-tpusok a HTML4-ben
nsfrY .. HYa
II' b-!W,..
Meyzsek
Jellngyzet
<input type;"checkbox">
Ki- s bekapcsolhat
Vlasztgomb
<input type;"radio">
Ms beviteli elemekkel egy csoportba

foglalhat
Jelszmez
<input type;"password">
Lenyl lista
<select><option>...
Fjlvlaszt
<input type; "file">
A karaktereket pontokkal (csillagokkal)
helyettesti, mikzben a felhasznl gpel
Egy fjlmegnyit prbeszdablakot

jelent meg
Elkld gomb
<input type;"submit">
Egyszer szvegmez
<ine;"text">
A type jellemz elhagyhat
A fenti bevitelielem-tpusok a HTML5-ben is mkdnek. Ha az oldalainkat
"
"ellptetjk HTML5-t (pldul a dokumentumtpus mdostsval-lsd
9.
fejezet
rlt rlapok l 213
A dokumentumtpus" cm rszt a 3. fejezet elejn),semmit sem kell vltoz

"
tatnunk a webes rlapjainkon. ljen a visszirny megfelelsg!
A HTML5 ugyanakkor tbb j meztpust is meghatroz,s nincs r
okunk,hogy ne kezdjk el hasznlni ket- mindjrt vilgoss is vlik,mirt.
Az j bevitelielem-tpusok kzl az elst az e-mail cmekhez szntk. gy
nz ki:
<form>
<input type=" email">
<input type= "submit" value= "'Go">
</form>
Ide egy olyan mondatot akartam rni,ami gy kezddn volna: "Azokban

a bngszkben,amelyek nem tmogatjk a type="email"-t ..".De nem
.
tettem. Hogy mirt? Mert nem igazn tudom,mit jelent az,hogy egy bng
sz nem tmogatja a type="email "-t. Minden bngsz tmogatja. Lehet,
hogy nem csinlnak vele semmi klnset (a type="email" klnleges
kezelsre hamarosan ltunk nhny pldt),de azok a bngszk,amelyek
nem ismerik fel a type="email" tpus mezket,egyszeren type= "text"
tpusknt kezelik ket,s sima szvegmezknt jelentik meg.
Nem tudom elgg hangslyozni,mennyire fontos ez. A Vilghln r
lapok millii tallhatk,amelyek egy e-mail cm berst krik,s mindegyik
az <input type="text"> tpust hasznlja. Ltunk egy szvegmezt,be
rjuk az e-mail cmnket a mezbe,s ennyi. Aztn jn a HTML5,s k
ln meghatrozza a type= "e mail "-t. Ettl kiakadnak a bngszk? Nem.
A Fldn minden egyes bngsz type="text"-knt kezeli az ismeretlen
type jellemzket,mg az IE 6 is. A webes rlapjainkat teht most rgtn

"
ellptethetjk " a type="email" hasznlatra.

s mit jelent az,ha azt mondjuk,hogy egy bngsz tmogatja a type=
"email "-t? Nos,ez tbb dolgot is jelenthet. A HTML5 szabvnylersa nem

kvetel meg adott felleteket az j bevitelielem-tpusok szmra.Az Opera az
e-mail cmmezket egy apr e-mail ikonnal jelzi. Ms HTML5-kpes bn
gszk,pldul a Safari vagy a Chrome,egyszeren szvegmezknt jelentik
meg ket- pontosan gy,mint a type="text" tpus mezket -,gy a
felhasznJk szre sem veszik a klnbsget (hacsak nem tekintik meg az
oldal forrst).
Aztn ott van az iPhone.
214 l rltrlapok
9.
fejezet
Az iPhone nem rendelkezik fizikai billentyzetteL A gpels" a kper

"
nyn megjelen virtulis billentyzet tapogatsval trtnik, ami akkor buk
kan fel, amikor szksg van r, pldul amikor egy rlapmezre lltjuk a f
kuszt egy weboldalon. Az Apple azonban nagyon gyes megoldst alkalmaz
az iPhone webbngszjben: a bngsz a HTML5 j bevitelielem-tpusai
dinamikusan az adott tpus beviteli mezhz iga

ztja a kpernyn megjelen billentyzetet.
kzl tbbet is felismer, s
Az e-mail cmek pldul szveges adatok, igaz? Igaz, de klnleges szve

gek: szinte minden e-mail cm tartalmazza a@ jelet s legalbb egy pontot(.),
szkzt viszont valsznleg nem. Amikor teht egy iPhone-felhasznl egy
<input
type= "email"> elemre fkuszl, egy olyan billentyzet jelenik
meg a kpernyn, amelyen a szkz billenty a szoksosnl kisebb, s kln

billentyk tallhatk rajta a @ s . karakterek szmra( lsd a 9.3. brt).
sszefoglalva: nincs semmilyen htrnya annak, ha az e-mail cmet vr
sszes rlapmeznket mris type= "email" tpusv alaktjuk. Valszn
leg senki nem fogja szrevenni - taln az iPhone-hasznlkat kivve (de mg
k sem biztos). Akiknek mgis feltnik, azok csak csendben elmosolyodnak
majd, s ksznetet ruandanak neknk, hogy kicsit knyelmesebb tettk
a Web hasznlatr.
Webcmek
A webcmek - amelyeket sokan URL, a pednsabbak pedig URI nven is
mernek- szintn klnleges cl szveges adatok. A webcmek alakjt inter
netes szabvnyok szablyozzk. Ha valaki azt kri, hogy rjunk be egy web
cmer egy rlapra, valami olyasmit vr, mint a http://www.google.com,
nem pedig olyasmit, mint a 125 Farwood Road". Perjelek s a pontok gyak
"
ran elfordulnak a webcmekben, a szkzk hasznlata azonban tilos. Ezen
kvl minden webcm vgn ll egy tartomny-uttag, pldul a ".com" vagy
az .org".
"
s akkor jjjn az ... (dobpergst krek) .. <input type="url">! Ez
.
az elemtpus az iPhone-on gy fest, mint a 9.4. brn.
9. fejezet
rltrlapok l 215
<form>
9.3. bra
E-mail cmek bersra optimalizlt billentyzet
<form>
<input type="url">
9.4. bra
216
URL-cmek bersra optimalizlt billentyzet
l rltrlapok
9. fejezet
Ahogy az e-mail cmer vr mezkhz, az iPhone a webcmekhez is optim

lis virtulis billemyzetet biztost. A szkz billenty helyt teljes egszben
tveszi a pom, a perjel s a ".com" virtulis billemyje. Ha a ".com" billentyt
lenyomva tartjuk, ms gyakori uttagot - pldul ".org" vagy ".ner" - is v
laszthatunk.
A HTML5-t nem tmogat bngszk a type="url"-t pomosan gy ke

zelik, mint a type= "text "-et, teht nincs semmilyen htrnyos kvetkezmnye
annak, ha minden webcmer vr mezhz a type="url" tpust rendeljk.
Szmok lptetmezkben
Kvetkezzenek a szmok. Egy szmot krni sok szempombl nehezebb, mim
egy e-mail vagy webcmet. Elszr is, a szmok bonyolultabbak, mint azt
gondolnnk. Nzznk egy gyors pldt: vlasszunk egy szmot. -l? Nem j,
egy l s 10 kztti szmra gondoltam. 7 1/2? Nem, nem trtszmot, ugyan
mr. n? Na, ez mr tnyleg irracionlis.
Azt akarom mondani, hogy ltalban nem "csak egy szmot" krnk.
Valsznbb, hogy egy adott tartomnyba es szmot szeretnnk, s azon
bell is csak bizonyos tpus szmokat engednk meg - pldul az egsz
szmokar igen, de a trteket vagy tizedestrteket nem, vagy esetleg valami

egzotikusabbat akarunk, pldul egy tzzel oszthat szmot. A HTML5 erre
is gondolt. Nzznk egy pldt:
<input type="number"
min= "0"
max="lO"
step=
"2"
value="6">
Nzzk vgig egyenknt a jellemzker (a szveger kvetherjk egy "l" pl

dn is, ha akarjuk):
A type="number" azt jelenti, hogy egy szmmezrl van sz.
A m i n "0" a mezben elfogadhat legkisebb rtket hatrozza meg.
A max= "10" az elfogadhat legnagyobb rtk megadsra szolgl.

A step="2" (lpskz
=2) a
mi n
rtkkel kombinlva a O, 2, 4 stb.
tartomnyra korltozza az elfogadhat rtkeket, egszen a max rtkig.

9.
fejezet
rltrlapok l 217
A value="6" az alaprtelmezett rtk. Ennek ismersnek kell lennie,
mert ugyanaz a jellemz, mint amit korbban mindig is hasznltunk az

rlapmezk rtkeinek meghatrozsra. (Itt azrt emltem meg, hogy
hangslyozzam, hogy a HTML5 a HTML elz vltozataira pl. Teht
amit mr tudunk s hasznlunk, azt nem kell jra megtanulnunk.)
Ez a szmmezk lerkd rsze. Ne feledjk, hogy az emltett jellemzk egyike
sem ktelez. Ha van legkisebb elfogadhat rtk, de legnagyobb nincs, meg
adhatjuk csak amin jellemzt, s elhagyhatjuk amax-ot. Az alaprtelmezett
lpskz az l, teht a step jellemzt csak akkor kell megadnunk, ha ettl
eltr lpskzt szeretnnk. Ha nincs alaprtelmezett rtk, a value jellemz
rtke lehet egy res karakterlnc, de teljesen el is hagyhatjuk.
A HTML5 azonban nem ri be ennyivel. Ugyanazon a jutnyos ron
ingyen- az albbi hasznos JavaScript-tagfggvnyekhez is hozzjutunk:
input.stepUp(n)
A mez rtkt n-nel nveli.

input.stepDown(n)
A mez rtkt n-nel cskkenti.

input.valueAsNumber
Az aktulis rtket lebegpontos szmknt adja vissza (az input.value

tulajdonsg rtke mindig egy karakterlnc).
Nehezen tudjuk magunk el kpzelni? Nos, az, hogy a szmbeviteli mezk
pontosan hogyan jelennek meg, a bngsznktl fgg, s a klnbz bn
gszgyrtk ms-ms fellettel valstottk meg a szmmezk tmogatst.
Az iPhone-on - ahol a bevitel eleve krlmnyes - a bngsz megint csak
egy msik, ezttal a szmbevitelhez igaztott virtulis billentyzetet jelent
meg (lsd a 9.5. brt).
218
l rltrlapok
9. fejezet
<form>
9.5. bra
Szmok bersra optimalizlt billentyzet
Az Opera asztali rendszerekre rt vltozatban ugyanez a type= "number"

mez egy "lptetmez" (spinbox) formjban jelenik meg, kis lefel s felfel
mutat nyilakkal, amelyekre kattintva mdosthatjuk az rtket (9.6. bra).
si
<form>
<input
type="number"
min="o
max=" l O"
step="2"
value="6">
9.6. bra
Lptetmez
9. fejezet
rltrlapok l
219
Az Opera figyelembe veszi amin, max s step jellemzket, ezrt mindig

elfogadhat szmrtket kapunk. Ha az rtket feltoljuk a maximumra, a lp
tetmez felfel mutat nyila kiszrkl (9.7. bra).
L.._
__
1_,
0
9.7. bra
Lptetmez maximlis rtken
Mint minden ms bevitelielem-tpus esetben, amelyrl ebben a fejezetben

sz esik, itt is igaz, hogy a type="number"-t nem tmogat bngszk az
ilyen tpus mezket type= "text "-knt kezelik. Az alaprtelmezett rtk
megjelenik a mezben (mivel a value jellemzben troldik), de a tbbi
pldul amin s amax-jellemzt a bngsz figyelmen kvl hagyja. Ezeket
megvalsthatjuk magunk, de jrahasznosthatjuk a lptetmezket megva
lst szmos JavaScript-keretrendszer egyikt is. Eltte azonban ne felejtsk
el az albbi mdon megvizsglni, hogy a bngszben va n-e beptett
HTML5-tmogats (lsd a 2. fejezet "Bevitelielem-tpusok" cm rszt):
if ( !Modernizr. inputtypes. number)
ll
ll
nincs beptett tmogats a type: "number" mezk szmra

esetleg prbljuk ki a Dojo-t vagy egy msik JavaScript-keretrendszert
Szmok csszkkon
A szmbevitel brzolsra nem az elz rszben ismertetett lptetmezk
jelentik az egyetlen megoldst. Valsznleg tallkoztunk mr olyan "csszka"

(slider) vezrlkkel is, mint amilyen a 9.8. brn lthat.
9.8. bra
Csszka
Most mr a webes rlapokon is hasznlhatunk csszkkat. A kd ksrtetie

sen hasonlt a lptetmezkre:
220
l rlt rlapok
9. fejezet
<input type="range"
mino"
max="lO"
ste"2"
value:;::: "6">
A rendelkezsre ll jellemzk ugyanazok, mint a type="number" esetben

- min, max, step s value -, s a szerepk is ugyanaz. Az egyeden
klnsget a felhasznli fellet jelenti. A type= "range" tpus vezrlker
a bngsznek nem olyan mezknt kell megjelentenie, amelybe rhatunk,
hanem csszkaknt. E knyv rsnak idejn a Safari, a Chrome s az Opera
legjabb vltozatai mind kpesek volrak erre. (Sajnos az iPhone egyszer sz
vegmezt jelent meg, s mg a kpernyn megjelen billentyzetet sem
szmbevitelhez igaztja.) Minden ms bngsz type="text" tpusknt
kezeli a type= "range" mezket, teht semmi nem tarthat vissza minket
attl, hogy akr rgtn hasznlatba vegyk ket.
Dtumvlasztk
A HTML4-ben nem volt dtumvlaszt vezrl. Ezt a hinyossgat kln
fle JavaScript-keretrendszerekkel- pldul a Dojo, a j Query UI, a YUI vagy
a Closure Library segtsgvel - orvosolhattuk, de ezek a megoldsok term
szetesen a dtumvlasztt knl reljes keretrendszer alkalmazst ignyel
tk.
A HTML5 vgre mdot ad r, hogy beptett dtumvlaszt vezrlket
hasznljunk, s ne kelljen magunknak parancskdokat rnunk. Valjban
nem is egy mdot, hanem hatot: hasznlhatunk dtumvlasztt, hnapv
lasztt, htvlasztt, idvlasztt, dtum- s idvlaszrt, illetve dtum-, id
s idznavlasztL
A tmogats azonban jelenleg- amint azt a 9.4. tblzat is szemllteti
meglehetsen gyr.
9.4. tblzat A dtumvlaszt tmogatsa
Betitelimeztous
Qoera
type"date"
9.0+
type"month"
9.0+
9. fejezet
Minden___ msbnasz
rlt rlapok l 221
type= "week
9.0+
type= "time
9.0+
type= "datetime
9.0+
type= "da tetime-local"
9.9.
9.0+
brn azt lthatjuk, hogy az Opera hogyan jelent meg egy <input
type="date">
mezt. Ha a dtum mell egy idpontot is szerernnk, az
Operban <input type= "da tetime"> mezket is hasznlharunk (lsd a
9.10.
brt). Ha csak vet s hnapot szeretnnk vlasztani (pldul egy hi
telkrtya lejrati idejnel megadshoz), egy <input type="month"> t

pus mezre
(9.11. bra) van szksgnk- az Opera ezt is tmogatja.

l 2009-12-25
l l
Week
..
E3
...
lolon Tuo Wed Thu Fri Sat Sun
.,
..
: J fGol
0
December
I.
!!
11 g
1!. 1l!
?I.
3
Today
9.9. bra
l!
1!!
10
None
Dtumvlaszt
12009-12-25 j UTC
l December L ][2009
..
Week
Wen Tue Wed Thu Fri S..t S...
! !! !!
Z ! l!!!l!l
:!!.!l.!!
""- ll
.!!
- 3
-
Today
9.1 0. bra
222
;,.
10
Dtum- s idvlaszt
l rlt rlapok
9.
fejezet
j2009-12 :TJ(Go_]
G] De<:ember 0J2009J
Uon
Tue
Wed
Thu
Fn
Sat
St..
! ll g
!.
.!.!!
.!.!! !!!
10
i[
9.11. bra
!l
No-ne
Today
___
Hnapvlaszt
Ritkbban hasznljuk, de ugyancsak rendelkezsre ll az <input
type=
"week"> mez, amellyel az v egy adott hett vlaszthatjuk ki (lsd a
9.12.
brt). Vgl, de nem utols sorban, egy idpontot is kivlaszthatunk egy

<input type="time"> mez segtsgve!; ezt a
9.13. bra szemllteti.
J2009-W52 J
j[ j-D- l JI2009J
lT
w-
21.
.!
Uon Tue Wed Tm

3
"
!!
7
ay
9.12. bra
Fn Sat Sun
.!
:?. !Q.!.!gQ
.!.!!!l.!.!!!!!
None
10
Htvlaszt
16:201
9.13. bra
Idvlaszt
Valszn, hogy idvel ms bngszk is tmogatni fogjk ezeket a bevi

telielem-tpusokat, de addig is nyugodtan hasznlhatjuk ket, mert a type=
"em ai l"-hez (lsd a fejezet "E-mail cmek" cm rszt) s ms beviteli ele
mekhez hasonlan ezeket az rlapmezket is egyszer szvegmezknt je

lentik meg azok a bngszk, amelyek nem ismerik fel a type= "da te "-et
s a tbbi j tpust. Ha tetszik, dnthetnk gy, hogy az <input
9.
fejezet
rltrlapok
223
type= "date ">-et s trsait hasznljuk, boldogg tve az Opert hasznl
kat, s egyszeren megvrjuk, amg a tbbi bngsz felzrkzik, de azt is

megtehetjk, hogy az <input type= "date"> mellett szlelkdot alkal
mazunk, hogy megllaptsuk, hogy a bngsz tmogatja-e a dtumvlaszt
kat (lsd a "Bevitelielem-tpusok" cm rszt a 2. fejezetben), s biztonsgi
tartalkknt egy neknk tetsz parancskdot mellkelnk:
<form>
<input type="date">
</form>
<script>
var i = docurnent. createElement ("input");
i. setAttribute ("type , "date");
if (i. type== "text") {
l l Nincs beptett dtumvlaszt-tmogats : (
l l A Dojo/jQueryUI/YUI/Closure hasznlatval
l l vagy valamilyen ms megoldssal ksztsnk egyet,
l l majd dinamikusan cserljk le az <input> elemet
)
</script>
Keresmezk
Ez egy kicsit bonyolultabb lesz. Pontosabban, az elv elg egyszer, de a meg
valsrsok nmi magyarzatot ignyelnek. me ...
Keress. Nem csak a Google Search vagy a Yahoo! Search segtsgvel
(persze ezekkel is): gondoljunk egy tetszleges keresmezre egy tetszleges
oldalon, egy tetszleges webhelyen. Az Amazonnak is van keresmezje,
a Neweggnek is, s a legtbb blognak is. Hogyan fest a lerkdjuk? Ht gy:
<input type="text">- olyan, mint minden ms szvegmez a Weben,
de ezen a HTML5-ben segthetnk:

<form>
<input name=
q" type=" search">
<input type="submit" value="Find">

</form>
Egyes bngszkben semmilyen klnbsget nem fogunk szrevenni a szok

vnyos szvegmezkhz kpest. Ha viszont Safarit hasznlunk Mac OS X-en,
a mez gy fog festeni, mint a 9.14. brn.
224
l rltrlapok
9.
fejezet

<form>
<input type"search">
<input type"submit" '
</form>
9.14.bra
Keresmez
Ltjuk a klnbsget? A beviteli meznek lekerektett sarkai vannak! Tudom,

tudom, llati izgalmas! De vrjunk csak, tovbb is van! Amikor gpelni kez
dnk egy type= "search" mezben, aSafari egy apr "x" gombot szr be
a mez jobb oldalra. Ha az "x"-re kattintunk, a bngsz trli a mez tar
talmr. (A Google Chrome, amely a httrben sok mindenben osztozik
aSafarival, szintn gy viselkedik.) Mindkt aprsg azt a clt szolglja, hogy

a mez gy nzzen ki s viselkedjen, mint az iTunes s ms Mac OS X-gy
flalkalmazsok beptett keresmezi (lsd a 9.15. brt).
foo
<form>
<input type"searcb">
<input type"submit" '
</form>
9.1 5. bra
Keresmez fkusszal
Az Apple webhelye is az <input type="search ">kdot hasznlja a web

hely keresmezjhez, hogy a webhely "Mac-rzst" nyjtson. A megolds
ban azonban nincs semmi, ami csak a Mac sajtja lenne. Az egsz csupn
lerkd, teht minden bngsz minden rendszeren a sajt szaksainak meg
felelen jelentheti meg a keresmezt. Ezen kvl, mint minden ms j
bevitelielem-tpusnl, a type= "search" kdot nem ismer bngszk az
ilyen mezket type= "text" tpusknt kezelik, vagyis semmi, de semmi
okunk arra, hogy ne kezdjk el mr ma hasznlni a type= "search" tpus
keresmezket.
9.
fejezet
rltrlapok l
225

Pomosabban, van egy rv, ami az <input type=" search"> hasz
nlata ellen szlhat: a Safari a keresmezkre nem alkalmazza a szok
sos CSS-stlusokat. ("Szoksos stlusok" alatt az olyan alapvet dolgo
kat rtem, mint a szegly, a httrszn, a httrkp, a kitlts, s gy
tovbb.) Viszont lekerektett sarkokat kapunk!
Sznvlasztk
A HTML5 az <input type= "color"> meztpust is meghatrozza, amely
egy szn kivlasztst teszi lehetv, s a vlasztott szn tizenhatos szmrend
szer (hexadecimlis) brzolst adja vissza. Mg egyetlen bngsz sem
tmogatja, ami szgyen, mert n mindig is imdtam a Mac OS sznvlaszt
jt. Taln egyszer.
s mg egy dolog...
Ebben a fejezetben a beviteli elemek j tpusait, illetve olyan j szolgltatso
kat mutattam be, mint az automatikus fkuszls rlapmezk, de mg nem
beszltem arrl, ami taln a legizgalmasabb rsze a HTML5-rlapoknak: az
automatikus bemenetellenrzsrl. Gondoljunk az e -mail cmek bevitelnek
szoksos problmjra: a webes rlapokra bert e-mail cmeket valsznleg
valamilyen gyfloldali JavaScript-kddal ellenrizzk, ezt pedig PHP,
Python vagy ms kiszolgloldali parancsnyelven rt ellenrzkd futtatsa
kveti a kiszolgl oldaln. Az e-mail cmekJavaScript-kddal trtn ellen
rzse kt nagy buktatt rejt:
A ltogatk kzl meglepen sokan nem engedlyezik a JavaScript

kdok futtatst (a Felhasznlk mintegy 10 szzalka).
Az ellenrzst rosszul fogjuk megvalstani.
Azt, hogy a megvalstsba hiba fog csszni, a legkomolyabban gondoltam.

Azt megllaptani, hogy egy tetszleges karakterlnc rvnyes e -mail cm-e,
226
l rltrlapok
9.
fejezet
hihetetlenl bonyolult (http://www. regular-expressions. info/email. htmf}. Minl

kzelebbrl vizsgljuk a krdst, annl bonyolultabb (http://www.ex-parrot.
comlpdw/Maii-RFC822-Address.htmf}. Mondtam mr, hogy nagyon, nagyon

bonyolult (http:l/haacked.com/archive/2007/08/21/i-knew-how-to-validate
an-email-address-until-i.aspx)? Nem lenne egyszerbb megsprolni a fejfjst,

s az egszet a bngszre bzni?
A 9.16. brn lthat kpernyfelvtel az Opera 10-ben kszlt, br a bemu
tatott szolgltats mr az Opera 9 ta jelen van a bngszben. A lerkdban
csak annyi kell a mkdshez, hogy a type jellemzt "email" rtke llrjuk
(lsd az "E-mail cmek" rszt kicsit korbban). Amikor egy Opera-felhasznl
egy olyan rlapot prbl benyjtani, amelyen <input
type="email">
mez tallhat, a bngsz automatikusan felajnlja az RFC-megfelel cm

ellenrzst, mg akkor is, ha a parancskclak futtatst letiltottk.
Az Opera emellett az <input type="url"> mezkbe rt webcmek s
az <input type="number"> szmmezk rvnyessgnek ellenrzst is
biztostja. A szmellenrzs sorn az Opera mg a min s max jellemzket
is figyelembe veszi, teht nem engedi, hogy a felhasznl benyjtsa az rla
pot, ha pldul tl nagy szmot rt be (lsd a 9.17. brt).
IEJtoobar
too bar is not a

legal e-mail
address
9.16. bra
E-mail mez ellenrzse az Operban
1111 rc;o-1
11 is too high. The

highest value you
can use is 1 O.
9.17. bra
Szmmez ellenrzse az Operban
Sajnos mg egyetlen ms bngsz sem tmogatja a HTML5-rlapellenrzst,

ezrt egy ideig mg parancskd alap megoldsokra kell szortkoznunk.
9. fejezet
rltrlapok l
227
Tovbbi olvasmnyok
Szabvnyok s lersok:
<input>
tpusok (http://bit.ly/akweH4)
Az <input placeholder> jellemz (http://bit.ly!caGLBN)

Az <input autofocus> jellemz (http://bit.ly!dbJFj4)
JavaScript-knyvtrak:
A Modernizr HTML5-szlel knyvtr (http:l!www.modernizr.com/)
10.
fejezet
"
"
"Elosztott , "bvthetsg
s ms divatos szavak
Ugorjunk fejest!
A HTML5-ben 100-nl is tbb elem tallhat (http://simon.html5.orglhtml5-
elements). Tallunk kzttk jelenrstkrz elemeket (lsd a 3. fejezetet),

mg msok csupn trolk az oldalon felhasznlhat API-khoz (lsd a 4. fe
jezetet). A HTML trtnete sorn (lsd az l. fejezetet) a szabvnygyi bi
zottsgok tagjai mindig is vitatkoztak, hogy mely elemek kerljenek bele a
nyelvbe. Legyen a HTML-ben <figure> elem? Vagy <person> elem? Eset
leg <rant>? Aztn meghozzk a dntst, megrjk a szabvnyokat, a szerzk
szereznek, a megvalsrk megvalstanak, a Web pedig tovbb terjeszkedik.
A HTML termszetesen nem tehet mindenki kedvre. Erre egyetlen szab
vny sem kpes. Egyes tletek leverik a lcet. A HTML5-ben pldul nincs
<person> elem. (St, <rant> elem sincs, hogy a fene vinn el!) Semmi nem
akadlyoz meg minket abban, hogy egy <person> elemet tegynk egy we
boldalra, csak ppen nem szmt majd rvnyesnek, a mkdse nem lesz
egysges a klnbz bngszkben (lsd a "Hossz kitr arrl, hogy mi
km kezelik a bngszk az ismeretlen elemeket" cm rszt a 3. fejezetben),
s tkzhet a jvbeli HTML-szabvnyokkal, ha azokban mr esetleg szere
peini fog ez az elem.
Ha viszont a sajt elemek ltrehozsa nem megolds, mit tehet egy a jelen
tstkrz kdra odafigyel webfejleszt? A HTML korbbi vltozatainak
bvtsre szmos ksrletet tettek. A legnpszerbbnek a mikroformtumok
(http://microformats.org/) alkalmazsa bizonyult, amelyek a HTML4-ben

a class s rel jellemzkre tmaszkodnak. Egy msik megoldst knl az
RO Fa (http://www.w3. org!TR/rdfo-syntaxl), amelyet eredetileg az XHTML-ben
10.
fejezet
,.Elosztott", ,.bvthetsg"... l 229
val hasznlatra terveztek (lsd az l. fejezetben az Utsz" cm rszt), de

"
a HTML-re is tltetik.
Mind a mikroformtumoknak, mind az RDFa-nak megvannak a maga
elnyei s htrnyai, viszont gykeresen ms mdon prbljk elrni ugyan
azt a clt: a weboldalak olyan jelents elemekkel val bvtsr, amelyek
nem kpezik rszt a HTML nyelv magjnak. Ebben a fejezetben nem szeret
nk szenvedlyes vitr nyitni ezekrl a formtumokrl (ehhez tnyleg kellene
egy <r ant> elem!), ehelyett inkbb egy harmadik lehetsgre sszpontosta
nk, amely magnak a HTML5-nek is szerves rsze: a mikroadatokra.
Mik azok a mikroadatok?

A kvetkez mondatban minden egyes sz szmt, ezrt nagyon figyeljnk!

A mikroadatok hatkrrel elltott, klnbz sztrakbl szrmaz
nv-rtk prokkal egsztik ki a DOM szerkezett.
Mit jelent ez? A mikroadatok egyni sztrakra (custom vocabularies) pl

nek.
Az sszes HTML5-elem halmaza" pldul egy sztr. Ez a sztr ma

"
gban foglalja a szakaszokat s cikkeket jell elemeket (lsd a 3. fejezet j
"
jelentstkrz elemek a HTML5-ben" cm rszt), de a szemlyeket vagy
esemnyeket ler elemeker nem. Ha be szeretnnk mutatni egy szemlyt egy
weboldalon, sajt sztrat kell meghatroznunk. A mikroadatok ezt teszik

lehetv. Brki meghatrozhat mikroadat-sztrat, s annak segtsgvel hoz
zltha t, hogy egyni tulajdonsgokat gyazzon be a sajt weboldalaiba.
A kvetkez dolog, amit tudnunk kell a mikroadatokrl, hogy nv-rtk
prokbl llnak. Minden mikroadat-sztr nvvel rendelkez (nevestett) tu
lajdonsgok halmazr hatrozza meg. Egy Person ( Szemly") sztr megha
"
trozhat pldul olyan tulajdonsgokat, mint a name ( nv") vagy a photo
"
(,,fnykp"). Egy adott mikroadat-tulajdonsg begyazshoz a weboldal egy
adott pontjn meg kell adnunk a tulajdonsg nevt. Azt, hogy milyen mdon
230 J .,Elosztott", .,bvthetsg"...
10. fejezet
nyerhetjk ki a tulajdonsg rtkr, a mikroadatok szablyai hatrozzk meg,

attl fggen, hogy hol vezetjk be a tulajdonsg nevt. (Errl a kvetkez
rszben bvebben is szt ejtnk.)
A nevestett tulajdonsgok mellett a mikroadatok erteljesen tmaszkod
nak a "hatkrkre" is. A mikroadatok hatkrt gy kpzelhetjk el a leg
egyszerbben, ha a DOM elemei kztti termszetes szl-gyermek kapcso
latokra gondolunk. A <html> elem (lsd a 3. fejezet "A gykrelem" cm
rszt) ltalban kt gyermekelemet tartalmaz: a <head> (lsd "A <head>
elem" cn rszt a 3. fejezetben) s a <body> elemet. A <body> elemnek
jellemzen tbb gyermeke is van, amelyek mindegyiknek sajt gyermekei
lehetnek. Egy oldalunk pldul tartalmazhat egy <hl> elemet egy <hgroup>
elemen bell, amely egy <header> elemben tallhat (lsd a "Cmsorok"
cm rszt a 3. fejezetben), az pedig a <body> elemben. Ehhez hasonlan,
egy adattblzat <td> elemeket tartalmazhat <tr> elemeken bell, amelyek
pedig egy <table> elemben helyezkednek el (a <body> elemen bell). A
mikroadatok magnak a DOM-nak a hierarchikus szerkezett hasznosrjk
jra, hogy azt mondhassk: "minden tulajdonsg, ami ezen az elemen bell
tallhat, ebbl a sztrbl szrmazik ". Ez lehetv teszi, hogy ugyanazon az
oldalon tbb mikroadat-sztrat is hasznlhassunk. A mikroadat-sztrakat
akr ms sztrakba is gyazhatjuk, az egsz lncban a DOM termszetes
felptst jrahasznostva. (Az egymsba gyazott sztrakra a fejezet sorn
tbb pldt is lthatunk majd.)
Mr rintettem a DOM krdst, de rdemes alaposabban kifejteni.
A mikroadatok clja az, hogy kiegszt jelentssei lssk el azokat az adato
kat, amelyek mr amgy is lthatk a weboldalon. A mikroadatokat teht
nem nll adatformtumnak szntk, hanem a HTML kiegsztsnek.
Ahogy a kvetkez rszben ltni fogjuk, a mikroadatok akkor mkdnek a
legjobban, ha egybknt helyesen hasznljuk a HTML-t, de a HTML sz
trt nem talljuk elg kifejeznek. A mikroadatok a DOM-ban mr sze
repl adatok jelentsnek finomhangolsra alkalmazhatk kivlan. Ha az
adatok, amelyeknek a jelentst krl szetetnnk rni, nem szerepeinek
a DOM-ban, clszer megvizsglnunk, hogy valban a mikroadatok je
lentik-e a megoldst.
Most mr jobban rtjk Lerkd professzor fenti kijelentst? Remlem,
igen. Akkor nzzk meg, hogyan is mkdik mindez a gyakorlatban!
10.
fejezet
"
"
"Elosztott , "bvthetsg .
.
231
A mikroadatok adatmodellje
Sajt mikroadat-sztrat meghatrozni knny. Elszr is egy nvtrre van
szksgnk, ami csupn egy URL. A nvtr URL-je mutathat pldul egy
mkd weboldalra, br ez szigoran vve nem ktelez. Tegyk fel, hogy
egy olyan mikroadat-sztrat szeretnnk meghatrozni, amely egy szemlyt
r le. Ha a birtokunkban van a data-vocabulary.org tartomny, a mikroadat
sztrunk nvtereknt a http:l!data-vocabulary.org!Person cmet hasznlhat
juk. gy egyszeren ltrehozhatunk egy globlisan egyedi azonostt: csak ki
kell vlasztanunk egy URL-t egy olyan tartomnybl, amelyet mi irnytunk
Ebben a sztrban meg kell hatroznunk nhny nevestett tulajdonsgot.
Kezdjk hrom alaptulajdonsggal:
name (a felhasznl teljes neve)

photo (a felhasznl arckpre mutar hivatkozs)
url (egy a felhasznlhoz trstott webhelyre, pldul egy webnaplra

vagy Google-profilra mutat hivatkozs)
A fenti tulajdonsgok kzl kett URL, a harmadik pedig sima szveg. Teht
mindegyik egyszeren brzolhat lerkddal; ehhez mg nem kell sem
mikroadatokat, sem sztrakat hasznlnunk. Tegyk fel, hogy van egy pro
filoldalunk vagy egy "nvjegy" ( "about" ) oldalunk. Ezen a nevnk valszn
leg cmsorknt, pldul egy <hl> elemmel jellve szerepel. A fnykpnk

feltehetleg egy <img> elem, mivel azt szeretnnk, hogy msok lssk. Ezen
kvl a profilunkhoz trstott URL-ekbl mr nyilvn hiperhivatkozsokat
hoztunk ltre, hiszen azt szeretnnk, hogy a ltogatk rjuk kattintsanak.
A plda kedvrt ttelezzk fel, hogy a teljes profilt egy <section> elembe
burkoltuk, hogy elvlasszuk az oldaltartalom tbbi rsztl. gy:
<section>
<hl>Mark Pilgrim</hl>
<p><img sr c= "ht tp: l/www. example.com/photo.jpg" alt=" [me smiling] "></p>
<p><ahref="http://diveintomark.org/">weblog</a></p>
</section>
A mikroadatok adarmodelljt a nv-rtk prok jelentik. Egy mikroadat

tulajdonsg nevt (amilyen a pldnkban a name, a photo vagy az url)
mindig egy HTML-elemben adjuk meg, a neki megfelel tulajdonsgrtket
232 l ,.Elosztott", ,.bvthetsg"...
10.
fejezet
pedig az elem DOM-jbl olvassuk ki. A legtbb HTML-elem esetben a tu

lajdonsgrtk egyszeren az elem szvegtartalma. Mindazonltal - ahogy
a 10.1. tblzat is mutatja-ez all van nhny kivtel.
1 0.1. tblzat Honnan szrmazik a mikroadat-tulajdonsgok rtke?
e tt k
<meta>
contentiellemz
<audio>
src jellemz
<embed>
<iframe>
<img>
<source>
<video>
href jellemz
<a>
<are a>
<link>
<object>
datajellemz
<L ime>
datetimejellemz
Minden ms elem
Szve.9.es tartalom
"
"Mikroadatokat hozzadni egy oldalhoz csupn annyibl ll, hogy a mr
meglev HTML-elemeket kiegsztjk nhny jellemzveL Az els teendnk
minden esetben az, hogy egyitemtype jellemz hozzadsval bejelentjk,
hogy melyik mikroadat-sztrat hasznljuk. A msodik teendnk mindig
a sztr hatkrnek meghatrozsa egy itemscope jellemzveL Ebben a
pldban minden adat, aminek a jelentst le szeretnnk rni, egy <section>
elemben tallhat, ezrt az itemtype s itemscope jellemzket ebben
a <section> elemben adjuk meg:
<section itemscope itemtype="http: //data-vocabulary. org/Person">
A <section> elemen bell az els adat a nevnk, amelyet egy <hl> elem
burkol be. A <hl> elem nem ignyel semmilyen klnleges feldolgozst, vagyis
a 10.1. tblzat "Minden ms elem" szablya al tartozik, amelynl a mikroadat
tulajdonsg rtke egyszeren az elem szvegtartalma (a dolog ugyanilyen jl
mkdik, ha a nevnket egy <p>, <div> vagy <span> elembe burkoljuk):
<hl
itemprop="name">Mark
10. fejezet
Pilgrim</hl>
"Elosztott", "bvthetsg"...
l 233
Ez magyarul annyit tesz, hogy "me a http://data-vocabulary.org/

Person
sztr name tulajdonsga. A tulajdonsg rtke Mark Pilgrim."
A kvetkez a
photo tulajdonsg, amelynek elvileg egy URL-nek kell

"
lennie. A 10.1. tblzat szerint az <img> elemek "rtkr az src jellemz
jkben talljuk. Nzzenek oda, hiszen a profilfotnk URL-je mr egy <img

jellemzben tallhat! Mindssze annyit kell tennnk, hogy bejelent
src>
jk, hogy az <img> elem a photo tulajdonsg:

<p><img
itemprop="photo"
src="http: l /www. example. com/photo. jpg"

alt=" [mosolygok) "></p>

Person
sztr photo tulajdonsga. A tulajdonsg rtke http://www.
example.com/ photo.jpg.".
Vgl, az url tulajdonsg szintn egy URL. A 10.1. tblzat szerm az

"
elemek "rtkr a href jellemzjkben talljuk. Ez ismt csak tkle
<a>
tesen illeszkedik a meglev kdunkhoz, hiszen csak annyit kell tennnk,

hogy azt mondjuk, hogy a meglev <a> elem az url tulajdonsg:
<a
itemprop="url" href= "http: l/diveintomark. org/ ">dive into mark</a>

Person
sztr url tulajdonsga. A tulajdonsg rtke http://diveinto
mark.org/."
Termszetesen ha a lerkdunk nmileg klnbzik, az nem jelent gon

dot. Mikroadat-tulajdonsgokat s -rtkeket tetszleges HTML-kdhoz
hozzadhatunk, mg az igazn durva, XX. szzadi, tblzatokkal formzott,
"
", istenem, mirt is vllaltam el a karbantartst? shajt kivlt HTML
oldalakhoz is. n ugyan nem ajnlom, hogy az albbihoz hasonl kdot
hasznljunk, de attl mg mindig meglehetsen elterjedt - s nyugodtan ki
egszthetjk mikroadatokkal:
<TABLE>
<TR><TD>Name<TD>Mark Pilgrim
<TR><TD>Link<TD>
<A href=# onclick=goExternalLink () >http: l /diveintomark. org/</A>
</TABLE>
name
tulajdonsg megjellshez csak annyit kell tennnk, hogy hozz
adunk egy itemprop jellemzt a nevet tartalmaz tblzatcellhoz. A tb234
l "Elosztott", bvthetsg"...
"
10. fejezet
lzatcellkra nem vonatkoznak klnleges szablyok, ezrt a mikroadatok az

alaprtelmezett rtket kapjk, teht a mikroadat rtke az elem szvegtar
talma lesz:
<TR><TD>Name<TD itemprop="name">Mark Pilgrim
Az
url
tulajdonsg hozzadsa bonyolulrabbnak ltszik, a kdunk ugyanis
nem megfelelen hasznlja az

a
href
<a>
jellemzben helyezn el, a
tartalmaz, inkbb az
onclick
elemet: ahelyett, hogy a hivatkozs cljt

href
jellemzben semmi hasznosat nem
jellemzbe tett JavaScript-kd segtsgvel
hv meg egy fggvnyt (ami itt nem szerepel), amely kinyeri az URL-t, s
a benne lev cmre ugrik. ", a francba, ne mr!" bnuszpontokrt tegynk
gy, mintha a fggvny a hivatkozott oldalt radsul egy apr, grdtsvok
nlkli elugr ablakban nyitn meg. Ugye milyen vicces volt az Internet
a mlt szzadban?
Ettl fggetlenl azrt mikroadat-rulajdonsgg alakthatjuk a kdunkat,
csak egy kicsit kreatvnak kell lennnk. Az
kizrhatjuk A hivatkozs clja nem a
<a>
href
elem kzvetlen hasznlatt
jellemzben tallhat, s nincs
r md, hogy fellbrljuk a szablyt, amely kimondja, hogy egy <a> elem
"
ben a mikroadat-tulajdonsg rtket a href jellemzben kell keresni". Vi
szont azt megtehetjk, hogy egy burkolelembe gyazzuk az egsz katyvaszt,
s ennek a segtsgvel adjuk meg az
url
mikroadat-tulajdonsgot:
<TABLE itemscope itemtype= "http: lldata-vocabulary. orgiPerson ">

<TR><TD>Name<TD>Mark Pilgrim
<TR><TD>Link<TD>
<span itemprop="url">
<A href=# onclick=goExternalLink () >http:
l ldi veintomark. orgi<IA>
<lspan>
<ITABLE>
Mivel a
<span>
elem nem ignyel semmilyen klnleges feldolgozst, az
alaprtelmezett szably vonatkozik r, amely szerint a mikroadat-tulajdonsg

"
rtke a szvegtartalom". A szvegtartalom" ugyanakkor nem az adott ele
"
"
men bell tallhat sszes lerkdot" jelenti (mint mondjuk az innerHTML
DOM-tulajdonsg esetben), hanem csupn annyit tesz:
asszonyom". Esetnkben a
tartalma a
<span>
elemen bell tallhat
http://diveintomark.org/
"
csak a szveget,
<a>
elem szveg
cm.
sszefoglalva: mikroadat-tulajdonsgokat brmilyen lerkdhoz hozz

adhatunk, de knnyebbnek fogjuk tallni, ha helyesen hasznljuk a HTML-r.
10.
fejezet
.,Elosztott", .,bvthetsg"... l
235
Szemlyek felcmkzse
Az elz rszben szerepl bevezet pldk nem voltak teljesen lgbl kapot
tak: valban ltezik mikroadat-szrr a szemlyekhez kapcsold adatok meg
jellsre, s valban ilyen egyszer a hasznlata. Nzzk meg kzelebbrl!
Mikroadatokat a legknnyebben a "nvjegyoldalunkon" ("About") gyaz
harunk be a szemlyes webhelynkbe. Ugye van "About" oldalunk? Ha nincs,
kvessk azt, ahogy a
http:!ldiveintohtml5.orglexampleslperson.html
cmen
tallhat mintaoldalt bvtettem jelentstkrz elemekkeL A vgered

mny a
http://diveintohtml5.orglexampleslperson-plus-microdata.html
cmen
tekinthet meg.
Elszr vessnk egy pillantst a nyers lerkdra, brmilyen mikroadat
rulajdonsg hozzadsa eltt:
<section>
<img width= "204" height= "250"
src="http://diveintohtml 5.org/examples/2000_05_mark.jpg "
alt=" [Mark Pilgrim, circa 2000l ">
<hl>Contact Information</hl>
<dl>
<dt>Name</dt>
<dd>Mark Pilgrim</dd>
<dt>Position</dt>
<dd>Developer advocate for Google, Inc. <Idd>
<dt>Mailing address</dt>
<dd>
1 00Main Street<br>
Anytown, PA 19999<br>
USA
</dd>
</dl>
<hl>My Digital Footprints</hl>
<ul>
<li><a href= "http:
<li><a href= "http:
l /diveintomark. org/ ">weblog</a></li>

l /www.google.com/profiles/pilgrim ">Google
prof ile</
a></li>
<li><a href= "http: l /www.reddit. com/user/MarkPilgrim ">Reddit. com
profile</a></li>
<li><a href= "http: l /www. twitter. com/diveintomark ">Twitter</a></li>
</ul>
</section>
236
l "Elosztott", "bvthetsg"...
10.
fejezet
Az els teendnk minden esetben az, hogy bejelentjk, hogy milyen sztrat
hasznlunk, s megadjuk a hozzadni kvnt tulajdonsgok hatkrt. Ezt
gy tehetjk meg, hogy hozzadjuk az itemtype s itemsco pe jellemz
ket a tnyleges adatokat tartalmaz elemeket magba foglal legkls elem
hez. Ez a mi esetnkben egy <section> elem:
<section i temscope itemtype="http: l /data-vocabulary. org/Person">
Az itt vgrehajtott vltoztatsokat az Interneten is nyomon k

vethetjk. Eltte: http:!ldiveintohtml5.orglexampleslperson.html. Utna:
http://diveintohtmi5.orglexampleslperson-plus-microdata. html.
Most mr nekillhatunk meghatrozni a http://data-vocabulary.org/
Person sztr mikroadat-tulajdonsgait. De mik is ezek a tulajdonsgok?
Nos, a tulajdonsgok listjt trtnetesen megtekinrhetjk, ha elltogarunk a

http:!ldata-vocabulary.org/Person cmre. A mikroadatok szabvnylersa ezt nem
kveteli meg, de n felttlenl "ajnlott eljrsnak" tekintem. Vgtre is, ha azt
szeretnnk, hogy a fejlesztk valban hasznljk is a mikroadat-sztrunkat,
akkor valahogy dokumentlnunk kell azt. s hol lenne jobb helye ennek a
dokumentcinak, mint magnak a sztrnak az URL-cmn? A Person (Sze
mly) sztr tulajdonsgait a 10.2. tblzatban lthatjuk.
1 0.2. tblzat A Person sztr
Lers
name
Nv
nickname
Becenv
photo
Kphivatkozs
title
A szemly beosztsa (pldul.gazdasgi igazgat")
ro le
A szemly munkakre (pldul.knyvel")
url
Weboldalra, pldul az illet honlapjra mutat hivatkozs
af fi lia tion
Annak a szervezetnek!cgnek a neve, ahov az ille t tartozik (pldul alkalmazottknt)
friend
Egy trsas kapcsolatot azonost az adott s egy msik szemly kztt (bart)
contact
Egy trsas kapcsolatot azonost az adott s egy msik szemly kztt (zletfl)
acquaintance
Egy trsas kapcsolatot azonost az adott s egy msik szemly kztt (ismers)
address
Az illet cme (olyan rsztulajdonsgai lehetnek, mint a street-address, a loea

lity,
a reg ion, a postal-code s a country-name, vagyis utca, helysg,
krzet!llam/megye, postai irnytszm s orszg)
10. fejezet
"Elosztott", bvthetsg"...
"
237
A szemlyes adatoknak ezen a mintaoldaln elsknt egy kp szerepel rlam,

amit termszetesen egy
lentsem, hogy ez az
<img>
<img>
elemmel cmkztem fel. Ahhoz, hogy beje
elem az n profilkpem, csak annyit kellett ten
nem, hogy hozzadtam az itemprop= "photo" jellemzt:

<img itemprop="photo" width= "204" height="250"
src="http:/ /diveintohtml5.org/examples/2000_05_mark.jpg"
alt=" [Mark Pilgrim, circa 2000]
">
Hol talljuk a mikroadat-tulajdonsg rtkr? Mr ott van, az src jellemz

ben. A 10.1. tblzatbl emlkezhetnk r, hogy az <img> elemek "rtkr"
az src jellemzjk adja meg. Minden <img> elemnek van src (forrs) jel
lemzje - klnben a kpet nem lehetne megjelenteni -, s a forrs mindig
egy URL. Ltjuk? Ha a HTML-t helyesen hasznljuk, a mikroadatok hasz
nlata is egyszer.
Ezenkvl az emltett
lon, hanem annak a
itemscope
<img>
<section>
elem nem nmagban rvlkodik az olda

elemnek a gyermeke, amelyet az imnt az
jellemzvel vezettnk be. A mikroadatok az oldal elemeinek
szl-gyermek kapcsolatait hasznostjk jra a mikroadat-tulajdonsgok

hatkrnek meghatrozshoz. Htkznapi nyelven, ezt mondjuk: "Ez a
<section> elem egy szemlye brzol. Minden mikroadat-tulajdonsg,
amelyet a <section> elem gyermekeiben tallunk, ennek a szemlynek egy
egy tulajdonsga.". Ha az segt, a <section> elemre gondolhatunk gy is,
mint egy mondat alanyra. Az
jellemz a mondat lltmnya

valami olyasmi, mint az albbi pldban a "lthat" - a mondat trgya pedig
a mikroadat-tulajdonsg rtke:
itemprop
Ez a szemly [kzvetlenl a <sect ion
item s cope itemtype="... ">-bl]
ezen a kpen lthat: [kzvetlenl az <img
itemprop="photo">-bl]
http: l/diveintohtml5 .org/e x a mple s/2000
az
<img
src>
05
m ark .jp g
[kzvetve,
jellemzbl]
Az alanye csak egyszer kell meghatrozni, az itemscope s itemtype jel

lemzket a legkls
itemprop= "photo"
<section>
jellemzt az
elemhez adva, az lltmnyt pedig az

<img>
elemhez adva hatrozzuk meg.
A mondat trgya nem ignyel semmilyen klnleges lerkdot, mert a 10.1.

tblzat azt mondja, hogy egy
<img>
elem tulajdonsgrtke az elem
src
jellemzje.
238 l "Elosztott", "bvthetsg"...
10. fejezet
A kdban tovbb haladva egy <hl> cmsort lthatunk, valamint egy <dl>
lista elejt. Sem a <hl>, sem a <dl> elemet nem szksges mikroadatokkal
kiegsztennk. Nem minden HTML-rszlemek kell mikroadat-tulajdonsg
nak lennie. A mikroadatok lnyegr maguk a tulajdonsgok jelentik, nem az
azokat krlvev Ierkclok vagy cmsorok. Az emltett <hl> elem nem tu
"
lajdonsg, csupn egy cmsor, s ugyangy a "Name <dt> elem is csak egy
szvegcmke:
<hl>Contactinformation</hl>
<dl>
<dt>Name</dt>
<dd>Mark Pilgrim</dd>
Hol van teht az igazi informci? A <dd> elemben, teht ide kell tennnk
az itemprop jellemzt. Melyik tulajdonsgrl van sz? A name tulajdon
sgrL Mi ennek a tulajdonsgnak az rtke? A <dd> elemben tallhat sz
veg. Kell kln jellnnk valamit? A 10.1. tblzat azt mondja, hogy nem:
a <dd> elemek nem ignyelnek klnleges feldolgozst, teht a tulajdonsg
rtke egyszeren az elemben tallhat szveg:
<dd
itemprop="name">Mark Pilgrim</dd>
Ezt hogyan is fogalmazhatjuk meg htkznapi nyelven? "Ennek a szemlynek

"
a neve Mark Pilgrim. Akkor j. Tovbb.
A kvetkez kt tulajdonsg kicsit nehezebb. A kd ez volt a mikroadatok
hozzadsa eltt:
<dt>Position</dt>
<dd>Developer advocate for Google, Inc.</dd>
Ha megnzzk a Person sztr meghatrozst, a "Developer advocate for

"
Google, Inc. szveg valjban kt tulajdonsgbl ll: a beosztsbl (title:
"
"
"Developer advocate ) s a szervezet nevbl (affiliation: "Google, Inc. ).
Hogyan fejezhetjk ki ezt mikroadatokkal? A vlasz rviden: sehogy. A mikro
adatok nem adnak mdot arra, hogy szvegfolyamokat nll tulajdons
gokra bomsunk fel. Nem mondhatjuk azt, hogy " ennek a szvegnek az els
18 karaktere egy mikroadat-tulajdonsg, az utols 12 karaktere pedig egy
"
msik mikroadat-tulajdonsg .
Mindazonltal nincs minden veszve. Tegyk fel, hogy a "Developer

"
szveget ms bettpussal szeretnnk formzni, mint a "Google,
advocate
10. fejezet
"
"
"Elosztott , "bvthetsg ... l 239
Inc." szvegrszt. Erre a CSS sem kpes. Mit tehetnk ht? Elszr olyan
lelemekbe kell burkolnunk az egyes szvegrszeket, mint a <span>, majd
klnbz CSS-stlusokat kell alkalmaznunk az egyes <span> elemekre.
Ez a mdszer a mikroadatoknl is mkdik. A pldnkban ktfle infor
mcit kell kezelnnk: a title s az affiliation tulajdonsgokat. Ha
mindkettt egy-egy <span> lelembe burkoljuk, megadhatjuk, hogy az egyes
<span>
elemek nll mikroadat-tulajdonsgok:
<dt>Position</dt>
<dd><span itemprop="title">Developer advocate</span> for
<span itemprop="affiliation">Google, Inc. <span>< l dd>
Csirib-csirib! A fenti kd magyarul annyit tesz, hogy Ennek a szemlynek a

"
beosztsa Developer advocate". Ez a szemly a Google, Inc." alkalmazsban
"
"
ll." Kt mondat, kt mikroadat-tulajdonsg. Egy kicsivel tbb kd, de megri.
Ugyanezt a megoldst a postai cmeknl is alkalmazhatjuk. A Person sz
tr meghatroz egy address (cm) tulajdonsgot, amely maga is egy mikro
adat. Ez azt jelenti, hogy a cmnek is megvan a sajt sztra (http:!ldata-voca
bulary.org!Address), s sajt tulajdonsgokat- street-address,

region, postal-code
local ity,
s country-name- hatroz meg.
Ha programozk vagyunk, valsznleg ismerjk az objektumok s azok

tulajdonsgainak pont jellssel" trtn meghatrozst. Az objektumok
"
kztti kapcsolatokra gondoljunk gy:
Person
Person.address
Person.address.street-address
Person.address.locality
Person.address.region
Person.address.postal-code
Person.address.country-name
Ebben a pldban az utct s a hzszmot (street-address) egyetlen <dd>

elem tartalmazza. (Mg egyszer: a <dt> elem csak egy cmke, gy nem jtszik
szerepet a kd jelentsnek mikroadatokkal trtn bvtsben.) Az address
tulajdonsg megadsa egyszer: csak hozz kell adnunk egy itemprop jellem
zt a <dd> elemhez:
<dd itemprop="address">
10. fejezet
Ne feledjk azonban, hogy maga az address tulajdonsg is egy mikroadat.

Ez azt jelenti, hogy az
itemscope s itemtype jellemzket is hozz kell
adnunk:
<dd itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
Mindezt mr korbban is lttuk, de csak a legfels szint elemeknL Egy
<section> elem hatrozza meg az itemscope s itemtype jellemzket,

<section> elemben tallhat minden mikroadat-tulajdonsgokat meg
s a
"
hatroz elem a megadott sztr "hatkrbe tartozik. Ez az els eset azon
ban, hogy egymsba gyazott hatkrket ltunk: egy j elemtpust s -hatkrt
(itemscope s itemtype) hatrozunk meg (a <dd> elemre) egy meglev

elemtpuson s -hatkrn (a <section> elemn) bell. Az egymsba gya
zott hatkrk pontosan ugyangy mkdnek, mint a HTML DOM. A <dd>
elem mindegyik gyermekeleme a <dd> elemnl megadott sztr hatkrbe
tartozik. Amint a <dd> elemet lezrjuk a hozz tartoz </dd> cmkvel,
visszatrnk a szlelem (esetnkben a <section>) sztrhoz.
Az Address (Cm) sztr tulajdonsgai ugyanazt a problmt vetik fel,
mint amit a title s a ff iliation tulajdonsgok: csak egy hossz szveg
folyamunk van, amit viszont tbb nll mikroadat-tulajdonsgra szeretnnk
felbontani. A megolds is ugyanaz: az egyes informcikat egy-egy
ldembe burkoljuk, majd ezekben a
<span>
<span> elemekben egyesvel bevezet
jk a mikroadat-tulajdonsgokat:
<dd i temprop="address" it emseope
<span itemprop="street-adclress">lOO Main Street</span><br>
<span itemprop="locality" >Anytown</span>,
<span itemprop="region"> PA< l span>
<span itemprop="postal-code" >19999</span>
<span itemprop=" country-name">USA</ span>
</dd>
</dl>
Ez magyarul annyit tesz, hogy "Ennek a szemlynek van egy levelezsi cme.
"
A levelezsi cmben az utca s a hzszm "100 Main Street , a helysg
"
" Anytown , az llam "PA'', a postai irnytszm "19999'', az orszgnv pedig
"USA''. Egyszerbb mr nem is lehetne.
10.
fejezet
"Elosztott", "bvthetsg"... l
241

Krds: A fenti cmformdtum csak az Egyeslt llamokra vonatkozik?
Vlasz: Nem. Az Address sztr tulajdonsgai elg ltalnosak ahhoz,
hogy a legtbb cmer kpesek legyenek lerni a vilgon. Nem minden
cmben lesz rtke minden egyes tulajdonsgnak, de ezzel nincs gond.
Egyes cmek megkvetelhetik, hogy egyetlen tulajdonsgba egynl tbb
"sort" gymszljnk, de ez is rendben van. Ha a levelezsi cmben
pldul utca, hzszm s laksszm is tallhat, mindhrom a street
address rsztulajdonsgba kerl:
<p
i temprop=" address" itemseope
<span itemprop="street -address">
100Main Street
Suite 415
</span>
</p>
A minta-nvjegyoldalunkon mg egy dolog tallhat: egy URL-lista. A Person

sztr erre is tartalmaz egy tulajdonsgot: az url-t. Az url tulajdonsg
brmi lehetne (persze egy URL-nek kell lennie, de ezt valsznleg kitall
tuk)- gy rtem, az url tulajdonsg meghatrozsa nagyon tg. A tulajdon
sg rtke brmilyen fajta URL lehet, amit egy szemlyhez trsthatunk: egy
webnapl vagy egy fotgalria cme, vagy egy profil egy msik webhelyen,
pldul a Facebookon vagy a Twitteren.
A msik lnyeges dolog, amit meg kell jegyeznnk, hogy egyeden szemlynek
tbb url tulajdonsga is lehet. Elvileg brmelyik tulajdonsg szerepelhet tbb
szr, de ennek eddig nem hasznltuk ki az elnyeit. Lehet pldul kt photo
tulajdonsgunk, amelyek klnbz kpek URL-jre mutatnak. Itt ngy URL
cmer szeretnk felsorolni: a webnaplmt, a Google-profiloldalamt, a Reddit
felhasznli profilomt s a Twitter-fikomt. A HTML-ben ez egy hivatko
zslis ra: ngy <a> elem, amelyek egy-egy nll <li> elemben tallhatk.
Mikroadatknt mindegyik <a> elem egy itemprop="url" jellemzt kap:
<hl>My Digital Footprints</hl>
<ul>
<li><a href= "http:
l /diveintomark. org/"
itemprop="url">weblog</a></li>
<li><a href= "http:
242 l
l /www. google. com/profiles/pilgrim"
Elosztott", "bvthetsg"...
"
10. fejezet
itemprop="url">Google profile</a></li>
<li><a href; "http:
l /www. reddit.com/user/MarkPilgrim"
itemprop="url">Reddi t.com profile</a></li>

<li><ahref;"http://www.twitter.com/diveintomark"
itemprop="url">Twitter</a></li>
</ul>
A 10.1. tblzat szerint az <a> elemek klnleges feldolgozst ignyelnek. A

mikroadat-tulajdonsg rtke a href jellemz, nem a szvegtartalom. Az
egyes hivatkozsok szvegt a mikroadat-feldolgoz valjban figyelmen k
vl hagyja. A fenti kd teht magyarul annyit tesz, hogy "Ehhez a szemlyhez
kapcsoldik a http://diveintomark.org/ URL, valamint a http://www.google.
comlpro.fileslpilgrim/ URL, valamint a http:llwww.reddit.com/user/MarkPilgrim

URL, illetve a http://www.twitter.com/diveintomark URL.
Bemutatkozik a Google Rich Snippets

Egy pillanatra szeretnnk visszalpni egy kicsit, s feltenni a krdst: "Mirt
is csinljuk ezt?". Csak azrt adunk jelentstkrz elemeket a kdhoz, hogy
legyenek benne ilyen elemek? Nem szeretnm, ha brki flrertene: mint
minden webfejleszt, n is szeretek cscsos zrjelekkel jtszani. De mirt
pont mikroadarokkal? Mirt fontos ez?
Kt f alkalmazstpus ltezik, amely HTML-t s gy HTMLS-mikro
adatokat is fogyaszt:
a webbngszk s
a keresmotorok.
A bngszk szmra a HTMLS klnfle DOM-fggvnyeket hatroz meg

a mikroadatok, tulajdonsgok s tulajdonsgrtkek kinyersre a webolda
lakbL Jelen knyv rsa idejn azonban mg egyetlen bngsz sem tmo
gatja ezt az API-t. Egyetlen egy sem. gy ez egyfajta zskutca, legalbbis
amg a bngszk fel nem zrkznak, s meg nem valstjk az gyfloldali
API-t.
A HTML-fogyasztk msik nagy csoportjt a keresmororok jelentik.
Mit tehet egy keres egy szemlyhez kapcsold mikroadat-tulajdonsgokkal?
Kpzeljk magunk el ezt: a keres ahelyett, hogy egyszeren az oldal cmt
s egy rszletet jelentene meg az oldal szvegbl, begyaz nhnyat ezek
kzl a strukturlt informcik kzl is: a szemly reljes nevt, beosztst,
10. fejezet
"
"
"Elosztott , "bvthetsg . . .
\ 243
munklrarjr, cmr, esetleg a profilforja miniarrjr. Ez felkelten az r

dekldsnket? Az enymet biztosan.
A Google a Rich Snippers programja rszekm tmogatja a mikroadarokar
(http:llwww.google.com/supportlwebmasterslbin/answers.py?hl=en&answer = 99170).
Amikor a Google webes kerespkja feldolgozza az oldalunkar, s olyan
mikroadar-rulajdonsgokar tall, amelyek megfelelnek a ht t p: l l data
vocabulary. org /Person szrrnak, kigyjri ezeker a tulajdonsgokat, s

elrakrrozza azokar az oldal tbbi adarval egytt. A Google mg egy olyan
hasznos eszkzt is biztost, amely megmutatja, hogy a Google hogyan "ltja"
a mikroadar-rulajdonsgainkar. Ha kiprbljuk a mikroadarokkal elltorr
minra-nvjegyoldalunkon (http:lldiveintohtml5. o rglexampleslper so n-plus
mic rodata.htmf), ezt a kimeneter kapjuk:

Item
Type: http://data-vocabulary.org/person
photohttp:
l /dlvelntohtml5 .org/examples/2000_05_mark. jpg
nameMark Pilgrim
title Developer advocate
affiliation
Google, Inc.
address Item (
l )
l /diveintomark.org/
urlhttp: l /www. google.com/profiles/pilgrim
urlhttp: l /www.reddit.com/user/MarkPilgrim
urlhttp: l /www. twitter. com/diveintemark
urlhttp:
Item l
Type: http://data-vocabulary.org/address
street-address 100Main Street
locality
Anytown
regionPA
postal-code
19999
country-nameUSA
Orr van minden: a photo tulajdonsg az <img src> jellemzbl, mind a

ngy URL az <a href> jellemzk lisrjbl, st mg a cmobjektum (minr
"Irem l") s annak mind az t rsztulajdonsga is.
Hogyan hasznostja a Google ezeker az informcikat? Arrl fgg. Nin
csenek kbe vserr szablyok arra nzve, hogy miknr kell megjelenteni
a mikroadat-rulajdonsgokat, hogy mely tulajdonsgokar kell megjelenteni,
vagy hogy egyltaln meg kell-e jelenteni ket. Ha valaki a "Mark Pilgrim "
nevet keresi, s a Google arra a kvetkeztetsre jut, hogy a nvjegyoldalunk
nak szerepelnie kell az eredmnyek kztt, s a Google gy dnt, hogy az
10.
fejezet
oldalon tallt mikroadat-tulajdonsgokat rdemes megjelenteni, akkor a ke

ress eredmnye valahogy gy fog kinzni, mint a 10.1. brn.
About Mark Pilgrim
Anytown PA- Developer advocate- Google, Inc.
Excerpt from the page will show up here.
diveintohtml5.org/examples/person-plus-microdata.html - Cached - Similar pages
l O. l. bra
Plda egy mikroadatokkal kiegsztett szemlyes oldal keressnek eredmnyre
Az els sor- About Mark Pilgrim"- igazbl az oldal cme, amit a <title>
"
elem ad meg. Ez nem tl izgalmas - a Google minden oldal cmt megjele
nti. A msodik sor azonban mr tele van olyan informcikkal, amelyek
kzvetlenl az oldalhoz fztt mikroadatokbl szrmaznak. Az Anytown
"
PA" az oldalon a levelezsi cm rszeknt szerepelt, amelyet a ht tp: l ldata
vocabulary. orgiAddress sztr segtsgvel jelltnk meg, a
Developer
"
Google, Inc." pedig a http:lldata-vocabulary.orgl
"
Person sztr kt tulajdonsga (title s aff iliation) .
advocate" s a
Ez az, ami igazn lenygz: nem kell tekintlyes, a keresprogramok

g yrtival egyedi szerzdsben ll cgnek lennnk ahhoz, hogy testreszabjuk
a keressi eredmnyeket- elg rsznnunk tz percer, s hozzadnunk nhny
HTML-jellemzt az egybkm is kzzrenni kvnt adarokhoz.

Krds: Mindent gy csinltam, ahogy itt szerepelt, a Google-ben mgis
ugyanazt az eredmnyoldalt kaptam keresskor, mint korbban. Mit csi
nlok rosszul?
Vlasz: "A Google nem garantlja az adott oldalakon vagy webhelyeken
szerepl Ierkclok felhasznlst a keressi eredmnyekben" (http:/1
www.google.com/supportlwebmasterslbinlanswer.py?hl=en&answer=99170).
Mindazonltal az, hogy a Google nem hasznlja fel az oldalunkhoz f
ztt mikroadarokat, mg nem jelenti azt, hogy ms keresk sem fog
jk. A HTML5 tbbi rszhez hasonlan a mikroadatok is nylt szab
vnynak szmtanak, amelyet brki megvalsrhar. A mi feladatunk az,
hogy annyi adatot adjunk meg, amennyit csak tudunk - a vilg pedig
eldnrheti, hogy mit kezd velk. Csak meg ne lepdjnk!
10. fejezet
"
"
"Elosztott , "bvthetsg . . .
l 245
Szervezetek felcmkzse
A mikroadatok nem korltozdnak egyetlen sztrra. Egy "nvjegyoldal"
hasznos, de valsznleg csak eggyel rendelkeznk belle. T bbet szeretnnk?
Tanuljuk meg, hogy cmkzhetnk fel cgeket s szervezeteket!
Ksztettem egy zleti mintaoldalt (http :lldiveintohtml5.orglexamp leslorga
nization.html); nzzk is meg az eredeti HTML-kdot, mikroadatok nlkl:
<article>
<hl>Google, Inc.</hl>
<p>
1600 Amphitheatre Parkway<br>
Mountain View, CA 94043<br>
USA
</p>
<p>650-253-0000</p>
<p><a href="http://www.google.com/">Google.com</a></p>
</article>
vethetjk. Eltte: http://diveintohtml5.orglexamples/organization.html.

Utn a: http:/1diveintohtm/5.orglexamples/organization-p lus -microdata.
html.
A kd bjosan rvid. A szervezettel kapcsolatos sszes informcit az <article>
elem tartalmazza, ezrt kezdjk itt:
<article itemscope i temtype= "http:
l /data-vocabulary.org/Organization ">
Ahogy a szemlyek felcmkzsnl, itt is hozz kell adnunk az itemtype

s itemscope jellemzket a legkls elemhez, ami a mi esetnkben egy
<article>
elem. Az itemtype jellemz a hasznlt mikroadat-sztrat
(http://data-vocabulary.org/Organization)
scope
adja meg, mg az itern
jellemz azt, hogy a gyermekelemekre belltott minden t ulajdon
sg ebbl a sztrbl szrmazik.

De mi van az Organization (Szervezet) sztrban? Nos, ez a sztr nagyon
egyszer, st egy rsznek mr ismersnek kell lennie. A lnyeges tulajdons
gokat a 10.3. tblzatban lthatjuk.
246
10.
fejezet
name
A szervezet neve (pldul.,lnitech")
url
A szervezet webhelyre mutat hivatkozs
address
A szervezet cme. Olyan rsztulajdonsgokat tartalmazhat, mint a
str eet-
address, a lo eality, a region, a postal-code s a country-name.

tel
A szervezet telefonszma
g eo
A cm fldrajzi koordinti. Mindig kt rsztulajdonsgot-lati tude s
longitude, vagyis szlessgi s hosszsgi fok- tartalmaz.
A legkls <ar ticle> elemen bell az els kdcmke egy <hl> elem. Ez a
<hl> elem egy cg nevt tartalmazza, ezrt kzvetlenl egy itemprop= " name"
jellemzvel ltjuk el:

<hl
itemprop="name">Google,
Inc. </hl>
A 10.1. tblzat szerint a <hl> elemek nem ignyelnek semmilyen klnleges

feldolgozst. A mikroadat-tulajdonsg rtke egyszeren a <hl> elem sz
vegtartalma. Ez magyarul annyit tesz, hogy az imnt ennyit mondtunk:
"A szervezet neve Google, Inc."
A kvetkez elem a cm. Egy szervezet cmt pontosan ugyangy jellhet
jk meg, mint egy szemlyr. Elszr egy itemprop="address" jellemzt
adunk a cm legkls elemhez (ami ebben az esetben egy <p> elem). Ez jelzi,
hogy ez a szervezet address tulajdonsga. De mi a helyzet magnak a cm
nek a tulajdonsgaival? Ahhoz, hogy jelezzk, hogy ez egy olyan Address
elem, amelynek sajt tulajdonsgai vannak, meg kell hatroznunk az
item type s item scope jellemzket is:
itemprop="address" itemscope
<p
Vgl, minden informciegysget egy-egy <span> ldembe kell burkolnunk,

hogy hozzjuk adhassuk a megfelel mikroadar-tulajdonsgneveket (st reet
address, lo cality, region, po stal-co de s count ry-name) :
<p itemprop="address" itemscope
<span
10.
fejezet
itemprop="street-address"> 1600 Amphitheatre
Parkway</span><br>
,.Elosztott", bvthetsg"... l 247

"
<span itemprop="locality" >Mountain View</span>,

<span itemprop="region">CA</span>
<span itemprop="postal-code">94 0 43</span><br>
<span itemprop="country-name">USA</span>
</p>
Magyarul, az elbb ezt mondtuk: "Ennek a szervezernek van egy cme. Az

utca s hzszm 1600 Amphitheatre Parkway, a helysg Mountain View,
az llam CA, a postai irnytszm 94043, az orszgnv pedig USA".
Most a szervezet telefonszma kvetkezik. A telefonszmok kezelse hr
hedten nehz, s a telefonszmok formtuma orszgonknt klnbzik. (Ha
msik orszgba szerernnk telefonlni, mg rosszabb a helyzet.) A pldnk
ban Egyeslt llamokbeli telefonszm szerepel, az USA-n belli hvsra al
kalmas alakban:
<p itemprop="tel">650-253-0000</p>
(Ha esetleg nem vettk szre, kikerltnk az Address sztr hatkrbl,

amikor a <p> elemet lezrtuk, s visszatrtnk az Organization sztr tulaj
donsgainak meghatrozshoz.)
Ha tbb telefonszmot szerernnk felsorolni - mondjuk egyet az ameri
kai, egyet pedig a ms orszgbeli gyfelek szmra -, azt is megtehetjk.
Brmelyik mikroadat-tulajdonsg ismtldhet. Csak arra kell gyelnnk,
hogy mindegyik telefonszm a sajt HTML-elemben szerepeljen, a hozzjuk
fztt esetleges szvegcmkktl fggetlenl:
<p>
US customers: <span itemprop="tel">650-253-0000</span><br>
UK customers: <span itemprop="tel">OO +l*+ 6502530000</span>
</p>
A 10.1. tblzat szerint sem a <p>, sem a <span> elem nem ignyel klnle
ges feldolgozst. A tel mikroadat-tulajdonsg rtke egyszeren a szvegtar
talom. Az Organization mikroadat-sztr nem tesz ksrletet arra, hogy r
szeikre bontsa a telefonszmokat; az egsz tel tulajdonsg csupn szabad
formtum szveg. Ha a krzetszmot zrjelbe szeretnnk tenni, vagy a
szmokar ktjelek helyett szkzkkel vlasztannk el, azt is megtehetjk.
Ha egy gyflprogram elemekre szeretn bontani a relefonszmot, ezt reljes
egszben magnak kell megoldania.
248 l .,Elosztott", .,bvthetsg"...
10. fejezet
Ismt egy ismers tulajdonsg kvetkezik: az url. Ugyangy, ahogy az

elz rszben egy szemlyhez trstottunk URL-t, egy szervezethez is rendel
hetnk URL-t. Ez lehet a cg honlapjnak, egy kapcsolati oldalnak, egy ter
mkoldalnak vagy brmi msnak a cme. Ha az adott URL-cmen tallhat
oldal a szervezetrl szl vagy a szervezethez tartozik, cmkzzk fel egy
itemprop="url"
jellemzvel:
<p><a itemprop="url" href= "http: l /www .google. com/ ">Google .com</ a></ p>
A 10.1. tblzat szerint az <a> elem nem ignyel klnleges feldolgozst.

A mikroadat-tulajdonsg rtke a href jellemz rtke, nem pedig a hivatko
zs szvege. A fenti kd teht ennyit tesz: "Ehhez a szervezethez a http://www.
google.coml URL kapcsoldik.". A kapcsolatrl ennl nem mond tbb konkr
tumor, s nem szerepel benne a hivatkozs szvege, vagyis a "Google.com".

Utolsknt a helymeghatrozsrl szeretnk szt ejteni. Nem, nem a W3C
Geolocation API-jrl (lsd a 6. fejezetben), hanem arrl, hogy miknt jell

hetjk meg egy szervezet fldrajzi helyt mikroadatok segtsgveL
Eddig minden pldban lthat adatok felcmkzsrl volt sz. Az egyik
esetben volt egy <hl> elemnk a cg nevvel, ezrt hozzadtunk egy
itemprop
jellemzt ehhez a <hl> elemhez, hogy jelezzk, hogy a (lthat)
cmsorszveg egy cg neve. A msik esetben egy <img> elemmel rendelkez

tnk, amely egy fnykpre muratott, gy hozzadtunk egy i temprop jellem
zt ehhez az <img> elemhez, hogy jelezzk, hogy a (lthat) kp egy sze
mlyt brzol.
Ebben a pldban a helymeghatrozsi informcik nem ilyenek. Nincs
lthat szveg, ami megadja a szervezet helynek pontos szlessgi s hossz
sgi fokt (ngy tizedesjegy pontossggal!). Valjban a mikroadatok nlkli
szervezeti mintaoldalunk egyltaln nem tartalmaz helymeghatrozssal kap
csolatos informcikat. Csupn egy hivatkozssal murat a Google Maps-re, de
mg ennek a hivatkozsnak az URL-jben sincsenek hosszsgi s szlessgi
koordintk (csak hasonl adatok, a Google-nek megfelel formtumban).
De mg ha lenne is egy olyan kpzeletbeli internetes trkpszolgltatsra mu
tat hivatkozsunk, amely URL-paramterekknt hosszsgi s szlessgi
koordintkat fogad, a mikroadatok nem adnak mdot arra, hogy egy URL-t
a rszeire bontsunk. Nem jelenthetjk be, hogy az els URL-paramter a hosz
szsgi, a msodik a szlessgi fok, a maradk pedig nem rdekes.
10.
fejezet
"
"
"Elosztott , "bvthetsg ...
l 249
Az ilyen szlssges esetek kezelse rdekben a HTML5 arra is mdot ad,

hogy megjelljk a lthatatlan adatokat, ezt azonban csak vgszksg esetre
tartogassuk. Ha van r lehetsg, hogy megjelentsk a fontosnak vlt adato
kat, tegyk is meg. Az olyan lthatatlan adatok, amelyeket csak a szmtg
pek kpesek elolvasni, hajlamosak gyorsan " megpenszedni", vagyis valszn,
hogy ksbb jn valaki, aki mdostja a lthat szveget, de megfeledkezik
a lthatatlan adatok frisstsrL Ez gyakrabban megesik, mint gondolnnk
- s velnk is biztosan meg fog.
Mindazonltal vannak helyzetek, amikor elkerlhetetlen, hogy lthatat
lan adatokat hasznljunk. Megeshet pldul, hogy a fnknk nagyon sze
retn, ha egy oldalon gp ltal olvashat helymeghatrozsi informcik
szerepelnnek, de nem akarja ttekinthetetlen hatjegy szmprokkal tele
zsfolni a felletet. Ilyenkor a lthatatlan adatok hasznlata jelenti az egyet
len megoldst. Csak az enyhti nmileg a helyzetet, hogy a lthatatlan ada
tokat kzvetlenl az utn a lthat szveg utn helyezhetjk el, amelyhez
kapcsoldnak, gy taln emlkeztethetjk azt a szemlyt, aki ksbb mdo
stja a lthat szveget, hogy a rgtn utna kvetkez lthatatlan adatokat
is frisstenie kell.
A pldnkban ltrehozhatunk egy <span> ldemet ugyanazon az <article>
elemen bell, amelyben az sszes tbbi szervezeti tulajdonsg is tallhat, majd
a lthatatlan helymeghatrozsi adatokat ebbe a
<span>
elembe tehetjk:
<span itemprop="geo" itemscope
itemtype="http://data-vocabulary.org/Geo">
<meta itemprop="latitude" content= "37. 414 9"/>
<meta itemprop="longitude" content= "-122. 07 8" l>
</span>
</article>
A helymeghatrozsi informcikhoz is sajt sztr tartozik, ugyangy, mint

egy szemly vagy szervezet cmhez. Az emltett
<span>
elemnek teht h
rom jellemzre van szksge:

itemprop= "geo"
Ez a jellemz azt mondja, hogy az elem a kapcsold szervezet
geo
tulaj
donsgt jelkpezi.
i tem type="http://data-vocabulary.org/Geo"
Ez a jellemz azt adja meg, hogy az elem tulajdonsgai melyik mikroadat

sztrnak felelnek meg.
10. fejezet
itemscope
Ez a jellemz azt mondja, hogy az elem egy sajt (az itemtype jellemz
ben megadott) sztrral rendelkez mikroadat-elem befoglal eleme. Az eb
ben az elemben tallhat sszes tulajdonsg a Geo sztr (http://data
vocabulary.org/Geo)
tulajdonsga, nem a kapcsold szervezeti sztr
(http:l/data-vocabulary .org/Organization).
A kvetkez nagy krds, amelyre ez a pldt vlaszt ad, hogy "Miknt cm

kzhetjk fel a lthatatlan adatokat?". Nos, ezt a <meta> elemmel tehetjk
meg. A HTML korbbi vltozataiban a <meta> elemet csak az oldal <head>
rszben hasznlhattuk ( lsd a 3. fejezet "A <head> elem" cm rszt),
a HTML5-ben azonban a <meta> elemet brhol alkalmazhatjuk. Pontosan
gy tesznk itt is:
<meta
itemprop= "latitude" content= "37. 414 9"/>
A 10.1. tblzat szerint a <meta> elem klnleges feldolgozst ignyel.

A mikroadat-tulajdonsg rtke a content jellemz. Mivel ez a jellemz
soha nem jelenik meg, tkletesen alkalmas korltlan mennyisg lthatatlan
adat trolsra. A nagy hatalom nagy felelssggel jr. Ez esetben a mink
a felelssg, hogy gondoskodjunk rla, hogy ezek a lthatatlan adatok ssz
hangban maradjanak az ket krlvev lthat szveggel.
Az Organization sztrat a Google Rich Snippets nem tmogatja kzvet
lenl, gy nem tudok semmilyen tetszets mintt mutatni a keressi eredm
nyekre. Mindazonltal a szervezetek nagy szerepet kapnak a kvetkez kt
-az esemnyekkel s a kritikkkal kapcsolatos- esettanulmnyban, s ezeket
a Google Rich Snippets mr tmogatja.
Esemnyek felcmkzse
Mindig trtnik valami. Egyes dolgok pedig elre meghatrozott idpon
tokban trtnnek. Nem lenne klassz, ha pontosan megmondharnnk a kere
sknek, hogy egy adott dologra mikor kerl sor? Nos, van erre egy cscsos
zrjel.
Induljunk ki egy minta-temtervbl, amely az n eladsaimat sorolja fel
(http:!ldiveintohtml5.orglexamples/event.htmf):
10. fejezet
"
"Elosztott", "bvthetsg . .
.
251
<article>
<hl>Google Developer Day 2009</hl>
<img width="300" height="200"
src="http://diveintohtmlS.org/examples/gdd-2009-prague-pilgrim.jpg"
alt=" [Mark Pilgrim at podium] ">
<p>
Google Developer Days are a chance to learn about Google
developer products from the engineers who built them. This
one-day conference incluctes seminars and "office hours"
on web technologies like Google Maps, OpenSocial, Android,
AJAXAPis, Chrome, and GoogleWeb Toolkit.
</p>
<p>
<time datetime="2009-ll-06T08: 30+01: 00">2009 November 6, 8: 30</time>
–
<time datetime="2009-ll-06T20: 30+01: 00 ">20: 30</time>
</p>
<p>
Congress Center<br>
5th kvetna 65<br>
140 21 Praha 4<br>
Czech Republic
</p>
<p><a href="http://code.google.com/intl/cs/events/developerday/2009/
home. html">GDD/Prague home page</ a></p>
</article>
vethetjk. Eltte: http:l!diveintohtml5.orglexampleslevent.html. Utna:
http:lldiveintohtml5. orglexamples/event-plus-microdata. html.

Az esemnnyel kapcsolatos minden informcit az <article> elem tartal
maz, ezrt oda kell tennnk az itemtype s itemscope jellemzket:
<article
itemscope itemtype="http: l l data-vocabulary. org/Event">
Az Event (Esemny) sztr URL-je a http://data-vocabulary.org/
Event, s ezen a cmen trtnetesen egy csinos kis tblzat is tallhat a

sztr tulajdonsgairl. Hogy mik ezek a tulajdonsgok? Tekintsk meg a
10.4. tblzatban!
252
10.
fejezet
surrunary
Az esemny cme
url
Az esemny rszleteit tartalmaz oldalra mutat hivatkozs
location
Az esemny sznhelye. Egy begyazott Szervezet (lsd a fejezet.,Szervezetek felcmkzse"

cm rszt) vagy Cm (lsd a fejezet.Szemlyek felcmkzse" cm rszt) is jellheti.
description
Az esemny lersa
startDate
Az esemny kezdetnek dtuma s ideje ISO-dtumformtumban
end Date
Az esemny vgnek dtuma s ideje ISO-dtumformtumban
duratien
Az esemny idtartama ISO-dtumformtumban
eventType
Az esemny besorolsa (pldul.,koncert" vagy .,elads"). Nem felsorolt jellemz, teht

tetszleges karakterlnc lehet.
A helyszn fldrajzi koordinti. Mindig kt rsztulajdonsgot -latitude s
geo
long i tude,
fl.hO tO
vagyis szlessgi s hosszsgi fok- tartalmaz.
Az esemnyhez kapcsold fotra vagy ms kpre mutat hivatkozs.
Az esemny cme egy <hl> elemben tallhat. A 10.1. tblzat szerint a <hl>
elemek nem ignyelnek semmilyen klnleges feldolgozst. A mikroadat
tulajdonsg rtke egyszeren a <hl> elem szvegtartalma. Teht csak any
nyit kell tennnk, hogy hozzadjuk az itemprop jellemzt, hogy bejelent
sk, hogy ez a <hl> elem tartalmazza az esemny cmt:
<hl irop="slll!lllarY">Google Developer Day 2009</hl>
Ez magyarul annyit tesz, hogy "Az esemny cme Google Developer Day
200 9."
Ehhez az esemnyhez tartozik egy fnykp is, amelyet a photo tulajdon

sggal jellhetnk meg. Ahogy azonban azt vrhatjuk, a fotnak mr van egy
cmkje: egy <img> elem. A Person sztr (lsd a fejezet korbbi, "A mikro
"
adatok adatmodellje cm rszt) photo tulajdonsghoz hasonlan az Event
sztr photo tulajdonsga is egy URL. Mivel a 10.1. tblzat azt mondja,
hogy egy <img> elem tulajdonsgrtke az elem
src
jellemzje, csak annyit
kell tennnk, hogy hozzadjuk az itemprop jellemzt az <img> elemhez:

<img itemprop="photo" width="300
height="200"
src="http://diveintohtmlS.org/examples/gdd-2009-prague-pilgrim.jpg"
alt=" [Mark Pilgrim at podium] ">
10. fejezet
"
"
Ez magyarul annyit tesz, hogy "Az ehhez az esemnyhez tartoz fnykp a http:/1
diveintohtm/5. orglexamples/gdd-2009-prague-pilgrimjpg cmen tallhat".
Ezt egy hosszabb lers (description) kveti az esemnyrl, ami csupn egy
bekezdsnyi tetszleges szveg:
<p itemprop="description">Google Developer Days are a chance to
learn about Google developer products from the engineers who built
them. This one-day conference incluctes seminars and "office
hours" on web technologies like Google Maps, OpenSocial,
Android, AJAX AP Is, Chrome, and Google Web Toolkit. </p>
A kvetkez elem valami j. Az esemnyekre ltalban konkrt napokon

kerl sor, s adott idben kezddnek, illetve vgzdnek. A HTML5-ben
azonban a dtumokat s idpontokar a <time> elemmel kell megjellni
(lsd a 3. fejezet "Dtumok s idpontok " cm rszt), s ezt mr meg is
tettk itt. A krds teht az, hogy miknt adhatunk mikroadat-tulajdonsgokat
ezekhez a <time> elemekhez? Ha visszalapozunk a 10.1. tblzathoz, lthat
juk, hogy a <time> elem klnleges feldolgozst ignyel. Egy <time> elem
mikroadat-tulajdonsgainak rtke a datetime jellemz rtke. Az Event
sztr startDate s endDate tulajdonsgai radsul ugyangy ISO for
mtum dtumot vrnak, mint egy <time> elem datetime tulajdonsga.
A HTML alapsztra teht itt is szpen illeszkedik az egyni mikroadat
sztrunk elemeinek jelentshez. A kezd- s zrdrumok mikroadatokkal
trtn felcmkzse ilyen egyszer:
l. Elszr is, hasznljuk helyesen a HTML-t (a dtumokat s idpontokat
cmkzzk fel <time> elemekkel).

2. Adjunk a kdhoz egyetlen itemprop jellemzt:
<p>
<time itemprop="startDate" datetime="2009-ll-06T08: 30+01: 00 ">2009
November 6, 8: 30</ time>
–
<time
itemprop="endDate"
datetime= "2009-ll-06T20: 30+01: 00 ">20: 30</
time>
</p>
Ez magyarul annyit tesz, hogy "Ez az esemny 2009. november 6-n, reggel
8:30-kor kezddik, s 2009. november 6-n 20:30-ig tart (prgai id, teht
GMT+l szerint).".
254 J "Elosztott", "bvthetsg"...
10. fejezet
Kvetkezzen a location tulajdonsg. Az Event sztr meghatrozsa azt

mondja, hogy a helyszn egy szervezet s egy cm is lehet. Ebben az esetben
az esemnyt egy konferenciateremben tartjk, a prgai Kongresszusi Kz
pontban. Ha a helysznt egy szervezettel (Organization) cmkzzk fel, nem
csak a helyszn cmt, hanem a nevt is megadhatjuk.
Elszr is, jelentsk be, hogy a cmet tartalmaz <p> elem az esemny
location
tulajdonsga, s hogy ez az elem egyben nmaga is egy mikroadat
elem, amely a http://data-vocabulary.org/Organization sztr

nak felel meg:
<p
itemprop="location" itemscope
itemtype="http://data-vocabulary.org/Organization">
Ez urn cmkzzk fel a szervezet nevt, a nevet egy <span> ldembe bur
kolva, majd egy i temprop jellemzt adva a <span> elemhez:
<span
itemprop="name">Congress
Center</span><br>
A "name" az Organization, s nem az Event sztr egy tulajdonsgt hat

rozza meg. A <p> elemet ugyanis, amellyel megjelltk a szervezeti tulajdon
sgok hatkrnek elejt, mg nem zrtuk le egy </p> cmkvel. Minden
mikroadat-tulajdonsg, amit itt meghatrozunk, az utoljra megnyitott hat
kr sztr tulajdonsga. Az egymsba gyazott sztrak olyanok, mint egy
verem. A verem tetejrl mg nem emeltk le a ksbb berakott elemet, teht
mg mindig a szervezet tulajdonsgairl beszlnk.
St, egy harmadik sztrat is a veremre fogunk helyezni: az esemny
(Event) helysznt biztost szervezet (Organization) cmt (Address):
<span
itemprop="acldress" itemscope
itemtype="http://data-vocabulary.org/Add ress">
A cm egyes rszeit ezttal is nll mikroadat-tulajdonsgknt szetetnnk

megjellni, ezrt szksgnk lesz nhny <span> lelemre, amelyekre felag
gathatjuk az itemprop jellemzinket. (Ha tl gyorsan haladnk, lapozzunk
vissza, s olvassuk el mg egyszer a fejezet "Szemlyek felcmkzse", illetve

"
"Szervezetek felcmkzse cm rszeit.)
<span itemprop="street-acldress">Sth kvetna 65</span><br>
<span itemprop="postal-code">l40 21</span>
<span itemprop="locality">Praha 4</span><br>
<span itemprop="country name">Czech Republic</span>
-
10. fejezet
"
"
"Elosztott , "bvthetsg ...
255
A cmnek nincs tbb tulajdonsga, ezrt bezrjuk az Address sztr hatkrt

megnyit <span> elemet, s ezzel leemeljk a legfels elemet a veremrl:
</span>
A szervezernek sincs tbb tulajdonsga, teht az Organization sztr ha

tkrt megnyit <p> elemet is bezrjuk, s ismt leemeljk a legfels elemet
a veremrl:
</p>
Ezzel visszatrtnk az esemny tulajdonsgainak meghatrozshoz. A k

vetkez tulajdonsg a geo, amely az esemny fizikai helysznt jelkpezi. Ez
a tulajdonsg ugyanazt a Geo sztrat hasznlja, mint amelyet az elz rszben
egy szervezet foldrajzi helynek megjellsre alkalmaztunk. Trolknt szk
sgnk van egy <span> elemre; ebbe tesszk az itemtype s itemscope
jellemzket. Ezen a <span> elemen bell kt <meta> elemet kell megadnunk
-egyet a latitude, s egyet a longitude tulajdonsg szmra:
<span itemprop="geo" itemscope itemtype="http: //data-vocabulary .org/Geo">
<me ta itemprop="latitude" content= "50. 047893"/>
<meta itemprop="longitude" content="14. 4491"/>
</span>
Mivel a Geo tulajdonsgokat tartalmaz <span> elemet lezrtuk, ismt az

esemny tulajdonsgait hatrozzuk meg. Az utols tulajdonsg az url, amely
nek mr ismersnek kell lennie. Egy esemnyhez ugyangy trsthatunk egy
URL-t, mint egy szemlyhez (lsd a "Szemlyek felcmkzse " rszt) vagy
egy szervezethez (lsd a "Szervezetek felcmkzse" rszt). Ha a HTML-t he
lyesen hasznljuk (a hiperhivatkozsokat <a href> cmkkkel jelljk meg),
egy hiperhivatkozsrl bejelenteni, hogy url mikroadat-tulajdonsg, csupn

annyibl ll, hogy hozzadjuk az itemprop jellemzt:
<p>
<a itemprop="url"
href='http://code.goog1e.com/intl/cs/events/developerday/2009/home.html">
GDD/Prague home page
</a>
</p>
</article>
Az esemny-mimaoldalunk (http:lldiveintohtmf5.orglexampleslevent.htmf) egy

msodik esemnyt is felsorol: a montreali ConFoo konferencin tartand
eladsomaL A rvidsg kedvrt ennek a kdjn nem megyek vgig sorrl
sorra. Lnyegben gyis megegyezik a prgai esemnyvel: egy Event elem
256
10.
fejezet
begyazott Geo s Address elemekkel. Csak azrt ernlitern meg futlag, hogy
emlkeztessek r, hogy egy oldalon tbb esemny is lehet, amelyek mindegyi
kt felcmkzhetjk mikroadatokkal.
A Google Rich Snippets visszatr

A Google Rich Snippets Testing Tool nev teszteleszkze szerint a Google
kerespkjai az albbi informcikat nyerik ki az esemny-mintaoldalunkbl
(http:!/diveintohtm/5.orglexampleslevent-plus-microdata. html):
Item
Type: http://data-vocabulary.org/Event
summary=Google Developer Day 2009
eventType=conference
photo=http: l /diveintohtmlS.org/examples/gdd-2009-prague-pilgrim.jpg
description=Google Developer Days are a chance to learn about Google
developer products from the engineers who built them. This
one-day conference incluctes seminars and office hours on web
technologies li ke Goo...
startDate = 2009-11-06T08: 30+01: 00
endDate =2009-11-06T20:30+01:00
location
geo
Item(_l)
Item(_3)
url=http: l /code.google.com/intl/cs/events/developerday/2009/home.html
Item
Id:
Type: http://data-vocabulary.org/Organization
name= Congress Center
address
Item(_2)
Item
Id:
Type: http://data-vocabulary.org/Address
street-address= Sth kvetna 65
postal-code
140 21
locality= Praha 4
country-name=Czech Republic
It em
Id:
Type: http://data-vocabulary.org/Geo
latitude=50. 04 7893
longitude= 14.4 491
10. fejezet
,.Elosztott", ,.bvthetsg"...
l 257
Amint lthatjuk, itt van minden informci, amit mikroadatokkal adtunk

meg. Azok a tulajdonsgok, amelyek nll mikroadat-elemek, bels azono
stkat kaptak- Item(
1), Item( _2 ) stb.-, de ez nem rsze a mikroadatok
szabvnynak, csupn a Google reszteleszkznek egyezmnyes mdszere,

amellyel lineriss teszi a kimenetet, s megmutatja a begyazott elemek s
azok tulajdonsgai csoportostst.
Hogyan jelentheti meg a Google a mintaoldalunkar a keressi eredm
nyek kztt? (Megint csak hangslyoznom kell, hogy ez csupn egy plda- a
Google brmikor megvltoztathatja a rallati oldalak formtumt, s semmi
sem garantlja, hogy figyelembe veszik a mikroadat-rtkeket.) Az eredmny
valahogy gy festhet, mint a 10.2. brn.
Mark Pilgdm's event calendar
Google Deyeloper Pay 2009
ConFoo.ca
2010
Fd, Nov
Wed, Mar
Congress Center. Praha
10
4,
Czech Republic
Hilton Montreal Bonaventura, Montral, Qubec, Canada
diveintohtrn15.org/examples/event-plus-microdata.htrnl - Cached - Similar pages
1 0.2. bra
Plda egy mikroadatokkal kiegsztett esemnyoldal keressnek eredmnyre
Az oldal cme s az automatikusan ellltott szvegkivonat utn a Google az

oldalhoz adott mikroadatok felhasznlsval egy kis tblzatot jelent meg
az esemnyekrl. Figyeljk meg a dtum formtumt: "Fri, Nov 6". Ez nem egy
olyan karakterlnc, amely brhol is szerepelt volna a HTML- vagy mikroadat
kdunkban. Mi kt teljesen minstett, ISO formtum karakterlncot 2009-11-06T08:30+01:00 s 2009-11-06T20:30+01:00- hasznltunk
A Google fogta ezt a kt dtumot, rjtt, hogy ugyanarra a napra esnek, s

gy dnttt, hogy egyetlen dtumot jelent meg, bartsgosabb alakban.
Most nzzk meg a fldrajzi cmeket. A Google csak a sznhely nevt,
a helysget s az orszgot jelentette meg, az utct s a hzszmot nem. Ezt az
tette lehetv, hogy a cmer t rsztulajdonsgra- name, street-address,
region, locality s country-name - bonrottuk, s mindegyik rszr
kln mikroadat-tulajdonsggal jelltk meg. A Google ezt kihasznlva jele

nt meg rvidtett cmet. Ugyanezt a mikroadatkdot ms "fogyasztk" ms
kpp is feldolgozhatjk, s ms elemek megjelentse vagy ms formzs mel
lert dnthetnek. Nincs helyes s helytelen mdszer: a mi feladatunk az, hogy
annyi adatot adjunk meg, amennyit csak tudunk, s olyan pontosan, ameny
nyire csak tudjuk. A vilg majd eldnti, hogy mit kezd velk.
258 J "Elosztott", "bvthetsg"...
10. fejezet
Kritikk felcmkzse
Az zlet- s termkismertetk jabb pldt szolgltatnak arra, hogy miknt
tehetjk jobb a Vilghlt (s a keresk tallari oldalait) a lerkdon keresz
tl. Az albbiakban egy rvid kritika lthat, amelyet a lakhelyem kzelben
tallhat kedvenc pizzzmrl rtam. (Mellesleg egy ltez tteremrl van
sz. Ha brmikor az szak-karolinai Apexben jrunk, rdemes betrni.) Nz
zk meg az eredeti kdot (http:lldiveintohtml5.orglexampleslreview.html):
<article>
<hl>Anna' s Pizzeria</hl>
<p>*****
(4
csillag 5-bl) </p>
<p>New York-i stlus pizza itt, Apex trtnelmi belvrosban</p>

<p>
Az tel elsrang, a hangulat pedig ppen olyan, rnint a "sarki csaldi
pizzzban ". Maga az tterem vllban kiss szk; ha tlslyosak
vagyunk, nehzsget okozhat lelni vagy felllni a szkbl,
illetve lavrozni az asztalok kztt. Rgebben ajndk fokhagyms
batyuval kedveskedtek az jonnan betrknek; rnost mr csak sima
kenyeret adnak, a finomsgokrt fizetni kell. De rnindent egybevve
szuper hely.
</p>
<p>
100 North Salern Street<br>
Apex, NC 27502<br>
USA
</p>
<p>- rta: Mark Pilgrim, utols frissts: 2010. mrcius 31. </p>
</article>
i''IA
z itt vgrehajtott vltoztatsokat az Interneten is nyomon k
vethetjk. Eltte: http:l/diveintohtm/5.orglexampleslreview.html. Utna:
http:l/diveintohtm/5. orglexampleslreview-plus-microdata. htrni.

Az ismertett egy <article> elem tartalmazza, ezrt ide kell tennnk az
i temty pe s i tems c ope jellemzket. me ennek a sztrnak a nvrert
megad URL:
<article
i temscope i temtype="http: l /data-vocabulary. org/Review">
Milyen tulajdonsgok llnak rendelkezsre a Review (Kritika/Ismertet) sz

trban? rlk a krdsnek- tessk megnzni a 10.5. tblzatot.
10.
fejezet
"
"
1 0.5. tblzat A kritikk sztra
itemreviewed
A kritika trgynak megnevezse. A kritika trgya lehet egy termk, egy
szolgltats, egy zleti vllalkozs stb.

A kritika trgynak szmszer minstse egy l-tl 5-ig terjed skln. Begyazott,
rating
a http:
l/data-vocabulary. erg/Rating cmen tallhat sztrat hasznl
rtkels is lehet, ha nem szabvnyos sklt szerelnnk hasznlni.

reviewer
A krtika szerzjnek neve
dtreviewed
A kritikai vizsglat dtuma ISO-dtumformtumban
summary
A kritika rvid sszegzse
description
A kritika szvegtrzse
Az els tulajdonsg egyszer: az itemreviewed csupn egy szveg, amelyet

itt egy <hl> elem tartalmaz, ezrt az i temprop jellemzt itt kell elhelyeznnk
<hl itemprop="itemreviewed">Anna' s Pizzeria</hl>
Magt az rtkelst most tugrom; majd a vgn visszatrek r.

A kvetkez kt tulajdonsg szintn nmagrt beszl. A summary tulajdon
sg a kritika trgynak rvid lersa, a description tulajdonsg pedig a
kritika szvegtrzse:
<p itemprop="sl.lllllllry">New York-i stlus pizza itt, Apex trtnelmi belv
rosban</p>
<p itemprop="clescription">
Az tel elsrang, a hangulat pedig ppen olyan, mint a "sarki csaldi
pizzzban ". Maga az tterem vllban kiss szk; ha tlslyosak
vagyunk, nehzsget okozhat lelni vagy felllni a szkbl,
illetve lavrozni az asztalok kztt. Rgebben ajndk fokhagyms
batyuval kedveskedtek az jonnan betrknek; most mr csak sima
kenyeret adnak, a finomsgokrt fizetni kell. De mindent egybevve
szuper hely.
</p>
A location s geo tulajdonsgokkal mr tallkoztunk korbban (lapoz

zunk vissza a szemlyek, szervezetek, illetve helymeghatrozsi informcik
felcmkzsrl szl korbbi rszekhez):
<p itemprop="location" itemscope
<span itemprop="street-address">lOO North Salem Street</span><br>
<span itemprop="locality">Apex</span>,
<span itemprop="region">NC</ span>
260
10.
fejezet
<span itemprop="postal-code">27502</span><br>
<span itemprop="country-name">USA</ span>
</p>
<span itemprop="geo" itemscope
itemtype="http://data-vocabulary.org/Geo">
<me ta itemprop="latitude" content '35. 730796' />
<meta itemprop="longitude" content"-78.851426" />
</span>
Az utols sorban egy ismers problmt tallunk: kt informci szerepel

egyetlen elemben. A kritika szerzjnek neve Mark Pilgrim, a kritika sz
letsnek dtuma pedig 2010.
mrcius
31. Hogyan cmkzzk fel ezt
a kt nll tulajdonsgot? Szoks szerint sajt elemekbe csomagoljuk ket

( lsd a fejezet "Szemlyek felcmkzse" cm rszt), s mindkt elemet el
ltjuk egy-egy itemprop jellemzveL A pldban szerepl dtumot egyb
knt mr eleve egy <time> elemmel kellett volna megjellni, ami termsze
tes " akaszt " lenne, amire felakaszthatjuk az itemprop jellemzt. A szerz
nevt egyszeren egy <span> ldembe burkoljuk:
<p>
<span itemprop="reviewer">Mark Pilgrim</ span>, utols frissts:
<time itemprop="dtreviewed" datetime="2010-03-31">

2010. mrcius 31.
</time>
</p>
</article>
Rendben, akkor beszljnk az rtkelsrL Egy kritika vagy ismertet felcm

kzsnek legnehezebb rsze mindig az rtkels. A Review sztr osztlyza
tai alaprtelmezs szerint l-tl 5-ig terjednek, ahol az l a " szrny", az 5
pedig a " fantasztikus". Ha ms sklt szeretnnk hasznlni, termszetesen
megtehetjk. Elszr azonban vizsgljuk meg az alaprtelmezett sklt:
<p>***** ( <span itemprop "rating ">4</span> csillag 5-bl) </p>
Ha az l-tl 5-ig terjed alaprtelmezett sklt hasznljuk, az egyeden tulaj

donsg, amelyet fel kell cmkznnk, maga az rtkels (teht esetnkben
a 4-es osztlyzat). De mi a helyzet akkor, ha ms sklt szeretnnk hasznlni?
Ezt is megtehetjk, csak meg kell adnunk a vlasztott skla hatrait. Pldul
ha egy O-tl 10-ig terjed sklt akarunk alkalmazni, ugyangy be kell ve
zetnnk az itemprop= "rating" tulajdonsgot, az osztlyzat kzvetlen
megadsa helyett azonban egy begyazott, a http://data-vocabulary.
10.
fejezet
"Elosztott", bvthetsg"... l 261

"
orgiRating sztron alapul rtkelst hasznlhatunk az egyni skla leg

rosszabb (worst) s legjobb (best) osztlyzatainak, illetve azon bell a tnyle
ges rtkelsnek a meghatrozsra:
<p itemprop="rating" itemscope
itemtype="http://data-vocabulary.org/Rating">
*********
(<span itemprop="value">9</span> egy
<span itemprop="worst ">0</span>-tl
<span itemprop="best">10</span>-ig terjed skln)
</p>
Ez magyarul annyit tesz, hogy "Az rtkelt termk egy O-tl 10-ig terjed
skln 9-es osztlyzatot rt el."
Emltettem, hogy a kritikkhoz tartoz mikroadatok hatssal lehetnek

a keres k tallari oldalaira? gy bizony! me a "nyers adatok", amelyeket a
Google Rich Snippets eszkze kinyert a mikroadatokkal kiegsztett kriti
kmbl (http:llwww.google.com/webmastersltoolslrichsnippets?url=lldiveinto
html5. orglexampleslreview-plus-microdata. htm!}:

Item
Type: http://data-vocabulary.org/Review
itemreviewed =Anna' s Pizzeria
rating= 4
summary =New York-style pizza right in historic downtown Apex
description =Food is top-notch. Atmasphere is just right ...
address= Item(
l)
geo = Item(_2)
reviewer =Mark Pilgrim
dtreviewed =2010-03-31
Item
Id:
Type: http://data-vocabulary.org/Organization
street-address = 100 North Salem Street
locality =Apex
region = NC
postal-code
27502
country-name =USA
I tem
Id:
Type: http://data-vocabulary.org/Geo
latitude =35. 730796
longitude =-78.851426
10. fejezet
A 10.3. brn lthatjuk, hogy miknr festene a kritikm egy keres tallari
oldaln (a Google szeszlyeitl, a holdfzistl s egyebektl eltekintve).
Anna's Pizzeria: review
*****Review by Mark Pilgrim- Mar 31, 2010
diveintohtml5.org/examples/review-plus-microdata.html - Cached - Similar pages
l 0.3. bra
Plda egy mikroadatokkal kiegsztett kritikai oldal keressnek eredmnyre
A cscsos zrjelek engem ltalban hidegen hagynak, de el kell ismernem,

hogy ez elg klassz.
Tovbbi olvasmnyok
A mikroadatokkal kapcsolatos forrsok:
Live microdata jtsztr (http:llfoolip.orglmicrodatajsllivel)

A HTMLS-mikroadatok szabvnylersa (http:llbit.lylckt9Rj)
Google Rich Snippets-forrsok:
"
"About rich snippets and structured data (http://www.google.com/
supportlwebmasterslbin/answer.py?hl=en&answer=99170)
"
"People (http:llwww.google.com/supportlwebmasterslbin/answer.py?hl=
en&answer=l46646)
"
"Businesses & organizations (http:llwww.google.com/supportlwebmastersl
binlanswer.py?hl=en&answer=146861)
"
"Evenrs (http://www.google. comlsupportlwebmasterslbinlanswer.
py?hl=en&answer=164506)
"
"Reviews (http:llwww.google.com/supportlwebmasterslbinlanswer.
"
"Review ratings (http://www.google.com/supportlwebmasterslbin/answer.
Google Rich Snippets teszteleszkz (http://www.google.com/webmastersl
tools/richsnippets)
Google Rich Snippets tippek s trkkk (http:llknol.google.comlklgoogle
rich-snippets-tips-and-tricks)
Fggelk
A "mindent egyben tartalmaz s majdnem
bcsorrendbe rendezett" tmutat,

amelyet kvetve brmit szlelhetnk
sszezavarodtunk? Bevezetsknt olvassuk el a 2. fejezetet. Vagy inkbb egy

mindent egyben tartalmaz programknyvtrra lenne szksgnk? Prbl
juk ki a Modernizr-t
(http://www.modernizr.com)!
Az elemek listja
<audio>
http:J/bit.ly/cZxl7k
return!!document.createElement('audio').canPlayType;
<audio> MP3 formtumban
http://en.wikipedia.org/wiki/MP3
var a= document. createElement('audio');

return !
! (a. canPlayType
"));
&&
a. canPlayType('audio/mpeg;').replace(/no/,
<audio> Verbis formtumban
http://en.wikipedia.org/wikiNorbis
var a= document.createElement('audio');
return ! ! (a. canPlayType && a. canPlayType(' audio/ogg; codecs= "vorbis
"') .
replace(/no/, ''));
<audio> WAV formtumban
http://en.wikipedia.org/wiki/WAV
var a= document. createElement('audio');

return
! ! (a. canPlayType
&&
a. canPlayType('audio/wav; code cs= "l"') .
replace(/no/, ''));
<audio> AAC formtumban
http:/ /en.wikipedia.org/wiki/Advanced_Audio_Coding
var a= document.createElement('audio') ;
return ! ! (a. canPlayType && a. canPlayType('audio/mp4; codecs= "mp4a. 40.2
"') .
replace(/no/, ''));
Fggelk l
265
<canvas>
Lsd a 4. fejezetben
return! !document.createElement('canvas').getContext;
Lsd a"Szveg" cm rszt a 4. fejezetben
<canvas> text API

var c; document. createElement ('canvas');
return c. getContext && typeof c.getContext ('2 d').fillText= 'function';
<command>
http://bit.ly/aQt2Fn
return 'type' in document.createElement ('command');
<datalist>
http://bit.ly/9WVzSp
return 'options' in document.createElement ('datalist');
<details>
http://bit.ly/c08mQy
return 'open' in document.createElement ('details');
<device>
http://bit.ly/aaBeUy
return 'type' in document.createElement('device');
<form> megszorts-ellenrzs
http://bit.ly/cb9Wmj
return 'noValidate' in document.createElement ('form');
<iframe sandbox>
http://blog.whatwg.org /whats-next-in-html-episode-2-sandbox
return 'sandbox' in document. createElement ('i frame');
<iframe srcdoc>
http://blog .whatwg.org/whats-next-in-html-episode-2-sandbox
return 'srcdoc' in document. createElement ('i frame');
<input autofocus>
Lsd az"Automatikus fkuszls mezk " cm rszt a 9. fejezetben
return 'autofocus' in document.createElement ('input');
<input placeholder>
Lsd a"Helyrz szveg" cm rszt a 9. fejezetben
return 'placeholder' in document.createElement ('input');
<jnput type="color" >

var i; document.createElement ('input');
266 J Fggelk
http://bit.ly/9H keN n
i.setAttribute('type', 'color');
return i.type ! =='text';
Lsd az.E-mail cmek"cm rszt a 9. fejezetben
var i= document. createElement('input');

i.setAttribute('type', 'email');
i. type !
return
== 'text';
Lsd a,.Szmok lptetmezkben"cm rszt a 9. fejezetben
var i =document.createElement('input');
i.setAttribute('type', 'number');
return i. type ! =='text';
<input type="range">
Lsd a .Szmok csszkkon"cm rszt a 9. fejezetben
var i= document.createElement('input');
i.setAttribute('type', 'range');
return i.type ! =='text';
<input type="search">
Lsd a ,.Keresmezk"cm rszt a 9. fejezetben
var i =document.createElement('input') ;
i.setAttribute('type', 'search');
return i.type !=='text';
<input type="tel">
http://bit.ly/bZmOQS
var i =document.createElement('input') ;
i.setAttribute('type', 'tel');
return i.type 1== 'text';
<input type=" url">
Lsd a ,.Webcmek" cm rszt a 9. fejezetben
i.setAttribute('type', 'url');
return i. type
== 'text';
<input type="date">
Lsd a ,.Dtumvlasztk"cm rszt a 9. fejezetben
var i = document. createElement ('input');

i.setAttribute('type', 'date');
return
i. type !
=='text';
<input type="time">
Lsd a,.Dtumvlasztk"cm rszt a 9. fejezetben
var i =document. createElement('input');

i. setAttribute ('type', 'time');
return i.type !=='text';
<input type="datetime">
var
Lsd a.Dtumvlasztk"cm rszt a 9. fejezetben
=document.createElement('input');
Fggelk l
267
i.setAttribute('type', 'datetime');
return i. type !=='text';
<input type="datetime-local">
var i
Lsd a.,Dtumvlasztk" cm rszt a 9. fejezetben
document.createElement('input');
i.setAttribute('type', 'datetime-local);
return i.type
=='text';
<input type="month">
Lsd a.Dtumvlasztk" cm rszt a 9. fejezetben
i.setAttribute('type', 'month');
return i.type
'text';
<input type="week">
var
Lsd a.,Dtumvlasztk" cm rszt a 9. fejezetben
document. createElement('input');
i.setAttribute('type' , 'week') ;
return i. type !
==
'text';
<meter>
http://bit.ly/cOpXOI
return 'value' in document.createElement('meter' );
<output>
http://bit.ly/asJaqH
return 'value' in document.createElement('output');
<progress>
http://bit.ly/bjDMy6
return 'value' in document.createElement('progress') ;
<time>
http://bit.ly/bl62jp
return 'valueAsDate' in document. createElement ('time');
<video>
Lsd az
5. fejezetben
return! !document.createElement('video').canPlayType;
<video> feliratok
http://bit.ly/9mliRr
return 'src' in document. createElement('track');
<video poster>
return 'pos ter' in document.createElement('v ideo');
268
l Fggelk
http://bit.ly/b6RhzT
<video> WebM formtumban
http://www.webmproject.org/
var v= document.createElement ('video');

return ! ! (v.canPlayType && v.canPlayType (' video/webm; codecs= "vp8,
varbis "').replace (/no/, ''));
<video> H.264 formtumban
Lsd a .H.264" cin rszt az 5. fejezetben
var v= document. createElement ('video') ;

return 1 1 (v.canPlayType && v.canPlayType (' video/mp4; codecs= "avcl. 42E01E,
mp4a.4 O. 2 "') . replace (/no/, '' ));
<video> Theora formtumban
Lsd a,,Theora"cn rszt az 5. fejezetben
var v= document.createElement ('video');

return !! (v. canPlayType && v.canPlayType ('video/ogg; codecs= "theora ')
"
replace (/no/,
''));
contentEditable
http://bit.ly/alivbS
return 'isContentEditable' in document. createElement ('span');
Dokumentumok kztti zenetklds
http://bit.ly/cUOqXd
return! 1window.postMessage;
Elzmnyek
http:/ /bit.ly/9JGAGB
return 11 (window.history && window.history.pushState);
File API
http:J/dev.w3.org/2006/webapi/FileAPI/
return typeof FileReader != 'undefined';
Helyi trols
http://dev.w3.org/html5/webstorage/
return 'localStorage' in window && window [' localStorage' l 1== null;
Helymeghatrozs
Lsd a 6. fejezetben
return! 1navigator.geolocation;
"
"Hzd s ejtsd
http://bit.ly/aNORFQ
return 'draggable' in document.createElement (' span');
Kapcsolat nlkli webalkalmazsok
Lsd a 8. fejezetben
return! !window.applicationCache;
Fggelk l 269
Mikroadatok
http:/ /bit.ly/dBGnqr
return ! !document.getitems;
Munkamenet-trols
http://dev.w3.org/html5/webstorage/
try {
return 'sessionStorage' in window
&&
window [' sessionStorage' ] !== null;
} catch(e) {
return false;
Server-Sent Events
http://dev.w3.org/htm 15/eventsource/
(kiszolgl ltal kldtt esemnyek)

return typeof EventSource !
'undefined' ;
SVG
http:/ /www.w3.org!TR/SVG/
return ! 1 (document.createElementNS
&&
document. createElementNS ('http: l l
www.w3.org/2000/svg' , 'svg' ) .createSVGRect);
SVG text/html
http://hacks.mozilla.org/201 0/05/
firefox-4-the-html5-parser-inline-svg-speed-and-more/
var e= document.createElement ('div');

e.innerHTML
'<svg></ svg>' ;
return ! ! (window.SVGSVGElement
&&
e. firstChild instanceof window.
SVGSVGElement);
Visszavons
http:/ /bit.ly/bs6JFR
return typeof UndoManager !== 'undefined';
WebSimpleDB
http:/ /dev.w3.org/2006/webapi/WebSim ple DB/
return ! ! window.indexedDB;
Web Sockets
http://dev.w3.org/htm 15/websockets/
return ! 1 window.Web5ocket;
Web SQL Database

return ! !window.openDatabase;
270
l Fggelk
http://dev.w3.org/html5/webdatabase/
Web Workers (webmunksok)

return
http://bit.ly/9jheof
window. Wo rker;
Tovbbi olvasmnyok
Szabvnyok s lersok:
HTML5 (http://bit.ly/bYiOQp)
Geolocation (http://www.w3. org/TR/geolocation-APII)
Server-Sem Events (http:lldev.w3.orglhtm/5/eventsourcel)
WebSimpleDB (http://dev.w3. org/2006/webapi/WebSimp leDB/)
Web Sockets (http:lldev.w3.orglhtml5/websocketsl)
Web SQL Database (http://dev.w3.orglhtml5/webdatabasel)
Web Starage (http:lldev.w3.orglhtml5/webstoragel)
Web Workers (http://www.whatwg. orglspecslweb-workerslcurrent-workl)
J avaScri pr-knyvtrak:
Modernizr (),egy HTML5-szlelknyvtr
Index
A
<article>, 71, 80
B
-
<aside>, 72
Basic quality and resolution control, !41

betjellemzk, 102
AAC, 130
betmret, 103
addColorSrop, 107
beviteli elemek, 49
addEventListener, 186
bitrta, 129
Add Type, 162
bitsebessg, 129
Advanced Audio Coding, 130

AJAX Massive Storage System, !82
alkalmazs-gyorstr, 199
lland bitsebessg kdols, 129
almost standards mode, 58
Andrew, 21
<canvas>, 37, 93
Apache, !62
CACHE:, 198
appcache, 199
Cache-Control, 203
applicationCache, 47
cached, 201
application/xhtml+xml, 25, 27
cache manifest, 196
arc(), 119
canPlayType(), 41, 42
audiokodekek, 127
Canvas text API, 38
Audio Video Interleave, 123
ceruza-tagfggvny, 98
aurofocus, 52, 211
checking, 201
auromatikus bemenetellenrzs, 226
cikkek, 80
auromatikus fkuszls mezk, 211
cmek, 242
auromatikus hrfolyam-felderts, 66
cmkk, 70
auromatikus lejtszs, 158
cmsorcsoport, 72
automatikus rlapfkusz, 52
cmsorok, 77
auroplay, 158
clear(), 186
AVI, 123
clearWatch(), 175
azonos eredet elve, 45
Closure Library, 221

code, 171
content sniffing, 14
Content-Type, 14, 63, 162
context.font, 103
Index
273
comrols, 158
esemnykezel, 117
cookie, 181
excanvas.js, 113
coords, 170
Expires, 203
createLinearGradiem, 106
explorercanvas, 38
createRadialGradiem, 106
ExplorerCanvas, 113
csatorna, 128
CSS, 66
csszka, 220
F
<footer>, 72, 87
<form>, 209
fa, 60
$(document).ready(), 213
datetime, 84
dtum, 83, 254
drumvlasztk, 221
DHTML Behaviors, 182
Display Postscript, 21
doctype, 57
Dojo, 221
dokumemum nyelve, 67
dokumentumobjektum-modell, 35
dokumemumtpus, 57
dokumemumvzlat, 78
DOM, 35
DOM-esemnyek, 201
DOM Srorage, 184
downloading, 201, 202
drawlmage(), 110
FAAC, 130
FairPlay, 130
fejlc, 14
ffmpeg, 154
ffmpeg2theora, 143
fillrect, 95
filiStyle, 95
filiText(), 39, 103
Firefogg, 136, 140
Firefox, 23
Flash-stik, 182
Flash Video, 122
FlowPlayer, 163
fkusz, 213
font, 102
fordtott hivatkozs, 69
fgg alapvonal, 102
egyni sztrak, 230
Gears, 49, 175, 183
egymsba gyazott hatkrk, 241
gears_init.js, 176
egymsba gyazott szrrak, 231
geodziai vilgrendszer, 172
e-mail cmek, 213
geo.js, 176
em-ngyzet, 102
geolocation, 48
enableHighAccuracy, 174
Geolocation API, 167
error, 202
geolokci, 48, 167
rtkels, 261
getComext(), 37, 94
esemnyek, 251
getCurrentPosition(), 169, 173
esemnyfolyam, 201
getltem(), 185
274
Index
getitems(), 54
HTTP2, 17
Google Rich Snippets, 243, 257
httpd.conf, 162
G PS, 170, 173
HTTP-fejlc, 63, 203
gradiem, 106
HyTime, 22, 24
Greasemonkey, 159
gyermekelem, 60
gykrelem, 60
gyorstr, 196
gyorstrjegyzk, 196
<img>, 109
<input type="color">, 226
<input type=" date">, 222
H
<a href>, 64
<input type="datetime">, 222

<input type="momh">, 222
<input type="search">, 225
<head>, 61
<input type="time">, 223
<header>, 72, 78
<input type="url">, 215
<hgroup>, 72, 79
<input type="week">, 223
.htaccess, 162
idblyeg, 170
H.264, 125, 145, 153
idpont, 254
hlzati fehrlista szakasz, 198
ikon, 68
hlzati szakasz, 198
lmage.onload, lll
HandBrake, 145
handle_srorage(), 187
hatkr, 231, 233
hrtrszlak, 46
helyi megosztort objektumok, 182
helyi trols, 44, 181
helymeghatrozs, 48, 167, 172
helyrz szveg, 51, 209
hibakeress, 203
img, 14
INCLUDE, 22
lndexed Database API, 192
IndexedDB, 192
informcis sv, 169
input type, 49
inpur.value, 218
Imermedia, 20
hiperhivatkozsok, 65
Internet Explorer, 23, 163
hivatkozsok, 64
ismeretlen elemek, 73
hreflang, 67
itemscope, 233, 237, 246
HTML+, 20
itemtype, 233, 237, 246
HTML 4.0, 25
i Tunes Plus, 130
HTML5, 80
HTML5 Srorage, 183
HTML5-tmogats, 35
HTML5-trol, 183, 185
HTML-munkacsopon, 26
J
jegyzkfjl, 195, 197
HTML Working Group, 26
jelenrstkrz elemek, 71
HTTP, 16
jQuery Ul, 221
Index l 275
K
kapcsolat nlkli webalkalmazs, , 46, 195
longitude, 170
LSO, 182
karakterkdols, 62,64
kategria-kulcsszavak, 70
Kpek, 109
kpernyolvas, 86
M
<mark>, 72
kpkocka, 124
<meta>, 62, 251
keress,70
<meta charset>, 64
keresmezk,224
<meta http-equiv>,64
key(), 186
majdnem szabvnykvet md, 58
kifejezett szakasz, 198
manifest, 195, 196
kitltsi stlus,95
maximumAge, 174
kodek,41
metaadatok, 61
kdols, 143
Midas, 17
koordintk, 170
mikroadatok,53, 230
kr, 119
mikroadatok adatmodellje,232
korltozott trkkz md, 59
mikroformtumok, 229
krvonalstlus,95
MIME-tpusok, 13, 161
ktegelt kdols, 143, 153
mkclean, 155, 157
kvr lblc, 88
Modernizr,36, 168, 184
kritikk,259
Modernizr.inputtypes, 51
kulcs-rrk prok, 185
morzsatvonal, 68
kls erforrsra mutat hivatkozsok,65
Mosaic, 16
MouseEvent, 117
moveTo(), 98
Mozilla, 23
MPEG-1 Audio Layer 3, 129
<linb, 65
lblc, 72,87
MPEG-4, 122
LAME, 129
lang, 61
lthatatlan adatok,250
latitude, 170
<nav>, 71
lekpezsi md,58
navigcis sv, 85,86
lpskz,218
navigator, 48, 168
lptetmez, 217,219
navigator.geolocation, 168
levlcsompont, 60
nem trkkz md, 58
libvp8, 155
Netscape Navigator, 23
limited quirks mode, 59
NE TWORK:, 198
lineTo(),98
nv-rtk prok,230, 232
Local Shared Objects,182
nevestett kulcs, 185
localStorage, 45, 184, 185
nevestett tulajdonsgok, 231
Local Storage, 184
nvtr, 232
276 l Index
no quirks mode, 58
rel = alrernare, 66
noupdare, 202
rel = "archives", 67
nyelv, 61, 66
rel
"aurhor", 67
rel= "exrernal", 67
rel = "icon", 68
rel= "license", 68
rel="nexr", 67
objekrumrrol, 192
rel = "nofollow", 68
offiine, 47, 195
rel= "noreferrer", 69
Ogg, 122, 136, 143
rel = "pingback", 69
oldalsv, 72
rel
OpenSearch, 70
rel="prev", 67
"prefetch", 69
rel = "search", 70
rel = "sidebar", 70
rel= "starr", 67
rel="srylesheer", 65
parh, 98
rel = "tag", 70
pingback, 69
rel="up", 68
placeholder, 51, 210
removeltem(), 186
pont jells, 240
Rich Snippets, 244
pontossg, 174
posirion, 170
PosirionError, 171
PosirionOprions, 173, 175

preload, 158
<section>, 71
progress, 201, 202
<source>, 160
pubdare, 83
setltem(), 185
sizes, 68
skip link, 87
SLAC, 17
QuickTime, 122
spinbox, 219
quirks mode, 58
SQL, 191
QUOTA_EXCEEDED_ERR, 188
standards mode, 58
slider, 220
step, 218
srepDown, 218
srepUp, 218
stluslap, 66
rajzkrnyezer, 94
starage esemny, 186
rajzvszon, 37, 93
SrorageEvent, 187
rajzvszon-koordinrk, 96
stroke(), 99
rajzvszonra rr szveg, 38
strokeStyle, 95, 99
RDFa, 229
supporcs_canvas(), 37, 39
rel, 65
supporcs_geolocation(), 48
Index l 277
suppons_inpur_aurofocus(), 53
type, 66, 160
supports_input_placeholder(), 52
rype="number",217
suppons_local_storage(), 45
supports_microdata_api(), 54
supports_offiine(), 47
supports_video(), 41
supports_web_workers(),46
ugrhivatkozs, 87
surround, 128
updateready,202
sti, 181
URI,215
szabvnykvet md, 58
URL,215,242
szakasz, 71
rlap,49
szakaszfejlcek, I 98
rlapellenrzs,227
szl, 46
rlapok,26,209
szmok,217
URL-minta, 200
szemlyek,236
userData, 182
szervezetek, 246
tvonal, 98
sznlloms, 107
szntmenetek, 106
sznvlasztk,226
sztr,230
szveg, 102
v
-vcodec, 155
szveg-alapvonal,102
<video>,40, 121, 131, 157
szlcsompont,60
vltoz birsebessg kdols, 129

value,218
valueAsNumber,218
vide, 40
<rime>, 72,83,254
videoformrumok, 41, 42
Video for Everybody!, 40
tanalk szakasz, 199
videokodekek, 123
tanalomszimatols, 14
videorrolk, 122
tartalomrpus, 14
viszonytott betmrer, 103
tartomny-uttag,215
visszhangrresrs, 69
Technorati-cmkk, 70
viszonyler elemek, 64
telefonszmok,248
VML, 113
testvr, 60
Vorbis, 130
textAlign, I 02
VP8, 126
textBaseline, 102, 103

text/cache-manifest, 196
text/html,26
Theora, 126
timeour, 174
watchPosition(), 175
timestamp, 170
webcmek, 215
rolltagfggvny,98
WebDB, 191
rrkkz md, 58
webes rlapok,26,49,209
278
Index
WebM,43, 123, 154

webmunksok,45
WebSimpleDB, 192
Web SQL Database, 191
Web Srorage,183
Web Worker API, 45
WGS84,172
window.applicationCache,201
window.applicationCache.
swapCache(), 202
window.evenr, 187
window.onload, 110, 213
Worker, 46
World.Geodetic System, !72
x
x264, 126
XHTML,27
XHTML 1.0,25
XHTML Extended Forrns,26
XHTML nvtr,60
xml:lang,61
xmlns jellemz,60
XMosaic, 16
y
YUI, 221
A szerzrl
Mark Pilgrim fejlesztsi tancsadknt dolgozik a Google-nl; a szakter

lett a nylt forrs s a nylt szabvnyok jelentik. Mark szmos mszaki tmj
knyv szerzje; eddig megjelent ktetei kztt olyanok tallhatk, mint
a Greasemonkey Hacks (O'Reilly) a Dive lnto Python (APress) vagy a Dive
lnto Accessibility. (Ez utbbi egy szabadon hozzfrhet elektronikus tanfo
lyam a webes tartalmak akadlymentestsrl.) Mark szak-Karotinban l
felesgvel, kt fival s nagy, nyladz kutyjval.

HTML5 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 PDF

Uploaded by

Copyright:

Available Formats

Mark Pilgrim

A kiadvny a kvetkez angol eredeti alapjn kszlt:

Copyright 2011 by Mark Pilgrim. Some rights reserved!

A kiads a Creative Commons engedlyvel kszlt a CC-BY-3.0vltozat alapjn.

Fordts s magyar vltozat 2011 Kiskapu Kft. Kapcsold jogok fenntartva!

1134 Budapest, Csng u. 8.;

Nyomdai elllts: Radin Group

1. fejezet- Hogyan jutottunk el idig?

Hossz kitr a szabvnyok szletsrl

A HTML fejldsnek trtnete 1997 s 2004 kztt .

Minden, amit az XHTML-rl tudunk, tves

Egy versenykpes ltoms.

2. fejezet- A HTML5-kpessgek szlelse

Modernizr: egy HTML5-szlel knyvtr

Krdezzk meg Lerkd professzort!

Kapcsolat nlkli webalkalmazsok.

3. fejezet- Mit jelent mindez?

Egyb viszonyler elemek a HTML5-ben

j jelentstkrz elemek a HTML5-ben

Hossz kitr arrl, hogy miknt kezelik a bngszk

4. fejezet- A rajzvszon rdge (ne fessk a falra!)

Mi a helyzet az Internet Explorerrel?

Egy teljes plda. . .

5. fejezet- Vide a Weben

MPEG-1 Audio Layer 3

Advanced Audio Coding .

Ami a Weben mkdik

A H.264-videk felhasznlsi engedlyvel kapcsolatos krdsek.

Ogg-videk kdolsa a Firefogg segtsgveL

Ogg-videk ktegelt kdolsa az ffmpeg2theora segtsgvel

H.264-videk ktegelt kdolsa a HandBrake segtsgvel .

WebM-videk kdolsa az ffmpeg segtsgve!.

H.264-videk kdolsa a HandBrake segtsgvel

A MIME-tpusok belekpnek a levesbe

Mi a helyzet az Internet Explorerrel?

Egy teljes plda .

6. fejezet- Itt ll n (s mindenki ms)

Vlasztst! Szabad vlasztst!

Mi a helyzet az Internet Explorerrel?

A felment sereg: geo.js.

Egy teljes plda .

7. fejezet- A helyi trols mltja, jelene s jvje a webalkalmazsokban

A helyi trolsra a HTML5 eltt alkalmazott

A HTML5-trolterlet vltozsainak nyomon kvetse.

A jelenleg hasznlt bngszk korltai .

A HTML-trol mkds kzben

A kulcs-rtk prokon tl: verseng elkpzelsek

8. fejezet- Bontsuk a kapcsolatot!

A hibakeress mvszete, avagy "lj meg! lj meg itt s most!"

Automatikus fkuszls mezk

1 O. fejezet- .,Elosztott", .,bvthetsg" s ms divatos szavak

Mik azok a mikroadatok? .

Bemutatkozik a Google Rich Snippets .

A Google Rich Snippets visszatr .

Mi a HTMLS? A HTMLS a HTML kvetkez nemzedke, amely a HTML 4.01,

1.0 s az XHTML 1.1 felvltsra hivatott. A HTMLS olyan j

szolgltatsokat knl, amelyek elengedhetetlenek a modern webalkalma

j nyelvi elemek, pldul a <header>, a <footer> vagy a <section>

A rajzvszon-az a ktdimenzis rajzfellet, amelyet JavaScript segtsg

A weboldalakba kls bvtmnyek segtsge nlkl begyazhat videk

Helymeghatrozs- hogyan oszthatjk meg a weboldalak ltogati a tartz

Tarts helyi trols kls bvtmnyek segtsge nlkl (7. fejezet)

A HTML tovbbfejlesztett webes rlapjai (9. fejezet)