Como conseguir mais assinantes de feeds

Atualmente, tenho visto muitos blogs usando táticas duvidosas para atrair mais assinantes de RSS/Feed e até de seguidores no Twitter. Penso que uma assinatura de feed deve ser, antes de mais nada, legítima e baseada em interesse pelo conteúdo.
Do que me adianta números expressivos no contador, se as pessoas não forem ler meus posts? Brindes, pop-ups e afins podem até engordar o contador e o ego do blogueiro, mas na prática podem não representar absolutamente nada.
Da mesma forma que sites indexadores - como o falecido BlogBlogs e o Technorati - perderam credibilidade quando usuários começaram a usar técnicas desleais para aumentar posicionamento nos rankings, logo,logo a métrica de assinantes de feeds não será mais últil para aferir a popularidade de um blog.
O mesmo problema se repete no Twitter, com o uso de scripts e de brindes em troca de mais seguidores. Tais comportamentos – quando analisados por quem realmente entende de mídia social – pode depor contra a reputação do próprio blogueiro.

Eu prefiro ter leitores e seguidores que apreciem o meu trabalho, que interajam comigo a outros que possam ter aparecido apenas por causa de um sorteio, por exemplo.
Por outro lado, existem algumas táticas “do bem”, que podem ser usadas livremente, contanto que o bom-senso venha em primeiro plano.
Conteúdo
O conteúdo continua sendo o rei, o carro-chefe. Se o conteúdo do blog for original e interessante para o leitor, despertará no mesmo a vontade de receber aqueles posts sempre. E se o leitor não souber o que é um feed?
Gadgets
É aqui que entram as táticas que falei anteriormente. Explique ao seu leitor o que é um feed e mostre a ela quais as vantagens de se usar tal ferramenta. Isso pode ser feito através de gadgets e/ou através do recurso “páginas” no Blogger.
Os gadgets que trazem um melhor retorno são:
**clique sobre os links para acessar os respectivos posts

1. Seguidores –  é intuitivo e simples de usar, até mesmo por iniciantes
2. Email Subscriptions - trata-se de um gadget  fornecido pelo FeedBurner, super simples de ser instalado e que já vem até com o botão para assinar o feed
3. Mensagem nos posts – tais mensagens podem ficar na parte superior ou inferior dos posts, convidando o visitante a fazer a assisnatura do feed.
4. Widgets personalizados – nesses widgets, podemos colocar um ícone que identifique que é ali que está o endereço do feed e ainda inserimos os códigos do FeedBurner com contador e para fazer a assinatura por email. É muito prático.

Outro gadget interessante, é aquele que mostra o número de assinantes de feeds e de seguidores no Twitter - Widget – feeds, seguidores, posts e comentários.
Páginas
Usando o recurso “páginas”, podemos criar um post explicando o que é um feed, as formas de assinar os posts e suas vantagens. Vejam um exemplo aqui mesmo no DB - Feeds - receba os posts automaticamente! Mas, lembrem-se que é proibido copiar qualquer post do Dicas Blogger. Usem a criatividade de vocês.
Pop-Ups
Não pode ser considerada uma tática ruim, mas é incômoda. Eu, particularmente, jamais retorno em blogs com aqueles pop-ups imensos, implorando a minha assinatura. Se mesmo assim, vocês quiserem usar um pop-up, acessem:

• Pop-Up Assinar feed via email no Blogger (Como fazer web)
• Como Adicionar um Menu Pop-Up ao Blog ( Blogueiros na web)
• Box Flutuante Assinar Feed via Email (Mundo Blogger)

Opções de assinatura
Outro detalhe importante é oferecer opções ao visitante. Forneça feeds completos, parciais e por email e deixe a escolha para o leitor.

1. Vai de feed completo ou parcial?
2. Como usar e configurar o FeedBurner

Basicamente é isso. Quanto ao DB, atualmente eu uso o gadget seguidores, uma mensagem no rodapé dos posts, o contador de estatísticas e uma página explicativa.

CSS – aplicando estilos às bordas

Hoje irei explicar como aplicar estilos às bordas, usando CSS.
O atalho chama-se “border” e suas propriedades são:

1. border-top ( borda superior)
2. border-right (borda direita)
3. border-bottom (borda inferior)
4. border-left ( borda esquerda)

Para aplicar o mesmo estilo para todos os lados, usamos apenas o atalho “border”.
A sintaxe para aplicar estilos às bordas é:

seletor { border: largura estilo cor;}

Exemplo:

#linkbar a { color:#e6e6e6; text-transform:none; border-right:1px solid #808080; }

O seletor, em CSS, é o que vem sempre precedido por # (jogo da velha). “border-right” se refere ao lado da borda que receberá o estilo. “1px” é a largura, “solid” é o desenho e “#808080” é a cor da borda.
No exemplo acima, apliquei um estilo`apenas à borda direita da linkbar.

#busca { border: 1px solid #FFF; padding: 6px; }

Nesse outro exemplo, apliquei o mesmo estilo para os 4 lados da borda da busca.
Como vocês já devem ter notado, podemos aplicar estilos ao desenho da borda:

• none: sem estilos
• dotted: borda desenhada com pontos
• dashed: borda desenhada com pequenas linhas
• solid: borda desenhada com uma linha contínua
• outset: borda em 3D
• double: borda dupla

Vamos para outros exemplos, mostrando os desenhos das bordas:

border: 1px solid #FF0000;

border-bottom: #ff0000 1px dotted; border-left: #ff0000 1px dashed; border-top: #ff0000 1px double; border-right: #ff0000 1px solid

Assim como nos demais posts, recomendo que vocês façam as modificações em um blog de testes e que visualizem até encontrarem um resultado satisfatório.

Formatando texto com CSS

Outra coisa importante para melhorar um site, é a personalização dos textos. O CSS permite que façamos muitas coisas interessantes, como escolher o tipo de fonte, tamanho, cor, se maiúscula, normal ou minúscula e etc
As fontes
Uma fonte é um conjunto de grifos. A grosso modo, é a letra que usamos para escrever um texto. A propriedade “font” é o atalho para estilos de fontes no CSS:

• font-style: aplica-se um estilo à fonte
• font-weight: define a espessura da fonte
• font-size: define o tamanho da fonte
• font-family: define o tipo da fonte

Os atributos mais usados são:

• font-style: italic ou normal
• font-weight: bold ou normal
• font-size: 30px;
• font-family: arial, sans-serif; (veja outros exemplos, clicando aqui)

O texto
Define a aparência e a apresentação do conteúdo textual.

• text-align: right; ( alinhado à direita)
• text-align: center; (alinhado no centro)
• text-align: justify; (justificado)
• text-decoration: underline; (linha embaixo)
• text-decoration: overline; (linha em cima)
• text-decoration: line-through; (linha no centro do texto)
• text-transform :uppercase; ( letras maiúsculas)
• text-transform: capitalize; ( a primeira letra fica maiúscula)
• text-transform:lowercase; (todas as letras minúsculas)
• text-transform : none; ( não aplica estilos)

Cor do texto
A cor pode ser modificada usando as propriedades hexadecimais ou rgb.

• color: #FF0000; ( cor vermelha, em hexadecimal)
• color: rgb(255, 0, 0); ( cor vermelha, em RGB)

Veja aqui uma tabela de equivalência de cores para web.
Nos templates para o Blogger, geralmente usamos as variáveis, que permitem que façamos as edições das fontes e das cores através do painel  do designer do modelo.

Para cada tipo de fonte, tamanho e cor, é preciso ter uma variável correspondente.

#header h1 {
color:$blogTitleColor; font:$blogTitleFont;
font-variant:small-caps;
margin:0;
padding:10px 20px 0;
}

Variável que fica logo no começo do CSS:

<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#800040" value="#ffffff">

A variável é sempre precedida do símbolo “$”. Para criar variáveis, basta seguir o modelo acima. Como exemplo, vou criar uma variável para o título da barra lateral:

<Variable name="sidebarTitleColor" description="Sidebar Title Color"
type="color" default="#800040" value="#ffffff">

#sidebar h1 {
color:$sidebarTitleColor; font:$sidebarTitleFont; 
font-weight: bold;
margin:0;
padding:10px 20px 0;
}

Percebam que a grafia da variável tem que ser idêntica. A primeira parte deve ser colocada com as demais variáveis – que ficam logo no começo do CSS. Já a segunda parte, deve seguir a sequência de cascata dos seletores CSS.

As propriedades margin e padding do CSS

Duas importantes propriedades do CSS, se chamam margin (margem) e padding (preenchimento). São elas que definem os espaçamentos entre os elementos do layout.
A margem é o que separa um elemento de outro e o preenchimento é o espaço entre o conteúdo e a borda desse conteúdo.
Para fazer o controle dos espaços, usamos um código com valores que podem ser em pixels (px), em porcentagem (%) ou em “em”. A palavra “em” vem da tipografia impressa e se refere ao tamanho da letra M maiúscula para uma determinada fonte.
Para este tutorial, vou usar as medidas em px (pixels).
Antes, é importante que vocês saibam o que quer dizer cada valor:

• 0 – estamos dizendo ao navegador que é para usar um espaço padrão
• 0px – estamos dizendo ao navegador para não colocar espaço
• 5px – estamos dizendo ao navegador para colocar 5 pixels de espaço

Vamos ver um exemplo do código para configurar as margens:

margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;

ou, simplicando:

margin: 100px 40px 10px 70px;

O mesmo código se aplica ao preenchimento:

padding-top: 100px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 70px;

Os valores são apenas ilustrativos, onde:

1. top: espaço entre o conteúdo e a parte superior
2. right: espaço entre o conteúdo e a direita
3. bottom: espaço entre o conteúdo e a parte inferior
4. left: espaço entre o conteúdo e o lado esquerdo

A ordem deve sempre ser esta: top, right, bottom e left.
Também podemos usar um código ainda mais simples, quando os valores são iguais para todos os lados:

margin: 3px; ( equivale a 3 px em top, right, bottom e left)
padding: 4px; ( equivale a 5 px em top, right, bottom e left)

Se o valor for o mesmo para as partes superior e inferior e outro para direita e esquerda, usamos:

margin: 3px 5px ( superior e inferior=3px e direita e esquerda=5px)

Agora vou mostrar uma imagem, usado o template do Dicas de Informática

Clique na imagem para ampliar. Veja que o CSS do header (cabeçalho) é:

/* HEADER
----------------------------------------------- */
#header-wrapper {
width:970px;
background:transparent;
border:1px solid transparent;
margin:0;
padding:4px;
}

A margem foi definida em zero e o preenchimento é de 4px em todos os lados.
Na imagem abaixo, vemos o conceito de box model do CSS

Fonte: W3.org

Pode parecer complicado ( e é), mas para modificar templates do Blogger, basta saber o código para controlar os espaços, ir testando valores e ir visualizando até encontrar o efeito desejado. Use um blog de testes e nao tenha medo de errar ;)

Blogger - Criar e publicar posts no iPad

Dispositivos móveis como o iPad são maravilhosos quando se trata de consumir conteúdo: visitar blogs e sites, gerir email, ver filmes e acessar redes sociais, como o Twitter e Facebook. Quando se fala de produzir conteúdo, a coisa já não é tão fácil. O Blogger lançou recentemente a versão mobile para os blogs, mas ainda é inviável escrever posts direto pela interface web. Para isto, é necessário recorrer à aplicações externas.

BlogPress – aplicação para criar posts no iPad
A aplicação BlogPress, que já foi descrita em pormenor aqui: Blogger no iPhone – Como escrever e publicar posts ganhou uma nova interface para o iPad e algumas novas funções. Atualmente é a melhor aplicação para escrever e publicar posts, não só no Blogger mas também no Wordpress e outras plataformas.

Configurações:
Nas configurações, podemos alterar algumas coisas, como o local onde as imagens irão ficar alojadas (por default ficam no BlogPress, mas pode ser alterado para o Picasa junto com as outras imagens do blog). Esta opção é bastante útil para quem utiliza outras plataformas além do Blogger, sendo possível alojar as imagens direto num servidor próprio. Também é possível configurar para que os posts sejam publicados automaticamente no Twitter e Facebook (quem utiliza o método de publicar o feed do blog no Facebook deve desmarcar esta opção). A assinatura do post também pode ser alterada, assim como a fonte das letras e tamanho das imagens:

Escrever posts
É bastante confortável escrever textos longos no iPad (e se você tiver um teclado bluetooth, a tarefa pode ser ainda mais fácil). Com alguns atalhos em HTML podemos inserir links, formatar a forma da letras, o tamanho e a cor. É possível também inserir negrito, itálico e algumas outras funções:
Inserir imagens também é bastante fácil, basta clicar no ícone da camera fotográfica e escolher no álbum do iPad. Clicando na imagem fica habilitado a edição da mesma, onde é possível alterar o tamanho e alinhamento. Também é possível adicionar um link à imagem escolhida (clique para ver maior):

     

Após o texto estar completo, aparecem as seguintes opções: publicar, salvar localmente e salvar online. Também é possível salvar e ver como irá ficar o post. Ao ser escrito, o post fica sempre na versão HTML, esta nova opção permite ter uma idéia clara de como irá ficar a formatação (Save and Preview):

O BlogPress, que pode ser adquirido na AppleStore por 4.99 dólares, com certeza supre as necessidades da maior parte dos utilizadores que querem utilizar o iPad para escrever posts no Blogger e em outras plataformas.

Como apagar todas as mensagens no Twitter

Quem nunca fofocou por DM (direct message) no Twitter? Eu fofoco e muito, por isso apago-as sempre :) 
Como eu já disse anteriormente, seria um deus-nos-acuda se as DMs viessem à tona da noite pro dia. O Twitter ainda apresenta bugs e instabilidades e uma pane como essa pode realmente acontecer. A fim de evitar tal tragédia, eu já ensinei como eliminar todas as DMs de uma vez só, em outros dois posts:

• Como apagar todas as DMs no Twitter
• Apague DMs do Twitter com DMCleaner

O problema é que - até o término deste post - nenhum dos dois métodos anteriores estavam funcionando. A boa notícia é que o @fjorgemota, programador e autor do Blogueiros na Web, criou o DM Eliminator. Trata-se um um bookmarklet, totalmente compatível com o novo Twitter.
Para usar o DM Eliminator, arraste para a barra de favoritos do seu navegador, o link que encontra-se no post do Fernando. Depois, entre nas aba “messages” da sua conta do Twitter e clique no link do DM Eliminator

Será perguntado se você deseja mesmo apagar todas as DMs. Clique em OK, aguarde o término do processo e vá dormir tranquilo (a) ;)

TechTudo – um novo site de tecnologia

Lançado recentemente, o TechTudo é o site de tecnologia da Globo.com, que surgiu com a proposta de (realmente) descomplicar a tecnologia. Para atingir tal objetivo, reuniu-se uma equipe de colunistas de primeira linha e de colaboradores - na maior parte blogueiros - com experiência em escrever artigos sobre tecnologia.
Comandado pelo geek  Nick Ellis – conhecido na web por seus blogs Digital Drops e App Store Blog e por sua paixão por tecnologia – o TechTudo fornece  dicas e tutoriais de aplicativos,  gadgets, sistemas operacionais e muito mais!  Além disso, conta com  reviews que auxiliam o usuário na hora de comprar novos dispositivos eletrônicos.

Acesse o TechTudo e confira o  time de colunistas, bem como as diversas categorias de artigos: reviews, dicas & tutoriais, jogos, blogs, fórum e downloads.

Vocês podem acompanhar o artigos do TechTudo também no Twitter e no Facebook.
Eu tive a honra de ser convidada pelo Nick para colaborar com o TechTudo, onde pretendo publicar artigos sobre informática em geral -  sistemas operacionais, aplicativos diversos para Windows e iPhone, segurança digital, navegadores e etc - bem como  compartilhar minha experiência com blogs. Nos vemos lá ;)