ESCUELA SUPERIOR POLITÉCNICA DE

CHIMBORAZO

FACULTAD DE INFORMATICA Y ELECTRONICA

TECNOLOGIAS DE LA INFORMACIÓN Y COMUNICACIÓN

PAGINA WEB EN BOOTSTRAP

INTEGRANTES:
Llori Josselyn
Gaona Josselyn
Granda Byron
Ayovi Naisha
Cerda Natalia

CURSO:
PAO 4

DOCENTE:
ING. DIEGO BASTIDAS

MATERIA:
SISTEMAS INTERACTIVOS Y MULTIMEDIA

ORELLANA, 2023

Orellana-Ecuador
Teléfono: 593 (03) 2998-200
Gaspar de Carvajal, entre Quito y Napo
Código Postal: EC060155 Extensión: 3601
 TABLA DE CONTENIDO
TABLA DE CONTENIDO........................................................................................................................1

INTRODUCCIÓN.....................................................................................................................................2

DESARROLLO.........................................................................................................................................3

1. ¿Por qué se hace?...........................................................................................................................3

2. Pasos de descarga de la plantilla de una pagina web..................................................................3

3. Modificación de la plantilla...........................................................................................................6

CONCLUSIONES...................................................................................................................................10

RECOMENDACIONES.........................................................................................................................11

BIBLIOGRAFÍA.....................................................................................................................................11

Imagen 1_____________________________________________________________________________________3
Imagen 2_____________________________________________________________________________________4
Imagen 3_____________________________________________________________________________________4
Imagen 4_____________________________________________________________________________________5
Imagen 5_____________________________________________________________________________________5
Imagen 6_____________________________________________________________________________________6
Imagen 7_____________________________________________________________________________________6
Imagen 8_____________________________________________________________________________________7
Imagen 9_____________________________________________________________________________________7
Imagen 10____________________________________________________________________________________8
Imagen 11____________________________________________________________________________________8
Imagen 12____________________________________________________________________________________9
Imagen 13____________________________________________________________________________________9
Imagen 14___________________________________________________________________________________10
 INTRODUCCIÓN

El comercio electrónico ha experimentado un crecimiento exponencial en la era digital

actual, y la venta de productos tecnológicos se ha convertido en un mercado muy lucrativo. Para

aprovechar esta oportunidad, debe tener una presencia en línea atractiva y funcional que atraiga a

los clientes y les brinde una experiencia de compra satisfactoria. En este contexto, es

fundamental cambiar la plantilla web de Bootstrap para convertirla en una página web que venda

productos tecnológicos.

Bootstrap, un marco front-end popular, ofrece una base sólida y adaptable para

desarrollar sitios web de manera efectiva. Al utilizar las ventajas de una plantilla de Bootstrap, se

puede ahorrar tiempo y esfuerzo al crear un sitio web con una apariencia visualmente atractiva y

funcionalidad sólida.

Esta modificación tiene como objetivo adaptar una plantilla web existente a las

necesidades de una página de venta de productos tecnológicos. Esto implica modificar el diseño,

la estructura y los componentes de la plantilla original para enfocarse en presentar y vender de

manera efectiva productos tecnológicos. El objetivo también es mejorar el rendimiento y la

usabilidad del sitio web para brindar una experiencia de usuario fluida y satisfactoria.

Elementos importantes, como una barra de búsqueda, filtros de productos, un carrito de

compras interactivo y páginas de productos individuales, se incorporarán durante la

modificación. Estos componentes facilitarán la búsqueda, exploración y adquisición de productos

tecnológicos por parte de los usuarios de manera conveniente y segura. Además, se prestará

atención a la personalización visual para asegurarse de que la identidad de la marca de la

empresa de venta de productos tecnológicos se refleje en el diseño final del sitio web.
 DESARROLLO

1. ¿Por qué se hace?

Una estrategia útil y fácil de usar para el desarrollo de páginas web es usar una plantilla

de página web con Bootstrap, que facilitan la creación de sitios web modernos y receptivos. Los

desarrolladores pueden ahorrar tiempo y esfuerzo al utilizar una plantilla de bootstrap al tener

una base sólida sobre la cual construir y personalizar un sitio web.

2. Pasos de descarga de la plantilla de una pagina web.

 Paso 1:

Dirigirnos a la página “bootstrapmade.com”. (Bootstrapmadre, 2020)

Imagen 1
Página Bootstrapmade.com

Fuente: Espoch, grupo1.

  Paso 2:

Escoger una plantilla, el que sea mas de su agrado. En este caso utilizaremos uno que se
llama “Nova” y hacemos clip

Imagen 2
Plantilla Nova

Fuente: Espoch, Grupo1.

El cual nos dirige a la parte donde nos dará opciones de descarga, nosotros utilizaremos

el “Nova Free”.

Imagen 3
Descarga

Fuente: Espoch, Grupo1.

  Paso 3:

Una vez descargada la plantilla, abriremos y la descomprimiremos y la guardaremos en la

carpeta que hemos creado en el DISCO C, en la carpeta wappwwwjnbtechnology.

Imagen 4
Extracción de la carpeta

Fuente: Espoch, Grupo1.

 Paso 4:

Abrir Dreamwever y se visualizara los documentos de la plantilla. Previamente ya se

conecto al servidor de jnbtechnology.

Imagen 5
Dreamweaver
 Fuente: Espoch, grupo1.

Empezaremos a modificar la plantilla, nos aparecerá todo los index.

Imagen 6
Archivos Index

Fuente: Espoch, Grupo1.

3. Modificación de la plantilla.

Primero debemos saber cuál será el tema que vamos a realizar en la plantilla escogida. En

nuestro caso escogimos “Nova”, y con eso empezaremos a tener todo listo imágenes, e

información que iremos a utilizar mediante se va modificando.

 Imagen 7
Plantilla inicial

Fuente: Espoch, grupo1.

Lo primero que hicimos fue modificar la vista principal de la página en la pestaña

“index.html” donde realizamos todo lo que tiene que ver con el cambio o edición del sitio

web, comenzamos por el menú de barra horizontal, agregamos la sección: inicio, acerca de,

servicios, catálogo y grupo. Cambiamos la imagen de fondo, el nombre y presentación de

nuestra página con una nueva fuente.

Imagen 8
Inicio

Fuente: Espoch, Grupo1.

Una vez hecho esto cargamos la información para poder visualizar el cambio en

nuestro sitio web como se muestra en la siguiente imagen.

 Imagen 9
Inicio cambiado

Fuente: Espoch, Grupo1

Seguido de esto continuamos con la edición en Dreamweaver, en la misma pestaña nos

dirigimos a la sección “Grupo” donde realizamos la presentación de cada uno de los integrantes.

Agregamos los nombres, su función en el emprendimiento y fotos de cada uno.

Imagen 10
Cambio de nombres, funciones y fotos.

Fuente: Espoch, Grupo1.

Cargamos la pagina en la web y debe aparecer los cambios recién realizados en el

index.html, el cual ya empieza a notarse los cambios de nuestra plantilla. Nuestro tema en

cuestión es la Tecnología.
 Imagen 11
Index.html Equipo

Fuente: Espoch, Grupo1.

En la sección Contacto pondremos toda la información que ya tenemos a relación con

nuestra pagina web “Empresa de tecnología”, insertamos una imagen de nuestra ubicación desde

asset/img en Dreamweaver.

Imagen 12
Sección "Contacto"

Fuente: Espoch, Grupo1.

 Por último, en esta misma sección agregamos una cajita de registro para los clientes todo

esto lo hicimos igualmente en la pestaña “index.html”, se implementó el ingreso de nombre.

Email, número de teléfono y una cajita de mensajes.

Imagen 13
Código donde se modifica e-mail entre otros.

Fuente: Espoch, Grupo1.

Imagen 14
Visualización en la web

Fuente: Espoch, grupo1.

Después de realizar todos estos cambios. A continuación, mostramos el resultado de

nuestro sitio web: https://www.jnbtechnology.xyz/index.html.

 CONCLUSIONES

En resumen, la combinación de Dreamweaver y Bootstrap es una opción poderosa

para desarrollar páginas web modernas y adaptables. Dreamweaver, como editor de

código y entorno de desarrollo visual, permite diseñar y construir sitios web de manera

intuitiva mediante características como la vista en tiempo real y la edición de arrastrar y

soltar.

Finalmente podemos concluir que Bootstrap es un framework front-end que ofrece

un conjunto de herramientas y componentes predefinidos, facilitando la creación de

diseños responsivos y estilos consistentes en el sitio web. Este framework cuenta con

características como un sistema de rejilla flexible, tipografía optimizada, componentes

interactivos y una amplia documentación.

RECOMENDACIONES

Es recomendable adquirir conocimientos básicos de HTML y CSS, a pesar de que

Dreamweaver permite diseñar sitios web visualmente sin necesidad de saber programar.

Comprender estos fundamentos es esencial para aprovechar al máximo las funciones de

Bootstrap y personalizar el sitio web según tus preferencias.

Antes de iniciar un proyecto, es importante familiarizarse con las características y

herramientas del completo software de diseño y desarrollo web, Dreamweaver. Explora las

opciones de diseño visual y las capacidades de programación para sacar el máximo provecho de

esta aplicación

BIBLIOGRAFÍA

Bootstrapmadre. (2020). Obtenido de https://bootstrapmade.com/