SlideShare a Scribd company logo
1 of 111
Download to read offline
Néstor Ramírez Salas
nramirez@businesstech.pe
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
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
1. Historia y evolución de la web

Todo lo que vemos, usamos y conocemos es resultado de una

evolución constante.
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.
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.
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.
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.
Evolución del hombre
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.
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.
Evolución de la web: Web 2.0
Evolución de la web: 3.0

Web Semántica
semántica
viene del griego semantikos

lo que tiene significado
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")
Diseño web para dispositivos móviles
Tecnología celular: 1G
Tecnología celular: 1G
Tecnología celular: 1G
Tecnología celular: 1G
Tecnología celular: 1G

• 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: 2G
Tecnología celular: 2G
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
Tecnología celular: 3G
Tecnología celular: 3G
Tecnología celular: 3G

• Full internet.
• Millones de colores.

• Multimedia, fotos, audio.
• Redes sociales.
• Aplicaciones móviles, etc.
Evolución de la tecnología celular
¿ Tecnología celular 4G ?
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ú?
Tecnología celular: 4G
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
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
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…
2. Diseño web para móviles
2. Diseño web para móviles

ver contenidos WEB desde los móviles
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.
2. Diseño web para móviles

Ver contenidos
WEB desde los
móviles…
En cualquier
momento…
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.
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.
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.
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
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”.
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.
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é?
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
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
2. Diseño web para móviles
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. 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.
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.
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.
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.
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.
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”.
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 
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.
3. Razones para tener una web móvil

Porque es el

futuro
de las
comunicaciones
3. Razones para tener una web móvil

Todo en la vida son
negocios, acuerdos…
¿

NFC
Near Field Communication
?
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
4. Importancia de la web móvil

Generas valor agregado a tu negocio.
4. Importancia de la web móvil
4. Importancia de la web móvil
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
5. Diferencias: Desktop vs Móvil
5. Diferencias: Desktop vs Móvil

Web desktop

Web móvil
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
6. Proceso de desarrollo para móvil
El plan de trabajo
6. Proceso de desarrollo para móvil
El plan de trabajo
6. Proceso de desarrollo para móvil
El plan de trabajo
En esta etapa se piensa en:
6. Proceso de desarrollo para móvil
Arquitectura de información
6. Proceso de desarrollo para móvil
Layouts, estructuras para el contenido
6. Proceso de desarrollo para móvil
Layouts, estructuras para el contenido
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
más pixeles… imagen más nítida
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
Pantalla más grande… mas distorsión en imagen
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
6. Proceso de desarrollo para móvil
Resolución de pantalla y densidad de Pixel
6. Proceso de desarrollo para móvil

Wireframe
6. Proceso de desarrollo para móvil

Wireframe
6. Proceso de desarrollo para móvil

Wireframe
6. Proceso de desarrollo para móvil

Wireframe
6. Proceso de desarrollo para móvil

Diseños visuales
6. Proceso de desarrollo para móvil

Diseños visuales
6. Proceso de desarrollo para móvil

Diseños visuales
6. Proceso de desarrollo para móvil

Diseños visuales
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
7. Usabilidad: Móvil vs Responsive

¿…?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
8. Herramientas de desarrollo móvil

http://jquerymobile.com/
8. Herramientas de desarrollo móvil

http://phonegap.com/
8. Herramientas de desarrollo móvil

http://www.sencha.com/products/touch/
8. Herramientas de desarrollo móvil

http://ibuildapp.com/
8. Herramientas de desarrollo móvil

http://foundation.zurb.com/
8. Herramientas de desarrollo móvil

http://gumbyframework.com/
8. Herramientas de desarrollo móvil

http://getbootstrap.com/2.3.2/
8. Herramientas de desarrollo móvil

http://getbootstrap.com/
8. Herramientas de desarrollo móvil

http://www.99lime.com/elements/
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
Gracias :)

Néstor Ramírez Salas
Drupal Front End Developer
nramirez@businesstech.pe
nramirezsalas@outlook.com.pe

nramirezsalas

nramirezsalas

994 736 607

More Related Content

Viewers also liked

Evolución de los Dispositivos Móviles
Evolución de los Dispositivos MóvilesEvolución de los Dispositivos Móviles
Evolución de los Dispositivos MóvilesMayrithaa Rodrigueez
 
Historia Del Telefono
Historia Del TelefonoHistoria Del Telefono
Historia Del Telefonorenato
 
linea de tiempo del celular
linea de tiempo del celularlinea de tiempo del celular
linea de tiempo del celularkarinaaguirre
 
Planificacion de-unidades-didacticas-pedro-carreno
Planificacion de-unidades-didacticas-pedro-carrenoPlanificacion de-unidades-didacticas-pedro-carreno
Planificacion de-unidades-didacticas-pedro-carrenoColegio Piramide
 
Linea del Tiempo - Medios de Almacenamiento (TICS)
Linea del Tiempo - Medios de Almacenamiento (TICS)Linea del Tiempo - Medios de Almacenamiento (TICS)
Linea del Tiempo - Medios de Almacenamiento (TICS)Aldo Tapia
 

Viewers also liked (7)

Evolución de los Dispositivos Móviles
Evolución de los Dispositivos MóvilesEvolución de los Dispositivos Móviles
Evolución de los Dispositivos Móviles
 
Historia Del Telefono
Historia Del TelefonoHistoria Del Telefono
Historia Del Telefono
 
linea de tiempo del celular
linea de tiempo del celularlinea de tiempo del celular
linea de tiempo del celular
 
Evolución Teléfono
Evolución TeléfonoEvolución Teléfono
Evolución Teléfono
 
Planificacion de-unidades-didacticas-pedro-carreno
Planificacion de-unidades-didacticas-pedro-carrenoPlanificacion de-unidades-didacticas-pedro-carreno
Planificacion de-unidades-didacticas-pedro-carreno
 
Linea tiempo telefono
Linea tiempo telefonoLinea tiempo telefono
Linea tiempo telefono
 
Linea del Tiempo - Medios de Almacenamiento (TICS)
Linea del Tiempo - Medios de Almacenamiento (TICS)Linea del Tiempo - Medios de Almacenamiento (TICS)
Linea del Tiempo - Medios de Almacenamiento (TICS)
 

Similar to Diseño web para dispositivos móviles

Presente y futuro del desarrollo de apps mobile y wearable
Presente y futuro del desarrollo de apps mobile y wearablePresente y futuro del desarrollo de apps mobile y wearable
Presente y futuro del desarrollo de apps mobile y wearableSoftware Guru
 
Movilidad - Tendencias que cambiarán nuestras vidas
Movilidad - Tendencias que cambiarán nuestras vidasMovilidad - Tendencias que cambiarán nuestras vidas
Movilidad - Tendencias que cambiarán nuestras vidasBiko
 
Biblioapps, o cómo crear aplicaciones móviles para bibliotecas
Biblioapps, o cómo crear aplicaciones móviles para bibliotecasBiblioapps, o cómo crear aplicaciones móviles para bibliotecas
Biblioapps, o cómo crear aplicaciones móviles para bibliotecasSocialBiblio
 
Diseno web movil - 5 Cosas Que Necesita Saber
Diseno web movil - 5 Cosas Que Necesita SaberDiseno web movil - 5 Cosas Que Necesita Saber
Diseno web movil - 5 Cosas Que Necesita SaberHector Jayat
 
5 usabilidad y las historia de las cosas
5 usabilidad y las historia de las cosas5 usabilidad y las historia de las cosas
5 usabilidad y las historia de las cosasLeonardo Briseño
 
Mobile Primero en Playa Valley 2011
Mobile Primero en Playa Valley 2011Mobile Primero en Playa Valley 2011
Mobile Primero en Playa Valley 2011Maximiliano Firtman
 
Contenido web en múltiples pantallas
Contenido web en múltiples pantallasContenido web en múltiples pantallas
Contenido web en múltiples pantallasEdgar Parada
 
Introducción Mobile Apps
Introducción Mobile AppsIntroducción Mobile Apps
Introducción Mobile AppsMobivery
 
Diseño web para dispositivos móviles
Diseño web para dispositivos móvilesDiseño web para dispositivos móviles
Diseño web para dispositivos móvilesUp&Go!
 
Movilidad: Escalando experiencias para el consumidor
Movilidad: Escalando experiencias para el consumidorMovilidad: Escalando experiencias para el consumidor
Movilidad: Escalando experiencias para el consumidorWineducation
 

Similar to Diseño web para dispositivos móviles (20)

Presente y futuro del desarrollo de apps mobile y wearable
Presente y futuro del desarrollo de apps mobile y wearablePresente y futuro del desarrollo de apps mobile y wearable
Presente y futuro del desarrollo de apps mobile y wearable
 
Desarrollo web movil
Desarrollo web movilDesarrollo web movil
Desarrollo web movil
 
Web móvil. Desarrollo de Apps y Aplicación en Bibliotecas
Web móvil. Desarrollo de Apps y Aplicación en BibliotecasWeb móvil. Desarrollo de Apps y Aplicación en Bibliotecas
Web móvil. Desarrollo de Apps y Aplicación en Bibliotecas
 
Usabilidad Temari
Usabilidad TemariUsabilidad Temari
Usabilidad Temari
 
Clase mobile marketing
Clase mobile marketingClase mobile marketing
Clase mobile marketing
 
Movilidad - Tendencias que cambiarán nuestras vidas
Movilidad - Tendencias que cambiarán nuestras vidasMovilidad - Tendencias que cambiarán nuestras vidas
Movilidad - Tendencias que cambiarán nuestras vidas
 
Biblioapps, o cómo crear aplicaciones móviles para bibliotecas
Biblioapps, o cómo crear aplicaciones móviles para bibliotecasBiblioapps, o cómo crear aplicaciones móviles para bibliotecas
Biblioapps, o cómo crear aplicaciones móviles para bibliotecas
 
Cuarta pantalla
Cuarta pantallaCuarta pantalla
Cuarta pantalla
 
Diseno web movil - 5 Cosas Que Necesita Saber
Diseno web movil - 5 Cosas Que Necesita SaberDiseno web movil - 5 Cosas Que Necesita Saber
Diseno web movil - 5 Cosas Que Necesita Saber
 
5 usabilidad y las historia de las cosas
5 usabilidad y las historia de las cosas5 usabilidad y las historia de las cosas
5 usabilidad y las historia de las cosas
 
Introducción a la web móvil
Introducción a la web móvilIntroducción a la web móvil
Introducción a la web móvil
 
Desarrollo de aplicaciones web móviles
Desarrollo de aplicaciones web móvilesDesarrollo de aplicaciones web móviles
Desarrollo de aplicaciones web móviles
 
Mobile Primero en Playa Valley 2011
Mobile Primero en Playa Valley 2011Mobile Primero en Playa Valley 2011
Mobile Primero en Playa Valley 2011
 
Internet y Navegador Web
Internet y Navegador WebInternet y Navegador Web
Internet y Navegador Web
 
Contenido web en múltiples pantallas
Contenido web en múltiples pantallasContenido web en múltiples pantallas
Contenido web en múltiples pantallas
 
Presentación sobre movilidad de nuestro I Desayuno Tecnológico, realizado en ...
Presentación sobre movilidad de nuestro I Desayuno Tecnológico, realizado en ...Presentación sobre movilidad de nuestro I Desayuno Tecnológico, realizado en ...
Presentación sobre movilidad de nuestro I Desayuno Tecnológico, realizado en ...
 
Introducción Mobile Apps
Introducción Mobile AppsIntroducción Mobile Apps
Introducción Mobile Apps
 
Diseño web para dispositivos móviles
Diseño web para dispositivos móvilesDiseño web para dispositivos móviles
Diseño web para dispositivos móviles
 
Movilidad: Escalando experiencias para el consumidor
Movilidad: Escalando experiencias para el consumidorMovilidad: Escalando experiencias para el consumidor
Movilidad: Escalando experiencias para el consumidor
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

Recently uploaded

Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 

Recently uploaded (20)

Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 

Diseño 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.
  • 12. Evolución de la web: Web 2.0
  • 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")
  • 20. Tecnología celular: 1G • Te permitía hablar 30 minutos … máximo 60. • Tiempo de recarga: 8 horas. • Pesaba casi 1Kg. • Costaba 4 mil dólares.
  • 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
  • 26. Tecnología celular: 3G • Full internet. • Millones de colores. • Multimedia, fotos, audio. • Redes sociales. • Aplicaciones móviles, etc.
  • 27. Evolución de la tecnología celular
  • 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…
  • 34. 2. Diseño web para móviles
  • 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
  • 47. 2. Diseño web para 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
  • 60. 4. Importancia de la web móvil Generas valor agregado a tu negocio.
  • 61. 4. Importancia de la web móvil
  • 62. 4. Importancia de la web móvil
  • 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
  • 65. 5. Diferencias: Desktop vs Móvil Web desktop Web móvil
  • 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
  • 80. 6. Proceso de desarrollo para móvil Wireframe
  • 81. 6. Proceso de desarrollo para móvil Wireframe
  • 82. 6. Proceso de desarrollo para móvil Wireframe
  • 83. 6. Proceso de desarrollo para móvil Wireframe
  • 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
  • 89. 7. Usabilidad: Móvil vs Responsive ¿…?
  • 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
  • 101. 8. Herramientas de desarrollo móvil http://jquerymobile.com/
  • 102. 8. Herramientas de desarrollo móvil http://phonegap.com/
  • 103. 8. Herramientas de desarrollo móvil http://www.sencha.com/products/touch/
  • 104. 8. Herramientas de desarrollo móvil http://ibuildapp.com/
  • 105. 8. Herramientas de desarrollo móvil http://foundation.zurb.com/
  • 106. 8. Herramientas de desarrollo móvil http://gumbyframework.com/
  • 107. 8. Herramientas de desarrollo móvil http://getbootstrap.com/2.3.2/
  • 108. 8. Herramientas de desarrollo móvil http://getbootstrap.com/
  • 109. 8. Herramientas de desarrollo móvil http://www.99lime.com/elements/
  • 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