| |

W3C: fallos de accesibilidad (II)

ByLuis

Seguimos con los fallos de accesibilidad que se suelen cometer en el desarrollo web, que nos ofrece la W3C y que empezamos a tratar hace unos días.

Mostrar imágenes con información importante mediante estilos

Se trata de usar una imagen que contiene información (por ejemplo para los enlaces del menú) y mostrarla como fondo de un elemento y que no haya un texto que indique el contenido de la imagen.

Una solución es escribir el texto pero no hacerlo visible, para ello usaremos la propiedad text-ident, si le damos un valor negativo elevado el texto desaparecerá por la izquierda. Por ejemplo, tenemos una imagen titulo.png que tiene el título del blog con un diseño especial, lógicamente queremos que se vea así por temas de diseño e imagen. Ahora bien, si solo mostramos la imagen, no somos capaces de leer el contenido de esta. Por ello tendremos que hacer lo siguiente para que el texto aparezca sin que haya estilos y con estilos solo aparezca la imagen:

h1 {
background: url(titulo.png);
width: 200px;
height: 100px;
text-indent: -10000px;
}
<h1>Título</h1>

Usar el estilo blink sin el mecanismo para parar el parpadeo

Esta es corta, no uses jamás text-decoration: blink. Y si por un casual no te queda otra posibilidad que usarlo, crea un script que pare el parpadeo a los 3 segundos.

Usar un applet o un flash que parpadee sin el mecanismo para pararlos

Lo mismo que el punto anterior, pero enfocado a applets y a animaciones Flash.

Usar subtítulos que omiten parte del diálogo o sonidos importantes

Si vas a ofrecer un sonido, una conversación y no muestras los subtítulos con todo el contenido (conversación y sonidos destacados), no se trata de un buen subtítulo y puede haber información importante que se escape.

Más información

Similar Posts

|

Botones: Distintas formas de enviar un formulario

ByLuis

input-image.gif Existen distintas formas de enviar los datos de un formulario a la aplicación web que se encarga de procesar la información. Todos los métodos son igualmente válidos, y va según los gustos usar unos u otros.

Los formularios dentro de HTML disponen de sus propios elementos para enviar los datos al formulario. El elemento en cuestión es el input, el cual según sea su atributo type, podemos enviar los datos directamente con el elemento submit o podemos reiniciar los valores de los elementos del formulario con el botón reset.

<input type="submit" value="Enviar" />
<input type="submit" value="Reiniciar" />

En los formularios de Sentido Web usamos los elementos input con el type=”imagen”. Este elemento usa una imagen como elemento submit, devolviendo la posición x e y de la imagen donde se ha producido el evento:

<input name="preview" type="image" align="top" value="Revisar" src="http://sentidoweb.com/i/bt/bt-revisar.gif" />
<input name="post" type="image" align="top" value="Publicar" src="http://sentidoweb.com/i/bt/bt-publicar.gif" />

Cuando se usa esta posibilidad, se enviarán dos parámetros al script usando el texto que hayamos usado en el atributo name, se le añade un _x para la coordenada x y un _y para la coordenada y, en el caso de Firefox también manda el parámetro sin sufijo. En el caso anterior, para saber cual de los dos se ha pulsado, se comprueba si hay parámetro preview_x o preview_y para el primer caso y post_x o post_y para el segundo caso.

Siguiendo con el elemento input, podemos usar el botón (type=”button”), pero habrá que añadirle el evento onclick para que haga el submit.

<input type="button" value="Enviar" onclick="document.forms[0].submit()" />

Otra forma distinta es mediante el uso de un enlace, en el href o en el onclick se deberá escribir el código Javascript necesario para el envío del formulario:

<a href="javascript:document.forms[0].submit()">Enviar</a>

Y por último, pero no por ello menos importante ;), mediante la pulsación de la tecla intro en una de las cajas del formulario. Esto lo realizan normalmente los navegadores cuando dentro de un formulario hay alguna forma estándar de hacer el submit, pero en el caso de que no queramos poner botón de submit, tendremos que ejecutar el siguiente código en el evento onkeypress de la caja:

<input name="nombre" onkeypress="if (event.keyCode == 13) document.forms[0].submit()"/>
|

Cómo tener dual-boot con Vista y XP

ByLuis

Windows VistaAlguien con valor (y humor) que nos explica cómo hacer que tu ordenador tenga dual-boot con Windows Vista y Windows XP. Sobre todo, recomienda no hacerlo, ya que entre otras cosas, son los propios de Microsoft quienes dicen que quién lo haga, que lo haga en un ordenador de pruebas.
Lo primero es bajarse la Beta 2 de Vista o pedir que te la manden. Son 3.12 Gb, así que hay que tener paciencia y un gestor de descargas. Una vez obtenido el .iso, lo pasamos a DVD y empezamos la instalación.
Vista sólo funciona en una partición primaria, la misma que usa XP, por lo que hay que crearse otra en el espacio libre que hay en C:, nos recomienda que usemos la utilidad Norton PartitionMagic, ya que es el único que crea particiones nuevas sin borrar lo que ya existía antes.
Una vez creada la partición (usa la unidad V:), empezamos a instalar Vista desde el DVD, si no hubieramos realizado la partición, Vista nos hubiera preguntado si renombrábamos la carpeta windows de XP, lo cual no es lo que deseamos. Vista tardará mucho en copiar todos los archivos y en reiniciarse unas cuantas veces, a parte de que no dispone de los drivers de todos los dispositivos, por lo que es bueno que los tengas a mano para poder instalarlos.
Una vez acabado y reiniciado el ordenador, nos pedirá que versión de Windows queremos arrancar: Microsoft Windows (Vista) o Earlier version of Windows (XP).
Windows Vista Beta: How to dual-boot Windows XP and Windows Vista

| |

W3C: fallos de accesibilidad (III)

ByLuis

Seguimos con los fallos más frecuentes en accesibilidad que la W3C nos recuerda.

Cambio de contexto cuando se quita el foco a un elemento en un formulario

Este error ocurre cuando un elemento de un formulario pierde el foco y cambia el contexto de la página, por ejemplo debido a que se hace un submit del formulario.

Obtener el foco de un elemento con el teclado y no poder salir usando el teclado

Este fallo no es demasiado frecuente, pero se da cuando navegando mediante el teclado, entramos en el contenido de un elemento (por ejemplo un plugin que nos muestra un formato específico como SVG) y no podemos volver al contenido principal, o salir de este elemento usando el teclado.

Tener un time-out para la sesión sin ofrecer la posibilidad de guardar la información para recuperarla cuando re-auntentiquemos

Muchos servicios web necesitan autenticación y suelen disponer de un sistema de time-out para finalizar la sesión cuando ha habido un tiempo largo de espera sin actividad. Personas con discapacidad pueden necesitar más tiempo de lo normal para realizar una acción (por ejemplo rellenar un formulario), si la sesión le finaliza, sin la posibilidad de recuperar el estado en el que se estaba antes de finalizar la sesión, la persona deberá volver a empezar de nuevo, por lo que es posible que tampoco pueda finalizar la acción.

Texto alternativo no representa correctamente el texto original ya que este muestra información debido a diferencia de colores

Supongamos que tenemos una gráfica de barras en las que se muestra la población masculina y femenina según los paises de una región. Para distinguir qué datos pertenecen a uno u otro género, se muestra usando dos colores: azul hombres, rojo mujeres. El texto alternativo de esa imagen suele indicar las cantidades, pero no a qué genero pertenece.

Más información

| | |

Laboratorio: búsqueda y reemplazo masivo en ficheros

ByLuis

Debido a la compra de Ideasapiens.com y para no perder el contenido actual, Jose Luis Antunez ha querido migrarlo a ideasapiens.blogsmedia.com.

El problema que se encontró fue tener que editar del código fuente de cada documento web la secuencia de texto www.ideasapiens.com a ideasapiens.blogsmedia.com. De esa forma los enlaces apuntarían al subdominio y accesos internos correspondientes donde ahora se alojarán los contenidos.

Para realizar esa búsqueda y reemplazo masivo, antes de pensar en alguna aplicación de escritorio que lo realizara, pensamos en un script para la shell de Linux que con una simple línea se pudiera hacer. Bueno, tan simple no nos resultó y gracias a la ayuda de Dani lo pudimos sacar (teníamos la shell un tanto oxidada).

find . -type f -name "*.php" -exec sed -i s/www\.ideasapiens\.com/ideasapiens\.blogsmedia\.com/g {} \;

Viendo las complicaciones que estábamos teniendo con la shell (por una tontería, dicha sea la verdad), Gabriel nos pasó el siguiente PHP, obteniendo el mismo resultado.

Read More “Laboratorio: búsqueda y reemplazo masivo en ficheros”

| |

Laboratorio: Comparar imágenes mediante PHP

ByLuis

Voy a intentar responder de una forma un poco más completa la pregunta que nos hacía David sobre la forma de comparar dos imágenes. Aunque este tema es muy intenso y en algunos casos bastante complicado, vamos a intentar simplificarlo en dos casos: imágenes de distinto tamaño y distinto contenido en la imagen.

Comparar imágenes

Si las imágenes son de distinto tamaño diremos que son distintas imágenes, no nos pararemos a ver el contenido. Si tienen el mismo tamaño, buscaremos que parte de la imagen es la que ha cambiado y la señalaremos con un rectángulo rojo.

Read More “Laboratorio: Comparar imágenes mediante PHP”

| |

Laboratorio: listas con descripción en HTML

ByLuis

Muchas veces el diseño que creamos nos hace usar listas no ordenadas, las cuales queremos que tengan descripción, pero por la falta de espacio, queremos que esta ocupe poco espacio.

lista-descripcion.png

Para crear este efecto, usaremos una lista y una capa por cada descripción que queremos mostrar, a parte de un script que mostrará la descripción cuando pasamos el ratón sobre el elemento de la lista.

Read More “Laboratorio: listas con descripción en HTML”