Mantén los selectores cortos

Muy interesantes los consejos que podemos encontrar en el artículo Keep your CSS selectors short.

¿Qué es mejor?

html body .header .nav{}
.nav{}

¿Qué es mejor?

.widget{}
.widget > h2{}

Bueno, está claro que dependerá de la situación y de lo que queramos conseguir, pero en general, lo que nos explica este artículo es que cuanto más corto y genérico sea un selector en CSS, más compatible será, más portable y fácil de reutilizar será y, por tanto, será mucho mejor que usar selectores muy largos y específicos que sólo sirven para una parte muy concreta de una página web.

El autor de este artículo enuncia las siguientes ventajas de optar por selectores cortos, y las explica una a una:

  • Aumenta la eficiencia del selector.
  • Reduce la dependencia de la ubicación.
  • Aumenta la portabilidad.
  • Reduce las posibilidades de rotura de selección.
  • Disminuye la especificidad.
  • Puede hacer que el código más permisivo.

Bueno, esto es sólo una opinión, seguro que otro desarrollador web puede opinar lo contrario. Pero lo importante es tener una opinión, es decir, tener argumentos para defender una forma de actuar, y no simplemente “lo hago así porque sí”.

Fluye con CSS, no luches contra él

¿Por qué muchas veces las páginas no se visualizan con CSS de la forma que esperamos? ¿Por qué a veces nos cuesta tanto lograr el diseño que queremos con CSS?

Muchas veces es porque no sabemos utilizar bien CSS, pero muchas otras veces es porque vamos contracorriente, intentamos hacer cosas en contra de la filosofía del funcionamiento de CSS.

Acabo de leer el artículo Cross-Browser Debugging CSS. Me ha llamado la atención una frase, que me recuerda al “Be water my friend” de Bruce Lee:

[kml_flashembed movie=”http://www.youtube.com/v/7ijCSu87I9k” width=”640″ height=”360″ wmode=”transparent” /]

La frase es:

 Work with CSS, not against it.

Una traducción literal sería “Trabaja con CSS, no contra él”, aunque a mí me gusta más “Fluye con CSS, no luches contra él”. Porque además, muchos diseñadores web se olvidan de que la Web es un medio dúctil, maleable, en el que los diseños tienen que fluir (por algo se habla de diseño líquido o fluido); la Web no es un medio rígido, fijo, como el papel (diseño fijo).

El artículo cuenta muchas cosas muy interesantes:

  1. Escribe código para un buen navegador, por ejemplo, Google Chrome, desde el principio.
  2. Verifica tú página con otro buen navegador, como Safari o Mozilla Firefox, si hay discrepancias, lo más seguro es que estés haciendo algo en contra de CSS. Averigua la razón, por ejemplo:
    1. HTML incorrecto.
    2. Verifica tu CSS con CSS Lint.
    3. ¿Has normalizado/reseteado los estilos para comenzar desde un mismo punto?
    4. ¿Estás usando propiedades avanzadas que no se soportan de la misma forma?
    5. Cuidado con el posicionamiento absoluto.
    6. ¿Te está afectado el espacio en blanco?
    7. Errores de redondeo en los cálculos de las dimensiones.

El mensaje más importante que se transmite en el artículo es que el comportamiento ante un error no está definido en la especificación, es decir, cuando en un CSS hay un error, ya sea de escritura (por ejemplo, un valor para una propiedad no adecuado) o de uso (utilizar una propiedad en un contexto que no se debería hacer), cada navegador hará lo que le de la gana. Esto coincide con los vídeos que publiqué sobre ¿Por qué escribir HTML válido es importante?

El resto del artículo, ¡casi la mitad del artículo!, se dedica a los apaños y chapuzas que hay que hacer para solventar los problemas (no sólo discrepancias en la forma de interpretar algunas propiedades, sino verdaderos bugs) que tienen las distintas versiones del navegador Internet Explorer. Una verdadera vergüenza, una pérdida de tiempo impresionante por un navegador que no debería considerarse como tal.

Cómo centrar cualquier cosa con CSS

Centrar un elemento en una página web con CSS siempre ha sido un quebradero de cabeza.

Centrar un texto sí que es sencillo, porque existe la propiedad text-align, pero cuando queremos centrar una lista, un párrafo o algún otro elemento similar, empiezan los verdaderos problemas.

Normalmente se soluciona poniendo margin-left: auto y margin-right: auto, pero a veces no es tan sencillo. Y cuando se quiere centrar un elemento verticalmente, entonces sí que empiezan realmente los problemas.

La página web How to Center Anything With CSS es una exhaustiva recopilación de las diferentes situaciones que se nos pueden plantear y de las diferentes soluciones que existe.

Error: la Universidad de Alicante ofrece un máster venido del futuro

Y es el Máster universitario en ingeniería informática, así que lo que se debe enseñar ahí debe ser increíble, seguro que casi todo nos parecerá ciencia ficción.

En la página del máster, que por cierto, tiene la molesta barra de desplazamiento horizontal por un fallo en el CSS:

Podemos leer lo siguiente, Fecha de aprobación “01/01/3333” (para entonces, como se suele decir, todos calvos):

¿Por qué tienes un sitio web?

Muchas veces una personas o una empresa quiere tener un sitio web, pero no sabe por qué. El artículo Why do you have a website? nos da algunas claves para poder responder esta pregunta.

En este artículo, el término sitio web engloba tanto a un sitio web tradicional, como a la visibilidad en una red social o una aplicación. Según el autor, en última instancia los sitios web se pueden clasificar en dos tipos: los que son un fin por sí mismo y los que son un medio para un fin.

El artículo se centra en un tipo concreto de sitios web: aquellos que comercializan servicios empresa a empresa (business-to-business), aunque la empresa podría ser un particular, es decir, un freelance. Según el autor, un sitio web cualquiera pude tener múltiples propósitos, pero para este tipo de sitios web, sólo hay cuatro propósitos básicos:

  1. Describir tu experiencia o conocimientos.
  2. Construir tu reputación.
  3. Generar contactos.
  4. Alimentar tus ventas.

En el resto del artículo, se explican uno por uno estos cuatro propósitos básicos.

Error de diseño en el blog Ventanilla o Pasillo del periódico El Mundo

En el blog Ventanilla o Pasillo del periódico El Mundo han puesto una imagen de fondo en la cabecera que no es lo suficientemente grande y se repite en resoluciones grandes (1920 píxles en mi caso), estropeando el diseño.

Esto se puede solucionar de varias formas, pero las dos más normales son:

  • Utilizar una imagen mucho más grande, pero el tamaño del fichero también aumenta, empeorando el tiempo de visualización de la página y empeorando la experiencia de usuario, que es lo más importante.
  • Difuminando los bordes de la imagen, por ejemplo a un degradado a negro o a blanco, y colocando un fondo de ese color.

Captura de pantalla de Ventanilla o Pasillo

Un ejemplo de cómo se puede solucionar lo podemos ver en el periódico El País con el anuncio que aparece en la página principal:

Fondo en el periódico El País

Maxthon, ¿el mejor navegador para HTML5?

Una vez se me acabó la risa que me produjo el anuncio de Microsoft Internet Explorer en el que se dice que Internet Explorer es el mejor navegador para HTML5 (según W3C.es), necesitaba averiguar cuál es realmente el mejor navegador en la actualidad (muy importante, en la actualidad) para HTML5.

¿Y por qué esa necesidad? Muy sencillo, porque este lunes inició el curso Nuevos estándares en el desarrollo de sitios web: HTML5 y CSS3 en la Diputación de Alicante y hay que estar preparado por si algún alumno “listillo” (que siempre hay alguno) me hace esa pregunta para “pillar al profesor”. Hacer preguntas no está mal, todo lo contrario, anima la clase, crea un ambiente de comunicación (que hable sólo el profesor no es comunicación, es una mierda) y el profesor también aprende de las preguntas que hacen los alumnos porque a veces plantean cosas que quizás el profesor no se las ha planteado (el profesor no es Dios); lo que está mal, muy mal, es el “listillo” que lo único que busca es demostrar lo que sabe o dejar al profesor en ridículo.

Volviendo al mejor navegador para HTML5 en la actualidad, según el sitio web The HTML5 Test, en su comparativa aparece Maxthon 3.3.7 como el que obtiene una mayor puntuación con 437 puntos de 500. Por otro lado, Microsoft Internet Explorer 9 es el peor situado, con unos míseros 138 puntos:

The HTML5 Test, compare browsers

¿Qué navegador es Maxthon, que supera a Chrome, Firefox u Opera? Ni idea, el lunes lo instalaré y lo descubriré junto con mis alumnos.

Maxthon

Se coge antes a Internet Explorer que a un cojo

El refranero español contiene miles y miles de refranes, algunos tan ciertos como “Se coge antes a un mentiroso que a un cojo”.

Acabo de ver el siguiente anuncio de Internet Explorer 9 y me he quedado pasmado:

El mejor navegador para HTML5

Claro, y sin duda ir en un carromato era el mejor medio de transporte hace 100 años. Aquí, el vídeo, el momento cumbre aparece en el segundo 22:

[kml_flashembed movie=”http://www.youtube.com/v/eDqB–gICos” width=”640″ height=”360″ wmode=”transparent” /]

Para el que tenga dudas, le aconsejo pasarse por alguno de estos sitios e investigar un poco: