View
22
Download
1
Category
Preview:
Citation preview
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 | info@memoriavisual.comCalle 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
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
fax
urlpresentacion
presentacion_eng
fecha_publicacion
fecha_recibo
fecha_publicacion
descripciondescripcion_eng
presentacin
presentacin_eng
aprobado
aprobado
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
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.
Recommended