lunes, 27 de enero de 2025

ARDUINO UNO R3 Y SUS PINES

 

ARDUINO UNO R3 Y SUS PINES



Pines Digitales (0-13):

Función: Se usan para entradas y salidas digitales. Pueden leer si un pin está en ALTO (5V) o BAJO (0V) o enviar señales ALTO o BAJO.

 

Versatilidad: Son útiles para interactuar con botones, LEDs, relés, sensores digitales, etc.

PWM (~) (Pines 3, 5, 6, 9, 10, 11): Algunos pines digitales tienen capacidad PWM (Modulación por Ancho de Pulso). Permite simular salidas analógicas, como controlar el brillo de un LED o la velocidad de un motor.

 

Pines Analógicos (A0-A5):

Función: Se usan para entradas analógicas. Pueden leer voltajes variables entre 0V y 5V.

Versatilidad: Son útiles para conectar sensores analógicos, como potenciómetros, sensores de luz, de temperatura, etc.

Conversión A/D: El Arduino convierte estos voltajes analógicos a valores digitales (0-1023) para que el microcontrolador los entienda.

 

Pines de Alimentación:

5V: Proporciona 5 voltios de corriente continua. Se usa para alimentar circuitos externos que trabajen a 5V.

3.3V: Proporciona 3.3 voltios de corriente continua. Se usa para alimentar circuitos externos que trabajen a 3.3V

GND (Tierra): Es el punto de referencia de 0V. Se usa para completar circuitos.

Vin: Se usa para alimentar el Arduino mediante una fuente de alimentación externa, como una batería.

IOREF: Proporciona la referencia de voltaje de operación del microcontrolador.

 

Otros Pines:

AREF: Pin de referencia para la entrada analógica. Se puede usar para establecer un voltaje de referencia para las conversiones A/D.

RESET: Se usa para resetear (reiniciar) el microcontrolador.


Pines de Comunicación:

TX (Pin Digital 1): Pin de transmisión serial. Se usa para enviar datos serialmente a un computador u otro dispositivo.

 RX (Pin Digital 0): Pin de recepción serial. Se usa para recibir datos serialmente desde un computador u otro dispositivo.

SPI (Pines 10, 11, 12, 13): Estos pines se usan para comunicación SPI (Serial Peripheral Interface), para conectar dispositivos externos que se comuniquen mediante este protocolo.

I2C/TWI (Pines A4, A5): Estos pines se usan para comunicación I2C (Inter-Integrated Circuit), para conectar dispositivos externos que se comuniquen mediante este protocolo.

 

Puntos Clave:

Multifuncionalidad: Algunos pines tienen más de una función (por ejemplo, los pines digitales con PWM).

Limitaciones de Corriente: Los pines del Arduino tienen un límite de corriente que pueden suministrar, por lo que es importante considerar este dato antes de conectar cualquier circuito.

Referencia del Diagrama: Siempre consulta el diagrama de pines de la placa Arduino Uno R3 para confirmar las funciones de los pines.



jueves, 23 de enero de 2025

HTML SEMANTICO

 

HTML SEMANTICO

WEB 3,O WEB SEMANTICA


Objetivo General: Que los estudiantes comprendan la importancia de utilizar etiquetas HTML con significado (semánticas) para estructurar el contenido de una página web de forma clara y lógica.

Introducción al HTML Semántico

El HTML SEMANTICO Les ayudará a construir páginas web más organizadas, accesibles y fáciles de entender.

"Semántico significa 'relacionado con el significado'. En HTML, las etiquetas semánticas son aquellas que le dicen al navegador y a otras personas (como los buscadores) qué tipo de contenido estamos mostrando."


 Presentación de Etiquetas Semánticas Básicas:

header: "Es la cabecera de la página o de una sección. Generalmente contiene el título y el logo."

·         Ejemplo: "Imaginemos que es como el letrero de la entrada de una casa."

nav: "Es la zona de navegación, donde ponemos los enlaces a otras partes de la página o a otras páginas."

·         Ejemplo: "Es como el mapa de la casa, que te dice dónde está cada habitación."

main: "Es la parte principal de la página, donde va el contenido más importante."

·         Ejemplo: "Es como la sala de estar, donde pasamos más tiempo."

article: "Es un artículo, como una noticia o una entrada de blog."

·         Ejemplo: "Es como una historia o una carta que podemos leer."

section: "Es una sección dentro del contenido, para organizar diferentes partes."

·         Ejemplo: "Es como una habitación dentro de la casa."

aside: "Es contenido relacionado pero no esencial, como información adicional o publicidad."

     ·         Ejemplo: "Es como el jardín, algo bonito que está al lado de la casa."

footer: "Es el pie de página, generalmente contiene información de contacto o derechos de autor."

·         Ejemplo: "Es como el buzón, que está al final de la casa."


Codigo de ejemplo (semantico.html)

<body>

   <header>

     <h1>Mi Blog</h1>

    </header>

    <nav>

      <a href="#">Inicio</a>

      <a href="#">Blog</a>

    </nav>

    <main>

       <article>

         <h2>Primer Artículo</h2>

         <p>Contenido del artículo...</p>

       </article>

    </main>

    <aside>

     <h3>Contenido extra</h3>

    </aside>

    <footer>

     <p>Derechos Reservados 2024</p>

    </footer>

</body>

 

Ejercicio 1: "Identifiquen en la página 'Hola Mundo' qué etiquetas semánticas podríamos usar para mejorarla." (Ej: podríamos meter el h1 en un header)

Ejercicio 2: "Piense cómo dividiría una página web sobre su tema favorito utilizando header, nav, main, article, section, aside y footer. No necesitan escribir código, solo describirlo."

Aplicación y Práctica del HTML Semántico

"¿Qué significa HTML semántico? ¿Cuáles son algunas etiquetas semánticas que aprendimos?"

·         Paso 1: Abrir el editor de código.

·         Paso 2: Crear un nuevo archivo HTML con la estructura básica (<!DOCTYPE html>, <html>, <head>, <body>).

·         Paso 3: Escribir el código de una página web sencilla siguiendo las siguientes instrucciones.

 

Ejemplo:

·         Paso 3.1: Colocar un encabezado con header que contenga un h1 con el título del proyecto (ej. "Mi Blog de Animales").

·         Paso 3.2: Crear una barra de navegación con nav que tenga enlaces a diferentes secciones (ej. "Perros", "Gatos", "Aves").

·         Paso 3.3: Escribir el contenido principal con main con al menos un article con un título y un párrafo.

·         Paso 3.4: Agregar un aside con información adicional.

·         Paso 3.5: Agregar un footer con información de derechos de autor.

·         Los estudiantes deberán completar el codigo (contenido).

 

Algunas de las ventajas del HTML semántico:

·         Mejora la organización del contenido.

·         Hace más fácil entender el código para otros programadores.

·         Ayuda a los buscadores a entender mejor el contenido de la página.

·         Mejora la accesibilidad para personas que usan lectores de pantalla.

 

Ejercicio 3:

"Transforma tu 'Hola Mundo'": tomen el código de "Hola Mundo" y lo mejoran añadiendo etiquetas semánticas (header, main, footer).

"Mi Página Personal Semántica": Crear una página web básica sobre usted mismo usando las etiquetas semánticas aprendidas.

 

 


viernes, 17 de enero de 2025

HOLA MUNDO

                                                             HOLA MUNDO

 

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

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

    <title>Mi Primera Web - ¡Hola Mundo!</title>

</head>

<body>

    <h1>¡Hola Mundo!</h1>

    <p>Esta es mi primera página web.</p>

</body>

</html>

 Actividad: copie y pegue en un archivo de texto y guardelo con la extension .html y ejecutelo, debe ver en pantalla algo similar a:



Transcriba en su cuaderno y prepare sustentación

1. <!DOCTYPE html>

Explicación: Esta línea no es una etiqueta HTML en sí misma, sino una declaración que le dice al navegador qué tipo de documento está a punto de leer.

html: le especifica al navegador que este es un documento HTML (la versión más reciente es HTML5).

 

2. <html lang="es">

<html>: Indica el comienzo del documento HTML

lang="es": Es un atributo que especifica que el idioma principal del contenido es el español.

 

3. <head>

<head> contiene información sobre la página que no es visible directamente en el contenido principal,

               pero es importante para el navegador, los motores de búsqueda y otras herramientas.

                             Tambien marca el inicio de la sección de "cabeza" o metadatos de la página.

 

4. <meta charset="UTF-8">

Esta etiqueta proporciona información sobre la codificación de caracteres que se utiliza en la página.

charset="UTF-8": Especifica que la codificación de caracteres es UTF-8. UTF-8 es un estándar muy

común que permite mostrar correctamente caracteres de casi todos los idiomas, incluidos los acentos y las eñes

 

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

Esta etiqueta es importante para que la página se vea bien en diferentes dispositivos, como computadoras,

tablets y teléfonos.

              name="viewport": Indica que este meta tag es para la configuración de la "viewport" (el área visible)

content="width=device-width, initial-scale=1.0": width=device-width: Establece que el ancho de la página

debe ser el mismo que el ancho del dispositivo.

initial-scale=1.0: Establece el nivel de zoom inicial a 1 (sin zoom).

 

En pocas palabras: Hace que la página se vea bien en todos los dispositivos y evita que se vea muy pequeña o con zoom en teléfonos móviles.

 

6. <title>Mi Primera Web - ¡Hola Mundo!</title>

<title>: Marca el inicio del título de la página.

 

Mi Primera Web - ¡Hola Mundo!: Es el texto que se muestra como el título.

              Es el nombre de la página web que se ve en la parte superior del navegador.

 

7. </head>

</head>: Marca el fin de la sección de la "cabeza".

 

8. <body>

<body>: Indica el inicio del "cuerpo" o contenido principal de la página.

Es como el interior de un libro: aquí está todo el texto, las imágenes, los videos...

 

9. <h1>¡Hola Mundo!</h1>

 Marca el inicio del encabezado principal.

</h1>: Marca el final del encabezado principal.

 

10. <p>Esta es mi primera página web.</p>

Esta es la etiqueta para un párrafo (paragraph) de texto. Se usa para mostrar texto normal.

       <p>: Marca el inicio de un párrafo.

       </p>: Marca el fin del párrafo.

 

11. </body>

</body>: Marca el fin del "cuerpo" de la página.

 

12. </html>

</html>: Marca el fin del documento HTML.

 

 

Cada página web tiene un esqueleto de etiquetas HTML.

 

<!DOCTYPE html>: Es una instrucción para el navegador.

 

<html>: La etiqueta principal de la página.

 

<head>: Contiene información para el navegador, no visible en el contenido principal.

 

<body>: Contiene todo el contenido visible en la página.

 

<h1>: Título principal.

 

<p>: Párrafos de texto.


jueves, 9 de enero de 2025

PRESENTACION DE TEMAS PERIODOS 1 Y 2

                      

PLAN DE TRABAJO PRIMER Y SEGUNDO PERIODO

Estructura General por Semana:

·         Introducción (10-15 min): Breve repaso de la semana anterior y presentación del tema de la semana.

·         Teoría (20-25 min): Explicación concisa del concepto, con ejemplos claros y sencillos.

·         Práctica (20-25 min): Ejercicios guiados para practicar el concepto. Se trabajará individualmente o en parejas.

·         Cierre (5-10 min): Resumen de lo aprendido y anticipación de la siguiente clase.

 

Plan de Clases Detallado:

Bloque 1: Introducción al Mundo Web (Semanas 1-4)

Semana 1: ¿Qué es la Web?

Semana 2: Primeros Pasos con HTML - Traer resuelto pagina html con el "hola mundo"

Semana 3: Más Etiquetas HTML - Investigar que son etiquetas semanticas y para que sirven

Semana 4: Proyecto 1 - Mi Presentación Web

                Práctica: Cada estudiante crea una página web sencilla para presentarse.

               Debe incluir un texto de sus aficiones, es decir, que le gusta hacer (hoby / pasatienpo),

               una foto personal, una descripción de sus cualidades, y enlaces a sus redes sociales

               (si las tienen), o en su defecto link a por lo menos 3 redes sociales.

 

Bloque 2: Estilo con CSS (Semanas 5-9)

Semana 5: Introducción a CSS

Semana 6: Propiedades CSS Básicas

Semana 7: Modelo de Caja (Box Model)

Semana 8: Posicionamiento con CSS

Semana 9: Proyecto 2 - Galería de Imágenes

                Práctica: Crear una página web con una galería de imágenes. Debe usar CSS para maquetar la galería

               y hacerla visualmente atractiva.

 

Bloque 3: Interactividad con JavaScript (Semanas 10-16)

Semana 10: Introducción a JavaScript

Semana 11: Operadores y Condicionales

Semana 12: Bucles

Semana 13: Funciones

Semana 14: Manipulación del DOM

Semana 15: Eventos

Semana 16: Proyecto 3 - Calculadora Sencilla

                Práctica: Crear una calculadora básica con HTML, CSS y JavaScript. La calculadora deberá realizar

              operaciones básicas como suma, resta, multiplicación y división.

 

Bloque 4: Profundización y Proyectos Finales (Semanas 17-20)

Semana 17: Formularios HTML

Semana 18: Validación de Formularios con JavaScript

Semana 19: Proyecto 4 - Página Web Personalizable

                Práctica: Los estudiantes diseñan una página web con al menos 3 secciones en donde deben mostrar

               una experiencia o habilidad, pueden usar un formulario, elementos de navegacion y estilos en general.

Semana 20: Presentación de Proyectos Finales y Repaso

                Práctica: Cada estudiante presenta su proyecto final al resto del grupo. Se realiza una sesión de preguntas

               y respuestas.

 

Herramientas y Recursos:

             Editor de Código Online: CodePen, JSFiddle, StackBlitz.

             Recursos de Aprendizaje: W3Schools, MDN Web Docs.

             Imágenes Gratis: Unsplash, Pixabay.

             Plantillas CSS: Bootstrap (opcional, para una introducción a frameworks).

EVALUACION DE INFORMATICA

 EVALUACION DE INFORMATICA Instrucciones:  Responde a las siguientes preguntas de la forma más clara y completa posible. 1. Pregunta: ¿Cuál...