Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
modul:m287:learningunits:lu00:lb02-projektbeschreibung [2025/05/23 06:34] kdemircimodul:m287:learningunits:lu00:lb02-projektbeschreibung [2025/05/23 08:23] (aktuell) kdemirci
Zeile 1: Zeile 1:
-====== LU00f - LB02 Projektbeschreibung [TBD] ====== +====== LU00g - LB02 Projektbeschreibung ======
 ===== Projekt 1: Kochrezepte-Plattform ===== ===== Projekt 1: Kochrezepte-Plattform =====
  
Zeile 6: Zeile 5:
 Auf dieser Plattform sollen Nutzer*innen eine Vielzahl von Rezepten entdecken, speichern und nachkochen können. Die Website richtet sich an Hobbyköch*innen und Feinschmecker*innen, die gerne neue Gerichte ausprobieren. Neben der klassischen Darstellung von Rezepten soll die Seite auch durch multimediale Inhalte, wie Videos oder Bildanleitungen, zum Kochen motivieren. Das Design soll frisch, zugänglich und strukturiert sein, sodass Besucher*innen sich schnell zurechtfinden. Auf dieser Plattform sollen Nutzer*innen eine Vielzahl von Rezepten entdecken, speichern und nachkochen können. Die Website richtet sich an Hobbyköch*innen und Feinschmecker*innen, die gerne neue Gerichte ausprobieren. Neben der klassischen Darstellung von Rezepten soll die Seite auch durch multimediale Inhalte, wie Videos oder Bildanleitungen, zum Kochen motivieren. Das Design soll frisch, zugänglich und strukturiert sein, sodass Besucher*innen sich schnell zurechtfinden.
  
-**Use Cases:** +**Use Cases:**   
-  - Nutzer*innen können nach Kategorien (z. B. Vorspeise, Hauptgericht, Dessert) filtern und passende Rezepte anzeigen lassen. +  - Nutzer*innen können nach Kategorien (z. B. Vorspeise, Hauptgericht, Dessert) filtern und passende Rezepte anzeigen lassen.   
-  - Jede Rezeptseite zeigt ein ansprechendes Bild, eine Zutatenliste, eine Schritt-für-Schritt-Anleitung sowie ein eingebettetes Kochvideo. +  - Jede Rezeptseite zeigt ein ansprechendes Bild, eine Zutatenliste, eine Schritt-für-Schritt-Anleitung sowie ein eingebettetes Kochvideo.   
-  - Die Startseite präsentiert ausgewählte Rezept des Tages-Empfehlungen in einem Carousel. +  - Die Startseite präsentiert ausgewählte "Rezept des Tages"-Empfehlungen in einem Carousel (Bootstrap Carousel-Komponente)  
-  - Ein responsives Grid zeigt Rezeptkarten mit kurzen Teasern und einem Mehr erfahren-Button.+  - Ein responsives Grid zeigt Rezeptkarten mit kurzen Teasern und einem "Mehr erfahren"-Button (z. B. Bootstrap Cards).  
   - Eine Kontaktseite ermöglicht Nutzer*innen das Einsenden eigener Rezepte inklusive Bild-Upload.   - Eine Kontaktseite ermöglicht Nutzer*innen das Einsenden eigener Rezepte inklusive Bild-Upload.
  
Zeile 20: Zeile 19:
 Die Website zeigt das Portfolio einer Künstlerin, die Malerei, Illustration oder digitale Kunst betreibt. Besucher*innen sollen ihre Werke entdecken, mehr über die Künstlerin erfahren und bei Interesse eine Anfrage stellen können. Die Seite legt besonderen Wert auf die visuelle Darstellung und eine minimalistische Gestaltung, die die Kunst in den Vordergrund stellt. Die Website zeigt das Portfolio einer Künstlerin, die Malerei, Illustration oder digitale Kunst betreibt. Besucher*innen sollen ihre Werke entdecken, mehr über die Künstlerin erfahren und bei Interesse eine Anfrage stellen können. Die Seite legt besonderen Wert auf die visuelle Darstellung und eine minimalistische Gestaltung, die die Kunst in den Vordergrund stellt.
  
-**Use Cases:** +**Use Cases:**   
-  - Galerie mit Lightbox-Darstellung+  - Eine Galerie zeigt Bilder der Werke, die beim Anklicken in einer Lightbox grösser dargestellt werden (z. B. Bootstrap Modal).   
-  - Über-mich-Seite mit Biografie und künstlerischer Laufbahn. +  - Eine Über-mich-Seite stellt die Künstlerin mit Foto, Biografie und künstlerischer Laufbahn vor  
-  - Bereich für Ausstellungen mit Veranstaltungsdaten und Flyern. +  - Ein Bereich für aktuelle oder vergangene Ausstellungen mit Veranstaltungsdaten und Flyern als Download  
-  - Kontaktformular mit Betreffauswahl. +  - Kontaktformular mit Betreffauswahl (Anfrage für Ausstellung, Kaufanfrage, Presse)  
-  - Blog mit Einblicken in den Schaffensprozess.+  - Ein Blog-Bereich, in dem die Künstlerin Einblicke in ihren Schaffensprozess gibt (z. B. mit Bootstrap Accordion für Artikelübersicht).
  
 ---- ----
Zeile 32: Zeile 31:
  
 **Beschreibung:**   **Beschreibung:**  
-Die Website stellt ein charmantes, lokal verankertes Café vor. Ziel ist es, die Atmosphäre des Ortes digital einzufangen und Informationen zu Angebot, Lage und Öffnungszeiten bereitzustellen.+Die Website stellt ein charmantes, lokal verankertes Café vor. Ziel ist es, die Atmosphäre des Ortes digital einzufangen und Informationen zu Angebot, Lage und Öffnungszeiten bereitzustellen. Die Seite soll einladend wirken, Appetit machen und zur Kontaktaufnahme oder Reservierung animieren.
  
-**Use Cases:** +**Use Cases:**   
-  - Stylische Karten-Elemente für die Speisekarte+  - Speisekarte mit Tagesangeboten, dargestellt über stylische Karten-Elemente (z. B. Bootstrap Cards).   
-  - Hero-Bild mit Café-Vorstellung. +  - Startseite mit Hero-Bild des Cafés und einer kurzen Vorstellung (z. B. Jumbotron oder Grid-Layout).   
-  - Galerie mit Interieur und Speisen. +  - Galerie mit Bildern vom Interieur, den Speisen und Getränken  
-  - Google Maps mit Anfahrt+  - Google Maps Einbettung mit Anfahrtsbeschreibung  
-  - Reservierungsformular.+  - Kontaktformular für Reservationen und Anfragen (z. B. mit Bootstrap Form Controls).
  
 ---- ----
Zeile 46: Zeile 45:
  
 **Beschreibung:**   **Beschreibung:**  
-Eine Website für ein mehrtägiges Musikfestival mit Bühnen, Bands und Rahmenprogramm. Emotionale Ansprache durch Medien und Infos zur Organisation.+Eine Website für ein mehrtägiges Musikfestival mit verschiedenen Bühnen, Bands, Foodtrucks und Rahmenprogramm. Sie informiert Besucher*innen umfassend und emotionalisiert durch Bilder, Trailer und Erfahrungsberichte. Auch organisatorische Aspekte wie Anreise oder Sicherheit werden behandelt.
  
-**Use Cases:** +**Use Cases:**   
-  - Line-up mit Bandinfos und Spielzeiten. +  - Vorstellung des Line-ups mit Bandinfos und Spielzeiten pro Tag (z. B. mit Bootstrap Tabs oder Accordion).   
-  - Interaktive Festival-Karte. +  - Interaktive Festival-Karte mit Standorten von Bühnen, WC, Foodtrucks etc  
-  - Trailer und Aftermovies. +  - Video-Trailer und Aftermovies vergangener Festivals (z. B. eingebettetes YouTube-Video im Modal).   
-  - Ticketinfos und Rabatte+  - Ticketinfos mit Preisstaffelung, Link zur Bestellung und Rabatthinweisen  
-  - Festivalguide als PDF.+  - Festivalguide als Download-PDF.
  
 ---- ----
Zeile 60: Zeile 59:
  
 **Beschreibung:**   **Beschreibung:**  
-Website eines Tierschutzvereins mit Infos über VermittlungAufklärung und SpendenFokus auf Tiergeschichten und Partizipation.+Die Website stellt einen Tierschutzverein vorder Tiere rettet, vermittelt und zu artgerechter Haltung aufklärtIm Zentrum stehen die Tiere und ihre Geschichten. Neben Informationen zum Verein gibt es konkrete Aufrufe zur Adoption oder Spenden.
  
-**Use Cases:** +**Use Cases:**   
-  - Tierprofile mit Vermittlungsstatus. +  - Vermittlungsseite mit Tierprofilen (Bild, Beschreibung, Verträglichkeit, Vermittlungsstatus; z. B. als Cards angelegt).   
-  - Vereinsvorstellung und Rückblick+  - Vorstellung des Vereins mit Teamfotos und Jahresrückblick  
-  - Spendenmöglichkeiten+  - Spenden-Seite mit Formular und verschiedenen Unterstützungsoptionen (z. B. mit Bootstrap Input-Groups).   
-  - Erfolgsgeschichten+  - Erfahrungsberichte erfolgreicher Adoptionen  
-  - Veranstaltungskalender.+  - Veranstaltungskalender für Infotage und Aktionen (z. B. als Table-Komponente).
  
 ---- ----
Zeile 74: Zeile 73:
  
 **Beschreibung:**   **Beschreibung:**  
-Ein Blog mit Inhalten zu Fitness, Ernährung und mentaler Gesundheit. Kombination aus Artikeln und interaktiven Formaten.+Die Website bietet fundierte Inhalte rund um Fitness, gesunde Ernährung, mentale Gesundheit und BewegungZielgruppe sind gesundheitsbewusste Menschen, die sich regelmässig informieren und motivieren lassen wollen. Neben Blogartikeln sollen auch interaktive Inhalte wie Videos oder Challenges integriert sein.
  
-**Use Cases:** +**Use Cases:**   
-  - Übersicht über neue Beiträge+  - Startseite mit neuesten Blogbeiträgen und motivierenden Zitaten (z. B. mit Bootstrap Card-Gruppen).   
-  - Artikelsuche mit Tags. +  - Artikel zu verschiedenen Themenkategorien mit Tags und Suchfunktion  
-  - Eingebettete Videos und Podcasts. +  - Eingebettete Workout-Videos oder Podcasts (z. B. über Bootstrap Responsive Embed).   
-  - Monats-Challenge mit Fortschrittsanzeige. +  - Monats-Challenge mit Fortschrittsanzeige oder Downloadplan  
-  - Kontaktformular.+  - Kontaktseite für Fragen, Feedback oder Themenvorschläge (z. B. mit Bootstrap Formularelementen).
  
 ---- ----
Zeile 88: Zeile 87:
  
 **Beschreibung:**   **Beschreibung:**  
-Website eines jungen Mode-Labels mit Fokus auf Design, Trends und Nachhaltigkeit.+Diese Website dient einem jungen Modeunternehmen zur Vorstellung seiner Marke und Kollektionen. Im Vordergrund stehen Design, Trends und Nachhaltigkeit. Die Seite soll modern, dynamisch und trendbewusst gestaltet sein.
  
-**Use Cases:** +**Use Cases:**   
-  - Slideshow für Kollektion. +  - Kollektion präsentieren: Slideshow mit Looks und Beschreibung der Idee dahinter (z. B. mit Bootstrap Carousel).   
-  - Teamvorstellung+  - Designer-Team vorstellen: Fotos, Kurzporträts und Statements  
-  - Style-Quiz oder Beratungsartikel+  - Style-Beratung: Artikel oder Quiz zur Findung des passenden Stils (z. B. mit Bootstrap Cards und Buttons).   
-  - Modetrends im Blog. +  - Blog mit Neuigkeiten zur Marke und Modetrends  
-  - Kontaktoptionen für Medien & Kooperationen.+  - Kontaktseite mit Anfragemöglichkeit für Kooperationen oder Presse (z. B. Modal mit Kontaktformular).
  
 ---- ----
Zeile 102: Zeile 101:
  
 **Beschreibung:**   **Beschreibung:**  
-Tourismusportal einer Region mit ErlebnisweltenHotspots und praktischen Reisetipps.+Die Website führt Besucher*innen in eine attraktive Tourismusregion ein. Sie stellt SehenswürdigkeitenAktivitäten, Unterkünfte und regionale Besonderheiten vor. Ziel ist es, Lust aufs Reisen zu machen und konkrete Informationen bereitzustellen.
  
-**Use Cases:** +**Use Cases:**   
-  - Interaktive Karte mit POIs+  - Interaktive Karte mit Hotspots und Kurzinfos zu jedem Ort  
-  - Themenwelten (z. B. Natur, Kultur). +  - Themenspezifische Erlebniswelten (z. B. Natur, Kultur, Familie).   
-  - Galerie mit Impressionen. +  - Galerie mit Impressionen der Region (z. B. im Card-Layout mit Bootstrap Grid).   
-  - Downloadbare Broschüre. +  - Downloadbare PDF-Broschüre mit Reiserouten  
-  - Kontaktformular.+  - Kontaktformular für individuelle Fragen oder Gruppenanfragen (z. B. Bootstrap Form mit Validierung).
  
 ---- ----
Zeile 116: Zeile 115:
  
 **Beschreibung:**   **Beschreibung:**  
-Nachrichtenplattform mit Artikeln zu aktuellen Themen und multimedialer Aufbereitung.+Diese Plattform bietet aktuelle Nachrichten zu verschiedenen Themenfeldern. Sie soll eine klare Struktur, leichte Navigation und multimediale Inhalte haben. Zielgruppe sind internetaffine Nutzer*innen, die sich regelmässig über das Tagesgeschehen informieren wollen.
  
-**Use Cases:** +**Use Cases:**   
-  - Vorschau von Artikeln nach Kategorien+  - Artikelvorschau auf Startseite mit Kategorie-Labels (z. B. als Cards mit Badges in Bootstrap).   
-  - Artikeldarstellung mit Medien. +  - Detaillierte Artikelseiten mit eingebetteten Medien.   
-  - Filter nach Thema oder Datum+  - Filterfunktion nach Datum, Thema oder Autor (z. B. mit Dropdowns und Selects).   
-  - (OptionalKommentarfunktion+  - Kommentare oder Reaktionen zu Beiträgen (optional).   
-  - Newsletter-Anmeldung.+  - Newsletter-Anmeldung für wöchentliche Zusammenfassungen (z. B. via Bootstrap Input Group mit Button).
  
 ---- ----
Zeile 130: Zeile 129:
  
 **Beschreibung:**   **Beschreibung:**  
-Digitales Museum mit virtuellen Rundgängen, Exponaten und Lehrmaterialien.+Das Online Museum bietet Besucher*innen einen digitalen Zugang zu einer Sammlung von Exponaten, Ausstellungen und Hintergrundwissen. Ziel ist es, Bildung und Kultur niederschwellig zugänglich zu machen. Auch interaktive Formate sollen integriert werden.
  
-**Use Cases:** +**Use Cases:**   
-  - Interaktive Ausstellung. +  - Virtuelle Ausstellung mit interaktivem Rundgang  
-  - Exponatseiten mit Audio/Video+  - Detailseiten für Exponate mit Bild, Text, Audioerklärung (z. B. mit Cards und Tabs).   
-  - Eventkalender+  - Kalender für kommende Online-Events oder Workshops  
-  - Downloadbereich. +  - Downloadbereich für Arbeitsblätter oder Zusatzmaterial (z. B. über Bootstrap List-Groups).   
-  - Feedbackformular.+  - Feedbackformular zur Verbesserung des digitalen Angebots.
  
 ---- ----
Zeile 144: Zeile 143:
  
 **Beschreibung:**   **Beschreibung:**  
-Plattform für Indie-Spiele mit Fokus auf CommunityPräsentation und Förderung.+Diese Website widmet sich der Vorstellung und Promotion unabhängiger Computerspiele. Entwickler*innen präsentieren hier ihre Spiele mit TrailernScreenshots und Infos zur Entwicklung. Die Plattform dient auch als Sprungbrett für Crowdfunding oder Community-Aufbau.
  
-**Use Cases:** +**Use Cases:**   
-  - Spieleseiten mit Trailern und Infos+  - Spieleseiten mit Beschreibung, Screenshots, Trailer (z. B. mit Cards und Carousel für Screenshots)  
-  - Entwicklerporträts. +  - Entwicklerporträts mit Biografie und Projektinfos  
-  - Dev-Blog. +  - Blog über Entwicklungsfortschritte und technische Hintergründe  
-  - Community-Kommentare+  - Kommentarfunktion für Feedback und Community-Austausch  
-  - Demo-Downloads oder Plattform-Links.+  - Bereich mit Download-Demos oder Links zu Plattformen (z. B. mit Badges und Buttons in Bootstrap).
  
 ---- ----
Zeile 158: Zeile 157:
  
 **Beschreibung:**   **Beschreibung:**  
-Professionelle Website für ein Architekturbüro mit Referenzprojekten und Philosophie.+Eine professionelle Website für ein Architekturbüro, die realisierte Projekte, Designphilosophie und Team vorstellt. Die Gestaltung soll klar, elegant und technisch anspruchsvoll wirken. 
 + 
 +**Use Cases:**   
 +  - Projektgalerie mit Vorher-Nachher-Vergleichen (z. B. mit Bootstrap Grid oder Carousel).   
 +  - Detaillierte Projektseiten mit Grundrissen, Fotos und Beschreibung.   
 +  - Teamseite mit Kurzvorstellungen der Architekt*innen (z. B. als Cards mit Bildern und Text).   
 +  - Newsbereich mit aktuellen Bauprojekten oder Wettbewerbsteilnahmen.   
 +  - Kontaktformular mit Möglichkeit zur Projektanfrage oder Bewerbungen (z. B. mit Validierung und Input-Groups). 
 + 
 +----
  
-**Use Cases:** +[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Kamil Demirci
-  Galerie mit Vorher-Nachher-Vergleich. +
-  - Projektseiten mit Details. +
-  - Teampräsentation. +
-  News über Bauprojekte. +
-  - Kontaktformular für Anfragen.+
  
  • modul/m287/learningunits/lu00/lb02-projektbeschreibung.1747974877.txt.gz
  • Zuletzt geändert: 2025/05/23 06:34
  • von kdemirci