SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
#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 pantalla
má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

Más contenido relacionado

Similar a La importancia de ser responsive

Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías web
Julio Alfaro
 
Gxportal 5.2 conoce sus nuevas funcionalidades (1)edgar
Gxportal 5.2  conoce sus nuevas funcionalidades (1)edgarGxportal 5.2  conoce sus nuevas funcionalidades (1)edgar
Gxportal 5.2 conoce sus nuevas funcionalidades (1)edgar
GeneXus
 
038 k2 b-tools_actualidad_y_proximos_pasos
038 k2 b-tools_actualidad_y_proximos_pasos038 k2 b-tools_actualidad_y_proximos_pasos
038 k2 b-tools_actualidad_y_proximos_pasos
GeneXus
 
Bargento 1.0 – Zend – Por qué Zend Technologies ?
Bargento 1.0 – Zend – Por qué Zend Technologies ?Bargento 1.0 – Zend – Por qué Zend Technologies ?
Bargento 1.0 – Zend – Por qué Zend Technologies ?
Bargento ES
 
Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia
Mercedes Garcia
 

Similar a La importancia de ser responsive (20)

Garantizar la seguridad de mis aplicaciones: un desafío que el GAM asume - Sa...
Garantizar la seguridad de mis aplicaciones: un desafío que el GAM asume - Sa...Garantizar la seguridad de mis aplicaciones: un desafío que el GAM asume - Sa...
Garantizar la seguridad de mis aplicaciones: un desafío que el GAM asume - Sa...
 
Responsive Web Design: Sin fronteras para una excelente experiencia de usuari...
Responsive Web Design: Sin fronteras para una excelente experiencia de usuari...Responsive Web Design: Sin fronteras para una excelente experiencia de usuari...
Responsive Web Design: Sin fronteras para una excelente experiencia de usuari...
 
Web: HTML5 es el ganador, y ahora que?
Web: HTML5 es el ganador, y ahora que?Web: HTML5 es el ganador, y ahora que?
Web: HTML5 es el ganador, y ahora que?
 
Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías web
 
Renderizando la web del 2020
Renderizando la web del 2020Renderizando la web del 2020
Renderizando la web del 2020
 
Gxportal 5.2 conoce sus nuevas funcionalidades (1)edgar
Gxportal 5.2  conoce sus nuevas funcionalidades (1)edgarGxportal 5.2  conoce sus nuevas funcionalidades (1)edgar
Gxportal 5.2 conoce sus nuevas funcionalidades (1)edgar
 
41. RWD el ingrediente que no puede faltar en tus recetas
41. RWD el ingrediente que no puede faltar en tus recetas41. RWD el ingrediente que no puede faltar en tus recetas
41. RWD el ingrediente que no puede faltar en tus recetas
 
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
 
038 k2 b-tools_actualidad_y_proximos_pasos
038 k2 b-tools_actualidad_y_proximos_pasos038 k2 b-tools_actualidad_y_proximos_pasos
038 k2 b-tools_actualidad_y_proximos_pasos
 
Bargento 1.0 – Zend – Por qué Zend Technologies ?
Bargento 1.0 – Zend – Por qué Zend Technologies ?Bargento 1.0 – Zend – Por qué Zend Technologies ?
Bargento 1.0 – Zend – Por qué Zend Technologies ?
 
Front end
Front endFront end
Front end
 
Dreamweaver
Dreamweaver Dreamweaver
Dreamweaver
 
Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia
 
Estandares Web, Accesibilidad y Usabilidad
Estandares Web, Accesibilidad y UsabilidadEstandares Web, Accesibilidad y Usabilidad
Estandares Web, Accesibilidad y Usabilidad
 
El futuro de las tecnologías frontend y su impacto en la conversión
WebAssembly
El futuro de las tecnologías frontend y su impacto en la conversión
WebAssemblyEl futuro de las tecnologías frontend y su impacto en la conversión
WebAssembly
El futuro de las tecnologías frontend y su impacto en la conversión
WebAssembly
 
Aplicaciones móviles - HTML5
Aplicaciones móviles - HTML5Aplicaciones móviles - HTML5
Aplicaciones móviles - HTML5
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
WW+, SD+ y Audit+: Potencie GeneXus la Suite Plus
WW+, SD+ y Audit+: Potencie GeneXus la Suite PlusWW+, SD+ y Audit+: Potencie GeneXus la Suite Plus
WW+, SD+ y Audit+: Potencie GeneXus la Suite Plus
 
Ruby on Rails y AngularJS
Ruby on Rails y AngularJSRuby on Rails y AngularJS
Ruby on Rails y AngularJS
 
Web Apps Azure
Web Apps AzureWeb Apps Azure
Web Apps Azure
 

Más de GeneXus

Más de GeneXus (20)

After Chatbots Yo (Ro) Bots
After Chatbots Yo (Ro) BotsAfter Chatbots Yo (Ro) Bots
After Chatbots Yo (Ro) Bots
 
Live Editing in Action
Live Editing in ActionLive Editing in Action
Live Editing in Action
 
Experiencias en el desarrollo de aplicaciones móviles en el sector salud de M...
Experiencias en el desarrollo de aplicaciones móviles en el sector salud de M...Experiencias en el desarrollo de aplicaciones móviles en el sector salud de M...
Experiencias en el desarrollo de aplicaciones móviles en el sector salud de M...
 
¿Pensando en implementar un sistema de gestión integral en su organización?
¿Pensando en implementar un sistema de gestión integral en su organización?¿Pensando en implementar un sistema de gestión integral en su organización?
¿Pensando en implementar un sistema de gestión integral en su organización?
 
Sd y Plataformas
Sd y PlataformasSd y Plataformas
Sd y Plataformas
 
PXTools: Nuevo generador y nuevos controles responsivos
PXTools: Nuevo generador y nuevos controles responsivosPXTools: Nuevo generador y nuevos controles responsivos
PXTools: Nuevo generador y nuevos controles responsivos
 
APPlícate: Aplicaciones móviles para el desarrollo de la industria
APPlícate: Aplicaciones móviles para el desarrollo de la industriaAPPlícate: Aplicaciones móviles para el desarrollo de la industria
APPlícate: Aplicaciones móviles para el desarrollo de la industria
 
GeneXus 4 Students
GeneXus 4 StudentsGeneXus 4 Students
GeneXus 4 Students
 
K2B: El ERP nativo para el mundo GeneXus
K2B: El ERP nativo para el mundo GeneXusK2B: El ERP nativo para el mundo GeneXus
K2B: El ERP nativo para el mundo GeneXus
 
GeneXus Cloud Deployment Services. El camino a la nube.
GeneXus Cloud Deployment Services. El camino a la nube.GeneXus Cloud Deployment Services. El camino a la nube.
GeneXus Cloud Deployment Services. El camino a la nube.
 
LigaMX con GeneXus: De 0 a 1.700.000 de usuarios
LigaMX con GeneXus: De 0 a 1.700.000 de usuariosLigaMX con GeneXus: De 0 a 1.700.000 de usuarios
LigaMX con GeneXus: De 0 a 1.700.000 de usuarios
 
Innovando con GeneXus y SAP
Innovando con GeneXus y SAPInnovando con GeneXus y SAP
Innovando con GeneXus y SAP
 
Going mobile
Going mobileGoing mobile
Going mobile
 
Audit+: La mejor forma de auditar KB’s GeneXus
Audit+: La mejor forma de auditar KB’s GeneXusAudit+: La mejor forma de auditar KB’s GeneXus
Audit+: La mejor forma de auditar KB’s GeneXus
 
Aproveche las ventajas de la colaboración entre GeneXus y Cloud Shared Office...
Aproveche las ventajas de la colaboración entre GeneXus y Cloud Shared Office...Aproveche las ventajas de la colaboración entre GeneXus y Cloud Shared Office...
Aproveche las ventajas de la colaboración entre GeneXus y Cloud Shared Office...
 
Laboratorio GXserver (cont)
Laboratorio GXserver (cont)Laboratorio GXserver (cont)
Laboratorio GXserver (cont)
 
Laboratorio GXserver
Laboratorio GXserverLaboratorio GXserver
Laboratorio GXserver
 
Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto (...
Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto (...Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto (...
Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto (...
 
Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto
Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y SaltoLaboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto
Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto
 
Laboratorio: Desarrollo para Smart Devices
Laboratorio: Desarrollo para Smart DevicesLaboratorio: Desarrollo para Smart Devices
Laboratorio: Desarrollo para Smart Devices
 

Último

TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptxTECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
UPSE
 
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdfTECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
UPSE
 

Último (7)

TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptxTECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
 
Modelado de Casos de uso del negocio
Modelado de  Casos  de  uso  del negocioModelado de  Casos  de  uso  del negocio
Modelado de Casos de uso del negocio
 
contabilidad para la inflacion, contabilidad superior
contabilidad para la inflacion, contabilidad superiorcontabilidad para la inflacion, contabilidad superior
contabilidad para la inflacion, contabilidad superior
 
Especificación casos de uso del negocio
Especificación  casos de uso del negocioEspecificación  casos de uso del negocio
Especificación casos de uso del negocio
 
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdfTECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
 
Tipos de datos en Microsoft Access definiciones.pdf
Tipos de datos en Microsoft Access definiciones.pdfTipos de datos en Microsoft Access definiciones.pdf
Tipos de datos en Microsoft Access definiciones.pdf
 
El necesario mal del Legacy Code (Drupal Iberia 2024)
El necesario mal del Legacy Code (Drupal Iberia 2024)El necesario mal del Legacy Code (Drupal Iberia 2024)
El necesario mal del Legacy Code (Drupal Iberia 2024)
 

La importancia de ser responsive