{"id":10238,"date":"2020-07-03T18:26:06","date_gmt":"2020-07-03T16:26:06","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=10238"},"modified":"2021-09-13T19:36:29","modified_gmt":"2021-09-13T17:36:29","slug":"el-diseno-full-width","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/","title":{"rendered":"El dise\u00f1o full-width"},"content":{"rendered":"<p>Un dise\u00f1o <strong><em>full-width<\/em><\/strong> (ancho completo) es un tipo de dise\u00f1o Web en el que<strong>, <\/strong>por motivos est\u00e9ticos,<strong> se intenta utilizar todo el ancho posible de la pantalla.<\/strong><\/p>\n<p>En los dise\u00f1os cl\u00e1sicos, lo habitual es colocar todo el contenido de la p\u00e1gina Web dentro de un elemento al que se le asigna un ancho y se le centra en pantalla. Este elemento usado para centrar el contenido, muchas reces recibe el nombre de <strong><em>#wrapper<\/em><\/strong>.<\/p>\n<div id=\"attachment_10240\" style=\"width: 858px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-clasico.jpg\" rel=\"attachment wp-att-10240\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-10240\" class=\"size-large wp-image-10240\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-clasico-848x1024.jpg\" alt=\"Ejemplo de un dise\u00f1o cl\u00e1sico; todo el contenido est\u00e1 dentro de un elemento centrado (#wrapper).\" width=\"848\" height=\"1024\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-clasico-848x1024.jpg 848w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-clasico-249x300.jpg 249w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-clasico-768x927.jpg 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-clasico-700x845.jpg 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-clasico.jpg 1440w\" sizes=\"auto, (max-width: 848px) 100vw, 848px\" \/><\/a><p id=\"caption-attachment-10240\" class=\"wp-caption-text\">Ejemplo de un <strong>dise\u00f1o cl\u00e1sico<\/strong>; <strong>todo el contenido est\u00e1 dentro de un elemento centrado (#wrapper)<\/strong>.<\/p><\/div>\n<p>En un dise\u00f1o <strong><em>full-width<\/em><\/strong> se intenta <strong>aprovechar mejor el ancho de la pantalla<\/strong>, pero eso no implica que no debamos <strong>mantener un ancho (o ancho m\u00e1ximo) para el contenido<\/strong>, ya que de lo contrario el aspecto no ser\u00eda nada agradable visualmente. Adem\u00e1s, ser\u00eda molesto de leer, ya que no bastar\u00eda con mover los ojos de lado a lado, ser\u00eda necesario mover tambi\u00e9n la cabeza como quien est\u00e1 viendo un partido de tenis.<\/p>\n<p>En un dise\u00f1o <strong><em>full-width<\/em><\/strong> cada fila o secci\u00f3n de la p\u00e1gina ocupa todo el ancho, y en su interior hay un elemento que hace la funci\u00f3n del <strong><em>#wrapper<\/em><\/strong>, centrado y con un ancho (o ancho m\u00e1ximo). Dicho de otro modo; en lugar de un \u00fanico #wrapper, tenemos m\u00faltiples elementos que hacen la misma funci\u00f3n, uno por cada fila\/secci\u00f3n de nuestra p\u00e1gina Web.<\/p>\n<div id=\"attachment_10243\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width.jpg\" rel=\"attachment wp-att-10243\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-10243\" class=\"size-large wp-image-10243\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-1024x742.jpg\" alt=\"Ejemplo de dise\u00f1o full-width, el contenido sigue centrado como en el dise\u00f1o cl\u00e1sico, pero cada fila o secci\u00f3n de la p\u00e1gina ocupa todo el ancho del navegador.\" width=\"1024\" height=\"742\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-1024x742.jpg 1024w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-300x217.jpg 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-768x556.jpg 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-700x507.jpg 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-10243\" class=\"wp-caption-text\">Ejemplo de dise\u00f1o <strong><em>full-width<\/em><\/strong>, el <strong>contenido<\/strong> sigue <strong>centrado<\/strong> como en el dise\u00f1o cl\u00e1sico, <strong>pero cada fila o secci\u00f3n de la p\u00e1gina ocupa todo el ancho del navegador.<\/strong><\/p><\/div>\n<div id=\"attachment_10247\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-mal-hecho.jpg\" rel=\"attachment wp-att-10247\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-10247\" class=\"size-large wp-image-10247\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-mal-hecho-1024x676.jpg\" alt=\"Ejemplo del mismo dise\u00f1o anterior pero sin colocar el contenido de cada fila\/secci\u00f3n dentro de un elemento que haga la funci\u00f3n de #wrapper. Todo se estira en exceso y, adem\u00e1s de perder atractivo, la lectura de la Web se vuelve incomoda.\" width=\"1024\" height=\"676\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-mal-hecho-1024x676.jpg 1024w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-mal-hecho-300x198.jpg 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-mal-hecho-768x507.jpg 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-mal-hecho-700x462.jpg 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/diseno-full-width-mal-hecho.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-10247\" class=\"wp-caption-text\">Ejemplo del mismo dise\u00f1o anterior pero sin colocar el contenido de cada fila\/secci\u00f3n dentro de un elemento que haga la funci\u00f3n de <strong>#wrapper<\/strong>. Todo se estira en exceso y, adem\u00e1s de perder atractivo, <strong>la lectura de la Web se vuelve incomoda<\/strong>.<\/p><\/div>\n<p>El siguiente c\u00f3digo HTML es un esquema del dise\u00f1o <strong><em>full-width<\/em><\/strong> anterior.<\/p>\n<pre>&lt;header id=\"header\"&gt;\r\n  &lt;div id=\"header-top\"&gt;\r\n    &lt;div class=\"wrapper\"&gt;\r\n      &lt;!-- contenido (logo y redes sociales) --&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div id=\"header-bottom\"&gt;\r\n    &lt;div class=\"wrapper\"&gt;\r\n      &lt;!-- contenido (men\u00fa y buscador) --&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/header&gt;\r\n\r\n&lt;main&gt;\r\n  &lt;section id=\"hero\"&gt;\r\n    &lt;div class=\"wrapper\"&gt;\r\n      &lt;!-- contenido (presentacion) --&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/section&gt;\r\n  &lt;section id=\"services\"&gt;\r\n    &lt;div class=\"wrapper\"&gt;\r\n      &lt;!-- contenido (servicios) --&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/section&gt;\r\n  &lt;section id=\"contact\"&gt;\r\n    &lt;div class=\"wrapper\"&gt;\r\n      &lt;!-- contenido (formulario) --&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/section&gt;\r\n&lt;\/main&gt;\r\n\r\n&lt;footer id=\"footer\"&gt;\r\n  &lt;div id=\"footer-top\"&gt;\r\n    &lt;div class=\"wrapper\"&gt;\r\n      &lt;!-- contenido (listas de enlaces) --&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div id=\"footer-bottom\"&gt;\r\n    &lt;div class=\"wrapper\"&gt;\r\n      &lt;p&gt;Copyright &amp;copy; 2020 Escola Espai.&lt;\/p&gt;\r\n      &lt;p&gt;Design by &lt;a href=\"#\"&gt;ACB&lt;\/a&gt;&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/footer&gt;\r\n<\/pre>\n<p>Tal y como se puede observar, el HTML de este dise\u00f1o es muy repetitivo. Tenemos el <strong>#header<\/strong>, el <strong>main<\/strong> y el <strong>#footer<\/strong> divididos en filas o secciones. Cada fila\/secci\u00f3n ocupa todo el ancho, y puede tener un color de fondo diferente o una imagen. Dentro de cada una de estas filas\/secciones, tenemos un elemento que hace la funci\u00f3n de un <strong>#wrapper<\/strong>. Este elemento tiene un ancho (o ancho m\u00e1ximo) y est\u00e1 centrado (margin: 0 auto). Dentro de estos elementos de la clase <strong>.wrapper<\/strong> tenemos el contenido de cada fila\/secci\u00f3n.<\/p>\n<p>En lo que respecta al CSS, tenemos algo tal que as\u00ed:<\/p>\n<pre>.wrapper {\r\n  max-width: 1000px;\r\n  margin: 0 auto;\r\n}\r\n\r\n#header-top {\r\n  background-color: #11321f;\r\n}\r\n\r\n#header-top .wrapper {\r\n  padding: 10px 0;\r\n  overflow: auto;\r\n  \/* etc... *\/\r\n}\r\n\r\n#header-bottom {\r\n  background-color: #4b6b1d;\r\n}\r\n\r\n#header-bottom .wrapper {\r\n  padding: 10px 0;\r\n  overflow: auto;\r\n  \/* etc... *\/\r\n}\r\n\r\n\/* etc... *\/\r\n<\/pre>\n<p>A todos los elementos que van a hacer la funci\u00f3n de <strong><em>#wrapper<\/em><\/strong> los centramos y les indicamos un ancho (o ancho m\u00e1ximo). <strong>Es MUY IMPORTANTE no indicar este ancho en porcentaje (%), ya que ser\u00eda un porcentaje basado en el ancho del navegador, y por lo tanto en cada pantalla la p\u00e1gina se ver\u00eda con un ancho diferente, y en monitores muy anchos podr\u00eda ser un ancho excesivo<\/strong>. Para los elementos que tengamos dentro de estos <strong><em>.wrapper<\/em><\/strong> podemos usar anchos en porcentaje sin ning\u00fan problema, ya que es un porcentaje del ancho (o ancho m\u00e1ximo) que hemos indicado.<\/p>\n<p>Para comprobar si nuestro dise\u00f1o funcionar\u00eda correctamente en pantallas muy anchas podemos usar la opci\u00f3n de <a href=\"https:\/\/support.mozilla.org\/es\/kb\/tamano-de-la-tipografia-y-del-texto-aumento-del-ta\" target=\"_blank\" rel=\"noopener\">ZOOM<\/a> del navegador; si reducimos el tama\u00f1o, el contenido deber\u00eda de aparecer siempre centrado.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un dise\u00f1o full-width (ancho completo) es un tipo de dise\u00f1o Web en el que, por motivos est\u00e9ticos, se intenta utilizar todo el ancho posible de la pantalla. En los dise\u00f1os cl\u00e1sicos, lo habitual es colocar todo el contenido de la p\u00e1gina Web dentro de un&#8230;<\/p>\n","protected":false},"author":23,"featured_media":10252,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[737,270],"class_list":["post-10238","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-full-width","tag-responsive"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>El dise\u00f1o full-width - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En el dise\u00f1o full-width se intenta utilizar todo el ancho posible de la pantalla, pero el contenido debe de tener un ancho m\u00e1ximo y estar centrado.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"El dise\u00f1o full-width - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En el dise\u00f1o full-width se intenta utilizar todo el ancho posible de la pantalla, pero el contenido debe de tener un ancho m\u00e1ximo y estar centrado.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-03T16:26:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-13T17:36:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"El dise\u00f1o full-width\",\"datePublished\":\"2020-07-03T16:26:06+00:00\",\"dateModified\":\"2021-09-13T17:36:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/\"},\"wordCount\":611,\"commentCount\":2,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg\",\"keywords\":[\"full-width\",\"responsive\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/\",\"name\":\"El dise\u00f1o full-width - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg\",\"datePublished\":\"2020-07-03T16:26:06+00:00\",\"dateModified\":\"2021-09-13T17:36:29+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"En el dise\u00f1o full-width se intenta utilizar todo el ancho posible de la pantalla, pero el contenido debe de tener un ancho m\u00e1ximo y estar centrado.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg\",\"width\":1000,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"El dise\u00f1o full-width\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"El dise\u00f1o full-width - Blog Escola Espai","description":"En el dise\u00f1o full-width se intenta utilizar todo el ancho posible de la pantalla, pero el contenido debe de tener un ancho m\u00e1ximo y estar centrado.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/","og_locale":"es_ES","og_type":"article","og_title":"El dise\u00f1o full-width - Blog Escola Espai","og_description":"En el dise\u00f1o full-width se intenta utilizar todo el ancho posible de la pantalla, pero el contenido debe de tener un ancho m\u00e1ximo y estar centrado.","og_url":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/","og_site_name":"Blog Escola Espai","article_published_time":"2020-07-03T16:26:06+00:00","article_modified_time":"2021-09-13T17:36:29+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"El dise\u00f1o full-width","datePublished":"2020-07-03T16:26:06+00:00","dateModified":"2021-09-13T17:36:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/"},"wordCount":611,"commentCount":2,"image":{"@id":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg","keywords":["full-width","responsive"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/","url":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/","name":"El dise\u00f1o full-width - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg","datePublished":"2020-07-03T16:26:06+00:00","dateModified":"2021-09-13T17:36:29+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"En el dise\u00f1o full-width se intenta utilizar todo el ancho posible de la pantalla, pero el contenido debe de tener un ancho m\u00e1ximo y estar centrado.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg","width":1000,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2020\/07\/el-diseno-full-width\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"El dise\u00f1o full-width"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/07\/full-width-design.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/10238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=10238"}],"version-history":[{"count":11,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/10238\/revisions"}],"predecessor-version":[{"id":10242,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/10238\/revisions\/10242"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/10252"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=10238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=10238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=10238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}