miércoles, 31 de julio de 2024

SENSOR INFRARROJO - LED Y ALARMA

 SENSOR INFRARROJO - LED Y ALARMA - DIAGRAMA Y CODIGO

Este codigo usa el sensor IR de obstaculo HW-201, si necesita encender mas leds solo agregue el circuito de ese nuevo led y adicione el codigo necesario teniendo en cuenta el pin donde conectara el positivo del led.

CODIGO, CLICK AQUI PARA DESCARGAR ARCHIVO.

/*

 * Codigo que sirve para detectar objetos y

 * encender uno o mas leds segun se necesite

 * o activar alarmas o cualquier dispositivo actuador

 *

 */

 

// Define el pin donde está conectado el sensor de obstáculos

const int PinSensorIRObstaculos = 9;

 

// Define el pin donde está conectado el LED

const int PinLedEscalera = 13;

 

// Define el pin donde está conectado el buzzer

const int PinBuzzer = 8;

 

// Variable para almacenar la lectura del sensor

int Valor_de_PinSensorIRObstaculos = 0;

 

// Función que se ejecuta una vez al inicio del programa

void setup() {

  // Inicia la comunicación serial para poder ver mensajes en el monitor serial

  Serial.begin(9600);

 

  // Configura el pin del sensor como entrada

  pinMode(PinSensorIRObstaculos, INPUT);

 

  // Configura el pin del LED como salida

  pinMode(PinLedEscalera, OUTPUT);

 

  // Configura el pin del buzzer como salida

  pinMode(PinBuzzer, OUTPUT); // Define el pin del buzzer como salida

}

 

// Función que se ejecuta repetidamente

void loop() {

  // Imprime en la consola el mensaje "Lectura del sensor IR =" seguido del valor leído del sensor

  Serial.print("\t Lectura del sensor IR =");

  Serial.println(Valor_de_PinSensorIRObstaculos);

 

  // Si el sensor detecta un objeto (Valor_de_PinSensorIRObstaculos == LOW):

  if (Valor_de_PinSensorIRObstaculos == LOW) {

    // Enciende el LED

    digitalWrite(PinLedEscalera, HIGH);

    // Activa el buzzer con una frecuencia de 440Hz

    tone(PinBuzzer, 440);

  } else { // Si el sensor no detecta un objeto:

    // Apaga el LED

    digitalWrite(PinLedEscalera, LOW);

    // Apaga el buzzer

    noTone(PinBuzzer);

  }

 

  // Espera 10 milisegundos antes de volver a leer el sensor

  delay(10);

 

  // Lee el valor del sensor de obstáculos y lo guarda en la variable

  Valor_de_PinSensorIRObstaculos = digitalRead(PinSensorIRObstaculos);

}




martes, 16 de julio de 2024

ENLACES O LINKS

 ENLACES O LINKS


CLIC AQUI PARA DESCARGAR EJEMPLO QUE PUEDE ADAPTAR

Qué es un enlace o link:

Un enlace, también llamado hipervínculo, es como un puente que conecta un texto, una imagen o un elemento en una página web con otro recurso. Ese recurso puede ser otra página web, una imagen, un video, un documento o incluso una sección específica de la misma página.

 

Tipos de enlaces:

Enlaces internos: Estos enlaces conectan diferentes secciones dentro de la misma página web. Imagínate que tienes un artículo muy largo y quieres que el lector pueda ir rápidamente a la sección 'Conclusiones'. Un enlace interno te permite hacer eso.

 

Son ideales para crear una experiencia de usuario fluida al mover al usuario a diferentes secciones de tu página.

 

Cómo funcionan en tu código:

ID en secciones: Cada sección importante de tu página (Introducción, Construcción, Proyectos) tiene un ID único: <h2><span id="introduccion">Introducción al Brazo Robótico</span></h2>

 

Estos IDs actúan como puntos de referencia para tus enlaces.

 

Enlaces con #: Los enlaces en el menú de navegación utilizan el símbolo # seguido del ID de la sección a la que apuntan: <li><a href="#introduccion">Introducción</a></li>

 

Ejemplo: Cuando el usuario hace clic en el enlace "Introducción" en tu menú, la página se desplaza suavemente hasta la sección "Introducción al Brazo Robótico" que tiene el ID "introduccion".

 

Enlaces externos: Estos enlaces te llevan a otra página web completamente diferente. Por ejemplo, si quieres leer más información sobre un tema, puedes hacer clic en un enlace externo que te lleva a un sitio web con más detalles.

 

Cómo funcionan en tu código:

URL completa: El atributo href del enlace contiene la dirección web completa (URL) del recurso al que se apunta: <li><a href="https://edutechsiglo21.com" target="_blank">Edutech XXI</a></li>

 

Abrir en una nueva ventana: El atributo target="_blank" dentro del enlace especifica que la página web externa se debe abrir en una nueva ventana del navegador.

 

Ejemplo: Cuando el usuario hace clic en el enlace "Edutech XXI", la página edutechsiglo21.com se abre en una nueva pestaña o ventana, mientras que la página actual del brazo robótico permanece abierta.

martes, 9 de julio de 2024

INSERTANDO UNA IMAGEN EN MI PAGINA WEB

 INSERTANDO UNA IMAGEN EN MI PAGINA WEB


ACTIVIDAD DEL DIA DE HOY

Codigo de ejemplo de como insertar una imagen en tu pagina web.

1. Descargue el siguiente codigo o abra el bloc de notas, copia y pega el siguiente código, guardalo con el nombre que se indica y mira el resultado en el navegador.


2. Modifica tu pagina web de tal forma que esta imagen aparezca en tu pagina principal, luego busca una acorde a tu proyecto y colocala debajo siguiendote por este ejemplo.

CODIGO DE EJEMPLO: nombre de la pagina de ejemplo imagen.html

Link de descarga, haga clic aquí

<html>

<head>

  <title>Mi Proyecto</title>

</head>

<body>

  <center>

    <h2><font color="blue">AQUI EL NOMBRE DE MI PROYECTO</font></h2>

    <img src="https://edutechsiglo21.com/app/img/robotica.jpg" alt="Mi proyecto" title="Robotica" width="650" height ="450"/>

  </center>

</body>

</html>


3.TRANSCRIBE EN TU CUADERNO:


LA ETIQUETA <img>:

La etiqueta <img> es la clave para insertar imágenes en tu página web. Esta etiqueta es autocerrante, es decir, se cierra con "/>" tal cual lo pudo observar en el codigo de ejemplo.

1, Atributos esenciales: La etiqueta <img> necesita dos atributos principales:

src (source): Este atributo define la ubicación de la imagen en tu sitio web. Puede ser una ruta local (si la imagen está en la misma carpeta que tu archivo HTML) o una URL remota (si la imagen se encuentra en otro servidor).

alt (alternative text): Este atributo es crucial para la accesibilidad. Define un texto alternativo que describe la imagen para usuarios con discapacidad visual, lectores de pantalla y motores de búsqueda.


2. Ubicación de las imágenes:

Carpeta de imágenes: Lo ideal es crear una carpeta específica para tus imágenes dentro de tu proyecto web. Esto organiza tu código y facilita la gestión de los archivos.

Ruta relativa: Si la imagen está en la misma carpeta que tu archivo HTML, puedes usar una ruta relativa como src="miproyecto.jpg".

Ruta absoluta: Si la imagen está en otra carpeta, puedes usar una ruta absoluta como src="imagenes/miproyecto.jpg" o una URL remota como src="https://www.example.com/images/miproyecto.jpg".


3. Atributos opcionales:

width y height: Estos atributos controlan el ancho y alto de la imagen en píxeles. Si no se especifican, la imagen se mostrará en su tamaño original.

border: Define un borde alrededor de la imagen, por ejemplo border="1px solid black".

title: Agrega un texto de título a la imagen que se muestra al pasar el ratón por encima.


4. Diferencias entre Alt y Title

alt (Texto alternativo)

Propósito: El texto alternativo se usa para describir la imagen para usuarios que no pueden verla. Esto incluye personas con discapacidades visuales, usuarios que navegan con lectores de pantalla, o aquellos que tienen una conexión a internet lenta y la imagen tarda en cargar.

Importancia: Es crucial para la accesibilidad. El texto alt permite a los usuarios comprender el contenido de la imagen y navegar por el sitio web de forma efectiva.

Ejemplo: <img src="imagen.jpg" alt="Un gato durmiendo en un sofá">

title (Título)

Propósito: El título se muestra como un tooltip o información adicional cuando el usuario coloca el cursor sobre la imagen.

Importancia: Proporciona información adicional sobre la imagen, pero no es esencial para la accesibilidad.

Ejemplo: <img src="imagen.jpg" alt="Un gato durmiendo en un sofá" title="Gato adorable durmiendo la siesta">

REGION ANDINA

  LA REGION ANDINA La zona andina de Colombia es una de las cinco principales regiones geográficas del país y destaca por ser la más poblada...