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".
2. Agenda
1.
Historia y evolución de la web
2.
Diseño web para móviles
3.
Razones para tener una web móvil
4.
Importancia de la web móvil
5.
Diferencias: Desktop y Móvil
6.
Proceso de desarrollo para móvil
7.
Usabilidad: Móvil vs Responsive
8.
Herramientas de desarrollo móvil
9.
Video
3. Agenda
1.
Historia y evolución de la web
2.
Diseño web para móviles
3.
Razones para tener una web móvil
4.
Importancia de la web móvil
5.
Diferencias: Desktop y Móvil
6.
Proceso de desarrollo para móvil
7.
Usabilidad: Móvil vs Responsive
8.
Herramientas de desarrollo móvil
9.
Video
4. 1. Historia y evolución de la web
Todo lo que vemos, usamos y conocemos es resultado de una
evolución constante.
5. 1. Historia y evolución de la web
Todo lo que vemos, usamos y conocemos es resultado de una
evolución constante.
El mundo está evolucionando.
6. 1. Historia y evolución de la web
Todo lo que vemos, usamos y conocemos es resultado de una
evolución constante.
El mundo está evolucionando.
Las tecnologías están evolucionando.
7. 1. Historia y evolución de la web
Todo lo que vemos, usamos y conocemos es resultado de una
evolución constante.
El mundo está evolucionando.
Las tecnologías están evolucionando.
Las personas / usuarios estamos evolucionando.
8. 1. Historia y evolución de la web
Todo lo que vemos, usamos y conocemos es resultado de una
evolución constante.
El mundo está evolucionando.
Las tecnologías están evolucionando.
Las personas / usuarios estamos evolucionando.
Las
necesidades están evolucionando.
10. Evolución de la web: 1.0
•
•
•
•
Páginas informativas, estáticas.
Contenido casi nunca se actualizaba.
El usuario no podía interactuar en el sitio.
Sólo el webmaster generaba contenido para los usuarios.
11. Evolución de la web: 2.0
• Páginas dinámicas, contenido actualizado constantemente.
• Llamado también web social por el entorno colaborativo.
• Los usuarios generando contenido para los usuarios.
13. Evolución de la web: 3.0
Web Semántica
semántica
viene del griego semantikos
lo que tiene significado
14. Evolución de la web: 3.0
Web Semántica
• Se está desarrollado bajo la dirección de Tim
Bernés-Lee. http://es.wikipedia.org/wiki/Tim_Berners-Lee
• Actualmente la información publicada en internet
no es entendible por los ordenadores.
• Se busca dar significado a las páginas web no sólo
para los humanos, sino también para las máquinas.
Ej. Buscar “caña brava” en google, sección videos
semántica (del griego semantikos, "lo que tiene significado")
23. Tecnología celular: 2G
• Era digital, blanco y negro
• Pantalla azul, verde
• Mensajes de texto
• Peso de unos 200 gramos
• Costo, menos de S/. 100
• Internet limitado
29. Tecnología celular: 4G
Enfocado a la
velocidad.
La tecnología 4G LTE (Long Term Evolution) es una nueva
tecnología celular que permite experimentar una velocidad de
navegación hasta 10 veces más rápida a la actual tecnología 3G.
¿Estará disponible en Perú?
31. Tecnología celular: 4G
Vamos a ver un video sobre
la visión de Nokia
para los dispositivos móviles
http://youtu.be/IX-gTobCJHs
Visión Nokia Dispositivos Móviles.mp4
https://research.nokia.com/morph
32. Agenda
1.
Historia y evolución de la web
2.
Diseño web para móviles
3.
Razones para tener una web móvil
4.
Importancia de la web móvil
5.
Diferencias: Desktop y Móvil
6.
Proceso de desarrollo para móvil
7.
Usabilidad: Móvil vs Responsive
8.
Herramientas de desarrollo móvil
9.
Video
33. 2. Diseño web para móviles
• Hemos visto cómo evolucionó la tecnología web hasta lo que
conocemos hoy en día, HTML5, CSS3, jQuery, Ajax, etc, etc.
• Hemos visto cómo evolucionó la tecnología celular y
dispositivos móviles hasta lo que conocemos hoy en día,
Smartphone, tablets, etc, etc.
• Llega el momento en que estás dos tecnologías se encuentran
y nace una necesidad…
35. 2. Diseño web para móviles
ver contenidos WEB desde los móviles
36. 2. Diseño web para móviles
¿De qué estamos hablando?
De que el usuario debe de poder navegar, buscar, usar tu
información sin problemas desde su dispositivo móvil.
Tu información debe estar optimizada, debe ofrecer una fácil
navegación, ordenada, agrupada, seleccionada…. en otras
palabras debes de mostrar
sólo lo más importante para el usuario.
37. 2. Diseño web para móviles
Ver contenidos
WEB desde los
móviles…
En cualquier
momento…
38. Ejercicio práctico 1: saquen sus celulares
Primero:
1.- Ingresen a la página www.indecopi.gob.pe
2.- Quién me dice cuales son los servicios gratuitos de indecopi.
3.- Quién me dice la dirección de las oficinas de indecopi.
39. Ejercicio práctico 1: saquen sus celulares
Primero:
1.- Ingresen a la página www.indecopi.gob.pe
2.- Quién me dice cuales son los servicios gratuitos de indecopi.
3.- Quién me dice la dirección de las oficinas de indecopi.
Conclusión:
Difícil de encontrar la información, NO tiene versión móvil.
40. Ejercicio práctico 2: saquen sus celulares
Primero:
1.- Ingresen a la página www.sunat.gob.pe
2.- Quién me dice el horario de atención de los día sábados.
3.- Quién me dice el proceso para obtener el RUC.
41. Ejercicio práctico 2: saquen sus celulares
Primero:
1.- Ingresen a la página www.sunat.gob.pe
2.- Quién me dice el horario de atención de los día sábados.
3.- Quién me dice el proceso para obtener el RUC.
Conclusión:
• Difícil de encontrar la información. ¿Tendrá versión móvil? Sí.
• Ingresen a la página m.sunat.gob.pe
42. Ejercicio práctico 3: saquen sus celulares
Primero:
1.- Ingresen a la página elcomercio.pe
2.- Quién me dice la primera noticia de la “sección economía”.
43. Ejercicio práctico 3: saquen sus celulares
Primero:
1.- Ingresen a la página elcomercio.pe
2.- Quién me dice la primera noticia de la “sección economía”.
Conclusión:
• Tiene versión móvil y es detectado automáticamente.
• Conseguimos la información casi al instante.
44. Ejercicios prácticos: observaciones
1. ¿Se puede navegar en la web indecopi desde el móvil?
2. ¿Se puede navegar en la web de la sunat cuando ingresamos
con el dominio principal?
3. ¿Se puede navegar en la web de la sunat cuando ingresamos
con el dominio para móviles?
4. ¿Se puede navegar en la web del comercio desde el móvil
cuando ingresamos con el dominio principal? ¿Por qué?
45. Ejercicios prácticos: observaciones
1. ¿Se puede navegar en la web indecopi desde el móvil?
2. ¿Se puede navegar en la web de la sunat cuando ingresamos
con el dominio principal?
3. ¿Se puede navegar en la web de la sunat cuando ingresamos
con el dominio para móviles?
4. ¿Se puede navegar en la web del comercio desde el móvil
cuando ingresamos con el dominio principal? ¿Por qué?
5. Ingresen a
peru.com y terra.com.pe
46. 2. Diseño web para móviles
WEB + SMARTPHONE + NECESIDAD DEL USUARIO
=
DISEÑO WEB MÓVIL
o lo que yo diría: nace la necesidad de
CREAR DISEÑOS WEB para DISPOSITIVOS MÓVILES
48. Agenda
1.
Historia y evolución de la web
2.
Diseño web para móviles
3.
Razones para tener una web móvil
4.
Importancia de la web móvil
5.
Diferencias: Desktop y Móvil
6.
Proceso de desarrollo para móvil
7.
Usabilidad: Móvil vs Responsive
8.
Herramientas de desarrollo móvil
9.
Video
49. 3. Razones para tener una web móvil
Todas las personas en todo el mundo
usan móviles.
• Sólo en Estados Unidos hay más de 100 millones de
usuarios de teléfonos inteligentes.
• El 95% de los usuarios buscan información de
empresas locales.
50. 3. Razones para tener una web móvil
Clientes potenciales hoy en día buscan
información desde sus móviles.
• 1 de cada 3 personas buscan un negocio en Google
desde sus dispositivos móviles.
• 65% de las búsquedas móviles pueden llamar.
• 59% de lo que llaman pueden visitar el negocio local.
51. 3. Razones para tener una web móvil
Usuarios que consiguen resultados en
los móviles toman decisiones.
• 9 de cada 10 búsquedas conducen a una acción.
• 70% de usuarios actúan en la primera hora.
• Más del 50% de acciones de los usuarios conducen a
una compra.
52. 3. Razones para tener una web móvil
Los usuarios quieren tener acceso
rápido y fácil a la información para
luego comprar.
• Imágenes optimizadas.
• Direcciones y horarios para saber ¿dónde y cuándo ir?
• Esperan ver esta información en la primera página.
53. 3. Razones para tener una web móvil
Usuarios y/o clientes pueden regresar
con tu competencia si no tienes
presencia móvil.
• Al cargar la versión de escritorio en el móvil es difícil de
navegar.
• Imagínate seleccionar un enlace desde el móvil.
54. 3. Razones para tener una web móvil
Si tienes una MALA presencia móvil tus
clientes buscarán otras alternativas.
• Carga demasiado lento.
• La información clave es difícil de encontrar.
• El texto es demasiado pequeño, difícil de navegar.
• El sitio no es amigable para los “dedos”.
55. 3. Razones para tener una web móvil
Si tienes una BUENA presencia móvil
tus clientes confiarán en ti.
• Carga en menos de 5 segundos.
• La información clave es fácil de encontrar.
• El texto es demasiado grande y fácil de leer.
• El sitio es amigable para los “dedos” pulgar feliz
56. 3. Razones para tener una web móvil
Resultados inmediatos.
• Si no tienes una web móvil, estás perdiendo dinero.
• Si tienes una web móvil, más usuarios encontrarán tus
productos, servicios… tu información.
• Los usuarios móviles quieren las cosas, ahora mismo!!!
• Más clientes, más ventas, más dinero en tu bolsillo.
57. 3. Razones para tener una web móvil
Porque es el
futuro
de las
comunicaciones
58. 3. Razones para tener una web móvil
Todo en la vida son
negocios, acuerdos…
¿
NFC
Near Field Communication
?
59. Agenda
1.
Historia y evolución de la web
2.
Diseño web para móviles
3.
Razones para tener una web móvil
4.
Importancia de la web móvil
5.
Diferencias: Desktop y Móvil
6.
Proceso de desarrollo móvil
7.
Usabilidad: Móvil vs Responsive
8.
Herramientas de desarrollo móvil
9.
Video
63. Agenda
1.
Historia y evolución de la web
2.
Diseño web para móviles
3.
Razones para tener una web móvil
4.
Importancia de la web móvil
5.
Diferencias: Desktop y Móvil
6.
Proceso de desarrollo para móvil
7.
Usabilidad: Móvil vs Responsive
8.
Herramientas de desarrollo móvil
9.
Video
66. Agenda
1.
Historia y evolución de la web
2.
Diseño web para móviles
3.
Razones para tener una web móvil
4.
Importancia de la web móvil
5.
Diferencias: desktop y Móvil
6.
Proceso de desarrollo para móvil
7.
Usabilidad: Móvil vs Responsive
8.
Herramientas de desarrollo móvil
9.
Video
67. 6. Proceso de desarrollo para móvil
El plan de trabajo
68. 6. Proceso de desarrollo para móvil
El plan de trabajo
69. 6. Proceso de desarrollo para móvil
El plan de trabajo
En esta etapa se piensa en:
70. 6. Proceso de desarrollo para móvil
Arquitectura de información
71. 6. Proceso de desarrollo para móvil
Layouts, estructuras para el contenido
72. 6. Proceso de desarrollo para móvil
Layouts, estructuras para el contenido
73. 6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
74. 6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
más pixeles… imagen más nítida
75. 6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
Pantalla más grande… mas distorsión en imagen
76. 6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
77. 6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
78. 6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
79. 6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
84. 6. Proceso de desarrollo para móvil
Diseños visuales
85. 6. Proceso de desarrollo para móvil
Diseños visuales
86. 6. Proceso de desarrollo para móvil
Diseños visuales
87. 6. Proceso de desarrollo para móvil
Diseños visuales
88. Agenda
1.
Historia y evolución de la web
2.
Diseño web para móviles
3.
Razones para tener una web móvil
4.
Importancia de la web móvil
5.
Diferencias: Desktop y Móvil
6.
Proceso de desarrollo para móvil
7.
Usabilidad: Móvil vs Responsive
8.
Herramientas de desarrollo móvil
9.
Enlaces de interés
10. Video
90. 7. Usabilidad: Móvil vs Responsive
Diseño Móvil
• Pensado exclusivamente para dispositivos móviles.
• Cuando un usuario acceda a su web va ver un diseño
desarrollado para el dispositivo, una experiencia perfecta.
Objetivo
• Que el usuario pueda visualizar su web desde el móvil, que sea
fácil de usar, rápida de cargar y muy intuitiva.
91. 7. Usabilidad: Móvil vs Responsive
Ventajas del Diseño Móvil
• Envía sólo contenido adaptado para el dispositivo.
• La velocidad de carga de la página es mejor.
• Podemos crear tantos diseños como dispositivos queramos
diferenciar. Para Android, para iPhone, etc.
92. 7. Usabilidad: Móvil vs Responsive
Ventajas del Diseño Móvil
• Envía sólo contenido adaptado para el dispositivo.
• La velocidad de carga de la página es mejor.
• Podemos crear tantos diseños como dispositivos queramos
diferenciar. Para Android, para iPhone, etc.
Desventaja
• Es que necesitaremos realizar un diseño extra por cada
dispositivo por lo que se duplica el trabajo.
93. 7. Usabilidad: Móvil vs Responsive
Diseño Responsive
• Cuando usuario acceda a su web va ver un diseño adaptado
para el dispositivo, no siempre es una experiencia perfecta…
depende del contenido y tipo de información del sitio.
• Puede haber algunos problemas con ciertos elementos web
como formularios… login, registro, contacto, pedidos, etc.
Objetivo
• Que el usuario pueda visualizar su web desde cualquier
dispositivo móvil.
94. 7. Usabilidad: Móvil vs Responsive
Ventajas del Diseño Responsive
• Sólo necesitaremos un único diseño para todo el sitio.
• El diseño será el mismo para cualquier dispositivo.
• El coste de desarrollo es menor que el de un sitio móvil.
95. 7. Usabilidad: Móvil vs Responsive
Ventajas del Diseño Responsive
• Sólo necesitaremos un único diseño para todo el sitio.
• El diseño será el mismo para cualquier dispositivo.
• El coste de desarrollo es menor que el de un sitio móvil.
Desventajas
• No podremos definir una estrategia móvil independiente.
• Estaremos sobrecargando la transferencia de datos del usuario
al enviar solicitar información que no se va visualizar.
96. 7. Usabilidad: Móvil vs Responsive
Entonces… ¿Cuál elegir?
Para realizar la elección adecuada de cómo serán nuestros sitios
móviles, lo mejor es pararse un poco a reflexionar sobre la
experiencia móvil que queremos ofrecer a nuestros usuarios.
97. 7. Usabilidad: Móvil vs Responsive
Entonces…
En sitios de noticias o en un blog, un diseño responsive tiene
mucho sentido ya que muestra en primer lugar el contenido
relevante y debajo de éste va mostrando las columnas que
adornan el sitio.
98. 7. Usabilidad: Móvil vs Responsive
Y…
En el caso de que nuestro sitio tenga publicidad de pago por click
en la columna derecha, y al ser responsivo la publicidad quedaría
muy por debajo del contenido y seguro que perderíamos valiosos
clicks de los usuarios.
99. 7. Usabilidad: Móvil vs Responsive
Entonces… ¿Cuál elegir?
Mi opción sería en tener un buen diseño responsive, que se vea
correctamente en todos los dispositivos, junto con un diseño
móvil que permita personalizar la experiencia para algunos
dispositivos concretos que sean muy usados por nuestros
usuarios objetivo.
100. Agenda
1.
Historia y evolución de la web
2.
Diseño web para móviles
3.
Razones para tener una web móvil
4.
Importancia de la web móvil
5.
Diferencias: Desktop y Móvil
6.
Proceso de desarrollo para móvil
7.
Usabilidad: Móvil vs Responsive
8.
Herramientas de desarrollo móvil
9.
Video
110. Agenda
1.
Historia y la evolución de la web
2.
Diseño web para móviles
3.
Razones para tener una web móvil
4.
Importancia de la web móvil
5.
Diferencias: Desktop y Móvil
6.
Proceso de desarrollo móvil
7.
Usabilidad: Móvil vs Responsive
8.
Herramientas de desarrollo móvil
9.
Video
http://youtu.be/MxriE6g3G9c
111. Gracias :)
Néstor Ramírez Salas
Drupal Front End Developer
nramirez@businesstech.pe
nramirezsalas@outlook.com.pe
nramirezsalas
nramirezsalas
994 736 607