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

582-104-SF Intégration 1

Leçon 8

Le site monopage

qu'est-ce qu'un site monopage?

Le site monopage est formée d'une seule page HTML. Cette vogue est apparue il y a quelques années. Ce type de site est populaire pour présenter un produit, un artiste ou encore un portfolio professionnel.

En anglais, on l'appelle one page website ou single page website.

La navigation peut y être verticale ou horizontale. On y retrouve typiquement beaucoup d'éléments visuels.

Il n'est pas rare non plus d'y voir des effets divers, tel que le parallaxe ou des animations inventives.

Références

La balise vidéo

La balise <video> permet de faire afficher une vidéo hébergée localement dans votre site web.

Afin d'assurer une compatibilité plus grande pour l'ensemble des navigateurs web, il est de mise de proposer plusieurs formats de vidéo à l'aide de la balise <source>.

La syntaxe suivante assure une compatibilité avec tous les navigateurs qui reconnaissent la balise <video>. Notez que l'image affichée avant le démarrage de la vidéo est la première image de la vidéo:

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Votre navigateur ne peut lire cette video. Vous pouvez la télécharger en suivant ce lien:
<a href="adresse">Titre de la vidéo</a>. </video>

L'ajout d'un attribut poster permet d'afficher une image de votre choix avant le démarrage de la vidéo:

<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. Pour la télécharger, suivez ce lien: <a href="adresse">Titre de la vidéo</a>. </video>

See the Pen c04-video02 by Sylvain Lamoureux (@slamoureux) on CodePen.

À noter :

  • l'image affichée avant le démarrage de la vidéo de l'exemple précédent est l'mage désignée par l'attribut poster; en l'absence d'un «poster», c'est la première image de la vidéo qui apparaît;
  • il arrive que des formats supplémentaires (comme .ogg ou autres), en plus de MP4 et Webm, soient offerts dans l'élément <video>;
  • Le texte alternatif contenu entre les balises <video> s'affiche dans la page HTML dans la situation où le navigateur n'est pas compatible avec le lecteur vidéo HTML5;
  • l'élément <video> est une balise « en ligne »;

Attributs

  • L'attribut controls donne accès aux contrôles de lecture (boutons lecture et pause, volume, barre de progression, mode plein écran). Ces contrôles sont des éléments natifs des navigateurs; leur apparence varie donc légèrement d'un navigateur à l'autre. Il est possible d'uniformiser l'apparence des contrôles en utilisant un lecteur vidéo HTML5 maison ou en utilisant celui d'un tiers parti.
  • L'attribut preload permet de spécifier au navigateur de débuter le téléchargement de la vidéo dès le chargement la page HTML. Utilisez cette option seulement si la lecture de la vidéo est incontournable pour l'internaute (dans le cadre d'un cours en ligne par exemple).
  • L'attribut autoplay permet de lancer la lecture automatiquement, dès le chargement de la page HTML. Dans la plupart des cas, il est préférable de laisser le choix de la lecture à l'utilisateur. L'utilisation d'une courte boucle vidéo dans une bannière, par exemple, peut justifier l'emploi de cet attribut.
  • L'attribut poster="url de l'image" permet d'indiquer une image à afficher par défaut dans l'espace réservé à la vidéo avant que la lecture de celle-ci ne soit lancée. Comme on l'a vu, par défaut, c'est la première image de la vidéo qui sera affichée. Le format de l'image peut être jpg, png ou gif.
  • L'attribut loop indique que la lecture se fait en boucle. Il est utile dans le cas d'une courte boucle vidéo insérée dans une bannière.
  • L'attribut muted permet de bloquer la diffusion du son de la vidéo.
  • L'attribut type="video/format" indique le type MIME du format de la vidéo. Sans cet attribut, le navigateur télécharge un extrait de la vidéo pour en vérifier la prise en charge, ce qui ajoute un délai au démarrage de la lecture. Les types MIME les plus courants pour notre usage sont: video/mp4, video/webm, video/ogg.
  • Les attributs width et height permettent de préciser en pixels la taille de la vidéo affichée au chargement. Puisque le lecteur vidéo HTML5 permet la lecture en plein écran, il peut être justifié que les fichiers sources demeurent par exemple au format 1280 x 720 même si la taille de l'affichage au chargement est de 640 x 360. Au final, la taille des fichiers sources est toujours fonction des appareils cibles à privilégier.

Formats

Différents navigateurs ne supportent pas les mêmes formats de médias dans leurs implémentations de HTML5 vidéo, principalement en raison de problèmes de brevets.

C'est pourquoi, lors de la mise en ligne, vous devrez fournir des sources multiples pour les vidéos intégrées avec la balise HTML5. En offrant au moins les formats suivants, vous couvrez l'essentiel des possibilités pour les navigateurs compatibles avec la norme HTML5 :

  • H.264 (codec vidéo MP4 et codec audio AAC);
  • VP8 (codec vidéo WEBM et codec audio Vorbis).

Voir cette page pour un tableau complet des compatibilités des formats vidéos:
https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats

Les ancres HTML

Contrairement aux hyperliens courants - qui permettent de naviger d'une page à l'autre -, les ancres HTML sont des liens qui permettent de naviguer à l'intérieur même d'une page HTML. Ils sont particulièrement utiles dans le cas d'une longue page HTML ou encore dans le cas d'un site monopage, c'est-à-dire un site formé d'une seule page.

L'adresse du lien cliquable s'écrit ainsi (remarquez le # qui débute le nom de l'ancre):

<a href="#biographie">Lien vers mon ancre</a>

La destination du lien est identifiée par un id inséré dans la balise ouvrante de l'élément HTML visé (souvent un élément de structure ou un titre). Comme ceci:

<article id="biographie">...</article>

Lien vers le haut de la page

Dans une longue page HTML, il est fréquent de trouver un ou des liens pointant vers le haut de la page. L'adresse de celui-ci s'écrit simplement ainsi : #. Dans ce cas, il n'est pas nécessaire d'ajouter une ancre de destination dans le haut de la page. Le lien vers le haut de la page s'écrit ainsi :

<a href="#">Lien vers le haut de la page</a>

See the Pen c09-ancres by Sylvain Lamoureux (@slamoureux) on CodePen.

Menu réactif

Voici un exemple de menu réactif. En mode écran étroit, le premier lien du menu - qui est aussi le titre du site - prend toute la largeur. En mode écran large, ce lien côtoie les autres. Faites varier la largeur de la fenêtre pour constater la transformation.

See the Pen c09-menu01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Mise en forme alternée

Pour mettre en forme de manière alternative une suite d'éléments (paragraphes, articles, lignes de tableau, etc.) on peut utiliser le pseudo-élément nth-child avec les modificateurs spécialisés 'odd' (impair) et 'even' (pair).

See the Pen c09-nth-child by Sylvain Lamoureux (@slamoureux) on CodePen.

Tester la réactivité dans Chrome

Les outils de développement de Chrome permettent de tester la réactivité de votre page en spécifiant des dimensions précises d'appareils.

  1. Ouvrez la page à tester dans Chrome.
  2. Faites afficher les outils de développement comme suit:
    Afficher > Options pour les développeurs > Outils de développement (ou encore cliquez-droit sur la page et choisissez Inspecter.
  3. Repérer l'icone en forme de petite tablette (1) vers le coin supérieur gauche de la fenêtre de développement et cliquez dessus.
  4. ATTENTION: en mode « Appareils mobiles », les effets au survol (:hover) ne sont pas fonctionnels puisque qu'il s'agit d'une simulation d'écran tactile.

  5. Ajustez la zone d'affichage de la page à la taille voulue, soit en faisant glisser la bordure droite de la zone d'affichage (2), soit en indiquant une taille précise en pixels (3), soit en choisissant un appareil type dans le menu déroulant Responsive (4).
  6. Rechargez la page (⌘+R) afin de raffraîchir l'affichage.

IMPORTANT : pour que vos requêtes média fonctionnent lorsque vous simulez les modèles de téléphones intelligents, le meta suivant doit absolument être inséré dans l'élément <head> de toutes vos pages HTML :
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Exemple d'utilisation des outils de développement de Chrome
Exemple d'utilisation des outils de développement de Chrome.

Vous pouvez faire afficher le cadre de l'appareil en choisissant Show device frame en cliquant sur les trois points verticaux :

Puis, dans le menu Responsive, vous choisissez un appareil, par exemple iPhone 6 :

Le cadre du iPhone d'affiche :

En cliquant sur l'icone , vous alternez entre le mode d'affichage vertical et le mode d'affichage horizontal (paysage) :

Un outil comparable existe dans Firefox: vous pouvez y accéder par le menu Outils / Développement Web / Vue adaptative.

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.

TP8 - Site monopage avec entête vidéo

Le TP8 a pour objectif de vous familiariser avec les principes d'un site monopage. Il aborde notamment les aspects suivants: navigation par ancres, intégration de vidéo, positionnement absolu et fixe.

Sources

Documents à remettre

Un dossier rigoureusement nommé comme suit:

  • groupe du lundi 9h : gr2_nominitialeprenom_tp8
  • groupes du lundi 12h : gr1_nominitialeprenom_tp8

contenant un fichier tp8.html, un dossier images et un dossier video.

Structure de fichiers :

Arborescence de fichiers pour le tp8.

Échéancier

Remettez le dossier complet, zippé, sur LÉA, dans l'espace prévu à cette fin, au plus tard :

  • le vendredi suivant le cours, 9h le matin

Grille d'évaluation (pondération: 4% de la session)

  • Le contenu de Title est signifiant: /1
  • Le favicon est intégré: /1
  • Les menu principal comportent des liens menant vers les ancres: /1
  • Les liens du bloc-titre sont fonctionnels et mènent vers les ancres: /1
  • La vidéo démarre au chargement, joue en boucle et ses contrôles sont cachés: /1
  • L'élément vidéo est correctement formé (2 formats proposés et texte de remplacement): /2
  • La feuille de style est ordonnée et commentée: /1
  • Les deux polices importées de Google fonts sont fonctionnelles: /1
  • La charte typo de base sou le sélecteur "html" comporte font-size, font-family, line-height, color...: /1
  • La taille des caractères est en "em" partout: /1
  • Les états des liens sont tous quatre définis pour leur allure générale: /1
  • Le menu principal est correctement positionné, sa taille est bien ajustée et ses liens sont cliquables: /2
  • Le bloc-titre est correctement positionné, sa taille est bien ajustée et ses liens sont cliquables: /1
  • Le texte du bloc-titre comporte une ombre projetée bien ajustée pour améliorer la lisibilité: /1
  • La vidéo est bien positionnée et sa taille fluide est bien ajustée (pleine largeur): /2
  • Les articles sont correctement mis en forme (marges, couleurs du fond et du texte alternées par nth-child): /1
  • Les icones et les liens du pied de page sont bien positionnés et mis en forme, et sont cliquables: /1
  • Le copyright est bien positionné et mis en forme: /1
  • Total: /20

Travail à faire

Renommez le dossier fourni et ouvrez-le dans Brackets.

Le travail consiste à créer un site monopage à partir des documents fournis.

Le résultat final doit ressembler à ceci (voir en classe pour la version interactive):

Exemple TP8

Affichage sur petit, grand et très grand écran.

>>> COMPLÉTEZ LE HTML

  1. Insérez la vidéo fournie à la toute fin de <header>, juste avant sa fermeture
    • La balise <video> doit suggérer les DEUX formats de vidéo mp4 et webm, en débutant par mp4 ;
    • Un texte alternatif doit être inséré dans la balise <video> en cas de non fonctionnement de la vidéo.
    • La vidéo doit comporter les attributs suivants :
      • démarrage automatique au chargement ;
      • lecture en boucle ;
      • son coupé ;
      • absence de barre de contrôle.
  2. Dans l'élément head
    • Insérez l'élément meta suivant pour réinitaliser le zoom du viewport :
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
    • Insérez les meta suivants:
      <meta name="description" content="Ta collection a les outils qu'il faut pour te guider dans la création de ton entreprise">
      <meta name="password" content="entrepreneuriat, ta collection, travail autonome, conçois, finance, réalise">
      <meta name="author" content="Nom de l'auteur de la page courante">
    • Insérez un élément link pour lier la feuille de style externe que vous allez créer.
    • Insérez un élément link pour faire afficher un favicon sur l'onglet de la page HTML (l'image du favicon se trouve dans le dossier images).
    • Inscrivez un texte signifiant (en rapport avec le contenu) dans l'élément title.
  3. Créer les ancres html :
    • Insérez les adresses des liens des trois menus (nav, accroche, footer) vers les ancres qui seront insérées dans les trois articles.
    • Insérez les id des ancres correspondant aux adresses créées précédemment (cette page montre comment créer une ancre HTML). Ces id doivent figurer dans la balise d'ouverture des quatre éléments <article>.
      --> Comme ceci : <article id="nom de l'ancre">.

>>> RÉDIGEZ LA FEUILLE DE STYLE

Mobile d'abord! La rédaction des règles de style doit se faire suivant le principe du Mobile d'abord (Mobile first). C'est-à-dire que les règles de style de base servent à reproduire la veriosn mobile pour écran étroit, puis les requêtes média servent ensuite à l'adaptation pour écrans plus larges.

  1. Dans le dossier « css » de votre site, créez le document styles.css
    • À partir de Brackets, cliquez-droit sur le dossier nommé css et choisissez «nouveau fichier»; nommez-le styles.css.
  2. Organisez la feuille de style :
    • Le contenu de la feuille de style doit être rigoureux, logique :
      • REGROUPEZ les règles de style par affinité ;
      • Rédigez de brefs COMMENTAIRES pour identifier les groupes de règles de style apparentées: Polices importées, Réinitialisation, Charte graphique, Liens généraux, Navigation principale, Bloc-titre, Vidéo, Articles, Pied de page, etc.
  3. Rédigez la feuille de style
    • @charset "UTF-8";
      La feuille de style doit débuter par cette fonction (ne rien inscrire avant, ni même de commentaires);

/* POLICES IMPORTÉES */

Les polices utilisées pour la maquette servant d'exemple sont Georgia pour les titres et Lucida pour le menu accroche et le texte courant.

  • Vous devez SUBSTITUER ces polices par DEUX POLICES DE VOTRE CHOIX à partir de Google Fonts.
  • Assurez-vous que les deux polices choisies s'harmonisent bien et contiennent les caractères dont vous avez besoin (accents, caractères spéciaux, etc.).

/* RÉINITIALISATION */

À la suite de l'importation des polices de caractères, insérez la règle de style de réinitilisation habituelle:

* { margin: 0; padding: 0; box-sizing: border-box; }

/* CHARTE GRAPHIQUE */

Rédigez la charte graphique de base sous le sélecteur html.

Elle doit comprendre au minimum :

  • la police de caractère principale, soit celle qui sert pour le texte courant (il s'agit de l'une des polices choisies dans Google Fonts), en plus des polices alternatives et de la collection (sans-serif ou serif);
  • la taille de caractère de base, soit 0.625em (ce qui qui donne 10px: voir en classe pour le calcul);
  • la couleur de caractère la plus courante;
  • la hauteur de ligne la plus courante (sans unité).

Toutes les tailles de caractères subséquentes dans la feuille de style doivent être indiquées à l'aide de l'unité em.

/* LIENS GÉNÉRAUX */

Définissez d'abord l'allure générale de l'ensemble des liens :

  1. Pour les états a:link et a:visited :
    • Retirez le soulignement.
    • Ajoutez une transition.
  2. Pour les états a:hover et a:active :
    • Ajoutez le soulignement.

/* EN-TÊTE */

Créez une règle de style pour header sans contenu pour le moment. Elle vous servira plus tard.

/* NAVIGATION PRINCIPALE */

La navigation principale (nav) est en position fixe, tout en haut de la page, avec une couleur d'arrière-plan légèrement transparente:

  • Le menu principal est une liste qui doit être placée à l'horizontal (display:flex)
  • Version écran étroit (voir maquette plus bas):
    • le premier lien se place au-dessus des trois autres, couvre toute la largeur de l'écran (%), présente une hauteur fixe (em) et sa taille est légèrement plus grande
    • les trois autres liens se placent sous le premier et ont tout trois une même largeur fluide (%) et une hauteur fixe (em)
  • Ajustez la taille du texte des liens
  • Transformez les liens en majuscules par CSS
  • Assurez-vous qu'ils soient fonctionnels quand on clique dessus...

/* BLOC TITRE */

Le bloc titre (class="bloc-titre") contient le titre du site (h1) et une liste mettant en vedette les liens les plus importants (class="accroche") :

  • Ce bloc est en position absolue ;
  • Il doit se situer à l'avant-plan de la vidéo ;
  • Sa position à partir du haut de la page (top:...;) doit être fluide (%) pour qu'il apparaisse centré à la verticale sur la vidéo et sa position doit être en référence à l'entête (header).
  • La taille du texte du h1 utilise les unités vw. Cette taille peut être réajustée aux points de rupture si nécessaire.
  • Liste de liens (class="accroche") :
    • Cette liste doit être placée à l'horizontale en display:flex
    • Le menu doit être centré sur la page, sous le titre du site (voir la maquette) ;
    • Ajustez la taille du texte des liens et l'espace entre eux (em);
    • Assurez-vous qu'ils soient fonctionnels (changement du curseur au survol de la souris).

/* VIDÉO */

Créez une règle de style avec le sélecteur video de manière à ce que la vidéo soit fluide et qu'elle occupe toute la largeur de la page.

/* ARTICLES */

  1. Les articles doivent être fluide en largeur:
    • Pour le contenu des articles (h2 et texte), utilisez l'unité pourcentage (%) pour les dimensions horizontales (ex.: width, padding-left, padding-right, margin-left, margin-right, etc., selon les besoins);
    • Précision : dans une grille de 12 colonnes, la largeur d'une colonne en pourcentage est de 100 / 12 = 8.333%.
  2. Détails de la zone de contenu principal :
    • La couleur d'arrière-plan et la couleur du texte des articles alternent entre deux couleurs: utilisez les astuces vues précemment en classe pour faire alterner les couleurs entre les articles impairs et pairs (nth-child...).
    • La couleur d'arrière-plan des articles impairs doit être la couleur de police des articles pairs, et vice versa.
    • Utilisez deux couleurs contrastées, autres que le noir et le blanc. Inspiréez-vous de la vidéo pour choisir ces couleurs.

/* PIED DE PAGE */

Le pied de page comprend trois icônes avec un texte sous-jacent reprenant les liens vers les ancres des trois articles.

  1. Liste de liens du pied de page :
    • la version de base pour écran étroit est verticale: les trois liens occupent en largeur la totalité de la page
    • Vous devez attribuer une taille aux éléments <a> afin de pouvoir afficher les images en arrière-plan et le texte sous l'image, comme le montre la maquette :
      • la largeur du lien doit être fluide (%)
      • la hauteur du lien doit être en pixels afin de montrer l'image en arrière-plan (px).
    • Dans la feuille de style, avec la propriété background-image, insérez respectivement les images (icone1.png, icone2.png et icone3.png) en arrière-plan de chacun des éléments <a> du pied de page
    • Centrez ces images à l'horizontale comme le montre la maquette ;
    • Positionnez le texte des liens sous les images comme le montre la maquette
    • L'effet au survol est le changement d'opacité: de .7 au repos à 1 au survol (en plus du soulignement de base établi plus haut)
  2. Crédits
    • Le copyright doit être minimalement mis en forme (marges suffisante, taille du texte, alignement...).

/* ADAPTATION POUR MOYENS ET GRANDS ÉCRANS */

Réactivité: « mobile d'abord » (mobile first)

  • Votre mise en forme est réalisée d'abord pour les petits écrans selon l'approche « mobile d'abord »;
  • Pour vérifier le comportement de votre interface aux diverses résolution, utilisez le simulateur de Chrome Web Developper ;
  • Vérifiez notamment comment réagissent :
    1. la taille du bloc titre et sa position verticale par dessus la vidéo ;
    2. le chevauchement des liens du menu principal (voir la maquette pour l'adaptation du menu pour les petites résolutions) ;
    3. La disposition du texte des articles (voir la maquette pour petits écrans) ;
    4. le chevauchement des liens du menu du pied de page (les liens doivent occuper 100% en écran étroit et 33.333% en écran large).
  • Utilisez une PREMIÈRE requête média lorsque l'espace est suffisant pour placer tous les liens de la navigation principale sur une seule ligne.
  • Utilisez une DEUXIÈME requête média lorsque le texte des articles devient trop large pour être lu de manière confortable. Créez alors deux colonnes pour le texte des articles (column-count: 2).

Assurez-vous que votre travail corresponde aux guides et maquettes affichées ici :

Consignes pour la mise en forme de base
Maquette complète pour petits écrans

Consignes pour les grands écrans
Consignes pour le menu du pied de page pour les grands écrans
Maquette complète pour moyens et grands écrans
Maquette du tp9
Maquette partielle pour les très grands écrans
Haut de page