13 de Octubre de 2025
1. El papel del Framework
Los frameworks web modernos (como Ruby on Rails o Django) facilitan el desarrollo al automatizar tareas comunes del frontend. Ya no es necesario escribir directamente código en HTML o JavaScript para muchas funciones, porque el framework genera y gestiona esos elementos por nosotros. Aun así, es importante comprender cómo se estructuran las páginas web para entender lo que el framework hace “detrás de escena”.
2. Estructura básica del HTML
El HTML (HyperText Markup Language) define la estructura del contenido de una página web mediante etiquetas.
Ejemplo básico:
<html> <head> <title>Simple</title> </head> <body> <h1>Tabla</h1> <a href="index.html">Principal</a> <a href="https://sample.com/index.html">Ejemplo externo</a> </body></html>Funciones de las etiquetas:
- Etiquetar: Identificar el tipo de elemento (título, tabla, enlace, párrafo, etc.).
- Identificar elementos: Cada etiqueta puede tener un identificador único (
id) para ser manipulada o validada posteriormente mediante el DOM (Document Object Model).
El DOM representa la estructura jerárquica del documento, permitiendo a los lenguajes como JavaScript interactuar con los elementos (por ejemplo, cambiar el texto de un título o validar un campo de formulario).
3. URLs y URIs
- URL (Uniform Resource Locator): Apunta a una ubicación o directorio en la web.
- URI (Uniform Resource Identifier): Apunta específicamente a un recurso o archivo.
Ambos se usan para localizar recursos, aunque la URI es más específica.
Ejemplo:
- URL →
https://example.com/ - URI →
https://example.com/index.html
4. Evolución del diseño web: del HTML al CSS
Desde HTML 4, el diseño web separó el contenido (HTML) de la presentación visual mediante CSS (Cascading Style Sheets). Esto permite aplicar estilos uniformes a toda la aplicación (colores, fuentes, tamaños, distribución), promoviendo consistencia visual y facilitando el mantenimiento.
Ejemplo: En Microsoft Word, cambiar un “estilo de título” actualiza todos los títulos del documento. CSS aplica el mismo principio a las páginas web.
Ejemplo con id:
<html> <head> <title>Ejemplo con ID</title> </head> <body id="xyz"> <h1>Tabla</h1> <a href="index.html">Principal</a> </body></html>El atributo id permite referirse a un elemento específico, ya sea para aplicar un estilo desde CSS o validarlo desde JavaScript o el backend.
5. Validaciones en la web
En el desarrollo web moderno, las validaciones se realizan en dos niveles:
- Frontend (formulario): Verifica que los datos cumplan ciertas condiciones antes de ser enviados (por ejemplo, que el precio no sea menor que cero).
- Backend (controlador): Revalida los datos antes de guardarlos en la base de datos, garantizando la integridad.
Para ambas validaciones, los id y name de los elementos HTML permiten identificar cada campo del formulario y vincularlo con la lógica del framework.
6. Consistencia en interfaces web
Las interfaces consistentes reducen la confusión del usuario. Por ejemplo:
- En sitios como Amazon, AliExpress o Mercado Libre, el carrito de compras y el botón de inicio de sesión suelen ubicarse en la esquina superior derecha.
- Mover esos elementos genera inconsistencia, haciendo que el usuario se sienta perdido o incómodo.
La consistencia visual y funcional es un principio central del diseño de experiencia de usuario (UX). Los frameworks web contribuyen a mantenerla mediante hojas de estilo y componentes reutilizables.
Glosario
| Término | Definición |
|---|---|
| HTML | Lenguaje que estructura el contenido de las páginas web. |
| Etiqueta | Instrucción en HTML que define un elemento del documento. |
| DOM (Document Object Model) | Representación estructurada del documento HTML para manipulación dinámica. |
| URL (Uniform Resource Locator) | Dirección que indica la ubicación de un recurso en la web. |
| URI (Uniform Resource Identifier) | Identificador más general que puede incluir archivos o recursos específicos. |
| CSS (Cascading Style Sheets) | Lenguaje que define el estilo visual de un documento HTML. |
| Frontend | Parte del sistema que interactúa directamente con el usuario (interfaz). |
| Backend | Parte del sistema que gestiona la lógica, datos y validaciones. |
| Consistencia (UX) | Principio de diseño que mantiene patrones uniformes en una interfaz. |
| ID (identificador) | Atributo único que permite identificar un elemento dentro del documento. |
href: Sirve para hacer ligas. |
