Mark Pilgrim HTML 5 AZ ÚJ SZABVÁNY. Ugorjunk fejest a webfejlesztés jövőjébe!

Mark Pilgrim

HTML 5 AZ ÚJ SZABVÁNY Ugorjunk fejest a webfejlesztés jövőjébe!

A kiadvány a következő angol eredeti alapján készült: Dive Into

HTMLS

Copyright© 2011 by Mark Pilgrim. Some rights reserved! ©Kiskapu Kft. 2011

A kiadás a Creative Commons engedélyével készült a CC-BY-3.0változat alapján.

Fordítás és magyar változat© 2011 Kiskapu Kft. Kapcsolódó jogok fenntartva! A kiadó a lehető legnagyobb körültekintéssel járt el e kiadvány elkészítésekor. A kiadó nem vállal semminemű felelősséget vagy garanciát a könyv tartalmával, teljességével kapcsolatban. A kiadó nem vonható felelősségre bármilyen baleset vagy káresemény miatt, mely közvetve vagy közvetlenül kapcsolatba hozható e kiadvánnyal. Fordítás és lektorálás: Rézműves László Műszaki szerkesztő: Tóth Klára Tördelés: Tóth Klára Felelős kiadó a Kiskapu Kft. ügyvezető igazgatója ©2011 Kiskapu Kft.

1134 Budapest, Csángó u. 8.; Fax: (+36-l) 303-1619; http://www.kiskapukiado.hu/; e-mail: [email protected] ISBN: 978 963 9637 77 l

Nyomdai előállítás: Radin Group Felelős vezető: Antun Basic Kereskedelmi képviselet: Kvadrát '97 Kft. Tel./Fax: +361 319 1599. Mobil: +36 302806656 E-mail:[email protected]

Tartalom

Előszó . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

1. fejezet- Hogyan jutottunk el idáig?

. . . . . . .

13

MIME-típusok. . . . . . . .

Ugorjunk fejest!

13

Hosszú kitérő a szabványok születéséről Töreden fejlődés .

. . . . . .

. .

14 . 23

A HTML fejlődésének története 1997 és 2004 között .

. 25

Minden, amit az XHTML-ről tudunk, téves

. 26

Egy versenyképes látomás.

. 28

Milyen munkacsoport?.

. 30

Vissza a W 3C-hez. .

. 32

Utószó . . . . .

. 33

.

További olvasmányok

. 34

2. fejezet- A HTML5-képességek észlelése

. . . . .

. 35

Észlelési módszerek . . . . . . . .

. 35

Modernizr: egy HTML5-észlelő könyvtár

. 36

A rajzvászon . .

.

. 37

Rajzvászonra Írt szöveg.

. 38

Ugorjunk fejest!

Videó

.

.

. . .

.

. . . . . . .

. 40

Videoformátumok

. 41

Kérdezzük meg Leírókód professzort!

. 44

Helyi tárolás. . . . . . . . . .

. 44

Webmunkások . . .

. 45

.

.

. .

. .

Kapcsolat nélküli webalkalmazások.

. 46

Helymeghatározás

. 48

Bevitelielem-típusok. . Helyőrző szöveg . .

.

. 49

. .

51

Automatikus űrlapfókusz .

. 52

Mikroadatok. . .

. 53

.

További olvasmányok . .

. 54

3. fejezet- Mit jelent mindez?

. .

. 57

A dokumentumtípus.

. 57

A gyökérelem

. 60

Ugorjunk fejest! .

A elem .

.

.

. 61

Karakterkódolás .

.

. 62

Viszonyleíró elemek .

. 64

Egyéb viszonyleíró elemek a HTML5-ben

. 67

Új jelentéstükröző elemek a HTML5-ben

. 71

Hosszú kitérő arról, hogy miként kezelik a böngészők az ismereden elemeket. Címsorok .

. . . .

Cikkek . . . .

.

.

. 73

.

. 77

.

. 80

Dátumok és időpontok.

. 83

Navigáció .

.

. . .

. 85

Láblécek .

. . . .

. 87

További olvasmányok

. 90

4. fejezet- A rajzvászon ördöge (ne fessük a falra!)

Ugorjunk fejest!

. . .

Egyszerű alakzatok .

. 93

.

. 94

Rajzvászon-koordináták

. 96

Útvonalak. .

. 98

Szöveg .

.

101

.

Színátmenetek

105

Képek .

109

.

.

Mi a helyzet az Internet Explorerrel?

113

Egy teljes példa. . .

115

További olvasmányok

120

5. fejezet- Videó a Weben

Ugorjunk fejest!

121

Videorárolók.

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 működik

.

A H.264-videók felhasználási engedélyével kapcsolatos kérdések.

131 134

Ogg-videók kódolása a Firefogg segítségéveL

.

136

Ogg-videók kötegelt kódolása az ffmpeg2theora segítségével

.

.

.

.

.

143

.

145

H.264-videók kötegelt kódolása a HandBrake segítségével .

.153

WebM-videók kódolása az ffmpeg segítségéve!.

154

És végül, a leírókód! .

157

H.264-videók kódolása a HandBrake segítségével

.

.

.

.

.

.

.

.

.

.

A MIME-típusok beleköpnek a levesbe

161

Mi a helyzet az Internet Explorerrel?

163

Egy teljes példa .

.

!64

.

További olvasmányok .

.

.

.

165

. .

6. fejezet- Itt áll ön (és mindenki más)

.

167

A Geolocation API

167

Mutasd a kódot!

.

168

A hibák kezelése

.

171

Ugorjunk fejest!

Választást! Szabad választást!

172

Mi a helyzet az Internet Explorerrel?

175

A felmentő sereg: geo.js.

176

Egy teljes példa .

.

178

.

További olvasmányok

179

.

7. fejezet- A helyi tárolás múltja, jelene és jövője a webalkalmazásokban

Ugorjunk fejest!

.

.

.

.

.

.

.

.

. .

.

. .

.

.

.

.

.

.

.

.

181

A helyi tárolásra a HTML5 előtt alkalmazott trükkök rövid története .

182

.

Bemutatkozik a HTML5-tároló

.

.

. .

.

A HTML5-tároló használata

.

.

.

.

.

.

183 185

A HTML5-tárolóterület változásainak nyomon követése.

186

A jelenleg használt böngészők korlátai .

.

.

.

.

188

A HTML-tároló működés közben

.

. .

.

188

.

.

A kulcs-érték párokon túl: versengő elképzelések

191

További olvasmányok .

193

.

.

. .

.

.

.

.

.

.

8. fejezet- Bontsuk a kapcsolatot! .

195

A gyorstárjegyzék.

Ugorjunk fejest!

196

Hálózati szakaszok

198

Tartalék szakaszok

199

Az eseményfolyam

201

A hibakeresés művészete, avagy "Ölj meg! Ölj meg itt és most!" Építsünk egyet!. . .

206

További olvasmányok . .

207

.

.

.

.

. .

.

.

.

.

.

.

.

.

203

9. fejezet- Örültűrlapok Ugorjunk fejest!

. . . .

Helyőrző szöveg

.

.

.

. .

209

. . .

209

Automatikus fókuszálású mezők

211

E-mail címek

.

.

.

.

.

213

Webcímek. . . .

.

.

.

.215

Számok léptetőmezőkben .

217

Számok csúszkákon

220

Dátumválasztók

221

Keresőmezők

.

.

Színválasztók

.

.

224 226

És még egy dolog...

226

További olvasmányok

228

1 O. fejezet- .,Elosztott", .,bővíthetőség" és más divatos szavak Ugorjunk fejest!

.

.

.

.

Mik azok a mikroadatok? .

.

229

.

230

A mikroadarok adatmodellje.

232

Személyek felcímkézése.

236

.

.

Bemutatkozik a Google Rich Snippets .

243

Szervezetek felcímkézése .

246

.

.

.

Események felcímkézése . .

.

.

251

A Google Rich Snippets visszatér .

257

Kritikák felcímkézése

259

További olvasmányok

263

Függelék A "mindent egyben tartalmazó és majdnem ábécésorrendbe rendezett" útmutató, amelyet követve bármit észlelhetünk Az elemek listája .

Index

265

.

265

További olvasmányok

271

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . ..

273

Előszó

Mi a HTMLS? A HTMLS a HTML következő nemzedéke, amely a HTML 4.01, az XHTML

1.0 és az XHTML 1.1 felváltására hivatott. A HTMLS olyan új

szolgáltatásokat kínál, amelyek elengedhetetlenek a modern webalkalma­ zásokban, ezen kívül szabványossá teszi a webes felület számos olyan lehető­ ségét, amelyeket a webfejlesztök már évek óta használnak, de a szabványügyi bizottságok eddig még nem foglaltak írásba. (Meglepődnénk, ha megtudnánk például, hogy a Window objektumot még soha nem írták le hivatalosan? A HTMLS tesz először kísérletet arra, hogy formális leírást adjon sok-sok "de facto" szabványról, amelyeket a webböngészők már jó ideje támogatnak.) Elődeihez hasonlóan a HTML5-öt is úgy tervezték, hogy rendszerfüggeden legyen. Ahhoz, hogy kihasználhassuk a HTMLS előnyeit, nem követelmény, hogy Windows, Mac OS X, Linux, Multics vagy bármilyen más konkrét operációs rendszert futassunk, csupán egy modern webböngészőre van szük­ ségünk (de arra feltétlenül). Modern webböngészők ingyenesen elérhetők minden fontosabb operációs rendszerhez. Az Apple Safari, a Google Chrome, a Mozilla Firefox vagy az Opera legújabb változatai kivétel nélkül támogatják a HTMLS számos szolgáltatását. (A könyvben a böngészők megfelelőségéről részletesebb táblázatokkal is találkozni fogunk.) Az iPhone, iPad és Android mobilkészülékekre előre telepített mobil webböngészők mind kitűnő támo­ gatást nyújtanak a HTMLS-höz. Még a Microsoft is bejelentette, hogy az Internet Explorer közelgő 9-es változata is ismerni fogja a HTMLS számos elemér. Ebben a könyvben nyolc témakörrel foglalkozunk: •

Új nyelvi elemek, például a

, a