Bei Google sind Gadgets HTML- und JavaScript-Anwendungen, die in Webseiten und andere Anwendungen, einschließlich Google Sites, eingebettet werden können. Mit diesen Gadgets können Sie externe und dynamische Inhalte in Ihre Website einbinden, z. B. Miniaturanwendungen und datenbankgesteuerte Listen, die in Text und Bilder integriert sind, um eine nahtlose Nutzererfahrung zu bieten.
Jede Google Sites-Seite ist ein potenzieller Container für Gadgets. Darüber hinaus bietet Google Sites eine Daten-API, die in Kombination mit Gadgets verwendet werden kann, um leistungsstarke Anwendungen zu erstellen. Das bedeutet, dass Sie als Gadget-Entwickler die klassische Google Sites API nutzen können, um ansprechende Tools für andere Webentwickler und deren Zielgruppen sowie für Ihren eigenen Gebrauch zu erstellen.
Wenn Sie ein Gadget für Google Sites erstellen, wird es Millionen aktiver Nutzer zur Verfügung gestellt. Reichen Sie Ihr Gadget einfach bei uns ein. Es erscheint dann dort, wo Nutzer es ganz einfach durchsuchen, konfigurieren und zu ihren Websites hinzufügen können.
Sie wissen nun, dass {sites_name_short} eine großartige Plattform für die Verbreitung Ihres Gadgets ist. Worauf warten Sie also noch? Beginnen Sie jetzt mit der Entwicklung von Gadgets für Google Sites!
Google Sites-Gadget – Übersicht
Im Allgemeinen sind Gadgets kleine Dienstprogramme, die externe Informationen generieren oder auf Webseiten übertragen. In ihrer einfachsten Form ist ein Gadget eine kleine XML-Datei, die Informationen abruft, um sie auf mehreren Webseiten gleichzeitig verfügbar zu machen. Wenn du ein Gerät in Google Sites einschließt, wird ein iFrame geöffnet, der als Kanal für diese externen Informationen dient. Einige Gadgets sind genau das, nämlich iFrames, die Informationen von einer anderen Website weitergeben.
Mit fortschrittlichen Gadgets lassen sich dynamische Inhalte erfassen und interaktive Anwendungen auf Ihren Google Sites-Seiten bereitstellen. Siehe Beispiel-Gadget.
Gadgets bestehen aus den folgenden Komponenten:
- Gadget-Spezifikationsdatei: Eine XML-Datei, die HTML- und JavaScript-Funktionen umschließt.
- Containerseite: Die Webseite, auf der das Gerät eingefügt wird, in diesem Fall eine Google Sites-Website.
- Externe Datenquelle: Dies ist optional und kann sich am selben Speicherort wie die XML-Datei befinden .Sie wird jedoch häufig von der Gadget-Spezifikation über HTTP aufgerufen, um die Ergebnisse bereitzustellen.
Für Google Sites erstellte Gadgets können von allen Betrachtern einer Website verwendet werden. Sie sind meist interaktiv, beziehen sich auf dynamische Inhalte statt auf Präsentation und ergänzen den Inhalt der Website.
Ein Kalender-Gadget ist ein gutes Beispiel für diese Unterscheidung. Ein personalisiertes Kalender-Gadget in würde wahrscheinlich standardmäßig den Kalender des angemeldeten Nutzers anzeigen, während ein Kalender-Gadget in Google Sites Mitbearbeitern möglicherweise die Auswahl aus einer Vielzahl standortspezifischer Kalender ermöglicht.
Mit Google Sites-Gadgets können Sie verschiedene Informationen aus externen Quellen (z. B. Livediagramme von verschiedenen, aber zugehörigen Leistungsdashboards) auf einer einzigen Seite zusammen mit erklärendem Text präsentieren, der direkt in Google Sites veröffentlicht wird. Dies spart visuellen Platz und erfasst gleichzeitig unterschiedliche Informationen zum selben Thema in derselben Ansicht. In Gadgets können Sie auch dynamische Inhalte einbinden, die bei den Google Sites-Sicherheitsprüfungen andernfalls nicht berücksichtigt würden.
Warnung: Gadgets, die mit der alten Gadgets API erstellt wurden, funktionieren möglicherweise in Google Sites, werden aber offiziell nicht unterstützt. Integrierte und feedbasierte Gadgets werden ähnlich nicht unterstützt. Daher empfiehlt Google, alle Google Sites-Gadgets mit den aktuellen Gadgets.* zu erstellen. API. Eine Erläuterung finden Sie in diesem Beitrag:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Beispiel-Gadget
Hier ist ein einfaches, aber beliebtes Include-Gadget, das nur einen iFrame für die Weiterleitung von anderen Webinhalten bietet:
<?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>
Siehe Erste Schritte: Gadgets.* API.
Hosting Ihres Gadgets
Unabhängig von der Funktion Ihres Gadgets müssen sich die zugehörigen Dateien im World Wide Web befinden, damit sie gefunden und verwendet werden können. Jeder Online-Speicherort, auf den über HTTP ohne Authentifizierung zugegriffen werden kann, reicht aus. Denken Sie daran, dass Ihr Gadget in einem öffentlichen Verzeichnis veröffentlicht sein muss, um ausgewählt zu werden. Andernfalls müssen die Nutzer sie durch direktes Einfügen der URL einbetten.
Folgende Hosting-Optionen stehen zur Verfügung:
- App Engine – Kann alle für Ihre Gadgets erforderlichen Dateien speichern. Erfordert einige Einrichtungsschritte, insbesondere das Erstellen von Projekten und nachfolgende Dateiuploads. Es lässt sich jedoch problemlos auf eine große Anzahl von Nutzenden skalieren. Sie können eine Anwendung zum Speichern all Ihrer Gadgets und eine weitere zum Bereitstellen statischer Dateien erstellen, einschließlich einer app.yaml-Datei nach dem folgenden Muster:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Wenn Sie alle Gadget-Dateien im statischen Verzeichnis ablegen, können Sie die Dateien in Ihrem lokalen Verzeichnis bearbeiten und bei jeder Änderung in App Engine bereitstellen. Die URL der Datei /static/gadget.xml lautet: http://<your-app-name>.appspot.com/static/gadget.xml
- An jedem Onlinestandort Ihrer Wahl: Sie haben vollen Zugriff auf Ihre Kontrolle, sind jedoch auch selbst dafür verantwortlich. Eine Serverausfallzeit kann dazu führen, dass Nutzer Ihre Gadgets ausfallen.
Erstellen Ihres Gadgets
Gadgets bestehen nur aus HTML und (optional) JavaScript, Flash oder Silverlight, das in XML eingebettet ist. Im Gadget-Entwicklerhandbuch finden Sie alle wichtigen Informationen für die Erstellung Ihrer eigenen Gadgets. Darüber hinaus können OpenSocial verwendet werden, um schnell soziale Anwendungen in Gadgets zu erstellen.
Hier finden Sie die allgemeinen Schritte zum Erstellen eines Gadgets für Google Sites:
- Entscheiden Sie, wo Ihr Gerät gehostet wird. Im Abschnitt Gadget hosten finden Sie Beschreibungen der dafür verfügbaren Optionen.
- Erstellen Sie mit einem Texteditor Ihrer Wahl eine neue XML-Datei, die als Ihre Spezifikation dient.
- Legen Sie den Inhaltstyp (HTML oder URL) fest und geben Sie ihn in der XML-Datei des Gadgets wie folgt an:
<Content type="html">
Hierbei handelt es sich fast ausnahmslos um HTML, d .h., es wird davon ausgegangen, dass alle Inhalte direkt in der XML-Datei bereitgestellt werden. Wenn Sie den Inhalt jedoch in einer separaten Datei bereitstellen möchten, verwenden Sie den Inhaltstyp „URL“. Eine ausführliche Beschreibung der Unterschiede finden Sie unter Inhaltstyp auswählen. - Erstellen Sie Inhalte in der XML-Datei des Gadgets oder in separaten Dateien, die von der Spezifikation aufgerufen werden. Im Abschnitt Beispiel-Gadgets ansehen finden Sie Informationen zum Prüfen vorhandener Gadgets.
- Definieren Sie Grundeinstellungen für das Gadget, die von Nutzern geändert werden können. Anweisungen hierzu finden Sie unter Nutzereinstellungen definieren. Wenn Sie eine erweiterte Konfiguration bereitstellen möchten, lesen Sie den Abschnitt Erweiterte Nutzerkonfiguration zulassen.
- Moduleinstellungen definieren, die nur der Autor des Gadgets ändern kann. Weitere Informationen finden Sie unter Gadget-Einstellungen definieren.
- Testen Sie das Gerät. Eine Anleitung dazu finden Sie im Abschnitt Gadget testen.
Einbetten Ihres Gadgets
Sie können Gadgets in Google Sites-Seiten einbetten, indem Sie sie entweder aus dem Google Sites-Gadget-Verzeichnis auswählen, das mit dem iGoogle-Gadget-Verzeichnis synchronisiert ist, oder indem Sie die URL direkt angeben.
So betten Sie ein Gerät in Google Sites ein:
- Rufen Sie die Seite Websites auf, die das neue Gerät enthalten soll.
- Öffnen Sie die Seite zur Bearbeitung.
- Wählen Sie Einfügen > Weitere Gadgets aus.
- Suchen Sie nach dem Gadget, wählen Sie es aus den Kategorien auf der linken Seite aus oder klicken Sie auf Gadget per URL hinzufügen und fügen Sie die URL in Ihre XML-Datei ein. Klicken Sie dann auf Hinzufügen.
Tipp: Mit derselben Methode können Sie auch Gadgets aus iGoogle und anderen Websites einbetten. - Geben Sie die Abmessungen des Gadgets an, wählen Sie eine der verfügbaren Einstellungen aus und klicken Sie auf OK. Das Gadget wird Ihrer Seite hinzugefügt.
- Speichern Sie die Seite, um Ihr Gerät auf der Website anzuzeigen und zu testen.
Testen Ihres Gadgets
Nachdem Sie Ihr Gerät erstellt haben, sollten Sie es gründlich testen, bevor Sie es verwenden und anderen ermöglichen, dasselbe zu tun. Testen Sie Ihr Gerät manuell, indem Sie eine oder mehrere Google-Testwebsites erstellen und es einbetten. Die genauen Schritte finden Sie im Abschnitt Gadget einbetten. Die Funktionsweise und das Erscheinungsbild deines Gadgets hängen von der Website ab, auf der es enthalten ist. Die beste Methode zur Fehlerbehebung besteht daher darin, das Gadget im Kontext einer Google Sites-Website zu testen. Wechseln Sie zwischen verschiedenen Google Sites-Designs, um sicherzustellen, dass Ihr Gerät in jedem Design richtig angezeigt wird.
Beim Testen Ihres Gadgets werden Sie zwangsläufig Fehler entdecken und Sie müssen Korrekturen an der XML-Datei Ihres Gadgets vornehmen. Deaktivieren Sie daher das Speichern von Gadgets im Cache, während Sie die XML-Datei optimieren. Andernfalls werden Ihre Änderungen nicht auf der Seite angezeigt. Die Gadget-Spezifikationen werden im Cache gespeichert, sofern Sie dies nicht für Google Sites festlegen. Um den Cache bei der Entwicklung zu umgehen, fügen Sie Folgendes an das Ende der Seiten-URL der Google Sites-Seite an, die das Gadget enthält (und nicht an die URL der XML-Datei mit den Gadget-Spezifikationen):
?nocache=1
Google Sites bietet eine Standardbenutzeroberfläche zum Hinzufügen und Konfigurieren von Gadgets. Wenn Sie ein Gadget hinzufügen, wird eine Vorschau sowie alle UserPref-Parameter angezeigt, die konfiguriert werden können. Aktualisieren Sie verschiedene Konfigurationswerte und fügen Sie das Gerät Ihrer Testwebsite hinzu. Prüfen Sie, ob Ihr Gerät auf der Website selbst wie erwartet funktioniert. Du solltest testen, ob die von dir definierten UserPref vom Websiteadministrator richtig konfiguriert werden können.
Weitere Tests finden Sie im Abschnitt Veröffentlichung Ihres Gadgets vorbereiten.
Erweiterte Nutzerkonfiguration zulassen
Alle Gadgets können die Möglichkeit bieten, grundlegende Nutzereinstellungen festzulegen. Dies erfolgt über den UserPref-Abschnitt der Spezifikationsdatei des Gadgets. Diese wirken sich in der Regel auf Abmessungen, Bildlaufleisten, Rahmen, Titel und device-spezifische Einstellungen aus, wie im folgenden Screenshot dargestellt:
Es gibt jedoch viele Fälle, in denen Gadgets von erweiterten Einstellungen profitieren, als die standardmäßigen UserPref-Komponenten bieten. Einstellungen müssen häufig Funktionen wie benutzerdefinierte Geschäftslogik, Validierungen oder Auswahlen enthalten. Die über die Gadgets-UserPref-Abschnitte generierte Benutzeroberfläche unterstützt eine begrenzte Anzahl von Datentypen (String, Enum usw.), sodass Eingaben wie URLs oder Datumsangaben nicht validiert werden können.
Darüber hinaus können die Gadgets-Autoren in Containern wie iGoogle, in denen Viewer und Editor identisch sind, die Konfiguration als Teil der Standardansicht erweitern. Bei Google Sites ist der Betrachter nicht immer der Bearbeiter. Daher kann der Autor des Gadgets nicht garantieren, dass der anzeigende Nutzer Zugriff auf die Update-Einstellungen hat. Bei sozialen Containern wie Google Sites darf kein Nutzer die Einstellungen ändern, sondern nur den Autor.
In Google Sites kann die von UserPref generierte Oberfläche für die grundlegenden Einstellungen von Gadgets durch eine Konfigurationsansicht ersetzt werden, in der viele zusätzliche Einstellungen und Datentypen angegeben werden können, wie im folgenden Screenshot dargestellt:
Die Konfigurationsansicht wird beim Einfügen oder Bearbeiten anstelle der UserPref-Einstellungen angezeigt und ermöglicht Ihnen, Nutzereinstellungen über eine benutzerdefinierte Oberfläche festzulegen. Außerdem können Sie benutzerdefinierte Eingabeelemente verwenden, beispielsweise zum Auswählen einer Position auf einer Karte anstelle der Eingabe von Kartenkoordinaten.
Entwickler können die standardmäßigen setprefs APIs verwenden, um Einstellungen in dieser Ansicht zu speichern. Weitere Informationen finden Sie in der Gadgets XML-Referenz und im Abschnitt Speicherstatus in den Grundlagen für Entwickler. Diese Ansichten ermöglichen es der Containeranwendung, zusätzliche Konfigurationsinformationen bereitzustellen .Sie werden in den XML-Spezifikationsdateien des Gadgets hinter den UserPref-Abschnitten mit einem öffnenden Tag eingerichtet, das dem folgenden ähnelt:
<Content type="html" view="configuration" preferred_height="150">
Das Gadget news.xml, das die Konfigurationsansicht oben enthält, enthält beispielsweise folgenden Abschnitt:
<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>
Dieses Beispiel und andere Sites-spezifische Gadgets mit Konfigurationsansichten finden Sie hier:
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
Befolgen Sie die bewährten Vorgehensweisen für Google Sites-Gadgets.
Websitenutzer möchten im Web gut aussehen. Befolgen Sie diese Best Practices, damit sich Ihr Gadget nahtlos in die vielen Designs von Google Sites einfügen lässt. Weitere Informationen zum Erstellen von Gadgets finden Sie unter Gadgets-Übersicht. Der Rest dieses Abschnitts enthält Richtlinien, die speziell für Google Sites-Gadgets gelten.
- Geben Sie keine vertraulichen Informationen in den Spezifikationen oder Titeln von Gadgets an, da Ihr Gerät für die Öffentlichkeit sichtbar ist. Geben Sie beispielsweise keine internen Projektnamen an.
- Um die Sichtbarkeit Ihres Gadgets zu minimieren, reichen Sie es nicht an das iGoogle-Gadget-Verzeichnis oder einen anderen öffentlichen Dienst für Einträge ein. Lassen Sie alle Nutzer ihn stattdessen nur nach URL aufnehmen. Zusätzlich können Sie ein URL-Typ-Gadget erstellen (anstelle des typischen HTML-Typs, der alle Inhalte enthält), das lediglich eine andere Datei für seinen Inhalt aufruft. Bei dieser Durchleitungsoption wird nur die URL der zweiten Datei offengelegt. Informationen zu den Unterschieden zwischen HTML- und URL-Gadgets finden Sie im Abschnitt Inhaltstyp auswählen in den Grundlagen für Entwickler und im Abschnitt Gadgets sind öffentlich, wenn Sie Ihre eigenen Gadgets schreiben, werden weitere Möglichkeiten zur Maskierung Ihres Gadgets beschrieben.
- Das Wichtigste ist, dass Sie Ihr Gerät auf einer Reihe verschiedener Websites testen. Ändern Sie die Hintergrundfarbe, Textfarbe und Schriftart der Website, um sicherzustellen, dass sich Ihr Gerät in eine Vielzahl von Vorlagen einfügt.