Intégrer un carrousel d’actualités sur son portail (1/2)

Que faire quand on a un portail vieille génération et que le nouveau tarde à arriver ? On cherche à améliorer l’ancien !

Davidolib a présenté sur son blog comment présenter ses nouveautés sous forme de carrousel avec un carrousel « flash », pour ma part j’ai préféré utiliser un carrousel javascript, moins gourmand à mon avis pour les navigateurs web.

Le script en question  est disponible ici.

Il y a deux « parties » : le script stepcarousel.js et le code source de ce qui sera affiché. Sur notre carrousel d’actualités, notre code source se décompose de la façon suivante :

  •  dans la balise « head » de la page : le lien vers la feuille de style de votre site, le lien vers le script jquery.min.js nécessaire au bon fonctionnement de stepcarousel, le lien vers le script  stepcarousel.js. Il y a également des définitions de style css pour les classes du carrousel et le script d’initialisation (vitesse de défilement, etc…)
  •  dans la balise « body » : chez nous le strict minimum : l’encart d’actualité et rien d’autre. Cet encart est intégré sur notre portail en tant que frame. Petites explications des différentes balises :
    • <p id= »mygallery-paginate » style= »width: 500px; text-align:right; »> ……. </p> : c’est le conteneur de notre encart actualité
    • <div id= »mygallery » class= »stepcarousel »>………</div> : l’encart actualité
    • <div class= »belt »> ………………………………….</div> : le « bandeau » de l’encart dans lequel les actualités vont défiler
    • <div class= »panel »>…………………………………</div> : UNE actualité. Il y aura donc dans le  <div class= »belt »>…..</div> autant de <div class= »panel »> ……</div> que d’actualités.

Pour que la présentation de nos actualités soit « uniforme », elles sont écrites sous forme de « tableau », avec une image, le titre, le résumé de l’actualité, un lien pour en savoir plus. Au final, ça ressemble donc à cela :

Avant de vous donner le code complet, petit bilan des points positifs et négatifs de ce script :

  • point positif : ça nous a permis de donner à moindre frais (juste quelques heures de travail) un coup de jeune à notre portail, en lui donnant un aspect plus visuel et plus dynamique
  • points négatifs : ils sont tous au niveau du « back-office »
    • la mise à jour est assez fastidieuse et on reste dans le web « statique » : édition d’un fichier html, avec soit la possibilité de modifier le fichier déjà en ligne au risque d’avoir des coquilles visible au public le temps de l’édition du fichier, soit la possibilité de faire le travail sur un fichier « actualites_test.html » qui une fois finalisé viendra remplacer actualites.html
    • nécessité de connaître un minimum le html : ce sont donc toujours les mêmes personnes qui sont sollicitées pour mettre en ligne une nouvelle actualité !
    • impossible de planifier les dates de début et de fin d’affichage

Heureusement l’arme absolue pour contourner ces points négatifs existe et s’appelle php-mysql ! L’amélioration du « back-office » de ce carrousel sera le cadre du prochain article !

Comme promis, le code complet :

<html>
<head>

<link rel="stylesheet" href="url de votre feuille de style css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="url du script stepcarousel.js"></script>
<style type="text/css">

p.corpsactu{

padding-top:20px;
padding-bottom:20px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #264C99;

}

.stepcarousel{

position: relative; /*leave this value alone*/
border: 1px solid aliceblue;
overflow: scroll; /*leave this value alone*/
width: 540px; /*Width of Carousel Viewer itself*/
height: 250px; /*Height should enough to fit largest content's height*/

}

.stepcarousel .belt{

position: absolute; /*leave this value alone*/
left: 0;
top: 0;

}

.stepcarousel .panel{

float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 520px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */

}

</style>

<script type="text/javascript">

stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:4000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['./images/arrowl.gif', 0, -30], rightnav: ['./images/arrowr.gif', -30, -30]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>

</head>

<body>

<p id="mygallery-paginate" style="width: 500px; text-align:right;">

Actualit&eacute; <span id="statusA"></span> sur <span id="statusC"></span>
<img src="./images/opencircle.png" data-over="./images/graycircle.png" data-select="./images/closedcircle.png" data-moveby="1" />

</p>

<div id="mygallery" class="stepcarousel">

<div class="belt">

<div class="panel">

<table border=0 height="240">

<tr valign="middle">

<td><img src="url de votre image" align="left" style="padding-right:10px;" border="0"></img></a></td><td>

<span class="FRAME_TITLE">Titre de l'actualité 1</span>

<p class="corpsactu">Résumé de l'actualité 1</p>

<p align="right"><a class="encart" href="url de la page" target="_blank">Texte du lien "en savoir plus"</a></p>

</td>

</tr>

</table>

</div>

<div class="panel">

<table border=0 height="240">

<tr valign="middle">

<td><img src="url de votre image" align="left" style="padding-right:10px;" border="0"></img></a></td>

<td>

<span class="FRAME_TITLE">Titre de l'actualité 2</span>

<p class="corpsactu">Résumé de l'actualité 2</p>

<p align="right"><a class="encart" href="url de la page" target="_blank">Texte du lien "en savoir plus"</a></p>

</td>

</tr>

</table>

</div>

</div>

</div>

</body>

</html>

Publicités

Les pieds dans l’eau

Jeudi 21 juin, jour de l’été, jour de la fête de la musique.

Comme beaucoup, nous avons subi une pluie assez importante. Notre BU en a fait les frais, avec une grosse fuite et une énorme quantité d’eau qui s’est déversée dans nos rayons !

Heureusement les personnes encore présente à cette heure assez tardive dans la fonction publique (17h30 :-p ) étaient les personnes sur lesquelles on peut toujours compter, qui ne rechignent pas à mouiller le maillot (au sens propre) et à faire des heures supp pour sauver les meubles !

Je n’ai pas pu m’empêcher après coup d’imaginer comment la scène aurait pu se passer si les personnes présentes avaient été « les Autres » ….

Mme Pompadour : « Oh mon dieu, il ne faut surtout pas que l’on perde les livres. Je les ai sauvé du pilon, il ne faut surtout pas les perdre dans l’eau. Il faut vite ésponger. Quelqu’un a vu Julien ??? Julien ???? »

Casper : « Oui euuuuuuhhhhh….. effectivement il y a un problèmeuuuuuuhhhhh……. il faudrait faire quelquechoseuuuuuhhhhhhhh………… Il est là Sébastien ???? ah non pardon c’est pas Sébastien c’est Julien…. »

Ma’ Dalton, dans son rocking-chair avec un éventail : « ah oui, effectivement il faut faire quelquechose. Mais là je peux pas, je suis débordée. Julien, viens ici ! »

Miss El Gringo : « Pas de problème Madame Pompadour, je m’en occupes. Je vais faire un planning. Par contre comme il y a plus grand monde, là tout de suite, je vais devoir mettre Julien. »

Iznogoud : « Je vais vous aider, je vais mettre un message pour annoncer l’inondation sur notre page Facebook »

Julien, le vendredi matin en arrivant : « Bon comme personne ne l’a fait,  je vais m’occuper de la fuite, on m’a mis sur le planning hier après-midi mais ça fait trois ans que je ne travaille jamais le jeudi après-midi….. »

Voilà un article totalement inutile mais je vous annonce d’ici peu une série d’articles un peu plus intéressants, et plus techniques aussi, pour mettre en place un caroussel d’actualités….

En bibliothèque, nous sommes tous des….

…estomacs sur pattes ! Que l’on soit bibliothécaire (au sens large), administratif ou informaticien !

Et en ce début janvier, j’ai décidé, en mémoire d’une excellente galette à la pistache concoctée l’année dernière par un ovin ravi (pardon à une certaine Stéphanie de lui avoir piqué son jeu de mot ) d’essayer d’en faire une moi-même !

Ben oui, l’ovin est partie vers d’autres horizons depuis 😦

Évidemment on pourra se demander ce que vient faire une recette dans un blog d’informaticien en bibliothèque mais :

1) j’avais prévenu que sur ce blog on trouverait tout et n’importe quoi 😉

2) comme dit plus haut, en bibliothèque, on mange beaucoup (c’est parce que l’on travaille très dur et que ça donne très faim)

3) je fais ce que je veux, na !

Galette à la pistache et au chocolat (c’est mon relooking perso par rapport à celle de ma sainte-patronne), c’est parti ! Je vous livre mon improvisation à partir de plusieurs recettes glanées sur le web

Ingrédients :

– 2 pâtes feuilletées pur beurre prêtes à l’emploi

– 2 œufs

– 1 jaune d’œuf pour dorer la galette

– 100 g de pépites de chocolat

pour les ingrédients ci-dessous, les quantités sont « à peu près », je suis le roi du pifomètre !

– 100 g de beurre ramolli

– 150 g de sucre glace

– 150 g de pistaches (non salées, ça va de soit mais je le dis quand même), pistaches que l’on réduira en poudre à l’aide d’un mini-hachoir

– 80 g de poudre d’amande

Déroulement :

– Battre le beurre en pommade.

– ajouter les œufs, un à un

– incorporer le sucre glace, puis la poudre d’amande et la pistache

– goûter ! et ajouter ou pas de la pistache (c’est là qu’intervient la pifométrie)

– étaler la 1ère pâte feuilleté sur la plaque du four, la piquer avec une fourchette pour éviter qu’elle ne gonfle trop à la cuisson

– répartir la préparation à la pistache en s’arrêtant 1 à 2 cm du bord de la pâte (pour pouvoir fermer)

– mettre la fève ! ça serait ballot de l’oublier et de rater l’occasion qu’un ou une collègue se ridiculise en se baladant avec une couronne Lapins Crétins sur la tête !

– répartir les pépites de chocolat sur la préparation à la pistache

– piquer la 2ème pâte (toujours pour éviter qu’elle ne gonfle de trop), la mettre de façon à couvrir l’ensemble

– souder les 2 pâtes en pinçant les rebords (et pensez à vous lavez les mains avant, bande de cochons !), faites quelques petits dessins sur la pâte du dessus avec le dos d’une lame de couteau, et badigeonner au pinceau avec le jaune d’oeuf

– enfourner dans le four préchauffé à 210° : pour ma part j’ai laissé 30 min four allumé puis 10 min four éteint

Et voilà le résultat :

Visuellement, c’est pas trop mal non ?

A plus tard pour le verdict des collègues !

Edit : Bon, le verdict est tombé : il n’y en a plus ! ça ne devait pas être trop mauvais donc ! En tout cas moi elle m’a plût, j’en referais

Pourquoi faire simple ?

Que peuvent bien se dire les éditeurs de ressources électroniques quand ils réfléchissent à l’accès nomade des usagers de bibliothèques ?

Je parie sur : « tiens, et si on faisait tout pour que ce soit une vraie usine à gaz ? »

Il existe en effet un moyen « simple » (j’insiste sur les guillemets) pour les BU de fournir un accès aux ressources électroniques hors de leurs locaux, sans passer par un reverse proxy ou un VPN, c’est Shibboleth. Pour faire simple, Shibboleth est une fédération d’identité : l’utilisateur s’authentifie par l’annuaire de son établissement d’origine qui envoie un « ticket » au fournisseur doc-élec comme preuve d’authentification : c’est national, ça fonctionne, que demander de plus ?

Il y a plus d’un an, nous avons pris un abonnement à la bibliothèque numérique ENI (je vous l’avais bien dit que j’allais y revenir à ENI). Les titres sont intéressants, la bibliothèque ne nécessite pas de plugin flash pour être utilisée, elle a presque tout pour plaire. Petit bémol : l’accès à distance ! ENI ne fait pas parti des fournisseurs de services accessibles par Shibboleth. Ils nous ont donc proposé une solution « maison » à base de scripts php et de bibliothèques CAS-SSO qui vont bien….

D’entrée de jeu, un petit soucis pour moi : la connexion sur leur bibliothèque par CAS entraîne systématiquement la création d’un compte au nom de la personne connectée. A son insu. Je leur ai donc demandé les raisons de la création de ce compte et ce qu’en penses la CNIL : leur réponse est que ce compte permet des services personnalisés (signets) et qu’il n’y a pas de suivi de leur historique. Et j’ai eu le droit à une copie de leur récépissé de déclaration CNIL.

Premier obstacle levé, on passe à l’installation de leur script….Oui, mais… Notre serveur web est un serveur IIS. Notre prestataire a écrit son portail en ASP.NET. Pas de problème, on installe l’extension php pour IIS, me direz-vous. Le portail n’a pas aimé du tout… Suppression de l’extension php donc et retour au point mort. Echanges de mail avec ENI pour savoir s’ils n’ont pas autre chose à proposer. C’est non, pendant 2-3 mois. Et miracle, après quelques échanges où notre argument était « si ça ne marche pas, ce n’est pas la peine que l’on continue », ils nous ont enfin proposé une autre solution : la bonne vieille méthode, mais néanmoins efficace, d’accès par URL referer ! Depuis ça fonctionne nickel, problème résolu.

Il y a 2-3 mois, rebelote avec Dalloz : on prend un abonnement avec des accès distants. Dalloz nous envoie leurs scripts à insérer dans notre portail, cette fois c’est du javascript. Mais notre portail n’aime pas non plus le javascript. Echanges de mails, « non on ne peut pas faire autrement », « si vous pouvez », « non on ne peut pas », « faudra qu’on se pense à se désabonner alors… »

Et une fois de plus on nous propose un accès par URL referer ! Bingo !

Et bien pas tout à fait… On est bien identifié sur la page d’accueil dalloz.fr, mais quand on tente d’accéder aux ressources, on se fait jeter ! Notre interlocuteur Dalloz trouve cela normal : « La répartition de l’identification pour nos sites Internet n’est pas fonctionnelle ». Ce qui veut dire en clair, pas d’accès à distance ni pour Dalloz Revues, ni pour Dalloz Bibliothèque.

Aucun intérêt donc. Et nous n’avons toujours pas de solution à ce jour…

Ceci est une révolution (pédagogique)

J’ai assisté à une journée organisée par l’UNR Nord-Pas-de-Calais autour du thème « TICE, Ressources Pédagogiques Numériques et Innovation ».

Que suis-je allé faire dedans ? me demanderez-vous à juste titre… Et bien une des interventions de la journée était la présentation du portail régional des ressources numériques, et que, à cause de ce portail, au cours des 3 dernières années, j’en ai eu des réunions et des heures de travail ! Je voulais donc voir le résultat. Et je dois avouer que cette présentation m’a laisser un goût de « bien, on a fait le travail, voilà… et maintenant…? »

Il y avait aussi la possibilité d’assister à deux ateliers sur les trois proposés :

Atelier 1 : Accompagner mon enseignement
Atelier 2 : Quel statut juridique pour mes ressources ?
Atelier 3 : Tablettes, TBI, smartphones … les outils de l’enseignant rencontrent-ils les usages des étudiants ?

J’ai assisté aux ateliers 2 et 3 qui m’ont eux aussi laissé sur ma faim.

L’atelier 2, comme à chaque fois que l’on se pose des questions sur le statut juridique des ressources, la propriété intellectuelle, etc… n’a apporté que des bribes de réponses mais rien de plus. Cela dit les intervenants (je suis définitivement fan de Bernard Lang) étaient très intéressants à écouter et ont tant bien que mal apporté des pistes de réflexion à nos interrogations.

L’atelier 3 a été un large panorama des innovations technologiques que l’on peut utiliser dans le cadre d’enseignements mais je n’ai pas l’impression que derrière ces innovations technologiques, il y ait une réelle innovation pédagogique.

Est venu ensuite le dernier gros morceau de la journée, les présentations de six des neufs projets récompensés dans le cadre du « Prix de l’innovation pédagogique » organisé par le PRES Lille Nord de France. Je n’avais pas l’intention de rester jusqu’au bout, puisque j’espérais ne pas rentrer chez moi trop tard (les bouchons sur l’A1 ne sont pas une légende) mais la qualité croissante des 6 projets présentés a eu raison de mon intention initiale !

Je vais m’attarder sur celui qui a obtenu le prix spécial du jury (et je pense que toutes les personnes présentes ont trouvé ce choix justifié) : celui proposé par le Centre de Formation de Musiciens Intervenants (CFMI) de l’université de  Lille 3.

Leur projet consistait (grosso-modo) à tisser un réseau pour faciliter l’insertion professionnelle de leurs étudiants en mettant en place des ateliers de créations d’instruments au sein des collectivités locales (en particuliers les écoles). Ces ateliers sont bien évidemment animés par les étudiants.

Ces ateliers entrent dans leur cycle « Lutheries sauvages pour musiciens civilisés » qui fait la part belle aux instruments à vent. Qui dit instruments à vent, dit embouchures, et c’est très cher des embouchures !

Ils ont donc mis au point une embouchure qui pourrait être réalisée à un prix raisonnable et ont trouvé un partenaire industriel pour lancer la production.

Résultats des courses, en 2011, 4300 de ces embouchures ont été vendues et ont permis aux enfants de créer leur propre instrument et de jouer avec ! Tout en permettant aux étudiants d’avoir une expérience sur le terrain et de tisser un réseau au sein des collectivités locales, leurs futurs employeurs potentiels.

Je suis donc allé à cette journée en attendant d’incroyables innovations pédagogiques grâce aux TICE alors que la véritable innovation pédagogique de la journée, c’est un projet de partenariat entre une école, des collectivités territoriales et des partenaires privées qui a permit à plusieurs enfants d’avoir la satisfaction de faire de la musique avec des instruments originaux créés de leurs petites mains.

Comme quoi, la révolution pédagogique n’est pas forcément là où l’on croit.

A la découverte de l’Ipad – épisode 1

Octobre 2010, notre bibliothèque fait l’acquisition de 20 liseuses Cybook Orizon. En parallèle, on prend un abonnement à la bibliothèque numérique ENI (j’y reviendrai dans un autre article sur ENI….) et aux collections Repères et Que sais-je de Cairn.

Bien tout ça, mais les Cybook Orizon ne peuvent pas se connecter à notre wifi sécurisé WPA2 (il ne reconnait que le WEP) et ENI tout comme Cairn ne proposent pas de pouvoir charger les documents sur la liseuse.

Après 10 mois pendant lesquels le personnel s’est amusé a testé ces liseuses, retour au carton donc.

Et nouvelle idée génialissime : puisque ces liseuses ne nous donnent pas satisfaction et plutôt  que de perdre le budget prévu pour le portail, on va acheter des Ipad !

J’ai reçu le premier ce mardi, et cet objet, que je trouvais totalement inutile avant d’en avoir un dans les mains, je le trouve déjà indispensable après moins de 24h d’utilisation. En revanche, il reste assez inutile en ce qui concerne la consultation de nos collections numériques !

Bibliothèque numérique ENI : pas de problème, ça fonctionne et je dois avouer que je trouve qu’elle a un certain potentiel sur Ipad.

Par contre pour Cairn… ils ont eu la brillante idée de génie de privilégier une visionneuse flash, qui bien sûr n’existe pas sur Ipad, guéguerre Apple-Adobe oblige !

Donc on a le choix entre :

– ne les prêter qu’aux étudiants « scientifiques » (ENI est un éditeur de livres d’informatique)

– les prêter comme on prête des ordinateurs portables, en laissant tomber l’idée de mettre en valeur nos collections numériques

– laisser le personnel s’amuser avec les tester pendant 10 mois avant de les remettre dans le carton

Ce qui pose problème avec les contenus numériques achetés par les bibliothèques, ce ne sont pas les flacons, ce sont les contenus que l’on n’arrive pas à verser dedans…

Il suffira d’un tweet…

30 novembre, jour où j’ai décidé de me lancer… il paraît que « un blog s’ouvre en 5 minutes »….

Je ne l’ai pas crié tout de suite, n’étant pas satisfait du visuel, du nom, du nombre de billet…. et donc, bien sûr, j’étais tranquille quant au nombre de visites.

 

Sauf que j’ai été démasqué par @amyviolet😉 et qu’avec un tout petit tweet, je me retrouve propulsé à 49 consultations en quelques heures. Je n’en espérais pas autant avant quelques semaines….

Lancement officiel donc, il me reste plus qu’à assurer des publications quotidiennes régulières, et accessoirement de trouver un vrai visuel et un vrai nom !

[Crédits photo : Runner Jenny – Licence Creative Common NC-BY-SA]