Nane Kratzke | Webtechnology Project

Lecture:

Webtechnology Project

Published: 01 Apr 2023 (latest update: 03 May 2023)
Short: Webtech
Semester: SS 2023
Study: Computer science

This project is about common technologies used to build (client-side parts) of web information systems. The project course (German) is given for students at the Lübeck University of Applied Sciences. The course is designed according to a project- and problem-based learning methodology and covers the following aspects:

Descriptional languages for web content like HTML
Presentational languages for web content like CSS
Document Object Model (DOM)
Client-side programming with Dart
Deployment Pipelines
Containerization
Container Orchestration
Students intensify their (web) programming skills by solving the task to develop a small one person, DOM-tree based online game like Tetris or Boulder Dash.

To have a look at the overall hall-of-fame might be interesting as well.

Material

Overview
Unit 01: HTML + DOM-Tree + CSS
Unit 02: Dart I (Dart as full purpose programming language)
Unit 03: Dart II (Client- and server-side programming)
Unit 04: Deployment Pipelines (Gitlab CI/CD)
Unit 05: Container (Docker)
Unit 06: Kubernetes
Unit 07: HTTP + REST

Screencasts

Dart Pong, Part I: Absolute positioning using CSS
Dart Pong, Part II: MVC-based game architectures
Dart Pong, Part III: Event handling
Dart Pong, Part IV: CSS animations

Labs

HTML+CSS+Dart: Barebones Web Project
Deployment Pipelines: Gitlab CI/CD
Containerization: Building of Container Images
Container Orchestration: Kubernetes
HTTP + REST: REST APIs

Reference games

SnakeDart: The famous snake game (A reference project to develop another game using Dart)
Shadow Hunter: Reference mobile 'game' (Demonstrates gyroscope control on mobile devices)
Yet another 2048 game: ya2048 (Demonstrates progressive web app features and swipe controls on mobile devices)