En este tutorial vamos a aprender cómo hacer, de una forma muy sencilla y solo con HTML y CSS una galería de imágenes (o de cualquier otro elemento) al estilo Pinterest. Esto es, tenemos imágenes de distinto tamaño que no se alinean horizontalmente, sino verticalmente en columnas. Realmente Pinterest no inventó nada nuevo, pero consiguió polpularizar esta forma tan peculiar de presentar el contenido. [Más]

Segundo y último día del Chrome Dev Summit 2018. En el artículo de ayer nuestro tutor David te contaba desde San Francisco que la mayoría de las conferencias impartidas intentaban hacer hincapié en lo importante que es cuidar el rendimiento y tiempo de respuesta de tu página web. Se podría decir que el foco de ayer consistía en analizar y mejorar la web actual. El foco de hoy ha sido distinto y lo que se pretendía mostrar es cuál va a ser el futuro de la Web en los años venideros. Tema sin duda interesante. Te contamos los detalles a continuación... [Más]

Los días 12 y 13 de noviembre se está celebrando en San Francisco la conferencia para desarrolladores Web más importante del mundo, auspiciada por Google. Y nuestro tutor David García Valiñas está allí, en primera fila, para contarnos de primera mano qué es lo que se está presentando y darnos un buen resumen de lo más interesante. Te lo contamos casi en directo... [Más]

Cuando se piensa en las 100 principales páginas web del mundo, se piensa en dominios de mucho tráfico y en páginas programadas a la perfección. Sin embargo, incluso los sitios web más populares del mundo tienen errores que se esconden entre bastidores y que se pueden ver en las herramientas de desarrollo de tu navegador. Estos pueden afectar directamente a tu experiencia de usuario, crear datos de seguimiento inexactos o fallos de seguridad, e incluso pueden hacer que la empresa propietaria de la web pierda ingresos. Hemos encontrado que la mayoría de las 100 páginas más visitadas presentaban varios errores que podían ser fácilmente controlados y prevenidos por sus correspondientes equipos de TI. Si se producen errores en estos sitios tan populares, con más razón pueden ocurrir en el sitio web de tu empresa. A continuación te mostramos los errores más comunes en los principales 100 sitios web del mundo, y te enseñamos cómo evitarlos. [Más]

En revistas de papel es habitual encontrar las iniciales de los textos resaltadas de algún color y en mayor tamaño, como una indicación visual del lugar por donde se empieza a leer el texto. Si quieres introducir este elemento práctico y decorativo en una web, hay varias formas de conseguirlo. En este artículo estudiaremos cómo funcionan y sus ventajas e inconvenientes, e incluso veremos la forma más moderna que ni siquiera está soportada todavía por los principales navegadores (pero te puedes a ir preparando). [Más]

¡La versión 7.0.0 de Angular está aquí! Esta es una nueva versión "Major", de las que lanzan cada 6 meses, y que afecta a la plataforma completa, incluido el "core" del framework, a Angular Material y a la herramienta de línea de comandos, con versiones principales sincronizadas. Esta versión contiene nuevas funciones para el "tooling" y ha permitido varios lanzamientos interesantes de algunos partners del framework. Vamos a dar un repaso rápido a las novedades. [Más]

Los estilos específicos para imprimir muchas veces son los grandes olvidados, ya no solo a la hora de maquetar una web, sino incluso por los propios desarrolladores de navegadores. Si nunca has trabajado con ellos, probablemente las primeras veces te encuentres con algún dolor de cabeza. Realmente no es que sea muy difícil si lo planificamos bien, aprovechando los estilos CSS generales y dándole un poco de cariño a los estilos para impresión con unas pocas reglas, podemos ganar muchos puntos a los ojos de nuestros usuarios. [Más]

Los actuales motores de JavaScript están súper-optimizados. Combinan un intérprete para poder ejecutar el código lo antes posible, con un compilador para optimizar el código y convertirlo a código máquina de modo que en muchas ocasiones JavaScript puede ser tan rápido como C++ (o más). Pero conocer su funcionamiento interno nos puede ayudar a evitar posibles problemas que causen una caída de rendimiento espectacular. En este artículo se explica una de las cuestiones a tener en cuenta que permite mejorar el rendimiento entre 7 y 10 veces en algunas ocasiones. [Más]

En este post vamos a aprender una técnica muy sencilla pero resultona para simular una cinta (ribbon, en inglés) con un texto superpuesta con CSS sobre un elemento del contenido. La aplicación práctica más habitual para esta técnica es la clásica cinta que pone "Nuevo" por encima de un producto (o cualquier otra característica que se quiera destacar) en un e-commerce, pero realmente se puede aplicar en muchos otros casos, como posts de un blog, imágenes o vídeos de una galería, un listado de usuarios… [Más]

El viewport de un dispositivo es el tamaño teórico que tiene la pantalla de dicho dispositivo, el cual no tiene por qué coincidir con la resolución real de la pantalla (de hecho no coincide casi nunca en dispositivos modernos). La resolución se refiere al número de píxeles que puede mostrar dicha pantalla. Estos dos conceptos a pesar de ser tan sencillos tienen un gran potencial y es la base del funcionamiento de los navegadores móviles. Te contamos qué son, en qué se diferencian y cómo gestionarlos. Y te hablamos del concepto "píxeles CSS". [Más]