Front-end, Web Standards & Accessibility

Expongo a continuación algunos consejos para la optimización de nuestras hojas de estilos CSS.

1. Selectores ID, Classes, Tags

#logo { margin-top: 1em; }
.ico { margin-left: 1em; }
a { text-decoration:none; }

Los Selectores ID es la forma más eficiente y rápida que hay en CSS para otorgar estilo. Por contra no podemos sobrecargar nuestro CSS usándolos para cada elemento que requiera un mínimo de diseño. En este punto tenemos que pensar de forma creativa y global para usar los selectores de clase, las propias etiquetas y los principios de la cascada.

2. Un identificador no necesita más

h1 #logo { margin: 1em; }

Las etiquetas con un atributo de identificador son irrepetibles, solamente hay uno por página, por tanto es redundante añadir cualquier referencia adicional.
El ejemplo anterior más optimo sería:

#logo { margin: 1em; }

3. Agrupar selectores con mismas propiedades

En vez de:

h2 { font-weight: 700; }
h3 {  font-weight: 700; }
.bold { font-weight: 700; }

Mejor usar:

h2, h3, .bold { font-weight: 700; }

Este es un ejemplo muy obvio pero puede ser más complejo dependiendo del tamaño de la hoja de estilos.

4. Escribir el CSS de formas abreviada

Las llamadas Shorthand es una forma de escribir las reglas de forma abreviada, lo cual repercute directamente en la optimización (siguiendo el principio menos es más).
Este asunto lo he tratado en un post anterior llamado “Formas abreviadas para optimizar CSS“.

5. Más restrictivo a la derecha

ul li span.linklist a { border: 1px solid red; }

Ante un ejemplo como este podemos pensar que el navegador interpreta de izquierda a derecha los selectores, cuando en realidad es justamente a la inversa. Primero analiza A, luego mira que se su padre sea SPAN.linklist, su abuelo LI y su bisabuelo UL, si esto se cumple se pone la propiedad de estilo border: 1px solid red;.

El problema es que pueden existir muchas etiquetas de enlace en una página y la cantidad de proceso será mayor, por lo tanto tendríamos que poner el selector más restrictivo más a la derecha. Ante esto se me ocurren dos soluciones:

• Disminuir las descendencias, por ejemplo: span.linklist a
• Otorgar una clase a.linklist y prescindir del resto

6. Menos descendencia y más herencia

Es aconsejable no recurrir a selectores con descendencias, hijos, hermanos, etc. Siempre que sea posible usar únicamente Selectores ID, clases y etiquetas.

En cambio si es positivo heredar (inherit) el mayor número de propiedades posibles entre diferentes elementos. Tengamos en cuenta también la herencia por defecto para no escribir reglas redundantes.

7. Poner el CSS en HEAD

El situar los estilos en el HEAD hace posible que la página muestre el contenido-estilo de forma progresiva, lo que mejora la experiencia de uso.

Por otro lado la especificación HTML también recomienda la etiqueta LINK dentro del HEAD para incorporar nuestras hojas de estilo.

8. CSS como fichero externo (style.css)

Esto hace que la cache pueda hacer su trabajo, de lo contrario si incorporamos el CSS en linea, será descargado una y otra vez con la página.

Otra ventaja es la mejora en la escalabilidad pudiendo gestionar todos los estilos y el diseño de una forma más centralizada.

9. LINK mejor que @import

En algunas versiones de IE usar @import es parecido a usar LINK fuera de HEAD, por esta razón y teniendo en cuanta lo dicho anteriormente, es recomendable usar un enlace al fichero y no importarlo.

Más información en Don’t use @import.

10. Minimizar el número de peticiones LINK

Supongamos el siguiente ejemplo:

<link rel="stylesheet" href="style1.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />

En el fichero style2.css a penas hay unas pocas lineas de código y su gestión no lleva a confusiones, entonces es mejor tener un solo fichero style.css con todas las reflas CSS, reduciendo el número de peticiones LINK al servidor.

En este sentido tener en cuanta también la modularidad, pueden existir ficheros CSS que por esta razón es mejor mantenerlos bien separados y organizados.

11. Evitar las “CSS Expressions”

No son estándares y se procesan repetidas veces para establecer sus propiedades dinámicas.
En No me gustan las CSS Expressions planteo algunos problemas que derivan en la falta de optimización.

12. Evitar filtros

Siempre que sea posible evitar el uso de filtros como por ejemplo “AlphaImageLoader“, estos filtros consumen una gran cantidad de memoria para su funcionamiento.

Herramientas para la optimización y compresión

Existen muchas, pero las que más uso son:

• CleanCSS – Limpiar y optimizar nuestras hojas de estilo
• Firebug + PageSpeed
• YUI Compressor

Las dos primeras te ayudarán a chequear y encontrar mejores formas de optimización, la tercera se encarga de comprimir el fichero CSS.

La experiencia hace que en cada proyecto tengamos menos trabajo que optimizar e invertir menos tiempo delante de estas herramientas.

Por cierto, ¿se os ocurren más formás para optimizar CSS?

Las CSS Expressions son usadas para establecer propiedades dinámicas. Fue un invento más de Microsoft para Internet Explorer.

Los problemas que veo en las “CSS Expressions” son:

• No es un estándar web, con todo lo que ello implica…
• Se diluye la abstracción: contenido > estilo > comportamiento.
• A excepción de IE todos los navegadores tendrán que tragar estos bytes de más sin tener soporte para ello.
• Y lo peor de todo, las “CSS Expressions” se procesan muchísimas veces, no solo cuando se carga el CSS sino también cuando realizamos múltiples tareas como por ejemplo desplazar el scrooll vertical. Esto genera una cantidad de proceso enorme para el navegador y una deficiencia en la optimización del sitio web.

En la mayoría de los casos se usan las “CSS Expressions” para solucionar problemas de incompatibilidad (cross-browsing) o carencia/deficiencia de soporte para los estándares web por parte del software de Microsoft. Osea que al final para solucionar un problema de este navegador ponemos un parche que afecta al resto de navegadores e incluso le puede sentar indigesto al propio Internet Explorer.

En fin, el parche puede infectar más la herida

La semana pasada implemente una funcionalidad en la que puede aprovechar los nuevos post-thumbnails de la versión 2.9 de Wordpress.

¿Qué es un post-thumbnail?

Es una imagen en miniatura que puedes asociar a cada post.

Esta nueva característica es muy interesante puesto que te ahorras códigos y métodos un tanto rebuscados si lo único que quieres es asociar a un post una imagen.
Por ejemplo en el apartado portfolio de este sitio web veis que aparecen un thumbnail por cada proyecto. Para lograrlo he subido el thumbnail como una imagen más y a través de “query y el menu-order” cojo la primera imagen del post, luego en la ficha del proyecto me salto la primera y coloco el resto.
Otra formula para establecer thumbnails es usar algún plugin disponible.

Y ahora por fin en Wordpress ya tenemos incorporada de base esta característica.

Método de empleo

Dando soporte a post-thumbnails en nuestro theme activo

Lo primero es indicar a Wordpress que deseamos usar esta funcionalidad. Para ello usamos la siguiente instrucción que debemos incorporar al fichero function.php de nuestro theme.

add_theme_support( 'post-thumbnails' );

Incluir el thumbnail en un post

Se hace a través de la interfaz del panel de control, facilitando así la tarea para los editores del blog.
Cuando escribamos un post o lo editemos en el panel de control de Wordpress, veremos al margen derecho un nuevo bloque llamado “Post Thumbnail”, en el podemos incluir la imagen en miniatura.

Mostrar los últimos 5 posts (con thumbnails)

function related_posts() {
	global $wpdb, $post;
 
	$category = get_the_category(); 	
 
	$last_posts = $wpdb->get_results("
		select $wpdb->posts.ID, $wpdb->posts.post_title, $wpdb->posts.guid, date_format($wpdb->posts.post_date, '%e-%m-%Y') as post_date
		from $wpdb->posts
		join $wpdb->term_relationships
			on $wpdb->posts.ID = $wpdb->term_relationships.object_id  
		where 
			$wpdb->term_relationships.term_taxonomy_id = ".$category[0]->cat_ID." and
			$wpdb->posts.post_type = 'post' and 
			$wpdb->posts.post_status = 'publish' and 
			$wpdb->posts.ID != ".$post->ID."
		group by $wpdb->posts.ID 
		order by $wpdb->posts.ID desc
		limit 5");
 
	echo '<ul>';
		foreach ($last_posts as $last_post_current) {
			echo '<li>';
				echo '<a href="'.$last_post_current->guid.'" rel="bookmark">';
					if (has_post_thumbnail($last_post_current->ID)) { 
						echo get_the_post_thumbnail($last_post_current->ID, array(40,40)); 
					}
					echo $last_post_current->post_title;
				echo '</a>'; 
				echo '<span class="date">'.$last_post_current->post_date.'</span>';
			echo '</li>';
		}
	echo '</ul>';		
}

A partir de un query se obtienen los últimos 5 posts publicados de la categoría activa get_the_category();.
Luego en el bucle que recorre cada post, se muestra el titulo, thumbnail y el enlace correspondiente a cada post.

Fijémonos en fragmento de código que nos interesa:

if (has_post_thumbnail($last_post_current->ID)) { 
	echo get_the_post_thumbnail($last_post_current->ID, array(40,40)); 
}

La función has_post_thumbnail(); a la que le pasamos como parámetro el post_id nos devuelve true si ese post contiene un thumbnail asociado. En ese caso se ejecuta la función get_the_post_thumbnail(); a la que se le pasa como primer parámetro el post_id y como segundo un tamaño para la imagen en miniatura (en forma de array), en este caso 40*40 pixel.

Podéis ver más información detallada sobre post-thumbnails en New in WordPress 2.9: Post Thumbnail Images.

El 21 de Noviembre la Universitat Oberta de Catalunya presentaba en Madrid el Grado Multimedia adaptado al Espacio Europeo de Educación Superior.

Podéis ver un video de la presentación del Grado Multimedia a cargo de Ferran Giménez (Director de los estudios).

MOSAIC

En el acto también se aprovecho para presentar la nueva versión de MOSAIC, una conocida publicación online dedicada a las tecnologías y la comunicación multimedia en el que pude colaborar hace unos meses.

Esta revista online surge como una iniciativa de la UOC para reforzar la relación entre el ámbito universitario y el mundo empresarial multimedia. Por otro lado también se presenta como un escaparate de los trabajos desarrollados por los estudiantes del Grado Multimedia y recoge la experiencia del equipo docente y de profesionales del sector a través de artículos, entrevistas y recursos.

Mesa redonda

Por último se celebro una mesa redonda con cinco profesionales.

En la mesa participemos: Antonio Ortiz (co-fundador de WeblogsSL), Tona Monjo (diseñadora de interfaz), Adelardo Sánchez (e-learning), Raquel García (flash y audio) y yo (front-end).
Read more »

Supongamos que tenemos la siguiente tabla de datos:

En la tabla vemos que hay unos campos de formulario para introducir el número de unidades de cada producto y que no tienen un texto que pueda usarse como LABEL. Ante esta situación he pensado que podría asociar explícitamente el INPUT con un LABEL de cada campo en la columna producto (reproductor mp3, impresora, caja 25 dvd).

<tr>
	<th id="pro1">
		<label for="a_uds">
			Reproductor <dfn title="Es un formato de audio digital"><abbr lang="en" xml:lang="en" title="MPEG-1 Audio Layer 3">MP3</abbr></dfn>
		</label>
	</th>
	<td headers="pro1 tpvp">
		40 &euro;
	</td>
	<td headers="pro1 tuds">
		<input type="text" id="a_uds" name="a_uds" value="1" size="4" />
	</td>
</tr>

Vemos que LABEL e INPUT se encuentran asociados por el identificador “a_uds”.

Aunque esta forma de proceder no sea “mala”, quizás la etiqueta textual queda “lejos” del control de formulario, lo que puede provocar cierta confusión a los usuarios de lectores de pantalla.

La solución más directa en estos casos es usar el atributo TITLE de los controles de formulario.

<tr>
	<th id="pro1">
		Reproductor <dfn title="Es un formato de audio digital"><abbr lang="en" xml:lang="en" title="MPEG-1 Audio Layer 3">MP3</abbr></dfn>
	</th>
	<td headers="pro1 tpvp">
		40 &euro;
	</td>
	<td headers="pro1 tuds">
		<input type="text" title="Número de unidades para: Reproductor mp3" name="a_uds" value="1" size="4" />
	</td>
</tr>

Usando title="Número de unidades para: Reproductor mp3" podemos ayudar a que el usuario sepa como actuar con ese control.

Voy a comentar una técnica de la cual no soy partidario. Pero como ya sabéis, existen veces en las que tus ideas y argumentos no coinciden con los del cliente y te ves obligado a usar este tipo de cosas.

Imagen ilustrativa de enlace que recibe el foco

Cuando hacemos clic en un enlace los navegadores te muestran una línea discontinua para indicar el elemento que ha recibido el foco.
Parece una tontería pero fijaros que los navegadores usan inteligentemente contornos dinámicos (propiedad outline de CSS) para no afectar a la maqueta del diseño web.

¿Como evitar el foco?

Esta línea discontinua podemos eliminarla con una simple regla de CSS donde hacemos uso de la pseudo-classe :focus.

	*:focus { outline: none; }

Este ejemplo es el más global, afectando a todos los elementos. Podemos usar algo más concreto y afectar únicamente a nuestro menú de navegación principal. Por ejemplo:

	#menu a:focus { outline: none; }

¿Y el por que no me gusta eliminar el foco?

Resulta evidente… Pero algunas simples razones:

• Accesibilidad, por ejemplo las persona con poca visión pueden así reconocer adecuadamente en que elemento esta operando.
• Usabilidad, no se enfatiza y refuerza el elemento sobre el que se hace clic.
• Otro ejemplo, ¿qué sucede si quieres navegar con el tabulador…?

José (director de trisquelmedia) nos contó la trayectoria de la empresa, desde su nacimiento hasta hoy.

Sus comienzos

José llevaba 10 años en acuicultura (felizmente recogiendo ostras), ahí es na… Pero se da cuenta de que la empresa no tiene cabida y va a cerrar, así que nos cuenta que se ha convertido en emprendedor por necesidad.
Sobre esto hago una reflexión personal: La inmensa mayoría de gente en edad de trabajar tiende a pensar en “buscar trabajo” e invertir una cantidad ingente de tiempo en ello. Pero parece que no tiene cabida el pensar “si no me dan trabajo, me lo creo yo mismo”. José es justo lo que ha hecho.

Read more »

Hace casi un año hablaba sobre un posible problema de usabilidad y accesibilidad en el formulario de inicio de sesión que tiene Facebook.

Desde entonces han mejorado un poquito la accesibilidad, aunque siguen sin usar la etiqueta label para el campo de Email de inicio de sesión. En su lugar han puesto los atributos title y value. El problema es que algunas ayudas asistivas pueden no interpretar el atributo title, por lo que esta solución no sería suficiente.

Respecto a la usabilidad puede ser debatida, pero el hecho de perder (lo que tienes que rellenar en ese campo) cuando haces clic en el, me parece un error. Eso si, visualmente y a nivel de interacción queda chulisimo.

Hoy, Kus (de uninstallme.com) me comenta:

Acabo de encontrar esto http://www.csskarma.com/lab/slidinglabels/ y me he acordado de este post. No lo he analizado a fondo, pero me ha parecido una buena idea.

Y tanto que es buena idea, la accesibilidad es impecable. Se usa JavaScript como un complemento no intrusivo que se encarga de realizar el efecto y la transición del label. Solo le veo una pega, que puede resultar cansino, yo lo usaría para formularios muy pequeños, con 2 o 3 inputs.

Un lujo contar con tus aportaciones María

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 »