NOVIDADES100 _{Tem de Tudo}

Aprenda a Construir Gadgets

Veja como Construir Aplicativos para o Orkut, Igoogle e Outros Containers

Aprenda a construir aplicativos, os chamados gadgets, é extremamente importante para você que quer desenvolver na web. São ferramentas extremamentes funcionais e rápidas para divulgar seus trabalhos, com a vantagem de ter alcançe mundial. Aqui você vai compreender o necessário para dar início a construção de seus próprios gadgets para exibí-los no Orkut, Igoogle, etc.
Para começar, crie uma pasta e nomeie-a como gadget, em seguida dentro desta pasta, você deve criar duas pastas, uma chamada de messages, aonde você colocará os arquivos externos em xml, outra chamada de images, aonde serão colocadas entre outras, as imagens thumbnail.jpg (Atenção: Esta imagem deve ter a largura de 120px e a altura de 60px, pode ser do tipo gif, jpg ou png) e screesnshot.jpg (Esta imagem deve ter a largura de 280px e a altura de 240px, pode ser do tipo gif, jpg ou png), são arquivos obrigatórios.
Atenção:
A modêlo de apresentação deste primeiro exemplo de gadget (são três exemplos agora) foi alterado para que possa ser exibido conteúdos externos, através de iframes, desta forma poderão ser apresentados conteúdos mais variados e dinâmicos. Veja como exemplo este Aplicativo que você pode utilizá-lo para criar seu app.
Agora que já está criado o ambiente de desenvolvimento do gadget, copie o script abaixo, cole em bloco de notas ou outro editor de texto e salve na pasta principal (gadget), com um nome que identique o conteúdo do seu aplicativo e com a extensão xml, Ex: meu_gadget.xml.
Baixe Aqui o Pacote Completo do Gadget 'Natal por Email'

Note que você deve alterar todos os trechos de cor verde, para descrever seu próprio aplicativo.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="__MSG_title__"
title_url="http://www.seu_site.com.br"
category="__MSG_category__"
author="__MSG_author__"
author_photo="__MSG_author_photo__"
author_link="__MSG_author_link__"
author_aboutme="__MSG_author_aboutme__"
author_quote="__MSG_author_quote__"
author_affiliation="__MSG_author_affiliation__"
author_email="__MSG_author_email__"
author_location="__MSG_author_location__"
directory_title="__MSG_directory_title__"
thumbnail="__MSG_thumbnail__"
description="__MSG_description__"
screenshot="__MSG_screenshot__"
width="300"
height="320"
scrolling="true">
<Require feature="opensocial-0.8" />
<Require feature="opensocial-templates" />
<Require feature="opensocial-data" />
<Require feature="views" />
<Locale messages="http://www.seu_site.com.br/gadget/messages/ALL_ALL.xml" />
<Locale lang="pt-BR" country="BR" messages="http://www.seu_site.com.br/gadget/messages/pt-BR_BR.xml" />
<Locale lang="pt-PT" country="PT" messages="http://www.seu_site.com.br/gadget/messages/pt-PT_PT.xml" />
</ModulePrefs>
<UserPref name="color" display_name="__MSG_color__" default_value="green" datatype="enum">
<EnumValue value="red" display_value="__MSG_red__" />
<EnumValue value="green" display_value="__MSG_green__" />
<EnumValue value="blue" display_value="__MSG_blue__" />
<EnumValue value="gray" display_value="__MSG_gray__" />
<EnumValue value="purple" display_value="__MSG_purple__" />
<EnumValue value="black" display_value="__MSG_black__" />
</UserPref>
<Content type="html" view="home">
<![CDATA[

<html>
<head><title>Titulo do Gadget</title>
<style type="text/css">
body{direction:ltr;width:100%;height:auto;background:#ff0;text-align:center;margin:0px;padding:0px;overflow:hidden;}
object, embed{width:90%;height:230px;border:0px;border-right:5px double #3cf;border-left:5px double #3cf;}
h1{font-size: 150%;margin:3px;}
h2{font-size: 90%;margin:2px;}
</style>
</head>
<body>
<div id="load_video"></div>
<script type="text/javascript">
displayMsg();
function displayMsg(){
var prefs = new _IG_Prefs();
document.getElementById("load_video");
document.fgColor = prefs.getString("color");
document.write("<h1>__MSG_title__</h1>");
document.write("<a href='http://www.seu_site.com.br/gadget/index.php' target='_parent'><img src='http://www.seu_site.com.br/gadget/images/screenshot.jpg' alt='Gadget' title='Gadget'></a>");
document.write("<h2>__MSG_rodape__</h2>");
}
</script>
</body>
</html>
]]>
</Content>
<Content type="html" view="default">
<![CDATA[
<! --Aqui outra exibicao para o Igoogle -->
<html>
<head><title>Titulo do Gadget</title>
<style type="text/css">
body{direction:ltr;width:100%;height:auto;background:#ff0;text-align:center;margin:0px;padding:0px;overflow:hidden;}
object, embed{width:90%;height:230px;border:0px;border-right:5px double #3cf;border-left:5px double #3cf;}
h1{font-size: 150%;margin:3px;}
h2{font-size: 90%;margin:2px;}
</style>
</head>
<body>
<div id="load_video"></div>
<script type="text/javascript">
displayMsg();
function displayMsg(){
var prefs = new _IG_Prefs();
document.getElementById("load_video");
document.fgColor = prefs.getString("color");
document.write("<h1>__MSG_title__</h1>");
document.write("<a href='http://www.seu_site.com.br/gadget/index.php' target='_parent'><img src='http://www.seu_site.com.br/gadget/images/screenshot.jpg' alt='Gadget' title='Gadget'></a>");
alt='Gadget' title='Gadget'>");
document.write("<h2>__MSG_rodape__</h2>");
}
</script>
</body>
</html>
]]>
</Content>
<Content type="html" view="canvas">
<![CDATA[

<html>
<head><title>Titulo do Gadget</title>
<style type="text/css">
body{direction:ltr;width:100%;height:auto;background:#ff0;text-align:center;margin:0px;padding:0px;overflow:hidden;}
object, embed{width:90%;height:420px;border-right:5px double #3cf;border-left:5px double #3cf;}
h1{font-size: 370%;margin:15px;}
h2{font-size: 220%;margin:10px;}
</style>
</head>
<body>
<div id="load_video"></div>
<script type="text/javascript">
displayMsg();
function displayMsg(){
var prefs = new _IG_Prefs();
document.getElementById("load_video");
document.fgColor = prefs.getString("color");
document.write("<h1>__MSG_title__</h1>");

document.write("<iframe src='http://www.seu_site.com.br/gadget/index.php' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' scrolling='0' scrollbar='0'></iframe>");
document.write("<h2>__MSG_rodape__</h2>");
}
</script>
</body>
</html>
]]>
</Content>
<Content type="html" view="profile">
<![CDATA[

<style type="text/css">
body{direction:ltr;width:100%;height:100%;background:#ff0;text-align:center;margin:0px;padding:0px;overflow:hidden;}
#content_div{width:100%;height:auto;text-align:center;margin:0px;padding:0px;}
img{width: 80%;height:180px;border:0px;border-left:5px double #3cf;border-right:5px double #3cf;}
a:link, a:visited{text-decoration:none;text-align:center;}
h1{font-size:160%;margin:10px;}
h2{font-size:100%;margin:5px;font-family:arial;}
</style>
<script type="text/os-template" xmlns:os="http://ns.opensocial.org/2008/markup" xmlns:osx="http://ns.opensocial.org/2009/extensions">
<body>
<div id="content_div">
<h1> __MSG_title__</h1>
<osx:NavigateToApp>
<img src="http://www.seu_site.com.br/gadget/images/screenshot.jpg" alt="Titulo do Gadget" title="Titulo do Gadget">
</osx:NavigateToApp>
<h2>__MSG_msg_capa__</h2>
</div>
</body>
</script>
]]>
</Content>
</Module>

Arquivos Externos

Agora copie os arquivos que serão instaladas na pasta messages.
Atenção: Este são os arquivos que irão atender automaticamente a localização em que seu aplicativo estará sendo exibido, são os arquivos que você deve fornecer o idioma referente a cada País que deseja exibir seu gadget. Observe no primeiro arquivo (acima), que eles são chamados na sessão Locale messages. No caso aqui, serão três arquivos com o mesmo idioma (já que português de Portugal não difere muito do português do Brasil), ou seja, você deve salvar o mesmo código três vezes, nomeando-os respectivamente ALL_ALL.xml (padrão), pt-BR_BR.xml e o terceiro pt-PT_PT.xml.
Note que você deve alterar todos os trechos de cor verde, para descrever seu próprio aplicativo.

<?xml version="1.0" encoding="UTF-8" ?>
<messagebundle>
<msg name="Titulo_Gadget">
Título do seu Gadget
</msg>
<msg name="color">Cor</msg>
<msg name="red">Vermelho</msg>
<msg name="green">Verde</msg>
<msg name="blue">Azul</msg>
<msg name="gray">Cinza</msg>
<msg name="purple">Purpura</msg>
<msg name="black">Preto</msg>
<msg name="author_photo">http://www.seu_site.com.br/images/sua_imagem.jpg</msg>
<msg name="title">Título</msg>
<msg name="rodape">Mensagem no Rodape</msg>
<msg name="author">Seu nome ou apelido</msg>
<msg name="msg_capa">Mensagem para a Exibição de Perfil do Orkut</msg>
<msg name="author_email">Seu Email Aqui</msg>
<msg name="directory_title">Nome do Seu Gadget</msg>
<msg name="author_link">http://www.seu_site.com.br</msg>
<msg name="author_aboutme">Pequena descricao sobre voce</msg>
<msg name="author_quote">Uma pensamento ou frase de efeito que diga sobre voce</msg>
<msg name="author_affiliation">www.seu_site.com.br</msg>
<msg name="author_location">sua_Cidade, seu_Estado, seu_País</msg>
<msg name="description">Descrição do seu Aplicativo</msg>
<msg name="thumbnail">http://www.seu_site.com.br/gadget/images/thumbnail.jpg</msg>
<msg name="screenshot">http://www.seu_site.com.br/gadget/images/screenshot.jpg</msg>
<msg name="category">Videos</msg>
</messagebundle>

Pronto, agora com todos os arquivos e pastas devidamente configurados você deve fazer o upload para seu servidor de hospedagem. Para testar, ou mesmo salvar o aplicativo no servidor do Google, visite Editor de Gadget do Google, Faça Login e no Editor, em File, click em Opem File Url e digite o local aonde você instalou seu aplicativo, depois é só salvar. Não esqueça de também publicá-lo no Diretório de Gadgets do Google em File e Publish.

Para testar no Orkut

Acesse o Sandbox do Orkut e inscreva-se através do formulário para utilizar ferramentas do Orkut para desenvolvedores. Depois disso feito, acesse seu perfil no Novo Orkut (Sandbox), veja na guia Aplicativos, no menu que se abrirá click em Adicionar Aplicativo e na lateral esquerda Enviar seu Aplicativo, você verá então uma caixa para digitar o url do seu gadget, insira-o e envie. Feito isto, seu aplicativo já estará disponível para você visualizar no botão Ver e para enviar definitivamente para o Orkut no botão Enviar. Depois que você constatar que seu aplicativo já está pronto, click em Enviar, aparecerá então um token (código de verificação) que você deverá copiá-lo e colá-lo no seu aplicativo (meu_gadget.xml). Insira-o logo após o CDATA do view profile. Faça o upload novamente do arquivo para seu servidor, aguarde alguns segundos e click em Enviar, observe para ver se aparece a informação verificado, se não, envie-o novamente até que seja verificado de fato. Quando isto ocorrer então seu aplicativo estará sendo analisado pelo pessoal do Orkut, que lhe retornará caso tenha sido aceito ou não. Se seu gadget foi rejeitado pelo Orkut você terá as informações do(s) motivo(s), para que corrija-o e envie novamente.
Obs: Este post foi testado diretamente daqui para evitar pequenos erros que resultariam em não funcionar devidamente. Abaixo, dois botões para adicionar respectivamente ao Igoogle e ao Orkut, é o mesmo gadget do exemplo deste post, é muito simples, apenas um vídeo, foi criado apenas para servir de exemplo.

→ Adicionar ao Igoogle
→ Adicionar ao Orkut

Veja Também…