J’ai regardé la conférence une première fois en prenant quelques notes à la volée. J’ai parcouru ensuite la vidéo en m’arrêtant et en ciblant les éléments qui me paraissaient les plus importants. J’ai également complété mes informations avec les articles qu’Ethan Marcotte mettait en liens sur son site. J’ai enfin réalisé un texte structuré en plusieurs parties qui allait servir à la réalisation de ma page Web.

Le design

Choix des polices

• Open Sans, Merriweather (Fast sur Google Font)
• 2 graisses: Regular et Bold

Titres

• Merriweather:( h3 = 1.953em , mobile), (2.7em, Desktop).
  Marges: (2.9rem, mobile) (5rem, Desktop).
• Open Sans: (h4 = 1.563em, mobile), ( 1.8em, Desktop).
  Marges: 3.7rem.

Paragraphes

• 15.6px
• Hauteur de ligne: entre 150 et 200%
• Rapport hiérarchique de 1.250 Major-Third, permettant d’avoir un contraste assez élevé entre les titres et les paragraphes.

Choix des couleurs

J’ai réalisé plusieurs tests sur Adobe XD et Sketch en utilisant une grille de mise en page de 12 colonnes en Desktop et 8 colonnes en mobile, avec une gouttière de 16px. J’ai passé pas mal de temps à réaliser des tests non concluant avant d’arriver à une maquette qui me plaisait.

Le développement

Pour le html et css, j’ai utilisé la méthode BEM (box, element, modifier) que nous avons appris au cours de M. Thronte. J’ai pris beaucoup de temps sur cette étape car je devais revoir certaines notions que j’avais oublié ou que je n’avais pas appliqué lors de mon dernier projet.

En ce qui concerne le JavaScript, j’ai implémenté un simple burger menu permettant d’accéder aux différentes parties de ma page.

Optimisation

J’ai dû optimiser mes images en essayant de ne pas dépasser 120k pour chacune d’entre elles (sauf pour les exports en 2x). Je les ai compressées avec Optimizilla qui réduit le nombre de couleurs (elles sont alors indexées). J’obtiens donc un total de 3,55 Mo pour l’ensemble du fichier.

J’ai eu un peu d’appréhension car n’ayant pas suffisamment d’expérience, j’avais peur de ne pas être à la hauteur pour coder entièrement une page web. Mais je dois avouer que cela m’a permis de m’améliorer assez pour pouvoir par après me sentir plus à l’aise avec ce genre de travail.

Le travail de groupe:

Nous avons commencé par mettre en commun nos appréciations sur la conférence de Simon Collison.
En pensant à la façon dont nous allions structurer de notre travail, nous avons décidé de relire et de traduire la conférence dans son ensemble afin de mieux comprendre les subtilités qui auraient pu nous échapper.
Après cela, nous avons réalisé un résumé détaillé qui reprenait les parties les plus importantes de l’exposé.

Une fois le texte établi, nous avons demandé l’avis de notre professeur pour avoir un avis pertinent sur notre travail. Cela nous a aidé à repartir sur une idée différente, plus convaincante et moins abstraite que celle que nous avions choisie au départ.
En effet, nous avions l’intention d’écrire un texte en parlant à la troisième personne, comme si nous étions « l’oiseau Shana » dont S. Collison raconte l’ histoire.
L’idée semblait bonne mais, après réflexion, nous nous sommes rendus compte que cela mènerait le lecteur à l’incompréhension, qu’il risquait de ne pas comprendre de quoi il s’agissait et le mettrait dans la confusion.
Shana, l’oiseau connecté, devait dès lors servir de fil rouge pour le découpage du texte, en le faisant intervenir de façon épisodique tout au long de notre présentation.

Ensuite, nous avons restructuré l’entièreté de notre contenu en hiérarchisant les informations, en ajoutant des titres et des citations et en utilisant des phrases plus faciles à comprendre pour le lecteur.

Enfin, le texte n’étant pas encore finalisé, nous avons dû effectuer plusieurs modifications et rectifier certaines imprécisions.

Le projet s’est déroulé sans embûche et nous nous sommes répartis le travail équitablement jusqu’au moment de la mise en forme individuelle.

Nous devions présenter notre travail devant nos professeurs et je dois dire que cela m’a été assez utile car j’ai pu avoir des retours pertinents qui m’ont aidé à améliorer mon site web.

J’ai ensuite posé quelques questions aux étudiants présents dans la salle pour pointer les choses qui n’avaient pas fonctionné lors de la réalisation de ce site en version mobile. J’ai noté que certains étudiants n’ont pas eu assez de temps pour finir leur travail dans de bonnes conditions ou encore qu’ils ont passé beaucoup de temps à regarder des tutoriels sur internet. Mais il est vrai que, pour la plupart, le travail semblait assez intuitif et pas trop compliqué pour un premier workshop.

En résumé, les présentations se sont bien passées et les remarques ont été prises avec philosophie.

Ensuite, il nous a été demandé de finaliser ce travail en réalisant une version Tablette et Desktop.
Je dois dire que j’étais plus serein en ce qui concerne le code même si je ne connaissais pas encore toutes les combinaisons. J’ai alors pris mon temps pour voir ce que j’allais faire pour ne pas partir à l’aveugle et me retrouver dans la difficulté. J’ai donc finalisé le travail sans trop de problème et j’ai pu le rendre à la date demandée, le 18/01/19.