El documento presenta una introducción a las aplicaciones móviles y el diseño web responsivo. Explica que el 46% de los usuarios no volverán a un sitio si no se adapta a dispositivos móviles y que el diseño responsivo permite crear un sitio adaptable a diferentes pantallas con una sola versión. Luego compara las ventajas y desventajas de aplicaciones nativas, híbridas y web, concluyendo que el diseño responsivo y las aplicaciones híbridas son buenas opciones para la mayoría de proyectos por su

1. Ricardo D. Ceci
Julio 2013
Cómo llegar a los celulares / tablets

2. RICARDO D. CECI /
- Programador web certificado
- Autor “HTML5 Avanzado editorial Users” (Escribiendo)
- Coordinador de grupos de desarrolladores de Argentina
- Profesor a cargo de la carrera de Programador Web en
IT Master Argentina
- Geek (Nerd)
@ricardoceci
http://www.e-clubdemarketing.com.ar

3. No todo es tecnología
en mi vida

4. AGENDA
- Revolución Móvil
- Responsive Web Design
- Que es
- Como funciona
- Conclusiones
- Aplicaciones Móviles
- Concepto
- Tipos de aplicaciones
- Modelos de negocio

5. En todo momento…

6. En todos lados…

7. Para todos…

8. En todo momento,
enserio

9. Nuevos enemigos…

10. Nuevos gestos…

11. Nuevos gestos…
Nuevas destrezas…

12. Nuestro sitio web se tiene que ver bien en los
celulares o tabletas.
- El 46% de los usuarios NO va a volver a
nuestro sitio si no puede navegarlo
- Menos va a comprar.

13. Posibles soluciones

14. Hagamos una aplicación
para mostrar bien nuestro sitio!
$$$$

15. No nos olvidemos de Android!
$$$$
$$$$

16. Tampoco de Windows Phone$$$$
$$$$
$$$$

17. Y no dejemos de lado a BlackBerry
$$$$
$$$$
$$$$
$$$$

20. Entonces…
Hagamos una web nueva solo para celulares
Siguen siendo dos o más versiones de un mismo sitio
Dificil de mantener (duplicamos tareas)
El doble o el triple de costos para algo tan “simple” como nuestro sitio
web

21. ANTES

22. AHORA

23. “90% de los sitios web son demasiado simples para
justificar el tiempo y el dinero para invertir en un sitio
diferente para cada resolución de pantalla”.
- Pensador con sentido común

24. Una persona (Ethan Marcotte), se dedicó a escribir artículos
sobre “diseño adaptativo” en su sitio web “a list appart”

25. Una persona (Ethan Marcotte), se dedicó a escribir artículos
sobre “diseño adaptativo” en su sitio web “a list appart”
Nuevas ideas empezaron a surgir, nuevos movimientos y
nuevos conceptos en el diseño y el desarrollo web

26. Empiezan a surgir nuevas preguntas:
¿Y si hacemos un único sitio web que se “adapte”
a todas las resoluciones / tamaños de pantalla y
sea navegable en todos los dispositivos?

27. Responsive Web Design (RWD)
“Es una técnica de diseño y desarrollo web que mediante el
uso de estructuras e imágenes fluidas consigue adaptar el sitio
web al entorno del usuario”
“Con una sola versión se cubren todas las resoluciones
de pantalla, el sitio web creado estará optimizado para
todo tipo de dispositivos: PCs, tabletas, teléfonos
móviles, etc.”
- Wikipedia

28. ¿Cómo navegamos desde nuestro celular?
15 x 15px

29. ¿Cómo deberíamos navegar?

30. ¿Cómo deberíamos navegar?
45 x 45 px

31. - Menos tiempo de carga
- Botones más accesibles
- Llamamos a la acción más rápido
- Vendemos!

33. CONCLUSIONES
Nuestro sitio:
 Se tiene que poder ver bien desde un celular/tableta/pc
 Tiene que ser fácil de navegar
 Intuitivo
 Adaptable al entorno del usuario
 “Responsivo”
Si el usuario está contento y conforme, compra….

34. No es el más fuerte de las especies el que sobrevive,
tampoco es el más inteligente el que sobrevive.
Es aquel que es más adaptable al cambio.
- Charles Darwin
PARA REFLEXIONAR

35. Aplicaciones para celulares

36. 03
Mobile Apps

38.  Procesos
 Seguridad
 Offline
 Recursos del dispositivo
(hardware)
¿Cuándo hay que hacer una app?

39.  Cámara
 Micrófono
 GPS
 Acelerómetro
 Sistema de Archivos
 Contactos
 Calendario
Recursos de hardware que podemos aprovechar

40. Modelos de negocios:
- Ser original
- Publicidad
- Venta en tienda
- In-App purchase
- Freemium
- Suscripciones
- Aumento interno de productividad

41. Tipos de aplicaciones mobile
Formatos: (Smartphones / Tablets)
- Aplicaciones nativas
- Web Apps (HTML5)
- Híbridos (Nativo + HTML5)

43. Se desarrolla una versión en lenguaje propio de cada sistema operativo
- Android (java)
- Blackberry (java)
- iOS (xCode)
- Windows Phone (C#)
Ventajas:
 4x Costo
 Deben actualizarse manualmente
 Deben mantenerse 4 aplicaciones (mínimo)
Desventajas:
 Se aprovecha el 100% del hardware
 Funcionan offline
 Ideales para gráficos 3d
 Experiencia de usuario 100%.

44. Se desarrolla una única versión para todos los dispositivos compatibles.
Ventajas:
 No requiere instalación
 Se pueden acceder a ciertas características del hardware
 Corren en un navegador
 Se actualiza en el momento
 Es un sitio web,  -$
Desventajas:
 Menor performance
 Al no requerir instalación no está en el store
 Requiren internet, solo funcionan offline si se autoriza

46. Se desarrolla una única versión para todos los dispositivos compatibles.
La “Web” corre sobre una aplicación que nos hace de puente con el dispositivo
 Se aprovecha el 100% del hardware
 Se descargan de los stores
 Funcionan offline
 Ideales para aplicaciones empresariales
 Tableros de comando
 Control de stock
 Herramientas internas
 El costo se reduce 4 veces
 Simples de mantener
 Baja performance para aplicaciones con muchas animaciones
 Deben actualizarse manualmente (al igual que una app nativa)
Desventajas:

47. Resúmen
Nativo Hibrido Web
Acceso al
dispositivo
FULL FULL PARCIAL
Velocidad Muy Rápido Rápido Normal
Costo de desarrollo 4x 1x 1x
App Stores Disponible Disponible No disponible
Proceso de
aprobación
Obligatorio Obligatorio Ninguno

48. Conclusiones
 Realizar una App NO es solo para los ricos.
 Ya conocemos las tecnologías a utilizar de acuerdo al proyecto
a realizar.
 Conociendo las herramientas disponibles podemos
concentrarnos en trabajar la idea y
no en los costos.
¿Quieren saber dónde más pueden aplicarse los conceptos que
acabamos de ver?

50. Ya estamos trabajando con ellos!.

51. Gracias
@ricardoceci
sistemas@e-clubdemarketing.com.ar
www.e-clubdemarketing.com.ar