Unidad 3

Diseño web adaptativo.

¿DISEÑO ADAPTATIVO O DISEÑO RESPONSIVO?

El diseño responsivo y el diseño adaptativo son dos enfoques en el diseño de interfaces que no deben confundirse entre si.

El Diseño responsivo.

Es una técnica de diseño que permite que un sitio web se adapte y reorganice automáticamente para encajar en diferentes tamaños de pantalla, desde ordenadores hasta móviles. Un solo diseño que se ajusta a todos los dispositivos.

El objetivo es crear una experiencia de usuario fluida y coherente sin importar el dispositivo que se utilice.

Un Ejemplo es la pagina de la UJAT, la primera imagen es la resolución en ordenadores mientras que por medio de las herramientas del navegador, podemos probar que se adapta a los dispositivos móviles.

El diseño adaptativo.

Por otro lado, el diseño adaptativo se centra en diseñar múltiples versiones de un sitio web, cada una específicamente optimizada para diferentes tamaños de pantalla. A medida que el usuario accede al sitio desde un dispositivo específico, se le muestra la versión más adecuada. 

Esto se logra a través del uso de bases de datos y scripts que detectan las características del dispositivo y cargan la versión correspondiente.

Esta rutina tiende a ser más laboriosa en términos de desarrollo y mantenimiento, ya que implica la creación de múltiples diseños. Sin embargo, ofrece un mayor control sobre la experiencia del usuario en dispositivos específicos.

Las principales características: Diseño responsivo.

Aunque ambos tienen el mismo objetivo de mejorar la experiencia del usuario en múltiples dispositivos, utilizan métodos diferentes para lograrlo. 

1. El diseño responsivo utiliza unidades de medida flexibles como porcentajes y unidades relativas (em, rem) en lugar de unidades fijas (px). Esto permite que los elementos de la interfaz se ajusten automáticamente al tamaño de la pantalla.

2. Los elementos de la interfaz se reorganizan y redimensionan automáticamente para adaptarse al espacio disponible.

3. Las imágenes se escalan automáticamente para adaptarse al tamaño de la pantalla.

Diseño Adaptativo

El diseño adaptativo crea varios diseños fijos para diferentes resoluciones de pantalla. Cada diseño se activa en función del tamaño de la pantalla del dispositivo.

• Utiliza scripts para detectar el dispositivo y cargar el diseño correspondiente.

• Permite una optimización más precisa y específica para cada tipo de dispositivo, ya que cada diseño está hecho a medida.

• Carga solo los recursos necesarios para el diseño específico del dispositivo, lo que puede mejorar el rendimiento.

Comparación de ventajas y desventajas.

• Flexibilidad: El diseño responsivo es más flexible y puede adaptarse a una amplia gama de tamaños de pantalla con menos esfuerzo de mantenimiento.

• Precisión: El diseño adaptativo permite una optimización más precisa para cada dispositivo, pero requiere más trabajo de diseño y desarrollo.

• Mantenimiento: El diseño responsivo tiende a ser más fácil de mantener, ya que utiliza un solo conjunto de estilos que se ajustan automáticamente. El diseño adaptativo puede ser más complejo de mantener debido a la necesidad de múltiples diseños.

Flujo de desarrollo para el diseño Responsivo/Adaptativo.

Dado que ambos diseños tienen propósitos específicos y factores para usar estos diseños, la realidad es que el flujo de trabajo no se ve afectado en su desarrollo. Tal como lo mencionamos anteriormente, las fases del diseño Responsivo/Adaptativo son las siguientes.

1. Investigación y Planificación.

2. Wireframes y Prototipos.

3. Diseño Visual (Mockups)

4. Desarrollo Frontend (HTML, CSS y JavaScript)

5. Pruebas y Ajustes.

6. Lanzamiento y Mantenimiento.

Herramientas del diseño Responsivo/Adaptativo.

El diseño requiere una variedad de herramientas para asegurar que las interfaces de usuario se adapten correctamente a diferentes tamaños de pantalla y dispositivos. Estas son las herramientas recurrentes de estos flujos de trabajo.

Frameworks CSS.

Los frameworks CSS son herramientas que facilitan el desarrollo de sitios web y aplicaciones al proporcionar una estructura básica y componentes predefinidos. 

Frameworks como Bootstrap, Foundation, Tailwind y mas; proporcionan una base sólida para el desarrollo de sitios web y aplicaciones, facilitando la creación de diseños responsivos y modernos 

En la Unidad 2 vimos una demostración de lo que puede hacer Bootstrap, con su sistema de rejilla seria una buena base para entender el diseño responsivo.

Herramientas de Prototipado:

Son esenciales para el diseño de interfaces de usuario, ya que permiten a los diseñadores crear y probar versiones interactivas de sus diseños antes de la implementación final. Algunas de ellas son:

Figma: Permite crear prototipos interactivos y responsivos. es una herramienta de diseño colaborativa basada en la web que permite a los equipos trabajar juntos en tiempo real.

Sketch: Popular entre los diseñadores de interfaces, ofrece herramientas para crear y probar diseños responsivos. Tiene una amplia gama de plugins que extienden su funcionalidad y ofrece capacidades de prototipado básico para crear flujos de usuario interactivos.

Sketch es un software popular para MacOS.

Adobe XD: Una herramienta de diseño y prototipado que facilita la creación de interfaces de usuario responsivas. Combina herramientas de diseño y prototipado en una sola aplicación. Facilita la creación de prototipos interactivos con animaciones avanzadas y tambien permite compartir prototipos y recibir comentarios en tiempo real.

CONCEPTOS DE MEDIA QUERIES

Las media queries son una parte fundamental del diseño web responsive. Estas son reglas en CSS que permiten aplicar estilos específicos a una página web según las características del dispositivo, como el ancho de la pantalla. 

Por ejemplo, se pueden definir estilos diferentes para pantallas grandes y pequeñas, lo que garantiza que el diseño se adapte de manera efectiva a cada contexto.

Resultados de Media Queries CSS. Fuente: josetxu.com

Ventajas de Usar Media Queries.

• Adaptabilidad: Permiten que los sitios web se adapten a diferentes tamaños de pantalla y dispositivos, mejorando la experiencia del usuario.

• Mantenimiento: Facilitan el mantenimiento del código CSS al permitir definir estilos específicos para diferentes condiciones.

• Compatibilidad: Aseguran que los estilos se apliquen de manera consistente en todos los navegadores modernos.

CONCLUYENDO.

El diseño responsivo es uno de los criterios fundamentales en el Desarrollo Web, Ambos enfoques tienen sus ventajas y desventajas, y la elección entre uno u otro depende de las necesidades específicas del proyecto y del público objetivo.

De esta manera concluimos la unidad 3 de y con estos conceptos importantes bajo el dominio de HTML, CSS y JavaScript damos por concluida la materia de Diseño de Interfaces. Felicidades.