REESTRUCTURACIÓN SITIO WEB: PROGRAMA DE INGENIERÍA DE SISTEMAS Y COMPUTACIÓN DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA

Transcripción

1 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

2 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

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 4

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 5

6 CONTENIDO INTRODUCCIÓN CAPITULO 1: GENERALIDADES FORMULACIÓN DEL PROBLEMA JUSTIFICACIÓN HIPÓTESIS OBJETIVOS Objetivo general Objetivos específicos CAPITULO 2: MARCO TEÓRICO MARCO TEÓRICO ESTÁNDARES WEB HTML CSS XHTML JavaScript PHP Como funciona PHP MySQL ESTÁNDARES DE DESARROLLO DE SOFTWARE UML Diagrama de Clases Diagrama de casos de uso Diagrama de Secuencia GOBIERNO EN LÍNEA Breve Historia Qué es Gobierno en línea? Importancia

7 2.3.4 Plan de Desarrollo Nacional Estrategia de Gobierno en línea LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA Y GOBIERNO EN LÍNEA IMPLEMENTACIÓN DE GOBIERNO EN LÍNEA EN LA UTP Criterio - Estándares del sitio web Criterio Usabilidad Criterio Accesibilidad web IMAGEN INSTITUCIONAL DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA 56 CAPITULO 3: EVALUACIÓN DEL SITIO WEB EVALUACIÓN DEL SITIO WEB DE ISC CRITERIOS DEL NIVEL INICIAL DE GOBIERNO EN LÍNEA QUE SE CUMPLEN EN EL SITIO WEB DE LA UTP Criterios de Estándares Web: Criterio de accesibilidad Criterio de Usabilidad IMAGEN INSTITUCIONAL DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA RECOLECCIÓN DE INFORMACIÓN Y ANÁLISIS DE REQUERIMIENTOS ASPECTOS RELEVANTES DEL SITIO WEB ACTUAL DE INGENIERÍA DE SISTEMAS Y COMPUTACIÓN REQUERIMIENTOS NO FUNCIONALES CAPITULO 4: PROPUESTA DEL SITIO WEB PROPUESTA PARA EL SITIO WEB DE INGENIERÍA DE SISTEMAS Y COMPUTACIÓN PROPUESTA PARA CUMPLIR LOS CRITERIOS DE ESTÁNDARES WEB EXIGIDOS POR GOBIERNO EN LÍNEA CRITERIO DE ACCESIBILIDAD CRITERIO DE USABILIDAD Arquitectura de la Información Diseño de Interfaz de Usuario Diseño de Interacción

8 4.3.4 Búsquedas IMAGEN INSTITUCIONAL DE LA UNIVERSIDAD TECNOLÓGICA DE PEREIRA CAPITULO 5: CONCLUSIONES CAPITULO 6: RECOMENDACIONES BIBLIOGRAFÍA ANEXOS

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 ( 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.W Ilustración 37 Menú principal del sitio web de ISC

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

11 LISTA DE TABLAS Tabla 1: Criterio Estándares del sitio web 63 11

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 12

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, " 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. 13

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

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 15

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

17 CAPITULO 1: GENERALIDADES 17

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

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

20 CAPITULO 2: MARCO TEÓRICO 20

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 HTML. HTML 1 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

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 CSS. Hojas de estilo en cascada 2 (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 HTML 3, 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: 22

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 23

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 24

25 2.1.3 XHTML. XHTML 4 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. XHTML 5, 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 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 Ibíd. 6 Mozilla Developer Network. Concepto de JavaScript. [En Línea]: Consultado el día 16 de febrero de ascript.3f 25

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 PHP. PHP 8 (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

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 27

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 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 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 WEELLING, Luke & THOMPSON, Laura.PHP and MySQL web development.indianapolis: Sams Publishing p

29 Ilustración 9 Proceso de solicitud, ejecución y respuesta de PHP Fuente: 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: 29

30 2.2 ESTÁNDARES DE DESARROLLO DE SOFTWARE UML. UML 11 (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 Diagrama de Clases. El diagrama de clases 12 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 Ibíd., p

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

32 Fuente: SCHMULLER, Joseph. Aprendiendo UML en 24 Horas, pág 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 secuencia 13 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 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 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

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 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 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 Ibíd., p.5 33

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 Plan de Desarrollo Nacional. El gobierno colombiano plantea que uno de sus objetivos de desarrollo 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 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 DEPARTAMENTO NACIONAL DE PLANEACION. Bases del Plan de Desarrollo. [En Línea]: Consultado el 15 de febrero de Ibíd., p.7. 34

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 35

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

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

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 Ibíd., p

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 p

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

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ínea 27 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 Saab 28 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, Lineamientos y metodologías en Usabilidad para Gobierno en línea. 28 Ibíd., p

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 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 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 Ibíd., p31. 42

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 Ibíd., p Ibíd., p

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

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

46 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

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 W3SCHOOLS 36 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] 47

48 Ilustración 24 Estadística sobre uso de navegadores web mes a mes hecho por la W3Schools Fuente: 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. 48

49 Ilustración 25 Validación de la W3C para el sitio web de la UTP ( Fuente: Los autores 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 , 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

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 50

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

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 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 Sobre WAI [En línea] 52

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 WCAG 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] 53

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 , 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 UTP 42, 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] accesibilidad-paginas-p 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] 54

55 Ilustración 29 validador de Accesibilidad web aplicado al sitio web de la UTP Fuente: 55

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 corporativa 43, 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 identificador 44 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] 44 Universidad Tecnológica de Pereira. Manual Básico de normas de uso del Identificador [Consultado: 16 de enero de 2012] [En línea] 56

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

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 58

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 59

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

61 CAPITULO 3: EVALUACIÓN DEL SITIO WEB 61

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 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 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 3. En la pagina Inicial aparece la fecha de la última actualización 4. Se incluye un mapa del sitio web en la página inicial. SI SI NO NO 62

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

64 Ilustración 35 Resultado de Accesibilidad del sitio web de ISC Fuente: Ilustración 36 Resultado de Accesibilidad del Sitio web de ISC en T.A.W3 Fuente: 64

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

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 66

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