https://www.netlify.com/ publicar paginas web HTML para estudiantes
https://www.netlify.com/ gratis
Publicar páginas web HTML para estudiantes
- Ingresar, iniciar sesión con Google
al crear una cuenta elegir Personal en tipo de cuenta
y selecciono beginers, es decir:
- Ingresar los datos extra que solicite, (nombre, uso personal, beginner)
Seleccionas, mientras creas la cuenta, por ejemplo:
proyecto personal
otros,
busqueda
nombre del proyecto: practica_1 (por ejemplo y el nombre del proyecto no acepta espacios)
Y ya puedo
Upload your project files
(subir mis proyectos)( abajo me deja)
Le llamo index.html siempre
Y después de subir el archivo botón de la derecha PREVIEW y veo la página web (FOTO superior)
Aquí puedo tirar o subir mi nuevo archivo HTML , Selecciono (clic) Rename and Deploy : Cambiar nombre (a index.html) y desplegar
Una vez que esté subido aparece PUBLISHED, HAGO CLIC EN PUBLISHED Y LO VEO YO solo, como queda mi página web
Y ahora clic en botón MAKE PUBLIC Y YA TENGO MI ENLACE PARA Q CUALQUIERA VEA MI PÁGINA.
CADA VEZ QUE SUBO UN INDEX.HTML NUEVO PISA EL ANTERIOR ( PERO PUEDES HACER UN NUEVO PROYECTO, SUBIR Y PUBLICAR OTRA PÁGINA WEB )
Si quieres hacer una nueva práctica, te vas a proyectos ( arriba, a la izquierda) y NEW PROYECT ( a la derecha arriba) y subo otra página.
Siempre al nuevo proyecto llámale index.html
Publicar proyectos HTML5 de alumnos en Netlify de forma rápida y gratuita
Una de las mayores motivaciones para el alumnado cuando aprende desarrollo web es ver sus páginas publicadas en internet y accesibles desde cualquier dispositivo. Tradicionalmente, esto requería configurar servidores o clientes FTP complejos. Hoy en día, herramientas como Netlify hacen que este proceso sea cuestión de segundos.
En este artículo te mostramos cómo utilizar Netlify Drop para que tus estudiantes puedan subir y compartir sus prácticas de HTML5 de manera inmediata, sin necesidad de registros previos.
1. ¿Qué es Netlify y cómo funciona?
Netlify es una plataforma en la nube especializada en alojar sitios web estáticos. Su herramienta Netlify Drop permite publicar una página web simplemente arrastrando y soltando una carpeta desde el ordenador.
Los pasos para realizarlo son muy sencillos:
- Prepara la carpeta con el proyecto web del alumno en tu equipo.
- Entra en la dirección web: netlify.com
- Arrastra la carpeta completa desde tu explorador de archivos y suéltala en el recuadro que aparece en pantalla.
- En un par de segundos, Netlify generará una URL pública y aleatoria (por ejemplo:
https://stupefied-name-123456.netlify.app) para visitar la web.
2. Estructura correcta de la carpeta y archivos
Para que la plataforma interprete correctamente el sitio web y no dé errores de carga, es fundamental cuidar la organización interna de los archivos:
- El nombre de la carpeta principal: Puede llamarse como quieras (por ejemplo,
proyecto-juan,mi-web-2026, etc.). El nombre de esta carpeta contenedora no afecta en absoluto. - El archivo raíz obligatorio: Dentro de esa carpeta debe encontrarse obligatoriamente el archivo principal de la web, que debe llamarse exactamente
index.htmly estar ubicado en la raíz. - Organización flexible de imágenes y CSS: Tienes total libertad. No es obligatorio crear subcarpetas exclusivas: puedes tener todo junto y revuelto en la raíz (el
index.html, los estilosestilos.cssy tus imágenes). Si decides organizarlo en subcarpetas (por ejemplo, una carpeta llamadaimagenes), solo recuerda especificar correctamente la ruta relativa en el código HTML de esta forma:<img src="imagenes/foto.jpg" alt="Ejemplo">.
EJEMPLO DE ESTRUCTURA VÁLIDA:
📁 mi-proyecto-alumno/
├── index.html (Obligatorio en la raíz)
├── estilos.css (CSS externo en la misma carpeta)
└── 📁 imagenes/ (Opcional, con ruta relativa correcta)
└── banner.jpg3. Publicar el sitio , sigue los pasos indicados en los ejemplos de arriba, con fotos/capturas de la profesora
Por defecto, Netlify asigna una URL con un nombre aleatorio difícil de recordar.
¡Y eso es todo! Una solución excelente, limpia y totalmente gratuita para dinamizar las clases de programación y diseño web.
Conversación con Gemini
EL secreto de las rutas relativas en HTML: ¿Cómo encuentra el navegador tus imágenes?
Cuando los alumnos empiezan a programar en HTML, uno de los fallos más comunes es que la página se carga pero las imágenes aparecen rotas. Esto ocurre casi siempre por no entender bien cómo funcionan las rutas relativas.
Para explicárselo a jóvenes de 17 años de forma clara, lo mejor es utilizar la metáfora de dar direcciones en una casa o habitación:
🗺️ La metáfora de la habitación
Imagínate que tu archivo index.html es una persona parada exactamente en el recibidor de su casa (la carpeta principal de tu proyecto).
Cuando escribes esto en tu código:
<img src="foto.jpg" alt="Mi foto">El archivo index.html asume que la foto está exactamente al lado suya, en el mismo recibidor. Si la imagen está ahí suelta junto a él, la encuentra a la primera sin dar explicaciones.
📁 ¿Qué pasa si organizamos las cosas en subcarpetas?
A medida que los proyectos crecen, es normal crear carpetas ordenadas. Por ejemplo, una carpeta llamada imagenes:
📁 mi-proyecto/
┣ 📄 index.html
┗ 📁 imagenes/
┗ 🖼️ foto.jpgSi el index.html quiere ver la foto.jpg, ahora se da cuenta de que ya no la tiene al lado; la foto está metida dentro de una habitación cerrada con llave llamada imagenes.
Por lo tanto, en el código HTML tenemos que darle la dirección exacta, indicándole que primero tiene que entrar en esa habitación:
<img src="imagenes/foto.jpg" alt="Ejemplo de foto">Esa barrita inclinada / significa literalmente: "Oye index.html, entra en esta carpeta y busca ahí dentro".
- Olvidar la barra o poner espacios: Si escribes
src="imagenespuntuacionfoto.jpg"o dejas espacios, el navegador se pierde por completo. - El peligro de las Mayúsculas: Si la carpeta se llama
Imágenes(con I mayúscula) y en el código escribesimagenes/(con minúscula), en tu ordenador local con Windows puede que funcione de milagro, pero al subirlo a Netlify o internet fallará y la imagen no se verá. ¡Acostumbra a tus alumnos a usar siempre minúsculas y sin espacios!
Otra forma en windows comprobada . zip( mejor sube la carpeta con todos los archivos de tu proyecto)
puedes subir comprimido en windows los archivos de tu proyecto: zip en Windows ( falta ver en ubuntu del IES si puedes crear .zip)
Si quieres subir un css externo, tienes que llamarle index.html al archivo raiz siempre .Seleccionas el index.html y el archivo .css, los seleccionas y -->clic botón derecho---->enviar a zip (en windows) (en ubuntu HAY QUE ver si hay .zip)
Solo puedes arrastrar o subir archivos .html (con css interno o en linea) y archivos .zip comprimidos si hay tienes css externo (son dos archivos).
Siempre botón PREVIEW
Y LUEGO SI QUIERES MAKEPUBLIC ( TE DA EL ENLACE PARA QUE TODOS VEAN TU PÁGINA WEB)
¡¡¡OJO!!!Subí en la misma carpeta un archivo index.html y una foto, la carpeta le llamé index (sin extensión) y funcionó (el archivo tenía también una dirección web a una imagen)
El archivo siempre llamale index.html
(sales de la cuenta de netlify.com abajo)
