📋 Índice del Tema

1. Internet: Estado Actual y Evolución Tecnológica
   • 1.1. Definición y Arquitectura de Internet
   • 1.2. Estado Actual: IPv6, 5G, Edge Computing, IoT
   • 1.3. Tendencias Emergentes: Web3, IA Generativa, Quantum-Safe
2. Servicios Tradicionales de Internet
   • 2.1. Correo Electrónico: SMTP, POP3, IMAP4
   • 2.2. Transferencia de Ficheros: FTP, FTPS, SFTP
   • 2.3. Otros Servicios Clásicos: DNS, DHCP, NTP
3. Lenguajes para Utilización en Internet
   • 3.1. Lenguajes de Marcado: HTML5, XML, JSON
   • 3.2. Lenguajes de Estilo: CSS3, Preprocesadores SASS/LESS
   • 3.3. Lenguajes de Programación Cliente: JavaScript, TypeScript
   • 3.4. Lenguajes de Programación Servidor: PHP, Python, Node.js, Java
4. Herramientas para Desarrollo y Gestión Web
   • 4.1. Frameworks Frontend: React, Angular, Vue.js
   • 4.2. Frameworks Backend: Spring Boot, Django, Express.js
   • 4.3. Herramientas de Desarrollo: Git, Docker, Kubernetes
   • 4.4. Herramientas de Testing y Monitorización
5. Protocolos para Utilización en Internet
   • 5.1. HTTP/HTTPS y Evolución: HTTP/1.1, HTTP/2, HTTP/3
   • 5.2. Protocolos de Seguridad: TLS/SSL, SSH
   • 5.3. Protocolos Modernos: WebSocket, gRPC, MQTT
   • 5.4. APIs: REST, GraphQL, SOAP
6. Intranets y Extranets
   • 6.1. Definición y Diferencias
   • 6.2. Arquitectura y Componentes
   • 6.3. Casos en el SAS: Red Corporativa SSPA
   • 6.4. Seguridad: VPN, Firewall, DMZ
7. Accesibilidad Web
   • 7.1. Normativa: WCAG 2.1, EN 301 549, RD 1112/2018
   • 7.2. Principios POUR: Perceptible, Operable, Comprensible, Robusto
   • 7.3. Niveles de Conformidad: A, AA, AAA
   • 7.4. Herramientas de Evaluación: WAVE, AXE, Lighthouse
8. Usabilidad Web
   • 8.1. Principios de Diseño UX/UI
   • 8.2. Patrones de Diseño Web
   • 8.3. Responsive Design y Mobile First
   • 8.4. Métricas de Usabilidad y Testing
9. Aplicación en el SAS: Casos Prácticos
10. Conclusiones y Retos Futuros

🌐1. Internet: Estado Actual y Evolución Tecnológica

1.1. Definición y Arquitectura de Internet

Internet es una red global de redes interconectadas que utilizan el conjunto de protocolos TCP/IP para comunicarse. No es una entidad única, sino un sistema descentralizado de redes públicas y privadas que abarcan desde pequeñas redes locales hasta grandes redes de proveedores de servicios (ISP).

Arquitectura Jerárquica de Internet

1.2. Estado Actual de Internet (2025)

IPv6: La Transición Definitiva

Aunque IPv4 sigue siendo dominante en muchas redes corporativas, IPv6 es ya una realidad ineludible. El agotamiento de direcciones IPv4 y la explosión del IoT han acelerado la adopción.

5G y Conectividad Ubicua

La tecnología 5G no es solo «más rápida»… Es un cambio de paradigma en conectividad:

• Latencia ultra-baja: <10 ms (crítico para telemedicina y cirugía remota)
• Ancho de banda masivo: Hasta 10 Gbps (streaming de imágenes médicas en tiempo real)
• Densidad de dispositivos: 1 millón/km² (IoT médico: sensores, wearables)
• Network slicing: Redes virtuales dedicadas (una para emergencias, otra para datos administrativos)

Edge Computing: Procesamiento en el Borde

El Edge Computing acerca el procesamiento de datos al punto de generación, reduciendo latencia y mejorando la privacidad. En sanidad, esto es crítico:

• Análisis de ECG en tiempo real en ambulancias
• Procesamiento de imágenes médicas en el propio hospital sin enviarlas al cloud
• IA local para diagnóstico asistido que cumple con RGPD (datos no salen del centro)

IoT (Internet of Things) en Sanidad

El IoMT (Internet of Medical Things) es una realidad en el SAS:

• Wearables: Monitorización continua de constantes vitales
• Sensores ambientales: Control de temperatura/humedad en quirófanos y almacenes farmacéuticos
• Dispositivos médicos conectados: Bombas de infusión, monitores cardíacos, ventiladores
• Gestión de activos: RFID para seguimiento de equipamiento médico

1.3. Tendencias Emergentes en Internet

Web3 y Blockchain

Aunque aún en fase experimental en sanidad, Web3 promete descentralización y control del usuario sobre sus datos:

• Historia clínica descentralizada: Paciente controla acceso mediante smart contracts
• Trazabilidad farmacéutica: Blockchain para evitar falsificaciones
• Investigación médica: Compartir datos anonimizados de forma segura

Nota: En 2025, estas tecnologías están en fase de piloto, pero debes conocer los conceptos para el examen.

Inteligencia Artificial Generativa

La IA generativa (tipo ChatGPT, Claude, Gemini) está transformando la interacción web:

• Chatbots médicos: Atención 24/7 para consultas no urgentes
• Generación de informes: Asistencia en documentación clínica
• Traducción médica: Acceso a pacientes de cualquier idioma

Criptografía Post-Cuántica (Quantum-Safe)

Los ordenadores cuánticos romperán el cifrado actual (RSA, ECC). El NIST ya ha estandarizado algoritmos resistentes a ataques cuánticos:

• CRYSTALS-Kyber: Para intercambio de claves
• CRYSTALS-Dilithium: Para firmas digitales
• Falcon y SPHINCS+: Alternativas para firmas

Aunque los ordenadores cuánticos útiles están a años de distancia, el SAS debe prepararse ahora porque los datos de salud cifrados hoy podrían ser descifrados en el futuro (ataque «harvest now, decrypt later»).

Zero Trust Network Architecture

El modelo tradicional de «confianza dentro del perímetro» está obsoleto. Zero Trust se basa en «nunca confiar, siempre verificar»:

• Microsegmentación: Cada aplicación/servicio en su propio segmento
• Autenticación continua: MFA en cada acceso, no solo al login
• Least privilege: Mínimos privilegios necesarios
• Monitorización exhaustiva: Logs de todo, análisis con IA

📧2. Servicios Tradicionales de Internet

2.1. Correo Electrónico: SMTP, POP3, IMAP4

El correo electrónico es el servicio más antiguo y aún esencial de Internet. En el SAS, el correo corporativo (@juntadeandalucia.es) es canal oficial de comunicación.

Arquitectura del Correo Electrónico

Protocolo SMTP (Simple Mail Transfer Protocol)

Protocolo POP3 (Post Office Protocol v3)

POP3 es el protocolo más simple para recibir correo:

• Puerto: 110 (sin cifrar), 995 (POP3S con SSL/TLS)
• Funcionamiento: Descarga mensajes del servidor y los borra (modo por defecto)
• Ventajas: Simple, rápido, consume poco ancho de banda
• Desventajas: No sincroniza entre dispositivos, acceso offline limitado

Protocolo IMAP4 (Internet Message Access Protocol v4)

IMAP4 es el estándar moderno para correo corporativo:

• Puerto: 143 (sin cifrar), 993 (IMAPS con SSL/TLS)
• Funcionamiento: Los mensajes permanecen en el servidor, el cliente los sincroniza
• Ventajas:
  • Acceso desde múltiples dispositivos con sincronización
  • Gestión de carpetas en servidor
  • Búsquedas en servidor (menos carga en cliente)
  • Flags de estado (leído/no leído) sincronizados
• Desventajas: Más complejo, requiere más recursos del servidor

2.2. Transferencia de Ficheros: FTP, FTPS, SFTP

La transferencia de ficheros es crítica en el SAS: backups, imágenes médicas DICOM, ficheros HL7, logs del sistema…

FTP (File Transfer Protocol)

FTPS (FTP Secure / FTP over SSL/TLS)

FTPS es FTP con una capa de cifrado SSL/TLS añadida:

• Puerto: 990 (implicit SSL) o 21 (explicit SSL con STARTTLS)
• Ventajas:
  • Compatibilidad con FTP (mismos comandos)
  • Cifrado fuerte (TLS 1.2/1.3)
  • Autenticación mediante certificados X.509
• Desventajas:
  • Complejidad en configuración de firewall (múltiples puertos)
  • Dos canales separados (control y datos) dificultan NAT

SFTP (SSH File Transfer Protocol)

A pesar del nombre similar, SFTP NO es FTP cifrado. Es un protocolo completamente distinto que forma parte de SSH.

Comparativa Rápida: FTPS vs SFTP

2.3. Otros Servicios Clásicos de Internet

DNS (Domain Name System)

El DNS es el «directorio telefónico» de Internet. Traduce nombres de dominio legibles (diraya.sas.junta-andalucia.es) a direcciones IP.

• Puerto: 53 (UDP para consultas, TCP para transferencias de zona)
• Jerarquía: Root → TLD (.es, .com) → SLD (junta-andalucia.es) → subdominios
• Tipos de registros:
  • A: IPv4 address
  • AAAA: IPv6 address
  • CNAME: Alias
  • MX: Mail exchange
  • TXT: Texto (usado para SPF, DKIM)
  • NS: Name server
• Seguridad: DNSSEC (firma criptográfica de registros DNS)

DHCP (Dynamic Host Configuration Protocol)

DHCP asigna automáticamente configuración IP a dispositivos de red:

• Puerto: 67 (servidor), 68 (cliente)
• Proceso DORA:
  1. Discover: Cliente busca servidor DHCP
  2. Offer: Servidor ofrece configuración
  3. Request: Cliente solicita esa configuración
  4. Acknowledge: Servidor confirma asignación
• Concede: Dirección IP, máscara, gateway, DNS, tiempo de concesión (lease time)

NTP (Network Time Protocol)

La sincronización horaria es CRÍTICA en entornos sanitarios:

• Puerto: 123 (UDP)
• Importancia:
  • Marcas temporales en historias clínicas (obligatorio por Ley 41/2002)
  • Correlación de eventos de seguridad en logs
  • Validación de certificados digitales
  • Autenticación Kerberos (±5 min de tolerancia)
• Jerarquía de estratos: Stratum 0 (reloj atómico) → Stratum 1 → … → Stratum 16 (no sincronizado)

💻3. Lenguajes para Utilización en Internet

3.1. Lenguajes de Marcado

HTML5 (HyperText Markup Language 5)

HTML5 es el estándar actual para estructurar contenido web. Publicado en 2014, introduce mejoras cruciales:

XML (eXtensible Markup Language)

XML sigue siendo fundamental en interoperabilidad sanitaria:

• HL7 v2/v3: Mensajes de intercambio clínico en XML
• CDA (Clinical Document Architecture): Documentos clínicos estructurados
• SOAP: Web services legacy (aún en uso en algunos sistemas SAS)
• Configuración: Muchas aplicaciones Java usan XML para config

JSON (JavaScript Object Notation)

JSON ha desplazado a XML como formato preferido para APIs modernas:

• Ventajas:
  • Más ligero y legible que XML
  • Parsing nativo en JavaScript
  • Amplio soporte en todos los lenguajes
• Uso en SAS:
  • APIs REST: Diraya expone APIs en JSON
  • HL7 FHIR: Puede usar JSON (además de XML)
  • Configuración: Aplicaciones modernas prefieren JSON

// Ejemplo: Paciente en JSON (FHIR)
{
  "resourceType": "Patient",
  "id": "12345",
  "name": [{
    "family": "García",
    "given": ["María", "Carmen"]
  }],
  "birthDate": "1985-03-15",
  "gender": "female",
  "identifier": [{
    "system": "urn:oid:1.3.6.1.4.1.19126.3",
    "value": "12345678A"
  }]
}

3.2. Lenguajes de Estilo: CSS3

CSS3 (Cascading Style Sheets 3) separa presentación de contenido. Novedades clave:

• Flexbox: Layout flexible en 1D (filas o columnas)
• Grid: Layout en 2D (filas Y columnas simultáneamente)
• Media Queries: Responsive design (adaptar a móvil/tablet/desktop)
• Animaciones y transiciones: Sin JavaScript
• Custom properties: Variables CSS (--color-primary: #667eea;)
• Preprocesadores: SASS, LESS, Stylus (añaden variables, funciones, mixins)

3.3. Lenguajes de Programación Cliente: JavaScript

JavaScript (ES6/ES2015+) es el lenguaje del navegador. Evolución constante:

Características Modernas (ES6+)

• Let/const: Sustituto de var con scope de bloque
• Arrow functions: Sintaxis concisa para funciones
• Promesas y async/await: Gestión de asincronía sin callback hell
• Módulos: import/export nativos
• Destructuring: Extracción elegante de propiedades
• Template literals: Strings multilínea con interpolación
• Classes: Sintaxis POO más clara (azúcar sintáctico sobre prototipos)

TypeScript

TypeScript es un superset de JavaScript con tipado estático:

• Ventajas:
  • Detecta errores en tiempo de desarrollo
  • Mejor autocompletado en IDEs
  • Refactoring más seguro
  • Documentación implícita (tipos)
• Adopción: Angular usa TypeScript por defecto, React/Vue lo soportan nativamente

// TypeScript: definición de tipo para paciente
interface Paciente {
  id: string;
  nombre: string;
  apellidos: string;
  fechaNacimiento: Date;
  nss: string;
  historiasClinicas: HistoriaClinica[];
}

function obtenerPaciente(id: string): Promise<Paciente> {
  return fetch(`/api/pacientes/${id}`)
    .then(response => response.json());
}

3.4. Lenguajes de Programación Servidor

PHP

Aunque ha perdido popularidad, PHP sigue siendo relevante:

• Uso actual: WordPress, Drupal, Laravel
• PHP 8+: JIT compiler, tipos union, atributos, match expressions
• En el SAS: Algunas aplicaciones legacy usan PHP

Python

Python es el rey en IA, data science y automatización:

• Frameworks web: Django (full-stack), Flask (micro), FastAPI (moderno, async)
• Uso en SAS:
  • Scripts de automatización (tareas cron, ETL)
  • Data Science: análisis de datos de salud, modelos predictivos
  • IA: NLP para análisis de textos clínicos, computer vision para radiología
  • APIs: FastAPI para microservicios

Node.js (JavaScript en servidor)

Node.js permite usar JavaScript en backend:

• Ventajas:
  • Mismo lenguaje frontend/backend (fullstack JS)
  • Event-driven, non-blocking I/O (excelente para alta concurrencia)
  • NPM: mayor ecosistema de paquetes del mundo
• Frameworks: Express.js (minimalista), NestJS (enterprise, TypeScript)

Java

Java sigue siendo pilar en enterprise y en el SAS:

• Framework principal: Spring Boot (microservicios, APIs REST)
• Uso en SAS:
  • Backend de Diraya (Java EE / Spring)
  • Integración con sistemas legacy (SOAP, JMS)
  • Batch jobs (procesamiento nocturno de datos)
  • Gestores documentales (Alfresco)
• Ventajas: Maduro, robusto, gran ecosistema, fuertemente tipado

🛠️4. Herramientas para Desarrollo y Gestión Web

4.1. Frameworks Frontend

React (Meta/Facebook)

• Paradigma: Componentes funcionales con hooks
• Ventajas: Virtual DOM (rendimiento), gran ecosistema, flexibilidad
• Curva de aprendizaje: Media (JSX confunde al principio)
• Uso SAS: Algunos portales modernos (ej: versiones recientes de ClicSalud+)

Angular (Google)

• Paradigma: Framework completo (opinionated)
• Ventajas: Todo incluido (routing, HTTP, forms), TypeScript obligatorio, arquitectura clara
• Curva de aprendizaje: Alta (complejo para empezar)
• Uso SAS: Aplicaciones enterprise (gestión interna, backoffice)

Vue.js

• Paradigma: Progressive framework (escalable desde pequeño a grande)
• Ventajas: Fácil de aprender, documentación excelente, rendimiento
• Curva de aprendizaje: Baja (más amigable que React/Angular)
• Uso SAS: Proyectos nuevos que priorizan rapidez de desarrollo

4.2. Frameworks Backend

4.3. Herramientas de Desarrollo

Git (Control de Versiones)

Git es el estándar de facto para control de versiones:

• Conceptos clave:
  • Repositorio: Almacén de código con historial completo
  • Commit: Snapshot de cambios con mensaje descriptivo
  • Branch: Línea de desarrollo paralela
  • Merge: Fusión de branches
  • Pull Request: Propuesta de cambios para revisión
• Flujos de trabajo:
  • Git Flow: master, develop, feature/*, release/*, hotfix/*
  • GitHub Flow: main + feature branches (más simple)
  • Trunk-based: Todos en main, integración continua

Docker (Contenedores)

Docker revolucionó el despliegue de aplicaciones:

• Concepto: Empaqueta aplicación + dependencias en un contenedor aislado
• Ventajas:
  • Portabilidad: «Funciona en mi máquina» → Funciona en cualquier lado
  • Consistencia: Mismo entorno dev/test/prod
  • Ligereza: Mucho más liviano que VMs
  • Escalabilidad: Fácil replicar contenedores
• Componentes:
  • Dockerfile: Receta para construir imagen
  • Imagen: Template inmutable
  • Contenedor: Instancia en ejecución de una imagen
  • Docker Compose: Orquestación multi-contenedor (dev/test)

Kubernetes (Orquestación de Contenedores)

Kubernetes (K8s) gestiona contenedores a escala de producción:

• Funcionalidades:
  • Self-healing: Reinicia contenedores fallidos
  • Scaling automático: Horizontal (más pods) y vertical (más recursos)
  • Load balancing: Distribuye tráfico entre pods
  • Rolling updates: Despliega sin downtime
  • Service discovery: DNS interno para servicios
• Componentes:
  • Pod: Unidad mínima (1+ contenedores)
  • Deployment: Gestiona replicación de pods
  • Service: Endpoint estable para pods
  • Ingress: Routing HTTP/HTTPS

4.4. Herramientas de Testing y Monitorización

Testing

Monitorización

• APM (Application Performance Monitoring):
  • Dynatrace: Observabilidad completa (usado en SAS para apps críticas)
  • New Relic: APM cloud-native
  • Datadog: Monitorización infra + apps
• Logs:
  • ELK Stack (Elasticsearch + Logstash + Kibana): Análisis de logs
  • Splunk: SIEM corporativo (usado en SAS para seguridad)
  • Graylog: Alternativa open source
• Métricas:
  • Prometheus: Scraping de métricas time-series
  • Grafana: Dashboards visuales
  • Zabbix: Monitorización infra (usado en SAS)

🔌5. Protocolos para Utilización en Internet

5.1. HTTP/HTTPS: Protocolo de Transferencia de Hipertexto

HTTP/1.1 (RFC 7230-7235)

HTTP/1.1 ha sido el estándar durante décadas, pero tiene limitaciones:

• Características:
  • Protocolo texto (legible por humanos)
  • Stateless (sin estado entre peticiones)
  • Conexiones persistentes (keep-alive)
  • Pipelining (envío múltiple sin esperar respuestas)
• Métodos principales:
  • GET: Obtener recurso (idempotente, cacheable)
  • POST: Crear recurso / enviar datos
  • PUT: Actualizar recurso completo (idempotente)
  • PATCH: Actualización parcial
  • DELETE: Eliminar recurso (idempotente)
  • HEAD: GET sin body (solo headers)
  • OPTIONS: Consultar métodos permitidos (CORS)
• Códigos de estado:
  • 1xx: Informativo (100 Continue, 101 Switching Protocols)
  • 2xx: Éxito (200 OK, 201 Created, 204 No Content)
  • 3xx: Redirección (301 Moved, 302 Found, 304 Not Modified)
  • 4xx: Error cliente (400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found)
  • 5xx: Error servidor (500 Internal, 502 Bad Gateway, 503 Service Unavailable)

HTTPS (HTTP over TLS/SSL)

HTTPS es HTTP cifrado mediante TLS (Transport Layer Security):

• Puerto: 443 (en lugar de 80 de HTTP)
• Handshake TLS:
  1. Cliente envía «Client Hello» (versiones TLS, cipher suites)
  2. Servidor responde «Server Hello» + certificado X.509
  3. Cliente valida certificado (cadena de confianza CA)
  4. Intercambio de claves (Diffie-Hellman, ECDHE)
  5. Derivación de session keys simétricas
  6. Comunicación cifrada con AES-GCM o ChaCha20-Poly1305
• Versiones TLS:
  • ❌ SSL 2.0/3.0: Obsoleto, vulnerable (POODLE)
  • ❌ TLS 1.0/1.1: Obsoleto desde 2020
  • ✓ TLS 1.2: Aceptable, ampliamente usado
  • ✓✓ TLS 1.3: Recomendado (más rápido, más seguro)

HTTP/2 (RFC 7540)

HTTP/2 resuelve limitaciones de HTTP/1.1:

HTTP/3 (RFC 9114)

HTTP/3 es la última evolución, basada en QUIC (protocolo de Google):

• Cambio radical: Usa UDP en lugar de TCP
• Ventajas:
  • Elimina head-of-line blocking a nivel de transporte
  • Conexión más rápida (0-RTT resumption)
  • Mejor en redes móviles (cambio de IP sin cortar conexión)
  • Cifrado obligatorio (TLS 1.3 integrado)
• Adopción: Creciente (Google, Facebook, Cloudflare ya lo usan)
• SAS: En evaluación para servicios públicos (ClicSalud+)

5.2. Protocolos de Seguridad: TLS/SSL y SSH

Ya cubiertos en apartados anteriores (HTTPS usa TLS, SFTP usa SSH).

5.3. Protocolos Modernos

WebSocket (RFC 6455)

WebSocket permite comunicación bidireccional full-duplex sobre HTTP:

• Uso: Chat en tiempo real, notificaciones push, dashboards live
• Ventaja vs HTTP: Sin polling, conexión persistente
• Handshake: HTTP Upgrade a WebSocket
• Caso SAS:
  • Notificaciones de citas en ClicSalud+
  • Alertas de urgencias en sistemas hospitalarios
  • Monitorización de constantes en UCI (tiempo real)

gRPC (Google Remote Procedure Call)

gRPC es un framework RPC moderno de alto rendimiento:

• Base: HTTP/2 + Protocol Buffers (binario)
• Ventajas:
  • Muy rápido (serialización binaria)
  • Streaming bidireccional
  • Fuertemente tipado (contract-first)
  • Multi-lenguaje (generación automática de clientes)
• Uso: Comunicación entre microservicios

MQTT (Message Queuing Telemetry Transport)

MQTT es protocolo ligero para IoT:

• Patrón: Publish/Subscribe (broker central)
• Ventajas: Muy ligero, funciona en redes con latencia/pérdidas, bajo consumo batería
• Uso SAS: Sensores IoMT, wearables, monitorización ambiental

5.4. APIs: REST, GraphQL, SOAP

REST (Representational State Transfer)

REST es un estilo arquitectónico para APIs:

• Principios:
  • Stateless: Cada petición es independiente
  • Cacheable: Respuestas cacheables si se especifica
  • Uniform interface: URIs para recursos, métodos HTTP estándar
  • Layered system: Cliente no sabe si habla con servidor final o intermediario
• Diseño de URIs:

  GET    /api/v1/pacientes           # Listar pacientes
  GET    /api/v1/pacientes/12345    # Obtener paciente específico
  POST   /api/v1/pacientes           # Crear paciente
  PUT    /api/v1/pacientes/12345    # Actualizar paciente completo
  PATCH  /api/v1/pacientes/12345    # Actualización parcial
  DELETE /api/v1/pacientes/12345    # Eliminar paciente

• Versionado: En URL (/api/v1/) o en header (Accept: application/vnd.sas.v1+json)

GraphQL

GraphQL es una alternativa a REST creada por Facebook:

• Ventaja principal: Cliente pide exactamente lo que necesita (evita over-fetching/under-fetching)
• Query language: Similar a JSON
• Single endpoint: 1 URL para todas las operaciones
• Uso: Frontend complejo con necesidades variables de datos

SOAP (Simple Object Access Protocol)

SOAP es el veterano, aún presente en sistemas legacy:

• Base: XML + HTTP/HTTPS
• WSDL: Descripción del servicio (contract-first)
• Ventajas: Fuertemente tipado, transacciones (WS-*), seguridad robusta (WS-Security)
• Desventajas: Pesado, verboso, complejo
• SAS: Integración con sistemas legacy (ej: prescripción electrónica antigua)

🏢6. Intranets y Extranets

6.1. Definiciones y Diferencias

6.2. Arquitectura y Componentes

Componentes de una Intranet Corporativa

• Portal corporativo: Punto de acceso único (SharePoint, Liferay)
• Directorio activo: Gestión centralizada de usuarios (Active Directory, LDAP)
• Servidores de aplicaciones: Backend de apps internas
• Bases de datos: Repositorio de información corporativa
• Almacenamiento compartido: File servers (SMB/CIFS, NFS)
• Correo interno: Exchange, Zimbra
• Colaboración: Microsoft Teams, Confluence, Jira

Arquitectura de Red

                        INTERNET
                           |
                      [FIREWALL]
                           |
                       [DMZ Zone]
                    (Servidores públicos)
                           |
                  [Firewall Interno]
                           |
                   [Red Corporativa]
              /                    \
         [VLAN Usuarios]       [VLAN Servidores]
      /        |        \          /         \
 [PC]     [Portátil]  [Móvil]  [App]    [Database]

6.3. Caso Específico: Red Corporativa del SSPA

6.4. Seguridad en Intranets/Extranets

VPN (Virtual Private Network)

VPN permite acceso seguro a la intranet desde fuera:

• Tipos:
  • Site-to-Site: Conecta redes completas (ej: sede Madrid – CPD Sevilla)
  • Remote Access: Usuarios individuales (ej: médico desde casa accediendo a Diraya)
• Protocolos:
  • ❌ PPTP: Obsoleto, inseguro
  • ✓ L2TP/IPsec: Bueno, compatible
  • ✓✓ OpenVPN: Excelente, flexible
  • ✓✓✓ WireGuard: Moderno, rápido, seguro
  • ✓✓✓ IPsec IKEv2: Enterprise, muy seguro
• SAS: Usa VPN SSL (Cisco AnyConnect) para acceso remoto + IPsec para site-to-site

Firewall

El firewall es la primera línea de defensa:

• Tipos:
  • Stateless: Filtra por reglas fijas (IP/puerto)
  • Stateful: Sigue el estado de conexiones TCP
  • Next-Gen (NGFW): Inspección profunda (DPI), IPS, antimalware, control apps
• Política por defecto: Deny all, permit by exception
• SAS: Palo Alto Networks (NGFW) en perímetro + firewalls internos (segmentación)

DMZ (Demilitarized Zone)

La DMZ es una zona intermedia entre Internet y la red interna:

• Propósito: Alojar servicios públicos sin exponer red interna
• Contenido típico: Web servers, mail gateway, proxy reverso, WAF
• Reglas firewall:
  • Internet → DMZ: Permitido (puertos específicos: 80, 443)
  • DMZ → Internet: Permitido (con restricciones)
  • DMZ → Red interna: MUY restringido (solo lo imprescindible)
  • Red interna → DMZ: Permitido
• SAS: ClicSalud+, web pública SAS, Portal Salud Responde en DMZ

Autenticación y Control de Acceso

• Single Sign-On (SSO): Autenticación única para múltiples aplicaciones
  • Protocolo: SAML 2.0 o OpenID Connect (OIDC)
  • SAS: IdP basado en Active Directory Federation Services (ADFS)
• Multi-Factor Authentication (MFA):
  • Algo que sabes (contraseña)
  • Algo que tienes (certificado digital, token, móvil)
  • Algo que eres (biometría)
  • SAS: Certificado digital (empleados) + OTP móvil (externos)
• Control de acceso basado en roles (RBAC):
  • Permisos asignados a roles, no a usuarios individuales
  • Ejemplo SAS: Médico, Enfermera, Administrativo, Gestor

♿7. Accesibilidad Web

La accesibilidad web es la práctica de hacer que los sitios web sean utilizables por todas las personas, incluidas aquellas con discapacidades. En la Administración Pública española, es OBLIGATORIA por ley.

7.1. Normativa de Accesibilidad

WCAG 2.1 (Web Content Accessibility Guidelines)

Las WCAG 2.1 son el estándar internacional del W3C (World Wide Web Consortium):

• Evolución: WCAG 1.0 (1999) → 2.0 (2008) → 2.1 (2018) → 2.2 (2023)
• Niveles de conformidad:
  • A: Nivel básico (requisitos mínimos)
  • AA: Nivel intermedio (exigido por ley en España)
  • AAA: Nivel avanzado (aspiracional, no siempre alcanzable)

Norma EN 301 549

Norma europea sobre accesibilidad de productos y servicios TIC:

• Incluye WCAG 2.1 nivel AA para contenido web
• Extiende requisitos a software no web, documentos, hardware
• Obligatoria en contratación pública UE desde 2019

Real Decreto 1112/2018

Normativa española sobre accesibilidad de sitios web y apps móviles del sector público:

• Ámbito: Toda la Administración Pública (incluido SAS)
• Requisitos:
  • Conformidad WCAG 2.1 nivel AA
  • Declaración de accesibilidad publicada (obligatoria)
  • Mecanismo de feedback para reportar problemas
  • Auditorías periódicas de accesibilidad
• Plazos:
  • Webs nuevas: 20 sept 2018
  • Webs existentes: 20 sept 2020
  • Apps móviles: 23 junio 2021
• Sanciones: Infracciones leves (1.000-10.000€), graves (10.001-100.000€), muy graves (>100.000€)

7.2. Principios POUR

Las WCAG se estructuran en 4 principios fundamentales (acrónimo POUR):

1. Perceptible (Perceivable)

La información debe poder ser percibida por todos los usuarios:

• Alternativas de texto (1.1):
  • Toda imagen debe tener atributo alt descriptivo
  • Imágenes decorativas: alt="" (vacío)
  • Imágenes complejas (gráficos): descripción larga
• Medios tempodependientes (1.2):
  • Subtítulos para vídeos
  • Audiodescripción para contenido visual
  • Transcripciones para audio
• Adaptable (1.3):
  • HTML semántico (no <div> para todo)
  • Orden lógico de lectura
  • No depender solo del aspecto visual (color, forma, posición)
• Distinguible (1.4):
  • Contraste suficiente: 4.5:1 texto normal, 3:1 texto grande (AA)
  • Texto redimensionable hasta 200% sin pérdida de funcionalidad
  • Audio de fondo controlable o ausente

2. Operable

Los componentes de interfaz deben ser operables:

• Accesible por teclado (2.1):
  • TODO debe ser usable solo con teclado
  • No «trampas de teclado» (poder salir de cualquier componente con teclado)
  • Orden de tabulación lógico
• Tiempo suficiente (2.2):
  • Sesiones sin límite de tiempo O advertencia/extensión
  • Pausar animaciones/carruseles automáticos
• Convulsiones (2.3):
  • NO destello más de 3 veces por segundo
• Navegable (2.4):
  • Skip links («Saltar al contenido»)
  • Títulos de página descriptivos
  • Focus visible en elemento activo
  • Enlaces con texto descriptivo (no «clic aquí»)
• Métodos de entrada (2.5 – WCAG 2.1):
  • Gestos complejos tienen alternativa simple
  • Cancelación de eventos pointer (no activar en down, sino en up)
  • Etiquetas visibles coinciden con nombres accesibles

3. Comprensible (Understandable)

La información y operación de la interfaz deben ser comprensibles:

• Legible (3.1):
  • Idioma de página especificado: <html lang="es">
  • Cambios de idioma marcados: <span lang="en">email</span>
• Predecible (3.2):
  • No cambios de contexto inesperados (al recibir foco, al escribir)
  • Navegación consistente en todo el sitio
• Asistencia a la entrada (3.3):
  • Identificar errores de forma clara
  • Etiquetas e instrucciones para formularios
  • Prevención de errores (confirmación antes de enviar)

4. Robusto

El contenido debe ser robusto para funcionar con tecnologías actuales y futuras:

• Compatible (4.1):
  • HTML válido (sin errores de parsing)
  • ARIA (Accessible Rich Internet Applications):
    • Roles: role="navigation", role="button"
    • Propiedades: aria-label, aria-labelledby
    • Estados: aria-expanded="true", aria-hidden="true"
  • Estado, propiedades y valores correctamente comunicados a tecnologías asistivas

7.3. Casos Prácticos de Accesibilidad en el SAS

7.4. Herramientas de Evaluación de Accesibilidad

🎨8. Usabilidad Web

La usabilidad es la facilidad con la que los usuarios pueden usar un sistema para lograr sus objetivos. Mientras accesibilidad se centra en «poder usar», usabilidad se centra en «usar eficientemente y con satisfacción».

8.1. Definición y Principios (ISO 9241-11)

Según ISO 9241-11, usabilidad es el grado en que un producto puede ser usado por usuarios específicos para lograr objetivos específicos con efectividad, eficiencia y satisfacción en un contexto específico.

• Efectividad: El usuario completa la tarea correctamente
• Eficiencia: Lo hace en tiempo razonable con esfuerzo razonable
• Satisfacción: La experiencia es positiva (UX)

8.2. Principios de Diseño UX/UI

Ley de Fitts

El tiempo para alcanzar un objetivo depende de la distancia y tamaño del objetivo:

• Implicación: Botones importantes deben ser grandes y cerca del usuario
• Ejemplo: Botón «Confirmar cita» grande y en posición cómoda

Ley de Hick

El tiempo de decisión aumenta logarítmicamente con el número de opciones:

• Implicación: Reducir opciones en cada paso
• Ejemplo: Wizard de cita previa en pasos (especialidad → centro → fecha → hora)

Principio de Jakob (Jakob’s Law)

Los usuarios pasan la mayor parte del tiempo en otros sitios:

• Implicación: Seguir convenciones (logo arriba izquierda, menú arriba o izquierda, buscador arriba derecha)
• No reinventes patrones sin muy buena razón

Regla de los 3 Clics

Usuario debería encontrar cualquier información en ≤ 3 clics:

• Más importante que el número: claridad del camino
• Jerarquía de información clara

8.3. Patrones de Diseño Web

Estructura de Página Típica

┌─────────────────────────────────────────────────┐
│  HEADER (Logo, Navegación, Búsqueda, Login)    │
├─────────────────────────────────────────────────┤
│  BREADCRUMBS (Inicio > Sección > Subsección)   │
├───────────────┬─────────────────────────────────┤
│               │                                 │
│  SIDEBAR      │   CONTENIDO PRINCIPAL           │
│  (Menú        │   (Texto, imágenes, forms)      │
│   secundario, │                                 │
│   filtros)    │                                 │
│               │                                 │
├───────────────┴─────────────────────────────────┤
│  FOOTER (Enlaces legales, Contacto, Redes)     │
└─────────────────────────────────────────────────┘

Patrones de Navegación

• Barra de navegación horizontal: Para sitios con pocas secciones principales
• Menú lateral: Para sitios con mucho contenido jerárquico
• Hamburger menu: Para móviles (3 líneas horizontales)
• Mega menú: Dropdown grande con subsecciones (para sites complejos)
• Breadcrumbs: Migas de pan (mostrar ubicación en jerarquía)

Patrones de Formulario

• Validación inline: Feedback inmediato al salir del campo
• Labels sobre inputs: Mejor que a la izquierda (móvil)
• Inputs agrupados: Fieldsets para secciones relacionadas
• Indicador de progreso: En formularios multi-paso
• Mensajes de error claros: Qué está mal + cómo corregirlo

8.4. Responsive Design y Mobile First

Responsive Web Design (RWD)

Diseño que se adapta al tamaño de pantalla:

• Técnicas:
  • Fluid grids: Layouts basados en % en lugar de px fijos
  • Imágenes flexibles: max-width: 100%;
  • Media queries: CSS diferente según viewport

/* Mobile first: estilos base para móvil */
.container {
  width: 100%;
  padding: 15px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

Mobile First

Filosofía de diseñar primero para móvil, luego expandir a desktop:

• Ventajas:
  • Obliga a priorizar contenido (en móvil no cabe todo)
  • Mejor performance (CSS básico primero, enhancements después)
  • Alineado con uso real (más del 60% de tráfico web es móvil)
• En sanidad: Profesionales acceden a Diraya desde tablets en planta, pacientes a ClicSalud+ desde móviles

8.5. Métricas de Usabilidad

Testing de Usabilidad

• Test moderado: Observador guía al usuario, hace preguntas
• Test no moderado: Usuario hace tareas solo, se graba pantalla + voz
• Test A/B: Comparar dos variantes, ver cuál funciona mejor
• Eye tracking: Seguimiento de mirada (qué miran primero)
• Mapas de calor: Dónde hacen clic los usuarios (Hotjar, Crazy Egg)

🏥9. Aplicación en el SAS: Casos Prácticos

🎯10. Conclusiones y Retos Futuros

Ideas Clave del Tema

1. Internet es la columna vertebral del SAS: Desde Diraya hasta ClicSalud+, todo depende de protocolos y servicios de Internet funcionando 24/7.
2. Seguridad es NO negociable: ENS MEDIO obliga a TLS 1.2+, SFTP/FTPS (nada de FTP), autenticación fuerte, auditorías continuas.
3. Accesibilidad es OBLIGATORIA: WCAG 2.1 AA por RD 1112/2018. No es opcional. Auditorías + declaración publicada.
4. Usabilidad = Eficiencia asistencial: Una interfaz mal diseñada ralentiza la atención sanitaria. Diraya se usa miles de veces al día.
5. Tendencias que debes conocer: HTTP/2-3, IPv6, 5G, Edge Computing, IA generativa, Zero Trust. Aparecen en examen.

Retos Futuros para el TFA-STI en el SAS

• Migración a Cloud Híbrido: Parte de sistemas a cloud público (Azure/AWS) manteniendo core on-premise. Reto de integración y seguridad.
• Interoperabilidad Total: Adopción completa de HL7 FHIR para compartir datos con otras CCAA y nivel estatal (Historia Clínica Digital SNS).
• Ciberseguridad Avanzada: Aumento de ataques ransomware a sanidad. Necesidad de SOC 24/7, EDR en endpoints, SIEM con IA.
• IA Responsable: Implementar IA para diagnóstico asistido, predicción de riesgo, optimización de recursos… pero con ética y transparencia.
• 5G y Telemedicina: Consultas remotas en tiempo real, cirugía asistida por robot, ambulancias conectadas. Requiere red 5G y aplicaciones de baja latencia.
• Accesibilidad Universal: No solo cumplir norma, sino diseñar pensando en todos: ancianos, discapacitados, extranjeros, nivel educativo bajo.

Consejos para el Examen