Ceci est le cahier de charges pour la création d'un site web dynamique en utilisant les technologies, responsive design, flat design, One page, le cms DRUPAL...

1. REALISATION
AICHA LARIBI
RIM AMMAR
CAHIER
DES CHARGES
de réalisation de
site internet pour:
club android
isamm
PRESIDENT
DU
CLUB
club android
isamm
Personne
àcontacter
dansle
club:
W
ard
M
arzouki20
52
22
51

2. sommaire
1 Présentation du projet et de la réponse souhaitée ........................................
1.1. Présentation de l'équipe de travail ................................................................................
1.2. Présentation du projet ............................................................................................................
1.3. Réponse souhaitée ...........................................................................................................
2 Description fonctionnelle d site ........................................................................................
2.1. Description des grands blocs fonctionnels de la solution .........................
2.2. Description des processus associés à ces blocs fonctionnels ...................
2.3. Exemple de wireframe de la homepage ...........................................................
2.4. Autres fonctionnalités ..................................................................................................
3 Migration & intégration ............................................................................................................
3.1. Migration de données .....................................................................................................
3.2. Intégration avec des systèmes tiers .......................................................................
4 Solution technique ....................................................................................................................
4.1. Éléments techniques à prendre en compte dans la réponse ..................
4.2. Architecture technique cible .......................................................................................
p
1
2
3
4
1
1
3
4
4
5
6
7
7
8
8

3. chapitre 1

4. ch1
P1
1.1 Présentation de l'équipe de travail
Notre équipe est composée de deux étudiantes en première année mastère professionnel
ingénierie médias, parcours médiation multimédia :
Rim Ammar; de formation licence appliquée
en communication multimédia.
Aicha Laribi; de formation licence fondamentale
en informatique et multimédia.
1.2. Présentation du projet
Contexte:
« CLUB ANDROID ISAMM » est un club universitaire à vocation scientifique et techni-
que qui s’intéresse aux technologies Android. Sa principale vocation est le développement
des savoirs et savoir-faire de ses membres dans le domaine de la programmation des
applications Android.
Destiné essentiellement aux étudiants de l’ISAMM, ce club contribuera à développer leurs
acquis et leur permettra d’entrer en contact avec le monde professionnel. Ce contact se fera
lors des manifestations organisées par le club. Ainsi Sa présence sur le web est donc un
élément de première importance pour communiquer avec son public (international), ses
membres et les entités qui veulent aider le club.
De plus, La mise en place d’un site web dédié au club et aux travaux réalisés par les étudiants
de l’ISAMM permettra de faciliter le recrutement des diplômés.

5. ch1
P2
La Nature du cible visé:
La cible visée par le club est définie comme suit :
Les Etudiants de l'isamm au premier lieu.
Une communauté intéressée par le développement ou/et l'utilisation des applications
Android.
Des agences et des sociétés qui cherchent des éléments brillants dans le domaine de
la création des applications Android et des services web, pour une offre de stage
ou/et d'emploie.
La cible est spécialement " utilisateur du smartphone".
Club Androïde de l'ISAMM, a pour objectif de présenter à sa cible ses différentes
activités et réalisations, d'annoncer ses évènements et les offres de stages fournisses aux
étudiants de l'Isamm, et de proposer des formations gratuites.
Ainsi, nous sommes appelés à développer un site web qui doit être le reflet du club et de
ses activités, il devra répondre tous les besoins spécifiques et fonctionnels puisqu'il est le
premier site qui sera consacré au club depuis sa création d'où l'importance du défi.
Objectifs:
Prestations complémentaire:
Utilisation de la technologie Responsive design vue La nature de la cible.
Rédaction du contenu d'une manière qu'il soit pertinent et optimisé pour un bon
référencement sur les moteurs de recherche (Google).
Un design simple et respectant la charte graphique du club.
Accompagnement après la mise en production souhaité (marketing, plan de
lancement, animation éditoriale, etc..)
Une seule langue (Français).
Contraintes de planning :
Le cahier de charge doit être validé par le président du Club Android Isamm.
Contact:Ward Marzouki - Adresse Mail: marzouki.ward@gmail.com

6. ch1
P3
Contraintes techniques:
Utilisation d'un CMS Pour faciliter la tâche d'administration du site.
Libre au choix du CMS, alors qu'il doit être écrit en PHP avec des fonctions JavaScript
et qu'il permet de donner à chaque utilisateur un ou plusieurs rôles.
Génération des flux RSS.Widget Facebook et autres réseaux sociaux, avec un meilleur
positionnement sur la page d'accueil.
Le système doit être implémenté en adoptant une méthodologie orientée objet et doit
également garantir un temps de réponse minimal et ne pas influencer les performances
du système, avec une optimisation du code et de la conception.
Les rubriques doivent être mises dans un emplacement net et précis donc visibles.
Hébergement chez OVH.
Le site être complètement compatible avec les principaux navigateurs du marché:
Internet Explorer 6 et versions supérieures ;
Mozilla Firefox 2 et versions supérieures;
Safari 3 et versions supérieures ;
Chrome;
Opéra 9 et versions supérieures.
La consultation doit être assurée sur des versions plus anciennes et les navigateurs textes.
Versions ultérieures du site (maintenance évolutive)
Formation équipe.
Suivi projet:
1.3. Réponse souhaitée
Délai pour rendre une versionV1 ne dépasse pas le 26 Avril 2014.
Nombre de page à rendre entre 11 et 21 pages.
Contribution à une meilleure structuration du contenu.
Mise en ligne souhaitée du site avant le 26 avril 2014.
L’hébergement sera assuré par l'institut superieur des arts multimedias de la manouba.
Le site sera développé et maintenu gratuitement de la part du groupe de travail à
l'occasion du mini-projet de la matiére "Gestion du contenu web".
Une formation sera effectuée auprès du(des) contributeur(s) au moment de la livraison
du site. Un support de cours sera remis au(x) participant(s).
Proposer d'autres fonctionnalité qui enrechissent l'interactivité entre l'utilisateur
et le systéme.

7. chapitre 2

8. ch2
P4
Ce sont les grands éléments de la solution:
UTILISATEUR:
La visualisation du contenu.
Le suivi des évènements.
Une présentation complète du club et de ses activités.
Une présentation optimale et simple de toutes les réalisations du club et des prix qu'il
a gagné aux challenges de 2014.
Un espace de dépositions de toutes les formations du club.
un Blog.
Un module de contact qui contient une map fournie par Google.
ADMINISTRATION:
Gestion des utilisateurs.
Gestion du contenu texte, image et video.
Gestion des articles du blog.
Gestion des évènements.
Gestion du Slide-bar.
2.1. Description des grands blocs fonctionnels de
la solution
2.2. Description des processus associés à ces blocs
fonctionnels
Navigation horizentale.
Chemin de navigation

9. ch2
P5
2.3. Exemple de wireframe de la homepage

10. ch2
P6
2.4. Autres fonctionnalités
On peut intégrer d'autres fonctionnalités qui servent toujours à ameliorer la qualité
du référencement:
Rédaction du contenu (texte..) sur des fichiers word et analyser sa pertinence.
Création d'un forum.
Génération d'un FAQ.
Integration d'un module de chat.
Integration d'un module de téléchargement des fichiers de formats PDF.
Ajout d'une gallerie photos.

11. chapitre 3

12. ch3
P7
3.1. Migration de données
Cette Phase consiste à plusieurs étapes:
D'abord, nous sommes à l'étape de collecte de contenu ( textes, images, video...). sur des
fichiers word bien organisés, et des dossiers de médias. Puis, On définit la structure de
chaque contenu d'une maniére facile à connaitre par l'utilisateur. Ici On peut considérer
du texte Html tant qu'un contenu gérable.
Une fois on arrive à atteindre la bonne définition ( pertinente et optimisée) de tout notre
contenu, on passe à la derniére étape qui consiste à migrer dans le site. Dans le c as de
notre projet, ce dernier va récupérer tous les données ( menu, texte, image...) depuis une
base de donnée "mysql" sur un serveur "WampServer". pour qu'on puisse finaliser le
site en local avant qu'il soit hébérgé sur internet.
3.2. Intégration avec des systèmes tiers
Dans le cas de notre projet, on aura besoin de nombreux systèmes tiers qui peuvent
interagir avec le site Internet pour élever l'audiance et le rang de référencement du site :
• la comptabilité
• les réseaux sociaux ;
• d’autres sites Internet (flux de news, google maps etc.).
et peut etre d'autres systémes spécifiques.. En employant différents téchniques comme
(XML, JSON,Web Services etc.) ainsi que le format des messages.

13. chapitre 4

14. ch4
P8
4.1. Éléments techniques à prendre en compte
dans la réponse
Ce qu’il faut faire pour que les moteurs de recherches trouvent et comprennent le site?
Dans cette phase on va demandez au prestataire ce qu’il propose de mettre en oeuvre
pour gérer ce point si non nous allons travailler sur l'optimisation du HTML5 et du
CSS3 et sur l'ordre hérarchique de nos fichiers.
Il est évident que toute une série de canaux d’acquisition de trafic doit être envisagée au
moment du lancement et au cours de la vie du site. D'autre part, il est conseillé d'intégrer
l'outil de web Analytics (Google Analytics par exemple).Technologie responsive design
pour que le site puisse s’adapter au format tablette et smartphone est indisponsable.
Nous avons choisis pour l'architecture d’exécution le CMS/ CMF drupal.
Avant de choisir DRUPAL, on nous a proposé un certain classement des applications
utilisable: Le classement proposé été le suivant :
� CMS communautaires
1. Drupal
2. Joomla
3. e107
4. Xoops
� CMS insitutionnels
1.Typo3
2. eZpublish
3. tikiwiki
4. mySource
� CMS éditoriaux
1. SPIP
2.TextPattern
3. Lodel
� CM Framework
1. MODx
2. Xaraya
3. Jaws
4.2. Architecture technique cible

15. ch4
P9
POURQUOI DRUPAL?
Au final, l'hésitation fut assez longue entre SPIP et Drupal, deux produits conceptuelle-
ment très différents dans le monde des CMS.
Le tableau suivant donne une idée (certes imprécise) des qualités des différents outils.
On peut y distinguer notamment le point fort de SPIP dans sa capacité à publier
et structurer rapidement l'information, face à un Drupal plus modulaire, plus souple,
et probablement plus adaptable si l'on est prêt à consacrer du temps à sa bonne
configuration.
NB : 0 est la note la plus basse (fonctionnalité non implémentée), 5 la meilleure
(fonctionnalité très satisfaisante).
Un "P" signifie que l'utilisation d'un plugin est recommandée ou nécessaire pour cette
fonctionnalité. Un "D" implique qu'un développement est nécessaire.Les critères sont les
fonctionnalités demandées dans le cahier des charges (FT : Fonction transversale, FP
Fonction prinicipale, FC Fonction complémentaire)

16. ch4
P10
DRUPAL Ce qu�il permet, ce qu�il ne permet pas?
Réponse difficile (voire impossible) pour moi
Ce qu'il ne permet pas : faire le café...
Il faut connaître le cadre : ce qu'on veut faire avec - cahier des charges
Je n'ai pas fait de tests de fonctionnalités sans besoin ni de comparatifs
Drupal est un CMS à la base
Pas adapté à tous les types de développements
Très bon outil pour faire un portail
Ecrit en PHP : si allergie, utiliser autre chose...
Très nombreuses possibilités et très permissif :
Super : il suffit de trouver le module qui fasse ce qu'on veut...
Mais : si pas de compétence et peu de temps, utiliser autre chose
Mais : on peut faire quelque chose d'ingérable (attention à la sous-traitance)
Menu admin par interfaceWeb (sans connexion sur la machine) puissant
Permet d'avoir un responsable éditorial / admin du contenu non informaticien
Mais : on peut aimer les lignes de commandes : module drush
Drupal : est-ce une religion ?
Présentation page :
blocs : position – accès
La page est découpée en blocs (rectangles)
répartis dans des barres horizontales (entête, pied de page...) ou des colonnes
(à gauche, à droite...) ou contenu central qu'on peut déplacer
Chaque bloc peut avoir une présentation particulière
Encadrement, fond, polices...
Des canevas de page sont fournis : thèmes qu'on modifie
Un site peut avoir plusieurs thèmes (suivant le rôle de l'utilisateur)
Des blocs peuvent contenir des menus (suite de liens)
Chaque menu peut avoir des sous-menus � Arborescence
Le contenu de chaque bloc est très facilement modifiable
L'affichage d'un bloc peut être conditionnel
Suivant la page (node) affichée, le rôle du visiteur...

17. ch4
P11
Types de contenu
Type de contenu : suite de champs typés (texte, liste, booléen, date, sélection...)
Masque de saisie des contenus et affichage des contenus : un par défaut qui est modifia-
ble
Options : accès particuliers, commentaires, versions, fichiers attachés, workflow, mots
clés...
Sur portail math : types de contenu créés actuellement ou à venir
Page du portail : page HTML, un seul champ
Document de travail : page HTML, un champ, accès limité aux contributeurs, 2 états de
workfllow (utilisé, archivé)
News � fil RSS : 2 champs (date, texte)
Document local : 3 champs (auteur, date, texte), 5 états (en rédaction, en relecture, relu,
bon à
publier, publié)
Service informatique : n champs, 5 états
Site utile : n champs, 4 états
Ressources documentaires : ensemble de documents : n champs, 5 états
Ressources documentaires : point d'accès : n champs, 5 états
Ressources documentaires : licence/contrat : n champs, 5 états
Ressources documentaires : base de données bibliographiques : n champs, 5 états
Vues : tableaux, listes de contenus
Une vue : liste les contenus qui répondent à certains critères que l'on choisit (type de
contenu, dates, propriété, mots-clés, publié ou non....) et affiche certaines infos (que
l'on choisit)
Affichage en liste ou tableau ou... : dynamique
Exemples de vues actuelles sur le portail math
Pour les concepteurs : liste des utilisateurs - tous les contenus - mes contenus
Qui seront publiques : les actualités, les sites utiles, les services informatiques
Vues futures sur le portail
Pour tous les nouveaux types de contenus...
Vues spécifiques (à la demande) : tous les points accès documentaires Mathdoc par
exemple
Contenu affiché dépend des droits d'accès (du rôle)
Vue --> menu dynamique

18. ch4
P12
Lexique
Problématique portail math
Il faut utiliser un vocabulaire assez précis mais compréhensif pour les visiteurs
Il faut que tous les concepteurs soient d'accord sur la signification de chaque
terme
Exemples : communauté math, ressource documentaire, point d'accès, contrat,
site utile...
Solution : création d'un lexique (module lexicon)
On crée une définition pour chaque terme qu'on va beaucoup utiliser et qui est
employé sur le portail avec une signification particulière (remarque : article =
article scientifique)
Quand le terme est affiché dans le texte d'une page, le visiteur voit qu'il comporte
une définition et a accès à sa signification
Fonctionnalités de lexicon : on peut le désactiver et le réactiver par une balise de
type HTML, on peut modifier le mode d'affichage des termes du lexique...
Fonctionnnement DRUPAL

19. MERCI