Ako na responsive design

napísal , 10 Apr 2012

Responsive design je v poslednej dobe je tak omieľaný trend, že o ňom hovorí pomaly aj moja babka. V zásade ide o fajn koncept. Namiesto kódenia a udržiavania niekoľkých samostatných verzií stránky (normálnej desktopovej verzie a mobilnej verzie) sa spraví jedna s pár dodatočnými informáciami, vďaka ktorým sa stránka prispôsobí akémukoľvek (rozumnému) rozlíšeniu. Od mobilu až po FullHD display.

Otvorte si demo, pohrajte sa so šírkou prehliadača a hneď pochopíte.

Skôr, ako prejdem ku konkrétnemu kódu, by bolo vhodné povedať, prečo uprednostniť responsive design pred starším trendom mobilných verzií.

Nuž. V ideálnom prípade stačí responsive design vytvoriť pridaním pár riadkov CSSka, v horšom aj pár riadkami JavaScriptu (tj. robota na pár hodín). Mobilná verzia je proste iná verzia generovaná serverom. Čiže má samostatné HTML, CSS a zrejme aj JavaScripty. Ak chcete niečo pridať, musíte prepisovať obe verzie.

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;...

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 :)

Jediný doctype, ktorý potrebujete

napísal , 5 Oct 2010

je tento <!doctype html>. Štruktúra HTML dokumentu potom vyzerá takto:

<!doctype html>
<html>
  <head>  
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html> 

Keď píšete stránku, chcete písať stránku a nie nezmyselné riadky plné divných znakov, u ktorých možno ani neviete, čo znamenajú (a ktoré prehliadače často aj tak ignorujú). Tento doctype je pekný, funkčný, jednoduchý a keď ho použijete, môžete pri <script> a <link> kľudne vynechať style="" atribút, whee! :)
 

Funny thing - prehliadačom je totálne jedno, aký doctype im podhodíte. Ten je tam aj tak len preto, aby sa neaktivoval quirks mode, čo je zloba, takže <!doctype html> a sme v pohode.

Že sa zbavujeme dodatočných atribútov nás tiež trápiť nemusí, browser to robí na pozadí tak či tak sám. Z <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ho zaujíma iba <meta charset="utf-8"> tak prečo písať viac? Nový doctype je v mnohom len o priblížení sa k tomu, ako prehliadače skutočne fungujú.

 

pro tip: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> prinúti IE vždy použiť najnovší renderovací engine alebo Chrome Frame.

Najrýchlejší úvod do vytvárania web stránok

napísal , 3 Oct 2010

Tento návod som sa rozhodol napísať, keďže už dosť ľudí po mne chcelo, nech im vysvetlím ako sa dajú tvoriť vlastné web stránky, ako to všetko okolo nich funguje a kde sa to naučiť. Samozrejme, že si môžu nakúpiť knihy, ale tie bývajú spravidla tak rozťahané, že ich veľa ľudí ani nedočíta. Plus zaťažujú množstvom detailov, ktoré na začiatku iba mýlia a zdržujú.

Preto píšem tento návod čo najstručnejšie, aby slúžil ako alternatíva k prehnane ukecaným knihám a aby ste namiesto zbytočného čítania mohli radšej kódiť. :p

Najskôr zbežný prehľad o tom, čo všetko sa deje, keď si v prehliadači otvoríte nejakú stránku. To aby ste vedeli kde sa vlastne používajú všetky tie technológie ako je HTML, CSS, PHP, SQL, JavaScript, jQuery, AJAX a iné.

1) Zadáte URL adresu - to je celý ten text, čo vidíte hore v address bare prehliadača.

2) Na základe názvu stránky (t.j. domény) sa zistí IP adresa servera, na ktorom sa nachádza hľadaná stránka. (Na toto slúži DNS server, ktorého adresu poznáme)

jQuery externe a lokálne

napísal , 22 Sep 2010

Ťahať jQuery z nejakého toho externého CDN je fajn. Máte po ruke najnovšiu verziu a je dosť možné, že návštevník vašej stránky už bol na inej CDN pozitívnej stránke a má ho teda v cache. Niekedy ale treba mať knižnicu po ruke lokálne - nie všade, kde chcete pracovať, sú internety. A čo ak padne externý server? Oh noo...

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
  !window.jQuery && document.write('<script src="js/jquery.js"><\/script>')
</script>

Ak sa nepodarí načítať z CDN, pridá sa lokálne. Na otestovanie je namiesto obyčajnej if() podmienky použitá zaujímavá finta. Pri && operátore platí, že druhá časť sa vykoná len v prípade, že prvá bola vyhodnotená ako true. Takže iba ak jQuery neexistuje (!window.jQuery) vykonáme document.write(...). Happy times :)

Trik je odkukaný z projektu HTML5 ★ Boilerplate.

Poznáte <base> tag?

napísal , 19 Sep 2010

HTML tag, patrí do <head> a akceptuje atribút href="[url]".

[url] je absolútna adresa, ktorá sa stane štartovacím bodom, pre všetky linky na stránke. Všetky relatívne odkazy na stránke sa stanú relatívnymi voči base url. Takže:

<head>
  <base href="http://win.brm.sk/">
</head>
<body>
  <a href="facepalm.jpg">chjaj</a>
</body> 

Odkaz bude smerovať na http://win.brm.sk/facepalm.jpg, bez ohľadu na to, kde sa nachádzame.

Ak nepoužívate strict doctype, môžete použiť aj atribút target. <base target="_blank"> teda spôsobí, že všetky odkazy sa budú otvárať v novom tabe/okne. Osobne nemám rád, keď stránka za mňa rozhoduje akým spôsobom otvorí link, ale niekedy to od vás môžu ľudia vyžadovať.