¿Alguna vez has mirado tu sitio web favorito y te has preguntado exactamente qué lo hizo funcionar? ¿Has mirado la forma en que se desplegó, la forma en que actuaron los botones cuando los presionaste, o cualquier otra parte y pensaste: “Me pregunto qué tan complicado es eso” o “Me gustaría poder hacer eso”.
Todas esas cosas son desarrollo front-end. Si bien el diseño web es la apariencia de un sitio web, el desarrollo front-end es cómo ese diseño realmente se implementa en la web.
Los desarrolladores front-end usan HTML, CSS y JavaScript para codificar los diseños de sitios web y aplicaciones web creados por diseñadores web. El código que escriben se ejecuta dentro del navegador del usuario (a diferencia de un desarrollador back-end, cuyo código se ejecuta en el servidor web). Piénselo un poco así: el desarrollador de back-end es como el ingeniero que diseña y crea los sistemas que hacen que una ciudad funcione (electricidad, agua y alcantarillado, zonificación, etc.), mientras que el desarrollador de front-end es quien establece sale de las calles y se asegura de que todo esté conectado correctamente para que las personas puedan vivir sus vidas (una analogía simplificada, pero se entiende la idea aproximada). También están a cargo de asegurarse de que no haya errores o errores en el front-end, así como también de asegurarse de que el diseño aparezca como se supone en varias plataformas y navegadores.
- ¿Cuáles son los aspectos positivos y negativos de trabajar como desarrollador web?
- ¿Los programadores generalmente firmarán convenios para no competir antes de la divulgación de una idea de diseño web?
- ¿Cuál es el sitio web más atractivo en términos de UX / UI en 2016?
- ¿Por qué las páginas web tardan en comenzar a cargarse?
- ¿Cuál es la diferencia entre cite y figcaption en HTML?
He revisado docenas de listados de trabajo de desarrollador front-end para ver qué habilidades son las más demandadas en este momento. Estas son las cosas que los empleadores reales buscan hoy en los solicitantes de empleo (y que seguirán buscando en el futuro cercano). ¡Domina estas cosas y seguro que conseguirás un increíble trabajo de desarrollo front-end!
Psst! ¡Skillcrush lanza un Blueprint Developer Front End! En el curso, obtendrá una base sólida que lo puede poner en el camino para conseguir el trabajo de desarrollador que está buscando, comenzando con habilidades como HTML y CSS y pasando a habilidades más avanzadas, como desarrollo web receptivo, Git, y JavaScript. ¡Inscríbase aquí y sea el primero en saber cuándo el * nuevo * plan está abierto para la inscripción!
HTML y CSS
HTML (Hyper Text Markup Language) y CSS (Cascading Style Sheets) son los componentes básicos más básicos de la codificación web. Sin estas dos cosas, no puede crear un diseño de sitio web, y todo lo que terminará con un texto sin formato en la pantalla. ¡Ni siquiera puedes agregar imágenes a una página sin HTML!
Antes de comenzar cualquier carrera profesional de desarrollo web, deberá dominar la codificación con HTML y CSS. La buena noticia es que puede obtener un sólido conocimiento práctico de cualquiera de estos en solo unas pocas semanas.
La mejor parte: el conocimiento de HTML y CSS solo le permitirá crear sitios web básicos.
JavaScript
JavaScript le permite agregar una tonelada más de funcionalidad a sus sitios web. Incluso puede crear muchas aplicaciones web básicas utilizando nada más que HTML, CSS y JavaScript (JS para abreviar). En el nivel más básico, JS le permite agregar muchos elementos interactivos a sus sitios web. Úselo para crear cosas como mapas que se actualizan en tiempo real, películas interactivas y juegos en línea. Los sitios como Pinterest utilizan JavaScript en gran medida para que su interfaz de usuario sea tan fácil de usar (¡el hecho de que la página no se vuelva a cargar cada vez que se fija algo es gracias a JavaScript!).
También es el lenguaje de programación más popular del mundo, por lo que, independientemente de sus planes de carrera de desarrollo, es algo muy valioso de aprender.
jQuery
jQuery es una biblioteca de JavaScript: una colección de complementos y extensiones que hace que el desarrollo con JavaScript sea más rápido y fácil. En lugar de tener que codificar todo desde cero, jQuery le permite agregar elementos listos para usar a sus proyectos, que luego puede personalizar según sea necesario (una razón por la cual es tan importante conocer JavaScript).
Marcos de JavaScript
Los marcos JS (incluidos AngularJS, Backbone, Ember y ReactJS) le dan una estructura lista para su código JavaScript. Existen diferentes tipos de marcos para diferentes necesidades, aunque los cuatro mencionados son los más populares en las listas de trabajos reales. Estos marcos realmente aceleran el desarrollo al darle un inicio rápido, y se pueden usar con bibliotecas como jQuery para minimizar la cantidad de codificación desde cero que tiene que hacer.
Marcos frontales
Los marcos CSS y front-end (el marco front-end más popular es Bootstrap) hacen por CSS lo que JS Frameworks hace por JavaScript: le brindan un punto de partida para una codificación más rápida. Dado que tanto CSS comienza con exactamente los mismos elementos de proyecto a proyecto, un marco que define todo esto por adelantado es muy valioso. La mayoría de los listados de trabajo de desarrollador front-end esperan que esté familiarizado con cómo funcionan estos marcos y cómo usarlos.
Experiencia con preprocesadores CSS
Los preprocesadores son otro elemento que puede acelerar su codificación CSS. Un preprocesador CSS agrega funcionalidad adicional a CSS para mantener nuestro CSS escalable y más fácil de trabajar. Procesa su código antes de publicarlo en su sitio web y lo convierte en CSS bien formateado y compatible con varios navegadores. SASS y LESS son los dos preprocesadores más demandados, según los listados de trabajos reales.
Experiencia con servicios RESTful y API
Sin ser demasiado técnico en este caso, REST significa Transferencia de estado representativa. En términos básicos, es una arquitectura ligera que simplifica la comunicación de red en la web, y los servicios RESTful y las API son aquellos servicios web que se adhieren a la arquitectura REST. Lea más sobre REST y los servicios RESTful aquí.
Supongamos que desea escribir una aplicación que le muestre a todos sus amigos de las redes sociales en el orden en que se hicieron amigos. Puede hacer llamadas a la API RESTful de Facebook para leer su lista de amigos y devolver esos datos. Lo mismo con Twitter (que también usa API RESTful). El proceso general es el mismo para cualquier servicio que use API RESTful, solo los datos devueltos serán diferentes.
Si bien todo suena realmente complicado y técnico, es un conjunto simple de pautas y prácticas que establecen expectativas para que sepa cómo comunicarse con un servicio web. También hacen que un servicio web funcione mejor, escale mejor, funcione de manera más confiable y sea más fácil de modificar o mover.
Diseño receptivo y móvil
Solo en los EE. UU., Más personas acceden a Internet desde su dispositivo móvil que desde una computadora de escritorio, por lo que no es de extrañar que las habilidades de diseño receptivo y móvil sean súper importantes para los empleadores. El diseño receptivo significa que el diseño del sitio (y, a veces, la funcionalidad y el contenido) cambian según el tamaño de la pantalla y el dispositivo que alguien está usando.
Por ejemplo, cuando se visita un sitio web desde una computadora de escritorio con un monitor grande, un usuario obtendría múltiples columnas, gráficos grandes e interacción creada específicamente para usuarios de mouse y teclado. En un dispositivo móvil, el mismo sitio web aparecería como una sola columna optimizada para la interacción táctil, pero utilizando los mismos archivos base.
El diseño móvil puede incluir un diseño receptivo, pero también incluye la creación de diseños específicos para dispositivos móviles por separado. A veces, la experiencia que desea que tenga un usuario cuando visita su sitio en una computadora de escritorio es completamente diferente de lo que desea que vean cuando visita desde su teléfono inteligente, y en esos casos tiene sentido que el sitio móvil sea completamente diferente. Un sitio web de un banco con banca en línea, por ejemplo, se beneficiaría de un sitio móvil separado que permite a los usuarios ver cosas como la ubicación bancaria más cercana y una vista de cuenta simplificada (ya que las pantallas móviles son más pequeñas).
Desarrollo de navegador cruzado
Los navegadores modernos se están volviendo bastante buenos para mostrar sitios web de manera consistente, pero todavía hay diferencias en la forma en que interpretan el código detrás de escena. Hasta que todos los navegadores modernos funcionen perfectamente con los estándares web, saber cómo hacer que cada uno de ellos funcione de la manera que desea es una habilidad importante. De eso se trata el desarrollo entre navegadores.
Sistemas de gestión de contenidos y plataformas de comercio electrónico
Casi todos los sitios web están basados en un sistema de gestión de contenido (CMS). (Las plataformas de comercio electrónico son un tipo específico de CMS). El CMS más popular en todo el mundo es WordPress, que está detrás de escena de millones de sitios web (¡incluido Skillcrush!), Casi el 60% de los sitios web que usan un CMS usan WordPress.
Los otros CMS más populares incluyen Joomla, Drupal y Magento. Si bien saber esto no lo demandará tanto como ser un experto en WordPress, pueden darle un nicho que será deseable entre las empresas que usan esos sistemas (y hay muchos por ahí).
