INSTITUTO DE EDUCACIÓN SUPERIOR CIBERTEC

DIRECCIÓN ACADÉMICA
CARRERA PROFESIONALES

CURSO : Desarrollo de Entornos Web

NOTA
PROFESOR : MAXIMO GUANDO QUISPE
SEMESTRE : 2022-I
CICLO : Segundo
SECCIÓN : T2GJ
FECHA : Viernes 24 de Junio del 2022
DURACIÓN : 90 minutos

ALUMNO (A) :

CASO DE LABORATORIO 3

Consideraciones generales:
 Considerar el orden, la limpieza y la claridad de las respuestas.
 NO está permitido el uso o consulta de cuadernos, separatas, libros o cualquier material de la
asignatura durante el desarrollo de la evaluación.
 Inicie el proyecto con el nombre DEW_CL3_XXXX (donde XXXX serán sus apellidos y nombres)

Consolidado

Puntaje Llenar solo en caso de Recalificación justificada

Pregunta
Máximo Obtenido Sustento Puntaje
1 20
Nota Recalificada

Rúbrica
Bueno
Pregunta Excelente Deficiente

Efectos en imágenes Diseña y programa los efectos del

Solo diseña el componente de
de redes sociales componente en forma correcta No diseña ni programa
las redes sociales (1p)
(2p) (2p)
Diseña y programa los eventos
Efectos en titulo Solo diseña el componente
del componente en forma No diseña ni programa
(2p) del título (1p)
correcta (2p)
Diseña y programa el
Carrusel Solo diseña el componente de
componente en forma correcta No diseña ni programa
(4p) la cabecera de la página (4p)
(4p)
Diseña y programa el
Reloj Solo diseña el componente
componente en forma correcta No diseña ni programa
(3p) reloj (1p)
(3p)
Efecto en las imágenes Diseña y programa los eventos de
Solo diseña los elementos del
de Novedades los elementos el componente en No diseña ni programa
componente (1.5p)
(3p) forma correcta (3p)
Efectos en imágenes Diseña y programa los eventos de
Solo diseña los elementos del
de productos los elementos del componente No diseña ni programa
componente (2p)
(5p) en forma correcta (5p)
Pregunta 1:
Se tiene el siguiente wireframe, la cual representa el esquema de la página, tal como se muestra en la
figura. Creando un proyecto React JS, implemente el siguiente SPA definiendo sus componentes y
eventos de acuerdo a la siguiente especificación.

2 1

A través de las siguientes especificaciones programa la página web, utilizando javascript:

1. En la cabecera de la página, encontramos las imágenes de las redes sociales. Cuando pase el
mouse sobre la imagen de la red social (OnMouseOver), debe cambiar la imagen (utilizar las
imágenes que finalicen con cero) y al salir de la imagen (OnMouseOut), visualizar la imagen
original.

2. En la sección de la cabecera, encontramos el título de la página. Defina la función cambiar color

donde el título deberá de cambiar el color cada 1 segundo.

3. En la sección cabecera, tenemos una imagen de portal. Defina el método carrusel() el cual
permita la rotación de las imágenes y texto por cada segundo.

4. En la sección cabecera tenemos un elemento id llamado “ph”, defina el método reloj() donde
visualice la hora, minuto y segundo (agregando cero si el minuto o segundo es menor a 10) por
cada intervalo de 1 segundo.

5. En la sección de Servicios, tenemos tres imágenes las cuales representan las soluciones que
ofrece la empresa. Defina las funciones para el mouseover y mouseout; donde al pasar el
mouse en la imagen, deberá aumentar la imagen hasta completar el ancho (deberá reducir el
valor del padding a cero); y cuando el mouse salga de la imagen, visualice el padding a su
tamaño original

6. En la sección de Desarrollo de Software, tenemos 3 tres bloques article los cuales representan
los servicios de software que ofrecen en la empresa. Al pasar el mouse sobre el elemento
(onMouseOver), cambia la imagen de color blanco y cambia el color del texto, colocando el
fondo oscuro y la letra es de color blanco; y al salir del bloque (onMouseOut) visualice la
imagen inicial, colocando el fondo blanco.