¿Cuál es la diferencia real entre XML, XSL, Javascript y JSON?

• XML (Extensible Markup Language): Es el "archivador de documentos". Estructura los datos mediante etiquetas jerárquicas (como <servidor>). Es muy descriptivo pero pesado. Se usa mucho en administraciones públicas y sistemas heredados.

• XSL (Extensible Stylesheet Language): Es el "decorador" del XML. Sin XSL, el navegador solo muestra una lista de texto. XSL le dice al navegador: "Coge este dato de XML y ponlo dentro de esta fila de una tabla HTML". La transformación ocurre en el navegador, pero de forma estática.

• JSON (JavaScript Object Notation): Es el "mensajero rápido". Estructura los datos como parejas de clave: valor. Es el estándar de internet hoy en día porque es ligero y JavaScript lo entiende de forma nativa.

• JavaScript (con Fetch): A diferencia de XSL, JS es un lenguaje de programación real. Fetch es la herramienta que usa JS para ir a buscar un archivo JSON, leerlo y "dibujarlo" en la web. Permite que la página sea dinámica e interactiva.

Las Diferencias entre XML y JSON

1. El "Peso" del código (Verbosity)

XML es lo que llamamos un lenguaje verboso. Para decir que alguien se llama "Pepe", XML te obliga a escribir el nombre de la etiqueta dos veces (apertura y cierre). JSON va directo al grano.

• XML: <nombre>Pepe</nombre> (22 caracteres)

• JSON: "nombre": "Pepe" (14 caracteres)

En archivos de millones de líneas, esta diferencia ahorra megabytes de transferencia y hace que la web cargue más rápido.

2. Estructura de datos vs. Documento

• JSON está diseñado para ser una estructura de datos. Se mapea directamente a objetos que un programador usa en su código (JavaScript, Python, Java).

• XML nació como un lenguaje de marcado de documentos (primo hermano del HTML). Es excelente para textos enriquecidos, donde el orden de los elementos y los atributos son cruciales.

3. La facilidad de análisis (Parsing)

Para que un programa use los datos, debe "parsearlos" (leerlos y entenderlos).

• En JSON, el proceso es casi instantáneo porque su estructura es idéntica a cómo los lenguajes de programación guardan información en memoria.

• En XML, el ordenador tiene que recorrer un árbol jerárquico complejo, lo que consume más CPU y memoria.

¿Cuándo usar cada uno?

Usa JSON si:

• Estás desarrollando una aplicación web o móvil moderna.
• Trabajas con APIs (es el estándar de oro actual).
• Buscas velocidad y bajo consumo de datos.

Usa XML si:

• Necesitas una validación de datos extrema (formatos bancarios o facturación electrónica).
• Estás trabajando con sistemas antiguos (Legacy) que no entienden JSON.
• Necesitas guardar documentos con metadatos complejos donde el diseño visual importa (como un archivo de Word .docx, que por dentro es puro XML).

Comparación JSON y XML

Conceptos Fundamentales JavaScript

Para interpretar código JS, fijaos en estas cuatro piezas clave:

• Variables (let, const): Son los contenedores de datos. const es para valores que no cambian y let para los que sí.

• Funciones (function): Bloques de código que ejecutan una tarea cuando alguien los "llama".

• DOM (Document Object Model): Es la forma en que JS "atrapa" los elementos de tu HTML para cambiarlos. Se suele usar document.getElementById().

• Eventos: El "disparador" (un clic, pasar el ratón, cargar la página).

Fíjate en este esquema básico de cómo JS interactúa con tu HTML:

Ejemplo de flujo lógico:

1. Selección: El script busca el botón en el HTML.

2. Escucha: Espera a que el usuario haga click.

3. Acción: Ejecuta una función que cambia el color o el texto.

Para entender cualquier script, sigue estos pasos de rastreo:

1. ¿Dónde empieza? Busca los EventListener o llamadas a funciones.

2. ¿Qué datos usa? Mira las variables declaradas al principio.

3. ¿Qué cambia en la web? Busca palabras como .innerHTML, .style o .value.

Imagina que te encuentras este código en el proyecto. Vamos a analizarlo juntos:

<input type="number" id="edadUsuario" placeholder="Introduce tu edad">
<button id="botonVerificar">Comprobar acceso</button>
<p id="mensajeResultado"></p>
<script>
  // 1. Selección de elementos
  const entrada = document.getElementById('edadUsuario');
  const boton = document.getElementById('botonVerificar');
  const salida = document.getElementById('mensajeResultado');
  // 2. Lógica
  boton.addEventListener('click', () => {
    let edad = parseInt(entrada.value);
    if (edad >= 18) {
      salida.innerText = "Acceso concedido al servidor.";
      salida.style.color = "green";
    } else {
      salida.innerText = "Error: Eres menor de edad.";
      salida.style.color = "red";
    }
  });
</script>

¿Qué hace parseInt? Convierte el texto que escribes en el input en un número entero para poder comparar.
¿Qué activa el código? El evento 'click' sobre la constante boton.
¿Cuál es la condición? Una estructura if / else. Si la edad es 18 o más, ejecuta el primer bloque; si no, el segundo.

LABORATORIO: Hardware de Red

Vamos a mostrar el inventario de equipos de hardware de red de una empresa en una página en formato de tabla. Vamos a ver dos variantes tecnológicas: XML+XSL y JSON+JAVASCRIPT

El flujo de trabajo típico en GITHUB

1. Crear la rama: Para trabajar en una parte del diseño de la aplicación nueva o mejorada.. 

2. Trabajar (Commits): Haces tus cambios. Cada vez que guardas un "commit", la rama avanza, pero el tronco principal se queda donde estaba.

3. Hacer un Pull Request (PR): En GitHub, le dices a tus compañeros: "He terminado en mi rama, ¿podéis revisar mi código antes de que lo junte con el principal?".

4. Fusión (Merge): Una vez aprobado, se hace el merge. Tu código pasa a formar parte del tronco principal y la rama se puede eliminar.