41. rwd el ingrediente que no puede faltar en tus recetas

#GX24

RWD El ingrediente que no puede faltar en tus recetas

Ma. Inés Carriquiry (GeneXus) & Mauricio Morinelli (Brokerware) #GX3506

#GX24

Responsive Web Design Diseño Web adaptable

1. Concepto y bases

2. Primeros pasos

3. Caso de éxito: Agente de valores en Zonamérica

4. Diseñador + desarrollador

1- ¿Qué es RWD?

Same web application

Same web application

Responsive vs non-responsive

#GX24

Principios

Ubicuidad/Omnipresencia: •Definir las acciones principales y asegurarnos de que estén disponibles en todos los tamaños.

•Uniformidad de contenidos entre los dispositivos, no “restringir” contenidos ni tomar la versión móvil como una versión “lite”. •Entender la diferencia entre una aplicación “soportada” y una “optimizada”

•Lograr una applicación usable, accesible e inclusiva

w UBIQUITY

#GX24

Principios

Flexibilidad: •Crear interfaces que se vean bien en todos los dispositivos, en todas las resoluciones

•La estructura está determinada por el contenido

w UBIQUITY FLEXIBILITY

5

#GX24

Principios

Performance: •¿Cuánto tiempo tarda en cargar la aplicación?

•Optimizar imágenes y códigos. Muchas veces los teléfonos tienen pobre conexión de datos.

w UBIQUITY FLEXIBILITY PERFORMANCE

5 {

#GX24

Principios

“Enhancement – mobile first” •Poner el foco en el objetivo principal de la aplicación y las acciones.

•Pensar “mobile-first” para diseñar una aplicación con una buena interfaz, que sea una gran experiencia para los usuarios y sea capaz de permanecer en el futuro.

w UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT

5 { b PERFORMANCE

{

#GX24

Principios

“Future-friendly” •Enfocarse en lo que realmente le importa a los usuarios y a mi negocio.

•Colocar sólo contenido importante.

•Una vez que el contenido está definido, armar una buena estructura que funcione en cualquier momento y en cualquier lugar.

w UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT

FUTURE FRIENDLY

5 { b l PERFORMANCE

{

2- PENSANDO RESPONSIVE

#GX24

4 tamaños

Extra-small hasta 768px

Small hasta 992px

Medium hasta 1200px

Large +1200px

#GX24

Grid

Usamos el sistema de 12 columnas desde el comienzo, tanto en el diseño como en el armado de la aplicación.

12 COLUMNAS

100% ANCHO

#GX24

8,33% CADA COLUMNA

#GX24

Para el diseño de la app nos basamos en el mismo sistema de

12 columnas. Por defecto tienen

15px de padding.

#GX24

1/3

1/3

1/4

1/4

1/1

1/1

1/1

1/1

1/6

#GX24

Un diseño para cada tamaño

3- CASO: AGENTE DE VALORES EN ZONAMÉRICA

#GX24

#GX24

¿Por qué es importante el Diseño Web Responsive?

#GX24

Incremento de dispositivos móviles.

#GX24

Incremento de dispositivos móviles.

Tiempo y costo.

#GX24

Incremento de dispositivos móviles.

Tiempo y costo.

Recomendado por Google.

#GX24

Incremento de dispositivos móviles.

Tiempo y costo.

Recomendado por Google.

Experiencia de usuario y apuesta al futuro.

#GX24

Construyendo el sitio

#GX24

Cómo crear un sitio web responsive con GeneXus Wiki.genexus.com

#GX24

Hello world!

Comportamiento Redimensionando para pantallas mas pequeñas tendremos una disposición en filas. 1 encima de 2.

Primeros pasos Un ejemplo sencillo

de un web panel con dos columnas.

#GX24

1

2

Abstract Editor

Responsive Tables

Responsive Sizes

#GX24

#GX24

#GX24

1 3

4

2

#GX24

#GX24

#GX24

#GX24

#GX24

Navegadores mas populares

Emulado en +40 dispositivos

#GX24

Bootstrap

HTML5

CSS3

Media Queries

Tamaños de pantalla

#GX24

De GeneXus X Evolution 1 a GeneXus X Evolution 3.

Interacción Diseñador-Desarrollador.

#GX24

1 3

4

2

#GX24

De GeneXus X Evolution 1 a GeneXus X Evolution 3.

Interacción Diseñador-Desarrollador.

4- LA RECETA: DISEÑO + DESARROLLO

#GX24

( DESARROLLO

E DISEÑO

OBJETIVO

USUARIOS

CONTENIDOS

1- Definir el proyecto

ALCANCE

RECURSOS

PLAZOS

t CLIENTE

+ +

#GX24

( DESARROLLO

E DISEÑO

2- Definir pantallas, acciones y navegación

+

#GX24

E DISEÑO

3- sketch wireframe – 4 tamaños

#GX24

E DISEÑO

Entregar módulos para el armado ( DESARROLLO

Extra-small hasta 768px

Small hasta 992px

Medium hasta 1200px

#GX24

4- Mockup 4 tamaños E DISEÑO

#GX24

5- Diseño

Extra-small hasta 768px

Small hasta 992px

Medium hasta 1200px

Large +1200px

E DISEÑO

#GX24

5- ¿Qué entrega el diseñador? E DISEÑO

( DESARROLLO

ESTRUCTURA RWD DISEÑO TERMINADO IMÁGENES PROPIEDADES Colores, tipografías,

tamaños, alturas, etc.

+ + +

Ma. Inés Carriquiry mcarriquiry@genexus.com

Mauricio Morinelli mmorinelli@brokerware.com.uy