dhbw: neuer kurs technik I — 4 kapitel + demo assets
This commit is contained in:
418
slides/dhbw/01_web_eng.md
Normal file
418
slides/dhbw/01_web_eng.md
Normal file
@@ -0,0 +1,418 @@
|
||||
---
|
||||
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`?
|
||||
Reference in New Issue
Block a user