L’objectif du laboratoire est de mettre en commun vos connaissances actuelles des technologies web pour construire une application JavaScript de gestion d’items(CRUDL).

Vous devrez également réfléchir aux aspects UI et UX de votre projet:

UI

• Interface Utilisateur: Tout ce qui entoure l'affichage, formatage et mise en forme d'un site web ou application
• On pourrait comparer avec les graphisme, le HUD et effets spéciaux d'un jeu vidéo
• Dans une application c'est la mise en page, le choix des couleur, le visuel

UX

• Expérience Utilisateur: Englobe l'ensemble des interactions(navigation, clic, gestuelles tactiles, efficacité, ergonomie, résultat prévisible/intuitif) offertes à l'utilisateur et les émotions qu'elles génèrent
• Dans un jeu vidéo, ce serait les mécaniques de gameplay
• Dans une application ce sont les mécanismes disponibles pour exploiter les fonctionnalités: raccourcis clavier, manipulations, décisions à prendre à l'utilisateur

[BONUS] Librairie CSS

Pour faciliter l'implémentation d'un UI/UX standard et uniforme d'un navigateur à l'autre, on peut créer un ensemble de règles CSS réutilisables.

Il existe plusieurs librairies offrant ce type d'utilitaires

• Bootstrap
• Materialize
• Bulma
• Semantic UI
• et plus!

Des points bonus sont attribués dans le cadre du travail si vous explorez une librairie CSS pour l'intégrer judicieusement(composants et responsive) dans votre application.

Échéancier

Votre travail est découpé en plusieurs phases itératives:

• Avant le dernier cours: Suivi
• Livraison finale: Énoncé de travail LÉA

Fonctionnalités

L'application permets de créer une liste de lecture de vidéos Youtube, selon les règles suivantes:

• Apportez une attention particulière au rendu visuel et intégrez votre nom judicieusement à la page
• Chaque vidéo possède les caractéristiques suivantes
  • Nom
  • URL
  • Durée
  • Favori
• Liste des items, sinon indique que la liste est vide
  • Afficher toutes les caractéristiques des vidéos
  • Représenter graphiquement si l'item est favori ou non
  • Calculer et afficher la somme de la durée de toutes les vidéos
• Lecture
  • On doit pouvoir sélectionner une vidéo pour la faire jouer, sinon un message s'affiche
  • La vidéo en cours de lecture doit être identifiée
• Ajout et Modification d'un item dans la liste via un formulaire
  • On peut confirmer l'action via un bouton ET la touche Enter
  • On peut annuler l'action sans appliquer les changements
  • En modification, afficher les valeurs de l'item correspondant
• Valider les données et offrir une rétroaction à l'utilisateur
  • Nom requis
  • URL requise, respectant le format https://www.youtube.com/watch?v=...
  • Durée requise, respectant le format hh:mm:ss
• Suppression d’un item de la liste, après confirmation avec l'utilisateur
• Que ce passe-t-il lors de la modification/suppression de la vidéo en cours de lecture?

Exemples

Exemple 1

Exemple 2

Exemple 1

Exemple 2

Requis techniques

• Exploitez judicieusement les éléments de formulaire sémantiques
  👀 Input types

• Pour faire jouer la vidéo, on peut utiliser le mécanisme de iframe
  👀 Remarquez le format de l'URL du iframe VS le format d'URL requis par l'application

  • https://www.youtube-nocookie.com/embed/8fcSviC7cRM?autoplay=1
  • https://www.youtube.com/watch?v=8fcSviC7cRM

• Exploitez le mécanisme srcdoc pour afficher l'écran d'attente de sélection de la vidéo à jouer
  👀 srcdoc

Remise

Remettre tous les fichiers votre projet dans un fichier ZIP via LÉA