Aufgabe Vorschlag B - Aufgabe 4 · Abitur Hessen Gestaltungs- und Medientechnik LK 2022
Thema: Webdesign: Usability, Navigation, HTML und CSS · Aus der Prüfung LK (2022)
Aufgabenstellung
3D-Datenbrille 360°
Das vorliegende Dokument muss dem Prüfling als Farbausdruck zur Verfügung stehen.
Zu den Aufgaben gehören die Anlagen 360grad.html, 360grad.css, 3D-Tech-Logo.png und datenbrille.jpg im Ordner LA22-GEME-LK-B-PRFL.
Für die Bearbeitung der Aufgaben 3.1 und 4.2 ist ein Rechnerarbeitsplatz erforderlich.
Briefing
Virtuelle Realität ist in aller Munde. Die Firma 3D-TECH hat eine neue Datenbrille für Computerspiele entwickelt, die unter dem Produktnamen 360° auf den Markt gebracht werden soll. Die technisch hochwertige Datenbrille soll ein unverzichtbares Produkt für Fans von Strategie- und Simulationsspielen werden. Das Produkt wird erstmalig auf der Computerspielemesse GAMESCOM dem interessierten Publikum vorgestellt und soll den Verbrauchern in der zweiten Jahreshälfte zu Weihnachten angeboten werden.
Ein Marktforschungsinstitut hat wichtige Informationen zur anvisierten Zielgruppe zusammengefasst:
„Elf Prozent aller PC- und Videospieler bevorzugen Spiele wie Strategie-, Simulations- und Geschicklichkeitsspiele. Ihre Motivation liegt, anders als in der größten Gruppe der Gamer, nicht in der Entspannung und Zerstreuung. Sie wollen taktieren, knobeln, gefordert werden. Das Durchschnittsalter liegt bei 32 Jahren. Die Zielgruppe ist zu 68 % männlich und zu 32 % weiblich, sie ist bereit bis zu 950 Euro jährlich für ihr Hobby auszugeben.“
Ihre Werbeagentur bietet dem Kunden 3D-TECH zunächst zwei Varianten der Wort-Bild-Marke für die neue Datenbrille zur Auswahl an. Sie sind damit beauftragt, an der Wort-Bild-Marke, einem weihnachtlichen Geschenkpapier und einer Website mit Markenauftritt der 3D-Datenbrille zu arbeiten.
Material 1
Wort-Bild-Marken
4 Anpassung der Website
4.1
Beschreiben Sie notwendige gestalterische Veränderungen, um die vorliegende Webpage (Material 2) zu verbessern. Begründen Sie Ihre Veränderungen der Webpage, die zu einer verbesserten Usability beitragen. [14 BE]
4.2
Optimieren Sie den HTML- und CSS-Quellcode der Webpage (Material 3 und Material 4 im Ordner LA22-GEME-LK-B-PRFL) so, dass eine verbesserte Usability gewährleistet ist und speichern Sie die Dateien im vorgegebenen Ordner. [16 BE]
Hinweis: Die Dateien sind nach folgendem Muster zu benennen: „Nachname_HTML.Dateiendung“ und „Nachname_CSS.Dateiendung“
Material 3: HTML-Quellcode
<!doctype html>
<html lang="de">
<head>
<title>360 Grad</title>
<link rel="stylesheet" type="text/css" href="360grad.css">
</head>
<body>
<main>
<header><img src="3D-Tech-Logo.png" style="height:80px; width:150px;"></header>
<nav><a href="xxx.html">3D-Vision</a> | <a href="xxx.html">Games</a> |
<a href="xxx.html">Shop</a> | <a href="xxx.html">Sony</a> |
<a href="xxx.html">XBox</a> | <a href="xxx.html">Nintendo</a> |
<a href="xxx.html">Merchandise</a> | <a href="xxx.html">AGB</a> |
<a href="xxx.html">Impressum</a> | <a href="xxx.html">Haftungsausschluss</a> |
<a href="xxx.html">Jugendschutz</a> </nav>
<section class="content">
<article class="produkt_text">
<h2>Die 3D-Vision</h2>
Die 360 Grad-Technologie liefert Stereo-3D-Bilder für Gamer. Nur unsere Technologie
unterstützt das Maximum an verfügbaren 3D-Inhalten: Mehr als 800 3D-Spiele.
Entdecke den Unterschied und erlebe PC-Gaming einer neuen Dimension. Die neue,
optimierte Brille verfügt über 20 % größere Gläser für
einen noch größeren Sichtbereich bei optimaler seitlicher Lichtabschirmung. Die
Brille ist mit der innovativen 3D-LightBoost-Technologie kompatibel, die das 3D-Gaming-
Erlebnis perfektioniert. Die modernen, weicheren Materialien der 3D-Brille sorgen für
mehr Tragekomfort und bessere Passform..
</article>
</section>
<footer></footer>
</main>
</body>
</html>
Material 4: CSS-Quellcode
* {
margin:0px; padding:0px;
border:0px;
font-family: Trebuchet MS;
font-size:16px; line-height:16px;
text-align: left; }
main {
width:910px; height:520px;
position: relative;
margin: 30px auto;
padding: 10px;
border: solid 1px #33f;
background-color: #fff; }
header {
width:192px; height:80px;
padding: 4px;
background-color: #ccc;
position: absolute;
left: 10px; top:10px; }
nav {
width:665px; height:48px;
padding: 20px;
background-color: #c99;
line-height:32px;
position: absolute;
left: 215px; top:10px; }
a:link {
font-family: Trebuchet MS;
font-size:16px;
color: #000;
line-height:16px;
text-decoration: none; }
a:hover {
font-family: Trebuchet MS;
font-size:16px; color: #fff;
line-height:16px;
text-decoration: none; }
h2 {
font-size:20px; line-height:24px;
color:#777; }
section.content {
width:910px; height:425px;
padding: 0px;
background-color: #cc0;
position: absolute;
left: 10px; top:103px;
background-image:url(datenbrille.jpg); }
article.produkt_text {
width:910px; height:405px;
position: absolute;
left: 0px; top:0px;
padding: 0px;
font-family: "Times New Roman", Times, serif;
font-size:22px; line-height:20px;
color: #000;
text-align:justify; }
footer {
width:900px; height:20px;
position: absolute;
left: 10px; top:500px;
padding:5px;
font-size:13px;
text-align:justify;
color:#333;
background-color: #ccc; }
Lösung
Nach den offiziellen Korrekturhinweisen
4.1 Beschreiben Sie notwendige gestalterische Veränderungen, um die vorliegende Webpage (Material 2) zu verbessern. Begründen Sie Ihre Veränderungen der Webpage, die zu einer verbesserten Usability beitragen.
Lösung: Gestalterische Veränderungen und Begründung zur Verbesserung der Usability: - Schriftfont (font-family): Wechsel zu einer serifenlosen Webschrift (z. B. Arial, Trebuchet MS, Sans-Serif) statt Times New Roman für verbesserte Lesbarkeit am Bildschirm. - Satzform (align:left): Umstellung von Blocksatz (justify) auf linksbündigen Flattersatz zur Vermeidung unschöner Wortzwischenräume und „Löcher“ im Fließtext. - Zeilenlänge & Layout: Verkürzen der Zeilenlänge (Breite der Textbox verringern, z. B. auf ca. 300–400 px), damit der Text nicht über die Brille/das Gesicht des Hintergrundbilds läuft. - Zeilenabstand (line-height): Erhöhen des Zeilenabstands (z. B. 1.4em bis 1.5em bzw. 22–24 px bei 14–16 px Schriftgröße; bisher war line-height geringer als font-size!). - Größen- & Helligkeitskontrast: Deutliche Hierarchie zwischen Headline (h2) und Fließtext sowie ausreichender Kontrast zum Hintergrund (weiß/hellgrau). - Innenabstand (padding): Ausreichend Padding definieren, um Text von Rändern und Bildkanten abzusetzen. - Clustern & Trennen der Navigation: Gliederung in Hauptnavigation (oben: produkt- und themenrelevante Links wie 3D-Vision, Games, Shop, Konsolen) und Footernavigation (rechtliche/statische Links: AGB, Impressum, Haftungsausschluss, Jugendschutz). Größere klickbare Schaltflächen für bessere Bedienbarkeit.
4.2 Optimieren Sie den HTML-Quellcode der Webpage (Material 3 im Ordner LA22-GEME-LK-B-PRFL) so, dass eine verbesserte Usability gewährleistet ist.
Lösung: ```html <!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>360 Grad</title> <link rel="stylesheet" type="text/css" href="360grad.css"> </head> <body> <main> <header> <img src="3D-Tech-Logo.png" alt="3D-Tech Logo" style="height:80px; width:150px;"> </header> <nav> <a href="xxx.html">3D-Vision</a> | <a href="xxx.html">Games</a> | <a href="xxx.html">Shop</a> | <a href="xxx.html">Sony</a> | <a href="xxx.html">XBox</a> | <a href="xxx.html">Nintendo</a> | <a href="xxx.html">Merchandise</a> </nav> <section class="content"> <article class="produkt_text"> <h2>Die 3D-Vision</h2> <p> Die 360 Grad-Technologie liefert Stereo-3D-Bilder für Gamer. Nur unsere Technologie unterstützt das Maximum an verfügbaren 3D-Inhalten: Mehr als 800 3D-Spiele. Entdecke den Unterschied und erlebe PC-Gaming einer neuen Dimension. Die neue, optimierte Brille verfügt über 20 % größere Gläser für einen noch größeren Sichtbereich bei optimaler seitlicher Lichtabschirmung. Die Brille ist mit der innovativen 3D-LightBoost-Technologie kompatibel, die das 3D-Gaming-Erlebnis perfektioniert. Die modernen, weicheren Materialien der 3D-Brille sorgen für mehr Tragekomfort und bessere Passform. </p> </article> </section> <footer> <a href="xxx.html">AGB</a> | <a href="xxx.html">Impressum</a> | <a href="xxx.html">Haftungsausschluss</a> | <a href="xxx.html">Jugendschutz</a> </footer> </main> </body> </html> ```
4.2 Optimieren Sie den CSS-Quellcode der Webpage (Material 4 im Ordner LA22-GEME-LK-B-PRFL) so, dass eine verbesserte Usability gewährleistet ist.
Lösung: ```css * { margin: 0px; padding: 0px; border: 0px; font-family: Arial, Trebuchet MS, sans-serif; font-size: 16px; line-height: 1.4; text-align: left; } main { width: 910px; height: 520px; position: relative; margin: 30px auto; padding: 10px; border: solid 1px #33f; background-color: #fff; } header { width: 192px; height: 80px; padding: 4px; background-color: #ccc; position: absolute; left: 10px; top: 10px; } nav { width: 665px; height: 48px; padding: 20px; background-color: #c99; line-height: 32px; position: absolute; left: 215px; top: 10px; } a:link, a:visited { font-family: Arial, Trebuchet MS, sans-serif; font-size: 16px; color: #000; line-height: 16px; text-decoration: none; } a:hover { color: #fff; } h2 { font-size: 24px; line-height: 30px; color: #333; margin-bottom: 10px; } section.content { width: 910px; height: 425px; padding: 0px; position: absolute; left: 10px; top: 103px; background-image: url(datenbrille.jpg); background-repeat: no-repeat; background-position: right bottom; } article.produkt_text { width: 320px; height: 380px; position: absolute; left: 20px; top: 20px; padding: 10px; font-family: Arial, Trebuchet MS, sans-serif; font-size: 13px; line-height: 18px; color: #444; text-align: left; } footer { width: 900px; height: 20px; position: absolute; left: 10px; top: 500px; padding: 5px; font-size: 12px; text-align: left; color: #333; background-color: #ccc; } footer a { font-size: 12px; color: #333; text-decoration: none; } ```
Die ausführliche Erklärung Schritt für Schritt (mit KI) gibt es mit Premium. Premium
Löse sie direkt hier: automatische Korrektur, Hinweise und Lösung Schritt für Schritt.
Aufgabe Vorschlag C - Aufgabe 4 · LK 2021 ›