Dicas de CSS #3 - Trabalhando com Frameworks
Postado em December 3rd, 2008| Algo sobre CSS, Dicas, Sites, Tutoriais, Web Standards
Hi. Estou de volta após uma grande correria de 2 semanas, entre compra de móveis ara o novo home office, pintura, e outras preocupações de fim de ano.
As dicas de hoje são para os meus amigos da Fatec. Vou escrever umas dicas para o uso de framework, visto que algumas pessoas tem me perguntado sobre questões de organização de arquivos, includes e outros detalhes que fazem a diferença na hora de codificar páginas. Começando.
1. Crie uma estrutura padrão: A maioria dos sites que faço, possuem itens que sempre estarão presentes, tais como menu, topo, uma div para servir de corpo (no meu caso, #principal) e por ai vai. Então você ganhará tempo se já tiver essa estrutura html pronta, para usar sempre a cada novo projeto. Além de ganhar tempo, isso também ajudar a criar padrões. Isso também é válido para o css.
2. CSS pronto pra ação: Crie uma estrutura padrão também no css, tais como formulários, listas, classes para uso geral, comportamento de links. Dessa forma vc sempre terá uma classe pronta para uso, ajudando a padronizar o código.
3. Use includes: O uso de includes evita que você repita códigos sem necessidade. Por exemplo, ao invés de inserir o código html do menu em todas as páginas, crie o menu em um arquivo separado, e sempre que necessário utilize o include para referenciar na página desejada. Dessa forma, se necessitar alterar o menu, só precisará alterar um arquivo.
4. Organize suas pastas: Uma das piores práticas que podem ser utilizadas, é a não criação de pastas para separar os arquivos. Pelo menos as pastas básicas devem ser criadas (imagens, css). Outras também ajudam a organizar, tais como “includes”, “JS” e “flash”. Particularmente, a pasta imagens, eu ainda separo entre “principal”, “internas” “temporarias”.
Essas são as essenciais, a medida que eu vá lembrando de outras dicas, vou postanto. Té mais
Formulário Semântico com CSS
Postado em August 31st, 2008| Algo sobre CSS, Dicas, Tutoriais, Web Standards
Um dos passos mais difíceis para quem trabalha com CSS, (geralmente quem está migrando de Table para Tableless), é a parte de formulários.
Vou listar abaixo algumas dicas de como criar um formulário simples, formatando apenas com CSS. Mãos à obra.
Não é necessário o uso de tabelas para diagramar um formulário. Para aqueles que tem vários tamanhos de campos, crie várias classes com tamanos de acordo com a necessidade. Veja o exemplo.
Esse exemplo é bem simples e da para ser usado como base para formulários mais complexos.
Mais erros do IE
Postado em March 25th, 2008| Algo sobre Bugs do IE, Geral, Ossos do Ofício, Web Standards
Bem amigos da Rede Globo… Estamos de volta, retomando um assunto que insiste em nos atormentar. BUGS DO IE.
Como falado em algum post algum tempo atras, é comum hoje em dia o uso de css condicional, sem a necessidade de hacks. Acontece que, em uma bela manhã de sol, o trabalho ia de vento em polpa, quando de uma hora para outra, o IE parou de interpretar essa condição, ou seja, o que eu colocassno css para o IE7, o IE6 e vice-versa. Resultado: Caos total em margins, paddings e afins.
Mediante essa falta de conhecimento sobre tal bug, coloquei os velhos hacks (* para IE7 e _ para IE6) para soluções emergênciais.
Estou pesquisando sobre o assunto, espero em breve achar a solução. Por enquanto nada, mas conto com a ajuda de vocês. Até +.
Iniciando as Mudanças
Postado em March 23rd, 2008| Algo sobre Designer, Geral, Nada a ver, Ossos do Ofício
Não, você não entrou no Blog errado, apenas num Blog de cara nova
Pois é galera, 2008 chegou e não tive tempo de providenciar as mudanças que planejei logo de início. Aproveitando um pouco de tempo que me sobrou esse feriadão, dei start às alterações, começando pelo Blog.
Nos próximos dias o site estará de cara nova também, aguardem.
Dicas de CSS #2
Postado em February 8th, 2008| Algo sobre CSS, Geral, Tutoriais, Web Standards
Dando continuidade a nossa busca incansável de novidades no mundo do CSS, estou postando mais algumas dicas que encontrei no site www.htmlstaff.org. Vale a pena ficar atualizado. Segue a lista.
1. div1 é diferente de menu
Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam nada e na hora da manutenção vão tornar seu trabalho mais lento. Da mesma maneira, barra_azul não faz muito sentido: e se você mudar a cor do site? Prefira nomes explicativos, como menu ou barra_links.
2. Maiúsculas e minúsculas
Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu elemento no HTML.
3. id x class
Para elementos que aparecem apenas uma vez no layout (menu, rodapé, cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (como #menu). Para elementos que vão aparecer várias vezes, utilize a declaração class, precedida por um ponto (como .noticia).
4. Compartilhe declarações entre vários elementos comuns
Se vários elementos terão características em comum, declare-os todos de uma vez, separados por vírgula:
h1, h2, h3, h4 {
font-family: Arial, Helvetica, Sans-Serif;
}
5. Lembre-se da hierarquia e organize-se
Por ser uma folha de estilo em cascata, a última declaração é a que prevalece. Preste atenção para não declarar um elemento duas vezes: na hora da manutenção, você pode fazer a alteração na primeira e se perguntar porque ela não funciona, quando na verdade uma segunda declaração está perdida no meio do seu código (por isso organização é fundamental!).
6. Comente os códigos avançados
Quando você utilizar o CSS para efeitos mais avançados, como um menu em abas, comente seu código para não esquecer o que cada parte dele faz:
#menu ul li a
/* aba normal */
{background: #444; color: #FFF; border: 1px #FFF solid;}
#menu ul li a:hover
/* aba selecionada*/
{background: #FFF; color: #F00; border: #F00 1px solid;}
7. Anote suas cores
#09F ou #F09, qual é o rosa e qual é o azul? Mesmo se você conseguir fazer cálculos RGB de cabeça pra saber a tonalidade da cor sem uma tabela de cores hexadecimal, econonize tempo anotando a cor correspondente de cada código no seu arquivo:
/* ************************************ */ /* */ /* Cores usadas no layout */ /* */ /* cinza fundos: #F5F5F5; */ /* cinza bordas: #B6B6B6; */ /* azul link: #336699; */ /* azul lnk ativo: #003366; */ /* */ /* ************************************ */
8. Declare as unidades
Quando trabalhar com valores diferentes de zero, declare as unidades (px, pt, etc). Cada navegador assume uma unidade padrão quando ela não é especificada, gerando resultados diferentes em cada navegador.
9. Tenha certeza que o efeito desejado funciona em todos os navegadores
Barras de rolagem coloridas, divs semi-transparentes… Tudo isso é muito bonitinho, mas não funciona em todos os navegadores. Projete seu site de uma maneira atraente sem esses recursos, e, de novo, certifique-se de que seu CSS tem o mesmo efeito no maior número de navegadores possível.
10. Não confie na sua memória
Com o tempo, é natural que decoremos os principais elementos e seus atributos. Mesmo assim, tenha sempre um guia de consulta rápida ao seu alcance, para tirar dúvidas sobre o funcionamento deles. Um ótimo livro que eu uso e recomendo é o “CSS - Cascading Style Sheets - Guia de consulta rápida”, de Luis Gustavo Amaral.
11. Inspire-se
Sites como o CSS Zen Garden e o Maujor são ótimos para ter uma idéia das novas tendências. Visitar esses e outros endereços regularmente é recomendável.
Veja outras dicas de CSS
