Diseño web para dispositivos móviles

Néstor Ramírez [email protected]

mailto:[email protected]

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









9. Video

Agenda

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.

Las personas / usuarios estamos evolucionando.

Evolución del hombre

• 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

• 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

Web Semántica


semántica

viene del griego semantikos

lo que tiene significado

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")

http://es.wikipedia.org/wiki/Tim_Berners-Lee

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.




• Era digital, blanco y negro

• Pantalla azul, verde

• Mensajes de texto

• Peso de unos 200 gramos

• Costo, menos de S/. 100

• Internet limitado




• 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 ?


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ú?



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

https://research.nokia.com/morph

http://youtu.be/IX-gTobCJHs









9. Video

Agenda

• 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…



ver contenidos WEB desde los 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.


Ver contenidos

WEB desde los

móviles…

En cualquier

momento…


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.


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.


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


Primero:

1.- Ingresen a la página elcomercio.pe

2.- Quién me dice la primera noticia de la “sección economía”.


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.


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?


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?


con el dominio principal?


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

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











9. Video

Agenda

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.


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.


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.


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.


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.


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”.


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


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.


Porque es el

futurode las

comunicaciones


Todo en la vida son negocios, acuerdos…

¿

NFCNear Field Communication

?







6. Proceso de desarrollo móvil



9. Video

Agenda

Generas valor agregado a tu negocio.












9. Video

Agenda

5. Diferencias: Desktop vs Móvil

5. Diferencias: Desktop vs Móvil

Web desktopWeb móvil





5. Diferencias: desktop y Móvil




9. Video

Agenda


El plan de trabajo


El plan de trabajo


El plan de trabajo

En esta etapa se piensa en:


Arquitectura de información


Layouts, estructuras para el contenido


Layouts, estructuras para el contenido


Resolución de pantalla y densidad de Pixel



más pixeles… imagen más nítida



Pantalla más grande… mas distorsión en imagen










Wireframe


Wireframe


Wireframe


Wireframe


Diseños visuales


Diseños visuales


Diseños visuales


Diseños visuales









9. Enlaces de interés

10. Video

Agenda


¿ … ?


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.









9. Video

Agenda


http://jquerymobile.com/

http://jquerymobile.com/


http://phonegap.com/

http://phonegap.com/


http://www.sencha.com/products/touch/

http://www.sencha.com/products/touch/


http://ibuildapp.com/

http://ibuildapp.com/


http://foundation.zurb.com/

http://foundation.zurb.com/


http://gumbyframework.com/

http://gumbyframework.com/


http://getbootstrap.com/2.3.2/

http://getbootstrap.com/2.3.2/


http://getbootstrap.com/

http://getbootstrap.com/


http://www.99lime.com/elements/

http://www.99lime.com/elements/

1. Historia y la evolución de la web





6. Proceso de desarrollo móvil



9. Video

Agenda

http://youtu.be/MxriE6g3G9c

http://youtu.be/MxriE6g3G9c

Néstor Ramírez SalasDrupal Front End Developer

[email protected]

[email protected]

nramirezsalas nramirezsalas 994 736 607

Gracias :)



Technology

Diseño web para dispositivos móviles