Estudo de dados em HTML5

Normatizando a estrutura de dados para o sistema de atualização.

Para quem chegou agora, este é um blog de projeto, ele contém relatórios sobre o desenvolvimento do jogo bem como os estudos dos personagens e tecnologias envolvidas.e a documentação em sí, como é o caso agora.

Sim eu sei, nem tem demo, mas quando tiver ele já vai estar preparado para ser "legal". Na verdade fiz isso por estudo e para distrair a cabeça.

As Informações
São preciso apenas 3 dados para se ter uma informação de update: o endereço, a data e o tamanho do download.
Lógico acrescentamos a descrição, assim temos 4 dados passando uma informação concreta.

Como passar as informações?
A forma mais comum de dados na web é o HTML.
O problema é como passar as informações junto com a página HTML.

Resolver foi muito mais complicado doque achei de inicio, mas deu para manter o padrão webstandard.

Um usuário comum estaria satisfeito com isso como sua página de downloads:

Isto não esta errado já que o a HTML também se destina a usuário final e foi criada com a finalidade principal de passar infomação e ser fácil de usar mesmo sem grandes conhecimentos  (sim padawan a web não é criação exclusiva de empresas e designers).


Mas se perde muitos dos recursos valiosos como facilidade de ser encontrado em buscadores (Google), boa aparência nos navegadores e esteticamente não fica grande coisa mesmo para quem não vê o código.

Então quando se fala em padrão webstandards nós praticamente nos limitamos ao uso profissional, e como este é o meu caso vou partilhar com vocês o sofrimento:


O código ficou assim:

Veja o código na integra no pastebim

Este é o conteúdo do widget.
Com um mínimo de esforço uma pessoa que não conhece HTML já deve ter começado a entender o código. A marcação HTML5 deixa o significado das tags mais simples, mas vamos começar a explicar a estrutura por traz da simplicidade passo a passo.


O STYLE como você percebeu é onde fica todo nossa definição de visual, cor e tipo de letra por exemplo. Aqui esta esta uma área separada, o STYLE é onde se agrega o CSS, uma linguagem de configuração separada da HTML. Também chamada de folha de estilo.
Antigamente a formatação era incluída junto da HTML, mas isso dava um trabalho absurdo para manutenção das páginas então se criou uma segunda linguagem.
Aos que estão acostumados com HTML notem que há um atributo a mais na tag STYLE SCOPED. Isto isola o estilo dentro da tag pai, no caso ASIDE.
Evitaria usar tanto a repetição de #CabecalhoDeAtualizacaoWWP mas preferi manter uma compatibilidade com a HTML4.
Aqui também eu poderia comprimir a imagem de fundo em um formato textual e inseri-la no código sem precisar carregar a imagem separado!

HEADER é uma seção de cabeçalho, aqui indico informações relevantes sobre a peça.
Escolhi que ele passaria o título e a descrição da atualização, tudo ficando bem avista para o usuário.
Aproveitei-me da tag TIME que pode inserir datas dentro do texto. Obviamente não existe nenhuma informação visual além do texto, esta tag apenas serve para um mecanismo de busca ou indexação ter uma referência.
Os espertos notaram umas tags de META, a rigor uma tag dessas deve ser introduzida no cabeçalho da pagina principal e não num elemento. Mas ficou omisso o caso dos widgets na descrição oficial, o próprio www.data-vocabulary.org apenas traz uma indicação de usar estes dados no texto bruto do documento. Então esses metadados estão fora do padrão e aparecem aqui apenas para mostrar algumas coisas que eu acho que tem "pano pra manga" no padrão web.

Em seguida o link de download num paragrafo normal P. Exencial, pode parecer redundância de dados com o widget na mesma pagina do projeto, mas a proposta é uma unidade independente.

DETAILS esta tag provém detalhes para a página principal ou de elementos desta. No caso serão passados nossos detalhes de update.
Inseri um par de comentários, antes e depois de details para facilitar a identificação da área dentro do código HTML.
Os comentários na HTML tem a exata função de delimitar áreas de código com algum comentário que facilite sua identificação para o scripter e no caso para meu interpretador em C++.

ADDRESS como o nome diz, meus dados de contato.
Não há uma obrigatoriedade de dados físicos, até porque na verdade GEOTAGS são inseridas usando METADADOS, os mesmos que como citado acima não podem ser incluídos fora do cabeçalho da página principal.


Os dados de atualização em si
Escolhi demarcar os dados dentro da tag

, inicialmente pensei em mandar os dados em forma de seção CDATA, assim eu passaria um XML simples, que é muito mais simples de ser analisado, mas a HTML5 tem uma série a mais de tags que facilitou meu trabalho.

A HTML prove 2 tags que comportão esses dados: A e TIME sendo que A já guarda o endereço inplicitamente em forma de parâmetro.

Eu devo passar uma lista com as ultimas atualizações válidas, inclusive para o jogador fazer um downgrade. Então os dados serão passados em dentro da estrutura UL.

Na tag A além do atributo href usei também um atributo personalizado conforme descrito aqui para passar o tamanho do download.

Nota: Toda a definição de TAGs descrita aqui pode ser encontrada neste endereço http://www.w3.org/TR/html5/

O Visual
Aqui deixamos as informações definidas acima com uma aparência  mais humana.
Escolhi o background uma imagem que irá ter o tema de RPG como convém ao jogo.
Dai bastou manter um pequeno valor de contraste das cores para permitir leitura.

Como não é tão interessante que o usuário use os links, alterei os links das revisões para que aparecem sem destaque. Já os do link de download mantive o padrão de destaque com uma cor viva contrastante e o sublinhado. Aproveitei um efeitinho da CSS3 o text-shadown.

Nada muito maior é necessário.

Os textos
As informações passadas ao usuário são poucas e se limitam ao relevante.
No caso do widget apenas tem relevância o link de download.

As descrições nos updates serão coisa de no máximo 2 linhas, se possível uma lauda de tamanho de texto.

Também será informado o tamanho da atualização.

Ex.s:
Nova fase disponível. Fase da Aracne (2MB)
Corrigido: problema na textura tal (0.4MB)

Aqui uma referência que tirei do site do Soul Order.

Opinião pessoal
Este já é o terceiro projeto independente sério em HTML5 que faço (sendo 1 freela) em todos fiz uma árdua pesquisa e procurei conselhos de outros profissionais.
A ideia por trás dela é a websemantica, por isso as tags tem nomes sugestivos à seções comuns encontradas em páginas atualmente. Talvez numa HTML6 isto provavelmente vai mudar também de acordo com um novo contexto.

Sistematicamente todos os blogs em português e a maioria dos estrangeiros se limita a passar informações relativa a multimédia e afins chamando tudo de revolução sem se dar conta de como e para que a tecnologia (na verdade cheguei a ver demos de HTML5 sem uma linha sequer de HTML5). Então se você esta procurando informação não-poluída sobre HTML 5 a melhor fonte é a W3C mesmo.

Vamos agora finalmente falar de programação (Welcome to the Hell C++)
HTML é lindona o conceito de dados estruturados com semântica é show, mas obviamente conceito e nada é a mesma coisa se você não tem onde visualizar os dados.

Não vou descrever a parte da programação a fundo, basta saber que é nela que pegamos os dados e fazemos alguma coisa com eles.
Quem quiser ver um pouco de programação mais explicada pode olhar meu tutorial de Away3D e Blender.

Usei as seguintes bibliotecas:
CURL é uma excelente biblioteca, já implementa os mecanismos de conexão com servidor e recebimento de dados facilmente.
TinyXML é ainda mais fácil de instalar e bastante prática. Não é a mais fundida biblioteca de análise XML mas é a que me responde bem e rápido.
POSIX Threads a terceira cabeça do cão do inferno, sem comentários, mas sem ela não tem como fazer um mecanismo de checagem de atualização que não TRAVE o jogo.

Criei uma classe auto-suficiente para fazer a checagem de dados e o aviso ao sistema principal.

Automaticamente a classe procura por um endereço principal e caso seja preciso em endereços redundantes.

Ela pega os dados que estão delimitados entre ini: wwp_update_details e end: wwp_update_details. E joga eles num analizador XML simples.
Infelizmente tive que usar uma marcação de comentário, uma solução não muito elegante, mas pratica.
A TinyXML não conseguiria analizar os dados HTML já que a HTML ao contrário da XML prevê dados mau formatados.

Com a POSIX eu rodo ela em um processo separado de baixa prioridade (assim espero que ocorra).
Assim a classe faz seu trabalho da forma mais silenciosa possível.

Os arquivos para quem quizer ver melhor estão aqui:
main.cpp
WWP::WWP_UpdateChecker.h
WWP::WWP_UpdateChecker.cpp
WWP::WWP_UpdateInfo.h
WWP::WWP_UpdateInfo.cpp