El documento presenta un panorama de las tendencias y tecnologías móviles. Explica que el uso de dispositivos móviles se ha incrementado en las actividades diarias de las personas y que el acceso a Internet a través de estos dispositivos está en constante crecimiento. También describe algunas tecnologías clave como las aplicaciones nativas, el diseño web adaptable y responsive, y los sistemas operativos móviles dominantes. Finalmente, ofrece recomendaciones sobre estrategias de desarrollo móvil y pruebas para garantizar

1. Es tiempo de hacerlo
MÓVIL
Un panorama de las tendencias y tecnologías
Marco Antonio Avendaño
marcoviaweb@gmail.com
@marcoviaweb

2. Contenido
• Estado y
tendencia
• Aplicabilidad
• Tecnología
• Aspectos a
considerar

3. Estado y tendencia

4. Popularización de la web
Adicción

5. Popularización de la web
Social media

6. Tecnología móvil
Diversidad de dispositivos

7. Acceso al mundo digital
Servicios disponibles 24x7

8. Influencia de la tecnología móvil
El empleo de
dispositivos
móviles se ha
incrementado en
las actividades
habituales de las
personas

9. Acceso a internet
Crecimiento del uso de los móviles

10. El despegue del móvil
Numero de usuarios a nivel mundial (millones)

11. Eventos de tecnología
La tendencia esta en el móvil

12. Aplicabilidad

13. Empresas
No solo implica el
desarrollo de
aplicaciones
Se debe establecer
metas y también
revisar los procesos
para alcanzarlas
Es necesario
desarrollar una
estrategia

14. Axiomas en la “estrategia móvil“
• Proveer los
servicios a través
de múltiples
canales
• Buscar nuevas
oportunidades y
nuevas formas de
proveer los
servicios
• Facilitar la vida de
los clientes

15. mCommerce
Cambio en la manera de hacer comercio electronico

16. mMarketing
Embudo de Funnel

17. mDSS
Decisiones instantáneas

18. Educación
Informe Horizon 2013

19. Startups
“Driven Awake”
La primera app del
mundo que
despierta a los
conductores
somnolientos

20. Tecnología

21. Alternativas para móviles
Aplicaciones
nativas
Sitios Web
Adaptive web desing
Responsive web design
RESS
Componentes

22. Aplicaciones nativas
Sistemas operativos

23. Sistemas operativos
Evolución de participación en el mercado

24. Sistemas operativos
Tendencias 2013

25. Aplicaciones nativas
Equipamiento para el desarrollo

26. Adaptive web design
Componentes

27. RWD: Responsive web design
Ethan Marcotte

28. RWD: Responsive web design
Flexible grid-based
layout
Flexible images &
media
Media queries
Componentes

29. RWD
Diseño definido en
valores relativos
(porcentaje)
Resultado =
objetivo contexto
Flexible grid-based layout

30. Flexible grid-based layout
#wrapper {
width: 96%;
/*Porcentaje más aproximado*/
}
header {
width: 97.9166667%;
/* 940 960 */
}
Un ejemplo
<div id=”wrapper”>
<header>
</header>
</div>
#wrapper {
width: 960px;
}
header {
width: 940px;
}
Resultado = objetivo contexto

31. RWD
Imágenes y elementos
multimedia de acuerdo
al contenido:
img, embed, object,
video {
max-width: 100%;
}
Flexible images & media

32. RWD
Permiten determinar
si ciertas expresiones
son ciertas en relación
al navegador
@media [not|only]
type [and] (expr) {
rules
}
Media queries

33. Media queries
Media Type

34. Media queries
Media Expressions

35. Media queries
Logical Keywords
Palabras claves que
permiten crear
expresiones complejas
AND
NOT
OR
ONLY

36. Media queries
Rules
Reglas básicas de CSS
Se encuentran dentro
de una media query
@media only screen
and (min-width:
320px) {
a{
color: blue;
}
}

37. HTML5
• Simplificación
• Contenido multimedia
• Animaciones
• Almacenamiento de
datos del lado del cliente
• Efectos y nueva versión
de hojas de estilo CSS
• Geo-locación
• Tipografías no estándar
Características

38. HTML5
• HTML5 Boilerplate
http://html5boilerplate.com/
• Modernizr
http://www.modernizr.com/
• Initializr
http://www.initializr.com/
• 52framework
http://52framework.com/
Herramientas

39. RESS
• Velocidad y eficiencia
• Precisión de información
• Solución única
Responsive Design + Server Side Components

40. Soluciones en el servidor
WURLF: Identificando al dispositivos

41. RESS
• WURFL www.scientiamobile.com/
• DeviceAtlas deviceatlas.com/
• 51Degrees 51degrees.mobi/
• OpenDDR www.openddr.org/
• DetectRight www.detectright.com/
• Apache Mobile Filter www.apachemobilefilter.org/
DDR: Device Detection Repositories

42. Comparativa
Website Vs. App

43. Aspectos a
considerar

44. Estrategias de desarrollo
Graceful degradation Vs. Progressive enhancement

45. Layout
Linearización de contenidos

46. Layout
Eliminación de contenido innecesario

47. Resoluciones
Linearización de contenidos

48. Accesibilidad
Todos tienen derecho

49. Diseño de interfaces

50. Acciones del usuario
Gestures

51. Diversidad de navegadores
Recomendaciones de la W3C

52. Test
• The Responsinator responsinator.com
• Responsive.is responsive.is
• Responsivepx responsivepx.com
• QuirkTools quirktools.com/screenfly/
• Pixel Perfect Responsive Design Testing Tool
screenqueri.es
• Screenfly quirktools.com/screenfly/
• Demonstrating Responsive Design
www.jamus.co.uk/demos/rwd-demonstrations/
• Media Query Bookmarklet
seesparkbox.com/foundry/media_query_bookmarklet/
• Matt Kersley’s Responsive Tool
mattkersley.com/responsive/
Recursos en línea

53. Test
• Windows Resizer – Chrome
chrome.google.com/webstore/detail/kkelicaakdanhinjdeamm
milcgefonfh
• Firesizer – Firefox addons.mozilla.org/en-
US/firefox/addon/firesizer/
• Developer Toolbar - Microsoft Internet Explorer
www.microsoft.com/download/en/details.aspx?id=18359
Extensiones para navegadores

54. Es tiempo de hacerlo
MÓVIL
Un panorama de las tendencias y tecnologías
Marco Antonio Avendaño
marcoviaweb@gmail.com
@marcoviaweb
Gracias