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

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.

Le défi « Codepen challenge »

Challenge

Le mot challenge, que l’on trouve 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 challenge, par ellipse. Ce mot est ensuite passé dans la langue générale avec le sens de « défi ».

Navigation principale fluide + premier lien à largeur fixe

À partir du pen ci-dessous:

  1. Faites en sorte que le lien «Nom du site» se retrouve au même niveau que les autres liens de la navigation principale lorsque la fenêtre du navigateur atteint une largeur de 481px et plus.
  2. Maintenant, modifiez la largeur du lien «Nom du site» de manière à ce qu'elle soit fixe, soit 220px, tout en cotoyant les quatre autres liens qui conservent une largeur fluide (%).

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

Utilisation d'un sprite CSS pour animer un menu de médias sociaux

À partir du pen ci-dessous:

  1. Observez d'abord l'image complète du sprite css affichée dans le pen, sous le menu.
  2. Réduisez la taille du texte des liens à 0.
  3. Animez l'état hover des liens de manière à ce que les icones colorées se substituent aux icones grises par un mouvement vertical.
  4. Ajoutez une transition.

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

Bannière image pleine largeur et élément figure flottant

À partir du pen ci-dessous:

  1. Créez une première version pour écran étroit de cette page à partir du modèle fourni pendant le cours.
  2. Créez une version pour écran large à partir du modèle fourni pendant le cours.

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

Sous-menu centré avec flexbox

À partir du pen ci-dessous:

  1. Créez un menu centré avec la liste de quatre liens qui se trouve dans le pen: la mise en forme générale et les effets au survol doivent s'inspirés du modèle présenté en classe.
  2. Positionnez le titre h1 au-dessus de l'image du header et le centrz-le.
  3. Positionnez le menu par dessus l'image du header, et sous le titre principal en s'assurant qu'il soit centré à l'horizontal.

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

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: mise en forme alternée des lignes, etc.
  2. Créez un effet au survol qui modifie 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.

Activités d'évaluation

Examen pratique

L'examen pratique aura lieu lors de la leçon 10.

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

TP9

Le TP9 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.

Échéancier

Les travaux pratiques doivent être terminés avant la fin du cours.