Entradas

Mostrando las entradas con la etiqueta HTML

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 del Ranking WTA con JavaScript usando Tennis API y RapidAPI

Imagen
Si estás desarrollando aplicaciones deportivas, una de las formas más sencillas de obtener datos actualizados de tenis es utilizando la API de Tennis API disponible a través de RapidAPI. En este tutorial mostraré cómo crear un dashboard interactivo del Ranking WTA utilizando HTML, CSS y JavaScript. Los datos son proporcionados por Tennis API, una plataforma especializada en estadísticas, rankings, resultados y datos en tiempo real para ATP, WTA e ITF. ¿Qué es Tennis API? tennis-api.com ofrece acceso a: Ranking ATP y WTA. Resultados en vivo. Calendario de torneos. Estadísticas de jugadores. Datos punto por punto mediante WebSocket. Cuotas deportivas en tiempo real. La API también puede consumirse desde rapidapi.com , lo que facilita las pruebas y la integración en proyectos JavaScript, Python, PHP y otros lenguajes. Resultado Final El dashboard desarrollado permite: Consultar el ranking WTA actualizado. Buscar jugadoras por nombre. Mostrar el Top 3 mundial. Consulta...

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 ...

🎨🔹 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 { ...

Graficar Funciones con JavaScript y HTML Chart.js

Imagen
 Cuando trabajamos con datos o funciones matemáticas, es muy útil poder visualizarlos en una gráfica. Con JavaScript y HTML, esto es sencillo si utilizamos una biblioteca como Chart.js . A continuación, te presento un ejemplo donde graficamos la función cuadrática y = x^3 . Usaremos etiquetas en el eje X desde -10 hasta 10 y graficar los valores correspondientes para y . Aquí tienes el código que necesitas para generar la gráfica: <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Graficar Funciones con JavaScript</title>     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body>     <h1>Graficar Funciones con JavaScript y HTML</h1>     <canvas id="miGrafica" width="400" height="200"></canvas>     <script>   ...

📌 Introducción a la Programación en HTML: Conceptos Básicos

Imagen
Hola programadores Esta semana voy a escribir acerca de como programar con HTML (HyperText Markup Language) , el cual es un lenguaje de etiquetas es decir sus 'comando' están entre los signos '<>' y tienen un inicio y fin cada segmento, este lenguaje es muy popular y lo utilizamos todos los días, porque es el lenguaje en que esta Internet, si están en Google Chrome y presionan las teclas Ctrl + U , verán el código fuente (así es como se le llama en el mundo de la computación cuando no tiene una presentación para humanos jajajaja o usuarios)  o si presionan Ctrl + Mayus + I , Google muestra el diseño de la página los errores y warnings que hay en el código, esto les puede servir para revisar su página antes de publicarla HTML surgió por ahí de 1991 es propiedad de  World Wide Web Consortium  (W3C) , incluso encontré  la liga de la pantente en 1997  https://patentimages.storage.googleapis.com/10/69/bc/a4e3e496c8...

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