Recomendados
Más contenido relacionado
Similar a 053 las mas-lindas_son_mejores
Similar a 053 las mas-lindas_son_mejores (20)
Más de GeneXus
Más de GeneXus (20)
053 las mas-lindas_son_mejores
- 1. Las más lindas son mejores Ursula Bartram María Inés Carriquiry
- 3. Arrancamos…
- 4. Qué 1 Layouts 2 Temas 3 Imágenes 4 Controlespara SD
- 5. Layouts 1
- 6. Tablets vs. Phones 1
- 7. Flip vs. Split 1 FLIP SPLIT
- 8. Temas – Nuevo Objeto 2 Colores Fondos Tipos de Letra Margin & Padding Y más
- 9. Detail 2
- 10. Ejemplo 2
- 11. Detail Pronto 2
- 12. “ 3 ” Una imagen vale más que mil palabras
- 14. alta (hdpi) - 240 dpi en 72 x 72 px
- 15. media (mdpi) - 160 dpi en 48 x 48 px
- 16. baja (ldpi) - 120 dpi en 36 x 36 pxIcono de la aplicación
- 17. Densidad de una imagen 3 Resolución : 480x800px Tamaño del display: 2x3.3” Densidad: High (240 dpi) Resolución : 480x800px Tamaño del display: 3x5” Densidad: Medium (160 dpi)
- 18. WelcomeBackgroundiPad 3 iPadLandscape703 x 704 px iPadPortrait768 x 960 px iPhone - iPod320 x 480 px iPhone 4640 x 960 px iPadLandscape1024 x 748 px iPadPortrait768 x 1004 px
- 19. Tabs 3
- 20. Imágenes – Conclusiones 1 diseño global, varios formatos de imagen Conocer el destino de las imágenes Guidelines en el Wiki - Imágenes para aplicaciones Smart Devices – http://wiki.gxtechnical.com/commwiki/servlet/hwiki?Im%C3%A1genes+para+aplicaciones+Smart+Devices, 3
- 25. ¡Se puede!
- 27. Para terminar… Trabajar en equipo con diseñador Respetar a cada usuario Genexus = Oportunidad
- 28. “ Puede implementarse el mejor sistema del mundo pero, si no entusiasmamos a quienes lo tienen que usar, no pasará nada. ” Breogán Gonda
- 29. ¡Muchas GRACIAS! Ursula Bartramubartram@genexus.com María Inés Carriquiry mcarriquiry@genexus.com
Notas del editor
- PRESENTARMEBuenos días. Mi nombre es Ursula Bartram, y trabajo en el área de testing de Genexus. Ella es María Inés Carriquiry y es diseñadora.En primer lugar quiero agradecerles su presencia.Antes de comenzar, déjenme contarles como surgió esta charla. Un día Armin me comenta que hay una aplicación ya pronta desde el punto de vista funcional, pero que le hace falta mejorar el diseño, aplicarle algun temas y agregarle/modificarle imagen. Y que podía trabajar con Maria Inés en equipo para lograrlo. Me encantó la idea! Quedé entusiasmada y comenzamos a trabajar en eso.Y además me dijo …si te parece bien la presentás en el evento…. y aquí estamos .Entonces la idea es contarles esta experiencia, cómo trabajamos juntas para lograr que una aplicación para Smart Devices quede presentable y usable
- Esta es la aplicación en la cual ibamos a trabajar MI y yo. La aplicación ya estaba funcionalmente pronta. ¿De qué se trata? En Artech, hay varios beneficios para los empleados, por ejemplo 10% descuento en tal comercio, o tal descuento los dias martes comprando con tal tarjeta. Y asi varios que se comentaban en la cocina, o por mail. Y finalmente se hizo una aplicación para centralizar esos datos, agrupados por tarjetas de crédito, bancos y por ramosEstas son algunas de las pantallas de Beneficios….hechas por un ingeniero!Bueno ¡A trabajar!Lo primero que hice fue reunirme con María Inés. El objetivo de esa primer reunión es que ella conociera la aplicación y definir un plan de trabajo en equipo que fuePantalla de inicio , Imágenes de ramos y Listas en teléfono (elegimos Android)Listas en tabletas (elegimos Ipad)Detail
- A los pocos días, María Inés me estaba mandando este boceto para las LISTAS de la aplicación: Beneficios, Ramos y Grupos.El paso siguiente fue analizarlo y mapearlo en Genexus.En este boceto se ven nuevas imágenes para las tarjetas y los ramos, y el manejo de tabsVeamos QUÉ trabajar en GX para lograrlo.
- ¿Qué es el layout?El layout es el pantalla, asi como tenemos los web forms, los winforms, tenemos los layouts de los SD. Se ven los datos a mostrarse, los controles a utilizarse y en que lugar los ponemos.En Genexus se lo puede encontrar en las transacciones y en los objetos panelsfor SD.>CLICKEn este caso, es el layout usado para para la transacción de Beneficios.Donde se ecuentra el layout? En las trn, en el tabPatterns (flecha1), PatternWorkWithfor SD (flecha2). Y alli se puede trabajar en la pantalla de los Lists (flecha3), y en la de los Details (flecha4). Para cada lista o detail, se puede trabajar un layout para todas las plataformas (anyplatform) o diseñar una por cada una de ellas: Android (teléfono y tableta), Blackberry, iPhone (teléfono y tableta). (flecha5).
- Volviendo a BeneficiosQue pasó? Termine el desarrollo con Android y asi tal cual como quedó, lo ejecuté en un Ipad y no se veía muy bien: - tamaños fonts – quedaron muy chicos, casi ilegibles - imágenes – no se veían igual - fondo negro vs. Fondo blanco - espacios de sobraConclusión: habia que trabajar en la pantalla del Ipad
- Split y Flip son dos estilos de navegación.Para esta aplicación de Beneficios, decidimos ir por SPLIT para aprovechar mejor el espacio. Como contrapartida, perdimos los tabs (limitación de iOs).2da. Etapa pronta.
- Conceptualmente es lo mismo que el tema web, es el mismo propòsito , la única diferencia es que es para smartdevices.Se usan para dar color y formato a los controles de una forma uniforme. No hay que configurar cada uno de ellos N veces, sino que se le aplica una clase, y en ella se setean las propiedades que gusten.Cuenta con clases y propiedades
- Volvemos a la aplicación de Beneficios. Estamos en la 3ra. Etapa que nos habiamos planificado con Maria Ines: DETAILLas Muestro el antes – boceto – después<Poner acciones, para mostrar de a una a medida que voy contando>
- Observemos el boceto que me envió María Inés. Lo que hice fue identificar 2 componentes.tabselectedtiene fondo violeta y letras blancas en negrita. Información de los atributos tiene el label en violeta mas claro y el valor del atributo de color negro. Ambos en negrita (bold) . Y existe un fondo gris.
- Trabajando entonces con los temas
- Este ícono es el que identifica a la aplicación en el dispositivo. Para iOS hay que hacer 4 íconos en distintos tamaños, siempre la misma imagen, nosotros hacemos estos 4 que se ven aquí. Luego el dispositivo se encarga de hacerle los bordes redondeados, ponerle el brillo y la sombra para que queden todos los íconos similares, por suerte de eso no nos tenemos que preocupar nosotros!Para Android también tenemos que hacer el ícono en distintos tamaños, pero esta vez para hacerlo un poco más complejo también entra en juego algo llamado Densidad de la imagen
- Les voy a explicar rápidamente qué es esto. Por ejemplo: tenemos dos dispositivos que tienen la misma resolución de pantalla 480x800 px, pero un monitor es mucho más pequeño que el otro. Es decir que tengo la misma cantidad de píxeles pero en una superficie más chica, por lo tanto si tomo un pedacito de monitor de 1 pulgada x 1 pulgada en una voy a tener muchos más píxeles que en la otra, por lo tanto la densidad de píxeles es mayor. Esto cómo influye en nuestras imágenes?
- Siguiendo un poco con las imágenes necesarias, tenemos 2 imágenes más, que por supuesto van en distintos tamaños.Welcome - Es la imagen que se muestra mientras se está cargando la aplicación Estas imágenes deben ser todas iguales, en lo que al dibujo se refiere. La diferencia entre ellas es el tamaño y el nombre. BackgroundIpadSolo aplica para aplicaciones que ejecutan en Ipad y con navegación SPLIT. Es la que ocupa el lugar a la derecha al cargar la aplicación.
- Ya para ir terminando, les cuento cómo son las imágenes que van dentro de la aplicación. En este caso las que estamos mostrando son imágenes tipo “tab” . Arriba tenemos un ejemplo para Android, como pueden ver los íconos son huecos dentro de un cuadrado gris o blanco, dependiendo si están seleccionados o no pero este es el estilo que se usa en las app para Android. En el caso de iOS se hace al reves, se crea la imagen en gris sobre fondo transparente y la app se encarga de que al estar seleccionada cambie el color de la opción.
- Como conclusión, hay que hacer muchas imágenes para que la aplicación se vea bien en los distintos dispositivos, pero con esta guía que les acabamos de pasar esperamos que les sea un poco más simple. Ademas recomendar el trabajo en equipo y la página del wiki
- Los controles especificos para smardevices es importante conocerlos para tratar de utilizarlos, son importantes para la usabilidad de este tipo de aplicaciones. Los inputs son en general mas de este tipo. O varios clicks en caso de no contar con pantallas táctiles. Hay que evitar el uso del teclado en lo posible.Hay algunos UC que vienen en Gx y otros que se pueden crear.
- SdmapsWheelRatingEn la próxima charla, Franklin va a estar comentando mas en detalle sobre los controles con los que contamos.
- Luego de unas semanas de trabajo, teníamos grandes avancesEsto es beneficios después en Android
- Beneficios Después en ipadLos próximos pasos son Blackberry y subirlos al Store
- Estos son algunos ejemplos de aplicaciones hechas con la beta.
- Es necesario trabajar en equipo con el diseñador. Evitar pedirle una o varias imágenes que sean de 57 x57 que represente un elefante. Lo que hay que hacer es contarle que se esta trabajando para una aplicación para un zoo y requieren imagnes para el icono…por ejemplo.Y básicamente las etapas de trabajo son:Listas + imágenes + teléfonoTabletaDetailResto de dispositivosDiseño – costumbre de los usuarios de iphone son diferentes a los usuairos de android. Y a unos no les gusta ver aplicaciones del estilo del otroLograr que las aplicaciones sean USADAS. Es de uso personal, se descarta si no es usable, y si no es linda Importante tener en cuenta el dispositivo,En Genexus podemos trabajar para todos los dispositivos en una única herramienta. Aprovechémoslo.