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

582-104-SF Intégration 1

Leçon 11

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.

Le validateur le plus courant est celui du W3C

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.
Validation du balisage en ligne par URI

Validate by URI
Validation du balisage local par chargement d'un fichier html (File Upload)

Validate by File Upload
Validation du balisage local par saisie directe du code (Direct Input)

Validate by Direct Input

CSS

Le validateur CSS du W3C existe dans plusieurs langues.

Validateur CSS

Validateur CSS

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.

Intégration des images

Revenons sur quelques notions en ce qui concerne l'intégration d'images dans les documents HTML ou CSS.

Images de contenu fluides

Il est aidé de rendre une image fluide lorsqu'elle est insérée à l'aide de la balise <img> tel que nous l'avons fait à quelques reprises. Il s'agit d'utiliser la propriété width ou max-width avec une valeur en pourcentage; la hauteur sera ajustée automatiquement en fonction du ratio initial de l'image:

img { width: 100%; /* L'image s'aggrandit sans limite avec son conteneur */ height: auto; vertical-align: bottom; /* Retire la bande blanche sous l'image */ }

ou

img { max-width: 100%; /* Ne s'aggrandit pas au-delà de sa taille max réelle */ height: auto; vertical-align: bottom;/* Retire la bande blanche sous l'image */ }

Cependant, dans un contexte ou une image d'entête plein écran est utilisée dans une page réactive, donc prévue pour un grand éventail d'appareils, cette façon de faire est inefficace du point de vue de la performance.

Afin d'améliorer la performance du chargement des pages sur les différents types d'appareils, il existe une astuce qui consiste à proposer différentes versions d'images selon la résolution de l'affichage: ce sont les images réactives.

Images de contenu réactives

L'élément picture permet de proposer des sources conditionnelles d'images, en fonction de la largeur de l'affichage. La taille des images se trouvent donc à être adaptée à la largeur de la fenêtre du navigateur.

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

Images d'arrière-pan: background-image et background-size

Lorsque vous utilisez une image en arrière-plan dans les CSS avec la propriété background-image, vous pouvez régler sa taille, si nécessaire, avec la propriété background-size.

Les valeurs de background-size peuvent être des unités de taille (px, %, etc.), mais aussi des mots-clés comme contain ou cover (auto étant la valeur par défaut).

Voir le pen suivant pour des exemples :

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

TP long: le webzine

Le webzine est en quelque sorte un magazine en ligne.

Il est construit autour d'un thème qui peut être de nature très variée: musique, destinations voyage, sports, cuisine, environnement, sciences, etc.

Votre webzine

Vous devez choisir un thème pour votre webzine pour lequel vous devrez trouver six articles.

Quelques exemples visuels pour vous inspirer

Exemple de page d'accueil :

Page d'accueil : exemple de réactivité

Exemple de mise en forme de base de l'accueil pour petits écrans.
Exemple de sous-menu pour accéder aux articles.
Sous-menu articles
Exemple d'accueil pour écrans moyens.
Accueil
Exemple d'accueil pour grands écrans.
Maquette tp long.
Exemple de page d'article.
Exemple de page d'article
Exemple de page d'article, suite.
Exemple de page d'article
Exemple de page À propos.

Exemple de page Contact.
Exemple de page contact
Exemple de formulaire complet pour la page Contact.
Exemple de formulaire pour la page contact