Semester: Summer Semester 2020

Lecture language: English

Exam language: English

Exam type: Oral examination

Maximum number of participants: 30

Notice

The course will officially start on April 20^th, 2020 and will take place fully online. More information will be provided in the Moodle courseroom for the registered students. Registration is still possible until April 16^th, 2020 (see the registration section below).

About this Course

The World Wide Web and its underlying technologies are increasingly gaining importance for the development of interactive Web applications. This course introduces concepts, principles, and methods in current client and server-side Web technologies. Basic Web technologies such as HTML, HTTP, CSS, XML, JavaScript, Python, etc. are a prerequisite to take this course. The focus of this course is rather on advanced topics in emerging Web technologies. These include extensions of Web standards, Web toolkits and development environments, current backend Web frameworks (e.g. Flask), frontend Web frameworks (e.g. React), and combination of different Web technologies (e.g. Dash). This course follows a student-centered and project-based learning approach. Web technologies will be presented in the lecture by student groups. The presented technologies are further investigated and applied in hands-on sessions as well as small student projects carried out throughout the course.

Getting credits for this course requires a successful completion of all assignments, project, and oral exam at the end of the semester. The final grade will be calculated as follows: assignments and project (40%), student presentations including hands-on sessions (15%), class participation & group management/collaboration (12%), and oral exam (33%). 

Target audience

• Master Applied Computer Science
• Master ISE
• Master Komedia

Date and location

Lecture:

• Wed, 14:00 – 16:00
• LB 117 Online
• Starts on April 8, 2020 April 22, 2020

Lab Session:

• Mon, 12:00 – 14:00
• LK 052 Online
• Starts on April 13, 2020 April 20, 2020

Prerequisites

• Knowledge of Python and basic Web technologies such as HTML, CSS, and JavaScript is helpful.
• High motivation and commitment.

Registration

Due to didactical methods, we have a limit of 30 students for this class (first come first serve). To register, please send an email to Dr. Arham Muslim by March 30^th, 2020 April 16^th, 2020 with your matriculation number, study program, and knowledge/experience in Web technologies. If the maximum number of participants is reached, we will use a waiting list.

Organization

• Course material in Moodle
• Show in course catalog (LSF, Module Database)

Lecturers

Prof. Dr. Mohamed Chatti (Lecturer)

Dr. Arham Muslim (Teaching Assistant)

Group name: NXGEN

Group members: Shoeb Joarder, Seyedemarzie Mirhashemi, Yunlong Zhao

Project description:

The idea of the project is to develop an educational website aiming at enabling students to self-reflect on their knowledge after each course participation. The application is mainly a video-based learning platform, where users (students) can enroll in courses, watch videos then answer quizzes.

Main features:

• Login, Registration
• Browse different courses
• Watch video and take part in quizzes
• Profile page where user can edit his profile and monitor his quiz score in form of bar chart

Technologies used:

• Frontend: React, Bootstrap, Chart.js
• Backend: Flask-PyMongo, MongoDB, Axios

Links: GitHub, Heroku_backend, Heroku_frontend, Demo

Group name: Flaskpro

Group members: Baohui Deng, Tannaz Vahidi, Amr Shakhshir

Project description:

The idea of the project is to provide a platform where students can share their experiences in order to support new students and facilitate the study process for them (e.g. guidance, study materials, advices, notes). Additionally, use this platform to gather course’s topics in one place and focus on the most important one.

Main features:

• Login, Registration
• Change username, password, and personal image
• Add posts such as; inquiries and advices
• Upload helpful files and materials (only pdf, zip, and images)
• Interact on posts by adding comments, like, and dislike
• User can update his/her own posts or remove them

Technologies used:

• Frontend: React, Axios, Postman
• Backend: Flask_PyMongo, MongoDB, mLab, gunicorn

Links: GitHub, Heroku, Demo Advertisement Video

Group name: Donotreact

Group members: Constanze Becker, Tamanna, Jule Zirger

Project description:

The idea of the project is to provide an online bullet journal aiming at helping students organize their studies.

Main features:

• Login, Registration
• Welcome Page with addvertisment video
• Overview page with favourite note , timetable preview, todo list
• Notes page where user can save small notes
• Assignments and exams planner
• Customizable timetable

Technologies used:

• Frontend: React, Bootstrap
• Backend: Flask, MongoDB

Links: GitHub, Advertisement Video

Group name: FlaskDiggers

Group members: Farnoosh Shahabbaspour, Mohaimn Layth, Muhammad Dawar, Hasan Halacli

Project description:

The idea of the project is to provide a discussion platform (forum) dedicated to masters of computer engineering students where they can exchange information, share resources, cite problems and learn from experienced students.

Main features:

• Login, Registration
• Posting questions and queries about courses
• Replying to the queries posted by peers
• Thumbs up\down to vote for or against a post

Technologies used:

• Frontend: React, Bootstrap, Axios
• Backend: Flask, MongoDB

Links: GitHub, Demo

Group name: DashClub

Group members: Benjamine Wobiwo Teda, Keli Dara-ahato

Project description:

The idea of the project is to provide a platform that allows students to test their knowledge or learn new things for a given topic using Videos and E-book. Moreover, they can take a quiz on the related topic.

Main features:

• Login, Registration
• Choose a Topic, view the related lectures and take a quiz
• Share learn material for the subjects
• View his learn analytics and update his account

Technologies used:

• Frontend: React, Bootstrap
• Backend: Flask, MongoDB

Links: GitHub, Heroku_backend; Heroku_frontend, Demo