750 likes | 853 Views
Intégration graphique. Approche métier. Objectif. Réaliser une intégration réussie au delà du développement HTML5 / CSS3 Et Traduire de manière optimale des maquettes. Plan. Contraintes et problématiques de l’intégration Relations entre les différentes parties et contraintes de chacun
E N D
Intégration graphique Approche métier 10/02/2014 - ORT Lyon
10/02/2014 - ORT Lyon Objectif Réaliser une intégration réussie au delà du développement HTML5 / CSS3 Et Traduire 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 projet Déroulement de la création d’un site Contraintes de chaque intervenants Position de l’intégration
10/02/2014 - ORT Lyon Schéma déroulement de projet création de site
Référencement 10/02/2014 - ORT Lyon • Utilisateur • Gestion du site, mises à jour • Internaute • Gestion de projet • Analyse besoins, recommandations, gestion planning, suivi du projet, recettage et livraison • Client • Besoins / Stratégie / Communication
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 graphique Notions de graphisme pour le web Maquettes et déclinaison des pages non maquettées Respect 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écessaire Vous 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 autre Ex. 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 site Anticiper les mises à jours futures Graphisme et intégration pérennes Mise 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 CMS Présentation du rôle d’un CMS Différences avec le sur mesure Inté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, eZPublish, 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égration CMS 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égration Analyse d’une maquette Découpage Photoshop Proprié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 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’une police 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