---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Web Engineering – DHBW Stuttgart"
footer: "Michael Czechowski – SoSe 2025"
title: Web Engineering
---
# Web Engineering
**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
**Sommersemester 2025**
---
# Willkommen!
## 1. Sitzung: 09.05.2025
---
# Wer bist du, was machst du?
- B.Sc. Wirtschaftsinformatik (Leibniz-FH Hannover)
- Angestellt bei PONS Langenscheidt GmbH in Stuttgart
- Honorardozent und Berater
**Bisherige Vorlesungen (DHBW/Leibniz-FH):**
- Social Engineering, Mobile Medien, Web Eng
---
# Vorlesungsplan
| Sitzung | Datum | Thema |
|---------|-------|-------|
| 1 | 09.05. | Formalia, Kennenlernen, Internet 101 |
| 2 | 16.05. | HTML und CSS (Frameworks) |
| 3 | 23.05. | JS (Frameworks) und npm |
| 4 | 30.05. | nodeJS: Scripting, Running and Building |
| 5 | 06.06. | Express API, CRUD und "Middlewares" |
| 6 | 13.06. | Testing (unit, integration, end-to-end) |
| 7 | 20.06. | TypeScript |
| 8 | 27.06. | Docker, Proxies and DBs |
| 9 | 04.07. | Präsentationen |
---
# Prüfungsleistung
**LN** – Lernnachweis (50%)
- Projekte / Hausaufgaben
- Präsentation
---
# Internet 101 – Zeitleiste
| Jahr | Ereignis |
|------|----------|
| 1966 | ARPANET |
| 1969 | RFCs |
| 1986 | IETF |
| 1992 | Internet Society |
| 1974 | TCP/IP und HTTP(S) |
| 1987 | Domain Names und DNS |
| 1993 | "Erster" Browser: Mosaic |
| 1994 | W3C (HTML, XML, CSS, SVG, WCAG etc.) |
| 1995 | ECMAScript (JS) |
| 2006/08 | V8 JS Runtime Engine |
| Heute | 1,3 Mio. km Unterseekabel |
---
# Internet 101 – Browser Request
```
Browser Server
| |
|-- GET /products -------------->|
|<-- HTTP 200 + index.html -----|
| |
|-- GET /script.js ------------->|
|<-- HTTP 200 + script.js ------|
| |
|-- GET /api/products ---------->|
|<-- HTTP 200 + JSON ------------|
```
---
---
# HTTP – Hypertext Transfer Protocol
**Request:**
```
GET /products HTTP/1.1
Host: localhost:8080
```
**Response:**
```
HTTP/1.1 200 OK
Content-Type: application/json
[{"id": 1, "name": "Produkt A"}, ...]
```
---
# Entwicklungsumgebung
**Tools:**
- Node.js + npm
- VS Code
- Git
- Chrome DevTools
---
# Versionierung mit Git
```bash
git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/user/repo.git
git push -u origin main
```
---
# HTML – Hypertext Markup Language
---
# HTML Grundlagen
```html
Meine Seite
Überschrift
Textabsatz
```
---
# Semantisches HTML
```html
```
---
# HTML – Tabellen und Listen
```html
| Name | Preis |
|---|
| Produkt A | 29,99 € |
```
---
# CSS – Cascading Style Sheets
---
# CSS Grundlagen
```css
/* Element */
body { font-family: Arial, sans-serif; }
/* Klasse */
.button { background: #005f8a; color: white; }
/* ID */
#header { height: 60px; }
/* Attribut */
input[type="text"] { border: 1px solid #ccc; }
```
---
# CSS Layout – Flexbox
```css
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
```
---
# CSS Layout – Grid
```css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
```
---
# CSS – Box Model
```css
.box {
margin: 10px;
border: 2px solid #005f8a;
padding: 20px;
width: 200px;
box-sizing: border-box;
}
```
---
# CSS Responsive
```css
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
```
---
# JavaScript
---
# JavaScript Grundlagen
```javascript
// Variablen
let name = "Welt";
const alter = 25;
// Funktionen
function gruss(name) {
return `Hallo, ${name}!`;
}
// Arrow Functions
const add = (a, b) => a + b;
// Arrays
const arr = [1, 2, 3];
arr.map(x => x * 2); // [2, 4, 6]
```
---
# DOM Manipulation
```javascript
// Element auswählen
const title = document.querySelector('h1');
// Inhalt ändern
title.textContent = 'Neue Überschrift';
// Event Listener
button.addEventListener('click', () => {
alert('Geklickt!');
});
```
---
# Fetch API
```javascript
fetch('/api/products')
.then(res => res.json())
.then(data => {
console.log(data);
})
.catch(err => console.error(err));
```
---
# Async/Await
```javascript
async function loadProducts() {
try {
const res = await fetch('/api/products');
const data = await res.json();
return data;
} catch (err) {
console.error('Fehler:', err);
}
}
```
---
---
# Fragen?
1. Was ist der Unterschied zwischen `let` und `const`?
2. Wie funktioniert `fetch()`?
3. Was macht `box-sizing: border-box`?