12. Fazendo funcionar no IE

Nota: Para seguir esta seção, você vai precisar instalar as “versões padrão do IE. Nestas estão truques não suportados em versões mais antigas do IE que você pode instalar junto com sua versão atual do IE.

Vamos iniciar os truques com a criança problema atual, IE5.

Abra seu navegador IE5. Há duas coisas que eu notei instantaneamente que estão erradas. A primeira é que a página não é centralizada como deveria ser, e a segunda é que o rodapé tem um problema de alinhamento estranho.

O problema de alinhamento é bem conhecido, então vamos nos deter primeiramente neste.

O IE 5 e 5.5 não reconhece a propriedade CSS margin: auto; como deveria ser. Para corrigir isto nós necessitamos usar a propriedade text-align: center; no body que vai centralizar o contêiner div.

body {
     font-family: Arial, Helvetica, Verdana, Sans-serif;
     font-size: 12px;
     color: #666666;
     text-align: center;
}

Isto vai centralizar nosso contêiner div, mas vai centralizar também todo o texto dentro da div. Nós não queremos isto, então necessitamos sobrescrever o text-alignment dentro do contêiner div.

#page-container {
     width: 760px;
     margin: auto;
     text-align: left;
}

O que resolve o problema de centralização.

Agora, o rodapé esquisito.

Eu não consegui encontrar atualmente qualquer referência a este bug particular através de uma rápida pesquisa no google, então eu tentei imaginar um jeito de consertar isso. Eu pensei que o bug tinha algo a ver com o div “altnav” flutuante mas não pude identificar onde estava o problema exatamente. Então, eventualmente eu tentei colocar um div ao redor da informação de copyright e que fez com que o bug desaparecesse.

<div id="copyright">
Copyright © Enlighten Designs<br />
Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

Isto disparou alguns problemas de padding-top no rodapé, então eu removi o atributo padding-top: 13px; da regra #footer, e adicionei a ambas as divs: #copyright e #altnav.

#footer #altnav {
     clear: both;
     width: 350px;
     float: right;
     text-align: right;
     padding-top: 13px;
}

#footer #copyright {
     padding-top: 13px;
}

Há um último bug do IE que pude verificar, e é quando você passa o cursor do mouse sobre item selecionado do nav. ele reverte o fundo para branco como se não fosse selecionado. nós não queremos que o item selecionado mude quando o cursor do mouse estiver sobre ele.

Se adicionarmos mais algumas poucas regras para nossa enorme regra que define a seleção do nav, teremos nosso problema solucionado.

body.about dt#about,
body.about dt#about a,
body.about dt#about a:hover,
body.services dt#services,
body.services dt#services a,
body.services dt#services a:hover,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.portfolio dt#portfolio a:hover,
body.contact dt#contact,
body.contact dt#contact a,
body.contact dt#contact a:hover {
     background-position: 0 -100px;
}

E agora está tudo certo. Espero que você tenha aprendido alguma coisa sobre layouts em CSS. Minha recomendação é que você procure mais sites especializados em CSS como os listados abaixo e repare em suas codificações HTML/CSS para ver como eles tem feito as coisas funcionarem. Em caso de dúvida, dê uma googlada.

Sinta-se à vontade para sugerir modificações ou melhorias neste tutorial (diretamente com o autor, em inglês), ou pergunte por tutoriais em outros tópicos do site.

Outras boas fontes
A List Apart
Mezzoblue
SimpleBits

11. A navegação (argh!)

Há muitos truques de CSS neste capítulo, e não é imperativo que você entenda exatamente o que cada parte da css faz, somente que você esteja pronto para modificar esta CSS para fazer o que você quer em outros websites, o que é basicamente a mudança de altura, comprimento e imagens. Porém eu vou dar o melhor de mim para explicar o código.

Vamos começar pela parte fácil. Remova o fundo vermelho na CSS e exiba a navegação removendo a classe “hidden” na lista de definição.

O método de “rollover” das imagens que vamos usar neste menu é uma solução 100% feita em CSS. A premissa básica por trás disso é posicionar os itens em uma lista de definição próxima uma da outra (lado a lado), esconder o texto delas, e usar CSS para trocar a imagem de fundo dependendo de qual estado o botão está (rollover, normal ou selecionado).

Para cada um dos 4 nav itens, necessitamos criar uma imagem como as exibidas acima. O primeiro terço da imagem é o estado normal, o segundo é o estado mouseover e o terceiro é o estado selecionado. O gif animado abaixo mostra como isto vai funcionar:

Espero que você tenha entendido como isto funciona, através do diagrama acima. Vamos fazer nossas 4 imagens de navegação.
Salve-as em /images/nav/

Agora vou dar o melhor de mim para explicar a css por trás de tudo, bloco por bloco. Descubra comigo.

Substitua sua regra #main-nav com o código abaixo:

/* Main Navigation */

#main-nav { height: 50px; }
#main-nav dl { margin: 0; padding: 0; }

Isto muda a altura da div main-nav div para 50px e retira todas as margens das listas de dados.

/* IE5 Mac Hack \*/
#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */

Isto é um truque que faz duas coisas: Atribui o espaçamento da esquerda, da main-nav para 11px (para que bata ligeiramente como é mostrado no design) e conserta um bug no IE5 para mac.

#main-nav dt { float: left; }

Isto atribui a definição dos títulos (nossos contêineres de item de navegação individual) para flutuar à esquerda, o que os junta da esquerda para a direita, ao invés de um abaixo do outro.

#main-nav dt a {
    display: block;
    height: 0px !important;
    height /**/:50px; /* IE 5/Win hack */
    padding: 50px 0 0 0;
    overflow: hidden;
    background-repeat: no-repeat;
}

Atribui ao link a mesma dimensão que seu contêiner correspondente e esconde o texto usando a propriedade overflow.

#main-nav dt a:hover {
    background-position: 0 -50px;
}

Faz com que a posição do fundo se mova até 50px quando o cursor do mouse passa por cima de um link.

#main-nav dt#about,
#main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); }

#main-nav dt#services,
#main-nav dt#services a { width: 84px; background-image: url(../images/nav/services.gif); }

#main-nav dt#portfolio,
#main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }

#main-nav dt#contact,
#main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }

Atribui o comprimento individual de cada item de navegação e o caminho para cada imagem.

Agora se todas as nossas imagens estiverem nomeadas como acima e salvas em seus lugares corretos, sua navegação deve funcionar.

A última coisa que necessitamos fazer para que a navegação funcione, é obter os estados dos botões selecionados para mostrá-los quando você estiver na página correspondente.

Necessitamos adicionar algumas novas CSS e modificar algumas CSS existentes para concluir isto. Adicione a CSS abaixo ao restante de sua navegação CSS:

body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
     background-position: 0 -100px;
}

Este seletor CSS enorme checa qual classe a tag body tem e então atribui a posição do navbar correto. então se você quisesse que a navbar about fosse selecionada, você atribuiria uma class=”about” na tag body. Vamos fazer isto agora:

<body class="about">

Agora o problema que temos é que também queremos que a imagem do cabeçalho mude baseada em qual seção estamos visualizando. Então necessitamos modificar a regra #header como abaixo:

body.about #header {
     height: 150px;
     background: #db6d16
                 url(../images/headers/about.jpg);
}

Agora quando você criar páginas para suas outras seções, você só tem de modificar a classe do body de about para, por exemplo, contact, atribuir uma regra de CSS apontando para a imagem do cabeçalho correta e está pronto.

10. O Rodapé

Primeiro nós neessitamos fazer o visual do texto parecer corretamente. O design usa a fonte Tahoma 10px para o texto, colorido de um cinza bem leve (#c9c9c9). Eu tenho certeza que você pode desenhar isto por si mesmo, mas se quiser usar o copiar/colar:

#footer {
    clear: both;
    height: 66px;
    font-family: Tahoma, Arial, Helvetica, Sans-serif;
    font-size: 10px;
    color: #c9c9c9;
}

E para mudar a cor do link (e remover o sublinhado), adicionamos isto:

#footer a {
    color: #c9c9c9;
    text-decoration: none;
}

Mas os links necessitam de destaque algumas vezes, quando seu mouse estiver sobre eles. Então, vamos fazê-los mudar sua cor para laranja, quando o mouse estiver sobre eles:

#footer a:hover {
    color: #db6d16;
}

Nós também tivemos de adicionar uma borda de 1 pixel na borda superior do div do rodapé, atribuir algum espaçamento, e fazer a altura da linha ficar em 18px (aumentando o espaçamento). Por estarmos atribuindo espaçamento na div rodapé, nós teremos de remover a propriedade height para não disparar o bug espaçamento/comprimento/altura que mencionei anteriormente. Nós não necessitamos realmente de atribuir a altura neste div:

#footer {
    clear: both;
    font-family: Tahoma, Arial, Helvetica, Sans-serif;
    font-size: 10px;
    color: #c9c9c9;
    border-top: 1px solid #efefef;
    padding: 13px 25px;
    line-height: 18px;
}

A última coisa que deixamos para fazer é flutuar a navegação alternativa à direita. Note que elementos flutuantes devem ter um comprimento especificado para funcionar corretamente, então atribua o comprimento um ligeiramente maior do que a nav atualmente necessita e atribua o alinhamento do texto à direita para que o texto se encaixe onde deveria estar.

#footer #altnav {
    width: 350px;
    float: right;
    text-align: right;
}

Tadá! Nós temos um rodapé.

9. O Cabeçalho

Para implementar o cabeçalho, necessitamos obter a imagem de fundo aplicada ao header div, substitua o cabeçalho “Enlighten Designs” com uma logo gráfica e posicione-a no local correto, no cabeçalho (a barra cinza escuro à direita).

Primeiro, crie duas imagens como as abaixo (ou copie estas mesmo):

/images/general/logo_enlighten.gif

/images/headers/about.jpg

A primeira parte é fácil. Atribua uma imagem de funco na CSS utilizando o formato abaixo:

#header {
    height: 150px;
    background: #db6d16
          url(../images/headers/about.jpg);
}

A propriedade background que acabamos de usar é atualmente uma propriedade reduzida que permite-nos especificar a cor de fundo, imagem, posição da imagem e como a imagem deve ser repetida, tudo em uma só linha. Nós atribuímos o fundo para usar a mesma sombra alaranjada como a usada pelo cabeçalho somente para que a página não pareça tão agradável se o usuário não tem a exibição de imagens habilitadas em seu navegador. Os caminhos para as imagens em seu arquivo CSS são relativos ao arquivo CSS, não à página HTML. Isto por que o ../ é requerido no caminho acima.

Agora, substitua o texto “Enlighten Designs” com a imagem da logo. Novamente, lembre-se de manter a tag <h1> e escreva uma descrição no atributo alt.

<div id="header">
    <h1><img src="images/general/logo_enlighten.gif"
        width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
</div>

Agora nós temos que posicioná-la corretamente onde ela deve estar. Vamos fazer isto flutuando a tag <h1> à direita, e então usar as propriedades “margin-top” e “padding-right” para obter a exata posição. Adicione o seguinte texto à regra <h1> em sua folha de estilos:

h1 {
    margin: 0;
    padding: 0;
    float: right;
    margin-top: 57px;
    padding-right: 31px;
}

A razão por quê usamos padding-right ao invés de margin-right é porque as margens podem frequentemente disparar erros grosseiros no IE se utilizado em certos lugares.

E o cabeçalho está pronto.

8. Alguns estilos básicos de texto

Ó céus! Você está cansado de olhar aquelas terríveis cores de fundo ou o quê?!

Liberte-se delas. Acabe com todos, exceto para a navegação, em vermelho.

Isto vai parecer um pouco melhor, mas o texto ainda fica horrível. Vamos atribuir uma família de fontes global, cor e tamanho para usar como uma base legal. Os atributos de fonte que atribuímos no corpo serão automaticamente herdados para qualquer outro texto no site, a não ser que sejam especificamente sobrescritos com outro estilo. Crie a nova regra CSS antes da classe “hidden”, perto do topo da folha de estilos:

body {
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    font-size: 12px;
    color: #666666;
    background: #ffffff;
}

O conteúdo acima já é auto-explicativo.

Se tudo está de acordo como planejado, você deve ver algo como isto:

O que isto necessita é algum espaçamento para separar cada um daqueles blocos de conteúdo.

De acordo com o design, o vazio abaixo dos cabeçalhos de conteúdo é aproximadamente 15px, e os vazios abaixo de cada parágrafo estão na faixa dos 15px. Então vamos juntar aquelas duas regras CSS que criamos anteriormente e aplicar regras de “padding-bottom” abaixo:

#content h2 {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
}

#content p {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
}

Nós também necessitamos de 25px de espaçamento ao redor de todo o conteúdo do div, e todo o espaçamento do div, dando a eles algum espaço para respirar.

Esta parte DEVERIA ser fácil. Na teoria, você somente deveria atribuir padding: 25px; nas divs, mas infelizmente, devido a problemas no Internet Explorer, não podemos fazer isto.

O problema do IE é descrito em detalhes aqui.

Há dois possíveis caminhos para lidar com este problema: um envolve a escrita de alguns truques de CSS para esconder certas regras CSS de um navegador, enquanto as exibe em outro, porque o espaçamento é algo que usamos muito, nós vamos fazer o truque do outro jeito.

O outro jeito é inserir um div adicional dentro dos divs que queremos que sejam espaçados e atribuir suas classes para “padding’. Padding é a única coisa que será aplicada à estas divs espaçadas.

A razão disto funcionar é porque as divs espaçadas não tem um comprimento atribuído. Como regra, tente não adicionar espaçamento e um comprimento estático ou altura no mesmo elemento.

<div id="sidebar-a">
    <div class="padding">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
        Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
        Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
        euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
        Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
        purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
    </div>
</div>

Faça o mesmo para a div de conteúdo.

Agora na folha de estilos, nós vamos criar duas novas regras, exibidas abaixo em verde:

#sidebar-a {
    float: right;
    width: 280px;
}

#sidebar-a .padding {
    padding: 25px;
}

#content {
    margin-right: 280px;
}

#content .padding {
    padding: 25px;
}

Usando o mesmo método anterior, vamos selecionar somente os elementos com uma class="padding" que são filhas das divs #sidebar-a ou #content.

O espaço vertical entre as linhas do texto no conteúdo do texto e no texto da sidebar devem ser largos, de acordo com o rascunho do gráfico. Em CSS, o espaçamento vertical é atribuído pelo atributo line-height. Vamos adicionar uma altura da linha de 18px:

#sidebar-a {
    float: right;
    width: 280px;
    line-height: 18px;
}

#content {
    margin-right: 280px;
    line-height: 18px;
}

À frente, os cabeçalhos <h2> que adicionamos parecem horríveis. Porque a fonte que eles estavam usando não é uma fonte para web, nós vamos ter de substituí-los por imagens. Crie duas imagens como as exibidas abaixo e salve-as no diretório /images/headings/.

Substitua o texto do cabeçalho por estas imagens mas, lembre-se de manter as tags <h2> ao redor das tags das imagens, e lembre-se de colocar o atributo alt nas imagens. O atributo alt é designado para exibir um texto alternativo à imagem, se um usuário está visualizando a página em um browser que não suporta imagens, ou desabilitou a exibição de imagens. Isto é útil também para scripts robôs de sites, por que eles não conseguem entender imagens.

<h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2>

<h2><img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /></h2>

Nosso site já está começando a tomar forma. Depois disso, você deve enxergar algo como:

7. Estrutura adicional

• Links para navegação
• Cabeçalhos (Cabeçalho do Site e os cabeçalhos do conteúdo)
• Conteúdo
• Rodapé informativo (informação de copyright, créditos, e navegação alternativa)

Agora que nós temos nossas divs de layout base nos devidos lugares, podemos adicionar o restante da estrutura que vai ser a “cara” desse website.

O fundamental que ainda precisamos adicionar ainda são:

Ao implementar essas coisas sem quebrar o layout da página, vamos criar uma pequena classe muito útil, chamada “hidden”.

Adicione isto perto do topo da sua folha-de-estilos, depois da definição da tag body:

.hidden {
    display: none;
}

Isto significa agora que podemos setar qualquer elemento no site com a tag “hidden” e ele não será exibido logo de cara. Isto vai nos facilitar agora, portanto, você pode esquecê-la por um momento.

Vamos falar sobre cabeçalhos

Cabeçalhos num documento HTML são definidos pelas tags <h1> até <h6> em ordem de importância no documento. Por exemplo: <h1> para o nome do website, <h2> para os cabeçalhos principais (ex.: nome da página), <h3> para cabeçalhos secundários, etc… Nós vamos adicionar um <h1> dentro da nossa div Header e setá-lo como o nome da companhia, Enlighten Designs neste caso.

<div>
    <h1>Enlighten Designs</h1>
</div>

Se você recarregar a página, notará que Enlighten Designs aparece em letras grandes dentro do cabeçalho, mas há também agora muito espaço em branco ao redor do cabeçalho. Isto é causado pelas margens padrões das tags <h1>. Então necessitamos cortar a margem e seu preenchimento dessa forma:

h1 {
    margin: 0;
    padding: 0;
}

Agora vamos adicionar a navegação. Os prós e contras de como a navegação vai funcionar podem ser um tanto complicados e serão discutidos em detalhes posteriormente em sua própria seção.

A navegação será estruturada como lista de definição (<dl>) com id’s individuais relevantes a cada termo de navegação com o uso da tag (<dt>). Estes itens de navegação terão dentro de si, links para nossas seções principais. Se isto parecer confuso, adicione somente este código à sua div main-nav:

<div id="main-nav">
    <dl class="hidden">
        <dt><a href="#">About</a></dt>
        <dt><a href="#">Services</a></dt>
        <dt><a href="#">Portfolio</a></dt>
        <dt><a href="#">Contact Us</a></dt>
    </dl>
</div>

Nota: Muitas pessoas usam listas não-ordenadas para navegação, mas para este simples nível de navegação resolvi usar listas de definição por se mostrarem mais fáceis de funcionar no IE. O IE tem alguns bugs de CSS irritantes com listas não-ordenadas. Mas com pequenos ajustes, uma lista não-ordenada pode fazer a mesma coisa facilmente. É questão de preferência, creio.

Em termos fáceis para entender, a <dl> age como um contêiner, as <dt>’s são identificadores únicos para cada item de navegação e os links… são links. Nós vamos usar id’s únicos mais tarde quando viermos a fazer o ‘look’ da navegação como ele deve ser, com suas belas imagens de rollover. Só que mais tarde. Se você recarregar a página, vai notar que ela parece um tanto feia, então por ora, vamos esconder a navegação que adicionamos com a classe “hidden” que construímos anteriormente.

<div id="main-nav">
    <dl>
        <dt><a href="#">About></a></dt>
        <dt><a href="#">Services</a></dt>
        <dt><a href="#">Portfolio</a></dt>
        <dt><a href="#">Contact Us</a></dt>
    </dl>
</div>

“E como num passe de mágica, tudo se transformou…”

Agora vamos passar para o rodapé porque é relativamente fácil. Há duas partes no rodapé: a informação de copyright e os créditos na esquerda e a navegação alternativa do site na direita.

Nós queremos que a navegação alternativa flutue à direita, como fizemos com a sidebar e o conteúdo, então vamos colocar isso no primeiro div. Em teoria você poderia fazer as divs flutuarem não importasse onde elas estivessem no código, mas erros no IE tornam isso difícil, então agora, qualquer item flutuante deve vir primeiro na ordem do código.

Posicione em uma div com uma id única como esta:

<div id="footer">
    <div id="altnav">
        <a href="#">About</a> -
        <a href="#">Services</a> -
        <a href="#">Portfolio</a> -
        <a href="#">Contact Us</a> -
        <a href="#">Terms of Trade</a>
    </div>
</div>

Abaixo dessa div, vamos acrescentar a marca de copyright e os créditos.

<div id="footer">
    <div id="altnav">
        <a href="#">About</a> -
        <a href="#">Services</a> -
        <a href="#">Portfolio</a> -
        <a href="#">Contact Us</a> -
        <a href="#">Terms of Trade</a>
    </div>
    Copyright © Enlighten Designs

    Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
    <a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

E agora o rodapé está pronto. Para ter certeza de que seu site está indo bem, ele deve se parecer com isto:

Movendo dentro da área de conteúdo principal, vamos adicionar o conteúdo. Estou pegando o conteúdo do design diretamente do passo 2. Use as tags <h2> para os cabeçalhos “About” e “Contact Us”. Coloque os parágrafos em tags <p></p>, e use <br /> para a quebra de linhas.

<div id="content">
    <h2>About</h2>More contact information...</a></p>
</div>

Atualize a visualização da sua página. Você vai notar que há mais de um espaço em branco “pulando” ao redor da div de conteúdo. Isto acontece por causa das margens padrão nas tags <h2> e <p>. Necessitamos diminuir as margens e o espaçamento. Porém, nós não queremos fazer isto para cada simples tag de parágrafo ou cabeçalho secundário que estará no website. Para fazer isto, necessitamos usar seletores CSS “filhos”. Todos os elementos em HTML tem um relacionamento “filho, pai”. Se a “tag a” estiver dentro da “tag b”, então a tag b é filha da tag a. No código acima, nossas tags <h2> e nossas tags <p> são ambas filhas da div #content. Se quisermos selecionar os elementos filhos de um pai específico, nós separamos eles com um espaço, como no exemplo abaixo:

#content h2 {
    margin: 0;
    padding: 0;
}

#content p {
    margin: 0;
    padding: 0;
}

Então as regras acima dizem para o browser aplicar estes estilos SOMENTE para as tags <h2> e para aqueles que são elementos filhos da div #content.

Na próxima parte faremos o visual do texto parecer um pouco melhor.

Primeiramente, gostaria de pedir mil desculpas ao pessoal que tem visitado frequentemente este blog à procura das 6 últimas partes do tutorial “Criando um layout com CSS a partir do zero“, de autoria de Steve Dennis e traduzido por este humilde blogueiro que vos escreve.

Em segundo lugar, anuncio que as partes restantes já estão prontas e serão postadas a cada dia até ao fim. Portanto, aguarde mais um pouco para completar seu aprendizado de CSS.

Agradeço a todos que visitam este blog e desejo que tirem o melhor proveito das próximas seções do tutorial.

Um abraço,

ZehRique

Já que estamos diante de uma grande mudança ortográfica no Brasil e em alguns países de língua portuguesa, que tal fazer um teste para saber como anda seu vocábulário? Só para desencargo de consciência…
Segundo a página que visitei, esta me deu o seguinte resultado para meu vocabulário:

Resultado: 23 pontos

Eu tenho um excelente vocabulário.

Teste Seu Vocabulário.

Oferecimento: InterNey.Net

Ajude a sustentar a Wikipédia e outros projetos, sem colocar a mão no bolso, e concorra a um Eee PC!
…e também a pen drives, card drives, camisetas geeks, livros e mais! O BR-Linux e o Efetividade lançaram uma campanha para ajudar a Wikimedia Foundation e outros mantenedores de projetos que usamos no dia-a-dia on-line. Se você puder doar diretamente, ou contribuir de outra forma, são sempre melhores opções. Mas se não puder, veja as regras da promoção e participe - quanto mais divulgação, maior será a doação do BR-Linux e do Efetividade, e você ainda concorre a diversos brindes!

Como não comprei o meu ainda, esta é uma ótima oportunidade. Quem sabe se eu ganhar, consigo colocar as centenas de e-books espalhados pelo meu HD e ler com tranquilidade em qualquer lugar que for? Fora as outras possibilidades…

Créditos da imagem: autor desconhecido, recebida por email