souweb

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: http://developer.mozilla.org/pt/DOM/element.insertBefore.
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: http://developer.mozilla.org/Pt/DOM/Element.appendChild.
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.

Sempre acreditei que a web devia ser levada ao seu máximo, com usabilidade, acessibilidade, comunicabilidade e padrões de desenvolvimento, por isso iniciarei falando sobre Padrões Web no meu site, saindo um pouco da tradicional linha Flex e Flash, devido a minha mudança de trabalho e foco absoluto nesta área.  

“Semântica é a parte da gramática que estuda o sentido e a aplicação das palavras em um contexto.” 

O grande paradigma do desenvolvimento de sites e sistemas acessíveis está no uso correto de cada tag para o seu respectivo conteúdo, como por exemplo, ao pegarmos uma citação e seu autor, como segue abaixo, de que forma devemos implementar a demarcação?

“Somente aquele que administra suas idéias de forma livre é dono de suas idéias, e somente aquele que é dono de suas idéias não é escravizado por elas.”

- Lin Yutang

Que tal desta forma:

<p>“Somente aquele que administra suas idéias de forma livre é dono de suas idéias, e somente aquele que é dono de suas idéias não é escravizado por elas.”</p>

<p>- Lin Yutang</p>

Para muitos, isto será muito familiar, mais está forma não é correta, sendo que temos tags apropriadas como elementos semânticos:

<blockquote>“Somente aquele que administra suas idéias de forma livre é dono de suas idéias, e somente aquele que é dono de suas idéias não é escravizado por elas.”</blockquote>

<cite>- Lin Yutang</cite> 

Muios desenvolvedores estão habituados a escrever HTML desta forma e inclinados a desenvolver sites com várias tags <div> no início do desenvolvimento com a metodologia Tableless, claramente espelhandos em layouts estruturados com tabelas. Esta prática é chamada de divite, mas deve ser evitada.

Similarmente, devemos ser cautelosos sobre a divisão de elementos únicos com tags <div>. Isto é frequentemente realizado para propósitos de estilização, mas usualmente isto destrói com a marcação semântica, além de ser totalmente desnecessário.

A tag <div> é usada para criar divisões na página, mas ao mesmo tempo é utilizada para criar grupos de conteúdo. Por exemplo, por que fazer isto:

<div id=”menu”>

<ul>

<li>Item A</li>

<li>Item B</li>

<li>Item C</li>

</ul>

</div>

Quando podemos estruturar a página usando menos código:

<ul id=”menu”>

<li>Item A</li>

<li>Item B</li>

<li>Item C</li>

</ul>

A este uso desnecessário da tag <div> damos o nome de “divite”. O mesmo problema pode ocorrer comumente com desenvolvedores web ao utilizar o atributo class, ao que chamaremos de classite.

O atributo class existe para que possamos utilizar a mesma esitilização para vários elementos em comum, mas como a divite, muitos desenvolvedores utilizam o atributo class no lugar da tag apropriada, como no exemplo:

<p class=”address”>

Carlos Tristacci<br />

Rua 13 de Maio, 1535 <br />

Bento Gonçalves - RS

</p>

O correto é usar o elemento (X)HTML address, veja abaixo:

<address>

Carlos Tristacci<br />

Rua 13 de Maio, 1535 <br />

Bento Gonçalves - RS

</address>

Desenvolvedores tem também a tendência de usar o atributo class em diversos elementos que se repetem ao invés de simplificar aplicando a class para o elemento pai, veja o seguinte código:

<ul>

<li class=”tipos-queijo”>Cheddar</li>

<li class=”tipos-queijo”>Mozzarella</li>

<li class=”tipos-queijo”>Parmesan</li>

<li class=”tipos-queijo”>Swiss</li>

</ul>

Aqui uma maneira muito mais simplificada:

<ul class=”tipos-queijos”>

<li>Cheddar</li>

<li>Mozzarella</li>

<li>Parmesan</li>

<li>Swiss</li>

</ul>

Mas, quando temos o cuidado no uso das tag <div>, <p>, <span> juntamente com as demais tags e estudando padrões de desenvolvimento web, iremos utilizar elementos (X) HTML mais apropriados, eliminando a confusão do documento e possibilitando um código mais semântico, fácil de dar manutenção, leve e rápido de ser carregado pelo browser e enfim acessível.