do design à implementação acessibilidade de websites e sistemas de informação 9º Congresso Brasileiro de Pesquisa e Desenv...
acessibilidade? qualidade ou caráter do que é acessível (algo a que se pode ter acesso) no âmbito da Internet associado à ...
acessível: <ul><li>para pessoas com algum tipo de limitação física </li></ul><ul><li>cegos, pessoas com baixa visão </li><...
 
acessível: <ul><li>em ambientes com restrições tecnológicas </li></ul><ul><li>sistemas operacionais defasados </li></ul><u...
projeto de websites meados da década de 90 criação implementação manutenção o “poderoso” webmaster
 
projeto de websites meados da década dos anos 2000 especialização dos profissionais <ul><li>aumento da complexidade dos pr...
projeto de websites meados da década dos anos 2000 criação implementação manutenção concepção do produto arquitetura da in...
 
projeto de websites “ isolamento” em nichos // conhecimento compartimentado designers pouco envolvimento nas questões técn...
design <ul><li>historicamente, separação entre criação e produção </li></ul><ul><li>designer conhece os materiais e meios ...
múltiplos meios de acesso
múltiplos mecanismos de interação
Pileus Internet Umbrella (Takashi Matsumoto, Sho Hashimoto, Keio University) http://www.pileus.net/
 
 
 
 
 
 
 
 
como projetar sites acessíveis em tal diversidade de situações?
projetando em camadas
tolerância a falhas o sistema deve funcionar mesmo na ocorrência de uma falha em um de seus componentes degradação gracios...
<ul><li>degradação graciosa </li></ul><ul><li>projeta-se tendo a melhor situação possível como parâmetro </li></ul><ul><li...
 
 
 
 
 
 
 
 
 
garantir o acesso ao conteúdo, em qualquer situação a apresentação deve se adequar dinamicamente mudanças no comportamento...
projeto de websites acessíveis compartilhar o conhecimento e trabalhar de forma mais integrada designers devem se envolver...
obrigado! :-) 9º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design ·  P&D Design 2010 mauro pinheiro Universida...
Próximos SlideShares
Carregando em…5
×

Do design à implementação - acessibilidade de websites e sistemas de informação

1.295 visualizações

Publicada em

Apresentado no 9º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design (P&D Design 2010).

Publicada em: Design, Negócios, Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.295
No SlideShare
0
A partir de incorporações
0
Número de incorporações
85
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Apresentar-me, background // Doutorando na PUC Dizer que o trabalho é específico sobre web, sobre sites. Baseado em parte na minha vivência no mercado, e no contato que mantenho com quem ainda trabalha no mercado.
  • Sites que só funcionam com mouse (flash com barra de rolagem própria que não responde ao teclado) Sites 100% em flash sem alternativa em texto
  • ACESSIBILIDADE NÃO é SÓ FAZER SITE ACESSÍVEIS PARA CEGOS!!!
  • Atualmente demanda de competências variadas num mesmo projeto, normalmente trabalho em equipe.
  • um esquema resumido do que podem ser as competências envolvidas no projeto de sites baseado unicamente na minha experiência profissional na época da Globo.com, pode ser diferente em outros contextos Agências podem ser diferentes, nem sempre fazem manutenção, ou as vezes são empresas diferentes. Por isso falo em COMPETÊNCIAS.
  • Cada um trabalha em uma “etapa”, mas as vezes perde-se a visão do todo. E ainda, desconhece detalhes das outras etapas.
  • Problema : essa &amp;quot;segmentação” favorece um certo &amp;quot;isolamento&amp;quot; de competências. Designers visuais, designers de interface, arquitetos de informação as vezes não conhecem tão bem aspectos de implementação.
  • Exemplo: usar reciclato para imprimir cadernos em cores em um livro, saber que o papel reage diferente do branco, do couché. Exemplo: funcionalidade que previmos não levou em conta quantidade de acessos ao servidor (verificava de X em X segundos)
  • diversidade de meios de acesso com características próprias, com particularidades que vão influenciar na estratégia de implementação e na experiência de uso do sistema. Não é só uma questão de “mudou o tamanho da tela”. É outro objeto, com outra lógica de uso, outro contexto, e tem características próprias.
  • diversidade de meios de acesso com características próprias, com particularidades que vão influenciar na estratégia de implementação e na experiência de uso do sistema
  • Pileus is an umbrella connected to the Internet to make walking in rainy days fun. Pileus has a large screen on the top surface, a built-in camera, a motion sensor, GPS, and a digital compass. The current prototype has two main functions: photo-sharing and 3D map navigation. The photo function is connected to a major web service: Flickr API. A user can take photo with a camera on the umbrella, and pictures are uploaded to Flickr in two minutes with context tags via a wireless Internet connection. User can also enjoy theirselves watching photo-streams downloaded from Flickr with simple operation of wrist snapping. It also has a function of 3D Map. Detecting a location data from GPS, it shows a 3D bird view around the user. User can walk-through a city comparing the 3D views and real sights, and the map is always updated by GPS and a digital compass. It aims to create natural augmented reality with a large information screen on the umbrella.
  • O mesmo sistema visto em ambientes distintos: as funçÕes permanecem, mas as vezes a maneira de acessá-las e de usá-las muda.
  • O mesmo sistema visto em ambientes distintos: as funçÕes permanecem, mas as vezes a maneira de acessá-las e de usá-las muda.
  • mesmo sistema visto em ambientes distintos: as funções permanecem, mas as vezes a maneira de acessá-las e de usá-las muda. o iPad tem um aplicativo próprio, que muda consideravelmente a experiência de uso, inclusive aproveitando o acelerômetro e a possibilidade de ter dois layouts distintos (retrato e paisagem – portrait e landscape)
  • O mesmo sistema visto em ambientes distintos: as funçÕes permanecem, mas as vezes a maneira de acessá-las e de usá-las muda. A versão web para esse celular, o design foi reduzido ao mínimo, a interação é bem linear – cada ação dá refresh na tela toda. Alternativa é usar aplicativo específico, que usa não mais a web, apenas pega os dados e formata para um interface própria.
  • Site da Maria Filó, todo em flash, dando o tom da coleção.
  • A opção sem flash, no iPad. O conteúdo de todo o site é apresentado na mesma página, com o mínimo de formatação. O comportamento da interface mudou completamente, e mesmo a navegação deixou de fazer sentido – está tudo na mesma página.
  • Separar bem cada componente do site. Atribuir corretamente as categorias na camada ‘conteúdo’, classificando as informações, definindo hierarquias claras entre os elementos de conteúdo. na apresentação, há uma “tradução” das categorias definidas anteriormente. Numa tela, isso se traduz visualmente. Num ledor de telas, pode ser criado outras maneiras de expressar essa hierarquia. o comportamento é a última camada, e pode variar de acordo com a interface com a qual interagimos com o sistema.
  • Essa diferença é sutil, mas reflete principalmente uma visão de projeto. Você quer melhorar ou piorar o seu site?
  • mouse-over realça a foto.
  • carrega a página toda. Somente o botão ‘galery’ e navegação linear estão disponíveis. some a navegação por ‘film strip’.
  • carrega a página toda
  • atribuir corretamente as categorias na camada ‘conteúdo’, classificando as informações, definindo hierarquias claras entre os elementos de conteúdo. na apresentação, há uma “tradução” das categorias definidas anteriormente. Numa tela, isso se traduz visualmente. Num ledor de telas, pode ser criado outras maneiras de expressar essa hierarquia. o comportamento é a última camada, e pode variar de acordo com a interface com a qual interagimos com o sistema.
  • Do design à implementação - acessibilidade de websites e sistemas de informação

    1. 1. do design à implementação acessibilidade de websites e sistemas de informação 9º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design · P&D Design 2010 mauro pinheiro Universidade Federal do Espírito Santo (UFES) Pontifícia Universidade Católica do Rio de Janeiro (PUC-Rio) [email_address]
    2. 2. acessibilidade? qualidade ou caráter do que é acessível (algo a que se pode ter acesso) no âmbito da Internet associado à idéia de que os sistemas devem ser acessíveis por qualquer indivíduo, em qualquer situação de acesso.
    3. 3. acessível: <ul><li>para pessoas com algum tipo de limitação física </li></ul><ul><li>cegos, pessoas com baixa visão </li></ul><ul><li>pessoas com deficiência motora </li></ul><ul><li>etc. </li></ul>
    4. 5. acessível: <ul><li>em ambientes com restrições tecnológicas </li></ul><ul><li>sistemas operacionais defasados </li></ul><ul><li>pouca velocidade de transmissão de dados </li></ul><ul><li>telefones celulares, tablets </li></ul><ul><li>ambientes que não suportam determinadas soluções de desenvolvimento (ex. javascript) </li></ul><ul><li>etc. </li></ul>
    5. 6. projeto de websites meados da década de 90 criação implementação manutenção o “poderoso” webmaster
    6. 8. projeto de websites meados da década dos anos 2000 especialização dos profissionais <ul><li>aumento da complexidade dos projetos </li></ul><ul><li>produção “linha de montagem” </li></ul>
    7. 9. projeto de websites meados da década dos anos 2000 criação implementação manutenção concepção do produto arquitetura da informação design visual programação client side programação server side atualização de textos atualização de imagens redação // edição infografia métricas. avaliação ambiente de publicação
    8. 11. projeto de websites “ isolamento” em nichos // conhecimento compartimentado designers pouco envolvimento nas questões técnicas de implementação desenvolvedores pouco envolvimento na concepção do produto
    9. 12. design <ul><li>historicamente, separação entre criação e produção </li></ul><ul><li>designer conhece os materiais e meios de produção (características, limitações, possibilidades) </li></ul><ul><li>economia de recursos (de produção e durante o uso) </li></ul>qual o conhecimento dos designers atualmente sobre os meios de produção no ambiente web?
    10. 13. múltiplos meios de acesso
    11. 14. múltiplos mecanismos de interação
    12. 15. Pileus Internet Umbrella (Takashi Matsumoto, Sho Hashimoto, Keio University) http://www.pileus.net/
    13. 24. como projetar sites acessíveis em tal diversidade de situações?
    14. 25. projetando em camadas
    15. 26. tolerância a falhas o sistema deve funcionar mesmo na ocorrência de uma falha em um de seus componentes degradação graciosa melhorias progressivas X
    16. 27. <ul><li>degradação graciosa </li></ul><ul><li>projeta-se tendo a melhor situação possível como parâmetro </li></ul><ul><li>em ambientes limitados o site “perde” funcionalidades / conteúdo / comportamento </li></ul><ul><li>o site é “degradado” </li></ul><ul><li>mesmo as informações que não serão utilizadas corretamente são enviadas </li></ul><ul><li>melhorias progressivas </li></ul><ul><li>projeta-se tendo a situação mais simples possível como parâmetro </li></ul><ul><li>o site “ganha” funcionalidades a medida que melhoram as condições de acesso </li></ul><ul><li>o site é “melhorado” </li></ul><ul><li>as informações só são enviadas quando podem ser utilizadas corretamente </li></ul>
    17. 37. garantir o acesso ao conteúdo, em qualquer situação a apresentação deve se adequar dinamicamente mudanças no comportamento não devem comprometer o sistema projetando em camadas
    18. 38. projeto de websites acessíveis compartilhar o conhecimento e trabalhar de forma mais integrada designers devem se envolver com aspectos técnicos da produção visão ampla do que é acessibilidade trabalho em equipe
    19. 39. obrigado! :-) 9º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design · P&D Design 2010 mauro pinheiro Universidade Federal do Espírito Santo (UFES) Pontifícia Universidade Católica do Rio de Janeiro (PUC-Rio) [email_address]

    ×