Évaluation : page d'accueil Mozilla

Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire mdn-splash-page-start sur github. Mettez le contenu du fichier index.html dans un fichier appelé index.html sur votre disque dur local, dans un nouveau répertoire. Puis copiez pattern.png dans le même dossier (clic droit sur l'image pour le menu des options).

Allez dans le répertoire originals chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.

Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :

Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :

• firefox_logo-only_RGB.png
• firefox-addons.jpg
• mozilla-dinosaur-head.png

Donnez-leur des noms similaires comme : firefoxlogo400.png et firefoxlogo120.png.

Continuons avec mdn.svg, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espace further-info. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'index.html.

Puis, créez une version paysage de 1200px de large de red-panda.jpg, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'index.html.

A l'intèrieur de l'élément <header> , ajoutez un élément <img> qui intégrera une petite version du logo firefox dans l'en-tête.

Dans l'élément <article> (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : https://www.youtube.com/watch?v=ojcNcvb1olg, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.

Dans l'élément <div> de la catégorie further-info vous trouverez quatre autres éléments <a> — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément <img> dans ceux contenant les attributs src, alt, srcset et sizes adéquats.

Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.

Assurez-vous de faire correspondre les bonnes images avec les liens corrects !

Dans l'élément <div> de la catégorie red-panda, nous voulons insérer un élément <picture> qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.

La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.

Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le fil de discussion concernant cet exercice, ou sur le canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !

• Précédent
• Aperçu : Multimédia et Intégration