Desarrollo Web

Si estás buscando incursionar en la tecnología, el desarrollo Front End es una forma directa y versátil de hacerlo. Con unas buenas habilidades sólidas y el conocer lo que hace un desarrollador Front End te convertirán atractivo para los empleadores.

Actualmente los desarrolladores Front End tienen una gran demanda y es por una buena razón: la constante evolución de la tecnología, pero las empresas son muy exigentes a la hora de seleccionar a sus desarrolladores. ¡Descubre cuáles son esos skills básicos que necesitas conocer!

¿Quieres saber más sobre el desarrollo Front End? ¿Quieres saber qué skills de Front End developer se necesitan para comenzar?, eso es exactamente lo que quiero responder en esta publicación.

Qué es un desarrollador Front End

El perfil de desarrollador Front End es uno de los roles más solicitados dentro de la industria tecnológica. Son los que codifican sitios web utilizando los lenguajes base como HTML, CSS y JavaScript.

Los desarrolladores web con habilidades de Front End agregan todo lo que verá el usuario cuando llega a un sitio web, todo lo que está del lado del cliente. Trabajan junto a otros desarrolladores que se encargan del Back End y son los que trabajan con las bases de datos, servidores y otros lenguajes de programación, ya que por supuesto ambas áreas deben interactuar y complementarse entre sí para poder poner en funcionamiento un sitio web.

Luego los desarrolladores Front End también trabajan de la mano con diseñadores web que son los que proveen las maquetas y los wireframes.

¿Alguna vez ha mirado un sitio web y se ha preguntado cómo realmente funcionan todos esos botones a los que hace click? Pues eso forma parte del desarrollo Front End.

Para convertirte en un desarrollador Front End debes dominar HTML, CSS y JavaScript, no hay otro camino a seguir.

Skills que debe tener un Front End Developer

1. HTML

Hypertext Markup Language, estas son las siglas en inglés de HTML que es el que permite crear y estructurar las secciones de una página web como por ejemplo el menú de un sitio web, los párrafos, enlaces, el pie de página, entre otros.

Hay que recalcar y tener presente que HTML no es un lenguaje de programación, ya que no tiene la capacidad de crear una funcionalidad dinámica o de crear una sentencia como la de sumar dos números. En cambio a esto es un lenguaje de marcado que trabaja con etiquetas y que le da formato a un texto o documento.

Cuando hablamos de etiquetas, es que cada sección de la página debe tener las suyas propias, por ejemplo para crear un párrafo debemos agregar las etiquetas de apertura y de cierre:<p> </p>, para verlo ejemplificado de mejor manera tenemos:

<p> Esto es un párrafo en HTML </p>
<p> Este es otro párrafo en HTML </p>

En este punto debe comenzar a aprender los conceptos básicos de HTML, aprenderá a hacer formularios y a la validación de formularios, deberá aprender sobre las buenas prácticas, opcionalmente pero no menos importante puede aprender sobre HTML semántico y accesibilidad web, éstos no son necesarios al principio del aprendizaje.

2. CSS

Es el lenguaje de estilos, CSS (del inglés Cascading Style Sheets) es el que se utiliza para hacer que su HTML se vea bien, es decir, es el que cambia el aspecto de un sitio web.Se puede usar para definir estilos de texto, tamaños de tablas y otros aspectos de las páginas web.

Deberá primeramente aprender lo básico, luego aprenderá a hacer diseños, trabajará con floats, posicionamiento, box model, CCS Grid y Flexbox.

Conocerá la implementación del enfoque Mobile First Design, que se basa en comenzar a diseñar desde la pantalla más pequeña a la más grande, es decir, comenzar a diseñar primero para dispositivos móviles y así ir aumentando el tamaño de pantallas, con esto lo que se busca es que el diseño pueda verse en la mayoría de dispositivos existentes.

3. JavaScript

Es un lenguaje de programación y se ejecuta en el navegador, aquí es donde la curva de aprendizaje crece enormemente, incluso si deseas pasarte al desarrollo Back End, JavaScript le dará una gran ventaja. Dado que todos los conceptos básicos son más o menos iguales en cualquier lenguaje de programación, no puede ir mal aprendiendo JavaScript primero.

Cuando aprenda JavaScript, comenzará con la sintaxis básica, en este punto no es necesario aprender algún Framework, primero necesita conocer los tipos de datos, funciones, condicionales y bucles. La mayoría de los desarrolladores omiten este paso y se van directo a aprender algún Framework, pero siempre es mejor conocer la estructura de datos y los conceptos básicos del algoritmo.

Aunque no en profundidad, debe tener una idea básica sobre el proceso, familiarizarse con los algoritmos, es mejor conocer los conceptos básicos de la programación.

Debido a la evolución acelerada que tiene JavaScript, es imprescindible conocer, aprender e implementar las últimas características del estándar ES6 y posteriores como por ejemplo: funciones de flecha, promesas, Async/Await, template strings y otras series de características que irá aprendiendo a medida que vaya avanzando.

4. Frameworks

Podemos decir que un Framework es la base sobre la que se construye un programa o mejor es un esqueleto sobre el que construyes tu aplicación.

Son los que proporcionan estructuras listas para usar para su código JavaScript. Entre los Framework JavaScript más populares tenemos:

• AngularJs
• VueJs
• React
• Backbone

Familiarizarse con uno de ellos es una gran ventaja, con ellos se ahorrará escribir desde cero una gran cantidad de código, además de crear una aplicación más robusta.

Debe elegir una herramienta que sea mejor para el trabajo, no se trata si React es mejor que Angular o viceversa, es más una cuestión de lo que se necesita hacer.

5. Responsive

El responsive web design permite que su sitio web se adapte al dispositivo en el que lo ven sus usuarios: computadoras de escritorio, tabletas y dispositivos móviles, en pocas palabras un sitio web responsive significa que su sitio web se escala y se ajusta para funcionar en diferentes dispositivos, sin importar cuán grande o pequeño sea, móvil o de escritorio.

Y esta es una de las habilidades de un desarrollador web con conocimientos Front End debe tener para crear un sitio web.

6. Sistema de versiones

El sistema de control de versiones almacena y gestiona el historial y el estado actual del código fuente y la documentación. El sistema de control de versiones más usado es Git. Hoy en día es casi imposible trabajar en el mundo del desarrollo sin utilizar un sistema de control de versiones. Con Git es muy fácil regresar a una versión anterior sin afectar el sistema en caso de alguna falla, y permite una fácil colaboración hacia otros proyectos.

Y la verdad es que no es muy complicado su aprendizaje, sus conceptos y flujo de trabajo es relativamente sencillo de aprender.

7. Pruebas

Luego del desarrollo de un sistema o aplicación web en la capa de Front End, se debe testear o probar dicho sistema, y verificar que los requerimientos y funcionalidades estén en perfecto funcionamiento, si esto no ocurre hay que proceder a modificar los bugs o errores que genere el sistema, para esto contamos con herramientas para realizar este tipo de pruebas que nos indica el estado del sistema, algunas de las herramientas que se pueden utilizar para esto son: Jest, Cypress, Mocha, Enzyme, Jasmine, entre otras.

Por otra parte, debe ser capaz de conocer los tipos de pruebas que existen, algunas de ellas son: pruebas funcionales, de integración y aceptación.

Qué hace un desarrollador Front End

Ahora que ya sabe lo qué es un desarrollador Front End vamos a conocer lo que hace un desarrollador Front End:

• Una de las labores es la de transformar un diseño que probablemente le fue entregado por el diseñador web en elementos que se puedan utilizar y también que se puedan reutilizar, es decir que funcionen, debe tener en cuenta y convertir en realidad la creación de una interfaz amigable, en otras palabras, que sea fácil de utilizar. Que pueda crear un entorno con una experiencia de usuario que tenga una percepción y funcionamiento positivo.

• Escriben código que da vida al diseño y habilita la funcionalidad creada por los desarrolladores de backend.

• Los desarrolladores Front End también trabajan para que su experiencia sea excelente en teléfonos móviles, tabletas, computadoras de escritorio.

• Lograr un equilibrio entre diseño funcional y estético.

Qué debe saber un desarrollador Front End

¿Sabes qué es lo primordial que debe saber un desarrollador Front End y que siempre debe tener en cuenta?

• Primeramente es que las herramientas y las tecnologías siempre están cambiando, por lo que los desarrolladores de aplicaciones siempre deben permanecer actualizándose con lo más nuevo.

• Crear un sistema flexible y escalable, esto quiere decir que puedes seguir agregando y modificando funcionalidades sin afectar el sistema, es una de las características más relevantes ya que los sistemas web están en constante cambio.

• Saber depurar código en el navegador web y así poder resolver los errores, ya que el proceso de desarrollo implica tener errores y usted, como desarrollador, debería poder hacer frente a esto.

• Como desarrollador Front End debe ser experto en el manejo de herramientas DEV del navegador, GIT y sentirse cómodo en la terminal.

• De nada sirve tener un sitio web y no ser encontrado es por eso que se necesitan conocimientos básicos de SEO, por otra parte hacer que tu sitio web sea seguro es necesario, así que tener conocimientos de seguridad web es de utilidad, puede investigar sobre HTTPS para comenzar. En cualquier caso, conocer los conceptos básicos es una ventaja.

• Por cierto, no se puede ser desarrollador sin conocer ni utilizar el sitio web Stack Overflow, acá puede encontrar soluciones y hacer preguntas sobre programación.

Otros consejos Front End

Luego de obtener habilidades o skills Front End developer, probablemente quieras empezar a buscar trabajo, entonces es recomendable y conveniente que comiences por crear una buena hoja de vida o currículum vitae con tus habilidades, que tengas un portafolio con los trabajos realizados, si aún no has tenido empleos puedes crear un portafolio de tus proyectos de prácticas individuales o puedes hacer colaboraciones a otros proyectos y agregarlos a tu portafolio.

También puedes construir un sitio web personal y agregarle la trayectoria que tienes o darte a conocer, pudieras agregar allí tu hoja de vida y tus trabajos o aportes.

Lo más idóneo actualmente es tener un perfil en GitHub que lo puedes mostrar y utilizar como un portafolio, allí puedes alojar tu código, tus proyectos personales y tus colaboraciones en los proyectos que selecciones, así que cuando llegue el momento de participar en una entrevista laboral puedas mostrar tu trabajo desde esa cuenta, actualmente muchas empresas solicitan que les compartas tu link de GitHub.

Es bueno que establezcas contactos con otros desarrolladores y poder hacer retroalimentación de diferentes temas relacionados con el área del desarrollo, de esta forma puedes crecer como profesional ya que puedes obtener nuevos conocimientos y también aportar los tuyos. Unirse a alguna comunidad Front End nunca está de más y de esta forma podrás estar enterado de las últimas novedades y participar en eventos.

Y por supuesto no solo debes tener skills técnicos sino también que debes poseer lo que se conoce como soft skills, estas habilidades son muy valoradas por las empresas incluso más que las habilidades técnicas debido a que forman parte de tu personalidad y actitudes, una habilidad técnica la puedes aprender de forma rápida y sencilla pero un soft skill no.

Algunos de los soft skills más valorados en el área del Front End suelen ser:

• Tener un skill de comunicación o ser buen comunicador: te preguntarás ¿por qué es necesario si solo debo codificar? pues esto tiene un impacto elevado ya que tendrás que darte a entender con todas las personas que conforman tu equipo, y posiblemente tendrás que reunirte con clientes. Para ahorrar y evitar malentendidos con tu grupo de trabajo es esencial la buena comunicación, el saber expresarte con claridad es imprescindible. La definición de comunicación puede parecer simple, pero es una de las habilidades más difíciles de dominar.

• Trabajo en equipo: esta habilidad o skill es esencial, incluso si trabajas en modo freelance de forma independiente ya que en algún momento requerirás pedir un consejo o ayuda a algún desarrollador en algo que te hayas estancado, y claramente también debes sentarte hasta cierto punto con tu cliente y trabajar en equipo para que el proyecto sea todo un éxito.

• Debes saber colaborar a otros apoyándolos en algún tema del que tengas conocimiento y ellos necesiten de tu ayuda.

• Resolutivo: debes tener la capacidad de resolver problemas, en este trabajo siempre se nos presentan inconvenientes, depende de nosotros poder resolverlos y con la mejor actitud posible, en realidad suele ser nuestro día a día, hacer que todo funcione. Las empresas evaluarán esto, y qué actitud tienes frente a un problema, el cómo reaccionas y tu capacidad para solventarlo.

Conclusiones

Si eres principiante puede que te resulte abrumador al comienzo, pero acá puedes conseguir cursos de Frontend en OpenWebinars que te pueden explicar todos estos conceptos desde cero y contar con la tutorización que te ofrecen los profesores.

Antes de incursionar en el desarrollo Front End debes conocer las bases de la programación y luego aprender los tres lenguajes principales en los que se basa la web HTML, CSS y JavaScript, conocer la teoría es importante pero la práctica te convertirá en un mejor desarrollador.