Chez Google, les gadgets sont des applications HTML et JavaScript qui peuvent être intégrées dans des et d'autres applications, y compris Sites. Ces gadgets offrent la possibilité d'inclure des données contenu dynamique de votre site, tel que des applications miniatures et des listes basées sur des bases de données, incorporées avec du texte et des images pour une expérience utilisateur fluide.
Chaque page Google Sites peut être un conteneur de gadgets potentiel. De plus, Google Sites propose API Data pouvant être utilisée conjointement avec des gadgets pour créer des applications performantes. Cela signifie qu'en tant que développeur de gadgets, vous pouvez utiliser l'API classique de Google Sites pour créer des outils attrayants pour les autres développeurs Web et leur audience : pour votre propre usage.
Lorsque vous créez un gadget pour Sites, il est mis à la disposition de millions d'utilisateurs actifs utilisateurs. Il vous suffit de nous envoyer votre gadget et il apparaîtra à un endroit où les utilisateurs pourront facilement parcourir, configurer et ajouter votre gadget à leur Sites.
Maintenant que vous savez que {sites_name_short} est une excellente plate-forme de distribution pour votre gadget, quels sont que vous attendez ? Commencez dès maintenant à créer des gadgets pour Sites !
Présentation du gadget Sites
De façon générale, les gadgets sont de petits utilitaires qui génèrent ou extraient des informations externes sur le Web . Dans sa forme la plus simple, un gadget est un petit fichier .xml qui récupère des informations avec le paramètre la possibilité de le rendre disponible sur plusieurs pages Web à la fois. Dans Google Sites, inclure les résultats d'un gadget dans un iFrame qui sert de canal pour ces informations externes. Certains gadgets ne sont plus que les cadres iFrame qui transmettent des informations provenant d'un autre site Web.
Des gadgets plus avancés collectent du contenu dynamique et fournissent des applications interactives dans vos pages Google Sites. Consultez la section Exemple de gadget.
Les gadgets se composent des éléments suivants:
- Fichier de spécification de gadget : fichier .xml encapsulant les fonctions HTML et JavaScript.
- Page du conteneur : page Web dans laquelle le gadget est inséré. Dans le cas présent, il s'agit d'un site Google.
- Source de données externe : facultatif et peut se trouver au même emplacement que le fichier .xml, mais il est souvent appelé par les spécifications du gadget via HTTP pour fournir ses résultats.
Gadgets conçus pour Sites peut être utilisé par tous les visiteurs d'un site. Elles sont généralement interactives et s'efforcent d'extraire dans un contenu dynamique plutôt que sur une présentation. Ils sont conçus pour compléter le contenu sur votre site.
Les gadgets d'agenda sont un bon exemple de cette distinction. Un gadget d'agenda personnalisé dans affichera probablement l'agenda de l'utilisateur connecté par défaut, alors qu'un gadget Agenda dans Sites peuvent permettre aux collaborateurs de faire leur choix parmi différents agendas associés à un lieu spécifique.
Les gadgets Google Sites vous permettent de présenter plusieurs types d'informations provenant de sources externes (par exemple, des diagrammes en direct de tableaux de bord de performances distincts, mais liés) sur une seule page, ainsi que texte explicatif publié directement dans Sites. Cela permet de gagner de la place visuelle lors de la collecte des informations disparates sur le même sujet dans la même vue. Les gadgets vous permettent également d'inclure contenus dynamiques qui seraient autrement bloqués par les contrôles de sécurité de Sites.
Avertissement: Les gadgets créés avec l'ancienne version
l'API Google Gadgets peut fonctionner dans Google Sites, mais ne sont pas officiellement prises en charge. Gadgets intégrés et basés sur les flux
ne sont pas non plus prises en charge. C'est pourquoi Google vous recommande de créer tous les gadgets Google Sites à l'aide de l'attribut
gadgets* actuels Compute Engine. Lisez ce post pour en savoir plus:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Exemple de gadget
Voici une fonctionnalité simple, mais populaire, d'Inclure le gadget, qui se contente 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>
Voir Premiers pas: gadgets.* API pour obtenir une description complète des balises de gadget et du contenu attendu.
Hébergement de votre gadget
Quelle que soit la fonction de votre gadget, ses fichiers doivent résider sur le Web pour être trouvés et utilisé. Tout emplacement en ligne accessible via HTTP sans authentification faire. N'oubliez pas que pour être sélectionné, votre gadget doit être publié dans un répertoire public. 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 certaine configuration, notamment la création de projets et l'importation de fichiers ultérieurs. Mais il peut facilement
s'adapter à un grand nombre d'utilisateurs. Vous pouvez créer une application pour stocker tous vos gadgets et une autre pour diffuser des fichiers statiques, y compris un fichier app.yaml ressemblant à celui-ci:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Si vous placez tous les fichiers de gadgets dans le répertoire statique, vous pouvez modifier les fichiers de votre répertoire local et les déployer sur App Engine à chaque modification. Si vous disposez d'un fichier /static/gadget.xml, son URL sera: http://<nom-de-votre-application>.appspot.com/static/gadget.xml
- N'importe quel emplacement en ligne de votre choix : ce service est entièrement contrôlé, l'entière responsabilité. Les temps d'arrêt de votre serveur peuvent entraîner une interruption pour les utilisateurs de vos gadgets.
Création de votre gadget
Les gadgets se composent simplement de code HTML et (éventuellement) 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 à suivre pour créer un gadget pour Google Sites:
- Déterminez où sera hébergé votre gadget. Consultez la section Hébergement de votre gadget pour connaître les options qui s'offrent à vous.
- Créez un fichier .xml qui fera office 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 du 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 l'article Choisir un type de contenu pour obtenir une description complète des différences entre les deux formats. - Créez du contenu dans le fichier .xml du gadget ou dans des fichiers distincts appelés par la spécification. Pour savoir comment examiner les gadgets existants, reportez-vous à la section Affichage d'exemples de gadgets.
- Définissez les préférences de base pour le gadget, qui peuvent être modifiées par les utilisateurs. Pour obtenir des instructions, consultez l'article Définition des préférences utilisateur. Pour fournir une configuration plus avancée, consultez la section Autoriser la configuration avancée des utilisateurs.
- Définissez les préférences du module que seul l'auteur du gadget peut modifier. Pour en savoir plus, consultez l'article Définition des préférences des gadgets.
- Testez le gadget. Pour obtenir des instructions, consultez la section Test de votre gadget.
Intégration de votre gadget
Vous pouvez intégrer les gadgets dans des pages Google Sites en les sélectionnant dans l'annuaire des gadgets de Google Sites (qui est synchronisé avec l'annuaire de gadgets iGoogle) ou en indiquant directement leur URL.
Pour intégrer un gadget dans Google Sites:
- Accédez à la page Google Sites qui contiendra le nouveau gadget.
- Ouvrez la page pour la modifier.
- Sélectionnez Insertion > Plus de gadgets.
- Recherchez le gadget, sélectionnez-le dans les catégories situées à gauche, ou cliquez sur Ajouter un gadget à partir de son URL et collez l'URL dans votre fichier .xml. Cliquez ensuite sur Ajouter.
Conseil: Vous pouvez utiliser la même méthode Ajouter un gadget par URL pour intégrer des gadgets à partir d'iGoogle ou de tout autre site en ligne. - Spécifiez les dimensions du gadget, faites votre choix parmi les paramètres disponibles et 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
Après avoir créé votre gadget, vous devez le tester minutieusement avant de l'utiliser et de permettre à d'autres personnes de faire de même. Testez votre gadget manuellement en créant un ou plusieurs sites Google Sites de test et en y intégrant les éléments suivants : votre gadget. Pour connaître la procédure détaillée, consultez la section Intégrer votre gadget. La le fonctionnement et l'apparence de votre gadget dépendent du site qui contient pour l'activer. Par conséquent, le meilleur moyen de déboguer votre gadget est de le tester dans le contexte d'une le véritable site Google. Essayez de changer de thème Google Sites pour vous assurer que votre gadget s'affiche correctement dans chacun d'eux.
Au fur et à mesure que vous le testerez, vous découvrirez inévitablement des bugs et devrez y apporter des corrections. dans le fichier .xml de votre gadget. Vous devez désactiver la mise en cache des gadgets en modifiant le code XML. Sinon, vos modifications n'apparaîtront pas sur la page. Sauf indication contraire de votre part dans Sites, les spécifications des gadgets sont mises en cache. Pour contourner la mémoire cache lors du 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 spécifications du gadget):
?nocache=1
Google Sites fournit une interface utilisateur standard pour ajouter et configurer des gadgets. Lorsque vous ajoutez un gadget, il affiche un aperçu et indique tous les paramètres UserPref pouvant être configurés. Tester la mise à jour de différentes valeurs de configuration
l'ajout de votre gadget à votre site de test. Vérifiez que votre gadget fonctionne comme prévu sur le
sur le site lui-même. Vous devez tester cela
les UserPref que vous avez définies peuvent être correctement configurées par l'administrateur du site.
Reportez-vous ensuite à la section Préparation pour la publication de la page "Publier votre gadget" pour effectuer d'autres tests.
Autoriser la configuration utilisateur avancée
Tous les gadgets peuvent offrir la possibilité de définir des préférences utilisateur de base, via la section UserPref du fichier de spécification du gadget. Ceux-ci ont généralement un impact sur les dimensions, les barres de défilement, les bordures, les titres et les paramètres spécifiques aux gadgets, comme illustré dans 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 n'accepte qu'un nombre limité de types de données (chaîne, énumération, etc.). Il est donc impossible d'effectuer la validation d'entrées telles que les URL ou les dates.
En outre, dans des conteneurs tels qu'iGoogle où le lecteur et l'éditeur sont identiques, les auteurs de gadgets peuvent étendre la configuration 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 ayant accès à la feuille de calcul aura accès aux préférences de mise à jour. Les conteneurs de réseaux sociaux tels que Sites ne peuvent pas autoriser tous les utilisateurs à modifier les préférences, seul l'auteur est autorisé.
Dans Sites, l'interface de base des préférences de gadget générée par UserPref peut être remplacée par une vue de configuration dans laquelle vous pouvez fournir de nombreuses préférences et types de données supplémentaires, comme dans la capture d'écran ci-dessous:
La vue "Configuration" s'affiche à la place des paramètres UserPref au moment de l'insertion ou de la modification. Elle vous permet de définir les préférences utilisateur à l'aide d'une interface personnalisée. Vous pouvez également disposer d'éléments d'entrée personnalisés, par exemple pour choisir une position sur une carte plutôt que de saisir des coordonnées sur la carte.
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 "Enregistrer l'état" de la page "Principes de base du développement". Ces vues, qui permettent à l'application de conteneur de fournir des informations de configuration supplémentaires, sont définies dans les fichiers de spécification XML du gadget qui suivent les sections UserPref, avec une balise d'ouverture semblable à celle-ci:
<Content type="html" view="configuration" preferred_height="150">
Par exemple, le gadget news.xml qui propose la vue de configuration ci-dessus contient la section suivante:
<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 ainsi que d'autres gadgets Google 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 meilleures pratiques pour les gadgets Sites
Les utilisateurs de sites veulent avoir une belle apparence sur le Web. Suivez ces bonnes pratiques pour que vos Le gadget se marie parfaitement avec les nombreux thèmes utilisés dans Google Sites. Voir Présentation des gadgets pour en savoir plus sur la création de gadgets. Le reste de cette section fournit des consignes spécifiques aux gadgets Google Sites.
- N'insérez pas d'informations sensibles dans les spécifications ou les titres des gadgets, car ils sont publics. Par exemple, n'incluez pas de noms de projets internes.
- Pour réduire la visibilité de votre gadget, ne l'envoyez pas à l'annuaire de gadgets iGoogle ni à tout autre service de référencement public. Demandez plutôt à tous les utilisateurs de l'inclure par URL uniquement. En outre, vous pouvez créer un gadget de type URL (au lieu du type HTML typique comprenant tout le contenu) qui appelle simplement un autre fichier pour son contenu. Avec cette option, seule l'URL du deuxième fichier est exposée. Consultez la section Choix d'un type de contenu dans Principes de base du développement pour connaître les différences entre les gadgets HTML et URL, et la section Les gadgets sont publics de la page Rédaction de vos propres gadgets pour découvrir d'autres façons de masquer votre gadget.
- Surtout, testez votre gadget sur différents sites. Modifiez la couleur d'arrière-plan, la couleur du texte et le type de police du site pour vous assurer que votre gadget se fonde dans un large éventail de modèles.