{"id":475,"date":"2025-09-05T06:15:44","date_gmt":"2025-09-05T06:15:44","guid":{"rendered":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=475"},"modified":"2026-02-27T16:25:09","modified_gmt":"2026-02-27T16:25:09","slug":"creacion-de-diapositivas-con-ia-keynote-o-revealjs","status":"publish","type":"post","link":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=475","title":{"rendered":"Creaci\u00f3n de Diapositivas con IA (Keynote o RevealJS)"},"content":{"rendered":"\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile has-tertiary-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-8ff7703b8926e0778a04cbe3929c0d6d\"><figure  class=\"wp-block-media-text__media\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" alt=\"\" src=\"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/ChatGPT-Image-5-set.-2025-08_10_56.png?resize=1024%2C1024&#038;ssl=1\" class=\"wp-image-490 size-full\" srcset=\"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/ChatGPT-Image-5-set.-2025-08_10_56.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/ChatGPT-Image-5-set.-2025-08_10_56.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/ChatGPT-Image-5-set.-2025-08_10_56.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/ChatGPT-Image-5-set.-2025-08_10_56.png?resize=768%2C768&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>En esta entrada explico un m\u00e9todo para convertir apuntes\/textos en diapositivas autom\u00e1ticamente (para Keynote o RevealJS).<\/p>\n<\/div><\/div>\n\n\n\n<p>En otra entrada de este blog ya habl\u00e9 de la creaci\u00f3n de materiales para algunos cursos de formaci\u00f3n del profesorado que estoy impartiendo (<a href=\"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=453\" data-type=\"post\" data-id=\"453\">Dise\u00f1o de materiales y Moodle para cursos del CEFIRE<\/a>). En esta me voy a centrar en un flujo de trabajo que he dise\u00f1ado para crear diapositivas autom\u00e1ticamente en los dos tipos de presentaciones que uso habitualmente: <a href=\"https:\/\/www.apple.com\/es\/keynote\/\">Keynote<\/a> y <a href=\"https:\/\/revealjs.com\">RevealJS<\/a> (dentro de <a href=\"https:\/\/joplinapp.org\/plugins\/plugin\/io.github.personalizedrefrigerator.revealjs-integration\/\">Joplin<\/a>).<\/p>\n\n\n\n<p>Esta entrada no va de que la IA haga por nosotros el contenido de la presentaci\u00f3n (que tambi\u00e9n podr\u00eda ser, pero no es mi estilo); si no de que a partir del contenido (o un contenido aproximado) autom\u00e1ticamente nos la formatee en estas dos aplicaciones antes mencionadas. Es por tanto, una forma personal de trabajar a la hora de crear presentaciones, que aqu\u00ed comparto por si a alguien le sirve parte o la totalidad de este flujo de trabajo.<\/p>\n\n\n\n<p>El esquema general de trabajo es:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Partir de un contenido.<\/li>\n\n\n\n<li>Transformar ese contenido en un esquema de texto separado por diapositivas y que indique el formato deseado.<\/li>\n\n\n\n<li>Obtener ese contenido en el c\u00f3digo adecuado para introducir en Keynote o RevealJS\/Joplin.<\/li>\n<\/ul>\n\n\n\n<p>A continuaci\u00f3n, empezamos la explicaci\u00f3n para Keynote, pero si lo que te interesa es solo el ejemplo de RevealJs\/Joplin, salta a la siguiente secci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Flujo de trabajo para Keynote<\/strong><\/h2>\n\n\n\n<p>Hay unos prerequisitos que tenemos que tener en cuenta antes de seguir la explicaci\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keynote solo funciona en Mac<\/li>\n\n\n\n<li>Necesitamos utilizar <a href=\"https:\/\/support.apple.com\/ca-es\/guide\/script-editor\/welcome\/mac\">AppleScripts<\/a> (solo disponible en sistemas Apple de escritorio) para \u00abpoblar\u00bb autom\u00e1ticamente una plantilla con el contenido. Le introduciremos un c\u00f3digo creado con IA y en un segundo crear\u00e1 toda la presentaci\u00f3n.<\/li>\n\n\n\n<li>Podemos tener nuestra propia plantilla de Keynote, pero debemos utilizar correctamente los elementos por defecto de la misma para que funcione.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Creando\/Editando una Plantilla de Keynote<\/h3>\n\n\n\n<p>Si queremos dar un toque personal a nuestra plantilla, en lugar de utilizar una por defecto, podemos <a href=\"https:\/\/support.apple.com\/es-lamr\/guide\/keynote\/tanb343cb739\/mac\">editar la plantilla de Keynote<\/a>. Y lo m\u00e1s importante a tener en cuenta, seg\u00fan mi experiencia, para que funcione el flujo correctamente es:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tener claro qu\u00e9 t\u00edtulo de plantilla indicamos (y recordar ese nombre para cuando vayamos a crear el Applescript).<\/li>\n\n\n\n<li>Tener claro los nombres que ponemos a los diferentes tipos de modelos de diapositivas dentro de la plantilla (ib\u00eddem).<\/li>\n\n\n\n<li>Utilizar siempre los textos de \u00abT\u00edtulo\u00bb y \u00abcuerpo de texto\u00bb por defecto de cada modelo de diapositivas. Cada diapositiva, solo puede tener un contenedor de texto de cada uno de los anteriores. Lo ideal es empezar desde un modelo b\u00e1sico y de ah\u00ed crear una plantilla nueva.<\/li>\n<\/ul>\n\n\n\n<p>En la imagen, muestro los elementos a tener en cuenta:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"664\" src=\"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Ventana-Keynote.jpg?resize=1024%2C664&#038;ssl=1\" alt=\"\" class=\"wp-image-477\" srcset=\"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Ventana-Keynote-scaled.jpg?resize=1024%2C664&amp;ssl=1 1024w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Ventana-Keynote-scaled.jpg?resize=300%2C194&amp;ssl=1 300w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Ventana-Keynote-scaled.jpg?resize=768%2C498&amp;ssl=1 768w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Ventana-Keynote-scaled.jpg?resize=1536%2C995&amp;ssl=1 1536w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Ventana-Keynote-scaled.jpg?resize=2048%2C1327&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Primero (1) se debe entrar en el modo de editar las diapositivas maestras. Sabremos que lo estamos haciendo cuando veamos esa franja azul debajo.<\/li>\n\n\n\n<li>A la izquierda (2), tenemos todos los nombres de los modelos de diapositivas dentro de ese tema. Esos nombres, que podemos modificar a nuestro gusto, son los que debemos recordar m\u00e1s adelante.<\/li>\n\n\n\n<li>A la derecha (3), tenemos los conmutadores para que una diapositiva tenga o no los elementos de texto de T\u00edtulo y Contenido. Si los marcamos, esos elementos aparecer\u00e1n en nuestra diapositiva y los podremos editar a nuestro gusto.<\/li>\n\n\n\n<li>Cualquier otro elemento de texto (4) que exista en la diapositiva (y que no sea o el t\u00edtulo o el cuerpo de texto que aparecen y desaparecen con los conmutadores), bien sea por que lo hemos creado nosotros o incluso porque venga predefinido en la plantilla <strong>no funcionar\u00e1<\/strong>, y el c\u00f3digo de AppleScript no podr\u00e1 editarlo. As\u00ed que debemos decidir si borrarlo, o si lo dejamos, recordar que m\u00e1s adelante lo deberemos de editar manualmente.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">De contenido a esquema<\/h3>\n\n\n\n<p>Sea cu\u00e1l sea nuestra forma de llegar al contenido con el que queremos \u00abpoblar\u00bb la diapositiva, recomiendo trabajar primero con una etapa intermedia sobre lo que exactamente crear\u00e1 el AppleScript para poder visualizar el contenido m\u00e1s c\u00f3modamente sin todas las etiquetas de c\u00f3digo.<\/p>\n\n\n\n<p>En mi caso, he creado este ejemplo de plantilla para diapositiva para usar como esquema:<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-green-cyan-color has-contrast-background-color has-text-color has-background has-link-color wp-elements-248c17639b3b7efb8776c06e1c5d60ba\"><code>TYPE: Title \/\/ Title &amp; Bullets \/\/ Section \/\/ Quote \/\/ Info \/\/ Blank\nTITLE: \nCONTENT: \nNOTES:<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>En \u00abType\u00bb; tengo escritos todos los tipos de diapositiva que maneja mi plantilla, y simplemente se trata de elegir uno de ellos.<\/li>\n\n\n\n<li>En \u00abTitle\u00bb y \u00abContent\u00bb vendr\u00eda el texto a introducir en cada uno de esos elementos de plantilla.<\/li>\n\n\n\n<li>En \u00abNotes\u00bb se indicar\u00edan las notas del presentador que queremos que se introduzcan en la generaci\u00f3n autom\u00e1tica.<\/li>\n<\/ul>\n\n\n\n<p>Podemos crear manualmente nosotros el esquema o pedirle a una IA que nos rellene este esquema para cada diapositiva con un simple prompt, que podr\u00eda ser algo as\u00ed como:<\/p>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-contrast-background-color has-text-color has-background has-link-color wp-elements-4565b9e6bef6b79b1eda590c60f2d7d0\"><code>&#091;A partir de este contexto] Crea un esquema de las diapositivas de una presentaci\u00f3n en la que en cada diapositiva elijas el tipo de diapositiva y completes el contenido siguiendo esta plantilla:\nTYPE: Title \/\/ Title &amp; Bullets \/\/ Section \/\/ Quote \/\/ Info \/\/ Blank\nTITLE: \nCONTENT: \nNOTES:<\/code><\/pre>\n\n\n\n<p>En contexto le podemos indicar un tema, pasar unos apuntes completos o un esquema a medio hacer para que lo arregle y complete.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">De esquema a c\u00f3digo<\/h3>\n\n\n\n<p>Ahora empieza la magia.<\/p>\n\n\n\n<p>Una vez tenemos el esquema, le vamos a pedir a la IA que lo transforme en el c\u00f3digo necesario para ser utilizado en AppleScript.<\/p>\n\n\n\n<p>Partimos de un ejemplo de esquema creado por IA:<\/p>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-contrast-background-color has-text-color has-background has-link-color wp-elements-c77573eb0c977414174142301e53ac65\"><code># Diapositiva 1\n**TYPE:** Title  \n**TITLE:** Innovaci\u00f3n en la Era Digital: Transformando el Futuro  \n**CONTENT:** Subt\u00edtulo: \"Estrategias para el \u00e9xito empresarial en el siglo XXI\"  \n**NOTES:** Diapositiva de apertura. Mantener el foco en el t\u00edtulo principal. Presentaci\u00f3n personal breve del ponente.\n\n# Diapositiva 2\n**TYPE:** Title &amp; Bullets  \n**TITLE:** \u00bfPor qu\u00e9 la Innovaci\u00f3n Digital es Crucial?  \n**CONTENT:**  \n\u2022 Acelera los procesos empresariales en un 70%\n\u2022 Mejora la experiencia del cliente significativamente\n\u2022 Reduce costos operativos hasta un 40%\n\u2022 Permite acceso a nuevos mercados globales\n\u2022 Facilita la toma de decisiones basada en datos\n\n**NOTES:** Enfatizar cada punto con ejemplos concretos. Usar estad\u00edsticas actuales para reforzar los argumentos.\n\n# Diapositiva 3\n**TYPE:** Section  \n**TITLE:** CASOS DE \u00c9XITO  \n**CONTENT:** \n**NOTES:** Diapositiva de transici\u00f3n hacia los ejemplos pr\u00e1cticos. Pausa dram\u00e1tica antes de continuar.\n\n# Diapositiva 4\n**TYPE:** Quote  \n**TITLE:** La innovaci\u00f3n distingue entre un l\u00edder y un seguidor  \n**CONTENT:** - Steve Jobs  \n**NOTES:** Conectar la cita con los casos de \u00e9xito que se presentar\u00e1n. Reflexi\u00f3n sobre liderazgo empresarial.\n\n# Diapositiva 5\n**TYPE:** Info  \n**TITLE:** 15% anual  \n**CONTENT:**  \nCrecimiento del e-commerce\n**NOTES:** Presentar datos de forma visual con gr\u00e1ficos. Explicar la relevancia de cada estad\u00edstica para la audiencia.\n\n# Diapositiva 6\n**TYPE:** Blank  \n**TITLE:**\n**CONTENT:**  \n**NOTES:** Momento de reflexi\u00f3n silenciosa. Poner una imagen que ayude a la reflexi\u00f3n.<\/code><\/pre>\n\n\n\n<p>Conviene fijarse en unos peque\u00f1os detalles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>En la diapositiva de secci\u00f3n, aunque el ejemplo original creado por IA ten\u00eda contenido en el apartado \u00abContent\u00bb, se lo que quitado ya que en mi plantilla, los t\u00edtulos de secciones aparecen solos, sin nada m\u00e1s.<\/li>\n\n\n\n<li>La Diapositiva Blank es una diapositiva comod\u00edn, para cuando planeo incluir algo que no va a poder automatizarse, pero quiero dejar un espacio ya preparado para el ajuste fino al final del proceso, y mantengo notas del presentador para recordarme qu\u00e9 quer\u00eda hacer en esa diapositiva.<\/li>\n<\/ul>\n\n\n\n<p>Una vez tenemos este esquema, hay que transformarlo en c\u00f3digo. Para ello yo utilizo este Prompt, en el que le doy unas indicaciones generales, le pongo un ejemplo de sintaxis (si no lo haces es muy probable que se equivoque en algo y no funcione) as\u00ed como el esquema a utilizar.<br><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Crea un AppleScript para generar una presentaci\u00f3n Keynote a partir del esquema que tienes al final con estas especificaciones exactas:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tema:<\/strong> \u201cCEFIRE\u201d<\/li>\n\n\n\n<li><strong>Tipos de diapositivas disponibles:<\/strong> Title, Title &amp; Bullets, Section, Quote, Info, Blank<\/li>\n\n\n\n<li><strong>Transicione<\/strong>s; en cada diapositiva debes indicar: set transition properties to {transition effect:dissolve, transition duration:1.0}<\/li>\n\n\n\n<li><strong>Title &amp; Bullets:<\/strong> NO incluir s\u00edmbolos de bullet (\u2022) en el texto, ya que el tema los a\u00f1ade autom\u00e1ticamente<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>A continuaci\u00f3n tienes un ejemplo de sintaxis:<\/p>\n\n\n\n<p>&#8212; Diapositiva 1: Title<\/p>\n\n\n\n<p><strong>tell<\/strong> <em>slide<\/em> 1<\/p>\n\n\n\n<p><strong>set<\/strong> object text <strong>of<\/strong> default title item <strong>to<\/strong> \u00abT\u00edtulo\u00bb<\/p>\n\n\n\n<p><strong>set<\/strong> object text <strong>of<\/strong> default body item <strong>to<\/strong> \u00abCuerpo\u00bb<\/p>\n\n\n\n<p><strong>set<\/strong> presenter notes <strong>to<\/strong> \u00abDiapositiva de apertura.\u00bb<\/p>\n\n\n\n<p><strong>set<\/strong> transition properties <strong>to<\/strong> {transition effect:<em>dissolve<\/em>, transition duration:1.0}<\/p>\n\n\n\n<p><strong>end<\/strong> <strong>tell<\/strong><\/p>\n\n\n\n<p><em>&#8212; Diapositiva 2: Title &amp; Bullets<\/em><\/p>\n\n\n\n<p>make new slide with properties {base slide:master slide \u00abTitle &amp; Bullets\u00bb of myPresentation}<\/p>\n\n\n\n<p>tell slide 2<\/p>\n\n\n\n<p>set object text of default title item to \u201cT\u00edtulo de la diapositiva\u201c<\/p>\n\n\n\n<p>set object text of default body item to \u201cContenido\u201d<\/p>\n\n\n\n<p>set presenter notes to \u201cNotas al presentador\u201d<\/p>\n\n\n\n<p>set transition properties to {transition effect:dissolve, transition duration:1.0}<\/p>\n\n\n\n<p>end tell<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>A continuaci\u00f3n tienes el esquema que debes transformar en c\u00f3digo.<\/p>\n\n\n\n<p>[INTRODUCIR ESQUEMA]<\/p>\n<\/blockquote>\n\n\n\n<p>Evidentemente, debes revisar algunos aspectos de este prompt seg\u00fan tu caso: el t\u00edtulo de tema, los nombres de las diapositivas, y los bullets points seg\u00fan tu caso de plantilla, y las transiciones que quieres aplicar a cada cambio de diapositiva (por desgracia, no se puede automatizar la animaci\u00f3n de elementos individuales). F\u00edjate como en la primera diapositiva no hay que crearla, ya que ya est\u00e1 creada; \u00e9ste es un error frecuente de la IA, si no le indicas la sintaxis adecuada de la primera diapositiva.<\/p>\n\n\n\n<p>Si quieres saber m\u00e1s sobre qu\u00e9 se puede y que no se puede hacer con Keynote y AppleScript conviene que consultes: <a href=\"https:\/\/iworkautomation.com\/keynote\/\">https:\/\/iworkautomation.com\/keynote\/<\/a><\/p>\n\n\n\n<p>Una vez tengas el c\u00f3digo generado por la IA, debes abrir un nuevo documento de AppleScript, copiar el c\u00f3digo (en la zona 1) y ejecutarlo (2), tal y como se indica en la imagen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"988\" height=\"1024\" src=\"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/AppleScript.jpg?resize=988%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-478\" srcset=\"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/AppleScript.jpg?resize=988%2C1024&amp;ssl=1 988w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/AppleScript.jpg?resize=289%2C300&amp;ssl=1 289w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/AppleScript.jpg?resize=768%2C796&amp;ssl=1 768w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/AppleScript.jpg?resize=1481%2C1536&amp;ssl=1 1481w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/AppleScript.jpg?w=1624&amp;ssl=1 1624w\" sizes=\"auto, (max-width: 988px) 100vw, 988px\" \/><\/figure>\n\n\n\n<p>Y, cruzando los dedos, ya tendr\u00e1s tu presentaci\u00f3n de diapositivas completa en menos de un segundo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"883\" src=\"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Mesa-de-luz.jpg?resize=1024%2C883&#038;ssl=1\" alt=\"\" class=\"wp-image-480\" srcset=\"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Mesa-de-luz.jpg?resize=1024%2C883&amp;ssl=1 1024w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Mesa-de-luz.jpg?resize=300%2C259&amp;ssl=1 300w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Mesa-de-luz.jpg?resize=768%2C662&amp;ssl=1 768w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Mesa-de-luz.jpg?resize=1536%2C1324&amp;ssl=1 1536w, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/Mesa-de-luz.jpg?resize=2048%2C1765&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>L\u00f3gicamente, para una presentaci\u00f3n tan peque\u00f1a, no merece la pena todo este esfuerzo. Pero si estamos hablando de 20 o incluso 100 diapositivas, ah\u00ed es cuando esta forma de trabajar ahorra mucho tiempo.<\/p>\n\n\n\n<div class=\"ko-fi-button\" data-text=\"\u00bfMe invitas a un \u2615\ufe0f?\" data-color=\"#ff5f5f\" data-code=\"miralles\" id=\"kofiShortcode172Html\" style=\"float: none; text-align: left;\" data-title=\"\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Flujo de trabajo para RevealJS (Joplin)<\/h2>\n\n\n\n<p>Aunque soy muy fan de Keynote, recientemente he empezado a utilizar Joplin como repositorio Markdown de notas, as\u00ed como herramienta principal para crear el contenido de texto de mis cursos. Joplin y Markdown pueden utilizarse con un entorno para crear presentaciones llamado RevealJS, mediante un <a href=\"https:\/\/joplinapp.org\/plugins\/plugin\/io.github.personalizedrefrigerator.revealjs-integration\/\">plug-in<\/a>. Si bien, RevealJS tiene muchas funciones, no todas est\u00e1n disponibles dentro de Joplin; pero me bastan. La funci\u00f3n de la IA aqu\u00ed ser\u00e1 similar, a partir del mismo esquema de diapositivas explicado en el punto anterior, crear el tipo de c\u00f3digo necesario para que funcione.<\/p>\n\n\n\n<p>Se requiere un conocimiento m\u00ednimo de <a href=\"https:\/\/www.markdownguide.org\">Markdown<\/a> para usar este sistema. Si ya tienes unas nociones b\u00e1sicas de Markdown, leyendo el prompt puedes entender c\u00f3mo funciona el sistema:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Se crear\u00e1n las diapositivas en Markdown, con sus sintaxis habitual<\/li>\n\n\n\n<li>Se a\u00f1adir\u00e1n los efectos con comentarios debajo de cada secci\u00f3n siguiendo este ejemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-contrast-background-color has-text-color has-background has-link-color wp-elements-120ce4173a0f3fe27668a61176381405\"><code>&#091;FX: Nombre de FX]: #<\/code><\/pre>\n\n\n\n<p>Y luego el c\u00f3digo Markdown se introducir\u00e1 en una IA con el siguiente Prompt.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Debes mantener casi intacto el Markdown.<\/p>\n\n\n\n<p>Solo a\u00f1ade para revealjs&nbsp; los bakcgrounds y los efectos.<\/p>\n\n\n\n<p>Usar\u00e1s al principio esta hoja de estilo:<\/p>\n\n\n\n<p>&lt;style&gt; .reveal { &#8211;r-main-color: black; &#8211;r-heading-color: black; &#8211;r-background-color: #93b9ff; } .reveal .backgrounds { background-color: #93b9ff; } body { background-color: #93b9ff; } .fragment.blur { filter: blur(8px); transition: filter 0.5s; } .fragment.blur.visible { filter: none; } &lt;\/style&gt;<\/p>\n\n\n\n<p>El nivel # ser\u00e1 el t\u00edtulo de la presentaci\u00f3n, el texto ser\u00e1 en inline code y tendr\u00e1 el fondo: dark grey<\/p>\n\n\n\n<p>Cada vez que haya un nuevo encabezado, se cambiar\u00e1 de diapositivas y para ello se separar\u00e1n con:<\/p>\n\n\n\n<p>\u2014-<\/p>\n\n\n\n<p>El nivel ## ser\u00e1 siempre un t\u00edtulo de secci\u00f3n y tendr\u00e1 el fondo: #cdffd8<\/p>\n\n\n\n<p>Para ello usar\u00e1s:<\/p>\n\n\n\n<p>&lt;section data-background-color=\u00bb#cdffd8&#8243;&gt;<\/p>\n\n\n\n<p>&lt;\/section&gt;<\/p>\n\n\n\n<p>Con el nivel ## si hay contenido dentro, en la primera diapositiva indicar solo el encabezado con ## y en la siguiente se repite el encabezado con el contenido ya sin color espec\u00edfico de background.<\/p>\n\n\n\n<p>Y en esos casos tambi\u00e9n a\u00f1adir\u00e1s el efecto de movimiento autom\u00e1tico de esta forma:<\/p>\n\n\n\n<p>\u2022 Primera diapositiva: &lt;section data-background-color=\u00bb#cdffd8&#8243; data-auto-animate&gt; con solo el t\u00edtulo<\/p>\n\n\n\n<p>\u2022 Segunda diapositiva: &lt;section data-auto-animate&gt; con el t\u00edtulo repetido y el contenido<\/p>\n\n\n\n<p>Pero evitar\u00e1s realizarlo cuando la segunda diapositiva incluya animaci\u00f3n de c\u00f3digo.<\/p>\n\n\n\n<p>Si a partir de ## hay algun nivel sin contenido antes del siguiente encabezado (sea del nivel que sea) funcionar\u00e1 como nueva secci\u00f3n.<\/p>\n\n\n\n<p>Los posibles efectos a aplicar se indicar\u00e1n en el markdown con comentarios justo debajo del encabezado. Estos comentarios desaparecer\u00e1n en la versi\u00f3n que crees.<\/p>\n\n\n\n<p>Los posibles efectos son:<\/p>\n\n\n\n<p>La presentaci\u00f3n de fit se har\u00e1 con:<\/p>\n\n\n\n<p>&nbsp;&lt;p class=\u00bbr-fit-text\u00bb&gt;BIG&lt;\/p&gt;<\/p>\n\n\n\n<p>La presentaci\u00f3n de fragmentos se har\u00e1 con:<\/p>\n\n\n\n<p>&lt;div class=\u00bbfragment fade-up\u00bb&gt;&lt;p&gt;texto&lt;\/p&gt;&lt;\/div&gt;<\/p>\n\n\n\n<p>La presentaci\u00f3n de blur se har\u00e1 con:<\/p>\n\n\n\n<p>&nbsp;&lt;p class=\u00bbfragment custom blur\u00bb&gt;One&lt;\/p&gt;<\/p>\n\n\n\n<p>La presentaci\u00f3n de columnas con:<\/p>\n\n\n\n<p>&lt;div style=\u00bbdisplay: flex; justify-content: space-around;\u00bb&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;div class=\u00bbfragment\u00bb style=\u00bbflex: 1; margin: 10px;\u00bb&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &lt;h4&gt;Columna 1&lt;\/h4&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &lt;p&gt;Contenido de la primera columna con informaci\u00f3n relevante&lt;\/p&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;div class=\u00bbfragment\u00bb style=\u00bbflex: 1; margin: 10px;\u00bb&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &lt;h4&gt;Columna 2&lt;\/h4&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &lt;p&gt;Contenido de la segunda columna con datos adicionales&lt;\/p&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>El efecto de Movimiento Autom\u00e1tico se indicar\u00e1 en todas las secciones que comparten contenido con:<\/p>\n\n\n\n<p>&lt;section data-auto-animate&gt; Texto &lt;\/section&gt;&nbsp;<\/p>\n\n\n\n<p>El efecto de destacar se har\u00e1 con:<\/p>\n\n\n\n<p>&lt;p class=\u00bbfragment grow\u00bb&gt;Test 1&lt;\/p&gt;<\/p>\n\n\n\n<p>El efecto de animaci\u00f3n de c\u00f3digo se har\u00e1 con:<\/p>\n\n\n\n<p>&lt;pre&gt;&lt;code data-trim data-line-numbers=\u00bb1-2|4-6|8-12|14-20|1-21&#8243;&gt;<\/p>\n<\/blockquote>\n\n\n\n<p>En este caso se han configurado solo unos efectos b\u00e1sicos y se han decidido unos colores b\u00e1sicos de fondos de diapositivas para hacerlo mas acorde a la imagen corporativa de CEFIRE, pero en la hoja de estilos se puede cambiar al gusto de cada uno.<\/p>\n\n\n\n<p>El resultado se introduce en una nueva nota de Joplin, y ya se puede utilizar la presentaci\u00f3n.<\/p>\n\n\n\n<p>Te dejo un ejemplo creado autom\u00e1ticamente con este sistema:<\/p>\n\n\n\n<p>Si tienes el plugin de RevealJS instalado en Joplin y copias el siguiente c\u00f3digo a una nueva nota, cuando inicies la presentaci\u00f3n, lo podr\u00e1s ver.<\/p>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-contrast-background-color has-text-color has-background has-link-color wp-elements-3c06b448309010789cee8590eb1f7fe9\"><code>&lt;style&gt;\n    :root &gt; body {\n        --r-main-color: black;\n        --r-heading-color: black;\n        --r-background-color: #93b9ff;\n    }\n\n.fragment.blur {\n  filter: blur(8px);\n  transition: filter 0.5s;\n}\n.fragment.blur.visible {\n  filter: none;\n}\n\n&lt;\/style&gt;\n\n# &lt;section data-background-color=\"darkgrey\"&gt;`Presentaci\u00f3n de Ejemplo RevealJS`&lt;\/section&gt;\n\n---\n\n&lt;section data-background-color=\"#cdffd8\" data-auto-animate&gt;\n\n## Introducci\u00f3n a RevealJS\n\n&lt;\/section&gt;\n\n---\n\n&lt;section data-auto-animate&gt;\n\n## Introducci\u00f3n a RevealJS\n\nEsta es una presentaci\u00f3n de demostraci\u00f3n que muestra todos los efectos disponibles para traducir markdown a RevealJS.\n\n&lt;\/section&gt;\n\n---\n\n### Efecto Fit Text\n\n&lt;!-- fit --&gt;\n\n&lt;p class=\"r-fit-text\"&gt;Este texto se ajustar\u00e1 autom\u00e1ticamente al tama\u00f1o de la diapositiva usando la clase r-fit-text.&lt;\/p&gt;\n\n---\n\n### Fragmentos con Fade\n\n&lt;!-- fragments --&gt;\n\nEstos elementos aparecer\u00e1n uno por uno:\n\n&lt;div class=\"fragment fade-up\"&gt;&lt;p&gt;- Primer elemento&lt;\/p&gt;&lt;\/div&gt;\n&lt;div class=\"fragment fade-up\"&gt;&lt;p&gt;- Segundo elemento&lt;\/p&gt;&lt;\/div&gt;\n&lt;div class=\"fragment fade-up\"&gt;&lt;p&gt;- Tercer elemento&lt;\/p&gt;&lt;\/div&gt;\n\n---\n\n### Efecto Blur\n\n&lt;!-- blur --&gt;\n\nEste contenido tendr\u00e1 un efecto de desenfoque que se aplicar\u00e1 progresivamente a cada elemento de la lista:\n\n&lt;p class=\"fragment custom blur\"&gt;- Elemento uno con blur&lt;\/p&gt;\n&lt;p class=\"fragment custom blur\"&gt;- Elemento dos con blur&lt;\/p&gt;\n&lt;p class=\"fragment custom blur\"&gt;- Elemento tres con blur&lt;\/p&gt;\n\n---\n\n&lt;section data-background-color=\"#cdffd8\" data-auto-animate&gt;\n\n## Dise\u00f1o y Layouts\n\n&lt;\/section&gt;\n\n---\n\n&lt;section data-auto-animate&gt;\n\n## Dise\u00f1o y Layouts\n\n### Columnas\n\n&lt;!-- columns --&gt;\n\n&lt;div style=\"display: flex; justify-content: space-around;\"&gt;\n  &lt;div class=\"fragment\" style=\"flex: 1; margin: 10px;\"&gt;\n    &lt;h4&gt;Ventajas del Sistema&lt;\/h4&gt;\n    &lt;ul&gt;\n      &lt;li&gt;F\u00e1cil de usar&lt;\/li&gt;\n      &lt;li&gt;Altamente personalizable&lt;\/li&gt;\n      &lt;li&gt;Compatible con m\u00faltiples formatos&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"fragment\" style=\"flex: 1; margin: 10px;\"&gt;\n    &lt;h4&gt;Caracter\u00edsticas T\u00e9cnicas&lt;\/h4&gt;\n    &lt;ul&gt;\n      &lt;li&gt;Basado en HTML5&lt;\/li&gt;\n      &lt;li&gt;Soporte para markdown&lt;\/li&gt;\n      &lt;li&gt;Extensible con plugins&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;\/section&gt;\n\n---\n\n&lt;section data-auto-animate&gt;\n\n### Movimiento Autom\u00e1tico - Parte 1\n\n&lt;!-- auto-animate --&gt;\n\n#### Conceptos B\u00e1sicos\n\nEste es el primer slide de una secuencia animada.\n\n**Lista inicial:**\n\n- Elemento A\n- Elemento B\n\n&lt;\/section&gt;\n\n---\n\n&lt;section data-auto-animate&gt;\n\n### Movimiento Autom\u00e1tico - Parte 2\n\n&lt;!-- auto-animate --&gt;\n\n#### Conceptos B\u00e1sicos\n\nEste es el segundo slide donde los elementos se mueven suavemente.\n\n**Lista expandida:**\n\n- Elemento A\n- Elemento B\n- Elemento C (nuevo)\n- Elemento D (nuevo)\n\n&lt;\/section&gt;\n\n---\n\n### Efecto Destacar\n\n&lt;!-- highlight --&gt;\n\nEstos elementos crecer\u00e1n cuando aparezcan:\n\n&lt;p class=\"fragment grow\"&gt;&lt;strong&gt;Punto importante 1:&lt;\/strong&gt; La presentaci\u00f3n es responsive&lt;\/p&gt;\n\n&lt;p class=\"fragment grow\"&gt;&lt;strong&gt;Punto importante 2:&lt;\/strong&gt; Soporta m\u00faltiples temas&lt;\/p&gt;\n\n&lt;p class=\"fragment grow\"&gt;&lt;strong&gt;Punto importante 3:&lt;\/strong&gt; Incluye navegaci\u00f3n t\u00e1ctil&lt;\/p&gt;\n\n---\n\n&lt;section data-background-color=\"#cdffd8\" data-auto-animate&gt;\n\n## Secci\u00f3n de C\u00f3digo\n\n&lt;\/section&gt;\n\n---\n\n&lt;section data-auto-animate&gt;\n\n## Secci\u00f3n de C\u00f3digo\n\n### Animaci\u00f3n de C\u00f3digo\n\n&lt;!-- code-animation --&gt;\n\n&lt;pre&gt;&lt;code data-trim data-line-numbers=\"1-2|4-6|8-12|14-16|1-16\"&gt;\n\/\/ Funci\u00f3n para calcular factorial\nfunction factorial(n) {\n    \/\/ Caso base\n    if (n === 0 || n === 1) {\n        return 1;\n    }\n    \n    \/\/ Caso recursivo\n    let result = 1;\n    for (let i = 2; i &lt;= n; i++) {\n        result *= i;\n    }\n    \n    \/\/ Retornar resultado\n    return result;\n}\n\n\/\/ Ejemplo de uso\nconsole.log(factorial(5)); \/\/ 120\nconsole.log(factorial(10)); \/\/ 3628800\n&lt;\/code&gt;&lt;\/pre&gt;\n\n&lt;\/section&gt;\n\n---\n\n&lt;section data-background-color=\"#cdffd8\" data-auto-animate&gt;\n\n## Combinaci\u00f3n de Efectos\n\n&lt;\/section&gt;\n\n---\n\n&lt;section data-auto-animate&gt;\n\n## Combinaci\u00f3n de Efectos\n\n### M\u00faltiples Efectos\n\n&lt;!-- fragments --&gt;\n\n&lt;!-- highlight --&gt;\n\nEsta diapositiva combina varios efectos:\n\n&lt;div class=\"fragment fade-up\"&gt;\n  &lt;p class=\"highlight-red\"&gt;1. &lt;strong&gt;Fragmentos:&lt;\/strong&gt; Los elementos aparecen secuencialmente&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"fragment fade-up\"&gt;\n  &lt;p class=\"highlight-red\"&gt;2. &lt;strong&gt;Destacado:&lt;\/strong&gt; Algunos elementos crecen al aparecer&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"fragment fade-up\"&gt;\n  &lt;p class=\"highlight-red\"&gt;3. &lt;strong&gt;Transiciones:&lt;\/strong&gt; Suave movimiento entre diapositivas&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;\/section&gt;\n\n---\n\n### Ejemplo con Listas y Blur\n\n&lt;!-- blur --&gt;\n\n&lt;!-- fragments --&gt;\n\n#### Proceso de Desarrollo:\n\n&lt;p class=\"fragment custom blur\"&gt;1. Planificaci\u00f3n del proyecto&lt;\/p&gt;\n&lt;p class=\"fragment custom blur\"&gt;2. Dise\u00f1o de la arquitectura&lt;\/p&gt;\n&lt;p class=\"fragment custom blur\"&gt;3. Implementaci\u00f3n del c\u00f3digo&lt;\/p&gt;\n&lt;p class=\"fragment custom blur\"&gt;4. Pruebas y debugging&lt;\/p&gt;\n&lt;p class=\"fragment custom blur\"&gt;5. Despliegue a producci\u00f3n&lt;\/p&gt;\n\n---\n\n&lt;section data-background-color=\"#cdffd8\"&gt;\n\n## Secci\u00f3n Final\n\n&lt;\/section&gt;\n\n---\n\n### Resumen\n\n&lt;!-- columns --&gt;\n\n&lt;div style=\"display: flex; justify-content: space-around;\"&gt;\n  &lt;div class=\"fragment\" style=\"flex: 1; margin: 10px;\"&gt;\n    &lt;h4&gt;Lo que aprendimos:&lt;\/h4&gt;\n    &lt;ul&gt;\n      &lt;li&gt;Uso de efectos fit text&lt;\/li&gt;\n      &lt;li&gt;Implementaci\u00f3n de fragmentos&lt;\/li&gt;\n      &lt;li&gt;Aplicaci\u00f3n de blur&lt;\/li&gt;\n      &lt;li&gt;Creaci\u00f3n de columnas&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"fragment\" style=\"flex: 1; margin: 10px;\"&gt;\n    &lt;h4&gt;Pr\u00f3ximos pasos:&lt;\/h4&gt;\n    &lt;ul&gt;\n      &lt;li&gt;Practicar con ejemplos reales&lt;\/li&gt;\n      &lt;li&gt;Personalizar estilos&lt;\/li&gt;\n      &lt;li&gt;Crear presentaciones complejas&lt;\/li&gt;\n      &lt;li&gt;Compartir conocimiento&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n---\n\n&lt;section data-auto-animate&gt;\n\n### Cierre con Animaci\u00f3n\n\n&lt;!-- auto-animate --&gt;\n\n# Gracias\n\n&lt;\/section&gt;\n\n---\n\n&lt;section data-auto-animate&gt;\n\n### Cierre con Animaci\u00f3n\n\n&lt;!-- auto-animate --&gt;\n\n# Gracias\n\n**Contacto:** ejemplo@email.com\n\n**GitHub:** github.com\/usuario\n\n&lt;\/section&gt;\n\n---\n\n&lt;section data-background-color=\"#cdffd8\"&gt;\n\n## Secci\u00f3n Extra\n\n&lt;\/section&gt;\n\n---\n\n### C\u00f3digo con Highlighting Progresivo\n\n&lt;!-- code-animation --&gt;\n\n&lt;pre&gt;&lt;code data-trim data-line-numbers=\"1-3|5-10|12-13|15-17|1-17\"&gt;\n# Importar librer\u00edas necesarias\nimport numpy as np\nimport pandas as pd\n\n# Crear un DataFrame\ndata = {\n    'nombre': &#091;'Ana', 'Juan', 'Mar\u00eda'],\n    'edad': &#091;25, 30, 28],\n    'ciudad': &#091;'Madrid', 'Barcelona', 'Valencia']\n}\n\ndf = pd.DataFrame(data)\n\n# Filtrar datos\nmayores_27 = df&#091;df&#091;'edad'] &gt; 27]\n\n# Mostrar resultados\nprint(mayores_27)\nprint(f\"Personas mayores de 27: {len(mayores_27)}\")\n&lt;\/code&gt;&lt;\/pre&gt;\n\n---\n\n### Efecto Fit para T\u00edtulos Grandes\n\n&lt;!-- fit --&gt;\n\n&lt;p class=\"r-fit-text\"&gt;IMPACTO VISUAL M\u00c1XIMO&lt;\/p&gt;\n\n---\n\n&lt;section data-background-color=\"#cdffd8\"&gt;\n\n## Fin de la Presentaci\u00f3n\n\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En esta entrada explico un m\u00e9todo para convertir apuntes\/textos en diapositivas autom\u00e1ticamente (para Keynote o RevealJS). En otra entrada de este blog ya habl\u00e9 de la creaci\u00f3n de materiales para algunos cursos de formaci\u00f3n del profesorado que estoy impartiendo (Dise\u00f1o de materiales y Moodle para cursos del CEFIRE). En esta me voy a centrar en [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":490,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":false,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[15,12,8],"class_list":["post-475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-diseno-instruccional","tag-inteligencia-artificial","tag-tecnologia"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/08\/ChatGPT-Image-5-set.-2025-08_10_56.png?fit=1024%2C1024&ssl=1","jetpack-related-posts":[{"id":358,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=358","url_meta":{"origin":475,"position":0},"title":"Clases de Instrumento On-line (recursos para afectados por la DANA)","author":"admin","date":"noviembre 6, 2024","format":false,"excerpt":"En esta entrada voy a aportar mi granito de arena para todos aquellos que, habiendo sido afectados por la DANA -que ha tenido terribles consecuencias en la provincia de Valencia- por un motivo u otro se vea en la tesitura de volver a realizar clases on-line. Recuperando la experiencia acumulada\u2026","rel":"","context":"En \u00abAudio\u00bb","block_context":{"text":"Audio","link":"https:\/\/elpulpoenelvaso.jlmirall.es\/?tag=audio"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-06-a-les-13.19.34.png?fit=1200%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-06-a-les-13.19.34.png?fit=1200%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-06-a-les-13.19.34.png?fit=1200%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-06-a-les-13.19.34.png?fit=1200%2C1200&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/11\/Captura-de-pantalla-2024-11-06-a-les-13.19.34.png?fit=1200%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":453,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=453","url_meta":{"origin":475,"position":1},"title":"Dise\u00f1o de materiales y Moodle para cursos del CEFIRE","author":"admin","date":"mayo 15, 2025","format":false,"excerpt":"Recientemente me han vuelto a contactar para impartir formaci\u00f3n al profesorado en la Comunidad Valenciana. En esta entrada quiero compartir algunos recursos y estrategias que he creado para optimizar el proceso de dise\u00f1o de materiales y adaptar su est\u00e9tica a la imagen visual corporativa del CEFIRE.","rel":"","context":"En \u00abDise\u00f1o Instruccional\u00bb","block_context":{"text":"Dise\u00f1o Instruccional","link":"https:\/\/elpulpoenelvaso.jlmirall.es\/?tag=diseno-instruccional"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/05\/e9c655cf-1759-4540-9490-1cc25304ffe8.png?fit=1024%2C1024&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/05\/e9c655cf-1759-4540-9490-1cc25304ffe8.png?fit=1024%2C1024&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/05\/e9c655cf-1759-4540-9490-1cc25304ffe8.png?fit=1024%2C1024&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/05\/e9c655cf-1759-4540-9490-1cc25304ffe8.png?fit=1024%2C1024&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":643,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=643","url_meta":{"origin":475,"position":2},"title":"v2 del CSS para Joplin con imagen corporativa del CEFIRE","author":"admin","date":"febrero 28, 2026","format":false,"excerpt":"En breve me enfrasco en la creaci\u00f3n de nuevos materiales docentes para nuevos cursos de formaci\u00f3n del profesorado. Y, como no, tengo una necesidad imperiosa de decidir primero \u201cc\u00f3mo se van a ver\u201d y cu\u00e1l ser\u00e1 su \u201ccontenedor\u201d antes de empezar a crear los detalles del contenidos concreto. De un\u2026","rel":"","context":"En \u00abDise\u00f1o Instruccional\u00bb","block_context":{"text":"Dise\u00f1o Instruccional","link":"https:\/\/elpulpoenelvaso.jlmirall.es\/?tag=diseno-instruccional"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2026\/02\/demo_01.png?fit=1123%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2026\/02\/demo_01.png?fit=1123%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2026\/02\/demo_01.png?fit=1123%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2026\/02\/demo_01.png?fit=1123%2C1200&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2026\/02\/demo_01.png?fit=1123%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":383,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=383","url_meta":{"origin":475,"position":3},"title":"\u00bfVolver\u00e1n las oscuras golondrinas de la LOGSE?","author":"admin","date":"noviembre 8, 2024","format":false,"excerpt":"Lo siguiente es un art\u00edculo que escrib\u00ed hace a\u00f1os, el cu\u00e1l finalmente descart\u00e9 para su publicaci\u00f3n acad\u00e9mica, puesto que acab\u00e9 desarrollando alguno de sus apartados por separado en otras publicaciones y conferencias. Pero se perdi\u00f3 el esp\u00edritu de lo que aqu\u00ed intentaba hacer, un relato de los cambios profundos que\u2026","rel":"","context":"En \u00abinvestigaci\u00f3n\u00bb","block_context":{"text":"investigaci\u00f3n","link":"https:\/\/elpulpoenelvaso.jlmirall.es\/?tag=investigacion"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/11\/DALL%C2%B7E-2024-11-08-10.17.07-A-hyper-realistic-photograph-of-a-dark-swallow-perched-on-top-of-a-thick-legal-book-titled-Ley-Organica-de-Educacion.-The-scene-captures-the-swallow.jpg?fit=1024%2C1024&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/11\/DALL%C2%B7E-2024-11-08-10.17.07-A-hyper-realistic-photograph-of-a-dark-swallow-perched-on-top-of-a-thick-legal-book-titled-Ley-Organica-de-Educacion.-The-scene-captures-the-swallow.jpg?fit=1024%2C1024&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/11\/DALL%C2%B7E-2024-11-08-10.17.07-A-hyper-realistic-photograph-of-a-dark-swallow-perched-on-top-of-a-thick-legal-book-titled-Ley-Organica-de-Educacion.-The-scene-captures-the-swallow.jpg?fit=1024%2C1024&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/11\/DALL%C2%B7E-2024-11-08-10.17.07-A-hyper-realistic-photograph-of-a-dark-swallow-perched-on-top-of-a-thick-legal-book-titled-Ley-Organica-de-Educacion.-The-scene-captures-the-swallow.jpg?fit=1024%2C1024&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":64,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=64","url_meta":{"origin":475,"position":4},"title":"Software para Conservatorios","author":"admin","date":"enero 23, 2023","format":false,"excerpt":"Muchas veces me veo en la tesitura de ense\u00f1ar diferentes aplicaciones que pueden ser de utilidad para los estudiantes de m\u00fasica en conservatorios. Bien sea a mis alumnos (de piano, de pedagog\u00eda o de inform\u00e1tica musical) o en cursos de formaci\u00f3n para profesores de conservatorios o escuelas de m\u00fasica. Ha\u2026","rel":"","context":"En \u00abTecnolog\u00eda\u00bb","block_context":{"text":"Tecnolog\u00eda","link":"https:\/\/elpulpoenelvaso.jlmirall.es\/?tag=tecnologia"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/02\/Design-3.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/02\/Design-3.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/02\/Design-3.jpg?fit=1080%2C1080&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/02\/Design-3.jpg?fit=1080%2C1080&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/02\/Design-3.jpg?fit=1080%2C1080&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":161,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=161","url_meta":{"origin":475,"position":5},"title":"Sonolog\u00eda, una asignatura optativa de perfil evolucionada","author":"admin","date":"septiembre 12, 2023","format":false,"excerpt":"\u00bfQuieres conocer la propuesta original del grupo de trabajo encargado en el dise\u00f1o curricular de la asignatura de perfil de Sonolog\u00eda?","rel":"","context":"En \u00abTecnolog\u00eda\u00bb","block_context":{"text":"Tecnolog\u00eda","link":"https:\/\/elpulpoenelvaso.jlmirall.es\/?tag=tecnologia"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2023\/09\/Firefly-estudio-de-grabacion-musical-con-sintetizadores-en-las-paredes-71969.jpg?fit=1024%2C1024&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2023\/09\/Firefly-estudio-de-grabacion-musical-con-sintetizadores-en-las-paredes-71969.jpg?fit=1024%2C1024&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2023\/09\/Firefly-estudio-de-grabacion-musical-con-sintetizadores-en-las-paredes-71969.jpg?fit=1024%2C1024&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2023\/09\/Firefly-estudio-de-grabacion-musical-con-sintetizadores-en-las-paredes-71969.jpg?fit=1024%2C1024&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/posts\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=475"}],"version-history":[{"count":11,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":492,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/posts\/475\/revisions\/492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/media\/490"}],"wp:attachment":[{"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}