No Google, os players são aplicativos HTML e JavaScript que podem ser incorporados em páginas da Web e outros apps, inclusive no Google Sites. Esses gadgets oferecem a capacidade de incluir conteúdo externo e dinâmico no seu site, como aplicativos em miniatura e listas baseadas em banco de dados, incorporados com texto e imagens para uma melhor experiência do usuário.
Cada página do Google Sites é um possível contêiner de gadget. Além disso, o Google Sites oferece uma API Data que pode ser usada com gadgets para criar aplicativos avançados. Isso significa que, como desenvolvedor de gadgets, você pode usar a API Sites clássica para criar ferramentas interessantes para outros desenvolvedores da Web e o público deles e para uso próprio.
Quando você cria um gadget para o Google Sites, ele é disponibilizado para milhões de usuários ativos. Basta enviar seu gadget, e ele aparecerá onde os usuários podem navegar, configurar e adicionar facilmente seu gadget aos sites deles.
Agora que você sabe que {sites_name_short} é uma ótima plataforma de distribuição para seu gadget, o que está esperando? Comece a criar gadgets para o Google Sites agora mesmo!
Visão geral do gadget do Google Sites
Geralmente, os gadgets são pequenos utilitários que geram ou extraem informações externas para páginas da Web. Na sua forma mais simples, um gadget é um pequeno arquivo .xml que recupera informações com a capacidade de disponibilizá-las em várias páginas da Web de uma só vez. No Google Sites, incluir um gadget resulta em um iframe que atua como canal para as informações externas. Alguns gadgets não são mais do que isso: iframes que passam por informações de outro site.
Os gadgets mais avançados coletam conteúdo dinâmico e fornecem aplicativos interativos nas páginas do Google Sites. Consulte Exemplo de gadget.
Os gadgets consistem nos seguintes componentes:
- Arquivo de especificação de gadget: um arquivo .xml que une funções HTML e JavaScript.
- Página do contêiner: a página da Web em que o gadget é inserido, neste caso um site Google.
- Fonte de dados externa: é opcional e pode residir no mesmo local que o arquivo .xml, mas é frequentemente chamada pela especificação do gadget sobre HTTP para fornecer resultados.
Os gadgets criados para o Google Sites podem ser usados por todos os leitores de um site. Eles tendem a ser interativos, focados na inserção de conteúdo dinâmico em vez de na apresentação, e são projetados para complementar o conteúdo do site.
Um gadget de agenda é um bom exemplo dessa distinção. Um gadget de agenda personalizado no provavelmente mostra a agenda do usuário conectado por padrão, enquanto um gadget de agenda no Google Sites pode permitir que os colaboradores selecionem várias agendas específicas do local.
Com os gadgets do Google Sites, você pode apresentar várias informações de fontes externas (como diagramas ativos de painéis de desempenho distintos, mas relacionados) em uma única página com um texto explicativo publicado diretamente no Google Sites. Isso economiza espaço visual e coleta informações diferentes sobre o mesmo tema na mesma visualização. Os gadgets também permitem que você inclua conteúdo dinâmico que, de outra forma, seria impedido pelas verificações de segurança do Google Sites.
Aviso: os gadgets criados com a API de gadgets legada
podem funcionar no Google Sites, mas não são oficialmente compatíveis. Do mesmo modo, não há suporte para os gadgets integrados e com base em feeds. Por esse motivo, o Google recomenda que você crie todos os gadgets do Google Sites usando os modelos.* atuais API. Consulte esta postagem para conferir uma explicação:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Exemplo de gadget
Veja um gadget "Incluir" simples, mas muito conhecido, que faz pouco mais do que fornecer um iframe para transmitir outro conteúdo da Web:
<?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>
Consulte Primeiros passos: gadgets.* API para uma descrição completa das tags de gadget e do conteúdo esperado.
Como hospedar seu gadget
Independentemente do que o gadget faça, os arquivos dele devem residir na World Wide Web para serem encontrados e usados. Qualquer local on-line acessível por HTTP sem autenticação serve. Lembre-se de que seu gadget precisa ser publicado em um diretório público para ser selecionado. Caso contrário, os usuários precisarão incorporá-la inserindo diretamente seu URL.
Estas são as opções de hospedagem de gadget:
- App Engine: é capaz de armazenar todos os arquivos exigidos por seus gadgets. Exige alguma configuração, ou seja, a criação de projetos e uploads de arquivos subsequentes. No entanto, ele é dimensionado prontamente para um grande número de usuários. Você pode criar um aplicativo para armazenar todos os seus gadgets e outro para fornecer arquivos estáticos, incluindo um arquivo app.yaml semelhante a:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Se você colocar todos os arquivos do gadget no diretório estático, poderá editá-los no diretório local e implantar no App Engine sempre que fizer alterações. Se você tiver um arquivo /static/gadget.xml, o URL dele será: http://<nome-do-seu-app>.appspot.com/static/gadget.xml
- Qualquer local on-line de sua escolha: totalmente sob seu controle, mas também de sua total responsabilidade. O tempo de inatividade no seu servidor pode resultar em interrupção para os usuários dos seus gadgets.
Como criar seu gadget
Os gadgets são apenas HTML e (opcionalmente) JavaScript, Flash ou Silverlight agrupados em XML. O Guia do desenvolvedor de gadgets fornece todos os detalhes necessários para a criação dos seus próprios gadgets. Além disso, os modelos OpenSocial podem ser usados para criar rapidamente aplicativos sociais em gadgets.
Estas são as etapas avançadas para criar um gadget para o Google Sites:
- Decida onde seu gadget será hospedado. Consulte a seção Como hospedar seu gadget para ver descrições das opções.
- Crie um novo arquivo .xml que vai funcionar como especificação no seu editor de texto.
- Decida o tipo de conteúdo, HTML ou URL, e especifique no arquivo .xml do gadget, desta forma:
<Content type="html">
Isso quase sempre será HTML, que pressupõe que todo o conteúdo é fornecido diretamente no arquivo .xml. No entanto, se você pretende fornecer o conteúdo em um arquivo separado, use o tipo de conteúdo de URL. Consulte Como escolher um tipo de conteúdo para ver uma descrição completa das diferenças. - Crie conteúdo no arquivo .xml do gadget ou em arquivos separados chamados pela especificação. Consulte a seção Como visualizar gadgets de exemplo para conhecer formas de examinar gadgets existentes.
- Defina as preferências básicas do gadget que podem ser alteradas pelos usuários. Consulte Como definir preferências do usuário para ver instruções. Para fornecer configurações mais avançadas, consulte a seção Como permitir a configuração avançada do usuário.
- Defina as preferências do módulo que apenas o autor do gadget pode alterar. Consulte Como definir preferências de gadget para ver mais detalhes.
- Testar o gadget. Consulte a seção Como testar seu gadget para obter instruções.
Como incorporar seu gadget
Os gadgets podem ser incorporados nas páginas do Google Sites selecionando-os no diretório de gadget do Google Sites (que é sincronizado com o diretório de gadgets do iGoogle) ou incluindo seu URL diretamente.
Para incorporar um gadget ao Google Sites:
- Vá para a página Sites que contém o novo gadget.
- Abra a página para edição.
- Selecione Inserir > Mais gadgets.
- Procure o gadget, selecione-o nas categorias à esquerda ou clique em Adicionar gadget por URL e cole o URL no seu arquivo .xml. Em seguida, clique em Add.
Dica: o mesmo método "Adicionar gadget por URL" pode ser usado para incorporar gadgets do iGoogle e de qualquer lugar on-line. - Especifique as dimensões do gadget, selecione uma das configurações disponíveis e clique em OK. O gadget será adicionado à sua página.
- Salve a página para visualizar e testar seu gadget no site.
Testando o seu gadget
Depois de criar o gadget, é preciso testá-lo completamente antes de usá-lo e permitir que outras pessoas façam o mesmo. Teste seu gadget manualmente. Para isso, crie um ou mais sites de teste do Google e incorpore o gadget. Consulte a seção Como incorporar seu gadget para ver as etapas exatas. A funcionalidade e a aparência do seu gadget dependem do site que o contém. Portanto, a melhor maneira de depurar seu gadget é testando-o no contexto de um site Google real. Tente alternar entre vários temas do Google Sites para garantir que o gadget apareça corretamente em cada um deles.
Ao testar o gadget, você inevitavelmente vai descobrir bugs e precisar fazer correções no arquivo .xml dele. Desative o armazenamento em cache dos gadgets enquanto ajusta o XML. Caso contrário, as mudanças não vão aparecer na página. As especificações do gadget são armazenadas em cache, a menos que você peça ao Google Sites para não fazer isso. Para ignorar o cache durante o desenvolvimento, adicione-o ao final do URL da página do Google Sites que contém o gadget (e não ao URL do arquivo .xml de especificação do gadget):
?nocache=1
O Google Sites fornece uma interface de usuário padrão para adicionar e configurar gadgets. Quando você adiciona um gadget, ele exibe uma visualização e todos os parâmetros UserPref que podem ser configurados. Tente atualizar diversos valores de configuração e adicionar o gadget ao site de teste. Confirme se o gadget funciona como esperado no próprio site. Teste se
qualquer UserPref definido pode ser configurado corretamente pelo administrador do site.
Em seguida, consulte a seção Como se preparar para a publicação da publicação do seu gadget para que outros testes sejam realizados.
Como permitir a configuração avançada do usuário
Todos os gadgets podem oferecer a capacidade de definir preferências básicas do usuário, feita por meio da seção UserPref do arquivo de especificações do gadget. Isso geralmente afeta dimensões, barras de rolagem, bordas, títulos e configurações específicas do gadget, como mostrado nesta captura de tela:
Mas há muitos casos em que os gadgets se beneficiam de preferências mais avançadas do que os componentes padrão do UserPref oferecem. As preferências geralmente precisam incluir recursos como lógica de negócios personalizada, validações ou seletores. A interface gerada nas seções UserPref do gadget é compatível com um número limitado de tipos de dados (string, tipo enumerado etc.). Portanto, não é possível realizar a validação de entradas, como URLs ou datas.
Além disso, em contêineres como o iGoogle, em que o visualizador e o editor são os mesmos, os autores do gadget podem ampliar a configuração como parte da visualização padrão. No Google Sites, o visualizador nem sempre é o editor. Portanto, o autor do gadget não pode garantir que o usuário tenha acesso para atualizar as preferências. Os contêineres sociais, como o Google Sites, não permitem que os usuários modifiquem as preferências, apenas o autor.
No Google Sites, a interface básica de preferências de gadget gerada por UserPref pode ser substituída por uma visualização de configuração, em que é possível fornecer muitas preferências e tipos de dados adicionais, como na captura de tela mostrada aqui:
A visualização de configuração aparece no lugar das configurações de UserPref no momento da inserção ou no momento da edição e permite que você defina as preferências do usuário com uma interface personalizada. Além disso, você pode ter elementos de entrada personalizados, como para escolher uma posição em um mapa em vez de inserir coordenadas.
Os desenvolvedores podem usar as APIs setprefs padrão para salvar preferências nessa visualização. Consulte a Referência XML de gadgets e a seção "Salvar estado" dos princípios básicos para desenvolvedores para ver mais detalhes. Essas visualizações permitem que o aplicativo do contêiner forneça informações de configuração complementares e são estabelecidas nos arquivos de especificação .xml do gadget seguindo as seções UserPref, com uma tag de abertura semelhante:
<Content type="html" view="configuration" preferred_height="150">
Por exemplo, o gadget news.xml que fornece a visualização de configuração acima contém esta seção:
<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>
Confira este exemplo e outros gadgets específicos do Google Sites com visualizações de configuração:
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
Segue as práticas recomendadas para gadgets do Google Sites
Os usuários de sites querem ter uma boa aparência na Web. Siga estas práticas recomendadas para que seu gadget seja integrado perfeitamente aos vários temas usados no Google Sites. Consulte Visão geral de gadgets para obter detalhes sobre a criação de gadgets. O restante desta seção apresenta diretrizes específicas para os gadgets do Google Sites.
- Não coloque informações confidenciais nas especificações ou títulos do gadget, pois ele pode ser visto pelo público. Por exemplo, não inclua nomes de projetos internos.
- Para minimizar a visibilidade do seu gadget, não o envie para o diretório de gadgets do iGoogle ou para qualquer outro serviço de listagem pública. Em vez disso, faça com que todos os usuários o incluam somente pelo URL. Além disso, você pode criar um gadget do tipo URL (em vez do tipo HTML típico contendo todo o conteúdo) que simplesmente chama outro arquivo para seu conteúdo. Com essa opção de passagem, somente o URL do segundo arquivo é exposto. Consulte a seção Como escolher um tipo de conteúdo dos Conceitos básicos para desenvolvedores para ver as diferenças entre gadgets de HTML e URL e a seção Os gadgets são públicos de Como criar seus próprios gadgets para outras formas de mascarar seu gadget.
- Mais importante ainda, teste seu gadget em vários sites diferentes. Modifique a cor do plano de fundo, a cor do texto e a fonte do site para garantir que seu gadget combine com uma ampla variedade de modelos.