Publicar es poner los archivos donde otra persona pueda pedirlos. En internet eso lo hace un servidor: un ordenador que escucha y responde con el archivo que corresponde a la ruta. El hosting es el servicio que te deja usar ese ordenador, a veces compartido con más sitios. El dominio es el nombre (ejemplo.ies.edu.es). El DNS traduce el nombre a una dirección IP. Ninguno de los tres es «la web». La web, en nuestro caso, sigue siendo la carpeta: index.html, la hoja de estilo, los medios.
Cuando escribes https://ejemplo.ies.edu.es/index.html, el navegador pregunta al DNS la IP, abre una conexión (normalmente el puerto 443 si es HTTPS) y pide /index.html. El servidor busca ese archivo en la carpeta pública del sitio. Si pides /estilos.css, busca ese otro archivo. Por eso los enlaces del HTML tienen que ser relativos o, como mucho, absolutos respecto a la raíz del sitio (/estilos.css), nunca respecto a tu disco. Un file:// no hace ninguna de esas preguntas: el sistema operativo abre la ruta local. Por eso la misma carpeta se puede probar en clase y, el día que haya hosting, subirse tal cual.
HTTP es el protocolo de la petición y la respuesta. HTTPS es HTTP dentro de un cifrado: el contenido viaja de forma que un tercero en la red del instituto no lo lee con facilidad, y el navegador comprueba el certificado del servidor. No cambia el HTML. Cambia el transporte. Un candado no significa que el contenido sea veraz; solo que hablas con el servidor que presenta ese certificado.
Un sitio estático es un conjunto de archivos ya escritos. Es lo que sabes construir en el bloque A. Un sitio dinámico construye la página al pedirla, con un programa y a menudo una base de datos: es lo que hay detrás de muchos CMS. No hace falta un CMS para publicar la Semana de la Ciencia si la página no cambia cada minuto. La nube, en este contexto, puede ser un hosting de archivos estáticos: alguien te presta el servidor. Sigue siendo una carpeta. La práctica no abre una cuenta. Empaqueta un ZIP en tu propio disco, que es el gesto de «juntar la carpeta para subirla» sin subirla.
El ZIP del laboratorio usa el método store: empaqueta sin comprimir. Basta para ver que varios archivos viajan juntos y que, al descomprimir, index.html y estilos.css quedan al mismo nivel, que es lo que la ruta relativa espera. Si metes el CSS en una subcarpeta y el HTML lo busca al lado, el servidor responderá 404. El 404 no es un fallo del dominio: es un archivo que no está donde la ruta dice.
Aunque no subas nada: (1) index.html abre en local, (2) el CSS carga, (3) no hay rutas a C:\ ni a blob: que solo existen en tu sesión, (4) el title identifica el acto, (5) hay un LEEME que dice cómo abrir la carpeta. El dominio de ejemplo del laboratorio no se resuelve: escribirlo no contacta con ningún DNS. Sirve para leer la correspondencia entre nombre, ruta y archivo. Inventar que «ya está en internet» porque el ZIP se ha descargado es el error que esta lección quiere cerrar.
Servidor. Programa o máquina que responde con el archivo pedido.
Hosting. Servicio que te deja usar un servidor, a menudo compartido.
Dominio. Nombre legible. No es el servidor.
DNS. Traduce el dominio a una IP. Esta página no consulta ninguno.
IP. Dirección numérica de la máquina.
HTTP / HTTPS. Protocolo de la petición. HTTPS añade cifrado y certificado.
Sitio estático. Archivos ya escritos. Es lo que sabes construir.
404. El servidor no encuentra esa ruta. Casi siempre es una carpeta mal hecha.
Raíz pública. Carpeta que el servidor expone. index.html suele vivir ahí.
ZIP store. Empaqueta sin comprimir. Basta para que los archivos viajen juntos.
Cada caso es una entrega realista del proyecto del IES Duero. Lee la situación antes de mirar la decisión.
Situación. Se cuela un enlace al escritorio.
No conviene. Porque en casa abre.
Decisión. Buscar «C:\» y «blob:» y quitarlos.
Por qué: Un enlace al escritorio abre en casa y se rompe en el equipo de al lado, que es donde se va a ver el paquete. Hay que buscar rutas con letra de disco y direcciones blob, y quitarlas antes de empaquetar. El ZIP tiene que abrir en un ordenador que no es el tuyo.
Situación. El ZIP llega y nadie sabe cuál es la portada.
No conviene. index.html por costumbre, sin decirlo.
Decisión. LEEME de cuatro líneas.
Por qué: Si el ZIP llega sin LEEME, nadie sabe cuál es la portada, y la costumbre de index.html falla cuando el archivo se llama portada.html. Cuatro líneas bastan: qué abrir, con qué, y qué no está incluido. El nombre de la portada se escribe, no se adivina.
Situación. El sistema crea semana/semana/index.html y el CSS queda fuera.
No conviene. Volver a comprimir mirando el primer nivel.
Decisión. Los archivos del sitio están en la raíz del ZIP, no dentro de otra carpeta con el mismo nombre.
Por qué: Al descomprimir, una carpeta de más deja semana/semana/index.html y el CSS fuera de la ruta que pide el HTML. El servidor, igual que el disco, responderá 404. Se vuelve a comprimir mirando el primer nivel: los archivos del sitio están a la vista, no anidados de más.
Situación. «Lo he subido a la nube» porque está en Descargas.
No conviene. Nombrar el disco.
Decisión. La nube sería un servidor. Descargas es tu usuario.
Por qué: Descargas no es la nube: es una carpeta de tu disco. La nube sería un servidor al que otro navegador pide el archivo. Llamar nube al ZIP porque «lo he subido» a Descargas confunde guardar con publicar, y el LEEME no puede repetir esa frase.
Las ocho piezas son el contenido de la Semana de la Ciencia del IES Duero (Aranda de Duero). Se repiten en el bloque A para que compares decisiones, no para que copies el mismo archivo doce veces. Debajo va el documento marcado, listo para abrirlo en local, y la lectura de cada pieza.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Semana de la Ciencia · IES Duero</title>
<!-- Capa de esta lectura: lección 11. El texto del acto no cambia; cambia la decisión. -->
</head>
<body>
<header>
<p>IES Duero · Aranda de Duero</p>
<h1>Semana de la Ciencia</h1>
</header>
<nav aria-label="En la página">
<a href="#b1">Apertura en el salón de actos</a>
<a href="#b2">Taller de luz</a>
<a href="#b3">Taller de temperatura</a>
<a href="#b4">Visita al patio meteorológico</a>
<a href="#b5">Datos en la pizarra</a>
<a href="#b6">Preguntas</a>
<a href="#b7">Créditos y licencia de los materiales</a>
<a href="#b8">Cómo llegar</a>
</nav>
<main>
<section id="b1">
<h2>Apertura en el salón de actos</h2>
<p>A las 17:00 se abre el salón, no el laboratorio. El h1 de la página es el nombre del acto; este taller es un h2. Hay que decir el aforo (120 butacas) y que no se reserva sitio por mensaje: se entra por orden hasta completar. Quien llegue a las 17:20 oye el inicio, así que el primer párrafo no puede depender de un chiste que solo entiende quien estaba en la fila. El enlace interno #apertura permite saltar desde el nav.</p>
</section>
<section id="b2">
<h2>Taller de luz</h2>
<p>En el laboratorio de física hay una fotorresistencia de demostración. La página no enciende el sensor: explica la hora (17:30) y el grupo máximo (16 personas). El detalle del pin GPIO se cuenta en la lección 4 con un LED simulado; aquí, en la estructura, basta un párrafo y una lista de dos normas: no tocar la protoboard y anotar la lectura en el cuaderno, no en el móvil de otra persona.</p>
</section>
<section id="b3">
<h2>Taller de temperatura</h2>
<p>Segundo grupo, misma franja, aula de al lado. Si los dos talleres se mezclan en un solo párrafo, nadie sabe a qué puerta ir. Van en sections distintas, cada una con su h2. La temperatura se mide con un sensor digital de demostración del departamento; la página no publica la marca como si fuera un anuncio, solo el lugar y la duración (25 minutos).</p>
</section>
<section id="b4">
<h2>Visita al patio meteorológico</h2>
<p>Si llueve, este bloque se cae. Por eso el texto tiene la alternativa escrita (vídeo de tres gráficos en el salón), no un «ya veremos». En HTML la alternativa es una frase dentro de la misma section, no una imagen que sustituye al aviso. Plano general: el patio está detrás del gimnasio, puerta verde.</p>
</section>
<section id="b5">
<h2>Datos en la pizarra</h2>
<p>Al final se apuntan tres números: luz, temperatura y aforo real. Son una lista ordenada si el orden es el del acto, o desordenada si son datos sueltos. Elegimos ol porque se leen en ese orden en la puesta en común. Cada li es una frase corta, no un párrafo disfrazado.</p>
</section>
<section id="b6">
<h2>Preguntas</h2>
<p>Diez minutos. El heading es h2 «Preguntas», no h1: la página ya tiene dueño. Se recuerda que no hay turno de fotos al alumnado. Esa frase es texto, no un icono. Quien imprima la página en blanco y negro tiene que leerla igual.</p>
</section>
<section id="b7">
<h2>Créditos y licencia de los materiales</h2>
<p>El footer nombra al departamento de tecnología del IES Duero y dice que los textos de esta página son del centro para el acto. No se pega música ni fotos de banco de imágenes. Si más adelante hay un plano, será un SVG hecho en clase. La licencia concreta se estudiará en el bloque B; aquí basta no atribuirse lo que no es del instituto.</p>
</section>
<section id="b8">
<h2>Cómo llegar</h2>
<p>Calle San Francisco, Aranda de Duero. El autobús urbano deja en la plaza; desde allí, seis minutos a pie. No incrustamos un mapa de un proveedor externo: exige red y cookies. Un párrafo con la referencia basta, y en la lección 7 el mismo dato cabe en el cartel. La ruta relativa no interviene; esto es contenido, no un archivo.</p>
</section>
</main>
<footer><p>Material del departamento de Tecnología para el acto. Copia local, file://.</p></footer>
</body>
</html>A las 17:00 se abre el salón, no el laboratorio. El h1 de la página es el nombre del acto; este taller es un h2. Hay que decir el aforo (120 butacas) y que no se reserva sitio por mensaje: se entra por orden hasta completar. Quien llegue a las 17:20 oye el inicio, así que el primer párrafo no puede depender de un chiste que solo entiende quien estaba en la fila. El enlace interno #apertura permite saltar desde el nav.
Desde esta lección. Este texto acaba en index.html dentro de la carpeta pública. La ruta del enlace es relativa; el dominio no forma parte del archivo.
En el laboratorio de física hay una fotorresistencia de demostración. La página no enciende el sensor: explica la hora (17:30) y el grupo máximo (16 personas). El detalle del pin GPIO se cuenta en la lección 4 con un LED simulado; aquí, en la estructura, basta un párrafo y una lista de dos normas: no tocar la protoboard y anotar la lectura en el cuaderno, no en el móvil de otra persona.
Desde esta lección. Este texto acaba en index.html dentro de la carpeta pública. La ruta del enlace es relativa; el dominio no forma parte del archivo.
Segundo grupo, misma franja, aula de al lado. Si los dos talleres se mezclan en un solo párrafo, nadie sabe a qué puerta ir. Van en sections distintas, cada una con su h2. La temperatura se mide con un sensor digital de demostración del departamento; la página no publica la marca como si fuera un anuncio, solo el lugar y la duración (25 minutos).
Desde esta lección. Este texto acaba en index.html dentro de la carpeta pública. La ruta del enlace es relativa; el dominio no forma parte del archivo.
Si llueve, este bloque se cae. Por eso el texto tiene la alternativa escrita (vídeo de tres gráficos en el salón), no un «ya veremos». En HTML la alternativa es una frase dentro de la misma section, no una imagen que sustituye al aviso. Plano general: el patio está detrás del gimnasio, puerta verde.
Desde esta lección. Este texto acaba en index.html dentro de la carpeta pública. La ruta del enlace es relativa; el dominio no forma parte del archivo.
Al final se apuntan tres números: luz, temperatura y aforo real. Son una lista ordenada si el orden es el del acto, o desordenada si son datos sueltos. Elegimos ol porque se leen en ese orden en la puesta en común. Cada li es una frase corta, no un párrafo disfrazado.
Desde esta lección. Este texto acaba en index.html dentro de la carpeta pública. La ruta del enlace es relativa; el dominio no forma parte del archivo.
Diez minutos. El heading es h2 «Preguntas», no h1: la página ya tiene dueño. Se recuerda que no hay turno de fotos al alumnado. Esa frase es texto, no un icono. Quien imprima la página en blanco y negro tiene que leerla igual.
Desde esta lección. Este texto acaba en index.html dentro de la carpeta pública. La ruta del enlace es relativa; el dominio no forma parte del archivo.
El footer nombra al departamento de tecnología del IES Duero y dice que los textos de esta página son del centro para el acto. No se pega música ni fotos de banco de imágenes. Si más adelante hay un plano, será un SVG hecho en clase. La licencia concreta se estudiará en el bloque B; aquí basta no atribuirse lo que no es del instituto.
Desde esta lección. Este texto acaba en index.html dentro de la carpeta pública. La ruta del enlace es relativa; el dominio no forma parte del archivo.
Calle San Francisco, Aranda de Duero. El autobús urbano deja en la plaza; desde allí, seis minutos a pie. No incrustamos un mapa de un proveedor externo: exige red y cookies. Un párrafo con la referencia basta, y en la lección 7 el mismo dato cabe en el cartel. La ruta relativa no interviene; esto es contenido, no un archivo.
Desde esta lección. Este texto acaba en index.html dentro de la carpeta pública. La ruta del enlace es relativa; el dominio no forma parte del archivo.
| Criterio | Aún no | En proceso | Conseguido | Notable |
|---|---|---|---|---|
| Modelo | «La web es Google» | Mezcla dominio y archivo | Separa DNS, servidor y carpeta | HTTPS no se confunde con verdad |
| Rutas | C:\ o blob | Relativa rota | Relativa que carga el CSS | Probado en carpeta nueva |
| ZIP | No abre | Abre desordenado | Raíz con index, css, LEEME | Método store explicado |
| 404 | Se culpa a la red | No se sabe leer | Se localiza el archivo ausente | Mayúsculas de index vigiladas |
| Afirmación | «Ya está publicado» | Dominio de ejemplo como real | Se dice que no hay DNS | LEEME coherente |
La web es la carpeta. El servidor la entrega. El DNS nombra al servidor. El ZIP demuestra que sabes juntar la carpeta. Publicar de verdad sería otro paso, y no se finge.
Abre cada pregunta, responde en el cuaderno y después mira la solución. El párrafo «Por qué» es la parte que se estudia.
Respuesta. No. Garantiza que hablas con el servidor que presenta el certificado y que la red no lee el contenido con facilidad.
Por qué: El candado HTTPS no garantiza que el acto sea cierto. Garantiza que hablas con el servidor que presenta el certificado y que la red no lee el contenido en claro. Una página falsa puede tener candado; el contenido se comprueba aparte.
Respuesta. Porque resolver sería una consulta de red a un DNS, y esta materia practica el modelo sin fingir la infraestructura.
Por qué: Si la página consultara un DNS de verdad, dependerías de la red y podrías creer que un dominio de ejemplo existe. El texto deja la correspondencia nombre–ruta–archivo, que es lo que hay que saber leer.
Respuesta. No. Un sitio estático se publica subiendo la carpeta. El CMS hace falta si la página se construye al vuelo o la edita gente que no toca archivos.
Por qué: Un CMS no es obligatorio para publicar. Un sitio estático se publica subiendo la carpeta, si de verdad hay un alojamiento. El CMS hace falta cuando varias personas editan campos sin tocar la plantilla, no para que exista un dominio.
En la vida real
Escribes y dibujas aquí mismo: no hay salto a otro módulo. La misma herramienta, a pantalla completa, está en l11-alojamiento-servidores-y-publicacion.html y en el marco (útil si el navegador permite file:// en iframes).
Prepara en el laboratorio index.html, estilos.css y LEEME.txt. El HTML debe enlazar el CSS con ruta relativa. Descarga el ZIP, descomprímelo en una carpeta nueva y abre index.html con file://. Comprueba que el estilo carga. En el cuaderno, escribe la URL de ejemplo que correspondería a cada archivo y una frase que diga por qué esa URL no está activa.
reto_id: bach1-tic-L11