Front-end para Oposiciones TAI: Guía Completa

¿Qué es el Front-end?

El Front-end es la parte de una aplicación o sitio web con la que interactúa directamente el usuario. Se encarga de la presentación de la información, la interfaz gráfica y la experiencia de uso.

Su objetivo es mostrar el contenido de forma clara, accesible e interactiva, comunicándose con el Back-end para obtener o enviar datos.

Conceptos fundamentales

Para comprender el Front-end es imprescindible conocer los siguientes conceptos:

• HTML: estructura del contenido.
• CSS: diseño y presentación visual.
• JavaScript: comportamiento e interactividad.
• DOM (Document Object Model): representación del documento HTML.
• Navegador: software que interpreta y ejecuta el código Front-end.

Funcionamiento del Front-end

Cuando un usuario accede a una página web, el proceso es el siguiente:

Usuario

↓

Navegador

↓

Petición HTTP/HTTPS

↓

Servidor Web

↓

HTML + CSS + JavaScript

↓

Renderizado de la página

↓

Interacción del usuario

El navegador descarga los recursos necesarios, construye la página y ejecuta el código JavaScript para añadir interactividad.

Tecnologías principales

El desarrollo Front-end se basa en tres tecnologías fundamentales.

HTML

HTML (HyperText Markup Language) define la estructura del contenido.

Permite crear:

• Títulos.
• Párrafos.
• Imágenes.
• Formularios.
• Enlaces.
• Tablas.

CSS

CSS (Cascading Style Sheets) controla el aspecto visual de la página.

Permite modificar:

• Colores.
• Tipografía.
• Márgenes.
• Distribución.
• Animaciones.
• Diseño adaptable (Responsive Design).

JavaScript

JavaScript añade comportamiento dinámico a las páginas web.

Con JavaScript es posible:

• Validar formularios.
• Manipular el DOM.
• Realizar peticiones AJAX o Fetch.
• Actualizar contenido sin recargar la página.
• Crear aplicaciones web completas.

DOM (Document Object Model)

El DOM es la representación en memoria del documento HTML como un árbol de objetos.

Gracias al DOM, JavaScript puede:

• Modificar texto.
• Cambiar estilos.
• Crear elementos.
• Eliminar contenido.
• Responder a eventos del usuario.

HTML

↓

DOM

↓

JavaScript

↓

Página actualizada

Comunicación con el Back-end

El Front-end intercambia información con el servidor mediante protocolos como HTTP o HTTPS.

El flujo habitual es:

Usuario

↓

Front-end

↓

Petición HTTP

↓

API REST

↓

Back-end

↓

Base de datos

↓

Respuesta (JSON)

↓

Front-end

Normalmente los datos se intercambian utilizando JSON.

Frameworks y bibliotecas

Para facilitar el desarrollo existen numerosas herramientas.

Frameworks

Algunos de los más utilizados son:

• Angular.
• Vue.js.
• Svelte.

Bibliotecas

La biblioteca más popular es:

• React.

Estas herramientas permiten desarrollar aplicaciones complejas de forma modular y reutilizable.

Responsive Design

El Responsive Design permite que una aplicación se adapte automáticamente al tamaño de pantalla del dispositivo.

Se consigue mediante:

• Media Queries.
• Flexbox.
• CSS Grid.
• Unidades relativas.

Esto permite visualizar correctamente la aplicación en:

• Ordenadores.
• Tablets.
• Smartphones.

Optimización del rendimiento

Un buen Front-end debe cargar rápidamente y ofrecer una experiencia fluida.

Algunas técnicas habituales son:

• Minificar CSS y JavaScript.
• Comprimir imágenes.
• Lazy Loading.
• Caché del navegador.
• Carga diferida de recursos.

Accesibilidad (Accessibility)

La accesibilidad consiste en desarrollar aplicaciones que puedan utilizar todas las personas, incluidas aquellas con discapacidad.

Buenas prácticas:

• Uso correcto de etiquetas HTML.
• Contraste suficiente.
• Navegación mediante teclado.
• Textos alternativos en imágenes.
• Compatibilidad con lectores de pantalla.

Comparación Front-end vs Back-end

Caso práctico

Situación

Un usuario accede a una tienda online.

El proceso es el siguiente:

1. El navegador descarga el HTML.
2. CSS aplica el diseño visual.
3. JavaScript solicita el catálogo mediante una API.
4. El servidor responde con un archivo JSON.
5. El Front-end muestra automáticamente los productos.

Ventajas e inconvenientes

Ventajas

• Interfaces atractivas.
• Alta interactividad.
• Mejor experiencia de usuario.
• Compatibilidad con múltiples dispositivos.
• Desarrollo modular mediante componentes.

Inconvenientes

• Dependencia del navegador.
• Problemas de compatibilidad entre versiones.
• Mayor complejidad en aplicaciones grandes.
• Rendimiento afectado por dispositivos poco potentes.

Errores habituales

• Confundir HTML con un lenguaje de programación.
• Pensar que CSS modifica la lógica de la aplicación.
• Creer que JavaScript solo sirve para animaciones.
• Confundir Front-end con Back-end.
• Pensar que el Front-end accede directamente a la base de datos.
• No diferenciar una biblioteca de un framework.

Cómo evitarlos

• Recordar la función específica de HTML, CSS y JavaScript.
• Comprender la separación entre presentación y lógica.
• Entender el papel de las APIs en la comunicación con el servidor.
• Practicar la manipulación del DOM y las peticiones HTTP.

Relaciones con otros temas

El Front-end está estrechamente relacionado con:

• HTML.
• CSS.
• JavaScript.
• DOM.
• HTTP y HTTPS.
• APIs REST.
• JSON.
• Desarrollo Web.
• Back-end.
• Arquitectura cliente-servidor.

Conceptos clave para recordar

[!NOTE]

• El Front-end es la parte de la aplicación que ejecuta el navegador y con la que interactúa el usuario.
• Sus tecnologías fundamentales son HTML, CSS y JavaScript.
• HTML define la estructura; CSS la presentación; JavaScript la lógica de interacción.
• JavaScript manipula el DOM para modificar dinámicamente la página.
• El Front-end se comunica con el Back-end mediante HTTP/HTTPS y normalmente intercambia datos en JSON.
• Frameworks como Angular y bibliotecas como React facilitan el desarrollo de aplicaciones complejas.
• El diseño Responsive adapta la interfaz a distintos dispositivos.
• La accesibilidad y el rendimiento son aspectos esenciales en el desarrollo Front-end moderno.