Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desarrollo de aplicaciones móviles

5,256 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
  • Be the first to comment

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

×