Maturitní práce 2016 - Martin Černín

Jedná se o projekt pro společnost THERA Actio s.r.o., ve kterém bylo cílem vytvořit statickou webovou stránku s informacemi o této společnosti, různými způsoby jak společnost kontaktovat včetně formulářů, které nám umožní sjednat si schůzku s konzultantem, zadat poptávku na klienta nebo přímo kontaktovat tuto společnost.

Má práce byl veškerý FrontEnd na této stránce, což znamená, že byl použit proprietární software společnosti Irvekon, nejnovější verze Foundation, SASS, Javascript, CSS3 a HTML5.

Většina grafických prvků na stránce je tvořena vektory, které umožňují měnit velikost obrázků bez ztráty kvality, šetří načítání webové stránky a je možné plynule pomocí css měnit barvu výplně obrázku.

Celý web je plně responzivní pro všechny možné typy zařízení – běžné počítače, tablety, mobily i televize. Je zde také velký důraz na kompatibilitu mezi prohlížeči, čili veškeré části webu jsou kompatibilní pro většinu známých prohlížečů – Chrome, Firefox, Opera, IE, Microsoft Edge, Safari a jiné, a pro operační systém Windows i Linux.

Celý web je rozdělen na 3 části – hlavička, obsah a patička. Již v hlavičce je použit JavaScript na plynulé zobrazení a skrytí navigace v pravém horním rohu obohaceném o Fade efekty. Dále je z hlavičky možné tlačítky s tlačítky z navigace a tlačítky Pro uchazeče a Pro zaměstnavatele plynulý přechod na určené části webové stránky, po kliknutí se stránka automaticky posune na předem určené místo v závislosti na tlačítku, které bylo zmáčknuto. Pro tyto účely je ještě na spodní části hlavičky šipka, která stránku posune na další část a boční panel který automaticky znázorňuje, ve které části se uživatel nachází, při najetí na bublinku uživateli řekne, jak se daná část jmenuje a po kliknutí na prázdnou bublinku uživatele plynule přesune na danou sekci.

V obsahu webové stránky jsou zahrnuty přesně dané části celého webu, lze v nich nalézt různé informace o společnosti, sekce jsou především dělené s ohledem na jejich určení, například, jestli je daný obsah spíše pro uchazeče, klienty nebo zaměstnavatele. V tabulce je vytvořený dropdown panel aktivní při najetí na bublinku s označením info. Sekce pro uchazeče, pro zaměstnavatele a zkušená konzultantka jsou obohaceny o fade nebo slide efekty, které jsou vlastnoručně vytvořeny jen za použití css, pro určení polohy (dosažení místa, kdy je potřeba určitý efekt spustit) je použit Javascript. V Sekci partneři se předpokládá s nutností využít obrázky, které nebudou ve vektorovém formátu, původní návrh počítal s formátem .png, proto je zde jen za pomocí css vytvořen hover efekt, který po najetí plynule vybarví obrázek daného partnera a na vstupu počítá s nebarevnou a barevnou verzí obrázku. Poslední sekcí je google mapa s upraveným InfoWindow s kontaktem na společnost THERA Actio u které je ošetřeno prohlížení stránky s mobily nebo tablety vypnutím možnosti posunout střed mapy, což je na počítači umožněno. Součástí 3 sekcí z obsahu je také efekt založený na Javascriptu se jménem Parallax, který umožní, že pozadí se nedrží na jednom místě, ale při projíždění webovou stránkou plynule s menším opožděním „doprovází“ uživatele a tento efekt je plynule propojen s ostatními efekty na celé stránce.