REALISATION

AICHA LARIBI

RIM AMMAR

CAHIER DES CHARGESde réalisation de site internet pour:club androidisamm

PRESIDENT

DU CLUB

club androidisamm

Personne à co

ntacter

dans le cl

ub:

Ward M

arzouki

20 52 22 51

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

45

6

7

7

8

8

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

45

6

7

7

8

8

chapitre 1

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.

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 delancement, 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

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 JavaScriptet 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 meilleurpositionnement 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 version V1 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.

chapitre 2

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'ila 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

ch2

P5

2.3. Exemple de wireframe de la homepage

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.

chapitre 3

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 dechaque 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 notrecontenu, 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.

chapitre 4

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 duCSS3 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 aumoment 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 designpour 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 communautaires1. Drupal2. Joomla3. e1074. Xoops� CMS insitutionnels1. Typo32. eZpublish3. tikiwiki4. mySource� CMS éditoriaux1. SPIP2. TextPattern3. Lodel� CM Framework1. MODx2. Xaraya3. Jaws

4.2. Architecture technique cible

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)

ch4

P10

DRUPAL Ce qu�i l permet, ce qu�i l ne permet pas?

Réponse difficile (voire impossible) pour moiCe qu'il ne permet pas : faire le café...Il faut connaître le cadre : ce qu'on veut faire avec - cahier des chargesJe n'ai pas fait de tests de fonctionnalités sans besoin ni de comparatifsDrupal est un CMS à la basePas adapté à tous les types de développementsTrès bon outil pour faire un portailEcrit 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 choseMais : on peut faire quelque chose d'ingérable (attention à la sous-traitance)Menu admin par interface Web (sans connexion sur la machine) puissantPermet d'avoir un responsable éditorial / admin du contenu non informaticienMais : 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éplacerChaque bloc peut avoir une présentation particulièreEncadrement, fond, polices...Des canevas de page sont fournis : thèmes qu'on modifieUn 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 � ArborescenceLe contenu de chaque bloc est très facilement modifiableL'affichage d'un bloc peut être conditionnelSuivant la page (node) affichée, le rôle du visiteur...

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-bleOptions : accès particuliers, commentaires, versions, fichiers attachés, workflow, mots clés...Sur portail math : types de contenu créés actuellement ou à venirPage du portail : page HTML, un seul champDocument 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 étatsSite utile : n champs, 4 étatsRessources documentaires : ensemble de documents : n champs, 5 étatsRessources documentaires : point d'accès : n champs, 5 étatsRessources documentaires : licence/contrat : n champs, 5 états Ressources documentaires : base de données bibliographiques : n champs, 5 états

Vues : tableaux, l istes 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... : dynamiqueExemples de vues actuelles sur le portail mathPour les concepteurs : liste des utilisateurs - tous les contenus - mes contenusQui seront publiques : les actualités, les sites utiles, les services informatiquesVues futures sur le portailPour tous les nouveaux types de contenus...Vues spécifiques (à la demande) : tous les points accès documentaires Mathdoc par exempleContenu affiché dépend des droits d'accès (du rôle)Vue --> menu dynamique

ch4

P12

Lexique

Problématique portail mathIl faut utiliser un vocabulaire assez précis mais compréhensif pour les visiteursIl faut que tous les concepteurs soient d'accord sur la signification de chaque termeExemples : 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 significationFonctionnalité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

MERCI