Publikowanie swojego gadżetu

W tym dokumencie opisujemy różne opcje publikowania gadżetu.

Gdzie mogę umieścić mój gadżet?

Gadżety działają w różnych aplikacjach i środowiskach. Najpopularniejsze opcje znajdziesz na stronie Przegląd interfejsu API.

Nie każdy gadżet jest odpowiedni dla każdego środowiska. Szczegółowe informacje o funkcjach obsługiwanych w tym środowisku znajdziesz w dokumentacji kontenera, aplikacji lub witryny.

Przygotowanie do publikacji

Zanim opublikujesz gadżet, przetestuj go z uwzględnieniem wymagań i ograniczeń środowiska docelowego, w którym będzie on działał.

W przypadku wszystkich gadżetów wykonaj następujące testy:

  • Użyj wszystkich kombinacji wartości UserPref.
  • Wyświetlaj ją na ekranach o różnych rozmiarach, od 800 x 600 do jak najszerszego. Link do rozszerzenia dla programistów stron internetowych w Firefoksie, które ułatwia zmianę rozmiaru przeglądarki Firefox na określony rozmiar.
  • Przetestuj widżet w różnych rozmiarach, zgodnie z opisem w sekcji Testowanie szerokości i wysokości.
  • Przetestuj gadżety w każdym środowisku, w którym może działać.
  • Przetestuj gadżety w tych przeglądarkach: IE 6+, Firefox 3.0+, Google Chrome 5.0+, Safari 4.0 i nowsze.
  • Wypróbuj różne rozmiary czcionek:
    • Aby zmienić rozmiar czcionki w Firefoksie, wybierz Narzędzia > Opcje > Treść. Kliknij Zaawansowane w obszarze &„Czcionki i kolory”. Zmień ustawienia czcionek i usuń zaznaczenie opcji „Zezwalaj stronom na wybór własnych czcionek” zamiast wyboru powyżej."
    • Aby zmienić rozmiar czcionki w programie Internet Explorer, wybierz Narzędzia > Opcje internetowe > Ogólne. Aby zmienić ustawienia czcionek, użyj okien Czcionki i Ułatwienia dostępu.

Jeśli używasz wartości makeRequest(), sprawdź, co się stanie, gdy źródło danych zostanie wyłączone lub zwróci błąd. Możesz zasymulować tę sytuację, zmieniając tymczasowo adres URL na inny.

Testowanie szerokości i wysokości

Rozmiar rozmiaru zależy w dużym stopniu od miejsca, w którym działa. Więcej informacji znajdziesz w dokumentacji kontenera lub witryny.

Podczas projektowania i testowania gadżetów przygotuj się na dowolną szerokość z zakresu od 200 do 600 pikseli. Szerokość musi być większa w przypadku niektórych gadżetów.Ogólnie rzecz biorąc, projekt musi wyświetlać się poprawnie, jeśli ma więcej miejsca. Na przykład gadżety map powinny znajdować się w swoich obszarach, gadżety graficzne powinny wyśrodkować się w ramce, a gadżety tekstowe powinny znajdować się na górze (np. linki kliknij, aby uzyskać więcej szczegółów, które zwykle są u dołu, a nie wyświetlane na dole okna gadżetu).

Zwiększanie wydajności gadżetu

Jeśli utworzysz spodziewany ruch w gadżecie, możesz zadbać o dostępność i dobrą wydajność. Jeśli Twój gadżet otrzymuje ponad 200 tys. wyświetleń dziennie lub około 1–2 żądań na sekundę, warto rozważyć skorzystanie z wskazówek w tej sekcji. Nawet 50 KB gadżetu, który otrzymuje 200 000 żądań dziennie, używa około 300 GB miesięcznie.

Gadżety mogą przyciągać wielu użytkowników z różnych powodów. Może po prostu stać się popularne w katalogu treści. Jeśli korzystasz z promocji w ramach specjalnej promocji lub reklamy, może to być przyczyną dużego ruchu.

Gadżet o dużym ruchu powinien być renderowany w ciągu 0,25 sekundy (250 milisekund) lub mniej. Przewodnik Pomiar czasu oczekiwania może zawierać szczegółowe informacje o mierzeniu skuteczności gadżetów. Zwiększenie elastyczności gadżetu to z pewnością pozytywny wpływ na wygodę użytkownika. Wskazówki na temat optymalizacji wydajności gadżetów znajdziesz w artykule Optymalizacja pod kątem dużego natężenia ruchu. Wskazówki dotyczące zarządzania znajdziesz w artykule Zarządzanie dużym ruchem. Ogólne wskazówki dotyczące testowania są szczególnie ważne w przypadku bardzo popularnych gadżetów.

Optymalizacja pod kątem dużego natężenia ruchu

Jeśli uważasz, że Twój gadżet może generować duży ruch, postępuj zgodnie z tymi wskazówkami:

  • Unikaj używania zewnętrznych plików JavaScript lub CSS (plików, do których odnoszą się atrybuty "src" i quot;href" w tagach HTML), ponieważ powoduje to naliczanie kosztów innego połączenia sieciowego. Zamiast tego umieść kod JavaScript i CSS w specyfikacji gadżetu.
  • Użyj gadżetu type=html. Gadżety, które są typu type=url, renderują się wolniej niż type=html, ponieważ mają niską wydajność i niską obsługę pamięci podręcznej innych serwerów hostingowych.
  • Metoda makeRequest() domyślnie przechowuje treść w pamięci podręcznej przez około 1–2 godziny. Możesz użyć parametru refreshInterval z tymi funkcjami, aby częściej odświeżać pamięć podręczną. Przechowywanie danych w pamięci podręcznej pozwala jednak ograniczyć liczbę żądań wysyłanych do serwerów zdalnych, które hostują treści. Nie żądaj większej częstotliwości aktualizacji niż jest to konieczne, ponieważ spowoduje to zmniejszenie odsetka żądań wykonywanych z pamięci podręcznej. Nie używaj też technik pomijania pamięci podręcznej, takich jak umieszczanie liczb losowych lub sygnatury czasowe w pobieranych adresach URL. Może to spowodować przeciążenie systemów, które reagują na te adresy URL. Aby dowiedzieć się, jak ustawić interwał odświeżania, zobacz Odświeżanie pamięci podręcznej.
  • Buforuj często używane treści lub wartości, korzystając z co najmniej jednej z tych metod:
    • Ukryty użytkownikPref

      Zalety

      • Szybkie wczytywanie za pomocą gadżetu i nie potrzeba żadnych dodatkowych serwerów-klientów w obie strony
      • Brak wymagań dotyczących przeglądarki

      Wady

      • Dane są przekazywane za pomocą adresu URL i podlegają ograniczeniom długości adresu URL (czyli w adresie URL gadżetu jest mnóstwo danych, dlatego praktyczny rozmiar danych jest ograniczony do kilkuset).
    • Bazy danych WebHTML5

      Zalety

      • Szybko
      • Efektywne nieograniczone miejsce na dane

      Wady

      • Wymaga obsługi w przeglądarce
    • OpenSocial AppData,

      Zalety

      • Brak wymagań dotyczących przeglądarki
      • Około 10 KB miejsca (wraz z kluczami i w zależności od ograniczeń poszczególnych kontenerów)

      Wady

      • Aby pobrać dane, musisz wysłać drugie żądanie po wczytaniu gadżetu
      • Wszelkie dane przechowywane w AppData mogą być widoczne dla innych osób korzystających z wykresu społecznościowego użytkownika
  • Informacje o tym, jak obserwować skuteczność swojego gadżetu, znajdziesz w przewodniku Pomiar czasu oczekiwania. Następnie usuń wąskie gardła.
  • Określ wysokość i szerokość wszystkich tagów <img> w kodzie HTML. Przyspiesza to renderowanie gadżetu. Jeśli używasz właściwości gadgets.io.getProxyUrl() i wstawisz element graficzny bezpośrednio do modelu DOM, nie musisz ustawiać właściwości szerokości i wysokości.
  • Zamiast tworzyć bezpośrednie połączenie z dostawcą usług hostingowych, użyj funkcji gadgets.io.getProxyUrl(), aby buforować wszystkie umieszczone obrazy, i embedCachedFlash(), aby buforować treści Flash. Poniżej znajduje się przykład gadżetu, który wstępnie wczytuje obrazy za pomocą atrybutu gadgets.io.getProxyUrl():

Oto przykładowy gadżet, który ilustruje, jak używać gadgets.io.getProxyUrl(): 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Zombies!" height="350" />
  <Content type="html">
  <![CDATA[
  <div id="zombiecontainer"
    style="text-align:center;">
  </div>
  <script type="text/javascript">
  var counter = 0;

  // Preload the images using gadgets.io.getProxyUrl()
  function load(imageList) {
    var ret = [];
    for (var i = 0, j = imageList.length; i < j; ++i) {
      var img = document.createElement("img");
      img.src = gadgets.io.getProxyUrl(imageList[i]);
      ret.push(img);
    }
    return ret;
  }

  var files = [
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-0.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-1.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-2.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-3.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-4.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-5.jpg",
    "http://gadget-doc-examples.googlecode.com/svn/trunk/zombie-6.jpg"
  ];

  var images = load(files);
  browse();

  // Browse through photos sequentially. When you get to the end of the array, start over.
  function browse(){
    if (counter == images.length)
    {
      counter = 0;
    }
    document.getElementById("zombiecontainer").innerHTML = "";
    document.getElementById("zombiecontainer").appendChild(images[counter]);
    counter++;
  }

  </script>
  <br />
  <div style="text-align: center;">
    <input type=submit value="Next ->" onClick="browse()">
  </div>
  ]]>
  </Content>
</Module>

Zarządzanie dużym ruchem

Poniższe wskazówki mogą pomóc w zarządzaniu dużą liczbą gadżetów:

  • Jeśli otrzymujesz dużo e-maili od użytkowników Twoich gadżetów, użyj Gmaila i skonfiguruj filtry, aby kontrolować ich liczbę. Zalecamy użycie adresu formularza <username>.feedback+<gadgetname>@gmail.com w specyfikacji gadżetu. Ułatwi to filtrowanie wiadomości otrzymanych od użytkowników gadżetu. Gmail usuwa wszystko po znaku plusa (+), więc ten adres e-mail jest mapowany na <username>.feedback@gmail.com. Pamiętaj, że Gmail używa wysokiej jakości filtra spamu.

Powrót do góry