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. Un univers bien particulier avec du texte, des images, des typos et des clics étonnants.

Survivant à l’envie de prendre l’avion pour explorer, je vous demande de nous offrir un regard sur un lieu insolite et de nous l’expliquer, de nous le partager. 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 (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é.

Responsive

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

  • un format en une seule colonne pour 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>

Timing

  • Semaine 1 : briefing + warmup
  • Semaine 2 : critiques + codage + …
  • Semaine 3 : critiques + codage + …
  • Semaine 4 : dernière critique + finalisation
  • Semaine 5 : rendu + mise en ligne

Évaluation

  • Ce projet comptera pour 100/100 du premier quadrimestre

Exemples sites web mobile

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