Bei Google sind Gadgets HTML- und JavaScript-Anwendungen, die in Web-Apps eingebettet werden können: und anderen Apps, einschließlich Google Sites. Diese Gadgets bieten die Möglichkeit, externe und wie Minianwendungen und datenbankgesteuerte Listen, in Text und Bilder eingebunden, um eine nahtlose User Experience zu schaffen.
Jede Google Sites-Seite ist ein potenzieller Gadgets-Container. Darüber hinaus bietet Google Sites Data API, die in Verbindung verwendet werden kann mit Gadgets zum Erstellen leistungsstarker Anwendungen. Das bedeutet, dass Sie als Entwickler von Gadgets Nutzen Sie die klassische Google Sites API, um ansprechende Tools für andere Webentwickler und ihre Zielgruppen zu entwickeln, für Ihren eigenen Gebrauch.
Wenn Sie ein Gadgets für Google Sites erstellen, wird es für Millionen aktiver Nutzer Nutzer. Reichen Sie Ihr Gadgets einfach bei uns ein, und es wird angezeigt, wo Nutzer es ganz einfach durchsuchen, konfigurieren und zu ihren Websites.
Jetzt wissen Sie, dass {sites_name_short} eine hervorragende Vertriebsplattform für Ihr Gerät ist. auf die Sie gewartet haben? Beginnen Sie jetzt mit der Erstellung von Gadgets für Google Sites!
Google Sites-Gadgets
Im Allgemeinen sind Gadgets kleine Dienstprogramme, die externe Informationen generieren oder ins Web übertragen. Seiten. In ihrer einfachsten Form ist ein Gadgets eine kleine XML-Datei, die Informationen mit dem die Möglichkeit, sie auf mehreren Webseiten gleichzeitig verfügbar zu machen. In Google Sites, einschließlich der Suchergebnisse für Gadgets in einem iFrame, der als Kanal für diese externen Informationen dient. Einige Gadgets sind nicht mehr vorhanden. als iFrames, die Informationen von einer anderen Website übertragen.
Erweiterte Gadgets sammeln dynamischen Inhalt und bieten für interaktive Anwendungen in auf Ihren Google Sites-Seiten. 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 Gadgets eingefügt wird, in diesem Fall eine Google Sites-Website.
- Externe Datenquelle – Diese Datenquelle ist optional und kann sich am selben Speicherort wie die XML-Datei befinden, wird aber häufig von den Gadgets über HTTP aufgerufen, um die Ergebnisse bereitzustellen.
Gadgets für Websites können von allen Betrachtern einer Website verwendet werden. Sie sind meist interaktiv, nicht in der Präsentation, sondern in dynamischem Content. Sie ergänzen den Inhalt des 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 können Mitbearbeiter aus einer Vielzahl von standortspezifischen Kalendern auswählen.
Mit Google Sites-Gadgets können Sie verschiedene Informationen aus externen Quellen präsentieren (z. B. Live-Diagramme aus verschiedenen, aber verwandten Dashboards zur Leistungsüberwachung) auf einer einzigen Seite zusammen mit erklärenden Text, der direkt in Google Sites veröffentlicht wurde. So sparen Sie Platz beim Erfassen unterschiedliche Informationen zum selben Thema in derselben Ansicht. In Gadgets können Sie auch dynamische Inhalte, die sonst durch Google Sites-Sicherheitsprüfungen verhindert werden würden.
Warnung: Gadgets, die mit dem Legacy-Build erstellt wurden
Gadgets API funktionieren möglicherweise in Google Sites, werden aber offiziell nicht unterstützt. Integrierte und feedbasierte Gadgets
werden ebenfalls nicht unterstützt. Daher empfiehlt Google, alle Google Sites-Gadgets mithilfe der
aktuelle Gadgets.* die API verwenden. Eine Erklärung hierfür findest du 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 Gadget einschließen, das wenig mehr als einen iFrame zur Weiterleitung anderer Webinhalte bereitstellt:
<?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>
Weitere Informationen finden Sie unter Erste Schritte: Gadgets.* API finden Sie eine vollständige Beschreibung der Gadgets-Tags und erwarteten Inhalte.
Hosting Ihres Gadgets
Unabhängig von der Funktion Ihres Gadgets müssen die Dateien im World Wide Web gespeichert sein, damit sie gefunden und verwendet. Jeder Onlinestandort, auf den ohne Authentifizierung über HTTP zugegriffen werden kann, was Sie tun können. Denken Sie daran, dass Ihr Gerät in einem öffentlichen Verzeichnis veröffentlicht werden muss, damit es ausgewählt werden kann. Andernfalls müssen Nutzer die URL direkt einfügen, um sie einzubetten.
Dies sind Ihre Optionen für das Hosting von Gadgets:
- App Engine: Speichert alle Dateien, die für Ihre Gadgets erforderlich sind. Erfordert einige Einrichtungsschritte, insbesondere das Erstellen von Projekten und nachfolgende Dateiuploads. Aber es wird sich problemlos auf eine große Anzahl von Nutzenden skalieren lassen. Sie können eine Anwendung zum Speichern aller Ihrer Gadgets und eine weitere zum Bereitstellen statischer Dateien erstellen, einschließlich einer app.yaml-Datei nach folgendem 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 abgelegt haben, können Sie die Dateien in Ihrem lokalen Verzeichnis bearbeiten und jedes Mal, wenn Sie Änderungen vornehmen, in App Engine bereitstellen. Wenn Sie die Datei /static/gadget.xml haben, lautet deren URL: http://<Ihr-App-Name>.appspot.com/static/gadget.xml
- Beliebiger Onlinestandort: Sie haben die volle Kontrolle, volle Verantwortung. Ausfallzeiten auf Ihrem Server können zu einem Ausfall bei Nutzern Ihrer Gadgets führen.
Erstellen Ihres Gadgets
Gadgets bestehen aus HTML und (optional) JavaScript, Flash oder Silverlight, das in XML eingebunden ist. Der Gadget-Entwicklerleitfaden enthält alle notwendigen Details zum Erstellen eigener Gadgets. Darüber hinaus können mithilfe von OpenSocial-Vorlagen schnell soziale Anwendungen in Gadgets erstellt werden.
So erstellen Sie ein Google Sites-Gadget:
- Entscheiden Sie, wo Ihr Gadgets gehostet werden soll. Im Abschnitt Gadget hosten finden Sie Beschreibungen Ihrer Optionen.
- Erstellen Sie mit dem Texteditor Ihrer Wahl eine neue XML-Datei, die als Ihre Spezifikation dient.
- Entscheiden Sie sich für den Inhaltstyp (HTML oder URL) und geben Sie ihn in der XML-Datei des Gadgets an:
<Content type="html">
Dabei handelt es sich fast immer um HTML, bei dem der gesamte Inhalt direkt in der XML-Datei bereitgestellt wird. Wenn Sie den Inhalt in einer separaten Datei bereitstellen möchten, verwenden Sie den Inhaltstyp „URL“. Eine ausführliche Beschreibung der Unterschiede findest du 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 Möglichkeiten zum Überprüfen vorhandener Gadgets.
- Definieren Sie Grundeinstellungen für das Gadgets, die von den Nutzern geändert werden können. Anweisungen finden Sie unter Nutzereinstellungen definieren. Informationen zur erweiterten Konfiguration finden Sie im Abschnitt Erweiterte Nutzerkonfiguration zulassen.
- Definieren Sie Moduleinstellungen, die nur der Autor des Gadgets ändern kann. Weitere Einzelheiten finden Sie unter Gadget-Einstellungen definieren.
- Testen Sie das Gadgets. Eine Anleitung dazu finden Sie im Abschnitt Gadget testen.
Einbetten Ihres Gadgets
Gadgets können in Google Sites-Seiten eingebettet werden, indem sie entweder aus dem Google Sites-Gadget-Verzeichnis (das mit dem Google-Gadget-Verzeichnis synchronisiert wird) ausgewählt oder die URL direkt eingefügt werden.
So betten Sie ein Gadgets in Google Sites ein:
- Rufen Sie die Google Sites-Seite auf, die das neue Gadgets enthalten soll.
- Öffnen Sie die Seite zur Bearbeitung.
- Wählen Sie Einfügen > Mehr Gadgets.
- Suchen Sie nach dem Gadgets, 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: Dieselbe Methode "Gadget per URL hinzufügen" kann auch zum Einbetten von Gadgets von Google und anderen Websites im Internet verwendet werden. - Geben Sie die Abmessungen des Gadgets an, wählen Sie eine der verfügbaren Einstellungen aus und klicken Sie auf OK. Das Gadget wurde hinzugefügt. auf Ihre Seite.
- Speichern Sie die Seite, um Ihr Gadgets auf der Website anzusehen 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, es zu verwenden. machen Sie dasselbe. Testen Sie Ihr Gadgets manuell, indem Sie eine oder mehrere Test-Google Sites-Websites erstellen und einbetten. Ihres Gadgets. Die genauen Schritte finden Sie im Abschnitt Gadget einbetten. Die Funktionalität und Aussehen Ihres Gadgets hängt von der Website ab, die . Daher ist es am besten, das Debugging Ihres Gadgets im Kontext eines Google Sites-Website. Wechseln Sie zwischen verschiedenen Google Sites-Designs, um sicherzustellen, dass Ihr Gadgets jeweils richtig angezeigt wird.
Beim Testen Ihres Gadgets werden Sie zwangsläufig Fehler entdecken und Korrekturen vornehmen müssen. in Ihre XML-Gadget-Datei ein. Sie sollten das Speichern von Gadgets im Cache deaktivieren, die XML-Datei optimieren. Andernfalls werden Ihre Änderungen nicht auf der Seite angezeigt. Die Spezifikationen von Gadgets werden im Cache gespeichert, es sei denn, Sie weisen Google Sites an, dies nicht zu tun. Um den Cache während der Entwicklung zu umgehen, fügen Sie dies am Ende der Google Sites-Seiten-URL ein, die das Gadgets enthält (und nicht an die URL der XML-Datei mit den Spezifikationen der Gadgets):
?nocache=1
Google Sites bietet eine Standard-Benutzeroberfläche zum Hinzufügen und Konfigurieren von Gadgets. Wenn Sie ein Gadgets hinzufügen, werden eine Vorschau und alle UserPref-Parameter angezeigt, die konfiguriert werden können. Testen Sie die Aktualisierung verschiedener Konfigurationswerte und
Hinzufügen Ihres Gadgets zu Ihrer Testwebsite. Überprüfen Sie auf der
Website selbst. Sie sollten das testen,
Jede von Ihnen festgelegte UserPref kann vom Administrator der Website korrekt konfiguriert werden.
Weitere Tests finden Sie dann im Abschnitt Vorbereitung der Veröffentlichung des Gadgets.
Erweiterte Nutzerkonfiguration zulassen
Alle Gadgets bieten möglicherweise die Möglichkeit, grundlegende Nutzereinstellungen festzulegen. Diese werden über den Abschnitt UserPref der Datei mit den Spezifikationen des Gadgets festgelegt. Diese wirken sich in der Regel auf Abmessungen, Bildlaufleisten, Ränder, Titel und cookiespezifische Einstellungen aus, wie im folgenden Screenshot dargestellt:
Es gibt jedoch viele Fälle, in denen Gadgets von erweiterten Einstellungen profitieren, als dies bei den standardmäßigen UserPref-Komponenten der Fall ist. Präferenzen müssen häufig Funktionen wie benutzerdefinierte Geschäftslogik, Validierungen oder Auswahlelemente enthalten. Die von den UserPref-Bereichen des Gadgets generierte Benutzeroberfläche unterstützt eine begrenzte Anzahl von Datentypen (String, Enum usw.), sodass die Validierung von Eingaben wie URLs oder Datumsangaben nicht durchgeführt werden kann.
Darüber hinaus können Entwickler in Containern wie iGoogle, bei denen der Viewer und der Editor identisch sind, die Konfiguration als Teil der Standardansicht erweitern. In Google Sites ist der Betrachter nicht immer der Editor. Daher kann der Autor des Gadgets nicht garantieren, dass der aufrufende Nutzer Zugriff zum Aktualisieren der Einstellungen hat. Bei sozialen Containern wie Google Sites darf kein Nutzer die Einstellungen ändern, sondern nur der Autor.
In Google Sites kann die von UserPref generierte Oberfläche für die grundlegenden Einstellungen für Gadgets durch eine Konfigurationsansicht ersetzt werden, in der viele zusätzliche Einstellungen und Datentypen angegeben werden können, wie im folgenden Screenshot zu sehen:
Die Konfigurationsansicht wird beim Einfügen oder Bearbeiten anstelle der UserPref-Einstellungen angezeigt. Sie können Nutzereinstellungen über eine benutzerdefinierte Oberfläche festlegen. Außerdem können Sie benutzerdefinierte Eingabeelemente verwenden, um z. B. eine Position auf einer Karte auszuwählen, anstatt Kartenkoordinaten einzugeben.
Entwickler können die Standard-Setprefs-APIs verwenden, um Einstellungen in dieser Ansicht zu speichern. Nähere Einzelheiten finden Sie in der Gadgets-XML-Referenz und im Abschnitt "Sparstatus" der Entwicklergrundlagen. Diese Ansichten ermöglichen es der Containeranwendung, ergänzende Konfigurationsinformationen bereitzustellen .Sie werden in den XML-Spezifikationsdateien des Gadgets nach den UserPref-Abschnitten mit einem öffnenden Tag wie folgt festgelegt:
<Content type="html" view="configuration" preferred_height="150">
Das news.xml-Gadget, das die obige Konfigurationsansicht bietet, enthält beispielsweise diesen 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 Google 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
Best Practices für Google Sites-Gadgets
Nutzer von Websites möchten im Web gut aussehen. Befolgen Sie diese Best Practices, Das Gadgets fügt sich nahtlos in die vielen Designs ein, die in Google Sites verwendet werden. Weitere Informationen finden Sie unter Gadgets-Übersicht für weitere Informationen zum Erstellen von Gadgets. Der Rest der Dieser Abschnitt stellt Richtlinien speziell für Google Sites-Gadgets dar.
- Geben Sie keine vertraulichen Informationen in den Spezifikationen oder im Titel eines 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, senden Sie es nicht an das Google-Gadget-Verzeichnis oder einen anderen öffentlichen Eintrag. Stattdessen sollten alle Nutzer die URL nur per URL angeben. Zusätzlich können Sie ein URL-Gadget erstellen (anstatt eines typischen HTML-Typs, der alle Inhalte enthält), das lediglich eine andere Datei für deren Inhalt aufruft. Bei dieser Passthrough-Option wird nur die URL der zweiten Datei offengelegt. Informationen zu den Unterschieden zwischen HTML- und URL-Gadgets finden Sie im Abschnitt zur Auswahl des Inhaltstyps in den Grundlagen für Entwickler. Informationen zu weiteren Möglichkeiten zum Maskieren Ihres Gadgets finden Sie im Abschnitt Gadgets sind öffentlich im Abschnitt Eigene Gadgets schreiben.
- Das Wichtigste ist, dass Sie Ihr Gadgets auf einer Reihe verschiedener Websites testen. Ändern Sie die Hintergrundfarbe, die Textfarbe und die Schriftart der Website, um sicherzustellen, dass sich Ihr Gerät zu einer Vielzahl von Vorlagen passt.