Este art\u00edculo te cuenta lo que necesitas saber sobre lo que hacen los desarrolladores frontend, las competencias que necesitan y c\u00f3mo puedes conseguir un trabajo.<\/p>\n
\u00bfEres un empresario que quiere contratar a un desarrollador de frontend? Tambi\u00e9n lo cubrimos.<\/p>\n
\u00bfQu\u00e9 es un desarrollador frontend?<\/h2>\n
Un desarrollador frontend utiliza el c\u00f3digo para implementar el dise\u00f1o de un sitio web o de una aplicaci\u00f3n.<\/p>\n
Sus herramientas principales son HTML<\/a>, CSS<\/a> y JavaScript<\/a>: HTML para la estructura general y el contenido del sitio web, CSS para el estilo y JavaScript para la interactividad avanzada.<\/p>\n El desarrollo del frontend es el desarrollo de la interfaz de usuario del sitio web. Cualquier cosa que el usuario pueda ver o con la que pueda interactuar (como el dise\u00f1o, las im\u00e1genes, los men\u00fas o el formulario de acceso) se considera el frontend del sitio.<\/p>\n El otro tipo principal de desarrollo web es el desarrollo del backend. El usuario no ve el trabajo de un desarrollador de backend, pero \u00e9ste hace posible el sitio web. El backend de un sitio incluye los servidores, las bases de datos, la l\u00f3gica del backend y las API.<\/p>\n Tambi\u00e9n habr\u00e1s escuchado el t\u00e9rmino desarrollo full-stack. Los desarrolladores full-stack son generalistas que hacen tanto desarrollo frontend como backend.<\/p>\n\n Un desarrollador frontend construye y mantiene el frontend de un sitio web o aplicaci\u00f3n. Algunos ejemplos de las partes de un sitio web en las que trabajan son<\/p>\n Un desarrollador frontend es responsable de construir un sitio web o una aplicaci\u00f3n que proporcione una experiencia de usuario agradable. Eso significa que tiene un buen aspecto y funciona como se supone que debe hacerlo.<\/p>\n Los desarrolladores frontend no suelen ser responsables del dise\u00f1o del sitio. Sin embargo, trabajar\u00e1n estrechamente con los dise\u00f1adores de UI y UX para convertir sus ideas en realidad.<\/p>\n Una vez construido el sitio o la aplicaci\u00f3n, los desarrolladores de frontend son responsables del mantenimiento, las pruebas y los desarrollos continuos, como las actualizaciones de funciones.<\/p>\n Todos los desarrolladores frontend deben tener conocimientos de HTML, CSS y JavaScript. Esos tres lenguajes son la base de casi todo lo que har\u00e1s.<\/p>\n Tambi\u00e9n necesitar\u00e1s otras habilidades, pero el mismo conjunto de habilidades requerido variar\u00e1 de un trabajo a otro.<\/p>\n La lista a continuaci\u00f3n cubre algunas de las competencias m\u00e1s comunes que se requieren para los trabajos de desarrollo frontend. Conocer tantas como sea posible te convertir\u00e1 en el mejor candidato para una amplia gama de puestos.<\/p>\n HTML y CSS<\/a> van de la mano y son los componentes b\u00e1sicos del dise\u00f1o de sitios web.<\/p>\n HTML significa Lenguaje de Marcado de Hipertexto. Define la estructura de una p\u00e1gina web. Por ejemplo, usar\u00e1s HTML para indicar d\u00f3nde van los encabezados, d\u00f3nde poner un salto de p\u00e1rrafo y d\u00f3nde insertar una imagen. Todo el texto y las im\u00e1genes que est\u00e1s viendo en esta misma p\u00e1gina son gracias al HTML.<\/p>\n CSS son las siglas de Cascading Style Sheets (hojas de estilo en cascada), y se ocupa del estilo. Por ejemplo, CSS puede dictar el color de fondo o la fuente. Puedes utilizar una \u00fanica hoja de estilos CSS para definir los estilos en todo un sitio (es decir, en varias p\u00e1ginas a la vez).<\/p>\n Un buen desarrollador frontend tiene experiencia con HTML y CSS y puede entender r\u00e1pidamente c\u00f3mo utilizarlos juntos para crear un dise\u00f1o.<\/p>\n Por suerte, HTML y CSS son bastante f\u00e1ciles de aprender. Pero dominarlos de verdad puede llevar tiempo.<\/p>\n Una vez que hayas aprendido lo b\u00e1sico, puedes practicar tus habilidades de codificaci\u00f3n mirando sitios web existentes e intentando clonar el dise\u00f1o y las caracter\u00edsticas que veas.<\/p>\n Mientras que el HTML establece el marco y el CSS define el estilo, el JavaScript hace que un sitio web sea interactivo.<\/p>\n Si un sitio web hace algo m\u00e1s que mostrar informaci\u00f3n est\u00e1tica, probablemente sea gracias a JavaScript. Por ejemplo, puedes usar JavaScript para crear un mapa que se actualice en tiempo real o para animar parte de tu sitio web.<\/p>\n Seg\u00fan una encuesta de StackOverflow, JavaScript es el lenguaje de programaci\u00f3n m\u00e1s utilizado<\/a> por los desarrolladores web profesionales. El siguiente lenguaje m\u00e1s popular es HTML\/CSS.<\/p>\n JavaScript es m\u00e1s complejo que HTML o CSS, pero sigue siendo uno de los lenguajes de programaci\u00f3n m\u00e1s accesibles. Puedes aprenderlo en cuesti\u00f3n de meses.<\/p>\n Las bibliotecas y los Framework de JavaScript<\/a> son herramientas que hacen que el desarrollo de JavaScript sea m\u00e1s r\u00e1pido y f\u00e1cil.<\/p>\n Una biblioteca JavaScript es un conjunto de c\u00f3digos reutilizables que puedes poner en tu proyecto. Te ahorra el trabajo de desarrollar una funci\u00f3n desde cero cuando otros desarrolladores ya lo han hecho.<\/p>\n Existen m\u00e1s de 83 bibliotecas, cada una de las cuales tiene un prop\u00f3sito espec\u00edfico. Por ejemplo, Chart.js es una biblioteca que te permite crear cuadros y gr\u00e1ficos para tu sitio web f\u00e1cilmente.<\/p>\n Una biblioteca de JavaScript con la que deber\u00edas estar familiarizado es React. React es una biblioteca gratuita y de c\u00f3digo abierto mantenida por Facebook. Se utiliza para construir interfaces de usuario para aplicaciones de una sola p\u00e1gina y es actualmente la biblioteca JavaScript m\u00e1s popular.<\/p>\n Los frameworks de JavaScript son similares a las bibliotecas. Ambos proporcionan c\u00f3digo reutilizable, pero el uso es un poco diferente.<\/p>\n Cuando utilizas una biblioteca, te encargas del flujo de la aplicaci\u00f3n. T\u00fa decides en qu\u00e9 parte de tu c\u00f3digo llamar a un componente de la biblioteca.<\/p>\n Con los frameworks, est\u00e1s conectando tu c\u00f3digo al framework. En lugar de que tu c\u00f3digo llame a la biblioteca, el marco llama a tu c\u00f3digo en los puntos designados.<\/p>\n Un par de marcos populares con los que debes estar familiarizado son Angular.js<\/a> y Vue.js<\/a>.<\/p>\n Node.js<\/a> suele llamarse err\u00f3neamente marco o lenguaje de programaci\u00f3n, pero es un entorno de ejecuci\u00f3n para el desarrollo de frontend y backend.<\/p>\n Normalmente, el navegador del usuario ejecuta JavaScript. Node.js te permite ejecutar tu c\u00f3digo JavaScript fuera del navegador.<\/p>\n Node.js es popular porque hace que el desarrollo web sea m\u00e1s eficiente. Permite a los programadores crear el frontend y el backend de una aplicaci\u00f3n utilizando un \u00fanico lenguaje de programaci\u00f3n.<\/p>\n Puede que tengas que usar Node.js en tu trabajo de desarrollador de frontend, as\u00ed que es bueno aprenderlo. Puedes descargarlo e instalarlo t\u00fa mismo<\/a> para poder practicar.<\/p>\n Ajax es la abreviatura de JavaScript as\u00edncrono y XML. Ajax no es una tecnolog\u00eda en s\u00ed misma<\/a>, sino un conjunto de t\u00e9cnicas de programaci\u00f3n.<\/p>\n Ajax trata del desarrollo as\u00edncrono. Eso significa que puedes actualizar el contenido de una parte de una p\u00e1gina web sin recargar toda la p\u00e1gina.<\/p>\n Un ejemplo t\u00edpico es el autocompletado. Cuando empiezas a escribir una consulta en Google, el buscador te ofrece opciones de autocompletar. Puede hacerlo sin recargar toda la p\u00e1gina de resultados de la b\u00fasqueda.<\/p>\n Muchos trabajos de desarrollador frontend exigen estar familiarizado con los conceptos de Ajax. Una vez que domines JavaScript, los tutoriales en l\u00ednea pueden ense\u00f1arte a utilizarlo para Ajax.<\/p>\n Dependiendo del proyecto en el que trabajes, es posible que quieras conocer otros lenguajes de programaci\u00f3n<\/a> adem\u00e1s de JavaScript.<\/p>\n Por ejemplo, TypeScript es un lenguaje de programaci\u00f3n cada vez m\u00e1s popular desarrollado por Microsoft. Typescript es un superconjunto de JavaScript. A diferencia de JavaScript, fue dise\u00f1ado para crear aplicaciones de nivel empresarial.<\/p>\n JavaScript es un lenguaje esencial que hay que conocer, pero una vez que lo domines, puedes buscar otras posibilidades como:<\/p>\n Conocer uno o dos lenguajes de programaci\u00f3n m\u00e1s all\u00e1 de JavaScript puede diferenciarte como candidato a un puesto de trabajo.<\/p>\n Ya hemos hablado de los frameworks y las bibliotecas para JavaScript.<\/p>\n El CSS tambi\u00e9n hace uso de frameworks. El m\u00e1s importante es Bootstrap.<\/p>\n Bootstrap es una colecci\u00f3n gratuita de piezas de c\u00f3digo reutilizables escritas en HTML, CSS y (opcionalmente) JavaScript. Permite a los desarrolladores construir r\u00e1pidamente sitios web que responden totalmente a los dispositivos m\u00f3viles.<\/p>\n Como desarrollador frontend, es \u00fatil tener al menos un conocimiento b\u00e1sico de Bootstrap. Existen muchos cursos y tutoriales en l\u00ednea, pero no te adentres en \u00e9l hasta que no hayas desarrollado un s\u00f3lido conocimiento de HTML y CSS.<\/p>\n Un sistema de gesti\u00f3n de contenidos<\/a> es un software que ayuda a los usuarios a crear, editar y gestionar el contenido de un sitio web sin necesidad de conocimientos t\u00e9cnicos.<\/p>\n Por ejemplo, puedes escribir una entrada de blog y a\u00f1adirla a tu sitio sin preocuparte del HTML y el CSS utilizados para mostrar la entrada.<\/p>\n WordPress es, con mucho, el CMS m\u00e1s popular. Otros que encontrar\u00e1s son Drupal, Joomla! y Ghost.<\/p>\n Como desarrollador frontend, a menudo trabajar\u00e1s en sitios web que utilizan un CMS. El conocimiento de estas plataformas es una habilidad comercializable.<\/p>\n Tambi\u00e9n puedes trabajar creando nuevos temas para WordPress<\/a> u otros sistemas de gesti\u00f3n de contenidos.<\/p>\n Una API (interfaz de programaci\u00f3n de aplicaciones) permite a una aplicaci\u00f3n o servicio acceder a un recurso dentro de otra aplicaci\u00f3n o servicio.<\/p>\n Por ejemplo, un desarrollador podr\u00eda querer integrar datos meteorol\u00f3gicos en su sitio web. Para ello, podr\u00eda utilizar una API que se dirija a un servicio meteorol\u00f3gico y obtenga los datos.<\/p>\n Las APIs RESTful son un tipo de API que se ajusta a las restricciones del estilo arquitect\u00f3nico REST (Representational State Transfer) y permite la conexi\u00f3n con servicios web RESTful.<\/p>\n Como desarrollador de frontend, no tendr\u00e1s que escribir tus API para que otros las llamen (eso es un trabajo de backend), pero debes saber c\u00f3mo llamar a una API y mostrarla de forma significativa en tu sitio.<\/p>\n Hoy en d\u00eda, los visitantes de un sitio web utilizan una gran variedad de navegadores y dispositivos.<\/p>\n No basta con que un sitio web se vea bien en la pantalla de un port\u00e1til cuando los dispositivos m\u00f3viles representan el 54,8%<\/a> del tr\u00e1fico mundial de sitios web.<\/p>\n Algunos sitios web tendr\u00e1n versiones separadas para el escritorio y para los m\u00f3viles, pero lo m\u00e1s habitual es que tengas que construir el sitio para que responda a los m\u00f3viles<\/a>.<\/p>\n Un sitio web responsivo est\u00e1 dise\u00f1ado para que se vea bien en cualquier dispositivo, ventana o tama\u00f1o de pantalla.<\/p>\n Es importante que un sitio web sea responsivo para m\u00f3viles. El 45%<\/a> de los consumidores abandonar\u00e1n cualquier contenido que se muestre mal en el dispositivo que est\u00e9n utilizando.<\/p>\n Dado que ya no existe un sitio web que no tenga que funcionar en el m\u00f3vil, entender los principios del dise\u00f1o responsivo es una habilidad no negociable para un desarrollador de frontend.<\/p>\n El dise\u00f1o responsivo se consigue mediante HTML y CSS. No es intuitivo, pero hay muchos cursos y recursos online disponibles.<\/p>\n Un sitio web tiene que tener un buen aspecto y funcionar bien en cualquier navegador. Aunque Chrome es el navegador m\u00e1s popular<\/a>, los desarrolladores no deben pasar por alto Safari, Edge o Firefox.<\/p>\n Parte de tu trabajo como desarrollador frontend ser\u00e1 asegurar que tu trabajo se vea bien en cualquier navegador importante. Eso significa entender las diferencias entre los navegadores y probar tus dise\u00f1os en ellos.<\/p>\n Puedes leer sobre el desarrollo multiplataforma en sitios populares de recursos de codificaci\u00f3n. Tambi\u00e9n debes practicar. Cuando hagas proyectos por tu cuenta, no dejes de probarlos en varios navegadores.<\/p>\n Tambi\u00e9n hay herramientas disponibles para ayudarte a realizar pruebas entre navegadores. Algunas de las que tienen versiones gratuitas son:<\/p>\n Un sistema de control de versiones te ayuda a hacer un seguimiento de los cambios realizados en el c\u00f3digo de tu sitio web. Puedes utilizarlos para volver a una versi\u00f3n anterior del c\u00f3digo si algo va mal.<\/p>\n Esto puede ahorrar mucho tiempo en caso de error. En lugar de encontrar el problema y deshacerlo manualmente, puedes revertir el proyecto a una versi\u00f3n anterior.<\/p>\n Los sistemas de control de versiones tambi\u00e9n son esenciales para la colaboraci\u00f3n. Permiten que varios usuarios trabajen en el mismo proyecto sin versiones conflictivas.<\/p>\n Git es el sistema de gesti\u00f3n de control de versiones m\u00e1s popular y ser\u00e1 necesario para muchos trabajos de desarrollo, ya sea frontend, backend o full-stack. Empieza a aprender instalando Git<\/a> y creando una cuenta en GitHub.com<\/a>.<\/p>\n La cualificaci\u00f3n m\u00e1s importante para convertirse en un desarrollador<\/a> de frontend es el dominio de HTML, CSS, JavaScript y algunas de las otras habilidades enumeradas anteriormente. Sin la capacidad de codificaci\u00f3n, nada m\u00e1s en tu curr\u00edculum importa.<\/p>\n Hoy en d\u00eda, es posible aprender a codificar por tu cuenta utilizando recursos online.<\/p>\n 40.39%<\/a> de los desarrolladores web actuales hicieron un curso de programaci\u00f3n online, el 31,62% aprendieron en foros online y el 59,53% utilizaron otros recursos online como blogs o v\u00eddeos.<\/p>\n Para aprender desarrollo web, consulta sitios como<\/p>\n Es posible aprender c\u00f3digo por ti mismo, pero eso no significa que tu educaci\u00f3n formal no importe. Muchos trabajos de desarrollador frontend prefieren o incluso exigen que tengas un t\u00edtulo relacionado. Si no lo tienes, tendr\u00e1s que asegurarte de que tu cartera de desarrollo<\/a> web habla por s\u00ed misma.<\/p>\n Entonces, \u00bfc\u00f3mo crear un portafolio si no tienes experiencia laboral?<\/p>\n Una forma de mostrar tus habilidades de desarrollo frontend es construir sitios web y aplicaciones de forma independiente. Crea una herramienta relacionada con tus intereses o comprueba si alguien que conoces necesita que le hagan un trabajo de desarrollo.<\/p>\n Convertirse en desarrollador web es un gran paso en tu carrera. Podemos esperar un crecimiento del 8% de los puestos de trabajo<\/a> en la pr\u00f3xima d\u00e9cada. Eso supone unos 13.400 puestos de trabajo al a\u00f1o, un crecimiento mucho m\u00e1s r\u00e1pido que el de la profesi\u00f3n media.<\/p>\n Tanto los desarrolladores de front-end como de back-end tienen demanda, pero hay un poco m\u00e1s de ofertas de trabajo para desarrolladores de front-end. En Indeed.com, hay actualmente 14.600<\/a> puestos de trabajo abiertos para desarrolladores de frontend en EE.UU., mientras que hay 12.300 disponibles para desarrolladores de backend.<\/p>\n Seg\u00fan Glassdoor, el salario medio de los desarrolladores de frontend<\/a> es de 86.088<\/a> d\u00f3lares.<\/p>\n Pero eso no es todo.<\/p>\n Los sueldos de los desarrolladores web<\/a> pueden variar enormemente seg\u00fan el tipo de empresa, las habilidades necesarias para el trabajo, tu ubicaci\u00f3n y tu nivel de experiencia. Puedes esperar ganar un salario m\u00e1s alto si te mantienes durante a\u00f1os. Las personas con el t\u00edtulo de desarrollador frontend senior ganan una media de 107.276 d\u00f3lares.<\/p>\n Hay muchos desarrolladores web, pero los de verdadero talento son dif\u00edciles de encontrar.<\/p>\n\u00bfQu\u00e9 es el desarrollo del frontend?<\/h3>\n
![\"Front](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/Untitled-48.png\")
\u00bfQu\u00e9 hace un desarrollador frontend?<\/h2>\n
\n
\u00bfCu\u00e1les son las responsabilidades de un desarrollador de frontend?<\/h3>\n
\u00bfQu\u00e9 habilidades necesitas para ser un desarrollador frontend?<\/h2>\n
HTML y CSS<\/h3>\n
JavaScript<\/h3>\n
![\"Programming](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/Untitled-56.png\")
React y otras bibliotecas, y Framework de JavaScript<\/h3>\n
Node.js<\/h3>\n
Ajax<\/h3>\n
Otros lenguajes de programaci\u00f3n<\/h3>\n
\n
Bootstrap<\/h3>\n
Sistemas de gesti\u00f3n de contenidos (CMS)<\/h3>\n
Servicios RESTful y APIs<\/h3>\n
Dise\u00f1o sensible a los dispositivos m\u00f3viles<\/h3>\n
![\"Mobile](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/Untitled-62.png\")
Pruebas y desarrollo entre navegadores<\/h3>\n
\n
Sistemas de control de versiones<\/h3>\n
C\u00f3mo convertirse en desarrollador de frontales<\/h2>\n
\n
![\"Where](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/Untitled-69.png\")
\u00bfHay demanda de desarrolladores frontend?<\/h2>\n
\u00bfCu\u00e1l es el salario medio de los desarrolladores frontend?<\/h2>\n
![\"Front](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/Untitled-73.png\")
Qu\u00e9 hay que tener en cuenta al contratar a un desarrollador frontend<\/h2>\n