Chez Google, les widgets sont des applications HTML et JavaScript qui peuvent être intégrées à des pages Web et à d'autres applications, y compris Sites. Ces gadgets permettent d'inclure du contenu externe et dynamique sur votre site, tel que des applications miniatures et des listes basées sur une base de données, avec du texte et des images pour une expérience utilisateur fluide.
Chaque page Google Sites est un conteneur de gadget potentiel. De plus, Sites propose une API Data que vous pouvez utiliser avec des gadgets pour créer des applications puissantes. Autrement dit, en tant que développeur de gadgets, vous pouvez tirer parti de l'API de la version classique de Sites afin de créer des outils attrayants pour les autres développeurs Web et leurs audiences, et pour votre propre usage.
Lorsque vous créez un gadget pour Sites, il est mis à la disposition de millions d'utilisateurs actifs. Il vous suffit de nous envoyer votre gadget pour qu'il apparaisse là où les utilisateurs pourront facilement parcourir, configurer et ajouter votre gadget sur leur site.
Maintenant que vous savez que {sites_name_short} est une excellente plate-forme de distribution pour votre gadget, qu'attendez-vous ? Commencez dès maintenant à créer des gadgets pour Google Sites !
Présentation du gadget Sites
Les gadgets sont de petits utilitaires qui génèrent ou extraient des informations externes dans des pages Web. Dans sa forme la plus simple, un gadget est un petit fichier .xml qui récupère des informations ayant la possibilité de les mettre à disposition sur plusieurs pages Web à la fois. Dans Sites, l'inclusion d'un gadget entraîne la création d'un iFrame servant de canal pour ces informations externes. Certains gadgets ne se limitent pas à cela, des iFrames qui transmettent des informations provenant d'un autre site Web.
Les gadgets plus avancés collectent du contenu dynamique et fournissent des applications interactives sur vos pages Sites. Consultez Exemple de gadget.
Les gadgets se composent des éléments suivants:
- Fichier de spécifications des gadgets : fichier .xml qui encapsule les fonctions HTML et JavaScript.
- Page du conteneur : page Web sur laquelle le gadget est inséré. Dans le cas présent, il s'agit d'un site Google.
- Source de données externe : cette source est facultative et peut se trouver au même emplacement que le fichier .xml, mais elle est souvent appelée par les spécifications du gadget sur HTTP pour fournir ses résultats.
Les gadgets conçus pour Google Sites peuvent être utilisés par tous les visiteurs d'un site. Ils sont généralement interactifs, axés sur l'extraction de contenu dynamique plutôt que sur la présentation, et sont conçus pour compléter le contenu du site.
Un gadget d'agenda est un bon exemple de cette distinction. Un gadget d'agenda personnalisé affichera probablement par défaut l'agenda de l'utilisateur connecté, tandis qu'un gadget d'agenda dans Sites permettra aux collaborateurs de choisir parmi plusieurs agendas liés à un lieu spécifique.
Les gadgets de Sites vous permettent de présenter plusieurs informations provenant de sources externes (par exemple, des diagrammes en direct provenant de tableaux de bord des performances distincts, mais associés) sur une seule page, avec un texte explicatif publié directement dans Sites. Cela permet de libérer de l'espace visuel tout en collectant des informations disparates sur le même sujet dans la même vue. Les gadgets vous permettent également d'inclure du contenu dynamique qui serait autrement empêché par les contrôles de sécurité de Sites.
Avertissement: Les gadgets créés avec l'ancienne
API Gadgets peuvent fonctionner dans Sites, mais ne sont pas officiellement compatibles. De même, les gadgets intégrés et basés sur des flux ne sont pas acceptés. Par conséquent, Google vous recommande de créer tous les gadgets Sites à l'aide de la version actuelle de widgets.* API. Lisez cet article pour en savoir plus:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Exemple de gadget
Voici un widget Inclure simple, mais populaire, qui ne se contente pas de fournir un iFrame permettant de transmettre d'autres contenus Web:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Include gadget (iframe)" title_url="http://sites.google.com/"
description="Include another web page in your Google Site"
thumbnail="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-thumb.png"
screenshot="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-ss.png"
height="800" width="600" author="Google">
<Require feature="dynamic-height"/>
</ModulePrefs>
<UserPref name="iframeURL" display_name="URL to content" required="true"/>
<UserPref name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
<EnumValue value="auto" display_value="Automatic"/>
<EnumValue value="no" display_value="No"/>
<EnumValue value="yes" display_value="Yes"/>
</UserPref>
<Content type="html" view="default,canvas">
<div id='dest'><img src="http://www.google.com/ig/images/spinner.gif"></div>
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(doRender);
function doRender(){
// setup variables
var prefs = new gadgets.Prefs();
var iframeURL = prefs.getString('iframeURL');
var scroll = prefs.getString('scroll');
var height = 800;
var width = 600;
if (gadgets.window) {
var viewport = gadgets.window.getViewportDimensions();
if (viewport.width) {
var width = viewport.width;
}
if (viewport.height) {
var height = viewport.height;
}
}
var iframe = document.createElement('iframe');
iframe.setAttribute('width', width + 'px');
iframe.setAttribute('height', height + 'px');
iframe.setAttribute('frameborder','no');
if(scroll){
iframe.setAttribute('scrolling', scroll);
}
iframe.setAttribute('src', iframeURL);
// set the slideshow to the placeholder div
var dest = document.getElementById('dest');
dest.innerHTML = '';
dest.appendChild(iframe);
}
</script>
</Content>
</Module>
Reportez-vous à la section Premiers pas: gadgets*. pour obtenir une description complète des tags de gadget et du contenu attendu.
Hébergement de votre gadget
Quelle que soit la fonction de votre gadget, ses fichiers doivent se trouver sur le World Wide Web pour que ceux-ci puissent être trouvés et utilisés. N'importe quel emplacement en ligne accessible via HTTP sans authentification fera l'objet d'une authentification. N'oubliez pas que votre gadget devra être publié dans un annuaire public pour être sélectionné. Sinon, les utilisateurs doivent l'intégrer en insérant directement son URL.
Voici les options d'hébergement de vos gadgets:
- App Engine : capable de stocker tous les fichiers requis par vos gadgets. Nécessite une configuration, à savoir la création de projets et les importations de fichiers ultérieures. Mais il s'adaptera facilement à un grand nombre d'utilisateurs. Vous pouvez créer une application pour stocker tous vos gadgets et une autre pour traiter les fichiers statiques, y compris un fichier app.yaml ressemblant à ceci:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Si vous placez tous les fichiers de gadget dans le répertoire statique, vous pouvez ensuite les modifier dans votre répertoire local et les déployer dans App Engine à chaque modification. Si vous disposez d'un fichier /static/widget.xml, son URL est la suivante: http://<nom-de-votre-appli>.appspot.com/static/widget.xml
- N'importe quel emplacement en ligne de votre choix : entièrement sous votre contrôle, mais aussi sous votre entière responsabilité. Les temps d'arrêt sur votre serveur peuvent entraîner l'indisponibilité de vos gadgets.
Création de votre gadget
Les gadgets sont constitués de code HTML et (éventuellement) de JavaScript, Flash ou Silverlight encapsulés en XML. Le Guide du développeur de gadgets fournit toutes les informations nécessaires pour créer vos propres gadgets. En outre, les modèles OpenSocial peuvent être utilisés pour créer rapidement des applications de réseau social dans des gadgets.
Voici les grandes étapes de la création d'un gadget pour Google Sites:
- Choisissez l'emplacement d'hébergement de votre gadget. Pour obtenir la description des différentes options disponibles, consultez la section Héberger votre gadget .
- Créez un fichier .xml qui servira de spécification à l'aide de l'éditeur de texte de votre choix.
- Déterminez le type de contenu (HTML ou URL), puis spécifiez-le dans le fichier .xml du gadget, comme suit:
<Content type="html">
Il s'agit presque toujours de code HTML, qui suppose que tout le contenu est fourni directement dans le fichier .xml. Toutefois, si vous avez l'intention de fournir le contenu dans un fichier distinct, utilisez le type de contenu URL. Consultez la page Choisir un type de contenu pour obtenir une description complète des différences entre les deux. - Créez du contenu dans le fichier .xml du gadget ou dans des fichiers distincts appelés par la spécification. Pour découvrir comment examiner des gadgets existants, reportez-vous à la section Afficher des exemples de gadgets.
- Définissez les préférences de base du gadget que les utilisateurs pourront modifier. Pour obtenir des instructions, consultez l'article Définir les préférences utilisateur. Pour fournir une configuration plus avancée, consultez la section Autoriser la configuration utilisateur avancée.
- Définissez des préférences de module que seul l'auteur du gadget peut modifier. Pour en savoir plus, consultez l'article Définir des préférences de gadget.
- Testez le gadget. Pour obtenir des instructions, reportez-vous à la section Test de votre gadget.
Intégration de votre gadget
Vous pouvez intégrer des gadgets dans les pages Sites en les sélectionnant dans l'annuaire des gadgets Google Sites (qui est synchronisé avec l'annuaire de gadgets iGoogle) ou en incluant son URL directement.
Pour intégrer un gadget dans Google Sites:
- Accédez à la page Sites contenant le nouveau gadget.
- Ouvrez la page pour la modifier.
- Sélectionnez Insertion > Autres gadgets.
- Recherchez le gadget, sélectionnez-le dans les catégories situées à gauche, ou cliquez sur Ajouter un gadget à partir d'une URL et collez l'URL dans votre fichier .xml. Cliquez ensuite sur Ajouter.
Conseil: La même méthode "Ajouter un gadget en fonction d'une URL" peut être utilisée pour intégrer des gadgets iGoogle et partout ailleurs en ligne. - Indiquez les dimensions du gadget, faites votre choix parmi les paramètres disponibles, puis cliquez sur OK. Le gadget est ajouté à votre page.
- Enregistrez la page pour afficher et tester votre gadget sur le site.
Test de votre gadget
Une fois votre gadget créé, vous devez le tester minutieusement avant de l'utiliser et d'autoriser d'autres personnes à en faire de même. Testez votre gadget manuellement en créant un ou plusieurs sites Google Sites de test et en l'intégrant. Pour connaître la procédure à suivre, consultez la section Intégrer votre gadget. Les fonctionnalités et l'apparence de votre gadget dépendent du site sur lequel il est installé. Par conséquent, le meilleur moyen de déboguer votre gadget consiste à le tester dans le contexte d'un site Google réel. Essayez de passer d'un thème Google Sites à un autre pour vous assurer que votre gadget s'affiche correctement dans chacun d'eux.
En testant votre gadget, vous découvrez inévitablement des bugs et devez apporter des corrections au fichier .xml de votre gadget. Vous devez désactiver la mise en cache des gadgets lorsque vous modifiez le code XML. Sinon, les modifications n'apparaîtront pas sur la page. Les spécifications des gadgets sont mises en cache sauf si vous demandez à Google Sites de ne pas le faire. Pour contourner la mise en cache pendant le développement, ajoutez ce qui suit à la fin de l'URL de la page Sites contenant le gadget (et non à l'URL du fichier .xml contenant les spécifications du gadget):
?nocache=1
Google Sites fournit une interface utilisateur standard permettant d'ajouter et de configurer des gadgets. Lorsque vous ajoutez un gadget, celui-ci affiche un aperçu et présente tous les paramètres UserPref qui peuvent être configurés. Testez la mise à jour de différentes valeurs de configuration et l'ajout de votre gadget à votre site de test. Vérifiez que votre gadget fonctionne comme prévu sur le site. Vous devez vérifier que les UserPref que vous avez définies peuvent être correctement configurées par l'administrateur du site.
Reportez-vous ensuite à la section Préparation en vue de la publication de l'article Publier votre gadget pour connaître les autres tests à effectuer.
Autoriser la configuration utilisateur avancée
Il est possible que tous les gadgets offrent la possibilité de définir des préférences utilisateur de base, via la section UserPref du fichier de spécifications du gadget. Ils concernent généralement les dimensions, les barres de défilement, les bordures, les titres et les paramètres spécifiques aux gadgets, comme le montre la capture d'écran ci-dessous:
Toutefois, dans de nombreux cas, les gadgets bénéficient de préférences plus avancées que les composants UserPref standards. Les préférences doivent souvent inclure des fonctionnalités telles que la logique métier personnalisée, les validations ou les sélecteurs. L'interface générée à partir des sections UserPref du gadget accepte un nombre limité de types de données (chaîne, énumération, etc.). Il est donc impossible de valider des entrées telles que des URL ou des dates.
En outre, dans les conteneurs tels qu'iGoogle où le lecteur et l'éditeur sont identiques, les auteurs de gadgets peuvent disposer d'une configuration étendue dans le cadre de l'affichage standard. Dans Google Sites, le lecteur n'est pas toujours l'éditeur. Par conséquent, l'auteur du gadget ne peut pas garantir que l'utilisateur qui consulte le site a accès à la mise à jour des préférences. Les conteneurs de réseaux sociaux tels que Sites ne peuvent pas autoriser un utilisateur à modifier les préférences, mais uniquement l'auteur.
Dans Sites, l'interface de base des préférences des gadgets générée par UserPref peut être remplacée par une vue de la configuration dans laquelle de nombreux types de données et préférences supplémentaires peuvent être indiqués, comme dans la capture d'écran ci-dessous:
La vue de configuration s'affiche à la place des paramètres UserPref au moment de l'insertion ou de la modification. Elle vous permet de définir des préférences utilisateur à l'aide d'une interface personnalisée. Vous pouvez également utiliser des éléments d'entrée personnalisés, par exemple pour choisir une position sur une carte plutôt que saisir des coordonnées.
Les développeurs peuvent utiliser les API setprefs standards pour enregistrer les préférences dans cette vue. Pour en savoir plus, consultez la documentation de référence XML sur les gadgets et la section Enregistrement de l'état du cours sur les principes de base du développement. Ces vues permettent à l'application de conteneur de fournir des informations de configuration supplémentaires. Elles sont définies dans les fichiers de spécifications .xml du gadget qui suivent les sections UserPref, avec une balise d'ouverture ressemblant à ceci:
<Content type="html" view="configuration" preferred_height="150">
Par exemple, le gadget news.xml qui permet d'afficher la configuration ci-dessus contient cette section:
<Content type="html" view="configuration" preferred_height="300">
<style type="text/css">
.config-options {
margin: 10px;
}
.label {
font-weight: bold;
width: 35%;
vertical-align: top;
}
.gray {
color:#666666;
}
html {
font-family:arial,sans-serif;
font-size:0.81em;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5;
}
a:link, a:visited, a:active { text-decoration: none }
</style>
<img alt="Google Web Elements" src="http://www.google.com/webelements/images/web_elements_logo.gif"/>
<table class="config-options">
<tr>
<td align="left" class="label">Size:</td>
<td align="left">
<select id="size" onchange="Update()">
<option selected="selected" value="300x250">Medium rectangle (300x250)</option>
<option value="728x90">Leaderboard (728x90)</option>
</select>
</td>
</tr>
<tr>
<td align="left" class="label">Select sections:</td>
<td align="left">
<table>
<tbody><tr>
<td><input type="checkbox" onclick="Update()" id="sec_h" value="h"/> Top Stories</td>
<td><input type="checkbox" onclick="Update()" id="sec_w" value="w"/> World</td>
<td><input type="checkbox" onclick="Update()" id="sec_b" value="b"/> Business</td>
</tr><tr>
<td><input type="checkbox" onclick="Update()" id="sec_p" value="p"/> Politics</td>
<td><input type="checkbox" onclick="Update()" id="sec_n" value="n"/> Nation</td>
<td><input type="checkbox" onclick="Update()" id="sec_e" value="e"/> Entertainment</td>
</tr><tr>
<td><input type="checkbox" onclick="Update()" id="sec_t" value="t"/> Technology</td>
<td><input type="checkbox" onclick="Update()" id="sec_s" value="s"/> Sports</td>
<td><input type="checkbox" onclick="Update()" id="sec_m" value="m"/> Health</td>
</tr></tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="label">Or create one:</td>
<td align="left">
<input type="text" id="query" onchange="Update()"/>
<br/>
<span class="gray">Example: 2010 Olympics</span>
</td>
</tr>
<tr>
<td colspan="2">
<div id="preview" style="margin-top:10px;overflow:auto;width:100%;">
<iframe id="preview_ifr" frameborder="0" marginwidth="0" marginheight="0" border="0"
style="border:0;margin:0;"
scrolling="no" allowtransparency="true"></iframe>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var prefs = new gadgets.Prefs();
function getSelectedTopics() {
var selected = [];
var topics = ['h', 'w', 'b', 'p', 'n', 'e', 't', 's', 'm'];
for (var i = 0; i < topics.length; i++) {
if (document.getElementById('sec_' + topics[i]).checked) {
selected.push(topics[i]);
}
}
return selected.join(',');
}
function setSelectedTopics(selected) {
if (selected && selected.length >= 0) {
var topics = selected.split(',');
for (var i = 0; i < topics.length; i++) {
document.getElementById('sec_' + topics[i]).checked = true;
}
}
}
function Update() {
var topic = getSelectedTopics();
var query = document.getElementById('query').value;
var size = document.getElementById('size').value;
var url = 'http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&' +
'format=SIZE&element=true';
var iframe = document.getElementById('preview_ifr');
url = url.replace(/SIZE/, size);
if (topic.length > 0) {
url += '&topic=' + topic;
}
if (query.length > 0) {
url += '&q=' + encodeURIComponent(query);
}
iframe.src = url;
if (size == '728x90') {
iframe.style.width = '728px';
iframe.style.height = '90px'
} else {
iframe.style.width = '300px';
iframe.style.height = '250px';
}
prefs.set('size', size);
prefs.set('topic', topic);
prefs.set('query', query);
gadgets.window.adjustHeight();
}
function Initialize() {
var size = '__UP_size__';
if (size.length > 0) {
document.getElementById('size').value = size;
}
var query = '__UP_query__';
if (query.length > 0) {
document.getElementById('query').value = query;
}
setSelectedTopics('__UP_topic__');
Update();
}
gadgets.util.registerOnLoadHandler(Initialize);
</script>
</Content>
Vous trouverez cet exemple et d'autres gadgets propres à Sites avec des vues de configuration:
https://www.gstatic.com/sites-gadgets/news/news.xml
http://gadgets.pardonmyzinger.org/static/qrcode.xml
https://www.gstatic.com/sites-gadgets/news/youtube_news.xml
Respect des bonnes pratiques concernant les gadgets Google Sites
Les utilisateurs de sites veulent avoir une bonne apparence sur le Web. Suivez ces bonnes pratiques pour que votre gadget s'intègre parfaitement aux nombreux thèmes utilisés dans Sites. Pour plus de détails sur la création de gadgets, consultez la section Présentation des gadgets. Le reste de cette section présente les consignes propres aux gadgets Google Sites.
- Ne saisissez pas d'informations sensibles dans les spécifications ou les titres des gadgets, car ceux-ci peuvent être consultés par le public. Par exemple, n'incluez pas les noms des projets internes.
- Pour réduire la visibilité de votre gadget, ne l'envoyez pas dans l'annuaire de gadgets iGoogle ni dans tout autre service de listes publiques. Faites en sorte que tous les utilisateurs l'incluent uniquement via une URL. Vous pouvez également créer un gadget de type URL (plutôt que le type HTML standard contenant tous les contenus) qui appelle simplement un autre fichier pour son contenu. Avec cette option, seule l'URL du second fichier est exposée. Reportez-vous à la section Choix d'un type de contenu de la page Principes de base du développement pour connaître les différences entre les gadgets HTML et URL. Reportez-vous à la section Les gadgets sont publics de la page "Écrire vos propres gadgets" pour découvrir d'autres façons de masquer votre gadget.
- Plus important encore, testez votre gadget sur plusieurs sites différents. Modifiez la couleur d'arrière-plan, la couleur du texte et le type de police du site pour que votre gadget s'intègre parfaitement dans un large éventail de modèles.