{"id":1099,"date":"2023-06-20T13:20:51","date_gmt":"2023-06-20T13:20:51","guid":{"rendered":"https:\/\/www.appyweb.es\/diccionario\/?page_id=1099"},"modified":"2024-03-21T15:38:51","modified_gmt":"2024-03-21T15:38:51","slug":"diseno-adaptativo","status":"publish","type":"page","link":"https:\/\/www.appyweb.es\/diccionario\/diseno-adaptativo\/","title":{"rendered":"Dise\u00f1o Adaptativo"},"content":{"rendered":"<h1 class=\"entry-title main_title\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-12125\" src=\"https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/03\/DisenoAdaptativo-300x180.jpg\" alt=\"Dise\u00f1o Adaptativo\" width=\"960\" height=\"576\" srcset=\"https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/03\/DisenoAdaptativo-300x180.jpg 300w, https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/03\/DisenoAdaptativo-768x461.jpg 768w, https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/03\/DisenoAdaptativo.jpg 1000w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/h1>\n<div class=\"entry-content\">\n<p>Se trata de una filosof\u00eda de dise\u00f1o que consiste en<strong>\u00a0adaptar la apariencia de los sitios web a diferentes dispositivos y pantallas<\/strong>. El dise\u00f1o adaptativo tiene como objetivo hacer modificaciones seg\u00fan el tipo de dispositivo, el tama\u00f1o de la pantalla, la resoluci\u00f3n, el sistema operativo y la capacidad de memoria.<\/p>\n<h2><span id=\"%F0%9F%93%8C_%C2%BFQue_es_el_Diseno_Adaptativo\" class=\"ez-toc-section\"><\/span>\u00bfQu\u00e9 es el Dise\u00f1o Adaptativo?<\/h2>\n<p>Se trata de una filosof\u00eda que fue mencionada por primera vez en una lista de art\u00edculos publicados en la revista A List Apart, publicaci\u00f3n\u00a0<a href=\"https:\/\/www.appyweb.es\/desarrollo-app\/\">especializada en desarrollo web<\/a>. Est\u00e1 lista de art\u00edculos fue escrita por Ethan Marcotte, un reconocido dise\u00f1ador web norteamericano. M\u00e1s adelante, cambiar\u00eda el t\u00e9rmino por\u00a0<em>responsive web design<\/em>, lo que se traducir\u00eda como \u201cdise\u00f1o web responsivo\u201d.<\/p>\n<p>De esta forma, se busca definir a esos sitios web que\u00a0<strong>cuentan con caracter\u00edsticas adaptables a diferentes dispositivos<\/strong>, es decir, que tendr\u00e1n una apariencia y una experiencia de navegaci\u00f3n muy similar, sin importar si se accede a trav\u00e9s de un ordenador, smartphone, port\u00e1til o tablet.<\/p>\n<h2><span id=\"%F0%9F%93%8C_%C2%BFPara_que_sirve_el_Diseno_Adaptativo\" class=\"ez-toc-section\"><\/span>\u00bfPara qu\u00e9 sirve el Dise\u00f1o Adaptativo?<\/h2>\n<p>Los profesionales en la materia lo aplican, ya que al utilizar estas modificaciones en el lenguaje HTML y CSS est\u00e1n cubriendo la necesidad de los usuarios de acceder a los sitios web desde cualquier pantalla, siendo efectivo incluso para atraer una mayor cantidad de tr\u00e1fico.<\/p>\n<p>Al mismo tiempo, contar con estas modificaciones permite que\u00a0<a href=\"https:\/\/www.appyweb.es\/posicionamiento-web\/\">el sitio acceda a un mejor posicionamiento web<\/a>, ya que desde el 2010 Google tiene en cuenta a\u00a0<strong>las plataformas con estas modificaciones para posicionarse en los primeros lugares<\/strong>.<\/p>\n<h2><span id=\"%F0%9F%93%8C_Diseno_adaptativo_vs_responsivo\" class=\"ez-toc-section\"><\/span>Dise\u00f1o adaptativo vs responsivo<\/h2>\n<p>Aunque estos t\u00e9rminos suelen utilizarse en el mismo contexto, las pr\u00e1cticas difieren un poco entre s\u00ed, pero tienen la misma finalidad, adaptar el sitio web a diferentes dispositivos. En este sentido, el adaptativo consiste en\u00a0<strong>desarrollar versiones diferentes del sitio web para cada dispositivo<\/strong>. Esta pr\u00e1ctica suele ser la m\u00e1s recomendada porque la versiones se encuentran totalmente personalizadas, por lo que se reduce el m\u00ednimo de errores y se mejora la experiencia de navegaci\u00f3n.<\/p>\n<p>Por otro lado, el responsivo consiste en\u00a0<strong>modificar el sitio web original para que tome diferentes formas<\/strong>\u00a0dependiendo del dispositivo desde donde se accede. Aunque esta es una pr\u00e1ctica muy popular, no es muy recomendada ya que no se adapta correctamente a diferentes pantallas seg\u00fan la marca del dispositivo y otras funcionalidades avanzadas.<\/p>\n<h2><span id=\"%F0%9F%93%8C_Ejemplo_de_Diseno_Adaptativo\" class=\"ez-toc-section\"><\/span>Ejemplo de Dise\u00f1o Adaptativo<\/h2>\n<p>Es dif\u00edcil determinar cu\u00e1ndo sitio web cuenta con dise\u00f1o adaptativo o responsivo, sin embargo, los usuarios pueden tener en cuenta diferente ejemplos, como el sitio web de YouTube.\u00a0<strong>La ventana disponible para el v\u00eddeo se adapta seg\u00fan la pantalla<\/strong>, si se utiliza la aplicaci\u00f3n m\u00f3vil, se ajusta a la posici\u00f3n del dispositivo de forma vertical u horizontal.<\/p>\n<p>Igualmente, esta vista no es la misma s\u00ed se accede al sitio web a trav\u00e9s de un ordenador. Dependiendo del tama\u00f1o de la pantalla, el usuario puede visualizar los v\u00eddeos recomendados, los comentarios y otras secciones de la p\u00e1gina sin hacer scroll. Asimismo, la aplicaci\u00f3n de YouTube suele mostrarse de forma diferente dependiendo del tipo de m\u00f3vil, por ejemplo, en los smartphones de Samsung no se puede seguir reproduciendo el v\u00eddeo al salir de la aplicaci\u00f3n, pero en los m\u00f3viles de Xiaomi si se puede acceder a esta opci\u00f3n.<\/p>\n<p>&nbsp;<\/p>\n<h2><span id=\"%F0%9F%93%8C_Mas_informacion_sobre_Diseno_Adaptativo\" class=\"ez-toc-section\"><\/span>M\u00e1s informaci\u00f3n sobre Dise\u00f1o Adaptativo<\/h2>\n<p>Tener una plataforma adaptable es m\u00e1s que una obligaci\u00f3n \u00bfNo lo crees? Mira c\u00f3mo Google puede penalizarte si no est\u00e1s adatado.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.appyweb.es\/google-avisa-a-las-paginas-web-no-adaptadas-a-todos-los-dispositivos\/\">Google avisa a las p\u00e1ginas web no adaptadas<\/a><\/li>\n<li><a href=\"https:\/\/es.wikipedia.org\/wiki\/Dise%C3%B1o_web_adaptable#Funcionamiento\" rel=\"nofollow noopener\" target=\"_blank\">Funcionamiento del dise\u00f1o web adaptable<\/a><\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se trata de una filosof\u00eda de dise\u00f1o que consiste en\u00a0adaptar la apariencia de los sitios web a diferentes dispositivos y pantallas. El dise\u00f1o adaptativo tiene como objetivo hacer modificaciones seg\u00fan el tipo de dispositivo, el tama\u00f1o de la pantalla, la resoluci\u00f3n, el sistema operativo y la capacidad de memoria. \u00bfQu\u00e9 es el Dise\u00f1o Adaptativo? Se [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12125,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-1099","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/1099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/comments?post=1099"}],"version-history":[{"count":6,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/1099\/revisions"}],"predecessor-version":[{"id":12127,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/1099\/revisions\/12127"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/media\/12125"}],"wp:attachment":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/media?parent=1099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}