¿Qué es el desarrollo front-end y por dónde empezar a aprenderlo?
Explicamos qué es el desarrollo front-end, qué hacen los desarrolladores front-end, cuánto ganan y cómo convertirse en un desarrollador de interfaces y crecer en la profesión.
¿Qué es el desarrollo frontend?
Cuando abrimos un sitio web o una aplicación, interactuamos con menús, botones, banners, tarjetas, ventanas emergentes y animaciones. Esto se llama front-end.
El desarrollo front-end es la creación de la interfaz de usuario de sitios web y aplicaciones. Para un desarrollador front-end, es importante que los usuarios puedan encontrar fácilmente todo lo que necesitan en el sitio. Por ejemplo, leer detalles sobre un producto, conocer sus ventajas, leer reseñas, ver videos y realizar una compra.
El desarrollo front-end es la creación de la interfaz de usuario de sitios web y aplicaciones. Para un desarrollador front-end, es importante que los usuarios puedan encontrar fácilmente todo lo que necesitan en el sitio. Por ejemplo, leer detalles sobre un producto, conocer sus ventajas, leer reseñas, ver videos y realizar una compra.
¿Qué hacen los desarrolladores frontend?
Antes de que los usuarios vean el sitio web de un nuevo servicio, es necesario diseñarlo. Los diseñadores se encargan de esto: desarrollan un diseño, un borrador de la futura página. Determinan los colores, las fuentes, los elementos visuales y cómo y dónde se colocarán.
Una vez que el diseño está listo, entra en juego el desarrollador front-end. El desarrollador front-end convierte ese diseño en código y hace que la interfaz sea interactiva para que los usuarios puedan hacer clic en botones atractivos, completar formularios e interactuar con la futura página.
Enumeremos algunas de las tareas principales que realiza un desarrollador front-end.
Maquetación
El desarrollador front-end crea la estructura y el esquema de la página utilizando el lenguaje de marcado HTML (HyperText Markup Language - "lenguaje de marcado de hipertexto"). Según el diseño, los programadores determinan cómo se colocarán en la página diferentes elementos, como encabezados, párrafos, listas e imágenes. Colocan texto, imágenes, botones y otros elementos en la página de manera que sean fáciles de leer y estén bien ubicados.
Veamos más detalladamente cómo trabaja un desarrollador front-end con la maquetación y el HTML.
El código HTML está compuesto por diferentes palabras llamadas etiquetas. Estas palabras se escriben en un archivo de texto normal y luego se guardan como un archivo HTML, que se puede abrir en un navegador. El navegador lee este código, lo hace comprensible para los ojos y muestra la página como el creador quería. Puede ver cómo se ve la página en el navegador presionando la tecla F12.
Así es como se ve el código de una página de uno de nuestros artículos anteriores:
Una vez que el diseño está listo, entra en juego el desarrollador front-end. El desarrollador front-end convierte ese diseño en código y hace que la interfaz sea interactiva para que los usuarios puedan hacer clic en botones atractivos, completar formularios e interactuar con la futura página.
Enumeremos algunas de las tareas principales que realiza un desarrollador front-end.
Maquetación
El desarrollador front-end crea la estructura y el esquema de la página utilizando el lenguaje de marcado HTML (HyperText Markup Language - "lenguaje de marcado de hipertexto"). Según el diseño, los programadores determinan cómo se colocarán en la página diferentes elementos, como encabezados, párrafos, listas e imágenes. Colocan texto, imágenes, botones y otros elementos en la página de manera que sean fáciles de leer y estén bien ubicados.
Veamos más detalladamente cómo trabaja un desarrollador front-end con la maquetación y el HTML.
El código HTML está compuesto por diferentes palabras llamadas etiquetas. Estas palabras se escriben en un archivo de texto normal y luego se guardan como un archivo HTML, que se puede abrir en un navegador. El navegador lee este código, lo hace comprensible para los ojos y muestra la página como el creador quería. Puede ver cómo se ve la página en el navegador presionando la tecla F12.
Así es como se ve el código de una página de uno de nuestros artículos anteriores:
Al abrir el código, vemos las etiquetas de inmediato. Por ejemplo, <h1> es una etiqueta para un encabezado de primer nivel, y <p> es para un párrafo de texto. Las etiquetas pueden estar anidadas, creando una jerarquía. Dentro de las etiquetas se pueden insertar texto, imágenes, videos, enlaces.
También hay elementos en el código que consisten en etiquetas de apertura y cierre (<p>...</p>), y dentro de ellos hay contenido. En nuestro caso, hay un párrafo de texto dentro de las etiquetas.
También hay elementos en el código que consisten en etiquetas de apertura y cierre (<p>...</p>), y dentro de ellos hay contenido. En nuestro caso, hay un párrafo de texto dentro de las etiquetas.
Además, las etiquetas pueden tener atributos que proporcionan información adicional sobre la etiqueta. Por ejemplo, <img src="image.jpg" alt="Imagen">: aquí src y alt son atributos.
Estilización
Muchos de los elementos de HTML ya tienen algún estilo visual: los párrafos tienen sangrías, los enlaces en el texto suelen ser de color azul y subrayados, los encabezados tienen diferentes tamaños de fuente. Pero esto no es suficiente para crear sitios web modernos y atractivos. Algunos estilos no nos convienen y queremos estilizar elementos específicos.
Aquí es donde entra en juego el lenguaje Cascading Style Sheets (CSS). Con CSS, el desarrollador front-end establece la apariencia de los elementos. Elige colores, fuentes, tamaños y crea estilos para que la interfaz se vea atractiva y coherente.
¿Cómo funciona esto? Primero, el desarrollador especifica qué elementos de la página desea estilizar. Tomemos, por ejemplo, la estilización de un párrafo.
Muchos de los elementos de HTML ya tienen algún estilo visual: los párrafos tienen sangrías, los enlaces en el texto suelen ser de color azul y subrayados, los encabezados tienen diferentes tamaños de fuente. Pero esto no es suficiente para crear sitios web modernos y atractivos. Algunos estilos no nos convienen y queremos estilizar elementos específicos.
Aquí es donde entra en juego el lenguaje Cascading Style Sheets (CSS). Con CSS, el desarrollador front-end establece la apariencia de los elementos. Elige colores, fuentes, tamaños y crea estilos para que la interfaz se vea atractiva y coherente.
¿Cómo funciona esto? Primero, el desarrollador especifica qué elementos de la página desea estilizar. Tomemos, por ejemplo, la estilización de un párrafo.
<p>
La prueba es la verificación del software que muestra si cumple con las expectativas de los
desarrolladores y si funciona correctamente.
</p>Luego, el desarrollador frontend crea reglas de estilo. Estas son como instrucciones que le dicen al navegador cómo debe lucir cada elemento seleccionado. El desarrollador establece el color del texto, el tamaño de la fuente, los márgenes y mucho más. En nuestro caso, hagamos que el color del párrafo sea azul.
p {
color: blue;
font-size: 20px;
}Después de eso, cuando el navegador carga la página, lee el código CSS y aplica los estilos a los elementos correspondientes. Como hemos especificado que todo el párrafo debe estar escrito en color azul, el navegador lo mostrará en azul.
Si el desarrollador desea cambiar la apariencia de la página, simplemente modifica el código CSS. Esto permite realizar cambios fácilmente sin tener que modificar la estructura HTML de la página.
Interactividad
La interactividad es una propiedad de una página que determina qué tan fácil es para los usuarios interactuar con ella: hacer clic en botones, compartir en redes sociales, escribir comentarios.
Primero, el desarrollador front-end realiza una mini investigación: qué acciones deben realizar los usuarios en la página. Estas pueden ser clics en botones, completar formularios, mover el mouse y mucho más. Luego, el desarrollador front-end crea los elementos necesarios: botones, campos de entrada, enlaces.
Luego, el desarrollador utiliza el lenguaje de programación JavaScript y escribe código. Con el código JavaScript, se muestra una ventana emergente después de hacer clic en un botón, y después de completar un formulario (por ejemplo, al dejar un comentario), los datos se envían al servidor.
Si el desarrollador desea cambiar la apariencia de la página, simplemente modifica el código CSS. Esto permite realizar cambios fácilmente sin tener que modificar la estructura HTML de la página.
Interactividad
La interactividad es una propiedad de una página que determina qué tan fácil es para los usuarios interactuar con ella: hacer clic en botones, compartir en redes sociales, escribir comentarios.
Primero, el desarrollador front-end realiza una mini investigación: qué acciones deben realizar los usuarios en la página. Estas pueden ser clics en botones, completar formularios, mover el mouse y mucho más. Luego, el desarrollador front-end crea los elementos necesarios: botones, campos de entrada, enlaces.
Luego, el desarrollador utiliza el lenguaje de programación JavaScript y escribe código. Con el código JavaScript, se muestra una ventana emergente después de hacer clic en un botón, y después de completar un formulario (por ejemplo, al dejar un comentario), los datos se envían al servidor.
Adaptabilidad
El desarrollador front-end hace que la interfaz sea adaptable para que se vea bien y funcione en diferentes dispositivos, como computadoras, tabletas y teléfonos inteligentes.
Así es como se puede ver la misma página de un artículo reciente de Códica en un navegador y en un iPhone XR.
El desarrollador front-end hace que la interfaz sea adaptable para que se vea bien y funcione en diferentes dispositivos, como computadoras, tabletas y teléfonos inteligentes.
Así es como se puede ver la misma página de un artículo reciente de Códica en un navegador y en un iPhone XR.
Optimización
El desarrollador front-end también trabaja en la optimización de la página, es decir, hace que la página se cargue rápidamente y funcione sin problemas. Para ello, primero estudia qué elementos pueden ralentizar la carga o el rendimiento de la página. Estos pueden ser imágenes grandes, estilos complejos, scripts.
Luego, el desarrollador front-end reduce el tamaño de estos elementos utilizando algoritmos especiales que mantienen la calidad pero reducen el tamaño de los archivos. También configura la memoria caché, que almacena algunos archivos en la computadora del usuario. Esto permite cargar la página más rápido, ya que algunos datos ya están en la computadora de forma predeterminada.
El desarrollador también se asegura de que algunos elementos se carguen de forma paralela, sin bloquearse entre sí. Por ejemplo, si hay un video en la página que se puede reproducir, el script para controlar la reproducción se puede cargar de forma asíncrona. De esta manera, verá el contenido principal de la página más rápido, incluso si el script aún no se ha cargado por completo.
El desarrollador front-end también trabaja en la optimización de la página, es decir, hace que la página se cargue rápidamente y funcione sin problemas. Para ello, primero estudia qué elementos pueden ralentizar la carga o el rendimiento de la página. Estos pueden ser imágenes grandes, estilos complejos, scripts.
Luego, el desarrollador front-end reduce el tamaño de estos elementos utilizando algoritmos especiales que mantienen la calidad pero reducen el tamaño de los archivos. También configura la memoria caché, que almacena algunos archivos en la computadora del usuario. Esto permite cargar la página más rápido, ya que algunos datos ya están en la computadora de forma predeterminada.
El desarrollador también se asegura de que algunos elementos se carguen de forma paralela, sin bloquearse entre sí. Por ejemplo, si hay un video en la página que se puede reproducir, el script para controlar la reproducción se puede cargar de forma asíncrona. De esta manera, verá el contenido principal de la página más rápido, incluso si el script aún no se ha cargado por completo.
Pruebas
Al final de su trabajo, el desarrollador front-end verifica que todos los elementos de la interfaz funcionen correctamente y se vean bien en diferentes navegadores y dispositivos. Aquí hay una lista de verificación condicional que sigue un desarrollador front-end:
Al final de su trabajo, el desarrollador front-end verifica que todos los elementos de la interfaz funcionen correctamente y se vean bien en diferentes navegadores y dispositivos. Aquí hay una lista de verificación condicional que sigue un desarrollador front-end:
- El texto, las imágenes, los botones y otros elementos se colocan correctamente y se ven según el diseño, y los colores y fuentes se ajustan al estilo.
- La página se muestra correctamente en dispositivos y pantallas. El contenido se adapta correctamente a diferentes tamaños de pantalla.
- Los elementos interactivos responden a las acciones del usuario, como clics y desplazamientos del mouse.
- Todos los enlaces funcionan y llevan a los usuarios a las páginas correctas, y los menús y otros elementos de navegación funcionan correctamente.
- Las animaciones funcionan sin problemas y sin retrasos.
- Los usuarios pueden ingresar datos y enviarlos al servidor, y los datos se validan correctamente.
- La página se carga y se muestra para los usuarios sin demoras.
Cómo se diferencian las tareas de un desarrollador front-end de las de un maquetador y otros desarrolladores
El desarrollador de interfaces siempre trabaja en equipo y está relacionado con varios especialistas al mismo tiempo. Entre ellos se encuentran diseñadores, maquetadores, probadores y otros desarrolladores.
Como mencionamos anteriormente, el diseñador crea un diseño que luego se convertirá en un sitio web. El maquetador realiza la estructura de la página en la que el desarrollador front-end se basará para colocar los elementos en el orden correcto. El probador se asegura de que todo funcione correctamente, tal como se planeó. Y el líder de equipo coordina el trabajo del desarrollador front-end, evalúa el código y brinda recomendaciones para mejorar el producto.
Muchos confunden el trabajo del maquetador y el desarrollador front-end: son bastante similares. Pero hay una gran diferencia en su trabajo.
La tarea principal del maquetador es crear la apariencia visual de una página web. El maquetador estructura y estiliza la página utilizando HTML y CSS, prestando atención a la disposición del texto, los colores y las fuentes. El desarrollador front-end, al igual que el maquetador, tiene en cuenta el diseño, pero también se ocupa de la funcionalidad de la página. Crea elementos interactivos, animaciones, validación de formularios y actualización dinámica de datos sin tener que recargar la página.
Los desarrolladores front-end también trabajan con desarrolladores backend. Como mencionamos anteriormente, el front-end es todo con lo que se puede interactuar, hacer clic, desplazarse. Y el backend es la parte interna del producto y todo lo que está "bajo el capó": los comandos para el servidor.
Los desarrolladores front-end reciben de los desarrolladores backend una API, una interfaz de programación de aplicaciones. Define cómo los datos se intercambiarán entre la parte del cliente y la parte del servidor. Los desarrolladores front-end utilizan esta API para obtener y enviar datos.
Como mencionamos anteriormente, el diseñador crea un diseño que luego se convertirá en un sitio web. El maquetador realiza la estructura de la página en la que el desarrollador front-end se basará para colocar los elementos en el orden correcto. El probador se asegura de que todo funcione correctamente, tal como se planeó. Y el líder de equipo coordina el trabajo del desarrollador front-end, evalúa el código y brinda recomendaciones para mejorar el producto.
Muchos confunden el trabajo del maquetador y el desarrollador front-end: son bastante similares. Pero hay una gran diferencia en su trabajo.
La tarea principal del maquetador es crear la apariencia visual de una página web. El maquetador estructura y estiliza la página utilizando HTML y CSS, prestando atención a la disposición del texto, los colores y las fuentes. El desarrollador front-end, al igual que el maquetador, tiene en cuenta el diseño, pero también se ocupa de la funcionalidad de la página. Crea elementos interactivos, animaciones, validación de formularios y actualización dinámica de datos sin tener que recargar la página.
Los desarrolladores front-end también trabajan con desarrolladores backend. Como mencionamos anteriormente, el front-end es todo con lo que se puede interactuar, hacer clic, desplazarse. Y el backend es la parte interna del producto y todo lo que está "bajo el capó": los comandos para el servidor.
Los desarrolladores front-end reciben de los desarrolladores backend una API, una interfaz de programación de aplicaciones. Define cómo los datos se intercambiarán entre la parte del cliente y la parte del servidor. Los desarrolladores front-end utilizan esta API para obtener y enviar datos.
Habilidades necesarias para un desarrollador front-end
Para que un desarrollador front-end pueda crear interfaces web hermosas, interactivas y funcionales, necesita:
- Conocimiento de HTML y CSS para crear y estilizar elementos en una página web.
- Conocimiento de JavaScript para agregar interactividad, animaciones y manejar eventos.
- Conocimiento de bibliotecas y frameworks y habilidad para trabajar con ellos. La experiencia con bibliotecas y frameworks populares como React, Vue o Angular facilita la creación de interfaces complejas y mejora la eficiencia del desarrollo.
- Habilidad para trabajar con diseño de respuesta para que las páginas web se muestren correctamente en diferentes dispositivos.
- Comprensión de los principios básicos del diseño para crear interfaces estéticamente agradables.
- Habilidad para trabajar con herramientas de desarrollo, como editores de código y sistemas de control de versiones.
- Comprensión de SEO para crear páginas web que sean fáciles de encontrar e indexar por los motores de búsqueda.
- Habilidad para trabajar con API para trabajar con fuentes de datos externas e integrar diversas funcionalidades.
Cuánto ganan los desarrolladores front-end y cómo avanzar en la profesión
A mediados de agosto de 2023, había aproximadamente 3350 vacantes para desarrolladores front-end en México en el servicio de reclutamiento Indeed. Los desarrolladores front-end junior ganan entre 20,000 y 24,000 pesos mexicanos. Los desarrolladores frontend intermedios ganan entre 25,000 y 40,000 pesos mexicanos. Los desarrolladores front-end senior pueden ganar entre 45,000 y 60,000 pesos mexicanos.
Según una investigación del servicio "Glassdoor", el salario medio de los desarrolladores front-end en la primera mitad de 2023 fue de 55,000 mxn.
Puede avanzar verticalmente y seguir el camino desde desarrollador junior hasta la posición de desarrollador intermedio, luego a desarrollador senior y luego crecer hasta convertirse en líder de equipo. En los primeros tres niveles, principalmente trabajará con código y los frameworks mencionados anteriormente, y con el tiempo podrá construir la arquitectura de interfaces, que es una tarea más compleja.
En la posición de líder de equipo, se convertirá más en un gerente técnico que supervisará el proyecto y el equipo, guiará a colegas menos experimentados y se comunicará con el cliente.
También existe la opción de avanzar horizontalmente: comenzar con la maquetación y pasar al front-end o pasar de front-end a backend. O puede trabajar en full stack, lo que significa que combina las responsabilidades de un desarrollador front-end y backend y desarrolla sitios web o aplicaciones de manera integral.
Según una investigación del servicio "Glassdoor", el salario medio de los desarrolladores front-end en la primera mitad de 2023 fue de 55,000 mxn.
Puede avanzar verticalmente y seguir el camino desde desarrollador junior hasta la posición de desarrollador intermedio, luego a desarrollador senior y luego crecer hasta convertirse en líder de equipo. En los primeros tres niveles, principalmente trabajará con código y los frameworks mencionados anteriormente, y con el tiempo podrá construir la arquitectura de interfaces, que es una tarea más compleja.
En la posición de líder de equipo, se convertirá más en un gerente técnico que supervisará el proyecto y el equipo, guiará a colegas menos experimentados y se comunicará con el cliente.
También existe la opción de avanzar horizontalmente: comenzar con la maquetación y pasar al front-end o pasar de front-end a backend. O puede trabajar en full stack, lo que significa que combina las responsabilidades de un desarrollador front-end y backend y desarrolla sitios web o aplicaciones de manera integral.
Cómo convertirse en desarrollador front-end
Comience aprendiendo los conceptos básicos: HTML y CSS, luego JavaScript. También familiarícese con los frameworks. Los frameworks más comunes y accesibles para principiantes en este momento son React, Angular y Vue.js.
Por cierto, además del conocimiento de los lenguajes de programación, es útil tener un buen conocimiento de inglés, especialmente técnico. Todos los días se publican miles de materiales útiles en inglés. Con esta habilidad, un especialista podrá leer artículos actuales, documentación técnica y recomendaciones de desarrollo de todo el mundo en su idioma original. El conocimiento del inglés también le permitirá trabajar en equipos con desarrolladores extranjeros.
Aquí hay algunos buenos libros y recursos para sumergirse en el desarrollo front-end:
Por cierto, además del conocimiento de los lenguajes de programación, es útil tener un buen conocimiento de inglés, especialmente técnico. Todos los días se publican miles de materiales útiles en inglés. Con esta habilidad, un especialista podrá leer artículos actuales, documentación técnica y recomendaciones de desarrollo de todo el mundo en su idioma original. El conocimiento del inglés también le permitirá trabajar en equipos con desarrolladores extranjeros.
Aquí hay algunos buenos libros y recursos para sumergirse en el desarrollo front-end:
- "Grokking Algorithms" de Aditya Bhargava: un libro clásico para principiantes en desarrollo que desean comprender la sintaxis y los algoritmos.
- "JavaScript: The Definitive Guide" de David Flanagan: este libro lo ayudará a comprender los conceptos básicos de JavaScript.
- "CSS Secrets: Better Solutions to Everyday Web Design Problems" de Lea Verou: un libro que recopila problemas interesantes de CSS.
- MDN Web Docs: el sitio web oficial de Mozilla Developer Network, que proporciona explicaciones detalladas y comprensibles de HTML, CSS y JavaScript.
- El curso gratuito "JavaScript Básicos" de Códica: lo ayudará a aprender los conceptos básicos del lenguaje y practicar sus habilidades en un simulador en línea.
Leer otros artículos de Blog
Lee otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.