Uso correto de Alt e Title

Postado por: Pedro Rogério em
  • 29 jun
  • 11

Muita gente acredtita que usando a tag alt para imagens ela assume o papel de Tooltip. Esse método foi adotado a anos atrás, tudo começou com o Netscape, usando alt para indicar um tooltip, e o Internet Explorer foi lá e seguiu a mesma linha.

A tag alt serve para, por exemplo, se a imagem por algum motivo não for carregada, mostrar uma descrição prévia da imagem, seu uso também é recomendando para browsers que não suportam imagens. Agora o uso de title é para quando o usuário repousar o mouse sobre a imagem, ou o link, aparacer uma descrição definida pelo usuário sobre o mesmo.

A maneira errada de indicar um tooltip:


<img src="http://sua_imagem.gif" alt="Maneira errada" />

Maneira correta de indicar um tooltip:


<img src="http://sua_imagem.gif" alt="Texto alternativo caso a imagem não seja carregada" title="Essa é a maneira correta de indicar um tooltip em uma imagem" />

Top 10: Aplicações Ajax

Postado por: Pedro Rogério em
  • 28 jun
  • 1

Quando se faz o uso de AJAX, as aplicações deixam de ser meras “simples aplicações” e ganham vida, uma prova disso são as aplicações citadas abaixo:

Kiko
Um calendário de uso geral muito elegante.
Kiko
Backbase’s RSS Reader
Um leitor de Feeds demonstrativo, você não pode adicionar nele os seus próprios Feeds. Sua interface é bem agradável.
Backbase

Continuar lendo »

Guia CSS – 1ª parte: Introdução as CSS

Postado por: Pedro Rogério em
  • 26 jun
  • 2

Com esse artigo vou iniciar um série deles explicando as propriedades CSS. Um ótimo guia básico para aqueles que estão iniciando em CSS, e o primeiro deles é uma breve introdução:

As CSS (folhas de estilo em cascata), permitem que você separe toda a formatação do seu site do código (x)HTML. Enquanto você trabalha encima do HTML, o CSS fica por conta da formatação das fontes, cores, background, bordas, efeitos em links, etc., tudo isso concentrado em um arquivo. Existem várias maneiras de se usar o CSS, seja ela internamente ou externamente.

Utilizando estilos internamente

Quando estamos usando estilos internos, nós simplesmente colocamos o nosso CSS dentro das tags <head></head> do nosso código (x)HTML. Você pode ver um exemplo logo abaixo:


<html>
<head>
<title></title>
<style type="text/css">
Aqui você coloca o código CSS
</style>
</head>
<body>
</body>
</html>

Nesse método toda cada página (x)HTML terá seu respectivo código CSS para a formatação da página. Esse método é ideal para aqueles sites de uma página ou para quem está iniciando no assunto.

Continuar lendo »

Ferramentas de acessibilidade

Postado por: Pedro Rogério em
  • 22 jun
  • 1

Numa dessas minhas andanças pela internet, acabei achando um link interessante sobre ferramentas de acessibilidade para a Web, como analisadores de contraste, criação de formulários acessíveis, ferramentas para medir o nível de acessibilidade do seu site, muito interessante.

HERA 2.0 – Revendo a Acessibilidade com estilo

Postado por: Pedro Rogério em
  • 21 jun
  • 1

“HERA é uma ferramenta para rever a acessibilidade das páginas Web de acordo com as recomendações das Directrizes de Acessibilidade para o Conteúdo Web 1.0 (WCAG 1.0). O HERA efectua uma análise automática prévia da página e disponibiliza informação dos erros encontrados (detectáveis de forma automática) e quais os pontos de verificação que devem ser revistos manualmente.”

“A revisão manual é imprescindível para comprovar realmente se a página é acessivel. Para poder levar acabo esta verificação manual é necessário conhecer as directrizes de acessibilidade, saber de que forma fazem, os utilizadores, uso das ajudas técnicas e ter alguma experiência em desenho e desenvolvimento de páginas Web.”

“HERA facilita a revisão manual, proporcionando informação sobre os elementos a verificar, instruções de como realizar esse controlo e duas visões modificadas da página (uma visão gráfica, outra do código HTML) com os elementos mais importantes destacados com icones e cores diferenciadoras.”

HERA 2.0 BETA

Posicionando texto ao redor das imagens

Postado por: Pedro Rogério em
  • 20 jun
  • 20

Antigamente muitas pessoas faziam isso com tabelas, se criava uma célula, onde se colocava a imagem, e na célula ao lado, era colocado o texto, e tinha-se a ilusão de que o texto estava fluindo ao lado da imagem. Fazer isso com CSS é muito simples, usaremos a propriedade float. O nosso HTML fica da seguinte forma:


<img src="logo.jpg" alt="Pinceladas da Web" />
<p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   Vestibulum at purus sed erat lobortis suscipit. Cras
   facilisis viverra wisi. Class aptent taciti sociosqu...
</p>

Se você quiser que a imagem fique alinhada a esquerda e o texto flua a sua direita, é só definir a propriedade float como left, isso quer dizer que a imagem irá flutuar a esquerda, seu CSS deverá ficar da seguinte forma:


img {
    float:left;
    margin:0 20px 10px 0;
  }

Aqui é importante definir valores para margin para que o nosso texto não fique colado na imagem. Veja aqui um exemplo.

Mas caso você queira que sua imagem fique a direita do texto, é só definir o float como rigth, isso quer dizer que a imagem irá flutuar a direita do seu texto, o CSS fica da seguinte forma:


img {
    float:rigth;
    margin:0 0 10px 20px;
  }

Veja aqui um exemplo.

Páginas:«1...103104105106107108109110111112»