28 HTML5 stvari, saveta i tehnika koje morate znati! II


7. Imejl

Ako primenimo type „email“ pretraživaču poručujemo da isključivo dopušta validne imejl adrese. Baš tako! Forma za validaciju će uskoro postojati! Ne možemo se 100% osloniti na ovo, iz očiglednih razloga – u starijim pretraživačima koji ne razumeju „email“ type sve će se odvijati kroz regularni text box. Treba naglasiti da se pretraživači poprilično razlikuju kada je reč o tome koje atribute i elemente podržavaju. Na primer, Opera podržava imejl validaciju ukoliko je specificirano ime (name) atributa. Sa druge strane, ne podržava atribut „placeholder“. Zaključak je da se ipak još ne možemo pouzdati u validaciju formulara.

<!DOCTYPE html>
<html lang=„en“>
<head>
<meta charset=„utf-8“>
<title>untitled</title>
</head>
<body>

<form action=““ method=„get“>
<label for=„email“>Email:</label>
<input id=„email“ name=„email“ type=„email“ />
<button type=„submit“> Submit Form </button>
</form>
</body>
</html>

Pretraživači različito podržavaju inovacije, ali sasvakim novitetom, HTML5 je sve više podržan!

8. Placeholders – plejsholderi

Ranije smo morali da upotrebljavamo JavaScript kako bismo imali plejsholdere u poljima. Naravno, uvek možete da postavite atribut „value“, međutim, čim korisnik obriše tekst iz polje, ili klikne negde drugde, unos će nestati. Atribut „placeholder“ ispravlja ovaj nedostatak. Naravno, kao i prethodno, pretraživači tek u naznakama počinju da podržavaju ovaj atribut, međutim, to sve uzima zamaha sasvakim novitetom koji se pušta na tržište.

<input name=„email“ type=„email“ placeholder=„doug@givethesepeopleair.com“ />

9. Lokalno spremište

Zahvaljujući lokalnom spremištu, napredni pretraživači „pamte“ šta kucamo, čak iako se zatvore ili osveže stranice. Iako ovu opciju ne podržavaju svi pretraživači, sasvim je izvesno da je možete susresti na Internet Exploreru 8, Safariju 4, i Firefox-u 3.5. Što se tiče starijih pretraživača koji ne prepoznaju lokalno spremište, prvo treba da utvrdite da li postoji window.localStorage.

10. Semantički heder i futer (header i footer)

Ovo su davno prošli dani:

<div id=„header“>

</div>
<div id=„footer“>

</div>

Divovi, sami po sebi, nemaju semantičku strukturu, čak i kad se primeni „id“. Uz primenu HTML5 imamo pristup elementima hedera i futera. Sada, kod odgore, može biti zamenjem sledećim kodom:

<header>

</header>
<footer>

</footer>

Pokušajte da ne mešate ove elemente sa hederom i futerom Vašeg web sajta. Prosto se odnose na sadržaj. Kao takvi, imaju svoju svrhu kad se radi o meta informacijama koje se nalaze na dnu posta na blogu, u okviru elementa „footer“. Isto se odnosi na heder.

11. Internet Explorer i HTML5

Nažalost, Internet Eksplorer ima poprilično mnogo muka u razumevanju novih HTML5 elemenata. Kako bismo osigurali da se novi HTML5 elementi čitaju ispravno, kao block level elementi, neophodno je da instrukcije zadamo ovako:

header, footer, article, section, nav, menu, hgroup {
displayblock;
}

Nažalost, Eksplorer će nastaviti da ignoriše ovo, zato što nema pojma šta predstavlja, na primer, elemenat „header“. Srećom, postoji laka popravka:

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

Interesantno je da ovaj kod aktivira Eksplorer. Kako bi pojednostavio ovaj proces ya svaku novu aplikaciju Remi Šarp (Remy Sharp) je napisao skriptu koja se odnosi na HTML5. Takođe, ova skripta rešava i neke probleme vezane za štampu.

<!–[if IE]>

<script src=„http://html5shim.googlecode.com/svn/trunk/html5.js“></script>

<![endif]–>

12. hgroup

Zamislite da u hederu Vašeg sajta stoji naziv sajta, kojeg odmah potom prati podheder. Iako možemo da koristimo <h1> i <h2> tagove, respektivno, kako bismo napisali kod, i dalje ne postoji (u HTML4) jednostavan način da semantički ilustrujete odnos između njih. Štaviše, upotreba h2 taga još više stvara probleme u pitanju hijerarhije kada je potrebno prikazati još naslova (hedera) na stranici. Upotrebom „hgroup“ elementa, možemo zajedno grupisati ove hedinge bez ikakvog remećenja spoljnog izgleda.

<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>


Pretraživači različito podržavaju inovacije, ali sasvakim novitetom, HTML5 je sve više podržan!

Jovan Ivezic

E-business and internet marketing specialist.

Latest posts by Jovan Ivezic (see all)

facebook
twitter
google
pinterest