| |

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

| |

Convirtiendo XML a JSON con PHP5 DOM y XSL

ByLuis

JSON es un formato de datos de intercambio de Javascript que el auge de AJAX ha hecho muy popular. En javascript es mucho más cómodo trabajar con JSON frente a XML ya que podemos analizarlo rápidamente utilizando eval().

Cuando queremos trabajar con API´s como las de Amazon, Technorati, del.icio.us o Ficrk vía REST nos encontramos con que todas ellas devuelven los datos en XML. Gracias a PHP5 y utilizando sus extensiones DOM y XSL podemos transformar un documento XML en JSON de forma muy sencilla.

Veamos un ejemplo de cómo hacer esto con una consulta a la API de Technorati:

En primer lugar vamos a componer la URL con la que haremos nuestra consulta:


$technoratiApiKey = "introduceTuAPIdeTechnorati";
$url = "http://api.technorati.com/tag";
$tag = "usabilidad";
$request=$url."?key=".$technoratiApiKey."&tag=".urlencode($tag);

Y ahora creamos un nuevo objeto DOM y cargamos nuestro el fichero XML que nos devuelve la consulta:


$inputdom = new DomDocument();
$inputdom->load($request);

Para transformar los datos utilizaremos un xml2json.xsl, un fichero XSLT que tiene las instrucciones para transformar XML en JSON. Lo cargamos en un nuevo objeto DOM:


$xslt = "xml2json.xsl";
$xsl = new DomDocument();
$xsl->load($xslt);

¿Qué nos falta? pues: crear un procesador de XSLT en PHP, cargar nuestra xslt, realizar la transformación y generar el documento:


$proc = new XsltProcessor();
$xsl = $proc->importStylesheet($xsl);
$newdom = $proc->transformToDoc($inputdom);
print $newdom->saveHTML();

Próximamente veremos cómo utilizar esta técnica para procesar información de diversas API´s REST mediante AJAX.

Herramientas para crear webs accesibles

ByLuis

Desde Accessify nos ofrecen una serie de herramientas que nos ayudarán a crear webs más accesibles. Son wizards o herramientas sencillas pero que nos pueden facilitar mucho el trabajo.
Entre las herramientas tenemos un generador de tablas, de formularios (con o sin tablas), de pop-ups y otros más. A parte, nos ofrece una lista de aplicaciones generales, no centradas en la accesibilidad, pero que también serán de gran ayuda: generador de capas o de listados, un script para escapar código HTML para incluirlo en nuestras páginas, …

Accessibility Tools & Wizards

| | | |

Cómo destacar en el menú de navegación el acceso en que nos encontramos

ByLuis

Imaginemos que tenemos un menú de navegación y queremos diferenciar la opción de Home, el About, el Contacto… ya que en esos momentos estamos en uno de ellos.

¿Cómo hacerlo? En Babblative nos enlazan algunos métodos para hacerlo:

Method 1 – WordPress: WordPress actually has this feature built-in. WP-List-Pages

Method 2 – PHP: Jem’s Trendy Active CSS Tabs or Matt’s Intelligent Menu’s. I’ve personally had middling success with PHP on a manually maintained site and little success with it on Textpattern.

Method 3 – Textpattern: You can either muck around with multiple templates, which is bloated and unnecessary, or you can use this method. If you choose to use the multiple templates then you’ll need to read how do I use a different page layout for each section?

Method 4 – Manually Maintained Sites: Use Hicksdesigns method to highlighting current page with CSS

Keep Reading: Keeping a ‘current state’ on navigation, Keeping Navigation Current With PHP, EasyNav, Setting the Current Menu State with CSS

Vía / Babblative

| |

Laboratorio: shortcuts en formularios

ByLuis

Algo a lo que suelo estar acostumbrado es a usar el teclado para realizar ciertas acciones (shortcuts), cuando estás 8 horas diarias delante de un ordenador, si no haces uso de los shortcuts, perderás mucho tiempo moviendo el ratón de un lado para otro.

Antes el uso estaba más restringido a las aplicaciones de escritorio (CTRL + S para guardar el documento, ALT + F4 para cerrar la ventana, …), pero ahora que cada vez se usa con más frecuencia aplicaciones web, se echan en falta estas facilidades. Aunque hay que decir que últimamente se ven con más frecuencia: TAB + INTRO para enviar un correo en GMail (claro que esta no se programa), CONTROL + S para guardar una entrada en Blogger, …

Read More “Laboratorio: shortcuts en formularios”

| | | |

Technorati lanza búsqueda de Microformats

ByLuis

technorati.pngTechnorati ha lanzado una nueva búsqueda por microformats, la cual está en fase beta (o como lo hayan llamado). Para quien no sepa lo que son los microformatos, son pequeños XML que se usan para describir productos, eventos, contactos, … que son fáciles de entender para personas y máquinas. A parte, han sacado Pingerati, que es un sitio desde el cual poder enviar tus propios microformatos. Bueno, esperemos que vaya mejor que Technorati, que suele dar problemillas de saturación y de que vuelva usted más tarde.
Technorati microformats search
Vía / Download Squad

|

Evitar Cross-Site Request Forgeries en PHP

ByLuis

Siempre que hagamos una aplicación web, tenemos que tener muy encuenta las cuestiones de seguridad, sobre todo las formas más conocidas de ataque. Una de estas formas es Cross-Site Request Forgeries, que más o menos viene a decir Falsificación de Petición desde Otro Sitio (quizás la traducción no es exacta, pero creo que lo explica bien).

Este ataque se produce cuando a un usuario se le conceden permisos, confiando en él, pero no teniendo en cuenta que otra gente pueda aprovecharse de ello. Supongamos que tenemos una página de compra de artículos, cuya aplicación controla perfectamente los campos de entrada y que tiene una función que realiza la operación de compra de artículos.

Tenemos el formulario HTML:

<form action="compra.php" method="POST">
Artículo: <input type="text" name="articulo" />
Cantidad: <input type="text" name="Cantidad" />
<input type="submit" value="Comprar" />
</form>

El primer fallo que solemos cometer es leer las variables de entrada mediante $_REQUEST:

<?php
session_start();
if (isset($_REQUEST['articulo'] &&
isset($_REQUEST['cantidad'])) {
compra($_REQUEST['articulo'],
$_REQUEST['cantidad']);
}
?>

Una forma muy utilizada para realizar un ataque y que al autor del artículo le gusta mucho, es mediante el uso de una imagen:

<img src="http://ejemplo.org/compra.php?articulo=CAFETERA&cantidad=1000" alt="ads" />

Con esto conseguimos que el usuario que visita nuestra página tambien haga una petición a la página en cuestión sin que él lo sepa, claro, que esto solo funciona si el usuario a la vez tiene una sesión abierta en la página que se está atacando.

La solución es añadir una marca formada por un número “encriptado” y un tiempo para que tenga que renovarse esta marca. La marca se debe crear y pasar en el formulario por el que se envían los datos y a parte se debe controlar su existencia, si coincide y si no ha superado el timeout.

<?php
$marca = md5(uniqid(rand(), TRUE));
$_SESSION['marca'] = $token;
$_SESSION['tiempo_marca'] = time();
?>
<form action="compra.php" method="POST">
<input type="hidden" name="marca" value="<?php echo $marca; ?>" />
Artículo: <input type="text" name="articulo" />
Cantidad: <input type="text" name="Cantidad" />
<input type="submit" value="Comprar" />
</form>
<?php
if ($_POST['marca'] == $_SESSION['marca']) {
$diferencia_tiempo_marca = time() - $_SESSION['tiempo_marca'];
if ($diferencia_tiempo_marca <= 300) {
/* Menos de 5 minutos */
}
}
?>

Artículo original: Security Corner: Cross-Site Request Forgeries

Vía / backdraft