Initial commit: IHK Ausbildung materials
This commit is contained in:
231
3-Ausbildungsjahr/LF10a-Benutzeroberflächen/LF10a-Notizen.md
Normal file
231
3-Ausbildungsjahr/LF10a-Benutzeroberflächen/LF10a-Notizen.md
Normal file
@@ -0,0 +1,231 @@
|
||||
# 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*
|
||||
Reference in New Issue
Block a user