Entradas

Mostrando las entradas con la etiqueta Desarrollo Web

Dashboard de Tenis en Tiempo Real con WebSocket y JavaScript en Blogger

Imagen
  Cómo crear un  Los datos en tiempo real son uno de los casos de uso más interesantes para los desarrolladores. Mientras que muchas APIs funcionan mediante solicitudes HTTP tradicionales, algunas plataformas ofrecen conexiones WebSocket que permiten recibir actualizaciones instantáneas sin necesidad de recargar la página. En este artículo mostraremos cómo conectarnos a Tennis API mediante WebSocket y cómo construir un dashboard de partidos de tenis en vivo utilizando únicamente HTML, CSS y JavaScript dentro de Blogger. ¿Qué es un WebSocket? Un WebSocket es un protocolo de comunicación que mantiene una conexión abierta entre el navegador y el servidor. A diferencia de una API REST tradicional donde el cliente debe preguntar constantemente si existen nuevos datos, con WebSocket el servidor envía la información automáticamente cuando ocurre un cambio. Esto resulta ideal para aplicaciones como: Marcadores deportivos en vivo Sistemas de monitoreo Dashboards financieros...

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

Comparador de Propuestas Laborales en PHP: Evalúa Ofertas de Empleo

Imagen
Bienvenidos a este su blog, espero estén teniendo un buen día un buen inicio de año llenos de muchos propósitos, quizá buscar un nuevo trabajo o cambiar de sector, pensando en este post les quiero compartir una ejemplo de una página WEB dinámica hecha en PHP que les puede servir de apoyo para tomar una decisión importante en su vida profesional. Hay veces que cuando recibimos una propuesta no sabemos muy bien como compararla para tomar una decisión o hay ocasiones que no recordamos todas las prestaciones que tenemos y en esta página tenemos las prestaciones más comunes en México que nos ayudan a tener a la mano la información y poder comparar de manera sencilla los montos. Antes de comenzar con la parte de programación, les quiero compartir algunos datos: Salario Bruto : es el salario antes de que te retengan impuestos. Salario Neto : Es el salario ya libre o el que realmente te depositan. Por La ley Federal de trabajo se deben otorgar como mínimo 15 días de aguinaldo ...

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