Postado em: 29 de junho de 2006 por Pedro Rogério
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" />
Postado em: 28 de junho de 2006 por Pedro Rogério
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.
- 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.
Continuar lendo »
Postado em: 26 de junho de 2006 por Pedro Rogério
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 »
Postado em: 23 de junho de 2006 por Pedro Rogério
Quer aprender AJAX, essa é a hora, recebi em uma lista de discussão uma lista com alguns e-books, vale a pena dar uma olhada:
Postado em: 22 de junho de 2006 por Pedro Rogério
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.
Postado em: 21 de junho de 2006 por Pedro Rogério
“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
Postado em: 20 de junho de 2006 por Pedro Rogério
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.
Postado em: 19 de junho de 2006 por Pedro Rogério
Muita gente quando está iniciando em CSS não sabe que as cores podem ser representadas com 3 dígitos, mas há um porém, só podemos fazer isso quando a cor é representada por 3 pares de dígitos iguais, ficou confuso? Vamos a um exemplo:
A cor #000000 (preto) pode ser representada dessa forma: #000. A cor #FF0000 (roxo) pode ser representada dessa forma: #F00.
O truque é pegar sempre a primeira letra de cada par de dígitos hexadecimais. O navegador entende que se, por exemplo, usarmos #F73 (laranja-pastel) em nosso código, ele entenderá que significa #FF7733. Tomemos um exemplo:
p {
color:#F00; /* É o mesmo que #FF0000; */
}
Essa forma de representar as cores, pode ser usada em qualquer propriedade CSS, tanto para color como para background. Mas há casos em que essa regra não pode ser usada, como por exemplo aqui: #F73309. Como podem ver o 3° e 4° dígitos são iguais, mas não pode ser escrito dessa forma: #F309, isto não funcionaria.
Postado em: 15 de junho de 2006 por Pedro Rogério
Você precisa entregar aquele trabalho para o cliente urgente, o prazo está estourando, e o cliente é muito chato, e você, de forma alguma encontra uma solução para o seu problema, seja nos buscadores, ou seus rascunhos, eu aconselho você a participar de listas de discussão, a melhor forma de adquirir conhecimento. Eu particularmente aprendi muita coisa com elas, vou deixar aqui algumas listas que particularmente considero ótimas:
- WebStandards-br
- Grupo de discussão em português sobre os recomendações do W3C para a construção de websites: metodologia ‘tableless’, validação de código, XHTML, CSS, XML, XSLT, navegadores e dispositivos, semântica, acessibilidade, SEO, portabilidade.
- ArqHP
- Lista de discussão em torno de produção de home pages, abordando HTML, XHTML, XML, tableless, CSS, semântica, validação de documentos, separação de informação da formatação, DOM e demais tecnologias recomendadas pelo W3C.
- CSS-D
- Lista internacional de discussão sobre CSS
Postado em: 13 de junho de 2006 por Pedro Rogério
Quem nunca ouviu falar no famoso Digg.com, aquele famoso site onde você posta uma notícia, elas são votadas e as melhores vão para a home do site. Ele é um site sobre tecnologia que combina bookmarking social, blog e RSS. Agora aqui no brasil existem vários sites semelhantes, mas não tão focados a tecnologia como o Digg.com. Eles são os seguintes:
Continuar lendo »
