Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

A maior dor de cabeça de todos os desenvolvedores com certeza é o uso de hacks em CSS, por culpa de um navegador que não interpreta o código de forma correta (vulgo IE). Uma das dores de cabeça mais conhecidas são as Margens duplicadas, e em certas ocasiões você tem que usar padding ao ínvés de margin, sem nehuma razão, tudo por causa do nosso amigo IE.

Hoje em dia existem muitos hacks, é só você dar uma procurada no Position Is Everything, que você vai encontrar muitos deles, e quem saber uma solução para o seu problema não pode estar lá. Mas vamos dizer que você já tentou de tudo e ainda não encontrou a solução para o seu problema. Ainda resta um último recurso: O Hack do seletor universal.

* html

Continuar lendo »

A cada dia eu me surpreendo com o que as CSS são capazes de fazer, dando uma olhadinha por aí, descobri um efeito de raio-x com CSS, é usado basicamente a propriedade background-attachment do CSS2. Basicamente são usadas 3 imagens na mesma posição, e as CSS se encarregam de fazer a mágica. Você pode dar uma conferida no efeito aqui.

Atenção: No IE o efeito não fica correto, agora no Opera, Firefox e Safari ele fica OK

Para entendermos as vantagens de se usar CSS, vamos voltar um pouquinho no tempo: Com a evolução da internet, as linguagem HTML também precisava evoluir juntamente com a necessidade dos desenvolvedores, com isso foram criadas várias tags (por exemplo “center”), que supriam essas necessidades, essas, por sua vez, por falta de planejamento, resultavam em um código sujo, enorme e confuso.

Mas depois de algum tempo, essas tags foram se tornando obsoletas, com isso surgiu uma nova solução: As Folhas de estilos em Cascata, ou seja, CSS. A função das CSS é simplesmente separar a formatação do conteúdo da página. Então, trate de ir esquecendo as horríveis tabelas.

Vantagens de se usar CSS

• Com CSS economiza-se tempo de criação e manutenção do site (o código de formatação fica isolado em um único arquivo CSS).
• Redução do código HTML.
• Os Navegadores carregam mais rápido a página, podendo chegar até a 70%.
• Maior eficiência no gerenciamento do Layout.
• Com recursos mais avaçados de CSS pode-se conseguir um design sofisticado sem utilização de imagens e tabelas.

Limitações do CSS

• Ainda nenhum browser suporta todas as especificações de style sheets definidas pelo W3C e alguns implemetam estilos de forma diferente.

Regras básicas a serem seguidas

• Deve-se assegurar antes de que os usuários que têm browsers que não suportam CSS terão uma apresentação aceitável das suas páginas.
• Se adotar CSS, não deixe “restos” de código de formatação HTML na página. Você poderá estar utilizando código desnecessário de formatação prejudicando a performance de carregamento da página.
• Não mantenha conjuntos paralelos de páginas com e sem CSS. A manutenção se torna muito difícil.

Escrever uma folha de estilo eficaz é muito importante para o desenvolvimento de um Website. A medida em que você cria bons hábitos, sua técnicas com CSS vão evoluindo naturalmente. A habilidade de ficar perdido com seu código se torna hábito a cada linha que você escreve, a menos que você escreva eficazmente.

A medida em que você vai se familiarizando com programação, naturalmente você aprende o conceito de comentários, parece besteira você ficar alí explicando blocos de código, mas por outro ponto de vista, quando você for fazer uma atualização em seu site, rapidamente você pode localizar o que quiser. Isso não é só benéfico para você, fazendo isso você está ajudando outras pessoas que estão lendo o seu código, imagine só se você trabalha em uma empresa de Web Design, onde uma equipe toda está envolvida, se o seu companheiro de trabalho não fizer um trabalho eficaz, vai acabar complicando a sua vida e muito.

Um exemplo bom a ser seguido seria, quando você estiver desenvolvendo uma folha de estilos, é separar tudo em blocos, mas como isso, procure declarar uma seção para o topo, outra para o menu, outra para os links, outra para o rodapé, e assim por diante. Por isso o nome de Folhas de estilo em cascata, procure sempre declarar o seu código de uma forma organizada, abaixo você pode ver um exemplo:

Continuar lendo »

O que muita gente não sabe é que a semântica também deve ser usada na definição de nomes para os atributos class e id. Geralmente são escolhidos nomes específicos ao projeto em andamento. Para ter uma idéia melhor, vou citar alguns exemplos mais comuns:

Nomes mais comuns

• menu-esquerdo
• linkverde
• sem-borda

Boas escolhas

• container
• navigation
• submenu
• external-link

Isso é muito importante por que quando você está trabalhando em um projeto muito complexo, você consegue identificar tudo mais facilmente.

Nomes Genéricos

Uma página Web geralmente é constituída de 5 áreas principais. Usando esses nomes você ajudará a divulgar melhor os estilos, em consequência são cancelados determinados vícios e com isso é melhorada sua experiência na área. Logo abaixo você pode ver sugestões de nomes para essas áreas principais:

• header
• navigation
• content
• sidebar
• footer

O que você sempre deve manter em mente é que cada elemento tem sua função, experimente dar uma olhada no código de sua página e veja se você trabalha dessa forma.

Pra quem não sabe, o Henrique do Revolução e o Diego do Tableless estão com um projeto de publicar um livro sobre Webstandards, eu particularmente achei muito boa a iniciativa deles, por que falta conteúdo em Português para quem quer começar a aprender sobre o assunto e não sabe nada de inglês. Caso alguma editora ou alguma entidade queira estar patrocinando esse projeto eu peço que entre em contato com eles por favor.