Diseño Web Responsivo by Ambar Ugaz https://padlet.com/ambarugaz13/u10a3lk61eqdnim9 en-us 2022-10-10 01:34:01 UTC 2022-10-10 13:09:48 UTC hello@padlet.com https://www.beedigital.es/wp-content/uploads/2020/09/que-es-beneficios-diseno-web-responsive-1.jpg Introducción al diseño web responsivo jl230103 https://padlet.com/ambarugaz13/u10a3lk61eqdnim9/wish/2332906939 ¿En qué consiste el diseño responsive?
Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario.

¿Por qué necesitas tener una web responsive?
  • Porque el mundo es cada vez más móvil.
  • Porque mejora la experiencia de usuario.
  • Porque es imprescindible para tu SEO. 
  • Porque te ayudará a mejorar tu branding.
  • Porque obtendrás más conversiones y leads.
  • Porque estarás preparado para el futuro. 
]]> 2022-10-10 02:06:49 UTC https://padlet.com/ambarugaz13/u10a3lk61eqdnim9/wish/2332906939 Imágenes responsivas jl230103 https://padlet.com/ambarugaz13/u10a3lk61eqdnim9/wish/2332909548 El principal cambio de conceptualización que ha traído el diseño web responsive ha sido sin duda la sustitución del pixel por unidades relativas.

1 – Imagen Responsive Básica
2 -Imágenes responsive en columnas
Imágenes Responsive a 2 columnas
Imágenes Responsive a 3 columnas
3 – Imágenes con Breakpoints
4 – Imagen responsive de ancho completo]]> 2022-10-10 02:10:37 UTC https://padlet.com/ambarugaz13/u10a3lk61eqdnim9/wish/2332909548 Principales resoluciones de pantalla https://padlet.com/ambarugaz13/u10a3lk61eqdnim9/wish/2332992167 El diseño responsive permite que sea cual sea el tamaño en el que se visualiza una página web o su orientación (horizontal o vertical), el contenido se adapte al ancho y alto de la pantalla para ofrecer una sensación agradable a la vista.]]> 2022-10-10 04:20:05 UTC https://padlet.com/ambarugaz13/u10a3lk61eqdnim9/wish/2332992167 Uso del Viewport https://padlet.com/ambarugaz13/u10a3lk61eqdnim9/wish/2332993635 El viewport es una etiqueta meta de HTML5 que indica el tamaño de la ventana o área visible de una pantalla, generalmente, de dispositivos móviles como smartphones o tablets, por lo que juega un rol crucial en la optimización móvil.

Funcionalidad del viewport en HTML y CSS
El viewport puede ser integrado en los archivos HTML de dos maneras: 
1. Directamente en el documento.
2. Referenciado en un archivo CSS.
]]> 2022-10-10 04:22:29 UTC https://padlet.com/ambarugaz13/u10a3lk61eqdnim9/wish/2332993635