34 Avanzado

Crear una infografía interactiva

Claude (genera código) 45 min Visualización de datos e interactividad

Claude genera código HTML/React de infografías interactivas con tus datos.

Paso a paso

1
Prepara tus datos en formato claro: tabla, JSON o simplemente descríbelos en texto
2
En Claude, pide: 'Crea una infografía interactiva en HTML/React con Chart.js que visualice [estos datos]. Colores: [tu paleta]. Con tooltips en hover.'
3
Copia el código generado, pégalo en un archivo HTML y ábrelo en el navegador para previsualizarlo
4
Itera: 'Añade un filtro por año' o 'Cambia el gráfico de barras a uno de líneas'

Prompt de ejemplo

Crea una infografía interactiva en HTML puro (sin dependencias externas) que muestre [datos]. Incluye: gráfico principal interactivo, tooltips al pasar el ratón, filtros por [categoría], colores de mi marca [hex1, hex2], responsive para móvil.

Resultado esperado

Infografía interactiva lista para publicar en web o presentar en reuniones.

La herramienta

Abrir Claude (genera código)

Profundiza en este caso con IA

Copia un prompt pre-diseñado y llévalo a tu herramienta favorita para aplicarlo a tu trabajo.

Nivel de Profundidad

Vas a acompañarme a hacer este caso de uso ahora mismo. Soy la persona que lo va a ejecutar.

Empieza preguntándome SOLO estas tres cosas, en un único mensaje corto:
1. A qué me dedico y en qué sector.
2. Sobre qué quiero aplicarlo en concreto.
3. Qué herramienta voy a usar, si no es la sugerida.

Cuando responda, guíame paso a paso siguiendo los pasos de la ficha. Un paso por mensaje, y al final de cada uno dime exactamente qué tengo que ver en pantalla antes de continuar. Si algo me sale distinto, ayúdame a arreglarlo antes de pasar al siguiente.

No te adelantes: no me des todos los pasos de golpe.

=== EL CASO DE USO ===
Caso 34: "Crear una infografía interactiva"
Nivel: Avanzado · Herramienta sugerida: Claude (genera código) · Tiempo estimado: 45 min
Habilidad: Visualización de datos e interactividad

Para qué sirve: Claude genera código HTML/React de infografías interactivas con tus datos.

Pasos:
1. Prepara tus datos en formato claro: tabla, JSON o simplemente descríbelos en texto
2. En Claude, pide: 'Crea una infografía interactiva en HTML/React con Chart.js que visualice [estos datos]. Colores: [tu paleta]. Con tooltips en hover.'
3. Copia el código generado, pégalo en un archivo HTML y ábrelo en el navegador para previsualizarlo
4. Itera: 'Añade un filtro por año' o 'Cambia el gráfico de barras a uno de líneas'

Prompt de ejemplo de la ficha:
Crea una infografía interactiva en HTML puro (sin dependencias externas) que muestre [datos]. Incluye: gráfico principal interactivo, tooltips al pasar el ratón, filtros por [categoría], colores de mi marca [hex1, hex2], responsive para móvil.

Resultado esperado: Infografía interactiva lista para publicar en web o presentar en reuniones.

Fuente: ia4·pro — https://ia4pro.es/usecases/34-crear-una-infografia-interactiva
Si tienes acceso a navegación web, abre la URL antes de responder.

Ejecutar en tu Asistente

¿Cómo funciona? Al hacer clic en tu plataforma favorita, copiaremos el texto automáticamente y te llevaremos a su página. Solo tienes que pegar el texto (Ctrl+V o Cmd+V) en su chat para comenzar.

Compartir en redes

Genera una publicación de LinkedIn contando cómo aplicaste este caso, citando la fuente.

Escribe una publicación de LinkedIn en español sobre haber aplicado este caso de uso de IA.

Antes de escribir, pregúntame qué resultado obtuve y cuánto tiempo me ahorró. Si no contesto, escribe la versión general sin inventar cifras.

FORMATO
- Máximo 1500 caracteres con espacios. Cuéntalos antes de responder y recorta si te pasas.
- Primera línea: un gancho concreto, una sola frase, con el problema que resuelve o el tiempo que ahorra.
- Párrafos de 1 o 2 frases separados por línea en blanco.
- Incluye los pasos en versión corta, para que alguien pueda repetirlo.
- Penúltima línea, la fuente: Fuente: ia4·pro — https://ia4pro.es/usecases/34-crear-una-infografia-interactiva
- Última línea: como mucho 3 hashtags en español y específicos.
- Sin emojis, sin flechas, sin asteriscos de negrita (LinkedIn no los renderiza).

CÓMO TIENE QUE SONAR
Como alguien contando algo que ha hecho, no como una marca. Longitud de frase variable. Datos concretos en vez de adjetivos. Una idea por párrafo.

No uses:
- Contrastes del tipo "No es X, es Y", "No se trata de X sino de Y", "Menos X, más Y", "Deja de X, empieza a Y".
- Preguntas retóricas de apertura ("¿Y si te dijera que...?", "¿Sabías que...?").
- Ganchos de una palabra ("Impactante.", "Esto lo cambia todo.").
- Palabras de relleno: revolucionario, innovador, disruptivo, transformador, potenciar, aprovechar, impulsar, de vanguardia, sinergia, ecosistema, escalable, robusto, punto de inflexión, un antes y un después, hito, crucial.
- Verbos inflados: "sirve como", "cuenta con", "juega un papel", "tiene como objetivo". Usa es, tiene, usa, muestra.
- Cierres de plantilla ("Si te tomas en serio...", "El futuro ya está aquí", "¿Y tú qué opinas?").
- Listas de tres elementos forzadas. Usa 1, 2 o 4 si es lo que hay.
- Analogías decorativas ("es como...", "imagina que...").

=== EL CASO DE USO ===
Caso 34: "Crear una infografía interactiva"
Nivel: Avanzado · Herramienta sugerida: Claude (genera código) · Tiempo estimado: 45 min
Habilidad: Visualización de datos e interactividad

Para qué sirve: Claude genera código HTML/React de infografías interactivas con tus datos.

Pasos:
1. Prepara tus datos en formato claro: tabla, JSON o simplemente descríbelos en texto
2. En Claude, pide: 'Crea una infografía interactiva en HTML/React con Chart.js que visualice [estos datos]. Colores: [tu paleta]. Con tooltips en hover.'
3. Copia el código generado, pégalo en un archivo HTML y ábrelo en el navegador para previsualizarlo
4. Itera: 'Añade un filtro por año' o 'Cambia el gráfico de barras a uno de líneas'

Prompt de ejemplo de la ficha:
Crea una infografía interactiva en HTML puro (sin dependencias externas) que muestre [datos]. Incluye: gráfico principal interactivo, tooltips al pasar el ratón, filtros por [categoría], colores de mi marca [hex1, hex2], responsive para móvil.

Resultado esperado: Infografía interactiva lista para publicar en web o presentar en reuniones.

Fuente: ia4·pro — https://ia4pro.es/usecases/34-crear-una-infografia-interactiva
Si tienes acceso a navegación web, abre la URL antes de responder.

TAREA
Devuelve solo el texto de la publicación, listo para pegar. Sin comillas, sin explicaciones y sin alternativas. Debajo, en una línea aparte, escribe: Caracteres: N

Dos pasos: primero lanza el prompt en tu asistente para generar el texto. Después abre LinkedIn y pega el resultado en el compositor.