Frontend

Manual instructivo de Webpack

  • 22 marzo, 2022
  • 0 Comments

Webpack es una herramienta Frontend que nos permite empaquetar el código de nuestras aplicaciones, y demás archivos estáticos como: HTML, CSS, javascript y fuentes, y prepararlo para colocarlo en producción. En otras palabras, es un module bundler que nos facilita el desarrollo de aplicaciones, permitiéndonos manipular de forma eficiente nuestro código y demás archivos necesarios […]

CSS Frontend

Uso y manejo de fuentes CSS

  • 20 marzo, 2022
  • 0 Comments

En CSS podemos aplicar prácticamente cualquier tipo de fuente siempre y cuando se cuente con el recurso. Sin embargo, en caso de que esto falle, el CSS le indicará al navegador que cargue una fuente genérica que se toma directamente del listado de fuentes que tiene el sistema operativo. Tomado de Platzi.com Cómo aplicar fuentes […]

Imagen con el logo oficial de CSS en color azul. En el fondo oscuro una ilustración de una mujer trabajando en un computador. CSS Frontend

Orden de declaración y especificidad en CSS

  • 20 marzo, 2022
  • 0 Comments

¿Cómo se controla el orden de la declaración en CSS? Cuando apenas estamos iniciando a trabajar con CSS, es común encontrarnos con que nuestros estilos aplicados no se ven representados en nuestros documentos HTML. Incluso, a veces por aplicar un estilo, rompemos otro y quizá dañamos algunos logros que habíamos ganado. La mayoría de las […]

CSS Frontend

Accesibilidad

  • 20 marzo, 2022
  • 0 Comments

Semántica La semántica sirve para implementar herramientas para brindar la accesibilidad a las personas con ciertas limitaciones físicas y que estas puedan consumir nuestros productos digitales. En HTML, la semántica consiste en utilizar las etiquetas específicas según la utilidad que van a tener en nuestro documento HTML, por ejemplo, si el área del contenido es […]

CSS Frontend

Imágenes responsive con CSS

  • 20 marzo, 2022
  • 0 Comments

Se recomienda utilizar la etiqueta <picture></picture> como contenedor de la imagen. Además se recomienda tener diferentes imágenes con diferentes dimensiones de tamaño para que se carguen en la medida que se observa la página web en dispositivos grandes. Es decir, si se abre en un dispositivo móvil, colocar una imagen con el tamaño y optimizada […]

CSS Frontend

Patrones de maquetación Responsive: Column Drop

  • 20 marzo, 2022
  • 0 Comments

Inicia todo en forma vertical y una vez comienza a crecer el viewport empieza a generar el drop de los contenedores. Es decir, comienza a posicionar los contenedores hacia arriba por orden de importancia que se haya definido. Platzi.com Ejemplo Documento HTML <!DOCTYPE html><html lang=”es”><head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Column […]

Imagen con el logo oficial de CSS en color azul. En el fondo oscuro una ilustración de una mujer trabajando en un computador. CSS Frontend

Patrones de maquetación Responsive: Layout shifter CSS

  • 20 marzo, 2022
  • 0 Comments

Este patrón inicia también vertical, sin embargo, en la medida de que cambia el tamaño de pantalla hacia un ancho más amplio, se comienzan a distribuir unos bloques dentro de otros contenedores padre que se pueden posicionar para brindar un layout diferente. Platzi.com Ejemplo Documento HTML <!DOCTYPE html> <html lang=”es”>     <head>     […]

Imagen con el logo oficial de CSS en color azul. En el fondo oscuro una ilustración de una mujer trabajando en un computador. CSS Frontend

Patrones de maquetación Responsive: mostly fluid

  • 20 marzo, 2022
  • 0 Comments

Existen tres patrones de diseño que son los más populares por la comunidad de desarrolladores frontend: 1 – Mostly Fluid Tomado de platzi.com Esta metodología inicia con columnas verticales que se van ajustando en la medida que se va aumentando el tamaño de pantalla. Dependiendo el tamaño de pantalla, se puede tener en cuenta si […]

CSS Frontend

Responsive design: Media Queries

  • 20 marzo, 2022
  • 0 Comments

Responsive design es un patrón de diseño web estándar en la industria. A través de estas prácticas, lograremos que los productos que estamos desarrollando para la web puedan funcionar en cualquier plataforma. Es decir, pueda ser visualizado en cualquier dispositivo. El objetivo principal de responsive design es que nuestro producto pueda ser perfectamente visualizado desde […]