Tvorba www aplikací - OPBI3I051B

• Anglický název: Creating www applications
• Zajišťuje: Katedra informačních technologií a technické výchovy (41-KITTV)
• Fakulta: Pedagogická fakulta
• Platnost: od 2023 do 2024
• Semestr: zimní
• E-Kredity: 5
• Způsob provedení zkoušky: zimní s.:
• Rozsah, examinace: zimní s.:1/2, KZ [HT]
• Rozsah za akademický rok: 2 [hodiny]
• Počet míst: 17 / neurčen (neurčen)
• Minimální obsazenost: neomezen
• 4EU+: ne
• Virtuální mobilita / počet míst pro virtuální mobilitu: ne
• Stav předmětu: vyučován
• Jazyk výuky: čeština
• Způsob výuky: prezenční
• Poznámka: předmět je možno zapsat mimo plán; povolen pro zápis po webu; při zápisu přednost, je-li ve stud. plánu
• Garant: PhDr. Josef Procházka, Ph.D.
• Vyučující: PhDr. Tomáš Jeřábek, Ph.D.
• Prerekvizity : OPBI3I031A

Anotace

čeština

Cílem předmětu je rozvinutí praktických dovedností při vytváření webových aplikací a zajištění jejich dynamických funkcí s využitím možností primárně na straně klienta. Důraz je kladen na zvládnutí celé procesní fáze vývoje webové aplikace včetně návrhu, vytvoření specifikace, verzování a samotného zpracování. Součástí výuky je rovněž poskytnutí odpovídajících teoretických poznatků z oblasti tvorby, designu a programování www aplikací spolu s deklarací nejdůležitějších kritérií pro vhodné nastavení procesu vývoje webové aplikace. Předmět navazuje na předchozí předměty Vývoj aplikací v objektovém prostředí, Vývoj www stránek a Vývoj a administrace databázových aplikací.

Poslední úprava: Jeřábek Tomáš, PhDr., Ph.D. (05.09.2023)

angličtina

The aim of the course is to develop practical skills in creating web applications and ensuring their dynamic functions using options primarily on the client side. Emphasis is placed on mastering the entire process phase of web application development, including design, specification creation, versioning and processing itself. The course also includes the provision of appropriate theoretical knowledge in the field of creation, design and programming of web applications, together with the declaration of the most important criteria for the appropriate setting of the web application development process. The subject follows on from the previous courses focused on databases, development of web pages and object-oriented programming.

Poslední úprava: Jeřábek Tomáš, PhDr., Ph.D. (08.09.2023)

Deskriptory

Příprava na výuku
Doba očekávané přípravy na 1 hodinu přednášky	10 minut
Doba očekávané přípravy na 1 cvičení	20 minut
Samostudium literatury (za semestr)	5 hodin
Práce se studijními materiály (za semestr)	5 hodin
Plnění průběžných úkolů (za semestr)	20 hodin
Plnění předmětu
Seminární práce	30 hodin
Příprava na zápočet	20 hodin
Příprava na zkoušku a zkouška	0 hodin

Poslední úprava: Jeřábek Tomáš, PhDr., Ph.D. (05.09.2023)

Podmínky zakončení předmětu

• průběžné plnění a odevzdání dílčích úkolů v průběhu semestru
• zpracování, odevzdání a prezentace zápočtové práce v podobě vlastní autorské aplikace (bližší upřesnění na začátku výuky) včetně patřičné dokumentace

Poslední úprava: Jeřábek Tomáš, PhDr., Ph.D. (05.09.2023)

Literatura

• ASLESON, R., SCHUTTA, N. AJAX Vytváříme vysoce interaktivní webové aplikace. Brno : ComputerPress, 2006. ISBN: 80‑251-1285-3
• Neustadt, I., Arlow, J. UML 2 a unifikovaný proces vývoje aplikací. 2016.ISBN: 8025142051
• CASTRO, Elizabeth a Bruce HYSLOP. HTML5 a CSS3: názorný průvodce tvorbou WWW stránek. 1. vyd. Překlad Lukáš Krejčí. Brno: Computer Press, 2012. ISBN 978-80-251-3733-8.
• GOODMAN, Danny. JavaScript bible: comprehensive. 7th ed. Indianapolis, IN: Wiley. ISBN 04-705-2691-2.D
• NIELSEN, J. Web.design, průvodce od Jakoba Nielsena. Praha : SoftPress, 2002.
• PECINOVSKÝ, R. Návrhové vzory. Praha : Computer Press, 2007.
• VIRIUS, M. Základy algoritmizace. Praha : ČVUT, 1997.
• ZAKAS, Nicholas C, Jeremy PCPEAK a Joe FAWCETT. Ajax: profesionálně. Vyd. 1. Překlad Jiří Koutný. Brno: Zoner Press, 2007. ISBN 978-80-86815-77-0.
• ŽÁRA, O. Javascript: Programátorské techniky a webové technologie. Praha: ComputerPress, 2015.

 Další zdroje

• GIT https://git-scm.com/book/cs/v1
• ECMA 6 http://es6-features.org/
• W3 Schools http://www.w3schools.com/
• UML https://www.uml.org/
• Další materiály pro podporu výuky na http://moodle.it.pedf.cuni.cz/

Poslední úprava: Jeřábek Tomáš, PhDr., Ph.D. (05.09.2023)

Sylabus

Versování projektů a spolupráce v týmu

• základní specifika verzovacích nástrojů
• využití verzovacích nástrojů pro týmovou spolupráci
• obecně platné přístupy k verzování a dokumentaci projektů
  

Architektura a návrh webové aplikace

• základní procesní fáze vývoje aplikací
• využití jazyka UML při tvorbě diagramů
• návrhové modely a vzory (MVC, MVP apod.)

Dynamické prvky jazyka HTML

• pokročilé vlastnosti HTML5 pro www aplikace
• možnosti multimediálních prvků
• tvorba grafiky pomocí prvku Canvas a SVG fomátu

Možnosti tvorby aplikačního rozhraní

• specifika jazyka JavaScript v kontextu objektového přístupu 
• využití offline úložiště prohlížeče (Web Storage, Web SQL, App. Cache)
• pokročilé zachycení a zpracování událostí (Drag & Drop, Workers)
• geolokační rozhraní, práce s polohou klienta, API třetích stran

Poslední úprava: Jeřábek Tomáš, PhDr., Ph.D. (05.09.2023)

Studijní opory

Pro podporu studia bude využit LMS Moodle. Bližší informace naleznou zapsaní studenti v Moodle kurzu.

Klíč k zápisu do kurzu a odkaz na kurz bude uživatelům sdělen na prvním semináři.

Výuka bude probíhat dle rozvrhu, pokud nebudou studenti předem informováni jinak.

Poslední úprava: Jeřábek Tomáš, PhDr., Ph.D. (05.09.2023)

Výsledky učení

Versovací systémy
    Student

•     definuje základní pojmy související s verzovacími nástroji (commit, branch, merge, repository).
•     vysvětlí rozdíl mezi centralizovaným a distribuovaným verzovacím systémem.
•     aplikuje správné postupy při vytváření nových větví a slučování změn v Git.
•     provede analýzu konfliktů při slučování verzí a navrhne jejich řešení.

Architektura a návrh webové aplikace
    Student

•     vyjmenuje základní fáze vývoje webové aplikace.
•     vysvětlí účel každé fáze v životním cyklu vývoje aplikace.
•     aplikuje správné postupy při přechodu z fáze návrhu do implementace.
•     analyzuje rizika spojená s neúplnou specifikací požadavků v raných fázích projektu a možný dopad na výslednou aplikaci.
•     vyjmenuje základní typy UML diagramů používané při návrhu aplikací.
•     porozumí diagramům UML používaných ve fázi technické specifikace jednoduché aplikace.
•     navrhne use-case diagram a kompletní diagram tříd pro zadanou webovou aplikaci.

Návrhové modely a vzory
    Student

•     definuje základní principy architektonického vzoru MVC.
•     vysvětlí rozdíl mezi architektonickými vzory MVC a MVP.
•     implementuje MVC model v rámci jednoduché webové aplikace.
•     porovná výhody a nevýhody vzoru MVC pro různé typy projektů.
•     kriticky posoudí vhodnost použití vzoru MVC v konkrétním projektu.
•     navrhne architekturu aplikace využívající vhodný návrhový vzor.

Specifika jazyka JavaScript v kontextu objektového přístupu
    Student

•     definuje klíčové koncepty objektově orientovaného přístupu v JavaScriptu.
•     vysvětlí rozdíly mezi klasickým dědičným modelem a prototypovým dědičným modelem v JavaScriptu.
•     aplikuje objektově orientované techniky při vývoji webové aplikace v JavaScriptu.
•     vyjmenuje technologie HTML5 pro offline ukládání dat.
•     vysvětlí rozdíly mezi localStorage, sessionStorage a IndexedDB.
•     implementuje ukládání dat do localStorage pro webovou aplikaci.
•     vybere a implementuje vhodný model ukládání dat na straně klienta při vývoji webové aplikace v JavaScriptu.
•     zhodnotí efektivitu používání ES6 tříd v moderních JavaScriptových aplikacích.

Poslední úprava: Jeřábek Tomáš, PhDr., Ph.D. (19.09.2024)