Carlos Tristacci Just another WordPress weblog

Recentemente estou trabalhando no novo layout do Portal do Professor (http://portaldoproferssor.mec.gov.br), no qual projetei o conteúdo separado por caixas que possuem: Cantos arredondados, sombra, sombra interna, degradê e linhas de borda,  como pode ver abaixo:

Com esta combinação deixei o cliente satisfeito com o resultado visual, mas acabei projetando um verdadeiro problema para estruturar o XHTML, pois preciso agora de 6 imagens de fundo para cada caixa e devido ao meu layout ser líquido / elástico, acabei com a seguinte estrutura:

<span class=”wrap1″>
<span class=”wrap2″>
<span class=”wrap3″>
<span class=”wrap4″>
<span class=”wrap5″>
<span class=”wrap6″>
<div class=”box”>
<h2>Wrap</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tempor. Fusce lacinia. Duis blandit tincidunt lectus. Donec tortor. Nam fringilla justo vitae erat. Vivamus lobortis dui a nisl. Proin justo ante, lacinia non, aliquet in, egestas ac, leo. Sed metus libero, ornare eu, sagittis elementum, vulputate a, erat. Aliquam porttitor.
</p>
</div>
</span>
</span>
</span>
</span>
</span>
</span>

Acabei tendo que escrever um código repetitivo e nada semântico, além de tornar meu código mais difícil de manter, prejudicando assim a escabilidade de um portal que está constantemente recebendo novas implementações.

Para solucionar isto, resolvi escrever um código javascript, que insere tags <span> de forma dinâmica deixando o meu código XHTML apenas com a <div class=”box”>…</box>, como abaixo:

<div class=”box”>
<h2>Wrap</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tempor. Fusce lacinia. Duis blandit tincidunt lectus. Donec tortor. Nam fringilla justo vitae erat. Vivamus lobortis dui a nisl. Proin justo ante, lacinia non, aliquet in, egestas ac, leo. Sed metus libero, ornare eu, sagittis elementum, vulputate a, erat. Aliquam porttitor.
</p>
</div>

Para inserir as tags <span> necessárias para inserer as imagens de fundo na caixa, lembrando que cada tag aceita apenas uma imagem de fundo, escrevi o script a seguir:

// Crio um array
var alltags = new Array();
function changeBox() {
// O método getElementsByTagName() retorna um array com todas os elementos <div>que existem no documento e armazena no array alltags.
var alltags=document.getElementsByTagName(”div”);
// A estrutura de repetição for passa por cada elemento <div> armazenado em alltags.
for (i=0; i<alltags.length; i++) {
// Verifica se o elemento tem a classe box.
if (alltags[i].className==’box’) {
// Armazena na variável element em  cada interação do for o velor armazenado no índice i de alltags
var element = alltags[i];
// Armazena o objeto pai de element na variável content
var content = element.parentNode;
// Cria os elementos XHTML <span>
var wrap1 = document.createElement(’span’);
var wrap2 = document.createElement(’span’);
var wrap3 = document.createElement(’span’);
var wrap4 = document.createElement(’span’);
var wrap5 = document.createElement(’span’);
var wrap6 = document.createElement(’span’);
// Atribui para cada elemento XHTML <span> uma classe
wrap1.setAttribute(’class’, ‘wrap1′);
wrap2.setAttribute(’class’, ‘wrap2′);
wrap3.setAttribute(’class’, ‘wrap3′);
wrap4.setAttribute(’class’, ‘wrap4′);
wrap5.setAttribute(’class’, ‘wrap5′);
wrap6.setAttribute(’class’, ‘wrap6′);
// Insere um elemento filho ao elemento atual, antes de um determinado elemento. O elemento wrap1 é inserido em content antes de element
// Mais informações do método insertBefore no endereço:<a href="http://developer.mozilla.org/pt/DOM/element.insertBefore." target="_blank">http://developer.mozilla.org/pt/DOM/element.insertBefore.</a>
content.insertBefore(wrap1, element);
// O elemento wrap1 recebe o novo elemento wrap2. E assim acontece com os demais elementos respectivamente.
// Mais informações do método appendChild no endereço:<a href="http://developer.mozilla.org/Pt/DOM/Element.appendChild" target="_blank">http://developer.mozilla.org/Pt/DOM/Element.appendChild</a>.
wrap1.appendChild(wrap2);
wrap2.appendChild(wrap3);
wrap3.appendChild(wrap4);
wrap4.appendChild(wrap5);
wrap5.appendChild(wrap6);
// Remove element de content
content.removeChild(element);
// E insere element para wrap6
wrap6.appendChild(element);
}
}
}
// Executa a função
changeBox();

E para finalizar nossas caixas vamos estilizá-las com CSS. Não irei comentar o CSS, pois acredito que se chegou até aqui buscando solução para um problema semelhante, já domine a linguagem.

Além do CSS ques estilizam as classes que atribuímos por JavaScript as tags <span>, escrevi outros estilos para compor a página e representar melhor o exemplo.

*{
padding:0;
margin:0;
font:1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
body{
background:transparent url(bg_body.png) repeat left top;
font-size:11px;
padding:100px 400px;
}
h2{
font-size:1.5em;
padding-bottom:.5em;
}
p{
color:#666;
}
.box{
padding:25px 30px 30px;
}
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .wrap6 {
display:block;
}

.wrap1 {
background:transparent url(bg_cr.png) repeat-y right center;
margin-bottom:1em;
}
.wrap2 {
background:transparent url(bg_cl.png) repeat-y left center;
}
.wrap3 {
background:transparent url(bg_tr.png) no-repeat right top;
}
.wrap4 {
background:transparent url(bg_tl.png) no-repeat left top;
}
.wrap5 {
background:transparent url(bg_br.png) no-repeat right bottom;
}
.wrap6 {
background:transparent url(bg_bl.png) no-repeat left bottom;
}

Para baixar os arquivos deste exemplo clique aqui.

Espero que visite o Portal do Professor daqui algum tempo e veja o resultado prático do que estou falando aqui.

Um abraço e até o próximo post.