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

Les ancres HTML pour naviguer dans un site monopage

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 mais comportant plusieurs sections.

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

Exemple de lien vers une 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:

Exemple d'ancre

<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 :

Exemple de lien vers le haut de la page

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

Voyez maintenant un exemple complet d'un menu de trois liens menant vers des ancres plus loin dans la page. Cliquez sur l'un des liens pour constater :

Intégrer une vidéo avec les balises video et source

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

Le code suivant 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:

Code

          <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 visionner 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. 
            Vous pouvez la visionner en suivant ce lien: 
            <a href="adresse">Titre de la vidéo</a>.
          </video>
          

À 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.

À noter que dans Chrome, autoplay fonctionne seulement s'il est accompagné de l'attriut muted qui rend la vidéo muette.

• 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

Les navigateurs ne prennent pas en charge l'ensemble des formats vidéo, principalement en raison de problèmes de brevets. Il est possible de fournir plusieurs sources dans l'élément <video> grâce à des éléments <source>; le navigateur utilisera la première ressource dont il connaît le format.

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).

Étude de cas: utiliser une boucle vidéo d'entête

À partir du codepen suivant:

1. Faites en sorte que la taille de la vidéo est fluide et occupe 100% de la largeur de la fenêtre du navigateur, quelque soit cette largeur;
2. Faites disparaître la barre de contrôle de la vidéo;
3. Faites jouer la vidéo automatiquement;
4. Rendez la vidéo muette;
5. Faites jouer la vidéo en boucle;
6. Placez le titre "Montagnes" au centre de la vidéo.
7. Dans la charte graphique, insérez la police de caractère citée dans le code de Google Fonts
8. Ajustez la taille du titre en utilisant l'unité "vw"
9. Ajustez la couleur du titre
10. Ajoutez une ombre projetée au titre

See the Pen c08_video-titre-superposé by Sylvain Lamoureux (@slamoureux) on CodePen.

Les images réactives avec les balises picture et source

La balise picture est un conteneur permettant de servir plusieurs sources d'images, grâce à la balise source, en fonction d'une condition introduite par l'attribut media

Code

            <picture>
              <source srcset="agile_w600.jpg" media="(max-width:600px)">
              <source srcset="agile_w1200.jpg" media="(min-width:601px)">  
              <img src="agile_w1200.jpg" alt="Agile">
            </picture>
          

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

La 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).

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.

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.

4. 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).
5. Rechargez la page (⌘+R) afin de raffraîchir l'affichage.

Vous pouvez faire afficher les requêtes médias en cliquant sur les trois points verticaux et en choisissant Afficher les requêtes médias :

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

Le format du iPhone d'affiche :

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

Activités d'évaluation

TP3 - Le site monopage

Le TP3 a pour objectif de vous familiariser avec les principes d'un site monopage. Il aborde notamment les aspects suivants: la navigation par ancres et le positionnement fixe.

Documents à remettre

Un dossier rigoureusement nommé comme suit:

• groupe du mercredi 9h : gr1_nominitialeprenom_tp3
• groupes du vendredi 8h : gr2_nominitialeprenom_tp3

Structure de fichiers :

ou

Échéancier

Remettez le dossier complet, zippé, sur Teams/Devoir, dans l'espace prévu à cette fin, au plus tard :

• Au début du prochain cours.

Travail à faire

Créez votre dossier de travail et ouvrez-le dans Visual Studio Code.

Le travail consiste à créer un site monopage à partir des fichiers sources.

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

>>> RÉDIGEZ LE CODE HTML

1. Créez un fichier nommé index.html et rédigez la structure de base de la page :
   • Doctype
   • Balises html, head, body
2. Dans l'élément head, ajoutez les éléments :
   • meta pour le jeu de caractère (charset)
   • title, avec le contenu "Ta collection - Crée. Finance. Réalise."
   • meta pour réinitaliser le zoom du viewport
   • meta pour la description
   • meta pour les mots clés
   • meta pour l'auteur
   • link pour lier la feuille de style
   • link pour lier le favicon favicon.gif
3. Dans l'élément body, insérez les éléments indiqués dans la schématisation suivante, en incluant les classes et les identifiants:

   

4. Rédigez le code HTML de la navigation principale en vous inspirant de l'image précédente :
   • Les adresses des liens de la navigation principale doivent cibler les cinq ancres de la page, soit: le haut de la page, section01, section02, section03 et footer. (Cette partie des notes de cours montre comment fonctionne un lien vers une ancre HTML: Ancres HTML
5. Rédigez le code HTML des sections de la page en vous inspirant de l'image précédente :
   • Dans l'image précédente, remarquez les id des éléments section. Ces id doivent figurer dans la balise d'ouverture des quatre éléments <section>. Ils transforment chaque élément section en ancre HTML.
     --> Comme ceci pour la section01 (à répéter pour les deux autres sections et le footer) :

     <section class="section" id="section01">

6. Rédigez le code HTML du contenu des trois sections en vous inspirant des maquettes des pages affichées plus haut et de la schématisation des conteneurs :
   • Créez le titre de chaque section
   • Utiliser du texte "lorem Ipsum" pour le paragraphe de chaque section (Générateur de Lorem Ipsum ). Il suffit de générer le texte, de le copier et de l'insérer dans le document HTML, tout en ajoutant les balises habituelles. Réduisez la taille des paragraphes au besoin.

>>> RÉDIGEZ LA FEUILLE DE STYLE

1. Créez un dossier « css », et ajoutez-y un nouveau fichier 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, Navigation principale, Titre principal, VidéoSections, Footeretc.
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 LIÉES */

• Vous devez lier 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 :root.

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, selon votre choix);
• la taille de caractère de base en "em";
• la couleur de caractère la plus courante;
• la hauteur de ligne la plus courante (sans unité).

/* NAVIGATION */

Définissez la mise en forme de la navigation :

1. À l'aide du sélecteur .menu, créez une règle de style pour placez le menu en position fixe et lui donnez quelques caractéristiques, comme ceci :
   • Ajoutez position:fixed à la règle de style
   • Établissez sa position à top:0 et left:0
   • Forcer son affichage au premier plan en utilisant z-index:100
   • Ajoutez une propriété pour que la largeur soit de 100%
   • Ajouter une hauteur de votre choix
   • Ajoutez une couleur d'arrière-plan
2. Placez les liens à l'horizontal :
   • Inspirez-vous du Codepen vu plus tôt dans le cours pour disposer le menu correctement
   • Assurez-vous qu'en version étroite, le premier lien occupe toute la largeur par dessus les quatre autres liens
   • Assurez-vous qu'en verison écran large, les cinq liens se côtoient sur une même ligne.
3. Effectuez la mise en forme des liens et leurs états :link, :visited, :hover et :active.

/* BLOC TITRE ET VIDÉO */

Effectuez la mise en forme du bloc titre et de la vidéo :

1. Inspirez-vous du Codepen vu plus tôt
2. Assurez-vous que la vidéo ait une largeur fluide
3. Faites en sorte que le titre soit superposé à la vidéo, et que sa position demeure stable, quelle que soit la largeur de l'écran et la taille de la vidéo.

/* SECTIONS */

Effectuez la mise en forme des sections :

1. Créez une règle de style pour le sélecteur .section
2. Chaque section doit occuper au moins la hauteur de la fenêtre du navigateur, quelque soit cette hauteur. Pour ce faire, utilisez min-height:100vh. En sachant que 1vh = un centième de la hauteur de la fenêtre, 100vh représente donc la hauteur totale de la fenêtre du navigateur.
3. Ajoutez display:flex pour définir le conteneur 'section' en tant que conteneur flex.
4. Ajoutez flex-direction:column pour définir l'axe principal (vertical).
5. Ajoutez justify-content et align-items pour centrer le contenu respectivement dans l'axe principal (vertical) et l'axe secondaire (horizontal).
6. Faites la mise en forme du contenu :
   • En vous inspirant de la maquette, déterminez une largeur des éléments picture et des éléments p de manière à ce que la lecture demeure agréable.
   • Précisez la police de caractère pour le titre et pour les paragraphes en utilisant les deux polices liées à partir de Google Fonts.
   • Précisez la taille de la police.
   • Précisez tout autre élément de mise en forme de votre choix: couleur, casse, etc..

/* ARRIÈRE-PLAN DES SECTIONS */

Afin de bien distinguer les sections, vous allez ajoutez deux couleurs d'arrière-plan qui vont alterner:

1. Inspirez-vous de la partie des notes de cours intitulée Mise en forme alternée pour faire le travail.

/* PIED DE PAGE */

Le pied de page comprend trois éléments: une liste de menu, un paragraphe avec l'adresse de courriel et un paragraphe avec le copyright.

1. Avec .footer, transformez le footer en flex-container pour alignements ces trois élément.
2. La liste du menu comprend elle aussi trois éléments. Transformez le menu en flex-container afin d'aligner ces trois éléments. Ils doivent être d'abord alignés en colonne pour les écrans étroits, et alignés en rangée pour les écrans large à partir d'une certaine largeur.

>>> DÉFILEMENT DE LA PAGE

Vous avez sans doute remarqué qu'avec l'utilisation des ancres, on a parfois l'impression de quitter une page pour une autre en raison de l'instantanéïté du mouvement.

Vous devez adoucir le défilement de la page au clic d'un lien en utilisant la propriété scroll-behaviour avec la valeur smooth

Cette propriété est transmise vers les descendants, de telle sorte que pour l'appliquer au document en entier, il s'agit d'ajouter la déclaration scroll-behavior:smooth sous le sélecteur :root qui est déjà en place au début de la feuille de style.