Web Engineering SS20 - TU Wien

Team and Overview

Professor
Jürgen Cito
University Assistant
Michael Schröder
Tutors
Stefan Aichmann, Dominik Eitler, Ruppert Ettrich, Samantha Fuchs, Daniel Rohr
Course email
web-engineering@big.tuwien.ac.at
Lecture
Monday, 13:15-15:00, Informatikhörsaal
Course catalog
Official course listing in TISS, TUWEL

Registration

Important! Please register on TISS until 02.03.2020 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 TUWEL course starting Wednesday, 04.03.
To enter the group phase, you have to complete Assignment 0 (A0), which will be available on TUWEL.
You will be able to deregister until 09.03.2020 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, slide PDFs).

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
02.03. Kick-Off, Lecture 1 (L1) HTTP Read An overview of HTTP
04.03. Release Assignment 0 (A0)
09.03. L2: Browser: HTML/Accessibility, L3: CSS Basics
09.03. A0 Deadline
16.03. L4: CSS Responsive Design, Live Examples
16.03. Release Assignment 1 (A1)
23.03. L5: JavaScript and DOM
  • Practice JavaScript ("Basics" until Callbacks) on LearnJS
23.03 Monday, Tutor Office Hours 15:00-17:00 (online)
26.03 Thursday, Tutor Office Hours 14:00-16:00 (online)
29.03. A1 Deadline
30.03. Test 1 (Content: L1-L5 Lectures and Reading). Test will be conducted in TUWEL
06.04. Release Assignment 2 (A2)
06.04. L6: JavaScript Live Coding (Recipe Search), GitHub Repository
06.04 - 19.04 Easter Holidays (no deadlines)
20.04. L7: Web Servers
20.04. Monday, Tutor Office Hours 15:00-17:00 (online)
23.04. Thursday, Tutor Office Hours 14:00-16:00 (online)
26.04. A2 Deadline
27.04. Release Assignment 3 (A3)
27.04 L8: Backend Abstractions
from 27.04. A1 + A2 Review
30-minute slot reviewing A1 and A2 with a tutor
04.05 No Lecture
11.05 TBA
11.05 Monday, Tutor Office Hours 15:00-17:00 (online)
14.05 Thursday, Tutor Office Hours 14:00-16:00 (online)
15.05. L9: Frontend Abstractions
18.05. L10: Client-Server Communication with GraphQL (Guest Lecture by Dr. Erik Wittern)
17.05. A3 Deadline
25.05. Release Assignment 4 (A4)
08.06. Tuesday, Tutor Office Hours 15:00-17:00 (online)
11.06. Thursday, Tutor Office Hours 14:00-16:00 (online)
14.06. A4 Deadline
from 15.06. *Optional* A3 + A4 Feedback with a tutor
15.06. Test 2 (Content: L6 to the last lecture (probably L10) - 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 light-weight version of the flipped classroom model:
  • In particular, we provide required reading material prior to class.
  • In class, we quickly revisit the given material (usually in the form of presenting slides)
  • 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 tecnologies.

Assignments

In addition to the lecture, you will build a web application (frontend and backend) in four group assignments (A1 to A4) in groups of 4 students:
  • Assignment 1 (A1) - HTML/CSS (35 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 (20 points): You build part of the backend for Artmart as a web service in Node.js in JavaScript.
  • Assignment 4 (A4) - Vue.js (20 points): You introduce frontend abstractions for Artmart in Vue.js

Group Contribution

We want each team member to substantially contribute to the project. Thus, we will track the lines of code commited to GitHub for every assignment (after data cleaning, e.g., removing whitespace, comments, and so on) as a measure of relative contribution to the project. Please ensure that you divide work up as evenly as possible within the group, so that every member can contribute. If you do pair programming, please switch up computers (or at least git email in the commits), so that really everyone gets to actively program.
It does not have to be exactly 25% per team member. However, if we see a large gap between relative contributions, we will look into the situation and deduct points accordingly.

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 theoretical and practical part affect the grade at a ratio of 1:1. The resulting percentage points map to grades as follows: