UNIVERSIDAD MAYOR DE SAN ANDRES

FACULTAD DE CIENCIAS PURAS Y NATURALES

CARRERA DE INFORMÁTICA

TESIS DE GRADO
SISTEMA GESTOR DE CONTENIDOS (CMS) PARA PERIÓDICOS
DIGITALES UTILIZANDO RETÍCULAS EN LA DIAGRAMACIÓN DE
PÁGINAS WEB

PARA OPTAR AL TÍTULO DE LICENCIATURA EN INFORMATICA

MENCION: INGENIERIA DE SISTEMAS INFORMATICOS

POSTULANTE : Gladys Patty Quispe

TUTORA METODOLÓGICA : M. Sc. Fátima Dolz Salvador
ASESOR : M. Sc. Franz Cuevas Quiroz

LA PAZ - BOLIVIA
2014
 UNIVERSIDAD MAYOR DE SAN ANDRÉS
FACULTAD DE CIENCIAS PURAS Y NATURALES
CARRERA DE INFORMÁTICA

LA CARRERA DE INFORMÁTICA DE LA FACULTAD DE CIENCIAS PURAS Y

NATURALES PERTENECIENTE A LA UNIVERSIDAD MAYOR DE SAN ANDRÉS
AUTORIZA EL USO DE LA INFORMACIÓN CONTENIDA EN ESTE
DOCUMENTO SI LOS PROPÓSITOS SON ESTRICTAMENTE ACADÉMICOS.

LICENCIA DE USO

El usuario está autorizado a:

a) visualizar el documento mediante el uso de un ordenador o dispositivo móvil.

b) copiar, almacenar o imprimir si ha de ser de uso exclusivamente personal y privado.
c) copiar textualmente parte(s) de su contenido mencionando la fuente y/o haciendo la
referencia correspondiente respetando normas de redacción e investigación.

El usuario no puede publicar, distribuir o realizar emisión o exhibición alguna de este

material, sin la autorización correspondiente.

TODOS LOS DERECHOS RESERVADOS. EL USO NO AUTORIZADO DE LOS

CONTENIDOS PUBLICADOS EN ESTE SITIO DERIVARA EN EL INICIO DE
ACCIONES LEGALES CONTEMPLADOS EN LA LEY DE DERECHOS DE AUTOR.
DEDICATORIA

ii
AGRADECIMIENTOS

Agradecer a Dios, por darme fortaleza espiritual en tiempos de debilidad. A Él es a

quien le doy mayor agradecimiento por haber derramado bendiciones en mi vida.

A mis queridos papás Roberto Patty Chura y Paulina Quispe Márquez, por todo el
apoyo, cariño, amor y paciencia que me brindaron, no solo en esta etapa, sino en
el transcurso de toda mi vida.

A mis hermanos Carlos, Nelly, Silvia y Paul que estuvieron a mi lado brindándome
el principal apoyo que es su amor, mostrándome una sonrisa en tiempos de
tristeza.

Expresar mi agradecimiento a la M. Sc. Fátima Dolz, Docente Tutor por toda la

paciencia y consejos dados a lo largo del desarrollo de esta tesis.

Al M. Sc. Franz Cuevas, Docente Revisor, por todos los espacios de tiempo que
me brindo, paciencia, comprensión, además de todas las acertadas
recomendaciones emitidas a lo largo del desarrollo del presente estudio.

Agradecer varios docentes de la Carrera de informática en especial a el M. Sc.

Aldo Valdez por su colaboración y consejos para el desarrollo del presente trabajo.

Agradecer la colaboración de los editores del Periódico Digital PIEB, por toda la
colaboración brindada y en especial al Ing. Francisco Cádiz, del área de Sistemas,
por el asesoramiento para el desarrollo de este trabajo.

iii
RESÚMEN

Las personas, empresas y organizaciones utilizan los sitios web para difundir su
información, con el objetivo de llegar a un mayor numero de personas, con algún
fin que puede ser social, educativo o informativo. En sitios web como Periódicos
Digitales, donde la información es actualizada constantemente, se necesita contar
con una mayor flexibilidad en los diseños de portada, para adecuar los contenidos
que se elaboran y ser presentados a los visitantes. Sin embargo esto pude
representar un problema porque se debe solicitar los cambios deseados a la
persona especializada en páginas web, representando un costo adicional y
demora en la realización de estos cambios.

Este trabajo pretende colaborar a la hora de desarrollar un sitio web

personalizado, no solo para el contenido, sino también para el diseño
introduciendo el concepto de retículas en el diseño. Se realiza el desarrollo de un
Sistema Gestor de Contenidos enfocados a sitios de Periódicos Digitales, que
realiza el uso de retículas para la diagramación de páginas web de forma dinámica
y flexible. Para el análisis y diseño se utilizo la metodología OOHDM, la cual busca
desarrollar una aplicación dentro del paradigma orientado a objetos. En cuanto a
la tecnología se opto por utilizar herramientas de software libre como: PHP como
lenguaje de programación, Mysql como soporte para la base de datos, CSS para
definir el aspecto y presentación, además de tomar el concepto de reutilización de
código utilizando frameworks ya existentes como: JQuery, FCKEditor y otros.
Todos los componentes en el desarrollo son de uso libre lo que implica que el
presente prototipo será de uso libre.

Para la culminación del desarrollo se realizó pruebas de calidad en dos partes:

para la evaluación del sitio (Front End ), se utilizo la metodología Web Site QEM
en función a la usabilidad, funcionalidad, confiabilidad, eficiencia; y para la
aplicación (Back End) se utilizo la Norma ISO-9126 en función a la funcionalidad y
mantenibilidad.

iv
ABSTRACT

Individuals, businesses and organizations use websites to disseminate information,

in order to reach a greater number of people, for some purpose which can be
social, educational or informative. In websites like where information is constantly
updated, Digital Newspapers need to have more flexibility in cover designs, to
adapt the content to be developed and be presented to visitors. However this could
be a problem because they must apply to the desired websites specializing in
person changes, representing an additional cost and delay in making these
changes.

This work aims to collaborate in developing a custom website, not only the content
but also for the design introducing the concept of grids in design. Developing a
Content Manager System focused on Digital Newspaper sites, which makes the
use of grids for the layout of web pages dynamically and flexibly performed. For the
OOHDM analysis and design methodology, which seeks to develop an application
within the object-oriented paradigm was used. In terms of technology it was
decided to use free software tools such as PHP programming language, MySQL as
support for the database, CSS to define the look and presentation, in addition to
taking the concept of code reuse using framework and existing as JQuery,
FCKEditor and others. All components in the development are free to use implying
that this prototype will be free to use.

For the completion of development quality testing was conducted in two parts: for
site assessment (Front End), the Web Site QEM method was used according to
usability, functionality, reliability, efficiency; and for the (Back End) application ISO-
9126 standard was used according to functionality and maintainability.

v
 INDICE
CAPÍTULO I
MARCO INTRODUCTORIO
1.1 INTRODUCCIÓN.............................................................................................................. 1
1.2 ANTEDECENTES ............................................................................................................ 2
1.3 PLANTEAMIENTO DEL PROBLEMA ........................................................................... 5
1.3.1 Problema General .................................................................................................... 5
1.3.2 Problemas Específicos ............................................................................................ 6
1.4 OBJETIVOS ...................................................................................................................... 6
1.4.1 Objetivo General ....................................................................................................... 6
1.4.2 Objetivos Específicos............................................................................................... 6
1.5 HIPÓTESIS ....................................................................................................................... 7
1.6 JUSTIFICACIÓN .............................................................................................................. 7
1.6.1 Justificación tecnológica .......................................................................................... 7
1.6.2 Justificación social .................................................................................................... 8
1.6.3 Justificación económica........................................................................................... 8
1.6.4 Justificación científica .............................................................................................. 8
1.7 MÉTODOS Y TÉCNICAS DE INVESTIGACIÓN ........................................................ 8
1.8 LIMITES Y ALCANCES ................................................................................................... 9
1.9 APORTES........................................................................................................................ 10

CAPÍTULO II
MARCO TEÓRICO
2.1 SISTEMA GESTOR DE CONTENIDOS (CMS) ........................................................ 11
2.1.1 Estructura del CMS ................................................................................................ 11
2.1.2 Tipos de CMS ......................................................................................................... 12
2.1.3 La Funcionalidad de los CMS............................................................................... 13
2.1.4 Razones para Utilizar un CMS ............................................................................. 14
2.2 DISEÑO WEB ................................................................................................................. 16
2.2.1 Sitio Web y su estructura ...................................................................................... 16
2.3 DISEÑO EDITORIAL ..................................................................................................... 18
2.3.1 La Diagramación..................................................................................................... 19
2.3.2 Fundamentos de la Diagramación ....................................................................... 19
vi
 2.4 PERIÓDICO DIGITAL (PD) .......................................................................................... 24
2.4.1 Elementos del diseño de un PD ........................................................................... 24
2.4.2 Criterios para comunicar en la Web .................................................................... 25
2.5 INGENIERÍA WEB (IWEB) ........................................................................................... 27
2.5.1 Modelo de Diseño de Hipermedia Orientado a Objetos (OOHDM) ................ 28
2.5.2 Lenguaje Unificado de Modelado (UML) ............................................................ 30
2.6 LA NORMA ISO-9126.................................................................................................... 31
2.7 METODOLOGÍA DE EVALUACIÓN DE CALIDAD DE SITIOS WEB (WEB-SITE
QEM) 34
2.7.1 Planificación y Programación de la Evaluación de Calidad ............................. 34
2.7.2 Definición y Especificación de Requerimientos de Calidad ............................. 35
2.7.3 Definición e Implementación de la Evaluación Elemental ............................... 37
2.7.4 Definición e implementación de la Evaluación Global ...................................... 39
2.7.5 Análisis de Resultados y Conclusión .................................................................. 40
2.8 TECNOLOGIAS INFORMATICAS............................................................................... 40
2.8.1 Servidor Apache ..................................................................................................... 40
2.8.2 Hypertext Preprocessor (PHP) ............................................................................. 41
2.8.3 Javascript ................................................................................................................. 42
2.8.4 Cascading Style Sheets (CSS) ............................................................................ 43
2.8.5 Motor de Base de Datos MYSQL......................................................................... 44

CAPÍTULO III
ELABORACIÓN DEL PROTOTIPO
3.1 PLANIFICACIÓN ............................................................................................................ 45
3.2 ANÁLISIS Y DISEÑO..................................................................................................... 55
3.2.1 Obtención de requerimientos ............................................................................... 55
3.2.2 Diseño Conceptual ................................................................................................. 60
3.2.3 Diseño Navegacional ............................................................................................. 61
3.2.4 Diseño de la Interfaz .............................................................................................. 63
3.3 IMPLEMENTACIÓN ....................................................................................................... 66
3.3.1 Reutilización de código.......................................................................................... 66
3.3.2 Ventanas del sistema............................................................................................. 68

vii
CAPÍTULO IV
EVALUACIÓN DE CALIDAD
4.1 CALIDAD DEL SITIO WEB ........................................................................................... 73
4.1.1 Planificación y programación de la evaluación de calidad .............................. 73
4.1.2 Definir y Especificar los Requerimientos de Calidad ........................................ 73
4.1.3 Definición e Implementación de la Evaluación Global...................................... 76
4.1.4 Análisis de Resultados y Conclusión .................................................................. 78
4.2 CALIDAD DE LA APLICACIÓN WEB ......................................................................... 78
4.2.1 PRUEBA AUTOMATICA DE COMPROBACION DE SOFTWARE ................ 84

CAPÍTULO V
CONCLUSIONES Y RECOMENDACIONES
5.1 CONCLUSIONES ........................................................................................................... 86
5.2 RECOMENDACIONES ................................................................................................. 87

BIBLIOGRAFÍA
ANEXOS

viii
ÍNDICE DE FIGURAS
Figura 2.1: Estructura de un CMS ........................................................................ 12
Figura 2.2: Funcionalidad de un CMS .................................................................. 13
Figura 2.3: Disposición de elementos en una página web ................................... 18
Figura 2.4: Partes de la retícula ........................................................................... 21
Figura 2.5: Retícula de manuscrito ...................................................................... 22
Figura 2.6: Retícula de columna .......................................................................... 22
Figura 2.7: Retícula modular ................................................................................ 22
Figura 2.8: Retícula jerárquica ............................................................................. 23
Figura 2.9: Módulos reticulares en CSS ............................................................... 23
Figura 2.10: Aplicación del diseño editorial y web para Periódicos Digitales ....... 27
Figura 2.11: Árbol de requerimientos para las características de Usabilidad,
Funcionalidad, Confiabilidad, Eficiencia con sus respectivos pesos. ................... 36
Figura 2.12: Criterios elementales ....................................................................... 37
Figura 3.1: Estructura de diferentes Portales de Periódicos en la Web ............... 47
Figura 3.2: Estructura de la Portada del nuevo CMS ........................................... 48
Figura 3.3: Plantilla de WordPress “The New York Theme” [WordPress] ............ 49
Figura 3.4: Portal del Periódico “Mundiario” [Mundiario] ...................................... 49
Figura 3.5: Sitio web del Periódico “Jornada” [Jornada] ....................................... 50
Figura 3.6: Sitio web del Periódico Digital “El Diario” [El Diario]........................... 50
Figura 3.7: Plantilla de WordPress “Tribune” [WordPress] ................................... 51
Figura 3.8: Arquitectura Front End del CMS ........................................................ 52
Figura 3.9: Involucrados en el nuevo CMS .......................................................... 55
Figura 3.10: Diagrama de Casos de Uso del sistema ......................................... 57
Figura 3.11: Diagrama del modelo conceptual ..................................................... 61
Figura 3.12: Diseño navegacional para el Front End ........................................... 62
Figura 3.13: Diseño navegacional para el Back End final .................................... 62
Figura 3.14: Diseño de la interfaz inicio de sesión ............................................... 63
Figura 3.15: Diseño de la interfaz de gestión de portada ..................................... 63
Figura 3.16: Diseño de la interfaz de configuración de estructura del sitio .......... 64
Figura 3.17: Diseño de la interfaz de diseño de plantillas .................................... 64
Figura 3.18: Diseño de la interfaz configuración de secciones especiales .......... 65
Figura 3.19: Diseño de la interfaz de Secciones .................................................. 65
Figura 3.20: Diseño dela interfaz de gestión de usuarios .................................... 66
Figura 3.21: Utilizando JQuery para la ubicación de bloques .............................. 67
Figura 3.22: Interfaz de la opción Diseño de plantillas ......................................... 67
Figura 3.23: Ventana de Ingreso .......................................................................... 68
Figura 3.24: Ventana Notas de Portada ............................................................... 69
Figura 3.25: Ventana Diseño Lado Derecho “Especiales” ................................... 69

ix
Figura 3.26: Ventana Diseño de Plantillas ........................................................... 70
Figura 3.27: Ventana de Administración de Usuario ............................................ 70
Figura 3.28: Ventana de la Sección “Apertura” .................................................... 71
Figura 3.29: Formulario para la creación de notas ............................................... 71
Figura 3.30: Pantalla del Front End...................................................................... 72
Figura 4.1: Prueba de stress del Front end .......................................................... 85
Figura 4.2: Prueba de stress para el Back End .................................................... 85

ÍNDICE DE TABLAS
Tabla 2.1: Factores de calidad de software .......................................................... 33
Tabla 2.2: Niveles de Aceptabilidad ..................................................................... 40
Tabla 3.1: Características estructurales de Portales de Periódicos visitados ....... 46
Tabla 3.2: Características presentes para en nuevo CMS ................................... 48
Tabla 3.3: Esquema de notas ............................................................................... 53
Tabla 3.4: Esquema de bloques ........................................................................... 54
Tabla 3.5: Roles y tareas de los usuarios ............................................................. 56
Tabla 3.6: Administración de usuarios y asignación de roles ............................... 58
Tabla 3.7: Administración de secciones ............................................................... 59
Tabla 3.8: Administración y publicación de contenido .......................................... 59
Tabla 3.9: Diseño de plantillas bloque de noticias ................................................ 60
Tabla 3.10: Organización y publicación de portada .............................................. 60
Tabla 4.1: Resultados de la evaluación elemental de la característica Usabilidad 74
Tabla 4.2: Resultados de la evaluación elemental de la característica
Funcionalidad ........................................................................................................ 75
Tabla 4.3: Resultados de la evaluación elemental de la característica
Confiabilidad ......................................................................................................... 76
Tabla 4.4: Resultados de la evaluación elemental de la característica Eficiencia 76
Tabla 4.5: Pesos de las características ................................................................ 77
Tabla 4.6: Resultados de la evaluación global ..................................................... 78
Tabla 4.7: Tabla de resultados ............................................................................. 78
Tabla 4.8: Entradas del usuario ............................................................................ 79
Tabla 4.9: Salidas del usuario .............................................................................. 79
Tabla 4.10: peticiones del usuario ........................................................................ 80
Tabla 4.11: Factor de ponderación medio. ........................................................... 81
Tabla 4.12: Datos de ajuste .................................................................................. 81
Tabla 4.13: Factores y Valores ............................................................................. 82
Tabla 4.14: Resultados obtenidos por los usuarios en el Cuestionario de
Satisfacción ........................................................................................................... 84

x
 CAPÍTULO I

MARCO INTRODUCTORIO
 1 CAPÍTULO I

MARCO INTRODUCTORIO

1.1 INTRODUCCIÓN

En la actualidad las personas, empresas y organizaciones utilizan las páginas web

para difundir información con el objetivo de llegar a un mayor número de personas
con algún fin que puede ser económico, social, educativo o informativo.

Los usuarios requieren que la información publicada en los sitios web responda a
sus necesidades y que la misma sea actual, accesible y fiable. Es por este motivo
que los dueños de sitios web deben realizar actualizaciones de las páginas de
manera constante, pero sin olvidar el diseño, de tal forma que luzca profesional y
apropiado para su propósito, porque las personas evalúan rápidamente un sitio
web por su diseño visual.

Ante la evolución de la informática en sus diversas áreas como la ingeniería web

se está presentando nuevos conceptos en el desarrollo de páginas web que
permiten una mayor interacción entre los usuarios y el sitio, es aquí donde se
introduce el uso de aplicaciones como un Sistema Gestor de Contenidos (en
ingles Content Management Systems, abreviado CMS) o Sistema Gestor de
Contenido Web (WCM1) que es un programa informático que permite crear una
estructura de soporte (framework2) para la creación y administración de
contenidos en páginas web a nivel usuario.

En sitios web mas activos y dinámicos como un Periódico Digital que debe ser
actualizado diariamente, en ocasiones los contenidos elaborados no siempre se
adecuan a la estructura de diseño por lo que se necesita un cambio en el formato
de presentación para los contenidos, implementando nuevas plantillas para este

1
En ingles Web Management Systems, abreviado WCM
2
Estructura software incompleta compuesta de componentes personalizables e intercambiables para el desarrollo de una aplicación.
otro tipo de contenido, incurriendo así a un mantenimiento perfectivo 3 constante,
requiriendo contar con personal especialista ante cada modificación,
representando un costo adicional y tiempo para el proceso de esta actividad.

Por lo tanto revisando aspectos de diseño de interfaces web donde la información

está visualmente bien organizada, se observa el uso del sistema reticular4. Esta
técnica es utilizada principalmente en el desarrollo de la información grafica
editorial como libros, revistas, afiches y de a poco se han ido introduciendo en el
diseño de páginas web, porque los elementos que se sujetan a un sistema
reticular aportan orden y claridad en la información.

En la presente tesis se desarrolla un Sistema Gestor de Contenidos para

Periódicos Digitales, utilizando retículas que colaboran en la diagramación5 de
contenidos, realizando la composición de zonas principales y secundarias de
forma dinámica, mediante esquemas lógicos de diseño a nivel usuario, con el
objetivo de brindar equilibrio, estabilidad visual y facilidad en la elaboración de
plantillas, buscando siempre el conjunto ubicación-reticulado que mejor se adapte
al diseño y destacando que es un herramienta de código abierto a nivel usuario.

1.2 ANTEDECENTES

Los primeros sistemas de administración de contenidos fueron desarrollados por

organizaciones que publicaban una gran cantidad de contenido en Internet,
necesitando realizar continuas actualizaciones en sus páginas como revistas en
línea, periódicos y publicaciones corporativas.

La evolución del internet ha provocado una alta participación de los usuarios

directamente, a través de blogs y redes sociales convirtiendo a los Sistema Gestor
de Contenidos en una herramienta importante en el desarrollo de páginas web
tanto para empresas, instituciones y personas.

3
Funcionalidades o características no contempladas al momento de la implementación del software. El mantenimiento perfectivo adapta
la aplicación a este requerimiento.
4
Es un sistema de referencia formado por diferentes líneas horizontales y verticales que marcan la ubicación de elementos y zonas en una
composición gráfica. Estas guías imaginarias ayudan a colocar los contenidos, es la espina dorsal de una composición gráfica.
5
También llamado maquetación, es el acto de la distribución de los elementos en un espacio determinado de la página.
2
Los Sistema Gestor de Contenidos se clasifican de distintas formas, pero según el
tipo de licencia según [Santillan Aldana, 2007] son:

Comerciales, que tienen al código fuente como propiedad de quien lo creo. Esta
herramienta comercial será más estable y coherente al estar desarrollada por un
mismo grupo.

Código fuente abierto, desarrollados por individuos, grupos o empresas que

permiten el acceso libre y la modificación del código fuente. Tienen una ventaja
que hace decidirse a la mayoría de usuarios que es su costo.

En nuestro caso hablaremos en delante de los sistemas Gestores de Contenidos

de código abierto por ser nuestro prototipo de estas características.

Periódico Digital

Un Periódico Digital es la edición de un periódico que utiliza el internet como su

principal medio para su difusión, logrando así poder apreciar de una forma gratuita
toda la información respectiva del periódico en sus distintas secciones, optando
por mejoras que ningún periódico físico puede brindar al lector, por ejemplo
galerías fotografías, videos, música, audio, texto informativo ilimitado, anuncios
gráficos, anuncios escritos, publicidad interactiva, etcétera.

Este medio de información digital es mucho más atractivo por su constante

interactividad y su nivel de alcance de información a nivel, local, nacional,
internacional y mundial presentando sus noticias las 24 horas del día, 7 días de la
semana, 365 días del año.

Ante la dinámica de estos sitios de aquí parte la necesidad de contar con una
herramienta que facilite el trabajo de administración, que sea totalmente fácil de
manejar para los usuarios, pero sobre todo flexible para el tipo de información que
genera.

3
Observando algunos de los periódicos más importantes como The New York
Times, se puede apreciar que el diseño utiliza de forma clara retículas, que
permiten observar con estabilidad y organización los contenidos.

El uso de retículas no significa crear diseños aburridos, sino aplicar normas

fundamentales para su uso, pero también saber como romperlas como indica
Josef Müller-Brockmann [como se cito en Noack, 2010].

"El sistema de retículas es una ayuda, no una garantía. Permite un

número de posibles usos y cada diseñador puede buscar una solución
adecuada a su estilo personal, pero uno tiene que aprender a utilizar la
retícula; es un arte que requiere práctica."

En el desarrollo de aplicaciones web se construye toda la arquitectura en función a

los requisitos que son identificados en una etapa preliminar. Una analogía por
demás interesante, es realizar una comparación con la construcción de una casa
(sitio web a diseñar), podemos empezar a diseñar la estructura de cada habitación
(página web), decidiendo donde pondremos los muebles (contenido) y la
decoración (elementos gráficos). Con especial esmero tendriamos que estructurar
el salón de la casa (página principal), donde recibiremos a todos nuestros
invitados (usuarios), para que sea lo más confortable posible (diseño), pero
también aporte el máximo de información sobre los anfitriones y sobre los
contenidos de las distintas habitaciones (usabilidad). Pero que sucedería si
después de construir esta edificación compramos una hermosa vitrina muy grande
en una sola pieza (contenido) que no entre por la puerta del salón (página
principal) así que como no podemos devolverlo debemos llevarlo al patio sin poder
darle un uso y sentirnos frustrados por siempre comprar solo muebles que entren
por el tamaño de la puerta. Así que debemos espera a construir otro salón más
grande (plantilla) ó que derriben la pared para construir una puerta más grande
(mantenimiento), en ambos casos el tiempo y el dinero que se invierte en la
actividad, es considerable.

4
Lo mismo sucede con los nuevos requerimientos donde se debe elaborar nuevas
plantillas ó aplicar un proceso de mantenimiento una y otra vez, provocando un
gran uso de recursos tanto en tiempo y dinero.

Estudios relacionados que se tomó en cuenta para la elaboración de esta tesis de

grado fue de:

[Tarqui, 2011] “Sistema Gestor de Contenidos (CMS) para la difusión de

información corporativa en Sitios Web” La presente tesis considera el desarrollo de
un CMS bajo licencia GNU/GPL, para Micro y Pequeñas empresas, evaluado bajo
métricas de Calidad ISO 9126.

[Zabaleta, 2012] “Análisis, diseño e implementación de un sistema de

administración de contenidos CMS (Content Management System) para un portal
web corporativo”. El presente documento de tesis muestra el modelado,
construcción y documentación sobre artefactos que forman parte del Sistema
Gestor de Contenidos.

1.3 PLANTEAMIENTO DEL PROBLEMA

1.3.1 Problema General

En sitios web dinámicos como un Periódico Digital donde la información es

actualizada constantemente se necesita contar con mayor y diferentes diseños de
plantillas sobre todo en portada para adecuar los contenidos de acuerdo a las
necesidades, por lo que es necesario gestionar esta información de forma sencilla,
sin embargo existen editores web (como Dreamweaver, PhpEdit y otros) que si
bien colaboran y facilitan este trabajo, tienen la desventaja que ante un cambio en
el diseño, se debe modificar el código y volverlo a subir, por lo tanto se necesita de
una persona con conocimientos de desarrollo “experto” que realice esta labor.
Esto se debe a que se utiliza un enfoque de diseño donde la estructura de las
plantilla es estática, no permitiendo darle dinamismo ni flexibilidad ante cambios
constantes que se adecue según las necesidades para los contenidos a presentar.

5
Sobre la base de la descripción realizada se identifica el siguiente problema:

Existencia de páginas web con estructura poco dinámica y flexible, frente a

nuevos requerimientos y necesidades para mostrar los contenidos en los
Periódicos Digitales.

1.3.2 Problemas Específicos

 Inadaptabilidad de contenidos y elementos gráficos en plantillas diseñadas

ó prediseñadas provocando desequilibrio en el diseño.
 Frustración de usuarios a cargo de edición ante la dificultad por adaptar
contenidos en plantillas rígidas que lo enmarcan en un esquema único.
 Necesidad de modificar el diseño de páginas web provocando la
dependencia de personal experto (diseñadores, programadores web).
 Duplicidad de contenidos, crecimiento del tamaño del sitio provocando un
uso de mayores recursos de hardware.
 Consumo de tiempo y recursos económicos en la elaboración de platillas
con estructuras rígidas y estáticas.

1.4 OBJETIVOS

1.4.1 Objetivo General

Desarrollar un Sistema Gestor de Contenidos para Periódicos Digitales

utilizando retículas que permita de forma dinámica y flexible el diagramado
de páginas web.

1.4.2 Objetivos Específicos

 Estudiar y definir los tipos de interfaces en Periódicos Digitales para

elaborar un modelo estructural del sitio web.
 Estudiar el manejo y uso del sistema de retículas para la diagramación de
diseños de páginas web.

6
  Investigar, estudiar y utilizar herramientas de edición de contenidos y
utilidades para la web y aplicarlo al nuevo Sistema Gestor de Contenidos.
 Elaborar un modelo estructural para el desarrollo del nuevo Sistema Gestor
de Contenidos.
 Elaborar plantillas que administre el nuevo Sistema Gestor de Contenidos.
 Evaluar la herramienta mediante métricas de calidad para la web.

1.5 HIPÓTESIS

El desarrollo de un Sistema Gestor de Contenidos para Periódicos Digitales

utilizando retículas, contará con un nivel de calidad mayor al 60% de acuerdo
a la Metodología de Evaluación de Calidad de Sitios Web (Web-Site QEM).

IDENTIFICACIÓN DE VARIABLES

Variable dependiente: Sistema Gestor de Contenidos.

Variables independientes: Calidad de uso (cuyas características son:

Funcionalidad, Fiabilidad, Usabilidad y Eficiencia).

1.6 JUSTIFICACIÓN

1.6.1 Justificación tecnológica

¿Por qué es necesario desarrollar otro nuevo Sistema Gestor de Contenidos para
Periódicos Digitales?

Porque los actuales Sistemas Gestores de Contenidos por su gran flexibilidad para
adecuarse a distintos tipos de sitios web, representan un gran tamaño de
almacenamiento en disco duro, lo que dificulta subirlo al servidor, además que el
usuario no puede modificar la estructura del sitio y adecuarlo a sus requerimientos.

La presente investigación se justifica tecnológicamente ya que aportara un

Sistema Gestor de Contenidos Open Source para tener un alcance a medida para
Periódicos Digitales que colabore a la elaboración de páginas web de forma

7
sencilla y sin consumo de varios recursos de software, utilizando herramientas con
licencia GNU/GPL como Apache, Php, Mysql además de Frameworks y librerías
Ajax.

1.6.2 Justificación social

El presente tema de tesis se justifica socialmente debido a que el Sistema Gestor

de Contenidos a desarrollar será una opción mas para el uso de nuevas
tecnologías en periódicos, que cuentan solo con la versión impresa o simplemente
deseen tener una versión digital, utilizando una sola herramienta que englobe un
enfoque de diseño y funcionalidad.

1.6.3 Justificación económica

Se justifica económicamente porque pretende englobar características a medida

para periódicos digitales reduciendo los tiempos y costos asociados a la
contratación de personal experto para el desarrollo o mantenimiento de las
páginas web, de tal forma que sea el usuario quien pueda realizar las
modificaciones de la estructura por su cuenta.

1.6.4 Justificación científica

Se justifica científicamente porque se pretende tomar en cuenta conceptos de

diseño grafico e ingeniería web para crear un enfoque de páginas web con
estructura dinámica y flexible además de implementar una herramienta que sea
evaluada de acuerdo a estándares de calidad mediante Metodología de
Evaluación de Calidad de Sitios Web (Web-site QEM).

1.7 MÉTODOS Y TÉCNICAS DE INVESTIGACIÓN

El desarrollo de la siguiente tesis se realizo bajo la normativa del método científico

que es el encargado de cuidar el desarrollo sistemático y articulado que se aspira
formular en este trabajo, mediante un tipo de investigación cuantitativo basado en
los siguientes puntos:

8
  Plantear el problema a partir de la investigación preliminar, que se lo
describe en el marco introductorio.
 Formulación de la hipótesis a partir del planteamiento del problema y de la
investigación preliminar que se pretende comprobar con la investigación.
 Levantamiento de la información, en el cual se realizo la investigación y
recopilación de información acerca de los temas relacionados, por ejemplo
sistema de retículas, metodologías de desarrollo de software y tecnologías
web. Esta información se respaldara en el Marco Teórico.
 Análisis, diseño y construcción de un prototipo que ejemplifica el modelo del
Sistema Gestor de Contenidos propuesto.
 Comprobación de la hipótesis a partir del prototipo desarrollado utilizando la
Metodología de Evaluación de Calidad Web Site QEM.
 Difusión de los resultados obtenidos por medio de una impresión del
documento escrito.
Para el análisis y diseño del prototipo se realizara el uso de metodologías OOHDM
(Object Oriented Hypermedia Design Method) basada en el paradigma orientado a
obketos. También se utilizara tecnologías y herramientas para elaborar el prototipo
como CSS para definir el aspecto y la presentación, la funcionalidad y dinamismo
que suma JavaScript y frameworks como JQuery, el lenguaje del lado del servidor
utilizando PHP conectando a una base de datos como Mysql.

1.8 LIMITES Y ALCANCES

Los límites en la siguiente investigación son:

 La implementación solo de un prototipo del Sistema Gestor de contenidos.

 Los diseños de las páginas deben estar contemplados en estructuras
reticulares.
 No se tomo en cuenta el diseño web adaptativo6.

6
Diseño web adaptativo es una técnica de diseño web que prioriza la correcta visualización de una misma página en distintos dispositivos:
desde ordenadores de escritorio a tablets ó móviles.
9
  Se realizo el estudio específico en la tipología de sitios web de Diarios
Digitales.
 La base de datos se restringirá a Mysql.
Los alcances en la siguiente investigación son:

 El prototipo cuenta con módulos de: publicación de contenidos,

administración usuarios, administración de secciones, tipos, áreas y
administración de plantillas.
 Creación de infinidad de bloques de contenido sin la necesidad de
implementar toda la estructura.
 Previsualización de pruebas de contenidos antes de su publicación.

1.9 APORTES

Los aportes de la investigación son:

 El desarrollo de un Gestor de Contenidos para Periódicos Digitales.

 Proponer un enfoque para diseñadores web, mediante el uso de retículas
que colaboren para desarrollar estructuras flexibles en páginas web, los
cuales podrán utilizarlos para distintos clientes.

10
 CAPÍTULO II

MARCO TEÓRICO
 2 CAPITULO II

MARCO TEÓRICO

2.1 SISTEMA GESTOR DE CONTENIDOS (CMS)

Según Luis Villa, consultor de Ernst & Young7, entrevistado por César Martín
[Marín, 2013], un Sistema Gestor de Contenido es:

“…una herramienta que sirve para gestionar el ciclo de vida de los contenidos en
un sitio Web, desde la recolección, creación, edición, almacenamiento, publicación
y archivado. Muchos sitios Web comienzan por ser de tipo presencial necesitando
muy poco desarrollo y mantenimiento. Poco a poco el volumen de información que
necesitaran gestionar implica hacer desarrollos que permitan controlar la
información como: catálogos, artículos, noticias y otros. Por otro lado, los gestores
de contenidos permiten la publicación distribuida por parte de personas situadas
en diferentes lugares […]”.

Concretamente podemos definir un Sistema Gestor de Contenido (CMS, de aquí

en adelante) como una herramienta que permite la creación y administración de
contenidos, principalmente en páginas web, mediante una interfaz que maneja de
manera independiente el contenido y diseño brindando una fácil y controlada
publicación del sitio a varios editores.

2.1.1 Estructura del CMS

La arquitectura de un CMS según [Tarqui Quispe, 2011] tiene dos partes

diferenciadas que son:

7
Ernst & Young conocido como EY, es una multinacional de servicios profesionales empresa con sede en Londres, Reino Unido. Fue la
tercera mayor firma de servicios profesionales en el mundo.
11
  La parte web pública (front-end): hace referencia a la visualización e
interacción del usuario navegante en la página web. Como las personas la
ven y acceden a ella.
 La parte web privada (back-end): hace referencia al administrador del
sitio accediendo a la parte interna de trabajo del gestor de contenidos. Allí
según el perfil y permisos que se tenga en una página web de uso interno,
puede actualizar el contenido de la página web pública, creando,
modificando y corrigiendo contenido ó disponer de un panel de control para
cambiar configuraciones del sitio web, el diseño y gestionar a los usuarios
del sistema.

CMS

FTP
SITIO WEB FRONT-END

BACK-END

VISITANTE

EDITOR

Figura 2.1: Estructura de un CMS

Fuente: [Santillan, 2007]

2.1.2 Tipos de CMS

Según el tipo de sitio que permiten gestionar [Santillan, 2007] los clasifica en:

Genéricos: Ofrece la plataforma necesaria para desarrollar e implementar

aplicaciones que den solución a necesidades específicas. Pueden servir para
construir soluciones de gestión de contenidos para comercio electrónico, blogs,
portales. Ejemplos: Phone, MODx, OpenCMS, Joomla, Drupal.
Foros: Admiten la discusión en línea donde los usuarios pueden reunirse y discutir
temas en los que están interesados. Ejemplos: phpBB, SMF, MyBB.

12
Blogs: Permiten la publicación de noticias o artículos en orden cronológico con
espacio para comentarios y discusión. Ejemplos: Wordpress, Movable Type,
Drupal.
Wiki: Permiten colaborar en los artículos, aportando información o rescribiéndola.
También permite espacio para discusiones. Indicando para el material que ira
evolucionando con el tiempo. Ejemplo: MediaWiki, TikiWiki.
e-Commerce: Están orientados para comercio electrónico. Ejemplo:
osCommerce, Dinamicweb eCommerce.
Galería: Orientados a permitir administrar y generar automáticamente un portal o
sitio web que muestra contenido audiovisual, normalmente imágenes. Ejemplo:
Gallery.
e-Learning: Orientados a la enseñanza de conocimientos. Los usuarios son los
profesores y estudiantes, donde se tiene aulas virtuales que ponen a disposición el
material del curso. Ejemplo: Moodle.
Publicaciones digitales: Son plataformas especialmente diseñadas teniendo en
cuenta las necesidades de las publicaciones digitales, tales como periódicos,
revistas. Ejemplos: Ejemplo: ePrints, Thinkindot CMS.

2.1.3 La Funcionalidad de los CMS

De acuerdo con James Robertson, citado por Cuerda (Cuerda García, 2004] la
funcionalidad de los CMS como se muestra en la figura 2.2, está dividida en cuatro
categorías que son:

Figura 2.2: Funcionalidad de un CMS

Fuente: [Robertson, 2003]
13
Creación de contenidos: Un CMS aporta herramientas para que los creadores
sin conocimientos técnicos en páginas web, puedan concentrarse en el contenido.
Lo más habitual es proporcionar un editor WYSIWYNG, en el que el usuario ve el
resultado final mientras escribe. Para la creación del sitio los CMS aportan
herramientas para definir la estructura, el formato de las páginas, el aspecto
visual, uso de patrones y un sistema modular que permite incluir funciones no
previstas originalmente.

Gestión de contenido: Los documentos creados se depositan en una base de

datos central o en una organización estructurada de archivos, donde también se
guarda el resto de los datos de la web. La estructura de la web debe presentar una
visión jerárquica del sitio. Se puede asignar un grupo a cada área, con
responsables, editores, autores y usuarios con diferentes permisos. Eso es
imprescindible para facilitar el ciclo de trabajo (workflow), con un circuito de
edición que va desde el autor hasta el responsable final de la publicación. El CMS
posibilita la comunicación entre los miembros del grupo y realiza un seguimiento
del estado de cada paso del ciclo de trabajo.

Publicación: Una página aprobada se publica automáticamente cuando es

requerido, y cuando caduca se archiva para futuras referencias. En la publicación,
se aplica el patrón definido para toda la web, de forma que el resultado final es un
sitio web con un aspecto consistente en todas sus páginas.

Presentación: El CMS puede proporcionar una serie de características para

mejorar la calidad y la eficacia del propio sitio, como adecuarse a la gran cantidad
de navegadores.

2.1.4 Razones para Utilizar un CMS

Entre las razones más importantes para hacer el uso de un CMS según [Cuerda
García, 2004] se mencionan las siguientes:

 Inclusión de nuevas funcionalidades en la web. Esta operación puede

implicar la revisión de multitud de páginas para poder implementar el código
14
 que aporte la funcionalidade. Con un CMS eso puede ser simple como incluir
un modulo realizado por terceros, sin que eso suponga muchos cambios en la
web. El sistema puede crecer y adaptarse a las necesidades futuras.

 Mantenimiento de gran cantidad de páginas. En una web con muchas

páginas hace falta un sistema para distribuir los trabajos de creación, edición y
mantenimiento con permisos de acceso a las diferentes secciones. También
se tiene que gestionar los metadatos de cada documento, la publicación y
enlaces rotos, entre otros aspectos.
 Reutilización de objetos y componentes. Un CMS permite la recuperación y
reutilización de paginas, documentos y en general de cualquier objeto
publicado o almacenado como imágenes video, notas relacionadas y otras.
 Paginas interactivas. Las páginas estáticas llegan al usuario exactamente
como están almacenadas en el servidor web. En cambio, las páginas
dinámicas no existen en el servidor tal como se reciben de los navegadores, si
no que se generan según las peticiones de los usuarios. De esta manera
cuando por ejemplo se utiliza un buscador, el sistema genera una página con
los resultados que no existían antes de la petición. Para conseguir esta
interacción, los CMS se conectan con una base de datos que hace de
repositorio de todos los datos de la web.
 Cambios de aspecto en la web. Si hay una buena separación entre
contenido y presentación, un cambio de diseño puede permitir la revisión de
muchas páginas para su adaptación. Los CMS facilitan los cambios con la
utilización de CSS (Cascading Style Sheets u hojas de estilo en cascada) con
lo que se consigue la independencia de la presentación y contenido.
 Consistencia de la web. La consistencia en una web no quiere decir que
todas las páginas son iguales, sino que hay un orden (visual) de los
elementos. Un usuario nota en seguida cuando una pagina no es igual que el
resto de la web por su aspecto, la disposición de los objetos o los cambios en
la forma de navegar. Estas diferencias provocan sensación de desorden y dan

15
 entender que la web no lo han diseñado profesionalmente. Los CMS pueden
aplicar un mismo estilo en todas las páginas con CSS.
 Control de acceso. Controlar el acceso de una web no consiste simplemente
en no permitir la entrada a la web, sino gestionar los diferentes permisos a
cada área de la web, a la cual tiene acceso los usuarios.

2.2 DISEÑO WEB

Antes de hablar de diseño web debemos definir que es un sitio web y una pagina
web. Según [WEDODE, 2010] un sitio web es un conjunto de páginas web
interrelacionadas y organizadas entorno a una temática o necesidad concreta, que
están en un mismo servidor. Acompañando a las páginas están las carpetas con
archivos auxiliares de imágenes, sonidos, documentos.

Las páginas web son los documentos con los que se construye el sitio web. Una
página web es un documento hipermedia escrito con el lenguaje HTML que es
procesado por un programa especial, el navegador.

El diseño web es fundamental para la elaboración de los sitios y paginas web.

Debido a que un mal diseño puede representar un costo alto para la empresa.

Según [Presman, 2010] “El diseño web incluye actividades técnica y no técnicas
que establecen la vista y sensación de la web, creando la distribución estética de
la interfaz del usuario, definiendo la estructura arquitectura, desarrollando el
contenido y la funcionalidad que residen en la arquitectura y planeando la
navegación”.

2.2.1 Sitio Web y su estructura

La estructura de un sitio web puede ser dividido en tres componentes: diseño de

información, diseño de navegación y diseño de interfaz [Acevez, 2008]. El diseño
de la página es donde estos componentes se unen.

16
 a) Diseño de información: Es la importancia que se da a la información, la
ubicación que tiene en la presentación de manera de facilitar el
entendimiento. Los elementos informativos deben estar ordenados de
manera que reflejen los objetivos y tareas que se desean mostrar al
usuario. Podemos decir que es “lo que se quiere comunicar al usuario”.
b) Diseño de navegación: El diseño de navegación debe comunicar la
relación entre los enlaces que contiene el sitio para que los usuarios
entiendan las opciones que tienen al navegar en el sitio, permitiendo una
vista de manera global de la ubicación y desplazamiento a través de las
paginas de un sitio web. Podemos decir que es “los lugares a donde el
usuario podrá ir”.
c) Diseño de interfaz: Incluye seleccionar y ordenar los elementos de la
interfaz para permitir a los usuarios interactuar con la funcionalidad del
sistema. El objetivo es facilitar la usabilidad y eficiencia tanto como sea
posible. Los elementos comunes que se encuentran en el diseño de
interfaces son los botones de acción, campos de texto, cajas de
verificación, botones radiales y menús desplegables. Podemos decir que
son “las cosas que usuario podrá hacer”.

Diseño de las páginas: Consiste en la disposición de los elementos dentro de las

páginas para ser vistos en pantalla. Las páginas deben tener un esquema
ordenado y legible a simple vista. [Lamarca, 2011].

Aquí se muestran dos ejemplos de disposición de página (Figura.2.3), la imagen

de la izquierda muestra una página ilegible y desordenada, mientras que la
imagen de la derecha, que sigue un esquema ordenado, facilita la navegación y
comprensión del contenido.

17
 Figura 2.3: Disposición de elementos en una página web
Fuente: [Lamarca, 2011]
Para conseguir un buen diseño de una página web se combinan diferentes
elementos como texto, imágenes, iconos, enlaces u otros elementos multimedia
en un conjunto equilibrado, ordenado y agradable.

2.3 DISEÑO EDITORIAL

El diseño editorial es la rama del diseño gráfico dedicada a la diagramación y

composición de publicaciones tales como revistas, periódicos ó libros. [Ghinaglia,
2000]

Sin embargo con los medios digitales, el diseño editorial toma un nuevo medio de
publicación que es el diseño de páginas web (visto en la sección 2.2). Al hablar de
la palabra “página”, este concepto tiene sus propios fundamentos y premisas
desde el diseño editorial; pero con las “páginas” web el medio y el soporte
cambian, ya no es el papel el que utiliza, ya no hay líneas de corte, tamaños de
pliegos a considerar según el tamaño final del libro o cualquier otro medio, todo
eso ya no existe en el diseño editorial digital, para eso hay otras bases como en el
formato digital web en HTML, la codificación para el diseño con CSS, y en vez de
pliegos un factor a considerar es la resolución y tamaño de los monitores.

18
2.3.1 La Diagramación

La diagramación, también llamada maquetación, es el proceso y el resultado de

ordenar o distribuir los contenidos que integran cada una de las páginas de un
periódico: textos, imágenes publicidad. [IFIIE, 2011]

Aunque la palabra diagramación pareciese que tomase un significado distinto en

periódicos, libros que en paginas web, resulta que tienen el mismo significado, ya
que el acto de diagramar tan solo se relaciona con la distribución de los elementos
en un espacio determinado no importa cual fuese ese medio.

2.3.2 Fundamentos de la Diagramación

Lo fundamental en la diagramación se ve reflejado en:

El orden del diseño: Se refiere principalmente a la relación métrica de objetos en

una página, donde la tipografía, el color y la composición constituyen las bases de
la diagramación. La retícula, la proporción y el equilibrio, son los principales
conceptos para diagramar.

 La retícula, es el trazo de divisiones horizontales en la caja de

diagramación. Estas divisiones pueden ser de dos, tres, cuatro o más.
Estos trazados forman la modulación horizontal que se combinan con las
columnas (modulación vertical) para definir los espacios que servirán para
ubicar los elementos de la diagramación. En la Sección 2.3.2.1 se la vera
con mas detalle.
 La proporción, es determinada por el campo de ocupación de las imágenes
y texto que, son determinados al realizar la composición. Los elementos
que están bien proporcionados son agradables a la vista.
 El equilibrio, es la disposición de los elementos en forma armónica, como
por ejemplo los elementos requieren cierta distancia respecto de los bordes
de la página u otro medio como las pantallas, ya que si están muy cerca del
borde, producen una inestabilidad de la lectura del conjunto. Los elementos

19
 colocados a la derecha tienen mayor peso visual que los de la izquierda, los
cuales se perciben como el centro de atención. Tanto las imágenes que
intervengan, algunas mas resaltadas que otras, por mayor contraste,
tamaño, color, tonalidad, etcétera.

El orden de los ítems: Se refiere al orden de distribución de los elementos que

componen la diagramación en las retículas y la proporción que maneja esta.

2.3.2.1 La Retícula

La retícula consiste en un conjunto determinado de relaciones basadas en la

alineación, que actúan como guías para la distribución de los elementos en todo el
formato, cada retícula contiene las mismas formas básicas, con independencia del
grado de complejidad que alcance. Cada parte cumple una función determinada;
estas partes pueden combinarse en función de las necesidades, o bien omitirse de
la estructura general, según la voluntad del diseñador y dependiendo de la forma
en que interprete los requisitos de información de material.[Samara, 2004].

Todos los trabajos de diagramación, deben llevar una guía a través de una
estructura, para ello se realiza la utilización de la retícula. Por lo cual podemos
definir a la retícula como guías para la alineación y distribución de los elementos
en un formato que organiza todos los elementos de forma jerarquizada, creando
orden intangible que puede ser comprendido y repetido por otras personas.

Partes de la Retícula: La retícula consta de las siguientes partes:

 Las líneas de flujo: son alineaciones que rompen el espacio dividiéndolo en

bandas horizontales. Estas líneas guían al ojo a través del formato y
pueden utilizarse para imponer paradas adicionales y crear puntos de inicio
para el texto o las imágenes.
 Las columnas: son alineaciones verticales donde se coloca principalmente
tipografía. Pueden haber diferentes tipos de divisiones de columnas en las
páginas.

20
  Los módulos: son unidades individuales que están separados por intervalos
regulares que cuando se repiten en el formato de la página, crean columnas
y filas.
 Las zonas espaciales: son grupos de módulos que en conjunto, forman
campos claramente identificados. Puede asignarse un papel específico a
cada campo para mostrar información, por ejemplo un campo alargado
horizontal puede usarse para imágenes y el campo situado debajo de este
pude reservarse para una serie de columnas de texto.

Figura 2.4: Partes de la retícula

Fuente: [Samara, 2004]

Tipos de Retículas

Retícula de manuscrito: La retícula de bloque o manuscrito, es la más sencilla.

Su estructura de base es un área grande y rectangular la cual ocupa mayormente
la página. Se utiliza para acoger textos largos y continuos.

21
 Figura 2.5: Retícula de manuscrito
Fuente: [Samara, 2004]
Retícula de columnas: Es una retícula de columnas con un gran número de
líneas de flujo horizontales. Es usualmente utilizada en maquetar libros de dos
columnas.

Figura 2.6: Retícula de columna

Fuente: [Samara, 2004]
Retícula modular: Es una retícula de columnas con un gran número de líneas de
flujo horizontales que subdividen las columnas en filas. Se utiliza para diseños de
gran complejidad que requieren un alto grado de control y equilibrio.

Figura 2.7: Retícula modular

Fuente: [Samara, 2004]

22
Retícula jerárquica: Estas retículas se adaptan a las necesidades de información
que organizan y están basadas la disposición intuitiva y equilibrada de los
elementos que se requieran. Las páginas web constituyen un ejemplo de retículas
jerárquicas.

Figura 2.8: Retícula jerárquica

Fuente: [Portal Yeeaahh]

Por lo cual el sistema de retículas no se utiliza solo en el diseño editorial, sino

también para el diseño de páginas web, creando una matriz de celdas que son los
módulos, los cuales los programamos creando bloques con CSS y JavaScript le
da el dinamismo para manejarlos.

Figura 2.9: Módulos reticulares en CSS

23
La facilidad que brinda la retícula para formar diversos módulos y zonas
especiales es adecuada para la composición de contenido variado en la página.
Por lo cual nuestro estudio se basa principalmente en el uso de este tipo de
retículas.

2.4 PERIÓDICO DIGITAL (PD)

De acuerdo con [Rost, 2003] “los periódicos digitales son medios de comunicación
que se valen de redes informáticas, organizados en estructuras hipertextuales sin
límite de tiempo y espacio. El periódico digital ofrece a los usuarios un menú de
contenidos que incluye diferentes formas de presentar la información (texto,
sonidos, vídeo, imágenes) y a la vez, permite interactividad de selección y
comunicación”.

El hecho de que haya repetición cíclica en sus ediciones los convierte en

"periódicos" y la publicación electrónica le da el carácter de "digital".

2.4.1 Elementos del diseño de un PD

El enfoque del diseño periodístico se plasma en diversos aspectos que el

diseñador web debe tener presente, según [Salvatierra & Sancho, 2007] en la web
debe ser:

Hipertextual: Consiste en una organización modular de los distintos nodos

interconectados que componen cada información en particular y el medio en su
totalidad.

Metainformativo: El diseño de un PD no se ocupa únicamente de los elementos

gráficos visibles, sino que contempla múltiples recursos para potenciar la
visibilidad documental del medio por parte de los buscadores y otras bases de
datos.

Interactivo: El diseño periodístico no está pensado para la contemplación, sino

para la acción. Por lo tanto, el diseñador debe tener siempre presente la

24
necesidad de facilitar el movimiento y la respuesta de los usuarios, considerando
en todo momento los posibles flujos de información.

Multimedia: Combina dos herencias genéticas: la del diseño impreso (periódicos

y revistas) y la del diseño audiovisual (televisión y videojuegos). Mediante esa
integración de lenguajes se explora las posibilidades de componer piezas
periodísticas con textos, imágenes, sonidos y vídeos.

Multiplataforma: El buen diseñador de PD no diseña para un navegador

específico, para un solo sistema operativo, ni siquiera para un único dispositivo de
recepción. Debe tener en cuenta que sus potenciales usuarios emplean múltiples
aplicaciones, formatos, estándares y aparatos. Por lo tanto, deberá esforzarse en
conseguir diseños sólidos que se naveguen de manera homogénea con
independencia del soporte de recepción.

2.4.2 Criterios para comunicar en la Web

El tiempo del visitante es oro, por lo cual es mucho mas fácil perderlo es segundos
que retenerlo minutos, si no es capaz de entender de un vistazo el sitio. Por lo cual
[Salvatierra & Sancho, 2007] mencionan algunos criterios para comunicar en la
web como:

Jerarquización: el orden de presentación de noticias debe obedecer a criterios

periodísticos, la puesta en página de estas noticias debe guiarse por los hábitos
de atracción visual de los internautas y que la distribución del ancho de página
debe tener en cuenta las distintas resoluciones de los monitores.

Sencillez: los grandes diarios en la red han descubierto la sencillez como mejor
arma para retener al lector:

a) Pocos y armónicos colores, un fondo de pantalla blanco, con tipografía

oscura en escala de grises para el cuerpo de texto.
b) Textos legibles con facilidad, escritos en cuerpos entre 11 y 13 píxeles
(dependiendo de la tipografía elegida), en párrafos cortos (6-10 líneas).

25
 c) Empleo de una tipografía universal, que garantice verla en la mayoría de
navegadores y sistemas operativos la tipografía con serif más extendida es
la de las familias Times New Roman, Georgia, Book Antiqua y Palatino; y
entre las de sans serif, es preferible limitar la elección entre Arial, Verdana,
Trebuchet, Comic Sans y Tahoma.
d) Un uso limitado y racional de los enlaces en el texto, porque cuantos más
enlaces encierra un texto, más profundo y documentado parece; pero lo
cierto es que ese exceso provoca confusión y ansiedad en el lector. Por lo
tanto utilizarlos sólo cuando la página de destino contiene información
complementaria o paralela.
Navegabilidad: Para que el visitante entienda de forma intuitiva la navegación del
sitio, es imprescindible que esos enlaces a los que hacemos referencia sean solo
los necesarios: ni más ni menos. Y que las barras de navegación sean las justas,
ya que el exceso de barras de navegación, complican el recorrido. Por lo cual es
importante no sobrecargar con demasiados elementos gráficos para una rápida
descarga de la misma.

Legibilidad: Es fundamental prestar atención, a que el resultado informativo esté

lo suficientemente bien presentado como para que agrade leerlo. Algunas normas
que pueden llegar a ser de utilidad son las siguientes:

a) Diseñar de forma que los contenidos nunca excedan los márgenes

horizontales del monitor.
b) El ancho de línea, para los textos centrales, no debe exceder los 450-500
píxeles; porque dificultan la lectura.
c) El tamaño y el color de la tipografía se deben elegir con criterios de
legibilidad, no de aspecto
d) Los textos se deben construir en párrafos cortos y aireados.
e) Para los cuerpos titulares se debe elegir una escala tipográfica
jerarquizada, que se identifique y diferencie de los títulos, subtítulos,
sumarios, texto central, texto complementario, enlace y otros

26
 Figura 2.10: Aplicación del diseño editorial y web para Periódicos Digitales
El periódico Digital hereda gran parte de sus contenidos, sus formas y estructuras
de un periódico impreso, que combinado con soportes tecnológicos nos ofrecen un
nuevo medio de comunicación.

2.5 INGENIERÍA WEB (IWEB)

El desarrollo de Aplicaciones Web (WebApp) es distinto respecto al desarrollo de

software de otras categorías, “implica una mezcla de publicación impresa y
desarrollo de software, marketing e informática, de comunicaciones internas y
relaciones externas además de arte y tecnología”. Por tanto, el desarrollo de un
WebApp es un esfuerzo multidisciplinario debido al manejo de múltiples formatos,
con una mezcla de atención social para saber su efecto ético y legal. [Pressman,
2003]

En las primeras etapas de desarrollo de la Web, como ya se mencionó, parecía

que las aplicaciones eran caóticas, carecían de estructura, lo que evidenciaba la
falta de métodos de desarrollo adecuados, el desarrollo de aplicaciones Web
requiere de un proceso estructurado y sistemático.

La ingeniería de software proporciona herramientas de análisis y diseño

necesarias para que los desarrolladores puedan representar de forma abstracta un
problema y a partir de ésta generar una solución informática, pero los métodos de
análisis y diseño de WebApps contienen esos objetivos, más los añadidos por la
dimensión de hipermedia como la navegación a través de la información y su
presentación.
27
2.5.1 Modelo de Diseño de Hipermedia Orientado a Objetos (OOHDM)

Modelo de Diseño de Hipermedia Orientado a Objetos en ingles Object Oriented

Hypermedia Design Model (OOHDM), fue creado en 1996 por Daniel Schwabe y
Gustavo Rossi. Este método se introduce el modelado orientado a objetos en el
desarrollo de hipermedia. En OOHDM se modela la navegación a través del
diagrama de clases navegacionales y del diagrama de contextos. Las etapas de
Diseño Conceptual, Diseño Navegacional, Diseño de Interfaces e Implementación
son desarrolladas en un proceso que combina un diseño incremental, iterativo y
basado en prototipos. [Rodríguez, 2009]

Posee actividades separadas que permiten obtener diseños modulares y

reusables. También se puede obtener un framework que contenga diseños
específicos que se pueden usar en cada una de las etapas.

OOHDM considera que el desarrollo de una aplicación hipermedial se da en un

proceso que posee cuatro actividades principales:

Diseño conceptual: Se construye un modelo del dominio de la aplicación, a

través de las técnicas del modelado orientado a objetos, se puede partir de un
modelo estatico. Se identifican las clases y sus relaciones, que pueden ser de
asociación, agregación, composición, y generalización-especialización. El
resultado de esta etapa es un modelo estructural compuesto por clases,
asociaciones y atributos, y es similar al diagrama de clases del Unified Modelling
Language (UML).

Diseño navegacional: En OOHDM, la navegación es considerada un paso crítico

en el diseño de aplicaciones de hipermedia, es construido como una vista del
modelo conceptual. En OOHDM, una aplicación es concebida como una vista
navegacional del modelo conceptual. A partir de consultas en los modelos E/R
(comportamiento que surge en el modelo conceptual) se pueden expresar
diferentes vistas para diferentes perfiles de usuarios. Para construir la estructura
navegacional se debe tener en cuenta:
28
  Nodos que serán navegables, establecer los atributos que poseen y sus
relaciones (que son las que constituyen los Links).
 Contextos en que el usuario navegará para organizar el espacio
navegacional.
 Vistas de los objetos navegacionales: de acuerdo al contexto en que se
esté navegando.
 Estructuras que permitirán acceder a los nodos: ya sea iniciar recorridos
dentro de alguno de los contextos definidos, realizar operaciones de
búsqueda o armar páginas iniciales de la aplicación navegable.

Una de las mayores innovaciones de OOHDM es que el usuario no navega

directamente dentro de las entidades conceptuales, sino en los Nodos (objetos
navegacionales) que son construidos desde uno o varias entidades conceptuales.
Entonces los atributos de los nodos se obtienen a partir de los atributos del
modelo conceptual.

Diseño de interfaz abstracta: En esta etapa se define la forma en la que serán

percibidos los objetos a través de la interfaz de usuario y también la apariencia
que tendrán. La separación de diseño navegacional y de la interfaz de usuario
permite dividir las tareas del desarrollo, así como tener diferentes interfaces para
un mismo modelo navegacional.

En OOHDM se utilizan vistas abstractas de datos (abstract data views, ADV).

Mediante un ADV se representa la estructura estática de la interfaz, la
composición de objetos y los eventos a los que responden.

Implementación: Es la última etapa, en la que, a partir de los modelos diseñados,

se deben escoger las correspondencias con los objetos concretos de la
plataforma de implementación. Es por lo tanto, una etapa totalmente dependiente
de la plataforma de implementación escogida.

29
2.5.2 Lenguaje Unificado de Modelado (UML)

El Lenguaje Unificado de Modelado (UML), creación de Grady Booch, James

Rumbaugh e Ivar Jacobson, es el lenguaje de modelado de sistemas de software
más conocido y utilizado en la actualidad. Es un lenguaje gráfico para visualizar,
especificar, construir y documentar artefactos de un sistema de software. (Boock,
2006].

Un modelo UML esta compuesto por tres clases de bloques de construcción:

 Elementos: Los elementos son abstracciones de cosas reales o ficticias

(objetos, acciones, etc.)
 Relaciones: relacionan los elementos entre sí.
 Diagramas: Son colecciones de elementos con sus relaciones.

Diagramas UML

El UML está compuesto por diversos elementos gráficos que se combinan para
conformar diagramas. La finalidad de los diagramas es presentar diversas
perspectivas de un sistema, a las cuales se les conoce como modelo. Es
importante destacar que un modelo UML describe lo que supuestamente hará un
sistema, pero no dice cómo implementar dicho sistema.

Diagrama de Clases: Es un diagrama que modela la estructura de las clases del

sistema. Muestra las entidades en un sistema o dominio y la forma en que tales
entidades se relacionan entre si. Representan un conjunto de elementos que son
estáticos, como las clases y los tipos, sus contenidos, y las relaciones que se
establecen entre ellos.

Diagrama de Casos De Uso: Un caso de uso es una descripción de las acciones

de un sistema desde el punto de vista del usuario. Su ventaja principal es la
facilidad para interpretarlos, lo que hace que sean especialmente útiles en la
comunicación con el cliente. Los casos de uso cuentas con varios elementos
básicos:

30
Actores: Representa al usuario del sistema. Es una entidad externa al sistema que
se modela y que puede interactuar con el.

Caso de uso: Es una operación / tarea específica que se realiza tras una orden de
algún agente externo, sea desde una petición de un actor o bien desde la
invocación desde otro caso de uso.

Asociaciones: Hay una asociación entre un actor y un caso de uso si el actor

interactúa con el sistema para llevar a cabo el caso de uso. Pueden ser de tres
tipos:

 Include: Se puede incluir una relación entre dos casos de uso de tipo
“include” si se desea especificar comportamiento común en dos o más
casos de uso.

 Extend: Es decir, esta relación implica que el comportamiento de un caso

de uso es diferente dependiendo de ciertas circunstancias.

 Generalizaciones: Este tipo de relación es uno de los más utilizados,

cumple una doble función dependiendo de su estereotipo, que puede ser de
Uso (<<uses>>) o de Herencia (<<extends>>). Este tipo de relación está
orientado exclusivamente para casos de uso (y no para actores).

Limites del sistema: Resulta útil dibujar los límites del sistema cuando se pretende
hacer un diagrama de casos de uso para parte del sistema.

2.6 LA NORMA ISO-9126

La norma ISO-9126, ha establecido un estándar internacional para la evaluación

de la calidad de productos de software, en el cual se establecen las características
de calidad para productos de software. El estándar ISO-9126 establece que
cualquier componente de la calidad del software puede ser descrito en términos de
una o más de seis características básicas, las cuales son: funcionalidad,
confiabilidad, usabilidad, eficiencia, mantenibilidad y portatilidad; cada una de las
cuales se detalla a través de un conjunto de subcaracterísticas que permiten
31
profundizar en la evaluación de la calidad de productos de software. A
continuación se detalla cada una de las características que establece el estándar
ISO-9126.

Descripción Sub Atributos

Permite Adecuación: Se enfoca a evaluar si el software cuenta
Funcionalidad

calificar si un con un conjunto de funciones apropiadas para efectuar las

producto de tareas que fueron especificadas en su definición.
software Exactitud: Este atributo permite evaluar si el software
maneja en presenta resultados o efectos acordes a las necesidades
forma para las cuales fue creado. Interoperabilidad: Permite
adecuada el evaluar la habilidad del software de interactuar con otros
conjunto de sistemas previamente especificados.
funciones que Conformidad: Evalúa si el software se adhiere a
satisfagan las estándares, convenciones o regulaciones en leyes y
necesidades prescripciones similares.
para las cuales Seguridad: Se refiere a la habilidad de prevenir el acceso
fue diseñado. no autorizado, ya sea accidental o premeditado, a los
programas y datos.
Se refiere a la Nivel de Madurez: Permite medir la frecuencia de falla
Confiabilidad

capacidad del por errores en el software.

software de Tolerancia a fallas: Se refiere a la habilidad de mantener
mantener su un nivel específico de funcionamiento en caso de fallas
nivel de del software o de cometer infracciones de su interfaz
ejecución bajo específica.
condiciones Recuperación: Se refiere a la capacidad de restablecer el
normales en nivel de operación y recobrar los datos que hayan sido
un periodo de afectados directamente por una falla, así como al tiempo y
tiempo el esfuerzo necesarios para lograrlo.
establecido.
Permite Comprensibilidad: Se refiere al esfuerzo requerido por
Usabilidad

evaluar el los usuarios para reconocer la estructura lógica del

esfuerzo sistema y los conceptos relativos a la aplicación del
necesario que software.
deberá invertir Facilidad de Aprender: Establece atributos del software
el usuario para relativos al esfuerzo que los usuarios deben hacer para
utilizar el aprender a usar la aplicación.
sistema. Operabilidad: Agrupa los conceptos que evalúan la
operación y el control del sistema.
32
 Permite Comportamiento con respecto al Tiempo: Es el atributo

Eficiencia
evaluar la del software relativo a los tiempos de respuesta y de
relación entre procesamiento de los datos.
el nivel de Comportamiento con respecto a Recursos: Es el
funcionamiento atributo del software relativo a la cantidad de recursos
del software y usados y la duración de su uso en la realización de sus
la cantidad de funciones.
recursos
usados.
Permite medir Capacidad de análisis: Relativo al esfuerzo necesario
Mantenibilidad

el esfuerzo para diagnosticar las deficiencias o causas de fallas, o

necesario para para identificar las partes que deberán ser modificadas.
realizar Capacidad de modificación: Mide el esfuerzo necesario
modificaciones para modificar aspectos del software, remover fallas o
al software, ya adaptar el software para que funcione en un ambiente
sea por la diferente.
corrección de Estabilidad: Permite evaluar los riesgos de efectos
errores o por el inesperados debidos a las modificaciones realizadas al
incremento de software.
funcionalidad. Facilidad de Prueba: Se refiere al esfuerzo necesario
para validar el software una vez que fue modificado.
Se refiere a la Adaptabilidad: Evalúa la oportunidad para adaptar el
Portatilidad

habilidad del software a diferentes ambientes sin necesidad de aplicarle

software de modificaciones.
ser transferido Facilidad de Instalación: Es el esfuerzo necesario para
de un instalar el software en un ambiente determinado.
ambiente a Conformidad: Permite evaluar si el software se adhiere a
otro. estándares o convenciones relativas a portatilidad.
Capacidad de reemplazo: Se refiere a la oportunidad y el
esfuerzo usado en sustituir el software por otro producto
con funciones similares.
Tabla 2.1: Factores de calidad de software
Fuente: [Presman, 2010]

Es necesario que todo aquel que se dedica al desarrollo de software incluya en

sus procesos, estándares de calidad que permitan certificarse en alguno de los
modelos.

33
2.7 METODOLOGÍA DE EVALUACIÓN DE CALIDAD DE SITIOS WEB (WEB-
SITE QEM)

La Metodología de Evaluación de Calidad de Sitios Web (Web-Site Quality

Evaluation Method) denominada Web-Site QEM, cuyo autor es Luis Olsina
[Olsina, 1999], es una metodología cuantitativa para la evaluación y comparación
de sitios web, basada en el estándar ISO 9126-1.

El objetivo de este trabajo es definir y discutir una metodología cuantitativa,

integral, robusta y flexible para la evaluación de calidad en aplicaciones centradas
en la web.

Esta metodología pretende realizar un aporte ingenieril al proponer un enfoque

sistémico, disciplinado y cuantitativo que se adecue a la evaluación comparación y
análisis de calidad de los artefactos web mas o menos complejos.

Las fases de la metodología y construcción de procesos son:

 Planificación y Programación de la Evaluación de Calidad

 Definición y Especificación de Requerimientos de Calidad
 Definición e Implementación de la Evaluación Elemental
 Definición e Implementación de la Evaluación Global
 Análisis de Resultados y Conclusión

2.7.1 Planificación y Programación de la Evaluación de Calidad

Esta fase contiene actividades y procedimientos de soporte, con el fin de

determinar objetivos estratégicos, tácticos, operativos. Esto permite establecer las
principales estrategias y metas del proceso en un contexto organizacional,
permitiendo seleccionar un modelo de evaluación, asignar métodos, agentes y
recursos a las actividades.

34
2.7.2 Definición y Especificación de Requerimientos de Calidad

En esta fase, basada en los aspectos definidos en la fase anterior, se establecen

las actividades y modelos para la determinación, análisis y especificación de los
requerimientos. A partir de un proceso de medición orientado a metas, con el fin
de evaluar, comparar, analizar y mejorar características, además de atributos de
los artefactos web. Los requerimientos deben responder a las necesidades y
comportamientos de un perfil de usuario y dominio dado.

Los requerimientos definidos están basados en los siguientes atributos:

35
1 USABILIDAD 2.2.2 Objetos de Control Navegacional <0.35
2.2.2.1 Permanencia y Estabilidad en la Presentación de
1.1 Comprensibilidad del sitio <0.4 los Controles Contextuales (Subsitio) <0.7
1.1.1 Esquema de Organización Global <0.8 2.2.2.1.1 Permanencia de los Controles Contextuales
1.1.1.1 Mapa del sitio <0.2 <0.6
1.1.1.2 Tabla de Contenidos <0.4 2.2.2.1.2 Estabilidad <0.4
1.1.1.3 Índice alfabético <0.4 2.2.2.2 Nivel de Desplazamiento <0.3
1.1.2 Mapa de imagen <0.3 2.2.2.2.1 Desplazamiento Vertical <0.5
1.2 Mecanismo de ayuda y retroalimentación en línea 2.2.2.2.2 Desplazamiento Horizontal <0.5
<0.3 2.2.3 Predicción Navegacional <0.3
1.2.1 Calidad de la Ayuda <0.25 2.2.3.1 Enlace con Título (enlace con texto explicatorio)
1.2.1.1 Ayuda Explicatoria Orientada al usuario <0.4 <0.3
1.2.1.2 Ayuda de la Búsqueda <0.6 2.2.3.2 Calidad de la Frase del Enlace <0.7
1.2.2 Indicador de Última Actualización <0.25 2.3 Aspectos del Dominio orientados al Lector
1.2.2.1 Hora de publicación de la Noticia <0.5 <0.4
1.2.2.2 Fecha de edición de la Noticia <0.5 2.3.1. Sectores <0.6
1.2.3 Directorio de Direcciones <0.25 2.3.1.1 Multimedia <0.3
1.2.3.1 Directorio E-mail <0.5 2.3.1.2 Publicidad <0.3
1.2.3.2 Directorio TE-Fax <0.5 2.3.1.3 Notas Especiales <0.2
1.2.4 Retroalimentación <0.25 2.3.1.4 Suplementos <0.2
1.2.4.1 Comentario sugerencia <0.5 2.3.2 Ítems Imprescindibles <0.4
1.2.4.2 Contactos <0.5 2.3.2.1 Ranking de Noticias <0.2
1.3 Aspectos de interfaces y estética <0.3 2.3.2.2 Información del Clima <0.2
1.3.1 Cohesividad al Agrupar los Objetos de control 2.3.2.3 Ediciones Anteriores Online <0.2
principales <0.3 2.3.2.4 Encuestas <0.2
1.3.2 Permanencia y estabilidad en la presentación de
los controles principales <0.3 3 CONFIABILIDAD
1.3.2.1 Permanencia de Controles Directos <0.5
1.3.2.2 Permanencia de Controles Indirectos <0.2 3.1.1 Errores de Enlaces <0.7
1.3.2.3 Estabilidad <0.3 3.1.1.1 Enlaces Rotos <0.5
1.3.3 Aspectos de estilo <0.4 3.1.1.2 Enlaces Inválidos <0.3
1.3.3.1 Uniformidad en el Color de Enlaces <0.4 3.1.1.3 Enlaces no Implementados <0.2
1.3.3.2 Uniformidad del estilo global <0.6 3.1.2 Errores o Deficiencias Varias <0.3
3.1.2.1 Deficiencias o cualidades ausentes debido a
2 FUNCIONALIDAD diferentes navegadores (browsers) <0.4
3.1.2.2 Deficiencias o resultados inesperados
2.1 Aspectos de Búsqueda y Recuperación <0.3 independientes de browsers (p.ej. errores de búsqueda
2.1.1 Mecanismo de Búsqueda en el Sitio Web imprevistos, deficiencias con marcos) <0.35
<0.7 3.1.2.3 Nodos Destinos (inesperadamente) en
2.1.1.1 Búsqueda Restringida <0.6 Construcción <0.35
2.1.1.1.1 por orden <0.4
2.1.1.1.2 por fecha <0.4 4 EFICIENCIA
2.1.1.1.3 por área <0.2
2.1.1.2 Búsqueda Global <0.4 4.1 Performancia <0.7
2.1.2 Mecanismos de Recuperación <0.3 4.1.1 Páginas de Acceso Rápido <0.7
2.1.2.1 Nivel de Personalización <0.5 4.2 Accesibilidad <0.3
2.1.2.2 Nivel de Retroalimentación en la Recuperación 4.2.1 Accesibilidad de Información <0.6
<0.5 4.2.1.1 Soporte a Versión sólo Texto <0.3
2.2 Aspectos de Navegación y Exploración <0.3 4.2.1.2 Legibilidad al desactivar la Propiedad Imagen del
2.2.1 Navegabilidad <0.35 Browser <0.7
2.2.1.1 Orientación <0.7 4.2.1.2.1 Imagen con Título <0.5
2.2.1.1.1 Indicador del Camino <0.6 4.2.1.2.2 Legibilidad Global <0.5
2.2.1.1.2 Etiqueta de la Posición Actual <0.4 4.2.2 Accesibilidad de Ventanas <0.4
2.2.1.2 Promedio de Enlaces por Página <0.3

Figura 2.11: Árbol de requerimientos para las características de Usabilidad,

Funcionalidad, Confiabilidad, Eficiencia con sus respectivos pesos.

36
2.7.3 Definición e Implementación de la Evaluación Elemental

Trata con actividades, modelos, técnicas y herramientas para determinar métricas

y criterios de avaluación para cada atributo cuantificable. Se consideran tipos de
criterios elementales, escalas, escalas de preferencia, valores críticos y funciones
para determinar la preferencia elemental.

A partir del árbol de requerimientos del cual se desprenden una serie de

subcaracteristicas para cada atributo cuantificable Ai se debe asociar y determinar
una variable Xi, que tomara un valor real a partir de un proceso de medición,
Además, para cada variable Xi computada, por medio de un criterio elemental,
producirá una preferencia elemental IEi, este resultado, final elemental se
interpreta como el grado o porcentaje de requerimientos de usuario satisfecho
para el atributo Ai. Un criterio de evaluación elemental ayuda a comprender y
especificar como medir atributos cuantificables. Desde el punto de vista analítico,
el criterio elemental se define como la función:

Fi: Ri->l: donde IEi=Fi(Xi), Xi min<=Xi max

Por otro lado los criterios elementales tienen una clasificación la cual se escribe en
la Figura 2.12.

Figura 2.12: Criterios elementales

Fuente: [Olsina, 2002]
37
a) Criterios Elementales Absolutos con Variable Continua
Criterio de Variable Única. Este es un criterio elemental común. Se asume que la
variable X es única y continua, con el fin e determinar el criterio elemental primer
paso consiste en definir el rango de valores de interés para la evaluación de la
variable continua, el siguiente paso consiste en determinar las coordenadas de
los puntos más relevantes y su preferencia de calidad.

Criterio de Variable Normalizada. Este es un criterio elemental que se suele

utilizar para evaluar la relación entre dos atributos con criterios absolutos de un
mismo sistema definido por:

Umi = Xi / Xj : (1)

Donde, Xi=∑ de atributos con puntaje obtenido y Xj=∑ puntaje máximo.

Criterio Multi-variables Continuas, la variable X es resultante de algunas otras

variables y constantes (El valor X corresponde a alguna métrica indirecta).

Criterio de preferencia de calidad directa, el criterio es subjetivo y basado en la

experiencia y criterio de los evaluadores. Desde el unto de vista de la precisión y
objetividad, es el peor criterio, debido a que es posible introducir errores
intencionados y /o involuntarios.

CrE(Xi)={(0,0), (100,100)} (2)

b) Criterios elementales Absolutos con Variable Discreta

Criterios Binario, es el mas simple de los criterios discretos y absoluto. El criterio
para la variable binaria X se mapea en una preferencia elemental cuyas
coordenadas son:

CrE(Xi)={(0,0), (1,100)} (3)

Donde un valor de Xi=0 se interpreta como la ausencia del atributo de calidad; en

cambio un valor de Xi=1 se interpreta como la presencia o disponibilidad del
tiempo.

38
Criterio de Multi-nivel, este criterio es una generalización del criterio binario, la
variable discreta tomada de dos valores cada de los cuales corresponde a una
preferencia de calidad.

CrE(Xi)={(0,0), (1,60), (100,100)} (4)

Donde un valor de Xi=0 se interpreta como la ausencia del atributo de calidad; en

cambio un valor Xi=1 se interpreta como la presencia parcial del atributo
finalmente un valor Xi=2, se interpreta como la presencia total del atributo.

Criterio de multinivel definido como subconjuntos, es un muti-nivel definido

como subconjunto de los números naturales. La variable discreta puede tomar
más de dos valores cada de los cuales corresponde a una preferencia de calidad.

CrE(Xi)={(0,0), (1,50), (2,100)} (5)

Donde listado de valores para Xi es como sigue: 0=ausencia de atributo;

1=atributo básico; 2=atributo extendido o avanzado.

Criterio de Multi-variables discretas, este criterio permite agrupar varias

variables discretas y modelar el resultado en una única variable X. de este modo
se puede reducir la calidad de criterios elementales.

Sea un conjunto de variables discretas Di,…,Dn, entonces se puede definir una

variable compuesta X también discreta, X=F(Di,…,Dn) y X e {Xi,…,Xn}.

2.7.4 Definición e implementación de la Evaluación Global

Trata con actividades modelos herramientas para determinar los criterios de

agregación de la preferencia de calidad elemental para producir la preferencia
global, para cada sistema seleccionado. Se consideran tipos de funciones de
agregación para modelar diferentes relaciones entre atributos y características.

Para cada característica o sistema a evaluar y comparar se identifican n atributos

necesarios, cuya preferencia o indicador elemental (IE) se debe computar y los
valores individuales de IE1..IEN están normalizados de manea que: 0<=IEi<=1; o
39
en la escala de porcentaje 0%<=IEi=100% además que las características están
asociadas a pesos definidos como Pi. En este caso se expresa el indicador o
preferencia global (IG) mediante el uso de una sumatoria:

IG= P1 IE1+…+Pn IEn para 0<=IEi<=1 (6)

Donde 0<=Pi<=1, para i=1…n y P1+…+Pn=1

Tanto los puntajes elementales como los indicadores de calidad global esta en uno
de los tres niveles de aceptabilidad.

Insatisfecho De 0 a 40%
Marginal Desde 40 a 60%
Satisfecho Desde 60 a 100%
Tabla 2.2: Niveles de Aceptabilidad
Fuente: (Olsina, 1999)

2.7.5 Análisis de Resultados y Conclusión

Trata con actividades de análisis y comparación de las preferencias de calidad

elementales y globales. Asimismo la justificación de los resultados.

2.8 TECNOLOGIAS INFORMATICAS

2.8.1 Servidor Apache

Un servidor web como su nombre lo indica, es un software instalado en el equipo

con todas las condiciones necesarias para servir o entregar páginas web que le
sean solicitadas por un navegador, asegurando que se muestren y representen
todos los elementos necesarios para su correcto funcionamiento y visualización.

Las características del servidor Apache son:

 Corre en una multitud de Sistemas Operativos, lo que lo hace

prácticamente universal.
 Es una tecnología gratuita de código fuente abierto.
 Es un servidor altamente configurable de diseño modular.

40
  Trabaja con gran cantidad de lenguajes como Perl, PHP y otros lenguajes
de script.
 Permite personalizar la respuesta ante los posibles errores que se puedan
dar en el servidor.
 Tiene una alta configuración en la creación y gestión de logs.

2.8.2 Hypertext Preprocessor (PHP)

PHP es un lenguaje de programación de uso general de código abierto del lado

del servidor originalmente diseñado para el desarrollo web de contenido dinámico.
Fue uno de los primeros lenguajes de programación del lado del servidor que se
podían incorporar directamente en el documento HTML en lugar de llamar a un
archivo externo que procese los datos. El código es interpretado por un servidor
web con un módulo de procesador de PHP que genera la página web resultante.
PHP ha evolucionado por lo que ahora incluye también una interfaz de línea de
comandos que puede ser usada en aplicaciones gráficas independientes. PHP
puede ser usado en la mayoría de los servidores web al igual que en casi todos
los sistemas operativos y plataformas sin ningún costo.

Características

 Orientado al desarrollo de aplicaciones web dinámicas con acceso a

información almacenada en una base de datos.
 Es considerado un lenguaje fácil de aprender, ya que en su desarrollo se
simplificaron distintas especificaciones, como es el caso de la definición de
las variables primitivas.
 El código fuente escrito en PHP es invisible al navegador web y al cliente,
ya que es el servidor el que se encarga de ejecutar el código y enviar su
resultado HTML al navegador.
 Capacidad de conexión con la mayoría de los motores de base de datos
que se utilizan en la actualidad, destaca su conectividad con MySQL y
PostgreSQL.

41
  Debido a su flexibilidad ha tenido una gran acogida como lenguaje base
para las aplicaciones Web de manejo de contenido y es su uso principal.

2.8.3 Javascript

JavaScript es un lenguaje de programación interpretado, dialecto del estándar

ECMAScript. Se define como orientado a objetos, basado en prototipos,
imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente, implementado como

parte de un navegador web permitiendo mejoras en la interfaz de usuario y
páginas web dinámicas aunque existe una forma de JavaScript del lado del
servidor Node.js es uno de los notables ejemplos de JavaScript en el lado del
servidor, siendo usado en proyectos importantes

Características

Las siguientes características son comunes:

Dinámico

 Tipado dinámico, como en la mayoría de lenguajes de scripting, el tipo está

asociado al valor, no a la variable.
 Objetual, JavaScript esta formado casi en su totalidad por objetos.
 Evaluación en tiempo de ejecución, JavaScript incluye la función eval que
permite evaluar expresiones como cadenas en tiempo de ejecución.
Funcional

A las funciones se les suele llamar ciudadanos de primera clase; son objetos en sí
mismos. Una función anidada es una función definida dentro de otra. Esta es
creada cada vez que la función externa es invocada. Además, cada función
creada forma una clausura; es el resultado de evaluar un ámbito conteniendo en
una o más variables dependientes de otro ámbito externo, incluyendo constantes,
variables locales y argumentos de la función externa llamante.

42
Prototípico

 Prototipos, JavaScript usa prototipos en vez de clases para el uso de

herencia
 Funciones como constructores de objetos, las funciones también se
comportan como constructores.

2.8.4 Cascading Style Sheets (CSS)

Las hojas de estilo en cascada hacen referencia a un lenguaje de hojas de estilos

usado para describir la presentación semántica (el aspecto y formato) de un
documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo
a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser
aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL .

Ventajas

Algunas ventajas de utilizar CSS son:

 Control centralizado de la presentación de un sitio web completo con lo que

se agiliza de forma considerable la actualización del mismo.
 Separación del contenido de la presentación, lo que facilita al creador,
diseñador, usuario o dispositivo electrónico que muestre la página, la
modificación de la visualización del documento sin alterar el contenido del
mismo, sólo modificando algunos parámetros del CSS.
 Optimización del ancho de banda de la conexión, pues pueden definirse los
mismos estilos para muchos elementos con un sólo selector; o porque un
mismo archivo CSS puede servir para una multitud de documentos.
 Mejora en la accesibilidad del documento, pues con el uso del CSS se
evitan antiguas prácticas necesarias para el control del diseño (como las
tablas), y que iban en perjuicio de ciertos usos de los documentos, por parte
de navegadores orientados a personas con algunas limitaciones
sensoriales.

43
2.8.5 Motor de Base de Datos MYSQL

Es un sistema de gestión de bases de datos relacional, fue creada por la empresa

sueca MySQL AB, la cual tiene el copyright del código fuente del servidor SQL, así
como también de la marca.

MySQL es un software de código abierto, licenciado bajo la GPL de la GNU,

aunque MySQL AB distribuye una versión comercial, en lo único que se diferencia
de la versión libre, es en el soporte técnico que se ofrece, y la posibilidad de
integrar este gestor en un software propietario, ya que de otra manera, se
vulneraría la licencia GPL.

El lenguaje de programación que utiliza MySQL es Structured Query Language

(SQL) que fue desarrollado por IBM en 1981 y desde entonces es utilizado de
forma generalizada en las bases de datos relacionales

Características

Entre las características disponibles en las últimas versiones se puede destacar:

 El principal objetivo de MySQL es velocidad y robustez.

 Soporta gran cantidad de tipos de datos para las columnas.
 Gran portabilidad entre sistemas, puede trabajar en distintas plataformas y
sistemas operativos.
 Cada base de datos cuenta con 3 archivos: Uno de estructura, uno de datos
y uno de índice y soporta hasta 32 índices por tabla.
 Aprovecha la potencia de sistemas multiproceso, gracias a su
implementación multihilo.
 Flexible sistema de contraseñas (passwords) y gestión de usuarios, con un
muy buen nivel de seguridad en los datos.
 El servidor soporta mensajes de error en distintas lenguas

44
 CAPÍTULO III

ELABORACIÓN DEL PROTOTIPO

 3 CAPITULO III

ELABORACIÓN DEL PROTOTIPO

Entre las características más sobresalientes sobre la motivación de contar con un

periódico en un medio como lo es internet, podemos mencionar las siguientes
como:

 El espacio no tiene límites para la publicación de la información, se puede

colocar la cantidad de texto que uno desee.
 Se cuenta con una mayor posibilidad para que el lector interactúe y
participe con su opinión en el medio.
 La información se puede acompañar con recursos multimediales, ayudando
al lector a comprender mejor la información que se desea mostrar con
imágenes, fotografías, sonidos, videos, animaciones.
 La información se enriquece gracias a la posibilidad de crear vínculos con
otros sitios web relacionados con el mismo tema.
 Su cobertura es a nivel mundial ya que puede llegar a todas partes en
cuestión de segundos.
 Se puede tener acceso a notas y ediciones anteriores del sitio de forma
rápida.
 Internet es un medio de marketing mundial, por lo que puede generar
ingresos por visitas y publicidad realizadas en el sitio.

3.1 PLANIFICACIÓN

El alcance de los requerimientos nos colabora a poder identificar la arquitectura y

contenido de un sitio web que pueda ser lo más genérico para un PD. Para esta
tarea se procede a visitar distintos portales de noticias en distintos ámbitos como:
sociales, farándula, ciencia y tecnología, entre otros.

45
Un a vez revisada esta información se tomo en cuenta los siguientes requisitos en
la elaboración del nuevo CMS:

a. Estructuración de la Portada8.
b. Características con las que contará el sitio.
c. Disposición estructural de sus bloques de contenido.

a) Estructuración de la Portada

Siendo la portada web la puerta de ingreso de los visitantes, que brinda

información del sitio, es que se realiza la revisión de distintos portales de
periódicos Tabla 3.1, para el diseño de la arquitectura del Front End del CMS y
determinar la disposición estructural de la página.

A continuación se detalla las características identificadas en base a la revisión

realizada en los Portales web:

Características
1. Banner
2. Cabeza
3. Rotante de noticias
4. Contenido (lado derecho y noticias)
5. Pie

Tabla 3.1: Características estructurales de Portales de Periódicos visitados

8
La Portada también se conoce como Pagina de Inicio o homepage. Se trata de lo primero que ven los usuarios al navegar
el mismo, mostrando toda la información del sitio.
46
Figura 3.1: Estructura de diferentes Portales de Periódicos en la Web

47
Se puede observar que los sitios visitados no son iguales en su estructura, debido
a que algunas cuentan con características que otros no las poseen, como los
puntos 1 y 3 que no se presentan en otros sitios.

Para la estructura general del nuevo sitio se tomo en cuenta todos los puntos
como se muestra en la Figura 3.2, por lo que el usuario podrá elegir la estructura
de la Portada del sitio web.

Figura 3.2: Estructura de la Portada del nuevo CMS

b) Características con las que cuentan los sitios

Las características que presentan los distintos sitios (Figura 3.3, 3.4, 3.5, 3.6, 3.7)
es tan variado, por las diferencias que existe entre ellos. Por lo que se han
identificado las características más generales presentes en los sitios visitados, los
mismos se detallan a continuación:

Características
1. Logo 7. Ediciones Anteriores
2. Fecha 8. Notas especiales en el lado
3. Menú superior derecho.
4. Menú secundario superior 9. Publicidad (Google, propia)
5. Enlaces a redes sociales 10. Mensajes de twitter
6. Buscador 11. Mensajes de facebook
12. Video especial

Tabla 3.2: Características presentes para en nuevo CMS

48
Figura 3.3: Plantilla de WordPress “The New York Theme” [WordPress]

Figura 3.4: Portal del Periódico “Mundiario” [Mundiario]

49
 Figura 3.5: Sitio web del Periódico “Jornada” [Jornada]

Figura 3.6: Sitio web del Periódico Digital “El Diario” [El Diario]
50
 Figura 3.7: Plantilla de WordPress “Tribune” [WordPress]
Sector derecho: Visitando distintos sitios (Figura 3.5, 3.6, 3.7, 3.8, 3.9) se ha
podido observar que en el lado derecho es donde se colocan una serie de
secciones “especiales” que pueden ser videos, widget de Facebook, widget de
Twitter, publicidad de Google, publicidad propia, notas, imágenes con enlaces a
otras paginas, y otros. Por lo cual nuestro sitio contara con las siguientes
características, como se observa en la Figura 3.10, tomando el lado derecho para
nuestros módulos especiales.

51
 BANNER
BANNER

1
2
19 de septiembre de 2014 7
Ediciones anteriores

5
Facebook | twitter
INICIO 3 SOCIEDAD ECONOMÍA CULTURA CIENCIA ARTE

Quienes Somos | Contáctenos

4 buscar 6
DESTACADOS >>> Trabajo multidimensional sobre cambio climático recibe el aporte de expertos ….

9
PUBLICIDAD

12

MÁS NOTICIAS 8
Elecciones
presindenciales 2014
Sector Notas Las olas de calos estan
intensas...
Los rios mas caudalosos
del mundo

TWITTER 10

FACEBOOK 11
..

© Periódico Digital XX
Nº de Depósito Legal2222333-1.
Av. Los Alamos 1239, esq. Calle Roma, Ed. Reyes Teléfonos: 2222582 - 2222864 · Fax 2222235

Figura 3.8: Arquitectura Front End del CMS

c) Disposición estructural de los bloques de contenido

Sector notas: Con respecto al contenido presentado esto sin duda es lo mas
variable porque puede tener contenido de carácter social, científico, escolar,
investigación entre otros, por lo cual el contenido debe ser dinámico y
administrable.

Se ha identificado lo más sobresaliente de la estructura del contenido presentado

en los distintos esquemas:

 Esquemas de notas: El esquema de notas que se observa, los cuales se

tomaran en cuenta para el nuevo CMS son los que se muestra a
continuación:

52
 1. Nota
Sin foto: solo titulo y resumen.

2. Nota
Foto-titulo-resumen: la foto va delante del
título y resumen

3. Nota
Foto pequeña: la foto va al lado izquierdo
del resumen, foto pequeña

4. Nota
Titulo-foto-resumen: la foto va entre el
titulo y resumen

5. Nota
Titulo-resumen-foto: la foto va después
del título y resumen

Tabla 3.3: Esquema de notas

 Esquema de bloques: El esquema de bloques que se pudo observar y se
tomara en cuenta para el nuevo CMS es el que se muestra a continuación:

53
 Bloque de una columna
diseño vertical de Titular

Bloque de dos
columnas diseño
horizontal de Titular

Bloque de tres
columnas Titular

Tabla 3.4: Esquema de bloques

Después de haber realizado una especificación de los requisitos definiremos las
funcionalidades del nuevo CMS.

 Administración de usuarios, asignación de roles y secciones.

 Administración de secciones, tipos, áreas y temas
 Administración y publicación de contenidos, delimitado de acuerdo al nivel
de usuario para la creación, edición y publicación de contenidos.
 Diseño y publicación de plantillas de noticias.
54
  Organización de contenido por secciones en el Back End y áreas en el
Front End
 Ordenación de notas mediante numeración.
 Diseño de la Portada mediante esquemas de notas predefinidos.
 Diseñador de plantillas basado en el retículas, con un entorno grafico drag
and drop para el manejo y administración de bloques de contenido.
 Previsualización de contenidos antes de la publicación.

3.2 ANÁLISIS Y DISEÑO

3.2.1 Obtención de requerimientos

El desarrollo del sistema contará con la presencia de tres directos involucrados

que serán relacionados con el sistema como se observa en la figura 3.13.

Administrador/Editor
Nuevo Sistema Gestor de
Contenidos Visitantes

Súper
Administrador

Figura 3.9: Involucrados en el nuevo CMS

A continuación realizaremos una descripción de cada uno de ellos ya que cada
usuario tiene acceso a determinadas secciones del CMS:

Súper Administrador: Usuario con facultad completa para la administración del

CMS, gozando de acceso libre a todas las secciones del mismo.

Administrador: Es el usuario encargado de publicar, organizar, crear, editar y

borrar contenidos y diseño de plantillas.

55
Editor: Será el encargado de crear, editar y borrar contenidos solo de las
secciones que tiene a cargo.

Visitante: Son los usuarios que visitarán las diferentes secciones de el sitio, los
cuales solo tendrán acceso a la información sin poder realizar cambios en la
información.

Identificación de roles y tareas

En esta etapa realizaremos un análisis del sistema identificando los principales

roles que cumplirán cada usuario participante del sistema.

TAREA ROL
Super Acceso total a todo el Sistema Gestor de Contenidos
Administrador Administración de usuarios
Delimitación de zonas de actualización de contenidos mediante la
asignación de roles a a los usuarios
Administración de bloques de contenido de noticias
Administrador Administración de secciones, tipos, áreas y temas
Administración y publicación de contenidos
Diseño y publicación de plantillas de noticias
Diseño y publicación de especiales (lado derecho)
Organización de contenido por tipo, tema, área
Organización de contenido mediante orden numérico
Previsualización de portada mediante pruebas de contenido
Editor Administración y publicación de contenidos solo de las secciones que
tiene a cargo
Usuario Acceso total al Front-end
Tabla 3.5: Roles y tareas de los usuarios

3.2.1.1 Diagrama de casos de uso

En base al análisis realizado descrito anteriormente se tiene el diagrama casos de

uso que permiten comprender la interacción de los usuarios con el CMS.
56
Figura 3.10: Diagrama de Casos de Uso del sistema

57
3.2.1.2 Especificación de escenarios
Los escenarios son descripciones narrativas de como la aplicación será utilizada.
En esta etapa se especifica las tareas realizadas por los usuarios de acuerdo a los
casos de uso. Se mostraran solamente algunos de los escenarios más
importantes:

Escenario: C1 Administración de usuarios y Usuario: Administrador

asignación de roles
Objetivo: El objetivo realizar la administración de usuarios, delimitando las
zonas de creación, edición y publicación de contenidos,
mediante la asignación de secciones a editores.
Acciones:  El usuario ingresa a la aplicación
 Introduce usuario y contraseña
 Ingresa a la opción de [nuevo usuario] para la creación de
un usuario
 Ingresa al formulario y debe llenar los datos como
nombre, email, tipo cuenta, clave, después presiona la
opción de [guardar]
 Se va a la opción [secciones] para habilitar las distintas
secciones que estarán a su cargo del nuevo usuario.
 Habilita el estado de activo para el nuevo usuario.
Tabla 3.6: Administración de usuarios y asignación de roles

Escenario: C2 Administración de secciones Usuario: Editor

Objetivo: Crear secciones para agrupar en un solo lugar notas que hagan
referencia a una temática, esto para tener una mejor
organización de la información.
Acciones:  El usuario ingresa a la aplicación
 Introduce usuario y contraseña
 Ingresa a la opción de [componentes de notas] en la
pestaña [secciones]
58
  Escoge la opción [nueva sección] para crear una nueva
sección donde se acumularan las notas referentes a esa
sección
 Ingresa el nombre de la sección a crear y presiona la
opción de [guardar]
Tabla 3.7: Administración de secciones

Escenario: C3 Administración y publicación de Usuario: Editor

contenido
Objetivo: Realizar la administración de noticias, publicación y
despublicacion de las mismas.
Acciones:  El usuario ingresa a la aplicación
 Introduce usuario y contraseña
 Ingresa a la sección donde introducirá la nota (Escenario
C2)
 Elige la opción [nueva noticia] para crear la nueva noticia
 Ingresa al formulario y llena los campos que contendrá la
nueva noticia
 Presiona la opción [guardar] para que la nueva nota sea
creada
 Para darle un esquema a la nota, escoge el tipo de
esquema de como se visualizara la noticia creada.
 Escoge la opción de [acción] y de la lista escoge la opción
[publicar] para tener la nota lista para publicación
Tabla 3.8: Administración y publicación de contenido

Escenario: C4 Diseño de plantillas bloque de Usuario: Editor

noticias
Objetivo: Tiene como objetivo armar el diseño de portadas del sector de
noticias antes de realizar la publicación
Acciones:  El usuario ingresa a la aplicación
 Introduce usuario y contraseña
59
  Ingresa a la opción [diseño de plantillas] para crear
mediante los esquemas predefinidos el diseño de las
notas
 De los contendores de bloques que contienen los
esquemas de notas, escoger los bloques a ser utilizados
para la plantilla a crear y elegir la opción [guardar]
 Si se desea se podrá guardar solo el diseño en un
acumulado de diseños
 Para previsualizar el diseño de la plantilla se escoge la
opción [vista previa]
Tabla 3.9: Diseño de plantillas bloque de noticias

Escenario: C5 Organización y publicación de Usuario: Editor

portada
Objetivo: Tiene como objetivo organizar las notas para realizar la
publicación de los contenidos
Acciones:  El usuario ingresa a la aplicación
 Introduce usuario y contraseña
 Ingresa a la opción de [portada] donde se muestran todas
las notas que ya están marcadas como publicadas
 En el campo orden se puede ingresar un numero para
darle el orden en el que aparecerán en portada
 Una vez realizada la organización para publicar se
escoge la opción [publicar]
Tabla 3.10: Organización y publicación de portada

3.2.2 Diseño Conceptual

En esta fase se diseñara y detallara un esquema conceptual mediante un

diagrama estático, el cual representa el dominio de la aplicación web, identificando
las entidades, atributos y relaciones como se muestra en la figura 3.11.

60
 usuario
plantilla
-cod_usuario : int
-nombre : string -cod_plantilla : int
-Fin1 -Fin2 -nombre : string
-cta : short
-psw : string -fecha : Date
-tipo : char -hora
1..* 1..*
-correo : string
-publicado : char
1..1 -Fin13
1..* -Fin14
1 -Fin3
* -Fin4 retícula
-cod_reticula : int
sección -cod_plantilla : int
-cod_seccion : int -columna : int
-nombre : string -fila : int
-ublicado : char -tipo : string
-orden : int -columnas : int

1..* -Fin5 1..*

1..1 -Fin15
-Fin16
1..1 -Fin6
modulo
nota -cod_mod : int
-cod_noticia : int -tipo : string
-cod_sección : int -imagen : string
-imagen : string -archivo : string
tipo -orden : int área -columnas : int
-Fin7 -Fin8 -Fin9 -Fin10
-cod_tema : int -cod_area : int
-cod_tipo : int
-cod_area : int -nombre : string
-nombre : string
1..1 1..* -encabezado : string -publicado : char
-titulo : string 1..1 1..*
-cuerpo : string
-resumen : string
-fecha : Date
-publicado : char
-tipo : string
-tipo_usuario : string
-cod_palntilla : int
-datos : string

1..1 -Fin11
1..* -Fin12

tema
-cod_tema : Integer
-nombre : String

Figura 3.11: Diagrama del modelo conceptual

3.2.3 Diseño Navegacional

El diseño navegacional nos permite organizar el espacio de navegación de la

aplicación, facilitando el recorrido en un orden particular sobre los mismos. En esta
sección se muestra la navegación de una forma general tanto del Front End como
del Back End.
61
  Diseño navegacional para el Front End

menús contenido buscador áreas varios

especiales

Figura 3.12: Diseño navegacional para el Front End

 Diseño navegacional para el Back-end

login

GESTIÓN DEL SITIO GESTIÓN DE PORTADA GESTIÓN DE MENUS COMPONENTES DE NOTAS ESPECIALES

CONFIGURACIÓN GLOBAL DEL SITIO NOTAS DE PORTADA MENÚ PRINCIPAL SECCIONES MULTIMEDIA

TIPOS
USUARIOS DISEÑO DE ESTRUCTURA MENU SECUNDARIO
PUBLICIDAD

TEMAS
ADMINISTRAR BLOQUES DISEÑO DE PLANTILLAS CONTACTOS

ADMINISTRAR WIDGET
DISEÑO DE PLANTILLAS

BANNERS

BUSCAR NOTAS

Figura 3.13: Diseño navegacional para el Back End final

62
3.2.4 Diseño de la Interfaz

Una vez especificada la estructura de navegación, se realizara el diseño de la

interfaz, lo que significa realizar la interpretación de los objetos navegacionales
que se van a visualizar y su funcionalidad. Las opciones de menú esta dado según
el tipo de cuenta que tenga el usuario.

En la Figura 3.14 se muestra la interfaz de ingreso al CMS en el cual se realiza el

ingreso mediante una contraseña y usuario.

Figura 3.14: Diseño de la interfaz inicio de sesión

Figura 3.15: Diseño de la interfaz de gestión de portada

63
Figura 3.16: Diseño de la interfaz de configuración de estructura del sitio

Figura 3.17: Diseño de la interfaz del diseño de plantillas

64
Figura 3.18: Diseño de la interfaz configuración de secciones especiales

Figura 3.19: Diseño de la interfaz de Secciones

65
 Figura 3.20: Diseño dela interfaz de gestión de usuarios
3.3 IMPLEMENTACIÓN

3.3.1 Reutilización de código

La reutilización de códigos ya existentes y probados por otras comunidades para

diferentes tareas del sistema como JQuery, colaboran para el desarrollo, utilizando
funciones que sirven para controlar los atributos de CSS de los elementos de la
página, como los métodos outerWidth() e outerHeight() que reciben un objeto y
devuelven las dimensiones externas del elemento (la anchura y altura) y los
métodos offset() y position() que devuelven la posición de un elemento en la
página.

66
 Figura 3.21: Utilizando JQuery para la ubicación de bloques
Esto utilizado para calcular las dimensiones máximas y mínimas las cuales
pueden tomar los bloques de contenido, en la interfaz de la página.

Figura 3.22: Interfaz de la opción Diseño de plantillas

La utilizando CSS a permitido crear capas para ordenar los bloques por columnas
y filas (de modo reticular), para facilitar la dinamicidad de los contenidos. También
se realizo la utilización de jQuery UI para efectos visuales en la aplicaciones web
utilizando las funciones Draggable (hace al elemento arrastrable) y Droppable (que
permite que el elemento responda a elementos arrastrables) además de otros
67
funciones y efectos. También se utilizo FCKEditor para la edición de textos en los
distintos formularios.

3.3.2 Ventanas del sistema

Esta fase tiene el objetivo principal de realizar la implementación de las diferentes

interfaces, expuestas en al sección anterior. Debido a la gran cantidad de
ventanas con las que cuenta la plataforma es que solo se mostraran aquellas que
se consideran las mas importantes en mostrar.

La pantalla de ingreso esta validad de acuerdo ala tipo de cuenta con la que
cuenta el usuario

Figura 3.23: Ventana de Ingreso

En la ventana “Notas de Portada” se encuentran las notas a ser publicadas en el
Portal

68
 Figura 3.24: Ventana Notas de Portada
En la ventana “Diseño lado derecho” se puede publicar y despublicar los bloques
que se mostraran en Portada

Figura 3.25: Ventana Diseño Lado Derecho “Especiales”

69
En la ventana “Diseño de plantillas” se muestran los módulos predefinidos que
pueden ser incorporados en el Portal

Figura 3.26: Ventana Diseño de Plantillas

En la ventana “Administracion de Usuarios” se podra administrar y asignar
secciones a editores.

Figura 3.27: Ventana de Administración de Usuario

En el menú secciones se muestra todas las secciones que fueron creadas, para la
organización de notas.
70
 Figura 3.28: Ventana de la Sección “Apertura”
Ventana mostrando el ingreso de datos en el formulario.

Figura 3.29: Formulario para la creación de notas

71
 Figura 3.30: Pantalla del Front End
Requerimientos del sistema

El CMS necesita de los siguientes requerimientos básicos para su funcionamiento.

A nivel del servidor:

1. Servidor Web Apache 2.+

2. Php 4.+ ó 5.+
3. Servidor de base de datos MySql 4.+ ó 5.+
4. phpMyAdmin Database Manager Version 2.10.3+
5. Tener conexión a internet

A nivel del cliente:

1. Tener conexión a internet.

2. Cualquier Navegador web (Firefox 10+, Chrome, Internet Explore).
72
 CAPÍTULO IV

EVALUACIÓN DE CALIDAD
 4 CAPITULO IV

EVALUACIÓN DE CALIDAD

Hoy en día las aplicaciones y sitios web son cada vez mas complejos y no solo es
importante obtener un producto correcto sino, usable.

Debido a lo expuesto en la Sección 2.1.1, los CMS cuentan con una estructura de
dos partes: la primera el Front End que es evaluada con la metodología de Web
Site QEM, y la segunda el Back End, cuyas características de funcionalidad y
mantenibilidad serán evaluadas basándonos en el estándar ISO 9126.

4.1 CALIDAD DEL SITIO WEB

4.1.1 Planificación y programación de la evaluación de calidad

El objetivo del caso de estudio para la evaluación de calidad del producto es

conocer la percepción de calidad que tiene el sitio generado por el Gestor de
Contenidos GECORE en el dominio de sitios Periodísticos.

4.1.2 Definir y Especificar los Requerimientos de Calidad

En esta fase, se ha tomado el árbol de requerimientos mostrado en la Figura 2.12,

el cual se establece las características, subcaracteristicas y atributos con sus
respectivos pesos de agregación en cada punto para el dominio de la aplicación
web. Los criterios usados son los siguientes:

CVN: Criterio de variable normalizada

CVN: IE=(X/Y)*100%
Donde: X=∑ Puntaje obtenido, Y=∑ Puntaje máximo

CN: Criterio normalizado

CN: IE=(X/Y)*100%
Donde: X=Cantidad total de datos para la variable, Y=Cantidad total de datos

73
CB: Criterio binario
IE= 0=0% Si existe, IE=100% No existe

CMN: Criterio multinivel

IE= 0≈0% ausente, IE=1 ≈50% presencia parcial, IE= 2≈100% presente

CPD: Sujeto a la objetividad del observador

A continuación mostramos los resultados de la evaluación elemental de las

siguientes características:

USABILIDAD
Nodo Nombre Peso Criterio IEi(%)
1.1 Comprensibilidad del sitio 0.4 CVN 78
1.1.1 Esquema de Organización Global 0.8 CVN 60
1.1.1.1 Mapa del sitio 0.2 CB 1=100
1.1.1.2 Tabla de Contenidos 0.4 CB 1=100
1.1.1.3 Índice alfabético 0.4 CB 0=0
1.1.2 Mapa de imagen 0.3 CB 1=100
1.2 Mecanismo de ayuda y retroalimen. en línea 0.3 CVN 75
1.2.1 Calidad de la Ayuda 0.25 CVN 50
1.2.1.1 Ayuda Explicatoria Orientada al usuario 0.4 CB 0=0
1.2.1.2 Ayuda de la Búsqueda 0.6 CB 1=100
1.2.2 Indicador de Última Actualización 0.25 CVN 50
1.2.2.1 Hora de publicación de la Noticia 0.5 CB 0=0
1.2.2.2 Fecha de edición de la Noticia 0.5 CB 1=100
1.2.3 Directorio de Direcciones 0.25 CVN 100
1.2.3.1 Directorio E-mail 0.5 CB 1=100
1.2.3.2 Directorio TE-Fax 0.5 CB 1=100
1.2.4 Retroalimentación 0.25 CVN 100
1.2.4.1 Comentario sugerencia 0.5 CB 1=100
1.2.4.2 Contactos 0.5 CB 1=100
1.3 Aspectos de interfaces y estética 0.3 CVN 79
1.3.1 Cohesividad al Agrupar los Objetos de control 0.3 CPD 80
1.3.2 Permanencia y estabilidad en la presentación 0.3 CVN 90
de los controles principales
1.3.2.1 Permanencia de Controles Directos 0.5 CMN 2≈100
1.3.2.2 Permanencia de Controles Indirectos 0.2 CMN 1≈50
1.3.2.3 Estabilidad 0.3 CMN 2≈100
1.3.3 Aspectos de estilo 0.4 CVN 70
1.3.3.1 Uniformidad en el Color de Enlaces 0.4 CMN 2≈100
1.3.3.2 Uniformidad del estilo global 0.6 CMN 1≈50

Tabla 4.1: Resultados de la evaluación elemental de la característica Usabilidad

74
 FUNCIONALIDAD
Nodo Nombre Peso Criterio IEi(%)
2.1 Aspectos de Búsqueda y Recuperación 0.3 CVN 79.6
2.1.1 Mecanismo de Búsqueda en el Sitio Web 0.7 CVN 88
2.1.1.1 Búsqueda Restringida 0.6 CVN 80
2.1.1.1.1 por orden 0.4 CB 100
2.1.1.1.2 por fecha 0.4 CB 100
2.1.1.1.3 por área 0.2 CB 0
2.1.1.2 Búsqueda Global 0.4 CB 100
2.1.2 Mecanismos de Recuperación 0.3 CVN 60
2.1.2.1 Nivel de Personalización 0.5 CMN 60
2.1.2.2 Nivel de Retroalimentación en la 0.5 CMN 60
Recuperación
2.2 Aspectos de Navegación y Exploración 0.3 CVN 81.33
2.2.1 Navegabilidad 0.35 CVN 69.8
2.2.1.1 Orientación 0.7 CVN 74
2.2.1.1.1 Indicador del Camino 0.6 CPD 70
2.2.1.1.2 Etiqueta de la Posición Actual 0.4 CPD 80
2.2.1.2 Promedio de Enlaces por Página 0.3 CVN 60
2.2.2 Objetos de Control Navegacional 0.35 CVN 100
2.2.2.1 Permanencia y Estabilidad en la 0.7 CVN 100
Presentación de los Controles Contextuales
2.2.2.1.1 Permanencia de los Controles Contextuales 0.6 CB 100
2.2.2.1.2 Estabilidad 0.4 CB 100
2.2.2.2 Nivel de Desplazamiento 0.3 CVN 100
2.2.2.2.1 Desplazamiento Vertical 0.5 CB 100
2.2.2.2.2 Desplazamiento Horizontal 0.5 CB 100
2.2.3 Predicción Navegacional 0.3 CVN 73
2.2.3.1 Enlace con Título 0.3 CPD 80
2.2.3.2 Calidad de la Frase del Enlace 0.7 CPD 70
2.3 Aspectos del Dominio orientados al Lector 0.4 CMN 68
2.3.1. Sectores 0.6 CMN 80
2.3.1.1 Multimedia 0.3 CB 100
2.3.1.2 Publicidad 0.3 CB 100
2.3.1.3 Notas Especiales 0.2 CB 100
2.3.1.4 Suplementos 0.2 CB 0
2.3.2 Ítems Imprescindibles 0.4 CMN 50
2.3.2.1 Ranking de Noticias 0.2 CB 100
2.3.2.2 Información del Clima 0.2 CB 0
2.3.2.3 Ediciones Anteriores Online 0.2 CB 100
2.3.2.4 Encuestas 0.2 CB 0

Tabla 4.2: Resultados de la evaluación elemental de la característica

Funcionalidad
75
 CONFIABILIDAD
Nodo Nombre Peso Criterio IEi(%)
3.1.1 Errores de Enlaces 0.7 CVN 90
3.1.1.1 Enlaces Rotos 0.5 CVN 80
3.1.1.2 Enlaces Inválidos 0.3 CMN 100
3.1.1.3 Enlaces no Implementados 0.2 CMN 100
3.1.2 Errores o Deficiencias Varias 0.3 CVN 80
3.1.2.1 Deficiencias o cualidades ausentes debido a 0.4 CMN 60
diferentes navegadores (browsers)
3.1.2.2 Deficiencias o resultados inesperados 0.35 CMN 60
independientes de browsers (p.ej. errores de
búsqueda imprevistos, deficiencias con
marcos)
3.1.2.3 Nodos Destinos (inesperadamente) en 0.35 CB 100
Construcción

Tabla 4.3: Resultados de la evaluación elemental de la característica Confiabilidad

EFICIENCIA
Nodo Nombre Peso Criterio IEi(%)
4.1 Performancia 0.7 CVN 100
4.1.1 Páginas de Acceso Rápido 0.7 CVN 100
4.2 Accesibilidad 0.3 CVN 62
4.2.1 Accesibilidad de Información 0.6 CMN 50
4.2.1.1 Soporte a Versión sólo Texto 0.3 CB 0
4.2.1.2 Legibilidad al desactivar la Propiedad Imagen 0.7 CMN 100
del Browser
4.2.1.2.1 Imagen con Título 0.5 CB 100
4.2.1.2.2 Legibilidad Global 0.5 CB 100
4.2.2 Accesibilidad de Ventanas 0.4 CMN 80

Tabla 4.4: Resultados de la evaluación elemental de la característica Eficiencia

4.1.3 Definición e Implementación de la Evaluación Global

Una vez obtenidos los resultados de la evaluación elemental, pasamos a realizar

la implementación de la evaluación global. Esta se la efectuar con la finalidad de
obtener un indicador de calidad numérico y general por medio de un proceso de
agregación.

76
En la Figura 4.1, se muestra los valores ponderados de los pesos de las
características de más alto nivel que son utilizados para calcular el indicador de
calidad global.

Recordando la ecuación de la media potencia a utilizar:

IG/P = (P1 IE1 + ... + Pn IEn);

Donde: IEi: son los indicadores elementales del árbol de requerimientos y Pi son
los pesos.

 Tomando (1.1), (1.2) y (1.3) para la característica Usabilidad

IG(1)= (0.4*78)+(0.3*75)+(0.3*79)=77.4%

 Tomando (2.1), (2.2) y (2.3) para la característica Funcionalidad

IG(2)= (03*79.6)+(0.3*81.33)+(0.4*68)=75.5%

 Tomando (3.1.1) y (3.1.2) para la característica Confiabilidad

IG(3)= (0.7*90)+(0.3*80)=87%

 Tomando (4.1) y (4.2) para la característica Eficiencia

IG(4)= (0.7*100)+(0.3*62)=88.6%

Peso 0.3 0.3 0.2 0.2

Característica Usabilidad Confiabilidad Confiabilidad Eficiencia

Tabla 4.5: Pesos de las características

Valor numérico de calidad global obtenido.

IG(X)= (77*0.3) + (75.5*0.3) + (87*0.2) + (78.5*0.2)=78.5%

77
 Característica G(X)
Usabilidad 77.4%
Funcionalidad 75.5%
Confiabilidad 87%
Eficiencia 86.6%
Calidad Global 78.5%

Tabla 4.6: Resultados de la evaluación global

El resultado de la evaluación global es de 78.5%.

4.1.4 Análisis de Resultados y Conclusión

De acuerdo a la evaluación global del sitio web, aplicando la metodología se ha

obtenido la calidad global de 78.5%, la cual esta definida dentro de los márgenes
de satisfacción (60% al 100%) según la metodología.

4.2 CALIDAD DE LA APLICACIÓN WEB

 FUNCIONALIDAD

La funcionalidad no se mide directamente por lo cual es necesario evaluar un

conjunto de características y capacidades del sistema, el cual cumpla necesidades
implícitas y explicitas del usuario. Para el cálculo de la funcionalidad utilizaremos
la métrica de punto función, para la cual determinaremos cinco características:

Entradas de usuario 12
Salidas de usuario 10
Consultas de usuario 5
Numero de archivos 240
Interfaces externas 0

Tabla 4.7: Tabla de resultados

Para calcular puntos función (PF), se utiliza la siguiente relación:

78
 PF=cuenta_total*(grado_de_confiabilidad+tasa_de_error*ΣFi) (1)

Donde:
PF=Medida de funcionalidad
Cuenta total=Es la suma de todas las entradas obtenidas en: N° de entradas, N°
de salidas, N° de peticiones, N° de peticiones, N° de archivos y N° de interfaces
externas.
∑Fi=Son los valores de ajuste de complejidad según las respuestas a preguntas
destacadas en la siguiente tabla.
N° de entradas de usuarios: Es la información que llega desde el exterior al
interior. Se observa en la tabla las entradas de usuario que tiene el sistema.
1 Pantalla de ingreso al sistema
2 Registro de la configuración global
3 Registro de widget
4 Registro de usuarios
5 Registro de menús
6 Registro de áreas
7 Registro de temas
8 Registro de secciones
9 Registro de notas
10 Registro de videos
11 Registro de banner
12 Registro de contactos

Tabla 4.8: Entradas del usuario

Número de salidas del usuario: Es la información elaborada por el sistema

transmitida al usuario, también la actualización de archivos, tiene una sola
dirección del interior al exterior. Puede observar en la siguiente tabla:

1 Detalle de notas
2 Búsqueda de notas
3 Previsualizacion de plantillas

Tabla 4.9: Salidas del usuario

79
Número de peticiones de usuario: Es una entrada interactiva que produce la
generación de alguna respuesta del software inmediata de forma de salida
interactiva. Se puede observar las peticiones de usuario en la siguiente Tabla

1 Lista de usuarios
2 Lista de menús
3 Lista de áreas
4 Lista de temas
5 Lista de secciones
6 Lista de notas
7 Listas de videos
8 Lista de contactos
9 Lista de bloques de contenido
10 Lista de banners

Tabla 4.10: peticiones del usuario

Número de archivos: Es cada archivo de un grupo lógico de datos que puede ser
una parte de una base de datos o archivo independiente. El total de archivos es:
197.

Número de interfaces externas: Son todas la interfaces legibles por la máquina

que se utilizan para transmitir la información. En nuestro caso es internet.

Ponderación: Ahora es necesario elegir un criterio de ponderación. En este caso

utilizaremos el factor medio.

Los puntos función se calculan rellenando la tabla siguiente con datos extraídos
del sistema desarrollado:

80
 Parámetros de Cuenta Factores de Ponderación
medición Simple Medio Complejo Valor
Obtenido
N° de entradas de 12 3 *4 6 48
usuario
N° salidas de usuario 3 4 *5 7 15
N° de peticiones al 10 3 *4 6 40
usuario
N° de archivos 197 7 *10 15 1970
N° de interfaces 1 5 *7 10 7
externas
Cuenta total 2080

Tabla 4.11: Factor de ponderación medio.

La cuenta total de los puntos de función se debe ajustar en función a las

características ambientales de la aplicación web, en la Tabla 4.10 se obtienen los
valores de ajustes de la complejidad, según las respuestas a las siguientes
preguntas, evaluadas entre 0 y 5.

Datos de Ajuste Valor

Sin importancia 0
Incidental 1
Moderado 2
Medio 3
Significativo 4
Esencial 5

Tabla 4.12: Datos de ajuste

Factor Escala Valor

1 Requiere el sistema copias de seguridad y de recuperación fiables 1
2 Se requiere comunicación de datos 3
3 Existen funciones de procesos distribuidos 5
4 Es crítico el rendimiento 4
5 Sera ejecutado en el SO existente 5
6 Requiere el sistema de entrada interactiva 4
81
7 Requiere el sistema entrada de datos interactiva sobre múltiples 3
ventanas
8 Se actualizan los archivos maestros de manera interactiva 4
9 Son complejas las entradas, salidas, los archivos y las peticiones 4
10 Es complejo el procesamiento interno 3
11 Se ha diseñado el código para ser reutilizable? 3
12 Están incluidas en el diseño la conversión y la instalación? 2
13 Se ha diseñado el sistema para soportar múltiples instalaciones en 4
diferentes sitios
14 Se ha diseñado la aplicación para facilitar los cambios y para ser 4
fácilmente utilizada por el usuario
Total ∑Fi 50
Tabla 4.13: Factores y Valores

Con la obtención de los anteriores datos y considerando un grado de confiabilidad

mínimo del 65%, a continuación calculamos el valor del punto función PF, que
remplazamos en (1):
PF=2080*(0.65+0.01*50)
PF=2392
Si consideramos que el máximo valor de ajuste de complejidad a ΣFi = 70.
PFideal=2080*(0.65+0.01*70)
PFideal=2808
Entonces si ΣFi es considerada como el 100%, la relación obtenida entre los
puntos será:
X= (100%)* PF / PFideal = (100%)*2392/ 2808
X = 85.1%
El sistema es funcional en un 85,1%

82
  MANTENIBILIDAD

Para calcular la mantenibilidad del sistema utilizaremos las medidas directas

proporcionadas por la IEEE 982.1, que consiste en los cambios que producen en
cada versión del producto, para lo cual se tiene la siguiente relación:

IMS= [MT-(Fa+Fb)/MT] (2)

Donde:

MT=N° de módulos en la versión actual.

Fa=N° de módulos en la versión actual que se ha cambiado
Fb=N° de módulos en la versión actual que se ha añadido
Fc=N° de módulos en la versión anterior que se han borrado en la versión actual
Si el valor se aproxima a 1 el sistema empieza a estabilizarse.
Entonces los valores encontrados son:
MT=7; Fa=0; Fb=0; Fb=2; Fc=0
Reemplazando los valores en (2):
IMS=[7-(0+2+0)]/7
IMS=0.71*100=71%
Podemos decir que el sistema tiende a estabilizarse en un 71% y el 29% indica
que no es estable debido a cambios.

 SATISFACCIÓN

Para evaluar la satisfacción de los usuarios se empleó un cuestionario (ver Anexo

C). Cada ítem recibe una puntuación de 0 a 5, de modo que el rango para la
puntuación de cada cuestionario, en forma global esta entre 0 y 40.

Valores del Test

Usuario1 31
Usuario2 32

83
 Usuario3 29
Usuario4 37
Usuario5 32

Tabla 4.14: Resultados obtenidos por los usuarios en el Cuestionario de

Satisfacción

Utilizando la métrica promediando del grado de Satisfacción obtenemos el

resultado de 32.2 que remplazando en:

%P_GS_P =P_GS×2.5=32.2 x 2.5

Donde P_GS= Grado de Cumplimiento respecto a Satisfacción de usuarios

El resultado es 80.5%

4.2.1 PRUEBA AUTOMATICA DE COMPROBACION DE SOFTWARE

Se utiliza ab.exe para realizar las pruebas de stress tanto para el Front End como
para el Back End.

 FRONT END

Evaluando los resultados de la figura 4.1, se tiene los siguientes resultados:

Nro. de peticiones=100
Tiempo en responder las peticiones=27.86 segundos
Tiempo en responder una petición=278 milisegundos
 BACK END

Evaluando los resultados de la figura 4.2, se tiene los siguientes resultados:

Nro. de peticiones=100
Tiempo en responder las peticiones=19.61 segundos
Tiempo en responder una petición=196 milisegundos.

84
 Figura 4.1: Prueba de stress del Front end

Figura 4.2: Prueba de stress para el Back End

85
 CAPÍTULO V

CONCLUSIONES Y RECOMENDACIONES
 5 CAPÍTULO V

CONCLUSIONES Y RECOMENDACIONES

5.1 CONCLUSIONES

A partir de nuestros objetivos específicos y el desarrollo del prototipo se puede

concluir lo siguiente:

 Se cumple realizar la definición de un modelo estructural para el sitio web,

tomando en cuenta criterios para comunicar en la web, además de
basándonos en diseños de la interfaz de sitios periodísticos, tarea
desarrollada en el Sección 3.1.
 El uso de retículas en el diseño de Portada del sitio, hace más fácil y
dinámica la diagramación de diseños de las páginas web.
 La reutilización de librerías, Framework y código existente, para funciones
especificas, reduce el trabajo en la realización de pruebas, debido a que
estos códigos ya han sido probados, descripción realizada en la sección
3.3.
 El trabajo de crear y administrar un sitio web es simplificado gracias al uso
del CMS.
 De acuerdo a la evaluación global del sitio web, aplicando la metodología
Web Site QEM se ha podido evaluar el prototipo, obtenido la calidad global
de 78.5%, la cual esta definida dentro de los márgenes de satisfacción
(60% al 100%) según la metodología. Cumpliendo así con la hipótesis
mayor a un 60%.

Po lo tanto se han cumplido con los objetivos planteados.

86
5.2 RECOMENDACIONES

Para profundizar el desarrollo dentro del ámbito de los CMS, especializados en

Periódicos Digitales, se considera las siguientes recomendaciones:

Recomendaciones de uso:

 Realizar copias de respaldo de la base de datos de manera frecuente.

 Realizar la administración de forma responsable de las secciones y notas
ya que el borrado de una sección implica el borrado de todas las notas
almacenadas en ella.

Recomendaciones afines a cumplir:

 Implementar la integración de otras características multimedia requeridas

en el CMS desarrollando como: galerías de fotografías, videos y audios.
 Debido a la diversidad de resoluciones en los distintos dispositivos laptop,
celulares, etcétera, seria importante desarrollar un CMS que colabore a
crear sitios web con diseño Adaptativo.
 Para futuros CMS considerar la posibilidad de desarrollarlo en otras
plataformas web como: Java, .NET, Phyton, etcétera.

87
BIBLIOGRAFÍA
BIBLIOGRAFÍA
[ACEVEZ, 2008]; Acevez, L. C. (2008): Diseño de información, navegación e
interfaces. Recuperado de http://es.slideshare.net/laceves/diseo-de-informacin-
navegacin-e-interfaces

[BOOCK et .al., 2006]; Boock, G., Rumbaugh, J., & Jacobson, I. (2006). El
Lenguaje Unificado de Modelado. España: Pearson.

[COVELLA, 2005]; Covella, G. (2005). Medición y Evaluación de Calidad en Uso

de Aplicaciones Web. La Pampa, Argentina.

[CUERDA, 2004]; Cuerda García, X. (2004). Introducción a los Sistemas de

Gestión de Contenidos (CMS) de codigo abierto. Recuperado de
.http://mosaic.uoc.edu/articulos/cms1204.html

[GHINAGLIA, 2000]; Ghinaglia, D. (2000). Taller de diseño editorial. Encuentro

Latinoamericano de Diseño. Recuperado de
http://fido.palermo.edu/servicios_dyc/encuentro2007/02_auspicios_publicaciones/a
ctas_diseno/articulos_pdf/CE-121.pdf

[IFIIE., 2011]; Instituto de Formación del Profesorado, Investigación e Innovación

Educativa - IFIIE. (2011). La diagramación del Periódico. Recuperado .de sitio
web: Catálogo de publicaciones del Ministerio:
https://www.educacion.gob.es/documentos/mediascopio/archivos_secciones/156/l
adiagramaciondelperiodico.pdf

[JAVAJAN. 2012]; Javajan. (2012). Guía para diseñadores gráficos. Recuperado

.de http://www.guiadiseño.com/

[Jenson. 2007]; Jenson. (2007). Retícula de diseño web. Recuperado .de sitio
web Jenson Design WP: http://jensonmx.wordpress.com/2007/12/01/retcula-de-
diseno-web/

[LAMARCA, 2011]; Lamarca Lapuente, M. J. (2011). Diseño de una Página Web.

Recuperado de
http://www.hipertexto.info/documentos/Dise%C3%B1o%20de%20una%20p%C3%
A1gina%20web.htm

[MARÍN, 2013]; Marín, C. (19 de enero de 2013). Gestores de contenido:

entrevista a Luis Villa. Recuperado el 22 de agosto de 2014, de sitio web
Alzado.org: http://www.alzado.org/articulo.php?id_art=27

[MARIÑO, 2005]; Mariño Campos, R. (2005). Diseño de páginas web y diseño

gráfico. España: Gesbiblo.
[MÜLLER-BROCKMANN, 1996]; Müller-Brockmann, J. (1996). Grid Systems in
Graphic Design. Barcelona: Gustavo Gili, S.A.

[NOACK, 2010]; Noack, S. (24 de Marzo de 2010). A Brief Look at Grid-Based

Layouts in Web Design. Recuperado de Six Revisions:
http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-
design/

[OLSINA, 1999]; Olsina, L. A. (1999). Metodología Cuantitativa para la Evaluación

y Comparación de la Calidad de Sitios Web. Universidad de la Plata: Facultad de
Ciencias Exactas. La Pampa. Argentina.

[PRESMAN, 2010]; Presman, R. S. (2010). Ingeniería de Software Un enfoque

práctico (Septima ed.). New York: McGraw- Hill.

[ROBERTSON, 2003]; Robertson, J. (03 de Junio de 2003). So, what is a CMS?.

Recuperado de http://www.steptwo.com.au/papers/kmc_what/index.html

[RODRÍGUEZ, 2009]; Rodríguez, A. N. (2009). Metodologías de diseño usadas en

la Ingeniería Web, su vínculo con las NTICS. Recuperado de
http://postgrado.info.unlp.edu.ar/Carreras/Especializaciones/Tecnologia_Informatic
a_Aplicada_en_Educacion/Trabajos_Finales/Rodriguez_Ana.pdf

[ROST, 2003]; Rost, A. (2003). El Periódico Digital: características de un nuevo

medio. Recuperado de: http://red-accion.uncoma.edu.ar/asignaturas/pd.htm#9

[SALVATIERRA ET. AL., 2007]; Salvatierra, R., & Sancho, F. (2007). Del papel a
la Web. Evolución y claves del diseño periodístico en internet. Recuperado de sitio
web Depósito Académico digital Universidad de Navarra:
http://dspace.unav.es/dspace/handle/10171/5074

[SAMARA, 2004]; Samara, T. (2004). Diseñar con y sin Retícula. Barcelona:

Gustavo Gill.

[SANTILLAN, 2007]; Santillan Aldana, J. (Febrero de 2007). Sistemas de Gestión

de Contenidos. Recuperado de sitio web de Slideshare:
http://es.slideshare.net/santillan

[TARQUI, 2011]; Tarqui Quispe, H. (2011). Sistema Gestor de contenidos (CMS)

para la difusión de información corporativa en sitios web. Tesis. La Paz, Bolivia.

[WEDODE, 2010]; Web docente departamental. (2010). Página web y sitio web:
Web docente departamental. Recuperado de Web docente departamental:
http://www.deciencias.net/disenoweb/disenyo/paginas/sitio_web.htm
ii
ANEXO A

ÁRBOL DE PROBLEMAS

Frustración de usuarios
Consumo de recursos
en por la inadaptación
de hardware Consumo de tiempo y
de contenido
recursos económicos

Dependencia de
Inadecuada
personal experto
presentación de
(diseñadores,
contenidos en el diseño
programadores web)

Existencia de páginas web con estructuras poco dinámica y

flexible, frente a nuevos requerimientos y necesidades para
mostrar contenidos en los Periódicos Digitales

Necesidad de modificar Visión de diseño de

diseños en las paginas paginas web orientado a
web una estructura estatica

Elaboración plantillas
con estructura estática
Inadaptabilidad de
contenidos y elementos
gráficos en plantillas
diseñadas ó prediseñadas

iii
ANEXO B

ÁRBOL DE OBJETIVOS

Reducción de tiempo y
costo

Elaboración de varias
Satisfacción por los
plantillas con estructura
usuarios
flexible y dinamica

Adecuada presentación
Uso adecuado de de contenidos en el
recursos tecnológicos diseño

Desarrollar un Sistema Gestor de Contenidos para Periódicos

Digitales utilizando retículas que permita de forma dinámica y
flexible el diagramado de páginas web

Investigar, estudiar y
Analizar la información Estudiar el manejo y uso
utilizar herramientas de
de los periódicos en línea del sistema de retículas
edición de contenidos y
para la diagramación
utilidades para la web

iv
ANEXO C
Cuestionario de Satisfacción
EVALUACION DE CALIDAD EN USO

Esta encuesta está destinada a evaluar algunos aspectos de calidad del sitio Web para la evaluación del actual Gestor de
Contenidos “GECORE”, con el objetivo de mejorar aspectos que resulten relevantes para futuras experiencias.

Esta encuesta debe ser respondida colocando un valor en el casillero dentro de la escala, indicando el grado de acuerdo que tiene
respecto al concepto que se expresa en cada ítem. La escala tiene cinco puntos, que van de 1 a 5.

1.- Nunca 2.-Algunas veces 3.-Un poco 4.-Casi siempre 5.-Siempre

PREGUNTA PUNTUACIÓN
1.- ¿El sistema le resultó fácil de usar?
2.- ¿Le parece agradable la interfaz del sistema?
3.- ¿Puede usar el sistema sin la ayuda de un experto que lo guie?
4.- ¿Las funciones del sistema estaban bien integradas? (Es decir si existe un correcto funcionamiento de la aplicación
en sus distintas secciones)
5.- Piensa que los editores de contenidos podrían aprender a usar el sistema rápidamente.
6.- ¿El sistema respondió de forma rápida en la elaboración de las tareas designadas?
7.- ¿Le resulto fácil de ubicarse en los distintos módulos del sistema?
8.- ¿Le gustaría utilizar el sistema en el trabajo de edición que realiza?

¿Percibió si existían funciones del sistema que estaban ausentes o tenían un mal funcionamiento?

¿Cuáles?.........................................................................................................

¿El sistema GECORE puede ser utilizado para la difusión de información para Periódicos Digitales?

R.-…………..Porqué?....................................................................................................................................................................

Observaciones:…………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………….