Cvičenie 1 - Informácie o predmete a inštalácia prostredia
Ciele predmetu
- Naučiť sa základy webu a webových technológií na strane klienta.
- Naučiť sa vytvoriť jednoduché statické webové aplikácie (stránky) s využitím HTML.
- Naučiť sa pridať webovej aplikácii štýly pomocou CSS.
- Osvojiť si princípy responzívneho dizajnu v CSS.
- Naučiť sa základy programovacieho jazyka JavaScript a osvojiť si jeho špecifiká.
- Naučiť sa používať jazyk JavaScript pre spracovanie formulárov a tvorbu dynamického používateľského rozhrania web aplikácií.
- 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.
- 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):
- 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.
-
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.
Podmienky pre získanie zápočtu
- Maximálne 2 ospravedlnené neúčasti
- 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.
- Odovzdať zadanie do úlohy v Teams do 23:59 deň pred cvičením, na ktorom prebehne kontrola
Študenti s najlepšie vypracovanými zadaniami môžu získať skúšku vďaka tomuto zadaniu.
Inštalácia programu WebStorm
Formulár pre uplatnenie školskej licencie na produkty JetBrains, https://www.jetbrains.com/shop/eform/students. (Pri registrácii využite školskú emailovú adresu. Môžete tak používať plnú verziu prostredia WebStorm na Vašom počítači.)
Vytvorenie Hello World projektu
- Otvorte WebStorm
- Vytvorte nový projekt:
New Project > Empty Project (Vyberte miesto na uloženie) > Create
- Pridajte nový súbor do projektu:
Klik pravým na názov projektu > New > File > Názov: index.html
- Do súboru
index.html pridajte nasledujúci kód:
-
Uložte zmeny a otvorte súbor v internetovom prehliadači.