diseño y desarrollo de una aplicación web sobre lenguaje

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 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

http://www.bitpointer.co/

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.

https://tartarot.github.io/ProyectoPractica/

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


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.



Historia de Usuario

Numero: 2 Nombre: Explorar Sitio Web

Usuario: usuario

32


Prioridad en Negocio: alta Puntos Estimados: 5


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.



Historia de Usuario

Numero: 3 Nombre: Publicidad

Usuario: usuario


Prioridad en Negocio: media Puntos Estimados: 3


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.


33

4.1.2 Release planning e Iteraciones

Ilustración 14 Iteración 1 Consultar


Ilustración 15 Iteración 1 Explorar Sitio Web


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



34

Ilustración 16 Iteración 1 Acceso a Publicidad


0

1

2

3

4

5

MES

ES



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


Tabla 4 Ficha de Caso de Uso: Consultar


37

Tabla 5 Ficha de Caso de Uso: Explorar Sitio Web


Tabla 6 Ficha Caso de Uso: Accesos de Publicidad


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


39

Ilustración 20 Código CSS Home Page


4.4 Etapa de pruebas

4.4.1 Test de aceptación

Ilustración 21 Código de Accesos a Redes Sociales


40

Ilustración 22 Home Page con los Iconos de Redes Sociales


Ilustración 23 Enlace a Red de Facebook


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: [email protected]

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/

diseño y desarrollo de una aplicación web sobre lenguaje

Documents