Este documento presenta los conceptos y principios del diseño web responsive (RWD). Explica que RWD significa crear sitios web que se adaptan a diferentes tamaños de pantalla como teléfonos, tablets y computadoras. Detalla los cuatro tamaños de pantalla a considerar y el uso de una grilla de 12 columnas. También incluye un caso de éxito de un sitio web de agente de valores creado con RWD y GeneXus. Finalmente, resume el proceso colaborativo entre diseñador y desarrollador para crear sitios web con R

1. #GX24
RWD
El ingrediente que no puede faltar en tus recetas
Ma. Inés Carriquiry (GeneXus) & Mauricio Morinelli (Brokerware)
#GX3506

2. #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

3. 1- ¿Qué es RWD?

4. Same web application

5. Same web application

6. Responsive vs non-responsive

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

8. #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

9. #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
{

10. #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

11. #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
ENHANCEMENT
FUTURE FRIENDLY
5
{
b
l
PERFORMANCE

12. 2- PENSANDO RESPONSIVE

13. #GX24
4 tamaños
Extra-small
hasta 768px
Small hasta 992px
Medium
hasta 1200px
Large
+1200px

14. #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

15. #GX24
8,33%
CADA COLUMNA

16. #GX24
Para el diseño de la app nos basamos en el mismo sistema de 12 columnas.
Por defecto tienen 15px de padding.

17. #GX24
1/3
1/3
1/4
1/4
1/1
1/1
1/1
1/1
1/6

18. #GX24
Un diseño para cada tamaño

19. 3- CASO: AGENTE DE VALORES EN ZONAMÉRICA

20. #GX24

21. #GX24
¿Por qué es importante el Diseño Web Responsive?

22. #GX24
Incremento de dispositivos móviles.

23. #GX24
Incremento de dispositivos móviles.
Tiempo y costo.

24. #GX24
Incremento de dispositivos móviles.
Tiempo y costo.
Recomendado por Google.

25. #GX24
Incremento de dispositivos móviles.
Tiempo y costo.
Recomendado por Google.
Experiencia de usuario y apuesta al futuro.

26. #GX24
Construyendo el sitio

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

28. #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.

29. #GX24
1
2
Abstract Editor
Responsive Tables
Responsive Sizes

30. #GX24

31. #GX24

32. #GX24
1
3
4
2

33. #GX24

34. #GX24

35. #GX24

36. #GX24

37. #GX24
Navegadores mas populares
Emulado en +40 dispositivos

38. #GX24
Bootstrap
HTML5
CSS3
Media Queries
Tamaños de pantalla

39. #GX24
De GeneXus X Evolution 1 a GeneXus X Evolution 3.
Interacción Diseñador-Desarrollador.

40. #GX24
1
3
4
2

41. #GX24
De GeneXus X Evolution 1 a GeneXus X Evolution 3.
Interacción Diseñador-Desarrollador.

42. 4- LA RECETA: DISEÑO + DESARROLLO

43. #GX24
(
DESARROLLO
E
DISEÑO
OBJETIVO
USUARIOS
CONTENIDOS
1- Definir el proyecto
ALCANCE
RECURSOS
PLAZOS
t
CLIENTE
+
+

44. #GX24
(
DESARROLLO
E
DISEÑO
2- Definir pantallas, acciones y navegación
+

45. #GX24
E
DISEÑO
3- sketch wireframe – 4 tamaños

46. #GX24
E
DISEÑO
Entregar módulos para el armado
(
DESARROLLO
Extra-small
hasta 768px
Small
hasta 992px
Medium
hasta 1200px

47. #GX24
4- Mockup 4 tamaños
E
DISEÑO

48. #GX24
5- Diseño
Extra-small
hasta 768px
Small hasta 992px
Medium
hasta 1200px
Large
+1200px
E
DISEÑO

49. #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.
+
+
+

50. Ma. Inés Carriquiry
mcarriquiry@genexus.com
Mauricio Morinelli
mmorinelli@brokerware.com.uy