» Hover avançado com bordas em imagens

Falae pessoal. Parece até mentira, mas estou aqui novamente, retornando aos meus tutoriais mirabolantes, fascinantes, geniais e extremamente úteis para todos.

O assunto dessa vez é o mesmo que o tutorial anterior, que falei sobre borda interna em imagens com link. Mostrarei um efeito em links, com bordas, em imagens

E como não poderia deixar de ser, é um efeito que a equipe aqui da Globo.com pediu pro Vinicius, só que ele veio perguntar pra mim se era possível. E como nada é impossível para Mr. Dulcetti. Lá fui eu implementar o efeito. E como não poderia deixar de ser, funcionou. E o melhor, CROOOOOOOOOOSSBROWSER!!!!! Sensacional, sensacional.

Mas de novo bordas em imagens Bruno?

Sim. De novo. Mas relaxem, é um efeito diferente do que eu fiz para o efeito de borda interna dos sites da Globo.com, e que eu creio que muitos já quiseram fazer e não conseguiram, etc.

É um efeito normal, que poderia ser feito normalmente, como eu mostro na figura abaixo:

Um efeito de hover na imagem, onde existe a troca de cor da borda do link. Sim, cor da borda do link e não da imagem. O IE infelizmente não aceita todos efeitos em elemento dentro do link no hover do próprio. Mas lógico que isso você sabia (assim espero).

Ta blz Dulcetti. Mas o tutorial é sobre esse efeito ae?

Quase. É o mesmo efeito, mudança de cor na borda do link e talz. Maaaaaas, a diferença é que não existe esta borda duplicada entre as fotos. Percebam que a largura é de 5px para todos os links, mas como ficam um do lado do outro, entre eles ficam o dobro, ou seja, 10px de borda.

Poréeeeem, o problema é que no hover eu só consigo pintar a borda de um link, fazendo com que continue preta, a borda do próximo link. Veja o exemplo errado.

O problema disso tudo, é que eu não consigo mudar a cor da borda de um link, seja ele próximo ou anterior. Infelizmente não temos essa liberdade. Com isso, tínhamos esse problema e o pessoal não queria isso.

Resumindo, eles queriam o efeito abaixo:

Perceberam que não existe duplicação de borda entre os links? Fazer isso é mole, se não fosse a troca de cor das bordas. Bastava setar borda superior e esquerda na <ul> e inferior e direita na <li>.

Mas como nem tudo são flores né meu povo, lá foi o Dulcetti aqui resolver essa pemba.

Vale ressaltar também, que a borda é colorida no hover, mas a borda preta em cima some, “invadindo” a <li> de cima.

Beleza Bruno. Começa logo então…

Ok, ok. Vamos dar início ao efeito. Vamos primeiro ao HTML:

<ul>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
</ul>

Um código extremamente complicado, difícil de ser entendido, complexo, mas creio que você seja safo para entender sem que o Dulcetti aqui explique ok?

Um bando de <li> com link dentro, com imagem dentro, dentro de uma <ul>. É basicamente isso.

Agora vamos a parte maaaaais complicada, pra variar…

Implementando o CSS do efeito…

Sim. O CSS é a parte mais chatinha de fazer e ser entendida. Eu sempre acho que é a parte mais tenebrosa para um desenvolvedor web.

Vamos ao código?

img {border:0;}
ul {background-color:#000;margin:0;padding:5px 0 0 5px;width:180px;}
ul:after {clear:both;content:".";display:block;height:0;visibility:hidden;}
ul li {border-bottom:5px solid #000;border-right:5px solid #000;float:left;height:40px;width:40px;}


Nada de muito complicado:

• Retiramos a borda das imagens, isso porque quando ela recebe link, fica aquela borda azul linda em volta da imagem;
• Depois colocamos o background da lista, zerando sua margem, colocamos um padding de 5px em volta da ul e finalizando com uma largura de 180px;
• Essa técnica do after serve para os browsers, isso exclui o IE. Ela serve para quebrar o float de um elemento dentro do bloco, nesse caso as li’s
• Adicionei borda na base e na lateral direita da li fechando o quadrante, float para ir pra esquerda, altura e largura de 40px;

De início temos este resultado.

Legal Bruno, mas cadê o hover?

Calmae, muita calma nessa hora. Já deu pra ver o início do resultado, do nosso objetivo. Temos já a estrutura toda montada, li’s arrumadas e sem bug.

Agora falta o principal… O hover.

O tão falado e temido hover…

Como já sabemos, o nosso grande amigo e preferido browser, vulgo IE, não aceita a pseudo-classe :hover.

Okay, ele aceita, mas somente em links. Mas admita fã da Microsoft, esse é um dos maiores pecados do IE. Francamente…

O mais correto era colocar a borda na imagem, como eu tinha dito, mas como citei, o hover no link não deixaria colocar borda na imagem. Portanto, tive que trabalhar em cima do link mesmo.

Mas isso não é problema para Mr. Dulcetti.

Dulcetti… Ta bom, anda logo com isso…

Ok. Empolguei-me. Desculpe. Então vamos ao restante do CSS. Pasmem, são apenas mais duas linhas de código:

ul li a, ul li a img {display:block;}
ul li a:hover {border:5px solid #D2251C;margin:-5px 0 0 -5px;position:absolute;}


Vamos a explicação:

• A primeira linha é completamente difícil e complicada. Quase ninguém utilizou esta propriedade no CSS. Ela transforma o(s) elemento(s) em bloco(s). No nosso caso, link e imagem dentro do link. Precisamos disso para que a imagem não coloque akela margem automática quando não é bloco e para que o link funcione corretamente no nosso caso;
• Agora a grande sacada. Nessa segunda linha, colocamos uma borda com cor vermelha e 5px de espessura. Damos uma margem negativa superior e a esquerda de 5px e colocamos o link com position absolute

Vemos o resultado do efeito finalizado agora.

Legal Bruno. Mas explica melhor…

Seguinte: o link ficando com a borda vermelha de 5px, o que iria acontecer? O link, como bloco e com borda, iria acabar ficando dentro da “borda”, que na verdade é o padding preto da <ul>, formando uma borda dupla. Sendo que uma preta e a de dentro vermelha.

Não queremos esse efeito. E para conseguirmos isso, colocamos a margem negativa do mesmo valor da borda, ou seja, 5px, fazendo com que o link ficasse colado na <ul>.

Mas logicamente que a margem, somente, não era bastante para finalizarmos. No IE fica um samba do crioulo doido, enquanto no Firefox não pintava a borda da esquerda, por causa da borda da <li>, que é preta.

Para resolvermos isso, colocamos o que? O temido position:absolute. Mas como as nossas <li>’s já possuem largura e altura, então não temos problema com isso, pq o tamanho ficará fixo, sem ser mexido.

Resumindo…

É isso. Um efeito simples, porém atrativo e que já recebi algumas dúvidas sobre como fazer e não vi nenhuma resposta, nenhum exemplo de como fazer isso.

E como o código é bem curto, o efeito é simples e rápido, não precisou ficar escrevendo testamentos, etc. Tudo bem que eu poderia fazer outros exemplos, com bugs, etc, mas eu tenho certeza que eu iria terminar só ano que vem e ficaria gigantesco. Então tá bom assim mesmo e está aí.

Espero que gostem e que tenha sido útil. Aquele abraço e beijo na alcatra.

[ 03/Jan/2008 às 15:29hrs ] [ Por Bruno Dulcetti ] 14 Comentários |

Categorias: Artigos, CSS, Webstandards

» Como você escreve seus arquivos CSS? Parte 3

Falae pessoal.

Demorei um bocado para essa terceira parte, que eu acho que é a última, pelos meus cálculos e pelos detalhes e informações sobre os arquivos CSS que crio.

Como vimos nos artigos anteriores, na Primeira e na Segunda Parte, vimos alguns detalhes sobre os arquivos CSS, que na minha opinião, melhora bastante, otimiza seus CSS’s.

Mostrei vantagens e desvantagens, indentações, múltiplas formas de implementar seus estilos e espero ter ajudado, ou pelo abrir um pouco mais a cabeça da galera, principalmente com quem trabalha com projetos grandes em sua vida profissional.

Beleza Bruno. Pára de enrolar e fala logo.

Ok, ok. São apenas dois pontos que citarei nessa terceira parte do artigo:

1. Utilização de Multi-CSS’s;
2. Ordem de escrita das propriedades.

Bom, vamos começar a falar sobre o primeiro.

Utilização de Multi-CSS’s

Muitas pessoas ainda possuem dúvidas sobre a utilização, se podem ou não, no que prejudica, no que ajuda, se é que ajuda, a utilização de vários arquivos CSS no seu site.

Posso utilizar vários CSS’s?

Não só pode como deve utilizar. Acho essencial a utilização de múltiplos arquivos CSS’s, dependendo da estruturação das páginas. Mas logicamente que existem limites para isso. Não é recomendável a utilização de 30 arquivos CSS’s pequenos, por exemplo, onde se poderia utilizar somente um ou dois. O tempo de renderização aumenta por ter vários arquivos.

Você pode estar pensando “Caramba! Trinta arquivos? Esse Bruno tá maluco?”. Coisa de maluco, concordo plenamente, mas quando participarem de projetos grandes, verão que os “remendos” sempre acontecem, principalmente se já passou por várias mãos, vai pra aprovação, modifica layout, vai pra desenvolvimento, volta, vai pra qa, etc, etc, etc.

Acaba passando na mão de várias pessoas, a página possui vários elementos globais, que utilizam CSS’s externos, entre outras coisas mais.

Entendi Bruno. Mas como faço então?

Eu fazia de um modo, que hoje eu acho errado, que era chamar um CSS somente e dentro dele eu chamava os outros:

No HTML:

<style type="text/css">
@import "css/estilo.css";
</style>


No CSS:

@import url(estilo2.css);
@import url(estilo3.css);
@import url(estilo4.css);


Ok Bruno. E o que há de errado com esse CSS?

Errado? Nada. Mas concorda comigo que cada vez que eu chamo o arquivo estilo.css, ele chama todos os outros arquivos CSS’s?

E se em uma página específica eu não precisar desses CSS’s? Só precisar de um apenas? Eu chamando o estilo.css, já estou chamando os outros e como eu quero economia, otimização, não quero que isso aconteça, correto?

A mesma coisa acontece se eu colocar todo o conteúdo dentro de um CSS somente. Sempre chamarei somente um, mas dependendo do site, ele pode ter centenas, ou até milhares (isso mesmo) de linhas, o que sobrecarrega bastante.

Tudo bem que temos cache, mas queremos evitar esses problemas de peso, otimizar, certo? Então vamos fazer um trabalho decente

Sucesso. Mostra ae o modo correto de implementar essa parte do CSS

Lembrando que não estou falando que tal modo é certo ou errado, somente o que eu faço e mostro aqui pra vocês opinarem, comentarem, discutirem, etc.

Eu, geralmente crio um arquivo chamado geral.css, que engloba todas as tags gerais, toda a estrutura do site inteiro, como conteudo, rodape, topo, títulos, etc. Depois eu crio mais um arquivo internas.css, caso seja possível ter somente um arquivo com todas as informações.

Com isso, temos dois arquivos, sendo que na home eu não chamarei o arquivo internas.css, por motivos óbvios certo?

Caso seja necessário, eu posso criar alguns outros CSS’s, para títulos, formulários (recomendado), elementos globais (apesar de eu usar no geral.css, mas vai de cada um.), entre outros mais.

Boa Bruno. E agora é só chamar os arquivos CSS’s necessários no HTML certo?

Exatamente. Não vou mais precisar escrever no CSS o import, para chamar os outros arquivos. Segue abaixo:

Possuo três páginas: Home, Quem e Contato; e possuo três arquivos CSS: geral.css, internas.css e formularios.css.

Home

<style type="text/css">
@import "css/geral.css";
</style>


Quem

<style type="text/css">
@import "css/geral.css";
@import "css/internas.css";
</style>


Contato

<style type="text/css">
@import "css/geral.css";
@import "css/internas.css";
@import "css/formularios.css";
</style>


Na Home eu chamei somente um CSS, o geral.css, que é chamado por todas as páginas. Na página Quem, além do geral.css, chamo o internas.css porque é uma página interna e na página de Contato, eu chamos os três CSS’s porque além de precisar da estrutura contida no geral.css, ele é uma página interna e possui os formulários necessários.

Bom, resumindo é isso. Com isso, temos uma estruturação, um controle maior dos CSS, cortamos chamadas desnecessárias de classes e ID’s.

Ordem de escrita das propriedades.

Exatamente isso que você está pensando, se é que está pensando :D. Eu penso na ordenação das propriedades nos meus CSS’s. Parece loucura, admito, o Arthur mesmo falou comigo que era coisa de maluco, perguntando se existia alguém que realmente fazia isso, e ele tomou um susto quando eu respondi que fazia isso

Tá Bruno, mas como assim? Como você ordena seus CSS’s?

Exatamente como você está imaginando agora, em ordem alfabética mesmo. Meio difícil de aceitar no início, concordo, eu fui um pouco assim, mas sem ser xiita.

Tudo depende da adaptação, em qualquer coisa, seja na vida pessoal, trabalho, convivência, etc. Tudo é questão de hábito e costume.

É bem chato no início, mas depois que pega o ritmo, costume, vai rápido.

Entendi Bruno. Mas qual a vantagem de deixar em ordem alfabética os CSS’s?

Isso varia de cada um, claro. Na minha opinião, o que mais pesou para eu implementar desta forma foi a organização. Por mais que cada um tenha seu modo, sua ordenação, em ordem alfabética eu sempre saberei onde está, aproximadamente, o atributo que eu estou procurando para modificar. Resumindo, eu achei mais fácil pra localizar atributos.

Finalizando…

Bom, finalizo aqui mais uma etapa, creio eu que seja a última delas de escrita de CSS. Provavelmente existem outros links falando sobre, acabou que nem pesquisei sobre isso direito. Qualquer coisa é só postar nos comentários.

Mandem comentários, dicas, críticas, dúvidas que eu vou abrindo a mente pra, quem sabe, ver outras maneiras, experimentar outros métodos de implementação.

É isso, aquele abraço.

[ 30/Mai/2007 às 11:47hrs ] [ Por Bruno Dulcetti ] 13 Comentários |

Categorias: Artigos, CSS, Webstandards

» Como você escreve seus arquivos CSS? Parte 2

Dando continuidade ao post anterior, venho aqui mostrar alguns detalhes que acabei não mostrando na primeira parte. É sempre assim, quando queremos falar sobre algo, quando temos a absoluta certeza que está concluído, vemos, mais tarde, que ainda faltava algo :D.

Ferramentas compactadoras de CSS’s

Alguns leitores postaram sugestões, opiniões e links interessantes, que postarei aqui alguns dos links citados.

Falaram sobre escrever como quiser o CSS e depois passar numa ferramenta, otimizador, online para ele fazer a compactação, redução do código, para depois subir e deixá-lo online.

É uma boa alternativa, porém ainda prefiro fazer na mão mesmo, pois podemos ficar meio que dependentes de tal ferramenta, e se por acaso ela não funcionar mais, não existir mais, estamos perdidos. Ok, sem exageros, mas causa dependência e eu não gosto muito disso.

Segue a lista de links:

• Clean CSS
• CSS Optimiser
• Online CSS Optimiser/Optimizer : flumpCakes
• Lottery Post: CSS Compressor

Dei uma olhada muito rápida nos links e o q mais me agradou foi o Clean CSS, pelas opções, variações de compactação, etc. Mas não cheguei a testar nenhum. Mais pra frente, de repente :P, eu testo :D.

Retornando a escrita CSS…

Bom, retornando ao assunto do Post, vou comentar sobre mais alguns pontos de escrita dos CSS’s. Eu batizarei um de hierarquia de elementos e o outro de referência de tags.

Hierarquia de Elementos

Quando falo de hierarquia de elementos no CSS, estou falando de elementos filhos sendo hierarquizados dentro dos arquivos CSS’s. Eu, na grande maioria das vezes, não faço hierarquia, utilizando somente a div correspondente.

Explicarei melhor agora, porque está meio confuso. Veja o código abaixo:
#geral #conteudo #minhaDiv {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
#geral #conteudo #minhaDiv2 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
#geral #conteudo #minhaDiv3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}

Olhando o código, se vc possui o mínimo de conhecimento em CSS, vc percebe que os ID’s #minhaDiv, #minhaDiv2 e #minhaDiv3 são “filhas” do ID #conteudo que é filho do ID #geral certo?

Geralmente eu não faço desta forma, eu economizo mais. Usando o código deste exemplo, ficaria desta forma:
#minhaDiv {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
#minhaDiv2 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
#minhaDiv3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}

Economizei bastante, pois retirei o “#geral #conteudo ” das linhas.

Existem pontos fortes e fracos na utilização dessa hierarquia. O Ponto positivo, na minha opinião é que você limita o ID a funcionar SOMENTE quando ele fizer parte dessa hierarquia. E, às vezes, isso não chega nem a ser uma vantagem, pois você possa precisar deste mesmo comportamento em outra hierarquia, mas não funcionará por causa do “#geral #conteudo “.

Muitos desenvolvedores utilizam a forma hierárquica, pois fica fácil de saber onde aquele elemento está, é filho de quem, etc. Mas se você trabalhar com CSS corretamente, separando seus arquivos CSS’s, com nomenclaturas corretas, você não precisará se preocupar com esses detalhes.

Referência de Tags

Este é simples e muitos usam este método. Mostrarei abaixo um exemplo para depois explicar:
div#minhaDiv {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
div#minhaDiv span.minhaClasse {color:#666;}
div#minhaDiv a.verMais {text-decoration:none;}

Agora uma breve explicação sobre cada linha:

› div#minhaDiv

A div que tiver o identificador #minhaDiv, receberá todas as propriedades setadas.

› div#minhaDiv span.minhaClasse

O span que receber a classe minhaClasse e for “filho” da div que tiver o identificador #minhaDiv, receberá todas as propriedades setadas.

› div#minhaDiv a.verMais

O link que receber a classe verMais e for “filho” da div que tiver o identificador #minhaDiv, receberá todas as propriedades setadas.

» Pontos Fortes e Fracos

A utilização desta forma limita as propriedades a somente estas tags e pronto. Caso no HTML seja modificada alguma estrutura, o funcionamento pode ser danificado, por exemplo, de span, vire div, estas propriedades não funcionarão mais.

Eu prefiro utilizar sem a referência de tags, a não ser que você tenha múltiplas tags utilizando a mesma classe.

Finalizando…

Bom, essa segunda parte é bem menor que a primeira e é assim que eu tentarei fazer sempre, escrever menos, mais direto. Apesar que sou muito detalhista e mastigo bem os tutoriais, artigos, etc. Acho que é melhor assim, mas é preocupante também quando fica grande, cansativo, etc. Mas eu vou treinando para isso não acontecer :D.

Aquele abraço e valew a contribuição de todos.

[ 23/Abr/2007 às 16:14hrs ] [ Por Bruno Dulcetti ] 6 Comentários |

Categorias: Artigos, CSS, Webstandards

» Como você escreve seus arquivos CSS?

Fala pessoal. Ressurgindo das cinzas como uma Fênix, aqui estou eu novamente, para encher vossos sacos e saber de vocês e mostrar como eu escrevo meus arquivos CSS’s.

Mas por que isso Bruno?

Simples. Antigamente eu pensava que não tinha diferença na escrita dos CSS’s que eu criava, etc. E na verdade, no início é sempre assim, pouco damos valor a essas pequenas coisas, esses pequenos detalhes.

Detalhes que fazem a diferença na sua grande parte. Lembrando que não estou falando da utilização das regras, como, quando e porquê usar tal propriedade CSS. Estou falando da escrita mesmo, como você cria, etc.

Ainda não entendi direito Bruno. Explica melhor essa parte da escrita do CSS

Vou mostrar um exemplo de uma forma de escrever, criar um arquivo CSS:

.minhaClasse {
	background-color: #CCC;
	border: 1px solid #FC3;
	color: #FFF;
	height: 300px;
	width: 200px;
}

.minhaClasse2 {
	background-color: #CCC;
	border: 1px solid #FC3;
	color: #FFF;
	height: 300px;
	width: 200px;
}

.minhaClasse3 {
	background-color: #CCC;
	border: 1px solid #FC3;
	color: #FFF;
	height: 300px;
	width: 200px;
}

Peço que não levem em conta que todas as classes estão com as mesmas propriedades. Coloquei mais para não ter que ficar criando, etc. Estou com preguiça e no trabalho, não esqueçam disso

Legal Bruno. E?

Perceberam que esta é uma declaração simples de um CSS correto? Imaginem um CSS com 300 linhas de código, parecido com esses que passei agora. Bastante coisa, certo? O arquivo terá muitos ID’s, Classes, declarações para tags, etc.

Sabemos também que é interessante termos um CSS compacto e leve correto? Com uns 8kb, 10kb no máximo não é verdade?

Mas muitos não dão tanto valor por meros espaços em branco, coisas que, no início, parecem irrelevante, que geralmente não vão fazer diferença.

Muitas vezes também por organização no código, entre outros motivos. Creio que quase todos começam assim, criando os códigos bonitinhos, quebrando linha, com indentação, bem organizado.

Eu mesmo achava horríveis os códigos CSS’s que ficavam tudo em uma linha só, sem espaços, completamente difíceis de serem enxergados, etc. Tinha meio que um preconceito, uma certa dificuldade de aceitar tal forma de criar.

Verdade Bruno. Mas como você faz seus CSS’s agora?

Antes de responder essa pergunta, vou explicar porquê mudei minha forma de implementar meus CSS’s.

› Razão 01 - Tamanho do Site

Geralmente não pegamos sites gigantes pra fazer, implementar, etc. Pegamos sites pessoais, institucionais, com poucas visitações por mês, etc. Isso ajuda no vício de criar CSS’s mais bonitinhos, arrumados e organizados.

Mas quando pegamos um projeto grande, algo em torno de milhões de visitas, percebemos a necessidade de melhorias no acesso, leveza do site, entre outras coisas essenciais num Portal.

› Razão 02 - Visitação ao Site

Parece que não, mas um CSS com 1kb a menos pode fazer a diferença. Imaginem um Portal como a Globo.com, com milhões de acessos diários. Agora multipliquem esse 1kb a menos com os milhões de acesso ao site. Chegamos num número absurdo de economia de banda, etc.

› Razão 03 - Quantidade de linhas dos CSS’s

Diminui absurdamente a quantidade de linhas no CSS. Muitas linhas num CSS não são coisas muito agradáveis, fica difícil de buscar elementos, futuras modificações, etc.

› Razão 04 - Tamanho total dos CSS’s?

Sim. Pode ser. Por que não?

No Videolog, por exemplo, fiz um teste, retirei espaços, tabs, deixando na mesma linha e teve uma redução considerável, pensando em larga escala logicamente. No Videolog temos uns 36kb e pouco de CSS. :O Sim, verdade, projetos grandes necessitam de mais detalhes, principalmente quando temos formulários, grandes variações deles.

No final, depois das mudanças e economias que fiz, os CSS’s ficaram, no total, com 30kb. Um ganho de mais de 6kb. Parece pouco, depende do ponto de vista, porque o Videolog recebe milhões de visitantes, page views e tudo mais. Imagine o ganho disso, multiplicando por milhões

Sem esquecer que ainda farei umas otimizações, para não haver chamadas desnecessárias aos CSS’s, por exemplo, páginas que não possuem formulários, não precisam chamar o css “formularios.css”. Algumas mudanças deste tipo ajudam na rapidez e peso da página.

Interessante. Mas como os seus arquivos CSS estão escritos?

Mostrarei o exemplo anterior utilizando a forma como estou escrevendo os meus CSS’s:

.minhaClasse {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
.minhaClasse2 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
.minhaClasse3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}

Bem menos linhas concordam? Menos espaços em branco, tabs, etc.

› Desvantagens

Como nada é perfeito, temos desvantagens também, mas isso geralmente ocorre no início. É uma questão de adaptação. Meus primeiros três, cinco dias aqui na Globo.com foi chato, difícil e contra minha vontade acostumar com isso. Mas depois, pensando em um dos motivos que citei anteriormente, da parte de milhões de acessos, isso diminui absurdamente a quantidade de banda transferida, etc.

Vou citar alguns pontos chatos nessa utilização:

1. Desorganização no primeiro contato;
2. Um pouco difícil de se encontrar/organizar no início;
3. Falta de hierarquia, tabulação;
4. Linhas extensas.

Por enquanto eu vejo esses pontos fracos, mas caso vocês vejam outros, eu vou analisar e posto aqui também, sem problemas. Vou comentar um pouco mais sobre cada um:

› Desorganização no primeiro contato

Com certeza, quem ainda não escreve seus CSS’s desta forma, se assusta. No primeiro contato fica meio bagunça, difícil de enxergar, se localizar, concordo. Mas eu juro, com a prática e costume, fica tudo normal É como comer comida japonesa com hashi. No início é um desastre, mas depois se acostuma, pega a prática. (eu odeio comida japonesa, foi só mesmo para exemplificar :D)

› Um pouco difícil de se encontrar/organizar no início

Quando temos várias linhas, com as propriedades, ficamos meio perdidos no início, enrolados, pois são muitos caracteres, códigos, o que acaba confundindo, isso é fato.

Em contrapartida, quando temos um css como o mostrado no primeiro exemplo, temos uma organização por blocos com várias linhas e não por linhas com várias propriedades, com isso, não achamos os blocos tão facilmente:

#conteudo .box {
	background-color: #CCC;
	border: 2px solid #000;
	color: #333;
	width: 200px;
}

#conteudo .boxTal {
	background-color: #000;
	border: 1px solid #666;
	color: #FFF;
	width: 200px;
}

Percebemos que as duas classes estão contidas, somente, no ID conteúdo. Correto? O prefixo #conteudo afirma isso (isso é básico e espero que todos saibam disso).

Mas percebam que de cara não é tão fácil perceber isso. Pensamos um pouco, nem que sejam alguns milésimos de segundos a mais (ok, ok… dei uma de Steve Krug agora :D). Mas é a pura verdade. Do segundo modo, temos uma melhora visual da hierarquia das linhas, elementos e propriedades:

#conteudo .box {background-color:#CCC;border:2px solid #000;color:#333;width:200px;}
#conteudo .boxTal {background-color:#000;border:1px solid #666;color:#FFF;width:200px;}

#lateral .box {background-color:#CCC;border:2px solid #000;color:#333;width:200px;}
#lateral .boxTal {background-color:#000;border:1px solid #666;color:#FFF;width:200px;}

Percebam que nas duas linhas o #conteudo está um logo abaixo do outro, o que já afirma serem “filhas” do mesmo bloco quando batemos o olho. O mesmo vale para o prefixo #lateral.

› Falta de hierarquia, tabulação

Como já vimos, a tabulação é perdida, com isso, sua hierarquia de propriedades de um elemento. Não estou falando da hierarquia de múltiplos elementos e sim hierarquia de elementos › propriedades, quais propriedades são de quais elementos, etc.

Os elementos são escritos colados na esquerda, enquanto as propriedades são escritas com uma TAB a mais no código, referenciando que essa propriedade é filha do elemento logo acima.

› Linhas extensas

Os elementos quando possuem muitas propriedades, muitas declarações, acaba estendendo a linha demais, ficando meio difícil de acompanhar e invadindo o final da tela, não ficando totalmente visível em alguns casos, sendo obrigado a rolar a barra horizontal para verificar tudo.

Isso é bem normal, nada tão grave ao meu ver. Mas…

Legal Bruno. Mas podem existir variações nessa forma de escrita?

Com certeza. Vou mostrar algumas variações nessa forma de Implementar seus CSS’s. Principalmente na parte de propriedades para multi-elementos.

Vou listar abaixo algumas variedades, mas fiquem à vontade de sugerirem algumas:

• Com espaços;
• Com espaços depois das propriedades;
• Sem espaços;
• Multi-elementos na mesma linha;
• Multi-elementos em mais de uma linha.

Com espaços nas propriedades do CSS

Vejamos abaixo:

.minhaClasse { background-color:#CCC; border:1px solid #FC3; color:#FFF; height:300px; width:200px; }

Algumas pessoas fazem desta forma, principalmente para facilitar na identificação das propriedades, separação. Mas tem um ponto importante também, que é abrir o arquivo no Notepad, e como ele é péssimo nos atalhos dos desenvolvedores, não considerando caracteres especiais, desta forma ajuda e muito.

Com espaços somente depois das propriedades no CSS

Vejamos abaixo:

.minhaClasse {background-color:#CCC; border:1px solid #FC3; color:#FFF; height:300px; width:200px;}

O mesmo que o anterior, mas sem espaços após a { de início e } de final das declarações das propriedades.

Sem espaços

Vejamos abaixo:

.minhaClasse {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}

A forma que eu utilizo. É um pouco mais complicada de entender, mas é a mais econômica de todas. E como não abro, geralmente, pelo Notepad os CSS’s, não tenho problemas com ele.

Multi-elementos na mesma linha

Vejamos abaixo:

.minhaClasse, .minhaClasse2, .minhaClasse3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}

Caindo agora pra parte de declarações para múltiplos elementos, temos este, que é o utilizado geralmente. Já utilizei bastante, principalmente quando temos poucas propriedades na declaração, mas quando é ao contrário, temos o problema da linha ficar muito comprida, o que eu não acho legal.

Fora que, às vezes, pode parecer que os múltiplos elementos é um só.

Multi-elementos em mais de uma linha

Vejamos abaixo:

.minhaClasse,
.minhaClasse2,
.minhaClasse3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}

A forma que utilizo hoje em dia. Acho mais organizada e mais fácil de se localizar.

Conclusões…

Fica claro que cada Projeto é um Projeto, cada Profissional é um Profissional. Apenas mostrei aqui alguns exemplos, minha opinião sobre e recomendações, fiquem à vontade para decidirem e discordarem. Estamos ae pra isso

Acho que em projetos pessoais, como portfólio, sites institucionais, de pouco tráfego, não seja necessário. Assim como um profissional que não esteja numa grande empresa, participando de um Mega Projeto Web, talvez não seja prioridade fazer das formas que citei aqui. Mas acho que pelo menos já deixa o desenvolvedor preparado para Projetos grandes, com muito tráfego, ou até mesmo nos sites e sub-sites da empresa onde trabalhará mais pra frente.

Finalizando (Ufa :D)

Fico por aqui, desculpem o tamanho do artigo. Eu até iria dividir em partes, mas não achei legal fazer desta forma. Da próxima vez eu planejo tudo direitinho, para deixar separado, organizado blz?

Aquele abraço a todos e eu tentarei ser mais ativo no Blog.

[ 20/Abr/2007 às 18:19hrs ] [ Por Bruno Dulcetti ] 18 Comentários |

Categorias: Artigos, CSS, Webstandards

» Vertical-align no CSS. Como, quando e por que usar.

E ae galera. Estou aqui de volta, novamente, depois de uma sumida (pra variar não é verdade? :P). Mas eu juro que tentarei voltar com mais freqüência, postar mais colírios, vídeos do Videolog, etc.

Que bom Bruno. Mas algo em especial ou só veio pra falar que está sumido?

Não, não. Estou aqui para postar um artigo sobre uma propriedade CSS, o vertical-align, que vejo por ae que muita gente têm duvida na sua utilização, aplicação.

Muitos desenvolvedores confundem e comparam com o atributo valign que é colocado dentro da tag <td> no HTML. Realmente é semelhante, o nome mesmo indica isso, mas as funcionalidades e aplicações são diferentes, quando não aplicada em células de tabelas.

Legal Bruno. Então mostra ae. Quais as diferenças?

Primeiramente, a propriedade vertical-align não é para ser aplicada em blocos e sim em elementos inline. A não ser que apliquemos em células de uma tabela, como estávamos acostumados.

Vamos ver um exemplo de como os iniciantes utilizam a propriedade:

Código HTML:

<div id="box">
Meu texto bem aqui.
</div>


Código CSS:

#box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;padding:5px;vertical-align:middle;width:400px;}


Podemos ver o resultado desse exemplo aqui.

Não vou explicar detalhadamente o que foi utilizado, pois é bem básico. A única coisa diferente usada foi o vertical-align mesmo.

Como podemos ver, o resultado não foi satisfatório. O texto continuou no topo da div. Com isso, já podemos ver que confirma como eu disse acima, que a propriedade não funciona em blocos.

Certo Bruno. Mas como resolver isso então? (Parte 1 – line-height)

Temos algumas variedades de resolver tal problema. A primeira seria a utilização da propriedade line-height com o mesmo valor da propriedade height. Veremos abaixo:

#box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;line-height:200px;padding:5px;width:400px;}


Podemos ver o resultado desse exemplo aqui.

Restrições e problemas.

Como sempre, temos restrições nesse exemplo. Na verdade temos em tudo não é verdade?

• Altura variável dentro do bloco;
• Mais de uma linha dentro do bloco;

Vamos às explicações:

Altura variável dentro do bloco.

Se tivermos um site dinâmico, onde a altura do elemento pode variar, teremos problemas, pois se o line-height for diferente do height, o texto não ficará centralizado.

Mais de uma linha dentro do bloco.

Bem grave esse problema, pois se tivermos mais de uma linha, a distância entre essas linhas ficará absurda, pois será sempre o valor do line-height, portanto, se tivermos três linhas de texto, por exemplo, teremos, no exemplo acima citado, uma altura de três vezes o line-height, pois temos três linhas e 200px de line-height, com isso, 3×200px.

Veja o exemplo aqui.

Certo Bruno. Mas como resolver isso então? (Parte 2 – display: table-cell)

Lembram de eu ter dito que dentro de uma <td> e com o atributo valign fica tranquilo?

Então tudo funcionaria se eu colocasse um display: table-cell certo? Quase. Graças ao nosso querido e amado internet explorer, não. E ainda por cima, nem no internet explorer 7 funciona. Pelo menos aqui não funcionou.

Vamos ao exemplo:

#box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;display:table-cell;padding:5px;vertical-align:middle;width:400px;}

Podemos ver o resultado desse exemplo aqui.

Para quem utiliza browser, funciona perfeitamente. Mas para quem não usa, o texto continua no topo. Salve ie.

Mas então quando devo usar o vertical-align Bruno?

Esse é o ponto que quero chegar. Como eu disse, o vertical-align são para elementos inline e não em blocos (fora os tds e ths da vida ok? ). Portanto, temos as restrições e problemas citados.

Mostrarei alguns exemplos de como e quando usar o vertical-align.

Alinhando imagem e texto centralizado verticalmente com o vertical-align.

Veremos no código abaixo, como fazer para alinhar uma imagem e um texto centralizado verticalmente:

Código HTML:

<div id="box">
<img src="http://brunodulcetti.com/artigos/vertical-align/macaco.jpg" alt="imagem" /> Meu texto bem aqui.
</div>

Código CSS:

#box {background-color:# F7F6F1;border:2px solid #CCC;height:200px;padding:5px; width:400px;}
#box img {vertical-align:middle;}

Podemos ver o resultado desse exemplo aqui.

Como podemos ver, a imagem e o texto ficaram centralizados verticalmente. Mas isso entre eles mesmo e não em relação ao bloco que os engloba.

Tudo bem que neste exemplo eles acabaram ficando, mas porque eu retirei a propriedade height de dentro do CSS no bloco #box. Caso eu coloque um altura, não ficará mais.

Alinhando inputs e texto centralizado verticalmente com o vertical-align.

Veremos no código abaixo, como fazer para alinhar um input de texto e um texto centralizado verticalmente:

Código HTML:

<div id="box">
Nome: <input type="text" name="txtNome" id="txtNome" />
</div>

Código CSS:

#box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
#box input {border:1px solid #CCC;font:100% "Trebuchet MS";_vertical-align:middle;}

Podemos ver o resultado desse exemplo aqui.

Sim, eu sei. Eu utilizei um hack para o internet explorer 6 ou anterior. Mas fiquem tranqüilos, é só pra exemplo. Mostrarei abaixo uma solução correta para isso ;).

O Firefox já posiciona verticalmente, sem precisar do vertical-align, mas o ie não. E colocando esta propriedade com o valor middle, o ie alinha no centro, mas o Firefox deixa o texto um pouco mais para cima.

Qual dos dois está correto, não sei ao certo, mas como o Firefox está mais avançado em relação as CSS’s, então deduzo que ele está correto, principalmente pela próxima solução.

Alinhando inputs e texto centralizado verticalmente com o vertical-align – Parte 2.

Somente uma segunda solução que funciona em todos.

Código HTML:

<div id="box">
<span>Nome:</span><input type="text" name="txtNome" id="txtNome" />
</div>

Código CSS:

#box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
#box input {border:1px solid #CCC;font:100% "Trebuchet MS";vertical-align:middle;}
#box span {vertical-align:middle;}

Podemos ver o resultado desse exemplo aqui.

Agora sim. Sem hacks e funcionando corretamente em todos. A diferença foi colocar um span e setar o vertical-align nele também.

Com esse exemplo, deduzo que o Firefox está correto na renderização do exemplo anterior. Ele adiciona o vertical-align no input, deixando o texto sem. E no ie, parece que ao colocar no input, o texto já leva como padrão o vertical-align.

Alinhando inputs e texto centralizado verticalmente com o vertical-align – Parte 3.

A versão mais correta e semântica para este exemplo:

Código HTML:

<div id="box">
<label for="txtNome">Nome:</label><input type="text" name="txtNome" id="txtNome" />
</div>

Código CSS:

#box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
#box input {border:1px solid #CCC;font:100% "Trebuchet MS";vertical-align:middle;}
#box label {cursor:pointer;vertical-align:middle;}

Podemos ver o resultado desse exemplo aqui.

Neste exemplo, utilizei o label que é o mais correto, setando o vertical-align nele e mais um cursor para diferenciar ;).

Legal Bruno. Muito bom mesmo. Mas o vertical-align só tem o middle como valor no CSS cara?

Acabei esquecendo de citar mais detalhes sobre essa propriedade não é verdade? Fiquem calmos, estarei falando mais sobre ela abaixo :P:

• baseline: Valor padrão no CSS. Posiciona o elemento da linha base de acordo com seu “pai”;
• sub: Deixa o elemento como sub-escrito;
• super: Deixa o elemento como sobre-escrito;
• top: Deixa o elemento alinhado ao topo do elemento que estiver mais ao topo da linha;
• text-top: Alinha o elemento de acordo com o texto que estiver mais alto e seja seu “pai”;
• middle: Exemplo utilizado nesse post. Deixa os elementos que estiverem com este valor alinhados ao meio com relação à eles mesmos ou à seus “pais”;
• bottom: Alinha na base do elemento que estiver mais baixo.;
• text-bottom: Alinha o elemento de acordo com o texto que estiver mais baixo e seja seu “pai”;
• valor: Valor fixo em pixels, em ou %. Posiciona de acordo com o valor setado a partir da linha base do seu “pai”.

Resumindo…

Bom. Tentei passar aqui um pouco dessa propriedade do CSS. Ficou um pouco grande, admito, mas tentei detalhar ao máximo, sem tentar deixar massivo.

Espero que tenham gostado e tenha sido útil. Caso tenha esquecido de algo ou falado alguma besteira, por favor, comentem que eu modifico ok?

Finalizando…

To ficando por aqui, deixando uma homenagem ao Marrelton camarada que trabalha aqui na parte de desenvolvimento da Globo.com que se amarra nos títulos do meu Blog e talz… Akele abraço ae Elton

Akele abraço pra geral ae.

[ 17/Jan/2007 às 14:38hrs ] [ Por Bruno Dulcetti ] 20 Comentários |

Categorias: Artigos, CSS, Webstandards

» Até onde vai o limite da Semântica?

E ae pessoal. Tempo que não posto sobre web standards, css e afins, que são os temas principais desse Blog. Muitos trabalhos, pouco tempo, meio “sem saco” para escrever (blogueiros são humanos também sabiam?)

Tá blz Bruno, mas isso todos dizem. Vá direto ao ponto…

Ok, ok… Não estou aqui para falar de trabalho, dar desculpas sobre minha falta de tempo e “saco” sobre postagens no blog, etc. Estou aqui para falar de um assunto que tenho certeza que já passou na cabeça de praticamente todos os desenvolvedores web, que trabalham com webstandards.

Semântica… A velha e temida semântica…

Não falarei sobre semântica web, citarei alguns exemplos para vocês entenderem e depois os casos reais para que vocês entendam porque estou escrevendo este post ok?

Beleza então Bruno cite os exemplos.

Todos sabemos que as tags <hn> são as tags de título (onde n é o número que varia de 1 a 6), sabemos também que a tag <a> é para links, <p> serve para parágrafos, etc, etc, etc.

Sabemos que temos tags que são display block e display inline correto? Não sabemos? Okay, explicarei um bocado sobre:

Display Block

Traduzindo, são blocos. Os elementos blocks adicionam uma quebra de linha antes e depois dele próprio. Seria como se tivesse um <br /> antes e depois da tag. Podem conter tanto elementos inlines quanto blocks dentro dele.

Alguns Exemplos:

• <p>
• <h1>
• <div>

Display Inline

Ao contrário do block, os elementos inlines não quebram linha. Podem conter outros elementos inlines dentro dele próprio, mas não é permitida a inserção de elementos do tipo block dentro deles.

Alguns Exemplos:

• <a>
• <strong>
• <em>

Resumindo…

Veremos alguns exemplos da forma correta e da forma não-correta de se utilizar elementos inlines e blocks:

Modo correto

<p>Aqui vem o <a href="#">meu link com <em>Itálico</em></a></p>

Resultado

Aqui vem o meu link com Itálico

Como no meu css está configurado para os links ficarem em negrito, acabou ficando tudo em negrito onde tem o link ok?

Neste exemplo podemos ver que temos o parágrafo, que é block, e dentro dele temos um link, que é inline, que dentro dele temos um em q dá ênfase ao termo entre esta tag.

Resumindo, temos inline dentro de inline, que estão dentro de um bloco, tudo certinho.

Modo incorreto

<a href="#">
<h1>Aqui vem o título</h1>
<p>Aqui vem o parágrafo</p>
</a>

Resultado

Como o resultado irá invalidar o código, podendo deixar uma bagunça, criei uma página só pra esse exemplo.

Agora iremos ao ponto chave desse post.

Vimos que esse segundo exemplo está errado, pois o link, que é um elemento inline, contém elementos blocks (h1 e p). Percebam que MESMO declarando no css o display: block pra link, ele, por padrão na W3C, é inline, portanto é descartado o CSS, ou seja, não é validado pela W3C.

Beleza Bruno, mas o que podemos fazer?

Temos uma opção, que seria englobar o h1 e o p dentro de uma div e coloca um link dentro do h1 e outro, com o mesmo href, dentro do p. Veremos neste exemplo.

Agora sim, ele ficou validado pela W3C, porém, podemos ver dois pontos, o primeiro é que o link não ficou englobado totalmente na div, somente quando passa em cima do texto e a o segundo ponto é que temos que colocar o link duas vezes, com o mesmo endereço e isso pode aumentar de acordo com os elementos dentro dessa div.

Verdade Bruno… Mas não tem nenhuma opção de conseguirmos validando na W3C?

Até temos uma opção, que criei aqui agora, mas seria bem do tipo POG.

Vamos ver o código HTML:
<div>
<a href="#"> </a>
<h1>Aqui vem o título</h1>
<p>Aqui vem o parágrafo</p>
</div>

Aqui, nada demais. Uma div com um link, um título e um texto de parágrafo. A única diferença é no link, que está vazio e por cima de todos. Vamos entender, vendo o código CSS:
div {
width: 140px;
border: 1px solid #900;
background-color: #E4E5E5;
position: relative;
overflow: hidden;
}

a {
display: block;
width: 1000px;
height: 1000px;
position: absolute;
background-color: #E4E5E5;
filter: alpha(opacity=0);
opacity: .0;
}

h1, p { font: 12px Verdana; }

Não entrarei em detalhes na lista de propriedades para a div, pois é bem básica. A única coisa diferente é que coloquei um position relative, porque irei usar dentro dela um bloco com position absolute. Coloquei também um overflow hidden, isso quer dizer que se algum conteúdo ultrapassar o tamanho da div, ele ficará oculto, sem atrapalhar em nada o layout da págin e da div.

No título h1 e no parágrafo, só coloquei o tipo e tamanho de fonte, nada demais nisso ok?

Agora que “o bicho pega” :D. No link que a brincadeira começa a ganhar forma e tudo começa a ficar mais fácil de ser entendido.

O link recebe um display block, com isso, vira um bloco. Mas lembram que ele esta acima do link e do parágrafo, pois ele é inline e não pode englobar blocos?

OBS: Não importa que você tenha setado no CSS que o link virou bloco, a W3C continuará não validando seu código, pois ela confere com o padrão dos links, e como o <a> é um elemento inline como padrão, não validará.

Não se assustem com os 1000px para a largura e a altura do link, pois como a div está com overflow hidden, o link só aparecerá dentro do tamanho disposto na div ;). Na verdade um 100% na altura e largura já funciona, mas no ie 6 não funcionou, aconteceu algum bug, ficando só pela metade, vai entender né…

Legal Bruno, mas o título e o parágrafo desceriam…

Sim, mas como temos o position absolute, isso não acontece mais. Ele fica grudado na div e o conteúdo que vem depois dele, fica aparecendo também, o link fica por cima deles.

Só isso? Mas tem mais código lá ué!

Sim, eu sei. Na verdade, nosso problema teria sido resolvido, mas não podemos esquecer, temos que nos preocupar com o ie. Somente com aquele código, no ie 6 fica ruim, não funcionando totalmente, com o link somente em algumas partes da div.

Mas isso é resolvido colocando uma cor de background no link, porém, teremos um link por cima de tudo, com uma cor sólida por cima. Ganhamos um problema. Temos um link na div toda, mas como tem uma cor de background, não vemos o conteúdo por trás.

Mas temos soluções (gambiarras?) para tudo. Temos uma propriedade no css, a filter, que só funciona no ie. Os valores variam dentro dessa propriedade, podemos colocar opacidade, blur, glow, entre outras coisas que não ficarei aqui citando.

No nosso caso, precisamos da opacidade, por isso, coloquei o seguinte valor:
filter: alpha(opacity=0);

Nesse caso, alpha modifica a opacidade do elemento, que nesse caso é o nosso link. Setei um valor 0 (zero), que significa que quero totalmente transparente. O valor varia de 0 (transparente) até 100 (totalmente visível).

Mas só resolvemos o problema do ie, conseguimos deixar o link transparente no ie, falta no Firefox também. Mas precisamos só de mais uma propriedade, a opacity, que recebendo 0 (zero), fica totalmente transparente.

Ufa. Que saco hein Bruno

Nem me fale isso. É um saco isso tudo, mas conseguimos chegar no resultado final.

Lembrando que, esse macete não funciona no Opera. Não tenho Opera aqui instalado, por isso não posso confirmar, mas tenho quase certeza que não funciona, ou seja, não é muito legal utilizá-lo :D.

Voltaaaaaaaaaando ao foco do Post…

Acabei escrevendo até um pequeno tutorial, mas tudo bem né :D. Acabei saindo do foco do assunto do post.

Mas voltando ao assunto dele, chegamos no ponto crucial. Vimos aqui que temos soluções para esse probleminha mostrado por mim aqui, mas vimos que é meio chato fazer e não muito funcional, pois como eu disse, não é certo de funcionar no Opera.

Vale a pena focar a semântica SEMPRE? Ou melhor, vale a pena focar a Validação na W3C?

Esse é o ponto principal do Post. Em relação a semântica, temos dois lados:

• Link englobando o título e o parágrafo como um bloco, ficando invalidado na W3C, pois o título seria um h1 e o parágrafo um p;
• Link englobando um strong e um span, sendo eles o título e o texto do parágrafo do texto, ficando assim, validado, pois é tudo inline.

Na primeira opção, temos um link englobando tudo e o título sendo título e a descrição sendo um parágrafo, tudo correto, mas como o link é inline, não é validado.

Na segunda, temos o link englobando tudo e um strong sendo o título e um span sendo a descrição. Passa no validador, mas no olhar semântico, nem tanto.

É aí que entra a discussão, será que vale MESMO fazer tudo para validar na W3C? Mesmo que para isso você perca a semântica, as vantagens de se utilizar um h1, h2, h3, entre outros? Vale mesmo deixar tudo inline para validar? Será?

Já vi posts sobre isso, como o do Henrique do Revolução etc, tem outro do Tableless chamado Validar é importante?!, etc.

Eu acho importante validar na W3C Bruno. Por que você não acha?

Não ponha palavras na minha boca (ou seria letras nas minhas teclas?), eu só estou dizendo que existem casos e casos. Você pode muito bem ter um site que ao invés de usar h2, utiliza um <p class=”titulo”>, existe o caso de você esquecer de fechar uma tag, etc, etc, etc.

O caso que citei, foi um caso que está tudo certo, a única coisa “errada” é a utilização do link envolta do título e do parágrafo. Nosso código está semântico, está correto, a não ser pela W3C não permitir links, por serem inline, englobarem blocos.

Como aqui na Globo o pessoal preza a validação na W3C (pelo menos tentar ao máximo), eles utilizam spans e mais spans dentro de links para não ficar errado na W3C.

Eu acho que, neste caso, possa dar uma “esquecida” na W3C e colocarmos o link, não vejo mal algum nisso, está tudo funcionando, tudo certo, só a “bendita” W3C falando que meu código está incorreto. Eu não acho e aí? Como que fica isso?

Mas, isso varia de pessoas e pessoas e eu estou aqui para saber a opinião de cada um que lê este blog, para ver se eu estou viajando, se só eu que penso assim, ou tem desenvolvedores que pensam assim, mas nem sempre agem assim por causa dos seus trabalhos ;).

Resumindo

Na verdade, o que eu acho é que a W3C deveria criar uma nova tag, chamada <ablock>, que seria um link também, mas como um bloco, com isso, não precisaríamos nos preocupar com isso não é verdade? Ou melhor, fazer com que consultasse o CSS e visse “se o <a> é um bloco, então valido, senão não valido”, o que seria melhor ainda, pois não seria necessário a espera de novas versões dos browsers, que por parte do FF, Opera seria tranquilo, mas o ie… aff…

Finalizando…

E você? O que acha disso? Acha certo “pular a cerca” da validação da W3C nesse caso? Ou você faz parte do grupo “Validação acima de tudo”?

Deixe sua opinião

Aquele abraço.

[ 30/Nov/2006 às 17:27hrs ] [ Por Bruno Dulcetti ] 8 Comentários |

Categorias: Acessibilidade, Artigos, CSS, Usabilidade, Webstandards

» Meta Tags. Quais e como utilizar na sua página.

E ae cambada.

Hoje falarei sobre a utilização das meta-tags em sites, blogs, etc. É uma utilização simples, mas que muitas pessoas têm duvidas sobre como proceder, quando utilizar tais metas, entre outras dúvidas.

Tentarei falar sobre algumas das principais metas, pelo menos em minha opinião. Mas claro que vocês podem comentar sobre outras metas tags, outros tipos de funcionamento ou algum erro descrito por aqui.

O que são essas metas tags?

São parâmetros dentro do html, que foram criados para facilitar a vida dos buscadores web (Google, Yahoo, MSN, etc), incluindo-os nos seus respectivos bancos de dados. Com elas você também pode assinar o site que você criou, fazer redirecionamentos, entre outras coisas.

Sucesso! Mas como devo utilizá-las?

Mole, mole. Coloque-as entre as tags <head> e </head> da sua página HTML.

E quando devo utilizá-las?

Sempre, pelo menos é a minha opinião Em todas as páginas devemos colocar as metas tags, tanto páginas principais quanto páginas internas. Sua inclusão auxilia e ajuda na aparição nos buscadores web.

Hmmm… Legal Bruno, mas poderia explicar melhor?

Claro, claro. Tentarei explicar um pouco melhor sobre as metas tags, cada uma delas, pelo menos as principais que irei explica aqui.

Explicações Gerais:

A tag meta tem um atributo obrigatório, o content. Este atributo recebe o conteúdo em texto, etc. O seu conteúdo refere-se a outro atributo, que pode ser o name ou o http-equiv, por isso que é a único obrigatório.

Pra entender melhor, dois atributos seriam obrigatórios, o content mais o atributo name ou o atributo http-equiv.

Atributos Opcionais

São três os atributos opcionais:

• http-equiv: Seus valores podem ser content-type, expires, refresh e set-cookie. Seus valores, geralmente influenciam no conteúdo do site, redirecionamento, etc.
• name: author, description, keywords e generator. Seus valores influenciam nos buscadores, informações sobre a construção do site, etc.
• scheme: atributo pouco utilizado e pouco comentado. Com ele você definir o tipo de conteúdo inserido no atributo content. Por exemplo, você define:
  
  <meta name="DC.identifier" content="http://www.brunodulcetti.com/" scheme="URL" />
  Este exemplo eu estou dizendo que o atributo name que recebe DC.identifier, recebe o conteúdo como uma URL, definido no atributo scheme e pega o valor do atributo content, que no caso é meu site.

Agora lá vem as metas tags que utilizam o atributo http-equiv.

As meta-tags que contenham o atributo http-equiv são usadas para controles corresponde ntes as chamadas HTTP. Alguns buscadores não diferenciam os valores nos atributos “name” ou “http-equiv”.

<meta http-equiv=”expires” content=”Tue, 17 Oct 2006 06:16:00 GMT” />

Utilizado para informar ao navegador quando a página expirará. Seu uso também pode referir-se ao cache do usuário, por exemplo, se a página expirou, o navegador fará uma nova requisição no servidor, com isso, fazendo um novo “download” da página.

Você pode colocar um valor 0 (zero), que fará com que o navegador SEMPRE faça uma nova requisição, ignorando o cache.

Também serve para os buscadores validarem a página, que faz com que os buscadores atualizem o conteúdo do site dentro dos registros do BD dos próprios.

<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />

Essa é velha conhecida da galera (pelo menos deveria ). Ela diz qual o conjunto de caracteres será utilizado dentro da página.

A parte do content, temos o tipo de conteúdo da página. No caso acima, citei o html, temos também o application/xhtml+xml e o application/xml, que significam respectivamente a utilização do xHTML com XML e apenas o XML na página.

No charset, você define a codificação do conteúdo da página. O mais comum é o iso-8859-1, mas temos também o UTF-8 que é bastante utilizado e foi o que eu utilizei no exemplo.

<meta http-equiv=”refresh” content=”3;URL=http://www.brunodulcetti.com/index.php” />

Alguns desconhecem este recurso, muitas pessoas às vezes querem fazer um refresh na mesma página ou então fazer um redirecionamento para uma nova página. Vemos isso em sites de notícias que são atualizados num pouco espaço de tempo, sites que mudaram o endereço e redirecionam para a url correta, entre outros exemplos.

Isto pode ser feito com apenas uma linha. Primeiro vemos o valor Refresh, que nem preciso explicar o que é isso , depois temos o atributo content, que contém um número, neste caso o número 3, que significa a quantidade de segundos que o site esperará até ser feito o refresh novamente. Depois vemos, dentro do atributo content, um sub-atributo URL, que dirá a página que será chamanda. Pode ser a mesma, caso seja o exemplo da página de notícias, ou uma nova, caso seja a mudança de url do site.

<meta http-equiv=”content-language” content=”pt-br” />

Conhecida pela maioria dos desenvolvedores também. Esta serve para referenciar a linguagem do conteúdo da página.

Ajuda bastante nos buscadores que possuem diferentes idiomas (como o Google), que vão direcionar a página no idioma que ela se refere. Ajuda também caso o idioma citado tenha acentuação (Nosso Português, por exemplo), corretores ortográficos, etc.

Uma breve listagem de idiomas:

• pt-br: Português do Brasil;
• en: Inglês
• es: Espanhol

Entre muitas outras.

Concluindo Parte I

Temos outros valores, mas apenas comentei sobre os principais, em minha opinião.

Agora algumas das metas tags que utilizam o atributo name.

As meta-tags com o atributo name são utilizadas para outros tipos de controles que não correspondem às chamadas HTTP.

<meta name=”description” content=”Aqui vem a descrição do seu Site” />

Essa é velha conhecida da galera também. Aqui você coloca uma breve descrição do seu site. Muitos tentam ser “malandros” e colocam enormes descrições, mas não sabem que os buscadores limitam-se a ler cerca de 200 caracteres, descartando e dificultando o posicionamento de sites com mto conteúdo nessa tag.

<meta name=”keywords” content=”css, artigos, xhtml, php, webstandards” />

Outra velha conhecida, mas que têm suas limitações que muitos desconhecem. Já vi alguns sites que recomendavam a utilização de várias palavras, enchendo, lotando de “tags”. Mas poucos desconhecem que é recomendado apenas a utilização de 3 a 5 palavras, variando de página a página.

Os buscadores reconhecem quando o site utiliza muitos e o considera um “burlador”, digamos assim, fazendo com que perca posições.

É bom também colocar diferentes palavras dentro das páginas, mas TODAS que sejam referentes ao conteúdo do site, pois o buscador poderá “puni-lo” por tal ação.

<meta name=”robots” content=”index,follow” />

Esta meta tag é muito importante, porém, alguns não saibam disso. Essa meta tag que irá dizer se seu site ficará visível nos sites de busca ou não.

Mas por que eu não iria querer não indexar meu site?

Seu site pode ser, às vezes, em frames :o, ou então é aberto em uma popup, entre outras opções. Não seria legal essa página dentro da popup ou frame, aparecer fora da página “mãe” correto?

Temos a seguinte listagem de valores para o atributo content:

» index,follow

Esta opção faz com que a página que contenha esta meta tag e as urls referenciadas nelas, sejam indexadas pelos buscadores.

» noindex,follow

Com esta, você indexa, somente, as urls referenciadas na página, não indexando ela própria.

» index,nofollow

O contrário da anterior. Somente a página que contém esta meta tag será indexada, fazendo com que as urls referenciadas nela não sejam indexadas.

» noindex,nofollow

Não indexa nenhuma das páginas, nem as urls referenciadas e nem ela própria. (*)

» noarchive

Esta opção faz com que os buscadores não armazenem uma cópia do seu site em cache. Sua utilização requer um pouco de cuidado, pois uma vantagem em não utilizá-la, é que caso seu site fique fora do ar por algum problema, ele ainda continuará sendo indexado, mas caso escolha utilizá-la, automaticamente é retirado. Vemos isso várias vezes no Google, por exemplo, que páginas continuam indexadas e quando clicamos, dá o famoso erro 404.

(*): Você pode também escolher qual site irá indexar ou não o seu site basta saber o “nome” do bot. Segue um exemplo abaixo do Google.

<meta name="googlebot" content="noindex,nofollow" />

Neste caso, somente o Google não indexará o seu site. Mas convenhamos, quem vai querer fazer isto?

Pesquisei sobre a utilização dessa meta tag e ouvi falar que é bom, os buscadores “dão valor” para quem diferencie corretamente as páginas. Por exemplo, na sua página principal, vc quer indexá-la logicamente, mas uma página de contato, por exemplo, não é tão interessante, a página de obrigado desta página de contato, etc.

Os buscadores “enxergam” que você diferencia e sabe utilizar tais recursos e podem melhorar seu posicionamento, etc.

<meta name=”author” content=”Bruno Dulcetti” />

Nesta referência, você coloca o autor da página criada, no caso você É uma forma de mostrar que você fez o site, etc. Nem todos olham o código-fonte da página, mas nem por isso não devemos levar em conta que não seja válido colocar É bom lembrar também que os buscadores levam em conta os termos que estejam na página, portanto, se seu nome aparece nos 50 sites que você criou, são 50 referências para o seu nome e isso conta para eles.

<meta name=”generator” content=”Notepad” />

Opcional, geralmente colocado automaticamente pelos programas geradores de código (Dreamweaver, Home Site, Front Page, etc). Não faz nada demais, só mostra qual Software utilizado para a construção da página.

<meta name=”revisit-after” content=”01 days” />

Não muito utilizada hoje em dia por causa dos spammers nos buscadores, mas era uma tag bem utilizada e considerada importante antigamente.

Você ajusta a quantidade de dias que os buscadores re-visitariam sua página para atualizar os dados contidos nela.

<meta name=”reply-to” content=”seu@email.com” />

Completamente opcional também. Aqui você adiciona seu e-mail para contato. Mas como o author, só funciona quando vemos o código-fonte da página.

Não recomendo muito sua utilização, pois com esses programas que capturam e-mails para envio de spam, seu e-mail pode acabar ficando mais vulnerável a esses programas.

Concluindo

Antigamente, a utilização das meta-tags era crucial, os buscadores levavam em conta, principalmente a utilização delas, não tinham muitos critérios, etc.

Hoje em dia, nós sabemos que um código semântico, sendo utilizado corretamente, com boas linkagens para ele, ser “popular” digamos assim, o conteúdo em si, vale muito mais hoje em dia que as meta tags.

A utilização ajuda, não deixem de utilizá-las, mas não pensem que apenas colocando um description e um keywords, você verá seu site em primeiro lugar no Google.

Finalizando

Bem, é isso. Deixarei aqui, um código com as meta tags que acho importantes na criação de um site. Claro que isso pode variar de site pra site, página pra página, de desenvolvedor pra desenvolvedor e de opinião pra opinião. Estou apenas deixando a minha.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="pt-br" />
<meta name="description" content="Aqui vem a descrição do seu Site" />
<meta name="keywords" content="css, artigos, xhtml, php, webstandards" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Bruno Dulcetti" />

Espero que tenha ajudado a alguém aqui com mais esse artigo

Akele abraço ae.

[ 18/Out/2006 às 12:26hrs ] [ Por Bruno Dulcetti ] 65 Comentários |

Categorias: Artigos, Criações, Webstandards