{"id":130,"date":"2013-03-06T09:22:10","date_gmt":"2013-03-06T09:22:10","guid":{"rendered":"http:\/\/www.einaweb.es\/develop\/?p=130"},"modified":"2013-03-06T09:22:38","modified_gmt":"2013-03-06T09:22:38","slug":"diseno-de-moviles-tablets-las-diferentes-densidades","status":"publish","type":"post","link":"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/","title":{"rendered":"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades"},"content":{"rendered":"

Para que una simple App pueda estar disponible para todos los tipos de smartphone y tablets de iOS y Android, tiene que dise\u00f1arse para iPhone, iPhone con pantalla retina, Android ldpi, Android mdpi, Android hdpi, Android xhdpi, iPad 2, iPad 3,\u2026
\n\u2026 eso sin incluir Symbian<\/a>, BlackBerry<\/a> y Windows 8<\/a>. (os pongo las gu\u00edas de estilo de estos SSOO)<\/em><\/p>\n

Aqu\u00ed vemos lo que os estaba diciendo:<\/p>\n

– Conversi\u00f3n entre las diferentes densidades<\/a>.
\n– Tama\u00f1os de las diferentes pantallas.
\n– Tama\u00f1os de los iconos.<\/p>\n

\"Densidades<\/a><\/p>\n

Acceder a toda esta informaci\u00f3n de un solo vistazo puede causarte sensaci\u00f3n de agobio, pero vamos a resumirlo para que resulte m\u00e1s f\u00e1cil.<\/p>\n

Os explico mi forma de trabajar, despu\u00e9s de probar varios m\u00e9todos me parece el m\u00e1s r\u00e1pido y organizado:<\/p>\n

Comienzo el dise\u00f1o siempre en una resoluci\u00f3n\/densidad que me resulte c\u00f3moda y tenga una buena percepci\u00f3n de las proporciones de los elementos y que tambi\u00e9n desde Android y Apple recomiendan, denomin\u00e1ndola \u201cBASELINE<\/em><\/strong>\u201c.<\/p>\n

Android: 160 mdpi \u2013 Pantalla: 320\u00d7480 px \u00a0 \u00a0\/ \u00a0 \u00a0iPhone: No retina \u2013 Pantalla:320\u00d7480 px \u00a0<\/strong><\/strong><\/p>\n

<\/strong>Despu\u00e9s de tener todo esto preparado, empiezo a hacer todo el DISE\u00d1O<\/strong>\u00a0de la app, con todas las pantallas que lo necesiten (aconsejo trabajar en VECTOR y AJUSTADO AL PIXEL<\/strong>, ya que luego nos ser\u00e1 m\u00e1s f\u00e1cil para manipular los elementos<\/em>) y una vez que tengo todo el dise\u00f1o hecho y aprobado finalmente, me preparo para adaptar los elementos o los dise\u00f1os a las dem\u00e1s densidades.<\/p>\n

Os pongo un peque\u00f1o truco para que os resulte m\u00e1s c\u00f3modo esto de ajustar al pixel:<\/p>\n

\"Ajustado<\/p>\n

Preparar una buena GU\u00cdA DE ELEMENTOS<\/strong>\u00a0es esencial, nos ahorrar\u00e1 mucho tiempo y esfuerzo a la hora de recortar los elementos. Teniendo todos los elementos en la gu\u00eda, juntos, bien medidos, y organizados, solo nos queda crear los sectores.<\/p>\n

Una vez hechos los SECTORES<\/strong>, podremos exportar f\u00e1cilmente todos los elementos desde\u00a0Guardar para Web y dispositivos <\/em>con un solo clic.<\/p>\n

\"sectores\"<\/a><\/p>\n

Tener la gu\u00eda de elementos hecha en 160 mdpi, nos permitir\u00e1 convertirlo todo para las diferentes densidades, multiplicando por los siguientes valores:<\/p>\n

\"Workflow\"<\/a><\/p>\n

Esto se hace desde Photoshop>Imagen>Tama\u00f1o de imagen:<\/em><\/p>\n

\"\"<\/p>\n

Vemos que en la dimensi\u00f3n en p\u00edxeles pone 100 de porcentaje y ah\u00ed es donde tenemos que poner el porcentaje de conversi\u00f3n que tiene cada densidad con respecto a la 160 mdpi.<\/p>\n

Por ejemplo: para aumentar de 160 mdpi a 240 hdpi, tendr\u00edamos que cambiar el 100% por un 150% y si lo que queremos es reducir a 120 ldpi, tendr\u00edamos que poner en vez de 100% un 75%<\/em>.<\/p>\n

NOTA<\/strong>: acordaos siempre de tener activados los checkboxes de Cambiar escala de estilos<\/em>, Restringir proporciones <\/em>y Remuestrear la imagen: Por aproximaci\u00f3n<\/em> (recomendado)<\/p>\n

Ya que en Android, los valores no son n\u00fameros enteros, el ajustado al p\u00edxel de los elementos puede verse afectado, as\u00ed que deber\u00edais revisarlo y ajustarlos al p\u00edxel de nuevo (es la cruz que nos ha ca\u00eddo con Android), pienso que de aqu\u00ed viene nuestra fama de\u00a0fan\u00e1ticos de Apple ;).<\/p>\n

Espero que toda esta informaci\u00f3n os sirva para facilitar vuestro trabajo como dise\u00f1adores de Apps y\/o aclararos un poco m\u00e1s sobre esto de las diferentes densidades de pantallas.<\/p>\n

Aqu\u00ed os dejo unos links donde viene toda la informaci\u00f3n:<\/p>\n

Android:\u00a0<\/strong>Gu\u00eda de estilo<\/a><\/em><\/p>\n

Apple:\u00a0<\/strong>Gu\u00eda de estilo<\/a><\/em><\/p>\n

 <\/p>\n

La fuente se ha obtenido de esta direcci\u00f3n: http:\/\/www.untipodigital.com\/diseno-de-moviles-tablets-las-diferentes-densidades\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Para que una simple App pueda estar disponible para todos los tipos de smartphone y tablets de iOS y Android, tiene que dise\u00f1arse para iPhone, iPhone con pantalla retina, Android ldpi, Android mdpi, Android hdpi, Android xhdpi, iPad 2, iPad 3,\u2026 \u2026 eso sin incluir Symbian, BlackBerry y Windows 8. (os pongo las gu\u00edas de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-130","post","type-post","status-publish","format-standard","hentry","category-android"],"yoast_head":"\nDise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador<\/title>\n<meta name=\"description\" content=\"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador\" \/>\n<meta property=\"og:description\" content=\"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Desarrollador\" \/>\n<meta property=\"article:published_time\" content=\"2013-03-06T09:22:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-03-06T09:22:38+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.untipodigital.com\/wp-content\/uploads\/2012\/06\/Densidades-de-iOS-y-Android-580x663.jpg\" \/>\n<meta name=\"author\" content=\"Angel Fernandez Gutierrez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@afernandezg76\" \/>\n<meta name=\"twitter:site\" content=\"@afernandezg76\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Angel Fernandez Gutierrez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/\",\"url\":\"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/\",\"name\":\"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador\",\"isPartOf\":{\"@id\":\"http:\/\/www.einaweb.es\/develop\/#website\"},\"datePublished\":\"2013-03-06T09:22:10+00:00\",\"dateModified\":\"2013-03-06T09:22:38+00:00\",\"author\":{\"@id\":\"http:\/\/www.einaweb.es\/develop\/#\/schema\/person\/2d3361868423160a6db46ce6f9fc9a3c\"},\"description\":\"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador\",\"breadcrumb\":{\"@id\":\"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"http:\/\/www.einaweb.es\/develop\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.einaweb.es\/develop\/#website\",\"url\":\"http:\/\/www.einaweb.es\/develop\/\",\"name\":\"Blog Desarrollador\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.einaweb.es\/develop\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.einaweb.es\/develop\/#\/schema\/person\/2d3361868423160a6db46ce6f9fc9a3c\",\"name\":\"Angel Fernandez Gutierrez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"http:\/\/www.einaweb.es\/develop\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/366f7c75ad085d0dcc2c290559c1aa5947679d86e3a8c55db42ac1c26e16c816?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/366f7c75ad085d0dcc2c290559c1aa5947679d86e3a8c55db42ac1c26e16c816?s=96&d=mm&r=g\",\"caption\":\"Angel Fernandez Gutierrez\"},\"url\":\"http:\/\/www.einaweb.es\/develop\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador","description":"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/","og_locale":"es_ES","og_type":"article","og_title":"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador","og_description":"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador","og_url":"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/","og_site_name":"Blog Desarrollador","article_published_time":"2013-03-06T09:22:10+00:00","article_modified_time":"2013-03-06T09:22:38+00:00","og_image":[{"url":"http:\/\/www.untipodigital.com\/wp-content\/uploads\/2012\/06\/Densidades-de-iOS-y-Android-580x663.jpg"}],"author":"Angel Fernandez Gutierrez","twitter_card":"summary_large_image","twitter_creator":"@afernandezg76","twitter_site":"@afernandezg76","twitter_misc":{"Escrito por":"Angel Fernandez Gutierrez","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/","url":"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/","name":"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador","isPartOf":{"@id":"http:\/\/www.einaweb.es\/develop\/#website"},"datePublished":"2013-03-06T09:22:10+00:00","dateModified":"2013-03-06T09:22:38+00:00","author":{"@id":"http:\/\/www.einaweb.es\/develop\/#\/schema\/person\/2d3361868423160a6db46ce6f9fc9a3c"},"description":"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades - Blog Desarrollador","breadcrumb":{"@id":"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.einaweb.es\/develop\/diseno-de-moviles-tablets-las-diferentes-densidades\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"http:\/\/www.einaweb.es\/develop\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o de m\u00f3viles & tablets: las diferentes densidades"}]},{"@type":"WebSite","@id":"http:\/\/www.einaweb.es\/develop\/#website","url":"http:\/\/www.einaweb.es\/develop\/","name":"Blog Desarrollador","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.einaweb.es\/develop\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Person","@id":"http:\/\/www.einaweb.es\/develop\/#\/schema\/person\/2d3361868423160a6db46ce6f9fc9a3c","name":"Angel Fernandez Gutierrez","image":{"@type":"ImageObject","inLanguage":"es","@id":"http:\/\/www.einaweb.es\/develop\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/366f7c75ad085d0dcc2c290559c1aa5947679d86e3a8c55db42ac1c26e16c816?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/366f7c75ad085d0dcc2c290559c1aa5947679d86e3a8c55db42ac1c26e16c816?s=96&d=mm&r=g","caption":"Angel Fernandez Gutierrez"},"url":"http:\/\/www.einaweb.es\/develop\/author\/admin\/"}]}},"_links":{"self":[{"href":"http:\/\/www.einaweb.es\/develop\/wp-json\/wp\/v2\/posts\/130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.einaweb.es\/develop\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.einaweb.es\/develop\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.einaweb.es\/develop\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.einaweb.es\/develop\/wp-json\/wp\/v2\/comments?post=130"}],"version-history":[{"count":2,"href":"http:\/\/www.einaweb.es\/develop\/wp-json\/wp\/v2\/posts\/130\/revisions"}],"predecessor-version":[{"id":132,"href":"http:\/\/www.einaweb.es\/develop\/wp-json\/wp\/v2\/posts\/130\/revisions\/132"}],"wp:attachment":[{"href":"http:\/\/www.einaweb.es\/develop\/wp-json\/wp\/v2\/media?parent=130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.einaweb.es\/develop\/wp-json\/wp\/v2\/categories?post=130"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.einaweb.es\/develop\/wp-json\/wp\/v2\/tags?post=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}