Zadanie 3. úlohy
Implementácia
Cieľ
- Vytvoriť podľa grafického manuálu funknčnú webstránku pre váš projekt.
- Webstránka musí byť HTML 5 a CSS 3 validná.
- Stránka používa semánticke tagy, rozloženie stránky je tvorené prostredníctvom flex a grid.
Čo sa hodnotí?
- Valídnosť HTML a CSS (2 body) -- (odkazy na validátor HTML a CSS).
- Použitie sémantických tagov (3 body) -- na stránke sa používajú sémantické tagy všade kde je to možné (t. j. neformátujeme len cez
div).
- Formátovanie prostredníctvom CSS (5 bodov) -- dbajte na to, aby ste v .css súboroch nemali nadbytočné množstvo duplicít a aby kód bol prehľadný.
- Rozloženie cez flex a grid (4 body) -- dodržujte logické použite flexov (rovinný layout) a gridov (dvojrozmerný layout), tak ako sme si vysvetľovali na cvičeniach.
- Rozsah (2 body) -- váš projekt by mal mať približne štyri podstránky, resp. ekvivalentne veľa obsahu v prípade one-page dizajnu. Na odstavce textu môžete používať aj generický Lorem Ipsum v prípade, že nemôžete vygenerovať vlastný text.
- Dodržanie grafického manuálu (4 body) -- dodržiavajte zásady a pravidlá, ktoré ste si vyšpecifikovali v predošlej úlohe. Priveľké odchýlky od manuálu budú zohľadnené.
Responzivita (5 bodov)
Stránka sa správa responzívne. Treba implementovať aspoň jednu väčšiu zmenu v rozvrhnutí stránky, prispôsobiť veľkosť textu a celkovo dobrú čitateľnosť stránky pri užšom rozlíšení a pre aspoň jedno externé zariadenie (mobil, tablet).
Voliteľné prvky
Z nasledovnej ponuky si môžete vybrať ľubovoľný počet prvkov, avšak sa vám zaráta maximálne 10 bodov. Každý typ sa hodnotí maximálne len raz (čiže keď vložíte 5 videí, získať môžete stále len 1 bod):
- slideshow – 4 body
- Vytvorenie fotogalérie – 4 body
- Vytvorenie rozklikávacieho menu pomocou JavaScript/jQuery – 3 body
- Použitie CSS transitions – 1 bod
- Použitie CSS transform – 1 bod
- Použitie CSS textshadow/boxshadow – 1bod
- Použitie CSS gradientnej výplne – 1bod
- Pokročilé formátovanie/animácia pomocou JavaScript/jQuery podľa vlastnej potreby (túto časť zdôraznite pomocou komentára v kóde) – 2-5 bodov
- Vloženie mapy z Google Maps – 1 bod
- Vloženie videa z Youtube alebo Vimeo – 1 bod
- Vloženie príspevku, stránky alebo like/share tlačidla – 1 bod
Obmedzenia
Odovzdávate vždy autorské projekty vytvorené výhradne pre účel tohto predmetu, t. j. také, ktoré neboli vytvorené na iných predmetoch (UWD a pod.).
Je zakázané (takéto projekty nebudú hodnotené):
- Používať už vytvorené šablóny pochádzajúce napríklad zo služieb -- Canva, Wordpress, Joomla, Wix, atď.
- Používať frameworky
- Používať tabuľky na layout stránky
Odovzdané stránky nesmú byť dynamické (PHP), t. j. je možné ich načítať aj bez skúšobného servera.
Spôsob odovzdávania
Všetky zdrojové súbory odovzdávate do zdieľaného priečinka.
