Communication S4 - Séance 2 | TP Les grilles

Conception d'interface numérique et valorisation de projets

Penser un contenu

Consigne

Reprendre la liste de liens faite pour la séance, la compléter éventuellement de manière à avoir au moins 10 items.

Penser au moins trois catégories pour classer ces différents items.

Définition du produit

A travers ce TP, il s'agit de réaliser une interface avec HTML/CSS et Bootstrap.

Cette interface consiste en une sorte de bureau (dans le sens des GUI) à partir duquel l'étudiant peut facilement accéder à ses réalisations et aux contenus qu'il utilise au cours de sa formation.

Pour qui?

L'étudiant crée une interface qui lui permet d'accéder facilement aux contenus dont il a besoin et qui regroupe de façon claire ses travaux.

La cible est d'abord l'étudiant lui-même en tant qu'étudiant de l'IUT. L'interface peut ensuite être présentée dans un entretien indirectement quand l'étudiant veut présenter un travail.

L'interface explicite une organisation et une hiérarchisation.

Nature des items

Les items peuvent être des projets, des ressources (cours de l'IUT ou notes prises par l'étudiants et qui sont mis en lignes) (lien vers le site de ce cours par exemple).

Les items sont

  • soit des projets qui permettent de définir les compétences de l'étudiant à ce moment de sa formation,
  • soit des ressources de l'IUT dont il se sert régulièrement,
  • soit éventuellement des liens vers un blog personnel ou des projets personnels liées à la culture numérique et qui peuvent être présentées dans un contexte académique.

Designer son gabarit

Consigne

Créer une grille avec MockFlow ou simplement sur papier.

Travailler l'organisation des items

  • Par niveau
  • Par catégories

Une catégorie peut avoir plusieurs niveaux.

Les catégories peuvent ne pas toutes être de même niveau.

Les wireframes

Le Wireframe (ou maquette fil de fer) en web design consiste à réaliser un schéma définissant les zones d'un site Web, ou d'une page Web. Il peut être réalisé par une personne non technique (client, graphiste, etc.).

Wikipedia | Wireframe (design)

MockFlow (ou autre solution équivalente)

Mockflow

Cliquer sur l'image pour aller sur le site

.

Intégrer la grille

Exemple

Consigne

  1. Créer les fichier index.html et css/style.css
  2. Installer Bootstrap.
  3. Coder votre interface à partir de votre gabarit.

Attention, vous pouvez vous inspirer du code de l'exemple mais il est codé avec Bootstrap 2, il vous faudra le remanier avec Bootstrap 3.

Vous n'êtes pas obligé d'uiliser d'image pour créer les vignettes, vous pouvez simplement définir des hauteurs avec des bordures pour les blocs.