Présence en ligne
Se construire une présence en ligne
Unités d'enseignement mobilisées
Apprentissages critiques
AC2101 Concevoir un produit ou un service en termes d’usage et de fonctionnalité
AC2102 Construire la proposition de valeur* d’un produit ou d’un service
AC2104 Mettre au point une stratégie de communication en adaptant le message aux objectifs
AC2105 Rédiger une charte éditoriale pour un site web, un blog, un réseau social (préconisation rédactionnelle, référencement naturel)
AC2106 Communiquer sur les réseaux sociaux (ligne éditoriale et calendrier de publication)
AC3101 Produire un écrit communicationnel dans un style juste et pertinent, en phase avec la stratégie
AC3102 Produire des pistes graphiques et des planches d’inspiration
AC3104 Tourner et monter une vidéo (scénario, captation image et son...)
AC3105 Designer une interface web (wireframes, UI)
AC3106 Optimiser les médias en fonction de leurs usages et supports de diffusion
AC4101 Exploiter de manière autonome un environnement de développement efficace et productif
AC4102 Produire des pages Web statiques et fluides utilisant un balisage sémantique efficace
AC4103 Générer des pages Web ou vues à partir de données structurées incluant des interactions simples
AC4104 Mettre en ligne une application Web en utilisant une solution d’hébergement standard
AC4105 Modéliser les données et les traitements d’une application Web
AC4106 Utiliser et adapter un modèle d’accès aux données
AC4107 Déployer et personnaliser une application Web en utilisant un CMS ou un framework MVC
AC5101 Gérer un projet avec une méthode classique
AC5103 Faire un appel d’offre (cahier des charges, brief, analyse des réponses, choix du prestataire, contractualisation)
AC5105 Analyser un produit ou un service innovant en identifiant les propositions de valeurs et en évaluant les solutions proposées
Présentation
Lors de la SAE 202, nous avons réalisé un site nommé VrooMMI permettant aux étudiants de l'IUT de Troyes en BUT MMI de faire du covoiturage. Nous avions pour objectif de réaliser un site web utilisant Wordpress présentant notre agence ainsi que chacun des membres en parlant des différentes tâches qui leur ont été confiées.
Mon rôle
Dans mon agence, j'ai eu le rôle de développeur front. Ce rôle m'a permis de travailler sur la réalisation des différentes pages du site internet (page d'accueil, trajets, profil, etc...) en ayant une démarche écoresponsable. Afin de répondre à cette problématique, nous avons converti toutes nos images en webp et nous avons évité d'utiliser des images trop grandes en réduisant leur taille, qui ne correspondaient pas à leur taille d'affichage sur le site. J'ai également développé un mode sombre permettant aux écrans OLED de faire des économies d'énergie en éteignant les pixels noirs.
const darkModeButton = document.getElementById("dark-mode-toggle");
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const darkMode = localStorage.getItem("dark-mode");
const toggleDarkMode = (shouldSave = false, value = undefined) => {
document.body.classList.toggle("dark", value);
darkModeButton.children[0].setAttribute(
"src",
document.body.classList.contains("dark")
? "/assets/images/icons/sun.svg"
: "/assets/images/icons/moon.svg"
);
darkModeButton.children[0].setAttribute(
"alt",
document.body.classList.contains("dark") ? "Sun Icon" : "Moon Icon"
);
if (shouldSave) {
localStorage.setItem("dark-mode", document.body.classList.contains("dark"));
}
};
if (darkMode === "true" || (darkModeMediaQuery.matches && darkMode === null)) {
toggleDarkMode();
}
darkModeButton.addEventListener("click", () => {
toggleDarkMode(true);
});
darkModeMediaQuery.addEventListener("change", (e) => {
if (localStorage.getItem("dark-mode") === null) {
toggleDarkMode(false, e.matches);
}
});body.dark {
background: black;
color: white;
}Réalisations
Graphisme
En dehors de mon rôle de développeur front, j'ai aidé le graphiste afin de réaliser le logo.
J'ai également réalisé le gabarit de la page d'accueil ainsi que la maquette.
Développement Back
Afin d'aider la développeuse back, j'ai revu toute l'architecture du projet qu'elle avait réalisé pour passer de ceci:
A ceci:
J'ai choisi d'adopter une architecture comme celle-ci afin de mieux séparer le front et le back et aussi simplifier le code en évitant de devoir importer dans chaque pages le "head" et le "footer" séparément.
On est donc passé de ceci:
<?php
require 'head.php';
require 'nav.php';
?>
<p>index</p>
<?php require 'tail.php';?>A ceci:
<?php
$template = 'index';
require 'layouts/default.php';Où le layout s'occupe de charger la "vue" à l'aide de la variable "template"
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VrooMMI <?= isset($pageTitle) ? ' - ' . $pageTitle : '' ?></title>
<meta name="description" content="Partagez vos trajets en toute tranquillité">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
</head>
<body>
<?php
require __DIR__ . '/../inc/lib.inc.php';
require __DIR__ . '/../components/navbar.php';
include __DIR__ . '/../views/' . $template . '.php';
require __DIR__ . '/../components/footer.php';
?>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="/assets/js/script.js"></script>
</body>
</html>