webrebel zaklady programovania a oop objektovo orientované programovanie

HTML inline a block elementy

napísal , 31 Oct 2010

Rozdiel medzi inline a block elementami patrí medzi základné koncepty, ktoré treba pri web-stránkach pochopiť. Hlavne keď neskôr príde na CSS. Nebojte, skúsim sa vyhnúť zbytočným poučkám a prebehnem to najdôležitejšie.

Block HTML elementy

  • napr.: <div> <p> <h1>...<h6> <table> <form> <ul> <li> <pre> <blockquote>...
  • zaberajú plnú šírku svojho rodiča ak mám <div id="rodic"> široký 300px a v ňom <p id="decko">, tak #decko sa automaticky natiahne na 300px bez ohľadu na to, koľko textu a inej hávede v sebe má
  • okupujú samostatný riadok zjednodušene to funguje ako keby ste pred a za element dali <br>
  • môžu obsahovať iné inline/block elementy používajú sa ako také "obaľovače" pre ostatné elementy

Inline HTML elementy

  • napr.: <span> <a> <img> <strong> <em> <br> <input>...
  • zaberajú len koľko potrebujú
  • zobrazia sa v tom istom riadku, zarovno s textom
  • môžu obsahovať len inline elementy: ako <img> v <a> často sa jedná o elementy s "dekoračnými" účelmi, ktoré zmenia text na tučný, zalomia riadok alebo vytvoria link

Čítajte ďalej a odhaľte silu CSS a display: inline-block;...

I Neil deGrasse Tyson

napísal , 30 Oct 2010

Toto je preklad článku, ktorý som svojho času poslal do sveta cez google reader. Mám chuť (potrebu!) sa oň podeliť znova, tentoraz po slovensky - fakt, ktorý sa stane bezvýznamným v momente, keď sa pustíte do videí, ktoré samozrejme zostávajú v angličtine :)


Neil deGrasse Tyson je brilantný astrofyzik, znamenitý rozprávač a enormne zábavný človek, na ktorého sa skvelo pozerá a ešte lepšie sa počúva. A čo je možno najdôležitejšie - chápe, že "odborné výrazy" patria do laboratória a zložité koncepty dokáže vysvetliť maximálne jednoducho a jasne.

Videá začínajú v momente s pointou, ktorá ma zaujala. To ale neznamená, že by ste ich nemali pozerať celé - naopak. Sú plné podobných perál... a spomínal som, že je to človek hrozne zábavný? :)

"we astrophysicists tell it how it is" - o dôležitosti jednoduchého vyjadrovania sa


sledujte ďalej a odhaľte, okrem iného, ktoré 2 typy ľudí zahynú v tsunami, ktorá zničí planétu :)

Validácia HTML kódu je tu pre dobrý pocit

napísal , 29 Oct 2010

Sú ľudia, ktorí považujú w3c štandardy za slovo božie a stránky, ktoré neprejdú validáciou za menejcenné. Sú ľudia ako Douglass Crockford, ktorí tvrdia, že w3c konzorcium nevie, ako Internet funguje.

Osobne validáciou považujem za ekvivalent achievementov vo videohrách. Som rád, keď vidím krásne zelenú hlášku "This document was successfully checked.." a niekedy sa o to aktívne snažím. Pre dobrý pocit.

Avšak rovnako ako pre dokončenie hry nepotrebujete pozbierať všetky achievementy, pre dokončenie stránky rozhodne nepotrebujete spĺňať všetky podmienky validácie. Mnohé sú užitočné (validátor je taktiež dobrá pomôcka pri odhaľovaní preklepov či zle uzatvorených tagov), ale priznajme si, kopa z nich je ridikulózna.

Ak musím niečo obaľovať do nadbytočných elementov, kašlem na to. <tfoot> v tabuľke nedám pod <thead>, ale pekne dole pod <tbody>. Lebo postupnosť hlava-telo-päta je logická, ostatné sú nezmysel. Viem, má to praktický význam, ale možno tak pri tabuľkách s miliónmi údajov.

A prehľadný kód > validný kód.

Štandardy sa snažím dodržovať, pokiaľ to nie je súboj ústiaci vo frustráciu.

Som však za to, aby sa tagy používali na to, na čo sú určené. Nechcem sa veľmi oháňať frázami ako "sémantický web", skôr mi ide o to, že na pekne štruktúrovaný a bohatý html sa dobre pozerá, je prehľadný a jednotlivé elementy sa dajú jednoducho cieliť v CSS-kách a JavaScriptoch. Kolujú dokonca chýry, že na pekne štruktúrovaný kód sa dobre pozerá aj Googlu, ktorý ho za to patrične odmení ;)

Keď už sme pri tom... čo sa týka CSS validácie - ignorujte ju a ignorujte každého, kto tvrdí, že na nej záleží. Nezáleží. CSS je rozbitý štandard, každý browser implementuje inú podmnožinu iným spôsobom a človek aj bez toho potrebuje často stvárať absurdné ninja kúsky k tomu, aby dosiahol čo potrebuje. A to aj keď neberieme v úvahu staré IEčka. CSS hacky, prefixy, čokoľvek potrebujete - všetko s absolútnym kľudom používajte.

Nechcem byť advokátom zlého kódu. Ľudia by nemali písať stránky "ako sa podarí" a nechať na browser, nech si s tým poradí. Nemali by to ale ani zbytočne preháňať s validáciou. Všetko pekne v rámci oného :)

Preload obrázkov v JavaScripte

napísal , 23 Oct 2010
<script>
  new Image().src = '/images/masivne_gule.png';
</script>

je všetko, čo treba k tomu, aby ste načítali obrázok ešte predtým ako sa zobrazí.

Pri rýchlostiach dnešných pripojení to možno nemá až take opodstatnenie, ale existujú prípady, kedy vás to vytrhne z biedy - ak robíte nejakú prudko kickass galériu obrázkov alebo pokiaľ by ste vo Firefoxe chceli zobraziť niektoré obrázky až PO submitnutí multipart formulára (napríklad progress bar uploadu). Tiež nezaškodí už dopredu načítať ajax-loading-obrázky.

Kirby's Overrated Yarn

napísal , 23 Oct 2010

Recenzia Kirby's Epic Yarn
Kirby's Epic Yarn (2010)
by Good-Feel, HAL Laboratory, Nintendo

Keď sa už spomína Kirby, dotiahnem to do úspešného konca a vylejem trocha svojho žiaľu nad posledným dielom z tejto série. Nintendo by sa len tak mimochodom mohlo spamätať a po pár desiatkach rokov prísť aj s nejakou novou sériou. Mariov, Zield™, Metroidov, Kirbyov a Donkey Kongov bolo už naozaj dosť. Na Kirby's Epic Yarn som sa napriek tomu tešil - stačí pozrieť ako nádherne a unikátne vyzerá a hneď pochopíte prečo. :)

Screenshot Kirby's Epic Yarn

Vzhľad si naštastie zachoval a musím povedať, že celá hra je fakt pekná, zlatá a adorabilná. :) Na druhej strane sa zastaralosť Wii prekvapivo silne prejavila aj napriek tomu, že hra je 2D a stále som mal pocit, že na estetické kvality takého kalibru je obraz strašne rozmazaný. Predsa len 640x480 je ukrutne málo a nezachráni to ani RGB kábel. Nad toto by som sa však vedel v pohode povzniesť, keby je hra zábavná.

Problém tkvie v tom, že Epic Yarn nepredstavuje skoro žiadnu výzvu. Zomrieť sa proste nedá a najhorší trest je, že vám vypadnú nazbierané body, ktoré si môžete následne pozbierať.. Uf.. Kirby je tým pádom nezastaviteľné hovädo, ktorému nevie nikto a nič zabrániť v tom, aby sa bez väčšej námahy pretlačil na koniec úrovne. Takýto štýl by možno vyhovoval menším deťom (spolu s celkovou infantilnosťou hry), akurát že to si nemám ako overiť, takže mi nezostáva nič iné len to súdiť podľa seba. :p

This Film Is Not Yet Rated (2006)

napísal , 23 Oct 2010

this film is not yet rated review header
by Kirby Dick

MPAA (Motion Picture Association of America) je organizácia, ktorá čumí na filmy a potom na ne nalepí "rating", určujúci kto smie a kto nesmie film vidieť (sekundárna funkcia je nezmyselne žalovať "pirátov", ale to teraz nechajme). Ok. Teoreticky užitočná vec, sú veci, ktoré by malé deti nemali vidieť. Problém je, že.. uhm.. kde začať.

MPAA tvrdí, že jej hodnotenia sú čisto informačného charakteru, majú len radiť, nie prikazovať. Až na to, že vydavatelia ich berú ako vytesané do kameňa a zlý rating môže film potopiť. Nie je tiež možné zaručiť rozmanitosť členov komisie, pretože ich identity sú držané v tajnosti a za ich najímanie je zodpovedný jediný človek. Žiadna kontrola, nulová transparencia! Ratingy sú potom udeľované čisto na základe subjektívnych preferencií daných osôb.

Režisér Kirby Dick najíma súkromného detektíva, vydáva sa na cestu za odhalením identity členov MPAA a za pomoci nezávislých režisérov v tomto dokumentárnom filme objasňuje praktiky tejto nádhernej organizácie.

Generovanie pekných URL

napísal , 20 Oct 2010

Pre SEO sú veľmi dôležité vhodne formátované URL adresy. Taká dobrá URL by mala obsahovať viac menej len text úzko súvisiaci s obsahom, avšak bez diakritiky a podobnej chamrade, aby nevznikali problémy pri kopírovaní linkov a parsovaní adries vyhľadávačmi.

Chamraď sa dá buď nahradiť URL entitami (%20 je napríklad medzera), čo môže byť pri niektorých znakoch stále nespoľahlivé alebo sa z nej dá odstrániť diakritika a zvyšok nahradiť pomlčkami.

Druhý spôsob sa nám najviac osvedčil a používame naň túto funkciu:

function seo_url($str)
{
  $str = remove_accents($str);
  $str = preg_replace('/[^a-zA-Z0-9-]/', '-', $str);	
  return strtolower(trim(preg_replace('/-+/', '-', $str), "-"));
}

V prvom riadku sa odstáni z písmen diakritika:
Bŕm™ džžž DrÍST ブレイド!   ->   Brm™ dzzz DrIST ブレイド!

v druhom riadku sa nahradia všetky znaky okrem písmen a číslic pomlčkami:
Brm--dzzz-DrIST------

a v treťom sa všetky susediace pomlčky spakujú do jednej, odstránia sa pomlčky z krajov a všetky písmená sa premenia na malé:
Brm-dzzz-DrIST-   ->   Brm-dzzz-DrIST   ->   brm-dzzz-drist

Funkcia remove_accents() potom vyzerá nasledovne:

function remove_accents($str)
{
  return str_replace (
  array(
    'à','á','â','ã','ä','å','æ','ç','ć','č','ď','đ','ð','è','é','ê','ë','ę','ě','ì','í','î','ï','ĺ','ľ','ł','ň','ñ','ò','ó','ô','õ','ö','ő','ø','ŕ','ř','ś','š','ß','ť','þ','ù','ú','û','ü','ű','ů','ý','ÿ','ž',
    'À','Á','Â','Ã','Ä','Å','Æ','Ç','Ć','Č','Ď','Ð','È','É','Ê','Ë','Ę','Ě','Ì','Í','Î','Ï','Ĺ','Ľ','Ł','Ň','Ñ','Ò','Ó','Ô','Õ','Ö','Ő','Ø','Ŕ','Ř','Ś','Š','Ť','Þ','Ù','Ú','Û','Ü','Ű','Ů','Ý','Ÿ','Ž'
  ),
  array(
    'a','a','a','a','a','a','ae','c','c','c','d','d','d','e','e','e','e','e','e','i','i','i','i','l','l','l','n','n','o','o','o','o','o','o','o','r','r','s','s','ss','t','th','u','u','u','u','u','u','y','y','z',
    'A','A','A','A','A','A','AE','C','C','C','D','D','E','E','E','E','E','E','I','I','I','I','L','L','L','N','N','O','O','O','O','O','O','O','R','R','S','S','T','TH','U','U','U','U','U','U','Y','Y','Z'
  ), $str );
}

Takýto "brute force" spôsob je momentálne jediný spoľahlivý a obdobná funkcia by oficiálne mala byť až v PHP 6. Konkrétne táto funkcia je využiteľná viac menej vo všetkých krajinách používajúcich latinku okrem Vietnamu a možno pár inch krajín, ktoré majú fakt divoké znaky a nechcelo sa mi nimi zapodievať ^^. Ak by aj náhodou neodstránila diakritiku, jediné čo sa stane je, že z URL vypadne daný znak.

ǚ
evil u is evil