[{"data":1,"prerenderedAt":208},["ShallowReactive",2],{"page-/es/blog/18":3},{"id":4,"title":5,"body":6,"date":190,"description":191,"extension":192,"image":193,"meta":194,"navigation":196,"path":197,"seo":198,"short":199,"stem":200,"tags":201,"updated":206,"__hash__":207},"content/es/blog/18/index.md","Bus Salamanca: De Alexa a la Web Interactiva",{"type":7,"value":8,"toc":179},"minimark",[9,14,26,38,45,50,53,58,65,68,86,92,96,99,106,113,124,130,134,137,163,166],[10,11,13],"h1",{"id":12},"bus-salamanca-un-nuevo-enfoque-visual","Bus Salamanca: Un Nuevo Enfoque Visual",[15,16,17,18,25],"p",{},"Hace un tiempo creé ",[19,20,24],"a",{"href":21,"rel":22},"https://github.com/JuanmanDev/BusSalamancaAlexa",[23],"nofollow","Bus Salamanca Alexa",", una skill orientada a consultar los tiempos de llegada usando comandos de voz. Aunque útil cuando estás en casa preparándote para salir, a veces la voz se queda corta.",[15,27,28,29,37],{},"¿Qué pasa si quieres ver el recorrido de la línea? ¿O si el autobús ha desaparecido de la API oficial y no sabes si viene o ha pasado de largo? Para resolver estos problemas y mejorar radicalmente la usabilidad, he creado la versión web: ",[30,31,32],"strong",{},[19,33,36],{"href":34,"rel":35},"https://bussalamanca.juanman.tech/",[23],"Bus Salamanca Web",".",[15,39,40],{},[41,42],"img",{"alt":43,"src":44},"Vista global del mapa con todas las líneas","/es/blog/18/map-home.png",[46,47,49],"h2",{"id":48},"funcionalidades-clave","Funcionalidades Clave",[15,51,52],{},"La nueva web, accesible tanto en móvil como en escritorio, incluye características que aportan mucho más que la simple estimación de tiempo de la parada.",[54,55,57],"h3",{"id":56},"️-mapa-global-y-rutas-específicas","🗺️ Mapa Global y Rutas Específicas",[15,59,60,61,64],{},"He implementado un mapa de fondo permanente impulsado por ",[30,62,63],{},"MapLibre GL JS",", con un modo oscuro muy cuidado para que destaquen las posiciones de los autobuses.",[15,66,67],{},"Ahora puedes:",[69,70,71,79],"ul",{},[72,73,74,75,78],"li",{},"Ver ",[30,76,77],{},"todos los autobuses"," circulando por la ciudad en la vista principal.",[72,80,81,82,85],{},"Seleccionar una ",[30,83,84],{},"línea concreta"," para aislar su ruta, viendo exactamenté por dónde va cada vehículo de esa línea.",[15,87,88],{},[41,89],{"alt":90,"src":91},"Vista de detalle de una línea","/es/blog/18/map-line.png",[54,93,95],{"id":94},"️-tiempos-de-llegada-y-caché-predictiva","⏱️ Tiempos de Llegada y Caché Predictiva",[15,97,98],{},"El corazón de la aplicación sigue siendo saber cuándo llega tu bus. Al pulsar sobre cualquier parada, obtienes las próximas llegadas de forma clara.",[15,100,101,102,105],{},"Pero aquí está la ",[30,103,104],{},"verdadera magia",": a veces, el sistema oficial de la ciudad sufre cortes o elimina temporalmente un autobús de la estimación, causando frustración (\"¡desapareció de la pantalla y de repente apareció en mi parada!\").",[15,107,108,109,112],{},"He diseñado un ",[30,110,111],{},"sistema de caché y estimación predictiva",":",[69,114,115,118,121],{},[72,116,117],{},"Si un autobús estaba reportando su llegada a una parada, el sistema guarda esa estimación.",[72,119,120],{},"Si por un microcorte el autobús deja de reportarse en la API oficial en la siguiente consulta, mi sistema asume que sigue en camino y calcula el tiempo restante basándose en el último dato conocido, en lugar de hacerlo desaparecer abruptamente.",[72,122,123],{},"Gracias a la vista de mapa, el usuario puede corroborarlo visualmente viendo si el ícono del autobús sigue aproximándose.",[15,125,126],{},[41,127],{"alt":128,"src":129},"Próximas llegadas en una parada","/es/blog/18/map-stop.png",[46,131,133],{"id":132},"tecnologías-utilizadas","Tecnologías Utilizadas",[15,135,136],{},"Esta web ha servido también como campo de pruebas para perfeccionar mi stack:",[69,138,139,145,151,157],{},[72,140,141,144],{},[30,142,143],{},"Nuxt 4 / Vue 3",": El motor principal del frontend.",[72,146,147,150],{},[30,148,149],{},"MapLibre GL",": Para el renderizado de mapas vectoriales interactivos con un rendimiento espectacular.",[72,152,153,156],{},[30,154,155],{},"TailwindCSS",": Para todo el estilizado, creando interfaces tipo \"Glassmorphism\" con transparencias y oscuros elegantes.",[72,158,159,162],{},[30,160,161],{},"Docker",": Para el despliegue automático del backend que actúa como proxy hacia el sistema oficial SIRI de la ciudad.",[15,164,165],{},"El resultado es una web extremadamente rápida, que puedes añadir cómodamente a tu pantalla de inicio del móvil como si fuera una aplicación nativa, pero siempre actualizada y sin descargas iniciales pesadas.",[15,167,168,169,172,173],{},"¡Te invito a probarla la próxima vez que te muevas por Salamanca!",[170,171],"br",{},"\n👉 ",[30,174,175],{},[19,176,178],{"href":34,"rel":177},[23],"bussalamanca.juanman.tech",{"title":180,"searchDepth":181,"depth":182,"links":183},"",1,2,[184,189],{"id":48,"depth":182,"text":49,"children":185},[186,188],{"id":56,"depth":187,"text":57},3,{"id":94,"depth":187,"text":95},{"id":132,"depth":182,"text":133},null,"Hace un tiempo creé Bus Salamanca Alexa, una skill orientada a consultar los tiempos de llegada usando comandos de voz. Aunque útil cuando estás en casa preparándote para salir, a veces la voz se queda corta.","md","./map-home.png",{"created":195},"2026-03-01 20:50",true,"/es/blog/18",{"title":5,"description":191},"Cómo evolucionó el proyecto Bus Salamanca de una skill de Alexa a una web completa con mapa interactivo, seguimiento en tiempo real y caché predictiva de tiempos.","es/blog/18/index",[202,203,204,205],"Nuxt","MapLibre","Real-Time","Transporte","2026-03-01T20:50:00.000Z","F8eHLuHkv87YVXWEQJWg1ZwSziDNNKP10zvkOmqglh4",1772482174798]