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

582-104-SF Intégration 1

Leçon 12

Le TP long (suite)

Vidéo fluide et réactive

Dans le cadre du TP long, vous devez insérer au moins deux vidéos dans votre site. Comme le reste des éléments, ces vidéos doivent être fluides et éventuellement réactives.

Vidéo imbriquée avec video

Il est assez simple de rendre une vidéo fluide lorsqu'elle est insérée à l'aide de la balise <video> tel que nous l'avons fait pour l'entête du TP9.

<video controls poster="images/poster.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Votre navigateur ne peut lire cette video. </video>

Il s'agit d'utiliser la propriété width avec une valeur en pourcentage; la hauteur sera ajustée automatiquement en fonction du ratio initial de la vidéo :

video { width: 100%; height: auto; vertical-align: bottom; }

Vidéo imbriquée avec iframe

Vous pouvez imbriquer dans vos pages HTML des vidéos en povenance de Youtube ou Vimeo (la taille de cette vidéo est ensuite ajustée par une règle de style):

Il suffit de:

  1. Cliquer sur le bouton «Partager» sous une vidéo Youtube par exemple;
  2. Cliquer ensuite sur le bouton «Intégrer» dans la fenêtre qui s'ouvre;
  3. Copier le code d'intégration, et le coller dans votre document HTML à l'endroit voulu;
  4. Pour rendre la vidéo fluide, vous devez retirer du code les attributs width et height et gérer le tout par CSS.
Youtube
Youtube

Dans le cas d'une vidéo imbriquée avec iframe, la solution pour la fluidité est cependant plus élaborée qu'avec l'élément video.

Précisons d'abord que la hauteur d'un élément iframe ne s'ajuste pas automatiquement en proportion de sa largeur, comme c'est le cas des éléments video et img.

En conséquence, s'il est facile de rendre la largeur de l'élément iframe fluide en utilisant l'unité %, il en va autrement de sa hauteur.

Nous devons en effet utiliser une astuce pour rendre la hauteur du iframe fluide afin de respecter le ratio naturel de la vidéo.

Cette astuce met à profit les propriétés suivantes de la marge interne (padding) :

  1. la taille d'une marge interne, dans n'importe quelle direction, peut être relative à la largeur de l'élément auquel elle est rattachée ;
  2. le contenu d'un élément peut déborder dans la marge interne s'il est positionné en absolu.

Dans un premier temps, il faut créer un conteneur parent (div) pour l'élément iframe, et l'identifier avec une classe, comme le montre cet exemple :

<div class="video-enveloppe"> <iframe src="[adresse de la vidéo imbriquée]" allowfullscreen></iframe> </div>

La mise en forme correspondante :

.video-enveloppe { position: relative; /* Devient la référence pour le positionnement de iframe */ padding-bottom: 56.25%; /* Produit un ratio de 16:9 par rapport à la largeur */ height: 0; /* Assure que la hauteur de l'élément = padding-bottom seulement */ } .video-enveloppe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* 100% du parent dont la hauteur = padding-bottom */ }

Pour une vidéo présentant un ratio de 4:3, le padding-bottom doit être ajusté à 75%.

Voir cet exemple sur Code Pen :

See the Pen c13-iframe_fluide01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Sous-menu apparaissant au survol

Voici un exemple de sous-menu apparaissant au survol réalisé avec CSS.

See the Pen c12-sous-menu-hover01 by Sylvain Lamoureux (@slamoureux) on CodePen.

TP long: rédiger la feuille de style

La réalisation d'un site web comprenant plusieurs pages exige une bonne rigueur sur le plan de la composition de la feuille de style.

Pour composer la feuille de style efficacement, il faut effectuer un premier inventaire du travail à produire. Après avoir parcouru l'énoncé de travail de la semaine dernière, vous devriez être en mesure de :

  1. Déterminer le nombre de modèles ou de dérivés de modèles de page à produire;
  2. Identifier les zones communes à toutes les pages.

Modèle de page

Le site web à produire compte neuf pages. Mais ces neuf pages ne sont pas toutes différentes sur le plan de la structure et de la mise en forme. On peut supposer que les six pages d'article seront construite suivant le même modèle de page, c'est-à-dire la même structure HTML et la même mise en forme CSS.

Chaque modèle de page devrait ainsi se voir attribuer un nom de classe distinct.

Cette classe peut être associée à la balise body afin d'assurer que l'ensemble du contenu de la page est identifié par cette classe.

Par exemple:
<body class="accueil">
... <body class="article-seul">

De cette manière, il sera possible de contextualiser aisément le nom des sélecteurs pour en augmenter la spécificité lorsque requis.

Par exemple, header, h1, h2, etc., de la page d'accueil sont sans doute différents de ceux d'une page d'article seul. L'utilisation de deux classes distinctes pour la page d'accueil et pour la page d'article seul est donc justifiée.

Nous pourrions de cette façon composer les sélecteurs suivants afin d'effectuer la mise en forme des paragraphes de chacune de ces pages :

.accueil h2 { margin:.9em 1%; } (...) .article-seul h2 { margin:1.2em 2%; }

À l'inverse, il ne servirait à rien de multiplier les sélecteurs afin de définir les paragraphes de chacune des pages d'articles s'ils sont identiques. Ainsi, on souhaite éviter la situation suivante, où la même règle de style est appliquée à plusieurs classes différentes:

Mauvais exemple:

.article01 p { margin:.9em 2%; } (...) .article02 p { margin:.9em 2%; }

Dérivé de modèle de page

Le dérivé d'un modèle page devrait aussi se voir attribuer un nom de classe.

Le dérivé d'un modèle de page identifie les pages qui sont largement construite selon un modèle de page établi, mais s'en distingue par ailleurs à certains égards.

Par exemple, la page À propos pourrait être un dérivé d'une page d'article seul. La classe article-seul servirait à lui appliquer le modèle de page des articles seuls et l'ajout d'une classe distincte pemettrait de lui ajouter certaines paricularités.

Le dérivé de modèle de page se voit donc attribuer deux classes, par exemple les classes article-seul et
a-propos, pour reprendre l'exemple précédent :

<body class="article-seul a-propos">

Feuille de style

À partir des considérations précédentes, voici comment pourrait être structurée votre feuille de style :

@charset "utf-8";
/* ---------------------
GOOGLE FONTS
----------------------- */


/* -----------------------
RÉINITIALISATION
------------------------- */


/* ----------------------
CHARTE TYPO
------------------------ */


/* -----------------------------
STYLES GÉNÉRIQUES
-------------------------------- */

/* Liens généraux */

/* Titres et sous-titres */

/* Vidéos */

/* Images */



/* ----------------------------------
NAVIGATION PRINCIPALE
------------------------------------- */



/* -------------------
PAGE ACCUEIL
---------------------- */

/* --------------------------
PAGE ARTICLE-SEUL
----------------------------- */


/* ----------------------
PAGE À PROPOS
------------------------- */


/* -------------------
PAGE CONTACT
---------------------- */

/* ------------------------------------
PIED DE PAGE COMMUN
-------------------------------------- */

/* -------------------------------------------
ADAPTATION ÉCRANS MOYENS
---------------------------------------------- */


/* -------------------------------------------
ADAPTATION GRANDS ÉCRANS
---------------------------------------------- */

TP long: le référencement

Si nous créons des pages web, c'est que nous voulons qu'elles soient lues.

Pour qu'elles soient lues, elles doivent être trouvées. C'est ici que le référencement prend toute sa place.

Pour la finalisation de vos pages, vous êtes invitées à tenir compte des remarques suivantes afin de favoriser le référencement de vos pages sur les moteurs de recherche principaux.

Élément <title>...</title>

Le contenu de l'élément title est l'un des critères les plus importants pour le référencement par les moteurs de recherche.

Google a récemment annoncé que la portion du contenu de l'élément title visible dans les résultats de recherche est passée de 50-55 caractères à environ 70 (on dit «environ», car cela dépend de la place qu'occupe chacun des caractères: un «i» prend moins de place qu'un «b» par exemple). Il va de soit que le contenu signifiant de title devrait se trouver dans cette portion.

À retenir :

  1. Le contenu de title doit être signifiant, c'est-à-dire refléter fidèlement le contenu de la page (le contraire peut entraîner un déclassement de votre page);
  2. Le contenu de title doit être spécifique à chaque page au moins en partie (un contenu identique dans toutes les pages occasionne un déclassement de ces pages dans les résultats de recherche);
  3. Le contenu qui doit être vu par les utilisateurs dans les résultats de recherche devrait figurer dans les premiers 65-70 caractères. Un contenu plus long que 70 caractères entraine une coupure dans le titre affiché dans la liste des résultats de Google. Et si le contenu est beaucoup plus long, il peut aussi vous faire passer pour un spammer...

Élément <meta name="description" ... >

Pour ce qui du contenu de la balise <meta name="description" ...>, Google en affiche autour de 160 à 165 caractères (incluant les espaces), soit environ une ligne et demi. Mais cette taille peut augmenter considérablement (240-300 caractères) lorsque la requête contient plus de trois mots clés correspondant au contenu de votre page.

Par ailleurs, si la description est absente de vos pages, ce seront les premiers mots du contenu de ces pages qui seront retenus lors de l'affichage des résultats de recherche. Pour éviter ce résultat aléatoire, il est impératif de rédiger une description bien construite, sous forme de phrase complète.

Dans le HTML, title devrait idéalement précéder la description, comme le montre cet exemple :

Exemple de title et de description

À retenir :

  1. Le contenu de la description doit être signifiant, c'est-à-dire refléter fidèlement le contenu de la page (le contraire peut entraîner un déclassement de votre page);
  2. Le contenu de la description doit être spécifique à chaque page (un contenu unique dans toutes les pages occasionne un déclassement de ces pages dans les résultats de recherche) ;
  3. Le contenu de la description doit être une phrase complète avec des verbes, et non une suite de mots clés qui pourrait vous faire passer pour un spammer ;
  4. La description ne doit pas être destinée exclusivement aux moteurs de recherche mais également aux utilisateurs afin de les inciter à visiter votre page.

Éléments de titrage et sous-titrage: h1, h2, h3, h4 h5 et h6

Les éléments de titres et sous-titres dans le HTML ont deux fonctions principales :

  • structurer le contenu logiquement pour le rendre plus compréhensible;
  • indiquer aux moteurs de recherche les informations les plus importantes que comportent votre page (l'algorithme de Google accorde plus de points aux mots clés et aux expressions que contiennent les titres qu'au reste du contenu).

Pour favoriser le référencement, vous devez :

  1. utiliser des mots signifiants liés au contenu ;
  2. faire en sorte que le titre h1 représente le contenu de la page courante ;
  3. utiliser un h1 unique ;
  4. utiliser les autres niveaux de titres dans l'ordre (le désordre dans les titres entraine un déclassement de vos pages).

Cas d'affichages de résultats de recherche

Exemple d'affichage du résultat de recherche d'une page Wikipédia :

Exemple de title affiché

Exemple de liste de résultats de recherche avec DEUX mots clés :

Exemple de résultats de recherche avec title et description.

Exemple de liste de résultats de recherche avec plus de TROIS mots clés :

Lorsque tout les mots de la requête correspondent au contenu d'une page, le résultat est affiché avec une description plus longue.

Exemple de résultats de recherche avec plus de trois mots clés
Exemple de résultats de recherche avec title et description.

TP long : mise en ligne

La mise en ligne de votre site sur timunix est obligatoire.

En plus de faire une remise de l'arborescence entière de votre site dans le dossier Remises du professeur sur le serveur TIM, vous devez également mettre en ligne votre site sur le serveur timunix.

Vous pourrez avoir accès à votre site avec une adresse ressemblant à ceci:

http://timunix.cegep-ste-foy.qc.ca/~usager/

L'accès à partir du cégep ne nécessite pas de mot de passe. L'accès de l'extérieur du cégep est également possible, mais nécessite votre nom d'usager et votre mot de passe Omnivox (et non pas celuis de timunix).

Afin d'assurer le bon fonctionnement de votre site en ligne, assurez-vous que les exigences suivantes soient remplies:

  1. Votre page d'accueil se nomme index.html;
  2. Le fichier index.html est situé à la racine de votre site;
  3. La meta suivante apparaît dans TOUTES les pages html de votre site:
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> ;
  4. Le nom de TOUS les dossiers est en MINUSCULES, sans espace, ni caractères spéciaux;
  5. Le nom de TOUS les fichiers (.html, .css, .jpg, .png, .gif, .mp4, etc.) est en MINUSCULES, sans espace, ni caractères spéciaux et comporte une extension de fichier valide.

À partir du moment où vous avez un nom d'usager et un mot de passe pour accéder à timunix, vous êtes en mesure de faire la mise en ligne de votre site à l'aide du logiciel de transfert FileZilla que vous trouverez sur votre poste de travail.

Revoyez les notes de cours de Profession intégrateur pour revoir les étapes. L'utilisation de FileZilla y est expliquée.