Do design à implementação - acessibilidade de websites e sistemas de informação
•
1 j'aime•518 vues
O documento discute a importância do design acessível de websites e sistemas de informação. Apresenta a evolução do projeto de websites ao longo dos anos e a necessidade de uma abordagem compartilhada e integrada entre designers e desenvolvedores para garantir a acessibilidade em diferentes ambientes e para pessoas com necessidades diversas. Defende que projetar sites em camadas e com tolerância a falhas é essencial para fornecer acesso ao conteúdo para todos.
![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]](https://image.slidesharecdn.com/mauropinheiro-pd2010-v01-101018125923-phpapp02/85/do-design-implementao-acessibilidade-de-websites-e-sistemas-de-informao-1-320.jpg)
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Do design à implementação - acessibilidade de websites e sistemas de informação
Similaire à Do design à implementação - acessibilidade de websites e sistemas de informação (20)
Plus de Mauro Pinheiro
Plus de Mauro Pinheiro (20)
Do design à implementação - acessibilidade de websites e sistemas de informação
- 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. 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.
- 6. projeto de websites meados da década de 90 criação implementação manutenção o “poderoso” webmaster
- 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
- 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
- 13. múltiplos meios de acesso
- 14. múltiplos mecanismos de interação
- 15. Pileus Internet Umbrella (Takashi Matsumoto, Sho Hashimoto, Keio University) http://www.pileus.net/
- 24. como projetar sites acessíveis em tal diversidade de situações?
- 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
- 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
- 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
- 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]
Notes de l'éditeur
- 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 "segmentação” favorece um certo "isolamento" 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.