Autor: Juan Díaz-Bustamante

Imágenes en diseño web adaptativo: picture, sizes y srcset

Desde que hace años empezamos a implementar el diseño web adaptativo o responsive web design teníamos un problema pendiente: las imágenes. Este problema está dejando de existir. Por fin hay un acuerdo general en cómo hacerlo a través del elemento picture de HTML5 y de un par de nuevos atributos del elemento img. En este artículo veréis ejemplos de código que podéis aplicar ya en vuestros desarrollos.

Seguir leyendo

FlexBox: La caja flexible con CSS 3

Este era un artículo original del 2012. Dado el momento actual y ya definitivo de Flexbox, ha llegado el momento de poner este artículo al día para que os sea útil. Flexbox ya está listo. Es el momento de usarlo. Flexbox viene a solucionar uno de los mayores quebraderos de los diseñadores de páginas web: […]

Seguir leyendo

Nuevo modo de emulación de móviles en las herramientas de Chrome

Las nuevas versiones de Google Chrome han incorporado a su herramienta para desarrolladores algo muy interesante: un emulador de dispositivos móviles. Es una herramienta que puede ser muy útil para los que utilicéis Chrome. Está un poco oculta a primera vista. Primero activamos la Herramienta para desarrolladores (Menu > Herramientas > Herramientas para Desarrolladores, Cmd+Opt+I […]

Seguir leyendo

Extend en Sass

Seguimos con nuestro curso de Sass, y esta vez vamos a ver Extend. Ya vimos en el artículo anterior sobre Mixins cómo había ocasiones en las que estos creaban un CSS poco eficiente, siendo recomendable el uso de Extend. Recordemos. Teníamos:

Y haciéndolo más eficiente, con selectores separados por comas:

Veíamos que no […]

Seguir leyendo

El elemento main en HTML5

A finales de 2012 hizo su primera aparición el elemento , pero no ha sido hasta ahora cuando se ha incluido ya definitivamente en las especificaciones del Core HTML 5.1. Si leemos dichas especificaciones vemos cuales son las características principales del elemento : Representa el contenido principal del cuerpo (body) de una web o aplicación. […]

Seguir leyendo

Mixins en Sass

En nuestra cuarta entrega del curso de Sass vamos a ver una de sus aportaciones más potentes: Mixins. ¿Para qué valen los Mixins? Los Mixins te permiten reutilizar estilos (propiedades e incluso selectores) sin tener que copiarlos y pegarlos cada vez que quieres utilizarlos. Por ejemplo, supongamos que tenemos un estilo básico para los botones […]

Seguir leyendo

Variables en Sass

Esta es la tercera entrega del Curso de Sass. En este artículo vamos a ver una de las características más útiles de Sass: el uso de variables. Cómo escribir una variable en Sass Las variables en Sass se escriben con el prefijo $, por ejemplo:

Aquí hemos definido una variable $color a la que […]

Seguir leyendo

Sass: Comentarios, importaciones y anidación

Si has seguido el artículo anterior tendrás ya instalado Sass y todo listo para empezar tus primeros pasos. Para estos primeros pasos podéis usar una herramienta como esta: http://sass-lang.com/try.html o como esta: http://trysass.com/ para convertir el código Sass que veremos aquí en CSS. Simplemente escribís arriba el código Sass, hacéis click en “Render” y abajo […]

Seguir leyendo

Curso de Sass: Introducción

El uso de Sass es, junto al diseño web adaptativo, lo mejor que me ha pasado desde el punto de vista del desarrollo web en los últimos tiempos. Empezar con Sass da un poco de respeto al principio… hasta que lo empiezas a usar. Es ese tipo de cosas que luego ya no sueltas nunca […]

Seguir leyendo

Marcando el logo en tu web con schema.org

El Blog para Webmasters de Google publicó el pasado día 21 de Mayo un artículo sobre cómo marcar en una web el logo de la empresa con schema.org para que Google lo identifique como tal y lo muestre en los resultados de búsqueda. En el blog lo ponen así:

aunque la forma más habitual […]

Seguir leyendo