1 / 75

Intégration graphique

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

plato
Download Presentation

Intégration graphique

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Intégration graphique Approche métier 10/02/2014 - ORT Lyon

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

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

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

  5. 10/02/2014 - ORT Lyon Schéma déroulement de projet création de site

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

  7. 10/02/2014 - ORT Lyon Rôle et contraintes de chaque intervenant

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

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

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

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

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

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

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

  16. 10/02/2014 - ORT Lyon Place de l’intégrateur

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

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

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

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

  21. 10/02/2014 - ORT Lyon Notions de graphisme pour le web

  22. 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…

  23. 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…) !

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

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

  26. 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 ! !

  27. 10/02/2014 - ORT Lyon Intégration et déclinaison des pages non maquettées

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

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

  30. 10/02/2014 - ORT Lyon Le respect d’une maquette

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

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

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

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

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

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

  37. 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 !

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

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

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

  41. 10/02/2014 - ORT Lyon Étape 1 : Analyser la maquette

  42. 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 ?

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

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

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

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

  47. 10/02/2014 - ORT Lyon Étape 2 :Concevoir la structure HTML5 après avoir identifié les zones> Exercice

  48. 10/02/2014 - ORT Lyon

  49. 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…

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

More Related