-
Mayo 15 de 2012
Propuesta de conceptualizacin, diseo y desarrollode un portal
web para la Compaa de Jess en ColombiaPresentada a Csar Casas,
S.J.
www.memoriavisual.com | [email protected] 13 No. 7 -
90 (Oficina 701) | Bogot, ColombiaTelfono 283 85 21 | Celular 301
336 6265
-
Propuesta de conceptualizacin, diseo y desarrollo de sitio
web
Memoria Visual + 1
PresentacinUn 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.
RecetaEl 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.
ExperienciaEn 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 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.
ProcesoEl proceso de desarrollo est planteado para dos meseses
calendario y supone el desarrollo de estas etapas:
Lista de deseosEn 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
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.
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 informacinEs 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
NOTICIASDIARIO DE
CAMPOMULTIMEDIA
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
FechaTimeline
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 desaparecidos2. Funcionarios de ONGs o del
EStado3. Agencias de Cooperacin Internacional4. 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 colombiano2. Legislacin en Colombia3.
Legislacin Internacional4. 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
datos2. Hacer una donacin
Informes
reas
equitas.org.coArquitectura de InformacinMemoria Visual - Version
1
Julio de 2008
Cabezote
Actividades que el usuariopodr 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) FAQCrditos
Pie
Equipo Argentino de Antropologa
Forense
INCLUIR en todas las pginas del sitio
Vnculos
ProyectoRonegro
Logos Entidades
FInanciadoras
ErrorNO
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 interfazCada 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
tipo_institucion
temaobra
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
usuariousuario_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
apellidosdoc_identidad
sexo
telefono
direccion_postal
tipo_vinculo tipo_vinculo_id
email
pedidopedido_id
presentacin
nombrepresentacin_eng
nombre_eng
nombre
nombre
nombre
nombre
amigo_id
apellido
perfil
nombreemail
pregunta
texto_pregunta_eng
respuestatexto_respuesta_eng
nombre
significado
titulo
nombre_remitente
email_remitentetexto
nombre
nombre
relacinm 1
relacinm 1
foto foto_id
titulo
piepie_eng
titulo_eng
fecha
amigo
direcciontelefono
email
fax
urlpresentacion
presentacion_eng
fecha_publicacion
fecha_recibo
fecha_publicacion
descripciondescripcion_eng
presentacin
presentacin_eng
aprobado
aprobado
email
investigador investigador_id
tipo_investigador tipo_investigador_idnombre
educolombia.orgEntity relationship modelVersion 1 - Agosto 1 de
2005
relacinm 1
relacinm
relacinm 1
relacinm
relacin
1
1
1
m
relacinm 1
relacin1 m
relacin1 m
relacin
11
relacinm 1
relacin1 m
relacinm
relacin
1
1 m
relacinm 1
relacinm 1
relacin
m
m
relacinm
1
itemitem_id
pais
peso
inventarioinventario_id
+ descriptores tcnicos
nombre
perfil
direccion
telefono
email
fax
url
celular
zip
pais
zip
pais
idioma
artculoartculo_id
titulo
abstract
titulo_eng
abstract_eng
contenido contenido_eng
fecha_publicacion
aprobado
relacinm m
por desarrollar
tipo_evento tipo_evento_idnombre
relacinm 1
relacinm m
relacinm m
relacinm m
proyecto
proyecto_id
nombre
descripcion
descripcion_engnombre_eng
relacinm
m
oferta
oferta_id
titulo
titulo_eng
descripcion_engdescripcion
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 grfica.
Desarrollo de aplicacionesSe 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 manejadorde contenidos EdithEdith 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 modificar 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 BetaSe 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
-
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 finales.
AjustesDe 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.0Se publica la versin 1.0 del sitio web y se
da por terminado el desarrollo.
SoportePor 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 tcnicosLos 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).
SeguridadEl 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.
EquipoEl 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.
DocumentacinLas 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.
-
Propuesta de conceptualizacin, diseo y desarrollo de sitio
web
Memoria Visual + 6
ConfidencialidadEs 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 autorLos 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 propuestaEsta 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 proyectoSe 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.
HospedajeEsta 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
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.
CostosConceptualizacin 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.
Garanta y SoporteLa 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.