Web Dois Ponto Zero: widgets

Mostrar mensagens com a etiqueta widgets. Mostrar todas as mensagens

Google Profile

Mais um gadget da Google.
Se quiser adicionar o seu perfil Google no seu blog/site, basta copiar o seguinte código (alterando o uid para o seu, obviamente):


<iframe src ="http://www.google.com/s2/widgets/ProfileCard?uid=mig.pand" >  <p>O seu browser não suporta iframes. </p></iframe>

Existem muitos outros widgets do mesmo tipo, alguns até melhores, como o da retaggr, mas a Google é sempre a Google... digo eu!

[+/-]

Widget para exibição de posts aleatórios (com excerto)

Quando o nosso blog começa a ficar com muitos posts é cada vez mais improvável que as pessoas que o visitam tenham acesso fácil a esses posts.
Este widget é uma maneira de ultrapassar, em certa medida, esse facto.
Ele vai exibindo um post antigo, de forma aleatória, a cada 5 segundos, um dos posts antigos do seu blog, permitindo assim que a atenção dos visitantes seja, eventualmente, captada para um desse posts cuja visualização seja do seu interesse.
Pode colocá-lo onde bem entender: a seguir ao header, a seguir ao espaço dos posts, no footer, na barra lateral, etc.
No meu caso experimentei colocá-lo a seguir ao header e podem ver que funcionou, conforme mostra a figura abaixo.
Apenas não o deixei ficar porque ele interfere com o outro que lá tenho (ambos provêm do google feeds), pelo que tive de optar.
No entanto, pode vê-lo em acção neste meu outro blog, logo a seguir ao cabeçalho.
Vocês escolherão o que mais lhes agradar.

O widget, como podem ver acima, possui as seguintes características:
1. Mostra o título de um post de cada vez
2. Linka para esse post
3. Mostra um excerto do post também.
4. A cada 5 segundos mostra um outro post
5. Percorre todos os posts do seu blog de uma forma cíclica
6. Começa um novo ciclo no fim da lista
7. Uma vez carregado continua a executar o ciclo mesmo quando você não está online
8. Usa tecnologia AJAX oficial
9. Funciona noutras plataformas que não o blogger (não testado)
9. Se colocarmos o ponteiro do rato sobre o título a rotação pára

Vamos então explicitar os passos a realizar para pormos em funcionamento este útil widget:

1. Faça o login no blogger.com
2. Clique na Tab "Esquema" no seu Painel
3. Clique no link "Adicionar Aplicação" situado na barra lateral na subtab "Elementos de Página" e depois clique em Html/Javascript
4. Na janela de pop-up que se abre faça scroll para baixo e depois clique em Html/Javascript
5. Na janela de conteúdos, copie para ela o código abaixo, depois de o ter modificado de acordo com as indicações que vamos dar.




  

  
Loading...

  Gadget by The Blog Doctor.

Relativamente ao código acima faça as seguintes alterações:



    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://MEU_BLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, stacked : true,
                               title: "BLOG_TITULO ~ Random Posts."});
    }

Altere "MEU_BLOG" para o seu subdomínio real e "TITULO_BLOG" para o título real do seu blog.
Depois cole o código, já modificado, na janela pop-up (Html) e Guarde/Grave.

Obtenha AQUI a sua chave API AJAX e coloque-a no código acima, no local onde diz 'PONHA_AQUI_A_SUA_CHAVE_AJAX'

Finalmente, clique e arraste a Aplicação que criou na barra lateral para o local que mais desejar (acima da zona dos posts, abaixo da zona dos posts, etc.).
Isto porque, como já acima dissemos, a largura e função do widget adequa-se mais a áreas mais largas do layout do seu blog e não à barra lateral. Mas também pode experimentar deixar na barra lateral e ver se gosta ou não.

Agradecimentos para blogdoctor.

[+/-]

TouchGraph, A Nossa Teia

[+/-]

Gadget Google para eventos (c/ Screencast)

Mais um dos muitos gadgets proporcionados pela Google, ou por programadores que utilizam a sua API: o "Google Event Gadget".
Trata-se de um widget em que podemos anunciar um qualquer evento que ocorra nas nossas redondezas (ou não) em princípio relacionado com o tema do blog, e que permite a adição de fotos do evento, google maps do evento e um botão em que os utilizadores podem indicar se estão a pensar em ir presenciar esse evento ou não.
Podem ver um exemplo deste gadget na minha barra lateral, lá para o fundo da mesma.

Estou, no entanto, com um problema:
O primeiro é que não consigo obter os botões clicáveis.
Caso alguém consiga perceber porquê, agradecia que me informasse, atravé do email de contacto, que está no fundo da barra lateral do blog.

Mas vamos lá então explicar como podem adicionar este gadget aos vosso blog(ger)s:
NOTA: No final do post há um Screencast para verem tudo "ao vivo e a cores".
Coloquem dúvidas e sugestões nos comentários ou através do email de contacto, sito no fundo da barra lateral do blog.
Obrigado.

1. Façam login no Blogger.come marquem a caixa Remember Me para facilitar o login da próxima vez que lá vão.

2. Vão a Google Friend Connect. Aí verão todos os vossos blogs listados na barra lateral à esquerda do ecrã, abaixo do título "Sites"

3. Cliquem no título do vosso blog onde querem adicionar o gadget e ele expandir-se-à para mostrar um submenu abaixo dele.

4. Cliquem no link "Social Gadgets"

5. Cliquem no link "Event Gadget"

6. Nas opções seleccionem as que desejarem, preencham o título do evento e a sua descrição; escolham as datas de início e termo do evento e a vossa Timezone; preencham a localização do evento, endereço e o url de uma imagem, logótipo ou vídeo do evento.

7. Escolham o tamanho do gadget, de acordo com o vosso espaço disponível, por exemplo a largura da vossa sidebar (barra lateral) se for lá que quiserem colocar o gadget.

8. Cliquem no botão "Generate Code"

9. Copiem o código gerado para um gadget HTML do vosso blog, que entretanto terão de criar se quiserem pô-lo na barra lateral.

Segue-se o Screencast respectivo:

Free online screencasting tool

Este post foi retirado e adaptado de The Blog Doctor A.K.A. Betablogger for Dummies Obrigado para ele!

[+/-]

O maravilhoso mundo dos mashups

Estou aqui a digerir 2 livros, com a intenção de me iniciar no mundo dos mashups.
Bom, e estou a chegar à conclusão que se trata de um mundo maravilhoso em que vale a pena mergulhar. Apesar de não ser muito difícil entrar no jogo, reconheço que será, certamente, um pouco trabalhoso, necessitando de muitas horas de disponibilidade. E porquê?
Bom, primeiro porque é de todo aconselhável dominar algumas das tecnologias como o XML, JavaScript, PHP, MySQL, XMLH, Rest, JSON e outras. Bom, não se vão já embora. A vossa vida é facilitada porque não é preciso conhecê-las em profundidade e os dois livros que a seguir vos apresento dão as dicas necessárias para começar a dominar essas tecnologias e, ainda por cima, através de exemplos concretos que podem logo aplicar.
Mas é óbvio que quem quiser ir mais além terá muito tempo a disponibilizar, uma vez que estas coisas nunca correm bem à primeira.
Quanto a mim, terei de esperar por um período com mais tempo livre na minha vida mas certamente irei tentar.
A minha ideia é tentar criar um mash-up para apresentar online, em que faço a ligação do Google Maps com uma base de dados de todas as escolas do país, permitindo uma localização (e informação sobre a escola) rápida das mesmas sobre um mapa da Google.
A primeira coisa que tenho de encontrar é a base de dados.
Se alguém souber onde, agradeço a informação. THKS.
Vamos esperar. Sentados...?

Título: Web 2.0 Mashups (How to do everything with)
Autor: Jesse Feiler
Editora: Osborne - McGraw-Hill
Ano de publicação: 2008
Nº de Páginas: 303
ISBN: 978-0-07-149627-8

Este livro apresenta no início vários capítulos introdutórios sobre os conceitos e tecnologias a usar nos mash-ups:
Regras, exemplos, XML para estruturar os dados, Javascript, PHP, MYySQl, XHTML, etc.
Nos capítulos finais são implementados vários mash-ups usando os APIs da Google Maps, Amazon e Flickr, que podem também adaptar para construir os vossos.
É um livro de leitura fácil para quem tiver umas bases de programação. Os outros terão mais dificuldades mas não são impeditivas de o ler, compreender e aplicar pois é tudo feito passo-a-passo.

Título: Foundations of Popfly - Rapid Mashup Development
Autor: Eric Griffin
Editora: Apress
Ano de publicação: 2008
Nº de páginas: 194
ISBN: 978-1-59059-951-8

O segundo livro é sobre como construir mashups usando agora uma plataforma dedicada da Microsoft - a Popfly - que corre sobre o Silverlight, também da Microsoft, exigindo, por isso a instalação de software no vosso PC.
Como se trata de uma plataforma dedicada, o desenvolvimento é mais fácil e os conhecimentos de programação não são tão requeridos.
O tipo de aplicações/mashups é o mesmo dos que já foram citados acima.
O livro segue a mesma metodologia de apresentação, sendo os primeiros capítulos dedicados a ensinar a trabalhar com a plataforma e os capítulos finais com apresentações de mashups utilizando, sobretudo, RSS feeds combinados com APIS da Google, Yahoo e Flickr. No capítulo final é apresentada com mais pormenor (e fornecido o código para download) de um mashup usando o API do Technorati que permite construir um widget para porem no vosso blog e que permite seguir online (e fazer pesquisa) pelos temas mais cadentes em discussão naquele agregador social de bookmarks.

Go build something!

[+/-]

Lista de posts recentes em Ajax - animada

[+/-]

Top de Comentadores do seu blog

[+/-]

ScreenToaster - Demonstração

[+/-]

Efeito de neve no seu blog

[+/-]

Widget - o que é, afinal?

Widget, gadget, badge, chicklet, ..., estes vocábulos pululam por estes dias na net.
E propiciam algumas confusões. Falo por experiência própria: Não é preciso muita procura para encontrar neste blog alguns resultados dessa confusão. Que se dane!

Mas há sempre um momento em que queremos mesmo ser mais rigorosos e entender o verdadeiro significado das coisas, por muito pueris que elas sejam.
O que se segue é o resultado da minha pesquisa para encontrar o verdadeiro significado de widget, já que o novo blogger, que "todos" usamos agora, se baseia muito neles.
E é no contexto do blogger que passarei à explanação do que encontrei e aprendi, sobretudo aqui, sendo este artigo largamente baseado, adaptado e traduzido desta fonte.
Widget como componente visual
Um widget é um conceito que os programadores de linguagens visuais (Visual Basic, Visual C#,...) conhecem bastante bem.
Mas aqui o que me interessa é mais o ponto de vista de um leigo, já que todos os podemos usar no novo blogger.
Como já devem ter reparado, o novo blogger apresenta um painel de controlo em que a página se encontra dividida por "Elementos de Página", sendo que podemos, através de simples cliques, criar novos elementos de página, reorganizar a sua posição através do simples "clique e arrasta" (drag and drop), o que, suponho, todos fazemos muito, especialmente na barra lateral do noso blog.

A mover um widget da barra lateral inferior...

... para a superior.
Este novo interface visual é pois um convite à utilização modular de código independente, cada qual correspondente a uma aplicação, a um widget.
Exemplos: as etiquetas (labels) do nosso blog, podem ser colocadas no cimo da barra lateral, no fundo da barra lateral, na zona principal dos posts, enfim, onde queiram. E tudo de forma fácil e rápida, com um simples clicar e arrastar.
Widget como elemento textual
O template do blogger foi construído com uma filosofia de design modular, exactamente potenciadora da utilização e modificação do código desses mesmos elementos (widgets).
Na secção de Help do blogger podemos ver como toda esta filosofia funciona e qual o código de cada widget embebido.
Para se entender como funcionam entaõ os widgets, vamos servir-nos da secção das Etiquetas (Labels) para exemplificar o funcionamento dos widgets.
Analisando o código de um widget
O código desse widget é algo similar a isto (podem comprová-lo editando o html do vosso Esquema, com a caixa Expandir os Widgets devidamente marcada):


<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
 <h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
 <ul>
 <b:loop values="data:labels" var="label">
   <li>
     <b:if cond="data:blog.url == data:label.url">
       <data:label.name>
     <b:else>
       <a href="data:label.url"><data:label.name></data:label.name></a>
     </b:else>
     (<data:label.count>)
   </data:label.count></data:label.name></b:if></li>
 </b:loop>
 </ul>
 <b:include name="quickedit">
</b:include></div>
</b:includable>
</b:widget>

Explicação do Código
A linha 1 declara que este é um widget do tipo "Label", com o seu identificador único id='Label1'
Line 1 declares that this is a widget of type "Label," with its unique identification id='Label1' (para ser armazenado algures nos servidores da Google), com
o título 'Labels', que é aquilo que é visto pelos visitantes do blog.
A variável 'locked' é posta a 'false', o que quer dizer que podemos deslocar esse widget para onde queiramos, dentro dos Elementos da Página, pelo simples clique e arrastar, como vimos anteriormente.
A linha 23 fecha o widget, o que significa que os dados entre as as linhas 2 e 22 são do tipo 'Label'.
Da linha de ajuda do blogger vemos que apenas poderemos retirar quatro tipos distintos de dados:
O título do widget (data:title), e por cada Etiqueta (Label) encontrada na nossa página, podemos aceder ao seu nome (data:label.name),
a contagem dos posts para cada Etiqueta utilizada (data:label.count), e o url do link para uma página que mostra os posts com essa Etiqueta (data:lable.url).
Cada widget permite inserir no seu interior múltiplas funções.
Por defeito, cada widget tem de ter uma função especial identificada como id='main', dentro da qual todas as outras existem. Uma espécie de porta de entrada no código.
A linha 2 começa inicia o incluível principal e a linha 22 fecha-o. Isto significa que o widget contém apenas uma função (includable, segundo a terminologia do blogger). todas as outras serão subfunções dessa.
A função principal faz várias coisas:
Da linha 3 até 5 verifica se o título tem algum texto e, se tiver, mostra-o dentro de um par de tags <h2>, em que h2 significa, do html, cabeçalho do tipo 2.
A seguir, a linha 6 e 21 abre e fecha, respectivamente, um par de tags html "div" da classe "widget-content". É entre estas duas tags (ou linhas) que o conteúdo das nossas Etiquetas (Labels) irá ficar.
Esta configuração, em conjunto com o nome do widget, que vem noutro tag id, permite-nos configurar toda a apresentação visual para o conteúdo das Etiquetas (Labels), uando, apenas uma vez, as regras CSS que preferirmos.
As linhas 7 e 18 abrem e fecham um par de tags ul (lista desordenada - unoredered list), o que permite visualizar as Etiquetas como uma lista marcada.
As linhas 8 e 17 abrem e fecham um par de especiais de template b:loop, que é responsável por retirar a informação de todos os dados que compõem cada uma das Etiquetas, desde a primeira até à última.
Dentro do b:loop há certos elementos de texto que serão colocados dentro de um par de tags li (list item - item de lista).
Por exemplo, se tivermos cinco Etiquetas (Labels) teremos, como resultado da função, qualquer coisa do tipo:


<ul>
<li>(texto com a Etiqueta 1)</li>
<li>(texto com a Etiqueta 2)</li>
<li>(texto com a Etiqueta 3)</li>
<li>(texto com a Etiqueta 4)</li>
<li>(texto com a Etiqueta 5)</li>
</ul>

As linhas 10 e 11 dizem que se já estivermos na página das Labels, é visualizado apenas o nome das Etiquetas, sem o link por baixo.
Se não (linha 12), é-nos mostado um link e o texto representativo (linha 13), que é a Etiqueta (Label) ela própria.
Para além da Etiqueta, o widget mostra-nos a contagem de cabeçalhos (entre um par de parêntesis), de quantos posts usam esta etiqueta.
Finalmente a linha 21 mostra o botaõ de edição do widget, permitindo que editemos o seu conteúdo, ou configuração, do widget, enquanto vemos a página respectiva online.
Esta função é uma espécie de função global e escondida, poispode ser colocada em qualquer sítio, apesar de não podermos ver (editar) qualquer linha do código deste botão.
Agora que entendemos como é a filosofia dos widgets do blogger, podemos, com o máximo cuidado começar a alterar o seu código, de
modo a modifica-lhe a aparência. São o que se chama os "hacks" ou "tweaks". O quê????.....