{"id":650,"date":"2016-08-25T11:15:07","date_gmt":"2016-08-25T17:15:07","guid":{"rendered":"http:\/\/www.crec.mx\/ispring\/?p=650"},"modified":"2016-11-11T13:23:54","modified_gmt":"2016-11-11T19:23:54","slug":"los-4-aspecto-importantes-al-construir-una-reticula-cursos-e-learning","status":"publish","type":"post","link":"http:\/\/www.crec.mx\/ispring\/2016\/08\/25\/los-4-aspecto-importantes-al-construir-una-reticula-cursos-e-learning\/","title":{"rendered":"Los 4 aspecto m\u00e1s importantes al construir una ret\u00edcula para cursos e-learning"},"content":{"rendered":"<p><iframe loading=\"lazy\" style=\"border: none; overflow: hidden;\" src=\"https:\/\/www.facebook.com\/plugins\/share_button.php?href=http%3A%2F%2Fwww.crec.mx%2Fispring%2F2016%2F08%2F25%2Flos-4-aspecto-importantes-al-construir-una-reticula-cursos-e-learning%2F&amp;layout=button_count&amp;mobile_iframe=true&amp;width=91&amp;height=20&amp;appId\" width=\"91\" height=\"20\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p style=\"text-align: justify;\">Empezar con la parte gr\u00e1fica en un proyecto de e-Learning suele causar conflictos a la hora de tener el lienzo en blanco y comenzar con la distribuci\u00f3n de nuestros contenidos. Enfrentarse al espacio en blanco es el primer paso para entender el porqu\u00e9 es importante el uso de una ret\u00edcula que nos permita colocar textos, im\u00e1genes o recursos multimedia de una manera m\u00e1s efectiva y con ello evitar el desequilibrio visual en nuestro proyecto, del mismo modo, nos va a servir de apoyo para elegir la fuente o familia tipogr\u00e1fica que usaremos, determinar los tama\u00f1os que creamos sean convenientes para diferenciar, t\u00edtulos, subt\u00edtulos y el texto de los p\u00e1rrafos. Otro aspecto que podemos determinar es la paleta de color que vamos a usar para los recursos dentro del proyecto, est\u00e1 puede ser en base a una identidad gr\u00e1fica que ya tengamos anticipadamente, pero esto lo veremos en otro art\u00edculo para profundizar m\u00e1s en el tema<\/p>\n<h3 style=\"text-align: justify;\">1. \u00bfQu\u00e9 es una ret\u00edcula?<\/h3>\n<p style=\"text-align: justify;\">Lo podemos definir como una herramienta que nos permitir\u00e1 estructurar de una forma eficiente nuestra \u00e1rea de trabajo.<\/p>\n<p style=\"text-align: justify;\">Hablando en el terreno del dise\u00f1o gr\u00e1fico una ret\u00edcula es una estructura bidimensional compuesta generalmente por l\u00edneas verticales y horizontales, distribuidas a lo largo y ancho de nuestra \u00e1rea de trabajo, formando gu\u00edas para la distribuci\u00f3n de los elementos a emplear en nuestro proyecto. Estas gu\u00edas nos permiten armonizar los textos con los contenidos multimedia que se usen en el proyecto y as\u00ed evitar espacios en blanco innecesarios que desv\u00eden la atenci\u00f3n del usuario.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-653\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.05.18-a.m.-1024x581.png\" alt=\"Captura de pantalla 2016-08-25 a las 11.05.18 a.m.\" width=\"624\" height=\"354\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.05.18-a.m.-1024x581.png 1024w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.05.18-a.m.-300x170.png 300w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.05.18-a.m.-768x436.png 768w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.05.18-a.m..png 1066w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/p>\n<h3 style=\"text-align: justify;\">2. Usos en el dise\u00f1o gr\u00e1fico:<\/h3>\n<p style=\"text-align: justify;\"><strong>a) Impresos<\/strong>; La ret\u00edcula tambi\u00e9n puede llamarse -maqueta- en los medios impresos como en libros o revistas. Tener una maqueta de c\u00f3mo se va a distribuir la informaci\u00f3n nos ayuda a preveer ciertos aspectos t\u00e9cnicos para la producci\u00f3n del impreso, como la cantidad de p\u00e1ginas a emplear, el compaginado o armado de archivo para su impresi\u00f3n, las gu\u00edas para corte o rebase y la distribuci\u00f3n de los textos. Dentro de la ret\u00edcula podemos organizar elementos como t\u00edtulos, subt\u00edtulos, contenido, fotos, pie y cr\u00e9dito de foto, numeraci\u00f3n, entre otros.<\/p>\n<p style=\"text-align: justify;\"><strong>b) Web<\/strong>; Para la construcci\u00f3n de un sitio web tener una ret\u00edcula o <em>layout<\/em>, nos servir\u00e1 para poder organizar de una forma coherente y de f\u00e1cil manejo para el usuario, los distintos elementos que podemos tener dentro de nuestro sitio, estos elementos pueden ser Encabezado (header), pie de p\u00e1gina (footer), Men\u00fa, Logotipo, entre otros elementos.<\/p>\n<p style=\"text-align: justify;\"><strong>c) e-Learning<\/strong> ; Con lo anterior quedan sentadas las bases de lo que es una ret\u00edcula, ahora, veremos como aplicar estos conocimientos a un proyecto e-learning. Como ya lo mencionamos, tener una ret\u00edcula nos facilitar\u00e1 la tarea de distribuir los contenidos en nuestro proyecto, al igual que en una p\u00e1gina web, debemos contemplar ciertos elementos a la hora de iniciar con la diagramaci\u00f3n de nuestra \u00e1rea de trabajo.<\/p>\n<h3 style=\"text-align: justify;\">3. Elementos esenciales<\/h3>\n<p style=\"text-align: justify;\">A continuaci\u00f3n vamos a mencionar los elementos mas esenciales que debemos contemplar para un proyecto e-Learning, no necesariamente tienen que ser todas, eso va a depender de los contenidos que tengamos, podr\u00edan ser menos o pueden haber otras mas.<\/p>\n<ul style=\"text-align: justify;\">\n<li>Portada General<\/li>\n<li>Portadillas de unidad<\/li>\n<li>P\u00e1gina \u00edndice o men\u00fa<\/li>\n<li>P\u00e1gina de objetivo general<\/li>\n<li>P\u00e1gina de objetivos espec\u00edficos<\/li>\n<li>P\u00e1ginas de contenidos<\/li>\n<li>P\u00e1gina para tareas, individual o grupal<\/li>\n<li>P\u00e1gina para contenidos audiovisuales<\/li>\n<li>Conclusiones<\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-654 size-large\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.21.01-a.m.-1024x581.png\" alt=\"Captura de pantalla 2016-08-25 a las 11.21.01 a.m.\" width=\"624\" height=\"354\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.21.01-a.m.-1024x581.png 1024w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.21.01-a.m.-300x170.png 300w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.21.01-a.m.-768x436.png 768w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.21.01-a.m..png 1066w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/p>\n<h3 style=\"text-align: justify;\">4. \u00bfC\u00f3mo estructurar una ret\u00edcula?<\/h3>\n<p style=\"text-align: justify;\">Debemos contemplar \u00e1reas dentro de nuestro espacio de trabajo que ser\u00e1n las mas constantes durante el desarrollo del proyecto, enlistaremos las que creemos son las m\u00e1s indispensables para tener una interfaz que sea de f\u00e1cil entendimiento y navegaci\u00f3n para los usuarios.<\/p>\n<ul style=\"text-align: justify;\">\n<li><strong>Encabezado.<\/strong> Esta \u00e1rea estar\u00e1 destinada a contener los t\u00edtulos y subt\u00edtulos de los contenidos, adem\u00e1s de que puede ser un buen lugar para colocar tu logo (en caso de que cuentes con uno).<\/li>\n<li><strong>Columnas.<\/strong> Dentro de nuestra \u00e1rea de trabajo podemos dividir en tantas columnas como queramos, dentro de ellas se van a colocar los contenidos de nuestro proyecto.<\/li>\n<li><strong>Pleca.<\/strong> Tradicionalmente hablando una pleca es una l\u00ednea o barra que atraviesa de extremo a extremo el texto y nos ayuda a dividir las cajas de texto. Actualmente una pleca sigue teniendo la misma funci\u00f3n, e igualmente nos sirve como un elemento decorativo o funcional dentro de nuestro proyecto.<\/li>\n<li><strong>Botones de navegaci\u00f3n.<\/strong> Aunque en ocasiones el software que usemos nos genere una botonera para poder navegar (o <em>player<\/em>) dentro del proyecto, nosotros podemos generar nuestros propios botones, adapt\u00e1ndolos al dise\u00f1o o identidad gr\u00e1fica que estemos usando en nuestra interfaz. Podemos contemplar algunos botones b\u00e1sico como, &lt;&lt; atr\u00e1s, siguiente &gt;&gt;, play\/pausa, inicio y men\u00fa, se pueden agregar m\u00e1s, si el proyecto lo requiere.<\/li>\n<li><strong>Pie de p\u00e1gina.<\/strong> En esta \u00e1rea podemos colocar el n\u00famero de p\u00e1gina o informaci\u00f3n adicional que complete lo que estamos viendo en el \u00e1rea de trabajo.<\/li>\n<li><strong>Gu\u00eda de ubicaci\u00f3n.<\/strong> Es una herramienta que nos permite saber en que punto del curso nos encontramos, puede ser desde una barra que va aumentando a medida que vamos avanzado o una representaci\u00f3n gr\u00e1fica m\u00e1s elaborada.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-655\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.15.29-a.m.-1024x581.png\" alt=\"Captura de pantalla 2016-08-25 a las 11.15.29 a.m.\" width=\"624\" height=\"354\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.15.29-a.m.-1024x581.png 1024w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.15.29-a.m.-300x170.png 300w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.15.29-a.m.-768x436.png 768w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2016\/08\/Captura-de-pantalla-2016-08-25-a-las-11.15.29-a.m..png 1066w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/p>\n<p style=\"text-align: justify;\">Esperamos que esta informaci\u00f3n te sea de utilidad en tus pr\u00f3ximos proyectos.<br \/>\nNecesitas ayuda para construir tu ret\u00edcula, <a href=\"http:\/\/www.crec.mx\/ispring\/contacto\/\">comun\u00edcate con nosotros.\u00a0<\/a><\/p>\n<p>\u00bfTe gust\u00f3 este art\u00edculo?, comp\u00e1rtelo con tus amigos<br \/>\n<iframe loading=\"lazy\" src=\"https:\/\/www.facebook.com\/plugins\/share_button.php?href=http%3A%2F%2Fwww.crec.mx%2Fispring%2F2016%2F08%2F25%2Flos-4-aspecto-importantes-al-construir-una-reticula-cursos-e-learning%2F&#038;layout=button_count&#038;mobile_iframe=true&#038;width=91&#038;height=20&#038;appId\" width=\"91\" height=\"20\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Empezar con la parte gr\u00e1fica en un proyecto de e-Learning suele causar conflictos a la hora de tener el lienzo en blanco y comenzar con la distribuci\u00f3n de nuestros contenidos. Enfrentarse al espacio en blanco es el primer paso para entender el porqu\u00e9 es importante el uso de una ret\u00edcula que nos permita colocar textos, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":859,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,7,6],"tags":[],"class_list":["post-650","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-e-learning","category-presentacion-consejos-y-trucos"],"_links":{"self":[{"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/posts\/650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":9,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/posts\/650\/revisions"}],"predecessor-version":[{"id":885,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/posts\/650\/revisions\/885"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/media\/859"}],"wp:attachment":[{"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/media?parent=650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/categories?post=650"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/tags?post=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}