Bevezetés a HTML5-be és az újdonságok rövid áttekintése
Mi az a HTML5?
A HTML5 a következő, jelentősen átdolgozott változata a HTML-nek, amely nagyobb módosításon utoljára 1999-ben esett át. A HTML5 fejlesztése, nagyjából 2004-től indul, melyet a WHAT Working Group (Web Hypertext Applications Technology Working Group) kezdeményezett, amely egy a webfejlesztésben érdekelt feleket tömörítő nem hivatalos, nyílt társulás. Céljuk, olyan szabványok kidolgozása a HTML és a hozzá szervesen kapcsolódó technológiák alapján melyek megkönnyítik a platform független webalkalmazások készítését. Ehhez társult 2006-ban a W3C (World Wide Web Consortium).
A HTML5 fő tervezési céljai a következők:
- Csökkenteni a külső plugin-ok számát (pl. Adobe Flash, Microsoft Silverlight), ezzel együtt csökkentve az inkompatibilitásból eredő problémákat.
- Jobb hibakezelés/helyreállítás megvalósítása, hogy a böngészőknek ne kelljen saját hibakezelő rutint futtatniuk, valamint ne katasztrófális hibaként kezeljék az egyes HTML kódolási problémákat.
- Eszköz és platformfüggetlenség megvalósítása, mind asztali mind mobil eszközök tekintetében.
- A Scripting térnyerése
- A HTML5 fejlesztésének átláthatónak és nyíltnak kell lennie, azok eredményeit levelezőlistákon, fórumokon elérhetővé kell tenni, már a szabvány megjelenése előtt, hogy azokat minél jobban a webet használó közönség igényeinek megfelelően lehessen formálni.
Új funkciók
Néhány érdekes új funkció a teljesség igénye nélkül:
• A <canvas> egy a felbontástól függő bitképes rajzvászon
• Video és audio elemek a lejátszáshoz
• A HTML5-tároló, a felhasználó számítógépén tárolhatunk adatokat a sütik-hez hasonlóan, de méretbeli korlátozások nélkül
• Kapcsolat nélküli (offline) webalkalmazások
• A helymeghatározás (geolokáció)
• Új űrlapvezérlők
HTML5 még mindig befejezetlen, várhatóan 2014-től válik a szabvány teljessé. Azonban a legtöbb modern böngészőben (Safari, Chrome, Firefox, Opera, Internet Explorer ) már megoldott a HTML5 támogatás.
Teszteld a böngésződet
Erre a legjobb eszköz talán a Modernizr nevű JavaScript Toolkit, melyet ingyen letölthetünk a http://www.modernizr.com weboldalról. Feladata, hogy részletes jelentést adjon az őt futtató böngésző HTML5 képességeiről.
Használata viszonylag egyszerű:
Letöltés után a weboldalunk Header tartományába helyezzük el a scriptet
<script type="text/javascript" src="modernizr.js" />
Majd utána az adott tulajdonságok állapotvizsgálatát végeztessük el egy egyszerű Boolean (Igaz/Hamis) visszatérési értékének vizsgálatával.
<script type="text/javascript">
if (Modernizr.webgl)
{
document.writeln("Böngésződ támogatja a WebGL funkciót");
}
else
{
document.writeln("Böngésződ nem támogatja a WebGL funkciót");
}
if (Modernizr.canvas)
{
document.writeln("Böngésződ támogatja a Canvas technológiát!");
}
else
{
document.writeln("Böngésződ nem támogatja a Canvas technológiát");
}
</script>
További használható tulajdonságok a teljesség igénye nélkül (a teljes lista megtalálható http://www.modernizr.com/docs/ weboldalon)
- modernizr.fontface – egyéni fontok támogatásának vizsgálatához
- modernizr.audio – az újonnan bevezetett audio tag támogatásának vizsgálata
- modernizr.video – az újonnan bevezetett video tag támogatásának vizsgálata
- modernizr.webgl – A Google féle webgl támogatás vizsgálatához
- modernizr.canvas – rajzvászon támogatás ellenőrzéséhez
Nálam a végletekig leegyszerűsített kód így néz ki:
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript">
if (Modernizr.webgl) { document.writeln("Böngésződ támogatja a WebGL funkciót"); } else { document.writeln("Böngésződ nem támogatja a WebGL funkciót"); } if (Modernizr.canvas) { document.writeln("Böngésződ támogatja a Canvas technológiát!"); } else { document.writeln("Böngésződ nem támogatja a Canvas technológiát"); }
</script>
Itt elérhető: http://goo.gl/LZkS4
Amennyiben részletesebb eredményre vagy kíváncsi látogass el ide: http://html5test.com/
Forrás:
http://hu.wikipedia.org/wiki/HTML5
http://dev.w3.org/html5/spec/Overview.html?true
HTML5 bevezetés a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.
