Modern Presentation

PROFESOR: IRAHAN OTONIEL JOSE GUZMAN

ALUMNA: LISSET GOMEZ SANCHEZ

DESARROLLO WEB AVANZADO

instituto tecnologico superior de misantla

diseño web RESponsivo

Julio 2024

Introduccion

El diseño web responsivo ha revolucionado la forma en que interactuamos con los sitios en línea, adaptándose de manera fluida a diferentes dispositivos y pantallas. En la era digital actual, donde la accesibilidad y la experiencia del usuario son fundamentales, el diseño responsivo emerge como una solución indispensable para garantizar que los sitios web no solo sean visualmente atractivos, sino también funcionales y eficientes en cualquier contexto. Este enfoque innovador no solo mejora la navegación y la usabilidad, sino que también potencia la presencia digital, asegurando que cada visita sea una experiencia óptima e intuitiva. (Desconocido, 2024)

INDICE

Introduccion

1.2.1 Diseño fluido con cuadrículas flexibles o fluid grids.

1.2.2 Viewport

1.2.3 Media Queries.

1.2.4 Imágenes, objetos, videos o mediossimilares flexibles

1.2.5 Fuentes tipográficas con valoresrelativos.

1.2.6 Patrones de diseño web adaptables.

Conclusion

Referencias

Ejemplo, si tenemos una cuadrícula de tres columnas, en un dispositivo más pequeño, estas columnas se ajustarán automáticamente para encajar

Una de las bases del diseño responsivo es el uso de cuadrículas fluidas. En lugar de fijar elementos en píxeles, se utilizan porcentajes y unidades relativas para definir tamaños y posiciones. Esto permite que los elementos se ajusten automáticamente al tamaño de la pantalla del dispositivo.(Desconocido, medium, 2024)

1.2.1 Diseño fluido con cuadrículas flexibles o fluid grids

Un viewport representa la región poligonal (normalmente rectangular) en gráficas de computación que se están visualizando en ese instante. En términos de navegadores web, se refiere a la parte del documento que usted está viendo, la cual es actualmente visible en su ventana (o la pantalla, si el documento está siendo visto en modo pantalla). El contenido fuera del viewport no es visible en la pantalla hasta que se desplaza dentro de él. (Desconocido, developer, 2024)

1.2.2 Viewport

EJEMPLO

Las consultas de medios son la esencia del diseño responsivo. Permiten aplicar estilos específicos según las características del dispositivo, como su ancho, alto y orientación.(Desconocido, medium, 2024) Podemos ajustar el tamaño de fuente, el espaciado y la disposición de los elementos en función del dispositivo del usuario. Esto garantiza una experiencia optimizada sin importar si el usuario está en una pantalla grande o pequeña.

1.2.3 Media Queries

1.2.4 Imágenes, objetos, videos o mediossimilares flexibles

Las imágenes adaptables son solo una parte del diseño web responsivo, cuyo objetivo es adaptar un sitio web para que funcione de forma óptima dentro de diversas limitaciones del entorno Las imágenes adaptables pueden posicionarse en el contenido del sitio web, en la cabecera o en el fondo, es decir, imagen de fondo adaptable, imagen de cabecera adaptable, etc. Como ya hemos comentado, este tipo de imágenes se ajustan bien a diferentes tipos y tamaños de pantalla. (Desconocido, scaleflex., 2024)

La palabra tipografía proviene del griego «typos», que significa molde, y «graphein», que quiere decir escrituraEl arte de la tipografía tiene como objetivo transmitir mensajes escritos que también impliquen un lenguaje visual. Al establecer las características de la letra como la forma, espaciado, color y grosor se busca intensificar el significado o valor del mensaje y evocar sensaciones en el lector. (Desconocido, hubspot, 2024)

1.2.5 Fuentes tipográficas con valores relativos.

Los patrones de diseño web comprenden una serie de guías para el diseño de una página web o una interfaz de usuario, ya sea de un elemento por completo o de uno de sus componentes. A diferencia de una plantilla, que se utiliza como base para crear páginas con un diseño similar pero con diferente contenido, el patrón proporciona una serie de buenas prácticas para el diseño web.(Desconocido, beedigital, 2024)

1.2.6 Patrones de diseño web adaptables.

Conclusion

El diseño web responsivo es una práctica esencial en la creación de sitios modernos, ya que garantiza una experiencia de usuario consistente y de calidad en todos los dispositivos y tamaños de pantalla. Al adaptarse de manera inteligente, no solo mejora la accesibilidad y la usabilidad, sino que también maximiza el alcance y la efectividad de cualquier proyecto digital. En un mundo donde la conectividad móvil es predominante, invertir en diseño web responsivo no solo es una opción estratégica, sino una necesidad para cualquier entidad que busque destacarse en el competitivo entorno digital actual.

REFERENCIAS

Desconocido. (11 de 07 de 2024). beedigital. Obtenido de beedigital: https://www.beedigital.es/posicionamiento-web/patrones-de-diseno-web-que-son-y-como-usarlos/ Desconocido. (10 de 07 de 2024). Blog. Obtenido de Blog: https://blog.hubspot.es/website/diseno-responsive Desconocido. (10 de 07 de 2024). developer. Obtenido de developer: https://developer.mozilla.org/es/docs/Glossary/Viewport Desconocido. (10 de 07 de 2024). hubspot. Obtenido de hubspot: https://blog.hubspot.es/marketing/tipografia-diseno-grafico Desconocido. (10 de 07 de 2024). medium. Obtenido de medium: https://medium.com/@contentcraft_studio/dise%C3%B1o-responsivo-creando-experiencias-flexibles-en-la-web-469ec424b44b Desconocido. (10 de 07 de 2024). scaleflex. Obtenido de scaleflex.: https://blog.scaleflex.com/es/imagenes-adaptables/

Gracias

POR SU ATENCION