• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Desarrollo de aplicaciones móviles
 

Desarrollo de aplicaciones móviles

on

  • 4,553 views

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

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

Keynote de iZenius.com para Congreso Web Zaragoza 2012

Statistics

Views

Total Views
4,553
Views on SlideShare
2,039
Embed Views
2,514

Actions

Likes
3
Downloads
122
Comments
0

8 Embeds 2,514

http://congresoweb.es 1963
http://www.hectormainar.com 490
http://blog.carrie.es 38
http://dcyadbeazaragoza.blogspot.com.es 14
http://feeds.feedburner.com 5
http://dcyadbeazaragoza.blogspot.com 2
http://127.0.0.1 1
http://www.maanon.es 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Desarrollo de aplicaciones móviles Presentation Transcript

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