Issuu on Google+

ATELIER TECHNIQUE NETVIBES Par Pierre Chicoine Formation continue de la CBPQ Lundi 22 mars 2010

Ce document facilitera le volet pratique de la formation.

INTRODUCTION

2

CRÉATION DU COMPTE

3

AJOUT DU CONTENU – VUE D’ENSEMBLE

6

AJOUT DU CONTENU – FIL RSS

7

SURVOL DES WIDGETS ESSENTIELS

9

SÉLECTION DE WIDGETS

11

AJOUT DU CONTENU – CALENDRIER GOOGLE

13

AJOUT DU CONTENU – LISTE DE PARTAGE DE GOOGLE READER

14

AJOUT DU CONTENU – DELICIOUS

15

CRÉATION DE VOTRE PAGE PUBLIQUE – « UNIVERS »

16

PRÉSENTATION GÉNÉRALE DE VOTRE UNIVERS

18

CRÉER UN WIDGET SIMPLE

21

EXEMPLE D’UN WIDGET POUR INTERROGER UN CATALOGUE

22

Pour des exemples et une sélection de ressources : http://www.netvibes.com/bibliofusion

1


INTRODUCTION Pour l’internaute Netvibes offre un service gratuit de pages personnalisables privées vous permettant de suivre l'actualité de vos sites préférés, de rassembler votre présence dans les réseaux sociaux et d’utiliser de nombreuses applications. Avec Netvibes, vous consultez sur une seule et unique page les actualités, contenus et services de vos sites préférés. L’objectif est de sauver du temps à l’internaute et lui faciliter la vie. Exemples : - Fils RSS (actualités, blogues, périodiques électroniques, etc) - Vos comptes Facebook, Twitter ou autres - Un large éventail de Widgets (contraction de fenêtre et gadget en anglais) Pour les éditeurs Netvibes permet de créer des pages personnalisables publiques permettant de mettre en valeur votre contenu ainsi que des Widgets qui seront proposés aux internautes. L’objectif est de faciliter la diffusion de contenus auprès des internautes. À quoi ça sert ? Netvibes vous permet de créer gratuitement un portail personnalisé, à partir duquel vous pourrez accéder à toutes les informations que vous recherchez lorsque vous vous connectez sur le Web : courriels, météo, recherche d'images, etc. Netvibes est notamment indispensable pour suivre l'actualité de vos sites préférés (blogs ou sites des médias par exemple). En effet, jusqu'ici, pour savoir s'il y avait du nouveau sur vos sites favoris, vous alliez les visiter régulièrement : cette opération pouvait vous prendre beaucoup de temps ! Anatomie d’une compte Netvibes Netvibes se compose de plusieurs widgets que l’on assemble dans un ou plusieurs onglets. Les widgets peuvent contenir des flux RSS proposant des liens vers différents éléments de contenus d'un site, diffuse des informations ciblées comme la météo ou proposer des applications : dictionnaires, moteurs de recherche, listes de tâches, etc. Constitué de pages sous forme d’onglets Chaque page est constituée de widgets que l’on peut déplacer très simplement Très simple pour ajouter ses fils RSS et par la suite les consulter La simplicité est la principale force de Netvibes

2


CRÉATION DU COMPTE Sur le site http://www.netvibes.com ou toute page publique de Netvibes. Cliquez sur Me connecter ou l’icône Inscrivez-vous

Remarque : pour un Netvibes institutionnel, utilisez de préférence une adresse dédiée au service (peutêtre un alias)

Confirmation

3


4


La page privée de Netvibes est générée avec des suggestions de contenu. Reste à la personnaliser !

L’affichage de chaque onglet peut être modifié d’un simple clic (ou supprimé)

5


AJOUT DU CONTENU – VUE D’ENSEMBLE

Les widgets sont recommandés en fonction de votre région ou de votre utilisation de Netvibes

Plusieurs catégories sont offertes

Les widgets les plus courants sont regroupés

Le fil (flux) RSS est un des éléments essentiels pour les bibliothèques.

6


AJOUT DU CONTENU – FIL RSS

Se fait en 2 clics !

Vous pouvez contrôler l’affichage et le comportement du fil RSS

7


Plusieurs vues sont disponibles, notamment pour agrĂŠmenter avec des images.

8


SURVOL DES WIDGETS ESSENTIELS Rédigez vos notes sur ce petit pense-bête.

Le widget Liste de tâches vous permet facilement de suivre et d'organiser vos tâches quotidiennes par simple glissé-déposé.

Le widget e-calendrier vous permet de suivre les évènements et l'agenda des nombreux calendriers au format Ical disponibles sur Internet.

Le widget favoris vous permet de facilement sauvegarder et accéder à vos favoris Internet sur n'importe quel ordinateur depuis votre page privée.

Le widget liens vous permet de créer un widget pour vos favoris Internet avec une vignette.

Affichez une image de votre choix sur votre page Netvibes. Vous entrez l'adresse url de votre image ou envoyez là sur imageshack

Le widget BoxNet vous permet d'héberger, sauvegarder et de partager vos fichiers audio, video, texte, image etc. (jusqu'à 1Go gratuit)

9


Insérez votre code html

Soyez informé des mises à jour de votre compte et de ceux de vos amis avec ce widget Facebook

Avec ce widget Flickr regardez vos images préférés en ajoutant le tag de votre choix

Un vrai client Twitter intégré à Netvibes ! Lisez et envoyer des messages à vos contacts et à vos abonnés ("followers") et suivez leur mises à jour. Compatible avec les fonctions Re-tweet, message direct etc...

Le widget Page Web vous permet d'entrer l'url de la page web de votre choix et de l'afficher sur votre page Netvibes

Ce module sert à afficher une image ou du code HTML. Cliquez sur Éditer puis - pour une image, collez son url de type http://www....jpg - pour un widget, collez son code HTML

Ce module peut afficher n'importe quelle animation Flash. Cliquez sur Édition pour entrer l'URL de l'objet Flash

Pour accéder et gérer vos favoris Internet Delicious directement depuis votre page privée, vous y entrez votre nom d'utilisateur et votre mot de passe

10


SÉLECTION DE WIDGETS LIEN

Lien simple

Résultat

11


HTML

Vous avez un éditeur html simple d’utilisation (WYSIWYG)

Les Univers existants sont aussi de bonnes sources pour développer votre contenu.

12


AJOUT DU CONTENU – CALENDRIER GOOGLE

Il vous faut un compte GMail et un agenda partagé.

Le format ICAL permet un échange structuré de contenu.

Vous insérez L’URL Ical dans le Widget de calendrier.

13


AJOUT DU CONTENU – LISTE DE PARTAGE DE GOOGLE READER

Vous pouvez partager dans Netvibes les articles que vous partagez dans Google

14


AJOUT DU CONTENU – DELICIOUS

Tout compte delicious permet de créer des fils RSS. Vous pouvez sélectionner les « Tag » pour lesquelles vous désirez un fil RSS.

Vous ajoutez un flux.

Le résultat est en ordre chronologique inverse de l’ajout des signets à Delicious.

15


CRÉATION DE VOTRE PAGE PUBLIQUE – « UNIVERS »

Vous pouvez donnez un nom lié à votre établissement

16


Prévoyez normaliser la nomenclature si vous développez plusieurs Univers Netvibes. Donnez de préférence un nom spécifique, par exemple jeunes_biblioquebec plutôt que jeunes.

17


PRÉSENTATION GÉNÉRALE DE VOTRE UNIVERS

18


Des milliers de thèmes sont disponibles.

Même pour la littérature.

19


Vous pouvez choisir votre image (via Flickr ou Twitter)

20


CRテ右R UN WIDGET SIMPLE Sur la page des widgets

Un fil RSS peut se transformer en widget. Plusieurs fils peuvent aussi テェtre assemblテゥs

21


EXEMPLE D’UN WIDGET POUR INTERROGER UN CATALOGUE Tout widget a une page de présentation dans Netvibes : http://eco.netvibes.com/widgets/231486

22


Cette page permet d’identifier le fichier source qui est déposé sur le site Web de l’institution. Ce fichier est le cœur du Widget qui est disséminé dans les multiples environnements. http://www.bibl.ulaval.ca/widget/ariane_netvibe.html

L’approche des widgets de Netvibes : UWA Netvibes a développé Universal Widget API (UWA), une combinaison de XHTML et de JavaScript. Il permet de développer des Widgets en utilisant des langages existants du Web. Ils pourront être implantés dans tout environnement utilisant XHTML, CSS et JavaScript. Le secret : un namespace additionnel « widget » pour gérer la déclaration des préférences. UWA (Universal Widget API) affiche une promesse de taille : Développer votre Widget, et déployez le sur tous les supports (Netvibes, iGoogle, Windows Vista, Apple Dashboard, Live.com, iPhone, Opera, blogs, MySpace, etc.) grâce à une interface transformant votre XHTML vers du XHTML / XML reconnu par chaque portail pouvant interpréter votre Widget.

23


ENCODAGE (CODE SOURCE) DU WIDGET

Déclaration <?xml version=”1.0” encoding=”utf-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:widget=”http://www.netvibes.com/ns/”> <head> Personnalisation des métadonnées principales <meta http-equiv= »Content-Type » content= »text/html ; charset=UTF-8 »/> <meta name= »author » content= »Pierre Chicoine » /> <meta name= »description » content= »Chercher Ariane 2.0 de la Bibliothèque de l’Université Laval » /> <base href= »http ://www.bibl.ulaval.ca/ »/> <title> Bibliothèque de l’Université Laval – Ariane 2.0</title>

Présentation liée à Netvibes <meta name=”apiVersion” content=”2.0” /> <meta name=”debugMode” content=”true” /> <link rel=”stylesheet” type=”text/css” href=”http://www.netvibes.com/themes/uwa/style.css” /> <script type=”text/javascript” src=”http://www.netvibes.com/js/UWA/load.js.php?env=Standalone”></script> <link rel=”icon” type=”image/png” href=”http://www.netvibes.com/favicon.ico” /> </head><body> Requête du formulaire et fin du fichier <form target= »_blank » action= »http ://ariane2.bibl.ulaval.ca/ariane/?requete » method= »get » charset= »UTF-8 »> <input type= »text » size= »50 » maxlength= »200 » name= »requete » value= » » /> <select type= »hidden » name= »index »> <option value= »TZ »>Toutes les zones</option> <option value= »AU »>Auteur</option> <option value= »TI »>Titre</option> <option value= »TIP »>Titre de périodique</option> <option value= »SU »>Sujet</option> <option value= »CT »>Cote</option> </select> <input type= »submit » value= »Chercher » /></form> </body> </html>

Pour plus d’information, consultez la documentation de Netvibes : http ://netvibes.org/specs/uwa/current-work

24


Sans les métadonnées et la feuille de style, il ne reste que les balises liés au formulaire. <form target= »_blank » action= »http ://ariane2.bibl.ulaval.ca/ariane/?requete » method= »get » charset= »UTF-8 »> <input type= »text » size= »50 » maxlength= »200 » name= »requete » value= » » /> <select type= »hidden » name= »index »> <option value= »TZ »>Toutes les zones</option> <option value= »AU »>Auteur</option> <option value= »TI »>Titre</option> <option value= »TIP »>Titre de périodique</option> <option value= »SU »>Sujet</option> <option value= »CT »>Cote</option> </select> <input type= »submit » value= »Chercher » /></form>

Le cœur du Widget est le formulaire, constitué du code entre <form> et </form>

25


Soumettre un Widget Ă&#x20AC; partir de la page dâ&#x20AC;&#x2122;exploration des Widgets :

26


Vous identifiez votre Widget :

Et nâ&#x20AC;&#x2122;oubliez surtout pas de lui choisir des mots-clĂŠ !

27


Créer un Widget C’est une démarche très simple de créer un Widget multiflux, il vous faut simplement les fils RSS !

Si vous insérez un en-tête, celui-ci se positionne centré entre le nom du Widget et les onglets. (N’utilisez pas plus de 40 pixels de haut pour ne pas trop décaler le contenu)

28


Atelier technique Netvibes