Tema 21. Aplicaciones web. Desarrollo web front-end y en servidor, multiplataforma y multidispositivo. Lenguajes: HTML, XML y sus derivaciones. Navegadores y lenguajes de programación web. Lenguajes de script.

1. Aplicaciones web

1. Aplicaciones web

🎯 Idea clave

• Una aplicación web es un programa informático al que se accede mediante un navegador a través de una red, sin necesidad de instalación local.
• Se diferencia de las aplicaciones de escritorio tradicionales porque reside en servidores remotos y se entrega bajo demanda mediante una URL.
• A diferencia de una página web estática, permite realizar operaciones interactivas como autenticarse, consultar datos o ejecutar trámites.
• Su arquitectura se fundamenta en la comunicación cliente-servidor mediante protocolos HTTP o HTTPS.
• La lógica de la aplicación puede ejecutarse en el cliente, en el servidor o en ambos de forma coordinada mediante arquitecturas híbridas.
• Constituye el modelo dominante para la entrega de software en entornos públicos y empresariales, incluyendo sedes electrónicas administrativas.

📚 Desarrollo

Definición operativa. Una aplicación web es un programa informático al que se accede mediante un navegador a través de una red, ya sea internet o una intranet corporativa. A diferencia de las aplicaciones de escritorio tradicionales, que requieren instalación local en el equipo del usuario, la aplicación web reside en uno o varios servidores remotos y se entrega bajo demanda al cliente cuando este la solicita mediante una dirección URL.

Tecnologías base. La interfaz se renderiza fundamentalmente con tres tecnologías que conforman el núcleo de la plataforma web: HTML para la estructura semántica de los contenidos, CSS para la presentación visual y JavaScript para el comportamiento dinámico. Estas tecnologías abiertas constituyen la base sobre la que se construye toda la experiencia de usuario en el navegador.

Arquitectura distribuida. La lógica de la aplicación puede ejecutarse en el cliente, en el servidor o, configuración más habitual en la actualidad, en ambos lados de manera coordinada. Esta distribución del procesamiento da lugar a arquitecturas híbridas que optimizan el rendimiento al ubicar la computación allí donde resulta más eficiente según los requisitos funcionales.

Comunicación cliente-servidor. El fundamento técnico reside en la comunicación entre cliente y servidor mediante HTTP o HTTPS, siendo este último el protocolo que añade protección de transporte mediante TLS. El navegador solicita recursos y el servidor responde con documentos HTML, hojas CSS, código JavaScript, imágenes o datos estructurados en formatos como JSON y XML, estableciendo un flujo bidireccional de información.

Capacidad interactiva. A diferencia de una página web estática, una aplicación web permite realizar operaciones complejas como autenticarse, consultar datos, enviar formularios, modificar información o ejecutar trámites. Esta capacidad de interacción continua con el usuario y de procesamiento de negocio la distingue como un sistema software funcional completo accesible remotamente.

Contexto administrativo. La naturaleza distribuida y el carácter abierto de los estándares han convertido a las aplicaciones web en el modelo dominante para la entrega de software, desde la sede electrónica de una administración pública hasta complejas plataformas empresariales. Su universalidad de acceso mediante navegador facilita la prestación de servicios públicos digitales sin barreras de instalación ni dependencias de sistemas operativos específicos.

🧩 Elementos esenciales

• Cliente HTTP: programa, generalmente un navegador, que solicita recursos al servidor mediante protocolos web.
• Servidor remoto: infraestructura donde reside la aplicación y procesa las peticiones recibidas desde los clientes.
• Protocolo HTTP: protocolo de capa de aplicación para transmitir documentos de hipermedia entre navegadores y servidores web.
• HTTPS: versión segura de HTTP que añade protección de transporte mediante cifrado TLS.
• Arquitectura híbrida: modelo donde la lógica se distribuye entre cliente y servidor según eficiencia y requisitos funcionales.
• Página web estática: documento que solo presenta información sin permitir operaciones interactivas complejas.
• Aplicación web interactiva: sistema que permite autenticación, consulta de datos, envío de formularios y procesamiento de negocio.
• Intranet corporativa: red privada de organizaciones donde también se despliegan aplicaciones web internas.

🧠 Recuerda

• Las aplicaciones web no requieren instalación local en el equipo del usuario.
• Residen en servidores remotos y se entregan bajo demanda mediante URL.
• Se distinguen de las páginas estáticas por su capacidad de operación e interacción.
• Utilizan HTML, CSS y JavaScript como tecnologías base de renderizado.
• La lógica puede ejecutarse en cliente, servidor o ambos de forma coordinada.
• HTTP y HTTPS son los protocolos fundamentales de comunicación cliente-servidor.
• Constituyen el modelo estándar para sedes electrónicas y servicios públicos digitales.

2. Desarrollo web front-end y en servidor, multiplataforma y multidispositivo

2. Desarrollo web front-end y en servidor, multiplataforma y multidispositivo

🎯 Idea clave

• El desarrollo web moderno se articula sobre una arquitectura cliente-servidor que separa front-end y back-end como universos tecnológicos complementarios.
• El front-end se ejecuta en el navegador y gestiona la presentación, la interactividad y la experiencia de usuario mediante HTML, CSS y JavaScript.
• El back-end se ejecuta en el servidor y concentra la lógica de negocio, el acceso a datos, la autenticación y la exposición de APIs.
• La exigencia actual demanda aplicaciones que operen correctamente en múltiples plataformas y dispositivos con características técnicas dispares.
• El profesional debe dominar un ecosistema amplio asentado en estándares abiertos pero enriquecido con bibliotecas, frameworks y patrones arquitectónicos.

📚 Desarrollo

Arquitectura dual. El desarrollo de aplicaciones web modernas se fundamenta en una arquitectura cliente-servidor donde conviven dos universos tecnológicos complementarios. El front-end opera en el navegador del usuario, mientras que el back-end reside en el servidor, distribuyendo el procesamiento allí donde resulta más eficiente. Ambos planos deben funcionar como un sistema único coherente, pues una interfaz correcta no compensa un servidor inseguro, y una lógica robusta pierde valor si el front-end impide la usabilidad real.

Front-end y sus tecnologías. El desarrollo del lado del cliente transforma los datos recibidos del servidor en una interfaz comprensible, atractiva y usable. Se construye sobre tres tecnologías fundamentales: HTML para la estructura semántica, CSS para la presentación visual y JavaScript para el comportamiento dinámico. Su misión abarca la gestión de clics, formularios, gestos, animaciones y validaciones iniciales, adaptando la experiencia a diferentes dispositivos mediante APIs del navegador y sistemas de componentes.

Responsabilidades del servidor. El desarrollo en servidor implementa la parte de la aplicación que no debe confiarse al cliente. Recibe peticiones HTTP, aplica autorización, valida datos de forma definitiva, ejecuta reglas de negocio, gestiona la persistencia y devuelve respuestas que pueden ser páginas HTML generadas en servidor o datos en formatos como JSON o XML. Conserva las responsabilidades críticas: seguridad, consistencia, control de concurrencia y trazabilidad.

Multiplataforma y multidispositivo. El panorama actual exige que las aplicaciones operen correctamente en ordenadores de escritorio, portátiles, tabletas, móviles, televisores, wearables o dispositivos IoT, con tamaños de pantalla, capacidades de entrada y potencias de cálculo muy dispares. El diseño responsive adapta el layout, el contenido y la interacción al espacio disponible mediante media queries y enfoque mobile-first, garantizando una base de código única para todos los terminales.

Integración y estándares. El ecosistema se asienta en estándares abiertos como W3C, WHATWG, ECMA e IETF, complementados con herramientas modernas de construcción, gestores de paquetes y mecanismos de seguridad aplicables en cliente, servidor y comunicaciones. Existen arquitecturas híbridas que combinan renderizado inicial en servidor con hidratación posterior en cliente, así como modelos que distribuyen el procesamiento según requisitos funcionales, rendimiento y accesibilidad.

🧩 Elementos esenciales

• Arquitectura cliente-servidor: Modelo base donde el cliente solicita recursos mediante HTTP y el servidor responde, distribuyendo responsabilidades entre navegador y servidor.
• Front-end: Parte ejecutada en el navegador encargada de la presentación, interactividad y adaptación a dispositivos, construida sobre HTML, CSS y JavaScript.
• Back-end: Lógica ejecutada en el servidor que gestiona datos, seguridad, autenticación, APIs y reglas de negocio críticas no expuestas al cliente.
• Validación dual: La validación en cliente mejora la experiencia pero nunca sustituye a la validación definitiva y de seguridad en servidor.
• Multiplataforma: Capacidad de funcionar en distintos sistemas operativos, navegadores y entornos tecnológicos heterogéneos.
• Multidispositivo: Adaptación a diferentes terminales, tamaños de pantalla, modos de entrada y contextos de uso específicos.
• Diseño responsive: Técnica que ajusta layout, contenido e interacción al espacio disponible mediante unidades flexibles y media queries, no solo reduce tamaños.
• Renderizado híbrido: Posibilidad de combinar generación de HTML en servidor con hidratación posterior en cliente según requisitos de rendimiento y SEO.
• PWA (Progressive Web App): Aplicaciones web que combinan fundamentos web con capacidades como manifest, HTTPS y service workers cuando el caso de uso lo justifica.
• Estándares abiertos: Base tecnológica conformada por W3C, WHATWG, ECMA e IETF que garantiza interoperabilidad y evolución del ecosistema.
• Seguridad integral: Debe aplicarse en cliente, servidor, comunicación, dependencias, sesiones y APIs de forma coordinada.
• Accesibilidad y rendimiento: Partes fundamentales del desarrollo profesional, no tareas accesorias, junto con la observabilidad del sistema.

🧠 Recuerda

• El front-end construye estructura, presentación e interacción; no se reduce únicamente a la apariencia visual.
• El servidor conserva las responsabilidades críticas: validación definitiva, seguridad, autorización, persistencia y reglas de negocio.
• Multiplataforma se refiere a sistemas y navegadores; multidispositivo se refiere a terminales y contextos de uso concretos.
• Una interfaz correcta no compensa un servidor inseguro, ni una lógica robusta en servidor salva un front-end inusable.
• El diseño responsive adapta layout e interacción al espacio disponible, no consiste solo en reducir tamaños proporcionalmente.
• La validación en cliente mejora la experiencia pero nunca sustituye a la validación en servidor.
• El ecosistema se asienta en estándares abiertos pero se enriquece con frameworks, librerías y herramientas de construcción modernas.
• Distingue con precisión conceptual entre front-end, back-end, API, SPA, PWA, responsive, multiplataforma y multidispositivo.
• La seguridad, accesibilidad y observabilidad son partes integrales del desarrollo web profesional.
• Ambos planos, cliente y servidor, deben funcionar como un único sistema coherente e integrado.

3. Lenguajes: HTML, XML y sus derivaciones

3. Lenguajes: HTML, XML y sus derivaciones

🎯 Idea clave

• HTML y XML descienden del metalenguaje SGML y constituyen los pilares fundamentales de la World Wide Web para la representación de documentos hipertextuales y el intercambio estructurado de información entre sistemas.
• HTML funciona como un vocabulario predefinido con etiquetas específicas interpretables directamente por navegadores sin necesidad de procesamiento o conocimiento externo del vocabulario.
• XML opera como una metarregla extensible que permite crear vocabularios personalizados para la representación estructurada de datos independiente de su presentación concreta.
• La familia tecnológica XML incluye XPath, XQuery, XSLT, XSL-FO y APIs de procesamiento como DOM, SAX y StAX para la navegación, consulta, transformación y manipulación de documentos.
• Los sistemas de validación estructural comprenden DTD, XSD recomendado por W3C en 2001 como esquema dominante, RELAX NG y Schematron para reglas contextuales.
• Existen numerosas derivaciones especializadas como SVG, MathML, XHTML, RSS, Atom, SOAP, WSDL, XBRL, EPUB y ODF, siendo este último el formato ofimático preferente en la Administración Pública española.

📚 Desarrollo

Origen evolutivo desde SGML. Tanto HTML como XML descienden del metalenguaje SGML y han evolucionado durante más de tres décadas para dar respuesta a necesidades diferenciadas: representar documentos hipertextuales accesibles mediante navegadores y facilitar el intercambio estructurado de información entre sistemas computacionales heterogéneos, incorporando posteriormente tecnologías complementarias como CSS, JSON o YAML en el ecosistema web actual.

HTML como vocabulario predefinido. HTML constituye un lenguaje orientado a describir documentos y aplicaciones web mediante un vocabulario específico y etiquetas predefinidas como html, head, body, section, form, input, table o button, cuyo significado viene determinado por la especificación técnica y que los navegadores interpretan directamente para renderizar páginas visibles sin requerir transformaciones previas ni conocimientos externos del vocabulario particular.

XML como marco de metarreglas. XML opera como una metarregla que permite crear vocabularios de marcado propios y extensibles, donde etiquetas como expediente, interesado o fecha adquieren significado únicamente mediante el esquema o sistema procesador asociado, resultando independiente de presentaciones concretas y especialmente diseñado para la validación, transformación y normalización del intercambio de información entre Administraciones Públicas y sistemas empresariales.

Navegación y consulta de datos. La familia tecnológica XML incluye XPath para navegar y seleccionar nodos mediante expresiones de ruta en el árbol del documento, y XQuery como lenguaje de consulta equivalente a SQL para bases de datos relacionales pero aplicado a estructuras XML, permitiendo extraer información específica de documentos complejos y grandes repositorios de datos semiestructurados.

Transformación y formateo. XSLT (eXtensible Stylesheet Language Transformations) permite transformar documentos XML en otros XML, HTML o texto plano mediante reglas declarativas, mientras que XSL-FO (Formatting Objects) proporciona un vocabulario específico para el formato paginado destinado típicamente a la generación de documentos PDF profesionales con control tipográfico avanzado.

Modelos de procesamiento. El Document Object Model (DOM) representa el documento XML como un árbol de nodos manipulables en memoria, mientras que SAX (Simple API for XML) implementa un parser orientado a eventos que consume poca memoria al procesar documentos grandes en flujo continuo, y StAX (Streaming API for XML) opera mediante parser de tipo pull donde el programador solicita explícitamente los siguientes eventos según los necesita.

Esquemas de validación. La definición de estructuras válidas puede realizarse mediante DTD (Document Type Definition), heredado de SGML con sintaxis propia y limitaciones respecto a tipos de datos, o mediante XSD (XML Schema Definition), recomendación W3C de 2001 escrita en sintaxis XML que soporta tipos primitivos y derivados, restricciones de longitud, patrón y rango, herencia y espacios de nombres constituyendo el esquema dominante actualmente.

Alternativas y reglas contextuales. RELAX NG ofrece una alternativa más sencilla y expresiva con sintaxis compacta y XML, mientras que Schematron se basa en reglas declarativas con XPath resultando útil para validaciones contextuales que XSD no puede expresar directamente, permitiendo verificar condiciones de negocio complejas entre elementos del documento.

Derivaciones especializadas. La extensibilidad de XML ha generado decenas de vocabularios estandarizados: SVG para gráficos vectoriales 2D incrustables en HTML, MathML para representación de fórmulas matemáticas, SMIL para presentaciones multimedia sincronizadas, XHTML como reformulación estricta de HTML como aplicación XML, RSS y Atom para sindicación de contenidos web, y protocolos como SOAP y WSDL para servicios web.

Aplicaciones administrativas y formatos abiertos. En el ámbito específico se encuentran DocBook para documentación técnica, TEI para edición digital de textos en humanidades, DITA para documentación modular técnica, XBRL para información financiera utilizada por la CNMV y supervisores internacionales, EPUB como formato de libro electrónico basado en XML y XHTML, y especialmente ODF (Open Document Format), normalizado como ISO/IEC 26300 y constituyendo el formato nativo de LibreOffice y el formato preferente en la Administración española según el Esquema Nacional de Interoperabilidad.

🧩 Elementos esenciales

• SGML: Metalenguaje origen de HTML y XML que proporciona las bases sintácticas para la definición de lenguajes de marcado estructurado.
• HTML: Lenguaje de marcado con vocabulario fijo y predefinido orientado a la presentación de documentos hipertextuales en navegadores web mediante etiquetas específicas.
• XML: Extensible Markup Language que define metarreglas para crear vocabularios propios, enfocado al intercambio, almacenamiento y validación de datos estructurados independientemente de su presentación.
• XPath: Lenguaje de navegación mediante expresiones de ruta para seleccionar nodos específicos dentro del árbol jerárquico de un documento XML.
• XQuery: Lenguaje de consulta declarativo para XML funcionalmente equivalente a SQL para bases de datos relacionales.
• XSLT: Lenguaje declarativo para transformar documentos XML en otros formatos XML, HTML o texto plano según reglas definidas en hojas de estilo.
• XSD: XML Schema Definition, esquema dominante recomendado por W3C en 2001 que soporta tipos de datos complejos, restricciones, herencia y espacios de nombres.
• DOM: API que representa el documento XML como una estructura de árbol de nodos completamente manipulables en memoria por aplicaciones de procesamiento.
• SAX: API de procesamiento orientada a eventos que permite parsear documentos XML grandes con consumo mínimo de memoria mediante procesamiento en flujo continuo.
• ODF: Open Document Format, formato ofimático normalizado ISO/IEC 26300 y preferente para la Administración Pública española según el Esquema Nacional de Interoperabilidad, siendo el formato nativo de LibreOffice.

🧠 Recuerda

• HTML define un vocabulario cerrado interpretable directamente por navegadores, mientras que XML define reglas para crear vocabularios abiertos y personalizados según necesidades específicas.
• XML requiere siempre una aplicación procesadora, hoja de estilo o transformación que conozca su vocabulario específico para presentar los datos de forma comprensible.
• XPath se utiliza para navegar por la estructura de árbol del documento XML mediante expresiones de ruta similares a las utilizadas en sistemas de archivos jerárquicos.
• XSD es el sistema de validación esquemática dominante frente al limitado DTD heredado de SGML, soportando tipos de datos primitivos y derivados así como namespaces.
• SAX procesa XML como flujo de eventos sin cargar todo el documento en memoria, siendo ideal para archivos de gran tamaño y entornos con recursos limitados.
• ODF constituye el formato ofimático preferente en la Administración española, siendo el nativo de LibreOffice y estándar internacional ISO/IEC 26300.
• XBRL se utiliza específicamente para información financiera empresarial y regulación por parte de la CNMV y organismos supervisores internacionales.
• XHTML representa la reformulación de HTML siguiendo estrictamente las reglas sintácticas bien formadas de XML.

4. Navegadores y lenguajes de programación web

4. Navegadores y lenguajes de programación web

🎯 Idea clave

• El navegador actúa como cliente HTTP que solicita recursos al servidor y renderiza la interfaz mediante HTML, CSS y JavaScript.
• Los lenguajes de programación web se distinguen de los frameworks, que son herramientas que proporcionan estructura y convenciones sobre los lenguajes base.
• El desarrollo front-end utiliza HTML5 para la estructura semántica, CSS3 para la presentación visual y JavaScript ECMAScript 2024 para el comportamiento dinámico.
• TypeScript se ha consolidado como superconjunto tipado dominante que compila a JavaScript en el entorno del navegador.
• El entorno servidor emplea lenguajes como Java, Python, PHP, Node.js, Go, Rust, C# y Ruby para ejecutar la lógica de negocio y gestionar datos.

📚 Desarrollo

Cliente HTTP. El navegador constituye el cliente habitual que solicita recursos al servidor mediante los protocolos HTTP o HTTPS, este último añadiendo protección de transporte mediante TLS. El servidor responde con documentos HTML, hojas de estilo CSS, código JavaScript, imágenes y datos en formatos como JSON o XML.

Renderizado web. La interfaz de las aplicaciones web se renderiza fundamentalmente con tres tecnologías que conforman el núcleo de la plataforma: HTML define la estructura semántica de los contenidos, CSS determina la presentación visual y JavaScript permite el comportamiento dinámico e interactivo.

Separación conceptual. El desarrollo front-end se ejecuta dentro del navegador y tiene como misión transformar los datos recibidos del servidor en una interfaz comprensible y usable, gestionando la interacción del usuario a través de clics, formularios y gestos.

Distinción fundamental. Un lenguaje de programación no debe confundirse con un framework. JavaScript es el lenguaje base del navegador, mientras que React, Angular, Vue o Svelte son frameworks o librerías del ecosistema front-end que proporcionan estructura y componentes reutilizables.

Lógica distribuida. La lógica de la aplicación puede ejecutarse en el cliente, en el servidor o en ambos lados de manera coordinada mediante arquitecturas híbridas. El front-end se comunica con el back-end normalmente a través de APIs REST, GraphQL, gRPC o WebSocket.

🧩 Elementos esenciales

• Protocolo HTTP: Protocolo de capa de aplicación para transmitir documentos de hipermedia entre navegadores y servidores web.
• HTTPS: Versión segura de HTTP que añade protección de transporte mediante TLS para cifrar la comunicación.
• HTML5: Lenguaje de marcado que define la estructura semántica del contenido web renderizado por el navegador.
• CSS3: Lenguaje de estilos que controla la presentación visual, incluyendo flexbox, grid y animaciones.
• JavaScript ECMAScript 2024: Lenguaje de programación que habilita el comportamiento dinámico y la interactividad en el navegador.
• TypeScript: Superconjunto tipado de JavaScript que se compila a JavaScript y domina el desarrollo front-end moderno.
• Frameworks front-end: React, Vue, Angular, Svelte, Solid y Lit son herramientas que estructuran el desarrollo sobre JavaScript.
• Meta-frameworks: Next.js, Nuxt, SvelteKit, Remix, Astro y Qwik añaden capacidades de SSR, SSG e ISR a los frameworks base.
• Lenguajes back-end: Java, .NET, Python, Node.js, PHP, Go, Rust, Ruby on Rails y Kotlin ejecutan la lógica en servidor.
• Arquitecturas habituales: MVC, hexagonal, clean architecture, CQRS, microservicios y serverless organizan el código en el servidor.

🧠 Recuerda

• El navegador es el cliente HTTP por excelencia en las aplicaciones web modernas.
• HTML, CSS y JavaScript son las tres tecnologías base interpretadas por cualquier navegador.
• Un framework no reemplaza al lenguaje, sino que organiza su uso mediante convenciones y componentes.
• TypeScript añade tipado estático a JavaScript sin alterar su ejecución en el navegador.
• La comunicación front-back utiliza APIs REST, GraphQL, gRPC o WebSocket según necesidades.
• El tooling moderno incluye Vite, esbuild, SWC, Turbopack y Webpack para empaquetado.
• Los gestores de paquetes npm, pnpm, yarn y bun administran las dependencias del proyecto.
• El diseño responsive garantiza la adaptabilidad a diferentes tamaños de pantalla mediante media queries.
• La autenticación moderna se basa en OAuth 2.0, OIDC, JWT y SAML para seguridad en la comunicación.
• Separar front-end y back-end mediante APIs permite arquitecturas escalables y mantenibles.

5. Lenguajes de script

5. Lenguajes de script

🎯 Idea clave

• Los lenguajes de script permiten automatizar tareas, coordinar componentes y ejecutar lógica dentro de un entorno anfitrión que proporciona APIs y permisos específicos.
• Un script se ejecuta integrado con su entorno, diferenciándose el navegador —con APIs como DOM, eventos y Fetch— del servidor, donde operan runtime como Node.js o intérpretes de PHP y Python.
• JavaScript constituye el lenguaje de script nativo del navegador, estandarizado por ECMAScript, mientras que TypeScript añade tipado durante el desarrollo transformándose posteriormente a JavaScript.
• En el servidor, PHP, Python, Ruby, Perl y shell scripting procesan peticiones, generan respuestas dinámicas, acceden a bases de datos y aplican reglas de negocio bajo distintos modelos de ejecución.
• La seguridad exige tratar toda entrada como no confiable, separar datos de código, validar rigurosamente en servidor y nunca sustituir la validación del cliente por la del servidor.
• Los scripts de automatización deben ser reproducibles, seguros, trazables y resistentes a errores, controlando dependencias y limitando permisos.

📚 Desarrollo

Definición y evolución. Los lenguajes de script son utilizados tradicionalmente para automatizar tareas, coordinar componentes, añadir comportamiento dinámico y ejecutar lógica en entornos anfitriones. Aunque históricamente se asociaban a lenguajes interpretados y programas breves, actualmente disponen de motores optimizados, grandes ecosistemas, frameworks profesionales y uso en aplicaciones críticas, por lo que no deben considerarse sinónimo de lenguajes de menor capacidad.

Concepto de entorno anfitrión. Un script se ejecuta dentro de un entorno que le proporciona objetos, funciones y permisos específicos. En el navegador, JavaScript opera con APIs como window, document, DOM, eventos, temporizadores, almacenamiento y Fetch. En Node.js, el entorno proporciona módulos para sistema de archivos, red, procesos y servidor HTTP. PHP se ejecuta típicamente en un servidor web o runtime que recibe peticiones y genera respuestas.

JavaScript y ECMAScript. JavaScript es el lenguaje de script nativo del navegador, estandarizado por ECMAScript, que define únicamente el núcleo del lenguaje. En el navegador, JavaScript combina este núcleo con APIs web específicas, permitiendo responder a eventos, modificar el DOM, consultar APIs y crear experiencias interactivas. TypeScript añade tipado estático durante el desarrollo, pero se transforma normalmente a JavaScript para su ejecución.

Scripts en el lado servidor. En el servidor, los lenguajes de script procesan peticiones, generan respuestas, acceden a bases de datos, consumen servicios y aplican reglas de negocio. PHP puede integrarse con HTML para producir contenido dinámico. Python se apoya en frameworks web y servidores WSGI o ASGI. JavaScript mediante Node.js permite usar el mismo lenguaje en cliente y servidor, aunque con APIs distintas.

Modelos de ejecución. El modelo de ejecución varía según el runtime y el servidor de aplicaciones. Un script PHP puede ejecutarse en respuesta a una petición individual generando HTML o JSON. Una aplicación Node.js mantiene un proceso servidor que atiende múltiples peticiones de forma asíncrona. Una aplicación Python puede ejecutarse detrás de servidores WSGI o ASGI. Estas diferencias afectan la concurrencia, gestión de estado, despliegue, rendimiento y manejo de errores.

Seguridad y validación. Los scripts de servidor deben tratar toda entrada como no confiable, incluyendo parámetros de URL, formularios, cabeceras, cookies, cuerpos JSON y ficheros subidos. La validación en cliente nunca sustituye a la validación en servidor. Es imprescindible aplicar controles de autenticación y autorización, separar datos de código, escapar salidas, controlar dependencias y limitar permisos. Si una interfaz oculta un botón pero el endpoint permite la acción, el sistema sigue siendo vulnerable.

🧩 Elementos esenciales

• Entorno anfitrión: Contexto de ejecución que proporciona al script objetos, APIs, permisos y funciones específicas según la plataforma, ya sea navegador o servidor.
• ECMAScript: Estándar que define el núcleo del lenguaje JavaScript, independiente de las APIs específicas del navegador como DOM o Fetch.
• DOM: API web disponible en navegadores que permite a JavaScript manipular la estructura, contenido y estilo de los documentos HTML.
• Node.js: Runtime que permite ejecutar JavaScript fuera del navegador, proporcionando módulos para sistema de archivos, red, procesos y servidor HTTP.
• PHP: Lenguaje de script de propósito general especialmente adecuado para desarrollo web del lado servidor y embebible en HTML.
• Python: Lenguaje interpretado utilizado en scripting, automatización, desarrollo web con frameworks específicos y administración de sistemas.
• Ruby: Lenguaje de script relevante en desarrollo web, especialmente asociado a frameworks como Ruby on Rails que popularizaron convenciones productivas.
• Shell scripting: Conjunto de lenguajes utilizados para automatizar tareas de sistema, despliegues, procesamiento de archivos y coordinación de comandos.
• Validación de entradas: Proceso de verificación y normalización de datos recibidos por el servidor, considerándolos siempre no confiables independientemente de la validación cliente.
• TypeScript: Superset de JavaScript que añade tipado estático durante el desarrollo, transformándose normalmente a JavaScript para su ejecución.
• Separación de datos y código: Principio de seguridad fundamental que evita la ejecución inadvertida de código malicioso mediante la correcta gestión de entradas y salidas.

🧠 Recuerda

• Un script siempre depende del entorno anfitrión que lo ejecuta y proporciona sus capacidades.
• JavaScript en navegador combina el núcleo ECMAScript con APIs web como DOM, eventos, Fetch y almacenamiento.
• Node.js extiende JavaScript al servidor con módulos específicos para sistema de archivos, red y procesos.
• PHP, Python, Ruby, Perl y shell scripting son lenguajes de script relevantes para el lado servidor y automatización.
• La validación en cliente nunca sustituye ni reemplaza la validación obligatoria en servidor.
• TypeScript añade tipado durante el desarrollo pero se ejecuta transformado a JavaScript estándar.
• Los scripts de servidor deben validar parámetros URL, formularios, cabeceras, cookies y cuerpos JSON.
• El servidor decide y verifica: ocultar elementos en la interfaz no protege endpoints vulnerables.
• Los scripts de automatización deben ser reproducibles, seguros, trazables y resistentes a errores.
• Controlar dependencias y limitar permisos son prácticas esenciales para la seguridad en scripts.