32
#GX24 La importancia de ser Responsive Ivette González García @gx_ivette [email protected]

La importancia de ser responsive

  • Upload
    genexus

  • View
    218

  • Download
    4

Embed Size (px)

Citation preview

Page 1: La importancia de ser responsive

#GX24

La importancia de ser Responsive

Ivette González García

@gx_ivette

[email protected]

Page 2: La importancia de ser responsive

#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

¿Qué es RWD?

Page 4: La importancia de ser responsive

#GXMX

¿Qué es Responsive Web Design?

Page 5: La importancia de ser responsive

#GXMX

Page 6: La importancia de ser responsive

#GXMX

Page 7: La importancia de ser responsive

Características y beneficios

Page 8: La importancia de ser responsive

#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

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

#GXMX

Page 11: La importancia de ser responsive

Tecnología en la que se basa RWD

Grids fluídos

Media Queries

Medios flexibles

Frontend framework

Page 12: La importancia de ser responsive

¿Cómo desarrollar una aplicación Responsive con

GeneXus?

Page 13: La importancia de ser responsive

#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

#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

#GXMX

Propiedades de la versión de la KBs:

Page 16: La importancia de ser responsive

#GXMX

Page 17: La importancia de ser responsive

#GXMX

Abstract Layout

Como crear un Web panel responsive

Page 18: La importancia de ser responsive

#GXMX

Page 19: La importancia de ser responsive

#GXMX

Propiedades de la versión de la KB:

Page 20: La importancia de ser responsive

#GXMX

33%50%

Extra-Small

Small

Medium y Large

Page 21: La importancia de ser responsive

#GXMX

Table 1 Table 2

Page 22: La importancia de ser responsive

#GXMX

Table1

Extra-Small (Phone < 768px)

Table2

Page 23: La importancia de ser responsive

#GXMX

Small (Tablets >= 768px)

Table1 Table 2

Page 24: La importancia de ser responsive

#GXMX

Extra-Small

Small

Medium &Large

33%50%

Page 25: La importancia de ser responsive

#GXMX

Page 26: La importancia de ser responsive

#GXMX

Theme editor: Reglas CSS condicionales

Page 27: La importancia de ser responsive

#GXMX

Page 28: La importancia de ser responsive

#GXMX

Page 29: La importancia de ser responsive

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

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

Page 31: La importancia de ser responsive

Conferencias relacionadas

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

Page 32: La importancia de ser responsive

#GX24

¡MUCHAS GRACIAS!

Ivette González García – [email protected] @gx_ivette