Moje malé projekty
(pre html obsah)

Rozhodol som sa vytvoriť túto malú stránku kde dám (všetky) svoje (slušnejšie) pokusy pri tvorbe html kódu. Veď keď už som si s tým dal akú-takú robotu, prečo sa o to nepodeliť... Je tam občas zaujímaý kód. Projekty sú (až na výnimky kde kvôli funkcionalite potrebujem šírku) responzívne!

Ak chceš vidieť detailne konkrétny projekt - klikni na obrázok pri ňom.

Kódy občas budú v "jednostránkovom formáte" aj napriek tomu že to nie je tak profi riešenie, ale umožňuje to jednoduché prekopírovanie celého kódu pre potreby iných (hlavne začínajúcich) programátorov web developerov. Jednoducho sa tak bude dať obsah stiahnuť, prekopírovať do vlasného editora a skúšať si to upravovať pre svoje potreby. Sú to zväčša menšie projekty. Občas bude kód dobre okomentovaný, veď je to aj pre moje potreby aby som vedel tie postupy kedykoľvek v prípade potreby zopakovať. Daktoré projekty majú kód aj pomocou premenných a dobre označené názvy class alebo ID, čiže idú v podstate celé prekopírovať aj do väčšej stránky a dokážu tam okamžite fungovať nezávisle od ostatných elementov.

Na tvorbu rozsiahlejsích webov nemám aj tak čas nateraz (a potrebujem sa doučiť web dizajn) a myslím si že základ je hlavne slušne vedieť robiť rôzne detaily a z nich sa potom skladá celá stránka... Zatiaľ to tu bude len tak po sebe ako som to tvoril, neskôr to možno dajako kategorizujem a prehľadnejšie "upracem". Prípadne pridám nejaké "rýchle menu"...

PS:toto nie je špeciálna stránka s "profi ukážkami môjho portfólia", na to by som urobil stránku na úplne inom grafickom a efektovom leveli...


Vizitka

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

vizitka

Zoznám sa s "flex"-om na webe

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

flex

Nestačí flex? Máme tu aj grid...

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.

grid tutoriál
grid test
grid page

Efektné malé rohy pre blok textu

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

efektné rohy efektné rohy

Ako "skrotiť" bloky

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

bloky

Formulár - vlastný test jeho dizajnu

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.

formulár

Bootstrap - môj základný test

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.

bootstrap

Vertikálny text na webe

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

Vertical Text

Efekty s použitím troch vrstiev

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

menu - hover efekt
obrázky - hover efekt

Efektná animácia - ikonky

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

social icons

Precvičil som si pole objektov...

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

skill png