olivier evrard

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

Site web (atelier cvg brief absurde)

Contexte

Vous allez réaliser, dans le cadre du briefing absurde (atelier), un site Web pour smartphone ET écran large avec les « medias queries ». Cette page sera codée pour un(e) artiste/groupe issu de votre concept travaillé à l’atelier. Cette page web sera ainsi le pendant numérique d’un univers artistique existant en « print ». Il devra donc y avoir un lien et l’adaptation du concept. Ce ne sera pas un copié/collé mais un support bien spécifique.

Les contraintes de votre briefing imposé s’applique bien entendu à votre site WEB. La demande est de un site par groupe

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)

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 pour mobile
  • un format en une ou deux colonnes pour écran large
  • une navigation devra apparaitre au dessus de la page pour mobile (menu burger)

Schéma

jQuery

L’internaute devra pouvoir naviguer sur votre page de haut en bas et de bas en haut avec son unique pouce, cela dans un mouvement de « Scroll » fluide:

  • le menu en version mobile devra actionner un « Scroll » vers l’agenda
  • un bouton dans le <footer> devra renvoyer vers le dessus de la page.

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 22 au 26/10 : briefing + warmup
  • Semaine du 5 au 9/11 : critiques + codage + …
  • Semaine du 12 au 16/11 :critiques + codage + …
  • Semaine du 19 au 23/11 : dernière critique + finalisation
  • Semaine du 26 au 30/11 : rendu + mise en ligne

Évaluation

  • Ce projet comptera pour 60/100 de premier quadrimestre
  • Le projet suivant « code créatif » pour 30/100
  • Le premier exercice repris « jquery sroll.js » pour 10/100

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