10/02/2014 - ORT Lyon

Intégration graphiqueApproche métier

10/02/2014 - ORT Lyon

ObjectifRéaliser une intégration réussie au delà du

développement HTML5 / CSS3EtTraduire de manière optimale des

maquettes

10/02/2014 - ORT Lyon

Plan• Contraintes et problématiques de l’intégration

▫ Relations entre les différentes parties et contraintes de chacun

▫ Contraintes client▫ Respect des maquettes et de la charte graphique▫ Évolutivité du site▫ Différence intégration sur mesure / intégration sur CMS

• Étude de cas▫ Analyse d’une maquette▫ Découpage Photoshop▫ Propriétés et sélecteurs CSS3

10/02/2014 - ORT Lyon

Phases et acteurs du projetDéroulement de la création d’un site Contraintes de chaque intervenantsPosition de l’intégration

10/02/2014 - ORT Lyon

Schéma déroulement de projet création de site

10/02/2014 - ORT Lyon

Création Intégration Développement

Gestion de projetAnalyse besoins, recommandations, gestion

planning, suivi du projet, recettage et livraison

ClientBesoins / Stratégie / Communication

UtilisateurGestion du

site, mises à jour

Internaute

Référencement

10/02/2014 - ORT Lyon

Rôle et contraintes de chaque intervenant

10/02/2014 - ORT Lyon

Le client•Objectifs stratégiques•Communication, notoriété, image•Fonctionnalités•Utilisabilité•Respect des délais

•Un site répond avant tout aux besoins du client

10/02/2014 - ORT Lyon

L’utilisateur•Souvent un chargé de communication

voire le client directement▫Pas de connaissances particulières dans le

web▫Contraintes back office▫Intuitivité, facilité d’utilisation▫Maximum d’éléments administrables

•Anticiper les besoins de la personne qui va mettre à jour le site

10/02/2014 - ORT Lyon

Le chef de projet• Recommandations et préconisations au client• Équilibre entre :

▫besoins du client ▫contraintes et possibilités techniques▫budget ▫délais

• Suivi du bon déroulement du projet• Garant du respect du cahier des charges, des

maquettes, du bon fonctionnement du site et des délais

• Recettage, test du site• Livraison client

10/02/2014 - ORT Lyon

Le graphiste / webdesigner

•Interprétation graphique des besoins des clients et du cahier des charges

•Livraison des maquettes attendues

•Prise en compte des contraintes de l’intégrateur, du développeur, du référenceur

10/02/2014 - ORT Lyon

Le développeur

•Garant du bon fonctionnement et du respect des besoins sur les fonctionnalités du site

•Respect de la charte graphique et de l’intégration fournie

•Construit les fonctionnalités dans le cadre graphique du site

10/02/2014 - ORT Lyon

Le référenceur•Optimise le site pour les moteurs de

recherche•Émet des préconisations techniques à

mettre en place à la réalisation du site (dont dépendront le graphisme, l’intégration et le développement)

•Le référencement se pense en amont de la création du site et induit des contraintes dans sa construction

10/02/2014 - ORT Lyon

L’internaute

• Doit pouvoir visualiser le site correctement sur sa propre machine et sur son navigateur

• Quelque soit sa machine, quelque soit son niveau de connaissance du web et quelque soit ses capacités (handicap, etc.)

• Un site internet n’est pas une technologie, c’est une interface conçue pour l’homme. Il faut rendre optimale l’interaction entre les deux.

10/02/2014 - ORT Lyon

Il peut y avoir d’autres intervenants•Du côté du client :

▫Chargé de communication▫Webmaster▫Chef de projet

•Du côté de l’équipe projet :▫Directeur artistique▫Ergonome▫Rédacteur▫Autre expert si besoin très particulier

10/02/2014 - ORT Lyon

Place de l’intégrateur

10/02/2014 - ORT Lyon

Rôle de l’intégrateur• Transformer une image en interface web > la technique au

service de l’homme

• Interpréter les maquettes (le plus souvent Photoshop) et les transformer en langages reconnus par les navigateurs : HTML5/CSS3 (JS/Jquery…)

• Vérifier l’identique de sa réalisation avec les maquettes fournie

• Tester son code (validation W3C) et la lisibilité des pages sur les différents navigateurs

• Tester le site après les autres interventions et avant la mise en ligne

10/02/2014 - ORT Lyon

Une position pivot•Intervention entre le graphiste et le

développeur•Doit être le garant du travail du graphiste

et ne pas bloquer (voire faciliter) le travail du développeur et des autres intervenants (référenceur, rédacteur…)

•Il concilie l’utilisabilité du site et le respect de la charte graphique

10/02/2014 - ORT Lyon

Le regard technique du graphiste•Sur les maquettes et leurs possibilités

d’application•Apporte sa réflexion sur le projet et

propose des modifications aux maquettes

•Il collabore avec le chef de projet pour valider les maquettes

10/02/2014 - ORT Lyon

Maquettes et charte graphiqueNotions de graphisme pour le webMaquettes et déclinaison des pages non maquettéesRespect de la charte graphique

10/02/2014 - ORT Lyon

Notions de graphisme pour le web

10/02/2014 - ORT Lyon

Contraintes graphiques liées aux machines•Pluralité des périphériques : grand écrans,

ordinateurs portables, tablettes, téléphones…

•Sur un même type de périphériques ▫Des résolution différentes : 1280 x 1024, 1024

x 780…▫Des outils de visionnages différents :

navigateurs, versions…▫Des modalités de visionnages différentes :

clavier, souris, doigt…

10/02/2014 - ORT Lyon

Contraintes graphiques liées à l’écran

• Penser la lecture à l’écran > lisibilité▫ Taille des textes▫ Couleurs > tous les écrans ne sont pas calibrés pareil▫ Contrastes…

• L’internaute interagi avec son écran, il clique ou touche avec le doigt :▫ Penser la navigation > représentation graphique intuitive▫ Les actions selon les états des éléments

Information qui apparait au survol, au clic > Le survol n’est pas possible avec le doigt

Éléments qui peuvent changer d’aspect visuels (liens, champ formulaire…)

!

10/02/2014 - ORT Lyon

Contraintes graphiques liées à la page•Pas de hauteur fixe :

▫Modularité des blocs sur la hauteur en fonction du contenu

•Ligne de flottaison :▫Éléments qui doivent figurer avant et ceux

qui peuvent dépendre du scroll

10/02/2014 - ORT Lyon

Possibilités graphiques, impossibilités techniques

•Effets de calques (superposition, produit…)•Effets de textes

▫Ombrages interne de lettres▫Dégradés dans les lettres▫Interlettrage▫Tailles des typos nombres non entiers▫Déformation : étroitisation, élargissement…

•Formulaires▫Flèche du select, scroll d’un textarea

10/02/2014 - ORT Lyon

Possibilités graphiques, devenues possibilités techniques > CSS3

•Polices de caractère droits sur la police•Ombrages externe de texte•Rotation de textes

•Compatibilités des versions de navigateurs

!

!

10/02/2014 - ORT Lyon

Intégration et déclinaison des pages non maquettées

10/02/2014 - ORT Lyon

Pour un même site•Quelques maquettes pour des dizaines de pages

▫Ex. site vitrine avec actus : Vous seront livrées les maquettes : page d’accueil, modèle de page intérieure, page de listing des actualités, page spécifique si nécessaireVous aurez à intégrer : toutes les pages du site

•Anticiper les modèles de mise en forme pour décliner toutes les pages

10/02/2014 - ORT Lyon

Cela implique• Prévoir des styles pour l’ensemble du site

▫ Titre h1, h2…▫ Paragraphes : introduction, chapo…

• Adapter la mise en forme d’une page à une autreEx. Si la page modèle des actus comprend un titre, deux sous-

titres, une image, un texte d’introduction> on reproduit la mise en forme sur les autres pages, on ne laisse pas un bloc uniforme

• Par défaut, une maquette est à considérer comme un modèle de page > elle présente une page identifiée mais elle doit s’appliquer aux autres

10/02/2014 - ORT Lyon

Le respect d’une maquette

10/02/2014 - ORT Lyon

Objectif : au pixel près•Rendre fidèle la maquette du graphiste•Les maquettes sont validées avant

intégration par : le client, le chef de projet, l’intégrateur (normalement)▫Tout non respect expose à la non-

conformité du projet et à la non satisfaction du client

•Vous n’aurez pas envie de tout refaire

10/02/2014 - ORT Lyon

Évolutivité d’un siteAnticiper les mises à jours futuresGraphisme et intégration pérennesMise en forme CSS au service de l’évolution du site

10/02/2014 - ORT Lyon

Le contenu change, pas le graphisme• Importance de la déclinaison de la charte graphique d’une

page à une autre

• Anticiper le résultat de la modification d’un élément▫ Exemples :

+ ou – d’infos dans un bloc > adaptation de la hauteur Nouveau menu > si la charte graphique le permet il faut le prévoir Article avec ou sans image > pas de zone vide si suppression de

l’image, anticiper positionnement du texte si ajout d’une image…

• Toute nouvelle page et toute modification d’une page existante doivent respecter la mise en page et la charte graphique

10/02/2014 - ORT Lyon

Prise en main par l’utilisateur•Prévoir des moyens d’appliquer une mise en

forme particulière sans connaissances techniques▫L’utilisateur ne modifie pas une page en HTML▫Mise en place d’une bibliothèque de styles

applicables par sélection d’un élément (liste déroulante de styles, shortcode…)

•L’éditeur WYSIWYG (en BO) doit rendre la même mise en forme que la page (en FO)

10/02/2014 - ORT Lyon

Éléments qui changent ou non•On choisi une solution technique en

fonction du caractère évolutif de l’élément concerné▫Si l’élément est amené à changer, la mise

en forme doit être automatique par CSS > simplifier au maximum le travail du client

10/02/2014 - ORT Lyon

Intégration sur mesure vsIntégration sur CMSPrésentation du rôle d’un CMSDifférences avec le sur mesureIntégration de template vs intégration quasi statique

10/02/2014 - ORT Lyon

Content Management System = Système de Gestion de Contenu• Séparer le fond et la forme• Structurer le contenu > articles, page, listing,

arborescence…• Workflow + Gestion rôles et permissions des

utilisateurs• Simplification des mises à jours > éditeur WYSIWYG,

facilité de trouver l’information, intuitivité…

• Exemples connus : Wordpress, Joomla, Drupal, eZ Publish, Typo 3… Prestashop, Magento…

• Un CMS peut aussi être propriétaire et sur mesure !

10/02/2014 - ORT Lyon

Différences au niveau de l’intégrationCMS Sur mesure• Administration existante

> pas d’intégration graphique

• Système de template> cadre à respecter pour l’intégration graphique

• Modèles de page établi : on applique une mise en forme globale (avantage ou inconvénient)

• Moins de liberté mais gain de temps et parfois de qualité (intuitivité déjà pensée…)

• Administration sur mesure> intégration graphique à réaliser

• Pas de contraintes> tout est permis ou presque

• Créer des modèles de page> prévoir une uniformité sur l’ensemble du site

• L’intégrateur est libre de ses choix mais il doit veiller encore plus à penser à l’utilisateur

10/02/2014 - ORT Lyon

Conclusion :Contraintes et problématiques de l’intégration web

• L’intégration est à la croisée de multiples domaines :▫ Technique (HTML/CSS, CMS, développement)▫ Communication (répondre aux besoins du client)▫ Ergonomie (répondre aux besoins de l’internaute ET de l’utilisateur)▫ Référencement (faciliter le positionnement)▫ Graphisme (respect des maquettes et conseil dans les possibilités)▫ Accessibilité

• Elle est, comme toute tâche professionnelle, dépendante des contraintes de temps (délais), de ressources humaines (personnes) et de budget (coût de la réalisation)

• Réussir une intégration c’est prendre en compte et satisfaire l’ensemble de ces composantes

10/02/2014 - ORT Lyon

Étude de cas : Réaliser une intégrationAnalyse d’une maquetteDécoupage PhotoshopPropriétés et sélecteurs CSS3

10/02/2014 - ORT Lyon

Étape 1 : Analyser la maquette

10/02/2014 - ORT Lyon

Points essentiels pour analyser une maquette

•Quels sont les différents espaces ? Combien de zones sont identifiables ?

•Quels sont les éléments communs à toutes les pages ?

•Différences entre la page d’accueil et les pages intérieures ?

10/02/2014 - ORT Lyon

Anticiper les évolutions du site•Quels sont les éléments qui risquent de

changer avec le temps ?▫En plus ou en moins

•Création d’articles•Modifications de textes•Modifications d’images

10/02/2014 - ORT Lyon

Attention toute particulière à apporter• Menus

▫ En ligne / colonne ?▫ Textes sur une ou deux lignes ?▫ Déroulants ou non ?▫ Susceptibilité d’être changés ?

Prévoir l’ajout d’un nouveau menu ? Prévoir qu’un texte de menu change ?

• Colonne de droite▫ Nouveaux blocs

• Version mobile responsive▫ Anticiper les maquettes mobiles dès l’intégration web classique

10/02/2014 - ORT Lyon

Les images•Jpg ou Png (poids, transparence ?)

▫Jpg > plutôt photos▫Png > autres visuels▫Éventuellement gif▫Jamais d’autres formats

•Image grand format / Miniature▫Exemple : listing d’articles▫Préconisations à transmettre à l’utilisateur

pour la taille des images (et les noms de fichiers)

10/02/2014 - ORT Lyon

Les fonds (background)•Images ou couleurs ?

▫Image la plus petite possible : peut-on la répéter ?

▫Nécessité de découper un même fond en plusieurs images ?

▫Anticiper la hauteur de page si fond en image Ex. Fond en dégradé : prévoir la couleur du

dernier pixel comme fond

10/02/2014 - ORT Lyon

Étape 2 :Concevoir la structure HTML5 après avoir identifié les zones

> Exercice

10/02/2014 - ORT Lyon

10/02/2014 - ORT Lyon

Analyse des zones à anticiper et incidences sur l’intégration

• Modification du numéro de téléphone> Prévoir de le mettre en texte > Import d’unepolice particulière

• Ajout de menu> Texte et police particulière > Pas d’autre contraintes il y a la place pour un nouveau menu

• Modification du titre des slide> Prévoir de rendre distinct les textes des images > Prévoir deux styles pour que l’utilisateur puisse mettre en place les deux niveaux de titres

• Publication de nouvelles actualités> Prévoir peut-être de mettre en place un oveflow:hidden au cas où le texte soit trop long> Prévoir de bloquer la taille de l’image si jamais le client en met une plus grande que prévu > max-

width + overfow:hidden• Ajout ou suppression de partenaires

> Pas un seul bloc, traiter logo par logo> tester le résultat en cas d’ajout ou de suppression d’un partenaire > pas d’espace vide n’importe où, ça

se met bien les uns à la suite des autres, etc.• Modification du contenu texte

> Ok pas de problème la page peut s’allonger, le fond est blanc, etc.

• Bonus : Demande du client > Prévoir le cas où il n’y aurait pas de vignette> Pas d’espace vide, occupation du texte sur toute la largeur… que la liste se suive bien…

10/02/2014 - ORT Lyon

Rappel des balises structurantes HTML5•<header> : en-tête (logo, bannière, slogan)•<footer> : pied de page•<nav> : liens de navigation, menu•<section> : un groupe de contenus sur une même

thématique•<aside> : informations complémentaires•<article> : contenu autonome de la page

10/02/2014 - ORT LyonRésultat :

10/02/2014 - ORT LyonEt le code :

10/02/2014 - ORT Lyon

Étape 3 : Découpage Photoshop

10/02/2014 - ORT Lyon

Les outils Photosphop• Démonstration

▫Calques▫Traitement des images

Recadrage Rognage Taille de la zone de travail

▫Outil mesure (règle) + loupe▫Pipette▫Texte▫…

• Fichiers > Enregistrer pour le web

10/02/2014 - ORT Lyon

Étape 4 : La mise en formeCréation des styles

10/02/2014 - ORT Lyon

Choix entre CSS2 ou CSS3> souvent au cas par cas

10/02/2014 - ORT Lyon

Comparatif avantages et inconvénients• CSS2 :

▫Fonctionne sur l’ensemble des navigateurs▫Assurance du rendu▫Nécessite plus de découpage (+ d’images) et plus

de div > perte de temps > code plus lourd

• CSS3 :▫Plus rapide▫Plus évolutif > s’applique aux éléments et n’oblige

pas le client à traiter des images par exemple▫Compatibilité

10/02/2014 - ORT Lyon

En fonction :•De critères demandés et précisés :

▫Le cahier des charges établi▫Le client

•D’une analyse du besoin du client :▫Sa cible en rapport avec le niveau de

connaissances et d’utilisation de l’outil internet (ex. personnes âgées peuvent être sur une vieille version de navigateur)

▫Importance du temps de chargement du site ou non ?

10/02/2014 - ORT Lyon

• Du niveau d’évolutivité du site :▫Nécessité pour le client de modifier ses textes >

éviter les images▫Importance des éléments pour le référencement▫Appréciation du nombre de mises à jour des

éléments (textes, images…) Ex. Un titre de partie a peu de chance de changer >

Préférer une image Ex. Effet arrondi sur un trombinoscope de l’équipe

> le CSS3 est mieux indiqué, autrement le client serait obligé de traiter manuellement chacune de ses photos

10/02/2014 - ORT Lyon

• De l’appréciation de dénaturation de la charte graphique▫Quel est le rendu si la propriété n’est pas

interprétée ? Lisibilité ? Position des autres éléments ?

Ex. rotation de texte▫Charte graphique du client

Ex. Border-radius = le bloc sera carré sur IE < 9, > pas trop grave, ne gêne pas la lecture du site> mais peut être grave si la charte graphique du client doit être impérativement arrondie (préférer des images pour garantir le rendu)

10/02/2014 - ORT Lyon

Sélecteurs et propriétés CSS3 utiles pour une intégration plus appropriée, plus légère, évolutive et conforme

10/02/2014 - ORT Lyon

Importer des polices de caractères• Lien ou script Google font (ou autre site de polices)

▫Appel de la police avec « font-family: » directement• Dépose des fichiers de la police sur le serveur

▫S’aider des services de génération de kits (FontSquirrel)

▫Appel des fichiers dans la feuille de styles au préalable@font-face { font-family: 'MaPolice'; src: url('MaPolice.eot') format('eot'), url('MaPolice.woff') format('woff'), url('Maolice.ttf') format('truetype'), url('MaPolice.svg') format('svg');}

10/02/2014 - ORT Lyon

Les couleurs•Habituel et efficace : Code hexadécimal•Depuis CSS3 : Notion de transparence avec RGBa

▫Évite de surcharger d’image▫rgba(rouge, vert, bleu, alpha)▫alpha = degré d’opacité entre 0 et 1▫Exemple : div { background: rgba(0, 0, 255, 0.5); }▫! IE < 9

10/02/2014 - ORT Lyon

Les ombres• Avant CSS3 : plusieurs images pour un bloc ou image

pour du texte• Depuis CSS3 : Deux propriétés

▫div{box-shadow:4px 4px 5px #555;} 1ère valeur : décalage horizontal vers la droite 2ème valeur : décalage vertical vers le bas 3ème valeur : force du dégradé (~étendue) 4ème valeur : couleur

▫h1{text-shadow:1px 4px 10px #000;}

▫! IE < 9

10/02/2014 - ORT Lyon

Les coins arrondis• Avant CSS3 : plusieurs images et plusieurs div pour

un même bloc• Depuis CSS3 : Une seule propriété

▫div{border-radius:10px;}

▫! IE < 9

• Outils de génération de CSS3 :▫Par exemple :

http://css3generator.com/

10/02/2014 - ORT Lyon

Élément enfant : un élément sur deux, trois… > :nth-child• Exemple :

▫ tr:nth-child(2n+1) td {background-color:#eee;} Représente les lignes impaires d'un tableau

▫ tr:nth-child(odd) td {background-color:#eee;} Représente les lignes impaires d'un tableau

▫ tr:nth-child(2n) td {background-color:#eee;} Représente les lignes paires d'un tableau

▫ tr:nth-child(even) td {background-color:#eee;} Représente les lignes paires d'un tableau

▫ tr:nth-child(-n+5) td{background-color:#eee;} Les 5 premières lignes

▫ Tr:nth-child(4n+1) td{background-color:#eee;} Tous les 4 éléments en commençant pas le premier

▫ Etc.

10/02/2014 - ORT Lyon

Élément de type : un élément sur deux, trois… > :nth-of-type•Exemple :

▫#actus img(odd) {float:left;} Les images impaires

se positionnent à gauche▫#actus img(even)

{float:right;} Les images paires

se positionnent à droite

10/02/2014 - ORT Lyon

Sélection d’un élément par son attribut•Exemple :

▫Très utile pour les formulaires ! input[type="text"]{width:150px;} input[type="submit"]{text-

transform:uppercase}> On ne veut pas que les boutons radio fassent 150px ou que tous les contenus des champs soient en majuscules

▫Distinguer les liens a[target="_blank"]

{background:url(fleche.png) no-repeat}

10/02/2014 - ORT Lyon

Pour aller plus loin…

10/02/2014 - ORT Lyon

Notions à approfondir…•Moyens et techniques pour assurer la

compatibilité entre navigateurs

•Référencement (Google Pingouin, Google Panda) et adéquation du code

•Accessibilité

•Design responsive

10/02/2014 - ORT Lyon

Documents et ressources

10/02/2014 - ORT Lyon

Quelques documents et pages utiles•OpenClassRooms.com (ancien Site du Zéro)

▫Cours en ligne sur les technologies web▫PDF cours complet HTML5/CSS3

•Alsacréations.com▫Tutoriels sur les standards du web et astuces

•Google

•Valider votre code▫http://validator.w3.org/▫http://jigsaw.w3.org/css-validator/

10/02/2014 - ORT Lyon

Compatibilité des propriétés HTML5/CSS3 en fonction des navigateurs

•http://www.normansblog.de/demos/browser-support-checklist-css3/

•http://caniuse.com/

•Logiciel IETester•Fonctionnalités natives du navigateur IE

10/02/2014 - ORT Lyon

Importer des polices de caractères spécifiques

•Packs de polices prêts à l’emploi en CSS3 + générateur de packs

▫http://www.fontsquirrel.com/

•Import de polices externes▫http://www.google.com/fonts (libres et

gratuites)▫http://www.fonts.com/ (payantes et non

libres)

10/02/2014 - ORT Lyon

Conclusion et questions