Predmet Webové technológie je určený pre študentov Košickej akadémie
softvérového vývoja,
druhý ročník. Predmet poskytuje vedomosti a skúsenosti v práci s HTML5, CSS3, Typescript-om a frameworkom Angular.
Prejdeme si také súčasti jazyka JavaScript, ktoré sa v Jave nenachádzajú - globálne vs. lokálne premenné a
konštanty, template strings, pravdivé a nepravdivé výrazy, rôzna práca s objektami a poľami, object
destructuring, spread operátor, klasické vs. arrow funkcie a použitie this v nich. Vysvetlíme si základné higher-order funkcie v poliach - forEach, filter, map, flat, flatMap, reduce a reduceRight.
Budeme pracovať s JSON dokumentom countries.json podľa úloh uvedených nižšie.
Úlohy:
Vráťte pole s názvami všetkých krajín.
Vráťte pole s názvami európskych krajín.
Vráťte pole objektov s vlastnosťami name a area, popisujúce krajiny s počtom obyvateľov nad 100 miliónov,
teda:
Povieme si ako písať prehľadné
selektory. Porozprávame si rôzne poziciovania - relatívne, absolútne, fixné, sticky. Ukážeme si ako
uložiť blokový element do stredu okna a ako sa dá transformovať element - posun, otočenie, zošikmenie.
Predstavíme si vlastnosti float a clear. Zopakujeme si, ako funguje Flexbox a predstavíme dvojrozmerný Grid layout.
Povieme si, čo všetko grid layout zvláda, nastavíme hlavný layout stránky cez pomenovania oblastí a
využijeme ich pre rôzne šírky displeja.
Úlohy:
Hlavný layout: zabezpečte, že šírka obsahu je maximálne 1000px. Pre užšie displaye ako 1000px nech je šírka
100%.
Trojstĺpcový formát zmeňte pre stredne široké displeje na dvojstĺpcový a pre veľmi úzke na jednostĺpcový -
pravý panel sa presúva pod hlavnú sekciu a ľavé menu sa schová pod hamburgerové toggle tlačidlo.
Naštýlujte fotogalégiu na adrese http://localhost:8080/kompostovanie_galeria tak, aby obrázky boli umiestnené v
rámčekoch s rovnakou veľkosťou, pričom fotky s popiskom majú v rámčeku aj popis. Počet vedľa seba umiestnených
fotiek záleží od šírky displeja. V prípade veľmi úzkych displejov (keď už máme iba jednostĺpcový formát stránky)
sú obrázky oddelené iba horizontálnou čiarou namiesto rámčeka.
Cez @Media query nastavte pre tlačiareň zneviditeľnenie menu a pravého panela a zmenu farieb na čierne a
biele (využite print media simuláciu v prehliadači).
Zabezpečte pre celý web, aby sa žiadne elementy neprekrývali a aby nevytŕčali z hlavného obsahu pri
všetkých šírkach.
Úlohy vyriešte do stredy 4.10.2023 8:00 a pošlite mi ich mailom v zip súbore, kde budú 3 html súbory (home, kompostovanie a kompostovanie_galeria) a 1 css súbor, aby som nemusel rozbehávať váš server.
Zobrazíme správnu podstránku v závislosti od url adresy. Dodáme dynamiku do menu tak, že obsah menu určuje JSON súbor. Zvýrazníme vybranú položku v menu. Vygenerujeme novinky a pagináciu.