Tecnologías del desarrollo web cliente

El desarrollo de aplicaciones web en entorno cliente utiliza diferentes lenguajes, estándares y tecnologías que trabajan conjuntamente en el navegador.

Las tres tecnologías fundamentales de la Web son HTML, CSS y JavaScript.

             Aplicación web
                   │
       ┌───────────┼───────────┐
       │           │           │
      HTML        CSS      JavaScript
       │           │           │
   Contenido   Apariencia  Comportamiento

Cada una tiene una responsabilidad diferente dentro de la aplicación.

HTML

HTML (HyperText Markup Language) es el lenguaje de marcado utilizado para definir la estructura y el contenido de una página web.

Permite representar elementos como:

• Encabezados.
• Párrafos.
• Enlaces.
• Imágenes.
• Formularios.
• Tablas.
• Elementos multimedia.

Por ejemplo:

<h1>Clients</h1>

<button>New client</button>

HTML describe qué elementos forman parte del documento, pero no es un lenguaje de programación.

CSS

CSS (Cascading Style Sheets) es el lenguaje utilizado para definir la presentación de los documentos HTML.

Permite controlar aspectos como:

• Colores.
• Tipografías.
• Tamaños.
• Espaciados.
• Posicionamiento.
• Distribución de los elementos.
• Adaptación de la interfaz a diferentes tamaños de pantalla.

Por ejemplo:

button {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

CSS permite separar la estructura y contenido definidos mediante HTML de su presentación visual.

JavaScript

JavaScript es el lenguaje de programación estándar de la Web.

Permite incorporar comportamiento e interactividad a las aplicaciones que se ejecutan en el navegador.

Por ejemplo:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Button clicked");
});

JavaScript permite, entre otras posibilidades:

• Responder a las acciones del usuario.
• Modificar dinámicamente una página.
• Validar datos.
• Comunicarse con servidores.
• Procesar información en el cliente.
• Crear interfaces interactivas.

Durante este módulo, JavaScript será nuestro principal lenguaje de programación.

Separación de responsabilidades

HTML, CSS y JavaScript tienen responsabilidades diferentes.

Tecnología	Tipo	Responsabilidad
HTML	Lenguaje de marcado.	Estructura y contenido.
CSS	Lenguaje de estilos.	Presentación.
JavaScript	Lenguaje de programación.	Comportamiento.

Esta separación facilita la organización y el mantenimiento de las aplicaciones.

HTML          → ¿Qué contiene la página?
CSS           → ¿Cómo se presenta?
JavaScript    → ¿Cómo se comporta?

TIP

Aunque las tres tecnologías trabajan conjuntamente, es conveniente mantener separadas, siempre que sea posible, las responsabilidades de contenido, presentación y comportamiento.

ECMAScript y JavaScript

JavaScript se encuentra estandarizado mediante la especificación ECMAScript.

ECMAScript define aspectos del lenguaje como:

• Sintaxis.
• Tipos de datos.
• Operadores.
• Estructuras de control.
• Funciones.
• Objetos.
• Módulos.

Los motores JavaScript de los diferentes navegadores implementan esta especificación.

             ECMAScript
            Especificación
                 │
        ┌────────┼────────┐
        │        │        │
       V8   SpiderMonkey  JavaScriptCore
        │        │        │
        └────────┼────────┘
                 │
              JavaScript

ECMAScript y JavaScript

ECMAScript es la especificación que define el lenguaje.

JavaScript es el lenguaje que utilizamos y cuya implementación sigue dicha especificación.

En la práctica, encontraremos habitualmente el término JavaScript para referirse al lenguaje.

Estándares web

Las tecnologías fundamentales de la Web se desarrollan a partir de especificaciones y estándares.

Estos estándares permiten que una aplicación pueda ejecutarse en navegadores desarrollados por diferentes fabricantes.

Entre las tecnologías y especificaciones que encontraremos durante el módulo están:

• HTML.
• CSS.
• ECMAScript.
• DOM.
• Diferentes APIs de la Web.

El DOM (Document Object Model) proporciona una representación del documento que puede utilizarse desde JavaScript para acceder y modificar sus elementos.

HTML
 │
 ↓
DOM
 │
 ↓
JavaScript

El DOM se estudiará con mayor profundidad en una unidad posterior.

XHTML

XHTML aparece en el currículo del módulo entre las especificaciones relacionadas con el desarrollo web.

Tuvo especial relevancia como reformulación de HTML basada en las reglas de XML. Actualmente, el desarrollo web utiliza principalmente HTML, por lo que XHTML tendrá únicamente carácter contextual en este módulo.

Tecnologías del ecosistema JavaScript

Alrededor de JavaScript existe un amplio ecosistema de lenguajes, entornos, frameworks y herramientas.

TypeScript

TypeScript es un lenguaje desarrollado sobre JavaScript que incorpora, entre otras características, un sistema de tipado estático.

El código TypeScript debe transformarse en JavaScript para poder ejecutarse en el navegador.

TypeScript
    │
    ↓
JavaScript
    │
    ↓
Navegador

Node.js

Node.js es un entorno de ejecución que permite ejecutar JavaScript fuera del navegador.

                 JavaScript
                 /        \
                ↓          ↓
          Navegador      Node.js

Node.js puede utilizarse para desarrollar aplicaciones de servidor, pero también constituye la base de numerosas herramientas utilizadas durante el desarrollo frontend.

Vue

Vue es un framework de JavaScript orientado al desarrollo de interfaces de usuario y aplicaciones web.

Durante el módulo comenzaremos trabajando directamente con Vanilla JavaScript, es decir, JavaScript sin utilizar un framework.

Posteriormente utilizaremos Vue 3 para desarrollar aplicaciones utilizando una arquitectura basada en componentes.

npm

npm es un gestor de paquetes del ecosistema Node.js.

Permite instalar y gestionar las dependencias utilizadas por un proyecto JavaScript.

Vite

Vite es una herramienta utilizada para crear y desarrollar proyectos web modernos.

Nos proporcionará el entorno de desarrollo que utilizaremos tanto con Vanilla JavaScript como con Vue 3.

Visión general del ecosistema

Las tecnologías anteriores cumplen funciones diferentes y no deben confundirse entre sí.

Tecnología	Tipo	Función principal
HTML	Lenguaje de marcado.	Estructura y contenido.
CSS	Lenguaje de estilos.	Presentación.
JavaScript	Lenguaje de programación.	Comportamiento.
ECMAScript	Especificación.	Estandarización de JavaScript.
DOM	API / modelo.	Representación y manipulación del documento.
TypeScript	Lenguaje.	JavaScript con tipado estático.
Node.js	Entorno de ejecución.	Ejecución de JavaScript fuera del navegador.
Vue	Framework.	Desarrollo de interfaces de usuario.
npm	Gestor de paquetes.	Gestión de dependencias.
Vite	Herramienta de desarrollo.	Desarrollo y construcción de proyectos web.

A lo largo del módulo utilizaremos principalmente JavaScript, las APIs proporcionadas por el navegador y Vue 3, apoyándonos en Node.js, npm y Vite como parte de nuestro entorno de desarrollo.