Type something to search...
to navigateto selectESC to close
Galería Web

Galería Web

Introducción

Este proyecto está diseñado para comprender las bases del desarrollo web, comenzando con HTML y CSS básicos y progresando a JavaScript interactivo. Se divide en cuatro etapas evolutivas, cada una añadiendo nuevas herramientas y funcionalidades.

Etapa 1: Galería Estática Básica

Proyecto: Creando una Galería de Imágenes

Objetivo

Aprender a crear una página web sencilla con una galería de imágenes.

Lo que vamos a usar

  • Notepad (Bloc de notas en Windows).
  • Archivos HTML y CSS (para crear y decorar la página).
  • Carpeta de imágenes (con 10 fotos de su elección).

Paso a paso para hacer la página web

📌 Paso 1: Crear una carpeta para el proyecto

Tip

Accede al siguiente enlace y descarga la carpeta con el nombre web

📌 Paso 2: Elegir y guardar las imágenes

  1. Busca 10 imágenes de tus animales favoritos en Google.
  2. Haz clic derecho en cada imagen y selecciona “Guardar imagen como…”.
  3. Guarda todas las imágenes en la carpeta “img” dentro de la carpeta “Web”.
  4. Renombra las imágenes para que tengan nombres cortos y fáciles, por ejemplo: panda.jpg, leon.jpg, tigre.jpg, etc.

📌 Paso 3: Abre el archivo principal (index.html)

  1. Abre Notepad (Bloc de Notas).
  2. Copia el siguiente código en Notepad:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Galería de Animales</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Galería de Animales</h1>
    <div class="gallery">
        <figure>
            <img src="img/panda.jpg" alt="Panda">
            <figcaption>Panda</figcaption>
        </figure>
        <figure>
            <img src="https://static.nationalgeographicla.com/files/styles/image_3200/public/nationalgeographic_2788792_0.webp?w=1600&h=900" alt="León">
            <figcaption>León</figcaption>
        </figure>
        <figure>
            <img src="img/tigre.jpg" alt="Tigre">
            <figcaption>Tigre</figcaption>
        </figure>
        <figure>
            <img src="img/gato.jpg" alt="Gato">
            <figcaption>Gato</figcaption>
        </figure>
        <figure>
            <img src="img/perro.jpg" alt="Perro">
            <figcaption>Perro</figcaption>
        </figure>
    </div>
</body>
</html>

Tip

Para agregar imagenes de la web busca tu imagen favorita selecciona click derecho y elige copiar direccion de la imagen, a continuacion coloca el URL copiado en la parte de scr tal como en el ejemplo del león:


     <figure>
        <img src="https://static.nationalgeographicla.com/files/styles/image_3200/public/nationalgeographic_2788792_0.webp?w=1600&h=900" alt="León">
        <figcaption>León</figcaption>
    </figure>

Paso 4: Crear los estilos de la página (styles.css)

  1. Abre un nuevo Notepad.
  2. Copia el siguiente código:
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f5f5f5;
    margin: 20px;
}

h1 {
    color: #333;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    max-width: 800px;
    margin: 20px auto;
}

figure {
    background: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

img {
    width: 100%;
    border-radius: 10px;
}

figcaption {
    margin-top: 8px;
    font-size: 16px;
    font-weight: bold;
}
  1. Guarda el archivo:
    • Ve a Archivo > Guardar.

Tip

Recuerda guardar en cada modificación y recargar la pagina del navegador para ver los cambios

Paso 5: Ver la página web en el navegador

  1. Abre la carpeta “GaleriaWeb”.
  2. Haz doble clic en index.html.
  3. ¡Listo! Ahora verás tu galería de imágenes en el navegador. 🎉

Entregables

Para completar el proyecto, deben agregar:

✅ 5 imágenes guardadas en la carpeta img.
✅ 5 imágenes con url de la web.

✅ Archivo index.html con la estructura de la página.
✅ Archivo styles.css con los estilos de la página.
✅ La galería debe mostrar al menos 10 imágenes en pantalla.

✅ Finalmente subir una captura de pantalla en el apartado de Files

También debes investigar las siguientes preguntas:

Instrucciones:

  1. Copia las preguntas en un editor de textos como Word
  2. Exporta el archivo en formato pdf
  3. Sube tu archivo pdf con tu nombre al apartado Files

1️⃣ - ¿Qué es HTML y para qué se utiliza? (Investiga qué es el lenguaje de marcado HTML y cómo se usa para estructurar páginas web.)

2️⃣ - ¿Cuál es el propósito de la declaración <!DOCTYPE html> al inicio del documento? (Explica por qué es importante incluir esta línea en cada página web.)

3️⃣ - ¿Qué información nos proporciona el atributo lang=“es” en la etiqueta <html>? (Reflexiona sobre la importancia de indicar el idioma principal de la página para la accesibilidad y SEO.)

4️⃣ - ¿Por qué se utiliza <meta charset="UTF-8"> y qué problemas podría evitar en la visualización del contenido? (Investiga cómo la codificación de caracteres afecta la correcta visualización de textos y símbolos.)

5️⃣ - ¿Qué función cumple la etiqueta <meta name="viewport" content="width=device-width, initial-scale=1.0"> y en qué dispositivos es especialmente útil? (Analiza cómo esta etiqueta ayuda a que la página se adapte correctamente a diferentes tamaños de pantalla, especialmente en móviles.)

6️⃣ - ¿Cuál es el rol del elemento <title> dentro del <head> y dónde se muestra su contenido? (Explora cómo el título influye en la identificación de la página en el navegador y en los resultados de búsqueda.)

7️⃣ - ¿Cómo se relaciona el archivo styles.css con el documento HTML? (Investiga qué es CSS y cómo se utiliza para darle estilo y formato a una página web enlazándolo desde el HTML.)

8️⃣ - Observa las etiquetas <figure> y <figcaption>. ¿Cuál es su propósito en el código?

9️⃣ - En el código se usan tanto rutas locales (por ejemplo, img/panda.jpg) como una URL externa para cargar imágenes. ¿Cuál es la diferencia y qué consideraciones hay al usar cada una? (Analiza las implicaciones de utilizar recursos locales versus recursos alojados en la web.)

🔟 - Investiga: ¿Qué es la programación y cuáles son algunos de sus lenguajes más populares?

Etapa 2: Galería con Hover Interactivo

Objetivo: Agregar interactividad visual cuando el cursor pase sobre las imágenes.

Herramientas Nuevas:

  • CSS avanzado:
    • Se utiliza el pseudoelemento :hover para animar las imágenes al pasar el cursor.
    • Se añade una transición para suavizar los efectos.

Explicación del Código

  • CSS:
    • Se agrega un efecto de escala (transform: scale()) al pasar el cursor sobre las imágenes.
    • La transición hace que el efecto sea suave.

Código

styles.css

.gallery img {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Etapa 3: Galería Dinámica con JavaScript

Objetivo: Permitir que los usuarios agreguen imágenes a la galería mediante un formulario.

Herramientas Nuevas:

  • JavaScript:
    • Para manejar eventos de formulario.
    • Para actualizar dinámicamente el contenido de la galería.

Explicación del Código

  • HTML:
    • Se añade un formulario con un campo de entrada para URL de imágenes y una descripción.
  • JavaScript:
    • Se captura el evento submit del formulario.
    • Se crea un nuevo elemento <figure> y se añade a la galería.

Código

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Galería Dinámica</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Galería Dinámica de Animales</h1>
  <form id="addImageForm">
    <input type="url" id="imageUrl" placeholder="URL de la imagen" required>
    <input type="text" id="imageCaption" placeholder="Descripción" required>
    <button type="submit">Añadir Imagen</button>
  </form>
  <div class="gallery" id="gallery"></div>
  <script src="script.js"></script>
</body>
</html>

styles.css

form {
  margin: 20px auto;
  max-width: 400px;
  display: flex;
  gap: 10px;
}

form input, form button {
  padding: 10px;
  font-size: 16px;
}

form button {
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

form button:hover {
  background-color: #0056b3;
}

script.js

document.getElementById('addImageForm').addEventListener('submit', function (event) {
  event.preventDefault();
  
  const imageUrl = document.getElementById('imageUrl').value;
  const imageCaption = document.getElementById('imageCaption').value;

  const gallery = document.getElementById('gallery');
  
  const figure = document.createElement('figure');
  const img = document.createElement('img');
  const figcaption = document.createElement('figcaption');
  
  img.src = imageUrl;
  img.alt = imageCaption;
  figcaption.textContent = imageCaption;
  
  figure.appendChild(img);
  figure.appendChild(figcaption);
  gallery.appendChild(figure);

  // Limpiar formulario
  document.getElementById('addImageForm').reset();
});

Etapa 4: Galería Carrusel Estilo Tarjetas con Fondo Dinámico

Objetivo: Mejorar el diseño del carrusel para que las imágenes se muestren como tarjetas con sombra, desplazándose de forma fluida al mover el mouse. Además, se añade un fondo dinámico para una experiencia más inmersiva.

Herramientas Nuevas:

  • CSS Avanzado:
    • Efecto de tarjetas con sombra y espaciado.
    • Fondo con un diseño futurista usando gradientes y animaciones.
  • JavaScript:
    • Seguimiento del movimiento del mouse para controlar el desplazamiento del carrusel.

Explicación del Código

  • HTML:
    • Se utiliza una estructura de contenedor principal y tarjetas dentro del carrusel.
  • CSS:
    • Las tarjetas tienen un diseño con sombras y un tamaño uniforme.
    • El fondo utiliza un degradado animado con movimiento dinámico.
  • JavaScript:
    • Se añade un listener para capturar la posición del mouse y mover el carrusel de acuerdo a ella.

Código

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Galería Futurista de Tarjetas</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Galería Futurista</h1>
  <form id="addImageForm">
    <input type="url" id="imageUrl" placeholder="URL de la imagen" required>
    <input type="text" id="imageCaption" placeholder="Descripción" required>
    <button type="submit">Añadir Imagen</button>
  </form>

  <div class="carousel">
    <div class="carousel-inner" id="carouselInner"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

styles.css

/* Fondo futurista animado */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #020024, #090979, #00d4ff);
  background-size: 300% 300%;
  animation: gradientShift 6s ease infinite;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

h1 {
  margin-bottom: 20px;
  font-size: 2.5rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* Formulario */
form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

form input, form button {
  padding: 10px;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
}

form button {
  background-color: #007BFF;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

form button:hover {
  background-color: #0056b3;
}

/* Carrusel */
.carousel {
  width: 90%;
  max-width: 1200px;
  overflow: hidden;
  position: relative;
}

.carousel-inner {
  display: flex;
  gap: 20px;
  transition: transform 0.1s ease-out;
}

.carousel-item {
  min-width: 100px;
  height: 400px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-align: center;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

script.js

const addImageForm = document.getElementById('addImageForm');
const carouselInner = document.getElementById('carouselInner');

// Agregar imágenes dinámicamente
addImageForm.addEventListener('submit', function (event) {
  event.preventDefault();

  const imageUrl = document.getElementById('imageUrl').value;
  const imageCaption = document.getElementById('imageCaption').value;

  const newCard = document.createElement('div');
  newCard.classList.add('carousel-item');

  const img = document.createElement('img');
  img.src = imageUrl;
  img.alt = imageCaption;

  newCard.appendChild(img);
  carouselInner.appendChild(newCard);

  addImageForm.reset();
});

// Desplazamiento con el mouse
const carousel = document.querySelector('.carousel');
carousel.addEventListener('mousemove', (event) => {
  const rect = carousel.getBoundingClientRect();
  const x = event.clientX - rect.left; // Posición relativa del mouse
  const scrollPercent = x / rect.width; // Porcentaje del ancho
  const maxScroll = carouselInner.scrollWidth - carousel.offsetWidth; // Desplazamiento máximo
  carouselInner.style.transform = `translateX(${-maxScroll * scrollPercent}px)`;
});

Recursos Utilizados y Sitios de Imágenes Gratuitas

Recursos del Proyecto

Aquí tienes los recursos y herramientas utilizados para desarrollar el proyecto:

  1. HTML
  2. CSS
  3. JavaScript
  4. Fuentes Tipográficas
    • Recurso: Google Fonts
    • Fuente utilizada: Arial (nativa del sistema).
  5. Íconos
  6. Efectos Visuales

Sitios Confiables para Descargar Imágenes Gratuitas

Con esta lista de recursos y herramientas, puedes no solo replicar el proyecto, sino también explorar nuevas ideas y enriquecer tus proyectos futuros.

  1. Unsplash

  2. Pexels

  3. Pixabay

  4. Freepik

  5. Burst by Shopify

  6. Rawpixel

  7. Gratisography

  8. Reshot

  9. Kaboompics

  10. Life of Pix

Conclusión

Este proyecto permite evolucionar desde una galería estática hasta una dinámica e interactiva, ayudándote a comprender conceptos fundamentales de HTML, CSS y JavaScript mientras desarrollas un producto funcional y atractivo.

Tags :

Publicaciones relacionadas

Semáforo sencillo

Semáforo sencillo

// C++ code //// Pines de los LEDs del semáforo sencillo const int LED_VERDE = 2; const int LED_AMARILLO = 3; const int LED_ROJO = 4;void setup() { // Configuración de los pines OUTPUT

read more
Web climatológica con hora

Web climatológica con hora

ÍndiceÍndice ¿Qué es una página web? Ejemplos de páginas web: [¿Cómo se construye una página web?](#cómo-se-construye-u

read more
Semáforos Coordinados

Semáforos Coordinados

Semáforos coordinados Introducción En este proyecto, vamos a crear un sistema de semáforos coordinados utilizando Arduino.

read more
Markdown Style Guide

Markdown Style Guide

Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro. Headings The following HTML <h1>—<h6> elements represent six levels of section headings

read more
Pantallas LCD

Pantallas LCD

Introducción a las Pantallas LCD Las pantallas LCD (Liquid Crystal Display) son dispositivos electrónicos utilizados para mostrar información de manera clara y eficiente. Estas pantallas son muy co

read more
Personalizar caracteres en LCD

Personalizar caracteres en LCD

ÍndiceExplicación del Código Componentes Clave del Código Librería LiquidCrystal_I2C [In

read more
Semáforo Doble

Semáforo Doble

Descripción del código Este programa controla el funcionamiento de dos semáforos simulados utilizando un Arduino. Cada semáforo cuenta con tres luces LED: verde, amarillo y rojo. El programa altern

read more
Controlador L298N DC Motor para Arduino

Controlador L298N DC Motor para Arduino

Introduccion Si bien eventualmente necesitarás aprender a controlar motores de CC para construir tu propio robot, probablemente necesitarás algo un poco más fácil para comenzar, y ahí es donde entr

read more
Componentes HTML

Componentes HTML

import YouTubeEmbed from '../../layouts/components/YouTubeEmbed.astro'; Componentes HTML y Estilos CSS En este blog explicativo se muestran los componentes principales de HTML y estilos CSS para

read more
Portafolio web

Portafolio web

Proyecto: Página Personal o Portafolio Web Objetivo Crear una página web personal en la que se muestre:Una cabecera con tu nombre y un menú de navegación. Una sección "Sobre Mí" co

read more
Juego de adivinar el número

Juego de adivinar el número

Proyecto: Juego de Adivinar el Número Objetivo Crear un juego interactivo en el que el usuario debe adivinar un número aleatorio entre 1 y 100. El juego brindará retroalimentación indicando si

read more
Introducción a Javascript

Introducción a Javascript

Test Código<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Introducción a JavaScript</title> <style> /* E

read more
Examen Práctico: Mi Página Personal

Examen Práctico: Mi Página Personal

Examen Práctico: Objetivo Crear una página web personal con diseño moderno en la que se muestre:Una cabecera fija con tu nombre y un menú de navegación interactivo. **Una sección "Sob

read more
Bases para la Elaboración del Reporte Breve del Proyecto

Bases para la Elaboración del Reporte Breve del Proyecto

📝 Bases para la Elaboración del Reporte Breve del ProyectoFormato: Documento Word (máximo 4 páginas)Entrega: En formato digital (PDF), cargar en el apartado de Archivos.

read more
Mascota virtual

Mascota virtual

🐾 Proyecto: Mascota Virtual en Escritorio con Python Este proyecto te guiará paso a paso para crear una mascota virtual que se mueva por tu pantalla de Windows y muestre mensajes motivadores c

read more
Mascota virtual

Mascota virtual

🐾 Proyecto: Mascota Virtual en Escritorio con Python Este proyecto te guiará paso a paso para crear una mascota virtual que se mueva por tu pantalla de Windows y muestre mensajes motivadores c

read more