Mostrando entradas con la etiqueta Herramientas digitales. Mostrar todas las entradas
Mostrando entradas con la etiqueta Herramientas digitales. Mostrar todas las entradas

jueves, 23 de abril de 2026

"Cuanto más observo, más me asombro - I am Robot”

El siglo XXI traerá transformaciones tecnológicas profundas y con ellas, cambiará nuestra forma de vivir. Los humanos se organizarán también, según el grado de aceptación - o resistencia - a estos cambios. Los sistemas de organización mundial que hoy conocemos quedarán obsoletos con rapidez y nuevos órganos de decisión, inmunes a las limitaciones del medio ambiente, tomarán el relevo.

Mientras tanto, la especie que un día creyó ocupar la cúspide de la pirámide, se enfrentará a su propia duda existencial.

Esto, solo es un guión cinematográfico, las historias - parte reales parte ficción - nos ayudan a entender y desarrollar algo esencial: el pensamiento crítico, el cuestionar o mantener opiniones contrarias, pretender la mejora continua, basada en una robusta metodología, es lo que nos permite evolucionar los sistemas… y también a nosotros mismos.

De eso vá este artículo. Del despertar de esa inquietud, de una ilusión, el sueño de aspirar a replicar el comportamiento propio de seres vivos o de cómo un conjunto de metal, silicio y baquelita, comienza a comportarse como algo más.

Estimados e inquietos lectores, estamos a punto de comenzar un viaje por: "Cuanto más observo, más me asombro - I am Robot”. Bon voyage.

🟧 Algo más que un montón de líneas de código

Cuando empezamos esta experiencia, el objetivo parecía sencillo: hacer que un robot (engendro electromecánico), siguiera una baliza roja.

Pero pronto descubrimos que el robot no era el único que tenía que aprender, también nosotros.

Lo que empezó como un ejercicio de programación con Python terminó convirtiéndose en una lección inesperada sobre "cómo pensar como un ingeniero":

  • cómo lidiar con un hardware imperfecto y un entorno cambiante.
  • cómo detectar errores usando logs y dashboard,
  • cómo diseñar sistemas robustos en entornos ruidosos,
  • y cómo transformar el caos en arquitectura estable y sostenible.

Este proyecto no va de servos, ni de cámaras, ni de distancias, va de algo mucho más importante:

La base para convertir un montón de líneas de código en un sistema que es capaz de tomar decisiones acertadas.

🧠 Robótica, ruido y pensamiento crítico

"Cómo un robot, que sigue una baliza, se convirte en una lección de ingeniería".

1. El mundo real no es un laboratorio.

La primera sorpresa llegó pronto: la batería y los sensores del Robot Hat V4 - cámara, ultrasonido, servos - no eran demasiado fiables.

  • La capacidad de la batería, condicionaba las comunicaciones o respuestas.
  • La cámara vibraba y generaba bounding boxes absurdos.
  • El área de la baliza saltaba de 2000 a 40000 en un solo frame. Las luces y sombras contribuian con mas errores, a diferentes horas de prueba en el día, con diferentes resultados, bajo las mismas premisas.
  • El ultrasonido daba 5 cm cuando estaba a 40.
  • El robot perdía la baliza por un giro mínimo del chasis.

La primera lección fue inmediata:

   El hardware real es ruidoso el ruido no se elimina: se gestiona.

Aquí aparece el primer vínculo con el pensamiento crítico:

   No puedes confiar en un único dato. Necesitas contexto, criterios y validación.

2. El error clásico: programar reacciones, no sistemas

La primera versión del código era ingenua:

si veo la baliza → giro 
si no la veo → busco
si está cerca → freno

Funcionaba en mi cabeza. Funcionaba en papel. Funcionaba incluso en el modo simulación, pero no en el robot en modo real:

  • se quedaba mirando a un lado,
  • entraba en bucles,
  • perdía la baliza,
  • se bloqueaba,
  • o avanzaba cuando no debía.

El pensamiento crítico nos obligó a hacer la pregunta correcta: ¿Estoy reaccionando a los síntomas o entendiendo el sistema?

3. El caos como maestro

Durante semanas aparecieron fallos que parecían contradictorios:

  • TRACK entraba en SEARCH sin motivo.
  • RECENTER atrapado en un ángulo imposible
  • TRACK arrollando la baliza
  • NEAR se activaba demasiado pronto… o nunca
  • SCAPE saltaba cuando no debía.
  • RESET se encadenaba sin sentido.

Cada fallo era una pista. Cada pista me obligaba a cuestionar nuestras suposiciones.

Aquí aparece la segunda lección de pensamiento crítico:

   Cuando un sistema falla, no te preguntes “qué pasa”, pregunta mas bien “qué estoy asumiendo,  que no es cierto”.

4. La revelación: no necesitábamos más condiciones, mas código, mas desorden, sino mejor arquitectura

El punto de inflexión llegó cuando entendimos que:

  • No era un problema de TILT.
  • No era un problema de PAN.
  • No era un problema de área.
  • No era un problema de distancia.
  • No era un problema de velocidad.

   Era un problema de arquitectura, del conjunto.

Estábamos intentando controlar un sistema complejo con condiciones sueltas, parcheadas. Eso nunca funciona.

La solución fue filosófica antes que técnica:

   Divide el mundo en zonas lógicas, espacios acotados, probados que funcionen y deja que cada estado gobierne su zona.

5. Nacen los validadores y la fusión de sensores

Aquí aparece la idea más poderosa del proyecto:

✔ No confíes en un único dato, construye conjunto de criterios que deban cumplirse.

Creamos dos validadores:

  • valid_for_search → “¿esta detección es fiable para seguirla?”
  • valid_for_near → “¿esta detección indica proximidad real?”

Y añadimos la capa de fusión visión + distancia:

  • near_by_distance
  • too_close_to_measure
  • near_fused

Con ellos, el mundo del robot quedó dividido en zonas claras, con decisiones acotadas, mas precisas según el momento.

Esto es pensamiento crítico aplicado a robótica:

   No tomes decisiones por impulsos, fallo/corrijo. Tómalas por criterios.

6. La arquitectura final: simple, elegante, robusta

Con los validadores, los estados se volvieron puros, acotaban responsabilidad y daban su pase, de forma clara y segura:

  • SEARCH → busca.
  • RECENTER → alinea.
  • TRACK → sigue.
  • NEAR → gestiona proximidad.
  • SCAPE → protege.
  • RESET → estabiliza.

Cada estado hace una sola cosa y la hace bien, pasando correctamente al estado siguiente.

En resumen

Esta experiencia me enseñó algo que va mucho más allá de la robótica, de las líneas de código:

  • El pensamiento crítico no es dudar de todo, es dudar de lo que importa.
  • No es añadir más condiciones, es diseñar mejores estructuras.
  • No es reaccionar al ruido, es entenderlo y darle significado.
  • No es luchar contra el caos, es darle forma.
  • No es corregir errores aislados, es entender y gestionar, dando lugar al correcto comportamiento.

Imágenes del Robot Hat V4

📚 Referencias

    Esto es solo una breve descripción, podreis encontrar mas información al respecto con todo el código en https://github.com/jmcaneda/picarx-pet


📜 Esto es un proyecto educativo

    Sin ánimo de lucro, por lo que si lo considerais útil en parte o en su totalidad, solo pido a cambio una mención sobre el origen de la información, me haría gran ilusión saber que ha servido para que otros 'Devs', se animen a desarrollar su talento en el mundo de la robótica con Python.

   ¿A quién puede beneficiar en el plano educativo?

Aficionados a la robótica

  • Un proyecto accesible pero profundo
  • Un robot que muestra comportamientos emergentes
  • Un camino claro para aprender visión + control + lógica

Estudiantes de la ESO y bachillerato

  • Introducción práctica a la robótica
  • Comprensión real del ruido en sensores
  • Pensamiento lógico y estructurado
  • Motivación por ver “vida” en un robot

   No descarto en un futuro próximo, la realización de monográficos acerca de los problemas a los que nos enfrentamos a lo largo del desarrollo del proyecto, medidas que se fueron adoptando o sobre conocimientos básicos necesarios.

📜 Que necesitas saber y tener

    Este es un proyecto sencillo, pero aún así requiere de un conocimiento en programación Python, manejo de utilidades de consola, placa base y algo de robótica. Por otro lado es necesario contar con el hardware apropiado:

Conocimiento recomendado

  • Lenguaje de comandos en línea: Shell.
  • Editores de programación, nano, micro, VS Code.
  • Lenguaje de programación Python.
  • Conocimiento del Hardware de placa base y extensiones.
  • Modos de conexión con dispositivos a distancia, por terminal o por escritorio remoto.
  • Sistema para el control de versiones Git.
  • Repositorio de código remoto Github.

Hardware recomendado

  • Raspberry Pi 3B+ o superior.
  • Robot Hat V4 (Picar‑X) de Sunfounder.
  • Elementos auxiliares como cables USB-C, bridas, tuercas, tornillos...
  • Bateria externa auxiliar, en mi caso INIU Power Bank 10000 mAh.

✨ Especial mención.

Promotores y medios formativos (la formación gratuita de calidad constituye una de las mejores palancas para el cambio y progreso, ayudándonos a enfrentar con éxito, los nuevos retos, día a día), la formación gratuita es dos veces buena, prácticala y ayuda a extenderla.

Entre castigo y bendición, el regalo que me hizo mirar hacia la robótica https://docs.sunfounder.com/projects/picar-x-v20/es/latest/index.html

La ayuda en línea, si quieres llegar lejos, acompañate de los pares https://forum.sunfounder.com/latest

A los profesores y alumnos

Que viven este camino, con admirable interés y entrega.




martes, 24 de junio de 2025

Quiero empezar por el final

 


   Agradeciendo a todos aquellas personas o entidades, que de una forma u otra contribuyen y en muchos casos de manera altruista, a orientar y formar. Estamos en una sociedad circular, en la que lo que pasa allí, se acaba sintiendo aquí. Que quiero decir con esto, pues que gracias a que es así, algunos como es mi caso, crecemos y creemos.

   Esta formación tiene su origen en Extremadura, mas concretamente en Almendralejo, localidad cercana a Badajoz, que a través de IRIA (Incubadora de Realidades Inmersivas de Almendralejo), ofrece un programa de apoyo a las iniciativas de emprendedores, autónomos y Pymes con proyectos de innovación y desarrollo en el ámbito de la industria 4.0, Realidad Virtual, Aumentada, Realidad Mixta y Extendida y es aquí donde se propone un curso de formación, gratuito, Introducción a Unreal Engine 5.

   Se ha impartido, durante 30 intensas horas y no son todas las que se echan, porque hablamos de un motor, no solo de videojuegos, con inmensas posibilidades, de la mano experta de Javier Jurado Gámez (Unreal Gold Instructor partner for Epic Games y Director en Cursos Unreal Engine) y esto no es cualquier cosa. 30 horas puede parecer poco, pero con Javier esto adquiere otra dimensión y si, aunque no se lo crean, es básico.

   El programa ha sido extenso e intenso, muy ambicioso y ha desbordado las 30 horas por todos lados. Realizado entre el 08 de mayo y el 12 de junio del 2025 y a buen seguro, este no será el último. Abarca desde Interfaz de Usuario, Navegación y fundamentos 3D en Unreal, Creación de Niveles y Escenarios, Materiales y Texturas, Iluminación, Programación con Blueprints, Interfaz de Usuario (UI), Sonidos y Partículas y finalmente, Animación y Cinemática.

   Bienvenida sean estas iniciativas, otros lo tomen como ejemplo y que se multipliquen en el futuro.

Respecto del curso, vamos con esas "cosillas" que pueden ser de interés y que aparecen en tu día a día.

1.- Rutas importantes (No os perdáis).

Ruta por defecto de la carpeta VAULTCACHE,  donde se instalan los assets desde FAB.

C:/ProgramData/Epic/EpicGamesLauncher/VaultCache/

Ruta por defecto donde se instala el Launcher.

C:\Program Files (x86)\Epic Games

Ruta por defecto donde se instalan las vesiones del motor.

C:\Program Files\Epic Games

 

 2.- Atajos, algunos de los vistos, son interesantes.


Generalidades

ctrl + B -> Asset Actions -> Migrate (en proyecto, buscar carpeta Content), en mi anterior formación este me lo perdí y me hubiera venido de perlas.

alt + F4 -> Matar la aplicación.

ctrl + L -> Control dirección del sol (si, pero la tecla ctrl de la derecha del teclado).

Materiales

C -> en el grafo, cajita de comentarios.

L + botón izq. ratón -> Muestra la luz incidiendo en la muestra de material.

Blueprints

alt + botón izq. ratón -> Elimina línea.

ctrl + botón izq. ratón -> Mueve punto a otro nodo.

Nº atajo + botón izq. ratón -> Pone el nodo correspondiente (a la derecha podemos desplegar y ver los atajos).

Seleccionamos una línea de nodos, pulsamos Q y se alinean los cables (para los ordenados, se recomienda).

ctrl + C y ctrl + V -> Por medio de un archivo .txt y así lo pasamos entre proyectos, los BluePrint, (y esto porqué no me lo enseñasteis antes?, increíble!!!).

IA

P -> Vemos la zona en la que puede desplazarse el enemigo (esto parece evidente, pero a mi me costó encontrarlo).

Viewport

F8 -> Puedo seleccionar en el editor, en play mode cualquier actor del mundo y poder localizarlo en el Outliner (muy interesante).


3.- De todas las carpetas que crea Unreal, unas son importantes y otras, no tanto.

Carpetas Importantes: Config, Content y *.uproject

Carpetas que se pueden eliminar (estas las vuelve a crear, es importante en algunos cuelgues, realizar esta operación): Intermediate, Saved, DerivedDataCache.


4.- El Gizmo, esas flechas de colores.

      En Unreal Engine, el eje X positivo se representa con el color rojo y es el que se considera la dirección Forward por defecto. Por si te interesa el esquema completo del gizmo:

X (rojo): adelante (Forward)

Y (verde): a la derecha (Right)

Z (azul): hacia arriba (Up)


   Este sistema de coordenadas es típico en motores de juegos como Unreal, a diferencia de otros como Unity, donde Forward suele estar en el eje Z.

        Cambiar el punto de pivote de un mesh, podemos hacerlo desde el Modeling Mode -> XForm -> Edit Pivot -> Elegimos la posición nueva que nos interese.


5.- Cuando queremos incluir un video y que se renderice en el juego, pues...

   los videos deben ponerse en la carpeta .../Content/Movies, sino no compila el video (esto lo cuenta Javier, pero otros se lo callan).


6.- Respecto de los materiales.

   Esto no es solo en Unreal, también en Unity y supongo que en la mayoría de los motores. Los materiales se crean basados en unos shaders, estos se escriben en un lenguaje propio llamado HLSL (High-Level Shader Language). En la Programación de shaders: se usa para escribir vertex shaders, pixel shaders y más.


7.- Colocar un objeto en tu personaje.

Abrimos el Skeletal Mesh del personaje. Tienes que ver el Skeleton Tree.

Buscamos el hueso donde queremos poner nuestro objeto (mochila, arma,...), por ejemplo la mano derecha y si no existe el socket (según versiones), lo creamos con botón derecho ratón, Add Socket, sobre el hueso en cuestión.

Sobre el Socket creado, click botón derecho y Add Preview Asset, buscamos y seleccionamos. Resituamos el objeto con las herramientas de transformación y listo.

Ahora, vamos a tu personaje, seleccionamos el Viewport, añadimos un componente de Static Mesh para el objeto y lo arrastramos bajo nuestro Mesh.

En Details de nuestro objeto, seleccionamos el Static Mesh del objeto y buscamos nuestro Parents Socket, anteriormente creado.

Si es necesario, reinicia los valores del Transform, si tu objeto no queda bien situado.

Ahora nuestro personaje porta el objeto, donde le hemos dicho.


8.- Muchas son las cosas que se pueden hacer desde la línea de comando, como botón de muestra.

   En línea consola de comandos, en Unreal, poner HighResShot 2 y toma una imagen de pantalla. Interesante para documentar tu trabajo.

   En línea consola de comandos, en Unreal, poner DumpUnbuiltLightInteractions sirve para identificar qué objetos tienen interacciones de luz sin construir en tu escena.

   En línea consola de comandos, en Unreal, poner DisableAllScreenMessages sirve para ocultar todos los mensajes de texto en pantalla, como los que aparecen con Print String, advertencias de iluminación, o mensajes de depuración durante el juego.


9.- Cuando empaqueto el proyecto para Windows, y quiero personalizar el icono del ejecutable. Después de varios intentos, en diferentes resoluciones, encuentro la solución, la Community es grande. Os lo pongo mas abajo, junto con la aplicación web que he usado para crear el favicon.ico, pero lo mas importante, no os lo vais a creer y es como debeis proceder, borrar la caché de temporales y reiniciar el PC, o no se actualizaran los cambios.


10.- Mixamo.

Descargar de Mixamo un personaje, formato FBX Binary(.fbx) y Pose T-pose y guardamos el personaje.fbx.

Descargamos una animación, formato FBX Binary(.fbx), Skin, Without Skin, Frames por segundo, 30 fps y KeyFrame Reduction, none. En las animaciones Walk, marcar In Place.

Vamos al Content de tu proyecto, creamos una carpeta llamada Characters y 4 subcarpetas: Mesh, Materials, Textures, Animations.

Damos a Import desde la carpeta Mesh y lo primero que añado es el character. Muevo texturas, Materiales y animaciones.

Después, vamos a importar la animación y en la ventana de dialogo decimos a que skeleton pertenece y listo.

Como podemos hacer el retargeting, es decir reorientar los huesos. 

Click derecho en la animación, Retarget Animations, queremos pasar la animación a Manny, autoretargeting y exportamos la animación adaptada, con prefijo MM_, para que coincida con las del personaje receptor, en este caso Manny.


11.- Links de interés.


Recursos

Mixamo, para descargar personajes y animaciones.

Audacity , para editar sonidos, util para pasar a mono y reducir tamaño del audio.

Sonidos libre , para uso particular.

Convierte una imagen en un favicon.ico (es el formato de archivo usado por Unreal para cambiar el icono del ejecutable).


Materiales


How To Create And Use LODs In Unreal Engine 4/5 To Make Your Games Run Smoother.

How To Create Atlas Master Materials in Unreal Engine 5.


Iluminación


Creating Natural Lighting in Unreal Engine: A Step-by-Step Guide.


Landscape


Creating Non-Repeating Landscape Materials in Unreal Engine | Texture Blending & Macro Variations.


Sonidos


Cómo añadir SONIDOS de PISADAS en Tercera Persona en Unreal Engine 5.


Niagara


Cómo crear NIAGARA en forma de static o skeletal MESH en Unreal Engine 5.


IA en Unreal Engine


Inteligencia Artificial en Unreal Engine 5 🤖/ Enemigo que te persigue 🏃🏼 y sigue puntos aleatorios !


UI


Make An Easy WIN and LOSE System For Your Games In Unreal Engine 5 Using Blueprints.

Unreal Engine 5 Health and Damage System Tutorial [2023].


Cinematics


How to Create an Opening Cinematic in Unreal Engine 5

Unreal Engine 5 Beginner Tutorial Part 16 : Cameras, Rig Rail, and Crane

Full Beginner Filmmaking Masterclass for Unreal Engine 5 - Make your First Cinematic.

Cómo Hacer CINEMÁTICAS en UNREAL ENGINE 5 | Principiante (Sequencer UE5).


Sockets


Cómo Añadir y Cambiar Armas en tu Personaje de Unreal Engine 5 (Paso a paso)


Empaquetado


Ojo, si quieres cambiar el icono en el ejecutable, tienes que tener en cuenta esto que se dice aquí.


Documentación, un tema que ha quedado pendiente y fundamental para el control de versiones, sobre todo si trabajas en equipo.


Fundamentos de Git


Sobre la plataforma Android, no llegamos a ver nada, pero me los apunto para verlo en un futuro proximo

Android


Unreal Engine 5.5: Android Target Platform Setup & Build .APK | Step-by-Step Guide


AR Android


AR from scratch in 10 minutes using Unreal Engine 5.3!


12.- El resultado.


🎮 Título del juego: IriaFinalProject: Buscando la Clave 🪐 Género: Aventura musical intergaláctica / Acción rítmica

_

✨ Especial mención.


Los promotores y medios

Incubadora de Realidades Inmersivas de Almendralejo

Plataforma de Capacitación Tecnológica de Extremadura


El Profesor

Javier Jurado Gámez


Los Alumnos

Que viven este camino, con admirable pasión y sacrificio.


sábado, 1 de febrero de 2025

Entre entusiastas y detractores




El uso de la llamada Inteligencia Artificial se está generalizando en el mundo de las marcas y aplicaciones. El tiempo de las versiones Beta a dado paso, masivamente, a las versiones oficiales y no existe hoy en día, una marca que se precie, que no haya incorporado esta tecnología a su buque insignia.

Yo como aficionado a las tecnologías no paro de sorprenderme de la rapidez en su avance y la curiosidad me llama.

Entre entusiastas y detractores no es un artículo que pretende ahondar en la brecha abierta por el uso de estas tecnologías, sino más bien en su buen uso, para el desarrollo de nuevas ideas, provocando el cambio en los modelos de aprendizaje, derribando fronteras y procurando un cambio progresivo y beneficioso al conjunto de la sociedad.

Uno de los grandes miedos hacia esta, podría ser, la dependencia que se crea con su uso generalizado y para ello, nada mejor que el debate abierto y permanente. Una mente lucida, nunca deja en manos de otro, lo que considera importante, al menos sin una correcta supervisión. Y esta, ¿la dejaremos también en manos de la que podiamos llamar "IA vigilante"?.

Para el ejemplo que os traigo he usado Replit, un IDE en la nube que incorpora dos poderosas herramientas basadas en Inteligencia Artificial, Agent y Assistant. No se trata de contar las bonanzas de la aplicación, que sin duda las tiene. Tampoco tengo claro, si lo que hay detrás es unicamente la IA, o un equipo mixto (Humano/Máquina > 1 o Humano/Máquina < 1), así que me gustaría pensar que el merito se debe a su gran equipo humano de desarrollo.

La idea, que no es original pero para mí novedosa y bastante técnica, trata de crear un "input remote" o mando a distancia para un videojuego desarrollado con Unity, utilizando para ello un dispositivo móvil. Como siempre, esto es solo un prototipo de desarrollo, sin animo de lucro, con el foco puesto en el aprendizaje. Todas las herramientas usadas, son solo para uso particular y poder dar una salida a mi inquietud y curiosidad. A continuación os muestro un enlace de YouTube, donde se puede ver en que consiste facilmente Vídeo InputRemote

Las explicaciones y el código que he usado en este desarrollo lo podeis consultar libremente en https://github.com/jmcaneda/MobileJoystickControllerDef

Para llevarla a cabo, he tomado uno de "mis pequejuegos", el que mejor podría adaptarse, desarrollado en Unity.

Vamos a comenzar por a describir el apartado del videojuego con el motor Unity y el código que tiene mas relación con esta idea.

Unity

En la Build Settings

  • Utilizo como plataforma WebGL, que como sabéis significa Web Graphics Library, es una API (interfaz de programación de aplicaciones) utilizada para renderizar gráficos 3D y 2D en navegadores web sin necesidad de plugins y permite a los desarrolladores crear gráficos interactivos y animaciones utilizando JavaScript y el estándar de gráficos OpenGL ES. La mayoria de los navegadores web ya incorporan este framework por defecto.

En Player Settings. Estos parámetros han sido consultados en el manual de Unity https://docs.unity3d.com/2022.3/Documentation/Manual/webgl-deploying.html

  • Compression Format: a Gzip.
  • Data Caching: a check.
  • Decompression  Fallback: a check.

¿Qué nos proporciona la Build?. Las carpetas Build, TemplateData y el archivo index.html. Si comprimimos el conjunto en un archivo .zip y lo subimos a la Plataforma de videojuegos Indie itchio, indicándole que se pueden ejecutar en un navegador web, ya podriamos disfrutar del mismo, utilizando como mando del videojuego, el propio teclado.

Pero..., ¿dónde colocamos todo este código para que podamos ejecutar nuestra aplicación correctamente?. Pues colocamos el resultado de la Build en Unity en la carpeta static del servidor, tal cual, sin modificar nada. ¿Quiere decir esto que si en vez del juego utilizado MaribelProject, lo cambio por otra Build, respetando su ubicación, funcionaría el resto?. La respuesta es si. Podemos reutilizar todo el código y solo, crear nuestro juego y podremos manejar los inputs, desde cualquier dispositivo móvil. Esto es lo fantástico!!!.

Archivos de la Build en Unity


static/Build/
 ├── Builds.data
 ├── Builds.framework.js
 ├── Builds.loader.js
 └── Builds.wasm
 			
static/TemplateData/
├── style.css
└── [assets visuales]
          
index.html

Del código C#, el que mayor interés tiene para la cuestión que estamos tratando es PlayerController.cs, de este extraeremos la parte que nos interesa resaltar. Son la declaración de clases de los diferentes tipos de datos que manejaremos en los diferentes eventos.

void HandleJoystickInput(string jsonData)
En este evento se recibirán los datos x e y del Joystick para el desplazamiento del personaje.
void HandleButtonInput(string jsonData)
En este evento se recibirán los datos state y action, acerca de las teclas pulsadas para el desplazamiento del personaje y visión de cámara.
void HandleInputMethod(string jsonData)
En este evento se recibirá el dato state, sobre el método de input elegido, a off, desde teclado, a on, desde dispositivo móvil.

      
      
      void HandleJoystickInput(string jsonData)
      {
          if (GameManager.instancia.inputRemote)
          {
              JoystickData data = JsonUtility.FromJson(jsonData);
              movement = new Vector3(data.x, 0, data.y) * moveSpeed;

              animator.SetFloat("Horizontal", data.x);
              animator.SetFloat("Vertical", data.y);
          }
      }

      void HandleButtonInput(string jsonData)
      {
          if (GameManager.instancia.inputRemote)
          {
              ButtonData data = JsonUtility.FromJson(jsonData);
              if (data.state == "pressed")
              {
                  switch (data.action)
                  {
                      case "up":
                          {
                              movement = Vector3.forward * moveSpeed;
                              animator.SetFloat("Horizontal", movement.x);
                              animator.SetFloat("Vertical", movement.y);
                              break;
                          }
                      case "down":
                          {
                              movement = Vector3.back * moveSpeed;
                              animator.SetFloat("Horizontal", movement.x);
                              animator.SetFloat("Vertical", movement.y);
                              break;
                          }
                      case "left":
                          {
                              movement = Vector3.left * moveSpeed;
                              animator.SetFloat("Horizontal", movement.x);
                              animator.SetFloat("Vertical", movement.y);
                              break;
                          }
                      case "right":
                          {
                              movement = Vector3.right * moveSpeed;
                              animator.SetFloat("Horizontal", movement.x);
                              animator.SetFloat("Vertical", movement.y);
                              break;
                          }
                      case "A":
                          {
                              break;
                          }
                      case "B":
                          {
                              // Iniciar el desplazamiento a la siguiente esquina
                              GameManager.instancia.indiceEsquinaActual = (GameManager.instancia.indiceEsquinaActual + 1) % GameManager.instancia.esquinas.Length;
                              GameManager.instancia.offset = GameManager.instancia.esquinas[GameManager.instancia.indiceEsquinaActual];
                              break;
                          }
                  }

              }
              else if (data.state == "released")
              {
                  if (data.action != "A" && data.action != "B")
                  {
                      movement = Vector3.zero;
                  }
              }
          }
      }
      
      void HandleInputMethod(string jsonData)
      {
          InputMethodData data = JsonUtility.FromJson(jsonData);
          switch (data.state)
          {
              case "on": GameManager.instancia.inputRemote = true; break;
              case "off": GameManager.instancia.inputRemote = false; break;
          }
      }
      
      [System.Serializable]
      public class JoystickData
      {
          public float x;
          public float y;
      }

      [System.Serializable]
      public class ButtonData
      {
          public string action;
          public string state;
      }

      [System.Serializable]
      public class InputMethodData
      {
          public string state;
      }
    
    

Objeto importante en Unity

En Unity, debe existir el objeto MaribelController y tener como componente, entre otros el script PlayerController.cs

Python y JavaScript

Esta es la parte en la que la asistencia de la IA de Replit, no con pocos intentos en la fase de depuración, facilitó las claves para encaminar este desarrollo, a buen término.

Este proyecto implementa una comunicación bidireccional en tiempo real,       entre un controlador móvil y un juego Unity WebGL, utilizando WebSocket como protocolo de comunicación.


Componentes Principales


Servidor WebSocket (app.py)


Implementado con Flask-SocketIO
Gestiona conexiones y desconexiones
Retransmite eventos entre el controlador y Unity

Cliente Controlador (controller.js)


Implementa la interfaz de usuario del controlador
Captura eventos táctiles y de botones
Emite eventos WebSocket al servidor

Cliente Unity (websocket.js)


Recibe eventos del servidor
Comunica con el juego Unity via SendMessage
Gestiona la conexión WebSocket del lado del juego


Vamos a verlo sobre un diagrama de bloques.



[Dispositivo Móvil] --> (WebSocket) --> [Servidor Flask] --> (WebSocket) --> [Unity WebGL]
     ^                                                                            |
     |                                    Feedback                                |
     +--------------------------------------------------------------------------- +
 			


Partes del código que cabe resaltar



game.html, este es el verdadero contenedor de Unity. Tomamos todo lo que nos interesa del código index.html, de la build de Unity y lo reescribimos en este.


websocket.js, recibe los eventos del servidor y los comunica a Unity vía SendMessage. 


handleGameControl(data) {
        if (!this.gameInstance) {
            console.warn('Game instance not ready, retrying connection...');
            setTimeout(() => this.socket.connect(), 1000);
            return;
        }

        // Send the control data to Unity
        switch(data.type) {
            case 'joystick':
                this.gameInstance.SendMessage('MaribelController', 'HandleJoystickInput', 
                    JSON.stringify(data.data));
                break;
            case 'button':
                this.gameInstance.SendMessage('MaribelController', 'HandleButtonInput',
                    JSON.stringify(data.data));
                break;
            case 'inputMethod':
                this.gameInstance.SendMessage('MaribelController', 'HandleInputMethod',
                    JSON.stringify(data.data));
                break;
        }
}
        

Importante, se puede observar que SendMessage busca un objeto llamado MaribelController y los métodos HandleJoystickInput, HandleButtonInput y HandleInputMethod, incluidos en el componente PlayerController.cs


Error en la versión de producción (Deployments)

Cuando ya disponía de todo el código probado en desarrollo, al pasarlo a producción en Replit (Deployments), se producía un error, que pese a estar documentado en parte en los manuales de Unity, no lo estaba para su uso con servidores Flask. Paso a describirlo, junto con la solución adoptada.

"WebAssembly streaming compilation failed! This can happen for example if "Content-Encoding" HTTP header is incorrectly enabled on the server for file /static/Build/Builds.wasm, but the file is not pre-compressed on disk (or vice versa)".

En app.py podrás ver como se ha resuelto este tema y la clave, en el siguiente código.

    @app.route('/static/Build/')
    def serve_build(filename):
        try:
            response = send_from_directory('static/Build', filename)
            if filename.endswith('.wasm'):
                response.headers['Content-Type'] = 'application/wasm'
                response.headers['Cross-Origin-Embedder-Policy'] = 'require-corp'
                response.headers['Cross-Origin-Opener-Policy'] = 'same-origin'
                response.headers['Cross-Origin-Resource-Policy'] = 'cross-origin'
                response.headers['Cache-Control'] = 'no-cache'
                response.headers['Accept-Ranges'] = 'bytes'
                # Asegurarse de que no haya compresión
                response.direct_passthrough = True
                if 'Content-Encoding' in response.headers:
                    del response.headers['Content-Encoding']
                if 'Content-Length' in response.headers:
                    del response.headers['Content-Length']
            return response
        except Exception as e:
            app.logger.error(f'Error serving {filename}: {str(e)}')
            return str(e), 500
      

Técnica empleada y herramientas adicionales🔧

Asset Store 🏬

He utilizado los siguientes packages de Asset Store, casi siempre en su versión free o con mínima inversión.



Links de interés 🔗

He utilizado los sonidos de nuestro querido "Chiquito de la calzada".

El juego original, sin input remote, en WebGL y teclado, podéis probarlo sin problemas. Este es un videojuego regalo y me sirve como base para el desarrollo de este artículo. Gracias Maribel.

Elementos necesarios 🔑

  • La app requiere un dispositivo móvil, con capacidad para el escaneo de código QR y navegador web, compatible o habilitado para JavaScript (la mayoría ya lo tienen configurado por defecto).
  • La aplicación comenzará con el linkado desde el navegador web, compatible con WebGL (la mayoría ya lo son por defecto). Recomiendo que se realice desde equipo de sobremesa o portátil.
  • Desde el dispositivo móvil escanearemos el código QR y dispondremos el mismo en apaisado. Es importante que veamos el "connected" en verde, esto es indicativo que podemos hacer uso del dispositivo.
  • El foco debe estar puesto en el navegador, esto lo podemos conseguir posicionando el ratón en el mismo. Cambiaremos el input mode, en el dispositivo móvil, de Off a On y ya está, podremos manejar a nuestro personaje "Maribel", en su recorrido por las calles, escuchando los mensajes y procurando no ser convertida por los "UrbanZombies", de dos maneras: como Joystick o por medio de los botones de desplazamiento. El botón "B", esta programado para el cambio de posición de la cámara.
  • Requiere de una conexión a internet.

_

✨ C.A.C. (Soho Málaga), supuso para nosotros (los de entonces), un lugar de encuentro.


lunes, 6 de noviembre de 2023

Un panel que da mucho juego

El panel de sílabas es una herramienta para incorporar en el aula, una forma de hacer que el aprendizaje sea atractivo y entretenido. Está enfocado a los alumnos de primero de primaria.

Al utilizar una estrategia de juego y presentación visual atractiva, la aplicación busca captar la atención de los estudiantes de manera divertida y estimulante.

La aleatoriedad en la selección de las sílabas y la animación colorida al resaltar las sílabas ganadoras añade un elemento de sorpresa y emoción al proceso de aprendizaje. Esto no sólo hace que el aprendizaje sea más interactivo, sino que también puede ayudar a reforzar la atención, memorización y reconocimiento de las sílabas, de una manera más efectiva y amena, contribuyendo a crear una experiencia de aprendizaje más agradable y eficaz.

Se puede utilizar como base para diferentes formatos de aprendizaje. La idea original pretendía el refuerzo en la atención y el reconocimiento de las sílabas, para ello hemos creado como complemento una forma fácil de crear los cartones, en la simulación de un bingo de sílabas.

Estos cartones están en consonancia con el panel de sílabas naturalmente. Es necesaria la actuación para otro conjunto de sílabas. Son fácilmente modificables, con mínimos conocimientos de informática, editando el código y cambiando lo que corresponda, siguiendo una serie de indicaciones. Estas junto el video son suficientes para lograrlo.




El panel de sílabas, podemos modificarlo del modo siguiente:

Abrimos el archivo script.js (no te preocupes es solo un fichero plano y editable con el bloc de notas de windows), lo modificamos y guardamos, sin cambiar el nombre y la extensión. Solo recordad que está diseñado para cuatro filas y cinco columnas.

Esta es la parte modificable del código, solo se tiene que sobreescribir el nuevo conjunto, fácil, verdad?.

const syllables = [
  "pa", "pe", "pi", "po", "pu",
  "la", "le", "li", "lo", "lu",
  "ma", "me", "mi", "mo", "mu",
  "na", "ne", "ni", "no", "nu"
];

Para el caso de los cartones de sílabas, se procederá del siguiente modo:

1. Inicia PowerPoint y en la línea de menú pulsa Vista.
2. Alt-F8 o pulsa ver Macros.
3. Pon nombre a Macro y pulsa Crear.
4. En el menú, ve a Insertar -> Módulo para insertar un nuevo módulo.
5. Copia y pega el código en la ventana del módulo.
6. Pulsa F5 ejecutar.

Parece algo más lioso, pero sigue las instrucciones y visiona el vídeo que te dejo.

Con esto se habrá creado una presentación con 17 cartones para Bingo de Sílabas. El número de 17 es por el número de alumnos del curso de primero de primaria de la persona que ha inspirado esta ayuda, pero esto también se puede modificar, en el caso de necesitar más cartones. Dale a guardar a la presentación y ya dispondrás de las diapositivas para imprimir y repartir.

Las silabas son "pa", "pe", "pi", "po", "pu", "la", "le", "li", "lo", "lu", "ma", "me", "mi", "mo", "mu", "sa", "se", "si", "so", "su", estas evidentemente se pueden cambiar para formar otro juego de sílabas, según se avance en su aprendizaje y de acuerdo con las del panel.

silabas = Array("pa", "pe", "pi", "po", "pu", "la", "le", "li", "lo", "lu", _
                    "ma", "me", "mi", "mo", "mu", "sa", "se", "si", "so", "su")

Como en el caso anterior solo tienes que sobreescribirlas y listo, pero no modifiques ninguna otra parte del código sin conocimiento.

Todo este contenido podrás encontrarlo en el siguiente enlace Panel en GitHub

Eso es todo, espero que haya sido de vuestro interés y sirva para vuestros propósitos. Saludos.


miércoles, 20 de enero de 2021

¿De que hablamos hoy?. Lenguaje HTML, conceptos generales.

 

Lenguaje programación HTML


Orígenes del Navegador y del lenguaje HTML.

   El primer navegador fue desarrollado por Tim Berners-Lee, en la CERN, en 1990; el navegador web llamado WorldWideWeb era bastante sofisticado y gráfico, pero solo funcionaba en estaciones NeXT.

    El origen del lenguaje se remonta a 1991, cuando Tim Berners-Lee lo publicó por primera vez en internet en un documento al que llamó Etiquetas HTML. En ese documento se describen 22 etiquetas que mostraban un diseño inicial y sencillo de este lenguaje. Aún se conservan algunos de estos elementos y muchos otros se han ido incorporando con el paso de los años.

   Son varias las versiones que han existido de HTML desde que se introdujo en Internet. En cada una de ellas se van ampliando y desarrollando nuevas funcionalidades.


Definiciones.

   HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcas de hipertexto’), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.

   Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. HTML se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

   Un navegador web (en inglés, web browser) es un software, aplicación o programa que permite el acceso a la Web, interpretando la información de distintos tipos de archivos y sitios web para que estos puedan ser vistos.

   La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.

   Los documentos que se muestran en un navegador pueden estar ubicados en la computadora donde está el usuario y también pueden estar en cualquier otro dispositivo conectado en la computadora del usuario o a través de Internet y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).

   Tales documentos, comúnmente denominados páginas web, poseen hiperenlaces o hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.

    El seguimiento de enlaces de una página a otra, ubicada en cualquier computadora conectada a Internet, se llama navegación, de donde se origina el nombre navegador (aplicado tanto para el programa como para la persona que lo utiliza, a la cual también se le llama cibernauta). Por otro lado, hojeador es una traducción literal del original en inglés, browser, aunque su uso es minoritario.

      Los navegadores web se han convertido en las herramientas más populares de acceso a Internet. Por esa razón explotar sus vulnerabilidades se han convertido en un objetivo muy interesante para atacar los sistemas informáticos en los que se instalan. Es tal el interés, que se han desarrollado herramientas automáticas para explotar vulnerabilidades en los navegadores.


Funcionamiento de los navegadores.

La comunicación entre el servidor web y el navegador se realiza mediante el protocolo de comunicaciones Hypertext Transfer Protocol (HTTP), aunque la mayoría de los navegadores soportan otros protocolos como File Transfer Protocol (FTP), Gopher y Hypertext Transfer Protocol Secure (HTTPS, una versión cifrada de HTTP basada en Secure Socket Layer —SSL— o Capa de Conexión Segura).

La función principal del navegador es descargar documentos HTML y mostrarlos en pantalla. En la actualidad, no solamente descargan este tipo de documentos sino que muestran con el documento sus imágenes, sonidos e incluso vídeos en transmisión en diferentes formatos y protocolos. Además, permiten almacenar la información en el disco o crear marcadores (bookmarks) de las páginas más visitadas.

Los primeros navegadores web solo soportaban una versión muy simple de HTML. El rápido desarrollo de los navegadores web propietarios condujo al desarrollo de dialectos no estándares de HTML y a problemas de interoperabilidad en la web.

Los más modernos (como Chrome, Amaya, Firefox, Netscape, Opera, Edge e Internet Explorer 9.0) soportan los estándares HTML y XHTML (comenzando con HTML 4.01, los cuales deberían visualizarse de la misma manera en todos ellos).

Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en la web. Su objetivo es crear una web que trabaje mejor para todos, con sitios accesibles a más personas y que funcionen en cualquier dispositivo de acceso a Internet.


¿Qué es una etiqueta?.

   Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares (símbolo < >), cuyo uso es el de escribir código HTML.

   Se diferencian dos tipos de etiquetas:

  1. Etiquetas de apertura <etiqueta>.
  2. Etiquetas de cierre </etiqueta>.


Elementos del lenguaje HTML

Se distinguen varios componentes: elementos y atributos.

  • Elementos: Desarrollan la estructura de las páginas webs. Por ejemplo los elementos h1, h2, h3, h4, h5 y h6 se utilizan para crear encabezados. Por orden jerárquico h1 representa el primer nivel y, normalmente, el texto más grande, h2 es el segundo nivel con un texto algo más pequeño, así hasta llegar al h6 que es el texto más pequeño de todos.
  • Atributos: Los atributos de las etiquetas HTML definen detalles de comportamiento o presentación de la etiqueta donde van colocados. Se escriben dentro de la propia etiqueta con su nombre de atributo y el valor del atributo entre comillas, por ejemplo en la siguiente línea <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>, indica al navegador del tipo que sea móvil o de escritorio, que debe mostrar el contenido, adaptado a la pantalla del dispositivo y a pantalla completa.


Etiquetas básicas (elementos, atributos y valores) y su estructura.


<!DOCTYPE html>

<html>

<head> 

<title> … </title> 

<meta charset=UTF-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<link href="style.css" rel="stylesheet" type="text/css" /> 

</head> 

<body bgcolor=#5d0000 text=#f9e783> 

<script src="script.js"> … </script> 

<font color=#4ff3ff size=16> ... </font> 

<!--...--> 

<b> … </b> 

<s> … </s> 

<u> … </u> 

<i> … </i> 

<a href="URL o #ancla"> … </a> 

<strong> … </strong> 

<br> … </br> 

<h1> </h1> …. <h6> </h6> 

<img src ="img.jpg" title="Nom" align="center" width="120" height="100" border="4" > 

<embed type="video/webm" src="video.mp4" width="400" height="300"> 

<ol type="1"> 

<li> … </li> 

</ol> 

<ul type="circle"> 

<li> … </li> 

</ul> 

<p id="ancla" bgcolor="#0101DF"> … </p> 

<table border="1" width="75%" bgcolor="#0101DF"> 

<caption> … </caption> 

<tr style="color:#2EFEF7" bgcolor="#2E9AFE"> 

<td rowspan="2" colspan="2" align="center"> … </td> 

</tr> 

</table> 

<span> … </span> 

<iframe src="URL" ></iframe> 

<div> … </div> 

</body> 

</html>


Representación del color.

   El color lo representamos en HTML mediante la combinación de dos elementos de los 16 disponibles en el código hexadecimal (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) y para cada uno de los colores fundamentales; 2 para el rojo (rr), 2 para el verde (gg) y 2 para el azul (bb) y escrito con el siguiente formato: #rrggbb, por ejemplo #2EFEF7.

   Existen páginas que te facilitan el código de color hexadecimal, mediante la elección visual en una paleta de colores.


¿Qué es un editor web?.

   Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.

   WYSIWYG, acrónimo de What You See Is What You Get (en español, "lo que ves es lo que obtienes"), es una frase aplicada a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento mostrando directamente el resultado final, frecuentemente el resultado impreso.

   En el caso de editores de HTML, este concepto se aplica a los que permiten escribir la página sobre una vista preliminar similar a la de un procesador de textos, ocupándose en este caso el programa de generar el código fuente en HTML. Se utiliza en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento.


¿Qué es un IDE?.

   Un entorno de desarrollo integrado o entorno de desarrollo interactivo, en inglés Integrated Development Environment (IDE), es una aplicación informática que proporciona servicios integrales para facilitarle al desarrollador o programador el desarrollo de software. Normalmente, un IDE consiste de un editor de código fuente, herramientas de construcción automáticas y un depurador.

La mayoría de los IDE tienen auto-completado inteligente de código (IntelliSense). Algunos IDE contienen un compilador, un intérprete, o ambos, tales como NetBeans y Eclipse; otros no, tales como SharpDevelop y Lazarus.

   El límite entre un IDE y otras partes del entorno de desarrollo de software más amplio no está bien definido. Muchas veces, a los efectos de simplificar la construcción de la interfaz gráfica de usuario (GUI, por sus siglas en inglés) se integran un sistema controlador de versión y varias herramientas.

   Muchos IDE modernos también cuentan con un navegador de clases, un buscador de objetos y un diagrama de jerarquía de clases, para su uso con el desarrollo de software orientado a objetos.


Herramientas digitales propuestas.


   Existen en el mercado multitud de editores web, desde los mas simples (opción prácticamente utilizada por pioneros, profesores, nostálgicos o las tres cosas a la vez), como pueden ser los editores de texto planos p. e.: el editor de texto de Windows, cuya ventaja fundamental es que la de tener el control absoluto sobre lo que escribes, sin ayudas, a otros muchos mas complejos y de funcionalidad mencionadas en el artículo, que proporciona asistencia de código y ftp, control visual y consola para depuración, como puede ser Dreamweaver de Adobe.

   Para el caso que nos ocupa y teniendo en cuenta que queremos mostrar los principios básicos de un lenguaje y dirigido a principiantes, optaremos por las siguientes herramientas: el editor de texto de Windows, herramienta digital básica y el IDE Repl.it, en su versión gratuita, para entender lo que es trabajar en un entorno de desarrollo integrado, a la vez que podemos mostrar nuestro trabajo, alojado en servidores web con carácter publico y por lo tanto accesible.


Propuesta didáctica para el alumnado.

   La propuesta para hoy es la realización de un ejercicio libre (cuyo texto gire entorno a la figura de Tim Berners-Lee, lo que ha supuesto la implementación del lenguaje HTML en la difusión de la WWW y el alcance actual en nuestra sociedad, así como la descripción y uso de las etiquetas básicas mencionadas en este artículo, mediante tablas.

   Para ello se realizará un ejercicio con las herramientas descritas en el apartado anterior, proporcionando el código en un documento HTML, imágenes y enlace al trabajo alojado en el servidor web que nos proporciona Repl.it, subiéndolas a la plataforma habitual, Google Classroom o Moodle, en respuesta a la tarea lanzada.

   La página web deberá contener obligatoriamente en su código fuente:

La mayoría de las etiquetas básicas mencionadas, elementos y atributos, salvo la que tienen que ver con los Script y hojas de estilo CSS, que tiene carácter voluntario (en este caso se deberán entregar los archivos, como parte de la documentación).

Fuente de texto de diferente tipo y tamaño, según requiera por el texto inscrito. 

Listas ordenadas y no ordenadas. 

Inserción de imágenes o vídeos. 

Hipervínculos o enlaces para navegación, tanto en el propio documento como a páginas externas en nueva ventana. 

Tabla con la relación de etiquetas, elementos y atributos, junto con una breve descripción.

 

    El tiempo necesario para la realización del trabajo será de una semana.


Temporalización.

   Entre dos o tres semanas de formación y una semana para la realización del trabajo.


Rúbrica y evaluación.

   Documento para el alumnado, de forma que aporte claridad y que este conozca los principales puntos donde se incidirá a la hora de evaluar el trabajo realizado, ya sea por coevaluación o por evaluación por docente. Se puede utilizar con el complemento CoRubrics, para facilitar la evaluación y la comunicación de resultados.

Enlace a rúbrica , en nueva ventana.


Catalogación

    Curso recomendado: ESO, Bachillerato.

    Asignatura: TIC.

    Competencias clave trabajadas: 

  • Competencia en Comunicación Lingüística.
  • Competencia Matemática y Competencias básicas en Ciencia y Tecnología.
  • Aprender a Aprender.
  • Sentido de la iniciativa y Espíritu emprendedor.
  • Competencia Digital.


Agradecimientos

    Gracias por tu interés en esta recopilación de material educativo. Si lo usas y compartes, no olvides mencionarme por Instagram (@jmcaneda), Twitter (@CanedaPernas) o en mi blog, me hará muchísima ilusión.

   También puedes comentar cual ha sido tu experiencia respecto de su contenido o utilización.

   Recuerda que el contenido pertenece a sus autores y que mi aportación se limita a una reedición de contenidos, estructura, composición y algo de contenido, para presentarlo de forma que sea, en mi opinión, mas entendible y de aplicación con algunas herramientas digitales que considero apropiadas y de utilidad para la mejora en las competencias digitales.


Términos de uso

    Puedes usar este material para uso personal o como inspiración para crear el tuyo personal.

    NO ESTÁ PERMITIDO: vender, comercializar o redistribuir este material.


Atribución, Créditos, Referencias, Notas bibliográficas, Herramientas digitales

Diccionario económico y financiero | Economipedia - Desde https://economipedia.com/definiciones/lenguaje-html.html

Wikipedia - Desde https://es.wikipedia.org/wiki/HTML

Wikipedia - Desde https://es.wikipedia.org/wiki/Navegador_web

Wikipedia - Desde https://es.wikipedia.org/wiki/Editor_de_p%C3%A1ginas_web

Wikipedia - Desde https://es.wikipedia.org/wiki/WYSIWYG

Wikipedia - Desde https://es.wikipedia.org/wiki/Entorno_de_desarrollo_integrado

W3schools.com - Conocimiento sobre HTML Desde https://www.w3schools.com/

OneNote - Preparación, esquema y contenidos.

Repl.it Entorno de Desarrollo Integrado (IDE) OnLine, Multilenguaje y Colaborativo -repl.it

Rúbrica para evaluar una página web” de CeDeC - Desde Banco de rúbricas y otros documentos | Cedec (intef.es) - Desde https://cedec.intef.es/banco-de-rubricas-y-otros-documentos/

Códigos de colores HTML (html-color-codes.info) - Desde https://html-color-codes.info/codigos-de-colores-hexadecimales/