Front-end, Web Standards & Accessibility

Voy exponer mi opinión sobre los concursos, subastas y demás mercaderías que salpican a todo el mundo creativo.
(Y si, lo sé, me vuelvo a salir de la temática por segunda vez!, prometo que el siguiente post será técnico).

Como mi opinión es idéntica a la de Anibal de la Fuente (de Planilandia.com) y yo no podría haberlo expresado mejor, me voy hacer eco de sus palabras. Espero interpretarlas correctamente

La idea es la siguiente: si quieres ser contratado tienes que participar en un concurso, hacer el trabajo, invertir tus tiempos/recursos y… bueno luego ya veremos qué pasa

Read more »

Voy a salirme un poco de la temática del blog y hablar sobre lo que significa para mi emprender. Para ello voy fijarme en mi trayectoria que aunque sea pequeña creo que puede aportar algo de significado.

Emprender

• Un sueño nunca fracasa. Años atrás tuve una idea, algunos pensaban que era un sueño dedicarse a la web de esta forma, pero no me importo y fui a perseguir mi propio sueño (eso es emprender).
• Además de la idea también tenia la voluntad e ilusión, y en aquella época hasta la inconsciencia de llevarla acabo (eso es emprender).
• Me hizo falta tener mucha ambición, quien no apunta alto nunca va a llegar. Yo debo ser algo niño y soñador así que esto no me falto (eso es emprender).
• Con el tiempo fui viendo que tenia muchos complejos de niño por superar si quería seguir adelante, así que toco unir el niño soñador con la madurez adulta (eso es emprender).
• También tuve que tener cierta capacidad de sufrimiento y diría que hasta “masoquismo” (eso es emprender).
• Soy consciente que en ultimo termino estoy completamente SOLO y esto me da fuerza (eso es emprender).
• Aunque me gustaría crecer más rápido, soy relativamente constante y voy poco a poco (eso es emprender).
• Algo muy importante es divertirse. Con mi pequeña empresa yo me divierto muchísimo (eso creo que también es emprender).

Read more »

Va otra de WAI-ARIA!

Recientemente se ha publicado la nueva versión de MOSAIC, una destacada publicación dedicada a las tecnologías y comunicación multimedia, donde tuve la oportunidad de colaborar en el desarrollo (ver ficha del proyecto).

Voy aprovechar este post para compartir como he implementado ARIA en las solapas que aparecen en la home de MOSAIC. De esta forma el contenido de las solapas es más accesible y semántico.

Marcado para un elemento de tipo tabs (solapas)

<div id="tabs">
	<ul>
		<li><a href="#tabs-1" id="tab1">en este número</a></li>
		<li><a href="#tabs-2" id="tab2">lo más leído</a></li>
	</ul>
	<div id="tabs-1" class="tabpanel">
		contenido de la solapa 1 (en este número)
	</div>
	<div id="tabs-2" class="tabpanel">
		contenido de la solapa 2 (lo más leído)
	</div>
</div>

Podemos destacar los siguientes elementos con IDentificadores:

• id="tabs": contenedor general
• id="tab1", id="tab2": cada solapa
• id="tabs-1", id="tabs-2": contenedores de cada solapa

Inyectando ARIA con jQuery en un elemento de tipo tabs

$('#tabs ul').attr('role', 'tablist');
$('#tabs ul li a').attr('role', 'tab');
$('#tabs .tabpanel').attr('role', 'tabpanel');

1. En la primera línea añadimos el landmark tablist a la lista que contiene las solapas.
2. En la segunda línea marcamos cada enlace (solapa) de la lista con el landmark tab.
3. Finalmente en la tercera línea indicamos el contenedor de cada solapa con el landmark tabpanel.

Aunque recientemente ha salido la versión 2.9 de WordPress voy a comentar un importante giro de la versión 2.8 que se vuelca en la accesibilidad de la estructura de contenidos.

Una de las nuevas características de WordPress es la incorporación de los conocidos landmarks de WAI-ARIA, añadidos a través del atributo role al theme por defecto de WordPress. De esta forma se especifican los roles de las diferentes zonas funcionales del blog haciendo que sea más semántico y accesible.

Los landmarks que WordPress ha incluido en su theme por defecto son: main, contentinfo, banner, complementary y navigation.

Sin duda se trata de una gran apuesta de WordPress volcada a mejorar la accesibilidad de sus blogs.

El problema de la validación XHTML W3C

Esta importante actualización que viene integrada en el theme por defecto de Wrodpress plantea un problema de validación. Las especificaciones HTML 4.01 y las DTD no contemplan aún los landmarks de ARIA y esto hace que nuestro blog no pase positivamente el test de validación W3C.

Para solventar este problema podemos eliminar los atributos role del theme e inyectarlos por medio de JavaScript en tiempo de ejecución.

Inyectando landmarks de ARIA con jQuery

$(document).ready(function() {
	$('#content').attr('role', 'main');	
	$('#footer').attr('role', 'contentinfo');
	$('#header').attr('role', 'banner');
	$('#sidebar').attr('role', 'complementary');
        $('#sidebar ul').attr('role', 'navigation');
	$('#searchform').attr('role', 'search');
});

Sencillamente tomamos los elemento a partir de sus IDs (identificadores) e inyectamos la propiedad role con el valor que representa a cada una de las zonas funcionales role="navigation".
La última línea es un añadido que se encarga de inyectar el landmark del clasico buscador de WordPress.

Es seguro que en algún momento todos los que trabajamos con CSS echamos en falta las conocidas variables, elementos esenciales en cualquier lenguaje de programación. Para solventarlo se me ocurren varias formas:

• Evitar las redundancias.
• Usar mejor la descendencia en los selectores.
• Definir las variables como meros comentarios.
• Usar variables de PHP u otro lenguaje dinámico de servidor.
• Decantarnos por CSS 3.

Es probable que existan más formas ¿conoces alguna?, bueno… de momento voy a intentar explicar las mencionadas.

Evitar las redundancias

Ejemplo redundante

h1 { 
	color: #59B0E5; 
	font-size: 1em;
	text-decoration: underline;
}
h2 { 
	color: #59B0E5; 
	font-size: 1.2em; 
	text-decoration: underline;
}

Evitamos redundancias

h1 { font-size: 1em; }
h2 { font-size: 1.2em; }
h1, h2 { 
	color: #59B0E5; 
	text-decoration: underline;
}

El ejemplo es obvio y carece de explicaciones, sin embargo en hojas de estilo complejas la tarea de sintetizar es más complicada.

Usar una mejor la descendencia en los selectores

p em, p strong, p dfn { color: #59B0E5; }

Definir las variables como meros comentarios

En la cabecera del fichero CSS podemos incluir bajo la notación de comentarios las “variables” que entran en juego en la hoja de estilo.

/*
   Primary color: #59B0E5
   Second color: #DA5BA4
*/
 
p { color: #59B0E5; }
...

Así y con ayuda de la típica herramienta “buscar/reemplazar” podemos cambiar fácilmente los valores en todo el documento.

Usar variables de PHP u otro lenguaje dinámico de servidor

Para ello debemos tener en cuenta varias cuestiones.

Extensión .PHP

La primera de ellas es que el fichero sea interpretado como tal, en el caso de PHP podremos llamar a la hoja de estilos style.php.

Enlace al fichero

<link rel="stylesheet" type="text/css" href='/css/style.php' />

Tipo de contenido

Debemos indicar al servidor web el tipo de contenido de nuestro fichero para que sea correctamente interpretado. Esto lo podemos hacer fácilmente en PHP enviando la cabecera con el tipo MIME.

<?php
    header("Content-type: text/css;");
?>

Declarando las variables

<?php
   $colorweb1 = "#59B0E5";
   $colorweb2 = "#DA5BA4";
?>

Usando las variables

En las propias reglas CSS podemos incrustar las llamadas a las variables de PHP.

h1 { color: <?php echo $colorweb1; ?>; }
h2 { color: <?php echo $colorweb2; ?>; }

Decantarnos por CSS 3

Las anteriores soluciones son como “de andar por casa”. CSS 3 nos brinda la posibilidad de usar variables reales de forma “nativa”. El problema es la retrocompatibilidad con algunos navegadores actuales y todas las antiguas versiones

Declarando las variables

@variables { colorweb1: #59B0E5; colorweb2: #DA5BA4; }

Usando las variables

h1 { color: var(colorweb1); }
h2 { color: var(colorweb2); }

El pasado Martes 1 de diciembre (Campus de Mieres), asistí a una charla interesante sobre aspectos a tener en cuenta para mejorar nuestra presencia profesional en internet.

La charla la dio un Miguel Orense de Kanvas Media (un Asturiano afincado en Madrid). Miguel es experto en marketing online y de buscadores, también de optimización en los llamados “Social Media”. Es considerado como uno de los SEO de referencia en España.

Los temas tratados fueron:

• SEO – Técnicas optimización para motores de búsqueda.
• SEM – Gestión y uso adecuado de publicidad en páginas web y motores de búsqueda.
• SERM – Gestión de la reputación digital.
• También nos hablo sobre algunas herramientas Google que pueden ayudarnos con las palabras clave, el posicionamiento, la segmentación y la publicidad adsense.

En fin, es curioso ver como tu pequeña tierrina va captando de nuevo a la gente que en su día se fue. Miguel comentaba lo orgulloso que se sentía de venir Asturias y compartir con nosotros lo que sabe.
Otras iniciativas como los Fundamentos Web en su edición 2007 (mi favorita) y también la pasada 2008 fueron todo un éxito.
Espero que en años posteriores volvamos a contar con más eventos así y que Asturias se siga colocando en la cresta de Internet

En un proyecto sobre el que estoy trabajando observo que en el maravilloso mundo de IE6 no aparece bien el estilo para el menú de secciones… Intentare ilustrarlo con un ejemplo resumido.

CSS del menú

#nav li a.home { }
#nav li a#current.home { }

Internet Explorer 6 e inferiores recelan de los selectores combinados, aquellos donde se une un identificador con una clase. Y esto puede se necesario en el caso de tener varios elementos con estilos diferentes.

XHTML del menú

<ul id="nav">
	<li id="active"><a id="current" class="home" href="#">Item one</a></li>
	<li><a class="projects" href="#">Item two</a></li>
	<li><a class="contact" href="#">Item three</a></li>
</ul>

La solución en la descendencia

Tenemos por un lado el elemento lista (padre) con el identificador #active que haría la misma función identificativa que #current y anidado el elemento del enlace (hijo) con su correspondiente clase.

Ejemplo

#nav li#active a.home { }

El caso es que vuelvo a tropezar con este problema habiendo escrito un post sobre lo mismo (Problema combinando selector de ID y clase en IE6) hace relativamente poco tiempo.

¿Por qué el ser humano es el único animal que tropieza dos veces en la misma piedra?

Pues no lo sé, pero lo mio es tropezar y volver a tropezar

A través de gráficos y diferentes tipos de resaltes (fuentes, colores, etc) podemos guiar mejor el usuario para que alcance con éxito sus objetivos.
Voy a ilustrar esto con 3 ejemplos llevados a cabo en el proyecto Cinemavip.

Enlaces y botones

En la zona superior del sitio web Cinemavip se define claramente a quien va dirigido y que puede ofrecer esta red audiovisual.

• Por un lado destacan los enlaces a la secciones de usuarios, el directorio de empresas y las ofertas de empleo. Tres pilares básicos de la red social.
• Por otro lado tenemos el Marketplace, un nuevo servicio sobre el que se quiere captar la atención. Por ello en este último caso gana fuerza el empleo de un botón, aunque con las mismas sinergias de colores que los enlaces.

Botón de formulario como acción principal

En los formularios el usuario puede realizar varias acciones: enviar, guardar, borrar, cancelar, volver atrás, etc. Para mejorar la experiencia de uso podemos identificar que acciones son más comunes y en base a ello destacarlas visualmente.

En este caso volvemos a recurrir al empleo de un botón para realizar la acción principal “Enviar”. Por otro lado disponemos de un enlace para “volver atrás”, una acción claramente secundaria. De esta forma evitamos el empleo de dos botones iguales que se enfrentarían por ganar el foco de atención.

Destacar a base de color

En este ejemplo vemos 3 eventos próximos en el tiempo, pero el más cercano esta ubicado como el primero de ellos y bajo un color de fondo más oscuro, resaltándolo frente a los otros dos y así alertando de su cercanía.

Los 3 ejemplos pueden parecer pequeñas tonterías pero conviene prestar atención a detalles así, los cuales son cruciales para la experiencia del usuario.

Aunque con cierto retraso (20/10/09) me hago eco de esta noticia, y es que los XFORM ya han sido establecidos como recomendación por parte del W3C.

Los formularios que usamos actualmente con HTML presentan un nivel de interacción algo pobre para las necesidades de hoy en día. Los sitios web han pasado de ser páginas meramente presenciales a sofisticadas aplicaciones. Es por esto que para hacer un GUI más rico e interactivo creamos diferentes controles a medida (widgets) y para ello usamos CSS, JavaScript, AJAX (y ARIA para la accesibilidad). Con el avance de los XFORMS podremos ahórranos muchos de estos widgets puesto que vendrán de serie, perfectamente estandarizados, documentados y listos para su implementación.

En una charla que nos dio Chaals sobre nuevos estándares web nos hablo de lo ridículo, laborioso y frustrante que era desarrollar controles (calendarios, inputs con mascaras, etc) para que luego no funcionasen sin JavaScript, CSS, o lo que fuese, y que además tuviésemos que validarlos localmente y por último en lado del servidor (razón no le falta!). Así que nos puso como ejemplo algunas de las soluciones XFORM y que si son soportadas en el navegador Opera.

Actualmente el soporte de XFORM es pobre o nulo, incluso se necesitan plugins y extensiones. Por otro lado la notación de los XFORM me parece muy farragosa, a mi entender deberían orientarse hacia la simplicidad de formularios actuales. Pero bueno, el paso a recomendación ya es un avance sustancial que en cierto modo supongo que hará ponerse las pilas al resto de navegadores.

Con la ayuda de herramientas como CleanCSS (basado en CSSTidy) podemos optimizar y reducir notablemente el peso de nuestras hojas de estilo.

Hace tiempo hablábamos en este blog sobre como optimizar CSS y hace uso de formas abreviadas. Mediante esta herramienta online podemos probar nuestros ficheros CSS y descubrir mejores formas a la hora de escribir reglas de estilo. CleanCSS nos indica errores y propone alternativas más eficientes, hasta un punto en que ya ni nos hará falta recurrir a este tipo herramientas puesto que acabaremos aprendiendo mejores formas.

Por cierto, existen muchas herramientas similares, esta la descubrí hace ya mucho mucho tiempo y sigue siendo la que mas me convence, ¿conocéis otras aplicaciones parecidas?.