Desarrollo de aplicaciones móviles

5,054 views

Published on

Alternativas al desarrollo de apps nativas: jQuery Mobile e introducción a responsive/adaptive design.

Keynote de iZenius.com para Congreso Web Zaragoza 2012

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,054
On SlideShare
0
From Embeds
0
Number of Embeds
2,604
Actions
Shares
0
Downloads
149
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Desarrollo de aplicaciones móviles

    1. 1. Desarrollo web para móviles Alternativas a las apps nativas Miguel Monreal @monrealista COO en iZenius
    2. 2. Sobre
    3. 3. Antes de empezar ... ¿Por qué alternativas a las apps nativas?
    4. 4. Razón 1: PerezaNuestros usuarios NO instalarán nuestra appsi no están fidelizados o tienen una ventaja muy grandeCongreso web Zaragoza 2012
    5. 5. Razón 2: PrecioDesarrollar un solución para cada plataforma es caro Congreso web Zaragoza 2012
    6. 6. Podríamos pensar... Mi web se ve bien, sólo tienen que hacer zoom
    7. 7. ¡NO!Es necesario contextualizar ¡Diferente navegación! Buscamos otra información
    8. 8. ¿Prefieres navegar así?
    9. 9. ¿O mejor así?
    10. 10. Tenemos que ofrecer anuestro usuario la mejorexperiencia de usuario
    11. 11. La forma de conseguir esta experiencia de usuario ha generado debate
    12. 12. http://bradfrostweb.com/blog/notes/this-is-the-web/
    13. 13. http://bradfrostweb.com/blog/notes/this-is-the-web/
    14. 14. http://bradfrostweb.com/blog/notes/this-is-the-web/
    15. 15. There is no Mobile Web. There is only The Web, which weview in different ways. There is also no Desktop Web. Or Tablet Web. Thank you Stephen Hay. There is not mobile web
    16. 16. The primary design principle underlying the Webs usefulness and growth is universality Tim Berners-Lee
    17. 17. 90% of all websites are too simple to justify the time and money it takes todevelop a separate mobile version. Common Sense Thinker
    18. 18. Y mientras tanto ...
    19. 19. Varias filosofías - Versión móvil separada - Adaptar la web
    20. 20. Creando una versiónmóvil por separado con
    21. 21. ¿Qué NO es jQuery • Una framework para trabajar con JS • Un compilador de apps • Una solución que sirva para todo.
    22. 22. Qué SÍ es jQuery Mobile Un framework UI (interfaz de usuario) multiplataforma que permite crear webapps para móviles y tablets táctiles.
    23. 23. Características • Etiquetas HTML 5 (no intrusivo) y CSS 3 • OpenSource • Ligero (31 Kb) • Soporte para accesibilidad
    24. 24. Y más!• Construido sobre JQuery• Mejora progresiva• Personalizable• API JS disponible• Buena documentación (jquerymobile.com)
    25. 25. RequisitosInicialmente, no necesitarás saber:• HTML 5 / CSS 3• JS• JQuery
    26. 26. Compatibilidad Compatibilidad A/B/C en http://jquerymobile.com/gbs/
    27. 27. ¿Qué incluye jQuery• Un fichero JS• Una hoja de estilos CSS• Imágenes
    28. 28. ¡Ejercicios! Ejercicios de descargables en: http://www.izenius.com/events/cw12/mobile/jqm.zip
    29. 29. Adaptando la webResponsive Web Design
    30. 30. El contenido manda! http://mediaqueri.es/pal/
    31. 31. Responsive web design A flexible grid (with flexible images) that incorporate media queries to create a responsive,adaptive layout. Ethan Marcotte
    32. 32. Flexible layout http://www.slideshare.net/livefront/responsive-design-7877412
    33. 33. ¿Como se construye un layoutUtilizar uno hecho -> http://cssgrid.net/Construirlo nosotros mismos.
    34. 34. Sitio de ejemplo .container (940 px) .sidebar .main (305 px) ( 590 px)
    35. 35. .container Se le suele poner un max-width alto o un width porcentual. .container { .container { max-width: 1300px; width: 90%; } }
    36. 36. Fórmula target / context = resulttarget width sizearent width size p
    37. 37. .sidebar.sidebar { width: 305px;}
    38. 38. .sidebar.sidebar { target / context = result width: 305px;} 305 / 940 = 0.32446809 tamaño del tamaño sidebar padre
    39. 39. .sidebar.sidebar { target / context = result width: 305px;} 305 / 940 = 0.32446809 tamaño del tamaño sidebar padre.sidebar { width: 32.446809%; /* 305px/940px */}
    40. 40. Sitio de ejemplo .container (940 px) .sidebar .main (305 px) ( 590 px)
    41. 41. .main.main { width: 590px;}
    42. 42. .main.main { target / context = result width: 590px; 590 / 940 = 0.62765957} tamaño del tamaño mainpadre
    43. 43. .main.main { target / context = result width: 590px; 590 / 940 = 0.62765957} tamaño del tamaño mainpadre.main { width: 62.765957%; /* 590px/940px */}
    44. 44. Sitio de ejemplo .container (940 px) .sidebar .main (305 px) margin-left: 325 px
    45. 45. ConversiónWhen setting flexible margins on an element,your context is the width of the element’s container.Ethan Marcotte (Responsive Web Design, 35)
    46. 46. Margin.main { margin-left:325px; width: 62.765957%; /* 590px/940px */}
    47. 47. Margin.main { target / context = result margin-left:325px; width: 62.765957%; 325 / 940 = 0,34574468085106 /* 590px/940px */} tamaño del margen main padre
    48. 48. Margin.main { target / context = result margin-left:325px; width: 62.765957%; 325 / 940 = 0,34574468085106 /* 590px/940px */} tamaño del margen main padre.main { width: 62.765957%; /* 590px/940px */ margin-left: 34.574468%; /* 325px/940px */}
    49. 49. Sitio de ejemplo .container (940 px) .sidebar .main (305 px) padding: 20px
    50. 50. Conversión Padding When setting flexible padding on an element, your context is the width of the element itself. Ethan Marcotte (Responsive Web Design, 35)
    51. 51. Padding.main { padding:20px; width: 62.765957%; /* 590px/940px */}
    52. 52. Padding.main { target / context = result padding:20px; width: 62.765957%; 20 / 590 = .03389830 /* 590px/940px */} tamaño padding main propio
    53. 53. Padding.main { target / context = result padding:20px; width: 62.765957%; 20 / 590 = .03389830 /* 590px/940px */} tamaño padding main propio.main { width: 62.765957%; /* 590px/940px */ padding: 3.389830%; /* 20px/590px */}
    54. 54. Flex your fonts! No olvidemos convertir la fuentes de PX a EM
    55. 55. Un pequeño truco html { font-size: 16px; /* base */ } body { font-family: Georgia, serif; font-size: 62.5%; /* 1em = 10px */ }
    56. 56. La fórmula! target / context = result font size of target font size containing element 10px / 16px = 0.625 -> 62,5%
    57. 57. Sitio de ejemplo .container .sidebar .main h1 { font-size:30px}
    58. 58. Fuente.main h1 { target / context = result font-size:30px;} 30 / 10 = 3 tamaño fuente h1 defecto.main h1{ font-size: 3em; /* 30px/10px */}
    59. 59. Sitio de ejemplo .container .sidebar .main h1 { font-size:30px} a {font-size: 24px}
    60. 60. Fuente.main h1 a { target / context = result font-size:24px;} 24 / 30 = 0.8em fuente atamaño h1.main h1 a{ font-size: 0.8em; /* 24px/30px */}
    61. 61. Break points Son lugares donde en función del ancho/alto del viewport, el diseño se “rompe”.
    62. 62. Típicos breakpoints http://www.slideshare.net/livefront/responsive-design-7877412
    63. 63. Media Queries @media screen and (max-width: 320px) { body { font-size: 100%; } } <= 320 px
    64. 64. Media Queries @media screen and (min-width: 1024px) { body { font-size: 100% } } >= 1024 px
    65. 65. Advanced MediaTipo @media screen, print { ... }Orientación @media (orientation:portrait) { ... }Color @media (color) { /* Screen in color */ } http://css-tricks.com/css-media-queries/
    66. 66. Compatibilidad http://www.slideshare.net/livefront/responsive-design-7877412
    67. 67. Compatibilidad Wouter van Der Graaf nos solucionó la papeleta: http://code.google.com/p/css3-mediaqueries-js/ http://www.slideshare.net/livefront/responsive-design-7877412
    68. 68. Adaptive / Responsive design ¿Es lo mismo adaptive que responsive? Adaptive: Nosotros definimos los break points Responsive: El contenido define los break points
    69. 69. Adaptive design Diseñar para un contexto específico: • Dispositivo (iphone, ipad ...) • Tamaño de pantalla (1024x768, 320x480...) • Resolución (retina display ...)
    70. 70. Responsive design Responsive designs provide continuity between contexts Responsive designs are portable and accessible. Ethan Marcotte
    71. 71. Flex your media Modern browsers FU.. IE 6 img, video, object { img, video, object { max-width: 100%; width: 100%; } }
    72. 72. ¡Ejercicios! Ejercicios de descargables en: http://www.izenius.com/events/cw12/mobile/responsive.zip
    73. 73. Muchas gracias!¿Preguntas? Miguel Monreal @monrealista mmonreal@izenius.co m

    ×