{"id":508,"date":"2025-12-28T21:23:03","date_gmt":"2025-12-28T21:23:03","guid":{"rendered":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=508"},"modified":"2026-02-27T16:20:22","modified_gmt":"2026-02-27T16:20:22","slug":"creando-dashboards-de-visualizacion-de-calificaciones-para-conservatorios-con-vibe-coding","status":"publish","type":"post","link":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=508","title":{"rendered":"Creando Dashboards de visualizaci\u00f3n de calificaciones para Conservatorios con Vibe-Coding"},"content":{"rendered":"\n<p>En esta entrada explico el proceso de creaci\u00f3n de dos aplicaciones que he realizado con la t\u00e9cnica del Vibe Coding. Si lo que interesa simplemente es conocer las APPs sin los detalles t\u00e9cnicos de su creaci\u00f3n&#8230;<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=494\">Visita el post de las APPS<\/a><\/div>\n<\/div>\n\n\n\n<p>Pero si quieres saber m\u00e1s del proceso de creaci\u00f3n, qu\u00e9date aqu\u00ed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vibe-Coding<\/h2>\n\n\n\n<p>El Vibe-Conding se est\u00e1 popularizando, y para quien no sepa lo que es, se puede resumir en la t\u00e9cnica de programar c\u00f3digo mayoritariamente mediante chats con Grandes Modelos de Lenguaje con capacidades para escribir c\u00f3digo. <\/p>\n\n\n\n<p>M\u00e1s que una explicaci\u00f3n sobre el vibe-coding en general, en esta entrada me voy a centrar en mostrar el proceso que yo mismo he utilizado en la creaci\u00f3n de estas dos APPs que acabo de lanzar. No voy a usar ninguna IA para escribir esta entrada (no es bueno estar siempre delegando funciones cognitivas) ni tampoco va a tener una precisi\u00f3n t\u00e9cnica absoluta, pero la idea es que este post pueda servir de inspiraci\u00f3n para otras personas que quieran adentrarse en el vibe-coding y se muestre un ejemplo desde en un lenguaje lo m\u00e1s cercano y accesible posible.<\/p>\n\n\n\n<p>En este post voy a explicar el proceso de creaci\u00f3n de dos apps. En la primera iba un poco m\u00e1s a ciegas (y la explicar\u00e9 a rasgos m\u00e1s generales), en la segunda el proceso fue mucho m\u00e1s directo (y la explicar\u00e9 con detalles m\u00e1s precisos).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Las herramientas<\/h2>\n\n\n\n<p>Las herramientas utilizadas para crear estas aplicaciones han sido estas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Claude Code<\/strong>: este es el n\u00facleo del proyecto. Es la Inteligencia Artificial (mayoritariamente el modelo Opus 4.5 de Anthropic). Se puede acceder a Claude Code desde distintas formas. Aunque he tenido algunas conversaciones en su propio chat de la App dedicada para Mac, mayoritariamente he utilizado un IDE para hablar con Claude Code.<\/li>\n\n\n\n<li><strong>IDE<\/strong>: es un Entorno de Desarrollo Integrado (es decir, una APP que ayuda a gestionar, escribir, modificar, el c\u00f3digo). En concreto he usado Visual Studio Code (aplicaci\u00f3n gratuita) para la que Claude Code tiene una extensi\u00f3n. Es decir, he abierto una aplicaci\u00f3n para programar, y he hablado con Claude Code desde dentro de ella, y el propio Claude Code se ha encargado de ir escribiendo la aplicaci\u00f3n seg\u00fan lo que le iba pidiendo; para posteriormente subirlo a Github.<\/li>\n\n\n\n<li><strong>GitHub: <\/strong>Github es una plataforma de desarrollo d\u00f3nde se puede alojar c\u00f3digo, y adem\u00e1s proporciona un entorno (GitHub Pages) d\u00f3nde el c\u00f3digo de una aplicaci\u00f3n se puede poner en marcha y usar la aplicaci\u00f3n desde el propio navegador. Lo interesante de GitHub es que se basa en Git para el control de versiones.<\/li>\n\n\n\n<li><strong>Git<\/strong>: Git es un sistema para almacenar y controlar las distintas transformaciones que va acumulando una APP a medida que va evolucionando. Es ideal porque tienes un control de qu\u00e9 cambios se van implementando (y puedes volver atr\u00e1s f\u00e1cilmente) o de tener una rama de trabajo paralela mientras mantienes p\u00fablica una versi\u00f3n estable de la APP.<\/li>\n<\/ul>\n\n\n\n<p>Y alguien dir\u00e1, pero si ahora le pides a la IA una APP y te la crea, y ya ella te da un enlace para compartir (artefactos), \u00bfpara qu\u00e9 complicarse la vida? Pues porque en el momento que quieres realizar algo complejo (de requiera de refinamientos constantes, que pueda escalar a algo m\u00e1s grande, etc&#8230;) necesitas tanto un control de versiones (Git) como poder manejar una APP que no se base en un \u00fanico archivo de c\u00f3digo, sino varios (GitHub\/VSCode) y que puedas ir modificando la APP en diferentes conversaciones (Plug-in de Claude Code en VSCode) para evitar alucinaciones en conversaciones largas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Explicaci\u00f3n del proceso<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">El punto de partida<\/h3>\n\n\n\n<p>Como (reci\u00e9n) Jefe de Estudios de un Conservatorio, quer\u00eda tener una forma de conocer y entender c\u00f3mo est\u00e1 funcionando el centro educativo a nivel de las calificaciones que est\u00e1n obteniendo los alumnos.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Parto de que puedo tener todas las calificaciones en una hoja excel con una serie de campos (algunos me sirven otros no).\n<ul class=\"wp-block-list\">\n<li>Solo puedo tener una hoja excel cada etapa por separado (Elemental o Profesional), as\u00ed como de cada trimestre por separado (1EV, 2EV, 3EV y Final)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Tambi\u00e9n tengo en cuenta de que no quiero que se pueda subir ning\u00fan dato de ning\u00fan alumno, ni quiero particularizar en ning\u00fan alumno ni en ning\u00fan docente, solo ver los datos por asignaturas \/ cursos, etc&#8230;\n<ul class=\"wp-block-list\">\n<li>Manejar NIAs, Nombres y Calificaciones, son datos sensibles que hay que proteger. No pasa nada por utilizar esa informaci\u00f3n en local dentro de Excel sin subir a nubes (o subirlas a nubes corporativas), pero s\u00ed que no conviene subir esa informaci\u00f3n a ning\u00fan otro sitio.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>La aplicaci\u00f3n, que va a residir en una p\u00e1gina web, p\u00fablicamente accesible, no debe de tener capacidad de guardar ning\u00fan dato de forma interna, as\u00ed que se debe gestionar como cargar cada vez los datos.<\/li>\n\n\n\n<li>Para aligerar los c\u00e1lculos voy a intentar que la APP haga solo los c\u00e1lculos que sean de comparar etapas o trimestres (ya que estos est\u00e1n en excels diferentes) y el excel se encargar\u00e1 de realizar los c\u00e1lculos dentro de cada trimestre.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">El camino<\/h3>\n\n\n\n<p>El primer paso es averiguar qu\u00e9 c\u00e1lculos interesantes se pueden hacer con la informaci\u00f3n de la que dispongo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nota media, desviaci\u00f3n, moda, porcentaje de aprobados y suspendidos, nota media de aprobados, nota media de suspendidos, distribuci\u00f3n de notas (cuantas notas de cada nota posible del 1 al 10 hay), y correlaciones (si un alumno saca buenas notas en una asignatura, tambi\u00e9n lo hace en esta otra).<\/li>\n<\/ul>\n\n\n\n<p>Luego es ver en qu\u00e9 dimensiones me interesa toda la informaci\u00f3n anterior:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quiero saberlo a nivel de todo el alumnado del centro<\/li>\n\n\n\n<li>Quiero saberlo a nivel de cada curso<\/li>\n\n\n\n<li>Quiero saberlo a nivel de cada asignatura<\/li>\n<\/ul>\n\n\n\n<p>Tambi\u00e9n quiero poder agrupar o destacar ciertas cosas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quiero poder saber todos los datos anteriores de todas las asignatura de especialidad, o de no especialidad.<\/li>\n<\/ul>\n\n\n\n<p>Tambi\u00e9n se pueden crear umbrales para catalogar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Puedo catalogar el nivel de dificultad de una asignatura en funci\u00f3n de porcentaje de suspensos o nota media.<\/li>\n<\/ul>\n\n\n\n<p>La primera parte del proceso, fue crear un excel que, copiando los datos que dispon\u00eda de notas, fuera capaz de calcular todo esto.<\/p>\n\n\n\n<p>Y para ello, primero pregunt\u00e9 a varias IA qu\u00e9 tipos de c\u00e1lculos podr\u00eda hacer con el tipo de datos de los que dispon\u00eda (y llegue m\u00e1s o menos a la lista anterior, en la que evidentemente no utilic\u00e9 todo lo que me indicaron).<\/p>\n\n\n\n<p>Una vez ten\u00eda eso claro, empec\u00e9 a crear el Excel (inocente de mi) con la ayuda de Claude, me iba indicando qu\u00e9 f\u00f3rmulas necesitaba para cada c\u00e1lculo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Teniendo en cuenta que uso Excel en Espa\u00f1ol (y las f\u00f3rmulas son diferentes)<\/li>\n\n\n\n<li>Teniendo en cuenta que hay que saber manejar errores o datos inesperados como \u00abno dato\u00bb o \u00abpoca muestra\u00bb y que supiera mostrar eso sin errores en el excel<\/li>\n<\/ul>\n\n\n\n<p>Digo inocente de mi, porque aunque las capacidades para ayudarme con las f\u00f3rmulas exactas que mostraba Claude Code con Opus 4.5, resulta que ya pod\u00eda \u00e9l solito crearme el excel, como comprob\u00e9 m\u00e1s adelante.<\/p>\n\n\n\n<p>Y el nodo, entre el excel y la APP reside en la \u00faltima hoja del Excel, que despu\u00e9s de hacer todos los c\u00e1lculos, los lista en una hoja final (en la que no hay absolutamente ning\u00fan dato individual de ning\u00fan alumno) y que se debe exportar como archivo csv (desde excel puedes exportar una hoja concreta en ese formato).<\/p>\n\n\n\n<p>El paso siguiente fue pedir a Claude Code, que con ese csv de ejemplo, qu\u00e9 aplicaci\u00f3n podr\u00eda crear para mostrar los datos (d\u00e1ndole unas pinceladas breves de estilo e interfaz y funciones). Y, l\u00f3gicamente tambi\u00e9n empec\u00e9 poco a poco a pedirle funciones (comprar, tipos de gr\u00e1ficas, navegaci\u00f3n, etc&#8230;). Primero todo en un artefacto de Claude a modo de prototipo entre diferentes conversaciones, y cuando ya estuvo el proyecto m\u00e1s maduro, pas\u00f3 a residir en GitHub.<\/p>\n\n\n\n<p>Una vez el proyecto estaba en GitHub, empec\u00e9 a abrirlo desde Visual Code Studio (y con el plugin de Claude Code) segu\u00ed mejor\u00e1ndolo. \u00bfDe qu\u00e9 forma?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Primero probando la propia aplicaci\u00f3n, detectando errores, inconsistencias, o cosas que no me gustaban y pidi\u00e9ndole los cambios explic\u00e1ndolo lo m\u00e1s detalladamente posible.<\/li>\n\n\n\n<li>Hab\u00eda veces que era necesario abrir la consola de Javascript para detectar los errores y as\u00ed poderle darle m\u00e1s contexto del error a Claude Code.<\/li>\n\n\n\n<li>Descubr\u00ed como gestionar la compactaci\u00f3 (al principio no entend\u00eda qu\u00e9 era, pero resulta que llegados a un punto de la conversaci\u00f3n &#8211; cuando empieza a ser demasiado larga &#8211; Claude para lo que est\u00e1 haciendo y realiza un resumen de la conversaci\u00f3n, olvida todo lo anterior y sigue desde ese resumen). As\u00ed que aprend\u00ed a \u00abcompactar\u00bb a tiempo para que no pillara un proceso importante a mitad, o a cambiar de conversaci\u00f3n cuando cambiaba completamente de tema.<\/li>\n\n\n\n<li>Tambi\u00e9n lleg\u00f3 el momento en el que descubr\u00ed que podr\u00eda crear un servidor local (clonando el repositorio en mi propio ordenador) y probar los cambios antes de enviar una nueva versi\u00f3n a la web.<\/li>\n\n\n\n<li>Tambi\u00e9n aprend\u00ed a tener actualizado el archivo Claude.md que se guarda dentro del proyecto y que Claude siempre lee antes de hacer nada (como un System propmt de todo lo que va a hacer).<\/li>\n\n\n\n<li>Tambi\u00e9n aprend\u00ed a crear una nueva rama del proyecto, y as\u00ed pod\u00eda probar cambios en una rama que no era la publicada (pero comprobar su funcionamiento en un servidor local) y cuando ya estuviera conforme, unir esa rama de desarrollo a la principal.<\/li>\n\n\n\n<li>Tambi\u00e9n aprend\u00ed a crear tags de versiones (como \u00abcopias de seguridad\u00bb para volver a un punto anterior) si la cosa se desmadraba, a la part que empec\u00e9 a nombrar las diferentes versiones que iba alcanzando la APP.<\/li>\n\n\n\n<li>De vez en cuando le solicitaba a Claude que auditara la aplicaci\u00f3n para proponer mejoras. Y hicimos varias refactorizaciones (actualizar c\u00f3digo), as\u00ed como desgranar archivos grandes monol\u00edticos en otros m\u00e1s peque\u00f1os para que la aplicaci\u00f3n funcionara mejor.<\/li>\n\n\n\n<li>Tambi\u00e9n incluimos un segundo idioma de la APP, mediante i18n.<\/li>\n<\/ul>\n\n\n\n<p>Lleg\u00f3 el punto, que me di cuenta de que faltaba alguna asignatura por crear en el excel original, y v\u00ed lo complicado que era a\u00f1adir algo m\u00e1s al excel y que siguiera funcionando, as\u00ed que le solicit\u00e9 a Claude Code si era capaz de optimizar el excel con ese objetivo, que permitiera m\u00e1s f\u00e1cilmente incluir nuevas asignaturas y crear din\u00e1micamente agrupaciones. Y as\u00ed lo hizo (despu\u00e9s de varios intentos e iteraciones). Con lo que hubo que modificar ligeramente tambi\u00e9n la APP para que admitiera el nuevo formato de csv. cosa que hizo mediante unas instrucciones que el propio Claude Code que rehizo el excel escribi\u00f3 para el Claude Code que actualiz\u00f3 la APP.<\/p>\n\n\n\n<p>Y m\u00e1s o menos as\u00ed, se lleg\u00f3 al punto actual de la APP.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Un segundo comienzo<\/h3>\n\n\n\n<p>Llegados a cierto punto, me pareci\u00f3 tambi\u00e9n interesante realizar otra APP m\u00e1s enfocada solo para docentes (menos ambiciosa que la primera), pero que me cost\u00f3 mucho menos de realizar con el aprendizaje del proyecto anterior.<\/p>\n\n\n\n<p>Esta vez empec\u00e9 la conversaci\u00f3n as\u00ed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Te he subido un excel en el que tienes que a\u00f1adir nuevas hojas con los siguientes objetivos:\n* El excel debe realizar c\u00e1lculos con las notas que otorga un docente para proporcionar informaci\u00f3n relevante.\n* El excel tendr\u00e1 unas \u00faltimas hoja de exportaci\u00f3n en la que preparar\u00e1 todos los c\u00e1lculos para ser exportados en csv y ese csv servir\u00e1 para que una APP muestre los datos del csv.\n\nEl excel es de ejemplo pero he borrado los datos personales de alumnos porque esa informaci\u00f3n es confidencial y no se puede subir a la APP, aunque s\u00ed se puede manejar dentro del excel.&nbsp;\nEn primer lugar, el campo del NIA, \u00bfse podr\u00eda anonimizar pero mantener que cada elemento anonimizado siga siendo \u00fanico?\nEso servir\u00eda para hacer seguimiento de los alumnos.\nEn segundo lugar, los datos que exporte deben poder ser tanto con las anonimizaciones hechas (pen\u00faltima hoja del excel), como sin datos individualizados de alumnos (ni siquiera anonimizados), \u00faltima hoja del excel).\nEl excel siempre pertenecer\u00e1 a una etapa (EEM - cuyos cursos son 1EEM, 2EEM, 3EEM y 4EEM- o EPM -cuyos cursos son 1EPM, 2EPM, 3EPM, 4EPM, 5EPM, 6EPM).\nLos alumnos pertenecen a especialidades (pero esos nombres pueden o no coincidir con el nombre de la asignatura evaluada por ese docente). Contenido es el nombre de la asignatura evaluada, y luego aparece la nota evaluada (siempre son enteros del 1 al 10 sin decimales). El nombre del profesor no es relevante (porque siempre ser\u00e1 el mismo en cada excel), pero gu\u00e1rdalo para exportar en el csv y que la APP sepa el nombre del docent. La informaci\u00f3n de nota y Apto es redundante respecto a la nota num\u00e9rica, as\u00ed que \u00fasala solo si es mejor para los c\u00e1lculos del excel. La informaci\u00f3n de repite no la uses.\nLa informaci\u00f3n que el csv debe aportar a la app, primero en global es:\nKPI's d\u00f3nde se vea la nota global de todo, la desviaci\u00f3n t\u00edpica, la moda y la distribuci\u00f3n de notas (cuantas veces ese docente ha puesto cada tipo de nota), porcentaje de aprobados, de suspensos.\nLuego lo mismo desglosado por asignaturas (sin tener en cuenta el curso o especialidad). Luego lo mismo dependiendo del curso, luego lo mismo dependiendo de la especialidad, y luego lo mismo dependiendo de curso y especialidad.&nbsp;\nTambi\u00e9n quiero correlaciones entre (dentro de cada asignatura posible) nota y curso o (tambi\u00e9n dentro de cada asignatura posible) nota y especialidad.\n\nNecesito que me devuelvas otro excel que ya haga todo lo que te he pedido. PERO ANTES, revisa bien toda esta informaci\u00f3n, busca posibles dificultades o preguntas que necesitas que te responda e incluso prop\u00f3n alguna mejora que no haya contemplado.<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Y como se puede intuir, la conversaci\u00f3n continu\u00f3 con Claude Code haciendo un plan y un an\u00e1lisis de problemas, y proponi\u00e9ndome preguntas y dudas sobre qu\u00e9 opci\u00f3n prefer\u00eda. Despu\u00e9s de contestar a todas las preguntas y dudas, gener\u00f3 el excel (francamente bien, salvo peque\u00f1as incidencias con alguna f\u00f3rmula cambiada entre excel en espa\u00f1ol o ingl\u00e9s, que se pudo arreglar f\u00e1cilmente).<\/p>\n\n\n\n<p>A continuaci\u00f3n le solicit\u00e9:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Genial, ahora necesito las instrucciones para que en Claude Code en Visual Studio Code pueda generar la APP que entienda este CSV. Te dejo el inicio que he escrito para empezar a crear la APP y lo completas para que entienda el csv que se le va a entregar.\n\n\nEsta carpeta ser\u00e1 un nuevo repositorio en mi github con el mismo nombre, y que se publicar\u00e1 en GitHub Pages (con actions). El objetivo de este repositorio es crear una APP en estilo minimalista de blancos y negros en el que el usuario subir\u00e1 un archivo CSV que contendr\u00e1 registros con los siguientes campos: curso, especialidad, evaluaci\u00f3n, contenido (el nombre de la asignatura) y la nota num\u00e9rica. A partir de ese csv cargado (que ser\u00e1 solo de un trimestre y etapa), el usuario podr\u00e1 gestionar la subida de m\u00e1s csv con la informaci\u00f3n de m\u00e1s trimestres. Etapa se refiere a que o bien ser\u00e1 de EEM o de EPM (pero el curso ya da pistas porque est\u00e1 en formato 1EEM o 6EPM). Tambi\u00e9n podr\u00e1 descargar toda la informaci\u00f3n en JSON, para volver a importarla de nuevo (y as\u00ed, cuando se acumulen muchos trimestres no ser\u00e1 necesario cargarlos uno a uno). Lo primero que mostrar\u00e1 la aplicaci\u00f3n al usuario son KPI globales:<\/code><\/pre>\n\n\n\n<p>Y contest\u00f3 con un gran archivo de instrucciones que proporcion\u00e9 a Claude Code en Visual Studio Code, el cu\u00e1l a su vez tambi\u00e9n ten\u00eda alguna pregunta (que consult\u00e9 en la conversaci\u00f3n que me hab\u00eda creado las instrucciones). <\/p>\n\n\n\n<p>Luego de un rato considerable, termin\u00f3 la primera versi\u00f3n de la APP, que l\u00f3gicamente fallaba, pero al proporcionar un csv de ejemplo y solicitarle que revisara d\u00f3nde pod\u00eda estar el problema (si en el csv o en el parser del csv de la APP) encontr\u00f3 el problema y ya ten\u00eda la primera versi\u00f3n funcionando.<\/p>\n\n\n\n<p>Por otro lado, hice un ligero redise\u00f1o de la primera APP en cuanto a paleta de colores e interfaz. Y luego en otra conversaci\u00f3n ped\u00ed que adaptara el dise\u00f1o de la segunda APP imitando a la primera. <\/p>\n\n\n\n<p>Y m\u00e1s o menos llegu\u00e9 al estado actual de ambas APPs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Y el desarrollo sigue<\/h2>\n\n\n\n<p>Ahora ya tengo dos APP bastante funcionales, con los objetivos que tenia en mente ampliamente superados. Aunque todav\u00eda sigo refinando algunos detalles, y veremos si alguien m\u00e1s las quiere utilizar y me encuentra bugs o env\u00eda sugerencias de mejora.<\/p>\n\n\n\n<p>Si aun no lo has hecho, te recomiendo que visites el post d\u00f3nde presento formalmente estas APP y se puede acceder a ellas:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=494\">Visita el POST DE LAS APPs de DASHBOARD<\/a><\/div>\n<\/div>\n\n\n\n<p>Si te ha parecido interesante esta entrada o quieres apoyar el desarrolla de estas APP puedes invitarme a un caf\u00e9 en&#8230;<\/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=\"kofiShortcode377Html\" style=\"float: none; text-align: left;\" data-title=\"\"><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En esta entrada explico el proceso de creaci\u00f3n de dos aplicaciones que he realizado con la t\u00e9cnica del Vibe Coding. Si lo que interesa simplemente es conocer las APPs sin los detalles t\u00e9cnicos de su creaci\u00f3n&#8230; Pero si quieres saber m\u00e1s del proceso de creaci\u00f3n, qu\u00e9date aqu\u00ed. Vibe-Coding El Vibe-Conding se est\u00e1 popularizando, y para [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":503,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_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":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[12,8],"class_list":["post-508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-inteligencia-artificial","tag-tecnologia"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-28-a-las-12.33.22.png?fit=2080%2C1762&ssl=1","jetpack-related-posts":[{"id":494,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=494","url_meta":{"origin":508,"position":0},"title":"Dashboards Acad\u00e9micos para gestores y docentes de conservatorios","author":"admin","date":"diciembre 28, 2025","format":false,"excerpt":"En esta entrada presento dos aplicaciones que he creado con Vibe Coding. Para quienes no conozcan el t\u00e9rmino podr\u00edamos resumirlo en programaci\u00f3n inform\u00e1tica d\u00f3nde el usuario tiene las ideas, y una Inteligencia Artificial sigue las instrucciones para crear esas aplicaciones. En concreto se trata de dos aplicaciones que sirven para\u2026","rel":"","context":"En \u00abGesti\u00f3n Educativa\u00bb","block_context":{"text":"Gesti\u00f3n Educativa","link":"https:\/\/elpulpoenelvaso.jlmirall.es\/?tag=gestion-educativa"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-28-a-las-12.35.40.png?fit=1200%2C1017&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-28-a-las-12.35.40.png?fit=1200%2C1017&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-28-a-las-12.35.40.png?fit=1200%2C1017&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-28-a-las-12.35.40.png?fit=1200%2C1017&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-28-a-las-12.35.40.png?fit=1200%2C1017&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":64,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=64","url_meta":{"origin":508,"position":1},"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":300,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=300","url_meta":{"origin":508,"position":2},"title":"La Inteligencia Artificial de Modelos Extensos de Lenguaje (LLM &#8211; Claude y GPT) y su capacidad para crear partituras y t\u00e9cnicas de estudio en Lilypond","author":"admin","date":"octubre 28, 2024","format":false,"excerpt":"En esta entrada comprobamos la capacidad de Claude y GPT para escribir partituras (usando c\u00f3digo Lilhpond) y su capacidad para entender pedag\u00f3gicamente aquello que ha escrito.","rel":"","context":"En \u00abC\u00f3digo Musical\u00bb","block_context":{"text":"C\u00f3digo Musical","link":"https:\/\/elpulpoenelvaso.jlmirall.es\/?tag=codigo-musical"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/10\/DALL%C2%B7E-2024-10-19-17.34.42-A-similar-portrait-of-Frederic-Chopin-as-a-cyborg-set-in-a-nocturnal-scene.-The-emphasis-is-on-a-blend-of-traditional-music-composition-and-modern-te.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\/10\/DALL%C2%B7E-2024-10-19-17.34.42-A-similar-portrait-of-Frederic-Chopin-as-a-cyborg-set-in-a-nocturnal-scene.-The-emphasis-is-on-a-blend-of-traditional-music-composition-and-modern-te.jpg?fit=1024%2C1024&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/10\/DALL%C2%B7E-2024-10-19-17.34.42-A-similar-portrait-of-Frederic-Chopin-as-a-cyborg-set-in-a-nocturnal-scene.-The-emphasis-is-on-a-blend-of-traditional-music-composition-and-modern-te.jpg?fit=1024%2C1024&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/10\/DALL%C2%B7E-2024-10-19-17.34.42-A-similar-portrait-of-Frederic-Chopin-as-a-cyborg-set-in-a-nocturnal-scene.-The-emphasis-is-on-a-blend-of-traditional-music-composition-and-modern-te.jpg?fit=1024%2C1024&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":453,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=453","url_meta":{"origin":508,"position":3},"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":521,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=521","url_meta":{"origin":508,"position":4},"title":"Visualizador GIFT de Moodle: edita tus preguntas sin volverte loco con el c\u00f3digo","author":"admin","date":"enero 26, 2026","format":false,"excerpt":"Si has llegado hasta aqu\u00ed, probablemente ya conoces el formato GIFT de Moodle. Y si lo conoces, sabes que tiene dos caras: por un lado, es una forma r\u00e1pida de crear cuestionarios en lote; por otro, editar preguntas existentes puede convertirse en un ejercicio de paciencia mientras buscas d\u00f3nde acaba\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\/01\/Captura-de-pantalla-2026-01-26-a-las-20.27.20.png?fit=1059%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2026\/01\/Captura-de-pantalla-2026-01-26-a-las-20.27.20.png?fit=1059%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2026\/01\/Captura-de-pantalla-2026-01-26-a-las-20.27.20.png?fit=1059%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2026\/01\/Captura-de-pantalla-2026-01-26-a-las-20.27.20.png?fit=1059%2C1200&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2026\/01\/Captura-de-pantalla-2026-01-26-a-las-20.27.20.png?fit=1059%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":191,"url":"https:\/\/elpulpoenelvaso.jlmirall.es\/?p=191","url_meta":{"origin":508,"position":5},"title":"Dise\u00f1o 10 IAs (GPTs) para facilitar la creaci\u00f3n de actividades en Moodle y H5P","author":"admin","date":"enero 19, 2024","format":false,"excerpt":"Ya puedes utilizar en la GPT Store los 10 custom versions de Chat-GPT que he dise\u00f1ado para facilitar la creaci\u00f3n de actividades en Moodle y H5P. El campo de la Inteligencia Artificial est\u00e1 avanzando muy r\u00e1pido, y en este post voy a hablaros de algo realmente emocionante: c\u00f3mo he pasado\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\/2024\/02\/gpts.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/02\/gpts.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/02\/gpts.jpg?fit=1200%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/02\/gpts.jpg?fit=1200%2C1200&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/elpulpoenelvaso.jlmirall.es\/wp-content\/uploads\/2024\/02\/gpts.jpg?fit=1200%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/posts\/508","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=508"}],"version-history":[{"count":2,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/posts\/508\/revisions"}],"predecessor-version":[{"id":511,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/posts\/508\/revisions\/511"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=\/wp\/v2\/media\/503"}],"wp:attachment":[{"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elpulpoenelvaso.jlmirall.es\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}