Ciele predmetu

  1. Naučiť sa základy webu a webových technológií na strane klienta.
  2. Naučiť sa vytvoriť jednoduché statické webové aplikácie (stránky) s využitím HTML.
  3. Naučiť sa pridať webovej aplikácii štýly pomocou CSS.
  4. Osvojiť si princípy responzívneho dizajnu v CSS.
  5. Naučiť sa základy programovacieho jazyka JavaScript a osvojiť si jeho špecifiká.
  6. Naučiť sa používať jazyk JavaScript pre spracovanie formulárov a tvorbu dynamického používateľského rozhrania web aplikácií.
  7. Osvojiť si webové služby, využívajúce softvérový architektonický štýl REST, a ich použitie pri dátovej komunikácii so serverom.
  8. Osvojiť si pokročilejšie koncepty webových aplikácií, ako sú šablóny, smerovanie na strane klienta (client-side rooting) a autentifikácia s použitím služieb tretích strán.

Doplňujúce informácie

    Na každom cvičení cvičiaci uvedie študentov/ky do problematiky a tí/tie následne pracujú na vlastných zadaniach, prípadne riešia ďalšie úlohy na dané cvičenie. Svoje návrhy, riešenia a nejasnosti konzultujú so svojím cvičiacim.

    Počnúc 2. cvičením musí byť študent/ka vždy schopný/á prezentovať aktuálny stav prác na zadaní. Bez aktuálnych zdrojových textov je účasť na cvičení zbytočná. Hlavný dôraz na cvičeniach je kladený na samostatnú prácu a konzultáciu s cvičiacim/cou.

    Zadania budú kontrolované vo viacerých termínoch. Pri každom termíne je nutné samostatne prezentovať a obhájiť riešenie.

    V predmete sa vypracovávajú dve zadania (projekty):

    1. Statický blog: Hlavná stránka so zoznamom článkov a ďalšie stránky s jednotlivými článkami. Stránky budú vytvorené pomocou HTML a CSS. Na hlavnej stránke bude tiež formulár pre zadávanie názorov návštevníkov stránky a zobrazenie názorov, ktoré sa uložia do localStorage. Na spracovanie a zobrazenie názorov sa využije JavaScript.
    2. Dynamický blog: Jednostránková webová aplikácia (SPA), využívajúca smerovanie na strane klienta. Články už nie sú statickými stránkami, ale sú načítané zo servera použitím REST služby a asynchrónnej http požiadavky. Aplikácia tiež umožní články vytvárať, upravovať a mazať. Funkcionalitu týkajúcu sa názorov návštevníkov prevezme z prvého zadania.

    Online výučba

Podmienky pre získanie zápočtu

  • Ani jedna neospravedlnená neúčasť.
  • Maximálne 3 ospravedlnené neúčasti - spôsob náhrady určí cvičiaci.
  • Získanie aspoň 21 z 40 možných bodov za cvičenia.
  • Priebežné hodnotenia počas semestra v piatich termínoch. Body je možné získať za dodržanie stanoveného termínu a vypracovanie a obhajobu úloh pre daný termín:
    • 1. termín (3. týždeň), úloha 1, max. 4 body - Statický blog: Stránky s článkami a hlavná stránka s odkazmi na samotné články so základnými HTML elementmi a základným CSS formátovaním.
    • 2. termín (5. týždeň), úloha 2, max. 4+2 bodov - Statický blog: Stránky s článkami a hlavná stránka s odkazmi na samotné články s pokročilými HTML elementmi a pokročilým CSS formátovaním, vrátane zabezpečenia responzívnosti.
    • 3. termín (8. týždeň), úlohy 3 a 4, max. 7+2 bodov - Statický blog: Stránka s príspevkami (názory návštevníkov), ktoré sa zobrazia na základe údajov uložených v localStorage a formulára cez ktorý možno pridať príspevok a uložiť ho do localStorage.
    • 4. termín (10. týždeň), úloha 5, max. 6+1 bodov - Dynamický blog: Stránka s príspevkami (vrátane obsahu), ktoré sa zobrazia na základe údajov uložených na serveri. Tieto údaje stránka načíta použitím príslušnej REST služby a asynchrónnej http požiadavky. Stránka je typu jednostránkovej aplikácie (SPA) a využíva smerovanie na strane klienta.
    • 5. termín (13. týždeň), úlohy 6 a 7, max 8+6 bodov - Dynamický blog: Doplnenie o editáciu, mazanie a pridávanie príspevkov a komentárov k nim. Prihlasovanie pomocou služieb tretích strán. Za navyše vytvorenú web aplikáciu vhodnú pre OpenLab môžete získať aj všetkých 7 bodov určených pre doplnkové úlohy.

    • Rozdelenie bodov:
      • max. 29 bodov: splnenie povinných úloh,
      • max. 11 bodov: splnenie doplnkových úloh, web aplikácia pre OpenLab, resp. aplikácia s vlastným backendom.
    • Oneskorené odovzdanie: Ak nestihnete odovzdať požadované úlohy v príslušnom týždni, môžete tak urobiť na cvičení
      • o 1 týždeň neskôr so sankciou -2 body,
      • o 2 týždne neskôr so sankciou -4 body.
      Sankcia sa neuplatňuje v prípade, že k oneskoreniu došlo na základe vážneho, ospravedlniteľného, dôvodu (najmä zdravotného).
    • Opravné odovzdanie po ukončení semestra: Ak sa vám počas semestra nepodarí získať dostatočný počet bodov na zápočet, môžete zápočet vo výške 21 bodov získať, ak urobíte a úspešne obhájite
      • všetky povinné úlohy z 1. až 4. termínu a
      • všetky povinné úlohy z cvičenia 11.
      Opravné odovzdanie je potrebné realizovať do konca druhého týždňa skúškového obdobia.
    • V podmienkach online výučby sa úspešná obhajoba zadaní a získanie zápočtu považuje zároveň za úspešné vykonanie skúšky.

    Pri každom odovzdávaní je nutné prezentovať a obhájiť riešenie, vytvorenú aplikáciu a použité technológie. Zadania budú odovzdávané priebežne pomocou katedrového GitLab-u. Súčasťou odovzdania sú všetky súbory využité pri vývoji aplikácie (HTML, CSS, JavaScript) tak, aby boli stránky priamo cez GitLab zobraziteľné. Zadania sú individuálne.

Vyučujúci

Prednášajúci

Cvičiaci:

Prednášky:

  • Utorok, 7:30-9:00, online, Webex Training

Zdroje

  1. B. Sobota, M. Paralič, Š. Korečko, W. Steingartner: Úvod do programovania a sietí, 2. vyd., Košice, Elfa, 2014.
  2. Peter Gasston: The Modern Web Multi-Device Web Development with HTML5, CSS3, and JavaScript, No Starch Press, 2013
  3. Peter Gasston: The Book of CSS3: A Developer's Guide to the Future of Web Design, 2nd Edition, No Starch Press, 2015
  4. Bruce Lawson, Remy Sharp: Introducing HTML5, 2nd Edition, Voices That Matter, 2012
  5. Jon Duckett: JavaScript and JQuery: Interactive Front-End Web Development, Wiley, 2014
  6. Chris Minnick, Eva Holland: JavaScript® For Kids For Dummies®, Wiley, 2015
  7. 50 OF THE BEST WEB DESIGN BOOKS 2020 for kids, newbies and pros.
  8. 41 FREE HTML AND CSS BOOKS
  9. The best free JavaScript resources