{"id":481,"date":"2008-09-20T16:12:31","date_gmt":"2008-09-20T15:12:31","guid":{"rendered":"http:\/\/kusanagiweb.com\/?p=481"},"modified":"2008-09-24T07:42:10","modified_gmt":"2008-09-24T06:42:10","slug":"web-movil-pantallas","status":"publish","type":"post","link":"https:\/\/knsweb.net\/?p=481","title":{"rendered":"Web M\u00f3vil: Pantallas"},"content":{"rendered":"<p>>echo El problema de hacer una web que se vea bien en dispositivos m\u00f3viles, principalmente tel\u00e9fonos, es ajustar tanto la estructura, como el contenido, a las peque\u00f1as pantallas\/resoluci\u00f3n de estos aparatos.<br \/>\nNo es f\u00e1cil detectar mediante el navegador (o un script por ejemplo) las caracteristicas de todos los terminales. Y tampoco es f\u00e1cil implementar esta t\u00e9cnica.<\/p>\n<p>Para alguien que quiera desarrollar una web para el m\u00f3vil, por ejemplo, y no tenga mucha experiencia en programaci\u00f3n o los medios para aplicar las t\u00e9cnicas necesarias, una buena idea es hacer una versi\u00f3n generalista. Es decir, pensar en una media de la resoluci\u00f3n m\u00e1s usada por su p\u00fablico objetivo y hacer que la web se adapte bien a ella, eso, si permitiendo algunso ajustes, para quien no tenga esa resoluci\u00f3n concreta.<br \/>\nPara hacerlo, se pueden usar porcentajes -Si es posible-, en vez de pixels fijos. Igual con los tama\u00f1os de las fuentes, por ejemplo.<\/p>\n<p><strong>Resoluciones t\u00edpicas<\/strong><br \/>\nMostrar algo, una imagen o una web, en tanta variedad de resoluciones posibles puede ser muy complicado. Observad que variedad de posibilidades, tomando solo las posibilidads m\u00e1s comunes.<\/p>\n<figure style=\"width: 480px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"\/wordpress\/images\/hardware\/mobilescreens.jpg\" alt=\"Resoluciones t\u00edpicas de m\u00f3viles y PDAs\" title=\"Resoluciones t\u00edpicas de m\u00f3viles y PDAs\" width=\"480\" height=\"640\" \/><figcaption class=\"wp-caption-text\">Resoluciones t\u00edpicas de m\u00f3viles y PDAs<\/figcaption><\/figure>\n<p>El primer n\u00famero es el ancho de la pantalla, estando esta en vertical (uso normal del m\u00f3vil\/PDA). Algunos dispositivos\/navegadores permiten cambiar la orientaci\u00f3n de la pantalla para facilitar la navegaci\u00f3n. El ancho es un punto muy importante, para evitar le scrolling horizontal, mucho m\u00e1s molesto que el vertical, incluso cuando navegamos en un PC.<\/p>\n<ul>\n<li><strong>A<\/strong>: 176&#215;220. Esta es la resoluci\u00f3n de las gamas medias-bajas de m\u00f3viles y PDAs.<\/li>\n<li><strong>B<\/strong>: 240&#215;320. Esta es la resoluci\u00f3n de las gamas medias-altas de m\u00f3viles y PDAs<\/li>\n<li><strong>C<\/strong>: 256&#215;192. Esta es la resoluci\u00f3n de cada una de las pantallas de la Nintendo DS<\/li>\n<li><strong>D<\/strong>: 320&#215;480: Esta es la resoluci\u00f3n de la pantalla del Iphone \/ iPod Touch<\/li>\n<li><strong>E<\/strong>: 480&#215;272: Esta es la resoluci\u00f3n de la pantalla de la PSP<\/li>\n<li><strong>F<\/strong>: 480&#215;640: Esta es la resoluci\u00f3n de los m\u00f3viles y PDAs de gama alta. <\/li>\n<\/ul>\n<p>Hay algunas resoluciones mayores, como 480&#215;800, em algunos dispositivos nuevos y de gama muy alta. Por lo que tardar\u00e1n en popularizarse. Quiz\u00e1s la que ahora sea m\u00e1s com\u00fan y\/o \u00fatil al proposito de dise\u00f1ar una web para el m\u00f3vil, sea la resoluci\u00f3n de 240&#215;320. Esta medida est\u00e1 bastante extendida y se puede ajustar una web para las resoluciones inmediatamente superior e inferior, sin demasiados problemas, ampliando la gama de dispositivos en los que nuestra web podr\u00eda mostrarse. Adem\u00e1s 240&#215;320 es la mitad de 480&#215;640, lo que le da una relaci\u00f3n directa, por ejemplo a la hora de escalar im\u00e1genes (o usar porcentajes). Y tambien guarda cierta proporcionalidad con el ancho de otros dispositivos, como la PSP.<\/p>\n<p><strong>UPDATE:<\/strong> Al parecer 320&#215;480 es tambi\u00e9n la resoluci\u00f3n del nuevo (y primer) telefono con Google Android, el <a href=\"http:\/\/www.t-mobileg1.com\/\" target=\"_blank\">T-Mobile G1<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>>echo El problema de hacer una web que se vea bien en dispositivos m\u00f3viles, principalmente tel\u00e9fonos, es ajustar tanto la estructura, como el contenido, a las peque\u00f1as pantallas\/resoluci\u00f3n de estos aparatos. No es f\u00e1cil detectar mediante el navegador (o un script por ejemplo) las caracteristicas de todos los terminales. Y tampoco es f\u00e1cil implementar esta [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[15,22],"tags":[],"class_list":["post-481","post","type-post","status-publish","format-standard","hentry","category-hardware","category-webdesign"],"_links":{"self":[{"href":"https:\/\/knsweb.net\/index.php?rest_route=\/wp\/v2\/posts\/481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/knsweb.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/knsweb.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/knsweb.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/knsweb.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=481"}],"version-history":[{"count":0,"href":"https:\/\/knsweb.net\/index.php?rest_route=\/wp\/v2\/posts\/481\/revisions"}],"wp:attachment":[{"href":"https:\/\/knsweb.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/knsweb.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/knsweb.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}