Atlas Digitais e interfaces para dados abertos

Considerações técnicas
para atlas temáticos
digitais e interfaces para
dados abertos
Conferência Web.br
25 de setembro de 2014

Autores
● Emerson Rocha Luiz
– Full stack developer & coacher @ Alligo
– @fititnt • emerson@alligo.com.br
● Juliana Fernandes
– UX Designer @ DUX Coworking
– @julianafrost • juliana@vivendoporai.com.br
● Tasso Evangelista
– Desenvolvedor de sistemas de informação @ Alligo
– @tassoevan • tasso@tassoevan.me

Agenda
1. Arquitetura de Informação
2. Interface
3. Interação
4. Semântica
5. Acessibilidade
6. Interoperabilidade
7. Web service
8. REST
9. Linked Data
10. JSON-LD

Motivação
estudo de caso atlas.sies.org.br
Atlas Digital da Economia Solidária
Requisitos mínimos para atender a necessidade do governo
(Solicitantes não trabalham como web, se baseiam por exemplos anteriores)
1. Tem que ser na web
2. Tem que permitir visualizar os dados e salvar como planilha
3. Tem que ter mapas

Títulos h1, h2, h3...
> document.querySelectorAll('h1, h2, h3, h4, h5, h6')
[]

Atlas & Dados abertos
● Atlas
– Volume de ilustrações elucidativas de um texto ou de uma
área do conhecimento (ex.: atlas de anatomia)
● Dados abertos
– São dados que podem ser livremente usados, reutilizados e
redistribuídos por qualquer pessoa - sujeitos, no máximo, à
exigência de atribuição da fonte e compartilhamento pelas
mesmas regras

Atlas temático puro
● Pode ser apenas livro impresso :(
● Pode ser apenas link para um PDF ou
imagem :(
● Criadores devem escolher previamente o
que e como mostrar :(
● Pode ser visualmente lindo :)
● Não requer interatividade :(

Dados abertos básico
● Pode ser apenas link direto para uma
planilha :(
● Requer habilidade para extrair informações,
até mesmo básicas :(
● Requer ser parseável por máquinas :)
● Não requer interatividade :(

Motivação
Estudo de caso Atlas Digital SIES
- “Podemos ir além do que esperam neste projeto?”
- “Conseguem nos entregar ao menos o que esperamos?”
- ”Sim.”
- “Ok. Podem. Mas não precisam. O básico já está bom”
Expectativa baixa, por falta de bons exemplos e do potencial da web

Web como solução!*
* Leia-se: web com boas práticas
Web Accessibility Initiative (WAI)

1. Arquitetura de Informação
Organização do caos da alta quantidade de dados

A.I. e Atlas Temáticos
● Requer estudo específico da área temática
● Requer estudo de Estatística e apresentação
de dados numéricos
● Wireframes são uma parte pequena do
trabalho
● Tentativa e erro é previsível

2. Interface
Informação deve ser apresentada de forma coerente

Considerações técnicas
● Cores devem levar em consideração
daltonismo
● Tamanhos devem levar em consideração
visão baixa
● Funcionalidades “aumento de fonte” e “alto
contraste” não são justificativa para escolhas
ruins por padrão

Além de layout padrão
● Computador
● Mobile
● Impressão
Acessibilidade requer cuidados
especiais tanto na versão padrão
como na para mobile

3. Interação
Interações com dados melhoram experiência e compreensão

Interações com tecnologia web
Aproveite potencial de Javascript e SVG para
interações avançadas com dados sem
depender de PDFs ou imagens geradas por
servidor para gráficos e mapas

4. Semântica
Implementação técnica precisa refletir o significado do conteúdo

Considerações gerais
● Use títulos (h1, h2, h3...) de forma coerente
– Aprenda o que é HTML outline
– Cuidado ao usar tags HTML5 sem saber o que é outline
– Erro mais comum de semântica em sites (mesmo famosos)
● Use listas (ul, ol) apenas para o que é lista
– Use sempre que coerente dl/dt/dd
● Sempre tabelas para dados tabulares
● Faça código como HTML5 Válido
Gerador de outline
https://gsnedders.html5.org

5. Acessibilidade
O acesso ao conhecimento não deve ter barreiras
Palestras recomendadas:
http://pt.slideshare.net/ana_laura/w3c-acessibilidade
http://pt.slideshare.net/julianafrost/acessibilidade-na-web-principais-problemas-e-solues

Ferramentas automáticas
Leitores de tela mais usados
● WAVE Web Accessibility Tool
– http://wave.webaim.org
● Cynthia Says™
– http://www.cynthiasays.com/
● Da Silva (alerta: falso positivos)
– http://www.dasilva.org.br/
● Lista mais completa
– http://www.w3.org/WAI/ER/tools/complete

Ferramentas automáticas
falham
Porém, geralmente, estão certas até que
você prove o contrário
Cheque manualmente erros e alertas
acusados com documentação
– http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/
– http://www.w3.org/WAI/

Teste com leitores de tela
Leitores de tela mais usados
● Desktop
– Windows: NVDA, JAWS
– Linux: Orca
– Mac: VoiceOver
● Mobile
– Android: TalkBack
– Iphone/iPad/iPods: VoiceOver

Dispositivos mobile tem
comportamento diferente
● Geralmente não tem teclado
– Certos padrões comuns no computador estão
indisponíveis (navegação por tab, titulos, tabelas)
● Mobile depende de eventos touchscreen
– Sites não amigáveis a mobile podem ser inusáveis
– Sites amigáveis a mobile também podem ser inusáveis
– Leitores de tela podem tomar controle de comandos
touchscreen

HTML mais acessível
● Use ARIA landmarks sempre
– Em 2014, ainda deve usar landmarks em elementos HTML5
● Use demais tags ARIA quando pertinente
– Exceto quando uma fonte segura disser que é redundante
● Mesmo que pareça tecnicamente correto,
teste com leitores de tela

6. Interoperabilidade
Integrabilidade entre sistemas através de padrões

O que é interoperabilidade?
Poderes
Empresas
Sistema de
Informação
Sistema de
Informação
Prefeituras
Terceiro
Setor
Outros
governos
Cidadãos
Governos
estaduais
Sistema de
Informação
http://www.governoeletronico.gov.br/acoes-e-projetos/e-ping-padroes-de-interoperabilidade/o-que-e-interoperabilidade

7. Web service
Interoperabilidade através da plataforma web

O que é web service?
“[...] um sistema de software projetado para
suportar interação interoperável entre
máquinas sobre uma rede.”
http://www.w3.org/TR/2004/NOTE-ws-gloss-20040211/#webservice

Arquitetura MVC genérica
Modelo
Controle
Apresentação

Modelo mais detalhado
Fonte de
dados
Mapeamento
e persistência
Domínio
Controle
Apresentação

Atlas sem web service
Banco de
dados
ORM
Regras de
negócio
Rotas/ações
HTML e assets

Atlas com web service
Web service
Transporte e
parsing
Regras de
negócio
Rotas/ações
HTML e assets

Ok, mas... Por que escrever
um serviço que já existe?

Banco de dados
● Drivers na camada da
aplicação
● SQL com vendor lock-in*
● Segurança embutida
● Mapeamento de objetos
dependente do driver
● Regras de negócio reduzem
portabilidade
http://en.wikipedia.org/wiki/SQL#Criticism

Web service
● Façade sobre o banco de dados
● Construído sobre web stardards
● HTTP, SMTP, FTP etc.
● Segurança como extensão do protocolo de transporte
● Mapeamento de objetos definido pelo protocolo de
mensagens
● Domínio da aplicação compartilhado entre o web
service e o front-end

Arquitetura do Atlas
Banco de dados
ORM
Regras de negócio
Recursos
Objetos serializados
Transporte e parsing
Domínio mínimo
Rotas/ações
HTML e assets
Banco de dados
Front-end
Web service

E a interoperabilidade?
● Permitir que terceiros criem seus próprios
aplicativos web alimentados pelo web service
● Redução de complexidade via divisão de
responsabilidades
● Agilidade para refatorar e adicionar funcionalidades
● Facilidade de fazer testes unitários
● Simplifica escalabilidade
● É uma recomendação ePing
http://eping.governoeletronico.gov.br/#s10.3

8. REST
Conceito popular em web APIs, porém incompreendido

Representational state transfer
● É uma arquitetura
● É protocol-agnostic
● Serialização em vários formatos
● RSDL é opcional, existem alternativas e
geralmente o foco é para documentação
● Controles de hipermídia

Resposta JSON
http://example.com/localidades/43
{
"codigo": 43,
"tipo": "unidadefederativa",
"nome": "Rio Grande do Sul",
"sigla": "RS"
}

Web API REST(ful?)
● Cliente-Servidor
● Stateless
● Sistema em camadas
● Código sob demanda (opcional)
● Interface uniforme
– URIs
– HATEOAS

HATEOAS
A Web como conhecemos
– Documentos de hipertexto têm hiperlinks
● Hiperlinks representam documentos relacionados
As APIs RESTful
– Formatos de hipermídia têm hiperlinks
– Outros formatos são servidos com HTTP + Web Linking*
● Hiperlinks representam documentos e ações relacionadas
http://tools.ietf.org/html/rfc5988

O “mimimi” sobre HATEOAS
● “HATEOAS é doloroso: muito difícil.”
– Pense em RDF.
● “HATEOAS é estúpido: não existem clientes
inteligentes que interpretem os dados sem
uma descrição.”
– IDLs (e.g. RSDL, WSDL) são permitidas em REST
– Uma API RESTful não faz sentido sem um cliente RESTful
– O front-end pode não ser inteligente, mas clientes como
crawlers são

9. Linked Data
Semântica para maquinas

Web Semântica
● Web dos Documentos

Web Semântica
● Web dos Documentos
● Web dos Dados
– Acessíveis para humanos e para máquinas
– Ligados através de uma semântica
http://www.w3.org/standards/semanticweb/

Tecnologias envolvidas
● URIs
● HTTP
● RDF
● SPARQL
● RDFa, RDF/XML, N3, Turtle, JSON-LD

10. JSON-LD
Adição de semântica a web APIs com JSON

Resposta JSON-LD expandida
{
"@id": "http://example.com/localidades/43",
"@type": "http://schema.org/State",
"http://schema.org/name": "Rio Grande do Sul",
"http://schema.org/alternateName": "RS",
"http://schema.org/containedIn": {
"@id": "http://example.com/localidades/4”
}
}

Resposta JSON-LD compacta
{
"@context": {
"codigo": null,
"tipo": null,
"nome": "http://schema.org/name",
"sigla": "http://schema.org/alternateName",
"contidaEm": {
"@id": "http://schema.org/containedIn",
"@type": "http://schema.org/AdministrativeArea",
"@value": "@id"
}
},
"@id": "http://example.com/localidades/43",
"@type": "http://schema.org/State",
"nome": "Rio Grande do Sul",
"sigla": "RS",
"contidaEm": "http://example.com/localidades/4”
}

Obrigado!
● Emerson Rocha Luiz
– Full stack developer & coacher @ Alligo
– @fititnt • emerson@alligo.com.br
● Juliana Fernandes
– UX Designer @ DUX Coworking
– @julianafrost • juliana@vivendoporai.com.br
● Tasso Evangelista
– Desenvolvedor de sistemas de informação @ Alligo
– @tassoevan • tasso@tassoevan.me

Atlas Digitais e interfaces para dados abertos

Mais conteúdo relacionado

Destaque (14)

Semelhante a Atlas Digitais e interfaces para dados abertos (20)

Último (9)

Atlas Digitais e interfaces para dados abertos