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.

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.

 

 

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.

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