De : Alix Beltra Site Ligue contre le cancer 31 A : Marie-Ange Leophonte - SPECIFICATIONS FONCTIONNELLES - V2 DU 17/07/2015 Nombre de gabarits 4 1. OBJET DU DOCUMENT ET RÈGLES GÉNÉRALES Le présent document a pour objectif de décrire les interfaces et règles fonctionnelles nécessaires au fonctionnement du site «La ligue contre le cancer comité Haute-Garonne». Ce document constitue le document de référence du projet. Il constitue une expression de besoin, notamment sur les aspects suivants : Arborescence du site Gabarits de page et ergonomie générale Contenu des pages du site Ce site sera développé en français seulement. Accès au site URL du site : http://www.liguecancer31.fr/ URL du back office : http://www.liguecancer31.fr/user/ Note : l adresse URL du back office est obligatoirement soumise à ce fonctionnement L accès au backoffice se fera par le biais de comptes individuels (login + mdp) CMS CMS utilisé : Drupal Technologies Clients Html : HTML 5 Xml : codage UTF-8 Flash : NON Technologies Serveur Hébergement : A définir Bases de données : MySQL Langages de script : PHP 5 Compatibilité Systèmes : OS 10 Windows XP et + Navigateurs : Firefox 4 et +, Google Chrome, Safari 5 et +, IE 9 et + Page 1 sur 23
Résolutions de référence : largeurs de référence (responsive design) Pallier 1 : ex majorité des ordinateurs desktop et tablette paysage 1024 px et au-dessus de 1024px Visible en version supérieure : avec fonds perdus sur le coté. Pallier 2 ex : tablettes en portrait Entre 1024px et 768px Pallier 3 ex: smartphone Inférieur à 768 Les maquettes utilisées dans ce présent cahier des spécifications fonctionnelles présentent le site internet dans sa version 1400 soit le pallier 1. Lors du développement front-end du site, les mêmes contenus seront intégrés et donc ré agencés en fonction de chaque pallier (le site est construit à partir de «blocs» dont la disposition change en fonction des résolutions palliers). Page 2 sur 23
2. ARBORESCENCE DU SITE ET NOMBRE DE PAGES 4 gabarits de pages sont pris en charge dans le projet : Page d accueil Gabarit texte/image Gabarit actus Plan contact > Nombre de pages : environ 15 Page 3 sur 23
3. PAGE D ACCUEIL ET ELEMENTS TOUJOURS PRESENTS 1 2 3 4 5 6 7 Page 4 sur 23
1 Menu de navigation Le menu de navigation est composé des éléments suivants : Logo Ligue qui, au clic, permet de revenir à la page d accueil (ou de rafraîchir la page si l internaute se trouve déjà sur la page d accueil) Entrées : - La ligue - Traitement - Prévention - Recherche - Aide aux malades Le clic sur une de ces entrées induit l ouverture du menu présentant les entrées de niveau 2 : - Actus : le clic sur cette entrée permet d accéder directement à la page actus. - Faire un don : le clic sur cette entrée redirige l internaute vers la page de dons du site national (ouverture dans un nouvel onglet) : http://www.liguecancer.net/faire_un_don/en_ligne - Devenir bénévole : le clic sur cette entrée redirige l internaute vers la page contact dédiée au bénévolat (utilisation du gabarit contact et champs différents, voir la partie contact) - Contact : le clic sur cette entrée redirige l internaute vers la page contact Eléments toujours présents sur le site. Ces éléments ne sont pas administrables, ils se construisent dynamiquement à partir de l arborescence du site. Page 5 sur 23
2 Visuel central Cette zone est composée : - D un visuel central administrable en BO - D une zone de texte non administrable «nos missions : la recherche, les actions pour les malades, la prévention et la promotion des dépistages, le plaidoyer.» - D une zone de recherche full text : au clic sur le picto loupe, la recherche est lancée sur l ensemble des champs des pages du site. L internaute est alors redirigé vers la page «résultats de la recherche» - D un cartouche «Oncopole» non administrable en BO Eléments présents seulement en page d accueil. Seul le visuel central est administrable en BO. 3 La recherche Cette zone est composée : Du titre de la zone «la recherche», non administrable Page 6 sur 23
De trois encarts «nos derniers appels à projet», chaque encart étant administrable et construit à partir des éléments suivants : - Image du projet - Titre du projet - Description du projet (courte) Ces encarts ne sont présents qu en page d accueil et le clic sur un de ces 3 encarts redirige vers la page «les projets» De la dernière actualités de type «actualité recherche», dynamiquement remontée en fonction de sa date de publication. Au clic sur «lire la suite» l internaute est redirigé vers la page «actus» avec le détail de cette actu ouverte. Du dernier témoignage de type «témoignage recherche», dynamiquement remonté en fonction de sa date de publication. Au clic sur «lire la suite» l internaute est redirigé vers la page «actus» avec le détail de ce témoignage ouvert. Eléments présents seulement en page d accueil. Seuls les projets sont administrables en BO, les autres éléments sont appelés dynamiquement depuis d autres pages du site. 4 Les espaces Ligue Cette zone est composée : Du titre de la zone «les espaces ligue», non administrable Du lien «voir tous les espaces» qui au clic redirige vers la page «les espaces» D une zone de texte administrable présentant l entretien d accueil et le principe des espaces Des 5 principaux pictos, non administrables. Au clic sur n importe quel picto, l internaute est redirigé vers la page «les espaces» Eléments présents seulement en page d accueil. Seul le texte est administrable en BO. Page 7 sur 23
5 Actualités Cette zone est composée : Du titre de la zone «nos actualités», non administrable Du lien «voir toutes les actualités» qui au clic redirige vers la page «actus», filtrée sur les actualités de types «actualités génériques» et «actus recherche» Des trois dernières actualités de type «actualités génériques» dynamiquement remontées en fonction de leur date de publication. Au clic sur «lire la suite» l internaute est redirigé vers la page «actus» avec le détail de l actu ouverte Eléments présents seulement en page d accueil. Non administrables en BO, remontés dynamiquement depuis la page actualités. 6 Témoignages Cette zone est composée : Du titre de la zone «témoignages», non administrable Du lien «voir tous les témoignages» qui au clic redirige vers la page «actus» Des deux derniers témoignages de type «témoignages génériques» dynamiquement remontés en fonction de leur date de publication. Eléments présents seulement en page d accueil. Non administrables en BO, remontés dynamiquement depuis la page actualités. Page 8 sur 23
7 Footer Cette zone est composée : Du titre de la zone «restons connectés», non administrable D une zone inscription newsletter non administrable. Au clic sur «je m abonne» l adresse saisie dans la zone «votre courriel» est enregistrée dans le module mailchimp, dans la liste de diffusion newsletter de la ligue D une zone «retrouvez-nous sur les réseaux sociaux» présentant les logos twitter et facebook. Au clic sur l un des logos, l internaute est redirigé (ouverture dans un nouvel onglet) vers la page ligue contre le cancer 31 du réseau en question. D une zone logo non administrable De liens vers les pages : - Mentions légales : redirection vers la page de type texte/image administrable mentions légales - Plan du site : redirection vers la page dynamiquement construite plan du site - Newsletter : redirction vers la page de type texte/image listant les liens vers les newsletters précédentes - Autres sites : redirection vers la page de type texte/image administrables autres sites - Contact : redirection vers la page de contact Une flèche à droite de la zone permet de remonter en haut de page. Eléments présents seulement en page d accueil. Administrables/non administrables au cas par cas, tel que décrit pour chaque item. Page 9 sur 23
4. GABARIT TEXTE/IMAGE 1 2 3 Page 10 sur 23
1 Haut de page Cette première zone est composée : D une image, liée au nœud d arborescence. Par exemple, si l internaute est sur la page «nos missions», lui est présentée l image associée au nœud «la ligue». En BO il est donc possible d administrer une image par nœud d arbo. Du titre de la page, présenté dans un cartouche orange Du fil d ariane, dynamiquement construit 2 Colonne de gauche Cette colonne suit la lecture de l internaute. Le titre (ici «nos missions») apparaît dans cette zone à partir du moment où l internaute ayant commencé à scroller ne voit plus dans son écran le titre dans le cartouche orange. Les boutons A+ et A- permettent d augementer/réduire la taille du contenu dans la zone principale d un point par clic (2 points max). Page 11 sur 23
Le picto imprimer permet d imprimer le contenu de la zone principale. Partager ce contenu permet : 3 Zone principale Au clic sur twitter de partager sur le fil twitter de l internaute la page en cours de lecture Au clic sur fb de partager sur la page facebook de l internaute la page en cours de lecture Au clic sur l enveloppe d envoyer par mail la page en cours de lecture La zone «téléchargez la doc associée» n apparaît que si au moins un document est associé à la page. En BO il sera possible de lier autant de documents que désirés à chaque page de type texte/image. La zone principale est administrable via un WYSIWYG (what you see is what you get). Via cet éditeur de contenu il sera possible de construire des pages à partir de différents styles : - Titre H2 Permettant notamment de reformuler les titres dans une version plus longue - Contenu textuel - Images Les images prendront la même largeur que le texte et se verront apposer un léger filtre orange, automatiquement après leur upload. Elles seront automatiquement resizées à la largeur adéquate de façon homothétique (attention donc à ne pas uploader d images dans un format trop portrait). Page 12 sur 23
- Citations/exergues Permettant de faire ressortir un contenu clé. - Lien Page 13 sur 23
5. GABARIT ACTUS 1 2 3 Page 14 sur 23
1 Haut de page Cette première zone est composée : D une image, liée au nœud d arborescence. Par exemple, si l internaute est sur la page «nos missions», lui est présentée l image associée au nœud «la ligue». En BO il est donc possible d administrer une image par nœud d arbo. Du titre de la page, présenté dans un cartouche orange Du fil d ariane, dynamiquement construit 2 Colonne gauche Cette colonne suit la lecture de l internaute. Rien n est administrable dans cette zone qui se compose : Du titre qui apparaît dans cette zone à partir du moment où l internaute ayant commencé à scroller ne voit plus dans son écran le titre dans le cartouche orange. De 4 filtres qui permettent de filtrer les types d actualités présentées dans la zone Page 15 sur 23
principale. Des boutons de partage, identiques à ceux du gabarit texte/image. Cette zone n est pas éditable. 3 Zone principale Composée : - Du titre «toutes les actus» non administrable - De 8 blocs actualités, classés par date - D une pagination Les blocs actualités ont des présentations différentes en fonction de leur typologie. Les actualités (génériques ou témoignages) présentent une image au format paysage + le type d actualité + les premiers caractères du contenu de l actu. Les témoignages (génériques ou témoignages) présentent une image au format portrait + nom de la personne + fonction + le type de témoignage + les premiers caractères du contenu. Au clic sur un bloc actualité, l actu s ouvre : L image (pour les actualités) ou l image + nom de la personne + fonction de la personne (pour les témoignages) sont présentés de façon identique à la vignette précédemment décrite. Apparaissent en plus : - Les boutons A+ et A- permettent d augementer/réduire la taille du contenu dans la zone principale d un point par clic (2 points max). Page 16 sur 23
- Le picto imprimer qui permet d imprimer le contenu de l actualité en cours de consultation - Les options de partage qui permettent : Au clic sur twitter de partager sur le fil twitter de l internaute l actu en cours de consultation Au clic sur fb de partager sur la page facebook de l internaute l actu en cours de consultation Au clic sur l enveloppe d envoyer par mail l actu en cours de consultation - Le type d actualités - Le contenu de l actualité, éditable via un WYSIWYG et disposant des mêmes styles que le WYSIWYG de la page texte/image. Page 17 sur 23
6. GABARIT CONTACT 1 2 3 Page 18 sur 23
1 Haut de page Cette première zone est composée : D une image, liée au nœud d arborescence. Par exemple, si l internaute est sur la page «nos missions», lui est présentée l image associée au nœud «la ligue». En BO il est donc possible d administrer une image par nœud d arbo. Du titre de la page, présenté dans un cartouche orange Du fil d ariane, dynamiquement construit 2 Colonne gauche Cette colonne suit la lecture de l internaute. Elle se compose : Page 19 sur 23
Du titre qui apparaît dans cette zone à partir du moment où l internaute ayant commencé à scroller ne voit plus dans son écran le titre dans le cartouche orange. De 3 zones de texte séparées par un séparateur, chacune administrable via un WYSIWYG. Des boutons de partage, identiques à ceux du gabarit texte/image. Cette zone n est pas éditable. 3 Zone principale Cette zone est composée de deux strates : Une première qui présente : - Titre H2 de la page (reformulation du titre court) - Titre de la première strate «où nous trouver» - Plan (format jpeg) (image administrable) - Bouton «voir sur Google map» qui au clic ouvre dans un nouvel onglet Gmap positionné sur l adresse de la ligue contre le cancer comité haute-garonne. Page 20 sur 23
Une seconde étape qui présente - Titre de la seconde strate «comment échanger?» - Zone de texte administrable - Formulaire de contact, non administrable Tous les champs du formulaire sont obligatoires à l exception de l adresse et du code postal - Au clic sur le bouton «envoyer», l ensemble des champs sont repris dans un email adressé à la ligue contre le cancer comité haute-garonne. Adresse à laquelle le mail est envoyé : A définir Objet du message : «Nouveau contact sur le site Ligue 31» Page 21 sur 23
Cas du bénévolat Ce modèle de formulaire sera utilisé pour la page devenir bénévole, accessible à tout moment via le menu. Pour «devenir bénévole» le formulaire sera enrichi d un menu déroulant (après champ «ville» et avant champ «votre message») listant les types de bénévolat : - Administratif - Prévention - Promotion du dépistage - Manifestations - Communication - Actions pour les malades Adresse à laquelle le mail est envoyé : A définir Objet du message : «Nouveau bénévole sur le site Ligue 31» Page 22 sur 23
Page 23 sur 23