EBAC Logotipo
Menú

3.1 Conoce qué es el Frontend

Comprender el rol del desarrollo frontend en una aplicación web, su relación con el backend y su impacto en la experiencia de usuario.

1. ¿Qué es el desarrollo frontend?

Aunque ya mencionamos que el frontend es todo lo que el usuario ve e interactúa en una aplicación web, el trabajo diario de un desarrollador frontend se puede dividir en tres áreas principales.


Cada una de estas áreas se desarrolla con un lenguaje específico, y en conjunto forman la base del desarrollo frontend.

2. Conoce HTML

HTML (HyperText Markup Language)

Es un lenguaje de marcado que permite estructurar el contenido de una página web mediante etiquetas.

Con HTML, el desarrollador define elementos como:

  1. Títulos y subtítulos (<h1>, <h2>)
  2. Párrafos (<p>)
  3. Imágenes (<img>)
  4. Videos, enlaces, listas, formularios, tablas y mucho más.


Piensa en HTML como el esqueleto del sitio.

3. CSS (Cascading Style Sheets)

Es el lenguaje que se usa para dar estilo visual a los elementos definidos con HTML.


Con CSS, el desarrollador puede modificar:

  1. Colores, fuentes, tamaños
  2. Bordes, márgenes, sombras
  3. Posición de elementos, diseño adaptable (responsive)
  4. Animaciones y efectos visuales


CSS transforma el esqueleto en algo atractivo y visualmente ordenado.

4. JavaScript

Es el lenguaje que permite agregar funcionalidad e interactividad al sitio.


Con JavaScript se pueden programar acciones como:

  1. Mostrar o esconder elementos
  2. Responder a clics del usuario
  3. Validar formularios
  4. Cargar datos sin refrescar la página
  5. Crear experiencias dinámicas (como carruseles, chats, mapas interactivos, etc.)


JavaScript le da vida al sitio: hace que reaccione a lo que hace el usuario.

5. ¿Cómo se relaciona con el backend?

El backend es la parte del sistema que:

  1. Procesa la lógica del negocio
  2. Administra bases de datos
  3. Maneja autenticación, permisos y seguridad


El frontend se conecta con el backend para enviar y recibir datos.

Por ejemplo:

  1. Cuando completas y envías un formulario, el frontend manda esa información al backend para que se guarde.
  2. Cuando abres Instagram, el frontend pide al backend los últimos posts y los muestra en pantalla.


6. Experiencia de usuario

Un buen desarrollo frontend se nota de inmediato al visitar un sitio web. El buen trabajo se percibe desde cómo se ve hasta cómo responde, impactando directamente en la experiencia del usuario.


  1. Carga rápida: El sitio se muestra en segundos, sin demoras innecesarias.
  2. Contenido claro y legible: Textos bien organizados, jerarquía visual y fácil de entender.
  3. Accesibilidad: el contenido es usable para personas con discapacidades (por ejemplo, compatibilidad con lectores de pantalla, uso correcto de etiquetas semánticas).
  4. Diseño adaptable (responsive): se ve bien en cualquier dispositivo: computadora, tablet o celular.

7. Buenas Prácticas

Imágenes optimizadas:

  1. Usa formatos ligeros y carga por demanda para mejorar la velocidad del sitio.

HTML semántico y legible:

  1. Etiqueta correctamente el contenido y organiza el texto con jerarquía visual clara. Evita justificar texto.

Colores contrastantes y accesibles:

  1. Usa combinaciones legibles para todos los usuarios. El buen contraste mejora la experiencia y la inclusión.

Botones y enlaces funcionales:

  1. Todo lo clickeable debe responder. Evita enlaces rotos o botones sin acción.

Animaciones suaves y moderadas:

  1. Aplica solo donde aporten valor y mantén un rendimiento fluido (idealmente 60fps).

8. Recursos Adicionales

Referencias técnicas

  1. MDN Web Docs (Mozilla) https://developer.mozilla.org/es/
  2. Documentación oficial sobre HTML, CSS, JS, accesibilidad, semántica, etc.
  3. Web.dev (Google) https://web.dev/
  4. Guías de rendimiento, accesibilidad, mejores prácticas y herramientas.
  5. A11Y Project https://www.a11yproject.com/
  6. Comunidad con recursos claros sobre accesibilidad web.

Herramientas de prueba

  1. Lighthouse (en Chrome DevTools)
  2. Evalúa rendimiento, accesibilidad, SEO y buenas prácticas.
  3. Wave (Web Accessibility Evaluation Tool) https://wave.webaim.org/
  4. Analiza accesibilidad directamente desde el navegador.
  5. Color Contrast Checker https://webaim.org/resources/contrastchecker/
  6. Verifica el contraste entre texto y fondo según estándares WCAG.
  7. Responsively App https://responsively.app/
  8. Visualiza tu sitio en múltiples tamaños de pantalla a la vez.