5/1/22 11:10 TBox Academy

Instituto Nacional Benjamín Estrada Valiente

Regresar
Actividad 5 En progreso

Actividad 5: Trabajo con framework, bibliotecas y más

¿De qué se trata?

En esta actividad utilizarás el framework Bootstrap y la biblioteca jQuery para crear sitios
web atractivos y que puedan ser visualizados en diferentes dispositivos. Además,
agregarás elementos como contenedores, estilos, columnas e imágenes.      

¿Qué se necesita?

Software
Explorador web.
Editor de código HTML.
Lector de archivos PDF.

Recursos
Sitio web del proyecto.
https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 1/27
5/1/22 11:10 TBox Academy

index.html (creado en la actividad anterior)

Ejemplo_wireframe.pdf
Carpeta Imágenes.
Demostración 8: ¿Cómo descargar y usar Bootstrap?
Demostración 9: ¿Cómo descargar y usar jQuery?
Demostración 10: ¿Cómo crear una hoja de estilos?
Demostración 11: ¿Cómo crear contenedores para las secciones?
Demostración 12: ¿Cómo agregar filas y columnas a una sección?
Demostración 13: ¿Cómo agregar imágenes?

¿Qué hay que hacer?

Sección A: Paso a paso

Etapa 1: Bootstrap y jQuery

1.  Utilizar la información del sitio web del proyecto para consultar los temas de la Sección
3: Diseño web adaptable.

 Sitio web del proyecto (https://www.tboxplanet.com/sitios/225/4/10246)

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 2/27
5/1/22 11:10 TBox Academy

2.  Ingresar a la página principal de Bootstrap desde el navegador:

 Bootstrap (http://getbootstrap.com/)

Nota: la apariencia y ubicación de los elementos en este sitio pueden variar de acuerdo a
actualizaciones.

3.  Presionar en el botón Download Bootstrap.

¿Cómo descargar y usar Bootstrap?

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 3/27
5/1/22 11:10 TBox Academy

4.  Hacer clic en el botón Download Bootstrap para iniciar la descarga de este paquete
de herramientas. Otra opción es usar el siguiente archivo.

Bootstrap 3.3.6 (https://static.tboxplanet.com/academy/225/3/225320191007135836.zip)

5.  Buscar en la carpeta de descarga de tu equipo el archivo comprimido de Bootstrap.

Descomprimir el contenido en tus archivos de trabajo.

6.  Observar que entre los archivos descomprimidos se encuentra la carpeta bootstrap y
dentro de ella las carpetas css, fonts y js.

7.  Copiar las carpetas css, js y fonts en la carpeta webmundo.

8.  Usar la siguiente dirección para ingresar a la página de jQuery:

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 4/27
5/1/22 11:10 TBox Academy

 jQuery (https://jquery.com/)

9.  Presionar en Download jQuery.

¿Cómo descargar y usar jQuery?

10.  Hacer clic en el primer enlace para descargar la librería de jQuery. Luego,
https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 5/27
5/1/22 11:10 TBox Academy

descomprimir el paquete y copiar el archivo jquery.min.js en la carpeta js de webmundo.

Una alternativa es usar el archivo que se indica a continuación.

jQuery (https://static.tboxplanet.com/academy/225/3/225320191004134606.zip)

11.  Iniciar el editor de código HTML.

12.  Abrir el archivo index.html desde la carpeta webmundo. 

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 6/27
5/1/22 11:10 TBox Academy

13.  Ingresar al inicio del código la instrucción link rel para hacer referencia a bootstrap
según se indica a continuación.

14.  Agregar en el código la instrucción para acceder al archivo de javascript jQuery.

15.  Ingresar en el código la referencia para hacer uso de los archivos CSS y JavaScript
de Bootstrap.

16.  Guardar los cambios y mostrar una vista previa en el explorador web.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 7/27
5/1/22 11:10 TBox Academy

17.  Agregar el componente “jumbotron” dentro del código en la ubicación indicada.

Jumbotron es un componente de Bootstrap que muestra contenidos destacados.

18.  Guardar y comprobar los nuevos cambios realizados en el explorador web.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 8/27
5/1/22 11:10 TBox Academy

Etapa 2: Componentes y estilos CSS

19.  Ingresar arriba de la etiqueta </head> las instrucciones para la sección de estilos.
Definir un color de fondo y un color de texto para el componente jumbotron.

¿Cómo crear una hoja de estilos?

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 9/27
5/1/22 11:10 TBox Academy

Nota: en actividades posteriores esta sección se convertirá en una hoja de estilos

independiente.

20.  Si deseas modificar los colores definidos en el paso anterior, ir al siguiente enlace  y
copiar el código del color de tu preferencia.

 Color codes (https://html-color.codes/)

21.  Usar las siguientes etiquetas en la sección de estilos para cambiar el espacio entre el
contenido y su borde, tipo de fuente y alineación para los títulos en la parte superior de la
página.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 10/27
5/1/22 11:10 TBox Academy

22.  Abrir el sitio en el navegador web y verificar los cambios en el diseño.

23.  Agregar una clase con contenedor para las secciones “Acerca de” y “Nuestros
valores”. Definir cada clase en la misma línea de código de la sección.

¿Cómo crear contenedores para las secciones?

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 11/27
5/1/22 11:10 TBox Academy

24.  Iniciar el explorador web y mostrar el contenedor agregado en cada sección de la

página del sitio web. ¿Observas alguna diferencia?

25.  Añadir en la sección “Nuestros valores” la clase bg-grey.

Nota: bg-grey es una clase personalizada que se agrega con el objetivo de cambiar el
color al contenedor.

26.  Establecer en el área de estilos un espacio entre el contenedor y el borde del

contenido y un color de fondo para la sección “Nuestros valores”.

27.  Observar una vista previa en el navegador. Puedes explorar modificando algunos
valores
https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 12/27
5/1/22 11:10 TBox Academy
valores.

28.  Agregar en el formulario las clases que se indican a continuación:

class= "form-inline"
class= "form-control"
class= "btn btn-success"

Nota: para más información sobre los estilos de botón consultar el sitio:

 Bootstrap components (http://v4-alpha.getbootstrap.com/components/buttons/)

29.  Agregar un estilo de tu preferencia al botón Más información de la sección “Acerca

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 13/27
5/1/22 11:10 TBox Academy
de”.

30.  Guardar los cambios y comprobar los resultados en el explorador web.

Etapa 3: Columnas e imágenes

31.  Crear una carpeta de nombre imagenes dentro de webmundo. Copiar en esta
ubicación todo el contenido de la carpeta Imágenes del proyecto.

Imágenes (https://static.tboxplanet.com/academy/225/3/225320180823133118.zip)

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 14/27
5/1/22 11:10 TBox Academy

32.  Consultar el archivo Ejemplo_wireframe.pdf desde la carpeta Plantillas. Verificar el

diseño de la segunda sección del sitio web, el cual se completará a continuación.

Ejemplo_wireframe (https://static.tboxplanet.com/academy/225/3/225320180823135546.pdf)

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 15/27
5/1/22 11:10 TBox Academy

33.  Determinar un espacio de 8 columnas para el contenido de la sección y 4 columnas

para la imagen.

¿Cómo agregar filas y columnas a una sección?

34.  Hacer uso de las etiquetas correspondientes para agregar el archivo acerca_de.png
en la segunda columna de la sección, tal como se indica.

¿Cómo agregar imágenes?

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 16/27
5/1/22 11:10 TBox Academy

35.  Observar en el wireframe de ejemplo la organización del contenido para la sección

“Nuestros valores”.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 17/27
5/1/22 11:10 TBox Academy

36.  Repetir el proceso anterior para dividir la sección “Nuestros valores” en dos
columnas. Indicar que tendrá 4 columnas para la imagen y 8 columnas para el contenido.

37.  Agregar la imagen valores.png en la primera columna de la sección, tal como se

indica a continuación.

38.  Guardar los cambios realizados y mostrar una vista previa en el explorador web.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 18/27
5/1/22 11:10 TBox Academy

Etapa 4: Un contenedor con imágenes

39.  Comprobar en el esquema o wireframe la ubicación de los elementos para la sección

“Nuestros productos”.

40.  Agregar después del código existente las etiquetas correspondientes para crear el
título y subtítulo de la siguiente sección.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 19/27
5/1/22 11:10 TBox Academy

Nota: la clase text-center presenta los elementos al centro del contenedor.

41.  Crear dentro del contenedor de la sección “Productos” una clase para mostrar los
contenidos de la primera fila.

42.  Agregar en la primera división de la sección la imagen1.png en un espacio de 4

columnas con el siguiente texto:
Título: CALZADO
Subtítulo: Lo mejor en calzado deportivo.

43.  Dejar un espacio en blanco a continuación de las líneas de código que corresponden
a la imagen 1.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 20/27
5/1/22 11:10 TBox Academy

44.  Repetir los pasos anteriores para agregar en la posición indicada la segunda y tercera
imagen de la sección, con un espacio de 4 columnas para cada una según se indica en el
esquema.

El contenido para cada imagen es el siguiente:

 
Imagen 2:
Imagen: imagen2.png
Título: ROPA
Subtítulo: Gran variedad de ropa deportiva.

Imagen 3:
Imagen: imagen3.png
Título: BALONES
Subtítulo: Muchos diseños y colores.

45.  Revisar las nuevas instrucciones agregadas en el editor. Enseguida, mostrar el

avance en el explorador web.
https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 21/27
5/1/22 11:10 TBox Academy

46.  Verificar en el esquema la segunda fila de elementos que falta incluir en la sección
“Nuestros productos”.

47.  Definir la segunda fila de la sección y el código para la primera imagen con los
siguientes datos:
Imagen: imagen4.png
Título: UNIFORMES
Subtítulo: Elige el color y estilo preferido.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 22/27
5/1/22 11:10 TBox Academy

48.  Dejar un espacio en blanco a continuación de las etiquetas que muestran la imagen4
en la segunda fila de imágenes.

49.  Tomar como referencia las instrucciones de la imagen4 para agregar en la posición
indicada el código para la segunda imagen de la segunda fila. Utilizar la siguiente
información:
Imagen 5:
Imagen: imagen5.png
Título: ACCESORIOS
Subtítulo: Selecciona tu accesorio deportivo favorito.

50.  Guardar los cambios y mostrar una vista previa de los nuevos elementos del sitio.
Realizar los ajustes que sean necesarios.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 23/27
5/1/22 11:10 TBox Academy

51.  Cerrar el proyecto actual.

Sección B: ¡Es tu turno!

52.  Consultar en el documento Mi wireframe.pdf las diferentes secciones de tu sitio web.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 24/27
5/1/22 11:10 TBox Academy

53.  Identificar en el esquema los elementos que ya han sido creados en el editor de
código.

54.  Guardar dentro de la carpeta webpersonal las imágenes y demás recursos que
utilizarás en tu proyecto de diseño. Usar subcarpetas para organizar los elementos.

55.  Incluir dentro de la misma carpeta todos los recursos de Bootstrap como css, js,
fonts y jQuery.

56.  Abrir la página index.html de la carpeta webpersonal en el editor de código HTML.

57.  Utilizar como ejemplo las instrucciones de la sección A para incluir el componente
jumbotron en tu sitio web con los parámetros que consideres más convenientes.

58.  Crear la sección de estilos y agregar los valores adecuados para cada etiqueta según
la apariencia que deseas proporcionar al sitio web.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 25/27
5/1/22 11:10 TBox Academy

59.  Incluir en el código las instrucciones correspondientes para agregar imágenes en las
primeras secciones, tal como está definido en el wireframe.

60.  Comprobar que los cambios realizados en el sitio se muestran correctamente en el

navegador. Realizar las correcciones que sean necesarias.

61.  Crear la tercera y cuarta sección del sitio web. Tomar en cuenta las siguientes
recomendaciones:
Utilizar como referencia el diseño de wireframe de tu sitio web.
Hacer uso de las etiquetas adecuadas para crear la estructura de las secciones.
Usar la información recolectada previamente.
Utilizar las imágenes correspondientes para cada contenido. Puedes editarlas en una
aplicación en línea para ajustarlas.
Emplear los estilos adecuados para el diseño de cada sección.
Guardar los cambios realizados en el editor de código.

62.  Revisar lo realizado en el navegador web. Luego, presentar a tu docente los avances
del proyecto.

63.  Cerrar todas las aplicaciones activas.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 26/27
5/1/22 11:10 TBox Academy

 Panel del proyecto

Todos los derechos reservados © Technology Box Inc.

https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 27/27