{"id":140,"date":"2019-12-06T22:27:48","date_gmt":"2019-12-06T20:27:48","guid":{"rendered":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/?page_id=140"},"modified":"2020-01-21T17:05:20","modified_gmt":"2020-01-21T15:05:20","slug":"2-7-el-diseno-adaptable-o-responsivo","status":"publish","type":"page","link":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/2-7-el-diseno-adaptable-o-responsivo\/","title":{"rendered":"2.7. El dise\u00f1o adaptable o responsivo"},"content":{"rendered":"<p>Desde 2016, el n\u00famero de usuarios de m\u00f3vil a escala internacional super\u00f3 los dos mil millones. De hecho, m\u00e1s del 60 % de las b\u00fasquedas en l\u00ednea ahora provienen de un dispositivo m\u00f3vil. La r\u00e1pida introducci\u00f3n de los dispositivos m\u00f3viles y su uso cada vez m\u00e1s intenso ha llevado a la necesidad de dise\u00f1ar interfaces que sean totalmente funcionales, independientemente del dispositivo desde el que se acceda a ellas (por ejemplo, un ordenador port\u00e1til, un m\u00f3vil o una <em>smart TV<\/em>). El\u00a0<a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"En ingl\u00e9s, <em>responsive web design<\/em>, RWD.\" data-placement=\"top\" data-html=\"true\" >dise\u00f1o web responsivo<\/a> surge de esta necesidad.<\/p>\n<div class=\"featured featured-blue\"><p>Un <strong>sitio web responsivo<\/strong> permite cambiar el dise\u00f1o para ofrecer una experiencia basada en el dispositivo que se utiliza.<\/p>\n<\/div>\n<p>Por ejemplo, un sitio web m\u00f3vil responsivo incluye elementos de dise\u00f1o como:<\/p>\n<ul>\n<li>Texto f\u00e1cilmente legible sin requerir zoom.<\/li>\n<li>Espacio adecuado para interaccionar con elementos usando una interfaz t\u00e1ctil.<\/li>\n<li>Interfaz completa sin desplazamiento horizontal.<\/li>\n<\/ul>\n<figure id=\"attachment_237\" aria-describedby=\"caption-attachment-237\" style=\"width: 765px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-237\" src=\"\/wp-content\/uploads\/2019\/12\/m4357_12.jpg\" alt=\"\" width=\"765\" height=\"377\" srcset=\"\/wp-content\/uploads\/2019\/12\/m4357_12.jpg 765w, \/wp-content\/uploads\/2019\/12\/m4357_12-300x148.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><figcaption id=\"caption-attachment-237\" class=\"wp-caption-text\">Figura 12. Concepto de dise\u00f1o responsivo<br \/>Fuente: <a href=\"https:\/\/www.hughesandco.com\/responsive-web-design-what-you-need-to-know\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.hughesandco.com\/responsive-web-design-what-you-need-to-know\/<\/a>.<\/figcaption><\/figure>\n<p>El dise\u00f1o responsivo ofrece tres <strong>ventajas<\/strong> principales:<\/p>\n<ol>\n<li>Mejora la experiencia y la hace m\u00e1s consistente para cualquier usuario y en cualquier dispositivo.<\/li>\n<li>Aumenta la capacidad de respuesta del sitio web y asegura que las personas que usan un dispositivo m\u00f3vil solo est\u00e9n viendo la informaci\u00f3n m\u00e1s esencial, mejorando as\u00ed la usabilidad la p\u00e1gina.<\/li>\n<li>Aumenta la visibilidad en los buscadores. Una web que ofrece una experiencia efectiva y flexible es priorizada por los motores de b\u00fasqueda.<\/li>\n<\/ol>\n<p>Las <strong>claves<\/strong> del dise\u00f1o:<\/p>\n<div class=\"featured featured-blue\"><p>Una cuadr\u00edcula fluida garantiza que el dise\u00f1o sea flexible y escalable.<\/p>\n<\/div>\n<p>Los elementos tendr\u00e1n un espaciado y una proporci\u00f3n consistentes, y podr\u00e1n ajustarse a un ancho de pantalla relativo. La t\u00e9cnica consiste en usar porcentajes para expresar los anchos de las divisiones de la p\u00e1gina. Es decir, deberemos determinar si una divisi\u00f3n debe ser el 100 % de la p\u00e1gina o algo menos. Sin embargo, a veces no queremos que una divisi\u00f3n se dimensione en un monitor muy grande; en estos casos, podemos aplicar una propiedad de ancho m\u00e1ximo para limitar el tama\u00f1o a esa dimensi\u00f3n.<\/p>\n<figure id=\"attachment_239\" aria-describedby=\"caption-attachment-239\" style=\"width: 765px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-239\" src=\"\/wp-content\/uploads\/2019\/12\/m4357_13.jpg\" alt=\"\" width=\"765\" height=\"321\" srcset=\"\/wp-content\/uploads\/2019\/12\/m4357_13.jpg 765w, \/wp-content\/uploads\/2019\/12\/m4357_13-300x126.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><figcaption id=\"caption-attachment-239\" class=\"wp-caption-text\">Figura 13. Concepto de dise\u00f1o responsivo con cuadr\u00edcula fluida<br \/>Fuente: <a href=\"https:\/\/www.vervesearch.com\/best-practice-guides\/responsive-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.vervesearch.com\/best-practice-guides\/responsive-web-design\/<\/a>.<\/figcaption><\/figure>\n<div class=\"featured featured-blue\"><p>Texto e im\u00e1genes flexibles.<\/p>\n<\/div>\n<p>El texto y las im\u00e1genes flexibles se ajustan dentro del ancho del dise\u00f1o de un sitio web, de acuerdo con la jerarqu\u00eda de contenido establecida en la hoja de estilo. De esta forma, el texto es legible independientemente del dispositivo del usuario final. Con un contenedor flexible (dentro de la cuadr\u00edcula), el texto puede ajustarse con un aumento en el tama\u00f1o de fuente en dispositivos m\u00e1s peque\u00f1os. Para asegurarnos de que las im\u00e1genes sean fluidas, tendremos que crear un estilo que establezca un tama\u00f1o m\u00e1ximo para el escalado de las im\u00e1genes; esto har\u00e1 que la imagen responda y se dimensione para que nunca supere cierto porcentaje de su tama\u00f1o original y as\u00ed evitar que la calidad se vea afectada.<\/p>\n<div class=\"featured featured-blue\"><p><strong>Consultas<\/strong>. Queremos manejar la mayor cantidad de dise\u00f1o receptivo con anchos porcentuales como sea posible.<\/p>\n<\/div>\n<p>Sin embargo, a veces, cuando se dimensiona por porcentaje, hay otros elementos que deben cambiarse para ciertas pantallas o ventanas de tama\u00f1o. Por ejemplo, el tama\u00f1o del texto de los elementos de navegaci\u00f3n puede ser demasiado grande en los tama\u00f1os m\u00e1s peque\u00f1os, o podemos preferir que se apilen algunos elementos o divisiones uno al lado del otro en un tama\u00f1o m\u00e1s peque\u00f1o. Tambi\u00e9n se pueden incluir consultas para ajustar los elementos dependiendo de la orientaci\u00f3n de la pantalla (vertical u horizontal) y para diferentes tipos de medios, como impresi\u00f3n o televisi\u00f3n. Para esto, se utilizan las consultas de medios. Las <strong>consultas de medios<\/strong> son simplemente estilos o reglas especiales que solo se implementar\u00e1n en un tama\u00f1o determinado, permitiendo m\u00faltiples dise\u00f1os utilizando la misma p\u00e1gina web codificada en HTML.<\/p>\n<p><div class=\"featured featured-grey\"><p><strong>Ejercicio<\/strong><\/p>\n<p>En uno de los ejercicios anteriores hemos realizado un primer prototipo del dise\u00f1o de una web de b\u00fasqueda de pisos; ahora vamos a usar Sketch (para usuarios de Mac OS) o Figma (para usuarios de Windows) para modificar el comportamiento de algunos elementos en b\u00fasqueda de un dise\u00f1o m\u00e1s responsivo:<\/p>\n<ol>\n<li>Identificad qu\u00e9 elementos de la p\u00e1gina principal estar\u00e1n presentes en la pantalla de un PC, la de una tableta y la de un m\u00f3vil.<\/li>\n<li>Identificad qu\u00e9 elementos ser\u00e1n diferentes o incluso desaparecer\u00e1n en algunos de estos tipos de pantalla.<\/li>\n<li>Cread el t\u00edtulo (h1) y subt\u00edtulo (h2) de la p\u00e1gina si no lo hab\u00e9is hecho ya. En la versi\u00f3n de PC, el t\u00edtulo h1 podr\u00eda ser de unos 72 px, mientras que el h2 de unos 32 px. En el caso de que la web se visualice desde un m\u00f3vil, 72 px es demasiado grande y dificultar\u00eda la legibilidad. Tendremos que hacer que el t\u00edtulo h1 y h2 respondan al tipo de dispositivo. Necesitamos crear un estilo para cada encabezado h1 y luego guardarlo como un estilo de texto con la sintaxis o convenci\u00f3n de nomenclatura correcta. Esto nos permitir\u00e1 seleccionar m\u00e1s tarde el h1 necesario seg\u00fan sea necesario mientras dise\u00f1amos el resto de la p\u00e1gina. Cread los estilos y organizad las diferentes tipograf\u00edas usando la siguiente sintaxis: para el h1 grande para PC usamos Headings\/H1\/Desktop, para una tableta usaremos Headings\/H1\/Tablet y para un m\u00f3vil Headings\/H1\/Phone.<\/li>\n<li>Pod\u00e9is hacer lo mismo con la adaptaci\u00f3n del tipo de h2.<\/li>\n<li>Una cosa m\u00e1s que podemos hacer es configurar los fondos para que tambi\u00e9n sean fluidos. Las alturas de las secciones difieren entre los dise\u00f1os m\u00f3viles y pantallas de PC. Esto significa que tendr\u00e9is que mover los elementos de fondo hacia arriba y hacia abajo a su lugar correcto.<br \/>\n<\/div><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Desde 2016, el n\u00famero de usuarios de m\u00f3vil a escala internacional super\u00f3 los dos mil millones. De hecho, m\u00e1s del 60 % de las b\u00fasquedas en l\u00ednea ahora provienen de un dispositivo m\u00f3vil. La r\u00e1pida introducci\u00f3n de los dispositivos m\u00f3viles y su uso cada vez m\u00e1s intenso ha llevado a la necesidad de dise\u00f1ar interfaces [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/140"}],"collection":[{"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":6,"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/140\/revisions"}],"predecessor-version":[{"id":639,"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/140\/revisions\/639"}],"wp:attachment":[{"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}