• Like
  • Save
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 3 - 10-06-2011
Upcoming SlideShare
Loading in...5
×
 

Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 3 - 10-06-2011

on

  • 1,610 views

Slide da disciplina de Introdução aos Padrões Web e Tecnologias para o Ambiente Digital, ministrada pelo professor Thiago Prado Campos - Aula 03 - 10/06/2011

Slide da disciplina de Introdução aos Padrões Web e Tecnologias para o Ambiente Digital, ministrada pelo professor Thiago Prado Campos - Aula 03 - 10/06/2011

Statistics

Views

Total Views
1,610
Views on SlideShare
1,610
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Thiago Prado de Campos - www.thiagotpc.com
  • 01m30s Dizer que é responsável pelo site do Campus Londrina
  • 01m30s Dizer que é responsável pelo site do Campus Londrina
  • 01m30s Dizer que é responsável pelo site do Campus Londrina
  • 01m30s Dizer que é responsável pelo site do Campus Londrina
  • 01m30s Dizer que é responsável pelo site do Campus Londrina

Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 3 - 10-06-2011 Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 3 - 10-06-2011 Presentation Transcript

  • Introdução aos Padrões Web e Tecnologias para o Ambiente Digital Thiago Prado de Campos Aula 3 10/junho/2011
  • Conteúdo Programático
    • Interoperabilidade
    • Acessibilidade na Web
    • Semântica e SEO
  • INTEROPERABILIDADE E DADOS ABERTOS
    • Introdução aos Padrões Web e Tecnologias para Ambiente Digital
  • Interoperabilidade
    • É a capacidade de um sistema (informatizado ou não) de se comunicar de forma transparente (ou o mais próximo disso) com outro sistema (semelhante ou não).
      • Para um sistema ser considerado interoperável é muito importante que ele trabalhe com padrões abertos .
  • Interoperabilidade
    • Significa a capacidade de sistemas de tecnologia da informação e comunicação (TIC) e dos processos comerciais viabilizados por essa tecnologia trocar dados e possibilitar a troca de informações e conhecimento.
  • Interoperabilidade
    • Capacidade de organizações díspares e diferentes interagirem para atingir objetivos comuns, convencionados e vantajosos para todas as partes, envolvendo o partilhamento de informações e conhecimento entre as organizações por intermédio dos processos comerciais existentes, pela troca de dados entre seus respectivos sistemas da tecnologia da informação e comunicação (TIC).
  • Interoperabilidade
    • Capacidade de órgãos governamentais partilharem e integrarem informações usando padrões comuns.
  • Exemplos de Interoperabilidade
    • Crawler (robot) de mecanismos de buscas indexando documentos e conteúdos de redes sociais;
    • Loja virtual consultando endereço através do CEP no site dos Correios;
    • Internet Banking consultando sistemas bancários em mainframes e bases legadas.
    • Etc.
  • Dados Abertos Governamentais
    • O W3C iniciou em maio/2011 o  GT em Dados Abertos Governamentais  com a missão de prover padrões e contribuir com informações para que governos ao redor do mundo publiquem seus dados de modo eficaz e utilizando tecnologia de Web Semântica e Dados Linkados .
      • http://www.w3.org/TR/gov-data/
  • Leis dos DAG
    • Se o dado não pode ser encontrado e indexado na web, ele não existe.
    • Se não estiver aberto e disponíivel em formato compreensível por máquina, ele não pode ser reaproveitado.
    • Se algum dispositivo legal não permitir sua reaplicação, ele não é útil.
  • 8 Princípios dos DAG
    • Dados governamentais devem ser considerados abertos se forem disponibilizados publicamente seguindo os seguintes princípios:
    • Completos : Todos os dados públicos estão disponíveis. Dado público é o dado que não está sujeito a limitações válidas de privacidade, segurança ou controle de acesso.
    • Primários: Os dados são apresentados tais como os coletados na fonte, com o maior nível de granularidade e sem agregação ou modificação.
  • 8 Princípios dos DAG
    • Atuais : Os dados são disponibilizados tão rapidamente quanto necessário à preservação do seu valor.
    • Acessíveis : Os dados são disponibilizados para o maior alcance possível de usuários e para o maior conjunto possível de finalidades.
  • 8 Princípios dos DAG
    • Compreensíveis por máquinas: Os dados são razoavelmente estruturados de modo a possibilitar processamento automatizado.
    • Não discriminatórios: Os dados são disponíveis para todos, sem exigência de requerimento ou cadastro.
    • Não proprietários: Os dados são disponíveis em formato sobre o qual nenhuma entidade detenha controle exclusivo.
  • 8 Princípios dos DAG
    • Livres de licenças: Os dados não estão sujeitos a nenhuma restrição de direito autoral, patente, propriedade intelectual ou segredo industrial. Restrições sensatas relacionadas à privacidade, segurança e privilégios de acesso devem ser permitidas.
  • Efeitos
    • Inclusão . Fornecer dados em formatos padronizados abertos e acessíveis permite que qualquer usuário utilize qualquer ferramenta de software para adaptá-los às suas necessidades.
    • Transparência . Informações do setor público abertas e acessíveis melhoram a transparência, pois as partes interessadas podem usá-las da maneira mais adequada ao seu propósito, obtendo uma idéia melhor do governo.
    • Responsabilidade . Os conjuntos apropriados de dados abertos, devidamente associados, podem oferecer vários pontos de vista sobre o desempenho do governo no atingimento de suas metas em políticas públicas.
  • Como disponibilizar?
    • HTML
    • Acessibilidade
    • APIs
    • RSS/Atom
    • REST/Web Services
    • Web Semântica
    • Etc...
  • Saiba mais sobre DAG
    • http://www.w3c.br/divulgacao/pdf/dados-abertos-governamentais.pdf
    • http://www.w3c.br/divulgacao/pdf/gov-web.pdf
    • http://www.w3c.br/cursos/dados-abertos/
    • http://www.brasilaberto.org/manual-dados-abertos
  • Projeto de Lei de Acesso à Informação Pública
    • Obriga órgãos públicos a considerar a publicidade como regra e o sigilo como exceção.
      • http://www.brasilaberto.org/entenda-o-projeto-de-lei
      • http://www.senado.gov.br/atividade/materia/detalhes.asp?p_cod_mate=96674
  • Exemplos de Aplicações sobre DAG
    • http://twittclue.com/comprasnet/exhibit.html
    • http://eleicoes.mamulti.com/
    • http://www.legisdados.org
    • http://sacsp.mamulti.com/
  • ACESSIBILIDADE NA WEB
  • O que é Acessibilidade?
    • Acessibilidade significa permitir que pessoas com deficiências participem de atividades que incluem o uso de produtos, serviços e informação;
    • Significa TAMBÉM a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população.
  • Onde tem acessibilidade?
    • Na arquitetura e no urbanismo, a acessibilidade tem sido uma preocupação constante nas últimas décadas.
    • Atualmente estão em andamento obras e serviços de adequação do espaço urbano e dos edifícios às necessidades de inclusão de toda população.
  • Acessibilidade. Siga esta idéia
    • A campanha "Acessibilidade. Siga essa idéia" propõe que a sociedade, por meio de suas diversas entidades crie iniciativas para a superação de barreiras arquitetônicas, atitudinais, de informação, dentre outras, que impedem que as pessoas com deficiência ou com mobilidade reduzida sejam incluídas na vida em sociedade.
    • Seu objetivo é estimular a construção de uma sociedade inclusiva e solidária que possibilite igualdade de oportunidades.
    • Ver vídeo
  • Onde tem acessibilidade?
    • Em informática, programas que provêm acessibilidade são ferramentas ou conjuntos de ferramentas que permitem que portadores de deficiências (as mais variadas) se utilizem dos recursos que o computador oferece.
    • Essas ferramentas podem constituir
      • leitores de tela para deficientes visuais,
      • teclados virtuais para portadores de deficiência motora ou com dificuldades de coordenação motora, e
      • sintetizadores de voz para pessoas com problemas de fala.
  • Onde tem acessibilidade?
    • Na Internet o termo acessibilidade refere-se também a recomendações do W3C, que visam permitir que todos possam ter acesso aos websites, independente de terem alguma deficiência ou não.
    • As recomendações abordam desde o tipo de fonte a ser usado, bem como seu tamanho e cor, de acordo com as necessidades do usuário, até a recomendações relativas ao código (HTML e CSS, por exemplo).
  • Tipos de Deficiência
    • Visual :
      • deficiência visual, incluindo cegueira,
      • vários tipos comuns de baixa visão e pouca acuidade visual e;
      • cegueira de cores;
    • Motora/Mobilidade:
      • dificuldade ou impossibilidade de utilizar as mãos, incluindo tremores, lentidão muscular, perda de controle muscular, devido a condições como doença de Parkinson, distrofia muscular, paralisia cerebral, acidente vascular cerebral.
  • Tipos de Deficiência
    • Auditiva: surdez ou dificuldade de audição.
    • Convulsões: reações foto-epilépticas causadas por efeitos estroboscópicos ou pisca.
    • Cognitiva/Intelectual:
      • dificuldade de aprendizagem (dislexia, discalculia, etc)
      • deficiências cognitivas de origens diversas, que afetam memória, atenção, maturidade, resolução de problemas, etc.
  • Cegueira de Cores
    • Daltonismo é um distúrbio da visão que impede com que a pessoa consiga perceber a diferença entre algumas cores.
    • É também conhecido como discromatopsia ou discromopsia.
    • A forma de daltonismo mais comum é a dificuldade de distinguir entre o verde e o vermelho.
    • É um distúrbio de origem genética mas que pode ser causado por lesões nos olhos ou até mesmo no cérebro.
    • Estima-se que cerca de 8% de toda a população mundial de homens são daltônicos.
  • Cegueira de Cores
    • Existem basicamente 3 variações de daltonismo:
      • a deuteranopia , que é a dificuldade de enxergar cores verdes,
      • a protanopia que é a dificuldade de enxergar cores vermelhas e
      • a tritanopia (mais rara) que é a dificuldade de enxergar cores azuis.
  • População com Deficiência
    • Segundo a ONU há cerca de 500 milhões de deficientes no mundo e 80% vivem em países em desenvolvimento.
    • A OMS (Organização Mundial de Saúde) estima que no Brasil existem 16 milhões de pessoas portadoras de deficiência, representando 10% da população.
    • Já os dados do Censo 2000 nos informam que existem 24,5 milhões de portadores de deficiência no país.
  • População com Deficiência mais de 24 milhões (14%) possuem ao menos uma das deficiências enumeradas na pesquisa do IBGE!
  • População Idosa
    • Segundo a Síntese dos Indicadores Sociais 2005, recentemente divulgada pelo IBGE com base nos dados da Pesquisa Nacional por Amostra de Domicílios de 2004, nosso país está entre os primeiros do mundo em população com idade acima de 60 anos.
    • São cerca de 17,6 milhões, que correspondem a 9,7% da população total.
    • Um terço dos idosos em nosso país continua no mercado de trabalho.
  • Deficientes Técnicos
    • Além deste grupo de pessoas já conhecido e identificado, começaram também a aparecer as pessoas com deficiências técnicas. O que são as deficiências técnicas? São pessoas que navegam com aparelhos sem fios (celulares), ligações lentas, browsers antigos, leitores de RSS, etc…
    • A porcentagem de deficientes técnicos nos EUA (no Brasil ainda não há estudo) é de aprox. 13% da população.
  • 25% dos Usuários Web são Deficientes
    • Se juntarmos, portanto, a parcela da população com deficiência visual, uma parcela da população idosa e a parcela com deficiência técnica e descontar as ocorrência combinadas destes casos, chegamos a aproximadamente 25%.
    • Ou seja, um quarto da população de usuários Web podem ser deixados de fora acaso não levemos em conta a acessibilidade ao desenvolver um site.
  • Tecnologias Assistivas
    • Os indivíduos que vivem com uma deficiência utilizam-se de algumas ajudas técnicas para poder navegar na web, o que pode ser:
      • Leitor de Tela : software que usa discurso sintetizado para ler elementos que estão sendo exibidos no monitor.
      • Terminal Braille : terminal que transforma o texto em caracteres Braille.
      • Ampliação de Tela : hardware ou software que amplia o que é exibido no monitor do computador, tornando-o mais fácil para quem tem visão prejudicada.
  • Tecnologias Assistivas
      • Reconhecimento de Fala : software que aceita comandos falados no computador.
      • Teclado especial : que torna mais fácil e preciso a digitação para aqueles que tem dificuldades motoras.
  • Tecnologias Assistivas
  • Leitores de Tela
    • O  leitor de tela  é um  software  usado para obter resposta do computador por meio sonoro, usado principalmente por deficientes visuais.Também pode ser usado apenas para uma maior eficiência e conforto do usuário.
    • As pessoas portadoras de deficiência visual podem navegar pela Internet, utilizando um programa de leitura de tela. Estes programas vão passando por textos e imagens e sintetizando a fala humana. Basicamente, o programa lê para a pessoa o que está na tela.
  • Leitores de Tela
    • Os leitores de tela mais populares são:
      • Jaws
        • http://www.freedomscientific.com/products/fs/jaws-product-page.asp
      • Virtual Vision
        • http://www.virtualvision.com.br/
      • NVDA
        • http://www.nvda-project.org/
      • Windows Eye
        • http://www.gwmicro.com/Window-Eyes/
      • Voice Over (produtos Apple)
        • http://www.apple.com/br/accessibility/voiceover/
      • DosVox ( WinVox )
        • http://intervox.nce.ufrj.br/dosvox/
      • FireVoice (plugin para Firefox)
        • http://www.firevox.clcworld.net/c
  • Navegar como um Cego
    • Vamos tentar compreender como uma pessoa cega consegue navegar na Internet?
  • Dificuldades no Acesso Web
    • Alex Araújo, português, conta como um deficiente visual ele navega na web e como comtemplar recursos de acessibilidade em qualquer website.
    • Acessibilidade na Web: Custo ou Benefício? Vídeo produzido pela empresa Acesso Digital que mostra algumas das principais barreiras de diversos sites e suas soluções.
    • Entrevista com Marco Antonio de Queiroz sobre acessibilidade nas páginas da web, autor dos sites www.acessibilidadelegal.com e www.bengalaegal.com .
  • Obstáculos para Deficientes Visuais
    • imagens que não possuem texto alternativo.
    • imagens complexas. Exemplo: gráfico ou imagem com importante significado que não possuem descrição adequada.
    • vídeos que não possuem descrição textual ou sonora.
    • tabelas que não fazem sentido quando lidas célula por célula ou em modo linearizado.
  • Obstáculos para Deficientes Visuais
    • frames que não possuem a alternativa "noframe", ou que não possuem nomes significativos.
    • formulários que não podem ser navegados em uma seqüência lógica ou que não estão rotulados.
    • páginas ou imagens que possuem pouco contraste.
    • textos apresentados como imagens, porque não quebram as linhas quando ampliadas.
  • Obstáculos para Deficientes Visuais
    • quando a cor é usada como único recurso para enfatizar o texto.
    • contrastes inadequados entre as cores da fonte e fundo.
    • navegadores que não suportam a opção para o usuário utilizar sua própria folha de estilo.
    • navegadores e ferramentas de autoria que não possuem suporte de teclado para todos os comandos.
  • Obstáculos para Deficientes Visuais
    • navegadores e ferramentas de autoria que não utilizam programas de interfaces padronizadas para o sistema operacional em que foram baseados.
    • documentos formatados sem seguir os padrões web que podem dificultar a interpretação por leitores de tela.
    • páginas com tamanhos de fontes absoluta, que não podem ser aumentadas ou reduzidas facilmente.
    • páginas que, devido ao layout inconsistente, são difíceis de navegar quando ampliadas por causa da perda do conteúdo adjacente.
  • Obstáculos para Deficientes Auditivos
    • ausência de legendas ou transcrições de áudio.
    • ausência de imagens suplementares relacionadas com o conteúdo do texto, que poder ter lenta compreensão por pessoas que tem como primeira língua, a de sinais e não a que está escrita ou falada na página.
    • ausência de linguagem simples e clara.
  • Obstáculos para Deficientes Físicos (motores)
    • atividades onde o tempo de utilização é limitado.
    • navegadores e ferramentas que não possuem suporte para teclado alternativo ou botões para todos os comandos efetuados por mouse.
    • formulários que não podem ser navegados com a tecla "tab" em uma seqüência lógica.
  • Obstáculos para Deficientes Cognitivos
    • ausência de alternativas para permitir o recebimento das informações, como ausência de texto alternativo que pode ser convertido em áudio, de imagens suplementares ou de legendas para áudio.
    • elementos visuais ou de áudio que não podem ser facilmente desligados.
    • falta de clareza e consistência na organização das páginas.
    • uso de linguagem complexa sem necessidade.
  • Obstáculos para Deficientes Cognitivos
    • páginas com tamanhos de fontes absoluta, que não podem ser aumentadas ou reduzidas facilmente.
    • uso de imagens trêmulas ou sinais com uma certa freqüência de áudio que podem causar desconforto.
  • Obstáculos para pessoas Idosas
    • O medo da tecnologia;
    • Pouco uso da ajuda oferecida pelos navegadores: em geral, os idosos não usam os recursos oferecidos pelo navegador (aumento do tamanho de letra, mudança de cor, reprodução de áudio ...) e, mesmo quando estas ferramentas estão presentes nos sites, elas não são necessariamente bem informadas para que eles possam usá-las.
  • Obstáculos para pessoas Idosas
    • Socialização: a utilização do teclado, teoricamente, estaria mais adequado, mas os idosos querem usar o mouse para ser seus amigos.
    • Problemas cognitivos: palavras / conceitos / imagens não têm o mesmo significado para todos (por exemplo, a cruz que não tem sentido único: ela pode ser usada para apagar um documento para parar um processo ou mesmo para fechar uma janela do Windows).
    • Perda de atenção: é um problema para o processo de várias etapas.
  • Obstáculos para pessoas Idosas
    • Páginas com sobrecarga de informação: muitas informações em volta das informações essenciais (dados supérfluos, publicidade e animação) atrapalham e desgastam a leitura.
    • Navegação inconsistente: aparência de links fora do costume , criação de uma leitura não linear e navegar em páginas diferentes de acordo com sugestões podem interromper a navegação.
  • Obstáculos para pessoas Idosas
    • Problema exibindo resultado de pesquisa: idosos usam com mais freqüência os motores de busca dentro dos sites. Entretanto, os resultados da pesquisa não são sempre apresentadas de forma adequada.
    • Problema sobre os tamanhos e cores de contrastes: a visão periférica reduzida, mais fácil de distinguir as cores vermelha e amarela e as cores azul e verde, precisa de mais luz . Com isto há mais dificuldade de adaptação quando ocorre rápidas mudanças no brilho.
    • Web links não sublinhados e azul: a personalização de links da Web podem interferir na navegação.
  • Diretrizes e Legislação
    • Veremos a seguir uma série de orientações e obrigações para prover acessibilidade.
  • No Brasil
    • O Decreto-lei 5296 de 2 de dezembro de 2004 que regulamenta as Leis n°s:
      • 10.048, de 8 de novembro de 2000, que dá prioridade de atendimento às pessoas que especifica , e
      • 10.098, de 19 de dezembro de 2000, que estabelece normas gerais e critérios básicos para a promoção da acessibilidade .
  • No Brasil
    • CAPÍTULO VI - DO ACESSO À INFORMAÇÃO E À COMUNICAÇÃO
      • Art. 47. No prazo de até doze meses a contar da data de publicação deste Decreto, será obrigatória a acessibilidade nos portais e sítios eletrônicos da administração pública na rede mundial de computadores (internet), para o uso das pessoas portadoras de deficiência visual, garantindo-lhes o pleno acesso às informações disponíveis.
  • No Brasil
    • CAPÍTULO VI - DO ACESSO À INFORMAÇÃO E À COMUNICAÇÃO
      • Art. 47. (...)
        • § 1 Nos portais e sítios de grande porte, desde que seja demonstrada a inviabilidade técnica de se concluir os procedimentos para alcançar integralmente a acessibilidade, o prazo definido no caput será estendido por igual período.
        • § 2 Os sítios eletrônicos acessíveis às pessoas portadoras de deficiência conterão símbolo que represente a acessibilidade na rede mundial de computadores (internet), a ser adotado nas respectivas páginas de entrada.
  • Em Portugal
    • Resolução do Conselho de Ministros nº 97/99 de 26 de Agosto
        • 1.1 - As formas de organização e apresentação da informação facultada na Internet pelas direcções-gerais e serviços equiparados, bem como pelos institutos públicos nas suas diversas modalidades, devem ser escolhidas de forma a permitirem ou facilitarem o seu acesso pelos cidadãos com necessidades especiais.
        • 1.2 - A acessibilidade referida no número anterior deverá abranger, no mínimo, a informação relevante para a compreensão dos conteúdos e para a sua pesquisa.
  • Em Portugal
    • Resolução do Conselho de Ministros nº 97/99 de 26 de Agosto de 1999
      • 2º - Para concretização dos objectivos a que alude o número anterior, os organismos nele referidos deverão implementar formas de escrita e de apresentação das suas páginas na Internet que assegurem que:
        • a) A respectiva leitura possa ser feita sem recurso à visão, a movimentos precisos, acções simultâneas ou a dispositivos apontadores, designadamente ratos;
        • b) A obtenção da informação e a respectiva pesquisa possam ser efectuadas através de interfaces auditivos, visuais ou tácteis. (...)
  • Nos Estados Unidos
    • Section 508 Standards
      • § 1194.1 Purpose.
        • The purpose of this part is to implement section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C. 794d). Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology , Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency.
        • Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities , unless an undue burden would be imposed on the agency.
  • Outros Países
    • Reino Unido
    • Holanda
    • Alemanha
    • Canadá
    • Filipinas
    • Espanha
    • Suécia
    • Austrália
    • Irlanda
  • E o W3C?
    • Em 1999, o W3C criou a Web Accessibility Initiative (WAI) para publicar diretrizes sobre acessibilidade para:
      • CONTEÚDO DE PÁGINAS WEB ( WCAG )
      • APLICAÇÕES DE INTERFACE RICA ( ARIA )
      • FERRAMENTAS DE AUTORIA DE PÁGINAS WEB ( ATAG )
      • AGENTES DE USUÁRIO DE PÁGINAS WEB ( UAAG )
  • Authoring Tool Accessibility Guidelines (ATAG)
    • Ferramentas de autoria são programas e serviços que as pessoas usam para produzir páginas e conteúdo web.
    • As diretrizes contidas aqui diz respeito a fazer com que estas ferramentas ajudem o desenvolvedor a produzir páginas acessíveis e permitir também que pessoas com deficiência possam utilizar estas ferramentas.
  • Authoring Tool Accessibility Guidelines (ATAG)
    • Estas diretrizes são para:
      • Desenvolvedores de programas what-you-see-is-what-you-get (WYSIWYG)
      • Programas que salvam conteúdo em formato web. (Ex.: MS Word)
      • Ferramentas para gerenciamento de conteúdo (CMS)
      • Sites que permitem aos usuários adicionar conteúdo (blogs, wikis, redes sociais, etc.)
  • User Agent Accessibility Guidelines (UAAG)
    • Estas diretrizes explicam como os navegadores podem se tornar acessíveis às pessoas com deficiência, principalmente incrementando a experiência de utilização de conteúdo web acessível.
    • Estas diretrizes são para:
      • Desenvolvedores de navegadores, media players, tecnologias assistivas e outros agentes.
  • Accessible Rich Internet Applications Suite (ARIA)
    • Estas diretrizes definem como fazer conteúdo web e aplicações web especificamente com conteúdo dinâmico e interfaces com controles avançados e desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas.
  • Web Content Accessible Guidelines (WCAG)
    • Os documentos das Diretrizes de acessibilidade ao conteúdo da Web (WCAG) explicam como produzir conteúdos para a Web que sejam acessíveis às pessoas portadoras de necessidades especiais.
    • Genericamente, "conteúdo" da Web refere-se à informação contida em uma página web ou à uma aplicação Web, incluindo-se aí, textos, imagens, formulários, sons e correlatos.
  • Web Content Accessible Guidelines (WCAG)
    • WCAG é, a princípio, voltada para:
      • Desenvolvedores de conteúdo para a Web (autores de páginas web)
      • Desenvolvedores de ferramentas para a Web
      • Desenvolvedores de ferramentas de avaliação da acessibilidade
  • Web Content Accessible Guidelines (WCAG)
    • WCAG 1.0
      • Publicada em 1999 ainda serve atualmente como principal diretriz e guia para redução dos obstáculos de uso do conteúdo web pelas pessoas com deficiência.
    • WCAG 2.0
      • Publicada em Dez/2008, traz muito detalhamento sobre as diretrizes anteriormente definidas. Levou 5 anos para ser produzida e é composta basicamente de 3 documentos totalizando 450 páginas.
  • E-MAG
    • um conjunto de recomendações a ser considerado para que o processo de acessibilidade dos sítios e portais do governo brasileiro seja conduzido de forma padronizada e de fácil implementação.
    • http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG
  • Avaliadores Automáticos
    • São ferramentas (em geral serviços online) que lêem o código HTML e CSS de uma página web e indica quais pontos de verificação eles satisfazem ou não.
    • Ganha-se tempo por serem rápidos de se aplicar, permitindo identificar falhas mais simples e corrigi-las rapidamente.
    • Alguns pontos necessitam verificação manual e devem ser checados após o uso do avaliador automático.
  • Avaliadores Automáticos
    • Cynthia Says
    • eXaminator
    • Hera
    • FAE
    • TAW
    • Wave
    • Ocawa
    • Fuji Web Accessibility Inspector
    • DaSilva
    • ASES
  • Extensões para Firefox
    • Web Accessibility Toolbar - http://www.visionaustralia.org.au/ais/toolbar/
      • Barra de ferramentas que permite checar as características das páginas e elementos relacionados a acessibilidade, tais como atributos alt, accesskey, etc. Também tem versões para IE e Opera.
    • Fangs - http://www.standards-schmandards.com/projects/fangs/
      • Transforma a página em texto linear semelhante ao que será lido por um leitor de tela.
    • Lynx Viewer Tool - https://addons.mozilla.org/en-US/firefox/addon/yellowpipe-lynx-viewer-tool/
      • Exibe o conteúdo da página conforme interpretado por um leitor de tela.
  • Ferramentas para Cores
    • Color Doctor
      • http://www.fujitsu.com/global/accessibility/assistance/cd/
    • Color Oracle
      • http://colororacle.cartography.ch/
    • Color Selector
      • http://www.fujitsu.com/global/accessibility/assistance/cs/
    • Color Contrast Analyser
      • http://www.paciellogroup.com/resources/contrast-analyser.html
  • Ferramentas para Cores
    • Check My Colours
      • http://www.checkmycolours.com/
    • Vischeck
      • http://www.vischeck.com/vischeck/vischeckURL.php
    • Mais ferramentas para Daltonismo
      • http://www.daltonize.org/p/developer.html
  • WEB SEMÂNTICA E SEO
  • O que é Web Semântica
    • A Web Semântica foi proposta por Tim Beners-Lee e é definida como uma extensão da Web atual, considerada uma Web Sintática.
    • Na Web Semântica o objetivo é que existam modelos que possam representar o significado dos dados dispostos nas URLs de conteúdos Web e relacionamento entre eles e a partir daí permitir que as máquinas façam o processamento automático destas informações.
  • O que é Web Semântica
    • Breitman (2005) apresenta vários modelos e linguagens para representação do significado dos dados na Web semântica.
      • Ela lista principalmente modelos de metadados (dados sobre dados, em geral representados por pares de chave-valor) e ontologias, que ela define como modelos conceituais que capturam e explicitam o vocabulário utilizado nas aplicações semânticas, servindo como base para garantir uma comunicação livre de ambiguidades.
  • Elementos de indicação de seções
    • Até a HTML4 para organizar o conteúdo do site, utilizamos uma tag genérica conhecida como DIV, que quer dizer divisão.
    • A DIV é um elemento de bloco e serve para agrupar diversos elementos de linha e/ou bloco
    • Combinando div com os atributos class ou id nós adicionávamos significado às divisões. Mas estes significados são conhecidos apenas pelo autor da página, não podendo ser tratado de maneira automatizada.
  • Div para organizar conteúdo Imagem de http://www.alistapart.com/articles/previewofhtml5
  • Divisões na HTML5
    • Na HTML5 foram introduzidas algumas novas tags com esse propósito:
      • HEADER, FOOTER
      • SECTION
      • ARTICLE
      • NAV
      • ASIDE
  • Organizar conteúdo com HTML5 Imagem de http://www.alistapart.com/articles/previewofhtml5
  • Section
    • Representa uma seção genérica de um documento ou aplicação.
    • Não deve ser utilizado como container genérico, em substituição da DIV. Somente quando de fato o conteúdo indicar uma seção.
    • A regra geral é que, o elemento seção deve ser utilizado somente quando for apropriado, por exemplo, que o conteúdo seja listado em ferramentas de document outline .
    • Recomendável preencher o atributo title.
  • Article
    • Representa o principal conteúdo de um documento, que poderia por exemplo, ser distribuído de maneira independente, ou reutilizado em outros formatos, por ex.: RSS.
    • O elemento TIME poderia ser usado dentro de ARTICLE com o atributo booleano pubdate indicando a data de publicação do artigo.
  • Aside
    • Indica um conteúdo “tangencialmente” ao conteúdo onde ele está próximo ou inserido.
    • Pode ser usado, por exemplo, para pull quotes em textos jornalísticos.
    • Outros usos: publicidade, grupos de elementos nav, ou outros conteúdos paralelos ao conteúdo principal da página.
  • Nav
    • Indica a parte do documento que contém links para outros documentos indicados para navegação.
    • Nem todos os grupos de links precisam estar dentro de um NAV, mas aquelas que são consideradas as principais portas para navegação no site.
      • Por exemplo, links de rodapé não precisam estar agrupados em NAV.
  • Juntando tudo, um exemplo:
  • META
    • Este elemento tem propósitos genéricos. Os principais:
      • Fornecer informação adicional sobre o conteúdo do documento, de modo a servirem ferramentas de indexação de documentos, como por exemplo, sites de busca.
      • Fornecer informação adicional sobre o documento para o navegador, de modo a facilitar a renderização e tratamento do conteúdo do arquivo.
  • META para Indexação
    • Não existe uma determinação pela W3C, mas, o mercado costuma praticar o uso de algumas meta tags com este propósito.
    • Estas tem dois atributos obrigatórios: name e content.
      • Name identifica o tipo da informação;
      • Content é a informação propriamente dita;
    • Exemplo:
      • <meta name= “author” content= “Thiago” />
  • META para Indexação
    • Alguns valores para name:
      • description, keywords, author, revised, generator
    • Dublin Core
      • Com o objetivo de melhorar a indexação das páginas pelos motores de busca, muitos grupos de desenvolvedores acabam criando sua própria &quot;linguagem de metatags&quot;, a mais popular delas pertence ao projeto Dublin Core iniciado em 1995 buscando, segundo organizadores, mais flexibilidade para os autores.
      • http://dublincore.org/documents/dcmi-terms/
  • LINK
    • Indica a ligação do documento atual com outros documentos no mesmo site ou em sites externos.
    • Atributos:
      • href, hreflang e type  indicam URL, idioma e tipo do documento linkado.
      • rel  obrigatório, determina a relação que existe entre o documento linkado e o atual.
  • LINK
    • Valores para rel:
      • alternate, author, help, icon, license, next, pingback, prefetch, prev, search, sidebar, stylesheet , tag
      • http://www.w3.org/TR/html5/links.html#linkTypes
  • Microformatos
    • É um conjunto de formatos desenvolvido para dar ainda mais significado a documentos HTML ou XML.
    • As especificações disponíveis estão reunidas no site http://microformats.org / e as mais usadas são:
      • hCard (adr, geo)
      • hCalendar
      • hResume
      • hProduct
      • rel-tag
      • XFN, FOAF
  • Microdados
    • O conceito de microdados vem após observar o sucesso de microformats.
    • A ideia é criar atributos genéricos que possam ser usados para criação de qualquer tipo de dados.
    • Desta forma, microdata ( http://www.w3.org/TR/microdata/ ) introduz cinco novos atributos globais aos elementos da HTML: itemid , itemprop , itemref , itemscope , e itemtype .
  • Microdados
    • itemscope é um atributo boleano que indica que o conteúdo deste elemento é um escopo de item, isto é, possuirá informações sobre um item.
    • itemid é um valor que identifica o item. Ex.: ISBN.
    • itemtype é um valor que indica o tipo do item, geralmente uma URL onde está a descrição do tipo.
  • Microdados
    • itemprop indica uma propriedade de um item. Por exemplo, se um item é do tipo carro, uma propriedade pode ser marca, modelo, cor, ano de fabricação, etc.
      • O valor de uma propriedade será sempre o contéudo do elemento. Exceto:
        • Em elementos time, o valor será o conteúdo do atributo datetime;
        • Em elementos meta, o valor será o conteúdo do atributo content;
    • itemref permite incluir propriedades não descendentes no código referenciando-se ao id do elemento no documento.
  • Microdados - Exemplo
    • <p itemscope itemtype=&quot;http://www.thiagotpc.com/car&quot; itemid=&quot;C001&quot;>
    • <span itemprop=&quot;fabricante&quot;>Chevrolet</span>
    • <strong itemprop=&quot;modelo&quot;>Corsa</strong>
    • ano <time itemprop=&quot;anofab&quot;>2010</time>
    • cor <span itemprop=&quot;cor&quot;>vermelho</span>.</p>
    • <ul itemref=&quot;C001&quot;>
    • <li itemprop=&quot;preco&quot;>R$ 25.000,00</li>
    • <li itemprop=&quot;imposto&quot;>5%</li>
    • </ul>
    • </p>
  • Microdados
    • Alguns vocabulários:
      • http://www.data-vocabulary.org /
    • Teste:
      • http://www.google.com/webmasters/tools/richsnippets
    • Leia mais:
      • http://net.tutsplus.com/tutorials/html-css-techniques/html5-microdata-welcome-to-the-machine /
      • http://www.webmonkey.com/2010/09/microdata-html5s-best-kept-secret /
      • http://html5doctor.com/microdata /
  • RDFa
    • RDF é Resource Description Framework
    • Usa declarações simples (Triplas) para descrever as relações
      • Coisa-Propriedade-Valor
      • Sujeito-Predicado-Objeto
    • RDFa provê um conjunto de atributos XHTML que expressam dados RDF
  • Exemplo de RDFa
    • <?xml version=&quot;1.0&quot;?>
    • <rdf:RDF xmlns:rdf=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot;
    • xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot;>
      • <rdf:Description
      • rdf:about=&quot;http://www.estacio.br/universidarte/galeria/quadro3.jpg&quot;>
        • <dc:creator>Aloysio Novis</dc:creator>
      • </rdf:Description>
    • </rdf:RDF>
  • Exemplo de RDFa
    • http://www.dsc.ufcg.edu.br/~ulrich/Artigos/RDF-SBES02.pdf
  • Aprender mais sobre Web Semântica
    • http://semanticweb.org
    • http://www.w3.org/2001/sw/
    • http://www.w3.org/wiki/SemanticWeb
    • http://www.w3schools.com/semweb/
    • http://microformats.org/
  • Ferramentas de Busca com WS
    • http://www.hakia.com
    • http://www.yebol.com/
    • http://www.kngine.com/
    • http://www.evri.com/
    • http://www.sensebot.net/
    • http://swoogle.umbc.edu/
    • http://www.sindice.com/
    • http://swse.org/
    • http://www.factbites.com
    • http://watson.kmi.open.ac.uk/WatsonWUI/
  • Referências e Recomendações usadas nesta Aula
    • Interoperabilidade e Dados Abertos
      • Publicações do W3C.br e W3.org
        • Melhorando o acesso ao governo com o melhor uso da web
        • Dados Abertos Governamentais
    • Acessibilidade
      • http://webaim.org/
      • http://www.bengalalegal.com/
      • http://www.acessodigital.net/
      • http://webstandards.psu.edu/accessibility
    • Web Semântica
      • Livro Web Semântica, a Internet do Futuro, de Karin Breitman
      • Apresentação do prof. Ely Edison Matos
    • http://www.wikipedia.org