CASE STUDY — Hamza — IOLCE4 — GR12

Hamza N'Bouhammou
Oct 31, 2018 · 5 min read

IOLCE (Input Output Lire et Communiquer sur Écran) est un projet de construction d’un site de A à Z sur base d’une conférence par groupe de 4 étudiants:

N’BOUHAMMOU Hamza -> B2G1
MOUSSAOUI Mohamed -> B2G1
WEVERBERGH Antoine -> B2G1
OREEL Romane -> B2G1

Dans notre cas, il s’agit de la conférence n°4 :

“The Internet of Natural Things.” de Simon Colisson.

Visionnage de la conférence:

Chaque membre du groupe a visionné la conférence de son coté tout en prenant des notes. Nous avons ensuite réalisé des recherches afin d’en savoir plus sur Simon Colisson, ses ouvres, ses conférences ainsi que des recherches sur la technologies dans la nature.

Mise en commun:

Après un discour d’environ 1 heure de M.Bourgaux, on a regroupé les tables avec les membres du groupe. Puis on a donné notre avis sur la conférence. Ensuite, on a été sur un site où il y a tout le discours de la conférence de Simon Collison. On a coupé ce-dernier en 4 pour que chacun fasse son résumé.

1ier jour.

Après une heure voir deux heures, on a mis le tout en commun. Ensuite, on a mis des sous-titre ainsi que le titre général. Quand M.Tournay a lu notre résumé, il nous a conseillé de mettre des mots-liens entre les phrases et vérifier la ponctuation.

2ième jour.

Ce jour là, nous avons recu le briefing. On nous a dit de réaliser un Markdown aussi. Avec le groupe, on a du faire des modifications dans notre contenu. On a corrigé l’orthographe et la grammaire, nous avons aussi ajouter un paragraphe pour inciter le lecteur à lire notre article.

3ième jour.

Nous avons réaliser l’abstract pendant une heure puis, ensuite, nous avons commencé le layout chacun de son coté.

Mon wireframe:

Avant
Après

Typographie:

J’ai fait plein d’essaies des differentes polices mises en contexte de paragraphes dans le cadre du cours du Monsieur Bourgaux. Il m’as appris comment analyser, comparer et mettre ensemble les styles de fontes. Voici mes tests:

2 polices, 3 graisses: Normal, gras, italique; < de 120k pour typekit et fast pour Google Fonts.

Interlignage: entre 140%, 180% voir parfois 200% de la valeur du corps.

Longueur des lignes: entre 55 et 60 caractères.

Mon choix de police:

J’ai choisi la Raleway et la PT Sans Narraw.

Marge : 20px.
Titres : PT Sans Narraw, 1.953em.
Paragraphe : Raleway, 1em.
Rapport hierarchique: 1.250.

Mes choix de couleur:

Mes layouts:

Voici mon premier layout. Après l’avoir montrer à plusieurs professeurs; voici ce que j’ai du modifier dans mon layout.

Mon premier layout.

← Image floux, on doit reconnaitre Collison

← “Conference #4” Inutile

← “Simon Collison” On a l’impression que c’est le site de Collison

← Texte illisible

← Boutton inutile

← La ligne de séparation separe le titre au texte.

← La ligne de séparation separe le titre au texte.

Corrections

Code:

J’ai utilisé la méthode BEM que monsieur Thronte nous a appris. J’ai bien fait attention à l’indentation. J’ai aussi ajouté des commentaires pour mieux se retrouver dans le code. Sans oublier les images en @media pour les écrans RETINA.

Compression des images:

C’est ce qui m’a pris le plus du temps, j’ai tout fait pour obtenir un dossier inférieur à 5Mo.

Descriptif de l’expérience et du résultat des 4 autres étudiants:

Trystan Lothaire: The Internet of Natural Things
  • Tout s’est bien passé, pas de soucis, sujet intéressant, expérience interessante.
  • Dans son groupe il y en avait qui travaillait plus que d’autres.
  • Il a tout aimé (code et design), design compliqué et c’était ca qui rendait le truc plus intéressant.
  • Pour une première expérience, c’est super.
  • 1 grosse semaine apres plusieurs design.
Martin Constant: How to build an atomic bomb
  • Tout était collectif avec un plan de travail mis en place.
  • Difficulté dans le code car Martin n’avait aucune base,il a eu juste les cours de l’école.
  • Plus de difficulté dans le code que dans le design.
  • Tout désigner dois être conscient que son design risque d’inpacter le monde positivement ou négativement.
  • Belle experience.
Maxime Fondu: « De Ai aux robots, des applications au wearable ».
  • Travail/4 assemblé + tout les membres du groupe ont faait leur travail.
  • Il est à l’aise dans le HTML et CSS, monsieur Thronte l’a beaucoup aidé, il s’est aidé d’internet pour le javascript.
  • Code + texte trop long.
  • 3 jours pour complexifier et modifier.
  • C’était chouette comme expérience.
  • « Design inclusif, faut penser à tout le monde, comment fonctionne »
Morgane Laurent : Broad Band
  • Bon travail, pas assez de base pour arriver et merci internet.
  • Difficulté dans le design.
  • Un petit peu de code avant.
  • /4 rassemblé le texte, tout le monde a travaillé dans son groupe
  • Conf: les femmes ne sont pas reconnu dans le monde du web
  • Groupe: appris pas mal de chose et contente de son projet
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