La importancia de ser responsive

#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 pantalla

Seleccionar el contenido esencial en la pantallamás pequeña

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 panel responsive

Theme editor: Reglas CSS condicionales

#GXMX

• Transacciones Web

• Prompts Web

• Objetos generados por el pattern Work With

Objetos definidos automáticamente por GeneXus

#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:

Navigation bar:

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