Propuesta de conceptualización, diseño y desarrollo de un portal

Mayo 15 de 2012
Propuesta de conceptualización, diseño y desarrollo
de un portal web para la Compañía de Jesús en Colombia
Presentada a César Casas, S.J.
www.memoriavisual.com | [email protected]
Calle 13 No. 7 - 90 (Oficina 701) | Bogotá, Colombia
Teléfono 283 85 21 | Celular 301 336 6265
Propuesta de conceptualización, diseño y desarrollo de sitio web
Presentación
Un sitio web es más que el espacio en el que se
presentan los contenidos y servicios que ofrece
una organización, más que su sola presencia
en la internet. La misión de un sitio web
supera la documentación de las actividades de
una organización ó la traducción de piezas de
comunicación pensadas para otros medios a
un nuevo medio. Un sitio web es un espacio de
interacción, un sitio web es un espacio social.
Receta
El desarrollo con éxito de un sitio web se da gracias
a la intervención de varios ingredientes:
El concepto, el de mayor importancia, nace
de la necesidad de dar solución a un problema o
necesidad, no de uno o de la organización que uno
representa, mas si de los clientes o usuarios de la
organización; de forma que el sitio y sus servicios y
contenidos serán pertinentes para ellos.
La tecnología, que es la suma de decisiones
referentes al desarrollo del sitio; esto incluye
escoger
plataformas,
funcionalidades,
herramientas,
proveedores,
lenguajes
de
programación, 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 inversión en tiempo.
La planeación, no todo puede hacerse en la
primera versión 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 adición de nuevos contenidos y
servicios en el futuro.
La documentación, las reuniones de planeación,
las entrevistas a los usuarios, las entregas de
avances en el desarrollo, las sesiones en las que
se presta atención 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 interacción, aún así el proceso de diseño
y desarrollo es externo a la organización, la
conceptualización del sitio web (investigación,
documentación, evaluación de prototipos) tiene
lugar en la organización. 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 solución 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 evaluación y ajustes, esto le permite
a Memoria Visual prestar atención al nivel del
detalle para identificar y hacer los ajustes que se
consideren necesarios. Este seguimiento se realiza
en dos momentos: primero en la evaluación
minuciosa de la versión beta con usuarios finales;
y segundo en la garantía 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 comunicación, 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 creación colectiva, como
un producto “natural”, en el que se han tenido
en cuenta sus inquietudes, y en el que se están
esperando sus aportes.
El diseño, 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 propósito de comunicar
los mensajes y ofrecer los servicios que se desean.
Experiencia
En el año 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 Lápiz de Acero 2003 de la
revista Proyecto Diseño.
En el año 2005 desarrollamos la primera versión
de Edith, nuestro manejador de contenido para
sitios Web, implementado en 12 proyectos para
diversos clientes.
En el año 2006 empezamos a explorar nuevas
posibilidades en la gestión de bases de datos
en proyectos colaborativos desarrollados por
nuestros clientes, un resultado fue el desarrollo
del sistema de información para la Fundación
Colombia para la Educación y la Oportunidad, que
Memoria Visual +
1
Propuesta de conceptualización, diseño y desarrollo de sitio web
equitas.org.co
* Al entrar al sitio se cargará un mensaje de introducción realizado en
Flash o HTML dinámico (de acuerdo con la configuración de cada
equipo). El mensaje de bienvenida podrá ser un aleatorio entre varios
mensajes, ó uno particular de acuerdo con los acontecimientos que
estén ocurriendo.. El mensaje generará un cookie de forma que no
sera visto por personas que ya hayan visitado el sitio.
INTRODUCCIÓN*
Arquitectura de Información
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 sóla vez. El
usuario una vez haya ingresado podrá cambiar de péfil.
Los perfiles propuestos son:
Escoger
perfil **
1.
2.
3.
4.
Actividades que el usuario
podrá realizar en cada artículo.
Comentarlo
Áreas
¿Quiénes somos?
Acciones de Equitas
Abstract
¿Qué hacemos?
Fuente* pueden ser
ajenas a Equtias
Patronato
Vìnculo
TEMAS
Temas ****
Presentación
Publicaciones
Informes
Abstract
**** El sistema permitirá la
fácil adición de temas, entre
ellos se encuentran:
1. Contexto del conflicto
colombiano
2. Legislación en Colombia
3. Legislación Internacional
4. Tratados
Artículos
Sitios de interés
(pueden ser al mismo
sitio web)
Personajes
Instituciones
Fuente
Copyright
Buscador
Regístrese
Créditos
FAQ
Medio
Abstract
Lugar (Municipio)
–Mapas–
Fecha
–Timeline–
Población afectada
Newsletter
en HTML
Proceso
Piezas
Abstract
Instituciones
COOPERACION Y
APOYO
Formularios******
****** Ejemplos de las
posibles acciones son:
1. Registrar datos
2. Hacer una donación
Acción*****
Ejemplos
Vínculos
Descripción de procesos y
trámites ante otras
instituciones del Estado
Herramientas para el
ingreso de datos y/o el
envío de información
Abstract
Instituciones
NO
EXTRANET
Hechos (Cifras, Análisis,
Mapas)
A los que se registren.
PROCESOS
Galerías
Vìnculo
SITUACIÓN
ACTUAL
Contáctenos,
datos Créditos
de contacto
Privacidad
MULTIMEDIA
Abstract
Noticia
Cabezote
Logos
Entidades
FInanciadoras
Equipo
Argentino de
Antropología
Forense
Envíar a un amigo
(Postal si son
imágenes)
NOTICIAS
DIARIO DE
CAMPO
INSTITUCIONAL
Pie
Vínculos
Proyecto
Ríonegro
Familiares de desaparecidos
Funcionarios de ONGs o del EStado
Agencias de Cooperación Internacional
Público en general interesado en el conflicto colombiano.
*** El orden de los módulos presentado a continuación NO representa
una jerarquía de los mismos, y es puramente casual al diseño en este
espacio reducido. Así mismo los nombres propuestos no son finales y
sólo se utilizan para designar una unidad de contenido específica.
PRINCIPAL
***
INCLUIR en todas las páginas del sitio
Error
Formularios******
Vínculos
SI
Agenda
Directorio
Comunicaciones internas
Actas
Tareas
Documentos
Gastos
Ejemplo de Arquitectura de Información
lleva el nombre de Cuaderno de Notas. En el año
2008 desarrollamos el sistema de información de
Proyecto Monitor.
desarrollo en internet de acuerdo con sus planes
de Comunicación y Mercadeo. Esta información
permite redactar una lista de deseos..
En el momento nos encontramos explorando
nuevas plataformas (móviles), y trabajando en
desarrollos de sistemas de información, y sitios
web integrados, que siguen la misma filosofía
e integran nuestra experiencia de varios años
en gestión de contenidos y un nuevo campo de
exploración que por ahora llamamos: espacios de
gestión social.
Una forma de potenciar los resultados de este
ejercicio es identificar y perfilar en detalle a
los diferentes públicos 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 reunión de información con un comité
designado por el cliente se estudian los servicios,
contenidos y productos que la organización
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 documentación de
procesos para ser integrados al desarrollo.
Arquitectura de información
Es un documento en el que Memoria Visual
presenta una asesoría en comunicación 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 +
2
Propuesta de conceptualización, diseño y desarrollo de sitio web
peso
nombre_eng
descripcion_eng
+ descriptores técnicos
obra_id
m
obra
descripcion
m
m
nombre_eng
nombre_esp
m
presentacion_eng
perfil
telefono
titulo_eng
descripcion_eng
1
relación
m
m
presentación
1
relación
coleccion
coleccion_id
url
tema_id
tema
relación
nombre
1
nombre_eng
presentación_eng
presentación
relación
presentacion_eng
1
relación
nombre
presentacion
m
m
nombre
email
direccion
fax
investigador
investigador_id
perfil
zip
telefono
nombre
celular
fax
direccion
pais
url
m
institucion
institucion_id
tipo_obra_id
tipo_galeria_id
m
relación
pais
m
relación
tipo_obra
tipo_galeria
relación
1
nombre
nombre
email
1
relación
oferta_id
m
m
titulo
1
relación
tipo_investigador
tipo_investigador_id
tipo_institucion
tipo_institucon_id
tipo_vinculo
tipo_vinculo_id
foto
foto_id
nombre
nombre
oferta
descripcion
titulo_eng
presentación_eng
fecha_publicacion
galería
galeria_id
titulo
m
1
relación
m
presentación
relación
1
m
relación
m
relación
m
1
titulo
aprobado
descripcion
fecha
evento_id
1
doc_identidad
telefono
direccion_postal
zip
m
relación
fecha_publicacion
fecha_nacimiento
usuario
nombres
pais
apellidos
idioma
pie_eng
pie
evento
nombre
usuario_id
nombre
titulo_eng
1
1
autor
autor_id
m
relación
m
1
relación
nombre
1
m
relación
comentario_id
comentario
m
relación
fecha_recibo
1
sexo
1
email
apellido
perfil
email
m
relación
postal
postal_id
m
relación
titulo
aprobado
nombre_remitente
email_remitente
texto
1
relación
texto
1
amigo
amigo_id
término
término_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
m
respuesta
artículo_id
artículo
relación
m
1
relación
m
relación
descripcion
contenido
descripcion_eng
1
1
educolombia.org–
proyecto_id
nombre
nombre_eng
aprobado
relación
m
titulo
abstract
significado
nombre
m
pregunta
m
relación
Entity relationship model–
Version 1 - Agosto 1 de 2005
m
por desarrollar
pedido_id
nombre
nombre
pedido
item_id
item
inventario_id
inventario
proyecto
Ejemplo de Modelo Relacional de Datos
sean fácilmente ubicados por el visitante y no se
presente información redundante o que no cumpla
las expectativas que se plantean al visitante.
Se entregará un documento de Arquitectura de
Información, que proporciona una idea clara del
proyecto a desarrollar y se convierte en una carta
de navegación para todos los actores del proceso.
Diseño de la base de datos
Se diseña el modelo de la base de datos a emplear,
y se establecen las diferentes tablas, la información
a capturar en cada una y las relaciones que tendrán
entre ellas. Para realizar este trabajo se hará
una evaluación en detalle de las fuentes de datos
actuales, de forma que el modelo a desarrollar
integre el mayor porcentaje posible de datos ya
existentes.
Diseño de interfaz
Cada categoría de pantalla será traducida en una
interfaz, que es la cara que la página en particular
y el sitio web en general va a tener para el usuario.
Aquí se propone cómo va a interactuar el usuario
con el sitio web, el manejo gráfico general, el
tratamiento de los textos, las fotografías, las tablas
y las ilustraciones.
Este desarrollo gráfico se
basará en las certezas conceptuales que arrojen las
Ejemplo de Diseño de Interfaz
Memoria Visual +
3
Propuesta de conceptualización, diseño y desarrollo de sitio web
anteriores etapas de esta propuesta, el interés es
“narrar” el sitio web en una interfaz gráfica.
Desarrollo de aplicaciones
Se traducen los prototipos de página desarrollados
en el diseño de la interfaz en páginas HTML y
luego en aplicaciones PHP que leerán los datos
necesarios en la base de datos.
Una segunda aplicación es el motor de búsqueda
que consultará el banco de artículos, por los
parámetros que se definan en el diseño de la base
de datos.
Implementación del manejador
de contenidos Edith
Edith permitirá la entrada de nuevos textos y la
edición de los ya ingresados al sitio web, también la
publicación de fotografías y documentos anexos; la
relación temática de los contenidos y destacar los
contenidos de interés en las diferentes interfaces
del sitio a los usuarios.
Página de Ingreso al manejador de contenido
administrador del sitio quiere cambiar un texto,
sólo tiene que seleccionarlo y editarlo como en
cualquier aplicación de texto, para cambiar una foto
sólo debe hacer clic sobre ella o el espacio que esta
ocupa y seleccionar una foto de la librería que se
despliega, cada página del sitio web tiene un menú
de opciones de edición disponible, de acuerdo con
los contenidos y servicios que presenta.
El interés de Memoria Visual es que el uso de Edith
sea intuitivo y tan sencillo que no sea necesaria
una capacitación formal.
Esta aplicación 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 edición de los contenidos se hace
directamente sobre la página web, así: si el
Se publica en el servidor una versión 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 metodología
diseñada para tal efecto se identifiquen las
dificultades e inconsistencias que el desarrollo
Publicar versión Beta
Edith con menú de edición activo
Memoria Visual +
4
Propuesta de conceptualización, diseño y desarrollo de sitio web
(aplicación por aplicación) pueda tener con las
prácticas de uso, los procesos y las expectativas de
los usuarios finales.
Ajustes
De acuerdo con la documentación resultado de
las sesiones de evaluación se realizan los ajustes
necesarios. Y se inicia la escritura, documentación
y diseño de los manuales de usuario.
Publicar versión 1.0
Se publica la versión 1.0 del sitio web y se da por
terminado el desarrollo.
Soporte
Por espacio de 6 meses calendario posterior a la
fecha de publicación de la versión 1.0 del sitio web
–el mismo periodo de la garantía–, se atenderán los
casos de soporte que se generen por incomprensión
en el uso de Edith, fallas en el acceso al sitio web,
ó fallas en el registro de la información en la base
de datos.
Productos a entregarse
1. Un documento de lista de deseos.
2.
Un mapa final de Arquitectura
de Información, que da cuenta de la
organización 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 versión beta con usuarios tipo.
7. Una lista de ajustes a realizarse a la versión
beta.
Parámetros técnicos
Los archivos gráficos maestros se entregarán en el
formato .png de Macromedia Fireworks, o .psd de
Adobe Photoshop; tendrán las guías de corte para
las imágenes y tablas; y todos sus elementos serán
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
estarán debidamente comentados, y seguirán los
parámetros y estándares del World Wide Web
Consortium. No se usarán tags depreciados y
todas las opciones de formato serán dadas por
hojas de estilo.
Todo el código HTML será escrito a mano sin
usar ninguna aplicación de creación de código
WYSIWYG. Lo anterior garantiza un código
ó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 contraseña. Los cookies de los
usuarios y contraseñas serán encriptados y en los
casos en que se considere necesario el acceso de
algunos usuarios puede restringirse a una dirección
I.P. previamente registrada en el sistema.
Equipo
El desarrollo de este propuesta supone la
interacción con un equipo responsable por
parte del cliente, estas reuniones serán siempre
presenciales y tendrán 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 públicos objetivos. También
aprobará cada una de las etapas de desarrollo,
vigilando el cumplimiento de los objetivos
planteados.
Es importante que este equipo no esté integrado
por más de tres personas, quienes tendrán toda la
autoridad para hacer las aprobaciones y solicitar
las correcciones que se consideren necesarias.
Memoria Visual a su vez asignará dos personas en
dedicación no exclusiva al proyecto.
Documentación
Las entregas serán publicadas en el servidor de
pruebas de Memoria Visual, serán evaluadas por
el equipo asesor y comentadas y aprobadas en
reunión con el equipo de Memoria Visual.
Memoria Visual elaborará actas de las reuniones en
la que se consignarán los acuerdos y correcciones
solicitadas. Las decisiones tomadas en estas
reuniones serán siempre finales.
Memoria Visual +
5
Propuesta de conceptualización, diseño y desarrollo de sitio web
Confidencialidad
Es claro que toda la información que se recopile
es propiedad exclusiva del cliente y será entregada
a él a la finalización del mismo. Memoria Visual
se compromete a no exponer esta información a
terceros.
Derechos de autor
Los desarrollos específicos contratados por el
cliente serán de su propiedad (Asesoría), excepto
los desarrollos técnicos y los códigos fuentes
(aplicaciones y manejador de contenido –Edith–
de la aplicación 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%. Aplicación Webmail
Horde, Administración del dominio utilizando
Plesk versión 8.6. Espacio en disco 1 GB. $USD
240 anuales (a partir del segundo año) + IVA
(16%**) Este costo se genera sólo cuando el sitio
sea oficial y será facturado por semestre anticipado
de acuerdo con la TRM del día 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
Conceptualización y diseño
$ 12´000.000 + IVA (16%**)
A ser facturados así:
1. Un anticipo de de $5´000.000 + IVA
(16%) al formalizarse el contrato e iniciarse
el proyecto.
2. Un pago de $5´000.000 + IVA (16%) al
publicarse la versión 1.0 del sitio web.
3. Un pago final de $2´000.000 + IVA (16%)
al finalizar el periodo de soporte.
Esta propuesta no supone el desarrollo de
aplicaciones de comercio electrónico –y los
modelos de seguridad necesarios en ese caso–, la
realización de ilustraciones, la redacción de textos,
o la producción de fotografías, 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 asesoría en el alcance
del medio, el desarrollo de una plataforma para
la gestión de los procesos y la inclusión de la
información entregada por el cliente. A partir de esa
entrega la edición e ingreso de nueva información
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 aceptación 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
año), lo que se considere más 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. Estadísticas en línea AW stats,
backup semanal de la base de datos, garantía de
Garantía y Soporte
La garantía 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 especificación a acordarse en la lista de deseos.
La garantía supone la atención de casos de soporte
que se generen por fallas, inconsistencias en la
funcionalidad del software desarrollado. Una vez
terminada la garantía, los desarrollos, los casos de
soporte, y las modificaciones a los productos serán
considerados como un nuevo desarrollo, y serán
cotizados en una nueva propuesta. Al terminar
este periodo de soporte, este puede extenderse por
semestre con un costo de 2´400.000 por semestre.
Modificaciones y nuevas
especificaciones
Las modificaciones posteriores a las aprobaciones
parciales por parte del cliente y las nuevas
especificaciones generarán costos adicionales que
serán cotizados y facturados de acuerdo con la
complejidad de los mismos, previo acuerdo con el
cliente.
Validez de la oferta:
2012.
Memoria Visual +
6