quarta-feira, janeiro 28, 2009

Feed, clipagem, mesa e chance

Depois de muito procrastinar, tirei a tarde de hoje para resolver o problema do feed coletivo BloGYN. Não foi simples, tive que fazer umas firulas lá no Pipes, mas o trabalho valeu a pena, nosso feed já está funcionando normalmente com todos os blogs. Se o feed voltou, o Twitter @blogyn também está atualizado.

» Leia todo o post

segunda-feira, janeiro 26, 2009

Como colocar imagem no background

Alguns exemplos para você experimentar em posts do seu blog de testes.

Como determinar a imagem:

<div style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJVrh_KnqTB7sBt8owyRJhYeLoaEklYBi1qNuQXdnVptr_9giN3vzphUfkNQmHsKNdhLw7HrvTd_hFiA8wCWMQzTJP6u8rdGBxFis1nyFT0VgIC4K4ZEPELPaAYtR_CnFoUcHxo3U1Jt7v/s190/09.jpg); width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo.</div>

Exemplo de imagem de fundo.

Imagem centralizada:

<div style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJVrh_KnqTB7sBt8owyRJhYeLoaEklYBi1qNuQXdnVptr_9giN3vzphUfkNQmHsKNdhLw7HrvTd_hFiA8wCWMQzTJP6u8rdGBxFis1nyFT0VgIC4K4ZEPELPaAYtR_CnFoUcHxo3U1Jt7v/s190/09.jpg) center center; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo centralizada.</div>

Exemplo de imagem de fundo centralizada.

Imagem de fundo fixa:

<div style='color:white; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4oeZ3kZ3u825jnoAwxZQc5J9PHqdY8oMXYTT1IF0-RmTLzNNoGw_FGCH5awRPlMV_wMQY_vcvTI4rHhhd069c6NHgeBdlSxjGXztQv_ONVBeHoSGDRjZLGnSknaBQ3XvomquKvTnQ7sV/s0-r/bg%255B1%255D.jpg) fixed; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo fixa.</div>

Exemplo de imagem de fundo fixa.

Repetição na vertical:

<div style='border:1px #ffcc00 solid; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) repeat-y; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo que se repete na vertical.</div>

Exemplo de imagem de fundo que se repete na vertical.

Repetição na horizontal:

<div style='border:1px #ffcc00 solid; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) repeat-x; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo que se repete na horizontal.</div>

Exemplo de imagem de fundo que se repete na horizontal.

Não se repete:

<div style='border:1px #ffcc00 solid; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) no-repeat; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo que não se repete.</div>

Exemplo de imagem de fundo que não se repete.

Imagem centralizada que não se repete:

<div style='border:1px salmon solid; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) center center no-repeat; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo centralizada que não se repete.</div>

Exemplo de imagem de fundo centralizada que não se repete.

Imagem no canto inferior direito:

<div style='border:1px salmon solid; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) right bottom no-repeat; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem no canto inferior direito.</div>

Exemplo de imagem no canto inferior direito.

Folha de estilos:

Alguns exemplos de imagens no background determinadas na folha de estilos:

body {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) #000000 repeat fixed;}
blockquote {border:silver solid; border-width: 0px 2px 2px 0px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) no-repeat scroll left top;
.blog-title {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) no-repeat left; padding-left:20px;}
]]></b:skin>

Propriedades separadas:

Nos exemplos supracitados, eu coloquei todas os atributos de fundo dentro da propriedade background, mas também é possível determinar cada um deles separadamente. Veja:

body {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif);
background-color:#000000;
background-repeat:repeat;
background-attachment: fixed;}

background

Todas os atributos de fundo podem ser definidos aqui separados por espaço.

background-color

Cor de fundo.

background-image

Imagem de fundo seguindo o modelo url(nome-da-imagem.ext). Os navegadores atuais aceitam imagens com as extensões .gif, .jpg, .jpeg e .png. Imagens com extensão .bmp não devem ser usadas.

background-position

Posição da imagem de fundo. Valores aceitos:

top - topo
right - direita
bottom - base
left - esquerda
center - centro
porcentagem - Exemplos: 50% 0%, 40% 100%. O primeiro valor é a distância da esquerda para a direita e o segundo valor é a distância do topo para baixo.
lenght - Exemplos: 100px 0px, 40px 300px. O primeiro valor é a distância da esquerda para a direita e o segundo valor é a distância do topo para baixo.
combinação - Exemplos: bottom left, center 20%, 100px bottom, 50% 200px. O primeiro valor é a distância da esquerda para a direita e o segundo valor é a distância do topo para baixo.

background-repeat

Repetição da imagem de fundo. Valores:

repeat (lado a lado)
no-repeat (não repete)
repeat-y (repete na vertical)
repeat-x (repete na horizontal)

background-attachment

Valores:

fixed - imagem de fundo fixa. Quando você rola a barra, a imagem continua no mesmo lugar e só os elementos rolam.
scroll (padrão) - imagem rola junto com os elementos da página.
inherit - conforme o padrão do site (geralmente determinado em body)

Escolher o background de seu blog ficou fácil agora!

Update 1º/02/2009

Conheça galerias com Lindos backgrounds gratuitos.

Fonte: HTML Dog

Promoção Avon Color Trend - A Estrela é Você

Essa promoção é tão boa que tenho que me controlar para não comprar o portfólio inteiro da linha Color Trend só para receber muitos cupons.

Como participar

A cada 3 (três) produtos Color Trend adquiridos nas campanhas 04 e 05/2009, você recebe um cumpom que pode ter um dos mil prêmios instantâneos.
- Exceção: O produto esmalte de longa duração não dá direito a cupom.
Cupons não-premiados poderão concorrer aos 125 prêmios em sorteio se enviados ao CEP da promoção ou cadastrados no site até o dia 17/04/2009.
- CEP 02720-970, Caixa Postal 20073
- Site: www.estrelacolortrend.com.br

1.000 (mil) prêmios instantâneos:

30 (trinta) câmeras fotográficas digitais.
300 (trezentas) assinaturas da revista Gloss por um ano.
700 (setecentos) kits Color Trend contendo:
- 21 (vinte e um) produtos de beleza Color Trend
- 1 (uma) bolsa exclusiva

125 (cento e vinte e cinco) prêmios em sorteio:

100 (cem) pen drives em formato de coração. Pode ser usado como colar.
Mesada de R$ 500,00 por mês durante um ano para 15 (quinze) ganhadoras.
Final de semana de ESTRELA para 10 (dez) ganhadoras. Programação:
- Viagem a São Paulo.
- Hospedagem em hotel de luxo (com translado e alimentação).
- Visita à redação da Revista Gloss, na Editora Abril.
- Consultoria de moda e beleza com a estilista da Revista Gloss.
- Book fotográfico com participação de Isis Valverde.

Mais informações:

Boas compras e boa sorte!

Promoção Avon Color Trend - A Estrela é Você

Este post foi transferido para o blog Consultoras de Beleza.

domingo, janeiro 25, 2009

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.

» Leia todo o post

sábado, janeiro 24, 2009

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:

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.

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.

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>:

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?

sexta-feira, janeiro 23, 2009

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

Páginas