Moje malé projekty
(pre html obsah)

Slušnosť káže predstaviť sa a tak ako prvú ukážku sem dám môj test tvorby vizitky. Vyzerá to primitívne, ale je to plne responzívne a dosť slušný kód, ani by som tomu neveril čo všetko tam bolo treba aby to takto vyzeralo a fungovalo... Použil som tu grid na pozíciovanie obsahu.
(fotografia nie je moja podobizeň)

Ale nebudem predsa kódovať iba takú jednoduchú... Trochu to skomplikujeme, a pootáčame obsah... Na to aby to fungovalo stačí využiť flex a držať obsah v strede. Celé je to nakódované pomocou premenných aby to šlo ľahko prispôsobiť novému obsahu, či farebne doladiť do existujúcej stránky.

Vytvoríme sa dajaký "obaľovač",dáme mu "display: flex;" a začnú sa diať veci... Flex je super funkcia na štýlovanie viacerých blokov v obaľovacom bloku, ale aj obsahu v jednotlivých blokoch. Toto všetko som si spísal do jedného interaktívneho webového kódu kde sa dozvieš základné možnosti ako a kde využiť flex. Je určený hlavne na "jednoriadkový layout", ak potrebuješ štýlovať bloky vo viacerých riadkoch, tak sa používa napríklad grid (ale aj na viacriadkové galérie stačí často "len" flex, bloky majú zväčša definovanú rovnakú výšku).

Grid je ešte o stupeň lepší ako flex. Dokáže bloky upratať nie len vo vertikálnej rovine, ale aj horizontálnej. Prvý obrázok je odkaz na môj tutoriál. Ďalej sú dve testovacie stránky kde som si tie možnosti prakticky vyskúšal. Obe nie sú optimalizované pre mobily, išlo mi tam o tie funkcie a potrebujem na to šírku. Jedna stránka je čisto o kóde, druhá je už aj s trochu naštýlovaným pseudo obsahom, aby bolo vidno ako to na webe reálne vyzerá potom. Ako vidno tak grid dokáže zaujímavé veci a kombinácie... Používa sa na rozsiahle layout-y stránok, a responzivita nie je problém, ide totiž ľahko predefinovávať nie len šírky a podobne, ale aj poradia blokov a tak, jednoducho na mobile môže byť všetko úplne inak ak treba. A vôbec to nie je komplikované (sú na to dve možnosti o ktorých viem - buď jednotlivo riešiť každú bunku, alebo pomocou takzvanej oblasti mriežky kde je nakódovaná v podstate šablóna podľa ktorej sa tie bloky zoradia na stránke). Na tomto odkaze je stránka kde som si tú základnú responzivitu vyskúšal.

1. Jednoduchý efekt ktorý som videl na stránkach www.mojandroid.sk a vyskúšal som ho urobiť bez toho aby som sa pozrel ako to bolo robené tam. Môj princíp - div kontajner s relatívnou pozíciou v ktorom sú po rohoch malé div kontajnery s fixnou pozíciou bez obsahu a len s čiastočnými rohmi podľa polohy vo veľkom kontajnery.

2. Podobný efekt s rohmi - tu už bol treba grid aby to fungovalo ako vidno, je to v podstate mriežka 3x3 a len jej rohové časti majú čiastočne rohy. Dosť kódu na tak malú vec...

Základ pre každú stránku - bloky textu s obrázkom... Tu je to zároveň mierne vylepšené o to že sú tam malé finty ako ladiť jednotlivé bloky s rovnakým "class" selektorom - pozícia nadpisu, textu. Oplatí sa pozrieť do kódu ako sa to dá urobiť.

Kto nevie nakódovať formulár na web stránku, akoby ani nebol kodér... Tak som si musel tiež dajaký vyskúšať... Zároveň tam je zasa práca s blokmi. Keďže som mizerný dizajnér tak vzor som si vyhliadol na internete, ale kód je komplet môj, len samotný dizajn som použil. POZOR - neriešim tu jeho fungovanie (odosielanie údajov z neho), to je úplne iná kapitola. Tu mi išlo iba o ten dizajn, aby som si vyskúšal jeho štýlovanie. Je to mierne iné v použitých selektoroch, inak je to ako každý iný blok (bloky) s obsahom.

Aj o tento "framework" som sa zaujímal trochu, vyskúšal som čo sa s tým dá robiť ohľadom pozíciovania. Všetko je detailne popísané v tomto mojom teste ak to dakoho zaujíma. Responzivita pomocou Bootstrap je fakt hračka... Bootstrap sa ale vyvýja, pridávajú sa možnosti, ja som sa len snažil pochopiť tu princíp trochu.
Viac info o Bootstrap je napríklad na: w3schools.com - bootstrap
Ako vidno v kóde - CSS sa týmto hodne zmenšilo, všetko riešia class v jednotlivých "div" kontajneroch.
Bootstrap ale nie je iba práca s blokmi, to je sada predpripravených dizajnov pre rôzne elementy na web stránke. Ak človek potrebuje iba dajaký bežný obsah na web tak mu to hodne urýchli prácu.

Toto som dakde objavil a zaujal ma takýto dizajn kartičiek. Nakoniec som to zobral ako výzvu a urobil som to pomocou troch rôznych možností - "primitívne" pomocou CSS, pomocou "flex" a pomocou "grid". Vyzerá to rovnako, ale má to dajaké iné vlastnosti občas (hlavne na mobiloch)...

Pred týždňom som našiel tento efekt: odkaz - YouTube. Nedalo mi to pokoj, skúšal som to urobiť asi 2 hodiny, ale nefungovalo to (bez toho aby som videl tu použitý kód). Potom som si pozrel postup aký použil tu vo videu, ale to ma prestalo baviť po pár minútach videa, stratil som sa v ňom. Tak som to nakoniec na druhý pokus zmákol len pomocou 3 vrstiev a trošky CSS ka a funguje mi to v podstate rovnako, ale na mierne inom princípe ako použil autor videa...
Ten systém je veľmi univerzálny, prvý príklad ukazuje možné efektné menu - presne také ako bolo v tom videu, ale potom ma napadla aj kopa iných možností ako toto využiť, a to napríklad meniť čiernobiele obrázky na farebné s efektom postupnej zmeny zhora nadol - viď druhý príklad... A myslím že to rozhodne nie je všetko, možnosti sú neskutočné...

jQuery má rôzne funkcie na efekty a jedna z nich je animovanie /animate/. Tak som ju preskúmal a tu je výsledok. Naučil som sa časovať tie animácie tak ako potrebujem. Na tieto veci je tá knižnica dobrá veru, kto by to robil v JS ku celé. Ale aj toto má svoje vlastnosti, takže je treba s tým rátať že animácie na jendom elemente idú po sebe ale na rôznych naraz... Ak treba animovať rôzne elementy a po sebe tak sa využíva takzvaná "callback" funkcia - ďalšia funkcia sa volá až po tom čo sa prvá vykoná.

Len tak dačo na precvičenie si JS ka - práca s poľom objektov. Na tomto princípe spravím aj "dotazník spokojnosti zákazníka", alebo "kvíz" (aj s vyhodnocovaním). Preveril som si načítavanie hodnôt v poli, spracovávanie "klikov" na elementy (výber položiek, možností). Dokonca je tu využitá LocalStorage - údaje si tak prehliadač pamätá aj po reloade stránky.
Kód je plne "automatický" - stačí do polí hodnôt a hodnotení zadať potrebné údaje pre štart a stránka sa generuje celá pomocou JS ka! Úprava na akýkoľvek iný zoznam je tak do pár minút...

Našiel som jedno zaujímavé rozloženie obsahu na stránke a tak som ho využil na otestovanie ako to funguje s grid-om. A veľmi fajn... Využitá je funkcia grid areas, a obsah sa aj prelína cez bloky. Základná mriežka má 5x3. Je to aj plne rsponzívne (na mobile iba pod sebou).

Neviem kde som na toto nabral inšpiráciu, ale text v okrajoch ma zaujal (+ rôzne kombinácie pozadia a farby textu). Tak je tu jeden z možných postupov. A aj pekne použitý flex a responzivita pomocou neho. A ešte použitie premenných v CSS, ale jednej premennej a špecifických hodnôt pre konkrétnu class-u (alebo ID ak treba).