Cómo el Efecto Patito de Goma Optimiza el Desarrollo de Aplicaciones

En programación, no siempre encontramos los errores mirando más tiempo la pantalla. A veces, el problema no está en que falte conocimiento técnico, sino en que tenemos demasiadas ideas mezcladas en la cabeza: una función que no responde como esperábamos, una condición que parece correcta pero no se cumple, una arquitectura que empieza a volverse confusa o un bug que aparece justo cuando pensábamos que todo estaba controlado.

En ese contexto aparece una técnica tan sencilla como efectiva: el Efecto Patito de Goma, también conocido como Rubber Duck Debugging. Su propuesta es simple: explicar en voz alta el problema, el código o la lógica que estamos siguiendo, como si se lo contáramos a un patito de goma colocado sobre el escritorio.

Puede sonar curioso, incluso un poco absurdo al principio. Sin embargo, esta práctica se ha convertido en una herramienta muy útil dentro del desarrollo de aplicaciones, porque ayuda a ordenar el pensamiento, detectar errores ocultos y mejorar la manera en la que razonamos frente al código.

El Efecto Patito de Goma no sustituye a las pruebas, a las revisiones de código ni a las buenas prácticas de programación. Pero sí puede convertirse en un recurso muy valioso para desbloquear problemas, especialmente cuando llevamos demasiado tiempo atrapados en la misma idea.

Qué es el Efecto Patito de Goma

El Efecto Patito de Goma es una técnica de resolución de problemas en programación que consiste en explicar paso a paso el código o el problema que queremos resolver a un objeto inanimado, normalmente representado por un patito de goma.

La idea es que, al verbalizar lo que estamos haciendo, nuestro cerebro se ve obligado a organizar la información de forma más clara. No basta con pensar “esto debería funcionar”. Tenemos que explicar qué esperamos que ocurra, qué está ocurriendo realmente y qué parte del proceso puede estar fallando.

Cuando convertimos un problema en una explicación, dejamos de verlo como una masa confusa de líneas de código y empezamos a descomponerlo en partes más pequeñas. Y esa descomposición suele ser el primer paso para encontrar la solución.

De dónde viene el término Rubber Duck Debugging

El término Rubber Duck Debugging se popularizó a partir de una anécdota mencionada en el libro The Pragmatic Programmer, de Andrew Hunt y David Thomas. En ella se describe a un programador que llevaba un patito de goma y le explicaba su código línea por línea para detectar errores.

Más allá de la anécdota, el concepto refleja una realidad muy común en el desarrollo de software: muchas veces encontramos la respuesta justo cuando intentamos explicarle el problema a otra persona. De hecho, es habitual que alguien pida ayuda a un compañero, empiece a contarle lo que ocurre y, antes de que la otra persona diga nada, se dé cuenta del error.

El patito de goma cumple ese mismo papel, pero sin interrumpir, sin juzgar y sin necesidad de tener disponibilidad en ese momento.

Por qué funciona esta técnica

El Efecto Patito de Goma funciona porque obliga a transformar un pensamiento interno, rápido y desordenado, en una explicación externa, lenta y estructurada.

Cuando programamos, damos muchas cosas por supuestas. Sabemos lo que “queríamos hacer”, pero no siempre revisamos si el código realmente hace eso. Al explicar el proceso en voz alta, aparecen contradicciones, huecos lógicos y pasos que antes parecían evidentes, pero que no estaban tan claros.

Por ejemplo, puedes pensar:

“Esta función debería guardar los datos del formulario.”

Pero cuando empiezas a explicarla, quizás dices:

“Primero recojo los datos del formulario, después valido los campos, luego llamo a la API y finalmente actualizo el estado…”

Y justo ahí te das cuenta de que la validación está devolviendo false, de que el estado se actualiza antes de tiempo o de que la llamada a la API nunca llega a ejecutarse.

Ese es el valor real de la técnica: te obliga a mirar el código desde fuera.

Cómo ayuda el Efecto Patito de Goma a depurar código

Depurar código no consiste únicamente en buscar errores visibles. Muchas veces implica revisar decisiones, suposiciones y relaciones entre distintas partes de una aplicación. Por eso el Rubber Duck Debugging puede ser tan útil.

Ayuda a ralentizar el pensamiento

Cuando estamos bloqueados, solemos saltar rápidamente de una hipótesis a otra. Probamos un cambio, recargamos la página, añadimos un console.log, modificamos una condición y volvemos a intentarlo. A veces funciona, pero otras veces solo aumentamos la confusión.

Explicar el problema en voz alta obliga a ir más despacio. Y en programación, ir más despacio no siempre significa perder tiempo. Muchas veces significa evitar cambios impulsivos que generan más errores de los que resuelven.

El patito de goma nos obliga a seguir una secuencia:

  • Qué esperaba que pasara.
  • Qué está pasando realmente.
  • Qué parte del código interviene.
  • Qué datos entran.
  • Qué datos salen.
  • En qué punto aparece el comportamiento inesperado.

Ese orden reduce el ruido mental y facilita una depuración más precisa.

Además, esta forma de trabajar encaja muy bien con otros hábitos de productividad para desarrolladores, como preparar mejor el entorno de trabajo, usar bien la terminal o apoyarse en herramientas del editor. Si te interesa mejorar ese flujo diario, también puedes leer esta guía sobre atajos y trucos para usar Visual Studio Code desde la terminal en Mac.

Mejora la lógica de programación

La lógica de programación no solo se entrena escribiendo código. También se entrena explicándolo.

Cuando una persona desarrolladora intenta explicar una función, una condición o un flujo de datos, necesita comprobar si las relaciones entre las partes tienen sentido. Si no puede explicarlo con claridad, probablemente el código también necesite revisión.

Esto resulta especialmente útil en casos como:

  • condiciones complejas;
  • funciones con demasiadas responsabilidades;
  • componentes difíciles de entender;
  • flujos asíncronos;
  • errores que dependen del estado de la aplicación;
  • validaciones de formularios;
  • llamadas a APIs;
  • problemas de renderizado en interfaces.

El Efecto Patito de Goma permite comprobar si el razonamiento detrás del código es coherente antes incluso de cambiar una sola línea.

Detecta supuestos invisibles

Uno de los mayores enemigos del debugging son los supuestos.

Damos por hecho que una variable tiene un valor concreto. Damos por hecho que una función se ejecuta. Damos por hecho que el usuario sigue un flujo determinado. Damos por hecho que el backend devuelve la respuesta esperada.

Pero el código no funciona según lo que suponemos. Funciona según lo que realmente está escrito.

Al explicar el problema en voz alta, esos supuestos salen a la luz. Es muy frecuente descubrir frases como:

“Esta variable siempre debería tener datos…”

“Este evento debería dispararse al hacer clic…”

“Esta función debería ejecutarse después de guardar…”

La palabra “debería” suele ser una señal importante. Indica que hay una hipótesis que necesita comprobarse.

Ejemplo sencillo

Imagina que tienes un botón para enviar un formulario, pero al hacer clic no ocurre nada.

Puedes empezar explicándolo así:

“El usuario completa el formulario. Después pulsa el botón de enviar. Al hacer clic, debería ejecutarse la función handleSubmit. Esa función valida los campos y, si todo está correcto, envía los datos.”

Al decirlo en voz alta, revisas el botón y descubres que no tiene asociado el evento onClick, que el botón está fuera del formulario o que la función se llama diferente.

El error no apareció porque el patito supiera programar. Apareció porque explicar el flujo te obligó a revisar cada paso.

Cómo aplicar el Rubber Duck Debugging paso a paso

Aunque la técnica parece muy simple, puede aplicarse de manera más efectiva si seguimos una pequeña estructura. No se trata solo de hablar por hablar, sino de convertir la explicación en una herramienta de análisis.

Paso 1: define el problema con claridad

Antes de mirar el código, intenta formular el problema en una frase concreta.

No es lo mismo decir:

“Esto no funciona.”

Que decir:

“El formulario se envía, pero el mensaje de éxito no aparece después de recibir la respuesta de la API.”

La segunda frase es mucho más útil porque delimita el problema. Ya no estás analizando toda la aplicación, sino una parte específica del flujo.

Paso 2: explica qué esperabas que ocurriera

El siguiente paso es contarle al patito cuál era el comportamiento esperado.

Por ejemplo:

“Cuando el usuario pulsa el botón, esperaba que se validaran los campos, se enviaran los datos y apareciera un mensaje de confirmación.”

Esto ayuda a separar la intención del resultado. En desarrollo de aplicaciones, esa diferencia es fundamental.

Paso 3: describe qué ocurre realmente

Después, explica el comportamiento actual.

“El usuario pulsa el botón, los datos parecen enviarse, pero no aparece ningún mensaje. Además, en consola no hay errores.”

Esta parte es importante porque evita que trabajes solo con sensaciones. Cuanto más específico sea el comportamiento observado, más fácil será localizar el fallo.

Paso 4: recorre el código línea por línea

Aquí es donde el Efecto Patito de Goma resulta más potente. Lee o explica el código como si tuvieras que enseñárselo a alguien que no conoce el proyecto.

Puedes usar frases como:

“Esta función recibe los datos del formulario.”

“Después comprueba si el campo email está vacío.”

“Si hay errores, devuelve el objeto de errores.”

“Si no hay errores, llama a esta función para enviar los datos.”

Al hacerlo, es probable que encuentres incoherencias entre lo que dices y lo que el código realmente hace.

Paso 5: identifica el punto exacto de ruptura

El objetivo no es arreglar todo de golpe, sino encontrar dónde se rompe el flujo.

Puede estar en la entrada de datos, en una condición, en una promesa, en una llamada externa, en el estado del componente o en una respuesta inesperada.

Una vez localizado el punto, la solución suele ser mucho más evidente.

Beneficios del Efecto Patito de Goma en el desarrollo de aplicaciones

El Efecto Patito de Goma no solo sirve para resolver bugs puntuales. También puede mejorar la forma en la que una persona desarrolladora piensa, comunica y toma decisiones técnicas.

Favorece buenas prácticas de programación

Explicar el código ayuda a detectar funciones demasiado largas, nombres poco claros o estructuras difíciles de mantener. Si necesitas dar muchas vueltas para explicar qué hace una función, quizás esa función está haciendo demasiadas cosas.

En ese sentido, el patito de goma también puede ser una herramienta indirecta de refactorización. No cambia el código por ti, pero te muestra cuándo algo no se entiende bien.

Un código difícil de explicar suele ser un código difícil de mantener.

Reduce la dependencia inmediata de otras personas

Pedir ayuda al equipo es positivo y necesario, pero no siempre conviene hacerlo como primer recurso. Muchas veces podemos llegar a una mejor pregunta si antes hemos intentado explicar el problema por nuestra cuenta.

El Rubber Duck Debugging permite llegar a una conversación técnica con más claridad. En lugar de decir “no funciona”, puedes decir:

“He comprobado que la función se ejecuta, que los datos llegan correctamente, pero la respuesta no actualiza el estado como esperaba.”

Esa diferencia mejora mucho la calidad de la colaboración.

Mejora la comunicación técnica

Una de las habilidades más importantes en programación es saber explicar decisiones técnicas. No basta con escribir código: también hay que justificarlo, documentarlo, revisarlo y compartirlo con otras personas.

Practicar el Efecto Patito de Goma mejora esa capacidad porque entrena la explicación clara. Y una persona que sabe explicar bien su código suele colaborar mejor en revisiones, reuniones técnicas y procesos de documentación.

Esta idea conecta también con otros conceptos de experiencia de usuario y aprendizaje. Por ejemplo, aunque no es lo mismo, puede resultar interesante diferenciarlo del síndrome Baby Duck en UX, que habla de cómo las primeras experiencias con una interfaz pueden condicionar nuestras preferencias futuras.

Aumenta la productividad para desarrolladores

Aunque pueda parecer que hablar con un patito de goma ralentiza el trabajo, en realidad puede ahorrar mucho tiempo. Evita búsquedas desordenadas, cambios al azar y bloqueos prolongados.

La productividad para desarrolladores no consiste en escribir código sin parar, sino en resolver problemas con menos fricción. Y para eso, pensar mejor es tan importante como escribir más rápido.

Cuándo utilizar el Efecto Patito de Goma

Esta técnica puede aplicarse en muchos momentos del desarrollo, pero resulta especialmente útil cuando hay bloqueo mental o cuando el problema parece demasiado difuso.

Antes de pedir ayuda

Antes de escribir a un compañero o abrir una consulta en un canal del equipo, prueba a explicar el problema en voz alta. Es posible que encuentres la respuesta durante la explicación.

Y si no la encuentras, al menos habrás ordenado mejor la pregunta.

Antes de una revisión de código

También puedes usar esta técnica antes de abrir una pull request. Explicar qué has cambiado, por qué lo has cambiado y cómo funciona puede ayudarte a detectar detalles pendientes.

Por ejemplo:

  • nombres de variables poco claros;
  • funciones duplicadas;
  • validaciones incompletas;
  • comentarios innecesarios;
  • lógica demasiado acoplada;
  • casos límite no contemplados.

Durante el aprendizaje de programación

El Efecto Patito de Goma también es muy útil para personas que están aprendiendo a programar. Explicar un concepto en voz alta ayuda a comprobar si realmente se ha entendido.

Si puedes explicar qué hace un bucle, una promesa, un estado, una función o una condición, probablemente estás más cerca de dominarlo.

Para principiantes

En niveles iniciales, esta técnica ayuda a ganar confianza. No se trata de saberlo todo, sino de aprender a hacerse mejores preguntas.

Para perfiles con experiencia

En perfiles más avanzados, sirve para revisar arquitectura, patrones, flujos complejos o decisiones de diseño técnico. Incluso cuando hay experiencia, verbalizar sigue siendo una forma poderosa de detectar problemas.

Limitaciones del Efecto Patito de Goma

Aunque el Efecto Patito de Goma es muy útil, no es una solución mágica. Hay problemas que requieren herramientas específicas, pruebas automatizadas, revisión por pares o análisis más profundo.

No sustituye a los tests

Las pruebas unitarias, de integración o end-to-end siguen siendo fundamentales. El patito puede ayudarte a encontrar una hipótesis, pero los tests ayudan a comprobarla y evitar regresiones.

En otras palabras: explicar el problema puede ayudarte a descubrir el error, pero una buena estrategia de testing puede ayudarte a evitar que vuelva a aparecer.

No reemplaza la revisión de código

Explicar el código en voz alta puede ayudarte a mejorar una solución, pero la mirada de otra persona sigue aportando mucho valor. Un compañero puede detectar problemas de arquitectura, seguridad, rendimiento o mantenibilidad que quizá tú no ves.

El Efecto Patito de Goma no compite con el trabajo en equipo. Lo mejora, porque permite llegar a las conversaciones técnicas con una explicación más clara.

No resuelve falta de conocimiento técnico

A veces el bloqueo no se debe a un despiste, sino a que falta información. En esos casos, además de explicar el problema, será necesario consultar documentación, revisar ejemplos o pedir ayuda especializada.

El verdadero valor está en saber cuándo usar cada recurso.

Cómo combinar el Efecto Patito de Goma con otras buenas prácticas

El Rubber Duck Debugging funciona mejor cuando se integra dentro de una forma de trabajo ordenada.

Con documentación

Si al explicar un problema descubres que hay una parte del sistema difícil de entender, quizás conviene documentarla mejor. La documentación no solo ayuda a otras personas: también ayuda a tu “yo del futuro”.

Con comentarios útiles

No todo necesita comentarios, pero cuando una decisión técnica no es evidente, explicarla puede ser útil. Si al hablar con el patito descubres que una parte del código necesita demasiado contexto, quizás sea momento de mejorar nombres, dividir funciones o añadir una explicación breve.

Con testing

Después de detectar el error, conviene convertir ese aprendizaje en una prueba. Así evitas que el mismo problema vuelva a aparecer más adelante.

Con diseño de interacción

El Efecto Patito de Goma también puede ser útil cuando el problema no está solo en el código, sino en cómo se comporta una interfaz. Por ejemplo, cuando una animación no comunica bien un cambio de estado, cuando una transición parece confusa o cuando un elemento visual responde de forma inesperada.

En esos casos, explicar qué debería percibir la persona usuaria también ayuda a detectar incoherencias. Si estás trabajando este tipo de detalles, puede complementar bien esta guía sobre animaciones CSS.

Con pair programming

El Efecto Patito de Goma también puede convivir con el trabajo en pareja. De hecho, muchas conversaciones de pair programming funcionan de manera parecida: una persona explica, la otra escucha, pregunta y ayuda a ordenar el razonamiento.

La diferencia es que el patito está disponible siempre.

Ejemplo práctico de Efecto Patito de Goma en programación

Imagina que estás desarrollando una aplicación en React y tienes un componente que muestra una lista de tareas. El problema es que, al añadir una nueva tarea, la interfaz no se actualiza.

Podrías explicarlo así:

“Este componente recibe una lista de tareas desde el estado. Cuando el usuario escribe una nueva tarea y pulsa el botón, se ejecuta la función addTask. Esa función debería crear una nueva tarea y actualizar el estado con la lista anterior más la nueva.”

Mientras lo explicas, revisas el código y ves algo como esto:

tasks.push(newTask)

Después llamas a:

setTasks(tasks)

Al verbalizarlo, te das cuenta de que estás modificando directamente el array original en lugar de crear uno nuevo. En React, ese detalle puede impedir que el cambio se detecte correctamente.

La solución sería crear un nuevo array:

setTasks([...tasks, newTask])

Este ejemplo muestra muy bien el valor del Efecto Patito de Goma: el problema no era enorme, pero estaba oculto detrás de una suposición. Al explicar el flujo, el error se volvió visible.

Errores habituales al usar esta técnica

Aunque el Rubber Duck Debugging es sencillo, conviene evitar algunos errores para que realmente sea útil.

Explicar el problema de forma demasiado general

Si solo dices “esto no funciona”, no estás dando suficiente información. El objetivo es concretar el comportamiento esperado, el comportamiento real y el punto donde se produce la diferencia.

Saltar directamente a la solución

A veces queremos resolver tan rápido que no explicamos el problema completo. Pero la técnica funciona precisamente porque obliga a recorrer el proceso paso a paso.

No comprobar las hipótesis

Explicar ayuda, pero después hay que verificar. Si sospechas que una función no se ejecuta, compruébalo. Si crees que una variable llega vacía, revísala. Si piensas que una condición falla, analiza sus valores reales.

El Efecto Patito de Goma no sustituye la comprobación técnica. La orienta.

Preguntas frecuentes sobre el Efecto Patito de Goma

¿El Efecto Patito de Goma sirve solo para programadores?

No. Aunque nació dentro del contexto de la programación y el debugging, puede aplicarse a cualquier actividad que requiera resolver problemas complejos. Sirve para escribir, diseñar, planificar, estudiar o tomar decisiones. Sin embargo, en programación es especialmente útil porque el código exige lógica, secuencia y precisión.

¿Tengo que usar literalmente un patito de goma?

No necesariamente. El patito es una metáfora. Puedes usar cualquier objeto, una libreta, una nota de voz o incluso explicarte el problema a ti mismo en voz alta. Lo importante no es el objeto, sino el acto de convertir el pensamiento en una explicación clara y ordenada.

¿Cuándo debería pedir ayuda a otra persona?

Deberías pedir ayuda cuando ya has intentado definir el problema, revisar el flujo, comprobar tus hipótesis y aun así sigues sin avanzar. El Efecto Patito de Goma no pretende aislarte del equipo, sino ayudarte a llegar mejor preparado a la conversación. Pedir ayuda sigue siendo una parte esencial del desarrollo profesional.

Cuando explicar el problema se convierte en parte de la solución

El Efecto Patito de Goma nos recuerda algo importante: programar no consiste únicamente en escribir código. También consiste en pensar, ordenar ideas, formular hipótesis y revisar nuestras propias suposiciones.

A veces buscamos herramientas más sofisticadas, extensiones más completas o soluciones más complejas, cuando el primer paso puede ser tan sencillo como explicar el problema con calma. Porque al verbalizar lo que ocurre, dejamos de enfrentarnos a una confusión abstracta y empezamos a ver una secuencia concreta de decisiones.

El patito de goma no resuelve el bug. No revisa la arquitectura. No ejecuta tests. No lee documentación. Pero nos obliga a hacer algo que, en medio de la prisa, olvidamos con frecuencia: detenernos, observar y explicar.

Y muchas veces, cuando somos capaces de explicar bien un problema, ya estamos mucho más cerca de resolverlo.

Por eso el Rubber Duck Debugging sigue siendo una de las técnicas más simples y, al mismo tiempo, más poderosas dentro del desarrollo de aplicaciones. Porque mejora la lógica, favorece buenas prácticas de programación y ayuda a convertir el caos mental en claridad.

En definitiva, el Efecto Patito de Goma no es solo una técnica para depurar código. Es una forma de entrenar el pensamiento técnico. Y en programación, aprender a pensar con claridad puede marcar tanta diferencia como aprender una nueva herramienta.

Incluir CKEditor 5 en proyecto React y Typescript con Vite

Para el ejemplo utilizaremos CKEditor 5 dentro de un proyecto de ReactJS + Typescript generado con ViteJS.

CKEditor es un editor de texto HTML/ WYSIWYG de código abierto que proporciona funciones de procesador de texto en páginas web.

Nuevo proyecto

Creamos nuevo proyecto con Vite utilizando el siguiente comando.

npm create vite

Framework y Template

Seleccionamos React y Typescript.

Instalación de dependencias

Entramos en el proyecto e instalamos paquete y sus dependencias iniciales.

cd nombre-proyecto
npm install

Instalamos CKEditor 5

Puedes instalar CKEditor 5 con NPM usando el siguiente comando en tu terminal:

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Este comando instalará la última versión de CKEditor 5 y una versión preconfigurada de Classic Editor.

Configurar CKEditor en aplicación de React

En el archivo de configuración de Vite, debemos importar y configurar CKEditor 5 para que se pueda usar en la aplicación de React. 

Modificamos el fichero de configuración de Vite  vite.config.ts

import { createRequire } from 'node:module';
const require = createRequire( import.meta.url );
import { defineConfig } from 'vite';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';
export default defineConfig( {
    plugins: [
        ckeditor5( { theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) } )
    ]
} );

Importamos los módulos necesarios.

import React, { useState } from 'react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CKEditor } from '@ckeditor/ckeditor5-react';

Incluimos el componente <CKEditor> en el proyecto.

function App() {
  const [editorData, setEditorData] = useState('');
  const handleEditorDataChange = (event: any, editor: any) => {
    const data = editor.getData();
    setEditorData(data);
  };
  return (
      <h2>Editor de texto</h2>
      <CKEditor
        editor={ClassicEditor}
        data={editorData}
        onChange={handleEditorDataChange}
      />
  );
}

En el código anterior, estamos importando los módulos necesarios de CKEditor y luego configurando el componente CKEditor en nuestra aplicación. El componente CKEditor necesita tres propiedades:

  • editor: Esta propiedad es la instancia del editor de CKEditor 5 que quieres utilizar. En nuestro caso, estamos utilizando ClassicEditor.
  • data: Esta propiedad es la información inicial del editor. En nuestro caso, estamos inicializando el editor con una cadena vacía.
  • onChange: Esta propiedad es una función que se ejecuta cada vez que cambia el contenido del editor. En nuestro caso, estamos actualizando el estado del editor con la nueva información.

Para el ejemplo también veremos cómo incluir algunos plugins en el editor por lo que necesitaremos algunas dependencias específicas.

npm i @ckeditor/ckeditor5-editor-classic
npm i @ckeditor/ckeditor5-basic-styles
npm i @ckeditor/ckeditor5-essentials
npm i @ckeditor/ckeditor5-paragraph
npm i @ckeditor/ckeditor5-block-quote
npm i @ckeditor/ckeditor5-link
npm i @ckeditor/ckeditor5-image
npm i @ckeditor/ckeditor5-link
npm i @ckeditor/ckeditor5-media-embed

Ejemplo

Código completo dentro de App.tsx

import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
class App extends Component {
    render() {
        return (
                 {
                        console.log( 'Editor1 is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                />
        );
    }
}
export default App;

CKEditorError

Es posible que en este punto la consola devuelva el siguiente error: 

ckeditor.js:5 Uncaught CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules ...

Para solucionarlo creamos un nuevo fichero con nombre vite-env.d.ts dentro del directorio src.

declare module '@ckeditor/ckeditor5-react';
declare module '@ckeditor/ckeditor5-build-classic';
declare module '@ckeditor/*' {
    const classes: any;
    export default classes;
  }

Para finalizar, ejecutamos la aplicación de React con el comando de Vite.

npm run dev

Resultado

Gráficos SVG, tus aliados en la Web

Gráficos SVG, tus aliados en la Web

Gráficos SVG, tus aliados en la Web

Los gráficos SVG son uno de esos recursos que parecen sencillos a primera vista, pero que pueden marcar una gran diferencia en la calidad visual, el rendimiento y la flexibilidad de una web. Durante mucho tiempo se han utilizado sobre todo para logotipos e iconos, pero su utilidad va mucho más allá.

En una web moderna, donde el diseño debe adaptarse a móviles, tablets, pantallas de alta resolución y distintos modos de visualización, trabajar con imágenes flexibles no es un detalle menor. Es una decisión técnica y visual importante.

A diferencia de formatos como JPG o PNG, los SVG no se construyen a partir de píxeles, sino de vectores. Esto significa que pueden ampliarse o reducirse sin perder nitidez. Por eso son especialmente útiles para iconos, logotipos, ilustraciones simples, gráficos, patrones decorativos, mapas o elementos de interfaz.

Además, al estar basados en código, los SVG pueden integrarse con HTML, CSS y JavaScript. Esto abre la puerta a personalizaciones, animaciones, cambios de color, adaptación a temas visuales y reutilización dentro de sistemas de diseño.

Ahora bien, usar SVG no significa automáticamente mejorar una web. Como ocurre con cualquier recurso frontend, conviene entender cuándo utilizarlo, cómo optimizarlo y qué errores evitar. En este artículo veremos qué son los gráficos SVG, cuáles son sus principales ventajas y desventajas, cómo insertarlos correctamente en una página web y qué buenas prácticas conviene aplicar.

Qué son los gráficos SVG

SVG significa Scalable Vector Graphics, es decir, gráficos vectoriales escalables. Se trata de un formato basado en XML que permite describir imágenes mediante formas, líneas, curvas, colores, textos y coordenadas.

Mientras una imagen JPG o PNG guarda información en forma de píxeles, un SVG describe la imagen mediante instrucciones. El navegador interpreta esas instrucciones y dibuja el resultado en pantalla.

Por ejemplo, un círculo en SVG puede escribirse así:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#CC2B5E" />
</svg>

Este fragmento genera un círculo. Lo interesante es que ese círculo puede mostrarse en diferentes tamaños sin perder definición, porque no depende de una resolución fija.

Esta es la gran diferencia entre una imagen vectorial y una imagen rasterizada. Si ampliamos demasiado una imagen basada en píxeles, tarde o temprano aparecerá el típico efecto borroso o pixelado. En cambio, un SVG se recalcula y se redibuja, manteniendo sus bordes limpios.

SVG frente a PNG, JPG y otros formatos

Para elegir bien un formato de imagen, no conviene pensar en términos absolutos. SVG no es mejor que PNG o JPG en todos los casos. Cada formato tiene su función.

Un archivo JPG suele ser adecuado para fotografías, imágenes realistas, fondos con muchas texturas y composiciones con gran cantidad de colores. Su compresión está pensada para este tipo de contenido.

Un archivo PNG funciona bien cuando necesitamos transparencia, bordes definidos o gráficos rasterizados con zonas planas de color. Durante años ha sido muy habitual en iconos, capturas de pantalla y elementos visuales con fondo transparente.

Un SVG, en cambio, es especialmente útil cuando la imagen puede representarse mediante formas. Por eso encaja tan bien en logotipos, iconos, gráficos vectoriales, ilustraciones simples y elementos decorativos.

La pregunta más útil antes de elegir un formato sería: ¿esta imagen funciona mejor como píxeles o como formas?

Si hablamos de una fotografía de producto, probablemente tenga más sentido usar JPG, WebP o AVIF. Si hablamos de un icono de búsqueda, una flecha, un logotipo o una ilustración plana, SVG suele ser una opción mucho más flexible.

Ventajas de usar SVG en la web

Los SVG ofrecen muchas ventajas en desarrollo web, pero su mayor valor aparece cuando se usan con intención. No se trata de cambiar todos los recursos gráficos por SVG, sino de identificar en qué casos aportan más que otros formatos.

Escalabilidad sin pérdida de calidad

La principal ventaja de SVG es su capacidad para escalar sin perder calidad. Esto resulta especialmente importante en interfaces responsive, donde un mismo recurso puede mostrarse en tamaños muy diferentes.

Un logotipo puede aparecer pequeño en la cabecera móvil, más grande en el footer y mucho más destacado en una sección hero. Si está en SVG, mantendrá la nitidez en todos esos contextos.

Esto también ayuda en pantallas de alta densidad de píxeles. Con imágenes rasterizadas, muchas veces necesitamos versiones en distintas resoluciones para evitar que se vean borrosas. Con SVG, normalmente basta con un único archivo bien construido.

Esta ventaja conecta directamente con una idea importante de diseño web: la interfaz debe adaptarse al contexto de uso. Si te interesa profundizar en esa parte, también puedes leer el artículo sobre navegación móvil y patrones para mejorar la experiencia de usuario.

Archivos ligeros en iconos e ilustraciones simples

Cuando un gráfico es sencillo, un archivo SVG puede ser muy ligero. Un icono formado por unas pocas rutas suele pesar menos que varias versiones PNG del mismo recurso.

Esto puede contribuir a reducir el peso total de una página, mejorar la carga y facilitar el mantenimiento de los recursos visuales.

Ahora bien, esta ventaja no siempre se cumple. Un SVG exportado directamente desde una herramienta de diseño puede contener metadatos innecesarios, grupos vacíos, estilos repetidos o rutas demasiado complejas.

Por eso es importante optimizar los SVG antes de subirlos a producción. Un SVG limpio puede ser un gran aliado. Un SVG mal exportado puede convertirse en un archivo pesado y difícil de mantener.

Integración con CSS y JavaScript

Una de las características más interesantes de SVG es que puede integrarse muy bien con CSS y JavaScript, especialmente cuando se inserta directamente en el HTML como SVG inline.

Esto permite modificar colores, tamaños, estados, animaciones o comportamientos sin necesidad de crear múltiples archivos.

Por ejemplo:

<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 22h20L12 2z" />
</svg>
.icon {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}

La propiedad currentColor permite que el icono herede el color del texto. Esto es muy útil en botones, enlaces, menús y componentes reutilizables.

Así, un mismo icono puede adaptarse a distintos estados visuales, como hover, active, modo oscuro o variaciones de color dentro de un sistema de diseño.

Si estás trabajando la parte visual de una interfaz, este enfoque puede combinar muy bien con técnicas CSS más avanzadas, como las que explico en el artículo sobre cómo hacer un texto máscara sobre una imagen.

Coherencia visual en sistemas de diseño

Los SVG son especialmente útiles cuando trabajamos con sistemas de diseño. Permiten crear bibliotecas de iconos y recursos gráficos consistentes, con tamaños, grosores, colores y estilos controlados.

En un proyecto frontend, esto ayuda a mantener una interfaz más ordenada y coherente. No es lo mismo utilizar iconos descargados de distintas fuentes, con estilos mezclados, que trabajar con una colección SVG alineada con la identidad visual del producto.

Además, cuando los SVG se convierten en componentes, por ejemplo en React, pueden recibir propiedades para cambiar el tamaño, el color o el título accesible.

function IconArrow({ size = 24, title = "Flecha" }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      role="img"
      aria-label={title}
    >
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  );
}

Este enfoque permite reutilizar iconos de forma más limpia y mantener el código más organizado.

Posibilidades de animación

Los SVG también pueden animarse. Es posible modificar el color, la opacidad, la posición, el trazo, el relleno o incluso simular que una línea se dibuja progresivamente.

Esto permite crear microinteracciones, loaders, gráficos dinámicos o ilustraciones animadas.

Por ejemplo, una animación sencilla de trazo puede dar la sensación de que un icono se está dibujando:

.path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 1.5s ease forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

Eso sí, conviene recordar algo importante: no todo lo que se puede animar debería animarse. El movimiento en una interfaz debe tener una intención clara. Puede ayudar a dar feedback, guiar la atención o hacer más comprensible un cambio de estado, pero también puede añadir ruido.

Si quieres ampliar esta idea, puedes leer la guía básica sobre animaciones CSS, donde explico cómo usar el movimiento de forma más clara y accesible.

Desventajas y limitaciones del uso de SVG

Aunque los SVG tienen muchas ventajas, también tienen limitaciones. Utilizarlos sin criterio puede generar problemas de rendimiento, accesibilidad, mantenimiento o seguridad.

No son adecuados para fotografías

SVG no es el formato adecuado para fotografías ni imágenes muy complejas.

Una fotografía contiene miles o millones de variaciones de color, textura, luz y detalle. Si intentamos convertirla en SVG, el resultado puede ser un archivo enorme, difícil de editar y poco eficiente.

En estos casos, suele ser mucho más recomendable utilizar formatos como JPG, WebP o AVIF, dependiendo de las necesidades del proyecto.

SVG funciona mejor cuando la imagen es gráfica, no fotográfica.

Pueden ser pesados si son demasiado complejos

Un SVG puede ser muy ligero, pero también puede volverse pesado si contiene demasiadas rutas, filtros, máscaras, sombras o efectos complejos.

Esto ocurre con frecuencia cuando exportamos desde herramientas de diseño sin revisar el resultado. El archivo puede incluir información innecesaria, capas ocultas, nombres internos, estilos duplicados o demasiados decimales en las coordenadas.

Antes de subir un SVG a producción, es recomendable limpiarlo y optimizarlo. De esta forma, reducimos su peso y evitamos que el archivo contenga información que no aporta nada al resultado final.

Pueden generar riesgos de seguridad

Un SVG no es solo una imagen. Al estar basado en XML, puede contener código, enlaces, scripts o comportamientos que conviene controlar.

Por eso hay que tener especial cuidado cuando se permite subir SVG desde fuentes externas o usuarios no verificados. En gestores de contenido como WordPress, la subida de SVG suele estar restringida por motivos de seguridad.

La regla general es clara: no insertes SVG de origen desconocido sin revisarlo o sanitizarlo antes.

En un proyecto profesional, los SVG deben tratarse como código. Igual que revisarías un fragmento JavaScript antes de integrarlo, también conviene revisar un SVG antes de publicarlo.

Pueden estar mal implementados a nivel de accesibilidad

Los SVG pueden ser accesibles, pero no lo son automáticamente. Todo depende de cómo se usen.

Si un SVG es decorativo, lo habitual es ocultarlo a los lectores de pantalla:

<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
  <!-- contenido del icono -->
</svg>

En cambio, si el SVG transmite información relevante, necesita un nombre accesible. Para ello podemos usar role="img" junto con aria-label, o incluir un elemento <title> dentro del propio SVG.

<svg role="img" aria-labelledby="icon-title" viewBox="0 0 24 24">
  <title id="icon-title">Icono de búsqueda</title>
  <path d="..." />
</svg>

Uno de los errores más habituales es usar botones con solo un icono visual, pero sin texto ni etiqueta accesible. Por ejemplo, un botón con una lupa puede ser evidente para una persona que ve la interfaz, pero no para quien navega con lector de pantalla.

<button aria-label="Buscar">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <!-- icono -->
  </svg>
</button>

En este caso, el nombre accesible lo tiene el botón. El SVG solo acompaña visualmente.

Este tipo de decisiones tiene mucho que ver con la usabilidad general de una web. Si te interesa este tema, puedes complementar la lectura con el artículo sobre qué es la usabilidad web y cómo facilitar la navegación del usuario.

Cómo insertar SVG en HTML

Existen varias formas de utilizar SVG en una página web. La mejor opción depende del contexto, del nivel de control que necesites y de cómo esté organizado tu proyecto.

Usar SVG como imagen externa

La forma más sencilla de insertar un SVG es usar la etiqueta img.

<img src="/images/logo.svg" alt="Nombre de la marca" />

Este método es limpio y fácil de mantener. Funciona muy bien para logotipos, ilustraciones o recursos que no necesitan manipularse internamente con CSS o JavaScript.

La ventaja es que el SVG se comporta como una imagen normal. La desventaja es que no puedes modificar fácilmente sus partes internas desde el CSS de la página.

Insertar SVG inline

Otra opción es pegar el código SVG directamente dentro del HTML.

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 22h20L12 2z" />
</svg>

Este enfoque da mucho más control. Permite cambiar colores, animar partes concretas, modificar estados y trabajar con el SVG como parte del DOM.

Es muy útil para iconos de interfaz, componentes reutilizables y animaciones. Sin embargo, si se abusa de SVG inline, el HTML puede crecer demasiado y volverse menos manejable.

Usar sprites SVG

Los sprites SVG permiten agrupar varios iconos en un solo archivo y reutilizarlos mediante symbol y use.

<svg style="display: none;">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="..." />
  </symbol>
</svg>

<svg aria-hidden="true">
  <use href="#icon-search" />
</svg>

Este enfoque puede ser útil en proyectos con muchos iconos, aunque requiere organización. En proyectos actuales, muchas veces se sustituye por bibliotecas de componentes o colecciones de iconos integradas en el frontend.

Buenas prácticas para trabajar con SVG

Para que los gráficos SVG sean realmente útiles, conviene aplicar algunas buenas prácticas desde el principio.

Optimiza los SVG antes de publicarlos

No todos los SVG exportados desde herramientas de diseño están listos para producción. Antes de utilizarlos, revisa si contienen metadatos innecesarios, rutas demasiado complejas, estilos duplicados o dimensiones poco flexibles.

Un SVG optimizado será más ligero, más fácil de mantener y más adecuado para una web rápida.

Esta idea conecta con una regla básica del SEO técnico: una página más ligera y mejor estructurada suele ofrecer una experiencia más fluida. Si estás trabajando la optimización general de tu sitio, también puede interesarte el artículo sobre SEO on page para posicionar tu web en Google.

Usa correctamente el atributo viewBox

El atributo viewBox es fundamental para que un SVG sea escalable y responsive. Define el sistema de coordenadas interno del gráfico.

<svg viewBox="0 0 100 100">
  <!-- contenido -->
</svg>

Gracias al viewBox, el SVG puede adaptarse a diferentes tamaños sin deformarse. Si un SVG no escala como esperas, revisar este atributo suele ser uno de los primeros pasos.

Evita dimensiones rígidas cuando no sean necesarias

En muchos casos, es mejor controlar el tamaño del SVG desde CSS en lugar de dejarlo cerrado con valores fijos de width y height.

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

Esto facilita que el SVG se adapte a diferentes componentes, tamaños de texto y contextos visuales.

Usa currentColor para iconos

Cuando un icono debe heredar el color del texto, currentColor es una solución muy práctica.

.icon {
  fill: currentColor;
}

Esto permite que el mismo icono funcione en botones, enlaces, estados hover, modo oscuro y diferentes temas visuales sin necesidad de duplicar archivos.

Cuida el contraste y la legibilidad

Que un icono esté en SVG no significa que sea automáticamente usable. Si el contraste entre el icono y el fondo es bajo, muchas personas pueden tener dificultades para verlo.

Esto es especialmente importante en botones, menús, avisos, formularios y elementos interactivos. Un buen SVG no solo debe verse bonito. También debe ser claro.

SVG, rendimiento y SEO

Los SVG pueden ayudar al rendimiento de una web, pero no lo hacen por arte de magia. Todo depende del tipo de gráfico, de cómo esté construido y de cómo se integre en la página.

Cuándo SVG puede mejorar el rendimiento

SVG puede mejorar el rendimiento cuando sustituye a imágenes rasterizadas pesadas en elementos simples. Por ejemplo, un icono PNG en varias resoluciones puede reemplazarse por un único SVG limpio y escalable.

También puede evitar la necesidad de cargar diferentes versiones de una misma imagen para distintos dispositivos o densidades de pantalla.

En una estrategia frontend bien pensada, esto ayuda a reducir duplicidades y simplificar la gestión de recursos visuales.

Cuándo SVG puede perjudicar el rendimiento

SVG puede perjudicar el rendimiento si contiene demasiadas rutas, filtros complejos, sombras, máscaras o animaciones innecesarias.

Los filtros SVG pueden ser costosos si se aplican sobre áreas grandes o si se animan constantemente. También hay que tener cuidado con repetir muchos SVG inline en una misma página, porque pueden aumentar el tamaño del HTML.

La idea no es usar SVG siempre, sino usarlo cuando realmente aporta valor.

SVG y posicionamiento SEO

Los SVG pueden contribuir indirectamente al SEO si ayudan a que la página sea más rápida, clara y accesible. Sin embargo, no conviene verlos como una técnica milagrosa de posicionamiento.

Para SEO, lo importante sigue siendo que el contenido esté bien estructurado, que las imágenes tengan sentido dentro del contexto, que los recursos no ralenticen la carga y que la información importante no quede escondida dentro de elementos visuales difíciles de interpretar.

Si usas un SVG como imagen, cuida el atributo alt. Si es decorativo, no lo sobrecargues con texto innecesario. Si transmite información relevante, asegúrate de que esa información también pueda entenderse fuera del elemento visual.

Casos de uso recomendados para SVG

SVG es especialmente útil en varios escenarios habituales del desarrollo web.

Iconos de interfaz

Los iconos son uno de los casos de uso más claros. Botones, menús, enlaces, tarjetas, etiquetas y estados de interfaz pueden beneficiarse de iconos SVG escalables y fáciles de personalizar.

Además, al poder adaptarse mediante CSS, encajan muy bien en componentes reutilizables.

Logotipos

Un logotipo en SVG mantiene su nitidez en cualquier tamaño. Puede verse bien tanto en una cabecera pequeña como en una sección destacada o en una pantalla de alta resolución.

También permite crear versiones adaptadas a distintos fondos o temas visuales.

Ilustraciones simples

Las ilustraciones con formas planas, colores definidos y pocos detalles funcionan muy bien en SVG. Son habituales en secciones hero, páginas de error, bloques explicativos, empty states o pantallas de onboarding.

Gráficos y visualizaciones

SVG también se utiliza en gráficos de datos, diagramas, mapas y visualizaciones interactivas. Permite representar elementos de forma precisa y manipularlos dinámicamente.

Patrones y fondos decorativos

Ondas, líneas, puntos, formas geométricas y patrones pueden crearse en SVG para dar personalidad visual a una interfaz sin depender de imágenes pesadas.

Cuándo no deberías usar SVG

Aunque SVG sea un formato muy útil, hay situaciones en las que no es la mejor opción.

No deberías usar SVG para fotografías reales, imágenes con mucho detalle, texturas complejas o composiciones con miles de variaciones de color. En esos casos, un formato rasterizado optimizado suele ser más adecuado.

Tampoco conviene usar SVG si el archivo resultante es más pesado que una alternativa en WebP, AVIF, JPG o PNG. La decisión debe basarse en el tipo de imagen y en el rendimiento real.

Además, si no tienes control sobre el origen del SVG, es importante revisarlo antes de integrarlo. Un SVG descargado de cualquier sitio o subido por usuarios debe sanitizarse antes de publicarse.

Errores comunes al trabajar con SVG

Uno de los errores más frecuentes es exportar desde una herramienta de diseño y subir el SVG tal cual, sin optimizarlo. Esto puede añadir peso innecesario y dificultar el mantenimiento.

Otro error habitual es usar SVG inline para todo. Aunque este método ofrece mucho control, no siempre es necesario. A veces, una simple etiqueta img es más que suficiente.

También es común olvidar la accesibilidad. Un icono decorativo anunciado por un lector de pantalla puede generar ruido. Un icono funcional sin nombre accesible puede impedir que una persona complete una acción.

Por último, otro error frecuente es usar SVG solo como recurso estético, sin pensar en su función dentro de la interfaz. Un gráfico visualmente bonito aporta poco si no ayuda a entender mejor la página o a mejorar la experiencia.

Preguntas frecuentes sobre gráficos SVG

¿SVG es mejor que PNG?

No siempre. SVG suele ser mejor para iconos, logotipos, ilustraciones simples y gráficos vectoriales que necesitan escalar sin perder calidad.

PNG puede ser más adecuado para imágenes rasterizadas, capturas o gráficos con transparencia que no necesitan manipulación vectorial.

La elección depende del tipo de imagen, del peso del archivo y del uso dentro de la interfaz.

¿Los SVG son buenos para el SEO?

Pueden serlo de forma indirecta. Un SVG optimizado puede ayudar a mejorar el rendimiento, la claridad visual y la accesibilidad de una página.

Pero el SEO no depende solo del formato de imagen. También importan la estructura del contenido, la velocidad de carga, los textos alternativos, la intención de búsqueda y la experiencia de usuario.

¿Es seguro subir SVG a WordPress?

Depende de cómo se gestione. SVG puede contener código, por lo que permitir subidas sin control puede suponer un riesgo de seguridad.

Si necesitas usar SVG en WordPress, es recomendable hacerlo con una configuración segura, limitar quién puede subir estos archivos y sanitizarlos antes de publicarlos.

En general, conviene tratar los SVG como código, no como simples imágenes.

SVG no es solo un formato, es una decisión de diseño

Los gráficos SVG son una herramienta muy valiosa para la web moderna. Permiten crear interfaces más nítidas, flexibles, escalables y adaptables. Son especialmente útiles para iconos, logotipos, ilustraciones, gráficos y elementos visuales que deben mantener su calidad en diferentes tamaños y dispositivos.

Pero su verdadero valor no está solo en la tecnología. Está en saber cuándo usarlos, cómo optimizarlos y cómo integrarlos de forma responsable.

Un SVG bien utilizado puede mejorar el rendimiento, reforzar la identidad visual de una marca y facilitar la creación de sistemas de diseño más coherentes. Un SVG mal utilizado puede añadir peso innecesario, generar problemas de accesibilidad o introducir riesgos de seguridad.

Por eso, la pregunta no debería ser simplemente: “¿uso SVG o no?”. La pregunta más útil sería: ¿este recurso visual se beneficia realmente de ser vectorial, escalable, editable y accesible?

Si la respuesta es sí, SVG puede convertirse en uno de tus mejores aliados en la web.

Porque al final, desarrollar una buena interfaz no consiste solo en elegir tecnologías modernas. Consiste en tomar decisiones que hagan que la experiencia sea más clara, más rápida, más flexible y más fácil de usar.

Y en ese equilibrio entre diseño, rendimiento y accesibilidad, los SVG tienen mucho que aportar.