Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Projet web : lexique et notions

4,273 views

Published on

Published in: Technology

Projet web : lexique et notions

  1. 1. Stratégies de projet web<br />18/10/2011<br />Sabrina ECHAPPE<br />1<br />
  2. 2. Le projet Web<br />18/10/2011<br />Outil qui concourt à l'atteinte d'objectifs stratégiques. <br />permet la compétitivité de la structure <br />répond efficacement aux besoins des utilisateurs.<br />Complexité des projets Web = périmètre fonctionnel et technique en constante évolution.<br />De la simple page HTML, au progiciel ou système d’information passerelle<br />Sabrina ECHAPPE<br />2<br />
  3. 3. La conception d’un site Web<br />C’est une démarche participative, « brainstorming » <br />Centrée sur l'utilisateur <br />Gros projets = avis d’un panel représentatif d'usagers, <br />Imaginer les besoins, puis les contextes d'utilisation. <br />Les besoins de l'organisation, correspondant à une stratégie d'objectifs ; <br />Les besoins des utilisateurs, correspondant à une stratégie de cible. <br />18/10/2011<br />3<br />
  4. 4. Stratégie d'objectifs<br />Récapituler les objectifs du site web<br />Voir en quoi le site web va permettre à l'organisation de remplir ses propres objectifs stratégiques. <br />Les objectifs doivent être quantifiables, faisables et opérationnels.<br />Exemples d’objectifs ?<br />Quels impacts déjà lors de la conceptualisation du site ?<br />18/10/2011<br />4<br />
  5. 5. Stratégie de cibles<br />Cibler des profils types <br />Adapter l'information<br />Adapter les ambiances graphiques<br />Prioriser certains messages<br />Déterminer leurs principales questions et le type de réponse attendue. <br />Interview des clients<br />Sondage<br />Question ouverte à commentaire (blog, facebook, twitter) <br />18/10/2011<br />5<br />
  6. 6. BenchmarkingBenchquoi ?<br />En français référenciation, ou étalonnage<br />Technique de marketing (mercatique) qui consiste à analyser les techniques de gestion, les modes d'organisation des autres entreprises afin de s'en inspirer et d'en retirer le meilleur.<br />Veille, recherche, analyse comparative, adaptation pour améliorer la performance.<br />18/10/2011<br />6<br />
  7. 7. La veille concurrentielleet le benchmarking<br />Consiste à déterminer les principaux concurrents du site web <br />analysez comment ils répondent à leur clientèle <br />Quelles sont éventuellement leurs lacunes afin de proposer un service qui les comble<br />dresser un panorama de l'offre existante et du besoin à satisfaire<br />Proposer une plus-value aux visiteurs, pour atteindre un objectif de positionnement<br />18/10/2011<br />7<br />
  8. 8. Positionnement (marketing)<br />Choix d'attributs procurant à des offres une position:<br />crédible, <br />différente <br />attrayante <br />…au sein d’un marché et dans l’esprit des clients.<br />Dans le cadre de la stratégie marketing, les attributs sont de l'ordre de la communication,<br />L'image de marque d'une offre ou d'une entreprise n'est pas toujours associée au positionnement voulu par la stratégie.<br />18/10/2011<br />8<br />
  9. 9. Faisabilité<br />Réflexion préalable en terme de budget et de temps. <br />Être pensé sur le long terme<br />moyens prévisionnés pour créer le site<br /> mais aussi pour le maintenir et l'actualiser. <br />Un site non mis à jour est un site mort (Google)<br />Image de marque ternie (Internaute)<br />Prioriser les ambitions initiales pour être dans le budget et les délais. <br />18/10/2011<br />9<br />
  10. 10. Le cahier des charges<br />Document contractuel synthétique permettant au maître d'ouvrage (client) de définir ses besoins auprès du maître d'œuvre (prestataire). <br />Même si la réalisation du site se fait en interne, il est toujours utile de rédiger un cahier des charges, même court, afin de formaliser ses idées.<br />18/10/2011<br />10<br />
  11. 11. La planification<br />Répertorier les personnes travaillant sur le projet de site web, <br />répartir les tâches selon les compétences <br />établir un planning pour chacune d'entre elles. <br />On peut utiliser un diagramme de Gantt<br />chiffrer globalement le projet en calculant le temps passé par chaque personne et en le multipliant par leur coût horaire (ou journalier). <br />18/10/2011<br />11<br />
  12. 12. Les métiers du Web<br />Directeur de projet<br />Chef de projet technique<br />Rédacteur ou responsable de publication <br />Web journaliste<br />Développeur (programmeur)<br />Directeur artistique<br />Infographiste<br />Webdesigner (parfois maquettiste)<br />Intégrateur HTML<br />Ergonome<br />Administrateur réseau<br />Animateur web (= community manager)<br />18/10/2011<br />12<br />
  13. 13. L’arborescence : étape clé d’un projet Web<br />18/10/2011<br />13<br />Sabrina ECHAPPE<br />
  14. 14. Un peu de rangement…<br />"Je ne trouve rien sur ce site", <br />"je suis perdu", <br />« Où est-ce que je peux trouver cela ? »<br />aucune structuration sérieuse des contenus n'a été faite<br />Info mal rangée = info supposée inexistante<br />risque important d’abandon et de surf sur un site concurrent !!!<br />18/10/2011<br />14<br />
  15. 15. Rechercher et rassembler les contenus<br />Il faut penser à tout, ne rien oublier<br />Il faut se mettre à la place du client (empathie)<br />« est-ce intéressant pour les internautes ? »<br />« mes visiteurs ont-ils besoin de savoir ça ? »<br /> Lister les informations pour soi est une erreur : c'est le meilleur moyen de présenter des contenus inintéressants pour l'utilisateur. <br />La fameuse page « mon histoire »<br />18/10/2011<br />15<br />
  16. 16. Classer les contenus par catégories<br />Classer les éléments dans des catégories : <br />ranger ensemble ce qui se ressemble, <br />séparer ce qui est différent. <br />Cette organisation est faite pour simplifier les choses.<br />Prévoir les actions et cerner le comportement des internautes, <br />Comprendre comment ils vont aller chercher l'information en fonction de leurs besoins.<br />18/10/2011<br />16<br />
  17. 17. Critères de regroupement<br />Alphabétique<br />Chronologique<br />Géographique<br />Thématique<br />Par tâches utilisateur<br />Par cible utilisateur<br />18/10/2011<br />17<br />
  18. 18. L’arborescence (ou plan de site)<br />18/10/2011<br />18<br />
  19. 19. Navigation vs arborescence<br />L'arborescence traite théoriquement de la manière dont les pages sont organisées<br />La première page étant toujours la page d’accueil<br />La problématique de navigation intervient après l'arborescence <br />La navigation désigne la façon dont on accède aux rubriques.<br />Elle est étroitement liée à l’ergonomie de l’interface<br />Elle est facilitée par les mises en valeur visuelles du design<br />Par exemple, la page d'accueil peut accueillir un gros diaporama qui met en avant certaines parties, également accessibles par le menu principal.<br />18/10/2011<br />19<br />
  20. 20. 4 rôles de la navigation<br />se faire immédiatement une idée du contenu du site, de la fraîcheur des informations contenues<br />parvenir le plus rapidement possible au contenu recherché<br />Se souvenir de ce qui a été déjà vu<br />Connaître sa position et savoir que certaines pages n’ont pas encore été explorées.<br />18/10/2011<br />20<br />
  21. 21. Eléments de navigation<br />Les éléments de navigation permettent à l’internaute de naviguer, se repérer, revenir en arrière. <br />Différents types : <br />Le menu déroulant<br />La liste à puce (en ?)<br />Le fil d'ariane (en ?)<br />La navigation par onglets  <br />La carte du site. (en ?)<br />18/10/2011<br />21<br />
  22. 22. Ergonomie<br />L'ergonomie est l'utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) dans le but d'améliorer son environnement de travail. <br />L'utilisabilité marque l'adéquation aux capacités de l'utilisateur.<br />confort d'utilisation, consistant à réduire au maximum la fatigue physique et nerveuse. <br />sécurité, consistant à choisir des solutions adéquates pour protéger l'utilisateur ;<br />18/10/2011<br />22<br />
  23. 23. Ergonomie Web<br />Capacité d'un site web à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.<br />Principale difficulté = diversité des profils des visiteurs. <br />attentes de l'utilisateur<br />habitudes de l'utilisateur<br />âge de l'utilisateur<br />équipements<br />niveau de connaissances<br />18/10/2011<br />23<br />
  24. 24. Ergonomie : les habitudes acquises<br />logo situé en haut à gauche : souvent cliquable et qui mène à la page d'accueil ; <br />une zone de navigation (menu), située à gauche et/ou en haut ; <br />Le bouton « accueil » est le premier bouton<br />Un en-tête (header) contenant le nom du site, un menu de navigation et une zone prévue pour un bandeau (graphique) ; <br />un corps de page, contenant l'essentiel de l'information ; <br />Une colonne à droite (sidebar) pour les focus, agendas, liens utiles …<br />un pied de page (footer) regroupant des informations utiles :<br />la date de mise à jour, un lien vers un formulaire de contact, un plan d'accès, coordonnées, plan de site, mentions légales, etc.<br />18/10/2011<br />24<br />
  25. 25. Elements de Webdesign<br />Reprise d’une charte graphique (logo)<br />Choix de couleurs dominantes,<br />Choix d’ambiances, d’une image de marque, <br />Choix de polices d’écritures<br />Images, photos<br />Style graphique<br />Symboles graphiques, symboles de navigation<br />18/10/2011<br />25<br />
  26. 26. Hébergement et serveurs<br />
  27. 27. Mutualized<br />I – L’hébergement<br />plusieurs sites internet sur un seul et même serveur<br />configuration déjà faite <br />offre logicielle intégrée<br />Avantages :<br />Le coût<br />Fiabilité et responsabilité juridique<br />Disponibilité technique<br />Inconvénients :<br />L’espace de stockage défini <br />Les ressources limitées<br />Installation de certains composants ou logiciels impossible<br />Utilisation de SSL difficile.<br />Une même adresse IP est partagée par des centaines ou milliers de sites web.<br />
  28. 28. Serveur dédié<br />I – L’hébergement<br />Un serveur pour un seul client<br />peut être administré à distance via le réseau Internet ou administré par l'hébergeur. <br />on parle de serveur dédié infogéré.<br />machine entièrement dédiée si le client peut gérer les fichiers sur le serveur, les applications et leurs configurations <br />serveur semi-dédié si le client a uniquement accès aux fichiers du serveur.<br />
  29. 29. Serveur virtuel<br />I – L’hébergement<br />Serveur physique partitionné en plusieurs serveurs virtuels indépendants : <br />Ils ont chacun les caractéristiques d'un serveur dédié<br />Chaque serveur peut fonctionner avec un système d'exploitation différent et redémarrer indépendamment. <br />Les acronymes VPS (Virtual Private Server) et VDS (Virtual Dedicated Server) désignent le même concept<br />bon compromis qualité / prix<br />
  30. 30. Le nom de domaine<br />I – L’hébergement<br />
  31. 31. Comment choisir ?<br />I – L’hébergement<br />Choisir un nom de domaine comportant les mots clefs importants.<br />référencement<br />Choisir un nom de domaine représentant votre marque.<br />L’internaute tappe directement dans la barre d’adresse<br />
  32. 32. Comment choisir ?<br />I – L’hébergement<br />Le « .com » est le plus répandu et est devenu presque incontournable. <br />Le « .fr » est à privilégier, notamment pour des structures institutionnelles. <br />Le dépôt d'extensions des pays étrangers (co.uk, .de, .es, .it, etc.) <br />Si le site bénéficie d'une traduction correcte, <br />voire d'un portail dédié selon les langues. <br />Pour pouvoir bénéficier d'un «.fr», <br />être identifiable sur une base de données nationale et publique<br />
  33. 33. Mentions légales (1)<br />Pour un site Internet édité par une personne morale (entreprise, association, …), la page « mentions légales » doit contenir au moins :<br />La raison sociale<br />Le siège social<br />Un numéro de téléphone<br />Il faut également préciser le nom du directeur de la publication et/ou du responsable de la rédaction (généralement le représentant légal de la structure)<br />Et s’il y a lieu : Le capital social et le numéro d’inscription au registre du commerce et des sociétés (RCS ).<br />18/10/2011<br />33<br />
  34. 34. Mentions légales (2)<br />blog ou site édité à titre personnel, vous êtes également soumis à la publication de « mentions légales » :<br />Nom<br />Prénoms<br />Adresse du domicile<br />Numéro de téléphone<br />Pour les personnes physiques - uniquement - il est possible de garder son anonymat, si les coordonnées de l’éditeur ont été transmises à l’hébergeur. C’est alors lui qui sera tenu de communiquer l’information sur l’éditeur (procédure judiciaire).<br />18/10/2011<br />34<br />
  35. 35. Mentions légales (3)<br />Il faut ajouter à la page des mentions légales, pour les personnes morales et physiques, les informations relatives à l’hébergement du site (même si le site est hébergé à titre gratuit) :<br />Nom de l’hébergeur<br />Raison sociale<br />Adresse<br />Numéro de téléphone<br />Si l’hébergement se fait sur un serveur personnel, il faudra le préciser.<br />18/10/2011<br />35<br />
  36. 36. Documents propres au projet Web<br />Compte-rendu du 1er contact <br />Ou cahier des charges fonctionnel (consultation AO)<br />Devis chiffré<br />Ou réponse à la consultation : note synthétique + note d’honoraires<br />Diagramme de Gantt (Gantt Project)<br />Etude du Benchmark<br />Etude de positionnement (stratégie de com’)<br />Arborescence (Xmind ou Freemind)<br />Zoning (Illustrator)<br />Wireframe (Illustrator)<br />18/10/2011<br />36<br />
  37. 37. Documents propres au projet Web<br />Audit graphique<br />Compte-rendu de brief créatif<br />Maquette PSD : accueil et rubrique intérieure<br />Intégration : fichiers HTML, CSS et javascript<br />CMS : fichiers PHP, XML, et base de données<br />Charte éditoriale<br />Charte SEO<br />Guide d’utilisation de l’admin<br />18/10/2011<br />37<br />

×