Este documento describe la importancia del desarrollo web para dispositivos móviles. Explica que diseñar para móviles permite aprovechar el crecimiento explosivo del internet móvil y la innovación en nuevas formas. También describe cómo organizar la experiencia del usuario en una aplicación móvil enfocándose en el contenido sobre la navegación y manteniendo la claridad y el enfoque.
El documento proporciona 10 recomendaciones para diseñar sitios web para el iPad, incluyendo hacer un mayor uso del scroll, separar más los enlaces, usar fotografías de alta resolución, dejar espacio para desplazarse, evitar el flash, probar elementos interactivos como desplegables con usuarios reales, e incorporar nuevos estándares para dispositivos táctiles.
Una introducción sobre la evolución de las tecnologías web y los celulares que dan origen a la necesidad de "Crear diseños web para dispositivos móviles".
Diseno web movil - 5 Cosas Que Necesita SaberHector Jayat
El mundo se ha vuelto móvil, y empresas como Apple, Google y Amazon están apostando a que la tendencia es mucho más que una moda pasajera !
En este breve informe , voy a cubrir algunas de las estadísticas más recientes , y revelar los "cinco cosas" que tiene que saber antes de crear un sitio web para móviles para su negocio.
Para la mejora de su presencia móvil ,
Hector Jayat
Uxday2017. SEO para un UX móvil más efectivo. Joe JimenezMultiplica
El documento habla sobre la importancia de la optimización de sitios web para motores de búsqueda (SEO) y la experiencia de usuario (UX), especialmente en dispositivos móviles. Resalta que una buena experiencia y un rápido tiempo de carga son fundamentales para retener a los usuarios y mejorar el posicionamiento. También enfatiza factores como el rendimiento en dispositivos móviles, el uso de AMP, la geolocalización de contenido, el diseño accesible y la importancia de que el SEO y UX vayan de
Este documento resume las presentaciones y discusiones de la conferencia sobre la industria digital interactiva en Estados Unidos. Algunos de los puntos principales discutidos incluyen que la industria está dominada por consultores independientes y pequeñas agencias, que el desarrollo de aplicaciones móviles será un servicio importante en el futuro, y que las agencias deben medir y reportar el retorno de inversión de sus campañas para retener clientes. También se discutió el futuro de las redes sociales, la realidad aumentada y HTML5.
A typical day for a Westside student includes eating breakfast in the school commons, attending classes throughout the morning, and participating in fun activities like sports or hanging out with friends during lunch outside and after school.
Este documento describe las funciones básicas de edición de capas en un programa de edición de video, incluyendo mover el cabezal de lectura, cambiar la velocidad de fotogramas, mostrar u ocultar líneas de contorno y capas, bloquear o desbloquear capas, e insertar o eliminar capas y carpetas de capas.
5 string bluegrass banjo photo album slidesharefenderleo2
Taylor Faulring documented the process of completing a 5-string banjo from start to finish over several photos. The photos show laying out the banjo parts, constructing the pot, applying stain to the neck, installing hardware like the tuners and resonator, drilling nut holes, mounting the neck, and finally setting up the completed banjo.
El documento proporciona 10 recomendaciones para diseñar sitios web para el iPad, incluyendo hacer un mayor uso del scroll, separar más los enlaces, usar fotografías de alta resolución, dejar espacio para desplazarse, evitar el flash, probar elementos interactivos como desplegables con usuarios reales, e incorporar nuevos estándares para dispositivos táctiles.
Una introducción sobre la evolución de las tecnologías web y los celulares que dan origen a la necesidad de "Crear diseños web para dispositivos móviles".
Diseno web movil - 5 Cosas Que Necesita SaberHector Jayat
El mundo se ha vuelto móvil, y empresas como Apple, Google y Amazon están apostando a que la tendencia es mucho más que una moda pasajera !
En este breve informe , voy a cubrir algunas de las estadísticas más recientes , y revelar los "cinco cosas" que tiene que saber antes de crear un sitio web para móviles para su negocio.
Para la mejora de su presencia móvil ,
Hector Jayat
Uxday2017. SEO para un UX móvil más efectivo. Joe JimenezMultiplica
El documento habla sobre la importancia de la optimización de sitios web para motores de búsqueda (SEO) y la experiencia de usuario (UX), especialmente en dispositivos móviles. Resalta que una buena experiencia y un rápido tiempo de carga son fundamentales para retener a los usuarios y mejorar el posicionamiento. También enfatiza factores como el rendimiento en dispositivos móviles, el uso de AMP, la geolocalización de contenido, el diseño accesible y la importancia de que el SEO y UX vayan de
Este documento resume las presentaciones y discusiones de la conferencia sobre la industria digital interactiva en Estados Unidos. Algunos de los puntos principales discutidos incluyen que la industria está dominada por consultores independientes y pequeñas agencias, que el desarrollo de aplicaciones móviles será un servicio importante en el futuro, y que las agencias deben medir y reportar el retorno de inversión de sus campañas para retener clientes. También se discutió el futuro de las redes sociales, la realidad aumentada y HTML5.
A typical day for a Westside student includes eating breakfast in the school commons, attending classes throughout the morning, and participating in fun activities like sports or hanging out with friends during lunch outside and after school.
Este documento describe las funciones básicas de edición de capas en un programa de edición de video, incluyendo mover el cabezal de lectura, cambiar la velocidad de fotogramas, mostrar u ocultar líneas de contorno y capas, bloquear o desbloquear capas, e insertar o eliminar capas y carpetas de capas.
5 string bluegrass banjo photo album slidesharefenderleo2
Taylor Faulring documented the process of completing a 5-string banjo from start to finish over several photos. The photos show laying out the banjo parts, constructing the pot, applying stain to the neck, installing hardware like the tuners and resonator, drilling nut holes, mounting the neck, and finally setting up the completed banjo.
Las 25 técnicas infalibles para tener un mejor sitio móvil | GoogleNicolas Valenzuela
El documento proporciona consejos para optimizar un sitio web para dispositivos móviles, incluyendo (1) garantizar una navegación simple, (2) hacer que el logo lleve a la página de inicio, y (3) mantener menús breves y destacar los llamados a la acción. El objetivo es mejorar la experiencia del usuario en dispositivos móviles al facilitar la navegación y enfocarse en lo que el usuario busca.
El documento proporciona consejos para optimizar un sitio web para dispositivos móviles, incluyendo (1) garantizar una navegación simple, (2) hacer que el logo lleve a la página de inicio, y (3) mantener menús breves y destacar los llamados a la acción. El objetivo es mejorar la experiencia del usuario móvil al proporcionar contenido y funciones relevantes de manera rápida y eficiente.
Este documento proporciona una guía sobre los principios básicos de la usabilidad en sitios web. Explica que un buen sitio web debe anticipar las necesidades de los usuarios, darles autonomía y control, usar colores con precaución, ser consistente con las expectativas de los usuarios, centrarse en la productividad del usuario, permitir deshacer acciones, optimizar el tiempo de latencia y requerir poco aprendizaje. También cubre temas como la legibilidad, el seguimiento de las acciones del usuario y la necesidad de que un sit
Biblioapps, o cómo crear aplicaciones móviles para bibliotecasSocialBiblio
El documento habla sobre cómo las bibliotecas pueden crear aplicaciones móviles para ofrecer sus servicios a los usuarios. Explica las diferentes opciones como sitios web adaptables, webapps híbridas y aplicaciones nativas. Ofrece consejos sobre el diseño, desarrollo y contenido de las aplicaciones móviles para bibliotecas. Recomienda evaluar las necesidades de los usuarios y decidir qué servicios serían útiles ofrecer a través de una aplicación para mejorar la experiencia de los clientes de la biblioteca.
El documento habla sobre los principios básicos de usabilidad web según Steve Krug. Krug argumenta que las páginas deben explicarse por sí mismas y ser intuitivas para que los usuarios no tengan que pensar demasiado. También señala que los usuarios escanean páginas en lugar de leerlas, por lo que es importante jerarquizar la información visualmente. Por último, recomienda eliminar la mitad del contenido de cada página para enfocarse en lo esencial.
UX/ UI Web y su provecho para la Publicidad y el Marketing INTECCarlos Cochon
Introducción y aspectos a considerar en el diseño web enfocado a experiencias de usuario concretas, ecommerce y marketing digital.
Junio 2015. Parte del Diplomado de Marketing Digital de la Universidad INTEC.
Este documento resume los tipos de aplicaciones móviles, incluyendo aplicaciones nativas, web y híbridas. Explica que las aplicaciones sirven para ampliar las capacidades de los dispositivos y menciona ejemplos como WhatsApp, Spotify, Glovo y YouTube. También describe a iBuildApp como una plataforma que permite crear aplicaciones sin experiencia de programación.
Uxday2017.Elaboración de user personas para mobile design. Martha MontelongoMultiplica
Este documento describe la importancia de crear perfiles de usuario o "personas" para el diseño centrado en el usuario de aplicaciones y sitios web móviles. Se enfatiza que las personas deben ir más allá de los datos demográficos simples e incluir detalles sobre las metas, motivaciones, frustraciones y comportamientos típicos de los usuarios, así como considerar factores como la edad, habilidades, contexto de uso y nivel de conocimiento tecnológico. Crear personas detalladas ayuda a los equipos de diseño a mant
El documento discute el desarrollo de aplicaciones para dispositivos móviles. Explica que es importante separar el contenido de la presentación usando XHTML y hojas de estilo para adaptarse a diferentes dispositivos. También destaca la necesidad de evitar depender de imágenes y archivos grandes para que las páginas se carguen rápido en dispositivos móviles con conexiones lentas. Finalmente, enfatiza la importancia de probar aplicaciones en los dispositivos reales lo antes posible para identificar y resolver problemas.
Clínica de experiencia de usuario para aplicaciones móvilesMauricio Angulo
Presentación sobre recomendaciones para mejorar y optimizar el diseño, usabilidad y experiencia de usuario de aplicaciones para dispositivos móviles (aplica a cualquier plataforma)
Las 6 características básicas de diseño, para ser encontrado en internet, y obtener un resultado. Administración de contenido, responsivo, intuitivo, conciso, código y etiquetas, y facilidad de contacto.
La empresa desea mejorar su posicionamiento móvil. Su web móvil de 2011 es obsoleta y no permite generar contenido para móviles de forma flexible. La empresa tiene presencia en Europa occidental y enfrenta el mismo problema en otros países. Buscan una solución que funcione para todos los países.
Este documento presenta una introducción al mundo digital y las consideraciones que las empresas deben tener para prepararse para este entorno. Resume algunos hitos clave en el desarrollo de Internet como la llegada de la web en 1996 y los motores de búsqueda en 2000. Luego, destaca 7 consideraciones para las empresas en la web como la necesidad de entender las tecnologías sin saberlo todo y actuar con flexibilidad. Finalmente, enfatiza la importancia de escuchar a los usuarios y trabajar para satisfacer sus necesidades.
Responsive, móvil o app: ¿Por dónde empezar?lMultiplica
A diario desde Multiplica nos encontramos en reuniones con clientes o en talleres o cursos con probablemente las mismas preguntas que te han llevado a empezar a leer este informe: ¿Qué presencia debemos tener en mobile?. ¿Un site móvil, un site responsive o una app?. ¿Qué potenciar o por dónde empezar?.
En esta presentación intentamos dar adecuada respuesta a tales preguntas.
El documento habla sobre la usabilidad web. Define la usabilidad como la facilidad con la que los usuarios pueden usar una herramienta para lograr un objetivo. Explica los principios básicos de usabilidad como la facilidad de aprendizaje, uso y flexibilidad. También describe los beneficios de tener una alta usabilidad como aumentar la tasa de conversión y satisfacción de los usuarios.
Dia de la usabillidad 2013 - Clínica de UX para appsMauricio Angulo
Este documento presenta una guía de 9 principios para mejorar la experiencia de usuario (UX) en aplicaciones móviles. Los principios incluyen asegurar que la aplicación sea visual, lógica, predecible, clara, flexible, generadora de gozo, colaborativa y que ayude al usuario. Cada principio se ilustra con ejemplos concretos de cómo implementarlo en el diseño de la interfaz y la funcionalidad de la aplicación.
Las 25 técnicas infalibles para tener un mejor sitio móvil | GoogleNicolas Valenzuela
El documento proporciona consejos para optimizar un sitio web para dispositivos móviles, incluyendo (1) garantizar una navegación simple, (2) hacer que el logo lleve a la página de inicio, y (3) mantener menús breves y destacar los llamados a la acción. El objetivo es mejorar la experiencia del usuario en dispositivos móviles al facilitar la navegación y enfocarse en lo que el usuario busca.
El documento proporciona consejos para optimizar un sitio web para dispositivos móviles, incluyendo (1) garantizar una navegación simple, (2) hacer que el logo lleve a la página de inicio, y (3) mantener menús breves y destacar los llamados a la acción. El objetivo es mejorar la experiencia del usuario móvil al proporcionar contenido y funciones relevantes de manera rápida y eficiente.
Este documento proporciona una guía sobre los principios básicos de la usabilidad en sitios web. Explica que un buen sitio web debe anticipar las necesidades de los usuarios, darles autonomía y control, usar colores con precaución, ser consistente con las expectativas de los usuarios, centrarse en la productividad del usuario, permitir deshacer acciones, optimizar el tiempo de latencia y requerir poco aprendizaje. También cubre temas como la legibilidad, el seguimiento de las acciones del usuario y la necesidad de que un sit
Biblioapps, o cómo crear aplicaciones móviles para bibliotecasSocialBiblio
El documento habla sobre cómo las bibliotecas pueden crear aplicaciones móviles para ofrecer sus servicios a los usuarios. Explica las diferentes opciones como sitios web adaptables, webapps híbridas y aplicaciones nativas. Ofrece consejos sobre el diseño, desarrollo y contenido de las aplicaciones móviles para bibliotecas. Recomienda evaluar las necesidades de los usuarios y decidir qué servicios serían útiles ofrecer a través de una aplicación para mejorar la experiencia de los clientes de la biblioteca.
El documento habla sobre los principios básicos de usabilidad web según Steve Krug. Krug argumenta que las páginas deben explicarse por sí mismas y ser intuitivas para que los usuarios no tengan que pensar demasiado. También señala que los usuarios escanean páginas en lugar de leerlas, por lo que es importante jerarquizar la información visualmente. Por último, recomienda eliminar la mitad del contenido de cada página para enfocarse en lo esencial.
UX/ UI Web y su provecho para la Publicidad y el Marketing INTECCarlos Cochon
Introducción y aspectos a considerar en el diseño web enfocado a experiencias de usuario concretas, ecommerce y marketing digital.
Junio 2015. Parte del Diplomado de Marketing Digital de la Universidad INTEC.
Este documento resume los tipos de aplicaciones móviles, incluyendo aplicaciones nativas, web y híbridas. Explica que las aplicaciones sirven para ampliar las capacidades de los dispositivos y menciona ejemplos como WhatsApp, Spotify, Glovo y YouTube. También describe a iBuildApp como una plataforma que permite crear aplicaciones sin experiencia de programación.
Uxday2017.Elaboración de user personas para mobile design. Martha MontelongoMultiplica
Este documento describe la importancia de crear perfiles de usuario o "personas" para el diseño centrado en el usuario de aplicaciones y sitios web móviles. Se enfatiza que las personas deben ir más allá de los datos demográficos simples e incluir detalles sobre las metas, motivaciones, frustraciones y comportamientos típicos de los usuarios, así como considerar factores como la edad, habilidades, contexto de uso y nivel de conocimiento tecnológico. Crear personas detalladas ayuda a los equipos de diseño a mant
El documento discute el desarrollo de aplicaciones para dispositivos móviles. Explica que es importante separar el contenido de la presentación usando XHTML y hojas de estilo para adaptarse a diferentes dispositivos. También destaca la necesidad de evitar depender de imágenes y archivos grandes para que las páginas se carguen rápido en dispositivos móviles con conexiones lentas. Finalmente, enfatiza la importancia de probar aplicaciones en los dispositivos reales lo antes posible para identificar y resolver problemas.
Clínica de experiencia de usuario para aplicaciones móvilesMauricio Angulo
Presentación sobre recomendaciones para mejorar y optimizar el diseño, usabilidad y experiencia de usuario de aplicaciones para dispositivos móviles (aplica a cualquier plataforma)
Las 6 características básicas de diseño, para ser encontrado en internet, y obtener un resultado. Administración de contenido, responsivo, intuitivo, conciso, código y etiquetas, y facilidad de contacto.
La empresa desea mejorar su posicionamiento móvil. Su web móvil de 2011 es obsoleta y no permite generar contenido para móviles de forma flexible. La empresa tiene presencia en Europa occidental y enfrenta el mismo problema en otros países. Buscan una solución que funcione para todos los países.
Este documento presenta una introducción al mundo digital y las consideraciones que las empresas deben tener para prepararse para este entorno. Resume algunos hitos clave en el desarrollo de Internet como la llegada de la web en 1996 y los motores de búsqueda en 2000. Luego, destaca 7 consideraciones para las empresas en la web como la necesidad de entender las tecnologías sin saberlo todo y actuar con flexibilidad. Finalmente, enfatiza la importancia de escuchar a los usuarios y trabajar para satisfacer sus necesidades.
Responsive, móvil o app: ¿Por dónde empezar?lMultiplica
A diario desde Multiplica nos encontramos en reuniones con clientes o en talleres o cursos con probablemente las mismas preguntas que te han llevado a empezar a leer este informe: ¿Qué presencia debemos tener en mobile?. ¿Un site móvil, un site responsive o una app?. ¿Qué potenciar o por dónde empezar?.
En esta presentación intentamos dar adecuada respuesta a tales preguntas.
El documento habla sobre la usabilidad web. Define la usabilidad como la facilidad con la que los usuarios pueden usar una herramienta para lograr un objetivo. Explica los principios básicos de usabilidad como la facilidad de aprendizaje, uso y flexibilidad. También describe los beneficios de tener una alta usabilidad como aumentar la tasa de conversión y satisfacción de los usuarios.
Dia de la usabillidad 2013 - Clínica de UX para appsMauricio Angulo
Este documento presenta una guía de 9 principios para mejorar la experiencia de usuario (UX) en aplicaciones móviles. Los principios incluyen asegurar que la aplicación sea visual, lógica, predecible, clara, flexible, generadora de gozo, colaborativa y que ayude al usuario. Cada principio se ilustra con ejemplos concretos de cómo implementarlo en el diseño de la interfaz y la funcionalidad de la aplicación.
HPE presenta una competició destinada a estudiants, que busca fomentar habilitats tecnològiques i promoure la innovació en un entorn STEAM (Ciència, Tecnologia, Enginyeria, Arts i Matemàtiques). A través de diverses fases, els equips han de resoldre reptes mensuals basats en àrees com algorísmica, desenvolupament de programari, infraestructures tecnològiques, intel·ligència artificial i altres tecnologies. Els millors equips tenen l'oportunitat de desenvolupar un projecte més gran en una fase presencial final, on han de crear una solució concreta per a un conflicte real relacionat amb la sostenibilitat. Aquesta competició promou la inclusió, la sostenibilitat i l'accessibilitat tecnològica, alineant-se amb els Objectius de Desenvolupament Sostenible de l'ONU.
Catalogo general tarifas 2024 Vaillant. Amado Salvador Distribuidor Oficial e...AMADO SALVADOR
Descarga el Catálogo General de Tarifas 2024 de Vaillant, líder en tecnología para calefacción, ventilación y energía solar térmica y fotovoltaica. En Amado Salvador, como distribuidor oficial de Vaillant, te ofrecemos una amplia gama de productos de alta calidad y diseño innovador para tus proyectos de climatización y energía.
Descubre nuestra selección de productos Vaillant, incluyendo bombas de calor altamente eficientes, fancoils de última generación, sistemas de ventilación de alto rendimiento y soluciones de energía solar fotovoltaica y térmica para un rendimiento óptimo y sostenible. El catálogo de Vaillant 2024 presenta una variedad de opciones en calderas de condensación que garantizan eficiencia energética y durabilidad.
Con Vaillant, obtienes más que productos de climatización: control avanzado y conectividad para una gestión inteligente del sistema, acumuladores de agua caliente de gran capacidad y sistemas de aire acondicionado para un confort total. Confía en la fiabilidad de Amado Salvador como distribuidor oficial de Vaillant, y en la resistencia de los productos Vaillant, respaldados por años de experiencia e innovación en el sector.
En Amado Salvador, distribuidor oficial de Vaillant en Valencia, no solo proporcionamos productos de calidad, sino también servicios especializados para profesionales, asegurando que tus proyectos cuenten con el mejor soporte técnico y asesoramiento. Descarga nuestro catálogo y descubre por qué Vaillant es la elección preferida para proyectos de climatización y energía en Amado Salvador.
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador ValenciaAMADO SALVADOR
Descubre el catálogo general de la gama de productos de refrigeración del fabricante de electrodomésticos Miele, presentado por Amado Salvador distribuidor oficial Miele en Valencia. Como distribuidor oficial de electrodomésticos Miele, Amado Salvador ofrece una amplia selección de refrigeradores, congeladores y soluciones de refrigeración de alta calidad, resistencia y diseño superior de esta marca.
La gama de productos de Miele se caracteriza por su innovación tecnológica y eficiencia energética, garantizando que cada electrodoméstico no solo cumpla con las expectativas, sino que las supere. Los refrigeradores Miele están diseñados para ofrecer un rendimiento óptimo y una conservación perfecta de los alimentos, con características avanzadas como la tecnología de enfriamiento Dynamic Cooling, sistemas de almacenamiento flexible y acabados premium.
En este catálogo, encontrarás detalles sobre los distintos modelos de refrigeradores y congeladores Miele, incluyendo sus especificaciones técnicas, características destacadas y beneficios para el usuario. Amado Salvador, como distribuidor oficial de electrodomésticos Miele, garantiza que todos los productos cumplen con los más altos estándares de calidad y durabilidad.
Explora el catálogo completo y encuentra el refrigerador Miele perfecto para tu hogar con Amado Salvador, el distribuidor oficial de electrodomésticos Miele.
La inteligencia artificial sigue evolucionando rápidamente, prometiendo transformar múltiples aspectos de la sociedad mientras plantea importantes cuestiones que requieren una cuidadosa consideración y regulación.
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...AMADO SALVADOR
El catálogo general de electrodomésticos Teka presenta una amplia gama de productos de alta calidad y diseño innovador. Como distribuidor oficial Teka, Amado Salvador ofrece soluciones en electrodomésticos Teka que destacan por su tecnología avanzada y durabilidad. Este catálogo incluye una selección exhaustiva de productos Teka que cumplen con los más altos estándares del mercado, consolidando a Amado Salvador como el distribuidor oficial Teka.
Explora las diversas categorías de electrodomésticos Teka en este catálogo, cada una diseñada para satisfacer las necesidades de cualquier hogar. Amado Salvador, como distribuidor oficial Teka, garantiza que cada producto de Teka se distingue por su excelente calidad y diseño moderno.
Amado Salvador, distribuidor oficial Teka en Valencia. La calidad y el diseño de los electrodomésticos Teka se reflejan en cada página del catálogo, ofreciendo opciones que van desde hornos, placas de cocina, campanas extractoras hasta frigoríficos y lavavajillas. Este catálogo es una herramienta esencial para inspirarse y encontrar electrodomésticos de alta calidad que se adaptan a cualquier proyecto de diseño.
En Amado Salvador somos distribuidor oficial Teka en Valencia y ponemos atu disposición acceso directo a los mejores productos de Teka. Explora este catálogo y encuentra la inspiración y los electrodomésticos necesarios para equipar tu hogar con la garantía y calidad que solo un distribuidor oficial Teka puede ofrecer.
3. ¿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.
5. 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.
6. 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.
7. 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.
8. ¿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.
9. 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.
10. Tipos
de
Usos
• Búsqueda
(Información
urgente,
local):
Necesito
e n c o n t r a r
u n a
r e s p u e s t a
a
a l g o
a h o r a !
–
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.
11. Algunos
Ejemplos
Tarea
Urgente
(Micro-‐Tasking)
www.cloudadmin.mx
Búsqueda
de
información
(Local)
www.dnlspots.com
12. 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.
13. 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.
14. 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.
15. 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.
16. 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!
17. 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.
18. ¡Menos
es
mas!
Si
la
pantalla
es
pequeña,
¿por
qué
no
hacer
todo
más
pequeño
para
que
quepa
en
ella?
19. ¡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.
20. 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.
21. 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.
22. Ejemplos
El
botón
de
cancelar
está
muy
pegado
al
botón
de
Login.
¿Dónde
quieres
que
toque?
23. 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.
25. 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.
26. 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.
29. 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.
30. 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
31. En
Pantalla
• Si
las
acciones
que
están
en
el
“Hover”
son
d e m a s i a d o
i m p o r t a n t e s ,
s e r í a
m á s
conveniente
implementarlas
en
la
pantalla.
32. 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.
33. Swipe
• Las
acciones
usando
el
gesto
“Swipe”
son
un
poco
disciles
de
encontrar
a
primera
instancia,
e
implican
un
mayor
esfuerzo
de
p r o g r a m a c i ó n
p a r a
q u e
f u n c i o n e n
correctamente,
pero
si
los
implementas
de
manera
correcta
y
natural,
los
usuarios
lo
agradecerán.
34. En
una
ventana
separada
• Si
el
contenido
dentro
de
un
“Hover”
es
extenso,
es
recomendable
mover
los
elementos
fuera
de
una
ventana.
35. 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
36. 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.
37. 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.
38. 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.
39. 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.
40. 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”>
41. 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.
42. 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
*/
}
43.
44.
45. 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.