Embed Size (px)
Citation preview
REESTRUCTURACIÓN SITIO WEB: PROGRAMA DE INGENIERÍA DE SISTEMAS Y COMPUTACIÓN DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA
JOSE ANDERSON BARRERA CAÑAS
ANDRES FELIPE ARBELAEZ RIOS
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 2012
REESTRUCTURACIÓN SITIO WEB: PROGRAMA DE INGENIERÍA DE SISTEMAS Y COMPUTACIÓN DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA
JOSE ANDERSON BARRERA CAÑAS
ANDRES FELIPE ARBELAEZ
Trabajo de grado presentado como requisito para optar al título de Ingeniero de Sistemas y Computación.
Asesor: Ingeniero Carlos Augusto Meneses Escobar
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 2012
3
Nota Aceptación:
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________
________________________________________ Firma del presidente del jurado
________________________________________ Firma del jurado
Pereira Marzo de 2012
4
DEDICATORIA
A mis padres, William Barrera y Oneida Cañas, por su infinita entrega y dedicación,
quienes con su amor ayudaron a que mi sueño de ser un profesional, sea hoy una
realidad.
A Juanita Giraldo Galvis, a mis abuelas, mis abuelos, tías, tíos, primos, primas, y amigos
en general, quienes estuvieron siempre conmigo apoyándome en los momentos difíciles,
siendo una voz de apoyo en cada momento. A todos ellos les dedico este trabajo de
grado.
Jose Anderson Barrera Cañas A mi padre Nicolás Arbelaez y a mi madre Diana Ríos, que gracias a sus sacrificios hoy
puedo decir que me dieron todo lo que pudieron en la vida.
A Natatchia Salazar, mis amigos, mi hermano y el resto de mi familia que estuvieron
presentes no solo en mi proceso de formación académica sino en mi vida completa.
Andres Felipe Arbelaez Ríos
5
AGRADECIMIENTOS
Agradezco a Dios, a mis padres William Barrera Palacio y Oneida Cañas Murillo por su
apoyo incondicional, por estar siempre a mi lado en los momentos buenos como en los
no tan buenos, por su apoyo económico durante mi etapa académica, a ellos les
agradezco con todo mi amor, por entender y enseñarme que la mejor herencia es la
educación.
Agradezco enormemente a la señora Ángela María Vivas, quien fue de gran ayuda en el
proceso investigativo en el que nos embarcamos; a el ingeniero Carlos Meneses por su
acompañamiento, a todo el quipo de CRIE, amigos que siempre estuvieron con nosotros
en todo momento y en especial a mi amigo y compañero de trabajo Andrés Felipe
Arbeláez Ríos por su amistad, energía, responsabilidad y compromiso.
Jose Anderson Barrera Cañas
Este proyecto no hubiese sido posible sin la colaboración de las personas que a
continuación citaré:
Agradezco al ingeniero Carlos Meneses por su arduo acompañamiento durante el
desarrollo de este proyecto de grado, que a pesar de su dura labor como profesor y
director del programa, se comprometió completamente a guiarnos en todo lo que
necesitáramos.
A mi compañero en este proyecto, Jose Anderson Barrera quien sin su amistad,
compromiso y apoyo no se hubiera terminado a tiempo este proyecto.
A mis amigos de la sección web del CRIE, porque de no ser por ellos, el proceso de
recolección de información sobre los lineamientos de desarrollo web de la Universidad
hubiese sido difícil de comprender.
A la Universidad Tecnológica de Pereira, que me permitió adquirir las bases de
conocimiento en este importante ciclo de mi vida para poder desempeñarme como
ingeniero.
Andres Felipe Arbelaez Ríos
6
CONTENIDO
INTRODUCCIÓN ......................................................................................................... 15
CAPITULO 1: GENERALIDADES .................................................................................... 17
1.1 FORMULACIÓN DEL PROBLEMA .................................................................... 18
1.2 JUSTIFICACIÓN ............................................................................................... 18
1.3 HIPÓTESIS ....................................................................................................... 19
1.4 OBJETIVOS ...................................................................................................... 19
1.4.1 Objetivo general ......................................................................................... 19
1.4.2 Objetivos específicos .................................................................................. 19
CAPITULO 2: MARCO TEÓRICO ................................................................................... 20
2 MARCO TEÓRICO ............................................................................................... 21
2.1 ESTÁNDARES WEB ......................................................................................... 21
2.1.1 HTML. ........................................................................................................ 21
2.1.2 CSS. ........................................................................................................... 22
2.1.3 XHTML. ...................................................................................................... 25
2.1.4 JavaScript. .................................................................................................. 25
2.1.5 PHP. ........................................................................................................... 26
2.1.5.1 Como funciona PHP. ............................................................................... 28
2.1.6 MySQL. ...................................................................................................... 28
2.2 ESTÁNDARES DE DESARROLLO DE SOFTWARE ........................................ 30
2.2.1 UML. ........................................................................................................... 30
2.2.2 Diagrama de Clases. .................................................................................. 30
2.2.3 Diagrama de casos de uso. ........................................................................ 31
2.2.4 Diagrama de Secuencia. ............................................................................ 32
2.3 GOBIERNO EN LÍNEA ...................................................................................... 32
2.3.1 Breve Historia. ............................................................................................ 33
2.3.2 ¿Qué es Gobierno en línea?....................................................................... 33
2.3.3 Importancia. ................................................................................................ 34
7
2.3.4 Plan de Desarrollo Nacional. ...................................................................... 34
2.3.5 Estrategia de Gobierno en línea. ................................................................ 34
2.4 LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA Y GOBIERNO EN LÍNEA ... 35
2.5 IMPLEMENTACIÓN DE GOBIERNO EN LÍNEA EN LA UTP ............................ 36
2.5.1 Criterio - Estándares del sitio web .............................................................. 36
2.5.2 Criterio – Usabilidad. .................................................................................. 40
2.5.3 Criterio – Accesibilidad web. ....................................................................... 51
2.6 IMAGEN INSTITUCIONAL DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA
56
CAPITULO 3: EVALUACIÓN DEL SITIO WEB ................................................................ 61
3 EVALUACIÓN DEL SITIO WEB DE ISC ............................................................... 62
3.1 CRITERIOS DEL NIVEL INICIAL DE GOBIERNO EN LÍNEA QUE SE CUMPLEN
EN EL SITIO WEB DE LA UTP. ................................................................................... 62
3.1.1 Criterios de Estándares Web: ..................................................................... 62
3.1.2 Criterio de accesibilidad. ............................................................................. 63
3.1.3 Criterio de Usabilidad. ................................................................................ 65
3.2 IMAGEN INSTITUCIONAL DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA
69
3.3 RECOLECCIÓN DE INFORMACIÓN Y ANÁLISIS DE REQUERIMIENTOS ..... 70
3.4 ASPECTOS RELEVANTES DEL SITIO WEB ACTUAL DE INGENIERÍA DE
SISTEMAS Y COMPUTACIÓN .................................................................................... 71
3.5 REQUERIMIENTOS NO FUNCIONALES .......................................................... 72
CAPITULO 4: PROPUESTA DEL SITIO WEB ................................................................. 74
4 PROPUESTA PARA EL SITIO WEB DE INGENIERÍA DE SISTEMAS Y
COMPUTACIÓN .......................................................................................................... 75
4.1 PROPUESTA PARA CUMPLIR LOS CRITERIOS DE ESTÁNDARES WEB
EXIGIDOS POR GOBIERNO EN LÍNEA ...................................................................... 75
4.2 CRITERIO DE ACCESIBILIDAD........................................................................ 77
4.3 CRITERIO DE USABILIDAD ............................................................................. 77
4.3.1 Arquitectura de la Información .................................................................... 77
4.3.2 Diseño de Interfaz de Usuario .................................................................... 78
4.3.3 Diseño de Interacción ................................................................................. 78
8
4.3.4 Búsquedas. ................................................................................................ 78
4.4 IMAGEN INSTITUCIONAL DE LA UNIVERSIDAD TECNOLÓGICA DE
PEREIRA ..................................................................................................................... 79
CAPITULO 5: CONCLUSIONES ..................................................................................... 81
CAPITULO 6: RECOMENDACIONES ............................................................................. 84
BIBLIOGRAFÍA ................................................................................................................ 86
ANEXOS ......................................................................................................................... 88
9
LISTA DE ILUSTRACIONES
Ilustración 1 Código con las etiquetas principales del lenguaje HTML ..................................22
Ilustración 2 Inserción de archivo CSS en HTML ......................................................................23
Ilustración 3 Estilos CSS internos en HTML ...............................................................................23
Ilustración 4 Estilos CSS entre las etiquetas de HTML .............................................................24
Ilustración 5 Código ejemplo de una clase en CSS ...................................................................24
Ilustración 6 Código ejemplo de un identificador en CSS .........................................................24
Ilustración 7 Código de JavaScript con HTML ...........................................................................26
Ilustración 8 Resultado de la ejecución de código PHP en el servidor ..................................27
Ilustración 9 Proceso de solicitud, ejecución y respuesta de PHP..........................................29
Ilustración 10 Representación de una clase en UML ................................................................31
Ilustración 11 Representación de un diagrama de casos de uso ............................................31
Ilustración 12 Representación de los componentes de un diagrama de secuencia.............32
Ilustración 13 Dirección URL de la página oficial de la UTP ....................................................37
Ilustración 14 Ubicación del escudo de la UTP en la parte superior izquierda .....................37
Ilustración 15 Ultima actualización del sitio web de la UTP .....................................................38
Ilustración 16 Mapa del sitio web de la UTP ...............................................................................38
Ilustración 17 Accesos directos a los sitios web del menú principal de la UTP ....................39
Ilustración 18 Buscador interno del sitio web de la UTP...........................................................40
Ilustración 19 Sitio oficial de la Facultad de Ingenierías UTP ..................................................44
Ilustración 20 Rutas de miga en el sitio del ILEX (Instituto de Lenguas Extranjeras) ..........44
Ilustración 21 URL de un sub sitio de Relaciones Internacionales UTP ................................45
Ilustración 22 Enlace sin visitar y visitado del sitio web de la biblioteca UTP .......................45
Ilustración 23 Código CSS del sitio web de la UTP donde muestra el ancho del sitio ........47
Ilustración 24 Estadística sobre uso de navegadores web mes a mes hecho por la
W3Schools .......................................................................................................................................48
Ilustración 25 Validación de la W3C para el sitio web de la UTP (www.utp.edu.co) ............49
Ilustración 26 Formulario para el ingreso al portal estudiantil de la UTP ...............................50
Ilustración 27 Página de Error 404 de la Universidad Tecnológica de Pereira .....................50
Ilustración 28 Buscador del sitio principal de la UTP ................................................................51
Ilustración 29 validador de Accesibilidad web aplicado al sitio web de la UTP.....................55
Ilustración 30 Escudo de la Universidad Tecnológica de Pereira ...........................................57
Ilustración 31 Formas Únicas para utilizar la marca de la UTP ...............................................58
Ilustración 32 Color de letra según el color de fondo de la marca ..........................................58
Ilustración 33 Banners de las Diferentes Dependencias ..........................................................59
Ilustración 34 Banner de la Facultad de Ingenierías .................................................................60
Ilustración 35 Resultado de Accesibilidad del sitio web de ISC ..............................................64
Ilustración 36 Resultado de Accesibilidad del Sitio web de ISC en T.A.W3 ..........................64
Ilustración 37 Menú principal del sitio web de ISC ....................................................................66
10
Ilustración 38 URL de una sección del sitio web de ISC ..........................................................66
Ilustración 39 Logotipo de la UTP en el sitio de ISC .................................................................67
Ilustración 40 Párrafo con 171 CPL en el sitio web de ISC ......................................................67
Ilustración 41 Mensaje de error al ingresar una URL errónea en el dominio de
isc.utp.edu.co ...................................................................................................................................68
Ilustración 42 Uso correcto e incorrecto respectivamente de los Colores de la Faculta de
Ingeniería ..........................................................................................................................................69
Ilustración 43 Uso Incorrecto del tipo del letra en el nombre del programa ..........................70
Ilustración 44 Uso Incorrecto del Logo de ISC ...........................................................................70
Ilustración 45 Prototipo del nuevo sitio web de ISC ..................................................................73
Ilustración 46 Algunos Criterios de Estandartes web en el nuevo sitio web de ISC ............76
Ilustración 47 Propuesta para el Sitio Web de ISC ....................................................................80
11
LISTA DE TABLAS
Tabla 1: Criterio – Estándares del sitio web………………………………………………63
12
LISTA DE ANEXOS
Anexo A. Especificación de Requerimientos del Software Anexo B. Entrevista a la Coordinadora de la sección web del CRIE
13
GLOSARIO
ACCESIBILIDAD: 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.
APACHE: 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 FUENTE: 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. DOMINIO: 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.
ENLACE: 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ÁNDAR: 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.
ESTÁNDAR 960: Estándar web internacional, plantea que el ancho de las páginas web
sea de 960 pixeles.
MARCA: Es el conjunto de elementos que integran la identidad visual de una sociedad,
entidad ó corporación, con el objetivo de distinguirse de otras.
MENÚ: Elección que tiene que hacer una persona entre un conjunto de posibilidades. RUTAS DE MIGAS: Su principal función es mostrar el camino que ha seguido el usuario hasta su ubicación actual. MOTORES DE BÚSQUEDA: También conocido como buscador, es un sistema informático que busca archivos almacenados en servidores web gracias a su «spider» (o Web crawler). NAVEGAR: Desplazarse por todas las páginas de un sitio web, pasar de un sitio a otro
por medio de enlaces ó links.
14
NAVEGABILIDAD: Es la facilidad con la que un usuario puede desplazarse por todas las
páginas que componen un sitio web
PAGINA WEB: Es un documento creado en formato HTML (Hypertext Markup Language)
que es parte de un grupo de documentos ó recursos disponibles en el World Wide Web.
Una serie de páginas web componen lo que se llama un sitio web
POSICIONAMIENTO:
SITIO WEB: Conjunto de páginas web que están relacionadas entre sí, que forman una
estructura de información que se ingresan desde un mismo dominio
USABILIDAD: Capacidad de un software ó 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
W3C: World Wide Web Consortium, es un consorcio internacional donde las
organizaciones pertenecientes, personal a tiempo completo y el público en general,
trabajan conjuntamente para desarrollar estándares web.
WAI: Web Accessibility Initiative, es la iniciativa para la accesibilidad Web que como
rama del World Wild Web Consortium vela por que el contenido web sea accesible.
WCGA: Pautas de accesibilidad del contenido web, ayudan a hacer el contenido web más
accesible para las personas con discapacidad. En la actualidad existen las WCAG 1.0 y
WCAG 2.0.
15
INTRODUCCIÓN
Actualmente la web se ha convertido en una plataforma amplia, que permite tanto a las
empresas privadas, organizaciones estatales y usuarios corrientes llegar a cualquier lugar
del mundo para extraer información de forma fácil y rápida, convirtiendo a la web en un
mecanismo potente de comunicación y prestación de servicios.
El número de usuarios que acceden a la web es cada vez más grande, estableciéndose el
internet como un servicio necesario, en el crecimiento constante del mundo. Los portales
web son uno de los servicios de internet más utilizados, por lo que surgió la necesidad de
establecer una buena comunicación y navegabilidad entre los usuarios y estos portales.
Para cumplir con lo anterior, a nivel mundial se han definido estándares de desarrollo
web, que siempre se deben tener presentes para garantizar que los usuarios puedan
utilizar estos portales sin inconvenientes y cumpliendo con los objetivos trazados.
Colombia no se puede quedar atrás en la utilización del internet y sus servicios, buscando
garantizar que todos sus ciudadanos tengan acceso a la información sin inconvenientes
de conectividad, por lo que debe validar dentro de su jurisdicción, que se cumplan todos
los estándares web necesarios para el uso de los servicios web. De aquí nace la
estrategia para la implementación de Gobierno en línea en Colombia, donde se
establecen qué estándares de desarrollo web se deben cumplir por parte de las entidades
estatales y privadas con funciones públicas.
La Universidad Tecnológica de Pereira, siendo una entidad estatal y que cuenta con su
propio sitio web, decidió implementar la estrategia de Gobierno en línea para cumplir con
los objetivos de desarrollo planteados por el gobierno nacional. Además, está apostando
por fortalecer su imagen como institución de educación superior, con el fin de
diferenciarse notablemente de las demás instituciones del país, planteando contar con
una imagen unificada, que resalte y enaltezca el amor por la Universidad.
El programa de Ingeniería de Sistemas y Computación de la Universidad Tecnológica de
Pereira actualmente cuenta con su propio sitio web, donde se encuentra toda su
información general, además de noticias y eventos que están relacionados con este. La
estructura actual del sitio web del Programa de Ingeniería de Sistemas y Computación no
cumple con la imagen institucional de la Universidad, por lo que se puede decir que
tampoco cumple con los criterios de desarrollo web de la estrategia de Gobierno en línea,
que la Universidad tiene establecido actualmente.
El objetivo de este proyecto es reestructurar el sitio web actual del programa de Ingeniería
de Sistemas y Computación, ejecutando tres procesos para lograrlo. El primer proceso
analiza los criterios que establece la estrategia de Gobierno en línea y estudia la imagen
institucional de la Universidad Tecnológica de Pereira, con el fin de tener una lista de los
criterios de la estrategia de Gobierno en línea que se están cumpliendo por parte de la
Universidad en su sitio web, resaltando el hecho de que solo se evalúan aquellos criterios
16
que se encuentran al alcance de los desarrolladores del proyecto. El segundo proceso
compara la lista de criterios de la estrategia de Gobierno en línea que salen como
resultado del primer proceso con el sitio web actual del programa de Ingeniería de
Sistemas y Computación, para fijar cuales no están siendo cumplidos. En el último
proceso se genera y desarrolla una propuesta de reestructuración del sitio web del
programa de Ingeniería de Sistemas y Computación, que busca cumplir con la imagen
institucional de la Universidad y con algunos de los criterios de Gobierno en línea que
adoptó esta.
17
CAPITULO 1: GENERALIDADES
18
1.1 FORMULACIÓN DEL PROBLEMA
El sitio web del programa Ingeniería de Sistemas y Computación (ISC) de la Universidad
Tecnológica de Pereira (UTP) aun no cuenta con una presentación web acorde a los
lineamientos de la imagen institucional determinados por la UTP, respecto a usabilidad,
accesibilidad e imagen institucional establecidos según Gobierno en Línea.
Cuando se implementó un sitio para el programa de Ingeniería de Sistemas y
Computación (ISC) hace varios años, se pensó en mostrar información básica del
programa, pero era un sitio con contenido estático y con información poco relevante; así
se mantuvo hasta el año 2011, por lo que algunos estudiantes del programa de ISC,
optaron por implementar como proyecto de grado el “rediseño e implementación del portal
web 2.0 de ISC”, que busca un sitio dinámico en la difusión de la información y la
comunicación de la comunidad perteneciente al programa de ISC, pero sin tener en
cuenta muchos de los lineamientos visuales de la Universidad.
Por lo anterior, ¿será posible realizar una reestructuración al sitio web actual de Ingeniería
de Sistemas y Computación (ISC) para que cuente con la imagen institucional establecida
por la UTP, con los criterios de Gobierno en línea y estén acordes con los requerimientos
del programa ISC?
1.2 JUSTIFICACIÓN
Actualmente el Centro de Recursos Informáticos y Educativos (CRIE) se encuentra al
frente de la labor de implementar la imagen institucional a las páginas que aún no la
tienen, dando una funcionalidad muy general y limitada a todos los sitios nuevos que se
implementan. El sitio web actual de Ingeniería de Sistemas y Computación cuenta con
algunas funcionalidades de carácter académico propias y necesarias para el programa,
pero es importante actualizarlas y además seguir detalladamente los lineamientos
establecidos como parte de la imagen institucional de la Universidad Tecnológica de
Pereira.
Por otro lado, con este proyecto se busca aprovechar y optimizar los recursos de
hardware y software con lo que cuenta el programa de Ingeniería de Sistemas y
Computación (ISC), como son los servidores para uso académico que facilitan a la
comunidad estudiantil y a los profesores, el acceso a información académica relevante
del programa.
La comunidad externa a la universidad que accede al sitio web del programa para
consultar información académica del mismo, se podrá beneficiar al adquirir datos
confiables y organizados con una distinción de imagen corporativa.
19
A través de un sitio web asignado, el programa de Ingeniería de Sistemas y Computación
podrá destacar su imagen educativa a partir de información académica organizada y
confiable que proporcione a los usuarios, detalles no solamente de contenidos
curriculares, sino también de eventos académicos y servicios tecnológicos que
periódicamente se promueven en beneficio de la sociedad.
1.3 HIPÓTESIS
¿Sera posible reestructurar el sitio web del programa de ingeniería de sistemas y
computación (ISC) de la Universidad Tecnológica de Pereira (UTP) aplicando los
estándares de visualización establecidos por esta última y los requerimientos del
programa?
1.4 OBJETIVOS
1.4.1 Objetivo general
Reestructurar el sitio web del programa de Ingeniería de Sistemas y Computación (ISC)
de la Universidad Tecnológica de Pereira (UTP) aplicando los estándares institucionales
de visualización establecidos.
1.4.2 Objetivos específicos
Realizar una evaluación al actual sitio web de ISC, con respecto a las políticas
de visualización de la UTP.
Generar una propuesta de restructuración del sitio web de ISC que cumpla
con las políticas de visualización de la UTP.
Analizar e implementar los requerimientos funcionales del programa en el
desarrollo del sitio web
Implementar los ajustes de visualización propuestos al sitio web de ISC.
20
CAPITULO 2: MARCO TEÓRICO
21
2 MARCO TEÓRICO
Es necesario sustentar y visualizar todos los fundamentos teóricos que van a estar
vinculados durante el desarrollo del proyecto. Además mostrar las definiciones,
estrategias y reglas que se presentan en el programa de Gobierno en línea para las
entidades públicas.
2.1 ESTÁNDARES 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.1.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 etiqueta <html> es la principal en un documento HTML, ya que indica, que todo lo que
se encuentre entre su etiqueta de inicio y de final (<html>(etiquetas)</html>) será
procesado como HTML, la etiqueta <body> como su nombre lo indica contiene el cuerpo
del sitio web, todo lo que el usuario final está observando se encuentra dentro de esta
etiqueta. La etiqueta <body> contiene otras etiquetas que están debajo de ella según la
jerarquía de HTML, etiquetas como <p>, <h1>, <div> y si se va más a fondo en esta
jerarquía, se encontrará el siguiente nivel con etiquetas como <b>, <san> y <i>.
1 HTML & CSS [En línea]. Consultado: 01 de Febrero de 2012
http://www.w3.org/standards/webdesign/htmlcss
22
La etiqueta <head> siendo otra de las principales dentro de un documento HTML es la
encargada de contener la etiqueta del título de la pagina (<title></title>), además de ser el
lugar en el que se cargan los archivos externos como por ejemplo archivos .js (JavaScript)
y archivos .css (CSS).
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 cualquier
combinación de estos lenguajes de programación con HTML se pueden crear sitios web
dinámicos.
Ilustración 1 Código con las etiquetas principales del lenguaje HTML
Fuente: Los autores
2.1.2 CSS.
Hojas de estilo en cascada2 (en ingles 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> (ver ilustración
2 Ibíd.
3 W3SCHOOLS. HTML Styles – CSS. [En línea]. Consultado el 17 de febrero de 2012:
http://www.w3schools.com/html/html_styles.asp
23
2), otra forma es incluir dentro de la etiqueta de cabecera la etiqueta <style></style> (ver
ilustración 3) y dentro de esta escribir todas las reglas de estilos, por último se puede
agregar el atributo style a las etiquetas, (ver ilustración 4).
Ilustración 2 Inserción de archivo CSS en HTML
Fuente: Los autores
Ilustración 3 Estilos CSS internos en HTML
Fuente: Los autores
24
Ilustración 4 Estilos CSS entre las etiquetas de HTML
Fuente: Los autores
Por otro lado, CSS permite utilizar selectores; llamados a clases e identificadores (class e
id respectivamente). El selector clase se utiliza principalmente para especificar el estilo de
un conjunto de elementos y el selector ID permite establecer el estilo para un único
elemento, para definir las clases en el código CSS es necesario anteponer un punto (.)
antes que el nombre de la clase (ver ilustración 5), y para definir los identificadores se
hace anteponiendo un numeral (#) al nombre del identificador (ver ilustración 6).
Ilustración 5 Código ejemplo de una clase en CSS
Fuente: Los autores Ilustración 6 Código ejemplo de un identificador en CSS
Fuente: Los autores
25
2.1.3 XHTML.
XHTML4 es una familia de tipos de documentos y módulos que forman un subconjunto y
extienden a HTML en su cuarta versión.
El nacimiento de XHTML se sustenta gracias a la llegada de una gran variedad de
dispositivos que pueden acceder a la web, con un lenguaje de etiquetado más estricto que
el de HTML, XHTML permitirá que la información que se encuentra este organizada de
forma correcta para permitir una buena interpretación de esta sin importar desde donde se
conecte.
XHTML5, al estar orientado al uso de un etiquetado correcto, exige una serie de requisitos
básicos a cumplir en lo que a código se refiere. Entre estos requisitos básicos se puede
mencionar una estructuración coherente dentro del documento donde se incluirían
elementos correctamente anidados, etiquetas en minúsculas, elementos cerrados
correctamente, atributos de valores entrecomillados, etc.
2.1.4 JavaScript.
Es un lenguaje de programación que se utiliza para crear páginas web enfatizando en el
hecho de que sean dinámicas. La red de desarrolladores de Mozilla define a JavaScript
de la siguiente forma:
JavaScript es un lenguaje de script multiplataforma [cross-platform] orientado a objetos.
Es un lenguaje pequeño y ligero; no es útil como un lenguaje independiente, más bien
está diseñado para una fácil incrustación en otros productos y aplicaciones, tales como
los navegadores Web. Dentro de un entorno anfitrión, JavaScript puede ser conectado a
los objetos de su entorno para proveer un control programable sobre éstos.6
El núcleo de JavaScript contiene un conjunto central de objetos, tales como Array
(arreglos), Date (fechas) y Math (objetos matemáticos), además de un conjunto central de
elementos del lenguaje tales como los operadores, estructuras de control y sentencias. El
núcleo de JavaScript puede ser extendido para una variedad de propósitos,
complementándolo con objetos adicionales; por ejemplo:
4 W3C. XHTML™ 1.0 The Extensible Hypertext Markup Language (Segunda Edición). [En línea]
Consultado: 01 de febrero de 2012. http://www.w3.org/TR/xhtml1/#xhtml
5 Ibíd.
6 Mozilla Developer Network. Concepto de JavaScript. [En Línea]: Consultado el día 16 de febrero de 2012
https://developer.mozilla.org/es/Gu%EDa_JavaScript_1.5/Concepto_de_JavaScript#.C2.BFQu.C3.A9_es_Jav
aScript.3F
26
JavaScript del lado Cliente extiende el núcleo del lenguaje proporcionando objetos
para el control del navegador (Navigator o cualquier Web browser) y su Modelo
Objeto Documento [Document Object Model] (DOM). Por ejemplo, las extensiones
del lado del cliente permiten a una aplicación ubicar elementos en un formulario
HTML y responder a los eventos de usuario tales como los clics del mouse,
entradas del formulario y navegación de páginas.
JavaScript del lado Servidor extiende el núcleo del lenguaje proporcionando
objetos relevantes para la ejecución de JavaScript en un servidor. Por ejemplo, las
extensiones del lado del servidor permiten que una aplicación se comunique con
una base de datos relacional, proporcionar continuidad de la información desde
una invocación de la aplicación a otra ó efectuar la manipulación de archivos en un
servidor.7
Ilustración 7 Código de JavaScript con HTML
Fuente: Los autores
2.1.5 PHP.
PHP8 (Hypertext Preprocessor) es un lenguaje de código abierto muy popular,
especialmente adecuado para desarrollo web y que puede ser incrustado en HTML.
Lo que distingue a PHP de un lenguaje del lado-cliente como JavaScript, es que el código
se ejecuta en el servidor, sin que el cliente pueda intervenir, solo percibiendo el código
HTML que es enviando por el servidor. El cliente recibirá los resultados de ejecutar el
script, sin ninguna posibilidad de determinar qué código ha producido el resultado
7 Ibíd.
8 PHP. ¿Qué es PHP? Manual. [En línea]. Consultado: 16 de febrero de 2012.
http://co.php.net/manual/es/intro-whatis.php
27
recibido. El servidor web puede ser incluso configurado para que procese todos los
archivos HTML con PHP y entonces no hay manera que los usuarios puedan saber que
tienes debajo de la manga.
Un ejemplo fácil de entender sobre el uso de PHP incrustado con HTML puede ser: <! DOCTYPE html> <html lang="en">
<head> <meta charset="utf-8"/> <title>Primer sitio PHP</title>
</head> <body>
<? php echo"Hola Mundo"; ?> </body>
</html>
Si se ejecutará este código en el servidor, el resultado generado del lado del cliente sería
el de la Ilustración 8.
Ilustración 8 Resultado de la ejecución de código PHP en el servidor
Fuente: Los autores
El ejemplo anterior demuestra claramente que el código PHP se puede incrustar dentro
del código de HTML sin ningún problema, simplemente se debe asegurar que las
instrucciones deben estar entre las etiquetas respectivas de PHP, empezando con <?PHP
28
y terminando con ?>, el uso de estas etiquetas se puede hacer en cualquier lugar del
código HTML y no tiene un límite de uso.9
2.1.5.1 Como funciona PHP.
PHP al ser un lenguaje que se ejecuta del lado del servidor, puede acceder a los recursos
que el servidor posee, como son las bases de datos, para procesarlos y luego enviárselos
al cliente (Navegador web) en formato HTML corriente, el proceso de ejecución de PHP
sería así:
1. Desde el cliente se solicita un archivo con la extensión .php que se encuentra
almacenado en el servidor, este proceso de solicitud lo realiza el navegador
mediante la URL del archivo a través del protocolo HTTP.
2. El servidor recibe la solicitud de parte del cliente y revisa que la extensión del
archivo es .php y se determina a utilizar el intérprete de PHP para atender la
solicitud.
3. El intérprete de PHP dentro del servidor ejecuta el código que se encuentra dentro
de las etiquetas de PHP (<?PHP (código) ?>), y genera un archivo de
presentación en HTML para enviárselo al cliente.
4. El cliente procesa el archivo corriente HTML y lo presenta al usuario.
Este proceso se puede ver gráficamente en la ilustración 9.
2.1.6 MySQL.
Oracle Corporation dice que MySQL se ha convertido en la base de datos de código
abierto más popular del planeta debido a su alto rendimiento, alta confiabilidad y fácil
manejo, además, gracias a su funcionamiento es utilizado por muchas organizaciones,
como la herramienta preferida para almacenar sus datos de forma segura y confiable.
Su utilización es sencilla y no presenta grandes retos para los que no sean expertos en la
administración de bases de datos; Se puede instalar en cualquier servidor de forma
gratuita provisionando los datos necesarios a la aplicación web en conjunto con lenguajes
de programación como PHP, Perl o Python, siendo entonces, una herramienta
comprensible y fácil de implementar en la solución de cualquier problema que requiera la
utilización de almacenamiento de datos.10
9 WEELLING, Luke & THOMPSON, Laura.PHP and MySQL web development.Indianapolis: Sams
Publishing 2001. p.16.
29
Ilustración 9 Proceso de solicitud, ejecución y respuesta de PHP
Fuente: www.subdesarrollando.com.ar
10
ORACLE CORPORATION and/or its affiliates. (17 de febrero de 2012). MySQL. [En línea]. Recuperado
el 17 de febrero 2012 de MySQL The world's most popular open source database:
http://www.mysql.com/why-mysql
30
2.2 ESTÁNDARES DE DESARROLLO DE SOFTWARE
2.2.1 UML.
UML11 (Lenguaje Unificado de Modelado) es una de las herramientas más utilizadas en la
actualidad alrededor del mundo, la cual determina un conjunto de notaciones y diagramas
estándar para modelar distintos tipos de sistemas orientados a objetos de cualquier
tamaño, además de describir cada uno de los diagramas y símbolos que hacen parte de
este grupo.
UML permite que los desarrolladores de sistemas puedan capturar sus ideas de forma
convencional y comunicarlas a los demás de forma clara y fácil de comprender.
Ya que el software es diseñado, desarrollado y utilizado por seres humanos, puede existir
la posibilidad de cometerse errores en cualquiera de los tres contextos anteriormente
mencionados. Para no caer en estos errores es de vital importancia que el equipo de
desarrollo interprete y desarrolle exactamente lo que el cliente quiere, se puede decir que
la clave de un buen desarrollo se encuentra en organizar el proceso de diseño de tal
forma que el cliente, el analista, los desarrolladores y todos aquellos que se encuentren
en el proceso entiendan claramente el sistema que se va a desarrollar y sepan opinar
sobre este, UML sirve para que lo anterior se cumpla.
2.2.2 Diagrama de Clases.
El diagrama de clases12 permite abstraer el mundo real de tal forma que la mayoría de
cosas que existen en este, se puedan representar como una clase. Se define una clase
como algo que posee atributos y métodos, y que se relacionan con otras clases que
también cuentan con la misma estructura.
El objetivo de las clases es generar una plantilla o una descripción genérica de un
elemento de la vida real.
Las clases se representan en UML como rectángulos (ver ilustración 10) que se dividen
en tres partes, el nombre, los atributos y los métodos. Los atributos de las clases son los
detalles ó características que la conforman, por ejemplo para la clase perro, algunos
atributos con los que esta clase podría contar son: la edad, el color de pelo, la raza y
color de ojos de un perro.
Los métodos son todas aquellas acciones que la clase puede tener, para el ejemplo de la
clase perro, algunos métodos que pueden estar asociados a esta clase, son: correr,
comer, dormir y rascarse. Se debe aclarar que para la representación de los métodos en
11
SCHMULLER, Joseph. Aprendiendo UML en 24 Horas. PEARSON. p.24. 12
Ibíd., p.28.
31
el diagrama de clases, estos deben tener al final paréntesis que abren y paréntesis que
cierran.
Cuando una clase es instanciada, se llama objeto, es decir, a la plantilla genérica que se
creó como clase, se le están dando valores a los atributos y además se están utilizando
los métodos que esta posee.
Ilustración 10 Representación de una clase en UML
Perro
Edad Color de pelo Raza Color de ojos
Correr() Comer() Dormir() Rascarse()
Fuente: Los autores
2.2.3 Diagrama de casos de uso.
Son una descripción de las acciones del sistema, pero desde el punto de vista del usuario.
Esta herramienta es muy útil para los desarrolladores al momento de levantar
requerimientos, ya que de una forma muy sencilla se pueden obtener los requerimientos
por parte del usuario del sistema.
Los diagramas de casos de uso se componen por gráficos que representan todo el
sistema resaltando que se tiene en cuenta que uno de los elementos del sistema es el
usuario.
Ilustración 11 Representación de un diagrama de casos de uso
32
Fuente: SCHMULLER, Joseph. Aprendiendo UML en 24 Horas, pág 29
2.2.4 Diagrama de Secuencia.
Los diagramas de secuencia a diferencia del de clases, son representaciones del sistema
en funcionamiento, es decir, muestran cómo funciona un sistema y como se comunican y
comportan sus componentes en el tiempo.
Los diagramas de secuencia13 constan de objetos que se representan del modo usual en
UML, es decir rectángulos con el nombre del objeto subrayado (ver ilustración 12), y
mensajes entre los objetos, representados como una línea continúa con punta de flecha y
el tiempo representado como una progresión vertical.
Ilustración 12 Representación de los componentes de un diagrama de secuencia
Fuente: SCHMULLER, Joseph. Aprendiendo UML en 24 Horas. Página 123. PEARSON
2.3 GOBIERNO EN LÍNEA
Dado el aumento significativo que ha tenido la utilización de las plataformas web en el
mundo, el gobierno Colombiano ha decidido implementar políticas que ayuden a
estandarizar, regular y permitir el acceso de todo ciudadano a dichas plataformas. Esto ha
motivado el nacimiento del programa Gobierno en línea en Colombia.
El trabajo que se verá reflejado en este documento está basado en el Manual 3.014 para la
implementación de la estrategia del programa de gobierno en línea en las entidades del
orden nacional de la República de Colombia.
13
Ibíd., p.123.
14
PROGRAMA AGENDA DE CONECTIVIDAD – ESTRATEGIA DE GOBIERNO EN LÍNEA. Manual
para la implementación de la Estrategia de Gobierno en línea de la República de Colombia. Bogota.2011.
33
2.3.1 Breve Historia.
Gobierno en línea es una idea de orden mundial, que plantea varios lineamientos para la
promoción y uso de las Tecnologías de la Información y la Comunicación (TICs) a nivel
global. Muchos países tienen implementada la estrategia de Gobierno en línea, y lo hacen
participe por medio de sus políticas gubernamentales, pero cada programa varía según
las necesidades, objetivos y expectativas que tenga cada país.
Gobierno en línea en Colombia, responde a algunos compromisos adquiridos por el país,
como lo son: el Plan de Acción de la Cumbre Mundial de la Sociedad de la Información al
2015, la Declaración de Santo Domingo de la Asamblea de la OEA en 2006, la
Declaración de Santiago en la Cumbre Iberoamericana de Jefes de Estado y de Gobierno
en 2007, el Plan de Acción sobre la Sociedad de la Información de América Latina y el
Caribe al 2015 (eLAC) y la Declaración de La Granja entre la Unión Europea y América
Latina y el Caribe sobre la Sociedad de la Información en 2010.15
La estrategia de Gobierno en línea en Colombia, ha sido influenciada por las experiencias
que otros países tuvieron al implementarla, en especial la de Estados Unidos.
En Colombia se viene implementado el programa de gobierno en línea desde el año 2000,
con la Directiva Presidencial No. 02 del mismo año. Pero se trabaja sobre esta estrategia
de manera exhaustiva y coordinada en todas las entidades públicas y entes privados que
ejercen funciones públicas, desde el año 2008, con la expedición del decreto 1151 del 14
de abril.16
Gracias a Gobierno en línea, Colombia figura hoy como líder latinoamericano que tiene
presencia en internet, además de conseguir un aumento en los escalafones mundiales,
encontrándose en los puestos 31 y 26 a nivel mundial como el mejor país en gobierno
electrónico y en participación electrónica de américa latina, y del Caribe respectivamente.
2.3.2 ¿Qué es Gobierno en línea?
Gobierno en línea es un conjunto de lineamientos, estándares y criterios que pretende
promover avances en el uso y apropiación de la tecnología de la información y las
comunicaciones, con el fin de aprovechar las herramientas que permiten mejorar la
gestión pública, la provisión de servicios y la transparencia, encaminados a cumplir las
funciones del Estado.
15
Ibíd., p.7.
16
Ibíd., p.5
34
2.3.3 Importancia.
La importancia que tiene Gobierno en línea se da gracias a la participación activa y
cooperativa de las entidades públicas, privadas, académicas, entre otras, que efectuaron
acciones internas, con el fin de que en Colombia se aprovechen las TICs para garantizar
la política actual del gobierno que promueve prosperidad para el país.
2.3.4 Plan de Desarrollo Nacional.
El gobierno colombiano plantea que uno de sus objetivos de desarrollo 2011-2014 es
buscar un impulso a la masificación y uso de las TIC, siendo Gobierno en línea uno de los
mecanismos para cumplir esto, formalizando y enfatizando que es la gestión pública la
principal plataforma para cumplir este objetivo.17
Al igual se ha planteado como objetivo de desarrollo “construir un país con prosperidad
para todos, con más empleo, menor pobreza y más seguridad”18, lo anterior se sustenta
en ocho pilares o ejes, siendo uno de estos pilares el buen Gobierno, donde Gobierno en
línea se convierte en un instrumento preponderante que facilita el buen Gobierno.
2.3.5 Estrategia de Gobierno en línea.
El programa Gobierno en línea es el encargado de liderar, coordinar y acompañar la
implementación de la estrategia Gobierno en línea en todo el país.
La Estrategia de Gobierno en línea busca un “estado construido por y para colombianos,
mediante el aprovechamientos de las TICs para la prosperidad del país y tiene como
propósito, contribuir a la construcción de un estado más eficiente, más transparente,
participativo y que presta mejores servicios con la colaboración de toda la sociedad,
mediante el aprovechamiento de las TIC.” 19
Por medio de la implementación de esta Estrategia de gobierno en línea, se busca
además el cierre de la brecha de servicios digitales, al desarrollo de la sociedad de la
Información, y la conectividad digital.
17
Ibíd., p.5.
18
DEPARTAMENTO NACIONAL DE PLANEACION. Bases del Plan de Desarrollo. [En Línea]:
www.dnp.gov.co. Consultado el 15 de febrero de 2012.
19
Ibíd., p.7.
35
2.4 LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA Y GOBIERNO EN LÍNEA
Gobierno en línea, con el ánimo de dinamizar el proceso de adquisición, apropiación y
asimilación de los lineamientos, estándares y criterios que establece, ha desarrollado
varios puntos específicos que permiten implementarlos sin inconvenientes. Estos puntos
están formados por cinco componentes principales: informáticos, interacción, transacción,
transformación, y democracia; además, de cuatro niveles ó modelos de madurez: Nivel
Inicial, Nivel Básico, Nivel Avanzado y Nivel de Mejoramiento Permanente.
Se debe comprender que cada nivel define los servicios que se van a utilizar de cada uno
de los componentes principales, todo esto es especificado en el Manual 3.0 para la
implementación de la Estrategia de Gobierno en línea en las entidades de orden nacional
de la república de Colombia, que hasta el momento ha tenido seis versiones.
Con base en el documento mencionado anteriormente, es obligatorio que todas las
entidades estatales ó privadas que ejerzan funciones públicas, implementen la Estrategia
de Gobierno en línea. Pero se debe aclarar que es un proceso gradual, que posee fases
definidas en el modelo de madurez para que cada entidad pueda identificar, diagnosticar y
transformar sus operaciones tanto internas como externas de acuerdo a los lineamientos
establecidos.
La implementación de la Estrategia de Gobierno en línea es un proceso dinámico,
evolutivo e iterativo, basado en un principio de mejoramiento incremental y continuo, ya
que debe estar acorde a las necesidades tecnológicas del mundo, por este motivo ha
tenido seis versiones del manual de implementación en un lapso de tres años.
La Universidad Tecnológica de Pereira (que de ahora en adelante se mencionará por sus
siglas UTP), al ser una entidad pública de carácter nacional, de forma obligatoria viene
implementando cambios en las páginas web asociadas a la institución, siguiendo el
manual de Gobierno en línea y acogiéndose a sus lineamientos, para que así la institución
este acorde a los objetivos de desarrollo nacional y suplir las necesidades actuales de la
sociedad.
Actualmente el proceso de implementación de los lineamientos, estándares y criterios en
la UTP, está a cargo de la sección web del Centro de Recursos Informáticos y Educativos
(CRIE), bajo la dirección y coordinación de la señora Ángela María Vivas Cuesta,
quien manifestó que: “el proceso de implementación de la estrategia de Gobierno en línea
se viene realizando desde la publicación del Manual en su versión 2.0 hasta el momento,
haciendo énfasis en que este proceso es arduo y dispendioso, ya que cada una de las
36
versiones se actualiza cada vez en periodos más cortos, añadiendo o modificando
criterios”.20 Véase Anexo B
2.5 IMPLEMENTACIÓN DE GOBIERNO EN LÍNEA EN LA UTP
Al realizar el estudio del manual en su versión 3.0 para la implementación de la estrategia
de Gobierno en línea en las entidades de orden nacional de la República de Colombia, se
decidió analizar solo aquellas directrices que van acorde con el objetivo de este proyecto,
por lo que se obviaran muchas otras, que sin dejar de ser importantes, no tienen un gran
impacto en el proyecto.
Como se ha venido mencionando, existen varios niveles para la implementación de la
Estrategia de Gobierno en línea, la UTP está en el nivel inicial, donde se encuentran los
únicos 3 criterios a evaluar en este proyecto, la accesibilidad, la usabilidad y los
estándares web, la UTP se ha empeñado en cumplir a cabalidad estos 3 criterios.
A continuación se realizará el análisis al sitio web de la UTP, para hacer una lista de como
se están implementando los criterios de la Estrategia de Gobierno en línea, para luego
analizar el sitio web de ISC según estos criterios resultantes.
2.5.1 Criterio - Estándares del sitio web
“El nombre de dominio de la entidad debe tener el formato .gov.co, .edu.co o
.mil.co. Las Empresas Industriales y Comerciales del Estado, las Sociedades de
Economía Mixta y las Instituciones de Investigación, pueden tener dominio .com o
.org, pero deben habilitar adicionalmente el dominio .gov.co.” 21
El primer criterio de la Estrategia de implantación de Gobierno en Línea, habla sobre el
dominio que debe tener cada entidad, ya que la UTP se enmarca dentro de una institución
educativa el dominio para todos los sitios web de esta corresponde a un “.edu.co”,
resultando de la siguiente manera www.utp.edu.co (ver ilustración 13).
20
Basados en la entrevista realizada el día 15 de febrero del presente año a la Señora Ángela María Vivas Cuestas 21
PROGRAMA AGENDA DE CONECTIVIDAD – ESTRATEGIA DE GOBIERNO EN LÍNEA. Manual
para la implementación de la Estrategia de Gobierno en línea de la República de Colombia. Bogota.2011.
p.17.
37
Ilustración 13 Dirección URL de la página oficial de la UTP
Fuente: Los autores, UTP
“La imagen de identidad institucional deberá estar ubicada en la parte superior
izquierda, a la misma altura del escudo de la República de Colombia. Esta se debe
mantener, de manera estática y siempre disponible en cualquier nivel de
navegación. Igualmente, esta debe enlazar a la página de inicio desde cualquier
lugar de navegación.”22
Este punto es cumplido completamente por el sitio web de la UTP, el escudo de la
institución se encuentra ubicado en la parte superior izquierda como se sugiere, además,
está presente en el mismo lugar sin importar el sitio web en el que el usuario se encuentre
(ver ilustración 14), y es un enlace a la página de inicio de la UTP.
Ilustración 14 Ubicación del escudo de la UTP en la parte superior izquierda
Fuente: Los autores, UTP
22
Ibíd., p.17.
38
“En la página inicial debe aparecer la fecha de la última actualización del sitio
Web. También es válido que cada sección tenga su fecha de actualización.”23
En la esquina derecha inferior en el sitio web de la UTP se implementó un sistema para
determinar la fecha en la que se realizó la última actualización al sitio web de la institución
(ver ilustración 15).
Ilustración 15 Ultima actualización del sitio web de la UTP
Fuente: Los autores, UTP
“Se debe incluir un mapa del sitio Web en la página de inicio a través del cual se
permita acceder como mínimo a todas las secciones y subsecciones del mismo. Al
mapa, se debe tener acceso directo desde cualquier página del sitio” 24
Tener un mapa del sitio en un portal web, garantiza que el usuario puede localizar más
fácil lo que está buscando, además de poder filtrar la información y agilizar su estadía. El
sitio web de la UTP cuenta con un “Mapa del Sitio”, al que se puede acceder fácilmente a
través de un enlace (ver ilustración 16).
Ilustración 16 Mapa del sitio web de la UTP
Fuente: Los autores, UTP
23
Ibíd., p.17.
24
Ibíd., p.17.
39
“Se debe tener acceso directo a cualquier opción del menú principal del sitio web,
desde cualquier página del mismo.”25
Contar con un menú principal es una buena práctica para que el usuario se sienta siempre
orientado y contextualizado sobre lo que puede encontrar en el sitio web, la UTP permite
que los usuarios accedan a cualquier opción del menú principal (ver ilustración 17), sin
importar donde se encuentre el usuario.
Ilustración 17 Accesos directos a los sitios web del menú principal de la UTP
Fuente: Los autores, UTP
25
PROGRAMA AGENDA DE CONECTIVIDAD – ESTRATEGIA DE GOBIERNO EN LÍNEA. Manual
para la implementación de la Estrategia de Gobierno en línea de la República de Colombia. Bogota.2011.
p.17.
40
“En la página inicial se debe habilitar un mecanismo de búsqueda de los
contenidos del sitio web.”26
Los motores de búsqueda ayudan a que se agilice aun más el proceso de navegación de
un usuario dentro de un sitio web, al filtrar la información o ir al grano en lo que necesita,
permite que sea más agradable permanecer en el sitio y que este ultimo pueda prestar un
servicio de calidad, el sitio web de la UTP cuenta con su propio motor de búsquedas en su
sitio web (ver Ilustración 18) que le permite la búsqueda sobre el contenido que posean
todos los sitios dentro del dominio www.utp.edu.co.
Ilustración 18 Buscador interno del sitio web de la UTP.
Fuente: Los autores, UTP
Con estos 6 ítems, se abarca uno de los criterios del Nivel Inicial que tiene establecido el
programa de gobierno en línea, el de “Estándares del sitio web”. A continuación se
mencionan otros 2 criterios de interés para la interacción de los usuarios con el sitio:
“Usabilidad” y “Accesibilidad”
2.5.2 Criterio – Usabilidad.
Cuando se habla de usabilidad, se refiriere a la facilidad con la que los usuarios navegan
en el sitio, además de la sencillez y la comodidad para encontrar la información que
desean.
La usabilidad es otro de los criterios que exige la Estrategia de Gobierno en línea para ser
implementado en su nivel inicial, para que un sitio web este acorde con los objetivos de
desarrollo y apropiación de las TICs que se plantea el gobierno nacional.
26
Ibíd., p.17.
41
Es uno de los más importantes para trabajar en la remodelación del sitio web del
programa de ISC, teniendo en cuenta los lineamientos de usabilidad establecidos por la
estrategia de Gobierno en línea en el documento llamado Lineamientos y metodologías en
Usabilidad para Gobierno en línea27 formalizado por el mismo Gobierno en línea como la
guía a seguir para la usabilidad.
En el documento de lineamientos y metodologías en usabilidad para Gobierno en línea, se
establece que todas aquellas aplicaciones derivadas del cumplimiento de las fases de
Gobierno en línea, están sujetas al cumplimiento de las directrices en usabilidad, además
de enfatizar en los beneficios que incorpora el tener presente la usabilidad para el
desarrollo de los sitios web. Estos beneficios según Carvajal y Saab28 pueden ser:
Reducción de los costos de soporte y mantenimiento: Los sitios web fáciles de
usar requieren menos mantenimiento, entrenamiento y soporte.
Disminución de los costos de uso: La usabilidad aplicada a sitios web
disminuye el esfuerzo y permite a los usuarios disponer de una variedad más
amplia de tareas. Mientras que los sistemas difíciles de usar reducen el
bienestar, la salud y la motivación.
Reducción de los costos de aprendizaje: Un sitio web usable está organizado
de manera que se adapta de forma ideal al modelo mental de sus usuarios,
reduciendo de esta forma el tiempo necesario para su aprendizaje.
Menor soporte al cliente: Los sistemas usables son más fáciles de aprender y
de utilizar, comportando un menor costo de implantación y de mantenimiento.
Usuarios más satisfechos: cuando un usuario ha realizado su tarea con el
mínimo de esfuerzo posible, el sitio tendrá como resultado directo la
satisfacción de los usuarios.
Fidelidad en los usuarios: un sitio usable incrementa la posibilidad de un mayor
uso, tanto en frecuencia como en cobertura de funcionalidades usadas y
páginas web vistas.
Los beneficios que se muestran anteriormente, son beneficios que se deben tener
presentes en la reestructuración del sitio web del programa de ISC, ya que al enfrentarse
a una comunidad de usuarios bastante grande, es razonable brindarles una experiencia
agradable de navegación dentro del sitio.
27
CARVAJAL, Mario. SAAB, Juan, 2010. Lineamientos y metodologías en Usabilidad para Gobierno en
línea.
28
Ibíd., p.11.
42
Gobierno en línea define varios conceptos relacionados con usabilidad, entre los que se
encuentran la arquitectura de la información, el diseño de interacción, SEO (Search
Engine Marketing), diseño de interfaz de usuario, el periodismo digital, la accesibilidad
web y el diseño centrado en el usuario. De estos conceptos se tomarán únicamente
aquellos que la Universidad Tecnológica de Pereira haya considerado como los
necesarios para su sitio web, esto con el objetivo de no desencaminar el trabajo de su
objetivo principal que es seguir las bases tomadas por la UTP para sus sitios web y
aplicarlos luego a la remodelación del sitio web de ISC.
2.5.2.1 Criterios de Usabilidad tomados por la UTP. El sitio web de la UTP se basa en
algunas de las directrices que se encuentran en el documento de Lineamientos y
metodologías en Usabilidad para Gobierno en línea, para determinar en este estudio
cuáles son esas directrices, se realiza una comparación entre el documento y el sitio web
de la UTP y así obtener una lista, se debe resaltar que solo se tomaran las más
relevantes, alcanzables y que se encuentran contextualizadas en este proyecto.
2.5.2.1.1 Arquitectura de la Información. La arquitectura de la información trata
principalmente la forma de navegación del usuario partiendo de la ubicación, si es posible
retroceder o ir adelante debe ser sencillo y sin complicaciones para cualquier usuario, por
lo que es tan importante tener en cuenta estas condiciones al momento de desarrollar un
sitio web, a continuación se encuentra el análisis del sitio web de la UTP para obtener las
directrices que ha aplicado hasta el momento.
a. Navegación Global Consistente. El objetivo de la navegación global consistente
en otorgar al sitio web un menú donde se encuentre el conjunto de temáticas principales
que ofrece el sitio, esto respondería a la necesidad que el usuario posee de saber a
dónde dirigirse o que ofrece el sitio para este.
Para que exista una buena experiencia dentro del sitio para el usuario, debe saber en qué
lugar se encuentra el menú principal o global apareciendo en el mismo lugar y de la
misma forma a lo largo de todo el sitio web.
Uno de los objetivos de tener un menú principal es el de reducir el fenómeno de las
paginas huérfanas, paginas que su contenido parece individual al del sitio y el usuario no
puede establecer si se encuentra dentro del mismo sitio.29
“Si no existe una navegación global consistente a lo largo de todo el sitio, se estará
aumentando el riesgo de que el usuario se desoriente dentro del portal.”30
29
Ibíd., p31.
43
La UTP cumple este punto de usabilidad. La mayoría de los sitios que se crean deben
estar conformados por un menú principal, y sin importar en que parte del sitio se
encuentre este menú debe ser igual, como ejemplo se toma la rectoría de la UTP (ver
ilustración 17) donde se ve un menú en el sitio principal, y si se navega dentro del sitio de
la rectoría sin importar la ubicación el menú no cambiará.
Todos los sitios de la UTP cumplen de igual forma a la directriz como lo hace la rectoría,
por lo que se debe tomar como una directriz de usabilidad a tener en cuenta para el sitio
de ISC.
b. Navegación de Contexto. Este tipo de navegación como su nombre lo indica,
permite contextualizar al usuario sobre los temas en los que se encuentra navegando en
el momento y a cuales puede acceder luego, esto mejora la navegación del sitio porque
se puede dividir el sitio por secciones.
Algunos sitios web de la UTP cuentan con un menú principal que categoriza cada enlace,
es decir, divide por secciones el menú según el tema que se esté tratando, un ejemplo
claro de este, puede ser el sitio de ingenierías (ver ilustración 19), se puede observar un
menú que divide la información según diferentes tópicos.
c. Ruta de Migas. Como dice Carvajal y Saab, las rutas de migas son listas de los
enlaces ó sitios que el usuario ha seguido hasta llegar a cierto punto, sirven como
mecanismo de navegación auxiliar, además de permitir al usuario saber la jerarquía del
sitio y que tanto ha profundizado dentro de esta jerarquía.31
Estas rutas son aplicadas por la UTP dentro de sus sitios web, tienen su propio estilo y se
acomodan a las recomendaciones que da el documento de lineamientos de usabilidad de
Gobierno en línea.32 Se encuentran en un lugar dentro del sitio web, donde son fáciles de
reconocer y utilizar.
Un ejemplo de las rutas de miga implementadas en los sitios de la UTP, puede ser el sitio
del instituto de lenguas extranjeras (ILEX) (ver ilustración 20), donde se aprecia
claramente como esta lista indica el lugar donde se encuentra el usuario.
30
Ibíd., p.36.
31
Ibíd., p.36.
32
Ibíd., p.36.
44
Ilustración 19 Sitio oficial de la Facultad de Ingenierías UTP
Fuente: Los autores, UTP
Ilustración 20 Rutas de miga en el sitio del ILEX (Instituto de Lenguas Extranjeras)
Fuente: Los autores, UTP.
d. URL limpios. Las URL33 conocidas generalmente como direcciones, son
importantes en la usabilidad, y deben ser entendidas fácilmente por cualquiera, esto se
consigue eliminando de la URL símbolos como &, ?, = entre muchas más.
Tener URL limpias se justifica para el usuario, porque que puede ver claramente su
posición a través de la URL y así en ocasiones poder retroceder dentro de la jerarquía de
sitios que esté siguiendo.
33
Ibíd., p.38.
45
Otra ventaja es el posicionamiento en motores de búsqueda, ya que estos muestran la
URL en los resultados de búsquedas, y lo tiene en cuenta para generar otros resultados.
La UTP incluye esta directriz dentro del desarrollo de sus sitios web, como se puede ver
en el sitio de relaciones internacionales de la UTP (ver ilustración 21), donde los URL son
fáciles de leer y de entender en qué contexto se encuentran.
Ilustración 21 URL de un sub sitio de Relaciones Internacionales UTP
Fuente: Los autores
e. Enlaces bien formulados. Los enlaces son la conexión que hay entre varios
sitios web, por lo que se debe cuidar que esta conexión además de funcionar, sea fácil de
entender por el usuario del sistema. Esta facilidad se mide verificando que las palabras
con los que están formulados los enlaces sean claras, reconocibles y sin ambigüedades.34
La UTP hace uso de estos enlaces en la mayoría de sus sitios, por lo que también cumple
con este punto de usabilidad en la estrategia de Gobierno en línea.
f. Memoria a Corto Plazo. Es útil para los usuarios recordar cuales sitios se han
visitado anteriormente, por lo que es importante utilizar herramientas que faciliten
recordar. Una de estas herramientas es el cambio de color de los enlaces que se han
visitado (ver ilustración 22), facilitando al usuario recordar todo lo que ha estado
involucrado en su navegación previamente.
Ilustración 22 Enlace sin visitar y visitado del sitio web de la biblioteca UTP
ENLACE SIN VISITAR ENLACE VISITADO
Fuente: Los autores
34
Ibíd., p.43.
46
2.5.2.1.2 Diseño de interfaz de usuario. En usabilidad se refiere a la parte visual
de los sitios web, correspondiendo su implementación al diseñador gráfico. Por lo tanto,
solo se toman en cuenta aquellos elementos de los es posible realizar un estudio técnico
funcional.
a. Ubicación del logotipo. El número elevado de sitios web que contienen el
logotipo en su parte superior izquierda ha generado una especie de estándar global para
los usuarios, que de forma intuitiva saben que el logotipo los llevará al sitio inicial.35
La Universidad Tecnológica de Pereira cumple con este punto de usabilidad (ver
ilustración 14) en todos los sitios web que se encuentran en su dominio, como se
especificó en el criterio de estándares web. El logotipo sirve de enlace a la página
principal, conservando su misma ubicación.
b. Ancho del cuerpo de texto. El documento que presenta los lineamientos de
usabilidad establece, que para todos los sitios web del estado Colombiano, se debe
utilizar un número promedio de CPL (Caracteres por Línea), sugiere que el número de
CPL debe estar en un rango de 60 a 80 CPL.
Dado que el proceso de implementación de la estrategia de gobierno en línea es profundo
e intenso, la UTP aun no cuenta con este punto de usabilidad en todos los sitios web que
posee bajo su dominio.
c. Desplazamiento horizontal. Se ha establecido que para los sitios web del estado
Colombiano, se debe tener en cuenta la resolución mínima actual de los monitores, que
se estableció de 1024 X 768 pixeles, por lo que se sugiere que los sitios web tengan un
ancho de 960 pixeles, ayudando a no generar navegación horizontal dentro del sitio.
Como se ve en la ilustración 23, donde se muestra el código CSS del sitio web de la UTP,
cumple con este punto de usabilidad, ya que cuenta con un ancho de 960 pixeles, y lo
respeta para cualquier sitio web de su dominio.
35
Ibid,. p.48.
47
d. Independencia del navegador. En la actualidad los usuarios de internet están
conociendo y utilizando otros navegadores diferentes a internet Explorer, por lo que el
hecho de tener un sitio diseñado para cualquier navegador es obligatorio.
Existen estadísticas por parte de la W3SCHOOLS36 que demuestran que los usuarios van
cambiando más los navegadores tradicionales para dar lugar a otros (ver ilustración 24),
con esto se sustenta que estandarizar el sitio para cualquier navegador dará la misma
experiencia al usuario.
Ilustración 23 Código CSS del sitio web de la UTP donde muestra el ancho del sitio
Fuente: Los autores
36
W3SCHOOLS. Consultado el 22 de febrero de 2012 [En Línea]
http://www.w3schools.com/browsers/browsers_stats.asp
48
Ilustración 24 Estadística sobre uso de navegadores web mes a mes hecho por la W3Schools
Fuente: www.w3schools.com
Gracias a la implementación de las buenas prácticas en la codificación del sitio web de la
UTP, la visualización de este es igual para cualquier navegador web desde que soporten
completamente las versiones de HTML, CSS y JavaScript utilizado por la UTP.
e. Calidad del código. Codificar según los estándares, es primordial para garantizar
que el sitio web pueda verse de igual forma en la mayoría de los navegadores web,
además, para demostrar que el sitio web es de calidad por estándares mundiales.
Obtener la validación de la World Wide Web Consortium (W3C) es sencillo, se puede
realizar a través del validador que estos ponen a disposición del público en general en
validator.w3.org, el objetivo de este validador es encontrar los errores del código HTML
que posee el sitio en cuestión.
Al realizar la validación al sitio web de la UTP (ver ilustración 25), se encontraron solo dos
errores en todo el sitio web, dando a entender que aunque posea errores, se esta
haciendo lo posible por hacer cumplir con este punto importante en la usabilidad.
49
Ilustración 25 Validación de la W3C para el sitio web de la UTP (www.utp.edu.co)
Fuente: Los autores
2.5.2.1.3 Diseño De Interacción. En esta parte la usabilidad combina la interacción
del usuario con la visualización del sitio, ayudándolo a entender visualmente, y de forma
fácil, como debe ser su comportamiento dentro del sitio.
A continuación los puntos a cumplir:
a. Asociación de etiquetas y campos. Los formularios son una herramienta muy
importante dentro de los sitios web, estos sirven para recolectar información necesaria de
los usuarios, por lo tanto, especificar cómo se llena cada campo dentro de los formularios
de manera correcta, garantiza que la información que se está recolectando es correcta y
que no generará problemas posteriormente.
Se recomienda que los campos en los formularios tengan su etiqueta respectiva ubicada
en la parte superior, además de que exista un espacio en blanco entre estos dos y cuando
el campo en el formulario sea una lista, proveer un valor por defecto en el campo y no una
etiqueta.
La UTP también cumple con este punto de usabilidad, como se puede ver en el formulario
para ingresar al portal estudiantil (ver ilustración 26), se siguen las recomendaciones
hechas, etiquetando correctamente los campos a llenar, y además especificando
claramente que información se necesita para el campo.
b. Error en la página no encontrada. Los errores que resultan de la navegación del
usuario en el sitio web no son algo que se pueda eliminar por completo, por lo que es
necesario que siempre se esté informando al usuario en donde falló. Uno de los errores
más comunes es el error 40437, el cual indica que la solicitud de una página por parte del
37
LLOYD, IAN. The Perfect 404. A List apart. [En línea]. Consultado el 22 de febrero de 2012.
http://www.alistapart.com/articles/perfect404/
50
usuario falla porque la página no se encuentra. De esta forma el sitio debe generar un
mensaje particular o re-direccionar a otra página especial que indique al usuario que ha
cometido este error, y guiarlo de manera adecuada.
La Universidad Tecnológica de Pereira posee un mensaje de error 404 personalizado (ver
ilustración 27) garantizando el cumplimiento de la directriz de gobierno en línea, además
de ayudar al usuario con sugerencias y recomendaciones.
Ilustración 26 Formulario para el ingreso al portal estudiantil de la UTP
Fuente: Los autores, UTP
Ilustración 27 Página de Error 404 de la Universidad Tecnológica de Pereira
Fuente: Los autores, Universidad Tecnológica de Pereira
51
2.5.2.1.4 Búsqueda a. Motor de Búsqueda y Ubicación. Dotar al sitio web con un motor de búsqueda permite a los usuarios que les gusta ser breves dentro de los sitios web, tener la posibilidad de encontrar lo que necesiten de manera fácil y rápida.
El documento de lineamientos de usabilidad de Gobierno en línea recomienda que el
buscador se encuentre en la esquina superior derecha, además que el cajón de búsqueda
tenga un tamaño razonable, preferiblemente 27 caracteres, para que el proceso de
búsqueda sea una experiencia cómoda para el usuario.
El buscador que se implementa para el sitio web de la Universidad Tecnológica de Pereira
(ver ilustración 28) es provisto por Google, pero con la garantía de que solo relaciona
búsquedas dentro de los sitios web de la Universidad.
Ilustración 28 Buscador del sitio principal de la UTP
Fuente: Los autores, UTP.
2.5.3 Criterio – Accesibilidad web.
Cuando se habla de Accesibilidad web, se hace referencia un sitio web con acceso
universal, sin importar el software, hardware, Infraestructura de red, cultura, idioma,
localización ó capacidades de los usuarios, además, que la información expuesta en el
sitio web pueda ser consultada, analizada e interpretada por cualquier persona,
independiente de las capacidades físicas, mentales o tecnológicas que esta tenga.
52
Para este criterio, Gobierno en línea se apoya en la World Wide Web Consortium
(W3C)38, comunidad internacional dedicada a desarrollar estándares, protocolos y pautas
para la web, en especial en la Iniciativa de Accesibilidad Web (WAI)39.
WAI es una actividad desarrollada por la W3C, con el fin de garantizar el acceso a los
sitios web de las personas con alguna discapacidad, por medio de pautas de accesibilidad
web, herramientas para la evaluación y reparación de la accesibilidad, además de llevar
un proceso educativo y de concientización de la importancia del diseño de sitios web
accesibles.
2.5.3.1 Pautas de Accesibilidad al Contenido en la Web (WCAG 1.0). Con el objetivo
de desarrollar contenido web accesible, se han establecido una serie de pautas que
proporcionan soluciones de diseño, y que cuentan con tres niveles de prioridad para
verificar errores.
Niveles de prioridad:
Prioridad 1: son todos aquellos puntos que un desarrollador web tiene que
cumplir, porque de otra manera, cierto grupo de usuarios no podrían acceder a la
información del sitio web.
Prioridad 2: son aquellos puntos que un desarrollador web debería cumplir,
porque de no ser así, sería muy difícil de acceder a la información para ciertos
grupos de usuarios.
Prioridad 3: son aquellos puntos que un desarrollador Web debería cumplir
porque de otra forma, algunos usuarios experimentarían dificultades para
acceder a la información.
Según los tres niveles de verificación, se establecen los niveles de conformidad:
Nivel de Conformidad "A": todos los puntos de verificación de prioridad 1 se
cumplen.
Nivel de Conformidad "AA": todos los puntos de verificación de prioridad 1 y 2
se cumplen.
38
Sobre W3C [En línea]
Consultado: 19 de Febrero de 2012
http://www.w3c.es/
39
Sobre WAI [En línea]
http://www.w3c.org/WAI/
53
Nivel de Conformidad "AAA": todos los puntos de verificación de prioridad 1,2 y
3 se cumplen.
Con estas pautas se busca hacer páginas web accesibles y mucho más flexibles sin
comprometer el diseño.
Actualmente se trabaja a nivel mundial con la versión 2.0 de la WCAG40
2.5.3.2 Pautas de Accesibilidad al Contenido en la Web (WCAG 2.0). A diferencia de
la WCAG 1.0, la WCGA 2.0 se fundamenta en 4 principios fundamentales para la
accesibilidad:
Principio 1: El contenido debe ser perceptible.
Principio 2: Los elementos de la interacción presentes en el contenido han de ser
manejables.
Principio 3: El contenido y los controles deben ser comprensibles.
Principio 4: El contenido debe ser suficientemente robusto para funcionar con las
tecnologías actuales y futuras.
Cada principio tiene asociado doce directrices; cuatro en el principio 1 y 2, tres directrices
en el principio 3 y una directriz en el principio 4. A su vez, cada directriz tiene Criterios
de éxito asociados, treinta y ocho (38) en total, estos criterios están ordenados según
los siguientes niveles de conformidad.
Niveles de conformidad:
WCAG 2.0 Nivel A: cuando se cumplen todos los criterios de éxito de nivel 1 (A)
de todas las directrices o se proporciona una versión alternativa conforme al nivel
A.
WCAG 2.0 Nivel AA: cuando se cumplen todos los criterios de éxito de nivel 1 (A)
y de nivel 2 (AA) de todas las directrices, o se proporciona una versión alternativa
conforme al nivel AA.
40
Pautas de accesibilidad al contenido en la Web (WCAG) 2.0, Recomendación W3C Consultado: 21 de
Febrero 2012 [En línea] http://www.w3c.org/TR/WCAG20/26
54
WCAG 2.0 Nivel AAA: cuando se cumplen todos los criterios de éxito de nivel 1
(A), de nivel 2 (AA) y de nivel 3 (AAA) de todas las directrices, o se proporciona
una versión alternativa conforme al nivel AAA.
La implementación de la Estrategia de Gobierno en línea, en su fase inicial, exige que las
entidades públicas ó privadas con funciones públicas se encuentren en el nivel de
conformidad A de la WCAG 2.0 según la norma NTC 585441, de acuerdo con lo anterior,
la UTP ha realizado una ardua labor para cumplir con esta exigencia.
En el año 2009 se llevo a cabo un proyecto donde se identificaron vulnerabilidades o
fallas con respecto a la accesibilidad por parte del sitio web de la UTP42, evaluando
además, el grado de accesibilidad con el que este sitio web contaba, proponiendo las
respectivas mejoras para hacerlo accesible.
Actualmente el sitio web de la Universidad Tecnológica de Pereira cuenta con la
especificación AA de la WCAG 2.0, como lo muestra la Ilustración 29, demostrando que
cumple con el criterio de accesibilidad exigido por parte de la Estrategia de Gobierno en
línea.
Con la sumatoria de estos tres criterios (Estándares del sitio web, Usabilidad y
Accesibilidad) en la implementación de la Estrategia de Gobierno en línea en su fase
inicial, la Universidad Tecnológica de Pereira, está cada vez más cerca de cumplir el
objetivo propuesto por el gobierno nacional de ser una entidad con procesos
transparentes, participativa y acorde a las necesidades tecnológicas y sociales del mundo.
41
Norma de Accesibilidad web. Consultado el 16 de febrero de 2012 [En línea]
http://www.lalibreriadelau.com/libros-de-medicina-ca30_42/ntc-norma-tecnica-colombiana-ntc-5854
accesibilidad-paginas-p150120
42
TRIANA, Jhon. GUTIERREZ, Natalia. Evaluación del grado de accesibilidad de la web a la Universidad
Tecnológica de Pereira mediante la especificación doble A de WCGA 2.0 [En línea]
http://repositorio.utp.edu.co/dspace/bitstream/123456789/1338/1/0250422T821.pdf
55
Ilustración 29 validador de Accesibilidad web aplicado al sitio web de la UTP
Fuente: http://achecker.ca/checker/index.php
56
2.6 IMAGEN INSTITUCIONAL DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA
El proceso de implementación de la Estrategia de Gobierno en línea en la UTP, va de la
mano del proyecto de identidad corporativa43, presentado el 8 de abril de 2008; donde por
medio de este, se busca generar un fortalecimiento de la memoria visual, distinción y
diferenciación de las otras instituciones educativas del orden superior.
Con el proyecto de identidad corporativa, se busca generar en la población académica y
comunidad en general, sentido de pertenecía por la Universidad Tecnológica de Pereira.
El CRIE expuso el proyecto ante el Honorable Consejo Superior de la UTP, donde se
planteó la idea de incentivar el sentido de apropiación por medio de la reestructuración de
la imagen institucional, siendo el escudo el principal elemento a modificar.
En este proyecto se plantean pautas con respecto a la buena utilización del escudo de la
UTP, donde se enfatiza en que este es la marca visible de la Universidad, por lo tanto no
se debe modificar y siempre debe conservar los mismos criterios:
Una forma circular, dividida en su interior por tres secciones, una de color azul otra
de color rojo y la última de color verde, respectivamente. Rodeadas por un circulo
externo de color café, donde se inscribe una inicial en latín. (ver ilustración 30).
Toda corporación bien formada cuenta con una marca que la distinga y diferencie de las
otras corporaciones, este es el caso de la UTP, donde la marca está formada según el
Manual básico de normas de uso del identificador44 por dos elementos inherentes, el
escudo y el nombre, estos elementos solo tienen dos posibilidades para presentarse
dependiendo del contexto en donde se van a utilizar:
La primera, con el nombre a la derecha del escudo, que es la forma recomendada
por el CRIE para trabajar en cualquier contexto.
La segunda, con el nombre en la parte inferior del escudo (ver ilustración 31)
43
Universidad Tecnológica de Pereira. Acuerdo No 13 de 2008 Proyecto de Imagen Corporativa
[Consultado: 16 de enero de 2012] [En línea]
http://www.utp.edu.co/secretaria/index.php/informacion-general/1329/acuerdo-no-13-por-medio-del-cual-se-
aprueba-el-proyecto-de-imagen-corporativa-en-su-primera-fase-y-se-dictan-otras-disposiciones
44
Universidad Tecnológica de Pereira. Manual Básico de normas de uso del Identificador
[Consultado: 16 de enero de 2012] [En línea]
http://media.utp.edu.co/informacion-institucional/archivos/manual-de-identidad-institucional/manual-
identificador-utp.pdf
57
Ilustración 30 Escudo de la Universidad Tecnológica de Pereira
Fuente: Manual Básico de Normas de uso del Identificador
El tipo de letra del nombre no se debe alterar y debe conservar las letras en altas y bajas
como lo vemos en la Ilustración 28.
58
Ilustración 31 Formas Únicas para utilizar la marca de la UTP
Fuente: Manual Básico de Normas de uso del Identificador
El CRIE en el Manual Básico de Normas de uso del Identificador, define el tamaño mínimo
que debe tener la marca para que no pierda sus propiedades. Se especifica qué tipo de
letra se debe utilizar (siempre es “Times New Román”), por tratarse del estándar más
difundido a nivel mundial, además, especifica el color de letra que debe tener el nombre,
según el color del fondo:
Color blanco cuando el fondo es oscuro (ver ilustración 32 lado a.)
Color Negro cuando el fondo es claro (ver ilustración 32 lado b.)
Ilustración 32 Color de letra según el color de fondo de la marca
Fuente: Manual Básico de Normas de uso del Identificador
59
El color institucional de la Universidad es el azul, pero con el objetivo de diferenciar cada
una de sus dependencias, se realizo una variación de los colores de la bandera de la
Universidad Tecnológica de Pereira para asignar un color específico a cada una, como lo
podemos ver en la ilustración 33.
Ilustración 33 Banners de las Diferentes Dependencias
Fuentes: Los autores, UTP
60
Según la entrevista realizada a la Señora Ángela María Vivas (Coordinadora de la sección
web del CRIE), las nueve facultades de la Universidad Tecnológica de Pereira cuentan
con un color específico cada una, que las resalta, enaltece y diferencia de las demás.
Estos colores han sido preservados en la implementación de nueva imagen institucional.
Los banners de los sitios web de la UTP, además de contar con el color correspondiente a
la facultad, tienen como elemento adicional semicírculos, que son una proyección de la
forma circular del escudo de la Universidad, además, cuentan con el título de la faculta, el
programa ó la dependencia en tipo de letra “Times New Roman” de color blanco. (ver
ilustración 34)
El color que le corresponde al programa de Ingeniería de Sistemas y Computación es el
mismo que le corresponde a la facultad de Ingenieras, así que todo desarrollo debe
implementar la imagen institucional que proyecta la facultad de Ingenierías. (Ver
ilustración 31)
Ilustración 34 Banner de la Facultad de Ingenierías
Fuente: Los autores, UTP
Todas las páginas que estén bajo el dominio de la Universidad Tecnológica de Pereira
deben contar la imagen institucional establecida, para que así sea reconocida como parte
de la institución, también, para ayudar a fortalecer la imagen de unidad que quiere
transmitir la Universidad a nivel interno y externo.
61
CAPITULO 3: EVALUACIÓN DEL SITIO WEB
62
3 EVALUACIÓN DEL SITIO WEB DE ISC
Según el estudio realizado anteriormente a los sitios web de la UTP, se determina que las
directrices ó lineamientos que posee la Universidad para el desarrollo de sus sitios web,
están formulados en su mayoría por los criterios de estándares web, usabilidad y
accesibilidad de la Estrategia de Gobierno en Línea, además de agregar su propia imagen
institucional, basada en los colores de los emblemas de la institución.
Para poder llevar a cabo el estudio de la reestructuración del sitio web de ISC, se deben
tener claros todos los lineamientos utilizados para la construcción de los sitios web de la
UTP, siendo estos lineamientos, las directrices impuestas por la Estrategia de Gobierno
en línea.
Se realizará el análisis comparativo de los criterios de la UTP con el sitio web del
programa de ISC, para determinar la lista de lineamientos que deben ser seguidos por el
programa en la reestructuración de su sitio web.
3.1 CRITERIOS DEL NIVEL INICIAL DE GOBIERNO EN LÍNEA QUE SE CUMPLEN
EN EL SITIO WEB DE LA UTP.
3.1.1 Criterios de Estándares Web:
El Sitio web de la UTP cumple con: El Sitio web de ISC Cumple con el
criterio?
[ SI / NO]
1.El nombre del dominio del sitio tiene el
formato .edu.co
SI
2. La imagen de la institución se ubica en la
parte superior izquierda, y se mantiene de
manera estática en cualquier pagina del sitio
al igual que enlaza siempre a la página de
inicio
SI
3. En la pagina Inicial aparece la fecha de la
última actualización
NO
4. Se incluye un mapa del sitio web en la
página inicial.
NO
63
5. Se tiene acceso al menú principal en
cualquier nivel del sitio
NO
6. Se cuenta con algún mecanismo de
búsqueda para los contenidos del sitio web
NO
Tabla 1: Criterio – Estándares del sitio web
Se muestra los seis puntos más relevantes del criterio de estándares web aplicados en el
nivel inicial de la Implementación de la Estrategia de Gobierno en línea, según el Manual
3.0.
Estos puntos, son aquellos que la Universidad Tecnológica de Pereira esta cumpliendo, y
que serán un punto de referencia para la reestructuración del sitio web de Ingeniería de
Sistemas y Computación (isc.utp.edu.co).
De los seis puntos, el sitio web de Ingeniería de Sistemas y Computación cumple solo con
dos, por lo tanto, deben ser revisados en la reestructuración del sitio web de ISC. Objetivo
principal de este proyecto.
3.1.2 Criterio de accesibilidad.
Basándose en los parámetros de la World Wide Web Consortium (W3C), en la sección de
Web Accessibility Iniciative (WAI), se realizó una evaluación de accesibilidad al sitio actual
de Ingeniería de sistemas y computación (isc.utp.edu.co) de la Universidad Tecnológica
de Pereira en el validador Achecker.ca siendo una de las herramientas de evaluación de
accesibilidad recomendada por la W3C, donde se encontraron 11 problemas, (ver
ilustración 35). En la otra herramienta de evaluación recomendada, tawdis.net, se
encontraron 35 problemas de prioridad 1 y 40 problemas de prioridad 2, (ver ilustración
36). Estos problemas dificultan que una persona con alguna discapacidad tecnológica,
física o cognitiva pueda navegar fácilmente en el sitio web.
64
Ilustración 35 Resultado de Accesibilidad del sitio web de ISC
Fuente: http://achecker.ca/checker/index.php
Ilustración 36 Resultado de Accesibilidad del Sitio web de ISC en T.A.W3
Fuente: http://www.tawdis.net/
65
3.1.3 Criterio de Usabilidad.
El documento de usabilidad que ofrece Gobierno en línea, define todos los puntos de
usabilidad que se deben cumplir en los sitios web. Los puntos del documento se
compararon con el sitio web de la UTP para determinar cuáles se encuentran
implementados.
A continuación, se realizará el comparativo en los cuatro contextos de usabilidad definidos
en el documento de usabilidad de Gobierno en línea (Arquitectura de la información,
Diseño de Interfaz de Usuario, Diseño de Interacción y Búsquedas), entre los puntos del
criterio de usabilidad de la UTP en cada uno de estos niveles, con la página actual de
ISC, para buscar cuales criterios se están cumpliendo.
Para este primer contexto se tomaron en cuenta los cuatro ítems de usabilidad que están
implementados actualmente por la UTP y que van acordes con este proyecto.
3.1.3.1 Arquitectura de la Información
a. Navegación Global. La Navegación global del sistema, siendo la facilidad de
encontrarse con un menú que ofrezca el contenido principal del sitio, para que el usuario
pueda saber que puede encontrar en el sitio web.
El sitio web actual de ISC no cuenta con este criterio, por lo que se reduce el apoyo en la
movilización entre los temas generales del sitio, quedando solo con una herramienta para
movilizarse, el menú contextual.
b. Navegación del contexto. Contextualizar al usuario sobre los temas que se
tratan en el sitio web en el que se encuentra. El sitio web actual de ISC cuenta con su
propio menú contextual, (ver ilustración 37), en donde se muestra al usuario hacia donde
puede ir o que puede encontrar en el sitio web.
El sitio actual de ISC cumple con este criterio exigido en usabilidad por gobierno en línea,
apoyándose en su menú principal para guiar a sus usuarios hacia la información de forma
organizada.
66
Ilustración 37 Menú principal del sitio web de ISC
Fuente: Los autores, ISC
c. Ruta de Migas. El sitio web actual de ISC no cumple con el criterio de las migas,
impidiendo al usuario conocer bien su ubicación mientras navega a través del sitio.
d. URL limpios. El sitio actual de ISC no cumple el criterio de tener URL limpios en
el sitio web (ver ilustración 38), causando posibles problemas con la navegación de
usuario, ya que este no podrá localizar su ubicación a través de la URL, además, de no
tener URL limpias hará que pierda posicionamiento con los motores de búsqueda.
Ilustración 38 URL de una sección del sitio web de ISC
Fuente: los autores, ISC
67
3.1.3.2 Diseño de Interfaz de usuario
a. Ubicación del logotipo. Este punto de usabilidad se está cumpliendo por parte
del sitio web de ISC actualmente (ver ilustración 39). Se ubica el logotipo de la UTP a la
izquierda de la parte superior y es de resaltar, que este debe estar porque es la institución
principal a la que el programa de ISC pertenece.
Ilustración 39 Logotipo de la UTP en el sitio de ISC
Fuente: los autores, UTP
b. Ancho del cuerpo del texto. El ancho del cuerpo del texto no se está cumpliendo
dentro del sitio actual de ISC (ver ilustración 40) el texto que se encuentra en algunos
párrafos del sitio web de ISC se extiende a 171 CPL (Caracteres por línea), cuando el
criterio establece que lo recomendado es tener un rango de 60-80 CPL en el texto de los
sitios web.
Ilustración 40 Párrafo con 171 CPL en el sitio web de ISC
Fuente: los autores, ISC
68
c. Desplazamiento Horizontal. El desplazamiento horizontal no es un problema con
el que cuente el sitio web actual de ISC, permitiendo que la navegación en el sitio por
parte del usuario sea cómoda en el aspecto de tener toda la información del sitio web en
movimiento vertical.
d. Independencia del navegador. La forma en que se visualiza el sitio web de ISC
en cualquiera de los navegadores es igual, resaltando el buen seguimiento de los
estándares web actuales, esto favorece al programa, porque la información puede ser
vista por cualquier usuario sin importar la plataforma en la que se encuentre navegando.
3.1.3.3 Diseño de Interacción
a. Error en la página no encontrada. El sitio actual de ISC no cumple con este
criterio de usabilidad, al ingresar una URL errónea dentro del dominio isc.utp.edu.co, no
se presenta al usuario ningún tipo sugerencia o guía para internar buscar otro sitio web
(ver ilustración 41), ocasionando la perdida de la ubicación del usuario y la navegación
dentro del sitio.
Ilustración 41 Mensaje de error al ingresar una URL errónea en el dominio de isc.utp.edu.co
Fuente: los autores
69
3.1.3.4 Búsquedas
Este criterio tampoco se cumple, dificultando la navegación de los usuarios que desean
ser breves.
El sitio actual no cuenta con un motor de búsqueda interno que permita al usuario realizar
un proceso de selección de la información a la que desea ingresar.
Resumiendo las comparaciones entre los criterios de usabilidad anteriores, se puede
notar que faltan muchos de los criterios de usabilidad establecidos por la UTP según el
manual de lineamientos de usabilidad45 en el sitio actual de ISC, demostrando que si es
necesario un cambio en la estructura de este sitio.
El hecho de que falten criterios tan importantes como el mensaje de error de las paginas
no encontradas, facilita demostrar que el sitio aun se encuentra crudo en muchos
aspectos, y que siendo la presentación del programa de ISC, aun no demuestra la
suficiente seriedad o confianza para los usuarios que la visitan y navegan a través de ella.
3.2 IMAGEN INSTITUCIONAL DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA
El sitio actual de Ingeniería de Sistemas y Computación (ISC) no cumple con la imagen
institucional de la Universidad Tecnológica de Pereira, dificultando que la Universidad
tenga una imagen unificada, además, que no se reconozca al sitio web de ISC como parte
de la Universidad.
El sitio web actual de ISC no cumple con los colores ni el estilo establecidos para la
facultad a la que pertenece, en este caso la facultad de ingenierías, como lo podemos ver
en la ilustración 42.
Ilustración 42 Uso correcto e incorrecto respectivamente de los Colores de la Faculta de Ingeniería
45
CARVAJAL, Mario. SAAB, Juan, 2010. Lineamientos y metodologías en Usabilidad para Gobierno en
línea.
70
Fuente: Los Autores, UTP, ISC
Además, no cumple con el tipo, tamaño y posición de letra que lleva el título del
programa, establecidos en el proyecto de imagen institucional. (Ver ilustración 43)
Ilustración 43 Uso Incorrecto del tipo del letra en el nombre del programa
Fuente: Los Autores, ISC
El logo de Ingeniería de Sistemas y Computación (ISC) no debe de estar al mismo nivel
del logo de la Universidad Tecnológica de Pereira, ya que en esta posición se debe
encontrar el escudo de Colombia, está establecido por los criterios de Gobierno en línea y
la imagen institucional. (Ver ilustración 44).
Ilustración 44 Uso Incorrecto del Logo de ISC
Fuente: Los Autores, ISC
3.3 RECOLECCIÓN DE INFORMACIÓN Y ANÁLISIS DE REQUERIMIENTOS
La información funcional del sitio web de Ingeniería de Sistemas y Computación, fue
obtenida mediante el trabajo realizado en el proyecto de grado denominado “Portal web
2.0 del programa de ingeniería de sistemas y computación, para la difusión de información
71
y la comunicación social de la comunidad” donde se llevaron a cabo reuniones periódicas
con el director del programa el señor CARLOS AUGUSTO MENESES, para conocer los
requerimientos funcionales del programa en el sitio web.
Es por ese motivo que en este proyecto no se realizará ningún requerimiento funcional, ya
que esta tarea fue realizada con éxito, entonces, solo se plantearan dos requerimientos
no funcionales para la reestructuración del sitio web de ISC.
3.4 ASPECTOS RELEVANTES DEL SITIO WEB ACTUAL DE INGENIERÍA DE
SISTEMAS Y COMPUTACIÓN
Gestión del contenido
Publicar información.
Proveer los mecanismos para la publicación de la información.
Actualización de la presentación del portal.
Proveer los mecanismos para la actualización de las imágenes que hacen parte de la presentación del portal.
Almacenamiento de datos
Almacenamiento de los datos de validación Almacenar en memoria el nombre del estudiante y el código. Almacenar en memoria el nombre del profesor y la cedula.
Almacenamiento de la información Almacenar en memoria la información ingresada a publicar por el administrador.
Almacenamiento de las imágenes Almacenar en memoria las imágenes ingresadas a publicar por el administrador.
Almacenamiento de datos de los perfiles Almacenar le memoria los datos ingresados por los usuarios (estudiantes y profesores) registrados en el login.
Gestión de perfiles
Crear el perfil
Editar el perfil
72
Activar/desactivar el perfil
Búsqueda de perfiles El sistema debe recopilar todos los perfiles que correspondan al criterio de búsqueda y permitir que se visualice la información de los mismos.
Acceso a la información
Acceso a la información publicada Permitir al usuario visualizar la información publicada por el administrador.
Acceso a sitios web externos Permitir al usuario por medio de enlaces directos ingresar a otros sitios web de interés.
Acceso al información de perfiles Permitir al usuario (profesor o estudiante) acceder a la información publicada en el perfil. (Véase el Anexo A)
3.5 REQUERIMIENTOS NO FUNCIONALES
3.5.1.1 Banner con imágenes alusivas al programa de Ingeniería de Sistemas y
Computación. En la parte superior de la página, debajo del banner institucional, debe de
ir un banner con un ancho casi igual al ancho de la página, que muestre constantemente
imágenes referentes al programa de Ingeniería de Sistemas y Computación.
Estas imágenes deben cambiar aproximadamente cada 8 segundos, y deben tener el logo
de Ingeniería de Sistemas y Computación siempre en la misma posición. Como se
muestra en el cuadro rojo en la parte superior de la Ilustración 45.
3.5.1.2 Banner de Información Académica del Programa de Ingeniería de Sistemas
y Computación. En la parte derecha de la pagina, debajo del banner de imágenes del
programa, debe ir otro banner con un ancho de aproximadamente un cuarto de la página.
(Ver ilustración 45, cuadro rojo a la derecha), la información que este banner va a tener,
es de carácter informativo, donde se muestran por medio de gráficas los resultados del
programa en aspectos como:
Número de matriculados en cada periodo en los últimos años.
Numero de graduados en cada periodo en los últimos años.
Resultados obtenidos en la prueba de saber pro antes ECAES.
Resultados de las últimas maratones de programación.
Logos de los grupos de investigación.
73
Ilustración 45 Prototipo del nuevo sitio web de ISC
Fuente: Los Autores
74
CAPITULO 4: PROPUESTA DEL SITIO WEB
75
4 PROPUESTA PARA EL SITIO WEB DE INGENIERÍA DE SISTEMAS Y
COMPUTACIÓN
Con el objetivo de que el sitio web de Ingeniería de Sistemas y Computación (ISC) cumpla
los lineamientos de desarrollo web de la Universidad Tecnológica de Pereira, siendo estos
la unión de varios criterios de la Estrategia de Gobierno en línea y la Imagen Institucional
de la UTP, se plantea la reestructuración del sitio web del programa de ISC actual,
utilizando estos lineamientos de desarrollo web, ya que son indispensables para cumplir
con el proceso continuo de calidad y evolución de los servicios web del país.
4.1 PROPUESTA PARA CUMPLIR LOS CRITERIOS DE ESTÁNDARES WEB
EXIGIDOS POR GOBIERNO EN LÍNEA
Según el Manual 3.0 para la implementación de la Estrategia de Gobierno en línea de la
República de Colombia46, existen criterios específicos que deben cumplir las entidades
públicas o entes privados con funciones públicas. La Universidad Tecnológica de Pereira
en su calidad de institución educativa de carácter pública, cumple con estos criterios, por
lo tanto el sitio web de Ingeniería de Sistemas y Computación de dicha Universidad debe
cumplir con ellos.
A continuación, se describen cada uno de estos criterios, que se verán reflejados en la
reestructuración del nuevo sitio web de Ingeniería de Sistemas y Computación (ISC).
El dominio del sitio web de Ingeniería de Sistemas y Computación (ISC)
isc.utp.edu.co cumple con el formato .edu.co exigido por Gobierno en línea, por lo
que se dejará de esta forma.
.
El escudo de la República de Colombia se ubicara en la parte superior derecha
con la inscripción “República de Colombia” y se mantendrá de forma estática en
todas las páginas del dominio.
En el sitio web de ISC, el logo de la Universidad Tecnológica de Pereira se
encuentra en la parte superior izquierda a la misma altura del escudo de la
República de Colombia, y enlazará a la página principal de la UTP.
Se propone que la página inicial del sitio web de ISC, cuente con un sistema que
muestre la última actualización realizada sobre el sitio.
46
PROGRAMA AGENDA DE CONECTIVIDAD – ESTRATEGIA DE GOBIERNO EN LÍNEA. Ministerio
de Tecnologías de la Información y las Comunicaciones de la República de Colombia. Manual para la
implementación de la Estrategia de Gobierno en línea de la República de Colombia. Bogota.2011.
76
La página de inicio contara con un link en el menú principal que diga “Mapa del
Sitio” permitiendo a los usuarios ver fácilmente la estructura de todo el sitio web.
Se propone que el sitio web cuente con un menú principal, que podrá ser accedido
en cualquier momento durante la navegación de los usuarios.
Se contará con un mecanismo de búsqueda para los contenidos del sitio web.
En la Ilustración 46, se observan resaltados por un cuadro rojo algunos de los criterios
exigidos por los lineamientos de desarrollo web de la UTP ya implementados en el sitio
web de ISC.
Ilustración 46 Algunos Criterios de Estandartes web en el nuevo sitio web de ISC
Fuente: Los Autores
77
4.2 CRITERIO DE ACCESIBILIDAD
Para la propuesta del nuevo sitio web de Ingeniería de Sistemas y Computación se
plantea corregir los errores expuestos en la ilustración 32 y 33, que corresponden a los
inconvenientes técnicos con los que el sitio actualmente cuenta, como la falta de texto
alternativo en las imágenes, el no cumplimiento de algunos estándares web, tener
identificadores en el código repetidos y muchos otros.
Al corregir los problemas de accesibilidad con los que cuenta el sitio en este momento, se
busca mejorar la interacción entre cualquier usuario con el sitio, para que la experiencia
de visitar esta plataforma informática sea agradable, intuitiva y beneficiosa para el
usuario.
4.3 CRITERIO DE USABILIDAD
Con base en el estudio de usabilidad realizados en este proyecto, se encontró que
existen varios puntos claves que deben ser cumplidos al momento de realizar una página
web, por lo que la propuesta de reestructuración del sitio web del programa de ISC debe
contar con ellos.
A continuación se exponen las propuestas en cuestión de usabilidad, para aplicarlas a la
reestructuración del sitio web de ISC.
4.3.1 Arquitectura de la Información
a. Navegación Global. Se propone que el sitio web del programa de Ingeniería de
Sistemas y Computación (ISC), cuente con su propio menú principal en todo su dominio,
permitiendo que los usuarios puedan saber que encontrar en el sitio web, este menú debe
estar implementado como el de la Universidad Tecnológica de Pereira, ubicándolo en la
parte superior de la pagina y sin cambiar de posición en ningún momento.
El Menú principal tendrá el Mapa del sitio, un enlace al sitio principal, un enlace a la
página de contacto y un enlace al sitio que muestra la información principal del programa.
b. Navegación de Contexto. El sitio web actual de Ingeniería de Sistemas y
computación cuenta con un menú que permite a los usuarios contextualizarse fácilmente
sobre lo que el sitio les ofrece, por lo que se mantendrá el mismo menú del sitio actual,
pero implementado con la imagen institucional de la UTP.
78
c. Ruta de Migas. Al realizar el estudio para determinar los puntos de usabilidad
que no se cumplían por parte del sitio web de ISC, se encontró que las rutas de migas no
están implementadas, por lo que se propone implementarlas para la reestructuración del
sitio web.
d. URL Limpios. Se propone estructurar las URL de forma que puedan ser más
fáciles de memorizar, entenderse y visualizar por cualquier usuario que visite el sitio web,
evitando utilizar caracteres extraños ó especiales.
4.3.2 Diseño de Interfaz de Usuario
a. Ubicación del logotipo. Como dicen Carvajal y Saab, la ubicación del logotipo en
la esquina superior izquierda, se ha tomado por los usuarios como un estándar de facto,
que son estándares que se imponen por la reiteración en el uso.
Se propone, que el logotipo de la Universidad Tecnológica de Pereira este independiente
del banner superior, que se encuentre a la izquierda superior del sitio web y a la vez que
este logotipo sea un enlace a la página principal de la Universidad.
b. Ancho del Cuerpo. Para la reestructuración del sitio web de ISC, se plantea
reducir el ancho del sitio, por medio del estándar de 60 a 80 CPL (Caracteres por Línea)
para todos los párrafos que estén en el sitio web, para cumplir con esto un punto
importante de usabilidad.
4.3.3 Diseño de Interacción
a. Error en la página no encontrada. Se tratará de implementar la página de error
que guie al usuario en su navegación cuando se encuentre con un error por falta de algún
recurso, proponiendo desarrollar para el sitio web de ISC la pagina de error 404 que
posee el sitio web de la UTP actualmente.
4.3.4 Búsquedas.
Se tratará de implementar un buscador para el sitio web del programa de ISC,
aprovechando las herramientas que provee la empresa Google, permitiendo que solo se
busque dentro del dominio de isc.utp.edu.co.
79
4.4 IMAGEN INSTITUCIONAL DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA
La propuesta de reestructuración del sitio web de Ingeniería de Sistemas y computación
(ISC) estará acorde a lo establecido en el proyecto de Imagen Institucional de la
Universidad Tecnológica de Pereira, ya que esta cumple con:
El color y el estilo del banner, es el asignado a la facultad de ingenierías, al cual
corresponde el programa de Ingeniería de Sistemas y computación. (ver ilustración
34)
El logo de la Universidad Tecnológica de Pereira se ubica en la parte superior
izquierda con la forma y dimensiones recomendadas en el Manual Básico de
Normas de uso del Identificador47 (ver Ilustración 14)
El tipo del letra utilizado en el sitio web de ISC, corresponde a “Time new Roman”
por tratarse del estándar mas conocido por la humanidad.
La combinación de colores que utilizará el sitio web de ISC, corresponden a los
colores (Azul, gris y blanco) tomados como referencia del sitio web de la
Universidad Tecnológica de Pereira.
El tamaña de la sitio web de ISC, corresponde estándar 960, el cual dicta que el
tamaño máximo del ancho de la pagina debe ser de 960 pixeles,
Con estos puntos cubiertos en la propuesta del nuevo sitio web de ISC, se cumple con lo
exigido por la Universidad Tecnológica de Pereira para todos sus sitios, con el fin de
generar una imagen unificada y fuerte de la institución.
La propuesta para el sitio web de Ingeniería de Sistemas y Computación (ISC) que se
plantea en este proyecto será algo aproximado a lo que se puede ver en la ilustración 47.
47
Universidad Tecnológica de Pereira. Manual Básico de normas de uso del Identificador
[Consultado: 16 de enero de 2012] [En línea]
http://media.utp.edu.co/informacion-institucional/archivos/manual-de-identidad-institucional/manual-
identificador-utp.pdf
80
Ilustración 477 Propuesta para el Sitio Web de ISC
Fuente: Los autores
La propuesta debe cumplir con los criterios de Estándares web, Usabilidad y Accesibilidad
al igual que con los lineamientos exigidos en la Imagen institucional de la UTP.
81
CAPITULO 5: CONCLUSIONES
82
5 CONCLUSIONES
La evaluación del sitio web de Ingeniería de Sistemas y Computación permitió
conocer que aun no se cumple con los criterios establecidos en el Manual para la
Implementación de la Estrategia de Gobierno en Línea en la República de
Colombia, ni con lo establecido en el proyecto de imagen Institucional. Esto
ocasiona en primera instancia, una inconsistencia con los objetivos de desarrollo
planteados por el gobierno nacional que a su vez están acordes a una tendencia
mundial en el uso de las TICs y en segunda instancia, el incumplimiento con los
objetivos de unificación y fortalecimiento de la imagen visual que proyecta la
universidad Tecnológica de Pereira tanto interna como externamente.
Gracias a este proyecto, se pudo desarrollar una propuesta acorde al conjunto de
criterios implementados en el sitio web de la UTP, permitiendo al programa ISC
ofrecer herramientas útiles para la comunidad académica, siguiendo estándares
internacionales.
Al implementar los requerimientos del programa de ISC, se crea en el sitio un
espacio para visualizar imágenes y estadísticas de actividades académicas,
brindando a los usuarios una herramienta de visualización de información gráfica.
Este proyecto es precursor de un mejoramiento continuo en la calidad del sitio web
de Ingeniería de Sistemas y Computación de la Universidad Tecnológica de
Pereira, abordando temas tan trascendentales como la accesibilidad y la
usabilidad.
Gracias al desarrollo de este proyecto el programa de Ingeniería de Sistemas y
Computación podrá contar con un sitio web, acorde tanto a la mayor parte de los
criterios exigidos por Gobierno en línea, como por la Universidad Tecnológica de
Pereira.
El proyecto es el resultado oportuno de una necesidad que vive el programa de
Ingeniería de Sistemas y Computación, en cuando a las exigencias de Gobierno
en línea y la imagen institucional de la Universidad Tecnológica de Pereira, para
ser un sitio web acreditado tanto en accesibilidad como usabilidad, al igual de ser
reconocidos como un sitio web asociado a la Universidad.
Se hace un aporte a la línea de investigación que viene desarrollando la
Universidad Tecnológica de Pereira con respecto a la implementación de la
Estrategia de Gobierno en Línea, por lo que se pueden establecer intercambios de
83
conocimiento y debatir con los encargados de implementar estos criterios en la
Universidad, para que juntos se construya un proceso más eficiente.
84
CAPITULO 6: RECOMENDACIONES
85
6 RECOMENDACIONES
El proceso de implementación de la Estrategia de Gobierno en Línea es continuo,
que demanda muchos recursos, tanto físicos, económicos como tecnológicos. Es
por esta razón, que no se debe dejar de lado, para no perder la línea evolutiva en
el cual el sitio web de Ingeniería de Sistemas y Computación se ha encaminado
gracias a este proyecto.
Incentivar que las aplicaciones realizadas sobre el sitio web de Ingeniería de
Sistemas y Computación y en general cualquier desarrollo, cuenten con buenas
prácticas de programación, que permitan que el código sea consistente, facilitando
la lectura de este y la colaboración con otros programadores. Estas buenas
prácticas permiten además, cumplir con que el sitio web sea más accesible a los
usuarios con discapacidad.
La usabilidad dentro de los proyectos de desarrollo web no se puede tomar como
una opción en la actualidad, sino que debe ser algo inherente al desarrollo de
sitios web. Gracias al alto índice de servicios que se prestan a través de sitios
web, se debe garantizar mecanismos que sin importar lo pequeños o poco
frecuentes que sean, generen en los usuarios facilidad al usar este tipo de
sistemas.
Se recomienda que los atributos de la etiqueta <img> como lo es alt deben de ser
tan específicos como sea posible, para que una persona con discapacidad,
tomando como ejemplo un invidente, pueda parase con el cursor del mouse sobre
una imagen y saber de qué se trata.
Se recomienda ir de la mano en los proceso de desarrollo web que se realicen
dentro de la Universidad Tecnológica de Pereira con el Centro de Recursos
Informáticos y Educativos (CRIE), ya este es el encargado de controlar y validar
este tipo de procesos en la Universidad.
86
BIBLIOGRAFÍA
CARVAJAL, Mario y SAAB, Juan. Lineamientos y metodologías en Usabilidad para
Gobierno en línea. Bogotá : s.n., 2010.
DEPARTAMENTO NACIONAL DE PLANEACION. Bases del Plan de Desarrollo. [En
línea] 2012. [Citado el: 15 de Febrero de 2012]
DESARROLLOWEB.COM. Breve historia de PHP. [En línea] Enero de 2012. [Citado el:
08 de Febrero de 2012.] http://www.desarrolloweb.com/articulos/436.php.
LA LIBRERIA DE LA U. Norma de Accesibilidad web. [En línea] [Citado el: 21 de Febrero
de 2012.] http://www.lalibreriadelau.com/libros-de-medicina-ca30_42/ntc-norma-tecnica-
colombiana-ntc-5854 accesibilidad-paginas-p150120.
LLOYD, Ian. The Perfect 404. A List apart. [En línea] 2012. [Citado el: 22 de Febrero de
2012.] http://www.alistapart.com/articles/perfect404/.
MOZILLA DEVELOPER CENTER. Concepto de JavaScript. [En línea] Febrero de 2012.
[Citado el: 08de Febrero de 2012.]
https://developer.mozilla.org/es/Gu%C3%ADa_JavaScript_1.5/Concepto_de_JavaScript#.
C2.BFQu.C3.A9_es_JavaScript.3F.
NEXEN. Evolution de PHP sur Internet . [En línea] 15 de Febrero de 2012. [Citado el: 15
de Febrero de 2012.] http://www.nexen.net/chiffres_cles/phpversion/.
ORACLE CORPORATION and/or ITS AFFILIATES. MySQL. MySQL The world's most
popular open source database. [En línea] Febrero de 2012. [Citado el: 17 de Febrero de
2012.] http://www.mysql.com/why-mysql.
PHP.net. 2012. ¿Qué es PHP? Manua. [En línea] Febrero de 2012. [Citado el: 16 de
Febrero de 2012.] http://co.php.net/manual/es/intro-whatis.php.
PROGRAMA AGENDA DE CONECTIVIDAD, ESTRATEGIA DE GOBIERNO EN LÍNEA.
Manual para la implementación de la Estrategia de Gobierno en línea de la República de
Colombia. Bogota : s.n., 2011.
SCHMULLER, Joseph. Aprendiendo UML en 24 Hora. s.l. : PEARSON.
SUBDESARROLLANDO. Diferencias entre sitio estático y sitio dinámico. [En línea] 03 de
Noviembre de 2005. [Citado el: 15 de Febrero de 2012.]
87
http://subdesarrollando.com.ar/2005/11/03/diferencias-entre-sitio-estatico-y-sitio-
dinamico/.
TRIANA, Jhon Fredy y GUTIERREZ, Natalia;. Evaluación del grado de accesibilidad de
la web a la Universidad Tecnológica de Pereira mediante la especificación doble A de
WCGA 2.0. Pereira : s.n., 2009.
UNIVERSIDAD TECNOLÓGICA DE PEREIRA. Acuerdo No 13 de 2008 Proyecto de
Imagen Corporativa. [En línea] 2008. [Citado el: 16 de Enero de 2012.]
http://www.utp.edu.co/secretaria/index.php/informacion-general/1329/acuerdo-no-13-por-
medio-del-cual-se-aprueba-el-proyecto-de-imagen-corporativa-en-su-primera-fase-y-se-
dictan-otras-disposiciones.
MANUAL BÁSICO DE NORMAS DE USO DEL IDENTIFICADOR. [En línea] [Citado el:
16 de Febrero de 2012.] http://media.utp.edu.co/informacion-institucional/archivos/manual-
de-identidad-institucional/manual-identificador-utp.pdf.
W3C. HTML & CSS. [En línea] 2012. [Citado el: 01 de Febrero de 2012.]
http://www.w3.org/standards/webdesign/htmlcss.
PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB (WCAG) 2.0,
Recomendación W3C. [En línea] 2012. [Citado el: 21 de Febreo de 2012.]
http://www.w3c.org/TR/WCAG20/26.
XHTML™1.0. The Extensible Hypertext Markup Language (Segunda Edición). [En línea]
[Citado el: 01 de Febrero de 2012.] http://www.w3.org/TR/xhtml1/#xhtml.
W3SCHOOLS. HTML Styles - CSS. [En línea] 2012. [Citado el: 17 de Febrero de 2012.]
WEB DEVELOPERS. Programming languages on the internet. [En línea] Febrero de
2012. [Citado el: 13 de Febrero de 2012.]
http://www.webdevelopersnotes.com/basics/languages_on_the_internet.php3.
WELLING, Luke y THOMSON, Laura .Php And Mysql Web Development. s.l. : Pearson
Education (Us), 2001.
88
ANEXOS
89
Anexo A: Especificación De Requerimientos Del Software
INTRODUCCIÓN
1.1 PROPÓSITO
El propósito del presente documento es definir los requerimientos de un portal web 2.0
para el programa de Ingeniería de Sistemas de la Universidad Tecnológica de Pereira.
El portal surge con el fin de mejorar la difusión de información y la comunicación social de
la comunidad del programa anteriormente mencionado.
1.2 ÁMBITO DEL SISTEMA
El producto a desarrollar es un portal que proporcionará mecanismos que optimicen la
publicación de información concerniente al programa de Ingeniería de Sistemas y
Computación para que sea visualizada por los usuarios finales, así como también,
facilitará la localización de miembros específicos de la comunidad (profesores y alumnos).
La aplicación en ningún momento va garantizar la conexión a cierta cantidad de usuarios
al tiempo, ni tampoco la disponibilidad, ya que dichas funciones le corresponde a la
configuración del servidor que tenga la maquina en donde se va instalar la aplicación.
1.3 DEFINICIONES, ACRÓNIMOS Y ABREVIATURAS
Portal: Es un espacio en internet el cual sirve como punto de inicio para brindar al usuario
distintos recursos y servicios relacionados entre sí, de manera que, los mismos se
ofrezcan de forma fácil e integrada.
ISC: Ingeniería de Sistemas y Computación.
Programa: (desambiguación). Dependiendo del contexto en el que se halle la palabra
puede hacer referencia a los siguientes enfoques:
Informático: Conjunto de instrucciones que cuando se llevan a cabo ejecutan una o varias
tareas.
Académico: Hace alusión al conjunto de actividades dirigidas a la formación de
profesionales que están enmarcadas por el currículo de una carrera profesional.
90
Aplicación: (desambiguación). En este caso la palabra tiene un enfoque informático el cual
hace referencia a un tipo de programa informático que sirve para la realización de uno o
varios trabajos.
1.4 REFERENCIAS
1) Políticas de desarrollo para la web Desarrollos externos [En línea]. s.f. [citado en
18 Agosto de 2011]. Disponible en internet:
http://media.utp.edu.co/crie/archivos/lineamientos-y-politicas/politicas-de-
desarrollo-web-externo.pdf
1.5 VISIÓN GENERAL DEL DOCUMENTO
En las dos secciones subsiguiente (2 y 3) el tema a tratar girara entorno a los
requerimientos, siendo en la sección 2 donde se describa el contexto y los factores que
afectan a los mismos, y en la sección 3 donde se describen dichos requerimientos
detalladamente los cuales posteriormente serán la base en el desarrollo del software aquí
especificado.
DESCRIPCIÓN DEL PRODUCTO
2.1 PERSPECTIVA DEL PRODUCTO
En un futuro se planea que exista un enlace desde la página principal de la Universidad
Tecnológica de Pereira que llevará al contenido del portal a desarrollar, por consiguiente,
dicho portal debe ser desarrollado dentro del marco reglamentario que la Universidad
Tecnológica de Pereira dictamina para todas las aplicaciones web enlazadas al sitio
principal, dicho marco se detallará en las subsección 2.4 donde se especifican las
restricciones del sistema.
Dentro del portal debe existir acceso hacia el sitio web de la revista de proyectos, este es
un sitio web en construcción, que aún no tiene nombre ni documentos que detallen su
comportamiento o normatividad, por ende no se citarán en este documento, y de igual
forma si el sitio no se halla terminado a la fecha que se solicite no se anexará el enlace.
Los enlaces sitios externos al futuro portal que se publiquen dentro del mismo, son
responsabilidad del administrador que se le asigne al sitio.
91
Con excepción de los puntos citados anteriormente en esta subsección, la aplicación web
será independiente de otros sistemas.
2.2 FUNCIONES DEL PRODUCTO
Las funciones que debe llevar a cabo la aplicación son grandes rasgos las siguientes:
a. Gestión del contenido
Publicar información.
Proveer los mecanismos para la publicación de la información.
Actualización de la presentación del portal.
Proveer los mecanismos para la actualización de las imágenes que hacen
parte de la presentación del portal.
b. Almacenamiento de datos
Almacenamiento de los datos de validación
Almacenar en memoria el nombre del estudiante y el código.
Almacenar en memoria el nombre del profesor y la cedula.
Almacenamiento de la información
Almacenar en memoria la información ingresada a publicar por el
administrador.
Almacenamiento de las imágenes
Almacenar en memoria las imágenes ingresadas a publicar por el
administrador.
Almacenamiento de datos de los perfiles
Almacenar le memoria los datos ingresados por los usuarios (estudiantes y
profesores) registrados en el login.
c. Gestión de perfiles
Crear el perfil
92
Editar el perfil
Activar/desactivar el perfil
Búsqueda de perfiles
El sistema debe recopilar todos los perfiles que correspondan al criterio de
búsqueda y permitir que se visualice la información de los mismos.
d. Acceso a la información
Acceso a la información publicada
Permitir al usuario visualizar la información publicada por el administrador.
Acceso a sitios web externos
Permitir al usuario por medio de enlaces directos ingresar a otros sitios web de
interés.
Acceso al información de perfiles
Permitir al usuario (profesor o estudiante) acceder a la información publicada
en el perfil.
2.3 CARACTERÍSTICAS DE LOS USUARIOS
Estudiante
Es aquella persona que hace parte del programa de Ingeniería de Sistemas y
Computación de la Universidad Tecnológica de Pereira en calidad de alumno y
puede crear un perfil usando como validación su código y nombre, también
puede buscar otros perfiles de profesores o estudiantes.
No se le tiene permitido ingresar información que el usuario mismo digite, para
ello se ofrece los determinados campos para mostrar en su perfil y llenar la
información requerida en su perfil, a excepción de los datos personales
(dirección, teléfono y correo electrónico).
Profesor
Es aquella persona que hace parte del programa de Ingeniería de Sistemas y
Computación de la Universidad Tecnológica de Pereira en calidad de alumno y
puede crear un perfil usando como validación su cedula y nombre, también
puede buscar otros perfiles de profesores o estudiantes.
93
No se le tiene permitido ingresar información que el usuario mismo digite, para
ello se ofrece los campos determinados para mostrar en su perfil y llenar la
información requerida en su perfil, a excepción de los datos personales
(dirección, teléfono y correo electrónico).
Administrador
Es aquella persona que suministra la información de validación, la información
a publicar, las imágenes pertenecientes a la presentación de la página y tiene
permiso para verificar el contenido de los perfiles y si es necesario
desactivarlos.
No es necesario que esta persona tenga conocimientos en programación
orientada a la web ni de ninguna otra.
Visitante
Es aquella persona que ingresa al portal y puede visualizar la información
disponible sin iniciar sesión.
2.4 RESTRICCIONES
El portal, como ya se describió anteriormente, está proyectado para enlazarse
directamente con el sitio principal de la Universidad Tecnológica de Pereira, y por lo tanto
debe cumplir con la normatividad que la misma exige en lo concerniente a los sitios web a
los que se haga referencia desde su página web, por consiguiente a continuación se
detallan las reglas que afectan el desarrollo del proyecto y que deben ser cumplidas para
poder crear el enlace mencionado.
Cumplir con las pautas de accesibilidad Web actuales de la W3C hasta alcanzar el
segundo nivel de prioridad (aquellos puntos que un desarrollador Web debería
cumplir ya que, si no fuese así, sería muy difícil acceder a la información para
ciertos grupos de usuarios); para lo cual se debe comprobar el nivel de
conformidad “Doble A” (todos los puntos de verificación de prioridad 1 y 2 se
satisfacen).
Garantizar el funcionamiento del desarrollo Web en los navegadores más usados y
en los que mejor soportan estándares, por ejemplo actualmente Internet Explorer 7
o mayores, Mozilla Firefox 3 o mayores, Safari 4 o mayores, Opera 10 mayores,
Google Chrome 4 o mayores.
94
Nota: los navegadores de referencia deben ser revisados constantemente debido
a su rápida actualización y cambio.
Garantizar la independencia entre los contenidos y la interfaz visual, para permitir
la navegación aún cuando no se carguen los estilos CSS. Se recomienda usar
XHTML para la estructura y CSS para el diseño en archivos independientes, es
decir, el código fuente debe encontrarse en un documento diferente del documento
de estilos CSS.
Todos los contenidos estáticos (CSS, HTML, Javascript) deben enviarse de forma
comprimida al navegador del usuario.
Todo sitio Web debe cumplir con reglas de optimización de carga.
Estas reglas se pueden encontrar en el sitio:
http://developer.yahoo.com/performance/help
Mantener concordancia con la imagen institucional, basando su uso en el proyecto
de imagen e identidad corporativa.
Comprobar la usabilidad de los desarrollos directamente con los usuarios.
No usar animaciones, flash, marcos (frames), ni imágenes innecesarias.
Proporcionar siempre un buscador que no afecte negativamente la usabilidad del
sitio y que no presente ningún tipo de publicidad.
Toda página web debe tener como mínimo dos enlaces a la página de inicio de la
Universidad, estos enlaces deben ser de fácil ubicación y uso. Se recomienda un
enlace en el encabezado y el otro en el pie de la página Web.
Toda página Web debe contar con el escudo de la Universidad, basando su uso
en el proyecto de imagen e identidad corporativa, también se debe presentar el
escudo de la republica de Colombia como lo indica el manual de gobierno en línea.
Proveer un mapa del sitio para facilitar la navegación de los usuarios y un
sitemap.xml para la indexación del sitio en los buscadores Web.
Se deben utilizar las buenas prácticas SEO ](Ver manual SEO)
Buen uso de metatags
Correlación entre el contenido y los metatags
95
Etiquetado adecuado de encabezados (buen uso de h1, h2, h3, etc.)
URL’s amigables
Codificación de la información en UTF-8
REQUISITOS ESPECÍFICOS
3.2 FUNCIONES
1. La aplicación web es multiusuario.
1.1 La aplicación tiene un perfil para el estudiante
1.2 La aplicación tiene un perfil para el profesor
1.3 La aplicación tiene un perfil para el administrador
2. Perfil del estudiante
2.1 La aplicación web permite la creación de una sola cuenta por estudiante, el usuario
va a ser el código del estudiante con el cual se encuentra registrado en la
universidad.
2.2 La aplicación web exige que para la creación de dicha cuenta se ingrese los
siguientes datos:
2.2.1 Código con el que se encuentre registrado en la universidad.
2.2.2 Numero de documento
2.2.3 Contraseña
2.2.4 Selección de la pregunta secreta
2.2.5 Respuesta a la pregunta secreta
2.2.6 Teléfono o número celular
2.2.7 Correo electrónico
2.2.8 Edad
2.2.9 Selección del tipo de usuario (Estudiante o Profesor)
2.2.10 Selección de fortaleza(s) académica(s)
2.2.11 Selección de la jornada (Diurna o Nocturna)
2.2.12 Selección de semestre académico (1-10)
2.3 La aplicación permite la edición de la siguiente información:
2.3.1 Teléfono o número celular
2.3.2 Correo electrónico
2.3.3 Edad
2.3.4 Selección de fortaleza(s) académica(s)
2.3.5 Selección de la jornada (Diurna o Nocturna)
2.3.6 Selección de semestre académico (1-10)
96
2.4 La aplicación permite el cambio (estando dentro de la cuenta de usuario) o
recuperación de contraseña (por medio de pregunta secreta).
2.5 La aplicación permite configurar la privacidad de la cuenta, es decir, que campos son
visibles para el resto de los usuarios. Los campos a los cuales se les puede editar la
visibilidad son: teléfono, edad, semestre y correo electrónico.
2.6 La aplicación permite la búsqueda de otros perfiles a través de la selección de un
criterio específico.
2.7 La aplicación permite la visualización de ofertas laborales hechas a través del portal.
3. Perfil del profesor
3.1 La aplicación web permite la creación de una sola cuenta por profesor, el usuario va
a ser el documento de identidad.
3.2 La aplicación web exige que para la creación de dicha cuenta se ingrese los
siguientes datos:
3.2.1 Documento de identidad.
3.2.2 Contraseña
3.2.3 Selección de la pregunta secreta
3.2.4 Respuesta a la pregunta secreta
3.2.5 Teléfono o número celular
3.2.6 Correo electrónico
3.2.7 Lugar de ubicación en la universidad
3.2.8 Selección del tipo de usuario (Estudiante o Profesor)
3.2.9 Selección de fortaleza (s) académica(s)
3.2.10 Publicación de la hoja de vida
3.2.11 Enlace a su correspondiente blog
3.2.12 Grupo de investigación y/o semillero al que pertenece
3.3 La aplicación permite la edición de la siguiente información:
3.3.1 Teléfono o número celular
3.3.2 Correo electrónico
3.3.3 Lugar de ubicación en la universidad
3.3.4 Selección de fortaleza(s) académica(s)
3.3.5 Enlace a su correspondiente blog
3.3.6 Grupo de investigación y/o semillero al que pertenece
3.4 La aplicación permite el cambio (estando dentro de la cuenta de usuario) o
recuperación de contraseña (por medio de pregunta secreta).
97
3.5 La aplicación hace pública la información del perfil de los profesores, por
consiguiente, dicha información se puede observar sin necesidad de pasar por el
proceso de autenticación.
3.6 La aplicación permite configurar la privacidad de la cuenta de la siguiente forma:
Para las personas que no pasen por el proceso de autenticación, los campos a
los que se les puede editar la visibilidad son: documento de identidad, teléfono,
lugar de ubicación en la universidad.
Para las personas se encuentren autenticadas, los campos a los que se les
puede editar la visibilidad son: documento de identidad, teléfono.
3.7 La aplicación permite la búsqueda de otros perfiles a través de la selección de un
criterio específico, solamente cuando se ha pasado por el proceso de autenticación.
4. Perfil del administrador
4.1 La aplicación provee el acceso a la cuenta del administrador después de haber
pasado por el proceso de autenticación haciendo uso del usuario y contraseña ya
establecidos.
4.2 La aplicación provee una interfaz al administrador, con la cual podrá realizar sus
funciones sin necesidad de tener conocimientos técnicos en el área de sistemas.
4.3 La aplicación provee un mecanismo para ingresar los datos de los nuevos
estudiantes y/o profesores, necesarios para realizar las validaciones en el momento
en que dichos usuarios creen sus cuentas.
4.4 La aplicación provee un mecanismo para desactivar el perfil de un usuario.
4.5 La aplicación provee un mecanismo para activar el perfil de un usuario después de
haber sido desactivado.
4.6 La aplicación permite la búsqueda de otros perfiles a través de la selección de un
criterio específico.
4.7 La aplicación provee un mecanismo para publicación de ofertas laborales, que será
visible a través de los perfiles de los estudiantes y/o profesores.
4.8 La aplicación provee un mecanismo para publicar editar y/o eliminar información que
se encuentre en distintos formatos(documentos, texto, sonidos, imágenes y videos),
la cual se refiere a:
98
Información administrativa referente al programa de ISC de la Universidad
Tecnológica de Pereira:
o Misión
o Visión
o Objetivos
o Quiénes somos
Información de interés para la comunidad
o Informes
o Noticias relevantes
o Eventos
o Actividades sociales de apoyo al programa ISC
Extensión
o Seminarios
o Congresos
o Conferencias
o Diplomados
o Cursos
Información referente a los semilleros
Información referente a los grupos de investigación
Pregrado
o Pensum de la carrera de Ingeniería de Sistemas y Computación de la
Universidad Tecnológica de Pereira
o A quién va dirigido
o Perfil profesional
Postgrado
o Especializaciones
- Pensum
- A quién va dirigido
- Perfil del egresado
o Maestría
- Pensum
- A quién va dirigido
- Perfil del egresado
Imágenes pertenecientes a la presentación de la página, inmersas en todo el sitio
Egresados
Enlace a la revista
5. La aplicación permite la visualización de los contenidos suministrados por el
administrador: texto, imágenes, videos, documentos, sonidos.
99
3.3 ATRIBUTOS DEL SISTEMA
3.3.1 Seguridad
Permisos de los usuarios: los permisos para realizar determinadas acciones
vienen dados de la siguiente forma:
o Administrador: se le permite publicar información (la detallada en la
subsección 3.2 en el punto 4.8) que será visible en el portal, es el que
ingresa la información de validación, puede activar y/o desactivar perfiles,
buscar perfiles y publicar ofertas laborales.
o Estudiante: se le permite crear una única cuenta, editar su información
personal (especificada en la subsección 3.2 en el punto 2.3), cambiar o
recuperar su contraseña, configurar su privacidad (como se especificó en la
subsección 3.2 en el punto 2.5) y buscar otros perfiles, no tiene permiso ni
se provee el mecanismo para que el estudiante publique otra información
diferente a la ya especificada.
o Profesor: se le permite crear una única cuenta, editar su información
personal (especificada en la subsección 3.2 en el punto 3.3), cambiar o
recuperar su contraseña, configurar su privacidad (como se especificó en la
subsección 3.2 en el punto 3.6) y buscar otros perfiles, no tiene permiso ni
se provee el mecanismo para que el profesor publique otra información
diferente a la ya especificada.
o Visitante: no tiene permiso ni se proveen los mecanismos para que el
visitante publique información, ni para almacenar datos de ningún tipo.
Acceso a las cuentas de usuario: se hace a través de autenticación por usuario y
contraseña.
3.4 OTROS REQUERIMIENTOS
Se necesita permiso para ejecutar las pruebas que el portal requiera, sobre el
servidor donde posteriormente se implantará, esto, durante su construcción así
como también cuando se halle terminado.
Se requiere que el portal se implante en uno de los servidores del programa de
Ingeniería de Sistemas y Computación de la Universidad Tecnológica de Pereira.
100
Anexo B Entrevista a la Coordinadora de la sección web del CRIE
Fecha: 16 de febrero de 2012
Nombre: Ángela María Vivas Cuestas
Cargo: Coordinadora de la sección web del CRIE
1) ¿Qué es Gobierno en Línea en Colombia?
Es un conjunto de lineamientos y criterios que el gobierno Colombiano ha definido
con el objetivo de mejorar la experiencia de los ciudadanos en la web.
2) ¿Por qué se implemento Gobierno en Línea en la UTP?
La Universidad Tecnológica de Pereira es una institución pública, pero a diferencia
de muchas otras entidades publicas, esta recibe recursos por parte del estado
Colombiano directamente, por lo que el programa de Gobierno en línea se debe
aplicar obligatoriamente a todas las entidades de este tipo.
Gobierno en Línea constantemente nos está mandando información sobre las
metodologías de implementación de la estrategia, además de solicitarnos
información sobre cómo estamos llevando el proceso de implementación en la
Universidad.
3) ¿Quién se encarga de la implementación de la estrategia en la UTP?
Para la UTP, nosotros como sección web del CRIE somos los encargados directos
de la administración de todos los sitios web de la Universidad, por lo que somos
los primeros en buscar la implementación de Gobierno en línea para esta.
4) ¿Desde cuándo se viene aplicando la Estrategia de Gobierno en Línea en la
UTP?
Desde el 2010 la Universidad Tecnológica de Pereira se ha enfocada en
implementar los lineamientos y criterios exigidos por Gobierno en línea, proceso
que ha demandado mucho tiempo y recursos por parte de la Universidad.
Cuando se inicio este proceso, empezamos a trabajar con el manual 2.0, el cual
plantea unos criterios, pero rápidamente ese manual se actualizo y estos criterios
en algunos casos cambiaban radicalmente, incluso en algunos de ellos se
101
generaban inconsistencias, lo que conlleva a que este proceso no avance
considerablemente.
Sin embargo la UTP es una de las pocas Universidades que está a la vanguardia
con la implementación de estos lineamientos y criterios.
5) ¿Cómo se encuentra la UTP actualmente en la Implementación de la Estrategia
de Gobierno en Línea?
Actualmente estamos trabajando sobre la versión 3.0 del manual de
implementación de la Estrategia de Gobierno en Línea para las entidades públicas
de la republica de Colombia.
De este manual en la sesión web de la UTP nos hemos enfatizado en los
estándares web en los criterios de usabilidad y los de accesibilidad, ya que
consideramos que son los que le competen a la Universidad. Pero aun faltan
algunos criterios por implementar, sin embargo todo el equipo de la sesión web de
CRIE está trabajando arduamente para ir cumpliendo con estos y estar cada vez
más cerca de cumplir con el objetivo de esta Estrategia.
