Logo_TBYW
Case-Study

Case- Study

Nous sommes 4 étudiants en DWM. Nous avons un point en commun : la conférence de Tantek Çelik. Le défi ? Comprendre la conférence, la retravailler et l'afficher sur un site Web.1 conférence, 4 étudiants, 4 sites web.

Au départ

Des idées pleins la tête 💡

Au commencement, il y a moi. Moi devant cette conférence de Tantek Celik. Je me dis que je dois faire un site sur cette conférence. Alors, tout en écoutant, je réfléchis déjà à ce à quoi il va ressembler. Pendant mon écoute, j’évalue l’importance de certains passages et je les note en me disant que ce passage sera important pour mon site. Le temps passe et j’ai déjà des idées plein la tête sans même savoir comment les réaliser au vu des contraintes du travail. Mais ce n'est pas grave, je continue d’écouter, je continue d’imaginer et de noter mes idées importantes sur des dizaines de post-it qui bientôt couvriront mon écran.

tantek_conf
🔗 La conférence

Un travail personnel ✍️

Une fois la conférence finie, des idées plein la tête et des post-it en veux-tu en voilà, je me lance dans l’écriture de mon résumé personnel. Pas facile. Pas facile parce que je n’ai que 2500 caractères maximum. Mais je me lance. J’ai fini, mais je ne suis pas content de ma première version, alors je modifie quelques paragraphes. Toujours pas content. J’efface tout et je recommence en restructurant mes phrases. Content. J’ai fini et je suis plutôt content du travail accompli. J’enregistre et j'envoie à mon groupe.

resume_perso
🔗 Résumé complet

Un travail de groupe 👨‍💻👩‍💻👨‍💻👩‍💻

Maintenant que c’est fait, il ne nous reste plus que le résumé du groupe. On est 4, les envies ne sont pas les mêmes pour tout le monde mais on va trouver un terrain d’entente. On le trouvera plutôt rapidement et le texte du groupe est rédigé en peu de temps. On est tous content du résultat, on le poste. Suite au poste, nous rencontrons déjà des problèmes. Nous les corrigeons. Plus de problèmes, on peut s’attaquer au gros morceau.

resume_grp
🔗 Résumé de groupe

Comment faire ?

Un défi ⚔️

Le gros morceau, c’est ce site. Les contraintes sont nombreuses, tant sur le plan technique qu’artistique. Les grilles, les rapports hiérarchiques, le Javascript, les longueurs de lignes, le tout dans un seul et même site. Un défi de plus à relever mais un défi qui donne envie. De nouvelles choses, de la nouvelle matière, un tas d’idées, il n’y a plus qu’à s’y mettre. J’ai tous les outils pour réussir : une option qui me plaît, des profs au taquet pour nous aider, internet et la volonté de réussir ce deuxième atelier. La seule contrainte : le confinement. Mais de nouveau, les profs sont au taquet et sont là pour nous, tout devrait bien se passer.

contrainte
🔗 Nos contraintes

La recherche

Ma direction artistique 🖌️

Tout d’abord, il faut que je fasse des croquis de ce que j’ai en tête sinon je vais oublier. Mes croquis sont faits, mes post-it sont collés, j’ai une idée de la disposition du site. J’ai la disposition, mais pas les éléments. Alors je fais un Ui-kit, puis un deuxième, puis un troisième jusqu’à ce que je trouve la direction artistique que je souhaitais. Le point le plus important selon moi : la couleur. Pourquoi pas du bleu ? La technologie, les réseaux sociaux, Facebook, c’est souvent du bleu. Mais le bleu est déjà utilisé dans mon groupe alors je leur laisse. Que prendre ? Pourquoi pas de l'orange ? C’est la complémentaire du bleu et l'orange se marie assez bien avec le noir. Va pour l'orange.

direction_art
🔗 Mon Ui-kit

Les grids 🗂️

J’ai ma disposition, ma direction artistique, place à la technique, les grids. Direction internet pour survoler et voir comment ça se met en place. Je commence à comprendre mais internet c’est vague alors je ne sais pas trop quoi faire. Et là, on reçoit une vidéo, puis une deuxième et ainsi de suite. C’est des vidéos sur les grids et comment les utiliser. Je les regarde et tout me paraît clair. Alors je fais les exercices qui sont proposés à la fin. J’ai un peu de mal mais je recommence encore et encore tant que je n’ai pas compris tout ce qui était expliqué. Comme dit dans la vidéo, grâce aux exercices, je trouve mon style pour utiliser les grids. La méthode me semble cohérente, je comprends plus vite celle-là que les autres alors je creuse un peu le sujet. Je commence à bien intégrer comment faire alors je me lance. Je lance Visual Studio Code, je crée mes pages, mon dossier assets, mes sous dossiers et c’est maintenant que tout commence.

grids
Les grids sur navigateur

La réussite

Structurer le travail 📋

Je crée un Google sheets pour me structurer et utiliser un code couleur car c’est plus visuel pour moi. Je l’envois à ma classe pour les intéresser, je vois que beaucoup le sont, je me sens moins seul à jouer avec des couleurs pour mieux avancer. Je commence mon code, comme pour le premier site, j’avance, je tape mon HTML entièrement, je sauvegarde dans un bloc note pour éviter que mon PC n’efface tout encore une fois.

gsheet
🔗 Le Google Sheet

HTML & CSS 💻

Je démarre le CSS et les grids, j’ai la vidéo explicative sur mon écran de gauche et je suis ce qui est expliqué par mon professeur. Je remets en boucle les passages qui m'intéressent et petit à petit, j’y arrive, ça fonctionne, je commence à saisir comment fonctionne les grids entre les parents/enfants. Je comprends comment intégrer des flexbox à l'intérieur de ces grids ou encore comment intégrer des grids à l’intérieur de ma grid principale.

html/css
Ma première page de travail

S'émanciper 👋

Je finis ma première page presque entièrement grâce aux vidéos et je commence la deuxième sans vidéo, pour apporter un peu plus de challenge. Étonnement, j’y arrive, je suis content de moi, ça me semble clair. Merci les vidéos, vous m’avez été plus qu’utiles, maintenant je vais me débrouiller tout seul, j’ai compris comment faire, c’est parti. Et maintenant, on en est là, le site est fini, le tout avec des grids, des flexboxs, des éléments en plus de mon premier site pour montrer une évolution, des animations en plus, des différentes du premier site. Un peu de tout pour montrer que j’ai compris, que j’ai réussi à tout intégrer et évoluer.