DIRECCIÓN ZONAL
CHACHAPOYAS
FORMACIÓN PROFESIONAL
ESTUDIANTE: JHONATAN TOCAS LLAMUCTANTA
ID: 1503007 BLOQUE: 5
CARRERA: INGENIERIA DE SOFTWARE CON INTELIGENCIA ARTIFICIAL
INSTRUCTOR: LUIS MANUEL SAAVEDRA SANDOVAL
SEMESTRE: 5 DEL: 03/03/2025 AL: 25/07/2025
1
INSTRUCCIONES PARA EL USO DEL CUADERNO
DE INFORMES
1. PRESENTACIÓN.
El Cuaderno de Informes es un documento de auto control, en el cual el estudiante,
registra diariamente, durante la semana, las tareas, operaciones que ejecuta en su
aprendizaje, es un medio para desarrollar la Competencia de Redactar Informes.
2. INSTRUCCIONES PARA EL USO DEL CUADERNO DE INFORMES.
2.1 En la hoja de informe semanal, el estudiante registrará diariamente los trabajos
que ejecuta, indicando el tiempo correspondiente. El día de asistencia registrará
los contenidos que desarrolla. Al término de la semana totalizará las horas. De
las tareas ejecutadas durante la semana, el ESTUDIANTE seleccionará la tarea
más significativa (1) y él hará una descripción del proceso de ejecución con
esquemas, diagramas y dibujos correspondientes que aclaren dicho proceso.
2.2 Semanalmente, el Instructor revisará y calificará el Cuaderno de Informes
haciendo las observaciones y recomendaciones que considere convenientes,
en los aspectos relacionados a la elaboración de un Informe Técnico (letra
normalizada, dibujo técnico, descripción de la tarea y su procedimiento, normas
técnicas, seguridad, etc.
2.3 Escala de calificación vigesimal:
CUANTITATIVA CUALITATIVA CONDICIÓN
16,8 – 20,0 Excelente Aprobado
13,7 – 16,7 Bueno
10,5 – 13,6 Aceptable
00 – 10,4 Deficiente Desaprobado
2
INFORME SEMANAL
5 SEMESTRE SEMANA N° 4 DEL : 31/03/2025 HASTA EL : 04/04/2025
DÍA TAREAS EFECTUADAS HORAS
Investigación para desarrol
LUNES
6
lo de turismo
MARTES Desarrollo de paginas con html
6
MIÉRCOLES
Implementación de 6
CSS y JS para la
estructura en html
JUEVES Pagina web AVENTURA 6
VIERNES CLASES EN SENATI 8
TOTAL
33
3
INFORME DE TAREA MÁS SIGNIFICATIVA
Tarea:
Pagina web AVENTURA
Descripción del proceso:
➢ Título del proyecto
Desarrollo de una página web informativa y visualmente atractiva para "ADVENTURE", una
plataforma enfocada en la promoción de destinos turísticos.
➢ Objetivo
El objetivo principal del proyecto fue diseñar y desarrollar una página web interactiva y
adaptable, que brinde al usuario información visualmente impactante sobre eventos, tours,
lugares para explorar y datos de contacto relacionados con el turismo de aventura.
➢ Herramientas utilizadas
• Lenguaje HTML: para estructurar el contenido.
• CSS: para el diseño visual y la adaptación responsive.
• JavaScript: para funcionalidades básicas como el menú desplegable.
• Font Awesome: para íconos de navegación y redes sociales.
• Editor de código: Visual Studio Code.
• Recursos externos: Imágenes libres de derechos, íconos, fuentes.
4
➢ Estructura del sitio web
La página se compone de varias secciones principales:
• Encabezado (Header)
• Contiene una imagen de fondo impactante y frases motivadoras como “Explora el
mundo colorido” y “Un regalo maravilloso”.
• Incluye un botón que enlaza a la sección "Sobre Nosotros".
• Barra de navegación (Navbar)
• Menú horizontal fijo con enlaces internos (Home, Events, Explore, Tours, About,
Contributions, Contact).
• Incluye un modo oscuro activable mediante checkbox y estilos CSS.
• Sección de eventos
• Se presentan tres eventos destacados con imagen, título, descripción y botón de
acción.
• Cada evento está dentro de una tarjeta o “card” con formato limpio y visualmente
atractivo.
• Sección “Explorar”
• Incluye una cita reflexiva acompañada de un botón de acción.
• Se prioriza el enfoque emocional del viaje, no solo informativo.
5
• Sección de tours
• Muestra información de tours próximos en formato de lista y una galería de imágenes
a un lado.
• Uso de diseño en dos columnas: texto a la izquierda, imágenes a la derecha.
• Sección “Sobre nosotros”
• Compuesta por un carrusel visual con imágenes turísticas y un centro destacado con
el logo de la página.
• Pie de página (Footer)
• Incluye los créditos del desarrollador y enlaces a redes sociales con íconos
interactivos.
• Tiene un botón para volver al inicio.
6
➢ Desarrollo del código
Durante la elaboración del proyecto se dividió el trabajo en tres partes:
• Maquetación (HTML)
Se estructuró el contenido utilizando etiquetas semánticas como <section>, <nav>,
<header>, <article>, entre otras, para garantizar orden y accesibilidad.
• Estilos (CSS)
Se crearon dos hojas de estilo:
• [Link]: para los estilos principales.
• [Link]: para adaptar el sitio a distintos tamaños de pantalla. Se usaron
variables CSS, flexbox y media queries para asegurar un diseño adaptable.
• Funcionalidad (JavaScript)
• Se usó jQuery para efectos básicos como el menú móvil y el botón de modo oscuro.
• También se utilizó código para la detección de la URL con #about y realizar
transiciones.
➢ Resultados
• Se obtuvo un sitio completamente funcional, visualmente atractivo y responsive.
• El sitio presenta una experiencia de navegación fluida y es compatible con distintos
dispositivos (PC, tablet, móvil).
• Se cumplió con el objetivo de reflejar un diseño turístico moderno, con imágenes y
colores que transmiten aventura y naturaleza.
7
VISTA DISEÑO
8
VISTA CODIGO
9
PROPIEDAD INTELECTUAL DEL SENATI. PROHIBIDA SU
REPRODUCCIÓN Y VENTA SIN LA AUTORIZACIÓN
CORRESPONDIENTE
10
