Este artículo presenta la creación de un sitio web estático dedicado al festival tradicional chino Qingming (清明节), utilizando tecnologías web modernas como HTML5, CSS3 y JavaScript básico. El proyecto se enfoca en una implementación responsive con un diseño limpio y estructurado, ideal para fines educativos o demostrativos.
Estructura del proyecto y tecnologías aplicadas
El sitio web sigue una arquitectura modular basada en archivos HTML, CSS y JavaScript. Se emplea un sistema de diseño con un contenedor principal, secciones de encabezado, navegación, contenido y pie de página. La maquetación utiliza un enfoque de caja flexible con float y anchos definidos para compatibilidad con navegadores.
- HTML5: Estructura semántica con etiquetas como
div,header,nav, y atributos para accesibilidad. - CSS3: Estilos con selectores avanzados, propiedades de box model, y técnicas como clearfix para gestión de floats.
- JavaScript: Interactividad básica para elementos como carruseles de imágenes y formularios.
Ejemplo de código HTML reestructurado
A continuación, se muestra una versión modificada del código HTML original con cambios en nombres de clases, identificadores y estructura lógica, manteniendo la funcionalidad.
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Festival Qingming - Página informativa</title>
<link rel="stylesheet" href="css/estilos-principales.css">
</head>
<body>
<div id="cabecera-principal">
<div class="contenedor-general">
<div id="area-logotipo">
<h1>Festival Qingming - Tradición China</h1>
</div>
<div id="barra-busqueda">
<form action="#" method="post">
<input type="text" placeholder="Buscar contenido" class="campo-busqueda" onfocus="limpiarTexto(this)" onblur="restaurarTexto(this)">
<button type="submit" class="boton-enviar">Buscar</button>
</form>
</div>
<div id="menu-navegacion">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="actividades.html">Actividades festivas</a></li>
<li><a href="origenes.html">Orígenes históricos</a></li>
<li><a href="gastronomia.html">Gastronomía típica</a></li>
<li><a href="cultura.html">Herencia cultural</a></li>
<li><a href="costumbres.html">Costumbres regionales</a></li>
<li><a href="leyendas.html">Leyendas asociadas</a></li>
<li><a href="galeria.html">Galería de imágenes</a></li>
</ul>
</div>
</div>
</div>
<div id="seccion-contenido">
<div class="contenedor-general">
<div id="columna-izquierda">
<div class="recuadro-informacion">
<h2 class="titulo-recuadro">Resumen del festival</h2>
<div class="cuerpo-recuadro">
<img src="img/resumen.jpg" alt="Representación del festival" class="imagen-float">
<p>Qingming, conocido como el Día de la Limpieza de Tumbas, es una festividad tradicional china que combina elementos naturales y culturales. Se celebra con rituales de barrido de tumbas y salidas al campo.</p>
</div>
</div>
<div class="recuadro-informacion">
<h2 class="titulo-recuadro">Orígenes históricos</h2>
<div class="cuerpo-recuadro">
<img src="img/origenes.jpg" alt="Evolución histórica" class="imagen-float">
<p>Este festival tiene raíces en antiguas prácticas de adoración ancestral y se vincula con el calendario solar. Su desarrollo histórico refleja influencias de festividades como Hanshi y Shangsi.</p>
</div>
</div>
</div>
<div id="columna-derecha">
<div class="recuadro-lateral">
<h2>Características destacadas</h2>
<p>El festival Qingming integra costumbres de prohibición de fuego y actividades recreativas. Ejemplos incluyen el juego del balón y la plantación de sauces.</p>
</div>
<div class="recuadro-lateral">
<h2>Dichos populares</h2>
<p>"Si llueve antes de Qingming, las lluvias primaverales serán frecuentes."</p>
</div>
<div class="recuadro-lateral">
<h2>Galería de fotos</h2>
<div class="contenedor-galeria">
<ul>
<li><a href="#"><img src="img/foto1.jpg" alt="Escena festiva 1"></a></li>
<li><a href="#"><img src="img/foto2.jpg" alt="Escena festiva 2"></a></li>
<!-- Más elementos de la galería -->
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="pie-pagina">
<p>© 2023 Sitio informativo sobre el festival Qingming</p>
</div>
</body>
</html>
Ejemplo de código CSS reestructurado
El siguiente fragmanto de CSS presenta estilos revisados con variables alternativas y propiedades simplificadas para una mejor legibilidad y mantenimiento.
/* Reset y estilos base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Arial, sans-serif;
}
.contenedor-general {
max-width: 960px;
margin: 0 auto;
padding: 0 15px;
}
/* Estilos del encabezado */
#cabecera-principal {
background: url('../img/fondo-cabecera.jpg') repeat-x;
height: 160px;
border-bottom: 2px solid #e0d5b5;
}
#area-logotipo {
float: left;
width: 40%;
padding: 30px 0;
}
#area-logotipo h1 {
color: #d4a017;
font-size: 28px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
#barra-busqueda {
float: right;
width: 300px;
margin-top: 35px;
}
.campo-busqueda {
width: 200px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.boton-enviar {
background-color: #c9a14b;
color: white;
border: none;
padding: 8px 15px;
cursor: pointer;
border-radius: 4px;
margin-left: 5px;
}
/* Estilos de navegación */
#menu-navegacion {
clear: both;
background-color: #f8f4e9;
height: 40px;
border-top: 1px solid #d5c7a5;
}
#menu-navegacion ul {
list-style: none;
text-align: center;
}
#menu-navegacion li {
display: inline-block;
margin: 0 15px;
}
#menu-navegacion a {
text-decoration: none;
color: #6b4e1e;
font-weight: bold;
padding: 10px 5px;
}
#menu-navegacion a:hover {
background-color: #e8dcc4;
border-radius: 3px;
}
/* Estilos del contenido principal */
#seccion-contenido {
padding: 30px 0;
background-color: #fff;
}
#columna-izquierda {
float: left;
width: 65%;
}
#columna-derecha {
float: right;
width: 30%;
}
.recuadro-informacion {
margin-bottom: 20px;
border: 1px solid #e0d5b5;
background-color: #fdfbf5;
}
.titulo-recuadro {
background: linear-gradient(to right, #f0e6c8, #fdfbf5);
padding: 10px;
font-size: 16px;
color: #7a5d1f;
border-bottom: 1px solid #d5c7a5;
}
.cuerpo-recuadro {
padding: 15px;
}
.imagen-float {
float: left;
margin-right: 15px;
margin-bottom: 10px;
border: 3px solid #e8dcc4;
border-radius: 5px;
}
.recuadro-lateral {
background-color: #f8f4e9;
padding: 15px;
margin-bottom: 15px;
border: 1px solid #d5c7a5;
}
.contenedor-galeria ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.contenedor-galeria li {
margin: 5px;
border: 2px solid transparent;
transition: border-color 0.3s;
}
.contenedor-galeria li:hover {
border-color: #c9a14b;
}
.contenedor-galeria img {
width: 80px;
height: 60px;
object-fit: cover;
}
/* Pie de página */
#pie-pagina {
clear: both;
background-color: #333;
color: #f0e6c8;
text-align: center;
padding: 20px;
font-size: 12px;
}
Implementación de interactividad con JavaScript
Para enriquecer la experiencia, se incluyen scripts para funcionalidades como carruseles y validación de formularios. A continuación, un ejemplo simplificado de un carrusel automático.
// Script para carrusel de imágenes
document.addEventListener('DOMContentLoaded', function() {
const galeriaItems = document.querySelectorAll('.contenedor-galeria li');
let indiceActual = 0;
function mostrarImagen(index) {
galeriaItems.forEach((item, i) => {
item.style.opacity = (i === index) ? '1' : '0.5';
});
}
setInterval(function() {
indiceActual = (indiceActual + 1) % galeriaItems.length;
mostrarImagen(indiceActual);
}, 3000);
mostrarImagen(0);
});
Este enfoque garantiza que el sitio sea funcional, accesibel y adaptable a diferentes dispositivos, manteniendo un código organizado y escalable.