INSTITUTO TECNOLÓGICO SUPERIOR

DEL ORIENTE DEL ESTADO DE HIDALGO

ITESA

DISEÑO E IMPLEMENTACIÓN DEL SITIO WEB PARA

CEFOPED

INFORME DE RESIDENCIA PROFESIONAL

PARA OBTENER EL TÍTULO DE:

INGENIERO EN SISTEMAS COPUTACIONALES

PRESENTA:
JOSUÉ RIVERA DEL ANGEL
MATRICULA
16030601

ASESOR INDUSTRIAL:
MTRO. JOSÉ LUIS GALA ORDOÑEZ

ASESOR ACADÉMICO:
D. C. C. GERMÁN CUAYA SIMBRO

APAN, HGO., NOVIEMBRE 2020.

Agradecimientos
En primer lugar, deseo expresar mi agradecimiento al D. en C. C. Germán Cuaya Simbro,
por la dedicación, inmenso aporte y apoyo que me ha brindado para el desarrollo de este
trabajo, así como las retroalimentaciones brindadas ante cada idea presentada.

Así mismo, agradezco de forma muy especial y sincera a la Doctora Rosalba del Angel
Zúñiga, quien ha mostrado ser una gran profesional de amplia generosidad, por su gran
calidad de persona, así como también por brindarme la confianza y oportunidad para
poder desarrollar mi proyecto de residencia profesional dentro de su empresa.

Por su valioso tiempo, dedicación y soporte, agradezco al Mtro. José Luis Gala Ordoñez,
quien me facilitó todos los medios suficientes para llevar a cabo todas las actividades
propuestas durante el desarrollo de este proyecto.

Quiero extender un sincero agradecimiento a todo el personal docente, quienes han

mostrado una gran generosidad y por compartir su experiencia y amplio conocimiento a
lo largo de mi formación académica.

Gracias a mi familia, a mis padres Jorge y Norma Lilia, a mis hermanos Jesús y Jorge,
por su ejemplo de esfuerzo, dedicación y superación, por su paciencia, así como también
por todo el apoyo moral y emocional, necesarios en todos los momentos que conlleva el
desarrollo de este trabajo.

Al mismo tiempo, aprovecho para agradecer a mis amistades, a mi novia, compañeros

de intercambio y seres queridos, quienes siempre me han brindado valiosos aportes de
índole personal y profesional, siendo parte importante en mi educación.

2
Resumen
El presente trabajo fue diseñado para el Centro de Formación Pedagógica y Educativa,
en primera instancia se aborda la problemática de la situación en la que se encontraba
previo al desarrollo del proyecto, así como también, se realiza la priorización de las
dificultades identificadas.

Posterior a la delimitación del problema, se establecen los objetivos en función a las

distintas perspectivas y necesidades de la empresa. De esta forma, se determina que la
solución ideal es la creación y diseño de un sistema web complementado con un servicio
de comercio electrónico el cual sea flexible y amigable.

Una vez estando de acuerdo con los anteriores, se procede a realizar la investigación
teórica, misma que tiene como propósito ser la base y sustento del proyecto.

Para obtener un producto funcional, fue necesario seguir la metodología de Modelado

Ágil, la cual permite lograr la definición, organización y aprobación del conjunto de
técnicas, métodos y procedimientos a seguir en la parte operacional.

Finalmente, se abordan la demostración de resultados finales que fueron obtenidos, así

como también el impacto que esto representa.

3
Tabla de contenido
Agradecimientos ..................................................................................................................................... 2
Resumen ................................................................................................................................................. 3
Introducción ............................................................................................................................................ 8
Planteamiento del problema ................................................................................................................... 9
1.1 Priorización de problemas ........................................................................................................ 9
Objetivos ............................................................................................................................................... 10
2.1 Objetivo General .......................................................................................................................... 10
2.2 Objetivos Específicos ................................................................................................................... 10
Marco contextual .................................................................................................................................. 11
3.1 Software ...................................................................................................................................... 11
3.1.1 Software de sistema .............................................................................................................. 11
3.1.2 Software de aplicación .......................................................................................................... 11
3.2 Internet ....................................................................................................................................... 11
3.2.1 Host ...................................................................................................................................... 11
3.2.2 Servidor web ......................................................................................................................... 13
3.2.3 Servicio web.......................................................................................................................... 13
3.2.4 Gestor de contenido web ...................................................................................................... 14
3.2.5 Sitio web ............................................................................................................................... 14
3.3 Modelo cliente servidor ............................................................................................................... 16
3.3.1 Red ....................................................................................................................................... 16
3.3.2 Cliente .................................................................................................................................. 16
3.3.3 Servidor ................................................................................................................................ 16
3.3.4 Protocolo .............................................................................................................................. 17
3.4 Diseño responsivo........................................................................................................................ 17
3.5 Comercio electrónico ................................................................................................................... 17
3.6 Servicios en la nube ..................................................................................................................... 18
3.6.1 IaaS ....................................................................................................................................... 19
3.6.2 PaaS ...................................................................................................................................... 19
3.6.3 SaaS ...................................................................................................................................... 19
Justificación........................................................................................................................................... 22
Desarrollo del proyecto ......................................................................................................................... 23

4
 5.1 Modelado Ágil ............................................................................................................................. 23
5.1.1 Fases de la metodología ........................................................................................................ 24
5.1.2 Reuniones de seguimiento .................................................................................................... 25
Fase 1. Recopilación de requisitos ..................................................................................................... 26
Recolección de datos ..................................................................................................................... 26
Solución propuesta ........................................................................................................................ 27
Planificación de actividades ........................................................................................................... 29
Fase 2. Diseño ................................................................................................................................... 31
Prototipado ................................................................................................................................... 31
Fase 3. Desarrollo .............................................................................................................................. 44
Aspectos generales ........................................................................................................................ 44
Inicio.............................................................................................................................................. 45
Organismo Certificador .................................................................................................................. 47
Noticias ......................................................................................................................................... 48
Multimedia .................................................................................................................................... 48
Contacto ........................................................................................................................................ 49
Formularios de contacto ................................................................................................................ 49
Entradas ........................................................................................................................................ 50
Ventanas emergentes .................................................................................................................... 50
Servicio de comercio electrónico. .................................................................................................. 51
Fase 4. Integración y pruebas ............................................................................................................ 52
Fase 5. Implementación y despliegue................................................................................................. 54
Fase 6. Revisión ................................................................................................................................. 55
Resultados............................................................................................................................................. 55
Conclusiones ......................................................................................................................................... 69
7.1 Competencias aplicadas ............................................................................................................... 70
Fuentes de información ......................................................................................................................... 71

5
Tabla de ilustraciones
Ilustración 1 Modelo Cliente-Servidor.................................................................................................... 16
Ilustración 2 Fases de metodología Modelado Ágil ................................................................................ 24
Ilustración 3 Diseño Inicio - 1 ................................................................................................................. 32
Ilustración 4 Diseño Inicio - 2 ................................................................................................................. 33
Ilustración 5 Diseño Inicio – 3 ................................................................................................................ 34
Ilustración 6 Diseño OC.......................................................................................................................... 35
Ilustración 7 Diseño Noticias .................................................................................................................. 36
Ilustración 8 Diseño Entradas ................................................................................................................ 37
Ilustración 9 Diseño multimedia ............................................................................................................ 38
Ilustración 10 Diseño Contacto .............................................................................................................. 39
Ilustración 11 Diseño Ventana emergente ............................................................................................. 40
Ilustración 12 Diseño Catálogo .............................................................................................................. 41
Ilustración 13 Diseño categorías ............................................................................................................ 41
Ilustración 14 Diseño Características de producto .................................................................................. 42
Ilustración 15 Diseño Carrito ................................................................................................................. 43
Ilustración 16 Diseño Formulario de compra .......................................................................................... 43
Ilustración 17 Diseño Pago..................................................................................................................... 44
Ilustración 18 Cabecera y barra de menú ............................................................................................... 45
Ilustración 19 Píe de página ................................................................................................................... 45
Ilustración 20 Biblioteca de medios ....................................................................................................... 45
Ilustración 21 Menú en escritorio .......................................................................................................... 55
Ilustración 22 Menú en tabletas y móvil. ............................................................................................... 56
Ilustración 23 Filminas - 1 ...................................................................................................................... 56
Ilustración 24 Filminas - 2 ...................................................................................................................... 56
Ilustración 25 Información Gral. - 1 ........................................................................................................ 57
Ilustración 26 Información Gral. - 2 ........................................................................................................ 57
Ilustración 27 Información Gral. – 3 ....................................................................................................... 57
Ilustración 28 Campus virtual ................................................................................................................ 58
Ilustración 29 Documento cursos ........................................................................................................... 58
Ilustración 30 Certificaciones ................................................................................................................. 59
Ilustración 31 categorías ........................................................................................................................ 59
Ilustración 32 Lista de productos ........................................................................................................... 59
Ilustración 33 Descripción de productos ................................................................................................ 60
Ilustración 34 Carrito de compra ........................................................................................................... 60
Ilustración 35 Formulario de compra ..................................................................................................... 60
Ilustración 36 Finalizar compra .............................................................................................................. 61
Ilustración 37 Centros evaluadores ........................................................................................................ 61
Ilustración 38 Ventana emergente ......................................................................................................... 61
Ilustración 39 Ultimas noticias ............................................................................................................... 62
Ilustración 40 Noticia completa ............................................................................................................. 62

6
Ilustración 41 Sitios de interés ............................................................................................................... 62
Ilustración 42 Clientes ........................................................................................................................... 63
Ilustración 43 Imagen ampliada ............................................................................................................. 63
Ilustración 44 Otros servicios ................................................................................................................. 63
Ilustración 45 Presentación de documento ............................................................................................ 64
Ilustración 46 Píe de página ................................................................................................................... 64
Ilustración 47 Organismo certificador .................................................................................................... 64
Ilustración 48 Estándares acreditados.................................................................................................... 65
Ilustración 49 Direccionamiento a documento ....................................................................................... 65
Ilustración 50 Principales servicios ......................................................................................................... 65
Ilustración 51 Noticias ........................................................................................................................... 66
Ilustración 52 imágenes ......................................................................................................................... 66
Ilustración 53 Navegación en galería...................................................................................................... 67
Ilustración 54 Videos ............................................................................................................................. 67
Ilustración 55 Reproducir video ............................................................................................................. 67
Ilustración 56 Contacto.......................................................................................................................... 68
Ilustración 57 Localización ..................................................................................................................... 68

Contenido de tablas
Tabla 1 Planificación de actividades ....................................................................................................... 30
Tabla 2 Tabla de pruebas ....................................................................................................................... 54

7
Introducción
La aparición de las nuevas tecnologías ha transformado a pasos agigantados las
diferentes formas de trabajo y de comunicación. Por lo anterior, los organismos,
instituciones y empresas se ven en la necesidad de sumarse al proceso de
transformación digital.

Derivado también de la pandemia actual por COVID-19, se vuelve forzoso el minimizar

la movilización de las personas, así como también, reducir los tiempos y recursos, debido
a esto el uso de las TICs juegan un rol muy importante en nuestra nueva realidad.

El Centro de Formación Pedagógica e Innovación Educativa es una empresa oriunda del

Estado de Hidalgo que tiene por objetivo “Impulsar la innovación y el desarrollo en las
instituciones educativas”. Hoy en día, ha maximizado sus actividades y atención de su
mercado a través de Internet. Debido a esto, sus procesos no pueden ser estáticos, si
no, que deben ser innovados para estar a la vanguardia y estar preparados para afrontar
los nuevos retos.

Por ello que se diseñó este proyecto con la intención de afianzar y brindar un servicio de
calidad y con calidez a cada uno de los usuarios.

Las bondades del trabajo realizado en este organismo permiten que los clientes puedan
conocer las ofertas educativas y de servicio tanto nacionales como internacionales a
través de un sistema web el cual sea flexible e intuitivo, y a su vez puedan ser adquiridas
mediante un proceso de compra en tiempo real el cual sea ágil, rápido y sencillo. Así
también, se establece un modo de comunicación entre cliente – empresa para atender
las inquietudes que puedan surgir y de esta forma lograr una mayor visibilidad dentro del
mundo digital.

8
Planteamiento del problema
CEFOPED es una organización empresarial oriunda de Pachuca, Hidalgo, dedicada a
ofrecer servicios profesionales, con el objetivo de "Promover la innovación educativa y el
desarrollo pedagógico de las instituciones educativas", cumpliendo el mismo mediante la
creación, comercialización e impartición de diversos cursos y certificaciones basadas en
competencias. Actualmente, se encuentra deficiente de un sistema web en el cual se
puede unificar la información de distintos tipos y el mismo permita atender de manera
óptima a su gran variedad de clientes los cuales puedan acceder desde distintos
dispositivos. Al figurarse en la situación antes mencionada, la empresa carece de un
servicio de comercio electrónico que permita realizar transacciones de compra-venta y
facturación en tiempo real de los servicios que se ofertan, ocasionando una considerable
complejidad y consumo de tiempo para poder adquirirlo.

1.1 Priorización de problemas

• No se cuenta con un medio por el cual se pueda realizar transacciones para la
adquisición de diferentes servicios.
• El contenido de su sitio anterior no tiene la capacidad de adaptarse a cualquier
dispositivo.
• La estructura de la información suele ser confusa.
• Las actualizaciones de complementos no son sencillas.
• No se cuenta con un repositorio de versiones.

9
Objetivos
2.1 Objetivo General
Desarrollar un sistema web a través de lenguaje HTML, CSS y un gestor de contenido
en el Centro de Formación Pedagógica e Innovación Educativa, y lograr con ello la
comercialización de servicios en el mercado nacional e internacional.

2.2 Objetivos Específicos

Promover el contenido de la organización.

Crear un diseño web responsivo que sea capaz de adaptar la apariencia del sitio a
cualquier dispositivo.

Mejorar la experiencia de usuario mediante una estructura atractiva e interactiva.

Ampliar el mercado de la empresa a través del comercio electrónico.

Reducir los tiempos de operación al momento de realizar transacciones de compra-

venta.

10
Marco contextual
3.1 Software
El software comprende el conjunto completo de programas, procedimientos y rutinas
asociados con el funcionamiento de un sistema informático. Un conjunto de instrucciones
que le indica al hardware de una computadora que realice una tarea se denomina
programa o programa de software. (The Editors of Encyclopaedia Britannica, 2020)

3.1.1 Software de sistema

Dicho software, tiene el propósito de controlar el funcionamiento interno de una
computadora, por medio de un sistema operativo, y también se encarga de controlar
todos los periféricos del sistema informático.

3.1.2 Software de aplicación

Se refiere al tipo de software que indica a las computadoras que ejecute comandos, los
cuales son otorgados por el interesado, de esta forma, se puede decir que incluye
cualquier programa que sea capaz de procesar una gran variedad de datos para un
usuario.

3.2 Internet
Red integrada por miles de redes y computadoras interconectadas en todo el mundo
mediante cables y señales de telecomunicaciones, que utilizan una tecnología común
para la transferencia de datos. (Zamora Lucio, 2014).

3.2.1 Host
Es un equipo que funciona como punto de inicio y fin de las transferencias de datos.
Descrito comúnmente como el lugar donde reside un sitio web. Un host de Internet tiene
una dirección de Internet única (dirección IP) y un único nombre de dominio o nombre de
host. (Redacción Conceptodefinicion.de, 2019)

11
3.2.1.1 Host web
Un host es un servidor web que almacena y transmite los datos de uno o más sitios web.
Host también puede referirse al proveedor de servicios que arrienda esta infraestructura,
que se conoce como hosting. (Rouse, 2017)

3.2.1.2 Host en la nube

Se basa en tecnologías de computación en la nube que permiten que varios servidores
actúen como un sistema en el que varias máquinas pueden garantizar el rendimiento del
sitio web. El alojamiento en la nube es una alternativa al alojamiento de un sitio web en
un solo servidor. El alojamiento en la nube se puede considerar tanto como
infraestructura como servicio (IaaS) como plataforma como servicio (PaaS ). (Rouse,
2017)

3.2.1.3 Host virtual

Según (Rouse, 2017) el término host virtual tiene dos usos. Uno se refiere a la tecnología
utilizada para ejecutar múltiples dominios o aplicaciones en un solo servidor físico, y el
segundo se refiere a empresas que venden servicios de infraestructura virtual.

3.2.1.4 Nombre de host

Se refiere a un nombre de texto plano el cual funciona como identificador en un dominio
determinado. En el entorno de Internet, un nombre de host es perteneciente a una
dirección web, conformándose por cuatro partes: protocolo, subdominio, nombre de
dominio y dominio de nivel superior.

Protocolo: HTTP (Hypertext Transfer Protocol), protocolo de transferencia de hypertexto

en castellano, es la primera parte que encontramos en una dirección web y es, como su
nombre indica, el protocolo de comunicación que permite la transferencia de información
por internet. (D, 2019)

Subdominio: es un subgrupo o subclasificación del nombre de dominio el cual es definido

con fines administrativos u organizativos, y podría considerarse como un dominio de
segundo nivel. Normalmente es una serie de caracteres o palabra que se escriben antes
del dominio principal. (Tooit - Digital Awarness, 2020)

12
Dominio: se refiere al nombre del sitio web, es decir, al nombre único utilizado para
buscar e identificar a un sitio de los demás. Este puede ser conformado por cualquier
combinación de letras y números, sin embargo, debe encontrarse registrado previamente
a su uso.

3.2.2 Servidor web

Software y hardware que utiliza HTTP (Protocolo de transferencia de hipertexto) y otros
protocolos para responder a las solicitudes de los clientes, realizadas a través de la World
Wide Web. El trabajo principal de un servidor web es mostrar el contenido del sitio web
mediante el almacenamiento, procesamiento y entrega de páginas web a los usuarios.
(Rouse, 2020)

3.2.3 Servicio web

De acuerdo con IONOS (2020) un servicio web se trata de una interfaz mediante la que
dos máquinas (o aplicaciones) se comunican entre sí. Esta tecnología se caracteriza por
estos dos rasgos:

• Multiplataforma: cliente y servidor no tienen por qué contar con la misma

configuración para comunicarse. El servicio web se encarga de hacerlo posible.
• Distribuida: por lo general, un servicio web no está disponible para un único
cliente, sino que son diferentes los que acceden a él a través de Internet.

3.2.3.1 Plataforma

Se refiere a un sistema base que permite el funcionamiento de determinados módulos

compatibles de hardware y software, estos sistemas se definen mediante estándares que
permiten determinar una arquitectura de hardware y una plataforma de desarrollo de
software. (Camacho Castillo, 2015)

3.2.3.1.1 Plataforma de desarrollo de software

Se refiere al entorno en el cual se despliega la programación de una colección de
aplicaciones y que tiene como objetivo desarrollar y ejecutar sitios web de forma versátil,
en dónde la justificación de su elección será dependiente de los factores como: costos,
flexibilidad, soporte y velocidad.

13
3.2.4 Gestor de contenido web
Es un programa o aplicación web que permite la creación de una estructura de soporte
para la creación, administración y publicación de contenido en una página web por parte
de administradores, editores y otros usuarios. Un CMS cuenta con una interfaz que
controla una o varias bases de datos donde se aloja el sitio web y permite manejar de
manera independiente el contenido y el diseño. (Innovamedia, 2018)

Los gestores de contenido propician diversas ventajas y facilidades para los

desarrolladores web, como lo son:

• Cómoda navegación por parte del usuario y desarrollador.

• Facilidad y fluidez en las actualizaciones tanto de contenidos, como de plugins.
• Utilización de una gran variedad de plugins para aumentar las funcionalidades
de la página web
• Mayor posicionamiento dentro de los buscadores.
• Facilita el trabajo colaborativo.
• Sencillez en la escalabilidad del sitio.
• Disminución de los costes que involucran el mantenimiento.
• Propicia la sencillez para alcanzar el logro de los objetivos y estrategias de
marketing planteados.

3.2.5 Sitio web

Es un conjunto de páginas web accesibles a través de internet, convenientemente
enlazadas y con una finalidad concreta. (Conejo, 2020)

Las aplicaciones web son soberanamente utilizadas hoy en día, debido a la practicidad
que se consigue a través del navegador como cliente ligero, a la autonomía del sistema
operativo y al gran ahorro de hardware y software.

14
3.2.5.1 Tipos de sitios web
Comercio electrónico

Sitios que se conforman de varias páginas web, donde las empresas son capaces de
desplegar su pluralidad de productos, de esta forma los usuarios pueden realizar pedidos
en línea y completar las transacciones aplicando diferentes métodos de pago.

Landing page

En este tipo de sitios se concentra toda la información en una sola pagina web, por tanto,
el usuario final puede visualizar el contenido conforme se desplaza mediante el sitio,
además, se enfocan en cumplir con un propósito en especifico gracias a su diseño
optimizado.

Institucionales

La función primordial en esta categoría es albergar la información de una organización,

usualmente no contiene numerosas páginas, por tanto, su diseño se considera sencillo.

Sitios de marca

Principalmente utilizados por marcas de consumo intensivo, lo cual les permite consolidar
su imagen corporativa, con el objetivo de fidelizar a cada uno de sus clientes y
avecinarlos a la filosofía de la compañía.

De servicios profesionales

Además de que incluyen diversidad de información corporativa, intentan incentivar a los

usuarios a adquirir sus productos o servicios ofrecidos, sin la necesidad de tener
estrictamente un enfoque de comercio electrónico.

Foros, comunidades y redes sociales

Dichos sitios reúnen a usuarios finales con intereses en común, permitiéndoles

establecer uno o varios canales de comunicación entre sí.

15
3.3 Modelo cliente servidor
Modelo de aplicación distribuida en el que las tareas se reparten entre los proveedores
de recursos o servicios, llamados servidores, y los demandantes, llamados clientes. Las
aplicaciones Clientes realizan peticiones a una o varias aplicaciones Servidores, que
deben encontrarse en ejecución para atender dichas demandas.

Ilustración 1 Modelo Cliente-Servidor

3.3.1 Red
Se refiere al conjunto de distintos clientes y servidores, que se encuentran unidos ya sea
en forma física o no física, en el que se establecen y fluyen protocolos de transmisión de
información.

3.3.2 Cliente
El concepto de cliente hace referencia a un demandante de servicios, este cliente puede
ser un ordenador como también una aplicación de informática, la cual requiere
información proveniente de la red para funcionar. (Schiaffarino, 2019)

3.3.3 Servidor
Este concepto hace alusión a un proveedor de servicios, el cual puede ser un ordenador
o una aplicación informática con el objetivo de enviar información a los demás agentes
de una red.

16
3.3.4 Protocolo
Un protocolo es un conjunto de normas o reglas y pasos establecidos de manera clara y
concreta sobre el flujo de información en una red estructurada. (Schiaffarino, 2019)

3.4 Diseño responsivo

Conocido por las siglas RWD (Responsive Web Design), es una filosofía de diseño y
desarrollo, cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que
se esté utilizando para visualizarla. (Colaboradores Milenium, s. f.) En la actualidad, los
sitios web se visualizan en una gran variedad de dispositivos, cada uno de estos posee
diversas características, de esta forma, al seguir este modelo se pretende lograr una
visualización adecuada en cualquier dispositivo con un solo diseño web.

3.5 Comercio electrónico

También conocido como comercio por internet, se refiere a la compra y venta de bienes
o servicios a través de Internet y la transferencia de dinero y datos para ejecutar estas
transacciones. (Shopify, 2018) El comercio electrónico se utiliza frecuentemente para
hacer referencia a la venta de productos físicos en línea, pero también puede describir
cualquier tipo de transacción comercial que se suministre a través de Internet.

En el estudio de Forbes Staff (2014) se identifican un par de beneficios que conlleva la

evolución e implementación de una forma de comercio en línea como lo son:

• Reducción de costos:
Desplegar una tiene virtual se torna indudablemente más económico, ya que
permite a las organizaciones progresar con una utilización reducida de recursos,
además, el mercadeo digital se vuelve un medio de promoción bastante módico
en comparación de medios de comunicación tradicionales.
• Genera lealtad con los clientes:
Al implementar un medio de comercio electrónico, se consigue una oportunidad
que permite a los clientes disfrutar de esa experiencia, ofreciéndoles un amplio
catálogo de productos y brindando la opción de realizar transacciones por este
medio de forma ágil, rápida y sencilla.
• Mayor alcance de público:

17
 Generando procesos de compra y venta por medio de Internet, los productos se
encuentran disponibles en cualquier lugar, hora y día, además, dentro de este
medio se cuenta con un público mucho mayor que los que podrían transitar por
una tienda física, consiguiendo aumentar las posibilidades de crecimiento y
alcance de las empresas.
• Seguridad para el vendedor y el comprador:
Vendiendo a través de plataformas electrónicas, se promueve la protección de los
datos de los usuarios, así mismo, se evita que los datos de los métodos de pago
utilizados sean utilizados con fines maliciosos.
• Facilidad de entrega de productos:
Día con día existen más empresas de logística encargadas de ofrecer servicios
de entrega rápidos, eficaces, seguros y con precios accesibles, además es posible
utilizar plataformas de rastreo de pedidos, consiguiendo que los clientes
comprueben el estado del envío de su producto y de esta forma los mismos tengan
la confianza de que su compra llegará en tiempo y forma.
• Mayor participación en la cartera de los clientes:
Otro grande beneficio al contar con un servicio de comercio electrónico en las
empresas es que generan una mayor participación en la cartera de los clientes.
Por tanto, se vuelve importante el establecer vínculos e interacción con el
consumidor a través de internet.

3.6 Servicios en la nube

Los servicios de nube son infraestructuras, plataformas o sistemas de software que los
proveedores externos alojan y que se ponen a disposición de los usuarios a través de
Internet. Estos facilitan el flujo de datos de los usuarios a través de Internet, desde los
clientes de front-end (p. ej.: los servidores, las tabletas y las computadoras de escritorio
o portátiles, es decir, cualquier sistema de hardware en los extremos de los usuarios)
hasta los sistemas de los proveedores, y viceversa. Para acceder a los servicios de nube,
los usuarios no necesitan más que una computadora, un sistema operativo y una
conexión de red a Internet. (Red Hat, s. f.)

18
3.6.1 IaaS
Se refiere a una infraestructura como servicio, es decir, se presenta como una forma de
cómputo en la nube que brinda a los usuarios finales una infraestructura de tecnologías
de la información a través de internet, siendo así que IaaS proporciona los servicios y
estructuras necesarios sobre los cuales se fabrican los demás servicios.

El proveedor de IaaS ofrece el almacenamiento, virtualización, componentes de red y los

servidores. Por consiguiente, el usuario no requiere tener un centro de datos local ni debe
preocuparse por actualizar o conservar físicamente estos elementos.

3.6.2 PaaS
Plataforma como servicio, en esta modalidad de cómputo en la nube dónde un tercero
brinda tanto el sistema de hardware, así como también una plataforma de software de
aplicaciones, permitiendo a los programadores desarrollar, ejecutar y gestionar sus
propias aplicaciones sin la necesidad de diseñar y mantener la infraestructura o
plataforma que se suelen involucrar en el proceso.

Al igual que IaaS, PaaS incluye infraestructura (servidores, almacenamiento y redes),

pero también incluye middleware, herramientas de desarrollo, servicios de inteligencia
empresarial (BI), sistemas de administración de bases de datos, etc. PaaS está diseñado
para sustentar el ciclo de vida completo de las aplicaciones web: compilación, pruebas,
implementación, administración y actualización. (Microsoft, s. f.)

3.6.3 SaaS
El software como un servicio (SaaS) es un modelo de prestación de software basado en
la nube, en el cual el proveedor de nube desarrolla y mantiene un software de
aplicaciones de nube, proporciona actualizaciones de software automáticas y hace que
el software sea accesible para los clientes a través de internet mediante el pago por uso.
El proveedor de nube administra el hardware, el middleware, el software de aplicaciones
y la seguridad. Por lo tanto, los clientes de SaaS pueden reducir drásticamente los

19
costos, así como desplegar, escalar y actualizar las soluciones de negocios más
rápidamente que con el mantenimiento de software y sistemas en las instalaciones, y
predecir el costo total de propiedad con mayor precisión. (Oracle, s. f.)

Dicho modelo funciona bajo suscripción, se adquiere de forma online, los archivos se
almacenan en la nube y se puede acceder a estos desde cualquier dispositivo con un
punto de internet.

3.6.3.1 Beneficios SaaS

Hoy en día, la mayoría de las empresas se encuentran interesadas en los servicios en la
nube, ya que estos son capaces de adaptarse a los diferentes tamaños y giros
organizacionales. Al implementar el modelo SaaS se consiguen los siguientes beneficios:

• Menores costos iniciales:

Las plataformas SaaS representan menores costos en comparación de software
de tipo tradicional, además, al trabajar bajo suscripción los precios suelen ser
accesibles.
• Alta accesibilidad:
Las aplicaciones bajo el modelo SaaS están disponibles desde cualquier
dispositivo, en cualquier hora lugar, cumpliendo con una conexión de Internet.
• Actualizaciones sin esfuerzos:
Ya que el proveedor es el encargado de gestionar todas las actualizaciones, los
usuarios no deben preocuparse por la necesidad de descargar e instalar las
mismas.
• Reducción de tiempos:
En dicho modelo, tanto el despliegue como la configuración del software se
realizan por parte de la empresa proveedora del servicio.
• Escalabilidad:
Permite atender las solicitudes de los clientes de forma amigable, evitando retraso
en los tiempos de respuesta, además se cuenta con la capacidad para aumentar
el rendimiento total del servicio cuando las demandas se encuentran en aumento.

20
3.6.3.2 SaaS para Comercio electrónico
Son sistemas de software que permiten vender y comprar. Éstas ofrecen un catálogo
segmentado de productos, plantillas, distintos medios de pago, bases de datos y
estadísticas, de entre los que poder elegir según las necesidades de nuestro proyecto.
(Mora, 2016)

Actualmente, el comercio en Latinoamérica está creciendo de forma exponencial,

consiguiendo un mayor protagonismo en la economía del mundo, es por ello que existen
diferentes plataformas SaaS capaces de integrarse y adaptarse a las diversas
necesidades de las empresas, algunas ofertas en el mercado son las siguientes:

• WooCommerce
Es una plataforma altamente útil, desarrollada para integrarse naturalmente con
WordPress, ofrece una gran variedad de métodos de pago y envío, asimismo
existe gran variedad de documentación para su correcto manejo, así mismo brinda
una gran potencia y flexibilidad a un costo económico.
• Shopify
Es un claro ejemplo de software como servicio, el cual ofrece la opción desplegar
una tienda tanto online como offline, porta características para todo tipo de
usuarios, desde principiantes hasta expertos en comercio electrónico. Una de sus
grandes ventajas es que no requiere un hosting, ya que se encuentra en la nube,
además, así mismo permite crear una tienda en varios idiomas, por tanto, se torna
ideal para internacionalizar los negocios y cuenta con soporte técnico las 24 horas,
los 365 días del año.
• Magento
Esta plataforma SaaS se torna perfecta cuando se pretende desplegar un gran
catálogo de productos y se planea expandirse e ir creciendo con el tiempo,
además de que admite un gran número de métodos de pago también permite
múltiples monedas y principalmente se encuentra optimizado para SEO.

21
Justificación
Día con día el mercado empresarial se encuentra en una constante transformación
tecnológica, con lo cual se pretende aumentar el número de oportunidades de desarrollo
y bienestar, sin embargo, esto implica una diversidad de desafíos. Por tanto, se torna de
suma importancias para las organizaciones contar con un sistema web, el cual les
permita dar visibilidad online a la imagen empresarial, así como informar de forma
correcta sobre los productos o servicios que se ofertan.

Es por eso que la implementación correcta de un sistema web complementado de un

servicio de comercio electrónico se presenta como una oportunidad en la nueva
economía digital que permite establecer una madurez y consolidación del negocio, la
cual, además se propicia una reducción de costos y la modernización de sus procesos,
logrando que estos sean ágiles, rápidos y sencillos. Otra gran ventaja es que las
organizaciones son capaces de obtener una potencialización del mercado, de esta forma
permite a las empresas utilizar de manera efectiva sus recursos y es posible llevar a cabo
transacciones comerciales exitosas en tiempo real tanto a nivel nacional como
internacional. Además, al acoplar un sitio web empresarial con un diseño responsivo
permite que los usuarios puedan acceder y visualizar correctamente la información desde
cualquier dispositivo generando un mayor alcance.

De acuerdo con lo anterior, las organizaciones son aptas para aumentar su

competitividad y calidad de servicio de forma significante, siendo una solución idónea y
pertinente para cumplir cada uno de sus objetivos.

22
Desarrollo del proyecto
Para el desarrollo adecuado de este proyecto fue utilizada la metodología Modelado Ágil,
la cual es descrita a continuación:

5.1 Modelado Ágil

De acuerdo con Rungta (2020) se define la Metodología Ágil de la siguiente manera: Es
una práctica que promueve la iteración continua de desarrollo y pruebas a lo largo del
ciclo de vida de desarrollo de software del proyecto. En el modelo Agile, tanto las
actividades de desarrollo como las de prueba son concurrentes, a diferencia del modelo
Waterfall.

Siendo así que esta metodología asume la intensión de promover una gestión de
proyectos disciplinada, de esta forma se propicia la constante inspección del código y la
adaptación de este. Al ser un sistema organizado, favorece en las mejores prácticas de
desarrollo y de esta forma se logra la optimización de los tiempos de desarrollo y
satisfacción del cliente mediante la entrega rápida de un producto funcional.

Los autores de OBS Business School (2016) mencionan los beneficios que se obtienen
al implementar dicha metodología en el desarrollo de un proyecto, los cuales son
señalados de la siguiente manera:

• Rápida respuesta a los cambios. Al ser procesos evolutivos, los equipos de trabajo
pueden implementar soluciones sobre la marcha. Ya no es necesario esperar
hasta el final para corregir fallos.
• Intervención del cliente en el proceso. El cliente interviene de una forma activa en
cada una de las etapas del proceso. Puede aportar ideas y opinar sobre los
resultados que se le van entregando progresivamente.
• Entregas del producto a intervalos. Las entregas parciales o en bloques mejoran
la optimización de recursos y optimizan las labores de seguimiento y control. El
producto final es, en realidad, la suma de varios productos parciales que han sido
monitorizados varias veces.
• Eliminación de tareas innecesarias. Al priorizar las tareas de un proceso, los
responsables del mismo saben con certeza cuáles tienen un mayor peso y cuáles

23
 resultan secundarias o, incluso, innecesarias. Esta distinción ayuda a centralizar
esfuerzos y a unificar criterios de actuación.

5.1.1 Fases de la metodología

Tener identificadas cada una de las fases que se involucran al seguir la metodología de
modelado ágil para el desarrollo óptimo de este proyecto tiene una suma importancia, es
por ello que se describen de la siguiente forma:

Ilustración 2 Fases de metodología Modelado Ágil

• Fase 1. Recopilación de requisitos

Consiste en la definición de los requisitos, realización de la planificación de
tiempos y actividades necesarias para el desarrollo del proyecto, y se
somete a una aprobación.
• Fase 2. Diseño
Se delimitan las herramientas necesarias para alcanzar el mejor resultado
y se efectúa un prototipado del sistema, de misma forma, esta fase debe
ser aprobada por la empresa.

24
 • Fase 3. Desarrollo
Consiste la ejecución de las actividades planificadas que permiten convertir
la documentación de diseño en el software real, para así conseguir un
producto funcional.
• Fase 4. Integración y pruebas
Etapa dedicada a efectuar una serie de pruebas que permiten examinar el
rendimiento del producto obtenido, para así asegurar que el mismo esta
libre de errores, o en su defecto, hacer la corrección de los fallos que se
identifiquen.
• Fase 5. Implementación y despliegue
Una vez aprobadas y completadas las fases anteriores, el sistema se
implementa dentro de los servidores y este a su vez es proporcionado a la
organización para ser utilizado como una demostración o bien para su uso
real.
• Fase 6. Revisión
Después de desplegar el producto final, el equipo de desarrollo recibe
comentarios acerca del sistema o ideas que permitan resolver las
dificultades que surgieron durante las fases previas.

5.1.2 Reuniones de seguimiento

Para la correcta gestión de este proyecto es necesario llevar a cabo una serie de
reuniones entre el equipo de desarrollo y miembros de la empresa que a su vez son
responsables del mismo, se plantea que dichas juntas se realicen en al menos 2 sesiones
de 20 minutos cada semana, pertinentes para tratar los siguientes temas:

• Avances obtenidos, basándose en las reuniones previas.

• Propuesta de nuevas ideas que puedan surgir.
• Aclaración de posibles dudas.

Así mismo, en la finalización de cada fase se llevará a cabo una reunión en la cual se
presenten los resultados finales de cada una de estas y a su vez proceder a la aprobación
de lo expuesto.

25
Fase 1. Recopilación de requisitos
Esta fase se encuentra enfocada para la recolección de datos que permiten especificar
los requisitos necesarios que debe cumplir el producto final, así como también las
funcionalidades y limitaciones con las que este mismo contará. Así mismo, se realiza la
planificación de tiempos y actividades a desarrollar.

Recolección de datos
La organización define la información que pretende poner a disposición de sus clientes
desde cualquier dispositivo que ellos accedan:

• Datos que constituyen la empresa (¿Quiénes somos?, Acreditaciones obtenidas,

Misión, Valor, Valores y Política de Calidad).
• Estándares acreditados.
• Principales servicios.
• Enlaces que permitan navegar a sus diferentes campus virtuales.
• Cursos ofertados y sus variables características.
• Certificaciones nacionales e internacionales que los clientes pueden adquirir.
• Información relacionada a Centros Evaluadores perteneciente a la organización y
el contacto de estos.
• Noticias relevantes.
• Sitios de interés que puedan complementar la búsqueda de los usuarios.
• Instituciones y organizaciones que forman parte de la cartera de clientes de la
empresa.
• Imágenes y videos distinguidos.
• Forma de contactar o ubicar a la compañía.

26
Solución propuesta
Tomando en consideración las necesidades expuestas, se precisa como solución el
desarrollo de un sistema web flexible, intuitivo y responsivo, el cual se encuentre
integrado por diferentes secciones en las cuales se pueda presentar la información
propuesta, así mismo, se dispondrá de un servicio de comercio electrónico el cual crear
un catálogo de servicios ofrecidos y a través de este sea posible realizar transacciones
de compra-venta, permitiendo agilizar los procesos en tiempo real.

La solución se encuentra integrada por las siguientes páginas y secciones:

• Inicio
o Dispositivas.
o ¿Quiénes somos?
o Acreditaciones.
o Nosotros.
▪ Misión.
▪ Visión.
▪ Valores.
▪ Política de calidad.
o Campus virtual.
▪ Campus virtual 2019.
▪ Campus Virtual 2020.
o Cursos.
o Certificaciones.
▪ Acceso a servicio de comercio electrónico.
• Inicio.
• Catálogo.
• Carrito de compra.
• Contacto.
o Centros Evaluadores.
▪ Para cada cliente se cuenta con:

27
 • Ventana emergente con formulario, datos de contacto y
estándares acreditados.
o Ultimas noticias:
▪ Noticias más recientes.
o Sitios de interés.
▪ Curriculum CEFOPED.
▪ Sitio web CONOCER.
▪ Certificación de competencias.
o Nuestros clientes.
▪ Imágenes y enlaces de acceso al sitio web de cada uno.
o Otros servicios.
▪ Servicios relacionados.
• Organismo Certificador.
o Definición de un Organismo Certificador.
o Estándares acreditados.
o Principales servicios de la organización.
• Noticias.
o Sección de noticias relevantes.
▪ Cada noticia cuenta con:
• Imágenes y publicaciones recientes en Facebook.
o Visualización de publicaciones en Twitter.
• Multimedia.
o Imágenes.
o Videos.
• Contacto
o Formulario y datos de contacto.
o Localización geográfica.

28
Planificación de actividades
Id de Actividad Descripción Duración

Comienza Fase 1

0 Recolección de datos 3 días.

1 Estructuración de propuesta 5 días

2 Aprobación 2 días

Finaliza Fase 1

Comienza Fase 2

3 Planteamiento de ideas para el diseño 4 días

4 Prototipado en software 6 días

5 Aprobación de prototipado 4 días

Finaliza Fase 2

Comienza Fase 3

6 Configuraciones 1 día

7 Desarrollo de las diferentes secciones 45 días

Configuración de tienda en línea,

8 obtención de método de pago y 8 días
generación de catálogo

10 Aprobación 4 días

Finaliza Fase 3

Comienza Fase 4

29
11 Pruebas de responsividad 1 día

12 Pruebas de acceso a todo el contenido 2 días

13 Pruebas de métodos de pago 2 días

14 Aprobación 2 días

Finaliza Fase 4

Comienza Fase 5

15 Obtención del contenido oficial 5 días

16 Inserción de toda la documentación 8 días

17 Despliegue en el servidor 2 días

18 Aprobación 2 días

Finaliza Fase 5

Comienza Fase 6

19 Comentarios 3 días

20 Solución de dificultades 3 días

Finaliza Fase 6

PRODUCTO FINAL TERMINADO TOTAL: 112 DÍAS

Tabla 1 Planificación de actividades

30
Fase 2. Diseño
Una vez aprobada la solución capaz de atender las diferentes necesidades y la
planificación de actividades expuesta, para el desarrollo de esta etapa se definen las
herramientas necesarias para la construcción correcta del proyecto y de qué forma se
involucran:

• Adobe XD
Software de edición de gráficos, utilizado para crear interfaces, siendo así, es
manipulado para diseñar el prototipado del sistema web.
• Lenguaje HTML
Empleado para la creación y estructuración de secciones que conformarán el
producto.
• Lenguaje CSS
Utilizado como lenguaje de diseño gráfico que permite crear y determinar el estilo
que tendrá la codificación HTML.
• SaaS Shopify
Destinado para erigir el servicio de comercio electrónico y hacer uso de sus
distintas funcionalidades para realizar transacciones.
• Gestor de contenido web:
Software que posibilita la creación de un entorno de trabajo para la administración
de diversos contenidos (documentos, imágenes, diapositivas, entradas,
versiones, etc.).

Prototipado
Para la página principal se atiende la petición de mostrar la mayor parte de información
dentro de esta, es por esto que el prototipado se realiza de la siguiente forma:

31
Ilustración 3 Diseño Inicio - 1

32
Ilustración 4 Diseño Inicio - 2

33
 Ilustración 5 Diseño Inicio – 3

Como una segunda página se encuentra Organismo Certificador, la cual se estructura

de la siguiente forma:

34
 Ilustración 6 Diseño OC

Para mostrar a los usuarios las diferentes entradas, se estructura de la siguiente forma
la página Noticias:

35
 Ilustración 7 Diseño Noticias

Por su parte cada noticia/entrada se basa en el siguiente diseño:

36
 Ilustración 8 Diseño Entradas

La organización cuenta con una gran variedad de fotografías y videos relevantes a cada
una de sus participaciones en diferentes acontecimientos, estos son posibles de
visualizarse mediante la página Multimedia, la cual se estructura de la siguiente manera:

37
 Ilustración 9 Diseño multimedia

Parte de la clientela pueden tener ciertos cuestionamientos acerca de la información

presentada, dentro de la página Contacto, ellos pueden hacer saber sus inquietudes a

38
través de un formulario, o bien, son puestos a su disposición ciertos datos para la
localización de la empresa y para esto se sigue el siguiente prototipo:

Ilustración 10 Diseño Contacto

39
Si las dudas no son correspondientes a la empresa y estas se encuentras dirigidas hacia
los Centros Evaluadores, pueden hacer llegar sus respectivas dudas mediante una
ventana emergente para cada CE y los cuales se encuentran basados en el siguiente
diseño:

Ilustración 11 Diseño Ventana emergente

Refiriéndose a la parte del servicio de comercio electrónico, en la página Catalogo, los

usuarios pueden visualizar las categorías de productos que se ofertan, estructurándose
de esta forma:

40
 Ilustración 12 Diseño Catálogo

Cada categoría se encuentra conformada por una serie de servicios que se encuentran
a disposición de los clientes, estos se figuran con el siguiente diseño:

Ilustración 13 Diseño categorías

41
Las características individuales referentes a los productos son presentadas con el
siguiente formato:

Ilustración 14 Diseño Características de producto

Para recopilar los diferentes pedidos que hace cada usuario, se hace utilización del
Carrito de Compras y este se encuentra asentado bajo el siguiente diseño:

42
 Ilustración 15 Diseño Carrito

Al momento de pulsar el botón Finalizar Compra, se accede a un formulario con la

finalidad de conocer los datos del usuario que está realizando una compra:

Ilustración 16 Diseño Formulario de compra

43
Para completar la transacción se presenta el siguiente diseño, de esta forma los clientes
pueden ingresar los datos correspondientes a su forma de pago y así poder adquirir los
diferentes servicios.

Ilustración 17 Diseño Pago

Fase 3. Desarrollo
Una vez siendo aprobados cada uno de los prototipos se procede al desarrollo de cada
página que conforma el sistema:

Aspectos generales
Coexisten secciones que cada una de las diferentes páginas tendrán en común, debido
a esto es importante comenzar con el desarrollo de estas:

• Definir título de cabecera.

• Crear de sección para barra de menú.
o Agregar logotipo al gestor de contenido.
o Añadir logotipo dentro de la barra de menú.
o Establecer botones de menú.
• Crear sección para píe de página.
o Incorporar íconos de redes sociales.
o Establecer texto referente al derecho exclusivo del sitio.

44
 • Establecer tipografías y colores de fondo.

Ilustración 18 Cabecera y barra de menú

Ilustración 19 Píe de página

Inicio
El desarrollo de la página principal se describe de la siguiente forma:

Contenido multimedia:

• Incorporar imágenes, filminas y documentos que serán utilizados como simulación

a la biblioteca de medios.

Ilustración 20 Biblioteca de medios

45
Ya contando con los medios adjuntos, se procede a la construcción de las diferentes
secciones que son parte de esta página, dichas acciones son realizadas mediante el uso
de HTML, CSS y funcionalidades del gestor.

• Añadir filminas de presentación.

• Definir títulos.
• Crear los diferentes bloques y columnas.
• Información general.
o Incorporar simulaciones de texto e imágenes.
• Campus virtual.
o Definir botones a utilizar y títulos que tendrán.
o Añadir iconos
o Especificar las URL de los dos campus a los que se van a dirigir.
• Cursos.
o Incluir imágenes y títulos.
o Direccionar cada opción de curso a documentos PDF.
• Certificaciones.
o Crear botón mediante.
o Definir imagen de fondo.
o Establecer URL de catálogo a la que va a apuntar.
• Centros Evaluadores.
o Crear un botón para cada CE.
▪ Elegir cual ventana emergente debe desplegar.
• Ultimas noticias.
o Incorporar funcionalidad para mostrar únicamente las entradas más
recientes.
o Definir el número de entradas que se deben presentar.
• Sitios de interés.
o Fijar imágenes y textos referentes.
o Implantar los botones de cada uno y los enlaces para direccionar.
• Nuestros clientes.

46
 o Añadir imágenes como simulación de logotipos.
▪ Establecer botón con funcionalidad para ampliar imagen.
▪ Incorporar botón de direccionamiento para los sitios oficiales.
▪ Agregar cualidad de opacidad a cada imagen.
• Otros servicios.
o Definir los formatos publicitarios.
o Precisar el enlace a los distintos documentos PDF.
• Aplicar distintos estilos mediante CSS.
• Establecer tipografías y colores para todo el contenido.
• Integrar distintos plugin para dar efectos y animaciones.

Organismo Certificador
Para el desarrollo de esta página se llevan a cabo los siguientes pasos:

• Establecer banner que incluye título.

• Crear los diferentes bloques y columnas mediante HTML.
o Definir sus distintos tamaños.
• Definir títulos.
• Organismo Certificador
o Crear borrador de texto a través de Lorem ipsum.
o Integrar imagen prueba de la biblioteca de medios.
• Estándares acreditados.
o Definir texto identificador de cada estándar.
▪ Direccionarlo a documento PDF.
o Establecer sección de nombres de cada estándar.
▪ Direccionarlo a documento PDF.
o Generar animación al pasar el cursor por cada estándar mediante un
complemento.
• Personalizar estilos, colores y topografía mediante CSS.

47
Noticias
La siguiente serie de actividades fueron esenciales para la construcción de esta página:

• Establecer banner que incluye título.

• Agregar borrador de texto el cual hace alusión al título.
• Definir bloque y columnas para entradas de noticias y sección de Twitter.
• Entradas
o Organizar la forma de mostrar todas las entradas mediante un
complemento.
o Personalizar efectos animados al pasar el cursor en cada una mediante
plugin.
• Sección Twitter
o Implementar plugin para cronología de Twitter.
o Vincular la cuenta.
o Personalizar tamaños y numero de publicaciones que se deben mostrar.
o Añadir botón para seguir la cuenta.
o Personificar los estilos de tipografía y colores del contenido mediante CSS.

Multimedia
La composición de esta pagina se consigue mediante los siguientes pasos los cuales
pueden llevarse a cabo mediante HTML, CSS y Plugin de galería:

• Establecer banner que incluye título.

• Creación de bloques y columnas para imágenes y videos.
• Imágenes.
o Añadir diversas imágenes de diferentes tamaños a la galería.
o Agregar la funcionalidad para ampliar las imágenes al pulsar cualquiera de
estas.
o Elegir la forma de distribución.
• Videos.
o Se especifica el número de columnas para la cuadricula de videos.
o Añadir enlaces de cada video.

48
 o Definir estilo de títulos y descripción.
• Personalización de tipografías y colores a través de CSS.

Contacto
Dicha página tiene la intención de presentar a los usuarios un medio de contacto con la
organización o bien datos para la localización de esta, se encuentra desarrollada de la
siguiente manera:

• Establecer banner que incluye título.

• Definir los bloques y columnas para información de contacto y localización.
o Especificar el tamaño de cada uno con CSS.
• Establecer títulos.
• Contacto.
o Incorporar formulario relacionado a la empresa.
o Definir iconos para los diferentes datos.
o Establecer borradores de títulos y descripciones.
• Localización.
o Mediante plugin se incorpora Mapa de Google.
▪ Se especifica localización de la empresa.
▪ Indicar el tamaño de ampliación y altura del mapa.
• Aplicar tamaños, tipografía y colores mediante CSS:

Formularios de contacto
Todos los formularios de contacto utilizados en el sitio se encuentran basados en un
mismo diseño y se desarrollan tal como en la siguiente descripción:

• Otorgar un título a cada formulario.

• Erigir todas las etiquetas.
• Establecer número de campos necesarios.
o Definir las variables para identificador a cada uno de estos.
• Fijar las cuentas de correo que será
• Utilización de funcionalidad para el envío de correo electrónico con los datos
proporcionados.

49
 • Edición de mensajes para diversas situaciones.

Entradas
Considerando que las entradas estarán en constante actualización, se define que estas
se trabajen de forma dinámica, siendo así que pueden seguir la misma plantilla, pero
con diferentes tipos de información, para lograr esto se ponen en práctica los siguientes
pasos:

• Crear plantilla y otorgarle un título.

• Almacenarla en el repositorio del gestor de contenido.
• Declarar categoría por fechas.
• Elegir una imagen representativa de cada entrada.
• Plantilla.
o Establecer bloques para noticias y para sección de Facebook.
o Noticias.
▪ Definir texto para títulos.
▪ Incorporar sección para imagen relevante.
▪ Establecer sección para descripción completa de noticia.
o Publicaciones Facebook.
▪ Inserción de complemento para actividad cronológica de Facebook.
▪ Definir dimensiones del complemento.
o Otras noticias.
▪ Mediante plugin se incorpora una cuadricula de entradas.
▪ Definir el orden en que aparezcan.
▪ Aplicar ajustes de diseño.

Ventanas emergentes
De misma forma, cada una de las ventanas emergentes utilizadas para este sistema
siguen un mismo modelo, y estas se realizan de la siguiente forma:

• Crear una nueva ventana emergente.

• Definir un nombre que la identifique.

50
 • Definir bloques y columnas para Información del CE, Formulario de contacto y
Estándares acreditados, mediante HTML.
o Información del CE.
▪ Crear sección para logo del organismo.
▪ Definir imagen.
▪ Añadir sección para información.
• Incorporar iconos y textos para cada característica.
o Formulario de contacto.
▪ Agregar el formulario correspondiente a cada CE.
o Estándares acreditados.
▪ Establecer título.
▪ Crear enlace con los respectivos títulos de cada estándar.
▪ Establecer URL de los documentos PDF.
▪ Implementar plugin que otorgue efectos a cada enlace.

Servicio de comercio electrónico.

Para poder desarrollar la página de tienda virtual, se hace uso de software como
servicio Shopify y fueron empleadas las siguientes actividades:

• Realizar un registro de datos referentes a la empresa y nombre de la tienda.

• Obtener el portal de la plataforma.
• Definir el tipo de moneda con que se maneja la tienda.
• Gestionar el contrato del plan con el que se va a trabajar.
• Configurar y habilitar los diferentes tipos de pago de la tienda.
• Emitir datos para una validación bancaria.
• Personalizar los canales de venta.
• Configuraciones de envío y entrega.
• Establecer la forma en que se cobrarán impuestos sobre las ventas.
• Generación de catálogo.
o Añadir nuevos productos.
▪ Definir un nombre para cada producto.
▪ Añadir descripción.

51
 ▪ Integrar una o varias imágenes del producto.
▪ Establecer precios a cada uno.
▪ Realizar configuración para inventario.
▪ Edición SEO.
o Páginas de productos individuales.
▪ Incorporar cabecera y pie de página.
▪ Incluir sección para visualizar productos y sus características.
▪ Añadir sección para visualizar recomendaciones de productos.
o Colecciones
▪ Crear las nuevas categorías y determinar un nombre.
▪ Añadir los diferentes productos a cada una de estas.
o Crear página de Catálogo.
▪ Definir secciones de cabecera y píe de página.
▪ Añadir lista de colecciones.

Fase 4. Integración y pruebas

Ya que en la fase anterior aún no se encuentra incorporada la información oficial de
CEFOPED aún se considera una simulación del sistema, misma que se somete a una
aprobación por parte del responsable del proyecto. Al externar su aceptación de lo antes
mencionado, dentro de esta fase se realiza una serie de pruebas las cuales permiten
identificar que el sistema se encuentra sin errores y funciona de forma óptima.

Dichas pruebas se enumeran de la siguiente forma

Tipo de Aprueba
Id Prueba Descripción Comentarios
prueba Si No
El sistema se
visualiza de forma
PI1 Interfaz completa y X Se cumple satisfactoriamente.
correcta en modo
escritorio.
El sistema se
visualiza de forma
PI2 Interfaz completa y X Se cumple satisfactoriamente.
correcta en modo
tableta.

52
 El sistema se
visualiza de forma
Se cumple, pero se requiere
PI3 Interfaz completa y X
ajustar dos imágenes.
correcta en modo
móvil.
Los botones del
menú direccionan
PIT1 Interacción X Se cumple satisfactoriamente.
a las paginas
correctas.
Las imágenes se
amplían de forma
PIT2 Interacción X Se cumple satisfactoriamente.
correcta al pulsar
sobre estas.
Los botones para
Campus Virtual
PIT3 Interacción X Se cumple satisfactoriamente.
direccionan
correctamente.
Las animaciones y
efectos se llevan a
PIT4 Interacción X Se cumple satisfactoriamente.
cabo al pasar el
cursor.
Al elegir un CE
este abre la
PIT5 Interacción ventana X Se cumple satisfactoriamente.
emergente
correspondiente.
Cada entrada se
visualiza de forma
PIT6 Interacción X Se cumple satisfactoriamente.
completa al pulsar
sobre estas.
Los enlaces de
cada estándar
PIT7 Interacción apuntan hacia los X Se cumple satisfactoriamente.
documentos PDF
correctos.
Los videos se
visualizan y
PIT8 Interacción X Se cumple satisfactoriamente.
reproducen al
pulsar sobre estos.
Puede añadirse
PIT9 Interacción nuevas entradas X Se cumple satisfactoriamente.
con facilidad.
Los formularios no
deben ser enviado
PC1 Comunicación sin llenar los X Se cumple satisfactoriamente.
campos marcados
como necesarios.

53
 La información
completada en los
formularios se
PC2 Comunicación X Se cumple satisfactoriamente.
envía de forma
correcta a los
destinatarios.
Las características
de los productos
Comercio
PCE1 se pueden X Se cumple satisfactoriamente.
electrónico
visualizar al pulsar
sobre estos.
Pueden sumarse
Comercio nuevos productos
PCE2 X Se cumple satisfactoriamente.
electrónico de una forma
sencilla.
Pueden añadirse
Comercio diversos
PCE3 X Se cumple satisfactoriamente.
electrónico productos al
carrito de compra.
Se permite la
compra con
Comercio
PCE4 diferentes X Se cumple satisfactoriamente.
electrónico
instituciones
financieras.
Las transacciones
Comercio
PEC5 se completan de X Se cumple satisfactoriamente.
electrónico
forma exitosa.
Tabla 2 Tabla de pruebas

Fase 5. Implementación y despliegue

Una vez realizadas las pruebas descritas con anterioridad y consumando con una
aprobación por parte de la empresa acerca del comportamiento, capacidad de operación
y visualización del sitio, se procede a realizar las siguientes actividades:

• Obtención y almacenamiento en la biblioteca de medios todas las imágenes

oficiales.
• Cada imagen de simulación fue cambiada por las oficiales definidas para el sitio.
• Todos los enlaces fueron permutados para direccionar a los documentos PDF
formales.
• Se completaron todas las entradas para cubrir la parte de noticias.
• Cada borrador de texto fue sustituido por la información real de la empresa.
• Se añadieron todos los productos con su respectiva descripción al catálogo.

54
 • Los precios de prueba fueron relevados por los verdaderos.
• Se realizó el despliegue del sistema web dentro del servidor propio de CEFOPED.
• Demostración del sitio completamente funcional ya alojado en el servidor, a
personal de la empresa.
• Se realiza una copia de seguridad.

Fase 6. Revisión
Dentro de esta etapa, el responsable del proyecto planteó la idea de cambiar ciertos
colores de fondo para el bloque de los botones correspondientes a los Centros
Evaluadores, así como el color de estos. Dichas modificaciones fueron realizadas de
manera inmediata y se aprobó la nueva presentación.

De igual modo, se indica que la estructura que conforma la sección de Clientes se

pretende cambiar por un carrusel de imágenes, sin embargo, el perteneciente a la
empresa señala que dicha modificación no requiere ser aplicada de manera inmediata,
si no, en un tiempo futuro.

Finalmente se lleva a cabo una reunión en la cual la empresa expresa la satisfacción del
producto final obtenido.

Resultados
A continuación, se presenta la visualización completa del sistema, así como las distintas
funcionalidades que lo conforman:

En primera instancia se muestra la capacidad de cambio que posee el menú ante al

reducir las dimensiones de pantallas.

Ilustración 21 Menú en escritorio

55
 Ilustración 22 Menú en tabletas y móvil.

Al mismo tiempo se demuestra el cambio entre filminas.

Ilustración 23 Filminas - 1

Ilustración 24 Filminas - 2

56
A su vez, se muestra la información general que está a disposición de los usuarios.

Ilustración 25 Información Gral. - 1

Ilustración 26 Información Gral. - 2

Ilustración 27 Información Gral. – 3

A continuación, al pasar el cursor sobre algún botón de Campus Virtual, este se ilumina
y activa su funcionalidad de animación.

57
 Ilustración 28 Campus virtual

Al seleccionar uno de los cursos, este nos direcciona al documento PDF que le fue
asignado.

Ilustración 29 Documento cursos

Se personalizó un botón el cual al presionarlo envía a los usuarios hacia el catálogo de

Certificaciones, en el cual se pueden realizar transacciones para adquirirlas.

58
 Ilustración 30 Certificaciones

Ilustración 31 categorías

Ilustración 32 Lista de productos

59
Ilustración 33 Descripción de productos

Ilustración 34 Carrito de compra

Ilustración 35 Formulario de compra

60
 Ilustración 36 Finalizar compra

Cada uno de los Centros Evaluadores incorporados se visualizan de la siguiente forma,

y al pulsar sobre estos se despliega su correspondiente ventana emergente.

Ilustración 37 Centros evaluadores

Ilustración 38 Ventana emergente

Las noticias más actuales se presentan como se muestra a continuación y al pulsar la

leyenda “Seguir leyendo” direcciona al usuario a la nota completa.

61
 Ilustración 39 Ultimas noticias

Ilustración 40 Noticia completa

Los sitios de interés son puestos a disposición de la siguiente manera:

Ilustración 41 Sitios de interés

Al seleccionar una imagen referente a los Clientes de la empresa, estos muestran las
opciones para ampliar la misma o bien ser direccionados a los sitios oficiales de cada
uno.

62
 Ilustración 42 Clientes

Ilustración 43 Imagen ampliada

Los banners publicitarios se presentan dentro de la sección Otros Servicios, y al pulsar

cualquiera de estos presentan su documento PDF definido.

Ilustración 44 Otros servicios

63
 Ilustración 45 Presentación de documento

Al tocar cada uno de los iconos incorporados al píe de página estos direccionan a los
clientes a las diferentes redes sociales de la empresa.

Ilustración 46 Píe de página

Al pulsar la opción Organismo Certificador de la barra de menú nos envía a la siguiente

página.

Ilustración 47 Organismo certificador

Dentro de esta página se exponen los estándares acreditados con los que se cuenta y
los usuarios pueden acceder a los documentos de cada uno al pulsar el número de cada
estándar o bien sus títulos correspondientes, además de presentar un efecto cuando el
cursor pasa sobre alguno de estos.

64
 Ilustración 48 Estándares acreditados

Ilustración 49 Direccionamiento a documento

Así mismo, existe la sección especificada para publicar los principales servicios de la
empresa y se visualizan de la siguiente forma:

Ilustración 50 Principales servicios

Dentro de la página Noticias se presentan las diferentes entradas con las que se cuenta,
al pasar el cursor sobre alguna de estas, se habilita la opción de opacidad para las
imágenes representativas, y al pulsar sobre ellas, se muestra el contenido completo.

65
 Ilustración 51 Noticias

Dentro del menú también se cuenta con la opción de dirigirnos hacia el contenido
multimedia, dentro de este se definen imágenes que al pulsar cada sobre estas se
amplían y de misma forma se habilitan los botones para navegar entre la galería.

Ilustración 52 imágenes

66
 Ilustración 53 Navegación en galería

Además, se incorporan videos los cuales pueden ser reproducidos desde el sitio con tan
solo pulsar el botón que los integra.

Ilustración 54 Videos

Ilustración 55 Reproducir video

Para que los distintos clientes o usuarios puedan expresar sus diferentes dudas o bien
adquieran datos de contacto de la empresa, se definió la formalizó la página Contacto tal
como se muestra a continuación:

67
 Ilustración 56 Contacto

O bien, pueden referir la dirección de la empresa mediante el mapa de Google.

Ilustración 57 Localización

68
Conclusiones
Concluyo que el desarrollo de este proyecto me permitió adquirir una grata experiencia
de aprendizaje, en la que tuve la oportunidad de aplicar los conocimientos tanto teóricos
como prácticos adquiridos a lo largo de mi formación académica.

Como experiencia profesional, los miembros del organismo compartieron conmigo sus
habilidades y destrezas, mismas que me permitieron fortalecer y enriquecer mi capital
cultural. Además de adquirir nuevas aptitudes, tuve la oportunidad de potencializar mis
valores como: sentido de responsabilidad, compromiso, trabajo colaborativo y
solidaridad.

Así mismo, reconozco la importancia y el uso de las Tecnologías de la Información y

Comunicación que nos pueden ayudar a ser innovadores, competitivos y estar a la
vanguardia acorde a las necesidades y retos de la sociedad que día con día son
cambiantes.

Cabe mencionar que la única limitante que existió fue que en determinado momento
desconocía ciertas temáticas, mismas que se resolvieron favorablemente mediante la
investigación del mismo y soporte del personal.

Es satisfactorio realizar un trabajo de esta índole, ya que dentro de este se ve reflejado

el tiempo y la dedicación empleados, que sin duda alguna dejará al Centro de Formación
Pedagógica e Innovación Educativa una serie de beneficios, tales como son:

• Atención oportuna, de manera eficaz y eficiente a todos los usuarios que harán
uso del sistema diseñado.
• A través del servicio de comercio electrónico, es posible obtener una analítica de
ventas, la cual tiene como propósito facilitar el monitoreo del rendimiento de las
acciones comerciales que se tienen en diferentes lapsos de tiempo y de esta
forma corroborar que los objetivos planteados se están cumpliendo.
• Promover el contenido en diferentes países, logrando un mayor alcance dentro
del mercado laboral.

69
Se recomienda en un futuro, poder alojar el sistema completo dentro de una nube, y así
evitar contratiempos y estar preparados para cambios inesperados, adicional a esto, se
garantiza una escalabilidad ante las cambiantes demandas, su correcta adaptación a las
nuevas necesidades y ser parte de la transformación digital.

7.1 Competencias aplicadas

Las competencias desarrolladas a lo largo de este proyecto son:

• Capacidad de resolución de problemas.

• Capacidad de organización del trabajo.
• Responsabilidad en el trabajo.
• Autonomía.
• Relación interpersonal.
• Capacidad de iniciativa.

70
Fuentes de información
I. Camacho Castillo, S. P. (2015, junio). Desarrollo de una plataforma web para el
sistema de gestión de la información de proyectos de fiscalización realizados por
la empresaTECNIE. Biblioteca Digital EPN.
https://bibdigital.epn.edu.ec/bitstream/15000/10786/1/CD-
6318.pdfColaboradores Milenium. (s. f.). ¿Qué es el Diseño Web Responsivo?
II. Milenium. Recuperado 24 de noviembre de 2020, de
https://www.informaticamilenium.com.mx/es/temas/que-es-diseno-web-
responsivo.html
III. Conejo, G. C. (2020, 13 octubre). ¿Qué es un sitio web? Blog.
https://mx.godaddy.com/blog/que-es-un-sitio-web
IV. D. (2019, 17 enero). Partes de una dirección web. PartesDe.
https://partesde.info/direccion-
web/#Cuales_son_las_partes_de_una_URL_o_direccion_web
V. Forbes Staff. (2014, 19 agosto). 7 beneficios del e-commerce en las empresas •.
Forbes México. https://www.forbes.com.mx/7-ventajas-que-tu-empresa-debe-
saber-sobre-el-e-commerce/
VI. Innovamedia. (2018, 16 marzo). ¿Qué es un gestor de contenidos o CMS?
https://www.innovamediaconsultores.com/blog/gestor-contenido-cms/IONOS.
(2020, 15 abril). Web services: servicios de máquina a máquina.
VII. IONOS Digitalguide. https://www.ionos.mx/digitalguide/paginas-web/desarrollo-
web/web-services/
VIII. Microsoft. (s. f.). ¿Qué es PaaS? Plataforma como servicio. Microsoft Azure.
Recuperado 25 de noviembre de 2020, de https://azure.microsoft.com/es-
mx/overview/what-is-paas/
IX. Mora, L. (2016, 12 abril). Plataformas eCommerce OpenSource: ¿cuál es la mejor
para mi negocio? Ve. https://www.ve.com/es/blog/plataformas-ecommerce-
opensource-cual-es-mejor-negocio
X. OBS Business School. (2016, 24 mayo). Principales ventajas y limitaciones de las
metodologías ágiles. OBS Business. https://obsbusiness.school/es/blog-project-

71
 management/metodologia-agile/principales-ventajas-y-limitaciones-de-las-
metodologias-agiles
XI. Oracle. (s. f.). ¿Qué es Software as a Service (SaaS)? Recuperado 25 de
noviembre de 2020, de https://www.oracle.com/mx/applications/what-is-saas/
XII. Red Hat. (s. f.-a). ¿Qué es IaaS? RedHat. Recuperado 25 de noviembre de 2020,
de https://www.redhat.com/es/topics/cloud-computing/what-is-iaas
XIII. Red Hat. (s. f.-b). ¿Qué son los servicios de nube? Redhat. Recuperado 25 de
noviembre de 2020, de https://www.redhat.com/es/topics/cloud-computing/what-
are-cloud-services
XIV. Redacción Conceptodefinicion.de. (2019, 26 julio). Host. Concepto de - Definición
de. https://conceptodefinicion.de/host/
XV. Rouse, M. (2017, 27 febrero). Host (in computing). SearchNetworking.
https://searchnetworking.techtarget.com/definition/host
XVI. Rouse, M. (2020, 22 julio). web server. WhatIs.com.
https://whatis.techtarget.com/definition/Web-server
XVII. Rungta, K. (2020, 8 octubre). Agile Methodology: What is Agile Software
Development Model? Guru. https://www.guru99.com/agile-scrum-extreme-
testing.html
XVIII. Schiaffarino, A. (2019, 7 agosto). Modelo cliente servidor. Infranetworking.
https://blog.infranetworking.com/modelo-cliente-servidor/#Componentes
XIX. Shopify. (2018). Shopify Encyclopedia.
https://www.shopify.com/encyclopedia/what-is-ecommerce
XX. The Editors of Encyclopaedia Britannica. (2020, 11 febrero). Software | Definition,
Types, & Facts. Encyclopedia Britannica.
https://www.britannica.com/technology/software
XXI. Tooit - Digital Awarness. (2020, 28 agosto). Tooit - ¿QUÉ ES UN SUBDOMINIO
DE INTERNET? Tooit. https://www.tooit.com/es/que-es-un-subdominio-de-
internet/
XXII. Zamora Lucio, M. A. (2014, enero). Internet [Diapositivas]. UAEH.
https://www.uaeh.edu.mx/docencia/P_Presentaciones/prepa3/Presentaciones_E
nero_Junio_2014/Definicion%20de%20Internet.pdf

72