Acorda pra Web!

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

Cuidado com o XML!

Sunday, April 29th, 2007

O XML é aquele tipo de linguagem que pode ser usada pra tudo. Ele descreve, transporta e armazena dados quaisquer, em qualquer formato. Mas nem sempre devemos usar ele em sua maneira pura. Vou explicar:

Imagine que o XML é o nosso alfabeto (de a a z), com o nosso alfabeto podemos escrever em diversas línguas, como o inglês, português, espanhol, galego, latim e tantas outras. As letras por si só não tem significado algum, o que tem significado são as definições que cada linguagem possui. No XML também é assim, o XML em si não é nada além de uma ferramenta muito boa para construir linguagens (assim como um alfabeto).

O surgimento do XML aconteceu justamente por isso: era necessário estabelecer um “alfabeto” para descrever vários tipos de dados diferentes. Existiam muitas linguagens específicas para cada aplicação, mas elas não conversavam entre si por não usarem a mesma base (o mesmo “alfabeto”).

Tendo um mesmo “alfabeto”, o próximo problema é fazer com que as “línguas” funcionem. Não podemos por exemplo criar duas ou três linguagens pra definir equações químicas, deve haver apenas uma linguagem pra isso.

Se você usa o XML para si mesmo, por exemplo para montar uma galeria de fotos em Flash, você não estará compartilhando esse documento XML com ninguém, será apenas uma interação interna da aplicação, portanto não se faz necessário o uso de uma linguagem universal porque sua aplicação não conversará com ninguém.

Isso é bem comum, no dia-a-dia estamos sempre criando novas pequenas línguas quando trabalhamos com XML. O importante é sempre ter cuidado de usar uma linguagem mundialmente “falada” se quisermos que nossa aplicação converse com outras por aí.

Pesquisar se já existe algum tipo de linguagem XML para o que você quer é algo que pode poupar seu tempo. Criar novas linguagens em XML no começo pode até ser divertido, mas depois acaba se tornando um porre.

Na Web Semântica, existem uma porção de linguagens XML para diversos fins, eis algumas delas:

RDF/XML
Descreve metainformação no formato XML. É uma das linguagens pelas quais o RDF pode se manifestar.
RDF-S
Baseada no RDF, serve para criação de vocabulários específicos de metainformação.
OWL
Significa “coruja” em inglês, é a linguagem para criação de ontologias, também baseada em RDF.
SKOS
Linguagem para criação de tesauros (dicionários de sinônimos e palavras similares)

Por enquanto eu só falei do RDF mesmo, mas pretendo falar sobre RDF-S, OWL e SKOS em breve.

Como você usa o XML do dia-a-dia? Tem algum exemplo?

Wordpress: amor e ódio

Sunday, April 22nd, 2007

Esse blog é minha primeira experiência com WordPress. À princípio eu odiei pela falta de semântica no HTML e dificuldade pra editar os templates.

Visto a camisa, mas tenho um pouco de vergonhaEu gosto muito de ter uma visão geral do template pra montar o CSS e o WordPress me entrega ele todo em pedacinhos. Pra construir pela primeira vez até que não dói tanto, mas a manutenção é um sofrimento só. Pelo menos já acostumei com isso.

Ele também não é muito rápido, o desenho do banco de dados em MySQL é meio estranho e confuso, não parece otimizado. Inclusive já pensei em adotar o LightPress (uma modificação do WordPress), só voltei atrás pela falta de suporte à plugins.

O que mais gosto no WordPress inclusive é a diversidade de plugins. É perfeitamente possível montar praticamente qualquer tipo de página com o WordPress, desde um fórum até uma loja virtual.

Ele até deixa você editar os templates, estilos e tudo mais, mas não incentiva que você o faça. As páginas ficam todas muito parecidas e mal-acabadas. Admiro quem consiga deixar um WordPress com visual bonito e livre do “padrão” de qualquer outro tema.

Customizar o WordPress é difícil. Eu gostaria até de algumas dicas, alguém tem?

Enquanto isso eu fico aqui, aproveitando a versatilidade dele, aguardando pelo CMS ideal (que talvez seja o SemSol).

Web Semântica Nascendo - Projeto SemSol recebe patrocínio

Tuesday, April 17th, 2007

SemSolO SemSol é um simples framework para construção de aplicações semânticas, algumas características dele são:

  • Banco de dados armazena diretamente RDF, através de uma biblioteca desenvolvida pelo Benjamin Nowack
  • Os dados são formatados através de uma síntaxe parecida com a de um wiki, que inclusive é extensível (você poderá criar módulos pra ela)
  • Produz código nos padrões da web e indo adiante, produz código em Microformatos e eRDF.
  • Suporte nativo a AJAX.
  • Constrói formulários automaticamente e já embute os sistemas de dados RDF.

Ainda não existe versão pública do sistema, que será gratuito e tem previsão pra lançamento esse ano. Eu particularmente não vejo a hora de botar as mãos nele, já que não acho nenhum framework que preste.

O Anúncio do patrocínio traz algumas notícias:

  • Semsol.com virará uma prestadora de serviços, de “Semantic Solutions” (Soluções Semânticas).
  • O projeto do framework será movido para Semsol.org e provavelmente receberá um nome como “SemSol Suite”.
  • O coração do SemSol, a biblioteca ARC, será totalmente reescrita para a biblioteca ARC2.

Atualmente, 90% das aplicações Web2.0 não são complacentes aos padrões da web, o que é um grande empecílio para a difusão da Web Semântica. Eu considero o surgimento dessa iniciativa, embora bem silencioso, bastante importante porque é uma das primeiras iniciativas da Web Semântica feita com um bom propósito de difundir tecnologia e não somente ganhar dinheiro.

Semântica no HTML - Logomarca não é só texto!

Friday, April 13th, 2007

É bem comum ver sites colocando a logomarca marca através do CSS no layout, só que a prática não é muito correta.

Não devemos confundir também a palavra logomarca com logotipo.

Devemos entender direito o que significam alguns elementos que compõe uma marca:

  • Logomarca é uma imagem que identifica uma marca, no caso aqui do blog é aquele relógio em perspectiva no topo.
  • Marca é a representação de uma entidade, seja pelo logotipo, símbolo, uma frase ou qualquer elemento de identificação
  • Logotipo é um texto utilizado para compor o nome da empresa.
  • Símbolo é um elemento que ajuda a identificar uma determinada Marca.

Geralmente a logomarca (o símbolo) carrega um significado consigo, como o relógio aqui do Acorda pra Web tem correlação com “despertar”, “acordar”. Um outro exemplo seria o símbolo do MeioBit que ilustra um meio bit (que eu acho excelente).

Uma prática muito comum é criar o HTML e colocar o nome do site usando a marcação <h1>Nome do Site</h1> e depois escondendo o texto e colocando uma imagem de fundo através do CSS, com a técnica de Image Replacement.

O fato é que quem desabilitar o CSS na página, não verá a sua logomarca (o seu símbolo), assim como ele pode não aparecer em alguns dispositivos portáteis.

Colocar a logomarca o símbolo através da tag <img src="logo.jpg" title="Nome do Site" alt="Nome do Site"> é uma maneira prática, correta e segura de sempre garantir que a logomarca (o símbolo) seja exibido e marcado corretamente.

Se você nem liga para quem habilita ou não o CSS em suas páginas ou não tem foco em usuários de portáteis, tanto faz, mas deixo aqui minha pequena dica, que é só um complemento dessa dica aqui dada pelo Elcio.

Atualização: Fui corrigido por diversos blogueiros sobre o uso da palavra “logomarca”, tentei consertar na medida do possível! :) Meu post foi sobre semântica no HTML e não sobre termos de mercado, termos esses que confesso: desconheço totalmente. Agradeço pelos esclarecimentos e comentários!

Quel tal não criar mais HTML?

Wednesday, April 11th, 2007

Quantas vezes você não escreveu algo como <div class="header"> ou <div class="footer">?

O HTML nos fornece uma linguagem para definir aspectos bem raíz da formatação, mas ainda falta padronização na forma com a qual descrevemos elementos comuns do dia-a-dia.

Se cada um “inventasse” seu próprio HTML, talvez eu usasse <forte> ao invés de <strong> e <destaque> ao invés de <em>. É basicamente isso que estamos fazendo ao criar um <div class="conteudo"> ou <div class="post">.

Origami ModularCoisas como logotipo, nome do site, navegação, busca interna e conteúdo são elementos comuns entre muitas páginas da internet, embora cada autor diferente use uma maneira diferente de declarar esses elementos.

Quando digo que não devemos criar mais HTML, na verdade estou dizendo que já passou da hora de definirmos um padrão pra essas coisas tão comuns. Pra variar, teremos que radicalizar.

É muito comum ver sites com um <div id="sidebar"> pra agrupar um determinado conteúdo. Isso é errado, aquele conteúdo nem sempre poderá ser uma barra ao lado. Assim como headers nem sempre ficarão como cabeçalho e o mesmo para footers. Eu poderia definir um logotipo dentro do header e no dia seguinte querer colocar o mesmo no fim da página. E aí como fica?

Eu particularmente gosto da estrutura proposta pelo Andy Clarke e acho que devíamos criar módulos para o HTML. Isso além de nos fazer escrever menos iria padronizar a forma com a qual usamos o CSS, tornando os estilos modulares também. CSS modular não é uma novidade e já exige estruturação padronizada.

Devemos continuar escrevendo HTML, mas parar de inventar HTML novo. É uma idéia bem parecida com a dos microformatos, só que pra resolver um problemão genérico e não pequenos problemas específicos, quase um Megaformato.

Uma sugestão (baseada na proposta de Andy Clarke):

#container
Container da página
#branding
Usado para um cabeçalho ou banner com a “marca” da página.
#branding-logo
Logotipo
#branding-tagline
Uma pequena frase que define o site.
#nav or #navigation
Navegação
#nav-main
Navegação principal
#nav-section
Navegação dentro da seção atual
#nav-external
Páginas externas ao site.
#nav-supplementary or #nav-supp
Uma lista complementar de links que pode substituir o comum porém presentacional footer.
#nav-(qualquer coisa)
Uma lista de links qualquer, com nome qualquer.
#search
Relacionado à busca e resultados de busca
#search-input
Um formulário de busca
#search-output
Resultados de busca
#content
Usada para o conteúdo da página
#content-main
Área principal do conteúdo
#content-news
Notícias Relacionadas
#content-(qualquer coisa)
Outro tipo de conteúdo, pode ser #content-related para relacionado ou #content-quote para citações.
#siteinfo
Usado para informações relacionadas
#siteinfo-legal
Informação sobre copyright, etc.
#siteinfo-credits
Créditos

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!

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.

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.

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á.