41. rwd el ingrediente que no puede faltar en tus recetas
DESCRIPTION
RWD el ingrediente que no puede faltar en tus recetasTRANSCRIPT
![Page 1: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/1.jpg)
#GX24
RWD El ingrediente que no puede faltar en tus recetas
Ma. Inés Carriquiry (GeneXus) & Mauricio Morinelli (Brokerware) #GX3506
![Page 2: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/2.jpg)
#GX24
Responsive Web Design Diseño Web adaptable
1. Concepto y bases
2. Primeros pasos
3. Caso de éxito: Agente de valores en Zonamérica
4. Diseñador + desarrollador
![Page 3: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/3.jpg)
1- ¿Qué es RWD?
![Page 4: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/4.jpg)
Same web application
![Page 5: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/5.jpg)
Same web application
![Page 6: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/6.jpg)
Responsive vs non-responsive
![Page 7: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/7.jpg)
#GX24
Principios
Ubicuidad/Omnipresencia: •Definir las acciones principales y asegurarnos de que estén disponibles en todos los tamaños.
•Uniformidad de contenidos entre los dispositivos, no “restringir” contenidos ni tomar la versión móvil como una versión “lite”. •Entender la diferencia entre una aplicación “soportada” y una “optimizada”
•Lograr una applicación usable, accesible e inclusiva
w UBIQUITY
![Page 8: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/8.jpg)
#GX24
Principios
Flexibilidad: •Crear interfaces que se vean bien en todos los dispositivos, en todas las resoluciones
•La estructura está determinada por el contenido
w UBIQUITY FLEXIBILITY
5
![Page 9: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/9.jpg)
#GX24
Principios
Performance: •¿Cuánto tiempo tarda en cargar la aplicación?
•Optimizar imágenes y códigos. Muchas veces los teléfonos tienen pobre conexión de datos.
w UBIQUITY FLEXIBILITY PERFORMANCE
5 {
![Page 10: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/10.jpg)
#GX24
Principios
“Enhancement – mobile first” •Poner el foco en el objetivo principal de la aplicación y las acciones.
•Pensar “mobile-first” para diseñar una aplicación con una buena interfaz, que sea una gran experiencia para los usuarios y sea capaz de permanecer en el futuro.
w UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT
5 { b PERFORMANCE
{
![Page 11: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/11.jpg)
#GX24
Principios
“Future-friendly” •Enfocarse en lo que realmente le importa a los usuarios y a mi negocio.
•Colocar sólo contenido importante.
•Una vez que el contenido está definido, armar una buena estructura que funcione en cualquier momento y en cualquier lugar.
w UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT
FUTURE FRIENDLY
5 { b l PERFORMANCE
{
![Page 12: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/12.jpg)
2- PENSANDO RESPONSIVE
![Page 13: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/13.jpg)
#GX24
4 tamaños
Extra-small hasta 768px
Small hasta 992px
Medium hasta 1200px
Large +1200px
![Page 14: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/14.jpg)
#GX24
Grid
Usamos el sistema de 12 columnas desde el comienzo, tanto en el diseño como en el armado de la aplicación.
12 COLUMNAS
100% ANCHO
![Page 15: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/15.jpg)
#GX24
8,33% CADA COLUMNA
![Page 16: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/16.jpg)
#GX24
Para el diseño de la app nos basamos en el mismo sistema de
12 columnas. Por defecto tienen
15px de padding.
![Page 17: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/17.jpg)
#GX24
1/3
1/3
1/4
1/4
1/1
1/1
1/1
1/1
1/6
![Page 18: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/18.jpg)
#GX24
Un diseño para cada tamaño
![Page 19: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/19.jpg)
3- CASO: AGENTE DE VALORES EN ZONAMÉRICA
![Page 20: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/20.jpg)
#GX24
![Page 21: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/21.jpg)
#GX24
¿Por qué es importante el Diseño Web Responsive?
![Page 22: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/22.jpg)
#GX24
Incremento de dispositivos móviles.
![Page 23: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/23.jpg)
#GX24
Incremento de dispositivos móviles.
Tiempo y costo.
![Page 24: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/24.jpg)
#GX24
Incremento de dispositivos móviles.
Tiempo y costo.
Recomendado por Google.
![Page 25: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/25.jpg)
#GX24
Incremento de dispositivos móviles.
Tiempo y costo.
Recomendado por Google.
Experiencia de usuario y apuesta al futuro.
![Page 26: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/26.jpg)
#GX24
Construyendo el sitio
![Page 27: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/27.jpg)
#GX24
Cómo crear un sitio web responsive con GeneXus Wiki.genexus.com
![Page 28: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/28.jpg)
#GX24
Hello world!
Comportamiento Redimensionando para pantallas mas pequeñas tendremos una disposición en filas. 1 encima de 2.
Primeros pasos Un ejemplo sencillo
de un web panel con dos columnas.
![Page 29: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/29.jpg)
#GX24
1
2
Abstract Editor
Responsive Tables
Responsive Sizes
![Page 30: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/30.jpg)
#GX24
![Page 31: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/31.jpg)
#GX24
![Page 32: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/32.jpg)
#GX24
1 3
4
2
![Page 33: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/33.jpg)
#GX24
![Page 34: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/34.jpg)
#GX24
![Page 35: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/35.jpg)
#GX24
![Page 36: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/36.jpg)
#GX24
![Page 37: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/37.jpg)
#GX24
Navegadores mas populares
Emulado en +40 dispositivos
![Page 38: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/38.jpg)
#GX24
Bootstrap
HTML5
CSS3
Media Queries
Tamaños de pantalla
![Page 39: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/39.jpg)
#GX24
De GeneXus X Evolution 1 a GeneXus X Evolution 3.
Interacción Diseñador-Desarrollador.
![Page 40: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/40.jpg)
#GX24
1 3
4
2
![Page 41: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/41.jpg)
#GX24
De GeneXus X Evolution 1 a GeneXus X Evolution 3.
Interacción Diseñador-Desarrollador.
![Page 42: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/42.jpg)
4- LA RECETA: DISEÑO + DESARROLLO
![Page 43: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/43.jpg)
#GX24
( DESARROLLO
E DISEÑO
OBJETIVO
USUARIOS
CONTENIDOS
1- Definir el proyecto
ALCANCE
RECURSOS
PLAZOS
t CLIENTE
+ +
![Page 44: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/44.jpg)
#GX24
( DESARROLLO
E DISEÑO
2- Definir pantallas, acciones y navegación
+
![Page 45: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/45.jpg)
#GX24
E DISEÑO
3- sketch wireframe – 4 tamaños
![Page 46: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/46.jpg)
#GX24
E DISEÑO
Entregar módulos para el armado ( DESARROLLO
Extra-small hasta 768px
Small hasta 992px
Medium hasta 1200px
![Page 47: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/47.jpg)
#GX24
4- Mockup 4 tamaños E DISEÑO
![Page 48: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/48.jpg)
#GX24
5- Diseño
Extra-small hasta 768px
Small hasta 992px
Medium hasta 1200px
Large +1200px
E DISEÑO
![Page 49: 41. RWD el ingrediente que no puede faltar en tus recetas](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55832658d8b42ae55d8b5349/html5/thumbnails/49.jpg)
#GX24
5- ¿Qué entrega el diseñador? E DISEÑO
( DESARROLLO
ESTRUCTURA RWD DISEÑO TERMINADO IMÁGENES PROPIEDADES Colores, tipografías,
tamaños, alturas, etc.
+ + +