AI WORLD HQCrea un mini-widget del tiempo con IA para tu blog usando los widgets de Hugging Face
Aprende a incrustar una herramienta de IA sencilla e interactiva en tu sitio web para mostrar información meteorológica en tiempo real.
¿Alguna vez quisiste añadir un toque de magia de IA a tu blog personal o sitio web sin necesidad de escribir código? Esta guía te mostrará cómo encontrar una herramienta de IA sencilla para el tiempo en Hugging Face e incrustarla como un «widget» –un pequeño dispositivo interactivo– directamente en tu sitio. Al final, tendrás un asistente meteorológico de IA personalizado para tus lectores.
💡 Consejo: toca el número de un paso cuando lo termines — aparece una marca verde y tu navegador recuerda hasta dónde llegaste.
- Una cuenta gratuita de Hugging Face: La crearás en el primer paso.
- Un navegador web: Como Chrome, Firefox, Safari o Edge.
- Un blog o sitio web: Donde tengas permiso para editar el código HTML en bruto (por ejemplo, un blog de WordPress, un sitio personal creado con HTML simple o una plataforma similar).
- Tiempo: Esto te llevará entre 15 y 20 minutos.
Regístrate para obtener una cuenta gratuita de Hugging Face
Primero, vamos a crear tu cuenta gratuita en Hugging Face. Esta plataforma es como una gran biblioteca y patio de juegos en línea donde la gente comparte modelos de IA y demostraciones interactivas. Abre tu navegador web y ve al sitio web de Hugging Face. Verás una página de inicio que a menudo presenta modelos populares o noticias. Busca un botón de «Sign Up» (Registrarse) o «Join» (Unirse), normalmente ubicado en la esquina superior derecha de la pantalla. Haz clic en él para iniciar el proceso de registro. Luego se te pedirá que introduzcas tu dirección de correo electrónico y elijas una contraseña, o podrías tener opciones para registrarte usando tu cuenta de Google o GitHub. Sigue las instrucciones en pantalla para confirmar tu dirección de correo electrónico si es necesario. Si se ve diferente: Si no ves inmediatamente un botón de «Sign Up» (Registrarse), busca primero un botón de «Log In» (Iniciar sesión), ya que registrarse suele ser una opción desde ahí. Sabrás que funcionó cuando hayas iniciado sesión en tu nueva cuenta de Hugging Face y veas tu nombre de usuario o icono de perfil elegido en la esquina superior derecha.
Descubre un modelo meteorológico
Ahora que tienes una cuenta, vamos a encontrar un modelo de IA para el tiempo para convertirlo en un widget. Hugging Face es el hogar de los «Spaces» (Espacios), que son demostraciones interactivas basadas en la web de modelos de IA. En el sitio web de Hugging Face, busca un menú de navegación en la parte superior o lateral de la página, y haz clic en «Spaces» (Espacios). Esto te llevará a una página que lista muchas demos de IA diferentes. Una vez en la página de Spaces, busca la barra de búsqueda. Aquí es donde le dirás a Hugging Face qué tipo de herramienta de IA estás buscando. Escribe «weather» (tiempo) en la barra de búsqueda y pulsa Enter o haz clic en el icono de búsqueda. Esto filtrará la vasta colección de Spaces para mostrarte solo los relacionados con el tiempo. Navega por los resultados y elige uno que parezca simple y funcional, normalmente con un campo de entrada claro para una ciudad o ubicación. Si se ve diferente: Si el enlace de «Spaces» (Espacios) no es visible de inmediato, intenta buscar primero un enlace de «Models» (Modelos), ya que los Spaces a menudo se enlazan desde allí, o una sección general de «Explore» (Explorar). Sabrás que funcionó cuando veas una lista de Spaces de IA relacionados con «weather» (el tiempo) aparecer en tu pantalla.
Interactúa con el modelo
Antes de incrustar el widget, es buena idea probar el modelo meteorológico elegido para asegurarte de que funciona como se espera. Este paso ayuda a confirmar que el modelo de IA (el programa informático entrenado para realizar una tarea específica, como predecir el tiempo) es funcional y útil para tu blog. Haz clic en uno de los Spaces de tiempo que encontraste en el paso anterior. Serás dirigido a su página dedicada, donde normalmente verás la «Interfaz de Usuario (UI)» –la disposición visual con botones, campos de texto y pantallas– de la demo. Busca un cuadro de entrada, a menudo etiquetado como «City» (Ciudad) o «Location» (Ubicación). Escribe el nombre de una ciudad en este cuadro y haz clic en el botón «Submit» (Enviar) o «Generate» (Generar), si lo hay. El modelo de IA procesará tu solicitud y mostrará la información meteorológica. Asegúrate de que la salida tenga sentido, como la temperatura actual o las condiciones. Si se ve diferente: Algunos Spaces pueden tener diseños ligeramente diferentes, o pueden ejecutarse lentamente en el nivel gratuito si son muy populares. Prueba con otro Space de tiempo si tu primera opción no responde o parece demasiado compleja. Sabrás que funcionó cuando el modelo procese con éxito tu entrada y muestre información meteorológica para la ciudad que introdujiste.
Genera el código de incrustación
Ahora que has encontrado un modelo meteorológico que funciona, vamos a obtener el fragmento especial de código informático (llamado «HTML») que te permite colocar contenido de un sitio web en otro. Esto se conoce como código de incrustación.
En la página específica de Hugging Face Space para tu modelo meteorológico elegido, busca un botón o icono que sugiera incrustar o compartir. A menudo es un icono </>, un botón de «Share» (Compartir), o a veces una opción de «Embed» (Incrustar) dentro de un menú. Normalmente se encuentra cerca de la parte superior derecha del marco o la página de la demo. Haz clic en esta opción. Debería aparecer una pequeña ventana o panel, proporcionándote diferentes opciones para compartir, una de las cuales será «Embed» (Incrustar) o «Embed Code» (Código de incrustación).
Si se ve diferente: Si no puedes encontrar un icono </>, busca un menú de tres puntos ... o un icono de engranaje de «Settings» (Configuración), ya que las opciones de incrustación a veces están ocultas allí. Algunos Spaces más antiguos podrían no ofrecer una opción de incrustación directa, en cuyo caso es posible que necesites elegir otro Space.
Sabrás que funcionó cuando aparezca una nueva ventana o panel, mostrando claramente un bloque de código HTML, a menudo dentro de un cuadro de texto.
Copia el código de incrustación
Con el código de incrustación generado, tu siguiente paso es copiarlo para poder pegarlo en tu blog o sitio web. Este código es la clave para mostrar tu widget meteorológico interactivo. En la ventana emergente o panel que apareció en el paso anterior, verás el código de incrustación HTML mostrado. Normalmente hay un botón de «Copy» (Copiar) justo al lado del código, o a veces debajo de él. Haz clic en este botón de «Copy» (Copiar). Esta acción copiará automáticamente todo el bloque de código al portapapeles de tu dispositivo, listo para que lo pegues en otro lugar. No necesitas entender lo que significa todo el código; simplemente cópialo tal cual. Si se ve diferente: Si no hay un botón de «Copy» (Copiar) dedicado, puedes resaltar manualmente todo el texto en el cuadro de código usando tu ratón (hacer clic y arrastrar) y luego hacer clic derecho y elegir «Copiar» (o usar atajos de teclado como Ctrl+C en Windows/Linux o Cmd+C en Mac). Sabrás que funcionó cuando aparezca un pequeño mensaje de confirmación como «¡Copiado!» (Copied!), o puedes pegar el código en un editor de texto simple para verlo.
Incrusta el widget en tu blog
Ahora viene la parte emocionante: ¡añadir el widget meteorológico a tu propio blog! Necesitarás acceso a la interfaz de edición de tu blog donde puedes añadir o editar contenido.
Inicia sesión en el área de administración de tu blog. Navega a la entrada o página donde quieres añadir el widget meteorológico. La mayoría de las plataformas de blogs, como WordPress, ofrecen dos vistas al editar: un editor «Visual» (que te muestra cómo se verá tu entrada) y un editor de «Texto» o «Código» (que muestra el HTML en bruto). Necesitas cambiar al editor de «Texto» o «Código». Encuentra el lugar exacto en la entrada o página de tu blog donde quieres que aparezca el widget meteorológico, luego pega el código de incrustación que copiaste anteriormente.
Si se ve diferente: El nombre del editor de código podría variar. Busca pestañas o botones etiquetados como «HTML», </> (corchetes angulares) o «Source» (Fuente). Si estás usando un constructor de sitios web con una interfaz de arrastrar y soltar, busca un bloque de «Embed Code» (Código de incrustación) o «Custom HTML» (HTML personalizado) que puedas añadir a tu página.
Sabrás que funcionó cuando el código de incrustación aparezca en el editor de texto de tu blog. No vuelvas al editor «Visual» todavía, ya que el widget podría no mostrarse correctamente allí.
Ve tu nuevo widget meteorológico
El último paso es guardar tus cambios y ver tu nuevo widget meteorológico de IA en vivo en tu blog o sitio web. Una vez que hayas pegado el código de incrustación en el editor HTML de tu blog, guarda o publica los cambios en tu entrada o página. El botón exacto dependerá de la plataforma de tu blog, pero normalmente es «Update» (Actualizar), «Publish» (Publicar) o «Save Changes» (Guardar cambios). Después de guardar, visita la versión en vivo de la entrada o página de tu blog en una nueva pestaña del navegador. ¡Ahora deberías ver el widget meteorológico de Hugging Face mostrado directamente en tu sitio, completamente interactivo y listo para que tus lectores lo usen! Si se ve diferente: Si el widget no aparece, o solo ves el código en bruto, verifica que lo pegaste en el editor de «Texto» o «Código», no en el «Visual». A veces, actualizar el navegador (F5 en Windows, Cmd+R en Mac) puede ayudar. Sabrás que funcionó cuando veas el cuadro de entrada y la pantalla de información meteorológica completamente funcionales en la página en vivo de tu blog, permitiéndote escribir una ciudad y obtener resultados del tiempo.
- Pegar en el editor equivocado: Muchas plataformas de blogs tienen un editor 'Visual' y un editor de 'Texto' o 'HTML'. Pegar el código de incrustación en el editor 'Visual' solo mostrará el código como texto, no el widget. La solución: Siempre cambia a la vista de 'Texto' o 'HTML' antes de pegar cualquier código de incrustación.
- No guardar/publicar: Después de pegar el código, es fácil olvidar guardar o publicar la página. Si sales del editor sin guardar, tus cambios no aparecerán. La solución: Siempre haz clic en el botón «Update» (Actualizar), «Publish» (Publicar) o «Save Changes» (Guardar cambios) en la interfaz de tu blog después de añadir el código.
- El widget no carga: A veces, un Space puede estar temporalmente inactivo o muy ocupado, lo que hace que tu widget no cargue. El widget de Hugging Face en sí mismo no puede realizar ninguna acción más allá de mostrar información. La solución: Intenta actualizar la página, o vuelve a Hugging Face Spaces e intenta incrustar un modelo meteorológico diferente, menos ocupado.
Lo que esto significa para ti
- En la vida diaria: Has aprendido una habilidad valiosa al incrustar herramientas interactivas en un sitio web, que se puede aplicar a muchos otros tipos de widgets, no solo al tiempo. Es una forma sencilla de hacer que tu sitio personal sea más dinámico y útil.
- Para tu negocio o trabajo: Entender cómo incrustar contenido de terceros es crucial para la presencia en línea. Aunque este es un widget meteorológico simple, el principio se aplica a la incrustación de chatbots de soporte al cliente, visualizaciones de datos interactivas u otras herramientas impulsadas por IA en un sitio web de una empresa.
- Si recién estás empezando: Has dado tu primer paso para integrar herramientas de IA en tu vida en línea sin necesidad de aprender programación compleja. Este proceso desmitifica cómo muchos servicios en línea comparten funciones entre diferentes sitios web.
Pruébalo ahora
Visita la página del blog donde incrustaste tu nuevo widget meteorológico. Intenta escribir tu ciudad actual, o una ciudad emblemática famosa como Londres o Tokio, ¡y ve qué información meteorológica te proporciona la IA!
❓ Preguntas rápidas
¿Cuánto tiempo lleva?
Unos 6 minutos — la guía tiene 7 pasos y puedes ir marcándolos a medida que avanzas.
¿Qué herramienta necesito?
Esta guía usa Hugging Face Hugging Face — pero el método funciona de forma muy parecida en otros asistentes de IA.
¿Necesito preparar algo?
- Una cuenta gratuita de Hugging Face: La crearás en el primer paso.
- Un navegador web: Como Chrome, Firefox, Safari o Edge.
- Un blog o sitio web: Donde tengas permiso para editar el código HTML en bruto (por ejemplo, un blog de WordPress, un sitio personal creado con HTML simple o una plataforma similar).
- Tiempo: Esto te llevará entre 15 y 20 minutos.
¿Qué errores debo evitar?
- Pegar en el editor equivocado: Muchas plataformas de blogs tienen un editor 'Visual' y un editor de 'Texto' o 'HTML'. Pegar el código de incrustación en el editor 'Visual' solo mostrará el código como texto, no el widget. La solución: Siempre cambia a la vista de 'Texto' o 'HTML' antes de pegar cualquier código de incrustación.
- No guardar/publicar: Después de pegar el código, es fácil olvidar guardar o publicar la página. Si sales del editor sin guardar, tus cambios no aparecerán. La solución: Siempre haz clic en el botón «Update» (Actualizar), «Publish» (Publicar) o «Save Changes» (Guardar cambios) en la interfaz de tu blog después de añadir el código.
- El widget no carga: A veces, un Space puede estar temporalmente inactivo o muy ocupado, lo que hace que tu widget no cargue. El widget de Hugging Face en sí mismo no puede realizar ninguna acción más allá de mostrar información. La solución: Intenta actualizar la página, o vuelve a Hugging Face Spaces e intenta incrustar un modelo meteorológico diferente, menos ocupado.
Sigue leyendo
✦ Guía original paso a paso del equipo editorial de IA de AI World HQ Escrita en lenguaje claro y revisada para mayor precisión.
← Volver a las noticias