Gadżety dla Witryn Google

Gadżety Witryn Google

W Google gadżety to aplikacje HTML i JavaScript, które można umieszczać na stronach internetowych oraz w innych aplikacjach, w tym w Witrynach. Umożliwiają one umieszczanie w witrynie zawartości zewnętrznej i dynamicznej, np. miniaturowych aplikacji i list opartych na bazach danych, które są dołączone do tekstu i obrazów, co ułatwia korzystanie z witryny.

Każda strona w Witrynach to potencjalne kontener gadżetów. Oprócz tego Witryny oferują interfejs Data API, którego można używać w połączeniu z gadżetami do tworzenia zaawansowanych aplikacji. Oznacza to, że jako programista gadżetów możesz korzystać z klasycznego interfejsu Sites API do tworzenia atrakcyjnych narzędzi dla innych programistów internetowych i ich odbiorców, a także na własny użytek.

Gdy utworzysz gadżet do Witryn, stanie się on dostępny dla milionów aktywnych użytkowników. Wystarczy, że prześlesz nam swój gadżet, a pojawi się on w miejscu, w którym użytkownicy będą mogli z łatwością przeglądać, konfigurować i dodawać go do swoich witryn.

Wiesz już, że {sites_name_short} to doskonała platforma do dystrybucji gadżetów. Nie ma na co czekać? Zacznij tworzyć gadżety dla Witryn już teraz!

Omówienie gadżetów Witryn

Ogólnie gadżety to małe narzędzia, które generują lub pobierają zewnętrzne informacje na strony internetowe. W najprostszej postaci gadżet to mały plik XML, który pobiera informacje oraz umożliwia ich udostępnianie na wielu stronach internetowych jednocześnie. Jeśli umieścisz gadżet w Witrynach, utworzysz element iframe, który będzie przekazywać te informacje zewnętrzne. Niektóre gadżety to tylko elementy iframe, które przekazują informacje z innej witryny.

Bardziej zaawansowane gadżety zbierają zawartość dynamiczną i udostępniają interaktywne aplikacje na stronach Witryn. Zobacz Przykładowy gadżet.

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

  • Plik specyfikacji gadżetów – plik XML zawierający funkcje HTML i JavaScript.
  • Strona kontenera – strona internetowa, na której jest wstawiony gadżet, w tym przypadku witryna Google.
  • Zewnętrzne źródło danych – jest to opcjonalne .Może się ono znajdować w tej samej lokalizacji co plik XML, ale często jest wywoływane przez specyfikację gadżetów przez protokół HTTP, aby wyświetlić wyniki.

Z gadżetów utworzonych na potrzeby Witryn mogą korzystać wszyscy użytkownicy witryny. Są raczej interaktywne, skupione na przyciąganiu treści dynamicznych (a nie na prezentacji), a ich zadaniem jest uzupełnienie treści witryny.

Dobrym przykładem tego wyróżnienia jest gadżet kalendarza. Spersonalizowany gadżet kalendarza w usłudze prawdopodobnie będzie domyślnie wyświetlać kalendarz zalogowanego użytkownika, a gadżet kalendarza w Witrynach będzie umożliwiać współpracownikom wybieranie spośród różnych kalendarzy związanych z lokalizacją.

Gadżety witryn umożliwiają prezentowanie na jednej stronie wielu informacji ze źródeł zewnętrznych (np. aktywnych diagramów z różnych, ale powiązanych paneli wydajności) wraz z objaśnieniami opublikowanymi bezpośrednio w Witrynach. Pozwala to zaoszczędzić miejsce wizualne, a jednocześnie zbierać różne informacje na ten sam temat w tym samym widoku. Do gadżetów można też dodawać zawartość dynamiczną, która w innym przypadku nie byłaby zablokowana przez kontrole bezpieczeństwa Witryn.

Ostrzeżenie: gadżety utworzone za pomocą starszej wersji interfejsu API gadżetów mogą działać w Witrynach, ale nie są oficjalnie obsługiwane. Gadżety wbudowane i oparte na plikach danych nie są obsługiwane w podobny sposób. Dlatego zalecamy tworzenie wszystkich gadżetów Witryn przy użyciu obecnych gadżetów*. API. Wyjaśnienie znajdziesz w tym poście:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html

Przykładowy gadżet

Oto prosty, ale popularny gadżet typu Uwzględnij, który zapewnia nie tylko element iframe do przechodzenia przez inne treści internetowe:

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

Hostowanie gadżetów

Niezależnie od tego, co robisz, jego pliki muszą znajdować się w sieci WWW, aby można było je znaleźć i korzystać z nich. Wykorzystasz każdą lokalizację online dostępną przez HTTP bez uwierzytelniania. Pamiętaj tylko, że Twój gadżet musi zostać opublikowany w katalogu publicznym, aby został wybrany. W przeciwnym razie użytkownicy muszą umieścić ją bezpośrednio na stronie, wpisując jej adres URL.

Dostępne są następujące opcje hostingu gadżetów:

  • App Engine – umożliwia przechowywanie wszystkich plików wymaganych przez gadżety. Wymagają pewnej konfiguracji, czyli tworzenia projektów i kolejnych przesyłania plików. ale z łatwością poradzi sobie z obsługą dużej liczby użytkowników. Możesz utworzyć aplikację do przechowywania wszystkich gadżetów i drugą do udostępniania plików statycznych, w tym pliku app.yaml przypominającego:

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

    Jeśli wszystkie pliki gadżetów umieścisz w katalogu statycznym, będzie można edytować pliki 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 wyglądał tak: http://<nazwa-aplikacji>.appspot.com/static/gadget.xml

  • Dowolna wybrana lokalizacja online – firma jest w pełni pod Twoją kontrolą, ale także na Tobie. Niedostępność serwera może spowodować przerwę w korzystaniu z gadżetów użytkowników.

Tworzę Twój gadżet

Gadżety są jedynie w formacie HTML i (opcjonalnie) JavaScript, Flash lub Silverlight w kodzie XML. Przewodnik dla programistów gadżetów zawiera wszystkie informacje niezbędne do tworzenia własnych gadżetów. Dodatkowo szablony OpenSocial mogą służyć do szybkiego tworzenia aplikacji społecznościowych w gadżetach.

Oto ogólne czynności, które musisz wykonać, aby utworzyć gadżet dla Witryn:

  1. Wybierz, gdzie będzie hostowany Twój gadżet. Opisy dostępnych opcji znajdziesz w sekcji Hostowanie gadżetów .
  2. Utwórz nowy plik XML, który będzie działać jako specyfikacja w wybranym edytorze tekstu.
  3. Wybierz typ treści (HTML lub URL) i podaj go w pliku XML gadżetów:
    <Content type="html">
    Nieodwracalnie będzie to format HTML, który zakłada, że cała zawartość znajduje się bezpośrednio w pliku XML. Jeśli jednak chcesz przesłać zawartość w oddzielnym pliku, użyj typu treści adresu URL. Pełny opis różnic znajdziesz w części Wybieranie typu treści.
  4. Utwórz zawartość w pliku XML gadżetów lub oddzielnych plikach wywoływanych przez specyfikację. Sposoby analizowania istniejących gadżetów znajdziesz w sekcji Wyświetlanie przykładowych gadżetów.
  5. Określ podstawowe ustawienia gadżetów, które użytkownicy mogą zmieniać. Instrukcje znajdziesz w punkcie Definiowanie preferencji użytkownika. Aby przeprowadzić bardziej zaawansowaną konfigurację, zobacz sekcję Zezwalanie na zaawansowaną konfigurację użytkownika.
  6. określać ustawienia modułu, które może zmieniać tylko autor gadżetów; Więcej informacji znajdziesz w punkcie Definiowanie preferencji gadżetów.
  7. Przetestuj gadżet. Instrukcje znajdziesz w sekcji Testowanie gadżetów.

Umieszczanie gadżetów

Gadżety można umieszczać na stronach w Witrynach, wybierając je z katalogu gadżetów Witryn (który jest synchronizowany z katalogiem gadżetów iGoogle) lub bezpośrednio dodając jego adres URL.

Aby umieścić gadżet w Witrynach:

  1. Przejdź na stronę Witryn, która będzie zawierać nowy gadżet.
  2. Otwórz stronę do edycji.
  3. Wybierz Wstaw > Więcej gadżetów.
  4. Wyszukaj gadżet, wybierz go spośród kategorii po lewej stronie lub kliknij Dodaj gadżet przez adres URL i wklej adres URL do pliku XML. Następnie kliknij Dodaj.
    Wskazówka: tej samej metody dodawania gadżetów według adresu URL można używać do umieszczania gadżetów z strony iGoogle i innych miejsc w internecie.
  5. Określ wymiary gadżetów, wybierz je z dostępnych ustawień i kliknij OK. Zostanie on dodany do strony.
  6. Zapisz stronę, aby wyświetlić i przetestować swój gadżet w witrynie.

Testowanie gadżetów

Po utworzeniu swojego widżetu dokładnie go przetestuj, zanim zaczniesz z niego korzystać oraz pozwól innym robić to samo. Przetestuj gadżet ręcznie, tworząc co najmniej 1 testową stronę w Witrynach Google i umieszczając go na stronie. Dokładne instrukcje znajdziesz w sekcji Umieszczanie gadżetów. Funkcjonalność i wygląd gadżetów zależą od witryny, w której się on znajduje. Dlatego najlepszym sposobem debugowania gadżetów jest przetestowanie w kontekście rzeczywistej witryny Google. Przełącz się między różnymi motywami Witryn, aby upewnić się, że gadżet będzie wyświetlany prawidłowo w każdym z nich.

Testując swój gadżet, na pewno znajdziesz w nim błędy i konieczne będzie wprowadzenie poprawek w jego pliku XML. Podczas modyfikowania pliku XML musisz wyłączyć zapisywanie w pamięci podręcznej gadżetów. W przeciwnym razie zmiany nie będą widoczne na stronie. Specyfikacje gadżetów są przechowywane w pamięci podręcznej, chyba że poinformujesz Witryny, by tego nie robiły. Aby pominąć pamięć podręczną podczas tworzenia, dodaj ten fragment kodu na końcu adresu URL strony w Witrynach, która zawiera gadżet (a nie do adresu URL pliku XML specyfikacji gadżetów):

 ?nocache=1

Witryny oferują standardowy interfejs użytkownika do dodawania i konfigurowania gadżetów. Gdy dodasz gadżet, wyświetli się jego podgląd i wszystkie parametry UserPref, które można skonfigurować. Przetestuj różne wartości konfiguracji i dodaj gadżet do witryny testowej. Sprawdź, czy w witrynie gadżet działa zgodnie z oczekiwaniami. Musisz sprawdzić, czy administrator witryny może prawidłowo skonfigurować każdy element UserPref.

Następnie zapoznaj się z sekcją Przygotowanie do publikacji w publikacji artykułu, by przeprowadzić inne testy.

Zezwolenie na zaawansowaną konfigurację użytkownika

Wszystkie gadżety mogą umożliwiać określanie podstawowych ustawień użytkownika w sekcji UserPref pliku specyfikacji gadżetów. Mają one wpływ zwykle na wymiary, paski przewijania, obramowanie, tytuły i ustawienia dotyczące gadżetów, tak jak na zrzucie ekranu tutaj:

Ustawienia użytkownika gadżetów Witryn

Jednak w wielu przypadkach gadżety mogą mieć bardziej zaawansowane ustawienia niż standardowe komponenty UserPref. Preferencje często muszą obejmować takie funkcje jak niestandardowa logika biznesowa, weryfikacja lub selektory. Interfejs wygenerowany z sekcji gadżetów UserPref obsługuje ograniczoną liczbę typów danych (ciąg znaków, wyliczenie itp.), dlatego nie można przeprowadzić weryfikacji danych wejściowych, takich jak adresy URL czy daty.

Co więcej, w kontenerach takich jak iGoogle, gdzie osoby przeglądające i edytujące są takie same, autorzy gadżetów mogą rozszerzyć konfigurację w ramach widoku standardowego. W Witrynach przeglądający nie zawsze jest edytorem, więc autor gadżetów nie może zagwarantować, że użytkownik wyświetlający ma możliwość aktualizowania ustawień. Kontenery społecznościowe, takie jak Witryny, nie mogą umożliwiać modyfikowania ustawień żadnemu użytkownikowi, a jedynie autorowi.

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

Widok konfiguracji gadżetów witryn

Widok konfiguracji jest wyświetlany zamiast ustawień UserPref wyświetlanych w czasie wstawiania czy czasu edycji i umożliwia określenie preferencji użytkownika za pomocą niestandardowego interfejsu. Możesz też używać niestandardowych elementów wejściowych, np. do wybrania pozycji na mapie zamiast wpisywania współrzędnych mapy.

Deweloperzy mogą zapisywać preferencje w tym widoku za pomocą standardowych interfejsów API setprefs. Więcej informacji znajdziesz w dokumentacji XML gadżetów i sekcji „Saving State” w Podstawach aplikacji dla programistów. Widoki te umożliwiają aplikacji kontenera dostarczanie dodatkowych informacji konfiguracyjnych .Tworzysz je w plikach specyfikacji XML gadżetów, które zawierają sekcje UserPref z tagiem otwierającym przypominającym:

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

Na przykład gadżet news.xml, który zapewnia widok konfiguracji powyżej, zawiera taką sekcję:

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

Sprawdzone metody dotyczące gadżetów Witryn

Witryny, które użytkownicy chcą dobrze wyglądać w internecie. Postępuj zgodnie z tymi sprawdzonymi metodami, aby Twój gadżet płynnie łączył się z motywami używanymi w Witrynach. Szczegółowe informacje o tworzeniu gadżetów znajdziesz w artykule Omówienie gadżetów. Pozostała część tej sekcji zawiera wskazówki dotyczące gadżetów Witryn.

  • Nie umieszczaj informacji poufnych w specyfikacjach ani tytułach gadżetów, ponieważ są one widoczne publicznie. Nie podawaj na przykład wewnętrznych nazw projektów.
  • Aby zminimalizować widoczność swojego widżetu, nie przesyłaj go do katalogu gadżetów iGoogle ani do żadnej innej usługi publicznej. Zamiast tego poproś wszystkich użytkowników o uwzględnianie jej tylko na podstawie adresu URL. Dodatkowo można utworzyć gadżet typu adres URL (zamiast typowego typu HTML zawierający całą zawartość), który jedynie wywołuje inny plik. W przypadku tej opcji przekazywania ujawniany jest tylko adres URL drugiego pliku. Informacje o różnicach między gadżetami HTML i URL znajdziesz w sekcji Wybieranie typu treści w podstawach dla programistów, a w sekcji Gadżety są publiczne w artykule na temat tworzenia własnych gadżetów znajdziesz inne sposoby maskowania gadżetów.
  • Przede wszystkim przetestuj swój gadżet w kilku różnych witrynach. Zmień kolor tła, tekstu i kroju czcionki witryny, aby Twój gadżet pasował do szerokiej gamy szablonów.

Powrót do góry