Intégration graphique
Post on 23-Feb-2016
46 Views
Preview:
DESCRIPTION
Transcript
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
•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
top related