Front End Developer: rol y principales herramientas utilizadas

06.04.2022
Front End Developer: rol y principales herramientas utilizadas

Front End Developer: quién es y qué hace

Cuando se habla del desarrollo de app, páginas web o sistemas digitales, se suele distinguir entre una parte visible (Front End) que tiene que ver con la interfaz de usuario, y una segunda parte (Back End) que no es visible pero es fundamental para el funcionamiento del sistema. Estas distinciones nacen de la exigencia de acelerar el tiempo de desarrollo y de las modificaciones y de la necesidad de obtener productos funcionales y con usabilidad.

El Front End Developer es un desarrollador informático que se ocupa de la creación de la parte visible de una app o una web y de la optimización de la experiencia del usuario. Por lo tanto el Front End Developer trabaja para que un app o una web sea estéticamente atractiva y fácil de navegar incluso para los usuarios menos expertos.

Front End Developer: principales herramientas

El Front End Developer utiliza herramientas particulares y lenguajes de programación y marcado específicos. Veamos los principales:

  • HTML. El acrónimo de Hypertext Markup Language, puede ser considerado el lenguaje de marcado por excelencia. Desarrollado a principios de los años noventa, este lenguaje ha tenido una grandísima difusión después de sus primeros usos comerciales en web. Se trata de un lenguaje de formato que describe la modalidad de paginación del contenido de una página web a través de etiquetas de formato.
  • CSS. En inglés Cascading Style Sheets, representa un metalenguaje que gestiona el diseño web y trabaja en coordinación con el HTML para crear la dimensión visible del usuario. Las hojas de estilo están definidas en cascada porque dependen de una única hoja que hereda en cascada la propiedad de todas las demás1. Hoy en día existen varias plataformas que permiten también a los usuarios menos expertos crear su página web o un blog simplificado. Si el objetivo es dar vida a algo más complejo que un simple escaparate, es fundamental aprender a utilizar este instrumento.
  • Javascript. A diferencia de los lenguajes precedentes, Javascript es un lenguaje de programación que garantiza la interactividad de la página web. Si HTML y CSS permiten que el sitio posea un contenido estático, Javascript permite que la página web sea dinámica, es decir, que posee características específicas (mapas, links…) con los cuales el usuario puede interactuar.
  • Navegador web y DevTools. El navegador web es el instrumento que permite visitar la página web codificada en HTML, CSS y Javascript. Después de una fase de “parser” o analizador sintáctico y un análisis de etiquetas, el navegador proyecta la página web y nos permite visualizarla. Por otro lado, el DevTools permite indagar en el sitio web, es decir, analizar los códigos e identificar los errores eventuales de escritura2.
  • Text Editor. Visual Studio Code, Sublime Text y Notepad + + son los editores de texto más utilizados por los Front End Developers. Se trata de los programas para la composición de textos que facilitan la escritura y permiten la inserción de imágenes y otras funcionalidades internas de la página web.
  • Framework del Front End. Para un desarrollo web más complejo es posible utilizar frameworks para aplicaciones, o sea módulos y estructuras ready-to-use que facilitan el trabajo de los desarrolladores y les permiten un gran ahorro de tiempo. La mayoría de los frameworks más utilizados son de código abierto, como React - mantenido por meta y una comunidad de desarrolladores independientes y de empresa - AngularJS - desarrollado por Google y la comunidad de desarrolladores individuales - y la más reciente Vue.js - creado por Evan You, ex empleado de Google.
  • Instrumentos de diseño de experiencia de usuario. El Front End Developer no se limita a la simple creación de la interfaz gráfica de una página web, sino que estudia e implementa el mejor modo para optimizar la experiencia de usuario. Por eso es fundamental un buen conocimiento de los instrumentos de diseño. Entre los más utilizados están Adobe XD, producto distribuido por Adobe en la colección de Creative Cloud.

Fuentes 

  1. ¿Qué es CSS?, lenguajecss.com
  2. DevTools Overview, angular.io

Bienvenido.