Case-study : IOLCE

Le commencement

Le premier jour de cours, nous avons dû nous mettre par groupe en ayant seulement 1 seul 2.5 dans le groupe. Grâce à ceci les professeurs ont pu créer les deux classes d'élèves en DWM. Je me suis retrouvé avec mon meilleur ami Christopher et deux nouveaux collègues : Vincent et Younes. Des collègues et amis très sympatiques aujourd'hui. Nous devions choisir une des nombreuses possibilités de conférence et en faire un résumé.

Les premières étapes de réalisation

Après une petite délibération, nous avons choisi la conférence de Tristan Harris. Elle a été proposé par Christopher.

Nous avons tout de même eu quelques complications durant la réalisation de la traduction du fait que certains membres n'étaient souvent pas là. De plus, 2 élèves supplémentaires ( Sylvian et Florian ) se sont ajoutés au groupe ce qui nous a perturbé. Nous nous sommes retrouvé à faire un groupe plus nombreux que prévu.

Le sujet intéressait la majorité du groupe. La conférence était disponible en écrit ce qui nous a permis de facilement la retraduire pour faire le résumé. J'ai divisé la conférence en plusieurs chapitres pour que tout le monde puisse traduire une part égale de travail.

L'Atelier

La totalité de la traduction et du résumé ont été fait en 2 jours. Nous avons dû faire plusieurs modifications pour qu'ils soient validés par nos professeurs. Après cela, Sylvian et Vincent ont réalisé le markdown. C'était nouveau pour moi je n'en avais jamais fait personnellement ça été une petite découverte bien utile.

La deuxième partie

Un point que je peux légèrement critiquer durant la réalisation de ce projet est l'écart entre le début et la fin de l'atelier. Nous avons repris notre projet IOLCE seulement plusieurs semaine après la réalisation du markdown. Au point où nous nous rappelions même plus en quoi ça consistait.

Un de nos professeurs a repris le projet en nous expliquant très clairement les règles à respecter pour avoir une bonne typographie. Que ça soit pour la couleur de paragraphe, le rythme vertical, ou encore l'utilisation des marques de paragraphe.

Codage du site

Pour la première remise nous avons dû rendre uniquement la version mobile. Après avoir choisi ma couleur de paragraphe et mon rythme vertical j'ai commencé a implémanter mon markdown. Je n'ai eu que peu de difficulté pendant le début de la création du site. Mais respecter le rythme vertical n'était pas une chose aisée, et de plus je n'avais pas compris au début exactement ce que nous devions faire et comment le mettre en oeuvre. Mon burger menu a aussi eu malheureusement un léger souci dans son animation.

Une fois avancée dans le projet, les vraies complications ont commencé à se montrer. Premièrement, les espaces insécables : ils m'ont causé de nombreux soucis. Ils sont nombreux, il existe plusieurs types avec plusieurs manières de l'écrire, on ne les emploie pas à n'importe quel moment... Et malheureusement nous ne pouvons pas les éviter. La meilleure solution était de faire mes textes et ma mise en page, et après ça, de m'occuper de chaque cas un par un. Je me suis grandement aidé des différents outils et slides mise à disposition par nos professeurs.

Les grilles

La version mobile

Les grilles sont les parties qui m'ont demandé le plus de modifications et donc de temps. J'ai pour commencer du faire ma version mobile ( Mobile First Design ). Et après ça, adapter ma version à une version valide pour des ordinateurs. J'ai dû au total faire 4 grilles bien distinctes. La première était pour la version mobile. J'ai commencé par la faire à vu d'oeil, je savais déjà quel élement devait être à quel endroit. Il m'a juste suffit de corriger certaines valeurs et de vérifier que tout était juste. C'était la version la plus aisée à faire finalement.

La réalisation sur InVision

Les autres versions étaient clairement les plus difficiles. J'ai dû passer énormément dessus. Pour pouvoir faire mes grilles correctement, j'ai commencé par revoir les différents slides de mes professeurs pour pouvoir avoir une bonne base sur la réalisation de ces grilles. Une fois fait, j'ai utilisé le logiciel InVision pour sa création. Pour la suite, j'ai décidé de faire ça en deux étapes.

La première était de refaire ma version mobile sur le logiciel. De cette manière, je pouvais déjà avoir les valeurs de ma version mobile, ainsi que chaque bloc de texte, d'élément, de décoration et d'images. Cette étape était assez courte, principalement du copier-coller... Mais ce n'est pas pour autant que je n'ai pas fait face à certains problèmes. Pour commencer, le logiciel refusait de mettre mon bloc de texte entièrement... Il n'affichait que les o. Ce qui n'était pas très utile... De plus le logiciel, de nouveau lui, refusait de valider ma police et sa graisse. À la place de perdre plusieurs heures à comprendre d'où pouvait venir ces bugs j'ai préféré travailler sur mon macbook et pas sur mon ordinateur windows. Et étonnamment, aucun de ces problèmes n'était présent dessus. J'ai par la suite compris que ce logiciel pouvait avoir certaines complications sur ses différentes versions windows.

Les colonnes

La seconde étape, la plus longue, était de faire les autres versions sur le logiciel et de l'adapter pour chaque support. Je devais le faire pour tablette, version desktop et desktop large. J'ai décidé de commencer par la taille du milieu. Le problème ici c'est que je devais utiliser des colonnes et ma plus grande difficulté était de pouvoir les réaliser d'une manière pas très régulière. Cela permettait d'augmenter infiniment mes possibilités.

Ma première version était assez régulière finalement, j'ai décidé alors de le faire autrement. J'ai créé mes colonnes uniquement grâce à la valeur de mon bord. Cela me permettait d'être irrégulier et mais de garder un certain design visuel. Mais malgré ça, la lecture avait un visuel très " gauche-droite ". On ne distinguait pas spécialement mes irrégularités.

J'ai donc poussé mon idée jusqu'au bout et j'ai finalement pu obtenir des résultats satisfaisants. Et j'ai même utilisé des méthodes que je ne connaissais pas jusqu'ici comme afficher des chiffres sur le côté de plus en plus grand pour les distinguer.

La dernière ligne droite

J'étais enfin arrivé à la dernière étape de la réalisation. Je devais reimplémenter mon design du logiciel sur mon site. J'ai pensé au début que j'allais rencontrer beaucoup de difficultés mais finalement ce n'était pas vraiment le cas. Je devais juste changer certaines valeurs pour qu'ils soient adaptés à la version désirée. La plus grande partie était déjà réalisé pour la version mobile.

Il me restait plus qu'à tout revérifier : chaque étape, chaque objectif, chaque critère une par une. Il est très important de se relire ! J'ai grâce à ça pu retrouver des erreurs majeurs. Que ça soit dans mon code avec des mauvaises applications de balise ou encore dans mon design où certains blocs n'avaient pas les bonnes valeurs. Une fois modifiée, j'ai tout de même demander à mes professeurs une confirmation pour que mon travail soit propre et soigné.

Conclusion

Pour conclure, cet atelier a été un des plus durs dans sa réalisation. J'ai de très nombreuses fois dû recommencer plusieurs parties jusqu'à qu'ils soient valides et qu'ils me semblent pertinents. Je n'ai pas pour autant baisser les bras. C'est justement grâce à tous ces essais que j'ai pu apprendre beaucoup de nouveaux outils et de nouvelles connaissances. J'aurai probablement encore quelques complications dans ses applications à l'avenir, mais ce n'est qu'une question d'habitude. Et autant directement commencer avec les bonnes habitudes.