Onion Studio | Agencia de marketing digital
14, agosto 2019

¿Qué es frontend?

Un artículo de Juanje Izquierdo

En este artículo hablamos, entre otras cosas, de…

¿Qué es el frontend?

En nuestro blog nos gusta hablaros no sólo de qué es lo que hacemos, sino de cómo lo hacemos, así que hoy vamos a hablar de qué es el frontend. Para los que no somos desarrolladores o programadores, lo que ocurre de código para adentro es todo un misterio. Pero, en realidad, todo se puede entender una vez explicado.

Claramente, “¿qué es el frontend?” es un jardín de pregunta como para responder en profundidad en un solo artículo. Así que vamos a intentar abordar todos los aspectos más importantes del desarrollo frontend para que, por lo menos, os hagáis una idea general de en qué consiste, de qué elementos está compuesto, y cómo es el trabajo de nuestros compañeros desarrolladores. Para empezar, una definición simple.

Llamamos frontend a la parte del sitio web con la que el usuario interactúa. Es lo que algunos suelen llamar “el lado del cliente.

Un desarrollador frontend es el encargado de llevar a la práctica el diseño de un sitio web para que el usuario final pueda usarlo. En otras palabras: el desarrollador frontend coge la propuesta del diseñador gráfico, y la convierte en realidad a través de diferentes lenguajes de programación. Casi todo lo que ves en la pantalla cuando accedes a una web es desarrollo frontend: la estructuración de los apartados, márgenes entre bloques, tamaños de textos, tipos de letra, colores, adaptación para distintos dispositivos, efectos visuales…

Para entender qué es el frontend hay que pensar en los escaparates de las tiendas

Para entender qué es el frontend hay que pensar en los escaparates de las tiendas

Ya sabemos qué es y para qué se utiliza, pero, ¿cómo se hace «el lado del cliente»?

El frontend se desarrolla, principalmente, a través de tres lenguajes: HTML (HyperText Markup Language), CSS (Cascading Style Sheets) y JS (Javascript). Cada uno de estos lenguajes se usa para desarrollar diferentes partes del front. Vamos a explicar en qué consiste cada uno, y cuáles son sus funciones. Básicamente, son tres lenguajes que se dividen las tres tareas básicas del desarrollo: arquitectura, apariencia, e interacción.

  • Arquitectura: HTML (HyperText MarkUp Language). Es la columna vertebral de cualquier proceso de desarrollo de sitios web y proporciona un marco general de cómo se verá el mismo. Fue lanzado en 1992, y es un lenguaje de marcado que nos permite indicar la estructura de nuestro documento mediante etiquetas. Cualquiera que haya trasteado mínimamente con WordPress habrá visto ejemplos de lenguaje HTML en, por ejemplo, las etiquetas del texto de una página o entrada (H1, H2, H3 y todas estas cosas).
  • Apariencia: CSS. Como mucha terminología del desarrollo, el nombre de este lenguaje es autoexplicativo: Cascading Style Sheets, u Hoja de Estilos en Cascada. Controla el aspecto de presentación del sitio, una vez que este ya está construido con HTML. Por ejemplo, con lenguaje HTML indicamos que un trozo de texto es un título con la etiqueta H1 dentro de la arquitectura del site, pero con CSS podemos hacer que todo texto marcado con dicha etiqueta se vea de otra forma en la parte visual.
  • Interacción: JS (JavaScript). Es un lenguaje de programación basado en eventos que se utiliza para transformar una página estática en una interfaz dinámica interactuando con el usuario, el navegador y el servidor. Es decir, es un lenguaje “invisible” en la inactividad, porque funciona a través de interacciones: con JavaScript podemos decirle a nuestra web que despliegue un menú al hacer clic sobre un icono, o que el botón de “Volver arriba” haga justamente eso.

Llamamos frontend a la parte del sitio web con la que el usuario interactúa. Es lo que algunos suelen llamar “el lado del cliente"

La importancia de un buen frontend: accesibilidad y rendimiento

A la hora de enfocar un proyecto y su desarrollo, hay que tener en cuenta los distintos dispositivos desde los que el usuario final del sitio puede acceder a la mismo. A esto hace referencia la accesibilidad. El usuario no va a tener la misma experiencia accediendo a la web desde el móvil que desde la tablet o el ordenador.
Debemos trabajar en el diseño web, navegación, contenido e interacción para que sean accesibles desde cualquier tipo de pantalla. Lo cual, además de facilitar el uso de nuestro sitio web en la mayoría de dispositivos (móviles, tabletas, lectores, etc), nos ayuda al posicionamiento orgánico SEO, ya que muchas de las pautas de accesibilidad ayudan a los bots de los buscadores a entender nuestro sitio web.
El principio de accesibilidad en arquitectura es aplicable a desarrollo frontend | Fotografías extraídas de Unsplash.com
Aparte de los dispositivos móviles (que ya son mayoría a la hora de visitar sitios webs), la accesibilidad ayuda a que los dispositivos especiales usados por personas con algún tipo de discapacidad puedan interpretar de manera correcta nuestro código. Tendemos a relacionar la accesibilidad de forma exclusiva con la facilitación de un acceso o servicio a personas con dificultades, pero lo cierto es que la optimización de la accesibilidad es beneficiosa para todo el mundo. Una rampa en lugar de unas escaleras, un suelo antideslizante en el baño, o una barandilla junto a una cuesta escarpada: son elementos arquitectónicos de accesibilidad, pero también nos hacen la vida más fácil a todos los demás. Con el desarrollo web pasa lo mismo: cuanto más accesible sea para los usuarios con necesidades especiales, más lo será también para el resto.

Otro aspecto muy importante a tener en cuenta a la hora del desarrollo frontend es el rendimiento.

Este afecta directamente tanto a una mejor experiencia de usuario como al posicionamiento en motores de búsqueda (ya que Google tiene muy en cuenta cuál es el grado de satisfacción y eficiencia en la experiencia de usuario para ponernos como primeros de la clase o mandarnos castigados al pasillo).Hay varios factores que pueden hacer que el rendimiento del sitio web no sea el adecuado y los tiempos de carga se disparen, como el número de peticiones al servidor, el tamaño y resolución de las imágenes, una mala depuración del código, etc.
Artículos relacionados

Quizá te interese…