Tag: semantica

A Web e o HTML: Passado, presente e futuro (Parte 3)

15 de janeiro de 2008 às 11:57 | Lucas Petes | , , , , , , , , , ,

Bom, depois de ficar muito tempo sem postar (perdão!) e de assistir 2001: Uma Odisséia no Espaço, o que me deixará afetado por algumas semanas, retomo este post.

O HTML foi criado como um meio de troca de documentos (científicos) entre máquinas e sistemas diferentes, usando o protocolo HTTP. Quem um dia já teve a oportunidade de escrever um documento científico sabe que ele é constituído de diversos elementos (titulo, resumo, autores, bibliografia, referências, etc.) que geralmente se repetem ou são obrigatórios/necessários. Com essa estrutura ‘previsível’, levantar e implementar as tags HTML necessárias para formatar tais documentos provavelmente não foi uma tarefa das mais difíceis. Além disso, diversas tags o HTML já herdava do SGML.

… mas a Web cresceu. Foi aberta para o mundo, para todos. E aí? Nem só de documentos científicos vivia essa Web.

Pois bem. Os browsers cresceram e apareceram com a Web. Mosaic, Netscape, Internet Explorer.

- Como colocar ‘tal’ texto em ‘tal’ lugar? Como criar colunas, barras, etc?
- Tipo um jornal?
- É! Tipo um jornal!
- Ora! Com tabelas!

Com tabelas, por favor!

As tabelas foram incluídas na especificação do HTML 3, em 1995. Daí pra frente, além de carregarem consigo dados tabulares, as tabelas serviam de grid para as páginas. E assim foi até uns dias atrás.

A proposta do CSS1 veio no mesmo ano, em novembro. A Microsoft adotou a idéia e prometeu implementar no recém-lançado Internet Explorer

Vale lembrar que desde 1993 havia na lista www-talk a idéia de uma folha de estilos pra HTML. Nada ainda em ‘cascata’. Veja a proposta do pessoal da O’Reilly:

@H1 fo(fa=he,si=32,we=bo) ve(be=1,af=2)

que equivale a:

h1 {
  font-family: sans-serif;
  font-size: 32pt;
  font-weight: 900;
  padding-top: 1em;
  padding-bottom: 2em;
}

Daí em diante, muita água passou por debaixo da ponte. A web crescia mais e mais. Novas possibilidades surgiam: e-commerce, leilões, chats, comunidades, enormes portais, web apps. Os browsers – claro, principalmente o eixo IE-Netscape – implementavam novas tags e outras tecnologias deliberadamente, levados pelo mercado e na tentativa de ganhar novos adeptos, tanto o usuário final quanto o desenvolvedor. Site compatível com IE nem sempre era com o Netscape e vice-versa.

A especificações do HTML4 e do CSS2 foram liberadas em 1998. Também em 1998, foi fundado o WaSP, o projeto Mozilla e foram iniciados os rascunhos do que viria a ser o XHTML.

E o vento começou a virar

Pequenos e grandes movimentos deram início ao trabalho de evangelização dos webstandards. A tecnologia disponível e a maioria dos browsers em uso já suportava o “pleno” uso de HTML/CSS para a construção de quaisquer tipos de site sem o uso, por exemplo, de tabelas como grid ou da tag <font>.

Como antes “HTML não era importante”, era “coisa pra browser entender” e era “uma bagunça de tag com trilhões de <td>”, nem todo ‘profissional’ web entendia HTML – o negócio era editor WYSIWYG. Macromedia Dreamweaver, Microsoft FrontPage, Netscape Composer, Adobe GoLive! e tantos outros eram ferramentas essenciais. Até concordo. Criar inúmeras estruturas de tabelas aninhadas na unha nunca foi tarefa das mais fáceis. Pior ainda era entender aquilo depois. No entanto, o movimento dos webstandards pregava uma coisa que essas ferramentas ainda não faziam no modo visual – e não fazem direito até hoje. Talvez por isso a migração para os padrões tenha sido tão lenta: a longa curva de aprendizado dos profissionais que até então dominavam o mercado e a demora para a evolução das ferramentas.

Do início dos anos 2000 pra cá, a adoção dos webstandards cresceu exponencialmente. Quem até então relutava em fazer da web um mundo melhor foi convencido pelo bolso (redução de custos e tempo de implementação e manutenção), pela equipe (programador nenhum gosta de trabalhar em um mar de <td>), ou pelo Google (conteúdo relevante como ele deve ser). Ah, sem falar que agências e profissionais anunciavam webstandards como diferencial competitivo – o que de fato era. Como a concorrência não quer nunca ficar pra trás, fizeram a lição de casa.

O XHTML foi liberado em 2000, como uma substituição/evolução do HTML 4. Hoje provavelmente seja a especificação mais usada para a escrita de novos documentos, mais por conta das melhorias de sintaxe em relação do HTML 4 do que pela abordagem do seu uso como documento XML. O futuro proposto pela W3C para o XHTML foi visto por Apple, Mozilla e Opera como um distanciamento da realidade e das necessidades dos autores dos documentos da web. Por conta disso, formaram o WHATWG, com foco principal na construção da especificação do Web Applications 1.0 (aka HTML 5).

No próximo post (provavelmente o último), as mudanças nas sintaxes de HTML4 e XHTML para HTML 5.

Ref: http://virtuelvis.com/archives/2005/01/css-history – História do CSS, principalmente quanto às sintaxes propostas

Comentários desativados

Metadados e o RDFa

15 de outubro de 2007 às 13:02 | Lucas Petes | , , , ,

Meta é um radical derivado do grego que pode significar “acima”, “além”, “informação sobre”, “relacionado a”, “baseado em”, com um certo caráter reflexivo. Na nossa língua, palavras como metamorfose e metalinguagem se utilizam desse prefixo.

Os metadados são dados que descrevem dados. Em um documento XHTML, essa descrição pode ter inúmeras finalidades, tais como a acessibilidade de pessoas com necessidades especiais, indicar o do que se trata um documento ou partes dele pra um mecanismo de busca ou qualquer outro tipo de software, incluir uma licença de uso do conteúdo (CC, DRM’s, GPL), etc.

As tags <meta>, atributos como o alt, o title e o longdesc e os microformats são algumas das formas de descrever ou indicar os dados contidos no documento.

RDFa

O RDFa permite a inserção de metadados em um documento XHTML ou XML por meio de atributos – generalizados dos elementos meta e link pra serem usados em qualquer outra tag. Isso o torna mais simples e digerível para quem está acostumado a codificar somente XHTML. O RDFa usa declaração XML no início do arquivo e DTD próprio:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

Obs: o RDFa surgiu juntamente com o rascunho do XHTML 2. O DTD acima, introduzido mais tarde, trabalha com a especificação do XHTML 1.1.

Além disso, é necessário fazer a referência aos vocabulários (namespaces) que serão usados para descrever o conteúdo, tais como iCal, vCard, etc. Tais vocabulários são padrões já definidos e usados em inúmeras aplicações. Eles definirão também os prefixos dos valores que serão usados mais adiante. Exemplo:

<html xmlns:cal="http://www.w3.org/2002/12/cal/ical#"
           xmlns:contact="http://www.w3.org/2001/vcard-rdf/3.0#">

Neste caso, a declaração foi feita para todo o documento, mas também pode ser feita em fragmentos:

...
  <p instanceof="cal:Vevent"
     xmlns:cal="http://www.w3.org/2002/12/cal/ical#">
    I'm holding
    <span property="cal:summary">
      one last summer Barbecue,
    </span>
    on
    <span property="cal:dtstart" content="20070916T1600-0500">
      September 16th at 4pm.
    </span>
  </p>
...
  <p class="contactinfo" about="http://example.org/staff/jo"
     xmlns:contact="http://www.w3.org/2001/vcard-rdf/3.0#">
    <span property="contact:fn">
      Jo Smith
    </span>
    <span property="contact:title">
      Web hacker
    </span>
    at
    <a rel="contact:org" href="http://example.org">
      Example.org
    </a>.
    You can contact me
    <a rel="contact:email" href="mailto:jo@example.org">
      via email
    </a>.
  </p>
...

A inclusão dos atributos semânticos é feita seguindo a sintaxe do namespace que foi referenciado. Em contact:org é aceito pela especificação do vCard o conteudo da tag a em que ele está inserido. Já para o cal:dtstart o formato de data aceito pelo iCal é outro, descrito em content. Se o documento for lido diretamente, será exibido o conteúdo da tag. Mas se o documento for aberto para a retirada das informações iCal, o atributo content será o importante.

Atributos utilizados

about
uma URI especificando o recurso de que se trata o metadado; na sua ausência, por omissão, o documento corrente
rel, rev e href
especifica a relação ou a relação inversa (rev) com outro recurso
property
especifica uma propriedade para o conteúdo de um elemento
content
atributo opcional que sobrescreve o conteúdo do elemento quando se usa o atributo property
datatype
atributo opcional que especifica o tipo de conteúdo

Existem diversos schemas RDF para adicionar semântica aos mais variados tipos de conteúdo. Alguns, como o iCal e o vCard são mais comuns e de aplicação mais ampla. Outros já definem conteúdo extremamente específicos, como os da área médica e biológica.

Fontes: Creative Commons, W3C, Wikipedia.

Comentários desativados

Uma web mais inteligível por homens e máquinas

3 de outubro de 2007 às 11:28 | Lucas Petes | , , , , , , , ,

É fato o crescimento e a popularização crescente da internet ano a ano. A quantidade de conteúdo produzido na rede cresce de maneira exponencial. Os serviços hoje disponíveis de maior sucesso são os que oferecem a produção de conteúdo por qualquer pessoa que tenha vontade de fazê-lo – desde escrever um artigo na Wikipedia a publicar o que está fazendo em 140 caracteres no Twitter.

Ok. Temos uma enorme quantidade de conteúdo disponível por ai. Como organizá-lo?

Como fazer com que a dona de casa que procura a receita do quindim da vovó encontre essa informação entre zilhões de terabytes de dados?

Os mecanismos de busca atuais, tais como Google, Yahoo e Live fazem uso das palavras-chave inseridas, encontram entre as páginas indexadas – ou não – os termos e retornam os resultados por ordem de relevância, popularidade da página (pagerank) e outros ‘n’ critérios.

O que é feito hoje por tais sistemas é um trabalho extremamente difícil – claro, não vemos um ‘novo Google’ por ai todos os dias. A maioria dos sites online hoje ainda não seguem os padrões web, o que dificulta a indexação do que é realmente relevante. Quindim da Vovó escrito dentro de uma tag <h1> indica um título e é muito mais relevante para o buscador do que se escrito dentro de um <span>, independente de que no CSS o <span> esteja estilizado pra uma fonte tamanho 26. A linguagem de marcação (seja ela o HTML ou XHTML) já carrega consigo inúmeras possibilidades semânticas, tais como títulos, listas (ordenadas, não-ordenadas, de definição), endereços, acrônimos, abreviações, dados retirados ou inseridos, ênfases, etc.

Em geral, a semântica (do grego semantikos, derivado de sema, sinal) refere-se ao estudo do significado, em todos os sentidos do termo. A semântica opõe-se com freqüência à sintaxe, caso em que a primeira se ocupa do que algo significa, enquanto a segunda se debruça sobre as estruturas ou padrões formais do modo como esse algo é expresso (por exemplo, escritos ou falados).

Wikipedia

Microformats

Iniciativa de dois caras influentes da internet, Tantek Çelik e Eric Meyer, os microformats são uma biblioteca de formatos abertos para descrever ao máximo o conteúdo de um documento (X)HTML, através de padrões para o conteúdo dos atributos class, rel e rev. Dessa maneira, um parser consegue identificar do que se trata um bloco de código e trabalhá-lo, tal como gerar um vCard, arquivar reviews de produtos, montar uma rede de relacionamentos por XFN, etc. Além disso, um buscador ao visitar a página pode associar tal conteúdo semântico e torná-lo mais relevante em uma determinada busca. Em uma associação dos microformats e da semântica do XHTML, uma busca por “endereço milk-it” pode retornar um resultado mais preciso, já que tal informação se encontra em uma tag <address> e dentro da especificação vCard dos microformatos.

Iniciativas externas louváveis, como a criação dos bioformats – microformatos aplicados a biologia, dão mais força e motivos para a adoção de tal padrão. [1]

Contextos e homônimos

Como diferenciar em uma busca por “manga” os significados “fruta”, “parte da roupa” e “quadrinhos japoneses”?

O Google bem que tenta, mas é de fato uma tarefa extremamente complexa.

A descrição do conteúdo de uma página – seja através do código com microformatos, por tags ou outras formas de classificação – ajudaria bastante na desambiguação e aumentaria consideravelmente a qualidade dos resultados de uma busca.

Powerset

Em outros casos, diversas palavras semelhantes cabem para descrever o que se procura. Uma busca por “João brigou Maria” talvez não tenha tanto sucesso quanto “João discutiu Maria” ou “João separou Maria” “João Maria separados” , etc. No entanto, todas as opções são uma tentativa de encontrar conteúdo sobre um mesmo fato.

O buscador Powerset, quando lançado, promete realizar as buscas com a “linguagem natural”, analisando o que é buscado com base em uma análise lingüística. Ao invés de palavras-chave, são usadas expressões corridas.

No album de screenshots do buscador a busca é feita com o uso de um termo, uma conexão e outro termo. Entre os exemplos dados estão “‘something’ cause cancer”, “‘something’ prevent cancer”, ou ainda “Paris Hilton ‘something’ sex”. Os resultados então aparecem em lista, ordenados pelas ocorrências de relações iguais ou semelhantes às palavras buscadas.

RDF

Bom, pra completar o assunto da web semântica, falta falar sobre o RDF, RDFa e mais alguns detalhes. Mas pra isso, usarei outro post para poder explorar melhor o assunto e estudar mais até lá. :)

[1] via Revolução Etc.