Curso: Desarrollo de Aplicaciones Web I

Entendiendo el Desarrollo Web

El desarrollo web es el proceso de construir y mantener sitios y aplicaciones que se ejecutan en un navegador web. Una aplicación web moderna típicamente se compone de tres capas interconectadas:

Front-end (Lado del Cliente): Es todo lo que el usuario ve e interactúa directamente en su navegador. Es la "cara" de la aplicación. Las tecnologías principales son:
- HTML: Define la estructura y el contenido.
- CSS: Define la presentación visual y el diseño.
- JavaScript: Añade interactividad y comportamiento dinámico.
Back-end (Lado del Servidor): Es la "lógica" detrás de escena. Se encarga del procesamiento de datos, la autenticación de usuarios, las reglas de negocio y la comunicación con la base de datos. Lenguajes comunes incluyen Python (con Django/Flask), PHP (con Laravel/Symfony), Node.js (con Express), Java (con Spring), Ruby (con Rails), etc.
Base de Datos: Donde se almacena y gestiona la información persistente de la aplicación (datos de usuarios, productos, publicaciones, etc.). Ejemplos: MySQL, PostgreSQL (relacionales), MongoDB, Firebase (NoSQL).

En este curso "Desarrollo de Aplicaciones Web I", nos concentraremos intensamente en el Front-end, construyendo una base sólida en HTML, CSS y JavaScript para crear interfaces de usuario visualmente atractivas y funcionalmente interactivas.

Un sitio web estático se compone principalmente de archivos HTML, CSS y JS que se entregan al navegador tal como están almacenados en el servidor. Un sitio web dinámico genera contenido sobre la marcha, a menudo interactuando con un back-end y una base de datos.

Módulo 1: HTML - La Estructura Esencial de la Web

HTML (HyperText Markup Language - Lenguaje de Marcado de Hipertexto) es el lenguaje fundamental para crear páginas web. No es un lenguaje de programación en el sentido tradicional (no tiene lógica compleja como bucles o condicionales por sí mismo), sino un lenguaje de marcado que define la estructura y el significado semántico del contenido.

¿Cómo Funciona HTML? El Poder de las Etiquetas

HTML utiliza "etiquetas" (tags) para marcar diferentes partes del contenido. La mayoría de las etiquetas vienen en pares: una etiqueta de apertura (ej: <p>) y una etiqueta de cierre (ej: </p>). El contenido entre estas etiquetas es lo que se ve afectado por la etiqueta.

Estructura Básica de un Documento HTML5:

Un documento HTML5 bien formado sigue una estructura estándar:


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Mi primera página web con MoriDevEdu">
    <title>Mi Primera Página Web</title>
    <link rel="stylesheet" href="ruta/a/mis_estilos.css"> <!-- Enlace a CSS externo -->
</head>
<body>
    <!-- Contenido visible de la página aquí -->
    <h1>¡Bienvenido a la Web!</h1>
    <p>Este es un párrafo de introducción al fascinante mundo de HTML.</p>
    <a href="https://www.moridevedu.com" target="_blank">Visita MoriDevEdu</a>
</body>
</html>

Desglose Detallado:

<!DOCTYPE html>: Declaración del tipo de documento. Le dice al navegador que esta página es HTML5, lo que asegura que se interprete usando los estándares más recientes.
<html lang="es">: Elemento raíz que envuelve todo el contenido. El atributo lang="es" indica que el idioma principal de la página es español, importante para la accesibilidad y los motores de búsqueda.
<head>: Contiene metainformación sobre el documento HTML que no se muestra directamente en la página visible, pero es crucial para el navegador y los motores de búsqueda.
- <meta charset="UTF-8">: Especifica la codificación de caracteres (UTF-8 es el estándar universal y soporta la mayoría de los caracteres y símbolos).
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura la ventana gráfica (viewport) para el diseño responsivo. width=device-width ajusta el ancho de la página al ancho del dispositivo, e initial-scale=1.0 establece el nivel de zoom inicial.
- <meta name="description" content="...">: Proporciona una breve descripción de la página, a menudo utilizada por los motores de búsqueda en los resultados.
- <title>...</title>: Define el título que aparece en la pestaña o barra de título del navegador y es muy importante para el SEO.
- <link rel="stylesheet" href="...">: Enlaza un archivo CSS externo para aplicar estilos a la página.
<body>: Contiene todo el contenido visible de la página web: texto, imágenes, enlaces, videos, etc.

Visualizador de Estructura HTML

Observa cómo se anidan las etiquetas para formar la estructura del documento:

<!DOCTYPE html>

<head>

<title> Título de la Página </title>

<body>

<h1> Encabezado Principal </h1>

<p> Párrafo de texto... </p>

</html>

(Este es un visualizador simplificado. Puedes usar las herramientas de desarrollador de tu navegador (F12) para inspeccionar la estructura real de cualquier página web.)

Elementos HTML Comunes y Semántica:

HTML5 introdujo muchas etiquetas semánticas que ayudan a describir el significado de su contenido tanto para el navegador como para los desarrolladores y las tecnologías de asistencia (como lectores de pantalla).

Encabezados: <h1> (el más importante) a <h6> (el menos importante). Usar para jerarquizar el contenido, no solo para cambiar el tamaño del texto.
Párrafos: <p>. Para bloques de texto.
Enlaces: <a href="URL" target="_blank" title="Descripción del enlace">Texto del enlace</a>. target="_blank" abre en una nueva pestaña.
Imágenes: <img src="ruta_imagen.jpg" alt="Texto descriptivo vital para accesibilidad" width="300" height="200">.
Listas: No ordenadas (<ul><li>...</li></ul>), Ordenadas (<ol><li>...</li></ol>), De Definición (<dl><dt>Término</dt><dd>Definición</dd></dl>).
Elementos Semánticos de Estructura HTML5:
- <header>: Cabecera del sitio o de una sección (logo, título, navegación principal).
- <nav>: Bloque de enlaces de navegación principal.
- <main>: Contenido principal y único de la página. Debe haber solo uno por página.
- <article>: Contenido independiente y autocontenido (ej: un post de blog, una noticia).
- <section>: Agrupación temática de contenido, usualmente con un encabezado.
- <aside>: Contenido complementario o tangencialmente relacionado (ej: barra lateral, publicidad).
- <footer>: Pie de página del sitio o de una sección (copyright, enlaces de contacto, mapa del sitio).
- <figure> y <figcaption>: Para agrupar contenido multimedia (como imágenes, diagramas) con su leyenda.
Otros Elementos Útiles: <div> (divisor genérico para agrupar y aplicar estilos), <span> (divisor genérico en línea), <br> (salto de línea), <hr> (línea horizontal temática), <strong> (importancia fuerte), <em> (énfasis), <code> (fragmento de código), <pre> (texto preformateado).

Constructor de Enlaces Dinámico

URL del Enlace: Texto del Enlace: Abrir en:

Aquí aparecerá el enlace...

Código HTML Generado:

<a href="...">...</a>

Buenas Prácticas HTML: Escribe código semántico, usa etiquetas para su propósito, indenta tu código para legibilidad, cierra todas las etiquetas que lo requieran (aunque algunos navegadores son permisivos), y valida tu HTML.

Módulo 2: CSS - Dando Estilo y Vida a tu Web

CSS (Cascading Style Sheets - Hojas de Estilo en Cascada) es el lenguaje que usamos para describir la presentación y el diseño de un documento HTML. Mientras HTML estructura el contenido, CSS lo embellece, controlando colores, fuentes, espaciado, layout y mucho más.

¿Cómo Funciona CSS? Reglas y Selectores

Una regla CSS consta de un selector y un bloque de declaraciones. El selector apunta al elemento(s) HTML que quieres estilizar, y cada declaración (dentro de llaves {}) consiste en una propiedad y un valor, separados por dos puntos y terminados con punto y coma.


/* Esto es un comentario en CSS */
selector {
    propiedad: valor;
    otra-propiedad: otro-valor;
}

/* Ejemplo: */
p { /* Selector de tipo: selecciona todos los elementos  */
    color: navy; /* Propiedad 'color' con valor 'navy' */
    font-size: 16px; /* Propiedad 'font-size' con valor '16px' */
}

.destacado { /* Selector de clase: selecciona todos los elementos con class="destacado" */
    background-color: yellow;
    font-weight: bold;
}

#titulo-principal { /* Selector de ID: selecciona el elemento con id="titulo-principal" */
    text-align: center;
    border-bottom: 2px solid gray;
}

Formas de Aplicar CSS:

CSS en Línea (Inline CSS): Usando el atributo style directamente en una etiqueta HTML.
```
<p style="color: blue; font-style: italic;">Este párrafo es azul e itálico.</p>
```
Desventajas: Difícil de mantener, alta especificidad, mezcla estructura y presentación. Usar con moderación.

CSS Interno o Embebido: Usando la etiqueta <style> dentro del <head> del documento HTML.


<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: green;
        }
    </style>
</head>

Ventajas: Útil para estilos específicos de una sola página. Desventajas: No se comparte entre múltiples páginas.

CSS Externo: Creando un archivo .css separado (ej: estilos.css) y enlazándolo en el <head> con la etiqueta <link>. ¡Esta es la forma recomendada y más común!

<head>
    <link rel="stylesheet" href="css/estilos.css">
</head>

estilos.css:


body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
.boton-primario {
    background-color: var(--primary-color); /* Usando variable CSS */
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
}

Ventajas: Separación de estructura (HTML) y presentación (CSS), archivos CSS pueden ser cacheados por el navegador, fácil mantenimiento para sitios con múltiples páginas.

Selectores CSS Avanzados y Específicos:

Dominar los selectores es clave para aplicar estilos con precisión.

Selectores de Atributo: Seleccionan elementos basados en sus atributos y valores.
- a[target="_blank"] { ... } (Enlaces que abren en nueva pestaña)
- input[type="submit"] { ... } (Botones de envío de formulario)
- img[alt~="paisaje"] { ... } (Imágenes cuyo texto alternativo contiene la palabra "paisaje")
Pseudo-clases: Aplican estilos a elementos en estados específicos o según su posición en el DOM.
- Interactivos: :hover (al pasar el ratón), :active (al hacer clic), :focus (cuando un input tiene el foco).
- Enlaces: :link (no visitado), :visited (visitado).
- Estructurales: :first-child, :last-child, :nth-child(2n) (hijos pares), :nth-of-type(odd) (hijos impares de su tipo).
- Negación: :not(.clase-excluida).
Pseudo-elementos: Permiten estilizar partes específicas de un elemento.
- ::before y ::after: Para insertar contenido cosmético antes o después del contenido real del elemento (iconos, decoraciones).
- ::first-line: Primera línea de un bloque de texto.
- ::first-letter: Primera letra de un bloque de texto (capitular).
- ::selection: Estilo del texto seleccionado por el usuario.

Probador de Pseudo-clases

Observa cómo el botón cambia con :hover, :focus, y :active.

Item 1
Item 2
Item 3
Item 4
Item 5

Lista con :nth-child(odd) estilizado.

La Cascada, Especificidad y Herencia:

Cascada: Los estilos pueden venir de múltiples fuentes (hoja de estilos del navegador, del usuario, del autor). CSS define un orden de prioridad. Generalmente, los estilos del autor (tu CSS) tienen más peso. Si hay múltiples reglas del autor, el orden en el archivo importa (la última regla definida para la misma propiedad y selector gana).
Especificidad: Cuando varias reglas CSS apuntan al mismo elemento y definen la misma propiedad, el navegador usa la especificidad del selector para decidir cuál aplicar. Un selector más específico "gana" a uno menos específico.
1. Estilos en línea (atributo style) - Máxima especificidad.
2. Selectores de ID (#miId)
3. Selectores de Clase (.miClase), Atributo ([type="text"]), Pseudo-clase (:hover)
4. Selectores de Tipo/Etiqueta (p), Pseudo-elemento (::before)
El selector universal (*) y los combinadores no añaden especificidad. !important anula todas las demás reglas (¡usar con extrema precaución!).
Herencia: Algunas propiedades CSS (como color, font-family, line-height) se heredan de forma natural de un elemento padre a sus hijos, a menos que se especifique lo contrario en el hijo. Otras (como background-color, padding, border) no se heredan.

Juego de Especificidad (Conceptual)

Considera el siguiente HTML: <p id="parrafo1" class="texto azul">Hola</p>

Y estas reglas CSS:

p { color: red; } (Especificidad: 0,0,1)

.texto { color: green; } (Especificidad: 0,1,0)

#parrafo1 { color: purple; } (Especificidad: 1,0,0)

Pregunta: ¿De qué color será el texto "Hola"? Haz clic para ver la respuesta

El Modelo de Caja (Box Model):

Cada elemento HTML en una página puede ser considerado como una caja rectangular. El modelo de caja describe cómo se calculan las dimensiones de esta caja.

Contenido (Content): El área donde se muestra el texto, imágenes, etc. Sus dimensiones son width y height.
Relleno (Padding): Espacio transparente alrededor del contenido, dentro del borde.
Borde (Border): Línea que rodea el padding y el contenido. Tiene grosor, estilo y color.
Margen (Margin): Espacio transparente alrededor del borde, que separa la caja de otras cajas.

Por defecto, box-sizing: content-box; significa que width y height solo se aplican al área de contenido. El padding y el borde se suman *adicionalmente* al tamaño total. Esto puede ser confuso.

Es muy común usar box-sizing: border-box;, lo que hace que width y height incluyan el contenido, el padding y el borde. ¡Mucho más intuitivo!


* { /* Aplicar a todos los elementos para un comportamiento consistente */
    box-sizing: border-box;
}
div.mi-caja {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 15px;
    background-color: lightblue;
}
/* Con border-box, la caja total (incluyendo borde) medirá 200x100. 
   El área de contenido se ajustará. */

Explorador del Modelo de Caja

Contenido

Padding (px): Border (px): Margin (px):
box-sizing:

Observa cómo cambian las dimensiones visuales y el espacio.

Unidades y Colores en CSS:

Unidades: Absolutas (px, pt), Relativas (%, em - relativa al tamaño de fuente del padre, rem - relativa al tamaño de fuente del raíz, vw - % del ancho del viewport, vh - % del alto del viewport).
Colores: Nombres de color (red, blue), HEX (#FF0000, #F00), RGB (rgb(255,0,0)), RGBA (rgba(255,0,0,0.5) - con transparencia), HSL (hsl(0,100%,50%)), HSLA.

Selector de Color CSS

HEX: #3498db

RGB: rgb(52, 152, 219)

Buenas Prácticas CSS: Organiza tu CSS (comentarios, agrupación lógica), usa nombres de clase descriptivos y reutilizables, evita selectores excesivamente largos o específicos, prefiere unidades relativas para escalabilidad, y considera el rendimiento.

Módulo 3: Implementando Barras de Navegación

Una barra de navegación es un componente fundamental en la mayoría de los sitios web, ya que proporciona a los usuarios un medio claro y consistente para moverse entre las diferentes secciones o páginas. Una buena navegación mejora la usabilidad y la experiencia del usuario.

Estructura HTML para una Barra de Navegación:

Semánticamente, el elemento <nav> es el contenedor apropiado para el bloque principal de navegación. Dentro de él, es común usar una lista no ordenada (<ul>) para los ítems de menú, donde cada ítem (<li>) contiene un enlace (<a>).


<nav class="navbar-principal">
    <ul>
        <li><a href="index.html" class="active">Inicio</a></li>
        <li><a href="acerca.html">Acerca de</a></li>
        <li class="dropdown">
            <a href="servicios.html">Servicios ↓</a> <!-- ↓ es una flecha hacia abajo -->
            <ul class="submenu">
                <li><a href="servicios/diseno.html">Diseño Web</a></li>
                <li><a href="servicios/desarrollo.html">Desarrollo App</a></li>
                <li><a href="servicios/seo.html">Consultoría SEO</a></li>
            </ul>
        </li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contacto.html">Contacto</a></li>
    </ul>
</nav>

Consideraciones:

La clase active en el enlace "Inicio" se usa para indicar visualmente la página actual (se aplicaría con CSS).
Hemos añadido un ejemplo de un submenú simple (dropdown). Los submenús más complejos a menudo requieren JavaScript para una mejor interacción, pero los básicos se pueden lograr con CSS (usando :hover en el li.dropdown para mostrar el .submenu).

Estilizando la Barra de Navegación con CSS:

Ahora, apliquemos estilos para que se vea como una barra de navegación horizontal típica.


/* Estilos base para la barra de navegación principal */
.navbar-principal {
    background-color: var(--dark-bg, #333); /* Color de fondo oscuro */
    padding: 0.5rem 0; /* Un poco de padding vertical */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.navbar-principal ul {
    list-style-type: none; /* Quita las viñetas de la lista */
    margin: 0;
    padding: 0;
    display: flex; /* Coloca los elementos  en una fila */
    justify-content: center; /* Centra los ítems en la barra */
}

.navbar-principal ul li {
    position: relative; /* Necesario para posicionar submenús */
}

.navbar-principal ul li a {
    display: block; /* Hace que todo el área del 
 sea clickeable */
    color: white;
    text-decoration: none; /* Quita el subrayado de los enlaces */
    padding: 1rem 1.5rem; /* Espaciado interno para cada enlace */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-principal ul li a:hover,
.navbar-principal ul li a.active { /* Estilo para el enlace activo y al pasar el mouse */
    background-color: var(--primary-color, #555);
    color: white;
}

/* Estilos para el submenú (dropdown) */
.navbar-principal .submenu {
    display: none; /* Oculto por defecto */
    position: absolute; /* Posicionado relativo al  padre */
    top: 100%; /* Justo debajo del ítem padre */
    left: 0;
    background-color: var(--dark-bg, #444);
    min-width: 200px; /* Ancho mínimo del submenú */
    z-index: 1000; /* Para que aparezca por encima de otros elementos */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    flex-direction: column; /* Los ítems del submenú en columna */
}

.navbar-principal li.dropdown:hover > .submenu { /* Mostrar submenú al pasar el mouse sobre el li.dropdown */
    display: flex; /* O 'block', pero flex es útil si queremos más control */
}

.navbar-principal .submenu li {
    width: 100%; /* Cada ítem del submenú ocupa todo el ancho */
}

.navbar-principal .submenu li a {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #555; /* Separador sutil */
}
.navbar-principal .submenu li:last-child a {
    border-bottom: none;
}

.navbar-principal .submenu li a:hover {
    background-color: var(--secondary-color, #666);
}

Vista Previa de Navegación

Aquí tienes una representación de cómo se vería la barra de navegación con los estilos aplicados (simplificada):

Nota: La interactividad del submenú en esta vista previa es simulada con atributos `onmouseover`/`onmouseout` para simplicidad. En un sitio real, se usaría la pseudo-clase :hover de CSS como en el código de ejemplo.

Accesibilidad (ARIA): Para navegaciones más complejas, especialmente con submenús controlados por JavaScript, es importante usar atributos ARIA (Accessible Rich Internet Applications) para mejorar la accesibilidad para usuarios con tecnologías de asistencia. Por ejemplo, aria-haspopup="true", aria-expanded="false/true".

Diseño Responsivo: En pantallas pequeñas, una barra de navegación horizontal larga no es práctica. Se suelen transformar en un menú "hamburguesa" (un ícono que al hacer clic despliega el menú verticalmente). Esto se logra con CSS (Media Queries) y a menudo un poco de JavaScript.

Módulo 4: JavaScript - Añadiendo Interactividad a tu Web

JavaScript (JS) es un lenguaje de programación de alto nivel, interpretado y multiparadigma (soporta programación orientada a objetos, imperativa y funcional) que se ejecuta en el navegador del cliente. Es la tecnología que permite que las páginas web sean dinámicas e interactivas.

¿Para qué sirve JavaScript en el Front-End?

Manipulación del DOM (Document Object Model): Modificar dinámicamente el contenido HTML y los estilos CSS de una página después de que se haya cargado.
Manejo de Eventos: Reaccionar a las acciones del usuario, como clics, movimientos del ratón, pulsaciones de teclas, envío de formularios, etc.
Validación de Formularios del Lado del Cliente: Comprobar los datos ingresados por el usuario antes de enviarlos al servidor (mejora la UX, pero no reemplaza la validación del servidor).
Animaciones y Efectos Visuales: Crear transiciones suaves, mostrar/ocultar elementos, y otros efectos.
Comunicación Asíncrona (AJAX/Fetch API): Cargar datos del servidor en segundo plano sin recargar toda la página (ej: para feeds de redes sociales, sugerencias de búsqueda).

Formas de Incluir JavaScript:

Script Interno: Código JS dentro de etiquetas <script> ... </script>. Usualmente se coloca justo antes de la etiqueta de cierre </body> para asegurar que el DOM HTML esté cargado antes de que el script intente manipularlo.
```
<body>
    
    <script>
        console.log("JavaScript interno ejecutándose!");
        // Tu código JS aquí
    </script>
</body>
                        
```
Script Externo: Código JS en un archivo .js separado (ej: mi_script.js) y enlazado. Recomendado para organización y cacheo.
```
<body>
    
    <script src="js/mi_script.js"></script> 
</body>
                        
```
Los atributos async y defer en la etiqueta <script src="..."> controlan cómo se carga y ejecuta el script externo en relación con el parseo del HTML.

Conceptos Fundamentales de JavaScript para Interactividad:

Variables: Contenedores para almacenar datos.
- let nombreVariable = valor; (para variables cuyo valor puede cambiar, ámbito de bloque).
- const constanteNombre = valor; (para valores que no cambiarán, ámbito de bloque).
- var nombreAntiguo = valor; (forma más antigua, ámbito de función, evitar en código moderno).
Tipos de Datos Primitivos: String, Number, Boolean, null, undefined, Symbol, BigInt.

Funciones: Bloques de código reutilizables.


function saludar(nombre) {
    return "Hola, " + nombre + "!";
}
let mensaje = saludar("MoriDevEdu"); // mensaje = "Hola, MoriDevEdu!"
console.log(mensaje);

El DOM (Document Object Model): Es una representación en forma de árbol de la estructura de tu página HTML. JavaScript puede acceder y modificar este árbol.
Seleccionar Elementos del DOM:
- document.getElementById("unId"): Selecciona el elemento con el ID especificado.
- document.getElementsByClassName("unaClase"): Devuelve una colección HTML (similar a un array) de elementos con esa clase.
- document.getElementsByTagName("p"): Devuelve una colección HTML de elementos con esa etiqueta.
- document.querySelector(".clase #id etiqueta"): Devuelve el *primer* elemento que coincide con el selector CSS especificado (¡muy potente!).
- document.querySelectorAll(".clase"): Devuelve una NodeList (similar a un array) de todos los elementos que coinciden con el selector CSS.
Manipular Elementos del DOM:
- Cambiar contenido: elemento.textContent = "Nuevo texto"; (solo texto), elemento.innerHTML = "<strong>Texto en negrita</strong>"; (puede incluir HTML).
- Cambiar estilos: elemento.style.color = "blue";, elemento.style.fontSize = "20px"; (propiedades CSS en camelCase).
- Manejar clases: elemento.classList.add("nuevaClase");, elemento.classList.remove("viejaClase");, elemento.classList.toggle("claseActiva");.
- Modificar atributos: elemento.setAttribute("src", "nueva_imagen.jpg");, elemento.getAttribute("href");.

Manejo de Eventos: Reaccionar a las acciones del usuario. La forma más moderna y recomendada es con addEventListener().


const miBoton = document.getElementById("miBotonInteractvo");

miBoton.addEventListener("click", function() {
    // Código a ejecutar cuando se hace clic en el botón
    alert("¡Botón presionado!");
});

// Otros eventos comunes: 'mouseover', 'mouseout', 'keydown', 'keyup', 'submit', 'focus', 'blur', 'change'

Ejemplo Interactivo: Cambiar Contenido y Estilo con JS

Demo de Interactividad JS

¡Este es un texto dinámico! Pasa el mouse sobre mí o haz clic en los botones.

Consola del Navegador: Una herramienta indispensable para el desarrollador JS. Accede a ella con F12 (en la mayoría de los navegadores) y busca la pestaña "Consola". Usa console.log(valor_o_mensaje); para imprimir información y depurar tu código.

Módulo 5: Formularios Web - Recopilando Información del Usuario

Los formularios HTML son la principal forma de recopilar datos de los usuarios en la web, desde simples búsquedas hasta complejos registros de usuario o procesos de compra.

Elementos Clave de un Formulario HTML:

<form>: El contenedor principal para todos los campos del formulario.
- Atributo action: Especifica la URL del script en el servidor que procesará los datos del formulario.
- Atributo method: Define el método HTTP a usar para enviar los datos.
  - GET: Añade los datos del formulario a la URL (visible, limitado en tamaño, para búsquedas o datos no sensibles).
  - POST: Envía los datos en el cuerpo de la solicitud HTTP (oculto, sin límite de tamaño práctico, para datos sensibles o grandes).
- Atributo enctype: Importante para subida de archivos ("multipart/form-data").
<label for="id_del_input">: Etiqueta descriptiva para un campo de formulario. Mejora la accesibilidad y usabilidad (hacer clic en la etiqueta enfoca el input asociado).
<input>: El elemento más versátil. Su comportamiento cambia según el atributo type:
- type="text": Campo de texto de una línea.
- type="password": Campo de contraseña (oculta los caracteres).
- type="email": Campo para email (con validación básica de formato en navegadores modernos).
- type="number": Campo para números (con controles de incremento/decremento).
- type="date": Selector de fecha.
- type="checkbox": Casilla de verificación (múltiples opciones pueden ser seleccionadas si tienen diferentes name, o agrupadas con el mismo name y corchetes [] en el backend).
- type="radio": Botón de opción (solo una opción puede ser seleccionada dentro de un grupo con el mismo name).
- type="file": Permite al usuario seleccionar un archivo para subir.
- type="submit": Botón que envía el formulario.
- type="reset": Botón que resetea los campos del formulario a sus valores iniciales.
- type="button": Botón genérico, usualmente para acciones con JavaScript.
- type="hidden": Campo oculto, para enviar datos que el usuario no necesita ver o modificar.
Atributos comunes para <input>: name (crucial para que el servidor identifique el dato), id, value, placeholder, required (campo obligatorio), readonly, disabled, size, maxlength, pattern (para validación con regex).
<textarea rows="4" cols="50"></textarea>: Campo para texto multilínea.

<select> y <option>: Para listas desplegables.


<label for="pais">País:</label>
<select id="pais" name="pais">
    <option value="">-- Selecciona uno --</option>
    <option value="pe">Perú</option>
    <option value="mx">México</option>
    <option value="es" selected>España</option> <!-- Opción preseleccionada -->
</select>

<button type="submit|reset|button">Texto del Botón</button>: Ofrece más flexibilidad para el contenido del botón (puede incluir HTML).
<fieldset> y <legend>: Agrupan campos relacionados dentro de un formulario largo, mejorando la organización y accesibilidad. <legend> provee un título para el <fieldset>.

Validación de Formularios: Cliente vs. Servidor

Validación del Lado del Cliente (con HTML5 y JavaScript):
- HTML5: Atributos como required, type="email", pattern, min, max, minlength, maxlength. Los navegadores modernos proporcionan mensajes de error básicos.
- JavaScript: Permite validaciones más complejas y personalizadas, y mejor retroalimentación al usuario (mensajes de error dinámicos, estilos para campos inválidos). Se ejecuta antes de enviar los datos.
  Importante: La validación del cliente es una mejora de la experiencia del usuario (UX) y puede reducir carga innecesaria al servidor, PERO nunca debe ser la única validación. Un usuario malintencionado puede saltársela fácilmente.
Validación del Lado del Servidor (Backend):
- Es ABSOLUTAMENTE ESENCIAL. El servidor debe revalidar todos los datos recibidos antes de procesarlos o almacenarlos, ya que no puede confiar en los datos provenientes del cliente.

Ejemplo: Formulario de Contacto con Validación JS

Formulario de Contacto Interactivo

Nombre Completo:

Correo Electrónico:

Asunto:

Mensaje:

Acepto la política de privacidad.

Recuerda que la seguridad y la privacidad son primordiales al manejar datos de usuarios. Siempre sanitiza y valida los datos en el backend, y considera usar HTTPS para proteger la transmisión de información.

Ejercicio: Formulario de Registro

1. Crea un formulario de registro con los siguientes campos: Nombre de Usuario, Email, Contraseña, Confirmar Contraseña, País (select), y un checkbox para "Acepto recibir boletines".

2. Implementa validaciones con JavaScript para todos los campos:

Todos los campos son obligatorios (excepto quizás el checkbox de boletines).
El email debe tener un formato válido.
La contraseña debe tener al menos 8 caracteres.
"Confirmar Contraseña" debe coincidir con "Contraseña".

3. Muestra mensajes de error específicos junto a cada campo si la validación falla.

4. Si todas las validaciones pasan, muestra un mensaje de "Registro Exitoso (simulación)" y limpia el formulario.

Desarrollo de Aplicaciones Web I: Fundamentos Front-End