41. rwd el ingrediente que no puede faltar en tus recetas
DESCRIPTION
RWD el ingrediente que no puede faltar en tus recetasTRANSCRIPT
#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.
+ + +
