Carnet de contes : un nouveau site Jimdo

Ce dernier mois a été bien occupé : j'ai enfin terminé un site à vocation plutôt pédagogique commencé l'an passé et resté en suspens depuis ! Je vous présente donc Carnet de contes, un nouveau site réalisé avec Jimdo évidemment !...


Carnet de Contes : capture d'écran

De quoi animer un atelier de lecture de contes

Sur ce site, j'ai mis en ligne, en téléchargement libre, de nombreuses ressources permettant d'animer un atelier de lecture de contes :

  • des explications sur la démarche et l'organisation de l'atelier
  • le déroulé d'une séance
  • un tutoriel exliquant comment fabriquer à moindre coût un carnet, avec des photos de carnets d'élèves
  • le matériel pédagogique que j'utilise : une centaine de contes que j'ai remis en page et illustrés (à télécharger librement au format PDF), ainsi qu'une cinquantaine de fiches d'activités (à télécharger sous réserve de contribuer au projet en envoyant une fiche d'activités)

Bref, gros boulot, puisque le site compte près de 120 pages !

Un template natif customisé

Mise en page native

Le site est basé sur la mise en page F4046 de JimdoFree, que j'ai réaménagée : j'ai notamment élargi le conteneur, augmenté les marges internes et modifié la présentation des menus latéral et horizontal.

Capture fond fixe

 

 

Comme souvent, j'ai utilisé les codes du tutoriel pour personnaliser le fond afin de positionner une image de fond fixe dans le coin inférieur gauche de la fenêtre. L'image est ancrée ; elle reste statique quand on fait défiler la page. Je ne sais plus où j'ai déniché ces champignons à lunettes... mais j'ai détouré l'image en transparence, de manière à pouvoir la superposer au fond de base bleu.

Capture CSS3

 

J'adore les CSS3, dont j'use et j'abuse : avec leurs propriétés, il est incroyablement facile de faire des coins arrondis, comme sur ce design, ou de créer des effets de texte, comme ce léger "halo 3D" qu'on aperçoit sur le gros titre. Le problème, c'est que les anciens navigateurs ne reconnaissent pas les propriétés CSS3, même les plus élémentaires - le site est alors considérablement différent - et surtout, seule la dernière version d'Internet Explorer les interprète correctement.

Appuyer sur le champignon ?

Capture CSS3

 

J'ai aussi ajouté un bouton de retour en haut de page (voir ce tuto, celui-ci ou celui-là) un peu rigolo : au repos, on aperçoit seulement le haut du chapeau du champignon. Quand on clique sur le lien "haut", le champignon sort de terre - c'est tout à fait inutile... L'animation est faite en CSS3 : magique !

Une police "exotique" pour les titres

Capture police exotique

Depuis peu, les utilisateurs de JimdoPro disposent d'une liste de polices "exotiques" à appliquer aux textes et aux titres de leur site. La bonne nouvelle, c'est que les utilisateurs de JimdoFree peuvent faire de même. Je l'ai testé "en vrai" sur les titres de mon site et je me suis lancée derechef dans la rédaction d'un tutoriel : so stay tuned !

Un widget social statique

Capture widget social

 

Cela faisait un moment que j'essayais de fixer les boutons de partage fournis par Jimdo, pour faire une sorte de widget social statique comme mon bouton de contact. J'y suis parvenue, mais en partie seulement : en effet, le code du bouton doit être entré "en dur" si bien qu'on ne peut fixer que la page d'accueil du site. Le widget n'est pas "dynamique" dans le sens où il ne récupère pas automatiquement l'adresse de la page sur laquelle on se trouve quand on clique sur une des icônes. C'est dommage, mais pas abominable, donc je l'ai conservé. (Peut-être écrirai-je un tutoriel pour expliquer comment l'installer).

Un pied de page fixe qui se fait oublier

Côté navigation, j'ai mis en place le "stickyfooter" de ce tutoriel, en ajoutant une petite coquetterie visuelle : le pied de page est transparent et il s'opacifie quand on passe le curseur dessus. Ainsi, il n'obstrue pas l'écran, mais les liens deviennent visibles quand on on a besoin de les cliquer :

Capture stickyfooter transparente
Capture stickyfooter opaque

Des boutons qui attirent l'oeil

Capture fond fixe

J'ai trouvé un code pour créer en CSS (donc sans images) de jolis boutons dits "call to action". J'en donnerai le code détaillé bientôt. C'est facile à installer, à personnaliser et c'est un bon moyen d'attirer l'attention des visiteurs sur un lien.

Capture zone de téléchargement

 

Comme le site propose beaucoup de fichiers à télécharger, j'ai stylé le bloc de téléchargement natif de Jimdo : j'ai élargi les marges internes et externes, centré le bloc, ajouté un fond coloré aux angles arrondis et transformé le lien de téléchargement en un bouton coloré. C'est tout bête mais efficace (tutoriel à venir).

Des formulaires "revampés"

Capture bouton

 

 

 

Bien entendu, j'ai également appliqué les codes fournis dans le tutoriel qui permet de styler les formulaires. Le formulaire de contact et celui de la page des commentaires y ont gagné en lisibilité et en élégance. J'en ai profité pour styler les numéros des commentaires (grâce à ce petit code) et faire disparaître les avatars des posteurs, afin d'élargir le formulaire de postage :

Capture avatar off

Une visionneuse de PDF

Mon plus gros problème a concerné la possibilité d'offrir aux visiteurs du site une prévisualisation des fichiers PDF avant de les télécharger. Ma solution est lourde, mais fonctionnelle : j'ai hébergé les fichiers que j'offre en téléchargement sur mon compte Google Drive, puis j'ai utilisé la visionneuse de PDF de Google pour afficher en ligne un aperçu des fichiers. Google Drive fournit un code pour intégrer la visionneuse dans une page web, mais le résultat est terrible car la fenêtre compte 2 et parfois 3 barres de défilement ! Beurk ! J'ai donc multiplié les tests jusqu'à trouver le code qui va bien : une seule barre de défilement dans la visionneuse - c'est raisonnable :

Capture visionneuse de PDF Google

Je crois que j'ai fait le tour des principaux points techniques de Carnet de Contes. En tout cas, je suis ravie d'en avoir fini avec ce site dont la mise en place a été trèèèès laborieuse et de pouvoir reprendre la rédaction des tutoriels ici-même :)

Écrire commentaire

Commentaires : 4
  • #1

    Happlay (samedi, 03 novembre 2012 14:05)

    Magnifique site comme d'habitude. Merci pour tout tes tutoriel !

  • #2

    aloeverasante (mercredi, 13 février 2013 23:04)

    très jolie en effet ;)

  • #3

    Arianna (jeudi, 21 février 2013 21:36)

    C'est splendide ! Très bien fait !
    Vous pouvez nous en dire plus concernant votre visionneuse de PDF.
    J'adore ! Mais si vous pouviez nous expliquer une fois le texte tapé, comment l'intégrer de google drive à la visionneuse PDF de Google ?
    Et... nous dévoiler le secret du " code qui va bien "...
    Mille merci pour votre travail.

  • #4

    favoris (dimanche, 24 février 2013 13:11)

    @Arianna : la visionneuse PDF est celle de Google. Pour l'utiliser, il faut avoir des textes sous forme de fichiers PDF (dans OpenOffice, mon traitement de texte, l'export PDF est inclus), les charger sur Google Drive (un espace de stockage gratuit fourni par Google), puis utiliser l'option "intégrer le PDF dans une page" (ou quelque chose du genre) proposée par Google : il suffit ensuite de copier-coller le code fourni dans un Widget-HTML. J'ai juste utilisé un code légèrement différent pour éviter d'avoir 3 scrollbars, mais le code de base est aussi fonctionnel. Je ferai un tuto un jour quand le temps ne sera plus une denrée si rare... ;(

Ruban