Diseño web para dispositivos móviles
-
Upload
nestor-ramirez-salas -
Category
Technology
-
view
863 -
download
0
Transcript of Diseño web para dispositivos móviles
![Page 2: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/2.jpg)
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
Agenda
![Page 3: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/3.jpg)
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
Agenda
![Page 4: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/4.jpg)
Todo lo que vemos, usamos y conocemos es resultado de una
evolución constante.
1. Historia y evolución de la web
![Page 5: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/5.jpg)
Todo lo que vemos, usamos y conocemos es resultado de una
evolución constante.
1. Historia y evolución de la web
El mundo está evolucionando.
![Page 6: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/6.jpg)
Todo lo que vemos, usamos y conocemos es resultado de una
evolución constante.
1. Historia y evolución de la web
El mundo está evolucionando.
Las tecnologías están evolucionando.
![Page 7: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/7.jpg)
Todo lo que vemos, usamos y conocemos es resultado de una
evolución constante.
1. Historia y evolución de la web
El mundo está evolucionando.
Las tecnologías están evolucionando.
Las personas / usuarios estamos evolucionando.
![Page 8: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/8.jpg)
Todo lo que vemos, usamos y conocemos es resultado de una
evolución constante.
1. Historia y evolución de la web
El mundo está evolucionando.
Las tecnologías están evolucionando.
Las necesidades están evolucionando.
Las personas / usuarios estamos evolucionando.
![Page 9: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/9.jpg)
Evolución del hombre
![Page 10: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/10.jpg)
• 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.
Evolución de la web: 1.0
![Page 11: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/11.jpg)
• Páginas dinámicas, contenido actualizado constantemente.
• Llamado también web social por el entorno colaborativo.
• Los usuarios generando contenido para los usuarios.
Evolución de la web: 2.0
![Page 12: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/12.jpg)
Evolución de la web: Web 2.0
![Page 13: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/13.jpg)
Web Semántica
Evolución de la web: 3.0
semántica
viene del griego semantikos
lo que tiene significado
![Page 14: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/14.jpg)
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
Evolución de la web: 3.0
semántica (del griego semantikos, "lo que tiene significado")
![Page 15: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/15.jpg)
![Page 16: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/16.jpg)
Tecnología celular: 1G
![Page 17: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/17.jpg)
Tecnología celular: 1G
![Page 18: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/18.jpg)
Tecnología celular: 1G
![Page 19: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/19.jpg)
Tecnología celular: 1G
![Page 20: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/20.jpg)
• Te permitía hablar 30 minutos
… máximo 60.
• Tiempo de recarga: 8 horas.
• Pesaba casi 1Kg.
• Costaba 4 mil dólares.
Tecnología celular: 1G
![Page 21: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/21.jpg)
Tecnología celular: 2G
![Page 22: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/22.jpg)
Tecnología celular: 2G
![Page 23: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/23.jpg)
• Era digital, blanco y negro
• Pantalla azul, verde
• Mensajes de texto
• Peso de unos 200 gramos
• Costo, menos de S/. 100
• Internet limitado
Tecnología celular: 2G
![Page 24: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/24.jpg)
Tecnología celular: 3G
![Page 25: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/25.jpg)
Tecnología celular: 3G
![Page 26: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/26.jpg)
• Full internet.
• Millones de colores.
• Multimedia, fotos, audio.
• Redes sociales.
• Aplicaciones móviles, etc.
Tecnología celular: 3G
![Page 27: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/27.jpg)
Evolución de la tecnología celular
![Page 28: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/28.jpg)
¿ Tecnología celular 4G ?
![Page 29: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/29.jpg)
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ú?
![Page 30: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/30.jpg)
Tecnología celular: 4G
![Page 31: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/31.jpg)
Tecnología celular: 4G
Vamos a ver un video sobre
la visión de Nokia
para los dispositivos móviles
https://research.nokia.com/morph
Visión Nokia Dispositivos Móviles.mp4
http://youtu.be/IX-gTobCJHs
![Page 32: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/32.jpg)
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
Agenda
![Page 33: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/33.jpg)
• 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…
2. Diseño web para móviles
![Page 34: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/34.jpg)
2. Diseño web para móviles
![Page 35: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/35.jpg)
ver contenidos WEB desde los móviles
2. Diseño web para móviles
![Page 36: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/36.jpg)
¿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.
2. Diseño web para móviles
![Page 37: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/37.jpg)
Ver contenidos
WEB desde los
móviles…
En cualquier
momento…
2. Diseño web para móviles
![Page 38: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/38.jpg)
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.
Ejercicio práctico 1: saquen sus celulares
![Page 39: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/39.jpg)
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.
Ejercicio práctico 1: saquen sus celulares
![Page 40: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/40.jpg)
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.
Ejercicio práctico 2: saquen sus celulares
![Page 41: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/41.jpg)
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
Ejercicio práctico 2: saquen sus celulares
![Page 42: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/42.jpg)
Primero:
1.- Ingresen a la página elcomercio.pe
2.- Quién me dice la primera noticia de la “sección economía”.
Ejercicio práctico 3: saquen sus celulares
![Page 43: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/43.jpg)
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.
Ejercicio práctico 3: saquen sus celulares
![Page 44: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/44.jpg)
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é?
Ejercicios prácticos: observaciones
![Page 45: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/45.jpg)
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
Ejercicios prácticos: observaciones
![Page 46: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/46.jpg)
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
2. Diseño web para móviles
![Page 47: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/47.jpg)
2. Diseño web para móviles
![Page 48: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/48.jpg)
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
Agenda
![Page 49: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/49.jpg)
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.
3. Razones para tener una web móvil
![Page 50: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/50.jpg)
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.
3. Razones para tener una web móvil
![Page 51: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/51.jpg)
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.
3. Razones para tener una web móvil
![Page 52: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/52.jpg)
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.
3. Razones para tener una web móvil
![Page 53: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/53.jpg)
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.
3. Razones para tener una web móvil
![Page 54: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/54.jpg)
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”.
3. Razones para tener una web móvil
![Page 55: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/55.jpg)
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
3. Razones para tener una web móvil
![Page 56: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/56.jpg)
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.
3. Razones para tener una web móvil
![Page 57: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/57.jpg)
Porque es el
futurode las
comunicaciones
3. Razones para tener una web móvil
![Page 58: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/58.jpg)
Todo en la vida son negocios, acuerdos…
¿
NFCNear Field Communication
?
3. Razones para tener una web móvil
![Page 59: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/59.jpg)
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
Agenda
![Page 60: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/60.jpg)
Generas valor agregado a tu negocio.
4. Importancia de la web móvil
![Page 61: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/61.jpg)
4. Importancia de la web móvil
![Page 62: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/62.jpg)
4. Importancia de la web móvil
![Page 63: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/63.jpg)
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
Agenda
![Page 64: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/64.jpg)
5. Diferencias: Desktop vs Móvil
![Page 65: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/65.jpg)
5. Diferencias: Desktop vs Móvil
Web desktopWeb móvil
![Page 66: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/66.jpg)
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
Agenda
![Page 67: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/67.jpg)
6. Proceso de desarrollo para móvil
El plan de trabajo
![Page 68: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/68.jpg)
6. Proceso de desarrollo para móvil
El plan de trabajo
![Page 69: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/69.jpg)
6. Proceso de desarrollo para móvil
El plan de trabajo
En esta etapa se piensa en:
![Page 70: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/70.jpg)
6. Proceso de desarrollo para móvil
Arquitectura de información
![Page 71: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/71.jpg)
6. Proceso de desarrollo para móvil
Layouts, estructuras para el contenido
![Page 72: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/72.jpg)
6. Proceso de desarrollo para móvil
Layouts, estructuras para el contenido
![Page 73: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/73.jpg)
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
![Page 74: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/74.jpg)
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
más pixeles… imagen más nítida
![Page 75: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/75.jpg)
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
Pantalla más grande… mas distorsión en imagen
![Page 76: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/76.jpg)
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
![Page 77: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/77.jpg)
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
![Page 78: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/78.jpg)
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
![Page 79: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/79.jpg)
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
![Page 80: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/80.jpg)
6. Proceso de desarrollo para móvil
Wireframe
![Page 81: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/81.jpg)
6. Proceso de desarrollo para móvil
Wireframe
![Page 82: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/82.jpg)
6. Proceso de desarrollo para móvil
Wireframe
![Page 83: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/83.jpg)
6. Proceso de desarrollo para móvil
Wireframe
![Page 84: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/84.jpg)
6. Proceso de desarrollo para móvil
Diseños visuales
![Page 85: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/85.jpg)
6. Proceso de desarrollo para móvil
Diseños visuales
![Page 86: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/86.jpg)
6. Proceso de desarrollo para móvil
Diseños visuales
![Page 87: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/87.jpg)
6. Proceso de desarrollo para móvil
Diseños visuales
![Page 88: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/88.jpg)
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
Agenda
![Page 89: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/89.jpg)
7. Usabilidad: Móvil vs Responsive
¿ … ?
![Page 90: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/90.jpg)
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.
![Page 91: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/91.jpg)
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.
![Page 92: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/92.jpg)
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.
![Page 93: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/93.jpg)
7. Usabilidad: Móvil vs Responsive
Diseño Responsive
• Cuando usuario acceda a su web va ver un diseño adaptadopara 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.
![Page 94: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/94.jpg)
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.
![Page 95: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/95.jpg)
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.
![Page 96: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/96.jpg)
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.
![Page 97: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/97.jpg)
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.
![Page 98: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/98.jpg)
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.
![Page 99: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/99.jpg)
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.
![Page 100: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/100.jpg)
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
Agenda
![Page 103: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/103.jpg)
8. Herramientas de desarrollo móvil
http://www.sencha.com/products/touch/
![Page 110: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/110.jpg)
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
Agenda
http://youtu.be/MxriE6g3G9c
![Page 111: Diseño web para dispositivos móviles](https://reader033.fdocuments.mx/reader033/viewer/2022042722/589ed5bd1a28ab39498b4ba3/html5/thumbnails/111.jpg)
Néstor Ramírez SalasDrupal Front End Developer
nramirezsalas nramirezsalas 994 736 607
Gracias :)