olivier evrard

*********************
*********************

CACLB mobile page

Contexte

En collaboration avec le cours d’Atelier, vous allez réaliser une page pour smartphone. Cette page sera codée pour un(e) artiste proposé(e) dans le cadre de l’exposition « Métallifère » au CACLB. Cette page pour mobile sera le pendant numérique de l’affiche papier à réaliser à l’Atelier. « Pendant » ne veut pas dire « jumeau » ou « copié/collé ». « Pendant » c’est plutôt une adaptation. Présenter une même chose dans une autre dimension: la 3e, la 4e. Amener ce que le papier ne peut, ne pourra jamais apporter même si il le pense très fort en serrant les poings.

Contenu

Cette page devra contenir:

  • le nom de l’artiste
  • le nom de l’exposition
  • les dates de l’exposition
  • un texte explicatif de l’exposition
  • une biographie
  • une citation à mettre en exergue (blockquote)
  • des photos optimisées poids/qualité (4 minimum)
  • un bouton lire plus qui .show un élément .hide
  • un jquery supplémentaire qui vous aurez outrageusement copié/ collé/ greffé/ raté/ retravaillé/ pesté/ réussi/ bravo/ lol
  • les liens fictifs(#) vers les réseaux sociaux permettant de partager cette formidable exposition
  • un menu « burger » cliquable avec un gros doigt tout gras afin d’ouvrir ou de fermer un menu (.slideToggle).

Design

Le contenu c’est un chose importante mais vous allez devoir travailler le CSS de votre page afin de créer un univers en cohérence avec l’artiste. Vous êtes graphistes, donc un soin tout particulier aux éléments de couleurs, de typographie, de marges, d’images … doit être apporté.

Responsive

Cette page sera travaillée pour mobile « first and only »:

  • un format en une seule colonne
  • une navigation devra apparaitre au dessus de la page pour mobile (menu burger)

Liens

Code HTML

<!doctype html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <title>CALCB - artiste</title>
 <link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width" />
 <script type="text/javascript" src="jquery-1.12.1.min.js"></script>
</head>

<body>
<script>
$(document).ready(function() {
 alert("test");
}); 
</script>

<!-- votre contenu -->

</body>
</html>

Faire un burger ☰ avec un code Unicode

<a href="#">&#9776</a>

Timing

  • Semaine du 16 au 20/10 : briefing + warmup
  • Semaine du 23 au 27/10 : critiques + codage + …
  • Semaine du 6 au 10/11 : dernière critique + finalisation
  • Journée du 27/11 : présentation et évaluation.

*********************