Creative studio
Kontakt

Programovanie v HTML5, CSS3 a PHP

  • 2. júna 2017
  • Martin Vasiľ - brand director
programovanie

Už je to chvíľa od kedy CSS3 a HTML5, tieto dva web developerské fenomény, vstúpili do hry a priniesli závan jednoduchosti a intuitívnosti. S nimi prišli taktiež iné benefity ako alternatívne médiá, XML a mnohé iné.

Tou najvítanejšou výhodou je, že programovanie v CSS3 a HTML5 si zakladalo na jednoduchosti a nikdy sa neradili medzi zvyšok web developerskej scény, ktorá menej skúseným mohla pripomínať raketovú vedu.

Programovanie v HTML5

Začnime pekne postupne a to hlavným rozdielom medzi HTML4 a mladším bratom HTML5. Samozrejme, je celé kvantum dôvodov, prečo by mal dizajnér pracovať s „päťkou”, no tým najprínosnejším je asi fakt, že HTML5 udáva absolútne nové globálne štandardy s úplne inou úrovňou podpory. Nehovoriac o tom, že stránky sa „renderujú” tak, ako majú v akýchkoľvek prehliadačoch, ktoré sú doslova každý deň update-ované.

HTML5 predstavuje web stránku ako akýsi základ pre HTML, CSS a JavaScript, ktoré môžu tieto základy meniť a postupne budovať. V skratke to znamená, že nastáva harmónia medzi web developérmi a dizajnérmi, ktorí môžu pracovať ruka v ruke.

Naviac HTML5 predstavuje rozličné elementy, ktoré boli donedávna tak veľmi žiadané. Medzi tieto elementy patrí napríklad <video> a <audio>, ktoré predstavujú novú úroveň použitia multimédií.

Programovanie

Kostra HTML5

Z prvého pohľadu na kostru HTML5 je jasné, že sa príliš nevymyká stanoveným štandardom HTML4-ky. Prvou výhodou, ktorú si všimne väčšina ľudí, je absencia prílišného používania tzv. „self-closing tags”. Táto novinka zožala naozaj veľký úspech lebo predznamenala menej komplikovanú prácu a hlavne ušetrenie veľkého množstva času.

Pre tých, ktorí nevedia, v XHTML je veľa prvkov, ktoré sú označené ako „self-closing”. Tieto končia lomkami pred znamienkom >, ktoré upozorňuje, že nie je nutné vytvárať ďalší closing-tag niekde inde.

V HTML5-ke je toto pravidlo tiež zaužívané. Ale už viac nemusíte používať extra lomku. Ak ste však zvyknutý na prácu s HTML4, nemusíte svoje návyky meniť a môžete ďalej používať XHTML/XML štandardy.

Prepojenie s CSS3

Po vytvorení kostry HTML5 je možné pripojiť viaceré štýly CSS. V jednoduchom HTML5 podklade stačí pridať externý CSS „stylesheet”, ktorý bude separovať rozdielne kódy. Toto napomôže organizácii a hlavne v prípade, keď stránky a štýly začnú pracovať na viacerých stránkach.

Jedným z veľmi populárnych efektov je tzv. „clearfix styles”. Nejde o úplne nový koncept v prípade CSS33, ale je veľmi dôležitý pri budovaní štandardných zhodných web stránok. Častokrát sa totiž môže stať, že s pridávaním obsahu vedľa iného obsahu spozorujete chyby pri umiestňovaní. Tento problém je založený na nepomere okrajov a chýb v nastavení šírky pre obsah.

Syntax CSS3

Predstavili sme si síce užitočnú funkciu, no pri vytvorení plnohodnotných HTML5/CSS3 web stránok, je nutné začať pracovať s komplikovanejšími funkciami. Tu sú niektoré z funkcií, ktoré vyniesli CSS3 na vrchol atraktivity.

  • box-shadow: vytvára jemný tieňový efekt na stránke. Založený je na štyroch parametroch, ktoré udávajú umiestnenie, tieňové rozmazanie a farbu.
  • text-shadow: vytvára krásny tieň za textom samotnej stránky. S tými správnymi efektami môže byť dosiahnutý efekt, pri ktorom písmená akoby vyskakovali priamo zo stránky.
  • border-radius: zaobleným rohom síce chvíľu trvalo, kým sa stali zaužívaným štandardom, no časom sa tento status zmenil. S použitím tejto CSS3 funkcie môžete jednoducho manipulovať so zakrivením jednotlivých hraníc každého jedného elementu.
  • opacity: sprvu vyzerá ako jednoduchá funkcia, prehliadaná mnohými dizajnérmi. Vďaka „opacity” môžete zadať akékoľvek číslo od 0 do 1.0 resp. 0% až 100%. Tento efekt funguje skvele ako tzv. „hover animation”, ktorý navodí efekt vznášania sa.

V samotnom jadre predstavujú HTML5 a CSS3 jednoduchosť pri budovaní web stránky. Umožňujú web developerom budovať kreatívnejšie stránky za kratší čas a pod značne menším tlakom.

Tento fakt podporujú hlavne nové funkcie HTML5, ktoré dávajú viac priestoru na úpravu. Ak k tomu prirátam správne využitie CSS3, vznikajú dlhodobé prínosy.

PHP a JS

Ďalšiu samostatnú kapitolu tvorby web stránok tvoria programovacie jazyky ako PHP,  JavaScript C# a ďalšie. O tých to však už čoskoro v  ďalších článkoch na tomto webe.

Netreba však zabúdať, že proces tvorby web stránky končí jej spustením. Hlavnou úlohou akéhokoľvek web developera je vytvoriť jednoduchú stránku, ktorá rýchlo a jednoducho sprístupní informácie návštevníkovi.