« Web widget » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
 
(14 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{Ebauche}}  
{{Incomplet}}  


== Introduction  ==
== Introduction  ==
Cette article est largement une adaptation de l'article edutechwiki [[en:Web widget and mashup]] en anglais.


Un '''web widget''' est un bout de code portable qui peut être installé et configuré par un utilisateur dans une simple page HTML ou dans une application comme un [[Webtop]] ou encore dans une [[Plateforme sociale]]. Autres appelations pour un web widget sont ''gadget'', ''module'', ''capsule'', ''snippet'' et ''flake''.([http://en.wikipedia.org/wiki/Web_widget Web widget], Wikipedia, retrieved 19:58, 14 May 2007 (MEST)).  
Un '''web widget''' est un bout de code portable qui peut être installé et configuré par un utilisateur dans une simple page HTML ou dans une application comme un [[Webtop]] ou encore dans une [[Plateforme sociale]]. Autres appellations pour un web widget sont ''gadget'', ''module'', ''capsule'', ''snippet'' et ''flake''. ([http://en.wikipedia.org/wiki/Web_widget Web widget], Wikipedia, 2007.  


== Description et intérêt  ==
== Description et intérêt  ==


Un web widget est un bout de code qui peut être inséré dans un agrégateur de services web (page [[HTML]], [[Webtop|webtops]], [[Extension du bureau|extensions du bureau]], [[Plateforme sociale|plateformes sociales]], [[Environnement d'apprentissage personnel]], etc), qui fait un mélange (''mashup'') des différents service pour en créer un nouveau service.<br>
Un web widget est un bout de code qui peut être inséré dans un agrégateur de services web (page [[HTML]], [[Webtop|webtops]], [[Extension du bureau|extensions du bureau]], [[Plateforme sociale|plateformes sociales]], [[Environnement d'apprentissage personnel]], etc). Certains widgets font un mélange (''mashup'') de différents service pour en créer un nouveau service, par exemple placent des nouvelles sur une carte Google.


== Architecture et fonctions  ==
== Architecture et fonctions  ==


Les web widgets sont souvent dépendants d'un serveur qui livre les contenus des services tiers ([[RSS]], [[Rich internet application]]s) à travers un API qui permet d'afficher les contenus d'une source dans un autre. Les web widgets sont largement composés du [[HTML]] ou [[XHTML]], [[CSS]] et [[JavaScript]]. Les widgets qui simplement livre des contenus sont très populaires, p. ex. à 19:58, 14 May 2007 (MEST) [[Google desktop#Google_gadgets|Google gadgets]] compte plus de 6000, Widgetbox plus de 10000 et à 17:20, 8 mai 2009 (MEST)[[Yahoo widgets]] plus de 4000.  
Les web widgets sont souvent dépendants d'un serveur qui livre les contenus des services tiers ([[RSS]], [[Rich internet application]]s) à travers un API qui permet d'afficher les contenus d'une source dans un autre. Les web widgets sont largement composés du [[HTML]] ou [[XHTML]], [[CSS]] et [[JavaScript]]. Les widgets qui simplement livre des contenus sont très populaires. Déjà en may 2007, [[Google desktop#Google_gadgets|Google gadgets]] comptait plus de 6000, Widgetbox plus de 10000 et en mai 2009 [[Yahoo widgets]] plus de 4000.  


Les web widgets existent souvent comme parti des extension du bureau ou sont convertible d'un web widget à une extension de bureau (avec p. ex. [http://widgets.yahoo.com/widgets/widget-converter Yahoo Widget Converter].  
Les web widgets existent souvent comme parti des extension du bureau ou sont convertible d'un web widget à une extension de bureau (avec p. ex. [http://widgets.yahoo.com/widgets/widget-converter Yahoo Widget Converter].  


Ceci offre l'option à l'utilisateur d'utiliser un widget dans l'environnement, la plateforme et le support (ordinateur, appareil mobile, PDA, etc.) qui leur convient. Les widgets sont souvent disponibles  
Ceci offre l'option à l'utilisateur d'utiliser un widget dans l'environnement, la plateforme et le support (ordinateur, appareil mobile, PDA, etc.) qui leur convient. Les widgets sont souvent disponibles:


*à étre insérés dans un [[Webtop]] (via des fonctions drag/drop ou en cliquant les options)  
* à être insérés dans un [[Webtop]] (via des fonctions drag/drop ou en cliquant les options)  
*à étre insérés comme code dans un [[Webtop]] ou un blog  
* à être insérés comme code dans un [[Webtop]] ou un blog  
*à étre insérés comme code dans une page [[HTML]]
* à être insérés comme code dans une page [[HTML]]


== Exemples d'applications et d'utilisation  ==
== Exemples d'applications et d'utilisation  ==


=== Utiser des widgets ===
=== Utiliser des widgets ===


=== How to use widgets ===
Il existe plusieurs méthodes pour utiliser un widget. Certains sites incluent déjà des widgets internes. C'est le cas des [[Webtop]] par exemples. Les [[Plateforme sociale|plateformes sociales]] intègrent de plus en plus l'insertion des services personnalisés et mettent ainsi à disposition des widgets spécialisés.
La plupart des sites permettent ensuite d'importer des widgets externes, une opération qui nécessite parfois des connaissances techniques, c'est-à-dire il faut savoir copier/coller du code HTML. Ceci dit, certains répertoires de widgets ont des boutons pour insérer directement un widget dans une autre application web comme Facebook ou NetVibes.


Basically, an end-user has several choices (depending on the technology)
; '''Sites widgets'''
Il existe des dizaines, il faut faire attention à la qualité et toujours vérifier la source. Certains widgets peuvent présenter des dangers.


# Récuperer le code source à insérer du site qui offre le widget Get a widget insertion code from a widget site
* http://www.widgipedia.com/ (bon site)
* http://www.labpixies.com/
* http://www.widgetbox.com/
* http://www.widgetvalley.com/ (aussi en français)
* http://www.widgbox.com/ (en français)


* Sur ces sites il y a souvent une option "obtenir le code source" qui affichera un bout de code JavaScript à insérer dans une page web,un blog, un webtop, etc. Malheureusement il n'est pas facile On these sites, there is at least "get the code" button that will display some short JavaScript code which you then can insert into a web page, a blog, a webtop, etc. Unfortunately it's not so easy to find widgets of interest to educators, since the most popular widgets focus on specific information or games ...
; '''Récupérer le code source à insérer du site qui offre le widget'''


* Some of these web site have "add to" buttons, that will directly import a widget your desktop (e.g. MS Live), your [[webtop]] (Netvibes, iGoogle, Pageflakes, etc.), your social website (MySpace, Blogger, etc.).  
Sur ''les sites widgets'', il y a souvent une option "obtenir le code source" qui affichera un bout de code JavaScript à insérer dans une page web, un blog, un webtop, etc. Malheureusement il n'est pas facile de trouver des widgets intéressants aux éducateurs, car la plupart des widgets offrent simplement un résumé de contenus spécifiques (news feed, météo, etc.) ou ce sont des jeux.


* To quickly build your own good looking home page, use a generator, then insert JavaScript code. E.g. [http://www.web20generator.com web 2.0 generator] (note: this site was meant to be a bit of a joke, but it does generate nice looking pages ...)
Une fois obtenu le code source, il faut ensuite l'insérer dans le site cible. Avec un [[webtop]] c'est relativement facile. Typiquement, il faut chercher un widget interne au Webtop qui permet d'insérer du code HTML. Il peut s'appeler de façon très différent, par exemple "HTML" ou "Anything Flake" (Pageflakes). Dans [[Netvibes]], par exemple, le widget à utiliser pour inclure un widget externe s'appelle "HTML" (UWA Module).


; (2) Use a mashup maker, i.e. a service that supports assembly of widgets
Ensuite il faut copier le code sur le site widget (parfois il est affiché, parfois il faut appuyer sur un bouton "code", "embed", etc.
Webtops and similar software provide users with a larger set of widgets from which they then can compose an "Ajax start page". See:
* See [[webtop]], which usually are mashup-up tools for individual use. Also read about [[personal learning environment]]s that includes a story on how to build such a thing with a webtop.
* An increasing amount of [[social software]] services are configurable with extra widgets.
* Mashup tools for organizations (e.g. a teacher) that will allow you to create an half-baked environment for a group of people (e.g. learners). Without testing (!), [[User:Daniel K. Schneider|Daniel K. Schneider]] believes that [http://services.alphaworks.ibm.com/qedwiki/ QEDWiki] from IBM might be a good contender. "Enterprise mashups" ought to be more powerful, e.g include a safe data repository.


; (3) Use browser, application or OS-dependent widgets
Voici un exemple d'un code widget, une calculette trouvé sur LabPixies (Attention: les lignes sont coupées, normalement il faudrait copier/coller le code "tel quel"):
* Modern desktop applications like web browsers or desktops themselves also allow users to insert widgets that interact with the Internet. Typical examples are:
<source lang="xml">
* [http://en.wikipedia.org/wiki/Yahoo%21_Widget_Engine Yahoo! Widget Engine]
<script src="http://www.gmodules.com/ig/ifr
* [http://en.wikipedia.org/wiki/Google_Desktop Google Desktop]
?url=http://www.labpixies.com/campaigns/calc/calc.xml
* [http://en.wikipedia.org/wiki/KlipFolio KlipFolio]
&amp;up_calc_skin=3&amp;up_skinId=70&amp;synd=open&amp;w=320&amp;h=300
&amp;title=Calculette&amp;lang=fr&amp;country=ALL
&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
</source>


=== How to create widgets easily ===
; '''Exemple d'importation dans le webtop "Netvibes"'''


This is for people with a little HTML/XML/JS knowledge. Web Widgets often but not always use Adobe Flash or JavaScript programming languages. The widget code itself is usually small and connects to some server application.
(1) Une [http://www.widgipedia.com/web-widgets/details/multiutils/Scientific-Calculator_4078.html calculatrice trouvé sur Widgipedia].


* Some services have widget creation kits for a certain number of widgets. E.g. iGoogle allows you to create photos, "daily me", you tube channel, personal list...
[[image:widgipedia-calculator.png|frame|none|Widget Scientific Calculator sur Widgipedia]]
On copie le code "Wiget embed":
<source lang="xml">
<div id="wpdc_embed_12446382684" style="display: none">Scientific Calculator</div>
<head></head>
<script src=
"http://www.widgipedia.com/embed/multiutils/Scientific-Calculator_4078w-12446382684t-1244638268600i-0p.js">
</script>
</source>


* Services like [http://www.dapper.net/] dapper that allow you grab "any content from the web". Requires some technical skills.
Une fois obtenu ce code il faut le coller au bon endroit (par exemple une page HTML, un article de blog (en d'édition "source"), un widget "HTML" dans un webtop, etc.. Voici une capture d'écran de Netvibes (Juin 2009). En haut de l'image notre choix dans la palette des widgets (interne) de Netvibes, c'est à dire le "HTML" widget. En bas, le code collé dans ce widget qu'on vient d'ajouter. Étrangement, il s'appelle "UWA Module" et pas "HTML".


=== Mashup software for developers ===
[[image:netvibes-import-widget-2009.png|frame|none|Importation d'un widget dans Netvibes (Juin 2009)]]


According to [http://www.artima.com/weblogs/viewpost.jsp?thread=205160 Eric Armstrong], to create a mashup, you need:
Quelques sites ont des boutons qui permettent d'''ajouter'' facilement un widget à votre bureau (e.g. MS Live), votre gestionnaire [[Extension du bureau|extensions du bureau]] ([[Yahoo widgets]], [[Google desktop]], Dashboard, etc.), votre [[Webtop]] ([[Netvibes]], [[iGoogle]], [[Pageflakes]], etc.), ou votre [[Plateforme sociale]] (MySpace, Facebook, etc.).
* Web page GUI components and a GUI Builder (likely an [[AJAX]] tool).
* A communication mechanism, e.g. REST
* Data formats, e.g. [[microformat]]s, [[RSS]], [[JSON]]
* One or more data sources you can access
* Optionally, a data repository you can interact with


Programmers may use published APIs (see for example the list in [http://www.webmashup.com/ Webmashup.com]). To build the mashup itself, developers may use a so-called [[AJAX]] development kit, but recently '''mashup development kits''' came into existence (see links below). Some of these are relatively simple to use others less it seems. I.e. it seems to me that there is some grey zone between mashup builders meant for end-users, for web designers in organizations, for people with some [[scripting language|scripting]] knowledge and for "real programmers".
=== Comment créer son propre widget  ===


To program webservices plus associated libraries/widgets is another issue.
Ceci est pour ceux qui ont un peu de connaissances en HTML/XML/JS/PHP/etc. Les Web Widgets utilisent souvent (mais pas toujours) les langages de programmation Adobe Flash ou JavaScript. Le code source d'un widget en soi est souvent court et connecte à une application de serveur.  


Plusieurs services offre des kits de création de widget. Quelques exemples:


*[http://www.widgetbox.com/create/create_widget.jsp Widgetbox] permet de créer widgets en plusieurs types de contenus (Flash, HTML/JS, Remote, Blog/Feed, ou un Google gadget).
* [http://fr.widgadget.com/ WidGadget], un autre outil en ligne (gratuit pour des contenus simples comme un fils RSS).
; '''Utiliser un agrégateur de widgets (mashup maker)'''
Il existe des outils pour faire soi-même des widgets à partir de certains contenus (comme les fils RSS).


== Liens et bibliographie  ==
== Liens et bibliographie  ==
; En Français
* [http://fr.wikipedia.org/wiki/Widget_interactif Widget interactif] (Wikipedia)


;En Anglais
;En Anglais
Ligne 80 : Ligne 96 :
*[[:en:Web widget|Web widget]] (Edutechwiki)
*[[:en:Web widget|Web widget]] (Edutechwiki)


[[Category:Atelier_webmaster_web_2.0]]
[[Category:Atelier_webmaster_web_2.0]] [[en:Web widget and mashup|en:Web widget and mashup]]

Dernière version du 2 octobre 2014 à 09:42

Introduction

Un web widget est un bout de code portable qui peut être installé et configuré par un utilisateur dans une simple page HTML ou dans une application comme un Webtop ou encore dans une Plateforme sociale. Autres appellations pour un web widget sont gadget, module, capsule, snippet et flake. (Web widget, Wikipedia, 2007.

Description et intérêt

Un web widget est un bout de code qui peut être inséré dans un agrégateur de services web (page HTML, webtops, extensions du bureau, plateformes sociales, Environnement d'apprentissage personnel, etc). Certains widgets font un mélange (mashup) de différents service pour en créer un nouveau service, par exemple placent des nouvelles sur une carte Google.

Architecture et fonctions

Les web widgets sont souvent dépendants d'un serveur qui livre les contenus des services tiers (RSS, Rich internet applications) à travers un API qui permet d'afficher les contenus d'une source dans un autre. Les web widgets sont largement composés du HTML ou XHTML, CSS et JavaScript. Les widgets qui simplement livre des contenus sont très populaires. Déjà en may 2007, Google gadgets comptait plus de 6000, Widgetbox plus de 10000 et en mai 2009 Yahoo widgets plus de 4000.

Les web widgets existent souvent comme parti des extension du bureau ou sont convertible d'un web widget à une extension de bureau (avec p. ex. Yahoo Widget Converter.

Ceci offre l'option à l'utilisateur d'utiliser un widget dans l'environnement, la plateforme et le support (ordinateur, appareil mobile, PDA, etc.) qui leur convient. Les widgets sont souvent disponibles:

  • à être insérés dans un Webtop (via des fonctions drag/drop ou en cliquant les options)
  • à être insérés comme code dans un Webtop ou un blog
  • à être insérés comme code dans une page HTML

Exemples d'applications et d'utilisation

Utiliser des widgets

Il existe plusieurs méthodes pour utiliser un widget. Certains sites incluent déjà des widgets internes. C'est le cas des Webtop par exemples. Les plateformes sociales intègrent de plus en plus l'insertion des services personnalisés et mettent ainsi à disposition des widgets spécialisés. La plupart des sites permettent ensuite d'importer des widgets externes, une opération qui nécessite parfois des connaissances techniques, c'est-à-dire il faut savoir copier/coller du code HTML. Ceci dit, certains répertoires de widgets ont des boutons pour insérer directement un widget dans une autre application web comme Facebook ou NetVibes.

Sites widgets

Il existe des dizaines, il faut faire attention à la qualité et toujours vérifier la source. Certains widgets peuvent présenter des dangers.

Récupérer le code source à insérer du site qui offre le widget

Sur les sites widgets, il y a souvent une option "obtenir le code source" qui affichera un bout de code JavaScript à insérer dans une page web, un blog, un webtop, etc. Malheureusement il n'est pas facile de trouver des widgets intéressants aux éducateurs, car la plupart des widgets offrent simplement un résumé de contenus spécifiques (news feed, météo, etc.) ou ce sont des jeux.

Une fois obtenu le code source, il faut ensuite l'insérer dans le site cible. Avec un webtop c'est relativement facile. Typiquement, il faut chercher un widget interne au Webtop qui permet d'insérer du code HTML. Il peut s'appeler de façon très différent, par exemple "HTML" ou "Anything Flake" (Pageflakes). Dans Netvibes, par exemple, le widget à utiliser pour inclure un widget externe s'appelle "HTML" (UWA Module).

Ensuite il faut copier le code sur le site widget (parfois il est affiché, parfois il faut appuyer sur un bouton "code", "embed", etc.

Voici un exemple d'un code widget, une calculette trouvé sur LabPixies (Attention: les lignes sont coupées, normalement il faudrait copier/coller le code "tel quel"): 

<script src="http://www.gmodules.com/ig/ifr
?url=http://www.labpixies.com/campaigns/calc/calc.xml
&amp;up_calc_skin=3&amp;up_skinId=70&amp;synd=open&amp;w=320&amp;h=300
&amp;title=Calculette&amp;lang=fr&amp;country=ALL
&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
Exemple d'importation dans le webtop "Netvibes"

(1) Une calculatrice trouvé sur Widgipedia.

Widget Scientific Calculator sur Widgipedia

On copie le code "Wiget embed": 

<div id="wpdc_embed_12446382684" style="display: none">Scientific Calculator</div>
<head></head>
<script src=
"http://www.widgipedia.com/embed/multiutils/Scientific-Calculator_4078w-12446382684t-1244638268600i-0p.js">
</script>

Une fois obtenu ce code il faut le coller au bon endroit (par exemple une page HTML, un article de blog (en d'édition "source"), un widget "HTML" dans un webtop, etc.. Voici une capture d'écran de Netvibes (Juin 2009). En haut de l'image notre choix dans la palette des widgets (interne) de Netvibes, c'est à dire le "HTML" widget. En bas, le code collé dans ce widget qu'on vient d'ajouter. Étrangement, il s'appelle "UWA Module" et pas "HTML".

Importation d'un widget dans Netvibes (Juin 2009)

Quelques sites ont des boutons qui permettent d'ajouter facilement un widget à votre bureau (e.g. MS Live), votre gestionnaire extensions du bureau (Yahoo widgets, Google desktop, Dashboard, etc.), votre Webtop (Netvibes, iGoogle, Pageflakes, etc.), ou votre Plateforme sociale (MySpace, Facebook, etc.).

Comment créer son propre widget

Ceci est pour ceux qui ont un peu de connaissances en HTML/XML/JS/PHP/etc. Les Web Widgets utilisent souvent (mais pas toujours) les langages de programmation Adobe Flash ou JavaScript. Le code source d'un widget en soi est souvent court et connecte à une application de serveur.

Plusieurs services offre des kits de création de widget. Quelques exemples:

  • Widgetbox permet de créer widgets en plusieurs types de contenus (Flash, HTML/JS, Remote, Blog/Feed, ou un Google gadget).
  • WidGadget, un autre outil en ligne (gratuit pour des contenus simples comme un fils RSS).
Utiliser un agrégateur de widgets (mashup maker)

Il existe des outils pour faire soi-même des widgets à partir de certains contenus (comme les fils RSS).

Liens et bibliographie

En Français
En Anglais
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Web_widget&oldid=38206 »