Région Normandie · La région Normandie souhaite créer un site portail dédié à...
Transcript of Région Normandie · La région Normandie souhaite créer un site portail dédié à...
Région Normandie CREATION D’UN SITE PORTAIL DEDIE A L’ORIENTATION, LA FORMATION PROFESSIONNELLE ET L’EMPLOI EN NORMANDIE
Spécifications Fonctionnelles Détaillées
Référence : CI-SFD-FORM Version : 0.3 – 09/05/2018 Créateur d’Image 82 avenue de Thiès 14000 CAEN www.createurdimage.fr
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 2 sur 31
HISTORIQUE DES REVISIONS DU DOCUMENT
Version Date Modifications Auteur 0.1 24/04/2018 Initialisation du document Gaëtan PATARD
0.2 07/05/2018 Modifications des visuels des écrans Gaëtan PATARD
0.3 09/05/2018 Modifications suite retours Région Gaëtan PATARD
DOCUMENTS COMPLEMENTAIRES
Intitulé Type Commentaires Localisation Maquettes du site Fichiers graphiques Maquettes graphiques du site. Voir paragraphe 10
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 3 sur 31
1 PREAMBULE ............................................................................................................................................ 5 1.1 OBJECTIFS DU DOCUMENT ..................................................................................................................... 5 1.2 TERMINOLOGIE ................................................................................................................................... 5
2 LE PROJET « CREATION DU SITE INTERNET DEDIE A L’ORIENTATION, LA FORMATION PROFESSIONNELLE ET L’EMPLOI EN NORMANDIE » ........................................................................................................................ 6
2.1 PRESENTATION ................................................................................................................................... 6 2.2 ARCHITECTURE TECHNIQUE ..................................................................................................................... 6 2.3 ARCHITECTURE LOGICIELLE ..................................................................................................................... 6 2.4 LISTE DES FONCTIONNALITES ................................................................................................................... 6 2.5 REGLES DE GESTION GLOBALES ................................................................................................................ 7
3 GENERALITES GRAPHIQUES ..................................................................................................................... 7 3.1 PRESENTATION ................................................................................................................................... 7 3.2 DESIGN DU SITE ................................................................................................................................... 7
3.2.1 Favicon du site ........................................................................................................................... 7 3.2.2 Page d’accueil ............................................................................................................................ 7 3.2.3 Pages intérieures ........................................................................................................................ 9
3.3 LANGUE ET PAYS DU SITE ..................................................................................................................... 10 3.4 AFFICHAGE DES ERREURS ..................................................................................................................... 10
4 ACCES A L’APPLICATION ........................................................................................................................ 10 4.1 IDENTIFICATION................................................................................................................................. 10 4.2 HABILITATIONS ................................................................................................................................. 10
5 PAGE D’ACCUEIL DU SITE ....................................................................................................................... 11 5.1 MAQUETTE ...................................................................................................................................... 11 5.2 ENTETE ........................................................................................................................................... 12 5.3 MENU PRINCIPAL .............................................................................................................................. 13 5.4 BLOC D’ENTREES : ORIENTATION, FORMATION ET EMPLOI .......................................................................... 14 5.5 BLOC « AGENDA » ............................................................................................................................ 15 5.6 BLOC « ACTUALITE ».......................................................................................................................... 16 5.7 PIED DE PAGE ................................................................................................................................... 17
6 PAGE DE CONTENU TYPE ....................................................................................................................... 18 7 BLOCS PARAGRAPHS ............................................................................................................................. 20
7.1 BLOC TEXTE ..................................................................................................................................... 21 7.2 BLOC TITRE ...................................................................................................................................... 21 7.3 BLOC CARROUSEL .............................................................................................................................. 22 7.4 BLOC PHOTO .................................................................................................................................... 23 7.5 BLOC PHOTO + TEXTE ....................................................................................................................... 24 7.6 BLOC TEXTE + PHOTO ......................................................................................................................... 24 7.7 BLOC PHOTO + TEXTE 1 COL ................................................................................................................. 25 7.8 BLOC TEXTE 2 COL ............................................................................................................................. 25 7.9 BLOC TEXTE 3 COL ............................................................................................................................. 26 7.10 BLOC CARTOGRAPHIE ......................................................................................................................... 26 7.11 BLOC FORMULAIRE ............................................................................................................................. 27
8 DECLINAISON TABLETTE ET MOBILE ...................................................................................................... 28 8.1 TABLETTE ........................................................................................................................................ 28 8.2 MOBILE ........................................................................................................................................... 28
9 THEME DU BACKOFFICE......................................................................................................................... 29
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 4 sur 31
10 LIENS VERS MAQUETTE EN LIGNE .......................................................................................................... 30 11 TYPES DE CONTENU ............................................................................................................................... 31
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 5 sur 31
1 PREAMBULE
1.1 OBJECTIFS DU DOCUMENT
Ce document fait partie de la phase de conception du projet et a pour objectifs de : • Décrire en détails la structure et le fonctionnement des éléments composant le site internet dédié à
l’orientation, la formation professionnelle et l’emploi en Normandie. • Permettre aux acteurs du projet de comprend l’ensemble des fonctionnalités mise en œuvre dans le
projet. • Permettre aux développeurs mobilisés sur le projet de comprendre les fonctionnalités qu’il doit
implémenter pour répondre aux besoins de l’internaute. Ce document est le document de référence tout au long du projet du site, s’il devrait entrer en contradiction avec le cahier des charges, les maquettes réalisées ou tout autre document, c’est ce document de spécifications fonctionnelles qui est prioritaire dans l’interprétation des divergences.
1.2 TERMINOLOGIE
Sigle, terme, abréviation Désignation Site Formation Site internet dédié à l’orientation, la formation professionnelle et l’emploi en
Normandie
Drupal CMS utilisé pour le site web
Template Patron de mise en page où les contenus viennent se placer
Bloc Élément d’un template, bloc logique et fonctionnel
WYSIWYG Désigne un champ en backoffice avec un éditeur complet (mise en forme, ajout d’image, couleur, gestion de lien, etc..).
FO Front office. Partie du site web visible par tous les internautes. Le FO fait apparaitre le contenu saisi en BO.
BO Back office. Interface sécurisée de gestion du site, permettant l’administration du contenu. Visible uniquement par les administrateurs du site.
SFD Acronyme de « Spécifications Fonctionnelles Détaillées » (ce-document)
Charte graphique Ensemble des éléments graphiques du site, regroupés dans les maquettes
Agence Agence Créateur d’Image
Lightbox Une lightbox permet d'afficher des images, du contenu, des pages au premier plan d'une page Web sans avoir à quitter la page. Il assombrit le reste de la page et met en évidence le contenu en surbrillance.
POI Point d’intérêt
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 6 sur 31
2 LE PROJET « CREATION DU SITE INTERNET DEDIE A L’ORIENTATION, LA FORMATION PROFESSIONNELLE ET L’EMPLOI EN NORMANDIE »
2.1 PRESENTATION
La région Normandie souhaite créer un site portail dédié à l’orientation, la formation professionnelle et l’emploi en Normandie, afin de donner plus de visibilité à l’action de la région dans ses domaines. Pour ce site, Créateur d’image, a proposé la solution Drupal (CMS), choix validé par la région.
2.2 ARCHITECTURE TECHNIQUE
Le site sera à terme hébergé par les serveurs de la Région, Créateur d’Image se rapprochera de la DSI de la région pour indiquer les exigences de Drupal. Pendant la phase de développement du site, celui-ci sera hébergé sur un serveur de l’agence, avec un accès protégé par un login/mot de passe.
2.3 ARCHITECTURE LOGICIELLE
Catégorie Logiciel Version
Système d’exploitation Linux Debian 8.10
Serveur Web Apache 2.4.10.
Base de données MySQL 5.0
Langage serveur PHP 7.0. Langage client HTML HTML 5
Feuilles de style CSS 3.0.
Gestionnaire de contenu (CMS) Drupal 8.5.2.
2.4 LISTE DES FONCTIONNALITES
Thème Cas d’utilisation Fonctionnalité FO Page d’accueil Mise en place de la page d'accueil du site
Contenu standard Visualisation du contenu saisi en BO Affichage de formulaire saisi en BO
Résultats de recherche Visualisation des résultats retournés par le moteur de recherche standard Drupal
Actualités Mise en forme d’une liste de actualités Tri anti-chronologique des actualités Visualisation du détail d’une actualité Affichage de trois actualités sur la page d’accueil (orientation / formation / emploi) Moteur de recherche par date.
Agenda Mise en forme d’une liste d’événements Tri anti-chronologique des événements Visualisation du détail d’un événement Affichage de 8 événements sur la page d’accueil Moteur de recherche par type d’événement, date et critère géographique.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 7 sur 31
BO Contenu standard Gestion des contenus standards Actualités Gestion des actualités Agenda Gestion des événements Menu principal Gestion du menu principal du site Notifications administrateur Lors de la création/modification d’un contenu par un éditeur, un
email prévient l’administrateur du site de l’action Révisions Mise en place du système de révisions des documents de Drupal
2.5 REGLES DE GESTION GLOBALES
Type Description
Transformation Chaque page du site pourra être imprimée. Seul le contenu pertinent sera imprimé et mis en forme pour une meilleur impression.
Affichage Le site proposera un affichage adaptatif (desktop, tablette et smartphone)
Affichage Le site s’affichera de manière satisfaisante sur les dernières versions des navigateurs Internet Explorer (IE 11 minimum), Firefox, Chrome et Safari, sur PC et Mac
Transformation Le site embarquera un système d’agrandissement et de réductions des textes du site, sur toutes les pages du site.
3 GENERALITES GRAPHIQUES
3.1 PRESENTATION
Le site internet doit présenter l’ensemble des informations liées à la formation, l’orientation et l’emploi, proposées par la région Normandie. Le site sera très éditorial et sera propulsé par Drupal 8. Le site est développé par l’agence Créateur d’Image.
3.2 DESIGN DU SITE
Le site est développé pour couvrir toutes les résolutions possibles, en implémentant le paradigme du responsive design, en proposant plusieurs points de ruptures (desktop, tablette et smartphone). Le site est conforme aux standards du W3C. Le titre du site par défaut du navigateur est « Des parcours, un métier ». Ce titre par défaut sera complété par le titre de la page courante, par exemple pour les actualités du site, le titre sera « Des parcours, un métier – Actualités ».
3.2.1 FAVICON DU SITE
Le site dispose du favicon de la Région Normandie, qui reprend le logo de la Région.
3.2.2 PAGE D’ACCUEIL
La page d’accueil du site dispose d’un rendu spécifique.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 8 sur 31
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 9 sur 31
3.2.3 PAGES INTERIEURES
Les pages intérieures du site auront le format suivant :
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 10 sur 31
Nous reviendrons, dans les chapitres à venir, sur chaque élément graphique et fonctionnel présent sur le site.
3.3 LANGUE ET PAYS DU SITE
Le site sera disponible en français uniquement.
3.4 AFFICHAGE DES ERREURS
Les messages d’erreurs résultant d’une mauvaise saisie ou d’une mauvaise action de l’internaute seront affichés directement dans la zone d’action de l’internaute suivant une mise en forme claire, afin d’alerter l’internaute.
4 ACCES A L’APPLICATION
4.1 IDENTIFICATION
Le backoffice du site est uniquement accessible par login et mot de passe. Le FO du site sera accessible par tous les internautes. Il n’y a pas d’accès restreint au FO. Profil/groupe Applications
Administrateur Gère le site. Accès à toutes les fonctionnalités du BO Éditeur Accède à l’ensemble de l’arborescence du site et aux contenus.
Dispose des droits de création, modification, suppression des contenus du site.
4.2 HABILITATIONS
Profil/groupe Page / concept métier Action Administrateur Tout Tous les droits Éditeur Tout Ajouter, modifier, supprimer des publications.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 11 sur 31
5 PAGE D’ACCUEIL DU SITE
5.1 MAQUETTE
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 12 sur 31
5.2 ENTETE
Questions Réponses
Front Office
Quels éléments s’affichent ? • Le lien vers le site normandie.fr • Les réseaux sociaux de la région • Le logo du site • Le menu principal • Le bouton « Recherche » (picto Loupe) • Les liens pour augmenter/diminuer la taille du texte.
Quelles sont les actions possibles pour l’internaute ?
L’internaute peut : • se rendre sur le site de la région, en cliquant sur le lien normandie.fr. Le lien
s’ouvre dans une nouvelle fenêtre. • consulter les réseaux sociaux de la région en cliquant sur l’icône correspondant.
Le lien s’ouvre dans une nouvelle fenêtre. • se rendre sur la page d’accueil du site, en cliquant sur le logo du site (fenêtre
courante) • utiliser le menu principal pour accéder aux pages du site • utiliser le moteur de recherche en cliquant sur le bouton « loupe » (recherche
sur tout le contenu du site) • utiliser les liens pour augmenter/diminuer la taille du texte.
Quel est le fonctionnement du menu principal ?
Le menu principal permet à l’internaute d’accéder aux différentes pages du site. Il présente trois niveaux d’accès de profondeur aux pages avec un menu déroulant dynamique. L’internaute fait apparaître le menu déroulant en survolant un lien de niveau 1 du menu. Les liens s’ouvrent dans la fenêtre courante.
Quel est le fonctionnement du bouton « Recherche » (loupe) ?
Le bouton « Recherche » permet à l’internaute d’accéder au formulaire du moteur de recherche. Lorsque l’internaute clique sur le bouton, un pop-up affiche la zone de recherche sur le site ainsi qu’un bouton pour déclencher la recherche.
Quelles sont les animations associées ?
Le pictogramme et les logos changent d’opacité au survol par l’internaute. Le menu principal se déploie au survol d’un item de niveau 1.
Back Office
Quels sont les éléments éditables ?
Items du menu principal L’administrateur peut gérer de manière autonome le menu principal du site.
Cet entête sera repris sur l’ensemble des pages du site internet.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 13 sur 31
5.3 MENU PRINCIPAL
Questions Réponses
Front Office
Quels éléments s’affichent ? • Les liens hiérarchisés du menu principal, du niveau 2 au niveau 4.
Quelles sont les actions possibles pour l’internaute ?
L’internaute peut : • Survoler les différents liens pour faire apparaître les liens de niveaux inférieurs • Cliquer sur un lien pour consulter la page correspondante (ouverture dans la
même fenêtre).
Quelles sont les animations associées ?
Les liens s’affichent en gras au survol. Chaque lien survolé fait apparaître ses liens enfants.
Back Office
Quels sont les éléments éditables ?
Items du menu principal L’administrateur peut gérer de manière autonome le menu principal du site.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 14 sur 31
5.4 BLOC D’ENTREES : ORIENTATION, FORMATION ET EMPLOI
Questions Réponses
Front Office
Quels éléments s’affichent ? • Un visuel d’ambiance et le logo tramé de la Normandie • Un bloc Orientation contenant :
o Un visuel et le titre « Orientation » o 3 liens vers des pages consacrées à l’orientation, avec visuel.
• Un bloc Formation contenant : o Un visuel et le titre « Formation » o 3 liens vers des pages consacrées à la formation, avec visuel.
• Un bloc Emploi contenant : o Un visuel et le titre « Emploi » o 3 liens vers des pages consacrées à l’emploi, avec visuel.
Quelles sont les actions possibles pour l’internaute ?
• Au clic sur un des liens des 3 blocs, l’internaute est redirigé sur la page correspondante du site (fenêtre courante)
Quelles sont les animations associées ?
• Les liens des blocs changent d’opacité au survol.
Back Office
Le bloc est-il éditable ? L’administrateur du site peut choisir les liens de chaque bloc librement, sous la forme d’un menu indépendant pour chaque bloc.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 15 sur 31
5.5 BLOC « AGENDA »
Questions Réponses
Front Office
Quels éléments s’affichent ? • Le titre « Agenda » • Le sous-titre « Les prochaines évènements régionaux » • Les 8 prochains événements (par date), sous la forme de blocs, composés
chacun : o du titre de l’événement o du lieu de l’événement o de la date de l’événement o de l’horaire de l’événement
• Un lien « Tout l’agenda »
Quelles sont les actions possibles pour l’internaute ?
• Au clic sur un événement (ensemble du pavé), l’internaute est redirigé vers la page détail de l’événement.
• Au clic sur le lien « Tout l’agenda », l’internaute est redirigé sur la page agenda du site.
Quelles sont les animations associées ?
• Animation uniquement au survol par l’internaute des événements (changement d’opacité du bloc complet).
Back Office
Le bloc est-il éditable ? L’administrateur peut ajouter/modifier/supprimer des événements directement dans le BO du site.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 16 sur 31
5.6 BLOC « ACTUALITE »
Questions Réponses
Front Office
Quels éléments s’affichent ? • Trois blocs d’actualités distincts : « Actu orientation », « Actu Formation » et « Actu Emploi », comprenant chacun la prochaine actualité du thème, avec les champs :
o La photo de l’actualité o La date de l’actualité o Le titre de l’actualité o Un lien « Lire la suite » pour consulter l’actualité.
• Un lien « Toutes les actus »
Quelles sont les actions possibles pour l’internaute ?
• Au clic sur un actualité (ensemble du pavé), l’internaute est redirigé vers la page détail de l’actualité.
• Au clic sur le lien « Toutes les actus», l’internaute est redirigé sur la page globale des actualités du site.
Quelles sont les animations associées ?
• Animation uniquement au survol par l’internaute des actualités (changement d’opacité du bloc complet).
Back Office
Le bloc est-il éditable ? L’administrateur peut ajouter/modifier/supprimer des actualités directement dans le BO du site. L’administrateur pourra définir les actualités à remonter sur la page d’accueil du site, en utilisant la case à cocher « Promu en page d'accueil ».
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 17 sur 31
5.7 PIED DE PAGE
Questions Réponses
Front Office
Quels éléments s’affichent ? • Un menu avec les liens : o Contact o Crédits o Mentions légales o Partenaires
• Un numéro vert précédé le phrase : Le numéro de la formation professionnelle en Normandie »
• Le logo de la Région • La signature de l’agence Créateur d’Image. • Les adresses des deux sites de la région.
Quelles sont les actions possibles pour l’internaute ?
• Au clic sur l’un des liens du base de page, l’internaute est redirigé vers la page correspondante (ouverture de la page dans la fenêtre courante)
• Au clic sur le numéro de téléphone, un lien pour appeler le numéro est mis en place (prise en compte en fonction des possibilités du navigateur)
• Au clic sur le logo de la région, l’internaute est redirigé vers le site normandie.fr (ouverture de la page dans la fenêtre courante)
• Au clic sur le logo de l’agence Créateur d’Image, l’internaute est redirigé vers le site createurdimage.fr (ouverture de la page dans la fenêtre courante)
Quelles sont les animations associées ?
• Animation uniquement au survol des logos / boutons / liens
Back Office
Le bloc est-il éditable ? Uniquement : • Le menu avec les liens
Ce pied de page sera repris sur l’ensemble des pages du site internet.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 18 sur 31
6 PAGE DE CONTENU TYPE
6.1 MAQUETTE
Présentation de la page type découpée sur deux colonnes
6.2 DESCRIPTION
La page de contenu type est la page par défaut, qui n’utilise pas un template spécifique pour afficher les contenus. La page de contenu type reprend l’entête et le pied de site déjà de la page d’accueil (cf. le paragraphe sur la présentation de la page d’accueil). Le contenu du site prend place dans un rectangle blanc et est composé d’une seule colonne. Questions Réponses
Front Office
Quels éléments s’affichent ? • Le fil d’Ariane • Le titre de la page • Le chapô de la page • Les blocs Paragraphs structurant le contenu
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 19 sur 31
Quelles sont les actions possibles pour l’internaute ?
• L’internaute peut scroller dans la page pour consulter les contenus de celle-ci.
Quelles sont les animations associées ?
• Aucune animation.
Back Office
Le bloc est-il éditable ? • Le titre est administrable (obligatoire). • Le chapô est administrable (optionnel). • Tous les blocs Paragraphs sont administrables en nombre, en positionnement et
en contenu, de manière indépendante.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 20 sur 31
7 BLOCS PARAGRAPHS
Afin d’apporter une flexibilité dans la mise en page des contenus du site, le site intègre le module Paragraphs. Ce module permet de créer des blocs prédéfinis, utilisables simplement par l’administrateur du site. Les blocs Paragraphs remplacent la zone « Body » de saisie habituel des contenus, afin d’apporter de la souplesse au design des pages. Ces blocs peuvent être insérés puis déplacés dans le contenu d’une page. L’ajout d’un bloc se fait simplement par son choix dans un sélecteur qui contient la liste des blocs disponibles, ce qui permet à l’administrateur ensuite de saisir les champs du bloc. Le déplacement d’un bloc se fait par un simple glisser/déposer dans la hiérarchie du contenu. Il n’y a pas de limitation dans le nombre, ni dans l’utilisation des blocs Paragraphs. Nous présentons ci-dessous les blocs du projet. Intitulé Description du bloc Bloc texte Permet de saisir un texte (avec un éditeur de texte avancé)
Bloc titre Permet de saisir un titre et de déterminer son niveau d’importance
Bloc Carrousel Permet d’afficher un carrousel
Bloc Photo Permet d’afficher une ou plusieurs photos
Bloc Photo + texte Permet d’afficher une photo et un texte horizontalement
Bloc Texte + Photo Permet d’afficher un texte et une photo horizontalement
Bloc Photo + texte 1 col Permet d’afficher une photo et un texte verticalement
Bloc Texte 2 col Permet d’afficher un texte sur deux colonnes horizontalement
Bloc Texte 3 col Permet d’afficher un texte sur trois colonnes horizontalement
Bloc Cartographie Permet d’afficher un point d’intérêt sur un carte dynamique
Bloc Formulaire Permet d’insérer un formulaire préexistant
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 21 sur 31
7.1 BLOC TEXTE
Le bloc texte permet d’ajouter une zone de texte dans le contenu. Le contenu est administrable via un éditeur Wysiwyg. Le rendu est prédéfini par les feuilles de styles et les templates du site.
7.2 BLOC TITRE
Le bloc titre permet d’insérer un titre dans le contenu. L’administrateur peut saisir le texte du titre et choisir son niveau d’importance, de 1 à 6. Le rendu est prédéfini par les feuilles de styles et les templates du site.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 22 sur 31
7.3 BLOC CARROUSEL
Affichage du Carrousel dans le contenant Affichage d’une image en ligthbox du carrousel Le bloc carrousel permet d’insérer un carrousel d’images dans le contenu. Le carrousel se présente sous la forme d’un bandeau d’image dynamique qui permet à l’internaute de faire défiler le bandeau vers la gauche et vers la droite. Lorsqu’un internaute clique sur une image, elle s’affiche en grand, dans une lightbox. Pour chaque image insérer dans le carrousel, l’administrateur pourra choisir l’image et saisir un titre. Ce titre apparaîtra sous la photo maximisée dans sa lightbox.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 23 sur 31
7.4 BLOC PHOTO
Le bloc photo permet d’insérer un ou plusieurs photos. Le bloc photo permet un affichage modulaire en fonction du nombre de photos saisies par l’administrateur :
• 1 photo pleine largeur de l’écran [1] ; • 1 photo pleine largeur de son contenant [2] ; • 2 photos réparties à 50% dans le contenant [3] ;
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 24 sur 31
• 3 photos réparties à 33% dans contenant [4].
7.5 BLOC PHOTO + TEXTE
Le bloc photo + texte permet d’afficher une photo et un texte. La photo occupera 50% du contenant et sera positionnée à gauche. Le texte occupera 50% du contenant et sera positionnée à droite. La zone de saisie de texte sera limitée en termes de mise en forme.
7.6 BLOC TEXTE + PHOTO
Le bloc texte + photo permet d’afficher un texte et une photo. Le texte occupera 50% du contenant et sera positionnée à gauche. La photo occupera 50% du contenant et sera positionnée à droite. La zone de saisie de texte sera limitée en termes de mise en forme.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 25 sur 31
7.7 BLOC PHOTO + TEXTE 1 COL
Le bloc photo + texte 1 col permet d’afficher une photo et un texte. La photo occupera 100% du contenant. Le texte occupera 100% du contenant et sera positionné sous la photo. La zone de saisie de texte sera limitée en termes de mise en forme.
7.8 BLOC TEXTE 2 COL
Le bloc texte 2 col permet d’afficher un texte sur deux colonnes. Le bloc de texte 1 occupera 50% du contenant et sera positionnée à gauche. Le bloc de texte 2 occupera 50% du contenant et sera positionnée à droite. Les deux zones de saisie de texte seront limitées en termes de mise en forme.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 26 sur 31
7.9 BLOC TEXTE 3 COL
Le bloc texte 3 col permet d’afficher un texte sur trois colonnes. Le bloc de texte 1 occupera 33% du contenant et sera positionnée à gauche. Le bloc de texte 2 occupera 33% du contenant et sera positionnée au centre. Le bloc de texte 3 occupera 33% du contenant et sera positionnée à droite. Les deux zones de saisie de texte seront limitées en termes de mise en forme.
7.10 BLOC CARTOGRAPHIE
Le bloc cartographie permet d’afficher un point d’intérêt sur une carte dynamique. Dans l’administration, l’administrateur pourra
• Positionner son point d’intérêt directement sur carte dynamique ; • Saisir un titre, une description textuelle et un lien (facultatif) ; • Définir l’icône du point d’intérêt (facultatif).
Le bloc affichera alors une carte dynamique Google Maps occupant la largeur du contenant. La carte sera centrée sur la position du point d’intérêt. Le point d’intérêt sera représenté sur la carte avec l’icône.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 27 sur 31
Un clic sur l’icône affichera une infobulle, avec le titre du POI, la description textuelle et le lien saisie.
7.11 BLOC FORMULAIRE
Le bloc formulaire permet d’insérer un formulaire préexistant dans le contenu. L’administrateur peut choisir le formulaire à insérer. Le rendu est prédéfini par les feuilles de styles et les templates du site.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 28 sur 31
8 DECLINAISON TABLETTE ET MOBILE
Le site sera développé en intégrant le paradigme du responsive design (web adaptatif) et pourra donc être consulté sur tout type de périphérique.
8.1 TABLETTE
Sur les tablettes, aux vues des résolutions proposées par les tablettes, le site est le même rendu que sur la version desktop (PC et Mac).
8.2 MOBILE
Sur les smartphones, le site est adapté pour assurer une navigation efficace et agréable pour l’internaute.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 29 sur 31
9 THEME DU BACKOFFICE
Le thème du backoffice sera le thème par défaut de Drupal 8, à savoir le thème Seven.
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 30 sur 32
10 LIENS VERS MAQUETTE EN LIGNE
Dans cette section, vous trouverez des liens pour consulter l’intégralité des maquettes de ce document directement dans votre navigateur. [Todo : à mettre en place]
Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES
Confidentiel – Créateur d’Image Page 31 sur 31
11 TYPES DE CONTENU
Dans cette partie, nous allons présenter les types de contenu disponibles pour le site. Pour chaque type de contenu, nous préciserons les champs proposés. [Todo : à mettre en place]