Vytvárame webové stránky, 20. časť

Minule sme skončili pri krátkom predstavení frameworkov na budovanie vašich webových stránok. Pokračujeme ďalej apodrobnejšie vám predstavíme modulárne riešenie snázvom Foundation 5, vydané koncom minulého roka.

Príprava

Na použitie si treba stiahnuť zostavu frameworku. Je zadarmo apod licenciou MIT Licence, kompatibilnou sGPL. Očo ide? Vkompletnom balíku dostávate riešenie sobsahom JavaScriptu aCSS na používanie rôznych prvkov, ako sú tlačidlá, formuláre, stránkovacie pole, náhľadové boxy alebo boxy srolovacím obsahom, na vašej stránke. Pozor, to všetko sdôrazom na zachovanie štandardov pri programovaní afunkčnosti na rôznych zariadeniach. Vtomto rozhraní programujete už od začiatku web tak, aby bol sjedným kódom použiteľný na mobile aj na full HD notebooku. Hneď na začiatku upozorňujeme, že nie je podporovaný Internet Explorer 8 zdôvodu ukončenia podpory zo strany výrobcu. Stále sú však na stránke foundation.zurb.com dostupné aj staršie verzie spodporou až do IE6.

Stiahnuť sa dá okrem úplnej verzie aj čiastkový framework. Na stránke výrobcu je vsekcii Download možnosť prispôsobiť si svoj balík Foundation. Je to výhodné najmä pre čistotu stránky avneposlednom rade aj zpohľadu optimalizácie načítaného kódu. Vyberať sa dá zcelej štruktúry apriamo pred exportom definujete vlastné parametre všetkých prvkov. Samozrejme, nie je problém ponechať štandardné hodnoty aneskôr ich vCSS upraviť. Ide odefinovanie mriežky amaximálnej šírky parametra em, farebné ladenie navigácie ainé. Zahrnutý je aj modul na stránkovanie, ktorý pokojne môžete vynechať. Exportom vlastného balíka určíte najmä to, čo nechcete na webe mať. Samostatnú kategóriu tvoria tlačidlá, rozbaľovacie zoznamy, formuláre atypografické prvky. Vrámci výberu sa definujú aj prvky JS, napríklad rôzne náhľadové boxy alebo rolovacie prvky na stránke.

Prispôsobenie balíka Foundation ešte pred stiahnutím

Silná stránka oproti predošlej verzii je zjednodušenie zápisu kódu. Žiadny neporiadok vtriedach CSS, len čistý zápis vrámci kódu HTML. Pridanie štandardného tlačidla vyzerá takto:

<a href="www.pcrevue.sk" class="button">Tlačidlo PCRa>

Na pridanie malého modrého tlačidla smenším textom písma postačí tento kód:

Malé tlačidloa>

Vzhľad veľkého amalého tlačidla

Pohľad na kód

Okrem čistoty kódu avýberu vlastností, ktoré chcete používať vo vlastnom Foundatione, je tu niekoľko ďalších zaujímavostí. Optimalizácii kódu sa nevyhli ani javascriptové funkcie, ktoré sa spracúvajú rýchlejšie. Pri testoch na mobilných verziách stránky to zbadáte. Využiť môžete napríklad on-line nástroj www.woorank.com. VCSS sú obsiahnuté Media Queries definujúce zobrazenie na rôznych zariadeniach podľa rozlíšenia. Podporované sú do rozlíšenia 640 pixelov až nad full HD rozlíšenie, teda od 1921 pixelov na osi x. Pridať si môžete aj vlastné, no osem definícií displejov bude drvivej väčšine postačovať.

Textové informácie rozdelené podľa rôznych veľkostí displejov je ideálne začleniť do triedy panel avšetky texty vňom sa budú zobrazovať len podľa definovanej triedy veľkosti displeja.

"panel">

"show-for-small-only">Text pre malé displeje.

"show-for-medium-up">Text pre stredne veľké displeje

Podľa displeja sa zobrazí vždy len jeden alebo druhý odsek. Do takéhoto kódu môžete pokojne vložiť celé texty. Kód vytvoríte dvakrát avždy striedou pre vybrané displeje. Potom sa budú zobrazovať len tie, ktoré spĺňajú podmienku triedy. Takisto existuje trieda hide-for-small-only. Už podľa názvu je jasné, že dané texty bude ukrývať, ak je splnená podmienka.

Vzhľadom na to, že dnes má čoraz viac počítačov dotykové displeje, otabletoch asmartfónoch nehovoriac, je tu ďalšia extra funkcia. Trieda show-for-touch zobrazí prvok, len ak sa stránka zobrazuje na dotykovom displeji. Využitie je rôzne, napríklad sa dá kombinovať spanelmi odkazov aich umiestnením alebo veľkosťou prvkov. Ďalej sú tu triedy na detekciu orientácie displeja, všetko je prehľadne uvedené vkóde CSS aj opise Foundation. Na začiatok odporúčame stiahnuť celú verziu, potom si už ľahko postavíte vlastný „build“.

Zjednodušená je práca smenu, pričom sa dajú vytvárať tzv. inline zoznamy vriadku, ktorémôžu byť prepojené na iný zdroj, teda ako klasický hyperlinkový odkaz. Špecialitou je vytváranie skupín tlačidiel. Ak ste programovali súpravu tlačidiel napríklad s cieľom postaviť znich lištu hlavného menu, viete, ako ľahko sa dokážu pri zmene rozmerov stránky „rozhodiť“. Tu ich máte zlúčené auž pri ich vytváraní je zohľadnená možná zmena veľkosti zobrazovacieho zariadenia. Stručne povedané – máte ušetrených minimálne pätnásť minút pri hľadaní vhodnej kompozície aúpravy rozloženia. Ak si takýchto button-group dáte vedľa seba viac, budú od seba vzdialené asi na 2 mm.

Menu z GroupButton

Všetky tlačidlá sa dajú kombinovať aj sparametrom radius round, ktorý vytvorí oblé tlačidlá. Polomer zaoblenia si treba upraviť vCSS alebo ešte pred exportom vlastnej zostavy celého frameworku. Medzi ďalšie prvky patrí vytvorenie progress baru. Podľa vzoru tlačidiel môže mať rôzne farby atvary.

Ukážka zobrazenia progress baru

Spomínali sme aj vytvorenie boxu smožnosťou rotovania obsahu. Vybrať si môžete ztextového alebo obrázkového Orbit slidera. Vzápise kódu vytvoríte prvok striedou orbit-container acez zoznamy UL do nich umiestnite požadovaný obsah.