Más de 30 millones de sitios web activos utilizan WordPress, según datos de BuiltWith. Muchos de esos sitios web son dinámicos, pero un número cada vez mayor son estáticos, y por una buena razón. Los sitios web estáticos pueden ser más rápidos, más seguros y más fáciles de escalar que los dinámicos.
En este artículo, veremos más de cerca lo que significan los sitios web estáticos en 2022 y algunos ejemplos. A continuación, explicaremos cómo crear una página web estática con WordPress y qué proveedores de alojamiento estático, plugins y temas pueden ayudarte a crear un sitio web estático.
Un sitio web estático se compone de archivos HTML que representan diferentes páginas web. Cuando un visitante entra en el sitio, su navegador hace una petición al servidor, que devuelve un único archivo HTML (y probablemente algunas hojas de estilo y scripts que lo acompañan) para mostrar la página solicitada en el navegador. Esta página se muestra igual para todos los visitantes y sólo puede cambiarse si un programador modifica manualmente el archivo HTML.
Los sitios web dinámicos, es decir, los que se ejecutan en servidores que procesan constantemente la información y generan las páginas web, tienen la capacidad de generar páginas más adaptadas a las necesidades del usuario en tiempo real. Esto se debe a que los sitios web dinámicos no almacenan cada página como su propio archivo HTML, que luego es recuperado y mostrado tal cual por el servidor. En cambio, los servidores construyen las páginas de un sitio web dinámico sobre la marcha utilizando HTML, CSS y lenguajes de programación del lado del servidor como PHP. Es decir, un visitante solicita una página y el servidor extrae información de una o varias bases de datos para construir el archivo HTML para ese único visitante del sitio web.
})(jQuery);La comprobación de si la URL debe ser enrutada a través de una CDN se implementa en la función shouldUseCDN, y la obtención de la lista de thumbprints a utilizar para la URL se implementa en la función getThumbprints:(function($){
$contentcdn_thumbprint_manager = new ContentCDN_Thumbprint_Manager();Procedemos a registrar las thumbprints por defecto. Tenga en cuenta que, tanto para las huellas de publicaciones como para las de comentarios, la última marca de tiempo puede consultarse directamente desde la base de datos. Sin embargo, para el thumbprint del usuario, no tenemos esta información, así que debemos guardar explícitamente la última marca de tiempo de cuando el usuario actualizó su perfil, bajo la meta_key llamada last_edited./* Post Thumbprint */
Los plugins pueden añadir sus propias huellas. En este caso, la integración con el plugin del Gestor de Eventos añade una instancia de un thumbprint de localización:class EM_ContentCDN_Thumbprint_Location extends ContentCDN_Thumbprint_Post {
new EM_ContentCDN_Thumbprint_Location();A continuación, procedemos a enganchar los valores a la configuración. En primer lugar, ¿qué patrones de URL serán rechazados del uso del CDN de contenidos? (Por ejemplo, debemos enganchar la lista de IDs de todas las páginas que requieren el estado del usuario, como /my-preferences/ y /edit-post/ y que, como tales, no pueden ser cacheadas.)function get_page_path($page_id) {
Básicamente, tanto las páginas estáticas como las dinámicas funcionan de manera similar. Pero la mayor diferencia es que la página estática es una sola página que contiene toda la información mientras que una página dinámica es el ensamblaje de muchas páginas individuales. Puede consultar el artículo sobre la diferencia entre páginas web estáticas y dinámicas para comparar las características de los sitios web estáticos y dinámicos.
Hay muchos frameworks disponibles para crear una página web estática. Por ejemplo, Bootstrap es uno de los marcos de trabajo de código abierto más populares que puedes utilizar para crear páginas web estáticas. Sin embargo, es muy fácil crear una página web estática por tu cuenta. Siga los siguientes pasos para crear una simple página web estática.
Observe el contenido del archivo original y el aspecto en el navegador. El navegador convierte todas las etiquetas HTML y muestra sólo el contenido marcado, excluyendo el espacio entre líneas. Por ejemplo, el contenido entre las etiquetas h1 se interpreta como un título durante la visualización en la ventana del navegador. El navegador carga el mismo contenido cada vez que se abre el archivo, ya que no hay procesamiento interactivo ni en el servidor ni en el navegador.
Añade texto a tu página web. Escriba “Esta es mi página web” en el cuerpo de la página web, entre y . Guarde la página y véala en el navegador. El resultado es bonito pero no demasiado emocionante. Prueba con otras etiquetas para darle vida. Por ejemplo, hace que el texto esté en negrita; hace que el texto esté en cursiva; permite cambiar el tamaño de la fuente, desde 1 (la más pequeña) hasta 6 (la más grande); hace que el texto sea rojo (o de cualquier otro color que introduzcas); centra el texto (o una imagen) en la página.
Añade imágenes a tu página. Para ello, utiliza la etiqueta , y sustituye la dirección web del ejemplo por la ubicación de la imagen que quieras utilizar. Esta es una de las pocas etiquetas que no tiene una etiqueta final. Las imágenes también se pueden centrar, al igual que el texto.
Cree un enlace a otro sitio web. Esto se hace con la etiqueta Haga clic aquí. Ese código hace que las palabras “Haga clic aquí” sean el enlace a otro sitio web. En lugar de texto, puedes usar una imagen como enlace usando el código .
Piensa en las etiquetas HTML como cajas dentro de cajas, o esas muñecas rusas. Esto se llama anidamiento, y mantiene todo ordenado y fácil de leer. Por ejemplo, el texto colocado entre y estará en negrita, cursiva y centrado. La caja está dentro de la caja, que está dentro de la caja.