13 pomôcok pri tvorbe WordPress tém -> 13 Helpful Cheat Sheets for Building WordPress Themes
Zomrelo XHTML, nech žije HTML5
Konzorcium 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.
Vlastná ikonka web stránky v iPhone
Už 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.
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" />
Ako na vertikálne centrovanie viacriadkového textu
CSS trik na vertikálne centrovanie viacriadkového textu. Funkčné vo všetkých IE.
http://css-tricks.com/vertically-center-multi-lined-text/
Zdroj: css-tricks.com
Slovenské katalógy
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 |
Vyhľadávač ikoniek
Dnes som potreboval pár ikoniek do projektu jednej cestovky, tak som sa ako vždy pustil do googlenia a natrafil som na super vecičku. Našiel som vyhľadávač ikoniek http://www.iconlook.com/
Na základe kľúčového slova nájde ikonku, ktorú si môžete hneď aj stiahnuť.
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"> </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.