Wintersemester
Responsive Design
Beschreibung der Lernsituation
Die Aufgabe bestand darin, eine Webseite mit einem responsiven Design zu gestalten. Dabei lag der Fokus auf der Einbindung eines Logos mit CSS, der Anpassung von Layout-Elementen für verschiedene Endgeräte und der Optimierung des Drucklayouts.
Erlernte Kompetenzen
- Umsetzung von Layouts, die sich an unterschiedliche Bildschirmgrößen anpassen
- Strukturierung und gezielte Gestaltung einzelner Elemente
- Anpassung von Stilen für verschiedene Endgeräte (z. B. Smartphones, Tablets)
- Steuerung der Sichtbarkeit von Elementen beim Drucken
- Farbgebung und Größenanpassung für eine ansprechende Optik
Umsetzung und Ergebnisse
Das Logo wurde mithilfe von CSS in der Header-Sektion eingebunden. Es wurde so gestaltet, dass seine Größe je nach Endgerät variiert: auf großen Bildschirmen 100px breit und auf Smartphones 50px. Der Hauptteil erhielt auf Tablets und größeren Geräten einen leicht blauen Hintergrund sowie feste Abmessungen (900px Breite, 500px Höhe). Die Fußzeile wurde für den Druck ausgeblendet, bleibt jedoch auf Bildschirmen sichtbar.
Das Endergebnis war eine gut strukturierte und optisch ansprechende Webseite, die sich flexibel an verschiedene Geräte anpasst und für den Druck optimiert ist.
Ergebnisse - Beispiele
Fazit
Diese Aufgabe zeigte die Bedeutung von responsivem Design und die Vielseitigkeit von CSS bei der Gestaltung moderner Webseiten. Durch die gezielte Anwendung von Medienabfragen und Print-Optimierungen konnten praktische Lösungen für unterschiedliche Nutzungsszenarien umgesetzt werden.
Sommersemester
Ein- und Ausblenden der Detailbeschreibung des Wohnortes
Beschreibung der Lernsituation
Die Aufgabe bestand darin, mithilfe von jQuery dynamische Funktionen für eine Webseite zu implementieren. Konkret ging es darum, die Detailbeschreibung eines Wohnortes und ein zugehöriges Bild über Buttons ein- und auszublenden. Dabei sollten IDs und Klassen als Selektoren verwendet werden.
Erlernte Kompetenzen
- jQuery-Grundlagen
- Effiziente Nutzung von IDs und Klassen für die gezielte Ansprache von Elementen
- Gestaltung dynamischer Elemente durch einfache Steuerung per Buttons
- Dynamische Bilddarstellung mit HTML und jQuery
Umsetzung und Ergebnisse
Die Detailbeschreibung des Wohnortes wurde durch eine ID als Selektor adressiert und konnte über Buttons ein- und ausgeblendet werden. Für das Bild des Wohnortes wurde eine Klasse verwendet, die ebenfalls durch Buttons gesteuert wurde. Beide Funktionen nutzten die jQuery-Methoden .show() und .hide(), wodurch eine einfache und benutzerfreundliche Steuerung ermöglicht wurde. Das Ergebnis war eine interaktive und funktionale Webseite, die durch die dynamischen Funktionen eine ansprechende Bedienung bot.
Ergebnisse - Beispiele
Fügen
Fazit
Diese Aufgabe verdeutlichte, wie jQuery eingesetzt werden kann, um Webseiten interaktiver und benutzerfreundlicher zu gestalten. Durch das Arbeiten mit Selektoren und die Implementierung von Buttons wurden praktische Kenntnisse vermittelt, die sich direkt auf zukünftige Projekte anwenden lassen.