Desarrollo de Entornos Web (2351) 1

LABORATORIO
Trabajando con el modelo DOM
Implementa una página web, donde al cargar la página (load), ejecuta las siguientes
operaciones:
1. Implementar un carrusel o rotación de imágenes en la imagen de cabecera
2. Imprimir la fecha del sistema
3. Imprimir la hora del sistema y que cambie por intervalos de 1 segundo.

1. Diseñando la página web

En esta etapa vamos a diseñar la página2.html, tal como se muestra

Figura: Caso práctico

Fuente: Diseño propio

Carrera de Computación e Informática Cibertec

Desarrollo de Entornos Web (2351) 2

En la página2.html, defina el esquema de la página web. Primero enlazamos la página a la hoja

de estilos: estilos_2.css y alrchivo js: archivo_2.js. En el body, defina el esquema de la página,
agregar los selectores a los elementos de la misma.

Figura: Caso práctico

Fuente: Diseño propio

Definiendo el archivo estilos_2.css

Definida el esquema de la página, defina el estilo a los elementos de la página en la hoja de
estilo, tal como se muestra.

body{
background-color: gray;
}

#principal{
width: 80%;
height: auto;
float: left;
margin:0 10% 0 10%;
border-radius: 20px;
padding-bottom: 10px;
background-color: white;
}

header,nav,section,footer{
width: 100%;
height: auto;
float: left;

Carrera de Computación e Informática Cibertec

Desarrollo de Entornos Web (2351) 3

margin-bottom: 5px;
}

#h1cab{
text-align: center;
color:gray;
}

#imgcab{
width: 100%;
height: 250px;
float: left;
}

#pf, #ph{
width: 49%;
height: 20px;
float: left;
padding-left: 1%;
background-color: gray;
border-radius: 10px;
color:white;
}

.blok{
width: 47%;
height: auto;
border:1px solid;
float: left;
margin:1%;
background-color: gray;
color: white;
}

#imgpie{
width: 100%;
height: 70px;
float: left;
margin-bottom: 20px;
}

.imgblok
{
width: 100%;
height: 250px;
float: left;
}

Carrera de Computación e Informática Cibertec

Desarrollo de Entornos Web (2351) 4

Definiendo la programación.
1. En el archivo de javascript archivo_2.js, implementamos el proceso para imprimir la
fecha, declare variables para almacenar la fecha, el dia, mes y año; luego imprima los
valores en el selector de id “pf”, tal como se muestra.

Figura : Caso práctico

Fuente: Diseño propio

Para ejecutar la página web, seleccionar la pestaña pagina2.html, y presiona la tecla F5, donde
se visualiza la fecha.

Figura : Caso práctico

Fuente: Diseño propio

Carrera de Computación e Informática Cibertec

Desarrollo de Entornos Web (2351) 5

2. A continuación, implementamos el proceso para imprimir la hora. Defina la función

reloj() el cual imprima en el selector de id “ph” la hora por cada segundo, utilizando
setTimeout, tal como se muestra.
3. Ejecuta el método asignando al atributo “onload” el método reloj().

Figura : Caso práctico

Fuente: Diseño propio

Para ejecutar la página web, seleccionar la pestaña pagina2.html, y presiona la tecla F5, donde
se visualiza la fecha y la hora la cual cambiará por cada segundo.

Figura: Caso práctico

Fuente: Diseño propio

Carrera de Computación e Informática Cibertec

Desarrollo de Entornos Web (2351) 6

4. A continuación, implementamos el proceso para cambiar la imagen. Defina la función

carrusel() el cual visualiza una nueva imagen en el selector de id “imgcab” por cada
segundo, utilizando setTimeout, tal como se muestra.
5. Asignar al atributo “onload” los métodos reloj() y carrusel().

Figura: Caso práctico

Fuente: Diseño propio

Ejecutar la página2.html, presionando la tecla F5, donde se visualiza la fecha y la hora la cual
cambiará por cada segundo y cambiando la imagen de la cabecera.

Figura: Caso práctico

Fuente: Diseño propio

Carrera de Computación e Informática Cibertec