Post on 07-Jul-2022
Diseño y desarrollo de una aplicación web sobre lenguaje etiquetas en HTML para un
portal de acompañamiento a la crianza
Práctica social, empresarial o solidaria
Jaime Eduardo Jimenez Salazar
Universidad Cooperativa de Colombia
Programa Ingeniería de Sistemas
Facultad de Ingeniería
Villavicencio – Meta
2020
Diseño y desarrollo de una aplicación web sobre lenguaje etiquetas en HTML para un
portal de acompañamiento a la crianza.
Práctica social, empresarial o solidaria
Jaime Eduardo Jimenez Salazar
Asesora técnica: Ing. Piedad Chica Sosa
Asesora metodológica: Ing. Francy Yaneth Patiño Martínez
Universidad Cooperativa de Colombia
Programa Ingeniería de Sistemas
Facultad de Ingeniería
Villavicencio – Meta
2020
Autoridades Académicas
Dr. Maritza Rondón Rangel
Rectora Nacional
Dr. Cesar Augusto Pérez Londoño
Director Sede Villavicencio
Henry Emiro Vergara Bobadilla
Subdirector Académico de la sede Villavicencio
Dra. Ruth Edith Muñoz Jimenez
Subdirectora de Desarrollo Institucional y Financiero de la sede Villavicencio
Ing. Raúl Alarcón Bermúdez
Decano de la Facultad de Ingeniería
Ing. María Lucrecia Ramírez Suarez
Jefe de Programa de la Facultad de Ingeniería
Ing. Sandra Patricia Reyes Ortiz
Coordinadora de Investigación Facultad de Ingeniería
Dedicatoria
Este logro se lo dedico, principalmente a mi madre por tenerme paciencia tantos años en la
espera de alcanzar mi título universitario, a mi padre por darme apoyo cuando lo requiero y a mis
demás familiares por comprender los sacrificios que he hecho para poder obtener el título
universitario.
Agradecimientos
Agradezco a mi familia por ayudarme y apoyarme todo el tiempo, a esforzarme con la
culminación de mi carrera.
Agradezco al Ingeniero Juan Fajardo Barrero gerente de la empresa BitPointer, el cual me
permitió realizar las prácticas como modalidad de grado en la empresa.
Tabla de contenido
1. Descripción y naturaleza de la organización ........................................................................ 15
1.1 Descripción de la empresa ................................................................................................ 15
1.2 Misión ................................................................................................................................. 16
1.3 Visión .................................................................................................................................. 16
1.4 Valores encontrados en la organización .......................................................................... 16
1.5 Organigrama de la Empresa ............................................................................................ 17
2. Requerimientos de la organización ....................................................................................... 18
2.1 Objetivos del proyecto ...................................................................................................... 18
2.2 Funcionalidades, características y requerimientos ........................................................ 18
2.2.1 Requerimientos funcionales ......................................................................................... 19
2.2.2 Requerimientos no funcionales .................................................................................... 19
2.2 Metodología Ingenieril ...................................................................................................... 19
2.3 Descripción técnica ............................................................................................................ 23
HTML ................................................................................................................................... 23
CSS ........................................................................................................................................ 24
JavaScript ............................................................................................................................. 24
Visual Studio Code .............................................................................................................. 25
GitHub .................................................................................................................................. 26
React ..................................................................................................................................... 26
Material Design .................................................................................................................... 27
Google Chrome .................................................................................................................... 28
3. Plan de acción .......................................................................................................................... 29
4. Actividades realizadas ............................................................................................................ 31
4.1 Etapa planificación ............................................................................................................ 31
4.1.1 Historias de usuario ...................................................................................................... 31
4.1.2 Release planning e Iteraciones ..................................................................................... 33
4.2 Etapa de diseño .................................................................................................................. 35
4.2.1 Diseños simples ............................................................................................................ 35
4.2.2 Riesgos y soluciones planteados................................................................................... 37
4.3 Etapa de codificación ........................................................................................................ 38
4.3.1 Codificación.................................................................................................................. 38
4.4 Etapa de pruebas ............................................................................................................... 39
4.4.1 Test de aceptación ........................................................................................................ 39
5. Lecciones aprendidas .............................................................................................................. 41
6. Limitaciones, conclusiones y recomendaciones .................................................................... 42
6.1 Limitaciones ....................................................................................................................... 42
6.2 Conclusiones ...................................................................................................................... 42
6.3 Recomendaciones .............................................................................................................. 43
7. Anexos ...................................................................................................................................... 44
8. Referencias............................................................................................................................... 47
Lista de Tablas
Tabla 1 Historia de Usuario No. 1 ............................................................................................... 31
Tabla 2 Historia de Usuario No. 2 ............................................................................................... 31
Tabla 3 Historia de Usuario No. 3 ............................................................................................... 32
Tabla 4 Ficha de Caso de Uso: Consultar .................................................................................... 36
Tabla 5 Ficha de Caso de Uso: Explorar Sitio Web .................................................................... 37
Tabla 6 Ficha Caso de Uso: Accesos de Publicidad .................................................................... 37
Lista de Ilustraciones
Ilustración 1 Logo de la Empresa BitPointer .............................................................................. 15
Ilustración 2 Organigrama Empresa BitPointer .......................................................................... 17
Ilustración 3 Desarrollo de XP .................................................................................................... 20
Ilustración 4 HTML..................................................................................................................... 23
Ilustración 5 CSS ......................................................................................................................... 24
Ilustración 6 JavaScript ............................................................................................................... 24
Ilustración 7 Visual Studio Code................................................................................................. 25
Ilustración 8 GitHub .................................................................................................................... 26
Ilustración 9 React ....................................................................................................................... 26
Ilustración 10 Material Design .................................................................................................... 27
Ilustración 11 Google Chrome .................................................................................................... 28
Ilustración 12 Cronograma Propuesta ......................................................................................... 29
Ilustración 13 Cronograma Actualizado ...................................................................................... 30
Ilustración 14 Iteración 1 Consultar ............................................................................................ 33
Ilustración 15 Iteración 1 Explorar Sitio Web............................................................................. 33
Ilustración 16 Iteración 1 Acceso a Publicidad ........................................................................... 34
Ilustración 17 Diseño de la Renovación del Sitio Web en Borrador ........................................... 35
Ilustración 18 Diagrama Casos de Uso ....................................................................................... 36
Ilustración 19 Código Home Page............................................................................................... 38
Ilustración 20 Código CSS Home Page ...................................................................................... 39
Ilustración 21 Código de Accesos a Redes Sociales ................................................................... 39
Ilustración 22 Home Page con los Iconos de Redes Sociales ..................................................... 40
Ilustración 23 Enlace a Red de Facebook ................................................................................... 40
Lista de Anexos
Anexo 1 Acta de Inicio de la Modalidad de Grado ...................................................................... 44
Anexo 2 Carta de Aceptación ....................................................................................................... 45
Anexo 3 Manual del Usuario ........................................................................................................ 46
Anexo 4 Manual del Sistema ........................................................................................................ 46
Glosario de términos
HTML: (HyperText Markup Language) Es un lenguaje de etiquetas para el desarrollo de sitios
webs.
CSS: (Cascading Style Sheets, en español Hojas de estilo en Cascada) Es una tecnología que
permite agregar diferentes tipos de estilos a los espacios de contenido del sitio web, como:
imágenes, colores, gadgets, fondos, márgenes etc.
Sitio Web: Es un conjunto de archivos virtuales almacenados en un espacio del internet visible a
todos los usuarios, referente a un tema en particular, al cual se puede acceder por medio de un
dominio y dirección de internet especifica.
Software: Se considera que el software es la parte intangible de un computador, dado que permite
cargar o almacenar programas que interactúan con el usuario.
Servidor: Existen dos significados distintos en el ámbito informático, el primero se refiere a los
ordenadores que contiene software de interacción con el usuario por medio de la conexión de redes.
El segundo significado hace referencia a los programas que funcionan dentro del ordenador.
URL: Significa "Uniform Resource Locator", o bien, "Localizador Uniforme de Recursos". En
palabras de fácil comprensión, es una dirección virtual específica, y que, por medio de caracteres
reconocidos por estándares del internet, permite localizar sitios web o contenido referente a un
tema.
Visual Studio Code: Es un editor de código fuente desarrollado por Microsoft para Windows,
Linux y macOS. Incluye la función de soporte para la depuración y modificación del código.
También es de libre acceso y permite personalización del código por cualquier tipo de usuario.
Hardware: Son las partes físicas de un ordenador, como las siguientes: componentes eléctricos,
componentes electrónicos, componentes electromecánicos y componentes mecánicos. Las cuales
permiten manipular el software incluido dentro del ordenador.
Metodología Ágil: Es una de varias metodologías que se utilizan en la construcción de software,
que permiten estructurar los pasos o etapas de cómo se desarrolló el software en el transcurso del
tiempo.
Casos de Uso: Son los principales procesos que permiten la interacción del usuario y el software
desarrollado para ser aplicado de manera comercial o empresarial.
Resumen
La tecnología cada vez avanza más rápido por lo cual las empresas no pueden quedarse por
fuera de este avance, debido a esto muchas empresas recurren al desarrollo de sitios web que
permiten mostrar por medio de la red de internet un espacio virtual, donde se aloje una comunidad
virtual la cual trasmite información o contenidos correspondientes a la empresa.
BitPointer es una empresa de desarrollo tecnológico, que dentro de sus servicios ofrece la
construcción y estructuración de sitios webs para empresas que lo requieran, y lograr así
actualizarse con los mercados actuales. Ellos también realizan mantenimientos de estos sitios web,
hasta que el cliente decida que quiere terminar su contracto de administración del sitio en
BitPointer.
Esta práctica de modalidad de grado, permite la renovación del sitio web “Chile Crece
Contigo”, con la posibilidad de dar un mejor mantenimiento a este espacio virtual y lograr así, una
mejor estructuración del software, con el objetivo de incrementar la satisfacción con el cliente,
respecto a la prestación de servicios por la empresa BitPointer, enfocándose en el mejoramiento
de la visualización de contenidos como accesos directos e información dentro del sitio.
Abstract
Technology is progressing faster and therefore companies cannot stay out of this progress,
due to this many companies resort to the development of websites that allow showing through the
internet a virtual space, where a virtual community which transmits information or content
corresponding to the company.
BitPointer is a technology development company, which within its services offers the
construction and structuring of websites for companies that require it, and thus be able to update
itself with current markets. They also maintain these websites, until the client decides that they
want to terminate their site administration contract in BitPointer.
This degree modality practice allows the renewal of the “Chile Grows With You” website,
with the possibility of giving better maintenance to this virtual space and thus achieving better
software structuring, with the aim of increasing satisfaction with the client, regarding the provision
of services by the company BitPointer, focusing on improving the display of content such as
shortcuts and information within the site.
15
1. Descripción y naturaleza de la organización
1.1 Descripción de la empresa
BitPointer es una empresa colombiana líder en el desarrollo de base tecnológica que ofrece
servicios como consultorías, desarrollo de soluciones de software, instalación, configuración,
mantenimiento y soporte a servidores sobre sistemas operativos tipo Unix.
Ilustración 1 Logo de la Empresa BitPointer
Fuente: (BitPointer, 2017)
Esta empresa cuenta con profesionales que tiene experiencia mayor a 15 años en el sector
tecnológico, desarrollando soluciones para las principales empresas de la región, también a nivel
nacional, ofreciendo soluciones basadas en desarrollo de software libre, para reducir en mayor
medida costos de implementación y ejecución del software.
• Dirección actual: Av. 40 No. 16B-159 Villacentro
• Teléfonos: 6726764 / 6824472
• Email: http://www.bitpointer.co
• NIT: 901104234-2
• Registro Mercantil: 0000318281
16
1.2 Misión
“Proveer soluciones integrales e innovadoras a tecnologías de información y
comunicaciones (TICs), anticipando y superando las necesidades de nuestros clientes con los más
altos niveles de calidad, confiabilidad y seguridad; permaneciendo en constante desarrollo
tecnológico apoyados en nuestro talento humano, la generación de valor a través del conocimiento
y muestra continua evolución persona y profesional.” (BitPointer, 2017)
1.3 Visión
“En tres años ser la empresa líder de la región en desarrollo de software y soluciones
informáticas, proyectando alcances y reconocimiento de alto nivel tecnológico a nivel nacional en
10 años.” (BitPointer, 2017)
1.4 Valores encontrados en la organización
Lo valores que se priorizan en la ejecución de labores dentro de la empresa BitPointer son los
siguientes:
• Respecto: enfocado hacia un trato respetuoso y amable.
• Integridad: basado en los conocimientos solidos pilares de nuestra compañía.
• Confiabilidad: tanto en el manejo de la información de nuestros clientes como de nuestra
labor.
• Responsabilidad Laboral: reflejado en la labor encomendada.
• Innovación y Competitividad: partiendo de nuestra cultura empresarial de una constante
retroalimentación.
• Integridad Laboral: que surge del ejercicio de la constancia y disciplina en el desarrollo de
los proyectos propios y de nuestros clientes.
17
1.5 Organigrama de la Empresa
Ilustración 2 Organigrama Empresa BitPointer
Fuente: (BitPointer, 2017)
18
2. Requerimientos de la organización
2.1 Objetivos del proyecto
General
Renovar el sitio web llamado “Chile Crece Contigo”, con diseños y desarrollos de módulos
interactivos para un fácil acceso, por medio del lenguaje HTML.
Específicos
• Desarrollar nueva plantilla en el sitio web por medio del lenguaje HTML.
• Diseñar módulos interactivos e informáticos para los usuarios, dentro del sitio web llamado
“Portal Crecer”.
2.2 Funcionalidades, características y requerimientos
BitPointer, que trabaja con la finalidad de promover soluciones de software, instalación,
configuración, mantenimiento y soporte a servidores sobre sistemas operativos tipo Unix como
Linux, BSD, entre otros, es consciente de toda la información privada que se debe controlar y
salvaguardar en espacios donde solo tengan acceso el personal que este autorizado, en el uso de
esta información. Por eso se especializa en darle satisfacción de seguridad a los clientes, con
estándares y protocolos para resguardar estos contenidos que son de vital importancia para las
empresas de la región y a nivel nacional.
También se especializan en soluciones basadas en software libre, las cuales ofrecen
alternativas robustas y seguras a menores costo en el momento de ser implementadas en las
empresas.
19
Mediante el convenio de cooperación entre la Universidad Cooperativa de Colombia sede
Villavicencio / Meta y la empresa BitPointer, permitió al estudiante del programa de ingeniería de
sistemas JAIME EDUARDO JIMENEZ SALAZAR, iniciar su práctica social, empresarial o
solidaria como modalidad de grado con el fin de renovar el sitio web “Chile Crece contigo”
2.2.1 Requerimientos funcionales
• Consultar
o Ingresar consulta
o Borrar consulta
o Actualizar consulta
• Explorar sitio web
o Reproductor de videos
o Galería de temas
o Acceso a vínculos
• Acceso a la publicidad
2.2.2 Requerimientos no funcionales
• El sitio web debe contar con manuales de usuario estructurados adecuadamente.
• El sitio web debe tener una disponibilidad del 99,99% de las veces en que un usuario
intente accederlo.
• El sitio web no revelara a sus operadores otros datos personales de los clientes distintos a
nombres y números de referencia.
2.2 Metodología Ingenieril
De acuerdo a lo enunciado en la propuesta de modalidad de grado y el cronograma de
actividades, el objetivo de la práctica social, empresarial o solidaria es “Realizar una renovación
del sitio web Portal Crecer”, en la cual se plantea cambios por medio del lenguaje de etiquetas de
20
HTML y CSS, los cuales se utilizan para realizar diseños y estructuración del sitio web ya
nombrado, explicando claramente el desarrollo de módulos y el contenido informativo. Lo anterior
permitiría que los usuarios se informen claramente de las metas propuestas por la empresa a la que
está asociada el sitio. Este desarrollo de procesos se alcanza con la aplicación de la metodología
XP (Programación extrema) como guía de trabajo para el desarrollo del proyecto en BitPointer.
XP (Programación Extrema) es una metodología ágil, la cual obtiene su mayor beneficio
en ser muy flexible en el momento de ser usada para la gestión de proyectos, debido a que se centra
en potenciar las relaciones interpersonales del equipo de desarrollo como clave del éxito del
proyecto, mediante el aprendizaje continuo y el buen clima de trabajo que se genera.
La metodología se enfatiza en la retroalimentación continua entre el cliente y el equipo de
desarrollo, dado que es muy adaptable para proyectos de requisitos imprecisos o muy cambiantes
en el transcurso del desarrollo del proyecto.
Ilustración 3 Desarrollo de XP
Fuente: (Calvo, 2018)
21
Las etapas de desarrollo de la metodología que son de planificación, diseño, codificación,
pruebas. El pasante debe garantizar el cumplimiento de los objetivos propuestos con la
implementación de estas etapas para poder llevar a cabo la culminación de la práctica.
Una vez completadas las etapas de la metodología de XP, se realiza una revisión de cada
una de ellas, con el fin de analizar y detallar si los objetivos de estas etapas fueron resueltos. En
dado caso que el cliente no se sienta satisfecho con el desarrollo se podrá plantear soluciones que
implementen los cambios que desea hacer.
Concluyendo con la retroalimentación de estas etapas en las cuales se evaluaron los
conocimientos aplicados para el desarrollo de las prácticas dentro de la empresa BitPointer, se
podrá pasar a la última etapa que es la encargada del lanzamiento del sitio web renovado llamado
“Portal Crecer”. (Bahit, 2011-2012)
A continuación, se enuncian las actividades que se desarrollan para cada fase en la implementación
de la metodología XP.
Etapa de planificación
• Historias de usuario: Son datos de usuario que se recolectan, correspondientes a lo que
sienten en el momento de ingresar al sitio web.
• Release planning: Análisis de los datos recolectados en las historias de usuarios.
• Interacciones: Procesos en los cuales participan los datos recolectados de las historias de
usuario, aplicados con el funcionamiento del sitio web.
• Velocidad del proyecto: Tiempo que toma para realizar las actividades correspondientes a
la investigación y diligenciamiento de los procesos aplicados en la metodología con
referente a la práctica aplicadas en el cronograma.
22
• Reuniones diarias: Fechas establecidas para reunirse tanto con el cliente, como con el
asesor para mostrar o verificar los avances obtenidos en el desarrollo de la práctica
aplicadas en el cronograma.
Etapa de diseño
• Diseños simples: Recreación por medio de borradores sean virtuales o físico de cómo se
deben realizar las renovaciones en el sitio web de “Portal crecer”, incluyendo los
diagramas de casos de uso.
• Glosario de términos: Selección de palabras aplicadas con su debida aclaración de
conceptos, en el momento de ser utilizados en los procesos de desarrollado de actividades,
durante el transcurso de la práctica.
• Riegos: Posibles riesgos que puedan surgir en el desarrollo de las actividades dentro del
tiempo transcurrido de la práctica.
Etapa de codificación
• Codificar: Actividad en las que se aplican conocimientos del pasante con la estructuración
de la renovación del sitio web “Portal Crecer” planteados en la etapa de diseño.
Etapa de pruebas
• Test de aceptación: Actividad que prioriza pruebas a la estructuración y ejecución del
código desarrollado dentro del sitio web “Portal Crecer”, con el fin de verificar que no
tengan ningún fallo con lo planteado en las bases del desarrollo de la práctica. (Bahit, 2011-
2012)
23
2.3 Descripción técnica
A continuación, se relacionan los diferentes lenguajes de programación y entornos de
desarrollo utilizados en la practica enfocada en la renovación del sitio web “Chile Crece Contigo”
por el sitio web “Portal Crecer”.
HTML
Ilustración 4 HTML
Fuente: (Gardey, 2008 actualizado 2012)
Es un lenguaje de marcado, que se utiliza para el desarrollo de páginas de Internet. Se trata
de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de
Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.
Este lenguaje es el que se utiliza para especificar los nombres de las etiquetas que se
utilizarán al ordenar, no existen reglas para dicha organización, por eso se dice que es un sistema
de formato abierto.
EL HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen
como textos y sobre su estructura, complementando dicho texto con diversos objetos (como
fotografías, animaciones, etc.). (Gardey, 2008 actualizado 2012)
24
CSS
Ilustración 5 CSS
Fuente: (Merino, 2017 actualizado 2019)
La sigla CSS corresponde a la expresión inglesa Cascading StyleSheets, que puede
traducirse como “Hojas de estilo en cascada”. El concepto se utiliza en el ámbito de la informática
para referirse a un lenguaje empleado en el diseño gráfico.
El diseño del CSS posibilita establecer una separación entre el contenido y la forma de
presentación del documento (dada por las fuentes, los colores y las capas empleadas). Así se puede
lograr que muchos documentos HTML compartan la apariencia, utilizando una única hoja de estilo
para todos (que se especifica en un archivo.css). Gracias a esta particularidad, se evita tener que
repetir el código en la estructura. (Merino, 2017 actualizado 2019)
JavaScript
Ilustración 6 JavaScript
Fuente: (Gonzalez, 2016)
25
Consiste en un lenguaje de programación interpretado, que habitualmente se utiliza en
sitios web para ejecutar acciones en el lado del cliente.
JavaScript permite, en una página web, crear elementos como cuadros de diálogo, recoger
información entrada por el usuario y enviarla al servidor para ser procesada. Al ser un lenguaje
abierto y modificable en elementos como la sintaxis, se da a la creación de variantes y dialectos.
(Gonzalez, 2016)
Visual Studio Code
Ilustración 7 Visual Studio Code
Fuente: (Medina, 2015)
Cuyas características se asemejan a otros como Geany o el más reciente Brackets de Adobe.
Soporta una cantidad considerable de lenguajes, ya sean propios de Microsoft como C#, F# y
Visual Basic, o de otros como PHP, Phyton, Perl, SQL, shell scripting en Bash y Java, siendo este
último el gran rival de .NET. También soporta Git y programación web con HTML, CSS y
JavaScript, entre otros lenguajes. (Medina, 2015)
26
GitHub
Ilustración 8 GitHub
Fuente: (B., 2019)
Es un sistema de gestión de proyectos y control de versiones de código, así como una
plataforma de red social diseñada para desarrolladores. ¿Pero para qué se usa GitHub? Bueno, en
general, permite trabajar en colaboración con otras personas de todo el mundo, planificar proyectos
y realizar un seguimiento del trabajo. GitHub es también uno de los repositorios online más
grandes de trabajo colaborativo en todo el mundo. (B., 2019)
React
Ilustración 9 React
Fuente: (reactjs.org, 2020)
27
React te ayuda a crear interfaces de usuario interactivas de forma sencilla. Diseña vistas
simples para cada estado en tu aplicación, y React se encargará de actualizar y renderizar de
manera eficiente los componentes correctos cuando los datos cambien.
Las vistas declarativas hacen que el código sea predecible, por lo tanto, es más fácil de
depurar. Crea componentes encapsulados que manejan su propio estado, y se convierten en
interfaces de usuario complejas.
Debido a que la lógica de los componentes está escrita en JavaScript y no en plantillas, se
puede pasar los datos de forma sencilla a través de tu aplicación y mantener el estado fuera del
DOM. (reactjs.org, 2020)
Material Design
Ilustración 10 Material Design
Fuente: (Material.io, s.f.)
Material Design es un sistema adaptable de pautas, componentes y herramientas que
respaldan las mejores prácticas de diseño de interfaz de usuario. Respaldado por código de fuente
abierta, Material agiliza la colaboración entre diseñadores y desarrolladores, y ayuda a los equipos
a construir rápidamente productos hermosos. (Material.io, s.f.)
28
Google Chrome
Ilustración 11 Google Chrome
Fuente: (Uriarte, 2020)
Google Chrome es un navegador web que contiene aplicaciones de código abierto y que ha
sido desarrollado por la empresa Google.
Chrome significa “interfaz gráfica de usuario” que hace referencia a un programa
informático que se nutre de imágenes y objetos gráficos para proporcionar un entorno visualmente
sencillo para el usuario. Esta interfaz además es segura y fácil y rápida. (Uriarte, 2020)
Para observar el sitio web Portal Crecer, se debe acceder por la siguiente URL
(https://tartarot.github.io/ProyectoPractica/), esta dirección URL permite acceder al espacio virtual,
donde se encuentra almacenado el sitio web, en el repositorio de GitHub. Este repositorio permite
visualizar desde cualquier dispositivo que tenga conexión a internet, el sitio web.
En determinado caso que se requiera tener acceso a la estructuración del código y contenido
del sitio, se debe tener instalado la biblioteca de React más el complemento de Material Design
dentro de la plataforma de Visual Studio Code, programas necesarios para poder administrar u
organizar los contenidos que son visibles dentro del sitio web Portal Crecer.
29
3. Plan de acción
Actividades y tiempos
El siguiente es el cronograma planteado en la propuesta para el desarrollo de las actividades
correspondientes a la práctica:
Ilustración 12 Cronograma Propuesta
Fuente: Elaboración Propia
Debido a que el cronograma anterior es poco específico, con respecto al diligenciamiento
de actividades realizadas durante el transcurso de la práctica en la empresa BitPointer, se planteó
uno más completo enfocándolo a una metodología ágil conocida como XP (Programación
Extrema) para que el desarrollo de actividades fuera optimo en el tiempo establecido para
desarrollo de la práctica. A continuación, se muestra el cronograma de actividades ajustado.
30
Ilustración 13 Cronograma Actualizado
Fuente: Elaboración Propia
31
4. Actividades realizadas
Para el desarrollo de la práctica, y de acuerdo con la metodología planteada, se
desarrollaron los siguientes hitos y entregables.
4.1 Etapa planificación
4.1.1 Historias de usuario
Tabla 1 Historia de Usuario No. 1
Historia de Usuario
Numero: 1 Nombre: Consultar
Usuario: usuario
Modificación de Historia Numero: Iteración Asignada: 1
Prioridad en Negocio: media Puntos Estimados: 2
Rango de Desarrollo: Codificación Puntos Reales:
Descripción:
El usuario accede a este espacio para buscar, palabras en el navegador, con el propósito de saber
las definiciones o conceptos que esta posee.
Observaciones:
No solo debería buscar en el navegador, sino también dentro del sitio web mostrando donde sea
aplicada para tener una mejor compresión del concepto de la palabra que se está buscando.
Fuente: Elaboración Propia
Tabla 2 Historia de Usuario No. 2
Historia de Usuario
Numero: 2 Nombre: Explorar Sitio Web
Usuario: usuario
32
Modificación de Historia Numero: Iteración Asignada: 1
Prioridad en Negocio: alta Puntos Estimados: 5
Rango de Desarrollo: Codificación Puntos Reales:
Descripción:
Múltiples accesos de contenido donde no solo puede informarse, si no también puede acezar a
nuevos contenidos correlacionados con el tema principal que había seleccionado.
Observaciones:
Tratar de organizar los temas en forma de submenús al lado derecho para poder guiarse, de cómo
logro acceder hasta esa información.
Fuente: Elaboración Propia
Tabla 3 Historia de Usuario No. 3
Historia de Usuario
Numero: 3 Nombre: Publicidad
Usuario: usuario
Modificación de Historia Numero: Iteración Asignada: 1
Prioridad en Negocio: media Puntos Estimados: 3
Rango de Desarrollo: Codificación Puntos Reales:
Descripción:
Acceso ah aplicaciones sociales, que permite realizar publicidad tanto de la página como acezar
a las cuentas de cada usuario.
Observaciones:
Sería interesante que se pudiera crear un perfil de usuario que vincule la página con las redes
sociales del usuario, para destacar mejor el sitio web de la empresa asociada.
Fuente: Elaboración Propia
33
4.1.2 Release planning e Iteraciones
Ilustración 14 Iteración 1 Consultar
Fuente: Elaboración Propia
Ilustración 15 Iteración 1 Explorar Sitio Web
Fuente: Elaboración Propia
0
1
2
3
4
1
2
4
MES
ES
Historia de Usuario 1
Idea Planificacion Diseño
0
1
2
3
4
5
MES
ES
Historia de Usuario 2
Idea Planificacion Diseño
34
Ilustración 16 Iteración 1 Acceso a Publicidad
Fuente: Elaboración Propia
0
1
2
3
4
5
MES
ES
Historia de Usuario 3
Idea Planificacion Diseño
35
4.2 Etapa de diseño
4.2.1 Diseños simples
Ilustración 17 Diseño de la Renovación del Sitio Web en Borrador
Fuente: Elaboracion Propia
36
Ilustración 18 Diagrama Casos de Uso
Fuente: Elaboración Propia
Tabla 4 Ficha de Caso de Uso: Consultar
Fuente: Elaboración Propia
37
Tabla 5 Ficha de Caso de Uso: Explorar Sitio Web
Fuente: Elaboración Propia
Tabla 6 Ficha Caso de Uso: Accesos de Publicidad
Fuente: Elaboración Propia
4.2.2 Riesgos y soluciones planteados
• Riesgo 1: Que el código no ejecute, de acuerdo a la diseño y estructuración que se había
consolidado con el cliente respecto al sitio web.
Solución: Reunirse varias veces con el cliente especificando a detalle como quiere el sitio
web creado.
• Riesgo 2: Que sea de fácil acceso por cualquier usuario, a la estructuración y diseño del
sitio web y realice cambios desde cualquier equipo de cómputo sin tener los permisos de
administrador.
38
Solución: Otorgar permisos de seguridad para cada tipo de usuario, dentro del sitio web.
• Riesgo 3: Que la información contenida en el sitio web, supere los límites establecidos en
el servidor y no pueda visualizarse el contenido de la página.
Solución: Evaluar los contenidos agregados en el sitio web, para que no sobrepase el límite
de almacenamiento que tiene establecido.
4.3 Etapa de codificación
4.3.1 Codificación
Ilustración 19 Código Home Page
Fuente: Elaboración Propia
39
Ilustración 20 Código CSS Home Page
Fuente: Elaboración Propia
4.4 Etapa de pruebas
4.4.1 Test de aceptación
Ilustración 21 Código de Accesos a Redes Sociales
Fuente: Elaboración Propia
40
Ilustración 22 Home Page con los Iconos de Redes Sociales
Fuente: Elaboración Propia
Ilustración 23 Enlace a Red de Facebook
Fuente: Elaboración Propia
41
5. Lecciones aprendidas
El desarrollo de esta práctica en la empresa BitPointer, fue aceptada con gran conformidad
por el personal que labora allí, principalmente por el Ingeniero Juan Fajardo Barrero el cual
permitió dar la oportunidad al estudiante Jaime Eduardo Jimenez, de realizar la labor de renovar
el sitio web “Chile Crece Contigo”.
En la práctica de renovación del sitio web “Chile Crece Contigo”, se implementó técnicas
a bajos costos en el desarrollo del proyecto, como también el beneficio de usar software libre
basado en el lenguaje de etiquetas de HTML y CSS, para diseñar la estructuración del código.
Con respecto a los procesos realizados en la práctica, se experimentó la construcción de un
sitio web, enfocado en una empresa. La cual permite agregar contenido y realizar una
estructuración de código, enfocado al cliente o usuarios que ingresen al sitio.
También se adquirió conocimientos de la base de datos de GitHub, la cual permite buscar
códigos de cualquier tipo de lenguaje y lograr así, tener una mejor referencia sobre la estructura
de los componentes que desee aplicarse, en el desarrollo del diseño, de sitios webs.
En la construcción del diseño del sitio web Portal Crecer se añadió, nuevos complementos
a la plataforma de Visual Studio Code, la cual permite estructurar y gestionar contenidos dentro
del código como también agregar características que tendrá la página.
42
6. Limitaciones, conclusiones y recomendaciones
6.1 Limitaciones
Complicaciones especificas no se presentaron, pero si surgieron otro tipo de inconvenientes
correspondientes a la estructuración del diseño y a la misma información alojada en el sitio web:
• No se contó con una plantilla estructural del sitio web propia, alojada en la documentación
de la empresa, que sirviera como guía para la replicación y renovación de los contenidos
colocados en los diferentes espacios que contiene la página web.
Solución: Se diseñó desde cero la plantilla, que se aplicó en el sitio web, y se organizó
todos los espacios que contiene dicho sitio.
• Las imágenes o fotos correspondientes al sitio web “Chile Crece Contigo” solo se
encontraban en el navegador, debido a que no permite descargar las imágenes alojadas del
sitio web. En el caso, de que lo permitiera, se debía realizar el rastreo específico de la
imagen dentro del código para poder encontrar el espacio que la contenía.
Solución: Se buscó en el navegador, las imágenes y sus posibles opciones de imágenes,
una por una hasta localizar la que fue aplicada en el sitio web.
6.2 Conclusiones
• De acuerdo al desarrollo de la práctica, que se enfocó en la renovación del sitio web “Chile
Crece Contigo”, se logró completar la plantilla en el lenguaje de etiquetas de HTML y
CSS.
• Con respecto al diseño de módulos interactivos e informáticos para los usuarios, dentro del
sitio web “Portal Crecer”, se logró cumplir ese objetivo con tres módulos, que permiten
43
consultar, explorar el sitio y redireccionar a las redes sociales sin tener que acceder a ellas
por medio del navegador.
6.3 Recomendaciones
• Se recomienda siempre tener una copia de la estructura de los sitios webs, que se están
administrando en determinado caso que se requiera, darle un soporte vital o un
mantenimiento preventivo por cualquier situación que se presente.
• Se recomienda siempre tener una documentación de todos los ítems agregados al sitio web,
para la reutilización de estos, como de poder remplazar algún contenido que no ejecute con
normalidad.
44
7. Anexos
Anexo 1 Acta de Inicio de la Modalidad de Grado
ACTA DE INICIACIÓN DE MODALIDAD DE GRADO
UNIVERSIDAD COOPERATIVA DE COLOMBIA
FACULTAD DE INGENIERÍAS
PROGRAMA: INGENIERÍA DE SISTEMAS
FECHA: 06/04/2020
NOMBRE DEL PROYECTO: Portal para Crecer “Diseño y Desarrollo de una aplicación web sobre lenguaje de etiquetas en HTML para un portal de acompañamiento a la crianza”
MODALIDAD: Practica social, Empresarial
FECHA DE INICIO DE LA MODALIDAD: 02/09/2019
FECHA FINAL DE LA MODALIDAD: 02/11/2019
1. Objetivo del Proyecto:
Renovar el sitio web llamado “Portal Crecer Chile”, con diseños y desarrollos de módulos
interactivos para un de fácil acceso, por medio del editor de texto HTML.
2. Datos del Estudiante:
Nombre: Jaime Eduardo Jimenez Salazar
ID: 446237
Correo electrónico: Jaime.jimenezs@campusucc.edu.co
Celular: 3143110238
3. Duración de la modalidad:
N° Actividad MESES
1 2 3 4 5 6
1 Establecer requerimientos
2 Adquirir, adaptar plantilla acorde con los requerimientos
3 Diseñar elementos visuales
4 Configurar y personalizar espacios creados en HTML
5 Establecer módulos a utilizar identificando cuales existen,
cuales hay que adaptar y cuales se deben desarrollar.
6 Desarrollar módulos requeridos
7 Adaptar módulos
8 Cargar contenido inicial
9 Capacitar en el uso del sitio web, para agregar el nuevo
contenido
45
Anexo 2 Carta de Aceptación
46
Anexo 3 Manual del Usuario
Fuente de la Imagen: (freepikcompany, s.f.)
Anexo 4 Manual del Sistema
Fuente: (Paul, 2016)
47
8. Referencias
B., G. (13 de 05 de 2019). ¿Qué es GitHub y para qué se utiliza? Obtenido de HostingerTutoriales:
https://www.hostinger.es/tutoriales/que-es-github/
Bahit, E. (2011-2012). Scrum y eXtreme Programming para Programadores. Buenos Aires, Argentina:
safeCreative.
BitPointer. (2017). Web BitPointer. Obtenido de https://www.bitpointer.co/bp/index.php/es/inicio/
Calvo, D. (7 de 04 de 2018). Metodología XP Programación Extrema (Metodología ágil). Obtenido de
diegocalvo.es: http://www.diegocalvo.es/metodologia-xp-programacion-extrema-metodologia-
agil/
freepikcompany. (s.f.). freepikcompany. Obtenido de https://www.freepik.es/vector-premium/manual-
usuario-lupa-documento-guia-usuario-lupa-icono-vector-manual-manual-instruccion-
guia_6397675.htm
Gardey, J. P. (2008 actualizado 2012). definicion.de. Obtenido de https://definicion.de/html/
Gonzalez, G. A. (11 de 2016). definicionabc.com. Obtenido de
https://www.definicionabc.com/tecnologia/javascript.php
Material.io. (s.f.). Design guidance and code. Obtenido de material io: https://material.io/
Medina, E. (30 de 04 de 2015). muylinux.com. Obtenido de
https://www.muylinux.com/2015/04/30/visual-studio-code-editor-codigo-microsoft-windows-
os-x-gnu-linux/
Merino, J. P. (2017 actualizado 2019). definicion.de. Obtenido de https://definicion.de/css/
Paul. (9 de 02 de 2016). traduccionesbogota.com. Obtenido de
https://www.traduccionesbogota.com/como-traducir-manuales/
reactjs.org. (2020). Black Lives Matter. Support the Equal Justice Initiative. Obtenido de reactjs.org:
https://es.reactjs.org/
Uriarte, J. M. (14 de 06 de 2020). Google Chrome Historia. Obtenido de
https://www.caracteristicas.co/google-chrome/