Desarrollo web movil
-
Upload
alfredo-juarez -
Category
Technology
-
view
210 -
download
0
description
Transcript of Desarrollo web movil
![Page 1: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/1.jpg)
Desarrollo Web para Móviles
Alfredo Juárez CEO Cloudadmin, Inc
![Page 2: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/2.jpg)
![Page 3: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/3.jpg)
¿Por qué Desarrollar para Móviles?
• Diseñar web móviles no sólo te prepara al crecimiento explosivo y permite aprovechar las nuevas oportunidades en el internet móvil, también permite innovar en formas que antes no podías.
• Preparando tus aplicaciones para móviles, uHlizando diseño web responsivo, puedes alcanzar incluso disposiHvos que todavía no han salido al mercado.
![Page 4: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/4.jpg)
Crecimiento Exponencial
Fuentes: hLp://bkaprt.com/mf/11 y hLp://bkaprt.com/mf/12
![Page 5: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/5.jpg)
Crecimiento Exponencial
• PayPal está recibiendo un volumen de pagos móviles por encima de los 10 mdd al día.
• eBay registró ventas móviles a nivel mundial cerca de los 2 billones de dólares en 2010.
• Google tuvo un crecimiento en sus búsquedas móviles de un 130% en el tercer cuarto de 2010.
![Page 6: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/6.jpg)
Condiciones • Tamaño de la Pantalla • Desempeño • Tiempo y Espacio
Usando las condiciones a tu favor Celulares vienen con un set natural de condiciones que al principio pudieran parecer limitantes, sin embargo, diseñar para celulares te obliga a adoptar dichas condiciones para desarrollar una solución apropiada.
![Page 7: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/7.jpg)
Capacidades
• Acceso a datos en Hempo real, en cualquier parte del mundo.
• Los usuarios no necesitan esperar a llegar a una computadora para actualizar su información o revisar las noHcias.
• Información úHl en la palma de su mano.
![Page 8: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/8.jpg)
¿Cómo Empezar?
• Es claro que trabajar con móviles es una nueva oportunidad para muchos de nosotros. Sin embargo, si vienes de trabajar con aplicaciones Web de escritorio, ¿Cómo hacer que la transición sea fácil?
• La mayoría de las herramientas y conocimientos que actualmente se uHlizan todavía podrán ser aplicadas en esta área, pero deberás pensar de manera diferente acerca de la organización, acciones, entradas y diseño de interfaces en móviles.
![Page 9: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/9.jpg)
Organización
• La organización de las experiencias móviles en web necesitan: – Entender cómo la gente usa sus disposiHvos móviles y por qué.
– EnfaHzar contenido sobre navegación. – Proveer opciones relevantes para exploración. – Mantener claridad y enfoque.
![Page 10: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/10.jpg)
Tipos de Usos
• Búsqueda (Información urgente, local): Necesito encontrar una respuesta a a lgo ahora! – Frecuentemente relacionado a mi localización actual.
• Explorar/Jugar (Aburrido, local): Necesito matar el Hempo con algo interesante y entretenido.
• Check In/Status (RepeMr/micro-‐tasking): Algo importante para mi se manHene cambiando o actualizando y quiero estar al día con eso.
• Editar/Crear (Cambio urgente/micro-‐tasking): Necesito que algo esté listo ahora y no puedo esperar.
![Page 11: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/11.jpg)
Algunos Ejemplos Tarea Urgente (Micro-‐Tasking)
www.cloudadmin.mx Búsqueda de información (Local)
www.dnlspots.com
![Page 12: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/12.jpg)
Contenido sobre Navegación • Como regla general, contenido toma precedente sobre
navegación. • Sea la tarea que los usuarios necesiten hacer, lo más importante
para ellos es encontrar respuestas inmediatas a sus necesidades y no el mapa del siHo.
ESPN y YouTube son ejemplos claros de enfoque en contenido sobre navegación.
![Page 13: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/13.jpg)
Botón Volver: Buenas prácHcas
• Cuando diseñas aplicaciones naHvas, añadir un botón “atrás” a la cabecera de la app puede resultar imprescindible, sin embargo, en la web, la mayoría de los navegadores móviles ya cuentan con un botón “atrás” por defecto, por lo que, integrar otro botón “atrás” en tu aplicación sería redundante.
• En caso de ser necesario implementar una manera de regresarse a un nivel arriba, es recomendable uHlizar un nombre descripHvo en el botón.
![Page 14: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/14.jpg)
Mantener Claridad y Enfoque
Las circunstancias en la que el usuario visita nuestra App móvil hacen que su atención sea parcial, por lo que debemos de evitar cualquier Hpo de distractor.
La pantalla de Yahoo es un buen ejemplo de Claridad y Enfoque, En contraste con la de ESPN, el contenido que el usuario está interesado queda fuera de la pantalla.
![Page 15: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/15.jpg)
Organizando la Experiencia de Usuario
• Los casos de uso para búsqueda, exploración, check-‐in y editar y crear, te permiten pensar en cómo organizarás tu siHo para una mejor experiencia móviles, diseñando una estructura apropiada.
• Teniendo la experiencia de usuario organizada, ayudará a la gente a encontrar su camino; pero una vez que lo encuentren, necesitan actuar de manera instantánea.
![Page 16: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/16.jpg)
Organizando la Experiencia de Usuario
• Enfocándose en contenido sobre navegación, proporciona a la gente la información y las tareas que desean lo más rápido posible.
• Opciones de navegación relevantes y bien posicionadas permiten a la gente a explorar tu siHo de una manera más apropiada.
• Reduciendo el total de opciones de navegación y enfocándose en las tareas principales, manHene claridad y enfoque en lo que el usuario necesita realizar – Especialmente cuando van a prisa o situaciones no ideales.
• Aún cuando los usuarios tengan Hempo de relax con su celular, seguirán apreciando simpleza en tu diseño!
![Page 17: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/17.jpg)
Acciones • Mientras que algunos disposiHvos cuentan con controles
por hardware, tales como Trackpads, trackwheels y teclados, es de manera tácHl como la mayoría interactúa con la web en los celulares. Entonces, ¿cómo aseguramos que todos sean capaces de interactuar con nuestra aplicación en interfaces basadas en pantallas tácHles?.
– Asegurar que los botones tengan un tamaño y posición apropiada.
– Conocer claramente los gestos más comunes y como se adapta a los objeHvos de los usuarios.
– Cubriendo la falta del “hover” en las interacciones basadas en él.
![Page 18: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/18.jpg)
¡Menos es mas!
Si la pantalla es pequeña, ¿por qué no hacer todo más pequeño para que quepa en ella?
![Page 19: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/19.jpg)
¡Olvídenlo! • Aunque puedan caer en la tentación, realmente, ir en la dirección contraria es mucho mejor.
• Debes de usar tamaños grandes que se adapten al tamaño de los dedos.
• Los dedos humanos son instrumentos de punteo imprecisos: no son tan perfectos como el puntero del mouse. Vienen en diferentes tamaños.
![Page 20: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/20.jpg)
Tamaño de los botones
• Apple recomienda botones de por lo menos 44x44 puntos.
• Microsoj recomienda 9mm y un mínimo de 7mm. Además, de un mínimo espacio de 2mm entre botones.
• Si una acción es tocada con frecuencia, el tamaño debe de ser aún mayor.
• Esto con la finalidad de evitar que los dedos toquen un objeHvo incorrecto.
![Page 21: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/21.jpg)
En términos de diseño móvil, ¡entre más grande mejor!
Lo suficiente para evitar que los usuarios cometan errores, tocando donde no quieren.
![Page 22: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/22.jpg)
Ejemplos
El botón de cancelar está muy pegado al botón de
Login.
¿Dónde quieres que toque?
![Page 23: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/23.jpg)
Adaptarse a las circunstancias
Imagina que estás sosteniendo tu smartphone sólo con la mano
derecha.
Mientras que tocar el área verde es muy fácil, tratar de tocar la parte amarilla es en algunos casos
imposible.
![Page 24: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/24.jpg)
Gestos
![Page 25: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/25.jpg)
Bienvenida la NUI (Natural User Interface)
• El concepto de Interface de Usuario Natural o NUI (Por sus siglas en inglés), es usado comúnmente entre diseñadores y desarrolladores de interfaces para hacer referencia a una interfaz de usuario que es efecHvamente invisible, o bien, lo suficientemente intuiHva y/o natural cómo para que implique mucho esfuerzo al usuario para aprenderlas.
![Page 26: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/26.jpg)
Natural User Interface
• Personas que hace 5 años le tenían temor a la tecnología, hoy en día han adoptado el uso de smartphones, tabletas y demás disposiHvos que de cierta manera, replican su interacción en la forma como naturalmente interactuamos con los objetos en el mundo real.
![Page 27: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/27.jpg)
Ejemplos de acciones de usuario y gestos que podemos
implementar.
![Page 28: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/28.jpg)
Ejemplos
![Page 29: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/29.jpg)
Usos de Gestos
• Cuando implementes gestos en tu aplicación, trata que sean naturales (aquellos que sean comunes en nuestra vida diaria), tratar de romper paradigmas puede ocasionar frustración en los usuarios.
![Page 30: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/30.jpg)
Y el “hover” apá?
• El uso del “hover” en interfaces Web es algo muy común, sin embargo, en interfaces tácHles, debemos de implementar técnicas que cubran esa funcionalidad.
• Los posibles suplentes para el “Hover” son: – En Pantalla – Con un “Tap” o “Swipe” – Ventana separada – Olvidarlo por siempre J
![Page 31: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/31.jpg)
En Pantalla
• Si las acciones que están en el “Hover” son demas i ado impor tan tes , se r í a más conveniente implementarlas en la pantalla.
![Page 32: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/32.jpg)
Con un “Tap” o “Swipe”
• Algunos navegadores susHtuyen el “Hover” con un simple “Tap” en la pantalla, sin embargo, si el elemento Hene una acción en el “Click” diferente al “hover” el usuario deberá dar dos “Taps”, lo que puede resultar frustrante para algunos usuarios.
![Page 33: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/33.jpg)
Swipe
• Las acciones usando el gesto “Swipe” son un poco disciles de encontrar a primera instancia, e implican un mayor esfuerzo de p rog r amac i ón pa r a que f un c i onen correctamente, pero si los implementas de manera correcta y natural, los usuarios lo agradecerán.
![Page 34: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/34.jpg)
En una ventana separada
• Si el contenido dentro de un “Hover” es extenso, es recomendable mover los elementos fuera de una ventana.
![Page 35: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/35.jpg)
Can’t touch this!
• Justo cuando pensabas que ya la libraste; resulta que habrá disposiHvos que no son tácHles, por lo que si quieres que tu aplicación sea híbrida, debes de pensar en una manera de solucionarlo.
• Existe una técnica llamada “Progressive Enhacement” y es precisamente una manera de aplicar accesibilidad a sus siHos.
• Va link de tarea: hLp://bkaprt.com/mf/47
![Page 36: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/36.jpg)
Ready, Set, AcHons!
• UHlizar elementos grandes y bien posicionados. • Aprende el lenguaje tácHl familiarizándote con los gestos tácHles más comunes y como son uHlizados para navegar e interactuar con los objetos y pantallas.
• No le temas a uHlizar Interfaces de Usuarios Naturales (NUI)
• Implementa tus acciones “hover” a la solución más apropiada para tu aplicación o siHo.
• Recuerda considerar interfaces para disposiHvos híbridos al momento de diseñar tus interacciones Web.
![Page 37: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/37.jpg)
Entradas
• El poder de la web siempre ha sido la habilidad del usuario para crear contenido, no solo consumirlo. – UHliza los móviles como oportunidad para que los usuarios generen contenidos donde y cuando sea necesario.
– UHliza eHquetas opHmizadas para móviles para realizar preguntas claras y concisas.
– Aprovecha las ventajas de Hpos de entradas, atributos y máscaras para producir campos sencillos.
– Posiciona los elementos de una manera efecHva. – Busca oportunidades para ir mas allá uHlizando capacidades de los móviles.
![Page 38: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/38.jpg)
Formularios
• La alineación para los elementos de un f o r m u l a r i o e s recomendada que sea verHcal, para que el proceso de llenado sea mas fluido.
![Page 39: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/39.jpg)
Tipos de Entradas para móviles Podemos usar las ventajas de HTML5 para decirle al navegador qué Hpo de teclado queremos mostrar, dependiendo el Hpo de entrada necesaria.
![Page 40: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/40.jpg)
Uso de “Placeholders”
Puedes uHlizar la propiedad “placeholders” para darle pistas al usuario de lo que Hene que escribir. <input type=“text” id=“nombre” placeholder=“Alfredo Juárez”>
![Page 41: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/41.jpg)
Diseño Web Responsivo
• Con las diferencias de tamaños de pantallas creciendo, diseñar de manera responsiva debe de ser fundamental.
• Imagina que tu aplicación será uHlizada por usuarios que trabajan en una laptop, un tablet y/o un smartphone, siempre quieren estar conectados con la aplicación.
![Page 42: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/42.jpg)
CSS Media Queries /* Smartphones (portrait and landscape) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (min-‐device-‐width : 320px) and (max-‐device-‐width : 480px) { /* Styles */ } /* Smartphones (landscape) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (min-‐width : 321px) { /* Styles */ } /* Smartphones (portrait) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (max-‐width : 320px) { /* Styles */ }
/* iPads (portrait and landscape) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (min-‐device-‐width : 768px) and (max-‐device-‐width : 1024px) { /* Styles */ } /* iPads (landscape) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (min-‐device-‐width : 768px) and (max-‐device-‐width : 1024px) and (orientaHon : landscape) { /* Styles */ } /* iPads (portrait) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (min-‐device-‐width : 768px) and (max-‐device-‐width : 1024px) and (orientaHon : portrait) { /* Styles */ }
![Page 43: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/43.jpg)
![Page 44: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/44.jpg)
![Page 45: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/45.jpg)
Conclusiones • Los disposiHvos móviles de hoy en día son las verdaderas
computadoras personales; siempre con nosotros, conectadas a la red, y llenas de nuevas capacidades para realizar las cosas, comunicarse entre nosotros, y hasta para matar el Hempo.
– Tomar ventaja del crecimiento exponencial del uso del internet móvil y encontrar nuevas formas para que la gente use nuestras experiencias web.
– Adaptarse a las condiciones para enfocarse y priorizar los servicios que estamos diseñando y construyendo.
– Usa las capacidades de los disposiHvos móviles para innovar la experiencia del usuario.
– Toma lo que ya sabemos sobre el diseño web y comienza a pensar diferente acerca de las organizaciones, acciones, entradas y diseño.
![Page 46: Desarrollo web movil](https://reader034.fdocument.pub/reader034/viewer/2022052601/558a4802d8b42a89368b46b5/html5/thumbnails/46.jpg)
¡ GRACIAS!
Alfredo Juárez CEO Cloudadmin, Inc TwiTer: @alfrekjv www.cloudadmin.mx