CONECT Innovation & Entrepreneurship Plateform. Cahier des charges. Réalisé par : Haythem LABBASSI, DSI - CONECT IT

Transcription

1 CONECT Innovation & Entrepreneurship Plateform Cahier des charges Réalisé par : Haythem LABBASSI, DSI - CONECT IT Confédération des Entreprises Citoyennes de Tunisie Adresse : 8 rue Imem Ibn Hanbal (par la rue Al Moez) Menzah I 1004 Tunis Tunisie

2 Table des matières 1 INFORMATIONS GENERIQUES OBJET DU DOCUMENT PERIMETRE COUVERT COMMENT FONCTIONNE LE PRESENT DOCUMENT? COMPATIBILITE FONCTIONNELLE Choix du Système de gestion de contenu SITE MULTILINGUE DECOUPAGE DE LA PAGE D ACCUEIL Visuel ZONINGS BLOC HAUT LOGO LOGIN MENU PRINCIPAL BLOC CENTRAL Liste des projets CONECT Liste des événements Les témoignages Carte des régions Liste des Partenaires Slider Vidéos Galerie Photos BLOC FOOTER Menu de pied de page Newsletter DECOUPAGE DES PAGES INTERNES

3 3.1 Visuel ZONINGS BLOC HAUT MENU PRINCIPAL BLOC CENTRAL Titre de la page Contenu texte et image libre et/ou modules administrables BLOC FOOTER Gestion de contenu Types de contenu Editeur de texte Contenus spécifiques Inscription Actualités Evénements Carte map Vidéos Galerie photos Partenaires Mentor Slider Newsletter

4 1 INFORMATIONS GENERIQUES 1.1 OBJET DU DOCUMENT Ce document doit permettre à CONECT de cocher précisément sur papier le périmètre fonctionnel et technique de la refonte du site QFF (Qatar Friendship Fund). Il a pour objectif de guider l intégration et le développement du site. En tant que tel, il fait l objet de validations par CONECT. 1.2 PERIMETRE COUVERT Les présentes spécifications fonctionnelles détaillées couvrent la création fonctionnelle et graphique du site QFF. Le présent document couvre la partie liée à la page d accueil et les pages internes. 1.3 COMMENT FONCTIONNE LE PRESENT DOCUMENT? Les SFD de chaque fonctionnalité sont composes des mêmes éléments : Description du cas d'utilisation : périmètre et fonctionnalités couvertes, Scenarios et fonctionnalités : détail du fonctionnement (Front-office et Back-office). 1.4 COMPATIBILITE FONCTIONNELLE Les tests de compatibilité fonctionnelle seront effectués sur : Machine : PC OS : Windows7 et XP Navigateurs : Internet Explorer 11 et supérieur Firefox 28 et supérieur Google Chrome 34 et supérieur Safari 7 et supérieur 1.5 CHOIX DU SYSTEME DE GESTION DE CONTENU Le choix du système de gestion de contenu sera focalisé sur le CMS Typo3 dans sa version 4.7 vu la compatibilité de la plupart des extensions nécessaires avec cette version. 1.6 SITE MULTILINGUE Le site sera développé en 3 langues (Français, Anglais et Arabe) et par défaut il pointe sur la version Française, si une page n est pas traduite, on affiche la page avec le texte de la langue par défaut. Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 4

5 2 DECOUPAGE DE LA PAGE D ACCUEIL Afin de mieux cerner les besoins et de faciliter l intégration et la mise en place des fonctionnalités, le présent SFD reprennent la découpe de chaque page à part. La page d'accueil est divisée en 3 grandes parties : 1. Bloc Haut : logos, boite de connexion et menu principal. 2. Bloc Central : Contenus et modules administrables. 3. Bloc Footer : menu de pied de page, bloc newsletter. Ces 3 parties sont à leur tour sous-divisées en différentes parties Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 5

6 2.1 VISUEL Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 6

7 2.2 ZONINGS BLOC HAUT 1 : Logo CONECT IE Platform 2 : Boite de login et inscription 3 : Logo Qatar Friendship Fund 4 : Menu principal BLOC CENTRAL 5 : Contenu image + texte + bouton + réseaux sociaux 6 : Liste des projets CONECT 7 : Liste des événements 8 : Les témoignages 9 : Carte des régions 10 : Liste des partenaires 11 : Slider 12 : Vidéos 13 : Galerie photos BLOC FOOTER 14 : Menu de pied de page 15 : Newsletter 2.3 BLOC HAUT LOGO Description et cas d utilisation Le logo se compose d une image cliquable, présente sur toutes les pages du site, en haut à gauche Scénario et fonctionnalité (BO/FO) Présent sur toutes les pages du site. Le lien contient un titre renseigné (à définir) et l image un ALT vide (doit resté vide pour des raisons d accessibilité) LOGIN Description et cas d utilisation Présent sur toutes les pages, il s agit d un élément dynamique proposant un formulaire de connexion aux personnes non connectés avec un lien pour inscription. Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 7

8 Scénario et fonctionnalité (BO/FO) Présente sur toutes les pages du site MENU PRINCIPAL Description et cas d utilisation Le Menu principal se compose de textes cliquables et survolables, présents sur toutes les pages du site, en haut Scénario et fonctionnalité (BO/FO) Chaque changement ou ajout d une page dans l arborescence consiste au changement automatique du menu. 2.4 BLOC CENTRAL Liste des projets CONECT Description et cas d utilisation Liste des icônes des projets CONECT, présent uniquement sur la page d accueil Scénario et fonctionnalité (BO/FO) Insertion d une liste des images + titre + description + lien Liste des événements Description et cas d utilisation Liste des événements à venir, présent uniquement sur la page d accueil Scénario et fonctionnalité (BO/FO) Insertion des événements depuis le back-office ; titre + description + image + date début + date de fin (optionnel) Les témoignages Description et cas d utilisation Liste des 2 derniers témoignages ou bien 2 témoignages au hasard, présent uniquement sur la page d accueil Scénario et fonctionnalité (BO/FO) Insertion des événements depuis le back-office ; titre + description + image + date Carte des régions Description et cas d utilisation Carte des régions avec des liens vers chaque région, la page associée à chaque région contient une description, les partenaires de la région, les événements à venir de la région et les mentors de la région Scénario et fonctionnalité (BO/FO) Chaque région est présentée par une sélection avec un lien et texte de survol. Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 8

9 2.4.5 Liste des Partenaires Description et cas d utilisation Liste des icônes des partenaires, présent uniquement sur la page d accueil Scénario et fonctionnalité (BO/FO) Insertion d une liste des images + titre + description + lien Slider Description et cas d utilisation Bandeau d images animée qui s affichent en rotation circulaire pendant 4 secondes par images, présent uniquement sur la page d accueil Scénario et fonctionnalité (BO/FO) Un nombre infini d image peut être insérés, chaque bandeau dispose une image et un lien Vidéos Description et cas d utilisation Bloc contenant la dernière vidéo mis sur Youtube, présent uniquement sur la page d accueil Scénario et fonctionnalité (BO/FO) Insertion d une vidéo : titre + image + description + lien Youtube Galerie Photos Description et cas d utilisation Cette section contient toutes les photos relatives au projet qui seront insérées en Back-office Scénario et fonctionnalité (BO/FO) Insertion d une galerie photo : titre + description + lien et dossier des images. 2.5 BLOC FOOTER Menu de pied de page Description et cas d utilisation Menu généré automatiquement à partir de l arborescence définie en Back-office Scénario et fonctionnalité (BO/FO) Chaque ajout de page dans l arborescence permet l ajout automatique d un lien dans le menu Newsletter Champ d inscription à la newsletter, chaque adresse mail saisie sera envoyée au serveur MailChimp (service externe). Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 9

10 3 DECOUPAGE DES PAGES INTERNES La page interne est divisée en 3 grandes parties : 1. Bloc Haut : logos, boite de connexion et menu principal. 2. Bloc Central : Titre de la page, contenus et modules administrables. 3. Bloc Footer : menu de pied de page, bloc newsletter. Ces 3 parties sont à leur tour sous-divisées en différentes parties VISUEL Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 10

11 3.2 ZONINGS BLOC HAUT Identique à la page d accueil. BLOC CENTRAL 1 : Titre de la page automatique. 2 : Contenu texte et image libre et/ou modules administrables. BLOC FOOTER Identique à la page d accueil. 3.3 BLOC HAUT Identique à la page d accueil, la seule différence consiste au menu principal MENU PRINCIPAL Description et cas d utilisation Le Menu principal se compose de textes cliquables et survolables, présents sur toutes les pages du site en haut. Il s agit d un menu des pages généré automatiquement à partir de l arborescence Backoffice Scénario et fonctionnalité (BO/FO) Chaque changement ou ajout d une page dans l arborescence consiste au changement automatique du menu. 3.4 BLOC CENTRAL Titre de la page Description et cas d utilisation Titre automatique de la page en cours, présent sur toutes les pages internes Scénario et fonctionnalité (BO/FO) Titre de la page dans l arborescence Contenu texte et image libre et/ou modules administrables Description et cas d utilisation Contenu texte et image simple et/ou modules configurables Scénario et fonctionnalité (BO/FO) Insertion de contenu depuis le Back-office, il existe plusieurs types de contenu dans Typo3 qui seront listés par la suite. 3.5 BLOC FOOTER Identique à la page d accueil. Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 11

12 4 GESTION DE CONTENU Typo3 offre plusieurs types de contenu dans le Back-office avec possibilité d ajout, modification, suppression et déplacement simple. 4.1 TYPES DE CONTENU Les types de contenu par défaut sont : Titre seulement : Ajoute un simple titre Elément de texte : Elément de texte avec titre et paragraphe. Texte & images : Images alignées à droite d'un élément de texte. Images seules : Images alignées en colonnes, avec une légende. Liste à puce : Une liste à puce simple. Tableau : Un tableau simple. Liens vers des fichiers : Crée une liste de fichiers pour téléchargement. Média : Insère un élément de type média tel qu'une animation Flash, un fichier audio ou un fichier vidéo. Menus spéciaux : Crée un menu des pages, un plan du site ou d'autres menus spéciaux. HTML brut : Avec cet élément vous pouvez insérer du code HTML brut sur la page. Diviseur : Cet élément insère un diviseur visuel, qui est par défaut une ligne horizontale. Insérer des enregistrements : Avec cet élément, vous pouvez incorporer d'autres éléments de contenu Formulaire de contact : Un formulaire qui permet aux utilisateurs du site d'envoyer des réponses. Formulaire de recherche : Insère un formulaire de recherche et les résultats si une recherche est lancée. Formulaire d'identification : Formulaire d'identification et de déconnexion utilisé pour permettre des accès restreints sur certaines parties du site. Gestion d'actualités : Système de nouvelles polyvalent Chaque type de contenu est composé par des champs similaires comme titre de contenu, afficher ou cacher, permissions d accès, date de lancement, EDITEUR DE TEXTE Plusieurs types de contenu possèdent déjà un éditeur de texte WYSIWYG intégré par défaut, en général, cet éditeur est utilisé surtout avec les champs dont ils contiennent une description ou un texte long qui nécessite d être mis en forme spécifique. L avantage de Typo3 est qu il possède déjà un éditeur de texte WYSIWYG intégré par défaut, il est assez riche de fonctionnalités, il présente plusieurs options configurables selon le profil éditeur ou administrateur, il permet aussi d insérer des liens (interne, externe ou vers des fichiers sur le serveur), photos, vidéos,... Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 12

13 4.3 CONTENUS SPECIFIQUES Pour la bonne gestion de la plateforme, nous aurons besoin d installer plusieurs modules spécifiques pour répondre aux différents besoin Inscription Pour la gestion des inscriptions, nous allons utiliser l extension «datamints_feuser» qui permet de gérer les inscriptions des utilisateurs frontaux, aussi la gestion des paramètres utilisateur après connexion au profil Actualités Pour la gestion des actualités, nous allons utiliser l extension de base qui est assez simple à utiliser et complète en termes de fonctionnalités, possibilité de gestion des actualités par groupe et/ou sous-groupe, plusieurs types d affichage possible pour une meilleure flexibilité. Il est possible d extraire des actualités bien spécifiques à partir d un flux RSS Evénements Pour la gestion des événements, nous allons utiliser l extension «newscalendar» qui est complémentaire à l extension des news par défaut, elle s adapte parfaitement avec les différents besoin. Aussi, plusieurs types d affichage possible comme liste des prochains événements, les événements passés ou archivés, calendrier des événements, Carte map Pour la gestion de la carte map, nous allons utiliser l extension «mw_imagemap» qui permet de sélectionner une image en entrée, créer plusieurs zones cliquables avec comme paramètre un lien et un titre. Les zones cliquables sont pourront avoir plusieurs formes libres. Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 13

14 4.3.5 Vidéos Pour la gestion des vidéos, nous allons créer une extension spécifique qui sera capable de prendre en paramètre un titre, une description, un lien vers la vidéo sur Youtube et une image comme option. L affichage des vidéos sera directement sur le site avec le lecteur par défaut de Youtube, il est possible de cliquer sur la vidéo pour se rendre directement sur le site d origine de stockage. La spécificité de cette extension est qu il y aura pas de stockage des vidéos sur le serveur, uniquement sur Youtube Galerie photos Pour la gestion des galeries photos, nous allons utiliser une extension parmi la liste des centaines des extensions disponibles, le choix sera basé sur une extension qui permet la catégorisation des photos selon des catégories prédéfinies à l avance. L affichage sur la page d accueil sera celle des images liées à une catégorie bien spécifique, sur les pages internes, l affichage des images sera lié à la catégorie sélectionnée Partenaires Pour la gestion des partenaires, nous allons créer une extension spécifique qui prend en entrée un ensemble des images accompagnés des titres et descriptions, chaque partenaire doit appartenir à une catégorie bien spécifique pour la bonne gestion d affichage en sortie Mentor Pour la gestion des mentors, nous allons utiliser la même extension des partenaires, la seule différence que nous allons utiliser un affichage spécifique pour ces derniers, mais concernant les informations de base seront les mêmes Slider Pour la gestion du slider, nous allons utiliser l extension «t3s_jslidernews» qui permet de faire le défilement des actualités, des contenus et des images. Cette extension propose plusieurs affichages possible et animations sur mesure avec couleurs et effets personnalisables. Pour le nombre des éléments dans le slider, nous devons spécifier un nombre dès le départ vu qu il n est pas possible de mettre illimité dans ce genre d affichage Newsletter Pour la gestion des newsletters, nous allons utiliser une plateforme externe qui s appelle Mailchimp. Le recourt à Mailchimp est justifié au premier lieu par le risque de passer à un spammeur dans les serveurs des boites mail destinataires, aussi il présente une gestion complète des inscriptions et désinscriptions, gestion des compagnes et envoi différé possible, statistiques sur les envois et sur l ouverture des mails et même le nombre des clics. Mailchimp dans sa version gratuite est limité à 2000 inscrits et mails envoyés par mois, pour dépasser ce limite, nous pourrons créer plusieurs compte autant qu ont veux, comme ça nous aurons plus des inscrits, aussi plus d envoi d par mois. Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 14

15 Merci d envoyer vos offres à l adresse appel.offre@ciep.org.tn Cahier des charges du projet CONECT Innovation & Entrepreneurship Plateform 15