HTML5
Szerző: admin | html5 | 2010 augusztus 18. 14:36

18 aug 3

html5

A HTML5 új funkcióit és elemeit tekintjük át, melyeket már lassan ti is beépíthettek oldalaitokba. Lesz itt minden: új input tulajdonságok, szerkeszthető tartalom, audio, video, böngészők kompatibilitása.

Doctype

1.

<!DOCTYPE html>

Igazából HTML5-ben nem is lenne szükség Doctype megadására, azonban azért hogy visszafelé is kompatibilis legyen a régebbi böngészőkkel, azokban a fenti kód standard módban redereli le az oldalt. A régebbi Doctypokról itt olvashatsz bővebben.

Figure elem

Ezt már használtam előző cikkemben, ahol képkeretként szolgált.

1.
2.
3.
4.
5.
6.

<figure>
	<img src="kep/helye.jpg" alt="Ezt ábrázolja" />
	<figcaption>
		<p>Itt pedig a képaláírás látható </p>
	</figcaption>
</figure>

Így nem csak a kód lesz strukturáltabb, hanem a keresők is jobban tudják majd azonosítani mi mihez tartozik.

Script és Link elem

Már nem szükséges megadnunk egy script vagy link elem típusát, a böngésző automatikusan felismeri azt.

1.
2.

<link rel="stylesheet" href="hely/67.css" />
<script src="hely/67.js" async="true"></script>

Az új async paraméter lehetővé teszi, hogy a tartalom tovább töltődjön és ne kelljen megvárni a script betöltődését.

Ha az oldalad nem tartalmaz olyan js kódot ami betöltődés után azonnal lefut, érdemes az összes js fájlt közvetlenül a záró body elem előtt betölteni, ugyanis mivel a böngésző fentről lefelé rendereli az oldalt, amíg a head-ben nem töltötte be a js fájlokat, addig nem folytatja a többi elem töltését.

Szerkeszthető tartalom

Minden elem amely tartalmazza a contenteditable tulajdonságot a leszármazottaival együtt szerkeszthetővé válik.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
 
</head>
<body>
	<h2> Bölcsességek </h2>
     <ul contenteditable="true">
		<li> Egyesek füveznek, én fázom... </li>
		<li> -Pistike, van házid? -Van Tanárnő, töltsek? </li>
		<li> Ajándék csónak ne nézd a lapát </li>
	 </ul>
</body>
</html>

Példa

  • Egyesek füveznek, én fázom…
  • -Pistike, van házid? -Van Tanárnő, töltsek?
  • Ajándék csónak ne nézd a lapát

Input tulajdonságai

Az input elem rengeteg új tulajdonságot kapott, ami helyettesít néhány js függvényt. Ilyen az url, email vagy telefonszám validálás és még egy rakás hasonló amiről itt olvashattok bővebben.

Ami nincs megemlítve de szerintem említésre méltó:

  • multiple: Egynél több érték is megadható, valószínűleg itt majd egy tömbben küldi tovább a vesszővel elválasztott elemeket
  • form Több formhoz is tartozhat egy input, it sorolhatjuk fel őket
  • formaction Felülírhatjuk a form action tulajdonságát

Összefoglalás angolul itt található.

Placeholder

1.

<input name="email" type="email" placeholder="67developer@gmail.com" />

Ezt külön kiemelem, habár az input mezőkhöz tartozik. Segítségével egy input mezőnek adhatunk alapértelmezett értéket, ami eltűnik ha belekattintunk a mezőbe, majd ha nem írtunk bele semmit és kikattintunk, ismét megjelenik. Sajnos egyelőre csak Chrome és Safari támogatja, de idővel talán mindegyik böngésző fogja.

Példa:

Header, Footer, Article

Eddig így csináltuk:

1.
2.
3.
4.
5.
6.
7.

<div id="header">
    ...
</div>
 
<div id="footer">
    ...
</div>

Most viszont bevezettek erre két külön elemet a headert és footert. Amire azonban figyelni kell, hogy ez nem az oldal fej és láb részét jelenti, hanem azét az elemét, amelyik tartalmazza.

A harmadik elem az article amely külső forrásból származó tartalmat jelöl. Talán arra lesz majd jó, hogy a keresők nem büntetnek az ilyen duplikált tartalomért, vagy segítségével könnyebben összekapcsolják a hasonló oldalakat.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

<div id="content">
    <header>
        <h1>Ez itt a tartalom fejrésze</h1>
    </header>
 
    <div class="cikk">
        <header>
            <h2>Cikk fejrésze</h2>
        </header>
 
        <article>
            <p>Ezt egy másik blogból másoltam ki</p>
        </article>
    </div>
 
    <footer>
        <p>Összegzés a tartalomról</p>
    </footer>
</div>

Internet Explorer kompatibilitás

Sajnos IE-ben most sem úgy mennek a dolgok ahogy menniük kellene, ezért néhány trükkre van szükség:

Css

Minden új elem display tulajdonságának értéke inline, ezért meg kell mondani neki, hogy az új elemeket block-ként jelenítse meg.

1.
2.
3.

header, footer, article, section, nav, menu, hgroup {
   display: block;
}

Js

Itt még nem történik semmilyen változás, ugyanis nem ismeri ezeket az elemeket. Ezt a következő js kód oldja meg:

1.
2.
3.
4.
5.
6.

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

A gyorsabb megoldás

Remy Sharp készített egy scriptet, amit elég az oldal elején betölteni, és már működik is minden:

1.
2.
3.

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

hgroup

Amikor az oldalon van egy h1-es főcím és annak egy h2-es alcíme, akkor azok összetartozását eddig semmi nem jelölte a keresők számára. Most erre a célra szolgál a hgroup, így ha több h2 van az oldalon, a kereső akkor is tudja melyik tartozik a főcímhez, illetve hogy egyáltalán tartozik -e hozzá alcím, vagy az első h2 már a tartalom tagolására vonatkozik.

1.
2.
3.
4.
5.
6.

<header>
    <hgroup>
        <h1> Itt Magyarországon az a gond, hogy senki sem meri felvállalni, amit mondott.  </h1>
        <h2> De ezt nem tőlem hallottátok! </h2>
    </hgroup>
</header>

HTML5 Audio

Már nincs szükség flash elemeket vagy más pluginek használni a hangfájlok lejátszásához, mert a HTML5 felkánálja erre az audio elemet. 

1.
2.
3.
4.
5.

<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Letöltés</a>
</audio>

A letöltést érdemes felkínálni, mivel a régebbi böngészők nem támogatják. Egyik hátulütője, hogy Firefox csak .ogg-t Safari pedig csak .mp3-at játszik le, így a fájlokat mindkét formátumban fel kell töltenünk.

Példa

HTML5 Video

Az előzőhöz hasonlóan itt is két formátumot kell majd feltölteni, ugyanis az elem nem szabja meg a codec típusát, így Safari és IE9 H.264-et, míg Firefox és Opera a nyílt forráskódú Theora-t és Vorbis-t támogatják.

1.
2.
3.
4.
5.

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> A böngésződ elavult. <a href="cohagenPhoneCall.mp4">Töltsd le a videót.</a> </p>
</video>

Youtube is támogatja már ezt a HTML5 funkciót, amit saját oldalunkba a következő iframees megoldással tudunk integrálni: 

1.
2.

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>

Sajnos mivel flash reklámok vannak, az ilyen videók mindig flashben jelennek meg.

Néhány tipp

  1. Nem szükséges beállítani a type tulajdonságot, azonban sávszélességet spórolunk ha nem a böngészőnek kell kitalálnia miről is van szó.
  2. Mivel nem minden böngésző támogatja, ezért a fent látható módon felkínálhatunk egy letöltési linket, vagy beágyazhatunk egy flash videót.

Preload

Segítségével a videó elem létrejöttének pillanatában elkezdhetjük betölteni azt, így a felhasználónak kevesebbet kell várnia ha meg akarja nézni. Azonban legyünk körültekintőek, mivel ha minden oldalunkon van ilyen video, akkor valószínűleg hamar megcsappan a forgalmunk, hiszen eszi a sávszélességet.

1.
2.
3.

<video preload>
<!-- vagy -->
<video preload="preload"

Mark

Ez egy szövegkiemelő, leginkább akokr hasznos, ha valaki az oldalad keresőjébe beírta hogy 67, és az eredményben ki akarod emelni ezt a kulcsszót:

1.
2.

<h3>Találatok</h3>
<p> A Ford Mustangot 19<mark>67</mark>-ben gyártották. </p>

HTML5 támogatottság

Többféle módszer van arra, kiderítsük az adott böngésző támogatja -e a használni kívánt funkciót. Egyik ilyen a Modernizr használata.

Másik lehetőségünk, így néz ki:

1.
2.
3.
4.
5.
6.

<script>
//támogatja -e az input az eamil tulajdonságot
if (!('email' in document.createElement('input')) ) {
	// js végzi el az ellenőrzést
}
</script>
Vigyázz! Minden eddig olvasott cikkben if (!'email' in document.createElement('input') ) ezt láttam, ami nem helyes, mivel ! az ‘email’ stringet fogja negálni, és nem a kiértékelés eredményét.

Összegzés

Érdemes mindenképpen próbálkozni, mivel előbb utóbb szabvány lesz az összes böngészőben. A végére néhány hasznos link:

  • Csharlie

    jól tolod! komolyan, tetszik amit működsz!

  • Csharlie

    jól tolod! komolyan, tetszik amit működsz!

  • http://twitter.com/ZoliKa_ Hankó Zoltán

    Azt írtad az article tag külső oldalból származó cikk, de ezt a taget elég sokan cikk ként használják

    első hír
    második hír
    harmadik hír

    Sőt nem csak lista oldalon, hanem egy cikk megjelenítéséhez is előszeretettel használják. Most akkor kinek van igaza? :D