Publicación y mantenimiento de un sitio web

Un sitio web necesita una carpeta de proyecto que contenga todos los archivos que usarán los visitantes. Esta es la raíz del sitio. Publicar resulta mucho más fácil cuando esa carpeta es un sitio completo y portable: sin imágenes tomadas de Descargas ni hojas de estilo dejadas en la carpeta de otro proyecto.

Da un lugar a cada tipo de archivo

Un pequeño taller de reparación podría usar esta estructura:

riverside-bikes/
  index.html
  prices.html
  contact.html
  404.html
  css/styles.css
  scripts/menu.js
  images/logo.svg
  images/workshop-800.jpg
  images/workshop-1600.jpg
  blog/index.html
  blog/winter-checklist.html

Las páginas HTML son el contenido, css/ contiene los estilos, scripts/ contiene los archivos JavaScript e images/ contiene las imágenes preparadas para los visitantes. Un sitio sin scripts no necesita una carpeta de scripts. Las carpetas separadas facilitan la búsqueda de archivos relacionados sin cambiar la forma en que los usa el navegador.

La mayoría de los servidores web envían index.html cuando un visitante solicita una carpeta. La dirección https://www.example.com/ abre la página de inicio de la raíz. La dirección https://www.example.com/blog/ abre blog/index.html. Un archivo llamado home.html sigue siendo una página, pero el servidor normalmente no lo elegirá para la dirección del sitio sin ruta.

Elige los nombres antes del lanzamiento

Usa letras minúsculas, guiones entre palabras y la extensión correcta. opening-hours.html y team-photo.jpg son nombres claros. Los espacios pueden aparecer en las URL como %20, lo que dificulta leer y escribir una dirección. Los nombres pasan a formar parte de las direcciones públicas del sitio, así que elígelos según el contenido que identifican.

La extensión debe corresponder al archivo: .html para HTML, .css para CSS, .js para scripts y una extensión de imagen adecuada como .jpg, .webp o .svg. El servidor envía una cabecera Content-Type que describe el formato del archivo. Los sistemas de alojamiento suelen usar las extensiones para elegir ese tipo. Cambiar el nombre de una foto de .jpg a .webp no convierte su contenido; expórtala al nuevo formato con una herramienta de imágenes.

La mayoría de los servidores distinguen los nombres en mayúsculas y minúsculas. Un enlace a Logo.svg puede fallar cuando el archivo cargado es logo.svg, aunque haya funcionado en una computadora con un sistema de archivos que no distingue mayúsculas de minúsculas. Acostumbrarte a usar nombres en minúsculas evita esa diferencia en los proyectos nuevos.

Separa los archivos públicos de los archivos de trabajo

Mantén los originales de cámara, los archivos de diseño y las notas fuera de la raíz del sitio, por ejemplo, en riverside-bikes-originals/. Exporta solo las imágenes preparadas para la web a images/. Los archivos de la carpeta publicada pueden descargarse incluso cuando ninguna página los enlaza. Mantén las contraseñas, los documentos privados y los datos personales fuera de esa carpeta.

Antes de cargar el sitio, comprueba que todos los recursos locales enlazados estén dentro del proyecto. Una foto en una dirección personal file:// existe en tu computadora; no viaja con el sitio a menos que la copies a la carpeta publicada. Después de moverla, actualiza el enlace y vuelve a probarlo.

Una estructura estable también protege los enlaces después del lanzamiento. Mover prices.html a una dirección nueva rompe los marcadores antiguos, salvo que el proveedor de alojamiento redirija esa dirección anterior a la página nueva.

Una ruta indica al navegador dónde buscar un archivo. Para escribirla correctamente, identifica tanto el archivo solicitado como la ubicación desde la que el navegador resolverá la ruta.

Empieza en la carpeta del archivo que hace la referencia

Una ruta relativa comienza en la carpeta de la página actual. En el sitio del taller de bicicletas, index.html enlaza a prices.html con href="prices.html", al logotipo con src="images/logo.svg" y a una entrada con href="blog/winter-checklist.html".

Desde blog/winter-checklist.html, la ruta cambia:

<link rel="stylesheet" href="../css/styles.css">
<a href="../index.html">Home</a>
<img src="../images/logo.svg" alt="Riverside Bike Repair">
<a href="autumn-tips.html">Autumn tips</a>

Para el logotipo, primero sube desde blog/ con ../ y después entra en images/. Un archivo de la misma carpeta solo necesita su nombre. Para subir dos niveles, usa ../../. Usa siempre barras normales / en las rutas web, incluso cuando escribas en Windows.

Una ruta en un archivo CSS comienza en la carpeta del archivo CSS. En css/styles.css, la regla background-image: url("../images/pattern.svg"); sube desde css/ y después baja a images/. No comienza desde la página HTML que carga la hoja de estilo.

Distingue tres formas de dirección

Una URL absoluta incluye el esquema y el nombre del anfitrión. Úsala para otro sitio web. Las rutas relativas permiten trasladar tu propio sitio entre un servidor local, una dirección de vista previa y su dominio final sin sustituir el dominio en cada enlace.

Una barra inicial tiene un significado específico. En https://username.github.io/riverside-bikes/, /css/styles.css solicita https://username.github.io/css/styles.css. Elimina la carpeta del proyecto de la dirección. Desde la página raíz del sitio, css/styles.css conserva esa carpeta y llega al archivo deseado.

Prueba la dirección que realmente usa el navegador

Abrir HTML directamente desde el disco produce una dirección file://. Los enlaces a carpetas y las rutas que comienzan con / pueden comportarse de forma diferente allí. Ejecuta un servidor de desarrollo local desde la carpeta del sitio, por ejemplo, con python3 -m http.server, o usa la vista previa en vivo de un editor de código. Después abre la dirección HTTP local que proporciona.

En un servidor, href="blog/" abre blog/index.html. Si falla un enlace o una imagen, abre DevTools antes de recargar y busca su solicitud en Red. Un 404 significa que no se encontró el recurso solicitado. Lee la URL completa de la solicitud y compara cada carpeta, barra, letra y extensión con los archivos cargados. Una mayúscula o un ../ que falte bastan para enviar el navegador a otro lugar. Una ruta de una computadora personal copiada de un explorador de archivos no puede servir a los visitantes; sustitúyela por una ruta dentro del sitio.

Los navegadores intentan mostrar las páginas incluso cuando el código contiene errores. Esa recuperación es útil para los visitantes, pero puede ocultar problemas a quien crea la página. La validación comprueba el HTML o el CSS según las reglas de su estándar, independientemente de que la página se vea bien.

Usa el comprobador correspondiente al lenguaje

El W3C Nu Html Checker comprueba HTML. El W3C CSS Validation Service comprueba CSS. Puedes enviar una URL publicada, cargar un archivo o pegar código. Las comprobaciones integradas de un editor son útiles mientras escribes; los comprobadores web también permiten revisar la copia publicada.

Lee la línea y la columna asociadas a cada mensaje. Un error incumple una regla y debe corregirse. Una advertencia o un mensaje informativo pide atención, pero puede describir código permitido. Lee lo que indica antes de decidir si es necesario hacer un cambio.

Trabaja desde el primer error hacia abajo y vuelve a ejecutar el comprobador después de corregirlo. Una comilla que falta o un elemento mal cerrado pueden hacer que el código posterior parezca pertenecer a un lugar que no le corresponde y producir muchos mensajes adicionales.

Corrige la estructura en HTML

Considera estos elementos anidados incorrectamente:

<p>Open <strong>daily</p></strong>

El <strong> interior debe cerrarse antes que el <p> exterior:

<p>Open <strong>daily</strong></p>

Para una foto que aporta contenido, proporciona un atributo alt que describa su contenido relevante, como alt="Mechanic adjusting the brakes of a city bike". Una imagen decorativa usa un alt="" vacío. Cada id también debe ser único dentro de su página. Usa una clase compartida cuando varios elementos necesiten el mismo estilo.

Otras comprobaciones útiles incluyen la declaración de tipo de documento, un título de página, las comillas completas de los atributos y los elementos de lista dentro de una lista. Un <div> no puede estar dentro de un párrafo. El navegador cierra ese párrafo antes del elemento div y un </p> posterior puede convertirse en una etiqueta de cierre suelta. La estructura corregida por el navegador puede diferir del texto que escribiste.

Corrige las declaraciones en CSS

Un número y su unidad CSS deben ir juntos: escribe width: 100px;, sin espacio entre 100 y px. La propiedad para el color del texto es color. Una propiedad desconocida se ignora.

Un punto y coma que falta también puede afectar a la siguiente declaración:

.card {
  margin: 10px
  padding: 5px;
}

El navegador lee las dos líneas como una sola declaración no válida. Añade el punto y coma que falta después de 10px y vuelve a comprobar. Los navegadores suelen omitir las declaraciones no válidas sin mostrar un error en la página.

Combina las comprobaciones de código con las de la página

Superar la validación no demuestra que la página sea accesible, rápida, útil o que sus datos sean correctos. Prueba la navegación con teclado, examina la disposición en los navegadores y comprueba el propio contenido. Si el comprobador de CSS señala una función muy reciente, consulta su especificación y la información de compatibilidad de MDN antes de eliminar código que funciona; los comprobadores pueden ir por detrás de las funciones más recientes.

Valida después de cambios importantes y antes de publicar. Después de la carga, envía la dirección publicada y verifica que el contenido más reciente esté visible. Una página anterior válida puede superar la comprobación tan fácilmente como la actualizada.

Las herramientas de desarrollo, llamadas a menudo DevTools, muestran cómo interpreta el navegador tu página. Haz clic derecho en un elemento y elige Inspeccionar. También puedes usar F12 o Ctrl+Shift+I en Windows y Linux, o Cmd+Option+I en macOS. En Safari, activa primero «Mostrar funciones para desarrolladores web» en Configuración, Avanzado.

Inspecciona la estructura del navegador

El panel Elementos, llamado Inspector en Firefox, muestra el DOM: la estructura construida a partir del HTML. El navegador puede haber reparado marcado no válido, por lo que no siempre es una copia directa del código fuente. Un <div> escrito dentro de un párrafo aparece fuera de él en el DOM porque el navegador cierra primero el párrafo.

Selecciona el elemento con el problema. El panel Estilos enumera las reglas CSS que coinciden y enlaza a sus archivos fuente y números de línea. Una declaración tachada no está activa. Otra regla puede prevalecer sobre ella, o un icono de advertencia puede mostrar que la declaración no es válida. El panel Calculado muestra los valores finales de las propiedades después de que el navegador haya resuelto esas reglas.

Sigue una regla de color que no prevalece

Supón que este enlace aparece en azul marino aunque su clase de botón indica blanco:

<a class="btn" href="contact.html">Contact us</a>

#main a { color: navy; }
.btn { color: white; }

Ambas reglas coinciden cuando el enlace está dentro de id="main". El selector de id hace que #main a sea más específico: su especificidad es (1, 0, 1), frente a (0, 1, 0) para .btn. En estas reglas ordinarias, colocar .btn más tarde no supera esa diferencia.

Una corrección precisa es #main .btn, con especificidad (1, 1, 0). Otra es sustituir la regla amplia de id por una clase para el enlace, como .nav-link. Dos selectores de una sola clase tienen la misma especificidad, por lo que su orden puede decidir el color. Cambiar #main a por .main a sigue dejando (0, 1, 1), que supera a .btn. Inspecciona la regla que prevalece realmente antes de elegir la corrección más pequeña que resulte útil.

Mide toda la caja

El diagrama del modelo de caja separa contenido, relleno, borde y margen. Con box-sizing: content-box, un ancho de contenido de 300px más un relleno de 20px a cada lado y bordes de 2px ocupa:

Es una caja con borde de 344px, antes de añadir márgenes. Con box-sizing: border-box, toda la caja con borde mantiene 300px de ancho; el ancho de su contenido pasa a ser:

Usa el diagrama para explicar una separación o un desbordamiento en lugar de cambiar repetidamente los anchos por tanteo. Los indicadores de flexbox y cuadrícula también pueden mostrar pistas, líneas y separaciones de la disposición.

Prueba un cambio y después guárdalo

Desactiva una declaración, edita un valor o añade una regla en Estilos. Fuerza :hover o :focus para examinar un estado sin mantener el puntero o el teclado en su lugar. Estas ediciones son temporales: la edición normal en DevTools no actualiza los archivos de tu proyecto. Copia el cambio que funciona al código fuente, guarda y recarga. Si la corrección desaparece, aún no se ha guardado en la copia que carga el navegador.

Una página se construye a partir de varias solicitudes. El HTML puede llegar correctamente mientras falla una hoja de estilo o una imagen. Los mensajes de la Consola y el panel Red muestran estos resultados por separado.

Abre las herramientas antes de recargar

La Consola informa de errores y advertencias, incluidos fallos de scripts, recursos que faltan y contenido mixto. Los mensajes suelen enlazar al archivo y la línea afectados. Incluso un sitio de HTML y CSS puede tener mensajes útiles en la Consola.

El panel Red registra las solicitudes de la página mientras DevTools está abierto. Ábrelo, recarga y filtra por CSS, imágenes o fuentes para reducir la lista. Lee la URL solicitada, el estado, el tipo, el tamaño y el tiempo. Selecciona una entrada para inspeccionar sus cabeceras de respuesta y su contenido.

Un estado de la serie 400 se refiere a la solicitud; uno de la serie 500 se refiere al servidor. Un 404 no demuestra que debas cambiar la disposición CSS.

Rastrea un logotipo que falta

La página publicada tiene un espacio de imagen vacío. En Red, su solicitud es https://www.example.com/images/Logo.svg y devuelve 404. El archivo cargado es images/logo.svg. La L mayúscula solicitada no coincide con el nombre real en minúsculas. Corrige la ruta en el HTML, despliega la página y confirma que la solicitud ahora se completa correctamente.

Rastrea una página sin estilos

Busca primero la solicitud del CSS. Si no aparece ninguna solicitud, inspecciona el elemento <link>, incluido rel="stylesheet". Si la solicitud devuelve 404, compara su URL con la ubicación del archivo cargado.

Un 200 solo indica que la respuesta se recibió correctamente, no confirma que sea CSS. Comprueba la Consola y la cabecera Content-Type de la respuesta, que debe ser text/css. Un proveedor de alojamiento puede devolver por error una página de error HTML con estado 200, y el navegador se negará a aplicarla como hoja de estilo. Una vez que llegue el CSS correcto con el tipo adecuado, inspecciona las declaraciones no válidas y los selectores que no coinciden con el elemento afectado.

Descarta la copia guardada del navegador

Una caché guarda archivos para reutilizarlos. Ahorra tiempo de descarga, pero una copia antigua puede hacer que parezca que falta una actualización que sí se realizó. Con DevTools abierto, activa «Desactivar caché» en Red y recarga. En Chrome, Edge y Firefox, Ctrl+Shift+R en Windows y Linux o Cmd+Shift+R en macOS fuerza una recarga completa. Inspecciona el contenido recibido antes de concluir que la carga falló.

Las columnas de tamaño y tiempo también ayudan con los problemas de velocidad. Una imagen de 3,6 MB entre pequeños archivos de texto es un buen punto de partida. La limitación de la velocidad de red simula una conexión más lenta. Una página HTTPS que solicita un archivo con http:// puede provocar una advertencia de contenido mixto; inspecciona la URL exacta del recurso para encontrar la referencia insegura.

Un informe de error útil describe una diferencia observable: «Con un ancho de 360px, la página de contacto se desplaza horizontalmente». Es más fácil de investigar que «la disposición para móviles está rota». Anota la dirección de la página, el navegador, el ancho de pantalla, el resultado real y el resultado esperado.

Sigue los indicios en cinco pasos

1. Reproduce. Haz que el problema vuelva a aparecer en las mismas condiciones.
2. Reúne indicios. Lee Consola y Red, valida el código e inspecciona el elemento afectado.
3. Aísla. Desactiva una regla o elimina temporalmente una pequeña parte del código para acotar la causa.
4. Cambia una cosa. Comprueba si ese cambio explica el resultado.
5. Guarda y vuelve a probar. Aplica la corrección en el código fuente, recarga y comprueba otras condiciones.

Cambiar varias cosas a la vez dificulta interpretar el resultado. Un cambio puede resolver el problema original mientras otro crea uno nuevo. Mantén disponible el caso que falla para poder comparar el antes y el después.

Resuelve un desbordamiento en pantalla estrecha

Una página cabe en una computadora portátil, pero se desplaza horizontalmente con un área de visualización de 360px. Abre el modo de diseño adaptable con ese ancho. Pasa el puntero sobre los elementos en Elementos y observa sus cajas resaltadas. Una imagen es más ancha que su columna; su HTML le da un ancho intrínseco grande y ningún CSS lo limita.

Prueba esta regla:

img {
  max-width: 100%;
  height: auto;
}

El ancho máximo permite que la imagen se reduzca hasta caber en su contenedor. La altura automática conserva sus proporciones. Si el desbordamiento desaparece, guarda esa regla en la hoja de estilo correcta y recarga. Después prueba también la imagen con anchos mayores. Ocultar el desbordamiento horizontal de la página podría ocultar parte de la imagen sin hacer que quepa.

Si el cambio no hace nada, usa los indicios para acotar el siguiente paso. ¿Aparece la regla en Estilos? ¿Otra regla prevalece sobre ella? ¿Cargó el navegador el archivo que editaste? Las causas comunes incluyen nombres de clase que no coinciden, rutas incorrectas, llaves o puntos y coma que faltan, archivos sin guardar y copias en caché.

Prueba motores y tamaños de ventana

El modo de diseño adaptable cambia el ancho del área de visualización y puede simular la interacción táctil, pero no reproduce todos los detalles de velocidad, fuentes o renderizado de un teléfono real. Comprueba los puntos de ruptura de las consultas de medios y los anchos intermedios y después usa al menos un teléfono real.

Chrome y Edge usan Blink, Firefox usa Gecko y Safari usa WebKit. Dos navegadores que usan el mismo motor no ofrecen la misma amplitud de pruebas que los navegadores con motores distintos. Safari es especialmente relevante para los muchos navegadores de iPhone que usan WebKit. Consulta la información de compatibilidad de MDN antes de depender de una función más reciente.

Comprueba la versión publicada

El comportamiento del servidor puede revelar fallos ocultos al trabajar desde el disco: nombres que distinguen mayúsculas de minúsculas, archivos que no se cargaron y rutas que omiten una subcarpeta del proyecto. Abre la dirección publicada, sigue los enlaces e inspecciona allí las solicitudes fallidas.

Antes de publicar, valida el HTML y el CSS, inspecciona los errores de la Consola, comprueba que no haya errores 404 inesperados, prueba anchos de teléfono, tableta y escritorio y comprueba al menos dos motores de navegador. Usa el teclado para recorrer la navegación y activar controles. Después del despliegue, repite las comprobaciones en el sitio publicado allí donde se use la función modificada.

Una imagen optimizada es un archivo pequeño que sigue viéndose bien al tamaño al que se muestra. Empieza por el formato, las dimensiones en píxeles y la compresión. Reducir una foto demasiado grande con CSS cambia su apariencia, pero el navegador sigue descargando y decodificando el archivo original.

Adapta el formato al contenido

Las imágenes de mapa de bits almacenan píxeles. Al ampliar una imagen pequeña de mapa de bits aparece borrosidad porque no se crean detalles adicionales. SVG almacena formas y líneas, por lo que es adecuado para un logotipo, pero no para una foto de cámara. Los navegadores principales actuales admiten WebP y AVIF. Para animaciones, un formato de imagen moderno o un vídeo corto suelen generar un archivo más pequeño que GIF.

La compresión sin pérdida conserva los valores de los píxeles. La compresión con pérdida elimina algunos detalles para ahorrar más bytes. Una calidad menor acaba produciendo zonas cuadriculadas o bordes borrosos. Compara la exportación al tamaño real al que se muestra. Haz cada nueva exportación desde el original y evita guardar repetidamente con pérdida una copia ya comprimida.

Cambia las dimensiones para el mayor uso

Una foto que se muestra con un ancho máximo de 800 píxeles CSS necesita unos 800 píxeles de imagen en una pantalla de densidad estándar y 1600 en una pantalla que usa dos píxeles del dispositivo por píxel CSS. Prepara alternativas adecuadas en lugar de enviar el original de la cámara a todo el mundo.

El original del taller de bicicletas tiene 4000 × 3000 píxeles y ocupa 3,6 MB. Una exportación de 1600 × 1200 tiene:

píxeles, o el 16 % de los 12 millones del original. Una exportación JPEG con calidad 80 podría ocupar unos 240 KB; el tamaño real depende de la foto. Ese ejemplo ahorra aproximadamente el 93 % de los bytes del archivo.

A 10 Mbit/s, usando MB decimales, el tiempo de transferencia ideal del original es:

segundos. La exportación de 0,24 MB tarda unos 0,19 segundos. Estos son solo tiempos de transferencia; la carga real también incluye las demoras de conexión y del servidor. Al decodificar con 4 bytes por píxel, el uso de memoria baja de 48 MB a 7,68 MB. Un archivo codificado más pequeño y menos píxeles decodificados son dos mejoras distintas.

Exporta una copia pública

Usa los controles de exportación de un editor de imágenes o una herramienta como Squoosh. Conserva el original fuera de la carpeta publicada y da a las exportaciones nombres claros como workshop-800.jpg y workshop-1600.jpg. Elimina los metadatos de la cámara durante la exportación; pueden incluir la fecha de la foto, los datos de la cámara y la ubicación GPS.

Para un SVG, un optimizador como SVGO elimina los datos sobrantes del programa de dibujo. La compresión de texto en el servidor puede reducir aún más su tamaño de transferencia. Sea cual sea el formato, inspecciona la imagen terminada: una foto guardada como PNG puede ser innecesariamente grande, mientras que un logotipo con mucho texto guardado como JPEG puede tener bordes difuminados.

Una imagen puede ser lo bastante pequeña para descargarse rápido y aun así hacer que la página dé un salto. El navegador necesita conocer sus proporciones antes de que llegue y disponer de opciones útiles para distintas pantallas.

Reserva espacio con las dimensiones

Escribe atributos width y height numéricos sin unidades:

<img src="images/workshop-800.jpg"
     width="800" height="600"
     alt="Mechanic adjusting the brakes of a city bike">

Estas dimensiones indican al navegador la relación de aspecto 4:3. Con max-width: 100%; height: auto; en CSS, la imagen se reduce para caber en una columna estrecha. En una columna de 360px de ancho, su altura es:

píxeles. Reservar ese espacio evita que el texto inferior se desplace hacia abajo cuando se carga la imagen. La falta de dimensiones puede producir desplazamientos del diseño, los movimientos inesperados que mide CLS.

Ofrece anchos que el navegador pueda elegir

Para la misma foto en dos tamaños, usa descriptores de ancho y una descripción de su ancho de visualización:

<img src="images/workshop-800.jpg"
     srcset="images/workshop-800.jpg 800w,
             images/workshop-1600.jpg 1600w"
     sizes="(max-width: 840px) 100vw, 800px"
     width="800" height="600"
     alt="Mechanic adjusting the brakes of a city bike">

800w y 1600w indican los anchos reales de los archivos. En esta disposición, sizes indica que la imagen ocupa el ancho del área de visualización hasta 840px y 800px por encima de ese valor. El navegador usa el ancho declarado para la imagen, la densidad de pantalla y sus reglas de selección para elegir un archivo. Haz que sizes coincida con la disposición real; indicar que ocupa toda el área de visualización cuando la columna es mucho más estrecha puede causar descargas innecesarias.

Ofrece formatos con una alternativa

<picture>
  <source srcset="images/workshop.avif" type="image/avif">
  <source srcset="images/workshop.webp" type="image/webp">
  <img src="images/workshop.jpg" width="800" height="600"
       alt="Mechanic adjusting the brakes of a city bike">
</picture>

El navegador elige el primer formato de origen compatible. El <img> obligatorio proporciona la alternativa, las dimensiones y el texto alternativo. Esta es una elección de formato; srcset con descriptores de ancho resuelve el problema relacionado de elegir un ancho adecuado en píxeles.

Retrasa las imágenes que aún no se necesitan

Usa loading="lazy" para las imágenes situadas más abajo en una página. El navegador puede esperar hasta que el visitante se acerque a ellas, lo que ahorra datos de las imágenes a las que nunca llega. Mantén la carga inmediata de las imágenes visibles al principio, especialmente la gran imagen principal destacada. La carga diferida de esa imagen retrasa el contenido que los visitantes esperan ver. Una imagen principal en el HTML se descubre pronto; fetchpriority="high" puede solicitar una mayor prioridad de descarga para ella.

Escribe texto alt según la finalidad de la imagen en su contexto. Una imagen decorativa lleva alt="". Las fotos y los diagramas que aportan contenido deben estar en el HTML como imágenes; un fondo CSS es adecuado para la decoración y no tiene atributo alt ni atributo loading nativo.

El peso de la página es la cantidad total de datos descargados para una página. El HTML da lugar a solicitudes de CSS, imágenes, scripts y fuentes. Los tamaños de los archivos, el número de solicitudes, la velocidad de conexión y el rendimiento del dispositivo contribuyen a la experiencia.

Encuentra la parte más grande

La página de inicio del taller de bicicletas descarga 15 KB de HTML, 30 KB de CSS, dos fuentes de 40 KB, una imagen principal de 2400 KB y tres fotos de 350 KB:

KB. Las imágenes representan 3450 KB, aproximadamente el 96,5 %. Con una imagen principal de 220 KB y tres fotos de 45 KB, el total pasa a ser:

KB, aproximadamente un 87 % menos. A 10 Mbit/s, el tiempo de transferencia ideal baja de unos 2,86 segundos a 0,38 segundos. La respuesta del servidor y el establecimiento de la conexión añaden tiempo. Eliminar unos pocos espacios del CSS tendría poco efecto en comparación con este ahorro en imágenes.

Interpreta las medidas de experiencia

Las Core Web Vitals, a octubre de 2026, miden distintos problemas:

Un buen rendimiento en los datos de campo cumple cada umbral en el percentil 75. CLS puede incluir un banner que desplaza contenido después de la carga, no solo una imagen que llega durante la carga inicial.

Lighthouse en Chrome o Edge ejecuta una prueba de laboratorio con puntuaciones y correcciones sugeridas. PageSpeed Insights ejecuta pruebas en línea y, cuando hay suficientes observaciones, muestra datos de campo de visitas reales de Chrome. Una puntuación de laboratorio es una prueba en unas condiciones elegidas. Repite las comparaciones con la misma configuración y consulta las visitas reales cuando haya datos disponibles.

Mejora primero lo que más recursos consume

Prepara primero las imágenes y su marcado. Después reduce las familias y variantes de grosor innecesarias, usa fuentes WOFF2 y usa font-display: swap para que aparezca texto con una fuente alternativa mientras se carga la fuente. Añade defer a los scripts externos adecuados para que la descarga no bloquee el análisis del HTML y la ejecución se produzca después de ese análisis. Los mapas grandes, reproductores de vídeo y otros contenidos insertados de terceros pueden cargarse a demanda.

La minificación elimina espacios y comentarios del código. La compresión con gzip o Brotli reduce los bytes de texto transferidos. Ambas ayudan, pero las imágenes JPEG, WebP y AVIF, ya comprimidas, se benefician poco de una compresión adicional como la que se aplica al texto.

El uso de caché permite que los visitantes que regresan reutilicen archivos, y se controla mediante cabeceras como Cache-Control. Una CDN conserva copias en distintas regiones para reducir la distancia que recorren las solicitudes. Cuando cambia un recurso que permanece mucho tiempo en caché, un nombre como styles-v2.css o una dirección como styles.css?v=2 hace que se realice una nueva solicitud. Prueba con limitación de la velocidad de red y en un teléfono; una computadora portátil rápida con Wi-Fi puede ocultar una experiencia móvil lenta.

Cada página debe explicar su propia finalidad en su HTML. Los buscadores leen ese marcado, y las pestañas del navegador, los marcadores y los lectores de pantalla también dependen de él. Una estructura clara comienza con el contenido que los visitantes pueden leer realmente.

Nombra la página en la cabecera

El elemento <title> va dentro de <head>. Da a cada página su propio título descriptivo, con el nombre del sitio después del tema específico:

<title>Repair Prices – Riverside Bike Repair</title>
<meta name="description"
      content="Prices for flat repairs, brake adjustments and full services at Riverside Bike Repair. Walk in Monday to Saturday or book online.">

El título aparece en la pestaña del navegador y en los marcadores y normalmente aporta el titular de los resultados de búsqueda. HTML no impone un límite de longitud al título, pero los resultados de búsqueda recortan el texto para que quepa, así que coloca las palabras útiles al principio. Un título genérico como «Inicio» aporta poca información cuando aparece separado del sitio.

La metadescripción es un resumen legible de la página de una o dos frases. Los buscadores pueden usarla para el fragmento de un resultado, pero también pueden seleccionar texto de la página. Adapta la descripción al contenido de esa página. Copiar una misma descripción en todas las páginas oculta las diferencias entre ellas; una lista de palabras clave repetidas no es un resumen útil. Google ignora la antigua etiqueta meta keywords.

Declara el idioma y los caracteres

Usa <html lang="en"> para una página en inglés. Ayuda a los lectores de pantalla a elegir la pronunciación y a los navegadores a gestionar las funciones de idioma. Google identifica el idioma a partir del texto visible e ignora este atributo, así que no lo trates como un ajuste del idioma para Google.

Coloca <meta charset="utf-8"> al principio de la cabecera para que caracteres como é y una raya corta se muestren correctamente. Incluye la etiqueta meta del área de visualización que se usa para páginas adaptables:

<meta name="viewport" content="width=device-width, initial-scale=1">

Haz que el esquema corresponda a las ideas

Usa un <h1> claro para el tema principal de la página, <h2> para sus secciones principales y <h3> para las subsecciones. En la página de precios, «Servicios» es un h2, con «Servicio básico» y «Servicio completo» como encabezados h3 debajo. Elige los niveles de encabezado según esta relación; ajusta sus tamaños visuales con CSS.

Los elementos semánticos identifican funciones: <nav> para la navegación, <main> para el contenido principal y los elementos <header>, <article>, <section> y <footer> adecuados. Usa listas reales, enlaces para navegar y botones para las acciones. Una página de divisiones genéricas pierde estas señales de función. Mantén las palabras importantes, como precios, horarios de apertura y encabezados, en texto HTML, donde están disponibles como texto para los visitantes y las herramientas.

Configura una vista previa útil del enlace compartido

Las etiquetas Open Graph describen una vista previa del enlace en aplicaciones sociales y de mensajería. Las propiedades habituales son og:title, og:description y og:image:

<meta property="og:title" content="Repair Prices">
<meta property="og:image"
      content="https://www.example.com/images/workshop-800.jpg">

Usa una URL HTTPS completa para la imagen de vista previa. Estas etiquetas describen la tarjeta compartida; no sustituyen los encabezados visibles de la página ni su título y descripción habituales.

El rastreo consiste en obtener páginas, a menudo siguiendo enlaces. La indexación consiste en almacenar información sobre esas páginas para los resultados de búsqueda.

Da a cada página una vía de acceso

Enlaza cada página desde al menos otra página con un enlace <a href> normal. Un texto descriptivo como «precios de reparación» indica a los visitantes y a los rastreadores qué contiene el destino. Una ruta legible como /blog/winter-checklist.html da más contexto que /page7.html.

Un mapa del sitio enumera las URL preferidas completas que quieres que se descubran. Una entrada XML puede ser así:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/prices.html</loc>
    <lastmod>2026-10-01</lastmod>
  </url>
</urlset>

La fecha opcional de última modificación debe representar un cambio significativo. Actualiza el mapa del sitio a medida que cambien las páginas. Un sitio pequeño y bien enlazado puede descubrirse sin un mapa del sitio.

Distingue los controles de rastreo e indexación

Un archivo robots.txt en la raíz del dominio indica a los rastreadores que respetan sus reglas qué rutas no deben obtener:

User-agent: *
Disallow: /drafts/
Sitemap: https://www.example.com/sitemap.xml

Esto no bloquea el acceso a la carpeta. Las personas pueden abrir sus direcciones y una URL bloqueada aún puede aparecer en los resultados si otras páginas la enlazan. Sin un archivo robots.txt, los rastreadores tienen permiso para obtener las páginas. Una línea Disallow: / copiada bloquea el rastreo de todo el sitio, así que elimina el bloqueo de un sitio de prueba antes del lanzamiento cuando el sitio deba rastrearse.

Para solicitar que una página se excluya de los resultados de búsqueda, coloca esto en su cabecera:

<meta name="robots" content="noindex">

El rastreador debe obtener la página para leer esa instrucción. Bloquear la misma URL en robots.txt puede impedir que descubra noindex. Ninguna de las dos configuraciones hace privada una página: el contenido privado necesita control de acceso o debe permanecer fuera del sitio público.

Elige una dirección para el contenido duplicado

Una página puede responder en direcciones HTTP y HTTPS, con y sin www, o tanto en /blog/ como en /blog/index.html. Un enlace canónico identifica la dirección preferida:

<link rel="canonical" href="https://www.example.com/blog/">

Usa la URL absoluta completa. El marcado canónico es una indicación importante; una redirección que envía realmente a los visitantes a la dirección preferida es una señal más fuerte. Haz que los enlaces internos y las URL del mapa del sitio coincidan con esa preferencia para evitar señales contradictorias.

Comprueba qué pueden ver los buscadores

Google Search Console y Bing Webmaster Tools aceptan mapas del sitio y muestran problemas de indexación y rastreo después de que verifiques que controlas el sitio. Una búsqueda de site:example.com da una visión aproximada de las páginas indexadas. Los sitios nuevos pueden tardar días o semanas en aparecer. Un mapa del sitio, un marcado claro o un pago no pueden garantizar una posición alta; estas herramientas te ayudan a encontrar obstáculos técnicos y a entender qué se ha procesado.

Un sitio web estático sirve archivos HTML, CSS, de imagen y de scripts preparados. Su contenido puede actualizarse cada vez que publicas archivos nuevos; «estático» describe cómo los sirve el proveedor de alojamiento. El servidor de alojamiento sigue entregándolos cuando tu propia computadora está apagada.

Conoce lo que ofrece el proveedor

Un sitio web dinámico construye respuestas en el servidor, a menudo a partir de una base de datos. Un pequeño sitio informativo o portafolio creado con HTML y CSS puede usar alojamiento de sitios estáticos sin programación del lado del servidor. Añadir el marcado de un formulario de contacto no crea por sí solo un servicio que guarde o envíe por correo los datos recibidos. Eso requiere un servicio de procesamiento de formularios del proveedor de alojamiento o un servicio independiente.

Los proveedores de alojamiento de sitios estáticos suelen ofrecer una dirección temporal, controles de publicación y HTTPS. Muchos sirven archivos mediante una red de distribución de contenidos, que conserva copias regionales. GitHub Pages, Netlify, Cloudflare Pages y Vercel son ejemplos, con distintas condiciones de plan y procesos de trabajo. El alojamiento compartido es otra opción y a menudo admite la transferencia segura de archivos.

Una página estática puede seguir ejecutando JavaScript en el navegador del visitante, por ejemplo, para la interacción con un menú. El proveedor sigue sirviendo un archivo de script preparado. Sin código de aplicación del sitio ni base de datos ejecutándose en el servidor, hay menos componentes de la aplicación que atacar; la cuenta de alojamiento y los archivos públicos siguen necesitando protección.

Un sitio de usuario de GitHub Pages usa la dirección raíz https://username.github.io/ desde un repositorio llamado username.github.io. Un sitio de proyecto usa una subcarpeta como /riverside-bikes/. Esa estructura de dirección importa al probar rutas de recursos relativas a la raíz.

Compara las necesidades con el plan actual

Lee los límites y las condiciones del plan antes de elegir. Comprueba:

• Las cantidades permitidas de almacenamiento y transferencia mensual de datos.
• Si el plan permite el uso comercial.
• La compatibilidad con dominios personalizados y el HTTPS automático.
• Un método de publicación que puedas usar de forma fiable.
• Las páginas de error personalizadas, las redirecciones y la recuperación de despliegues anteriores.
• El procesamiento de formularios si los visitantes deben enviar información.
• La facilidad con que puedes llevar tus archivos a otro proveedor de alojamiento.

Un portafolio de fotógrafo de seis páginas con 40 fotos preparadas cabe en muchos planes gratuitos de alojamiento de sitios estáticos. Sin embargo, si atrae trabajos remunerados, su finalidad comercial también importa. El tamaño por sí solo no demuestra que un plan gratuito lo permita. Las condiciones cambian, así que comprueba el servicio y el plan concretos en lugar de depender de una comparación antigua.

Elige una vía de publicación que puedas manejar

La publicación mediante arrastrar y soltar puede ser adecuada para un proyecto pequeño: cargas la carpeta mediante la interfaz del proveedor. Una conexión a un repositorio publica desde una fuente de código almacenada y elegida y puede desplegar actualizaciones cuando se envían cambios. Las herramientas de línea de comandos ofrecen otra vía. El alojamiento compartido suele admitir SFTP, un método cifrado de transferencia de archivos. FTP sin cifrar expone las credenciales y los archivos durante la transferencia, así que usa una vía segura.

En el plan gratuito de GitHub Pages se puede publicar desde repositorios públicos. Cualquiera puede leer los archivos del repositorio. Los recursos publicados también son públicos, aunque la navegación no los enlace. Limita la carga a los archivos destinados a ser públicos y protege la cuenta de alojamiento con autenticación de dos factores.

Comprueba cada función en su proceso real

Si el sitio incluye un formulario de contacto, localiza el punto de recepción del formulario o la función del proveedor que lo recibe. Confirma que el plan incluye esa función y envía un formulario de prueba después del lanzamiento. Un formulario que parece completo puede no tener ningún lugar al que enviar los datos. Si una página 404 personalizada o una redirección permanente es importante, confirma el método exacto de configuración del proveedor antes de depender de ella.

Desplegar consiste en publicar los archivos actuales del sitio en un alojamiento. El directorio de publicación se convierte en la raíz del sitio en línea. Para HTML y CSS sin herramientas adicionales, no hay una fase de compilación: selecciona la carpeta que contiene el index.html terminado y sus recursos.

Haz la primera publicación

Para un alojamiento que permite arrastrar y soltar:

1. Abre la carpeta que quieres publicar y confirma que index.html esté directamente dentro de ella.
2. Valida las páginas y prueba sus enlaces y su disposición mediante un servidor local.
3. Carga esa carpeta mediante la interfaz de publicación del proveedor.
4. Espera hasta que el proveedor indique que el despliegue está publicado.
5. Abre la dirección web proporcionada y comprueba allí el sitio.

Si la página de inicio solo aparece en /riverside-bikes/index.html, es posible que hayas cargado la carpeta contenedora de un nivel superior. El directorio de publicación previsto es riverside-bikes/, no la carpeta que lo contiene. Corrige la selección del directorio y vuelve a publicar; limitarse a enlazar a los visitantes con la dirección anidada deja incorrecta la dirección de inicio sin ruta.

Publica desde un repositorio

En GitHub Pages, abre Settings y Pages del repositorio. Elige «Deploy from a branch», selecciona la rama y la carpeta de publicación, ya sea su raíz o /docs, y guarda. Cuando se envía una versión nueva a esa fuente de publicación, Pages la despliega de nuevo. Comprueba la dirección de Pages que se muestra después de que termine el despliegue. Una URL de proyecto puede incluir el nombre del repositorio, así que prueba las rutas en esa ubicación real.

Otros proveedores tienen sus propias opciones de conexión al repositorio y configuración del directorio. Para un sitio creado con archivos sin herramientas adicionales, no añadas un comando de compilación solo porque la interfaz ofrezca un campo para ello.

Comprueba la versión servida

Abre todas las páginas, sigue los enlaces internos e inspecciona Consola y Red en busca de recursos que no se hayan cargado. Fuerza una recarga completa para no confundir los archivos en caché con la nueva versión. Prueba el sitio en un teléfono real. Comprueba que se vea el cambio que querías publicar, no solo la ausencia de un mensaje de error.

Configura una página 404.html personalizada cuando el proveedor lo permita. Debe informar al visitante de que no se encontró la dirección y ofrecer una forma útil de volver al inicio. Prueba una dirección inexistente inventada para verificar que el proveedor la usa realmente. Una página de error útil no sustituye una redirección cuando el contenido se ha trasladado.

Conserva una fuente que puedas recuperar

El proyecto local o el repositorio conectado es la fuente de referencia, la copia a partir de la cual se crean las publicaciones futuras. Una corrección rápida en el editor web de un proveedor puede desaparecer en la siguiente carga, a menos que también la incorpores a esa fuente.

Usa un despliegue de vista previa cuando esté disponible para probar una actualización antes de que llegue a los visitantes. Si una actualización rompe el sitio publicado, la reversión a una versión anterior del proveedor puede restaurar un despliegue previo. Después corrige también la fuente, o la siguiente publicación podría reintroducir el fallo.

Cuando una página cambie de dirección, añade una redirección 301 permanente de la URL antigua a la nueva mediante las reglas de redirección del proveedor. Prueba la dirección antigua después de publicar: debe llevar a la nueva página prevista. En Netlify, un archivo _redirects es una forma de configurarla; otros proveedores usan ajustes diferentes.

Un nombre de dominio es un nombre legible como example.com. DNS conecta ese nombre con información como la dirección IP de un servidor. El registro te da el derecho a usar el nombre durante un periodo; no es una compra permanente.

Interpreta una dirección web

En https://www.example.com/prices.html, https es el esquema, www.example.com es el nombre del anfitrión y /prices.html es la ruta. Lee las etiquetas del dominio de derecha a izquierda: .com es el dominio de nivel superior o TLD; example es el nombre registrado bajo él; www es un subdominio.

Los TLD genéricos incluyen .com, .org, .net, .dev, .shop y .studio. Los TLD de código de país usan dos letras, como .de, .fr, .jp, .ca y .au. Algunos nombres se registran bajo una categoría de segundo nivel, como .co.uk.

Algunas terminaciones tienen requisitos. .ca exige una vinculación con Canadá; .eu acepta ciudadanos, residentes y organizaciones establecidas de la UE o el EEE que cumplan los requisitos; .us exige una vinculación con Estados Unidos. Comprueba las reglas del operador del registro antes de elegir una terminación restringida. Las terminaciones .dev y .app requieren HTTPS en los navegadores.

Conoce quién gestiona el registro

Un registrador de dominios inscribe tu registro ante el operador del registro de dominios que administra el TLD. ICANN coordina el sistema de TLD genéricos y acredita a sus registradores; los operadores de registros de código de país establecen sus propias reglas. Los registros suelen durar de uno a diez años y necesitan renovación.

Elige un nombre corto, fácil de decir y escribir, y cercano al nombre del proyecto o negocio. Evita números y guiones confusos y comprueba que el nombre no use una marca comercial ajena. Si un nombre .com preferido está ocupado, compara un nombre más largo y claro, una terminación local adecuada o una terminación genérica pertinente. Que un nombre esté disponible no autoriza a usar el nombre de otro negocio.

Compara el compromiso a largo plazo

Comprueba el precio de renovación además de la oferta del primer año. Los servicios adicionales, incluido el correo electrónico, pueden tener cargos separados. El dominio y el alojamiento del sitio web pueden proceder de empresas diferentes; registrar un dominio no carga por sí solo un sitio web.

Proporciona datos correctos del titular y de contacto y responde al correo de verificación del registrador. Los datos de contacto no confirmados pueden provocar la suspensión. Para la información de registro de TLD genéricos, RDAP se convirtió en la vía definitiva de consulta pública en enero de 2025, sustituyendo los requisitos del antiguo servicio WHOIS. La consulta pública suele ocultar los datos personales; el registrador sigue necesitando registros correctos.

Mantén el control en manos del propietario

El propietario del proyecto o negocio debe controlar la cuenta del titular del dominio, incluso cuando un diseñador crea el sitio. Activa la autenticación de dos factores y mantén actualizados los datos de recuperación. Para cambiar de registrador, sigue el proceso de transferencia, que incluye un código de transferencia y el desbloqueo del dominio cuando corresponda.

Anota la fecha de vencimiento, activa la renovación y mantén vigente el método de pago. Un registro vencido puede interrumpir el sitio web y el correo del dominio; después de los periodos de gracia y eliminación aplicables, otra persona puede registrar el nombre. Las copias de seguridad del alojamiento no pueden conservar un registro de dominio que hayas dejado vencer.

El sistema de nombres de dominio, o DNS, almacena registros asociados a nombres. Un resolvedor consulta esos registros y suele conservar una respuesta en caché. Los servidores de nombres autoritativos son los servidores responsables de la información DNS del dominio. Haz los cambios en el proveedor cuyos servidores de nombres sirven realmente el dominio.

Elige el tipo de registro

Las direcciones IP y el nombre .example de aquí son valores para documentación. Para una conexión real, usa los valores que tu proveedor de alojamiento proporciona para tu sitio.

El dominio raíz es el nombre raíz registrado, como example.com. El DNS estándar no permite allí un CNAME porque el dominio raíz también necesita otros registros, incluidos los NS. Usa los valores A y AAAA del proveedor de alojamiento o una función ALIAS, ANAME o de aplanamiento de CNAME admitida por el proveedor de DNS. Un subdominio como www suele usar un CNAME.

Conecta dos formas de una dirección

Supón que un proveedor de alojamiento solicita un registro A para el dominio raíz y un CNAME para www. Un proveedor de DNS que usa @ para el dominio raíz podría mostrar:

Type    Name    Value                           TTL
A       @       192.0.2.44                       3600
CNAME   www     riverside-bikes.pages.example    3600

Introduce también el dominio personalizado en la configuración del alojamiento. El proveedor debe reconocer el nombre solicitado y asignarlo al sitio. Elige la dirección principal y configura la otra forma para que redirija a ella.

Lee las instrucciones del proveedor sobre el campo de nombre. Si añade automáticamente example.com, escribir www.example.com puede crear www.example.com.example.com. Elimina los registros de dirección obsoletos al cambiar de proveedor de alojamiento; dejar los valores antiguos y los nuevos puede enviar a los visitantes a servidores diferentes.

Deja que venzan las respuestas en caché

El TTL, o tiempo de vida, indica cuántos segundos puede permanecer en caché una respuesta DNS. Un TTL de 3600 es una hora; 86 400 son 24 horas. Después de una actualización, distintos visitantes pueden recibir temporalmente respuestas diferentes. Los cambios pueden tardar 24 horas o más en verse en todas partes.

Para un traslado planificado, reduce el TTL a 300 segundos al menos un periodo del TTL anterior antes del cambio. Reducirlo en el momento del cambio no puede acortar la duración de una respuesta que ya está en caché con el TTL anterior.

Traslada el DNS sin perder otros servicios

Puedes dejar el DNS en el registrador y editar los registros, o cambiar los servidores de nombres a un proveedor nuevo. Un cambio de servidores de nombres no copia los registros. Vuelve a crear y comprueba los registros MX, TXT y demás registros necesarios en el nuevo proveedor antes de cambiar, especialmente cuando el correo del dominio ya funciona.

Comprueba las respuestas con nslookup www.example.com, dig example.com A +short o un servicio de consulta DNS, y compáralas con la configuración del proveedor de alojamiento. Añade registros comodín solo de forma deliberada y cuando el proveedor los admita. Cuando elimines un sitio alojado, elimina también los registros DNS que apuntan a él; un alias olvidado puede permitir que otra persona reclame el destino abandonado en el alojamiento.

HTTPS envía HTTP a través de una conexión TLS cifrada. Protege la privacidad y la integridad de los datos en tránsito y permite que el navegador autentique el servidor para el dominio solicitado. HTTP sin cifrar expone los datos a quienes pueden observar la conexión.

Un certificado identifica el dominio

Un certificado TLS vincula un nombre de dominio a una clave pública y está firmado por una autoridad de certificación de confianza. Enumera los nombres que cubre y su vencimiento. Si los visitantes usan tanto example.com como www.example.com, el certificado debe cubrir ambos nombres, incluso cuando uno redirige al otro: el navegador se conecta de forma segura antes de recibir esa redirección.

Una conexión HTTPS no es un juicio sobre la honestidad de un negocio. Un sitio fraudulento puede obtener un certificado para un nombre que controla. La protección de la conexión y la fiabilidad del sitio son cuestiones distintas.

Deja que el proveedor lo emita y renueve

Muchos proveedores de alojamiento de sitios estáticos solicitan automáticamente un certificado gratuito, a menudo a Let's Encrypt, una vez que el DNS apunta al alojamiento y el dominio está configurado. La autoridad de certificación comprueba el control del nombre, por ejemplo, mediante un registro DNS o un archivo obtenido a través de la web. La emisión puede tardar desde unos minutos hasta aproximadamente un día.

A octubre de 2026, los certificados de servidor TLS de confianza pública recién emitidos tienen una duración máxima de 200 días según las reglas vigentes desde el 15 de marzo de 2026. El máximo pasa a 100 días en marzo de 2027 y a 47 días en marzo de 2029. Los certificados clásicos predeterminados de Let's Encrypt duran actualmente 90 días y también hay perfiles de menor duración. La renovación automática evita tener que repetir este trabajo manualmente.

En un ejemplo de 90 días, un certificado emitido el 1 de marzo de 2026 vence el 30 de mayo. Una renovación cuando queden 30 días se produciría alrededor del 30 de abril. La fecha de vencimiento real y el estado de la renovación están disponibles en el proveedor de alojamiento o en los detalles del certificado; no supongas que un registro de dominio vigente también significa que el certificado está al día.

Redirige a HTTPS y corrige los recursos inseguros

Activa el uso obligatorio de HTTPS del proveedor de alojamiento. Redirige las solicitudes http:// a la dirección HTTPS, normalmente con estado 301 o 308. Elige también un nombre de anfitrión principal, con o sin www, y redirige el otro hacia él.

El contenido mixto se produce cuando una página HTTPS solicita un recurso mediante http://. Los navegadores bloquean los scripts, las hojas de estilo, los marcos y las fuentes inseguros. Intentan actualizar algunas solicitudes de contenido multimedia a HTTPS, lo que falla si el origen no puede servirlo. Comprueba los mensajes de la Consola y busca http:// en el código. Usa rutas relativas para tus propios archivos y URL HTTPS que funcionen para los recursos externos.

HSTS indica a los navegadores que usen HTTPS durante un periodo determinado. Actívalo cuando HTTPS funcione de forma fiable; los navegadores que hayan recibido la política no volverán a usar HTTP sin cifrar durante ese periodo. Las terminaciones .dev y .app están precargadas para funcionar solo con HTTPS.

Si aparece una advertencia de certificado después de conectar un dominio, comprueba el DNS, el estado de emisión y los nombres cubiertos. El dominio raíz puede funcionar mientras que www falla si solo está cubierto el nombre raíz. Corrige la configuración y espera a la emisión cuando sea necesario; los visitantes no deben ignorar una advertencia de certificado.

Un sitio publicado cambia incluso cuando sus archivos no cambian. Los enlaces externos se trasladan, los datos de contacto quedan desactualizados, los dominios se acercan al vencimiento y los widgets de terceros cambian. El mantenimiento mantiene correcto el contenido y fiable su entrega.

Sigue el mismo proceso para cada actualización

Edita el proyecto local o el repositorio, prueba en un navegador, valida el código afectado, despliega y verifica las páginas publicadas. Crea una vista previa cuando el proveedor de alojamiento lo permita. Comprueba que una corrección que funciona esté en la copia utilizada para futuras publicaciones para que no se pierda en la siguiente carga.

Un cambio de contenido también merece una comprobación del contenido. Confirma las fechas, los horarios de apertura, los precios y los datos de contacto con su fuente actual. Asigna a las páginas una persona responsable o una fecha de revisión. Elimina o sustituye la información que ya no describa el servicio; un aviso de un evento antiguo puede confundir a los visitantes aunque todas las etiquetas sean válidas.

Comprueba los enlaces y las tareas de los visitantes

El deterioro de los enlaces es el fallo gradual de los enlaces a medida que las páginas de destino se trasladan o desaparecen. Usa un comprobador de enlaces como el W3C Link Checker y después verifica y repara los fallos señalados. Cuando se haya trasladado una página propia, una redirección conserva los enlaces entrantes antiguos. Para una página externa, actualiza el destino o elimina el enlace si no existe una alternativa útil.

Prueba tareas reales de los visitantes. Envía una prueba del formulario de contacto y confirma que llegue. Recorre la navegación con un teclado. Prueba la disposición en un teléfono. Una comprobación de disponibilidad que recibe una página no puede demostrar que funcionen un formulario o la navegación.

Conserva copias recuperables

Guarda copias de seguridad del código fuente y los recursos necesarios en al menos dos lugares, como una computadora y una unidad externa, almacenamiento en la nube o un repositorio. Un problema con la cuenta de alojamiento o un despliegue equivocado pueden eliminar la copia publicada, así que el alojamiento del sitio publicado no debe ser tu única copia de seguridad. El historial de versiones puede permitir recuperar versiones anteriores. Conserva información suficiente para volver a conectar el dominio y publicar el sitio.

Protege las renovaciones y el acceso a las cuentas

Activa la renovación automática del dominio y mantén vigente el método de pago. Comprueba la fecha de vencimiento y los mensajes de confirmación. Asegúrate de que las cuentas del registrador y del proveedor de alojamiento usen autenticación de dos factores y tengan datos de recuperación actualizados. La renovación del certificado también depende de una configuración funcional del dominio, así que comprueba HTTPS después de cambios en el DNS.

Un monitor de disponibilidad comprueba el sitio repetidamente y te avisa cuando deja de responder. Las herramientas para administradores de sitios web pueden revelar fallos de rastreo y errores 404 de direcciones antiguas. Revisa esos informes y después prueba el problema subyacente en lugar de suponer que todas las alertas tienen la misma causa.

Programa el trabajo según el tipo de cambio

Las fuentes, los scripts, los mapas y otros contenidos insertados de terceros pueden ralentizarse, cambiar o desaparecer independientemente de tu sitio. Usa pocos y revisa si siguen siendo necesarios. Cuando una licencia lo permita, alojar una copia local de un recurso puede reducir la dependencia de otro servidor. Vuelve a comprobar su licencia y sus necesidades de actualización cuando lo sustituyas.