Mit dieser Aufgabe testen wir Ihr Wissen über einige der Techniken, die in den Artikeln dieses Moduls angesprochen wurden. Wir lassen Sie einige Bilder und ein Video zu einer funky Mozilla-Startseite hinzufügen!
| Vorwissen: | Bevor Sie sich dieser Aufgabe stellen, sollten Sie bereits den Rest des Multimediainhalte einbinden-Moduls bearbeitet haben. |
|---|---|
| Ziel: | Testen des Wissens über das Einbinden von Bildern und Videos in Webseiten, Frames und HTML-Techniken von responsiven Grafiken. |
Startpunkt
Um diese Aufgabe zu beginnen, holen Sie sich die HTML und alle Bilder aus dem mdn-splash-page-start--Directory auf Github. Legen Sie auf Ihrer Festplatte ein neues Verzeichnis an und speichern Sie darin die Inhalte von index.html in einer Datei mit dem Namen index.html auf Ihrer Festplatte. Speichern Sie im selben Verzeichnis pattern.png (mt einem Rechtsklick auf das Bild eröffnet Ihnen das Kontextmenü eine Option, das Bild zu speichern).
Speichern Sie auf dieselbe Weise, aber zunächst in einem anderen Verzeichnis, auch die anderen Bilder aus dem originals-Verzeichnis; Sie werden einige der Bilder noch mit einem Bildbearbeitungsprogramm verändern müssen, bevor sie einsatzbereit sind.
Anmerkung: Das HTML-Beispiel beinhaltet ein recht umfangreiches CSS, um die Seite zu stylen. Sie brauchen das CSS nicht zu touchieren, sondern lediglich die HTML innerhalb des <body>-Elementes — solange Sie die korrekten Auszeichnungen verwenden, wird das Styling ebenfalls korrekt aussehen.
Projekt: Kurzbeschreibung
In dieser Aufgabe präsentieren wir Ihnen eine fast-fertige Mozilla Startseite, deren Ziel es ist, etwas nettes und interessantes darüber zu kommunizieren, wofür Mozila steht, sowie einige Links zu weiterführenden Quellen bereitzustellen. Leider sind bisher noch keine Bilder oder Videos eingepflegt worden — das ist schließlich Ihr Job! Sie müssen einige Medien hinzufügen, damit die Seite ansprechender aussieht und ihrem Ziel gerecht wird. Die nachfolgenden Abschnitte beschreiben Ihre Aufgabe detaillierter:
Bilder vorbereiten
Erzeugen Sie mit Ihrem bevorzugten Bildbearbeitungsprogramm 400px- und 120px-breite Versionen von:
firefox_logo-only_RGB.pngfirefox-addons.jpgmozilla-dinosaur-head.png
Geben Sie ihnen sprechende Namen, z.B. firefoxlogo400.png und firefoxlogo120.png.
Gemeinsam mit mdn.svg werden diese Bilder Ihre Icons sein, mit denen Sie auf weiterführende Quellen verlinken, innerhalb des further-info-Bereichs. Sie werden außerdem auf das Firefox-Logo im Seitenheader verlinken. Speichern Sie Kopien all dieser Bilder im selben Verzeichnis, in dem sich index.html befindet.
Haben Sie dies abgeschlossen, erzeugen Sie eine 1200px-breite Landscape-Version von red-panda.jpg und eine 600px-breite Version, die den Panda in einem Close-Up-Shot zeigt. Geben Sie auch diesen Bildern sprechende Namen, damit Sie sie leicht wiederfinden. Speichern Sie eine Kopie davon im selben Verzeichnis, in dem sich index.html befindet.
Anmerkung: Sie sollten Ihre JPG- und PNG-Bilder am besten auf eine Weise komprimieren, auf die sie so klein wie möglich sind und dabei dennoch gut aussehen. tinypng.com ist ein toller Service, um dies einfach zu erreichen.
Dem Header ein Logo hinzufügen
Innerhalb des <header>-Elements fügen Sie ein <img>-Element hinzu, das die kleine Version des Firefox-Logos in den Header einbindet.
Dem Hauptteil des Artikels ein Video hinzufügen
Fügen Sie einfach das <article>-Element hinzu (direkt under dem öffnenden Tag) und binden Sie das YouTube-Video unter dem Link https://www.youtube.com/watch?v=ojcNcvb1olg ein, indem Sie geeignete YouTube-Tools verwenden, um den Code zu generieren. Das Video soll 400px breit sein.
Responsive Grafiken zu den "further info"-Links
Innerhalb des <div>-Elements mit der Klasse further-info finden Sie vier <a>-Elemente — jedes davon verlinkt auf eine interessante Mozilla-zugehörige Seite. Um diesen Teil abzuschließen, müssen Sie innerhalb jeden dieser Elemente ein <img>-Element hinzufügen, die geeignete src, alt-, srcset- und sizes-Attribute enthalten.
In jedem Fall (außer einem — der von sich aus responsiv ist?) möchten wir, dass der Browser die 120px-breite Version anzeigt, wenn das Anzeigedisplay 480px breit oder kleiner ist, und die 400px-breite Version in allen anderen Fällen.
Stellen Sie sicher, dass die richtigen Bilder mit den richtigen Links verbunden sind!
Anmerkung: Um die srcset/sizes-Beispiele zu testen, müssen Sie Ihre Seite auf einen Server uploaden (Github pages ist eine einfache und freie Lösung). Von dort aus können Sie testen, ob sie korrekt funktionieren, indem Sie Browser-Entwicklertools verwenden, wie in Responsive images: useful developer tools beschrieben.
Ein art directed Roter Panda
Innerhalb des <div>-Elementes mit der Klasse red-panda möchten wir ein <picture>-Element einfügen, das das kleine Panda-Portrai zeigt, wenn das Anzeigedisplay 600px breit oder schmaler ist, und das große Landscape-Bild bei breiteren Anzeigedisplays.
Beispiel
Die nachfolgenden Screenshots zeigen, wie die Startseite nach der korrekten Auszeichnung aussehen sollte, auf einem breiten und einem schmalen Bildschirm.
Einschätzung
Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Diskussionsthread zu dieser Übung nachfragen oder im #mdn IRC-Channel auf Mozilla IRC.Versuchen Sie es zunächst selbst — mit Mogeleien ist nichts gewonnen!
Anmerkung: Falls Sie ihre Aufgabe mit den Developer-Tools des im Chrome-Browsers überprüfen, kann es sein, dass der Browser nicht die richtigen Bilder lädt, egal, wie klein Sie die Breite unter 'responsive view' auswählen. Es scheint sich hierbei um eine Eigenart von Chrome zu handeln. Der Firefox-Browser sollte das richtige Bild laden (sofern Ihre HTML korrekt ist).