La importancia de ser responsive
Transcript of La importancia de ser responsive
![Page 2: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/2.jpg)
#GXMX
Agenda
¿Qué es Responsive Web Design?
Características y beneficios
¿Como crear una aplicación Responsive con GX?
![Page 3: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/3.jpg)
¿Qué es RWD?
![Page 4: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/4.jpg)
#GXMX
¿Qué es Responsive Web Design?
![Page 5: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/5.jpg)
#GXMX
![Page 6: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/6.jpg)
#GXMX
![Page 7: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/7.jpg)
Características y beneficios
![Page 8: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/8.jpg)
#GXMX
Características de una aplicación Responsive
Variar la disposición de los controles
Variar la estética de la pantalla
Seleccionar el contenido esencial en la pantallamás pequeña
![Page 9: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/9.jpg)
Beneficios de RWD
Un solo código (HTML & CSS)
Una misma URL
Bajo costo en el desarrollo
Recomendado por Google
![Page 10: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/10.jpg)
#GXMX
![Page 11: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/11.jpg)
Tecnología en la que se basa RWD
Grids fluídos
Media Queries
Medios flexibles
Frontend framework
![Page 12: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/12.jpg)
¿Cómo desarrollar una aplicación Responsive con
GeneXus?
![Page 13: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/13.jpg)
#GXMX
Como desarrollar una aplicación RWD con GeneXus
Objetos definidos automáticamente por GeneXus
Como crear un Web panel responsive
Theme editor: Reglas CSS condicionales
![Page 14: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/14.jpg)
#GXMX
• Transacciones Web
• Prompts Web
• Objetos generados por el pattern Work With
Objetos definidos automáticamente por GeneXus
![Page 15: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/15.jpg)
#GXMX
Propiedades de la versión de la KBs:
![Page 16: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/16.jpg)
#GXMX
![Page 17: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/17.jpg)
#GXMX
Abstract Layout
Como crear un Web panel responsive
![Page 18: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/18.jpg)
#GXMX
![Page 19: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/19.jpg)
#GXMX
Propiedades de la versión de la KB:
![Page 20: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/20.jpg)
#GXMX
33%50%
Extra-Small
Small
Medium y Large
![Page 21: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/21.jpg)
#GXMX
Table 1 Table 2
![Page 22: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/22.jpg)
#GXMX
Table1
Extra-Small (Phone < 768px)
Table2
![Page 23: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/23.jpg)
#GXMX
Small (Tablets >= 768px)
Table1 Table 2
![Page 24: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/24.jpg)
#GXMX
Extra-Small
Small
Medium &Large
33%50%
![Page 25: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/25.jpg)
#GXMX
![Page 26: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/26.jpg)
#GXMX
Theme editor: Reglas CSS condicionales
![Page 27: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/27.jpg)
#GXMX
![Page 28: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/28.jpg)
#GXMX
![Page 29: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/29.jpg)
NUEVAS FUNCIONALIDADES
• Soporte para imágenes de múltiples densidades
• Nuevos controles para RWD :
Upload User Control:
Navigation bar:
![Page 30: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/30.jpg)
Live Editing• Prototipación ágil• El browser como preview
![Page 31: La importancia de ser responsive](https://reader034.fdocuments.in/reader034/viewer/2022051706/58f06e291a28abc45e8b4621/html5/thumbnails/31.jpg)
Conferencias relacionadas
Live Editing in Action – 15:30 hrs., Regency Ball Room C