Processus de réalisation et de transformation d'une maquette de site Web en page Web. Analyse de la charte graphique d'un site et de ses composantes. Description du rôle et des étapes de création d'une page Web.

1. Les pages Web
en HTML et CSS
Webdesign
Olivier Dommange

2. Olivier Dommange
La charte graphique
Régularise la composition
et les aspects graphiques
Elle dispose des dimensions des
zones de contenus qui
permettront la transformation de
la maquette en page Web et
mobile.

3. Olivier Dommange
La charte graphique
Régularise la composition
et les aspects graphiques
Elle dispose des informations
typographiques (police, taille,
couleur, graisse, interlignage et
effets) qui définiront la mise en
forme.

4. Olivier Dommange
La charte graphique
Régularise la composition
et les aspects graphiques
Elle présente l’espace
colorimétrique des interfaces.

5. Olivier Dommange
La charte graphique
Régularise la composition
et les aspects graphiques
Elle présente les états de survol,
enfoncés et actifs des boutons et
des liens.

6. Olivier Dommange
La charte graphique
Régularise la composition
et les aspects graphiques
Expose les transformations de
l’interface pour les différents
supports mobiles.

7. Olivier Dommange
Les étapes
de réalisation

8. Olivier Dommange
L'organisation d'un projet
Le fichier HTML rassemble
les autres fichiers
Des liens relatifs lient les fichiers du projet
au document HTML. Les ressources
distantes impliquent un lien absolu
(adresse URL complète).
Les éléments liés au fichier HTML sont :
Les feuilles de style CSS
Les scripts en Javascript
Les images, vidéos et audios.
Les outils tiers incorporés
dans les balises <iframe>.

9. Olivier Dommange
HTML : Les principes d'utilisation
HTML, un langage d’identification
Le HTML est un système d’imbrication de
contenus identifiés par les balises qui
l’entourent.
Les balises HTML disposent d’attributs qui
permettent de leur donner une forme
spécifique ou de les identifier.
Une balise qui s’ouvre, se ferme (par le
même nom de balise avec le symbole
«slash» devant (ex. : </p>).
Quelques balises échappent à cette règle
(<img>, <input>, <br>, <link>, <meta>,...).
Les attributs s’insèrent dans la balise
d’ouverture (ex. : <div id=”page”>

10. Olivier Dommange
CSS : Les principes d'utilisation
Donne la forme visuelle à la
page et son contenu
Le CSS complète le HTML en formatant
l’apparence des espaces, objets et
contenus qui composent la page Web.
Les sélecteurs, identifient les éléments
HTML dont l’apparence sera altérée.
Énumération de propriétés CSS qui
conditionnent l’apparence de la page.
Le “Responsive design” est possible
grâce au CSS.
Les navigateurs imposent un
formatage CSS par défaut.

11. Olivier Dommange
La mise en page
HTML : Identifier les zones
de la mise en page
Le HTML dispose dorénavant d’un plus
grand nombre de balises pour
identifier les zones de la mise en page.
Identifier les zones à l’aide des
balises <main>, <section>,
<header>. <footer>, <aside>,
<article>, <nav>, <menu> et <div>.
Envisager l’ordre d’apparition des
balises en fonction du résultat sur
les supports mobiles.

12. Olivier Dommange
La mise en page
CSS : Donner du volume et mettre
en page les zones
Les éléments dans une page influence
mutuellement leur mise en page. Une zone se
positionne en fonction du flux de la page. Sa
position se définit par l’espace qu’occupe les
éléments qui le précède et les limites de son
contenant.
Définir la dimension des zones.
Habiller le fond des zones (images, couleurs ou
dégradés)
Positionner grâce aux marges imposées et à la
propriété “float” qui permet de positionner
deux blocs côte-à-côte.

13. Olivier Dommange
La mise en forme
HTML : Identifier les
contenus
Imposer sémantiquement les balises
aux contenus de manière à identifier
leur nature.
Identifier les titres, les
paragraphes et les listes.
Insérer les images, vidéos et sons
faisant parties des contenus.
Créer les composants
complémentaires (formulaires et
tableaux).

14. Olivier Dommange
Le référencement naturel
A-t-on bien identifier les
contenus de la page ?
Les moteurs de recherche identifient les
contenus de la page grâce aux balises de
mise en forme. Elles informent de la
priorité à donner aux mots-clés.
Les balises <h1>-<h6>, <p>, <ul>, <ol>,
<img> sont utilisées à bon escient.
Les titres des images et des contenus
sont descriptifs (et les espaces sont
remplacés par des tirets).
Des descriptifs sont indiqués aux
images et aux liens.
Chaque page dispose d’un titre et d'une
description unique.

15. Olivier Dommange
La mise en forme
CSS : Corriger les propriétés
imposées par les navigateurs
La plupart des balises HTML de mise en
forme disposent d’un formatage à
corriger.

16. Olivier Dommange
Les menus
Des rubiques cliquables...
La composition d’un menu en HTML
devrait être sous forme de liste (<ul>).
Il s’agit d’une liste de rubriques.
La représentation HTML de blocs dans des
blocs d’une liste offre toute la souplesse
pour conditionner l’apparence du menu
avec CSS quelque soit sa forme.

17. Olivier Dommange
Responsive design
Définir les formats
Les « media queries » permettent à la page de
conditionner la mise en page et la mise en
forme en fonction de la taille du support.
La dimension et le positionnement des
zones de contenus.
La taille des caractères.
L’optimisation des images.
La réorganisation des outils de navigation

18. Olivier Dommange
Démarrer un projet de page Web
Une solution qui facilite l’insertion d’outils
annexes à un projet Web.
Utilise la librairie « modenizr » qui
harmonise la fonctionnement du HTML 5
sur les différents navigateurs.
Propose les outils de référencement et
statistiques courants qu’un projet en ligne
devrait disposer.
Propose des icônes des différents formats
et supports.
Propose des outils annexes fréquents dans
les projets Web (jQuery et Bootstrap).
Initializr

19. Olivier Dommange
http://www.linkedin.com/in/olivierdommange