31
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 · 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

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Région Normandie · 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

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

Page 2: Région Normandie · 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

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

Page 3: Région Normandie · 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

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

Page 4: Région Normandie · 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

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

Page 5: Région Normandie · 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

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

Page 6: Région Normandie · 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

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.

Page 7: Région Normandie · 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

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.

Page 8: Région Normandie · 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

Région Normandie Site orientation, formation professionnelle et emploi SPECIFICATIONS FONCTIONNELLES DETAILLEES

Confidentiel – Créateur d’Image Page 8 sur 31

Page 9: Région Normandie · 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

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 :

Page 10: Région Normandie · 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

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.

Page 11: Région Normandie · 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

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

Page 12: Région Normandie · 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

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.

Page 13: Région Normandie · 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

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.

Page 14: Région Normandie · 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

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.

Page 15: Région Normandie · 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

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.

Page 16: Région Normandie · 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

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 ».

Page 17: Région Normandie · 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

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.

Page 18: Région Normandie · 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

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

Page 19: Région Normandie · 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

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.

Page 20: Région Normandie · 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

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

Page 21: Région Normandie · 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

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.

Page 22: Région Normandie · 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

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.

Page 23: Région Normandie · 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

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] ;

Page 24: Région Normandie · 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

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.

Page 25: Région Normandie · 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

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.

Page 26: Région Normandie · 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

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.

Page 27: Région Normandie · 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

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.

Page 28: Région Normandie · 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

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.

Page 29: Région Normandie · 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

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.

Page 30: Région Normandie · 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

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]

Page 31: Région Normandie · 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

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]