La diferencia entre width:auto y width:100%

La mayor parte de las veces que veo un CSS en el que “algo sale mal” (incluso en mis propios CSS) se debe a una falta de entendimiento de las propiedades y reglas de CSS. Es normal: la mayoría de las personas que hacen páginas web (incluido yo mismo) han aprendido de una forma desordenada, viendo ejemplos, probando, es decir, de una forma empírica, pero no han realizado un curso, no se han leído un libro,  y mucho menos se han leído la especificación oficial de CSS. Han ido descubriendo las reglas de CSS, pero realmente no las han aprendido.

En el artículo The difference between width:auto and width:100% se explica la diferencia entre auto y 100%. Se emplea width:100% para que un elemento adopte todo el ancho del elemento contenedor que lo contiene, pero esto es un error, ya que en el cálculo de width no se tiene en cuenta el margen (margin), el borde (border) y el relleno (padding). Si alguna de estas propiedades tiene un valor distinto de cero, el tamaño final del elemento será superior al de su contenedor y como resultado “se saldrá”. ¿No te ha pasado alguna vez? La solución es usar width:auto. Sencillo y efectivo.

El autor de este artículo ha preparado un ejemplo que muestra muy bien esta situación:

Las diferencias son claras, así que, seguramente la próxima vez que estés pensando escribir width:100%, seguramente lo que realmente necesites es width:auto.

La accesibilidad del correo de Iberia

¡Con lo fácil que es a veces hacer las cosas, y sin embargo, hay gente que le gusta hacerlo más difícil, más complicado, y al final, meter la pata!

El pasado 1 de diciembre, Iberia envío un correo electrónico a sus clientes y publicó el mismo mensaje en su web:

No voy a comentar el contenido del mensaje, eso ya lo han hecho los medios de comunicación:

¿Y yo por qué dedico unos minutos a este correo electrónico y a esta página web? PORQUE NO ES ACCESIBLE.

He preparado un vídeo para explicarlo, Accesibilidad web: el correo de Iberia:

[kml_flashembed movie=”http://www.youtube.com/v/yreX6y2HY_4″ width=”560″ height=”315″ wmode=”transparent” /]

En el vídeo no lo comento, pero este mensaje, como tiene problemas de accesibilildad, también es difícil de leer desde un dispositivo móvil. Seguramente eso sí que les interesa a los directivos de Iberia, que sus comunicaciones lleguen a sus clientes VIP que acceden con teléfonos inteligentes.

 ¿Tanto cuesta hacer las cosas bien?

Lo que ocurre es que sigue existiendo, y existirá, gente que no sabe qué es la Web. Lo siento por ellos, por las empresas a las que engañan y por los usuarios que lo tienen que sufrir.

La programación en España

Hace unos días escribí unos artículos sobre la triste situación de los profesionales de la informática en España (Sobre la informática en España) y sobre el intrusismo y los colegios profesionales (Sin tetas no hay paraíso).

Seguro que habrá gente que pensará que la situación no es tan triste. Claro, y también hay gente que piensa que el hombre no llegó a la Luna (si no me equivoco, algo así como el 40% de la población de Estados Unidos piensa eso, pero claro, allí también tuvieron un presidente que tenía una idea muy rara de lo que es y no es sexo, y muchos también le creyeron).

Si te interesa el tema de la situación de la programación y de los programadores en España, te recomiendo los siguientes artículos que exponen diferentes puntos de vista:

También es muy interesante leer los comentarios que dejaron en los artículos anteriores. Se pueden encontrar muchos puntos de vista complementarios.

¿Quieres hacer tu propio framework de JavaScript?

No te lo recomiendo, con la cantidad de frameworks que ya existen, lanzarse a hacer uno propio es un poco pérdida de tiempo. Recuerda, no reinventes la rueda. Pero quizás tengas entre manos un proyecto especial en el que sea necesario trabajar con un framework propio.

En el sitio web Let’s Make a Framework te explican paso a paso cómo crear tu propio framework de JavaScript. Aunque no lo vayas a hacer, es un recurso muy interesante, ya que te ayuda a comprender cómo están hechos los frameworks que seguramente ya usas.