Tema 47 – Web e Internet – TFA-STI SAS

Tema 47 –

Arquitecturas, Lenguajes, Herramientas y Protocolos para Internet

Desarrollo de HTML5, HTTP, XML, AJAX, Web Semántica con Cuestionario 30 preguntas, Mapa Conceptual y Referencias Bibliográficas para TFA-STI SAS

PARTE 1: CONTENIDOS TEÓRICOS

1. HTML5: ESPECIFICACIÓN COMPLETA

1.1 Historia y Evolución de HTML

HTML 1.0 (1993): Versión inicial, 18 etiquetas básicas
HTML 2.0 (1995): Estándar oficial, introducción de formularios
HTML 3.2 (1997): Tablas, applets, CSS básico
HTML 4.01 (1999): CSS avanzado, XHTML 1.0 como XML
XHTML 1.0 (2000): Reformulación XML de HTML 4.01
HTML5 (2014-actual): Estándar vivo W3C, semántica, APIs nativas

1.2 Estructura Básica HTML5 Detallada

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Descripción página">
    <meta name="keywords" content="palabras clave">
    <title>Título de la Página (SEO Crítico)</title>
    <link rel="stylesheet" href="estilos.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- Contenido -->
  </body>
</html>

1.3 Etiquetas Semánticas HTML5 Exhaustivas

Etiquetas de Estructura de Página:

Etiqueta	Descripción	Ubicación Típica	Ejemplo Contenido
<header>	Encabezado página/sección. No confundir con <head>	Inicio <body>	Logo, título, slogan, menú superior
<nav>	Barra navegación. Puede múltiples en página	Dentro header o sidebar	Enlaces menú, categorías, sitemap
<main>	Contenido principal página. ÚNICO por documento	Cuerpo principal	Artículos, contenido principal
<article>	Contenido independiente y autocontenible	Dentro <main> o <section>	Artículo blog, comentario, reseña
<section>	Sección temática de contenido	Dentro <main>	Agrupación de contenido relacionado
<aside>	Contenido lateral, relacionado indirectamente	Lado página	Sidebar, anuncios, widgets
<footer>	Pie página o sección	Final <body>	Copyright, contacto, enlaces, redes sociales
<address>	Información contacto/ubicación autor	Dentro <footer> o <article>	Email, teléfono, dirección física

Etiquetas de Contenido Semántico:

<h1> a <h6>: Encabezados jerárquicos. <h1> único por página para SEO
<p>: Párrafos de texto
<strong>: Énfasis fuerte (importancia, típicamente negrita)
<em>: Énfasis (énfasis, típicamente itálica)
<mark>: Texto resaltado o marcado
<code>: Código de computadora
<pre>: Texto preformateado, espacios preservados
<blockquote>: Cita de bloque, con atributo cite
<figure> + <figcaption>: Figura/imagen con descripción
<time>: Fecha/hora con atributo datetime

Etiquetas Multimedia HTML5:

<video>: Contenido video. Atributos: src, width, height, controls, autoplay, loop, muted
<audio>: Contenido audio. Atributos: src, controls, autoplay, loop
<canvas>: Área para dibujar gráficos JavaScript (2D/3D con WebGL)
<svg>: Gráficos vectoriales escalables
<source>: Especifica múltiples fuentes para video/audio
<track>: Subtítulos/capas video (WebVTT format)

1.4 Atributos Globales HTML5 Críticos

id: Identificador único elemento. Crucial para JavaScript, CSS
class: Clase para aplicar estilos CSS múltiples
data-*: Atributos personalizados para datos JavaScript
aria-*: Atributos accesibilidad (ARIA = Accessible Rich Internet Applications)
title: Tooltip información adicional
lang: Idioma contenido (para SEO y screen readers)

1.5 APIs HTML5 Nativas (Sin JavaScript Externo)

Geolocalización: <input type=»location»> acceso GPS usuario
Storage Local: localStorage, sessionStorage para persistencia datos cliente
Web Workers: Ejecución JavaScript multihilo en background
WebSockets: Comunicación bidireccional tiempo real cliente-servidor
Drag & Drop: Arrastrar soltar elementos nativamente
Historial: history API para navegación sin recargar

2. PROTOCOLO HTTP: ANÁLISIS EXHAUSTIVO

2.1 Versiones HTTP Detalladas

HTTP/1.0 (1996)

Primera versión comercial
Conexión TCP por cada solicitud (ineficiente)
Solo 3 métodos: GET, POST, HEAD
Sin soporte caché persistente

HTTP/1.1 (1997-2015)

Conexiones Persistentes: Keep-Alive permite múltiples solicitudes en conexión TCP
Pipelining: Enviar múltiples solicitudes sin esperar respuestas (problemático)
Métodos Adicionales: PUT, DELETE, OPTIONS, TRACE, CONNECT, PATCH
Caché Avanzado: ETags, Cache-Control, Last-Modified
Compresión: gzip, deflate para reducir tamaño
Limitación Crítica: Head-of-Line Blocking (una solicitud lenta bloquea otras)

HTTP/2 (2015)

Basado en SPDY (Google)
Formato Binario: No texto como HTTP/1.1 (menor tamaño, más rápido parseo)
Multiplexación Real: Múltiples solicitudes simultáneamente en conexión TCP sin bloqueo
Compresión HPACK: Headers comprimidos dinámicamente, reducción 85-90%
Server Push: Servidor envía recursos proactivamente sin esperar solicitud
Priorización Streams: Recursos críticos primero
TLS Obligatorio en Navegadores: Seguridad mejorada

HTTP/3 (2018 – RFC 9000)

Basado en QUIC (UDP): Reemplaza TCP por UDP + QUIC para menor latencia
0-RTT: Zero Round Trip Time. Conexión instantánea sin handshake
Sin Head-of-Line Blocking: Paquete perdido no bloquea otros streams
Connection Migration: Cambio red (WiFi → 4G) sin desconectar
Recuperación Pérdidas Eficiente: Algoritmo adaptativo
Adopción Creciente: Chrome, Firefox, CloudFlare lo soportan

2.2 Métodos HTTP Profundo

Método	Seguro	Idempotente	Cacheable	Descripción
GET	Sí	Sí	Sí	Recuperar recurso. Datos en URL (limitado ~2KB). No modificar servidor
POST	No	No	Depende	Enviar datos crear recurso. Datos en cuerpo (sin límite). Modifica servidor
PUT	No	Sí	No	Reemplazar COMPLETAMENTE recurso. Requiere representación completa
PATCH	No	No*	No	Actualizar PARCIALMENTE recurso. JSON Patch o estrategia custom
DELETE	No	Sí	No	Eliminar recurso. Devuelve 200/204 si exitoso
HEAD	Sí	Sí	Sí	Como GET pero sin cuerpo respuesta. Verificar existencia recurso
OPTIONS	Sí	Sí	No	Describir opciones comunicación. Crítico para CORS preflight
CONNECT	No	No	No	Túnel proxy. Para HTTPS a través proxy HTTP
TRACE	Sí	Sí	No	Ecoear solicitud. Diagnóstico. Riesgo seguridad, deshabilitado

2.3 Códigos Estado HTTP Profundo

2xx (Éxito):

200 OK: Solicitud exitosa, respuesta con cuerpo
201 Created: Recurso creado exitosamente, Location header con URI nuevo
204 No Content: Éxito pero sin cuerpo respuesta (típico DELETE exitoso)
206 Partial Content: Contenido parcial, para descargas reanudables

3xx (Redirección):

301 Moved Permanently: Recurso movido permanentemente, cambiar URL futura
302 Found: Redirección temporal
304 Not Modified: Caché válido, no reenviar contenido
307 Temporary Redirect: Como 302 pero mantiene método HTTP original

4xx (Error Cliente):

400 Bad Request: Solicitud mal formada, error sintaxis
401 Unauthorized: Autenticación requerida, credenciales inválidas
403 Forbidden: Autenticado pero sin permiso acceso
404 Not Found: Recurso no existe
409 Conflict: Conflicto con estado actual (ej: versión documento obsoleta)
429 Too Many Requests: Rate limit excedido

5xx (Error Servidor):

500 Internal Server Error: Error genérico servidor
502 Bad Gateway: Gateway/proxy recibió respuesta inválida upstream
503 Service Unavailable: Servidor no disponible (mantenimiento, sobrecarga)
504 Gateway Timeout: Timeout esperando respuesta upstream

2.4 Estructura Mensaje HTTP

Solicitud HTTP:

GET /api/pacientes/123 HTTP/1.1
Host: sas.juntadeandalucia.es
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer token_jwt_aqui
Content-Length: 0

(cuerpo solicitud vacío para GET)

Respuesta HTTP:

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 285
Cache-Control: max-age=3600
Set-Cookie: sessionid=abc123; Path=/; HttpOnly
Access-Control-Allow-Origin: *

{
  "id": 123,
  "nombre": "Juan García",
  "edad": 45,
  "diagnostico": "Hipertensión"
}

3. XML: LENGUAJE DATOS ESTRUCTURADOS

3.1 Estructura XML Profunda

Componentes XML:

Declaración: <?xml version=»1.0″ encoding=»UTF-8″?>
Prolog: Declaración + DTD/XSD referencia
Elemento Raíz: Un único elemento contiene todos otros
Elementos Anidados: Jerarquía de contenedor
Atributos: Pares nombre-valor en etiquetas <elem attr=»valor»>
Comentarios: <!– comentario –>
CDATA: <![CDATA[contenido sin escapar]]>
Namespaces: xmlns prefijos para evitar conflictos nombres

Ejemplo XML Paciente SAS:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="paciente.xsl"?>

<clinica xmlns="http://sas.junta-andalucia.es/clinica"
         xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <paciente id="P123">
    <datos-personales>
      <nombre>Juan García López</nombre>
      <dni>12345678A</dni>
      <fecha-nacimiento>1980-05-15</fecha-nacimiento>
      <genero>M</genero>
    </datos-personales>
    <diagnosticos>
      <diagnostico tipo="principal" fecha="2023-01-10">
        Hipertensión Arterial
      </diagnostico>
      <diagnostico tipo="secundario">
        Diabetes Mellitus Tipo 2
      </diagnostico>
    </diagnosticos>
    <medicamentos>
      <medicamento>
        <nombre>Lisinopril</nombre>
        <dosis>10mg</dosis>
        <frecuencia>Diaria</frecuencia>
      </medicamento>
    </medicamentos>
  </paciente>
</clinica>

3.2 DTD vs XSD: Comparativa Detallada

Aspecto	DTD (Document Type Definition)	XSD (XML Schema Definition)
Antigüedad	Antigua (SGML, 1986)	Moderna (W3C, 2001)
Formato	Propio, no-XML	XML válido
Tipos Datos	Limitados (solo strings)	Complejos (integer, date, custom)
Restricciones	Básicas (?, *, +)	Avanzadas (minLength, pattern, enumeration)
Herencia	No soporta	Extensión y restricción de tipos
Namespaces	No soporta bien	Soporte completo
Validadores	Menos herramientas	Amplio soporte editores, lenguajes
Recomendación	Legacy, no usar en nuevo	Estándar moderno, usar siempre

3.3 XSD Ejemplo Completo Detallado

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
           targetNamespace="http://sas.junta-andalucia.es/clinica"
           xmlns="http://sas.junta-andalucia.es/clinica"
           elementFormDefault="qualified">

  <xs:element name="paciente">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="nombre" type="xs:string" minOccurs="1" maxOccurs="1"/>
        <xs:element name="dni" type="TipoDNI" minOccurs="1"/>
        <xs:element name="fecha-nacimiento" type="xs:date"/>
        <xs:element name="edad" type="xs:integer" minOccurs="0">
          <xs:restriction base="xs:integer">
            <xs:minInclusive value="0"/>
            <xs:maxInclusive value="150"/>
          </xs:restriction>
        </xs:element>
        <xs:element name="genero" type="TipoGenero"/>
      </xs:sequence>
      <xs:attribute name="id" type="xs:ID" use="required"/>
    </xs:complexType>
  </xs:element>

  <xs:simpleType name="TipoDNI">
    <xs:restriction base="xs:string">
      <xs:pattern value="[0-9]{8}[A-Z]"/>
      <xs:minLength value="9"/>
      <xs:maxLength value="9"/>
    </xs:restriction>
  </xs:simpleType>

  <xs:simpleType name="TipoGenero">
    <xs:restriction base="xs:string">
      <xs:enumeration value="M"/>
      <xs:enumeration value="F"/>
      <xs:enumeration value="Otro"/>
    </xs:restriction>
  </xs:simpleType>

</xs:schema>

3.4 WSDL y SOAP: Web Services

WSDL (Web Services Description Language): Lenguaje XML para describir servicios web SOAP.

Secciones WSDL Principal:

<types>: Definiciones tipos datos (XSD embedded)
<message>: Estructura mensajes entrada/salida
<portType>: Operaciones disponibles (interfaz)
<binding>: Especifica cómo invocar (SOAP binding típico)
<service>: Ubicación física servicio (endpoint URL)

4. DESARROLLO WEB CLIENTE (FRONTEND) PROFUNDO

4.1 AJAX: Asynchronous JavaScript And XML

Evolución Tecnología AJAX:

XMLHttpRequest (2005): API original, callback-based, verboso
jQuery $.ajax (2010): Wrapper jQuery, más simple
Fetch API (2015): API moderna, Promise-based, async/await
axios (2014-actual): Librería HTTP client, interceptors

Fetch API Completo:

// GET simple
fetch('/api/pacientes')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// POST con datos
const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token_jwt'
  },
  body: JSON.stringify({
    nombre: 'Juan',
    edad: 45
  })
};

fetch('/api/pacientes', options)
  .then(res => res.json())
  .then(json => console.log('Creado:', json));

// Async/Await (recomendado)
async function obtenerPacientes() {
  try {
    const response = await fetch('/api/pacientes');
    if (!response.ok) throw new Error('Network response error');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetch:', error);
  }
}

4.2 Single Page Application (SPA)

SPA Características:

Carga HTML/CSS/JS inicial única vez
JavaScript maneja enrutamiento (no recarga servidor)
AJAX obtiene datos, actualiza DOM dinámicamente
Experiencia fluida como aplicación desktop
Ejemplos: Gmail, Google Maps, Facebook, Twitter

Frameworks SPA Principal:

React (Facebook): Componentes, Virtual DOM, JSX
Angular (Google): Framework completo, TypeScript
Vue.js: Más simple que Angular, reactivo
Svelte: Compilador, código menos JavaScript

4.3 Validación Formularios Cliente

// HTML5 validación nativa
<form>
  <input type="email" required pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$">
  <input type="number" min="0" max="150">
  <input type="date">
  <input type="tel" pattern="[0-9]{9}">
  <button type="submit">Enviar</button>
</form>

// JavaScript validación custom
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const email = form.email.value;
  if (!email.includes('@')) {
    alert('Email inválido');
    return;
  }
  // Enviar datos AJAX
  fetch('/submit', {method: 'POST', body: new FormData(form)});
});

5. DESARROLLO WEB SERVIDOR (BACKEND) PROFUNDO

5.1 Arquitectura REST API

Principios REST (Representational State Transfer):

Recursos: Todo es recurso (pacientes, citas, recetas). Identificados por URI
Representación: Recursos representados JSON/XML/HTML
Métodos HTTP: GET (read), POST (create), PUT (replace), DELETE (delete)
Stateless: Cada solicitud contiene toda información, sin sesión servidor
Cacheable: Respuestas pueden cachearse (HTTP headers)

Ejemplo API REST Hospital:

// Estructura URLs RESTful
GET    /api/v1/pacientes              // Listar todos pacientes
GET    /api/v1/pacientes/123          // Obtener paciente específico
GET    /api/v1/pacientes/123/citas    // Citas del paciente 123
POST   /api/v1/pacientes              // Crear nuevo paciente
PUT    /api/v1/pacientes/123          // Actualizar paciente 123
DELETE /api/v1/pacientes/123          // Eliminar paciente 123
PATCH  /api/v1/pacientes/123          // Actualizar parcialmente

// Respuesta JSON típica
GET /api/v1/pacientes/123

{
  "id": 123,
  "nombre": "Juan García",
  "email": "juan@example.com",
  "telefono": "123456789",
  "edad": 45,
  "diagnosticos": [
    {"id": 1, "nombre": "Hipertensión", "fecha": "2023-01-10"},
    {"id": 2, "nombre": "Diabetes", "fecha": "2023-02-15"}
  ],
  "_links": {
    "self": {"href": "/api/v1/pacientes/123"},
    "citas": {"href": "/api/v1/pacientes/123/citas"},
    "expediente": {"href": "/api/v1/pacientes/123/expediente"}
  }
}

CUESTIONARIO EXHAUSTIVO (30 PREGUNTAS)

Pregunta 1: ¿Cuál es la principal ventaja de HTML5 sobre HTML4?

A) Velocidad de renderizado más rápida

B) Etiquetas semánticas que describen contenido, mejorando SEO y accesibilidad

C) Menor tamaño de archivos

D) Soporte para Flash nativo

Respuesta Correcta: B

HTML5 introduce etiquetas semánticas (<header>, <nav>, <main>, <article>, <footer>) que permiten máquinas y motores búsqueda entender significado estructura página.

Pregunta 2: ¿Qué es HTTP/2 y cuál es su ventaja principal sobre HTTP/1.1?

A) Soporte para HTTPS obligatorio

B) Multiplexación real: múltiples solicitudes simultáneamente en conexión TCP sin Head-of-Line blocking

C) Mayor seguridad en transmisión

D) Compatibilidad con navegadores antiguos

Respuesta Correcta: B

HTTP/2 usa multiplexación binaria eliminando Head-of-Line blocking. Múltiples solicitudes en paralelo. Compresión HPACK headers reduce 85-90% tamaño.

Pregunta 3: ¿Cuál es la diferencia crítica entre HTTP/2 e HTTP/3?

A) HTTP/2 usa TCP; HTTP/3 usa QUIC sobre UDP

B) HTTP/3 es más lento

C) HTTP/2 soporta navegadores antiguos

D) No hay diferencia significativa

Respuesta Correcta: A

HTTP/3 usa QUIC (UDP) en lugar TCP. Beneficios: 0-RTT conexión instantánea, sin Head-of-Line blocking UDP-level, recovery pérdidas eficiente, connection migration.

Pregunta 4: ¿Qué método HTTP se usa para crear un nuevo recurso?

A) GET

B) PUT

C) POST

D) DELETE

Respuesta Correcta: C

POST envía datos crear nuevo recurso. Datos en cuerpo solicitud. No-idempotente (llamadas múltiples = múltiples recursos). Devuelve típicamente 201 Created.

Pregunta 5: ¿Cuál es la diferencia entre PUT y PATCH?

A) No hay diferencia

B) PUT reemplaza COMPLETAMENTE; PATCH actualiza PARCIALMENTE

C) PATCH es más seguro

D) PUT solo para DELETE

Respuesta Correcta: B

PUT: Actualización completa recurso, requiere representación completa. PATCH: Actualización parcial, solo cambios necesarios. PATCH menos ancho de banda.

Pregunta 6: ¿Qué código HTTP indica que recurso fue movido permanentemente?

A) 302

B) 404

C) 301

D) 500

Respuesta Correcta: C

301 Moved Permanently: recurso movido, cliente debe actualizar bookmarks. 302 Found es redirección temporal. 301 importante SEO.

Pregunta 7: ¿Qué significa DTD en XML?

A) Data Transfer Definition

B) Document Type Definition – define estructura XML permitida

C) Dynamic Type Description

D) Data Type Database

Respuesta Correcta: B

DTD (Document Type Definition) define estructura, elementos, atributos permitidos en XML. Forma antigua, reemplazada por XSD moderno.

Pregunta 8: ¿Cuál es la principal ventaja de XSD sobre DTD?

A) DTD es más moderno

B) XSD soporta tipos datos complejos, restricciones avanzadas, es XML-based

C) DTD es más rápido

D) XSD solo para SOAP

Respuesta Correcta: B

XSD: Tipos complejos (integer, date, custom), restricciones (minLength, pattern, enumeration), herencia, namespaces. DTD limitado. XSD estándar moderno.

Pregunta 9: ¿Qué es WSDL?

A) Lenguaje marcas para datos

B) Web Services Description Language – describe servicios web SOAP

C) Protocolo seguro web

D) Formato compresión datos

Respuesta Correcta: B

WSDL (XML) describe servicios SOAP: tipos datos (XSD), mensajes, operaciones, binding (SOAP), endpoints. Permite generar clientes automáticamente.

Pregunta 10: ¿Qué es AJAX en desarrollo web?

A) Producto limpieza desinfectante

B) Asynchronous JavaScript And XML – peticiones asincrónicas sin recargar página

C) Protocolo red nuevo

D) Lenguaje programación

Respuesta Correcta: B

AJAX permite solicitar datos servidor asincronamente (sin recargar). Tecnologías: XMLHttpRequest, Fetch API, async/await. Experiencia usuario fluida.

Pregunta 11: ¿Cuál es la principal diferencia entre XMLHttpRequest y Fetch API?

A) XMLHttpRequest es más moderno

B) Fetch API es Promise-based, soporta async/await, sintaxis más limpia

C) XMLHttpRequest más rápido

D) No hay diferencia

Respuesta Correcta: B

Fetch API (2015) reemplaza XMLHttpRequest: Promises, async/await, mejor sintaxis. XMLHttpRequest callback-based, verboso. Fetch estándar moderno.

Pregunta 12: ¿Qué es SPA (Single Page Application)?

A) Sitio con página única

B) Aplicación web carga HTML/CSS/JS inicial, después AJAX actualiza dinámicamente

C) Aplicación solo servidor

D) Página estática sin JavaScript

Respuesta Correcta: B

SPA: Carga inicial HTML completo, enrutamiento JavaScript, AJAX obtiene datos. Experiencia fluida desktop. Ejemplos: Gmail, Google Maps, Facebook.

Pregunta 13: ¿Cuál es la arquitectura Cliente-Servidor típica en web?

A) Cliente ejecuta toda lógica

B) Cliente (navegador HTML/CSS/JS) → HTTP → Servidor (procesa) → BD

C) Todo código servidor

D) Peer-to-peer sin servidor

Respuesta Correcta: B

Arquitectura web: Cliente (navegador) interpreta HTML/CSS, ejecuta JavaScript. HTTP comunica. Servidor procesa lógica, accede BD. Responde HTML/JSON/XML.

Pregunta 14: ¿Qué es REST en desarrollo APIs?

A) Descansar durante codificación

B) Representational State Transfer – arquitectura APIs usando HTTP métodos en recursos URL

C) Protocolo seguridad datos

D) Base datos NoSQL

Respuesta Correcta: B

REST: Recursos en URLs (/api/pacientes), operaciones HTTP GET/POST/PUT/DELETE, stateless, responses típicamente JSON. API RESTful estándar moderno.

Pregunta 15: ¿Qué es JWT en autenticación web?

A) Protocolo encriptación

B) JSON Web Token – token autenticación stateless con header.payload.signature

C) Base datos documento

D) Formato compresión

Respuesta Correcta: B

JWT: Token JSON codificado. Estructura: header (algoritmo), payload (claims), signature (validación). Cliente envía Authorization header. Servidor valida sin sesión.

Pregunta 16: ¿Qué es CORS?

A) Tipo malware

B) Cross-Origin Resource Sharing – permite peticiones entre dominios controladamente

C) Protocolo antiguo internet

D) Formato almacenamiento

Respuesta Correcta: B

CORS (HTTP headers): Permite solicitudes AJAX entre dominios. Servidor responde Access-Control-Allow-Origin. Navegador envía preflight OPTIONS. Seguridad contra ataques.

Pregunta 17: ¿Cuál es la principal característica semántica de <header> en HTML5?

A) Define sección contenido principal

B) Encabezado página/sección con logo, título, menú. Diferente <head>

C) Solo para estilos CSS

D) Obsoleto en HTML5

Respuesta Correcta: B

<header> etiqueta semántica para encabezado página (logo, título, navegación). NO confundir <head> (metadatos). Mejora SEO y accesibilidad.

Pregunta 18: ¿Cuál es el único elemento <main> permitido por página HTML5?

A) Pueden múltiples <main>

B) UNO SOLO <main> por documento. Contenido principal único

C) No hay límite

D) Nunca usar <main>

Respuesta Correcta: B

<main> contenido principal página. ÚNICO por documento (validación WCAG). Mejora lectores pantalla. Diferente <section>, <article> múltiples permitidos.

Pregunta 19: ¿Qué es Web Semántica?

A) Optimizar solo para Google

B) Estructura web datos significado máquinas/humanos entienden

C) Nueva versión HTML

D) Protocolo seguridad

Respuesta Correcta: B

Web Semántica: RDF, OWL, JSON-LD, Schema.org, microdata. Máquinas interpretan significado. Búsqueda inteligente, Linked Data, entidades relacionadas.

Pregunta 20: ¿Qué es RDF en web semántica?

A) Formato imagen

B) Resource Description Framework – modelo triple (Sujeto-Predicado-Objeto)

C) Protocolo red

D) Lenguaje programación

Respuesta Correcta: B

RDF triple: (Sujeto, Predicado, Objeto). Ej: (Juan, tieneEdad, 30). Base web semántica. Permite máquinas comprender relaciones datos.

Pregunta 21: ¿Qué es JSON-LD?

A) Lenguaje programación

B) JSON + Linked Data – incrusta datos semánticos estructurados en JSON

C) Base datos

D) Protocolo transferencia

Respuesta Correcta: B

JSON-LD: Datos semánticos en JSON. Contexto (@context), tipo (@type), propiedades. Compatible JSON APIs. Mejor que XML-RDF para APIs modernas.

Pregunta 22: ¿Qué es Schema.org?

A) Base datos relacional

B) Vocabulario compartido estándares descripción contenido web

C) Protocolo comunicación

D) Lenguaje marcas

Respuesta Correcta: B

Schema.org: Vocabulario colaborativo (Google, Bing, Yandex, Facebook). Clases: Person, Organization, Event, Place. Propiedades: name, description, address.

Pregunta 23: ¿Qué es microdata en HTML5?

A) Datos muy pequeños

B) Atributos HTML5 incrusta datos estructurados: itemtype, itemsync, itemprop

C) Base datos

D) Protocolo datos

Respuesta Correcta: B

Microdata: HTML5 atributos especiales. itemtype (vocabulario Schema.org), itemprop (propiedades). Válido HTML5. Parseable máquinas, buscadores.

Pregunta 24: ¿Qué es HTTPS?

A) Versión mejorada HTML

B) HTTP Seguro – HTTP + encriptación SSL/TLS certificado digital

C) Protocolo enviar archivos

D) Formato almacenamiento

Respuesta Correcta: B

HTTPS: HTTP + SSL/TLS encriptación. Certificado digital verifica servidor. Datos encriptados tránsito. Crítico e-commerce, banca, datos sensibles. Indicador navegador.

Pregunta 25: ¿Cuál es la diferencia entre etiqueta <section> y <article> en HTML5?

A) Son iguales

B) <section> agrupa contenido relacionado; <article> contenido independiente autocontenible

C) <article> solo para noticias

D) <section> obsoleto

Respuesta Correcta: B

<section>: Sección temática contenido relacionado. <article>: Contenido independiente, sindicalizable (blog post, comentario, reseña).

Pregunta 26: ¿Qué ventaja tiene validación HTML5 cliente vs servidor?

A) Client side suficiente, no necesario servidor

B) Client rápido, pero servidor OBLIGATORIO por seguridad (cliente manipulable)

C) Servidor puede hacerlo solo

D) No hay diferencia

Respuesta Correcta: B

Validación cliente: Experiencia usuario (feedback inmediato). Validación servidor: OBLIGATORIA (seguridad, usuario puede modificar HTML). Usar AMBAS.

Pregunta 27: ¿Qué framework SPA es más usado actualmente?

A) jQuery (desactualizado)

B) React (Facebook), Angular (Google), Vue.js – React dominante

C) Flash (obsoleto)

D) No existen frameworks SPA

Respuesta Correcta: B

React dominante (componentes, Virtual DOM). Angular completo pero complejo. Vue.js más simple. Svelte compilador. Elegir según proyecto necesidades.

Pregunta 28: ¿Cuál es código estado para solicitud sin autenticación?

A) 403 Forbidden

B) 401 Unauthorized – autenticación requerida, credenciales inválidas

C) 404 Not Found

D) 500 Server Error

Respuesta Correcta: B

401 Unauthorized: Autenticación requerida pero no proporcionada/inválida. 403 Forbidden: Autenticado pero sin permisos acceso. Diferencia crítica.

Pregunta 29: ¿Qué es CMS para publicación contenidos?

A) Protocolo red

B) Content Management System – plataforma gestionar contenido web sin código

C) Formato compresión

D) Lenguaje programación

Respuesta Correcta: B

CMS: WordPress (blogs), Drupal (enterprise), Joomla (comunidades). Interfaz gráfica crear/editar contenido. BD backend. Widgets, plugins extensibilidad.

Pregunta 30: ¿Cuál es la aplicación de web semántica en sistema SAS?

A) Ninguna, no útil

B) Datos médicos interoperables, HL7/FHIR standards, búsqueda inteligente pacientes

C) Solo para redes sociales

D) Reemplazar HTTP

Respuesta Correcta: B

SAS: Web semántica permite datos médicos interoperables entre sistemas. HL7 FHIR (Fast Healthcare Interoperability Resources) usa JSON-LD. Búsqueda pacientes avanzada.

REFERENCIAS BIBLIOGRÁFICAS (35+ REFERENCIAS)

Estándares Oficiales W3C

W3C (2021). HTML5 Specification Living Standard. https://html.spec.whatwg.org/
W3C (2019). Hypertext Transfer Protocol (HTTP/1.1). RFC 7230-7237. https://www.ietf.org/rfc/rfc7230.txt
W3C (2015). Hypertext Transfer Protocol Version 2 (HTTP/2). RFC 7540. https://www.ietf.org/rfc/rfc7540.txt
IETF (2023). QUIC: A UDP-Based Multiplexed and Secure Transport (HTTP/3). RFC 9000. https://www.ietf.org/rfc/rfc9000.txt
W3C (2014). Extensible Markup Language (XML) 1.0 (Fifth Edition). https://www.w3.org/TR/xml/
W3C (2012). XML Schema Definition (XSD). https://www.w3.org/XML/Schema
W3C (2007). Web Services Description Language (WSDL) 1.1. https://www.w3.org/TR/wsdl
W3C (2014). Cross-Origin Resource Sharing (CORS). https://www.w3.org/TR/cors/
W3C (2017). Fetch Living Standard. https://fetch.spec.whatwg.org/

Semántica Web y Linked Data

W3C (2014). Resource Description Framework (RDF). https://www.w3.org/RDF/
W3C (2012). Web Ontology Language (OWL). https://www.w3.org/OWL/
W3C (2014). JSON for Linking Data (JSON-LD). https://json-ld.org/
Schema.org Community (2021). Schema.org Vocabulary. https://schema.org/
W3C (2018). HTML Microdata. https://www.w3.org/TR/microdata/

Seguridad y Autenticación

Auth0 (2023). JSON Web Tokens (JWT). https://tools.ietf.org/html/rfc7519
OWASP (2023). Authentication Cheat Sheet. https://cheatsheetseries.owasp.org/
Mozilla Developer (2023). HTTPS – The Secure Protocol. https://developer.mozilla.org/en-US/docs/Glossary/https
NIST (2019). Digital Identity Guidelines. SP 800-63B Authentication and Lifecycle Management.

Desarrollo Frontend

MDN Web Docs (2023). HTML: HyperText Markup Language. https://developer.mozilla.org/en-US/docs/Web/HTML/
MDN Web Docs (2023). Fetch API. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
React Official (2023). React Documentation. https://react.dev/
Angular Official (2023). Angular Documentation. https://angular.io/
Vue Official (2023). Vue.js Documentation. https://vuejs.org/
Svelte Official (2023). Svelte Documentation. https://svelte.dev/

Desarrollo Backend y APIs

Richardson Maturity Model (2008). REST Service Maturity Levels. https://martinfowler.com/articles/richardsonMaturityModel.html
REST API Best Practices (2022). Guidelines for Designing RESTful Services. https://restfulapi.net/
RFC 9110 (2022). HTTP Semantics. https://www.rfc-editor.org/rfc/rfc9110.html
Spring Framework (2023). REST API Development Guide. https://spring.io/guides/gs/rest-service/

Libros Referencia

Fielding, R. T. (2000). Architectural Styles and the Design of Network-based Software Architectures. [Dissertation – REST originator]
Crockford, D. (2008). JavaScript: The Good Parts. O’Reilly Media. ISBN 0596517742
Flanagan, D. (2020). JavaScript: The Definitive Guide (7th Edition). O’Reilly Media. ISBN 9781491952023
McFarland, D. (2021). HTML5 & CSS3 The Complete Manual. Independently Published.
Pilgrim, M. (2010). Dive Into HTML5. O’Reilly Media. (Open access available)
Wikibon (2023). Semantic Web Technologies. https://www.wikibon.org/wiki/Semantic_Web

Organizaciones y Comunidades de Referencia

World Wide Web Consortium (W3C). https://www.w3.org/ – Estándares web oficiales
Internet Engineering Task Force (IETF). https://www.ietf.org/ – Protocolos internet (HTTP, RFC)
Mozilla Developer Network (MDN). https://developer.mozilla.org/ – Documentación web reference