418 lines
6.1 KiB
Markdown
418 lines
6.1 KiB
Markdown
---
|
||
marp: true
|
||
theme: gaia
|
||
paginate: true
|
||
backgroundColor: #fff
|
||
header: "Web Engineering – DHBW Stuttgart"
|
||
footer: "Michael Czechowski – SoSe 2025"
|
||
title: Web Engineering
|
||
---
|
||
|
||
<style>
|
||
:root {
|
||
--color-foreground: #1a1a2e;
|
||
--color-highlight: #005f8a;
|
||
--color-dimmed: #4a6a7a;
|
||
}
|
||
section.invert {
|
||
--color-foreground: #fff;
|
||
}
|
||
section {
|
||
font-size: 1.7rem;
|
||
}
|
||
h1 {
|
||
color: #005f8a;
|
||
}
|
||
section.invert h1 {
|
||
color: #fff;
|
||
}
|
||
pre {
|
||
background: #0f1e2e;
|
||
color: #00b4d8;
|
||
border-radius: 8px;
|
||
border-left: 3px solid #005f8a;
|
||
}
|
||
pre code {
|
||
background: transparent;
|
||
color: inherit;
|
||
}
|
||
code {
|
||
background: #1a3a4a;
|
||
color: #00b4d8;
|
||
padding: 0.15em 0.4em;
|
||
border-radius: 4px;
|
||
}
|
||
a {
|
||
color: var(--color-highlight);
|
||
}
|
||
</style>
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _backgroundColor: #001520 -->
|
||
|
||
|
||
|
||
# Web Engineering
|
||
|
||
**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
|
||
|
||
**Sommersemester 2025**
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# 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 ------------|
|
||
```
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
# 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
|
||
```
|
||
|
||
---
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _backgroundColor: #001520 -->
|
||
|
||
# HTML – Hypertext Markup Language
|
||
|
||
---
|
||
|
||
# HTML Grundlagen
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Meine Seite</title>
|
||
</head>
|
||
<body>
|
||
<h1>Überschrift</h1>
|
||
<p>Textabsatz</p>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
---
|
||
|
||
# Semantisches HTML
|
||
|
||
```html
|
||
<header>Navigationsbereich</header>
|
||
<nav>Navigation</nav>
|
||
<main>
|
||
<article>
|
||
<section>
|
||
<h2>Überschrift</h2>
|
||
<p>Inhalt</p>
|
||
</section>
|
||
</article>
|
||
</main>
|
||
<footer>Fußzeile</footer>
|
||
```
|
||
|
||
---
|
||
|
||
# HTML – Tabellen und Listen
|
||
|
||
```html
|
||
<table>
|
||
<thead>
|
||
<tr><th>Name</th><th>Preis</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Produkt A</td><td>29,99 €</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<ul>
|
||
<li>Punkt 1</li>
|
||
<li>Punkt 2</li>
|
||
</ul>
|
||
```
|
||
|
||
---
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _backgroundColor: #001520 -->
|
||
|
||
# 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;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _backgroundColor: #001520 -->
|
||
|
||
# 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);
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
# Fragen?
|
||
|
||
1. Was ist der Unterschied zwischen `let` und `const`?
|
||
2. Wie funktioniert `fetch()`?
|
||
3. Was macht `box-sizing: border-box`? |