Mission AP1

Mission 1 : Appel d'offre - Site internet dynamique et portable

Durée : 16h (4h/semaine en 4 semaines) Atelier de professionnalisation - Semestre 2

1. Compétences abordées

• B1.3 Développer la présence en ligne de l'organisation

• B1.4 Travailler en mode projet

• B2.1 Concevoir et développer une solution applicative

• B2.2 Assurer la maintenance corrective ou évolutive d'une solution applicative

2. Contexte et objectifs

Appel d'offre : Conception du site internet du Groupement des Entreprises d'Insertion Créé en 1988, le groupement des entreprises d'insertion représente 1200 entreprises d'insertion en France. Celles-ci emploient chaque année 65000 salariés dans divers secteurs d'activité (collecte, tri, récupération, recyclage des déchets, environnement, tourisme et restauration, etc.).

Plus de 25 ans après sa création, le GEI est devenu la plus grande alliance des entreprises d'insertion en France. C'est pourquoi, cette enseigne se doit désormais d'installer son identité dans tout le pays à travers l'ensemble des supports de communication existants.

Les objectifs motivant la création de ce nouveau site sont les suivants :

• Renvoyer une image plus moderne et dynamique du groupement sur le web, en phase avec les nouveaux outils à disposition (site Internet dynamique ou application ou réseaux sociaux).

• Renforcer la visibilité et la lisibilité des entreprises d'insertion et entreprises de travail temporaire afin de capter de nouveaux publics (création du nouveau logo).

• Instaurer un système de communication cohérent (Réseaux sociaux, forum, FAQ, ...) permettant de poursuivre le travail mutualisation de contenus et de moyens impulsé par une charte graphique.

• Rendre accessible l'ensemble des informations de GEI (site Internet adapté pour mobile).

Ce site devra être à la fois :

• Une vitrine du groupement GEI : présentation, informations, ses missions, ses partenaires.

• Un annuaire des entreprises : valorisation via des illustrations, témoignages, chiffres clés.

• Un véritable support de communication : accessible à partir de n'importe quel appareil (les pages doivent respecter les diverses résolutions des appareils mobiles).

3. Architecture du site Internet

L'architecture s'organise autour d'un Site internet principal divisé en cinq rubriques :

• Contenus éditoriaux

• Carte de France

• Moteur de recherche

• Contact

• Mentions légales

4. Description des pages

Le site internet que vous allez concevoir permet aux entreprises de se valoriser et de gagner en notoriété. Le but est donc de retrouver toutes les informations gratifiantes des entreprises afin d'attirer les visiteurs. Le chiffre d'affaires, le nombre d'embauches ou encore le salaire des employés peuvent être des informations intéressantes. L'autre intérêt du site est qu'il regroupe des entreprises de secteurs divers et variés. C'est pourquoi l'interface du site doit être interactive et universelle.

Page « Contenus éditoriaux »

Cette page est en réalité l'accueil du site où plusieurs éléments sont mis en avant :

• Actualités (résumé, descriptif avec intégration de liens hypertexte, docs joints, photos, sons, vidéo, etc.).

• Pages de présentation (offre de services, missions, organisation, chiffre clés) et Partenaires (logo, texte court de présentation, adresse site web).

Page « Carte de France »

• Affichage de la carte de France, découpée en 18 régions (carte actuelle avec 13 régions métropolitaines et 5 régions d'outre-mer).

• Quand l'internaute clique sur le nom d'une des 13 grandes régions métropolitaines, il voit apparaître dans une pop-up ou nouvel onglet, les différentes entreprises de cette grande région classée par nom, localisation et secteurs d'activité ainsi que les informations relatives (coordonnées postales, téléphoniques, E-mail de contact, prénom et nom du chef d'entreprise).

• Toutes ces informations doivent être stockées dans une base de données.

Aller plus loin 1 : Si vous avez encore du temps, vous pouvez également rendre cliquables les 5 régions d'outre-mer.

Aller plus loin 2 : Si vous avez encore du temps, vous pouvez rendre cliquable toute la zone de la région et non plus que la zone du nom.

Page « Moteur de recherche »

• Son accès est à intégrer dans la barre de navigation du site.

• Ce moteur permet de rechercher tous les contenus éditoriaux et entreprises par mots clés présents dans : titres, résumés, contenu/descriptif.

• Pour que le moteur de recherche fonctionne, il faut impérativement que toutes vos données soient stockées dans une base de données.

• Vous pouvez stocker des titres, des images (ou noms d'image), des textes, etc..

Page « Contact »

• C'est ici que les entreprises se rendent afin de s'inscrire sur le site. Elles renseignent toutes les informations nécessaires à leur référencement, et une entreprise ne peut s'inscrire qu'une seule fois.

• Inscription grâce à un formulaire (en PHP avec données sécurisées).

Le formulaire contiendra 2 parties :

• Les informations de l'entreprise (Nom, adresse, CP, Email, Tel, secteur d'activité par un menu déroulant).

• Les informations du Chef d'entreprise (Nom, Prénom, email, Tel).

• Le formulaire doit respecter les principes fondamentaux du RGPD et en particulier minimiser les données collectées (recueil de consentement et politique de confidentialité).

La transparence doit s'exercer de deux façons :

• Il s'agit de faire clairement apparaître les données indispensables et celles qui ne le sont pas.

• Il faut aussi donner les raisons de la collecte des données non essentielles en informant dans une page dédiée à la politique de confidentialité.

Page « Mentions légales et RGPD »

• Cette page qui regroupe la « Politique de confidentialité » rassemble les informations sur les traitements de données personnelles.

• Cette page est obligatoire sur tous les sites professionnels et doit apparaître dans le pied de page sous forme d'un lien hypertexte par exemple "accéder aux mentions légales".

• Lorsque des données personnelles sont demandées aux utilisateurs puis collectées, il est dans l'obligation pour le site de demander le consentement à ces collectes.

• Pour ce faire, il faut que le contenu de la page des mentions légales contienne une mention à la collecte, à l'utilisation, la suppression ou la modification de ces données.

• Le plus simple pour demander ce consentement est de prévoir une case à cocher (non cochée par défaut) qui demande d'indiquer que la politique de confidentialité soit acceptée.

Vous disposez des informations suivantes :

• Numéro RCS : 801 171 109

• Numéro de TVA : FR3801171109

• Adresse : GEI Wallon 22 avenue de l'explorateur de Kerguelen 98412 France

• 1. Trouver les informations obligatoires et les intégrer aux mentions légales. Pour les informations facultatives, il faudra indiquer que le site ne correspond pas à ces catégories.
• 2. Il ne faut en aucun cas utiliser des données déjà existantes pour ce site. Il faudra alors trouver des informations à titre indicatif.

5. Détail du travail à faire

En binôme, vous allez devoir répondre à l'appel d'offres. Pour ce faire, vous devrez tout d'abord comprendre le sujet en l'étudiant ensemble. Ensuite, avant de commencer quoi que ce soit, il va falloir vous répartir les tâches et déterminer la durée de chacune d'entre elles. Cela vous permettra d'optimiser votre temps, et chacune des étapes suivantes devront être validées par le professeur.

Étape 1 : Répartition des tâches

• Qui fait quoi ? Qui est plus à l'aise avec le HTML ? le CSS ? le PHP ? le SQL ?

• Combien de temps chaque tâche va-t-elle durer ? Faire plusieurs tâches en parallèle pour gagner du temps.

• Mettre en place un outil de gestion de projet (Gantt, Kanban, Notion.com).

Étape 2 : Effectuer des recherches

• Afin de vous aider en tant que futur développeur Web à obtenir un squelette de votre site Web, il existe des outils gratuits pour la création et gestion de contenu.

• Définir ce que sont un template et un framework.

• Comparer et choisir un ou plusieurs frameworks ou templates.

Étape 3 : Création du Cahier des Charges

• La création de ce site doit suivre l'élaboration d'un Cahier des Charges, pour la maintenance du site si du contenu doit être rajouté par la suite.

Élaborer un cahier des charges qui doit contenir :

• L'ensemble de la charte graphique et des technologies qui seront utilisées.

• L'utilité de chacune des pages.

• La location des liens vers d'autres pages et comment ils sont réalisés.

• L'architecture et arborescence du site (structure des dossiers, organisation des fichiers, nomenclature).

• Conformité légale : respect du RGPD et mentions légales détaillées.

Étape 4 : Création de la base de données

• Chercher des entreprises (2 par région en variant les secteurs d'activités) afin de les insérer dans la base.

• D'autres informations concernant l'actualité et la présentation de GEI sont aussi stockées.

• Réfléchir aux données et aux types d'informations importantes (données publiques, internes, confidentielles et à accès restreint).

• Penser aux types de données : de caractères, numériques, de dates.

• Réaliser le schéma relationnel de votre ou vos Bases de données.

• Réaliser le dictionnaire des données de vos tables (Champ, Type, particularité).

Étape 5 : Création du site

• Elaborer une charte graphique en fonction de votre contenu (et de votre squelette choisi par template ou framework).

• Créez UN dossier commun afin d'échanger vos fichiers (Office, Notion.com ou GitHub).

• Pensez à rendre votre site interactif et un minima responsive design !

Étape 6 : Rendus du site Web

• Arborescence propre (nom des dossiers et des fichiers cohérents).

• Le cahier des charges.

• Les fichiers regroupant le résultat de vos recherches avec liens des sources.

• Code et syntaxe propres avec commentaires simples en français.

• Sans oublier le respect des normes HTML5 et CSS.

Note sur l'Intelligence Artificielle : Attention à l'usage de l'IA qui sera à utiliser pour vous aider en tant qu'outil de réflexion et de pistes d'amélioration. L'IA ne doit pas faire le travail à votre place !