Espero que gostem.

Como da aplicação apenas se sabe que é destinada a web designers, resta-nos apreciar o efeito conseguido no site, com a sensação de profundidade transmitida. O efeito é ainda mais surpreendente se redimensionarem a janela do vosso browser lentamente e repararem nas folhas que se movem, separadamente.

O efeito, chamado parallax scrolling pode ser também apreciado no blog do podcast The Rissington Podcast, criado por John Oxton e Jon Hicks. Vão até ao final da página, redimensionem a janela do browser e observem o Spitfire.

Se quiserem saber como reproduzir o efeito, o designer Paul Annett explica o processo de criação no artigo How to recreate Silverback’s Parallax.

Logo no início do artigo o autor esclarece que o efeito não será visualizado por quem utilizar o Internet Explorer 6.0. Segundo ele, o trabalho para reproduzir o efeito com alguma fidelidade seria demasiado, tendo optado por apresentar a estes utilizadores uma versão mais simples do site.

O gorila presente no site foi criado pelo acima referido Jon Hicks, que explica o processo no post Recent Work: Silverback.

Visitem o site, leiam o artigo, vale a pena, pela forma criativa com que são utilizadas as CSS e as imagens.

Sim, já se pode fazer o mesmo com o Firebug, aqui a novidade reside no facto de o poder fazer em qualquer browser “baseado” no Mozilla ou no Safari. Para já não funciona no Internet Explorer.

As intruções são simples, basta ir a http://westciv.com/xray/ e arrastar o XRAY para a a barra dos bookmarks. Depois, é visitar qualquer página, clicar no XRAY e clicar no elemento que queremos “espreitar” e temos um DOM Inspector disponivel.

Numa onda de bookmarklets, há um muito útil que permite a visualização e exportação de microformatos. Foi criado para o Safari, já que o Firefox tem as extensões Tails e Operator. Apesar disso funciona no FIrefox também.

O processo de instalação é o mesmo do XRAY, bastando arrastar o link para a barra de bookmarks. O bookmarklet e as instruções estão disponíveis no site da Left Logic.

O Planet Geek, criado pelo Mário Gamito, é, na sua essência, um agregador de blogs. Os conteúdos que são apresentados na página principal são retirados de vários blogs, com a autorização expressa dos seus respectivos autores.

Esta nova versão utiliza, como base de funcionamento, a CodeIgniter, uma framework PHP gratuita, leve, bastante rápida e muito bem documentada que permitiu poupar muito tempo no desenvolvimento. Para além do novo visual, foram acrescentadas novas secções ao site, como a página individual dos membros e a secção de podcasts.

Espero que gostem da nova versão do site. Como sempre há coisas a retocar, a melhorar mas, enquanto isso, visitem o Planet Geek, vale a pena.

São muitas e quase de certeza que alguma é do vosso agrado.

Há auto-completers, edição inline, menus, tabs, calendários, há dicas sobre CSS, formulários, tabelas, galerias, etc.. Facilmente encontrará aquilo que procura dada a quantidade e qualidade da oferta.

Vão ver 80+ AJAX-Solutions For Professional Coding.

Para quem não leu, o resultado que se pretende alcançar é este:

No post anterior falei em duas formas de alternar a cor de fundo das linhas de uma tabela de dados. A primeira, manualmente, atribuindo a class .odd às linhas ímpares, directamente no código HTML. Como esta solução se torna mais difícil à medida que o número de linhas vai aumentando, utilizei a versão PHP para obter o mesmo resultado, automaticamente, e com menor probabilidade da ocorrência de erros.

Neste artigo vamos utilizar os mesmos ficheiros base:

• tabela.html - o link para o artigo original leva à primeira parte e não a este post.
• tabela-styles.css

A diferença é que vamos utilizar DOM Scripting e a jQuery para obter o mesmo resultado.

DOM Scripting

O DOM, Document Object Model, especifica os elementos de um documento (HTML, XML, etc.) e as ligações entre eles. O DOM define os atributos de cada objecto e a forma como os mesmos podem ser manipulados. Vamos utilizar Javscript para manipular estes objectos e respectivos atributos. Voltaremos à definição de DOM noutro post.

O que precisamos de fazer é:

• Certificar-nos que o método getElementsByTagName existe (se não existir, não faz nada, mas também não dá erro;
• Obter todos os elementos tabela (table) do documento;
• Para cada tabela, criar uma variável, boleana, odd com um estado de falso;
• Iterar por todos as linhas da tabela;
• Se o estado da variável odd for falso, não aplicar nenhum estilo, mas alterar o estado da variável para verdadeiro;

Para podermos utilizar a função sempre que quisermos e para que ela não seja executada sem que a página estaja toda carregada, podendo originar erros, vamos criar uma função chamada stripes().

function stripes() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for (var i=0; i
<tables.length;></tables.length;>var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length;>
if (odd == true) {
rows[j].className = "odd";
odd = false;
} else {
odd = true;
}
}
}
}</rows.length;>
Agora que temos a função pronta, só precisamos de a executar. Para isso utilizamos o evento window.onload que garante que o código dentro dele só é executado quando o documento estiver totalmetne carregado, evitando alguns erros. Ficará assim:
window.onload = function() {
stripes();
}
Finalmente, basta guardar o código acima num ficheiro stripes-dom.js (escolham o nome que quiserem claro) e chamá-lo no cabeçalho da página da seguinte forma:
<script src="stripes-dom.js" type="text/javascript"></script>
Ver resultado utlizando DOM Scripting.
Assim temos o resultado pretendido, sem adiccionar código nenhum à tabela (o que nem sempre é possível). Caso o utilizador tenha o javascript desactivado, o efeito perde-se, ficando a tabela sem nenhuma alteração, mas igualmente legível.

jQuery

Obter o mesmo efeito utilizando a jQuery - uma biblioteca javascript - é extremamente simples.
Primeiro, fazemos o download da jQuery; depois, “chamamos” o ficheiro na nossa página:
<script src="jquery-latest.pack.js" type="text/javascript"></script>
Temos agora à disposição um sem fim de recursos que jQuery disponibiliza. Vamos utilizar um deles para obter todas as tabelas do documento, depois, para cada tabela, aplicar a class odd às linhas ímpares.
Se, e só neste caso, o nosso documento tiver uma tabela podemos utilizar:
$("tr:odd").addClass("odd");
O que a linha anterior faz é obter todas as linhas (tr) ímpares de todas as tabelas e atribuir-lhe a class odd. Convém utilizar esta forma apenas em documentos com uma única tabela, pois, por exemplo, se a primeira tabela tiver 7 linhas, a linha que vai ser alterada na tabela seguinte é a segunda, já que ele conta todas as linhas, não fazendo distinção em que tabela estas se encontram.
Para que o resultado seja o desejado teremos de utilizar:
$("tr:nth-child(odd)").addClass("odd");
A linha anterior usa a pseudo-class, nth-child, que permite manipular as linhas de uma dada tabela, podendo aceitar argumentos como odd e even, que, respectivamente correspondem a linhas ímpares e pares. Para mais propriedades, vejam a especificação do W3C.
Agora só precisamos de fazer com que a função seja chamada quando o documento é carregado. Da seguinte forma:
$(document).ready(function() {
$("tr:nth-child(odd)").addClass("odd");
});
Basta guardar estas linhas num ficheiro, por exemplo stripe-jquery.js e incluir na nossa página a linha correspondente:
<script src="stripe-jquery.js" type="text/javascript"></script>
E está feito. Mais rápido, mais simples e com bastante menos linhas que os restantes métodos.
Ver resultado com jQuery.

Conclusão

Cada um dos quatro métodos referidos, apesar do mesmo objectivo, tem aplicações diferentes. Os dois primeiros, HTML e PHP+HTML, funcionam quando se tem acesso à criação do nosso alvo, as tabelas, e julgo serem os mais utilizados. Os dois últimos, DOM Scripting e jQuery, funcionam quando não se pode modificar os dados-alvo, as tabelas, mas falham quando o utilizador desactivou o javascript no seu browser. De referir que, caso as folhas de estilo (CSS) estejam desactivadas, qualquer um destes métodos falha.

Brevemente vou voltar a utilizar esta última tabela com outros objectivos. A idéia já cá está, falta escrever.

• tabela.html
• tabela-styles.css

Como podem reparar, no ficheiro CSS existe uma class .odd com as seguintes características:
.odd {
background-color: #ccf;
color: #000;
}
Esta class vai ser atribuída às linhas ímpares da tabela, de forma a alterar a cor de fundo das mesmas.

HTML

Manualmente, em HTML a nossa tabela ficaria assim:
(...)
<tbody>
<tr class="odd">
<td>1º</td>
<td>F.C. Porto</td>
</tr>
<tr>
<td>2º</td>
<td>S.L. Benfica</td>
</tr>
<tr class="odd">
<td>3º</td>
<td>Sporting C.P.</td>
</tr>
(...)
O exemplo da versão HTML.
Como a tabela é pequena é fácil ver a que linhas atribuir a class .odd. Esta maneira torna-se mais complicada à medida que o número de linhas vai crescendo. Vamos agora ver uma forma de alcançar o mesmo resultado, mas de forma automática.

PHP

Se na versão HTML tínhamos de atribuir manualmente a class .odd às linhas ímpares, utilizando PHP podemos automatizar essa tarefa. O código da tabela fica assim:
(...)
<tbody>
<?php
$clubes = array(
1 => 'F.C. Porto',
2 => 'S.L. Benfica',
3 => 'Sporting C.P.',
4 => 'Belenenses',
5 => 'Sp. Braga');
foreach($clubes as $id => $dados) {
if($id % 2 == 0)
$className = '';
else
$className = ' class="odd"';
echo '<tr'.$className.'><td>'.$id.'º</td>';
echo '<td>'.$dados.'</td></tr>';
}
?>
</tbody>
(...)
O exemplo da versão PHP.
O que o código anterior faz é o seguinte:

• Se o resto da divisão inteira do índice do clube por 2 for diferente de 0, então o índice é ímpar, portanto, o nome da class a atribuir à linha será .odd;
• Se esse valor for igual a 0, então o índice é par e não atribui nenhuma class à linha;
• Preenche as células com os dados correspondentes;

As vantagens deste método são óbvias: maior rapidez na criação do código e redução da possibilidade de falhas na atribuição das classes.
Vimos duas formas de obter as linhas de cor diferente numa tabela de dados. Existirão muitas outras formas de o fazer. Na segunda parte deste artigo mostro mais duas hipóteses, mas sem acrescentar elementos ao código da página, utilizando DOM Scripting e, posteriormente, uma biblioteca javascript, a jQuery.