¿Qué es el frontend?

Es la práctica de convertir unos datos a una interfaz gráfica usando HTML, CSS i JS.

El desarrollo frontend es el que se refiere a lo que ve el usuario, es decir, el lado del cliente. Normalmente el frontend es desarrollado con el lenguaje de marcas HTML, un lenguaje de hojas de estilos como CSS o SASS, y el lenguaje de programación JavaScript.

El objetivo del frontend es que cuando el usuario vea el sitio web, lo primero de todo que vea sea la información más importante y relevante. No es tan simple como parece ya que el diseño se tiene que adecuar a todas las resoluciones, navegadores.

¿Que hacen los desarrolladores de frontend?

Un desarrollador frontend crea interacciones y experiencias de usuario, todo lo que un usuario hace en un sitio web es gracias al frontend. Todo lo que haces, un click, rellenar un campo, ver el detalle de un objeto, eso son tareas de un desarrollador frontend. También necesita ayuda del backend, para poder entregar o recuperar esos datos del servidor.

En general las aplicaciones web se intentan acercar lo máximo a una aplicación de escritorio. Estas aplicaciones se centran más en la experiencia del usuario y la tecnología que implementan dependerá de que tan bien logren una buena velocidad, optimización y que funciona fluidamente.

Lenguajes

Los lenguajes que se usan en el desarrollo frontend son los anteriormente mencionados, aunque ahora profundizaré en ellos.

HTML

No es un lenguaje de programación sino que es un lenguaje de marcas, el lenguaje se escribe con etiquetas, contenido y atributos. El navegador interpreta el código HTML y nos lo muestra tal y como lo vemos aunque en realidad sea una cosa distinta , pero os voy a mostrar un ejemplo sencillo para ver como esta formado el código y a posterior como se vería.

HTML <h1>Ejemplo </h1>

El código anterior lo veríamos así en nuestro navegador.

Ejemplo

CSS

Es un lenguaje de hojas estilos y su principal utilidad sirve para estilizar un HTML. La sintaxis que utiliza es sencilla, y basicamente formas reglas que si se cumple van a hacer X cosas en un elemento, como por ejemplo cambiar la letra o el tamaño de ésta. Por ejemplo si queremos hacer que un párrafo tenga las letras rojas y el fondo gris se haría de la siguiente manera:

.p {color: red; backgroud-color: gray},

Aunque el código anterior se aplicaría a todos los párrafos, podemos seleccionar a través de clases (.nombre-classe) o identificadores(#identificador-elemento), para que solo se cumpla cuando tenga esa clase o ese identificador.

Javascript

Este lenguaje ya si que es uno de programación, y es uno de los más importantes y potentes, a parte de esto funciona en el lado del cliente, mayoritariamente, porque también se puede usar como backend con NodeJS, es decir en el navegador. Sirve para añadir más características interactivas en un sitio web. Para identificar si un sitio web tiene JavaScript se puede saber, mirando si el código HTML tiene esta etiqueta: <script> </script>.