No Google, os gadgets são aplicativos HTML e JavaScript que podem ser incorporados páginas e outros apps, incluindo o Google Sites. Esses gadgets oferecem a capacidade de incluir recursos externos conteúdo dinâmico no seu site, como aplicativos em miniatura e listas orientadas a bancos de dados, incorporados com texto e imagens para uma experiência de usuário perfeita.
Cada página do Google Sites é um possível contêiner de gadgets. Além disso, o Google Sites oferece uma API Data que pode ser usada em conjunto com gadgets para criar aplicativos avançados. Isso significa que, como desenvolvedor de gadget, você pode aproveitar a API Sites clássico e criar ferramentas interessantes para outros desenvolvedores Web e o público deles, como bem para seu próprio uso.
Quando você cria um gadget para o Google Sites, ele é disponibilizado para milhões de usuários ativos usuários. Basta enviar seu gadget para nós e ele será exibido onde os usuários poderão facilmente navegar, configurar e adicionar seu gadget aos seus Google Sites.
Agora você sabe que {sites_name_short} é uma ótima plataforma de distribuição para seu gadget, o que você está esperando? Comece a criar gadgets para o Google Sites agora mesmo!
Visão geral do gadget de sites
De forma genérica, os gadgets são pequenos utilitários que geram ou levam informações externas para a Web páginas de destino. Na sua forma mais simples, um gadget é um pequeno arquivo .xml que recupera informações com o e a capacidade de disponibilizá-los em várias páginas da Web de uma só vez. No Google Sites, inclusive nos resultados de gadget em um iframe que atua como canal para essas informações externas. Alguns gadgets não existem mais do que isso, os iframes que passam pelas informações de outro site.
Os gadgets mais avançados coletam conteúdo dinâmico e fornecem aplicativos interativos no suas 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 envolve 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 chamado pela especificação do gadget sobre HTTP para fornecer os resultados.
Gadgets feitos para Os sites podem ser usados por todos os leitores de um site. Eles tendem a ser interativos, focados em atrair em conteúdo dinâmico, e não na apresentação, e são criadas para complementar o conteúdo da site.
Um gadget de agenda é um bom exemplo dessa distinção. Um gadget de agenda personalizado no mostraria a agenda do usuário conectado por padrão, enquanto um gadget de agenda do Google Sites pode permitir que os colaboradores selecionem entre várias agendas específicas de cada local.
Os gadgets do Google Sites permitem que você apresente diversas informações de fontes externas (por exemplo, diagramas em tempo real de painéis de desempenho distintos, mas relacionados) em uma única página, junto com texto explicativo publicado diretamente no Google Sites. Isso economiza espaço visual durante a coleta informações distintas sobre o mesmo tópico na mesma visualização. Os gadgets também permitem que você inclua conteúdo dinâmico que seria impedido pelas verificações de segurança do Google Sites.
Aviso: os gadgets criados com a versão legada
A API dos gadgets pode funcionar no Google Sites, mas não tem suporte oficial. Gadgets integrados e baseados em feed
não são suportados da mesma forma. Por isso, o Google recomenda que você crie todos os gadgets do Google Sites usando a
apps.* atuais Secret Manager. Confira esta postagem para ver 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 usado, que faz pouco mais do que fornecer um iframe para transmitir outros conteúdos 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 seu gadget fizer, seus arquivos devem residir na World Wide Web para serem encontrados e usados. Qualquer local on-line acessível por HTTP sem autenticação fazer. Lembre-se de que seu gadget terá que ser publicado em um diretório público para ser selecionado. Caso contrário, os usuários precisam incorporá-lo inserindo diretamente seu URL.
Estas são as opções de hospedagem do seu gadget:
- App Engine: armazena todos os arquivos exigidos pelos seus gadgets. Ele exige alguma configuração, como a criação de projetos e uploads de arquivos subsequentes. No entanto, ele será dimensionado prontamente para um grande número de usuários. É possível criar um aplicativo para armazenar todos os seus gadgets e outro para disponibilizar 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 implantá-los no App Engine sempre que fizer alterações. Se você tiver um arquivo /static/gadget.xml, seu URL será: http://<nome-do-aplicativo>.appspot.com/static/gadget.xml
- Qualquer local on-line de sua escolha - totalmente sob seu controle, mas também as responsabilidades completas. O tempo de inatividade no seu servidor pode resultar em uma interrupção do serviço para os usuários dos seus gadgets.
Como criar seu gadget
Os gadgets são apenas HTML e (opcionalmente) JavaScript, Flash ou Silverlight unidos em XML. O Guia do desenvolvedor de gadgets fornece todos os detalhes necessários para a criação de seus próprios gadgets. Além disso, os modelos do OpenSocial podem ser usados para criar rapidamente aplicativos sociais em gadgets.
Estas são as etapas avançadas para criar um gadget do Google Sites:
- Decida onde seu gadget será hospedado. Consulte a seção Como hospedar seu gadget para ver as descrições das opções.
- Crie um novo arquivo .xml que servirá como sua especificação usando o editor de texto de sua preferência.
- Decida o tipo de conteúdo, HTML ou URL, e especifique-o no arquivo .xml do gadget, desta forma:
<Content type="html">
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 URL. Consulte Como escolher um tipo de conteúdo para uma descrição completa das diferenças entre eles. - 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 saber como examinar gadgets existentes.
- Defina preferências básicas para o gadget que podem ser alteradas pelos usuários. Consulte Definir preferências de usuário para instruções. Para oferecer uma configuração mais avançada, consulte a seção Como permitir a configuração avançada do usuário.
- Defina as preferências do módulo que somente o autor do gadget poderá alterar. Consulte Definir preferências de gadget para mais detalhes.
- Testar o gadget. Consulte a seção Como testar seu gadget para obter instruções.
Como incorporar o seu gadget
Os gadgets podem ser incorporados em páginas do Google Sites selecionando-os no diretório de gadgets do Google Sites (que é sincronizado com o diretório de gadgets do IAB) ou incluindo seu URL diretamente.
Para incorporar um gadget no Google Sites:
- Acesse a página Sites que contém o novo gadget.
- Abra a página para edição.
- Selecione Inserir > Mais gadgets.
- Pesquise e selecione o gadget nas categorias à esquerda ou clique em Adicionar gadget por URL e cole o URL no arquivo .xml. Em seguida, clique em Adicionar.
Dica: o mesmo método "Adicionar gadget por URL" pode ser usado para incorporar gadgets do iTunes e de qualquer outro lugar on-line. - Especifique as dimensões do gadget, selecione as configurações disponíveis e clique em OK. O gadget é adicionado à sua página.
- Salve a página para visualizar e testar seu gadget no site.
Como testar seu gadget
Depois de criar o seu gadget, você deve testá-lo por completo antes de usá-lo e permitir que outras pessoas e fazer o mesmo. Teste seu gadget manualmente criando um ou mais sites de teste e incorporando seu gadget. Consulte a seção Como incorporar seu gadget para instruções mais precisas. O a funcionalidade e aparência de seu gadget depende do site que contém reimplantá-lo. Portanto, a melhor maneira de depurar o seu gadget é testá-lo no contexto de uma site Google real. Alterne entre vários temas do Google Sites para garantir que seu gadget apareça corretamente em cada um deles.
Ao testar seu gadget, você inevitavelmente descobrirá bugs e precisará fazer correções ao arquivo .xml do gadget. Você deve desativar o armazenamento em cache do gadget enquanto ajustar 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 para o Google Sites não fazer isso. Para ignorar o cache durante o desenvolvimento, adicione isto ao final do URL da página do Google Sites que contém o gadget (e não o URL do arquivo .xml da especificação do gadget):
?nocache=1
O Google Sites fornece uma interface de usuário padrão para adicionar e configurar gadgets. Quando você adicionar um gadget, ele exibirá uma visualização e todos os parâmetros UserPref que podem ser configurados. Testar a atualização de diversos valores de configuração e
adicionar o gadget ao site de teste. Confirme se o seu gadget funciona como esperado no
site em si. Você deve testar se
Qualquer UserPref que você tenha definido pode ser configurado corretamente pelo administrador do site.
Em seguida, consulte a seção Como se preparar para publicação em Como publicar seu gadget para realizar outros testes.
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, pela seção UserPref do arquivo de especificações do gadget. Normalmente, eles afetam dimensões, barras de rolagem, bordas, títulos e configurações específicas de gadgets, como mostrado nesta captura de tela:
No entanto, há muitos casos em que os gadgets se beneficiam de preferências mais avançadas do que os componentes UserPref padrão oferecem. As preferências geralmente precisam incluir recursos como lógica de negócios personalizada, validações ou seletores. A interface gerada a partir das seções UserPref do gadget suporta um número limitado de tipos de dados (string, tipo enumerado etc.), portanto, a validação de entradas como URLs ou datas não pode ser realizada.
Além disso, em contêineres como o iGoogle, nos quais o visualizador e o editor são os mesmos, os autores de gadgets podem estender a configuração como parte da visualização padrão. No Google Sites, o leitor nem sempre é o editor. Por isso, 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 podem permitir que qualquer usuário modifique as preferências, somente 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 com muitas preferências e tipos de dados adicionais, como mostra a captura de tela:
A visualização da configuração é exibida no lugar das definições de UserPref no momento da inserção ou da edição e permite que você defina as preferências do usuário com uma interface personalizada. E você pode ter elementos de entrada personalizados, como para escolher uma posição em um mapa em vez de inserir coordenadas de mapa.
Os desenvolvedores podem usar as APIs setprefs padrão para salvar as preferências nessa visualização. Consulte a Referência XML de gadgets e a seção Como salvar o estado do curso Conceitos básicos para desenvolvedores para 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 após as seções UserPref com uma tag de abertura semelhante a:
<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>
Este exemplo e outros gadgets específicos do Sites com visualizações de configuração estão disponíveis aqui:
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
Seguir 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 se mistura perfeitamente com os muitos temas usados no Google Sites. Consulte Visão geral de gadgets para obter detalhes sobre a criação de gadgets. O restante esta seção apresenta diretrizes específicas para os gadgets do Google Sites.
- Não coloque informações confidenciais em especificações ou títulos de gadget porque seu gadget 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 Fitbit ou para qualquer outro serviço de listagem pública. Em vez disso, faça com que todos os usuários a incluam somente por 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, apenas o URL do segundo arquivo é exposto. Consulte a seção Como escolher um tipo de conteúdo em Fundamentos do desenvolvedor para ver as diferenças entre os gadgets de HTML e de URL e a seção "Os gadgets são públicos" em "Como criar seus próprios gadgets" para ver outras formas de mascarar seu gadget.
- E o mais importante: teste seu gadget em vários sites diferentes. Modifique a cor do plano de fundo, a cor do texto e a face da fonte do site para garantir que seu gadget combine com uma ampla variedade de modelos.