Cégep de Sainte-Foy | Techniques d'intégration multimédia

582-104-SF Intégration 1

Leçon 9

Le défi Codepen challenge

Les adresses relatives et absolues Codepen, un repère de codeurs et de codeuses Le défi Codepen challenge Activités d'évaluation
Haut de page

Chemins relatifs et absolus

Les pages HTML ne sont pas toujours situées au même niveau hiérarchique dans l'arborescence des dossiers d'un site web. Le chemin pour atteindre un document HTML, un document CSS ou une image en particulier n'est donc pas toujours le même.

Afin de résoudre ce problème, il faut adapter les chemins relatifs vers les documents en fonction du fichier de départ.

Voyons la différence entre les chemins relatifs et les chemins absolus.

Chemin relatif

page.html
La cible (page.html) est recherchée par le navigateur au même niveau que le document html où se trouve l'hyperlien.

dossier/page.html
La cible (page.html) est recherchée par le navigateur dans le sous-répertoire dossier, à partir du document html où se trouve l'hyperlien.

../dossier/page.html
Où "../" signifie que la page est recherchée à partir du répertoire parent (on remonte d'un niveau).

../../dossier/page.html
Où "../../" signifie que la page est recherchée à partir du répertoire ancêtre (on remonte de deux niveaux).

Il est tout à fait possible de remonter de plus de deux niveaux de répertoires. Pour cela il faudra cumuler les ../ comme dans cet exemple où on remonte de trois niveaux : ../../../dossier/page.html.

Chemin absolu

https://www.mondomaine.com/dossier/page.html (complète)

Montre le chemin complet d'un document sur le web. Ne fonctionne que lorsque le site est hébergé en ligne, avec un nom de domaine enregistré et actif.

Cette forme est incontournable pour pointer vers une ressource externe, mais elle fonctionne également pour pointer une ressource interne.

Important : les chemins absolus ne fonctionnent que lorsque la page est affichée par l'intermédiaire d'un serveur local (qui simule le dossier racine) ou encore un serveur en ligne.

Codepen, un repère de codeurs et de codeuses

Pour compléter la leçon d'aujourd'hui, vous devez posséder un compte Codepen.

Picked Pens

L'application en ligne CodePen est utile pour constituer rapidement une banque d'exemples de code réutilisable.

Elle est aussi un réseau social pour les codeurs et permet à ce titre des échanges illimités.

Créez un compte

Créez un compte et explorez la page des Paramètres (Settings) où vous pouvez notamment choisir :

  • l'allure de l'interface de codage (section Syntax Highlightingem>);
  • l'autocomplétion du code (Autocomplete, section Editor Options);
  • Etc.
Codepen Settings

Collections

Vous pouvez ajouter des « pens » de votre choix dans vos collections. Il suffit de de cliquer sur l'icone des trois points et de choisir +Add to collection. Vous choisissez ensuite la collection voulue, ou encore, vous en créez une nouvelle.

Codepen Add to collection

Fork

Vous pouvez modifier le code de n'importe quel pen. Mais pour sauvegarder vos modifications, voici ce qu'il faut faire:

  1. Ouvrez le pen de votre choix;
  2. Appuyez sur le bouton « Fork »: cela crée une copie sur votre « Dashboard »;
  3. Modifiez et sauvegardez les modifications en cliquant sur « Save »;
    Codepen Save Fork
  4. Vous pouvez également modifier le nom du pen afin de le personnaliser en cliquant sur l'icone en forme de crayon puis en changeant le nom du pen. Il suffit d'enregistrer (Save) pour terminer.
Haut de page

Le défi « Codepen challenge »

Challenge

Le mot challenge, qui existe aussi sous la graphie francisée chalenge, est un emprunt à l'anglais challenge, « défi », qui vient lui-même de l'ancien français chalenge, qui signifiait « accusation, chicane, contestation » (XIe siècle), puis « défi » (XIIe siècle). Cet ancien mot français n'a pas survécu au fil des siècles et c'est par l'anglais qu'il nous est revenu. Il a été emprunté au XIXe siècle au vocabulaire sportif anglais, d'abord employé sous la forme challinge-coupe, puis challenge cup, puis challeng, par ellipse. Ce mot est ensuite passé dans la langue générale avec le sens de « défi ».

Source : Banque de dépannage linguistique Lien externe

CHALLENGE 1 / Navigation principale fluide + premier lien à largeur fixe

À partir du pen ci-dessous:

  1. À l'aide de la reqête média, modifiez la largeur du lien «Nom du site» de manière à ce qu'elle soit fixe en mode écran large, soit 300px par exemple.
  2. Les quatre autres liens doivent se retrouver sur la même ligne que le premier lien et conserver une largeur fluide (%).

See the Pen c10-calc01_fixe-fluide-depart by Sylvain Lamoureux (@slamoureux) on CodePen.

Résultat final du Challenge 1 - Version étroite
Challenge 1.
Résultat final du Challenge 1 - Version large
Challenge 1.

CHALLENGE 2 / Image flottante

À partir du pen ci-dessous:

  1. Effectuez la mise en forme de la légende en la liant graphiquement à l'image (voir exemple en classe).
  2. Créez une première version pour écran étroit de cette page à partir du modèle fourni pendant le cours. L'image doit prendre toute la largeur de la fenêtre du navigateur, tout en conservant un peu d'espace de chaque côté.
  3. Donnez une couleur d'arrière-plan au contenu principale et une autre au pied de page.
  4. Créez une version pour écran large à partir du modèle fourni pendant le cours. L'image doit flotter dans le texte et prendre la moitié de la largeur de la section.
  5. Le contenu principale et le contenu du pied de page doivent avoir une largeur maximale, tout en faisant en sorte que les couleurs d'arrière-plan demeurent pleine largeur.

See the Pen c09-float_figure-img_rwd-départ by Sylvain Lamoureux (@slamoureux) on CodePen.

Résultat final du Challenge 2 - Version étroite
Challenge 2.
Résultat final du Challenge 2 - Version large
Challenge 2.

CHALLENGE 3 / Images réactives avec cadrages différents

À partir du pen ci-dessous:

  1. Assurez-vous que l'image est fluide et prenne toute la largeur de la fenêtre du navigateur, mais sans déborder.
  2. Rendez l'image réactive en modifiant le balisage: ajoutez une deuxième source d'image et rendez l'affichage des deux sources conditionnelle à la largeur de la fenêtre du navigateur.
  3. Utilisez le seuil de 450px comme point de bascule entre les deux images.

See the Pen c09-sous-menu_centré-départ by Sylvain Lamoureux (@slamoureux) on CodePen.

Résultat final du Challenge 3 - Version étroite
Challenge 3.
Résultat final du Challenge 3 - Version large
Challenge 3.

CHALLENGE 4 / Sous-menu superposé et centré avec flexbox

À partir du pen ci-dessous:

  1. Insérez le code de l'élément picture du pen précédent (Challenge 3) avec l'image réactive complétée.
  2. Positionnez le titre principal devant la bannière et centrez-le à la verticale et à l'horizontale.
  3. Ajustez sa taille du titre principal avec l'unité vw.
  4. Faites la mise en forme du sous-menu de quatre liens qui se trouve dans le HTML du pen: la mise en forme générale et les effets au survol doivent s'inspirer du modèle présenté en classe.
  5. Positionnez le sous-menu devant la bannière, centrez-le à l'horizontal, et placez-le sous le titre principal.

See the Pen c09-menu-superposé-centré-fin by Sylvain Lamoureux (@slamoureux) on CodePen.

Résultat final du Challenge 4 - Version étroite
Challenge 4.
Résultat final du Challenge 4 - Version large
Challenge 4.

CHALLENGE 5 / Tableau avec mise en forme alternée et effet au survol

À partir du pen ci-dessous:

  1. Effectuez la mise en forme du tableau de manière à reproduire le modèle présenté en classe : caption intégré, mise en forme alternée des lignes, espacement autour du contenu des cellules, alignement des prix à droite.
  2. Créez un effet au survol du curseur : modification de la couleur d'arrière-plan d'une ligne de tableau.

See the Pen c09-tableau_pseudoclasse-départ by Sylvain Lamoureux (@slamoureux) on CodePen.

Résultat final du Challenge 5 - Mise en forme du tableau
Challenge 5.
Résultat final du Challenge 5 - Effet au survol d'une ligne de tableau
Challenge 5.

CHALLENGE 6 / Utiliser un sprite css pour augmenter l'efficacité de chargement d'une page web

Faites en sorte que les images du menu de réseaux sociaux correspondent aux quatre réseaux différents, à la fois au repos et au survol.

See the Pen c09_sprite-css_départ by Sylvain Lamoureux (@slamoureux) on CodePen.

Résultat final du Challenge 6 - Mise en forme du sprite
Challenge 6.
Résultat final du Challenge 6 - Effet au survol d'une icône
Challenge 6. Challenge 6.
Haut de page

Activités d'évaluation

À venir : TP examen

Le TP examen aura lieu lors de la leçon 10.

Il fait la synthèse des acquis depuis le début de la session.

Les exercices réalisés dans le cours 9 vous seront utiles pour réussir le TP examen.

Exercice 6 - Le Défi Codepen Challenge

L'exercice 6 a pour objectif de mettre en contexte des situations variées de mise en forme vues depuis le début de la session.

Sources

Documents à remettre

La réussite des travaux pratiques sera contrôlée en classe.

Réalisez les pens proposés dans les notes de cours à l'aide de directives données en classe :

  1. sauvegarder les pens et insérez-les dans une collection nommée Codepen challenge;
  2. transmettre le lien de cette collection avant la fin du cours par l'intermédiaire de Teams/Devoir.

Échéancier

Le travail doit être terminé avant la fin du cours.