Diseño, desarrollo e implementación de un portal web corporativo para
Clacomputerservice: empresa optimizada diseñada para la inclusión laboral de personas
con discapacidad motora
Carlos Libardo Álvarez Cruz
ID: 313156
Universidad Cooperativa de Colombia
Facultad de Ingeniería
Programa Ingeniería de Sistemas
Bogotá D.C.
2016
2 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Diseño, desarrollo e implementación de un portal web corporativo para
Clacomputerservice: empresa optimizada diseñada para la inclusión laboral de personas
con discapacidad motora
Carlos Libardo Álvarez Cruz
ID: 313156
Director
Juan Carlos Muñoz Vera
Magister en dirección estratégica e ingeniería de software
Universidad Cooperativa de Colombia
Facultad de Ingeniería
Programa Ingeniería de Sistemas
Bogotá D.C.
2016
3 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Nota de aceptación
______________________________________
______________________________________
______________________________________
______________________________________
______________________________________
______________________________________
______________________________________
___________________________
Primer jurado
___________________________
Segundo jurado
Bogotá…………
4 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Dedico este esfuerzo
a Dios
por su infinita bondad y ayuda,
y
a mi familia,
por su constante apoyo.
5 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Agradecimientos
El autor ofrece sus agradecimientos a:
El Programa de Ingeniería de Sistemas, de la Universidad Cooperativa de Colombia sede
Bogotá, por el saber adquirido, y por la oportunidad de alcanzar un excelente nivel de
profesionalización.
Leonardo (M. Sc) Molina Romero, Ingeniero de Sistemas y Jefe del Programa de Ingeniería y
Tecnologías en Sistemas, Programa de Ingeniería de Sistemas, de la Universidad Cooperativa de
Colombia sede Bogotá por su colaboración para la terminación de este Trabajo de Grado.
José Manuel Torres Hernández, Ingeniero de Sistemas y Coordinador del Área Aplicada en el
Programa de Ingeniería de Sistemas de la Universidad Cooperativa de Colombia sede Bogotá,
por su desinteresado espíritu solidario.
Juan Carlos Muñoz Vera, Magister en dirección estratégica e ingeniería de software y Director
del presente Trabajo de grado por sus oportunas orientaciones metodológicas.
Leydi Támara, docente y Coordinadora del CIPIS en el Programa de Ingeniería de Sistemas de la
Universidad Cooperativa de Colombia sede Bogotá, por su apoyo y solidaridad para el autor de
este Trabajo de Grado.
José Manuel Torres Hernández, Magíster en Informática y Fernando Sotero, Magíster en _____,
Jurados en la sustentación del presente Trabajo de Grado, por su madurez profesional.
Fernando Rojas Rojas, Magíster en Educación y Coordinador de Ingeniería de Sistemas de la
Universidad Cooperativa de Colombia, sede Neiva por su colaboración y oportunos consejos en
materia administrativa.
6 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Tabla de contenido
Introducción ................................................................................................................................................................. 12
Problema ...................................................................................................................................................................... 13
Objetivos...................................................................................................................................................................... 14
Objetivo General ...................................................................................................................................................... 14
Objetivos Específicos .............................................................................................................................................. 14
Marco Referencial ....................................................................................................................................................... 15
Accesibilidad ........................................................................................................................................................... 16
Alcances ...................................................................................................................................................................... 18
Limitaciones ................................................................................................................................................................ 19
Justificación ................................................................................................................................................................. 20
Antecedentes ................................................................................................................................................................ 22
Metodología ................................................................................................................................................................. 24
Ciclo de Vida de un Sistema basado en Prototipo ................................................................................................... 26
Determinación de los Requerimientos de Información ............................................................................................ 27
Desarrollo ingenieril .................................................................................................................................................... 29
Diseño Arquitectónico ............................................................................................................................................. 29
Diseño de Navegación ............................................................................................................................................. 29
Diseño de la Interfaz ................................................................................................................................................ 29
Generalidades .......................................................................................................................................................... 30
Wordpress. ......................................................................................................................................................... 31
Orangehrm. ........................................................................................................................................................ 32
Abantecart. ......................................................................................................................................................... 34
Instabill. .............................................................................................................................................................. 36
Mapa de navegación. ......................................................................................................................................... 38
Análisis de requisitos. .............................................................................................................................................. 40
Definiciones, acrónimos y abreviaturas. ......................................................................................................... 40
Descripción general. .......................................................................................................................................... 42
Requisitos específicos......................................................................................................................................... 44
Requisitos Funcionales. ..................................................................................................................................... 49
Requisitos no funcionales. ................................................................................................................................. 52
Diagrama Casos de Uso ..................................................................................................................................... 53
Diseño de la Base de Datos ..................................................................................................................................... 55
7 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Descripción detallada de las tablas. .................................................................................................................. 58
Diagrama Entidad Relación. ............................................................................................................................. 64
Diseño de interfaces ................................................................................................................................................. 65
Teoría del color. ................................................................................................................................................. 69
Cronograma ................................................................................................................................................................. 70
Conclusiones ................................................................................................................................................................ 71
Referencias .................................................................................................................................................................. 72
8 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Lista de tablas
Tabla 1 Comparativo de productos OrangeHRM .......................................................................... 33
Tabla 2 Características de los usuarios .......................................................................................... 43
Tabla 3 Requisitos específicos ....................................................................................................... 44
Tabla 4 Requerimiento 2 ................................................................................................................ 44
Tabla 5 Requerimiento 3 ................................................................................................................ 44
Tabla 6 Requerimiento 4 ................................................................................................................ 45
Tabla 7 Requerimiento 5 ................................................................................................................ 45
Tabla 8 Requerimiento 6 ................................................................................................................ 45
Tabla 9 Requerimiento 7 ................................................................................................................ 45
Tabla 10 Requerimiento 8 .............................................................................................................. 46
Tabla 11 Descripción de las tablas de WORDPRESS ................................................................... 56
Tabla 12 wp_comments ................................................................................................................. 58
Tabla 13 wp_links .......................................................................................................................... 59
Tabla 14 wp_options ..................................................................................................................... 59
Tabla 15 wp_postmeta ................................................................................................................... 60
Tabla 16 wp_posts ......................................................................................................................... 60
Tabla 17 wp_terms ......................................................................................................................... 61
Tabla 18 wp_term_relationships .................................................................................................... 61
Tabla 19 wp_term_taxonomy ........................................................................................................ 62
Tabla 20 wp_usermeta ................................................................................................................... 63
Tabla 21 wp_users ......................................................................................................................... 63
Tabla 22 Cronograma .................................................................................................................... 70
9 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Lista de figuras
Figura 1 Etapas para elaboración de prototipo .............................................................................. 26
Figura 2 . Ciclo de Vida del prototipo ........................................................................................... 27
Figura 3 Topologías de estructuras de navegación ........................................................................ 30
Figura 4 OrangeHRM dentro del sitio http://clacomputerservice.co/ ............................................ 33
Figura 5 AbanteCart dentro del sitio http://clacomputerservice.co/ .............................................. 36
Figura 6 Versiones Instabill ........................................................................................................... 37
Figura 7 Modulo Administración................................................................................................... 38
Figura 8 Mapa de navegación de la Página WEB .......................................................................... 39
Figura 9 Diagrama Caso de uso 1Ingreso al portal ........................................................................ 54
Figura 10 Diagrama de caso de uso 2. Administrador ................................................................... 54
Figura 11 Caso de uso 3 Usuario registrado .................................................................................. 55
Figura 12 Tablas WordPress .......................................................................................................... 56
Figura 13 Diagrama Entidad Relación ........................................................................................... 65
Figura 14 Menú Estático ................................................................................................................ 66
Figura 15 Nosotros ......................................................................................................................... 67
Figura 16 Principios Corporativos (Misión – Visión – Valores) ................................................... 67
Figura 17 Servicios (Telecomunicaciones – Desarrollo e Implementación – ............................... 68
Figura 18 Contacto ......................................................................................................................... 68
Figura 19 Secuencia temporal ........................................................................................................ 70
10 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Resumen
El propósito fundamental en la realización del presente Trabajo de Grado consistió en diseñar,
desarrollar e implementar un portal WEB corporativo enfocado en personas con discapacidad
física motora para mejorar sus oportunidades laborales tomando en consideración diversos
campos de acción como mantenimiento, ventas, asesorías virtuales y diseño. Para lograr el
cumplimiento de este propósito se utilizó el modelo de prototipos, porque permite que todo el
sistema se construya rápidamente para comprender con facilidad y aclarar ciertos aspectos en los
que se aseguren que el desarrollador, y el cliente estén de acuerdo en lo que se necesita y en la
solución que se propone para dicha necesidad, minimizando el riesgo y la incertidumbre en el
desarrollo, encargándose en el desarrollo de diseños para que estos sean analizados adhiriéndose
a nuevas especificaciones, es decir para medir el alcance del producto.
Palabras claves: diseño, desarrollo, implementación, portal WEB, solución informática.
11 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Abstract
The fundamental purpose in conducting this work Grado was to design, develop and
implement a corporate web portal focused on people with motor physical disabilities to improve
their employment opportunities taking into consideration various fields of action as maintenance,
sales, virtual consulting and design. the model prototype was used, because it allows the whole
system quickly built to easily understand and clarify certain aspects that ensure that the
developer, the client agree on what to achieve compliance with this purpose is required and the
proposed solution to this need, minimizing the risk and uncertainty in the development, handling
in the development of designs to be analyzed adhering to these new specifications, i.e. to
measure the extent of the product.
Keywords: design, development, implementation, web portal, software solution.
12 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Introducción
En aras de implementar la sensibilización sobre el empleo laboral apoyado para la población
en situación de discapacidad en Colombia, este proyecto es desarrollado con el propósito de dar a
conocer a las empresas, población en general y a la población en situación de discapacidad la
información que se ha venido desarrollando en el campo laboral.
La inclusión laboral de personas con discapacidad da la posibilidad de mejorar su calidad de
vida, desarrollarse y realizarse profesionalmente, lo cual impactaría positivamente el
funcionamiento de los equipos de trabajo en las empresas. La presencia de ellos une, integra e
atribuye a desafíos colectivos de productividad, debido a la gran responsabilidad y perseverancia
que ellos manifiestan.
Adicionalmente para que participen en encuentros con empresarios y con resultados positivos
en favor de la población discapacidad. Como complemento a la política hemos elaborado página
web para fortalecer el componente laboral.
Con la implementación del Portal Web Corporativo para Clacomputerservice, sería la acción
estratégica de inclusión laboral en donde la oferta y la demanda se ponen en contacto para llevar
a cabo la vinculación de personas en situación de discapacidad, mediante procesos donde las
entidades que participan conforman un equipo técnico de rehabilitadores ocupacionales en sus
respectiva localidades y círculos de emprendimiento.
Y así permitir incorporar personas en situación de discapacidad al mercado de trabajo y el
desarrollo de unidades productivas, como estrategia de generación de ingresos para este grupo de
la población, el diseño Web le permitirá que estas personas puedan percibir, entender, navegar e
interactuar con la Web, aportando a su vez contenidos y también beneficiando a otras personas
con otras discapacidades.
13 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Problema
¿El diseño, desarrollo e implementación de un portal WEB corporativo enfocado en personas
con discapacidad física motora mejoraría las oportunidades laborales para esta población?
14 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Objetivos
Objetivo General
Diseñar, desarrollar e implementar un portal WEB corporativo enfocado en personas con
discapacidad física motora para mejorar sus oportunidades laborales tomando en consideración
diversos campos de acción como mantenimiento, ventas, asesorías virtuales y diseño.
Objetivos Específicos
Aplicar técnicas novedosas que permitan interacción, con el propósito de consolidarlas en el
mercado económico virtual.
Crear en el ámbito social, un modelo de trabajo encaminado a la inclusión de personas mal
llamadas discapacitadas.
Fomentar el Comercio Electrónico.
15 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Marco Referencial
La definición de una persona con discapacidad
“Toda aquella que, como consecuencia de una o más deficiencias físicas, psíquicas o sensoriales,
congénitas o adquiridas, previsiblemente de carácter permanente y con independencia de la causa que
las hubiera originado, vea obstaculizada, en a lo menos un tercio, su capacidad educativa, laboral o de
integración social” (Congreso, 1994, p. 2).
De las discapacidades motoras existen otros tipos de discapacidades existentes las cuales
pueden dificultar el uso de los equipos computacionales, son:
Discapacidades visuales: Desde poca visión hasta la ceguera, el rango de limitaciones
visuales es amplio, sus síntomas de visión reducida son visión borrosa, visión desenfocada,
problemas para ver de lejos o de cerca, daltonismo y visión túnel entre otros.
Discapacidades de movimiento: Las discapacidades de movimiento son: la artritis, problemas
cardíacos, parálisis cerebral, la enfermedad de Parkinson, esclerosis múltiple y la pérdida de las
extremidades o los dedos, entre otros.
Discapacidades auditivas: Son personas que tienen con dificultades auditivas, que quizás
puedan oír algunos sonidos, pero es posible que no puedan distinguir las palabras. Otras quizás
no puedan oír ningún sonido.
Discapacidades cognitivas y de lenguaje: Es aquella discapacidad que abarca tanto la dislexia
como dificultades para recordar, resolver problemas o percibir información sensorial o incluso
problemas para comprender y utilizar el lenguaje.
Epilepsia: Ciertos patrones de luz o sonido pueden provocar ataques epilépticos en algunas
personas susceptibles de padecerlos.
16 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Accesibilidad
El concepto de accesibilidad es importante para el trabajo de integración de discapacitados al
mundo de Internet, incrementando la utilidad y el atractivo de los sitios Web que forman parte de
la red global. Podemos decir que la accesibilidad consiste en el “acceso a la información sin
limitación alguna por razón de deficiencia, discapacidad o minusvalía” (TAW, Web), de modo
que la accesibilidad no es de interés únicamente para las personas con discapacidad sino para que
todas las personas tengan acceso a la Web en general.
Hoy en día la accesibilidad se ha introducido fuertemente en el uso de Internet. En relación
con ello, el World Wide Web Consortium ha publicado el Web Content Accesibility Guidelines,
se toma como un marco de referencia para la adopción de medidas en el Gobierno de los Estados
Unidos de Norte América, la Comunidad Europea e instituciones de y para ciegos -como ONCE
(Organización nacional de ciegos de España)-, entre otras innumerables organizaciones que han
velado por la universalidad del uso de la informática.
Otro aspecto importante a considerar en materia de accesibilidad son las ayudas técnicas,
estos son elementos como software o hardware, que permiten facilitar el uso de alguna
herramienta informática, en nuestro contexto son los elementos que facilitan la interacción entre
las personas con discapacidad y el computador; en este caso la creación del portal web que es
una ayuda técnica que permite a los discapacitados interactuar con un computador.
Entre los principales beneficios que acarrea la accesibilidad en Internet están:
1. Facilitar el acceso a los sitios Web. De esta forma, los discapacitados podrán ingresar a una gran
fuente de información y beneficios, que permitirá mejorar notablemente su calidad de vida y
además apoyando la integración de distintos grupos de discapacitados.
2. Potencia el teletrabajo. Internet se constituye en una herramienta que permitirá a los
discapacitados introdujesen desde sus hogares al mundo laboral.
3. Materializa la responsabilidad social del Gobierno con los grupos discapacitados del país en su
totalidad.
17 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
4. Permitirá un rápido acceso a usuarios con una conexión, deberá ser alternativamente
representada por descripciones decidoras permitiendo la inhibición de imágenes, sonidos y otros
medios por parte de estos usuarios.
18 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Alcances
El Portal Web contará con una arquitectura encaminada a cubrir las personas con
discapacidad física motora: módulos que permitan el buen y correcto funcionamiento de la
empresa diseñados para todos los servicios ofertados: venta y mantenimiento de computadores,
diseño de páginas WEB, redes, y todo lo relacionado con sistemas; además los procesos de
carácter administrativo, como gestión, control y evaluación.
Como novedad se utilizarán códigos que sustituirán el texto como solución a la falta de
motricidad y agilidad para escribir. Y en este sentido es preciso señalar un detalle más que
importante, deprimente pero que permite entender la razón para diseñar, desarrollar e
implementar este Portal WEB: cuando una persona tiene más del 55% de discapacidad, las
dificultades para acceder a empleo aumentan.
La herramienta a utilizar es básicamente como plataforma semántica de publicación personal,
Word Press; PHP, lenguaje de programación que exige una mínima configuración; y el sistema
de gestión de base de datos, MySQL.
19 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Limitaciones
Falta de apoyo de entidades por la condición de discapacidad, donde no existen políticas
claras ni incentivo alguno, ni mucho menos programas reales aplicables a dicha población.
Barreras generadas por la Universidad, que no posee una política educativa que permita
cubrir las necesidades financieras ni las líneas de crédito para personas discapacitadas.
20 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Justificación
El principal motivo para emprender este proyecto es la realización profesional, cubriendo
todas las expectativas comerciales. Socialmente se pretende cambiar la visión de condiciones
como la discapacidad, utilizándose desde la experiencia propia como una herramienta para el
mejoramiento de la calidad de vida actual.
No existe en la Universidad mecanismos y herramientas que permitan a la población en
condición de discapacidad física motora la libre elección de la modalidad de grado limitando al
estudiante solamente a la presentación de la monografía como única forma para la obtención del
grado.
La discapacidad implica muchos costos e inconvenientes, los cuales serían minimizados por
las nuevas técnicas de trabajo que se implementarán mediante este proyecto, con el Portal Web.
Esto en base a la ley 391 de 1997, artículos 24 y 25, donde se expresa en el 24 que (Congreso,
1997, p. 5):
Artículo 24º.- Los particulares empleadores que vinculen laboralmente personas con limitación
tendrán las siguientes garantías (el subrayado es del autor):
A que sean preferidos en igualdad de condiciones en los procesos de licitación, adjudicación y
celebración de contratos, sean estos públicos o privados si estos tienen en sus nóminas por lo
menos un mínimo del 10% de sus empleados en las condiciones de discapacidad enunciadas en la
presente ley debidamente certificadas por la oficina de trabajo de la respectiva zona y contratados
por lo menos con anterioridad de un año; igualmente deberán mantenerse por un lapso igual al de
la contratación;
Prelación en el otorgamiento de créditos subvenciones de organismos estatales, siempre y cuando
estos se orienten al desarrollo de planes y programas que impliquen la participación activa y
permanente de personas con limitación;
El Gobierno fijará las tasas arancelarias a la importación de maquinaria y equipo especialmente
adoptados o destinados al manejo de personas con limitación. El Gobierno clasificará y definirá el
tipo de equipos que se consideran cubiertos por el beneficiario.
21 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
NOTA: El texto subrayado fue declarado EXEQUIBLE CONDICIONADO por la Corte
Constitucional mediante Sentencia C-458 de 2015, en el entendido de que deberán reemplazarse
por las expresiones “persona o personas en situación de discapacidad.
Y en el 25: “Artículo 25º.- El Gobierno a través del Comité Consultivo a que se refiere el
artículo 6, podrá solicitar estadísticas detalladas y actualizadas sobre los beneficios y
resultados de los programas para las personas con limitación (subrayado del autor)” (Congreso,
1997, p. 5).
22 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Antecedentes
En la perspectiva de este proyecto, y partiendo de una situación insoslayable como es que los
sistemas computacionales se constituyen en barreras para las personas con necesidades
especiales, un interesante artículo escrito en Costa Rica, menciona que para superar estas
dificultades se han creado varias adaptaciones que ayudan a estas personas. Pero se trata de
adaptaciones costosas, lo que termina dificultando el acceso a esta población. Con el propósito
de superar este problema, se aportan algunas recomendaciones y observaciones para que
diseñadores de sistemas y programadores tengan en cuenta en el diseño de interfaces con
accesibilidad total. En este sentido, se habla de cuatro tipos de accesibilidad: física, al software, a
la documentación, y a Internet (Solera, s.f., pp. 65-66).
Vale la pena mencionar una de las conclusiones del mencionado artículo, que toca
sensiblemente las razones que subyacen a la elaboración del presente Trabajo de Grado:
Un aspecto importante que debe mencionarse es que las escuelas de computación, tienen
la obligación de crear más conciencia entre sus alumnos sobre las necesidades de las
personas especiales y de las diferentes formas de crear interfaces que permitan una
accesibilidad total (el subrayado es del autor) (Solera, s.f., p. 70).
El Ministerio de Educación de la Nación, en Argentina, publico un excelente material
informativo en el que se plantea no solo la necesidad sino la posibilidad – cuando hay voluntad
política - de crear una escuela secundaria oficial inclusiva y al mismo tiempo de calidad, en el
horizonte de alcanzar igualdad social y educativa para los jóvenes. Se trata del Programa
Conectar Igualdad, creado por decreto gubernamental (Zappalá, Koppel y Suchodolski, 2011, pp.
4-5).
Las razones son claras: “Para muchos estudiantes con discapacidad, la falta de un
mecanismo efectivo que les permita escribir, leer o comunicarse se convierte en una seria
barrera de acceso al conocimiento, a las posibilidades de autonomía y desarrollo personal.”
(Zappalá, Koppel y Suchodolski, 2011, p. 10).
23 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Una idea que se concreta en este escrito tiene que ver con la voluntad política de un país para
mejorar, desde la accesibilidad de personas con discapacidad motora a las nuevas tecnologías, la
calidad de vida de esta población.
Otro aspecto valioso para el presente Trabajo de Grado es que para hacer realidad esta
política inclusiva, se acercan las nuevas tecnologías a la persona con discapacidad motora, se
mejora su accesibilidad. Como en el trabajo anterior mencionado.
La Universidad del país vasco publicó en 2002 un interesante artículo en el que se evidencia
que la aparición de los primeros computadores personales, antes que oscurecer el panorama para
el acceso de personas con discapacidad motora, permitió ver el enorme potencial de las máquinas
para ayudar a esta población. Se habla de superar los procesos de adaptación o adecuación del
usuario al computador. Entonces se habla de una disciplina denominada Interacción Persona-
Ordenador, y desde esta perspectiva muchos diseñadores comenzaron a descubrir herramientas
para crear sistemas de interacción independientes de la aplicación y personalizables a bajo costo.
Por ejemplo, el desarrollo de interfaces más adecuadas a las necesidades de estos usuarios, de
más duración y más baratas.
Por ejemplo, y respecto de la accesibilidad a Internet: el diseñador de webs que permite
adecuar la presentación final a las características del usuario mediante el lenguaje de marcado,
BML y un navegador mixto audio táctil; la accesibilidad Web del W3C en entornos de desarrollo
de webs comerciales; y un sistema basado en la web, que ofrece la posibilidad de acceder a
varios servicios dinámicos y personalizados (Abasca, 2008, pp. 18, 20-21).
24 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Metodología
La estrategia para mejorar la accesibilidad de los sitios web es el diseño para todos con el fin
de que sea usado por un número de persona posible sin la necesidad de adaptación de diseño
especializado.
El producto web cumpla con ciertos criterios de accesibilidad y pueda beneficiar a todos los
usuarios, inclusive a los discapacitados o limitados por el contexto de uso.
El prototipo del modelo asume que todo el proceso del diseño debe estar conducido por el
usuario, sus necesidades, objetivos y características, satisfaciendo las necesidades de acceso y
uso de un mayor rango de usuarios no solo definiendo lo que se persigue, sino también de forma
de alcanzar el objetivo de la metodología.
El modelo de prototipos permite que todo el sistema, se construyan rápidamente para
comprender con facilidad y aclarar ciertos aspectos en los que se aseguren que el desarrollador,
el cliente estén de acuerdo en lo que se necesita y en la solución que se propone para dicha
necesidad, minimizando el riesgo y la incertidumbre en el desarrollo, encargándose en el
desarrollo de diseños para que estos sean analizados adhiriéndose a nuevas especificaciones, es
decir para medir el alcance del producto.
Este modelo principalmente aplica cuando un cliente define un conjunto de objetivos
generales para el software a desarrollarse sin delimitar detalladamente los requisitos de entrada
procesamiento y salida, en la adaptabilidad del sistema en que interactúa el hombre y la máquina.
Este modelo se encarga principalmente de ayudar al ingeniero de sistemas y al cliente a entender
de mejor manera cuál será el resultado del diseño cuando los requisitos estén satisfechos
(Lawrence, s.f.).
El paradigma de construcción de prototipos tiene tres pasos:
Escuchar al cliente.
25 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Recolección de requisitos. Donde se encuentran y definen los objetivos, se identifican los
requisitos y las áreas donde es necesario más definición.
Construir y revisar el prototipo.
El cliente prueba el prototipo y lo utiliza para depurarlos requisitos del software. Este modelo
es útil cuando:
El cliente no identifica los requerimientos detallados.
El responsable del desarrollo no está seguro de la eficacia del algoritmo, sistema
operativo o de la interface hombre-máquina.
El portal Web se desarrollará, por modelos de aplicaciones de software, que permiten ver la
funcionalidad básica de la misma, sin incluir necesariamente toda la lógica o características del
modelo terminado.
El prototipo permite al cliente evaluar en forma temprana el producto, e interactuar con los
diseñadores y desarrolladores para saber si se está cumpliendo con las expectativas y las
funcionalidades acordadas. Los Prototipos no poseen la funcionalidad total del sistema, pero sí
condensan la idea principal del mismo, paso a paso crece su funcionalidad, y maneja un alto
grado de participación del usuario.
Las etapas para la elaboración de los Prototipos son las siguientes:
En primer lugar, escuchar al cliente: recolección de requisitos; se encuentran y definen los
objetivos globales; y se identifican los requisitos conocidos y las áreas donde es obligatorio más
definición, como entrevistas, Skype, búsquedas en internet y bibliotecas.
En segundo lugar, construir y revisar la maqueta o prototipo. Se realizará en Wordpress, php,
y MySQL
Finalmente, el cliente prueba la maqueta o prototipo y lo utiliza para refinar los requisitos del
software. Se realizarán en el Portal corporativo vía web (Gestión, 2015, Web). En la siguiente
imagen se relacionan las etapas para la elaboración del modelo del prototipo, ya descritas:
26 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 1. Etapas para elaboración de prototipo Fuente: http://gestionrrhhusm.blogspot.com.co/2011/05/modelo-de-prototipo.html
Ciclo de Vida de un Sistema basado en Prototipo
Una maqueta o prototipo de pantallas muestra la interfaz de la aplicación, sólo muestra las
pantallas por las que irá pasando la futura aplicación.
Por su parte, el prototipo funcional evolutivo desarrolla un comportamiento que satisface los
requerimientos y necesidades. Se va modificando y desarrollando sobre la marcha, según las
apreciaciones del cliente, este proceso de desarrollo y disminuye la fiabilidad, puesto que el
software está constantemente variando, pero, genera un producto más seguro, en cuanto a la
satisfacción de las necesidades del cliente.
Para que la construcción de prototipos sea posible se debe contar con la participación activa
del cliente.
27 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 2 . Ciclo de Vida del prototipo Fuente: http://atryx.abcz.es/tipos-de-ciclos-de-vida/
Se puede concluir cuando el modelo es útil cuando el cliente conoce los objetivos para el
desarrollo del portal web, identificando los requerimientos detallados de entrada, procesamiento
o salida.
Determinación de los Requerimientos de Información
En esta etapa consiste lo que dice Kendall: “…. la determinación de los requerimientos de
información a partir de los usuarios particularmente involucrados…” (Kendall y Kendall, 2012,
p. 11). El primer paso de ejecución de esta fase es la identificación de los usuarios, porque a
partir de ellos se identifican las necesidades de información que se requiere. En este caso tiene
como objetivo lograr entre las necesidades del usuario y del ambiente en que opera el portal web
junto con su base de datos.
Es importante de identificar los tipos de visita que tendrá el portal web y quienes
manipularan el sistema web, radica en que las necesidades de información varían según el grupo
de usuarios, así mismo de que estos usuarios pueden presentar perfiles diferentes en cuanto
conocimiento y preferencias.
28 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
En esta etapa también se tiene una percepción del tipo de contenido informativo que
posiblemente se ofrezca al usuario final, además de otros servicios que pueden ser ofrecidos a
través de la web.
29 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Desarrollo ingenieril
En esta fase está enfocada al diseño web y la relacionada con el diseño del sistema web y la
base de datos.
La primera fase consiste en el diseño del contenido y producción, teniendo como objetivos el
diseñar, producir, y/o adquirir el contenido de texto, grafico que se vayan a integrar en el sitio
web.
La segunda fase está constituida por actividades orientadas al área de diseño como son:
Diseño Arquitectónico
Hace referencia a la estructura de la organización del portal web, como las diferentes páginas
del portal están relacionadas entre ellas. Para ello se requiere elegir de una serie de topologías
como las presentadas en la Figura 3, las más empleadas están: estructuras lineales. Estructuras
reticulares o matriciales, estructuras jerárquicas y estructuras en red o de malla. Las estructuras
se pueden combinar para formar estructuras compuestas o hibridas.
Diseño de Navegación
Este consiste en definir las rutas que permitan al usuario acceder a los contenidos y los
servicios web, “para que el diseñador pueda llevarlo a acabo, debe (1) identificar la semántica
de la navegación para diferentes usuarios del sitio: y (2) definir la mecánica (sintaxis) para
lograr la navegación” (Pressman, 2010, p. 530).
Para este diseño hay que hacer una evaluación de los componentes y temas que serán
abarcados y será de información del portal, y también establecer los instrumentos de ayuda a los
diferentes usuarios para facilitar la navegación.
Diseño de la Interfaz
En esta fase en donde se documenta como funcionara las características del portal web. Se
diseña como estarán estructuradas las páginas del sitio o pantallas del sistema web de acuerdo
30 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
con las necesidades de información, además, delinea los pasos que los usuarios necesitarán para
completar una actividad.
EL MODELO SECUENCIAL EL MODELO JERÁRQUICO
EL MODELO EN RED
Figura 3. Topologías de estructuras de navegación Fuente: http://desarrolladorweb.org/tipos-de-estructura-para-un-sitio-web/
En la última fase están las actividades del diseño del sistema del proyecto, donde se usará la
información recolectada en las etapas anteriores para la elaboración del sistema web. Para las
actividades de diseño de entradas y salidas estarán sujetas al diseño de la interfaz ya que las
paginas o pantallas que integran el portal deben tener coherencia y uniformidad. En esta misma
línea se trabaja con lo relacionado con el diseño de la base de datos y de las tablas que
conforman, mediante el diseño físico respectivo se presentara un modelo de entidad-relación
como modelo lógico.
Generalidades
El portal WEB http://clacomputerservice.co/. cuenta con un diseño minimalista o plano, el
cual consiste en combinar los aspectos más importantes por tener en cuenta en una página o
31 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
aplicativo WEB: diseño y funcionalidad de una manera simple, sencilla y eficaz; usando
únicamente los elementos que se necesitan para que el usuario final pueda navegar el portal,
página o aplicativo web sin confundirse, en otras palabras, los elementos innecesarios son
eliminados en este tipo de diseño.
El portal WEB está desarrollado en WordPress y se implementaron herramientas de gestión
como OrangeHRM, AbanteCart e InstaBill para tener un mejor control y centralizada la
información.
Wordpress.
Según Wikipedia (2016) define WordPress como un sistema de gestión de contenidos o CMS
(por sus siglas en inglés, Content Management System) enfocado a la creación de cualquier tipo
de sitio. Originalmente alcanzó una gran relevancia usado para la creación de blogs, para
convertirse con el tiempo en una de las principales herramientas para la creación de páginas web
comerciales. Ha sido desarrollado en el lenguaje PHP para entornos que ejecuten MySQL y
Apache, bajo licencia GPL y es software libre.
Las razones por las cuales se seleccionó a WordPress fueron:
Cientos de temas personalizables.
Posicionamiento a nivel mundial.
Está optimizado para móviles.
Soporte técnico 7*24.
Fácil de administrar.
Se puede integrar con redes sociales.
Tiene la funcionalidad de optimizar la búsqueda en motores de búsqueda.
32 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Orangehrm.
Es una herramienta de administración de recursos humanos que ofrece flexibilidad y libertad
para solventar las necesidades básicas para el manejo de recursos humanos. OrangeHRM posee
tres (3) productos para utilizar:
a) Open Source.
b) Professional.
c) Enterprise.
El producto implementado en la página WEB fue el OpenSource, aunque es el producto más
básico de OrangeHRM contiene lo que necesita CLACOMPUTERSERVICE como se evidencia
la tabla 1, esta es la versión gratuita del software que provee una serie de módulos intuitivos y
fáciles de manejar. Esta versión maneja la licencia abierta GNU GPL. Según Top Open Source
Licenses - Black Duck Software (2016) afirma que esta licencia es la más usada en el mundo del
software y garantiza a los usuarios finales (personas, organizaciones, compañías) la libertad de
usar, estudiar, compartir (copiar) y modificar el software. Los módulos implementados son:
a) Administración del sistema.
b) Gestión de información del personal.
c) Gestión de Control de asistencia.
d) Reclutamiento.
e) Desempeño.
f) Pizarras de pendientes.
La instalación y configuración de esta herramienta en la página WEB se realizó en el
servidor de aplicaciones y quedó listo para operarlo como se evidencia en la siguiente figura.
33 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 4. OrangeHRM dentro del sitio http://clacomputerservice.co/ Fuente: Propia.
Tabla 1 Comparativo de productos OrangeHRM
OPEN SOURCE PROFESSIONAL ENTERPRISE
Son las soluciones
perfectas para las
organizaciones hasta 20
empleados. Un sistema de
recursos humanos que
ofrece una gran cantidad
de módulos para
adaptarse a sus
Destinado a las
organizaciones con mayores
exigencias de recursos
humanos y prácticas de
recursos humanos más
complejas. Esta aplicación
es perfecta para cualquier
organización con una o
Si su organización está
operando a través de las
fronteras internacionales.
34 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
necesidades de negocio. varias ubicaciones en el
mismo país.
Funcionalidades:
Código abierto.
Alojamiento
Gratuito.
Libre para uso
comercial.
Posee apoyo de la
comunidad.
No hay limitaciones
de aplicaciones.
Funcionalidades:
Módulos avanzados.
Administración de
funciones de
usuario.
Ayuda para la
ejecución.
Servicios
gestionados.
Opciones de la
nube.
Orange APP
Funcionalidades:
Flujos de trabajo
configurables.
Configuración Multi
-país.
Informes regionales.
Soporte prioritario.
Fuente: OrangeHRM (https://www.orangehrm.com/Solutions)
Abantecart.
Es una plataforma que da solución a las necesidades de comercio electrónico (e-comerce)
basado en PHP, su finalidad es proporcionar la capacidad para crear negocios en línea y vender
productos de manera rápida y eficiente. Sus principales características son la escalabilidad y la
flexibilidad.
Las razones que llevaron a la implementación de esta herramienta fueron:
35 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Porque es fácil de aprender y simple de usar, no se requiere entrenamiento o
conocimiento especial, ya que su interfaz intuitiva hace que su uso sea cosa fácil.
Es responsive design, es decir la plataforma se encuentra optimizada para visualizarla en
móviles y tabletas, así como varios tamaños de pantalla.
Es rápido y seguro, la plataforma tiene alto desempeño, consume muy pocos recursos del
sistema, además está desarrollado utilizando buenas prácticas de desarrollo y se encuentra
en línea con PCI Compilance.
Cuenta con un apoyo sobresaliente, pues la ayuda está disponible 24/7. Además, la
comunidad del foro AbanteCart es libre y se encuentra disponible para todos.
Como AbanteCart es libre, no hay puesta en marcha, la concesión de licencias,
suscripción o tarifas de transacción, así como ninguna pena probarlo.
aplicación de código abierto con el alto nivel de los estándares de calidad y una gran
atención a los detalles. Usted tiene acceso a su propia limpio y fácil de administrar el
código con la comunidad para apoyarla. Licencia abierta GNU GPL.
La instalación y configuración de esta herramienta en la página WEB se realizó en el
servidor de aplicaciones y quedó listo para operarlo como se evidencia en la Figura 5.
36 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 5. AbanteCart dentro del sitio http://clacomputerservice.co/ Fuente: Propia
Instabill.
InstaBill es un grupo especializado en mercadeo, contabilidad, finanzas, política tributaria,
ingeniería y diseño gráfico, este brinda servicios de apoyo a las empresas en cuanto a metas de
rentabilidad y crecimiento se refiere ya que con los aplicativos y funciones que ofrecen mejoran
el desempeño de quienes los utilicen. Su personal cuenta con más de 15 años de experiencia en el
desarrollo de software. Portales web, y estrategias de mercadeo y ventas.
Las razones por las que se escogió a InstaBill como componente de facturación fueron las
siguientes:
Tiene compatibilidad con dispositivos móviles.
Permite personalizar las facturas con el logo de la empresa.
Se pueden crear informes y cotizaciones de manera fácil.
Las actualizaciones son constantes y automáticas, no se necesita tener conocimientos o
realizar procedimientos para ello.
37 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Se encuentra disponible en más de 25 países.
Cumple con todos los requisitos exigidos por la DIAN
Instabill tiene varias versiones, se decidió emplear la Platinum porque es la que se ajusta y
cumple con todas las necesidades y expectativas de CLACOMPUTERSERVICE (En la Figura 6
se puede observar las características de cada una de las versiones).
Figura 6. Versiones Instabill
Fuente: http://instabill.com.co/planes-precios.
La forma de incluir esta herramienta en la página WEB fue creando un vínculo a la página de
http://instabill.com.co/.
Las aplicaciones anteriormente mencionadas se encuentran en el módulo de administración
de http://clacomputerservice.co/. Como se evidencia en la figura 7.
38 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 7. Modulo Administración Fuente: Propia.
Mapa de navegación.
El mapa de navegación de la página web http://clacomputerservice.co/ se puede evidenciar
en la figura 8 del presente documento.
39 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 8. Mapa de navegación de la Página WEB
Fuente: Propia
40 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Análisis de requisitos.
La siguiente cita es pertinente en cuanto a este tema se refiere:
La ingeniería de requisitos del software es un proceso de descubrimiento, refinamiento, modelado y
especificación. Se refinan en detalle los requisitos del sistema y el papel asignado al software.
Tanto el desarrollador como el cliente tienen un papel activo en la ingeniería de requisitos – un
conjunto de actividades que son denominadas análisis – El cliente intenta replantear un sistema
confuso, a nivel de descripción de datos, funciones y comportamiento, en detalles concretos. El
desarrollador actúa como interrogador, como consultor, como persona que resuelve problemas y como
negociador.
El análisis y la especificación de requisitos pueden parecer una tarea relativamente sencilla, pero las
apariencias engañan. El contenido de comunicación es muy denso. Abundan las ocasiones para malas
interpretaciones o falta de información. Es muy probable que haya ambigüedad. El dilema al que se
enfrenta el ingeniero de software puede entenderse muy bien repitiendo la famosa frase de un cliente
anónimo: “Sé que cree que entendió lo que piensa que dije, pero no estoy seguro de que se dé cuenta
de que lo que escuchó no es lo que yo quise decir”.
El análisis de requisitos es una tarea de ingeniería del software que cubre el hueco entre la definición
del software a nivel sistema y el diseño de software. El análisis de requerimientos permite al ingeniero
de sistemas especificar las características operacionales del software (función, datos y rendimientos),
indica la interfaz del software con otros elementos del sistema y establece las restricciones que debe
cumplir el software. (Pressman, 2002).
Definiciones, acrónimos y abreviaturas.
Importantes las siguientes definiciones, acrónimos y abreviaturas:
CRUD: Acción de agregar, modificar, eliminar y consultar la información de
un objeto o persona en concreto.
Permiso: Parámetro que determina si el usuario que lo posee tiene acceso a
una determinada función o parte de la interfaz de usuario del sistema.
Rol: Es un conjunto de permisos que puede concederse a un usuario.
41 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Administrador del Sistema: Persona encargada de ofrecer el soporte técnico y
operativo a Clacomputerservice.
Pruebas: Proceso mediante el cual se realizan actividades para comprobar el
funcionamiento óptimo del portal.
Visitante: Persona que navega o utiliza el portal Clacomputerservice.
Usuario: Persona que puede ingresar a la zona privada de Clacomputerservice,
a través de un proceso de validación de credenciales utilizando nombre de
usuario y contraseña.
Dominio (DNS): Sistema de nomenclatura que permite establecer nombres de
equipo que se puedan recordar fácilmente en lugar de un conjunto de números
correspondientes a una dirección IP numérica, Ej. clacomputerservice.co.
Servidor WEB: Es un programa que implementa el protocolo HTTP
(hypertext transfer protocol), el cual ha sido diseñado para realizar las
transferencias de las páginas web o HTML (hypertext markup language), lo
cual se traduce en textos complejos con formularios, botones, imágenes,
animaciones, etc.
URL (Uniform Resource Locator): En español significa un localizador
uniforme de recurso. Es una secuencia de caracteres, que sigue un estándar y
permite denominar y ubicar recursos en internet para su localización.
HTTP (HyperText Transfer Protocol): Es el protocolo de transferencia de
hipertexto utilizado en cada intercambio de la Web.
Plataforma virtual: Es un sistema que permite la ejecución de diversas
aplicaciones bajo un mismo entorno, permitiendo que los usuarios accedan a
ellas mediante Internet.
Plugin: Es un complemento, el cual se puede descargar para añadir nuevas
funcionalidades a un programa u aplicativo informático. Por ejemplo, un
42 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
navegador web utiliza plugins (complementos) para reproducir vídeos de
YouTube u otras páginas web.
Cookie: Es un conjunto de caracteres que se almacenan en el disco duro o en
la memoria temporal del ordenador, cuando un usuario accede a ciertos sitios
web. Se utilizan generalmente para que el servidor accedido pueda conocer las
preferencias del usuario al conectarse de nuevo. Dado que pueden ser un
peligro para la privacidad de los usuarios, éstos deben ser notificados cuando
un sitio los utiliza y además que los navegadores permiten desactivarlas.
Descripción general.
Perspectiva del producto.
El Portal Web contara con una arquitectura encaminada a cubrir las personas con
discapacidad física motora; módulos que permitan el buen y correcto funcionamiento de la
empresa diseñados para todos los servicios prestados; además los procesos de carácter
administrativo.
Funcionalidad del producto.
Presentar los servicios ofertados por la empresa.
Brindar información de ubicación y contacto de la empresa.
Proveer apoyo virtual a los empleados para comunicarse con el cliente.
Integrar herramientas web para la gestión de empleados, productos, servicios
y facturación.
43 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Características de los usuarios.
Tabla 2 Características de los usuarios
Tipo de usuario Usuario final
Formación Media, Básica, Universitaria
Habilidades Manejo básico de computador y herramientas de
internet en caso de prestar servicios técnicos o
administrativos.
Actividades Desarrolladores web, aplicaciones, diseñadores y
técnicos.
Fuente: Propia.
Restricciones.
Falta de apoyo de entidades por la condición de discapacidad, donde no
existen políticas claras ni incentivo, ni mucho menos programas reales
aplicables a dicha población.
Barreras generadas por la Universidad, la cual no posee una política educativa
que permita cubrir las necesidades financieras ni las líneas de crédito para
personas discapacitadas.
Suposiciones y dependencias.
Aquellos factores que si se modifican podrían afectar el funcionamiento y los requisitos del
presente proyecto son:
Complementos y actualizaciones de los navegadores web.
Versión de los complementos del sistema.
Compatibilidad con las herramientas utilizadas para el desarrollo del portal.
Cabe aclarar que el diseñador y desarrollador del portal web clacomputerservice.co, en este
caso es la misma persona, no se hace responsable por la desactualización o falta de los
complementos necesarios para visualizar la página por parte de los usuarios.
44 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Evolución previsible del sistema.
Las posibles futuras mejoras al sistema se realizarán por parte del administrador del mismo,
las cuales pueden ser:
Cambio de diseño y apariencia del portal.
Actualización de las herramientas utilizadas para la gestión de personal.
Modificación del portal de ventas, pensando en la simplificación del mismo.
Renovación del área de miembros y de sus funcionalidades.
Requisitos específicos.
Tabla 3 Requisitos 1
Número de requisito RF 1
Nombre de requisito Inicio del portal web.
Tipo Restricción
Fuente del requisito Conexión a Internet/Red.
Prioridad del requisito Alta/Esencial
Fuente: Propia.
Tabla 4 Requerimiento 2
Número de requisito RF 2
Nombre de requisito Ingreso o anulación de roles.
Tipo Requisito
Fuente del requisito Formulario ingreso de datos.
Prioridad del requisito Alta/Esencial
Fuente: Propia
Tabla 5 Requerimiento 3
Número de requisito RF 3
Nombre de requisito Creación de usuarios.
Tipo Requisito
Fuente del requisito Formulario ingreso de datos.
45 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Prioridad del requisito Alta/Esencial
Fuente: Propia
Tabla 6 Requerimiento 4
Número de requisito RF 4
Nombre de requisito Actualización de contraseñas.
Tipo Requisito
Fuente del requisito Formulario ingreso de datos.
Prioridad del requisito Alta/Esencial
Fuente: Propia
Tabla 7 Requerimiento 5
Número de requisito RF 5
Nombre de requisito Habilitar o deshabilitar usuarios.
Tipo Requisito
Fuente del requisito Formulario ingreso de datos.
Prioridad del requisito Alta/Esencial
Fuente: Propia
Tabla 8 Requerimiento 6
Número de requisito RF 6
Nombre de requisito Integración de herramientas administrativas.
Tipo Requisito
Fuente del requisito Plataforma WEB.
Prioridad del requisito Alta/Esencial
Fuente: Propia
Tabla 9 Requerimiento 7
Número de requisito RF 7
Nombre de requisito Vínculos de navegación.
Tipo Requisito
Fuente del requisito Portal WEB.
Prioridad del requisito Alta/Esencial
Fuente: Propia.
46 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Tabla 10 Requerimiento 8
Número de requisito RF 8
Nombre de requisito Ayudas textuales.
Tipo Requisito
Fuente del requisito Diagrama de navegación.
Prioridad del requisito Alta/Esencial
Fuente: Propia
Requisitos comunes de las interfaces.
Todas las pantallas del portal web deben ser realizadas con los parámetros del diseño
minimalista, pues en este diseño el contenido es el principal protagonista pues estructura y da
forma a toda la página y, de acuerdo a nuestro objetivo principal el cual es emplear personas con
discapacidades físicas motoras, utilizamos este diseño por la facilidad que le brinda al usuario
final de desplazarse por la página y conocer todo su contenido de una manera sencilla sin
necesidad de realizar tantos clicks, mover el cursor de un lado hacia el otro, o buscar en muchos
menús desplegables la sección que necesita visualizar.
De acuerdo a lo anteriormente mencionado las características que cumple el portal web son:
Reduce los elementos visuales y funcionales para proporcionar una fácil
usabilidad, pero sin llegar a quitar los elementos visuales y funcionales
realmente necesarios.
Organiza dichos elementos para que la navegación sea sencilla y deje una
experiencia agradable.
El tiempo que el usuario invierte en llegar a lo que busca es el necesario
gracias a la organización y disposición de los elementos requeridos.
Relaciona conceptos con imágenes para que el usuario final se haga una idea
más clara y precisa de lo que está viendo o desea buscar.
47 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Interfaces de usuario.
Página principal: La página principal se encuentra en la primera sección y esta
contiene nuestra frase emblema “Nos adaptamos a sus necesidades”, un menú que
contiene todas las secciones de la página: Inicio, Nosotros, Principios corporativos,
Servicios, Contacto y Administración (Para acceder a esta, es necesario ingresar con
nuestra cuenta de usuario). Al hacer click en cualquier ítem del menú la página hará
auto-scroll hasta la sección correspondiente, excepto si se hace click en Inicio, esto
hará que la página se recargue nuevamente. También cuenta con un botón para
comunicarse directamente con nosotros: Escríbenos y otro para acceder a este
documento: “Documentos”.
Formulario Escríbenos: Este formulario fue diseñado para hacer más fácil la
comunicación entre nuestros clientes y el administrador de la página, al hacer click
en el botón Escríbenos dispuesto en la página principal, se abrirá una ventana
emergente pop-up la cual contiene el formulario para enviarnos un mensaje. El
formulario al igual que la página tendrá una interfaz sencilla, en la cual el usuario
deberá diligenciar obligatoriamente su nombre y correo electrónico y como opción el
asunto del mensaje, para luego escribir un mensaje ya sea de observación,
sugerencia, ayuda, cotización, etc.
Sección Nosotros: En esta sección el usuario podrá encontrar una breve descripción
de nuestra compañía.
Sección Principios corporativos: En esta sección el usuario podrá encontrar nuestros
valores, nuestra misión y visión.
Sección Servicios: La sección Servicios contiene una breve descripción de los
trabajos que realizamos, los cuales son: telecomunicaciones, desarrollo e
implementación y soporte técnico.
48 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Sección Contacto: En esta sección podrán encontrar la ubicación en Google Maps
vista en carretera, debajo se encuentra el teléfono, dirección, correo electrónico y
twitter, próximamente estará habilitado la página oficial en Facebook.
Sección Administración: Para ver las opciones del panel de administración es
necesario estar identificado, para ello es necesario la vinculación a la empresa, y la
cuenta debe ser creada por el administrador. Si dispone de una cuenta, podrá hacer
click en el vínculo Acceder, el cual abrirá un formulario de acceso para ingresar el
nombre de usuario y contraseña proporcionados por el administrador de la página, si
las credenciales son correctas, podrá ver el contenido dispuesto en el panel de
administración.
Una vez validadas las credenciales ingresadas será re direccionado a la página
principal, donde ya podremos acceder al contenido del panel de administración. Allí
encontraremos 5 links: Perfil, Recursos humanos, Facturación, Carro de compras y
Servicio médico Emermédica – Neiva.
Interfaces de Hardware.
Las máquinas o dispositivos donde se ejecute la plataforma debe tener las actualizaciones,
configuraciones y plugins necesarios para operar un navegador web sin inconvenientes (Opera,
Safari, Google Chrome, Microsoft Internet Explorer, Mozilla, Microsoft Edge, etc.).
Interfaces de Software.
El portal web se encuentra integrado con otros productos de software, como:
OrangeHRM (Human Resources Manager): El software OrangeHRM provee
soluciones informáticas para pequeñas y medianas empresas en cuánto a
administración de recursos humanos se refiere. Este software es de licencia
abierta GNU GPL. Los módulos que tiene OrangeHRM son: Administración,
Administración de la información personal, Licencias, Horario, Servicio de
empleado, Beneficios, Reclutamiento o Aspirantes y rendimiento.
49 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
AbanteCart: Es una plataforma que da solución a las necesidades de comercio
electrónico (e-comerce) basado en PHP, su finalidad es proporcionar la capacidad
para crear negocios en línea y vender productos de manera rápida y eficiente. Sus
principales características son la escalabilidad y la flexibilidad.
InstaBill: Es un grupo especializado en mercadeo, contabilidad, finanzas, política
tributaria, ingeniería y diseño gráfico, este brinda servicios de apoyo a las
empresas en cuanto a metas de rentabilidad y crecimiento se refiere ya que con los
aplicativos y funciones que ofrecen mejoran el desempeño de quienes los utilicen.
Su personal cuenta con más de 15 años de experiencia en el desarrollo de
software. Portales web, y estrategias de mercadeo y ventas
Requisitos Funcionales.
Requisito Funcional 1: Inicio Portal WEB.
Los siguientes:
Descripción: El portal web debe permitir su ingreso a través del DNS: clacomputerservice.co
utilizando la cabecera HTTP, el grado del requisito es alto o esencial.
Entradas: La dirección IP, URL del servidor en donde se encuentre alojado. Fuente: Internet.
Salidas: Página principal del portal web.
Restricciones: N/A
Proceso: El portal web deberá tener un nombre de dominio DNS para su identificación en
Internet,
y para permitir su fácil acceso a través de la barra de direcciones del navegador.
Requisito Funcional 2: Ingreso o anulación de roles.
Descripción: El portal web debe permitir el ingreso y anulación de uno o muchos roles.
Entradas: Roles de usuarios del portal web.
50 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Fuente: Formulario de datos del usuario.
Salidas: Usuarios con su rol asignado o eliminado.
Restricciones: Cada usuario tendrá al menos un rol asignado.
Proceso: En la administración del portal web, el usuario administrador tendrá un listado de los
usuarios registrados en el portal y de los roles disponibles, para su respectiva asignación.
Requisito Funcional 3: Creación de usuarios.
Descripción: El portal web debe permitir la creación de varios usuarios para asignarles roles
Específicos de acuerdo a su nivel de acceso.
Entradas: Datos del usuario (nombre, apellido, tipo de usuario, nombre de usuario y contraseña).
Fuente: Formulario de datos.
Salidas: Usuarios creados con acceso al sistema de acuerdo a su rol.
Restricciones: Campos obligatorios y no se pueden repetir usuarios.
Proceso: El usuario administrador podrá crear los usuarios que desee y asignarlos un rol, el
sistema de administración verificará que los datos obligatorios se encuentren diligenciados y que
el nuevo usuario no exista en el sistema.
Requisito funcional 4: Actualización de Contraseñas.
Descripción: El portal web debe permitir la actualización de las contraseñas de los usuarios
registrados.
Entradas: Nombre de usuario y contraseña. Fuente: Formulario de datos.
Salidas: Usuarios con su contraseña actualizada y la confirmación en pantalla por parte del
sistema.
Restricciones: Mínimo 6 caracteres con combinaciones alfanuméricas.
51 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Proceso: El usuario administrador podrá actualizar las contraseñas de los usuarios
periódicamente o según crea conveniente (pérdida de contraseña) para contribuir a la seguridad
del portal y la información que contiene cada perfil.
Requisito 5: Habilitar o deshabilitar usuarios.
Descripción: El portal web debe permitir habilitar o deshabilitar usuarios que el administrador
requiera.
Entradas: Nombre de usuario o identificación de usuario.
Fuente: Formulario de datos.
Salidas: Usuarios habilitados o deshabilitados y la confirmación en pantalla por parte del sistema
al administrador y al usuario.
Restricciones: Se podrán deshabilitar todos los usuarios, excepto el usuario administrador.
Proceso: El usuario administrador podrá deshabilitar o habilitar a uno o más usuarios según sea
requerido por medio de una opción en el sistema.
Requisito 6: Integración de herramientas administrativas.
Descripción: El portal web debe permitir la integración de herramientas administrativas según
sea necesario (módulo recursos humanos, e-commerce, facturación, etc.).
Entradas: Tipo de herramienta requerido.
Fuente: Formulario de datos.
Salidas: Portal actualizado con la herramienta virtual seleccionada instalada y funcionando.
Restricciones: Plugins de la plataforma.
Proceso: El usuario administrador podrá instalar herramientas administrativas con el fin de
mejorar la experiencia y los servicios que presta el portal web.
52 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Requisito 7: Vínculos de Navegación.
Descripción: El sistema debe tener vínculos de navegación comprensibles al usuario final.
Entradas: Íconos y/o textos.
Fuente: Pantallas de navegación.
Salidas: Vínculos comprensibles y funcionales.
Restricciones: N/A.
Proceso: El usuario final es capaz de navegar en la página de manera sencilla.
Requisito 8: Ayudas textuales.
Descripción: El sistema debe comunicarse con el usuario a través de pantallas con texto
indicando la confirmación o descripción de acciones que vaya a realizar.
Entradas: Formularios en pantalla.
Fuente: Pantallas de navegación.
Salidas: Ayudas y descripciones textuales.
Restricciones: Los mensajes y ayudas deben estar en idioma español.
Proceso: El usuario final podrá navegar sin perderse y estar seguro de las acciones que haya
realizado sobre ciertos formularios gracias a las confirmaciones y ayudas textuales que ellos
contienen
Requisitos no funcionales.
Requisitos de rendimiento.
El portal web se debe visualizar desde cualquier navegador web ejecutado desde cualquier
plataforma (GNU-Linux, Microsoft Windows, MAC, Android) y/o dispositivo (PC, Tablet,
Smartphone).
53 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Disponibilidad.
El portal web estará disponible 24 horas al día, los 7 días a la semana (24/7). Cuando existan
labores de mantenimiento, administración y/o actualización el portal no se encontrará disponible
a partir de las 12 de la noche del día elegido para las mencionadas labores y durará fuera de línea
lo que la labor requiera (máximo 3 horas).
Portabilidad.
Debido a que los datos que se manejan a través del portal web son gestionados a través de
herramientas creadas por terceros, estas cuentan con opciones para extraer y transferir los datos
allí diligenciados.
Por esto cumplen con:
Adaptabilidad: Característica de las herramientas que permite ser adaptada de manera
efectiva y eficiente a otros entornos, según se requiera.
Capacidad para ser instalado: Las herramientas cuentan con la facilidad de instalarse o
desinstalarse de manera exitosa en un determinado contexto.
Capacidad de reemplazo: Se refiere a la capacidad de la plataforma para utilizar otra
herramienta de software requerida para el mismo propósito y en el mismo contexto.
Diagrama Casos de Uso
54 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 9. Diagrama Caso de uso 1Ingreso al portal
Fuente: Propia
Figura 10. Diagrama de caso de uso 2. Administrador
Fuente: Propia.
Portal WEB
Administrador
CU1. Ingreso a la
plataforma
CU2. Inicio de
sesión
CU3. Cierre de
sesión
CU 2.1. Ingresar
credenciales
Usuario general
<<use>>
«include»
<<use>>
<<use>>
<<use>>
<<use>>
<<use>>
Portal WEB
Administrador
CU1. CRUD
Usuarios
CU1.1 Identificar al
usuario
CU2. CRUD
Herramientras del
portal web
CU 1.2 Modificar
contraseña de
usuario
CU3. CRUD Roles de
usuario
CU 1.3 Modificar rol
de usuario
CU 2.1 Identificar
herramienta
CU3.1 Identificar rol
<<use>>
«extend»
«include»
«include»
«extend»
<<use>> «include»
<<use>>
55 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 11. Caso de uso 3 Usuario registrado
Fuente: Propia.
Diseño de la Base de Datos.
La base de datos utilizada es la que trae por defecto WORDPRESS es en MySQL versión
4.0.
Portal web
Usuario registrado
CU1. Ingreso al
portal
CU1.1 Iniciar sesión
CU2. Acceder a
herramienta/serv icio
web
CU2.1 Elegir
herramienta/serv icio
CU2.2 Utilizar la
herramienta/serv icio
CU2.3 CRUD
Información
correspondiente a
su área
CU2.4 Rev isar
datos almacenados
correspondientes a
su área
«include»
«extend»«extend»
<<use>>
<<use>>
«include»
«extend»
56 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 12. Tablas WordPress
Fuente: David Asturias (http://davidaustria.com/2011/11/11/diagrama-de-la-base-de-datos-de-wordpress/).
La descripción de las tablas se puede visualizar en la tabla 2.
Tabla 11. Descripción de las tablas de WORDPRESS
Nombre de la Tabla Descripción Áreas relevantes de la Interface al
Usuario
wp_comments Los comentarios en
WordPress se mantienen
aquí
Los comentarios son creados por
lectores y autores como respuestas
a entradas en el blog. Son
administrados a través
de Administration
Panels >> Manage >>Comments
wp_links Información relacionada
con las ligas ingresadas
al Blogroll Manager de
WordPress.
Administration
Panels >>Blogroll >> Manage
Blogroll
Administration
Panels >>Blogroll >> Add Links
57 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Administration
Panels >>Blogroll >> Import Links
wp_options Las Opciones configuradas
enAdministration
> Options se mantienen
aquí.
Administration
Panels >>Options > > General
Administration
Panels >>Options > >Writing
Administration
Panels >>Options > >Reading
Administration
Panels >>Options > >Discussion
Administration
Panels >>Options > >Permalinks
Administration
Panels >>Options >
>Miscellaneous
wp_postmeta Los metadatos de cada
entrada en el blog se
mantienen aquí. Algunos
plugins de etiquetas (tags)
y otros pueden agregar su
propia información a esta
tabla.
Administration
Panels >> Write>> Write a Post
wp_posts La información principal
de WordPress son las
entradas (posts), que son
guardados en esta tabla.
Administration
Panels >> Write>> Write a Post
wp_terms Las categorías de las
entradas y las ligas se
mantienen aquí.
Administration
Panels >>Manage >> Categories
Administration
Panels >> Write>> Write Post
Administration
Panels >>Manage >> Posts >> Edit
wp_term_relationships Asociaciones de las
entradas con categorías y
etiquetas de la
tablawp_terms, junto con
asociaciones de ligas con
sus respectivas categorías.
Administration
Panels >>Manage >> Categories
Administration
Panels >> Write>> Write Post
Administration
Panels >>Manage >> Posts >> Edit
wp_term_taxonomy Contiene descripciones de
la taxonomía
Administration
Panels >>Manage >> Categories
58 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
(categoría, liga,
oetiqueta) para los datos
mantenidos en la
tabla wp_terms.
Administration
Panels >> Write>> Write Post
Administration
Panels >>Manage >> Posts >> Edit
wp_usermeta Cada usuario tiene sus
propios metadatos, que se
guardan en esta tabla.
Administration Panels >>Users
wp_users La lista de usuarios se
mantiene aquí.
Administration Panels >>Users
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Descripción detallada de las tablas.
Tabla: wp_comments.
Tabla 12. wp_comments
Campo Tipo Null Llave Valor
Predeterminado Extra
comment_ID bigint (20)
unsigned PRI NULL auto_increment
comment_post_ID int (11) IND 0 FK->wp_posts.ID
comment_author tinytext
comment_author_email varchar
(100)
comment_author_url varchar
(200)
comment_author_IP varchar
(100)
comment_date datetime 0000-00-00
00:00:00
comment_date_gmt datetime
IND &
IND
Pt2
0000-00-00
00:00:00
comment_content text
comment_karma int (11) 0
comment_approved varchar
(20)
IND &
Ind Pt1 1
59 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
comment_agent varchar
(255)
comment_type varchar
(20)
comment_parent bigint (20) 0 FK-
>wp_comment.ID
user_id bigint (20) 0 FK->wp_users.ID
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Tabla: wp_links.
Tabla 13. wp_links
Campo Tipo Null Llave Valor Predeterminado Extra
link_id bigint (20) PRI NULL auto_increment
link_url varchar (255)
link_name varchar (255)
link_image varchar (255)
link_target varchar (25)
link_category bigint (20) IND 0
link_description varchar (255)
link_visible varchar (20) IND Y
link_owner int (11) 1
link_rating int (11) 0
link_updated datetime 0000-00-00 00:00:00
link_rel varchar (255)
link_notes mediumtext
link_rss varchar (255)
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Tabla: wp_options.
Tabla 14. wp_options
Campo Tipo Null Llave Valor Predeterminado Extra
option_id bigint (20) PRI Pt1 NULL auto_increment
blog_id int (11) PRI Pt2 0
option_name varchar (64) PRI Pt3 & IND
60 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
option_value longtext
auto load varchar (20) yes
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Tabla: wp_postmeta.
Tabla 15. wp_postmeta
Campo Tipo Null Llave Valor Predeterminado Extra
meta_id bigint (20) PRI NULL auto_increment
post_id bigint (20) IND 0 FK->wp_posts.ID
meta_key varchar (255) YES IND NULL
meta_value longtext YES NULL
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Tabla: wp_posts.
Tabla 16. wp_posts
ampo Tipo Null Llave Valor
Predeterminado Extra
ID bigint (20)
unsigned
PRI &
IND Pt4 auto_increment
post_author bigint (20) 0 FK-
>wp_users.ID
post_date datetime IND Pt3 0000-00-00
00:00:00
post_date_gmt datetime 0000-00-00
00:00:00
post_content longtext
post_title text
post_category int (4) 0
post_excerpt text
post_status varchar (20) IND PT2 publish
comment_status varchar (20) open
ping_status varchar (20) open
post_password varchar (20)
post_name varchar (200) IND
61 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
to_ping text
pinged text
post_modified datetime 0000-00-00
00:00:00
post_modified_gmt datetime 0000-00-00
00:00:00
post_content_filtered text
post_parent bigint (20) 0 FK-
>wp_posts.ID
guid varchar (255)
menu_order int (11) 0
post_type varchar (20) IND Pt1 post
post_mime_type varchar (100)
comment_count bigint (20) 0
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Tabla: wp_terms.
Tabla 17. wp_terms
Campo Tipo Null Llave Valor Predeterminado Extra
term_id bigint (20) PRI auto_increment
name varchar (55)
slug varchar (200) UNI
term_group bigint (10) 0
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Tabla: wp_term_relationships.
Tabla 18. wp_term_relationships
Campo Tipo Null Llave Valor Extra
62 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Predeterminado
object_id
bigint
(20)
PRI
Pt1
0
term_taxonomy_id
bigint
(20)
PRI
Pt2 &
IND
0
FK-
>wp_term_taxonomy.term_taxonomy_id
term_order
int
(11)
0
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Tabla: wp_term_taxonomy.
Tabla 19. wp_term_taxonomy
Campo Tipo Null Llave
Valor
Predeterminado
Extra
term_taxonomy_id bigint (20) PRI auto_increment
term_id bigint (20)
UNI
Pt1
0
FK-
>wp_terms.term_id
taxonomy
varchar
(32)
UNI
Pt2
description longtext
parent bigint (20) 0
63 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
count bigint (20) 0
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Tabla: wp_usermeta.
Tabla 20. wp_usermeta
Campo Tipo Null Llave Valor Predeterminado Extra
umeta_id bigint (20) PRI NULL auto_increment
user_id bigint (20) '0' FK->wp_users.ID
meta_key varchar (255) Yes IND NULL
meta_value longtext Yes IND NULL
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Tabla: wp_users.
Tabla 21. wp_users
Campo Tipo Null Llave
Valor
Predeterminado
Extra
ID
bigint (20)
unsigned
PRI NULL auto_increment
user_login varchar (60) IND
user_pass varchar (64)
user_nicename varchar (50) IND
64 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
user_email varchar (100)
user_url varchar (100)
user_registered datetime
0000-00-00
00:00:00
user_activation_key varchar (60)
user_status int (11) 0
display_name varchar (250)
Fuente: Wordpress.org (https://codex.wordpress.org/es:Database_Description#Resources).
Diagrama Entidad Relación.
A continuación, se muestra el diagrama de Entidad relación que maneja WordPress.
65 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 13. Diagrama Entidad Relación
Fuente: David Asturia (http://davidaustria.com/2011/11/11/diagrama-de-la-base-de-datos-de-wordpress/).
Diseño de interfaces
Para el diseño de interfaz se utilizó plantillas predefinidas de WordPress, las cuales cuentan
con la usabilidad, navegabilidad y accesibilidad necesaria para una página WEB, vale la pena
aclarar que Más de un 25 % del contenido de la red se encuentra en WordPress. WordPress.com
aloja el contenido de todo el mundo: desde blogueros recién iniciados hasta empresas como
66 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Time, CNN y TechCrunch (WordPress, 2016), además, WordPress cuenta con ciento de temas
personalizables con novedades semanales, lo cual permite no solo tener un FrontEnd mucho más
atractivo al usuario final, sino que brinda la posibilidad de actualizarlo de manera muy fácil e
intuitiva.
El contenido de la página WEB es horizontal, pero mantiene la barra de menú estática lo cual
permite la fácil navegabilidad entre pantallas.
Figura 14. Menú Estático
Fuente: Propia.
La opción de Nosotros, Principios Corporativos, servicios y Contacto están dentro de la
misma página, solo que en cada una de estas opciones existe un hipervínculo el cual permite ir
rápidamente a cada una de estas opciones. La opción de Administración es una página nueva
donde se puede crear los perfiles al aplicativo, Parametrizar y utilizar la Herramienta
OrangeHRM (Recursos Humanos), Crear y generar todo lo concerniente a la facturación
(Facturación), carrito de Compras y un link que permite tener acceso directamente a la página
WEB de Emermédica en la ciudad de Neiva (Figura 7).
67 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 15. Nosotros
Fuente: Propia.
Figura 16. Principios Corporativos (Misión – Visión – Valores)
Fuente: Propia:
68 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Figura 17. Servicios (Telecomunicaciones – Desarrollo e Implementación – Soporte Técnico) Fuente: Propia.
Figura 18. Contacto
Fuente: Propia.
69 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Teoría del color.
Según Bender (2016) define la teoría del color es un grupo de reglas básicas en la mezcla de
colores para conseguir el efecto deseado combinándolos.
El color es una sensación producida por el reflejo de la luz en la materia y transmitida por el
ojo al cerebro. La materia capta las longitudes de onda que componen la luz excepto las que
corresponden al color que observamos y que son reflejadas.
El éxito de una página WEB no solo depende de su usabilidad, accesibilidad y confiabilidad
también influye bastante la combinación de colores. LoMejorWP (2013) clasifica los colores en:
Primarios, secundarios, terciarios, complementarios, análogos, tríadas de color, complementarios
divididos, doble complementario, aclarados oscurecidos, cálidos y fríos.
El color seleccionado para la página WEB fue el negro, porque este color simboliza elegancia
y distinción y combinado con colores blancos y azules denota sofisticación.
70 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Cronograma
Tabla 22. Cronograma
Secuencia temporal
Figura 19. Secuencia temporal
Fuente: autor
71 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Conclusiones
El uso de metodologías de desarrollo en especial la metodología por prototipos en la
elaboración del proyecto, hace que éste sea de alta calidad ya que se estructura en una serie de
etapas con las cuales logramos un producto donde se tiene en cuenta las necesidades del cliente y
para este proyecto ayudaron desarrollar portal web donde el comercio virtual es el eje principal.
El proyecto desarrollado está enfocado para que las personas, tengan la posibilidad de
interactuar con plataformas virtuales sin ningún tipo de barreras discriminatorias adaptándose a
cualquier tipo de discapacidad y asegurando su autonomía en el manejo de las tic y mejorando su
desarrollo personal e integración con la sociedad.
Esta investigación es un proyecto donde surgen las necesidades sobre el empleo laboral
apoyándose sobre la población de discapacidad en Colombia. Fue ahí donde se pudo determinar
que las condiciones de vida del discapacitado son difíciles y que de igual manera su forma de
comercialización no permite tener la rentabilidad que se merece, lo que impide que sus
conocimientos profesionales sean conocidos en mercados diferentes a los locales.
72 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Referencias
Abantecart. (2016). Most powerful eCommerce Platform to sell anything. Recuperado de:
http://www.abantecart.com/. (21/09/2016).
Abascal, Julio. Interacción persona-computador y discapacidad. En: Minusval.Nes 11/6/02
08:34. pp. 18-21.
Asturia, D. (2011). Diagrama de la Base de Datos de WordPress. Recuperado de:
http://davidaustria.com/2011/11/11/diagrama-de-la-base-de-datos-de-wordpress/.
(21/09/2016).
Bender. (2016). La teoría del color. Recuperado en:
http://www.batanga.com/curiosidades/2010/12/13/la-teoria-del-color. (21/09/2016).
Buyto. Portal Web Corporativo. {En línea} {Consultado agosto de 2015}. Disponible
en:http://www.buyto.es/general-diseno-web/que-es-un-portal-web
Colombia. Congreso de la República. (1997). Decreto 596 DE 2013. En línea. {Consultado
marzo de 2015}. Disponible en:
http://www.alcaldiabogota.gov.co/sisjur/normas/Norma1.jsp?i=56032.
Colombia. Congreso de la república. (1997). Ley 361 de 1997. {En línea} {Consultado agosto de
2015}. Disponible en:
http://www.secretariasenado.gov.co/senado/basedoc/ley_0361_1997.html
73 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Colombia. Congreso de la república. (2013). Ley 1618 de 2013. {En línea. {Consultado agosto
de 2015}. Disponible en:
http://wsp.presidencia.gov.co/Normativa/Leyes/Documents/2013/LEY%201618%20DEL
%2027%20DE%20FEBRERO%20DE%202013.pdf
Colombia. Congreso de la república. (1997). Ley 391 de 1997. Bogotá: pdf, 2015. 17 p.
Colombia digital. ¿Cómo está el e-commerce en Colombia? {En línea. {Consultado agosto de
2015}. Disponible en: http://www.colombiadigital.net/actualidad/noticias/item/8450-
como-esta-el-e-commerce-en-colombia.html
Colombia digital. Gobierno y políticas TIC. {En línea. {Consultado agosto de 2015}. Disponible
en: http://www.colombiadigital.net/gobierno-y-politicas-tic.html.
García, Mercedez y Burgos, Camino. (2013). Teletrabajo y Discapacidad. Madrid: Universidad
Nacional de Educación a Distancia, 2013.
Gestión. Modelo de prototipo. Mayo 23 de 2011. Recuperado octubre 22 de 2015 de
http://gestionrrhhusm.blogspot.com.co/2011/05/modelo-de-prototipo.html
Lomejoswp. (2013). TEORÍA DEL COLOR Y SU APLICACIÓN EN DISEÑO WEB.
Recuperado de: https://www.lomejordewp.com/teoria-color-diseno-web/. (21/09/2016).
Orangehrm. (2016). Herramientas de recursos humanos eficaces y opciones para satisfacer sus
necesidades. Recuperado en: https://www.orangehrm.com/Solutions. (21/09/2016).
Santmp. Modelo Prototipo. {En línea} {Consultado agosto de 2015}. Disponible
en:https://santmp.files.wordpress.com/2013/03/modelo-de-prototipo.pdf
74 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DE UN PORTAL WEB
Solera Lobo, J. Francisco. La accesibilidad a los sistemas computacionales para personas con
necesidades especiales. En: Revista Pensamiento Actual-65. pp. 65-70. San José:
Universidad de Costa Rica. s.f.
Wikipedia. (2016). GNU General Publica License. Recuperado en:
https://es.wikipedia.org/wiki/GNU_General_Public_License. (21/09/2016).
Wikipedia. (2016). WordPress. Recuperado de: https://es.wikipedia.org/wiki/WordPress.
(21/09/2016).
Wordpress. (2016). Funciones que te ayudan a publicar lo que sea desde donde sea. Recuperado
en: https://es.wordpress.com/features/. (21/09/2016).
Wordpress. (2016). CODEX. Recuperado de:
https://codex.wordpress.org/es:Database_Description#Resources. (21/09/2016).
Zappalá, Daniel; Köppel, Andrea; y Suchodolski, Miriam. (2011). Inclusión de TIC en escuelas
para alumnos con discapacidad motriz. Buenos Aires: Ministerio de Educación de la Nación.
Top Related