{"id":4462,"date":"2017-03-10T10:00:51","date_gmt":"2017-03-10T13:00:51","guid":{"rendered":"http:\/\/www.marcelosoler.com\/?p=4462"},"modified":"2025-01-03T16:48:13","modified_gmt":"2025-01-03T19:48:13","slug":"responsive-design-el-diseno-adaptable","status":"publish","type":"post","link":"https:\/\/marcelosoler.com\/b4\/responsive-design-el-diseno-adaptable\/","title":{"rendered":"El dise\u00f1o adaptable"},"content":{"rendered":"<div id=\"pl-4462\"  class=\"panel-layout\" ><div id=\"pg-4462-0\"  class=\"panel-grid panel-no-style\"  style=\"margin-bottom: 12px\" ><div id=\"pgc-4462-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-4462-0-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child\" data-index=\"0\" style=\"margin-bottom: 12px\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t><h3 class=\"widget-title\">Dise\u00f1o responsivo<\/h3>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<blockquote>\n<p>\u201cAcepta el flujo y reflujo de las cosas.<br \/>\nAlim\u00e9ntalas, pero no las poseas.\u201d<\/p>\n<p style=\"text-align: right;\"><strong>\u2014Lao-Ts\u00e9, \u201cD\u00e0o D\u00e9 Jing\u201d; cap\u00edtulo 2.\u00a0 <\/strong><\/p>\n<\/blockquote>\n<p>Quiz\u00e1s deber\u00edamos ponderar que el control que tenemos sobre los medios gr\u00e1ficos, los paradigmas, c\u00e1nones, leyes y pautas disciplinarias que hemos elaborado a lo largo de la historia del dise\u00f1o, <strong>son nada m\u00e1s que una funci\u00f3n expresiva de sus l\u00edmites<\/strong>, antes que una antolog\u00eda de sus <em>virtudes<\/em> y <em>bondades<\/em>.<\/p>\n<p>Los estatutos del dise\u00f1o gr\u00e1fico y tipogr\u00e1fico, pero tambi\u00e9n de objetos f\u00edsicos tridimensionales, <strong>no constituyen un manual metodol\u00f3gico<\/strong> para la resoluci\u00f3n de problemas, sino <strong>un arsenal de restricciones obligadas.<\/strong><\/p>\n<p>Las dificultades del lenguaje impreso, tales y como la gram\u00e1tica o la ortograf\u00eda, lo son tambi\u00e9n para la escritura en general.<\/p>\n<p>\u201cLo sucesivo del lenguaje indebidamente exagera los hechos que indicamos, ya que cada palabra abarca un lugar en la p\u00e1gina y un instante en la mente del lector\u2026 <strong>todo lenguaje es de \u00edndole sucesiva<\/strong>, no es h\u00e1bil para razonar lo eterno, lo intemporal\u201d, afirmaba Jorge Luis Borges.<\/p>\n<p>En \u2018El Aleph\u2019 se confesaba incapaz de superar aquellos obst\u00e1culos porque el lenguaje es \u201cun alfabeto de s\u00edmbolos cuyo ejercicio presupone un pasado que los interlocutores comparten\u2026 <strong>Lo que vieron mis ojos fue simult\u00e1neo: lo que transcribir\u00e9, sucesivo, porque el lenguaje lo es<\/strong>. Algo, sin embargo, recoger\u00e9.\u201d<\/p>\n<h4>El valor de la experiencia<\/h4>\n<p>As\u00ed como con la imprenta de tipos m\u00f3viles vislumbramos para la <strong>tipograf\u00eda<\/strong> un campo netamente diferenciado del de la <strong>caligraf\u00eda<\/strong> \u2013aunque conservemos los rasgos m\u00e1s esenciales y continuemos trabajando con trazos\u2013 debemos comprender y aceptar el hecho de que <strong>las pantallas no tienen las mismas limitaciones que el papel<\/strong> y estamos forzados dise\u00f1ar para esta nueva flexibilidad sin abandonar la experiencia.<\/p>\n<p>Durante su evoluci\u00f3n inicial, la invenci\u00f3n de Gutenberg se emple\u00f3 con un apego plausible a imagen y semejanza de las reglas de la caligraf\u00eda manuscrita, asistimos a <strong>un dise\u00f1o para pantallas que deber\u00e1 mutar hacia su propio deber ser<\/strong> y dejar de imitar a la p\u00e1gina impresa.<\/p>\n<p>Cuando un medio nuevo toma prestadas cosas de otro preexistente, algo de lo que toma a\u00fan tiene sentido, pero <strong>la mayor parte de lo conseguido es s\u00f3lo lit\u00fargico, protocolar, irreflexivo, imitativo y antojadizo<\/strong>, obedece a un dogma de lo impropio.<\/p>\n<p>Con el tiempo, <strong>el nuevo medio desarrolla sus convenciones<\/strong> particulares y, m\u00e1s tarde o m\u00e1s temprano, rompe aquellas que han dejado de tener sentido.<\/p>\n<p>Esto <strong>no significa abandonar las experiencias obtenidas<\/strong> a lo largo de siglos de p\u00e1ginas impresas y milenios de escritura, sino entender qu\u00e9 porci\u00f3n de todo lo aprendido conviene a los nuevos medios, y qu\u00e9 ha pasado a ser, sobre las pantallas, un ritual est\u00e9ril y, en el mejor de los casos, in\u00fatil.<\/p>\n<\/div>\n<\/div><\/div><div id=\"panel-4462-0-0-1\" class=\"so-panel widget widget_sow-editor\" data-index=\"1\" style=\"margin-bottom: 12px\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t><h3 class=\"widget-title\">Del papel a la pantalla<\/h3>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<blockquote>\n<p>\u201cLo mejor del hombre es como el agua<br \/> que beneficia a todas las cosas y no las contiene;<br \/> que fluye por los lugares que otros desde\u00f1an,<br \/> donde est\u00e1 en armon\u00eda con el Camino.\u201d<\/p>\n<p style=\"text-align: right;\"><strong>\u2014Lao-Ts\u00e9, \u201cD\u00e0o D\u00e9 Jing\u201d; cap\u00edtulo 8.\u00a0 <\/strong><\/p>\n<\/blockquote>\n<p>El <strong>dise\u00f1o<\/strong>, considerado en absoluto, es una disciplina de <strong>prognosis<\/strong>, es decir:<\/p>\n<ul>\n<li>se caracteriza por <strong>imaginar c\u00f3mo podr\u00edan ser las cosas<\/strong><\/li>\n<li>en lugar de limitarse a <strong>describir a las cosas como son<\/strong>.<\/li>\n<\/ul>\n<p>Por esta raz\u00f3n <strong>no es posible probar<\/strong> la aptitud de una soluci\u00f3n, sino s\u00f3lo <strong>validarla<\/strong> o, a lo sumo, <strong>verificar<\/strong> su efectividad.<\/p>\n<p>La veracidad, para el dise\u00f1o, es s\u00f3lo <strong>transitoria<\/strong> y, en un punto, <strong>precaria<\/strong>.<\/p>\n<p>El <strong>Dise\u00f1o de la Interacci\u00f3n humana<\/strong> con los dispositivos y el entorno es un territorio particular del dise\u00f1o,<\/p>\n<ul>\n<li>centrado en las <strong>formas,<\/strong> pero fundamentalmente,<\/li>\n<li>ajustado a los <strong>comportamientos<\/strong>.<\/li>\n<\/ul>\n<p>El foco principal est\u00e1 puesto, en los <strong>intereses y necesidades de los usuarios<\/strong> por sobre las cuestiones t\u00e9cnicas propias de la resoluci\u00f3n de problemas.<\/p>\n<p>Con frecuencia, los dise\u00f1adores de la interacci\u00f3n se preguntan c\u00f3mo pueden hacer para que sus elaboraciones <strong>mantengan el mismo aspecto con independencia de la plataforma<\/strong>. Esta preocupaci\u00f3n parte de la creencia de que los dise\u00f1adores son quienes tienen \u2013o deber\u00edan tener\u2013 el control absoluto.<\/p>\n<p>Habituados al <strong>soliloquio del dise\u00f1o<\/strong> de la p\u00e1gina impresa, los dise\u00f1adores parecen ocupar el lugar del sabelotodo que ambiciona<\/p>\n<ul>\n<li><strong>la anulaci\u00f3n de los deseos de los usuarios<\/strong> y de<\/li>\n<li><strong>las decisiones que toman basados en sus experiencias perceptivas<\/strong><\/li>\n<\/ul>\n<p>Nada enfurece tanto como dejar que otro \u2013para colmo inexperto\u2013 establezca el tama\u00f1o de los caracteres, o la fuente tipogr\u00e1fica que le resultan m\u00e1s c\u00f3modos para la lectura. Esa decisi\u00f3n estuvo siempre reservada para el dise\u00f1ador editorial, de la misma manera que la organizaci\u00f3n del espacio habitable se licencia para la autoridad del arquitecto, o el cuidado de la salud para la del m\u00e9dico.<\/p>\n<p><strong>En la cultura de la impresi\u00f3n, el dise\u00f1ador es una suerte de dios<\/strong>; si proviene de la <strong>autoedici\u00f3n<\/strong> \u2013lo que hoy en d\u00eda es m\u00e1s que probable\u2013 se ha nutrido de la industria de <strong>WYSIWYG<\/strong> con sus cultos y ceremonias hasta el despotismo.<\/p>\n<p>Las mayores diferencias entre el <strong>dise\u00f1o de la interacci\u00f3n<\/strong> y el <strong>dise\u00f1o gr\u00e1fico<\/strong> est\u00e1n dadas en<\/p>\n<ul>\n<li>los <strong>rasgos din\u00e1micos de los objetos<\/strong> del dise\u00f1o interactivo, en contraposici\u00f3n con<\/li>\n<li>el <strong>car\u00e1cter puramente<\/strong> <strong>est\u00e1tico<\/strong> del dise\u00f1o de la comunicaci\u00f3n visual tradicional.<\/li>\n<\/ul>\n<p>En ese sentido, tambi\u00e9n aparece una nueva <strong>relaci\u00f3n<\/strong> <strong>bi\/pluridireccional<\/strong> \u2013o de ida y vuelta\u2013 entre <strong>objetos y usuarios<\/strong> a trav\u00e9s de las <strong>interfaces<\/strong>, lo que lleva a reconsiderar a las entidades dise\u00f1adas como verdaderos <strong>sujetos<\/strong> <strong>activos<\/strong> individuales, y no meras cosas impasibles.<\/p>\n<p>La <strong>imposibilidad de controlar la representaci\u00f3n<\/strong> de la informaci\u00f3n puede percibirse como una <strong>limitaci\u00f3n<\/strong>, cuando no una <strong>falla<\/strong> del dise\u00f1o interactivo, desde el punto de vista WYSWYG.<\/p>\n<p>Si miramos desde el otro lado de la lupa, <strong>el control total sobre la p\u00e1gina impresa no es una ventaja: es una limitaci\u00f3n <\/strong>de ese medio.<\/p>\n<p>El poder sobre<\/p>\n<ul>\n<li>la fijaci\u00f3n de los <strong>tama\u00f1os<\/strong> de los textos,<\/li>\n<li>la <strong>inalterabilidad<\/strong> de esos tama\u00f1os,<\/li>\n<li>las <strong>dimensiones<\/strong> de las p\u00e1ginas y<\/li>\n<li>la <strong>imposibilidad de modificarlas<\/strong><\/li>\n<\/ul>\n<p>son <strong>meros hechos del medio<\/strong>, y no necesariamente beneficiosos para el lector, que poco y nada puede hacer al respecto; son, cuanto menos, arbitrios basados<\/p>\n<ul>\n<li><strong>en las cualidades favorables del soporte,<\/strong><\/li>\n<li><strong>en las capacidades visuales del dise\u00f1ador<\/strong>,<\/li>\n<li><strong>en su percepci\u00f3n del bienestar de la lectura<\/strong>, elegidos<\/li>\n<li><strong>en la comodidad de un estudio<\/strong> con condiciones ambientales \u00f3ptimas.<\/li>\n<\/ul>\n<p>Se necesita entonces <strong>reconsiderar los credos<\/strong> (inclusive para el dise\u00f1o de impresos, pero mucho m\u00e1s para el dise\u00f1o de interacci\u00f3n) y <strong>tolerar<\/strong> sin fatalismo <strong>\u201cel flujo y reflujo de las cosas\u201d<\/strong> en un mundo caracterizado por la movilidad y el cambio permanentes.<\/p>\n<p>Claro que no es sencillo cambiar las formas de pensar y de actuar: las <strong>creencias<\/strong> arraigadas por vastos espacios de certidumbre no se pierden con facilidad.<\/p>\n<p>Sin embargo, la <strong>toma de conciencia<\/strong> de que gran parte de lo que uno da por sentado requiere una reevaluaci\u00f3n ayuda a revisar los dogmas.<\/p>\n<p>Esto no significa que ya nada sirve: s\u00f3lo nos muestra que <strong>nada puede permanecer inalterable<\/strong>. La <strong>superaci\u00f3n de los or\u00edgenes<\/strong> en la p\u00e1gina impresa implica <strong>asumir la sabidur\u00eda y la experiencia<\/strong> pasadas y trazar, a partir de all\u00ed, <strong>un curso propio<\/strong>.<\/p>\n<p>De esta forma reciente de abordaje de los problemas se desprende <strong>un modo nuevo de enfrentar su resoluci\u00f3n especializada<\/strong>:<\/p>\n<ul>\n<li>las perspectivas de <strong>ideaci\u00f3n<\/strong> y los <strong>resultados<\/strong> se ajustan, de la mejor manera posible y cada vez m\u00e1s, a las <strong>predilecciones<\/strong> y a las <strong>metas particulares<\/strong> de los usuarios, algo que no era ni es factible en otros campos del dise\u00f1o;<\/li>\n<li>la <strong>flexibilidad<\/strong> de las soluciones es su <strong>capacidad de adaptaci\u00f3n<\/strong> evolutiva;<\/li>\n<li>la <strong>accesibilidad<\/strong> y <strong>legibilidad<\/strong> deben ser independientes<\/li>\n<li>de la <strong>resoluci\u00f3n<\/strong>,<\/li>\n<li>del <strong>tama\u00f1o<\/strong>,<\/li>\n<li>de la <strong>disposici\u00f3n<\/strong> y<\/li>\n<li>de la <strong>cantidad de colores<\/strong> de las pantallas, sin olvidar que eventualmente pueden ser impresas o le\u00eddas en voz alta por int\u00e9rpretes autom\u00e1ticos, o codificadas en Braille.<\/li>\n<\/ul>\n<p>Esto obliga a revisar los <strong>par\u00e1metros arquet\u00edpicos de la comunicaci\u00f3n visual<\/strong>:<\/p>\n<ul>\n<li>en algunos casos, aparecer\u00e1n <strong>restricciones e impedimentos<\/strong> propios de los nuevos soportes;<\/li>\n<li>en otros, ser\u00e1 posible conseguir <strong>avances y mejoras<\/strong> que devienen de cualidades y propiedades que no exist\u00edan con anterioridad.<\/li>\n<\/ul>\n<p>La mayor fortaleza del DxI \u2013muchas veces vista como una limitaci\u00f3n o como un defecto\u2013 es la <strong>flexibilidad<\/strong>.<\/p>\n<p>Tal vez sea preciso <strong>abandonar el monopolio del control<\/strong> y <strong>abrazar el dise\u00f1o flexible<\/strong>, crear <strong>accesibilidad<\/strong>, esa mezcla ambigua de elasticidad y plasticidad.<\/p>\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#bbbbbb;border-radius:0px;max-width:none\"><div class=\"su-box-title\" style=\"background-color:#eee;color:#444;border-top-left-radius:0px;border-top-right-radius:0px\">Aclaraciones<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:0px;border-bottom-right-radius:0px\"><\/p>\n<p><strong>Prognosis:<\/strong> del griego, \u201cprevisi\u00f3n\u201d; t\u00e9rmino tomado de la medicina: conjunto de datos estimados y tomados como ciertos relacionados con el resultado probable, la duraci\u00f3n esperada y la descripci\u00f3n de la evoluci\u00f3n, a partir de la situaci\u00f3n actual.<\/p>\n<p><strong>Dise\u00f1o de la Interacci\u00f3n:<\/strong> designado con las siglas DxI, distintivo del Dise\u00f1o Multimedia.<\/p>\n<p><strong>WYSIWYG:<\/strong> What You See Is What You Get, o \u201clo que ve es lo que obtiene\u201d, refiere a los sistemas de edici\u00f3n capaces de prefigurar en pantalla, de manera m\u00e1s o menos fiel, el resultado final del producto dise\u00f1ado.<\/p>\n<p><strong>Relaci\u00f3n bi\/pluridireccional:<\/strong> la que se contrapone al modelo b\u00e1sico emisor-mensaje-receptor (y sus elementos complementarios canal-c\u00f3digo-contexto-marco).<\/p>\n<p><strong>Usuarios:<\/strong> los usuarios (lectores-visualizadores) son los destinatarios finales. Los productores de contenidos y los medios son cardinales, pero el dise\u00f1o no deber\u00eda sujetarse de lleno a ellos.<\/p>\n<p><strong>Resoluci\u00f3n de pantalla:<\/strong>\u00a0La densidad de puntos \u2013p\u00edxeles\u2013 que puede mostrarse en una pantalla; de manera expl\u00edcita, suele enunciarse en puntos por pulgada (dpi); de modo impl\u00edcito, en p\u00edxeles (ancho x alto). Ver tabla de resoluciones estandarizadas al final.<\/p>\n<p><strong>Tama\u00f1o de pantalla:<\/strong> El ancho y el alto de la pantalla en unidades de medida; a veces tambi\u00e9n expresada como las dimensiones de la diagonal (en pulgadas).<\/p>\n<p><strong>\u00a0Disposici\u00f3n de pantalla:\u00a0<\/strong>T\u00edpicamente vertical (retrato) u horizontal (apaisada); tambi\u00e9n seg\u00fan las proporciones ancho y alto.<\/p>\n<p><strong>Cantidad de colores de pantalla:<\/strong>\u00a0el n\u00famero de colores\/valores admisibles por los dispositivos para su representaci\u00f3n aproximada.<\/p>\n<p><\/div><\/div>\n<\/div>\n<\/div><\/div><div id=\"panel-4462-0-0-2\" class=\"so-panel widget widget_sow-editor\" data-index=\"2\" style=\"margin-bottom: 12px\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t><h3 class=\"widget-title\">La multiplicidad de los soportes para las interfaces<\/h3>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p>La proliferaci\u00f3n dispositivos con visores de diferentes<\/p>\n<ul>\n<li><strong>tama\u00f1os<\/strong>,<\/li>\n<li><strong>resoluciones<\/strong>,<\/li>\n<li><strong>proporciones<\/strong>,<\/li>\n<li><strong>organizaci\u00f3n<\/strong> y<\/li>\n<li><strong>capacidades<\/strong>,<\/li>\n<\/ul>\n<p>junto con una variedad de aplicaciones para los usuarios, imponen \u2013adem\u00e1s de lo antedicho\u2013 la revisi\u00f3n de los <strong>par\u00e1metros y premisas privativas del dise\u00f1o de la comunicaci\u00f3n a trav\u00e9s de pantallas<\/strong>.<\/p>\n<p>El <strong>dise\u00f1o adaptativo<\/strong> deber\u00e1 contemplar, en principio, las cuestiones primordiales relacionadas con<\/p>\n<ul>\n<li>la <strong>visualizaci\u00f3n<\/strong><\/li>\n<li>la <strong>legibilidad<\/strong><\/li>\n<li>la <strong>navegabilidad<\/strong><\/li>\n<\/ul>\n<p>para <strong>distintos soportes y entornos<\/strong> sin que se degrade la \u201cilustraci\u00f3n\u201d, <strong>la manifestaci\u00f3n visible de la informaci\u00f3n<\/strong>.<\/p>\n<p><strong>Compatibilizar<\/strong> la representaci\u00f3n de los contenidos en contextos dis\u00edmiles requiere, como principio b\u00e1sico, la <strong>simplificaci\u00f3n<\/strong> de los m\u00e9todos para lograr el <strong>m\u00e1ximo de afinidad con un m\u00ednimo de recursos<\/strong>.<\/p>\n<p>Las primeras aproximaciones concretas \u2013en muchos casos todav\u00eda vigentes\u2013 se hicieron desde la creaci\u00f3n desagregada de <strong>dise\u00f1os m\u00faltiples<\/strong>, acondicionados y normalizados para cada clase de dispositivo.<\/p>\n<p>Las mayores <strong>desventajas<\/strong> de este punto de vista residen en que<\/p>\n<ul>\n<li>es <strong>dispendioso<\/strong> y<\/li>\n<li><strong>dificulta la actualizaci\u00f3n<\/strong> de los contenidos, al tiempo que<\/li>\n<li><strong>requiere de una base de datos<\/strong> amplia y din\u00e1mica<\/li>\n<\/ul>\n<p>para reconocer a cada entorno particular y devolverle la <strong>informaci\u00f3n adecuada a sus propiedades<\/strong> espec\u00edficas.<\/p>\n<p>Un enfoque como este va a contrapelo de las <strong>posibilidades y provechos<\/strong> de los medios interactivos, y tambi\u00e9n desatiende su <strong>caducidad<\/strong> caracter\u00edstica.<\/p>\n<p>Dise\u00f1amos antes <strong>versiones<\/strong> que <strong>respuestas definitivas<\/strong>, porque <strong>los problemas cambian<\/strong> y <strong>las soluciones prescriben<\/strong> para engendrar nuevos problemas.<\/p>\n<p>Mientras el dise\u00f1o tipogr\u00e1fico apunta a durar d\u00e9cadas, y el dise\u00f1o arquitect\u00f3nico elige como campo de acci\u00f3n imaginario a la eternidad<a href=\"#_ftn1\" name=\"_ftnref1\">[1]<\/a>, <strong>el dise\u00f1o interactivo se propone objetivos que pueden desaparecer a los pocos d\u00edas<\/strong>.<\/p>\n<p>Si esto fuera poco, dise\u00f1amos de manera simult\u00e1nea para dispositivos basados en<\/p>\n<ul>\n<li>el paradigma <strong>rat\u00f3n-teclado<\/strong>,<\/li>\n<li>los teclados <strong>T9<\/strong>,<\/li>\n<li>las interfaces basadas en <strong>l\u00e1pices o plumas digitales<\/strong>,<\/li>\n<li>los <strong>teclados virtuales<\/strong>,<\/li>\n<li>las <strong>interfaces t\u00e1ctiles puras<\/strong>,<\/li>\n<li>las <strong>interfaces t\u00e1ctiles gestuales<\/strong>,<\/li>\n<li>las <strong>pantallas peque\u00f1as<\/strong>,<\/li>\n<li>los <strong>dispositivos port\u00e1tiles<\/strong> para juegos,<\/li>\n<\/ul>\n<p>y un sinf\u00edn de alternativas y variantes de toda \u00edndole. La <strong>movilidad<\/strong> parece ser la tendencia y, cada vez con una insistencia mayor, las organizaciones procuran aumentar de manera creciente su <strong>presencia<\/strong> en los dispositivos aut\u00f3nomos con conectividad inal\u00e1mbrica.<\/p>\n<p>La <strong>experiencia m\u00f3vil en subdominios separados<\/strong>, en espacios distintos de los dedicados a dispositivos de escritorio, parece ya <strong>destinada al olvido<\/strong>.<\/p>\n<p><strong>El DxI requiere una base flexible<\/strong>, <strong>adaptable<\/strong>, <strong>fluida<\/strong>, para lo cual es necesario <strong>cambiar la forma en que pensamos las soluciones<\/strong> porque, de otro modo, ning\u00fan proyecto se ajustar\u00e1 m\u00e1s all\u00e1 del contexto para el que fue ideado.<\/p>\n<p>Las <strong>respuestas el\u00e1sticas<\/strong>, que fueron pensadas para las computadoras de escritorio, funcionan de modo bastante aceptable en el contexto de las computadoras de escritorio, pero no mucho m\u00e1s all\u00e1.<\/p>\n<p>Cuando las resoluciones son bajas y los tama\u00f1os de pantalla disponibles son materialmente peque\u00f1os, aparecen disposiciones indecorosas; y esto sucede tambi\u00e9n para el espectro de las resoluciones altas y las dimensiones generosas.<\/p>\n<p>Hace unos pocos a\u00f1os, la arquitectura ha dado a luz a una disciplina conocida como \u201carquitectura de respuesta\u201d, fundada en la noci\u00f3n de que los espacios f\u00edsicos deber\u00edan poder adaptarse a las conductas y usos de las personas que los habitan, a trav\u00e9s de una combinaci\u00f3n de nuevos materiales d\u00factiles, un dise\u00f1o adaptable y el apoyo la rob\u00f3tica.<\/p>\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#bbbbbb;border-radius:0px;max-width:none\"><div class=\"su-box-title\" style=\"background-color:#eee;color:#444;border-top-left-radius:0px;border-top-right-radius:0px\">Aclaraciones<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:0px;border-bottom-right-radius:0px\"><\/p>\n<p><strong>Vida \u00fatil del dise\u00f1o arquitect\u00f3nico:<\/strong> la voluntad de la perpetuaci\u00f3n puede parecer excesiva, pero sobran los ejemplos de tipolog\u00edas \u2013en lo intangible\u2013 y de edificaciones \u2013en lo material\u2013 que han perdurado a trav\u00e9s de los siglos.<\/p>\n<p><strong>T9:<\/strong> acr\u00f3nimo que significa texto en 9 teclas y que refiere a una tecnolog\u00eda de texto predictivo para tel\u00e9fonos m\u00f3viles (en particular los que disponen de un teclado 3&#215;4)<\/p>\n<p><strong>Arquitectura de respuesta:<\/strong> una suerte de extensi\u00f3n de la <em>dom\u00f3tica<\/em>, que es la automatizaci\u00f3n de los edificios destinados a la vivienda residencial.<\/p>\n<p><\/div><\/div>\n<\/div>\n<\/div><\/div><div id=\"panel-4462-0-0-3\" class=\"so-panel widget widget_sow-editor panel-last-child\" data-index=\"3\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t><h3 class=\"widget-title\">La ruta de la adaptaci\u00f3n<\/h3>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<blockquote>\n<p>\u201cEl Camino es determinado por el uso,<br \/> pero entonces la forma se pierde.<br \/> No te aferres a las formas<br \/> sino deja a la sensaci\u00f3n fluir hacia el mundo<br \/> como un r\u00edo que se dirige hasta el mar.\u201d<\/p>\n<p style=\"text-align: right;\"><strong>\u2014Lao-Ts\u00e9, \u201cD\u00e0o D\u00e9 Jing\u201d; cap\u00edtulo 32.\u00a0 <\/strong><\/p>\n<\/blockquote>\n<p>El <strong>dise\u00f1o de la interacci\u00f3n<\/strong> implica antes una cuesti\u00f3n de <strong>realizaci\u00f3n<\/strong> que de <strong>representaci\u00f3n,<\/strong> que requiere<\/p>\n<ul>\n<li><strong>pensar m\u00e1s<\/strong> en lo que los objetos <strong>hacen<\/strong><\/li>\n<li><strong>pensar menos<\/strong> en lo que los objetos <strong>parecen<\/strong><\/li>\n<\/ul>\n<p>En la controversia interminable sobre el papel que le cabe a <strong>forma<\/strong> y <strong>funci\u00f3n<\/strong>, es el momento de dejar de lado a la <strong>apariencia<\/strong> de la idea preconcebida y tratar de que la idea <strong>funcione<\/strong>. Para esto es indispensable separar<\/p>\n<ul>\n<li>la <strong>imagen<\/strong><\/li>\n<li>del <strong>contenido<\/strong><\/li>\n<\/ul>\n<p>Para el dise\u00f1o gr\u00e1fico convencional, <strong>los usos se derivan de formas<\/strong> que los anteceden; as\u00ed, utilizamos la variante <em>it\u00e1lica<\/em> de una fuente<\/p>\n<ul>\n<li>para <strong>enfatizar<\/strong> un texto,<\/li>\n<li>para indicar que se emplea una <strong>palabra extranjera<\/strong>,<\/li>\n<li>para resaltar que se trata de una <strong>cita<\/strong>.<\/li>\n<\/ul>\n<h4>Hacia una <em>web<\/em> sem\u00e1ntia<\/h4>\n<p>En el HTML original se imitaba a esta manera de trabajar, para lo cual se hab\u00edan creado <strong>etiquetas espec\u00edficas de presentaci\u00f3n<\/strong> como<\/p>\n<ul>\n<li><strong>&lt;i&gt;<\/strong> (<em>italic<\/em>, it\u00e1lica) o<\/li>\n<li><strong>&lt;b&gt;<\/strong> (<em>bold<\/em>, negrita).<\/li>\n<\/ul>\n<p>Pero si la intenci\u00f3n es el <strong>\u00e9nfasis<\/strong>, se requiere abandonar esta metodolog\u00eda en favor de un conjunto de <strong>etiquetas con valor sem\u00e1ntico<\/strong>, que no refieran al uso de una variante tipogr\u00e1fica determinada, como por ejemplo<\/p>\n<ul>\n<li>&lt;em&gt; (<em>emphasis<\/em>, \u00e9nfasis)<\/li>\n<li>&lt;strong&gt; (<em>strong<\/em>, fuerte o marcado)<\/li>\n<\/ul>\n<p>La diferencia puede parecer nimia; sin embargo es sustancial.<\/p>\n<p>Las <strong>hojas de estilo en cascada (CSS)<\/strong> deben utilizarse de manera correcta<\/p>\n<ul>\n<li><strong>para<\/strong> <strong><em>sugerir<\/em><\/strong> la apariencia de los contenidos en la pantalla,<\/li>\n<li><strong>no para <em>controlar<\/em><\/strong> su presentaci\u00f3n.<\/li>\n<\/ul>\n<p>La obediencia precisa a esta noci\u00f3n es esencial, sobre todo si la informaci\u00f3n se presenta, adem\u00e1s, en dispositivos que no soportan CSS. Las hojas de estilo en el dise\u00f1o de interacci\u00f3n pueden verse mejor<\/p>\n<ul>\n<li>como <strong>una<\/strong> <strong>insinuaci\u00f3n<\/strong> de la apariencia m\u00e1s apropiada que<\/li>\n<li>como <strong>un modo determinado<\/strong> para transmitir informaci\u00f3n.<\/li>\n<\/ul>\n<p>En t\u00e9rminos pr\u00e1cticos, el dise\u00f1o adaptativo requiere<\/p>\n<ul>\n<li><strong>hacer algunas cosas<\/strong> y<\/li>\n<li><strong>dejar de hacer otras<\/strong><\/li>\n<\/ul>\n<p>para conseguir la <strong>adaptabilidad<\/strong> de la representaci\u00f3n de los contenidos, como<\/p>\n<ul>\n<li><strong>evitar los absolutos<\/strong> (prescindir de unidades categ\u00f3ricas como p\u00edxeles, puntos tipogr\u00e1ficos o mil\u00edmetros, y adoptar, en lo posible unidades relativas, como % o ems) y<\/li>\n<li><strong>utilizar con cuidado los atributos<\/strong> (no fijar de modo tajante la fuente, el color, el peso)<\/li>\n<\/ul>\n<p>y sin depender por completo de ellos.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>El dise\u00f1o responsivo basado en internet (RWD: Responsive Web Design) es el resultado evolutivo de las transformaciones ocurridas a partir de la d\u00e9cada de 1990 que alteraron para siempre la manera en que concebimos al dise\u00f1o en general.<\/p>\n","protected":false},"author":1,"featured_media":4466,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,13,80],"tags":[],"class_list":["post-4462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-medios","category-reflexiones"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/marcelosoler.com\/b4\/wp-content\/uploads\/2017\/03\/cnx-nota-responsive.jpg","_links":{"self":[{"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/posts\/4462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/comments?post=4462"}],"version-history":[{"count":21,"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/posts\/4462\/revisions"}],"predecessor-version":[{"id":9079,"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/posts\/4462\/revisions\/9079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/media\/4466"}],"wp:attachment":[{"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/media?parent=4462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/categories?post=4462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcelosoler.com\/b4\/wp-json\/wp\/v2\/tags?post=4462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}