CSSZenGarden

CSSZenGarden
Le lien ci-dessus vous redirigera vers le site CSSZenGarden. Ce site propose un exercice de design afin de mettre en évidence et en pratique le langage CSS. L'objectif est de faire comprendre au futur développeur l'intérêt de séparer le HTML (le fond) du CSS (la forme).

Explication de mon travail

Le choix de ma thématique s’est porté sur l’envie d’un réparateur de clarinette de mettre en avant le travail de ces prédécesseurs. À titre d’information, les photos ont été prises durant les années 1880 dans nos usines françaises situées en région parisienne plus précisément à Mantes La Ville.

Ma page s’articule en 4 parties :

• Une partie header (pleine page selon mon affichage)
• Une partie centrale réunissant les différents articles ainsi que les photos qui viennent soutenir le propos.
• Une sidebar rassemblant toutes les ressources
• Une dernière, le footer réunissant les liens redirigeant vers des sites annexes

J’ai porté un regard sur les différents éléments constituant la partie textuelle de la page :

• Pour ce qui est du téléchargement, j’ai rajouté une icône afin de faire comprendre à l’utilisateur que c’est un lien de téléchargement et pas une redirection.
• Pour les abréviations, j’ai mis en place une animation pour que le lecteur puisse lire en entier l’abréviation, s’il ne connait pas cet acronyme.
• Pour les liens dans les différents paragraphes, j’ai réutilisé en rappel les différents éléments des <h3> afin de les faire ressortir du flux.

Les articles ont pour dérouler :

• L’acheminement du bois d’ébène en provenance de l’Afrique
• L’usinage et les conditions de travail au sein d’une des différentes chaînes de production de l’usine (ici : chaîne du travail du bois).
• L’article « Benefits » est une succincte présentation de notre luthier
• Le dernier est un bilan du travail de recherche effectué sur la clarinette datant de 1939. La clarinette a encore évolué depuis mais ne s’est pas révolutionnée non plus; juste quelques clés en plus, un travail sur l’ergonomie des clés et sur la précision de la perce grâce à l’arrivée de machines-outils plus performantes.

À noter, j’ai écarté le dernier paragraphe afin de mettre en avant les différents intervenants sur ce travail de mémoire.

L’organisation de la sidebar :

Je l’ai répartie en trois parties correspondant ainsi au HTML. Afin de bien délimiter chaque partie, j’ai rajouté une icône permettant par la même de mettre en avant la thématique de chaque rubrique.

Le footer :

Rien de très original, je voulais reprendre exactement l’idée de la page 214, c'est-à-dire mettre des icones correspondant aux différents liens, malheureusement je n’ai pas réussi à percer le mystère.

À titre indicatif, ma résolution d’écran est de : ‘1920 x 1080’. Le lien ci-dessous vous donnera un aperçu de mon travail
Visuel de la page