{"id":5447,"date":"2013-08-26T12:31:37","date_gmt":"2013-08-26T15:31:37","guid":{"rendered":"http:\/\/thuer.com.ar\/?p=5447"},"modified":"2013-08-26T12:31:37","modified_gmt":"2013-08-26T15:31:37","slug":"anatomia-de-un-sitio-web-adaptativo-infografia","status":"publish","type":"post","link":"https:\/\/thuer.com.ar\/?p=5447","title":{"rendered":"Anatom\u00eda de un sitio web adaptativo [infograf\u00eda]"},"content":{"rendered":"<p>El dise\u00f1o web adaptativo o responsive web design no es m\u00e1s ni menos que la recuperaci\u00f3n de una vieja t\u00e9cnica del dise\u00f1o web de la \u00e9poca en que hab\u00eda m\u00faltiples resoluciones de pantalla y se buscaba que las p\u00e1ginas encajaran perfectamente en cada una de ellas. Esto eso, hacer un dise\u00f1o el\u00e1stico o fluido donde el contenido se adapte al contienente.<\/p>\n<p>Hoy, con la presencia de computadoras de escritorio, tablets y tel\u00e9fonos inteligente este tipo de dise\u00f1o ha resurgido. Pero, \u00bfc\u00f3mo saber exactamente qu\u00e9 es un sitio web adaptativo? \u00bfQu\u00e9 caracter\u00edsticas tiene? Esta infograf\u00eda nos muestra algunos datos muy interesantes para tener en cuenta.<\/p>\n<p>En primer lugar, lo que he repetido varias veces en el blog: mientras sigan creciendo los accesos desde tablets y tel\u00e9fonos no tiene sentido seguir haciendo una web que solo se puede ver bien en una computadora de escritorio.&nbsp;<\/p>\n<p>En segundo t\u00e9rmino, se identifican los componente de un sitio web adaptativo o responsivo: grillas fluidas que se acomodan de acuerdo a la pantalla, im\u00e1genes flexibles para ajustarle &nbsp;m\u00faltiples tama\u00f1os &nbsp;y media query para detectar en qu\u00e9 pantalla se muestra el sitio web.<\/p>\n<p>A continuaci\u00f3n, se describen las diferente secciones de un sitio web como el encabezado, la galer\u00eda de im\u00e1genes, la descripci\u00f3n del producto, la informaci\u00f3n adicional y el pie de p\u00e1gina para analizar qu\u00e9 caracter\u00edsticas tiene cada uno de estos elementos de acuerdo al dispositivo donde se reproduzca el sitio web. Todo explicado de manera visual y atractiva en el siguiente gr\u00e1fico.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-5448\" alt=\"ResponsiveDesignInfographic-WhoIsHostingThis\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2013\/08\/ResponsiveDesignInfographic-WhoIsHostingThis-700x5311.jpg\" width=\"700\" height=\"5311\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2013\/08\/ResponsiveDesignInfographic-WhoIsHostingThis-700x5311.jpg 700w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2013\/08\/ResponsiveDesignInfographic-WhoIsHostingThis.jpg 1000w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>V\u00eda <a href=\"http:\/\/mashable.com\/2013\/08\/08\/responsive-design-best-practices\/\" target=\"_blank\" rel=\"noopener\">Mashable<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El dise\u00f1o web adaptativo o responsive web design no es m\u00e1s ni menos que la recuperaci\u00f3n de una vieja t\u00e9cnica del dise\u00f1o web de la \u00e9poca en que hab\u00eda m\u00faltiples resoluciones de pantalla y se buscaba que las p\u00e1ginas encajaran perfectamente en cada una de ellas. Esto eso, hacer un dise\u00f1o el\u00e1stico o fluido donde &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Anatom\u00eda de un sitio web adaptativo [infograf\u00eda]\" class=\"read-more button\" href=\"https:\/\/thuer.com.ar\/?p=5447#more-5447\" aria-label=\"M\u00e1s en Anatom\u00eda de un sitio web adaptativo [infograf\u00eda]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":5454,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[21,56,284],"tags":[407,394,381],"class_list":["post-5447","post","type-post","status-publish","format-standard","has-post-thumbnail","category-blog","category-diseno-web","category-infografias","tag-diseno-web","tag-diseno-web-adaptativo","tag-responsive-web-design","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","entry"],"featured_image_src":"https:\/\/thuer.com.ar\/wp-content\/uploads\/2013\/08\/adaptativo.png","featured_image_src_square":"https:\/\/thuer.com.ar\/wp-content\/uploads\/2013\/08\/adaptativo.png","author_info":{"display_name":"Sebasti\u00e1n Th\u00fcer","author_link":"https:\/\/thuer.com.ar\/author\/diseno-web"},"_links":{"self":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/posts\/5447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5447"}],"version-history":[{"count":0,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/posts\/5447\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/media\/5454"}],"wp:attachment":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}