Sobre as redes sociais especificamente, já que é este o assunto do post, a minha visão é a de que todos os sites tendem a virar “redes sociais”, reduzindo as que nós conhecemos hoje ao papel de “organizador de panelinhas” (ou agenda dos bródi). É bastante provável que essas próprias redes já tenham pensado nisso e, em algum momento provavelmente próximo, criem mecanismos que facilitem a integração de seus grafos sociais (os relacionamentos dos seus usuários), criando uma noção de “interredes” – onde todas as redes sociais sejam baseadas em uma única malha de relacionamentos.

Viagem? Talvez, mas tenho certeza de que não sou o único que pensa dessa forma. É uma possibilidade, não quer dizer que é a única ou a mais provável. Veremos os próximos passos no seu tempo.

Crie sua própria rede social

Quem nunca teve vontade de adicionais funções sociais em sites comuns? Atualmente os leitores não são mais aquelas pessoas que consomem a informação em seu site. Eles (nós) querem interagir, rebater o que está escrito, agregar valor ao conteúdo com mais informações ou opiniões. O seu leitor, há muito tempo é chamado de usuário.

Existem diversos plugins e widgets disponí­veis para possibilitar o usuário fazer comentários em outras redes, como o Twitter, Facebook, etc. Aqui mesmo eu adicionei links de compartilhamento no final de cada texto, além de um botão “like” do FaceBook. Mas não é só isso que o usuário quer, ele tem a necessidade de deixar sua contribuição no próprio site (aqui, isso pode ser feito através de um comentário, por exemplo).

Por vezes, alguns sites se tornam tão frequentados pelas mesmas pessoas, que elas começam a sentir a necessidade de interagir umas com as outras, não somente com o site em si. E aí­? Como permitir mensagens públicas ou privadas? Como possibilitar uma expressão pública de admiração ou amizade? Qual a melhor forma de deixar o usuário se expressar dentro do seu site?

Simples. Se você tem um público com essas caracterí­sticas, você é um potencial dono de uma rede social. Então, mexa-se e abra suas portas para essa galera.

Gratuito, Open Source e bastante personalizável

Assim como o WordPress (que acaba de lançar a versão 3.0), o Elgg é um sistema feito em PHP, de código aberto e gratuito, que possui uma comunidade de usuários e desenvolvedores í  sua volta, mantendo e expandindo suas funcionalidades. Da mesma forma, o Elgg é mantido por uma empresa, a CurveRider, e possui também o modelo pago para quem não quer gerenciar seu próprio sistema.

Qualquer pessoa pode fazer o download do Elgg e instalá-lo em sua própria hospedagem, gratuitamente. Existem disponí­veis na rede, diversos sites que oferecem temas e plugins gratuitos para Elgg. Claro, já surgiram temas pagos e empresas de consultoria, mas com um pouco de dedicação e tempo, qualquer pessoa consegue configurar uma rede social usando a versão gratuita do Elgg.

O sistema possui diversas features muito úteis para redes sociais: Cadastro e Perfil de usuários, Stream de atividades (atualizações, estilo FaceBook), Blog ou Microblog individual, Compartilhamento de documentos com controle de acessos, Social Bookmarking (Delicious), Grupos (como comunidades do Orkut), Galeria de Fotos e Ví­deos, Widgets e muito mais. Além da possibilidade de ampliar as funcionalidades com plugins.

Faça agora mesmo o download do Elgg e crie sua própria rede social.

Apostando no desenvolvedor como disseminador, a VIVO propõe um arrojado sistema de remuneração para quem se arriscar a criar aplicações móveis em sua plataforma. Além de ficar com 70% da venda do aplicativo, o autor do app também terá uma receita recorrente de 10% do tráfego gerado através de sua criação, modelo inédito no mundo, segundo a VIVO.

O modelo inicial da VIVO Store

Inicialmente, a plataforma conta apenas com modelos para aplicativos pagos. Em fase beta, quando um app é disponibilizado recentemente, cada download custará entre R$ 0,99 e R$ 1,99, repasse do custo operacional de download, segundo a operadora. O aplicativo sai do modelo beta quando sua adoção for feita pelos usuários. Quanto mais um app for baixado, mais próximo da maturidade comercial e portanto, sujeito a “promoção” da categoria beta e figurar entre os grandes apps em bom destaque na loja.

O prazo ou números necessários para um aplicativo sair do modelo beta ainda não foram divulgado, assim como quando estará disponí­vel um modelo para disponibilizar downloads gratuitos, mas a VIVO já está planejando esse modelo, assim como a abertura de sua API para outras tecnologias – por enquanto só está liberada a manipulação de SMS.

Cadastro gratuito e concurso cultural

O cadastro do desenvolvedor é gratuito e imediato, diferente do modelo da Apple Store, por exemplo. Ao registrar seu nome e e-mail no site http://desenvolvedores.vivo.com.br, o usuário recebe um convite via e-mail para completar sua conta, preenchendo seus dados, baixar a documentação e o SDK já disponí­veis, com implementações em PHP, J2ME e C# – outras linguagens serão liberadas em breve.

Óbvio que a liberação do aplicativo passará por uma avaliação anterior pela VIVO, apenas para avaliar falhas e outros tipos de problemas técnicos. Segundo a operadora, não haverá vetos comerciais, pois os próprios usuários é que avaliarão o potencial de um aplicativo disponibilizado na loja. Se ele fizer sucesso, vinga, caso contrário, morre.

Para dar um incentivo inicial no cadastro de desenvolvedores e na formação da comunidade, que a operadora considera fundamental para o crescimento da plataforma, a VIVO criou um concurso de ideias. Durante a Campus Party, quem criar sua conta e inscrever sua ideia para um aplicativo móvel, corre o risco de levar para casa um dos 3 smartphones que serão premiados para os autores das 3 melhores ideias. Ao final do evento os vencedores serão divulgados.

Acompanhe a nossa cobertura coletiva do Campus Party no Tecnocracia LIVE!

Os mecanismos mais conhecidos são as exibições de uma imagem contendo uma sequência alfanumérica para que seja transcrita em uma caixa de texto normal. Depois que os robôs se tornaram capazes de “ler” imagens, os CAPTCHAs tem se adequado, tornando-se um pouco mais complexos, desde colocando imagens borradas (que dificultam até a leitura humana. #FAIL) até escrevendo desafios, como os do Registro.BR. Exemplos: Quais os caracteres em amarelo? Quais dos caracteres não são consoantes? Quais dos caracteres são números? Infelizmente, no caso do Registro.br, existe um link direto para consultas sem passar pelo CAPTCHA! #FAIL2.

A lógica do CAPTCHA

Ao acessar uma página de formulário, qualquer visitante (um ser humano ou um robô indexador) pode preenchê-lo e enviar os dados para o destinatário. Como a maioria desses formulários é de contato por e-mail, isso acaba sendo mais uma porta de entrada para SPAM, potencializado pelo poder computacional, através dos robôs.

Quando existe um CAPTCHA no formulário, as chances dessa mensagem SPAM ser barrada é muito grande e depende da complexidade do mecanismo. O robô preenche o campo necessário do CAPTCHA e o sistema checa se esse valor preenchido é o correto, o que ele disponibilizou para consulta. Isso é controlado por sessão ou cookies criptografados.

Dependendo do CAPTCHA, ele pode exibir uma mensagem de erro ou simplesmente ignorar a mensagem, evitando que lixo seja encaminhado por e-mail ou gravado em um banco de dados de suporte, por exemplo.

O problema do CAPTCHA que é resolvido pelo CAPTCHA REVERSO

Cada vez que os robôs melhoram a sua tecnologia e conseguem identificar as imagens, a solução mais imediata é detonar um pouco mais a visualização dessas imagens, pra dificultar a leitura por uma máquina. O grande problema é que, muitas vezes, nem nós, os humanos, conseguimos decifrar os caracteres que nos mostram e ficamos impedidos de utilizar aquele sistema ou formulário.

A utilização de um CAPTCHA REVERSO é perfeita para esses casos, pois além de ser limpa e não intrusiva, não penaliza os humanos, só as máquinas.

Com essa solução, nós inserimos um campo texto qualquer, com um nome genérico e escondemos ele via JavaScript ou CSS. Como a grande maioria dos usuários possui essa tecnologia disponí­vel e habilitada e os robôs não, somente os robôs verão e preencherão o campo genérico. No lado do servidor, como sabemos que o campo não será exibido e preenchido por humanos, ignoramos toda e qualquer submissão que venha com tal campo não-nulo.

Qual o problema que isso pode gerar? Aqueles usuários que por algum motivo não utilizam um navegador que suporte CSS ou JavaScript (acredite, são poucos, mas existem) irão ver o campo. Como resolver? Colocar junto ao mesmo, um texto dizendo que o campo abaixo não deve ser preenchido.

Existem vários programinhas prontos, extensões de linguagens, etc., que geram o mecanismo automaticamente, mas não encontrei um plugin de WordPress para isso. Se você conhece, por favor, indique aqui nos comentários. Ou quem sabe você não esteja disposto a fazer um?

Profundo conhecedor de diversas linguagens de programação, Élcio – um dos criadores do Tableless, junto com o Diego Eis – mostrou ser bastante articulado e um palestrante que prende a atenção do público. Sempre bem humorado, fez uma comparação interessante entre o “velho” modo de se fazer sites e o “novo” e melhorado modo, além da conhecida – entre nós – rivalidade entre a equipe de programação e de criação, mostrando que programadores e designers têm muito mais semelhanças que diferenças.

As diferenças são sempre evidenciadas, como a subjetividade do design versus a objetividade da programação; o questionamento de um versus a solução de outro; a elaboração de “briefing” versus o “questionário de levantamento de caracterí­sticas (de um sistema); a “carroceria” versus o “motor”. O que muitos não consideram e que foi citado por Élcio, relembrando uma declaração do Steve Jobs, é que design não é só aparência, é funcionalidade. Se seu design não é “usável“, ele simplesmente não deu certo.

Atrás da funcionalidade, em se tratando de sites, os desenvolvedores e designers têm estreitado as relações e trabalhado as diferenças para a adoção de um novo modelo de criação que facilite a vida de todos, satisfaça o cliente e possibilite uma manutenção sem dor, afinal, as três leis básicas do desenvolvimento são apenas duas: o cliente vai mudar de idéia. Assim, quanto menos doloroso for o processo de mudança, melhor.

Não há como evitar isso, mas podemos minorar os impactos

Uma das formas de se diminuir os transtornos causados pelas mudanças no [BP:Livros]escopo do projeto|gerenciamento projeto[/BP] é substituir o modelo de desenvolvimento velho. Se você segue um fluxograma onde: a) primeiro você elabora o projeto, dando ênfase a todos os detalhes possí­veis e imagináveis, interagindo com o cliente e não economizando em reuniões; b) cria o html antes, bem escrito e documentado, que servirá de base para os desiners e desenvolvedores; c) trabalha com a equipe de layout e desenvolvimento em paralelo, as chances de haver um erro diminuem consideravelmente e os impactos de correções necessárias também são muito reduzidas. Trabalhos distintos, ambientes distintos. É o fim da sobreposição de arquivos no servidor de testes ou de produção.

Uma segunda forma é alterar o fluxo do trabalho. No modelo mais aplicado no mercado, desenvolvemos o projeto e damos um prazo para concluir, testar e apresentar. Normalmente, só após o site estar completamente pronto, o cliente solicita alterações – que podem ser simples como alterar a cor de uma letra ou complexas como “não sei bem o que é, mas está faltando alguma coisa”.

No modelo “[BP:Livros]Desenvolvimento ígil[/BP]“, apresentado pelo Élcio, a equipe estipula prazos pequenos para entregar funcionalidades e todas são testadas e homologadas pelo cliente em um tempo curto (Figura abaixo). Dessa forma, você pode fazer pequenas alterações no escopo do projeto, otimizar telas, adicionar recursos que não foram pensados antes e testar no ambiente do cliente, como o seu público-alvo, seus usuários vão se relacionar com seu sistema/site. Aos poucos, em doses homeopáticas, o cliente vai acompanhando a evolução do trabalho, adota uma postura muito mais participativa e consegue ser atendido no prazo com um produto que ele próprio ajudou a desenvolver.

Nessa palestra eu fui um dos blogueiros convidados e pude acompanhar bem de perto – na lateral do palco – além de fazer a primeira pergunta ao Élcio, que não poderia deixar de ser: como convencer o mercado a investir em padrões web, usabilidade, acessibilidade, se muitas vezes o cliente quer marcar presença na Internet, mas não acredita ou não valoriza esse meio? A resposta clara e direta foi a que eu esperava: use, faça, invista. Se você faz seu trabalho da forma correta e continua praticando os mesmos prazos e preços que pratica normalmente, muito em breve o mercado estará utilizando padrões sem ao menos saber – pois o seu cliente não precisa decidir qual tecnologia você utilizará em seu trabalho.

Saiba mais sobre o InterCon 2007

• Site do evento;
• Artigos em blogs;
• Fotos no Flickr;
• Notas no Twitter.

[tags]Evento, Simplicidade, Desenvolvimento,Design, Web, InterCon2007[/tags]

[BL:Livros]Usabilidade, Acessibilidade, Design, Programação, Padrões Web[/BL]

Até hoje eu nunca tive que desaconselhar algum cliente quanto a criação de seu site na web. Mas já reduzi projetos ou aumentei, de acordo com o perfil do seu negócio. Nem toda empresa precisa de uma loja online, da mesma forma que para algumas empresas um site institucional joga contra ao contrário de ajudar. No desespero de estar online, as empresas não avaliam o formato de seu investimento na web e desperdiçam uma grande chance de incrementar seu negócio.

Tive um cliente que precisava, eu desenvolvi e implementei uma loja online. Vitrine virtual, sistema de pagamento online, tudo certinho. Nunca vendeu nada, sabe porque? O site não foi atualizado. Não havia pessoal preparado para dar manutenção ao site, inserir produtos, acompanhar pedidos, ao passo que não havia mais dinheiro para investir na contratação dessa pessoa ou serviço terceirizado. Por falta de planejamento o site nunca chegou a ser utilizado. Pensar nisso me angustia, eu gosto de ver meu trabalho ser bem utilizado, gerar retorno, etc. Mas serviu-me de aprendizado.

O vendedor de cachorro-quente precisa de um site?

A resposta mais sensata é sempre: depende. Aqui em Londrina o hot-dog é chamado de “prensado”, porque eles colocam na chapa após a montagem. Existem alguns vendedores de hot-dog aqui que são grandes, possuem mais de um ponto de venda, com garçons, com painel eletrônico para anunciar o número do pedido. E se você pensou numa estrutura McDonalds, se engana. Estão mais para trailers estacionados. Esse cliente precisa de um site? Não. Ele é conhecido em Londrina e não tem pretensões de expandir seu negócio, não tem estrutura para atender um serviço de web-delivery e criar um site institucional para ele é jogar contra.

A loja de roupas de minha tia precisa de um site?

Há pouco mais de 5 anos eu achava que sim. Minha tia possui uma loja num shopping de bairro em Salvador, um relacionamento com seus clientes no ní­vel pessoal (as clientes possuem o número do telefone de casa e do celular) e trabalha com estrutura familiar. Quase ninguém compra roupa pela Internet (salvo camisetas). As pessoas querem vestir, experimentar com um sapato, um cinto, principalmente mulheres. Um site institucional seria jogar contra, não existe estrutura de atendimento pela web. Minha tia precisa de um site?

Assim como os exemplos acima, em nossa estrada vamos encontrar diversos clientes que irão nos procurar para ter sua presença na Internet. Nosso lado profissional precisa de trabalho, obviamente, precisamos pagar o aluguel e a Internet nossa de cada dia. Mas nosso profissional também é responsável por orientar o cliente no caminho certo, pois um projeto fracassado vai gerar frustração e esse cliente vai culpá-lo por não tê-lo alertado. Um cliente insatisfeito lhe fará propaganda negativa e não lhe procurará mais. E pior, ele pode encontrar um outro profissional para corrigir suas falhas, mesmo que pequenas, mí­nimas, e você ainda ficará com fama de incompetente.

Um caso de sucesso ocorre quando conseguimos aliar o bom senso í  necessidade do cliente, mesmo que contrariando-o em algum ponto, mas mostrando-o o caminho das pedras. Afinal, você é o especialista em Internet e ele não o procuraria se soubesse exatamente o que fazer. Ele sabe o que quer, mas você pode saber quando é uma boa idéia ou uma completa barca furada. E se o cliente insistir na barca, siga meu conselho e pule fora antes que comece a fazer água.

–
Este artigo está participando da maratona Blogando24h.
Comente. Você pode ganhar uma camiseta!

[tags]Blogando24h, Internet, Web, Desenvolvimento, Planejamento[/tags]

Dada sua flexibilidade, atualizações constantes e uma imensa comunidade para dar suporte e criar ferramentas para ampliar suas capacidades, o WP se tornou um CMS viável e poderoso, principalmente para sites pequenos e portais verticais de pequeno porte.

Dicas úteis sobre a utilização do WP como CMS

Defina corretamente a estrutura do seu site antes de qualquer coisa. Pense em conjunto com o WordPress, í  medida que explora suas funcionalidades e plugins existentes na Internet. Uma boa categorização dos elementos facilitará bastante a implementação e manutenção do site posteriormente.

Use páginas para o conteúdo estático. Todo site institucional possui conteúdos que não se modificam com o tempo (pequenas alterações não contam) e os mecanismos de busca indexarão muito melhor seu conteúdo se ele for uma página.

Utilize URLs textuais. Habilite a opção do WP para utilizar os nomes das páginas e artigos como endereço da mesma. Muito mais fácil para identificar nos tí­tulos das páginas e com uma indexação também muito melhor. Lembre-se nesse passo da relevância do tí­tulo de sua página com relação ao conteúdo, links e menu.

Explore ao máximo as caracterí­sticas dos plugins instalados. Use ferramentas que otimizem os comentários, permita trackbacks, instale plugins que controlem os formulários de contato e apresentem galerias de imagens. Quanto mais recursos você tiver disponí­vel – e utilizar, obviamente – mais rápida e fácil se torna a manutenção, mais interativo o site se mostra.

Deixe claro que um blog é um blog. Se você previu uma seção para artigos, deixe claro que isso é um conteúdo dinâmico, atualizado constantemente e possibilite comentários e assinatura de feeds. Separe no seu template o arquivo page.php do arquivo index.php e single.php. Cada um tem seu papel e deve ser utilizado corretamente. Não deixe que uma página se pareça com um post e vice-versa. Se a empresa pretende manter um blog, insista com o cliente em usar o termo blog e não artigos ou notí­cias.

Identifique as seções e use um sidebar personalizado. Em cada página você pode ter conteúdos diferentes de acordo com a seção em que o usuário está acessando, porém o arquivo sidebar.php será o mesmo em todas as situações. Identifique com as Conditional Tags e exiba conteúdo de acordo.

Caso de estudo: CMB Consultoria

[tags]Blogando24h, WordPress, Desenvolvimento, CMS, Padrões Web[/tags]

Clique na imagem abaixo e participe você também.

Solução elegante

Existem algumas formas de fazer isso e eu vou dar as dicas de duas delas aqui.A primeira e mais cheia de estilo é utilizando CSS2, com seletor de atributos (condicionais). Dessa forma você pode fazer como o Henrique, no Revolução Etc que identifica links externos com o atributo rel. Dessa forma:

[a rel="external" xhref="http://siteexterno.com"]Clique[/a]

E na folha de estilos ele define o seguinte:

* [rel~=external] {
background:url(“external.gif”) right 2px no-repeat;
padding-right:13px;
}

O seletor de atributo com a condicional ~= faz uma comparação lógica, se o elemento contiver o parâmetro rel=”external”, atribua o estilo informado que no caso especifica o í­cone como um background í  direita e um padding para não o sobrepor com texto.

Você também pode fazer a condicional direto no parâmetro href, da seguinte maneira:

a[href ^=”http://”] {
background:url(“external.gif”) right 2px no-repeat;
padding-right:13px;
}

Dessa forma toda tag A que contiver o parâmetro HREF iniciado (^=) com http:// será considerado um link externo, independente de possuir ou não o parâmetro rel=”external”.

Solução limpa, elegante e funcional em quase todos os navegadores modernos. No IE6 não funciona. E como o famigerado browser da MS ainda é maioria no mercado, a segunda dica vai funcionar em qualquer navegador.

Utilizando classes CSS para identificar links externos

Ok, você já deve ter deduzido pelo próprio subtí­tulo e baseando-se na solução inicial, percebeu que o código CSS ficaria dessa maneira:

a.external {
background:url(“external.gif”) right 2px no-repeat;
padding-right:13px;
}

Simples e eficiente. Qualquer link externo será marcado com o parâmetro class=”external” e pronto.

Para não editar manualmente todos os links de seu blog, se você usa o WordPress como gerenciador, eu sugiro o plugin Identify External Links com umas pequenas alterações para dar um ‘gás’.

Primeiro, edite-o para mudar o nome da classe de “extlink” para “external” caso queira utilizar o css de exemplo acima. Caso contrário, basta definir sua classe com nome de “extlink”.

Segundo. Edite as linhas 32 e 34 para efetuar as seguintes alterações:

32: Altere o comando que captura uma url, identificando se é um link interno ou externo para o seguinte:

preg_match(“/^(http:|https:|ftp:|ftps:)?(?:\/\/)?([^\/]+)/i”, $uri, $matches);

A linha original só captura links iniciados em http://, excluindo da regras os links seguros e de ftp. A linha acima é uma expressão regular, muito útil quando se precisa identificar padrões, formatos, separar partes de um todo, etc. Depois faço um artigo só sobre isso.

34: Altere o comando que captura o domí­nio, para fazê-lo entender os domí­nios brasileiros e subdominios:

preg_match(“/[^\.\/]+(?:\.[^\.\/]+){0,2}$/”, $host, $matches);

A função original deixava de fora os “.com.br” e tantos outros que possuem ní­vel primário duplo.

Faça o upload e ative seu plugin. Se você já tiver definido o CSS em sua folha de estilos, começará a ver í­cones enchendo seus artigos sem precisar alterar nenhum manualmente.

É isso! Bom proveito.