Creating www applications - OKBI3I051B

• Title: Tvorba www aplikací
• Guaranteed by: Katedra informačních technologií a technické výchovy (41-KITTV)
• Faculty: Faculty of Education
• Actual: from 2023
• Semester: winter
• E-Credits: 5
• Examination process: winter s.:
• Hours per week, examination: winter s.:0/0, MC [HS]
• Extent per academic year: 14 [hours]
• Capacity: unknown / unknown (unknown)
• Min. number of students: unlimited
• 4EU+: no
• Virtual mobility / capacity: no
• State of the course: taught
• Language: Czech
• Teaching methods: combined
• Additional information: https://moodle.it.pedf.cuni.cz/course/view.php?id=1866
• Note: course can be enrolled in outside the study plan; enabled for web enrollment; priority enrollment if the course is part of the study plan
• Guarantor: PhDr. Josef Procházka, Ph.D.
• Teacher(s): PhDr. Tomáš Jeřábek, Ph.D.
• Pre-requisite : OKBI3I031A

Annotation

English

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.

Last update: Jeřábek Tomáš, PhDr., Ph.D. (08.09.2023)

Czech

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í.

Last update: Jeřábek Tomáš, PhDr., Ph.D. (05.09.2023)

Descriptors

Příprava na výuku
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

Last update: Battistová Eva, PaedDr. (19.06.2023)

Course completion requirements

• 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

Last update: Jeřábek Tomáš, PhDr., Ph.D. (05.09.2023)

Literature

• 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/

Last update: Jeřábek Tomáš, PhDr., Ph.D. (05.09.2023)

Syllabus

Témata studijního předmětu

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

Last update: Jeřábek Tomáš, PhDr., Ph.D. (05.09.2023)

Learning outcomes

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.

Last update: Jeřábek Tomáš, PhDr., Ph.D. (19.09.2024)