![\"\"](\"https:\/\/blog.hostinger.io\/com-ar-tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/eBook-Build-website-ES-1024x283.png\")
<\/a><\/figure>\n\n\n\n\n<\/p>
¿Qué es una página web estática?<\/h2>\n
Una página web estática es un conjunto de páginas web cuyo contenido es el mismo cada vez que los usuarios acceden a ella. Comparado con un sitio web dinámico, es más rápido y fácil de crear, pero tiene una interactividad limitada.
Los sitios estáticos pueden construirse con HTML, CSS y JavaScript sin lenguajes de scripting del lado del servidor como PHP. A pesar de su funcionalidad limitada, son excelentes para casos de uso específicos, como los portafolios.<\/p>\n <\/div><\/p>
Sitios web estáticos frente a dinámicos<\/h3>
A diferencia de las páginas estáticas, las páginas web dinámicas<\/a> pueden cambiar automáticamente en función de factores como la ubicación de los usuarios, las zonas horarias y las actividades anteriores.<\/p> Para cambiar el contenido, los sitios dinámicos utilizan lenguajes de programación del lado del servidor, como PHP<\/a>, además de HTML, CSS y JavaScript. Esto les permite conectarse a una base de datos para obtener información que se añadirá al sitio web.<\/p> ¡Importante! <\/strong>Los sitios dinámicos sólo pueden utilizar un lenguaje de scripting del lado del cliente, como JavaScript. Permite que el contenido de la web cambie en función de las entradas del usuario en la web. <\/p><\/div><\/p> Una base de datos permite a los usuarios interactuar e introducir datos en una página dinámica. Por ejemplo, pueden utilizar formularios para crear una cuenta, comprar un producto o comentar una entrada.<\/p> Por el contrario, las páginas estáticas no pueden recibir datos de los usuarios y su interactividad es limitada. Sin embargo, pueden tener animaciones y elementos en los que se puede hacer clic, como botones de navegación o hipervínculos.<\/p> A pesar de las diferencias, los sitios web estáticos tienen varias ventajas sobre los dinámicos:<\/p> Sin embargo, los sitios web estáticos también tienen algunos inconvenientes, como:<\/p> En lugar de elegir entre estático y dinámico, combina ambos para crear un sitio web híbrido. Utiliza el método estático para secciones poco actualizadas y el dinámico para páginas interactivas.<\/p>\n <\/div><\/p> Los sitios estáticos constan de varios archivos almacenados en sus servidores. Estos archivos se muestran en los navegadores de los visitantes y están escritos en lenguajes de programación del lado del cliente, como HTML y CSS.<\/p> Cuando los visitantes acceden a tu página web estática, sus navegadores solicitan los archivos al servidor anfitrión. Éste responde enviando el archivo solicitado para mostrar el sitio.<\/p> Debido a la ausencia de lenguajes de programación del lado del servidor, los archivos no cambian antes de ser enviados. Esto significa que todos los visitantes reciben archivos idénticos a los almacenados en el servidor anfitrión y ven el mismo sitio web.<\/p> Existen tres formas habituales de crear una página web estática:<\/p> En esta sección, nos centraremos en la creación de una página web estática utilizando Hostinger Website Builder<\/strong>. Aunque los pasos pueden variar si utilizas otro creador de sitios web<\/strong>, el proceso general será similar.<\/p> Todos los sitios necesitan un hosting web<\/a> y un dominio para ser accesibles en línea. Con el creador de páginas web<\/a> de Hostinger, no tendrás que comprarlos por separado, ya que están incluidos de forma gratuita.<\/p> En el caso de otras plataformas de construcción, es posible que tengas que comprarlos por separado, lo que lleva más tiempo de configuración y es más caro.<\/p> Por otro lado, si estás empezando un servicio de hosting gratuito<\/a> puede ser suficiente para los sitios estáticos, ya que son ligeros.<\/p> Al elegir un nombre de dominio, asegúrate de que sea fácil de recordar y represente el propósito de tu sitio web. Esto ayuda a los visitantes a recordar tu web y generar más tráfico orgánico.<\/p> Te recomendamos comprobar los dominios<\/a> para ver si la dirección deseada está disponible. Si el nombre de dominio ya está registrado, utiliza otro dominio de nivel superior<\/a> o busca un nombre alternativo.<\/p> Cómo crear una página web<\/a> Después de crear un nuevo sitio web con el Creador de Sitios Web Hostinger, se te dirigirá a la biblioteca de plantillas. Puedes elegir un diseño de sitio web ya hecho o utilizar una plantilla en blanco.<\/p> Para ver el aspecto de la plantilla, pasa el ratón sobre ella y haz clic en Vista previa. Selecciona una categoría o utiliza la barra de búsqueda para encontrar rápidamente la plantilla pertinente y haz clic en Seleccionar plantilla para confirmar tu selección.<\/p> Después de seleccionar una plantilla, se te redirigirá a la pantalla del editor para crear tu sitio.<\/p> Nuestro creador de sitios web te permite personalizar varios elementos del sitio, como texto, colores y botones. Puedes simplemente arrastrar y soltar los elementos en otras áreas para cambiar el diseño.<\/p> El primer paso es modificar la página de inicio de la plantilla predeterminada. Dado que los visitantes la ven inmediatamente después de aterrizar en tu sitio web, tu página de inicio debe estar bien diseñada para dejar una buena impresión.<\/p> Al personalizar tu sitio web, ten en cuenta los siguientes aspectos:<\/p> Una vez finalizado el diseño, ve a Página y navegación<\/strong> y haz clic en el icono de engranaje situado junto a la página web recién creada. Selecciona Hacer página de inicio<\/strong> para establecerla como la página principal de tu sitio web.<\/p> Desde este menú, también puedes crear múltiples páginas web para tu sitio. Puedes eliminar otras de la plantilla si tu sitio estático utiliza el diseño de una sola página.<\/p> Ten en cuenta que tu plantilla puede tener elementos interactivos como un formulario de suscripción. Dado que los sitios estáticos generalmente no los tienen, es posible que quieras hacer clic y pulsar Retroceso<\/strong> para eliminarlos.<\/p> Para añadir nuevos elementos, ve a la barra lateral y haz clic en el botón Añadir elemento<\/strong>. Desde este menú puedes insertar varios elementos, como imágenes, vídeos, formas, textos y botones.<\/p> Una vez finalizado el diseño, haz clic en Vista previa<\/strong> en la parte superior derecha de la pantalla del editor. En el modo de vista previa, prueba a utilizar el sitio web para identificar cualquier problema de diseño o usabilidad.<\/p> También puedes cambiar entre los modos de visualización de escritorio y móvil. Con el Creador de Sitios Web Hostinger, no necesitas crear un nuevo diseño o configurar ajustes adicionales en tu sitio para hacerlo amigable para móviles.<\/p> El creador de sitios web guardará automáticamente los cambios para que puedas publicar directamente tu página. Para ello, haz clic en Publicar sitio web<\/strong> junto al botón Vista previa<\/strong>.<\/p> Para que te inspires, vamos a enumerar cinco ejemplos de sitios web estáticos con diferentes casos de uso.<\/p> Bootstrap es un framework que proporciona plantillas de diseño HTML, CSS y JavaScript para acelerar el proceso de desarrollo de sitios web. Su página web es estática y está alojada en GitHub Pages<\/a>.<\/p> Los elementos interactivos de este sitio web incluyen botones de navegación e hipervínculos. También tiene un selector de modo oscuro y utiliza iconos para los botones de redirección de cuentas de redes sociales.<\/p> El sitio web de Bootstrap consiste principalmente en un texto sin animaciones ni muchos elementos visuales. Esta simplicidad se traduce en una mayor velocidad de carga, ya que los archivos más pequeños del sitio web se descargan más rápidamente.<\/p> La plataforma de streaming Twitch utiliza Jekyll<\/a> <\/strong>para crear la página web estática de su convención anual de eventos. Su sencillo diseño sólo consta de texto, iconos y vídeos promocionales.<\/p> Los elementos interactivos de este sitio web son en su mayoría botones de navegación en forma de hipervínculos. Además de cambiar a los visitantes a una nueva página, estos enlaces también los redirigen al blog y al sitio web principal de Twitch.<\/p> Como Twitch presenta la información general en los otros dos sitios web, el estático no tiene muchas páginas. De este modo, el sitio web estático se mantiene ligero, lo que permite que se cargue más rápidamente.<\/p> La empresa de estrategia, diseño y comunicación Collins tiene una página web estática basada en Jekyll. Es la prueba de que un sitio estático puede ser profesional y visualmente atractivo.<\/p> Además de la navegación, este sitio web tiene otros elementos interactivos, como las imágenes de banner arrastrables y el botón de retroceso. Este último es importante porque el sitio presenta todo su trabajo en la portada.<\/p> Este sitio web también tiene algunas animaciones activadas por la interacción del usuario. La animación de desvanecimiento aparece cuando los usuarios hacen clic en el botón de navegación, mientras que los vídeos emergentes aparecen cuando se pasa el ratón por encima del título de una entrada.<\/p> El desarrollador web independiente Camilo Holguín utiliza una sencilla página web estática para su currículum. La página web está construida con Gatsby y utiliza una única página web para presentar toda la información.<\/p> Al aterrizar en el sitio web, los visitantes verán inmediatamente el nombre del autor y el resumen de su carrera. También encontrarán botones de redirección a GitHub, LinkedIn y correo electrónico, los únicos elementos interactivos.<\/p> Prism es un nuevo lenguaje de programación de código abierto en desarrollo. Su sitio web de documentación y portal de aprendizaje es estático y está construido con Gatsby.<\/p> Este sitio consiste principalmente en texto y fragmentos de código sin ningún elemento visual aparte del logotipo. Sus elementos interactivos incluyen botones de navegación que redirigen a los visitantes a otra página y a su repositorio de GitHub.<\/p> Prism es una gran demostración del alto rendimiento de una página web estática. Se carga rápidamente y los usuarios pueden cambiar de página al instante.<\/p> Una página web estática es un conjunto de páginas cuyo contenido sigue siendo el mismo siempre que los visitantes acceden. Esta página se construye con HTML, CSS y Javascript sin lenguaje de scripting del lado del servidor.<\/p> Una página web estática es más rápida, fácil de crear y segura que una dinámica. Sin embargo, es más difícil de actualizar, tiene una funcionalidad limitada y carece de personalización de contenidos.<\/p> Aquí tienes un resumen de cómo crear una página web estática utilizando una plataforma de construcción:<\/p> Te recomendamos crear una página web estática si no necesitas muchas páginas y funciones. Por ejemplo, es ideal para un portafolio o una página de información de contacto. <\/p> Responderemos a dos preguntas habituales sobre las páginas web estáticas para ayudarte a entenderlas mejor.<\/p> Utiliza una página web estática si rara vez actualizas el contenido de tu página y no tienes elementos interactivos como formularios.u003cbr \/u003eEvita un sitio estático si tu contenido se actualiza en tiempo real o su idioma depende de la región. Además, es más adecuado si sólo tienes unas pocas páginas web.<\/p>\n\n<\/div>\n<\/div>\n Los sitios estáticos son los más adecuados para uso personal, como currículos o portafolios. Con menor frecuencia, también se utilizan para sitios web de pequeñas empresas, carteles de eventos y sitios de campañas.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Un sitio estático consiste en páginas web que tienen el mismo aspecto cada vez que los visitantes acceden a ellas. Puede estar escrito en lenguaje de marcado de hipertexto (HTML), hojas de estilo en cascada (CSS) y JavaScript. Los sitios estáticos son más rápidos y fáciles de crear que los dinámicos, pero su funcionalidad es […]<\/p>\n\n
\n
Consejo profesional<\/h4>\n
Cómo funcionan las páginas web estáticas<\/h2>
\n
Cómo crear una página web estática en 4 sencillos pasos<\/h2>
1. Obtener un alojamiento web y un dominio<\/h3>
Consulta los siguientes tutoriales si vas a crear tu primer sitio web<\/h4>\n
Cómo diseñar una página web<\/a><\/p>\n <\/div><\/p>2. Seleccionar una plantilla de sitio web<\/h3>
![\"Ejemplos](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2023\/09\/image-47.png\")
<\/figure><\/div>3. Personalizar páginas web<\/h3>
\n
![\"Botón](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2023\/09\/image-48.png\")
<\/figure><\/div>4. Publicar el sitio estático<\/h3>
![\"\"](\"https:\/\/blog.hostinger.io\/com-ar-tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-1024x300.png\")
<\/a><\/figure>Ejemplos de páginas web estáticas<\/h2>
1.<\/strong> Bootstrap<\/a><\/h3>
![\"Página](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2023\/09\/image-49.png\")
<\/figure><\/div>2.<\/strong> TwitchCon<\/a><\/h3>
![\"Página](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2023\/09\/image-50.png\")
<\/figure><\/div>3. <\/strong>Collins<\/a><\/h3>
![\"Página](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2023\/09\/image-51.png\")
<\/figure><\/div>4.<\/strong> Camilo Holguin<\/a><\/h3>
![\"Página](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2023\/09\/image-52.png\")
<\/figure><\/div>5.<\/strong> Prism<\/a><\/h3>
![\"Página](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2023\/09\/image-53.png\")
<\/figure><\/div>Conclusión<\/h2>
\n
Preguntas frecuentes sobre páginas web estáticas<\/h2>
u003cstrongu003e¿Cuándo utilizar una página web estática frente a una dinámica?u003c\/strongu003e<\/h3>\n
u003cstrongu003e¿Para qué son más adecuadas las páginas web estáticas?u003c\/strongu003e<\/h3>\n