Tres estrellas casi invisibles, una pista y un cambio pequeño. Aprende a investigar un fallo visual con Microsoft Edge DevTools y a comprobar una copia reparada.
Parte de Crear en familia · Tutorial 11
El juego dice que hay tres estrellas. Los recuadros están ahí. Pero las estrellas apenas se ven.
¿Las hemos perdido? ¿Se han borrado? Antes de cambiar cosas al azar, vamos a buscar una pista.
Hoy usaremos las herramientas de desarrollo de Microsoft Edge, llamadas DevTools. Vienen dentro del navegador y permiten mirar cómo está hecha una página. No hace falta entender todo lo que aparece: vamos a buscar una estrella y cambiar un número.
La primera meta: descubrir por qué cuesta verla y comprobar nuestra idea.
Portada original generada con IA. Es una ilustración; las pantallas del ejercicio son capturas reales.
Este pequeño juego tiene tres botones con forma de estrella. Al recogerlos, el marcador llega a tres. Hemos dejado un fallo visual intencionado para investigar: son demasiado transparentes. No hay reloj, enemigos ni sonidos.
Este es el resultado que buscamos. Al final compararemos nuestra prueba con una copia reparada incluida en el taller.
Descargar el taller en ZIP · Abrir el juego con la pista por resolver
Necesitáis un ordenador con teclado y ratón o panel táctil, Microsoft Edge de escritorio y un adulto disponible. Calculad 25–40 minutos orientativos, con una pausa cuando os apetezca. No hace falta haber seguido las entregas anteriores.
Cuentas, edades y coste. La actividad de 10–14 años usa un archivo local y no exige cuenta Microsoft, cuenta de IA ni tarjeta. Edge incluye DevTools; en esta ruta comprobada no hemos contratado nada ni consumido créditos o cuotas de un servicio cloud. Eso no es una promesa sobre precios futuros u otras funciones del navegador. Si falta Edge, el adulto revisa la descarga oficial y la licencia vigente, que distingue Windows de otras plataformas.
No hemos encontrado en esa licencia una edad mínima numérica específica para este ejercicio local. 10–14 es el público del taller, no una afirmación de permiso universal. El adulto comprueba su aplicación a la familia o al centro. Los servicios online tienen condiciones adicionales; el acuerdo de servicios de Microsoft contempla la aceptación por el progenitor o tutor cuando corresponde. Aquí no activamos esos servicios ni prestamos cuentas. Si el equipo o el centro no permite DevTools, se puede describir el fallo en papel y comparar las dos versiones, dejando la inspección para un entorno autorizado.
El juego no incluye rastreo ni conexiones de red. Edge puede realizar sus propias comunicaciones: el adulto revisa sus opciones de privacidad. No necesitamos sincronización, Copilot ni extensiones para resolver este caso.
Las capturas se tomaron en Edge 154.0.4258.48, macOS 27.0.1, con DevTools en español y un perfil de demostración aislado. En ellas se ve el juego junto al inspector mediante la vista remota real de Edge. En vuestro ordenador la posición de los paneles puede ser distinta. Podéis abrir cada captura para ampliarla.
Descargad detective-estrellas.zip y extraed su contenido. En Windows: botón derecho sobre el ZIP → Extraer todo. En Mac: doble clic.
Dentro de detective-estrellas hay dos juegos, un archivo LEEME.txt, una ficha-detective.txt y la licencia del ejemplo. No trabajéis dentro del ZIP. Guardad la carpeta en un sitio fácil de encontrar, por ejemplo Documentos.
El adulto pulsa con el botón derecho sobre estrellas-inicio.html y elige Abrir con → Microsoft Edge. No hace falta convertir Edge en el navegador predeterminado.
Debe aparecer el título Las estrellas casi invisibles, tres recuadros oscuros y Estrellas: 0 de 3. Si se abre un editor con texto, cerrad esa pestaña y elegid Edge en «Abrir con».
Este aspecto tenue es el fallo preparado para el ejercicio. No es un problema de vuestra pantalla.
Mirad el primer recuadro. La estrella sigue ahí, aunque cuesta verla.
Decid o escribid: «Esperaba ver tres estrellas amarillas. Veo tres figuras muy oscuras». Eso describe lo que pasa. «El ordenador está roto» todavía sería una suposición.
Pulsad en el centro del primer recuadro. El marcador debe subir a 1 de 3 y aparece una marca de verificación, también tenue.
La regla de recoger funciona. La pista apunta al aspecto del juego. No significa que todos los fallos visuales tengan la misma causa; estamos investigando este.
Pulsad Reiniciar partida, debajo del tablero. El marcador vuelve a cero y reaparecen las tres estrellas tenues.
Ya podemos comparar el antes y el después sin mezclarlo con una partida a medias.
Con el juego activo, pulsad Ctrl + Mayús + I en Windows o ⌘ + Opción + I en Mac. También se puede abrir desde el menú de Edge: … → Más herramientas → Herramientas de desarrollo.
Aparece un panel con varias herramientas. Si el dispositivo está administrado y las bloquea, no cambiéis sus políticas. Estos accesos están documentados en la guía oficial de DevTools.
Dentro de DevTools, pulsad la pestaña Elementos —Elements si está en inglés—. Las líneas con etiquetas representan las piezas de la página; no hay que leerlas todas.
Si no encontráis la pestaña, con el foco dentro de DevTools pulsad Ctrl + Mayús + P en Windows o ⌘ + Mayús + P en Mac. Escribid Mostrar elementos y elegid ese resultado. En inglés se llama Show Elements. Es un buscador de herramientas, no una consola donde ejecutar código.
Con Elementos seleccionado, pulsad Ctrl + F en Windows o ⌘ + F en Mac. En la búsqueda que aparece dentro del panel, escribid exactamente:
#estrella-1Pulsad Intro. Debe quedar seleccionada una línea que contiene button, estrella-1 y Recoger estrella 1. El símbolo # indica que buscamos esa pieza concreta por su identificador.
Buscamos una pieza del juego. El resaltado azul de la primera estrella es una ayuda del inspector, no otra avería.
Dentro del panel lateral, pulsad Estilos —Styles en inglés—. Localizad el bloque que empieza por .estrella.
Ese nombre agrupa las tres estrellas. Las líneas de debajo describen su aspecto: color, tamaño y transparencia. Si el panel está muy estrecho, el adulto puede ampliar la ventana o arrastrar el separador entre el juego y las herramientas.
En el campo Filtro de Estilos, escribid opacity. Es una palabra inglesa que significa opacidad: cuánto se ve una pieza sin hacerse transparente.
En nuestro bloque aparece:
opacity: 0.08;Aquí 0 sería invisible y 1, totalmente opaco. 0.08 deja ver muy poco. Usamos punto, no coma. Todavía no cambiéis nada: decid qué esperáis que pase al poner 1.
La pista está en el número que acompaña a opacity. El resto de las reglas puede esperar.
Haced doble clic sobre 0.08, escribid 1 y pulsad Intro. No borréis el nombre opacity ni el bloque entero.
Las tres estrellas deben verse amarillas y claras. Cambian las tres porque comparten la regla .estrella. Hemos probado nuestra explicación con un cambio pequeño. La guía oficial de CSS en DevTools explica este tipo de edición en vivo.
El inspector puede mantener un resaltado sobre la primera estrella. La segunda y la tercera permiten comprobar el nuevo aspecto sin ese resaltado.
Aquí podéis hacer una pausa. Ya habéis encontrado una causa y probado una solución.
Volved al juego y pulsad las tres estrellas. El marcador debe avanzar hasta 3 de 3 y aparecer ¡Encontradas las tres!. Pulsar una estrella ya recogida no añade puntos.
También podéis jugar con el teclado: Tab lleva el foco entre botones; Intro o Espacio recoge la estrella enfocada. El marco de foco ayuda a saber dónde estáis.
No basta con que se vea bonito: las reglas del juego deben seguir funcionando.
Pulsad Reiniciar partida. Vuelven las estrellas, el marcador queda a cero y el aspecto sigue reparado.
Reiniciar solo comienza otra partida. No vuelve a leer el archivo que hay en vuestra carpeta.
Haced clic en el juego y pulsad Ctrl + R en Windows o ⌘ + R en Mac. También podéis usar la flecha circular de recarga del navegador.
Las estrellas vuelven a verse tenues. No lo habéis hecho mal. El cambio de Estilos era una prueba temporal en esa página. En este taller no hemos configurado ninguna herramienta que guarde ese cambio en el archivo. Microsoft explica esa diferencia en su documentación sobre archivos y espacios de trabajo.
Reiniciar y recargar hacen cosas distintas. Esta comparación es parte del experimento.
Abrid ficha-detective.txt con el editor de texto que ofrezca el ordenador, o usad papel. Completad las cuatro frases: qué esperaba ver, qué veía, qué cambié y qué ocurrió al recargar.
Un informe posible sería: «Las estrellas funcionaban, pero apenas se veían. Cambié opacity de 0.08 a 1. Se veían mejor y pude recoger las tres. Al recargar volvió el valor inicial».
Es más útil que «no funciona», porque otra persona puede repetir la prueba.
Volved a la carpeta y abrid estrellas-reparadas.html con Edge. Es la solución preparada del taller: tiene la misma regla con opacity: 1 escrita en el archivo. No es un guardado automático de lo que habéis hecho en DevTools.
Podéis comprobar que veis las tres estrellas claras, como en la captura del resultado al principio del artículo. Conservamos el mismo título para comparar ambos archivos; mirad su nombre si dudáis de cuál está abierto.
Recargad estrellas-reparadas.html y volved a recoger las tres estrellas. Ahora siguen visibles después de recargar.
Esa es la diferencia que buscábamos: una prueba temporal nos ayudó a encontrar el arreglo; la segunda copia ya lo conserva en el archivo.
Conservad la carpeta completa y guardad vuestra ficha. Podéis cerrar ambas pestañas. Mañana abrid estrellas-reparadas.html para jugar o estrellas-inicio.html para repetir el caso.
El juego no guarda las partidas: al abrirlo empieza a cero. La ficha y los archivos son lo que conservamos. No se ha subido nada a Internet.
Opcional y a cargo del adulto. Estos mensajes están preparados para copiar; no se han enviado a un modelo durante la prueba. No hace falta activar el asistente de Edge. Usad únicamente una herramienta cuyas condiciones, privacidad y límites haya revisado el adulto; si exige una cuenta nueva, pago o más permisos de los necesarios, seguimos con la copia incluida.
Para recibir una pista, el adulto puede pegar en su asistente autorizado:
Estamos investigando un juego local de tres estrellas.
Se pueden recoger, pero apenas se ven.
En Estilos hemos encontrado .estrella y opacity: 0.08.
Danos una pista pequeña para comprobar nuestra idea.
No hagas cambios ni ejecutes acciones. Espera a nuestra prueba.Si el adulto ya utiliza una IA con permiso para editar solo la carpeta de práctica, puede pedirle que prepare una copia propia:
Hemos comprobado en Edge que cambiar opacity de 0.08 a 1
hace visibles las tres estrellas y el juego sigue funcionando.
En la carpeta de práctica, lee solo estrellas-inicio.html.
Crea mi-reparacion.html sin sobrescribir archivos existentes.
Cambia únicamente opacity: 0.08 por opacity: 1 en .estrella.
Antes de escribir, explica el cambio y espera el permiso del adulto.
No instales herramientas, no uses comandos que debamos copiar,
no accedas a otras carpetas y no publiques nada.
Dinos qué archivo abrir para comprobar el resultado.El adulto revisa el cambio y los permisos reales de la aplicación; el mensaje no los sustituye. Después, abrid esa copia, recargad y recoged las tres estrellas. No aceptéis «ya está» sin probarlo. Si no tenéis esa herramienta, estrellas-reparadas.html permite completar todo el recorrido anterior.
| Lo que veis | Qué podéis probar |
|---|---|
| La búsqueda resalta palabras del artículo | Estáis buscando en la página equivocada. Volved al juego, pulsad Elementos dentro de DevTools y repetid la búsqueda allí. |
| No aparece .estrella en Estilos | Buscad #estrella-1 en Elementos y comprobad que selecciona el botón. Borrad cualquier filtro anterior de Estilos. |
| Solo cambia una estrella | Puede que hayáis escrito en element.style, que afecta a la seleccionada. Recargad y editad el valor que ya existe dentro de .estrella. |
| El número se vuelve a 0.08 al recargar | Es lo esperado en el archivo inicial. Abrid la copia reparada para comprobar un arreglo conservado. |
| Ya pone 1 al empezar | Quizá estáis en estrellas-reparadas.html. Abrid estrellas-inicio.html para investigar. |
| Hay una ventana llamada Consola | Volved a Elementos. Este ejercicio no requiere pegar código en la consola. |
opacity: 0.5 y después 1. ¿Qué resulta más fácil de ver? No hace falta jugar con las estrellas tenues si os molesta.Hoy no hemos aprendido todas las herramientas de Edge. Hemos hecho algo que podemos repetir: observar, proponer una explicación, cambiar una cosa y comprobar qué pasa.
Descargar ambos juegos y la ficha · Abrir la copia reparada
El código original del ejemplo se ofrece bajo licencia MIT, incluida en el ZIP. Esa licencia no cubre Microsoft Edge, sus marcas ni la portada del artículo.
Revisado el 10 de octubre de 2026. Ejercicio y edición gráfica probados en Edge 154.0.4258.48 para Mac; etiquetas en español, búsqueda, cambio de regla, teclado, victoria, reinicio, recarga y copia local verificados. El juego se probó también sin conexión en viewport 390 × 844 con tacto emulado: no equivale a una prueba en teléfono físico. No se ha probado con una familia ni en Windows; los accesos de Windows se contrastaron con la documentación oficial. Las interfaces y condiciones pueden cambiar.
Guía para principiantes: revisa versiones, actualiza VMware y diagnostica el conflicto con Hyper-V. Incluye una alternativa reversible y sus efectos sobre la seguridad.
Dibuja cuatro fichas, encuentra sus parejas y guarda una copia para mañana. Un taller local, sin cuentas ni comandos, con juego descargable.
Tres reglas pequeñas para un juego de MakeCode Arcade: recoger monedas, perder vidas y llegar a una meta. Con proyectos descargables y sin escribir código.