jleibl/ihk-ausbildung

Fork 0

Files

Jan-Marlon Leibl eb4a13ef7c

Initial commit: IHK Ausbildung materials

2026-03-13 11:46:08 +01:00

4.5 KiB

Raw Blame History

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

<!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>&copy; 2024</footer>
</body>
</html>

CSS3

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

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

Stand: 2024 | Quelle: KMK Rahmenlehrplan 13.12.2019

4.5 KiB Raw Blame History