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]

Si estás programando una aplicación tipo dashboard, escribiendo un resumen de estadísticas, o construyendo aplicaciones web para manipular datos, conviene que conozcas las herramientas que te permiten dibujar todo tipo de gráficas en la Web. En este artículo damos un repaso a cinco de las mejores bibliotecas JavaScript que puedes encontrar para esta tarea. [Más]

Los GIF animados vuelven a estar de moda. Cada vez se ven más. Pero este tipo de archivo es muy ineficiente, consume mucho ancho de banda, ralentiza las páginas y hace que el navegador haga más uso del procesador del que debiera. De hecho, la mayor parte de las páginas que tienen GIFs realmente no los utilizan. Usan otro truco para que parezcan GIFs pero en realidad los optimizan para que no tengan ninguno de estos inconvenientes. En este post te contamos cómo conseguir lo mismo... [Más]

Bueno, en realidad no es solo cosa de las imágenes. Suele ocurrir en elementos en línea que están dentro de un elemento de bloque sin altura definida. Si llevan un tiempo trabajando en el frontend, seguro que alguna vez te ha pasado algo así: Tienes una serie de imágenes, cada una dentro de un enlace, y para ordenar esos enlaces decides darles un display:block; o inline-block, para poder manejarlos a gusto. Pero, oh sorpresa, de repente te aparece un hueco debajo de la imagen que no sabes de dónde ha salido. [Más]

El sistema grid de CSS es el nuevo estándar para estructurar elementos en 2 dimensiones en páginas web. A diferencia del sistema flexbox, grid permite definir con precisión la distribución de los elementos en los ejes horizontal y vertical simultáneamente. Además, soluciona muchos problemas clásicos de estilo y estructura con mucho menos código CSS, y nos puede servir como sustituto de frameworks responsive tipo Bootstrap, si únicamente nos hace falta la funcionalidad de columnas. En este artículo construiremos estructuras comunes de páginas web de forma simple mediante grid, y veremos lo versátil que llega a ser. [Más]