Carnet de recommandations Agence Faire Play

Carnet de recommandations Agence Faire Play

Sommaire Remerciements I. RAPPEL a. Le contexte b. Les acteurs c. Les cibles d. Les objectifs e. Les contenus f. Les contraintes g. Les délais II. ANALYSE a. Le contenu b. L analyse concurrentielle c. L analyse technique d. Les objectifs e. Lescibles III. LE PROJET a. Le lancement b. Le contenu c. L arborescence d. L interface d accueil e. Charte Graphique f. La navigation g. Les spécifications fonctionnelles h. Les spécifications techniques i. Repartition du temps j. Le retro-planning k. Le budget IV. ANNEXES a. L'accessibilité b. Le tableau CMS c. L'avenant d. La charte graphique e. Le cahier de réunion f. Le livret d'accueil g. La signature avec le client

Remerciements : Tous d'abord, nous souhaitons remerciés notre client, le club CSSHB, pour sa confiance et sa participation à ce projet. Merci à Laurence Pédard, présidente du club, et Eric Cimelli, joueur à l'origine de la section handisport, pour le temps qu'ils ont consacré à notre projet. Nous remercions également l'équipe pédagogique et l'iut de Bobigny qui nous ont soutenu tout au long de cette année scolaire et qui nous ont permis de mener ce projet à terme. Enfin, nous remercions tout particulièrement notre tuteur, monsieur Benchenna, qui nous a beaucoup aidé, ainsi que monsieur Seror, monsieur Roblin et madame Grandpierre qui ont été à l'écoute de nos besoins.

I. RAPPEL Nous allons commencer par vous faire un bref rappel du contenu déjà présent dans notre cahier des charges, afin de vous permettre de situer davantage la situation dans laquelle nous sommes. A. LE CONTEXTE Notre client est une association de handball constituée d une partie handball pour personnes valides et d une partie handisport. Dans la section handisport, les joueurs peuvent être valides ou avoir un handicap. Notre projet se centralise sur la section handisport qui s appelle Handi-Hand. Néanmoins, nous parlerons du club de handball car la partie handisport ne pourrait pas exister si le club n était pas existant. La section Handi-Hand est nouvelle dans ce club puisqu elle a été ouverte en septembre 2008. L association souhaite faire de la communication pour promouvoir le Handi-Hand en direction des personnes en situation de handicap ainsi que les valides, trouver de nouveaux joueurs pour l'équipe, avoir du soutien de la part de sponsors et recenser les pratiques existantes et les mettre en valeur. B. LES ACTEURS Notre projet fait intervenir trois groupes d acteurs : Les clients : Laurence Pédard, la présidente de l association et Éric Cimelli, joueur. (Éric est à l origine de la section Handi-Hand.) L équipe pédagogique qui est constituée de professeurs comme M. Seror, M. Roblin, Mme Grandpierre ; ainsi que d un tuteur de projet, M. Benchenna. L agence de communication: Faire Play (http://faireplay.free.fr), agence spécialisée dans la communication du sport : Chef de projet et développeur : Fanny Développeur : Thomas Graphistes : Arounie et Lucile

C. LES CIBLES La cible principale est constituée de personnes souhaitant connaître le Handi-Hand ou avoir plus d informations sur ce sport. La seconde cible est composée de plusieurs groupes de personne. Le premier groupe est les personnes voulant pratiquer le Handi-Hand dans le club CSSHB. Le deuxième groupe est les personnes voulant pratiquer le Handi-Hand mais étant loin du club CSSHB. Ce groupe sera redirigé vers des clubs plus proches de chez eux. Le troisième groupe est les sponsors éventuels qui souhaitent soutenir la partie handisport du club de handball. Les cibles institutionnelles seront les partenaires, l association des «bouchons d amour» qui pourra subventionner l achat de fauteuils ou autres et également la possibilité d avoir le soutien de collectivités territoriales, régionales ou départementales. D. LES OBJECTIFS L association a besoin d une identité visuelle pour affirmer son sérieux et sa qualité, mais aussi pour être plus attractive face aux autres associations. Les valeurs à communiquer sont le but non-lucratif, la qualité et le sérieux. Nous voulons permettre à l association de se faire connaître vis-à-vis des utilisateurs, mais aussi des sponsors qui pourraient les aider. Leur permettre également une administration ultérieure simple de leur site internet grâce un CMS.

E. LES CONTENUS E.1. L'existant : un logo un Skyblog : http://handihand.skyrock.com. Il est mis à jour régulièrement. Il y a des photos et des informations sur le club partie Handisport. Des photographies Des vidéos E.2. Les contenus : Les contenus sont à faire pour la plupart. Les contenus existants ne sont pas exploitables pour le site. Ils seront fais par le chef de projet et validés par le client.

F. LES CONTRAINTES Les contraintes techniques : - Gestion des statistiques - Système d exploitation : Windows avec Internet Explorer 6 et 7 - Ordinateur : station de travail, personnel. - Écran : 800 pixels de large : le site doit pouvoir s adapter à n importe quelle taille et résolution d écran. - Performances : Les fichiers doivent être faciles d accès. Leur taille ne doit pas excéder 600 Mo, afin de limiter les temps de téléchargement. - La mise à jour du site doit être simple, afin que les personnes qui gèrent l association puissent la faire régulièrement, sans l aide d un webmaster. C est pourquoi un CMS va être utilisé, pour rendre cette mise à jour la plus simple possible. Une analyse de plusieurs CMS a été effectuée ci-après, afin de choisir le CMS que l on utilise. - Interactivité avec l utilisateur : le site permettra d envoyer des mails à un contact par formulaire, de s inscrire à une newsletter, d envoyer des pages par flux RSS. Il y aura aussi un moteur de recherche qui permettra de trouver directement une information ou un document. - Le site doit être très bien référencé, afin que les moteurs de recherches le trouvent avec les mots Handisport, Handi-hand, Handicap. Puisqu il s agit d un portail, il faut que n importe qui faisant une recherche sur le sujet trouve le site en première position. - Le site doit être accessible à toute personne handicapée souhaitent le consulter. Les normes d accessibilités ont étudiées ci-après. Contraintes graphiques : - Il faut suivre la charte graphique sur chaque page, afin que l utilisateur ne se perde pas dans le site. - La têtière est la principale zone d identification du site, elle devra être présente sur chacune des pages pour que l utilisateur repère qu il est toujours dans le site, bien qu il ait changé de page. La têtière sera d une hauteur suffisamment importante pour permettre à la fois de rendre la première page plus accueillante, et de donner une visibilité maximale au titre. Une photo en page d accueil est une bonne solution pour dynamiser le site et rendre attractive la page d accueil. Le logo de l association sera cliquable et permettra de revenir directement sur la page d accueil du site. Contraintes financières : L association n a pas de budget, c est pourquoi le projet se fera grâce au bénévolat.

G. LES RISQUES D autres clubs qui pourraient créer des sections Handisports et vouloir devenir un portail de référence. La démotivation d une personne de notre équipe. Le cycle d alternance implique que les membres de l agence ne se voient pas beaucoup. Il y aura donc des difficultés pour les prises de rendez-vous. La communication est donc indispensable entre les membres de l agence. Le projet peut ne pas plaire au client. C est pour cela que la communication avec le client doit être constante tout au long du projet. Il faudra lui montrer l évolution du travail au fur et à mesure pour qu il puisse donner son avis. H. LES DELAIS La communication doit être terminée pour le 10 juin 2009 (date de la soutenance du projet). Voir le planning de travail de l agence en annexe Étape 1 : Recherche de la problématique. Analyse de la concurrence. Réalisation du cahier des charges. Obtention des contenus. Arborescence à concevoir. Étape 2 : Recherche du CMS le plus probable pour ce projet. Étape 3 : Recherches et conception de la charte graphique. Étape 4 : Mise au point du site Internet : intégration des contenus, design. Mise au point de la communication : Flyers, Affiches

II. ANALYSES Nous avons réalisé des analyses afin de mieux comprendre les problèmes que l on pourrait être amené à rencontrer. Ces analyses nous permettront ainsi de ne pas refaire les erreurs commises dans d autres sites et de voir les outils utiles lors du développement de notre site. A. LE CONTENU Le contenu sera fait par notre agence. Les contenus donnés par le client ne sont pas assez rédigés. Les photographies ne sont pas non plus utilisables. Nous irons en faire lors d'un entrainement ou lors d'une manifestation. Elles seront utilisées pour le site internet, les affiches, le livret Nous serons à l'écoute du client pour toutes modifications ou informations complémentaires.

B. L ANALYSE CONCURENTIELLE B.1. Analyse sites internet : Nous avons réalisé quelques analyses de sites internet ayant pour points communs le sport, le handicap et/ou le handi-sport. Évaluation du site internet de handisport : http://www.parisjeanbouin.fr/ Degré de séduction du site Le site est attractif. Lorsque l on arrive sur la page d accueil, il y a un bandeau horizontal, légèrement animé. La photographie illustre le site. La photographie du bandeau change pour chaque rubrique du site. Lisibilité des informations Les textes sont en bleu, noir et orange sur fond blanc. Il y a 3 types de menus : un menu horizontal qui indique les principaux, un menu à gauche qui indique les sous rubriques, et un menu à droite pour les informations pratiques. Pertinence de la charte graphique La charte graphique est respectée sur toutes les pages du site. On retrouve à chaque fois le bandeau, avec les différents menus, et les couleurs sont harmonisées. Les titres sont en orange, les dates en bleu, les contenus en noir. Degré d interactivité L usager peut s identifier, il a un espace personnel dans le site. Cet accès se fait dès la page d accueil. Il y a aussi une Foire Aux Questions, un moteur de recherche, une newsletter ainsi qu une visite virtuelle du club. Public cible Personnes souhaitant faire du handisport, ou souhaitant s informer sur le sujet. Objectifs du site Faire connaître plusieurs sports pour handicapés : athlétisme, basket, rugby, tennis, mais aussi des activités telles que le bridge. Le site donne aussi des informations concernant les évènements, les écoles de handisport, les résultats. Charte Graphique Informations hiérarchisées par un code couleurs. On différencie au premier coup d œil les onglets et les contenus. Les objectifs sont-ils atteints?, site très complet qui donne un grand nombre d informations sur plusieurs sports et activités pour handicapés. Page d accueil La page d accueil présente les actualités des différentes rubriques, ainsi que les derniers résultats des tournois. Elle permet l identification des membres, et annonce l ergonomie du site (menus, bandeau)

Navigation La navigation se fait par les trois menus. Dans le menu de gauche, on trouve des informations concernant le club, alors que dans le menu horizontal, on trouve les différentes sections du club, qui vont apporter un menu spécifique dans la page. Le menu de droite sert à chercher des informations complémentaires. Ergonomie Le site est composé d un bandeau vertical invariant dans chaque page, de deux menus aussi invariants. Le texte est donc inséré entre les deux bandeaux verticaux : dans la page d accueil sur plusieurs colonnes, et sur les autres pages sur une seule colonne, en lecture horizontale. Graphisme Recherche graphique sur le bandeau horizontal, avec une animation dans la page d accueil. Contenu Contenu riche Instruments de fidélisation Zone membre, newsletter.

Évaluation du site internet de handisport basket féminin français: http://www.handibasket-feminin.fr/site%20public/index.php Degré de séduction du site Le site séduit à premier abord par son aspect clair et peu agressif : bleu et blanc. Cependant, au fur à et mesure de la navigation, on est agacé par le manque de page valide lorsque l on clique sur certains liens. Lisibilité des informations La lisibilité est très correcte : écriture noire sur fond blanc et les titres en blanc sur fond bleu foncé. Pertinence de la charte graphique Le bleu est souvent utilisé dans les sites internet sportifs car il représente le dynamisme et la pureté. Degré d interactivité L interactivité est bonne. Les utilisateurs peuvent commenter les news, ainsi que certains articles. Ils peuvent s inscrire à une newsletter pour recevoir des informations du site internet. Ils peuvent également participer au forum mis à leur disposition ou encore participer aux sondages sur la page d accueil. De plus, dans la partie liens, les utilisateurs peuvent rajouter un site internet eux-mêmes dans l annuaire mis à leur disposition. Dysfonctionnements Des pages ne fonctionnent pas. Les liens ramènent vers des pages vides de contenu. Par exemple la page «Les Bleues», «Handibasket» ou encore «Contacts» qui sont tout de même des pages importantes. Public cible Le public ciblé concerne les personnes handicapées du haut ou du bas du corps, et ne pouvant pas pratiquer de basket ou autre sport de façon «normale». Toute personne handicapée souhaitant ainsi jouer au basket. Objectifs du site Faire connaître le handibasket, parler des matchs et des stages réalisés, des résultats, des prochaines rencontres. Et faire aussi participer les membres du site à l aide entre autres de sondages et d un forum. Charte éditoriale La charte éditoriale est moyenne. Pour ce qui est du règlement, l écriture est correcte, mais dans le forum ou même dans la description des photographies, il n y a pas toujours de phrases. Pire, sur certaines descriptions photos, on trouve un charabia du genre «gdfhhjhgjghj». Charte Graphique La charte graphique est composée en grande partie de bleu et de blanc. Du noir est utilisé pour les textes et le gros titre «Site du handibasket féminin français» en haut du site internet. Il ne possède pas vraiment de logo, seul le pictogramme d une personne handicapée est présent sur tout le site en haut à gauche. Le menu n est pas très recherché, des images de handi-basket pour liens.

Les objectifs sont-ils atteints? On ne dirait pas. Le site ne semble pas très bien mis à jour, et les participants sont rares. On peut le remarquer dans le forum et dans l annuaire présent dans la partie liens. Remarques Le site est propre mais pas assez professionnel et attirant pour un site internet censé représenter le handi-basket féminin français. On voit qu il n est très bien entretenu. Page d accueil La page d accueil présente les dernières actualités. Sur la gauche se trouve un calendrier des événements passés et à venir, un sondage et l inscription à la newsletter du site internet. Navigation La navigation se passe par le biais des deux menus situés en haut du site internet. Nous avons six onglets sous forme de liens, et 5 sous formes d images. On se pose la question sur le pourquoi de ce changement? Ergonomie L ergonomie du site n est pas trop mal pensée, avec les menus en haut, c est assez simple mais clair. On s y retrouve bien dans le site. Graphisme Le graphisme est très simple, pas vraiment recherché. Il est clair mais ressemble à un site d amateur. Contenu Le contenu est très léger. A part le règlement, le contenu n est pas beaucoup développé, et même assez négligé. Instruments de fidélisation La newsletter, et également le forum. Moyens d incitation à la visite Le calendrier des évènements, les actualités et les photos, ainsi que le forum.

Évaluation du site internet de judo handisport: http://www.judohandisport.com/default.asp Degré de séduction du site Ce site internet séduit de suite. Le design est recherché, propre et beau. Lisibilité des informations La lisibilité est très correcte : écriture noire sur fond blanc et les titres en bleu foncé. Pertinence de la charte graphique Le bleu est utilisé au niveau du logo, ce qui est pertinent étant donné que le bleu est souvent utilisé pour symboliser le sport. Nous retrouvons sinon beaucoup de blanc et de gris foncé, qui peut faire penser au judo de part le kimono et la ceinture de couleur. Degré d interactivité L interactivité est très bonne. Il y a une newsletter, un forum, mais également un formulaire de contact, une fonction de recherche sur le site Dysfonctionnements Le forum est actuellement en cours de migration, il ne fonctionne donc pas. Le design a également un petit souci, car il ne s adapte pas à toutes les résolutions d écran, auquel cas, un ascenseur gênant apparaît horizontalement. La partie «échos des régions» et «les clubs» ne marchent pas non plus : elles sont vides. Sur la page «les athlètes de l équipe de France», les menus sont tous décalés. Public cible Le public ciblé concerne les personnes ayant un handicap visuel, auditif ou physique et souhaitant jouer au judo au sein de la Fédération Française Handisport. Objectifs du site Mettre au courant les personnes des actualités des stages/championnats de handi-judo, donner des informations sur le handi-judo et la fédération française de handisport, rassembler des joueurs sur ce site. Charte éditoriale La charte éditoriale est bonne. Il n y a pas de fautes d orthographe et le style est fluide et facile à lire. Charte Graphique La charte graphique est composée en grande partie de gris foncé et de blanc. On retrouve des touches de bleu pour le logo et les titres et des touches d orange sur quelques aspects du site pour montrer le dynamisme du judo. En plus de la bannière flash en header, il y a également un dojo japonais gris foncé, pour montrer d où vient l origine du judo. Nous avons aussi un gif sur le côté gauche représentant une prise de judo et permettant de retourner en haut.

Moyens techniques et humains Nous ne savons pas exactement qui est derrière ce site internet mais nous savons que c est une réalisation d une agence de communication : LA LANGUE DU CAMELEON www.cameleons.com. Les objectifs sont-ils atteints? Parfaitement. Le site est vraiment réussi : graphiquement, au niveau du contenu et aussi au niveau de l interactivité. Malgré quelques dysfonctionnements, c est un bon site. Remarques Le site est très bien réussi, il a un beau design est fait professionnel. On voit que c est un site sérieux et qui est bien suivi et entretenu. Page d accueil La page d accueil présente l édito avec une brève présentation du site internet, les nouveautés ainsi que le calendrier des événements. Navigation La navigation s effectue par le biais d un menu javascript animé et coulissant verticalement. Ergonomie L ergonomie du site internet est bonne. On s y retrouve très bien. De plus, si quelqu un se perd ou cherche une information en particulier, il existe un plan du site accessible sur chaque page, au niveau du footer. Graphisme Le graphisme est recherché et propre. Il a été réalisé par une agence de communication. On retrouve bien l univers du judo, mais également japonais avec le petit dojo sur la bannière du haut. Contenu Le contenu est pertinent et bien écrit. Agréable à lire. Instruments de fidélisation La newsletter, et également le forum. Moyens d incitation à la visite Le calendrier des évènements, les actualités et les photos, ainsi que le forum.

Conclusion : Le site de Handi-Hand devra avoir les caractéristiques suivantes pour ne pas répéter les erreurs des sites analysés. Il devra être attractif : il sera constitué d un forum, d un calendrier et d'actualités mises à jour régulièrement. Le site fidélisera ces internautes avec une newsletter. L'ergonomie sera simple car l'une des cibles du site sera des personnes en situation d handicap. Le graphisme sera attractif pour représenter l'univers du sport qui est le thème principal de notre projet. L orthographe sera vérifié et soigné pour montrer le sérieux du site.

B.2. Analyse Logos C oule urs : bleu et blanc Form e s : Typographie et signe T ypogr a phie : - nom entier - un mot en gras, l autre en italique - sans empatements - minuscules S oc ié t é s : S ym bolique : Fa ible sse s : Handisport annécien bleu, blanc, rouge, bleu, blanc, orange noir Typographie et signe Typographie et signe - nom entier - typo normale - sans empatements - minuscules - nom entier - typo en gras - Italique - sans empatements, mais très enguleuse - minuscules Fédération Française Comité Régionnal Handisport Handisport d Ile de France La typographie en Le symbole Les traits de contours gras évoque la graphique bleu et sont très épais, et la stabilité de rouge évoque le typographie lourde l association. dynamisme, le (elle prend une place Le dessin mouvement. aussi importante que shématique fait de l illustration) Ce logo quelques traits est en lourdeur, seul montre un certain le carré bleu en fond dynamisme de peut évoquer une l association. certaine stabilité. Logo en Typographie et dessin monochromie : peu trop lourds, ce logo ne visible. parle pas de la qualité de ce comité, mais plutôt de sa force. rouge, gris, noir rouge, dégradé gris Vert, blanc, Noir Typographie et illustration Typogramme Typographie et illustration - nom entier - nom entier typographie: - typographie: majuscules sans majuscules sans empatements empatements - nom entier de l association - Typographie : mots écrits en gras Majuscules Vert, Jaune, Rouge, Blanc Typographie et illustration - nom entier de l association - Typographie en gras, avec des lettres qui paraissent avoir étés découpées dans du papier. Club Handisport Fédération Française de Club de Handball Handisport de Claye-Souilly Club HandiSport de Claye-Souilly Le gris évoque le sérieux, la qualité. Les textes en majuscule et sans empatements la stabilité. Le gris évoque le sérieux de cette association. Le dégradé apporte du dynamisme, de même que le point du I rouge, qui dynamise le logo, et amène l attention du spectateur au centre du logo. La typographie en gras ne montre pas le sérieux de l association. La forme du logo est ovale, et n évoque pas le handball, mais pourrait plutôt évoquer un ballon de rugby. Typographie légère et stable du fait de ses couleurs et des majuscules. Stabilité, qualité et sérieux évoqués grave à la typographie et à la couleur. La typographie en gras évoque la stabilité de l association. Illustration : joueur ennoir au fond, requin en premier plan avec un ballon de Handball. Pourquoi illustrer le club avec un requin Les couleurs ne s accordent pas les unes les autres, et ne se mettent pas en valeur.

Conclusion : Le logo de la section Handi-Hand ne parait pas adapté pour une bonne communication. En effet, il ne montre pas le sérieux que l association veut montrer, du fait de ses couleurs qui ne se mettent pas en valeur les unes les autres. D après les analyses des logos précédents, nous avons pu voir quelles sont les caractéristiques qui nous seront utiles pour nos recherches de logos : Les couleurs devront se mettre en valeur les unes les autres. La typographie doit être stable, sans empâtement, pour évoquer le sérieux de l association.

B.3. L'analyse agence nom de l'agence site de l'agence type d'entreprise international Quelques références Communication Conclusion la souris verte http://www.la-souris-verte.com/ agence de communication globale non Ecole Centrale Marseille, Ateliers du Style, Groupe F, RevisAudit, La Tarasque, Derriennic Associés, Un Jour Par Fées... Conseil Identité visuelle Web et Multimédia Edition interactive one http://www.interactive-one.fr/ agence web spécialisée dans le sport non site de Amélie Mauresmo, site de Tony Parker, site de Djibril Cissé, site de Ladji Doucouré, site de Alizé Cornet, site de Jo Wilfried Tsonga, site de Sébastien Grosjean... ugocom http://www.ugocom.fr/ agence web internationalle oui Vélo attitudes, Cano Chasse, Hillary et Bill Clinton, Beaumes de Venise, Les Cordier, juge et flic, De Gaulle intime, Semaine du Cap-vert... Conseil, audit, stratégie, rédaction de cahier des charges Web design Création site internet EConception du site web (simple ou dynamique) Nom de business & e-commerce référencement domaine et services associés Hébergement du site sur un technologies hébergement formation serveur web Outil de statistiques et d analyse des visites Administration du site, sécurité et sauvegardes Référencement, suivi, conseils et campagnes de publicité en ligne Mises à jour et rédaction de contenus multimédias Prestations sur mesures La souris verte est une agence de communication globale. Elle n'a pas de spécialité principale. Elle est néanmoins basée sur la nouveauté et est très familiale. Elle n'est constitué que de 6 personnes. Cette agence est spécialisé dans le sport français. Elle est néanmoins une agence spécialisé dans la communication web. Elle construit des sites internet pour des sportifs célèbre comme Amélie Mauresmo. Cette agence de communication web est internationale. Elle n'est pas non plus spécialisé dans un domaine précis. Elle beaucoup de grosses références comme le site de Hillary et Bill Clinton.

C. L ANALYSE TECHNIQUE C.1. Le dossier Accessibilité : Les directives pour l'accessibilité aux contenus Web (V1.0). Ce document, tiré de l'analyse des directives pour l'accessibilité aux contenus Web du W3C (disponibles ici), à pour objectif de définir les points importants à mettre en œuvre afin de rendre notre projet accessible au plus grand nombre. Version française Attention! Seule la version anglaise de ces directives fait office de norme. L'objectif principal de ces recommandations est de faciliter l'accessibilité des personnes handicapées (quel que soit leur handicap) au contenu Web. De plus, prendre en compte ces directives aura pour effet d'améliorer l'accès à l'information de tous les utilisateurs, quel que soit leur navigateur, système d'exploitation, logiciel d'accès, etc... Les raisons suivantes incitent à faire du contenu web accessible : Des utilisateurs peuvent ne pas être en mesure de voir, entendre ou bouger. Ils peuvent avoir du mal à traiter certains types d'informations (couleurs, sons spécifiques, etc...) ou ne pas pouvoir les traiter du tout. Certains utilisateurs peuvent avoir des difficultés pour lire ou comprendre le texte. D'autres utilisateurs peuvent de pas avoir de clavier ou de souris, d'autres ne peuvent pas les utiliser. D'autres utilisateurs encore peuvent avoir un écran qui n'affiche que le texte, un petit écran et/ou une petite résolution ou une connexion internet lente. D'autres utilisateurs enfin peuvent avoir un système d'exploitation et/ou un logiciel de consultation ancien ou simplement différent. Suivre des directives du W3C permet de créer des pages accessibles malgré toutes les contraintes décrites ci-dessus.

Pour se faire, il faut respecter quelques points importants : Séparer la structure de la présentation. Toujours fournir du texte. Créer des pages accessibles même pour un utilisateur qui ne voit ou n'entend pas. Créer des pages accessibles quel que soit le type de matériel et de logiciel utilisé. Les trois derniers points peuvent être résumés en une idée : faire du contenu accessible et navigable. Ces points sont détaillés dans les différentes directives présentées plus bas. Ces directives justement sont classées par priorité. A chaque priorité correspond un niveau d'implication du développeur vis à vis de l'accessibilité au contenu web : La priorité 1 représente ce qui doit être fait. Si ce niveau n'est pas respecté, le contenu n'est pas considéré comme accessible. La priorité 2 représente ce qui devrait être fait. Si ce niveau n'est pas respecté, le contenu ne sera pas accessible au plus grand nombre. La priorité 3 représente ce qui pourrait être fait. Valider ce niveau permet de s'assurer de l'accessibilité du contenu à quasiment tous les utilisateurs. De ces niveaux de priorité découlent 3 niveaux de conformité aux directives pour l'accessibilité aux contenus web : Niveau de conformité "A" : Tous les points de priorité 1 sont satisfaits. Niveau de conformité "AA" : Tous les points de priorité 2 sont satisfaits. Niveau de conformité "AAA" : Tous les points de priorité 3 sont satisfaits. Voici maintenant les différentes directives qu'il faudra suivre pour rendre notre projet accessible. L'objectif étant d'obtenir le niveau AA de conformité au minimum, les directives de priorités 1 et 2 seront étudiées. Quelques directives de niveau 3 seront également exposées pour leur utilité ou leur facilité de mise en place.

C.2. Le dossier CMS : 1. Qu est qu un CMS? Un CMS (Content Management System) est un système de gestion de contenu. C est un logiciel qui sert à concevoir une application ou un site internet et de pouvoir les mettre à jour facilement. L un des principes des outils de CMS est de créer une différence entre le contenu et le contenant. Cette distinction est justifiée car nous pouvons vouloir modifier le graphisme mais en laissant le texte inchangé. Le contenu de site est mis en forme dans la charte graphique et non pas dans l éditeur de texte. Il est préférable de ne pas faire de mise en forme dans la partie texte si ce n est pour les options grasses, soulignées ou italiques. Pour l intégration de contenu, les CMS possèdent un éditeur WYSIWYG qui permet à l utilisateur de retrouver une interface semblable à celle d un éditeur de texte et d images. Il faut bien structurer chaque article afin de : - différencier le fond de la forme, - guider et améliorer la saisie, - donner un sens aux contenus comme le titre, sous titre, chapeau Chaque article est publié dans des pages. Une page peut avoir plusieurs articles et un même article peut apparaître sur différentes pages. Celles-ci sont mises en forme avec des gabarits ou des templates. Une différence entre les CMS s observe au niveau de la validation : - si elle se fait pour chaque contenu, le CMS est orienté «contenu», - si elle se fait au niveau des pages, le CMS sera orienté «pages» permettant une maîtrise graphique plus élevée de la page par le constructeur. Une ou plusieurs personnes peuvent remplir les contenus. C est pour cela que l administrateur devra attribuer des niveaux de droits (administrateur, rédacteur...) En effet, une ou plusieurs personnes peuvent créer, modifier et/ou supprimer du contenu.

Les CMS sont des centaines sur Internet mais ils ont tous des fonctionnalités qui sont plus ou moins développées. Le document en annexe (CMS.xls) nous aidera à comprendre les fonctionnalités dominantes. Les principales fonctionnalités sont : -Les conditions de système servent à déterminer le type de serveur sur lequel nous pouvons utiliser le CMS et le langage de programmation qui lui convient. Nous savons aussi grâce aux conditions de système si la licence est e (GNU GPL) ou non. -Le degré de sécurité est importante pour l utilisateur : il doit être sûr que personne ne pourra s identifier à sa place et changer le contenu de son site sans le lui l informer. Nous voyons que les niveaux de droits (administrateurs, rédacteurs ), les gestions de contenus sont présents ou non dans le CMS. -Le support utilisateur sert à savoir s il y a d autres personnes (Techniciens, développeurs, Forum ) qui pourrait nous aider à comprendre ou développer des fonctionnalités supplémentaires sur le CMS. -Les dispositifs, nous donnent les fonctions essentielles pour le choix du CMS comme la possibilité d avoir une administration en ligne ou des statistiques -L interopérabilité sert à savoir comment et pourquoi un système fonctionne avec un autre. Ici, nous voyons si le CMS est compatible avec plusieurs normes comme les supports FTP, les normes W3C et les flux RSS. -La flexibilité sert à nous renseigner sur des fonctionnalités complémentaires aux dispositifs comme le système multi-langues. -La performance, nous donne plus de précision sur les capacités techniques du CMS. -Les applications sont des fonctions du système de gestion de contenu qui sont très importantes pour se décider sur le choix d un CMS. Par exemple, si nous voulons un forum ou pas, si nous voulons avoir la possibilité de faire des sondages, des graphiques, des quiz, des calendriers -Le commerce sert lorsque l on veut faire un site web de e-commerce. Maintenant que nous avons présenté les CMS et les principales fonctionnalités qui les composent grâce au tableau que vous trouverez en annexes, nous allons reprendre les cinq CMS (Drupal, Joomla!, SPIP, ez publish, Typo3) présentés dans ce tableau et développer leur fonctionnement.

2.Descriptions des cinq CMS : 2.1. Drupal Drupal est constitué pour être un blog collectif qui comporte de multiples facettes. Il convient à tous les types de CMS autant celui pour internet que pour des applications. Drupal est un mélange entre Joomla! et ez publish. Son point fort est son extensibilité grâce à sa possibilité d ajouter de nombreux modules complémentaires et la possibilité de créer des nouveaux types de contenus de façon structurés. Drupal est entièrement prêt à l emploi. Pour l intégration de contenus, il faut rajouter un éditeur externe, simple à installer. Les types d articles ne peuvent pas être spécifiques sauf si on rajoute un module. Les articles sont de deux types : non publié et publié mais un module peut être installé pour avoir trois types : brouillon, validé et publié. Drupal est un CMS orienté validation «contenu». Drupal a la possibilité illimitée de créer des utilisateurs différents avec des droits pour chacun et permet de choisir la catégorie que l on veut attribuer aux contenus. Les gabarits sont codés en PHP. Il y a deux types d accès au site : public ou membre (Certains modules permettent d étendre ces types d accès). Drupal contrôle des flux RSS internes et externes. L analyse des statistiques de visites sur les sites ou sur des pages spécifiques se fait directement avec le CMS. Les utilisateurs peuvent avoir des informations sur le système d exploitation utilisé par le visiteur, leur temps de visite, ainsi que sur les éventuels bugs dans le site. Le moteur de recherche de Drupal permet de chercher des mots et des suites de mots grâce à plusieurs critères et de trier les résultats de la recherche. 2.2. Joomla! Joomla! est l évolution du CMS «Mambo». Ce CMS a vu le jour suite à un différent entre la société et les développeurs principaux. Il est fait pour des personnes n ayant aucune connaissance de développement. Cependant, Joomla! ne permet pas de gérer différents types de contenus et donc ne pourra pas être utilisé pour des structurations complexes. Il est entièrement prêt à l emploi. Il utilise l éditeur HTML open source TinyMCE pour l intégration de contenus qui produit une bonne qualité de code html. Les articles sont de deux types : non publié et publié. L utilisateur peut mettre une date de début et de fin à son article. Il permet d avoir trois niveaux pour les articles ou pages. Elles peuvent être : créer, modifier et publier.

Joomla! tout comme Drupal, Spip et ez publish est un CMS orienté validation «contenu». Le critère de sélection des contenus est très souple et simple. Les gabarits sont codés en PHP comme Drupal. Joomla peut cacher certaines pages ou contenus par rapport à l identification d un visiteur de type public, membre ou spécial. Ces types permettent de donner le droit d accès respectivement à tous les contenus, aux pages destinées aux utilisateurs ayant un compte et aux utilisateurs ayant un droit d édition d articles. Joomla! contrôle des flux RSS internes et externe. L analyse des statistiques de visites sur les sites ou sur des pages spécifiques se fait directement avec le CMS. Joomla! possède un moteur de recherche assez évolué. 2.3. SPIP SPIP est un CMS Open source français. Il était utilisé pour faire des sites internet personnels, mais son utilisation a changée ces dernières années. Il est employé pour beaucoup de sites professionnels et gouvernementaux. Mais il possède des milliers de références dans le monde entier. Il est très utilisé et il y une véritable activité autour de ce CMS. Plusieurs versions sont mises en ligne chaque année. Il est simple à utiliser, à déployer et à adapter. Il est limité pour les applications d entreprises mais est très adapté au monde du web. Il possède un module multi-langue. En parallèle, le gouvernement à mis en place le projet Spip-Agora afin de lui ajouter des fonctionnalités plus complexes qui ne faisaient pas partie de Spip, tel que l arborescence de mots-clés ou la personnalisation du front-office. Mais Agora est distinct de Spip, il est disponible en Open source. Spip est entièrement prêt à l emploi. Il n a pas d éditeur WYSIWYG car il a une intégration de contenu qui lui est propre avec des balises spécifiques. Toutefois, il est possible d intégrer un éditeur tel que FckEditor. Il n y a pas de différents types d articles. Ceux-ci peuvent être à cinq états différents : brouillon, validé, publié, refusé et supprimé. L utilisateur peut mettre une date de début mais pas de fin. Tous les articles sont vus par tout le monde. Spip ne permet pas d avoir une partie cachée et d avoir des articles visibles uniquement par les membres. Spip tout comme Drupal, Joomla! et ezez publish est un CMS orienté validation «contenu». Il permet d avoir deux acteurs différents : les administrateurs et les rédacteurs, ce qui permet de donner des droits différents aux deux groupes. Il peut avoir une multitude de gabarits, qui sont codés en base html et complété en php.

Le flux RSS est très bien géré en tant que RSS personnel au site mais pas du RSS extérieur. Il est très développé sur ce point. Il y a une validation des flux RSS externes. L analyse des statistiques de visites sur les sites ou sur des pages spécifiques se fait directement avec le CMS. Spip a un moteur de recherche très simple mais pas très performant. 2.4. ez publish ez publish se distingue des autres CMS open source par ses possibilités de configuration et d extension. C est un outil prêt à l emploi ou un élément que l on peut développer. C est l un de CMS les plus puissants sur les fondamentaux de la gestion de contenu. ez publish permet de créer simplement des contenus type web, comme des comptes rendus. Pour l intégration de contenus, ez publish a développé «Online editor» qui est open source. Il n est pas constitué en code html mais du code xml. Son éditeur permet d intégrer des fichiers issus de la médiathèque ez publish. Les types d articles et gabarits peuvent être différents via l interface web mais cela demandera des modifications dans l interface d administration et de restitution. ez publish est très développé pour les versions d articles. Après modification, on peut mettre une date de fin et de début d article ou plus si on le désire. ez publish tout comme Drupal, Joomla! et SpipSpip est un CMS orienté validation «contenu». La gestion des utilisateurs est divisée en trois : les groupes, les rôles et les utilisateurs. Les gabarits sont codés en html et php ainsi qu avec les fonctions de ce CMS. ez publish permet de gérer les droits de visualisation des articles en fonction de plusieurs critères. L intégration des flux RSS est très développée. On peut en intégrer dans des liens. ez publish requière un logiciel extérieur pour toutes les statistiques de visites. Le moteur de recherche est très avancé. 2.5. Typo3 Typo3 a été développé par un danois et mis en ligne fin 2000 depuis, une communauté très active travaille autour de ce CMS. Il est l un des CMS le plus développé à ce jour. Il est très finalisé et donc peu limité au niveau des compétences et du développement. L une des grandes forces de Typo3 est qu il peut s étendre avec des modules, qui ajoutent des fonctionnalités et qui ne diffèrent pas avec le code de Typo3. Typo3 est entièrement prêt à l emploi.

Pour l intégration de contenu, il possède, depuis sa version 4, un éditeur htmlarea qui ouvre la possibilité de développer avec firefox, ce qui était impossible auparavant. Cet éditeur est parfaitement intégré et personnalisable pour chaque utilisateur. Les types d articles peuvent être différents même si la création reste technique. L utilisateur peut mettre une date de début et de fin de son article. Typo3 est un CMS orienté validation «page». Une page contient une ou plusieurs colonnes et chaque colonne peut contenir un ou plusieurs articles. La gestion des utilisateurs est très complète. Typo3 a un niveau de gabarits très élevé. Les gabarits sont codés en html et complété par une configuration interactive. La visualisation des articles se fait en fonction des groupes définis par Typo3. Les flux RSS externes sont possibles mais après l installation d une extension. L analyse des statistiques de visites sur les sites ou sur des pages spécifiques se fait directement avec le CMS. Le moteur de recherche ne se contente pas de regarder dans les contenus du site mais aussi dans les pièces en téléchargement. 3. Synthèse et choix du CMS pour notre projet : Dans notre projet, nous devons avoir plusieurs fonctionnalités indispensables ainsi que des besoins : -Besoin d une licence e -Besoin de niveaux de droits non élevés -Simplicité de création de contenus -Les contenus seront des articles, des photos, des vidéos, des documents téléchargeables -Besoin d agenda, newsletter, forum -Possibilité d installer des templates -Gestion des dossiers -Statistiques -Norme W3C très importante car site orienté vers le handicap -Gestion des liens car le site sera un portail -Moteur de recherche

Après l énumération du besoin pour notre site, nous avons choisi Joomla! comme CMS pour développer notre site internet. Il a tous les critères que nous désirons et qui sont ci-dessus. Les mises à jour de version ne peuvent pas être automatiques. Un développeur devra faire la mise à jour si cela est nécessaire. Néanmoins, une refonte de site sera à prévoir plutôt que des mises à jour du logiciel. Le site pourra fonctionner correctement sans mise à jour. D. LES OBJECTIFS Les objectifs de ces analyses sont de mieux cerner les problématiques liées à notre projet. Nous avons étudié plusieurs sites internets et les techniques utilisées pour les concevoir pour ne pas refaire les même erreurs. Ces analyses nous ont aussi permis de structurer nos idées et de choisir le contenu, les modules utilisés pour fidéliser, interresser, informer nos visiteurs. Grâce à ces comparaisons, nous avons vu quels systèmes de communication, de fidélisation et de conception fonctionnent. Nous avons choisi de développer un site simple en navigation avec un graphisme clair et pratique. Ce site sera développé avec un CMS. Nous avons choisi Joomla! qui est très développé et dont la communauté est très grande. Ce CMS est simple et clair. Les modules choisis sont la newsletter pour informer nos abonnés, un forum et un agenda qui permet de dialoguer et informer. Un onglet permettra de faire de notre site un portail grâce à des liens de sites qui traitent du même sujet que nous : le Handi-Hand. Ces raisonnements nous ont permis de faire notre arborescence (voir dans la partie Projet). E. LES CIBLES La cible principale est constituée de personnes souhaitant connaître le Handi-Hand ou avoir plus d informations sur ce sport. La seconde cible est composée de plusieurs groupes de personne. Le premier groupe est les personnes voulant pratiquer le Handi-Hand dans le club CSSHB. Le deuxième groupe est les personnes voulant pratiquer le Handi-Hand mais étant loin du club CSSHB. Ce groupe sera redirigé vers des clubs plus proches de chez eux. Le troisième groupe est les sponsors éventuels qui souhaitent soutenir la partie handisport du club de handball. Les cibles institutionnelles seront les partenaires, l association des «bouchons d amour» qui pourra subventionner l achat de fauteuils ou autres et également la possibilité d avoir le soutien de collectivités territoriales, régionales ou départementales.

III. LE PROJET A. LANCEMENT Après validation du cahier des charges, nous avons choisi notre CMS qui est Joomla! suite à une analyse. Nous avons monté un dossier sur l'accessibilité car notre projet a une grande partie de nos cibles sont handicapées. Ensuite, la charte graphique a été commencée. B. LE CONTENU Les contenus ont été développé par le chef de projet grâce à des informations fournis par le client. Nous avons validés, grâce à des mails et des réunions, les contenus. Les contenus C. L ARBORESCENCE

D. L INTERFACE D ACCUEIL Sur la page d accueil, nous voulons que toutes les informations les plus importantes soient accessible de suite à l utilisateur qui se rend sur le site.

E. CHARTE GRAPHIQUE Nous voulons créer une identité propre à l association, que tout le monde la reconnaisse en un coup d œil. Un look dynamique et sportif, mais également très clair, proche des gens. Nous utiliserons du vert comme ligne directrice, étant donné que c est la couleur du logo mais également de la ville de l'association, Claye-Souilly. Cette partie sera développée légèrement et la charte graphique sera jointe en annexe. E.1. LOGO Quatre planches de logo ont été proposé au client suite à un choix de logo. Les graphistes ont fait des recherches poussées sur ce logo. Le logo finale est le suivant :

E.2. GAMME DE COULEURS Huit gammes de couleurs ont été présenté au client. Le choix finale est constitué de plusieurs gamme de couleurs. La gamme finale est la suivante :

E.3. PAPETERIE Suite à la validation de la gamme de couleurs et du logo, nous avons développé cette charte à : du papier lettre

des cartes de visite

des cartes d'invitation F. LA NAVIGATION La navigation doit être simple, compréhensible et explicite. Nous avons que sept onglets (l'accueil, le club, section handisport, partenaires, portail et forum) qui sont sur toutes les pages ainsi que la newsletter et le calendrier. Le premier onglet est l'accueil où se situent les dernières actualités et quelques photographies. Le club est second onglet car la partie handisport n'aurait pas lieu d'être sans le club CSSHB. Les sous-onglets sont l'historique du club, sa présentation, ses équipes, ses tarifs et inscription, son accès et son contact. La section handisport est le troisième onglet. Les sous-onglets sont le fonctionnement, le règlement, le matériel, les photos et les vidéos, les tarifs et inscriptions, son accès et ses contacts.

Les informations pratiques sont le quatrième avec deux sous-onglets qui sont les manifestations et les résultats. Le site est orienté pour un portail donc cela est normal que le cinquième onglet soit le portail. Le sixième onglet est les partenaires avec trois sous-onglets les sponsors, les soutiens et comment nous aider. Cette partie est importante pour notre club et pour son existence. Le septième onglet est le forum qui permet de dialoguer et de communiquer sur cette passion et sur ce nouveau sport. G. LES SPECIFICATIONS FONCTIONNELLES Le client souhaite avoir une communication sur la France entière pour faire connaître le Handi-Hand et une communication en Ile de France pour attirer de nouveaux joueurs et des sponsors. Après une réunion avec le client, nous pouvons dire qu'il a besoin : En multimedia : Un site Internet, dont la mise à jour et la création de nouveaux articles ne nécessitera pas l aide d un webmaster. La navigation doit être simple et l accès rapide aux informations. Un CMS : une analyse comparative de différents CMS a été faite pour faire le choix de ce CMS. Un calendrier et une newsletter pour informer des manifestations de l'association Un forum pour faliciter le dialogue entre les internautes et l'association Un portail de référence pour les autres associations Handi-Hand. Un hébergeur et un nom de domaine pas cher De plus, le site deviendra un portail de référence qui citera toutes les associations existantes avec leurs accords. Il sera un point de rediffusion des utilisateurs, de partage et de documentation.

En print : Une charte graphique Un livret d accueil et un livret pour les sponsors Des affiches Des dépliants Une identité visuelle L identité visuelle : La charte graphique devra définir : Les couleurs Les typographies La taille des images L emplacement du menu principal et des éventuels sous-menus L emplacement du calendrier La taille des blocs de texte L emplacement et la taille de la têtière

H. LES SPECIFICATIONS TECHNIQUES Dans cette partie, nous répondrons aux besoins du client vu précédemment. En multimédia : Le client n'ayant aucune connaissance informatique spécialisée, nous avons décidé d'utiliser un CMS simple et pratique car le client avait absolument besoin d'un back-office pour la création et la mise à jour des articles du son site internet. Nous avons choisi d'utiliser Joomla! car ce CMS convenait à tous points à l'attente de notre client. Les fonctionnalités indispensables à notre site tels que le besoin d'une licence e, le besoin de niveaux de droits non élevés, la simplicité de création de contenus, le besoin d un agenda, d'une newsletter, d'un forum, la possibilité d'installer des templates, la simplicité de la gestion des dossiers, les statistiques pour le référencement, la validation W3C, la gestion des liens pour le portail et le moteur de recherche, sont toutes réunies dans le CMS Joomla! et ses templates. Les contenus de ce site pourront être aussi diversifiés que des articles, des photos, des vidéos, des documents téléchargables Le site internet aura des applications spécifiques qui sont une newsletter, un calendrier et un forum. La newsletter sert à permettre d'avoir des informations importantes et le forum sert à dialoguer entre personnes qui s'intéresse au Handi-Hand. Le calendrier informe sur les manifestations à venir. Le forum retenu est Joomlaboard Forum Component. Ce forum est simple d'utilisation et d'installation. Son simple défaut est qu'il est en anglais. La galerie photographies et vidéos est le module Cactus. Elle est agréable à utiliser et facile. Le portail est une suite de liens avec une résumé du site internet consultable. Nous avons décidé de simplifier la portail en utilisant un article simple qui contient des liens et résumé pour éviter les confusions et la complexité de l'intégration de ces liens. Grâce à tous ces modules et le back-office de Joomla!, le client peut intégrer aisément les contenus qui lui convient sans l'aide d'un webmaster. Notre client a besoin d'une navigation non compliquée et d'avoir accès rapidement aux informations. Nous avons fait une arborescence simple constitué de 7 onglets et de maximum 5 sous onglets pour éviter la navigation trop complexe. Une de nos cibles est les personnes ayant un handicap donc en simplifiant la navigation cela permet d'interresser notre cible sans le fatigué dans des recherches trop compliqués et laborieuses. L'hébergement et le domaine viennent du même service qui est ovh. Ce service est peu cher et adapté à notre client. La partie print et identité visuelle sera développé dans une annexe qui est la charte graphique.

I. LA REPARTITION DU TEMPS Cahier des charges Premier jet : Fanny rédaction : Lucile correction / relecture : Arounie Carnet de bord : Lucile Comptes rendus des réunions : Lucile et Fanny Arborescence : Lucile Arounie Thomas Fanny Réalisation graphique : Lucile Analyses Sites : Arounie Lucile Thomas Fannny Rédaction finale et correction : Arounie Lucile Analyse CMS : Fanny Relecture et correction Arounie Lucile Il manque l analyse de Joomla, pour mes les mises à jour des modules et des composants Analyse Agence : Fanny Dossier Accessibilité : Thomas Brief : Arounie

Premier Planning : Fanny Planning par mois : Lucile Retouches : Fanny Recommandation : Premier jet : Arounie Version complète : Fanny Graphisme : Site Agence : Logo : Lucile Arounie Thomas Design Site : Arounie Lucile Bannière : Thomas Développement Site : Thomas et Fanny Mise à jour du Site : Fanny et Thomas Handi-Hand : Logo : Arounie Lucile Charte Graphique : Arounie Lucile Site : Arounie Lucile Gammes de couleurs : Arounie Développement Installation Joomla! : Arounie Site : Thomas Module : Thomas Contenus : Fanny (écriture et intégration)

J. LE RETRO-PLANNING

K. LE BUDGET

IV. ANNEXES A. ACCESSIBILITE Priorité 1 : 1. Fournir un équivalent textuel à chaque élément non-textuel. 2. Fournir une description auditive d'un contenu multimédia. 3. Synchroniser les alternatives aux contenus multimédia avec ces derniers. 4. S'assurer que tout contenu coloré soit intelligible sans couleur. 5. Identifier clairement les changements dans la continuité d'un texte. 6. Identifier les en-têtes de lignes et de colonnes dans un tableau de données. 7. Regrouper les cellules de données et les cellules d'en-tête dans un tableau à plusieurs niveaux. 8. Pouvoir lire un document sans feuille de style. 9. Mettre à jour les équivalents et alternatives en même temps que les contenus. 10. Pouvoir lire un document sans script, flash, etc... 11. Éviter les changements brusque de luminosité à l'écran. 12. Concevoir des éléments "externes" (flash, script, etc...) accessibles quel que soit le type de matériel et de logiciel utilisé. 13. Donner un titre à chaque Frame d'une page. 14. Utiliser le langage le plus clair et le plus simple possible. Priorité 2 : 1. Contraster suffisamment les informations colorées. 2. Utiliser du texte plutôt qu'une image pour faire passer une information. 3. Créer des documents valides au niveau de la structure. 4. Utiliser des feuilles de style. 5. Utiliser des unités relatives plutôt que absolues pour construire les pages. 6. Utiliser correctement les en-têtes.

7. Utiliser correctement les listes. 8. Baliser clairement les citations. 9. Ne pas utiliser les tableaux pour la mise en page. 10. Éviter de faire clignoter le contenu. 11. Éviter le mouvement sur pages. 12. Éviter les pages qui se rafraichissent automatiquement. 13. Éviter la redirection de pages web. 14. Éviter les pop-up, surtout les pop-up multiples. 15. Utiliser les dernières versions des technologies du W3C. 16. Identifier clairement la cible de chaque lien. 17. Prévoir des métas pertinentes à intégrer aux pages. 18. Fournir la carte du site. 19. Utiliser les mécanismes de navigation de manière cohérente. Priorité 3 : 1. Expliquer toutes les abréviations et acronymes lors de la première utilisation. 2. Développer un ordre logique de tabulation pour les liens, formulaire et autres. 3. Mettre du texte dans les champs de saisie vide d'un formulaire. 4. Séparer les suites de liens par des caractères non-hypertexte. 5. Prévoir des barres de navigation. Priorité 1 : Nous allons maintenant décrire ces directives si nécessaire et nous pencher sur la façon de les mettre en œuvre. 1.1 Fournir un équivalent textuel à chaque élément non-textuel. Mise en œuvre : Utiliser "alt" ou "londesc" selon la longueur de la description. 1.2 Fournir une description auditive d'un contenu multimédia. Mise en œuvre : Prévoir une piste audio décrivant le contenu visuel. 1.3 Synchroniser les alternatives aux contenus multimédia avec ces derniers. Mise en œuvre : S'assurer que les sous-titres et la vidéo soit coordonnés.

1.4 S'assurer que tout contenu coloré soit intelligible sans couleur. Mise en œuvre : Ne pas faire reposer une information uniquement sur une couleur. Éviter les choses du genre "les éléments en vert sont à remplir impérativement". 1.5 Identifier clairement les changements dans la continuité d'un texte. Certains éléments comme les citations ou les changements de langue dans un texte peuvent être perturbants pour un navigateur ou certains utilisateurs. Mise en œuvre : Utiliser "SPAN" avec des attributs comme "lang" par exemple pour signifier une langue étrangère. Utiliser "Q" pour les citations. 1.6 Identifier les en-têtes de lignes et de colonnes dans un tableau de données. Les tableaux sont à utiliser exclusivement pour des données à présenter sous forme de tableau, mais pas pour la mise en page. Mise en œuvre : Utiliser "TH" au lieu de "TD" pour les en-têtes. 1.7 Regrouper les cellules de données et les cellules d'en-tête dans un tableau à plusieurs niveaux. Mise en œuvre : Identifier les en-têtes au moyen d'un "id" et associer les cellules à leur en-tête respectif avec "header". 1.8 Pouvoir lire un document sans feuille de style. Mise en œuvre : Bien séparer contenu et feuille de style. S'assurer que l'organisation de la page soit cohérente même sans feuille de style. 1.9 Mettre à jour les équivalents et alternatives en même temps que les contenus. Il est important de bien s'assurer que le contenu et son équivalent correspondent. Dans le cas contraire, certains utilisateurs ne disposant que de l'équivalent pourraient être induits en erreur. Mise en œuvre : Changer la description de l'élément en même temps que l'élément lui-même. Si il est généré dynamiquement, mettre à jour la base de donnée. 1.10 Pouvoir lire un document sans script, flash, etc... Mise en œuvre : Prévoir des équivalents textuels. S'assurer que ces éléments ne portent pas à eux seuls toute l'information. 1.11 Éviter les changements brusque de luminosité à l'écran. Mise en œuvre : Éviter les changements brusques et les fond clignotants. 1.12 Concevoir des éléments "externes" (flash, script, etc...) accessibles quel que soit le type de matériel et de logiciel utilisé. Certaines personnes ne disposant pas de souris, ou utilisant des claviers braille peuvent ne pas toujours avoir accès au contenu flash ou javascript. Mise en œuvre : Utiliser des déclencheurs d'évènements tels-que "onblur", "onfocus" plutôt que "onclick" ou "onkeypress". Sinon, doubler les déclencheurs. Exemple : "onclick" et "onkeypress". 1.13 Donner un titre à chaque Frame d'une page. Mise en œuvre : Toujours renseigner "title" dans l'élément "FRAME".

1.14 Utiliser le langage le plus clair et le plus simple possible. Mise en œuvre : Une idée par paragraphe. Utiliser un langage courant. Éviter les phrases trop longues. Priorité 2 : 2.1 Contraster suffisamment les informations colorées. Mise en œuvre : Utiliser des chiffres à la place de noms pour les couleurs. 2.2 Utiliser du texte plutôt qu'une image pour faire passer une information. Le texte sous forme d'image n'est pas référencé. De plus, dans certaines conditions, un utilisateur qui n'est pas en mesure de voir les images ne pourra pas voir ce texte. Mise en œuvre : Utiliser autant que possible du texte et des CSS. 2.3 Créer des documents valides au niveau de la structure. Mise en œuvre : Utiliser les technologies du W3C (HTML, CSS, etc...) et faire valider les pages selon ces critères. 2.4 Utiliser des feuilles de style. Mise en œuvre : Séparer le contenu de la forme. 2.5 Utiliser des unités relatives plutôt que absolues pour construire les pages. Selon les navigateurs, l'interprétation des données numériques peuvent changer. Utiliser des unités relatives permet de conserver l'aspect général de la page quel que soit le navigateur. Mise en œuvre : Utiliser "%" plutôt que "px" ou "pt" pour les unités dans les feuilles de style. 2.6 Utiliser correctement les en-têtes. Les paragraphes devraient être introduits par des en-têtes (H1-H6) pour aider à la compréhension. Mise en œuvre : Respecter l'ordre d'imbrication des en-têtes. Exemple : faire "H1""H2""H3" et pas "H1""H3""H4" ou "H1""H3""H2". 2.7 Utiliser correctement les listes. Mise en œuvre : Utiliser les listes chaque fois que c'est pertinent. Utiliser les listes ordonnées ou non-ordonnées à bon escient. 2.8 Baliser clairement les citations. Mise en œuvre : Utiliser "Q" et "BLOCKQUOTE" pour les citations courtes et longues. 2.9 Ne pas utiliser les tableaux pour la mise en page. Mise en œuvre : Utiliser les éléments structurants mis à notre disposition dans le HTML : "DIV", "P", "IMG", etc... ainsi que les feuilles de style pour organiser le tout.

2.10 Éviter de faire clignoter le contenu. Mise en œuvre : Ne pas utiliser "blink" dans la CSS. 2.11 Éviter le mouvement sur pages. Mise en œuvre : Éviter les gifs animés. Éviter les mouvements en javascript. 2.12 Éviter les pages qui se rafraichissent automatiquement. Mise en œuvre : Ne pas utiliser "http-equiv=refresh" dans les "META". 2.13 Éviter la redirection de pages web. Mise en œuvre : Ne pas faire de redirection de page, que ce soit en javascript ou avec les métas. 2.14 Éviter les pop-up, surtout les pop-up multiples. Mise en œuvre : Ne pas utiliser "target=blank" dans les liens. 2.15 Utiliser les dernières versions des technologies du W3C. Mise en œuvre : Se mettre à jour sur les dernières versions des recommandations du W3C. Utiliser HTML, XHTML, XML, CSS, XSL. 2.16 Identifier clairement la cible de chaque lien. Mise en œuvre : Éviter les liens comme "cliquez ici" ou "là". Leur préférer "plus d'information", "l'accouplement des pingouins en Sibérie" ou "la suite". 2.17 Prévoir des métas pertinentes à intégrer aux pages. Plus les métas sont correctement renseignées sur une page et mieux elle sera référencée. Mise en œuvre : 2.18 Fournir la carte du site. Mise en œuvre : Mettre la carte du site à disposition sur le site, avec un lien clairement identifiable. 2.19 Utiliser les mécanismes de navigation de manière cohérente. Mise en œuvre : Ne faire un menu déroulant que si c'est justifié. Utiliser les "chemins de fer" pour pouvoir se situer dans le site. Priorité 3 : 3.1 Expliquer toutes les abréviations et acronymes lors de la première utilisation. Mise en œuvre : Présenter la version complète de chaque acronyme entre parenthèses lors de leur première apparition. 3.2 Développer un ordre logique de tabulation pour les liens, formulaire et autres. Mise en œuvre : Utiliser "tabindex" pour définir un ordre de tabulation et "keyacces" pour créer un raccourci clavier.

3.3 Mettre du texte dans les champs de saisie vide d'un formulaire. Mise en œuvre : Insérer le texte directement dans les "TEXTAREA", ou au moyen de l'élément "value". 3.4 Séparer les suites de liens par des caractères non-hypertexte. Mise en œuvre : Insérer des caractères tels que des tirets ou des crochets entre les liens. Les mettre dans une liste est également une bonne solution. 3.5 Prévoir des barres de navigation. Mise en œuvre : Laisser toujours les menus apparents. Mettre à disposition une solution pour toujours savoir où on se trouve dans le site.

B. LE TABLEAU CMS Nom du produit Numéro de la version site internet Drupal 6.2 http://drupal.org/ Joomla! 1.5.2 http://www.joomla.org/ SPIP 1.9.1 http://www.spip.net/ Serveur d'application PHP 4.3.3+ tous le serveurs supportant Apache PHP et MySQL Recommandé IIS Base de données MySQL/Postgres MySQL MySQL License Language de programmation Serveur Web GNU GPL PHP Apache/IIS GNU GPL PHP Apache ez publish 4.x http://ez.no/ Typo3 4.1.6 http://www.typo3.com Conditions de Système PHP 4.3.0+ GNU GPL PHP Apache MySQL, PostGreSQL, Oracle, MSSQL GNU GPL GNU GPL Apache MySQL, PostGreSQL, Oracle, MSSQL GNU GPL GNU GPL Apache/IIS Coût en extra Sécurité Vérification rétrospective Probation du contenus Vérification d'email Permissions Identification Kerberos Identification LDAP Historique de connection Identification NIS Identification NTLM Système d'identification additionnel Notification des problèmes Sandbox Gestion des Sessions Identification SMB Suivie d'édition Programme de Certification Documentation Support aux utilisateurs

Support commercial Formation Commerciale Communauté de développeurs Aide en ligne API Hébergement professionnel Services Professionnels Forum publique Liste de diffusion publique Développeurs hors-communauté Drag-N-Drop Email à la Discussion URL lisible Macro Language Téléchargement multiple Language serveur disponible Templates Niveau d'édition Undo Éditeur WYSIWYG Gestion de la publicité Gestion des dossiers Clipboard Programation dans le temps Échafaudage de contenus Administration Inline Administration en ligne Automatisme Sous-site Thèmes Poubelle Statistique Limités Limités Coût en extra Dispositifs

Intéropérabilité Permet la syndication (RSS) Support FTP Support UTF-8 Conformité W3C Support WebDAV Conformité XHTML Limités Limités Support mode CGI Réutilisation du contenu Profil d'utilisateur extensible Multilangue Métadata Contenus multilangue Intégration de contenus multilangue Multi-site Réécriture d'url Limités Système de cache avancé Réplique De Base de données Compensateur de charge Système de cache Permet l'exportation de contenus statique Blog Chat Annonces classées Gestion des contacts Saisie de données Rapport Base de données Limités Flexibilité Performance Applications

Gestion des documents Calendrier des événements Rapport de dépenses Gestion des FAQ Distribution de fichiers Graphiques et diagrammes Groupware Livre d'invités Bureau d'aide HTTP Proxy Offre d'emploi Gestion des liens web Formulaire Email Tableau de bord Liste de diffusion Gallerie de photos Sondage Gestion des produits Gestion de projet Moteurs de recherche interne Site Map Enquêtes Syndication Quiz Gestion des feuilles de temps Contribution des usagers Service web Limités Limités Limités Commerce Gestion des affiliés Gestion de l'inventaire Module de paiement Module d'expédition

C. L'AVENANT Fait le 20 mai 2009, à Cormeilles en Parisis. Objet : Avenant pour Bannière Flash Madame, Monsieur, Suite à votre demande, nous rajoutons une bannière flash en haut de votre site internet http://www.handi-hand.fr. Cette prestation durera 3 jours et donc vous coutera 900 euros de plus que le budget qui était de 12850 euros. Le budget final s élève maintenant à 13750 euros. Cordialement, Fanny Jousselin Chef de Projet Agence Faire Play Tel : 06.64.18.10.45. contact.faireplay@gmail.fr D. LA CHARTE GRAPHIQUE voir ci-joint E. LE CAHIER DE REUNIONS voir ci-joint F. LE LIVRET D'ACCUEIL voir ci-joint

G. SIGNATURE DU CONTRAT AVEC LE CLIENT