COMO CENTRAR UNA IMAGEN EN LA PAGINA

                                         COMO CENTRAR UNA IMAGEN EN UNA PAGINA

 Teniendo como ejemplo el ejercicio anterior, proceda a seguir la secuencia, y debajo de donde colocó el titulo centrado, proceda según Nuestro Punto de Partida (El HTML):

Tenemos esta estructura;

<div class="imagen-contenedor">

    <!-- La imagen que quieres centrar -->

    <img src="https://edutechsiglo21.com/2025/imgs/jovencita.jpg" alt="imagen digital" width="200" height="200">

</div>

 

• div.imagen-contenedor: De nuevo, una caja invisible. Su trabajo es "contener" a la imagen. Nuestra meta es centrar esta caja completa en medio de la página (horizontalmente).
• <img>: La imagen en sí misma, que está dentro de la caja. Ya tiene un ancho (width="200") y alto (height="200") definidos en el HTML.

 

El Objetivo:

Queremos que la caja div.imagen-contenedor (y por lo tanto, la imagen que contiene) se sitúe justo en el centro horizontal de la pantalla (en pantallas grandes).

 

La Herramienta: CSS

Usaremos nuestro archivo estilos.css para darle las instrucciones.

 

¡Vamos al Grano! Paso a Paso:

 

Paso 1: Seleccionar la Caja Contenedora en CSS

Igual que antes, necesitamos decirle al CSS a qué elemento nos referimos. Usamos su clase:

.imagen-contenedor {

    /* Instrucciones para la caja de la imagen aquí */

}

 

Paso 2: ¡Requisito Clave! Definir un Ancho (width)

Aquí viene un punto muy importante: para que el navegador pueda centrar horizontalmente un elemento de bloque (como un div) usando márgenes automáticos (lo veremos en el siguiente paso), ¡ese elemento debe tener un ancho definido!

El navegador necesita saber cuánto mide el objeto para calcular cuánto espacio sobra a cada lado y distribuirlo por igual.

Como nuestra imagen mide 200px de ancho, parece lógico que nuestra caja contenedora también mida 200px de ancho.

Añadimos la propiedad width:

.imagen-contenedor {

    width: 200px; /* ¡Fundamental! Le damos el mismo ancho que la imagen */

}

 

Paso 3: ¡La Magia para Centrar el Bloque! Márgenes Automáticos (margin: auto)

Esta es la técnica estándar y más común para centrar elementos de bloque horizontalmente. Usamos la propiedad margin.

Podemos hacerlo de dos formas:

• Forma Larga:
• .imagen-contenedor {
•     width: 200px;
•     margin-left: auto;  /* Margen izquierdo automático */
•     margin-right: auto; /* Margen derecho automático */

}

 

Al poner auto en los márgenes izquierdo y derecho, le decimos al navegador: "Calcula tú mismo el espacio que sobra a la izquierda y a la derecha, y repártelo por igual". ¡Esto centra la caja!

• Forma Corta (¡Más común!):
• .imagen-contenedor {
•     width: 200px;
•     margin: 0 auto; /* Forma abreviada y preferida */

}

• margin: 0 auto; es un atajo.
• El primer valor (0) se aplica al margen superior e inferior (en este caso, no le ponemos margen arriba ni abajo).
• El segundo valor (auto) se aplica al margen izquierdo y derecho. ¡Logra el mismo efecto de centrado!

 

Paso 4: (Buena Práctica) Asegurar que la Imagen se Centre Dentro del Contenedor

Aunque en este caso nuestra caja (div) mide exactamente lo mismo que la imagen (200px), por lo que la imagen ya llena la caja, es una buena práctica usar también text-align: center; en el contenedor.

¿Por qué?

1. Si en el futuro la caja fuera más ancha que la imagen, text-align: center; se encargaría de centrar la imagen dentro de esa caja más grande.
2. Refuerza el concepto: margin: auto centra el bloque, text-align: center centra el contenido inline dentro del bloque.

Añadimos text-align: center;:

.imagen-contenedor {

    width: 200px;

    margin: 0 auto;      /* Centra la CAJA (el div) en la página */

    text-align: center;  /* Centra el CONTENIDO (la img) DENTRO de la caja */

}

 

Paso 5: (Opcional) Añadir Espacio Debajo

Para que la imagen no quede pegada a lo que venga después (como el pie de página), podemos añadir un margen inferior:

.imagen-contenedor {

    width: 200px;

    margin: 0 auto 30px auto; /* Forma corta: Arriba 0, Derecha Auto, Abajo 30px, Izquierda Auto */

    /* O más claro: */

    /* margin: 0 auto; */

    /* margin-bottom: 30px; */ /* Añade espacio debajo */

 

    text-align: center;

}

 

He mostrado dos formas de añadir el margen inferior junto con el centrado. La segunda (margin-bottom: 30px;) suele ser más clara para empezar.

¡Resultado Final en CSS!

La regla completa y recomendada en estilos.css sería:

/* --- Estilos para el Contenedor de la Imagen --- */

.imagen-contenedor {

  width: 200px;         /* 1. Definir un ancho es crucial */

 

  /* 2. Centrar el PROPIO DIV en la página */

  margin-left: auto;

  margin-right: auto;

  /* Forma corta equivalente: margin: 0 auto; */

 

  /* 3. Centrar la IMAGEN (contenido inline) DENTRO del div */

  text-align: center;

 

  /* 4. (Opcional) Espacio debajo para separar del footer */

  margin-bottom: 30px;

}

 

CÓMO COLOCAR UN TITULO CENTRADO CON CSS

 

CÓMO COLOCAR UN TITULO CENTRADO CON CSS

Nuestro Punto de Partida (El HTML):

El objetivo es aprender a integrar el archivo de estilo (style) al archivo .html, tome como base el siguiente codigo html: 

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

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

    <title>Titulo con imagen</title>

</head>

<body>

    

</body>

</html>

Instrucciones iniciales: vaya a Visual Studio Code, Barra lateral izquierda, Primera opcion (Explorador), haga clic en el primer icono (Nuevo Archivo), ingrese: titulo.html copie y pegue en Visual Sudio Code (VSCode) el anterior codigo.

¿Cómo integramos el titulo? Tenemos este pedacito de código HTML:

<!-- 1. Contenedor para el Título -->

<div class="titulo-contenedor">

    <h1>Título Centrado Sobre la Imagen</h1>

</div>

 

• <div>: Imaginen que es una caja transparente. Le hemos puesto una etiqueta (class="titulo-contenedor") para poder identificarla fácilmente desde nuestro CSS (estilos.css)
• <h1>: Es nuestro título principal. Queremos que este texto quede justo en el centro dentro de la caja div.

Objetivo especifico:

Queremos que el texto "Título Centrado Sobre la Imagen" aparezca perfectamente centrado horizontalmente dentro de su caja (div). Además, le daremos un fondo azul celeste a esa caja para que se vea mejor.

La Herramienta: CSS (Hojas de Estilo en Cascada)

CSS le dice al navegador cómo deben verse los elementos HTML.

 

¡Manos a la Obra! Paso a Paso:

Paso 1: Preparar nuestro archivo CSS

Asegúrense de tener un archivo CSS (por ejemplo, estilos.css) y que esté correctamente vinculado en la sección <head> de su archivo HTML, así:

<head>

    <meta charset="UTF-8">

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

    <title>Titulo con imagen</title>

    <link rel="stylesheet" href="estilos.css"> <!-- ¡Esta línea es clave! -->

</head>

 

Paso 2: Seleccionar el elemento CORRECTO en CSS

Queremos darle instrucciones a la caja (div) para que centre su contenido (h1). ¿Cómo identificamos esa caja en CSS? ¡Usando su class! En CSS, las clases se seleccionan poniendo un punto (.) delante del nombre.

Entonces, en nuestro archivo estilos.css, escribimos:

.titulo-contenedor {

    /* Aquí irán las instrucciones para esta caja */

}

 

Paso 3: Aplicar la propiedad para centrar texto

Para centrar texto (y otros elementos que se comportan como texto, como imágenes pequeñas o enlaces) dentro de un contenedor, usamos la propiedad text-align.

Añadimos esta línea dentro de las llaves {} de nuestro selector:

.titulo-contenedor {

    text-align: center; /* ¡Esta es la instrucción clave! */

}

 

• text-align: Le dice a la caja cómo alinear el texto (y contenido similar) en su interior.
• center: Es el valor que le indica que lo alinee al centro.

Paso 4: Añadir el fondo de color (¡Extra!)

El ejercicio también pedía un fondo azul celeste para la caja del título. Usamos la propiedad background-color:

.titulo-contenedor {

    text-align: center;

    background-color: lightblue; /* Añade el color de fondo */

}

 

• background-color: Establece el color de fondo del elemento.
• lightblue: Es un nombre de color predefinido en CSS (podríamos usar otros como #add8e6 que es el código hexadecimal para el mismo color).

Paso 5: (Opcional pero Recomendado) Añadir un poco de espacio interior (Padding)

A veces, el texto queda muy pegado a los bordes superior e inferior de la caja. Podemos añadir espacio dentro de la caja con la propiedad padding.

.titulo-contenedor {

    text-align: center;

    background-color: lightblue;

    padding: 15px 0; /* Añade 15px de espacio arriba/abajo, 0px a los lados */

}

 

• padding: Espacio entre el contenido y el borde interior del elemento.
• 15px 0: Es una forma corta. El primer valor (15px) se aplica arriba y abajo. El segundo valor (0) se aplica a izquierda y derecha. (Si pusiéramos solo padding: 15px; se aplicaría a los cuatro lados). 

¡Listo! El Resultado Final en CSS:

Nuestro archivo estilos.css ahora tendrá esta regla:

.titulo-contenedor {

  background-color: lightblue; /* Fondo azul celeste */

  text-align: center;       /* Centra el TEXTO (el h1) DENTRO de este div */

  padding: 15px 0;          /* Añade espacio arriba y abajo para que no se vea apretado */

  /* (Podríamos añadir más estilos aquí si quisiéramos) */

}

 

Ejercicio: Cob todo lo explciado proceda a crear una pagina web en Visual Studio Code donde ponga en practica lo aprendido y presente el resultado al profesor, debe aprender en detalle lo que acaba de hacer y ser capaz de dar razón de ello cuando se le pregunte.

COLOCAR MAPA DE GOOGLE

 COLOCAR MAPA DE GOOGLE

EL PASO A PASO

Paso 1: Cargar la Estructura Básica del HTML, “contactenos.html”

1. Abre en tu tu editor de texto (bloc de notas / vscode) el archivo contactenos.html
2. El lugar donde ira el mapa es dentro de la etiqueta <main> y justo antes de cerrar la etiqueta </main>, asi que ten en cuenta este detalle dentro de esta etiqueta debes preparar el espacio para albergar el mapa, asi que debes poner este div:

<!-- Contenedor para el mapa -->

<div class="ctns_map-container">

   <!—aquí dentro y justo debajo de esta linea debes pegar el codigo que obtendras en el paso siguiente -->

 

</div>

3. Recuerda que los estilos para el mapa van dentro de las etiquetas <style> y </style>

Paso 2: Obtener el Código del Mapa en Google Maps

1. Abre tu navegador web y ve a Google Maps.
2. En la barra de búsqueda, escribe: Corporación Colegio Trinitario, Cartagena. Asegúrate de que te muestre la ubicación correcta.
3. Acerca un poco la imagen con el zoom, y has un clic en la ubicación del colegio para que salga el icono de ubicación
4. Haz clic en el botón "Compartir" (Share).

5. Se abrirá una ventana. Elige la pestaña "Insertar un mapa" (Embed a map)
6. Verás un código que empieza con <iframe src=.... Haz clic en el botón "COPIAR HTML". ¡Ya tienes el código del mapa! No te preocupes por el tamaño que dice ahí (width/height), lo cambiaremos con CSS.

Paso 3: Insertar el Código del Mapa en tu HTML

1. Vuelve a abrir tu archivo contactenos.html en el editor de texto.
2. Busca el lugar donde te dije en el paso 1 de donde iria el mapa
3. Pega en ese lugar el código que copiaste de Google Maps

Paso 4: Aplicando los Estilos

1. En el lugar donde te dije que irian los estilos debes pegar el siguienrte codigo

/* --- Estilos Personalizados para el Mapa de Contacto --- */

 

.ctns_map-container {

  /* --- Control del Tamaño y Proporción --- */

  position: relative; /* Necesario para posicionar el iframe dentro */

  width: 90%;         /* Ancho relativo al contenedor padre (ej. main) */

  max-width: 750px;   /* Ancho máximo para que no sea demasiado grande en pantallas anchas */

  padding-bottom: 50%; /* Proporción Rectangular (alto = 50% del ancho). Puedes ajustar este % (ej: 60% para un rectángulo más alto, 75% para 4:3) */

  height: 0;          /* La altura se define por el padding-bottom */

  overflow: hidden;   /* Oculta cualquier parte del iframe que pudiera sobresalir */

 

  /* --- Centrado y Espaciado --- */

  margin: 30px auto;  /* Centrado horizontal (auto) y margen vertical (30px arriba/abajo) */

 

  /* --- Estilo Minimalista/Profesional --- */

  border: 1px solid #e0e0e0; /* Borde sutil y claro */

  border-radius: 6px;         /* Esquinas ligeramente redondeadas */

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); /* Sombra suave y discreta */

}

 

.ctns_map-container iframe {

  /* --- Posicionamiento del Iframe --- */

  position: absolute; /* Posición absoluta respecto al contenedor */

  top: 0;

  left: 0;

  width: 100%;  /* Ocupa todo el ancho del contenedor */

  height: 100%; /* Ocupa toda la altura del contenedor (definida por padding-bottom) */

  border: 0;    /* Asegura que el iframe no tenga borde propio */

}

 

/* --- Fin Estilos Mapa de Contacto --- */

 

Paso 5: ¡Probar la Página!

1. Guarda el archivo contactenos
2. Busca el archivo contactenos.html en tu explorador de archivos.
3. Haz doble clic sobre él (o clic derecho -> Abrir con -> tu navegador preferido).
4. ¡Deberías ver tu página web! Comprueba que:
• Aparece el título "Información de Contacto".
• Se ve el mapa de Google Maps centrado en la página.
• El mapa tiene forma rectangular.
• El mapa no ocupa toda la pantalla.
• Tiene un borde delgado, esquinas redondeadas y una pequeña sombra.
• Si cambias el tamaño de la ventana del navegador, el mapa se ajusta (es responsive).

 

EL BUZZER O ZUMBADOR

 EL BUZZER O ZUMBADOR

CLIC AQUI PARA DESCARGAR CODIGO DEL BUZZER

¿Qué es un Buzzer (Zumbador)?

En esencia, un buzzer es un dispositivo de señalización de audio, generalmente electrónico o electromecánico. Su propósito principal es convertir una señal eléctrica en un sonido audible, típicamente un zumbido, tono o "beep". Se usan comúnmente como alarmas, indicadores o para proporcionar retroalimentación auditiva simple en dispositivos electrónicos.

Existen dos tipos principales que encontrarás al trabajar con microcontroladores como Arduino: Activos y Pasivos. La diferencia clave radica en si tienen o no un oscilador interno.

---

1. Buzzer Activo

• ¿Qué es? Un buzzer activo contiene su propio circuito oscilador interno. Esto significa que solo necesita una fuente de alimentación de corriente continua (DC) para generar un sonido.

• ¿Cómo funciona? Cuando aplicas el voltaje correcto (generalmente especificado en el componente, como 5V o 3.3V) a sus terminales (respetando la polaridad), el circuito oscilador interno se activa y empieza a generar una señal eléctrica oscilante a una frecuencia fija. Esta señal hace vibrar un diafragma (a menudo piezoeléctrico o electromagnético), produciendo el sonido característico del buzzer.

• Frecuencia/Tono: La frecuencia (y por lo tanto, el tono) del sonido está determinada por el circuito interno y no puede ser cambiada por la señal externa (más allá de encenderlo o apagarlo). Sonará siempre igual cada vez que lo enciendas.

• Control (Arduino): Muy simple. Lo tratas como un LED. Conectas un pin digital del Arduino a la terminal positiva (+) del buzzer (a menudo a través de una resistencia limitadora si el buzzer consume mucha corriente, aunque muchos pequeños para Arduino no la necesitan o ya la incluyen internamente) y la terminal negativa (-) a GND.

  • Para hacerlo sonar: digitalWrite(pinBuzzer, HIGH);

  • Para apagarlo: digitalWrite(pinBuzzer, LOW);

• Identificación:

  • A menudo son un poco más grandes o altos que los pasivos.

  • Suelen tener una pegatina cubriendo el agujero superior (a veces removible).

  • Casi siempre tienen marcada la polaridad (+ y -).

  • Si conectas 5V y GND directamente (¡con cuidado y solo si sabes que es de 5V!), debería sonar. (Precaución: Haz esto solo si estás seguro de las especificaciones del buzzer).

• Pros:

  • Muy fácil de usar y controlar.

  • Requiere código mínimo.

  • Ideal para alertas simples y rápidas.

• Cons:

  • Solo produce un tono fijo. No puedes hacer melodías.

  • Menos versátil.

---

2. Buzzer Pasivo

• ¿Qué es? Un buzzer pasivo no tiene un oscilador interno. Es esencialmente un transductor piezoeléctrico o electromagnético simple. Necesita una señal eléctrica externa que ya esté oscilando (una señal de corriente alterna o una onda cuadrada pulsante) para producir sonido.

• ¿Cómo funciona? Funciona de manera similar a un pequeño altavoz. Debes proporcionarle una señal eléctrica que cambie rápidamente (oscile) a la frecuencia deseada. El buzzer vibra en respuesta a esta señal de entrada, generando sonido. La frecuencia de la señal de entrada determina directamente el tono (pitch) del sonido producido.

• Frecuencia/Tono: Puedes controlar el tono del sonido cambiando la frecuencia de la señal que le envías. Esto permite reproducir diferentes notas musicales y crear melodías simples.

• Control (Arduino): Requiere generar una señal oscilante. La forma más común y adecuada en Arduino es usar la función tone():

  • tone(pinBuzzer, frecuencia); // Empieza a generar un tono en el pin especificado con la frecuencia dada (en Hz).

  • tone(pinBuzzer, frecuencia, duracion); // Genera el tono por un tiempo específico (en milisegundos).

  • noTone(pinBuzzer); // Detiene la generación del tono en ese pin.

  • También puedes usar analogWrite() (PWM), pero tone() está específicamente diseñado para esto y es más preciso para frecuencias audibles.

• Identificación:

  • Suelen ser más pequeños o delgados que los activos.

  • A menudo tienen un agujero visible en la parte superior sin pegatina.

  • Pueden o no tener marcada la polaridad (los piezoeléctricos puros a veces no son polarizados, pero es buena práctica seguir las marcas si existen).

  • Si conectas 5V y GND directamente, no sonará o hará solo un pequeño "clic" al conectar/desconectar.

• Pros:

  • Puedes generar diferentes tonos y frecuencias.

  • Permite crear melodías y sonidos más complejos.

  • Más versátil.

• Cons:

  • Requiere un control más complejo (usar tone()/noTone()).

  • El código es un poco más elaborado.

---

Resumen y Cuándo Usar Cada Uno:

Característica	Buzzer Activo	Buzzer Pasivo
Oscilador Interno	Sí	No
Señal Necesaria	DC (Voltaje constante: HIGH/LOW)	AC (Señal oscilante: tone())
Control de Tono	No (Frecuencia fija)	Sí (Frecuencia controlable)
Complejidad (Uso)	Baja (digitalWrite())	Media (tone(), noTone())
Flexibilidad	Baja (Solo "beep" on/off)	Alta (Melodías, diferentes tonos)
Identificación Típica	Pegatina, más grande, polaridad	Agujero abierto, más pequeño

• Usa un Buzzer Activo si: Solo necesitas una simple alerta sonora, un indicador de encendido/apagado, o una alarma básica, y no te importa que el tono sea siempre el mismo. Quieres la solución más fácil de implementar.

• Usa un Buzzer Pasivo si: Necesitas reproducir diferentes notas musicales, crear melodías, o tener control sobre el tono exacto del sonido generado. Estás dispuesto a usar un poco más de código (tone()).