Taller de web autogestionada · La Escocesa
Esta guía repite lo que hacemos en el taller, por escrito, para cuando estés sola delante del ordenador dentro de tres meses. No hace falta leerla entera de un tirón: busca el paso en el que estés.
Necesitas dos cosas instaladas y una cuenta creada:
code.visualstudio.com.github.com. Ahí vive tu web para que la vea todo el mundo.
No necesitas pagar nada. No necesitas saber matemáticas. No necesitas la terminal.
Esto es lo único que hay que creerse de verdad: una web es una carpeta con archivos de texto dentro. No hay nada más. La tuya se ve así:
mi-web/
├── index.html ← la portada
├── proyectos.html
├── cv.html
├── estilo.css ← el aspecto de todas las páginas
└── img/
├── obra-1.jpg
└── retrato.jpg
Guarda esa carpeta donde guardes tus cosas importantes. Si la mueves entera, sigue funcionando. Si sacas un archivo de dentro, se rompe.
Archivo → Abrir carpeta, y eliges la carpeta entera. No abras los archivos sueltos: si abres la carpeta, ves toda tu web en la columna de la izquierda y puedes saltar entre archivos.
Doble clic en index.html desde el escritorio, o botón
derecho → Abrir con → tu navegador. Fíjate en que arriba no pone
https:// sino una ruta de tu ordenador: todavía es una
web privada, solo tuya.
Cada vez que guardes un cambio, recarga la página en el navegador para verlo.
El HTML dice qué es cada cosa: esto es un título, esto un párrafo, esto una imagen. Se escribe con etiquetas, que van en parejas:
<h1>Tu nombre</h1> <p>Una línea sobre ti.</p> <img src="img/retrato.jpg" alt="Retrato en el taller">
Una abre y otra cierra, y la de cerrar lleva una barra. Lo que escribas entre medias es lo que se ve.
En proyectos.html, copia un bloque
<article> entero, pégalo debajo y cambia el texto y
el nombre de la imagen. Así de aburrido es. Así de fiable.
cv.html y renómbralo, por ejemplo
textos.html.<title> y el contenido de
<main>.<a href="textos.html">Textos</a>. Si solo lo
pones en una, desde las demás no se llega.Tres reglas y ya está:
img/. Una
imagen que esté en tu escritorio se ve en tu ordenador y en ningún
otro sitio del mundo.Foto Taller.JPG falla al publicar;
foto-taller.jpg no.
El alt no es opcional: es lo que lee en voz alta un lector
de pantalla y lo que aparece si la imagen no carga. Describe lo que se
ve, en una línea.
Si el HTML dice qué es cada cosa, el CSS dice cómo se ve. Todo va en
estilo.css, y una regla tiene esta forma:
body {
background-color: #fbfaf7;
font-size: 18px;
}
El selector (body) dice a qué afecta; dentro van las
propiedades. Punto y coma al final de cada línea.
La lista de propiedades está en la chuleta. La forma de aprender esto no es memorizarla: es cambiar un número, guardar, recargar y mirar. Cuarenta veces. No se rompe nada.
En cualquier web que te guste: botón derecho → Inspeccionar. Ahí ves su HTML y su CSS. Mirar cómo está hecho algo es la manera normal de aprender esto, y no tiene nada de malo.
Hasta ahora tu web solo existe en tu ordenador. Para que exista en internet hay que copiar la carpeta a un servidor. Usamos GitHub, que es gratis y no te pide tarjeta.
github.com, botón New repository.mi-web. Marca Public. Crear.img), no la carpeta que los contiene.main y guarda.tunombre.github.io/mi-web.index.html, o subiste la carpeta en vez de su contenido y
ahora está todo un nivel más abajo. Entra en el repositorio y mira si
ves index.html nada más abrirlo.
Este es el paso que hace que la web sea tuya de verdad. El ciclo es siempre el mismo:
Comprueba siempre en local antes de subir. Y guarda una copia de la carpeta antes de hacer cambios grandes: es la manera más simple de poder volver atrás.
tunombre.github.io/mi-web funciona perfectamente y es
gratis para siempre. Si quieres tunombre.com, se compra
aparte: entre 10 y 15 € al año en sitios como Porkbun, Namecheap o
Gandi. Se conecta desde los ajustes del dominio, apuntándolo a GitHub.
El dominio se pone a tu nombre y con tu correo, siempre, aunque te lo configure otra persona. Es lo único de todo esto que se puede perder de verdad.
Por orden, y funciona casi siempre:
src tienen que coincidir exactamente,
incluidas mayúsculas y extensión.Si le preguntas a una inteligencia artificial, pídele que te explique el cambio, no solo que te dé el código, y pega solo el trozo que falla. Si le das la web entera te la devuelve reescrita de arriba abajo y dejará de ser tuya.
Lo que has montado no caduca, no tiene suscripción y no se lo lleva ninguna empresa cuando cierre. Son archivos de texto en una carpeta: el formato más duradero que existe en internet.