AI WORLD HQCrea un pequeño widget de IA para el clima en tu blog con los widgets de Hugging Face
Inserta un widget meteorológico interactivo y sin código en tu blog en menos de 10 minutos, usando los widgets prefabricados de Hugging Face.
Gancho: Imagina que los visitantes de tu blog vean el clima actual justo donde mencionas planes de viaje o actividades al aire libre. Con los widgets de Hugging Face, puedes añadir un pequeño asistente meteorológico en vivo a cualquier página, sin necesidad de programar. Al final de esta guía, tendrás un widget funcional que se actualiza automáticamente y se ve genial tanto en computadoras de escritorio como en dispositivos móviles.
💡 Consejo: toca el número de un paso cuando lo termines — aparece una marca verde y tu navegador recuerda hasta dónde llegaste.
- Un blog o sitio web que puedas editar (WordPress, Wix, Squarespace, GitHub Pages, etc.)
- Una cuenta gratuita de Hugging Face (registro en 2 minutos)
- 10 minutos de tiempo y un editor de texto o el panel de control de tu blog
- No se necesita un plan de pago para esta tarea
Inicia sesión en Hugging Face
Abre cualquier navegador web y ve a https://huggingface.co. En la esquina superior derecha, haz clic en Log in / Sign up. Elige Sign up y completa tu correo electrónico, nombre de usuario y contraseña. Revisa tu bandeja de entrada en busca de un correo electrónico de verificación y haz clic en el enlace. Aterrizarás en tu nueva página de perfil.
Sabrás que funcionó cuando veas tu nombre de usuario en la esquina superior derecha y la página muestre “Bienvenido a Hugging Face, [tu nombre]”.
Abre la galería de widgets
Una vez que hayas iniciado sesión, busca en la barra lateral izquierda y haz clic en Widgets (está cerca de la parte inferior, debajo de “Resources”). Se cargará una nueva página que muestra una cuadrícula de widgets prefabricados. Cada uno es un pequeño bloque interactivo que puedes pegar en tu blog.
Sabrás que funcionó cuando veas un encabezado que diga “Explorar todos los widgets” y una lista de tarjetas coloridas.
Elige el widget meteorológico
En la página de widgets, usa el cuadro de búsqueda en la parte superior y escribe weather. Verás una tarjeta titulada “Weather widget” con un pequeño icono de sol y nube. Haz clic una vez en la tarjeta para abrir su página de detalles. Esta página muestra una vista previa en vivo, configuraciones y el código de inserción que necesitas.
Sabrás que funcionó cuando veas una visualización del clima en vivo y opciones como “Location” y “Units”.
Elige tu configuración
En la página del widget, puedes configurar la ciudad, la unidad de temperatura (Celsius o Fahrenheit) y el tema de color. Elige la ciudad que más interese a los lectores de tu blog. Deja las otras opciones en sus valores predeterminados por ahora. A medida que cambies la configuración, la vista previa se actualizará instantáneamente para que puedas ver cómo se verá.
Si la vista previa no se actualiza, recarga la página o verifica tu conexión a internet.
Sabrás que funcionó cuando la vista previa muestre la ciudad y la unidad de temperatura correctas.
Copia el código de inserción
Debajo de la vista previa encontrarás un cuadro etiquetado como Insertar este widget. Haz clic dentro del cuadro para resaltar todo el código, luego presiona Cmd+C (Mac) o Ctrl+C (Windows) para copiarlo. El código comienza con <iframe y termina con </iframe>.
Si no ves el cuadro de inserción, busca un botón etiquetado como Copiar al portapapeles o Insertar.
Sabrás que funcionó cuando tengas el código en tu portapapeles y el cuadro muestre una marca de verificación verde.
Pega el código en tu blog
Abre el editor de tu blog (WordPress, Wix, Squarespace, etc.) y ve a la página o entrada donde quieras el widget. Cambia el editor a modo HTML (a veces llamado “Vista de código”). Pega el código que copiaste justo donde quieres que aparezca el asistente meteorológico. Vuelve al modo Visual y guarda la página.
Si tu editor no tiene un modo HTML, busca un bloque de “Insertar” o “HTML personalizado” y pega el código allí.
Sabrás que funcionó cuando veas el cuadro del clima en vivo aparecer en la página y muestre la temperatura actual.