Desarrollo web Front-end

El desarrollo web front-end se refiere a la práctica de construir y diseñar la interfaz de usuario de un sitio web o aplicación. Esto implica trabajar con tecnologías del lado del cliente, como HTML, CSS y JavaScript, para crear páginas web interactivas y visualmente atractivas.

La expresión "front-end" tiene su origen en el principio de separación de preocupaciones, el cual aboga por establecer una clara distinción entre la interfaz de usuario (front-end) y la lógica del servidor (back-end) en una aplicación. Esta separación facilita la creación de un código más modular y fácil de mantener. De esta manera, el desarrollo front-end se centra en la parte del software con la que los usuarios interactúan directamente. Los desarrolladores de este ámbito son responsables de crear experiencias de usuario atractivas y funcionales, asegurándose de que los usuarios puedan navegar y utilizar una aplicación de manera efectiva. Esto implica trabajar en el diseño, la presentación y la interactividad de las páginas web y aplicaciones.

Características

Para brindar una buena experiencia de usuario, el desarrollo front-end se centra en distintos rubros, tales como:

1. Interactividad del Usuario: Desarrollar interfaces de usuario interactivas y atractivas que mejoren la experiencia del usuario en el navegador.
2. Compatibilidad con Navegadores: Asegurar que la aplicación sea compatible con diversos navegadores para garantizar una experiencia consistente para todos los usuarios.
3. Diseño Responsivo: Implementar diseños que se adapten y funcionen de manera óptima en diferentes dispositivos y tamaños de pantalla.
4. Optimización de Rendimiento: Optimizar el rendimiento de la interfaz para cargar rápidamente y proporcionar una experiencia fluida.
5. Desarrollo Basado en Componentes: Adoptar enfoques basados en componentes para facilitar la reutilización de código y mejorar la mantenibilidad.
6. Accesibilidad: Garantizar que la aplicación sea accesible para personas con discapacidades mediante el cumplimiento de estándares de accesibilidad.
7. Integración de Diseño y Desarrollo: Colaborar estrechamente con diseñadores para implementar interfaces que reflejen la visión y la identidad visual del producto.
8. Frameworks y Bibliotecas: Utilizar frameworks y bibliotecas como React, Angular o Vue.js para agilizar el desarrollo y facilitar la gestión del estado de la aplicación.

Herramientas usadas en el desarrollo front-end

Hay varias herramientas y plataformas (wordpress, magento, etc.) disponibles que pueden usarse para desarrollar el front-end de un sitio web, y saber qué herramientas son las que mejor se ajustan a tareas específicas marca la diferencia entre desarrollar un sitio comprometido de otro bien diseñado y escalable.​

Hyper Text Markup Language (HTML)

HTML, siglas en inglés de Hyper Text Markup Language (lenguaje de marcas de hipertexto), es la columna vertebral de cualquier proceso de desarrollo web, sin el cual las páginas web no existirían. Hipertexto significa que el texto tiene enlaces, denominados hipervínculos, incrustados en el mismo. Cuando el usuario hace clic en una palabra o una frase que tiene un hipervínculo, se realiza una llamada a otra página web. El lenguaje de marcas indica que el texto puede convertirse en imágenes, tablas, enlaces, y otras representaciones. El código HTML es el que provee un marco general de cuál será el aspecto del sitio. HTML fue desarrollado por Tim Berners-Lee. La última versión de HTML se llama HTML5 y se publicó en 28 de octubre de 2014, por recomendación de W3C. Esta versión contiene nuevas y eficientes maneras de manejar elementos como archivos de vídeo y audio.

Cascading Style Sheets (CSS)

Las hojas de estilo en cascada, en inglés Cascading Style Sheets, controlan la apariencia visual del sitio web y permiten darle un aspecto único. Esto se consigue con hojas de estilo que se sobreponen sobre otras reglas de estilo y se lanzan basándose en el tipo de entrada, como el tamaño y la resolución de la pantalla del dispositivo.

JavaScript

JavaScript es un lenguaje de programación imperativa basado en eventos (a diferencia del modelo de programación declarativa de HTML) que se utiliza para transformar una página HTML estática en una interfaz dinámica. El código JavaScript puede utilizar Document Object Model (DOM), proporcionado por el estándar HTML, para manipular una página web en la respuesta a eventos, como las entradas de usuario.

Utilizando una técnica llamada AJAX, el código JavaScript también puede recoger contenido activamente de la web (independientemente de la página HTML original recibida), y además reacciona ante eventos del lado del servidor, dotando de una naturaleza realmente dinámica a la experiencia de la página web.

WebAssembly

WebAssembly, soportado por todos los navegadores más conocidos (p. ej. aquellos desarrollados por Google, Apple, Mozilla y Microsoft), es la única alternativa a JavaScript para poder ejecutar código en navegadores web (sin la ayuda de complementos, como Flash, Java o Silverlight; todos ellos depreciados, ya que los navegadores están dejando de dar soporte a los complementos). Con anterioridad a esta medida, existía asm.js (un módulo de JavaScript; permitiendo así que funcione en todos los navegadores), que se usaba como compilador para navegadores como Internet Explorer 11; y para aquellos navegadores que no soportaban WebAssembly directamente, se podía compilar en asm.js y darle soporte de esa manera. En general, los programadores no codifican en WebAssembly (o en asm.js) directamente, sino que utilizan lenguajes como Rust, C, C++, o en teoría cualquier lenguaje que pueda compilarlo.

Objetivos del desarrollo

El desarrollador front-end tiene en mente los siguientes puntos, utilizando las herramientas y técnicas disponibles para alcanzar tales objetivos.​

Accesibilidad

Para el continuo desarrollo para dispositivos móviles, como los teléfonos inteligentes y tabletas, los diseñadores necesitan asegurar que sus sitios web se muestran correctamente en los navegadores de todos los dispositivos. Esto puede conseguirse creando un diseño web adaptable en las hojas de estilo CSS.

Rendimiento

La mayor preocupación en cuanto a rendimiento es el tiempo de espera, manipulando HTML, CSS y JavaScript para asegurar que el sitio web se cargue rápidamente.

Referencias

• Datos: Q4130556