Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 1

DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 1 Nom de naissance u Nom d’usage u Prénom u Adresse u Titre professionnel visé Développeur Web / Web Mobile MODALITE D’ACCES : ☒ Parcours de formation ☐ Validation des Acquis de l’Expérience (VAE) Méthot Méthot Margaux 32 Place Charles de Gaulle 59491 Villeneuve d'Ascq DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 2 Présentation du dossier Le dossier professionnel (DP) constitue un élément du système de validation du titre professionnel. Ce titre est délivré par le Ministère chargé de l’emploi. Le DP appartient au candidat. Il le conserve, l’actualise durant son parcours et le présente obligatoirement à chaque session d’examen. Pour rédiger le DP, le candidat peut être aidé par un formateur ou par un accompagnateur VAE. Il est consulté par le jury au moment de la session d’examen. Pour prendre sa décision, le jury dispose : 1. des résultats de la mise en situation professionnelle complétés, éventuellement, du questionnaire professionnel ou de l’entretien professionnel ou de l’entretien technique ou du questionnement à partir de productions. 2. du Dossier Professionnel (DP) dans lequel le candidat a consigné les preuves de sa pratique professionnelle 3. des résultats des évaluations passées en cours de formation lorsque le candidat évalué est issu d’un parcours de formation 4. de l’entretien final (dans le cadre de la session titre). [Arrêté du 22 décembre 2015, relatif aux conditions de délivrance des titres professionnels du ministère chargé de l’Emploi] Ce dossier comporte : u pour chaque activité-type du titre visé, un à trois exemples de pratique professionnelle ; u un tableau à renseigner si le candidat souhaite porter à la connaissance du jury la détention d’un titre, d’un diplôme, d’un certificat de qualification professionnelle (CQP) ou des attestations de formation ; u une déclaration sur l’honneur à compléter et à signer ; u des documents illustrant la pratique professionnelle du candidat (facultatif) u des annexes, si nécessaire. Pour compléter ce dossier, le candidat dispose d’un site web en accès libre sur le site. y http://travail-emploi.gouv.fr/titres-professionnels DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 3 Sommaire Exemples de pratique professionnelle Développer la partie front-end d’une application web ou web mobile en intégrant les recommandations de sécurité p. 5 u Mon Curriculum Vitae en ligne ......................................................................................... p. 5 u Interface de gestion de commentaires ............................................................................. p. 10 u Boutique e-commerce sous WordPress ............................................................................ p. 15 Développer la partie back-end d’une application web ou web mobile en intégrant les recommandations de sécurité p. 22 u Conception d’une base de données ................................................................................ p. 22 u Développement d’une API et de la base de données d’une application (Node.js) ........... p. 26 u Développement d’une API et de la base de données d’une application (Symfony)......... p. 33 Titres, diplômes, CQP, attestations de formation (facultatif) p. 39 Déclaration sur l’honneur p. 40 Documents illustrant la pratique professionnelle (facultatif) p. Annexes (Si le RC le prévoit) p. 42 DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 4 EXEMPLES DE PRATIQUE PROFESSIONNELLE DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 5 Activité-type 1 Développer la partie front-end d’une application web ou web mobile en intégrant les recommandations de sécurité Exemple n°1 u Mon Curriculum Vitae en ligne 1. Décrivez les tâches ou opérations que vous avez effectuées, et dans quelles conditions : Afin de mettre en pratique ce que nous avions appris concernant les langages HTML et CSS, et également d’avoir à disposition un support pour notre recherche d’emploi après la formation, il nous a été demandé de développer notre CV en ligne. Dans un premier temps, j’ai effectué des recherches de CV d’autres développeurs, afin de savoir quelles informations étaient pertinentes sur un CV en ligne, et de quelle façon elles étaient présentées. Après cette recherche, j’ai conçu le zoning, puis les maquettes de la version mobile et ordinateur, en gardant à l’esprit que le CV devait être « mobile first ». Après validation, j’ai établi la feuille de style, qui reprend les polices et les couleurs qui seront utilisées. Côté développement, les consignes de cet exercice nous imposaient de respecter certains critères : u avoir un dossier pour le CSS, un dossier pour les images et un dossier pour le SCSS u utiliser le framework Bootstrap pour au moins la navbar responsive et la grid u utiliser la méthodologie BEM afin de respecter le nommage des différentes classes et de leur arborescence u utiliser les processeurs CSS : le pré-processeur SASS, la librairie POSTCSS pour les post- processeurs afin de minifier le CSS et de l’adapter afin d’avoir un rendu identique sur tous les navigateurs. Pour automatiser cela, nous devions utiliser des scripts pour le dev et la prod. Pour le rendu final : voir annexe 1 page 43 DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 6 2. Précisez les moyens utilisés : J’ai réalisé tout le travail de maquettage sur l’outil en ligne FIGMA. Le zoning Le wireframe DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 7 Le feuille de style Concernant la partie développement, j’ai utilisé l’éditeur de code Visual Studio Code. J’ai utilisé le framework Bootstrap en important les différentes lignes de code nécessaires comme indiquées dans la documentation. Extrait de la balise <head> du fichier index.html Scripts du fichier index.html DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 8 L’import de ce code m’a donc permis d’utiliser Bootstrap pour le développement de ma navbar : à l’aide de certaines balises et de certaines classes, la barre de navigation est développée et responsive en quelques minutes. Code de la barre de navigation L’utilisation de la méthodologie BEM facilite la lecture de l’arborescence d’un fichier HTML et de ses différentes classes. Exemple d’utilisation de la méthodologie BEM Pour finir, l’utilisation des processeurs CSS m’a permis d’optimiser le CSS, afin de gagner en performance et de permettre d’avoir un rendu visuel identique sur tous les navigateurs. Scripts permettant l’automatisation DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 9 3. Avec qui avez-vous travaillé ? J’ai travaillé toute seule sur ce projet, mais en bénéficiant du suivi de mon formateur lorsque c’était nécessaire. 4. Contexte Nom de l’entreprise, organisme ou association u Chantier, atelier, service u Cliquez ici pour taper du texte. Période d’exercice u Du 14/04/2020 au 02/06/2020 5. Informations complémentaires (facultatif) Cliquez ici pour taper du texte. Studi DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 10 Activité-type 1 Développer la partie front-end d’une application web ou web mobile en intégrant les recommandations de sécurité Exemple n°2 u Interface de gestion de commentaires 1. Décrivez les tâches ou opérations que vous avez effectuées, et dans quelles conditions : Au cours de la formation, nous avons étudié le langage JavaScript, puis plus particulièrement la librairie React, librairie JavaScript qui permet de créer des interfaces utilisateurs. Afin de mettre en pratique nos apprentissages, nous avons dû reproduire une interface de gestion de commentaires. Elle devait contenir : u un formulaire pour ajouter un commentaire u un emplacement où s’affichaient les commentaires ajoutés u un bouton qui permettait de passer en mode administration, qui lui seul permettait d’effacer les commentaires précédemment ajoutés. Pour la mise en forme, nous devions utiliser le framework Bulma. Pour le rendu final : voir annexe 2 page 44 2. Précisez les moyens utilisés : Pour le développement, j’ai utilisé l’éditeur de code Visual Studio Code. J’ai installé Bulma grâce à la commande : Ensuite, il suffit d’importer uniquement ce dont on a besoin dans le fichier index.scss. Import des composants Bulma nécessaires DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 11 Concernant le développement React, j’ai créé 3 composants : u <CommentList> qui s’occupera de l’affichage des commentaires et de leur bouton de suppression u <CommentForm> qui s’occupera de l’affichage du formulaire et du traitement des données saisies u <AdminMode> qui s’occupera de l’affichage du bouton qui activera et désactivera le mode admin Le composant <CommentForm> traite les données enregistrées grâce aux fonctions handleChangeName, handleChangeMessage et handleSubmit, qui récupèrent et stockent les données saisies par l’utilisateur. Composant CommentForm DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 12 Dans le composant <CommentList> , l’affichage des boutons de suppression dépend de l’état de la variable isAdmin en ajustant la classe des boutons de suppression qui passe de « delete » à « delete is-invisible » qui sont des classes Bulma. Composant CommentList Le composant <AdminMode> adapte l’affichage du bouton en fonction de la variable « isAdmin » et en adaptant la couleur à l’aide de la variable « classMessage ». Composant AdminMode DOSSIER PROFESSIONNEL (DP) y DOSSIER PROFESSIONNEL-Version du 01/06/2016 Page 13 Une fois ces composants créés, il me suffit de les importer dans mon fichier App.js. C’est dans ce fichier que sera géré l’état « isAdmin » dont dépendent les composants AdminMode et CommentList, qui ont un affichage conditionnel qui dépend de cette variable booléenne : Composant App.js 3. Avec qui avez-vous travaillé ? J’ai travaillé toute seule sur ce projet, mais en bénéficiant du suivi de mon formateur uploads/s1/ exemple-dossier-professionnel.pdf