PV252 Frontend Web Development and User Experience

Fakulta informatiky
podzim 2024
Rozsah
2/1/1. 4 kr. (plus ukončení). Ukončení: k.
Vyučováno kontaktně
Vyučující
RNDr. Samuel Pastva, Ph.D. (přednášející)
Mgr. Mária Šviriková (přednášející)
Mgr. Jan Vrzal (cvičící)
Garance
RNDr. Samuel Pastva, Ph.D.
Katedra počítačových systémů a komunikací – Fakulta informatiky
Dodavatelské pracoviště: Katedra počítačových systémů a komunikací – Fakulta informatiky
Rozvrh
St 25. 9. až St 20. 11. St 8:00–9:50 C511, St 27. 11. až St 18. 12. St 8:00–9:50 S209
  • Rozvrh seminárních/paralelních skupin:
PV252/01: Po 23. 9. až Po 16. 12. každé liché pondělí 12:00–13:50 A215, S. Pastva
Předpoklady
The course assumes basic knowledge of web-based frontend technologies and markup languages (HTML, CSS, JavaScript/TypeScript), corresponding to the course PB138 (Basics of web development and markup languages).
Omezení zápisu do předmětu
Předmět je nabízen i studentům mimo mateřské obory.
Předmět si smí zapsat nejvýše 20 stud.
Momentální stav registrace a zápisu: zapsáno: 20/20, pouze zareg.: 4/20, pouze zareg. s předností (mateřské obory): 4/20
Mateřské obory/plány
Cíle předmětu
The course is aimed at students with basic familiarity with frontend web technologies (HTML, CSS, JavaScript/TypeScript) who intend to broaden their understanding of the web ecosystem. It presents modern web standards (WebComponents, WebSockets, WebWorkers, …) and allows the students to apply and evaluate these technologies in the context of a non-trivial web application (course project). Additionally, the course introduces students to the principles of user-friendly application design and essential observability mechanisms that are used to evaluate user experience in active projects.
Výstupy z učení
Students will be able to:
  • Understand and apply reactive, component based user-interface development principles based on the WebComponents standard or other similar UI frameworks.
  • Apply safe development principles (type checking, continuous integration, automated testing) in the context of web applications.
  • Apply the principles of user-friendly design through wireframing and prototyping in a non-trivial web application.
  • Measure and evaluate user experience through event analytics and randomized comparative trials.
  • Be able to build interactive and real-time web applications using the WebSockets and WebRTC standards.
  • Be able to build offline-enabled applications and offload complex computations to background tasks using the WebWorkers and WebStorage/IndexedDB standards.
  • Be familiar with the advantages and disadvantages of other emerging or low-level web standards and deploy them in a project (e.g. Canvas API, WebAssembly, WebGPU/WebGL).
    • Osnova
    • Project structure, bundling, continuous integration, type checking, validation and testing.
    • Component-based user interface frameworks (WebComponents, React, Lit), shadow DOM, event driven vs reactive state management.
    • Prototyping component-based user interfaces with focus on user experience: wireframing, design systems, component libraries.
    • Observability and analytics, user engagement and satisfaction, sensitive data management.
    • Accessibility, screen readers, semantic web, ARIA.
    • User authentication, identity providers and single sign on (OAuth).
    • Real-time communication (WebSockets, WebRTC), modern web protocols (HTTP2/3, QUIC).
    • Background and offline tasks (WebWorkers), on-device data management (WebStorage, IndexedDB).
    • A/B testing, randomized comparative trials, empirical user experience evaluation.
    • Low-level and emerging web technologies: Canvas, WebAssembly, WebGPU/WebGL, Electron/Tauri and others.
    • Semester project evaluation.
    Literatura
    • The Front End Developer/Engineer Handbook 2024 (Cody Lindley; https://frontendmasters.com/guides/front-end-handbook/2024/)
    • Mozilla developer network: https://developer.mozilla.org/
    • Usability and User Experience Design: The Comprehensive Guide to Data-Driven UX Design (Benjamin Franz, Michaela Kauer-Franz)
    Záložky
    https://is.muni.cz/ln/tag/FI:PV252!
    Výukové metody
    The course consists of weekly lectures combined with live technology demos (where appropriate), biweekly seminars, and independent project work. Students apply the concepts presented in the lectures when implementing warm-up mini-projects during the seminars and a comprehensive main project (groups of 2-3 people). In-person seminars are organized biweekly and alternate with time allocated for mutual mini-project review and implementation of the main group project.
    Metody hodnocení
    Course evaluation is based on three components: (1) Small warm-up projects showcasing each major topic of the course, primarily solved in-person during seminars. (2) Main group project (2-3 people) that integrates the whole course curriculum, presented at the end of the course. (3) Continuous mutual reviews of the warm-up projects of other course participants. To successfully complete the course, the student must fulfill all three components (i.e. complete and review each “warm-up” project; complete and present the main course project).
    Vyučovací jazyk
    Angličtina
    Další komentáře
    Studijní materiály
    Předmět je vyučován každoročně.
    Předmět je zařazen také v obdobích jaro 2013, jaro 2014, jaro 2015, jaro 2016.
    • Statistika zápisu (nejnovější)
    • Permalink: https://is.muni.cz/predmet/fi/podzim2024/PV252