Gadgets für Google Sites

Bei Google sind Gadgets HTML- und JavaScript-Anwendungen, die in Webseiten und andere Apps eingebettet werden können, einschließlich Sites. Mit diesen Gadgets können Sie externe und dynamische Inhalte auf Ihrer Website einbinden, z. B. Minianwendungen und databasengetriebene Listen, die mit Text und Bildern für eine nahtlose Nutzererfahrung kombiniert werden.

Jede Seite „Websites“ ist ein potenzieller Gadget-Container. Außerdem bietet Sites eine Data API, die in Kombination mit Gadgets verwendet werden kann, um leistungsstarke Anwendungen zu erstellen. Als Gadget-Entwickler können Sie die klassische Sites API also nutzen, um ansprechende Tools für andere Webentwickler und ihre Zielgruppen sowie für Ihre eigene Nutzung zu erstellen.

Wenn Sie ein Gadget für Websites erstellen, ist es für Millionen von aktiven Nutzern verfügbar. Reichen Sie Ihr Gadgets einfach bei uns ein, und es wird angezeigt, wo Nutzer es ganz einfach durchsuchen, konfigurieren und zu ihren Websites hinzufügen können.

Sie wissen jetzt, dass {sites_name_short} eine hervorragende Vertriebsplattform für Ihr Gadget ist. Worauf warten Sie noch? Jetzt mit dem Erstellen von Gadgets für Google Sites beginnen

Das Gadget „Websites“

Im Allgemeinen sind Gadgets kleine Dienstprogramme, mit denen externe Informationen generiert oder auf Webseiten übertragen werden. In seiner einfachsten Form ist ein Gadget eine kleine XML-Datei, die Informationen abrufen und auf mehreren Webseiten gleichzeitig verfügbar machen kann. In Google Sites wird ein Gadget in einen Iframe eingebettet, der als Kanal für diese externen Informationen dient. Einige Gadgets sind nicht mehr als das, iFrames, die Informationen von einer anderen Website weiterleiten.

Erweiterte Gadgets erfassen dynamische Inhalte und bieten interaktive Anwendungen auf Ihren Seiten. Beispiel für ein 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 Gadget eingefügt ist, in diesem Fall eine Google-Website.
  
• Externe Datenquelle: Diese Option 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 Ergebnisse zu liefern.

Für Websites entwickelte Gadgets können von allen Nutzern einer Website verwendet werden. Sie sind in der Regel interaktiv, konzentrieren sich auf dynamische Inhalte und nicht auf die Präsentation und sollen die Inhalte der Website ergänzen.

Ein Kalender-Gadget ist ein gutes Beispiel für diese Unterscheidung. Ein personalisiertes Kalender-Gadget würde in Google Sites standardmäßig wahrscheinlich den Kalender des angemeldeten Nutzers anzeigen, während Mitbearbeiter in einem Kalender-Gadget in Sites aus einer Vielzahl standortspezifischer Kalender auswählen könnten.

Mit Sites-Gadgets können Sie mehrere Informationen aus externen Quellen (z. B. Livediagramme aus verschiedenen, aber verwandten Leistungsdashboards) auf einer einzigen Seite zusammen mit erklärendem Text präsentieren, der direkt in Sites veröffentlicht wird. So wird visueller Platz gespart, während unterschiedliche Informationen zum selben Thema in derselben Ansicht erfasst werden. Mit Gadgets können Sie auch dynamische Inhalte einfügen, die sonst von den Sicherheitsprüfungen von Websites verhindert würden.

Warnung: Mit der alten Gadgets API erstellte Gadgets funktionieren möglicherweise auf Websites, werden aber nicht offiziell unterstützt. Integrierte und feedbasierte Gadgets werden ebenfalls nicht unterstützt. Daher empfiehlt Google, alle Google Sites-Gadgets mit den aktuellen Gadgets.* zu erstellen. die API verwenden. Eine Erklärung dazu finden Sie in diesem Beitrag:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html

Beispiel für ein Gadget

Hier ist ein einfaches, aber beliebtes Include-Gadget, das nur einen Iframe zum Weitergeben 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 Einstieg: Gadgets*. API finden Sie eine vollständige Beschreibung von Gadget-Tags und erwarteten Inhalten.

Gadget hosten

Unabhängig davon, welche Funktion Ihr Gadget hat, müssen sich seine Dateien im World Wide Web befinden, damit sie gefunden und verwendet werden können. Jeder Online-Speicherort, der über HTTP ohne Authentifizierung zugänglich ist, ist geeignet. Denken Sie daran, dass Ihr Gadget in einem öffentlichen Verzeichnis veröffentlicht werden muss, um ausgewählt zu werden. Andernfalls müssen Nutzer sie einbetten, indem sie die URL direkt einfügen.

Folgende Hostingoptionen für Gadgets sind verfügbar:

• 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 Gadgetdateien in das Verzeichnis „static“ verschieben, können Sie die Dateien in Ihrem lokalen Verzeichnis bearbeiten und jedes Mal, wenn Sie Änderungen vornehmen, in der App Engine bereitstellen. Wenn Sie eine Datei /static/gadget.xml haben, lautet die URL: http://<Ihr-App-Name>.appspot.com/static/gadget.xml.

• Beliebiger Online-Speicherort: Sie haben die volle Kontrolle, aber auch die volle Verantwortung. Ausfallzeiten auf Ihrem Server können zu einem Ausfall der Nutzer Ihrer Gadgets führen.

Gadget erstellen

Gadgets bestehen nur aus HTML und (optional) JavaScript, Flash oder Silverlight, die in XML verpackt sind. Der Entwicklerleitfaden für Gadgets enthält alle erforderlichen Details zum Erstellen eigener Gadgets. Außerdem können OpenSocial-Vorlagen verwendet werden, um schnell soziale Anwendungen in Gadgets zu erstellen.

So erstellen Sie ein Google Sites-Gadget:

1. Legen Sie fest, wo Ihr Gadget gehostet werden soll. Im Abschnitt Gadget hosten finden Sie Beschreibungen Ihrer Optionen.
2. Erstellen Sie mit dem Texteditor Ihrer Wahl eine neue XML-Datei, die als Spezifikation dient.
3. Legen Sie den Inhaltstyp fest, entweder HTML oder URL, und geben Sie ihn in der .xml-Datei des Gadgets an:
   <Content type="html">
   Das ist fast immer HTML, was davon ausgeht, dass alle Inhalte direkt in der .xml-Datei bereitgestellt werden. Wenn Sie die Inhalte jedoch in einer separaten Datei bereitstellen möchten, verwenden Sie den Inhaltstyp „URL“. Eine ausführliche Beschreibung der Unterschiede findest du unter Inhaltstyp auswählen.
4. Erstellen Sie Inhalte in der XML-Datei für Gadgets oder in separaten Dateien, die von der Spezifikation aufgerufen werden. Im Abschnitt Beispiel-Gadgets ansehen erfahren Sie, wie Sie vorhandene Gadgets überprüfen können.
5. Legen Sie grundlegende Einstellungen für das Gadget fest, die von Nutzern geändert werden können. Weitere Informationen finden Sie unter Nutzereinstellungen definieren. Informationen zur erweiterten Konfiguration finden Sie im Abschnitt Erweiterte Nutzerkonfiguration zulassen.
6. Definieren Sie Moduleinstellungen, die nur der Autor des Gadgets ändern kann. Weitere Informationen finden Sie unter Gadget-Einstellungen definieren.
7. Testen Sie das. Eine Anleitung dazu finden Sie im Abschnitt Gerät testen.

Gadget einbetten

Gadgets können in Sites-Seiten eingebettet werden. Dazu können Sie sie entweder im Gadget-Verzeichnis von Sites auswählen (das mit dem iGoogle-Gadget-Verzeichnis synchronisiert ist) oder die URL direkt einfügen.

So betten Sie ein Gadget in Google Sites ein:

1. Rufen Sie die Seite „Websites“ auf, auf der das neue Gadget enthalten sein soll.
2. Öffnen Sie die Seite zum Bearbeiten.
3. Wählen Sie Einfügen > Weitere Gadgets aus.
4. Suchen Sie nach dem Gadget und wählen Sie es aus den Kategorien links aus oder klicken Sie auf Gadget per URL hinzufügen und fügen Sie die URL Ihrer .xml-Datei ein. Klicken Sie dann auf Hinzufügen.
   Tipp: Mit dieser Methode können Sie auch Gadgets von iGoogle und anderen Websites einbetten.
5. 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.
6. Speichern Sie die Seite, um Ihr Gadgets auf der Website anzusehen und zu testen.

Gadget testen

Nachdem Sie Ihr Gadget gebaut haben, sollten Sie es gründlich testen, bevor Sie es verwenden und anderen erlauben, dasselbe zu tun. Sie können Ihr Gadget manuell testen, indem Sie eine oder mehrere Google Sites zum Testen erstellen und Ihr Gadget einbetten. Eine genaue Anleitung finden Sie im Abschnitt Gadget einbetten. Die Funktion und das Aussehen des Gadgets hängen von der Website ab, auf der es enthalten ist. Daher sollten Sie Ihr Gadget am besten im Kontext einer echten Google-Website testen. Wechseln Sie zwischen verschiedenen Website-Designs, um sicherzustellen, dass Ihr Gadget auf allen richtig angezeigt wird.

Beim Testen Ihres Gadgets werden Sie unweigerlich Fehler entdecken und müssen Korrekturen an der .xml-Datei des Gadgets vornehmen. Sie sollten das Caching von Gadgets deaktivieren, während Sie die XML-Datei anpassen. Andernfalls werden Ihre Änderungen nicht auf der Seite angezeigt. Die Gadget-Spezifikationen werden im Cache gespeichert, sofern Sie dies nicht deaktivieren. Wenn Sie den Cache während der Entwicklung umgehen möchten, fügen Sie Folgendes an das Ende der URL der Websiteseite mit dem Gadget an (nicht die URL der .xml-Datei mit der Gadget-Spezifikation):

 ?nocache=1

Sites bietet eine standardmäßige Benutzeroberfläche zum Hinzufügen und Konfigurieren von Gadgets. Wenn Sie ein Gadget hinzufügen, wird eine Vorschau und alle konfigurierbaren UserPref-Parameter angezeigt. Testen Sie das Aktualisieren verschiedener Konfigurationswerte und fügen Sie Ihr Gadget Ihrer Testwebsite hinzu. Prüfen Sie, ob Ihr Gadget auf der Website wie erwartet funktioniert. Sie sollten testen, ob alle von Ihnen definierten UserPref vom Websiteadministrator richtig konfiguriert werden können.

Weitere Tests finden Sie im Abschnitt Vorbereitung auf die Veröffentlichung des Artikels „Dein Gadget veröffentlichen“.

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. Sie wirken sich in der Regel auf Abmessungen, Bildlaufleisten, Rahmen, Titel und gadgetspezifische Einstellungen aus, wie im folgenden Screenshot dargestellt:

Es gibt jedoch viele Fälle, in denen Gadgets von erweiterten Einstellungen profitieren, die die standardmäßigen UserPref-Komponenten nicht bieten. Einstellungen müssen oft Funktionen wie benutzerdefinierte Geschäftslogik, Validierungen oder Auswahltools enthalten. Die Benutzeroberfläche, die aus den UserPref-Abschnitten des Gadgets generiert wird, unterstützt nur eine begrenzte Anzahl von Datentypen (String, Enum usw.). Daher kann keine Validierung von Eingaben wie URLs oder Datumsangaben durchgeführt werden.

In Containern wie iGoogle, in denen Betrachter und Bearbeiter identisch sind, können Gadget-Autoren die erweiterte Konfiguration als Teil der Standardansicht verwenden. 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, z. B. um eine Position auf einer Karte auszuwählen, anstatt Kartenkoordinaten einzugeben.

Entwickler können die standardmäßigen 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, zusätzliche Konfigurationsinformationen bereitzustellen. Sie werden in den .xml-Spezifikationsdateien des Gadgets nach den UserPref-Abschnitten mit einem ähnlichen Anfangs-Tag wie dem folgenden festgelegt:

  <Content type="html" view="configuration" preferred_height="150">

Das Gadget news.xml, das die Konfigurationsansicht oben enthält, 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

Websites sollen im Web gut aussehen. Folgen Sie diesen Best Practices, damit Ihr Gadget nahtlos in die vielen Themen auf Websites passt. Weitere Informationen zum Erstellen von Gadgets finden Sie unter Gadgets – Übersicht. Im Rest dieses Abschnitts finden Sie Richtlinien speziell für Websites-Gadgets.

• Geben Sie keine vertraulichen Informationen in den Gadget-Spezifikationen oder -Titeln an, da Ihr Gadget öffentlich sichtbar ist. Geben Sie beispielsweise keine internen Projektnamen an.
• Wenn Sie die Sichtbarkeit Ihres Gadgets minimieren möchten, reichen Sie es nicht im iGoogle-Gadget-Verzeichnis oder in einem anderen öffentlichen Eintragsdienst ein. Bitten Sie stattdessen alle Nutzer, es nur über die URL anzugeben. Außerdem können Sie ein Gadget vom Typ „URL“ erstellen (anstelle des üblichen HTML-Typs, der den gesamten Inhalt enthält), das lediglich eine andere Datei für den Inhalt aufruft. Bei dieser Passthrough-Option wird nur die URL der zweiten Datei freigegeben. Im Abschnitt Inhaltstyp auswählen der Entwicklergrundlagen finden Sie Informationen zu den Unterschieden zwischen HTML- und URL-Gadgets. Im Abschnitt Gadgets sind öffentlich des Artikels „Eigene Gadgets erstellen“ finden Sie weitere Möglichkeiten, Ihr Gadget zu verbergen.
• Testen Sie Ihr Gadget am besten auf verschiedenen Websites. Ändern Sie die Hintergrundfarbe, die Textfarbe und die Schriftart der Website, damit sich Ihr Gadgets zu einer Vielzahl von Vorlagen passt.

Nach oben