232 lines
4.5 KiB
Markdown
232 lines
4.5 KiB
Markdown
# LF 10a: Benutzerschnittstellen gestalten und entwickeln
|
|
|
|
> **3. Ausbildungsjahr** | Zeitrichtwert: **80 Stunden**
|
|
|
|
## Kernkompetenz
|
|
|
|
Die Schülerinnen und Schüler verfügen über die Kompetenz, Benutzeroberflächen für softwarebasierte Arbeitsabläufe und Geschäftsprozesse zu gestalten und zu entwickeln.
|
|
|
|
---
|
|
|
|
## Lernziele
|
|
|
|
Nach diesem Lernfeld kannst du:
|
|
- [ ] Geschäftsprozesse analysieren und modellieren
|
|
- [ ] Benutzeroberflächen ergonomisch gestalten
|
|
- [ ] UI/UX-Prinzipien anwenden
|
|
- [ ] Responsive Design umsetzen
|
|
- [ ] Agile Entwicklungsmethoden anwenden
|
|
- [ ] Datenschutz und Benutzerfreundlichkeit prüfen
|
|
|
|
---
|
|
|
|
## UI/UX-Grundlagen
|
|
|
|
### UI (User Interface)
|
|
|
|
```
|
|
Gestaltungselemente:
|
|
├── Layout
|
|
│ ├── Struktur
|
|
│ ├── Hierarchie
|
|
│ └── Weißraum
|
|
├── Typografie
|
|
│ ├── Schriftart
|
|
│ ├── Schriftgröße
|
|
│ └── Lesbarkeit
|
|
├── Farben
|
|
│ ├── Farbschema
|
|
│ ├── Kontrast
|
|
│ └── Bedeutung
|
|
└── Komponenten
|
|
├── Buttons
|
|
├── Formulare
|
|
└── Navigation
|
|
```
|
|
|
|
### UX (User Experience)
|
|
|
|
```
|
|
UX-Prinzipien:
|
|
├── Benutzerzentrierung
|
|
├── Konsistenz
|
|
├── Feedback
|
|
├── Fehlertoleranz
|
|
├── Übersichtlichkeit
|
|
└── Erwartungskonformität
|
|
```
|
|
|
|
---
|
|
|
|
## Web-Entwicklung
|
|
|
|
### HTML5
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Beispielseite</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<a href="/">Start</a>
|
|
<a href="/produkte">Produkte</a>
|
|
<a href="/kontakt">Kontakt</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<h1>Willkommen</h1>
|
|
<p>Dies ist eine Beispielseite.</p>
|
|
</main>
|
|
<footer>© 2024</footer>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### CSS3
|
|
|
|
```css
|
|
/* Responsive Design */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Mobile First */
|
|
@media (min-width: 768px) {
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
/* Flexbox Navigation */
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
```
|
|
|
|
### JavaScript
|
|
|
|
```javascript
|
|
// DOM Manipulation
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const button = document.getElementById('submit-btn');
|
|
|
|
button.addEventListener('click', async (event) => {
|
|
event.preventDefault();
|
|
|
|
const formData = new FormData(document.querySelector('form'));
|
|
const data = Object.fromEntries(formData);
|
|
|
|
try {
|
|
const response = await fetch('/api/submit', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
if (response.ok) {
|
|
alert('Erfolgreich gesendet!');
|
|
}
|
|
} catch (error) {
|
|
console.error('Fehler:', error);
|
|
}
|
|
});
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## Geschäftsprozess-Modellierung
|
|
|
|
### BPMN (Business Process Model and Notation)
|
|
|
|
```
|
|
BPMN-Elemente:
|
|
├── Start/End Event
|
|
├── Task (Aufgabe)
|
|
├── Gateway (Verzweigung)
|
|
│ ├── XOR (entweder-oder)
|
|
│ ├── AND (parallel)
|
|
│ └── OR (möglicherweise)
|
|
├── Sequence Flow (Sequenzfluss)
|
|
└── Message Flow (Nachrichtenfluss)
|
|
```
|
|
|
|
### EPK (Ereignisgesteuerte Prozesskette)
|
|
|
|
```
|
|
Komponenten:
|
|
├── Funktionen (Aktivitäten)
|
|
├── Ereignisse (Auslöser)
|
|
├── Kanten (Verknüpfungen)
|
|
└── Operatoren (UND, ODER, XOR)
|
|
```
|
|
|
|
---
|
|
|
|
## Agile Methoden
|
|
|
|
### Scrum
|
|
|
|
```
|
|
Scrum-Rollen:
|
|
├── Product Owner
|
|
├── Scrum Master
|
|
└── Development Team
|
|
|
|
Scrum-Events:
|
|
├── Sprint Planning
|
|
├── Daily Standup
|
|
├── Sprint Review
|
|
└── Sprint Retrospective
|
|
|
|
Scrum-Artefakte:
|
|
├── Product Backlog
|
|
├── Sprint Backlog
|
|
└── Increment
|
|
```
|
|
|
|
### Kanban
|
|
|
|
```
|
|
Kanban-Prinzipien:
|
|
├── Visualisierung
|
|
├── Limit Work in Progress
|
|
├── Flow-Management
|
|
└── Kontinuierliche Verbesserung
|
|
```
|
|
|
|
---
|
|
|
|
## Prüfungsrelevanz
|
|
|
|
- Wichtig für LF 12a (Abschlussprojekt)
|
|
- UI-Design wird in Teil 2 geprüft
|
|
|
|
---
|
|
|
|
## Querverweise
|
|
|
|
- [[2-Ausbildungsjahr/LF9-Netzwerke-Dienste|Vorher: LF 9]]
|
|
- [[3-Ausbildungsjahr/LF11a-Funktionalität-realisiren|Nachher: LF 11a]]
|
|
|
|
---
|
|
|
|
*Stand: 2024 | Quelle: KMK Rahmenlehrplan 13.12.2019*
|