Webové techológie

O predmete

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.

Stretnutia

29. Angular - MatTableDataSource, filtrovanie tabuľky, HttpOptions, token v HTTP hlavičke

jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2022/films

Ukážeme si vlastné usporiadanie riadkov a doplníme filtrovanie riadkov.
Vytvoríme si nový modul na zobrazovanie zoznamu filmov. Ukážeme si, ako sa vkladá token do HTTP hlavičky. Vytvoríme si servis na získanie filmov zo servera.

28. Angular - FormArray, MatTableDataSource, MatPaginator, MatSort

pdf iconAngular - desiata časť pdf iconAngular - jedenásta časť jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2022/films

Začneme druhou priebežnou obhajobou.
Vytvoríme si komponent na editáciu používateľa. Použijeme FormArray reaktívnych formulárov na dynamické pridávanie input elementov, špeciálne dynamicky generované checkboxy s label-mi.
Predstavíme si komponent na pagináciu a jeho použitie v tabuľke cez MatTableDataSource, tiež usporiadanie tabuľky cez MatSort.

24. Angular - obhajoby projektov a validácia hesla

pdf iconAngular - desiata časť jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2022/films

V prvej polovičke študenti ukážu akutálny stav ich projektov.
Nainštalujeme si knižnizu na overovanie sily hesla 'zxcvbn' a použijeme ju vo vlastnom validátore. Pridáme validátor emailov cez pattern, vytvoríme si tiež notifikácie chýb používateľovi cez mat-error a hintov cez mat-hint. Vytvoríme si synchrónny validátor na zhodu hesiel registrácie.

23. Angular - validátory a reaktívne formuláre

pdf iconAngular - desiata časť jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2022/films

Vytvoríme si komponent na registráciu používateľov a zrealizujeme neoverenú registráciu. Ukážeme si zabudované validátory aj ako ich aktivovať v template-driven formulároch. Predstavíme si alternatívnu formu prepojenia DOM modelu a dát - reaktívne formuláre. Porovnáme ich s template-driven prístupom.
Poslednú hodinu budeme pracovať na svojich projektoch.

13. Angular - localStorage, sessionStorage, Subscriber

pdf iconAngular - štvrtá časť jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2022/users-management

Dorobíme si navigáciu na stránku. Uložíme sme si token v localStorage, ktorý prežije aj zmenu URL "zvonku". Ukážeme si navigáciu zo šablóny tak, aby sme nekontaktovali server. Upravíme si navigačnú lištu tak, že vždy ukazuje správne stav prihlásenia a zrealizujeme odhlásenie na strane klienta.

9. Higher-order funkcie v poliach IV

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2022/countries

Budeme pracovať s JSON dokumentmi z adresy swapi.dev, podľa úloh uvedených nižšie.

Úlohy:

  1. Vypíšte mená všetkých postáv v tvare:
    [ 'Luke Skywalker', 'C-3PO', 'R2-D2', 'Darth Vader',... ]
  2. Vypíšte mená všetkých postáv usporiadané podľa mena:
    [ 'Ackbar', 'Adi Gallia', 'Anakin Skywalker', 'Arvel Crynyd', 'Ayla Secura',... ]
  3. Vypíšte mená všetkých postáv usporiadané podľa "priezviska": 
    [ 'Ackbar', 'Mas Amedda', 'Padmé Amidala', 'Wedge Antilles', 'Raymus Antilles',... ]
  4. Vypíšte mená všetkých postáv spolu s ich živočíšnym druhom v tvare: 
    [ { name: 'Luke Skywalker', specimen: [] },
{ name: 'C-3PO', specimen: [ 'Droid' ] },
{ name: 'R2-D2', specimen: [ 'Droid' ] },
{ name: 'Darth Vader', specimen: [] },... ]
  5. Vypíšte pre každú planétu, aké postavy tam žijú v tvare:
    [ { planet: 'Tatooine',
    people: [ {'name':'Luke Skywalker','url':'https://swapi.dev/api/people/1/'},
              {'name':'C-3PO','url':'https://swapi.dev/api/people/2/'},
              {'name':'Darth Vader','url':'https://swapi.dev/api/people/4/'},
              ...]},
  { planet: 'Alderaan', 
    people: [ {"name":"Leia Organa","url":"https://swapi.dev/api/people/5/"},
              {"name":"Bail Prestor Organa","url":"https://swapi.dev/api/people/68/"},
              {"name":"Raymus Antilles","url":"https://swapi.dev/api/people/81/"}
              ...] },
  { planet: 'Yavin IV', 
    people: [] },...]
  6. Vypíšte pre každú planétu, aké živočíšne druhy na nej poznáme v tvare:
    [ { planet: 'Tatooine', species: [ 'Droid' ] },
  { planet: 'Alderaan', species: [ 'Human' ] },
  { planet: 'Yavin IV', species: [] },
  ...
  { planet: 'Naboo', species: [ 'Droid', 'Gungan', 'Human' ] },
  ...]

8. Higher-order funkcie v poliach III

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2022/countries

Budeme pracovať s JSON dokumentom countries.json z adresy restcountries.eu, podľa úloh uvedených nižšie.

Úlohy:

  1. Postupne vytvorte nasledovné funkcie a zreťazte ich cez pipe/flow:
    1. Vytvorte funkciu languageToCountArray, ktorá vráti pre každý výskyt jazyka objekt s názvom jazyka a počtom obyvateľov krajiny, kde ste tento jazyk našli.
    2. Vytvorte funkciu languageToCountObject, ktorá vezme výsledok predošlej metódy a vráti objekt, kde vlastnosti sú jazyky a hodnoty sú súčty počtov obyvateľov pre jednotlivé jazyky. 
        {
    Pashto: 27657145,
    Uzbek: 59233545,
    Turkmen: 32408265,
    Swedish: 15415580,
    ...}
    3. Vytvorte funkciu arrayOfLanguages, ktorá vezme výsledok predošlej metódy a vráti pole, v ktorom pre každý jazyk máme objekt s názvom jazyka a počtom obyvateľov, ktorý týmto jazykom rozprávajú (predpokladáme, že každý obyvateľ, ktorý žije v krajine, kde sa používa, túto reč ovláda). 
        [
    { language: 'Pashto', count: 27657145 },
    { language: 'Uzbek', count: 59233545 },
    { language: 'Turkmen', count: 32408265 },
  ...]
    4. Vytvorte funkciu sortArray, ktorá vezme výsledok predošlej metódy a usporiada ho od najväčších po najmenšie počty.
    5. Vytvorte funkciu topTen, ktorá vezme výsledok predošlej metódy a vráti pole iba prvých 10 objektov z pôvodného poľa.
    6. Vytvorte funkciu humanReadable, ktorá vezme výsledok predošlej metódy a vráti podobné pole, ale počty sú uvedené ako reťazce v tvare napr. "1.414 mld", teda číslo v miliardách zaokrúhlené na milióny a s pridaným reťazcom " mld".
    7. Vytvorte funkciu toString, ktorá vezme výsledok predošlej metódy a vráti reťazec obsahujúci výslednú tabuľku najpoužívanejších 10 jazykov aj s počtom ľudí teda: 
        English: 2.655 mld
  Chinese: 1.414 mld
  Hindi: 1.296 mld
  ...

7. Higher-order funkcie v poliach II

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2022/countries

Budeme pracovať s JSON dokumentom countries.json z adresy restcountries.eu, podľa úloh uvedených nižšie.

Úlohy:

  1. Vráťte objekt, kde vlastnosti sú jazyky z Južnej Ameriky a ich hodnotami polia krajín z Južnej Ameriky, v ktorých sa nimi hovorí, teda: 
      {
    Spanish: ['Argentina', 'Bolivia (Plurinational State of)', 'Chile',...],
    Portuguese: [ 'Brazil' ],
    English: [ 'Falkland Islands (Malvinas)', 'Guyana',...],
    ...
  }
  2. Vráťte pole objektov s dvoma vlastnosťami, jazyk z Južnej Ameriky a krajiny z Južnej Ameriky, v ktorých sa ním hovorí, teda: 
      [ { language: 'Spanish', countries: ['Argentina', 'Bolivia (Plurinational State of)', 'Chile',...]},
    { language: 'Portuguese', countries: [ 'Brazil' ]},
    { language: 'English', countries: [ 'Falkland Islands (Malvinas)', 'Guyana',...]},
    ...
  ]
  3. Vráťte pre každú menu, ktorá sa používa aspoň v 5 krajinách, krajiny, v ktorých sa ňou platí a ich počet. Výsledkom je usporiadané pole od najmenej používaných po najviac používané meny, teda: 
      [ { currency: 'New Zealand dollar',
      countries: [ 'Cook Islands', 'New Zealand', 'Niue', 'Pitcairn', 'Tokelau' ],
      count: 5 },
    { currency: 'Central African CFA franc',
      countries: ['Cameroon', 'Central African Republic', 'Chad', 'Congo', 'Equatorial Guinea', 'Gabon'],
      count: 6 }, 
    ...
  ]

6. Higher-order funkcie v poliach

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2022/countries

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:

  1. Vráťte pole s názvami všetkých krajín.
  2. Vráťte pole s názvami európskych krajín.
  3. Vráťte pole objektov s vlastnosťami name a area, popisujúce krajiny s počtom obyvateľov nad 100 miliónov, teda: 
      [ { name: 'Bangladesh', area: '147570 km2' },
    { name: 'Brazil', area: '8515767 km2' },
    { name: 'China', area: '9640011 km2' },
    ...
  ]
  4. Vráťte pole všetkých jazykov, ktoré sa používajú Južnej Amerike bez duplicít, teda: 
      [ { iso639_1: 'es', iso639_2: 'spa', name: 'Spanish', nativeName: 'Español' },
    { iso639_1: 'gn', iso639_2: 'grn', name: 'Guaraní', nativeName: "Avañe'ẽ" },
    { iso639_1: 'ay', iso639_2: 'aym', name: 'Aymara', nativeName: 'aymar aru'},
    ...
  ]

5. EJS + CSS + Vybrané súčasti Javascriptu

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2022/transylwahnja

Pozrieme sa na riešenia zadaných úloh (generovanie noviniek, stránkovanie, CSS), vyriešime prípadné problémy a otázky. V druhej časti si prejdeme 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.

4. CSS

pdf iconZáklady CSS3 pdf iconPoziciovanie v CSS github iconhttps://gitlab.kosickaakademia.sk/wt2022/transylwahnja

Zo stránky odstránime pôvodné CSS súbory a začneme vytvárať vlastné. 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. Pradstaví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:

  1. Hlavný layout: zabezpečte, že šírka obsahu je maximálne 1000px. Pre užšie displaye ako 1000px nech je šírka 100%.
  2. 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.
  3. Naštýlujte fotogalégiu na adrese http://localhost:4000/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.
  4. 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).
  5. Zabezpečte pre celý web, aby sa žiadne elementy neprekrývali a aby nevytŕčali z hlavného obsahu pri všetkých šírkach.