Franchu’s lair

Cuando me encontré el artículo de John Resig titulado Sub-Pixel Problems in CSS pensaba que había leido mal. Para mi los pixels eran unidades indivisibles, algo así como cuando de pequeño te dicen que el átomo es la parte más pequeña de la materia y luego te das cuenta que hay más cosas dentro… pues así me he sentido cuando he entendido lo que quería decir. Por eso he decidido traducir su artículo para que más gente lo pueda entender.

Para ilustrar el problema, basta pensar qué ocurre cuando tenemos 4 divs flotados, cada uno de ellos con una anchura del 25%, contenidos en un div padre de 50px de ancho. ¿Qué anchura tiene cada div?

El problema es que cada div debería de tener 12.5px de anchura, pero como no se pueden renderizar fracciones de pixeles los navegadores tienen que redondear el número. Entonces el problema se convierte en saber, cómo redondear el número. ¿Redondeamos hacia arriba, hacia abajo, aleatoriamente? Los resultados son sin duda sorprendentes!

John Resig - Sub-Pixel Problems in CSS via kwout

Se pueden ver tres formas diferentes de hacerlo y los efectos que tienen sobre el resultado final:

• Redondear hacia abajo - Tanto Opera como Safari redondean hacia abajo las anchuras de los divs. En este caso el redondeo convierte los divs a una anchura de 12px, dejando un hueco de 2px (se puede apreciar la zona verde) a la derecha de todos los divs. Si alguna vez te has planteado porqué tu página cuidadosamente alineada no llena el contenedor en estos navegadores, esta es la respuesta. La ventaja es que por lo menos sabes que la anchura de estos contenedores será siempre la misma, independientemente del valor que pongas.
• Redondear hacia arriba - Tanto Internet Explorer 6 como Internet Explorer 7 redondean las anchuras de todos los divs hacia arriba, pasando en este caso a tener 13px. Haciendo esto hacen que los divs flotados no quepan a lo ancho y se coloquen debajo, destrozando la maquetación. Esto es obviamente incorrecto y es la causa de que muchas veces la maquetación se vaya al traste sin motivo aparente.
• Redondear algunos números hacia arriba y otros hacia abajo - Tanto Firefox 2 como Firefox 3 mezclan la política de redondeo apareciendo divs con 12px y otros con 13px. La mezcla se hace de tal forma que la anchura final encaje con la del contenedor, haciendo que se ajuste correctamente a los bordes externos. El efecto colateral es que los divs ya no tienen una anchura consistente (aunque esta hubiese sido definida como tal en el CSS!). Además, cuando se pregunta al navegador la anchura del div devuelve 12.5px constantemente no permitiendo al usuario saber cómo se ha realizado el redondeo a la hora de renderizar el div. Para añadir más confusión todavía, el orden en el cual se asignan los anchos de 12px y 13px se ha cambiado entre las versiones 2 y 3 de Firefox teóricamente para mejorar la eficiencia y la velocidad, aunque en la realidad parece que tiene un efecto mínimo (si es que lo tiene!)

David Baron, uno de los desarrolladores de Mozilla, explica la situación muy bien:

Estamos intentando ajustarnos a muchos requisitos que no pueden ser satisfechos simultáneamente:

1. 4 objetos adyacentes con alturas/anchuras de 25% (por ejemplo) empezando en un borde de un contendor tiene que terminar exactamente en el borde del otro; no debería haber en ningún caso pixeles extra en el contenedor y nunca deberían descolocarse por ser demasiado ancho.
2. Los objetos adyacentes lógicamente, deberían siempre tocarse visualmente; no debería haber huecos de un pixel o superposiciones de un pixel debido a errores de redondeo.
3. Los objetos con la misma anchura deberían de ocupar el mismo número de pixels.

La que Mozilla sacrifica normalmente es la tercera, excepto en los bordes en la que se sacrifica la primera al redondear las anchuras a pixeles enteros mucho antes.

Lo más curioso es que no existe una forma de hacerlo bien o mal. La especificación de CSS no define cómo se tienen que renderizar estos casos. Las restricciones de arriba podrían ser utilizadas en todos los navegadores, pero hay que sacrificar alguna de ellas para que sean consistentes y se puedan llevar a la práctica.

Es bastante frustrante, pero tenerlo en cuenta seguro que nos salva de muchas horas de frustración!

Acabo de ver un video en Digital Urban en el que se muestra cómo ha cambiado la forma de entender, generar, clasificar, acceder, … a la información.

Personalmente creo que estamos viviendo el principio de un gran cambio que llegará con el advenimiento de la web semántica. De la web semántica se lleva hablando ya bastante tiempo (puede que no tanto como de IPv6 ), pero creo que no se ha llegado a materializar porque las definiciones no están claras para todos y la tecnología no está lo suficientemente madura como para soportarla.

Sobre la web semántica, recomiendo echar un vistazo al resumen de un informe elaborado por la gente de Project10x y en el que tratan cómo se prevé que evolucionen las tecnologías y aplicaciones relacionadas con la web semántica.

Me ha parecido especialmente ilustrativo de la evolución que podemos esperar, el siguiente diagrama en el que se ve claramente como las distintas tecnologías y evoluciones en los paradigmas de la información online nos llevaron de la web1.0 a la web2.0, cómo la web semántica servirá de soporte a la web3.0 y que adelantan una posible web4.0 en la que la web sea el soporte para servicios y aplicaciones pervasivas y ubícuas.

About Project 10X via kwout

En el diagrama hay una pequeña errata, el 1 que aparece en el sector superior izquierdo debería de ser un 3.

Relacionado con el tema de los servicios pervasivos y ubicuos, aprovecho para enlazar un documento dentro del cual podreis encontrar un artículo sobre servicios pervasivos en el contribuí como autor durante mi etapa en Telefónica I+D. Gracias Marta!

Last summer I took a trip to Croatia and had the opportunity to visit the Plitvice Lakes natural park.

I had seen many pictures online before going and had always thought that they had been processed in Photoshop to enhance the colours. That is why I was so surprised to see that the lakes are as green as in the pictures, and that the water is cristal clear.

The entrance is a little bit pricey for Croatian standards, but should falls in line with normal EU prices. You can check the latest prices on the park website.

The visit can be done on foot and several itineraries are available depending on how much time you have to visit. You can either walk all around the park, or take buses and a little boat across one lake to get a different point of view and shorten the visiting time. In the center of the park, where you can take a boat to cross the lake, there are restaurants and bars where you can buy refreshments, but be ready to be ripped off. Everything is disproportionately expensive even for EU standards! For example, a small bottle of water was around 2.5€ So, my advice is to bring your own drinks and food and enjoy a quite picnic in a wonderful scenary.

For sleeping there are lots of rooms for renting nearby and a nice camping around 5 Km from the entrance of the park.

Here you can see some of the pictures I took