propuesta de desarrollo web

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


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


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


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


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.


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.

propuesta de desarrollo web

Documents