Code Kit
Phase 0 : Projet de javascript
Pour ce projet on a fait plusieurs exercices html mais cette fois ci en introduisant des notions en JavaScript afin de crées diverses interactions. Dans ce case study je vais vous expliquez en quoi consiste chaque exercices ainsi que le déroulement du projet.
BEM!
Pour le déroulement on a fait, à chaque exercice fait un document html en respectant une méthode précise. Celle ci s’appelle «méthode BEM» et elle consiste à organiser les classes html avec des nom bien spécifique pour associer correctement les classes enfants aux classes parents.
Intégration
Une fois finis le document html on peut soit partir en css pour donner un peux de style soit aller directement en javascript afin de pouvoir y ajouter les intégrations voulue pour interagir avec la page grâce à des boutons ou des sliders.
Phase 1 : Les exercices
Menu burger
Pour cet exercice on a dû crée un menu burger, cette interaction sert à cacher le menu de navigation qu’on a sur un écran pc sur les téléphone.
Généralement les menus de navigation sur téléphone si ils étaient comme sur pc on ne les verraient presque pas due au format du téléphone qui ne correspond pas à cette sorte de mise en page.
On a donc réfléchit à crée un menu déroulant pour permettre de le minimiser une fois fermé et qu’il prenne un maximum de place une fois ouvert.
On ferme et ouvre le menu grâce à un bouton qui se trouve dans un coin supérieur de la page afin de pouvoir l’ouvrir et le fermer à volonté pour cacher ou non la liste du menu déroulant.
Le tabs
Pour ce nouvel exemple je vais parler du «tabs» c’est un processus qui permet de changer de contenu en cliquant sur un bouton tout en restant dans la même page.
Il est généralement constitué de différents boutons pour passer d’un contenu à l’autre. C’est aussi similaire à un menu de navigation mais ici la navigation fait partie intégrante du contenu qu’on est en train de visualiser.
Un menu de navigation classique prend l’ensemble de la page web pour y naviguer le tabs sert surtout pour mettre de jolie effet pour swipe des bloc de texte ou pour intervertir différents contenu d’une même section de la page.
Pour le «tabs» une fois qu’on clique sur le bouton correspondant le texte qui lui est associé apparait en remplaçant le texte précédent. C’est sympa lorsque que on veut afficher plusieurs gros contenus mais que sous forme de liste ce serait moins digeste et ca donne des animations chouette à intégrer pour que la page soit plus dynamique également.
Progress scroll bar
Pour ce dernier exemple je vais parler du «progress scroll bar». Cet exercice consiste à avoir une barre comme visuel qui permet de visualiser où on se trouve dans la progression de la page web.
C’est un ajout sympa pour rendre le scroll de la page plus dynamique entre autre et aussi pour le rendre un peu plus fun car la progression de la barre et le scroll sont intimement lié dans cet exemple. Au plus je scroll et au plus la barre va progresser.
Ca permet aussi d’avoir un indicateur de où on se trouve dans la page pour se retrouver plus facilement si on décide de faire autre chose entre deux lectures du contenus.
Je l’utiliserais dans des projet dont le contenu est assez conséquent et que la barre de progression serait la comme un marque page pour toujours savoir ou on en est dans la page.
Phase 2 : Ensuite?
Après chaque exercice ou le plus souvent possible on a sauvegardé notre code sur GitHub afin d’avoir des sauvegardes de notre code si jamais on fait des erreurs par la suite, afin de pouvoir revenir à un stade moins avancé mais qui contiens pas de code cassé.
J’ai personnellement fais des sauvegardes dans GitHub après chaque fin d’exercice.
Remise en double
Le premier était de remettre sur teams nos documents et nos dossier pour garder une trace et une preuve auprès de l’école qu’on a bel et bien remis notre projet.
Le deuxième est de remettre nos dossiers mais ceux se trouvant sur GitHub avec notre lien GitHub qu’on a du mettre dans notion afin que le professeur puisse aller verifier directement sur notre GitHub qu’on a bien fait le projet avec celui ci.
Conclusion
Ce projet a été celui que j’ai préféré parce que on a appris plein d’exercices qui nous seront pratique pour nos futures projets. Grâce à ce projet, on a plusieurs bout de code qu’on pourra intégrer facilement avec un peu de style ajouté en plus, et rendre nos projets plus chouette et plus dynamique ainsi que plus interactif surtout.