¿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…
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.
