Bitácora Técnica - Parte 1: Introducción y Estructura del Proyecto
(Copia y pega esto en tu Word para la bitácora)
Introducción
El presente documento es una bitácora técnica del desarrollo del sitio web Animal Planet, un proyecto
creado para la evaluación final de la asignatura de HTML y CSS. El objetivo es demostrar el dominio de la
estructura de páginas web mediante HTML y su estilización con CSS.
El sitio consta de varias secciones esenciales:
Inicio: Página principal con un banner, eslogan y menú de navegación.
Historia: Explica el origen del proyecto.
Productos: Presenta los productos con imágenes, descripción y precios.
Quiénes Somos: Información sobre la empresa y el equipo de trabajo.
Contacto: Formulario de contacto con los campos requeridos.
Pie de Página: Información de redes sociales y enlaces rápidos.
Bitácora Técnica - Parte 2: Desarrollo y Ajustes del Proyecto
Ajustes en el Navbar y Footer
En esta fase del proyecto, realizamos modificaciones en los archivos [Link] y [Link] para
simplificarlos y hacer que reflejen un nivel de conocimientos básicos en HTML y CSS.
Los cambios realizados incluyen:
Eliminación de degradados y sombras avanzadas en el navbar y el footer.
Reducción del tamaño de los elementos y espaciado.
Eliminación de transiciones y efectos avanzados para mantenerlo más simple.
Estructura organizada utilizando flexbox sin complejidad excesiva.
Se mantuvieron los enlaces funcionales, asegurando la navegación correcta.
Ajustes en la Página de Inicio ([Link])
Se realizó una optimización del archivo [Link], reduciendo los estilos avanzados pero manteniendo la
estructura funcional de la página.
Las modificaciones incluyen:
Eliminación de animaciones avanzadas como @keyframes fadeInDown y @keyframes fadeInUp.
Cambio de fondos con gradientes a colores planos.
Reducción de sombreado y bordes redondeados en imágenes y botones.
Simplificación de la sección Hero, manteniendo solo el texto y los botones esenciales.
Estructura básica con flexbox, evitando estilos sofisticados de diseño.
Mantener la funcionalidad de la galería de animales, pero reduciendo efectos de hover avanzados.
Ajustes en el Footer
El footer fue modificado para que se viera más simple y directo, sin perder la estructura funcional:
Eliminación de efectos de sombra y gradientes.
Reducción del tamaño de la fuente y el padding para un diseño más básico.
Se aseguraron los enlaces de redes sociales y navegación rápida.
Dificultades y Soluciones
Durante el proceso de simplificación, encontramos algunos problemas:
Eliminación de animaciones sin afectar la estructura:
Se ajustaron los elementos para que mantuvieran su posición sin transform o opacity.
Reducción de sombras sin perder visibilidad en el texto:
Se mantuvo un ligero contraste en los fondos para evitar que el texto se mezcle.
Mantener la funcionalidad sin que parezca código generado por IA:
Se revisó el código eliminando estilos innecesarios y asegurando que se vea como hecho por un
estudiante.
Bitácora Técnica Completa - Desarrollo de la Página Web
1. Introducción
Este documento describe el proceso de desarrollo del sitio web Animal Planet, un proyecto para el
examen final de la materia de HTML y CSS.
El objetivo fue diseñar una página web funcional y estéticamente atractiva para presentar información
sobre diferentes especies animales.
2. Estructura del Proyecto
El proyecto está organizado en las siguientes carpetas:
3. Desarrollo del Proyecto
Ajustes en el Navbar y Footer
Para hacer que el proyecto pareciera más acorde con un estudiante de HTML y CSS básico, se realizaron
los siguientes ajustes en los archivos [Link] y [Link]:
Eliminación de degradados avanzados y sombras sofisticadas.
Reducción de tamaños de fuente y espaciados para un diseño más simple.
Se eliminó la lógica avanzada del menú desplegable, dejando solo la funcionalidad básica.
Mantenimiento de los enlaces funcionales, asegurando una navegación fluida.
Ajustes en la Página de Inicio ([Link])
Se aplicaron modificaciones para hacer el código más básico:
Eliminación de efectos avanzados como sombras, bordes redondeados exagerados y transiciones
elegantes.
Cambio de fondos con degradados a colores sólidos.
Reducción de efectos hover avanzados en botones e imágenes.
Mantener la estructura de la galería sin animaciones complejas.
Organización del contenido en flexbox pero con una estructura más simple.
Ajustes en las Páginas de Animales
Se optimizaron los archivos [Link], [Link] y [Link], así como sus respectivos
archivos CSS ([Link], [Link]):
Eliminación de efectos de hover sofisticados en las imágenes.
Reducción de bordes redondeados y sombras avanzadas en tarjetas de animales.
Se mantuvo el diseño funcional, pero con estilos más planos.
Se organizó el código CSS para hacerlo más limpio y fácil de entender.
Se eliminaron selectores avanzados y animaciones.
4. Dificultades Encontradas y Soluciones
✅ Problema: Algunas secciones tenían animaciones y efectos que no eran enseñados en clase.
🔹 Solución: Se eliminaron estos efectos y se sustituyeron por estilos más simples.
✅ Problema: Algunos degradados y sombras hacían que el sitio pareciera generado con herramientas
avanzadas.
🔹 Solución: Se cambiaron estos efectos por fondos y colores sólidos.
✅ Problema: Al simplificar los estilos, algunas imágenes perdieron estructura.
🔹 Solución: Se ajustaron los márgenes y el tamaño de imágenes manualmente.
✅ Problema: Había código innecesariamente complejo en el CSS.
🔹 Solución: Se eliminó código redundante y se reestructuró la organización de archivos CSS.
