سبتمبر 2012

Os primeiros passos na criação de um widget module xml para Blogger; sei que muitos links não funcionam, mesmo assim é bom para quem está iniciando o estudo, ler algumas informações antes de criar o projeto, então acesse developers.google.com/gadgets.
Será possível fazer muito, porém é preciso ter um conhecimento básico de HTML, CSS e JavaScript, além do XML que é muito fácil de entender.
  • <module> indica que este arquivo XML contém um gadget.
  • <ModulePrefs> contém informações sobre o gadget, e seu autor.
  • <Require Feature="opensocial-0.8" /> denota uma característica necessária do dispositivo - neste caso, a API OpenSocial (v0.8).
  • <Require Feature="minimessage" /> denota uma característica necessária do dispositivo - neste caso, o nosso exemplo.
  • <Content Type="html"> indica que o tipo de gadget conteúdo é HTML. Este é o tipo de conteúdo recomendado para recipientes do OpenSocial, mas gadgets para outros recipientes, como o iGoogle apoiar outros tipos de conteúdo.
  • <[CDATA![ aqui... ] ]> contém a maior parte do gadget, incluindo todo o HTML, CSS e JavaScript (ou referências a esses arquivos). O conteúdo desta secção deve ser tratado como o conteúdo do corpo tag em uma página HTML genérico.

Seu widget poderá ser aplicado ao IGoogle Widget Verbratecajuda do Blogger.

Inicialmente seu projeto será similar a este simples estudo verbratecajuda.

O mais importante é que somente o administrador poderá modificar o widget, sabemos que as pessoas retiram o link, os créditos. Isto não será possível, ninguém poderá modificar seu xml sem a sua autorização.

Primeiro é preciso criar o projeto as instruções são bem claras e o editor de gadgets do Google Gadget Editor não está funcionando mais(desativado).
https://developers.google.com/gadgets/docs/tools#GGE
Novo xml pronto:
https://verbratecajuda.googlecode.com/svn/JJ
Agora vamos ver algumas imagens do processo de criação de um projeto widget:

Como podemos ver na imagem é tudo bem simples, escolha um nome para o seu projeto, coloque uma pequena descrição, procure sempre preencher de acordo com o conteúdo, assim como no blog escolhe um título para postagem condizente com o conteúdo do artigo.

O controle de versão inicialmente não será utilizado, mas deve ser escolhido, pois conforme seu gadget for modificado, melhorado, ganhará uma nova versão. A licença conforme está nos termos de uso deve ser de código aberto. Algumas palavras podem ser inseridas para que o internauta possa localizar seu projeto na pesquisa do Google(chamamos de indexação). Agora é só clicar em criar projeto e está feito.

O XML não pode conter erro, verfique toda a codificação cada vez que editar um arquivo, Commmit Log deve ser referente a modificação feita na versão. O botão Cometer atualizará o arquivo.


Aqui vemos o link para editar o arquivo, simplesmente abrir o editor.

O arquivo pode ser enviado de seu computador, clica em downloads, escolher arquivo, num procedimento normal, simples e bem definido.

Explore os recursos que o Google oferece!

Para ver o arquivo obter o url, e este é o url que permitirá ser inserido no seu blog como mostrado na postagem criando-widget-blogger inserindo por url.

Aqui acredito que o internauta já obteve todas as informações necessárias para começar a usar o GGE e aplicar widgets que podem ser compartilhados e não serão modificados como os simples gadges de HTTML/javascript do Blogger.

Quando de volta ao Blogger para adicionar e testar, encontrei a antiga interface, por um minuto apenas, adicionou o widget normalmente, percebi que alguns links não funcionam outros são redirecionados e há os que levam para interface antiga do Blogger.


Obrigado pela atenção e uma boa navegação!




Tutorial completo.

Hoje veremos como é o procedimento de instalação de um widget pelo url, seu próprio widget, no painel há o link adicionar um gadget. Quando clicado abrirá uma janela, e é bom estar com o url do arquivo.xml do gadget desejado, aqui no caso usarei o mesmo até para uma melhor comparação: https://verbratec-gadgets.googlecode.com/svn/helloverbratecajuda.xml
Ao clicar no link abrirá esta janela e então aparecerá a opção próprio
Perceba que a opção seu próprio está selecionada, cole o caminho(URL) do arquivo.xml e click em adionar por url. Lembre-se sempre de usar um blog de testes para os seus estudos.
Conforme o widget modulo for construido apresentará opções de configuração, neste exemplo pode ser ajustada a altura, bem como é possível editar o título.
Mas Jair como que faz o widget? Calma, muita calma, é preciso antes saber como instala para poder testar, ou seja: vai fazendo seu código e vai testando, facilita muito para ao encontrar um erro resolver sem esquentar a "cuca" ok? Uma vez configurado click em salvar.
Aqui o procedimento é o mesmo arrasta para a posição desejada, confere, visualiza e salva.
Para terminar esta segunda parte veja como a renderização é igual.
Para editar a altura diretamente no código quando no modo apresentado na primeira parte, já aqui vimos a interface gráfica onde se pode fazer a edição de uma forma muito mais simples.
Na terceira parte iremos conhecer o ambiente onde tudo começa,obrigado pela atenção, até breve e uma boa navegação!


Estou estudando a construção de módulos xml para Blogger, simplesmente aprender.
Está aqui o primeiro exemplo, bem simples, adicionar verbratec ajuda do Blogger com botão, veja na sidebar.
É possível também adicionar o mesmo gadget por url. A funcionalidade é que acredito ser mais importante, pois abre horizontes para várias aplicações; fica a cargo de criatividade individual.
Nesta postagem apenas vamos esclarecer alguns pontos, nas próximas postagens aprenderemos muito mais. Nesta segunda imagem vemos a tela que abrirá para o blogueiro adicionar o gadget; a mensagem assusta num primeiro momento, mas é necessária,é realmente importante saber de que se trata antes de incluir em seu blog.
Note os detalhes:
  • Selecione o blog desejado para a inclusão.
  • Escreva o título se assim desejar.
  • Click na seta para editar ou conferir o conteúdo
  • Note a presença do link para esta postagem.
  • Click em adicionar widget.
Para este exemplo usarei o blog jairdejesustecplus veja que o conteúdo é mostrado e pode inclusive ser ajustada a altura e largura de acordo com a necessidade de seu blog.
Coloquei o título Construindo para o exemplo.
Aqui é possível arrastar para a posição desejada e visualizar seu blog antes de salvar a organização.

Aqui o visual final, bem simples, para tornar possível uma melhor combinação com as cores mais usadas.
Na próxima postagem mostrarei mais detalhes do projeto, por enquanto deixo o link do xml https://verbratec-gadgets.googlecode.com/svn/helloverbratecajuda.xml obrigado pela atenção e uma boa navegação!

A apresentação do widget link-me verbratecajuda agora apresenta uma mensagem diferente a cada abertura e aqui cabe salientar o uso do cache, é claro que este widget é bastante simples e não terá milhões de usuários visualizando, porém como estou usando serviço gratuito para o servidor php melhor prevenir. Note que embora pareça feio ele é perfeitamente ajustável, veja:

Ao instalar, sem título e com altura em 160 pixels:

Para um começo de estudo estamos indo bem!

A próxima etapa deverá ser um pouco mais complexa.

Alguns detalhes podem ser captados do pdf https://webcourse.cs.technion.ac.il/236512/Winter2007-2008/ho/WCFiles/iGoogleTechnion.pdf IGoogle didática gadgets por Ran Tavory iGoogleTechnion.

Obrigado pela sua atenção e uma boa navegação!
Editado em 08/10/2012

Jair de Jesus

Estudante de HTML, CSS, json, Blogger e tal.{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_X8kjnFQ6gqz7mpAsGYmndUBnVFuhUwtt2T4rjn6FnitkZZUulhSIzmhVsYGWIHULCAqOObPV3xw9ru-dSPBPuWhT9PGtv-XEK1A5I6l8bJtjEjRsYYleMWoCvtjOtVhDRusviMdEFBU/s35/jair.jpg}{facebook#https://facebook.com/verbratecajuda}{youtube#https://youtube.com/@estudoviolaoclassico} {twitter#https://twitter.com/verbratecajuda}

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *