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.
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
Rodapé no rodapé - Finalmente
Postado em December 18th, 2007| Algo sobre Bugs do IE, CSS, Tutoriais, Utilitários, Web Standards
Creio que muita gente por aqui já passou por isso, conseguir deixar o rodapé sempre na base do site. Uma tarefa que não parece ser tão difícil, mas que pode dar muita dor de cabeça.
A grande questão é quando o conteúdo da página ultrapassa o tamanho da tela, e é necessária a rolagem, então lá vamos nós apelar para o velho JS.
Recentemente o Nagueva Guilherme postou no site Outrolado, uma solução até então definitiva para o posicionamento do rodapé, (sem o uso de JS). Leia o post completo
Criando um box expansível com CSS e JS
Postado em November 29th, 2007| Algo sobre CSS, Javascript, Tutoriais
Hoje vou mostrar um nesse tutorial, um pequeno truque que muitas vezes quebra um galhão.
Se trata de um box, que exibe apenas uma parte do conteúdo, e quando é clicado, expande mostrando o conteúdo todo. Veja oque vamos fazer Lá vamos nós.
Todo o segredo está no seguinte código
<div class="box_fechado" onClick="javascript: this.className = ( this.className == 'box_aberto' ) ?
'box_fechado' : 'box_aberto';"> </div>
Esse javascript, faz com que a classe aplicada na div mude, de “box_fechado” para “box_aberto”, ou seja, o resto é CSS.
Criaremos duas classes, para os dois estados do box.
div.box_fechado,div.box_aberto{cursor:pointer;}
div.box_fechado{height:18px;overflow:hidden;}
div.box_aberto{overflow:none;}
O overflow:hidden, e o height faz com que o box fique travado em um tamanho definido, e ao clicar, o overflow fica “none” mostrando todo o conteúdo, ja que o height também some.
Isso é só o raciocínio inicial, aproveitando a lógica, pode-se também trabalhar com cores, backgrounds, e outras formatações, é só usar a imaginação.
Até a próxima
