iolce 2018 — case study

Avant la première journée :

Lors de la rentrée académique, après une présentation plus ou moins rapide de l’option, des groupes ont été formés pour notre premier atelier, “IOLCE”, ces groupes sont constitués de 3 nouveaux et d’un ‘2.5’ alias un doublant. Une fois les groupes formés, 4 conférences différentes ont été répartie parmi les groupes.

À partir de là, un premier visionnage de la conférence a été réaliser, avec son lot d’incompréhension et de confusion habituel.

1er jour : vendredi 5 octobre :

Après une introduction / explication de la tâche à accomplir, nous nous sommes réunis en groupe et avons commencé à mettre en commun nos notes de la conférence que l’on devait regarder. En plus de ça, un processus assez important c’est mis en place, faire connaissance avec ses collègues. La journée a été assez longue et épuisante mais nous somme sorti de la classe avec une bonne quantité de matière, pas forcément correct et qui allait sans doute changer avant la semaine prochaine, mais c’était déjà motivant.

2ème jour : vendredi 12 octobre :

Suite de la semaine précédente, nous avons continué à mettre en commun nos notes, en regardant et relisant la conférence, certains passages se sont éclaircis, mais nous n’en avions pas encore vraiment compris le message principal. Avec l’aide de notre professeur, nous avons déjà plus avancé.

Lors de la semaine nous avons continué à développer et corriger le contenu de notre site.

3ème jour : vendredi 19 octobre :

Comme demandé la semaine avant, nous avons rédigé notre contenu en “markdown” un genre de langage qui permet de mettre du style. Nous avons donc distingué les titres des sous-titres, mettre en évidence les mots-clefs et les termes importants du texte. Cette journée clôture la partie commune de notre travail, la suite se fera seule.

Suite de la recherche :

Une fois cette étape terminée je me suis attaqué à la recherche typographique. Nous avions droit à 2 polices différentes et à 3 graisses. Après quelques intégrations et test je suis arrivé à un choix correct de deux polices et 2 graisses.

La recherche typographique.

Maintenant que la phase de rédaction du contenu est terminée, que le texte est corrigé et que j’ai choisi mes polices, je me lance dans la création des wireframe de mon site.

Mes wireframes, fait sur Adobe Xd.
Un close up avec la grille.

J’y détermine la position de mes blocs, alignement des textes, tailles des blocs, couleurs du site et position des images. J’en profite pour préparer mes images pour le rétina.

Début du développement :

Je commence a développer mon site sur visual studio code, en appliquant la méthode bem, pour avoir un code moins lourd. Je teste le tout régulièrement sur un serveur local pour m’assurer que tout s’affiche bien sur téléphone.

Avec un peu de musique, pour la bonne humeur.

Une fois le css fait, il me reste à faire la micro typographie, à savoir mettre des espaces insécables, les bons signes ainsi que le bon style de police aux bons endroits.

Une capture d’écran de mon site sans la micro typographie.
Un exemple de micro typographie dans l’éditeur de texte.
Avant / Après

La dernière étape consiste a corrigé les bugs pour que la version final fonctionne parfaitement et j’en ai un gros, mon footer remonte par dessus ma sidebar.

Une fois ceci corrigé le site sera prêt.

C’était un simple bug dû à un z-index mal placé, une fois corrigé, le menu latéral s’affiche à nouveau correctement.

Version corrigée.

Ce fut une expérience de travail en groupe compliquée, comme toujours, mais sympathique où l’on apprend à faire entendre son avis, tout en prenant compte de celui des autres ?

Vous pouvez trouver mon site ici. Je vous invite cependant à le regarder sur smartphone, il n’a pas été prévu pour les ordinateurs.