Diseño web inclusivo y la maquetación

1,863 views

Published on

Desde le concepto de diseñar para todos, abordamos la importancia de una maquetación inclusiva.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,863
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseño web inclusivo y la maquetación

  1. 1. DiseñoAccesible conceptos y estrategias de Diseño Universidad Tecnológica Nacional
  2. 2. Diseño Accesible <ul><li>Diseño Universal </li></ul><ul><ul><li>Concepto, Principios, inclusión social. </li></ul></ul><ul><li>Separación de estructura, contenido y presentación. </li></ul><ul><ul><li>Accesibilidad y Usabilidad </li></ul></ul><ul><li>Diseño líquido, flexible y rigido </li></ul><ul><li>Diseño centrado en el usuario </li></ul><ul><li>Mejora Progresiva </li></ul>
  3. 3. Diseño Accesible <ul><li>Diseño Universal </li></ul><ul><ul><li>Concepto: </li></ul></ul>El diseño universal es un paradigma del diseño relativamente nuevo, que dirige sus acciones al desarrollo de productos y entornos de fácil acceso para el mayor número de personas posible, sin la necesidad de adaptarlos o rediseñarlos de una forma especial. El concepto surge del diseño sin barreras, del diseño accesible y de la tecnología asistiva de apoyo. [1] A diferencia de estos conceptos el diseño universal alcanza todos los aspectos de la accesibilidad, y se dirige a todas las personas, incluidas las personas con discapacidad.Resuelve el problema con una visión holista, partiendo de la idea de la diversidad humana.
  4. 4. Diseño Accesible <ul><li>Diseño Universal </li></ul><ul><ul><li>Principios </li></ul></ul><ul><li>Algunos autores, un grupo de arquitectos, diseñadores de producto, ingenieros e investigadores del diseño ambiental han colaborado para establecer los siguientes principios del diseño universal, como guía en un rango de las disciplinas del diseño, incluidas el ambiente, productos y comunicaciones </li></ul><ul><li>Igualdad de uso : El diseño debe ser fácil de usar y adecuado para todas las personas independientemente de sus capacidades y habilidades. </li></ul><ul><li>Flexibilidad : El diseño debe poder adecuarse a un amplio rango de preferencias y habilidades individuales. </li></ul><ul><li>Simple e intuitivo : El diseño debe ser fácil de entender independientemente de la experiencia, los conocimientos, las habilidades o el nivel de concentración del usuario. </li></ul><ul><li>Información fácil de percibir : El diseño debe ser capaz de intercambiar información con usuario, independientemente de las condiciones ambientales o las capacidades sensoriales del mismo. </li></ul><ul><li>Tolerante a errores : El diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias fatales o no deseadas. </li></ul><ul><li>Escaso esfuerzo físico : El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible. </li></ul><ul><li>Dimensiones apropiadas : Los tamaños y espacios deben ser apropiados para el alcance, manipulación y uso por parte del usuario, independientemente de su tamaño, posición, y movilidad . </li></ul>
  5. 5. Diseño Accesible <ul><li>Diseño Universal </li></ul><ul><ul><li>Inclusión social </li></ul></ul>El Diseño Universal es parte esencial de la estrategia para conseguir una sociedad en la que todas las personas pueden participar. Un modelo de sociedad que se está redefiniendo tomando como base la inclusión de todos y que deriva, en gran medida, de la reflexión acerca del modo que la sociedad quiere acoger a la persona en toda su diversidad. Un ingrediente de esta diversidad es la discapacidad.
  6. 6. Diseño Accesible <ul><li>Separación de estructura, contenido y presentación. </li></ul><ul><ul><li>Accesibilidad y Usabilidad </li></ul></ul><ul><ul><li>Ejemplos </li></ul></ul>
  7. 7. Diseño Accesible <ul><li>Separación de estructura, contenido y presentación. </li></ul><ul><ul><li>Accesibilidad y Usabilidad </li></ul></ul><ul><ul><li>Ejemplos </li></ul></ul><ul><li>Separación de estructura, contenido y presentación. </li></ul><ul><ul><li>Accesibilidad y Usabilidad </li></ul></ul><ul><ul><li>Ejemplos </li></ul></ul>Diseño Accesible
  8. 8. Diseño Universal o Diseño para todos Tecnología de Servidor Remoto Software de Base del usuario (Sistema Operativo- Navegador) Interfaz Hardware de Base del usuario Resoluciones de monitor Dispositivos de salida(impresoras – Braille) Tecnología asistiva y/o aumentativa Dispositivos de Entrada (teclado-mouse) Diseño Accesible
  9. 9. Diseño Accesible Diseño Universal o Diseño para todos Tecnología de Servidor Remoto Software de Base del usuario (Sistema Operativo- Navegador) Interfaz Hardware de Base del usuario Resoluciones de monitor Dispositivos de salida(impresoras – Braille) Tecnología asistiva y/o aumentativa Dispositivos de Entrada (teclado-mouse)
  10. 10. Diseño Accesible Diseño Universal o Diseño para todos Sentencias dinámicas de conexión a la base de datos y a validaciones. Estilos de página CSS Código HTML Distribución de Contenidos: texto, imágenes, sonido video, etc. Información a comunicar Usabilidad Accesibilidad
  11. 11. Diseño Accesible <ul><li>Separación de estructura, contenido y presentación. </li></ul><ul><ul><li>Accesibilidad y Usabilidad </li></ul></ul><ul><ul><li>Ejemplos Sitio: Sidar </li></ul></ul><ul><ul><li>http://www.sidar.org/ </li></ul></ul>
  12. 12. Diseño Accesible <ul><li>Diseño líquido, flexible o rigido cuál es mejor? </li></ul><ul><li>Realidad del usuario es incierta: </li></ul><ul><ul><li>Distintos sistemas operativos </li></ul></ul><ul><ul><li>Distintas configuraciones </li></ul></ul><ul><ul><li>Distintas resoluciones de monitor </li></ul></ul>
  13. 13. Diseño Accesible <ul><li>Diseño líquido, flexible o rigido cuál es mejor? </li></ul>Diseñar para la web requiere una mentalidad flexible capaz de adaptarse a la mayoria de las posibilidades de presentación .
  14. 14. Diseño Accesible <ul><li>Diseño líquido, flexible o rigido cuál es mejor? </li></ul>Diseño Fijo: Los elementos de maquetación adoptan un ancho fijo. El diseñador “impone” un diseño con una distribución de elementos en pantalla que se visualice igual en todos los dispositivos y resoluciones. Las medidas fijas son inches (in), centímetros (cm), milímetros (mm), puntos (pt), picas (pc) Ventaja : control por los diseñadores de la apariencia final de su trabajo, heredado de los medios impresos tradicionales. Controlar la longitud de línea implica mejor legibilidad. Desvenaja en monitores de alta resolución desaprovecha espacio. Por ejemplo, en textos largos puede generar un scroll vertical excesivo . Su efecto es bloquear el tamaño de un elemento a un tamaño fijo.
  15. 15. Diseño Accesible <ul><li>Ejemplo de diseño fijo en distintas resoluciones </li></ul>
  16. 16. Diseño Accesible <ul><li>Diseño líquido, flexible o rigido cuál es mejor? </li></ul><ul><li>Diseño elástico o flexible : </li></ul><ul><li>Aprovecha al máximo el ancho de pantalla adaptando los elementos y su disposición a la resolución de monitor del usuario. Para ello los atributos que componen la interfaz deben estar expresados en medidas relativas: </li></ul><ul><ul><li>Los textos deben estar expresados en “em” </li></ul></ul><ul><ul><li>Las imágenes en % (porcentaje) </li></ul></ul><ul><ul><li>las capas contenedores de texto, imágenes y demas elementos de contenido en %(porcentaje). </li></ul></ul><ul><li>Ventaja : e sta opción reduce el scroll en pantalla y permite presentar más información de un solo vistazo </li></ul>
  17. 17. Diseño Accesible <ul><li>Ejemplo de diseño elástico o flexible en distintas resoluciones </li></ul>
  18. 18. Diseño Accesible <ul><li>Diseño centrado en el usuario </li></ul><ul><ul><li>Las estructuras de diseño interactivo que se ofrecen son comentados indicando  sus fortalezas y debilidades desde la expereincia de usuario (UE) ayudándonos a elegir la mas adecuada para su aplicación, dependiendo del contexto de uso y con el agregado de cómo podemos mejorarlas. </li></ul></ul><ul><ul><ul><li>Están agrupadas en las siguientes categorias: </li></ul></ul></ul>
  19. 19. Diseño Accesible <ul><li>Diseño centrado en el usuario </li></ul><ul><ul><li>Necesidades de usuario :  soluciones para facilitar la navegación por el sitio. </li></ul></ul><ul><ul><li>Aplicaciones necesarias: patrones que ayudan a que las aplicaciones o su diseño logren una mejor comunicación con el usuario. </li></ul></ul><ul><ul><li>Diseños de contexto de un site: distintos tipos de necesidades de comunicar que nos obliga a organizar y distribuir mejor la información en el sitio. </li></ul></ul><ul><ul><li>http://www.welie.com/patterns/index.php </li></ul></ul>
  20. 20. Diseño Accesible <ul><li>Diseño centrado en el usuario </li></ul><ul><ul><li>La Percepción es la organización e interpretación de la información captada por nuestros órganos sensoriales, del ambiente que nos rodea. No todo lo que percibimos es real, porque nuestras sensaciones no siempre pertenecen a la realidad objetiva. (Cada persona puede tener una impresión diferente de un mismo objeto, hecho o fenómeno). </li></ul></ul><ul><ul><li>Recordemos la expresión que dice: </li></ul></ul><ul><ul><li>En este mundo traidor, nada es verdad o mentira, todo es según el color del cristal conque se mira </li></ul></ul>
  21. 21. Diseño Accesible <ul><li>Diseño centrado en el usuario </li></ul><ul><li>La percepción es el Significado que en base a las experiencias, atribuimos a los estímulos que nos entran por los sentidos Las percepciones pueden ser tanto </li></ul><ul><ul><li>subjetivas (que dependen de los instintos particulares del individuo) como </li></ul></ul><ul><ul><li>selectivas (que dependen de sus experiencias, intereses y actitudes) y están directamente relacionadas con tres tipos de influencias: </li></ul></ul><ul><li>     </li></ul><ul><li>Las características físicas de los estímulos. </li></ul><ul><li>La interrelación del estímulo con su entorno. </li></ul><ul><li>Las condiciones internas particulares del individuo. </li></ul><ul><li>Vale la pena mencionar en este punto, que según estudios que se han realizado, el ser humano es sensible a los estímulos a través de los sentidos con el siguiente porcentaje de influencia : </li></ul>
  22. 22. Diseño Accesible <ul><li>Diseño centrado en el usuario </li></ul><ul><li>Vista 55% </li></ul><ul><li>Oído 18% </li></ul><ul><li>Olfato 12% </li></ul><ul><li>Tacto 10% </li></ul><ul><li>Gusto 5%. </li></ul>
  23. 23. Diseño Accesible <ul><li>Diseño centrado en el usuario </li></ul>
  24. 24. 26/03/11 Solución  diseño universal o para todos Diseño Universal o Diseño para todos Diseño Accesible
  25. 25. 26/03/11 Solución  diseño universal o para todos rampas tecnológicas Diseño Universal o Diseño para todos Diseño Accesible
  26. 26. 26/03/11 Solución  diseño universal o para todos las TIC como “APOYO” rampas tecnológicas Diseño Universal o Diseño para todos Diseño Accesible
  27. 27. Diseño Accesible <ul><li>Maria Dolores Garcia </li></ul><ul><li>Martin Baldassarre </li></ul><ul><li>Octubre 2010 </li></ul>

×