Respeta la especificación

Todo el mundo sabe que en general, los navegadores son muy tolerantes a errores en el marcado y por eso muchos programadores / diseñadores no prestan una adecuada atención a las estructuras HTML que producen. Os voy a poner un caso que me ha ocurrido hoy para no olvidar que aunque se toleren los fallos, siempre es mejor no cometerlos:

Teníamos esta estructura:

<button>
<span> Test </span>
</button>

En un momento dado, la expandíamos añadiendo cierto marcado al interior del botón:

<button>
<span>
<button><span>Test 1</span></button>
<button><span>Test 2</span></button>
<button><span>Test 3</span></button>
</span>
</button>

Pues bien, en Firefox, los botones internos jamás recibían ningún evento. ¿Por qué? Pues porque la especificación dice del contenido de un elemento button, lo siguiente:

Content model:
Phrasing content, but there must be no interactive content descendant.

Modelo del contenido:
Contenido en forma de sentencia, mas no debe haber ningún descendiente con contenido interactivo.

¿Quiere esto explícitamente decir que los eventos que reciba el primer button no se propagarán hacia los botones contenidos en él? No, o la menos yo no he encontrado esa negación explícita. Se trata sencillamente de un comportamiento indefinido y no se puede confiar en los comportamientos indefinidos. No hay duda de que son útiles para la optimización y en este caso, Firefox no propaga eventos de interacción dentro de un elemento que no debería tener contenido interactivo.

Una reflexión sobre la interacción diseñador – desarrollador

Hace ya un tiempo escribía acerca de la Codemotion, os decía que me había parecido medianamente interesante la charla titulada  Template animation & OO CSS: Be nice with your Web Designer que trataba acerca de la interación desarrollador – diseñador.

Buscando template animation llegué al artículo Your templating engine sucks and everything you have ever written is spaghetti code (yes, you) escrito por Iain Dooley acerca de los inconvenientes de utilizar lenguajes de plantilla. Es él quien acuña el término que puede resumirse en:

Template animation: the practice of using static HTML files as a resource from within your application to be manipulated via the DOM to generate dynamic output.

Animación de plantillas: la práctica de usar archivos HTML estáticos como recursos a ser manipulados via DOM, dentro de tu aplicación, para generar salida dinámica.

En pocas palabras, usar las maquetas HTML del diseñador como bibliotecas de elementos de ejemplo para componer dinámicamente las páginas finales que se mostrarán al usuario.

Leyendo a Dooley estuve pensando seriamente en las interacciones diseñador – desarrollador. A menudo, discuto con mi novia si lo que se pide a los diseñadores web es demasiado: ¿es mucho pedir programación a un diseñador? ¿Es necesario pedirle conocer al menos un lenguaje de plantilla como Django Templates o Liquid? ¿Cuál es la frontera diseño / implementación?

Seguir leyendo «Una reflexión sobre la interacción diseñador – desarrollador»