Hace unas semanas necesitaba crear un modo cine (oscurecer toda la pantalla salvo un elemento -típicamente un vídeo-) para un proyecto que me encargaron. Buscando un poco, descubrí que era mucho más fácil de lo que pensaba: sólo hacen falta un par de líneas de HTML, CSS y JavaScript.

Efecto a conseguir

Púlsame para activar el modo cine

Nota: ¡Me encanta ese perro! 😀

Seguir leyendo

Cuando llevas un cierto tiempo editando CSS te das cuenta de una cosa: hay código que repites mucho, especialmente si usas algún tipo de framework. Tarde o temprano te dices: “Sería genial poder automatizar el código, que dando una simple orden se insertara ese código repetitivo”… Bueno, en resumen, en eso consisten SASS y LESS.

SASS y LESS son preprocesadores de CSS que añaden nuevas funcionalidades al lenguaje CSS (variables, funciones, condicionales…). Lo mejor de todo es que generan código CSS completamente normal, por lo que ni tú ni tus usuarios tendréis que hacer nada para que tus webs funcionen. Tampoco tendrás que pasarte meses estudiando documentación, ya que su funcionamiento es muy fácil. Veamos qué posibilidades nos ofrecen y en qué se diferencian.

Seguir leyendo

Hace unos días descubrí una nueva posibilidad que ofrece HTML5: enlazar a una hoja de estilos diferente (o varias) si el usuario tiene desactivado JavaScript.

¿Cómo se puede conseguir? Muy fácil: poniendo el link al archivo CSS dentro de una etiqueta <noscript>. Esto, antes de HTML5, no era correcto. En la nueva versión, está aceptado.

Esta opción, que estaba deseando que existiera, la descubrí de casualidad mientras leía la documentación de adapt.js, un “compañero” de 960.gs para adaptar las páginas a dispositivos con diferentes pantallas (móviles, tablets, etc). De hecho, usan esta opción para servir el CSS por defecto.

Seguir leyendo

O eso, o el día de las semifinales de la Champions tuvieron un error en su web. Como se puede ver en la captura, todos los textos de la columna izquierda aparecían tachados. He de confesar que en el momento hice la captura y no me paré a ver el código para saber dónde habían metido la pata. No había podido ver el partido y tenía ganas de ver qué había pasado en lugar de pararme con esas cosas.

Sin embargo, se podría buscar una explicación fácilmente, o eso creo. La más lógica sería que se les colara la propiedad line-through en la clase CSS que apliquen e la columna izquierda y listo, todo el texto tachado.

Últimamente me estoy interesando mucho por el uso de frameworks . Esta es su definición según la wikipedia:

La palabra inglesa framework define, en términos generales, un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular, que sirve como referencia para enfrentar y resolver nuevos problemas de índole similar.

En el desarrollo de software, un framework es una estructura conceptual y tecnológica de soporte definida, normalmente con artefactos de software concretos, mediante la cual otro proyecto de software puede ser organizado y desarrollado. Típicamente, puede incluir soporte de programas, bibliotecas y un lenguaje interpretado entre otros programas para ayudar a desarrollar y unir los diferentes componentes de un proyecto.

Usarlos tiene ventajas y desventajas:

  • Ventajas: rapidez, funcionamiento probado, amplia documentación (habitualmente) y soporte de la comunidad de usuarios correspondiente.
  • Desventajas: si no tienes conocimientos suficientes, se hace a veces más complicado modificar los comportamientos por defecto, especialmente en los frameworks de PHP. Al usar frameworks ajenos, tienes que seguir las reglas de otra gente para que funcione correctamente, cosa que no te pasaría con tu propio sistema. También corres el riesgo de usar algo que funciona aunque no sepas por qué y que eso te pase factura a la larga.

Seguir leyendo