Módulo 5: Diseño líquido, diseño para Todos
El concepto de Diseño Universal
Los principios y directrices esenciales del diseño universal según los define el Centro para el Diseño Universal de la Universidad del Estado de Carolina del Norte:
- Uso equitativo
- Flexibilidad en el uso
- Uso sencillo e intuitivo
- Información perceptible
- Tolerancia al error
- Esfuerzo físico reducido
- Tamaño y espacio para acercarse y usar
En un momento de nuestra vida, cualquiera de nosotros puede llegar a experimentar una transición física. Ya sea una minusvalía temporal, como un hueso roto, o una discapacidad permanente, nos veremos enfrentados al cambio.
El simple proceso de envejecimiento nos lleva a ser dependientes de otros. El diseño universal nos permite transitar por esos cambios y seguir disfrutando de igualdad de oportunidades, autodeterminación y calidad de vida.
El concepto de Diseño Universal
Los principios y directrices esenciales del diseño universal según los define el Centro para el Diseño Universal de la Universidad del Estado de Carolina del Norte:
- Uso equitativo
- Flexibilidad en el uso
- Uso sencillo e intuitivo
- Información perceptible
- Tolerancia al error
- Esfuerzo físico reducido
- Tamaño y espacio para acercarse y usar
En un momento de nuestra vida, cualquiera de nosotros puede llegar a experimentar una transición física. Ya sea una minusvalía temporal, como un hueso roto, o una discapacidad permanente, nos veremos enfrentados al cambio.
El simple proceso de envejecimiento nos lleva a ser dependientes de otros. El diseño universal nos permite transitar por esos cambios y seguir disfrutando de igualdad de oportunidades, autodeterminación y calidad de vida.
El concepto de Diseño Universal
Los principios y directrices esenciales del diseño universal según los define el Centro para el Diseño Universal de la Universidad del Estado de Carolina del Norte:
- Uso equitativo
- Flexibilidad en el uso
- Uso sencillo e intuitivo
- Información perceptible
- Tolerancia al error
- Esfuerzo físico reducido
- Tamaño y espacio para acercarse y usar
En un momento de nuestra vida, cualquiera de nosotros puede llegar a experimentar una transición física. Ya sea una minusvalía temporal, como un hueso roto, o una discapacidad permanente, nos veremos enfrentados al cambio.
El simple proceso de envejecimiento nos lleva a ser dependientes de otros. El diseño universal nos permite transitar por esos cambios y seguir disfrutando de igualdad de oportunidades, autodeterminación y calidad de vida.
El concepto de Diseño Universal
Los principios y directrices esenciales del diseño universal según los define el Centro para el Diseño Universal de la Universidad del Estado de Carolina del Norte:
- Uso equitativo
- Flexibilidad en el uso
- Uso sencillo e intuitivo
- Información perceptible
- Tolerancia al error
- Esfuerzo físico reducido
- Tamaño y espacio para acercarse y usar
En un momento de nuestra vida, cualquiera de nosotros puede llegar a experimentar una transición física. Ya sea una minusvalía temporal, como un hueso roto, o una discapacidad permanente, nos veremos enfrentados al cambio.
El simple proceso de envejecimiento nos lleva a ser dependientes de otros. El diseño universal nos permite transitar por esos cambios y seguir disfrutando de igualdad de oportunidades, autodeterminación y calidad de vida.
El concepto de Diseño Universal
Los principios y directrices esenciales del diseño universal según los define el Centro para el Diseño Universal de la Universidad del Estado de Carolina del Norte:
- Uso equitativo
- Flexibilidad en el uso
- Uso sencillo e intuitivo
- Información perceptible
- Tolerancia al error
- Esfuerzo físico reducido
- Tamaño y espacio para acercarse y usar
En un momento de nuestra vida, cualquiera de nosotros puede llegar a experimentar una transición física. Ya sea una minusvalía temporal, como un hueso roto, o una discapacidad permanente, nos veremos enfrentados al cambio.
El simple proceso de envejecimiento nos lleva a ser dependientes de otros. El diseño universal nos permite transitar por esos cambios y seguir disfrutando de igualdad de oportunidades, autodeterminación y calidad de vida.
El concepto de Diseño Universal
Los principios y directrices esenciales del diseño universal según los define el Centro para el Diseño Universal de la Universidad del Estado de Carolina del Norte:
- Uso equitativo
- Flexibilidad en el uso
- Uso sencillo e intuitivo
- Información perceptible
- Tolerancia al error
- Esfuerzo físico reducido
- Tamaño y espacio para acercarse y usar
En un momento de nuestra vida, cualquiera de nosotros puede llegar a experimentar una transición física. Ya sea una minusvalía temporal, como un hueso roto, o una discapacidad permanente, nos veremos enfrentados al cambio.
El simple proceso de envejecimiento nos lleva a ser dependientes de otros. El diseño universal nos permite transitar por esos cambios y seguir disfrutando de igualdad de oportunidades, autodeterminación y calidad de vida.
El concepto de Diseño Universal
Los principios y directrices esenciales del diseño universal según los define el Centro para el Diseño Universal de la Universidad del Estado de Carolina del Norte:
- Uso equitativo
- Flexibilidad en el uso
- Uso sencillo e intuitivo
- Información perceptible
- Tolerancia al error
- Esfuerzo físico reducido
- Tamaño y espacio para acercarse y usar
En un momento de nuestra vida, cualquiera de nosotros puede llegar a experimentar una transición física. Ya sea una minusvalía temporal, como un hueso roto, o una discapacidad permanente, nos veremos enfrentados al cambio.
El simple proceso de envejecimiento nos lleva a ser dependientes de otros. El diseño universal nos permite transitar por esos cambios y seguir disfrutando de igualdad de oportunidades, autodeterminación y calidad de vida.
El concepto de Diseño Universal
Los principios y directrices esenciales del diseño universal según los define el Centro para el Diseño Universal de la Universidad del Estado de Carolina del Norte:
- Uso equitativo
- Flexibilidad en el uso
- Uso sencillo e intuitivo
- Información perceptible
- Tolerancia al error
- Esfuerzo físico reducido
- Tamaño y espacio para acercarse y usar
En un momento de nuestra vida, cualquiera de nosotros puede llegar a experimentar una transición física. Ya sea una minusvalía temporal, como un hueso roto, o una discapacidad permanente, nos veremos enfrentados al cambio.
El simple proceso de envejecimiento nos lleva a ser dependientes de otros. El diseño universal nos permite transitar por esos cambios y seguir disfrutando de igualdad de oportunidades, autodeterminación y calidad de vida.
Pauta 3.4 de las W3C WCAG 1.0
3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. [Prioridad 2]
Qué significa:
La maquetación, la presentación y los contenidos de texto de una página deben tener la posibilidad de adaptación a la interfaz utilizada por el usuario, sin superposiciones o perdida de informaciones en caso de redimensionamiento (ampliación o reducción de visualización y/o de los carácteres).
em, %, ex, px
Las unidades relativas
- em
- el tamaño ('font-size') de la fuente relevante
H1 { margin: 0.5em }- %
- valor relativo al valor del elemento padre
P { line-height: 140% }- ex
- la 'altura de la x' de la fuente relevante
H1 { margin: 1ex }
px- pixeles, relacionados con los dispositivos visuales
P { font-size: 14px }
Técnicas de diseño
- Diseño fijo
- Diseño que utiliza dimensiones de tamaño absoluto: inches (in), centimetros (cm), milímetros (mm), puntos (pt), picas (pc). Su efecto es bloquear el tamaño de un elemento a un tamaño fijo.
- Diseño liquido (o fluido)
- Diseño que utiliza cómo unidad de medida el porcentaje (%). Su efecto es la adaptción de los elementos y su disposición aprovechando todo el ancho de pantalla que será calcualada en base a la resolución del dispositivo utilizado.
- Diseño elástico (o flexible)
- Diseño que utiliza cómo unidad de medida em. Su efecto es adaptar el ancho de los elementos y su disposición en base al tamaño de texto configurado por el usuario.
- Diseño hibrido
- Diseño que utiliza unidades de medida absolutas, porcentaje y em.
Técnicas de diseño
- Diseño fijo
- Diseño que utiliza dimensiones de tamaño absoluto: inches (in), centimetros (cm), milímetros (mm), puntos (pt), picas (pc). Su efecto es bloquear el tamaño de un elemento a un tamaño fijo.
- Diseño liquido (o fluido)
- Diseño que utiliza cómo unidad de medida el porcentaje (%). Su efecto es la adaptción de los elementos y su disposición aprovechando todo el ancho de pantalla que será calcualada en base a la resolución del dispositivo utilizado.
- Diseño elástico (o flexible)
- Diseño que utiliza cómo unidad de medida em. Su efecto es adaptar el ancho de los elementos y su disposición en base al tamaño de texto configurado por el usuario.
- Diseño hibrido
- Diseño que utiliza unidades de medida absolutas, porcentaje y em.
Técnicas de diseño
- Diseño fijo
- Diseño que utiliza dimensiones de tamaño absoluto: inches (in), centimetros (cm), milímetros (mm), puntos (pt), picas (pc). Su efecto es bloquear el tamaño de un elemento a un tamaño fijo.
- Diseño liquido (o fluido)
- Diseño que utiliza cómo unidad de medida el porcentaje (%). Su efecto es la adaptción de los elementos y su disposición aprovechando todo el ancho de pantalla que será calcualada en base a la resolución del dispositivo utilizado.
- Diseño elástico (o flexible)
- Diseño que utiliza cómo unidad de medida em. Su efecto es adaptar el ancho de los elementos y su disposición en base al tamaño de texto configurado por el usuario.
- Diseño hibrido
- Diseño que utiliza unidades de medida absolutas, porcentaje y em.
Técnicas de diseño
- Diseño fijo
- Diseño que utiliza dimensiones de tamaño absoluto: inches (in), centimetros (cm), milímetros (mm), puntos (pt), picas (pc). Su efecto es bloquear el tamaño de un elemento a un tamaño fijo.
- Diseño liquido (o fluido)
- Diseño que utiliza cómo unidad de medida el porcentaje (%). Su efecto es la adaptción de los elementos y su disposición aprovechando todo el ancho de pantalla que será calcualada en base a la resolución del dispositivo utilizado.
- Diseño elástico (o flexible)
- Diseño que utiliza cómo unidad de medida em. Su efecto es adaptar el ancho de los elementos y su disposición en base al tamaño de texto configurado por el usuario.
- Diseño hibrido
- Diseño que utiliza unidades de medida absolutas, porcentaje y em.
Técnicas de diseño
- Diseño fijo
- Diseño que utiliza dimensiones de tamaño absoluto: inches (in), centimetros (cm), milímetros (mm), puntos (pt), picas (pc). Su efecto es bloquear el tamaño de un elemento a un tamaño fijo.
- Diseño liquido (o fluido)
- Diseño que utiliza cómo unidad de medida el porcentaje (%). Su efecto es la adaptción de los elementos y su disposición aprovechando todo el ancho de pantalla que será calcualada en base a la resolución del dispositivo utilizado.
- Diseño elástico (o flexible)
- Diseño que utiliza cómo unidad de medida em. Su efecto es adaptar el ancho de los elementos y su disposición en base al tamaño de texto configurado por el usuario.
- Diseño hibrido
- Diseño que utiliza unidades de medida absolutas, porcentaje y em.
¿El diseño (más) accesible? 1
Diseño fijo
- A favor
- Los diseñadores disfrutan de un control absoluto en determinar tamaño y posicionamiento de los elementos. Favorece la legibilidad.
- En contra
- No adapto en pantalla: no se conoce a priori las características del monitor utilizado por el usuario. "Bloquea" la página según el prejuicio del papel.
Diseño liquido
- A favor
- Presentación de más informaciones en pantalla y reducción del efecto scroll. Adaptación al medio.
- En contra
- Causa lineas de texto muy largas en caso de resoluciones de pantalla muy altas: dificultad en la lectura.
¿El diseño (más) accesible? 2
Diseño elástico
- A favor
- Los diseñadores "controlan" tamaño y disposición de los elementos. Evita la sobreposición de elementos.
- En contra
- Al aumentar el tamaño del texto, en determinados diseños puede causar la comparsa de la barra de scroll horizontal: dificultad en la legibilidad.
Diseño hibrido
- A favor
- Todo lo bueno de aporta el diseño fijo, fluido y elástico.
- En contra
- ¿Hacemos una investigación?
En fin, ¿cual es diseño (más) accesible?
- No hay un diseño más accesible que otro.
- Se elije el tipo de diseño en base a las necesidades (proyecto).
- La W3C WAI no establece cual sea el diseño más accesible sino que sea transformable de una manera agradable y que el contenido sea comprensible y navegable.
¿Qué técnica utilizo yo?
Hablando en terminos de pantalla, casi siempre el diseño hibrido porque puedo disfrutar de las ventajas que cada diseño ofrece consiguiendo bajar al minimo el porcentaje de errores de accesibilidad.
En fin, ¿cual es diseño (más) accesible?
- No hay un diseño más accesible que otro.
- Se elije el tipo de diseño en base a las necesidades (proyecto).
- La W3C WAI no establece cual sea el diseño más accesible sino que sea transformable de una manera agradable y que el contenido sea comprensible y navegable.
¿Qué técnica utilizo yo?
Hablando en terminos de pantalla, casi siempre el diseño hibrido porque puedo disfrutar de las ventajas que cada diseño ofrece consiguiendo bajar al minimo el porcentaje de errores de accesibilidad.
En fin, ¿cual es diseño (más) accesible?
- No hay un diseño más accesible que otro.
- Se elije el tipo de diseño en base a las necesidades (proyecto).
- La W3C WAI no establece cual sea el diseño más accesible sino que sea transformable de una manera agradable y que el contenido sea comprensible y navegable.
¿Qué técnica utilizo yo?
Hablando en terminos de pantalla, casi siempre el diseño hibrido porque puedo disfrutar de las ventajas que cada diseño ofrece consiguiendo bajar al minimo el porcentaje de errores de accesibilidad.
En fin, ¿cual es diseño (más) accesible?
- No hay un diseño más accesible que otro.
- Se elije el tipo de diseño en base a las necesidades (proyecto).
- La W3C WAI no establece cual sea el diseño más accesible sino que sea transformable de una manera agradable y que el contenido sea comprensible y navegable.
¿Qué técnica utilizo yo?
Hablando en terminos de pantalla, casi siempre el diseño hibrido porque puedo disfrutar de las ventajas que cada diseño ofrece consiguiendo bajar al minimo el porcentaje de errores de accesibilidad.
En fin, ¿cual es diseño (más) accesible?
- No hay un diseño más accesible que otro.
- Se elije el tipo de diseño en base a las necesidades (proyecto).
- La W3C WAI no establece cual sea el diseño más accesible sino que sea transformable de una manera agradable y que el contenido sea comprensible y navegable.
¿Qué técnica utilizo yo?
Hablando en terminos de pantalla, casi siempre el diseño hibrido porque puedo disfrutar de las ventajas que cada diseño ofrece consiguiendo bajar al minimo el porcentaje de errores de accesibilidad.
El nuovo SIDAR.org
Un ejemplo de diseño hibrido
www.sidar.org
www.fundacion.sidar.org
Un pequeño retoque
El actual
Seminario SIDAR
Fundación SIDAR
Adaptabilidad
Transformación agradable
Aumento del tamaño del texto
Transformación agradable
Más ampliación del texto.
Legibilidad
Personalizar la navegación.
Legibilidad
Portabilidad
Hojas de estilo (CSS) definida por el medio "de mano" (@media handheld)
Portabilidad
Hojas de estilo (CSS) definida por el medio imprenta (@media print)
Útil también para la creación de un archivo en formato PDF
En fin, algunas sugerencias:
- Evitar el utilizo del pixel (px) para definir el tamaño del texto. Si se utiliza para determinar el ancho de un elemento (caja) hacer pruebas en las diferentes condiciones de navegación.
- Si nuestro diseño en determinadas condiciones no ofrece una buena legibilidad, ofrecer estilos de presentación alternativos.
- Cada dispositivo de navegación (pantalla, PDA, etc.) o simplemente de presentación (impresora), requiere determinadas carácteristicas en el diseño. Si nuestro diseño no es adapto a un determinado dispositivo, crear la CSS especifica.
En fin, algunas sugerencias:
- Evitar el utilizo del pixel (px) para definir el tamaño del texto. Si se utiliza para determinar el ancho de un elemento (caja) hacer pruebas en las diferentes condiciones de navegación.
- Si nuestro diseño en determinadas condiciones no ofrece una buena legibilidad, ofrecer estilos de presentación alternativos.
- Cada dispositivo de navegación (pantalla, PDA, etc.) o simplemente de presentación (impresora), requiere determinadas carácteristicas en el diseño. Si nuestro diseño no es adapto a un determinado dispositivo, crear la CSS especifica.
En fin, algunas sugerencias:
- Evitar el utilizo del pixel (px) para definir el tamaño del texto. Si se utiliza para determinar el ancho de un elemento (caja) hacer pruebas en las diferentes condiciones de navegación.
- Si nuestro diseño en determinadas condiciones no ofrece una buena legibilidad, ofrecer estilos de presentación alternativos.
- Cada dispositivo de navegación (pantalla, PDA, etc.) o simplemente de presentación (impresora), requiere determinadas carácteristicas en el diseño. Si nuestro diseño no es adapto a un determinado dispositivo, crear la CSS especifica.
En fin, algunas sugerencias:
- Evitar el utilizo del pixel (px) para definir el tamaño del texto. Si se utiliza para determinar el ancho de un elemento (caja) hacer pruebas en las diferentes condiciones de navegación.
- Si nuestro diseño en determinadas condiciones no ofrece una buena legibilidad, ofrecer estilos de presentación alternativos.
- Cada dispositivo de navegación (pantalla, PDA, etc.) o simplemente de presentación (impresora), requiere determinadas carácteristicas en el diseño. Si nuestro diseño no es adapto a un determinado dispositivo, crear la CSS especifica.
...y no olvidamos que
"El poder de la Web está en su universalidad. El acceso de todo el mundo con independencia de su discapacidad es un aspecto esencial"
Lo dijo Tim Berners-Lee,
Director del W3C e inventor de la “World Wide Web”
Muchas gracias a todos
Marco Giacomuzzi
marco@seraccesible.net
Ciao a tutti.
El uso de ésta unidad de medida conlleva problemas de accesibilidad a los ipovidentes por lo tanto podemos considerar los pixeles cómo unidad de tipo absoluto desaconsejandone el utilizo.