Entradas

Mostrando las entradas con la etiqueta Desarrollo Web

Análisis de la Copa Mundial FIFA 2026 con Python: Estadísticas, eficiencia ofensiva y visualizaciones

Imagen
  Análisis de la Copa Mundial FIFA 2026 con Python: Estadísticas, eficiencia ofensiva y visualizaciones antes de las semifinales La ciencia de datos ofrece una excelente oportunidad para descubrir patrones que muchas veces pasan desapercibidos durante un partido de fútbol. En este proyecto utilizaremos Python , Pandas y Matplotlib para analizar información estadística de la Copa Mundial FIFA 2026 a partir de un conjunto de datos disponible en Kaggle, url  Football 2026 World Cup Dataset Más allá de obtener tablas y gráficos, el objetivo es responder preguntas interesantes como: ¿Qué selección fue la más eficiente frente al arco? ¿Qué equipos generaron más oportunidades de gol? ¿La cantidad de tiros realmente se traduce en más goles? ¿Qué estilos ofensivos se pueden identificar a partir de los datos? Este artículo es el primero de una serie donde construiremos un proyecto completo de análisis deportivo utilizando Python, desde la exploración de datos hasta modelo...

Cómo utilizar un prompt para crear proyectos con APIs usando JavaScript e Inteligencia Artificial

Imagen
  La inteligencia artificial puede convertirse en un excelente compañero de desarrollo cuando se utiliza con un buen prompt. En lugar de comenzar cada proyecto desde cero, es posible proporcionar instrucciones claras para que la IA genere un proyecto completo, una explicación técnica y el contenido necesario para documentarlo. En este artículo compartiré el prompt que utilizo como punto de partida para crear proyectos con APIs en JavaScript, ojo el resultado es un codigo base que debe revisarse y probarse hasta que obtengas el resultado esperado.  Las tecnologías de IA son de apoyo no soluciones definitivas y ayudan optimizar el tiempo de generación de proyectos . FAQ (Preguntas frecuentes) ¿Qué es un prompt para crear proyectos con APIs? Es un conjunto de instrucciones que permite a una inteligencia artificial generar aplicaciones completas utilizando la documentación de una API. ¿Puedo utilizar este prompt con cualquier API? Sí. Puede utilizarse con la mayoría de las APIs ...

Cómo comenzar a trabajar con WebSocket en Tennis API

Imagen
 Mientras desarrollaba un ejemplo de integración con JavaScript y WebSocket con Tennis API , descubrí que la información está distribuida en dos sitios distintos. Al principio intenté conectarme únicamente con la guía general de WebSocket y, aunque logré autenticarme correctamente, todavía no era evidente qué eventos o endpoints debía utilizar para recibir información en tiempo real. El primer recurso que recomiendo leer es la guía Tennis WebSocket API Guide . En este artículo se explica el concepto de la integración mediante WebSocket, las ventajas frente a una API REST y el uso de Socket.IO para recibir actualizaciones en tiempo real sin realizar consultas HTTP constantes. Sin embargo, durante mis pruebas descubrí que esa guía está enfocada en explicar el funcionamiento general de la tecnología y no contiene todos los detalles necesarios para comenzar a consumir los eventos disponibles. Para conocer los eventos, endpoints y métodos específicos que utiliza la plataforma es nec...

Dashboard de Tenis en Tiempo Real con WebSocket y JavaScript

Imagen
¿Por qué utilizar WebSocket en lugar de una API REST? El caso de Tennis API Cuando trabajamos con APIs, normalmente pensamos en solicitudes HTTP tradicionales donde una aplicación consulta información cada cierto tiempo. Sin embargo, para aplicaciones que requieren datos en tiempo real, existe una alternativa mucho más eficiente: WebSocket. Mientras exploraba las capacidades de Tennis API encontré su integración mediante Socket.IO, una tecnología que permite recibir actualizaciones en tiempo real sin necesidad de realizar consultas constantes al servidor. ¿Cómo funciona una API REST tradicional? Con una API REST, la aplicación debe preguntar periódicamente si existen nuevos datos. Por ejemplo: setInterval(async () => { const response = await fetch("/live-scores"); const data = await response.json(); console.log(data); }, 5000); En este caso la aplicación realiza una consulta cada 5 segundos. El problema es que muchas veces no existe información nue...

Cómo crear un Dashboard de Tenis con JavaScript usando Tennis API

Imagen
Cómo crear un Dashboard ATP con JavaScript utilizando Tennis API Hola bienvenido a un nuevo post, hace unos días estaba buscando una API relacionada con deportes para practicar el consumo de servicios REST desde JavaScript y encontré Tennis API . Me llamó la atención porque ofrece información actualizada sobre rankings ATP y perfiles de jugadores profesionales, lo que la convierte en una buena opción para desarrollar dashboards y aplicaciones deportivas. En este artículo te mostraré cómo utilicé esta API para construir un pequeño dashboard web que consulta el ranking ATP en tiempo real y permite visualizar información detallada de los jugadores. ¿Qué es Tennis API? Tennis API es un servicio disponible a través de RapidAPI que proporciona acceso a información relacionada con el tenis profesional. Entre los datos que podemos consultar se encuentran rankings ATP y WTA, perfiles de jugadores, torneos, resultados y estadísticas históricas. Para comenzar es necesario crear una cue...

Cómo crear un portal automático de noticias con Python y RSS 📡🐍

Imagen
 Cada día se generan miles de noticias y tendencias en internet. Muchas veces nos enteramos tarde de temas importantes simplemente porque no revisamos constantemente los portales de noticias. Por eso decidí crear una pequeña demo educativa usando Python para generar automáticamente una página web con noticias recientes de México utilizando RSS de Google News. Lo interesante es que este proyecto: consume datos reales, genera HTML automáticamente, funciona sin APIs costosas, y puede actualizarse de forma automática. Además, es un excelente ejercicio para aprender automatización, consumo de feeds RSS y generación dinámica de contenido con Python. ¿Qué hace esta demo? 🔥 El proyecto: Obtiene noticias recientes desde Google News RSS. Procesa los títulos automáticamente. Genera una página HTML estilo portal de noticias. Muestra enlaces directos a las noticias originales. El resultado es una mini página dinámica de tendencias y noticias de México. Tecnologías ...

Cómo usar la API de Dragon Ball (Tutorial completo en JavaScript + Código descargable)

Imagen
Cómo usar la API de Dragon Ball (Tutorial completo en JavaScript + Código descargable) Aprender a consumir APIs es una de las habilidades más demandadas en programación hoy en día. En este tutorial te voy a enseñar paso a paso cómo hacerlo usando JavaScript… pero con un ejemplo mucho más interesante que los típicos datos aburridos. 👉 Vamos a construir una mini app real usando la API de Dragon Ball . ⚡ Al final podrás descargar el proyecto completo listo para usar. 📥 Descarga el proyecto completo Si quieres ahorrar tiempo y tener todo listo, puedes descargar el proyecto completo: 👉 Descargar HTML + JavaScript listo (Proyecto completo) Ejemplo de Dragon Ball API con JavaScript (Fetch paso a paso) A continuación verás un ejemplo completo de cómo consumir la Dragon Ball API usando JavaScript y fetch. Este ejemplo es ideal si estás aprendiendo APIs REST para proyectos reales. fetch("https://dragonball-api.com/api/characters?name=goku") .the...

🎨🔹 Generador de Combinaciones de Moda con JavaScript: Crea Atuendos y Colores Aleatorios

Imagen
Hemos desarrollado una sencilla aplicación web con HTML, CSS y JavaScript que permite seleccionar un diseño aleatorio y generar combinaciones de colores perfectas para tu atuendo. 👗 ¿Cómo funciona? ✔ Presiona el botón "Diseño a Vestir" para ver una propuesta de atuendo. ✔ Luego, presiona "Colores a Combinar" para obtener una sugerencia de colores armoniosos. ✔ ¡Experimenta con distintas combinaciones y encuentra tu estilo único! Puedes probarlo aquí: 🔗 Combinaciones de ropa y colores L Si te interesa aprender cómo se hizo, revisa el código en la publicación y anímate a personalizarlo. ¡Déjame tu comentario con tu combinación favorita! 👇😃 Te comparto el código <html lang="es"> <head>     <meta charset="UTF-8"></meta>     <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>     <title>Combinaciones de Ropa</title>     <style>         body { ...

Código HTML y JavaScript para Mostrar Imágenes Aleatorias en tu Web

Imagen
  En esta publicación quiero compartirles el código de HTML y Javascript para que puedan mostrar imágenes aleatorias en una pagina WEB. Los usos que pueden darle es por ejemplo para un mensaje especial para un amigo, un detalle motivacional para su equipo de trabajo. Para poder hacerlos vamos a utilizar el siguiente código <html lang="es"> <head>     <meta charset="UTF-8"></meta>     <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>     <title>Mensaje del día</title>     <style>         body {             font-family: Arial, sans-serif;             text-align: center;             padding: 20px;         }         #randomImage {             max-width: 100%;         ...

🎨 Combinación de Colores en Moda y Programación con PHP: ¡Mezcla Creatividad y Código!

Imagen
Hola bienvenidos a otro post de este blog, estuve pensando en que otra área podíamos utilizar programación así que leyendo las noticias e Instagram, el 4 de mayo debió llevarse acabo La MET Gala , que es un evento que promueve  ( Museo Metropolitado de New York ) donde artistas, famosos y celebridades acuden al evento y siguen una temática en su vestimenta, este año es Tiempo: moda y su permanencia como no se llevo acabo muchos artistas decidieron recordar en Instagram con fotos de galas anteriores y Vogue hizo un vídeo con los momentos más representativos. Como resultado de esto  Pensé en la Moda para generar un programa y este post , no me considero una persona con el criterio para dar consejos de moda,  pero si una persona que pueda desarrollar una Página que de manera aleatoria nos sugiera 4 colores a combinar en nuestra ropa . Les platico un poco más acerca de la moda, hay 2 temporadas para la semana de la moda una para la colección primaver...

🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!