En esta conferencia veremos cómo desarrollar aplicaciones web adaptables a cualquier dispositivo usando GeneXus. Daremos un paseo por las páginas de una aplicación web hecha con GeneXus, y veremos cómo lograr aplicaciones ricas en experiencia de usuario, adaptables, minimizando el esfuerzo de desarrollo y posterior mantenimiento.

1. 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. ¡MUCHAS GRACIAS!
Ing. Sabrina Juárez
sjuarez@genexus.com