olivier evrard

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

Exploration mobile

Contexte

Vous allez réaliser, dans le cadre du cours d’infographie, un site Web pour smartphone UNIQUEMENT. Ce site sera entièrement codée par vous-même. Le contenu de ce site sera une exploration énigmatique d’un lieu méconnu du grand public en 3 pages qui devront se succéder. 3 pages comme 3 portes énigmatiques que l’on franchit. Un univers bien particulier avec du texte, des images, des typos et des clics étonnants.

Je vous demande de nous offrir un regard sur un lieu insolite que vous connaissez et de nous l’expliquer, de nous le partager. Utiliser le code comme moyen d’expression. Cela devra constituer une expérience artistique, du web-art léger en quelque sorte. ATTENTION, il ne s’agit pas de réaliser un mini site touristique. Vous devez installer un OWNI, un objet web non identifié. Rien de classique, rien d’habituel dans le fond et la forme. Une sorte de Fanzine mais en ligne…

Contenu

Ce site devra contenir:

  • 3 pages HTML minimum
  • les coordonnées GPS du lieu en latitude et longitude en haut de la 1ère page
  • du contenu texte de qualité
  • des citations à mettre en exergue (blockquote)
  • des images optimisées poids/qualité (4 minimum)
  • ces images et/ou photos seront impérativement les vôtres
  • des éléments animés par jQuery et/ou par CSS
  • un lien en bas de la dernière page qui renvoie vers l’accueil (index.html)

Design

Le contenu est un chose importante mais vous allez devoir travailler aussi le CSS de votre page afin de créer un univers en cohérence avec le monde qui vous allez nous faire découvrir. Vous êtes graphistes, donc un soin tout particulier aux éléments de couleurs, de typographie, de marges, d’images … doit être apporté. Le style imposé sera le BRUTALISME (voir liens plus bas).

Responsive

Cette page sera travaillée pour mobile « en first mobile »

  • un format en une seule colonne pour mobile
  • en écran « desktop » le format reste « verticale mobile »

Liens

Code HTML

<!doctype html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <title>Votre titre</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");
// ici vos scripts
}); 
</script>

<!-- ici votre contenu -->

</body>
</html>

Planning

  • 5/10 : briefing + warmup
  • 12/10 : recherche + photos + codage @home de votre endroit insolite
  • 19/10 : workshop PLEASE TOUCH! – L’objet qui parle
  • 26/10 : début des cours sur le codage pour MOBILE
  • …
  • 16/11 : rendu des 4 exercices + montrer son site
  • 23/11 : rendu intermédiaire 2H sur les 4 ex. + travail sur le site
  • 30/11 : rendu intermédiaire + retour sur votre rendu + amélioration
  • 7/12 : jQuery + dernières critiques
  • 14/12 : FINALISATION
  • 11/01 : RENDU FINAL JUSQUE 12H30 MAX sur TEAMS. Le rendu sur TEAMS fera office de signature, pas besoin de vous déplacer à l’école…

Priorité dans l’évaluation par ORDRE d’importance

  1. Expérience « MOBILE » bien adapté du site
  2. Le graphisme BRUTALISTE !!!!!! (typos, images, espaces, mise en page, scroll,…)
  3. La narration, le contenu
  4. Les effets arrivent vraiment en bas du classement d’importance… (-note 2022-ATTENTION déplacements de typos de type « marquee » ou autres TOTALEMENT interdits)

Évaluation

  • Ce projet comptera pour 70% du premier quadrimestre
  • 10% étant votre ABCdaire Processing
  • 10% étant votre machine à générer des paroles aléatoires
  • 10% restant étant les 4 exercices sur le mobile

Exemples sites web mobile

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