5/1/22 11:11 TBox Academy

Instituto Nacional Benjamín Estrada Valiente

Regresar
Actividad 6 En progreso

Actividad 6: Nuevas secciones y más recursos

¿De qué se trata?

En esta actividad seguirás con el diseño de nuevas secciones del sitio web y utilizarás
herramientas en línea para agregar recursos multimedia.

¿Qué se necesita?

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

Recursos
index.html (modificado en la actividad anterior)
https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 1/12
5/1/22 11:11 TBox Academy

Ejemplo_wireframe.pdf
Código_equipo.docx
Código_estilos.docx
Código_video.docx
Carpeta Plantillas.
Carpeta Imágenes.

¿Qué hay que hacer?

Sección A: Paso a paso

Etapa 1: Sección “Tiendas”

1. Abrir el archivo Ejemplo_wireframe.pdf desde la carpeta Plantillas.

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

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

2. Observar en el wireframe los elementos incluidos en la sección “Tiendas”.

3. Iniciar el editor de código HTML.

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

5. Crear un nuevo contenedor para la sección “Tiendas”. Agregar al final del código las
etiquetas que se muestran a continuación:

6. Definir la fila para el contenedor. Luego, crear la primera columna y añadir la imagen
tienda_a.jpg, un título y un texto descriptivo.

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

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

7. Dejar un espacio en blanco al final del código de la primera columna.

8. Utilizar como referencia el código de la columna 1 para crear la segunda y tercera

columna de la sección:
Segunda columna:
Imagen: tienda_b.jpg
Título: Tienda B
Subtítulo: Accesorios acuáticos y aventura

Tercera columna:
Imagen: tienda_c.jpg
Título: Tienda C
Subtítulo: Material de montaña

9. Guardar los cambios realizados en el editor y observar una vista previa en el explorador
web.

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

Etapa 2: Sección “Equipo de trabajo”

10. Dirigir la atención hacia la sección “Equipo de trabajo” en el esquema. Enseguida,

verificar los elementos que se deben incluir.

11. Iniciar la creación de una sección en un nuevo contenedor. Ingresar como título Equipo
de trabajo y subtítulo Asistencia inmediata y personalizada; ambos textos deben estar
centrados.

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

12. Presionar la tecla Enter para dejar una línea vacía debajo de los títulos de la clase
text-center.

13. Crear en la posición indicada dentro del contenedor cuatro columnas de igual ancho
con un panel dentro de cada columna. Completar la primera columna con los siguientes
datos:
Imagen: ser1.png
Texto párrafo: Asignación de posiciones, coordinar y analizar las funciones
administrativas.
Texto título h3: Juan Escobar
Texto título h4: Gerente general

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

14. Guardar los cambios realizados y observar el resultado en el explorador web.

15. Utilizar el archivo Código_equipo.docx de la carpeta Plantillas para crear la columna

2, 3 y 4 de la sección. Verificar que el código de cada columna esté en la misma posición
de la columna 1.

Código_equipo (https://static.tboxplanet.com/academy/225/3/225320180823135313.docx)

16. Guardar los cambios realizados y mostrar una vista previa del sitio web.

Etapa 3: Estilos creativos para la sección

17. Desplazarse hacia la sección de estilos al inicio del código. Enseguida, agregar un

estilo para modificar el borde del panel con los datos que se muestran a continuación.

18. Agregar un nuevo estilo para el panel de la sección, tal como se muestra a

continuación.

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

19. Utilizar el archivo Código_estilos.docx de la carpeta Plantillas para completar los

estilos de la sección. Se recomienda ingresar los valores en la posición indicada.

Código_estilos (https://static.tboxplanet.com/academy/225/3/225320180823135333.docx)

20. Guardar los cambios realizados y observar el resultado en el explorador web. Mostrar

lo realizado con tu docente.

Etapa 4: Activar el botón

21. Identificar en la sección “Acerca de” la instrucción que muestra el botón con el texto
“Más información”.

22. Modificar esta línea para que se muestre de la siguiente manera:

<a href="about.html" class="btn btn-primary btn-lg">Más información</a>
https://www.tboxplanet.com/academy/mapa.php?prtp=4&idpg=59081&idpr=225 8/12
5/1/22 11:11 TBox Academy

Nota: la etiqueta href vincula a la página about.html. Esta página contiene información
complementaria de la empresa.

23. Copiar el contenido de la carpeta acercade_web en Plantillas hacia la carpeta

webmundo de tu sitio web en el siguiente orden:
about.html en la carpeta principal webmundo.
main.css en la carpeta css.
correr.ico y deporte.png en la carpeta imagenes.

acercade_web (https://static.tboxplanet.com/academy/225/3/225320180823133724.zip)

24. Guardar los cambios y verificar que el botón “Más información” funciona

correctamente.

25. Comprobar que la página about.html aparece con la información correspondiente.

Etapa 5: Trabajar con videos

26. Identificar la línea de código que agrega una imagen en la sección “Acerca de”.
Enseguida, eliminar la instrucción completa.

27. Abrir el archivo Código_video.docx desde la carpeta Plantillas.

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

Código_video (https://static.tboxplanet.com/academy/225/3/225320180823135510.docx)

28. Copiar el código y pegarlo en la misma posición que se encontraba la imagen. Se

recomienda colocar las etiquetas en el siguiente orden:

29. Guardar los cambios realizados y mostrar el resultado en el explorador web.

Sección B: ¡Es tu turno!

Etapa 1: ¡Más recursos multimedia!

30. Hacer uso de un teléfono móvil o cámara digital para tomar fotografías que estén
relacionadas con el tema de tu sitio web.

31. Descargar y guardar las fotografías en la carpeta webpersonal/imagenes.

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

32. Utilizar un editor en línea para modificar el tamaño, colores, efectos y otras

propiedades en la imágenes.
Una opción es http://editor.pho.to/es/ (http://editor.pho.to/es/)

33. Si es posible, utilizar un dispositivo móvil o cámara digital para grabar un video corto
para tu sitio web.

34. Descargar el video y guardarlo en la carpeta webpersonal/videos con un formato

estándar y compatible.

35. Si consideras necesario, puedes utilizar una herramienta de edición de videos en línea
o un programa local para editar el video grabado o crear uno nuevo.
Una alternativa es https://www.wevideo.com/ (https://www.wevideo.com/)

36. Buscar en el explorador web más recursos que puedas emplear en tu página web; por
ejemplo, sitios con información relevante sobre el tema o videos explicativos. Almacenar
los contenidos en las carpetas correspondientes o guardar los vínculos en un documento.

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

Etapa 2: Más secciones informativas

37. Utilizar el archivo Mi wireframe.pdf localizado en tus archivos de trabajo para

consultar qué secciones de tu diseño web continuarás creando.

38. Verificar la forma en que se encuentran organizados los elementos de la sección y el

tipo de contenido que tienes que incluir.

39. Usar las etiquetas y procedimientos aprendidos para crear el código para las nuevas
secciones de tu sitio web.

40. Utilizar los recursos preparados previamente para agregarlos en tu sitio web.

41. Agregar los estilos CSS necesarios para mejorar la apariencia del texto, paneles y
columnas de la sección en desarrollo y otras secciones del sitio.

42. Guardar los cambios realizados en la página index.html. Presentar el avance a tu

docente.

 Panel del proyecto

Todos los derechos reservados © Technology Box Inc.

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