Gadżety dla Witryn Google

W Google gadżety to aplikacje w języku HTML i JavaScript, które można umieszczać na stronach internetowych i w innych aplikacjach, w tym w Google Sites. Te gadżety umożliwiają umieszczanie w witrynie treści zewnętrznych i dynamicznych, takich jak miniaturowe aplikacje i listy oparte na bazie danych, zintegrowane z tekstem i obrazami, aby zapewnić użytkownikom płynne wrażenia.

Każda strona witryny może być kontenerem gadżetu. Co więcej, w ramach usługi Google Sites możesz korzystać z interfejsu Data API, który wraz z gadżetami umożliwia tworzenie zaawansowanych aplikacji. Oznacza to, że jako twórca gadżetu możesz korzystać z klasycznego interfejsu Sites API, aby tworzyć atrakcyjne narzędzia dla innych programistów i ich odbiorców, a także do własnych celów.

Gdy utworzysz gadżet do Witryn, staje się on dostępny dla milionów aktywnych użytkowników. Wystarczy, że prześlesz nam swój gadżet, a udostępnimy go użytkownikom, którzy będą mogli łatwo przeglądać, konfigurować i dodawać go do swoich witryn.

Wiesz już, że {sites_name_short} to świetna platforma dystrybucyjna dla Twojego gadżetu. Na co więc czekasz? Zacznij tworzyć gadżety dla Witryn już teraz.

Omówienie widżetu witryn

Ogólnie gadżety to małe narzędzia, które generują strony internetowe lub pobierają z nich informacje zewnętrzne. W najprostszej postaci gadżet to mały plik XML, który pobiera informacje z możliwością udostępnienia ich na wielu stronach internetowych jednocześnie. W Witrynach możesz umieścić gadżet, który wyświetla wyniki w ramce iframe, która działa jako kanał dla tych zewnętrznych informacji. Niektóre gadżety to nic innego jak elementy iframe, które przekazują informacje z innej witryny.

Bardziej zaawansowane gadżety zbierają treści dynamiczne i zapewniają interaktywne aplikacje na stronach w Google Sites. Zobacz Przykładowy gadżet.

Gadżety składają się z tych elementów:

• Plik specyfikacji gadżetu – plik XML zawierający funkcje HTML i JavaScript.
  
• Strona kontenera – strona internetowa, na której jest umieszczony gadżet, w tym przypadku Witryna Google.
  
• Zewnętrzne źródło danych – jest opcjonalne i może znajdować się w tej samej lokalizacji co plik .xml, ale jest często wywoływane przez specyfikację gadżetów przez HTTP w celu dostarczenia wyników.

Gadżety utworzone dla Witryn mogą być używane przez wszystkich widzów witryny. Mają zwykle charakter interaktywny i są skupione na wciąganiu dynamicznej zawartości, a nie na prezentacji, i dopasowują się do zawartości witryny.

Gadżet kalendarza jest dobrym przykładem tego rozróżnienia. Gadżet spersonalizowany w witrynie prawdopodobnie będzie domyślnie wyświetlać kalendarz zalogowanego użytkownika, a gadżet kalendarza w Witrynach umożliwia współpracownikom wybieranie kalendarza z różnych kalendarzy związanych z lokalizacją.

Gadżety witryn umożliwiają prezentowanie na jednej stronie wielu informacji ze źródeł zewnętrznych (np. diagramów na żywo z różnych, ale powiązanych ze sobą paneli wydajności) wraz z tekstem objaśniającym opublikowanym bezpośrednio w Witrynach. Pozwala to zaoszczędzić wizualne miejsce, a jednocześnie zgromadzić w jednym widoku rozbieżne informacje na ten sam temat. Dzięki gadżetom możesz też dodawać treści dynamiczne, które w innym przypadku zostałyby zablokowane przez kontrole bezpieczeństwa witryn.

Ostrzeżenie: gadżety utworzone za pomocą starszego interfejsu API gadżetów mogą działać w Witrynach, ale nie są oficjalnie obsługiwane. Gadżety wbudowane i działające z kanałem kanału również nie są obsługiwane. Dlatego Google zaleca tworzenie wszystkich gadżetów Witryn przy użyciu obecnych gadżetów*. a także przy użyciu Google Cloud CLI lub Compute Engine API. Aby uzyskać wyjaśnienie, zapoznaj się z tym wpisem:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html

Przykładowy gadżet

Oto prosty, ale popularny gadżet Include, który udostępnia tylko ramkę iframe do przesyłania innych treści internetowych:

<?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>

Zobacz Pierwsze kroki: gadżety*. API, aby uzyskać pełny opis tagów gadżetów i oczekiwanych treści.

Hostowanie gadżetu

Niezależnie od tego, do czego służy Twój gadżet, jego pliki muszą znajdować się w sieci WWW, aby można było z niego korzystać. Dozwolone są wszystkie lokalizacje internetowe dostępne przez HTTP bez uwierzytelniania. Pamiętaj, że aby gadżet mógł zostać wybrany, musi zostać opublikowany w katalogu publicznym. W przeciwnym razie użytkownicy będą musieli umieścić ją bezpośrednio, wstawiając jej adres URL.

Dostępne opcje hostingu gadżetów:

• App Engine – może przechowywać wszystkie pliki wymagane przez gadżety. Wymaga pewnej konfiguracji, a mianowicie utworzenia projektów i przesłania kolejnych plików. ale bez problemu trafi do dużej liczby użytkowników. Możesz utworzyć jedną aplikację do przechowywania wszystkich gadżetów i drugą do wyświetlania plików statycznych, w tym plik app.yaml podobny do tego:

  application: <your app name>
  version: 1
  runtime: python
  api_version: 1
  
  handlers:
  - url: /.*
    static_dir: static

  Jeśli umieścisz wszystkie pliki gadżetów w katalogu statycznym, możesz je edytować w katalogu lokalnym i wdrażać w App Engine po każdym wprowadzeniu zmian. Jeśli masz plik /static/gadget.xml, jego adres URL będzie następujący: http://<nazwa-aplikacji>.appspot.com/static/gadget.xml

• Dowolna wybrana przez Ciebie lokalizacja online – jest pod Twoją kontrolą, ale ponosi też pełną odpowiedzialność. Czas przestoju na serwerze może nie być dostępny dla użytkowników Twoich gadżetów.

Tworzenie gadżetu

Gadżety to tylko HTML i (opcjonalnie) JavaScript, Flash lub Silverlight zapakowane w XML. Przewodnik dla programistów gadżetów zawiera wszystkie niezbędne informacje do tworzenia własnych gadżetów. Ponadto szablony OpenSocial umożliwiają szybkie tworzenie aplikacji społecznościowych w gadżetach.

Oto ogólne wskazówki dotyczące tworzenia gadżetu dla witryn:

1. Wybierz miejsce, w którym będzie hostowany gadżet. Opis opcji znajdziesz w sekcji Hostowanie gadżetu.
2. W wybranym edytorze tekstu utwórz nowy plik .xml, który będzie działać jako specyfikacja.
3. Zdecyduj, czy chcesz użyć treści w formacie HTML czy URL, i wskaż je w pliku .xml gadżetu, np.:
   <Content type="html">
   W prawie każdym przypadku będzie to format HTML, co oznacza, że wszystkie treści są podawane bezpośrednio w pliku .xml. Jeśli jednak chcesz przesłać treści w osobnym pliku, użyj typu treści URL. Pełny opis różnic znajdziesz w artykule Wybieranie typu treści.
4. Twórz treści w pliku .xml gadżetu lub w osobnych plikach wywoływanych przez specyfikację. W sekcji Przykłady wyświetlania gadżetów znajdziesz sposoby sprawdzania dotychczasowych gadżetów.
5. Określ podstawowe ustawienia gadżetu, które użytkownicy mogą zmieniać. Instrukcje znajdziesz w sekcji Definiowanie preferencji użytkownika. Aby uzyskać bardziej zaawansowaną konfigurację, zapoznaj się z sekcją Zezwalanie na zaawansowaną konfigurację przez użytkowników.
6. Określ ustawienia modułu, które może zmieniać tylko autor gadżetu. Dodatkowe informacje znajdziesz w punkcie Definiowanie ustawień gadżetów.
7. Przetestuj gadżet. Instrukcje znajdziesz w sekcji Testowanie gadżetu.

Wstawianie gadżetu

Gadżety można umieszczać na stronach Witryn. Można to zrobić przez wybranie ich z katalogu gadżetów Witryn (który jest synchronizowany z katalogiem gadżetów strony głównej) lub przez bezpośrednie umieszczenie adresu URL.

Aby umieścić gadżet w Witrynach:

1. Otwórz stronę Witryny, na której ma się pojawić nowy gadżet.
2. Otwórz stronę do edycji.
3. Kliknij Wstaw > Więcej gadżetów.
4. Wyszukaj gadżet, wybierz go spośród kategorii po lewej stronie lub kliknij Dodaj gadżet według adresu URL i wklej adres URL do pliku .xml. Następnie kliknij Dodaj.
   Wskazówka: tej samej metody dodawania gadżetów przez adres URL można używać do umieszczania gadżetów ze strony głównej Google i innych źródeł online.
5. Określ wymiary gadżetu, wybierz spośród dostępnych ustawień i kliknij OK. Gadżet zostanie dodany do Twojej strony.
6. Zapisz stronę, aby wyświetlić i przetestować gadżet na stronie.

Testowanie gadżetu

Po utworzeniu gadżetu dokładnie go przetestuj, zanim zaczniesz go używać i udostępniać innym. Testuj gadżet ręcznie, tworząc co najmniej jedną testową witrynę Google i umieszczając w niej gadżet. Szczegółowe instrukcje znajdziesz w sekcji Wstawianie widżetu. Funkcjonalność i wygląd gadżetu zależą od strony, na której się on znajduje. Dlatego najlepszym sposobem debugowania gadżetu jest przetestowanie go w kontekście rzeczywistej witryny Google. Przełącz się między różnymi motywami witryny, aby sprawdzić, czy gadżet wyświetla się prawidłowo w każdym z nich.

Testując swój gadżet, nie unikniesz błędów i musisz wprowadzić poprawki w swoim pliku .xml. Podczas dostosowywania pliku XML musisz wyłączyć zapisywanie gadżetów w pamięci podręcznej. W przeciwnym razie zmiany nie pojawią się na stronie. Specyfikacje gadżetu są przechowywane w pamięci podręcznej, chyba że powiesz Witrynom, aby tego nie robiły. Aby pominąć pamięć podręczną w trakcie tworzenia aplikacji, dodaj ten ciąg na końcu adresu URL strony w Witrynach zawierającego gadżet (a nie adresu URL pliku .xml specyfikacji gadżetów):

 ?nocache=1

Witryny mają standardowy interfejs użytkownika służący do dodawania i konfigurowania gadżetów. Po dodaniu gadżetu wyświetli się jego podgląd oraz wszystkie parametry UserPref, które można skonfigurować. Przetestuj aktualizowanie różnych wartości konfiguracyjnych i dodanie gadżetu do witryny testowej. Sprawdź, czy gadżet działa zgodnie z oczekiwaniami w samej witrynie. Sprawdź, czy administrator witryny może prawidłowo skonfigurować zdefiniowane przez Ciebie UserPref.

Następnie zapoznaj się z sekcją Przygotowanie do publikacji w artykule Publikowanie gadżetu, aby dowiedzieć się, jakie inne testy należy przeprowadzić.

Zezwalanie na zaawansowaną konfigurację przez użytkownika

Wszystkie gadżety mogą oferować możliwość ustawiania podstawowych preferencji użytkownika w sekcji UserPref pliku specyfikacji gadżetu. Zazwyczaj wpływają one na wymiary, suwaki, obramowania, tytuły i ustawienia dotyczące konkretnych gadżetów, jak widać na tym zrzucie ekranu:

W wielu przypadkach jednak gadżety korzystają z bardziej zaawansowanych ustawień niż te, które oferują standardowe komponenty UserPref. Ustawienia często muszą obejmować funkcje takie jak niestandardowa logika biznesowa, funkcje walidacyjne czy selektory. Interfejs generowany z sekcji gadżetu UserPref obsługuje ograniczoną liczbę typów danych (ciąg znaków, enum itp.), więc nie można przeprowadzać walidacji danych wejściowych, takich jak adresy URL czy daty.

Ponadto w kontenerach, takich jak strona {5}, w których przeglądający i edytujący są tacy sami, autorzy gadżetów mogą rozszerzać konfigurację w ramach widoku standardowego. W Witrynach osoba przeglądająca nie zawsze jest edytorem, więc autor gadżetu nie może zagwarantować, że użytkownik wyświetlający gadżet będzie miał prawo do aktualizowania ustawień. Kontenery społecznościowe, takie jak Witryny, nie mogą zezwalać użytkownikom na modyfikowanie ustawień, tylko autorowi.

W Witrynach podstawowy interfejs ustawień gadżetów wygenerowany przez interfejs UserPref można zastąpić widokiem konfiguracji, w którym można podać wiele dodatkowych ustawień i typów danych, tak jak na tym zrzucie ekranu:

Widok konfiguracji jest wyświetlany zamiast ustawień UserPref w momencie wstawiania lub edytowania i pozwala ustawić preferencje użytkownika za pomocą niestandardowego interfejsu. Możesz też użyć niestandardowych elementów wprowadzania danych, np. wybrać pozycję na mapie zamiast wpisywać współrzędne.

Programiści mogą używać standardowych interfejsów API setprefs do zapisywania preferencji w tym widoku. Więcej informacji znajdziesz w pliku referencyjnym XML gadżetów oraz w sekcji Zachowywanie stanu w podstawach programowania. Te widoki umożliwiają aplikacji kontenerowej udostępnianie dodatkowych informacji o konfiguracji. Są one ustalane w plikach specyfikacji .xml gadżetu po sekcjach UserPref z otwartym tagiem podobnym do tego:

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

Na przykład w gadżecie news.xml, który udostępnia widok konfiguracji powyżej, znajduje się ta sekcja:

<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>

Ten przykład i inne gadżety typowe dla Witryn wraz z widokami konfiguracji znajdziesz tutaj:
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

Stosowanie sprawdzonych metod dotyczących gadżetów w witrynach

Użytkownicy witryn chcą wyglądać dobrze w internecie. Postępuj zgodnie z tymi sprawdzonymi metodami, aby Twój gadżet idealnie pasował do wielu motywów używanych w witrynach. Szczegółowe informacje o tworzeniu gadżetów znajdziesz w artykule Omówienie gadżetów. W dalszej części tej sekcji znajdziesz wskazówki dotyczące gadżetów w witrynach.

• Nie umieszczaj informacji poufnych w specyfikacjach ani tytułach gadżetów, ponieważ są one publicznie dostępne. Nie podawaj na przykład wewnętrznych nazw projektów.
• Aby zminimalizować widoczność swoich gadżetów, nie przesyłaj go do katalogu gadżetów strony głównej ani żadnej innej publicznej usługi wykazu. Zamiast tego wszyscy użytkownicy powinni podawać go tylko w formie adresu URL. Możesz też utworzyć gadżet typu URL (zamiast typowego typu HTML zawierającego całą zawartość), który po prostu wywołuje inny plik. W przypadku tej opcji przekazywania danych widoczny jest tylko adres URL drugiego pliku. Więcej informacji o różnicach między gadżetami HTML a URL znajdziesz w artykule Wybieranie typu treści w sekcji Podstawy programowania. W artykule Tworzenie własnych gadżetów znajdziesz inne sposoby na ukrycie gadżetu.
• Najważniejsze jest przetestowanie gadżetu na wielu różnych stronach. Modyfikuj kolor tła, kolor tekstu oraz krój czcionki w witrynie, aby gadżet komponował się z szerokim wachlarzem szablonów.

Powrót do góry