METHODOLOGIE DE PRODUCTION D UN SITE WEB

Transcription

1 METHODOLOGIE DE PRODUCTION D UN SITE WEB LES GRANDES PHASES D UN PROJET L appel d offre Le cahier des charges

2 L APPEL D OFFRE Description de l émetteur Présentation de l entreprise son historique, sa taille (CA et nombre de salariés), Ses activités principales, Produits et services vendus. L objectif faire connaître l entreprise, vendre vos produits sur internet, donner à vos clients des conseils sur vos produits ou services, générer des contacts de nouveaux prospects.

3 Le public visé Eléments de départ et l existant : Décrivez les contenus que vous fournissez Déterminer les volumes : nombre total de pages estimées pour le site, nombre de photos et images, tailles des bases de données et des fichiers informatiques. Solutions recherchées

4 LA CONSULTATION Conditions à satisfaire au regard de la réglementation Description des critères et des modalités d attribution Pièces à fournir Indications portant sur : La durée du marché Le début des prestations Le type de marché La forme du prix Les conditions de paiement L adresse de facturation

5 LA CONSULTATION COMPLÉMENT APPORTÉS AU MARCHÉ Définition et obligations générales des parties contractuelles Caractère et éléments de la rémunération des prestations Fixation et prolongation des délais Dispositions générales pour l exécution des prestations Propriétés intellectuelle Résiliation du marché Pièces contractuelles Responsabilité assurance Variation des prix Modalités de règlement Pénalités de retard Suivi de l exécution en cours de marché Confidentialité Mesures coercitives Tribunal compétent

6 DC4 DC5 DC7

7 CAHIER DES CHARGES

8 La structure qui répond SARL GME

9 QUESTION? Internet, intranet, extranet (voir cdc spécifique)? Conception Réalisation Hébergement (nom de domaine)

10 POUR QUELLES CIBLES? Grand public Public spécialisé Quel âge? International Ordinateurs Plug in PUBLIC MATERIEL

11 POUR QUELLES FONCTIONS La fonction institutionnelle La fonction de présentation des produits ou services La fonction marchande La fonction de support client (SAV) La réduction des coûts L'ouverture internationale La collecte d'informations La création de revenus publicitaires

12 POUR QUELLE STRATEGIE? Faire connaître l entreprise (activité, produits, histoire, jeu, passion) Communiquer, informer Sources que l entreprise souhaite mettre en ligne Quels messages faire passer? Vendre un produit, un service, attirer les investisseurs.

13 LE MOT CLE bon mot clé = idée/thème/sujet = visiteurs potentiels = visiteurs satisfaits Clé du site

14 STRATEGIE DE CONCEPTION Séparation entre le contenu et la forme S'organiser méthodiquement en établissant : le plan la structure la navigation le style Travailler souplement : Un site web est en perpétuel devenir. démarrer le site modestement le faire grossir progressivement le maintenir en permanence

15 REFLECHIR Définir le contenu Pas de contenu, pas de site Classer les informations Le plan c est l organisation logique du contenu Définir la structure La structure c est l organisation pratique du contenu : Contenu, navigation, annexes Soigner la navigation La navigation c est la mise à disposition du contenu Trouver un style C est la façon de présenter le contenu

16 REALISER UN SITE Une gestion souple Un site web est un produit que l'on remanie sans cesse, parce que l'information qu'il contient évolue, parce qu'on veut en corriger les imperfections qui se révèlent à l'usage, et parce que le web est jeune et se transforme sans cesse. Une méthode de gestion de projet lourde et rigide ne convient donc pas. La situation est très différente de celle que l'on rencontre avec d'autres média (imprimé, film, CD- ROM), où il n'est plus possible d'intervenir lorsque le produit est terminé. Travail d équipe. Un site web fait intervenir des compétences - donc des personnes - diverses, et une méthode de gestion de projet s'avère nécessaire. Progressif

17 QUELLE INTERACTIVITÉ? Toute l information est-elle fournie? degré d intervention des visiteurs Vie du site. actualisation Echange avec les visiteurs (blog)

18 POUR QUELLES ANNEXES? Contacts FAQ Formulaires Commerciaux Liens web Forums Sécurité Annuaire Quizz Livre d or Blog File RSS Intranet Statistiques Base de données Interface de gestion Méta/outils (plan, moteur de recherche dans le site)

19 QUELLE ECRITURE? Pages statiques Pages dynamiques CMS CSS Flash

20 ARCHITECTURE FONCTIONNELLE Rubricage global Proposez une arborescence pour montrer l architecture du site telle que vous l imaginez. Celle-ci sera présentée sous forme schématique avec les rubriques principales, les sous-rubriques et les liens qui les unissent. ABC, Visio

21 Tout site de qualité devrait être conçu autour d une charte graphique sorte de «guide de bonne conduite» ou de «règlement intérieur» du site

22 ZONNING Le ZONNING entete menu corps Les parties vertes seront fixes dans toutes les pages du site

23 PENSER LA CHARTE GRAPHIQUE Proposez une arborescence pour montrer l architecture du site telle que vous l imaginez. Celle-ci sera présentée sous forme schématique avec les rubriques principales, les sous-rubriques et les liens qui les unissent. Logo Charte existante Propositions (3colonnes, pleine page, frames, flash) Charte graphique Fonds Eléments Navigation Le rapport esthétique / poids

24 DE L IDÉE À LA RÉALISATION

25 LE CLIMAX ou les valeurs associées Définir 5 mots représentatifs du site (à partir ou autour du mot clé)

26 LES PLANCHES DE TENDANCE Des mots Des images Des formes Des textures Des sites

27 LA TENDANCE DES ELEMENTS APPLIQUEE AUX MOTS DE REFERENCE Attributs techniques, sensoriels et sémantiques - formes - couleurs - usages - textures - valeurs - technologies (sites) Valeurs FORME COULEUR USAGE TEXTURE Technologie

28 Tests et évaluation des esquisses, images de synthèse, maquettes, LA METHODE Cahier des Charges 1. La détermination du cahier des charges du projet et des valeurs associées 2. la recherche des MOTS clés (influents) 3. La recherche d'illustrations, leur catégorisation et leur montage en planche de tendance 4. la formalisation de palettes d'attributs (couleurs, textures, formes et usages), 5. la sélection d'attributs 6. la conception d'esquisses intégrant les attributs sélectionnés

29

30 CHARTE INFORMATIQUE Langage standard (asp, php) Taille écran, nb de couleurs Type de navigateur Type de système Bases de données Exigences du client Exigence de l administrateur Création des modèles Framework Dépôt du code (logitas)

31 Cette étape est longue, ardue : certaines équipes n'y arrivent pas seules. RUBRICAGE TECHNIQUE Ce document-texte est la version détaillée du rubricage global. Il comprend : la liste complète des pages, classée de manière hiérarchique (rubrique 1 - sous-rubriques 1.1 et 1.2, soussous-rubriques à 1.1.4, X pages de contenu pour chacune), pour chaque rubrique, pour chaque page, le titre définitif et une brève description du contenu (s'il s'agit d'une refonte de site, on indique l'url de la page existante équivalente), des indications de rangement physique (nom des répertoires, sous-répertoires, nom des fichiers HTML correspondant à chaque page) (5). Si le répertoire est destiné à contenir un grand nombre de pages sur le même modèle, préciser la " politique de nommage " (par exemple, un fichier par région = region.htm), des indications de format (.html,.pdf, etc.), pour les rubriques concernées, l'indication de l'archivage de l'information caduque : oui? non? si oui : comment, où et quand? Le rubricage technique est indispensable : pour préciser intégralement la structuration de l'information (découpage du plus général au plus précis), pour déterminer la " profondeur " du site (combien de sous-niveaux nécessaires), ce qui aura une influence déterminante sur les principes de navigation nécessaires, pour vérifier qu'il n'y a pas de déséquilibre entre des rubriques maigrichonnes et d'autres replètes, pour vérifier la future coordination entre les pages, pour homogénéiser la présentation des contenus de rubrique (même nom et même type de page d'accueil de rubrique, par exemple), pour compter le nombre de pages final, pour réaliser les textes nécessaires, sans en oublier, pour réaliser les gabarits (une page par rubrique, par sous-rubrique, avec les éléments de navigation finaux), pour réaliser les pages du site (on n'aura alors plus à se soucier que de HTML), pour la compréhension du site, plus tard, lors de la mise à jour.

32 Inventaire des contenus Une feuille excel

33 Inventaire contenus suite Une grande feuille excel

34 Présentation de l inventaire des contenus chaque ligne correspond à une page Web (un contenu), chaque colonne à un indicateur et chaque onglet à un support digital (site corporate, newsletter mensuelle, promosite A., promosite B.). Quant aux indicateurs courants, les voici: L ID de la page Web (son numéro d identification tel qu utilisé également dans d autres documents éditoriaux, dont l arborescence). Le nom de la page L URL de la page Une description du contenu de la page Le/les format(s) associés à la page (hmtl, pdf, Word,.mov, etc.) Les métadonnées associées à la page Le propriétaire de la page Le validateur de la page La date de livraison de la page La date de dernière mise à jour Le statut de la page L emplacement source du contenu de la page (sur le réseau par exemple: w/web/marketing/services/new_content) La fréquence de mise à jour La date prévue pour la prochaine mise à jour Un éventuel commentaire

35 MCD MCT merise UML représentation des données, facilement compréhensible, permettant de décrire le système d'information à l'aide d'entités. permet de définir simplement ce qui doit être fait

36 PLANNING Les livrables attendus

37 LES + Le site de suivi collaboratif Les références La méthodologie L équipe de développement La propriété et le droit Langue

38 DEVIS REALISATEUR BUDGET : DROITS CONCEPTS 0,00 DEVIS TRILOG DIR. ECRITURE SOUS TOTAL 0,00 0,00 TOTAL 0,00 TECHNICIENS SALAIRE/JOUR NB/JOURS TRILOG REALISATEUR 0,00 ASS.REALISATEUR 0,00 DOCUMENTALISTE 0,00 GRAPHISTE 0,00 INFORMATICIENS 0,00 ANIMATEURS 0,00 TESTS 0,00 GRAPH 3D 0,00 PHOTOGRAPHE 0,00 CHEF OP. 0,00 ING SON 0,00 CONCEPT SON 0,00 TOTAL 0,00 0,00 TOTAL TTC 0,00 POST.PRODUCTION SALAIRE/JOUR NB/JOURS TRILOG

39 MAQUETTE

40 MAINTENANCE Mettre à jour l existant Nouvelles rubriques Nouvelles technologies Formation Mise à jour PRESTATION : extérieure, externe ou interne

41 QUI FAIT LA PROMOTION LE REFERENCEMENT? MARKETING DE POSITIONNEMENT MARKETING DE REFERENCEMENT Moteurs de recherche Informations diverses Offres d échange de liens

42 Attente

43 CONTRATS SYNOPSIS SCENARIO SCENARIMAGES

44 LANCEMENT DU PROJET Constitution de l équipe Concepteur, graphistes, programmeurs Rédacteur, designer, animateur, flasheur, vidéaste Partage du travail

45 Procédure DEPOT DU NOM DE DOMAINE

46 COLLECTE DES DONNEES Grille de collecte Eléments nécessaires à la maquette Validation

47 CHARTE GRAPHIQUE Les références commanditaires Réalisation, mise en place, tests

48 PROGRAMMATION ARBORESCENCE Charte de nommage, éléments du serveur Le code, le code, le code, le code Validation

49 PROGRAMMATION HTML ou autre Insertion des images, photos, graphiques etc Simulation des formulaires, catalogues, commandes

50 RECETTE MAQUETTE Mise en ligne sur serveur test Avancement des travaux du site Rectification et validation

51 PROGRAMMATION Développement massif des pages Développement des outils spécifiques

52 INSTALLATION ET TESTS Fourniture des sources Installation logiciels, puis site

53 STANDARDS DU WEB Développement et maintenance simplifiés : l'utilisation d'un code sémantique et structuré rend la lecture du code, produit par quelqu'un d'autre, beaucoup plus aisée. Compatibilité avec les futurs navigateurs Web : en utilisant un balisage standard, vous diminuez le risque que votre document ne soit plus lisible par les futurs navigateurs Web. Téléchargement et rendu de votre page plus rapide : moins de code HTML. Ce sont des fichiers plus petits et des téléchargements plus rapides. Les navigateurs Web modernes affichent plus vite des pages conformes aux standards que des pages invalides. Meilleure accessibilité : avec le HTML sémantique - où la structure est clairement séparée de la présentation - les lecteurs d'écran et autres navigateurs alternatifs interprètent mieux les pages Web. Meilleur positionnement dans les moteurs de recherche : la séparation de la présentation et du contenu augmente la part de ce dernier dans le poids total de la page. Combinée avec l'utilisation d'un balisage sémantique, elle améliorera le positionnement de votre page dans les moteurs de recherche. Adaptation simplifiée : un document sémantique peut être facilement optimisé pour l'impression ou des navigateurs alternatifs, tels que les PDA ou les téléphones mobiles, en spécifiant simplement une feuille de style différente. Vous pouvez également faire des changements dans la présentation de votre site tout entier en éditant un seul fichier

54 WEBDESIGN La conception graphique est une affaire de communication : un design réussi transmet à l observateur un message que les mots seuls ne pouraraient pas véhiculer. Le design est capable d évoquer une atmosphère et une émotion, de donner le ton et d induire une réaction

55

56

57

58