{"id":927,"date":"2014-12-29T22:41:33","date_gmt":"2014-12-29T22:41:33","guid":{"rendered":"http:\/\/diplomapermacultura.sermasresiliente.com\/?p=927"},"modified":"2015-02-24T20:29:28","modified_gmt":"2015-02-24T20:29:28","slug":"de-los-patrones-al-detalle","status":"publish","type":"post","link":"https:\/\/sermasresiliente.com\/diploma\/de-los-patrones-al-detalle\/","title":{"rendered":"De los patrones al detalle"},"content":{"rendered":"<p>El principio fundamental que vamos a usar en el desarrollo del dise\u00f1o es el de <strong>dise\u00f1ar de los patrones al detalle<\/strong>. Ir de lo general a lo particular permite tener una visi\u00f3n general desde el principio sin que los detalles interfieran en esa visi\u00f3n. Cuanto m\u00e1s clara es esa visi\u00f3n general mejor se pueden definir los detalles. De este modo iremos difiniendo el dise\u00f1o desde las zonas, pasando por las funciones y por \u00faltimo los elementos.<!--more--><span id=\"more-1113\"><\/span><\/p>\n<p><a href=\"http:\/\/www.miestrategiadeventa.com\/wp-content\/uploads\/2014\/10\/Dise%C3%B1o.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1143\" src=\"http:\/\/www.miestrategiadeventa.com\/wp-content\/uploads\/2014\/10\/Dise%C3%B1o-1024x645.jpg\" alt=\"Mapa mental de dise\u00f1o \" width=\"960\" height=\"604\" \/><\/a><\/p>\n<h3>Definiendo Zonas<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-1156 size-full\" src=\"http:\/\/www.miestrategiadeventa.com\/wp-content\/uploads\/2014\/10\/zonas2.jpg\" alt=\"zonas en dise\u00f1o web con principios de permacultura\" width=\"400\" height=\"300\" \/>En Permacultura, las zonas se definen en funci\u00f3n de la frecuencia de uso de los elementos que se ubicar\u00e1n en cada una. As\u00ed, la zona 0 es el centro de actividades, la zona I es de uso intensivo y a medida que nos acercamos a la zona V, la frecuencia de uso es cada vez menor. En <a href=\"https:\/\/www.garnense.com\" target=\"_blank\">garnense<\/a> plantean las zonas en el dise\u00f1o web de manera muy clara y de sentido com\u00fan, y hemos aplicado ese enfoque para este portafolio.<\/p>\n<p>La <strong>zona 0<\/strong> es la zona central de la pantalla y es donde colocamos nuestro contenido.<\/p>\n<p>La <strong>zona I<\/strong> es para el header con el men\u00fa principal y la dejaremos fija en ese lugar para facilitar la navegaci\u00f3n pero tambi\u00e9n para mantener presente los elementos de <a class=\"glossaryLink \" href=\"http:\/\/www.miestrategiadeventa.com\/glosario\/branding\/\" data-tooltip=\"Es el proceso de crear un nombre e imagen \u00fanicos para un producto determinado en la mente de los consumidores. El objetivo del branding es establecer una presencia significante y diferenciada en el mercado, que sea capaz de atraer y retener clientes leales.\">branding<\/a>, tales como logo y\/o slogan.<\/p>\n<p>La <strong>zona II<\/strong> es el sidebar a la derecha de la pantalla, y es donde colocaremos elementos call to action. Elegimos el lado derecho por ser el area de atenci\u00f3n fuerte en el <a title=\"diagrama de Gutenberg\" href=\"http:\/\/www.miestrategiadeventa.com\/disenar-para-la-venta-estrategias-a-aplicar-en-tu-pagina-web\/#Gutenberg\" target=\"_blank\">diagrama de Gutenberg<\/a>.\u00a0 Aqu\u00ed tambi\u00e9n pondremos un buscador interno para facilitar la navegaci\u00f3n.<\/p>\n<p>La <strong>zona III<\/strong> est\u00e1 en la parte inferior, a continuaci\u00f3n de nuestro contenido principal. All\u00ed pondremos un formulario para recibir feedback e indicar otros contenidos relacionados al de la p\u00e1gina actual.<\/p>\n<p>La <strong>zona IV<\/strong> ser\u00e1 el footer, la parte inferior de la pagina. A esta zona de la web el usuario no deber\u00eda llegar nunca a menos que est\u00e9 perdido o no entienda donde est\u00e1, as\u00ed que en este sector pondremos enlaces a distintas p\u00e1ginas que respondan posibles preguntas tales como \u00bfqu\u00e9 es Permacultura? o \u00bfqu\u00e9 es un portafolio para diploma en Permacultura?<\/p>\n<p>En nuestro dise\u00f1o web la <strong>zona V\u00a0<\/strong>es el fondo de la pantalla a los lados de nuestra pagina y cumple en este caso una funci\u00f3n simplemente est\u00e9tica.<\/p>\n<h3>Funciones<\/h3>\n<p>Al tratarse de un portafolio de diploma, las funciones fundamentales a establecer primero son las de <strong>gesti\u00f3n de contenido<\/strong>: registrar el proceso, poder hacer seguimiento y revisi\u00f3n de ese registro, organizar el contenido y volver a \u00e9l con facilidad, y presentar el contenido a los visitantes de una manera entendible.<\/p>\n<p>La<strong> interacci\u00f3n<\/strong> es importante para recibir el feedback de otros miembros de la Academia de Permacultura y de otros permacultores, as\u00ed que en cada post y pagina del sitio web facilitaremos los comentarios del blog. Esto adem\u00e1s ayudar\u00e1 en la <strong>difusi\u00f3n de la Permacultura<\/strong>, lo cual es un <strong>criterio complementario<\/strong> para el diploma.<\/p>\n<p>Una vez definidas las funciones que queremos implementar, nos aseguraremos de que <strong>cada funci\u00f3n importante est\u00e1 soportada por m\u00e1s de un elemento<\/strong>. De esta forma a\u00f1adimos resiliencia al sistema.<\/p>\n<h3>Elementos<\/h3>\n<p>Para definir los elementos que vamos a incluir en el dise\u00f1o, tendremos en cuenta las funciones que cada elemento desempe\u00f1a, de modo que <strong>cada elemento pueda cumplir por lo menos dos funciones<\/strong>. Esto tambi\u00e9n aporta resiliencia.<\/p>\n<h3><strong>Estructura y navegabilidad<\/strong><\/h3>\n<p>Los elementos que componen la estructura son los t\u00edpicos que podemos encontrar en cualquier web: <strong>men\u00fas<\/strong>,<strong> paginas<\/strong>,<strong> post<\/strong>,<strong> widgets<\/strong>. A estos elementos les queremos agregar otros que permitan una navegabilidad <strong>entendible para el visitante<\/strong> y <strong>encontrar r\u00e1pidamente lo que est\u00e9n buscando<\/strong>. Para ello agregaremos un elemento que nos ayude en esto:<strong>related post <\/strong>(art\u00edculos relacionados) es un elemento que permite al usuario conocer a qu\u00e9 otros contenidos relacionados al que acaba de leer puede acceder. Lo colocaremos debajo del contenido principal, en nuestra zona III.<\/p>\n<div id=\"attachment_1138\" style=\"width: 310px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/www.miestrategiadeventa.com\/wp-content\/uploads\/2014\/10\/Dise%C3%B1o-del-protafolio.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1138\" class=\"wp-image-1138 size-medium\" src=\"http:\/\/www.miestrategiadeventa.com\/wp-content\/uploads\/2014\/10\/Dise%C3%B1o-del-protafolio-300x211.jpg\" alt=\"propuesta de organizaci\u00f3n de contenido y estrategia de categorias y etiquetas\" width=\"300\" height=\"211\" \/><\/a><p id=\"caption-attachment-1138\" class=\"wp-caption-text\">En el mapa mental de organizaci\u00f3n de contenido<\/p><\/div>\n<p>Otros elementos que ayudar\u00e1n a estructurar el contenido de esos post y paginas son las categorias y etiquetas. Consideramos muy importante, sobre todo<strong> para una pagina web con mucho contenido<\/strong>, crear una <strong>buena estructura de categorias y etiquetas<\/strong>. Buscamos con ello organizar de forma eficiente nuestro contenido, saber de ante mano d\u00f3nde va, y al mismo tiempo mejorar la usabilidad.<\/p>\n<h3><strong>Contenido y Estrategia de contenido<\/strong><\/h3>\n<p>El contenido que gestionaremos en esta pagina web son los que indica el manual de diploma para el portafolio: <strong>Borrador del proceso<\/strong>, <strong>Trabajo de curso<\/strong>, <strong>Anexos<\/strong>, <strong>Resumen de actividades<\/strong>. Tambi\u00e9n gestionaremos el <strong>diario de actividades<\/strong> y las <strong>presentaciones finales<\/strong>, que aunque no deben ir obligatoriamente en el portafolio seg\u00fan el manual de la academia, consideramos que podemos aprovechar la plataforma para agregarlos.<\/p>\n<p>Parte de este contenido lo crearemos de modo que pueda ser re-utilizado para otro proyecto personal:<strong> Ser mas Resiliente<\/strong>, esto es parte de la visi\u00f3n que hemos definido al inicio de este proyecto. El prop\u00f3sito es que, una vez presentado el portafolio en el acto de acreditaci\u00f3n, <strong>este proyecto web siga creciendo.<\/strong> Con una secci\u00f3n de blog, que tendr\u00e1 parte de los contenidos desarrollados para el portafolio y nuevos post\u00a0 relacionados con <strong>Permacultura, sostenibilidad y estilo de vida<\/strong>. La web tambi\u00e9n nos servir\u00e1 de plataforma para difundir todo tipo de actividades relacionadas, cursos presenciales y digitales y un sin fin de posibilidades, el l\u00edmite es la imaginaci\u00f3n!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El principio fundamental que vamos a usar en el desarrollo del dise\u00f1o es el de dise\u00f1ar de los patrones al detalle. Ir de lo general a lo particular permite tener una visi\u00f3n general desde el principio sin que los detalles interfieran en esa visi\u00f3n. Cuanto m\u00e1s clara es esa visi\u00f3n general mejor se pueden definir [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-927","post","type-post","status-publish","format-standard","hentry","category-portafolio"],"_links":{"self":[{"href":"https:\/\/sermasresiliente.com\/diploma\/wp-json\/wp\/v2\/posts\/927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sermasresiliente.com\/diploma\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sermasresiliente.com\/diploma\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sermasresiliente.com\/diploma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sermasresiliente.com\/diploma\/wp-json\/wp\/v2\/comments?post=927"}],"version-history":[{"count":5,"href":"https:\/\/sermasresiliente.com\/diploma\/wp-json\/wp\/v2\/posts\/927\/revisions"}],"predecessor-version":[{"id":1360,"href":"https:\/\/sermasresiliente.com\/diploma\/wp-json\/wp\/v2\/posts\/927\/revisions\/1360"}],"wp:attachment":[{"href":"https:\/\/sermasresiliente.com\/diploma\/wp-json\/wp\/v2\/media?parent=927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sermasresiliente.com\/diploma\/wp-json\/wp\/v2\/categories?post=927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sermasresiliente.com\/diploma\/wp-json\/wp\/v2\/tags?post=927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}