Inicio / Módulo 07

MÓDULO 07 · Publicar en la nube

Desarrollo Cloud

GitHub Pages, Netlify, Vercel, APIs REST, JSON, fetch y Postman: las herramientas del desarrollo web moderno.

0 / 9 lecciones completadas (0%)

Qué es la nube

📘 Explicación

«La nube» no es nada mágico: son ordenadores de gran capacidad, propiedad de empresas como Amazon, Google o Microsoft, que cualquiera puede alquilar por horas o meses en lugar de comprar y mantener su propio servidor físico.

Estructura / Referencia

Antes:  comprar un servidor fisico -> instalarlo -> mantenerlo tu mismo
Ahora:  alquilar capacidad en la nube -> pagar solo por lo que usas
        -> la empresa proveedora se encarga del mantenimiento fisico

🧠 Ejercicio interactivo

¿Qué ventaja principal ofrece «la nube» frente a tener un servidor físico propio?

📎 Recursos oficiales

MDN — Glosario: Cloud computing ↗

Lección 2

GitHub Pages

📘 Explicación

GitHub Pages permite publicar gratis páginas web estáticas (HTML, CSS, JS) directamente desde un repositorio de GitHub. Es ideal para portfolios, documentación o proyectos personales sencillos sin backend.

Estructura / Referencia

Pasos basicos:
1. Sube tu proyecto a un repositorio en GitHub
2. Entra en Settings -> Pages
3. Selecciona la rama (normalmente "main") y la carpeta raiz
4. GitHub publica tu web en:
   https://tu-usuario.github.io/nombre-del-repositorio/

🧠 Ejercicio interactivo

¿Qué tipo de proyectos son ideales para GitHub Pages?

📎 Recursos oficiales

GitHub — Documentación oficial de GitHub Pages ↗

Lección 3

Netlify

📘 Explicación

Netlify es una plataforma de despliegue que conecta directamente con un repositorio de GitHub: cada vez que subes cambios (git push), Netlify reconstruye y publica automáticamente la web nueva, sin necesidad de FTP manual.

Estructura / Referencia

Flujo con Netlify:
1. Conectas tu repositorio de GitHub a Netlify
2. Netlify detecta el tipo de proyecto y lo construye automaticamente
3. Cada "git push" dispara un nuevo despliegue (deploy)
4. Netlify te da una URL como: https://tu-proyecto.netlify.app

🧠 Ejercicio interactivo

¿Qué ocurre automáticamente en Netlify cuando haces «git push» a tu repositorio conectado?

📎 Recursos oficiales

Netlify — Documentación oficial ↗

Lección 4

Vercel

📘 Explicación

Vercel es similar a Netlify, pero está especialmente optimizado para frameworks como Next.js (basado en React). También ofrece despliegue continuo desde GitHub y funciones «serverless» para ejecutar código sin gestionar un servidor propio.

Estructura / Referencia

Concepto clave: "serverless"
No significa que no haya servidor, sino que tu no lo administras.
Escribes una funcion, la subes, y Vercel la ejecuta bajo demanda,
escalando automaticamente segun las visitas que reciba.

🧠 Ejercicio interactivo

¿Qué significa realmente el término «serverless»?

📎 Recursos oficiales

Vercel — Documentación oficial ↗

Lección 5

Deploy moderno

📘 Explicación

«Deploy» significa poner en producción una versión del proyecto para que los usuarios reales la vean. El desarrollo moderno favorece desplegar cambios pequeños y frecuentes en lugar de una única subida enorme y arriesgada de vez en cuando.

Estructura / Referencia

Enfoque tradicional:           Enfoque moderno (CI/CD):
Cambios acumulados durante      Cada cambio pequeno se prueba
semanas -> una subida grande    y despliega automaticamente
-> mayor riesgo de fallo        -> fallos mas faciles de detectar

🧠 Ejercicio interactivo

¿Por qué el desarrollo moderno prefiere despliegues pequeños y frecuentes?

📎 Recursos oficiales

MDN — Glosario: Despliegue continuo ↗

Lección 6

APIs REST

📘 Explicación

Una API REST es una forma estándar de que dos programas se comuniquen por internet usando URLs y los verbos HTTP (GET para leer, POST para crear, PUT/PATCH para actualizar, DELETE para borrar), normalmente intercambiando datos en formato JSON.

Estructura / Referencia

GET    /api/alumnos        -> obtener la lista de alumnos
GET    /api/alumnos/5      -> obtener el alumno con id 5
POST   /api/alumnos        -> crear un alumno nuevo
PUT    /api/alumnos/5      -> actualizar completamente el alumno 5
DELETE /api/alumnos/5      -> borrar el alumno 5

🧠 Ejercicio interactivo

¿Qué verbo HTTP se usa normalmente para crear un nuevo recurso en una API REST?

📎 Recursos oficiales

MDN — Introducción a las APIs REST ↗

Lección 7

JSON

📘 Explicación

JSON (JavaScript Object Notation) es el formato estándar para intercambiar datos entre programas en la web. Es texto plano estructurado en pares clave-valor, muy parecido a los objetos de JavaScript, y lo entienden prácticamente todos los lenguajes de programación.

Estructura / Referencia

{
  "nombre": "Jorge",
  "modulo": 7,
  "completado": false,
  "lecciones_vistas": ["Que es la nube", "GitHub Pages"]
}

🧠 Ejercicio interactivo

¿Qué caracteriza principalmente al formato JSON?

📎 Recursos oficiales

json.org — Especificación de JSON (en español disponible) ↗

Lección 8

Fetch

📘 Explicación

fetch() es la función moderna de JavaScript para hacer peticiones a una API desde el navegador: pedir datos, enviarlos, o ambas cosas. Devuelve una «promesa», un objeto que representa un resultado que llegará en el futuro cercano.

JavaScript

fetch("https://api.ejemplo.com/alumnos")
  .then(respuesta => respuesta.json())
  .then(datos => {
    console.log(datos);
  })
  .catch(error => console.error("Error al obtener los datos:", error));

// Con async/await (forma mas moderna y legible):
async function obtenerAlumnos() {
  const respuesta = await fetch("https://api.ejemplo.com/alumnos");
  const datos = await respuesta.json();
  console.log(datos);
}

🧠 Ejercicio interactivo

¿Qué devuelve la función fetch()?

📎 Recursos oficiales

MDN — Fetch API ↗

Lección 9

Postman

📘 Explicación

Postman es una herramienta que permite probar APIs sin escribir código: se elige el verbo HTTP, la URL y los datos a enviar, y Postman muestra la respuesta. Es muy útil para comprobar que una API funciona antes de conectarla a una aplicación real.

Estructura / Referencia

En Postman:
1. Elige el metodo: GET, POST, PUT, DELETE...
2. Escribe la URL: https://api.ejemplo.com/alumnos
3. Si es POST, anade el cuerpo (Body) en formato JSON
4. Pulsa "Send" y revisa la respuesta y el codigo de estado (200, 404, 500...)

🧠 Ejercicio interactivo

¿Para qué sirve principalmente Postman?

📎 Recursos oficiales

Postman — Documentación oficial ↗