El documento habla sobre el diseño web adaptable (Responsive Web Design, RWD). Explica que RWD permite que un sitio web se adapte a diferentes tamaños de pantalla y dispositivos mediante una combinación de CSS flexible, grids fluidos y media queries. También describe cómo GeneXus permite crear aplicaciones web adaptables a través de objetos definidos automáticamente, paneles web adaptables y reglas CSS condicionales en el editor de temas.

1. #GX24
La importancia de ser
Responsive
Ivette González García
@gx_ivette
igonzalez@genexus.com

2. #GXMX
Agenda
¿Qué es Responsive Web Design?
Características y beneficios
¿Como crear una aplicación Responsive con GX?

3. ¿Qué es RWD?

4. #GXMX
¿Qué es Responsive Web Design?

5. #GXMX

6. #GXMX

7. Características y beneficios

8. #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 pantalla
más pequeña

9. Beneficios de RWD
Un solo código (HTML & CSS)
Una misma URL
Bajo costo en el desarrollo
Recomendado por Google

10. #GXMX

11. Tecnología en la que se basa RWD
Grids fluídos
Media Queries
Medios flexibles
Frontend framework

12. ¿Cómo desarrollar una
aplicación Responsive con
GeneXus?

13. #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

14. #GXMX
• Transacciones Web
• Prompts Web
• Objetos generados por el pattern Work With
Objetos definidos automáticamente por GeneXus

15. #GXMX
Propiedades de la versión de la KBs:

16. #GXMX

17. #GXMX
Abstract Layout
Como crear un Web panel responsive

18. #GXMX

19. #GXMX
Propiedades de la versión de la KB:

20. #GXMX
33%50%
Extra-Small
Small
Medium y Large

21. #GXMX
Table 1 Table 2

22. #GXMX
Table1
Extra-Small (Phone < 768px)
Table2

23. #GXMX
Small (Tablets >= 768px)
Table1 Table 2

24. #GXMX
Extra-Small
Small
Medium &Large
33%50%

25. #GXMX

26. #GXMX
Theme editor: Reglas CSS condicionales

27. #GXMX

28. #GXMX

29. NUEVAS FUNCIONALIDADES
• Soporte para imágenes de múltiples densidades
• Nuevos controles para RWD :
Upload User Control:
Navigation bar:

30. Live Editing
• Prototipación ágil
• El browser como preview

31. Conferencias relacionadas
Live Editing in Action – 15:30 hrs., Regency Ball Room C

32. #GX24
¡MUCHAS GRACIAS!
Ivette González García – igonzalez@genexus.com
@gx_ivette