# Ressource - Cahier des charges E5 (SISR)

### <span style="text-decoration: underline; color: rgb(52, 73, 94);">**I. Caractéristiques**</span>

Le portfolio prendra la forme d'un site WEB.

Le candidat est libre d'utiliser la méthode de création de son choix (codé à la main, utilisation d'un CMS, etc...)

Celui-ci devra :

- être accessible au jury (en ligne) 
    - liberté quand au mode de mise en ligne (hébergement, autohébergé, serveur local, stack docker, ...)
- contenir au moins un élément faisant appel à une base de donnée
- contenir un certain nombres d'éléments obligatoires détaillés dans le chapitre suivant.

<p class="callout warning">**Attention** : Une non conformité du portfolio entraine une sanction en points de pénalité.</p>

- Absence de dossier : diplôme invalide
- Portfolio inaccessible : -10 pts
- Tableau de synthèse absent : -2 pts

Vous trouverez ci-joint la grille d'évaluation, les attendus à l'examen et pièces à fournir ainsi que le tableau de synthèse à fournir.

### <span style="color: rgb(52, 73, 94);">**II. Organisation du portfolio**</span>

#### <span style="color: rgb(35, 111, 161);">2.1 Résumé</span>

<p class="callout info">**Info :** Les éléments obligatoires sont marqués en **gras**.  
</p>

Vous pouvez organiser votre portfolio comme suit :

- **Une page d'accueil** avec le nom du candidat
- **Une page de profil** comprenant 
    - le **CV**
    - le **parcours**
    - les **compétences clés** détaillées en graphique
- **Lien vers l'organisme de formation**
- **Une page de présentation de l'entreprise**
    - Organigramme
    - Les chiffres clé (présenté sous forme graphique très succincte)
    - Le contexte Professionnel et sa place dans l'entreprise
    - **Schéma d'infrastructure**
- Une page de présentation des **Situations professionnelles**. 
    - **1<sup>ère</sup> année** et **2<sup>ème</sup> année** séparés 
        - **activités**
        - **projets pro**
        - **projets d'études**
        - (facultatif) projets personnels à valoriser.
- **Veille technologique**
    - principes de la veille
    - importance de la veille
    - éléments de votre veille
- Formulaire de **contact**

Et ne pas oublier les **Mentions légales** en bas de page ainsi qu'une page contenant les mentions légales détaillées.

<p class="callout success">**Conseil** : la navigation doit pouvoir être intuitive et le menu en haut de page devrait inclure les liens vers tous les éléments, nommés tels qu'attendu dans les prérequis. Cela permettra à l'examinateur de pouvoir rapidement valider que le contenu est conforme.  
</p>

*<span style="text-decoration: underline;">Exemple d'organisation :</span>*

Organisation des menus de haut de page (partagé en en tête de toutes les pages, fixe lors du scrolling)

<table border="1" id="bkmrk-accueil-profil-la-mf" style="border-collapse: collapse; width: 100%; height: 165.952px;"><colgroup><col style="width: 8.10401%;"></col><col style="width: 21.0943%;"></col><col style="width: 8.69912%;"></col><col style="width: 21.6909%;"></col><col style="width: 18.234%;"></col><col style="width: 13.9437%;"></col><col style="width: 8.34236%;"></col></colgroup><tbody><tr style="height: 46.5057px;"><td class="align-left" style="height: 46.5057px; background-color: rgb(194, 224, 244); border-style: hidden;">**Accueil**</td><td class="align-left" style="height: 46.5057px; background-color: rgb(194, 224, 244); border-style: hidden;">**Profil**</td><td class="align-left" style="height: 46.5057px; background-color: rgb(194, 224, 244); border-style: hidden;">**LA MFR**</td><td class="align-left" style="height: 46.5057px; background-color: rgb(194, 224, 244); border-style: hidden;">**L'entreprise**</td><td class="align-left" style="height: 46.5057px; background-color: rgb(194, 224, 244); border-style: hidden;">**Situation Professionnelles**</td><td class="align-left" style="height: 46.5057px; background-color: rgb(194, 224, 244); border-style: hidden;">**veille technologique**</td><td class="align-left" style="height: 46.5057px; background-color: rgb(194, 224, 244); border-style: hidden;">**contact**</td></tr><tr style="height: 119.446px;"><td style="height: 119.446px; border-style: hidden;">  
</td><td style="height: 119.446px; border-style: hidden;">- A propos
- Qualités
- Parcours pro
- Projet pro
- Compétences

</td><td style="height: 119.446px; border-style: hidden;">(lien)</td><td style="height: 119.446px; border-style: hidden;">- organigramme
- chiffres clés
- mon équipe
- Schéma d'infrastructure

</td><td style="height: 119.446px; border-style: hidden;">- 1<sup>ère</sup> année
- 2<sup>ème</sup> année

</td><td style="height: 119.446px; border-style: hidden;">  
</td><td style="height: 119.446px; border-style: hidden;">  
</td></tr></tbody></table>

#### <span style="color: rgb(35, 111, 161);">2.2 Page principale</span>

Une première page en mode "one page" divisées en plusieurs sections.

<details id="bkmrk-section-%27accueil%27-la"><summary>Section 'Accueil'</summary>

La première est la section "Accueil" sur laquelle l'on reviens quand on clique en haut à gauche.

Peut contenir votre nom et votre titre d'apprenant ainsi qu'un bouton 'en savoir plus'

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/047image.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/047image.png)

</details><details id="bkmrk-section-%27a-propos%27-p"><summary>Section 'A propos'</summary>

Puis une section par chapitre du menu profil.

A commencer par le profil pouvant contenir le bouton permettant de visualiser et télécharger le CV en PDF.

Le bouton 'lettre de motivation est facultatif'.

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/qSKimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/qSKimage.png)

</details><details id="bkmrk-section-%27qualit%C3%A9s%27-d"><summary>Section 'Qualités'</summary>

Doit être une section très courte. En une ligne.

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/bJTimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/bJTimage.png)

</details><details id="bkmrk-section-%27parcours%27-p"><summary>Section 'Parcours'</summary>

Présenté sous forme de timeline.

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/6dTimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/6dTimage.png)

</details><details id="bkmrk-section-%27projet-prof"><summary>Section 'Projet professionnel'</summary>

Il s'agit de décrire en quelques lignes votre projet d'avenir professionnel.

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/0k5image.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/0k5image.png)

</details><details id="bkmrk-section-%27comp%C3%A9tences"><summary>Section 'Compétences'</summary>

Contient un résumé des compétences sollicitées. Sous forme de barres de progression par exemple)

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/AJUimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/AJUimage.png)

OU

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/BUDimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/BUDimage.png)

</details>#### <span style="color: rgb(35, 111, 161);">2.2 Page Entreprise</span>

La page entreprise doit comporter les sections suivantes :

- Une courte description de l'entreprise
- Un organigramme
- Un court paragraphe sur votre rôle dans l'entreprise
- Un **schéma d'infrastructure** montrant le contexte.

<p class="callout success">**Conseil** : Vous n'avez que 10 minutes d'oral avant l'échange, cela passe très vite. Aussi, soyez concis sur votre présentation.</p>

#### <span style="color: rgb(35, 111, 161);">2.3 Page Situations professionnelles</span>

Les sections 1<sup>ère</sup> et 2<sup>èe</sup> année doivent être clairement identifiables.

Les projets et activités sont dans la bonne catégorie pour chaque année :

- Activités professionnelles
- Projets professionnels
- Projets de cours
- Projets personnels (si il y en a)

<p class="callout warning">**Attention** : Un tableau récapitulatif sera à fournir le jour de l'épreuve et vos activités / projets devront être consignées et répondre aux compétences inscrites au référentiel.</p>

Plusieurs présentations sont possible, mais un lien vers les documents **PDF** doit exister et les documents doivent être consultable et téléchargeables.

<span style="text-decoration: underline;">*Par exemple :*</span>

<table border="1" id="bkmrk--4" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="border-style: none;">[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/K6Vimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/K6Vimage.png)</td><td style="border-style: none;">[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/oImimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/oImimage.png)</td></tr></tbody></table>

#### <span style="color: rgb(35, 111, 161);">2.4 Autres pages</span>

##### <span style="color: rgb(53, 152, 219);">*2.4.1 Ecole / Formation*</span>

Le Menu **Ecole** peut être juste un lien qui pointe vers le site de l'école.

##### <span style="color: rgb(53, 152, 219);">*2.4.2 Veille technologique*</span>

La page **Veille technologique** présente les points suivants :

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/3CEimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/3CEimage.png)

Avec par exemple les thèmes de veilles et liens vers les articles.

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/sqkimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/sqkimage.png)

##### <span style="color: rgb(53, 152, 219);">*2.4.3 Contact*</span>

La page **Contact** permet d'entre rapidement en contact grâce à vos coordonnées et un formulaire.

<p class="callout success">**Conseil** : Vous pouvez également y intégrer des liens vers vos réseaux sociaux.</p>

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/ngaimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/ngaimage.png)

[![image.png](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/scaled-1680-/X3fimage.png)](https://docs.mfrstegreve.fr/uploads/images/gallery/2025-09/X3fimage.png)

### <span style="text-decoration: underline; color: rgb(52, 73, 94);">**III. Projets &amp; activités**</span>

Les comptes rendus des projets qui seront présentés dans les onglets de projets 1<sup>ère</sup> et 2<sup>ème </sup>année devront respecter le format suivant :

<details id="bkmrk-trame-projet-cahier-"><summary>Trame projet</summary>

<span style="text-decoration: underline;">**Cahier des charges – Expression des besoins** </span>

- Descriptif de l’existant. (Schéma, tableau d’adressage, tables de routage, …)
- Besoin (exprimé sous la forme utilisée par un non informaticien)
- Contraintes 
    - Temps
    - Budget
    - Juridique
    - Organisation

<span style="text-decoration: underline;">**Analyse** </span>

- Descriptifs des solutions
- Comparaison des solutions
- Choix d’une solution – Argumentation
- Etude de l’impact sur le SI existant 
    - Sécurité
    - Performance
    - Juridique
    - Ergonomie
- Prévision des tests de validation, à quel moment seront effectués les tests.
- Déploiement 
    - Procédure, pilotes, horaires …

**<span style="text-decoration: underline;">Mise en place</span>**

- (Schéma, tableau d’adressage, tables de routage, …)
- Méthodologie (pas un tuto !) 
    - Les procédures spécifiques seront documentées dans des liens externes à ce document
- Configuration
- Réalisation des tests, rapports de tests
- Rapport de déploiement (si besoin d’un déploiement).

Les procédures seront mises en annexes comme toute documentation que vous jugerez utile !

  
<span style="text-decoration: underline;">**Bilan**</span>

Conclusion du projet :

- Apports pour l'entreprise
- Retour d'expérience

</details>### <span style="text-decoration: underline; color: rgb(52, 73, 94);">**IV. Liens et outils utiles**</span>

[https://coolors.co/palettes/trending](https://coolors.co/palettes/trending) : Outils de palettes visuelles pour avoir une cohérence dans votre code couleur.

[https://www.w3schools.com/](https://www.w3schools.com/) : Contient énormément de ressources pour le code et les styles CSS