quinta-feira, janeiro 29, 2009

Bloguete no #BloGYN

Mais um site de variedades e mesmices no #BloGYN! Como já diz a descrição do blog:

Site criado para informar e entreter seus leitores.

Os autores já são conhecidos na blogosfera goianiense: Renatto Neves e Rodrigo Almeida.

Sem comentários anônimos, novamente

Saia da sombra e exista!

Gente, por um tempo eu liberei os comentários para que parceiros como Christian pudessem utilizar a opção Nome/URL. Infelizmente, para deixar a opção Nome/URL disponível é preciso liberar também os comentários anônimos. Foi aí que lascou tudo!

Esse é um blog pessoal, opinativo, indignado. Eu escrevo o que desejo, sem censura, porém dou minha cara a tapa. Se eu for numa entrevista de emprego e uma psicóloga perguntar qual foi a sensação de ter publicado a foto do Paulinho, posso até mijar na roupa, mas sou EU quem vai ter que assumir as ~~conseqüências~~ consequências, só EU e “zefini”.

Infelizmente há muita gente por aí que não tem 1/10 da minha coragem e se aproveita da opção de comentários anônimos para dizer o que não sabe, o que não sente, com palavras que não usaria se eu soubesse quem escreve. Assim, acabo perdendo muito tempo lendo e recusando esses comentários covardes que não valem nada, já que não têm dono. Anônimo não é ninguém. Um covarde não é ninguém. Anônimos me dâo nojo porque covardia me dá nojo. Talvez Rodrigo Alves se lembre que penso assim desde os tempos da faculdade.

Assim sendo, para comentar você terá que usar sua conta do Google/Blogger ou sua Open ID. Você vai perceber que não é tão ruim quanto parece.

Imagem do blog Eu e a Minha Sombra

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?