Acorda pra Web!

Tecnologia que vai mudar nossas vidas, depois do café.

Arquivo de March, 2007

O Fórum Tableless Morreu

Friday, March 23rd, 2007

Fóruns são coisas complicadas. Requerem moderação ativa e constante, e isso demanda tempo.

O Tableless sempre manteve o Fórum Tableless para solucionar dúvidas e fazer os visitantes colaborarem uns com os outros. No começo funcionou muito bem, havia sempre dúvidas e pessoas que as respondiam, mas a moderação nunca foi muito eficiente.

O caos se instalou quando os spam-bots encontraram o Fórum, agora a maioria das mensagens postadas por lá é spam, que simplesmente não é removido.

É impossível pra um moderador controlar esse tipo de caos, deveriam haver vários moderadores, mas também é difícil escolher um grupo de pessoas pra controlar o fórum.

Esse problema é muito similar ao problema que gerou a Wikipedia, e no final eles encontraram uma maneira de todo mundo colaborar e moderar e a paz se estabeleceu.

Há um tempo atrás surgiu a WaSPedia, um wiki sobre Padrões da Web no formato de enciclopédia. Ela ainda está ativa e todos que tiverem dúvidas sobre Padrões da Web podem deixar sua questão por lá.

Tem umas páginas legais por lá já e também um pequeno tutorial pra iniciantes.

Está aí minha dica ;) A WaSPedia precisa de colaboradores!

URI não é só nome de Paranormal

Thursday, March 22nd, 2007

Esse post não é sobre Uri Geller, que se diz paranormal! Vou falar sobre uma das bases da web atual e da web semântica: URIs, ou Universal Resource Identifiers. (em português Identificadores Universais de Recurso).

Pilar da Internet e da Web Semântica

Qual foi a primeira coisa que você fez na internet? provavelmente, ela envolvia uma URI. Exemplos de URIs são:

  • http://www.google.com
  • http://www.uol.com.br
  • billg@microsoft.com
  • ftp://gwmnet.com.br

Um Identificador Universal de Recurso dentro da internet é um endereço que associa um recurso a um nome específico. É como um campo id em uma base de dados, só que serve pra internet inteira.

A maioria das URIs que conhecemos, são URLs: Universal Resouce Locators (em português: Localizadores Universais de Recurso) que além de identificar, indicam a localização de um recurso.

Uma URI nem sempre indica a localização de um recurso, ela pode simplesmente identificá-lo. A URI http://www.w3.org/2001/vcard-rdf/3.0/#fn por exemplo identifica a propriedade First Name (Primeiro Nome) dentro do vocabulário vCard. Se você acessá-la, não verá conteúdo, porque ela é uma URI a nível operacional, utilizada apenas para identificar a propriedade universalmente na internet.

Identificar um recurso, propriedade, pessoa, objeto ou qualquer coisa universalmente dentro da internet permite que essa coisa seja citada, descrita ou (se você permitir) acessada por qualquer pessoa. Esse princípio é um dos pilares da web semântica.

Tornando URIs práticas de usar

Com o objetivo de não ficar escrevendo trambolhos gigantes como http://www.w3.org/2001/vcard-rdf/3.0/#fn o W3C publicou a maneira com a qual devemos prefixar as URIs: usando namespaces.

Todas as URIs de propriedade do conjunto vCard, que descrevem informações pessoais, tem em comum a parte http://www.w3.org/2001/vcard-rdf/3.0/#, diferenciando somente o final após o “#”.

Declarando o prefixo http://www.w3.org/2001/vcard-rdf/3.0/# como vcard podemos nos referir à propriedade First Name, citada lá em cima, simplesmente assim: vcard:fn. Todas as demais propriedades ficam acessíveis pelo namespace: vcard:adr, vcard:tel e por aí vai.

Isso torna as URIs tão fáceis de usar quanto um nome qualquer. Você pode por exemplo chamar seu campo no banco de dados de vcard_fn ao invés de nome, vcard_tel ao invés de telefone e por aí vai. Isso é estar um passo adiante dos outros no caminho até a web semântica.

Em breve mostro pra vocês como criar uma URI pra você, com dados sobre você e como participar de uma rede social quase secreta.

Flash não é um mau garoto

Wednesday, March 21st, 2007

Sem dúvida o Flash hoje nos dá possibilidades que o AJAX nem sonha em ter. Arrisco a dizer que a performance do Flash é melhor que a do AJAX em 100% dos casos.

O grande problema do Flash é o mesmo problema do HTML: é muito fácil usar a tecnologia de maneira errada.

Existem sites em Flash que nem mostram o famoso preloader de tão rápidos. Meu exemplo predileto é o site do Paul Neave, é rápido, funciona sem o Flash Player e é bonito, muito bonito.

O Flash, assim como o JavaScript, não precisa ser obstrutivo. Você pode fazer um site rodar o mesmo conteúdo se o usuário tiver ou não Flash Player instalado.

Se você usa alguma linguagem server-side, fica ainda mais fácil, porque você pode gerar o conteúdo tanto em XHTML direto pra página como em XML, pro Flash ler. Teoricamente, se o seu XHTML é válido, você pode puxá-lo diretamente no Flash :) (nunca testei isso, algum desenvolvedor Flash poderia me dizer se dá mesmo?)

No fundo, você pode eliminar completamente a parte de desenvolvimento em Flash com desenhos e criar tudo via Code Animation, programando em ActionScript o site inteiro sem desenhar nadinha no programa. E se você for pensar o parser do Flash é constante, não tem variações de navegador, tem bugs corrigidos muito rapidamente e está instalado em boa parte das máquinas. É melhor que JavaScript!

Por que será que ninguém desenvolve em Flash então? Eu sei, é porque a web é feita de dois tipos de pessoas: amantes de design que não sabem programar muito bem e amantes de programação que tem preconceito de ferramentas de design.

O Framework do Futuro - Como iremos programar?

Tuesday, March 20th, 2007

O Problema dos frameworks de hoje em dia é que eles não passam de novas linguagens em desenvolvimento. Começam com algo simples e depois ganham centenas de métodos, classes e coisóides diferentes perdendo a simplicidade. PHP começou assim, era um tipo de framework pra Perl, olha como ficou! A diferença é que eu já conheço o PHP.

O que falta nos frameworks é inteligência. Milhões de programadores já fizeram tanto código parecido e se formos usar as linguagens atuais, continuaremos a repetir códigos dos outros. Não basta o don’t repeat yourself (não repita a si mesmo), temos que ter uma linguagem de programação don’t repeat anybody (não repita qualquer pessoa).

Fora dessa coisa utópica de computadores inteligentes, algumas coisas simples que seriam possível em um sistema hoje em dia são:

  • Criar formulários para relações entre tabelas automaticamente (Adicionar produto ao carrinho, adicionar amigo na lista, adicionar contato, adicionar comentário ao post) baseado em Chaves Estrangeiras, sem nenhuma linha de código.
  • Definir foco da página atual automaticamente. (Essa página é sobre produtos? Sobre contato?)
  • Saber como formatar dados, AKA morte da escrita do HTML. (Como exibir um produto? Como exibir informações sobre uma pessoa? Como exibir informações sobre um mapa?)

Essas características chave e outras mais tornarão o desenvolvimento no futuro muito simples, praticamente na velocidade do pensamento. Programar em um framework assim será mais ou menos como dizer “Loja Virtual com produtos divididos em categorias que podem ser comprados por clientes cadastrados” e esperar 2 segundos para o programa gerar tudo.

E vocês, o que imaginam do futuro da programação?

Apollo - Web independente de navegador

Monday, March 19th, 2007

A Adobe lançou hoje de madrugada a versão pública do Apollo, um conjunto de bibliotecas multi-sistema-operacional e permite desenvolvedores criarem programas pra web que rodam sem um navegador, usando HTML, JavaScript e Flash.

Entre os recursos da API do Apollo, estão serviços como SOAP, XML-RPC, manuseio de janelas e suas propriedades, possibilidade de criar programas que rodam em background.

Além do mais, as aplicações Apollo fornecem coisas que os navegadores atualmente não podem (ou não devem) fazer. É possível criar instaladores, atalhos, controlar a área de transferência (clipboard) e executar outros programas na máquina, entre outras coisas.

O que roda a parte web é o engine KHTML-WebKit, coração do Konqueror e do Safari.

Para distribuir programas em Apollo, a mesma estratégia dos executáveis Flash será adotada, ou seja, o programa pode incluir o runtime do Apollo e nenhum plugin, biblioteca ou requerimento é necessário. Por enquanto isso ainda não está disponível.

RDF - A Tecnologia que vai indexar a Internet

Saturday, March 17th, 2007

Agora que já sabemos o que é e qual é o objetivo da Web Semântica, podemos começar a falar do coração desse movimento todo, o RDF.

RDF significa Resource Description Framework, que em português é algo como Framework de Descrição de Recursos.

Tudo que pode ser descrito na internet, é um recurso. A internet é como uma gigante biblioteca sem ordem alguma. Não temos um banco de dados sobre a internet organizado listando o conteúdo, seus autores, data de criação, preços de produtos, localização de lojas e diversas outras características. Isso se chama metainformação, ou seja, informação sobre informação.

Com o RDF, a proposta não é centralizar essa metainformação sobre a internet em um único banco, mas criar uma maneira com a qual cada página, cada recurso possa criar sua própria metainformação e torná-la disponível para quem precisar.

O RDF não é uma linguagem, embora faça uso de algumas linguagens pra se expressar. As mais comuns são o XML (formando RDF/XML), e o TURTLE (uma linguagem feita para expressar RDF de maneira simples).

No post anterior sobre Web Semântica mostrei um exemplo de RDF expresso em RDF/XML, vou mostrá-lo agora usando TURTLE:

TURTLE:
@prefix vcard: <http://www.w3.org/2001/vcard-rdf/3.0/#>
<http://www.exemplo.com/clientes/1> vcard:fn> "José"
<http://www.exemplo.com/clientes/1> vcard:adr> "Av. Paulista, 1020"
<http://www.exemplo.com/clientes/1> vcard:tel> "3333-4444"
<http://www.exemplo.com/clientes/2> vcard:fn> "João"
<http://www.exemplo.com/clientes/2> <vcard:adr> "Av. Brigadeiro Faria Lima"
<http://www.exemplo.com/clientes/2> <vcard:tel> "3333-5555"

E ainda podemos simplificar as URIs da mesma ainda mais, prefixando-as:

TURTLE:
@prefix vcard: <http://www.w3.org/2001/vcard-rdf/3.0/#>
@prefix clientes: <http://www.exemplo.com/clientes/>
clientes:1 vcard:fn> "José"
clientes:1 vcard:adr> "Av. Paulista, 1020"
clientes:1 vcard:tel> "3333-4444"
clientes:2 vcard:fn> "João"
clientes:2 <vcard:adr> "Av. Brigadeiro Faria Lima"
clientes:2 <vcard:tel> "3333-5555"

Mais pra frente eu coloco o que são URIs, como usar prefixos e todo o conceito por cima disso.

Tabela de compatibilidade CSS

Friday, March 16th, 2007

Preparei uma tradução da tabela de compatibilidade CSS feita pelo Peter-Paul Koch do QuirksMode. Lá você pode encontrar os seletores, declarações e a compatibilidade dos navegadores com os mesmos. Espero que ajude alguém :)

Semântica no HTML - Preformatação

Thursday, March 15th, 2007

No último post sobre Semântica no HTML o Pedro sugeriu nos comentários a conhecida técnica de usar a tag <pre> dentro da tag <code> para manter a identação e as linhas.

É uma alternativa tentadora! Infelizmente ainda não é a solução ideal pra exibir código.

A tag <pre> é uma tag muito controversa. Ela deve ser usada somente quando o conteúdo depende dos espaços e quebras de linha para existir semanticamente.

Onde Não Usar <pre>

Naturalmente, todo código tem essa característica de manter identação original e quebras de linha, portanto a tag <pre> não adiciona semântica alguma nesse caso. Comparando, a técnica <code><pre></pre></code> seria como usar um <strong><b></b></strong>, é algo redundante.

Ainda nos faltam alternativas pra identificar cada linha do código. Quando falamos em código é comum ouvir “tal código tem tantas linhas”, “veja a linha tal de tal código” e por aí vai. No XHTML2 existe a tag <l> com esse propósito.

Onde Usar <pre>

Um exemplo simples são letras de música. Versos não são exatamente parágrafos e não existe uma tag específica para versos. Isso se aplica em poesia também. Ao invés de colocar cada verso em um <p> ou usar vários <br /> você coloca a letra de música dentro de um <pre>, para preservar as quebras de linha, porque elas representam a metragem da música/poesia.

Semântica no HTML - Blocos de Código

Wednesday, March 14th, 2007

Essa semana no Tableless o post foi sobre semântica no HTML, falando sobre listas de ações.

Dos problemas com semântica, sem dúvida, listas é um dos menos preocupantes! Algumas brechinhas no HTML deixam a desejar em alguns aspectos e confundem quem está formatando o texto.

Um excelente exemplo dessa confusão é a tag <code>. Ela foi criada para exibir pequenos trechos de código, como esse no qual acabei de colocar a tag. Como podemos ver na especificação do HTML4 (e no XHTML também) ela é um elemento inline por natureza.

A dor de cabeça começa quando precisamos exibir blocos de código. Coloca em um só <code>? Coloca cada linha do bloco em um <code>? Se é um por linha o que coloco pra definir o bloco?

A alternativa mais simples é utilizar somente um <code> e quebrar as linhas de código com <br />. Isso mantém o código em uma linha só, como prometido na especificação, e quebra essa linha em várias para nos dar ilusão de múltiplas. Não é uma aberração semântica, mas também não é o correto:

HTML
<code>
SELECT nome, email, telefone<br />
FROM tabela<br />
WHERE nome = "João"<br />
</code>

A alternativa mais próxima do correto seria algo assim:

HTML
<code>SELECT nome, email, telefone</code>
<code>FROM tabela</code>
<code>WHERE nome = "João"</code>

Adicionalmente, você pode cobrir todas as linhas de código com um elemento só, usando um elemento<blockquote>, porque de fato exibir um bloco de código é citar alguém, ou apenas usando um <p class="code">.

No XHTML2 já pensaram nisso e criaram o <blockcode>, no Web Applications 1.0 (um tipo de HTML5) ainda não mostraram solução para esse problema.

E vocês? como exibem blocos de código em uma página?

Comunidade Tableless

Tuesday, March 13th, 2007

Uma iniciativa interessante do Tableless para divulgar os padrões da web no Brasil é a Comunidade Tableless, um serviço que mixa feeds de vários blogs e sites relacionados em um só.

Vale a pena dar uma olhada, conheci blogs interessantes por lá.