Desarrollo web Front-end
El desarrollo web Front-end consiste en la conversión de datos en una interfaz gráfica para que el usuario pueda ver e interactuar con la información de forma digital usando HTML, CSS y JavaScript.
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.[1]
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 los siguientes puntos en mente, utilizando las herramientas y técnicas disponibles para alcanzar dichos objetivos.[1]
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.