Desarrollo de Aplicaciones Web utilizando Responsive Web Design.

1. Desarrollo
Web
para
Móviles
Alfredo
Juárez
CEO
Cloudadmin,
Inc

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.

4. Crecimiento
Exponencial
Fuentes:
hLp://bkaprt.com/mf/11
y
hLp://bkaprt.com/mf/12

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.

24. Gestos

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.

27. Ejemplos
de
acciones
de
usuario
y
gestos
que
podemos
implementar.

28. Ejemplos

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
*/
}

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.

46. ¡
GRACIAS!
Alfredo
Juárez
CEO
Cloudadmin,
Inc
TwiTer:
@alfrekjv
www.cloudadmin.mx