Einsendeaufgabe MMDE10W

TEIL A: Praxisaufgabe:

Aufgabe:
Folgen Sie bitte dem Mobile-First-Prinzip und erstellen Sie eine Webseite mit einem einfachen einspaltigen Layout (basierend auf dem in diesem Studienheft vorgeführten Beispiel – jedoch ohne Footer und aside).
•   Legen Sie dazu als Erstes einen neuen Ordner auf Ihrem Rechner an und nennen Sie diesen name-mmde10w-aufgabe, wobei Sie bitte für name Ihren eigenen Nachnamen einsetzen.
•   Geben Sie der zugehörigen HTML-Datei den Namen rwd-ea.html und speichern Sie diese in dem zuvor angelegten Ordner.
In Bezug auf die gestalterischen Details (Farben, Schriften, Proportionen) können Sie Ihrer Kreativität freien Lauf lassen. Das mobile Layout muss jedoch folgende Eigenschaften besitzen:
•   externes Stylesheet mystyles.css
•   Header mit Überschrift
•   horizontale Navigationsleiste (Gestaltung Ihrer Wahl)
•   Im Hauptcontent wird ein Bild eingebunden. Es soll das Verhalten von Fluid Images aufweisen (Sie können ein beliebiges Bild Ihrer Wahl benutzen, die Originalbreite des Bildes sollte jedoch nicht mehr als 500px betragen).
Sehen Sie sich bitte als Beispiel die folgende Abbildung einer Vorlage an, wie sie Firefox in einem schmalen, „smartphone-ähnlichen“ Fenster darstellt:
 
Erstellen Sie anschließend in dem externen Stylesheet mystyles.css einen @media-block mit einem geeigneten Media Query, um das Layout im Sinne des Responsive Webdesigns an breitere Viewports anzupassen.
Das zweispaltige Layout für breitere Viewports implementieren Sie bitte mit Flexbox. Das Layout soll folgende Eigenschaften besitzen:
•   Vertikale Navigationsleiste im nav-Element (linke Spalte). Die Navigationselemente können Sie nach Ihren Vorstellungen gestalten.
•   Der Hauptcontent im main-Element (rechte Spalte).
•   Das im Hauptcontent eingebundene Bild wird vom Text rechts umflossen und in seinen Originalmaßen angezeigt (Originalbreite nicht größer als 500px).
Sehen Sie sich bitte als Beispiel die folgende Abbildung einer Vorlage an, wie sie von Firefox in einem breiteren Fenster dargestellt wird:

Kontrollieren Sie das responsive Verhalten Ihrer Seite mit unterschiedlichen Viewportbreiten durch Änderung der Fensterbreite Ihres Browsers. Im Firefox können Sie dafür auch die Funktion Bildschirmgröße testen verwenden (Extras/Web-Entwickler/Bildschirmgröße testen).


TEIL B: Multiple Choice

Welche der folgenden Funktionen ist ausschließlich mit einem Desktop-Browser möglich?

Welches ist eine wichtige Maßnahme zur Optimierung von Webseiten für das mobile Web?

Welche Abfrage der folgenden Media Queries passt am besten zu Tablet-PCs?

Warum ist das meta-Tag viewport unbedingt notwendig?

Welche Kombination von Eigenschaften wird durch folgende Kurzschreibweise definiert: flex:1;?

Mit welcher Codezeile wird ein flüssiges Layout mit Maximal- und Minimalbreite definiert?

Unter Pixeldichte versteht man:

Welche Codezeile gehört zu einem linearen Layout?

Was ist die Voraussetzung, um mit CSS-gestalteten Link-Buttons eine flexible Breite zuzuweisen?

Welche Methode bietet die Technologie der Responsive Images an, wenn man das Hauptmotiv eines Bildes – je nach dem zur Verfügung stehenden Platz – mit unterschiedlich viel Hintergrund zeigen möchte?