Padrões Web e CSS – Caio J Ruman

Primeiro uma aulinha básica sobre html, suas principais tags e seus usos.

Principais tags, ou as tags mais usadas:

div: como o nome indica, é um elemento que fará a divisão de algo. É um elemento sem significado algum (isso é importante) e do tipo block.

Tio, Tio, o que é esse tipo block. Pequeno padawan, continue lendo até o final da lista dos elementos mais usados que depois eu explico tudo.

span: Outro elemento que faz divisão de algo. É um elemento sem significado algum e do tipo inline.

p: O elemento p é um parágrafo. É usado para fazer… Parágrafos!! É um elemento do tipo block.

h1, h2, h3, h4, h5 e h6: O h vem da palavra Header. Cabeçalho. Eles são usados para títulos. Só deve existir 1 h1 na página, normalmente o nome do site + uma pequena descrição ou a descrição mais importante do site. É o título mais importante. A ordem de importância vai caindo conforme os números. O uso do h2 até o h6 requer somente o bom sendo. Elemento do tipo block.
ex: h2 – títulos de seções, h3 – categorias, titulos de páginas internas, h4 – subtítulos de paginas internas

table: Tabelas. Serve para usar em dados tabulares. elemento do tipo block.
thead, tbody, tfoot, th: table head, table body, table footer, table header. Servem para dar sentido a tabela. E para ter mais liberdade na hora de aplicar o css.

a: Vem da palavra anchor, âncora. É um link. Altura padrão: 14px. elemento do tipo inline.

img: Imagem. elemento do tipo inline.

Listas: Por favor, leia esse artigo Ele explica tudo sobre listas de uma forma simples e eficiente.

Tio, Tio, mas eu não sei inglês Tio. Bem, problema seu O mercado de trabalho é cruel, pequeno Padawan, boa sorte.

Como estou de bom humor, um resumo do resumo:

Listas: Se não faz sentido ter bullets perto de um item, então não é uma lista.

São 3 tipos de lista:
dl (definition list)
ol (ordered list)
ul (unordered list)

dl: Atualmente é usado para qualquer tipo de par item-valor(es). Detalhe para o negrito em atualmente.

ul e ol: Se trocando a ordem dos itens também se troca o sentido da lista, então é uma lista ordenada. Caso não troque o sentido, é uma lista não-ordenada.

ex:
ul – Ingredientes de uma receita
ol – Descrição de como preparar uma receita
dl – FAQ da receita

fim do resumo

Com isso termina a lista dos elementos mais usados.

Tio, Tio, mas só isso? Sim, só isso. Simples, não?

Semana que vem tem mais!

Cenas dos próximos capítulos:

- Semântica
- Simplicidade. Quanto mais simples e enxuto, melhor e mais fácil será trabalhar no código.
- Diferença entre display: inline e display: block;
- Principais bugs do IE6 e seus fixes;
- Porque usar em, o que é em.
- Nomenclatura de classe e IDs

Críticas e Sugestões? Comente!

Segue abaixo uma pequena lista de projetos que fiz eu desde que eu entrei na VM2:

Em alguns também segue pequenos comentários sobre cada projeto. Eu também tomei a liberdade de excluir da lista os projetos que o pessoal da manutenção ou os programadores “destruiram” o código XD

http://home.dgabc.com.br/ (Fev-2008)
Esse site deu trabalho. Muito trabalho. Mas foi uma ótima experiência. O site inteiro é totalmente gerenciável, e o administrador escolhe entre 32 (+ ou -) tipos de templates possíveis, para cada bloco.

http://www.telewinshop.com.br/ (Jan-2008)
Esse e-commerce foi um site muito interessante de fazer. Layout 100%, que inicialmente não era, mas no final do projeto tive que adaptar e foi super simples.

http://www.ficsa.com.br/ (Feb-2008)
Site institucional, muito simples e fácil de fazer. Foi muito rápido também.

http://www.dietaantiinflamatoria.com.br/ (Feb-2008)
Outro site simples e muito fácil de fazer.

http://www.editoragente.com.br/ (Nov – 2007)
Esse site deu muito trabalho. Teve algumas mudanças no meio do projeto, o que só dificultou um pouco a entrega. Mas no final ocorreu tudo ok.

http://www.leilaomoha.com.br/ (Oct-2007)
Segundo hotsite para a EA Games. Outro site que deu gosto de fazer, e também foi fácil.

http://www.thesims2bonvoyage.com.br/ (Set-2007)
Primeiro hotsite para a EA Games. Essa não foi tão prazeroso de fazer quanto o do Medal of honor, e deu um pouco mais de trabalho.

http://www.avipam.com.br/ (Aug-2007)
Nesse site eu tive um pouco de trabalho, especialmente com a transparência do submenu e o bg das áreas internas.

http://www.sharpener.com.br/ (Dez-2006)
Primeiro e-commerce que eu trabalhei. Deu um pouco de trabalho.

Os sites abaixo eu não lembro nada de especial que tenha me marcado durante a realização dos projetos, então por enquanto fica só um link:
http://www.autofax.com.br/ (Jul-2007)
http://www.transauto.com.br/ (Apr-2007)
http://www.canon.com.br/ (Feb-2007)
http://www.jumpnext.com.br (Jan-2007)
http://www.aprseguros.com.br (Dez-2007)
http://www.tkl.com.br/ (Nov-2006)
http://www.5asec.com.br (Oct-2006)
http://www.itaiquara.com.br/ (Set-2006)

Em uma frase: Salve no formato em que a relação qualidade/tamanho for a melhor.

Explicação detalhada:
O png é descartado como opção de escolha, pois ele apresenta diferença nas cores entre os outros formatos no IE6. É uma diferença pequena, mas dependendo do lugar que você colocar o png, fica muito aparente.

Então a opção fica entre o gif e jpeg, com o png sendo usado somente para casos de transparência.

Eu sempre uso jpeg-60 (jpeg-high no photoshop), pois é a melhor relação qualidade/tamanho para jpeg. E para gif eu uso o padrão de 128 cores.

Ao escolher entre o tipo de formato, eu levo em conta os fatores abaixo:

- É uma imagem formada por texto? Então dependendo do tamanho final eu uso gif, pois a perda de qualidade é menor. Fica menos borrada a imagem.

Exemplos: Itens de um menu, imagens usadas em títulos com técnicas de image-replacement.

- É uma imagem formada por muitos detalhes de gravura e fotos? Primeiro eu vejo se o tamanho da imagem como gif é muito grande e se ele ultrapassa a quantidade de 128 cores do gif. Em 80% dos casos essa resposta vai ser sim, então eu salvo como jpeg-60.

Exemplos: Fotos de pessoas, paisagens, etc e imagens muito coloridas.

- Para imagens que vão ser usadas em repetição de background ou bullets, eu sempre utilizo gif, pois dificilmente ele vai ter mais que 128 cores na imagem, e o tamanho vai ser menor.

- Em imagens para email o conceito muda um pouco. O tamanho da imagem importa muito. Normalmente eu salvo como jpeg-45 ou menos, sempre prestando atenção na qualidade da imagem e fazendo um comparativo entre gif e jpeg para ver qual fica com tamanho menor e maior qualidade.

Estava eu fazendo a estrutura de mais um e-commerce (fiz tantos e-commerce nos últimos 3 meses que virei um expert no assunto), e chegou o momento de fazer o menu.

Verifico o psd, e para minha infelicidade, vejo que a fonte não é uma fonte padrão para a web.
Começo a fazer uma lista sobre o que tentar fazer no menu. Pelo modo como estava o menu, ele parecia ser gerenciável. Então eu descartei as técnicas de background-replacement.
Sobraram duas alternativas: siFR e conversar com o cliente para mudar a fonte. Fiquei brincando por 40 min com o siFR, e a combinação site 100% com o flash do siFR não ficou boa.
Depois de perder 40 minutos nisso, eu fiz algo que deveria ter feito antes, e perguntei se o menu era gerenciável. E ele não era. Nota mental: Deixar a preguiça de segunda de manhã de lado e sempre tirar as dúvidas antes de iniciar algum projeto.

Desse modo eu comecei a recortar as imagens para fazer um background-replacement.
Após recortar e salvar todas os 10 itens do menu, percebi que faltava o estado hover deles. Como no photoshop não tinha nenhum estado hover, comecei a fazer o padrão de link, deixar o texto com text-decoration: underground. Iria salvar 2 imagens, uma para cada estado, juntar elas e trocar o estado delas no :hover com background-position. Simples.

A visão dos próximos 20 minutos de tédio que seria pegar os 10 itens do menu, deixar eles com underline, salvar as imagens novamente e depois juntar todas, desencadeou uma epifania!
Ao invés de fazer mais 10 imagens e juntá-las para o menu, eu peguei cada imagem, fiz um traço transparente embaixo de cada texto, e no :hover eu somente dei uma cor de fundo para o link. Voi-lá! E está pronto um menu com imagem e um :hover comum de text-decoration: underline.

Como algo visual vale mais que mil palavras, segue abaixo um link com exemplo!

Exemplo de um css menu, utilizando uma única imagem com detalhes transparentes e o fazendo o hover com um background-color.

Testado no IE6, IE7, Firefox, Safari e Opera, somente no windows.
O único ponto contra dessa técnica é que a imagem não pode ter mais nenhum tipo de transparência.

Amar pode ser uma palavra muito forte, mas não encontrei outra palavra para a situação.

A uns 6 meses atraz eu passei a adotar o ‘em’ para as fontes, em todos os sites que eu estruturo.

ex:

html { font-size: 62.5%; }

body { font-size: 1em; }

Do modo acima, como a fonte padrão dos browser é 16px, a fonte de tudo fica como 10px, ou seja, 1em = 10px. Então nos outros elementos, se eu quiser a fonte como 13px, eu faço 1.3m.

Se o usuário aumentar a fonte padrão do browser, tudo aumenta também. Útil para quem não consegue ler direito.

Há um pequeno problema com isso, já que um elemento filho herda o tamanho da fonte do elemento pai, e setando um valor em ‘em’ para os 2 elementos, o tamanho da fonte do elemento filho não vai ser o que você espera.

Até hoje eu não tinha tido um retorno de ganho de tempo com isso. Até hoje! O atendimento veio com um pedido: “O cliente ligou desesperado! Precisa aumentar a fonte de todo o site! Urgente!” (incrível como tudo é urgente!).

Modificação necessária: somente 1 linha no css

body { font-size: 1.1em; }

Ahh, que maravilha. E um viva às unidades relativas.

Quando o site citado for ao ar eu coloco o endereço aqui! Por enquanto ele está em produção, então o NDA ainda conta.

ps: Vergonhosamente o meu blog não usa isso ainda. Está tudo em px mesmo XD

Segue abaixo minha primeira “tirinha”!
A idéia surgiu depois de um erro que eu cometi, e foi parecido como está abaixo, exceto pelo último quadrinho
Com destaque especial para as minhas habilidades no desenho!

ps: espero não ter que explicar a tirinha para muita gente!

Finalmente!

Depois de muita enrolação, finalmente terminei o tema do blog.

É o primeiro tema de wordpress que faço, e meu segundo layout de um site!

Ainda estou procurando por bugs, e agora só falta testar no IE6. Talvez o tema mude novamente em breve, porque minha idéia é fazer com que cada categoria tenha uma imagem característica, e as cores do blog sejam baseadas nessa imagem. Igual ao site do Dave Shea.

Até breve!

update: Já achei um bug no IE6, que faz com que a borda abaixo do post e o link para os comentários desaparecer. Correções em breve!

Na última semana, 2 projetos interessantes ficaram prontos na empresa onde trabalho.

Foram dois hotsites para promoções de jogos da EA Games:

Promoção The Sims 2 Bon Voyage

Promoção Medal of Honor: Airborne

A minha colaboração nos 2 projetos foi o xhtml e css! Como são hotsites pequenos, eles foram simples e rápidos de fazer, com poucos problemas cross browser.

Pessoalmente, o site do Medal of Honor foi o mais fácil de fazer e o que ficou melhor. O do The Sims teve algumas mudança no meio do projeto, que ocasionaram pequenos problemas na hora de fazer certas partes do html. Além de que eu não gosto de The Sims e já joguei todos os Medal of Honor anteriores

Quanto a validação do Html dos 2 sites:
Nenhum dos 2 passa na validação. Mas são erros simples e com pouco impacto, como usar & no lugar de &. Porém, depois que você começa a trabalhar com sites grandes, e em uma agência onde várias pessoas irão mecher no código e que o prazo de entrega é curto, certas coisas se tornam muito difíceis de controlar. Deve existir um lugar perfeito, onde existam programadores e principalmente uma equipe de manutenção que não destrua um código bem feito. Enquanto eu não acho esse lugar, eu me contento em ensinar todo mundo ao meu alcance na empresa em que trabalho!

Se você comparar o código html do site da empresa, que foi feito antes de eu entrar na área que estou agora, com os sites que foram feitos desde outubro/2006 até hoje, tem uma diferença da água para o vinho!

Mudar o modo que a maioria das pessoas trabalha é difícil, mas é um bom desafio!

Essa descoberta foi de uma coincidência incrível. Hoje de manhã tive um problema no trabalho com o código gerado pelo FCK Editor. Mais especificamente no align=”right” ou align=”left” nas imagens, que não funcionava no IE.

ps: Eu abomino o FCK Editor. Ele gera código obsoleto e desnecessário na página. Infelizmente ele é amplamente usado aqui no trabalho, e as minhas sugestões de usar um novo não foram aceitas.

Fiquei um tempo pensando do porque as imagens não estarem funcionando corretamente, mas não cheguei a nenhuma conclusão.
No horário de almoço resolvi terminar o post sobre css framework, e após postar e conferir os trackbacks (blogueiro é curioso!), vi o comentário n. 241 do post sobre css reset reloaded do Eric Meyer, que coincidentemente era exatamente o problema que eu estava tendo!

No final, a solução que eu tomei foi a seguinte:

- Tirar o img do reset principal, e fazer um exclusivo para ele, removendo a regra problemática, a vertical-align: baseline;

Problema resolvido!

E agora, voltando a procurar por um editor web fácil de usar por clientes leigos e por programadores, e que gere um código bom…

Não é exatamente um CSS Framework, algo que eu também não considero útil para css, mas sim uma base para iniciar um projeto.
Eu tomei como base o “Css framework” desse site, que eu achei lendo o artigo no pinceladasweb sobre css framework.
Eu tomei a liberdade de modificar bastante os arquivos, modificando a estrutura de pastas de acordo com o que eu uso normalmente no trabalho, incluindo novos arquivos e retirando arquivos que eu não uso normalmente.

O css está dividido 7 arquivos:
base.css
estrutura.css
internas.css
reset.css
ie6.css
ie7.css
print.css

O base.css possui somente declarações principais (html, body e #principal), o import dos outros arquivos, o clearfix e classes básicas (bold, posicionamento de imagens). Esse também é o único arquivo que eu chamo no html.

O estrutura.css é o arquivo que vai conter todo o css relacionado a estrutura do site, normalmente é a home ou o esqueleto do site que se mantém por todas as páginas internas.

O internas.css contém todos os estilos das páginas internas, separados por blocos de comentário.

O reset.css é o arquivo de reset do Eric Meyer, com pequenas modificações, como a inclusão do button no reset e a remoção do line-height: 1 no body.

ie6.css e ie7.css são os estilos para o IE6 e IE7, reespectivamente.

E o print.css é o css de impressão.

Eu também inclui o arquivo iepngfix.htc, que eu uso para fazer png funcionar parcialmente no IE6.

Baixe aqui o meu arquivo de Css Framework.

Usem do modo que acharem melhor!

ps: O tema novo do blog deve sair nesse final de semana!