Este proyecto de diseño web se centra en la creación de una página estática con temática de animales marinos, específicamente cetáceos (ballenas y delfines). La implementación se realiza utilizando HTML5 y CSS3, asegurando la compatibilidad con los principales navegadores web.
Estructura del Sitio Web
El diseño sigue una estructura web moderna y adaptable, dividida en cuatro secciones principales:
- Encabezado (Header): Contiene la identidad visual y el título principal.
- Barra de Navegación (Nav): Menú principal, diseñado para ser intuitivo y estéticamente agrradable, con opciones que pueden incluir submenús desplegables.
- Contenido Principal (Main Content): Área donde se presenta la información detallada sobre los cetáceos, incluyendo texto, imágenes y posiblemente elementos multimedia.
- Pie de Página (Footer): Información adicional, como derechos de autor o enlaces relevantes.
Características Técnicas
- Tecnologías Utilizadas: HTML5 para la estructura semántica, CSS3 para el diseño y la presentación visual, y JavaScript para añadir interactividad y efectos dinámicos.
- Diseño Responsivo: La página está pensada para adaptarse a diferantes tamaños de pantalla, desde escritorios hasta dispositivos móviles.
- Contenido Multimedia: Se integran imágenes (incluyendo GIFs) y potencialmente videos o audio para enriquecer la experiencia del usuario.
- Interactividad: Se implementan efectos de JavaScript como carruseles de imágenes (sliders), validación de formularios (si se incluyen) y animaciones sutiles.
- Maquetación: Se emplea la técnica de
divy CSS para una maquetación flexible y robusta, garantizando que el contenido se muestre correctamente sin superposiciones o desajustes. - Navegación: Se establecen enlaces entre las diferentes páginas del sitio, permitiendo una navegación fluida hasta tres niveles de profundidad.
Contenido y Diseño Visual
La página principal (index.html) destaca por su diseño vibrante y organizado. La barra de navegación se ubica en la parte superior, con un fondo distintivo y enlaces claros. El área de contenido principal presenta información textual enriquecida con imágenes y una estructura de texto bien definida, incluyendo títulos, párrafos con sangría y elementos visuales que complementan la información.
Ejemplo de Estructura HTML (index.html)
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explorando el Mundo de los Cetáceos</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="main-header">
<nav class="main-nav">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="biologia.html">Biología</a></li>
<li><a href="especies.html">Especies</a></li>
<li><a href="conservacion.html">Conservación</a></li>
<li><a href="galeria.html">Galería</a></li>
</ul>
</nav>
</header>
<main class="content-area">
<section class="hero-section">
<h1>Majestuosos Habitantes del Océano: Los Cetáceos</h1>
</section>
<section class="info-section">
<div class="text-content">
<h2>Introducción a los Cetáceos</h2>
<p>Los cetáceos, un grupo diverso de mamíferos marinos que incluye ballenas, delfines y marsopas, han fascinado a la humanidad durante siglos. Adaptados a la vida acuática, presentan características únicas que los distinguen de otros mamíferos...</p>
<p>Su evolución desde ancestros terrestres hasta convertirse en maestros del océano es una historia de adaptación notable, con la formación de aletas, la modificación de sus sistemas respiratorio y auditivo, y el desarrollo de complejas estructuras sociales y de comunicación.</p>
</div>
<aside class="image-gallery">
<img src="images/whale_closeup.jpg" alt="Primer plano de una ballena">
<img src="images/dolphin_leap.jpg" alt="Delfín saltando fuera del agua">
</aside>
</section>
<section class="details-section">
<h3>División Principal: Misticetos y Odontocetos</h3>
<p>Los cetáceos se dividen principalmente en dos subórdenes: los Misticetos (ballenas con barbas), que filtran su alimento del agua, y los Odontocetos (cetáceos dentados), que poseen dientes y cazan presas activamente. Cada grupo tiene adaptaciones únicas para su nicho ecológico.</p>
<div class="image-grid">
<img src="images/baleen_whale.jpg" alt="Ballena barbada alimentándose">
<img src="images/toothed_whale.jpg" alt="Cachalote">
<img src="images/dolphin_pod.jpg" alt="Grupo de delfines">
</div>
</section>
</main>
<footer class="main-footer">
<p>© 2023 Protección de Cetáceos. Todos los derechos reservados.</p>
</footer>
<script src="js/scripts.js"></script>
</body>
</html>
Ejemplo de Estilos CSS (styles.css)
/* Reset básico y configuración general */
body, html, div, header, nav, ul, li, a, h1, h2, h3, p, img, aside, section, footer {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box; /* Mejor manejo de padding y border */
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
background-color: #e0f7fa; /* Fondo azul claro, evocando el océano */
}
a {
color: #0077cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
list-style: none;
}
/* Cabecera y Navegación */
.main-header {
width: 100%;
background-image: url('../images/ocean_banner.jpg'); /* Imagen de fondo oceánica */
background-size: cover;
background-position: center;
height: 400px; /* Altura considerable para el banner */
display: flex;
align-items: flex-end; /* Alinear la navegación al final */
padding-bottom: 20px; /* Espacio para la navegación */
}
.main-nav {
width: 100%;
background-color: rgba(0, 40, 70, 0.8); /* Fondo semitransparente oscuro para la nav */
height: 70px;
display: flex;
justify-content: center; /* Centrar la lista de navegación */
align-items: center;
}
.main-nav ul {
display: flex;
gap: 30px; /* Espacio entre elementos de la lista */
}
.main-nav ul li a {
color: #fff;
font-size: 20px;
font-weight: bold;
padding: 10px 20px;
display: block;
transition: background-color 0.3s ease;
}
.main-nav ul li a:hover {
background-color: #0077cc; /* Resaltado al pasar el ratón */
border-radius: 5px;
text-decoration: none;
}
/* Área de Contenido Principal */
.content-area {
width: 100%;
max-width: 1200px; /* Ancho máximo del contenido */
margin: 30px auto; /* Centrar el contenido con espacio superior/inferior */
padding: 20px;
background-color: rgba(255, 255, 255, 0.85); /* Fondo semitransparente blanco para el contenido */
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.hero-section {
text-align: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid #0077cc;
}
.hero-section h1 {
font-size: 3em;
color: #003366;
}
.info-section {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 40px;
flex-wrap: wrap; /* Permitir que los elementos se ajusten en pantallas pequeñas */
}
.text-content {
flex: 2; /* Ocupa 2/3 del espacio */
min-width: 300px; /* Ancho mínimo para el texto */
}
.text-content h2 {
font-size: 2.2em;
color: #0055a4;
margin-bottom: 15px;
}
.text-content p {
margin-bottom: 15px;
}
.image-gallery {
flex: 1; /* Ocupa 1/3 del espacio */
min-width: 250px;
display: flex;
flex-direction: column;
gap: 15px;
text-align: center;
}
.image-gallery img {
width: 100%;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
height: auto; /* Mantiene la proporción */
}
.details-section h3 {
font-size: 2em;
color: #0055a4;
margin-bottom: 20px;
text-align: center;
}
.details-section p {
text-align: center;
margin-bottom: 30px;
max-width: 800px; /* Limitar ancho del párrafo central */
margin-left: auto;
margin-right: auto;
}
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Diseño responsivo de cuadrícula */
gap: 20px;
}
.image-grid img {
width: 100%;
height: 200px; /* Altura fija para las imágenes en cuadrícula */
object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Pie de Página */
.main-footer {
width: 100%;
background-color: #003366; /* Fondo azul oscuro para el pie de página */
color: #fff;
text-align: center;
padding: 25px 0;
margin-top: 50px; /* Espacio sobre el pie de página */
font-size: 0.9em;
}
/* Estilos para dispositivos móviles (ejemplo básico) */
@media (max-width: 768px) {
.main-header {
height: 300px;
}
.main-nav ul {
flex-direction: column;
align-items: center;
gap: 10px;
padding-top: 10px;
}
.main-nav {
height: auto;
padding: 15px 0;
}
.info-section {
flex-direction: column;
gap: 20px;
}
.text-content, .image-gallery {
flex: none; /* Quitar flex grow/shrink */
width: 100%;
}
.hero-section h1 {
font-size: 2.2em;
}
.details-section h3 {
font-size: 1.8em;
}
}
Consideraciones Adicionales
Este proyecto es adaptable y puede expandirse para incluir más páginas, funcionalidades JavaScript avanzadas (como animaciones de scroll o efectos de partículas), y optimización para SEO. La elección de nombres de clases y la estructura del código se priorizan para la claridad y el mantenimiento.