Publique seu gadget

Este documento descreve as diferentes opções para publicar seu gadget.

Onde posso colocar meu gadget?

Os gadgets são executados em vários aplicativos e ambientes. A página Visão geral da API lista algumas das opções mais conhecidas.

Nem todos os gadgets são adequados para todos os ambientes. Consulte a documentação do contêiner, do aplicativo ou do site para mais detalhes sobre quais recursos são compatíveis com esse ambiente.

Como se preparar para a publicação

Antes de publicar seu gadget, é preciso testá-lo, considerando os requisitos e limitações do ambiente de destino em que o gadget será executado.

Os testes a seguir devem ser executados para todos os gadgets:

  • Tente todas as combinações de valores UserPref.
  • Execute-o em telas de tamanhos diferentes, de 800 x 600 à maior largura possível. Vincule à extensão de desenvolvedor da Web do Firefox, o que facilita o redimensionamento do Firefox para um tamanho específico.
  • Teste seu gadget em diferentes tamanhos, conforme descrito em Largura e altura de teste.
  • Teste o seu gadget em todos os ambientes em que ele possa ser executado.
  • Teste seu gadget nos seguintes navegadores: IE 6+, Firefox 3.0+, Google Chrome 5.0+, Safari 4.0+
  • Tente usar diferentes tamanhos de fonte:
    • Para mudar o tamanho da fonte no Firefox, escolha Tools > Options > Content. Clique em Advanced na área "Fonts & Colors" Alterar as configurações de fonte e desmarcar "Permitir que as páginas escolham as próprias fontes, em vez de minhas seleções acima."
    • Para alterar o tamanho da fonte no Internet Explorer, escolha Ferramentas > Opções da Internet > Geral. Use as caixas de diálogo Fonts e Accessibility para alterar as configurações da fonte.

Se você estiver usando makeRequest(), teste o que acontece se a fonte de dados estiver inativa ou retornar um erro. Você pode simular isso alterando o URL temporariamente para outro URL.

Largura e altura do teste

A dimensão de um gadget depende muito do local em que ele é executado. Consulte a documentação do seu contêiner ou site para mais detalhes.

Ao projetar e testar seus gadgets, prepare-se para larguras arbitrárias de 200 a 600 pixels. Para determinados gadgets, a largura precisa ser ainda maior.Como regra geral, crie o gadget de forma que ele seja exibido corretamente se for fornecido mais espaço. Por exemplo, os gadgets de mapas devem preencher suas áreas, os gadgets de imagem devem se centralizar no frame e os gadgets de texto devem flutuar o texto para o topo (por exemplo, os links de clique para mais detalhes, que normalmente estão na parte inferior, devem permanecer próximos ao conteúdo, em vez de flutuar até a parte inferior da janela do gadget).

Como melhorar o desempenho dos gadgets

Se você cria um gadget que espera tráfego intenso, há etapas que você pode seguir para garantir disponibilidade e bom desempenho. Se o seu gadget tiver mais de 200.000 visualizações por dia, ou aproximadamente uma a duas solicitações por segundo, considere seguir as dicas nesta seção. Mesmo um gadget de 50 KB que recebe 200.000 solicitações por dia consome cerca de 300 GB por mês em largura de banda.

Um gadget pode ter vários motivos para atrair vários usuários. Ele pode ficar popular no diretório de conteúdo. Ou, se o gadget for usado em uma promoção ou publicidade especial, isso pode causar um tráfego intenso.

Seu objetivo para um gadget de alto tráfego deve ser renderizá-lo em 0,25 segundo (250 milissegundos) ou menos. O guia de medição de latência pode ajudar com os detalhes da medição do desempenho do seu gadget. Melhorar a capacidade de resposta do seu gadget é uma maneira segura de causar um impacto positivo na experiência do usuário. Para dicas sobre como otimizar o desempenho do gadget, consulte Otimizar para tráfego intenso. Veja dicas de gerenciamento em Como gerenciar tráfego intenso. As diretrizes gerais de teste também são especialmente importantes para gadgets muito conhecidos.

Como otimizar para tráfego intenso

Se você acha que seu gadget pode receber tráfego intenso, siga estas diretrizes:

  • Evite usar arquivos JavaScript ou CSS externos (arquivos referenciados pelos atributos "src" ou "href" em suas tags HTML) porque isso gera o custo de outra conexão de rede. Em vez disso, coloque o código JavaScript e CSS in-line na especificação do gadget.
  • Use um gadget type=html. Os gadgets que são type=url geralmente são renderizados mais lentamente do que os type=html, devido ao baixo desempenho e a compatibilidade com o cache de outros servidores de hospedagem.
  • Por padrão, o método makeRequest() armazena seu conteúdo em cache por aproximadamente uma ou duas horas. Você pode usar o parâmetro refreshInterval com essas funções para atualizar o cache com mais frequência. No entanto, o armazenamento em cache melhora o desempenho do gadget minimizando o número de solicitações enviadas a servidores remotos que hospedam conteúdo. Não solicite uma atualização mais recente do que o necessário do cache, ou você reduzirá a porcentagem de solicitações exibidas do cache. Além disso, não use técnicas de impedimento de cache, como números aleatórios ou carimbos de data/hora em URLs de busca, porque isso pode sobrecarregar os sistemas que respondem a esses URLs. Consulte Como atualizar o cache para ver detalhes sobre como definir um intervalo de atualização.
  • Armazenar em cache o conteúdo ou os valores usados com frequência usando uma ou mais das seguintes técnicas:
    • UserPref oculto

      Vantagens

      • Carregamento rápido com o gadget e nenhuma viagem de ida e volta entre servidor e cliente
      • Nenhum requisito do navegador

      Contras

      • Os dados são transmitidos via URL e estão sujeitos a restrições de tamanho do URL. Há muitos dados transmitidos para URLs de gadget, o que torna o tamanho prático dos dados baixo, com algumas centenas de caracteres no máximo.
    • WebDatabases HTML5

      Vantagens

      • Rápida
      • Armazenamento efetivo ilimitado

      Contras

      • Requer compatibilidade com o navegador
    • OpenSocial AppData

      Vantagens

      • Nenhum requisito do navegador
      • Cerca de 10 KB de espaço de armazenamento (incluindo chaves e, dependendo das restrições por contêiner)

      Contras

      • Exige uma segunda solicitação quando o gadget é carregado para buscar dados
      • Todos os dados armazenados em AppData podem ser visualizados por outras pessoas no gráfico social do usuário
  • Consulte o guia Medição de latência para ver formas de observar o desempenho do gadget. Depois, elimine os gargalos.
  • Especifique a altura e a largura de todas as tags <img> no gadget. Isso agiliza a renderização do seu gadget. Se você estiver usando gadgets.io.getProxyUrl() e inserindo o elemento de imagem diretamente no DOM, não será necessário definir as propriedades de largura e altura.
  • Em vez de vincular diretamente ao seu provedor de hospedagem, use as funções gadgets.io.getProxyUrl() para armazenar todas as imagens incorporadas em cache e embedCachedFlash() para armazenar o conteúdo em Flash. Veja abaixo um exemplo de gadget que pré-carrega imagens usando gadgets.io.getProxyUrl():

Veja um exemplo de gadget que ilustra como usar 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>

Como gerenciar alto tráfego

Estas diretrizes podem ajudar você a gerenciar um gadget de alto volume:

  • Se você estiver recebendo grandes quantidades de e-mails de usuários do gadget, use o Gmail e configure filtros para gerenciar o volume. Recomendamos o uso do endereço do formulário <username>.feedback+<gadgetname>@gmail.com na especificação do seu gadget. Isso ajuda a filtrar as mensagens recebidas dos usuários do gadget. O Gmail descarta tudo depois do sinal de adição (+), portanto, esse endereço de e-mail é mapeado para <username>.feedback@gmail.com. O Gmail tem um filtro de spam de alta qualidade.

Voltar ao início