Presentación: Responsive Design

RESPONSIVE DESIGN

Temas Selectos de Gestión de la Formación y Diseño Instruccional Patricia Montiel Bonilla ID: 131826

puedes acceder al contenido desde el índice o pasar a la siguiente página

Responsive design, Diseño responsivo

índice

Introducción

¿Por qué elegir Responsive Design?

Para recordar

¿Qué es el RESPONSIVE DESIGN?

Y, ¿Cómo funciona?

Una idea importante

Referencias

Responsive design vs Adaptive design

INTRODUCCIÓN

En tu smartphone no puedes ver todo el contenido de la página, hay elementos no accesibles y tu navegación requiere más tiempo del necesario. Se requiere una navegación fluida y que el contenido se adapte perfectamente a la resolución de la pantalla desde la de una PC hasta la de un smartphone

¡No puedo ver la pantalla completa desde mi celular!!!

La respuesta es el RESPONSIVE DESIGN.

Es una metodología, una estrategia, una técnica cuyo objetivo es OPTIMIZAR LA EXPERIENCIA DEL USUARIO (UX) en una página web

¿Qué es Responsive Design?

+ info

El diseño responsivo intenta cumplir con las necesidades del usuario en cuanto al tamaño, orientación, esquemas y plataformas para lograr una experiencia amigable intuitiva y fluida.

y, ¿cómo funciona?

Contenidos: información a compartir

Una página web es un documento de texto

Presentación, forma, estilos de color , tipografía

HTML habilita a los buscadores para entender e interpretar los contenidos

CSS3 TIENE QUE VER CON LA PRESENTACIÓN, PERMITE EL AJUSTE A CADA DISPOSITIVO.

HTML5 COMPARTE CONTENIDOS Y AYUDA A LOS BUSCADORES A ENTENDER E INTERPRETAR EL CONTENIDO DE LA PÁGINA

Resultado en diferentes dispositivos

MEDIA QUERIES

• El

RESPONSIVE DESIGN vs ADAPTIVE DESIGN

OBSERVA las imágenes , busca los elementos interactivos para más información

Adaptive design

responsive design

¿Por qué elegir Responsive design? - Para optimizar la experiencia del usuario (UX) - Para reducir los costos de desarrollo. Los desarrolladores utilizan el mismo código HTML5 gracias a las CSS3 media queries

Responsive web design en pocas palabras Video (inglés) >>>

'La suma de HTML5 con CSS3 hace una página web flexible y adaptable a cualquier pantalla

'Responsive design permite codificar solo una vez haciendo tu sitio web genial en cualquier dispositivo

Para Recordar

Glosario

Una imagen dice ...

'HTML5, CSS3 con media queries y layout con imágenes flexibles

Media queries

Ejemplo de Responsive web design

“Design is not just what it looks like and feels like. Design is how it works.” Steve Jobs.

"Diseño no es como se ve y como se siente. Diseño es como funciona."

Genially

Referencias

ANTOLOGÍA

otras fuentes

HTML

Hyper Text Markup Language

Es la estructura de código básica para crear un sitio web HTML habilita al buscador ( por ejemplo Chrome, Firefox ) para entender e interpretar el contenido de la página web HTML no es capaz de transformar lo lógico en funcional HTML ES UN SISTEMA CODIFICADOR DE TEXTO QUE INDICA LA ESTRUCTURA Y FORMATO DE UN DOCUMENTO

https://leftronic.com/blog/is-html-a-programming-language

Adaptive design

Características

• El adaptive design expone sólo los elementos considerados esenciales para cada formato de pantalla.
• Se crea un layout diferente para cada pantalla.
• Carga más rápidamente los cambios
• Buena opción para rediseñar o mejorar un sitio web.

Responsive vs adaptive design

Media queries

• Media queries son reglas que indican cuando se deben aplicar propiedades CSS en función del tamaño de la pantalla del dispositivo.

Responsive design-media queries

La RWD o Responsive Web Design es una ESTRATEGIA de desarrollo web que determina cambios dinámicos en la LO QUE SE VE del sitio web, sin importar el tamaño o la orientación del dispositivo móvil en el que se visualice.

otras fuentes

• s/a 22 de febrero de 2024. Créez votre site web avec HTML5 et CSS3 (Utilisez le responsive design avec les Media Queries. OPENCLASSROOMShttps://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061510-utilisez-le-responsive-design-avec-les-media-queries

• Coursera Staff 4 de enero de 2024 What is responsive web design And How to Get Started?coursera https://www.coursera.org/articles/responsive-web-design#

• S/a Abril de 2023 Qu’est-ce que le Responsive Design?G COMME UNE IDÉE…https://www.gcommeuneidee.com/qu-est-ce-que-le-responsive-design/
• Darina L.5 de Julio de 2022. Is HTML a Programming Language? LEFTRONIC https://leftronic.com/blog/is-html-a-programming-language
• Silk alms A. 23 de abril de 2024. 20 Best Websites With Responsive Design 2024. Colorlib https://colorlib.com/wp/responsive-web-design/

De Antología del curso

Temas Selectos de Gestión de la Formación y Diseño instruccional

,Quesada, S.21 de noviembre de 2013 Qué es el Responsive Web Design. Maestros del Web https://www.maestrosdelweb.com/que-es-responsive-web-design/ · Quesada, S.13 de diciembre de 2013. Diferencias entre el diseño web adaptativo y responsivo. PureMarketing https://www.puromarketing.com/21/18837/entre-diseno-adaptativo-responsive.html · Rubio M. 1º de septiembre de 2013. ¿Qué es Diseño Adaptativo. Joomla! Community Magazine https://magazine.joomla.org/es/home-es/september-2013/que-es-diseno-adaptativo · s/a s/f ¿Qué es el diseño responsive? Diccionario de marketing digital. 40 de fiebre https://www.40defiebre.com/que-es/diseno-responsive

CSS Cascading Style sheets Hojas de estilo en cascada

Es un lenguaje informático que organiza el contenido de una página web , marca la separación entre fuentes, colores y layouts ¿Por qué en cascada ? Porque se despliegan hacia abajo

• Responsive design: Técnica para que la visualización de una página web siempre sea correcta desde cualquier dispositivo.
• Adaptive design o Diseño Web Adaptado es una técnica que utiliza tamaños de pantalla preestablecidos: 320px, 480px, 760px, 960px, 1200px, 1600px y se crea un diseño a medida para cada uno de esos tamaños.
• HTML5 (Hypertext Markup Language 5) lenguaje usado para estructurar y presentar documentos de hipertexto en la web.
• CSS es un código que habilita la visualización de una página web, la versión 3 es la más reciente.
• Media queries son reglas que permiten que tu sitio web o tus aplicaciones cambien de acuerdo a las características de un dispositivo.your website or apps to change according to device characteristics
• Layout flexible: son un standard de disposición de elementos en un sitio que permite que el diseño se distribuyan de acuerdo al tamaño de la pantalla.
• UX experiencia del usuario

CONCEPTOS

• El Responsive design hace que todos los elementos de una página web se vean claramente independientemente del dispositivo en el que se vean.
• Utiliza una sola base de código para todos los tipos de terminales móviles gracias a los CSS3 MEDIA QUERIES
• Reduce los costos pues se actualiza a partir de un código CSS que controla la disposición de los elementos de manera diferente en función del tamaño de la pantalla
• Los contenidos son más virales
• Impide la duplicación de contenidos