Salut,3WAcademy - Semaine 2 - logo

Je profite encore cette semaine d’être un peu au calme dans le train pour faire le bilan de cette seconde semaine de formation à la 3WAcademy. Je peux déjà tirer un premier bilan: ceux qui n’ont pas ou peu de notions de base, notamment en CSS et Javascript ont d’ores et déjà des difficultés. C’est pas pour ça qu’ils ne vont pas y arriver mais ce genre de situation peut être un peu stressante, c’est ce que j’ai voulu éviter en me préparant un peu.

Autre point, j’ai eu le plaisir d’être invité à un meetup cette semaine, au sujet de la gestion des sujets de crise dans le digital. Cette manifestation était présentée par Gautier Guignard, responsable de la campagne digitale de François Fillon. J’ai été invité à ce meetup suite à mon inscription à une newsletter sur le site d’Emakina. Il n’a pas été question de politique, et je tiens à préciser que je n’ai pas été invité pour mes opinions politiques, juste pour mon nouvel intérêt pour les sujets digitaux.

L’intégration

Nous avons poursuivi sur notre lancée cette semaine, et nous avons eu divers projets à réaliser. Comme d’habitude, notre formatrice nous a fait un rapide descriptif de la maquette, des consignes et des contraintes à respecter, et a lancé quelques idées de bonus pour les plus rapides d’entre nous.

Table pour la form

Les tableaux et les formulaires nous ont occupés sur les premiers jours de la semaine. Nous avons réalisé une première maquette « from scratch » d’un site web qui comprenait 2 pages. Je tiens à préciser que je ne peux pas diffuser les maquettes des projets, je n’ai pas le droit ni les droits pour le faire.

La première page était une landing page qui nous a permis d’enfoncer un peu plus le clou des positionnements inline-block et float, et tous les problèmes qui en découlent… La seconde page demandait d’intégrer un tableau et un formulaire en HTML et de styliser les deux en CSS. J’avais eu l’occasion avec Openclassrooms de travailler sur ces sujets, mais j’avoue que je n’en fait pas tous les jours donc cela m’a fait une très bonne révision!

Important de bien travailler en amont

Certains n’ont pas eu le temps de terminer ce projet, ils devront compenser le retard ce week end en travaillant chez eux. Et oui, c’est un peu normal que sur une formation de 3 mois (57 jours) ont ai pas le temps de retravailler ces choses là en cours. C’est pour ça que jusqu’à présent, j’ai trouvé assez confortable d’avoir un peu d’avance dans les connaissances et la pratique. Je ne dis pas non plus que je suis en terrain conquis, que je sais tout faire du premier coup et que c’est les vacances: surtout pas! En revanche, j’ai l’habitude de tester en permanence mon code et de rechercher les informations qui me manquent dans les documentations.

C’est une démarche que certains ont encore un peu de mal à adopter. J’ai passé 6 mois à coder seul dans mon bureau, avec pour seul aide, les documentations et autres tutoriels en lignes. Donc dans cette situation si tu veux avancer, ben tu te démerdes! Je sais que l’aspect autodidacte de la démarche ne plait pas à certains recruteurs, mais force est de constater que je trouve que c’est une bonne école pour développer l’aspect débrouillard et l’autonomie. C’est en tout cas une des choses que j’ai retiré de ces 6 mois avant la formation.

Coder tous les jours ça paye!

Sinon, je commence à prendre quelques réflexes grâce aux conseils de la formatrice. Je m’habitue vraiment à travailler avec la console, notamment l’inspecteur du navigateur pour gérer les marges et les padding, bref tout ce qui concerne la partie la plus compliquée pour moi en CSS: le positionnement.

Nous avons aussi eu une petite « récréation » en travaillant sur les sélecteurs CSS avec la plateforme CSS DINER. C’est un très bon exercice qui permet de travailler tous les sélecteurs, notamment ceux dont on se sert peu… Si tu as le temps, je te conseille vivement d’y jeter un oeil, tu y apprendras forcément quelque chose!

Des listes, dans des listes, …

Le dernier projet de la semaine demandait un peu plus de travail en HTML puisque nous avons dû créer un maxi menu de navigation horizontal avec un sous-menu qui devait apparaître sous les onglets principaux de navigation au survol de ceux-ci.

Etant désormais un peu habitué aux structures imbriquées de listes HTML, je n’ai pas trop hésité pour taper le code. Avec un peu de méthode, et Emmet, ça se fait très bien! J’ai pu terminer ce projet dans la journée, ce qui me permettra ce week end de faire du Javascript au lieu de faire de l’intégration… Encore une fois, ceux qui n’ont pas fini, vont devoir travailler ce week end sur ce projet.

Pour récapituler, pour la partie intégration, la semaine a été assez chargée puisque nous avons introduit de nombreuses notions « nouvelles ».  Je ne sais pas quelle sera le sujet de la prochaine maquette, mais j’imagine qu’on va avancer dans le programme, j’espère vivement qu’on va bientôt parler de flexbox!

Le développement

Après avoir survolé très rapidement les tableaux la semaine dernière, chose qui ne m’a pas vraiment dérangé puisque j’en ai manipulé un peu pendant ma préparation, nous avons démarré la journée de jeudi avec une introduction sur les objets en Javascript. Si je me place dans la peau de quelqu’un qui n’a pas déjà des notions en JS ou plus largement en programmation je mettrais un bémol sur le contenu de ce début de formation en développement. Je trouve que pour un vrai débutant en programmation, qui n’a jamais utilisé les outils de base d’un langage de programmation, variables, tableaux, objets, il est difficile de suivre.

Les cours sont de rapide rappels, illustrés par des exemples dont nous avons le codes sources, et notre formateur nous explique code par étape. Tous le monde comprends bien les exemples, mais dès que nous sommes en situation avec un énoncé et une page blanche (enfin…noire plutôt…), les plus novices d’ente nous se retrouvent un peu désemparés. Cela a été source d’inquiétude et le sujet  majeur de nos discussions du midi. Pour ma part, qui ai eu la chance de pouvoir prendre le temps d’apprendre les bases de Javascript de mon côté, ces rappels me conviennent très bien. J’ai un regard un peu différent des novices et j’apprécie les conseils et astuces du formateur à leur juste valeur, puisque je vois dans quel cas appliquer telle ou telle chose. Je reste aussi critique sur la façon dont j’ai appris à coder et suis attentifs aux bonnes pratiques qu’on nous enseigne. Mais il est évident qu’on bénéficie vraiment de cela quand on a déjà quelques connaissances.

D’autre part, nous sommes initiés à la méthode UML pour décomposer les problèmes de programmation en schéma afin de bien identifier les différentes parties du code et comment l’articuler. On a pas de court sur UML à la 3WA, mais je sais qu’il y en a un sur Openclassrooms, et je pense que j’y jetterai un oeil en janvier…

Concernant les thèmes abordés cette semaine, nous avons travaillé sur les structures conditionnelles if/else et switch, et nous avons eu vendredi un exercice très intéressant qui m’a demandé pas mal de réflexion: coder un Shifumi en Javascript.

Shifumi!

Ce projet nous a occupé une bonne partie de vendredi, pour ma part j’étais assez content d’avoir terminé le gros du travail à midi. Il me reste à revoir le système de comptage des points ce week end, il y a un truc qui ne marche pas très bien….

//J’ai pris 10 minutes entre midi et deux pour finaliser ce point, la version du code que je propose, comprend le comptage des points.

Ce projet a permis de mettre à l’épreuve nos connaissances sur les derniers sujets vus:

  • variables,
  • tableau,
  • objet,
  • boucles.

J’ai tout de suite cherché une solution pour limiter les lignes de codes, donc j’ai passé pas mal de temps à réfléchir, faire des dessins pour bien comprendre le problème. Il y a bien sûr plusieurs solutions pour résoudre ce problème, mais j’ai essayé de trouver une solution itérative pour éviter d’avoir à écrire toutes les solutions possibles… Et j’ai trouvé!

Astuces pour bien partir sur ce projet

J’ai pris tout de suite la décision de stocker les 3 valeurs Pierre, Feuille, Ciseau dans un tableau. Ensuite je me suis rendu compte qu’une fois écrit dans cet ordre, chaque variable « perd » contre la suivante… Je ne détaille pas mot à mot ce qu’il faut faire, ça serait assez contre productif, mais je te donne là une bonne astuce de départ si tu veux te lancer dans ce projet… Il n’y a qu’un cas qu’il faut écrire spécifiquement, mais tous les autres peuvent être traités un peu plus globalement.

Pour plus de détails, je te laisse mon code dans Codepen. Ce code est vraiment celui que j’ai produit en cours. Cela n’est peut être pas parfait, mais j’ai aussi pour objectif de montrer une progression dans le code que je produis.

Je n’ai pas eu le temps de faire une interface propre, mais le code fonctionne, les résultats apparaissent dans la console.

Pour cet exercice, je te souhaite une bonne réflexion, c’est vraiment le plus compliqué!

Un dernier pour la route

Avec cet exercice de Shifumi, certains ce sont retrouvés dans les cordes un peu KO debout. On a beaucoup parlé de cet exercice lors du déjeuner, et c’était compliqué pour les débutants de réussir cet exercice. Certains vont donc devoir retravailler le corriger au calme chez eux.

Nous nous sommes quittés sur un nouvel exercice qui nous a été donné en toute fin de journée, nous le terminerons la semaine prochaine, mais je compte travailler dessus ce week end au calme…

Cet exercice consiste à réaliser un tableau de table de multiplication en Javascript. Ce tableau devra vraiment ressembler à un tableau codé en HTML, avec des lignes et des colonnes. Il est simplement demandé pour le moment d’utiliser la commande document.write(« …….. »); pour créer ce tableau.

Je suis dans le train et je n’ai pas l’énoncé sous les yeux, j’y reviendrai donc la semaine prochaine, mais en ce qui me concerne je vais en profiter pour travailler la création d’élément HTML en JS., chose dont j’avais commencé à parler dans mes derniers articles sur Javascript. (Créer un élément HTML en Javascript)Je ne vais donc pas utiliser la méthode demandée, mais le formateur accepte que ceux qui sont « un peu plus avancé » puissent utiliser d’autres façons de faire.

Et le meetup alors?

Lancé dans la rédaction de la partie Javascript, j’ai failli oublier d’en parler. Je vais faire court pour ne pas faire un article trop long.

Ce n’était donc pas un meetup sur un sujet tech ou développement, mais plutôt sur du marketing. Ce que j’ai trouvé très intéressant c’est que l’on a plutôt l’habitude d’entendre parler de marketing à propos d’objet de la consommation, mais ici le produit, c’est un homme! Cette perspective était assez intéressante je trouve, puisque hors mis l’aspect politique du contexte, les équipes ont travaillé de la même manière que pour un produit lambda. Ils ont utilisé tous les outils  habituels en marketing, CRM, Google Ads, Facebook Ads, emailing, Twitter, la vidéo en live, etc. Tu t’en ai sans doute rendu compte, la dernière campagne présidentielle a été multi-canal, impossible de passer à coté: télé, site web, radio, réseaux sociaux, etc… On est plus ou moins habitué à ce genre de chose mais ce qui m’a le plus marqué, c’est à quel point le digital, a littéralement transformer la campagne , et bousculer les codes de communications habituels.

3WAcademy - Semaine 2 - photo meetup

 

Par exemple, Gautier Guignardresponsable de la campagne digitale de François Fillon, a rappelé qu’habituellement un communiqué de presse était quelque chose de très normé dans l’organisation du contenu et dans le ton, mais que pour éviter d’avoir des interprétations différentes d’un même texte, et de perdre le lecteur dans toute cette organisation normative, ils ont pris le parti de casser un peu les codes. L’idées a été de faire des communiqués de presse via Facebook, ce qui implique d’employer un ton un peu différent et de pouvoir parler des faits tout de suite. Suite à cela, la presse avait donc moins de possibilité d’interprétation. Cela a été un moyen pour eux de mieux contrôler leur communication et de pouvoir s’adresser directement aux lecteurs, mais ça n’a pas été le seul. Le fait de communiquer par video, force les médias à y faire référence et ainsi, les électeurs cliquent sur les liens de vidéos qui circulent surtout les réseaux sociaux (récupération d’analytics…), repris à la télé, etc… Pour permettre cette diffusion video, ils se sont munis de moyen un peu plus conséquent pour produire de la video de qualité notamment lors de meeting retransmis en live, via Facebook notamment. L’équipe digital de la campagne de François Fillon était composée de 8-9 personnes, et ils ont pris des prestataires externes pour réaliser les emailing, le site web notamment. Pour résumer, vendre le produit François Fillon, la conduit le service digital a vraiment être en configuration StartUp, avec aussi des contraintes de budget, de temps, de contexte, concurrence d’autres candidat etc, … C’est ma lecture simpliste des choses…

J’ai trouvé cette face de la campagne très intéressante, et m’a offerte une vision plus précise des moyens utilisés pour vendre un « produit », ce manière ciblé. Je n’ai pas pour vocation de faire du marketing mais je trouve ces sujets très intéressant notamment parce que je trouve nécessaire de comprendre pour quels objectifs je vais devoir faire des sites web.

J’avais dit court…désolé…

Cet article est déjà très long, donc je vais m’arrêter là. J’ai émis plusieurs bémols sur les cours de développement, nous avons parlé de ces sujets avec le formateur. Mais en fait ce ne sont pas des critiques parce que ça ne me convient pas au contraire, cette formule me convient très bien pour le moment, parce qu’on a pas mal de liberté. En revanche, si tu souhaites faire cette formation, j’essaye de te donner le maximum d’information pour que tu puisses en profiter un maximum et en tirer le max quand tu y seras. J’essaye de parler des choses qui m’enthousiasment et d’autres où je suis plus réservé sans filtre et sans diluer la réalité, mais  toujours en essayant d’être objectif et constructif. Mais je suis très content d’y être, j’en retire des bénéfices tout les jours! Il ne faut pas oublier une chose importante c’est que la formation ne dure que 3 mois, donc plus tu sauras de choses en arrivant plus tu en profiteras, j’aurais sans doute l’occasion d’en reparler la semaine prochaine.

J’avais dit que je m’arrêtais là… enfin plus haut… encore raté…

D’ici là, je te souhaite un excellent week end,

A la semaine prochaine,

Guillaume

PS: Toutes mes excuses pour le retard, j’ai été pas mal pris ce week-end, et je n’ai pas eu le temps de diffuser cet article plus tôt.