Page 1

Desarrollo portal web FundaciĂłn Fundap www.fundacionfundap.org

01/09/2015 Desarrollo y ConsultorĂ­a Mint


Tabla de contenido DESARROLLO DE PORTAL WEB FUNDACIÓN FUNDAP ............................................... 1 Investigación identidad Corporativa. .................................................................................. 1 Investigación Identidad grafica ....................................................................................... 1 Diseño de la imagen para web........................................................................................... 3 Planificación ...................................................................................................................... 5 Maquinización ................................................................................................................ 5 Diagramación ................................................................................................................. 5 ADAPTACIÓN DE SERVICIOS ......................................................................................... 6 Pago Online ....................................................................................................................... 6 Cliente de comunicación VoIP ........................................................................................... 6 Servicio de Microblogging .................................................................................................. 6 Sitio web de redes sociales................................................................................................ 7 SERVICIOS DE VALOR AGREGADO ............................................................................... 8 Configuración cuenta de Gmail ...................................................................................... 8 Configuración Paypal ..................................................................................................... 8 Configuración Facebook ................................................................................................ 8 Configuración Twitter ..................................................................................................... 8 ALOJAMIENTO WEB ...................................................................................................... 10 Selección de dominio y Hosting ....................................................................................... 10 Pasos de acceso al hosting ............................................................................................. 10 Administración del dominio .............................................................................................. 10

i


DESARROLLO DE PORTAL WEB FUNDACIÓN FUNDAP Investigación identidad Corporativa. La Fundación de apoyo a la Comunidad - fundap es una entidad sin ánimo de lucro el Departamento del Cauca en temas relacionados con la Salud y la Educación buscando afrontar las problemáticas biopsicosociales y de falta de organización de las comunidades más pobres de la región. En sus inicios la Fundación de apoyo a la Comunidad - fundap comenzó a trabajar proyectos y propuestas en consultoría para las áreas de la ingeniería, Arquitectura, producción agrícola y emprendimiento.

Investigación Identidad grafica Los avances de identidad gráfica, colores, fuentes y demás diseños suministrados proveyeron como suministros: Imagen 1; Fondo, colores y formas.

Imagen 1. Fondo, colores y formas. Este fondo no se usa porque no permite resaltar muy bien los textos e imágenes, está saturado de colores con 8 gamas de azul que saturan y repelen la aceptación del lector, obligando a solucionar este problema redefiniendo y buscando alternativas.

1


Imagen 2. Manejo de fotografías, tipos y fuentes de letra. Las fotografías e imágenes en escala de grises y con una sombra azul si bien modifican la precepción de la una fotografía normal no resaltan la importancia y el apoyo que pueden ser las fotografías lo que obliga a retocar el concepto.

Imagen 3. Identidad: Marca, logo, slogan de la fundación fundap. 2


Diseño de la imagen para web Para efectos de simplificar y tener una aceptación de usuario web, se simplifico a dos colores básicos azul y gris y la combinación de estos de manera que alcanzara un sentido armónico visual.

Imagen 4. Identidad redefinida para web: Marca, logo, slogan de la fundación fundap.

Imagen 5. Identidad web: icono/logo de la fundación fundap. 3


Integración con la imagen web: afín de integrar armónicamente se definió la identidad de imagen web sobre dos colores azul y gris en un concepto de organización, de pulcritud de grandeza: otorgándole un sentido corporativo fresco. Apoyado en una galería de imágenes que realzaran ese concepto se define en la Imagen 6 la nueva identidad.

Imagen 6. Identidad web fundación fundap.

De fondo se utilizó una imagen de un plano de ingeniería civil, arquitectura para resaltar los desarrollos en infraestructura, con una imagen de galería como lo muestra la Imagen 7.

Imagen 7. Imagen de fondo para el sitio web 4


Planificación Se ha planificado que el portal web tenga la estructura de navegación suficiente para presentarse como un broshure de la misma con 4 ejes fundamentales.    

Inicio para dar una ambientación de la fundación fundap Quiénes somos donde presentamos la identidad corporativa de manera simple. Qué hacemos donde se presenta lo que hemos hecho, tenemos experiencia, estamos en capacidad de hacer y que nos define. Donaciones un espacio que sería el banner de “contactos”, donde va la información propia de contactos pero se otorga relevancia a Donaciones por ser un servicio que la fundación fundap desea resaltar en pro de favorecer el recaudo para el cumplimiento misional de sus objetivos y proyecciones.

Maquinización La maquinización de la estructura de navegación es definida en los siguientes términos:  

Inicio Quiénes somos o Misión o Visión o Valores Qué hacemos o Consultoría o Elaboración o Ejecución Donaciones

Diagramación La diagramación de páginas web se diagrama a dos columnas para creación y distribución de textos, imágenes, aplicativos y servicios.

Imagen 8. Diagramación de página web

5


ADAPTACIÓN DE SERVICIOS Los servicios considerados para el requerimiento de esta página web en su orden fueron:

Pago Online Integración con medio de pago Online: el medio de pago definido por el cliente fue Paypal, un anuncio de manejo de paypal en la página de inicio, Imagen 9. y un botón de pagos paypal en la página de donaciones, Imagen 10.

Imagen 9. Anuncio de manejo de Paypal en la página de inicio

Imagen 9. Botón de pagos Paypal en la página de donaciones

Cliente de comunicación VoIP Integración con medio comunicaciones tipo chat de mensajería instantánea, vos, videoconferencia: Skype permite comunicaciones de texto, voz y vídeo sobre Internet (VoIP).

Imagen 10. Botón Skype

Servicio de Microblogging Integración con medio de posicionamiento online tipo miniblogger, integración de widget de la cuenta de twitter.

6


Imagen 10. Botón Twitter.

Sitio web de redes sociales Integración con medio de mensajería y red social para integrar al lector con la fundación fundap, divulgar y posicionar la marca de la fundación fundap en los medios de aceptación masiva. La imagen 11 muestra el widget de Facebook, de la cuenta de la fundación fundap.

Imagen 10. Botón Facebook.

7


SERVICIOS DE VALOR AGREGADO Como dato la fundación fundap proveer como E-mail de f.fundap1410@gmail.com, para efectos de la integración con servicios se crea:

contacto

Configuración cuenta de Gmail El correo electrónico en Gmail, así: E-mail: fundaciónfundap@gmail.com Clave: fecha de representación legal.

Configuración Paypal Cuenta de paypal, así: E-mail: fundaciónfunda@gmail.com Clave: Bancar__

Configuración Facebook Cuenta de Facebook, perfil y página de Facebook con su respectiva imagen corporativa, así: E-mail: fundaciónfunda@gmail.com Clave: fecha de representación legal

Imagen 11. Página y perfil de Facebook.

Configuración Twitter Cuenta Twitter: apertura y configuración de la cuanta de Twitter con la integración de la imagen corporativa E-mail: fundaciónfundap@gmail.com Clave: fecha de representación legal

8


Imagen 12. Perfil de Twitter de la fundaciรณn fundap

9


ALOJAMIENTO WEB Selección de dominio y Hosting Para efectos de hosting y adquisición de dominio para la página web se escogió y compro los servicios de Hostinger Colombia, www.hostinger.co, un servicio muy favorable entre los cotizados, para efectos se abrió una cuenta con el usuario validado como cliente de Gmail.

Pasos de acceso al hosting Paso1. Inicia sesión en un navegador con la cuenta de Gmail <f.fundap1410@gmail.com> y la clave de esta cuenta. Paso2. En el mismo navegador abrir www.hostinger.co Paso 3. Para ingresar tiene dos opciones, elegiremos la de validarte, con dos opciones cuenta de Facebook o de Gmail, escoges gmail y das clic en esa opción, si te piden nombre de cuenta colocas f.fundap1410@gmail.com y acceder con cuenta de gmail, e inmediatamente de dará el acceso a la página.

Imagen 13. Cuenta de administración de dominio y hosting

Administración del dominio Los datos para administrar la cuenta de usuario están allí dentro de ese portal, lo datos más relevantes para administrar la página web: www.fundacionfundap.org son los datos de acceso al ftp, que se muestran en la Imagen 14. Para cargar, actualizar o modificar los daros de la página web con tu cliente ftp favorito, en este caso utilizamos el Filezilla.

10


Imagen 14: información servidor FTP

Para efectos de mejor manejo, adjuntamos la tabla resumen, a continuación. Host FTP

ftp.fundacionfundap.org

IP FTP

185.28.21.94

Puerto FTP

21

Usuario FTP

u420035130

Contraseña FTP

••••••••••

Carpeta dónde Cargar Archivos

public_html

¿Olvidaste tu contraseña FTP?

Cambiar contraseña de la cuenta

Clientes FTP recomendados

SmartFTP o FileZilla

11

Desarrollo de portal web fundación fundap  
Read more
Read more
Similar to
Popular now
Just for you