Front-end, Web Standards & Accessibility

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?.

Para crear un botón en HTML contamos con dos etiquetas:

• INPUT
• BUTTON

Ambas son válidas. La segunda de ellas es menos usada (con diferencia) aunque esconde tras de si muchas ventajas al poder anidar en su interior contenido.

Botón tradicional con input

<input type="submit" value="Eliminar" />

Botón + icono con button

<button type="submit"><img src="delete.gif" alt="x" /> Eliminar</button>

Nota: En este caso se ha usado un GIF con el mismo color de fondo que el botón. Cuidado con el formato PNG y sus problemas en Internet Explorer.

CSS

button {
	font: 700 1em Tahoma, Arial, Verdana, sans-serif;
	color: #fff; background-color: #59B0E5;
	border: 1px solid #0074a5;
	border-top: 1px solid #004370;
	border-left: 1px solid #004370;
	cursor: pointer;
}
 
button {
	width: auto; /* ie */
	overflow: visible; /* ie */
	padding: 3px 8px 2px 6px; /* ie */
}
 
button[type] {
	padding: 4px 8px 4px 6px; /* firefox */
}

Voy a destacar 4 cuestiones de este CSS:

• El borde usado de un color concreto y complementado con border-top y border-left del mismo color pero más oscuro para dar sensación de relieve al botón.
• Por razones de usabilidad el uso de la propiedad cursor: pointer para que aparezca el puntero común de los enlaces y aporte más fuerza de clic al elemento.
• Con las propiedades width: auto; y overflow: visible; solucionamos el problema de los botones con mayor tamaño en Internet Explorer.
• Si queremos hilar muy fino nos daremos cuenta que el padding difiere según el navegador. Podemos usar el selector button[type] que no es reconocido por IE para definir un padding diferente.

Resultado (imagen de captura)

Ver demostración.

Vía Criterion (gracias Armando) me entero de las tiras cómicas de 8-bits acerca del “trabajo en casa”.

El diseño de las ilustraciones es buenísimo y el humor es muy certero, me he reído un ratito . Os puedo asegurar que este tipo de cosas pasan realmente y no pocas veces, seguro que Armando también puede dar fe de ello jejeje.

Al hilo del anterior post “Virtualización de WinXP + IE6, probando nuestro CSS” me ha llegado un comentario (gracias d2f) con otra herramienta que en su día deje pasar de largo (craso error Javi).

Xenocode nos permite en su web descargarnos un plugin y emular estos navegadores sin más complicaciones.

¿Un problema de usabilidad?

Hace un tiempo visite este sitio web, y me pareció “extraño” empezando por los banners y siguiendo por la estructura y diseño. Luego tras encontrar la web con todos los navegadores hice clic en cada título, por ejemplo “internet explorer 6″ y esto me llevaba a la web de Microsoft, un simple enlace. Así que me fui y hasta hoy jejeje

Como explicación creo que se debe a la comodidad de hacer clic en el texto del navegador (un poco más grande) y no en el botón verde que simula el “ON” pensando que sería una imagen y que al ir unidas llevaría al mismo destino.

Me gustaría saber a cuantos les ha pasado lo mismo    (no creo que sea el único rarito)

¿Os acordáis que hace un tiempo hablábamos sobre ‘el duelo’ xHTML2 vs. HTML5?

Parece que el W3C se había quedado solo con la especificación xHTML2, mientras que otras empresas como Opera, Mozilla y Apple siguen trabajando por y para HTML5. Luego llego la incorporación de Google apostando fuertemente por HTML5 con proyectos como Google Wave.

Finalmente el W3C ha anunciado que cuando se acabe el plan de trabajo del Grupo de XHTML 2, planeado para el final de 2009, el Grupo no será renovado. En cambio destinará sus recursos al Grupo de Trabajo de HTML.

Con ello el W3C espera acelerar el progreso del HTML 5 y clarificar su posición sobre el futuro del HTML.

Bajo Windows tenemos algunas herramientas para probar nuestras hojas de estilo y el marcado que hemos generado.

• IETester
• MultipleIEs

Sin embargo, las dos soluciones presentan algunos problemas.

• El primero de ellos en determinados casos no suele emular muy certeramente.
• El segundo no soporta Windows vista. Al menos no por ahora…
• El soporte javascript es bastante pobre, incluso es bastante complejo llegar a probar soluciones del tipo PNGFIX.

Virtualización de WinXP + IE6

Por desgracia debemos tener en cuenta a Internet explorer 6, sigue teniendo una cuota de mercado considerable.

La mejor forma de emular este navegador es realizando una virtualización de Windows XP y IE6.

Hace un tiempo que Microsoft parece que nos ha puesto las cosas más fáciles (un poquito solo).
Únicamente tenemos que instalar VirtualPC y la imagen que deseemos, en este caso concreto descargaremos ‘IE6-XPSP3.exe’.

• Virtual PC 2007
• Internet Explorer Application Compatibility VPC Image