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 (Ofcina 701) | Bogot, Colombia
Telfono 283 85 21 | Celular 301 336 6265
Propuesta de conceptualizacin, diseo y desarrollo de sitio web
Memoria Visual + 1
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 conficto 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 identifcar 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 fnales;
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
Propuesta de conceptualizacin, diseo y desarrollo de sitio web
Memoria Visual + 2
lleva el nombre de Cuaderno de Notas. En el ao
2008 desarrollamos el sistema de informacin de
Proyecto Monitor.
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 flosofa
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.
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
desarrollo en internet de acuerdo con sus planes
de Comunicacin y Mercadeo. Esta informacin
permite redactar una lista de deseos..
Una forma de potenciar los resultados de este
ejercicio es identifcar y perflar en detalle a
los diferentes pblicos del sitio web, y tener en
mente en el momento de plantear los deseos sus
necesidades particulares.
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
Temas ****
INTRO-
DUCCIN*
TEMAS
Presentacin
COOPERA-
CION Y
APOYO
NOTICIAS
DIARIO DE
CAMPO
MULTIMEDIA
SITUACIN
ACTUAL
PROCESOS
Instituciones
Artculos
Sitios de inters
(pueden ser al mismo
sitio web)
Acciones de Equitas
Abstract
Fuente* pueden ser
ajenas a Equtias
Hechos (Cifras, Anlisis,
Mapas)
Abstract
Lugar (Municipio)
Mapas
Fecha
Timeline
Poblacin afectada
Vnculo
Medio
Accin*****
Abstract
Ejemplos
Herramientas para el
ingreso de datos y/o el
envo de informacin
Proceso
Abstract
Instituciones
Formularios******
Vnculos
Galeras
Piezas
Personajes
* 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.
Escoger
perl **
** 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:
1. Familiares de desaparecidos
2. Funcionarios de ONGs o del EStado
3. Agencias de Cooperacin Internacional
4. Pblico en general interesado en el conflicto colombiano.
PRINCIPAL
***
*** 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.
INSTITU-
CIONAL
Noticia
Abstract
Fuente
Vnculo
Quines somos?
Qu hacemos?
**** 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
Descripcin de procesos y
trmites ante otras
instituciones del Estado
Abstract
Instituciones
Formularios******
Vnculos
Publicaciones
Patronato
****** Ejemplos de las
posibles acciones son:
1. Registrar datos
2. Hacer una donacin
Informes
reas
equitas.org.co
Arquitectura de Informacin
Memoria Visual - Version 1
Julio de 2008
Cabezote
Actividades que el usuario
podr realizar en cada artculo.
Copyright
Crditos
Privacidad
A los que se registren.
Contctenos,
datos de contacto
Regstrese
Buscador
Newsletter
en HTML
Comentarlo
Envar a un amigo
(Postal si son
imgenes)
FAQ
Crditos
Pie
Equipo
Argentino de
Antropologa
Forense
INCLUIR en todas las pginas del sitio
Vnculos
Proyecto
Ronegro
Logos
Entidades
FInanciadoras
Error
NO
SI
Directorio
EXTRANET
Comunicaciones internas
Actas
Tareas
Documentos
Gastos
Agenda
Ejemplo de Arquitectura de Informacin
Propuesta de conceptualizacin, diseo y desarrollo de sitio web
Memoria Visual + 3
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 grfco general, el
tratamiento de los textos, las fotografas, las tablas
y las ilustraciones. Este desarrollo grfco se
basar en las certezas conceptuales que arrojen las
tipo_institucion
tema obra
autor
pregunta
coleccion
institucion
tipo_obra
trmino
evento
tema_id
vinculo
obra_id
autor_id
tipo_institucon_id
coleccion_id
pregunta_id
galera
comentario
tipo_galeria
vinculo_id
evento_id
galeria_id
comentario_id
institucion_id
trmino_id
tipo_obra_id
tipo_galeria_id
usuario usuario_id
nombre
descripcion
nombre_eng
descripcion_eng
postal postal_id
presentacin
presentacion_eng
nombre_esp
nombre_eng
tipo_pregunta tipo_pregunta_id
texto
titulo
titulo
nombre
descripcion
titulo_eng
titulo_eng
nombre
perfil
nombres
fecha_nacimiento
apellidos
doc_identidad
sexo
telefono
direccion_postal
tipo_vinculo tipo_vinculo_id
email
pedido pedido_id
presentacin
nombre
presentacin_eng
nombre_eng
nombre
nombre
nombre
nombre
amigo_id
apellido
perfil
nombre
email
pregunta
texto_pregunta_eng
respuesta
texto_respuesta_eng
nombre
significado
titulo
nombre_remitente
email_remitente
texto
nombre
nombre
relacin
m 1
relacin
m 1
foto foto_id
titulo
pie
pie_eng
titulo_eng
fecha
amigo
direccion
telefono
email
fax
url
presentacion
presentacion_eng
fecha_publicacion
fecha_recibo
fecha_publicacion
descripcion
descripcion_eng
presentacin
presentacin_eng
aprobado
aprobado
email
investigador investigador_id
tipo_investigador tipo_investigador_id
nombre
educolombia.org
Entity relationship model
Version 1 - Agosto 1 de 2005
relacin
m 1
relacin
m
relacin
m 1
relacin
m
relacin
1
1
1
m
relacin
m 1
relacin
1 m
relacin
1 m
relacin
1
1
relacin
m 1
relacin
1 m
relacin
m
relacin
1
1 m
relacin
m 1
relacin
m 1
relacin
m
m
relacin
m
1
item item_id
pais
peso
inventario inventario_id
+ descriptores tcnicos
nombre
perfil
direccion
telefono
email
fax
url
celular
zip
pais
zip
pais
idioma
artculo artculo_id
titulo
abstract
titulo_eng
abstract_eng
contenido
contenido_eng
fecha_publicacion
aprobado
relacin
m m
por desarrollar
tipo_evento tipo_evento_id
nombre
relacin
m 1
relacin
m m
relacin
m m
relacin
m m
proyecto
proyecto_id
nombre
descripcion
descripcion_eng
nombre_eng
relacin
m
m
oferta
oferta_id
titulo
titulo_eng
descripcion_eng
descripcion
relacin
m
1
relacin
m
1
Ejemplo de Modelo Relacional de Datos
Ejemplo de Diseo de Interfaz
Propuesta de conceptualizacin, diseo y desarrollo de sitio web
Memoria Visual + 4
anteriores etapas de esta propuesta, el inters es
narrar el sitio web en una interfaz grfca.
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 defnan 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.
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 modifcar las aplicaciones pertinentes
para cada usuario, sin necesidad de conocimientos
especializados en Internet o aplicaciones de
software diferentes a un navegador.
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
Pgina de Ingreso al manejador de contenido
Edith con men de edicin activo
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.
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.
Publicar versin Beta
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 identifquen las
difcultades e inconsistencias que el desarrollo
Propuesta de conceptualizacin, diseo y desarrollo de sitio web
Memoria Visual + 5
(aplicacin por aplicacin) pueda tener con las
prcticas de uso, los procesos y las expectativas de
los usuarios fnales.
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 fnal 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 grfcos 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, identifcadas de
acuerdo con su fnalidad.
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 efciente La efcacia 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 especifcado 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 fnales.
Propuesta de conceptualizacin, diseo y desarrollo de sitio web
Memoria Visual + 6
Confdencialidad
Es claro que toda la informacin que se recopile
es propiedad exclusiva del cliente y ser entregada
a l a la fnalizacin del mismo. Memoria Visual
se compromete a no exponer esta informacin a
terceros.
Derechos de autor
Los desarrollos especfcos 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 fnal.
Alcance de la propuesta
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 frma 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 especifcaciones:
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
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 ofcial 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 benefcio 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 fnal de $2000.000 + IVA (16%)
al fnalizar el periodo de soporte.
Garanta y Soporte
La garanta es de seis meses a partir de la fecha
de entrega del desarrollo. Incluye modifcaciones
por eventuales imperfectos que hagan el material
desarrollado no funcional y por incumplimiento de
la especifcacin 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 modifcaciones 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.
Modifcaciones y nuevas
especifcaciones
Las modifcaciones posteriores a las aprobaciones
parciales por parte del cliente y las nuevas
especifcaciones 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.