iolce 2016–2017 Karen McGrane

Marine Vasbinder
Nov 13, 2016 · 5 min read

Karen McGrane « Content in a zombie apocalypse »

Première épreuve d’une longue aventure

Sans perdre de temps…

Mercredi 14 septembre 2016, 1er jour de cette année scolaire. Tous les élèves de web sont attroupés dans le B99. On fait la répartition des classes… Ensuite, notre coordinateur, Mr Bourgaux, nous annonce que notre premier travail de l’année commence sans plus tarder. Le projet s’appelle iolce, le but est regarder une conférence en anglais et de la transformer en un site web. La particularité de ce travail est qu’il se commence en groupe et qu’il se finit seul.
Dès le cours suivant nous constituons les groupes ! Nous devons être par 4 avec si possible un 2.5 (élève qui recommence sa deuxième).
Je fais donc partie du groupe 6 et je devrai partager ce travail avec Léa, Justine et Jérémie. Aucun de nous n’est un 2.5 mas ce n’est rien, on s’en sortira quand même ! Nous nous voyons attribuer la conférence de Karen McGrane « Content in a zombie apocalypse ». Et là, le train se met en marche, il est temps de se mettre au travail…

Dans l’ordre des choses…

Pour commencer, on regarde la vidéo chacun de notre côté. C’est sans doute la partie que j’ai le moins apprécié ! La conférence dure 57 minutes, elle était en anglais et je n’y comprenais rien. Heureusement on a très vite mis nos compréhensions et incompréhensions en commun ce qui m’a permis de cerner un peu plus le sujet.
On a très vite ouvert un GoogleDoc pour mettre toutes nos notes dans un seul document.
On a travaillé le contenu pour la première fois au cours d’anglais, on a construit l’Abstract petit à petit.
On a eu des journées d’atelier où on travaillait le contenu mais en français cette fois, c’était nettement plus simple. On a donc passées une journée entière à écrire le contenu. Karen dit énormément de choses dans la conférence et on a eu du mal à séparer l’utile de l’inutile. On a donc tout séparé pour tout reconstituer pour garder les éléments importants.

Ensuite, on s’est attaqué au contenu pur et dur. Ecrire, attendre que Mr Thronte vienne vérifier, remodifier, et ainsi de suite jusqu’à arriver ENFIN au contenu final et le regrouper dans une Google Sheet.

Seul face au travail…

C’est à ce moment-là que le travail individuel commence ! Il faut faire le design… J’ai eu beaucoup de mal à me lancer car la conférence ne me plaisait pas spécialement alors je n’arrivais pas à faire quelque chose qui me plaise. Alors après être partie un peu dans tous les sens j’ai tout recommencé.
J’ai commencé par le choix des couleurs principales de mon futur site !

J’ai ensuite cherché des typos qui me plaisaient et qui pourraient aller ensemble.
J’ai Bitter en regular et Bold pour les titres et Raleway en Regular et Italic pour le texte.

Après plusieurs tests, j’ai décidé que pour les titres ma taille de police soit 35px, et pour les paragraphes, ma taille de police soit de 20px avec un interlignage de 30px.
Quant aux images, j’ai repris des images de la conférence. La conférencière est très expressive quand elle parle donc j’ai choisis des photos d’elle pour mettre comme banner car ça s’accordait bien aux titres. J’ai d’abord fais des croquis papiers…

Une fois tous ces choix faits, je commence à organiser le tout dans Photoshop. Etant donné le retard que j’avais pris, je n’ai su montrer qu’une fois mon design en classe, ce que je regrette beaucoup.
J’ai donc montré mon début à Mr Di Nunzio qui m’a donné snon avis sur l’orientation de ma première banner et de l’erreur que je commettais en mettant la biographie de ma conférencière au tout début de mon site. J’ai donc changé tout cela avant de me remettre en route.
Après une journée et demi à organiser le tout je me retrouve avec mon fichier Photoshop …

Je n’ai jamais eu l’occasion de coder avant cette année, j’ai donc besoin de trouver ma propre méthode de travail. Je décide donc d’imprimer mon .psd et de mettre des annotations un peu partout pour connaitre la largeur de mes marges et l’organisation de mes blocs une fois que je me lancerai à coder.

<title> iolce </title>

Vient le moment où je commence à coder, je m’efforce à respecter mon design ce qui est loin d’être évident. J’ai recours à Google à de nombreuses reprises.

Une fois ceci finit, je vérifie mon code sur W3C, je corrige les quelques erreurs… Parmis elles, une erreur pour le lien du Google Fonts car le caractère | n’est pas autorisé. Tant pis, je ne peux pas l’enlever. Une autre erreur que je ne comprends pas, alors je demande des explications à quelqu’un qui m’explique que dans les balises <section> il doit y avoir <h1>… Comme ce n’est pas le cas, je change <section> par <div> et tout rentre dans l’ordre.
Je me doute bien que tout mon code n’est pas correct, qu’il contient surement d’autres erreurs, que j’aurais pu faire certaines choses plus facilement, mais pour une première fois, je me sens contente de voir mon design intégré.

Pour l’Abstract je ne comprenais pas si on devait faire un article sur Medium ou une page web, mais comme il me restait du temps j’ai décidé de faire une page, pour ne pas prendre trop de risques. Ca a été très vite à faire.
Et me voilà maintenant à rédiger mon article sur Medium, je vais le publier, relier le lien à mon index et mettre le tout en ligne. J’ai déjà du le faire pour ma V Card donc je sais comment m’y prendre, en 5 minutes ça devrait être bouclé.

Petit mot de la fin…

Je n’ai pas trouvé cet exercice simple car je ne comprenais pas toujours les consignes, c’était un peu flou et ça me paraissait insurmontable. Mais au final j’ai un résultat qui me convient ! J’ai appris énormément de choses en faisant ce travail et j’ai hâte d’en apprendre d’avantage. J’ai pris beaucoup de plaisir à faire tout ça et je trouvais très bien de commencer ensemble pour finir seul.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade