Advanced Web Technologies

Lecture: Advanced Web Technologies (SS 18)

Semester: Summer Semester 2018

Lecture language: English

Exam language: English

Exam type: Oral examination

Maximum number of participants: 30

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 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, combination of different Web technologies, Web toolkits and development environments, current backend Web frameworks (e.g. Node & Express, Django, Ruby on Rails), and frontend Web frameworks (e.g. Angular, React, Vue.js, Ember.js, Meteor). This course follows a student-centered, project-based learning approach. Web technologies will be proposed and 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 (50%), student presentations including tutorial and exercise for peers (17%) and oral exam (33%). 

Target audience

  • Master Applied Computer Science
  • Master ISE

Date and location

Lecture:

  • Wed, 14:00 – 16:00
  • LF 125
  • Starts on April 11, 2018

Lab Session:

  • Tue, 16:00 – 18:00
  • LF 125
  • Starts on April 17, 2018

Prerequisites

  • Good knowledge of basic Web technologies such as HTML, CSS, JavaScript.
  • 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 Prof. Dr. Mohamed Chatti with your contact information, your study program, and your knowledge/experience in Web technologies. If the maximum number of participants is reached, we will use a waiting list.

Organisation

Lecturers

Prof. Dr. Mohamed Chatti (Lecturer)

Arham Muslim, M.Sc. (Teaching Assistant)

Student Projects

Smart Learning

Group name: Smart QR Code

Group members: Hasan Mhd Amin, Mhd Yazan Al Zaeem, Farbod Aprin, Muhammad Faizan Riaz

Project description:

The goal is to help students collaboratively collect and share learning materials. Students face problems while preparing for exams and always look for some helping material at the later stages. We came up with the idea to provide students with a common platform through which they can scan a provided QR code for a specific topic and easily access the collected learning materials related to that topic, provided in different cards. We also provide a rating and ranking functionality for the students,  so that they can get the most relevant materials at the top.

Main features:

  • Login, Registration, Change Password, Upload Photo
  • Create Board
  • Add Learning Material (as Card)
  • Voting
  • Scan/Generate QR-Code

Technologies used:

  • Frontend: React
  • Backend: Node / Express
  • MongoDB
  • WebStorm

Links: GitHub, Heroku

ExQuizMe

Group name: FutureBook

Group members: Ejder Das, Christian Bergmann, Ankita Mandal, Nikulkumar Goyani, Ritesh Damera

Project description:

A quiz tool by the students, of the students and for the students. Students can create questions and quizzes to prepare for an exam. Other students can play these quizzes and create their own quizzes. Students can also provide correct explanations for the answers.

Main features:

  • Quiz tool organized by students or lecturers
  • Everyone with an invitation link gets access to a repository
  • Participants can provide questions and play the quiz
  • 3 Question types (True-False, Multiple choices, Multiple answers)
  • Comments section for every question
  • Vote system (up and down vote). Questions with a vote score equal -5 are getting deleted

Technologies used:

  • Frontend: React, React-Bootsrap, Highcharts
  • Backend: Node / Express, Joi
  • MongoDB
  • Postman, Notepad++, PHP-Storm, VS Code

Links: GitHub, Heroku

FEEQLY

Group name: BruteForce

Group members: Mengjiao Ge, Kiarash Moazzez, Parastoo Amirali, Negin Ahmadian

Project description:

This app is an online platform which provides teachers and lecturers to opportunity to interact in a better way with their audience.

Main features:

  • Registration and Login system
  • Course, session and question creation
  • Enroll in a course
  • Answer the questions
  • Rate the questions

Technologies used:

  • Frontend: Angular
  • Backend: Node / Express
  • MongoDB

Links: GitHub, Heroku

Course Review System

Group name: LOREM

Group members: Abdul-Rahman khan, Bilawal Wajid, ABM Rocknuzzaman, Aalli Mahmood, Koussay Mizouri, Muhammad Zeeshan, Ghulam Dawood Nasimi

Project description:

The core idea of the project was to make an application which enables students to review (based on course content, difficulty level, quality of course materials, and professor expertise) and rank courses to help peers in the selection of new courses.

Main features:

  • Review a course.
  • Course ranking based on reviews
  • Visualizations

Technologies used:

  • Frontend: Angular
  • Backend: Node / Express
  • MongoDB

Links: GitHub, Heroku