Zomrelo XHTML, nech žije HTML5

rip-xhtmlKonzorcium W3C oficiálne oznámilo, že vývojová skupina pracujúca na štandarde XHTM2 ukončí svoju činnosť do konca roka 2009. Dôvodom je navýšenie prostriedkov na dokončenie prác na HTML5.

Pri tejto príležitosti uverejnil server Veign.com pdf dokument, v ktorom nájdete prehľad použitých tagov v novom jazyku HTML5. Potrvá ešte niekoľko rokov, kým sa úplne dokončí štandard HTML5 a implementujú ho internetové prehliadače. Dokument bude treba ešte aktualizovať, no na základné zorientovanie sa táto pomôcka úplne postačuje.

HTML5 cheat sheet (PDF 76,8 kB)

Vlastná ikonka web stránky v iPhone

iphone-iconUž vyše mesiaca som spokojným vlastníkom iPhone 3G. Zrástol som s ním, vyšperkoval som ho aplikáciami a až na pár maličkostí je to skvelá vecička.

Ale k téme, keďže mojou prácou je tvorba web stránok, rozhodol som sa postupne všetky projekty obohatiť o ikonku pre iPhone (iPod touch). Dôvod je ten, aby aj na ploche iPhonu po uložení odkazu mal web peknú ikonku a nie len zmenšeninu stránky, čo nevyzerá dobre.

apple-touch-icon-cajovna

Rozmer ikonky pre iPhone je 57×57 pixelov vo formáte png. Ostáva už len nasledovný html tag link do hlavičky stránky:

< link rel="apple-touch-icon" href="apple-touch-icon.png" />

Slovenské katalógy

portals

Za necelý týždeň budú dva roky, odkedy som napísal článok Vyhľadávače a zoznamy na slovenskom internete.

Keďže práve v tejto dobe Google aktualizoval Page Rank, obohatím zoznam o túto hodnotu a linku priamo na registračný formulár.


Všeobecné katalógy

názov registračný formulár Google Page Rank
Zoznam.sk formulár 6/10
Atlas.sk formulár 6/10
Best.sk 6/10
Centrum.sk formulár 6/10
Najdes.sk formulár 6/10
Pozri.sk 5/10
Hladat.sk 5/10
Vševedko.sk formulár 5/10
Azet.sk formulár 4/10
Surf.sk formulár 4/10
Abc.sk formulár 4/10
KdeJe.sk formulár 4/10
Xsite.sk formulár 4/10
Aktualny.sk formulár 4/10
Katalog.sk formulár 4/10
KdeJe.sk formulár 4/10
Link.sk formulár 4/10
Orangeportal.sk formulár 4/10
SZM.sk 4/10
Xsite.sk formulár 4/10
Atriniti.sk formulár 3/10
Adresári Firiem.sk formulár 3/10
Katalog sk-fun.sk formulár 3/10
Webstránka.sk formulár 3/10
Xportal.sk formulár 3/10
Katalog Priestor formulár 3/10
Zambu.sk formulár 2/10
Firmy.ws formulár 2/10
Bil.sk formulár 0/10
Hit.jukni.eu formulár 0/10
Exo.sk formulár 0/10

Katalógy eShopov

názov registračný formulár Google Page Rank
Eshopy.sk formulár 4/10
e-Nakupovanie.sk formulár 3/10
123obchody.sk formulár 3/10
1shopy.sk formulár 2/10

Katalógy blogov

názov registračný formulár Google Page Rank
Blogomania.sk formulár 3/10
Populari.us formulár 2/10

Katalógy článkov

názov registračný formulár Google Page Rank
Vybrali.sme.sk * formulár 5/10
Moje linky.sk formulár 5/10
Linkujto.eu * formulár 2/10

Cenové Katalógy

názov registračný formulár Google Page Rank
Najnakup.sk formulár 4/10
Najdicenu.sk formulár 4/10

JavaScript – Overenie sily hesla

Dnes som mal za úlohu vyriešiť zobrazenie sily hesla. Po tom, ako užívateľ zadá svoje heslo do formulárového pola, malo by sa mu pomocou JavaScriptu zobraziť nakoľko je silné.

Silu hesla môžeme posudzovať podla rôznych parametrov. Volil som nasledovné:

  • minimálna dĺžka hesla by mala byť aspoň 8 znakov
  • heslo by malo obsahovať veľké aj malé písmená
  • heslo obsahuje číselný znak
  • heslo obsahuje špeciálne znaky ! / | < > @ = # ” $ § % ^ ° ‘ ` ‘ & * ? _ ~ – ( )
  • heslo má viac ako 12 znakov

Každá jedna podmienka pridáva heslu jeden bod. Najnižšie hodnotenie je teda 0, najvyššie 5. Z toho vyplývajú stavy hesla ako krátke, veľmi slabé, slabé, dobré, veľmi dobré, vynikajúce.

Každý zo stavov sa dá pekne graficky znázorniť, aby to bolo užívateľsky príjemné.

JavaScript vyzerá nasledovne:

var desc = new Array();
desc[0] = "krátke";
desc[1] = "veľmi slabé";
desc[2] = "slabé";
desc[3] = "dobré";
desc[4] = "veľmi dobré";
desc[5] = "vynikajúce";

function passwordStrength(password, desc) {
var score = 0;
//ak je heslo väčšie ako 7 znakov, dostane 1 bod
if (password.length > 7) score++;
//ak heslo obsahuje malé aj veľké znaky, dostane 1 bod
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
//ak heslo obsahuje číslicu, dostane 1 bod
if (password.match(/d+/)) score++;
//ak heslo obsahuje špeciálny znak z množiny, dostane 1 bod
if ( password.match(/.[!,/,\,|,< ,>,@,=,#,",$,,§,%,^,°,',`,',&,*,?,_,~,-,(,)]/) ) score++;
//ak je heslo väčšie ako 12 znakov, dostane 1 bod
if (password.length > 12) score++;
//hodnota pre menej ako 6 znakov
if (password.length < 6) score = 0;
//6 alebo 7 malých alebo veľkých písmen v jednom hesle, aby sa zabránilo falošnému hodnoteniu
if ( ( password.length > 5 ) && ( score == 0 ) ) score++;

document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}

Časť v HTML:


<input type="password" name="password" onkeyup="passwordStrength(this.value, desc)" /><br />
<span id="passwordDescription"></span><br/><span id="passwordStrength" class="strength0">&nbsp;</span>

CSS môže vyzerať aj takto:


.strength0,.strength1,.strength2,.strength3,.strength4,.strength5{display:block; height:10px; width:150px;}
.strength0{background-color:#cccccc;}
.strength1{background-color:#ff0000;}
.strength2{background-color:#ffCC00;}
.strength3{background-color:#00dd00;}
.strength4{background-color:#009900;}
.strength5{background-color:#006600;}

Na záver demo:

Keďže Javascript a ja sa poznáme, no netykáme si, tento článok neberte ako článok odborníka. Určite to ide spraviť mnohými inými spôsobmi, no ja som prišiel asi po hodinke štúdia k tomuto riešeniu.