olivier evrard

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

Réaliser une fan-page

moderat

Contenu

Vous allez devoir créer de toute pièce une « fan-page » dédiée à un groupe de musique de votre choix. Cette page devra contenir:

  • une biographie (wikipédia)
  • une citation du groupe à mettre en exergue (blockquote)
  • des photos optimisées poids/qualité (4 minimum)
  • 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 le groupe et le style de musique. Vous êtes graphistes, donc un soin tout particulier aux éléments de couleurs, de typographie, de marges, … doit être apporté.

Responsive

Cette page sera travaillée sur deux formats:

  • un format pour écran large (desktop) avec deux colonnes, une pour la biographie et l’autre pour l’agenda des futurs dates de la tournée.
  • un format pour smartphone en une seule colonne avec la biographie en haut et l’agenda en dessous + le bouton + le <footer>.
  • une navigation devra apparaitre au dessus de la page pour mobile.

Liens

Théorie pour réaliser un site mobile

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.

Schéma

schema_fan_page

Code HTML

<!doctype html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <title>FAN PAGE</title>
 <link rel="stylesheet" href="styles.css">
 <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>

Timing

Vous aurez deux séances de 4H pour le réaliser avec mon aide. Je le reprends à la fin du cours de la semaine prochaine. Je reprends aussi la version intermédiaire du premier cours.

Bon boulot

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