[{"name":"SAE 105","description":"Cr\u00e9ation d'un site web","url":"\/sae\/105","thumbnail":"\/previews\/sae_105.png","color":"rgb(0,219,146)","tags":["D\u00e9velopper"],"date":"F\u00e9vrier 2023","presentation":"Lors de la SAE 105, nous devions r\u00e9aliser un site web. Les donn\u00e9es de ce site web \u00e9taient stock\u00e9es dans un fichier JSON.","buttons":[{"text":"Voir le rendu","href":"https:\/\/mmi22d01.sae105.ovh","target":"_blank","class":"","style":"background: #222222;"}],"elements":[{"type":"title","content":"La page donn\u00e9es"},{"type":"text","content":"Sur cette page, nous avons du afficher les donn\u00e9es stock\u00e9es dans le fichier JSON sous la forme d'un tableau. Ensuite, nous avons du utiliser la librairie DataTables pour ajouter une pagination ainsi qu'une barre de recherche \u00e0 notre tableau."},{"type":"image","src":"\/sae\/105\/page_donnees.png","alt":"Page donn\u00e9es"},{"type":"title","content":"La page galerie"},{"type":"text","content":"Sur cette page, il \u00e9tait demand\u00e9 de pouvoir mettre en ligne de nouvelles images \u00e0 l'aide d'un formulaire et afficher les diff\u00e9rentes images qui ont \u00e9t\u00e9 mises en lignes"},{"type":"image","src":"\/sae\/105\/page_galerie.png","alt":"Page galerie"},{"type":"code","content":"if ($image_type != 'image\/jpeg' && exif_imagetype($image_temporaire) != IMAGETYPE_JPEG) {\n    $_SESSION['errors'][] = 'Votre image doit \u00eatre au format JPEG.';\n}\nif ($image_taille > 500000) {\n    $_SESSION['errors'][] = 'Votre image est trop lourde.';\n}\n\n$images = scandir(\"..\/images\/galerie\");\nif (!isset($_SESSION['errors'][0])) {\n    if (move_uploaded_file($image_temporaire, '..\/images\/galerie\/image' . count($images) - 2 + 1 . '.jpg')) {\n        if (!isset($_SESSION['errors'][0])) {\n            $_SESSION['success'] = 'Votre image a bien \u00e9t\u00e9 mise en ligne';\n        }\n    } else {\n        $_SESSION['errors'][] = 'Une erreur est survenue lors du t\u00e9l\u00e9chargement de votre image';\n    }\n}"},{"type":"title","content":"La page contact"},{"type":"text","content":"Cette page permettait l'envoi de mails."},{"type":"image","src":"\/sae\/105\/page_contact.png","alt":"Page contact"},{"type":"code","content":"$to = \"mmi22d01@mmi-troyes.fr\";\n$subject = 'SAE105 : demande de ' . $prenom . ' ' . $nom;\n$headers[\"Reply-To\"] = $email;\n$headers[\"X-Mailer\"] = \"PHP\/\" . phpversion();\n$headers['MIME-Version'] = '1.0';\n$headers['content-type'] = 'text\/html; charset=utf-8';\n\nif (mail($to, $subject, \"\n        <div>\n            <h1>Demande de $prenom $nom<\/h1>\n            <h2>$type<\/h2>\n        <\/div>\n        $message\n    \", $headers)) {\n    $_SESSION['success'] = 'Votre demande a bien \u00e9t\u00e9 envoy\u00e9e.';\n} else {\n    $_SESSION['errors'][] = 'Une erreur est survenue lors de l\\'envoi de votre demande.';\n};"},{"type":"title","content":"La page partenaires"},{"type":"text","content":"Nous devions effectuer une pr\u00e9sentation de notre groupe sur cette page et mettre les diff\u00e9rents documents demand\u00e9s"},{"type":"image","src":"\/sae\/105\/page_partenaire.png","alt":"Page partenaire"}],"ac":["AC4101 Exploiter de mani\u00e8re autonome un environnement de d\u00e9veloppement efficace et productif","AC4102 Produire des pages Web statiques et fluides utilisant un balisage s\u00e9mantique efficace","AC4103 G\u00e9n\u00e9rer des pages Web ou vues \u00e0 partir de donn\u00e9es structur\u00e9es incluant des interactions simples","AC4104 Mettre en ligne une application Web en utilisant une solution d\u2019h\u00e9bergement standard"]},{"name":"SAE 103","description":"Charte graphique d'un salon de tatouage","url":"\/sae\/103","thumbnail":"\/sae\/103\/couverture.png","color":"rgb(206, 157, 102)","tags":["Exprimer"],"date":"D\u00e9cembre 2022","presentation":"Dans le cadre de la SAE 103, nous avions pour objectif de r\u00e9aliser la charte graphique d'un studio de tatouage nomm\u00e9 <span style=\"color: darkorange;\">L'Atelier<\/span>. Nous devions r\u00e9aliser une moodboard ainsi qu'une charte graphique contenant un logotype, des pictogrammes, un nuancier de couleurs, des typographies, une direction photographique et des mock ups.<br><br> De cette <strong>moodboard<\/strong> et de cette <strong>charte graphique<\/strong>, nous devions faire ressortir une ambiance visuelle rappelant la mouvance hipster et le vintage.","buttons":[{"text":"Voir le sujet","href":"\/sae\/103\/sujet.pdf","target":"","class":"btn","style":""}],"elements":[{"type":"title","content":"Moodboard"},{"type":"text","content":"La conception de cette moodboard permet de donner un premier aper\u00e7u, pour donner une id\u00e9e plus pr\u00e9cise de la direction dans laquelle la charte graphique devra aller pour \u00eatre sur de ce que souhaite le client."},{"type":"image","src":"\/sae\/103\/moodboard.jpg","alt":"Moodboard"},{"type":"title","content":"Esquisses"},{"type":"text","content":"Avant de commencer la charte graphique, il \u00e9tait primordial d'effectuer un logotype en rapport avec la th\u00e9matique du salon de tatouage."},{"type":"image","src":"\/sae\/103\/esquisse_1.jpg","alt":"Esquisse 1"},{"type":"image","src":"\/sae\/103\/esquisse_2.jpg","alt":"Esquisse 2"},{"type":"title","content":"Charte graphique"},{"type":"text","content":"Elle contient tout les \u00e9l\u00e9ments n\u00e9cessaires \u00e0 l'identit\u00e9 d'une marque. Le logotype, le nuancier de couleurs, les typographies ainsi que des pictogrammes."},{"type":"image","src":"\/sae\/103\/couverture.png","alt":"Couverture"},{"type":"image","src":"\/sae\/103\/sommaire.png","alt":"Sommaire"},{"type":"image","src":"\/sae\/103\/logotypes.png","alt":"Logotype"},{"type":"image","src":"\/sae\/103\/couleurs_typos.png","alt":"Nuancier &amp; Typographies &amp; Pictogrammes"},{"type":"image","src":"\/sae\/103\/direction_photo.png","alt":"Direction photographique"},{"type":"image","src":"\/sae\/103\/mock_ups.png","alt":"Mock ups"},{"type":"image","src":"\/sae\/103\/end.png","alt":"Fin du document"}],"ac":["AC3102 Produire des pistes graphiques et des planches d\u2019inspiration","AC3103 Cr\u00e9er, composer et retoucher des visuels","AC3106 Optimiser les m\u00e9dias en fonction de leurs usages et supports de diffusion"]},{"name":"SAE 102","description":"Recommandation de communication num\u00e9rique","url":"\/sae\/102","thumbnail":"\/previews\/sae_102.png","color":"rgb(46,229,92)","tags":["Concevoir"],"date":"Novembre 2022","presentation":"L'objectif de cette SAE \u00e9tait d'effectuer une recommandation de communication num\u00e9rique pour une association anti-pub nomm\u00e9e R\u00e9clame-Action.","elements":[{"type":"title","content":"Ma partie"},{"type":"text","content":"Lors de cette SAE, je me suis occup\u00e9 des publics cibles et du calendrier \u00e9ditorial avec L\u00e9na Colisson. Ces deux parties nous ont permis d'\u00e9laborer un planning de publications pour une association."},{"type":"text","content":"Nous avons \u00e9galement travaill\u00e9 sur les propositions visuelles et textuelles de l'association. L\u00e9na s'est occup\u00e9e de faire un logo et je l'ai ensuite r\u00e9utilis\u00e9 pour une banni\u00e8re utilis\u00e9e sur les r\u00e9seaux sociaux de l'association."},{"type":"text","content":"J'ai ensuite r\u00e9alis\u00e9 des fausses publications Instagram et Twitter pour montrer l'utilisation de l'identit\u00e9 visuelle de l'association au sein de publications sur les r\u00e9seaux."},{"type":"text","content":"J'ai ensuite r\u00e9alis\u00e9 une vid\u00e9o YouTube sous forme de Short pour inviter les gens qui la verrait \u00e0 se rendre \u00e0 une manifestation."},{"type":"embed","src":"http:\/\/45.155.169.158\/sae\/102\/sae102.pdf"}],"buttons":[{"text":"Voir le sujet","href":"sujet.pdf","target":"_blank","class":"btn","style":""}],"ac":["AC2103 Proposer une recommandation marketing (cibles, objectifs, points de contact)","AC2104 Mettre au point une strat\u00e9gie de communication en adaptant le message aux objectifs","AC2105 R\u00e9diger une charte \u00e9ditoriale pour un site web, un blog, un r\u00e9seau social (pr\u00e9conisation r\u00e9dactionnelle, r\u00e9f\u00e9rencement naturel)","AC2106 Communiquer sur les r\u00e9seaux sociaux (ligne \u00e9ditoriale et calendrier de publication)"]},{"name":"SAE 107","description":"R\u00e9alisation d'un podcast","url":"\/sae\/107","thumbnail":"\/previews\/sae_107.png","color":"rgb(93,155,168)","tags":["Comprendre","Exprimer"],"date":"D\u00e9cembre 2022","presentation":"Lors de cette SAE, nous avons eu l'occasion de r\u00e9aliser un podcast reprenant la th\u00e9matique de la SAE 102. Nous devions r\u00e9aliser un podcast anti-pub. Avec mon groupe, nous avons adopt\u00e9 une strat\u00e9gie de boycott des entreprises qui utilisent \u00e9norm\u00e9ment la publicit\u00e9 et poussent les gens \u00e0 la surconsommation.","buttons":[],"elements":[],"ac":["AC3101 Produire un \u00e9crit communicationnel dans un style juste et pertinent, en phase avec la strat\u00e9gie"]},{"name":"Site personnel","description":"R\u00e9alisation de mon site personnel","url":"\/projets\/site-personnel","thumbnail":"\/previews\/projets_site-personnel.png","color":"rgb(0,209,181)","tags":["D\u00e9velopper"],"date":"Septembre 2022","presentation":"Cr\u00e9ation de mon site pr\u00e9sentant mes diff\u00e9rents travaux en BUT MMI.&nbsp;","buttons":[],"elements":[{"type":"title","content":"Version 1"},{"type":"text","content":"En septembre 2022, j'ai voulu personnaliser mon site de travaux pour y accueillir une pr\u00e9sentation de moi, ainsi que quelques projets que j'avait d\u00e9j\u00e0 fait jusque l\u00e0."},{"type":"image","src":"\/projets\/site-personnel\/version_1.png","alt":"&nbsp;Version 1 du site"},{"type":"text","content":"Lorsqu'on nous a parl\u00e9 de r\u00e9aliser un portfolio universitaire, je me suis rendu compte que ce site ne me convenait plus et j'ai commenc\u00e9 \u00e0 r\u00e9fl\u00e9chir \u00e0 la r\u00e9alisation d'un nouveau site personnel."},{"type":"title","content":"Version 2"},{"type":"image","src":"\/projets\/site-personnel\/image.png","alt":"Version 2 du site de travaux"},{"type":"text","content":"Sur ce nouveau site, je me suis cr\u00e9\u00e9 un \"CMS\" tr\u00e8s simple pour pouvoir \u00e9diter mon portfolio tr\u00e8s facilement et rapidement en utilisant la librairie \"EditorJS\", la propri\u00e9t\u00e9 \"contenteditable\" et en stockant les donn\u00e9es dans un fichier JSON."},{"type":"image","src":"\/projets\/site-personnel\/modify.png","alt":"Edit mode"},{"type":"text","content":"Les pages de mon portfolio sont donc g\u00e9n\u00e9r\u00e9es automatiquement et je peux \u00e9galement ajouter du contenu tr\u00e8s rapidement."},{"type":"image","src":"\/projets\/site-personnel\/add.png","alt":"Add project"},{"type":"title","content":"Bout du code JavaScript permettant la sauvegarde"},{"type":"code","content":"const name = nameElement.innerHTML;\nconst description = descriptionElement.innerHTML;\nconst presentation = presentationElement.innerHTML;\nconst color = document\n    .querySelector(\".heading\")\n    .style.getPropertyValue(\"--project_color\");\nconst buttons = document.querySelectorAll(\".btn-list > *\");\nconst buttonsArray = [];\nfor (const button of buttons) {\n    if (button.id === \"btn_plus\") continue;\n    buttonsArray.push({\n        text: button.innerText,\n        href: button.getAttribute(\"href\"),\n        target: button.getAttribute(\"target\"),\n        class: button.getAttribute(\"class\").replace(\"btn \", \"\"),\n        style: button.getAttribute(\"style\"),\n    });\n}\n\nconst formData = new FormData();\nformData.append(\n    \"data\",\n    JSON.stringify({\n        name,\n        description,\n        color,\n        presentation,\n        buttons: buttonsArray,\n        tags: getSelectValues(tags),\n        ac: getSelectValues(selectAc),\n        date: monthDate.value,\n        elements,\n    })\n);\n\nif (uploadThumbnail.files[0]) {\n    formData.append(\n        \"thumbnail\",\n        uploadThumbnail.files[0],\n        uploadThumbnail.files[0].name\n    );\n}\n\nfetch(\"\/api\/admin\/projects\/update.php\", {\n    method: \"POST\",\n    body: formData,\n}).then((r) => {\n    if (r.status === 200) {\n        alert(\"Projet mis \u00e0 jour !\");\n        leaveEditMode();\n    } else {\n        alert(\"Une erreur est survenue\");\n    }\n});"},{"type":"title","content":"Morceau du code PHP permettant la sauvegarde"},{"type":"code","content":"$formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::LONG, IntlDateFormatter::NONE, pattern: 'MMMM yyyy');\nforeach ($project as $key => $value) {\n    if ($key === 'date')\n        $value = ucfirst($formatter->format(strtotime($value)));\n    if ($key === 'presentation')\n        $value = html_entity_decode($value);\n\n    $projects[$projectKey][$key] = $value;\n}\nfile_put_contents($_SERVER['DOCUMENT_ROOT'] . '\/api\/projects.json', json_encode($projects, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE));"}],"ac":["AC4101 Exploiter de mani\u00e8re autonome un environnement de d\u00e9veloppement efficace et productif","AC4102 Produire des pages Web statiques et fluides utilisant un balisage s\u00e9mantique efficace","AC4103 G\u00e9n\u00e9rer des pages Web ou vues \u00e0 partir de donn\u00e9es structur\u00e9es incluant des interactions simples","AC4104 Mettre en ligne une application Web en utilisant une solution d\u2019h\u00e9bergement standard"]},{"name":"SAE 202","description":"Cr\u00e9ation d'un site web pour le covoiturage","url":"\/sae\/202","thumbnail":"\/previews\/sae_202.png","color":"rgb(64,231,128)","tags":["Concevoir","Exprimer","D\u00e9velopper","Entreprendre"],"date":"Juin 2023","presentation":"Lors de la SAE 202, nous avons r\u00e9alis\u00e9 un site nomm\u00e9 VrooMMI permettant aux \u00e9tudiants de l'IUT de Troyes en BUT MMI de faire du covoiturage. Nous avions pour objectif de r\u00e9aliser un site web utilisant Wordpress pr\u00e9sentant notre agence ainsi que chacun des membres en parlant des diff\u00e9rentes t\u00e2ches qui leur ont \u00e9t\u00e9 confi\u00e9es.&nbsp;<br>","buttons":[{"text":"Voir le site","href":"https:\/\/mmi22d01.sae202.ovh\/","target":"_blank","class":"btn","style":""}],"elements":[{"type":"title","content":"Mon r\u00f4le"},{"type":"text","content":"Dans mon agence, j'ai eu le r\u00f4le de d\u00e9veloppeur front. Ce r\u00f4le m'a permis de travailler sur la r\u00e9alisation des diff\u00e9rentes pages du site internet (page d'accueil, trajets, profil, etc...) en ayant une d\u00e9marche \u00e9coresponsable. Afin de r\u00e9pondre \u00e0 cette probl\u00e9matique, nous avons converti toutes nos images en webp et nous avons \u00e9vit\u00e9 d'utiliser des images trop grandes en r\u00e9duisant leur taille, qui ne correspondaient pas \u00e0 leur taille d'affichage sur le site. J'ai \u00e9galement d\u00e9velopp\u00e9 un mode sombre permettant aux \u00e9crans OLED de faire des \u00e9conomies d'\u00e9nergie en \u00e9teignant les pixels noirs."},{"type":"code","content":"const darkModeButton = document.getElementById(\"dark-mode-toggle\");\nconst darkModeMediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\nconst darkMode = localStorage.getItem(\"dark-mode\");\n\nconst toggleDarkMode = (shouldSave = false, value = undefined) => {\n  document.body.classList.toggle(\"dark\", value);\n  darkModeButton.children[0].setAttribute(\n    \"src\",\n    document.body.classList.contains(\"dark\")\n      ? \"\/assets\/images\/icons\/sun.svg\"\n      : \"\/assets\/images\/icons\/moon.svg\"\n  );\n  darkModeButton.children[0].setAttribute(\n    \"alt\",\n    document.body.classList.contains(\"dark\") ? \"Sun Icon\" : \"Moon Icon\"\n  );\n\n  if (shouldSave) {\n    localStorage.setItem(\"dark-mode\", document.body.classList.contains(\"dark\"));\n  }\n};\n\nif (darkMode === \"true\" || (darkModeMediaQuery.matches && darkMode === null)) {\n  toggleDarkMode();\n}\ndarkModeButton.addEventListener(\"click\", () => {\n  toggleDarkMode(true);\n});\ndarkModeMediaQuery.addEventListener(\"change\", (e) => {\n  if (localStorage.getItem(\"dark-mode\") === null) {\n    toggleDarkMode(false, e.matches);\n  }\n});"},{"type":"code","content":"body.dark {\n  background: black;\n  color: white;\n}"},{"type":"title","content":"R\u00e9alisations"},{"type":"text","content":"Graphisme"},{"type":"text","content":"En dehors de mon r\u00f4le de d\u00e9veloppeur front, j'ai aid\u00e9 le graphiste afin de r\u00e9aliser le logo."},{"type":"image","src":"\/sae\/202\/logos.png","alt":"Logo VrooMMI"},{"type":"text","content":"J'ai \u00e9galement r\u00e9alis\u00e9 le gabarit de la page d'accueil ainsi que la maquette."},{"type":"image","src":"\/sae\/202\/gabarit.jpg","alt":"Gabarit page d'accueil"},{"type":"image","src":"\/sae\/202\/accueil.jpg","alt":"Maquette page d'accueil"},{"type":"text","content":"D\u00e9veloppement Back"},{"type":"text","content":"Afin d'aider la d\u00e9veloppeuse back, j'ai revu toute l'architecture du projet qu'elle avait r\u00e9alis\u00e9 pour passer de ceci:"},{"type":"image","src":"\/sae\/202\/old_archi.png","alt":"Ancienne architecture"},{"type":"text","content":"A ceci:"},{"type":"image","src":"\/sae\/202\/new_archi.png","alt":"New architecture"},{"type":"text","content":"J'ai choisi d'adopter une architecture comme celle-ci afin de mieux s\u00e9parer le front et le back et aussi simplifier le code en \u00e9vitant de devoir importer dans chaque pages le \"head\" et le \"footer\" s\u00e9par\u00e9ment."},{"type":"text","content":"On est donc pass\u00e9 de ceci:"},{"type":"code","content":"<?php \n    require 'head.php';\n    require 'nav.php';\n?>\n\n<p>index<\/p>\n\n<?php require 'tail.php';?>"},{"type":"text","content":"A ceci:"},{"type":"code","content":"<?php\n\n$template = 'index';\nrequire 'layouts\/default.php';"},{"type":"text","content":"O\u00f9 le layout s'occupe de charger la \"vue\" \u00e0 l'aide de la variable \"template\""},{"type":"code","content":"<!DOCTYPE html>\n<html lang=\"fr\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>VrooMMI <?= isset($pageTitle) ? ' - ' . $pageTitle : '' ?><\/title>\n    <meta name=\"description\" content=\"Partagez vos trajets en toute tranquillit\u00e9\">\n    <link rel=\"stylesheet\" href=\"\/assets\/css\/style.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\n<\/head>\n\n<body>\n    <?php\n    require __DIR__ . '\/..\/inc\/lib.inc.php';\n\n    require __DIR__ . '\/..\/components\/navbar.php';\n    include __DIR__ . '\/..\/views\/' . $template . '.php';\n    require __DIR__ . '\/..\/components\/footer.php';\n    ?>\n\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\n    <script src=\"\/assets\/js\/script.js\"><\/script>\n<\/body>\n\n<\/html>"}],"ac":["AC2101 Concevoir un produit ou un service en termes d\u2019usage et de fonctionnalit\u00e9","AC2102 Construire la proposition de valeur* d\u2019un produit ou d\u2019un service","AC2104 Mettre au point une strat\u00e9gie de communication en adaptant le message aux objectifs","AC2105 R\u00e9diger une charte \u00e9ditoriale pour un site web, un blog, un r\u00e9seau social (pr\u00e9conisation r\u00e9dactionnelle, r\u00e9f\u00e9rencement naturel)","AC2106 Communiquer sur les r\u00e9seaux sociaux (ligne \u00e9ditoriale et calendrier de publication)","AC3101 Produire un \u00e9crit communicationnel dans un style juste et pertinent, en phase avec la strat\u00e9gie","AC3102 Produire des pistes graphiques et des planches d\u2019inspiration","AC3104 Tourner et monter une vid\u00e9o (sc\u00e9nario, captation image et son...)","AC3105 Designer une interface web (wireframes, UI)","AC3106 Optimiser les m\u00e9dias en fonction de leurs usages et supports de diffusion","AC4101 Exploiter de mani\u00e8re autonome un environnement de d\u00e9veloppement efficace et productif","AC4102 Produire des pages Web statiques et fluides utilisant un balisage s\u00e9mantique efficace","AC4103 G\u00e9n\u00e9rer des pages Web ou vues \u00e0 partir de donn\u00e9es structur\u00e9es incluant des interactions simples","AC4104 Mettre en ligne une application Web en utilisant une solution d\u2019h\u00e9bergement standard","AC4105 Mod\u00e9liser les donn\u00e9es et les traitements d\u2019une application Web","AC4106 Utiliser et adapter un mod\u00e8le d\u2019acc\u00e8s aux donn\u00e9es","AC4107 D\u00e9ployer et personnaliser une application Web en utilisant un CMS ou un framework MVC","AC5101 G\u00e9rer un projet avec une m\u00e9thode classique","AC5103 Faire un appel d\u2019offre (cahier des charges, brief, analyse des r\u00e9ponses, choix du prestataire, contractualisation)","AC5105 Analyser un produit ou un service innovant en identifiant les propositions de valeurs et en \u00e9valuant les solutions propos\u00e9es"]}]