<< Späť

12 -- responzivita, jQuery

Doteraz sme sa bavili o responzivite v zmysle, že jednotlivé prvky sa vedia prispôsobovať šírke obrazovky (relatívne jednotky, layouty pomocou grid a flex). Avšak, stále sme si nepoložili otázku, ako zabezpečiť, aby sa určité formátovanie (CSS) vykonalo len za presne danej podmienky?

Media queries

Ide o najjednoduchší a najpoužívanejší spôsob na zabezpečenie responzivity, tak ako sme si položili za cieľ v predošlom odstavci. Kritériá, ktoré nám rozlišujú aké formátovanie sa použije. Najčastejšími kritériami sú:

Technicky môžeme túto potrebu realizovať dvomi spôsobmi:

Spôsob 1

Do nášho už vytvoreného CSS súboru vložíme špeciálny "selektor" @media, do ktorého špecifikujeme nasledovné požiadavky:

Čiže pokiaľ chceme meniť nejaké CSS vlastnosti napr. pre obrazovku (okno), ktoré má šírku nanajvýš 380px, do nášho CSS súboru doplníme nasledovnú časť:

01

Spôsob 2

Ak by sme potrebovali pre našu stránku viacero media queries (napr. osobitne formátovanie pre šírky: do 380px, od 381px po 640px, od 641px do 1280px, 1280px a viac, tlačená verzia), náš CSS súbor by bol pridlhý a aj dostatočne neprehľadný. Preto je vhodnejšie si pre každé jedno query vytvoriť osobitný CSS súbor a ten načítať s príslušnou podmienkou do HTML súboru. Požiadavky špecifikujeme rovnako ako v prvom spôsobe.

Čiže situáciu z predošlého spôsobu by sme mohli implementovať aj nasledovne. Vytvoríme si CSS súbor s názvom napr. style_resp.css a do hlavičky (head) HTML vložíme nasledovný link:

02
Takto máme na stránke prelinkované 2 CSS súbory. Prvý obsahuje všeobecné formátovanie. Druhý obsahuje už len to formátovanie, ktoré sa má zmeniť, ak je šírka obrazovky nanajvýš 380px.

V obidvoch spôsoboch je dôležité poznamenať, že pokiaľ ste niekde vykonali formátovanie, ktoré nie je zmenené v nejakom query, zostane zachované. Toto je presne tá výhoda, ktorú nám media queries ponúkajú. Nemusíme osobitne celú stránku formátovať pre každý jeden typ obrazovky. Zvyčajne spoločné formátovanie (rodiny fontov, farby) naformátujeme do jedného spoločného CSS súboru a potom v ostatných súboroch, prislúchajúcich jednotlivým queries, formátujeme už len to, čo je špecifické pre to ktoré query.

Na nasledovnej ukážke si možno preskúmať, ako funguje media queries v praxi. Pri šírke obrazovky menej ako 1024px sa kompletne zmení štruktúra gridu a veľkosť písma sa prispôsobí veľkosti obrazovky (skontrolujte si, ako sa mení CSS):

link Ukážka 1

V prehliadači Google Chrome (ale aj ostatných populárnych prehliadačoch) môžeme priamo simulovať zobrazenie na telefóne nasledovne:

02

Tu prichádza na rad dôležitá poznámka. Ako možno vidieť, rozmery zariadenia, ktoré sú uvedené v riadku, majú relatívne nízke hodnoty. V skutočnosti, zariadenia, ktoré sú uvedené v zozname majú väčšie rozlíšenie (FullHD i viac), čiže naša podmienka do media queries nemusí fungovať podľa očakávania. Dôvodom je, že pri zobrazení stránky na mobilnom zariadení (a teda aj v simulácii v Chrome) dochádza k automatickému preškálovaniu. Ošetriť to vieme spôsobom, že priamo HTML dokumentu povieme, že v úvahu sa má brať skutočná šírka obrazovky zariadenia. V praxi to znamená vložiť do hlavičky dokumentu nasledovný meta tag:

<meta name="viewport" content="width=device-width" />

Orientácia

Ďalším zaujímavým obmedzením je orientácia obrazovky. Pri tvorbe verzie pre smartfóny sa často predpokladá, že mobil držíme v jednej ruke, t. j. displej je orientovaný ako portrét (šírka < výška). Tomu býva aj často prispôsobené celé rozloženie stránky, od rozmiestnenia jednotlivých prvkov (často je to do stĺpca), veľkosti písma a pod. Problém môže nastať v momente, keď mobil chytíme do oboch rúk a máme povolené automatické otáčanie obrazovky. Pokiaľ je obmedzenie nastavené na maximálnu šírku, technicky sa môžeme ale aj nemusíme trafiť do tohto obmedzenia. V prvom prípade to teda znamená, že jednotlivé prvky na stránke môžu zaberať priveľa miesta a teda, zobrazí sa nám omnoho menej obsahu. Týmto neduhom trpí mnoho stránok aj v dnešnej dobe.

Pomocou media queries sa dá doplniť podmienka, že formátovanie sa aplikuje len vtedy, keď formát obrazovky je portrét (šírka < výška, orientation: portrait), resp. krajinka (šírka > výška, orientation: landscape).

V našej ukážke máme nastavené obmedzenie na max. šírku 1024px a súčasne na portrétovú oreintáciu (všimnite si v kóde, aká je syntax ak naraz aplikujeme viac obmedzení).

Tlačiareň

Ďalším frekventovaným media query je print. Jedná sa o formátovanie webstránky, ktoré je špeciálne určené pre tlač. Pokiaľ si dáme vytlačiť nejakú webstránku (CTRL + P), tak hneď uvidíme, že nejaké formátovanie sa nastaví automaticky -- odstráni sa farebné pozadie a text sa prevedie na čiernu farbu:

04

V praxi avšak chceme "šetriť toner" a teda nenechávať na stránke objekty, ktoré po vytlačení nemajú zmysel -- jedná sa najmä o navigáciu.

V našej ukážke je toto query aplikované pomocou osobitného súboru style_print.css, kde sme skryli navigáciu a zväčšili sme nadpis v headeri (pozrite si, ako vyzerá toto CSS). Do HTML dokumentu, sme tento súbor prelinkovali použitím nasledovnej hodnoty atribútu media:

05

Responzivita a obrázky

Pokiaľ chceme mať na stránke obrázky, ktorých veľkosť je zadaná v relatívnych jednotkách, a teda reagovala na zmenu šírky, ich rozmer môžeme zadávať takisto napríklad v %. Tu však môže nastať problém, pokiaľ šírka obrázku je menšia, ako šírka (napr. nadradeného kontajnera). Vysvetlíme si to na nasledovnom príklade.

V našej ukážke máme obrázok, ktorý má šírku 1024px. My chceme, aby obrázok zaberal celú šírku nadradeného kontajnera a teda v CSS mu priradíme vlastnosť width: 100%. Avšak, ak náš kontajner bude širší ako 1024px, obrázok sa bude zväčšovať napriek svojmu rozmeru, a teda zobrazí sa v zlej kvalite (nastane pixelácia):

06

Pokiaľ nechceme, aby sa obrázok zväčšoval nad svoj skutočný rozmer, môžeme zväčšenie obmedziť tak, že pokiaľ kontajner je širší ako šírka obrázku, obrázok sa zväčšovať prestane. Slúži na to vlasnosť max-width, ktorej v našom prípade priradíme hodnotu max-width: 100% a výsledok je nasledovný (porovnajte si s predchádzajúcou animáciou):

07

Ďalej si povieme, ako sa popasovať s tým, keď pre obrázok máme vyhradený priestor s presne zadanými rozmermi. Opäť, vysvetlime si to rovno na príklade v ukážke. V kóde máme div triedy .fit_container, ktorý má rozmery 30vh x 30vh. Chceme, aby obrázok našej mačičky, ktorý chceme doň vložiť, vyplnil celý tento div. Problémom je, že obrázok nie je štvorcový ako náš div a ani nemá také rozmery ako náš div. Prvý problém teda vyriešime tým, že obrázku nastavíme width: 100%; height: 100%, čo už zabezpečí, že obrázok vyplní celý náš div. Avšak, prehliadač sa s tým popasoval tak, že obrázok preškáloval (a teda neproporciálne roztiahol) tak, aby celý vyplnil rodičovský div. V skutočnosti za to môže CSS vlastnosť object-fit, ktorá nadobúda svoju východiskovú hodnotu object-fit: fill. Okrem tejto hodnoty, máme v ponuke ešte tri ďalšie (vyskúšajte si všetky hodnoty v prieskumníkovi):

Celkovo možno povedať, že vlasnosť object-fit nám do veľkej miery uľahčuje prácu s obrázkami, nakoľko sa nemusíme starať, aká je ich skutočná veľkosť a koľko miesta pre ne treba vyhradiť.

jQuery

Na tomto kurze sa nebudeme zaoberať priamo JavaScriptom, nakoľko na to nie je časový priestor a navyše aj obsahovo by sme to nestihli v rozumnej miere pokryť. Namiesto sa rovno vrhneme do používania knižnice jQuery, ktorá nám za veľmi málo roboty ponúkne veľa muziky. Ide o javascriptovú knižnicu, v ktorej sú predimplementované rôzne často používané úkony a namiesto "desiatich riadkov javascriptu" použijeme jeden riadok v jQuery.

Ako to rozbehať

V zásade môžeme knižnicu načítavať dvomi spôsobmi -- z nejakého servera, kde je priamo uložená (toto načítavanie je o trochu rýchlejšie), alebo si priamo stiahneme zdrojový súbor a načítame ten. My použije práve druhú možnosť. Z oficiálnej stránky si stiahneme komprimovanú (production) verziu jQuery 3.5.1:

link jQuery

Vidíme, že ide o jediný javascriptový súbor .js, ktorý si importujeme do nášho HTML dokumentu tak, že do hlavičky vložíme nasledovný tag:

08

Následne si v editore vytvoríme ďalší javascriptový súbor, do ktorého už budeme písať vlastné kúsky kódu. Tento súbor uložíme a rovnakým spôsobom ho prelinkujeme s naším HTML súborom. V našej ukážke pracujeme so súborom anim.js.

Syntax

jQuery má sama osebe veľmi jednoduchú syntax. Myšlienkovo funguje spôsobom, že vždycky si vyberieme HTML prvok, ktorý chceme ovládať, následne zavoláme akciu, ktorú na tomto prvku chceme vykonať a do nej môžeme prípadne vložiť potrebné parametre a callback (funkciu, ktorá sa vykoná po skončení akcie):

09

Všimnime si, že každý príkaz začína značkou $ a do prvej zátvorky uvádzame názov CSS selektora v úvodzovkách, ktorý chceme modifikovať.

Do nášho javascriptového súboru musíme na začiatok pridať hneď prvý príkaz, ktorý nám zabezpečí, že skript sa vykoná až po načítaní všetkých elementov na stránke (inak by sme sa odvolávali na neexistujúce elementy a skript by skončil chybou):

10

Prehľad akcií

Pre naše potreby dokážeme veľa urobiť prostredníctvom akcie click, čo znamená, že niečo sa vykoná po kliknutí na nejaký element.

Najčastejšie túto akciu kombinujeme (tzn. do callbacku vložíme fucntion(){ *** };, kde *** znamenajú náš vložený kód) so zmenou vlastnosti CSS alebo priamo prepísaním obsahu v HTML.

Zmena CSS vlastnosti

Zmenu vlastnosti CSS zabezpečíme pomocou akcie .css, do ktorej ako prvý parameter zadáme názov vlastnosti a ako druhý parameter vložíme hodnotu vlastnosti, ktorá sa má aplikovať. Aplikovať vieme aj viacero zmien naraz. Buď dvakrát zavoláme akciu .css alebo do akcie .css vložíme viacero vlastností naraz (všimnite si kde sú čiarky a kde dvojbodky).

V našej ukážke si to môžeme pozrieť na kontajneri #change_color, kde sa po kliknutí na tento kontajner zmení farba pozadia a písma. Oba zápisy pre túto situáciu vyzerajú nasledovne:

11

Zmena obsahu v prvku HTML

Ďalším úkonom, ktorý sa môže spustiť kliknutím na nejaký prvok je zmena obsahu nejakého prvku HTML. My si to stručne demonštrujeme na príklade, kde sa po kliknutí na kontajner zmení text vo vnútri. Použije sa akcia .html, do ktorej ako parameter vložíme text, ktorý sa má vnútri kontajnera zobraziť.

V našej ukážke sa to dá vyskúšať v kontajneri #change_text, kde príslušný skript vyzerá takto:

12

Ako možno človek tuší, pomocou tejto akcie sa dajú pridávať aj úplne nové tagy do vybratého elementu, avšak to prenecháme pre záujemcov na samostatnú prácu 😉.

Animované zjavenie/zmiznutie

Štandardnou súčasťou najmä mobilných verzií stránok je menu skryté v tzv. hamburgeri -- trojitá čiarka, na ktorú keď klikneme, zobrazí sa menu. Takéto menu možno jednoducho zostrojiť pomocou jQuery nasledovným spôsobom.

Potrebujeme tlačidlo reprezentujúce hamburger (v našej ukážke selektor #menu_button) a samotné menu, kde sa nachádzajú jednotlivé odkazy (u nás je to selektor <menu). Keďže menu vidíme až po rozkliknutí, takže máme nastavenú východiskovú vlastnosť display: none (je to podmienka). Následne pomocou akcie .click vieme animovaným spôsobom zobraziť dané menu pomocou akcií:

Ako voliteľné parametre môžeme zadať čas, za ktorý sa má animácia vykonať (hodnoty "fast", "slow" resp. čas v milisekundách) a prípadne zavolať callback, ktorý sa vykoná po skončení animácie.

Je dôležité poznamenať, že pri tomto type animácie vlastne dochádza k zmene CSS vlastnosti display z hodnoty none na hodnotu block. Preto keď chceme menu zobraziť týmto spôsobom, môže byť problematické jeho formátovanie pomocou napr. flexov.

Podobným spôsobom vieme element nechať zmiznúť a to pomocou akcií .fadeOut() a .slideOut().

Zhrnutie

Tu sme si ukázali veľmi hrubý základ toho, čo jQuery a samotný javascript dokážu. Avšak pomocou uvedených akcií vieme jednoducho zostrojiť plne funkčné hamburgerové menu (t. j. také, ktoré vieme otvoriť aj zatvoriť). Treba si len ujasniť, aké kroky a v akom poradí ich vykonať 😊.

Taktiež tento úvod by vám mal pomôcť pochopiť a umožniť používať aj iné akcie, ktoré sa nachádzajú v oficiálnej dokumentácii a tu sme si ich neuviedli. Preto, netreba sa báť experimentovať.

V rámci tejto časti sme sa kvôli jednoduchosti zámerne vyhli používaniu premenných, podmienok či cyklov. Avšak, pokiaľ máte skúsenosti s javascriptom a v podstate s akýmkoľvek programovaním, nemali by ste mať problém napísať aj komplikovanejší skript. Ako s ním naložíte je len na vás a nemusíte sa obmedzovať len na to, čo sme ukázali v rámci tohto cvičenia.

Knižnice a vkladanie externého obsahu

Mnoho často používaných objektov na stránke je natoľko komplikovaných, že nám nevystačí ani použitie pár riadkov jQuery. Avšak, taktiež nemá zmysel vynájsť koleso a komplikované objekty vytvárať ručne pre každý projekt. Na to nám slúžia (v našom prípade javascriptové) knižnice. Medzi hlavné príklady ide o slideshow na úvodnej stránke, fotogaléria s prehliadaním obrázkov a pod. Mnoho z nich má veľmi dobrú dokumentáciu a je implementovaných aj mnoho ovládacích prvkov, či responzivita. Človek si často vystačí s učesaním priložených dem podľa svojich potrieb a dokonca aj s minimálnou znalosťou javascriptu ako takého.

Ďalším častým obsahom, ktorý sa vyskytuje na stránkach je z externých zdrojov. Jedná sa najmä o vkladaní videí zo služby YouTube, zdieľanie FB / IG profilov na svojej stránke, či vloženie mapky s vyznačeným miestom, na ktoré chceme upozorniť. Každá z týchto externých služieb na ponúka jednoduchú možnosť, ako ich dostať do svojho projektu. Po pár kliknutiach nám ponúknu kúsok HTML kódu, ktorý jednoducho len prilepíme do toho svojho. Technicky ide o prvok iframe, ktorý zabezpečí, že vieme vložiť do svojho dokumentu iný HTML dokument.

Základný zoznam user-friendly knižníc a služieb, ktoré ponúkajú vkladanie obsahu na svoju stránku nájdete v nasledovnom prehľade:

linkPrehľad

Práca na cvičení

Nadobudnuté poznatky z tohto cvičenia aplikujete priamo vo vašich projektoch.