UNIDAD EDUCATIVA PARTICULAR

“MAYOR HORACIO ZURITA BAYAS”

PROYECTO DE GRADO DEMOSTRATIVO

PREVIO A LA OBTENCIÓN DEL TÍTULO DE

BACHILLER TÉCNICO DE SERVICIOS EN CONTABILIDAD

TEMA:

“ELABORACIÓN DE UNA PÁGINA WEB INFORMATIVA PARA LA FERRETERÍA HM”

CADETE:

GONZÁLEZ MERCHÁN CRISTOPHER JERICÓ

DOCENTE GUÍA:

FECHA DE ENTREGA:

10 DE FEBRERO DE 2021

Cdla. Florida Norte, Coop. Nueva Luz Mz. 407 Solar 1; Km. 8 ½ vía a Daule, calle CNT.
Correo: rectorado@uemhzb.org – Telf.: 2254100 – https://www.facebook.com/uemhzb
Guayaquil - Ecuador
 ÍNDICE

1. Planificación y análisis de la situación planteada....................................................3

Identificación de contenidos o competencias a aplicar...............................................3

Reconocimiento de temas a revisar o reforzar...........................................................3

Planificación del trabajo..............................................................................................3

2. Desarrollo............................................................................................................... 4

Resolución de las tareas del caso planteado.............................................................4

Respuesta a pregunta teórica, opción múltiple...........................................................4

3. Reflexión................................................................................................................. 4

Importancia y aplicabilidad de la Figura Profesional...................................................4

4. Sistematización.......................................................................................................5

Explicación escrita del desarrollo...............................................................................5

Evidencia fotográfica, videográfica o links..................................................................5

Anexos....................................................................................................................... 5

Fuentes de consulta...................................................................................................5

ÍNDICE DE TABLAS

Tabla 1: Cronograma de trabajo de proyecto de grado..................................................3

 1. Planificación y análisis de la situación planteada
Identificación de contenidos o competencias a aplicar

El desarrollo de una página web informativa para el mejoramiento de un

emprendimiento es uno de los procesos informáticos más importantes en la actualidad,
durante los últimos años el uso de las páginas webs en el entorno empresarial ha sido
indudablemente ya no un lujo sino una necesidad para dar a conocer los productos y
los servicios.

Durante el proceso de formación académica la secundaria brinda diversas

oportunidades de aprendizaje para mejoras los procesos dentro de una empresa o
negocio, para la elaboración de este proyecto se han tomado muy en cuenta los temas
tratados en la asignatura de Lengua y Literatura, matemáticas, así como los de la
Figura Profesional de informática.

Los temas del tronco común que se asocian al desarrollo del proyecto son:

 Las propiedades textuales en la comprensión y producción de textos

descriptivos e instructivos (Lengua y Literatura).
 Argumentaciones analíticas sobre la relación entre lo individual y lo colectivo
desde de la identificación de su estructura (Lengua y Literatura).
 Problemas mediante modelos que utilizan funciones trigonométricas
(Matemáticas).
 La probabilidad de un evento sujeto a varias condiciones mediante el teorema
de Bayes (Matemáticas).
Los temas de las asignaturas de la Figura Profesional son:

 Conceptos básicos del protocolo de información TCP/IP (Sistemas Operativos

2do BT).
 Uso de servidor web (Sistemas Operativos 2do BT).
 Programación Orientada a Objetos (Programación 2do BT).
 Instalación de navegadores Web (Soporte Técnico 1ero BT).
 Procesos de flujo de datos (Programación 2do BT).
 Creación de bases de datos y su conexión con un lenguaje de programación
(Programación 2do y 3ero BT).
Estos temas se acoplan en gran medida a lo que necesita el desarrollo del presente
proyecto, la mayoría de los temas han sido abarcado en las asignaturas de
Programación y Sistemas Operativos, gracias a su gran acoplamiento en las diferentes
ramas de la informática.

Reconocimiento de temas a revisar o reforzar

Luego del análisis de los temas que durante el periodo académico se han visto,
analizado y desarrollado, podemos establecer que existen algunos temas que se
deben analizar y reforzar para que las actividades que se van a proponer sean
desarrolladas de forma efectiva.

Las actividades son las siguientes:

 Argumentaciones analíticas sobre la relación entre lo individual y lo colectivo

desde de la identificación de su estructura (Lengua y Literatura).
 Procesos de flujo de datos (Programación 2do BT).
 Creación de bases de datos y su conexión con un lenguaje de programación
(Programación 2do y 3ero BT).
La argumentación analítica va a ser utilizada en gran manera durante el rellenado de
los datos informativos en la página web y estos deben de ser bien argumentados para
que no sean ambiguos.

El uso de los flujos de datos en el desarrollo web es importante para conocer la

dimensión del proyecto y cuales serían sus necesidades a futuro, los flujos de datos no
solo sirven para conocer el funcionamiento de una web sino también para conocer
cuantas visitas puede soportar diferentes servidores webs.

La creación y mantenimiento de una base de datos es importante tenerlo en cuenta, ya

que las páginas web por lo general reciben datos de los usuarios y deben de estar
almacenados para que estos puedan ser procesados de manera correcta.

Todos los temas anteriores han sido abarcados, pero se necesita profundizar dichos
temas enfocados en el lenguaje de maquetación HTML y en el lenguaje de base de
datos MySQL, el proceso de creación de una página web es algo fácil y complejo y se
necesitan que los conocimientos sean actualizados para que el sitio web sea
adaptable a nuevas tecnologías.

Las páginas webs actuales deben de ser responsive (Adaptativa a diferentes

pantallas), por ello es importante manejar adecuadamente los comandos de diferentes
Framework uno de ellos Bootstrap.

Planificación del trabajo

Tabla 1: Cronograma de trabajo de proyecto de grado

FECHA ACTIVIDAD PLAZO PRODUCTO/OBSERVACIÓN

15 de enero Primera tutoría con Indicaciones de cómo establecer
1 día
de 2021 el docente guía el tema de proyecto.
Entrega del tema de
18 de enero Actualización del tema en el
proyecto al docente 1 día
de 2021 formato provisto por la institución.
guía para revisión.
2da entrega del Entrega del tema de proyecto de
19 de enero tema de proyecto al grado a Vicerrectorado
1 día
de 2021 docente guía para Académico para revisión y
revisión. aprobación.
Entrega de la
planificación y
21 de enero Indicaciones del docente sobre lo
análisis de la 1 día
de 2021 planteado.
situación planteada
al docente guía
2da entrega de la
planificación y
22 de enero
análisis de la 1 día Aprobación del docente
del 2021
situación planteada
al docente guía.
1era Entrega del
26 de enero
prototipo de pagina 1 día Retroalimentación del docente.
del 2021
web al docente guía
Creación de la
28 de enero Cuenta y dominio de la página
respectiva cuenta en 2 días
del 2021 web.
WordPress (Online)
Desarrollo del caso
30 de enero planteado
2 días Documento de proyecto.
del 2021 Documento de
Grado
2da Entrega de
1 de febrero Retroalimentación de la creación
prototipo de pagina 1 días
del 2021 de diferentes páginas adicionales
web al docente guía
1era entrega de la
2 de febrero página web subida Aprobación por parte del docente
2 días
del 2021 al servidor en línea guía e indicaciones general.
WordPress
3era entrega del
4 de febrero documento de
1 días Retroalimentación y aprobación
del 2021 proyecto de grado al
docente guía
Desarrollo y entrega
5 de febrero de la parte 3 del Retroalimentación y aprobación
1 día
del 2021 proyecto escrito de del proyecto de grado.
grado
 Organización de la
evidencia del
6 de febrero
desarrollo del 2 días Documento de evidencia.
del 2021
proyecto (Capturas y
presentación)
8 de febrero Entrega final de la Aprobación de la página por parte
1 día
del 2021 página web del docente guía.
Entrega final del
9 de febrero
documento de grado 1 día Aprobación del documento.
del 2021
al docente guía
10 de febrero Entrega final del Documento de Proyecto – Página
1 día
del 2021 Proyecto de Grado web.
Fuente: Elaboración propia.

2. Desarrollo
Resolución de las tareas del caso planteado
En el mundo actual el uso del internet ha pasado a ser un nuevo servicio básico ya sea
para estudios, trabajo, jobi, o negocios, pues en la actualidad todo se maneja por
medio de la web, al momento de querer comprar algo toda persona lo primero que
hace es buscar en internet donde puede conseguir x o y producto, pero ¿Qué sucede
si un negocio o emprendimiento no esta en internet?, esta es la pregunta del millón en
la era tecnológica.

Si nuestro negocio o emprendimiento no esta posesionado en el internet no vamos a

llegar al publico joven que basa la mayor parte de sus actividades a la compra o
búsqueda de productos por internet, dado este contexto la ferretería HM ha decidido
ingresar al mundo del internet y así posicionar su marca en la web para captar los
clientes que más consumen este mercado.

Al no contar con los recursos o conocimientos adecuados para elaborar por si mismo
una página web, se ha decidido que como proyecto de grado se le va a dar la
oportunidad de crear una web informativa sobre su negocio con el fin de mejorar su
marca en el internet, al ser un caso de implementación beta (versión prueba), se
aplicaran ciertas medidas como el uso de imágenes de internet y contenidos de la
web, con el fin que poder demostrar al propietario como quedaría su página web en
internet sin necesidad de tomar fotos de la negocio por el momento.

Para la realización de este proyecto se realizan de forma concreta una serie de pasos
que se van a ir describiendo a continuación.

Elección del servidor de contenidos

Esta es la etapa más compleja pues se decide el entorno donde se va a trabajar, para
ello se realiza la selección del servidor de contenidos WordPress que nos ayudará con
una plantilla inicial donde ya tendremos la estructura web y se procederá a
personalizar de forma adecuada el contenido de la página web.

Este proceso se llevo a cabo en 2 etapas la primera es donde se realizo una practica
en un servidor local (XAMPP), con el fin de poder manejar las herramientas de manera
correcta y no cometer un error en el dominio pues al momento de editar en internet
pueden surgir problemas como la incompatibilidad de dichos servicios entre otros.

Creación del Subdominio

Como segundo paso se creo un subdominio en la pagina web

(proyectossoftware.com) que brinda cuentas gratuitas con almacenamiento de
WordPress y su velocidad de carga de archivos es superior a la de WordPress.com
pues son servidores poco utilizados y de gran utilidad (Se llego a esta página
buscando alternativas en internet).

Instalación del WordPress

Una vez creado el dominio se procedió con la instalación del Gestor de Contenido
seleccionando la plantilla de (Azwa) que nos permite realizar una edición total del sitio
web una vez seleccionada la plantilla y la versión de base de datos y PHP necesario
se logro instalar el WordPress quedando la plantilla web ubicada en la siguiente
dirección:

http://proyectogonzalez.proyectosoftware.com/ cabe destacar que no se utilizo el

nombre de la ferretería por ser esta una versión demo, la cual no va a ser presentada
a los clientes aun si no que será presentada al propietario de la ferretería una vez
aprobado se procede a migrar todo el sitio a un dominio comercial de propiedad de la
empresa.

Cambio de información de la Empresa

Una vez que la plantilla del sitio se encontraba en funcionamiento, se procedió a la

edición de la información de manera adecuada, para esto se utiliza el administrador de
WordPress (wp-admin), en el podemos agregar páginas y editar su contenido de forma
concreta y adecuada.

Cambio de imágenes y menús de comunicación

Al momento de terminar la edición de la información básica (Página de Inicio), se

procedió a crear los diferentes menús como el de contactos, nosotros, producto y la
del autor, cada una de ellas tiene diferentes Widgets (Aplicaciones web para mejorar
su diseño) que las hacen únicas en la web permitiendo tener un toque de
personalización total dentro de la web.

Implementación de Galería de productos

Una vez que toda la información estaba cargada correctamente se decidió la

implementación de una galería de fotos donde muestren los productos de forma
ordenada y secuencial, la galería tendrá como fin informar a los usuarios sobre que
productos dispone la ferretería, adicional se agregaron enlaces hacia catálogos
digitales que son de las empresas que son nuestros proveedores y los que nos
permitirán darle al usuario toda la información que necesita sobre algún producto en
especial.

Aplicación de mejoras

Al finalizar todos los procesos anteriores se procedió a realizar diferentes mejoras

dentro del sitio como el cambio de logo y la implementación de un pie de página que
tiene la información de derecho de autor (Copyright ©), una vez terminada esta
sección la página web quedaría operativa en su totalidad para que sea aprecia por las
personas involucradas en el negocio para verificar si es de su agrado o no y
determinar el impacto que pueda tener en su negocio.
Respuesta a pregunta teórica, opción múltiple

¿Qué es el desarrollo web en WORDPRESS?

- Rama de la informática para crear contenido en diferentes dispositivos.

- Rama de la informática para crear contenido en un formato único que cualquier

dispositivo pueda interpretar.

- Rama de la informática que permite desarrollar Software cerrado en su

contenido.

- Rama de la informática para crear contenido en diferentes dispositivos

por medio de un gestor de contenido web profesional.

La respuesta correcta a la pregunta de opción múltiple es (Rama de la informática

para crear contenido en diferentes dispositivos por medio de un gestor de
contenido web profesional) ya que WordPress es un gestor de contenido profesional
muchas páginas web están basadas en este gestor de contenidos por su facilidad de
creación y fácil operación cabe destacar que WordPress esta desarrollado bajo
diferentes framework, pero el predominando es Bootstrap con la base de datos MySQL
y su gestor de base de datos phpMyAdmin el cual brinda una facilidad de manejo de
estos entornos.

La ventaja de usar el gesto de contenido WordPress es su aplicabilidad es responsive

(Adaptable a diferentes pantallas) por ese motivo la web se puede apreciar ya sea en
computadores, celulares, tabletas y Smart TV sin problema alguno.
 3. Reflexión
Importancia y aplicabilidad de la Figura Profesional

La figura profesional de informática cursada durante el bachillerato ha sido buena pues

se han abarcado temas que nunca pensé conocer como la aplicación de las
matemáticas en la informática la verdadera importancia que tienen, pues gracias a la
aplicaciones del algebra booleana se pudo desarrollar la toma de decisiones durante
los procesos de desarrollo y de creación no solo de software si no también de
hardware, el manejo adecuado de los diferentes lenguajes de programación
aprendidos (C++, JAVA) me permitieron aprender a tomar decisiones de forma
adecuada y resolver problemas por mi mismo.

La importancia de la figura profesional en la vida cotidiana nos hemos dado cuenta en

la época actual (Pandemia) lo importante y relevante que es, pues todo el modo de
vivir cambio este último año y es donde se vio a profundidad la importancia de la
informática, el desarrollo de aplicaciones para la compra de productos por internet, el
uso de aplicaciones webs para promocionar productos, el desarrollo de juegos por
internet entre muchos otros son experiencias grandes que nos ha brindado la
informática y que siempre nos brindara pues es un rama de la ciencia que está en
constante evolución y con el cambio constante de tecnología y con la pronto
integración de las inteligencias artificiales(asistentes virtuales) que están ya en
desarrollo la actualización de la informática seguirá siendo constante.

Gracias a los conocimientos adquiridos durante los 3 años de estudio en la figura

profesional informática, he desarrollado competencias en la resolución de problemas
del mundo real, transformándolos como algoritmos que me ayudan a desarrollar
diferentes actividades, el manejo de los diferentes lenguajes de programación que me
han dado la pauta para poder crear y dar mantenimiento a software, el soporte técnico
de hardware me ha abierto la puerta para poder tener un ingreso extra ya que he
podido realizar un mantenimiento de computador de forma correcta y he podido
detectar fallos en los sistemas y darle una solución concreta.

La aplicación de técnicas de diseño gráfico ha sido de gran ayuda durante el proceso

de aprendizaje y aplicación de la figura profesional, pues gracias a las diferentes
técnicas se han podido desarrollar publicidades.
La aplicabilidad de estas y mas competencias en la vida real ha sido de gran y mucha
ayuda al punto que en mi entorno familiar puedo dar soporte a familiares a que
realicen la compra de un equipo determinado para que sea de utilidad para sus
actividades gracias a los aprendizajes de las especificaciones técnicas sobre
diferentes equipos informáticos.
 4. Sistematización
Explicación escrita del desarrollo

El desarrollo de la página web se detalla de la siguiente manera:

Primero se descargó el servidor local XAMPP desde XAMPP Installers and Downloads
for Apache Friends para posterior instalar el servidor de manera estándar, una vez
instalado se procedió a realizar la activación del servidor APACHE y MySQL dando clic
en Start a ambos componentes, una vez activados los servidores y visualizando que
los puertos 80,443 y 3306 estén activos para el traspaso de información procedimos a
descargar el gestor de contenidos WordPress desde la dirección Download |
WordPress.org Español (Ecuador) posteriormente se procedió a descomprimir el
archivos y copiarlo en la carpeta de Htdocs del Xampp que se instalo en el disco local
C.

Para continuar con la instalación del gestor de contenidos para las pruebas se digito
en el navegador web la dirección localhost/wordpress y posteriormente se instala el
gestor de contenido, una vez instalado se procedió a realizar la búsqueda de la
plantilla Azwa, una vez dentro de la plantilla se procedió a verificar los menús que
podían editar y se hizo la modificación respectiva con los datos de la empresa y los
Widgets.

Una vez realizados todos estos pasos y probada la plantilla se procedió a registrar un
subdominio con el nombre de http://proyectogonzalez.proyectosoftware.com ya dentro
del dominio se procedió a realizar la instalación de los gestores de contenidos online
para eso se ingreso al panel de control de la web
http://proyectogonzalez.proyectosoftware.com/wp-admin y de aquí se importo el
contenido de la web creada localmente, de esta manera tendríamos lo realizado con la
computadora de manera local ahora en línea.

Ya en el administrador de contenidos nos dirigimos a la parte de personalización y

comenzamos a realizar las siguientes actualizaciones de información que no se
realizaron en el modo escritorio, al momento de terminar de actualizar los datos y las
imágenes de la pagina principal, realizamos la publicación de la página, logrando
mostrarla de manera operativa en internet.

Una vez ya operativa la web, procedemos a la creación de las páginas secundarias

(Contactos, Nosotros, Categoría de Productos, Acerca del autor), estas fueron creadas
en el menú páginas y se las crea en blanco solo con la plantilla de colores de Azwa,
una vez creadas las páginas se procedió a vincularlas en el mismo gestor de
contenidos en la sección de menús, al terminar de enlazar las páginas se pudo
establecer la relación de funcionamiento estándar de la página.

Ya con el funcionamiento de la página se procedió a rellenar las páginas creadas con

el contenido indicado, se estableció una misión y visión de la ferretería para agregarla
a pagina de nosotros, se agregó un plugin de maps para indicar la dirección de la
ferretera, y los números y dirección exactos en la sección de contactos, adicional se
agrego un formulario donde se puede enviar un correo electrónico para solicitar alguna
información adicional que no se encuentre en la web.

En la sección de catálogos de productos se realiza la implementación de 3 categorías

donde se agrego una imagen referencial, un texto y un vinculo para poder acceder a
las páginas respectivas y de esta forma, vincular estas nuevas paginas con cada
categoría, la forma de implementar estas 3 categorías fue gracias al plugin Elementor
que nos permite crear diferentes script para implementar en la página, al ingresar a
Elementor nos encontramos una serie de elementos que son gratis y otros de pago,
cada elemento tiene sus propiedades que se encuentran en la parte izquierda una vez
seleccionado el elemento a implementar.

Siguiendo las necesidades de la página se procede a completar el respectivo diseño

de los plugin. Al momento de terminar con la edición y cada elemento se procede a
realizar el respectivo update y posterior publicación de los cambios realizados en la
web.

Al momento de terminar de subida de la página se procede a buscar los artículos que

van a ir incluidos en la web, para eso se busca en diferentes páginas web de
ferreterías artículos relacionados y así poder almacenarlos en el computador para
personalizarlo y realizar la galería de imágenes que se necesiten en la presentación de
los productos.

La edición de los productos se la realizo en el software Adobe Photoshop en donde

usamos la herramienta forma para agregar imágenes en la parte inferior donde va a ir
el detalle y valor de cada artículo.

Una vez terminada la edición de las imágenes se procede a guardar las imágenes en
un formato que sea amigable para la web (.jpg), al momento de tener nuestro banco
de imágenes se procede a en el wp-admin buscar la página de cada categoría y
agregar una galería de imágenes donde se incluyen todas las pertenecientes a dicha
categoría y por donde el visitante de la página podrá verlas de la forma que mas le
guste.

Una vez termino de implementar las imágenes a la galería de productos se procede a

la revisión de los elementos de la web, para verificar si existen posibles errores (En el
desarrollo web esta etapa se la conoce como etapa de pruebas testear la web), en el
caso de detectar algún error estos deben de ser resueltos de manera oportuna antes
de enviar la web a producción y si ya está en línea se debe de dar de baja a la web en
el WordPress en la sección de publicar se desactiva la publicación para poder
modificar la web y de esta manera, lograr que los clientes no vean los errores y este
solventado al 100%, al finalizar la edición de errores se procede a realizar la activación
de la web en el internet para esto damos clic en la sección de publicar y publicamos
nuestra web para que quede completamente operativa.
Evidencia fotográfica, videográfica o links

Link de la Página web : http://proyectogonzalez.proyectosoftware.com/

Proceso de instalación del servidor local

Activación del Apache y MySQL

Creación de la Base de Datos

Instalación del WordPress

Panel de control y plantilla del WordPress

Creación del subdominio

Creación de la instalación Online de la página web

Modificación de la plantilla principal

Edición de páginas con Elementor

Creación del formulario de contactos
Anexos
Fuentes de consulta

Aguado, A. L. (2018). webtematica.com. Obtenido de webtematica.com:

https://webtematica.com/diseno-web-wordpress

Garcia, J. (23 de Enero de 2019). websitetooltester.com. Obtenido de

https://www.websitetooltester.com/es/crear-web-con-wordpress/