Ya que tenemos las bases del desarrollo frontend, el camino que viene es facil verdad?… verdad?

Bueno… como en todo, hay especializaciones que hacen de esto un nicho interesante

🔍 Exploremos que hay en el desarrollo Frontend a profundidad!

Desarrollo de sitios web

Se refiere a la creacion y mantenimiento de sitios web, ya sean sitios estáticos simples o complejos, asegurando que sean visualmente atractivas, funcionales y fáciles de usar

Responsabilidades

• Te aseguras que sea responsivo

• Programación para crear una interfaz dinámica

• Optimización SEO

• Compatibilidad entre navegadores web

• Estándares de accesibilidad

Herramientas

• HTML, CSS y JavaScript

• Herramientas de diseño gráfico

Usualmente está en contacto con diseñadores y otros programadores.

Desarrollo de aplicaciones Web / Ingeniería de Software

Se enfoca en crear aplicaciones web dinámicas y complejas. Esto engloba la parte visual, interactiva, arquitectural, performante e integracional relacionado con servicios Backend

Responsabilidades

• Construir aplicaciones web robustas y escalables a través de tecnologías front-end y frameworks (y librerías para los que quieren pelear que React es una libreria 😆)

• Diseñar la estructura de una aplicación web para: modularidad, escalabilidad y mantenibilidad

• Integración con Backend services y APIs

• Optimizar la aplicación Web

Herramientas

• Experiencia en tecnologías front-end como HTML, CSS, JavaScript, React, Angular, Vue.js, etc

• Git

• Familiaridad con Frameworks de testeo

Usualmente está en contacto con diseñadores UX/UI, desarrolladores back-end y product managers

Ingeniería Web UX / UI

Es un área multifacética dentro del desarrollo frontend, diseña e implementa “user-friendly” interfaces visualmente atractivas. Usa principios de diseño UX (experiencia de usuario), desarollo UI, diseño de sistemas, todo esto para construir experiencias Web efectivas

Responsabilidades

• [Diseño] Experiencia de Usuario (UX): Estudiar y entender las necesidades del usuario (user research) para crear una Web intuitiva

• [Coding] Interfaz de Usuario (UI): Construir la interfaz a través de HTML, CSS y JavaScript asegurando responsividad y accesibilidad

• Diseño de sistemas: Asegura la consistencia a través de toda la aplicación

• Diseño de interacciones: Crear interfaces que puedan conectar con el usuario y obtener un feedback dinámico

• Colaboración con diseñadores: Esto para trasladar un concepto visual a una interfaz funcional

• Prototipado y creación de esquemas

• Pruebas de usabilidad y accesibilidad

Herramientas

• Diseño: Adobe XD, Sketch o Figma para diseño y prototipado UI/UX

• Lenguages Front-end y frameworks

Usualmente está en contacto con desarrolladores, product managers y el cliente

Ingeniería en Web testing

En el contexto del desarrollo front-end, involucra un rigoroso testeo para sitios/aplicaciones web asegurando funcionalidad, performance, y estándares de usabilidad

Responsabilidades

• Desarrollo e implementacion de un/os “Test Plan”

• Testing automatizado a través de diferentes frameworks

• Testing manual

• Tracking (seguimiento) y reportes de bugs

• Testing multi navegador

• Testeo de performance

• Testeo de seguridad

Herramientas

• Selenium, Jest, Playwright & Cypress

• Para el tracking de bugs: JIRA, Bugzilla o Trello

Usualmente se comunica con desarrolladores, diseñadores y project managers

Ingeniería de performance Web

Está enfocado en optimizar el “performance” (o rendimiento según velocidad) de sitios/aplicaciones web. Esto impacta también en la experiencia del usuario. El objetivo principal es garantizar que la página web cargue rápido y corra de manera fluida

Responsabilidades

• Análisis de performance y “benchmarking’

• Optimizar tiempos de carga

• Diseño responsivo y eficiente

• Optimización de la transferencia de datos

• Optimizacion de performance del código JavaScript

• Testing y monitoreo

Herramientas

• Para testeo del performance: Google Lighthouse & WebPageTest

• Uso de aplicaciones de monitoreo de terceros

Usualmente se comunica con web developers, diseñadores y equipos de back-end para consideraciones de performance integrales

Ingeniería de Accesibilidad Web

Se encarga de que un producto Web sea universalmente accesible, especialmente para usuarios con alguna discapacidad. Se encarga de la implementación de estándares Web de accesibilidad, diseño de interfaces accesibles y un testeo riguroso para identificar problemas de accesibilidad

Responsabilidades

• Dominio del “Web Content Accesibility Guidelines (WCAG)“ es esencial

• Adaptar sitios/aplicaciones web para que sea usable para personas con diferentes capacidades

• Dirigir diferentes pruebas a los productos web para enfrentar obstáculos de accesibilidad

Herramientas

• Lectores de pantalla

• Herramientas de accesibilidad de terceros

• Aplicación de HTML, CSS, ARIA tags y JavaScript

Consideraciones legales

• Entendimiento de frameworks legales como “Americans with Disabilities Act (ADA)”

• Mantener un compromiso a la igualdad e inclusión digital

Usualmente se comunica con desarrolladores, diseñadores y clientes

Desarrollo de juegos Web

Se refiere a la creación de juegos interactivos y atractivos que pueden correr directamente en la Web. Se enfrenta al uso de tecnologías Web para lograr un resultado

Herramientas

• HTML, CSS y JavaScript

• WebGL para el renderizado de texturas 2D y 3D

Frameworks

• Como Phaser para propósitos generales, Three.js para juegos 3D y Pixi.js para juegos 2D

Game design

• Creación de stoyline

• Diseño de personajes

• Diseño de niveles

• Mecánicas de gameplay

Consideraciones de performance

• Considerar la carga rápida

• Operaciones fluidas

• Responsividad

Multi plataforma y diseño responsivo

• Debe trabajar bien entre diferentes navegadores y dispositivos

Monetización y distribución

Esto se puede alcanzar a través de compras en el juego, anuncios o ventas directas

Es una excelente área para combinar la creatividad en diseño de juegos con habilidades técnicas.

📖 Versículo de despedida

Gracias por leer!

🔗 Puedes seguirme en mis redes sociales!

LinkedIn | Facebook | X | Instagram | kievandres.dev