PROYECTO FINAL DE ASIGNATURA

“DESARROLLO WEB 1”

“ING. ELVIS PACHACAMA”

“ALAN SOLANO, JOSUE CAJAMARCA, ALEJANDRO CAVAL Y

MAITE AGUIRRE”

ABRIL 2024 – JULIO 2024

2
 CONTENIDO
OBJETIVO DE LA ASIGNATURA ............................................................................................. 5

INDICACIONES GENERALES ................................................................................................... 5

I INTRODUCCIÓN .................................................................................................................. 7

1. CAPÍTULO I .................................................................................................................... 7

1.1. NOMBRE DEL PROYECTO ........................................................................................... 7

1.2. PLANTEAMIENTO DEL PROBLEMA ............................................................................. 7

1.3. OBJETIVOS GENERALES .............................................................................................. 7

1.4. OBJETIVOS ESPECÍFICOS............................................................................................. 8

1.5. JUSTIFICACIÓN ........................................................................................................... 9

2. CAPÍTULO II ................................................................................................................. 11

2.1. MARCO TEÓRICO ..................................................................................................... 11

3. CAPÍTULO III ................................................................................................................ 14

3.1. DESARROLLO Y/O IMPLEMENTACIÓN ..................................................................... 14

4. CAPÍTULO IV ................................................................................................................ 17

4.1. ANÁLISIS DE RESULTADOS ....................................................................................... 17

5. CAPÍTULO V ................................................................................................................. 17

5.1. CONCLUSIONES ........................................................................................................ 17

5.2. RECOMENDACIONES ................................................................................................ 17

5.2. ANEXOS 18

3
 Índice de Figuras
Ilustración 1 Auditoría Informática Fuente: Autor Propio ......... Error! Bookmark not defined.

Índice de Tablas
Tabla 1 Tabla ejemplo Fuente: Autor Propio ............................ Error! Bookmark not defined.

4
 OBJETIVO DE LA ASIGNATURA

Comprender cómo es el funcionamiento de la web, esto conlleva el protocolo HTTP, toda la

estructura desde lo más básico hasta lo más complejo dentro de una página web, también

entender la conexión entre todos los elementos que se utilizarán, estos pueden ser imágenes,

estilos, scripts, etc.

Como estudiantes se debe aprender a escribir el código HTML de manera correcta para que

pueda ser válido lo que queremos mostrar en la página que se esta desarrollando. Al empezar a

dominar estilos CSS se domina también la presentación de los elementos que se encuentran en

HTML ya que se controla las propiedades de los estilos, el posicionamiento de cada línea de

código, el diseño de cada imagen o estructura que se utilice, diseño y animaciones.

A lo largo de cada clase se ha obtenido práctica gracias a cada proyecto de clase, así se aprendió

a organizar el código y que este sea de manera legible y entendible tanto para los desarrolladores

encargados del proyecto como para el docente a cargo.

INDICACIONES GENERALES

 Respetar el formato establecido por el docente.

5
 Las imágenes tienen que ir con descripciones y fuentes, con normas APA 7ma edición.

 El presente documento tiene por defecto configurado los diferentes recursos de

normas APA, en la sección de estilos, usarlos para los diferentes, temas y subtemas

desarrollados en clase, además de los márgenes y encabezados y pies de página.

 La fuente de letra es 12 y estilo Times News Román.

6
 I INTRODUCCIÓN

1. CAPÍTULO I

1.1. NOMBRE DEL PROYECTO

Página Web para Peluches Daysi

1.2. PLANTEAMIENTO DEL PROBLEMA

El negocio Peluches Daysi no ejerce la presencia dentro del mundo digital por lo cual esto

limita el alcance que podría llegar a tener por el público que busca y compra productos mediante

internet, sin embargo, hoy en día se presenta la gran variedad de competencia dentro del

mercado digital y eso puede llegar a presentar una seria desventaja si no se toma provecho del

desarrollo de una página web efectiva y bien diseñada con todos los recursos que este brinda. La

creación de una página web limita a que el negocio tenga su mayoría de las ventas tan solo de

clientes locales. No se debe olvidar que el desarrollar una página web conlleva tiempo,

conocimientos técnicos y recursos para poder sustentarlo de la mejor manera para cumplir las

expectativas. En resumen, se presencia la perdida de oportunidades de venta debido a la

competencia dentro del mercado y la mejora de experiencia de compra para los clientes.

1.3. OBJETIVOS GENERALES

Se busca estar dentro del mundo digital mediante el desarrollo de una página web

llegando a un mayor número de público quienes serán los que encuentren información

satisfactoria sobre los productos que ofrece el negocio Peluche Daysi.

7
 El objetivo de la página a desarrollar es servir como un medio netamente de información

y promoción de los productos que dispone el establecimiento, esto con la ayuda de imágenes de

excelente calidad, siendo un intermediario para con el cliente al momento de realizar la compra

e información detallada.

La página se propone el hecho de facilitar la compra de los usuarios, convirtiendo esta

acción en una experiencia atractiva y fácil al visualizar el catálogo de los productos con la opción

de elección y compra rápida siendo de manera segura para el cliente.

Al llevar colores y estructura atractiva, llama la atención del cliente y este puede ponerse

en contacto con el encargado se la supervisión de la página mediante correo electrónico o

mediante redes sociales del negocio los cuales se podrán visualizar en la página.

El desarrollo de la página debe lograr resaltar la diferencia que tiene esta con el resto de

la competencia teniendo un diseño único y proporcionando una experiencia satisfactoria al

cliente.

1.4. OBJETIVOS ESPECÍFICOS

Se debe diseñar una página con una interfaz gráfica que sea atractiva y de uso fácil, esto

debe ir acompañado de la propuesta de la temática bien proporcionada en la página web, en este

caso para peluches para lo cual se utilizará colores, imágenes, fondos y tipos de letras que no

sean aburridas ni que sean demasiado para la vista del cliente.

8
 Al recopilar información acerca del negocio se puede tener una idea más amplia sobre

todo lo que tendrá la página web, como por ejemplo el crear un apartado para el catálogo el cual

informará acerca de los productos que están disponibles y a la venta en el momento, la

descripción de cada uno, las opciones de precios ya que serán variados acorde al producto, todo

esto será posible si la página web es presentada de manera organizada y de fácil entendimiento.

Se debe incorporar un sistema de contacto el cual ayudará a que el cliente pueda

comunicarse con el o la encargada del negocio, esto con el fin de que el cliente pueda realizar

preguntas, consultar sus dudas y proporcionar retroalimentación.

1.5. JUSTIFICACIÓN

Hoy en día sobre salta el hecho de tener público activo en línea el cual interactúe en la

página web de un negocio haciendo que este crezca por el número de ventas que este consigue.

Existen varios negocios que ya tienen actividad dentro del mundo digital y así pueden conseguir

un gran número de ventas llevando el marketing digital de su lado, es importante que el negocio

con el que se va a trabajar se acople pronto a este entorno lleno cosas innovadoras cada día para

llamar la atención de los clientes para mantenerse competitivo sin perder el ritmo de interacción

de los clientes que frecuenten o encuentren la página web.

9
 Es importante resaltar que si la página no web no se encuentra bien estructurada ni con

una presentación visual llamativa no ayudará a que el cliente disfrute de la experiencia y mucho

menos realice una compra. Es por esto que se debe proporcionar un entorno accesible de

explorar y entender para poder seleccionar y realizar la compra de productos, esto ayudará a

crear una fidelidad a la marca.

Ventajas:

- Se puede llegar a un número ilimitado de público ya que la visualización se puede

extender no solo en alrededores del establecimiento sino llegando a lugares de los que

no se había escuchado antes, esto puede llegar a ser a nivel mundial.

- El sitio web proporciona disponibilidad las 24 horas del día lo cual permite que los clientes

puedan realizar compras en cualquier momento haciendo que las ventas no tengan algún

momento en el día en que puedan llegar a parar aumentando el número de ventas.

- Al tener un espacio digital se puede reducir los costos ya que a diferencia de un espacio

físico se debe cancelar el alquiler, personal y diversos gastos que no se observarán en una

página web.

- Un espacio digital puede almacenar una gran variedad de productos, es algo que no se

puede realizar en un limitado espacio físico.

10
 - Se logra llevar un análisis correcto sobre el comportamiento del cliente con la página y

esto proporciona al dueño información de lo que se puede mejorar para obtener mejores

reseñas.

Desventajas:

- Debido a que el medio digital se ha convertido en una herramienta bastante útil para

llevar a cavo el crecimiento de muchos negocios se volvió un medio altamente

competitivo.

- La creación y el mantenimiento de una página web conlleva tiempo y conocimientos

técnicos adecuados o de lo contrario no se podrá llegar a la meta de elevación de ventas

y público.

- Por otro lado, es importante resaltar el hecho de que se debe contar con un sistema de

seguridad que permita hacer saber a los clientes que tanto sus datos como los que se

encuentran en la página están siendo protegidos.

- Vulnerabilidad a los fallos técnicos que puede presentar la página web, como

interrupciones del servidor, dificultades con la búsqueda de productos, entre otros, los

cuales pueden ser negativos a la experiencia del cliente y afecta las ventas.

2. CAPÍTULO II

2.1. MARCO TEÓRICO

11
 Durante el desarrollo de la página web se llegaron a utilizar una gran variedad de

comandos, tanto como para el apartado visual como para el apartado técnico, los comandos

utilizados dentro de la página web fueron:

Html:5= Coloca una plantilla con la estructura base de la página web a realizar.

<link>=Permite unir o relacionar otros archivos a nuestra página, como por ejemplo

estilos.css.

<tittle>= Permitió agregar un titulo a la pagina el cual es visible desde el navegador.

<a>= Se utilizo para realizar un acceso a otra parte de la página web.

<img>= Permitió agregar imágenes dentro del documento.

<header>= Contenedor orientado a la parte superior de la página.

<body>= Contenedor orientado a el cuerpo de la página.

<footer>=Contenedor orientado a la parte inferior de la página.

<div>= Contenedor el cual junto a clases permite dar tanto formato como estilo a la

página.

<article>= Contenedor que permitió el uso de clases.

<section>= Otro tipo de contenedor el cual ayuda a aplicar estilos.

<nav>= Otro tipo de contenedor.

12
 <h1>= Etiqueta de texto grande.

<h3>= Etiqueta de texto mediano.

<p>= Etiqueta especializada en párrafos de la página.

<br>= Permitió realizar un salto de línea.

<hr>= Genera una línea horizontal que separa el contenido.

<iframe>= Permitió la implementación de un mapa a la página.

Dentro del apartado de estilos de la pagina se utilizaron distintos comandos los cuales

tienen funciones específicas asignados a una clase permitieron dar estilo y formato a la

página:

Margin: Permite dar un margen a el contenedor o al elemento que se este trabajando,

posee distintas direcciones como right, left, top y bottom.

Padding: Permite ajustar el área alrededor de un contenedor.

Box-sizing: Permite al sitio ser adaptable a cualquier navegador.

Font-Family: Permite conocer el estilo de letra a utilizar.

Font-size: Permite colocar un tamaño a la fuente.

Width: Permite colocar un ancho a el objeto.

Overflow: Permite controlar que se hará con los elementos que salgan de su área.

13
 Background: Permite colocar un fondo a la página, puede ser de tipo imagen o un

color que se desee en específico.

Position: Permite establecer una posición del objeto en uso.

Height: Permite dar una altura especifica.

Text-align: permite colocar el texto de una manera específica como derecha,

izquierda, medio.

Color: Coloca un color a la fuente que se trabaja.

Display: Permite colocar un objeto en tipo bloque o en línea.

Text-Decoration: Coloca una decoración en el texto.

Font-Weight: Permite agregar volumen a la letra.

Box-Shadow: Permite dar una sombra a los contenedores.

Float: Hace flotar la información a un lateral en lugar que baje.

3. CAPÍTULO III

3.1. DESARROLLO Y/O IMPLEMENTACIÓN

14
 Para el desarrollo de nuestro proyecto se realizó primero un index en el cual se colocó

una descripción rápida y breve sobre la empresa a la cual diseñamos la pagina web, em este

apartado se diseño tanto las primeras interacciones como las ultimas pues la pagina se

encuentra interconectada entre sí, con esto nos referimos a que todos los sitios de la página

web están conectados entre sí, haciendo de la navegación mucho más cómoda para el

usuario a la vez de intuitiva, lo que la hace para todo el público y de fácil uso.

Una vez se implemento la estructura del index se trabajó por separado los

contenedores del mismo, desde el apartado de menú, hasta el de especificaciones, acerca de

y ubicación, dejando un aspecto visual amigable para el usuario, esto se realizó mediante

clases y estilos asignados previamente en otra parte del sitio e implementados a la página

gracias a él comando link.

Una vez fue realizado el index se paso con el desarrollo del apartado del catálogo en

el cual se utilizaron muchas mas extensiones y contenedores, pues dentro del mismo se

implemento una cantidad de cinco peluches de variedad y un apartado de próximamente el

cual permitirá en un futuro agregar mas peluches a el catálogo.

Dentro de la estructura de la pagina se coloco un apartado en el cual se puede leer el

nombre de el peluche acompañado del precio y una imagen del mismo.

15
 Dentro de cada apartado visual de cada peluche se encuentra un contenedor el cual

nos aporta información del peluche como una descripción general del mismo la cual invita a

el usuario a comprarla, tamaño del peluche, si contiene accesorios, los materiales que se usó,

si posee una caja de voz, si es articulable y si se puede personalizar.

Junto a esto se implementó un botón con estilos el cual dará acceso directo a la pagina

de contactos la cual se usará para que el cliente se ponga en contacto con nosotros.

Por último, el apartado de contactos posee una encuesta la cual tiene todos sus

apartados obligatorios y también con un tipo especificado, lo que evita que el usuario pueda

llegar a cometer algún error al momento de ingresar información o a su vez se ingresen

campos vacíos los cuales no aporten información y solo usen espacio en la base de datos.

Junto a esta encuesta se coloca un mapa el cual posee la ubicación del local físico de

Peluches Daysi, este mapa es interactivo y se puede navegar dentro del mismo.

Por último, pero no menos importante en el pie de pagina se encuentra el apartado

de redes sociales mediante el cual el usuario podrá contactar de otra manera adicional a

Peluches Daysi.

16
 Dentro de todas las paginas se encuentra un icono en la parte superior izquierda el

cual regresa a el index del sitio web en el caso que el usuario se pierda durante la navegación,

el sitio posee lenguaje HTML para la estructura, CSS para los estilos y JavaScript para las

transiciones.

4. CAPÍTULO IV

4.1. ANÁLISIS DE RESULTADOS

La página web supero sin problema todas las pruebas realizadas dentro de la misma

lo que dio como resultado a un cliente satisfecho pues el resultado final supero las

expectativas existentes previo al desarrollo.

5. CAPÍTULO V

5.1. CONCLUSIONES

En conclusión, el desarrollo de una página web nos permitió explorar y conocer mas

acerca de comandos dentro de HTML, CSS y JS, tanto la estructura de los mismos como las

funciones y combinaciones de todos, lo que como objetivo dio una página la cual estamos

satisfechos con el resultado a su vez que nos ayudo con la practica y desarrollo de habilidades

dentro de la codificación.

5.2. RECOMENDACIONES

Mantener un control de los contenedores y clases utilizadas.

17
 Realizar revisiones constantes cada que se realice un cambio.

Tener un boceto de como se busca diseñar la página.

6. ANEXOS

Figura 1

Página de inicio.

Nota. Fuente: El autor.

18
Figura 2

Página de Catálogo.

Nota. Fuente: El autor.

19
Figura 3

Página de contactos.

Nota. Fuente: El autor.

Figura 4

Reuniones grupales.

Nota. Fuente: El autor.

20