Merge pull request #45 from Tessbb/main

agregar apuntes Tessbb
disenoUDP · Jun 28, 2024 · 2c96ef8 · 2c96ef8
2 parents 55bc58e + 0b18524
commit 2c96ef8
Show file tree

Hide file tree

Showing 28 changed files with 606 additions and 0 deletions.
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/foto-perfil.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/foto-perfil.jpg
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen-hero.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen-hero.jpg
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen02.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen02.jpg
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen03.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen03.jpg
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen04.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen04.jpg
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen05.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen05.jpg
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen06.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen06.jpg
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen07.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen07.jpg
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen08.jpg b/bitacoras/Tessbb/encargo-05/Portafolio/imagenes/imagen08.jpg
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/index.html b/bitacoras/Tessbb/encargo-05/Portafolio/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Portafolio de Diseño</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <header class="hero">
+ <!-- h1= titulo. recomiendo ser lo más conciso posible, porque los navegadores toman a consideración el h1 para posicionarlo a la hora de buscar en el navegador. -->
+ <h1>Diseño gr&aacutefico</h1>
+ <nav>
+ <ul>
+ <!-- Etiquetas, para facilitar la navegación dentro de la página web. -->
+ <li><a href="#about">Sobre M&iacute;</a></li>
+ <li><a href="#portfolio">Portafolio</a></li>
+ <li><a href="#contact">Contacto</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main>
+ <!-- Sección "Sobre Mí" -->
+ <section id="about" class="about-section">
+ <div class="profile-wrapper">
+ <!-- Imagen que debe ser remplazada por tu imagen de curriculum o alguna en la cual se te pueda conocer un poco más. (solo cambiar lo que esta dentro de las comilas) -->
+ <img src="imagenes/foto-perfil.jpg" alt="Foto de perfil" class="profile-pic">
+ </div>
+ <div class="about-content">
+ <!-- Título de la sección "Sobre Mí". Cambiar el texto con tu nombre -->
+ <h2>Mi nombre ...</h2>
+ <!-- Descripción personal. Escribir una descripción sobre ti mismo -->
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ut, incidunt voluptas perferendis, rem impedit molestias possimus quam laboriosam ratione repellendus molestiae vel delectus, dolore quo nemo voluptate fuga quas?Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ut, incidunt voluptas perferendis, rem impedit molestias possimus quam laboriosam ratione repellendus molestiae vel delectus, dolore quo nemo voluptate fuga quas?Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ut, incidunt voluptas perferendis, rem impedit molestias possimus quam laboriosam ratione repellendus molestiae vel delectus, dolore quo nemo voluptate fuga quas?Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ut, incidunt voluptas perferendis, rem impedit molestias possimus quam laboriosam ratione repellendus molestiae vel delectus, dolore quo nemo voluptate fuga quas?</p>
+ </div>
+ </section>
+ <!-- Sección "Portafolio" -->
+ <section id="portfolio">
+ <h2>Portafolio</h2> 
+ <div class="container">
+
+ <!-- Proyecto 1 -->
+ <a href="proyecto-01.html" class="box">
+ <!-- Imagen del proyecto 1. Sustituir el valor del atributo "src" con la URL de la imagen del proyecto -->
+ <img src="imagenes/imagen02.jpg" alt="">
+ <div class="overlay">
+ <!-- Título del proyecto 1. Cambiar el texto con el nombre del proyecto -->
+ <h2>Proyecto 1</h2>
+ </div>
+ </a>
+
+ <!-- Proyecto 2 -->
+ <a href="#">
+ <div class="box">
+ <!-- Imagen del proyecto 2. Sustituir el valor del atributo "src" con la URL de la imagen del proyecto -->
+ <img src="imagenes/imagen06.jpg" alt="">
+ <div class="overlay">
+ <!-- Título del proyecto 2. Cambiar el texto con el nombre del proyecto -->
+ <h2>Proyecto 2</h2>
+ </div>
+ </div>
+ </a>
+
+ <!-- Proyecto 3 -->
+ <a href="#">
+ <div class="box">
+ <!-- Imagen del proyecto 3. Sustituir el valor del atributo "src" con la URL de la imagen del proyecto -->
+ <img src="imagenes/imagen07.jpg" alt="">
+ <div class="overlay">
+ <!-- Título del proyecto 3. Cambiar el texto con el nombre del proyecto -->
+ <h2>Proyecto 3</h2>
+ </div>
+ </div>
+ </a>
+
+ <!-- Proyecto 4 -->
+ <a href="#">
+ <div class="box">
+ <!-- Imagen del proyecto 4. Sustituir el valor del atributo "src" con la URL de la imagen del proyecto -->
+ <img src="imagenes/imagen08.jpg" alt="">
+ <div class="overlay">
+ <!-- Título del proyecto 4. Cambiar el texto con el nombre del proyecto -->
+ <h2>Proyecto 4</h2>
+ </div>
+ </div>
+ </a>
+
+ <!-- Si se quiere agregar otro proyecto, agregar desde aquí desde donde en un comentario diga "Proyecto A", hasta la línea de código </a> -->
+ </div>
+
+ </section>
+ <!-- Sección "Contacto" -->
+ <section id="contact">
+ <h2>Contacto</h2>
+ <!-- Enlace a tu perfil de Instagram. Cambiar el valor del atributo "href" con la URL de tu perfil -->
+ <A HREF="https://www.instagram.com"> Instagram </A>
+ </section>
+ </main>
+ <!-- Pie de pagina -->
+ <footer>
+ <!-- Texto del pie de página. Cambiar el texto con tu nombre -->
+ <p>&copy; 2024 Mi nombre. Todos los derechos reservados.</p>
+ </footer>
+ <!-- Enlace al archivo de JavaScript específico para este proyecto -->
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.css b/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.css
@@ -0,0 +1,154 @@
+/* ----------------------------------------------
+Manual de Estilos para proyecto-01.html
+ ---------------------------------------------- */
+
+/* Reset de estilos por defecto */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* Estilos del cuerpo de la página */
+body {
+ font-family: Arial, sans-serif; /* Familia de fuente */
+ line-height: 1.6; /* Altura de línea */
+ color: rgb(131, 0, 0); /* Color principal del texto */
+}
+
+/* Estilos del encabezado */
+header {
+ text-align: center; /* Alinear texto al centro */
+ padding: 1rem; /* Relleno interior */
+ background: rgb(131, 0, 0); /* Color de fondo */
+ color: rgb(255, 239, 239); /* Color del texto */
+}
+
+/* Estilos del contenedor de proyecto */
+.project-container {
+ display: flex; /* Mostrar como flexbox */
+ flex-direction: column; /* Dirección de los elementos */
+ max-width: 1200px;
+ /*flex-wrap: wrap;Arreglo para resposividad ----------------------------------------------------------------------------------------------------------*/
+ /*-width: 1200px; Ancho máximo */
+ margin: 2rem auto; /* Márgenes */
+ padding: 1rem; /* Relleno interior */
+ background: rgb(255, 239, 239); /* Color de fondo */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra */
+}
+
+/* Estilos de la sección de imágenes del proyecto */
+.project-images {
+ /* flex: 1; Flexibilidad */
+ display: flex; /* Mostrar como flexbox */
+ flex-direction: column; /* Dirección de los elementos */
+ align-items: center; /* Alinear elementos */
+ padding: 1rem; /* Relleno interior */
+ border-right: 1px solid rgb(255, 239, 239); /* Borde derecho */
+}
+
+/* Estilos de las imágenes del proyecto */
+.project-images img {
+ max-width: 100%; /* Ancho máximo del 100% */
+ height: auto; /* Altura automática */
+ margin-bottom: 1rem; /* Margen inferior */
+ border-radius: 10px; /* Borde redondeado */
+}
+
+/* Estilos de los detalles del proyecto */
+.project-details {
+ /* flex: 1;Flexibilidad */
+ padding: 1rem; /* Relleno interior */
+}
+
+.project-details h2 {
+ margin-bottom: 1rem; /* Margen inferior */
+ font-size: 2rem; /* Tamaño de fuente */
+}
+
+.project-details p {
+ margin-bottom: 1rem; /* Margen inferior */
+}
+
+.project-details ul {
+ list-style: none; /* Quitar viñetas */
+ padding: 0; /* Padding cero */
+}
+
+.project-details ul li {
+ margin-bottom: 0.5rem; /* Margen inferior */
+}
+
+.thumbnail-container {
+ display: flex; /* Mostrar como flexbox */
+ justify-content: center; /* Justificar al centro */
+ align-items: center; /* Alinear al centro */
+ margin-top: 10px; /* Margen superior */
+}
+
+.thumbnail {
+ width: 80px; /* Ancho de miniatura */
+ height: 60px; /* Alto de miniatura */
+ margin: 0 5px; /* Margen */
+ cursor: pointer; /* Cursor tipo puntero */
+ border: 1px solid #ccc; /* borde estatico */
+ border-radius: 5px; /* Borde redondeado */
+}
+
+.thumbnail:hover {
+ border-color: rgb(131, 0, 0); /* Color del borde al pasar el mouse */
+}
+
+footer {
+ text-align: center; /* Alinear texto al centro */
+ padding: 1rem 0; /* Relleno interior */
+ background: rgb(131, 0, 0); /* Color de fondo */
+ color: rgb(255, 239, 239); /* Color del texto */
+ margin-top: 2rem; /* Margen superior */
+}
+
+/*Resposividad*/
+
+/* Media Queries para Responsividad */
+@media (max-width: 768px) {
+ .project-container {
+ flex-direction: column;
+ padding: 1rem;
+ }
+ .project-images {
+/* border-right: none;*/
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 1rem;
+ }
+ .thumbnail {
+ width: 60px;
+ height: 45px;
+ }
+}
+
+/* Media Queries para Pantallas Grandes */
+@media (min-width: 769px) {
+ .project-container {
+ flex-direction: row;
+ padding: 2rem;
+ }
+ .project-images {
+ flex: 1;
+ border-right: 1px solid #ddd;
+ border-bottom: none;
+ padding-right: 2rem;
+ }
+ .project-details {
+ flex: 1;
+ padding-left: 2rem;
+ }
+}
+
+/* Ajustes de imagen principal */
+.main-image img {
+ width: 100%;
+ height: auto;
+ max-height: 400px; /* Ajustar según la altura deseada */
+ object-fit: cover;
+ border-radius: 10px;
+}
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.html b/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Proyecto 1</title>
+ <link rel="stylesheet" href="proyecto-01.css">
+</head>
+<body>
+ <header>
+ <!-- Título del proyecto -->
+ <h1>Evoluci&oacute;n gr&aacute;fica en Chile</h1>
+ </header>
+ <!-- Contenedor principal del proyecto -->
+ <main class="project-container">
+ <section class="project-images">
+ <div class="main-image">
+ <!-- Imagen principal del proyecto. Cambiar el valor del atributo "src" con la ubicacion y nombre de tu imagen principal -->
+ <img src="imagenes/imagen02.jpg" alt="Imagen del Proyecto 1" id="mainImg">
+ </div>
+ <div class="thumbnail-container">
+ <!-- Miniaturas de imágenes del proyecto. Cambiar el valor del atributo "src" con la ubicacion y nombre de tus miniaturas -->
+ <img src="imagenes/imagen02.jpg" alt="Miniatura 1" class="thumbnail" data-src="imagenes/imagen02.jpg">
+ <img src="imagenes/imagen03.jpg" alt="Miniatura 2" class="thumbnail" data-src="imagenes/imagen03.jpg">
+ <!-- Añade más miniaturas según sea necesario -->
+ <img src="imagenes/imagen04.jpg" alt="Miniatura 3" class="thumbnail" data-src="imagenes/imagen04.jpg">
+ <img src="imagenes/imagen05.jpg" alt="Miniatura 4" class="thumbnail" data-src="imagenes/imagen05.jpg">
+ </div>
+ </section>
+ <!-- Sección de detalles del proyecto -->
+ <section class="project-details">
+ <!-- Nombre del proyecto. Cambiar el texto con el nombre de tu proyecto -->
+ <h2>Evoluci&oacute;n gr&aacute;fica en Chile</h2>
+ <!-- Descripción detallada del proyecto. Cambiar el texto con la descripción de tu proyecto -->
+ <p>El proyecto consistía en crear un fanzine sobre un tema de libre elección. Nuestro equipo eligió enfocarse en la gráfica en Chile desde 1973 hasta el 2020.</p>
+ <ul>
+ <!-- Información adicional del proyecto -->
+ <li><strong>Integrantes:</strong> (Tu nombre y el de los Integrantes)</li>
+ <li><strong>Fecha:</strong> 28/06/2022</li>
+ <li><strong>Ramo universitario:</strong> Editorial</li>
+ <li><strong>Recursos usados:</strong> Illutrator, Photoshop, InDesing, risografia.</li>
+ <!-- Añade más información según sea necesario -->
+ </ul>
+ </section>
+ </main>
+ <!-- Pie de página (footer) -->
+ <footer>
+ <!-- Texto del pie de página. Cambiar el texto con tu nombre -->
+ <p>&copy; 2024 [Tu Nombre]. Todos los derechos reservados.</p>
+ </footer>
+ <!-- Enlace al archivo de JavaScript específico para este proyecto -->
+ <script src="proyecto-01.js"></script>
+</body>
+</html>
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.js b/bitacoras/Tessbb/encargo-05/Portafolio/proyecto-01.js
@@ -0,0 +1,15 @@
+// Espera a que el contenido del DOM esté completamente cargado
+document.addEventListener('DOMContentLoaded', function() {
+ // Selecciona todas las miniaturas
+ const thumbnails = document.querySelectorAll('.thumbnail');
+
+ // Agrega un evento de clic a cada miniatura
+ thumbnails.forEach(thumbnail => {
+ thumbnail.addEventListener('click', function() {
+ // Obtiene la fuente de la imagen desde el atributo data-src
+ const imageSrc = this.getAttribute('data-src');
+ // Cambia la imagen principal a la fuente de la miniatura seleccionada
+ document.getElementById('mainImg').src = imageSrc;
+ });
+ });
+});
diff --git a/bitacoras/Tessbb/encargo-05/Portafolio/script.js b/bitacoras/Tessbb/encargo-05/Portafolio/script.js
@@ -0,0 +1,11 @@
+// Selecciona todos los enlaces dentro del nav y agrega un evento de clic a cada uno
+document.querySelectorAll('nav a').forEach(anchor => {
+ anchor.addEventListener('click', function(e) {
+ // Previene el comportamiento predeterminado del enlace
+ e.preventDefault();
+ // Obtiene el destino del enlace a través del atributo href
+ const target = document.querySelector(this.getAttribute('href'));
+ // Desplaza suavemente hasta el destino
+ target.scrollIntoView({ behavior: 'smooth' });
+ });
+});