Programmation Web côté client

MonoPage Recette

par Philippe Allard-Rousse et Alain Bernier

Objectif

L’objectif de ce travail pratique est de :

• Réaliser une application Web ayant une certaine ampleur.
• Intégrer dans un même application plusieurs des notions étudiées depuis le début de la session.
• Intégrer dans une même application Web différentes technologies (HTML5, CSS3, Javascript et AJAX).
• Rechercher de l’information technique sur Internet.

Travail à réaliser

Vous devez réaliser un site Web monopage (Single-Page) qui permet d’afficher des recettes de cuisine et la météo en temps réel.

Pour la réalisation du projet vous devez utiliser des feuilles de style CSS et des scripts en Javascript dans des fichiers séparés (donc un fichier HTML, un fichier CSS et un ou plusieurs fichiers JS).

Vous serez évalué sur la qualité de la présentation (le CSS), de l’ergonomique, la qualité de l’expérience de l’utilisateur (technique, émotionnelle, ergonomie...), le bon fonctionnement de l’application (le Javascript ) et la « propreté » de vos codes sources.

Réaliser le projet en équipe de 2 personnes.

Bonus

Faire une application Web adaptative (Responsive Web Design).
Attention, aucun bonus ne sera évalué, ni pris en compte, si l’application ne fonctionne pas correctement.

Remise du projet

Date de remise : vendredi le 17 décembre 2021. Remettre via LÉA (Omnivox) un fichier ZIP contenant les fichiers sources du projet. Le 17 décembre vous devez présenter votre projet à votre enseignant.

---

Exemple

Bureau

Mobile

Pondération

Catégorie	%	/20
Présentation orale (10 min)	10%	/2
Conception (respect de la conception OO; fichiers html, css, js et php séparés; simplicité de la solution)	20%	/4
Qualité de l’interface utilisateur (html, CSS), de l’ergonomique, la qualité de l’expérience de l’utilisateur (technique, émotionnelle, ergonomie...)	10%	/2
Fonctionnement	50%	/10
Lisibilité des codes sources	10%	/2

Fonctionnalités

Catégorie	/20
Liste des recettes	/2
Affichage des recettes	/2
Liste par catégorie	/2
Recherche	/2
Affichage de la météo (JSON)	/2
Site web adaptatif (bonus)