{"id":1418,"date":"2019-07-08T10:45:41","date_gmt":"2019-07-08T08:45:41","guid":{"rendered":"http:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/?p=1418"},"modified":"2021-09-21T13:01:26","modified_gmt":"2021-09-21T11:01:26","slug":"diagrama-de-gutenberg","status":"publish","type":"post","link":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg","title":{"rendered":"Diagrama de Gutenberg: su importancia en el dise\u00f1o web"},"content":{"rendered":"<p style=\"text-align: justify;\">Hoy en d\u00eda, en un mundo que gira en torno a Internet y en el que estamos conectados a golpe de click, es cada vez m\u00e1s dif\u00edcil destacar en relaci\u00f3n a la competencia.<\/p>\n<p style=\"text-align: justify;\">Las grandes marcas buscan un dise\u00f1o cada vez m\u00e1s atractivo de sus p\u00e1ginas web. Alcanzar una buena puntuaci\u00f3n en criterios de usabilidad, te har\u00e1 destacar en la red, incrementando as\u00ed el n\u00famero de personas que te conocer\u00e1n. Por esto, tienes que conocer el <strong>Diagrama de Gutenberg.<\/strong><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg\/#Consejos_para_mejorar_tu_sitio_web\" title=\"Consejos para mejorar tu sitio web\">Consejos para mejorar tu sitio web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg\/#La_base_de_una_buena_pagina_web_la_usabilidad\" title=\"La base de una buena p\u00e1gina web: la usabilidad\">La base de una buena p\u00e1gina web: la usabilidad<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg\/#%C2%BFQue_es_el_Diagrama_de_Gutenberg\" title=\"\u00bfQu\u00e9 es el Diagrama de Gutenberg?\">\u00bfQu\u00e9 es el Diagrama de Gutenberg?<\/a><\/li><\/ul><\/nav><\/div>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Consejos_para_mejorar_tu_sitio_web\"><\/span>Consejos para mejorar tu sitio web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Una buena p\u00e1gina web debe seguir una serie de requisitos, que podr\u00edamos resumir en<strong> cinco grandes bloques<\/strong>:<\/p>\n<ol>\n<li style=\"text-align: justify;\">Dise\u00f1o f\u00e1cil e intuitivo.<\/li>\n<li style=\"text-align: justify;\">Textos legibles.<\/li>\n<li style=\"text-align: justify;\">Dise\u00f1o<strong> responsive<\/strong>: adaptado a cualquier tipo de dispositivo.<\/li>\n<li style=\"text-align: justify;\">Rapidez y optimizaci\u00f3n.<\/li>\n<li style=\"text-align: justify;\">Criterios de <strong>usabilidad<\/strong><\/li>\n<\/ol>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"La_base_de_una_buena_pagina_web_la_usabilidad\"><\/span>La base de una buena p\u00e1gina web: la usabilidad<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Para continuar es necesario dejar claro qu\u00e9 entendemos por <a href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/usabilidad-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">usabilidad.<\/a> Podr\u00edamos definirla como \u201c<em>la capacidad de hacer que los usuarios encuentren objetivos espec\u00edficos en nuestra<strong> p\u00e1gina web,<\/strong> a trav\u00e9s de un dise\u00f1o sencillo, r\u00e1pido y f\u00e1cil de intuir\u201d<\/em>.<\/p>\n<p style=\"text-align: justify;\">La usabilidad incide en la <strong>experiencia de nuestro usuario<\/strong>, favoreciendo que los contenidos sean mejor valorados.<\/p>\n<p style=\"text-align: justify;\">Al plantear nuestra p\u00e1gina web hay que tener en cuenta el movimiento natural de nuestros ojos al observar cualquier composici\u00f3n: d\u00f3nde empieza el recorrido de nuestros ojos y en qu\u00e9 punto de la composici\u00f3n acaba.<\/p>\n<p style=\"text-align: justify;\">Nuestro cerebro optimiza el tiempo que dedica a un texto o a una imagen.<\/p>\n<p style=\"text-align: justify;\">En dise\u00f1o web pasa lo mismo, el usuario no suele leer el 100% del contenido de nuestra interfaz, podr\u00edamos decir que lo \u201cescanea\u201d, leyendo el 28% de toda la pantalla, por eso es necesario conocer cu\u00e1les son los puntos m\u00e1s importantes y destacar aquellos a los que no prestamos tanta atenci\u00f3n. Esta fragmentaci\u00f3n del espacio la denominamos \u201cDiagrama de Gutenberg\u201d.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_el_Diagrama_de_Gutenberg\"><\/span>\u00bfQu\u00e9 es el Diagrama de Gutenberg?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">El<strong> Diagrama de Gutenberg<\/strong> es un patr\u00f3n muy solicitado. Su organizaci\u00f3n sirve para dise\u00f1o web, para publicidad, carteler\u00eda, marketing, entre otros, y divide el medio expositivo en cuatro cuadrantes:<\/p>\n<p style=\"text-align: justify;\"><strong>\u2022 La zona \u00f3ptica primaria:<\/strong> situada en el margen superior izquierdo.<\/p>\n<p style=\"text-align: justify;\"><strong>\u2022 Zona de barbecho fuerte:<\/strong> situada en la parte superior derecha.<\/p>\n<p style=\"text-align: justify;\"><strong>\u2022 La zona de barbecho d\u00e9bil:<\/strong> situada en la parte inferior izquierda.<\/p>\n<p style=\"text-align: justify;\"><strong>\u2022 Zona terminal:<\/strong> situada en la parte inferior derecha.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2220 aligncenter\" src=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2016\/10\/infografia-gutenberg-1.jpg\" alt=\"\" width=\"444\" height=\"265\" srcset=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2016\/10\/infografia-gutenberg-1.jpg 500w, https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2016\/10\/infografia-gutenberg-1-300x180.jpg 300w\" sizes=\"(max-width: 444px) 100vw, 444px\" \/><\/p>\n<p style=\"text-align: justify;\">Esta distribuci\u00f3n del espacio se aprecia significativamente en la estructura de una p\u00e1gina web standard: colocar\u00edamos el<strong> logotipo <\/strong>de la marca en la zona \u00f3ptica primaria, que es el punto en el que comienza el recorrido de nuestros ojos.<\/p>\n<p style=\"text-align: justify;\">El contenido medio, tales como puedes ser <strong>textos <\/strong>o<strong> im\u00e1genes<\/strong> se despliegan a los largo de las zonas de barbechos y en la<strong> zona terminal<\/strong>, donde finaliza el recorrido, normalmente se suele colocar la<strong> informaci\u00f3n de contacto<\/strong>.<\/p>\n<p style=\"text-align: justify;\">En las zonas <strong>menos observadas<\/strong> (zona de barbecho fuerte y zona de barbecho d\u00e9bil), se suele recurrir a elementos llamativos para que la vista dirija m\u00e1s la atenci\u00f3n a estas zonas si lo deseamos. Algunos de estos elementos pueden ser un tipo de letra m\u00e1s grande de lo habitual o usar un color diferente.<\/p>\n<p style=\"text-align: justify;\">Por supuesto, existen otros trucos que nos ayudar\u00e1n a captar la atenci\u00f3n de los ojos del usuario. Por ejemplo:\u00a0<strong>contrastes<\/strong>, letras<strong> destacadas<\/strong>, usando<strong> perfiles tipogr\u00e1ficos<\/strong> como la negrita y la cursiva, jugar con las <strong>opacidades<\/strong>, utilizar un<strong> dise\u00f1o innovador<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Todo esto nos ayudar\u00e1 a organizar nuestra informaci\u00f3n y a mandar al espectador el mensaje que queremos que reciba.<\/p>\n<p style=\"text-align: justify;\"><strong>RECUERDA<\/strong>: Lo m\u00e1s importante para mantener a un usuario en tu p\u00e1gina web es <strong>desarrollar un dise\u00f1o sencillo, c\u00f3modo y actualizado.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En un mundo que gira en torno a Internet y en el que estamos conectados a golpe de click, es cada vez m\u00e1s dif\u00edcil destacar en relaci\u00f3n a la competencia. Las marcas buscan un dise\u00f1o cada vez m\u00e1s atractivo de sus p\u00e1ginas web. Alcanzar una buena puntuaci\u00f3n en criterios de usabilidad, te har\u00e1 destacar en&hellip;<\/p>\n","protected":false},"author":91603,"featured_media":2358,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[339],"class_list":["post-1418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Diagrama de Gutenberg \u3030\ufe0f Usabilidad Web<\/title>\n<meta name=\"description\" content=\"El Diagrama de Gutenberg es un patr\u00f3n muy solicitado en dise\u00f1o web, a trav\u00e9s de \u00e9l podemos generar contenido atractivo para el lector de nuestra web.\" \/>\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.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Diagrama de Gutenberg \u3030\ufe0f Usabilidad Web\" \/>\n<meta property=\"og:description\" content=\"El Diagrama de Gutenberg es un patr\u00f3n muy solicitado en dise\u00f1o web, a trav\u00e9s de \u00e9l podemos generar contenido atractivo para el lector de nuestra web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg\" \/>\n<meta property=\"og:site_name\" content=\"Canal Dise\u00f1o y Arquitectura\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/InesemBusinessSchool\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-08T08:45:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-21T11:01:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1620\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Miguel Escamilla Gonz\u00e1lez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@inesem\" \/>\n<meta name=\"twitter:site\" content=\"@inesem\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Miguel Escamilla Gonz\u00e1lez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg\"},\"author\":{\"name\":\"Miguel Escamilla Gonz\u00e1lez\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/af1ec91d8bdad1fa37df0c068a7aa20c\"},\"headline\":\"Diagrama de Gutenberg: su importancia en el dise\u00f1o web\",\"datePublished\":\"2019-07-08T08:45:41+00:00\",\"dateModified\":\"2021-09-21T11:01:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg\"},\"wordCount\":642,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg.jpg\",\"keywords\":[\"diagrama\",\"dise\u00f1o\",\"gutenberg\",\"Usabilidad\",\"web\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg\",\"name\":\"Diagrama de Gutenberg \u3030\ufe0f Usabilidad Web\",\"isPartOf\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg.jpg\",\"datePublished\":\"2019-07-08T08:45:41+00:00\",\"dateModified\":\"2021-09-21T11:01:26+00:00\",\"description\":\"El Diagrama de Gutenberg es un patr\u00f3n muy solicitado en dise\u00f1o web, a trav\u00e9s de \u00e9l podemos generar contenido atractivo para el lector de nuestra web.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#primaryimage\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg.jpg\",\"contentUrl\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg.jpg\",\"width\":\"1620\",\"height\":\"1080\",\"caption\":\"diagrama de gutenberg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o Web\",\"item\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/categorias\/diseno-web\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diagrama de Gutenberg: su importancia en el dise\u00f1o web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#website\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/\",\"name\":\"Canal Dise\u00f1o y Arquitectura\",\"description\":\"En los art\u00edculos de Dise\u00f1o y Arquitectura de Revista Digital INESEM encontrar\u00e1s informaci\u00f3n actualizada e innovadora sobre tu sector. Nuestros art\u00edculos est\u00e1n elaborados y contrastados por profesionales de diferentes especialidades del sector. Si est\u00e1s buscando informaci\u00f3n sobre Arquitectura y Edificaci\u00f3n, Decoraci\u00f3n e Interiorismo, Dise\u00f1o Gr\u00e1fico, Dise\u00f1o Web o Edici\u00f3n y Posproducci\u00f3n Digital, est\u00e1s en el sitio indicado.\",\"publisher\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization\",\"name\":\"Canal Dise\u00f1o y Arquitectura\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/logo\/image\/\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Canal Dise\u00f1o y Arquitectura\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/InesemBusinessSchool\/\",\"https:\/\/x.com\/inesem\",\"http:\/\/www.linkedin.com\/company\/2370697\",\"https:\/\/www.youtube.com\/user\/inesembusinesschool\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/af1ec91d8bdad1fa37df0c068a7aa20c\",\"name\":\"Miguel Escamilla Gonz\u00e1lez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/09\/Miguel-Escamilla-Gonz\u00e1lez_avatar_1569489531-96x96.jpg\",\"contentUrl\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/09\/Miguel-Escamilla-Gonz\u00e1lez_avatar_1569489531-96x96.jpg\",\"caption\":\"Miguel Escamilla Gonz\u00e1lez\"},\"description\":\"EDUCACI\u00d3N: \u2022 Graduado en Bellas Artes por la Universidad de Granada. \u2022 Especializaci\u00f3n en la rama de Artes Gr\u00e1ficas. EXPERIENCIA: \u2022 Dise\u00f1ador Gr\u00e1fico en INESEM Business School \u2022 Dise\u00f1o de campa\u00f1as publicitarias y de interfaces (UX\/UI). \u2022 Creatividad de material impreso de peque\u00f1o y gran formato y maquetaci\u00f3n de revistas. ESCRIBE SOBRE: Dise\u00f1o Gr\u00e1fico \u00b7 Dise\u00f1o web \u00b7 Photoshop \u00b7 Adobe Graduado en Bellas Artes con especializaci\u00f3n en Artes Gr\u00e1ficas. Cuenta con experiencia en el dise\u00f1o de campa\u00f1as publicitarias y de interfaces (UX\/UI). Actualmente Dise\u00f1ador Gr\u00e1fico en INESEM Business School.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/miguel-escamilla-gonzalez\/\"],\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/autores\/miguel-escamilla\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Diagrama de Gutenberg \u3030\ufe0f Usabilidad Web","description":"El Diagrama de Gutenberg es un patr\u00f3n muy solicitado en dise\u00f1o web, a trav\u00e9s de \u00e9l podemos generar contenido atractivo para el lector de nuestra web.","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.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg","og_locale":"es_ES","og_type":"article","og_title":"Diagrama de Gutenberg \u3030\ufe0f Usabilidad Web","og_description":"El Diagrama de Gutenberg es un patr\u00f3n muy solicitado en dise\u00f1o web, a trav\u00e9s de \u00e9l podemos generar contenido atractivo para el lector de nuestra web.","og_url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg","og_site_name":"Canal Dise\u00f1o y Arquitectura","article_publisher":"https:\/\/www.facebook.com\/InesemBusinessSchool\/","article_published_time":"2019-07-08T08:45:41+00:00","article_modified_time":"2021-09-21T11:01:26+00:00","og_image":[{"width":1620,"height":1080,"url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg.jpg","type":"image\/jpeg"}],"author":"Miguel Escamilla Gonz\u00e1lez","twitter_card":"summary_large_image","twitter_creator":"@inesem","twitter_site":"@inesem","twitter_misc":{"Escrito por":"Miguel Escamilla Gonz\u00e1lez","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#article","isPartOf":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg"},"author":{"name":"Miguel Escamilla Gonz\u00e1lez","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/af1ec91d8bdad1fa37df0c068a7aa20c"},"headline":"Diagrama de Gutenberg: su importancia en el dise\u00f1o web","datePublished":"2019-07-08T08:45:41+00:00","dateModified":"2021-09-21T11:01:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg"},"wordCount":642,"commentCount":0,"publisher":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#primaryimage"},"thumbnailUrl":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg.jpg","keywords":["diagrama","dise\u00f1o","gutenberg","Usabilidad","web"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg","name":"Diagrama de Gutenberg \u3030\ufe0f Usabilidad Web","isPartOf":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#primaryimage"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#primaryimage"},"thumbnailUrl":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg.jpg","datePublished":"2019-07-08T08:45:41+00:00","dateModified":"2021-09-21T11:01:26+00:00","description":"El Diagrama de Gutenberg es un patr\u00f3n muy solicitado en dise\u00f1o web, a trav\u00e9s de \u00e9l podemos generar contenido atractivo para el lector de nuestra web.","breadcrumb":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#primaryimage","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg.jpg","contentUrl":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg.jpg","width":"1620","height":"1080","caption":"diagrama de gutenberg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/diagrama-de-gutenberg#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o Web","item":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/categorias\/diseno-web"},{"@type":"ListItem","position":3,"name":"Diagrama de Gutenberg: su importancia en el dise\u00f1o web"}]},{"@type":"WebSite","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#website","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/","name":"Canal Dise\u00f1o y Arquitectura","description":"En los art\u00edculos de Dise\u00f1o y Arquitectura de Revista Digital INESEM encontrar\u00e1s informaci\u00f3n actualizada e innovadora sobre tu sector. Nuestros art\u00edculos est\u00e1n elaborados y contrastados por profesionales de diferentes especialidades del sector. Si est\u00e1s buscando informaci\u00f3n sobre Arquitectura y Edificaci\u00f3n, Decoraci\u00f3n e Interiorismo, Dise\u00f1o Gr\u00e1fico, Dise\u00f1o Web o Edici\u00f3n y Posproducci\u00f3n Digital, est\u00e1s en el sitio indicado.","publisher":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization","name":"Canal Dise\u00f1o y Arquitectura","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Canal Dise\u00f1o y Arquitectura"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/InesemBusinessSchool\/","https:\/\/x.com\/inesem","http:\/\/www.linkedin.com\/company\/2370697","https:\/\/www.youtube.com\/user\/inesembusinesschool\/"]},{"@type":"Person","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/af1ec91d8bdad1fa37df0c068a7aa20c","name":"Miguel Escamilla Gonz\u00e1lez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/image\/","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/09\/Miguel-Escamilla-Gonz\u00e1lez_avatar_1569489531-96x96.jpg","contentUrl":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/09\/Miguel-Escamilla-Gonz\u00e1lez_avatar_1569489531-96x96.jpg","caption":"Miguel Escamilla Gonz\u00e1lez"},"description":"EDUCACI\u00d3N: \u2022 Graduado en Bellas Artes por la Universidad de Granada. \u2022 Especializaci\u00f3n en la rama de Artes Gr\u00e1ficas. EXPERIENCIA: \u2022 Dise\u00f1ador Gr\u00e1fico en INESEM Business School \u2022 Dise\u00f1o de campa\u00f1as publicitarias y de interfaces (UX\/UI). \u2022 Creatividad de material impreso de peque\u00f1o y gran formato y maquetaci\u00f3n de revistas. ESCRIBE SOBRE: Dise\u00f1o Gr\u00e1fico \u00b7 Dise\u00f1o web \u00b7 Photoshop \u00b7 Adobe Graduado en Bellas Artes con especializaci\u00f3n en Artes Gr\u00e1ficas. Cuenta con experiencia en el dise\u00f1o de campa\u00f1as publicitarias y de interfaces (UX\/UI). Actualmente Dise\u00f1ador Gr\u00e1fico en INESEM Business School.","sameAs":["https:\/\/www.linkedin.com\/in\/miguel-escamilla-gonzalez\/"],"url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/autores\/miguel-escamilla"}]}},"autor_name":{"name":"Miguel Escamilla Gonz\u00e1lez"},"featured_image":{"attachment_meta":{"width":"1620","height":"1080","file":"2019\/07\/diagrama-de-gutenberg.jpg","sizes":{"thumbnail":{"file":"diagrama-de-gutenberg-345x180.jpg","width":"345","height":"180","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-345x180.jpg"},"medium":{"file":"diagrama-de-gutenberg-300x200.jpg","width":"300","height":"200","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-300x200.jpg"},"medium_large":{"file":"diagrama-de-gutenberg-768x512.jpg","width":"768","height":"512","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-768x512.jpg"},"large":{"file":"diagrama-de-gutenberg-1020x680.jpg","width":"1020","height":"680","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-1020x680.jpg"},"wysija-newsletters-max":{"file":"diagrama-de-gutenberg-600x400.jpg","width":"600","height":"400","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-600x400.jpg"},"thumb-small":{"file":"diagrama-de-gutenberg-59x42.jpg","width":"59","height":"42","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-59x42.jpg"},"thumb-standard":{"file":"diagrama-de-gutenberg-110x110.jpg","width":"110","height":"110","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-110x110.jpg"},"thumb-medium":{"file":"diagrama-de-gutenberg-196x166.jpg","width":"196","height":"166","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-196x166.jpg"},"thumb-large":{"file":"diagrama-de-gutenberg-283x190.jpg","width":"283","height":"190","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-283x190.jpg"},"thumb-anteriores":{"file":"diagrama-de-gutenberg-230x163.jpg","width":"230","height":"163","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-230x163.jpg"},"thumb-inverso":{"file":"diagrama-de-gutenberg-369x261.jpg","width":"369","height":"261","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-369x261.jpg"},"thumb-cercano":{"file":"diagrama-de-gutenberg-650x200.jpg","width":"650","height":"200","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-650x200.jpg"},"thumb-slider":{"file":"diagrama-de-gutenberg-574x430.jpg","width":"574","height":"430","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-574x430.jpg"},"thumb-busqueda":{"file":"diagrama-de-gutenberg-580x375.jpg","width":"580","height":"375","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-580x375.jpg"},"thumb-formacion-continua":{"file":"diagrama-de-gutenberg-440x336.jpg","width":"440","height":"336","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-440x336.jpg"},"advps-thumb-one":{"file":"diagrama-de-gutenberg-600x220.jpg","width":"600","height":"220","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2019\/07\/diagrama-de-gutenberg-600x220.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}}},"_links":{"self":[{"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/posts\/1418"}],"collection":[{"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/users\/91603"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/comments?post=1418"}],"version-history":[{"count":0,"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/posts\/1418\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/media\/2358"}],"wp:attachment":[{"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/media?parent=1418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/categories?post=1418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}