¿Qué es el frontend?

Imagen de una entrada de una casa con un diseño bonito
¿Sabes que esto lo podrías haber dibujado con HTML y CSS?

Esta clase pertenece al curso de reclutamiento IT. Partiremos desde la clase anterior. Te aconsejo que hagas el curso de forma secuencial, y en caso de que estés perdido/a, puedes acceder al índice del curso aquí.

En esta clase aprenderemos qué es el frontend, qué tecnologías suelen usarse y qué hace cada una de ellas, todo explicado de forma sencilla para IT Recruiters, que no tenéis que tener ni es necesario que tengáis formación técnica en tecnología.

Como el frontend es un mundo MUY amplio, en esta clase estudiaremos todo lo relacionado con las bases del desarrollo web: HTML y CSS, con sus preprocesadores y sus principales frameworks.

Me gustaría incidir en que esto es una introducción al reclutamiento IT en frontend, más adelante entraremos con mayor profundidad en las distintas tecnologías, pero es necesario saber andar antes de correr. Sin más, vamos a ello.

¿Qué es el frontend?

Cuando yo quiero hacer una página web o una aplicación web (veremos las diferencias en otra clase más adelante, aunque muchas veces se usan como sinónimos, aunque sea incorrecto), el desarrollo de frontend es el área del desarrollo de software que se encarga de desarrollar la interfaz de usuario, también conocida como User Interface (UI).

Lenguaje de marcas: HTML.

La interfaz de usuario es lo que yo veo de la página web. Vamos a verlo de forma muy sencilla.

Solución ejercicio 6 HTML
Este es el estilo por defecto de las listas desordenadas en HTML

Esa es una imagen de una clase del curso 100% gratis que tenemos en este blog de HTML y CSS, desde 0, para personas que no tienen conocimientos de informática. Eso, aunque muy rudimentario, es una interfaz de usuario. En concreto, es una página web que me muestra mis películas favoritas. ¿Ves que sólo hay texto? Pues es que eso es lo que hace el HTML: da la estructura a una página web. Es decir: con HTML le digo a mi página web que este texto «Mis películas favoritas» será un título o encabezado, que «Interstellar» será un elemento de una lista etc.

Perdona, Sergio, ¿has dicho que con HTML le digo algo mi página web? Si recuerdas de la clase anterior, la programación es la forma mediante la cual un ser humano se comunica con un ordenador para que ejecute un procesamiento de datos. Pero HTML no es un lenguaje de programación, sino un lenguaje de marcas. Eso significa que con HTML lo que yo le indico al ordenador es decirle qué rol va a tener cada elemento de la página web. Es decir: ¿el texto pertenecerá a una lista o será un encabezado, como en el ejemplo anterior? ¿Será un botón? ¿O será un texto que aparecerá en un formulario, dónde podremos elegir entre distintas opciones (por ejemplo, una encuesta que te preguntan tus hobbies, aparecen opciones como «salir de fiesta», «hacer deporte», «cocinar», «bailar» etc. y te aparecen cuadraditos al lado de cada opción que puedes señalar)?.

Lenguaje de diseño gráfico: CSS.

Imagen de una lista estilizada con CSS
¿En qué se diferencia esta imagen de la anterior? La hemos estilizado con CSS

El problema de utilizar sólo HTML es que la página web queda MUY fea. Digamos que HTML es cómo los cimientos de un edificio, pero nadie se mete a vivir en una casa que sólo tiene las paredes y los pilares. La gente se mete a vivir en una casa que ya está amueblada o que amueblan ellos, que pintan, que ponen bonita etc. Pues con las páginas web lo mismo. Necesitamos un diseño. Y ese diseño lo vamos a pintar con CSS. CSS es un lenguaje de diseño gráfico que nos permite darle un determinado diseño al HTML. Por ejemplo, en la imagen de arriba, hemos puesto el fondo de un determinado color. Para eso (y para muchas más cosas) sirve CSS. ¿A qué queda mucho mejor (siendo un diseño muy básico, por supuesto)? Pues eso. A todo el mundo le gusta una página web bonita. Y para eso, un buen punto de partida es CSS.

En el desarrollo web moderno, siempre se usa HTML y CSS, por eso son las bases del mismo. Nadie, absolutamente nadie, va a publicar una web con HTML sin diseño alguno. Por otro lado, es imposible usar CSS sin HTML, porque… si no tengo nada a lo que darle diseño, ¿para qué voy a usar CSS, que sirve precisamente para eso? Esa es la razón por la que HTML y CSS van siempre juntos.

Una de las cosas más complejas de CSS es conseguir que nuestro diseño se adapte a las múltiples pantallas desde las que podemos acceder a una página web. Anteriormente, teníamos sólo el ordenador para acceder a las páginas web. Pero ahora, tenemos multitud de dispositivos: PC, teléfonos móviles, tablets etc. Para facilitar el posicionamiento de los elementos dentro de la pantalla y facilitar un diseño responsive (decimos que un diseño es responsive cuándo se adapta de forma adecuada a las distintas pantallas desde las que accede el usuario a la página/aplicación web) surgieron modelos de diseño como Flexbox o Grid, que nos facilitan el posicionamiento de los elementos (botones, cajas de texto etc.) en la pantalla usando CSS.

Importante: Flexbox o Grid no son tecnologías que funcionan independientemente de CSS, sino modelos o formas de diseñar una interfaz de usuario que usamos dentro de CSS.

Pero como una imagen vale más que mil palabras, vamos a ver un ejemplo de qué significa responsive. El ejemplo es un ecommerce que hice como proyecto final de mis estudios de FP de Desarrollo de Aplicaciones Web (DAW). Por si tienes curiosidad, aquí te cuento cómo son las asignaturas del Ciclo Formativo de Grado Superior de 1º de Desarrollo de Aplicaciones Web (DAW) y de 2º de Desarrollo de Aplicaciones Web (DAW).

Imagen del home de una tienda online
¿A qué todo está en su sitio ocupando su lugar en la pantalla? Este sería el diseño del home de la tienda online para la versión web
Ejemplo del home de una tienda online en versión móvil
¿Empiezas a comprender ya lo que significa responsive?
Ejemplo de productos de la home de una tienda online
¿Qué es el responsive? ¿Y tú me lo preguntas? Responsive es tu página web.

Si te das cuenta en la primera imagen, la versión web, los elementos se distribuyen a lo largo de la pantalla ocupando el ancho de la misma. Sin embargo, en las dos imágenes posteriores, el menú o los productos se adaptan al ancho del dispositivo (en este caso, un dispositivo móvil) a fin de ofrecer una experiencia de usuario agradable independientemente del dispositivo desde el que el usuario acceda a la página web. ¿Y qué sería un mal responsive? Lo veremos con un ejemplo de una pequeña aplicación web que tuve que hacer en Desarrollo Web en Entorno Cliente, asignatura de 2º del Ciclo Formativo de Grado Superior de Desarrollo de Aplicaciones Web (DAW), en la que estudiamos principalmente JavaScript. Era una aplicación en la que básicamente el usuario insertaba unos datos y te calculaba los impuestos que tenías que pagar (siempre de forma ficticia, claro, sólo para practicar).

Versión web de un formulario de una aplicación web que calcula impuestos
¿Minimalista el diseño verdad? El objetivo aquí era aprender JavaScript, no el diseño.
Imagen de la misma aplicación web pero ya forzando el responsive que no tiene
Las cosas empiezan a descuadrarse…
Forzando el diseño responsive aquí ya se queda super chiquitito el texto y apenas se ve nada, casi toda la pantalla en blanco
Te vas dando cuenta ya de lo importante que es un buen diseño responsive, ¿verdad?

Como puedes observar, el diseño es minimalista por decir algo, pero aquí el objetivo era aprender JavaScript. Podemos ver que en la aplicación web, a priori, se ve medio decente. Ahora claro, si vemos la segunda imagen, ya en un iPhone 5/SE, vemos que dónde escribe el usuario (en concreto el de estado civil) ya se descuadra, que los botones se descuadran un poco etc. Y en el tercer dispositivo, un iPad Pro, casi toda la pantalla se ve en blanco y nuestro formulario aparece chiquitito. Si el no tener responsive te ofrece esta chapuza en una aplicación web super pequeña como ésta, imagínate en una web que no sea con fines didácticos (una web de un negocio, una tienda online etc.). Un mal diseño responsive (o directamente, que tu diseño no sea responsive, como es el caso de estos ejemplos) es una chapuza, ahuyenta a tus usuarios y eso acaba significando siempre menos tráfico y menos dinero para tu negocio/o lo que sea que sea tu web. Y más en los tiempos actuales, dónde la supremacía del diseño web va desapareciendo (normalmente siempre se desarrollaba primero el diseño web y luego se adaptaba a multiplataforma) y aparecen tendencias como el diseño mobile first, que básicamente consiste en realizar el diseño primero para móvil y luego adaptarlo para web, ya que cada vez más los usuarios acceden a nuestras páginas/aplicaciones web desde la comodidad de su móvil, su tablet etc. y no sentados frente al ordenador como hacían antaño. El porcentaje de estos últimos ha bajado. Perfecto: pues ya sabes lo que significa responsive.

Frameworks de CSS

Antes de que te adelantes, no, en esta clase no te explicaré qué es un framework. Tendremos una clase más adelante sobre este tema, pero puedes leer y entender perfectamente qué hacen estos frameworks sin saber explícitamente qué significa el concepto de framework, ya que es un tema que da para artículo y no quiero abordarlo aquí. Por ahora quédate con que es una tecnología que importas en tu proyecto y lo enriquece, dándote opciones que antes no tenías.

Bootstrap

Home de la web de Bootstrap
¿A qué te suena Bootstrap?

Con CSS yo puedo diseñar menús, botones de la página web etc. cualquier cosa que se me ocurra. Pero eso lleva mucho trabajo y muchas veces nuestro cliente puede querer algo más rápido (y barato, ya que nos llevará menos horas hacer la página web/aplicación web que nos han encargado). Para ello, podemos utilizar frameworks como Bootstrap. Es tan sencillo como importarlo en mi proyecto (en mi página/aplicación web), se importa para poder usarlo y listo. Veamos un ejemplo de los botones que nos ofrece Bootstrap, por ejemplo:

Ejemplo de los botones que nos ofrece Bootstrap
Ya comprendes mejor lo que es Bootstrap, ¿a que sí?

Pues usaríamos esos botones, le ponemos el texto que queramos y listo. ¿Problema? Pues lo comprenderemos mejor con mi CV web (desactualizado, por cierto, pero eso tiene la excusa de que le quiero hacer un rediseño con React más adelante), que desarrollé usando Bootstrap 4 porque quería tenerlo rápido para cuando acabara mis estudios:

Ejemplo de página web desplegada en Firebase
Ejemplo de página web desplegada en Firebase

Todo lo que hay ahí está desarrollado con HTML, CSS y Bootstrap 4 (bueno, y JQuery, que me lo exigía Bootstrap 4 también). A lo que vamos: No está mal, pero el diseño es siempre lo mismo. Está guay porque es responsive, curva de aprendizaje baja, desarrollé la página relativamente rápido y te ofrece una solución profesional a bajo coste (comparado con el precio que costaría un diseño personalizado). ¿Lo malo? Que cada vez se usa menos, porque si quieres personalizar el diseño ya entramos en problemas (conflictos entre el diseño que marca Bootstrap para sus elementos o componentes y el diseño que tú quieres personalizar) y si no lo personalizas al final el cliente tiene una página web con un diseño parecido a otras mil que hay en Internet. Y, además, como buen framework, es pesado, lo que puede impactar en la velocidad de carga de tu página/aplicación web. Por ello, está empezando a caer en desuso, aunque se sigue usando mucho.

Disclaimer: yo trabajé con Bootstrap 4, al poco después sacaron Bootstrap 5, no sé si habrán hecho más fácil la personalización de componentes (botones, menús etc.), la verdad.

Tailwind

La home de la web de Tailwind
¿Te suena Tailwind?

Tailwind ha cogido mucha popularidad recientemente y, la verdad, es que este artículo me está permitiendo investigar un poco la documentación para poder contaros a que se debe tanto hype. Y, mi impresión, a falta de haberlo probado, es que es una versión mejorada de Bootstrap.

¿Por qué creo esto? Veamos: es un framework CSS del mismo estilo que Bootstrap para que el responsive y el diseño sea muy fácil. Pero lo bueno que estoy viendo en la documentación es que, según ellos, es muy fácil de personalizar, es un framework optimizado ya que en producción (cuando tienes la página web desplegada en Internet para que cualquier usuario pueda acceder) sólo realiza una importación de lo que utilizas en la página web (lo cual facilita la velocidad de carga), y además tiene un diseño bastante más bonito desde mi punto de vista que Bootstrap.

Ejemplo de diseño con Tailwind
A mí me parece mucho más profesional poder hacer diseños así que los que podía hacer con Bootstrap, aunque esto es algo totalmente subjetivo.

Con lo cual, no os voy a mentir, añado Tailwind a mi lista de cosas pendientes que probar (ya vas dándote cuenta de que el desarrollo web es increíblemente denso, y eso que esto es sólo una introducción a frontend) y por ahora espero que te haya quedado claro qué es Tailwind.

Por supuesto, existen otros frameworks de CSS como Foundation, Bulma o Pure CSS, pero aquí me he ceñido a los más populares y usados.

Preprocesadores de CSS

Imagen de la home de Less
¿Te suena Less? ¿No? Sigue leyendo…

Un preprocesador de CSS es básicamente un lenguaje de programación que le añade ciertas características a CSS. Los más famosos son SASS/SCSS y LESS. Ambos comparten que insertan características de lenguajes de programación a CSS, que es un lenguaje de diseño, dándole una mayor potencia a CSS. Digamos que, amplían y mejoran en cierta medida CSS. Ahora bien, LESS aunque ya tuvo su tiempo de popularidad y aún se sigue usando, cada vez está más en desuso en favor de SASS/SCSS. ¿Por qué? Porque SASS es más potente, tiene una mayor comunidad y, al final, se ha convertido en el preprocesador estándar de CSS. Y, ello, ha arrinconado totalmente a LESS. Ahora bien, ¿qué es SASS? ¿Qué es SCSS? ¿Son lo mismo? ¿Son tecnologías distintas?

Home de SASS
Seguro que SASS sí que te sonaba, ¿a qué sí?

Pues bien, al final, realmente, lo único que cambia entre SASS y SCSS es la sintaxis al escribir el código, que es ligeramente distinta (y el formato del fichero, pero eso a nosotros como IT Recruiters nos da igual). Son de los mismos creadores y, a nosotros como IT Recruiters, el desarrollador que tenga experiencia en SASS o en SCSS lo entenderemos como lo mismo, porque, como hemos visto, en cuanto a potencia (qué aportan a CSS), aportan exactamente lo mismo.

Como en el caso de los frameworks, existen otros preprocesadores de CSS como Stylus, pero estos son los más destacados.

Llevando la teoría a la vida real

En la vida real, para maquetar una página web (darle estructura y diseño, que es lo que vas a realizar con HTML y CSS), utilizarás HTML y CSS sí o sí. ¿Se aconseja utilizar frameworks? Todo depende de lo que quiera el cliente, ya que los programadores hemos de dar la mejor solución ajustada al presupuesto del cliente y a sus necesidades. ¿Se aconseja utilizar preprocesadores? En este caso, yo sí soy favorable al uso de los mismos, ya que considero que aportan potencia a un lenguaje de diseño como es CSS.

Índice del curso

Recuerda que para seguir nuestro curso de Reclutamiento IT sólo tienes que ir al índice y seguir por la clase de tu interés. ¡Feliz aprendizaje!

Si tienes dudas, recuerda que puedes preguntarle a la comunidad con el hashtag #SoySalvajeReclutamientoIT en Twitter y que puedes contactar con nosotros (aunque no me comprometo a responder por falta de tiempo, aunque responderé si puedo)  por TwitterInstagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios.  Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en la siguiente clase.