Desarrollador de interfaces de la web móvil y de escritorio

El frontend developer se encarga de la estructura semántica del contenido (HTML), codificar el diseño en hojas de estilo (CSS) y agregar la interacción con el usuario (Javascript).

Comprender cuales son las mejores herramientas a utilizar para desarrollar el frontend de un sitio web, es la diferencia entre tener un código difícil de mantener a tener un código organizado para que pueda ser actualizado y escalable continuamente.

Diseño responsivo (responsive)

Con el creciente número de usuarios de internet móvil es importante diseñar y desarrollar los sitios primero para móviles y luego escalar para pantallas grandes. Utilizando los los viewports en HTML y los media queries en CSS creo interfaces que se ven increíbles y que son fáciles de utilizar para los usuarios de ambos mundos.

HTML Semántico

El lenguaje estándar de la web con su nueva versión 5 introduce varias funciones que ayudan a los navegadores a interpretar mejor la información. Las nuevas etiquetas nos ahorran el uso de complementos externos y ayudan a escribir código simple y que tenga más sentido. Los beneficios de esta nueva versión son muchos pero los más fuertes son:

  • Acceso offline a sitios web
  • Drag and drop
  • Geolocalización
  • Manejo de Audio y Video

CSS sostenible

Al igual que HTML5 CSS3 viene cargado con varias funcionalidades pero lo más importante es poder generar estilos sostenibles. ¿Qué significa sostenible? Es estructurar el código para que pueda pasar de desarrollador a desarrollador y que sea fácil de actualizar sin necesidad de sobre escribir las reglas o hacer hacks para romper con reglas anteriores.

¿Cómo se logra? Utilizando guías de estilo y pre-procesadores de CSS podemos crear una arquitectura de CSS estable que pueda ser leída y modificada fácilmente. Las guías de estilo que utilizo son:

  • BEM (Block, Element, Modifier): Es la forma de estructurar el CSS para estilizar aspectos basados en patrones desde los más grandes hasta los más pequeños y se definen por si solos para no afectar a los demás.
  • SMACSS: igual que BEM esta guía utiliza categorías para organizar la información y también tiene varias guías para nombrar clases padres y clase hijos.

SASS

Con el pre-processor SASS organizo los estilos CSS en archivos pequeños lo que permite organizar el código lógicamente y exportarlos en un CSS minificado automáticamente para subirlo a produccion y tener un mejor rendimiento.

Javascript

Javascript se utiliza para diseñar las interacciones del usuario con la interface. Es un lenguaje que al igual que HTML y CSS entienden los navegadores nativamente.

Este lenguaje esta creciendo y se ha convertido en el standard para desarrollar sitios web y aplicaciones móviles. Tiene una extensa librería de plugins lo cual facilita la creación de módulos y efectos especiales con unas pocas líneas de código.

Jquery

Manipulando el HTML y CSS en tiempo real, Jquery, la librería más utilizada de JS en la web, soluciona varios puntos difíciles al momento de desarrollar aplicaciones web. Es fácil de utilizar, aprender, mantener, acorta los tiempos para lanzar la aplicación y es excelente para economizar tiempo de desarrollo.