Gunter's Forge

Gunter's Forge es una empresa dedicada a la creación artesanal de espadas de alta calidad, forjadas a mano desde cero, principalmente esta enfocada en la creación de katanas pero tambien ofrece una variedades distintas de espadas y otros productos similares. La misión de nuestra empresa es preservar el arte de la herrería tradicional, ofreciendo espadas únicas que combinan técnica, diseño y pasión, aunque aparte tambien hacemos espadas inspiradas en animes y peliculas.

Descripción

En Gunter's Forge cada espada es una obra de arte. Nuestro equipo de herreros experimentados se especializa en la forja de espadas personalizadas, desde el diseño hasta la fabricación final. Ya sea para coleccionistas o uso funcional, cada pieza se trabaja con atención al detalle y materiales de la más alta calidad.

Características de la página

• Diseño responsivo: La página web está diseñada para adaptarse a dispositivos móviles, tabletas y escritorios, asegurando una experiencia de usuario óptima en cualquier dispositivo.
• Estilo atractivo: La página cuenta con un diseño visualmente atractivo, utilizando una paleta de colores que refleja la esencia de la herrería artesanal.
• Navegación intuitiva: El diseño de la página permite una navegación fácil y rápida, con un menú claro y accesible, lo que mejora la experiencia del usuario al explorar las secciones.
• Animaciones suaves: Se han implementado animaciones sutiles para transiciones de páginas y botones interactivos, brindando un toque dinámico sin sobrecargar al usuario.
• Formulario de contacto: Un formulario de contacto fácil de usar para que los usuarios puedan hacer consultas o solicitar más información sobre productos personalizados.
• Integración con redes sociales: La página tiene botones de acceso directo a las redes sociales, permitiendo a los usuarios compartir productos y contenido con facilidad.
• Blog integrado: Sección de blog donde se publican artículos relacionados con el proceso de fabricación, historia de las espadas y otros temas relevantes para los clientes interesados.

Instrucciones para visualizarlo

1. Logo de la tienda (Encabezado)

• Enlace: Redirige a la página de inicio.
• Ubicación: En el encabezado, junto al título "La Forja de Gunter". El logo es un enlace de texto.

2. Formulario de búsqueda (Encabezado)

• Permite ingresar texto para realizar una búsqueda.
• Ubicación: En el encabezado, dentro de un formulario con un ícono de lupa.

3. Iconos (Encabezado)

• Icono de Pregunta: Página de Contacto.
• Icono de Carrito: Página del Carrito.
• Icono de Usuario: Página de Cuenta.
• Icono de Casa: Página de Inicio.

4. Enlaces de navegación (Seccion: Menu principal)

• Productos: Redirige a la página de productos.
• Blog: Redirige a la página del blog.
• Contacto: Redirige a la página de contacto.

Tecnologías utilizadas

• HTML
• CSS

Validación

Este proyecto ha sido validado utilizando las herramientas del W3C para asegurarse de que el código cumpla con los estándares web.

Validación de HTML

1. El código HTML ha sido validado utilizando el Validador HTML del W3C.
2. Se corrigieron errores relacionados con la estructura semántica, como el uso adecuado de etiquetas <header>, <footer>, <article>, y <section>.
3. Errores mínimos encontrados:
   • Se recomienda usar la etiqueta <h1> solo como encabezado principal.
   • Falta un encabezado (<h2> a <h6>) en algunas secciones.
   • Algunos artículos carecen de un encabezado (<h2> a <h6>).

Validación de CSS

1. El código CSS ha sido validado utilizando el Validador CSS del W3C.
2. Se optimizó el código para eliminar reglas redundantes y mejorar la eficiencia.
3. Errores encontrados:
   • Error de sintaxis (Parse Error).
   • La propiedad animation-range no existe. Estos errores se deben a las animaciones de scroll que hay.

Lenguajes de Script de Cliente

Los lenguajes de script de cliente son aquellos que se ejecutan en el navegador del usuario. Los más comunes son:

JavaScript: Es el lenguaje de script más utilizado en la web. Permite manipular el DOM, gestionar eventos y crear interactividad en las páginas web. Desde la llegada de ES6 (ECMAScript 2015), JavaScript ha incorporado características modernas como let, const, arrow functions, template literals, y más.

TypeScript: Es un superset de JavaScript que añade tipado estático. Es especialmente útil en proyectos grandes para mejorar la mantenibilidad del código.

Métodos de Selección del DOM

En este proyecto se han utilizado los siguientes métodos para seleccionar elementos del DOM:

• querySelector: Selecciona el primer elemento que coincide con el selector. Útil para seleccionar un único elemento.
• querySelectorAll: Selecciona todos los elementos que coinciden con el selector. Devuelve una NodeList.
• getElementById: Selecciona un elemento por su ID. Es más rápido que querySelector para seleccionar por ID.

Manipulación del DOM

1. Seleccionar y Acceder a Elementos

Para seleccionar y acceder a los elementos lo hacemos de la siguiente manera:

const elemento = document.querySelector('.clase')

En este caso guardamos el elemento en una variable llamada elemento y con document accedemos a la función querySelector que seleccionara el primer elemento que coincida con el selector (lo que esta en los parentesis), pueden ser clases, ids ...

2. Crear y Añadir Nuevos Elementos

Para crear y añadir elementos se puede hacer de la siguiente manera:

let elemento1 = document.createElement('img')

elemento.appendChild(elemento1)

Lo que hacemos es crear una nueva variable por ejemplo elemento1 que es de tipo HTMLImageElement con document.createElement() lo que hace es que puedas crear cualquier tipo de elemento para multiples funciones. Después para poder añadir este nodo a los nodos del padre (elemento que pongas entre parentesis).

3. Modificar Contenido y Atributos

Teniendo los elementos creados y añadidos antes podemos ahora modificar el contenido o sus atributos:

elemento1.src = 'img/prueba.png'

elemento1.alt = 'Imagen de prueba'

Tenemos elemento1 ya creado y con el .src o .alt o con cualquier atributo/propiedad que pueda tener elemento1, al igualarlo cambiamos ese atributo por el nuevo que se ponga. En este caso lo que hacemos es cambiarle el src para ponerle la ruta de una imagen y cambiamos el alt para ponerle un texto alternativo por si la imagen no llegara a cargar o tuviera algún error.

4. Eliminar Elementos

Para explicar como eliminar elementos vamos a hacerlos sobre los mismos elementos anteriores:

elemento1.remove()

Con el elemento1 anterior lo que hacemos es .remove() y asi es como se quitamos el elemento que viene anterior a la orden .remove() del DOM

5. Manipular Estilos

Para manipular estilos en JavaScript es muy sencillo:

elemento.style.backgroundColor = 'solid red'

elemento.style.transform = `translateX(10vw)`

elemento.style.border = '2px solid green'

Solo hace falta poner la etiqueta .style detras del elemento del cual quieres cambiar el estilo, en este caso tenemos el anterior elemento y cambiamos cualquier propiedad de CSS que queramos, por ejemplo aquí estamos cambiando el color que tiene de fondo a uno rojo, le estamos dando un transform y le ponemos un borde de dos píxeles verde

Ejemplos de Manipulación del DOM

1. Seleccionar y Acceder a Elementos

Se utilizan métodos como querySelector, querySelectorAll y getElementById para seleccionar y acceder a elementos del DOM.

Proyecto2LenguajedeMarcas/scripts.js

Lines 64 to 65 in 7556580

	const sliderTestimonios = document.querySelector('.slider-testimonios');
	const testimonios = document.querySelectorAll('.testimonio');

Proyecto2LenguajedeMarcas/scripts.js

Line 7 in 7556580

const themeIcon = document.getElementById('theme-icon'); // Referencia al ícono del tema

2. Crear y Añadir Nuevos Elementos

Se crean nuevos elementos dinámicamente y se añaden al DOM.

Proyecto2LenguajedeMarcas/js/scripts.js

Lines 118 to 126 in 9852179

	const nuevaImagen = document.createElement('div');
	nuevaImagen.classList.add('imagen-contenedor');
	const imagen = document.createElement('img');
	imagen.src = url;
	imagen.alt = 'Imagen dinámica';
	imagen.onerror = () => {
	alert('Error al cargar la imagen. Verifica la URL.');
	};

Proyecto2LenguajedeMarcas/js/scripts.js

Lines 137 to 139 in 9852179

	nuevaImagen.appendChild(imagen);
	nuevaImagen.appendChild(botonEliminar);
	document.querySelector('.galeria').appendChild(nuevaImagen);

3. Modificar Contenido y Atributos

Se modifican el contenido y los atributos de elementos existentes.

Proyecto2LenguajedeMarcas/js/scripts.js

Lines 21 to 22 in 9852179

	themeIcon.src = 'img/luna-rellena.png';
	themeIcon.alt = 'Modo Claro';

4. Eliminar Elementos

Se eliminan elementos del DOM según criterios específicos.

Proyecto2LenguajedeMarcas/js/scripts.js

Lines 132 to 135 in 9852179

	botonEliminar.addEventListener('click', () => {
	nuevaImagen.remove();
	eliminarImagen(url);
	});

Proyecto2LenguajedeMarcas/js/scripts.js

Lines 143 to 147 in 9852179

	function eliminarImagen(url) {
	const imagenesGuardadas = JSON.parse(localStorage.getItem('imagenes')) || [];
	const nuevasImagenes = imagenesGuardadas.filter(imagen => imagen !== url);
	localStorage.setItem('imagenes', JSON.stringify(nuevasImagenes));
	}

5. Manipular Estilos

Se manipulan estilos directamente desde JavaScript.

Proyecto2LenguajedeMarcas/js/scripts.js

Line 81 in 9852179

sliderTestimonios.style.transform = `translateX(${desplazamiento}px)`;

Proyecto2LenguajedeMarcas/js/scripts.js

Lines 292 to 295 in 9852179

	nombre.style.border = '2px solid red';
	} else {
	nombre.style.border = '2px solid green';
	}

Enlace a la demo en GitHub Pages

Gunter's Forge