Programme National

Objectifs : combiner les ressources liées au développement web, au design d’expérience et à la gestion de projet pour concevoir et développer des parcours utilisateurs.

En tant que développeurs web et UX-designers, les étudiants doivent analyser le cahier des charges d'une application ou d'un site web, identifier les parcours utilisateurs, avant d'en développer les fonctionnalités en répondant à la question : Comment mettre en place un site web offrant une expérience utilisateur de qualité ?

Présentation résumée

Le service culture d'une mairie d'une ville moyenne souhaite proposer un site web à ses clients avec l'offre de spectacle qu'elle propose au travers de ses différents lieux (théâtres, salles, cinéma, espace en plein air).

Les objectifs de cette SAE sont :

• Produire un site ergonomique avec une UX travaillée

• Produire un site accessible, éco-conçu et avec un référencement travaillé

Organisation

Cette SAE sera réalisée en trinôme.

=> 5 trinômes ou 3 groupe de 5 ?

Planning

• Lundi, mardi, mercredi et jeudi : 8h-12h30 - 14h-17h

• Vendredi : 8h-12h30 (sauf 19/01, libre)

Appel chaque demi-journée

Les étudiants d'un IUT souhaitent pouvoir disposer d'un outil afin de mettre en commun les dates des différents rendu demandés par les enseignants ainsi que des évaluations. Les étudiants souhaitent avoir des rappels (via l'interface de l'application et/ou par mail), pouvoir effectuer des rechercher, classer les échéances, les visualiser.

Vous pouvez ajouter toutes les fonctionnalités que vous jugerez nécessaires.

Fonctionnalités

Le site devra permettre aux utilisateurs de :

• Saisir une date ou une demande de rendu (les champs nécessaires sont à définir par vous)

• Effectuer une recherche, sans rechargement de page

• Lister, trier, filtrer les données

• Avoir une "notification" des échéances les plus proches

• Eventuellement un back-office, pas forcément indispensable selon la logique de votre projet. Possibilité d'utiliser : https://symfony.com/bundles/EasyAdminBundle/current/index.html

Contraintes et critères imposés

• Le site devra être développé en PHP, avec un framework MVC (Symfony, Laravel, CodeIgniter, ...)

• L'interactivité, l'ergonomie et l'accessibilité globale de votre application seront les critères essentiels

• Le site devra être responsive

• Le site devra être accessible (RGAA AA)

• Le site devra être optimisé (eco-conçu)

• Le site devra être versionné avec Git

• Le site devra être géré avec GitHub

Expérience Utilisateur (UX)

• L'UX du site devra être particulière soignée. Le site devra être ergonomique et intuitif.

• Les processus de dépôt, de consultation, ... devront être fluide et favoriser l'UX

• Vous veillerez à intégrer l'ensemble des mentions légales et des informations nécessaires à la bonne compréhension du site

Exemple non exhaustif d'étapes du travail attendu

• Identifier les données et proposer un MCD/MLD

• Faire de rapides gabarits de votre application (ne perdez pas trop de temps sur cette étape malgré tout)

• Poser la structure Symfony avec les différentes routes et vues.

• Mettre en place le design (simple mais accessible), les différentes pages et les interactions

Vous veillerez à soigner l'apparence du site et la mise en pratiques de vos connaissances en Webdesign. Un logo simple sera proposé.

Les frameworks front pourront être utilisés. Les templates sont interdits.

Même si ce n'est pas demandé une analyse sectorielle serait souhaitée/utile.

Comment afficher des données issues d'un tableau JavaScript en HTML

Le début de votre fichier JavaScript ressemblera à ceci :

const data = {
  "products": [
    {
      "id": 1,
      "name": "T-shirt",
      "price": 10,
      "quantity": 1,
      "image": "https://picsum.photos/200/300?random=1"
    },
    {
      "id": 2,
      "name": "Pantalon",
      "price": 20,
      "quantity": 2,
      "image": "https://picsum.photos/200/300?random=2"
    },
    {
      "id": 3,
      "name": "Chaussures",
      "price": 30,
      "quantity": 1,
      "image": "https://picsum.photos/200/300?random=3"
    }
  ]
}

document.addEventListener('DOMContentLoaded', () => {

    //Le dom est chargé,  votre code ici...
    
});

Le plus pratique est de donner un id à votre tableau de votre panier, et de récupérer cet élément dans votre code JavaScript.

const panier = document.getElementById('panier');

Cette ligne devrait se trouver dans la partie tbody de votre tableau. On peut donc ajouter cette partie tbody à notre tableau (s'il n'en contient pas encore)

  const tbody = document.createElement('tbody')
  panier.appendChild(tbody)

Ensuite, vous pouvez parcourir les produits (products) des données json, et ajouter une ligne par produit.

data.products.forEach(product => {
    //Ajouter une ligne au tableau
});

Il vous reste ensuite à définir le code HTML qui va être généré pour chaque ligne de produit, et l'ajouter à votre tableau.

const tr = document.createElement('tr');
tr.innerHTML = `
    <td>...vos données pour un produit ...</td>
`;
tbody.appendChild(tr);

Travail à faire

• Afficher les données dans votre page panier, à partir des données json.

• Ajoutez toutes les parties nécessaires (total, TVA, ...)

• Alimentez ces zones (en JavaScript) avec les éléments de votre panier (calculé le coût total du panier, la TVA (20%), ...)

• Ajoutez tous les boutons et interactions nécessaires (supprimer un produit, modifier la quantité, ...)

• Prenez le temps d'intégrer correctement l'ensemble des éléments et d'ajouter une barre de menu.

• Pensez à l'ergonomie, l'accessibilité et l'UX de votre page

Stockage dans le localStorage

Actuellement, si vous actualisez votre page, tout est perdu. Ce n'est pas très pratique... Une solution simple consiste à stocker les informations dans le localStorage ou sessionStorage.

Lire ici pour plus de détails : https://fr.javascript.info/localstorage

• Les principales caractéristiques de localStorage sont les suivantes :

  • Partagé entre tous les onglets et fenêtres d’une même origine.

  • Les données n’expirent pas. Il reste après le redémarrage du navigateur et même le redémarrage du système d’exploitation.

• L’objet sessionStorage est beaucoup moins utilisé que localStorage.

  • Les propriétés et les méthodes sont les mêmes, mais c’est beaucoup plus limité :

  • Le sessionStorage n’existe que dans l’onglet actuel du navigateur.

  • Un autre onglet avec la même page aura un stockage différent.

  • Mais il est partagé entre les iframes du même onglet (en supposant qu’ils proviennent de la même origine).

  • Les données survivent à l’actualisation de la page, mais pas à la fermeture/ouverture de l’onglet.

Nous allons utiliser localStorage pour stocker les produits du panier. Les méthodes principales sont :

• setItem(key, value) – stocke la paire clé/valeur.

• getItem(key) – récupère la valeur par clé.

• removeItem(key) – supprime la clé avec sa valeur.

• clear() – supprime tout.

• key(index) – récupère la clé sur une position donnée.

• length – le nombre d’éléments stockés.

Livrables

• Liste des fonctionnalités (10/01/2024 - 09h30 - ou avant)

  • Liste de l'ensemble des fonctionnalités identifiées et à intégrer

  • Document correctement rédigée (une mise en page simple est suffisante)

• Gabarits (11/01/2024 - 08h00 - ou avant)

  • Crayonnés, logiciels,... intégrant l'ensemble des fonctionnalités identifiées

  • permettra un échange sur cette base

• Premier prototype fonctionnel (17/01/2024 - 08h00 - ou avant)

  • Démonstration sur votre PC

  • valider les concepts, avoir un premier retour

• Produit développé fonctionnel (une vidéo de démonstration sera proposée) (19/01/2024)

  • Version en ligne accessible

• gestion de projet au travers de GitHub (témoignant de mises à jours régulières) (19/01/2024)

Dates de rendu

• Rendu des livrables : 19 janvier, par mail à david.annebicque@univ-reims.fr

• 1 par groupe avec :

  • Lien vers le site

  • Dépôt github (privé ou public, si privée ajouter mon compte : dannebicque)

  • Vidéo de démonstration du produit en vidéo (commenté...)

  • Comptes de tests si nécessaire

Notation

• Accessible, éco-concu : 3 points

• Ergonomie et UX de l'application : 7 points

• Gestion de projet, GIT, contrôles intermédiaires : 3 points

• Qualité globale du produit (qualité de l'intégration, responsive, fonctionnalités ...) : 7 points

Les critères seront peu ou pas nuancés, ainsi un site qui serait partiellement accessible et partiellement éco-concu ne rapportera pas la moitié des points.

Compétences visées

Comprendre

Concevoir

Développer

Entreprendre

A TOUTE FIN UTILE

• Il y a suffisamment de façon de faire pour que vous n'ayez pas les mêmes propositions.

• Github ... comparaison de fichier... facile de voir qui a copié qui

• Une SAE est un travail exigeant, respecter simple les consignes n'apporte pas plus que la moyenne, soyez ambitieux, professionnels et rigoureux. Ne tombez pas non plus dans la sur-enchère de fonctionnalités que vous ne pourriez mettre en place.