Bevezetés a HTML5-be és az újdonságok rövid áttekintése

English version!

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

Creative Commons Licenc
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.

You may also like...