Michael Granados

Olá mais uma vez. Postei alguns dias atrás uma referencia sobre como fazer notícias rodando em JS. O interessante é que alguns dias depois apareceu uma pessoa prescisando de uma ajuda para conseguir um resultado parecido. Como bom samaritano eu passei o link para ele “se virar”, mas lembrbei o quanto já fui ajudado com códigos explicados que encontrei no meu caminho.

Pensando nisso irei debulhar o dito cujo. E para isto usarei o desenvolvimento em camadas como vocês verão a seguir. O sistema baseia-se em uma lista de notícias que fica rodando. Mas chega de ficar falando na teoria e mão à obra!

A primeira camada: o HTML

Como eu havia dito, o sistema baseia-se em uma lista de notícias, então o código é bem mais simples do que podeemos imaginar.


<ul id=”noticias”>
<li>os cientistas inventaram uma forma de cozinhar a galinha em litium</li>
<li>o sol ira implodir daqui a milhares de anos</li>
<li>o google lança o seu Sistema Operacional, dêem boas vindas ao Google OS</li>
<li>o orkut será pago a partir da semana que vem</li>
</ul>


Usei uma lista que desordenada, ou seja que sua ordem é irrelevante, se eu fosse listar ou explicar como fazer um bolo a ordem deveria ser essencial, então usaria <ol> para isto.

Percebam que temos o atributo id no <ul> porque iremos fazer referencia nele pelo CSS e pelo JavaScript. Isto quer dizer que ele é único eu não posso ter qualquer outro elemento em minha página com o id=”noticias” seja div, a, li, ol, ul, p, acronym ou qualquer outro.

Cada notícia é um item da lista, por isto o uso da tag <li></li>

O resultado:

A segunda camada: o CSS

Primeiro prescisamos retirar a “bolinha” que foi gerada em cada li, para isto usamos a propriedade list-style em none. Alpem disto retiramos as margens possíveis usando o margin e o padding em 0.


#noticias { /* Olha aqui a referência */
list-style: none;
margin: 0px;
padding: 0px;
}


Também setaremos a largura do dito cujo para que pareça um bloco de notícias. Usamos a propriedade width. A largura foi setada em 200px, mas você define dependendo do seu layout.


#noticias {
list-style: none;
margin: 0px;
padding: 0px;
width: 200px;
}


Resultado:

Agora é a vez de trabalhar com os itens. Claro que muitas vezes o conteúdo presisará de mais algumas linhas já que seu conteúdo tem tamanho variável. Isto seria fácil se tivermos escritores e cada us souber que só pode escrever uma quatidade x de caracteres ou um minimo de x e máximo de x caracteres. Assim fica fácil, mas e no caso de termos cientistas escrevendo o conteúdo ou mesmo o nosso layout ser líquido e esses 200px forem na verdade variáveis?

O que podemos saber é que os nossos itens devem ocupar apenas umma linha. Então setamos esta altura. Não usamos uma altura fixa, mas a altura da fonte utilizada. Usamos como medida em. 1em equivale à altura da letra M em sua respectiva fonte. Mas se você reparar a letra M não possui “perninha” como o p ou j ou até mesmo o ç. Então presisamos setar uma altura um pouco maior, algo em torno de 1.2em.


#noticias li {
height: 1.2em;
}


O resto, o que não aparecer nesta altura, some. Usamos overflow em hidden para isto, o que quer dizer que o que estiver fora do bloco não deverá aparecer.


#noticias li {
height: 1.2em;
overflow: hidden;
}


Este exemplo fará com que o usuário possa fazer sua seleção e selecionar a matéria completa e não somente o que aparece escrito. Por muito tempo eu quebrava a chamada com o PHP, mas não há mais necessidade disto.

Você também pode altenar os itens com classes=”par”, ou outra coisa qualquer, para destacar com CSS background, desta forma:


<ul id=”noticias”>
<li>os cientistas inventaram uma forma de cozinhar a galinha em litium</li>
<li class=”par”>o sol ira implodir daqui a milhares de anos</li>
<li>o google lança o seu Sistema Operacional, dêem boas vindas ao Google OS</li>
<li class=”par”>o orkut será pago a partir da semana que vem</li>
</ul>


#noticias li.par {
background: #CF9;
}


Epílogo

O código pode ser modificado quanto suas necessidades. Mas este é o bruto.


#noticias {
margin: 0px;
padding: 0px;
list-style: none;
width: 200px;
}
#noticias li {
height: 1.2em;
overflow: hidden;
}
#noticias li.par {
background: #CF9;
}


<ul id=”noticias”>
<li>os cientistas inventaram uma forma de cozinhar a galinha em litium</li>
<li class=”par”>o sol ira implodir daqui a milhares de anos</li>
<li>o google lança o seu Sistema Operacional, dêem boas vindas ao Google OS</li>
<li class=”par”>o orkut será pago a partir da semana que vem</li>
</ul>


Este é o resultado com algumas modificações: