memoire

MEMOIRE DE FIN D’ETUDES
CONCEPTION ET DEVELOPPEMENT
D’UN SITE WEB
Réalisé par :
BALDAL TEMADJI Francis
Encadré par :
Karine BAGA
Année académique 2011/2012
SUPINFO | Mémoire de fin d’études 1
Dédicaces
Je dédie ce travail à :
Mes chers parents, que nulle dédicace ne peut exprimer mes
Sincères sentiments, pour leur patience illimitée,
leur encouragement continu, leur aide en témoignage de mon
profond amour et respect pour leurs grands sacrifices.
Que Dieu leur procure bonne santé et longue vie.
Mes amis qui sans leur encouragement ce travail n’aurait jamais
vu le jour.
Toute ma famille et tous ceux qui m’entourent.
Que ce travail soit l’expression de ma profonde affection.
SUPINFO | Mémoire de fin d’études 2
Remerciements
Au terme de ce projet de fin d’étude, c’est avec un grand plaisir que je dédie cette page en
signe de gratitude et de profonde reconnaissance à tous ceux qui m’ont aidé de près ou de loin
à la réalisation de ce travail.
Je tiens à exprimer ma sincère gratitude à Mme Karine BAGA, responsable du département
Communication et Informatique de la LTDH et mon maître de stage ASRA Magloire, pour
sa disponibilité et ses précieux conseils tout au long du déroulement de ce projet.
Mes remerciements s’adressent à M. Oumar SALEH, responsable adjoint du département et
M. GUIO Didier, chargé des relations extérieures qui m’ont accueilli pour ce stage. Je tiens à
remercier aussi le personnel de la Ligue Tchadienne des Droits de l’Homme dans son
ensemble pour leur accueil, leur soutien et leur disponibilité.
À M. MBENGUE Henry, j’exprime mes profonds remerciements pour sa gratitude, son
suivi et ses remarques qui m’ont permis de mener à bien ce travail.
Je profite de cette occasion pour remercier tous les enseignants de SUPINFO ainsi que la
Direction pour leur aide précieuse et leurs critiques constructives tout au long de mon cursus.
Enfin, mes meilleurs et vifs remerciements s’adressent aux membres du jury pour avoir
accepté d’évaluer ce projet.
SUPINFO | Mémoire de fin d’études 3
Résumé
Ce travail s’inscrit dans le cadre d’un projet de fin d’études, pour l’obtention du Diplôme
d’Ingénieur en Informatique. Il a été réalisé au sein de la Ligue Tchadienne des Droits de
l’Homme (LTDH) au Département Informatique & Communication à N’Djamena.
Les travaux menés dans le cadre de ce projet consistent, premièrement à une étude de
faisabilité, puis au développement d’un outil informatique permettant de s’ouvrir au monde,
d’assurer la mise à jour des informations et prenant aussi en compte les résultats de cette
étude.
Pour la réalisation de ce projet, j’ai utilisé les logiciels Adobe Dreamweaver, Adobe Flash,
Powerbullet Presenter, Cyberduck, Wampserver et le logiciel de gestion de base de données
Mysql. Les langages de développement web PHP, HMTL, JavaScript et le CSS
Mots clés: Adobe Dreamweaver, Wampserver, Adobe Flash, Powerbullet Presenter,
Cyberduck, Mysql, PHP, HTML, JavaScript, CSS.
Ce travail met en avant ici l'importance et la contribution du Web dans nos échanges
quotidiens
SUPINFO | Mémoire de fin d’études 4
Table des matières
Table des matières .................................................................................................................... 5 Liste des figures ........................................................................................................................ 8 Liste des tableaux ..................................................................................................................... 9 Introduction générale ............................................................................................................. 10 Présentation de concept de base ........................................................................................... 12 Introduction ........................................................................................................................ 12 1.1 Cadre du projet ............................................................................................................. 12 1.1.1 Historique et présentation de l’entreprise d’accueil : la LTDH .............................. 12 1.1.2 Les moyens d’action de la LTDH ............................................................................. 13 1.1.3 Les affiliations de la LTDH ...................................................................................... 14 1.1.4 Les partenaires de la LTDH ..................................................................................... 15 1.1.5 Positionnement social de la LTDH .......................................................................... 15 1.1.6 Le plan d’action triennal ........................................................................................ 16 1.2 Cadre institutionnel et structure organisationnelle de la LTDH .................................... 16 a. Cadre institutionnel .............................................................................................. 16 b. Cadre organisationnel .......................................................................................... 17 1.3 Problématique du projet ............................................................................................... 20 1.3.1 Contexte actuel ...................................................................................................... 20 1.3.2 Les limites de la solution actuelle .......................................................................... 20 1.3.3 La nouvelle solution : Un site web associé à une base de données ...................... 21 a. Les objectifs de la nouvelle solution .................................................................... 21 b. Description de la nouvelle solution ...................................................................... 22 Conclusion ........................................................................................................................... 23 Etat de l’art des sites web ....................................................................................................... 24 Introduction ........................................................................................................................ 24 2.1 Qu’est ce qu’un site web? ............................................................................................. 24 a. Définition .............................................................................................................. 24 b. A quoi sert un site web? ...................................................................................... 24 2.2 Les différents types de sites web .................................................................................. 25 a. Les sites web statiques ......................................................................................... 25 b. Les sites web dynamiques .................................................................................... 26 SUPINFO | Mémoire de fin d’études 5
c. Les différentes catégories de site web ................................................................. 26 2.3 Schéma global d’un site web ........................................................................................ 29 2.4 La structure d’un site web ............................................................................................ 30 a. Structure séquentielle .......................................................................................... 30 b. Structure hiérarchisée .......................................................................................... 31 c. Structure en réseau .............................................................................................. 32 2.5 Les éléments nécessaires à la publication d’un site web .............................................. 33 a. L’hébergement ..................................................................................................... 33 b. Le référencement ................................................................................................. 35 Conclusion ........................................................................................................................... 35 Outils informatiques : ............................................................................................................. 36 Langages de programmation et logiciels mis en œuvre ......................................................... 36 Introduction ........................................................................................................................ 36 3.1 Importance du choix de l’environnement technique ................................................... 36 3.2 Logiciels et langages de développement web utilisés .................................................. 36 3.2.1 Les logiciels utilisés ................................................................................................ 37 a. Adobe Dreamweaver ........................................................................................... 37 b. Adobe Flash .......................................................................................................... 38 c. Powerbullet Presenter ......................................................................................... 39 d. Cyberduck ............................................................................................................ 39 e. Wampserver ......................................................................................................... 40 f. Mysql .................................................................................................................... 40 3.2.2 Les langages de développement utilisés ................................................................ 41 a. PHP (Hypertext Preprocessor) .............................................................................. 41 b. HTML (Hypertext Markup Language) ................................................................... 43 c. CSS (Cascading Style Sheets : feuille de style en cascade) ................................... 43 d. JavaScript ............................................................................................................. 44 3.3 Importance du choix des différents outils ................................................................... 45 Conclusion ........................................................................................................................... 46 APPLICATION ........................................................................................................................... 47 Introduction ........................................................................................................................ 47 4.1 Les spécifications de l’application ................................................................................. 47 a. Objectif ................................................................................................................. 47 b. Besoins fonctionnels ............................................................................................ 47 c. Besoins non fonctionnels ..................................................................................... 48 SUPINFO | Mémoire de fin d’études 6
4.2Le plan architectural ...................................................................................................... 48 4.3 Environnement de travail ............................................................................................. 49 a. Configuration matérielle ...................................................................................... 50 b. Configuration Logicielle ....................................................................................... 50 c. Caractéristiques techniques de l’application ....................................................... 50 4.3 Présentation de l’application ........................................................................................ 51 a. La page d’accueil .................................................................................................. 51 b. La page contact .................................................................................................... 51 c. Le dépliant ............................................................................................................ 52 d. Info flash .............................................................................................................. 52 e. Menu vie associative ............................................................................................ 52 f. Menu rapports ...................................................................................................... 53 g. Menu production ................................................................................................. 53 4.4 Les tâches d’administration ......................................................................................... 54 Conclusion ........................................................................................................................... 56 GESTION DE PROJET ................................................................................................................ 57 5.1 Aspect organisationnel ................................................................................................ 57 5.2 Aspect relationnel ........................................................................................................ 59 5.3 Aspect technique ......................................................................................................... 59 5.4 Documentation ............................................................................................................ 60 5.4 Aspect budgétaire ........................................................................................................ 61 Conclusion générale ................................................................................................................ 62 Bibliographie/Netographie ..................................................................................................... 63 Annexes .................................................................................................................................. 64 Glossaire ................................................................................................................................. 69 SUPINFO | Mémoire de fin d’études 7
Liste des figures
Figure 1 : Structure organisationnelle de la LTDH .................................................................. 18
Figure 2: Structure organisationnelle de la coordination nationale.......................................... 19
Figure 3 : Ancien système de communication de la LTDH ..................................................... 20
Figure 4 : Schéma de l’architecture de la nouvelle solution .................................................... 23
Figure 5: Architecture d’un site web statique .......................................................................... 25
Figure 6: Architecture d’un site web dynamique ..................................................................... 26
Figure 7: Schémas global d’un site web................................................................................... 30
Figure 8: Structure séquentielle................................................................................................ 31
Figure 9: Structure hiérarchisée ............................................................................................... 32
Figure 10: Structure en réseau .................................................................................................. 33
Figure 11: Interface accueil Dreamweaver 8 ........................................................................... 38
Figure 12: Interface accueil Powerbullet ................................................................................. 39
Figure 13: Interface de connexion Cyberduck ......................................................................... 40
Figure 16: Plan architectural de notre site web ........................................................................ 49
Figure 17: Page d’accueil du site web ...................................................................................... 51
Figure 18: Le dépliant de la LTDH .......................................................................................... 52
Figure 19: Menu vie associative du site ................................................................................... 53
Figure 20: Menu rapports du site ............................................................................................. 53
Figure 21: Menu production du site ......................................................................................... 54
Figure 22: Schéma des étapes de la mise à jour ....................................................................... 55
Figure 23: Schéma des étapes de la création d’une nouvelle page .......................................... 56 SUPINFO | Mémoire de fin d’études 8
Liste des tableaux
Tableau 1 : Grandes catégories de site web ........................................................................... 27 Tableau 2 : Différents types de site web ................................................................................. 29 Tableau 3 : Différentes possibilités d’hébergement ............................................................... 34 Tableau 4 : Tableau présentant les motifs du choix de chaque outil ..................................... 46 SUPINFO | Mémoire de fin d’études 9
Introduction générale
Il ne fait désormais plus aucun doute que l'informatique est la révolution la plus importante et
la plus innovante qui a marqué la vie de l'humanité moderne. En effet, les logiciels
informatiques proposent maintenant des solutions à tous les problèmes de la vie, aussi bien
dans des domaines professionnels que pour les applications personnelles. Et leurs méthodes
de conception et de développement ont vu l'avènement d'autant de technologies qui facilitent
leur mise en place et leur donnent des possibilités et des fonctionnalités de plus en plus
étendues.
Après l’apparition de l’ordinateur, Internet est devenu réellement accessible auprès du grand
public au début des années 2000. Sources inépuisables de données, les réseaux Internet ont
modifié en profondeur le rapport à l’information, tout particulièrement les sites web.
De nos jours dans un monde où le développement des Nouvelles Technologies de
l’Information et de la Communication (NTIC) avance à une vitesse remarquable, la visibilité
sur le web est devenue une nécessité pour toutes les entreprises et les organisations désireuses
d’avoir un puissant outil de communication pour pouvoir s’épanouir, c’est le cas de la Ligue
Tchadienne des Droits de l’Homme.
Les entreprises et organisations désireuses d’obtenir un site web ne mesurent pas toujours le
travail à effectuer. Les prestataires de service ou les responsables de projet web sont souvent
confrontés à l’impatience de clients qui ne mesurent pas toujours la quantité de travail
nécessaire pour la conception d’un site web. Les clients sont bien souvent aveuglés par ce que
je nomme « l’effet technologie qui fait tout» et pensent qu’il suffit de quelques clics pour
construire un site web.
Pour nombre d’entres eux, il est difficile de penser que pour la création d’un site web, quelque
soit sa taille ou son objectif, il est nécessaire de faire une étude, de mobiliser des ressources et
au besoin mener des enquêtes. En bref il s’agit de travailler sur les mêmes bases que
n’importe quel projet. L’échec de certains sites web est le plus souvent dû à la négligence des
aspects essentiels comme par exemple la simple étude de faisabilité du projet. Ce résultat est
souvent le fait d’une erreur des concepteurs de sites web qui promettent des délais de
livraison extrêmement courts et ne prennent pas le temps d’étudier l’ensemble des besoins
formulés par le client, et l’impatience des clients qui veulent tout, tout de suite.
Il y a quelques années, il suffisait de quelques clics sur un logiciel pour créer son site web.
Cette méthode existe encore, mais elle s’est révélée assez fastidieuse pour la gestion des
pages conçues via ces programmes. Aujourd’hui la conception de sites web a
considérablement évolué. On parle de plus en plus de systèmes de gestion de contenu qui
permettent de gérer les sites web de façon automatique. De nouveaux langages de
programmation (orientés web) ont vu le jour et l’activité de création de site web connaît un
meilleur encadrement.
SUPINFO | Mémoire de fin d’études 10
L’objectif de ce projet de fin d’études est de concevoir et développer un site web et une base
de données. Il a été réalisé suite à un stage effectué au sein du Département Informatique &
Communications de la LTDH.
Il s’articule autour de cinq chapitres.
Le premier chapitre sera dédié à la présentation de concept de base qui se résume au cadre du
projet où je ferai la présentation de l’institution d’accueil ainsi qu’à la problématique du
projet.
Dans le deuxième chapitre, je parlerai de l’état de l’art des sites web, notamment les différents
types de sites web, leurs architectures ainsi que des éléments nécessaires à leur exploitation.
Dans le troisième chapitre, je parlerai essentiellement des outils informatiques nécessaires à la
réalisation du projet, du choix des langages de développement, un aperçu des principaux
logiciels utilisés, leurs avantages ainsi que leurs intérêts dans la réalisation d’un tel projet.
Dans le quatrième chapitre, je parlerai de la réalisation de l’application, de l’environnement
de développement, de la publication en ligne ainsi que des éléments essentiels à son
exploitation.
Enfin, dans le dernier chapitre, je parlerai de la gestion du projet, du déroulement du stage,
des différentes étapes de la réalisation ainsi que tous les aspects relationnels du projet.
SUPINFO | Mémoire de fin d’études 11
1
Présentation de concept de base
Introduction
A travers ce chapitre, je présenterai l’institution d’accueil : la Ligue Tchadienne des Droits de
l’Hommes (LTDH). Le département dans lequel le projet a été réalisé : le Département
Informatique & Communication et la problématique du projet. Je présenterai par la suite l’état
de l’art des différents concepts et technologies de l’informatique faisant objet de ce projet.
1.1 Cadre du projet
Ce projet de fin d’études intitulé : « Conception et développement d’un site web » est réalisé
en vue de l’obtention du Diplôme d’Ingénieur en Informatique à l’École Supérieure
d’Informatique (SUPINFO) pour l’année académique 2011 /2012.
1.1.1 Historique et présentation de l’entreprise d’accueil : la
LTDH
Etant l’une des premières organisations de défense de droit de l’homme au Tchad, la Ligue
Tchadienne des Droits de l’Homme (LTDH) a été créée le 15 Février 1991 à N’Djaména au
Tchad. Elle a pour principales missions de:
-
Premier axe : Mener de façon permanente une SURVEILLANCE de l'action
des institutions publiques pour assurer :
•
la justice, l'égalité des citoyens, le respect des droits et libertés;
•
la sauvegarde de la moralité des institutions, la sauvegarde des règles et principes
de l'Etat de Droit et des principes démocratiques;
le respect des instruments nationaux, régionaux et internationaux des droits de
l'Homme.
•
A cet effet, la L.T.D.H. œuvre à tous les niveaux pour renforcer au niveau de la société
tchadienne les valeurs morales et légales fondamentales indispensables à la survie, à la paix et
SUPINFO | Mémoire de fin d’études 12
à la justice, elle contribue également à la réalisation du processus de démocratisation et de la
citoyenneté démocratique.
-
Deuxième axe : Mener de façon permanente la SURVEILLANCE des rapports
entre les citoyens pour assurer : l'égalité et la légalité.
Aussi, combat-elle l'esclavage sous toutes ses formes, les abus contre la liberté de presse,
l'insécurité (récurrente au Tchad); elle s'emploie à la prévention, à la gestion, et à la médiation
(règlement des conflits et affrontements entre agriculteurs et éleveurs, sédentaires et
nomades); sa mission se manifeste concrètement par la lutte contre les atteintes aux droits de
propriété touchant les particuliers, les atteintes à l'intégrité des personnes physiques (cas des
femmes violées et/ou battues). Elle combat aussi le mépris et l'oubli afin de créer des
conditions favorables à la connaissance, l'existence et la jouissance de leurs droits et libertés
par les citoyens ; en clair, enseigner, former et éduquer aux droits et libertés reconnus par le
Tchad et par la communauté internationale.
Le siège de l’organisation se trouve à N’Djamena, capitale du Tchad. Il existe des
coordinations régionales dans les grandes régions du Tchad.
1.1.2 Les moyens d’action de la LTDH
Ils sont de six (6) ordres :
1. L'INTERPELLATION avec le Droit national et international comme base, et sur la
base des principes d'objectivité et de neutralité.
2. Les supports formels de l'interpellation comprennent : communiqué, pétition,
manifeste, recours aux réseaux et sources de pression diplomatiques et non
gouvernementales, interventions auprès des pouvoirs publics, des juridictions,
publication du journal "La Lettre de la L.T.D.H.", publication de rapports périodiques.
3. L'OBSERVATION des élections, des procès, des lieux de détention, la
DENONCIATION des lieux secrets de détention.
4. La MEDIATION dans les conflits.
5. La PARTICIPATION AUX PROCESSUS DECISIONNELS, par des lobbyings pour
les projets ou propositions de lois, à l'élaboration et à la validation des textes de portée
nationale.
6. L'AIDE A LA REALISATION DU DROIT
7. La CONTRIBUTION à la connaissance du droit, par des séminaires, ateliers,
concours, publication de dépliants et de guides, conseil juridique et à la connaissance
des lois électorales, des opérations et mécanismes qui en découlent, etc.
SUPINFO | Mémoire de fin d’études 13
1.1.3 Les affiliations de la LTDH
La Ligue Tchadienne des Droits de l’Homme est affiliée à plusieurs organisations
internationales parmi lesquelles:
La Fédération Internationale des Droits de l’Homme (FIDH)
La Fédération internationale des ligues des droits de l'homme (FIDH) est une organisation
non gouvernementale fédérative dont la vocation est d’agir concrètement pour le respect de
tous les droits énoncés dans la Déclaration universelle des droits de l’homme de
1948, les droits civils et politiques comme les droits économiques, sociaux et culturels.
Composée d'une dizaine d'associations nationales à sa création en 1922, dont les ligues
française (Ligue des droits de l’homme) et allemande (Internationale Liga für
Menschenrechte), la FIDH rassemble, depuis le congrès d'Erevan, en avril 2010, 164 ligues
membres dans plus de 100 pays. Elle coordonne et soutient les actions de ses ligues et leur
apporte un relais sur le plan international.
À l'instar des ligues qui la composent, la FIDH est non partisane, non confessionnelle et
indépendante de tout gouvernement.
La FIDH dispose d'un statut consultatif auprès de l'ONU, de l'UNESCO et du Conseil de
l’Europe, et du statut d'observateur auprès de la Commission africaine des droits de l'homme
et des peuples.
L’Union Interafricaine des Droits de l’Homme (UIDH)
L'Union Interafricaine des Droits de l'Homme (UIDH) est une organisation panafricaine non
gouvernementale regroupant une quarantaine d’association nationale œuvrant dans la
promotion et la défense des Droits de l’Homme.
Elle a été créée en 1992 à Ouagadougou où est implanté son siège.
Amnesty Internationale (AI)
Amnesty International (AI) est une organisation non gouvernementale qui défend les droits
humains et le respect de la Déclaration universelle des droits de l’homme. Cette organisation
milite notamment pour la libération des prisonniers d’opinion, l'abolition de la peine de mort
et de la torture et l'arrêt des crimes politiques, mais aussi pour le respect de l'ensemble des
droits civils, politiques, économiques, sociaux et culturels.
SUPINFO | Mémoire de fin d’études 14
1.1.4 Les partenaires de la LTDH
La Ligue Tchadienne des Droits de l’Homme est partenaire avec plusieurs organisations et
institutions internationales entre autres
§
§
§
§
§
§
§
§
§
§
§
§
§
Pain Pour Le Monde (Allemagne)
Agir Ensemble pour les Droits de l'Homme (France)
Tchad-Solidarité-France (France)
FIDH (France)
Amnesty International (France)
Agence Intergouvernementale pour la Francophonie (France)
Institut Panos (Bamako)
National Endowment for Democracy (USA)
UIDH (Burkina Faso)
Commission Africaine des Droits de l'Homme et des Peuples (CADHP)
Commission des Droits de l'Homme de l'ONU
Haut Commissariat pour les Droits de l'Homme
Union Européenne.
1.1.5 Positionnement social de la LTDH
Première organisation de promotion, de protection et de défense des droits de l'Homme, la
Ligue Tchadienne des Droits de l'Homme est et demeure à la pointe de la lutte pour donner
force, contenu et effectivité aux droits de l'Homme, et ainsi participer à la construction d'un
Etat de droit au Tchad. Il s'en suit qu'elle occupe une place prépondérante au sein de la société
civile, de la population et sur l'échiquier tchadien. Quelques indicateurs:
v Un fort flux d'adhésion des citoyens, désabusés par les échecs récurrents des politiques
libérales, économiques et sociales, qui grossissent ainsi les rangs des militants pour la
cause des droits de l'Homme d'une part, et d'autre part qui espèrent protection et défense
contre l'abus et l'arbitraire des pouvoirs publics et « des personnes intouchables ».
v Une forte sollicitation de la part de la société civile (syndicats, ADH, organismes de
développement), de la société politique, et d'autres partenaires sur des questions de
formation, de prise de position sur les questions emportant la vie nationale, assistance et
de conseils juridiques.
v Une forte sollicitation des pouvoirs publics (Gouvernement, Médiateur National,
Administration Territoriale, Chef de l'Etat, etc.) dans des cadres de concertation,
d'échange, de prestation, d'avis à émettre. Les sollicitations se sont véritablement
intensifiées ces dernières années (médiation entre gouvernement et opposition armée,
entre agriculteurs et éleveurs, ingénierie de formation), tant il est vrai que le pouvoir en
tire les dividendes et n'hésite nullement à en faire un fonds de commerce.
SUPINFO | Mémoire de fin d’études 15
1.1.6 Le plan d’action triennal
En vue de réaliser ses objectifs en matière de promotion, de protection et de défense des droits
de l’homme, la LTDH se propose d’entreprendre des actions en conformité avec le droit
national et international articulées dans un schéma de planification triennal dans le but
d’apporter des solutions aux problèmes des droits de l’homme au Tchad.
Après le IVème congrès ordinaire de l’association tenue en octobre 2001 à N’djaména et de
l’auto-évaluation institutionnelle des mois de juin et juillet 2002 et ce, en dépit des
insuffisances constatées, il ressort la nécessité d’élaborer un plan d’action triennal qui tienne
compte des forces et faiblesses de l’organisation, de ses capacités réelles et de ses
expériences.
Au cours de ces années d’expériences et de pratiques, la LTDH a capitalisé un savoir-faire
spécifiques. La conservation et le développement de ce savoir-faire dépassent largement le
simple cadre documentaire ou le simple cadre de mémoire collective. Cette caractéristique
s’inscrit désormais dans une logique de pérennité organisationnelle et dans l’amélioration des
compétences.
Le Plan d’Action Triennal comporte six (6) grandes parties :
Ø Analyse de la situation des droits de l’homme au Tchad ;
Ø Situation interne de l’organisation, notamment sa restructuration ;
Ø Présentation de la vision de la LTDH ;
Ø Orientations, objectifs globaux et grandes actions ;
Ø Activités ;
Ø Budget.
1.2 Cadre institutionnel et structure organisationnelle de la LTDH
a. Cadre institutionnel
•
Le Congrès : Le Congrès est l'organe suprême de la Ligue. Il se réunit en session
ordinaire tous les trois ans et en session extraordinaire en cas de besoin. Il est composé
des Délégués des cellules et des membres du Conseil d’Orientation et de Contrôle. Le
Congrès se réunit en session ordinaire pour définir les grandes orientations de
l'organisation.
•
Conseil d’orientation et de contrôle : Le COC est l'organe chargé de veiller à
l’exécution des orientations du congrès. Il comprend onze (11) membres bénévoles
dont sept (7) désignés par les régions de la ligue et quatre (4) par la ville de
N’djaména pour un mandat de trois (3) ans renouvelables une seule fois. Le COC se
réunit en session ordinaire tous les six mois et en session extraordinaire sur
convocation du Président lorsque la situation l’exige ou à la demande des 2/3 de ses
membres
•
Président : Elu par le Congrès, il joue le rôle de médiation entre les membres de
l’organisation en cas de besoin.
SUPINFO | Mémoire de fin d’études 16
b. Cadre organisationnel
Le personnel de la LTDH est affecté dans sa majorité au bureau principal de N’Djaména situé
a Ardep Djoumal. Pour des raisons de gestion efficace, hormis la Coordination Nationale, il
existe cinq (5) coordinations régionales qui regroupent un grand nombre de villes.
•
•
•
•
•
Région des Logones et Tandjilé : Moundou, Doba, Kélo, Bébidja;
Région du Mayo-Kebbi : Pala, Léré, bongor;
Région du Ouaddai : Abéché, Ati, Faya;
Région du Moyen-Chari : Sarh, Maro, Moïssala;
Région du Lac-Kanem : Bol, Mongo;
La figure (Figure 1) de la page suivante, décrit l’organigramme de l’organisation et la figure
(Figure 2) présente la structure organisationnelle de la coordination nationale et le
Département Informatique & Communication est le département dans lequel j’ai eu l’honneur
d’y réaliser ce projet de fin d’étude.
SUPINFO | Mémoire de fin d’études 17
Figure 1 : Structure organisationnelle de la LTDH
Le département Informatique & Communication est affilié à la coordination nationale. La
coordination nationale regroupe quatre grands départements que sont:
SUPINFO | Mémoire de fin d’études 18
-
le Département des projets & programmes
le Département Informatique & Communication
le Département des affaires juridiques et du contentieux
le Département de la comptabilité, des finances et du budget
Ainsi donc, dans le cadre de ce projet j’ai eu le privilège d’être accueilli au sein du
Département Informatique & Communication de la LTDH.
Figure 2: Structure organisationnelle de la coordination nationale
SUPINFO | Mémoire de fin d’études 19
1.3 Problématique du projet
1.3.1 Contexte actuel
La LTDH dispose d’une infrastructure de communication lui permettant de communiquer
avec le public ainsi qu’avec l’ensemble des coordinations régionales et ses partenaires
internationaux. Ces méthodes de communication sont des méthodes usuelles connues
(campagne d’information, communiqué radiodiffusé, courrier, email, etc.).
Cellule Département communication & informatique (email, campagne, courrier, etc.) Coordination régionale (courrier, campagnes radiodiffusées) Cellule Public Partenaires Figure 3 : Ancien système de communication de la LTDH
La communication de la LTDH est centralisée au niveau du département Informatique &
Communication qui se trouve au niveau de la Coordination nationale. Pour faire passer
l’information ou les communiqués auprès des différentes coordinations régionales la LTDH
utilise chaque jour, les emails, les campagnes d’informations radiodiffusées ainsi que des
courriers. Ces méthodes ont été adoptées depuis par l’organisation pour son bon
fonctionnement.
1.3.2 Les limites de la solution actuelle
Nonobstant le fait que ces méthodes répondent aux impératifs initiaux, celles-ci ne
s’inscrivent plus dans l’ère du temps et ont atteint leurs limites dont les principales
s’établissent comme suit :
SUPINFO | Mémoire de fin d’études 20
Ø le coût des campagnes d’information et des communiqués radiodiffusés qui reviennent
extrêmement cher à l’organisation tant sur le plan financier que sur le plan
organisationnel.
Ø La mobilisation des bénévoles au sein de la population pour assurer la distribution des
tracts entraine une perte de temps inestimable
Ø L’utilisation intempestive des papiers (courrier) pour acheminer les communiqués
auprès des coordinations régionales ainsi que des cellules et vice versa. Toutes les
informations recueillies par les coordinations régionales et les cellules arrivent au
niveau de la coordination nationale par voie postale.
Ø En cas de panne d’imprimante, toute la production de l’organisation (la lettre de la
LTDH et info LTDH) est arrêtée ce qui entraine un retard de communication auprès
du grand public.
Ø L’augmentation du volume des informations à archiver, rend le travail de l’archiviste
difficile étant donné que tous les documents ne peuvent être archivés qu’au niveau de
la coordination nationale de Ndjamena.
1.3.3 La nouvelle solution : Un site web associé à une base de
données
Afin de pallier à ces insuffisances, j’ai proposé à l’organisation de travailler à l’amélioration
du système d’information. Après analyse et évaluation, j’ai proposé une synthèse générale de
solutions techniques disponibles qui sont en adéquation avec les besoins actuels et futurs ainsi
que les moyens de leur mise en place.
a. Les objectifs de la nouvelle solution
Les objectifs de la nouvelle solution sont de répondre aux principales insuffisances de
l’ancienne solution par la mise en place d’une solution technique d’un site web associé à une
base de données.
La nouvelle solution intègre les fonctionnalités ci-dessous :
Ø La centralisation de l’information sur le site afin de faciliter son accessibilité en temps
réel
Ø Mise en ligne de la production de la LTDH (la lettre de la LTDH et Info LTDH)
Ø Possibilité de consultation et de téléchargement des documents en ligne
Ø L’établissement de la base de données visant la sauvegarde et l’archivage facile des
documents
Ø L’accès à la base de données à partir de toutes les coordinations régionales
Ø Une adresse de messagerie unique pour faciliter les échanges avec le public
SUPINFO | Mémoire de fin d’études 21
Ø Assurer l’évolution technique du site web ainsi que les mises à jour.
Cette solution permettra d’apporter des avancées significatives dans la communication aussi
bien nationale qu’internationale de l’organisation. Elle permettra à la LTDH de s’assurer des
économies considérables au niveau de l’utilisation de ses ressources.
Cela dit, la nouvelle infrastructure sera composée essentiellement de deux composantes : le
site web comme vitrine et la base de données dont l’accès ne sera pas autorisé au public.
b. Description de la nouvelle solution
La solution technique, que j’ai adoptée, est une solution qui se présente sous deux angles. Le
premier est le site web qui se présente comme une application qui peut être accessible par tout
le monde à partir d’une connexion Internet et dans lequel on pourrait trouver toutes les
informations relatives à l’organisation que ce soit sur la présentation, les différentes activités
ou l’ensemble du personnel. Le second angle est la base de données qui permettra de stocker
toutes les informations mais encore de les organiser pour une utilisation future.
Pour arriver à la réalisation de cette solution technique, je vais combiner des technologies et
des langages de développement bien connus comme PHP, HTML, JavaScript et CSS pour
améliorer l’interface graphique, et MySQL pour la création et la gestion de la base de
données.
Le site web aura pour objectif principal, l’amélioration de la communication de la LTDH, il
servira de vitrine pour l’organisation en offrant de nouvelles possibilités telles que le
téléchargement des documents en ligne. Aussi ce site web permettra de mettre toutes les
informations en ligne et d’éviter de faire des campagnes d’information par le biais des
médias, ce qui réduira les coûts financiers et aussi les coûts en ressources humaines car avec
le site web, la mobilisation des bénévoles ne s’avèrera plus nécessaire pour assurer la
distribution des tracts. En outre, avec la possibilité d’accès à la base de données pour les
coordinations régionales, celles-ci pourront s’y connecter et récupérer les informations dont
elles auront besoin ou y mettre des informations à destination de la coordination nationale, ce
qui évite la multiplication des envois postaux.
Ce site web constituera un outil de choix permettant à la LTDH de promouvoir sa
participation effective au réseau international des Droits de l’Homme. L’adresse de
messagerie disponible sur le site web permettra au public ainsi qu’aux partenaires
internationaux d’échanger avec l’organisation depuis la page d’accueil du site web.
SUPINFO | Mémoire de fin d’études 22
Département communication & Informatique Base de données Cellules Site web Partenaires Public Coordinations régionales Figure 4 : Schéma de l’architecture de la nouvelle solution
Conclusion
Dans ce chapitre, je me suis consacré, à la présentation de l’institution d’accueil ainsi qu’à la
problématique du projet.
Le deuxième chapitre sera consacré à la définition des notions essentielles et à la présentation
de l’état de l’art des sites web, de leur architecture ainsi que des éléments nécessaires à leur
exploitation.
SUPINFO | Mémoire de fin d’études 23
2
Etat de l’art des sites web
Introduction
Dans le chapitre précédent j’ai présenté l’institution d’accueil dans son ensemble ainsi que la
problématique du projet. Dans ce chapitre, je définirai les différents types de site web, je
parlerai aussi de l’architecture des sites web ainsi que des éléments nécessaires à leur
exploitation.
Pour mieux appréhender la question du type de site web adapté à la LTDH, j’évoquerai dans
cette partie les différentes notions et architectures des sites web ayant trait à ce projet.
2.1 Qu’est ce qu’un site web?
a. Définition
Un site web est composé d'un ensemble de documents structurés, nommés pages web, stockés
(hébergés) sur un ordinateur proche ou distant (serveur) connecté au réseau mondial
(Internet).Une page web contient essentiellement du texte (simple ou animé), et est souvent
enrichie d'images, de sons, de vidéos et de liens vers d'autres pages web.
b. A quoi sert un site web?
Avec l’évolution du monde, Internet est devenu dans la vie quotidienne aussi indispensable
que la télévision, le téléphone, etc. Lorsqu’un internaute arrive sur un site web c’est dans un
but précis : trouver les réponses à ses questions, partager, communiquer, s’amuser, etc.
L’ère numérique implique l’accès à l’information en direct et en permanence, répondant au
besoin du “tout et tout de suite”. Une page web contient des informations, généralement pour
informer ou faire connaître. Dans le cadre d’une utilisation privée, une page web permet par
exemple de communiquer et de partager des ressources telles que des photos, des vidéos, des
messages, etc. Pour accéder à ses ressources, il suffit d’être connecté sur Internet, n’importe
où dans le monde. Les entreprises, quant à elles, auront tendance à vouloir développer leur
image et notoriété, et utiliser leur site web comme support de diffusion d’information et de
publicité : cela consiste à présenter l’entreprise, son activité et ses produits. C’est le meilleur
rapport qualité/prix par excellence pour être visible par l’ensemble de la planète.
L’intérêt d’un site web est de pouvoir être vu par tout le monde. Son potentiel, quelque soit
l’usage qu’on en fait, est illimité. Pour une entreprise ou une organisation, un site web permet
SUPINFO | Mémoire de fin d’études 24
de mettre en avant son image et affirmer sa présence sur le réseau Internet. C’est surtout une
façon de démontrer sa capacité d’ouverture et d’évolution.
2.2 Les différents types de sites web
Il existe des sites web statiques et dynamiques classés en trois (3) catégories principales.
a. Les sites web statiques
Un site web statique est un ensemble de pages HTML, entre lesquelles un internaute peut
naviguer au moyen de liens hypertextes placés dans les pages et le contenu des pages est fixe.
Les sites web statiques sont généralement destinés aux particuliers, ils permettent de réduire
le coût d’hébergement et les mises à jour de ces derniers ne nécessitent que la maîtrise des
notions de base du langage HTML et du webdesign. Il permet aussi d’obtenir un bon
référencement car toutes les pages sont individualisées et l’historique du site est conservé sur
Internet.
Figure 5: Architecture d’un site web statique
SUPINFO | Mémoire de fin d’études 25
b. Les sites web dynamiques
Un site web dynamique est un site web dont les pages sont générées dynamiquement, c’est à
dire en fonction des demandes effectuées par les visiteurs (saisie de texte dans des zones
spéciales, listes déroulantes, case à cocher, boutons d’option, etc.) et en sollicitant les bases de
données du site. Par exemple sur un site de commerce électronique, lorsque l’internaute saisit
un nom de produit dans le champ de recherche du site, le site affiche des résultats en fonction
de la demande et dès que l’utilisateur change sa demande, il affiche un résultat différent. Pour
traiter ces informations, il existe plusieurs systèmes et langages, mais les plus connus sont
Linux (système d’exploitation), Apache (serveur web), PHP (langage de programmation) et
MySQL (base de données). Cette configuration est proposée par la plupart des hébergeurs
actuels.
Figure 6: Architecture d’un site web dynamique
c. Les différentes catégories de site web
Il existe plusieurs raisons qui peuvent pousser à la création d’un site web. Ce sont bien
souvent ces raisons qui déterminent le type de site web à mettre en place. Il est évident qu’un
particulier n’a pas les mêmes besoins qu’une association ou une institution. De même qu’une
association ou une institution n’a pas les mêmes besoins qu’une entreprise, d’où la nécessité
de bien fixer ses objectifs.
Il existe trois grandes catégories de sites web que j’ai classées dans le tableau suivant :
SUPINFO | Mémoire de fin d’études 26
CATEGORIE
DESCRIPTION ET EXEMPLES
Les sites web d’information
Ils représentent 70% voire 80% du web. Il
s’agit de sites web sur lesquels les
internautes se connectent pour récupérer des
informations (formelles ou informelles)
Exemple : les sites web des journaux et
télévisions
Les sites web de divertissement
Il en existe de plus de plus, ils permettent aux
internautes de se divertir uniquement. C’est
le cas des sites web de musiques ou de films
en streaming ou des sites de jeux en ligne
Exemple : webjeux.com
Les sites web
divertissement
d’information
et
de Il s’agit de sites web sur lesquels, suivant
l’utilisation, on peut se divertir mais aussi
s’informer
Exemples : les sites de vidéos en ligne
comme Youtube, Dailymotion et autres.
Tableau 1 : Grandes catégories de site web
Outre ces trois grandes catégories, on distingue également différents types de sites web :
SUPINFO | Mémoire de fin d’études 27
TYPES DE SITES
DESCRIPTION
Les sites marchands
Ils permettent l’achat et la vente de produits
et services en ligne. On peut également
accéder au catalogue d’une entreprise.
Exemple : Ebay.com, cdiscount.fr
Les sites Institutionnels
Ils permettent d’accéder à des informations
sur les entreprises, les collectivités locales,
les organisations internationales ou les
organisations gouvernementales
Exemple : www.education.gouv.fr
Les sites thématiques
Il s’agit de sites web traitant de sujets bien
précis comme la sécurité informatique, la
cuisine italienne ou l’art numérique
Exemple : securiser.com
Les portails d’entreprise
Il s’agit de sites web d’entreprise ouvert aux
salariés ou aux clients de l’entreprise. On
parle d’Intranet lorsqu’il permet d’accéder au
système d’information de l’entreprise. Les
clients peuvent également accéder à un
espace dédié pour effectuer des opérations
variées comme la consultation de facture ou
accéder aux différentes commandes.
Les communautés virtuelles ou les réseaux Ils donnent la possibilité aux Internautes de
se réunir autour de la toile et d’échanger sur
sociaux
des sujets particuliers
Exemple : Le réseau social Facebook
SUPINFO | Mémoire de fin d’études 28
Les Blog ou les pages perso
Les blogs permettent aux internautes de
s’exprimer librement sur la toile. Ils peuvent
donner leur avis sur des questions politiques,
des évènements, et autres. C’est une sorte de
journal intime, plus ou moins ouvert. Il existe
également des blogs très sérieux qui
permettent de suivre l’information. Le but est
de faire réagir les lecteurs aux publications
(ou billets) grâce à un système de
commentaires.
Les books ou les portfolios
Les books et les portfolios permettent aux
artistes de se faire connaître. Le book est
souvent utilisé par les mannequins tandis que
les portfolios sont utilisés par les artistes ou
par des étudiants souvent à la recherche
d’emploi. Le but est de mettre en avant leurs
réalisations ou travaux.
Tableau 2 : Différents types de site web
Quand on souhaite se lancer dans le développement d’un site web, il est important de définir
la catégorie de son futur site web. Cela permet d’identifier les spécifications techniques et le
temps nécessaire à la réalisation du projet, car les projets diffèrent les uns des autres par la
densité et la qualité de l’information que l’on souhaite faire passer. Le projet d’un site de
divertissement ne sera pas le même que celui d’un site de commerce, tout comme celui d’un
site d’information ne sera pas le même que celui d’un site de réseau social, etc.
2.3 Schéma global d’un site web
Avant de se lancer dans la réalisation d’un site web, il est nécessaire de prendre un temps de
réflexion préalable pour définir les grands axes et les objectifs à atteindre dont voici cidessous un schéma qui reprend les grands traits
SUPINFO | Mémoire de fin d’études 29
Objectifs Public visé Contenu Visuel Fonctionnel Figure 7: Schémas global d’un site web
2.4 La structure d’un site web
Lorsque l’on prépare le design d’un site web, la chose la plus importante à considérer serait la
satisfaction du visiteur. Il est très important de lui faciliter la recherche de sorte que cela
l’incite à revenir plus souvent sur le site.
Le but final est de fournir au visiteur l’information qu’il souhaite en un minimum d’étapes et
donc un minimum de temps. Pour autant que des normes strictes existent en la matière, on
parle de la "règle des trois clics" selon laquelle toute information du site doit être disponible
en maximum trois clics de souris. Il faut donc hiérarchiser l’information selon une structure
efficiente afin de minimiser la navigation vers l’information.
a. Structure séquentielle
Le moyen le plus simple d’organiser l’information est la façon séquentielle. C’est en quelque
sorte le retour au livre avec sa narration linéaire : chapitre 1, chapitre 2, chapitre 3, etc.
SUPINFO | Mémoire de fin d’études 30
Figure 8: Structure séquentielle
La structure séquentielle est adaptée aux sites web d’apprentissage ou tutoriaux où le passage
à une page suivante requiert des pré-requis exposés à la précédente.
Cette structure séquentielle est aussi conseillée pour les petits sites car de longues séquences
narratives ou explicatives nécessiteront souvent une structure plus sophistiquée pour rester
compréhensives.
b. Structure hiérarchisée
La structure hiérarchisée est une des meilleures façons d’organiser des blocs d’information
complexes. Ce schéma organisationnel s’adapte particulièrement bien au site web car les
différents thèmes traités dépendent uniquement d’une seule page qui est appelée soit la page
d’index ou page d’accueil.
SUPINFO | Mémoire de fin d’études 31
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐-­‐-­‐ Figure 9: Structure hiérarchisée
Cette organisation hiérarchisée en blocs d’information indépendants nécessite cependant un
gros travail d’analyse préalable du contenu de notre site web (notion pré-requises, doublons
d’information, etc.) car cette structure hiérarchisée ne sera efficiente que si l’ensemble des
informations que nous disposons est soigneusement organisé.
c. Structure en réseau
Cette structure fonctionne bien pour des petits sites web destinés à des utilisateurs hautement
qualifiés en quête d’enrichissement ou de perfectionnement plutôt qu’à la compréhension
basique d’un sujet. Dans ce genre de contexte il est plus question de l’association d’idées et le
libre cours de la pensée. Chaque visiteur va parcourir le site web de façon unique selon ses
propres intérêts et sa propre démarche vers l’information sans avoir l’impression d’être dirigé.
Ce type de structure exploite la pleine puissance des liens vers des informations à l’intérieur
du site web et vers des informations situées dans d’autres sites sur Internet.
SUPINFO | Mémoire de fin d’études 32
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐ -­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐
-­‐-­‐-­‐-­‐-­‐ Figure 10: Structure en réseau
Cette structure en réseau se révèle cependant ardue à mettre en place et finalement peu
pratique surtout pour les internautes novices dans le sujet traité. Ceux-ci auront l’impression
d’un site confus, difficilement exploitable.
2.5 Les éléments nécessaires à la publication d’un site web
Les éléments nécessaires, constituent l’ensemble des mesures à prendre pour assurer la vie de
son site web (C'est-à-dire pour sa mise en ligne et sa visibilité). Parmi ces mesures nécessaires
on distingue :
Ø L’hébergement ;
Ø Le référencement ;
a. L’hébergement
L’hébergement est un service qui consiste à mettre à disposition en permanence un site web
sur un ordinateur sécurisé et connecté à Internet (serveur web). De nos jours, il existe
SUPINFO | Mémoire de fin d’études 33
plusieurs possibilités pour héberger son site web que j’essayerai de classer dans le tableau
(voir Tableau 3) ci-dessous :
TYPE
AVANTAGES
INCONVENIENTS
Hébergement gratuit
Aucun frais n’est demandé
Publicité encombrante, nom
de domaine avec l’extension
obligatoire de l’hébergeur du
type http://votresite.free.fr
Hébergement mutualisé
Pas de publicité, et libre
choix par rapport à son nom
de domaine en .com .org ou
.fr
(sous
réserve
de
disponibilité)
Obligation d’un abonnement
mensuel ou annuel suivant
l’hébergeur. Trafic souvent
limité. Cette technique est
déconseillée aux sites web
qui génèrent d’important
trafic
Hébergement dédié
Pas de publicité, et libre Abonnement mensuel ou
choix par rapport à son nom annuel suivant l’hébergeur,
de domaine en .com .org ou mais très couteux.
.fr
(sous
réserve
de
disponibilité). Trafic illimité
et possibilité de configurer
son serveur en fonction de
ses besoins
Tableau 3 : Différentes possibilités d’hébergement
L’hébergement gratuit est fortement déconseillé, il est moins optimisé pour le référencement
de son site web, et la publicité qui l’accompagne peut devenir très embarrassante pour le
visiteur.
SUPINFO | Mémoire de fin d’études 34
b. Le référencement
Le référencement et l’hébergement sont étroitement liés. Dans un passé récent, le
référencement des pages web se faisait par la lecture des mots clés insérés dans les balise du
code.
Le référencement est l’ensemble des techniques permettant d’améliorer la visibilité d’un site
web et ainsi de lui donner un meilleur positionnement dans les moteurs de recherche. Le
positionnement sur les moteurs de recherche est l’une des principales sources de création de
trafic sur un site web de nos jours.
En effet, il permet aux internautes d’accéder à un site sans connaître son adresse. Un bon
référencement sur Internet est essentiel puisque « un bon nombre d’internautes cliquent sur le
premier lien naturel d’une page de résultats.
Il existe des techniques faciles et simples pour le référencement tels que :
Ø L’inscription sur un annuaire web : c’est un site qui classe de façon thématique les
sites qu’il sélectionne lui-même ou qui lui sont soumis. Des éditeurs analysent le
contenu des pages et créent des résumés de leurs contenus dans le but d’orienter les
internautes.
Ø L’inscription sur des moteurs de recherche : il s’agit d’ajouter des pages web à l’index
d’un moteur de recherche. Les principaux moteurs de recherche sont capables de
détecter les nouveaux documents sur le web (et les nouveaux sites). Il est conseillé de
soumettre aux outils des recherches, via des formulaires qu’ils proposent, une liste des
URL du site (ou sitemap) pour en faciliter son exploitation par les moteurs. Le
référencement se fait ainsi naturellement.
Conclusion
J’ai, dans ce chapitre, présenté l’état de l’art ainsi que l’architecture détaillé des sites web
dans son ensemble, j’ai aussi parlés de l’importance de certaines notions du Web qui sont
essentielles à prendre en compte pour la réalisation d’un tel projet.
Dans le chapitre suivant, je parlerai de l’ensemble des outils informatiques nécessaires à la
création d’un site web ainsi qu’à sa maintenance afin d’assurer l’évolution du site. Je donnerai
aussi quelques raisons qui ont motivées mes choix. Ces outils m’ont servi à plus d’un titre
pour la réalisation de ce projet.
SUPINFO | Mémoire de fin d’études 35
3
Outils informatiques :
Langages de programmation et
logiciels mis en œuvre
Introduction
Dans le chapitre précédent, j’ai eu à parler de l’état de l’art des sites web, des notions
essentielles pour la création d’un site web ainsi que des conditions de leur bonne exploitation.
Ce chapitre a pour objectif majeur d’exposer l’environnement technique de développement
dans lequel j’ai travaillé, la solution conceptuelle que j’ai choisie, ensuite je donnerai les
raisons qui ont motivé le choix des différents langages et logiciels utilisés pour la réalisation
de ce projet. Enfin je ferai un aperçu des langages et de leurs avantages pour un tel projet.
3.1 Importance du choix de l’environnement technique
L’environnement technique d’un site web se compose essentiellement de langage de
programmation, de serveur, de l’environnement de programmation, du système d’exploitation
et éventuellement si besoin d’une base de données.
Un site web est un ensemble de page web, de documents structurés hébergés sur un serveur et
accessible à une adresse web donnée. Mais ce pendant il existe de nombreux langages de
programmation et de logiciels pouvant servir à sa réalisation.
Dans le cadre de ce projet j’ai porté mon choix sur des langages de programmation et logiciels
gratuits, simple d’utilisation et disposant d’une importante communauté d’utilisateurs, et donc
une multitude de librairies disponibles. L’intérêt de tous ceci est d’avoir un site web facile
d’administration et bien référencé.
3.2 Logiciels et langages de développement web utilisés
SUPINFO | Mémoire de fin d’études 36
Pour la réalisation de ce projet, j’ai utilisé le logiciels d’édition Adobe Dreamweaver, le
logiciel Adobe Flash, le logiciel Powerbullet Presenter, le logiciel Cyberduck, le logiciel
Wampserver, le logiciel de gestion de base de données Mysql et les langages de
développement web PHP, HTML, JavaScript et CSS.
3.2.1 Les logiciels utilisés
a. Adobe Dreamweaver
Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de
type WYSIWYG (What You See Is What You Get). Il fut l'un des premiers éditeurs HTML
de type « tel affichage, tel résultat », mais également l'un des premiers à intégrer un
gestionnaire du site (CyberStudio GoLive étant le premier). Ces innovations l'imposèrent
rapidement comme l'un des principaux éditeurs de site web, aussi bien utilisable par le
néophyte que par le professionnel.
Dreamweaver offre deux modes de conception par son menu affichage. L'utilisateur peut
choisir entre un mode création permettant d'effectuer la mise en page directement à l'aide
d'outils simples, comparables à un logiciel de traitement de texte (insertion de tableau,
d'image, etc.). Il est également possible d'afficher et de modifier directement le code (HTML
ou autre) qui compose la page. On peut passer très facilement d'un mode d'affichage à l'autre,
ou opter pour un affichage mixte. Cette dernière option est particulièrement intéressante pour
les débutants qui, à terme, souhaitent se familiariser avec le langage HTML. Il a évolué avec
les technologies de l'Internet
Il offre, aujourd'hui, la possibilité de concevoir des feuilles de style. Les liaisons avec des
bases de données ont également été améliorées ainsi que le chargement des fichiers sur les
serveurs d'hébergement. Il propose, en outre, l'utilisation de modèles imbriqués de pages web,
selon un format propriétaire.
Depuis la version MX, il peut être utilisé avec des langages web dynamiques (ASP, PHP) à
l'aide d'outils relativement simples d'utilisation. Il permet ainsi de développer des applications
dynamiques sans connaissance préalable des langages de programmation.
Dreamweaver est édité par la société Adobe Systems et fait partie de la suite de
développement Studio 8 de l'éditeur, qui comprend Macromedia Flash, Macromedia
Fireworks (édition graphique) et Macromedia Coldfusion (serveur). Macromedia, qui éditait
Dreamweaver auparavant, a été rachetée par Adobe en décembre 2005.
SUPINFO | Mémoire de fin d’études 37
Figure 11: Interface accueil Dreamweaver 8
b. Adobe Flash
Adobe Flash ou simplement Flash, se réfère à Adobe Flash Player et à un logiciel multimédia
utilisé pour créer le contenu de Adobe Engagement Platform (tel qu’une application Internet,
jeux ou vidéos). Flash Player, développé et distribué par Macromedia (racheté en 2005 par
Adobe Systems), est une application client fonctionnant sur la plupart des navigateurs Web.
Ce logiciel permet la création de graphiques vectoriels et de bitmap animés par un langage
script appelé ActionScript, et la diffusion de flux (stream) bi- directionnels audio et vidéo.
Pour être bref, Adobe Flash est un environnement de développement intégré (IDE), une
machine virtuelle utilisée par un player Flash ou serveur flash pour lire les fichiers Flash.
Mais, le terme « Flash » peut se référer à un lecteur, à un environnement ou à un fichier
d’applications.
Depuis son lancement en 1996, la technologie Flash est devenue une des méthodes les plus
populaires pour ajouter des animations et des objets interactifs à une page web; de nombreux
logiciels de création et Opération Système sont capables de créer ou d’afficher du Flash. Qui
est généralement utilisé pour créer des animations, des publicités ou des jeux vidéo. Il permet
aussi d'intégrer de la vidéo en streaming dans une page jusqu'au développement d'applications
Rich Media.
Les fichiers Flash, généralement appelés « animation Flash » portent l'extension SWF. Ils
peuvent être inclus dans une page web et lus par le plugin Flash du navigateur, ou bien
interprétés indépendamment dans le lecteur Flash Player.
SUPINFO | Mémoire de fin d’études 38
c. Powerbullet Presenter
Powerbullet Presenter est un logiciel qui permet la création de présentation ou d’image flash
lisible par n’importe quel navigateur. Les présentations peuvent être sauvegardées sous format
flash (SWF), ou comme exécutables sur l’ordinateur. Il est simple à l’utilisation et offre
plusieurs avantages.
Figure 12: Interface accueil Powerbullet
d. Cyberduck
Cyberduck est un logiciel client FTP SFTP libre et gratuit, développé et publié selon les
termes de la licence GNU GPL. Il comprend tout ce qu’un logiciel de FTP doit ou peut avoir :
connexion FTP et SFTP, intégration des éditeurs externes, signets, connexion en SSH, reprise
des téléchargements, transfert en drag en drop, synchronisation de deux dossiers, modification
des permissions, transferts ASCII et binaires et quelques autres fonctions mineures.
SUPINFO | Mémoire de fin d’études 39
Figure 13: Interface de connexion Cyberduck
e. Wampserver
WampServer 2 (anciennement WAMP5) est une plateforme de développement Web de type
WAMP, permettant de faire fonctionner localement (sans se connecter à un serveur externe)
des scripts PHP. WampServer n'est pas en soi un logiciel, mais un environnement comprenant
deux serveurs (Apache et MySQL), un interpréteur de script (PHP), ainsi que php MyAdmin
pour l'administration Web des bases MySQL.
Il dispose d'une interface d'administration permettant de gérer et d'administrer ses serveurs au
travers d'un tray icon (icône près de l'horloge de Windows).
La grande nouveauté de WampServer 2 réside dans la possibilité d'y installer et d'utiliser
n'importe quelle version de PHP, Apache ou MySQL en un clic. Ainsi, chaque développeur
peut reproduire fidèlement son serveur de production sur sa machine locale.
f. Mysql
Mysql est un système de gestion de base de données (SGBD). Selon le type d’application, la
licence est libre ou propriétaire. Il fait partie des logiciels de gestion de base de données les
plus utilisés au monde, autant par le grand public (application web principalement) que par
des professionnels, en concurrence avec Oracle et Microsoft SQL Server.
Mysql est un serveur de base de données relationnelles SQL développé dans un souci de
performance élevée en lecture, ce qui signifie qu’il est davantage orienté vers le service de
SUPINFO | Mémoire de fin d’études 40
données déjà en place que vers celui de mise à jour fréquentes et fortement sécurisées. Il est
multi-threads et multi-utilisateurs.
C’est un logiciel libre développé sous double licence en fonction de l’utilisation qui en est
faite : dans un produit libre ou dans un produit propriétaire. Dans ce dernier cas, la licence est
payante, sinon c’est la licence publique générale GNU (GPL) qui s’applique. Ce type de
licence double est utilisé par d’autres produits comme le framework de développement de
logiciels (pour les versions antérieures à la 4.5).
Le couple PHP/MySQL est très sollicité par les sites web de nos jours et il est proposé par une
grande partie des hébergeurs web. Plus de la moitié des sites.
3.2.2 Les langages de développement utilisés
a. PHP (Hypertext Preprocessor)
Ce langage est plus connu sous son sigle PHP, c’est un langage de script libre principalement
utilisé pour produire des pages web dynamiques via un serveur HTTP, mais pouvant
également fonctionné comme n’importe quel langage interprété de façon locale, en exécutant
les programmes en ligne de commande. C’est un langage impératif disposant depuis la
version 5 de fonctionnalités de modèle objet complètes. En raison de la richesse de sa
bibliothèque, on désigne parfois PHP comme une plate-forme plus qu’un simple langage.
Il est utilisé principalement en tant que langage de script côté serveur, ce qui veut dire que
c’est le serveur (la machine qui héberge la page Web en question) qui va interpréter le code
PHP et générer du code (constitué généralement de XHTML ou de HTML, de CSS, et parfois
de JavaScript) qui pourra être interprété par un navigateur. PHP peut également générer
d’autres formats en rapport avec le Web, comme WML, le SVG, le format PDF, ou encore
des images bitmap telles que JPEG, GIF ou PNG.
Il a été conçu pour permettre la création d’applications dynamiques, le plus souvent
développées pour le Web. PHP est très majoritairement installé sur un serveur Apache, mais
peut être installé sur les autres principaux serveurs HTTP du marché, par exemple IIS. Ce
couplage permet de récupérer des informations issues d’une base de données, d’un système de
fichiers (contenu de fichier et de l’arborescence) ou plus simplement des données envoyées
par le navigateur afin d’être interprétées ou stockées pour une utilisation ultérieure.
C'est un langage peu typé et souple et donc facile à apprendre par un débutant mais, de ce fait,
des failles de sécurité peuvent rapidement apparaître dans les applications. Pragmatique, PHP
ne s'encombre pas de théorie et a tendance à choisir le chemin le plus direct. Néanmoins, le
nom des fonctions (ainsi que le passage des arguments) ne respecte pas toujours une logique
uniforme, ce qui peut être préjudiciable à l'apprentissage.
Son utilisation commence avec le traitement des formulaires puis par l'accès aux bases de
données. L'accès aux bases de données est aisé une fois l'installation des modules
correspondants effectuée sur le serveur. La force la plus évidente de PHP est qu'il a permis au
fil du temps la réalisation aisée de problèmes autrefois compliqués et est devenu par
conséquent un composant incontournable des offres d'hébergements.
SUPINFO | Mémoire de fin d’études 41
Il est multiplate-forme : autant sur Linux qu'avec Windows il permet aisément de reconduire
le même code sur un environnement à peu près semblable (prendre en compte les règles
d'arborescences de répertoires qui peuvent changer).
Libre, gratuit, simple d'utilisation et d'installation, il nécessite comme tout langage de
programmation une bonne compréhension des principales fonctions usuelles ainsi qu'une
connaissance aiguë des problèmes de sécurité qui lui sont liés.
La version 5.3 a introduit de nombreuses fonctionnalités : les espaces de noms – un élément
fondamental de l'élaboration d’extensions, de bibliothèques et de frameworks structurés,
les fonctions anonymes, les fermetures, etc.
La version 6 introduira en interne la bibliothèque ICU donnant au langage la faculté de
traiter unicode de manière native.
Dans une utilisation Web, l'exécution du code PHP se déroule ainsi : lorsqu'un visiteur
demande à consulter une page web, son navigateur envoie une requête au serveur http
correspondant. Si la page est identifiée comme un script PHP (généralement grâce à
l'extension .php), le serveur appelle l’interprète PHP qui va traiter et générer le code final de
la page (constitué généralement de HTML ou de XHTML, mais aussi souvent de CSS et de
JS). Ce contenu est renvoyé au serveur HTTP, qui l'envoie finalement au client.
Figure 14: Fonctionnement du langage PHP avec un serveur
SUPINFO | Mémoire de fin d’études 42
b. HTML (Hypertext Markup Language)
L’Hypertext Markup Language, généralement abrégé HTML est le format de données conçu
pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de
l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de
mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images,
des formulaires de saisie, des éléments programmables tels que des applets. Il permet de créer
des documents interopérables avec des équipements très variés de manière conforme aux
exigences de l’accessibilité du Web. Il est souvent utilisé conjointement avec des langages de
programmations (JavaScript) et des formats de présentation (feuilles de style en cascade).
HTML est initialement dérivé du Standard Generalized Markup Language (SGML).
Tel qu’il a été formalisé par le W3C, le HTML ne sert pas à décrire le rendu final des pages
web. En particulier, contrairement à la publication assistée par ordinateur, HTML n’est pas
conçu pour spécifier l’apparence visuelle exacte des documents. HTML est plutôt conçu pour
donner du sens aux différentes parties du texte : titre, liste, passage important, citation, etc. Le
langage HTML a été développé avec l’intuition que les appareils de toutes sortes devaient
pouvoir utiliser les informations sur le web : les ordinateurs personnels avec des écrans de
résolution et de profondeur de couleurs variables, les téléphones portables, les appareils de
synthèse et de reconnaissance de la parole, les ordinateurs avec une bande passante faible
comme élevée, et ainsi de suite. HTML est conçu pour optimiser l’interopérabilité des
documents.
Comme HTML ne s’attache pas au rendu final du document, un même document HTML peut
être consulté à l’aide de matériels et logiciels très divers. Au niveau matériel, un document
peut notamment être affiché sur un moniteur d’ordinateur en mode graphique ou un terminal
informatique en mode texte, il peut être imprimé, ou il peut être prononcé par synthèse vocale.
Au niveau logiciel, HTML ne fait pas non plus de supposition quant au navigateur web utilisé
pour consulter le document.
Un haut degré d’interopérabilité permet de baisser les coûts des fournisseurs de contenus car
une seule version de chaque document sert des besoins très variés. Pour l’utilisateur du Web,
l’interopérabilité permet l’existence de nombreux navigateurs concurrents, tous capables de
consulter l’ensemble du web.
c. CSS (Cascading Style Sheets : feuille de style en cascade)
C’est un langage informatique qui sert à décrire la présentation des documents HTML et
XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium
(W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la
conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
Les CSS, servent à mettre en forme des documents web, type page HTML ou XML. Par
l’intermédiaire de propriétés d’apparence (couleurs, bordures, polices, etc.) et de placement
(largeur, hauteur, côte à côte, dessus-dessous, etc.), le rendu d’une page web peut être
intégralement modifié sans aucun code supplémentaire dans la page web. Les feuilles de
styles ont d’ailleurs pour objectif principal de dissocier le contenu de la page de son
apparence visuelle. Ceci nous permet:
SUPINFO | Mémoire de fin d’études 43
•
•
•
•
De ne répéter dans chaque page le même code de mise en forme
D’utiliser des styles génériques, avec des noms explicites (par exemple un style
encadré pour du texte ou des images)
De pouvoir changer l’apparence d’un site web complet en ne modifiant qu’un seul
fichier
De faciliter la lecture du code de la page
Bref les CSS permettent de gagner en productivité et en maintenabilité des sites web, tout en
offrant des possibilités graphiques incontestables.
d. JavaScript
C’est un langage de programmation de script utilisé dans la plupart des cas dans des pages
web interactives mais aussi côté serveur. C’est un langage orienté objet à prototype, c’est à
dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne
sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de
créer leurs propriétés, et notamment une propriété de prototypage qui permet d’en créer des
objets héritiers personnalisés.
Sa particularité consiste à créer des petits scripts sur une page HTML dans le but d’ajouter
une petite animation ou un effet particulier sur la page. Cela permet en général d’améliorer
l’ergonomie ou l’interface utilisateur, mais certains scripts sont peu utiles et servent surtout à
ajouter un effet esthétique à la page. L’intérêt du JavaScript est d’exécuter un code sans avoir
à recharger une nouvelle fois la page.
Figure 15: Fonctionnement du langage Javascript avec le serveur
SUPINFO | Mémoire de fin d’études 44
3.3 Importance du choix des différents outils
Pour la réalisation de ce projet, j’ai utilisé les outils informatiques les mieux qualifiés dans
leur catégorie respective.
J’ai porté mon choix sur ces outils en raison de leurs multiples avantages, ils disposent dans la
plupart des cas des dernières fonctionnalités avancées et d’un ensemble d’aides bien détaillé
permettant leur bonne mise en place et une exploitation optimisée.
Les langages de développement mis en œuvre pour ce projet sont les plus utilisés dans la
réalisation des projets de cette nature, vu leur importante communauté d’utilisateurs. Ce qui
permet, en cas de difficulté technique rencontrée, de demander de l’aide auprès de la
communauté d’utilisateurs via les forums et les FAQ (Foire aux Questions).
Dans le tableau suivant, je donnerai les raisons qui ont motivées mes choix sur chaque outil
mis en œuvre ainsi que leur importance.
Outils informatiques
Adobe Dreamweaver
Powerbullet Presenter
Wamp
Cyberduck
MySQL
Motifs du choix
Il est en ce moment l’outil majeur et le plus complet des
outils de développement d’application internet. Il permet
de créer facilement les pages web et intègre de
nombreuses fonctionnalités avancées. L’un de ses atouts
les plus intéressants est qu’il permet de visualiser à la fois
la page en mode création et en même temps le code
source, ce qui est assez pratique pour toutes les petites
modifications du code.
Il est l’un des puissants logiciels de conversion et création
d’images et d’animations flash. Il est gratuit et très facile
à utiliser aux vues de son interface et de l’ensemble des
aides fournies avec le logiciel.
Plus utilisé que son concurrent Easyphp à cause de la
scalabilité et de la facilité dans son installation, Wamp est
de nos jours le serveur web local par excellence aussi
bien pour les débutants que les chevronnés. Il est gratuit
et possède une interface d’administration très pratique.
C’est l’un des logiciels de transfert de fichier FTP les plus
utilisés de nos jours, il est libre et est accompagné d’un
ensemble d’aides très efficace pour son utilisation. Son
interface de connexion est bien simple et très indicatif.
Il est sans doute le SGBD le plus utilisé en ce moment
parmi les SGBD gratuits. A la différence de son
concurrent PostgreSQL qui est aussi gratuit, MySQL ne
demande pas une configuration spéciale ni une
modification des fichiers de configuration, il est
automatiquement utilisable après son installation. Il fait
preuve d’une grande souplesse dans l’exécution des
requêtes.
SUPINFO | Mémoire de fin d’études 45
PHP
PHP est l’un des langages de script les plus utilisés pour
les applications côté serveur. Il jouit d’un grand succès
grâce à sa gratuité ce qui entraine sa présence en standard
chez de nombreux hébergeurs gratuits contrairement à
son concurrent l’ASP de Microsoft). Il possède une
multitude de fonctions et sans doute la plus grande
communauté d’utilisateur ce qui fait de lui aujourd’hui
une plateforme et non simplement un langage de
développement.
Le HTML est aujourd’hui incontournable dans la création
des pages web, il présente l’avantage d’être relativement
simple à maîtriser et de produire des pages très légères et
rapides à transmettre, même lorsque le débit est faible. Il
permet de faire des mises en page simples.
Le CSS est un complément du HTML. Il permet d’ajouter
des couleurs et d’organiser l’affichage des pages. C’est le
langage le plus utilisé de nos jours pour l’amélioration de
l’ergonomie des pages web. Il possède de nombreux
avantages et une aide très bien détaillé pour les débutants.
Il est très utilisé pour toutes les applications côté client, il
permet de manipuler les éléments de la page web et aussi
de rendre très attractif certaines animations sur les pages
web. Il ne possède pas de réel concurrent côté client (la
machine du visiteur), ce qui fait de lui un outil
incontournable et lui assure un bel avenir.
HTML
CSS
Javascript
Tableau 4 : Tableau présentant les motifs du choix de chaque outil
Conclusion
Dans ce chapitre, j’ai présenté l’importance du choix de l’environnement technique dans la
réalisation du site web, j’ai aussi présenté les différents logiciels et langages utilisés ainsi que
leurs avantages d’où leur utilité dans la réalisation d’un tel projet.
Dans le chapitre suivant, je présenterai l’application finale réalisée ainsi que ses différentes
parties essentielles.
SUPINFO | Mémoire de fin d’études 46
4
APPLICATION
Introduction
Dans le chapitre précédent, j’ai présenté en détails les ressources nécessaires pour la création
d’un site web, notamment les langages de programmation ainsi que les logiciels nécessaires
pour sa maintenance. J’ai donné quelques avantages qui ont motivé mon choix sur ces
différents outils.
Je vais, à présent dans ce chapitre, présenter l’application réalisée. Le chapitre est composé de
deux parties : la première partie présentera le plan architectural, les besoins fonctionnels et
non fonctionnels l’application ainsi que l’environnement de développement alors que la
seconde partie présentera les différentes interfaces graphiques du site web.
4.1 Les spécifications de l’application
Cette section traite des différents besoins qu’assurera l’application. Je définirai l’objectif, les
besoins fonctionnels ainsi que non fonctionnels de l’application.
a. Objectif
Ce site web permet de faciliter la communication entre l’organisation et ses partenaires, il sert
aussi d’outils de communication pour faire passer le message au public sur les activités de
l’organisation. Jadis, les communications étaient faites sur papier, avec ce nouvel outil la
communication de l’organisation sera plus optimisé.
b. Besoins fonctionnels
Les besoins fonctionnels expriment les fonctionnalités que doit obligatoirement effectuer
l’application en réponse aux attentes des utilisateurs. Parmi les besoins auxquels répondra
l’application, on distingue :
•
Une adresse mail : pour les suggestions des internautes ainsi que l’interaction avec
l’administrateur du site web ;
SUPINFO | Mémoire de fin d’études 47
•
La mise à jour des pages : une nécessité de mettre à jour régulièrement les pages du
site web ;
•
Flash info : une partie flash info pour une mise à jour hebdomadaire des informations
nationales ainsi qu’internationales ;
•
L’authentification à la base de données : assure une sécurité pour l’authentification à
la base de données qui est réservé aux utilisateurs autorisés.
c. Besoins non fonctionnels
Les besoins non fonctionnels représentent les exigences implicites auxquels l’application doit
répondre. Ces besoins ne sont pas obligatoires mais concourent à une utilisation plus
commode de l’application. Parmi ces besoins on distingue :
•
L’ergonomie : le site web doit être simple d’apparence et assurer une bonne interface
ergonomique.
•
La fluidité : la navigation entre les pages doit être souple et facile pour l’internaute.
•
La simplicité : le site web doit avoir une page d’accueil moins encombrant, que ce
soit par des images ou des textes ce qui donnera l’envi aux internautes de visiter plus
souvent.
•
La scalabilité : le site web doit être adaptable à tous les navigateurs ainsi qu’aux
versions ultérieures des navigateurs.
4.2 Le plan architectural
Avant de se lancer dans le développement de l’application, j’ai dressé un plan architectural
dans lequel apparaissent toutes les rubriques et les sous rubriques du site web.
SUPINFO | Mémoire de fin d’études 48
Page d’accueil Présentation Vie associative SOUS RUBRIQUE -­‐Le Manifeste -­‐Le Dépliant -­‐Le guide du militant -­‐Les statuts Personnel Rapport SOUS RUBRIQUE -­‐Rapport année précédente -­‐Rapport année encours -­‐Rapport d’activité Activité Production Manifestation Calendrier des événements SOUS RUBRIQUE -­‐Info LTDH -­‐La lettre de la LTDH Lien vers les sites partenaires Figure 16: Plan architectural de notre site web
4.3 Environnement de travail
La plate forme que j’ai utilisée pour la réalisation du projet se distingue en une :
•
•
Configuration matérielle ;
Configuration logicielle ;
SUPINFO | Mémoire de fin d’études 49
Contact Info flash a. Configuration matérielle
La réalisation de ce projet, a été faite sur un ordinateur portable dont voici les caractéristiques
techniques :
v Machine TOSHIBA SATELLITE C660 – 1DK
•
Processeur
Intel ® Core ™ i3 – 380M.
•
Mémoire vive
4 Go.
•
Disque dur
640 Go.
•
Système d’exploitation
Windows 7 Edition Familiale Premium.
b. Configuration Logicielle
Pour la réalisation du site web, j’ai utilisé les langages de développement PHP, HTML, CSS,
Javascript et les logiciels suivants dont il est nécessaire de rappeler :
Ø Adobe Dreamweaver : C’est un puissant éditeur, il donne la possibilité de voir le
code et le graphique en même temps lors de la création des différentes pages du site.
Ø Adobe Flash : Il permet la lecture des fichiers flash au format SWF et FLV.
Ø Power Bullet Presenter : C’est un logiciel qui permet la création des fichiers et
animations flash au format (SWF, FLV).
Ø Cyberduck : C’est un logiciel client qui permet la connexion en FTP ou STP, il
permet de se connecter sur un serveur à distance pour le téléchargement ou le transfert
des fichiers.
Ø Wampserver : Il est utilisé comme serveur en locale, il permet d’héberger et
d’administrer un site web en local.
Ø Mysql : C’est un système de gestion de base de données.
c. Caractéristiques techniques de l’application
Ø url : www.laltdh.org ;
Ø hébergeur : ASP Serveur : elle a été créée en 1998 afin de palier au manque
d’hébergement Web sur système d’exploitation Microsoft Windows et devient le
premier hébergeur web Microsoft ;
Ø adresse serveur : 93.93.186.14
SUPINFO | Mémoire de fin d’études 50
4.3 Présentation de l’application
Dans cette partie, je vais présenter les principales interfaces graphiques et les différents menus
du site web. C’est un aperçu global de l’application.
a. La page d’accueil
C’est la page principale du site web, elle représente en quelque sorte la vitrine de
l’application. Elle présente au visiteur l’ensemble des rubriques ainsi que les menus.
Figure 17: Page d’accueil du site web
b. La page contact
La page contact est la page dans laquelle on retrouve l’ensemble des informations telles que :
l’adresse, le numéro de téléphone, l’adresse courriel de l’organisation.
SUPINFO | Mémoire de fin d’études 51
c. Le dépliant
Le dépliant est un document qui présente l’organisation dans son ensemble, il détaille les
priorités de l’organisation et présente ses partenaires. Il est joint en PDF sur le site d’où le lien
« Cliquer ici pour consulter le document ».
Figure 18: Le dépliant de la LTDH
d. Info flash
La partie « Info flash » est une partie du site réservée à la mise à jour hebdomadaire des
informations sur l’actualité nationale ainsi qu’internationale ou des activités internes de
l’organisation. Elle est placée tout à droite sur la page d’accueil.
e. Menu vie associative
Le menu vie associative est constitué de sous-menus comme le manifeste, le dépliant, le guide
du militant et les statuts. A l’approche de la souris, il se déroule vers la droite pour afficher les
sous-menus.
SUPINFO | Mémoire de fin d’études 52
Figure 19: Menu vie associative du site
f. Menu rapports
Le menu rapport est constitué de sous-menus des différents rapports sur les violations ainsi
que du rapport d’activités, il se déroule vers la droite à l’approche de la souris.
Figure 20: Menu rapports du site
g. Menu production
Le menu production est constitué de sous-menus comme Info LTDH et La lettre de la LTDH,
ce sont des productions internes de l’organisation destinées au grand public. Il se déroule vers
la droite à l’approche de la souris.
SUPINFO | Mémoire de fin d’études 53
Figure 21: Menu production du site
4.4 Les tâches d’administration
L’administration du site web, est l’ensemble des tâches qui peuvent être quotidiennes,
hebdomadaires, ou mensuelles selon les informations disponibles. C’est, entre autres, la mise
à jour des informations ou la création de nouvelles pages ou de nouveaux liens sur le site.
Ø La mise à jour : C’est le fait de mettre à jour régulièrement les anciennes
informations disponibles sur le site grâce à de nouvelles informations ou par
l’amélioration graphique des pages. La figure (Figure 22) suivante nous présente
l’ensemble des différentes étapes de la mise à jour.
SUPINFO | Mémoire de fin d’études 54
Administrateur Connexion en FTP au serveur (93.93.186.14) Ouverture de la connexion au serveur et affichage de l’arborescence des fichiers Sélection du fichier correspondant à la page à mettre à jour Ouverture du fichier à l’aide d’un éditeur de texte (Dreamweaver dans notre cas) Modification des textes ou images choisis (N.B pour les images elles doivent être au préalable transférer sur le serveur) Enregistrement des modifications Déconnexion fermeture de la connexion FTP Figure 22: Schéma des étapes de la mise à jour
Ø La création d’une nouvelle page ou d’un nouveau lien : Est le fait d’ajouter une
nouvelle page au site suivant les activités ou les informations. La figure (Figure 23)
suivante nous présente l’ensemble des différentes étapes de la création d’une nouvelle
page.
SUPINFO | Mémoire de fin d’études 55
Administrateur Connexion en FTP au serveur (93.93.186.14) Ouverture de la connexion au serveur et affichage de l’arborescence des fichiers Création d’un nouveau fichier dans l’arborescence (avec Dreamweaver dans notre cas) Possibilité de créer le fichier à l’extérieur et de le transférer sur le serveur Enregistrement du nouveau fichier sur le serveur Déconnexion fermeture de la connexion FTP Figure 23: Schéma des étapes de la création d’une nouvelle page
Conclusion
Dans ce chapitre, j’ai présenté l’application réalisée ainsi que ses principales interfaces
graphiques, ses spécifications comprenant entre autres les besoins fonctionnels et non
fonctionnels.
Ce site web permettra à la L.T.D.H de gérer ses communications si bien internes qu’externes
avec ses partenaires et aussi d’avoir une ouverture sur Internet.
Ainsi j’arrive au terme du projet avec la présentation des différentes interfaces développées et
l’usage de l’outil répondant aux spécifications énoncées précédemment.
SUPINFO | Mémoire de fin d’études 56
5
GESTION DE PROJET
5.1 Aspect organisationnel
Avec le responsable du Département Informatique & Communication et mon maître de stage,
nous avons défini dès le début du stage un planning d’une durée de 6 mois fixant le
déroulement des grandes étapes du stage:
Ø Début Mai – Fin Mai: Analyse des solutions techniques disponibles et choix de la
nouvelle solution
Ø Début Juin – Mi Juin: étude de la réalisation de la solution choisie
Ø Mi Juin – Août:
§ Etude du projet
§ Réalisation de l’état de l’art
§ Analyse des outils à mettre en œuvre
§ Formation sur les différents outils choisis
§ Installation des différents outils
§ Présentation des différents scenarios possibles
§ Etablissement d’une fiche technique du projet
Ø Début Septembre – fin Octobre :
§ Mise en place du template
§ Validation de la solution par le responsable du Département Informatique &
Communication
§ Réalisation de la page d’accueil du site web (local)
§ Création de la base de données (local)
§ Mise en relation de la base de données avec le site web (local)
§ Mise en ligne du site web (hébergement)
§ Déplacement dans les différentes coordinations régionales
Durant le déroulement du stage, les objectifs du projet se sont accrus et fractionnés en
plusieurs phases (par exemple, pour un logiciel, il faut faire son étude, les contraintes
techniques à son installation, les configurations matérielles à faire, la rédaction des
documents, etc). De temps en temps je faisais une évaluation globale du temps qu’allait me
prendre chaque phase afin de planifier les objectifs à atteindre chaque semaine. Il m’arrivait
SUPINFO | Mémoire de fin d’études 57
de résoudre des bugs de logiciels (par exemple certaines extensions dans Wamp) lors de la
configuration des différentes technologies.
Le déroulement de certaines phases a été difficile à définir en terme de durée à cause des bugs
de codes, comme la phase de la connexion de la base de données au site web et aussi les
jonctions entre les tables de la base de données. Pour remédier à ces problèmes, j’ai dû
prévoir des marges suffisantes, pour ne pas avoir à décaler l’ensemble du planning. Aussi
lorsqu’il m’arrivait de rencontrer des difficultés dans certaines parties du code et que mon
maître de stage n’était pas disponible, je m’attelais à effectuer d’autres tâches de sorte à ne
pas perdre de temps.
Quelques fois même quand la semaine venait à s’écouler et que l’objectif de la phase n’était
pas atteint, cela n’impactait pas mon planning car le travail était généralement terminé la
semaine suivante. Aussi, je prévoyais plus de temps que nécessaire pour certaines phases, et
avec le retard sur d’autres phases, cela a permis d’équilibrer mon temps de travail. Je
présentais à la fin de chaque semaine l’état d’avancement du projet à mon maître de stage, ce
qui lui permettait de suivre son bon déroulement et de me donner quelques directives quand
cela était nécessaire.
Je mettais en forme de notes tous les travaux réalisés, les difficultés rencontrées, les solutions
apportées, ce qui constituait en quelque sorte un tableau de bord que je mettais régulièrement
à jour. J’ai eu aussi à avoir de nombreux entretiens au début du stage avec le responsable du
Département Informatique & Communication sur les techniques de communication de
l’organisation ainsi que le fonctionnement des différentes structures.
En plus de cet objectif, j’ai pu approfondir mes recherches sur certains outils informatiques et
j’ai aussi appris à les manipuler avec le concours de mon maître de stage et certaines aides qui
accompagnent les outils.
En début Août, on se réunissait en réunion presque tous les deux jours pour faire le point sur
le templates (interface graphique) du site. Je présentais les différents templates que j’ai eu à
créer afin qu’un choix puisse être fait par le Département Informatique & Communication sur
le template le plus approprié pour la suite du projet. Tous les travaux que je faisais étaient
soumis à mes supérieurs en vue d’avoir leurs remarques et leur accord.
En fin Août, j’avais fini la rédaction de la fiche technique du projet qui comportait
essentiellement les informations sur les différentes technologies qui seront mis en œuvre,
leurs forces et faiblesses, les contraintes liées à leur installation ainsi que les indications sur
leur mode d’emploi.
Puis j’ai rédigé un deuxième document bien détaillé, qui, cette fois-ci servira de guide
d’utilisation du site web mais surtout, de la base de données dont l’utilisation est parfois
complexe pour un débutant. Ce document avait pour but d’éviter des éventuels bugs de
système ou les dysfonctionnements au niveau de la base de données.
Pour arriver au résultat attendu, j’ai aussi utilisé toutes les connaissances acquises durant mon
cursus scolaire. L’ensemble du travail a été fait en local (sur mon ordinateur) afin de
m’assurer de la bonne marche de toute la solution avant de la mettre en ligne, et cela a été
rendu possible grâce au serveur local installé sur mon ordinateur, ce qui me permettait aussi
de présenter le visuel de l’interface graphique pendant les réunions de suivi du projet avec
mon maître de stage et le responsable du Département Informatique & Communication.
SUPINFO | Mémoire de fin d’études 58
5.2 Aspect relationnel
Dès le premier jour de mon arrivée dans les locaux de l’organisation, j’ai été très bien
accueilli, une fois les présentations faites et après avoir pris connaissance de l’équipe avec
laquelle j’allais travailler, j’ai été briefé sur l’organisation ainsi que ses activités, ce qui m’a
permis d’avoir une idée de l’environnement dans lequel j’aurai à travailler. J’ai aussi été
encouragé par les membres de l’équipe à poser des questions et à ne pas hésiter à solliciter
leurs aides en cas de besoin. Tout ceci pour maintenir une ambiance cordiale au sein de
l’équipe de travail.
Au cours des réunions de suivi de projet, je faisais des présentations sur l’état d’avancement
du projet à l’aide de diapositives. Ces séances de présentation se faisaient questions
comprises, ce qui nous permettait d’avoir les avis de chaque membre de l’équipe et ces
présentations se terminaient la plupart du temps par de nouvelles propositions et de nouvelles
améliorations.
Avec la collaboration de mon maitre de stage, j’ai eu à effectuer quelques déplacements dans
les différentes coordinations régionales, afin de faire connaissance avec le personnel sur place
mais aussi pour faire des présentations du travail effectué et leur montrer comment se servir
de la base de données notamment la saisie des informations dans la base et les modes de
connexion qu’ils doivent utiliser afin d’éviter les dysfonctionnements du système. Le
document détaillé de l’utilisation du site web et de la base de données a été remis à chaque
coordination régionale.
Je dois dire qu’au début du stage, j’ai éprouvé quelques difficultés dans les présentations que
je devrais faire et dans l’adaptation à certaines pratiques internes à l’organisation, mais avec
le temps, grâce aux expériences acquises et avec le soutien de mon maître de stage, j’ai
surmonté ces faiblesses.
J’ai fait preuve d’autonomie et de rigueur dans l’exécution de mon travail, ce qui m’a permis
d’avancer rapidement dans la réalisation de mon projet. L’écoute et l’ouverture d’esprit sont
selon moi, les principales qualités relationnelles mais aussi être autonome, savoir défendre ses
idées, poser des questions quand c’est nécessaire et donner son avis sont les fondamentaux de
la réussite en équipe.
5.3 Aspect technique
Grâce à mon cursus scolaire et à mes expériences acquises lors des précédents stages, j’avais
au démarrage du stage des bases dans le développement web et des connaissances avancées
dans certains langages de développement web. Ces connaissances m’ont été d’une importance
capitale durant le déroulement du stage.
J’ai toujours eu l’habitude de rechercher des solutions techniques par moi-même quand je suis
confronté à des problèmes. Durant le stage j’ai perfectionné mes compétences en
développement web et acquis encore plus de compétence dans les technologies relatives aux
bases de données et à leurs structures.
SUPINFO | Mémoire de fin d’études 59
J’avais des bases sur la technologie des bases de données mais pas à l’échelle d’une entreprise
ou d’une grande structure. J’ai pu me perfectionner dans ce domaine grâce aux directives de
mon maître de stage et au fait de la manipuler plus souvent après sa création.
Côté programmation j’avais des bonnes connaissances dans les langages comme PHP et
HTML. Le CSS et le Javascript c’est durant ce stage que j’ai eu à me perfectionner. Malgré le
fait que j’ai une bonne base en PHP et HTML, il arrivait que le code ne puisse pas fonctionner
ou qu’il y ait des erreurs dans l’exécution de certains scripts. Face à ces problèmes
techniques, dans un premier temps j’essayais de consulter la documentation et quand je
n’arrivais pas à résoudre le problème, je faisais des recherches sur Internet plus
particulièrement sur des forums de développeurs où certains conseils s’avéraient utiles. Je
sollicitais mon maître de stage que lorsque ces recherches ne suffisaient pas à résoudre le
problème technique. Les problèmes techniques majeurs que j’ai eus à rencontrer sont:
Ø Problème de bug de code
Ø Problème lors de la mise en relation du site web avec la base de données
Ø Problème lors de l’installation de certains logiciels qui nécessitent quelques petites
configurations à effectuer
Ø Difficulté lors de la migration du code de la base de données du serveur local vers le
serveur de l’hébergeur
Ø Problème d’activation de certaines extensions dans Wamp, sans l’activation de ces
extensions, certaines fonctionnalités ne marcheront pas.
Tous ces problèmes ont été résolus soit par mes compétences personnelles, soit par l’appui
des forums ou par le soutien de mon maître de stage. À chaque fois qu’un problème était
résolu, je prenais le temps de noter le problème et la solution apportée. Toutes ces résolutions
de problème m’ont permis d’acquérir de nouvelles compétences dans la résolution de certains
problèmes techniques et une base encore plus solide dans le développement web.
5.4 Documentation
La documentation est l’un des aspects les plus importants du stage. Tout au long de mon stage
j’ai eu à consulter des documents pour mes propres connaissances mais j’ai aussi rédigé des
documents : la fiche technique du projet, le guide détaillé de l’utilisation du site web et de la
base de données, le guide pour la maintenance du site, etc.
J’ai pu rédiger l’ensemble de ces documents grâce aux notes que je prenais au fur et à mesure
que j’avançais dans mon travail. J’ai aussi, dans ces documents, détaillé certaines notions
techniques que j’ai largement expliquées afin de permettre une bonne compréhension aux
lecteurs.
SUPINFO | Mémoire de fin d’études 60
Ces documents ont été réalisés en fonction des différents problèmes techniques rencontrés.
L’ensemble de ces documents ont fait l’objet d’une validation par mon maître de stage et par
le responsable du département dans lequel j’ai effectué mon stage. Tous ces documents,
accompagnent aujourd’hui le bon fonctionnement du site web ainsi que de la base de données
et apportent une bonne satisfaction aux lecteurs.
5.4 Aspect budgétaire
Pour la réalisation de ce projet, le budget alloué n’était pas si conséquent, vu que la LTDH
fonctionne financièrement grâce à ses petites activités et principalement grâce à l’aide de ses
multiples partenaires nationaux et internationaux.
Au début un budget avait été arrêté, mais au cours de l’avancement du projet, celui-ci a été
relativement revu à la hausse. Pour réduire les coûts d’hébergement du site web et de la base
de données, la LTDH a opté pour un hébergement sur un serveur mutualisé.
Une migration vers un serveur dédié est en cours d’étude à cause de l’augmentation des
données à enregistrer dans la base de données et donc une nécessité de disposer d’une grande
capacité en espace disque sur le serveur, chose qui n’est pas possible en hébergement
mutualisé et pour cela le budget devrait être une fois de plus revu à la hausse.
SUPINFO | Mémoire de fin d’études 61
Conclusion générale
Ce projet de fin d’études a consisté à la création d’un site web. En effet, la création d’un site
web n’est pas une activité à prendre à la légère, elle mérite d’être suivie et encadrée. Les six
(6) mois passés à travailler avec la Ligue Tchadienne des Droits de l’Homme, m’ont permis
de réaliser que la création d’un site web et d’une base de données est la somme de plusieurs
actions (ou étapes) planifiées et dépendantes les unes des autres.
Pour la réalisation de ce projet, j’ai utilisé des langages de développement informatique
simples et connus pour la grandeur de leur communauté d’utilisateur et des logiciels adaptés à
ce type de projet. J’ai mis l’accent sur l’intérêt des sites web et surtout sur le type de site web
adapté à chaque secteur d’activité et enfin j’ai réalisé l’application qui permettra d’optimiser
la communication de l’organisation.
La réalisation de ce projet m’a permis d’une part de mettre en application les connaissances
personnelles et les concepts formels assimilés durant le cursus universitaire, et de l’autre,
d’intégrer et de découvrir la vie en entreprise ainsi que le travail de groupe.
Ce stage effectué au sein de la Ligue Tchadienne des Droits de l’Homme, a non seulement
permis l’élaboration de ce projet mais également ma participation concomitante à d’autres
initiatives. A ce titre, j’ai eu le privilège d’ :
•
Effectuer un projet consistant à mettre sur place une antenne VSAT ;
•
Installer et configurer une antenne VSAT ;
Toutefois, pour revenir à l’objet de mon stage, je pense qu’il ne serait pas non plus ingénieux,
de se limiter à ces tâches fondamentales. Certaines améliorations pourraient être apportées à
ce site web telles que :
•
La retouche du site web du point de vue de l’interface et de l’ergonomie de certaines
pages ;
•
Le remplissage de certaines rubriques prévues par les informations nécessaires.
SUPINFO | Mémoire de fin d’études 62
Bibliographie/Netographie
[1] : Stéphane Bordage, Conduite de projet web, 4ème éditions. Editions EYROLLES,
Paris, 2008
[2] : Amélie Boucher, Ergonomie web : pour des sites web efficaces. Editions
EYROLLES, Paris, 2008
[3] : Peter Stockinger, Les sites web : conception, description et évaluation. Editions
Hermes Sciences, Paris, 2005
[4] : La LTDH, une organisation au service des droits de l’Homme (1992)
[5] : Jean-Yves Moine, Manuel de Gestion de Projet. Edition AFNOR, 2008
[6] : http://www.apprendre-php.com/tutoriels/tutoriel-19-introduction-au-langage-php.html
[7] : http://www.siteduzero.com/tutoriel-3-309965-introduction-au-javascript.html
[8] : http://dimitri.wendze.com/themes/defaut/img/docs/dimitri_mpw.pdf
[9] : http://www.siteduzero.com/tutoriel-3-13661-memento-des-balises-html.html
[11] : http://fr.wikipedia.org/wiki/PHP
[12] : http://www.lehtml.com/download/archi_doc.pdf
[13] : http://fr.wikipedia.org/wiki/Adobe_Dreamweaver
[14] : http://fr.wikipedia.org/wiki/WampServer
[15] : http://fr.wikipedia.org/wiki/Hypertext_Markup_Language
[16]: http://fr.wikipedia.org/wiki/Référencement
SUPINFO | Mémoire de fin d’études 63
Annexes
SUPINFO | Mémoire de fin d’études 64
Annexe 1
Liste des balises de tableau HTML
Balises
Description
<table>
Tableau
<caption>
Titre du tableau
<tr>
Ligne de tableau
<th>
Cellule d’en-tête
<td>
Cellule
<thead>
Section de l’en-tête du tableau
<tbody>
Section du corps du tableau
<tfoot>
Section du pied du tableau
Liste des balises de formulaire HTML
Balises
Description
<form>
Formulaire
<fieldset>
Groupe de champs
<legend>
Titre d’un groupe de champs
<label>
Libellé d’un champ
<input />
Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
<textarea>
Zone de saisie multiligne
<select>
Liste déroulante
<option>
Elément d’une liste déroulante
<optgroup>
Groupe d’éléments d’une liste déroulante
SUPINFO | Mémoire de fin d’études 65
Liste des balises de structuration du texte en HTML
Balises
<abbr>
<blockquote>
<q>
<sup>
<sub>
<strong>
<em>
<mark>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<img>
<figure>
<figcaption>
<audio>
<video>
<source>
<a>
<br />
<p>
<hr />
<address>
<del>
<ins>
<dfn>
<kbd>
<pre>
<progress>
<time>
Description
Abréviation
Citation (longue)
Citation du titre d’une oeuvre ou d’un évènement
Exposant
Indice
Mise en valeur forte
Mise en valeur normale
Mise en valeur visuelle
Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
Titre de niveau 4
Titre de niveau 5
Titre de niveau 6
Image
Figure (image, code, etc.)
Description de la figure
Son
Vidéo
Format source pour les balises <audio> et <video>
Lien hypertexte
Retour à la ligne
Paragraphe
Retour à la ligne
Adresse de contact
Texte supprimé
Texte inséré
Définition
Saisie clavier
Affichage formaté (pour les codes sources)
Barre de progression
Date ou heure
SUPINFO | Mémoire de fin d’études 66
Balises de formulaire en HTML
Balises
Description
<form>
Formulaire
<fieldset>
Groupe de champs
<legend>
Titre d’un groupe de champs
<label>
Libellé d’un champ
<input />
Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
<textarea>
Zone de saisie multiligne
<select>
Liste déroulante
<option>
Elément d’une liste déroulante
<optgroup>
Groupe d’éléments d’une liste déroulante
Annexe 2
Voici la Figure A.2.1 Interface de connexion au serveur
Voici la figure A.2.2 Arborescence des fichiers sur le serveur
SUPINFO | Mémoire de fin d’études 67
SUPINFO | Mémoire de fin d’études 68
Glossaire
A
ADH : Association pour les Droits de l’Homme
AI : Amnesty International
ASCII : American Standard Code for Information Interchange
ASP : Active Server Page
C
CADPH : Commission Africaine des Droits de l'Homme et des Peuples
COC : Conseil d’Orientation et de Contrôle
CSS: Cascading Style Sheets
D
DHTML: Dynamic HyperText Markup Language
F
FIDH : Fédération Internationale des Droits de l’Homme
FLV: Flash Video
FTP: File Transfert Protocol
G
GIF: Graphic Interchange Format
GNU: Gnu’s Not Unix
GPL: General Public License
SUPINFO | Mémoire de fin d’études 69
H
HTML: HyperText Markup Language
HTTP: HyperText Transfert Protocol
I
ICU: International Components for Unicode
IDE: Integrated Development Environment
IIS: Internet Information Services
J
JPEG: Joint Photographic Experts Group
JS: JavaScript
L
LTDH : Ligue Tchadienne des Droits de l’Homme
N
NTIC : Nouvelles Technologies de l’Information et de la Communication
O
ONU : Organisation des Nations Unies
P
PDF : Portable Document Format
PHP : Hypertext Preprocessor
PNG : Portable Network Graphics
SUPINFO | Mémoire de fin d’études 70
S
SGBD: Système de Gestion de Base de Données
SGML: Standard Generalized Markup Language
SQL: Structured Query Language
SSH: Secure Shell
STP: Spanning Tree Protocol
SVG: Scalable Vector Graphics
SWF: ShockWave Flash
U
UIDH : Union Interafricaine des Droits de l’Homme
UNESCO: United Nation Educationals Scientific and Cultural Organization
URL: Uniform Resource Locator
V
VSAT: Very Small Aperture Terminal
W
WAMP: Windows Apache Mysql PHP
WML: Wireless Markup Language
W3C: World Wide Web Consortium
WYSIWYG: What You See Is What You Get
X
XHTML : Extensible HyperText Markup Language
XML : Extensible Markup Language
SUPINFO | Mémoire de fin d’études 71