Robótica Trinitaria 202X: junio 2025

martes, 10 de junio de 2025

EVALUACION DE INFORMATICA

EVALUACION DE INFORMATICA

Instrucciones: Responde en una hoja con tu nombre y fecha las siguientes preguntas de la forma más clara y completa posible.

1. Pregunta: (TIEMPO PARA RESPONDER = 3 MINUTOS)
¿Cuáles son las tres etiquetas fundamentales que estructuran cualquier documento HTML básico, además de la declaración <!DOCTYPE html>?

Respuesta:
Las tres etiquetas fundamentales son ____________________, ____________________, y ____________________

2. Pregunta: (TIEMPO PARA RESPONDER = 3 MINUTOS)
Para mostrar una imagen en una página web usando la etiqueta <img>, ¿cuáles son los dos atributos esenciales que se deben incluir y qué función cumple cada uno?

Respuesta:
Los dos atributos esenciales son: ___________________ y ___________________

3. Pregunta: (TIEMPO PARA RESPONDER = 3 MINUTOS)
Cuales son las etiquetas para definir listas ordenadas y no ordenadas y con que etiqueta se definen sus elementos dentro de dichas listas.

Respuesta:

Una lista no ordenada _________________ muestra sus elementos con viñetas (bullets) o símbolos, sin un orden numérico específico.
Una lista ordenada _________________ muestra sus elementos numerados (1, 2, 3...), lo que indica que el orden o la secuencia son importantes.
Los elementos se definen con la etiqueta: ______________

4. Pregunta: (TIEMPO PARA RESPONDER = 4 MINUTOS)
Escribe el código HTML completo para crear un enlace (hipervínculo) que dirija al usuario a https://www.wikipedia.org con el texto visible "Visita Wikipedia".

Respuesta:

5. Pregunta: (TIEMPO PARA RESPONDER = 4 MINUTOS)
¿Cuál es la diferencia principal entre la etiqueta <h1> y la etiqueta <p>?

Respuesta:

6. EJERCICIO ESCRITO - PAGINA WEB (TIEMPO PARA RESPONDER = 20 MINUTOS)

ESCRIBA EN UNA HOJA EL CODIGO DE UNA PAGINA WEB LLAMADA mi_hoby.html

Instrucciones:
Crea / ESCRIBE (EN LA HOJA DEL EXAMEN - NO NECESITAS CSS) un único archivo HTML llamado mi_hobby.html. Esta página deberá describir uno de tus pasatiempos favoritos y tiene que incluir todos los elementos que se detallan a continuación. Para la imagen, puedes asumir que tienes un archivo llamado hobby.jpg en la misma carpeta.

Requisitos y orientaciones de la página:

Estructura Base: La página debe tener la estructura fundamental de un documento HTML
Título: el título que aparece en la pestaña del navegador debe ser "Mi Hobby Favorito".
Barra de Navegación (Navbar): crea una barra de navegación simple. Debe ser una lista no ordenada que contenga tres enlaces: "Inicio", "Galería" y "Contacto". Por ahora, los enlaces no deben llevar a ningún sitio (puedes usar href="#").
Encabezado Principal: Después de la navegación, añade un encabezado principal (<h1>) con el nombre de tu hobby (ej: "El Senderismo").
Imagen y Descripción:

Inserta una imagen representativa de tu hobby (<img src="hobby.jpg">).
Debajo de la imagen, escribe un párrafo (<p>) breve que describa por qué te gusta ese pasatiempo.

Lista Ordenada: Añade un subtítulo (puedes usar <h2>) que diga "Pasos para Empezar". Debajo, crea una lista ordenada (<ol>) con al menos tres pasos o consejos para alguien que quiera iniciarse en ese hobby.
Tabla de Equipamiento: Crea otro subtítulo (<h2>) que diga "Equipamiento Básico". Debajo, construye una tabla (<table>) con dos columnas: "Objeto" y "Prioridad". La primera fila debe ser de encabezados (<th>). Añade al menos dos filas más con datos de ejemplo (<td>).
Enlace Externo: Al final de todo, añade un párrafo (<p>) que diga: "Para más inspiración, visita este sitio". La palabra "este sitio" debe ser un enlace (link) que lleve a una página relevante (por ejemplo, https://www.wikipedia.org).

lunes, 9 de junio de 2025

PANTALLAS LCD EN ARDUINO

PANTALLAS LCD EN ARDUINO

Teoría: Pantallas LCD para Robótica con Arduino

1. ¿Qué es una pantalla LCD?

LCD son las siglas de Liquid Crystal Display (Pantalla de Cristal Líquido). Es un tipo de pantalla plana que utiliza las propiedades de los cristales líquidos para mostrar información.

· Principio Básico: Los cristales líquidos no emiten luz por sí mismos. En su lugar, manipulan la luz que pasa a través de ellos. Al aplicar una pequeña corriente eléctrica, estos cristales se alinean de una forma específica, bloqueando o permitiendo el paso de la luz de una fuente trasera (llamada backlight).

· Tipos Comunes en Arduino: Las más populares son las pantallas de caracteres, como la 16x2 (16 caracteres, 2 filas) o la 20x4 (20 caracteres, 4 filas). Estas son ideales para mostrar texto y datos simples.

2. ¿Por qué son tan útiles en Robótica?

Las pantallas LCD son un componente fundamental en la robótica por varias razones:

1. Depuración (Debugging): Permiten mostrar en tiempo real los valores de sensores, el estado de variables o mensajes de error sin necesidad de tener el robot conectado a un ordenador. Esto es vital cuando el robot se mueve de forma autónoma.

o Ejemplo: Puedes ver la distancia exacta que mide un sensor ultrasónico mientras el robot explora.

2. Interfaz de Usuario (UI): Proporcionan una forma de comunicación directa entre el robot y el usuario.

o Ejemplo: Mostrar mensajes como "Batería baja", "Obstáculo detectado" o "Moviendo adelante".

3. Visualización de Datos: Muestran información relevante del entorno o del estado interno del robot.

o Ejemplo: Un robot meteorológico podría mostrar la temperatura y la humedad actuales.

4. Autonomía: El robot puede informar sobre su estado y tomar decisiones mostrando menús o pidiendo confirmación al usuario sin depender de una conexión externa.

3. Conexión con Arduino: Paralelo vs. I2C

Existen dos formas principales de conectar una LCD a un Arduino:

· Conexión en Paralelo:

o Descripción: Es la forma tradicional. Se conectan directamente varios pines de la LCD (RS, E, D4, D5, D6, D7, etc.) a los pines digitales del Arduino.

o Desventaja: ¡Usa muchos pines! Generalmente entre 6 y 11 pines digitales, lo cual es un problema en proyectos de robótica donde los pines son escasos.

· Conexión con Módulo I2C (Recomendada):

o Descripción: Se utiliza un pequeño módulo adaptador que se suelda a la parte trasera de la LCD. Este módulo se comunica con el Arduino usando el protocolo I2C.

o Ventaja: ¡Solo utiliza 2 pines de datos (SDA y SCL) más la alimentación (5V y GND)! Esto libera una gran cantidad de pines en el Arduino para otros componentes como motores y sensores. En la placa Arduino UNO, estos pines son A4 (SDA) y A5 (SCL).

4. La Librería: LiquidCrystal_I2C

Para facilitar el uso de estas pantallas, no programamos todo desde cero. Usamos una librería, que es un conjunto de código preescrito. La más común para pantallas con módulo I2C es LiquidCrystal_I2C.h.

Funciones Clave:

· lcd.init(): Inicia la comunicación con la pantalla.

· lcd.backlight(): Enciende la luz de fondo.

· lcd.clear(): Borra todo el contenido de la pantalla.

· lcd.setCursor(columna, fila): Mueve el cursor a una posición específica. Importante: La numeración empieza en 0. (Ej: lcd.setCursor(0, 0) es la primera columna de la primera fila).

· lcd.print("Texto"): Escribe el texto o el valor de una variable en la posición actual del cursor.

Pequeño Ejemplo Práctico: Medidor de Distancia para un Robot

Objetivo: Crear un sistema simple que mida la distancia con un sensor ultrasónico y la muestre en una pantalla LCD 16x2. Esto simula cómo un robot "ve" y comunica la distancia a un obstáculo.

Materiales Necesarios:

· Arduino UNO (o similar)

· Pantalla LCD 16x2 con módulo I2C

· Sensor Ultrasónico HC-SR04

· Protoboard (placa de pruebas)

· Cables Jumper

Esquema de Conexión:

1. Pantalla LCD I2C:

o GND -> GND del Arduino

o VCC -> 5V del Arduino

o SDA -> Pin A4 del Arduino

o SCL -> Pin A5 del Arduino

2. Sensor Ultrasónico HC-SR04:

o GND -> GND del Arduino

o VCC -> 5V del Arduino

o Trig -> Pin digital 9 del Arduino

o Echo -> Pin digital 10 del Arduino

Código Arduino:

Nota: Antes de subir el código, asegúrate de tener instalada la librería LiquidCrystal_I2C. Puedes hacerlo desde el Gestor de Librerías del IDE de Arduino (Herramientas > Administrar Bibliotecas...).

// Incluir las librerías necesarias

#include <Wire.h> // Librería para la comunicación I2C

#include <LiquidCrystal_I2C.h> // Librería para la pantalla LCD I2C

// --- Configuración de la Pantalla LCD ---

// La dirección I2C suele ser 0x27 o 0x3F. Si no funciona,

// puedes usar un "I2C Scanner" para encontrar la dirección correcta.

LiquidCrystal_I2C lcd(0x27, 16, 2); // Dirección I2C, 16 columnas, 2 filas

// --- Configuración del Sensor Ultrasónico ---

const int pinTrig = 9; // Pin para el disparador (Trigger)

const int pinEcho = 10; // Pin para el eco (Echo)

// Variables para almacenar la duración del pulso y la distancia

long duracion;

int distancia;

void setup() {

// Iniciar la pantalla LCD

lcd.init();

lcd.backlight(); // Encender la luz de fondo

// Mostrar un mensaje de bienvenida

lcd.setCursor(0, 0); // Posición (columna 0, fila 0)

lcd.print("Medidor Robotico");

delay(2000); // Esperar 2 segundos

lcd.clear(); // Limpiar la pantalla

// Configurar los pines del sensor

pinMode(pinTrig, OUTPUT);

pinMode(pinEcho, INPUT);

}

void loop() {

// 1. Generar el pulso ultrasónico

digitalWrite(pinTrig, LOW);

delayMicroseconds(2);

digitalWrite(pinTrig, HIGH);

delayMicroseconds(10);

digitalWrite(pinTrig, LOW);

// 2. Medir el tiempo que tarda en volver el eco

duracion = pulseIn(pinEcho, HIGH);

// 3. Calcular la distancia en centímetros

// Fórmula: distancia = (duración * velocidad_del_sonido) / 2

// Velocidad del sonido ~ 0.034 cm/microsegundo

distancia = duracion * 0.034 / 2;

// 4. Mostrar la información en la pantalla LCD

lcd.setCursor(0, 0); // Ir a la primera línea

lcd.print("Distancia:");

lcd.setCursor(0, 1); // Ir a la segunda línea

lcd.print(distancia); // Imprimir el valor de la distancia

lcd.print(" cm "); // Imprimir las unidades y espacios para borrar datos viejos

delay(500); // Esperar medio segundo antes de la siguiente medición

}

lunes, 2 de junio de 2025

EJERCICIO BASICO - FORMULARIO

EJERCICIO BASICO - FORMULARIO

Cómo implementarlo en VS Code:

Abre VS Code.
Crea una nueva carpeta para tu proyecto (ej. mi-formulario).
Dentro de esa carpeta, crea dos archivos:

formulario.html
estilos.css

Copia el código HTML en formulario.html.
Copia el código CSS en estilos.css.
Guarda ambos archivos.
Puedes abrir formulario.html directamente en tu navegador web (haz clic derecho en el archivo en el explorador de VS Code y selecciona "Open with Live Server" si tienes la extensión, o "Copy Path" y pégalo en la barra de direcciones de tu navegador).

Puedes copiar y pegar esto directamente en archivos .html y .css en VS Code.

1. Archivo HTML (por ejemplo, formulario.html):

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario Básico</title>
    <link rel="stylesheet" href="estilos.css"> <!-- Enlazamos el archivo CSS -->
</head>
<body>
    <div class="contenedor-formulario">
        <h1>Formulario de Contacto</h1> 


        <form action="/enviar-datos" method="POST">
         <!-- 
         <form action="https://edutechsiglo21.com/2025/procesar_formulario.php" method="POST">
         -->   
            <!-- Campo Nombre -->
            <div class="grupo-formulario">
                <label for="nombre">Nombre Completo:</label>
                <input type="text" id="nombre" name="nombre_usuario" required>
            </div>
 
            <!-- Campo Email -->
            <div class="grupo-formulario">
                <label for="email">Correo Electrónico:</label>
                <input type="email" id="email" name="email_usuario" required>
            </div>

            <!-- Campo Asunto -->
            <div class="grupo-formulario">
                <label for="asunto">Asunto:</label>
                <input type="text" id="asunto" name="asunto_mensaje">
            </div>

            <!-- Campo Mensaje -->
            <div class="grupo-formulario">
                <label for="mensaje">Mensaje:</label>
                <textarea id="mensaje" name="mensaje_usuario" rows="5" required></textarea>
            </div> 

            <!-- Botón de Envío -->
            <div class="grupo-formulario">
                <button type="submit">Enviar Mensaje</button>
            </div>
        </form>
    </div>
</body>
</html>

2. Archivo CSS (por ejemplo, estilos.css, en la misma carpeta que formulario.html):

/* Estilos generales para el cuerpo de la página */
body {
    font-family: Arial, sans-serif; /* Tipo de fuente agradable */
    background-color: #f4f4f4; /* Color de fondo suave */
    display: flex; /* Para centrar el formulario */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Asegura que ocupe al menos toda la altura de la ventana */
    margin: 0;
    padding: 20px;
    box-sizing: border-box; /* Para que el padding no afecte el ancho total */
}

/* Contenedor principal del formulario */
.contenedor-formulario {
    background-color: #ffffff; /* Fondo blanco para el formulario */
    padding: 25px;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    width: 100%;
    max-width: 500px; /* Ancho máximo del formulario */
}

/* Título del formulario */
h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* Estilos para cada grupo de label e input */
.grupo-formulario {
    margin-bottom: 15px;
}

.grupo-formulario label {
    display: block; /* Hace que la etiqueta ocupe toda la línea */
    margin-bottom: 5px;
    color: #555;
    font-weight: bold;
}

.grupo-formulario input[type="text"],
.grupo-formulario input[type="email"],
.grupo-formulario textarea {
    width: 100%; /* Hace que el campo ocupe todo el ancho disponible */
    padding: 10px;
    border: 1px solid #ddd; /* Borde sutil */
    border-radius: 4px;
    box-sizing: border-box; /* Para que el padding no afecte el ancho total */
    font-size: 16px;
}

.grupo-formulario textarea {
    resize: vertical; /* Permite redimensionar solo verticalmente */
}

/* Estilos para el botón de envío */
.grupo-formulario button[type="submit"] {
    background-color: #007bff; /* Color de fondo azul */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    font-size: 16px;
    width: 100%; /* Botón de ancho completo */
    transition: background-color 0.3s ease; /* Transición suave para el hover */
}

.grupo-formulario button[type="submit"]:hover {
    background-color: #0056b3; /* Color más oscuro al pasar el ratón */
}

/* Estilos para el foco en los campos (opcional, pero mejora la UX) */
.grupo-formulario input:focus,
.grupo-formulario textarea:focus {
    outline: none; /* Quita el borde por defecto del navegador */
    border-color: #007bff; /* Cambia el color del borde al enfocar */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

Explicación del Código:

HTML (formulario.html):

<!DOCTYPE html> y estructura básica: Define el tipo de documento y la estructura HTML.
<meta charset="UTF-8">: Asegura la correcta visualización de caracteres especiales.
<meta name="viewport"...>: Esencial para el diseño responsivo, para que la página se vea bien en móviles.
<link rel="stylesheet" href="estilos.css">: Enlaza el archivo CSS externo.
<div class="contenedor-formulario">: Un div para agrupar y centrar todo el formulario.
<h1>: Título del formulario.
<form action="/enviar-datos" method="POST">:

action="/enviar-datos": Indica que cuando se envíe el formulario, los datos irán a una URL (ficticia en este caso) llamada /enviar-datos. En una aplicación real, esta sería la URL de un script del servidor que procesa los datos.
method="POST": Los datos se enviarán de forma oculta.

<div class="grupo-formulario">: Se usa un div para agrupar cada label con su input o textarea. Esto ayuda a aplicar estilos y espaciado.
<label for="id_del_campo">:

El atributo for se vincula con el id del campo de entrada correspondiente. Esto mejora la accesibilidad y permite que al hacer clic en la etiqueta, el foco se ponga en el campo.

<input type="text" id="nombre" name="nombre_usuario" required>:

type="text": Campo de texto de una línea.
id="nombre": Identificador único para este elemento (usado por el label).
name="nombre_usuario": Nombre que se enviará al servidor para identificar este dato.
required: Atributo HTML5 que hace que este campo sea obligatorio.

<input type="email" ...>: Similar al de texto, pero optimizado para emails (puede tener validación del navegador).
<textarea id="mensaje" ... rows="5">:

rows="5": Sugiere una altura inicial para el área de texto (5 líneas).

<button type="submit">: Crea un botón que, al ser presionado, envía el formulario.

CSS (estilos.css):

body: Estilos básicos para la página, incluyendo centrado del contenido.
.contenedor-formulario: Estilos para el div que envuelve el formulario (fondo, padding, sombra, bordes redondeados).
h1: Estilos para el título.
.grupo-formulario: Agrega un margen inferior a cada grupo de etiqueta/campo.
.grupo-formulario label: Hace que la etiqueta sea un bloque (ocupe su propia línea) y le da un poco de estilo.
.grupo-formulario input[type="text"], ... textarea: Estilos comunes para los campos de entrada y el textarea (ancho completo, padding, bordes).
.grupo-formulario textarea: Permite que el textarea solo se pueda redimensionar verticalmente.
.grupo-formulario button[type="submit"]: Estilos para el botón de envío (color, padding, etc.).
:hover para el botón: Cambia el color del botón cuando el ratón pasa por encima.
:focus para los campos: Mejora la experiencia del usuario al resaltar el campo que tiene el foco.

FORMULARIOS HTML: LA PUERTA DE ENTRADA A LA INTERACCIÓN

FORMULARIOS HTML: LA PUERTA DE ENTRADA A LA INTERACCIÓN

¿Qué es un Formulario HTML?

Imagina que una página web necesita obtener información de ti. Podría ser tu nombre para registrarte, tu opinión sobre un producto, o los datos de tu tarjeta para una compra. Los formularios HTML son la herramienta que permite a las páginas web recolectar esa información de los usuarios.

En esencia, un formulario es una sección de un documento HTML que contiene controles interactivos (como campos de texto, botones, casillas de verificación, etc.) que permiten a los usuarios ingresar datos.

¿Para qué sirven los Formularios?

Los formularios son fundamentales para una web dinámica e interactiva. Se utilizan para una gran variedad de propósitos, como:

· Registros de usuarios: Crear nuevas cuentas.

· Inicio de sesión (Login): Acceder a cuentas existentes.

· Búsquedas: Enviar términos de búsqueda a un motor.

· Comentarios y retroalimentación: Dejar opiniones o mensajes.

· Compras online: Ingresar datos de envío y pago.

· Encuestas y votaciones: Recopilar opiniones.

· Subida de archivos: Enviar documentos, imágenes, etc.

· Contacto: Enviar mensajes a los administradores del sitio.

Los Componentes Clave de un Formulario:

Aunque hay muchos elementos, los más básicos y esenciales son:

La Etiqueta <form>: El Contenedor Principal

Todo formulario comienza y termina con la etiqueta <form>. Es como la caja que envuelve todos los campos y botones.

Tiene dos atributos muy importantes:

· action: Especifica la URL (la dirección web) a donde se enviarán los datos del formulario cuando el usuario lo envíe (generalmente un script en el servidor que procesará la información).

· method: Define cómo se enviarán los datos. Los dos métodos más comunes son:

· GET: Los datos del formulario se añaden a la URL visible en la barra de direcciones del navegador. Es útil para búsquedas o cuando los datos no son sensibles.

· POST: Los datos del formulario se envían en el cuerpo de la solicitud HTTP, de forma oculta. Es el método preferido para información sensible (como contraseñas) o grandes cantidades de datos.

<form action="/procesar-datos.php" method="POST">

</form>

Elementos de Entrada (<input>, <textarea>, <select>): Los Campos para Ingresar Datos

Dentro de la etiqueta <form>, colocamos los diferentes campos donde el usuario escribirá o seleccionará información.

<input>: Es la etiqueta más versátil. Su comportamiento cambia según su atributo type. Algunos tipos comunes son:

· type="text": Para una línea de texto (nombres, asuntos, etc.).

· type="password": Para contraseñas (el texto se oculta).

· type="email": Para direcciones de correo electrónico (puede incluir validación básica).

· type="submit": Crea un botón para enviar el formulario.

· type="checkbox": Una casilla que se puede marcar o desmarcar (para opciones múltiples).

· type="radio": Un botón de opción (permite seleccionar solo una opción de un grupo).

<textarea>: Para campos de texto de múltiples líneas (como comentarios o mensajes largos).

<select> y <option>: Para crear listas desplegables donde el usuario elige una o varias opciones.

<form action="/procesar-datos.php" method="POST">

Nombre: <input type="text" name="nombre_usuario">

<br>

Mensaje: <textarea name="mensaje_usuario"></textarea>

<br>

<input type="submit" value="Enviar">

</form>

Las Etiquetas (<label>): Haciendo los Formularios Más Amigables

· La etiqueta <label> se usa para asociar un texto descriptivo a un campo de entrada.

· Mejora la accesibilidad (los lectores de pantalla pueden leer la etiqueta cuando el campo tiene el foco) y la usabilidad (hacer clic en la etiqueta activa el campo asociado).

· Se conecta al campo mediante el atributo for en la <label> (que coincide con el id del campo de entrada).

<form action="/procesar-datos.php" method="POST">

<label for="nombre_usuario">Nombre:</label>

<input type="text" id="nombre_usuario" name="nombre_usuario">

<br>

<input type="submit" value="Enviar Información">

</form>

El Atributo name: Identificando los Datos

· Cada campo de entrada que envía datos al servidor (como <input>, <textarea>, <select>) debe tener un atributo name.

· El valor del atributo name se usa como el "nombre" de la pieza de información que se envía. Cuando el servidor recibe los datos, usa este name para saber qué dato es cuál.

· Ejemplo: Si tienes <input type="text" name="ciudad">, el servidor recibirá algo como ciudad=Madrid.

En Resumen:

· Los formularios son la forma en que las páginas web recopilan información de los usuarios.

· Se crean con la etiqueta <form>, que especifica a dónde y cómo enviar los datos (action y method).

· Dentro del <form>, se usan elementos como <input>, <textarea>, y <select> para crear los campos.

· Las etiquetas <label> mejoran la accesibilidad y usabilidad.

· El atributo name es crucial para que el servidor identifique cada dato enviado.

Robótica Trinitaria 202X

martes, 10 de junio de 2025

EVALUACION DE INFORMATICA

lunes, 9 de junio de 2025

PANTALLAS LCD EN ARDUINO

lunes, 2 de junio de 2025

EJERCICIO BASICO - FORMULARIO

FORMULARIOS HTML: LA PUERTA DE ENTRADA A LA INTERACCIÓN

SOPA DE LETRAS - INTERNET DE LAS COSAS Y LA IA

Denunciar abuso

Etiquetas