Construction d’un site web de A à Z

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.

Design :

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 :

compteur 

Publicités
Image

Design de mon site

Mon site

Voici une capture d’écran de la page d’accueil du site que j’ai créé dans le cadre du cours « Outils ». Il s’agit d’un site pour promouvoir l’ouvrage Isaac Goguet, orfèvre, protestant, révolutionnaire, à paraître courant 2013 aux éditions du Croît vif. Pour lire des extraits du livre, regarder une interview vidéo de son auteur ou lui écrire, rendez-vous sur le site.

Pour savoir ce que la création de ce site m’a appris, lisez l’article « Construction d’un site web de A à Z ».

« Votre bagage » : connaître ses apprenants

Dans le cours « Construction des connaissances », Marianne Poumay demande aux étudiants de lui envoyer ce qu’elle appelle notre « bagage ».

Je la cite :

« En une page maximum (il n’y a pas de formulaire, vous le faites librement), dites-moi quel est votre passé en rapport avec l’eLearning et quelles difficultés vous envisagez en rapport avec ce contenu. Quel est votre bagage, qu’espérez-vous apprendre et que craignez-vous ?

Ce petit texte me permettra de mieux comprendre, dans la suite de ce cours, les difficultés éventuelles que vous rencontreriez. Vous pourrez aussi y revenir vous-mêmes en fin de cours, lorsque vous vous questionnerez sur le fonctionnement de votre groupe.

Ce travail ne fait pas l’objet d’une cotation, il est juste là pour m’aider à découvrir ce groupe. Merci de le réaliser malgré tout sérieusement, il ne vous prendra que quelques minutes.

Marianne. »

Cela peut paraître étonnant mais ce simple petit exercice qui ne m’a pris que quelques minutes a, en revanche, eu un impact important sur ma motivation. Il permettait en effet d’« humaniser » le processus d’apprentissage à distance qui peut parfois paraître, au contraire, très froid. J’ai eu l’impression que le professeur se souciait sincèrement de mes expériences antérieures, de mon ressenti par rapport au cours proposé et qu’elle en tiendrait compte dans son évaluation. Cela m’a donné davantage envie de m’investir dans ce cours.

De plus, le fait de pouvoir exprimer mes craintes face au travail de groupe m’a aussi permis de les exorciser en partie, en essayant d’en chercher les aspects positifs. Mais je reviendrais sur ce dernier point dans de futurs posts.

Ce petit « truc », même s’il est sans doute encore plus important dans un dispositif de FOAD, est aussi un élément essentiel en présentiel : quand j’enseignais, je m’efforçais toujours d’apprendre les noms de mes étudiants ou élèves dès le 2ème cours et ensuite de m’intéresser à leur « bagage » et leur projet (je m’occupais notamment du module PPP, projet personnel et professionnel) pour essayer d’individualiser la relation pédagogique au maximum, même si cela n’est jamais évident avec des classes de 35 élèves (collège, lycée) ou de 60 étudiants (université)…

J’ai parlé de cette question avec une amie qui travaille comme consultante dans le développement de l’enseignement supérieur au Luxembourg et elle m’a renvoyé à des études qui montrent l’importance de connaître l’apprenant. Je vous promets donc de vous parler de certaines de ces études dans un prochain post.

Dépasser la distance

Un des intérêts du master AIGEME est sa dimension réflexive. L’étudiant étant lui-même à la place de l’apprenant à distance, il est confronté aux mêmes problèmes que ceux que rencontrent ou rencontreront les apprenants des dispositifs pédagogiques qu’il sera amené à créer. Ainsi, pour chaque cours, en plus de faire les exercices ou devoirs demandés, j’essaye de me demander si l’ingénierie du cours est optimale, ce qui pourrait être amélioré, les éléments à retenir.

Je voudrais donc vous faire partager mes réflexions sur trois façons d’aider l’apprenant à distance à se sentir moins isolé et à se motiver, à partir d’exemples de « stratégies » mises en place par certains des professeurs du master.

Consulter les posts suivants :

  1. « Votre bagage » = connaître ses apprenants
  2. L’importance du feedback régulier et rapide    
  3. Classe virtuelle et motivation

Bonne lecture ! Et si vous aussi, vous avez constaté que certains « trucs » employés par des professeurs vous ont aidé à vous (re)motiver, n’hésitez pas à les partager dans les commentaires…

Mon portrait ASCII

Dans le cadre du cours Outils, j’ai créé mon_portrait_ASCII. Certains parlent d’art ASCII mais j’avoue que je préférerais tout de même avoir été le modèle de Modigliani ou de Vermeer qui a peint un de mes tableaux préférés.

La jeune fille à la perle. Tableau peint par Vermeer en

La jeune fille à la perle (1665-1667), Vermeer

Hello world

C’est tout de même assez magique de réaliser sa toute première page web ! Voici la page des balises hello_world-texte et la page web hello_world-web.

L’année 2013 sera technologique ou ne sera pas…

La fin du monde n’aura pas lieu !

Je commence donc mon e-portfolio. J’ai tenu un journal (à l’ancienne) depuis novembre : résumés à suivre dans les prochains épisodes…