Rapport de projet. BENHADDI Saïd MANSAR Youssra Page 2



Documents pareils
Joomla! Création et administration d'un site web - Version numérique

Cahier des charges Site Web Page 1 sur 9

Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013

Projet 2. Gestion des services enseignants CENTRE D ENSEIGNEMENT ET DE RECHERCHE EN INFORMATIQUE. G r o u p e :

PREMIERE UTILISATION D IS-LOG

HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles

Sage CRM. 7.2 Guide de Portail Client

Rapport de stage Clément MOYSAN

Création de site Internet avec Jimdo

MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB"

OSIRIS/ Valorisation des données PORTAIL BO MANUEL UTILISATEUR

Bureautique Initiation Excel-Powerpoint

Premiers pas sur e-lyco

Manuel d utilisation du site web de l ONRN

Gestion d'un parc informatique avec OCS INVENTORY et GLPI

MANUEL WORDPRESS. Objectif: Refonte d un site web sous Wordpress I PRE-REQUIS: 1 / Créer un backup (sauvegarde) du site:

GROUPE CAHORS EXTRANET

Devenez un véritable développeur web en 3 mois!

Administration du site (Back Office)

POVERELLO KASONGO Lucien SIO 2, SISR SITUATION PROFESSIONNELLE OCS INVENTORY NG ET GLPI

EXTRANET STUDENT. Qu'est ce que Claroline?

Logiciel SuiviProspect Version Utilisateur

Livre Blanc WebSphere Transcoding Publisher

Espace numérique de travail collaboratif

Installation locale de JOOMLA SEPIA

Projet de Java Enterprise Edition

Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s

VTigerCRM. CRM : Logiciel de gestion des activités commerciales d'une (petite) entreprise

Aide pour les abonnés aux listes sympa du LAAS

Créer un sondage en ligne

Mise en place d un intranet de travail collaboratif. Guide utilisateur

Gestion de contenu d un site web avec TYPO3 Manuel de l administrateur

Site web établissement sous Drupal

v7.1 SP2 Guide des Nouveautés

PARAMETRER INTERNET EXPLORER 9

claroline classroom online

SYSTÈMES DE PUBLICATION POUR L INTERNET. Beatep Marie-France Landréa - Observatoire de Paris

LISTES DE DISTRIBUTION GÉRÉES PAR SYMPA DOCUMENT EXPLICATIF DE L'INTERFACE WEB À L'INTENTION DES ABONNÉS

PHP 5.4 Développez un site web dynamique et interactif

webmestre : conception de sites et administration de serveurs web 42 crédits Certificat professionnel CP09

Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement

MEDIAplus elearning. version 6.6

Webmaster / Webdesigner / Wordpress

Espace Client Aide au démarrage

Les 10 étapes incontournables pour réaliser un site internet performant et accessible

Espace de travail collaboratif

Remote Cookies Stealing SIWAR JENHANI (RT4) SOUHIR FARES (RT4)

Optimiser pour les appareils mobiles

CAHIER DES CHARGES DE REALISATION DE SITE INTERNET

Sommaire. 1 Introduction Présentation du logiciel de commerce électronique 23

CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration

Toute personne souhaitant maîtriser les techniques liées à la conception de produits multimédia et à la création de sites Web.

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES

OFFRE DE SERVICE.

Guide d utilisation de fonctionnalités avancées de Beyond 20/20 (application à des données départementales issues de Sit@del2)

Guide d'utilisation de la. plate-forme GAR. pour déposer une demande. de Bourse Sanitaire et Sociale

Créer du contenu en ligne avec WordPress

Petit guide à l'usage des profs pour la rédaction de pages pour le site Drupal du département

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN ING

Créer un site Internet dynamique

Documentation Honolulu 14 (1)

WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES

Introduction à. Oracle Application Express

Introduction à Expression Web 2

RÉALISATION D UN SITE DE RENCONTRE

Notes pour l utilisation d Expression Web

Conception d'un système d'information WEB avec UML Par Ass SERGE KIKOBYA

GUIDE DE L UTILISATEUR Recoveo Récupérateur de données

Tutorial Terminal Server sous

Diffuser un contenu sur Internet : notions de base... 13

Un site web collaboratif avec Drupal. Judith Hannoun - Journées INSHS 16 Octobre 2012

Comment faire pour créer ses propres pages html?

UNIVERSITE BORDEAUX - MONTAIGNE. Projet HK_Lime

Mise en place Active Directory, DNS Mise en place Active directory, DNS sous Windows Serveur 2008 R2

Bases de données et interfaces Génie logiciel

OMGL 6 Cahier des charges

Notice d utilisation du serveur SE3 (Samba Édu 3) Version «élèves» 2.4 Lycée Jean-Pierre TIMBAUD

Guide Expert Comptable Production Coala

Programmation Web TP1 - HTML

Formation Webmaster : Création de site Web Initiation + Approfondissement

Module ebay pour PrestaShop Guide du vendeur

Manuel d utilisation de la plate-forme de gestion de parc UCOPIA. La mobilité à la hauteur des exigences professionnelles

Sage CRM. Sage CRM 7.3 Guide du portable

Introduction à HTML5, CSS3 et au responsive web design

PC Check & Tuning 2010 Optimisez et accélérez rapidement et simplement les performances de votre PC!

MEGA Web Front-End Installation Guide MEGA HOPEX V1R1 FR. Révisé le : 5 novembre 2013 Créé le : 31 octobre Auteur : Noé LAVALLEE

cbox VOS FICHIERS DEVIENNENT MOBILES! INTERFACE WEB MANUEL D UTILISATION

Nouveautés joomla 3 1/14

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

7.0 Guide de la solution Portable sans fil

GUIDE MEMBRE ESPACE COLLABORATIF. Février 2012

Documentation utilisateur, manuel utilisateur MagicSafe Linux. Vous pouvez télécharger la dernière version de ce document à l adresse suivante :

Soyez accessible. Manuel d utilisation du CMS

Publication dans le Back Office

Transcription:

Etudiants : Mlle MANSAR Youssra MR BENHADDI SAID Tuteurs : Jean-Luc Lesueur Thierry Valet Rapport de projet Développement du site web des anciens étudiants en informatique de l'université d'avignon 2008/2009 BENHADDI Said MANSAR Youssra Page 1

Sommaire Introduction:... 3 I. Rappel des objectifs du projet... 4 II. Résume des fonctionnalités... 4 III. Acteurs principaux... 5 III.1 Les tuteurs du projet :... 5 III.2 Groupes du projet :... 5 III.3 Les acteurs secondaires :... 6 IV. Déroulement du projet... 6 IV.1 En résumé nous avons fait :... 6 IV.2 Organisation du projet... 7 IV.3 Difficultés rencontrées... 7 V. Outils et technologies utilisées... 8 V.1 Outils et technologies utilisées... 8 V.2 Xampp... 9 V.3 Sécurité... 9 Sécurité contre les attaques XSS :... 9 Gérer les utilisateurs et les sessions :... 9 Gestion des permissions :... 10 Gestion du Login... 10 VI. Description des rubriques du site... 11 VII. Présentation de la plateforme Web... 13 VII.1 Page d accueil après connexion... 13 VII.2 Promotion... 13 VII.3 Profil membre... 14 VII.3 Offre d emploi... 14 VII.4 Dépôt annonce... 15 VII.4 Exemple annonce... 15 Conclusion :... 16 MANSAR Youssra Page 2

Introduction: Au cours de notre première année de Master GMI, nous, MANSAR Youssra,, avons réalisé un début de site des anciens de l IUP GMI. La réalisation de ce projet s'est faite en deux parties. La première est la réalisation du cahier des charges au premier semestre. La seconde est la conception du site des anciens avec le Framework Symfony dont nous vous ferons une présentation. L'objectif du développement de cet outil est dans un premier temps de s'interroger sur les fonctionnalités et ce qui pourrait être mis en œuvre pour attirer, et générer du trafic sur le site de façon régulière et mettre en relation tous les anciens de l IUP de manière à aboutir à une association active d anciens élèves. Dans un second lieu ce site servira aussi à l échange d informations, la recherche d offre d emplois, de la collecte des données pour établir des statistiques Il y a bien des outils existants correspondant à ces objectifs mais ce sont des applications séparées se trouvant sur divers sites. Au fur et à mesure de votre lecture, nous vous présenterons de quelle façon nous avons organisé le travail afin de réaliser les fonctionnalités qu'offre le site. MANSAR Youssra Page 3

I. Rappel des objectifs du projet Rapport de projet Notre projet consiste à développer un site d associations d anciens élèves qui aura pour objectif d établir des relations enrichissantes entre les diplômés et de favoriser les échanges d informations. Ces objectifs seront entre autres de grouper les anciens élèves de l IUP GMI d Avignon et assurer la continuité des liens d'amitié et de solidarité entre les membres. De cette manière ils pourront développer les liens techniques et humains entre les étudiants de l'iup et les anciens qui travailleront déjà en entreprise ou tout simplement des anciens qui pourront apporter une aide, morale ou autre, aux anciens isolés ou en difficulté. Pour cela, dans notre cas nous avons opté pour un regroupement d anciens étudiants par promotion. Ce qui facilitera les retrouvailles. Les membres auront accès bien évidement à toutes les promotions depuis 1994. Tous cela donc dans le but de mettre en place un vrai réseau unissant professionnels, étudiants afin de confronter expériences et opportunités Pour être membre actif, il faut impérativement être un étudiant ou un ancien étudiant de l IUP GMI d Avignon. II. Résume des fonctionnalités En page d accueil l'association présente ses activités et ses actualités. Les membres peuvent ensuite s inscrire en rentrant un certain nombre d informations qui seront rendu public ou non. Un mail sera ensuite envoyé à l utilisateur avec son nom et son login. Dans l interface de connexion, il pourra enfin s authentifier. Une fois connecté, il arrive directement sur sa promotion. La session en question contiendra des informations générales sur l IUP ainsi que de l information sur la promotion de l utilisateur. L utilisateur pourra ensuite : Allez sur tous les profils des autres membres de la même promotion. Allez sur les autres promotions en navigant entre celles-ci. Pouvoir rechercher un membre particulier par nom, prénom. MANSAR Youssra Page 4

Allez sur son profil et pouvoir le modifier : Modifier les informations personnelles (tel, adresse ). changer la photo du profil. Remettre son CV à jour. Les entreprises peuvent proposer leurs annonces d'offres d'emploi. les membres peuvent les consulter. La fonction de recherche permet de sélectionner des emplois par catégorie, ville, ou type d emploi. les membres peuvent partager leurs points de vue en mettant des commentaires dans l un des modules réalisés (il ne s agit pas d un forum). Il s agira en quelque sorte d un sondage. Dans le backend, l administrateur pourra : Voir, éditer, supprimer, ajouter un utilisateur. Voir, éditer, supprimer, prolonger la durée d un emploi. Créer des catégories d emplois selon les demandes des entreprises. III. Acteurs principaux Les acteurs concernés par le site des anciens sont : III.1 Les tuteurs du projet : Assurent l administration du suivi et du bon déroulement du travail du groupe de projet. Personne concernée : Thierry VALET Jean-Luc LESUEUR III.2 Groupes du projet : On était sensé être deux groupes à la base, chaque groupe était composé de trois étudiants. Un premier groupe s est détourné vers un autre projet. Et dans notre groupe, un étudiant s est désisté. Personnes concernées : MANSAR Youssra. MANSAR Youssra Page 5

III.3 Les acteurs secondaires : Personnes concernées : Un administrateur qui fera le suivi et la maintenance du site. Les administrateurs de la future association. Les membres du site. o Les étudiants de l IUP o Les membres bienfaiteurs. Les entreprises. Les sponsors. IV. Déroulement du projet Dans un premier temps nous avons défini un cahier des charger, avec un certain nombre de fonctionnalités, celles-ci ont été proposé aux tuteurs. Après acceptation du cahier des charges, nous avons planifié la réalisation du site. Les tuteurs nous ont proposé de travailler avec un Framework nommé Symfony. Il contient un exemple de site, nommé Jobeet, faisable en 24 jours à raison d une heure par jour. Avant de mettre symfony en place, nous avons bien évidement configuré le serveur web apache, ainsi que le serveur de base de données. Nous avons pour cela utilisé l outil Xampp qui regroupe ces deux outils. Une fois l exemple de Symfony terminé, nous nous sommes lancé dans la mise en place du site des anciens, même si le planning n a pu être respectés pour diverses raison (grèves, démotivation ). Nous avons concrétisé donc quelques modules, qui feront l objet de divers test, une fois mis sur un serveur de test l université. IV.1 En résumé nous avons fait : La conception de la maquette : fonctionnalités+charte graphique. Documentation : Durant cette étape, nous avions commencé à nous documenter sur les différentes technologies choisies pour développer l application mais aussi à faire l apprentissage de ces technologies. MANSAR Youssra Page 6

Framework : documentations sur Symfony. Entrainement : réalisation du site de Jobeet( exemple du site de Symfony plus documentation). Phase de développement : Phase de programmation des différents modules cités dans les fonctionnalités. Le langage de programmation choisi est donc par défaut le PHP. La base de données Mysql est très bien adaptée pour ce genre de site. Ces choix technologiques se portaient sur l importance qu à Symfony dans le monde du développement de site, et proposé par Mr Valet. Phase de validation : Les tuteurs vérifient les modules, et nous guide sur ce qui peut être amélioré. IV.2 Organisation du projet Pour l organisation, nous devions commencer le développement au mois de Février, étant donné qu il y a eu des grèves, et de plus nous avons eu beaucoup de difficulté, nous avons commencés à développer mi-avril, après la reprise des cours. Le travail n est pas vraiment partagé, on essaie d avancer à deux, selon nos occupations. Nous avons donc pu développer les modules suivants. La gestion des utilisateurs La gestion des offres d emplois. La gestion des profils. La gestion de la sécurité. Le backend : côté administrateur. IV.3 Difficultés rencontrées La grosse difficulté de ce projet était de comprendre le fonctionnement du Framework Symfony, cela nous a pris beaucoup de temps, car nous avons lu pas mal de documentation. Arrivé au stade de comprendre le concept du Framework, il nous a manqué de temps pour développer toutes les fonctionnalités cité dans le cahier des charges. Nous avons eu quelques difficultés au niveau organisationnel, pendant les grèves, nous avions du mal à nous voir. Nous avons donc essayé de nous réorganiser après les deux mois de grève. MANSAR Youssra Page 7

V. Outils et technologies utilisées Le choix des outils et de technologie a été basé par rapport aux conseils reçus des tuteurs, c'est-à-dire par rapport au Framework Symfony qui nous a été conseillé par Mr Valet. V.1 Outils et technologies utilisées Le site du Framework symfony a été lancé en octobre 2005. Il a été développé par Sensio pour ses propres besoins qui a ensuite souhaité en partager le code avec la communauté des développeurs PHP. Inconvénient : Symfony est uniquement compatible avec PHP5. Documentation, pas encore traduite dans la langue française!!! Avantage : Génération du code, module par module, ce qui permet de personnalisé de nombreux paramètres. Des tutoriaux de référence : Askeet et Jobeet, pour apprendre en un mois, à raison d'une heure par jour. Deux livres, sur le Framework et sur les formulaires des traductions dans de nombreuses langues. De nombreux utilisateurs->de nombreux forums, facilité de compréhension. Symfony propose entre autres : Une séparation du code en trois couches, selon le modèle MVC, pour une plus grande maintenabilité et évolutivité. Un Template simple, basé sur PHP et des jeux de "helpers". Des performances optimisées et un système de cache pour garantir des temps de réponse optimums Un système de configuration en cascade qui utilise de façon extensive le langage YAML. Un générateur de back-office et un "démarreur de module" (scaffolding). Un support de l'internationalisation- symfony est multinational. Le support de l'ajax. Une architecture extensible, permettant la création et l'utilisation de plugins. MANSAR Youssra Page 8

V.2 Xampp Pour le développement en local, nous avons choisi l architecture de technologie Xampp (MySQL + Apache sous Windows) MySQL - PHP) avec la configuration serveur suivante : Version d Apache: 2.2.6 Version de PHP: 5.2.4 Version de MySQL: 5.0 Nous avons voulu mettre en place un CSM pour la gestion du contenu. Faute de temps, nous avons eu quelques difficultés pour la mise en place du Logiciel TYPO3. Ce Cms utilise aussi le langage de programmation PHP et la base de données Mysql. V.3 Sécurité Pour le système d authentification, il nous a été conseillé d utiliser l Annuaire (LDAP). Etant donné que nous n avons pas pu le concrétiser, la solution serait de préinscrire les anciens, c'est-à-dire les sauvegardés dans la base de données. Lorsqu ils vaudront devenir membre, on s aura que se sont bien les anciens de l iup qui se sont inscrit. Sécurité contre les attaques XSS : Lorsqu'on passe des attributs HTML aux widgets, ou qu'on définit des valeurs par défaut, la classe sfform (classe de symfony qui fait la mise en forme des différents champs) protège automatiquement ces valeurs contre les attaques XSS lors de la génération du code HTML. Elle est également assez intelligente pour ne pas protéger un contenu déjà protégé par une autre méthode. Définition attaques XSS : Les attaques Cross-Site Scripting consistent ainsi à forcer un site web à afficher du code HTML ou des scripts saisis par les utilisateurs. Le code ainsi inclus (le terme «injecté» est habituellement utilisé) dans un site web vulnérable est dit «malicieux». Gérer les utilisateurs et les sessions : Symfony intègre un système complet de gestion des sessions et des utilisateurs. On a la possibilité de stocker des attributs dans l'objet session, comme par exemple la liste des membres MANSAR Youssra Page 9

d anciens, ou les annonces consultées récemment. Deux fonctions vous permettent d'écrire et de lire ces attributs : Dans le Template : $Annonce->getAnnounceId()->setAttribute('nbAnnounce', 15) ; $this->getuser()->getattribute('nbannounce') ; Dans Action : $sf_announce->setattribute('nbarticles', 15) ; $sf_announce->getattribute('nbarticles') ; Gestion des permissions : Même si la majorité des sites ont un état «Administrateur», notre site a besoin d'une gestion beaucoup plus fine, car des utilisateurs pouvant poster des annonces, poster des remarques. Voici comment utiliser ces permissions : $this->getuser()->addcredential('auteur') ; La mise en place d une gestion d utilisateurs (droits, groupes, etc), se fait grâce au plugin sfguardplugin. L une des forces du Framework symfony est la disponibilité de nombreux plugins qui permettent d étendre ses fonctionnalités. Le plugin que nous avons pu mettre en place est sfguard, Il permet de gérer l utilisateur ainsi que leur authentification. Gestion du Login Pour la sécurité du login, nous avons procédé de cette manière : Lors de l inscription de l utilisateur, on récupère son mot de passe. Ensuite on crypte celui-ci avec une méthode de hachage, on sauvegarde le résultat du cryptage dans la base de données. Lorsqu un utilisateur se connecte, il rentre son adresse mail et son mot de passe. On crypte le mot de passe avec la même fonction que lors de l inscription de l utilisateur. On compare le login crypté dans la base de donnée, avec le cryptage de celui que l utilisateur vient de taper. Si c est les mêmes, alors l utilisateur est connecté. MANSAR Youssra Page 10

VI. Description des rubriques du site Accueil : En en-tête le titre Association des anciens étudiants de l IUP d Avignon. Juste en dessous : adresse, coordonnées téléphonique et contact e-mail de l'association. En haut à gauche de la page le logo de l'association. Au centre de la page des liens vers les différentes sous-rubriques En bas : e-mail du webmaster, hyperlien vers des informations complémentaires sur le site. Pour chaque lien de rubriques dont il faut être membre, lorsque le visiteur n est pas connecté, i l va être renvoyé vers les champs d authentification. Après inscription : Après inscription, le membre n est toujours pas connecté, en revanche, il reçoit un mail, dans le quel se trouve son nom et son mot de passe. Un message s affiche aussitôt sur le page d accueil, lui disant qu il est inscrit. Accueil après authentification : En en-tête le titre Association des anciens étudiants de l IUP d Avignon. Sur le coté gauche : Un lien vers l accueil général. Un lien vers le profil de l utilisateur. Un lien vers les offres d emplois. Un lien vers les autres promotions. Un lien vers le sondage. En haut : barre de recherche pour chercher un membre particulier+d autres liens Au centre : Informations générales sur l IUP et informations sur la promotion du membre connecté et un raccourci pour aller voir les membres de la promotion en question. Accueil : offres d'emploi : MANSAR Youssra Page 11

Sur cette page est visible la liste des différentes offres d'emplois postés par des entreprises ou des anciens qui travaillent dans des entreprises. Un écran principal présente la liste des offres avec leur date de mise en ligne, le titre de l'offre et la société demandeuse. En cliquant sur un titre d'annonce, un écran s'ouvre présentant les détails de chaque offre. La mise à jour de cette rubrique est donc automatisée grâce à l'utilisation de la base de données. Les offres consultés lors de l ouverture d une session sont mise sur le coté en tant que raccourci, l utilisateur peut donc avoir un listing de toutes les offres qu il a consulté. Les offres d emplois sont classées par catégorie. La pagination est faite de manière à afficher 10 offres pas pages. Les offres sont comptabilisées par catégorie. Le profil : En haut : information générale. Juste en dessous : informations personnelles. Information sur la vie professionnelle et lien vers cv en pdf. En haut à droite : la photo du profil, sur la quel on peut cliquer qui amènera à d autres photos de l utilisateur. Sur la droite Menu général. Remarque sur le site : Cette rubrique est automatisée : les anciens peuvent déposer des messages qui seront en ligne sans contrôle. Le webmaster se réserve néanmoins le droit d'éliminer les messages sans intérêt ou contraire à l'image du site et de l'association. C'est la rubrique idéale pour faire passer rapidement un message d'ordre général ou une opinion. MANSAR Youssra Page 12

VII. Présentation de la plateforme Web VII.1 Page d accueil après connexion VII.2 Promotion MANSAR Youssra Page 13

VII.3 Profil membre VII.3 Offre d emploi MANSAR Youssra Page 14

VII.4 Dépôt annonce VII.4 Exemple annonce MANSAR Youssra Page 15

Conclusion : La réalisation du projet nous a permis d apporter des nouvelles connaissances dans les différentes technologies de développement Web, à savoir la puissance du Framework Symfony avec le langage PHP5 qui nous a permis de comprendre qu il vaut mieux travailler de cette manière pour réaliser un gain de temps considérable. De plus les différents plugins permettent une implémentation assez simple du projet. Manque de temps pour la phase de développement, on aurait pu finaliser le projet en intégrant toutes les fonctionnalités citées dans le cahier, mais malheureusement, nous pourrons le terminer qu à la rentrée prochaine. Le fait de faire un site qui a pour but associative est toujours motivant, c est pour cela que nous avons choisi ce projet en ayant dans l idée qu il sera un jour enfin réalisé, finalisé, pour pouvoir enfin faire communiquer toutes les promotions qui sont passées à l iup depuis 1994. MANSAR Youssra Page 16

Documents Annexes : Technique de tests envisageable pour le site: Introduction : Le présent rapport expliquera le fonctionnement et l organisation sur lesquels se basera les tests de notre site web concernant les anciens étudiants de l IUP. Les tests sur un site web peuvent s effectuer sous plusieurs formes manuelles et automatisées. Ces dernières allège énormément le travail en exécutant des tâches infaisables par l homme, mais cela n empêche que ces tests automatisés restent peu fiables et ne valident pas entièrement le bon fonctionnement du site sur tous les plans, et ne détecteront pas un grand nombre d'erreurs et certains des problèmes signalés ne seront pas de véritables problèmes. Il restera donc un nombre considérable de tests à faire manuellement. Dans mon rapport, j essaierais de répondre à quelques questions qu il faudrait se poser pour tester un projet, telles que : Comment je pense le tester? Est ce que le site sera utilisable par tout le monde y compris les personnes mal voyantes? Est-ce qu il respecte les recommandations de W3C et des autres organismes de standardisation? Quels outils utiliserais-je pour tester le site? Evaluation de l'accessibilité de mon site: Procédure de tests : Installation des outils suivants : - L'extension Web Developer pour Firefox - L'extension HTML Validator pour Firefox - l'extension Fangs pour Firefox - Le navigateur Internet en mode texte Lynx MANSAR Youssra Page 17

Points à contrôler : Recommandations de W3C et des autres organismes de standardisation : Est-ce que mon site respecte ces recommandations? Il n'est pas évident de répondre à cette question en consultant simplement ses logs de serveur http. Des services en ligne permettent de tester la compatibilité d'un site web avec les standards du W3C et les différentes versions de navigateurs, ce qui rend le site plus facile à référencer =>un site accessible est moins coûteux à maintenir car il est plus évolutif. Menthe Fresh Parmi ces outils, on trouve : Ocawa, Colour Contrast Analyzer, Adesigner, Les cadres (frames): Pour vérifier si le site contient des frames, dans le menu contextuel, un menu ce cadre est disponible pour détecter la présence des frames. Mais ce cadre n'apparait qu'en positionnant le pointeur au-dessus de l'espace utilisé par un frame. Raison pour laquelle la barre d outils Web Developer propose une option qui permet d'entourer tous les frames d'une page : Entourer - Entourer les frames. Les images et le texte alternatif : Quels sont les problèmes causés par l'utilisation des frames???? Parfois, les frames ne sont pas entièrement accessible, problèmes liés à l'ergonomie et l'accessibilité rendant l'utilisation plus compliquée. Toutes les images doivent posséder un attribut "alt", car le validateur HTML sortirait des erreurs dans le cas où il n'en rencontre pas. Pour réparer ceci, il suffit d'utiliser l'extension Web Developer pour afficher le texte alternatif de toutes les images du document : mages - Remplacer les images par l'attribut Alt. Il faut voir si le site est intelligible, et si le texte alternatif est visible quand les images ne sont pas affichées parce que de nombreux navigateurs affichent ce texte de la couleur spécifiée pour l'image. Si cette couleur ne contraste pas assez avec l'arrière-plan, le texte alternatif risque d'être difficile, voire impossible à lire. Ce problème se rencontre principalement en cas d'utilisation de nombreuses images de fond. Donc, l'attribut alt est obligatoire pour les balises alt et area. L'attribut alt étant obligatoire pour les images et les images réactives, le validateur HTML et les autres outils précités afficheront des erreurs s'ils en rencontrent dont le texte alternatif n'a pas MANSAR Youssra Page 18

été défini. S'il n'y en a pas, toutes les images du document possèdent un attribut alt. Néanmoins, il peut encore y avoir des problèmes et il faut maintenant étudier comment l'attribut alt est utilisé. Donc s'il n'y a pas de texte alternatif, ou si celui-ci n'est pas spécifié correctement, quiconque n'aura pas accès aux images recevra un contenu amputé, ou sera en face d une masse d'informations inutiles. S'assurer que JavaScript fonctionne comme prévu : Pour cela, on va avoir besoin de l'extension Web Developer. Si on désactive le JavaScript, puis on essaie d'utiliser le site!!!!!!, dans certains cas, cela devient impossible. Le souci est la navigation nécessitant JavaScript, le chargement dynamique d'une feuille de style... Le visiteur n'ayant pas JavaScript ne recevra qu'un document brut et sans mise en page. Je compte utiliser également Lynx, navigateur en mode texte qui n'implémente pas le JavaScript, pour vérifier que le site est utilisable sans JavaScript. Cela fait partie des points à tester, car Un nombre important d'utilisateurs navigue avec JavaScript désactivé, ou avec un navigateur ne le gérant pas. Rien ne devrait les empêcher d'utiliser le site! Modification de la taille du texte : Pour vérifier ce point il faudra utiliser IE/Win ou étudier les CSS utilisées par le site. On regardera les unités utilisées pour spécifier la taille du texte. Le texte dont la taille est spécifiée dans une unité relative sera redimensionnable avec tous les navigateurs. Exprimée en pixels, les utilisateurs d'internet Explorer sur Windows ne pourront pas l'augmenter ou le diminuer sans modifier les préférences générales du logiciel, pas satisfaisant. Pour voir ça, Il faudrait utiliser IE/Win et tentez de changer la taille du texte. Si rien ne se produit, la taille du texte est probablement définie en pixels. Tout cela, Parce que nombreux sont ceux qui apprécieront ou ont besoin de texte de bonne taille pour le lire confortablement, ou ceux ayant des difficultés visuelles La sémantique des balises : Un balisage sémantique est important car il permet aux dispositifs de navigation de présenter le contenu en fonction de son statut dans le document. Sans oublier que les moteurs de recherche tendent à favoriser le balisage sémantique. MANSAR Youssra Page 19

Une utilisation correcte des titres permet également aux outils d'aide de concevoir une table des matières qui serait très utile pour les utilisateurs de lecteur d'écran. L utilisation de Fangs pour simuler un lecteur d'écran : Fangs est un bon outil pour se faire une idée relativement correcte de la façon dont un lecteur d écran lirait le site en cours d'évaluation. Il s'agit d'une extension pour Firefox permettant d'afficher le contenu d'un site dans l'ordre où le lirait le lecteur d'écran. Cela aide permet savoir comment un site serait lu par un lecteur d'écran et déterminer par la suite si l'ordre du contenu fait sens, si les liens et les titres sont utilisés comme souhaité, et si le texte alternatif est utilisé comme il le faut. Evaluation des résultats : Arrivé à ce stade, un certains nombre, de points techniques posant des problèmes d'accessibilité, serait surement relevé. Avant de passer à la prochaine étape, il serait judicieux de faire le point en réparant ces erreurs. La suite à venir présentera les points plus ou moins difficiles à tester à l'aide des techniques automatisées. Les formats non-html : Si le site contient des documents fournis en PDF, Microsoft Word, Microsoft Excel, ou tout autre format, il est recommandé d'en mettre une version HTML à disposition également. Car HTML reste le format le plus largement supporté et devrait être utilisé en priorité. Les navigateurs et des systèmes d'exploitation minoritaires : Pour contrôler ce point, il faudrait avoir accès à différents navigateurs sur différents systèmes d'exploitation. Cette option n'étant pas pratique à mettre en place, une autre solution consiste à déguiser la chaîne d'identification du navigateur utilisé pour réaliser les tests. Pour cela, on a besoins d'utiliser les outils suivants : l'extension User Agent Switcher et le téléchargement d'une liste de chaînes d'identification. La navigation au clavier : MANSAR Youssra Page 20

Il faudrait vérifier, par exemple si les menus déroulants peuvent être utilisés sans la souris. Car les utilisateurs de lecteurs d'écrans n'utilisent pas de pointeur, il est donc important que la navigation soit possible en son absence. Il y a également un grand nombre d'utilisateurs pour qui le clavier est plus rapide et plus pratique à utiliser qu'une souris. Sans oublier qu en fonction de l'ordre des éléments du fichier source et de la taille du document, il est parfois très utile de proposer des liens internes pointant vers les principaux blocs de la page. Cela évitera à ceux qui n'utilisent pas la souris de perdre leur temps à atteindre le début du contenu principal. D où l intérêt : Le site doit être accessible indépendamment du matériel, et ne doit pas imposer aux visiteurs l'utilisation d'un moyen de saisie particulier. Utiliser un lecteur d'écran : Il est très difficile d'imaginer ce que représente la navigation sur Internet pour un non-voyant pour lesquels un lecteur d'écran est indispensable. Dans le cas d'un Mac, celui-ci possède déjà le lecteur d'écran Voice Over fourni par Apple à partir de Mac OS X 10.4. Mais il existe aussi plusieurs lecteurs d'écran payants, mais y'en a pour lesquels une version de démonstration est disponible tels que : JAWS, Window-Eyes, Supernova, IBM Home Page Reader Ceci dans le but de dévoiler tous les soucis d'accessibilité. Car, il est essentiel de faire par soimême l'expérience de la navigation sur Internet pour les non-voyants pour rencontrer les difficultés probables. Conclusion : Les outils automatiques aideront à repérer les problèmes qui prendraient longtemps à être détectés s'il fallait analyser le code à la main. Suite à cela, il faudrait étudier attentivement le rapport généré et regarder les sources de ces problèmes Quand le site aura passé tous ces tests, on peut être relativement tranquille au niveau de la navigation technique. Mais produire un contenu accessible par tous est une tâche relativement difficile. MANSAR Youssra Page 21