Web Engineering SS24 - TU Wien

Team and Overview

Professor
Jürgen Cito
University Assistants
Michael Schröder, Markus Böck, David Kaindlstorfer, Samuel Pilz
Tutors
Nathanael Nussbaumer (Head TA), Markus Bointner, Theo Haslinger, Nicolas Hrubec, Irfan Kacapor, Pia Schwarzinger, Lukas Spatschil
Course email
web-engineering@se.tuwien.ac.at
Live Lecture
Thursday, 15:15-17:00, FAV Hörsaal 1 and online (Link on TUWEL)
Course catalog
Official course listing in TISS

Registration

Important! Please register on TISS until Tuesday, 05.03.2024 23:55 (strict deadline!) to be able to participate in this course.

All students registered in TISS until the deadline will have access to the course.
To officially register, you have to complete Assignment 0 (A0), which will be available on TUWEL.
You will be able to deregister until 12.03.2024 23:55, which is also the deadline for A0. As soon as you submit A0, you will receive a certificate (Zeugnis).

Prerequisities

Formally, participation in this course is regulated by STEOP rules. Please understand that we cannot make any exceptions.

We expect that you have working knowledge with at least one imperative programming language (e.g., Java, Python), as taught in an introductory programming course.
We also require basic knowledge of version control systems, particularly how to use git.

Timetable/Lectures

The following timetable lists all important dates for the course (lectures, tests, deadlines, tutor office hours) together with accompanying material (required reading, slides as PDFs, link to lecture videos).

Required reading should be done in preperation before the lecture!
Reading material is not always strictly "reading", but can also involve interactive online exercises.
Note that: The contents of the listed required readings will be part of the tests.

If a deadline is listed on a certain date, assume it due at 23:55 that day unless specified otherwise.

Date Content Required Reading
04.03. Kick-Off, Lecture 1 (L1) HTTP

Attention: 15:15-17:00 on Zoom (link will be sent on TISS)

Lecture Video - HTTP
Read An overview of HTTP
05.03. TISS Registration Deadline
07.03. (12:00) Release Assignment 0 (A0)
L2: Browser: HTML/Accessibility
Lecture Video - Browsers, HTML, Accessibility
  1. Intro
  2. Browsers Overview
  3. Browser Internals
  4. Semantic HTML Overview
  5. HTML Structure
  6. Block vs Inline
  7. Links and Anchors
  8. HTML Forms
  9. Forms and HTTP
  10. Accessibility
  11. Web Accessibility Guidelines
  12. Text Browser as Accessibility Proxy
  13. Web Accessibility Principles
  14. Accessibility Examples
L3: CSS Basics
Lecture Video - CSS Basics
  1. Semantic HTML and Stylesheets
  2. CSS Integration
  3. Syntax and Selectors
  4. Standard Properties
  5. Sizes and Proportions
  6. Box Model
  7. Positioning
L4: CSS Responsive Design, Live Examples
Lecture Video - Responsive Design
  1. Layout Approaches
  2. Media Queries
  3. Fluid Layouts
  4. Scaling Images and Fonts
  5. CSS Layout Modes
  6. Flexbox Layout
  7. Grid Layout
  8. Fractional Units
  9. Live Example Grid
  10. Flexbox vs Grid
07.03. (12:00) Release Assignment 1 (A1)
12.03. A0 Deadline
14.03. Live Lecture: HTML/CSS
  • Watch Lectures 2, 3, and 4 (HTML, CSS Basics, Responsive Design) and post your questions on the TUWEL lecture forum
22.03. Tutor Office Hours 15:15-17:00 (online)
26.03. A1 Deadline
25.03. - 06.04. Easter Holidays (no lectures)
28.03. (12:00) Release Assignment 2 (A2)
L5: JavaScript and DOM
Lecture Video - JavaScript Core Language
  1. Overview & HTML Integration
  2. Operators
  3. Arrays
  4. Objects
  5. Strings
  6. Control Structures
  7. Developer Console
  8. Functions
  9. Higher-Order Functions
  10. Functions as Objects
  11. Variable Declaration and Scoping
  12. Modules
Lecture Video - DOM, Events
  1. Browser Object Model (BOM)
  2. Timing in the Browser
  3. Storing Data
  4. Document Object Model (DOM)
  5. DOM Upates and Accessibility
  6. Event-Driven and Asynchronous Programming
  7. DOM Events
  8. Asynchronous Requests
  9. Promises
  10. Programmable Event Listeners
  • Practice JavaScript ("Basics" until Callbacks) on LearnJS
L6: JavaScript Live Coding (Recipe Search), GitHub Repository
Live Coding Video
11.04. Live Lecture: JavaScript Watch Lectures 5 and 6 (JavaScript, DOM, Events, Asynchronous Progamming) and post your questions on the TUWEL lecture forum
25.04. Live Lecture: Web Testing

Will be moved to later in the semester

 Watch Lecture on L5a Web Testing
26.04. Tutor Office Hours 15:15-17:00 (online)
30.04. A2 Deadline
02.05. Test 1 (Content: L1-L5 Lectures and Reading). Test will be conducted on TUWEL
L7: Web Servers
Lecture Video
L8: Backend Abstractions
Lecture Video
09.05. (12:00) Release Assignment 3 (A3)
16.05. Live Lecture: Web Backends Watch Lectures 7, 7a, 8, and 8a (Web servers, backend abstractions, sessions, web sockets) and post your questions on the TUWEL lecture forum
23.05. Live Lecture: Sessions and Sockets Watch Lectures 7a, 8a (sessions, web sockets) and post your questions on the TUWEL lecture forum
24.05. Tutor Office Hours 15:15-17:00 (online)
28.05. A3 Deadline
30.05. (12:00) Release Assignment 4 (A4)
L9: Frontend Abstractions
Lecture Video
Live Coding Video
06.06. Live Lecture: Web Frontends Watch Lecture 9 (Frontend abstractions and Vue.js) and post your questions on the TUWEL lecture forum
13.06. Live Lecture: Guest Lecture TBA
14.06. Tutor Office Hours 15:15-17:00 (online)
18.06. A4 Deadline
20.06. Test 2 (Content: L6, L7, L7a, L8, L8a, L9 - Lectures and Reading). Test will be conducted on TUWEL

Additional reading and exercises

For those who want to read and practice on their own, we collected a list of additional (optional) resources (interactive tutorials, reading):

Lecture Mode

The lecture will follow a flipped classroom model:
  • In particular, we provide required reading material prior to class.
  • Students should then watch already recorded lectures by the professor.
  • In live lectures, we then demonstrate the material live on the command line, browser, or IDE.
This is especially amenable for this course because of the interactive nature of the underlying technologies.

Assignments

In addition to the lecture, you will build a web application (frontend and backend) in individual assignments (A1 to A4):
  • Assignment 0 (A0) - HTTP (1 point): You have to send a series of HTTP requests to one of our servers.
  • Assignment 1 (A1) - HTML/CSS (14 points): You are given the design guide for the online shop "Artmart" and are tasked with producing a static frontend in HTML5 and CSS3 that is responsive and accessible.
  • Assignment 2 (A2) - JavaScript (25 points): You introduce interactivity to the existing static frontend with JavaScript by dynamically retrieving picture data from the Metropolitan Museum of Art Collection API and allowing users to configure picture frames on the fly by adapting the Document Object Model (DOM).
  • Assignment 3 (A3) - Node.js (15 points): You build part of the backend for Artmart as a web service in Node.js in JavaScript.
  • Assignment 4 (A4) - Vue.js (15 points): You introduce frontend abstractions for Artmart in Vue.js

Grading

Your grade will be a combination of the theoretical part (tests) and practical part (assignments). Material for the theoretical tests will be the contents of the lecture slides and required reading indicated in timetable/lectures.

Theoretical part

Practical part

Grading Scale

The points of the theoretical and practical part sum to exactly 100 points. The points map to grades as follows:

Academic Honesty

We expect all students to work on their own (both for the practical assignments and the tests). Any kind of plagiarism will result in expulsion of the course with a grade N5 (Nicht Genügend).