public/uni

Fork 0

Files

Michael Czechowski 841a7ced76

dhbw: neuer kurs technik I — 4 kapitel + demo assets

2026-05-04 20:05:46 +02:00

6.1 KiB

Raw Blame History

marp, theme, paginate, backgroundColor, header, footer, title

marp	theme	paginate	backgroundColor	header	footer	title
true	gaia	true		Web Engineering – DHBW Stuttgart	Michael Czechowski – SoSe 2025	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

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

<!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

<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

<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>

CSS – Cascading Style Sheets

CSS Grundlagen

/* 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

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

CSS Layout – Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

CSS – Box Model

.box {
  margin: 10px;
  border: 2px solid #005f8a;
  padding: 20px;
  width: 200px;
  box-sizing: border-box;
}

CSS Responsive

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

JavaScript

JavaScript Grundlagen

// 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

// Element auswählen
const title = document.querySelector('h1');

// Inhalt ändern
title.textContent = 'Neue Überschrift';

// Event Listener
button.addEventListener('click', () => {
  alert('Geklickt!');
});

Fetch API

fetch('/api/products')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => console.error(err));

Async/Await

async function loadProducts() {
  try {
    const res = await fetch('/api/products');
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('Fehler:', err);
  }
}

Fragen?

Was ist der Unterschied zwischen let und const?
Wie funktioniert fetch()?
Was macht box-sizing: border-box?

6.1 KiB Raw Blame History Unescape Escape