Séance 1

Mise en place d'un tunnel de commande interactif.

Tunnel de commande "interactif"

Dans ces 8 séances, nous allons reflechir et concevoir un tunnel de commande, de la page des produits jusqu'à la page de paiement. Nous allons utiliser les technologies suivantes:

HTML
CSS (avec bootstrap)
Javascript (sans jQuery)

Organisation des séances

Séance 1 : Présentation du projet et reflexion sur les éléments nécessaires dans les différentes pages (catalogue, panier, paiement). Croquis, et début de l'intégration
Séance 2 : Mise en place de la page panier avec des données provenant d'un tableau javascript
Séance 3 : Mise en place des boutons permettant de gérer le panier (+, -, supprimer, ...)
Séance 4 : Mise en place du catalogue de produits avec ajouter au panier, indication du nombre de produits dans le panier, ...
Séance 5 : Finalisation de la page panier et articles/catalogue. Ergonomie, accessibilité, bootstrap, ...
Séance 6 : Mise en place de la page de paiement et des données utilisateurs avec validation des données en javascript
Séance 7 : Mise en place de la page de confirmation de commande et soumission des données au serveur
Séance 8 : Finalisation

Rendu

Le résultat de ce projet sera à rendre à l'issue des séances, et fera l'objet d'une note.

La notaiton prendra en compte les points suivants :

Fonctionnalités intégrées
Mise en page et ergonomie (UX) de la proposition
Respect des critères d'accessibilités

Travail de la séance

En vous basant sur votre expérience en tant que client, sur les articles ci-dessous, proposez des gabarits pour les 3 pages suivantes :

Page catalogue permettant l'ajout d'un produit au panier
Page panier
Page(s) de validation de la commande (données clients, paiement, ...)
- Vous pouvez imaginer un processus en une seule page avec des étapes ou en plusieurs pages. Dans tous les cas, il est important d'indiquer où se situe le client dans le processus.

Pour chacune des pages identifiez les éléments obligatoires (cf. articles ci-dessous) et les éléments nécessaires pour favoriser l'expérience client.