WEB MDICOS DEL MUNDO

Requerimientos tcnicos modificaciones web

El objeto del presente documento es detallar el diseo y cambios requeridos en la
web de Mdicos del Mundo para la valoracin presupuestaria del trabajo a realizar.
Los cambios son:
1. Maquetacin de nuevo diseo de pginas y elementos claves.
2. Optimizacin web
3. Maquetacin de diseo optimizado para dispositivos mviles

1. MAQUETACIN DE NUEVO DISEO DE PGINAS Y
ELEMENTOS CLAVES

1.1 HOME
http://www.medicosdelmundo.org/

Ver Anexo 1. Boceto Diseo Home (al final documento)
Nota: La cabecera y el pie que aparece en Anexo 1 (Home) se repetir a
lo largo de todas las pginas.
o Redisear tamaos y posiciones de 11 banners (estticos) que sean
homogneos en esttica y colores corporativos (Segn Manual de Identidad
Corporativa adjunto, con el azul MdM como color principal y tonos similares
y complementarios que no difieran mucho de la imagen actual).
o Adecuar el formato de la hoja a la estructura planteada en Anexo 1. Diseo
de botones para estas funciones, con la posibilidad de cambiarlos en el
tiempo de forma autnoma por MdM:

- Hazte socio/a (primer banner derecha)
- Botn Haz una donacin esquina superior derecha.
- Iconos Redes Sociales justo encima de banner a socios
- Te llamamos (botn con un link que redirigir a un servicio de
llamadas o chat gestionado por nuestro service center).
- Campaas (banner superior y lateral derecha)
- Djanos tu email (Pequeo formulario presente en todas las pginas,
abajo a la derecha)
- Agenda (quitar la agenda visible y ponerla para linkar con un banner
a Actividades o Eventos)
- Voluntarzate
- Trabaja con nosotros
- Herencias y Legados

o Incluir un pie con textos+ 9 links, dispuestos en columnas de tres, como se
observa en el Anexo 1. Deben poder ser editables por Mdicos del Mundo.
En este pie irn tambin Iconos de Redes Sociales (con links ampliables,
como el banner que tenemos ahora para RRSS)



1.2 FORMULARIOS

HAZTE SOCIO/A
http://www.medicosdelmundo.org/index.php/mod.formularios/mem.socios/relmenu.115

HAZ UNA DONACIN
http://www.medicosdelmundo.org/index.php/mod.formularios/mem.donaciones/relmenu.116

Ver Anexo 2. Bocetos formularios donaciones (al final del documento)

o Formularios en tres pasos (tres pginas diferentes) a modo de cajas.
o ltima pgina recogida de datos opcionales si quieren desgravar su
donacin.
o Banner fijo de Prefieres que te llamemos
o Imagen fija de Hitos conseguidos
o Imagen con ejemplos de aportacin fijos en cada una de las fases.
(Fijos, en el sentido de presentes durante todo el formulario, pero con la
posibilidad de poder cambiar estas imgenes en el tiempo).
o Incluir icono de formulario seguro.
o Grabar la informacin en BBDD de los campos guardados en las fases 2 y 3
del formulario, separando cada informacin diferente (cada caja) en un
campo separado. Guardar todo en la misma tabla hasta el final, incluso el
ltimo paso de datos adicionales para desgravar.

1.3 EMAILS RESPUESTA AUTOMTICOS
o Programacin de email respuesta automtico para quin no finaliza el
formulario (abandona en alguna fase).
o Nueva maquetacin de emails de agradecimiento de donacin y
confirmacin de alta de socios (Nuevo maquetacin de plantilla e
informacin de datos).
En ambos casos Mdicos del Mundo proporciona el texto y lo que s eespera
es que el proveedor proporcione un diseo de plantilla.

2. OPTIMIZACIN WEB

o Trazar recorrido en los formularios de donaciones para saber en qu fase o
paso lo abandonan.
o Revisar y disminuir los tiempos de carga de las pginas. (Lo idneo est en
0,30 - 0,35 y la nuestra se abre en 0,95). La pgina de Google Analytics
tiene recomendaciones al respecto.
o Incluir cdigo de Google Grants (Adwords) para trazar las visitas recibidas
desde los anuncios patrocinados.
o Incluir cdigo de Youtube para poder ampliar las posibilidades de nuestros
vdeos (por ej. Incluir enlaces que se puedan clicar).

3. DISEO OPTIMIZADO PARA DISPOSITIVOS
MVILES
Programar un layout especfico (ms sencillo, con menos elementos) para
dispositivos mviles. Despus de analizar las pginas ms visitadas, hemos
determinado los apartados que deben ir en el diseo para dispositivos mviles y en
qu orden deben aparecer.
La cabecera (Logotipo, eslogan y men) y el pie de pgina sern fijos en todas las
pginas (tambin en los formularios de donacin).
- Logotipo Mdicos del mundo
- Imagen de campaa actual con link a microsite (autoeditable por MdM,
para que, en momentos de no campaa, se pueda poner una imagen plana).
- Hazte socio/a. Este botn enlaza con el nuevo formulario de socios/as, pero
con los ajustes necesarios para adaptarlo a dispositivos mviles.
- Haz una donacin. Este botn enlazar con el nuevo formulario de
donaciones, con los ajustes necesarios para adaptarlo a dispositivos mviles.
- Sguenos (Iconos y enlaces a nuestras pginas en redes sociales:
Facebook, Twitter, Youtube y Flickr ).
- ltimas noticias (aparecern siempre las dos ltimas noticias de la web
visibles en la pgina de inicio, con su foto y el titular, y un link para ampliar
informacin)
- Ms noticias (enlace a las dems noticias de la web)
- Concenos en un minuto (botn que enlaza con una imagen y una breve
explicacin de lo que es Mdicos del Mundo. Al final del texto, enlaces para
compartir en redes sociales esta info, y un enlace para ir a la web clsica si
se prefiere.)
- Nuestro trabajo (este botn dar lugar a cinco subapartados):
o Cooperacin al desarrollo
o Accin humanitaria/Emergencias
o Inclusin social
o Incidencia poltica
o Movilizacin social
Cada uno de estos subapartados sern botones que se podrn clicar y se
abrir una imagen y un texto hacia abajo (no cambiando a pgina nueva,
sino corriendo los dems botones hacia abajo). Despus del texto, los
iconos para compartir en redes y el enlace a ampliar informacin en la web
clsica.

- Otras formas de colaborar. Siguiendo el mismo esquema que el apartado
Nuestro trabajo, este botn da lugar a cuatro subapartados (botones) con
las diferentes formas de colaborar, que al clicar se abrirn hacia abajo
dejando ver una imagen y un texto, con los enlaces necesarios:
o Voluntarzate (Imagen +texto+enlace a correo electrnico y
desplegable de sedes autonmicas).
o Trabaja con nosotros/as (enlace a pgina externa)
o Herencias y Legados (Imagen+Texto+ telfono y correo contacto)
o Empresas solidarias (Imagen+ texto+ telfono y correo contacto)
- Contctanos. Imagen + texto explicativo de las diferentes formas de
contacto con Mdicos del Mundo, incluyendo telfono 91, direccin de sede
central, enlace a correo electrnico y desplegable de sedes autonmicas.
- Footer. Todas las pginas tendrn un footer con iconos y enlaces a las
redes sociales, con enlace al formulario de socios, a Contctanos, a la web
clsica, a Poltica de Privacidad, , y un botn para volver a la pgina
anterior (excepto en la pgina de inicio, en la que no habr botn de Volver).

Ver Anexo 3. Boceto diseo dispositivos mviles
Para estimar la carga de trabajo se resume lo siguiente:
Habr 5 tipos de pginas en el diseo mvil:
- La pgina de inicio (Home) (1)
- Pginas principales (Concenos en un minuto; Contctanos) que
tienen texto y links.(2 pg)
- Pginas principales con submens (aparece el titular-por ejemplo,
Nuestro trabajo- y botones de submens). (2 pg.)
- Pginas internas submens en la que aparece image+texto+enlaces, y
y la botonera con el resto de submens). (9 pg.)
- Pginas de formularios (2 pg.)

ANEXO 1. BOCETO DISEO HOME
Colores y tipografas corporativos de Mdicos del Mundo, de acuerdo con Manual
de Identidad Corporativa adjuntado, basado en el azul principalmente y que los
dems colores que se utilicen no rompan la lnea de diseo actual.





























ANEXO 2. BOCETOS FORMULARIOS ALTA SOCIO/A Y DONACIONES
Formulario Hazte socio/a colaborador/a

Pantalla 1
















Ciclar en Continuar y pasar a la siguiente pantalla

Pantalla 2 (si son personas fsicas)










Pantalla 2 (sin sin entidades)















En la pantalla 2, guardar datos de las dos pantallas (1y2) al clicar en Continuar,
y pasar pantalla.

Pantalla 3. Datos bancarios.
Si el usuario abandona una vez ya en esta fase, se le enviar el email
automtico ofreciendo soporte para completar el formulario.










Una vez completada esta fase, se enviar un email automtico dando las
gracias y la bienvenida a Mdicos del Mundo.
Pasar a pantalla 4














Formulario Haz una donacin
Pantalla 1
(Con una pestaa Hazte socio/a que linka con Pantalla1 formulario socio/a)












Clicar Continuar y pasar a siguiente pantalla

Pantalla 2














Despus de pantalla 2 grabar datos en bbdd y al clicar en Realizar pago,
conectar con pasarela de pago.
Una vez completada esta fase y realizado el pago, se enviar un email
automtico dando las gracias por la donacin.

Pantalla 3









ANEXO 3. BOCETOS WEB PARA DISPOSITIVOS MVILES
En estos bocetos, los textos que aparecen no son definitivos, son solo para mostrar
los diferentes apartados.
Tampoco estn reflejadas la totalidad de las pginas, solo algunos ejemplos para
mostrar la estructura de las mismas.
A tener en cuenta: Hazte socio/a y Haz una donacin redirigirn a los nuevos
formularios que hayamos diseado para la web clsica, pero adaptados a formato
mvil.

Pgina Inicio

































































































































Diseo atrayente, y con iconos para cada forma de
contacto. Esto es solo un ejemplo muy bsico.