content

Vista previa del material en texto

ANALISIS Y ELABORACION DEL DISEÑO DE UNA APLICACIÓN WEB PARA 
CREAR LINEAS DE TIEMPO ONLINE, CASO DE ESTUDIO LINEA DE TIEMPO 
INSTITUCIONAL DE LA UNIVERSIDAD TECNOLOGICA DE PEREIRA 
 
 
 
 
 
 
 
 
 
 
JULIO CESAR OSPINA RINCON 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
UNIVERSIDAD TECNOLÓGICA DE PEREIRA 
FACULTAD DE INGENIERÍAS: ELÉCTRICA, ELECTRÓNICA, FÍSICA Y 
CIENCIAS DE LA COMPUTACIÓN 
INGENIERÍA DE SISTEMAS Y COMPUTACIÓN 
PEREIRA 
2019 
 
 
ANALISIS Y ELABORACION DEL DISEÑO DE UNA APLICACIÓN WEB PARA 
CREAR LINEAS DE TIEMPO ONLINE, CASO DE ESTUDIO LINEA DE TIEMPO 
INSTITUCIONAL DE LA UNIVERSIDAD TECNOLOGICA DE PEREIRA 
 
 
 
 
 
 
 
 
JULIO CESAR OSPINA RINCON 
 
 
 
 
 
 
Trabajo de grado presentado como requisito para optar al título de Ingeniero 
de Sistemas y Computación. 
 
 
 
 
 
 
Asesor: Ingeniero Juan de Jesús Veloza Mora 
 
 
 
 
 
 
 
 
 
 
UNIVERSIDAD TECNOLÓGICA DE PEREIRA 
FACULTAD DE INGENIERÍAS: ELÉCTRICA, ELECTRÓNICA, FÍSICA Y 
CIENCIAS DE LA COMPUTACIÓN 
INGENIERÍA DE SISTEMAS Y COMPUTACIÓN 
PEREIRA 
2019 
 
3 
 
Nota Aceptación: 
 
________________________________________ 
 
________________________________________ 
 
________________________________________ 
 
________________________________________ 
 
________________________________________ 
 
________________________________________ 
 
 
 
 
 
________________________________________ 
Firma del presidente del jurado 
 
 
 
 
 
________________________________________ 
Firma del jurado 
 
 
 
 
 
 
 
 
 
 
 
 
 
Pereira Julio de 2019 
 
 
 
4 
 
DEDICATORIA 
 
 
 
Dedico este logro a mi Familia Mis padres, mis hermanos y Madrastra, amistades 
cercanas a mi vida ya que siempre fueron personas que me animaron a seguir con 
palabras sabias y acciones en las dificultades y dudas presentadas respecto a este 
camino de la academia que tome a los 17 años de vida, un camino que si uno esta 
solo puede ser mucho más difícil que con la compañía y apoyo que dieron las 
personas que más estimo, y como forma de devolverles ese apoyo siempre trate de 
compartir mis conocimientos obtenidos y experiencias, con todas aquellas personas 
de la mejor manera y que también pudieran crecer conmigo. 
 
 
 
JULIO CESAR OSPINA 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5 
 
AGRADECIMIENTOS 
 
Quiero agradecer a todo el personal Universitario Docentes, administrativos y los 
demás cargos que hacen posible que estudiar en la Universidad tecnológica de 
Pereira sea una experiencia tan positiva y cada esfuerzo de cada persona que 
trabaja de mano con la universidad sea un granito de arena que nos permite tener 
una universidad tan especial que nunca olvidare, un agradecimiento con apretón de 
manos a todos los Docentes con que tuve la oportunidad de escuchar sus consejos 
y clases magistrales. Al ingeniero Juan de Jesús Veloza, un ingeniero humanista 
que siempre infundo en sus clases que transversal a la Ingeniería podemos ser 
sabios, fue quien me escucho en un momento de incertidumbre en la etapa final de 
mi pregrado y me colaboro guiándome en este bonito proyecto Muchas gracias. 
 
 
A todos y cada uno muchas gracias. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6 
 
CONTENIDO 
 
 
 
INTRODUCCIÓN .............................................................................................................13 
CAPITULO 1: GENERALIDADES ........................................................................................14 
1.1 FORMULACIÓN DEL PROBLEMA ....................................................................14 
1.2 JUSTIFICACIÓN ................................................................................................16 
1.3 OBJETIVOS .......................................................................................................16 
1.3.1 Objetivo general ......................................................................................................16 
1.3.2 Objetivos específicos ...............................................................................................16 
1.4 ALCANCE ..................................................................................................................17 
CAPITULO 2: MARCO TEORICO .......................................................................................17 
2.1 LAS LINEAS DE TIEMPO EN LA EDUCACION .........................................................17 
2.1.1 ¿Qué son las líneas de tiempo? ..............................................................................19 
2.1.2 Elementos de una línea de tiempo...........................................................................21 
2.1.4 Ventajas del uso de líneas de tiempo ......................................................................23 
2.1.5 Utilización de líneas de tiempo ................................................................................23 
2.1.6 Las líneas de tiempo digitales ..................................................................................24 
2.2 DESCRIPCION CASO DE ESTUDIO: LINEA DE TIEMPO INSTITUCIONAL DE LA 
UNIVERSIDAD TECNOLOGICA DE PEREIRA ...............................................................26 
2.2.1 Resumen de las diferentes herramientas disponibles para crear líneas de tiempo: .26 
2.2.2 ACCESO A LA LINEA DE TIEMPO INSTITUCIONAL UTP .....................................31 
2.2.3 DESCRIPCION DE LINEA DE TIEMPO INSTITUCIONAL UTP ..............................32 
2.2.4 FUNCIONALIDADES DE LA HERRAMIENTA ACTUAL USADA POR LA LINEA DE 
TIEMPO UTP. ..................................................................................................................36 
2.3 APLICACIONES WEB ................................................................................................48 
2.3.1 EL ORIGEN .............................................................................................................49 
2.3.2 EJERCICIO PRACTICO DE LINEAS DE TIEMPO, TEMATICA: ORIGEN DE LAS 
APLICACIONES WEB. .....................................................................................................51 
 
7 
 
2.3.1 ¿QUE SON APLICACIONES WEB? ........................................................................52 
2.3.1.1 COMPONENTES DE UNA APLICACIÓN WEB ................................................53 
2.3.1.2 PROCESO DE USUARIO EN UNA PAGINA WEB ...............................................55 
2.4 CICLO DE VIDA DEL SOFWARE ..............................................................................63 
2.4.1 CONCEPTO CICLO DE VIDA DEL SOFTWARE ....................................................65 
CAPITULO 3: ANALISIS DEL SISTEMA .............................................................................79 
3.1 MODELADO CASOS DE USO ...................................................................................80 
3.1.1 DIAGRAMAS Y DESCRIPCION CASOS DE USO ..................................................81 
3.2 MODELADO DE OBJETOS ..................................................................................... 101 
3.2.1 Diagrama de clases ............................................................................................... 101 
3.2 REQUERIMIENTOS NO FUNCIONALES ................................................................ 102 
CAPITULO 4: DISEÑO DEL SISTEMA .............................................................................. 103 
4.1.2 DISEÑO DE LA BASE DE DATOS ........................................................................ 103 
4.2.3 SCRIPTS DE LA BASE DE DATOS. ..................................................................... 104 
5. CONCLUSIONES ..........................................................................................................107 
BIBLIOGRAFÍA .................................................................................................................. 108 
 
 
 
 
8 
 
LISTA DE ILUSTRACIONES 
 
 
 
Ilustración 1: Línea de tiempo de series y películas de MARVEL………………18 
lustración 2: Línea de tiempo Evolución Política y económica. 
Fuente: EcuRed.cu …………………………………………………………………..20 
lustración 3: Línea de tiempo histórica del comercio……………………………..23 
Ilustración 4: línea de tiempo institucional UTP en 3D…………………………...30 
Ilustración 5: Pagina Universidad Tecnologica de pereira……………………….31 
Ilustración 6: Pagina Universidad Tecnologica de Pereira/vicerrectoría 
academica …………………………………………………………………………….32 
Ilustración 7: Tiki Toki Línea de tiempo UTP intro………………………………...32 
Ilustración 8: Tiki Toki Escala de tiempo UTP……………………………………..33 
Ilustración 9: Tiki Toki Login…………………………………………………………37 
Ilustración 10: Tiki Toki Menú Bienvenida Usuario………………………………..38 
Ilustración 11: Tiki Toki Formulario nueva Línea de tiempo……………………...39 
Ilustración 12: Tiki Toki Formulario nueva Línea de tiempo diligenciada……… 39 
Ilustración 13: Tiki Toki Línea de tiempo Barra desplazamiento………………...40 
Ilustración 14: Tiki Toki Línea Opcion nueva historia y aviso límite de historias 
Cuentagratuita…………………………………………………………………………41 
Ilustración 15: Tiki Toki Línea Opción Formulario historia………………………..42 
Ilustración 16: Tiki Toki Línea Opción Formulario historia diligenciado ………...42 
Ilustración 17: Tiki Toki Modificación línea de tiempo……………………………..43 
Ilustración 18: Tiki Toki Modificación historia de tiempo ………………………….44 
Ilustración 19: Tiki Toki Vista general línea de tiempo básica …………………...44 
Ilustración 20: Tiki Toki Modificando historia ……………………………………...45 
Ilustración 21: Tiki Toki Representación de historia ………………………………45 
Ilustración 22: Tiki Toki detalles de historia ………………………………………..46 
Ilustración 23: Tiki Toki visor 3D historia …………………………………………...47 
lustración 24: Leonard Kleinrock junto al primer IMP……………………………...48 
Ilustración 25: conversor de divisas provisto por el motor de búsqueda 
Google.com……………………………………………………………………………..54 
Ilustración 26: Código fuente HTML, introducción línea de tiempo UTP. 
Fuente: autor …………………………………………………………………………...57 
Ilustración 27: Portada básica usando HTML fuente: el autor. …………………...57 
Ilustración 28: código fuente portada básica hecha con HTML y CSS 
Fuente: el autor. ………………………………………………………………………. 58 
 
9 
 
Ilustración 29: un ingreso básico hecho con HTML y CSS. Fuente: el autor…….59 
Ilustración 30 : Código fuente alerta hecha usando Javascript, fuente: El autor...61 
Ilustración 31: mensaje de alerta hecho con Javascript y HTML, fuente: el autor.62 
lustración 32: Relación entre Proceso de construcción de software y el Ciclo 
de vida ……………………………………………………………………………………66 
lustración 33: Caso de uso ejemplo realizar pedido ………………………………...70 
lustración 34: Diagrama de secuencia ejemplo realizar pedido …………………...72 
lustración 35: Diagrama de clases terceros empresa ………………………………74 
lustración 36: Modelo entidad relación ejemplo reserva pedido 
fuente: https://es.wikipedia.org/wiki/Modelo_entidad-relación ...............................78 
Ilustración 27: Portada básica usando HTML fuente: el autor. 57 
Ilustración 37: Diagrama caso de uso registro………………………………………..81 
Ilustración 38: Diagrama caso de uso modificar datos usuario……………………..83 
Ilustración 39: Diagrama caso de uso crear línea de tiempo………………………..85 
Ilustración 40: Diagrama caso de uso administrar líneas de tiempo………………..87 
Ilustración 41: Diagrama caso de uso crear historia …………………………………90 
Ilustración 42: Diagrama caso de uso administrar historias………………………….92 
Ilustración 43: Diagrama caso de uso crear categorías………………………………95 
Ilustración 44: Diagrama caso de uso administrar categorías……………………….97 
Ilustración 45: Diagrama de clases. ……………………………………………………101 
Ilustración 46: Diagrama de base de datos…………………………………………....103 
 
 
 
LISTA DE TABLAS 
Tabla : tabla comparativa de herramientas más llamativas para crear líneas de 
tiempo Fuente: PEI………………………………………………………………………. 
Tabla 2: tabla Requerimientos evidentes………………………………………………80 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10 
 
 
GLOSARIO 
 
 
Análisis1 : Fase del ciclo de desarrollo de sistemas que consta de dos tareas: llevar 
a cabo una investigación preliminar y realizar un análisis detallado. En esta etapa los 
analistas se encargan de analizar los requerimientos del sistema (a veces se incluye 
en esta etapa la recolección de requerimientos también). Esta etapa centra su 
atención en la interacción de los usuarios con el sistema. 
 
Aplicación1 : Software que utiliza un computador para llevar a cabo tareas; también 
se le conoce como programa. 
 
Base de datos1 : Conjunto de datos relacionados que se almacenan de forma que 
se pueda acceder a ellos de manera sencilla, con la posibilidad de relacionarlos, 
ordenarlos en base a diferentes criterios, etc. Las bases de datos son uno de los 
grupos de aplicaciones de productividad personal más extendidos. 
 
Diseño1 : El proceso de Diseño es un conjunto de pasos repetitivos que permiten al 
diseñador describir todos los aspectos del Sistema a construir. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1 Gonzáles Alvares, B., & Quintero Cárdenas, J. (2010). Análisis, diseño e implementacion de un 
sistema informático para el apoyo del proceso de asignación de la carga académica usando 
programacion con restricciones (Pregrado). Universidad Tecnológica de Pereira. 
 
 
11 
 
ACCESIBILIDAD2: Acceso universal a la Web, independientemente del tipo de 
hardware, software, infraestructura de red, idioma, cultura, localización geográfica y 
capacidades de los usuarios. 
 
APACHE2: El servidor HTTP Apache es un servidor web HTTP de código abierto, 
para plataformas Unix (BSD, GNU/Linux, etc.), Microsoft Windows, Macintosh y 
otras, que implementa el protocolo HTTP/1.12 y la noción de sitio virtual. 
 
CÓDIGO FUENTE2: Conjunto de líneas de texto que son las instrucciones que debe 
seguir la computadora para ejecutar dicho programa. Por tanto, en el código fuente 
de un programa está descrito por completo su funcionamiento. 
 
DOMINIO2: Es el nombre que identifica un sitio web. Cada dominio tiene que ser 
único en Internet. Por ejemplo, "www.misitio.com" es el nombre de dominio de la 
página web de Mi sitio. 
 
ENLACE2: Es un elemento de un documento electrónico que hace referencia a otro 
recurso, por ejemplo, otro documento, un punto específico del mismo o de otro 
documento. 
 
ESTÁNDAR2: Es la redacción y aprobación de normas que se establecen para 
garantizar el acoplamiento de elementos construidos independientemente, así como 
garantizar el repuesto en caso de ser necesario, garantizar la calidad de los 
elementos fabricados, la seguridad de funcionamiento y trabajar con responsabilidad 
social. 
 
MENÚ2: Elección que tiene que hacer una persona entre un conjunto de 
posibilidades. 
 
NAVEGAR2: Desplazarse por todas las páginas de un sitio web, pasar de un sitio a 
otro por medio de enlaces o links. 
 
NAVEGABILIDAD2: Es la facilidad con la que un usuario puede desplazarse por 
todas las páginas que componen un sitio web 
 
 
PAGINA WEB2: Es un documento creado en formato HTML (Hypertext Markup 
Language) que es parte de un grupo de documentos o recursos disponibles en el 
World Wide Web. Una serie de páginas web componen lo que se llama un sitio web 
 
 
 
 
12 
 
USABILIDAD2: Capacidad de un software o sistema interactivo de ser comprendido, 
aprehendido, usado fácilmente y atractivo para un usuario, en condiciones 
específicas de uso. También es la efectividad, eficiencia y satisfacción con la que un 
producto permite alcanzar sus objetivos específicos 
 
W3C2: World Wide Web Consortium, es un consorcio internacionaldonde las 
organizaciones pertenecientes, personal a tiempo completo y el público en general, 
trabajan conjuntamente para desarrollar estándares web. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1 Barrera Cañas, J., & Arbelaez Rios, A. (2012). REESTRUCTURACIÓN SITIO WEB: PROGRAMA 
DE INGENIERÍA DE SISTEMAS Y COMPUTACIÓN DE LA UNIVERSIDAD TECNOLÓGICA DE 
PEREIRA (Pregrado). Universidad Tecnologica de Pereira 
 
13 
 
INTRODUCCIÓN 
 
 
El presente trabajo tiene como propósito cumplir con dos metas, cada una de igual 
importancia. La primera es realizar un documento que respalde el cumplimiento y 
desarrollo del proyecto de grado como un requisito para obtener el titulo de 
ingeniero de sistemas. La segunda, como lo indica el titulo de este documento, es 
poder realizar un avance del Proyecto educativo institucional que tiene como uno de 
los componentes la línea de tiempo institucional con la debida asesoría del director 
de proyecto. Sobre el análisis y diseño de una aplicación web propia para crear 
líneas de tiempo online y no usando versiones gratuitas de aplicaciones premium. 
 
 
En el primer capitulo titulado Generalidades, se encuentran aspectos generales 
como lo es la descripción del problema, la justificación, los objetivos, el alcance; 
estos aspectos son el primer análisis de la situación que da origen a este proyecto. 
 
En el segundo capitulo Marco Teórico expone la teoría que soporta el proyecto de 
investigación. Esta sección, ubica al lector en un marco más general dándole las 
bases teóricas para mejorar su comprensión de los temas tratados y términos del 
proyecto, en este capítulo también se describe la línea de tiempo actual de la 
universidad herramienta usada y descripción de sus funcionalidades prestadas a la 
universidad. 
 
 
El tercer capitulo muestra cómo se aplican técnicas de modelado y análisis de 
sistemas y requerimientos mediante UML, este análisis es mas general desde los 
sistemas y no desde una descripción especifica como la que se muestra en el 
segundo capitulo que se describen funcionalidades de una manera especifica 
 
El ultimo capitulo muestra un diseño de base de datos propuesto y optimo que 
puede crecer a través del tiempo, también se define la arquitectura del sistema. 
 
 
Finalmente, el escrito concluye con la presentación de una serie de conclusiones y 
material bibliográfico. 
 
 
 
 
 
 
14 
 
CAPITULO 1: GENERALIDADES 
 
1.1 FORMULACIÓN DEL PROBLEMA 
 
La acelerada evolución de las tecnologías de la información acompañado también 
del crecimiento documental en cualquier ámbito de la vida ha permitido la aparición 
de nuevas tecnológicas y productos que permitan gestionar la documentación de 
una manera electrónica y poder acceder a esta de manera más fácil y organizada, 
que al contrario de documentación física ocupa muchas veces más espacio, se 
deteriora a través de los años si no se usan técnicas y espacios diseñados para su 
conservación el almacenamiento físico de los documentos tiene tanto como algunas 
desventajas nombradas pero también ventajas lo mismo ocurre para la 
documentación electrónica, por ejemplo la documentación electrónica si no se 
aplican buenas prácticas de seguridad y copyright puede ser pirateada de una 
manera fácil, entre otras. 
 
Cada vez es mucho más difícil para casi cualquier persona, empresa o institución 
encontrar metodologías para organizar y soportar el aumento sus documentos 
físicos. Esto ha obligado a asimilar las grandes novedades tecnologías y más que 
asimilar se considera que ya es casi que una necesidad poder contar con un 
producto tecnológico que supla una necesidad especifica documental, ya que hoy en 
día no solo necesitamos una tecnología que guarde solamente nuestros 
documentos sino además que permita organízalos de una manera estratégica. 
 
Por un lado, se encuentra el mundo tecnológico basado en documentos maneja 
conceptos como archivos electrónicos, e-mails etc. y este mundo es dominado por 
especialistas de tecnologías de la información, ingenieros de sistemas, electrónicos 
y las telecomunicaciones. 
 
Por el otro lado se encuentra mundo de la teoría y práctica de la gestión de 
documentos y también usa técnicas archivísticas modernas y se basan en el ciclo 
vital del documento físico estas teorías ha sido desarrolladas por los grandes 
archiveros. 
 
Puede ser natural pensar que estos dos mundos deben ir en uno solo o mínimo 
complementarse, pero no, Carlota Bustelo Ruesta1 dice: estos mundos deberían ser 
 
15 
 
complementarios a la hora de implantar un sistema de gestión de documentos, pero 
por alguna razón de desconocimiento mutuo y falta de dialogo entre estos dos 
mundos están cada vez más separada dos. Y es sorprendente que en el desarrollo 
e implementación de un sistema de gestión documental no se cuente en su mayoría 
por especialistas documentales e igualmente sorprendente que siguen publicando 
manuales de la gestión de la documentación que abordan los mencionados 
sistemas resolviéndolos solo en capítulos o apartes tangenciales llamados 
generalmente “Nuevas Tecnologías”. 
 
Según el tipo persona, empresa o institución pueden darle a su documento valor 
invaluable según su contenido, por ejemplo, en nuestro país las organizaciones 
jurídicas del estado en su mayoría mantienen sus documentos de una manera 
manual y esto implica que la organización pierda tiempo, espacio, seguridad y esto 
aumenta los costos de la organización, ya que la confiabilidad es su valor 
documental y esta primordialmente debe mantenerse. 
 
Esta organización es diferente por ejemplo de una universidad que les da valor a 
sus documentos dependiendo de cómo estén organizados y que permitan dar 
conocimiento a las personas ya sea sobre contar la historia de la universidad 
mediante documentos, y presentar estos de una manera didáctica a la comunidad 
estudiantil o cualquier persona en este caso el valor del documento seria de cómo 
se presenta su contenido al público de una manera didáctica académica. 
 
En el caso de estudio que nos interesa en este proyecto la universidad tecnológica 
de Pereira desde su inicio en 1958 a través de los años se han conservado 
diferentes documentos que representa hitos históricos de la institución como por 
ejemplo el documento redactado en 1958 que declara formalmente que la se crea la 
universidad Tecnológica de Pereira, es un documento muy valioso para la 
universidad. 
 
La universidad se vio en la necesidad de organizar estos documentos de una 
manera que estos le den un significado y soporte documental a la línea de tiempo 
institucional histórica, 
como la universidad no cuenta con una aplicación web propia que le permita 
administrar su línea de tiempo institucional, por esta razón, se han utilizado 
diferentes aplicaciones de acceso gratuito que permite organizar la línea de tiempo 
de la manera adecuada por fechas de los hitos y categorías de documentos. 
 
 
 
 
 
16 
 
1.2 JUSTIFICACIÓN 
 
Actualmente la universidad tecnología administra su línea institucional en la 
aplicación de acceso gratuito llamada Tiki-Toki esta se eligió entre otras aplicaciones 
gratuitas por medio de un estudio de selección de tecnologías realizado en la 
actualización del Proyecto Educativo Institucional-PEI donde se compararon las 
siguientes características entre ellas Sencilla, Si era o no online, Multiusuario, si 
era premium, integración web e idioma. 
 
 
Aunque la aplicación seleccionada cumple con las funcionalidades deseadas por los 
funcionarios institucionales que administran la línea de tiempo institucional, estas 
aplicaciones libres contienen publicidad que hace que se salga del contexto 
académico, también han presentado algunos problemas tales como como perdida 
de información y del trabajo dispendioso que hacen los funcionarios para organizarlos documentos históricos institucionales. 
Por esta razón la universidad se ve en la necesidad de contar con su propia 
aplicación web que le permita administrar su línea de tiempo salvaguardándola sin 
esta verse afectada por problemas externos de la aplicación gratuita usada en un 
futuro como ya ha pasado con otras. 
 
1.3 OBJETIVOS 
 
1.3.1 Objetivo general 
Diseñar una aplicación web que permita administrar y visualizar la línea de tiempo 
institucional de una manera didáctica en la universidad tecnológica de Pereira. 
 
1.3.2 Objetivos específicos 
• Aplicar técnicas de levantamiento de requerimientos de software con las 
aplicaciones usadas anteriormente por la línea de tiempo institucional, así 
como a los funcionarios institucionales encargados de administrar la línea 
de tiempo institucional. 
 
• Diseñar un modelo para la implementación de una aplicación web mediante 
lenguaje UML. 
 
 
17 
 
 
1.4 ALCANCE 
 
El proyecto va a ser desarrollado en las dos primeras fases respectivas del ciclo de 
vida del software las cuales son análisis, diseño, este proyecto se enfocó únicamente 
en la línea de tiempo institucional UTP, sin embargo no significa que el software 
desarrollado a partir de este diseño no se pueda aplicar en otras áreas o tareas, como 
por ejemplo la educación de asignaturas usando líneas de tiempo, realizar la 
trazabilidad de hitos de algún proyecto institucional, básicamente el uso de este 
software estaría limitado solamente a la imaginación. 
El diseño y propuesta tecnológica de desarrollo se realizará entre el período 
comprendido entre el mes de mayo de 2019 hasta el mes de julio de 2019 y se va a 
realizar en la ciudad de Pereira con la dirección de docentes y colaboración del 
proyecto educativo institucional PEI la oficina de la universidad tecnológica de 
Pereira. 
 
CAPITULO 2: MARCO TEORICO 
2.1 LAS LINEAS DE TIEMPO EN LA EDUCACION 
 
 
En la educación existen diversas convenciones para "medir" los acontecimientos 
históricos según su duración, como los procesos, hechos o sucesos. Sin embargo, a 
pesar de que la periodización del tiempo ordena el acontecer histórico, para la mente 
humana es muy difícil imaginar la temporalidad porque implica un alto grado de 
abstracción. 
 
El tiempo es una dimensión de la que no podemos escapar. Más bien nos movemos 
en ella, paso a paso. Y cuando no sabemos adónde ir, tal vez es bueno mirar lo que 
caminamos. Entonces, queremos reconstruir lo que andamos. 
 
La forma más sencilla y clara de entender el tiempo histórico es "viéndolo". Si 
"plasmamos" el tiempo en una imagen se puede adquirir mayor conciencia del 
transcurso temporal. Las líneas del tiempo se utilizan precisamente para 
entender, a través de la visualidad, el tiempo histórico. 
 
 
 
18 
 
Muchas son las formas de la memoria. La memoria se puede ejercitar haciendo 
la reconstrucción de las situaciones o eventos o sucesos en un período de 
tiempo. Esa reconstrucción recibe el nombre de línea del tiempo cuando los 
sucesos se colocan uno tras otro según el orden en que acontecieron, 
empezando por el más antiguo y llegando al más nuevo. 
 
Línea del tiempo, es una serie de divisiones temporales, que se establecen para 
poder comprender a través de la visualidad, el conocimiento histórico y los 
acontecimientos según su duración. Es lo que conocemos como eras, períodos y 
épocas históricas, las cuales abarcan todo lo sucedido desde la aparición de la 
humanidad hasta este preciso momento. 
 
En el ámbito educativo de la línea de tiempo, que es el que nos interesa en este 
proyecto, la línea de tiempo es una técnica de aprendizaje para que los estudiantes 
se ubiquen en el tiempo ya sea en su propio contexto personal, familiar, local o con 
hechos y procesos de la historia regional, nacional y mundial y puedan caracterizar 
los procesos históricos en función de periodos, etapas o aspectos. 
 
 
Ilustración 1: Línea de tiempo de series y películas de MARVEL. 
 
 
19 
 
 
En casos de hechos ficticios como películas, series y otros contenidos que no 
contemos con su fecha exacta la dirección está dada por los hechos que por lógica 
sucedieron antes que otros por ejemplos muchas personas se han preguntado, que 
debería estudiar primero para mi examen para entender mejor, una solución 
adecuada antes de usar contenido seria buscar primer la línea de tiempo 
correspondiente de la temática eso permite darnos a nosotros mismos una dirección 
y abstracción del tema y por tal motivo entender mejor, que hacerlo de la manera 
típica de buscar todo el contenido e ir leyendo lo que podamos entender sin saber de 
pronto que haberlo hecho en orden nos hubiera ayudado a entenderlo todo, o tan 
simple como saber en qué orden ver entretenimiento en el orden correcto nos ayuda 
a tener una mejor experiencia, alguien que quiera entender las películas de los 
Avengers que actualmente es muy popular y ponerse al día, tendría que ver las 
películas en su orden correcto. 
 
 
 
 
 
 
 
 
2.1.1 ¿Qué son las líneas de tiempo? 
 
Las líneas del tiempo son mapas conceptuales que, de manera gráfica y evidente, 
ubican la situación temporal de un hecho o proceso, del periodo o sociedad que se 
estudia. 
 
Estas líneas son una herramienta de estudio que permite "ver" la duración de los 
procesos, la simultaneidad o densidad de los acontecimientos, la conexión entre 
sucesos que se desarrollaron en un tiempo histórico determinado y la distancia que 
separa una época de otra. 
 
Una línea del tiempo es un ejercicio de la memoria, y también es un ejercicio de otras 
capacidades, como la de organizar la información según criterios cronológicos, la de 
distinguir sucesos basados en relaciones de causa-efecto o la de representar una 
serie cronológica a través de formatos visuales. 
 
 
 
20 
 
Hay distintos tipos de líneas del tiempo. Las que abarcan largos periodos y por lo 
tanto expresan generalidades, mientras otras son muy específicas y detallan hechos 
puntuales. Hay líneas del tiempo de un año, una vida, una época, un periodo de pocos 
años o de miles de ellos. También hay líneas del tiempo temáticas: de historia política, 
cultural, artística, etc... 
Algunos ejemplos específicos de estas temáticas pueden ser el inicio y fin de una 
guerra, al año en que se decreta una ley o se inventa una máquina, al periodo que 
abarca una revolución, al momento de auge de una corriente de pensamiento, al 
lapso que comprende el desarrollo de una manifestación cultural como el cristianismo 
o bien, un sistema económico-como el del capitalismo-, entre muchos más. 
 
En algunos casos se le pueden dar distintas formas a las líneas del tiempo con el fin 
de expresar alguna idea, por ejemplo, las nociones de "progreso", de "evolución", o 
bien de "esplendor" o "decadencia". 
 
 
 
 
lustración 2: Línea de tiempo Evolución Política y económica. 
Fuente: EcuRed.cu 
 
 
En la ilustración anterior podemos observar que se usó un mismo lapso dos veces, 
en el primero se usó para la temática política y en la segunda se usó para la temática 
economía, esto para darle orden y sentido ya que si se pusieran las temáticas juntas 
(se podría), generaría desorden sin una estrategia de presentación de la línea de 
tiempo. 
 
21 
 
 
Para este ejemplo y sin profundizar mucho en él, una estrategia de presentación seria 
diferenciar con colores los textos pertenecientes a una temática y usar una única 
línea de tiempo para las dos temáticas. 
 
2.1.2 Elementos de una línea de tiempo 
 
Existen un conjunto de elementos que deben ser considerados para la utilización de 
una línea del tiempo como estrategia para la enseñanza: 
 
a. La dirección: al colocar una fecha de inicio y de final, nos indica la orientación de 
los acontecimientos anteriores y posteriores en el 
período que estudiamos. 
 
b. La escala: es la divisiónde la línea, es decir, los intervalos que existen en 
determinado período, por lo tanto, deben ser iguales en toda la línea de tiempo. Con 
ello, podemos apreciar el nivel de detalle de esta línea. 
 
c. La forma de representar los puntos: cada punto marca un evento, el cuál puede 
ser descrito de varias maneras: 
• textual (una frase o un texto o documento oficial): 
• gráfica (con una foto, un dibujo o un símbolo) 
• multimedia, al colocar un video o audio, lo cual sólo puede 
 
d. La forma de distinguir información en cada punto y entre cada punto para marcar 
la importancia relativa de la información que se coloca, es decir, distinguir entre lo 
esencial y el detalle o complemento. 
 
e. La finalidad pedagógica: es la intención de emplear la técnica en un contexto 
determinado, para conseguir un efecto en el aprendizaje. Una línea del tiempo pude 
utilizarse: 
• Para que los estudiantes se ubiquen en el tiempo como actores de 
su: historia personal, familiar, local y nacional 
• Para que ubiquen, relacionen y comparen en el tiempo hechos y 
procesos de la historia regional, nacional y mundial. 
• Para que caractericen procesos históricos en función de períodos, 
etapas u otros aspectos. 
 
 
 
 
22 
 
2.1.3 ¿Cómo elaborar una línea de tiempo? 
 
Para elaborar una línea de tiempo, primero deberás leer previamente una unidad 
temática, seleccionar los aspectos que necesitas representar y registrar el momento 
en el cual ocurrieron. Toma en cuenta que dichos aspectos pueden referirse al inicio 
o fin de una guerra, al año en que se decreta una ley o se inventa una máquina, al 
periodo que abarca una revolución, al momento de un auge de una corriente de 
pensamiento, un lapso que comprende el desarrollo de una manifestación cultural 
como el cristianismo o bien, un sistema económico como el capitalismo, entre 
muchos más. 
Después de haber realizado la lectura y la selección de los aspectos a representar 
sigue estos pasos: 
 
1. Determinar la primera y última fecha a representar 
2. Decide la escala de medición que utilizaras (mes, años, ilustros, décadas, 
siglos, etc.) 
3. Traza una línea recta horizontal de derecha a izquierda y señala las marcas 
temporales de acuerdo con la escala de medición que utilizaras. 
4. Escribe sobre la línea palabras e ideas claves que se refieran a los aspectos 
seleccionados; estos deben estar registrados en estricto orden cronológico. 
5. Es recomendable que utilices diferentes tipos de líneas o colores para 
distinguir cada periodo o acontecimiento histórico, con el fin de que logres una 
mayor ubicación de los datos en el tiempo. También puedes incluir 
ilustraciones. 
 
Ejemplo de una línea de tiempo de una línea de tiempo en la que se registran 
básicamente las características económicas de las edades o etapas de la historia-
periodo. 
 
 
 
23 
 
 
lustración 3: Línea de tiempo histórica del comercio 
 
En el ejemplo presentado podemos descomponer los elementos de la línea de 
tiempo. 
 
La dirección: Comprende la línea que va desde 3500 a. C hasta 1789 en adelante. 
La escala: La escala está configurada en años, agrupados por periodos. Por ejemplo, 
el periodo de la edad media es mayor que la edad moderna. 
La Forma de representar los Puntos: Los puntos están representados en forma 
textual simple, en esta línea de tiempo únicamente representa que la forma de 
economía Truque está dentro del periodo de la edad antigua no es una línea de 
tiempo imprecisa, pero que respeta el orden cronológico y con eso es suficiente. 
La Forma de distinguir información: La información se distingue con cuadros de 
diferentes colores que resalta la transición de un periodo a otro. 
 
2.1.4 Ventajas del uso de líneas de tiempo 
 
Mediante la utilización de las líneas de tiempo, el lector será capaz de: 
• Recuperar saberes previos, de manera ordenada y cronológica 
• Desarrollar series de acontecimientos, reforzando la capacidad de 
organizar hechos en secuencias coherentes 
• Evaluar su capacidad de recordar sucesos en orden. 
• Profundizar en un período de tiempo determinado, al detallar y articular 
los hechos que lo componen 
 
2.1.5 Utilización de líneas de tiempo 
 
 
 
24 
 
Con la finalidad de diversificar las estrategias de enseñanza, es posible buscar 
muchas ideas para proponer el trabajo con una línea del tiempo, como: 
• El desarrollo de una biografía (real o inventada) 
• Una guía turística con un apartado dedicado a la historia de la localidad 
• La evolución de un movimiento literario 
• La evolución de la obra de un escritor 
• El desarrollo de los hechos de una novela, de un relato, etc. 
 
La utilización de líneas de tiempo se ha aprovechado más en el ámbito académico, 
Sin embargo, las líneas tienen muchas aplicaciones en la industria como por ejemplo 
hitos de productividad de una empresa, características históricas de un producto o 
software o empleado, etc. 
 
2.1.6 Las líneas de tiempo digitales 
 
La línea de tiempo no es una herramienta tecnológica, es una técnica de aprendizaje, 
la tecnología lo que ha hecho como hace lo hace en casi cualquier ámbito es 
potenciar esta técnica y desarrollar herramientas, desde utilizar Excel que puede 
hacer una línea de tiempo funcional hasta herramientas propiamente diseñadas para 
crear líneas de tiempo más detalladas y potentes. 
 
Es posible elaborar líneas de tiempo con software general, como una hoja de 
cálculo, procesador de texto o de presentaciones. 
 
 
 
Ejemplo de línea del tiempo hecha con Microsoft Excel 
 
25 
 
 
Excel es una de las herramientas más usadas en el mundo desde el ámbito educativo 
hasta el empresarial, ya que esta nos permite ordenar cualquier tipo de información 
de manera personalizada, sin embargo, si por nuestra información necesita ser 
visualidad por muchas personas debemos presentar la información de manera 
interactiva e intuitiva por ejemplo una compañía quiere que sus empleados puedan 
ver desde la fundación hasta la actualidad de la empresa en una la línea de tiempo, 
en este caso crear una línea de tiempo en Excel no sea intuitivo ni interactivo, esta 
herramienta se quedaría corta y debemos recurrir al desarrollo de software o buscar 
una herramienta gratuita o pago que cumpla con las necesidades de cómo queremos 
presentar nuestra información para cualquier persona. 
 
Una línea de tiempo hecha en Excel podría ser funcional si por ejemplo un estudiante 
está creando una línea de tiempo de un proyecto propio para ordenar sus ideas, ya 
sea porque no tiene claro la cronología del tema u otro motivo, la línea de tiempo le 
ayudaría a entender el tema y darle calidad a su proyecto, en este caso sería útil 
desarrollar una línea de tiempo en Excel, ya que la forma en que esta ordenada la 
información solo interesa únicamente la entienda el estudiante. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26 
 
 
 
 
2.2 DESCRIPCION CASO DE ESTUDIO: LINEA DE TIEMPO INSTITUCIONAL DE 
LA UNIVERSIDAD TECNOLOGICA DE PEREIRA 
 
En esta sección haremos un recorrido de la línea institucional que actualmente está 
activa en la dirección de internet https://www.tiki-
toki.com/timeline/entry/497004/UNIVERSIDAD-TECNOLGICA-DE-PEREIRA-
CONSTRUYENDO-REGIN/ , para conocer como está diseñada sus componentes y 
también conocer las funcionalidades que presta la herramienta escogida tikitoki 
mediante la actualización del PEI . 
Esta herramienta se escogió mediante la comparación de diferentes herramientas del 
mismo tipo a continuación se muestran los resultados de la investigación de las 
herramientas disponibles realizada por la actualización del proyecto educativo 
institucional. 
 
2.2.1 Resumen de las diferentes herramientas disponibles para crear líneas de 
tiempo: 
 
1. Timeline. Sencilla, rápida e intuitiva, esta aplicación ayuda a crear líneas de tiempo 
paso a paso, organizadas porfechas o hitos. Solo hay que ir situando los hechos 
destacados sobre el eje temporal e incluir un texto y una imagen (opcional). Se puede 
guardar el proyecto para abrirlo y continuar en otro momento, o descargar el resultado 
final en PDF. Perfecto para un primer contacto con la elaboración online de ejes 
temporales y aprender a utilizarlo rápidamente. 
2. Dipity. Permite crear líneas de tiempo interactivas y online muy completas con 
fichas que se expanden al hacer clic en ellas, se pueden incluir videos, audios, 
imágenes, texto, enlaces o geolocalizaciones. Además, puedes compartirlas e 
interactuar con otros usuarios, o configurarlas para que se actualicen 
automáticamente con la información de un feed de RSS determinado. Hay una 
versión premium pero la gratuita tiene todas las funcionalidades básicas. 
3. Timeline JS. Su interfaz es menos intuitiva, ya que requiere usar una hoja de 
cálculo de Google Spreadsheet en la que se introducen los textos e imágenes. Sin 
embargo, genera líneas de tiempo muy visuales y completas que pueden integrarse 
en páginas web con un simple código. 
4. TimeRime. Otra opción útil para crear líneas de tiempo disponibles online, en 
español y basada en imágenes. Aunque el diseño de las líneas creadas es muy 
https://www.tiki-toki.com/timeline/entry/497004/UNIVERSIDAD-TECNOLGICA-DE-PEREIRA-CONSTRUYENDO-REGIN/
https://www.tiki-toki.com/timeline/entry/497004/UNIVERSIDAD-TECNOLGICA-DE-PEREIRA-CONSTRUYENDO-REGIN/
https://www.tiki-toki.com/timeline/entry/497004/UNIVERSIDAD-TECNOLGICA-DE-PEREIRA-CONSTRUYENDO-REGIN/
 
27 
 
sobrio, el resultado es más que suficiente. Se sitúan las fotografías en la línea de 
tiempo y al pasar el ratón sobre aquellas se muestra la información. Tiene varios 
planes de pago, el servicio ofrece la opción de crear una cuenta gratuita para sus 
propias líneas de tiempo. Permite integrar el resultado en una página personal, 
compartir el enlace e incluso imprimirla directamente desde el navegador. Ideal para 
los profesores 
5. Tiki-Toki. Una herramienta que tiene muy en cuenta la estética e incluso permite 
hacer ejes temporales en tres dimensiones. Hay una versión gratuita que permite 
crear un timeline por cuenta y diversas opciones de pago. 
6. MyHistro. Una divertida combinación de mapas y líneas de tiempo, perfecta para 
narrar historias o hechos que suceden en diferentes localizaciones. Al finalizar 
puedes descargar el resultado en PDF, exportarlo como mapa de Google Earth y 
también incrustarlo en un blog o página web. 
7. Capzles: Con esta aplicación web se tiene todo lo que se necesita para crear líneas 
de tiempo multimedia con vídeos, fotografías y audio de fondo con música o una 
narración hablada. Sus opciones para compartir la línea de tiempo son muy variadas, 
es posible integrarla en páginas web o compartirla por correo electrónico, Facebook, 
Twitter o Delicious. 
8. Timetoast: Si se busca algo más clásico, Timetoast crea líneas de tiempo con 
puntos que muestran texto e imágenes al pasar el ratón por encima. Permite 
integrarlas en páginas personales o compartirlas por Facebook o Twitter. En este 
caso, además de se tiene una segunda vista en forma de tabla con las fechas y el 
texto, mucho más práctico en el caso de contar con textos extensos. 
9. Office Timeline: Se trata de un complemento para Powerpoint que ofrece plantillas 
y las herramientas necesarias para crear líneas de tiempo desde esta herramienta 
de presentaciones tan popular. Está disponible en versión gratuita y de pago, se 
integra perfectamente en Powerpoint. 
10. Rememble: Similar a Capzles, pero con un aire más desenfadado, Rememble 
crea líneas de tiempo interactivas con vídeo, fotografía, texto y prácticamente 
cualquier elemento que se pueda imaginar. Además, facilita el trabajo en equipo para 
crear líneas de tiempo entre dos o más personas. 
11. Xtimeline: Si se necesita algo más sencillo, Xtimeline cumplirá con estas 
expectativas, ya que ofrece la posibilidad de crear líneas de tiempo muy sencillas, 
con texto solamente o poca presencia de las imágenes. En cualquier caso, permite 
crear un listado de eventos que, al hacer clic, muestra una ficha con información 
ampliada. 
12. Timeglider: Crea líneas de tiempo clásicas, con fechas concretas, periodos de 
tiempo, símbolos y fichas explicativas con la opción de incluir también fotografías y 
poco más. La versión gratuita es para estudiantes, con planes de pago para 
 
 
28 
 
profesores y grupos numerosos. Es posible integrar la línea de tiempo en páginas 
web o compartirla a partir del enlace URL. 
13. Timelinr. Crea líneas de tiempo, muestra el texto solamente. 
14. Our Timelines. Crea líneas de tiempo mediante el uso de formas preexistentes 
(sólo texto). 
15. Read Write Think. Crea líneas de tiempo únicamente con texto. 
 
Cada una de estas herramientas posee muchas o pocas características diferentes 
también en algunas se habla de aplicaciones de diseño intuitivo, así como otras 
herramientas que no lo son. De este resumen de herramientas se podrían obtener 
ideas de que componentes podría contener nuestra aplicación. 
 
 
 
 
 
Herramien
ta 
Sencill
a 
Online Multiusuar
io 
Premiu
m 
Integraci
ón web 
Españ
ol 
Timeline X X 
Dipity X X X 
Timeline 
JS 
 X 
(Requier
e 
Google) 
 X 
TimeRime X X X X 
Tiki-Toki X X X 
MyHistro X X 
Capzles X X 
Timetoast X X 
Office 
Timeline 
 X X 
Rememble X X X 
Xtimeline X X 
Timeglider X X X 
Ouro 
Timelines 
X X 
 
29 
 
Read 
Write 
Think 
X X 
Tabla : tabla comparativa de herramientas más llamativas para crear líneas de 
tiempo 
Fuente: PEI 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
El proceso de selección realizado tomo en cuenta características fundamentales de 
las herramientas, como se sabe anteriormente Tiki-toki fue la elegida ya que aparte 
de cumplir con los requisitos básicos, como estar online, tiene un plus y es su estética 
ya que es la única de las herramientas nombradas que hace posible visualizar 
nuestra línea de tiempo en 3 dimensiones como si estuviéramos inmersos en un viaje 
temporal aumentando el realismo para el lector, es una manera innovadora de 
presentar una línea de tiempo y esto en la educación es fundamental ya que, 
dependiendo de cómo se presenta un contenido académico en este caso histórico 
puede hacer más o menos interesante este. 
 
 
 
 
30 
 
 
Ilustración 4: línea de tiempo institucional UTP en 3D. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31 
 
2.2.2 ACCESO A LA LINEA DE TIEMPO INSTITUCIONAL UTP 
 
Se puede ingresar desde la página de la universidad www.utp.edu.co, eligiendo la 
sección vicerrectoría académica. 
 
 
 
Ilustración 5: Pagina Universidad Tecnológica de Pereira. 
 
 
 
Luego desplegamos las opciones que ofrece el proyecto educativo institucional PEI 
allí encontraremos el ítem Línea de tiempo institucional, damos click y esta opción 
nos direccionara https://www.tiki-toki.com/timeline/entry/497004/UNIVERSIDAD-
TECNOLGICA-DE-PEREIRA-CONSTRUYENDO-REGIN/. 
 
http://www.utp.edu.co/
https://www.tiki-toki.com/timeline/entry/497004/UNIVERSIDAD-TECNOLGICA-DE-PEREIRA-CONSTRUYENDO-REGIN/
https://www.tiki-toki.com/timeline/entry/497004/UNIVERSIDAD-TECNOLGICA-DE-PEREIRA-CONSTRUYENDO-REGIN/
 
 
32 
 
 
Ilustración 6: Pagina Universidad Tecnológica de Pereira/vicerrectoría académica 
Cualquier persona que tenga la dirección web de la línea de tiempo institucional UTP 
podrá visualizarla sin importar que este o no vinculado directamente a la universidad, 
solo necesita acceso a internet y un navegador web instalado en su dispositivo móvil 
o pc. 
 
 
Ilustración 7: Tiki Toki Línea de tiempo UTP intro 
 
 
2.2.3 DESCRIPCION DE LINEA DE TIEMPO INSTITUCIONAL UTP 
 
La línea de tiempo institucional UTP contiene los hechos históricos desdela creación 
de la universidad tecnológica hasta la actualidad, la marcación de estos hechos 
 
33 
 
históricos en la línea de tiempo contiene un título y en su detalle una descripción y 
contenido multimedia, adicionalmente se crearon unas categorías para clasificar los 
hechos históricos y darles un mejor contexto. 
 
 
Podemos resaltar los componentes de la línea de tiempo UTP, así como lo realizamos 
en ejemplos anteriores. 
 
La dirección: Comprende la línea que va desde1958 (creación de la universidad) 
hasta 2019 en adelante. 
 
 
 
 
 
 
La escala: La escala está configurada en años marcando cada 5 años el número y 
acompañado de unas líneas más pequeñas que permiten indicar, con más exactitud 
eventos ocurridos entre la marcación así: 
 
 
Ilustración 8: Tiki Toki Escala de tiempo UTP 
 
 
La Forma de representar los Puntos: 
Los puntos están representados de dos maneras uno que es el punto dentro de la 
escala de tiempo con un color de acuerdo con la categoría del hito se puede apreciar 
en la ilustración anterior, este punto sirve para ubicar el hito de una manera más 
amplia en la escala y para ver la concentración de hitos en un lapso, también está 
representado con una etiqueta ubicada en una banda de color de acuerdo con la 
categoría. 
 
 
 
34 
 
 
 
 
 
La Forma de distinguir información: 
La información se distingue mediante categorías que le dan un contexto al hito, este 
se encuentra en la franja que le corresponde. 
 
Las categorías son: 
1. Internacionalización 
Esta categoría se refiere a como la universidad a través de los años se ha 
aumentado su reconocimiento internacional institucional o alcance 
internacional para su comunidad estudiantil ya sea por investigaciones, 
acreditaciones o convenios. 
 
No fue sino hasta el año 2000 que la universidad tecnológica, desde su 
creación que pudo empezar a trabajar en la internacionalización de la 
universidad creando la unidad de relaciones internacionales 
interinstitucionales unidad encargada de promover y participar en eventos 
internacionales. 
 
2. Proyección social 
La universidad vela por ser un eje de progreso social por eso esta categoría 
contiene todos aquellos hechos históricos que permiten aportar a las personas 
y la comunidad en general, por ejemplo, la implementación de incentivos 
estudiantiles como becas, o aprobación de proyectos sociales. 
3. Investigación 
Esta categoría contiene todos los hitos asociados que pudieron hacer posible 
que la universidad cuente con grupos de investigación vigente que estos estén 
organizados y que puedan contar con recursos disponibles por la universidad 
tecnológica de Pereira 
4. Que hacer académico 
Esta categoría es muy importante ya que indica el crecimiento académico de 
la universidad mediante la creación o mejora de las líneas académicas como 
 
35 
 
creación de carreras tecnológicas, maestrías o doctorados o acreditaciones 
académicas, esta categoría permite que la universidad aumente su diversidad 
de conocimiento y sea una institución que cada día permite el crecimiento del 
acceso a diferentes ramas del conocimiento. 
5. Sistema de bienestar universitario 
Aquí se encuentran asociados todos esos hitos que permitieron que el 
bienestar de la comunidad estudiantil activa en formación, se estableciera 
como una dependencia de la universidad y esta pueda gestionar diferentes 
proyectos importantes como lo han sido recientemente el PAE el proyecto de 
acompañamiento estudiantil educativo que apoya a los estudiantes con 
dificultades con dificultades académicas. 
6. Reconocimiento 
7. Administración y gestión 
Esta categoría contiene los hitos referentes a los planes de cómo debe 
funcionar la universidad en su mayoría documentos que hacen referencia a 
los planes de desarrollo institucional de un lapso o reformas de estructura 
organizacional. 
 
 
 
 
 
 
 
 
 
 
 
 
En la ilustración podemos observar cómo en un lapso del año 2005, ocurrieron 3 hitos 
históricos de 3 categorías diferentes, la creación del proyecto PAE, la creación de la 
maestría de ECOTECNOLOGIA y el boletín de los avances y desarrollo en 
investigación donde Colciencias reconoce a 37 grupos de investigación de la 
universidad tecnológica de Pereira 
 
 
36 
 
 
 
 
 
2.2.4 FUNCIONALIDADES DE LA HERRAMIENTA ACTUAL USADA POR LA 
LINEA DE TIEMPO UTP. 
 
Después de haber descrito los componentes de la línea de tiempo UTP he ingresado 
como se indicó anteriormente, podremos disponer de varias funcionalidades como 
desplazarnos en los hechos históricos, cambiar la forma en que se muestra la línea 
de tiempo, ver los detalles de los hechos históricos, estas funcionalidades son 
públicas ya que cualquier persona tiene acceso a ellas, pero los dueños de la línea 
de tiempo, también necesitan otras funcionalidades, como lo son, autenticarse esto 
para que únicamente la entidad correcta pueda acceder al contenido que ha creado 
y pueda acceder a otras funcionalidades que no son visibles para entidades no 
autenticadas como lo son modificar agregar o borrar contenido. 
 
 
 
 
 
 
 
 
 
 
 
37 
 
Funcionalidad Login 
 
Mediante el ingreso de datos en las cajas de texto y el botón Login la aplicación 
permite verificar nuestras credenciales. 
 
 
Ilustración 9: Tiki Toki Login 
 
 
Menú de Bienvenida 
El menú de Bienvenida permite ver actualmente nuestras líneas de tiempo, aunque 
tener más de una línea de tiempo significa que se debe pagar por una cuenta 
premium, la ventaja de este proyecto es que podemos implementar funcionalidades 
premium posteriormente. 
 
En el capítulo 1 generalidades se definió que el alcance actual del software para el 
proyecto es poder diseñar una aplicación que pueda crear líneas de tiempo online 
enfocados en la línea de la UTP, pero este software a futuro podría tener muchas 
aplicaciones más para la educación en la universidad como compartir contenido con 
alumnos específicos en una asignatura, diferentes líneas de tiempo colaborativas de 
diversos proyectos etc. 
 
 
 
38 
 
 
Ilustración 10: Tiki Toki Menú Bienvenida Usuario 
 
Funcionalidad Crear línea de tiempo 
 
Es un formulario que nos permite ingresar los datos generales de nuestra línea de 
tiempo como son Titulo, año inicio y fin de nuestra línea, una imagen de fondo 
opcional (esta debe estar disponible en la web mediante una URL), si no se escoge 
la imagen también está disponible una gama de colores como es el color de fondo y 
base. 
 
 
39 
 
 
Ilustración 11: Tiki Toki Formulario nueva Línea de tiempo 
 
 
Ilustración 12: Tiki Toki Formulario nueva Línea de tiempo diligenciada 
 
 
Pantalla diseño principal 
Una vez hayamos ingresado los datos en el formulario de creación de la línea de 
tiempo estaremos listos para ver nuestra línea de tiempo vacía solo con la escala y 
 
 
40 
 
podemos desplazarnos seleccionando y sosteniendo la barra inferior y moviendo el 
ratón, o con las fechas, pero con poca precisión de desplazamiento 
 
 
Ilustración 13: Tiki Toki Linea de tiempo Barra desplazamiento 
 
Menú principal de configuración de la línea de tiempo 
 
Guía de administración básica de línea de tiempo 
 
Actualmente tienes seleccionada la línea de tiempo LINEA UTP. 
Muestra que línea de tiempo estamos actualmente y podemos modificar. 
Para editar otra o crear una nueva línea de tiempo, haga clic en la opción Show all. 
Muestra las líneas de tiempo que hemos creado. 
 
Hay tres funciones principales de edición: 
-Edita o crea una nueva historia 
Puede editar historias haciendo clic en los títulos de las historias en la lista. O cree 
una nueva historia haciendo clic en el enlace Created new history. 
-Cambiar la configuración de la línea de tiempo 
Todo, desde el color y el rango de fechas de una línea de tiempo hasta su imagen y 
texto de introducción, se puedecambiar en la pestaña Configuración. 
-Añadir / editar categorías 
Las categorías te permiten codificar por colores tus historias. Ver pestaña de 
categorías para más información. 
-Añadir / editar intervalos 
 
41 
 
Los intervalos le permiten dividir las líneas de tiempo en secciones con su propia 
imagen de fondo y color. Ver pestaña Spans. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Crear una nueva historia 
 
Para crear una nueva historia debemos diligenciar unos datos relevantes básicos del 
hito o historia como la fecha en que empezó y termino, por ejemplo, la línea de tiempo 
actual es sobre la marcha de la implementación propia de la aplicación propia para 
crear líneas de tiempo online UTP. 
 
 
Ilustración 14: Tiki Toki Línea Opción nueva historia y aviso limite de historias cuenta 
gratuita 
 
Como podemos observar la herramienta libre limita sus funciones en su versión 
gratuita y solo están disponibles con cuentas premium, en este caso limitando a 200 
 
 
42 
 
historias, por cada línea de tiempo, 50 categorías, 1 línea de tiempo por cuenta free, 
entre otras funcionalidades restringidas 
 
 
 
 
Ilustración 15: Tiki Toki Línea Opción Formulario historia 
 
 
Ilustración 16: Tiki Toki Línea Opción Formulario historia diligenciado 
 
 
43 
 
A medida que vamos diligenciando los datos la pantalla de diseño va reflejando los 
cambios para visualizar como va a quedar nuestro hito, también podemos notar que 
aún no hemos creado una categoría para ubicar nuestro hito. 
 
Una vez hayamos guardado nuestra historia se habilitarán otros componentes de la 
historia como multimedia, una descripción más grande y específica, y etiquetas estos 
contienen sus funcionalidades básicas como agregar, editar o borrar llamadas 
funciones típicas de mantenimiento. 
 
También para la historia que se acabó de crear se habilitaran las opciones de 
mantenimiento de la historia como borrar o modificar. 
 
 
Modificar la línea de tiempo en general 
 
Desde este mismo menú de administración podemos modificar las características de 
la línea de tiempo eligiendo la opción settings. 
 
 
Ilustración 17: Tiki Toki Modificación línea de tiempo 
 
 
44 
 
 
Crear categoría en la línea de tiempo 
 
Este componente es muy importante ya que en gran medida nos ayuda a tener un 
mejor orden y significado a nuestra línea de tiempo una categoría tiene varios datos 
como lo son el color que distingue la categoría, el orden que se presenta el número 
de filas de la banda de la categoría y el tamaño 
 
 
 
Una vez teniendo la categoría guardada podemos volver a la historia anterior y 
modificarla y asociarla a la categoría nueva. 
 
 
45 
 
 
Ilustración 18: Tiki Toki Modificación historia de tiempo 
 
 
 
 
 
 
Ilustración 19: Tiki Toki Vista general línea de tiempo básica 
 
En este ejemplo se han creado dos categorías llamadas proyectos y otras, cada 
categoría configurada con su propio color, podemos observar la historia que hemos 
creado previamente se visualiza en la banda de color verde Proyectos. 
 
 
46 
 
 
Detalles de las historias. 
 
Es posible asignar contenido multimedia a nuestras historias y documentación que 
soporte la historia, también compartir una dirección web donde este alojado contenido 
referente a la historia 
 
Ilustración 20: Tiki Toki Modificando historia 
 
 
 
Ilustración 21: Tiki Toki Representación de historia 
 
 
Dando click en el botón more podemos consultar toda la información y multimedia 
anexa a la historia 
 
47 
 
 
Ilustración 22: Tiki Toki detalles de historia 
El contenido extra compartido con esta historia se accede desde el botón Find out 
more. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Visualización 3D 
La herramienta tiki-toki como fue comparada con otras herramientas y una de sus 
características fuertes fue la estética, tanto así que ninguna de las otras herramientas 
se puede visualizar la línea de tiempo en tercera dimensión como si estuviéramos 
 
 
48 
 
realmente en un viaje en el tiempo, esto hace que la línea de tiempo sea más atractiva 
y divertida. 
 
 
Ilustración 23: Tiki Toki visor 3D historia 
 
Para el caso de estudio la Línea de tiempo institucional de la universidad 
Tecnológica de Pereira que da origen a este proyecto y sin entrar aun en muchos 
detalles aún. El diseño de la aplicación que permitirá crear la línea de tiempo 
institucional debe ser una aplicación que nos permita ante todo poder tener nuestra 
línea de manera online, para que toda la comunidad estudiantil y personas del común 
que estén interesados en conocer e interactuar con la historia de la universidad, poder 
hacerlo en todo momento solo con disponer de internet y un navegador, pero ¿cómo 
ponemos hacer esto?, la solución está en las aplicaciones web!... 
 
 
2.3 APLICACIONES WEB 
 
Aunque los inicios de internet se remontan a los años sesenta, no ha sido hasta los 
años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. 
En pocos años la Web ha evolucionado enormemente; se ha pasado de páginas 
sencillas con pocas imágenes a contenidos estáticos a páginas con contenidos 
dinámicos que provienen de base de datos, lo que permite la creación de 
“aplicaciones Web”. 
 
De forma breve, una aplicación Web se puede definir como una aplicación en la cual 
el usuario por medio de un navegador realiza peticiones a una aplicación remota 
accesible a través de internet (o a través de una intranet) y que recibe una respuesta 
que se muestra en el propio navegador. 
 
49 
 
 
Las aplicaciones web permiten la generación automática de contenido, la creación 
de páginas personalizadas según el perfil del usuario o el del comercio electrónico. 
Este tipo de aplicaciones se encuadernan dentro de las arquitecturas cliente/servidor: 
un ordenador solicita servicios (cliente) y el otro está a la espera de recibir estas 
solicitudes (el servidor). 
 
Existes multitud de tecnologías que se pueden emplear para programar aplicaciones 
web del lado del cliente como ActiveX, Applets entre otros, aunque actualmente los 
que están más estandarizados son JavaScript y HTML, para programar del lado del 
servidor que es el ordenador que ejecuta las operaciones de cálculo y acceso a datos 
se usan tecnologías como ASP.NET, JSP, PHP, Python etc. 
 
 
 
 
 
 
2.3.1 EL ORIGEN 
 
Es importante resaltar que cada tema, que se cita en este proyecto tiene su propia 
línea de tiempo, y es importante para los autores y colaboradores que pudieron hacer 
posible que podamos utilizar todas las tecnologías. 
Las aplicaciones web no hubieran sido posible si no hubieran ocurrido esta serie de 
eventos que darían inicio al internet: 
 
1961 (julio): Leonard Kleinrock publica “Information Flow in Large Communication 
Nets”, el primer artículo sobre conmutación de paquetes. 
 
1962 (agosto): J.C.R. Licklider escribe una serie de informes sobre su “Galactic 
Network” un conjunto de ordenadores conectados globalmente a través de los cuales 
cualquiera puede acceder a datos y programas existentes en cualquiera 
de ellos. 
 
1962 (agosto): J.C.R. Licklider es nombrado director del primer programa de 
investigación computacional en ARPA. 
 
1964: Leonard Kleinrock publica “Communication Nets”, el primer libro sobre 
conmutación de paquetes y redes de ordenadores. 
 
 
50 
 
 
1964 (agosto): Paul Baran (The RAND Corporation) publica “On Distributed 
Communications”, documento donde recoge todo su trabajo desarrollado sobre 
comunicaciones distribuidas, conmutación de paquetes, etc. 
 
1966 (agosto): Lawrence Roberts deja el MIT y se incorpora a ARPA. 
 
1966 (diciembre): Lawrence Roberts comienza el diseño de ARPANET. 
 
1967 (octubre): En la ACM Operating Systems Symposium en Gatlinberg 
(Tennessee) se presentan dos artículos clave en el desarrollo de Internet: 
•“Multiple Computer Networks and Intercomputer Communication” de Lawrence 
Roberts, donde se presenta el diseño de ARPANET. 
• “A Digital Communications Network for Computers”, de Donald Davies, Roger 
Scantlebury y otros, donde se introducen por primera vez los conceptos de paquete 
y conmutación de paquetes. En esta conferencia, Lawrence Roberts y Roger 
Scantlebury se conocen intercambian ideas y Scantlebury le habla a Roberts de Paul 
Baran y su trabajo. 
 
1968 (diciembre): La empresa Bolt Beranek and Newman gana la licitación para 
construir el primer Interface Message Processor (IMP). Proponen emplear un 
miniordenador Honeywell DDP-516 con 12K de memoria, una velocidad de 1,1 MHz 
y un peso de unos 400 Kg (Figura 2.1). 
 
1969 (abril): Aparece el primer Request for Comments (RFC) con el título “Host 
Software”, escrito por Steve Crocker. 
 
1969 (septiembre): El 1 de septiembre se instala el primer nodo de ARPANET en la 
Universidad de California en Los Ángeles (UCLA). Se conecta el IMP a un ordenador 
XDS (Xerox Data Systems)3 Sigma 7. En la Figura 2.2 se muestra un boceto de este 
primer nodo realizado por Lawrence Roberts. 
 
1969 (octubre): El segundo nodo de ARPANET se instala en el Instituto de 
Investigación de Stanford (Stanford Research Institute, SRI). Se conecta el IMP a un 
ordenador XDS 940. Ese mismo día se transmite el primer mensaje de ARPANET. 
 
1969 (noviembre): Se instala el tercer nodo de ARPANET en la Universidad de 
California en Santa Bárbara (UCSB). El IMP se conecta a un IBM 360/75. 
 
51 
 
1969 (diciembre): El cuarto nodo se instala en la Universidad de Utah. Se conecta el 
IMP a un DEC PDP-10. En la Figura 2.3 se puede ver un boceto de Lawrence Roberts 
con los cuatro primeros nodos de ARPANET. 
 
 
lustración 24: Leonard Kleinrock junto al primer IMP. 
 
2.3.2 EJERCICIO PRACTICO DE LINEAS DE TIEMPO, TEMATICA: ORIGEN DE 
LAS APLICACIONES WEB. 
 
Como se puede observar se acaba de presentar una línea de tiempo que describe 
hitos en de los inicios de internet con el proyecto ARPANET. Aunque esta línea de 
tiempo no es visual sino meramente escriba, podemos realizar nuestra primera línea 
de tiempo apoyándonos con la teoría presentada en la sección anterior 2.1 LAS 
LINEAS DE TIEMPO, el ejercicio consistirá en algo corto como identificar los 
elementos básicos de una línea de tiempo para reforzar conceptos con una línea de 
tiempo con más detalles que los ejemplos anteriores presentados en la sección 
anterior. 
 
La dirección: Comprende la línea que va desde 1961 (julio) hasta 1969 (diciembre). 
La escala: La escala se podría configurar de diferentes formas se plantearán 
brevemente dos: 
Escala 1: se puede crear una escala que contengan los años y entre un año y otro 
los meses comprendidos de enero a diciembre. En este caso si dos sucesos ocurren 
en un mismo tendrían que están juntos y no se diferenciaría su cronología entre estos 
dos sucesos ya que para esta escala son indiferentes. 
 
 
52 
 
Escala 2: Es la solución a la escala 1, se podría retomar la escala anterior, pero 
descomponiendo los meses en días. Así pues, para esta línea de tiempo la escala 
seria en días y esto sería lo óptimo ya que hay documentos que soportan el día exacto 
en que ocurrieron los hechos. 
 
 
. 
La Forma de representar los Puntos: Los puntos pueden estar representado con 
documentos o ilustraciones que soporten el hito ubicados en la fecha 
correspondiente. 
La Forma de distinguir información: La información puede distinguir mediante 
categorías por ejemplo una categoría seria publicaciones (libros, artículos, etc.), 
otra categoría podría ser Implementaciones, donde se ubicaría la instalación del 
primer nodo IMP. 
 
 
Cada persona podría hacer esta línea con un diseño totalmente ya que las líneas 
de tiempo no es una técnica que tenga muchas restricciones y limiten su diseño, las 
limitaciones están sujetas a cada persona, y he aquí el potencial de las líneas de 
tiempo… 
 
 
2.3.1 ¿QUE SON APLICACIONES WEB? 
 
Las aplicaciones web reciben este nombre porque se ejecutan en internet. Es decir 
que los datos o los archivos en los que trabajas son procesados y almacenados 
dentro de la web. Estas aplicaciones, por lo general, no necesitan ser instaladas en 
tu computador. 
 
El concepto de aplicaciones web está relacionado con el almacenamiento en la nube. 
Toda la información se guarda de forma permanente en grandes servidores de 
internet y nos envían a nuestros dispositivos o equipos los datos que requerimos en 
ese momento, quedando una copia temporal dentro de nuestro equipo. 
En cualquier momento, lugar y desde cualquier dispositivo podemos acceder a este 
servicio, sólo necesitamos una conexión a internet y nuestros datos de acceso, que 
por lo general son el nombre de usuario y contraseña o simplemente una dirección 
web. 
 
 
53 
 
En cualquier momento, lugar y desde cualquier dispositivo podemos acceder a este 
servicio, sólo necesitamos una conexión a internet y nuestros datos de acceso, que 
por lo general son el nombre de usuario y contraseña o una dirección web especifica. 
 
Es importante conocer los componentes principales de una aplicación web ya que 
cada uno de estos requiere de una tecnología específica para ser desarrollados, 
estos componentes se comunican por medio un protocolo estandarizado que no 
necesita ser desarrollado, llamado HTTP este protocolo forma parte de la familia de 
protocolos TCP/IP que son empleados en internet. Estos protocolos son esenciales 
para las aplicaciones web ya que permiten conectar sistemas heterogéneos y facilita 
que los ordenadores se puedan comunicar. 
 
 
Ilustración 5: Esquema básico de una aplicación web. 
 
2.3.1.1 COMPONENTES DE UNA APLICACIÓN WEB 
 
CLIENTE 
 
El cliente es un programa que tiene como objetivo interactuar con el usuario un 
ejemplo sencillo sería el programa cliente de un conversor de divisa, este programa 
contendrá una descripción breve y un cuadro de texto donde el usuario deberá 
escribir la divisa que sea convertir adicional mente un botón para ejecutar la 
conversión de divisa hasta aquí hemos identificado tres componentes un texto que 
es la descripción, y una caja de texto para que el usuario digite un botón. Estos 
componentes pertenecen únicamente al programa cliente. 
 
El programa cliente suele estar formado por código HTML adicionándole un poco de 
lenguajes de programación como JavaScript o Python entre otros esto para adecuar 
nuestra lógica en el programa cliente por ejemplo se debe validar que la divisa 
 
 
54 
 
ingresada por el usuario sea mayor que 0 mediante lenguaje HTML no podemos 
hacer este tipo de cosas. 
 
 
Ilustración 25: conversor de divisas provisto por el motor de búsqueda Google.com 
 
Todos los textos botones e imágenes son el programa cliente, sin embargo, la 
información que se muestra como las divisas disponibles y el comportamiento de la 
divisa en el tiempo es información que provee el programa servidor mediante un 
protocolo de comunicación, cada vez que un usuario (cliente) acceda a la dirección 
web donde se encuentra el conversor de divisas será provisto de esta información al 
igual que todos. 
 
 
SERVIDOR 
 
El servidor web es un programa que está esperando permanentemente las solicitudes 
de conexión mediante el protocolo HTTP por parte de los clientes web. En los 
sistemas Unix suele ser un” demonio” y en los sistemas Microsoft Windows un 
servicio, esto quiere decir que para el cliente es transparente las características de 
hardware o software del servidor y el cliente solo debería saber que tiene acceso a 
un servicio. La parte servidor de las aplicaciones web está formada por: 
 
• Por paginas estáticas (documentos, textos) que siempre muestran el mismo 
contenido. 
 
55 
 
• Recursos adicionales (multimedia) que se puede emplear dentro de páginas o 
estar disponiblespara descargarlos y visualizados por el cliente. Por ejemplo, 
una película está dentro del servidor y el programa cliente lo que hace es 
enviar muchas solicitudes para recibir pequeñas partes de esa película y poder 
reproducirla. 
 
• Programas que son ejecutados por el servidor web cuando el usuario en su 
navegador solicita algunas páginas la salida de estos programas puede ser 
código HTML que se envía al navegador del cliente y se visualiza, por ejemplo 
en el conversor de divisas el servidor debe tener acceso a los datos actuales 
de la tasa de conversión para cada moneda quizás estos datos los solicita a 
otro servidor es como una cadena, luego de tener los datos el servidor debe 
tener una función que calcule la conversión luego de esto envía la respuesta 
al programa cliente quien fue que activo la tarea. 
 
2.3.1.2 PROCESO DE USUARIO EN UNA PAGINA WEB 
 
El proceso completo básico, desde que el usuario solicita una página, hasta que el 
cliente web (navegador) se la muestra con el formato apropiado, es el siguiente: 
1. El usuario especifica en el programa cliente web la dirección de la página que 
desea consultar: el usuario escribe en el navegador la dirección (URL) de la 
página que desea visitar o pulsar un enlace. 
2. El programa cliente establece una conexión con el servidor. 
3. El cliente solicita la página o el objeto deseado. 
4. El servidor envía dicha página u objeto (o, si no existe devuelve un código de 
error) 
5. Si se trata de una página HTML, el cliente inicia sus labores de interpretación 
de los códigos HTML. Si el cliente encuentra instrucciones que hacen 
referencia a otros objetos que se tienen que mostrar con la página (imágenes, 
sonidos, animaciones o multimedia), establece automáticamente 
comunicación con el servidor para solicitar dichos objetos. 
6. Se cierra la conexión entre el cliente y el servidor. 
7. Se muestra la página al usuario. 
 
Observe que siempre la conexión es liberada, esto para ahorrar ancho de banda 
mientras el usuario visualizar o interactuar con el contenido necesario, si el usuario 
activara un enlace de la página o función, se volvería a establecer una conexión con 
el servidor. 
 
 
 
56 
 
De esta manera el usuario va a sentir una sensación de conexión permanente todo 
el tiempo cuando realmente no es así. 
 
Un detalle importante es que para cada objeto que se transfiere por la red se realiza 
una conexión independiente. Por ejemplo, si el cliente web solicita una página que 
contiene dos imágenes integradas, se realizan tres conexiones: una para el 
documento HTML y dos para archivos de las imágenes. 
 
 
 
 
 
 
2.3.2 ESTANDARES DE DESARROLLO WEB 
 
Los estándares web más utilizados en el mundo para el desarrollo de los sitios web 
pueden ser: HTML para definir las estructuras de los sitios web, XHTML siendo una 
variante de HTML, pero utilizando la sintaxis de XML, CSS para definir los estilos que 
van a estar relacionados con los documentos de HTML, JavaScript para que los sitios 
sean más interactivos y se agilice la navegabilidad dentro de este. 
 
 
2.3.2.1 HTML 
 
HTML1 siglas de Hypertext Markup Language (Lenguaje de marcas de Hipertexto), 
es el lenguaje para describir la estructura de las páginas web, da a sus autores la 
posibilidad de publicar documentos con encabezados, fotos, links y tablas, entre 
otras. Contiene un número de etiquetas que en conjunto permiten determinar la 
funcionalidad que va a contener el sitio web. (ver ilustración 1). 
Un documento de HTML es una página web, por lo que en HTML se establece una 
especie de jerarquía de etiquetas para la construcción de estos sitios web. La 
estructura principal se puede determinar por las etiquetas <html>, <head> y <body> 
con sus respectivas etiquetas de cierre, que se componen igual, pero con un “slash” 
antes de la palabra de la etiqueta, así (</html>, </head>, </body>). 
 
La gran ventaja de HTML es la posibilidad de utilizar otros lenguajes embebidos, 
como es el caso de JavaScript, PHP, RUBY, Python, JAVA, ASP y CSS, donde con 
 
57 
 
cualquier combinación de estos lenguajes de programación con HTML se pueden 
crear sitios web dinámicos. 
 
 
 
Ilustración 26: Código fuente HTML, introducción línea de tiempo UTP. Fuente: 
autor 
 
 
 
Como podemos observar en la línea 8 podemos cargar una imagen en este caso 
desde una ubicación local, y las otras etiquetas contienen texto básico. 
 
Abriendo este código fuente HTML en un navegador web toma vemos lo 
siguiente. 
 
 
Ilustración 27: Portada básica usando HTML fuente: el autor. 
 
 
 
 
 
 
58 
 
2.3.2.2 CSS 
 
Hojas de estilo en cascada2 (en inglés Cascading Style Sheets) es el lenguaje 
utilizado para describir la presentación de los sitios web, incluyendo los colores, los 
tamaños y las fuentes utilizadas para el sitio web. Es de resaltar que la separación 
entre CSS y HTML permite que a los sitios se les pueda hacer mantenimiento 
fácilmente, además de poder migrar los estilos a otros sitios webs, haciendo todo 
esto referencia a la perfecta separación entre la estructura y la presentación. 
CSS se introdujo para la cuarta edición de HTML3, los estilos que se agregan a los 
sitios web con CSS se pueden incrustar dentro del código HTML mediante varios 
mecanismos, uno de ellos es invocar el archivo CSS (.css) mediante la etiqueta <link> 
,otra forma es incluir dentro de la etiqueta de cabecera la etiqueta <style></style> y 
dentro de esta escribir todas las reglas de estilos, por último se puede agregar el 
atributo style a las etiquetas, 
 
 
Ilustración 28: código fuente portada básica hecha con HTML y CSS Fuente: el autor. 
 
 
59 
 
Usamos la etiqueta <style> dos veces una para definir el fondo con CSS y la segunda 
style para centrar el texto. 
 
Ilustración 29: un ingreso básico hecho con HTML y CSS. Fuente: el autor. 
 
 
Para editar el código del archivo HTML se usó el editor de código gratuito Visual 
studio code de Microsoft. 
Y para visualizar los archivos HTML el navegador Microsoft Edge. 
 
Así mismo agregar que gracias a la universidad tecnológica los estudiantes 
podemos tener acceso gratuito al producto office 365 que permite llevar a cabo 
este trabajo de grado con comodidad y disponibilidad de las herramientas 
como Word, Excel entre otras, que facilitan el desarrollo de documentos. 
 
 
 
2.3.2.3 JAVASCRIPT 
 
Javascript es un lenguaje que puede ser utilizado por profesionales y para quienes 
se inician en el desarrollo y diseño de sitios web. No requiere de compilación ya que 
el lenguaje funciona del lado del cliente, los navegadores son los encargados de 
interpretar estos códigos. 
 
Muchos confunden el Javascript con el Java, pero ambos lenguajes son diferentes y 
tienes sus características singulares. Javascript tiene la ventaja de ser incorporado 
 
 
60 
 
en cualquier página web, puede ser ejecutado sin la necesidad de instalar otro 
programa para ser visualizado. 
 
 
Javascript es un lenguaje con muchas posibilidades, utilizado para crear pequeños 
programas que luego son insertados en una página web y en programas más 
grandes, orientados a objetos mucho más complejos. Con Javascript podemos crear 
diferentes efectos e interactuar con nuestros usuarios. 
Este lenguaje posee varias características, entre ellas podemos mencionar que es 
un lenguaje basado en acciones que posee menos restricciones. Además, es un 
lenguaje que utiliza Windows y sistemas X-Windows, gran parte de la programación 
en este lenguaje está centrada en describir objetos, escribir funciones que respondan 
a movimientos del mouse, aperturas, utilización de teclas, cargas de páginas entre 
otros. 
Es necesario resaltar que hay dos tipos de JavaScript: por un lado, está el que se 
ejecuta en el cliente, este es el Javascript propiamente dicho, aunque técnicamente 
se denomina Navigator JavaScript. Pero