Mayo 15 de 2012

Propuesta de conceptualizacin, diseo y desarrollo

de un portal web para la Compaa de Jess en Colombia
Presentada a Csar Casas, S.J.

www.memoriavisual.com | info@memoriavisual.com
Calle 13 No. 7 - 90 (Oficina 701) | Bogot, Colombia
Telfono 283 85 21 | Celular 301 336 6265

Propuesta de conceptualizacin, diseo y desarrollo de sitio web

Presentacin
Un sitio web es ms que el espacio en el que se
presentan los contenidos y servicios que ofrece
una organizacin, ms que su sola presencia
en la internet. La misin de un sitio web
supera la documentacin de las actividades de
una organizacin la traduccin de piezas de
comunicacin pensadas para otros medios a
un nuevo medio. Un sitio web es un espacio de
interaccin, un sitio web es un espacio social.

Receta
El desarrollo con xito de un sitio web se da gracias
a la intervencin de varios ingredientes:
El concepto, el de mayor importancia, nace
de la necesidad de dar solucin a un problema o
necesidad, no de uno o de la organizacin que uno
representa, mas si de los clientes o usuarios de la
organizacin; de forma que el sitio y sus servicios y
contenidos sern pertinentes para ellos.
La tecnologa, que es la suma de decisiones
referentes al desarrollo del sitio; esto incluye
escoger
plataformas,
funcionalidades,
herramientas,
proveedores,
lenguajes
de
programacin, modelos de desarrollo. Cuando
estas decisiones son acertadas, cada desarrollo
complementa al anterior; cuando no lo son se
generan costos adicionales y se hace necesaria una
mayor inversin en tiempo.
La planeacin, no todo puede hacerse en la
primera versin del sitio, pero si se tiene una
idea clara de como ser el sitio web a nivel de
contenido y funcionalidades en el mediano y largo
plazo, se pueden establecer prioridades y etapas
de desarrollo que no entren en conflicto entre si
y que permitan la adicin de nuevos contenidos y
servicios en el futuro.
La documentacin, las reuniones de planeacin,
las entrevistas a los usuarios, las entregas de
avances en el desarrollo, las sesiones en las que
se presta atencin a usuarios tipo haciendo uso de
versiones beta de las aplicaciones en desarrollo.
Este ejercicio de documentar el proceso, permitir
al ser analizado facilitar el proceso de decisiones
sobre el rumbo y tono del desarrollo.
La interaccin, an as el proceso de diseo
y desarrollo es externo a la organizacin, la
conceptualizacin del sitio web (investigacin,

documentacin, evaluacin de prototipos) tiene

lugar en la organizacin. As, es importante
establecer espacios y momentos en los que el equipo
de desarrollo pueda interactuar con los actores de
los proyectos y de esta forma buscar solucin a las
inquietudes que el proceso de desarrollo genera.
El seguimiento, una vez el sitio web desarrollado
empiece a ser utilizado, se inicia una labor
minuciosa de evaluacin y ajustes, esto le permite
a Memoria Visual prestar atencin al nivel del
detalle para identificar y hacer los ajustes que se
consideren necesarios. Este seguimiento se realiza
en dos momentos: primero en la evaluacin
minuciosa de la versin beta con usuarios finales;
y segundo en la garanta del software desarrollado
por espacio de seis meses calendario, tiempo en
el que Memoria Visual da respuesta los casos de
soporte generados por los usuarios del sitio web.
La comunicacin, el ingrediente clave, presente
en todas las etapas y recurrente en todos los
procesos, que permite a los usuarios vencer los
temores y la resistencia al cambio y entender
al sitio web como una creacin colectiva, como
un producto natural, en el que se han tenido
en cuenta sus inquietudes, y en el que se estn
esperando sus aportes.
El diseo, que entendemos como integrar todos
los anteriores elementos, de forma que el sitio y su
funcionalidad sean intuitivos y reconocidos por los
usuarios y respondan al propsito de comunicar
los mensajes y ofrecer los servicios que se desean.

Experiencia
En el ao 2002 iniciamos el desarrollo del sitio
web de Villegas Editores VillegasEditores.com,
proyecto de gran envergadura que nos obsequi
un aprendizaje invaluable. VillegasEditores.com
fue nominado al premio Lpiz de Acero 2003 de la
revista Proyecto Diseo.
En el ao 2005 desarrollamos la primera versin
de Edith, nuestro manejador de contenido para
sitios Web, implementado en 12 proyectos para
diversos clientes.
En el ao 2006 empezamos a explorar nuevas
posibilidades en la gestin de bases de datos
en proyectos colaborativos desarrollados por
nuestros clientes, un resultado fue el desarrollo
del sistema de informacin para la Fundacin
Colombia para la Educacin y la Oportunidad, que
Memoria Visual +

Propuesta de conceptualizacin, diseo y desarrollo de sitio web

equitas.org.co

* Al entrar al sitio se cargar un mensaje de introduccin realizado en

Flash o HTML dinmico (de acuerdo con la configuracin de cada
equipo). El mensaje de bienvenida podr ser un aleatorio entre varios
mensajes, uno particular de acuerdo con los acontecimientos que
estn ocurriendo.. El mensaje generar un cookie de forma que no
sera visto por personas que ya hayan visitado el sitio.

INTRODUCCIN*

Arquitectura de Informacin
Memoria Visual - Version 1
Julio de 2008

** Al final del mensaje se le pedir al visitante escoger un perfil de

usuario que permita presentarle los contenidos de mayor pertinencia y
destacar los que se considere necesarios. El perfil ser guardado en
un cookie por equipo y por lo tanto ser preguntado una sla vez. El
usuario una vez haya ingresado podr cambiar de pfil.
Los perfiles propuestos son:

Escoger
perl **

1.
2.
3.
4.

Actividades que el usuario

podr realizar en cada artculo.

Comentarlo

reas

Quines somos?

Acciones de Equitas
Abstract

Qu hacemos?

Fuente* pueden ser

ajenas a Equtias

Patronato

Vnculo

TEMAS
Temas ****
Presentacin
Publicaciones
Informes

Abstract
**** El sistema permitir la
fcil adicin de temas, entre
ellos se encuentran:
1. Contexto del conflicto
colombiano
2. Legislacin en Colombia
3. Legislacin Internacional
4. Tratados

Artculos
Sitios de inters
(pueden ser al mismo
sitio web)
Personajes
Instituciones

Fuente

Copyright

Buscador
Regstrese

Crditos

FAQ

Medio

Abstract
Lugar (Municipio)
Mapas
Fecha
Timeline
Poblacin afectada

Newsletter
en HTML

Proceso

Piezas

Abstract
Instituciones

COOPERACION Y
APOYO

Formularios******
****** Ejemplos de las
posibles acciones son:
1. Registrar datos
2. Hacer una donacin

Accin*****

Ejemplos

Vnculos

Descripcin de procesos y
trmites ante otras
instituciones del Estado

Herramientas para el
ingreso de datos y/o el
envo de informacin

Abstract
Instituciones
NO

EXTRANET

Hechos (Cifras, Anlisis,

Mapas)

A los que se registren.

PROCESOS
Galeras

Vnculo

SITUACIN
ACTUAL

Contctenos,
datos Crditos
de contacto

Privacidad

MULTIMEDIA

Abstract
Noticia

Cabezote
Logos
Entidades
FInanciadoras

Equipo
Argentino de
Antropologa
Forense

Envar a un amigo
(Postal si son
imgenes)

NOTICIAS
DIARIO DE
CAMPO

INSTITUCIONAL

Pie

Vnculos

Proyecto
Ronegro

Familiares de desaparecidos
Funcionarios de ONGs o del EStado
Agencias de Cooperacin Internacional
Pblico en general interesado en el conflicto colombiano.

*** El orden de los mdulos presentado a continuacin NO representa

una jerarqua de los mismos, y es puramente casual al diseo en este
espacio reducido. As mismo los nombres propuestos no son finales y
slo se utilizan para designar una unidad de contenido especfica.

PRINCIPAL
***

INCLUIR en todas las pginas del sitio

Error

Formularios******
Vnculos

SI
Agenda
Directorio
Comunicaciones internas
Actas
Tareas
Documentos
Gastos

Ejemplo de Arquitectura de Informacin

lleva el nombre de Cuaderno de Notas. En el ao
2008 desarrollamos el sistema de informacin de
Proyecto Monitor.

desarrollo en internet de acuerdo con sus planes

de Comunicacin y Mercadeo. Esta informacin
permite redactar una lista de deseos..

En el momento nos encontramos explorando

nuevas plataformas (mviles), y trabajando en
desarrollos de sistemas de informacin, y sitios
web integrados, que siguen la misma filosofa
e integran nuestra experiencia de varios aos
en gestin de contenidos y un nuevo campo de
exploracin que por ahora llamamos: espacios de
gestin social.

Una forma de potenciar los resultados de este

ejercicio es identificar y perfilar en detalle a
los diferentes pblicos del sitio web, y tener en
mente en el momento de plantear los deseos sus
necesidades particulares.

Proceso
El proceso de desarrollo est planteado para dos
meseses calendario y supone el desarrollo de estas
etapas:

Lista de deseos
En una reunin de informacin con un comit
designado por el cliente se estudian los servicios,
contenidos y productos que la organizacin
ofrece, y las expectativas que tiene de un

Con esta lista en mente, y para cumplir cada uno

de estos deseos, Memoria Visual presentar a el
cliente una propuesta de desarrollo por etapas,
un listado de funcionalidades, y un listado de
requerimientos en contenidos y documentacin de
procesos para ser integrados al desarrollo.

Arquitectura de informacin
Es un documento en el que Memoria Visual
presenta una asesora en comunicacin al evaluar
los contenidos y servicios que el cliente ofrece o
quiere ofrecer a futuro y propone la estructura
del sitio, de forma que los contenidos y servicios
Memoria Visual +

Propuesta de conceptualizacin, diseo y desarrollo de sitio web

peso
nombre_eng
descripcion_eng

+ descriptores tcnicos
obra_id

obra

descripcion

nombre_eng

nombre_esp

presentacion_eng
perfil
telefono

titulo_eng
descripcion_eng

relacin

presentacin

relacin

coleccion

coleccion_id

url

tema_id

tema

relacin

nombre

nombre_eng
presentacin_eng

presentacin

relacin
presentacion_eng

relacin

nombre

presentacion

m
m

nombre

email

direccion

fax

investigador

investigador_id

perfil

zip

telefono

nombre

celular

fax

direccion

pais

url

institucion

institucion_id

tipo_obra_id

tipo_galeria_id

relacin

pais

relacin

tipo_obra

tipo_galeria

relacin
1

nombre

nombre

email

1
relacin

oferta_id

titulo

relacin

tipo_investigador

tipo_investigador_id

tipo_institucion

tipo_institucon_id

tipo_vinculo

tipo_vinculo_id

foto

foto_id

nombre
nombre

oferta

descripcion

titulo_eng
presentacin_eng
fecha_publicacion

galera

galeria_id

titulo

1
relacin

presentacin

relacin

relacin

relacin

titulo

aprobado
descripcion
fecha

evento_id

doc_identidad
telefono
direccion_postal
zip

relacin

fecha_publicacion
fecha_nacimiento

usuario

nombres

pais

apellidos

idioma

pie_eng

pie

evento

nombre

usuario_id

nombre
titulo_eng

autor

autor_id

relacin

relacin

nombre

relacin

comentario_id

comentario

relacin

fecha_recibo
1

sexo
1

email

apellido
perfil

email

relacin

postal

postal_id

relacin

titulo

aprobado
nombre_remitente
email_remitente

texto

1
relacin

texto

amigo

amigo_id

trmino

trmino_id

tipo_pregunta

tipo_pregunta_id

tipo_evento

tipo_evento_id

email

nombre
titulo_eng
descripcion_eng
texto_pregunta_eng
texto_respuesta_eng
titulo_eng
abstract_eng
contenido_eng
fecha_publicacion

vinculo_id

titulo

vinculo

descripcion

pregunta_id

pregunta

respuesta

artculo_id

artculo

relacin
m

relacin

relacin

descripcion

contenido

descripcion_eng

educolombia.org
proyecto_id

nombre
nombre_eng

aprobado

relacin

titulo
abstract

significado

nombre
m

pregunta

relacin

Entity relationship model

Version 1 - Agosto 1 de 2005

por desarrollar

pedido_id

nombre

nombre

pedido

item_id

item

inventario_id

inventario

proyecto

Ejemplo de Modelo Relacional de Datos

sean fcilmente ubicados por el visitante y no se
presente informacin redundante o que no cumpla
las expectativas que se plantean al visitante.
Se entregar un documento de Arquitectura de
Informacin, que proporciona una idea clara del
proyecto a desarrollar y se convierte en una carta
de navegacin para todos los actores del proceso.

Diseo de la base de datos

Se disea el modelo de la base de datos a emplear,
y se establecen las diferentes tablas, la informacin
a capturar en cada una y las relaciones que tendrn
entre ellas. Para realizar este trabajo se har
una evaluacin en detalle de las fuentes de datos
actuales, de forma que el modelo a desarrollar
integre el mayor porcentaje posible de datos ya
existentes.

Diseo de interfaz
Cada categora de pantalla ser traducida en una
interfaz, que es la cara que la pgina en particular
y el sitio web en general va a tener para el usuario.
Aqu se propone cmo va a interactuar el usuario
con el sitio web, el manejo grfico general, el
tratamiento de los textos, las fotografas, las tablas
y las ilustraciones.
Este desarrollo grfico se
basar en las certezas conceptuales que arrojen las

Ejemplo de Diseo de Interfaz

Memoria Visual +

Propuesta de conceptualizacin, diseo y desarrollo de sitio web

anteriores etapas de esta propuesta, el inters es

narrar el sitio web en una interfaz grfica.

Desarrollo de aplicaciones
Se traducen los prototipos de pgina desarrollados
en el diseo de la interfaz en pginas HTML y
luego en aplicaciones PHP que leern los datos
necesarios en la base de datos.
Una segunda aplicacin es el motor de bsqueda
que consultar el banco de artculos, por los
parmetros que se definan en el diseo de la base
de datos.

Implementacin del manejador

de contenidos Edith
Edith permitir la entrada de nuevos textos y la
edicin de los ya ingresados al sitio web, tambin la
publicacin de fotografas y documentos anexos; la
relacin temtica de los contenidos y destacar los
contenidos de inters en las diferentes interfaces
del sitio a los usuarios.

Pgina de Ingreso al manejador de contenido

administrador del sitio quiere cambiar un texto,
slo tiene que seleccionarlo y editarlo como en
cualquier aplicacin de texto, para cambiar una foto
slo debe hacer clic sobre ella o el espacio que esta
ocupa y seleccionar una foto de la librera que se
despliega, cada pgina del sitio web tiene un men
de opciones de edicin disponible, de acuerdo con
los contenidos y servicios que presenta.
El inters de Memoria Visual es que el uso de Edith
sea intuitivo y tan sencillo que no sea necesaria
una capacitacin formal.

Esta aplicacin le permite al usuario ejercer

control total sobre el sitio web, y, de acuerdo con
un sistema de usuarios y privilegios, entrar y editar
contenidos y modificar las aplicaciones pertinentes
para cada usuario, sin necesidad de conocimientos
especializados en Internet o aplicaciones de
software diferentes a un navegador.

Entre los sitios web que actualmente son

administrados utilizando Edith se encuentran:
www.fundacolombia.org, www.villegaseditores.
com, www.erigaie.org, www.equitas.org.co.

El manejador de contenidos de Memoria Visual,

Edith, es singular, no utiliza formularios como
es habitual en los manejadores de la industria,
la entrada y edicin de los contenidos se hace
directamente sobre la pgina web, as: si el

Se publica en el servidor una versin preliminar,

totalmente funcional del sitio web, para su uso a
modo de prueba y en especial para hacer sesiones
de uso en las que utilizando una metodologa
diseada para tal efecto se identifiquen las
dificultades e inconsistencias que el desarrollo

Publicar versin Beta

Edith con men de edicin activo

Memoria Visual +

Propuesta de conceptualizacin, diseo y desarrollo de sitio web

(aplicacin por aplicacin) pueda tener con las

prcticas de uso, los procesos y las expectativas de
los usuarios finales.

Ajustes
De acuerdo con la documentacin resultado de
las sesiones de evaluacin se realizan los ajustes
necesarios. Y se inicia la escritura, documentacin
y diseo de los manuales de usuario.

Publicar versin 1.0

Se publica la versin 1.0 del sitio web y se da por
terminado el desarrollo.

Soporte
Por espacio de 6 meses calendario posterior a la
fecha de publicacin de la versin 1.0 del sitio web
el mismo periodo de la garanta, se atendern los
casos de soporte que se generen por incomprensin
en el uso de Edith, fallas en el acceso al sitio web,
fallas en el registro de la informacin en la base
de datos.

Productos a entregarse
1. Un documento de lista de deseos.
2.
Un mapa final de Arquitectura
de Informacin, que da cuenta de la
organizacin de los servicios y contenidos de
la lista de deseos.
3. Un modelo relacional de datos.
4. Interfaces modelo de las instancias tipo
del sitio web con los usuarios.
6.
Un documento que compendia los
resultados de las evaluaciones que se realicen
de la versin beta con usuarios tipo.
7. Una lista de ajustes a realizarse a la versin
beta.

Parmetros tcnicos
Los archivos grficos maestros se entregarn en el
formato .png de Macromedia Fireworks, o .psd de
Adobe Photoshop; tendrn las guas de corte para
las imgenes y tablas; y todos sus elementos sern
distribuidos en diferentes capas, identificadas de
acuerdo con su finalidad.
El desarrollo se realizar en PHP 5.2, la base de
datos elegida es MySql 4.24, el servidor Web
es Apache.
Los archivos HTML resultantes
estarn debidamente comentados, y seguirn los
parmetros y estndares del World Wide Web
Consortium. No se usarn tags depreciados y

todas las opciones de formato sern dadas por

hojas de estilo.
Todo el cdigo HTML ser escrito a mano sin
usar ninguna aplicacin de creacin de cdigo
WYSIWYG. Lo anterior garantiza un cdigo
ptimo, limpio y eficiente La eficacia de cada
archivo HTML (resultado de las aplicaciones
PHP) ser probada en el servidor, y se validar
su comportamiento en los navegadores mas
utilizados en cada sistema operativo (OSX, Linux
y Windows).

Seguridad
El acceso a Edith en el sitio web ser limitado a
usuarios autorizados con quienes se validar
un usuario y una contrasea. Los cookies de los
usuarios y contraseas sern encriptados y en los
casos en que se considere necesario el acceso de
algunos usuarios puede restringirse a una direccin
I.P. previamente registrada en el sistema.

Equipo
El desarrollo de este propuesta supone la
interaccin con un equipo responsable por
parte del cliente, estas reuniones sern siempre
presenciales y tendrn lugar al hacer entrega del
producto especificado en cada una de las etapas
en que est planteado el desarrollo. Este equipo
retroalimentar todas las etapas del proceso,
aportar ideas desde el conocimiento de la labor
del cliente y de los pblicos objetivos. Tambin
aprobar cada una de las etapas de desarrollo,
vigilando el cumplimiento de los objetivos
planteados.
Es importante que este equipo no est integrado
por ms de tres personas, quienes tendrn toda la
autoridad para hacer las aprobaciones y solicitar
las correcciones que se consideren necesarias.
Memoria Visual a su vez asignar dos personas en
dedicacin no exclusiva al proyecto.

Documentacin
Las entregas sern publicadas en el servidor de
pruebas de Memoria Visual, sern evaluadas por
el equipo asesor y comentadas y aprobadas en
reunin con el equipo de Memoria Visual.
Memoria Visual elaborar actas de las reuniones en
la que se consignarn los acuerdos y correcciones
solicitadas. Las decisiones tomadas en estas
reuniones sern siempre finales.
Memoria Visual +

Propuesta de conceptualizacin, diseo y desarrollo de sitio web

Confidencialidad
Es claro que toda la informacin que se recopile
es propiedad exclusiva del cliente y ser entregada
a l a la finalizacin del mismo. Memoria Visual
se compromete a no exponer esta informacin a
terceros.

Derechos de autor
Los desarrollos especficos contratados por el
cliente sern de su propiedad (Asesora), excepto
los desarrollos tcnicos y los cdigos fuentes
(aplicaciones y manejador de contenido Edith
de la aplicacin web) que son propiedad intelectual
de Memoria Visual. El cliente reconocer los
derechos morales que Memoria Visual tendr
sobre el desarrollo final.

Alcance de la propuesta

tiempo al aire de 99.9%. Aplicacin Webmail

Horde, Administracin del dominio utilizando
Plesk versin 8.6. Espacio en disco 1 GB. $USD
240 anuales (a partir del segundo ao) + IVA
(16%**) Este costo se genera slo cuando el sitio
sea oficial y ser facturado por semestre anticipado
de acuerdo con la TRM del da de la factura.
Nuestro manejador de contenido, Edith, no tiene
costo de licencia, es un beneficio adicional al
contratar este desarrollo con Memoria Visual.

Costos
Conceptualizacin y diseo
$ 12000.000 + IVA (16%**)
A ser facturados as:
1. Un anticipo de de $5000.000 + IVA
(16%) al formalizarse el contrato e iniciarse
el proyecto.
2. Un pago de $5000.000 + IVA (16%) al
publicarse la versin 1.0 del sitio web.
3. Un pago final de $2000.000 + IVA (16%)
al finalizar el periodo de soporte.

Esta propuesta no supone el desarrollo de

aplicaciones de comercio electrnico y los
modelos de seguridad necesarios en ese caso, la
realizacin de ilustraciones, la redaccin de textos,
o la produccin de fotografas, animaciones o
videos.
El contenido del sitio web es responsabilidad total
del cliente, la labor de Memoria Visual en este
aspecto es, aparte de su asesora en el alcance
del medio, el desarrollo de una plataforma para
la gestin de los procesos y la inclusin de la
informacin entregada por el cliente. A partir de esa
entrega la edicin e ingreso de nueva informacin
la har el cliente utilizando el manejador de
contenido Edith.

Inicio del proyecto

Se iniciar el desarrollo del proyecto una vez se
haya recibido una carta de aceptacin formal de
esta propuesta se realice la firma de un contrato
de servicios, y se haya recibido el pago del anticipo
estipulado.

Hospedaje
Esta propuesta supone el hospedaje del sitio web
en el servidor actual del cliente en el servidor
dedicado de Memoria Visual (por espacio de un
ao), lo que se considere ms adecuado, El servidor
a utilizarse debe contar con estas especificaciones:
ha sido contratado con Peer1.com, con sistema
operativo RedHat Enterprise Linux, Servidor
Apache 2.2.1.9, PHP 5.2.6 y bases de Datos en
MySQL 4.2.54. Estadsticas en lnea AW stats,
backup semanal de la base de datos, garanta de

Garanta y Soporte
La garanta es de seis meses a partir de la fecha
de entrega del desarrollo. Incluye modificaciones
por eventuales imperfectos que hagan el material
desarrollado no funcional y por incumplimiento de
la especificacin a acordarse en la lista de deseos.
La garanta supone la atencin de casos de soporte
que se generen por fallas, inconsistencias en la
funcionalidad del software desarrollado. Una vez
terminada la garanta, los desarrollos, los casos de
soporte, y las modificaciones a los productos sern
considerados como un nuevo desarrollo, y sern
cotizados en una nueva propuesta. Al terminar
este periodo de soporte, este puede extenderse por
semestre con un costo de 2400.000 por semestre.

Modificaciones y nuevas
especificaciones
Las modificaciones posteriores a las aprobaciones
parciales por parte del cliente y las nuevas
especificaciones generarn costos adicionales que
sern cotizados y facturados de acuerdo con la
complejidad de los mismos, previo acuerdo con el
cliente.

Validez de la oferta:
2012.
Memoria Visual +