UNIVERSIDAD PERUANA LOS ANDES

FACULTAD DE INGENIERA
CARRERA PROFESIONAL
INGENIERA DE SISTEMAS Y COMPUTACIN

Disear e implementar una pgina web para la I.E Jos

Carlos

Maritegui- Huanuquillo - Tarma

USANDO LA METODOLOGA PARA LA CREACIN DE PGINAS WEB.

PRESENTADO POR:
GUTIERREZ PUENTE, PERCY MANUEL

INFORME PRCTICAS PRE PROFESIONALES

CENTRO DE COMPUTO
CENTRO EDUCATIVO 30715 J.C.MHUANUQUILLO
HUANCAYO PERU
2015

DEDICATORIA

El presente trabajo va dedicado

a todas las personas que luchan
da a da por un noble ideal.

INDICE

INTRODUCCION
RESUMEN
CAPITULO I
ASPECTO GENERALES DE LA INSTITUCION DONDE SE REALIZO LAS
PRACTICAS PRE PROFESIONALES
1.1.
1.2.
1.3.
1.4.
1.5.
1.6.

RAZN SOCIAL
ACTIVIDAD QUE REALIZA
UBICACIN GEOGRFICA
ORGANIZACIN
REA DONDE DESARROLLO SUS PRACTICAS
FUNCIONES DEL REA DONDE DESARROLLO
PRACTICAS

SUS

CAPITULO II
ASPECTOS GENERALES DE LAS PRCTICAS PRE PROFESIONALES
2.1
2.2
2.3
2.4

DECRIPCION DE LA SITUACIN ACTUAL O LABORAL A

DESARROLLAR
OBJETIVOS
JUSTIFICACIN
METODOLOGAS (APLICACIN DE TCNICAS CUNTICAS O
CUALITATIVAS) QUE UTILIZ PARA LLEVAR A CABO LA
ACTIVIDADES ENCOMENDADA

INTRODUCCIN

En el Centro Educativo Jos Carlos Maritegui en el Centro de

Cmputo en la cual se desarrolla las practicas pre profesionales II, se ha
identificado la necesidad de implementar una Pagina Web.
En el mundo globalizado en el que vivimos, se hace imprescindible tener
una pgina Web de un centro educativo. En nuestro pas, todava queda mucha
gente que recela de las nuevas tecnologas o que cree que no la necesitan. Sin
embargo, estoy seguro que la mayora de esta gente, tambin necesita una
pgina Web de la empresa. Recordemos que una pgina Web no tiene por qu
ser exclusivamente un escaparate o un supermercado virtual, sino que tienes
muchos ms usos, como un tabln de informacin corporativa, una herramienta
para comunicar las ventajas que cuenta el centro educativo y as llegar a captar
ms estudiantes.
Una presencia en lnea es vital para un centro educativo pues es un campo
lleno de gente y muy competitivo, es por eso que se implementara una pgina
web.

RESUMEN

En el primer captulo se da la informacin de los aspectos generales de la

institucin donde se realizan las prcticas profesionales II en este captulo
estn el nombre de la razn social las actividades que realiza la institucin, la
ubicacin geogrfica donde se encuentra ubicado la organizacin de la
institucin, el rea donde est realizando las prcticas profesionales y
funciones y responsabilidades del rea donde est desarrollando sus prcticas
profesionales II.
El segundo captulo comprende la descripcin de los aspectos generales
Donde se describe la situacin actual la laborar, los objetivos la justificacin y la
metodologa usar MVC
Descriptiva de toda la necesidad de dicha rea.
El tercer captulo descripcin de las actividades realizadas
El captulo cuatro se describir los resultados obtenidos, dificultades
encontradas.

CAPITULO I
TTULO DEL TRABAJO
Disear e implementar una pgina web para I. E. Jos

Carlos Maritegui-

Huanuquillo Usando la metodologa MVC.

1. DATOS GENERALES DE LA EMPRESA
1.1.

Razn Social

Centro educativo: 30715 JOSE CARLOS MARIATEGUI - Huanuquillo

El centro educativo Jos Carlos Maritegui fue creado con la resolucin N:
R.M

N 998 -71 en el ao 1989, se encuentra ubicado en Huanuquillo a 10

minutos de Tarma y pertenece a la Ugel 6 Tarma

Misin

Estimular al nio a pensar y actuar creativamente, siendo protagonista

de su propio aprendizaje a travs de actividades significativas.

Ofrecer a los nios un clima afectivo y saludable que favorezca a su

desarrollo fsico, emocional, moral, intelectual y creativo.

Detectar oportunamente los diversos problemas que presentan los nios

en relacin al desarrollo de su aprendizaje y crecimiento emocional,
brindando una orientacin adecuada al personal docente y padres de
familia, as como el tratamiento requerido ante estas dificultades.

Ensear a los nios a respetar, cuidar, trabajar, valorar y amar a Dios y

su creacin.

Contribuir al mejoramiento de los valores morales y cristianos en los

nios de nuestra ciudad.

Capacitar peridicamente al personal docente.

VISIN
Queremos ser reconocidos como una institucin que evoluciona y se mantiene
a la vanguardia de los nuevos paradigmas y enfoques educativos, formando a
los nios en excelencia acadmica y grandeza de espritu en un ambiente de
compromiso, tolerancia y respeto mutuo, haciendo participar en nuestra misin
educativa a los padres de familia como primeros educadores de sus hijos y a
los alumnos como principales protagonistas de su formacin integral.
1.2.

Actividades que realiza

Dedicada a brindar educacin a los nios del Centro Poblado Huanuquillo de la

provincia de Tarma

El centro educativo 30715 Jos Carlos Maritegui centro educativo en el

cual se imparte educacin basados en valores para todo estudiante de
dicha escuela.
Cuenta con aulas desde jardn hasta el 6to grado de primaria y cuenta con un
total de 178 alumnos tanto en el nivel primario como en jardn
1.3.

Ubicacin Geogrfica

Carretera Central Tarma (PACHECO 1564)

a. LOCALIZACIN:
El centro poblado Huanuquillo se encuentra situado a 2 Km. de la
ciudad de Tarma.
b. LMITES:
Por el Norte

: Provincia Tarma

Por el Sur

: Distrito Tarmatambo

Por el Este

: Casero de Misaruracha.

Muestra el mapa de la provincia de Tarma.

I.E 30715 J.C.M

I.E 30715 J.C.M

I.E 30715 J.C.M

INGRESO A LA I.E. J.C.M

1.4. Organizacin
El centro Educativo funciona en un horario diurno para la enseanza de los
alumnos den Centro poblado Huanuquiillo , con un total de 6 docentes y
una secretaria,

ORGANIGRAMA DE .I.E.

Director
Promover y dirigir el trabajo colaborativo como un medio para consolidar la
comunidad de aprendizaje en la escuela a su cargo
Maestros
Est formado por el conjunto de maestros de la escuela. Se encarga de las
tareas pedaggicas del da a da para una adecuacin de los contenidos

pedaggicos del que participan las familias, con atencin individualizada a cada
alumno,

Secretaria:
Encargada de llevar toda la documentacin del Centro Educativo.
Coordinadora de comisiones:
Encargada de la recepcin de productos o materiales donados por el estado.
1.5. rea donde desarroll sus prcticas
Centro Educativo 30715 Jos Carlos Maritegui - Huanuquillo (Laboratorio
del centro educativo- Apoyo)
Analizar el diseo y mantenimiento de los sistemas de informacin del

que dispone el laboratorio de informtica.

Brindar la administracin necesaria a los equipos y tecnologa para
realizar acciones que permitan la automatizacin y operacin de los

datos y sistemas de informacin

Brindar apoyo al docente para que adquieran conocimientos bsicos,
tericos y prcticos sobre el uso y mantenimiento de los equipos

informticos.
Administracin y mantenimiento de los sistemas fsicos, programas con

los que se trabaja en el proceso de enseanza.

Apoyar en los trabajos para algunas reas como la Direccin.
1.6. Funciones del rea donde desarroll sus prcticas
Es desarrollado en su totalidad en objetiva y dinmica en el
Centro de cmputo.

Garantizar la calidad de la informacin y la seguridad de los

datos de los alumnos de cada aula ya sean en registros. Y
Nominas.

Evaluar constantemente el uso y funcionamiento de los sistemas

instalados.
Monitorear

compuestos por los recursos de hardware y software.

Configuracin y Actualizacin de antivirus de los equipos de

el

sistema

cmputos en el laboratorio.

informtico

del

laboratorio,

CAPITULO II
ASPECTOS GENERALES DE LAS PRCTICAS PRE
PROFESIONALES
2.1. DECRIPCION DE LA SITUACIN ACTUAL O LABORAL A
DESARROLLAR
El centro Educativo Jos Carlos Maritegui, actualmente no cuenta con
una pgina Web, porque su escasa infraestructura informtica y
presupuesto asignado por el estado no le permite financiar una pgina
web.

2.2. OBJETIVOS
OBJETIVO GENERAL
Disear e Implementar una pgina Web para el Centro Educativo Jos
Carlos Maritegui. Mediante la metodologa para la creacin de pginas
Web.
OBJETIVOS ESPECFICOS:
Planificar la necesidad, requerimientos y objetivos de la I.E.
Diseo del aspecto visual del sitio web: composicin de cada tipo de
pgina, aspecto y comportamiento de los elementos de interaccin y
presentacin de elementos multimedia.
Pprototipos

adecuados

que

determinen

establecer

la

vialidad,

factibilidad y el buen funcionamiento de la Web. La

La evaluacin del sitio web siempre deber informar al usuario acerca
de lo que est sucediendo en la I.E.

 En la implementacin del sitio es recomendable utilizar estndares

(como el jomla) para asegurar la futura compatibilidad y escalabilidad
del sitio.
El mantenimiento del sitio web no ser una entidad esttica, es un
objeto vivo cuyos contenidos cambian; cuya audiencia, necesidades y
perfiles cambian, y que por lo tanto requiere de continuos rediseos y
mejoras.

2.3. JUSTIFICACIN
El crecimiento en el manejo y gestin de la informacin trae consigo una
gran demanda en el uso de las tecnologas de la informacin y las
comunicaciones, en tal sentido, es importante que el Centro Educativo
cuente con ello.
El uso de nuevas tecnologas de comunicacin permite una interaccin
ms asertiva entre las organizaciones y sus integrantes, en este caso la
I. E 30715 Jos Carlos Maritegui se beneficiara de poseer un
vnculo electrnico, como lo es la pgina web, dando una mayor
accesibilidad de datos actuales, y en algunos casos en tiempo real,
referentes a las actividades inherentes al colegio, fortalecindose

innovando la imagen del mismo en la llamada era de la informacin,

permitiendo un mayor alcance y presencia en el mundo virtual.

2.4.

METODOLOGAS (APLICACIN DE TCNICAS CUNTICAS O

CUALITATIVAS) QUE UTILIZ PARA LLEVAR A CABO LA

ACTIVIDADES ENCOMENDADA
La Implementacin de la Web para el Centro Educativo, se ha
seleccionado la Metodologa para la creacin de pginas Web.

El proceso de Diseo Web Centrado en el Usuario propuesto en este

trabajo se divide en varias fases o etapas, algunas de las cuales tienen
carcter iterativo. Sirva como aproximacin el siguiente esquema:

DIAGRAMA DE LA METODOLOGA PARA LA CREACIN DE PGINAS WEB.

Como indica el esquema, las fases de "diseo", "prototipado" y

"evaluacin" son cclicas e iterativas. Esto quiere decir que todo lo que
se disee debe ser constantemente evaluado a travs de su prototipado,
para as poder corregir errores de usabilidad desde los primeros
momentos del desarrollo. Evaluar el sitio web nicamente una vez
finalizado su desarrollo hara mucho ms costosa la reparacin de

errores de usabilidad, ya que siempre es ms econmico reconducir un

diseo que redisear completamente el sitio.
Los siguientes apartados de este trabajo se estructuran siguiendo este
mismo esquema del proceso de diseo.
1. Planificacin
Todo proyecto debe comenzar por una correcta planificacin. En esta etapa se
identifican los objetivos del sitio, as como las necesidades, requerimientos y
objetivos de la audiencia potencial.
Confrontando esta informacin se definen los requerimientos del sitio web,
entre los que podemos contar requerimientos tcnicos (back-end y front-end),
recursos humanos y perfiles profesionales necesarios, y adecuacin del
presupuesto disponible.
Se trata, pues, de establecer un equilibrio entre lo que puede ofertar el
proveedor y lo que necesita el usuario. El sitio web - sus contenidos y diseo debe cumplir precisamente este cometido: servir de medio para la consecucin
de objetivos por parte de proveedor y usuario.
El diseador debe obtener informacin precisa tanto de las necesidades y
objetivos del proveedor como del usuario. En el primer caso, mediante
entrevistas y reuniones con los responsables del sitio, ser relativamente fcil
obtener dicha informacin. Ms dificultoso, pero al mismo tiempo ms
importante, es obtener esta informacin del usuario: Qu necesita, cules son

sus objetivos, cmo se comporta y acta, cul ser el contexto de uso y cmo
afectar a la interaccin, experiencia y conocimientos previos,...
La respuesta a estas preguntas se resuelve estudiando a la audiencia a travs
de mtodos de indagacin. stos engloban mtodos de aproximacin
contextual, estudios de campo o etnogrficos, mtodos de aproximacin por
grupos y mtodos de aproximacin individual (encuestas, cuestionarios y
entrevistas). Cuanto ms conozcamos a la audiencia, ms adaptado ser el
diseo y ms satisfactoria la experiencia del usuario final.
Como se puede ver, la etapa de planificacin se basa casi completamente en la
recogida, anlisis y ordenacin de toda la informacin posible, con el objetivo
de tener una base slida sobre la que poder tomar decisiones de diseo en las
siguientes etapas del proceso.
2. Diseo
La etapa de Diseo es el momento del proceso de desarrollo para la toma de
decisiones acerca de cmo disear o redisear, en base siempre al
conocimiento obtenido en la etapa de planificacin, as como a los problemas
de usabilidad descubiertos en etapas de prototipado y evaluacin.
5.1.1. Modelado del usuario
Toda la informacin obtenida de los estudios de usuarios realizados en la
anterior fase de planificacin debe servir como base para comenzar el diseo,
pero para ello se debe resumir y sintetizar dicha informacin.

Este paso se denomina modelado del usuario y consiste en la definicin de

clases o perfiles de usuarios en base a atributos comunes. Los atributos sobre
los que se har la clasificacin dependen de la informacin que se tenga de la
audiencia, pero normalmente se tratarn de atributos tales como necesidades
de informacin, condiciones de acceso, experiencia y conocimientos.
Mediante esta tcnica, el diseador tendr en mente para quin disea, qu
espera encontrar el usuario y en qu forma. El diseo del sitio web debe estar
orientado al usuario, organizando y estructurando la informacin segn los
modelos definidos de usuarios.
El problema de esta tcnica de modelado de usuario es que cuando la
audiencia es demasiado extensa y heterognea, la categorizacin total de la
audiencia puede no ser viable. En estos casos es conveniente hacer uso del
enfoque 'persona', ideado por Cooper (1999).
Esta tcnica de modelado del usuario se basa en la definicin de arquetipos de
usuarios que representan patrones de conducta, objetivos y necesidades.
Estos arquetipos, llamados "personas", son descripciones en forma narrativa
de usuarios, a los que se les da una identidad inventada: fotografa, nombre,...
En cambio, todos los atributos, caractersticas y necesidades del arquetipo
deben estar basados en informacin real extrada de la audiencia objetiva del
sitio web, ya que si stos fueran datos inventados la tcnica perdera toda su
utilidad.

Adems se deben definir "escenarios" - descripciones de situaciones de uso

del sitio - sobre los que poder contextualizar la interaccin persona-aplicacin
web.
Las "personas" definidas, al contrario de lo que se pretenda con la
categorizacin de la audiencia, no pueden representar al total de los usuarios
del sitio web, pero es que sta no es su misin.
La funcin de esta tcnica es la de servir de soporte para la toma de decisiones
en el diseo del sitio, permitiendo al desarrollador realizar un diseo centrado
en el usuario, o ms correctamente, en "algn" usuario. Este usuario podemos
considerarlo 'real', ya que aunque no pertenece al mundo real, su descripcin
est basada sobre, y por tanto representa a, un nutrido grupo de usuarios
reales.
Es demasiado comn que el diseador se imagine a s mismo usando el sitio y
por tanto sea incapaz de comprender por qu a alguien le puede resultar difcil,
incmodo y hasta frustrante su uso. Estos arquetipos de usuarios conseguirn
precisamente que el diseador tenga en mente a un usuario 'real', con
limitaciones, habilidades y necesidades reales.
5.1.2. Diseo conceptual
El objetivo de la fase de Diseo Conceptual es definir el esquema de
organizacin, funcionamiento y navegacin del sitio. No se especifica qu
apariencia va a tener el sitio, sino que se centra en el concepto mismo del sitio:
su arquitectura de informacin.

Los sitios web son sistemas hipermedia formados por conjuntos de pginas
interrelacionadas por enlaces unidireccionales, pudiendo cada una de estas
pginas contener sub-elementos con entidad propia, contenidos multimedia y
herramientas interactivas.
La "estructura" del sitio web se refiere precisamente a las conexiones y
relaciones entre pginas, a la topologa de la red de pginas, as como a la
granularidad de los elementos de informacin contenidos en las pginas; y la
"navegacin" a las posibilidades y forma en que cada pgina presenta las
opciones de desplazamiento hacia otras pginas.
La definicin de la estructura del sitio puede hacerse desde dos enfoques
diferentes y complementarios: aproximacin descendente y ascendente. En la
descendente se trata de estructurar del "todo" a las "partes", dividir los
contenidos en pginas y definir los enlaces entre pginas. En la Ascendente,
por el contrario, se definen los bloques mnimos de informacin, estructuracin
que va ms all de la propia segmentacin de informacin en pginas.
Una vez definida la estructuracin del sitio es necesario documentarla, para as
tener un modelo de referencia sobre el que sustentar el desarrollo del sitio. La
forma de documentar arquitecturas se suele hacer a travs de grafos y
esquemas, con el objetivo de que sean de fcil y rpida comprensin por todos
los miembros del equipo de desarrollo.
Si la arquitectura es ascendente normalmente se documentar a travs de
diagramas entidad-relacin. Por otro lado, cuando la arquitectura a documentar
es la descendente, para sitios web proponemos el uso del vocabulario grfico

de Garret (2002). A travs de unas sencillas convenciones grficas para la

diagramacin de la arquitectura, podemos definir la estructura de la informacin
as como la navegacin del sitio.
Otras tareas a llevar a cabo por el Arquitecto de Informacin o diseador en la
fase de Diseo Conceptual son: Definir sistemas de clasificacin para los
contenidos; Elaborar ndices y mapas del sitio; Aplicar metadatos a cada una
de las pginas y sub-elementos de informacin; y Definir el Sistema de
Rotulado (Rosenfeld, Morville; 2002).
Entre las tcnicas de Diseo Centrado en el Usuario a aplicar en la etapa de
Diseo Conceptual destacamos, por su utilidad y facilidad de ser llevada a
cabo, la tcnica de "card sorting" u ordenacin de tarjetas. sta se basa en la
observacin de cmo los usuarios agrupan y asocian entre s un nmero
predeterminado de tarjetas etiquetadas con las diferentes categoras o
secciones temticas del sitio web. De esta forma, partiendo del comportamiento
de los propios usuarios, es posible organizar y clasificar la informacin de un
sitio web conforme a su modelo mental. (Hassan Montero et al.; 2004)
Diseo visual y definicin del estilo
En esta fase se especifica el aspecto visual del sitio web: composicin de cada
tipo de pgina, aspecto y comportamiento de los elementos de interaccin y
presentacin de elementos multimedia.
Con el objetivo de evitar la sobrecara informativa, en el diseo de cada interfaz
se debe tener en cuenta el comportamiento del usuario en el barrido visual de
la pgina, distribuyendo los elementos de informacin y navegacin segn su

importancia en zonas de mayor o menor jerarqua visual - por ejemplo, las

zonas superiores del interfaz poseen ms jerarqua visual que las inferiores-.
Adems de la posicin de cada elemento en la interfaz, existen otras tcnicas
para jerarquizar informacin como son: uso del tamao y espacio ocupado por
cada elemento para otorgarle importancia en la jerarqua visual, utilizacin del
contraste de color para discriminar y distribuir informacin, uso de efectos
tipogrficos para enfatizar contenidos, rotura de la simetra y uso de efectos de
relieve / profundidad para resaltar elementos, etc.
Adems de evitar la sobrecarga informativa jerarquizando los contenidos
mediante las tcnicas descritas, para evitar la sobrecarga memorstica se
recomienda definir mens de navegacin con un nmero de opciones reducido,
normalmente no ms de nueve diferentes.
Otro aspecto importante en el diseo visual del sitio es la accesibilidad. En el
uso de colores, por ejemplo, se debe ofrecer suficiente contraste entre texto y
fondo para no dificultar la lectura, e igualmente seleccionar combinaciones de
colores teniendo siempre en cuenta las discapacidades visuales en la
percepcin del color que pudieran presentar nuestros usuarios.
Al

utilizar imgenes en

el diseo, por motivos de accesibilidad

comprensibilidad, se debe cuidar su resolucin y tamao, as como en

fotografas la no prdida de significacin o contexto por recorte o minimizacin
excesiva de la imagen.
Desde una perspectiva ms amplia del diseo visual del sitio es importante
mantener una

coherencia

estilo

comn

entre

todas

las pginas,

proporcionando una consistencia visual a todo el sitio. Para asegurar que esta
coherencia se cumple, es til elaborar un libro o gua de estilo que sirva de
documento referencia para todo el equipo de desarrollo.
Diseo de contenidos
En el diseo de contenidos hipermedia se debe mantener un equilibrio entre lo
que seran contenidos que no aprovechasen las nuevas posibilidades
hipertexto y multimedia, y lo que seran contenidos caticos o desorientativos
debido a un uso excesivo y no sosegado de las posibilidades hipermedia.
Sin prescindir de las capacidades que ofrece el nuevo medio, de lo que se trata
es de disear contenidos interrelacionados y vinculados, manteniendo cierta
coherencia informativa, comunicacional y organizativa.
La escritura hipertextual se debe realizar de forma diferente a la tradicional. El
nuevo medio y sus caractersticas obligan a ser concisos, precisos, creativos y
estructurados a la hora de redactar. Debemos conocer a quin nos dirigimos y
adaptar el lenguaje, tono y vocabulario utilizado al usuario objetivo.
Algunos consejos a seguir en el diseo y redaccin de contenidos son:

Seguir una estructura piramidal: La parte ms importante del mensaje, el

ncleo, debe ir al principio.

Permitir una fcil exploracin del contenido: El lector en entornos Web,

antes de empezar a leer, suele explorar visualmente el contenido para
comprobar si le interesa.

Un prrafo = una idea: Cada prrafo es un objeto informativo. Se deben

trasmitir ideas, mensajes... evitando prrafos vacos o varios mensajes
en un mismo prrafo.

Ser conciso y preciso: Al lector no le gusta leer en pantalla.

Vocabulario y lenguaje: Se debe utilizar el mismo lenguaje del usuario,

no el de la empresa o institucin. El vocabulario debe ser sencillo y
fcilmente comprensible.

Tono: Cuanto ms familiar y cercano (sin llegar a ser irrespetuoso) sea el

tono empleado, ms fcil ser que el lector preste atencin.

Confianza: La mejor forma de ganarse la confianza del lector es

permitindole el dilogo, as como conocer cuanta ms informacin
posible acerca del autor.

3. Prototipado
La evaluacin de la usabilidad del sitio web se debe realizar desde las primeras
etapas de diseo, pero cmo evaluar un sitio web que no est implementado?
A travs de prototipos.
La etapa de prototipado se basa en la elaboracin de modelos o prototipos de
la interfaz del sitio. Su aspecto no se corresponde exactamente con el que
tendr el sitio una vez finalizado, pero pueden servir para evaluar la usabilidad
del sitio sin necesidad de esperar a su implementacin.

Segn Flora Corts (2000), podemos clasificar los tipos de prototipado segn
el nivel de funcionalidad reproducida:

Prototipado horizontal: Se reproduce gran parte del aspecto visual del

sitio, pero sin que esos modelos de interfaz estn respaldados por la
funcionalidad real que tendr finalmente el sitio.

Prototipado vertical: Se reproduce nicamente el aspecto visual de una

parte del sitio, pero la parte reproducida poseer la misma funcionalidad
que el sitio web una vez implementado.

Segn el grado de fidelidad o calidad del prototipo se distingue entre:

Prototipado de alta fidelidad: El prototipo ser muy parecido al sitio web

una vez terminado.

Prototipado de baja fidelidad: El aspecto del prototipo distar bastante

del que tenga el sitio web final.

En las primeras etapas de desarrollo del sitio web se puede hacer uso del
prototipado en papel o de bajo coste, que consiste en reproducir los aspectos
bsicos de la interfaz del sitio en papel.
Por ejemplo, podemos reproducir a travs de bocetos cmo sern las
diferentes pginas que conformarn el sitio a desarrollar, cada una en una
pgina de papel diferente. La reproduccin suele ser a mano (lpiz y tijeras),
por lo que resulta una tcnica de prototipado muy econmica.

Otra forma de realizar prototipos es mediante la reproduccin del aspecto del

sitio a travs de herramientas software. Mediante el procesador de textos o un
simple editor HTML podemos esbozar cmo ser la interfaz del sitio.
Hay que recordar que estos prototipos son reproducciones, no estados
tempranos de implementacin de la interfaz. Una vez que el prototipo se ha
utilizado se tira, no es parte del sitio web.
La utilidad real del prototipado se fundamenta en que no tendra sentido
empezar a implementar una interfaz web si no nos hemos asegurado antes de
que el diseo es usable.
4. Evaluacin
La evaluacin de la usabilidad - la etapa ms importante en el proceso de
Diseo Centrado en el Usuario - se puede realizar a travs de varios mtodos o
tcnicas y sobre diferentes representaciones del sitio (prototipos en papel,
prototipos software, sitio web implementado...).
Existe una gran diversidad de mtodos para evaluacin de usabilidad, aunque
en el presente trabajo nicamente se describirn aquellos que creemos de ms
utilidad y aplicabilidad real en el contexto del desarrollo de aplicaciones web.
4.1. Mtodo por inspeccin: evaluacin heurstica
Los mtodos de inspeccin de la usabilidad de un sitio web son aquellos
realizados por el experto en usabilidad, y que se basan en el recorrido y
anlisis del sitio identificando errores y problemas de diseo.

La Evaluacin Heurstica es un tipo de mtodo de inspeccin, que tiene como

ventaja la facilidad y rapidez con la que se puede llevar a cabo.
Este tipo de evaluacin normalmente la lleva a cabo un grupo reducido de
evaluadores que, en base a su propia experiencia, fundamentndose en
reconocidos principios de usabilidad (heursticos), y apoyndose en guas
elaboradas para tal fin, evalan de forma independiente el sitio web,
contrastando finalmente los resultados con el resto de evaluadores.
Diversos autores han propuesto diferentes conjuntos de heursticos o principios
de usabilidad a travs de los cuales evaluar la usabilidad. Nielsen (1994a)
propone los siguientes:

Visibilidad del estado del sistema: El sistema (o sitio web) siempre debe
informar al usuario acerca de lo que est sucediendo. Por ejemplo,
cuando en una interfaz tipo web mail se adjuntan ficheros a un mensaje,
el sistema debe informar del hecho mostrando un mensaje de espera.

Lenguaje comn entre sistema y usuario: El sistema debe hablar el

lenguaje del usuario, huyendo de tecnicismos incomprensibles o
mensajes crpticos.

Libertad y control por parte del usuario: El usuario debe tener el control
del sistema, no se puede limitar su actuacin. Se debe ofrecer siempre
al usuario una forma de "salida de emergencia", como por ejemplo la
representada por la opcin para "saltar" animaciones de introduccin
(normalmente Flash).

Consistencia y estndares: La consistencia se refiere a, por ejemplo, no

utilizar dos rtulos distintos para referirse a un mismo contenido, o no
usar estilos diferentes dentro de un mismo sitio. Adems el sitio web
debe seguir estndares o convenciones de diseo ampliamente
aceptados. Cuanto ms se parezca un diseo y su funcionamiento al
resto de sitios web, ms familiar y fcil de usar resultar para el usuario.

Prevencin de errores: Mejor que un buen mensaje de error es un

diseo que prevenga que ocurra el error.

Es mejor reconocer que recordar: Este principio hace mencin a la

visibilidad de las diferentes opciones, enlaces y objetos. El usuario no
tiene por qu recordar dnde se encontraba cierta informacin, o cmo
se llegaba a determinada pgina.

Flexibilidad y eficiencia de uso: El sitio debe ser fcil de usar para

usuarios novatos, pero tambin proporcionar atajos o aceleradores para
usuarios avanzados.

Diseo minimalista: Cualquier tipo de informacin que no sea relevante

para el usuario y que sobrecargue la interfaz debe ser eliminada.

Permitir al usuario solucionar el error: Por ejemplo, cuando un usuario

introduce una consulta en un buscador y no obtiene ningn resultado, se
debe informar al usuario sobre cmo solucionar el problema, por ejemplo
con mensajes del tipo "introduzca algn sinnimo" o "quiso Ud. decir...".
Adems no se debe borrar el contenido de la caja de bsqueda para que
el usuario pueda rehacer la consulta.

Ayuda y Documentacin: Siempre es mejor que un sitio web se pueda

utilizar sin necesidad de ayuda o documentacin, aunque en sitios web
extensos o en procesos de interaccin complejos (como el rellenado de
un formulario), se debe proporcionar informacin de ayuda al usuario.

Hassan Montero y Martn Fernndez (2003a) proponen el siguiente modelo de

evaluacin heurstica:

Aspectos generales: Objetivos, look & feel, coherencia y nivel de

actualizacin de contenidos.

Identidad e Informacin: Identidad del sitio e informacin proporcionada

sobre el proveedor y la autora de los contenidos.

Lenguaje y redaccin: Calidad de los contenidos textuales.

Rotulado: Significacin y familiaridad del rotulado de los contenidos.

Estructura y Navegacin: Idoneidad de la arquitectura de informacin y

navegacin del sitio.

Lay-out de la pgina: Distribucin y aspecto de los elementos de

navegacin e informacin en la interfaz.

Bsqueda: Buscador interno del sitio.

Elementos multimedia: Grado de adecuacin de los contenidos

multimedia al medio web.

Ayuda: Documentacin y ayuda contextual ofrecida al usuario para la

navegacin.

Accesibilidad: Cumplimiento de directrices de accesibilidad.

Control y retroalimentacin: Libertad del usuario en la navegacin.

4.2. Mtodo de test con usuarios

El test con usuarios es una prueba de usabilidad que se basa en la observacin
y anlisis de cmo un grupo de usuarios reales utiliza el sitio web, anotando los
problemas de uso con los que se encuentran para poder solucionarlos
posteriormente.
Como toda evaluacin de usabilidad, cuanto ms esperamos para su
realizacin, ms costoso resultar la reparacin de los errores de diseo
descubiertos. Esto quiere decir que no slo debemos realizar este tipo de
pruebas sobre el sitio web una vez implementado, sino tambin, sobre los
prototipos del sitio.
Es una prueba complementaria a la evaluacin heurstica, pero un test con
usuarios es ms costoso, por lo que es recomendable realizarlo siempre
despus de una evaluacin heurstica, ya que sera desperdiciar tiempo y
dinero utilizarlo para descubrir errores de diseo motivados por el no
cumplimiento en el desarrollo de principios generales de usabilidad
(heursticos).
La ventaja que ofrecen los test de usuarios frente a otro tipo de evaluaciones
es que por un lado es una demostracin con hechos, por lo que sus resultados
son ms fiables, y por otro porque posibilitan el descubrimiento de errores de
diseo imposibles o difciles de descubrir mediante la evaluacin heurstica.

Llevar a cabo un test de usuarios formal obligara a alquilar un local

(laboratorio) adecuado, contratar a evaluadores especializados, as como a
delegar en alguna empresa la seleccin y reclutamiento de los participantes de
la prueba. Realmente sera bastante costoso y poco viable para la gran
mayora de casos.
Existe otra forma de llevar a cabo un test con usuarios popularizada por
Nielsen (1994b) , mucho ms econmica y fcil de realizar, con resultados y
utilidad similares, que son las denominadas pruebas informales o test de
'guerrilla'.
En (Hassan Montero, Martn Fernndez; 2003c) se detalla cmo llevar a cabo
este tipo de pruebas: reclutamiento de participantes, eleccin del local y
materiales, realizacin de la prueba y elaboracin del informe final.
5. Implementacin y lanzamiento
En la implementacin del sitio es recomendable utilizar estndares (HTML,
XHTML...) para asegurar la futura compatibilidad y escalabilidad del sitio. Esto
se debe a que, aunque puede ser tentador utilizar tecnologas propietarias, el
panorama tecnolgico puede hacerlas desaparecer o cambiar en poco tiempo.
Igualmente es recomendable separar en la implementacin contenido de estilo,
mediante el uso de hojas de estilo (CSS) del lado del cliente y uso de bases de
datos del lado del servidor. De esta forma se facilitar tanto el rediseo del sitio
como la posibilidad de adaptacin dinmica del diseo a las necesidades de
acceso de cada tipo de usuario.

En esta etapa del desarrollo se debe llevar, as mismo, un control de calidad de

la implementacin, supervisando que todo funcione y responda a cmo haba
sido planificado, ya que la usabilidad del sitio depende directamente de la
funcionalidad. Si algo no funciona, sencillamente no se puede usar.
Una vez implementado el sitio y testada su funcionalidad se procede al
lanzamiento del sitio, que consiste en su puesta a disposicin para los
usuarios. Se trata de un evento importante, muchas veces errneamente
apresurado debido a la necesidad de cumplir plazos de entrega.
El primer encuentro entre usuario y el sitio web modelar en gran medida la
percepcin que el usuario tendr del sitio en posteriores visitas. Por ello es
necesario que durante los primeros meses a partir del lanzamiento, el sitio
tenga un diseo y contenidos adaptados a este importante momento de su ciclo
de vida. Es el momento de explicar a los usuarios el sitio, de ensearles a
usarlo, darles la bienvenida, "vendrselo"...
Despus de esos primeros meses de vida la audiencia del sitio habr
cambiado. Seguir habiendo usuarios que accedan por primera vez al sitio,
pero ya no representarn a la mayora de la audiencia. A los usuarios
habituales no se les puede seguir haciendo perder el tiempo dndoles la
bienvenida o explicndoles qu es y en qu consiste el sitio web.
Para asegurar que el sito llega a su audiencia potencial se hace uso de la
promocin. La forma de llevar a cabo una campaa de publicidad o promocin
depender de la naturaleza y caractersticas del sitio web.

Se debe crear expectacin, un conocimiento previo del sitio en los potenciales

usuarios. Para ello es recomendable que antes del lanzamiento, desde la
misma URL que tendr finalmente el sitio, se ofrezca una pgina web
explicativa de lo que ser el sitio, cundo estar disponible, as como
informacin de contacto.
Una vez realizado el lanzamiento se deben utilizar tcnicas de promocin para
atraer a los usuarios hacia el sitio:

Banners publicitarios: Ya sea desde sitios web externos pero

relacionados temticamente con el sitio a promocionar, o desde el
mismo sitio web cuando lo que se promociona es un sub-sitio o seccin
interna.

Inclusin en buscadores y directorios: La inclusin del sitio web en

ndices y motores de bsqueda es la tcnica ms eficiente para atraer
usuarios. Si el sitio web es pblico (de acceso no limitado o controlado)
se debe haber diseado de tal forma que facilite su indizacin
automtica. Si el sitio web no es pblico (por ejemplo un master virtual),
y los contenidos no son accesibles, se debe crear un mini-sitio pblico
que explique toda la informacin posible acerca del sitio, para que este
sea indizado por los buscadores.

Campaas de correo electrnico: Si se posee una base de datos con

correos electrnicos de usuarios potenciales (y es legal la posesin y
uso de esta informacin), se puede informar directamente a estos
usuarios del lanzamiento del sitio. Otro mecanismo muy til es la

promocin a travs del envo de mensajes a listas de correo

relacionadas temticamente con el sitio web.
6. Mantenimiento y seguimiento
Un sitio web no es una entidad esttica, es un objeto vivo cuyos contenidos
cambian; cuya audiencia, necesidades y perfiles cambian, y que por lo tanto
requiere de continuos rediseos y mejoras.
Estos rediseos deben ser muy sutiles, no se puede cambiar el aspecto y
diseo de forma drstica de un da para otro, pues aunque estos cambios estn
fundamentados en problemas de usabilidad descubiertos post-lanzamiento, los
cambios pueden resultar dramticos para los actuales usuarios que ya estaban
acostumbrados y familiarizados con el actual diseo.
Los problemas de uso no detectados durante el proceso de desarrollo pueden
descubrirse a travs de varios mtodos, principalmente a travs de los
mensajes y opiniones de los usuarios, y su comportamiento y uso del sitio.
6.1. Opiniones de los usuarios
Esta informacin puede ser obtenida de forma pasiva - a travs de los
mensajes enviados por los usuarios acerca de problemas que han tenido con el
uso del sitio - o de forma activa - por medio de cuestionarios y encuestas
realizadas sobre la audiencia -.
Las opiniones expresadas por los usuarios indican posibles problemas de
usabilidad, pero no son en s mismas la respuesta a estos problemas. Por
ejemplo, si un usuario enva un email preguntando por qu desde la home page

no encuentra un enlace al recurso X, no significa que debamos implementar

este enlace, sino que posiblemente el recurso X sea poco visible o de difcil
localizacin.
Igualmente, en los cuestionarios no se deben hacer preguntas del tipo
"Preferira que el diseo fuera de tal forma?", sino del tipo "Ha tenido algn
problema para localizar el recurso X?" "Le ha resultado fcil el uso de la
herramienta X?". Los resultados de los cuestionarios no indican la usabilidad
del sitio, sino la satisfaccin del usuario. Si la satisfaccin es baja, habr que
mejorar la usabilidad.
6.2. Comportamiento del usuario y uso del sitio
Una vez que el sitio web ha sido lanzado y es usado diariamente, tenemos a
nuestra disposicin una nueva fuente de informacin sobre el comportamiento
del usuario: Los ficheros "log".
Estos, son extensos ficheros de texto plano que genera el servidor web, y en
los que se registra cada una de las peticiones de pginas realizadas por los
clientes al servidor.
Por cada peticin del cliente al servidor se suele registrar la siguiente
informacin:

Direccin IP del cliente

Identidad del usuario (para sitios con identificacin)

Password de acceso (para sitios con identificacin)

Fecha y hora de la peticin

Mtodo

Path o directorio de la pgina en el servidor

Cdigo que indica si la peticin ha sido resuelta correctamente o no

Nmero de bytes trasferidos entre cliente y servidor

Pgina desde la que se pide el archivo al servidor (puede ser una URL
interna si a la pgina se llega por un enlace del mismo sitio web, o
externa, en el caso de que sea a travs de otro sitio web)

Informacin sobre el agente software (navegador) del cliente

A travs del anlisis de los ficheros logs se pueden responder preguntas como:
quin usa el sitio? Cundo lo usa? Qu pginas suelen ser las ms
visitadas? Desde qu pginas se llega? Qu trminos utiliza el usuario para
interrogar al buscador interno?...
Se trata realmente de una informacin muy valiosa que correctamente
analizada (normalmente ayudndonos de software especfico), puede servirnos
para la toma de decisiones sobre el rediseo en sitios web implementados.