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…
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…
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…
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> …
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…
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…
No le temas a la consola, acércate a ella, aprende a utilizarla y verás cómo tu eficiencia a la hora de trabajar en tus proyectos mejora considerablemente. A través de la consola puedes manipular tu equipo de cómputo sin la necesidad de la interfaz gráfica, todo, a través de comandos especiales. En este artículo aprenderás…
En CSS es posible generar variables que nos permitan utilizar esos valores para diferentes usos en nuestros documentos de estilos. Si guardamos un valor, estamos evitando repetir código, lo que trae beneficios a la hora de mantener el código y el rendimiento de carga. Sintaxis para generar variables en CSS :root { –primary-color: black;} Luego,…
Por defecto el navegador muestra las cajas con “display: block;” En ese caso, todas las cajas ocupan el 100 % del ancho disponible sin importar si el contenido tiene o no espacio. <!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>Display block, inline, inline-block</title> <style> .block-element { background-color: green; margin: 10px;…
Es la manera en la cual podemos posicionar las cajas. En el navegador la posición por defecto es “static”, quedan donde tú las colocas. Por eso, todos los bloques se ubican uno debajo de otro. Tomado de Platzi.com Sin embargo, tenemos la flexibilidad de utilizar otros tipos de posicionamiento como: Absolute. Hace que los contenedores…