📚 Actividades Teóricas - Tecnología

1. Explica con tus propias palabras ¿qué es un formulario en HTML y para qué sirve?

💡 Espacio sugerido: 4 líneas aproximadamente

2. Completa la siguiente tabla sobre las etiquetas de formularios:

3. Diferencia entre <input type='text'> y <textarea>. Menciona 3 diferencias y cuándo usarías cada uno:

💡 Espacio sugerido: 5 líneas aproximadamente

4. Analiza el siguiente código y responde: <form action='/enviar' method='post'> <label for='email'>Correo:</label> <input type='email' id='email' name='email' required> </form> a) ¿Qué hace el atributo 'action'? b) ¿Qué significa 'method="post"'? c) ¿Por qué es importante el atributo 'for' en <label>? d) ¿Qué hace el atributo 'required'?

💡 Espacio sugerido: 6 líneas aproximadamente

5. Diseña (en papel o describiéndolo) un formulario de registro para una biblioteca escolar que solicite: nombre, grado, correo, y lista de libros favoritos. Indica qué tipo de input usarías para cada campo y por qué.

💡 Espacio sugerido: 5 líneas aproximadamente

1. Define con tus propias palabras: a) ¿Qué es la validación de formularios? b) ¿Por qué es importante validar los datos antes de enviarlos?

💡 Espacio sugerido: 4 líneas aproximadamente

2. Completa la tabla comparativa sobre validación HTML vs JavaScript:

3. Enumera y explica 5 atributos HTML que sirven para validar formularios:

💡 Espacio sugerido: 6 líneas aproximadamente

4. Observa este código JavaScript de validación: function validarFormulario() { let nombre = document.getElementById('nombre').value; if (nombre == '') { alert('El nombre es obligatorio'); return false; } return true; } a) ¿Qué hace la función document.getElementById()? b) ¿Qué verifica el condicional if? c) ¿Qué significa 'return false'? d) ¿En qué momento se ejecutaría esta función?

💡 Espacio sugerido: 6 líneas aproximadamente

5. Caso práctico: Estás creando un formulario de inscripción a un evento. ¿Qué validaciones aplicarías para los siguientes campos y por qué? - Nombre completo - Edad - Correo electrónico - Teléfono - Fecha de nacimiento

💡 Espacio sugerido: 6 líneas aproximadamente

1. Explica qué son los pseudo-selectores en CSS y para qué sirven los siguientes: a) :hover b) :focus c) :valid d) :invalid

💡 Espacio sugerido: 5 líneas aproximadamente

2. Observa este código CSS: input:focus { border: 2px solid blue; box-shadow: 0 0 5px rgba(0,0,255,0.5); transition: all 0.3s ease; } a) ¿Cuándo se aplica este estilo? b) ¿Qué hace la propiedad 'box-shadow'? c) ¿Qué significa 'transition: all 0.3s ease'? d) ¿Cómo mejora esto la experiencia del usuario?

💡 Espacio sugerido: 6 líneas aproximadamente

3. Menciona 5 propiedades CSS importantes para mejorar el diseño de formularios y explica qué hace cada una:

💡 Espacio sugerido: 6 líneas aproximadamente

4. ¿Por qué es importante aplicar estilos visuales diferentes para indicar: - Un campo vacío obligatorio - Un campo con error - Un campo válido - Un campo enfocado (activo) Da ejemplos de cómo lo harías con CSS.

💡 Espacio sugerido: 6 líneas aproximadamente

5. Diseña (describe) un esquema de colores y estilos para un formulario de contacto profesional. Indica: - Color de fondo - Colores de texto - Estilos de botones - Efectos hover - Estilos de campos Justifica tus elecciones pensando en usabilidad y accesibilidad.

💡 Espacio sugerido: 6 líneas aproximadamente

1. Explica la función de cada lenguaje en el desarrollo web: a) HTML: b) CSS: c) JavaScript:

💡 Espacio sugerido: 4 líneas aproximadamente

2. Describe la estructura básica de una página web completa. ¿Qué elementos debe contener en: - Encabezado (<header>) - Cuerpo (<main>) - Pie de página (<footer>) - Navegación (<nav>)

💡 Espacio sugerido: 6 líneas aproximadamente

3. Explica cómo se vinculan los archivos CSS y JavaScript con el HTML. Escribe el código necesario para cada uno:

💡 Espacio sugerido: 4 líneas aproximadamente

4. Diferencia entre página web estática e interactiva: a) Define cada concepto b) Menciona 3 características de cada una c) Da 2 ejemplos de cada tipo d) ¿Qué lenguaje permite la interactividad?

💡 Espacio sugerido: 6 líneas aproximadamente

5. Planifica un sitio web completo para tu colegio: a) ¿Qué secciones incluirías? (mínimo 4) b) ¿Qué tipo de formularios agregarías y por qué? c) ¿Qué elementos interactivos implementarías con JavaScript? d) ¿Qué estilo visual (colores, tipografía) usarías y por qué? e) Dibuja o describe la estructura de la página principal

💡 Espacio sugerido: 8 líneas aproximadamente

6. Reflexión: ¿Por qué es importante que un sitio web tenga: - Buena estructura HTML - Diseño atractivo con CSS - Interactividad con JavaScript - Validación de datos Relaciona cada aspecto con la experiencia del usuario.

💡 Espacio sugerido: 6 líneas aproximadamente