Dans le cadre du cours D9CW1 « Outils », je devais créer un site internet. Nous étions libres de choisir le thème du site. J’ai décidé de créer un site pour promouvoir un ouvrage écrit par mon père qui devrait paraître courant 2013 aux éditions du Croît vif. L’ouvrage est le premier livre consacré au personnage historique Isaac Goguet qui vécut sous la Révolution française.
La création de ce site m’a permis d’acquérir ou de développer de nombreuses compétences, principalement techniques (programmation) mais également graphiques (design).
Programmation :
J’avais déjà créé un site web pour mes étudiants de lettres modernes en 2008, mais en utilisant Google Sites qui propose une interface WYSIWYG très simple pour construire un site. Cette fois, la consigne était de créer le site de A à Z grâce au langage html et aux feuilles de style CSS.
Parfaitement débutante en programmation, je me suis appuyée sur le tutoriel du « site du zéro » conseillé par Christian Fondrat (ce tutoriel est vraiment très bien fait, clair et progressif, et le site est une mine d’informations, je le conseille vivement !). J’ai écrit le code en html 5 et CSS 3, en utilisant les balises structurantes (<header>, <section>, <aside>, <footer>) et les balises de contenu (<h1> et <h2> pour les titres, <p> pour les paragraphes). J’ai inséré des liens (<a>) et un formulaire de contact (<form>) pour pouvoir poser des questions à l’auteur. J’ai aussi appris à utiliser les attributs et les classes pour mettre en forme le contenu du site en CSS : on peut ainsi changer la police, la taille des caractères, l’emplacement des éléments sur la page, etc.
Malgré les explications du tutoriel, j’ai eu quelques difficultés avec la mise en page du contenu pour obtenir exactement le résultat que je souhaitais, notamment pour que le site soit bien lisible sur smartphone : pour cela, j’ai utilisé les media queries mais il m’a fallu tâtonner un peu pour y parvenir.
Je ne suis pas non plus webdesigner donc j’ai dû naviguer sur le net pour m’inspirer de sites existants pour élaborer la maquette et le design de mon site. J’ai aussi appris à écrire les couleurs en code rgb (il s’agit de décomposer la couleur en degré de rouge (r=red), de vert (g=green) et de bleu (b=blue).
En travaillant sur la création d’un kakemono avec le service communication d’Université Paris Est pour un événement que j’organise, j’ai découvert l’existence des images vectorielles que l’on peut agrandir sans perte de résolution. Je m’en suis servie pour insérer une image de livre dans mon site en guise d’arrière-plan aux encadrés qui apparaissent sur plusieurs pages.
Le seul élément de mon design original que je n’ai pas réussi à réaliser est l’effet de page qui se tourne que je souhaitais intégrer pour permettre la lecture d’extraits du livre. A la place, j’ai choisi d’insérer les extraits dans une boîte avec une barre de défilement à droite.
J’ai intégré différents média à mon site : une vidéo grâce à la balise <video> (une courte interview de l’auteur), des images grâces à la balise orpheline <img/> (la photo de la couverture du livre, un tableau représentant Isaac Goguet et sa famille, des images vectorielles) et une présentation prezi (en guise de postface en forme de clin d’oeil). C’était la première fois que j’utilisais prezi et je trouve le résultat plutôt satisfaisant : qu’en pensez-vous ?
Le site n’est en ligne que depuis quelques jours mais grâce au compteur que j’y ai intégré je sais que deux résidents des Etats-Unis l’ont déjà visité !!! Voici la preuve :
Claire's ePortfolio 