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ê????.....
Tags:
Responda a este post
Enviar um comentário