Projet web : lexique et notions

3 980 vues

Publié le

Publié dans : Technologie
1 commentaire
4 j’aime
Statistiques
Remarques
  • Excellente présentation Sabrina!
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
3 980
Sur SlideShare
0
Issues des intégrations
0
Intégrations
836
Actions
Partages
0
Téléchargements
0
Commentaires
1
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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 />

×