| |

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

| |

W3C: fallos de accesibilidad (I)

ByLuis

Hoy vamos a empezar una serie de artículos en los que pretendemos explicar los fallos que se cometen en accesibilidad cuando se realizan aplicaciones web y las técnicas que debemos usar para evitar estos fallos. Para ello nos basamos en lo que especifica la W3C en su WCAG 2.0 (aún en estado borrador).

Error 1: modificar el significado del contenido debido al posicionamiento mediante CSS

Se trata de cambiar el significado semántico de una etiqueta, modificando su posicionamiento mediante CSS. Por ejemplo, si queremos crearnos una lista de elementos:

  • Elemento 1
    • Elemento 1.1
    • Elemento 1.2
    • Elemento 1.3
  • Elemento 2
    • Elemento 2.1
    • Elemento 2.2


El fallo consiste en usar etiquetas no destinadas a ese sentido, cambiarle los estilos y representarlas como queremos. Por ejemplo podemos usar span para representar cada elemento y disponerlos en la posición que nos conviene:

<span class="cab1">Elemento 1</span>
<span class="cab2">Elemento 2</span>
<span class="ele1">Elemento 1.1</span>
<span class="ele2">Elemento 2.1</span>
<span class="ele3">Elemento 1.2</span>
<span class="ele4">Elemento 2.3</span>

Y con los estilos siguientes:

.cab1 {
position: absolute;
top: 0px;
left: 0px;
}
.cab2 {
position: absolute;
top: 0px;
left: 200px;
}
.ele1 {
position: absolute;
top: 20px;
left: 0px;
}
.ele2 {
position: absolute;
top: 20px;
left: 200px;
}
.ele3 {
position: absolute;
top: 40px;
left: 0px;
}
.ele4 {
position: absolute;
top: 40px;
left: 200px;
}

obtendríamos el mismo resultado visual, pero si quitaramos los estilos obtendríamos lo siguiente:

Elemento 1 Elemento 2 Elemento 1.1 Elemento 2.1 Elemento 1.2 Elemento 2.3

lo cual no tendría mucho sentido.

Error 2: modificar el aspecto del texto para mostrar algo que ya representa una etiqueta

Existen varias etiquetas de texto que tiene diferentes funcionalidades, pero aún así es típico encontrarse textos con sus estilos modificados para mostrar el resultado de una etiqueta ya existente. Un ejemplo muy común es este:

<span class="negrita">Título</span>
.negrita {
font-weight: bold;
}

Lo correcto sería usar la etiqueta strong.

Más información

|

10 consejos para mejorar tus queries MySQL

ByLuis

10 interesantes consejos a seguir para mejorar nuestras sentencias en MySQL, algunas de ellas para poder optimizar las ya creadas.

  • Usa el comando explain: el comando explain te puede ayudar a identificar los índices que se usan y además te proporciona más información útil.
  • Usa permisos menos complejos: usar permisos más sencillos evita que se comprueben muchas condiciones en cada ejecución de una sentencia.
  • Comando benchmark: este comando nos permite saber cuánto tiempo tarda en ejecutarse una expresión.
  • Optimiza tus cláusulas: ya sea quitando paréntesis innecesarios, usando count(*) sin condiciones en el where ya que tira de tablas internas de MyQSL o usando la opción SQL_SMALL_RESULT para usar tablas temporales en memoria.
  • Ejecuta optimize table: defragmenta una tabla después de varios borrados, el acceso a disco es algo importante a tener en cuenta.
  • Evita campos de longitud variable: en tablas de frecuente actualización evita campos como VARCHAR, BLOB o TEXT.
  • Usa insert delayed: solo cuando sea no importe cuando se inserten los datos.
  • Prioridades en las sentencias: usa INSERT LOW_PRIORITY para darle a las consultas mayor prioridad, o usa SELECT HIGH_PRIORITY para ejecutar una consulta aunque haya otros clientes esperando.
  • Haz múltiples inserciones en una única sentencia: en vez de varias sentencias de una única inserción.
  • Sincroniza tipos de datos: mismos datos en tablas diferentes deben ser del mismo tipo de datos.

Yo siempre he tenido una duda, que no he resuelto por pereza, sobre el caso de ejecutar count(*) o count(1). La leyenda urbana dice que es mejor count(1), ya que de la otra forma obtienes que enviar todas las columnas, al igual que haces en un select *. Un consultor en Oracle nos dijo que era falsa esa afirmación porque tardaba lo mismo, yo creo que también, entre otras cosas porque seguro que ese punto está optimizado, pero claro, que sea consultor o que sea de Oracle no quiere decir nada, y menos aún si hablamos de otras bases de datos.

10 tips for optimizing mysql queries

Vía / Alex Sancho

Consejos para configuraciones SSH

ByLuis

Aunque yo, la verdad, he tratado las conexiones SSH de resfilón, nunca está mal conocer algunos trucos para cuando tengamos que configurar nuestras conexiones SSH.

  • Cambia el puerto: por defecto el puerto de escucha es el 22, cámbialo para que dificultar los ataques, sobre todo si es mayor a 1024, ya que la mayoría de los scanners no admite valores tan altos.
  • Admite solo el protocolo 2: SSH admite dos protocolos, permite tan solo el 2 ya que es más seguro.
  • Permite solo usuarios específicos: no admitas al usuario root ya que es aumentar los riegos de ataque.
  • Especifica tu propio aviso: si quieres que cualquier usuario pueda ver un aviso de acceso denegado crea tu propio fichero de texto que muestre el mensaje. Este punto no lo comprendo muy bien, está claro que me tengo que meter más a fondo con el SSH.
  • Usa clave pública DSA: puedes usar para la autenticación claves públicas DSA en vez de usuario y contraseña.
  • Usa TCP wrappers: permitiendo así conectarse solo a ciertos hosts.
  • Usa iptables para permitir acceso a hosts: como alternativa a los TCP wrappers.
  • Limita el acceso a periodos de tiempo

Advanced SSH security tips and tricks

Vía / dzone

|

FireMarker: cómo crear una extensión para Firefox

ByLuis

firemarker.pngSi el otro día os hablaba de FireMarker, la extensión de Firefox para marcar texto en una página, hoy voy a intentar explicar cómo la desarrollé y así conseguir que otras personas no se encuentren con las mismas dificultades que yo.

Vamos a ir paso a paso, explicando la estructura, los distintos ficheros y sus contenidos, siempre dentro de mi limitado conocimiento, ya que lo que he aprendido ha sido destripando otras extensiones y mirando la documentación que hay sobre XUL.

Read More “FireMarker: cómo crear una extensión para Firefox”

| | | |

Cómo decir a Google que vuelva por nuestra página más tarde

ByLuis

Cuando tenemos nuestra página en mantenimiento y el motor de Google (Googlebot) u otro motor de búsqueda, se pasa por nuestra página para indexarla, no es correcto que obtenga una página no encontrada (404) o un error del servidor (500).
Según dicen en Google Webmaster Central lo correcto es mandar un código de red no disponible (503), pero el autor de este post recomienda también enviar un Retry-After para que vuelva a pasarse más tarde. También recomienda que a los motores de búsqueda se les envie a una página 503 y a los visitantes (menos a él) a una página 404 (página no encontrada).
Instruct Search Engines to come back to site after you finish working on it

|

Instala cualquier cosa en Ubuntu

ByLuis

ubuntu.pngPara los que no somos usuarios habituales de Linux, en este caso de Ubuntu, la siguiente guía nos puede ser de mucha utilidad para saber cómo instalar aplicaciones en esta distribución.
Parece más enfocada a aquellos que van a pasar de Windows a Ubuntu, por lo que gracias a sus pantallazos y animaciones (¡dios mio, son GIFs animados) nos explica paso a paso lo necesario para realizar estas acciones y no perdernos.
Empieza a explicarnos el package manager y sobre todo las diferencias con Windows, lo cual es algo muy importante si nuestro caso es el de pasarnos de un sistema a otro. Después se centra en la instalación mediante Synaptic, después mediante el terminal y por último manualmente.
How to install ANYTHING in Ubuntu
Vía / Digg

| |

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.

| | | |

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

|

Incluye tus vídeos en tu web

ByLuis

si ya hace tiempo explicábamos cómo subir un vídeo en formato FLV a tu web y verlo mediante un visor incluido en la página web, ahora se trata de un artículo donde explican cómo hacer, de forma muy detallada, para casi todos los formatos de vídeo más comerciales, mostrar el vídeo en formato Flash (FLV).
En este caso se centran en los formatos de QuickTime, Windows Media y Abode Flash (aunque usando herramientas comerciales y no opensource como indicamos en el artículo anterior). Primero nos indican que debemos obtener la información del vídeo, luego codificarla y por último mostrarla.
Yo me sigo quedando con la alternativa opensource, pero es indiscutible que la explicación que nos ofrecen es de lo más completa.
The Rise of Flash Video, Part 3: Tackle your own project with this step-by-step primer