Erika Sarti | portfolio web designer » artigo

Tags HTML quase desconhecidas, mas muito úteis para as suas tabelas

Erika Sarti — Fri, 29 May 2009 03:29:57 +0000

Neste segundo artigo sobre “tags desconhecidas”, vamos falar sobre três tags que vão tornar suas tabelas mais semânticas: , e .

Continue lendo “Tags HTML quase desconhecidas, mas muito úteis para as suas tabelas” no InfoWester…

Otimizando um menu com a técnica de CSS sprite

Erika Sarti — Thu, 16 Apr 2009 00:28:18 +0000

Imagine que você tem um site com menu totalmente baseado em imagens, e que quando o usuário passa o mouse sobre um dos itens, essa imagem muda. Desenvolver esse menu utilizando CSS ao invés de Flash é uma boa ideia, mas é necessário criar duas imagens para cada item, cada uma representando um estado, correto? Na verdade, não. Aplicando a técnica de CSS sprite, é possível utilizar apenas uma única imagem para todo o menu. Você entenderá como fazer isso neste tutorial.

Continue lendo “Otimizando um menu com a técnica de CSS sprite” no InfoWester…

Tags HTML quase desconhecidas, mas muito úteis para os seus formulários

Erika Sarti — Fri, 20 Mar 2009 14:31:20 +0000

Mesmo para quem trabalha com design ou desenvolvimento para Web, algumas tags são desconhecidas ou de pouca utilidade. No entanto, algumas vezes elas podem simplificar nossa vida na hora de escrever o código HTML de uma página. Neste artigo, vamos conhecer algumas tags que se encaixam nessa situação:

, e . Todas elas podem ser usadas para adicionar funcionalidades interessantes a formulários.

Continue lendo “Tags HTML quase desconhecidas, mas muito úteis para os seus formulários” no InfoWester…

Criando um menu lateral com CSS

Erika Sarti — Mon, 20 Oct 2008 14:22:39 +0000

Há algum tempo eu publiquei no InfoWester um tutorial que mostra como criar um menu em abas usando CSS. Esse texto tem sido bastante consultado e, desde a sua publicação, venho recebendo e-mails de algumas pessoas pedindo outros tutoriais, sendo que boa parte dessas mensagens pede para que eu explique como criar um menu lateral semelhante ao que é usado no site.

Graças a esses pedidos, você verá nas próximas linhas os passos básicos para criar um menu lateral usando CSS (Cascading Style Sheets).

Continue lendo “Criando um menu lateral com CSS” no InfoWester…

O básico do CSS para impressão

Erika Sarti — Sat, 02 Aug 2008 14:07:21 +0000

Você já deve ter visto em muitos sites um link com a opção “versão para impressão” ou “imprima esta página” (ou algo equivalente). Aqui no InfoWester mesmo essa opção está presente no final de praticamente todos os artigos.

Quando seu site tem um conteúdo que possa ser impresso, como textos longos, artigos ou um currículo, é uma boa idéia utilizar declarações CSS (Cascading Style Sheets) próprias para a mídia impressa, assim você pode controlar aparência do que irá para o papel, deixando a página mais amigável e mais agradável de ser ler.

Continue lendo “O básico do CSS para impressão” no InfoWester…

Abreviando as declarações no CSS

Erika Sarti — Tue, 20 May 2008 12:36:05 +0000

A grande vantagem do CSS é concentrar todas as declarações num lugar só. Se você quiser fazer todos os títulos da sua página ficarem da mesma cor, por exemplo, não precisa alterar um por um, basta fazer uma única declaração no seu arquivo CSS, que afetará todos os títulos. Isso sem dúvida economiza tanto o tempo de carregamento para exibir sua página no navegador do usuário quanto o seu trabalho na hora de atualizar uma página.

Mas é possível deixar um arquivo CSS ainda menor, abreviando algumas declarações. Junto com um código limpo e comentado, esse pequeno truque vai facilitar muito o desenvolvimento do seu site. Aqui você vai conhecer quais declarações podem ser abreviadas, e como fazer isso.

Continue lendo “Abreviando as declarações no CSS” no InfoWester…

Adicionando sombra a múltiplas imagens com CSS

Erika Sarti — Mon, 21 Apr 2008 23:30:51 +0000

Se você tem uma galeria de fotos e resolve adicionar sombra a todas as imagens, vai precisar editar imagem por imagem para adicionar tal recurso, certo? Não necessariamente. Utilizando CSS você pode adicionar a mesma sombra a todas as imagens, editando apenas o arquivo HTML, o que certamente dará muito menos trabalho.

Continue lendo “Adicionando sombra a múltiplas imagens com CSS” no InfoWester…

Efeito 3D em botões usando CSS

Erika Sarti — Fri, 11 Apr 2008 04:54:47 +0000

Quando desenvolvemos um site com o menu em Flash, esse menu pode não ser acessível para todos os usuários, especialmente os que fazem uso de leitores de telas. Também existem usuários que desabilitam as animações no navegador, ou ainda que não têm instalada a mesma versão do player necessária para reproduzir a animação.

Se o menu tem algum efeito que possa ser reproduzido com HTML e CSS, usando sua criatividade e alguns pequenos truques é possível melhorar a acessibilidade do site e ainda deixá-lo mais leve.

Neste mini-tutorial, vamos aplicar o efeito de um botão 3D a um link, que ficará com a aparência de pressionado quando o usuário passar o mouse sobre ele, como no exemplo abaixo:

Continue lendo “Efeito 3D em botões usando CSS” no InfoWester….

Criando um efeito rollover com CSS

Erika Sarti — Wed, 24 Oct 2007 00:01:32 +0000

O efeito rollover é aquele que troca uma imagem por outra quando o usuário passa o mouse sobre ela. Quando bem usado, esse recurso pode incrementar uma página ou um site de maneira significativa. A maneira mais comum de obtermos esse efeito é através de um código em JavaScript, mas também é possível chegar a esse resultado apenas com CSS. É isso que você verá neste rápido tutorial. Antes de prosseguir, saiba que é importante ter algum conhecimento de HTML ou mesmo de CSS para que o procedimento dê certo.

Continue lendo “Criando um efeito rollover com CSS” no InfoWester…

Estudo de Caso – Melhorando a acessibilidade do InfoWester

Erika Sarti — Mon, 13 Aug 2007 12:17:25 +0000

Quando eu assisti este vídeo sobre acessibilidade, minha mente se abriu para o assunto, especialmente no que se refere ao acesso aos sites da internet por deficientes visuais.

Felizmente, este é um tema que “virou moda” recentemente, e cada vez mais web designers e usuários estão preocupandos com isso. Prova disso é que, nas últimas semanas, o InfoWester recebeu nada menos que doze mensagens de leitores pedindo providências quanto à acessibilidade do site (provavelmente também assistiram ao mencionado vídeo) para deficientes visuais.

Continue lendo Estudo de Caso – “Melhorando a acessibilidade do InfoWester” no InfoWester…