Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

623 artículos publicados

Mezclando colores y creando efectos fotográficos en CSS mediante el uso de "blend modes"

Pensemos en un píxel de un objeto o imagen como una terna (r, g, b) donde los valores r, g y b representan la cantidad de color rojo, verde y azul. Estos valores se encuentran en el rango de 0 a 1, siendo 1 la máxima cantidad posible, es decir, (1, 1, 1) sería el color blanco y (0, 0, 0) el negro. Ahora, cuando dos objetos se superponen, habrá uno de ellos que esté por encima (o en el frente), y generalmente su color se impondrá, sustituyendo al que esté debajo (o en el fondo). Sin embargo, los colores de frente y de fondo se pueden mezclar de otras formas, produciendo un color final distinto a ambos. Esto es de uso común en programas de ilustración y diseño gráfico, que nos permiten dibujar utilizando operaciones sobre los colores: desde aritmética básica como sumar y restar hasta otras operaciones más complejas, la combinación de colores invertidos o los cálculos en otros espacios de color. En este artículo vamos a aprender a hacer algunas de estas operaciones con CSS, y a estudiar algunas aplicaciones interesantes. [Más]

Qué es SVG y cómo usarlo para cambiar el color a bullets de listas

Puede que ahora parezca una perogrullada, pero una de las características que contribuyó a la popularización de la web y de HTML (junto a los enlaces de hipertexto) fue la posibilidad de insertar imágenes. Al principio eran simplemente imágenes de mapas de bits, donde reinaban los gif y los jpg por su relación calidad/peso, en función de las características de la imagen. Pero pronto apareció la necesidad de buscar un formato estándar vectorial y así nació SVG (Scalable Vector Graphics) entre 1998 y 2001. [Más]

Angular 6: un repaso a las novedades

El pasado 3 de Mayo de 2018 se publicó oficialmente la versión 6 de Angular bajo las palabras: "The first release of Angular that unifies the Framework, Material and CLI". Esta frase resume perfectamente la finalidad que persigue esta release, en la cual se hizo un gran esfuerzo por parte del equipo de Angular por aunar el framework, la biblioteca de estilos y la línea de comandos en una misma versión, la 6.0.0. Vamos a ver cuáles son las principales novedades. [Más]

Cómo centrar y distribuir elementos HTML con el módulo flexbox de CSS

Hace tiempo hablamos en este blog sobre cómo centrar elementos en una página web mediante CSS, y para ello era necesario considerar múltiples posibilidades, involucrando propiedades sobre posicionamiento, márgenes y alturas. Además, los métodos eran muy distintos según buscásemos centrado horizontal o vertical. En esta guía aprenderemos cómo dos propiedades pertenecientes al módulo Flexible Box Layout (también conocido como flexbox) de CSS nos pueden ayudar a centrar elementos, e ir un poco más allá. Este módulo ya está soportado en cualquier navegador moderno, pero no es adecuado si queremos que nuestra página se visualice correctamente en versiones antiguas de algunos navegadores, como Internet Explorer. ¡Vamos allá! [Más]

Formatos de vídeo para Internet: MP4 y sus variantes, MP4/H.264 y MP4/MPEG-4 - Diferencias y similitudes

Los vídeos que reproducimos en Internet o bien de manera local en el ordenador o en cualquier otro dispositivo, pueden estar codificados de diferentes maneras. Cada método de codificarlos implica unas ventajas e inconvenientes, y existen formatos mejores que otros dependiendo del uso que queramos darle al vídeo. Así, tenemos formatos como AVI, MP4, MKV, 3GP, WebM de Google, etc... El formato más popular en la actualidad es el MP4, archivos con la extensión .mp4. Pero: ¿Son iguales todos los archivos .mp4?, si no son iguales, ¿qué tipos hay? ¿cuáles son las diferencias, ventajas e inconvenientes de cada uno?¿Valen todos para la Web? ¡Vamos a verlo! [Más]

TRUCO: Actualizar a la última las versiones de dependencias npm en package.json

Los paquetes npm que vamos añadiendo a nuestros desarrollos se almacenan en el archivo package.json, ubicado en la carpeta raíz de nuestro proyecto. Por regla general se añaden con una configuración conservadora que permite la actualización de versiones menores, pero impide la de versiones mayores que rompan la compatibilidad. Si queremos forzar la actualización de todos los paquetes a lo último y que eso se vea reflejado en el archivo package.json, podemos hacerlo a mano pero en proyectos grandes puede ser muy laborioso. Vamos a ver una manera de conseguirlo de forma automatizada. [Más]

HTML5: ¿Cuál es la forma correcta de poner negritas? ¿strong, b o "font-weight"?

Esto puede parecer una pregunta básica y tonta, sin apenas importancia. Pero en realidad tiene más fondo del que pueda parecer... Tradicionalmente en HTML, si queríamos poner un texto resaltado y que se viese en negrita, la forma de hacerlo era simplemente usando la etiqueta b. La cosa era muy sencilla. Sin embargo, en HTML5 tenemos muchas más opciones que parecen equivalentes. Podemos utilizar también la etiqueta strong, la etiqueta em o la propiedad CSS font-weight aplicada a una etiqueta que envuelva el texto que queremos en negrita. Realmente ¿no es todo lo mismo? ¿Existe una forma más correcta de hacerlo que otras? Pues lo cierto es que no es todo igual. Cada una tiene sus aplicaciones y sus implicaciones, por lo que no es correcto usarlas indistintamente. Vamos a verlo... [Más]

Cómo sustituir una imagen en HTML usando solo CSS

Esta técnica es de esas cosas que normalmente aprendes pegándote día a d��a con CSS. Fontanería pura y dura, pero que, a pesar de su extrema sencillez, tiene su encanto para enseñarte el poder del aparentemente inofensivo CSS. Es de esas ñapas (dicho con cariño) para usar CSS como una navaja suiza y que te pueden resolver la papeleta cuando ya lo das todo por perdido. [Más]

Gestión de errores con Node.js - Cambios en la versión 9 y cómo proceder

En la versión 9 de Node.js llegaron cambios a la forma de lanzar y gestionar errores en tiempo ejecución. Estos cambios empezaron a aparecer ya en versiones tardías de Node.js 8 y se continuaron y terminaron en las versiones 9.x. Hasta su versión 8, la mayoría de los errores lanzados por Node.js consistían tan solo en un mensaje de texto asociado a los mismos. Si querías que tu código se comportarse de una forma determinada en función de cuál fuese el error, lo que tenías que hacer era comparar la cadena de texto del mensaje de error con algún valor conocido. Esto presentaba multitud de problemas, tanto para los desarrolladores como para el equipo detrás de Node.js. Ahora la cosa ha cambiado y en este artículo te explicamos cómo se gestionan y cómo puedes migrar tu código antiguo. [Más]

15 bibliotecas JavaScript que no deberías perder de vista

Aunque programar todo por uno mismo provoca una gran satisfacción, es conveniente superar el síndrome del "No inventado aquí" y sacar partido al código que tan generosamente han donado al bien común otros desarrolladores. En el mundo del desarrollo web Front-End existen infinidad de bibliotecas (mal llamadas "librerías") que nos permiten dotar de potentes funcionalidades a nuestras aplicaciones, sin apenas esfuerzo, mejorando el diseño, la funcionalidad o la experiencia de usuario. Existen miles de bibliotecas JavaScript. Hay vida más allá de jQuery y React, bibliotecas con las que ya estarás familiarizado y que están muy contrastadas. Aquí nos vamos a centrar en otras opciones y las vamos a agrupar por usos...

Evidentemente en este artículo no vamos a revisarlas todas, e incluso seremos injustos con alguna que debería figurar en esta lista. Hemos descartado muchas porque es casi materialmente imposible comentarlas todas. [Más]