Le TP long

Validation du code

Il existe des outils en ligne qui permettent de valider les codes HTML et CSS.

HTML

À différents moments du développement de vos pages, et non pas seulement à la fin, vous devriez procéder à la validation de votre structure HTML.

Ce dernier n'existe malheureusement pas en français.

Remarquez les trois onglets :

1. Validate by URI, permet d'entrer une adresse pour la validation en ligne;
2. Validate by File Upload, permet d'expédier un fichier pour la validation locale;
3. Validate by Direct Input, permet de copier-coller directement le balisage pour la validation locale.

CSS

Le validateur CSS du W3C existe dans plusieurs langues.

Tout comme le précédent, celui-ci permet de valider du code en ligne par adresse URI, ou encore du code local, soit par chargement d'un fichier, soit par saisie directe du code.

Banques d'images en ligne
(réf.: cours Design d'interface I)

Dans le cadre du TP long, vous devrez utiliser des images libres de droits.

Les références suivantes vous aideront à trouver des images pour votre travail.

Palette de couleurs

Dans le cadre du TP long, vous êtes invité·e·s à vous inspirer d'une palette de couleurs pour vos choix graphiques.

Adobe Colors est une ressources utile à cet égard car ce site permet d'enregistrer vos créations dans votre compte Adobe.

De nombreuses autres ressources en ligne existent pour créer des palettes de couleurs. Vous pouvez utiliser celle de votre choix.

La balise audio

La balise audio s'utilise d'une manière assez semblable à la balise video. Elle comporte pratiquement les mêmes attributs.

Sous-menu apparaissant au survol

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

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, 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 et nomenclature BEM pour les classes

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 l'accueil possède ses particularités, que les autres pages ont une structure commune et que la page contact possède des particularités dans sa zone de contenu en raison de son long formulaire.

L'usage systématique des classes selon la méthode BEM vous permettra d'effectuer la mise en forme de manière rationnelle et sans confusion.

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 */

/* ENTÊTE COMMUNE */


/* NAVIGATION PRINCIPALE */


/* PAGE ACCUEIL */

/* PAGES TEXTE */


/* PAGE CONTACT */

/* PIED DE PAGE COMMUN */

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é·e·s à 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 signale que la portion du contenu de l'élément title visible dans les résultats de recherche est de 600 pixels, soit environ 65-70 caractères (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 la partie signifiante du contenu 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 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 demie. 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 :

À 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 liste de résultats de recherche avec DEUX mots clés :

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

TP long : mise en ligne sur le serveur timunix3

Les directives vous permettant d'effectuer la mise en ligne de votre site sur le serveur timunix3 vous serons données dans le cours de Profession intégrateur.

En plus de faire une remise des fichiers de votre site sur Léa, vous devez également mettre en ligne votre site sur le serveur timunix2.

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

http://timunix3.csfoy.ca/~slamoureux/

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. Les noms de TOUS les dossiers sont écrits en MINUSCULES, sans espace, ni caractères spéciaux;
5. Les noms de TOUS les fichiers (.html, .css, .jpg, .png, .gif, .mp4, etc.) sont écrits 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.

Consultez les notes de cours de Profession intégrateur pour réviser les étapes. L'utilisation de FileZilla y est expliquée.