Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu00:lb02-projektauftrag [2025/05/23 05:55] – kdemirci
+++ modul:m287:learningunits:lu00:lb02-projektauftrag [2025/05/23 08:21] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
-====== LU00e - LB02 Projektarbeit [TBD] ======
+====== LU00f - LB02 Projektarbeit ======
 ===== Ziel =====
 Sie gestalten eine eigene, vollständig responsive Webseite zum vorgegebenen Thema. Es geht darum, Bootstrap sowie eigene CSS-Anpassungen gezielt anzuwenden.
-===== Inhalt =====
+===== Auftrag =====
-Das Projekt ist in 2 Teilen aufgeteilt:
-  * Gemeinsame Bewertungskriterien (Header, Navigation, Footer etc.)
+Nachfolgend finden Sie eine Reihe von Projektbeschreibungen. Bearbeiten Sie das Ihnen zugewiesene Projekt, d.h. programmieren Sie eine Webseite und präsentieren Ihre Resultate am Ende des Moduls als Videocast von ca. 5 Minuten Länge.
-  * Individuelle Bewertungskriterien (Content)
-===== Anforderungen =====
+===== Inhalt =====
+^ Titel ^ Bewertung ^ Beschreibung ^
+| **Konzept** | 15% | <WRAP>
+  * Sitemap
+  * Skizzen / Designentwurf
+  * Farbkonzept
+</WRAP> |
+| **Realisierung** | 45% | <WRAP>
+  * Responsives Layout für Mobile, Tablet und Desktop (Grid-System von Bootstrap oder CSS Grid korrekt anwenden)
+  * Umsetzung mit Bootstrap Komponenten (z.B. Navbar, Cards, Buttons)
+  * Anpassung des Designs mit CSS
+  * Verwendung von mindestens 2 unterschiedliche Medientypen (z.B. Bilder, Videos, Audio)
+</WRAP> |
+| **Qualitätssicherung** | 20% | <WRAP>
+  * HTML/CSS-Validierung ([[https://validator.w3.org/|W3 HTML Validator]] und [[https://jigsaw.w3.org/css-validator/|W3 CSS Validator]])
+  * Responsives Verhalten prüfen
+  * Abgleich mit Konzept
+  * Testprotokoll führen
+</WRAP>  |
+| **Präsentation & Reflexion als Videocast** | 20% | <WRAP>
+  * Zielsetzung
+  * Konzept
+  * Demo
+    * Navigation
+    * Responsives Layout
+    * Inhalt
+    * Besondere Funktionen
+    * Multimedia-Elemente
+  * Reflexion
+</WRAP> |
-  * **HTML-Struktur**\\ Verwendung semantischer HTML5-Elemente wie ''<header>'', ''<nav>'', ''<main>'', ''<section>'', ''<article>'', ''<aside>'' und ''<footer>''.
+===== Abgabe - Zu liefernden Lernprodukte =====
-  * **CSS-Styling**\\ Gestaltung der Webseite mit CSS, einschliesslich Layout, Farben und Responsivität.
+Das Projekt ist als ein ZIP-File in Moodle abzugeben. In diesem ZIP-File sind die nachfolgenden Ordner und Daten enthalten:
-  * **Responsives Design**\\ Die Webseite soll auf verschiedenen Bildschirmgrössen (Desktop, Tablet, Smartphone) gut lesbar und benutzbar sein.
-===== Bewertung =====
+  * Konzept
-^ Titel ^ Bewertung ^ Beschreibung ^
+  * Webseite
-| Konzept | 15% | Erstellung des Sitemaps mit Grobinhalt für verschiedene Seiten\\ |
+  * Qualitätssicherung
-| Realisierung | 45% | Responsives Layout für Mobile, Tablet und Desktop (Grid-System von Bootstrap oder CSS Grid korrekt anwenden)\\ Umsetzung mit Bootstrap Komponenten (z.B. Navbar, Cards, Buttons)\\ Anpassung des Designs mit CSS\\ Verwendung von mindestens 2 unterschiedliche Medientypen (z.B. Bilder, Videos, Audio) |
+  * Videocast
-| Qualitätssicherung | 20% | Saubere, korrekte und gut strukturierte HTML/CSS-Dateien\\ Umsetzung basierend auf Konzept |
-| Präsentation & Reflexion | 20% | Einführung und Vorstellung des Projekts (Titel, Zielsetzung, Konzept mit Skizzen und Entwürfen)\\ Website-Übersicht (Navigation, responsives Layout, Inhalte, Besondere Funktionen, Multimedia-Elemente)\\ Reflexion der Umsetzung (Herausforderungen und Lessons learned) |
-% – Bootstrap und Multimedia-Elemente einbinden, anwenden und anpassen
+----
-% – Qualitätssicherung der Vorgaben (Vorgehen, Vollständigkeit, Korrektheit)
+[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Kamil Demirci
-Saubere, korrekte und gut strukturierte HTML/CSS-Dateien
-Umsetzung basierend auf selbst erstellten Skizzen oder Entwürfen
-% - Präsentation inkl. Reflexion (5 Minuten als Videocast)