Aufgabe Digitalmedien

Prüfungsbereich 1: Digitalmedien gestalten und technisch umsetzen

Prüfungsstück I: Umsetzungsvorschlag mit Dokumentation der einzelnen Arbeitsschritte und Erstellung technischer Daten für die Produktion  (Konzeptionsphase 5 Arbeitstage, Prüfungszeit: 20 Stunden)

Die Tauchschule Turtle Diving Resort will, insbesondere für deutschsprachige Taucher, mit einer neuen Website auf sich aufmerksam machen. Tauchen ist auch Emotion und diese Emotion soll die neue Website vermitteln. Außerdem soll mit der Website eines der schönsten Tauchgebiete der Welt vorgestellt werden.

Umsetzung

1. Entwickeln Sie auf Basis der Aufgabenbeschreibung einen Umsetzungsvorschlag mit Arbeitsplanung. Das Logo muss verwendet werden. Auswahl und Umfang der Bilder sind freigestellt, Bildmontagen und Verfremdungen sind möglich. Eigene grafische Elemente und Icons können erstellt und verwendet werden. Zusätzliche Bilder dürfen eingesetzt werden, auf Urheberrechte ist dabei zu achten. Der gesamte Text ist zu integrieren und darf redaktionell nicht verändert werden. Textelemente des vorgegebenen Texts dürfen zusätzlich als Bildunterschrift, Textzitate (Quotes) oder grafische Stilelemente in der Website verwendet werden.
2. Folgende Vorgaben gelten für das Gestaltungskonzept: Die Website soll nach den Regeln des responsiven Webdesigns optimiert werden. Entwerfen Sie eine optimierte Ansicht der Website. Das jeweilige Device soll dabei seine native Breite nutzen. Der zu beachtende Viewport ist ≥ 1280 px.
3. Alle im Text angegebenen Menüpunkte sind umzusetzen.
   Folgende Vorgaben sind zu beachten:
• Auf der Startseite „Home“ ist ein emotionales Full-Screen-Video im Stil einer Slideshow als Hintergrund zu integrieren. (Auflösung: FullHD, Format: mp4, Länge: 30 Sekunden im Loop, autoplay, ohne Ton, mind. fünf Bilder sind zu verwenden). Das Logo wird auffällig über dem Hintergrundvideo präsentiert. Erst durch ein Scrollen nach unten werden alle weiteren Inhalte der Startseite auf neutralem Hintergrund angezeigt.
• Unter dem Menüpunkt „Tauchspots“ soll eine interaktive Karte des gesamten Tauchgebiets gezeigt werden. Die Karte ist anhand der (vorgegebenen) Skizze zu gestalten. Die fünf Tauchspots sollen mit passenden Icons auf der Karte markiert werden. Erstellen Sie die fünf Icons für die Tauchspots. Bei einem Klick auf ein Icon, bzw. das jeweilige Tauchgebiet, soll in einem Overlay der Tauchspot präsentiert werden.
• Unter dem Menüpunkt „Kurse“ sollen die fünf Kurse mit dem Kurstitel und einem dazu passenden Bild prominent beworben werden. Bei Klick auf den Textlink „mehr“ soll die ausführliche Beschreibung erscheinen. Die Beschreibung des Tauchkurses schließt mit dem Button „Jetzt anmelden!“ ab. Durch einen Klick auf den Button „Jetzt anmelden!“ wird man zum Anmeldeformular weitergeleitet.
• Fertigen Sie anhand Ihres Entwurfs eine lauffähige Website für das Turtle Diving Resort aus Prüfungsstück Teil a) an.
• Die Website soll für einen Viewport ≥ 1280 px optimiert werden.
• Die Navigation besteht aus den im Text „Website.docx“ vorgegebenen Menüpunkten. Setzen Sie die Seiten und die von Ihnen geplante Navigation anhand von semantischem HTML unter Berücksichtigung aktueller HTML5-Elemente, CSS3 und gegebenenfalls mithilfe von JavaScript um. Die Lauffähigkeit ist herzustellen. Die Website ist für eine aktuelle Version eines Browsers Ihrer Wahl zu optimieren.
• Entwickeln Sie ausschließlich eine clientseitige Lösung. Die Funktions­fähigkeit der Formulare (Prüfen der Eingaben, Bestätigungs-E-Mail) ist nicht gefordert.
• Fertigen Sie anhand Ihres Entwurfs eine lauffähige Website für das Turtle Diving Resort aus Prüfungsstück Teil a) an. Die Website soll für einen Viewport ≥ 1280 px optimiert werden. Die Navigation besteht aus den im Text „Website.docx“ vorgegebenen Menüpunkten. Setzen Sie die Seiten und die von Ihnen geplante Navigation anhand von semantischem HTML unter Berücksichtigung aktueller HTML5-Elemente, CSS3 und gegebenenfalls mithilfe von JavaScript um. Die Lauffähigkeit ist herzustellen. Die Website ist für eine aktuelle Version eines Browsers Ihrer Wahl zu optimieren.

Einzusenden ist je ein farbiger Ausdruck der gestalteten Screens (alle Menüpunkte) der Website auf DIN A3 (ohne Browser)