Menú de navegaciónMenú
Categorías

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

639 artículos publicados

HTML y CSS: Cómo arreglar ese extraño espacio que aparece a veces debajo de las imágenes

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]

Cómo maquetar HTML con el sistema grid de CSS

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]

HTTPS en todas partes y el fin de los sitios no seguros - Instala un certificado en tu servidor Web

En unos pocos días Google Chrome empezará a marcar como inseguros a todos los sitios web que no se sirvan a través de HTTPS. En este artículo te contamos cuándo ocurrirá esto, por qué, cómo puedes evitarlo y trataremos de desmentir algunos mitos importantes que existen acerca de HTTPS y las conexiones seguras en Internet. [Más]

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]