Arquivo da categoria: CSS

Galeria CSS #6

2 Comentários

Arquivado em CSS, Galeria CSS

Desenvolvimento em camadas

Adotar os web standards vai muito além de substituir tables por divs. Existe toda uma filosofia de desenvolvimento por trás dos web standards que pode levar algum tempo para ser adotada, ou mesmo aceita. Por outro lado, essa nova filosofia de desenvolvimento traz consigo diversas vantagens, e eu até já falei um pouco sobre algumas delas.

Quando um profissional ou uma agência ou produtora web opta por migrar para o desenvolvimento de sites em conformidade com os web standards, ele (ou ela) está (ou deveria estar), na verdade, tomando uma decisão muito mais profunda e importante do que simplesmente escrever um código mais “limpo”. Um dos conceitos mais importantes que devem ser observados nesse momento é a forma como é construído o website.

Não é difícil encontrar por aí sites que misturam em seu HTML algumas pitadas de JavaScript, estilização (nem sempre via CSS), etc, etc.
Em web standards o desenvolvimento de websites é feito em camadas, mais especificamente em três, onde cada uma tem o seu valor e exerce papel fundamental no bom funcionamento do site. Vamos falar um pouco sobre essas três camadas:

Conteúdo:
É aqui onde fica toda a informação do site, é a “markup” do site, o XHTML. No XHTML devem ser evitadas ao máximo as imagens que não exercem papel importante na disposição da informação no site, ou seja, as imagens meramente decorativas não devem, em hipótese alguma, ser inseridas aqui. Atributos de estilização “inline” também devem ser evitados a todo custo, para que funcione o conceito de “desenvolvimento em camadas”. Além disso, deve haver um zelo extremo pela semântica do documento, para que ele seja acessível ao máximo a mecanismos de busca e principalmente a portadores de deficiências visuais ou outros tipos de deficiência.
Um código limpo, bem estruturado e semanticamente correto é um excelente ponto de partida para o desenvolvimento em conformidade com os web standards, e também para a implementação das duas próximas camadas do desenvolvimento.
Apresentação:
É toda a formatação do conteúdo, a forma como ele se apresentará, através das CSS. Aqui sim, devem ser inseridas as imagens decorativas, formatados os textos, dividido o layout, etc. É hora de, através das CSS, implementar aquele belo layout que você criou, para tornar seu conteúdo mais atraente aos seus visitantes, afinal de contas, quem é que vai querer ficar num site que é texto puro?
O segredo aqui é sempre manter as coisas o mais simples possível (KISS). É bom levar em consideração o fato de que diferentes browsers podem interpretar uma mesma declaração de maneiras distintas e, por isso, é sempre bom testar os resultados em diferentes browsers, à medida que você vai escrevendo o código.
Conteúdo bem estruturado e devidamente formatado, é hora de passar para a terceira e última camada de desenvolvimento…
Comportamento:
É aqui onde vai toda a parte dinâmica do site, ou seja, o JavaScript, DOM ou que quer que seja. A camada de comportamento geralmente é usada pra dinamizar o site, tornando-o mais interativo e melhorando assim a experiência do usuário. Não vou me adentrar muito nessa camada pois reconheço que não sei o bastante sobre ela. Mas recomendo muito a leitura deste artigo do Bruno Torres e, caso se interesse mais, siga o link que ele passou no final do artigo.

Acredito que o desenvolvimento em camadas é uma etapa essencial na migração para os padrões. Ter a mente aberta para uma mudança tão grande nos conceitos de desenvolvimento requer mais do que vontade de mudar por parte dos profissionais; requer humildade para reconhecer que o método antigo (com o qual ele trabalhava, talvez, há anos) estava errado e que, se ele não se mobilizar logo e começar estudar a fundo os web standards, ele acabará ficando pra trás e perdendo mercado pra seu concorrente, que já está entrando também no mundo dos padrões web.

4 Comentários

Arquivado em Artigos, CSS, Semântica, Web Standards, XHTML

Galeria CSS #5

5 Comentários

Arquivado em CSS, Galeria CSS

Galeria CSS #4

Comentários desativados em Galeria CSS #4

Arquivado em CSS, Galeria CSS

Galeria CSS #3

Depois de um bom tempo sem blogar, eis aí a lista da Galeria CSS desta semana.

1 comentário

Arquivado em CSS, Galeria CSS

Galeria CSS#2

Conforme prometido, aí vai a lista desta semana:

Esses são só alguns exemplos da beleza que pode ser conseguida com CSS. Semana que vem tem mais.

Comentários desativados em Galeria CSS#2

Arquivado em CSS, Galeria CSS

10 dicas para evitar dores de cabeça

Neste post estarei mostrando 10 dicas simples, mas que com certeza lhes ajudarão a obter uma maior produtividade no processo de desenvolvimento e atualização de seus documentos pra web. São coisas bem simples, mas que podem fazer toda a diferença e economizar um bom tempo (e fios de cabelo) se seguidas corretamente. Vamos lá?

1. Comente seu código

Já imaginou ter que editar um documento de 200 linhas (pra ser otimista), criado a mais de um mês? E se não tiver sido você quem criou? Com certeza, você teria muito trabalho até entender o código, pra só então começar a editar, não é?
Comentários evitam essa perda de tempo (e fios de cabelo) de ter que ficar analisando o código, linha por linha, até que você consiga finalmente distinguir as partes do site a que cada bloco de código se refere. Com isso, não importa a quanto tempo foi feito, ou quem fez o código, ele sempre estará explicadinho, pronto pra ser atualizado pelo felizardo (e não coitado) que for designado pra isso.

2. Estruture seu código corretamente

Use e abuse das indentações, pois elas ajudam (e muito) a identificar elementos “pais” e seus respectivos “filhos”. Por exemplo, se for criar uma div, e dentro dela for colocar uma lista e um parágrafo, faça a div, passe pra linha de baixo, indente (pressionando TAB em qualquer editor), crie o parágrafo. Salte uma linha, crie a lista (com a mesma indentação do parágrafo, já que ele também está dentro da div), passe para a próxima linha, indente mais uma vez, crie os sub-elementos da lista todos com a mesma indentação.
Fazendo assim, você evita ter que ficar toda hora voltando mais acima no código e fazendo uma contagem mental, pra ver dentro de qual (ou quais) elementos está o elemento que está querendo.

3. Feche suas tags assim que abrí-las

Você cria uma div. Dentro da div, um título, um parágrafo, outra div e, dentro dessa outra div, uma lista, dentro dos elementos dessa lista, um link… ops! Me perdi todo! Quais tags faltam pra eu fechar mesmo?
Evite ter que ficar voltando no código pra se localizar, feche suas tags assim que abrí-las. O Validador do W3C ajuda a identificar as tags que não foram devidamente fechadas, mas nada melhor do que passar direto na validação, não é?

4. Nomeie corretamente suas id’s e classes

Procure nomear suas id’s e classes de acordo com sua função no layout, e não com sua aparência ou posição.
O Diego Eis, do Tableless, escreveu um artigo (artigo muito bom, diga-se de passagem) inteiro só sobre isso. Não vou entrar em detalhes aqui, mas indico que dêem uma lida no artigo dele.

5. Use folhas de estilho externas

Evite documentos gigantescos. Crie seu documento CSS separado do XHTML. Com isso, além de reduzir considervelmente o número de linhas dos seus documentos, quando você tiver que fazer uma atualização, seja no CSS ou no XHTML, você terá tudo separadinho em um único documento. Portanto, use e abuse das tags <link />.

6. Evite estilos inline

Ainda de acordo com o item anterior, utilizar estilos inline só lhe trará dores de cabeça quando tiver que editar somente alguns trechos do seu CSS, pois você terá que sair vasculhando seu XHTML até encontrar aquele bendito elemento que você deseja modificar. Tempo é dinheiro (principalmente se você é freelancer), não o gaste à toa: use somente folhas de estilo externas para estilizar seu documento.

7. Baseie-se sempre no Firefox

Ou no Opera. Não faça seus sites baseando-se apenas no IE, pra depois tentar tirar a diferença nos outros browsers. Baseie-se primeiro nos browsers decentes, e só então corrija os defeitos do IE. É mais fácil adequar o código correto à renderização errada do que o inverso.

8. Use comentários condicionais

O IE7 não terá suporte aos hacks CSS que conhecemos hoje (já vi que, ao invés de soluções, ele trará é mais problemas pra nós). Para evitar de quebrar seu teclado e/ou monitor a cabeçadas tentando desenvolver sites compatíveis com Firefox, Opera (e os outros decentes), IE6 e IE7, a Microsoft recomenda o uso dos Comentários Condicionais, que são suportados desde a 5ª versão do browser azul.
O Henrique, do Revolução Etc escreveu dois artigos sobre comentários condicionais para o IE, um no próprio Revolução Etc e outro no WebInsider. Recomendo a leitura e a prática dos conselhos dele.

9. KISS!

Calma, calma, eu (ainda) não estou ficando louco de tanto escrever. KISS é um acrônimo para “Keep it simple, stupid” , em português, algo como: “Mantenha simples, estúpido”.
A idéia básica é simplificar ao máximo o código. Se você já está ficando perdido no meio de tanto código, é bem provável que não esteja conseguindo manter as coisas simples, então, nesse caso, é melhor rever seu código e procurar onde ele pode ser simplificado. Uma maneira de se conseguir a simplicidade sem maiores dores de cabeça, é estar sempre bastante atento àquilo que eu já defini como princípio primordial para o desenvolvimento com Web Standards: a semântica.

10. Valide, valide, valide… e valide!

Mesmo seguindo à risca as outras 9 dicas, ainda é possível que, por uma falta de atenção ou erro de digitação, o seu código contenha algo de errado. Nesse caso, o Validador do W3C pode ser bastante útil na identificação desses possíveis erros. Evite ficar voltando no código pra detectar pequenos erros, deixe que o validador faça isso por você.

Bom pessoal, essas são as dicas que eu tinha pra passar. Espero que elas possam lhes ser úteis no dia-a-dia e que venham a ajudá-los no processo de desenvolvimento e atualização dos seus códigos.

Um abraço e até a próxima!

9 Comentários

Arquivado em Artigos, Cotidiano, CSS, XHTML