Diseño de aplicaciones en la nube, basadas en IA

0. Motivación
1. Descripción
2. Desarrollo
3. Diccionario técnico
4. Agradecimientos y Fuentes de Información

0) Motivación

al hilo digital forma parte de mi concepto de observatorio, un producto nacido de mis inquietudes y desarrollado a partir de las limitaciones de la pandemia, siempre con un enfoque educativo y con contenido para distintos rangos de edad.

En este artículo quiero explicar, con un lenguaje sencillo, que para obtener un buen rendimiento de las herramientas que nos proporciona la IA, es imprescindible ser precisos y organizados.

Diseñar aplicaciones con vibe coding no es una tarea sencilla.

No basta con lanzar prompts al aire y esperar que el sistema “adivine” lo que queremos.

Sin una arquitectura clara, sin principios básicos y sin un contexto sólido para el Agent, el resultado es un proyecto que avanza a golpes de improvisación: ahora esto, ahora aquello, sin ton ni son.

Mi Observatorio es el ejemplo elegido para aplicar esta filosofía, no improvisar, de construir un sistema modular, gobernado y sostenible.

Y estos dos documentos — replit.md y procedimiento.md — son la prueba de ese método:

no son código, son criterio, la base que permite que un proyecto crezca sin romperse.

1) Descripción

Mi Observatorio es un observatorio urbano desarrollado al 100% con el Agent de Replit, bajo mi dirección, basado en 20 widgets o tarjetas configurables en un dashboard, que muestran información de interés en diferentes ámbitos y circunscrito a nivel nacional (me encanta aquello donde dice: Mi Observatorio — Hecho con ♡ en España).

Es un producto SaaS modular, es decir, una aplicación en la nube construida como un conjunto de módulos independientes, coherentes y actualizables, que funcionan juntos sin romperse.

Puedes encontrarlo en la siguiente dirección web y probarlo sin problemas, eso si a pesar de su buena apariencia, no hay un solo mes que no tenga que corregir algun bug, alguna caida de servicio, una tarjeta que no responde o no responde con lo esperado, requiere un mantenimiento y dedicación:

https://mi-observatorio.replit.app/

Cada tarjeta es un microservicio visual que:

• Consume una fuente de datos externa (API, scraping ligero, dataset propio).
• Procesa la información.
• La muestra en un formato compacto y visual.
• Se actualiza de forma independiente.

Esto sigue el patrón de diseño de un Urban Data Observatory, pero llevado a un formato personal, ligero y configurable.

En resumen, es un ecosistema de 20 micro‑observatorios, cada uno con su propia lógica.

1.a) En Mi Observatorio hay tres enfoques fundamentales

1.a.1) Modularidad real

Cada tarjeta es independiente.

Esto permite añadir, quitar o mejorar widgets sin afectar al resto.

1.a.2) Fuentes de datos heterogéneas

Se combinan:

APIs oficiales, APIs abiertas, Scraping ligero, Datasets propios, Fuentes nacionales e internacionales.

1.a.3) Diseño compacto y claro

Las tarjetas son:

Minimalistas, Rápidas de leer, Consistentes, Adaptadas a dispositivos móviles.

1.b) Dos herramientas fundamentales en Mi Observatorio

Diseñadas para que el Agent IA trabaje dentro de un sistema, con reglas, y no improvisando.

1.b.1) replit.md — La Arquitectura

• Visión general del proyecto
• Estructura del proyecto
• Servicios Backend
• Servicios Frontend
• Base de datos
• Ciclo de vida de un módulo nuevo
• Versionado
• Reglas de calidad
• Problemas conocidos y soluciones

1.b.2) procedimiento.md — El Método

• Principios del proyecto
• Reglas para integrar datos
• Contrato backend
• Contrato frontend
• Ciclo de vida de un módulo nuevo
• Sincronización dev → prod
• Reglas de calidad
• Errores comunes y cómo evitarlos
• Checklist antes de merge
• Checklist para integrar un módulo nuevo

2) Desarrollo

Ha sido toda una experiencia.

Ya conocía la herramienta: este IDE en la nube que me ha acompañado en muchos momentos.

Le debo cosas importantes, como haber servido de plataforma de enseñanza para una de mis hijas —HTML, CSS y JavaScript—, algún artículo y también para otros tantos experimentos con distintos lenguajes de programación.

Todo eso ocurrió antes de la IA, antes de que la empresa adoptara los modelos LLM como motor principal, como tantas otras, donde los lenguajes generativos han hecho su agosto.

Y no es malo, al menos en algunos aspectos.

Pero no debemos olvidarlo:

Las calles se pueden limpiar con máquinas,
pero para eso, las calles deben estar bien diseñadas.

Ahí es donde empieza la verdadera idea de una planificación correcta, la auténtica labor del ingeniero.

Porque la IA puede acelerar, puede ayudar, puede automatizar…, pero no puede sustituir el diseño, ni la arquitectura, ni el criterio.

Ese sigue siendo nuestro trabajo, me refiero a la parte humana.

En el formato empleado, es fácil seguir las reglas: en cierto modo, la base se repite.

Con un método de desarrollo claro, la dificultad y los verdaderos problemas se reducen a elegir buenas fuentes de datos: coherentes, honestas y actualizables.

El caparazón es común para casi todas las aplicaciones.

Y he de ser honesto: para esta aún me faltan muchas mejoras, pero incluso así, me parece un resultado muy respetable.

2.a) El caparazón

• Reglas para usuarios: cuentas, control de sesiones.
• Reglas para administradores: herramientas de mantenimiento.
• Panel de configuración: opciones, selección de widgets…
• Actualización de datos: fundamental cuando el sistema se pone tozudo.
• Temas: cómo quieres verlo, la UI.
• Créditos: explicación, contacto, o sea, yo.
• Privacidad: imprescindible si se piden permisos o se gestionan datos personales.
• Ayuda y versionado: aquí me he explayado; cuento cómo ha crecido la idea.
• Sistema de avisos: necesario para comunicar nuevas versiones, paradas, incidencias…

A futuro, ¿qué me quedaría?, entre otros:

• Sistema de alarmas: necesario para que no se te pase nada de nada.
• Más widgets: muchos más widgets.
• Relación de mecenazgo: lo más probable es que esta experiencia termine con mis ahorros.
• Y otros: ideas que irán apareciendo con el tiempo.

2.b) El alma: los widgets o tarjetas

Esto se repite en cada nuevo widget, es como un mantra.

Empiezas cada widget recordando replit.md y procedimiento.md, porque el Agent necesita contexto para comportarse como un ingeniero, no como un generador de código suelto.

Recordarle los documentos al Agent es tu forma de decir:

  “Este proyecto tiene reglas. No improvises. Construye dentro del sistema.”

¿Y cómo terminas?, pués Depurando bugs.

En cada nuevo widget la IA suele dejar un rastro de incorrecciones e incumplimientos de las reglas. Hay que estar atento y validar la información: en ocasiones hardcodea datos, los embebe en el código o usa fallbacks de primera sin criterio.

Regla de oro: nunca dés por bueno lo hecho por la IA.

Revísalo, ponlo a prueba, somételo a método.

Y entre medias, el desarrollo de cada widget: su núcleo gordiano, el punto donde se resuelve la complejidad y se define su comportamiento real.

Vamos a enumerar ciertos aspectos repetitivos respecto de este asunto:

2.b.0) Investigar, observar, coger ideas

Antes de escribir una línea de código, toca mirar alrededor: qué existe, qué funciona, qué inspira.

2.b.1) Elegir la fuente de datos

Fiable, pública y actualizable, a ser posible.

El ciclo de vida de los datos es tan importante como el widget en sí.

2.b.2) Método para obtener la información

API, scraping ligero o dataset propio.

Cada fuente exige un tratamiento distinto y unas reglas distintas.

2.b.3) Estructura de datos a utilizar

Normalmente un modelo JSON, claro y coherente.

Si la estructura falla, el widget falla.

2.b.4) Un layout aproximado

La IA suele tener patrones de diseño de UI muy avanzados, pero conviene marcar un esquema previo para evitar improvisaciones visuales.

2.b.5) Probar y probar

Hasta quedarse conforme.

La prueba es el filtro que separa un módulo funcional de un módulo que solo “parece” funcionar.

2.c) Una reflexión necesaria: el papel del criterio humano

Trabajar con IA en el diseño de aplicaciones en la nube te obliga a recordar algo esencial:

la IA no entiende el proyecto, entiende instrucciones, el proyecto lo entiendes tú.

Por eso, aunque el Agent pueda generar código, sugerir estructuras o acelerar tareas, hay un punto donde siempre aparece la diferencia entre un sistema improvisado y un sistema bien diseñado: el criterio.

• La IA no sabe si una fuente de datos es honesta.
• No sabe si un widget rompe la coherencia visual.
• No sabe si un fallback es aceptable o si está ocultando un error grave.
• No sabe si un dato embebido en código es un parche o un problema futuro.

Ese juicio es humano.

Y aquí aparece la aportación clave:

la IA no sustituye la ingeniería, la amplifica.

Cuando tienes un método, cuando defines reglas, cuando documentas, cuando revisas…, la IA se convierte en una herramienta potentísima.

Pero sin ese método, sin ese criterio, sin ese caparazón, la IA solo genera ruido.

Por eso este tipo de proyectos —como Mi Observatorio— son tan valiosos:

demuestran que la IA funciona mejor cuando trabaja dentro de un sistema, no cuando improvisa fuera de él.

En el fondo, diseñar aplicaciones en la nube basadas en IA es un ejercicio de equilibrio:

entre automatización y criterio, entre velocidad y estructura, entre potencia y responsabilidad.

Ese equilibrio es, precisamente, lo que convierte un experimento en un producto.

3) Diccionario técnico del artículo

Este diccionario recoge los términos técnicos usados en el artículo, con su equivalente universal cuando existe, y una explicación sencilla para lectores no versados.

• Agente / Agent

Universal: AI Agent

Sistema de IA que ejecuta tareas siguiendo instrucciones y contexto.

En el artículo, es el motor que construye los widgets y necesita reglas claras para no improvisar.

• IDE en la nube

Universal: Cloud IDE

Entorno de programación accesible desde el navegador, sin instalación.

Replit es el IDE que usas para enseñar, experimentar y desarrollar Mi Observatorio.

• LLM

Castellanizado: Modelo de lenguaje

Universal: Large Language Model

Modelo de IA capaz de generar texto, código y razonamiento.

En el artículo, describes cómo Replit adoptó LLMs como núcleo de su plataforma.

• SaaS

Castellanizado: Software como servicio

Universal: Software as a Service

Aplicación que funciona en la nube, sin instalación, siempre actualizada.

Mi Observatorio es un SaaS modular.

• Widget / Tarjeta

Universal: Widget / Card Component

Pequeño módulo visual que muestra información concreta.

En tu proyecto, cada widget es un micro‑observatorio con su propia lógica.

• Microservicio

Universal: Microservice

Pequeña pieza de software independiente que realiza una función concreta.

Cada widget de Mi Observatorio actúa como un microservicio visual.

• Backend

Universal: Backend

La parte del sistema que procesa datos, llama APIs y prepara la información.

En tu proyecto, cada widget tiene su propio servicio backend.

• Frontend

Universal: Frontend

La parte visual del sistema: lo que el usuario ve y toca.

Tus widgets tienen una UI minimalista y compacta.

• API

Castellanizado: Interfaz de programación de aplicaciones

Universal: API

Puerta de acceso a datos externos.

Tus widgets consumen APIs oficiales, abiertas y heterogéneas

• Scraping / Scraping ligero

Castellanizado: Raspado web

Universal: Web Scraping

Técnica para extraer datos de páginas web cuando no existe API.

En tu proyecto lo usas de forma ligera y controlada.

• Dataset

Castellanizado: Conjunto de datos

Universal: Dataset

Archivo estructurado con datos organizados.

Algunos widgets usan datasets propios.

• Fallback

Castellanizado: Valor de reserva

Universal: Fallback

Dato alternativo que se usa cuando la fuente principal falla.

La IA tiende a usar fallbacks sin avisar, por eso deben controlarse.

• Hardcodear

Universal: Hardcoding

Incluir datos fijos dentro del código en lugar de obtenerlos dinámicamente.

La IA suele hacerlo y es una de las cosas que siempre hay que revisar.

• UI

Castellanizado: Interfaz de usuario

Universal: User Interface (UI)

Aspecto visual de la aplicación: colores, temas, disposición.

Tus widgets tienen una UI minimalista y coherente.

• Versionado

Universal: Versioning

Proceso de registrar cambios y evoluciones del proyecto.

En tu artículo explicas cómo documentas la historia del Observatorio.

• Mecenazgo

Universal: Patronage / Sponsorship

Apoyo económico voluntario para sostener un proyecto.

Lo mencionas como posible vía futura para mantener el Observatorio.

• Núcleo gordiano

Universal: no tiene equivalente directo

Metáfora que describe el punto crítico donde se concentra la complejidad de un widget: lógica, datos, reglas y validación.

Es el lugar donde realmente “se decide” si el módulo funciona.

• Layout

Castellanizado: diseño de disposición

Universal: Layout

Estructura visual de un widget: cómo se organizan los elementos, bloques, tarjetas y datos.

La IA suele proponer layouts avanzados, pero conviene definir uno previo para evitar improvisaciones visuales.

• Modelo JSON

Universal: JSON data model

Formato estándar para representar datos estructurados.

Es la base de casi todos los widgets del Observatorio.

• Ciclo de vida de los datos

Universal: Data lifecycle

Proceso completo que siguen los datos: creación, actualización, caducidad y reemplazo.

Elegir fuentes con buen ciclo de vida es clave para que un widget no quede obsoleto.

• Depurar bugs

Universal: Debugging

Proceso de encontrar y corregir errores en el código o en la lógica del widget.

Es el paso final de cada módulo y donde más se nota la intervención humana.

• Mantra de desarrollo

Universal: no tiene equivalente directo

Conjunto de pasos repetitivos que se siguen en cada widget: reglas, contexto, datos, layout, pruebas.

Es la forma de evitar improvisación y mantener coherencia en todo el sistema.

4) Agradecimientos y Fuentes de Información

Mi Observatorio no existiría sin el trabajo, la constancia y la transparencia de decenas de instituciones, organismos, medios y servicios públicos, que ofrecen datos abiertos, actualizables y de calidad y otros en el ámbito privado, igualmente necesarios. A todas ellas, gracias.

A continuación se enumeran las fuentes de información utilizadas, organizadas por temática para facilitar su consulta:

📰 Medios de comunicación (nacionales, regionales e internacionales)

20 Minutos (todas sus ediciones: Andalucía, Aragón, Asturias, Baleares, Barcelona, Canarias, Cantabria, Castilla y León, Castilla-La Mancha, Extremadura, Galicia, Internacional, La Rioja, Madrid, Murcia, Nacional, Navarra, País Vasco, Valencia, Viajes y Aviación)

ABC España, ABC Internacional

Diario Sur

Diario de Sevilla

El Mundo España

El País España, El País Internacional

Europa Press Andalucía, Europa Press Extremadura

Genbeta

Hipertextual

La Vanguardia Barcelona

Xataka

🌦️ Meteorología, clima y medio ambiente

AEMET Avisos

AEMET OpenData

Meteoalarm

Open-Meteo Air Quality (CAMS)

Open-Meteo Forecast API

Open-Meteo Marine API

OpenWeatherMap

Infomedusas (IEO)

MedusApp

MITECO Boletín

MITECO — Red de Parques Nacionales

SAIH

SICA — Mapa Estratégico de Ruido

ADEAC — Banderas Azules España

Punt d'Informació Aerobiològica (PIA)

🚦 Movilidad, transporte y tráfico

DGT Incidencias

Renfe AVE/LD GTFS-RT

Renfe Cercanías GTFS-RT

AENA Noticias Aviación

📊 Economía, finanzas y energía

BCE — Euríbor 12 meses

Banco de España — BExplora (Tipo hipotecario)

Frankfurter API — Tipos de Cambio (BCE)

Yahoo Finance — Gas Natural TTF (TTF=F)

Yahoo Finance — Petróleo Brent (BZ=F)

Yahoo Finance — Índices Bursátiles

REE ESIOS — Mix de Generación

REE ESIOS — Precios Electricidad

Portal Estadístico del Notariado

España Stats — Estadísticas Inmobiliarias

INE — IPC General (variación anual)

🏀⚽ Deportes

API-SPORTS Women Basketball

ESPN Women Football

TheSportsDB

📚 Cultura, libros y divulgación

Google Books

Open Library

Blog Casa del Libro

OMDb API (Open Movie Database)

🌌 Ciencia y astronomía

NASA — Astronomy Picture of the Day (APOD)

CAHA — RSS Noticias

IAC — RSS Noticias

OAN — Observatorios Astronómicos (BD)

OAN — RSS Noticias

💧 Recursos hídricos

Embalses.net

iAgua DATA

Cada una de estas fuentes aporta una pieza del puzzle que hace posible Mi Observatorio:

datos fiables, públicos, actualizables y con un ciclo de vida adecuado para construir widgets sólidos y útiles.

Sin ellas, este proyecto no tendría sentido, ni habría sido posible

🧩 Las IAs usadas en este proyecto, como no mencionarlas, Replit (mi par en este desarrollo) y Copilot (ayuda a la redacción y generación de imágenes).

📜 Esto es solo un proyecto formativo

    Sin ánimo de lucro, por lo que si lo considerais útil en parte o en su totalidad, solo os 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 IA (Inteligencia Artificial).

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

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.

Preparemos nuestro entorno Win42

Ventana Shell, Vim y código "Hello World"

    Esta es una guía para los no iniciados en el mundo de la programación. Pretende dar las pautas para la creación de un entorno de trabajo similar al disfrutado en #42MálagaFTef (febrero 2022), pero bajo el sistema operativo Windows.

    Básicamente consiste en disponer de un terminal, en el que podamos ejecutar desde la línea de comandos Shell / Bash, Git, para el control de versiones en repositorios, Vim, como editor de texto y gcc, como compilador de C. Intentemos aclarar un poco todo esto.

    Algo de historia para comprender mejor lo que queremos hacer. Pensemos en un entorno Linux, consultando a la fuente Linux handbook nos dice que un Shell es un intérprete de línea de comandos, es decir que acepta y ejecuta comandos. Cuando abrimos un terminal en Linux, ya está ejecutando el shell predeterminado de su sistema. Bash suele ser el shell predeterminado en la mayoría de las distribuciones de Linux, razón por la cual vemos a bash como sinónimo de shell. Ya está, hemos comprendido algo importante, ¿te sientes diferente?, pues esto no es nada.

    Que podemos hacer desde la línea de comandos, bastantes cosas como crear directorios y archivos, realizar búsquedas, listar contenidos, editar propiedades de los archivos, crear y ejecutar script de shell, …, crear archivos de código y es aquí donde queríamos llegar.

    Antes de tirarnos a la piscina para empezar a escribir código, necesitamos conocer una herramienta que nos permita el trabajo en equipo y ¿porqué?, si yo me basto solo. Ahí es donde te equivocas, la programación requiere de colaboración, trabajo en equipo y mas al principio, siempre necesitaras ayuda, la de tu par, compañero de viaje, experto en el que inspirarte o 'San Google'.

    ¿Qué es git?, buena pregunta. Es un sistema para el control de versiones. Digamos que cuando estas trabajando en equipo y alguien comienza un proyecto, se ha de trabajar de forma coordinada, evitando en lo posible 'accidentes o solapamientos innecesarios' para no desperdiciar nuestro bien mas preciado, el tiempo. Git contempla unos cuantos comandos para realizar su función, ya los consultarás, ahora lo importante es que comprendas que con 'git init' creamos el contenedor de trabajo o repositorio y en él, se llevará la cuenta de todas las versiones 'stayed'. Un repositorio es por tanto un contenedor del proyecto. Estos pueden estar en local o en la nube, el mas conocido para este último es github.com. Un archivo interesante en los repositorios es el archivo oculto '.gitignore', en el se detallan todos los archivos que queremos excluir del comando 'git push', en definitiva archivos sin interés o que queremos preservar. Existen muchas plantillas para la creación de este archivo y dependerán de los entornos de trabajo.

    Hasta aquí todo lo que tiene que ver con el entorno de trabajo, pero ¿dónde escribimos nuestro código?. Necesitamos un editor de texto preparado para la escritura de código, es decir que distinga en la escritura, que es una variable, su valor, comandos, constantes,…, esta herramienta es Vim y se incluye de serie en sistemas UNIX y OS X, así como un interprete de lo escrito, de forma que podamos convertirlo al lenguaje máquina y poder ejecutarlo.

    Esto es gcc, son las siglas de 'GNU Compiler Collection' y distribuida bajo licencia general pública GPL. Originariamente su denominación era 'GNU C Compiler', pero con el tiempo esta se extendió a otros lenguajes como C++, Fortram, Ada., lo que lo llevó al cambio de denominación. Con el compilador convertimos los archivos de texto (código legible) en archivos ejecutables (código máquina, no legible), o lo que es lo mismo en unos y ceros.

    Y ya estamos en el meollo del artículo!!!. Acudimos a msys2.org, en esta web podemos encontrar MSYS2, es una colección de herramientas y bibliotecas que nos proporciona todo lo necesario, descrito anteriormente para ejecutarlo bajo Windows.

    Descargamos el instalador msys2-x86_64-20220128.exe, versión para sistemas operativos Windows 7 de 64 bits o posterior. Ejecutamos el instalador y aceptamos las opciones recomendadas. Al termino podemos lanzar MSYS2 y nos abrirá el terminal. Esta ventana de aspecto rudimentario será donde nos movamos a partir de ahora. Pero antes de empezar debemos actualizar la base de datos de los diferentes paquetes.

En línea de comando ejecutamos lo siguiente:

$ pacman -Syu  (al término seguimos con la línea siguiente)

$ pacman -Su (solo queda instalar gcc)

$ pacman -S --needed base-devel mingw-w64-x86_64-toolchain

'Et voilà', pero ¿ya lo tenemos todo?, no. Aún nos faltan cosillas: Git y Vim.

$ pacman -S vim (ya tenemos nuestro editor de código)

$ pacman -S git (ya tenemos nuestro control de versiones)

Ahora si, ya lo tenemos y funciona.

    Lo mas probable es que, con el tiempo, al escribir código algo mas complejo mas allá del 'Hello World' y ejecutarlo os den los temidos errores: 'Bus error' o 'Segmentation fault', …, bienvenido al mundo <code>.

¿De que hablamos hoy?. CO2, definición, origen, usos y consecuencias.

Objetivo.

   Esta microfromación tiene por objetivo dar a conocer este compuesto químico: CO₂, junto con su definición, origen, usos y consecuencias para con el Medio Ambiente.

Definición.

   El dióxido de carbono (fórmula química CO₂) es un gas incoloro. Antes de las normas de la IUPAC de 2005, era también conocido como anhídrido carbónico. Este compuesto químico está compuesto de un átomo de carbono unido con enlaces covalentes dobles a dos átomos de oxígeno. El CO₂ existe naturalmente en la atmósfera de la Tierra como gas traza en una fracción molar de alrededor de 400 ppm. La concentración actual es de alrededor 0,04 % (420 ppm) en volumen, un 45 % mayor a los niveles preindustriales de 280 ppm.

Origen.

   Fuentes naturales incluyen volcanes, aguas termales, géiseres y es liberado por rocas carbonatadas al diluirse en agua y ácidos.

   Dado que el CO₂ es soluble en agua, ocurre naturalmente en aguas subterráneas, ríos, lagos, campos de hielo, glaciares y mares.

   Está presente en yacimientos de petróleo y gas natural.

   El CO₂ atmosférico, es la principal fuente de carbono para la vida en la Tierra y su concentración preindustrial desde el Precámbrico tardío era regulada por los organismos fotosintéticos y fenómenos geológicos. Como parte del ciclo del carbono, las plantas, algas y cyanobacterias usan la energía solar para fotosintetizar carbohidratos a partir de CO₂ y agua, mientras que el O₂ es liberado como desecho.​ Las plantas producen CO₂ durante la respiración.​

   Es un producto de la respiración de todos los organismos aerobios. Regresa a las aguas gracias a las branquias de los peces y al aire mediante los pulmones de los animales terrestres respiradores, incluidos los humanos. Se produce CO₂ durante los procesos de descomposición de materiales orgánicos y la fermentación de azúcares en la fabricación de vino, cerveza y pan. También se produce por la combustión de madera (leña), carbohidratos y combustibles fósiles como el carbón, la turba, el petróleo y el gas natural.

Usos.

   Es un material industrial versátil usado, por ejemplo, como un gas inerte en soldadura y extintores de incendio, como presurizador de gas en armas de aire comprimido y recuperador de petróleo, como materia prima química y en forma líquida como solvente en la descafeinización y secador supercrítico. 

   Se agrega a las bebidas y en gaseosas incluidas la cerveza y el champán para agregar efervescencia. Su forma sólida es conocida como "hielo seco" y se usa como refrigerante y abrasivo en ráfagas a presión.

Consecuencias del aumento de su concentración en la atmósfera.

El dióxido de carbono es un importante gas de efecto invernadero. La quema de combustibles de carbono desde la Revolución Industrial ha aumentado rápidamente su concentración en la atmósfera, lo que ha llevado a un calentamiento global.

   La paralización que ha supuesto para la actividad humana la pandemia por Covid-19, ha influido en su ritmo de crecimiento, siendo una buena muestra de nuestra influencia en el fenómeno.

Detección y cuantificación.

   El dióxido de carbono puede ser detectado cualitativamente en la forma de gas por la reacción con agua de barita (Ba(OH)₂) con la cual reacciona formando carbonato de bario, un precipitado blanco insoluble en exceso de reactivo pero soluble en soluciones ácidas. La cuantificación de dióxido de carbono se hace por métodos ácido-base en forma indirecta y por métodos instrumentales mediante infrarrojo.

Unidades de medida, definiciones, equivalente de CO₂, Índice GWP.

   Repasemos algunas de las unidades y formulas que son de interés para comprender el estudio que queremos hacer.

   Partes por millón (ppm) es una unidad de medida con la que se mide la concentración. Determina un rango de tolerancia. Se refiere a la cantidad de unidades de una determinada sustancia (agente, etc.) que hay por cada millón de unidades del conjunto.

   Es un concepto homólogo al de porcentaje, solo que en este caso no es partes por ciento sino por millón.

1 ppm = 1 ml/m³

1.000.000 ppm = 100% en volumen, p.e.: 420 ppm = 0,042% en volumen

   El volumen molar de una sustancia, simbolizado Vm, es el volumen de un mol de esta. La unidad del Sistema Internacional de Unidades es el metro cúbico por mol: m³/mol.

   Un mol de cualquier sustancia contiene partículas. En el caso de sustancias gaseosas moleculares un mol contiene NA moléculas. De aquí resulta, teniendo en cuenta la ley de Avogadro, que un mol de cualquier sustancia gaseosa ocupará siempre el mismo volumen (medido en las mismas condiciones de presión y temperatura).

   La ecuación que describe normalmente la relación entre la presión, el volumen, la temperatura y la cantidad (en moles) de un gas ideal es: P V = n R T , donde Presión absoluta (P), Volumen (V), moles del gas (n), constante universal de los gases ideales ( R), temperatura absoluta (T).

Volumen molar (Vm) = V/n = (R T)/P

   Experimentalmente y mediante la ley de los gases ideales, se ha podido comprobar que el volumen que ocupa un mol de cualquier gas ideal en condiciones estándar (Presión de 10⁵ pascales (1 bar), Temperatura de 273,15 K, 0 °C) es de 22,7 litros. Si se utiliza como presión 1 Atm (101325 Pa) en vez de 1 bar, este valor cambia y es 22,4 L (22.3983 L para ser más específicos). Este valor se conoce como volumen molar normal de un gas. También por tanto para el CO₂ = 22,4 L.

   La masa atómica del carbono (C) es 12 g/mol; para el oxígeno (O) es de 16 g/mol. Esto significa que 6.022 x 10²³ átomos de carbono pesan 12 gramos.

   Según esto, el peso molecular del CO₂ es: 12 g/mol [C] + 2 x 16 g/mol [O₂] = 44 g/mol.

Relación ppm (x) y mg/m³ (y)

(CO₂ a 25º y 1 atm) => Vm = 24,4 [L/mol] , x [ppm] = (y [mg/m³] x 24,4 [L/mol]) / 44 [g/mol] CO₂

   Así podríamos determinar y escenificar, ¿Qué volumen ocupa una tonelada (1.000.000 g) de CO₂ en condiciones normales?. Tiene un volumen de 509.400 L (1.000.000 [g] x 22,4 [L/mol])/ 44 [g/mol]. 

   Esto corresponde aproximadamente al volumen de una piscina de 10 m x 25 m x 2 m.

   El equivalente de CO₂ o equivalente de dióxido de carbono (CO₂eq o Carbon Dioxide Equivalent, en inglés), es una medida en toneladas de la huella de carbono. Huella de carbono es el nombre dado a la totalidad de la emisión de gases de efecto invernadero.

   La masa de los gases emitidos es medida por su equivalencia en CO₂ (dióxido de carbono).

   El CO₂ es el más conocido y es también la referencia del resto de los gases de efecto invernadero, a los que se considera causantes del calentamiento del planeta. Como unidad se utiliza tCO₂eq que supone un volumen de emisión de gas de efecto invernadero equivalente a una tonelada de CO₂.

   Se elige el CO₂ como el equivalente al total de los gases de efecto invernadero porque, a pesar de tener un potencial de calentamiento mucho menor que el de otros gases, como el metano o los óxidos nitrosos, es el que más crecimiento ha experimentado en la atmósfera terrestre y el más abundante en porcentaje de todos ellos.

   Dicha medida de CO₂ equivalente es usada para calcular la Huella de Carbono de un individuo, producto, actividad o servicio. De esta manera se puede cuantificar un impacto ambiental atendiendo a la categoría de calentamiento global provocado por la emisión de gases de efecto invernadero.

   Los gases de efecto invernadero distintos del dióxido de carbono (metano, óxido nitroso, hidrofluorocarburos, etc.) son convertidos a su valor equivalente en dióxido de carbono, multiplicando la masa del gas en cuestión por su Potencial de calentamiento global (GWP).

   P.e.: El metano es un gas con efecto invernadero potente que contribuye al calentamiento global del planeta Tierra, ya que tiene un potencial de calentamiento global (GWP) de 28, según la última evaluación (Fifth Assessment Report, AR5). Esto significa que en una media de tiempo de 100 años, cada kg de CH4 calienta el planeta Tierra 28 veces más que la misma masa de CO₂.

   Se ha calculado que la emisión de gases efecto invernadero de la India al año supone 1 tCO₂eq per cápita, la de Europa 10 tCO₂eq y un estadounidense más de 20 tCO₂eq per cápita.

   Índice GWP (acrónimo del inglés Global-warming potential - GWP = Potencial de calentamiento global) es una medida relativa de cuánto calor puede ser atrapado por un determinado gas de efecto invernadero, en comparación con un gas de referencia, por lo general dióxido de carbono.

   El potencial de calentamiento GWP para otros gases, puede ser calculado para periodos de 20, 100 o 500 años, siendo 100 años el valor más frecuente. Así, el dióxido de carbono tiene un valor GWP de 1.

Casos prácticos de utilización del CO₂.

   Ahora que ya conocemos algo mas sobre este compuesto, vamos a ver como participa en dos casos prácticos diferentes, en el primero mostraremos como la medición del CO₂ puede darnos información sobre la calidad del aire en el interior de las salas y el segundo veremos que es la reacción de Sabatier y cual es su papel en la generación de oxigeno en la ISS (Estación Espacial Internacional).

Primer caso, calidad del aire en ambientes interiores, medición concentración de CO₂.

   Todos sabemos que el riesgo de contagio de Covid-19 en ambientes interiores es superior al riesgo en el exterior. Por tanto, las actividades en exterior son siempre preferibles.

   En ambientes interiores, las partículas en suspensión, también llamadas aerosoles, susceptibles de contener virus, se pueden acumular. De la exposición a este aire pueden resultar infecciones. La reducción del riesgo de contagio se consigue reduciendo emisión y exposición.

   La emisión se puede reducir mediante:

• Disminución del número de personas.
• Silencio o volumen de habla bajo (al hablar fuerte o gritar la emisión es 30 veces superior).
• Actividad física relajada (al aumentar intensidad de actividad se aumenta la emisión).
• Uso de mascarilla bien ajustada.

   La exposición se puede reducir mediante:

• Uso de mascarilla bien ajustada, incluso en ausencia de otras personas si estas han abandonado la sala muy recientemente.
• Reducción del tiempo de exposición.
• Aumento de la distancia interpersonal.
• Ventilación o purificación del aire, para eliminar o reducir la concentración de virus en el aire.

   Y en esta última se basa el estudio de este primer caso.

   La renovación de aire se puede denominar por sus siglas en inglés ACH, Air Changes per Hour. Si un espacio tiene 1 ACH (1 renovación de aire por hora) significa que en una hora entra en la sala un volumen de aire exterior igual al volumen de la sala y debido a la mezcla continua del aire, esto resulta en que el 63% del aire interior ha sido reemplazado por aire exterior. Con 2 renovaciones se reemplaza el 86% y con 3 renovaciones el 95%.

   La ventilación necesaria para reducir el riesgo de contagio depende del volumen de la sala, el número y la edad de los ocupantes, la actividad realizada, la incidencia de casos en la región y el riesgo que se quiera asumir.

   La guía de Harvard recomienda 5-6 renovaciones de aire por hora para aulas de 100 m², con 25 estudiantes de 5-8 años, y establece esta clasificación:

6 IDEAL, 5-6 EXCELENTE, 4-5 BUENO, 3-4 MÍNIMO, menos de 3 BAJO.

Otra forma de medir la ventilación necesaria es con una estimación de litros de aire por persona y segundo que se requieren del exterior.

   Un valor adecuado para reducir riesgo de contagio es 14 litros por persona y segundo.

   La relación entre ambos parámetros es: 

ACH = (litros por persona y segundo * número personas * 3600 segundos/hora * 0.001 m³/litro) / volumen sala en m³

   Estos valores de ACH se pueden ajustar según el riesgo que se quiera o se pueda asumir. El riesgo cero no existe. Cuanto mayor sea la ventilación, menor es el riesgo de contagio.

   En el aire exterior, las concentraciones de CO₂ son de aproximadamente 420 ppm. En interiores, en espacios ocupados, las concentraciones de CO₂ son elevadas por el CO2 exhalado por los ocupantes.

   Dichas concentraciones se pueden medir para verificar si la renovación de aire en un espacio determinado es la adecuada. La ventilación de espacios y por tanto la disminución de la concentración de CO₂, podemos conseguirla por medios naturales, mecánicos o mixtos.

   Por cualquiera de los métodos descritos podremos calcular la ventilación necesaria (m³/h) y en función de esta determinar el número de elementos mecánicos requeridos.

Caudal (m³/h) =ACH ventilación calculada * volumen aula

   En resumen, en un espacio interior ventilado podemos conocer la calidad del aire que respiramos mediante la medición y control de la concentración de CO₂.

Segundo caso, reacción de Sabatier y cual es su papel en la generación de oxigeno en la ISS (Estación Espacial Internacional)..

¿Qué es la reacción de Sabatier?.

La reacción de Sabatier es un proceso mediante el cual, se hacen reaccionar hidrógeno (H₂) y dióxido de carbono (CO₂) a altas temperaturas y presiones para transformarlos, con ayuda de un catalizador de níquel, en agua (H₂O) y metano (CH₄).

   Opcionalmente se puede optar por rutenio en alúmina que constituyen un mejor catalizador.

CO₂ + 4H₂ → CH₄ + 2H₂O

   Fue descubierta por el químico francés Paul Sabatier, ha sido propuesto como un paso clave en el envío de misiones tripuladas a Marte.

   En estas misiones se podrían llevar tanques llenos de hidrógeno de la tierra, o bien producirlo a partir de agua marciana mediante un proceso de electrólisis, consiguiendo además oxígeno. Aparte se tomaría el dióxido de carbono de la atmósfera de Marte, consiguiendo así un considerable ahorro de peso.

   La reacción es exotérmica y produce una energía de aproximadamente 165 kJ (aunque este valor es referencial, ya que varía según las condiciones). La reacción se lleva a cabo en un reactor, cuyas paredes están revestidas de níquel que actúa como catalizador.

   Conocemos un caso interesante, entre otros donde se utiliza esta reacción.

¿De dónde sacan los astronautas el oxígeno para respirar en el espacio? 

   Algunos astronautas pueden llegar a pasar meses o incluso años en la Estación Espacial Internacional (ISS por sus siglas en inglés o EEI por sus siglas en español). Y, como es obvio, no se puede almacenar tanta cantidad de oxígeno (el tamaño es reducido), igual que tampoco se puede estar constantemente llevándolo (esto supondría que lo astronautas estarían respirando un oxígeno que tendría un valor de 500 000 dólares diarios.

   La solución está en un sistema diseñado por la NASA y que fue enviado en 2007. Este sistema recibe el nombre de Oxygen Generation System (OGS por sus siglas en inglés), que en español significa Sistema Generador de Oxígeno y consiste básicamente en una máquina que mediante procesos químicos convierte agua que ya no es útil en la ISS en el tan preciado oxígeno.

   Estas aguas (aproximadamente de forma diaria se usan unos 23 litros), por medio de la electrólisis (un proceso químico en el que se inyecta electricidad proveniente, en este caso, de las energías renovables de la estación; concretamente se inyectan 50 A), se separan en Oxígeno (O₂) e Hidrógeno (H).

   Para que el proceso sea más efectivo, se usa Hidróxido de potasio en una proporción de 30%.

   Posteriormente el oxígeno se libera a la atmósfera para que sea respirado por los astronautas y el hidrógeno (que es nocivo para los humanos, además de altamente inflamable) no se libera al espacio, como mucha gente piensa, sino que, mediante otra reacción química, la reacción de Sabatier y junto con CO₂, se produce agua (H₂O) y metano (CH₄). El agua entra de nuevo en el circuito de la OGS y el metano sí que se ‘flota’ al espacio.

   El sistema genera entre 2,3 y 9 kg de oxígeno diarios, lo que es suficiente para mantener a los 6 astronautas que viven allí de forma semipermanente. Diariamente se consume 5 kg de oxígeno (unos 840 gramos por persona por día), por lo que en ocasiones se produce un excedente.

   De esta forma, los astronautas son capaces de vivir allí sin la necesidad de estar preocupándose por el oxígeno y por cuándo llegará más (además de que sería carísimo recibir oxígeno regularmente).

   En resumen, acabamos de ver como participa el CO₂ en las reacciones necesarias para su utilización en el Sistema Generador de Oxigeno de la ISS.

Propuesta para el alumnado.

   Hemos visto algunos casos concretos. Existen multitud de proyectos de investigación y desarrollo relacionados con el CO₂ y con la disminución de la emisión de gases de efecto invernadero.

   La propuesta es recopilar información acerca de aquellos, de iniciativa pública, privada o de ambas, de vuestra preferencia o que conozcáis de vuestro entorno cercano, que se hayan iniciado, en proceso o ya materializado y que sirvan de base para el desarrollo de vuestro trabajo.

   Se rellenará una breve cuestionario para generar el índice de todos los trabajos que son de vuestro interés, se pueden indicar varios, pero al menos uno debe servir para el desarrollo del trabajo. El trabajo se subirá a la plataforma habitual en respuesta a la tarea o bien si se ha utilizado p.e., un blog personal, también se indicaría su URL.

   El trabajo que mayor interés haya despertado será expuesto por el grupo y su autor. 

   Será elegido por todos mediante votación mediante formulario de Google y presentado por composición de breves videos hilados (cada uno de entre uno y tres minutos de duración), que traten conceptos o cuestiones concretas.

   El tiempo necesario para la realización del trabajo será de una semana, más una sesión para el visionado y debate.

Temporalización.

Una semana de microformación y una semana para la realización del trabajo.

Herramientas digitales.

   En esta ocasión recomendamos la utilización de Blogger, documentos o presentaciones de Google, para el desarrollo de los trabajos individuales.

   Usaremos la conexión de formularios con hojas de cálculo de Google, para enumerar los proyectos propuestos por el alumnado y también para recoger los resultados de la votación.

   Utilizaremos Spark Camera, InShot, Tik Tok, Screenity para explicaciones con compartición de escritorio o cualquier otra herramienta digital para la creación de videos y presentaciones.

   El formulario siguiente servirá para recoger las propuestas y estas se irán reflejando en la hoja de cálculo.

   De un modo similar se recogerán las propuestas elegidas, las cuales se someterán a votación, para transformarla por el grupo, en una presentación mediante videos hilados.

Evaluación con Rúbrica.

   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 proyecto CO₂, en nueva ventana.

Catalogación

    Curso recomendado: ESO, Bachillerato.

    Asignatura: FyQ, 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.
• Competencias Sociales y Cívicas.
• 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 trabajo se limita a pequeñas aportaciones y una nueva composición, que facilite la comprensión del tema elegido, junto 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

DIGITAL.CSIC: Guía para ventilación de las aulas CSIC - Desde https://digital.csic.es/handle/10261/221538

Ministerio para la Transición Ecológica, guia_huella_carbono_tcm30-479093.pdf (miteco.gob.es) - Desde https://www.miteco.gob.es/es/cambio-climatico/temas/mitigacion-politicas-y-medidas/guia_huella_carbono_tcm30-479093.pdf

¿Cuánto es una tonelada de CO2? (miteco.gob.es) - Desde https://www.miteco.gob.es/es/ceneam/recursos/mini-portales-tematicos/cuanto_es_1t_co2_tcm30-70715.pdf

Educación y Comunicación frente al Cambio Climático (miteco.gob.es) - Desde https://www.miteco.gob.es/es/ceneam/recursos/mini-portales-tematicos/cambio-climatico.aspx

Global-Warming-Potential-Values.docx (ghgprotocol.org) - Desde https://ghgprotocol.org/sites/default/files/ghgp/Global-Warming-Potential-Values%20(Feb%2016%202016)_1.pdf

El oxígeno de los astronautas de la Estación Espacial, ¿de dónde proviene? (elespanol.com) - Desde - https://www.elespanol.com/omicrono/tecnologia/20180224/oxigeno-astronautas-estacion-espacial-proviene/287472119_0.html

Wikipedia Desde

https://es.wikipedia.org/wiki/Di%C3%B3xido_de_carbono https://es.wikipedia.org/wiki/Huella_de_carbono https://es.wikipedia.org/wiki/Partes_por_mill%C3%B3n https://es.wikipedia.org/wiki/Volumen_molar https://es.wikipedia.org/wiki/Ley_de_los_gases_ideales https://es.wikipedia.org/wiki/CO%E2%82%82_equivalente https://es.wikipedia.org/wiki/%C3%8Dndice_GWP https://es.wikipedia.org/wiki/Reacci%C3%B3n_de_Sabatier

OneNote - Preparación, esquema y contenidos.

Imagen huella de carbono CO₂, desde el banco de imágenes de Adobe Stock.

Infografía CO₂ - Desde Statista - https://es.statista.com

Hojas de cálculo de Google - https://docs.google.com/spreadsheets

Formularios de Google - https://docs.google.com/forms

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/

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

 

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/