Les pages Weben HTML et CSS

Webdesign

Oliv

ier D

omm

ange

Oliv

ier D

omm

ange

La charte graphique

Elle dispose des dimensions des zones de contenus qui permettront la transformation de la maquette en page Web et mobile.

Régularise la composition et les aspects graphiques

Oliv

ier D

omm

ange

La charte graphique

Elle dispose des informations typographiques (police, taille, couleur, graisse, interlignage et effets) qui définiront la mise en forme.

Régularise la composition et les aspects graphiques

Oliv

ier D

omm

ange

La charte graphique

Elle présente l’espace colorimétrique des interfaces.

Régularise la composition et les aspects graphiques

Oliv

ier D

omm

ange

La charte graphique

Elle présente les états de survol, enfoncés et actifs des boutons et des liens.

Régularise la composition et les aspects graphiques

Oliv

ier D

omm

ange

La charte graphique

Expose les transformations de l’interface pour les différents supports mobiles.

Régularise la composition et les aspects graphiques

Oliv

ier D

omm

ange

Les étapesde réalisation

Oliv

ier D

omm

ange

L'organisation d'un projet

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 :

Le fichier HTML rassemble les autres fichiers

Les feuilles de style CSSLes scripts en JavascriptLes images, vidéos et audios.Les outils tiers incorporés dans les balises <iframe>.

Oliv

ier D

omm

ange

HTML : Les principes d'utilisation

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.

HTML, un langage d’identification

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

Oliv

ier D

omm

ange

CSS : Les principes d'utilisation

Le CSS complète le HTML en formatant l’apparence des espaces, objets et contenus qui composent la page Web.

Donne la forme visuelle à la page et son contenu

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.

Oliv

ier D

omm

ange

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.

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

Oliv

ier D

omm

ange

La mise en page

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.

CSS : Donner du volume et mettre en page les zones

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.

Oliv

ier D

omm

ange

Imposer sémantiquement les balises aux contenus de manière à identifier leur nature.

HTML : Identifier les contenus

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

La mise en forme

Oliv

ier D

omm

ange

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.

A-t-on bien identifier les contenus de la page ?

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.

Le référencement naturel

Oliv

ier D

omm

ange

La plupart des balises HTML de mise en forme disposent d’un formatage à corriger.

CSS : Corriger les propriétés imposées par les navigateurs

La mise en forme

Oliv

ier D

omm

ange

La composition d’un menu en HTML devrait être sous forme de liste (<ul>).

Des rubiques cliquables...

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.

Les menus

Oliv

ier D

omm

ange

Les « media queries » permettent à la page de conditionner la mise en page et la mise en forme en fonction de la taille du support.

Définir les formats

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

Responsive design

Oliv

ier D

omm

ange

Une solution qui facilite l’insertion d’outils annexes à un projet Web.

Démarrer un projet de page 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

http://www.linkedin.com/in/olivierdommange

Olivier Dommange