Aller au contenu

Cours 7.2

Projet portfolio

Instructions spécifiques aux données json du fichier projects.json et celles pour la composante Vue.

Voici les instructions

Projet application web créative

Quoi faire et remettre d'ici le 22 octobre

  • Brainstorm d'équipe (je vous conseille d'utiliser FigJam). Vous devrez partager le lien ou une trace de votre processus créatif en ajoutant un lien vers celui-ci (fichiers image ou lien vers figJam) dans le README.md et dans le cahier de charges.

    • Choix entre :
      • Option A: Mémoires interactives
      • Option B: Trace ton chemin
    • Trouver thématique plus précise pour votre projet
    • Déterminer un nom de projet et un nom d'équipe
  • Tableau KANBAN créé (Trello) et toutes les tâches morcelées du projet, du début à la fin devront être créées pour cette première remise.
  • Création de votre répertoire git. Nommer le répertoire selon:

    • Si équipe de trois: app-prenom1-prenom2-prenom3 (chaque prénom ne doit comprendre que les 6 premières lettre du prénom).
    • Si équipe de quatre: app-prenom1-prenom2-prenom3-prenom4 (chaque prénom ne doit comprendre que les 5 premières lettre du prénom).
  • Moodboard (Figma): assurez-vous de répondre à toutes les exigences du moodboard listé dans le cahier de charges. Vous pourrez ensuite l'exporter en format .png ou .jpg et l'importer dans votre cahier de charge dans la section appropriée.
  • Rédaction du cahier de charge (Fichiers de départ pour cahier de charge)

    • Ajoutez les éléments du moodboard dans la section appropriée.
    • Si vous avez à ajouter des couleurs en texte hexadécimal, veullez l'accompagner de la ligne qui suit afin d'afficher la couleur à coté du code hexadécimal.

      Par exemple, pour générer ceci :

      • Primaire : #ff1778 #ff1778
      • Secondaire : #03ab5e #03ab5e

      Vous devriez écrire ceci en markdown :

      - Primaire : ![#ff1778](https://placehold.co/10/ff1778/ff1778/) `#ff1778`
      - Secondaire : ![#03ab5e](https://placehold.co/10/03ab5e/03ab5e/) `#03ab5e`
      

      ⬆️ Remarquez que dans l'URL de palcehold, le code de couleur haxadécimal est écrit 2 fois: /ff1778/ff1778/.

    • Pour l'arbre narratif du cahier de charge, il est préférable que vous le fassiez dans Figma ou Figjam car c'est plus facile que de l'illustrer en markdown pure. Vous l'ajouterez par la suite dans votre cahier de charges.
    • Si vous avez des images qui accompagnent votre cahier de charges, veuillez créer un dossier assets à côté du cahier et lier vos images vers les fichiers contenu dans ce dossier.
  • Design (Figma): Création des maquettes des écrans principaux (voir section 6.2 du cahier de charge fourni).

Plan de cours mis à jour avec nouvelles dates de remises pour projet final

Plan de cours mis à jour

Gestion de projet web

Un projet web est un projet dont le livrable final est destiné à Internet. Il peut s'agir d'une application web (mobile ou non) ou d'un site web. Le produit final est exécutable dans une navigateur web.

Comment gérer un projet web en équipe?

Rôles dans une équipe de projet web

Rôles en projet web

Cahier de charges

Qu’est-ce qu’un cahier des charges ? Définition et exemples

Méthode Agile

Méthode agile

Kanban

Méthode Kanban

Tableau de gestion de projet (Trello)

Trello

Mêlée (Scrum)

Mêlée SCRUM

  • 🌹 Mes accomplissements
  • 🚀 Prochaine semaine
  • 🌵 Problèmes
  • 🎉 Ce qui me motive

Scrumban

Mélange de Scrum et Kanban

Histoire utilisateur (User Stories)

En tant que [rôle], je veux [action] afin de [bénéfice].

Le plus souvent qu'autrement, le rôle est l'utilisateur du projet/produit.

En tant qu'utilisateur, je veux [action] afin de [bénéfice].

➡ L’objectif est de comprendre la valeur pour l’utilisateur, pas seulement la fonctionnalité technique.

MVP (Minimum Viable Product)

Minimum Viable Product

Suivi de temps de travail

Rapport de temps

Projet application web créative (projet intégrateur de la session)

  • Création des équipes + définir un nom d'équipe
  • Attribution des rôles
  • Présentation du cahier de charges

Devoirs

Projet portfolio

  • Continuer d'intégrerr votre portfolio
  • Ajouter les animations GSAP
  • S'assurer que c'est responsive

Instructions pour

  • Créer votre composante Vue
  • La gestion des données de vos projets via un JSON

Voici les instructions

Projet appli web créative: Quoi faire et remettre d'ici le 22 octobre

  • Brainstorm d'équipe (je vous conseille d'utiliser FigJam). Vous devrez partager le lien ou une trace de votre processus créatif en ajoutant un lien vers celui-ci (fichiers image ou lien vers figJam) dans le README.md et dans le cahier de charges.

    • Choix entre :
      • Option A: Mémoires interactives
      • Option B: Trace ton chemin
    • Trouver thématique plus précise pour votre projet
    • Déterminer un nom de projet et un nom d'équipe
  • Tableau KANBAN créé (Trello) et toutes les tâches morcelées du projet, du début à la fin devront être créées pour cette première remise.
  • Création de votre répertoire git. Nommer le répertoire selon:

    • Si équipe de trois: app-prenom1-prenom2-prenom3 (chaque prénom ne doit comprendre que les 6 premières lettre du prénom).
    • Si équipe de quatre: app-prenom1-prenom2-prenom3-prenom4 (chaque prénom ne doit comprendre que les 5 premières lettre du prénom).
  • Moodboard (Figma): assurez-vous de répondre à toutes les exigences du moodboard listé dans le cahier de charges. Vous pourrez ensuite l'exporter en format .png ou .jpg et l'importer dans votre cahier de charge dans la section appropriée.
  • Rédaction du cahier de charge (Fichiers de départ pour cahier de charge)

    • Ajoutez les éléments du moodboard dans la section appropriée.
    • Si vous avez à ajouter des couleurs en texte hexadécimal, veullez l'accompagner de la ligne qui suit afin d'afficher la couleur à coté du code hexadécimal.

      Par exemple, pour générer ceci :

      • Primaire : #ff1778 #ff1778
      • Secondaire : #03ab5e #03ab5e

      Vous devriez écrire ceci en markdown :

      - Primaire : ![#ff1778](https://placehold.co/10/ff1778/ff1778/) `#ff1778`
      - Secondaire : ![#03ab5e](https://placehold.co/10/03ab5e/03ab5e/) `#03ab5e`
      

      ⬆️ Remarquez que dans l'URL de palcehold, le code de couleur haxadécimal est écrit 2 fois: /ff1778/ff1778/.

    • Pour l'arbre narratif du cahier de charge, il est préférable que vous le fassiez dans Figma ou Figjam car c'est plus facile que de l'illustrer en markdown pure. Vous l'ajouterez par la suite dans votre cahier de charges.
    • Si vous avez des images qui accompagnent votre cahier de charges, veuillez créer un dossier assets à côté du cahier et lier vos images vers les fichiers contenu dans ce dossier.
  • Design (Figma): Création des maquettes des écrans principaux (voir section 6.2 du cahier de charge fourni).