Un site avec des illustrations open source
La base de cet exercice est la mise en avant d’un illustrateur et de quelques images. Quel que soit votre choix, les illustrations doivent être libre de droit, préférentiellement dans le domaine public. Ce point est non négociable. Ne pas le respecter sera compris comme de la fainéantise, ce qui n’est pas bien.
Le dépôt dans le domaine public de peintures, photos, illustrations, etc. a considérablement évolué ces dernières années, et une recherche de trois minutes suffit à trouver du matériel visuel par gigas entier. Trouvez donc des images en définition correcte, qui appartiennent au même auteur, ou au pire à la même mouvance, car vous allez devoir rassembler un peu d’informations consistante dessus. Là aussi, wikipedia est votre ami.
Trois pages en trois tailles d’écran
Sur cette base, vous allez devoir créer un site en trois pages.
Toutes les pages comporteront le titre du site, une navigation renvoyant aux deux autres pages, et une icone wikiedia avec un lien sur un contenu lié.
Toutes comporteront aussi un footer contenant votre nom et des mentions de copyleft.
La page d’entrée devra comportera une image en pleine largeur et un texte d’introduction court et un peu séducteur. Une forme de baseline : qui est-ce, qu’est ce qui est important de savoir, pourquoi c’est bien.
La deuxième page est une page de contenu texte plus long, dans lequel sera inséré deux photos au moins de la même largeur que le texte. Ça peut être un portrait de l’auteur, une vue générale d’exposition, le lieu où il/elle a vécu, etc. En tous les cas autre chose que les oeuvres d’art elles-mêmes.
La troisième page est une galerie comportant 12 images.
Medias queries
Le site doit s’adapter à des écrans de différentes tailles grâce aux medias queries, suivant le wireframes fournis pour ces différentes tailles
1) plus petit que 578 px,
2) de 578px à 1024px
3) de 1024 px 1200px
4) tout ce qui est plus grand (ce cas n’est pas décrit dans les wireframes)
/* de 0 à 576px, c'est le comportement par défaut */
/* A partir de 576px
@media (min-width: 576px) { }
/* A partir de 992px */
@media (min-width: 992px) { }
/* à partir de 1200px */
@media (min-width: 1200px) { }Page d’entrée
Page de texte
(le footer est présent en bas de chaque page)
Page de galerie
(le footer est présent en bas de chaque page)
Détails supplémentaires
Le site doit utiliser deux typographies, dont une au moins en woff. La police par défaut, le times, est interdite.
Les couleurs, famille de typos, taille de typo et espacements de grille seront stockés dans des variables CSS.
Remise
Le site devrait être bouclé en 4 séances.