olivier evrard

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

Mobile web (+ atelier cvg)

Contexte

Vous allez réaliser un site pour smartphone ET écran large avec les « medias queries ». Cette page sera codée pour un(e) artiste de votre choix. Cette page pour mobile sera le pendant numérique d’un univers artistique existant en « print ».

Contenu

Cette page devra contenir:

  • le nom du groupe ou de l’artiste
  • une biographie (wikipedia ou autre)
  • 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).
  • un agenda de la prochaine tournée (à inventer si il le faut)
  • un bouton fictif mais cliquable pour acheter un ticket

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 « en first mobile » mais la page doit pouvoir se lire aussi sur écran large. (Pas de version iPad).

  • 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>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");
}); 
</script>

<!-- votre contenu -->

</body>
</html>

Faire un burger ☰ avec un code Unicode

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

Timing

  • Semaine du … au … : briefing + warmup
  • Semaine du … au … : critiques + codage + …
  • Semaine du … au … : dernière critique + finalisation
  • Journée du … : présentation et évaluation.

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