olivier evrard

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

2.4 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 LONGUES PAGES (scroll). 3 pages comme 3 portes énigmatiques que l’on franchit. Un univers bien particulier avec du texte, des images, des GIF animés, 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 dont index.html;
  • 1 fichier CSS (styles.css);
  • Un dossier « fonts »;
  • Un dossier « images »;
  • remplissez les balise <title> avec votre lieu;
  • Un « favicon » : c’est la mini image (16px sur 16px) qui s’affiche dans l’onglet de votre page web;
  • les coordonnées GPS du lieu en latitude et longitude en haut de la 1ere page;
  • En <h1> le nom de votre lieu;
  • « Auteur : Prénom + Nom » en sous-titre du nom de votre lieu sur la page 1 (index);
  • du contenu texte de qualité;
  • des citations à mettre en exergue (blockquote);
  • des images optimisées poids/qualité (4 minimum);
  • ces images pourront être animées (gif);
  • ces images et/ou photos seront impérativement les vôtres;
  • si vous voulez utilisez des éléments vectoriel de top qualité, testez le .svg apd de Illustrator;
  • des éléments animés par jQuery et/ou par CSS;
  • 2 liens en bas de la page (genre page précédente / suivante, flèche gauche / droite, …) qui renvoient vers les autres pages
  • 1 lien (top, flèche haut, …) qui renvoie vers le dessus de la page avec un scroll fluide (scroll top.js ou css animation);
  • 1 lien en dessous de votre 3e page avec le texte « voir les autres lieux » et le href: /index.html;
  • dossier nom_prenom à rendre sur Teams.

Vos sites seront réellement mis en ligne. Ils pourront donc être consulté via smartphone par le monde entier dans une map. Vous devrez donc veiller à avoir une ergonomie et une lisibilité optimale. Le site devra aussi être optimisé au niveau du poids des images (module web export photoshop) – Test via le site d’analyse de Google : PageSpeed Insights. Vous devrez être à 80% environ ;)

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

  • Votre page web sera travaillée en (っ◔◡◔)っ « mobile first »  ;
  • Un format en une seule colonne pour mobile;
  • en écran « desktop » le format reste « verticale mobile » avec l’utilisation du css max-width sur votre div principale, imaginons .global.
/* exemple */
@media all and (min-width: 550px){
 
    /* Vos règles CSS pour les écrans plus grand que 550px ici */

.global{
 
 max-width : 550px;
 margin-left: auto;
 margin-right: auto;

}
    }

Gestion typo

HTML

  • L’entité HTML &nbsp; (« non breaking space ») va nous permettre d’ajouter une espace simple dit espace « insécable » ;
  • L’entité HTML &ensp; (« en space ») va nous permettre de créer une espace double ;
  • L’entité HTML &emsp; (« em space ») va nous permettre de créer une espace quadruple ;
  • L’entité HTML &thinsp; (« thin space ») va nous permettre de créer un espace très fin (demi-espace).

CSS

  • Pour gérer l’interlignage, utilisez line-height;
  • Pour gérer l’espace entre les mots, utilisez word-spacing;
  • Pour gérer l’espace entre les lettres, utilisez letter-spacing;
  • Pour créer des colonnes : utilisez column-count, column-gap, column-rule;
  • Pour gérer la césure d’un text-align:justify, testez hyphens:auto (pas parfait) à condition de déclarer <html lang="fr"> dans le head de l’HTML.
  • Pour des suite de lettres qui s’adaptent à votre page : word-wrap: break-word;

Planning

  • 22-23/10 : briefing + warmup + démarrage + rendu lieu + animation CSS;
  • 29-30/10 : CONGéS;
  • 5-6/11 : venir avec sujet, contenu texte et photos + entretien. On démarre les maquettes papier ou inDesign + début codage;
  • 12-13/11 : Codage + rendu intermédiaire 1 (fin du cours);
  • 19-20/11 : entretiens individuels + codage;
  • 26-27/11 : Codage + rendu intermédiaire 2 (fin du cours);
  • 3-4/12 : dernières critiques + codage;
  • 10-11/12 : FINALISATION;
  • 17-18/12 : RENDU FINAL JUSQUE 12H30 MAX sur TEAMS.

Priorité dans l’évaluation

  1. Expérience utilisateur « MOBILE » des 3 pages web;
  2. Le graphisme (typos, images, espaces, mise en page, scroll,…);
  3. La narration, le contenu;
  4. Les effets arrivent vraiment en bas du classement d’importance…;
  5. ATTENTION déplacements de typos de type « marquee » ou autres TOTALEMENT interdits !

Évaluation

  • Ce projet comptera pour 60% du premier quadrimestre;
  • 30% étant étant les exercices réalisés en classe et rendus sur Teams;
  • 10% restant pour la présence en classe et la motivation.

Exemples sites web mobile

Exemples sites web mobile élèves

-> Scannez le QR Code avec votre smartphone pour parcourir les exemples des autres années…

Liens code

Télécharger le dossier de départ

start_exploration_mobileTélécharger

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