Estaremos viendo las prestaciones del GAM, su uso y todo el abanico de soluciones de seguridad que éste abre ante nosotros. En particular, veremos cómo manejamos el problema de la variedad de posibilidades de autenticación (muchas dadas por requerimientos de la empresa) y la integración de aplicaciones internas a la empresa en torno a lo que a seguridad se refiere.

1. #GX24
Responsive Web Design
Sin fronteras para una excelente
experiencia de usuario
Ing. Sabrina Juárez
sjuarez@genexus.com

2. #GX25

3. #GX25
TEMAS
¿Qué es Responsive Web Design?
¿Cómo desarrollar una aplicación
Responsive con GeneXus?

4. #GX25
1. Mismo diseño para todas las pantallas
• UX pobre
• Texto demasiado pequeño
• Enlaces demasiado juntos
• Contenido más ancho que la pantalla
• Mobile Friendly
ALTERNATIVAS

5. #GX25
2. Desarrollar una aplicación diferente para cada plataforma
• Alto costo de desarrollo
• Se diluye el SEO
ALTERNATIVAS

6. #GX25
3. Permitir que una página web (la misma página web), en
forma dinámica, se adapte a la pantalla: Responsive Web
Design
• Un solo código (HTML & CSS)
• La misma URL (favorece el SEO)
• Recomendado por Google
UNA SOLUCIÓN ÓPTIMA..

7. #GX25

9. Tableta Celular

10. #GX25
• Variar la estética de la pantalla
• Variar la disposición de los controles
• Seleccionar el contenido esencial en la pantalla más pequeña
CARACTERÍSTICAS DE UN DISEÑO
RESPONSIVE

11. #GX25
• Fluid grids
• Flexible images
• Media queries
TECNOLOGÍAS EN LAS QUE SE BASA
RWD
• Frontend framework

12. #GX25
TEMAS
¿Qué es Responsive Web Design?
¿Cómo desarrollar una aplicación
Responsive con GeneXus?

13. #GX25
TEMAS
Objetos definidos automáticamente por
GeneXus
Cómo definir nuestros layouts
Responsive
¿Cómo desarrollar una aplicación
Responsive con GeneXus?

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

15. #GX25
Propiedades de la versión de la KB:
Objetos definidos automáticamente por GeneXus

16. #GX25

17. #GX25
Cómo definir nuestros layouts Responsive
Objetos definidos automáticamente por
GeneXus

18. #GX25
ABSTRACT LAYOUT
Cómo definir nuestros
layouts Responsive

19. #GX25
Cómo definir nuestros layouts Responsive
4
tamaños
de
pantalla

20. #GX25
Cómo definir nuestros layouts Responsive
Propiedades de la versión de la KB:

21. #GX25
Extra-Small
Small
Medium &Large
33%50%

22. #GX25
Table 2
Table 1

23. #GX25
Table1
Table2
Extra-Small (Phone < 768px)

24. #GX25
Table1
Table2
Small (Tablets >= 768px)

25. #GX25
Extra-Small
Small
Medium &Large
33%50%

26. #GX25

27. #GX25
THEME EDITOR: REGLAS CSS CONDICIONALES
Cómo definir nuestros layouts Responsive

28. #GX25
Cómo definir nuestros layouts Responsive

29. #GX25

30. #GX25
• Abstract Layout = Responsive Table + Responsive Sizes
• Theme Editor : Reglas CSS condicionales
Cómo definir nuestros layouts Responsive

31. What’s next?

32. #GX25
SOPORTE PARA IMÁGENES CON MÚLTIPLES
DENSIDADES

33. Nuevos controles web para RWD:
Upload User Control

34. Nuevos controles web para RWD:
Navigation BAR

35. #GX25
• Prototipación ágil
• El browser como preview
LIVE EDITING

36. #GX25

37. #GX25
CONFERENCIAS RELACIONADAS
• Responsive Web Design - Adapta tu negocio a cada dispositivo. Lunes
12:15 - 12:45, Ballroom A
• Web Responsive vs App Nativa: la batalla final.
Lunes 18:15 – 18:45, Conference Room
• Generadores Web en Salto.
Miércoles 10:30 – 11:00, Ballroom

38. #GX24
¡MUCHAS GRACIAS!
Ing. Sabrina Juárez
sjuarez@genexus.com