Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#GX24
La importancia de ser
Responsive
Ivette González García
@gx_ivette
igonzalez@genexus.com
#GXMX
Agenda
¿Qué es Responsive Web Design?
Características y beneficios
¿Como crear una aplicación Responsive con GX?
¿Qué es RWD?
#GXMX
¿Qué es Responsive Web Design?
#GXMX
#GXMX
Características y beneficios
#GXMX
Características de una aplicación Responsive
Variar la disposición de los controles
Variar la estética de la pantall...
Beneficios de RWD
Un solo código (HTML & CSS)
Una misma URL
Bajo costo en el desarrollo
Recomendado por Google
#GXMX
Tecnología en la que se basa RWD
Grids fluídos
Media Queries
Medios flexibles
Frontend framework
¿Cómo desarrollar una
aplicación Responsive con
GeneXus?
#GXMX
Como desarrollar una aplicación RWD
con GeneXus
Objetos definidos automáticamente por GeneXus
Como crear un Web pane...
#GXMX
• Transacciones Web
• Prompts Web
• Objetos generados por el pattern Work With
Objetos definidos automáticamente por...
#GXMX
Propiedades de la versión de la KBs:
#GXMX
#GXMX
Abstract Layout
Como crear un Web panel responsive
#GXMX
#GXMX
Propiedades de la versión de la KB:
#GXMX
33%50%
Extra-Small
Small
Medium y Large
#GXMX
Table 1 Table 2
#GXMX
Table1
Extra-Small (Phone < 768px)
Table2
#GXMX
Small (Tablets >= 768px)
Table1 Table 2
#GXMX
Extra-Small
Small
Medium &Large
33%50%
#GXMX
#GXMX
Theme editor: Reglas CSS condicionales
#GXMX
#GXMX
NUEVAS FUNCIONALIDADES
• Soporte para imágenes de múltiples densidades
• Nuevos controles para RWD :
Upload User Control:
...
Live Editing
• Prototipación ágil
• El browser como preview
Conferencias relacionadas
Live Editing in Action – 15:30 hrs., Regency Ball Room C
#GX24
¡MUCHAS GRACIAS!
Ivette González García – igonzalez@genexus.com
@gx_ivette
Upcoming SlideShare
Loading in …5
×

La importancia de ser responsive

247 views

Published on

En la actualidad se espera que una aplicación web sea funcional en un equipo de escritorio o inclusive en un dispositivo móvil ya que no sabemos cual será el dispositivo usado para navegar por la aplicación. Antes de ser una dificultad técnica, ésta realidad que enfrentamos hoy debe ser una oportunidad que nos posicione en un lugar estratégico frente a la competencia.

Published in: Software
  • Be the first to comment

  • Be the first to like this

La importancia de ser responsive

  1. 1. #GX24 La importancia de ser Responsive Ivette González García @gx_ivette igonzalez@genexus.com
  2. 2. #GXMX Agenda ¿Qué es Responsive Web Design? Características y beneficios ¿Como crear una aplicación Responsive con GX?
  3. 3. ¿Qué es RWD?
  4. 4. #GXMX ¿Qué es Responsive Web Design?
  5. 5. #GXMX
  6. 6. #GXMX
  7. 7. Características y beneficios
  8. 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. 9. Beneficios de RWD Un solo código (HTML & CSS) Una misma URL Bajo costo en el desarrollo Recomendado por Google
  10. 10. #GXMX
  11. 11. Tecnología en la que se basa RWD Grids fluídos Media Queries Medios flexibles Frontend framework
  12. 12. ¿Cómo desarrollar una aplicación Responsive con GeneXus?
  13. 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. 14. #GXMX • Transacciones Web • Prompts Web • Objetos generados por el pattern Work With Objetos definidos automáticamente por GeneXus
  15. 15. #GXMX Propiedades de la versión de la KBs:
  16. 16. #GXMX
  17. 17. #GXMX Abstract Layout Como crear un Web panel responsive
  18. 18. #GXMX
  19. 19. #GXMX Propiedades de la versión de la KB:
  20. 20. #GXMX 33%50% Extra-Small Small Medium y Large
  21. 21. #GXMX Table 1 Table 2
  22. 22. #GXMX Table1 Extra-Small (Phone < 768px) Table2
  23. 23. #GXMX Small (Tablets >= 768px) Table1 Table 2
  24. 24. #GXMX Extra-Small Small Medium &Large 33%50%
  25. 25. #GXMX
  26. 26. #GXMX Theme editor: Reglas CSS condicionales
  27. 27. #GXMX
  28. 28. #GXMX
  29. 29. NUEVAS FUNCIONALIDADES • Soporte para imágenes de múltiples densidades • Nuevos controles para RWD : Upload User Control: Navigation bar:
  30. 30. Live Editing • Prototipación ágil • El browser como preview
  31. 31. Conferencias relacionadas Live Editing in Action – 15:30 hrs., Regency Ball Room C
  32. 32. #GX24 ¡MUCHAS GRACIAS! Ivette González García – igonzalez@genexus.com @gx_ivette

×