{"id":3157,"date":"2016-01-12T10:20:45","date_gmt":"2016-01-12T09:20:45","guid":{"rendered":"http:\/\/reddescartes.org\/documentacion\/?p=3157"},"modified":"2021-08-06T19:43:04","modified_gmt":"2021-08-06T18:43:04","slug":"libros-interactivos-con-descartes-embebido-en-moleskine-notebook","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/libros-interactivos-con-descartes-embebido-en-moleskine-notebook\/","title":{"rendered":"Libros interactivos con Descartes embebido en \u00abMoleskine notebook\u00bb"},"content":{"rendered":"<p>En este art\u00edculo se describe c\u00f3mo se pueden elaborar libros interactivos donde la interactividad la aporta Descartes y el soporte visual y de navegaci\u00f3n viene dado por \u00abMoleskine notebook\u00bb.<\/p>\n<p>A continuaci\u00f3n tienes un ejemplo de libro interactivo dise\u00f1ado con estas herramientas. Puedes navegar en \u00e9l.<\/p>\n<div><iframe class=\"iframe-class\" src=\"https:\/\/reddescartes.org\/repositorio\/Libro_ejemplo-JS\/index.html\" width=\"960\" height=\"370\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/div>\n<p style=\"text-align: center;\">(Puedes descargar este libro desde este <a href=\"https:\/\/reddescartes.org\/repositorio\/Libro_ejemplo-JS.zip\">enlace<\/a> y para verlo en otra pesta\u00f1a pulsa <a href=\"https:\/\/reddescartes.org\/repositorio\/Libro_ejemplo-JS\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">aqu\u00ed<\/a>)<\/p>\n<p style=\"text-align: left;\">Este nuevo recurso de la Red Educativa Digital Descartes lo hemos definido con el t\u00e9rmino LIBRO, fundamentado en las siguientes razones:<\/p>\n<ul>\n<li style=\"text-align: left;\"><strong>Dise\u00f1o<\/strong>. Su presentaci\u00f3n gr\u00e1fica simula la cubierta y hojas de un libro.<\/li>\n<li style=\"text-align: left;\"><strong>Animaci\u00f3n<\/strong>. La transici\u00f3n entre las p\u00e1ginas es una animaci\u00f3n que simula el desplazamiento de natural de una p\u00e1gina a otra.<\/li>\n<li style=\"text-align: left;\"><strong>Interactividad<\/strong>. Seg\u00fan la UNESCO, un libro debe tener 50 o m\u00e1s p\u00e1ginas. Esta afirmaci\u00f3n la consideramos v\u00e1lida para libros est\u00e1ticos; sin embargo, en los libros digitales interactivos, una p\u00e1gina no es \u201cuna simple p\u00e1gina\u201d, en tanto que factores como la interactividad y la aleatoriedad, la convierten \u00a0en un n\u00famero indefinido de p\u00e1ginas. La siguiente imagen, que hace parte del libro ejemplo de este tutorial, valida la afirmaci\u00f3n anterior.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma1.png\" rel=\"attachment wp-att-3164\"><img class=\"aligncenter size-full wp-image-3164\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma1.png\" alt=\"Una p\u00e1gina diferente cada vez\" width=\"541\" height=\"236\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma1.png 541w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma1-300x131.png 300w\" sizes=\"(max-width: 541px) 100vw, 541px\" \/><\/a><\/p>\n<p>Si aceptamos los argumentos anteriores, dise\u00f1ar un libro digital interactivo ser\u00e1 algo sencillo para cualquier desarrollador de escenas Descartes. Veamos, entonces, cu\u00e1l es el procedimiento para ello.<\/p>\n<h4>RECURSOS A UTILIZAR<\/h4>\n<p>Este tutorial viene acompa\u00f1ado de un libro ejemplo, sobre el cual haremos todas las explicaciones. Los recursos necesarios para dise\u00f1ar nuestro libro son los siguientes:<\/p>\n<ul>\n<li><strong>Moleskine Notebook<\/strong>. Hemos realizado una adaptaci\u00f3n de este recurso, ampliando el tama\u00f1o de las p\u00e1ginas, ajustando fuentes y tama\u00f1o de im\u00e1genes. El recurso original, se puede descargar desde este enlace: <a href=\"https:\/\/tympanus.net\/codrops\/2010\/12\/14\/moleskine-notebook\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/tympanus.net\/codrops\/2010\/12\/14\/moleskine-notebook\/<\/a>.<\/li>\n<li><strong>Escenas Descartes<\/strong>. Es importante, de acuerdo al tercer argumento planteado para validar nuestro concepto de \u201cLibro\u201d, que las escenas que incluyamos en nuestro libro tengan algo de aleatoriedad. En caso contrario, se podr\u00eda optar por dise\u00f1ar 50 p\u00e1ginas, o definirlo simplemente como un folleto.<\/li>\n<li><strong>Editor de textos<\/strong>. Podr\u00eda bastar con un editor simple (bloc de notas de Windows, por ejemplo); sin embargo, es recomendable utilizar un editor como Notepad (<a href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/notepad-plus-plus.org\/<\/a>), que presenta las l\u00edneas de c\u00f3digo en una forma m\u00e1s comprensible para su edici\u00f3n.<\/li>\n<\/ul>\n<p>Los tres recursos son de acceso y uso libre, lo que facilita el dise\u00f1o de nuestro libro.<\/p>\n<h4>CONTENIDO DEL LIBRO<\/h4>\n<p>El modelo que acompa\u00f1a este tutorial, contiene los siguientes elementos:<\/p>\n<ul>\n<li><strong>Seis archivos tipo html<\/strong>. S\u00f3lo son \u00fatiles los archivos index.html e indexb.html, los otros cuatro se han dejado para que el usuario, si lo desea, los consulte o modifique desde el editor de Descartes, pues son las escenas que se incorporar\u00e1n en el libro. Se pueden eliminar.<\/li>\n<li><strong>Carpeta audio<\/strong>. Hace parte de la \u00faltima escena del libro. Para otros dise\u00f1os no es necesaria, se puede eliminar.<\/li>\n<li><strong>Carpeta \u00abimagenes\u00bb<\/strong>. Incluye las im\u00e1genes usadas en las escenas Descartes.<\/li>\n<li><strong>Carpeta \u00abimages\u00bb<\/strong>. Incluye las im\u00e1genes usadas por Moleskine.<\/li>\n<li><strong>Carpeta css<\/strong>. Contiene el archivo style.css, que intervendremos en el dise\u00f1o.<\/li>\n<li><strong>Otras carpetas<\/strong>. Todas necesarias, no las intervendremos.<\/li>\n<\/ul>\n<p>ESCRITORIO<br \/>\nIniciamos el dise\u00f1o de nuestro libro con la elecci\u00f3n del escritorio. Para darle m\u00e1s realismo a la presentaci\u00f3n, Moleskine usa una imagen de fondo que muestra una superficie (escritorio) sobre el que est\u00e1 apoyado el libro. Adem\u00e1s de la imagen original, hemos incluido otras que puedes elegir o, si lo prefieres, incluir otra que desees (ver carpeta images).<\/p>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma2.png\" rel=\"attachment wp-att-3167\"><img class=\"aligncenter size-full wp-image-3167\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma2.png\" alt=\"Escritorio\" width=\"652\" height=\"339\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma2.png 652w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma2-300x156.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma3.png\" rel=\"attachment wp-att-3168\"><img class=\"aligncenter size-full wp-image-3168\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma3.png\" alt=\"Cambiar escritorio\" width=\"652\" height=\"340\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma3.png 652w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma3-300x156.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/p>\n<p>Para cambiar el escritorio, abrimos con el editor de textos el archivo style.css, que se encuentra en la carpeta css. Luego cambiamos el nombre de la imagen en la l\u00ednea seis:<\/p>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma4.png\" rel=\"attachment wp-att-3169\"><img class=\"aligncenter size-full wp-image-3169\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma4.png\" alt=\"C\u00f3digo para cambiar escritorio\" width=\"652\" height=\"245\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma4.png 652w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma4-300x113.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/p>\n<p>TIPO DE FUENTE<br \/>\nHemos incluido nueve tipos de fuente, diferentes a la original de Moleskine, que aceptan los caracteres del espa\u00f1ol.<\/p>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma5.png\" rel=\"attachment wp-att-3170\"><img class=\"aligncenter size-full wp-image-3170\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma5.png\" alt=\"fuentes\" width=\"548\" height=\"355\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma5.png 548w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma5-300x194.png 300w\" sizes=\"(max-width: 548px) 100vw, 548px\" \/><\/a><\/p>\n<p>Puedes ensayar varios de ellos, modificando la l\u00ednea 20 del archivo indexb.html:<\/p>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma6.png\" rel=\"attachment wp-att-3172\"><img class=\"aligncenter size-full wp-image-3172\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma6.png\" alt=\"Cambiar fuente\" width=\"652\" height=\"199\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma6.png 652w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma6-300x92.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/p>\n<p>Nosotros, hemos usado la fuente <strong>Note_this_400.font5.js<\/strong>.<\/p>\n<h4>PRIMERA P\u00c1GINA<\/h4>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma7.png\" rel=\"attachment wp-att-3173\"><img class=\"aligncenter size-full wp-image-3173\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma7.png\" alt=\"Primera p\u00e1gina\" width=\"652\" height=\"338\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma7.png 652w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma7-300x156.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a>Por defecto, Moleskine deja en blanco la p\u00e1gina de la contraportada. Nos ocuparemos, entonces, de dise\u00f1ar la primera p\u00e1gina.<br \/>\nAntes de iniciar con la primera p\u00e1gina, es importante que sepas que cada p\u00e1gina est\u00e1 incluida en un bloque &lt;div&gt;.<br \/>\nNuestra primera p\u00e1gina podemos crearla de dos formas. La primera, puede ser una imagen de un texto que dise\u00f1emos en un editor gr\u00e1fico (PowerPoint, por ejemplo), un ejemplo de ello lo veremos en la segunda p\u00e1gina. La segunda, es usar las etiquetas de HTML, as\u00ed:<\/p>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma8.png\" rel=\"attachment wp-att-3175\"><img class=\"aligncenter size-full wp-image-3175\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma8.png\" alt=\"Etiquetas javascript\" width=\"652\" height=\"193\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma8.png 652w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma8-300x89.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/p>\n<p>En el dise\u00f1o hemos usado:<\/p>\n<ul>\n<li>Centrado de p\u00e1gina: &lt;div align= \u00abcenter\u00bb&gt;.<\/li>\n<li>Etiqueta &lt;h1&gt;. Moleskine incluye, para esta etiqueta, un subrayado informal (ver imagen). Por ser la primera p\u00e1gina, hemos aumentado tres veces el tama\u00f1o de la fuente usando style=\u00bbfont-size:300%;\u00bb y alineado el texto a la izquierda.<\/li>\n<li>Etiqueta &lt;p&gt;. Tiene el mismo efecto de &lt;h1&gt;, pero sin el subrayado. Aqu\u00ed hemos usado diferentes tipos de color de fuente.<\/li>\n<li>Salto de l\u00ednea &lt;br\/&gt;.<\/li>\n<\/ul>\n<p>Si no deseas usar el tipo de fuente, puedes combinar con las etiquetas &lt;h2&gt;, &lt;h3&gt;,\u2026 Si no deseas usar ninguna etiqueta, siempre te queda la opci\u00f3n de la imagen, como veremos a continuaci\u00f3n.<\/p>\n<h4>P\u00c1GINA CON IMAGEN<\/h4>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma9.png\" rel=\"attachment wp-att-3176\"><img class=\"aligncenter size-full wp-image-3176\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma9.png\" alt=\"P\u00e1gina con imagen\" width=\"652\" height=\"340\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma9.png 652w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma9-300x156.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/p>\n<p>Se trata de una imagen, que podemos incorporar as\u00ed:<\/p>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma10.png\" rel=\"attachment wp-att-3177\"><img class=\"aligncenter size-full wp-image-3177\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma10.png\" alt=\"C\u00f3digo para insertar imagen\" width=\"652\" height=\"121\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma10.png 652w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma10-300x56.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/p>\n<p>Es importante tener en cuenta que su ancho y alto no puede ser superior a 450 pixeles.<\/p>\n<p>P\u00c1GINAS CON ESCENAS DESCARTES<br \/>\nAqu\u00ed terminamos nuestro tutorial, explicando c\u00f3mo insertamos una escena Descartes.<\/p>\n<p><a href=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma11.png\" rel=\"attachment wp-att-3178\"><img class=\"aligncenter size-full wp-image-3178\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma11.png\" alt=\"Escena de Descartes\" width=\"652\" height=\"208\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma11.png 652w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/suma11-300x96.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/p>\n<p>Nuestra escena debe tener un tama\u00f1o no superior a los 500&#215;500 pixeles. Ocasionalmente, en escenas ya dise\u00f1adas, podr\u00edamos extendernos a 550&#215;550, sacrificando un poco las m\u00e1rgenes de la p\u00e1gina.<br \/>\nPara incluir nuestras escenas al libro, seguimos este procedimiento:<\/p>\n<ul>\n<li>Abrimos con el editor de textos el archivo de la escena Descartes.<\/li>\n<li>Copiamos el c\u00f3digo comprendido entre las etiquetas &lt;ajs&gt; y &lt;\/ajs&gt;.<\/li>\n<li>En un bloque &gt;div&gt; pegamos este c\u00f3digo y\u2026 listo.<\/li>\n<\/ul>\n<p>Sugerencias de dise\u00f1o:<\/p>\n<ul>\n<li>Centrar la escena. Para ello, usamos &lt;div align=\u201dcenter\u201d&gt;.<\/li>\n<li>Incluir t\u00edtulo de la p\u00e1gina. Podemos usar: &lt;h1 align= \u00ableft\u00bb&gt;&lt;b&gt;APRENDIENDO A SUMAR&lt;\/b&gt;&lt;\/h1&gt;.<\/li>\n<li>Incluir un texto introductorio. Algo as\u00ed como: &lt;p align= \u00ableft\u00bb&gt;Observa c\u00f3mo se suma con los dedos. Luego arrastra los n\u00fameros a la casilla de la suma. &lt;\/p&gt;.<\/li>\n<li>Incluir los cr\u00e9ditos. Adem\u00e1s del reconocimiento al autor del libro, recomendamos incluir los cr\u00e9ditos a la herramienta Descartes y a <a href=\"https:\/\/tympanus.net\/codrops\/2010\/12\/14\/moleskine-notebook\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/tympanus.net\/codrops\/2010\/12\/14\/moleskine-notebook\/<\/a>,\u00a0adem\u00e1s de la licencia.<\/li>\n<\/ul>\n<hr \/>\n<p>Pulsa sobre la siguiente imagen para acceder a otro libro interactivo dise\u00f1ado con estas herramientas y que est\u00e1 publicado en el subproyecto <a href=\"..\/iCartesiLibri\/index.htm\">iCartesiLibri<\/a><\/p>\n<p><a href=\"https:\/\/proyectodescartes.org\/iCartesiLibri\/materiales_didacticos\/LibroSuma-JS\/index.html\" rel=\"attachment wp-att-3189\"><img class=\"aligncenter size-full wp-image-3189\" src=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/PortadaSuma.png\" alt=\"Portada Suma\" width=\"500\" height=\"241\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/PortadaSuma.png 500w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2016\/01\/PortadaSuma-300x145.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p style=\"text-align: center;\">(Puedes descargar este libro desde este <a href=\"..\/iCartesiLibri\/ZIPS\/LibroSuma-JS.zip\">enlace<\/a>)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo se describe c\u00f3mo se pueden elaborar libros interactivos donde la interactividad la aporta Descartes y el soporte visual y de navegaci\u00f3n viene dado por \u00abMoleskine notebook\u00bb. A continuaci\u00f3n tienes un ejemplo de libro interactivo dise\u00f1ado con estas herramientas. Puedes navegar en \u00e9l. (Puedes descargar este libro desde este enlace y para verlo en otra pesta\u00f1a pulsa aqu\u00ed) Este nuevo recurso de la Red Educativa Digital Descartes lo hemos definido con el t\u00e9rmino LIBRO, fundamentado en las siguientes razones: Dise\u00f1o. Su presentaci\u00f3n gr\u00e1fica simula la cubierta y hojas de un libro. Animaci\u00f3n. La transici\u00f3n entre las p\u00e1ginas es<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/libros-interactivos-con-descartes-embebido-en-moleskine-notebook\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,8,89],"tags":[],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/3157"}],"collection":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=3157"}],"version-history":[{"count":21,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/3157\/revisions"}],"predecessor-version":[{"id":3445,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/3157\/revisions\/3445"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=3157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=3157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=3157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}