La Web y el Desarrollo Web

La Web es uno de los conjuntos de protocolos más exitosos de Internet, y su creación marcó un antes y un después en la forma en que accedemos y compartimos información. Fue inventada por Tim Berners-Lee en el CERN (Organización Europea para la Investigación Nuclear) y ha evolucionado hasta convertirse en una herramienta fundamental en la vida cotidiana y profesional de millones de personas.

La Web se basa en el concepto de hipertexto, una tecnología que permite enlazar diferentes documentos y recursos a través de enlaces o hipervínculos. Esta capacidad de enlazado es lo que permite la navegación entre diferentes páginas y sitios web.

El World Wide Web Consortium (W3C) es la organización que se encarga de desarrollar estándares para la Web. Su objetivo es garantizar que la Web continúe siendo abierta, accesible y funcional para todos. Estos estándares incluyen tecnologías fundamentales como HTML, CSS y JavaScript.

Componentes de la Web

La Web se compone de varios elementos clave:

• Hipertexto: Permite la creación de enlaces entre documentos.

• Protocolo HTTP: Es el protocolo de comunicación que permite la transferencia de datos en la Web.

• Servidores y Clientes: Los servidores alojan los sitios web y los clientes (navegadores web) los solicitan y muestran.

• DNS (Sistema de Nombres de Dominio): Traduce los nombres de dominio legibles por humanos (como www.ejemplo.com) en direcciones IP que las computadoras pueden entender.

El Desarrollo Web

El desarrollo web es un campo multidisciplinario que abarca varias áreas y tecnologías. A continuación, se describen las principales áreas profesionales del desarrollo web:

Contenido

El contenido se refiere a la organización, semántica, presentación y estructura de la información en la web. El lenguaje fundamental para el contenido web es HTML (HyperText Markup Language), que define la estructura y el contenido de una página web.

Diseño

El diseño se centra en el aspecto visual y los elementos gráficos de una página web. Utiliza tecnologías como CSS (Cascading Style Sheets) para definir estilos y plantillas que controlan la apariencia de las páginas.

Tecnología Frontend

Las tecnologías frontend son las que se ejecutan en el navegador del usuario y son responsables de los elementos interactivos de una página web. El principal lenguaje de programación frontend es JavaScript, que permite la creación de interfaces dinámicas y reactivas.

Tecnología Backend

El backend se encarga de la lógica del servidor, el acceso a bases de datos y el procesamiento de las solicitudes de los usuarios. Los lenguajes comunes de backend incluyen PHP, Python y Node.js, entre otros.

Distribución

La distribución se refiere a cómo se despliegan y gestionan los sitios web. Esto incluye tanto el hardware (servidores, máquinas virtuales, contenedores) como el software (servidores web como Apache, IIS y NGINX).

Propósito

Las webs se hacen para algo. Definir el propósito puede que no sea la tarea más técnica, pero son necesarios perfiles intermedios que sepan trasladar las necesidades de los clientes a los desarrolladores. O incluso inventar nuevos modelos de negocio basados en tecnologías web.

Arquitectura Cliente - Servidor

La arquitectura cliente-servidor es el modelo fundamental en el que se basa la Web. Se divide en dos partes principales:

• Server-side (Lado del servidor)

  • Hardware: Incluye servidores y elementos de red, máquinas virtuales y contenedores.

  • Software: Involucra servidores web (como Apache, IIS, NGINX) y lenguajes CGI (como Perl, PHP, C). También incluye lenguajes y frameworks con servidores web integrados, como Python, Java, Node.js y C++.

• Client-side (Lado del cliente)

  • Clientes web: Los navegadores web como Firefox, Chrome, Vivaldi, Opera, Edge e Internet Explorer.

  • Lenguajes de marcas: HTML, XHTML, HTML5 y CSS.

  • Lenguajes de programación del entorno Cliente: Principalmente JavaScript.

El Camino del Frontend

Para más detalles, se puede consultar The Frontend Developer Roadmap.

Este término, extraido de la web anterior, refleja el itinerario formativo recomendado para ser un profesional del desarrollo web en la parte del Frontend. Este módulo no es suficiente para dominarlo todo y es importante ser consciente de que estamos viendo una pequeña parte de las múltiples posibilidades que tenemos a nuestro alcance.

Server-side vs Client-side

En el desarrollo web, tanto el lado del servidor (server-side) como el lado del cliente (client-side) juegan sus propios roles. Sin embargo, muchas tareas pueden llevarse a cabo en cualquiera de los dos lados, y la elección de dónde implementar una funcionalidad específica depende de varios factores, como la tecnología adecuada para el caso o la comodidad del desarrollador con una tecnología particular.

Tareas comunes en Server-side y Client-side

• Validar formularios: La validación puede hacerse en el cliente para mejorar la experiencia del usuario, pero debe verificarse nuevamente en el servidor por razones de seguridad.

• Guardar datos permanentes: Generalmente se hace en el servidor utilizando bases de datos.

• Presentación de diapositivas: Es más común en el lado del cliente, utilizando JavaScript o frameworks de frontend.

• Eliminar un párrafo: Esta tarea se realiza típicamente en el cliente, utilizando JavaScript para modificar el DOM (Document Object Model).

• Calcular datos: Los cálculos pueden hacerse en ambos lados, dependiendo de la naturaleza del cálculo y los requisitos de seguridad.

• Acceder a bases de datos: Esta tarea se realiza en el servidor para mantener la seguridad y la integridad de los datos.

JavaScript en el lado del cliente

JavaScript es el lenguaje de programación más utilizado en el lado del cliente. Sin embargo, tiene sus limitaciones y particularidades:

• Limitaciones de JavaScript:

  • No puede escribir directamente en el servidor.

  • No todos los navegadores soportan JavaScript y se puede desactivar, por lo que una página web bien diseñada debería funcionar sin él.

  • No puede modificar preferencias del navegador, lanzar aplicaciones, leer o escribir archivos en el cliente, retransmitir streaming, enviar emails, interactuar con lenguajes de servidor, acceder a una web de un dominio diferente, proteger el origen de las imágenes, ni implementar multiprocesos.

• Tecnología asíncrona:

  • JavaScript puede solicitar datos al servidor de forma asíncrona utilizando tecnologías como AJAX (Asynchronous JavaScript and XML).

• Usos de JavaScript:

  • Hacer que la web reaccione a la interacción del usuario.

  • Proporcionar una interfaz agradable para los datos.

  • Controlar ventanas, marcos y applets en el documento HTML.

  • Preprocesar datos antes de enviarlos al servidor.

  • Modificar el estilo y contenido de manera dinámica en función de la interacción del usuario.

  • Solicitar o enviar archivos al servidor.

JavaScript se ejecuta en un entorno seguro sin contacto directo con el sistema operativo del cliente. Implementa una “política del mismo origen”, lo que significa que solo tiene acceso a datos recibidos del mismo servidor desde el que fue cargado.

Para evitar problemas de compatibilidad, el código HTML ha de ser válido. Se puede utilizar el validador de HTML del W3C (https://validator.w3.org/) para asegurarse de que el código cumpla con los estándares.

Entornos de Programación Web para el Cliente

La elección del software para el desarrollo web depende de las necesidades y la complejidad del proyecto:

• Software para modificaciones casuales:

  • Editores de texto ligeros y rápidos como Gedit, Nano, Notepad.

• Editores de texto avanzados:

  • Herramientas más potentes como Sublime Text, Brackets, Jedit, Visual Studio Code, Vim.

• Entornos de Desarrollo Integrados (IDEs):

  • Soluciones completas como NetBeans, Eclipse, WebStorm.

Preparar el Entorno de Desarrollo

En un entorno de desarrollo típico, como una clase de programación web, se puede utilizar Visual Studio Code con las siguientes extensiones:

• Prettier: Para formatear archivos de manera automática, ya sea manualmente o al guardar.

• EsLint: Ayuda a detectar errores de estilo o programación que JavaScript no puede detectar por sí mismo (requiere instalar eslint en el proyecto).

• Live Server: Para probar la web en un servidor local de manera rápida y sencilla.

• html-in-template-string Para editar los template literals.

Más adelante iremos instalando alguna extensiones más.

Otras Herramientas

• Tecla F12 en los navegadores: Accede a las herramientas de desarrollo del navegador.

• Firefox Developer Edition: Una versión del navegador Firefox con herramientas avanzadas para desarrolladores web.

Tipos de Aplicaciones Web según el Frontend

El desarrollo de aplicaciones web ha evolucionado significativamente con el tiempo, y hoy en día existen diversas maneras de abordar el frontend. A continuación, exploraremos los diferentes tipos de aplicaciones web según las tecnologías de frontend que se utilicen, así como la evolución de las mismas.

1. Con JavaScript ‘Vanilla’: Se refiere a la utilización de JavaScript puro sin ninguna biblioteca o framework adicional. Es una manera directa de programar sobretodo cuando se trata de aplicaciones pequeñas.

2. Con Bibliotecas:

   Puede que no cambien la manera de programar y facilitan muchas tareas tediosas. Pero nos pueden mal acostumbrar. Hay muchas bibliotecas para cosas específicas que se convierten casi en imprescindibles en tareas complejas. Con ES6 algunas como JQuery o Lodash perdieron su importancia.

   Algunos ejemplos:

   • JQuery: Facilita la manipulación del DOM, eventos y AJAX.

   • Prototype: Simplifica las tareas de programación orientada a objetos en JavaScript.

   • D3.js: Se utiliza para crear visualizaciones de datos.

   • Bootstrap: Biblioteca de CSS y JavaScript para diseño responsivo.

   • Vue.js: Ofrece una manera progresiva de construir interfaces de usuario.

   • React: Biblioteca para construir interfaces de usuario, principalmente en aplicaciones de una sola página.

3. Con Frameworks:

   Facilitan mucho la programación rápida de páginas web. Cambian totalmente el paradigma de programación. Provocan una gran inercia al cambio y hacen las aplicaciones web dependientes del framework. Son muy utilizados hoy en dia por su eficiencia en temas como los componentes, rutas, comunicación con el servidor, motores de plantillas y, sobretodo, la reactividad:

   • Angular: Framework de JavaScript de Google para construir aplicaciones dinámicas de una sola página.

   • React: Aunque es una biblioteca, también se utiliza como framework cuando se combina con otras herramientas.

   • Vue.js: Al igual que React, puede considerarse un framework cuando se utiliza en proyectos más grandes.

   • Phaser: Framework para el desarrollo de juegos en HTML5.

4. Con Frameworks Full Stack:

   Se encargan tanto del backend como del frontend. Algunos implementan un backend que proporciona una API con un frontend tipo SPA y otras generan el HTML en el servidor y luego lo hidratan con javascript en el cliente. Este proceso de hidratación permite que las aplicaciones sean interactivas y respondan a la entrada del usuario sin necesidad de recargar la página completa.

   • Odoo: Plataforma de código abierto que proporciona un conjunto completo de aplicaciones empresariales.

   • Blitz: Framework de React basado en Next.js para aplicaciones de pila completa.

   • Next.js: Framework de React para aplicaciones de servidor y cliente.

   • SvelteKit: Framework para construir aplicaciones rápidas y modernas.

   Además de los frameworks full stack, cabe mencionar los MetaFrameworks como SSG (Static Site Generation), SSR (Server Site Rendering). Astro, Remix, Eleventy…

Tanto las bibliotecas como los frameworks se pueden obtener de varias maneras, algunas las veremos como ejemplos durante el libro:

• Descarga directa: Descargar un archivo .js o un directorio comprimido de la web oficial y copiarlo al proyecto.

• CDN: Utilizar un CDN directamente desde la web oficial.

• Gestores de paquetes: Utilizar NPM o Yarn para gestionar dependencias.

Evolución de las Aplicaciones Web

Fig. 1 Evolución de las aplicaciones web.

1. Páginas Web Estáticas: Las primeras aplicaciones web eran simples páginas estáticas con hipervínculos.

2. Páginas Web Generadas por el Servidor: Con el tiempo, se introdujo un poco de JavaScript para mejorar la interacción.

3. Introducción de AJAX: Permite cargar o subir datos al servidor de manera asíncrona, mejorando la interactividad sin recargar la página.

4. Single Page Application (SPA): Las aplicaciones de una sola página se comunican con el servidor usando JSON o XML, proporcionando una experiencia más fluida.

• SPA como sobreingeniería: En muchos casos, utilizar SPA puede complicar innecesariamente el desarrollo web. A continuación veremos la justificación para hacer web de esta manera.

• Frecuencia de uso: Es importante considerar si la aplicación será utilizada constantemente o esporádicamente. Una aplicación web utilizada esporádicamente no debe ser muy pesada y es mejor que sea generada por el servidor o estática para mejorar el SEO. Si embargo, una aplicación web que el cliente mantiene siempre abierta, puede ser más agradable de usar si es una SPA.

• Servidor vs Cliente: Crear el HTML y el estilo en el servidor puede ser menos complicado, pero en aplicaciones grandes, puede sobrecargar el servidor y dificultar la separación de la vista del modelo y controlador.

• SPA en nuestro módulo: Optaremos por una SPA debido a que es más adecuado para el módulo que estamos desarrollando. Una SPA requiere saber construir elementos del DOM, comunicarse con el servidor mediante peticiones asíncronas con Javascript y manejar los eventos y la reactividad. Por tanto es la escusa perfecta para impartir nuestros contenidos.

En la actualidad se pueden hacer páginas web de muchas maneras. En este libro, hacia el final, nos enfocamos más en imitar a los frameworks actuales, que suelen estar pensados para SPA con una API. No obstante, se pueden hacer páginas sólo con HTML estático, o generado una vez a partir de Markdown, como este mismo libro (Jekyll, Jupyter Books…), también se puede generar el HTML con PHP, Node, Java… O se puede tener un CMS como Wordpress y programar plugins. Se puede tener un CMS Headless o generada mediante Micro-Frontends. O aplicaciones progresivas PWA o Híbridas con Ionic y Cordova. Respecto a cómo servirlas, tenemos los hostings y servidores tradicionales o “Serverless”, plataformas “Low Code”… La lista no acaba y cada una de estas ideas tiene muchas más opciones.

Entre la Página Web y la APP

1. Páginas Web: Contenido estático y dinámico accesible a través de navegadores.

2. Aplicaciones Web: Pueden ser SPA o no.

3. Aplicaciones Web Responsivas: Diseñadas para adaptarse a diferentes dispositivos.

4. PWA (Progressive Web App): Combinan lo mejor de las páginas web y las aplicaciones móviles.

5. Apps Híbridas: Utilizan frameworks como Ionic para funcionar en múltiples plataformas.

6. Apps Quasi Nativas: Utilizan tecnologías como React Native o Flutter para acercarse al rendimiento de las aplicaciones nativas.

Poner la Web en Producción

Para que una web con HTML, CSS y Javascript funcione tan solo necesitamos un servidor web que sirva estáticamente estos ficheros cuando se le haga una petición HTTP. Este servidor suele estar accesible por Internet mediante SFTP, SSH o cualquier protocolo. Estos HTML, CSS y JS puede ser tratados de dos maneras:

1. Método tradicional: Copiar todo el contenido de las carpetas al servidor alrededor del archivo index.html.

2. JavaScript Build Tool: Utilizar herramientas que compilan el código fuente, lo minifican, unifican, optimizan y comprimen para mejorar la velocidad de carga y evitar incompatibilidades entre navegadores. Nosotros veremos Vite, pero es muy conocido Webpack también.

Más adelante, en el capítulo del CI/CD, hablaremos de una metodología para automatizar todo el proceso. Con esta metodología podremos centrarnos en escribir código cómodamente mientras que nuestras herramientas lo prueban todo y lo ponen en producción.

Las redes sociales están llenas de gente intentando vender su curso. En el mundo profesional hay mucha más gente trabajando silenciosa y eficazmente en productos de calidad y duraderos. Aunque los primeros tengan algo de razón en decir que PHP, JQuery o otros están obsoletos, el mundo laboral a veces dice lo contrario. Es necesario tomar cierta distancia para elegir la mejor tecnología para cada ocasión. (https://www.bitecode.dev/p/hype-cycles)