{"id":45,"date":"2009-03-11T12:31:59","date_gmt":"2009-03-11T10:31:59","guid":{"rendered":"http:\/\/webposible.com\/xposible\/?p=45"},"modified":"2009-03-11T12:31:59","modified_gmt":"2009-03-11T10:31:59","slug":"el-complicado-papel-de-los-proxys-transcodificadores-en-la-web-movil","status":"publish","type":"post","link":"http:\/\/webposible.com\/xposible\/2009\/el-complicado-papel-de-los-proxys-transcodificadores-en-la-web-movil\/","title":{"rendered":"El complicado papel de los proxys-transcodificadores en la web m\u00f3vil"},"content":{"rendered":"<p>Nadie me podr\u00e1 convencer que el <strong>dise\u00f1o y desarrollo de sitios web para dispositivos m\u00f3viles es much\u00edsimo m\u00e1s complicado<\/strong> que la web para dispositivos de sobremesa. Nos podemos quejar que en la web de \u00abmonitores grandes\u00bb es complicado, porque no todos los usuarios tienen la misma resoluci\u00f3n, navegadores, configuraci\u00f3n, o sistema operativo&#8230; pero en el caso de la web m\u00f3vil la <em>fauna<\/em> es mucho m\u00e1s variada y desconocida.<\/p>\n<p>El \u00e9xito, la difusi\u00f3n y presencia navengado por internet del <span xml:lang=\"en\">iPhone<\/span> e <span xml:lang=\"en\">iPod Touch<\/span>, facilita y justifica bastante los desarrollos para \u00e9stos dispositivos: hay muchos, sus caracter\u00edsticas est\u00e1n muy bien documentadas. Adem\u00e1s al contar con wi-fi y estar asociados en casi siempre a un plan de datos (en el caso del <span xml:lang=\"en\">iPhone<\/span>), son dispositivos desde los que se navega y mucho por internet. Y, c\u00e1spita, tienen una experiencia de usuario brutal.<\/p>\n<p>\u00bfY el resto de los dispositivos? La teor\u00eda dice que se deben dise\u00f1ar los sitios web para un n\u00famero limitado de tipos dispositivos con unas caracter\u00edsticas comunes (tama\u00f1o de pantalla, soporte de lenguajes de marcado, estilos, scripts,&#8230;), y tras el prototipado, en la fase de desarrollo, detectar las caracter\u00edsticas de los dispositivos gracias a su <span xml:lang=\"en\">user-agent<\/span>, y enviar el c\u00f3digo y contenido optimizado.<\/p>\n<p>Entre la opci\u00f3n anterior, y dejar que el navegador del peque\u00f1o dispositivo se las apa\u00f1e como pueda para mostrar una p\u00e1gina plagada de tablas para maquetar, hay un amplio espectro de posibilidades en el desarrollo de web m\u00f3vil (no todas recomendables, por supuesto).<\/p>\n<p>Pero hay que ser realista, y la web todav\u00eda no est\u00e1 lejos de ser un entorno agradable para dispositivos m\u00f3viles navegando por internet (salvo excepciones, y afortunadamente cada vez m\u00e1s).<\/p>\n<p>Teniendo en cuenta que no todos los sitios web est\u00e1n preparados para recibir visitas de <em>peque\u00f1as pantallitas<\/em> (por no hablar de usuarios con discapacidades y sistemas operativos-navegadores-configuraci\u00f3n <em>diferentes<\/em>), hay pocas formas de navegar con una experienca de usuario no-demasiado-penosa:<\/p>\n<ul>\n<li> Usando navegadores del tipo <span xml:lang=\"en\">Opera Mini<\/span> o <span xml:lang=\"en\">Bolt<\/span>, en los que un <em xml:lang=\"en\">gateway<\/em> o pasarela act\u00faa como intermediario entre el sitio web y el dispositivo, enviando el contenido adaptado (y en el caso de <span xml:lang=\"en\">Opera Mini<\/span>, ni siquiera es una p\u00e1gina web, sino un fichero de tipo <acronym title=\"Opera Binary Markup Language\" xml:lang=\"en\">OBML<\/acronym>). Ahorra mucho peso y permite a muchos terminales mejorar notablemente las capacidades de navegaci\u00f3n y la experiencia de usuario.<\/li>\n<li>Navegar a trav\u00e9s de sitios web o portales &#8211; en muchas ocasiones de las propias operadoras de telefon\u00eda o <em xml:lang=\"en\">carriers<\/em> &#8211; que adaptan el c\u00f3digo y contenido a los terminales.<\/li>\n<\/ul>\n<p>En los dos casos, surge un elemento de gran importancia, y que al igual que los \u00e1rbitros en un partido de f\u00fatbol, es mejor que no se hagan notar. Hablo de los <em xml:lang=\"en\">proxys<\/em> y <strong>transcodificadores<\/strong>.<\/p>\n<p>El funcionamiento, si no lo conoces, te lo puedes imaginar: hay una web y un navegador que si se juntan, hacen <em>catacrocker<\/em>. Soluci\u00f3n: que <em>algo<\/em> act\u00fae como intermediario para adaptar el c\u00f3digo y contenido original del sitio web al navegador del dispositivo m\u00f3vil:<\/p>\n<ul>\n<li> si s\u00f3lo admite 10 <abbr title=\"Kilobytes\" xml:lang=\"en\">Kbs<\/abbr> y la p\u00e1gina pesa 100 <abbr title=\"Kilobytes\" xml:lang=\"en\">Kbs<\/abbr>, pues se \u00abtrocea\u00bb.<\/li>\n<li>si hay im\u00e1genes <acronym title=\"Portable Network Graphic\" xml:lang=\"en\">PNG<\/acronym> mayores que la pantalla y adem\u00e1s el terminal no las soporta, pues la reduce y transforma en <acronym title=\"Graphics Interchange Format\" xml:lang=\"en\">GIF<\/acronym>.<\/li>\n<li>&#8230;<\/li>\n<\/ul>\n<p>Si un sitio web no est\u00e1 preparado para recibir a internautas m\u00f3viles &#8211; exceptuamos aqu\u00ed a los navegadores que muestran la web miniaturizada en pantalla y no la \u00abtrocean\u00bb en diferentes p\u00e1ginas -, un transcodificador puede ser la diferencia entre una visita y un en error (con la l\u00f3gica frustaci\u00f3n del usuario).<\/p>\n<p>Pero&#8230; \u00bfy los sitios web que est\u00e1n preparados para los dispositivos m\u00f3viles? En principio no deber\u00eda hacer nada \u00abintrusivo\u00bb, como cambiar la lenguaje de marcado, estilos, cabeceras <acronym title=\"Hiper Text Mark-up Language\" xml:lang=\"en\">HTML<\/acronym>, <em xml:lang=\"en\">user-agent<\/em>,&#8230; y no hablemos de modificar el dise\u00f1o o el contenido: por ejemplo cambiando los colores corporativos, a\u00f1adir una barra de navegaci\u00f3n propia, o incluso incluir publicidad sin el consentimiento y participaci\u00f3n en los posibles beneficios del sitio web que se est\u00e1 visitando. \u00bfY qu\u00e9 pasa con las p\u00e1ginas web seguras?<\/p>\n<p>Consecuencia: algo que en principio puede ser \u00ab\u00fatil\u00bb, puede acabar siendo siendo algo deleznable y vil si no se act\u00faa de manera responsable.<\/p>\n<p>Si quieres saber cu\u00e1les son los l\u00edmites \u00abtolerables\u00bb para los transcodificadores  ajenos  (no hablo obviamente de los que est\u00e1n actuando del lado del servidor), puedes dar un vistazo al <a xml:lang=\"en\" hreflang=\"en\" href=\"http:\/\/wurfl.sourceforge.net\/manifesto\/\">Rules for Responsible Reformatting: A Developer Manifesto<\/a>, de <span xml:lang=\"it\">Luca Passani<\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nadie me podr\u00e1 convencer que el dise\u00f1o y desarrollo de sitios web para dispositivos m\u00f3viles es much\u00edsimo m\u00e1s complicado que la web para dispositivos de sobremesa. Nos podemos quejar que en la web de \u00abmonitores grandes\u00bb es complicado, porque no todos los usuarios tienen la misma resoluci\u00f3n, navegadores, configuraci\u00f3n, o sistema operativo&#8230; pero en el [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[41,40,39,67],"_links":{"self":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/45"}],"collection":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":3,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":48,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/45\/revisions\/48"}],"wp:attachment":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}