www.cococw.

com

www.cococw.com

WE DO THINGS DIFFERENT!
HACEMOS LAS COSAS DIFERENTES

Propuesta Tcnica y Econmica:

Consultoria en diseo grfico y web

laboratorio innovacin - bicu

Por Ing. Francisco Saballos

25/06 /2015

1. La solucin
Se disear y desarrollar para El Laboratorio de Innovacin de la BICU un sitio web que permita a la difusin del
reporte anual 2015, y sea fcil de navegar y administrar, limpio y freso visualmente creativo con las tendencia de
la actualidad que es el diseo plano o Flat Design y el diseo responsivo o Responsive Web Design y creando
previamente la linea visual del mismo.
Se diseara y diagramar dicho informe de tipo folleto con las mismas caractersticas.

2. Caractersticas del sitio web

Flat design o diseo plano
LOGO
Inicio

Nosotros

Noticias

buscar...

Blog

Contacto

FLAT DESIGN
formas geomtricas,
colores planos y
llamativos e iconos
Leer +

Idea
Incias eatemporis
enda aboam hilit ad
quidebis ab in.

Desarrollo
Incias eatemporis
enda aboam hilit ad
quidebis ab in.

Entrega
Incias eatemporis
enda aboam hilit ad
quidebis ab in.

Flat Design es una nueva tendencia que se est poniendo muy de

moda en el mbito del diseo web y/o de aplicaciones mviles.
Dejando a un lado la sombras, relieves, texturas y degradados
para apostar por un diseo mucho ms limpio, con tipografas
ntidas y elegantes y colores slidos como base principal.
Ver ms detalle:

http://cococw.com/es/servicios/dise%C3%B1o-y-desarrollo-web

El diseo responsivo
El diseo responsivo permite que un sitio web
responda al tamao del dispositivo desde el
que se est visualizando(PC, laptop, tablet o
smartphone), adaptando las dimensiones del
contenido y mostrando los elementos de una
forma ordenada y optimizada.
Ver ms detalle:

http://cococw.com/es/servicios/dise%C3%B1o-y-desarrollo-web

Propuesta Tcnica y Econmica: Consultoria en diseo grfico y web laboratorio innovacin - bicu

Administracin del sitio:

Para la adminitracin del sitio web se utilizar Drupal que es
un Sistema de Gestin de Contenidos (CMS, por sus siglas en
ingles) que se utiliza para crear sitios web dinmicos y con
gran variedad de funcionalidades. Drupal permite adaptar
cualquier cualquier diseo visual.
Drupal es un CMS dirigido a Programadores en primera instancia para que estos construyan portales, aplicaciones web
y sitios ajustados a los requerimientos del cliente, por lo que
le da ventajas competitivas sobre los otros CMS como joomla
o wordpress.
Sitios web con Drupal:
Algunas de las miles de pginas web desarrolladas con
Drupal:
La casa blanca: http://www.whitehouse.gov/
Ubuntu: http://www.ubuntu.com/
Observer: http://observer.com/
MTV: http://www.mtv.co.uk/
MTV UK: http://www.mtv.co.uk/
Camper: http://www.camper.com
AOL: http://www.aol.com/
Fundacin Linux: http://www.linuxfoundation.org/
Amnista internacional: http://www.amnesty.org/

El efecto parallax
Es una tcnica de diseo web que permite a sus elementos
moverse a velocidades variables cuando el usuario se desplaza,
creando un efecto visual atractivo.
Miles de sitios web utilizan el Efecto Parallax para capturar
la atencin del usuario, agregando mucho atractivo visual al
contenido y animaciones agradables.
Ver ms detalle:

http://cococw.com/es/servicios/dise%C3%B1o-y-desarrollo-web

Propuesta Tcnica y Econmica: Consultoria en diseo grfico y web laboratorio innovacin - bicu

Comparativa de los 3 gestores de contenidos (CMS) ms utilizados en el mundo:

WORDPRESS
Principales ventajas:
Usable y de fcil implementacin.
Fcil de adaptar a los proyectos
web ms repetitivos como
blogs o portafolios.
Multitud de Themes (plantillas),
tanto gratuitas como de pago.
Administrador muy amigable
para el usuario.
Gran comunidad de Soporte.
Infinidad de plugins por lo que
se puede expandir el sitio a
desarrollar sin tener grandes
conocimientos de programacin.
Curva de aprendizaje fcil en
comparacin con otros CMS.

Principales desventajas:
Se requiere un hosting algo ms
potente que uno bsico para
implementarlo, ya que hace
un uso extensivo de PHP.
Se debe ser ordenado con los
plugins, puesto que como estn
desarrollados por diferentes
programadores pueden
existir filtros de seguridad.
Para cambiar la estructura y forma
en que se muestra tu sitio web
es necesario algn conocimiento
de HTML y PHP, esto en el caso
que no nos encaje la theme
que hayamos escogido.
El nivel de programacin es
mucho ms bajo que el de
otros CMS como Drupal.
Debido a su popularidad, el sitio
puede ser objetivo de ataques,
bien de bots o de hackers.

DRUPAL
Principales ventajas:
Mejor optimizacin del uso de PHP,

es capaz de soportar una mayor

cantidad de visitas que WordPress.
Alta personalizacin de los
mdulos para cada plantilla.
Gran comunidad de desarrolladores.
Est orientado a comunidades, por lo
que si el proyecto est enfocado en esa
lnea (usuarios, permisos, registros, etc.)
es una herramienta muy potente.
A pesar de tener un cdigo
complicado es limpio, algo que los
desarrolladores suelen agradecer.
Posee una alta seguridad, no
obstante depende del administrador
para que el sitio siga siendo
seguro a lo largo del tiempo.
Una gran ventaja con respecto a sus
competidores, es que aunque su base
de datos por defecto sea MYSQL,
como en Joomla y WordPress, debido
a la aplicacin de patrones de diseo
en la implementacin de su ncleo,
permite cambiar fcilmente de sistema
gestor de bases de datos. Tendramos
a nuestra disposicin otras opciones
como SQL S, PostSQL, SQLite u Oracle.

Principales desventajas:
Algunos servicios de hosting no soportan

todas las caractersticas que posee

Drupal, por lo tanto dependiendo del
proyecto puede que haya que buscar uno
especializado, y por lo tanto ms caro.
A nivel empresarial, cabra matizar que
los desarrolladores son ms caros, ya
que hay menos que para otros CMS.

Propuesta Tcnica y Econmica: Consultoria en diseo grfico y web laboratorio innovacin - bicu

JOOMLA
Principales ventajas:
El aprendizaje es un poco

ms rpido que Drupal pero

ms lento que WordPress.
Diversidad de plugins
(mdulos) para instalar pero
menos que WordPress.
Gran comunidad de
desarrolladores.
Mucho tiempo en
el mercado.
Gran diversidad de opciones
en cuanto a posiciones
de mens y widgets.

Principales desventajas:
Si se desea implementar

un blog, es mucho menos

eficiente que Drupal y esa
diferencia se hace ms
notoria si se le compara
con WordPress.
La implementacin de SEO,
no es tan eficiente como
en los otros dos CMS.
El cdigo es complicado
de editar y adems
poco ordenado.
La curva de aprendizaje es
ms alta que WordPress.
Se conocen bastantes
casos de sitios atacados,
aunque este punto depende
tambin del administrador.

3. Especificacin Tcnica del Sitio Web

El portal web se disear e implementar con las siguientes
tecnologas.
Para la interfaz grfica:
HTML5 (Estructura)
CSS3 (hojas de estilo en cascada)
Javascript (interactividad y animacin)
Para la Programacin
PHP (Lenguaje de programacin)
MySql (Base de datos)
Muchos de los efectos que antes slo se conseguan
con Flash ahora se pueden conseguir con HTML5, CCS3
y Javascript.
Por cierto saben que Apple ya no soporta Flash en sus
nuevos dispositivos?

5 razones de porque no hacer un sitio Web en Flash

y porqu no sobreutilizarlo en el diseo.
1. La informacin no es Accesible
2. Flash es pesado
3. No hay botn Atrs
4. Los buscadores son ciegos con Flash
5. Flash no es Estndar

Propuesta Tcnica y Econmica: Consultoria en diseo grfico y web laboratorio innovacin - bicu

5. Cmo trabajamos?
METODOLOGA DE DESARROLLO

LOGO
Inicio

ro

Inicio

Nosotros

Noticias

buscar...

Blog

Contacto

FLAT DESIGN
formas geomtricas,
colores planos y
llamativos e iconos
Leer +

Idea
Incias eatemporis
enda aboam hilit ad
quidebis ab in.

Desarrollo
Incias eatemporis
enda aboam hilit ad
quidebis ab in.

Entrega
Incias eatemporis
enda aboam hilit ad
quidebis ab in.

3.1 Descubrimiento

3.2 Diseo

En esta etapa, realizamos la pregunats al cliente para recopilar informacin sobre lo que espera del
sitio, objetivos y goles del sitio, target o publico metas, funcionalidades, etc.... Tambin se investiga la
industria o mercado que pertenece
el cliente para entenderl mejor al
mismo. Definimos un concepto para
el diseo, la organizacin de la informacin y planeacin del sitio.

Sketch

Prototipo

El diseo comienza con bocetos en

papel que nos puede ayudar a organizar las ideas para un diseo eficaz
y dar un toque fresco y original a
nuestro al mismo.

A travs de nuestros proceso construiremos de forma rpida un prototipo interactivo del sitio web en
HTML, CSS y javascript y usando
colores y la esttica del mismo garantizamos mejores resultados y
aceleramos el proceso de desarrollo
del sitio de manera significativa. El
cliente interactua de forma real con
el prototipo al hacer clic y navegar a
travs de las pginas y dar su opinin
sobre la base de la experiencia real
del usuario.

Propuesta Tcnica y Econmica: Consultoria en diseo grfico y web laboratorio innovacin - bicu

LOGO
Inicio

Nosotros

Noticias

buscar...

Blog

Contacto

FLAT DESIGN
formas geomtricas,
colores planos y
llamativos e iconos
Leer +

Idea
Incias eatemporis
enda aboam hilit ad
quidebis ab in.

Desarrollo
Incias eatemporis
enda aboam hilit ad
quidebis ab in.

Entrega
Incias eatemporis
enda aboam hilit ad
quidebis ab in.

3.3 Desarrollo

3.4 Entrega

Integracin a CMS

Entrenamiento

Puesta en Lnea

Una vez que el diseo es aprovado

procedemos a la integracin con el
CMS a usarse para la administracin
del sitio web, luego procedemos a
la implementacin de las funcionalidades.

Se realizarn videos tutoriales que

mostrarn el uso y administracin
del sitio, tambin sesiones de entrenamiento para el acompaamiento
en dicho proceso.

Una vez terminada la incorporacin

de la informacin se proceder a
mover el sitio del directorio de desarrollo a su directorio del dominio
principal para su puesta en marcha.

Propuesta Tcnica y Econmica: Consultoria en diseo grfico y web laboratorio innovacin - bicu

6. Costo de inversin

7. Pagos

Diseo e Implementacin del sitio web . . . . $ 600.00

Diseo de folleto . . . . . . . . . . . . . . . . . . $ 100.00

Dominio y Hospedaje web 1 aos . . . . . . . $ 100.00

50% a la firma del contrato entrega y aprobacin a

satisfaccin de plan de trabajo.
50% a la entrega y aprobacin del sitio web diseada
y en funcionamiento y diagramacion del folleto.

SUBTOTAL . . . . . . . . . . . . . . . . . . . . . . . $ 800.00
IVA . . . . . . . . . . . . . . . . . . . . . . . . . . . . $120.00
Costo Total . . . . . . . . . . . . . . . . . . US$ 920.00

Propuesta Tcnica y Econmica: Consultoria en diseo grfico y web laboratorio innovacin - bicu

9. Gracias!
Gracias por la oportunidad de remitir esta propuesta.
Trabajando juntos podemos crear este sitio de forma sencilla de navegar y presentar un
diseo profesional, fresco y moderno, cumpliendo con las metas propuestas.
Atentamente,

Ing. Francisco Saballos

(505) 8902 0086/ 8587 0965
skype: coco.creative
frank@cococw.com
francisco.saballos@gmail.com
http://cococw.com

Propuesta Tcnica y Econmica: Consultoria en diseo grfico y web laboratorio innovacin - bicu

10. El consultor
Francisco Saballos
Diseador grfico y web
Originario de Bluefields es un
Ingeniero en Computacin con
ms de 8 aos de experiencia en
el ramo del diseo grfico y web.

10.1 . Competencias
DISEO GRFICO
Mucha experiencia en Diseo editorial y
publicitario: libros, revistas, boletines, catalogos,
poster, brochures y todo en imagen corporativa.
DISEO Y DESARROLLO WEB
Construyo sitios y aplicaciones web y mviles
dominando los conocimientos en cuanto a la
experiencia de usuario (UX) y diseo de interfaz
(UI) y las tecnologas PHP, Mysql, HTML5, CSS3,
Javascript, JQuery y las ltimas tendencias tales
como diseo responsivos y efectos parallax.
EDICIN Y ANIMACIN DE VIDEO
Adobe Premiere Pro CS6, Adobe Alter
Effect CS6, Adobe Encores DVD CS6

FOTOGRAFA
Producto, comidas, retrato y eventos.

MERCADEO DIGITAL
Conocimiento bsico en publicidad online,
SEO, E-mail marketing y redes sociales.

10

Propuesta Tcnica y Econmica: Consultoria en diseo grfico y web laboratorio innovacin - bicu

PSICOLOGIA EN EL DISEO
Incorporo principios e
investigaciones de la psicologa
en cuanto al comportamiento
humano en el procesos de
diseo para encontrar formas
creativas para la comunicacin
efectiva del mensaje.

10.2. Proyectos web recientes

OBSERVATORIO DE DDHH - BICU

MESA DE CONSERTACIN EN JUVENTUD

Sitio web que busca la promocin de la

informacin de DDHH a nivel regional,
nacional e internacional.

Financiado por Global Communities.

Ao: 2015

Status: en lnea

Status: en lnea

Ao: 2014

Tecnologa: HTML5, CSS3, Javascript

Tecnologa: HTML5, CSS3, Javascript, drupal, mysql, php.

Link: http://odha-ni.org

Link: http://mcjuventud.net

GISRES

DEBOER GLOBAL LLC

Sitio web del proyecto de GISRES

financiado por el PNUD.

Sitio web construido para Julius Deboer,

empresa de seguridad en Australia.

Ao: 2014

Ao: 2014

Status: en lnea

Status: en lnea

Tecnologa: HTML5, CSS3, Javascript, drupal, mysql, php.

Tecnologa: HTML5, CSS3, Javascript, drupal, mysql, php.

Link: http://gisres.org

Link: http://deboerglobal.com

RAWRRR NUTRITION

PUEBLOS INDIGENASAA PCN

Sitio web construido para Wendy Laroche,

top personal trainer de Australia.
Ao: 2014

Ao: 2013

Status: en lnea
Tecnologa: HTML5, CSS3, Javascript, drupal, mysql, php, ecommerce.
Link: http://rawrrrnutrition.com

Sitio web para la Asciacin de Enfermeros/enfermeras Nicaragense.

Status: en construccin
Tecnologa: PHP, HTML5, CSS3, Javascript,
Mysql, joomla
Link: http://aen.cococw.com/

Propuesta Tcnica y Econmica: Consultoria en diseo grfico y web laboratorio innovacin - bicu

11