Salut,3WAcademy - Semaine 3 - logo

Je viens de terminer ma troisième semaine à la 3WAcademy, et j’ai donc fait 25% de la formation par la même occasion! Je peux d’ores et déjà te confirmer que ça passe super vite! Les difficultés s’empiles petit à petit mais pour le moment je dois dire que tout ce passe très bien. Je me répète ,mais la préparation joue un grand rôle dans mon bon début de cursus.

Au niveau de l’emploi du temps, le début de la formation est très axée sur les langages front-end, HTML et CSS. Nous avons eu peu de cours de développement jusqu’à présent, au maximum 2 jours par semaine. Jusqu’à présent on a surtout fait de l’intégration, et un tout petit peu de Javascript. La tendance va s’inverser au fil des semaines. On va tendre à ne plus avoir d’intégration pour faire place à des semaines complètes à faire du développement, notamment lorsqu’on sera sur PHP.  Promis cette semaine, je fais plus court que la semaine dernière!

L’intégration

Nous sommes entrés cette semaine dans une des plus grosses problématiques du web: le Responsive Design. Pour rappeler le principe rapidement, cela consiste à modifier/adapter l’affichage d’un même site en fonction de la taille de l’écran sur lequel il est consulté, que ça soit sur un desktop, une tablette ou un mobile. Et je ne rentrerais pas dans le détail des différentes tailles d’écrans de desktop, de tablette et de mobile, parce que là on s’en sort plus! En même temps, on s’en fou un peu, mais j’y viens…

Le responsive design

J’ai donc eu le plaisir de revoir l’utilisation des médias queries, qui demandent de mettre en place des points de bascules (breakpoint), permettant de passer d’un affichage à l’autre (tablette à desktop par exemple), de manière fluide et en adaptant le contenu.

Je te propose d’ailleurs de faire le test:

      • affiche ton site web préféré sur ton ordinateur et observe bien le contenu,
      • ouvre la console(clique droit avec la souris, puis choisi inspecter),
      • dans Firefox par exemple à gauche, tu as des icônes de mobile,
      • clique sur ces icônes,
      • l’affichage a dû se réduire et une barre en haut de la page a dû apparaitre, comprenant une liste déroulante,
      • Cette liste te permet de choisir le modèle de mobile ou de tablette que tu veux pour simuler l’affichage sur ce support,
      • maintenant observe bien le contenu du site qui est à l’écran…

Je suis quasiment sûr que certains éléments ont changé de place, d’autre on peut être disparu, la navigation a dû changer d’aspect, etc… Le responsive c’est ça! Proposer un affichage alternatif d’un même site, en adaptant le contenu au contenant, en quelque sorte…

L’important, c’est la méthode!

En début de semaine, nous avons eu une première maquette orientée « Mobile-First ». Cela signifie que cette page est destinée en priorité à un affichage mobile, mais pourra s’adapter à des écrans plus grands. Cela nécessitera de modifier le CSS.

Nous avons donc commencé à coder le HTML qui est le même pour toutes les plateformes! Cette notion est très importante, les modifications se font ensuite en CSS.

Ensuite, on a ajouté la première couche de CSS pour que notre page ressemble à la version mobile. Pour cela, j’ai mis le navigateur en mode affichage mobile, comme expliqué plus haut.

Une fois fait, on a utilisé les médias queries pour modifier l’affichage sur un écran de tablette, et même opération pour passer de l’affichage tablette à l’écran desktop. Cette méthode est très importante, pour bien faire les choses dans l’ordre et que le passage d’un affichage à l’autre soit fluide.

La deuxième maquette devait être également en responsive mais pas mobile first, donc nous avons codé la version desktop en premier, puis la tablette, et enfin le mobile. La formatrice a insisté sur le fait qu’il était impératif de suivre cette méthode, et d’ajouter ou retirer suivant le cas, des propriétés CSS pour que notre page corresponde à la maquette.

Les médias queries

L’objectif de cet article n’est pas de faire un tuto sur les médias queries, mais d’en expliquer le principe très simplement et rapidement. La déclaration de médias queries permet de dire la chose suivante: si la taille de l’affichage est inférieure à 768 px alors, affiche les propriétés permettant un affichage sur mobile. En revanche si la taille de l’affichage est supérieure à 1024 px, affiche moi la page pour un desktop, ainsi, le navigateur sait quelles propriétés CSS charger. Les médias queries ne sont pas quelques choses de très compliquées dans le principe, cela dépends surtout de la maquette, qui peut rapidement rendre tout ça compliqué…

Ensuite il y a des détails à voir pour l’affichage des images par exemple, et notamment l’utilisation de l’attribut srcset, à insérer dans la balise image. Je te laisse un lien vers le MDN pour voir tout ça en détail. Pour faire court, cet attribut permet au navigateur de choisir quelle image charger en fonction de la taille de l’affichage demandé. Il faut bien veiller à afficher la plus grande disponible par défaut, au cas ou les autre ne se chargent pas, même en cas de site « Mobile First ».

Quelques astuces

Etant un peu plus avancés que les autres, je suis très attentifs aux bonnes pratiques que nous donne la formatrice. Une que j’applique désormais sans arrêt, c’est d’exprimer les valeurs des margin et padding latéraux (left et right) en % plutôt qu’en px ou em, afin de rendre l’affichage fluide, lorsqu’on agrandi / réduit la taille de l’affichage. Cela permet de mieux maitriser l’affichage et de ne pas casser la page dès que la taille n’est pas suffisante.

Cette technique ajoutée aux médias queries, donne cette impression que les éléments « glissent » les uns par rapport aux autres..

Le développement

Comme je le disais en introduction, nous n’avons eu que 2 jours de développement cette semaine. Nous avons donc terminé le mini projet de table de multiplication dont j’avais commencé à parler la semaine dernière (3WAcademy – Semaine 2).  J’ai pas travaillé sur ce projet chez moi, j’ai eu assez de temps pour le terminer en cours. Le seul projet sur le quel je vais retravailler chez moi, c’est le mini jeu de combat, voir plus bas. Je dois progresser sur les fonctions pour avoir un code plus simple, sans redite et surtout mieux optimisé!

La table de multiplication

Le projet consistait à demander une valeur à l’utilisateur, par exemple: « Jusqu’à combien voulez vous connaître les tables de multiplication ». Ensuite il fallait réaliser un tableau à double entrées, allant chacune jusqu’à la valeur saisie, puis il fallait que chaque case soit le résultat de la multiplication entre 2 nombres:

  • celui situé en haut de la colonne de cette valeur,
  • celui situé au bout de la ligne de cette valeur.

Je ne sais pas bien si c’est clair… pour être sur, voici le résultat à obtenir:

3WAcademy - Semaine 3 - tables multiplications

Je n’ai pas fait comme la correction, mais mon code fonctionne, et le formateur m’a dit que ce que j’avait fait était correct. J’imagine que ça n’est pas la solution idéale, mais bon j’en suis là, j’apprends! La correction utilise des « document.write » pour afficher le tableau dans le navigateur. N’ayant pas vu comment manipuler le DOM en cours, cette technique est utilisée pour le moment. Je n’aime pas du tout cette pratique, et mon code ne l’utilise pas, je préfère manipuler le DOM, c’est plus long à écrire mais c’est sémantiquement plus juste. Je vais revenir sur ce code dans la semaine, je pense que je peux réduire le nombre de ligne en utilisant beaucoup mieux les fonctions et en évitant les lignes de codes identiques.

Je te laisse le code Javascript dans Codepen,  si tu veux y jeter un oeil, mais il y a biensur d’autres possibilités d’obtenir le même résultat! Le code est celui que j’ai produit en cours, j’ai simplement ajouté des commentaires complémentaires pour que tu comprennes ce que je fais. Je suis en train de penser que je n’ai pas commenté le code de la semaine dernière, je corrigerais cela la semaine prochaine.

Le jeux de combat

Nous avons enchainé un autre projet, beaucoup plus évolutif: un jeu de combat entre un Chevalier (Joueur1) et un Dragon ( Ordinateur).  Ce jeu devait permettre d’utiliser les fonctions, points de cours que nous avons abordé pendant ces deux jours de Javascript.

Concernant les consignes, je ne les ai pas sous les yeux, mais nous devions faire les choses suivantes:

  • générer les 2 personnages avec des caractéristiques qui leur sont propres,
  • proposer des niveaux de difficultés différents,
  • proposer un choix d’arme pour le Chevalier,
  • utiliser des jets de dés (génération aléatoire de nombre),
  • le jeu s’arrête lorsqu’un des deux protagonistes est mort,
  • utiliser les fonctions.

Je n’ai pas eu trop de mal à faire fonctionner ma version du jeu, je me suis même lancé dans des fonctions supplémentaires, choix d’armes pour le chevalier, possibilité de choisir un type d’attaques notamment, et j’ai d’autres idées… Mais le formateur m’a indiqué que je pouvais mieux tirer parti des fonctions en me servant plus des paramètres à passer d’une fonction à l’autre, ce qui implique de les appeler de manière imbriquée:

action1(action2());

Je n’avais jamais vu une syntaxe comme celle ci, et là j’ai compris pas mal de chose! Je te propose de mettre mon code brut cette semaine tel qu’il est et de mettre un code avec des fonctions mieux optimisées et surtout mieux utilisées dans la semaine prochaine pour bien voir la différence. Une fois que j’aurais mieux maîtrisé ce principe, j’essaierais de faire un article sur cette technique que je ne connaissais pas et qui, à priori est peu utilisée dans les formations et tutoriels que l’on peu trouver.

Je suis parti un peu vite vendredi, j’ai oublié de prendre mon code en partant, n’hésite pas à revenir voir le code si ça t’intéresse. Je mettrai in lien vers Codepen, encore un peu de patience…

Quoiqu’il en soit, j’ai trouvé cet exercice vraiment bien pour manipuler les fonctions et toutes les autres structures que je connaissais déjà: boucles, conditions, objets, tableaux, etc…

Lundi on démarre la semaine avec du Javascript, et on va notamment aborder les évènements, ce qui promet d’être très intéressant! Encore une fois j’attends beaucoup de ce cours pour améliorer ma compréhension et mon utilisation de ces outils.

J’ai donc réalisé un quart de la formation, et cela devient à mon sens de plus en plus intéressant! Certains ont toujours des difficultés et accusent un peu de retard, notamment en Javascript. On va donc se faire des sessions JS après les cours, ceux qui ont quelques connaissances pourront aider les autres à récupérer le retard. Grâce au travail que j’ai fait avant la formation, j’ai la chance de faire partie de ceux qui sont assez à l’aise jusque là. Cela va donc être un très bon exercice que d’expliquer et de reformuler ce que j’ai compris aux autres. Je suis très content de pouvoir les aider.

C’est tout pour cette semaine, et pour le 40ème article de ce blog!

Bon week end,

Guillaume