Empório Tropical 38: minha versão favorita de Noa

Yes, I can!

Há dois anos eu era totalmente leiga com relação a perfumes importados.

Frase do dia | Granjeiro

Não se iguale à maioria, pois, infelizmente, ela não é modelo de inspiração ou de sucesso.

José Wilson Granjeiro

Texto alternativo e descrição

Nível: iniciante

Esses são dois recursos muito simples e ao mesmo tempo muito importantes para a usabilidade de seu site. Estamos falando dos atributos alt e title, tantas vezes esquecidos por webmasters e blogueiros.

Texto alternativo em imagens

Como o próprio nome sugere, o texto alternativo (atributo alt) é exibido no lugar da imagem quando a mesma não pode ser carregada. Nesse atributo coloque a palavra que resume a imagem. Quando essa imagem apontar para um outro site, coloque o nome do site no campo alt.

Abaixo segue um exemplo de utilização desse recurso. À esquerda aparece a imagem que desejo exibir. À direita simulei um erro de carregamento de imagem. Como ela não abriu, aparece o texto que coloquei no campo alt:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Gatinho'>

Neste outro exemplo, a minha imagem é um link, então vou facilitar a vida do leitor colocando no campo alt o nome do site, porque é isso que eu quero que ele veja se a imagem não carregar.

<a target='_blank' href='http://pink.helenfernanda.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Helen Fernanda Pink'></a>

Descrição em imagens

A descrição é feita com o atributo title. O texto da descrição aparece quando você passa o mouse sobre a imagem.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Gatinho' title='Gatinho'>

Navegadores

Quando a imagem não tem o atributo title, o Internet Explorer (e somente ele) exibe o texto que está no campo alt quando o cursor está sobre a imagem, mesmo que ela tenha sido carregada normalmente.

Descrição em links

Helen Fernanda Pink

<a target='_blank' href='http://pink.helenfernanda.com' title='Meu site cor-de-rosa com assuntos de mulherzinha'>Helen Fernanda Pink</a>

Quando a imagem for um link, coloque alt na tag <img> e title na tag <a>:

<a target='_blank' href='http://pink.helenfernanda.com' title='Helen Fernanda Pink'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Helen Fernanda Pink'></a>

Descrição em texto

Em HTML as tags que precisam de descrição são <abbr> (abreviatura) e <acronym> (sigla):

Pe. Inácio - Cel. Cardoso HTML - CSS

<abbr title="Padre">Pe.</abbr> Inácio - <abbr title="Coronel">Cel.</abbr> Cardoso - <acronym title="HyperText Markup Language">HTML</acronym> - <acronym title='Cascading Style Sheets'>CSS</acronym>

Porém, title é um atributo que pode ser utilizado na maioria das tags:

White House Goóc - Nanda

<h4 title="Casa Branca">White House</h4> - <i title="Marca de calçados feitos de pneu reciclado">Goóc</i> - <b title="Meu principal apelido">Nanda</b>

Na folha de estilos

Nível: intermediário

Para que o leitor saiba que tal palavra ou expressão tem uma descrição, é recomendado que você crie uma identificação na folha de estilos. Vou dar um exemplo, observe o código:

#temdes {cursor:crosshair; border-bottom:1px dashed #cccccc;}
]]></b:skin>

Neste exemplo, sempre que eu colocar title em um texto vou usar id='temdes' para que o mesmo apareça diferenciado, com o cursor em forma de cruz e um sublinhado riscado cinza. Assim, o leitor que estiver habituado ao meu blog, saberá sempre que um texto tiver descrição.

<span id='temdes' title='Filme nacional'>Meu Tio Matou um Cara</span>	Meu Tio Matou um Cara
<i id='temdes' title='Meu blog pessoal'>Helen Fernanda Ponto Com</i>	Helen Fernanda Ponto Com

Faça bom uso!

Imagem do site Bubbaloo Brigadeiro

orkut com doodle comemorativo de 5 anos

Achei bem lindo o doodle de aniversário do orkut. Que tal?

Melissa | Coleção Outono-Inverno 2009

Anota aí: meu aniversário é em agosto.

Apaixonada que sou por Melissa desde que me entendo por gente, estou aqui babando estrelinha pela nova coleção.

Minha mãe não vê com bons olhos minha fissura por calçados de plástico, por isso meu estoque de Melissa está zerado.

As que eu comprei na adolescência já estragaram de tanto eu usar. Não quis comprar mais para não ficar ouvindo abobrinhas da Dona Helena.

Agora penso em voltar a colecionar e usar Melissa para fazer companhia à minha coleção da Dijean.

Vamos às compras…

[Encerrado] Concurso Terceira Plush Poison Tilibra

O site Plush Poison tem um concurso para que seja escolhida a terceira integrante da banda.

A primeira etapa do concurso é fazer um avatar. O meu avatar até que ficou interessante. A Purple Luna foi inspirada em mim: míope, mal humorada e metida a intelectual:

A segunda etapa é responder a um quiz com 15 (quinze) perguntas sobre rock. Mas, como não gosto de Rock, não me saí bem. Mesmo chutando as quinze respostas, acertei 5 (cinco). Considerei 1/3 um resultado bom para quem não sabia nada.

Ainda tenho chance de melhorar minha posição se tiver uma boa torcida, a terceira etapa do concurso:

Prêmios:

Os vencedores de cada uma das três etapas ganharão:

• Ipod Touch de 8 GB
• Kit de produtos Tilibra: um caderno, uma agenda, um estojo, um bloco e um fichário.

O grande vencedor ganhará:

• Ipod Shuffle de 1GB
• Kit de produtos Tilibra: um caderno, uma agenda, um estojo, um bloco e um fichário.

Por falar nisso, na minha coleção de cadernos eu tenho uma caderneta Plush Poison:

Dica da Tati Toda Pink

Melissa | Coleção Outono-Inverno 2009

Este post foi transferido para o blog Consultoras de Beleza.

Como revender Yes Cosmetics

Este post foi transferido para o blog Consultoras de Beleza.

Ofertas de Janeiro da Yes Cosmetics

O catálogo de janeiro já está disponível e a novidade este ano é a versão on-line, em flash. Para acessá-lo, clique aqui. Vou destacar duas promoções das muitas que estão disponíveis até o dia 15 de fevereiro.

Deo colônias por R$ 28,00

Se esperou o mês de janeiro para renovar seu estoque de contratipos, acertou! São 15 deo colônias (85 mL) de R$ 35,00 pelo preço imbatível de R$ 28,00, ou seja, 20% de desconto.

Femininas:

• 02 - Cheirinho de Bebê - Floral Oriental
• 06 - Sensi (Giorgio Armani) - Floral Oriental
• 15 - Flower By Kenzo - Floral Oriental
• 17 - Giovanna Baby - Lavanda
• 28 - Lou Lou (Cacharel) - Floral Oriental
• 30 - Extravagance D'Amarige (Givenchy) - Floral Frutal
• 39 - Paloma Picasso - Chypre Floral
• 40 - Paris (Yves Saint Laurent) - Floral Bouquet

Masculinas:

• 64 - Black Code (Giorgio Armani) - Oriental
• 70 - Drakkar Noir (Guy Laroche) - Fougère Aromático
• 73 - Mont Blanc Men - Oriental
• 74 - Mania Pour Homme (Giorgio Armani) - Cítrica
• 80 - Men's Club (Helena Rubinstein) - Cítrica
• 91 - Armani (Giorgio Armani) - Cítrica
• 96 - Bvlgari - Fougère Fresco

Óleos hidratante em creme

As fragâncias Pêssego e Pêra estão com 14% de desconto. De R$ 19,90 por R$ 17,00.

Ofertas de Janeiro da Yes Cosmetics

Este post foi transferido para o blog Consultoras de Beleza.