Mémo pour la réalisation de sites Web avec e-majine

Transcription

1 Mémo pour la réalisation de sites Web avec e-majine Pour accéder aux différentes interfaces d'administration e-majine (manage et webo-factory), vous avez un accès de type agence (premièrelettreduprénom.nom%agencedépartement - exemple : j.dupond %nomagence49). Cet identifiant donne accès à votre e-majine webo-factory et à toutes les interfaces d'administration e-majine. Il faut faire très attention à ne pas le laisser enregistré sur n'importe quel ordinateur. Il est conseillé de le régénérer à partir du webo-factory régulièrement. Les différentes étapes 1 - Réalisation d'un projet avec le webo-factory 2 - Choix d'une ergonomie 3 - Adaptation du projet et demande d'installation 4 - Création d'une charte graphique 5 - Insertion d'un minimum de contenu avec e-majine manage 6 - Intégration graphique 7 - Insertion du contenu final 8 - Modifications de la charte graphique avec le contenu final 9 - Validation interne 10 - Validation par le client 11 - Promotion et référencement 12 - Formation du client 1. Réalisation d'un projet avec le webo-factory Il est essentiel de se connecter au factory ( pour y commencer un nouveau projet. La création du nouveau projet vous permettra de sélectionner les éléments nécessaires, répondant aux besoins de votre client. Vous obtiendrez ainsi le devis de la partie technique. 1

2 2. Choix d'une ergonomie Dès que les fonctionnalités du site sont arrêtées, il convient de définir l'ergonomie du site. Définir une ergonomie consiste à : Savoir où vont se placer tous les éléments sur notre page. Définir la façon dont va s'afficher le menu (fixe, déroulant, en haut, à gauche...). Cela signifie aussi que l'arborescence du site doit être pensée à ce moment. Est-ce que notre site va avoir beaucoup de contenu, avec des pages plutôt longues ou est-ce qu'il sera plus graphique? Cela va avoir une incidence sur l'ergonomie, site fixe et centré ou mise en page liquide, etc... Faciliter la navigation aux utilisateurs. Permettre aux utilisateurs, quelque soit leur profil (âge, origine, culture...) d'accéder de la même façon à l'information. Accéder en moins de trois clics (règle qui s'est instaurée d'elle-même) à l'information recherchée. Savoir, dès la page d'accueil, quel est le contenu du site et ce que l'on va pouvoir y trouver. Attention, une ergonomie n'est pas une charte graphique, elle doit être beaucoup plus schématique que le rendu final du site. Toutefois, cela n'empêche pas de montrer au client quelques ébauches graphiques du site. 1. Adaptation du projet et demande d'installation Suivant l'ergonomie du site et ses fonctionnalités, le projet e-majine pourra être paramétré. Il vous reste ensuite à demander l'installation du site e-majine. Celle-ci sera effectuée sous 16 heures ouvrées. 2

3 2. Création d'une charte graphique Nous n'avons pas la prétention de vous apprendre à faire une charte graphique, mais de vous rappeler les étapes qui nous semblent essentielles. Avant tout, ce qu'il faut définir, c'est à quel public est destiné le site? Quel niveau d'accessibilité devra être respecté? Quel poids d'image vais-je autoriser? Quels sont les types de médias que je vais insérer dans ma charte, avec ou sans flash, etc... Lorsqu'on crée une charte graphique pour un site internet administrable, quelques questions supplémentaires sont à se poser, car qui dit site administrable, dit contenu modifiable. Si un élément n'est pas présent lors de la livraison du site au client, ce dernier pourra toujours le rajouter ultérieurement. Par exemple, dans la cas où la charte graphique présente un menu avec des images de fond (et non des aplats de couleurs) derrière chaque item du menu, si le futur administrateur du site ajoute un nouvel item de menu plus long que les autres, comment cela s'affichera t-il si cet item s'écrit sur deux lignes? Si l'administrateur ne met pas d'image à son actualité alors que dans la charte, celle-ci était prévu - quidd de la mise en page - le texte va s'étendre sur toute la largeur ou bien, va t-il rester dans la configuration prévue avec une photo (décalé sur la gauche si la photo se trouve à gauche normalement)? Si tous les items de menu sont positionnés en arc de cercle, où se positionnera l'item suivant si l'administrateur du site décide de rajouter une nouvelle rubrique dans le menu? 3. Insertion d'un minimum de contenu avec e-majine manage Avant la phase d'intégration graphique du site, il est intéressant d'y mettre un minimum de contenu : création de l'arborescence, création de différentes ressources, mise en place des outils. Intégrer graphiquement le site sans contenu est très difficile, c'est pourquoi cette phase est indispensable. Cette étape peut être remplacée par l'insertion du contenu final du site. Il est important de tester plus de contenu que ce qui est prévu, car il faut envisager que le site va évoluer après sa livraison. Prévoyez-donc un maximum de cas de figure (par exemple : comment s'affiche une 3

4 actualité avec une photo, sans photo, avec très peu de texte et une photo, avec beaucoup de texte? etc.). 4. Intégration graphique Dès que le site dispose de ce minimum de contenu, la phase d'intégration graphique va pouvoir commencer. L'intégration graphique se réalise généralement en plusieurs étapes : Découpe et optimisation des images pour le web. Transfert des images et des médias sur le serveur. Mise en place des CSS. Dans un premier temps, nous allons tâcher d'obtenir le meilleur résultat pour les navigateurs respectueux des standards. Les compatibilités avec IE seront vues par la suite. Pour la mise en place des CSS, occupez-vous tout d'abord du positionnement des blocs de contenu afin d'obtenir l'ergonomie voulue. Donnez ensuite les couleurs/images de fond de ces différents blocs de contenu. Mise en place des éléments de navigation (réalisation de scripts dans le cas d'un menu déroulant). Mise en page de tous les types de contenu (balises XHTML, formulaires, méthodes de publications). Enfin, une étape de validation sur les différents navigateurs. C'est lors de la phase d'intégration graphique du site que nous vous conseillons de faire examiner les pages du site par les validateurs CSS et XHTML du W3C. 4

5 1. Insertion du contenu final Insertion du contenu textuel et visuel fourni par le client, ou bien rédaction du contenu par l'agence. 2. Modifications de la charte graphique avec le contenu final Il est fort probable qu'avec le contenu final du site, vous ayez besoin d'affiner l'intégration du site. Vérifiez une dernière fois l'affichage et le comportement de votre intégration sur différents systèmes d'exploitation (Windows, Macintosh, etc.) et sur différents navigateurs (Firefox, Safari, Internet Explorer Windows, etc.). 3. Validation interne Il est important qu'une personne extérieure au projet donne ses impressions et que le site ne soit pas validé par la seule personne ayant travaillée dessus. 4. Validation par le client C'est maintenant au tour du client de valider l'aspect graphique et le contenu du site. Vous pouvez formaliser cette étape par la signature d'une recette. 5. Promotion et référencement Dès que le site est validé par le client, il est nécessaire de le faire connaître. Pour faire du site, un site visible et connu sur la toile et donc avoir une présence satisfaisante, plusieurs points doivent être pris en compte pour le référencement : Un code propre (valide XHTML et CSS, sémantiquement correct : bonne imbrication des balises XHTML). Des textes «écrits pour le web» avec une présence importante de mots-clés, de liens internes et explicites. Des éléments structurels optimisés (urls contenant des mots-clés, titres de pages explicites avec des mots-clés, balises de mots-clés et de descriptions de sites différenciées pour chaque rubrique, balises méta remplies, fichier robots.txt). Ensuite, pour la promotion du site, vous allez pouvoir vous aider de : Campagnes de mailing L'achat de mots-clés Liens de partenariat Campagnes de publicité Inscription dans des annuaires de site 1. Formation du client A votre tour de former votre client à son interface d'administration e-majine. 5