Com a ascensão das redes sociais, esta distinção tornou-se mais delicada e a relação de poder se tornou mais instável. As negociações passaram a ter uma audiência assíncrona. Um conflito nas relações de consumo ou de trabalho relatado numa rede estará teoricamente armazenado para sempre, mesmo que tenha sido resolvido satisfatoriamente. Lembram do Eu odeio a Telerj? Do mesmo modo que um recrutador pode encontrar o perfil constrangedor de um futuro empregado cadastrado numa rede social anos antes.

É fácil aconselhar ao mais novo a não publicar nada que possa ser comprometedor em seu futuro profissional, mas como convencer o profissional de comunicação institucional a ser mais cuidadoso?

Ouso dizer as empresas sempre foram percebidas como uma entidade pessoal: Apple é cool, Adidas é descolada, HP é para tiozinhos. Só que agora estão sendo tratadas de fato como tal nas redes, porque quem está lá publicando sobre Apple, Adidas e HP não é um profissional de comunicação, é um amador. E por amador entendemos uma pessoa que ama uma marca, mas também pode odiar, invejar, ignorar, confiar e desconfiar. E é este ser passional que está falando sobre a sua empresa nas redes. E agora, José?

Antes de qualquer coisa, não entre em pânico. Respire. Não entre em negação.  Isso já acontecendo.

Construa e gerencie você mesmo a identidade virtual da sua empresa antes que seres passionais assumam esta tarefa. Escolha um caminho do mesmo modo que ele foi planejado para o mundo real e invista com esmero em promovê-la da mesma forma que você constrói suas relações pessoais. Sua empresa deve saber oferecer produtos e serviços sem ser intrusivo, deve resolver problemas de modo amigável e transparente. Não há nenhuma dica mágica aqui, certo? A única diferença é que agora todos estão olhando. Se alguém nesta platéia não gostar, ele não irá se calar e a idéia irá se propagar.

Outras:

Este texto é fruto de pensamentos aleatórios durante a palestra sobre Redes Sociais, do Nino Carvalho, onde rolou uma bela discussão sobre as novas gerações de profissionais ou quem está disposto a encarar o admirável mundo novo. Lula Ribeiro publicou uma descrição do evento.

Uma referência essencial para encontrar milhares de outras sobre este assunto é o documentário The Corporation. Algo no filme acabou parecendo datado para mim depois da palestra, mas ainda assim.

Artigos relacionados:

• 26/06/2009: Incentivando a colaboração do usuário
• 16/10/2008: A crise e o e-commerce 2.0
• 24/04/2009: A realidade paralela dos fakes no Twitter
• 13/01/2009: Morte ao Internet Explorer 6!

Veja algumas dicas de como construir interfaces que estimulem a colaboração do usuário.

Mantenha o foco

O foco deve estar na tarefa do usuário que é a contribuição. Quaisquer outras tarefas como buscas, listas, perfis de usuários e outros serviços não são prioritários. Defina o cronograma e orçamento seu projeto de acordo.

Seja simples

É mais fácil achar pontos de entrada para a realização da tarefa em interfaces simples, que tenha poucos pontos de distração. Tenha cuidado o posicionamento de banners e quaisquer outros elementos que requeiram destaque.

Seja conveniente

Espalhe os pontos de interações cuidadosamente. Não é necessário ser econômico nem discreto. Estimular a navegação ou a interação deve ser um trabalho pontual em cada interface. Nenhuma delas pode ser uma rua sem saída. Mesmo nas interfaces mais simples devem ter algum atrativo para fazer o usuário continuar contribuindo. Numa tela de sucesso, por exemplo, use pequenas listas de indicações de outros conteúdos.

Lembre-se: O link interno é seu melhor amigo.

No BuzzFeed, os botões rápidos de heart, broken heart, LOL, OMG etc, ficam logo abaixo do conteúdo. São estes comentários rápidos que ajudam a classificar o conteúdo.

Mostre exemplos

Na maior parte dos casos, é mais fácil para um usuário ver como outros colaboraram do que procurar tutoriais ou começar a partir de um formulário em branco. Estimule seus colegas e amigos a colaborarem com conteúdo antes de um lançamento oficial. Aproveite para recolher informações sobre a experiência de cada um.

Não utilize fakes! Parte do trabalho inicial de um novo site é estabelecer credibilidade.

No Hunch, antes mesmo do cadastro, o usuário pode colaborar respondendo aos questionários rápidos. A sedução e o aprendizado caminham juntos.

Explore a vaidade do usuário

Providencie uma página de perfil atraente. Nem sempre o usuário quer especificar todas as suas atividades e interesses no seu site, mas ofereça esta opção. E sempre há modos de incentivar o usuário a completar o seu perfil.

O perfil de usuário do Shelfari é bem completo. Como há muitas listas disponíveis para cada usuário, ele divide o perfil em abas o que mantém todas as informações acessíveis numa mesma tela e organiza a interface.

Não seja mesquinho

Ofereça oportunidades para o usuário fazer links para outros sites de relacionamento. Se for necessário, inclua uma funcionalidade de importação de feeds, mesmo que de sites concorrentes.

Songkick, por exemplo, é um site de resenhas de shows. Ele trabalha com um tracker próprio para coletar as músicas executadas no computador do usuário, mas também permite a importação destes mesmos dados do Last.fm.

E você tem alguma dica para compartilhar?

Bônus: cases

O site Aldeia Viral é um exemplo de poluição e perda de foco da tarefa.

Banners se misturam com conteúdo. Não há indícios claros de entrada de conteúdo pelo usuário, como botões de “como colaborar” ou a marcação de avaliação.

Artigos relacionados:

• 4/12/2008: A terceira onda: O design franciscano
• 24/04/2009: A realidade paralela dos fakes no Twitter
• 13/01/2009: Morte ao Internet Explorer 6!
• 12/08/2009: A identidade virtual da pessoa jurídica

“O que deu errado?” todos se perguntavam. Chamaram todos os especialistas, consultores, gurus e encontraram o erro. “Vamos fazer tudo de novo.”

Nove anos depois, anunciaram mais um novo paradigma de mercado. Era a Web 2.0. Vieram mais idéias e mais recursos. Desta vez, os erros do passado não foram ignorados. Estava indo tudo certo, com calma e determinação. E aí veio a crise.

“De novo? Bem, agora não é nossa culpa!”, foi o que disseram. Será?

Web 2.0 logo chart – updated for 2009 (dead companies)

1. Semana passada foi publicada no Extra uma matéria bem básica sobre redes sociais onde fui entrevistada como uma social-o-holic.
2. No próximo dia 30, estarei na 7a. edição do Sou+Web para o debate sobre Twitter como Ferramenta de Marketing Digital com Roberto Cassano, Leonardo Bravo e Luis Ricardo Correia, com moderação de Roney Belhassof. Faça sua inscrição.
3. Estou participando do Twitcast, um podcast sobre o Twitter juntamente com Leonardo Bravo, Roney Belhassof, Fernanda Lizardo e Bruno Dulcetti, com o apoio de Claudia Mello e da Vivi Reis. Também estou publicando no blog do podcast. Ouça o último episódio.

Artigos relacionados:

• 24/04/2009: A realidade paralela dos fakes no Twitter
• 2/06/2008: Twitter, I love you
• 30/10/2007: Twittetiquette

Ao descobrir que havia um perfil falso insultando outras pessoas públicas no Twitter, o vocalista da banda Detonautas, Tico Santa Cruz, escreveu em seu blog oficial um comunicado para esclarecer que não era o responsável pelos perfis @ticosantacruz e @ticosntacruz. Afirmou que havia registrado queixa na Delegacia de Repressão aos Crimes de Informática solicitando a remoção da conta e abrindo o caso para uma ação cível.

O caso não teria se tornado tão interessante se o fake não acusasse o outro perfil como falso. Comparando as duas timelines, é complicado para um leitor comum julgar qual é a verdadeira. Como no caso do famoso perfil de Vitor Fasano, os fakes se esmeram em tornar aquela timeline mais real, mais engraçada e mais intrigante.

O espaço disponível será conquistado pelo primeiro que chegar, ainda mais se for uma personalidade popular e polêmica. Não importa quando ou se o verdadeiro dono daquele nome vai entrar naquela rede social. Quem cuida do próprio nome como uma marca deve estar tão atento quanto as empresas. É mais intuitivo ver que @leojaime está no Twitter pela escolha do username. Um apelido como @mroficial, como o utilizado pela cantora Maria Rita, requer mais esforço para consolidar e para legitimar o perfil oficial. Por enquanto, a melhor forma de se fazer isso com segurança é através de comunicados para as mídias tradicionais.

O mercado poderá se auto-regular nos próximos anos ou sofrer intervenções mais dramáticas, como as que ocorrem no Orkut. Caso semelhante aconteceu com o registro de domínios das grandes empresas nos primeiros anos da Internet comercial no Brasil e a maior parte dos conflitos foram resolvidos com negociação e venda dos registros. Lá fora, no meio da corrida pelo primeiro milhão de usuários entre CNN e Ashton Kutcher, foi anunciado que a CNN comprou o perfil @cnnbrk de um usuário inglês. Para este usuário, atualizar esta conta por dois anos se tornou um investimento. Para a empresa, foi uma forma rápida de recuperar terreno e tornar o Twitter uma nova fonte de audiência.

Enquanto isso, todos aqueles que estão entrando depois do Asthon Kutcher e do Fantástico devem correr para segurar o melhor apelido que corresponda ao seu nome, ao do seu grupo ou ao do seu projeto. Se ele já foi registrado, analise o perfil e entre em contato. Muitos dos perfis falsos são canais de novidade mantidos por fãs. Verifique se eles possuem interesse em ceder ou mesmo vender a conta.

Esta pode ser uma oportunidade única para o mercado de assessores de comunicação. Hoje a fronteira é o Twitter. Amanhã? Não sabemos. A estratégia de enviar releases por fax ficou enterrada no século passado. É hora de planejar as ações também para os novos produtores de conteúdo: os consumidores.

Veja também:

• Perfil falso de João Gordo no Twitter revela suposta pauta do “Pânico na TV”, na Abril;
• Lista de artistas, bandas e músicos internacionais no Twitter;
• País tem agência de comunicação especializada em Twitter, no Terra.

Observação 

Este post participa da promoção do Social Media Brasil, um evento sobre mídias sociais que irá acontecer nos dias 5 e 6 de junho em São Paulo. Mais informações no site oficial.

Artigos relacionados:

• 13/05/2009: Twitter em três notas
• 30/10/2007: Twittetiquette
• 2/06/2008: Twitter, I love you
• 26/06/2009: Incentivando a colaboração do usuário

Há algumas semanas, Twitter implementou o botão “more” ao invés da paginação habitual de “older” e “next”. Alguns usuários reclamaram, mas se for para manter a baleia fora do caminho, por que não?

Acredito que este foi um recurso utilizado para diminuir as requisições e tornar o acesso ao site mais rápido, mas também como dificultador para robôs de indexação. Ficou mais complicado para o GoogleBot, por exemplo, acessar twitts anteriores às últimas vinte atualizações de cada usuário. Tornando o mecanismo oficial de busca o método mais confiável se de encontrar alguma informação publicada somente no Twitter. Este pode ser um ponto que auxiliaria uma possível negociação entre as duas empresas.

Pequenas decisões como esta acontecem o tempo todo no processo de desenvolvimento de um aplicativo Web ou site. Uma solicitação para mostrar uma informação a mais pode requerer tantas requisições ao banco de dados que simplesmente pode não valer a pena mostrá-lo. É um caso de negociação entre clientes, arquitetos da informação, designers e desenvolvedores.

No caso de plugins do WordPress, a decisão é feita unicamente pelo usuário que nem sempre sabe o que está dentro do pacote. Alguns deles podem apresentar problemas de sobrecarga no processamento de servidores Web. Será que optar por um plugin com os mesmos recursos, que não sobrecarregue o servidor mas que tenha menos facilidade de uso não seria a primeira opção para os blogueiros?

Como toda metodologia, a usabilidade e a experiência do usuário podem gerar alguns profissionais radicais e isto é saudável. Toda interface precisa ser analisada por diferentes pontos de vista para uma melhor experiência final. Planeje esta fase de negociação na hora de montar o cronograma. Na própria equipe, não é necessária uma grande reunião de aprovação de telas. Opte por entrevistas individuais e tente compreender que pontos podem ser mais sensíveis ao outro profissional para auxiliar a antecipar problemas nos próximos projetos.

Como grande vencedora da primeira guerra de navegadores, a Microsoft dissolveu a equipe de desenvolvimento e parou a evolução do navegador. Após grande pressão, ela voltou atrás e manteve uma equipe de seis desenvolvedores que faria apenas atualizações de segurança. Em cinco anos, não houve qualquer melhoria do navegador seja para usuários ou para desenvolvedores Web. Além disso, o software foi incorporado gratuitamente ao Windows XP em 2002 diminuindo as chances de quaisquer concorrentes.

Por cinco anos, milhões de novos usuários foram formados acreditando no princípio de que não deveriam fazer atualizações de seus navegadores e de que não existe nenhum outro além do Internet Explorer 6. E estamos falando de uma indústria que existe há apenas treze anos.

Com índices de uso que chegaram a 98% dependendo do site e de seu público-alvo, muitos desenvolvedores acharam conveniente desenvolver em plataformas proprietárias ou testaram seus softwares apenas em um navegador. Imagine o prejuízo de uma empresa como a Petrobras, por exemplo. Quantos aplicativos e sites internos foram desenvolvidos e testados apenas numa plataforma?

Felizmente, com a pressão da comunidade de desenvolvedores e com o uso crescente de navegadores e sistemas operacionais alternativos, a Microsoft reativou o projeto do IE7 lançado oficialmente em outubro de 2006. O IE8 está previsto para este ano. Ambos os projetos são bem mais evoluídos em termos de aderência aos padrões Web e possuem uma experiência de uso muito melhor que seu antecessor.

Estamos em 2009 e, portanto, contando uma história antiga, muito antiga. Por que então continuar usando o Internet Explorer 6? Por que ainda devemos gastar horas de desenvolvimento que poderiam ser utilizados em melhorar a usabilidade e a acessibilidade de código para criar códigos alternativos para um programa defeituoso e velho?

Fale com seus amigos, parentes, colegas de trabalho. Exija upgrade para o Internet Explorer 7 ou acesso a navegadores alternativos. Vamos continuar evoluindo. Vamos dar um prazo final para este navegador: Março de 2009.

Mais:

• Hotsite do iMasters com um script muito simples com uma mensagem de alerta para usuários do IE6 pedindo a atualização do navegador.
• A campanha IE Death March 2009 pedindo a descontinuação do IE6 com um link para tudo que aconteceu ou surgiu depois do lançamento em 2001.
• Servindo um estilo básico para quem usa IE6: Feed IE 6 with a basic stylesheet.

Artigo em resposta ao Dulcetti. Conclamo todos a fazerem o mesmo: não importa que não tenha um blog de tecnologia, ok?

Artigos relacionados:

• 26/04/2005: Abre o olho, meu povo!
• 16/10/2008: A crise e o e-commerce 2.0
• 24/04/2009: A realidade paralela dos fakes no Twitter
• 12/08/2009: A identidade virtual da pessoa jurídica

Nunca encontro o link para mudar para unidades métricas.

Se há uma probabilidade de 80% de chuva, chegamos à conclusão que vai chover. Mostrar apenas um “sim” ao invés de iconografia e cinco linhas de texto significa mais do que economia de processamento humano. É um novo estilo ou um novo refinamento de interface.

Tarefa realizada rapidamente!

Talvez este novo estilo tenha começado apenas como uma piada (Is Twitter down? e depois Can Rails scale?, Is McCain President?), mas podemos citar o Google como o início de tudo. No caso de mecanismos de busca, o principal é o foco na tarefa a ser realizada. Não há nada na interface que distraia o usuário do que ele deve fazer. Qualquer outra informação ganha pouco destaque para apenas quando o usuário procurar por mais informações: links com sublinhados e cores neutras, menus nos cantos da tela.

Semana passada, tive uma dúvida. Faltando apenas meia hora de ir para o Santos Dumont começou a chover muito. Tentei achar algum lugar que informasse se o aeroporto estava aberto ou não para decolagens.  Caí em várias páginas da Infraero: uma me contava a história do aeroporto, a outra era um release sobre as obras de expansão e a terceira era uma tabela estatísticas sobre vôos atrasados por companhia. Nenhuma delas me respondia a um a pergunta tão simples. Finalmente, e com a ajuda de amigos no Twitter, cheguei a uma tela que fazia consultas pelo número do vôo, mas já era hora de sair e desisti.

Não é sempre que estamos pesquisando sobre história da emancipação antilhana ou de ataques terroristas na Índia. Algumas vezes precisamos apenas saber se vai chover, se o vôo vai atrasar, se o Túnel Rebouças está aberto, se a Perimetral está engarrafada… Foco na tarefa, principalmente para nossos dias cada vez mais dependentes de dispositivos móveis. Para estas perguntas, é mandatório que as soluções sejam igualmente simples.

Mais exemplos:

• Helvetica Reader: script para Greasemonkey que gera uma interface mais simples para o Google Reader.
• TAXI: faz o cálculo de corridas de táxi nas cidades brasileiras.
• Down for everyone or just me?
• moourl.com

Artigos relacionados:

• 26/06/2009: Incentivando a colaboração do usuário
• 7/11/2008: Eventos sobre Web no Rio
• 20/11/2008: A terceira onda: O acesso à informação

Nos dias 6 e 13 de dezembro, Edson Rufino estará ministrando um workshop de Técnicas de Acessibilidade para Websites na UniverCidade. Mais informações no blog do Robson Santos.

Inscrições abertas também para o Free Software Rio – Congresso Internacional de Software Livre para o Setor Público nos dias 8 e 9 de dezembro.

E teremos mais uma edição do Sou+Web sábado 13 de dezembro. O tema da vez é Palestras sobre Creative Commons, Cultura Livre e Propriedade Intelectual. Inscreva-se enviando um email para nino.carvalho@gmail.com, informando nome, email, onde trabalha, qual cargo e como soube do evento.

E dezembro é mês de 24 ways! E o fim do Yahoo!Live e do Pownce.

Você vai organizar algum evento sobre Web no Rio de Janeiro? Mande um e-mail com data, local, como se inscrever, página oficial e email de contato do evento.

Artigos relacionados:

• 25/06/2007: Jornada em acessibilidade na Web
• 22/10/2007: BarCamp Rio… eu fui!

Pesquisas como estas ficaram muito mais fáceis nos primeiros anos da Web. Na Web 2.0, descobri que outros amigos também possuíam o mesmo gosto estranho para a literatura e pudemos trocar referências. O que esperar da terceira onda ou a Web 3.0? Bem, acredito que o poema vai cair em minhas mãos enquanto estiver andando pela rua.

Sofremos enorme pressão para nos manter informados lendo todos os feeds que assinamos. Em momentos mais ocupados da semana, a tentação de clicar no mágico “Mark all as read” parece ser mais forte que tudo, mas nem sempre cedemos. Há culpa e o medo de perder um tópico quente importante. O compartilhamento de itens favoritos com comentários do Google Reader com um grupo de amigos ajuda nos manter razoavelmente informado nestes momentos.

Este é o máximo de desempenho que poderíamos obter hoje da carga de informação* com a tecnologia atual: filtros humanos aliados aos filtros tecnológicos. Em algum momento da terceira onda, agregadores de feeds irão aliar de modo eficiente rede social e sugestão. Isso já ocorre com a sugestão de novas assinaturas baseadas nas que o usuário já tem.  Sugestão de tópicos quentes demanda mais processamento e mais horas/homem. No entanto, é apenas uma questão de tempo para a “grande máquina” saber o que quero e preciso saber em determinado momento.

Muito do que desejamos saber é um tópico naturalmente quente como o último escândalo daquela celebridade ou informações sobre eleições municipais. Hoje por exemplo, Dia da Consciência Negra, há muitas reflexões sendo publicadas sobre este assunto que usaremos nos debates na padaria pela manhã. Outros tópicos são mais sutis, atuam no consciente coletivo e estão igualmente espalhadas pelo compartilhamento de favoritos na minha lista. Não me surpreendo quando alguém me mandar um trecho da música que estou escutando agora pelo IM. Isso acontece a toda hora!

Claro que estas questões abrem discussão sobre privacidade e o poder da nova mídia (e com manipular estes resultados), mas este já é outro artigo.

* Ando culpada em usar expressões como “recarregar seres humanos com informação” desde que vi a palestra de Susan Blackmore no TED. Veja no YouTube: parte 1, parte 2 e parte 3.

Referências:

• Fluidity: “Discovery is the new cocaine”, por Boris Veldhuijzen van Zanten em The Next Web

Artigos relacionados:

• 4/12/2008: A terceira onda: O design franciscano

Sou + Web

Terceira edição da série de debates na FACHA neste sábado, dia 8 de novembro. O tema da vez é Webdesign com foco no cliente, com Anderson Gaveta, Bruno Dulcetti e Gabriel Guerra. Para se inscrever, mande um e-mail para nino.carvalho@gmail.com até hoje informando nome, e-mail, onde trabalha e em qual cargo e como soube do evento. Mais informações em no DNA Digital.

Dia Mundial da Usabilidade

Nesta edição do evento no Rio, teremos apenas um painel sobre Web com Letícia Cianconni falando de metodologias. Mas é claro que o evento é super interessante por si só. Será dia 13 de novembro a partir das 17h30 na unidade Ipanema da UniverCidade. Mais informações no Interfaceando, blog do Robson Santos. As inscrições estão abertas no site do evento. Sobre outras edições no país, veja no site oficial.

A escola no século XXI

O Descolagem deste mês será sobre a nova escola. Os palestrantes serão Paulo Blikstein, Luli Radfahrer e Patrícia Konder Lins e Silva. Imperdível para quem gosta de educação à distância. Será no NAVE, na Rua Uruguai na Tijuca, no dia 22 de novembro, às 15 horas. Para se inscrever, envie um email para descolagem@oi.com.br com o assunto “Quero participar”, informando nome, idade e ocupação. Quem não puder ir, pode conferir o streaming no site http://www.onave.org.br.

Depois do Descolagem, provavelmente iremos emendar direto para o #BOD (Blogs on Dance), na Lapa. Mais informações no site oficial.

Você vai organizar algum evento sobre Web no Rio de Janeiro? Mande um e-mail com data, local, como se inscrever, página oficial e email de contato do evento.

Artigos relacionados:

• 26/06/2009: Incentivando a colaboração do usuário
• 4/12/2008: A terceira onda: O design franciscano
• 7/06/2007: Comentário de um click só

Para apimentar mais este cenário, o comércio eletrônico nacional deu uma sacudida nestas últimas semanas. Primeiro foi a chegada do Wal-mart. Menos de duas semanas depois, Submarino lança um novo redesign, talvez o mais radical de sua história.

Sacudida mais do que necessária. Desde a fusão de Americanas.com com Submarino há dois anos, o mercado se tornou um tédio só. Pouca competição ao longo do tempo leva a preços pouco competivos e serviços de baixa qualidade (alguém não tem alguma reclamação sobre entregas de Submarino e Americanas.com?). Ainda assim, as vendas pela Internet só subiram durante este tempo.

E é uma sacudida atrasada. O diferencial destes dois lançamentos é uma pitada de Web 2.0, algo que convivemos há anos já em todos os outros tipos de site. A seção Meu Wal-mart tenta algo de rede social, com foto do usuário, controle das resenhas feitas e agenda de eventos. Os produtos dos dois sites podem ser tagueados comunitariamente, e assim por diante.

O desafio agora é compensar o tempo perdido: pensar na Web Semântica, forçar mais os limites do SEO ético, inovar nos recursos de interface e de interação de verdade. O mundo inteiro lá fora já pensa na terceira onda da Web e não é hora para ficar parado olhando para a flutuação do dólar.

Mais referências:

• How your online business can survive a global recession, por Andy Budd;
• Wal-Mart unveils e-commerce site in booming Brazil, Reuters;
• Pesquisas confirmam que brasileiros nao querem parar de comprar, Blue Bus;
• A crise global chegou ao comércio eletrônico?, por Maurício Salvador no Webinsider
  

Artigos relacionados:

• 24/04/2009: A realidade paralela dos fakes no Twitter
• 12/08/2009: A identidade virtual da pessoa jurídica
• 13/01/2009: Morte ao Internet Explorer 6!
• 6/01/2006: Latitude, Longitude: A geolocalização na Web 2.0

Até lá! :*

Ou, enquanto isso, acompanhe minhas atualizações no Twitter, Google Reader, Blip.fm, del.icio.us e blippr.

Cada elemento-chave deve poder ser identificado

Em nosso código de teste, vamos usar uma lista não-ordenada simples:

<ul>
    <li>Primeiro item</li>
    <li>Segundo item</li>
    <li>Terceiro item</li>
    <li>Quarto item</li>
</ul>

Imaginando que haverá outras listas nesta tela, o ideal é identificá-la diretamente:

<ul id="lista-especial">
    <li>Primeiro item</li>
    <li>Segundo item</li>
    <li>Terceiro item</li>
    <li>Quarto item</li>
</ul>

Ou pelo seu pai, onde todas as listas-filhas terão a mesma apresentação e comportamento:

<div id="conteudo">
    <ul>
        <li>Primeiro item</li>
        <li>Segundo item</li>
        <li>Terceiro item</li>
        <li>Quarto item</li>
    </ul>
</div>

Se esta lista for um menu, certamente o designer irá escolher uma forma de realçar cada item ou pedir certo comportamento diferenciado como por exemplo alterar a cor com o passar de cursor ou com o item ativado. Prevendo isso, cada item dentro da lista deve ser identificado:

<ul id="menu-principal">
    <li id="menu-item-1"><a href="#1">Primeira página</a></li>
    <li id="menu-item-2"><a href="#2">Segunda página</a></li>
    <li id="menu-item-3"><a href="#3">Terceira página</a></li>
    <li id="menu-item-4"><a href="#4">Quarta página</a></li>
</ul>

Desta forma, seja qual for a implementação escolhida para o menu o desenvolvedor poderá manipular:

#menu-item-1 {background:pink;}
#menu-item-1 a{background:blue;}
#menu-item-1 a:hover{background:red;}

Mais um pé nos frameworks CSS

Seu designer favorito não consegue fazer outro tipo de layout que não seja de largura fixa, centralizado na tela? Então você já pode antecipar que o HTML terá um bloco logo abaixo da tag body somente para este fim. Não me lembro, inclusive, da última interface que montei que não precisei deste bloco. Nem todas as possibilidades de uma interface podem ser incluídas num HTML enxuto e puramente semântico. Algumas divs auxiliares sempre são necessárias.  Da mesma forma, vejo que sempre preciso dos blocos de cabeçalho, rodapé e barra lateral.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Meu site</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script type="text/javascript" src="behavior.js"></script>
</head>
<body>
<div id="centralizando-layout">
    <div id="cabecalho">
        <h1>Olá mundo!</h1>
    </div>
    <div id="conteudo">
        Este é um elemento solto
        <p>Lorem ipsum dolor sit amet, consectetur
           adipisicing elit, sed do eiusmod tempor
           incididunt ut labore et dolore magna
           aliqua.</p>
    </div>
    <ul id="lateral">
        <li id="mn-it-1"><a href="#1">Primeira página</a></li>
        <li id="mn-it-2"><a href="#2">Segunda página</a></li>
        <li id="mn-it-3"><a href="#3">Terceira página</a></li>
        <li id="mn-it-4"><a href="#4">Quarta página</a></li>
    </ul>
    <div id="rodape">
        <p>© 2008 Meu site</p>
    </div>
</div>
</body>
</html>

Evite expressões órfãs

Veja no exemplo anterior a expressão “Este é um elemento solto” e tente manipulá-la via CSS ou JavaScript. É mais complicado, não? Tente sempre manter os elementos dentro de marcações específicas:

    <div id="content">
        <h2>Este não é um elemento sem pai</h2>
        <p>Lorem ipsum dolor sit amet, consectetur
           adipisicing elit, sed do eiusmod tempor
           incididunt ut labore et dolore magna
           aliqua.</p>
    </div>

Melhor antecipar do que alterar cinqüenta telas depois

Muitas das decisões podem ser antecipadas mesmo sem olhar o layout ou o sistema, mas é melhor que não seja assim. Antes de começar a montar o código HTML, analise a interface previamente aprovada e conheça bem as limitações do sistema. Não é bola de cristal ou receita de bolo, e sim uma questão de saber reconhecer os padrões de código que se repetem projeto após projeto.

Artigos relacionados:

• 3/09/2007: Visie: Code Show
• 14/05/2008: Ordenando os seletores CSS
• 15/01/2008: CSS livre, leve e solto

Os usuários do Twitter têm sofrido nas últimas semanas com constantes quedas no serviço, limitação no uso dos clientes de terceiros e notificações por mensagem instantânea. Mesmo assim há resistência em utilizar outros serviços. Qual seria o problema?

A primeira resposta seria a lista de amigos. No entanto, é virtualmente possível refazer boa parte dele em uma tarde em qualquer outro site que não dependam de convite, como o Jaiku. Basta enviar um email notificando seus contatos mais próximos. Se o conteúdo do seu microblogging for interessante para seus contatos, o sucesso da migração está garantido. Este não deveria ser o principal obstáculo e pude comprovar isso nas últimas semanas com a enxurrada de convites.

Vários fatores influenciam diretamente o sucesso do Twitter: sua simplicidade, sua interoperabilidade, sua popularidade. Graças a estes dois últimos, vários programas clientes de terceiros foram desenvolvidos pela comunidade, como extensões para Firefox, programas para diversos sistemas operacionais, clientes para celular, sites de mashups. Praticamente qualquer necessidade de experiência de usuário para a publicação e acompanhamento da rede Twitter está suprida. Quem já se acostumou aos seus modos favoritos de leitura, terá dificuldade nestes outros sites, ainda não tão populares.

O grande fator de rejeição do Jaiku, por exemplo, é sua falta de simplicidade e clareza. O serviço optou por oferecer diversos recursos, o que tornou a interface bastante poluída e com poucas opções de personalização. Imagino que integrar todos estes recursos a um programa cliente também seja custoso demais para uma base de usuários não tão extensa.

A crise existencial dos serviços de microblogging é um caso incrível para o dia-a-dia do profissional Web. Temos que manter o foco na simplicidade da interface e objetividade na realização da tarefa. Qualquer firula, principalmente nos primeiros meses de um site, é um risco para a fidelização de usuários.

Ainda hoje, o usuário precisa se sentir conquistado e amado pelo site que participa. E ele não sonha com flores e bombons: o usuário deseja que serviço esteja disponível quando ele precisar. Se o serviço é bom, mas tem suas falhas, o usuário perdoa. Mas cuidado para não fazê-lo se sentir a mulher do malandro. Um dia, ele segue o seu rumo.

Referências e outras opiniões:

• Twitter At Scale: Will It Work?, por Nik Cubrilovic no Techcrunch;
• Why VCs love Twitter’s downtime problems, Valleywag.

UPDATE:

Nos últimos dias, tenho usado o serviço do Ping.fm para publicar microposts para o Twitter, Jaiku, Pownce e Plurk simultaneamente. Foi um achado para a manutenção da base de amigos e para a produvidade no trabalho. Ainda mais com a versão móvel. É uma grande vantagem para o microblogueiro autista que “apenas fala para a parede”. Falta uma ferramenta que integre melhor as respostas que fazem do Twitter, por exemplo, mais uma rede social do que uma plataforma de publicação na Web.

Artigos relacionados:

• 30/10/2007: Twittetiquette
• 13/05/2009: Twitter em três notas
• 24/04/2009: A realidade paralela dos fakes no Twitter
• 24/09/2007: Planejando interfaces Web acessíveis

De qualquer forma, não deveria estar me justificando! Já vi muito código como este:

h3{
display:block; width:190px; height:40px;
margin-left:20px;padding:2px 4px 2px 4px;
background-image:url(/img/titulo.gif);
background-repeat:no-repeat;
background-position:left top;
width:188px;
height:40px;
border-top:2px solid #006666;
border-bottom:2px solid #006666;
display:block;
overflow:hidden;
text-indent:-999px;
margin:10px 10px 10px;
}

Em qualquer um dos casos, não é só desperdício de bytes, é também um problema durante a manutenção do código e na solução de problemas. Também em CSS, menos é mais. Códigos mais simples são mais fáceis de ler e compreender.

Como já vimos anteriormente a otimização de CSS, vamos limpar o exemplo antes de ordená-lo:

h3 a{
	display:block;
	width:190px;
	height:40px;
	margin-left:20px;
	padding:2px 4px;
	background:url(/img/titulo.gif) no-repeat 0 0;
	width:188px;
	height:40px;
	border:0 solid #066;
	border-width:2px 0;
	display:block;
	overflow:hidden;
	text-indent:-999px;
	margin:10px
}

Agora podemos ordenar os seletores com alguns parâmetros pré-estabelecidos. O exemplo pode ficar assim, onde reparamos alguns seletores repetidos com valores conflitantes:

h3 a{
	display:block;
	display:block;
	overflow:hidden;
	width:190px;
	width:188px;
	height:40px;
	height:40px;
	margin-left:20px;
	margin:10px;
	padding:2px 4px;
	background:url(/img/titulo.gif) no-repeat 0 0;
	border:0 solid #066;
	border-width:2px 0;
	text-indent:-999px
}

O debug é automático assim mesmo. É só definir uma ordem que o desenvolvedor bate o olho e vê o que está errado ou sobrando no código. Tenha cuidado ao reordenar os seletores semelhantes para não alterar o resultado final.

Para ordernar os seletores basta definir uma ordem arbitrária: ordem alfabética, por tipo de seletor, pela melhor forma de memorização, não importa. Se não quiser pensar sobre isso, ofereço a minha cola.

A base desta lista foi a referência de CSS do W3Schools e está dividida e ordenada em grupos. Primeiro, lido com os fatores de dimensão e posicionamento dos boxes para depois tratar do formato e cores.

Posição e classificação do elemento na tela

Posicionamento

• position
• top
• right
• bottom
• left
• z-index
• overflow
• clip
• vertical-align

Classificação

• clear
• float
• display
• visibility
• cursor

Tamanho do elemento e sua relação com outros

Dimensão

• width
• height
• max-width
• max-height
• min-width
• min-height
• line-height

Margens

• margin
• padding

Formato do elemento

Fundo

• background
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Bordas

• border
• border-width
• border-style
• border-color

Listas e marcadores

• list-style
• list-style-type
• list-style-position
• list-style-image

Tabela

• border-collapse
• border-spacing
• caption-side
• empty-cells
• table-layout

Tipologia e conteúdo

Fontes

• font
• font-style
• font-variant
• font-weight
• font-size
• font-family

Texto

• color
• text-align
• text-decoration
• text-indent
• text-transform
• direction
• letter-spacing
• white-space
• word-spacing

Conteúdo

• content
• quotes

Estou usando esta lista já há alguns meses com sucesso. Nenhuma lista é perfeita e adoraria idéias para aperfeiçoá-la. Até a segunda semana de uso não tirei-a do meu lado. Depois, tudo ficou automático e só a consulto para propriedades que uso raramente. Quando pego um código antigo, é instantânea a vontade de reordernar tudo antes de revisá-lo.

Referências:

• CSS2 Reference, W3Schools;
• Improving Code Readability With CSS Styleguides, na Smashing Magazine;
• Dicas básicas para projetar Folhas de Estilos, por Maurício Samy Silva.
  

Artigos relacionados:

• 15/01/2008: CSS livre, leve e solto
• 25/06/2008: Maturando o HTML

No entanto, os dispositivos móveis chegaram de vez ao país. O mercado começou a se preocupar com estes dispositivos com notícias sobre invasão dos iPhones anunciada pela imprensa em março. Ao contrário de celulares e smartphones, o iPhone renderiza as páginas como elas são na resolução de 320 por 480 pixels. O usuário pode usar zoom para aumentar a tela, mas qualquer design de interfaces planejado para funcionar bem em 1024 pixels de largura com fontes pequenas irá tornar a vida do usuário um pouco mais difícil.

O cenário ganha novos players com os subnotebooks de 7 e 8,9 polegadas, como o Asus Eee PC e o Positivo Mobo. É possível redefinir a resolução de tela, mas nestes dois casos o usuário deve preferir manter a definição de fábrica que é 800×600. Ainda estamos verificando que o consumo destes subnotebooks estão vindo da faixa de early adopters de tecnologia, mas o público final, principalmente no Brasil, deve ser a classe C. Lembrando sempre que esta é faixa de consumo em tecnologia doméstica que mais cresce no país.

Seja qual for o público-alvo, fãs de tecnologia ou não, há chances de que sites sejam cada vez mais acessados novamente por usuários com resoluções de tela pequenos. Se for imprescindível trabalhar em 1024 pixels, é fundamental pensar nestes usuários e oferecer a melhor experiência possível.

Possíveis soluções:

• Trabalhar com telas flexíveis, tomando cuidado sempre com a largura máxima e mínima da coluna principal de leitura.
• Fazer versões diferentes da folha de estilo usando JavaScript para verificar resolução de tela. Tenha em mente que é mais provável que o usuário com resolução maior esteja com os scripts habilitados em seu navegador. Aqui você trabalha apenas a parte de grid do seu CSS.

O mais importante: não deixe de testar. Por mais anti-gadget que seja o desenvolvedor, ele precisa conhecer e testar seus aplicativos e websites nestas novas plataformas.

Referências:

• Internet móvel ultrapassará web convencional, diz Google, Folha Online.
• Flexible Layouts: Challenge For The Future, Smashing Magazine.
  

Importante! Esta é apenas uma sugestão de trabalho com CSS e nenhum padrão de desenvolvimento. Cada empresa ou desenvolvedor deve procurar a sua própria forma de construir seu código.

Costumo dividir meus arquivos CSS em dois tipos de blocos de tags, identificadores e classes: um por mídia e outro por tipo de conteúdo.

Uma introdução

Mas antes mesmo de começar a trabalhar o estilo, que tal um comentário sobre que projeto que estamos trabalhando? É a única chance que um desenvolvedor de interface tem que ter algum controle textual sobre seu trabalho.

/*
Theme Name: Layout em curvas insanas
Theme URI: http://teste.sydi.net
Description: Desenvolvimento da nova versão do site
Version: 0.9
Author: Simone Villas Boas
Author URI: http://sydi.net/
*/

É uma idéia descaradamente roubada do WordPress – que deve ter sido pega em outro lugar também – e que adotamos em todos os projetos.

Dividindo por mídia

Não há novidade alguma aqui:

@media screen{
	/* minhas definições para visualização num
		monitor comum de computador ou notebook */
}

@media print{
	/* minhas definições para impressão do arquivo */
}

@media screen,print{
	/* minhas definições para ambos */
}

Como ando obcecada em diminuir os requests HTTP, não uso o outro método de separar os tipos de mídias em arquivos diferentes. Esta é uma escolha do desenvolvedor de interface!

<link rel="stylesheet" type="text/css"
		media="all" href="/css/principal.css" />

<link rel="stylesheet" type="text/css"
		media="screen" href="/css/monitor.css" />

<link rel="stylesheet" type="text/css"
		media="print" href="/css/imprimir.css" />

Dividindo por tipo de conteúdo

Esta é uma lista que fui testando e aprimorando nos últimos projetos. Definindo dentro de cada mídia:

1. Reset, onde limpo todas as definições de estilo padrão do navegador;
2. Basic, onde estão as definições genéricas de tags e classes;
3. Grid, onde desenvolvo estrutura da página;
4. Format, onde configuro cores, fundos, tipologia, por área de layout;
5. Pages, onde estão as definições especiais de cada seção do site;
6. Hacks, onde junto todos os códigos pré-construídos de CSS como image replacements, clear-fix e outras definições genéricas.

Agora cada item em detalhes e exemplos:

Preferi manter os títulos em inglês para manter algum distanciamento. No entanto, como todo o resto neste artigo, esta é mais uma convenção.

1. Reset

   Uso a opção testada pelo Eric Meyer com algumas pequenas revisões particulares:

   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, font, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
   	margin: 0;
   	padding: 0;
   	border: 0;
   	outline: 0 !important;
   	font-weight: normal;
   	font-style: normal;
   	font-size: 100%;
   	font-family: inherit;
   	vertical-align: baseline
   }
   body {
   	line-height: 1;
   	background: #fff;
   	color: #000
   }
   ol, ul {
   	list-style: none
   }
   blockquote, q {
   	quotes: none
   }
   ins {
   	text-decoration: none
   }
   del {
   	text-decoration: line-through
   }
   table {
   	border-collapse: collapse;
   	border-spacing: 0
   }
   address{
   	font-style: normal
   }

2. Basic

   Definição dos estilos das tags, que é a parte mais genérica da folha de estilo:

   body {
   	background: #DDD;
   	font: 62.5% Arial, Helvetica, sans-serif;
   	color: #666;
   }
   h2 {
   	font-size: 2.5em;
   	font-weight: 400;
   	color: #013671;
   }
   h3 {
   	font-size: 1.2em;
   	padding: 1.4em 0 0.8em;
   }
   td {
   	background: #FFF;
   }

   e de classes que deveria ser também bem genérico e muito focado.

   .alert{
   	font-color: #F00;
   }
   td.even{
   	background: #DDD;
   }

3. Grid

   É a estrutura essencial da página. É aqui que grande parte dos CSS Frameworks trabalha quando fornece um layout pré-moldado. Este é um exemplo de tela com conteúdo centralizado como é o caso do tema atual doPixeladas:

   body{
   	text-align: center
   }
   #page{
   	width: 700px;
   	margin: 0 auto;
   	text-align: left
   }
   #header{
   	height: 100px
   }
   #content{
   	float: left;
   	width: 500px
   }
   #sidebar{
   	float: right;
   	width: 200px
   }
   #footer{
   	height: 40px
   }

   O segredo aqui é a simplicidade. Mantendo o mínimo de informações sobre a estrutura primordial da tela é mais fácil fazer alterações estruturais que normalmente seriam traumáticas, como mudar a largura da coluna lateral. Se a folha de estilos acabasse aqui, teríamos uma formatação muito básica, quase um protótipo navegável. É por aqui que gosto de começar a montar uma tela.

   Obs.: O truque do text-align é para o Internet Explorer 6 e anteriores.

4. Format

   Aqui sim centralizamos todas as decisões de cores, fundos e tipologia que não são tão genéricas quanto para tags e classes e nem tão específicas que funcionem apenas em uma parte do site. Para começar, vamos definir para as seções do layout que vimos anteriormente em Grid:

   #page{
   	background: #FFF
   }
   #header{
   	background: #333;
   	color: #FFF
   }
   #content{
   	color: #333
   }
   #sidebar{
   	font-size: 0.8em;
   }
   #footer{
   	background: #000;
   	font-size: 0.8em;
   	color: #FFF
   }

   E um pouco além:

   #sidebar li{
   	list-style: square
   }
   #sidebar li li{
   	list-style: disc
   }

5. Pages

   Considerando que algumas seções do site precisam de um tratamento especial. Por exemplo, uma imagem conceitual para cada seção do site:

   #content{
   	background: no-repeat right top;
   }
   #about #content{
   	background-image: url(images/bg_about.gif);
   }
   #products #content{
   	background-image: url(images/bg_products.gif);
   }
   #contact #content{
   	background-image: url(images/bg_contact.gif);
   }

6. Hacks

   Este não é o melhor rótulo para o bloco já que aqui não estão hacks de CSS e sim configurações genéricas que ajudam a construir o layout como image replacement e clear-fix:

   /* img repl */
   h1 a, h3.description, #menu a{
   	display: block;
   	overflow: hidden;
   	text-indent: -999px;
   }
   /* clear-fix */
   #main: after{
   	content: ".";
   	display: block;
   	clear: both;
   	visibility: hidden;
   	/*line-height: 0;*/
   	height: 0;
   }
   #main{
   	display: inline-block;
   }
   html[xmlns] #main{
   	display: block;
   }
   * html #main{
   	height: 1%;
   }

   Cada um tem sua técnica favorita para o image replacement e outros usam a definição display: table ao invés do clear-fix. Não importa. Isto é apenas um exemplo.

Dividir para conquistar

Se sentir que o arquivo está grande e de difícil manejo, o desenvolvedor de interfaces pode decidir dividí-lo em várias partes e importá-los em um único CSS:

@import url("reset.css");
@import url("basic.css");
@import url("grid.css");
@import url("format.css");
@import url("pages.css");
@import url("hacks.css");
...

Ah, mas é mais trabalho?

Estabelecer critérios para organizar o código CSS é mais trabalhoso no início, mas vale a pena durante o projeto e durante a manutenção, principalmente se for um código compartilhado por vários desenvolvedores. E como tudo no desenvolvimento de acordo com os padrões, a prática torna tudo mais rápido e fácil.

Teste seus próprios critérios e compartilhe com a gente!

E o Blueprint e genéricos?

Não, obrigada.

Referências:

• Frameworks for Designers, A List Apart;
• CSS Frameworks + CSS Reset: Design From Scratch, Smashing Magazine.

Fiquei o tempo todo alocada numa das baias da área Campus Blog, logo ao lado da área do BarCamp. Tudo que produzi mesmo, além do artigo na Webinsider a ação mesmo está no Twitter e no Flickr. Leia resumo no perfil do FriendFeed.

No Webinsider:

• Movidos pela informação e pelas não-atividades

Em outros lugares:

• Live streaming, BlogBlogs;
  
• Sao Paulo Fashion Geek e Carnaval dos Nerds, triste jornalismo, Blue Bus;
• Quando a blogosfera vira ruído e a tinta vira marrom (ou rápidas reflexões sobre o Campus Party), por Michel Lent;
• CampusParty 2008 – um evento intenso, por Fernando Mafra no Overmundo;
• Campus Party em números, por James Della Valle no Limão;
• Oferta e procura em inovação, por Luli Radfahrer;
• Patxi!!!!!!!!!!!, o evento sob o ponto de vista de um voluntário.
  

Os beijos para os adoráveis campuseros:

• Lu Freitas, minha heroína, que tocou toda aquela loucura do CampusBlog sempre com um sorriso no rosto. Quando crescer quero ser assim.
• Rafael Apocalypse, menino que ronca, que me ajudou com toda a logística bizarra de ônibus, metrô, mala, colchonete. Divido qualquer outra barraca contigo feliz!!
• O Primo, pela dose de sanidade e coerência que alguns momentos deixei para lá.
• Pedro Villalobos, por ter ajudado a deixar minha sanidade e a minha coerência de lado de vez.
• Kaka, menina nova com coragem e alegria.
• Fernando Mafra, o não-parente do Fred, por mais e mais insanidades.
• Rafael, menino fofo toda vida!
• A todos os meninos loucos do Videolog!!!
• Gawry, Horácio, Henrique, Marcelo, meninos dos padrões Web (aqueles mesmos que não consegui falar uma palavra sobre).
• E claro!!! Marias Nerdeiras: Raquel Camargo, Milena Wiek e Gabriela Pereira.
• E todos os outros campuseros que vou lembrando ao longo da semana e linkando aqui!

Até o ano que vem!!!!

WordPress como CMS

Custom Admin Menu for Wordpress

Este plugin permite escolher quais itens aparecem no menu da administração. Alguns clientes não querem blogroll outros não querem comentários, para que deixar mais coisas para confundir o pobre do administrador? UPDATE: Ainda não é compatível com o WordPress 2.5.

Search Pages

Por definição, a busca do WP serviria apenas para os artigos. Este plugin expande a busca para todas as páginas.

Manutenção

Google Analytics

Plugin simples de integração com o Google Analytics.

Google Sitemaps

Este plugin gera um XML com todos os links e títulos de artigos aumentando a eficiência da indexação do Google. Cadastrando o site no Google Webmaster Tools você tem acesso a um diagnóstico completo do site.

WordPress Database Backup

Acidentes acontecem. Nada mais seguro do que agendar backups periódicos da base de dados. Este plugin pode guardar os backups no próprio servidor ou enviar por e-mail do administrador.

WP-Cache

O processo de cache deste plugin salta aos olhos. É altamente recomendado para todos os tipos de sites. Cuidado apenas com clientes que gostam de ter corrigir e ver o resultado imediatamente. Assim que ativar o plugin, mostre onde fica o botão de limpar o cache do WordPress.

Layout e CSS

Classy Body

Em todos os meus sites estáticos gosto de usar identificadores e classes na tag body. Isto permite mais flexibilidade de layout com menos código e customização do template. O Classy Body usa apenas classes compostas. De qualquer forma, é um sonho realizado.

Flexible Upload

Nada melhor que controlar o impulso do usuário de espalhar imagens de tamanhos e resoluções diferentes pelo site inteiro. Pode ser integrado com o Lightbox. UPDATE: não é mais necessário com o WordPress 2.5.

BM Custom Login Plugin

Este plugin é um toque de classe à integração do WordPress, principalmente para aqueles sites que possuem conteúdo fechado para assinantes. Encontre inspirações no grupo do plugin no Flickr.

Feeds

FeedBurner FeedSmith

O Feedburner é uma ótima opção para manter as estatísticas de acesso pelos feeds. Além disso, tem diversas funcionalidades como integração com Flickr e del.icio.us, gerador de newsletter, entre outros.

Comentários

Akismet

Com tantos comment spammers soltos por aí, o melhor amigo do seu blog deve ser o Akismet.

Dofollow

Por padrão, o sistema de comentários publica o link do website do comentarista com um atributo que avisa que o robô de busca não deve seguir. É ótimo para evitar spammers, mas sejamos realistas, péssimo para atrair novos usuários e os spammers nem ligam. Ligue o Akismet e o Dofollow e seja feliz!

Formulários

CFormsII

Este é um plugin para formulários completíssimo. Tem captcha, todos os tipos de entrada de dados e mensagens costumizadas de sucesso e de e-mail. A documentação é bem completa apesar de um pouco confusa.

WP-ContactForm: Akismet Edition

Para soluções mais simples de formulários de contato, este com controle de spam é o mais recomendado. UPDATE: Ainda não é compatível com o WordPress 2.5.

Bônus! Os favoritos dos clientes

Kimili Flash Embed

Este plugin permite que o usuário insira arquivos Flash em seus posts.

WP Photo Album

Dentre as várias ferramentas de galeria de fotos este é um dos mais fáceis de usar e alterar o layout. UPDATE: Ainda não é compatível com o WordPress 2.5. Estou usando o NextGEN Gallery Widget.

Viper’s Video Quicktags

Este plugin é integrado com o TinyMCE para incluir vídeos do próprio usuário ou em sites como YouTube e GoogleVideos nos posts de forma super fácil

WP-Polls

Ferramenta completa de enquete. A interface dele é perfeita. Possui tradução em português.

Wishlist

Agenda de eventos

Todos os plugins de eventos que testei são péssimos, mal integrados e cheios de bugs. E este é um dos mais pedidos dos clientes.

Edição de capa

O Joomla tem muitos defeitos, mas se há uma coisa que ele faz melhor que o WP é a edição de capa. Vários clientes, principalmente jornalistas, pedem para pelo menos hierarquizar matérias mais importantes e não necessariamente mais recentes na página inicial do site.

UPDATE: Gerenciador de Capas (Lead Manager) (ainda não testei, compatível com WP2.5)

Newsletter

Uma solução completa de envio de newsletter: template próprio, arquivos, interface para usuários do tipo assinante do WordPress poderem assinar ou desassinar o envio de informativos. Tudo claro com confirmação de IP do usuário e confimação por e-mail.