Estructura del sitio web estático
Contenidos
Entender las diferencias entre los sitios web estáticos y dinámicos puede resultar complicado, sobre todo con la tendencia hacia sitios web y aplicaciones web más progresivos, a menudo híbridos, y el creciente deseo de personalización.
Los sitios web estáticos consisten en un número fijo de páginas web pre-renderizadas que contienen un contenido y una estructura fijos y codificados. Como resultado, los usuarios ven el mismo contenido independientemente de quiénes sean, de dónde vengan y del navegador que utilicen.
Los programadores web suelen crear páginas web estáticas utilizando HTML para establecer la estructura y CSS para añadir color y otros elementos visuales. Las páginas web estáticas suelen construirse de forma independiente, sin conectarse a una base de datos.
Una vez que una página web estática se publica, permanece igual y no refleja los cambios en las acciones del usuario. Si se quiere ver algo diferente, hay que editar manualmente el código fuente HTML de cada página que forma parte del sitio web. Esto puede llevar mucho tiempo, sobre todo si se trata de actualizar un sitio web grande.
Los sitios web dinámicos generan páginas en tiempo real. La flexibilidad del contenido y la estructura permite personalizar lo que experimenta un usuario en función de su solicitud o del navegador que utilice. La creación de un sitio web dinámico suele requerir conocimientos de un lenguaje de programación del lado del servidor como PHP, C# o Python. Los sitios web dinámicos procesan las solicitudes y suelen extraer el contenido de una base de datos externa o de un sistema de gestión de contenidos (CMS).
Generador de sitios web estáticos
En general, dinámico significa capaz de actuar y/o cambiar, mientras que estático significa estacionario o fijo. Los sitios web dinámicos y estáticos son términos utilizados para describir dos tipos de sitios y el método que utilizan para mostrarlos. Aquí exploraremos lo que los términos significan para el diseño web.
Un sitio web estático (a veces llamado página plana o estacionaria) se muestra en un navegador web exactamente como se almacena. Contiene páginas web con contenido fijo codificado en HTML y almacenado en un servidor web. No cambia, se mantiene igual o “estático” para cada espectador del sitio.
Un sitio web estático no requiere programación web ni diseño de bases de datos. La estática es la forma más básica de sitio web y es la más sencilla de crear y es perfecta para sitios de pequeña escala. Mantener un gran número de páginas estáticas puede convertirse rápidamente en una molestia que consume tiempo y es poco práctica. Si necesita un sitio web con cientos de páginas y una tonelada de contenido, un sitio web dinámico puede ser para usted.
Un sitio web dinámico (también conocido como sitio con base de datos) requiere programación web y diseño de bases de datos. Un sitio web dinámico contiene información y contenido que cambia, dependiendo de factores como el espectador del sitio, la hora del día, la zona horaria o el idioma nativo del país del espectador). El contenido de su sitio (texto/imágenes) se almacena en una base de datos o sistema de gestión de contenidos. Cuando la información se actualiza o cambia dentro de la base de datos, cambia en el sitio.
Sitio web estático o dinámico
Los visitantes de los sitios web los abandonan tras uno o dos segundos de retraso, y los hackeos de bases de datos se han convertido en algo habitual. Basta con echar un vistazo a las noticias para ver el último escándalo protagonizado por piratas informáticos que accedieron a información sensible debido a instalaciones de WordPress o Drupal mal mantenidas.
Por supuesto, si quieres hacer el cambio, las innumerables opciones pueden parecer desalentadoras. Por eso estamos aquí. Vamos a echar un vistazo a una serie de generadores de sitios web estáticos más populares y para qué son los más adecuados.
Antes de empezar, probablemente notarás que ReactJS no está en esta lista. No se puede hablar de desarrollo frontend en 2016 sin hablar de React, pero React es más bien un conjunto de herramientas que se pueden utilizar para muchas cosas, incluyendo el desarrollo de sitios estáticos y aplicaciones de una sola página. React se ha utilizado para crear algunos de los SSB en esta lista, y sin duda seguirá teniendo una mano en el futuro de la web moderna, pero para los propósitos de este artículo, estamos mirando a las herramientas que pueden construir sitios enteros y aplicaciones, no sólo componentes.
Ejemplo de sitio web dinámico
Los sitios web estáticos tienen algunas limitaciones. Por ejemplo, si desea configurar las cabeceras, tendrá que utilizar Azure Content Delivery Network (Azure CDN). No hay forma de configurar las cabeceras como parte de la propia función de sitio web estático. Además, AuthN y AuthZ no son compatibles.
Si estas características son importantes para su escenario, considere el uso de Azure Static Web Apps. Es una gran alternativa a los sitios web estáticos y también es adecuada en los casos en los que no se necesita un servidor web para representar el contenido. Puede configurar cabeceras y AuthN / AuthZ es totalmente compatible. Azure Static Web Apps también proporciona un flujo de trabajo de integración continua y entrega continua (CI/CD) totalmente gestionado desde el origen de GitHub hasta la implementación global.
Para habilitar el alojamiento de sitios web estáticos, seleccione el nombre de su archivo predeterminado y, a continuación, proporcione opcionalmente una ruta a una página 404 personalizada. Si un contenedor de almacenamiento blob llamado $web no existe ya en la cuenta, se creará uno para usted. Añada los archivos de su sitio a este contenedor.
El documento índice que usted especifica cuando habilita el alojamiento de sitios web estáticos aparece cuando los usuarios abren el sitio y no especifican un archivo específico (Por ejemplo: https://contosoblobaccount.z22.web.core.windows.net).