Salut,3WAcademy - Semaine 5

La cinquième semaine vient de se terminer, et nous avons achevé par même occasion, la première partie Intégration, la plus importante dans ce domaine. Il nous restera donc une petite partie pour appréhender WordPress et Bootstrap, j’aurais bien sûr l’occasion d’en reparler.

Je publie cet article assez tard, mais ne connaissant pas trop PHP, j’ai eu besoin de travailler le soir et le week end pour bien comprendre certaines choses.

Concernant la partie développement nous avons démarrer la partie PHP ce jeudi. Nous reviendrons à Javascript plus tard, ce qui me rassure un peu concernant ce langage puisque j’ai la sensation d’être resté un peu sur ma faim… J’ai encore pas mal de chose à apprendre…

Je parlerai aussi dans cet article de l’évènement de la semaine à la 3WAcademy : le Hackathon!

C’est l’article 42 de ce blog, pile la semaine après le Comic Con de Paris, promis je n’ai pas fait exprès…

L’intégration

Cette semaine nous avons eu le projet de fin de session à réaliser. C’est un bon projet de synthèse qui permet de récapituler tous ce que nous avons appris ( ou revu…) depuis le 2 octobre, notamment le positionnement CSS et les média queries.

Nous avons le loisir d’utiliser soit les positionnements inline-block, float, flexbox, etc… suivant nos besoins. La formatrice a insisté fortement pour que je n’utilise pas flexbox quand ça n’est pas nécessaire, ce que j’ai fait. Je suis beaucoup plus à l’aise avec tous ces outils et j’arrive à les utiliser en connaissance de cause suivant ce que j’ai besoin de faire. Sur ce point j’ai noté un réel progrès, et j’en suis très content!

SASSSASS - Logo

Pour les plus avancés en CSS et ceux qui le souhaitaient, la formatrice a fait une introduction à SASS, et j’ai donc profité de ce dernier projet pour utiliser ce pré-processeur CSS.

Je ne vais pas faire de long discours sur SASS, mais c’est une façon optimisée d’écrire du CSS, ça s’appelle du SCSS. Il est possible d’utiliser des variables, des fonctions mais le top c’est l’imbrication des sélecteurs et la compilation.

Les variables permettent stocker pleins de choses, je les ai notamment utilisées pour stocker les couleurs et les polices. L’avantage c’est que lorsqu’on veut modifier une couleur, plus besoin de faire une recherche dans le fichier CSS et de changer chaque endroit où cette couleur apparait un par un. Il suffit de changer la valeur de la couleur stockée dans la variable et tous les éléments ayant cette couleur seront modifiés instantanément, même principe pour les polices.

Ce que j’ai vraiment trouvé pratique c’est l’imbrication et le fait d’avoir vraiment du CSS écrit en cascade.

On n’avait pas dit Cascading Style Sheet?

Et oui c’est ce que signifie CSS, mais ce n’ai pas comme ça qu’on a l’habitude  d’écrire ce langage. En revanche avec SASS, le cascading prend tout son sens!

En effet, il m’est désormais possible d’écrire du CSS en cascade, en imbriquant les sélecteurs exactement comme le sont les balises HTML. Ensuite, après quelques manipulations dans le terminal, SASS compile et compresse  le CSS pour qu’il puisse être lisible par les navigateurs.

Pour vous montrer à quoi ça ressemble, voici un extrait de mon code SCSS du projet.

header div:nth-child(2){// cible la deuxième div du header
  justify-content: space-between;
  margin: 0 auto;
      a{
        display: inline-block;
        padding: 2% 20% 2% 2%;
        img{
          width: 400px;
        }
      }
      div{
        display: inline-block;
        white-space: nowrap;
        padding: 2% 2% 0% 20%;
          p{
            margin-bottom: 0;
            margin-top: 1em;
            color: $blanc;
            opacity: 0.6;
            font-family: $default;
              strong{
                opacity: 1;
                color: $blanc;
                font-weight: 700;
              }
              i{
                  border-radius: 100%;
                  color: $blanc;
                  opacity: 0.6;
                  padding: 10px;
                  border:solid 2px $blanc;
              }//i
          }//p
      }// div
}//header div:nth-child(2)

Ensuite SASS compile le code CSS de cette façon:

header div:nth-child(2){justify-content:space-between;margin:0 auto}header div:nth-child(2) a{display:inline-block;padding:2% 20% 2% 2%}header div:nth-child(2) a img{width:400px}header div:nth-child(2) div{display:inline-block;white-space:nowrap;padding:2% 2% 0% 20%}header div:nth-child(2) div p{margin-bottom:0;margin-top:1em;color:#fff;opacity:0.6;font-family:"Open Sans",sans-serif}header div:nth-child(2) div p strong{opacity:1;color:#fff;font-weight:700}header div:nth-child(2) div p i{border-radius:100%;color:#fff;opacity:0.6;padding:10px;border:solid 2px #fff}

Alors effectivement c’est illisible pour nous, ou en tout cas difficilement, mais les navigateurs se satisfont très bien de cette forme de CSS. En revanche tu peux remarquer que le compilateur reforme les sélecteurs CSS comme on a l’habitude de les écrire.

Je me suis habitué très vite à cette « nouvelle » façon de faire du CSS, je trouve ça vraiment pratique!

Pour en apprendre plus, j’ai complété l’initiation reçue en cours par la lecture de ce livre:

SASS pour les web designer - Dan Cederholm

Je vais laisser un petit résumé dans la partie « Ma Bibliothèque « , si tu veux en savoir un peu plus…

Pour revenir au projet d‘intégration, nous n’avons travaillé qu’une grosse journée dessus donc il va falloir qu’on le termine chez nous. Pour ma part il ne me reste que les versions tablette et mobile à faire pour chacune des pages et un peu de réglage sur mon CSS pour affiner mon travail. J’ai tout de même réalisé le gros du boulot en une bonne  journée, malgré les problèmes de transport qui m’ont mis en retard mardi matin avec les problèmes sur la ligne A du RER… bref…

Le développement

Cette fois c’est parti, on entre dans les choses sérieuses: PHP. J’ai passé une grosse partie de la journée de mercredi, à travailler sur Openclassrooms pour découvrir PHP de mon côté, avant d’être avalé par le rythme effréné de la formation 3WA. Je me suis rendu compte assez vite, mais je m’en doutais, que le fonctionnement des structures de base était les mêmes qu’en Javascript:

  • boucles,
  • condition,
  • fonction.

Cela dit, je trouve la syntaxe un peu plus lourde, mais je pense que c’est normale docteur, je découvre… Cela dit lorsqu’on déclare une variable en JS on écrit « var maVAriable » une seule fois, puis lorsqu’on a recours de nouveau à cette variable, on écrit simplement « mavariable ».

En PHP, on déclare  une variable de la façon suivante: « $maVariable » et on emploi toujours la même syntaxe avec le $ pour la rappeler. L’utilisation fréquente des underscrores me perturbe un peu, puisque je n’ai pas l’habitude d’utiliser ce caractère. Je pense que d’ici la fin de la semaine prochaine, j’aurais tapé 2356 fois _ (underscore), ça se passera mieux!

Autre point que je trouve un peu perturbant ce sont les concaténations de chaîne de caractère. Je trouve qu’en Javascript la syntaxe est plus claire, puisque on utilise le signe « + «  :

let prenom = "Guillaume";
let phrase = "Salut " + prenom + ", comment ça va?";
 

En PHP, le principe est le même sauf qu’à la place des signes «+«  on utilise le point « . ». Donc là je ne te cache pas que lorsque tu as oublié un point et que tu as une erreur, tu passes un peu de temps pour retrouver le point qui manque… C’est une habitude à prendre aussi, mais je trouve ça simplement visuellement plus compliqué.

La même concaténation version PHP:

<?php
$prenom = "Guillaume";
$phrase = "Salut " . prenom . ", comment ça va?";
?>

Premier projet en PHP

Notre premier projet a consisté à créer un traducteur anglais => français et anglais=> français. Nous avons donc commencé par créer un formulaire en HTML afin de récupérer la saisie de l’utilisateur. Ceci nous a permis de rentrer directement dans le vif du sujet, puisque pour comparer avec JS, lorsqu’on démarre, pour récupérer une saisie de l’utilisateur,  on utilise la fonction « prompt() ». La manipulation des formulaires viens plus tard en JS, lorsqu’on a des connaissances sur les évènements. Il faut donc un niveau minimum en JS pour manipuler les formulaires.

Alors quand je dis qu’on a fait un traducteur, ne t’imagine pas que j’ai fait un truc de fou genre google translate! J’en suis très loin… On a simplement créé une variable contenant un tableau associatif comprenant lui même une série de clés (mot en français) et de valeurs (mot en anglais). Voici à quoi ressemble le tableau:

<?php
$dictionnary = [
  "dog" => "chien",
  "cat" => "chat",
  "bird" => "oiseau",
  "fish" => "poisson",
  "duck" => "canard"
];
?>

Première impression

En PHP, c’est plus simple! Pas besoin de construire un évènement et de récupérer la valeur de l’input dans une variable, etc.. PHP est intrinsèquement lié à HTML et peut donc récupérer facilement beaucoup d’informations avec la méthode « post » notamment. Cette méthode est créée en html lorsque dans la balise form on renseigne l’attribut « method » et qu’on lui donne la valeur « post ». Coté PHP, lorsqu’on appelle la méthode $_POST, on se rend  compte que cette variable (elle a un $) est en fait un tableau associatif (particuliarité bien pratique de PHP…).  Elle contient toutes les valeurs du formulaire repérées par leur « clé » qui ne sont ni plus ni moins que les valeurs des attributs « name » contenues dans les balises des éléments du formulaire (input, sélect, option, etc…). Donc pour résumer, avec une seule variable, tu récupères tous ce que contient ton formulaire alors qu’ils faut plusieurs lignes en JS! Magique!

Dernier mot au sujet des tableaux associatifs, et pour faire un rapide comparatif avec Javascript, ils ressemblent un peu aux objets de JS Ce type de tableau permet de repérer les valeurs qu’il stocke grâce à des clés. En javascript, on ne peut repérer une valeur uniquement grâce à son index, ce qui peut être parfois un peu limitant.

Les API

Cette après midi, ayant manqué de temps puisque divers évènements du Hackathon nous ont fait perdre du temps, nous avons tout de même eu droit à un bonus:  la découverte des API.

Je ne dirais évidemment pas que j’ai tout compris et que je maîtrise les API, mais je me suis rendu compte que PHP, via les API, permettait des possibilités énormes!

Notre formateur nous a montré l’API de traduction Wikipédia, qui se représente sous la forme d’un tableau d’objet JSON. Afin de manipuler tout cela,  et de comprendre un peu à quoi cela pourrait servir et comment exploité ces données, le formateur nous a expliqué comment récupérer les données, les encoder en JSON et de tout récupérer dans un fichier .json à la racine de mon projet. J’aurais été incapable de le faire seul, et si ont m’avait demandé de le faire j’aurais imaginé une usine à gaz. Alors qu’en fait le code permettant de faire cela tient en peu de ligne! C’est ce qui me surprend le plus depuis que j’ai commencé PHP: il y a beaucoup de fonction qui permettent de faire des tas de choses que je ne soupçonne même pas à l’heure qu’il est, et je trouve que PHP permet de le faire en très peu de ligne.

Ayant surtout fait du Javascript jusqu’à présent, j’ai l’esprit orienté code JS, et en PHP on aborde les problèmes différemment. Il va falloir que je m’habitue. J’ai entendu dire de nombreuse fois que l’apprentissage de PHP était plus simple que Javascript, j’attends un peu pour pouvoir me prononcer sur ce sujet et pouvoir te donner mon ressenti sur cette légende urbaine…

J’attends beaucoup de la semaine prochaine, on ne va faire que du PHP!

Le Hackathon

Jeudi soir dernier j’ai assisté à mon premier Hackathon. Nous avions 4h pour réaliser un projet que nous ne connaissions pas à l’avance… Le sujet était : fait moi peur…Bon là on est pas trop renseigné… Le but était de réaliser un jeu en utilisant les technologies que nous avions vues en cours. En ce qui nous concernait, on a utilisé que HTML, CSS et Javascript. D’autre ont utilisé PHP et SQL en plus, alors que ceux de la formation SWIFT de la 3WA ont développé des jeux mobile sous IOS. Nous devions donc faire un jeu en 4h sur le thème d’Haloween.

Hackathon 3WAcademy

Le memory

Nous avons donc opté pour un jeu de memory, ou le but du jeu est de trouvé des paires de cartes qui sont initialement retournées. Nous avons commencé à faire un briefing pour se répartir les tâches et définir les contours de notre projet. Nous étions 5 avec des niveaux assez différents, mais ça n’a pas été un problème majeur. Trois se sont attelés à la réalisation de la structure HTML et du CSS. Un autre était chargé de réaliser la partie javascript front, avec la gestion des évènements notamment et pour ma part je devais réaliser les fonctions du jeu. Je trouve que nous étions assez bien parti, la communication s’est fait assez simplement. Au cours du développement  nous demandions aux intégrateurs de faire telle classe CSS avec tels et tels propriétés. Mais le problème majeur qu’on a rencontré c’est que nous avons commencé à écrire nos premières lignes de javascript sans pouvoir tester grand chose, étant donné que le HTML et le CSS nous ayant été remis tard.

Quand on a tout réuni dans la dernière demi-heure, rien ne marchait ensemble, et j’ai du faire en sorte que le visuel soit présentable un minimum et que quelques évènements JS refonctionnent. Je n’ai pas eu le temps d’assembler ma partie, celle qui aurait pu permettre de faire fonctionner le jeu… donc comme beaucoup d’autres équipes on a rendu un projet pas terminé. Le notre ayant la  particularité d’être globalement assez moche: bref on a perdu…

Je suis un peu frustré après coup, parce que nous avions une bonne idée de jeux, pas trop compliqué, avec des possibilités de faire des animations simple et efficace, d’ajouter d’autres fonctions une fois que le moteur du jeu était en place mais on s’est fait rattraper par le temps et on n’avait pas imaginé qu’au moment de tout rassembler, tout éclaterait…  C’est dommage…

Ce fut en tout cas une très bonne expérience, je me suis rendu compte que développer en équipe demandait encore plus de rigueur et nécessitait de mieux découper le travail afin de mieux définir les contours des tâches de chacun. Même s’ils ont eu un peu de mal à démarrer un peu au début, mes collègues qui codent depuis 1 mois seulement ne se sont pas trop mal débrouillés! Avec deux semaines de plus, on aurait surement pu présenter autre chose. Cela sera en tout cas une expérience  à refaire!

Pour ma part, je vais essayer d’aller au bout du projet, ça me fera un très bon exercice en JS en plus!

C’est tout pour cette semaine très riche! J’ai pas mal de travail de week end pour continuer à avoir un peu d’avance et surtout pour assimiler les nouvelles notions en PHP.

Je te souhaite un très bon week end et je te dis à la semaine prochaine!

Guillaume