Pinceladas da Web

Muitas vezes, as pessoas que usam leitores de tela acabam se queixando de que não conseguem literalmente “ler” o que está escrito em uma página por que, em certas imagens, como o logo do site, por exemplo, não foi usada nenhuma técnica de Image Replacement. Mas no que consite essa técnica?

O objetivo dela é o seguinte: manter o texto “visível” ao browser, mas escondido do usuário. O texto está escondido do usuário que está vendo o site, mas ele ainda está lá. Vamos citar um exemplo, eu quero colocar um logo em meu site, mas quero usar a técnica de Image Replacement, então faça o seguinte:

Aqui o CSS:

h1 {
text-indent:-9000px;
background:url(replacement.jpg) no-repeat;
width:500px;
height:214px;
}

O que isso faz é movimentar o texto a 9000 px a esquerda, o texto ainda está lá, porém, você não o está vendo. Em background você coloca a imagem que deseja usar e deve também definir para não repetir. E width e height são as dimensões da imagem usada.

Aqui o HTML:

<h1>Pinceladas da Web - Onde ser simples é ser Inteligente!</h1>

Com isso, todo h1 será substituído por uma imagem. Aqui você pode ver um exemplo dessa técnica, em seu navegador, procure desabilitar o CSS que você verá que o texto aparecerá, ou então dê uma olhada no código fonte.

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 »