Programátorský čtyřboj – disciplína č.2 – Programování Webu

Jednou ze schopností všeobecně zdatného programátora je umění prezentovat sebe nebo svou práci. K tomu může dobře posloužit webová stránka.

Úkolem této disciplíny je vytvořit pomocí HTML, CSS a JS (viz dále) webovou stránku hudebního festivalu podle přiloženého grafického návrhu – screenůadresáři ./ ZADÁNÍ-PŘEDLOHA zip archivu zadání. Základním úkolem je nakódovat stránku pro monitor, který máš k dispozici, pokud to zvládneš, bude úkolem udělat stránku responzivní, viz Bonusy.

Všechny dílčí obrázky, potřebné pro návrh, najdeš v adresáři ./OBRÁZKY zip archivu zadání.

Zadání a jeho soubory jsou k dispozici též na Githubu https://github.com/DDMP6/web_2021.

Základní informace které nemusí být jasné z předlohy:

-          Použijte Google fonts (https://fonts.google.com/) – nadpisy Raleway, ostatní texty Nunito.

-          Rozměr fontů je na vás, měl by však poměrově odpovídat zadání.

-          Hlavička je na stránce zafixovaná a při skrolování se pohybuje s oknem – při začátku skrolování se změní pozadí z průhledného na poloprůhledné a když se člověk vrátí zpět nahoru, tak se pozadí zase vrátí do průhledného stavu.

-          Při kliknutí na Zobrazit vše se zobrazí 9 kontejnerů s umělci, bonus: udělat plynulou animaci při zobrazení dalších umělců, při kliknutí na zobrazit méně, se opět zobrazí jen 3.

-          Při kliknutí na více informací v kontejneru s umělcem se zobrazí více informací viz obrázek a pozadí ztmavne na čtvrtinu průhlednosti.

-          Barvy pro gradient tlačítek: rgb(122,63,145), rgb(0,13,110)

-          Obrázky a kontejnery umělců mají zaoblené rohy a stíny.

Bonus 1

-          Při najetí na tlačítko plynulá změna pozadí na rgb(25,25,25) a textu na bílou a následně zase plynule zpátky.

-          Udělejte webové stránky responzivní dle vlastního uvážení, jako breakpointy doporučuji: 480px – mobily, 780px – tablety, 1200px – menší notebooky, 1600 – větší notebooky a 1980+ velké monitory.

-          Při zobrazení 1980px a více na šířku – nebude body 100 %, ale zastaví se maximální šířce 1980px a zarovná se doprostřed.

Bonus 2

-          Za pomoci JQuery udělejte plynulé skrolování mezi kotevními body – např. plynulý skrol k účinkujícím po stisknutí tlačítka nebo odkazu účinkující.

-          Po stisknutí tlačítka Odebírat newsletter se zobrazí děkovná hláška přímo v tlačítku – viz obrázek a za 5 vteřin zase hláška zmizí a vrátí se obsah i barva tlačítka, taktéž se vyprázdní pole s emailem.

Hodnocení

Obecně bude hodnocena podobnost s předlohou, kvalita a styl kódu.

·         Podobnost se zadáním na běžné obrazovce – 40 bodů

·         Responzivita – přehlednost a funkčnost – 25 bodů 

·         JavaScript – 25 bodů

·         Přehlednost kódu – 10 bodů

Odevzdání

Všechny potřebné soubory zabal do *.zip archivu, tento archiv pojmenuj prijmeni_j.zip, kde „j“ je iniciála křestního jména a zašli na olympiada-programovani@ddmp6.cz nebo nahraj na náš Ownloud zde: https://owncloud.cesnet.cz/index.php/s/uykqlxeodk9Rx2v (nedej se zmást, že i po nahrání bude stále zobrazen stav „Uploading…“, pokud je soubor zobrazen v „Uploaded files“, nahrál se.) V případě, že odevzdáš postupně víc verzí, budeme hodnotit poslední odevzdanou verzi. Odevzdání je možné do čtvrtka 25.3.2021, 23:59.

Pro dotazy a podporu můžeš využít náš Discord https://discord.gg/9PaJT8SY

Hodně štěstí přejí DDM Praha 6 a Scriptmana!