Post on 22-Apr-2015
description
Proyecto web
Jordi Valls Telf: +34 622 689 018
Email: info@jordivalls.net
Información preliminar
Mi forma de trabajar es con un CMS Profesional (sistema de gestión de contenidos) de código
libre (php, html, css,…) que parte de unas bases para construir el sitio web según las necesidades
del cliente y facilitar su uso al mismo.
Se trata de un tipo de web 2.0 que permite al usuario (internauta o cliente de la compañía)
interactuar con el contenido, compartir el mismo en las redes sociales y comentar.
Incluye un blog como herramienta de marketing, para que la empresa pueda escribir sus artículos
o notas de prensa (clasificadas en categorías o secciones), dar a conocer los eventos y la misma
empresa, así como educar al cliente con los servicios o productos que se ofrecen. Sirve para
facilitar información de valor a los usuarios y generar comunidad entorno la marca o los servicios
ofrecidos.
Se pueden crear páginas individuales con presentaciones de la empresa, portfolios de los
productos o servicios, formulario de contacto, sección de ayuda, localización de la empresa,
presentación del equipo de trabajo, imágenes, slider-shows para mostrar contenido de forma
dinámica, vídeos de la empresa, etc. También una página de inicio personalizable y la posibilidad de
incorporar banners de publicidad en caso que el cliente lo desee.
2
Información preliminar
También ofrezco el servicio incluido de SEO (Search Engine Optimization) que consiste en optimizar
y posicionar la web en Google (y dar de alta en otros motores de búsqueda como yahoo) para que
aparezca en los primeros resultados cuando un usuario de internet busque algo relacionado.
Además, doy de alta la misma en directorios, Google Maps y las redes sociales que el cliente haya
considerado en su estrategia de marketing electrónico (Facebook, Twitter, Google+, Pinterest, etc.)
Para todo ello es necesario disponer de contenido de calidad (sea proporcionado por el cliente o lo
diseñe yo mismo) como imágenes de calidad, textos bien escritos, vídeos bien producidos,
explicaciones correspondientes, etc.
Ofrezco un servicio personalizado, para que el cliente me explique sus necesidades y pueda
adaptar mi trabajo a las mismas, así como un posterior servicio de mantenimiento básico incluido,
con la posibilidad de ampliarlo a servicios avanzados con más dedicación en la web, escribir para
el blog, dinamización en redes sociales (funciones de Community Manager) y estrategia online (a
elegir por el cliente).
*Ver tabla de precios al final de la presentación.
3
Estilos de web
Con la presentación de los siguientes estilos es posible ver los aspectos y funcionalidades
principales de una web.
Es posible ver las presentaciones de las web en una demo haciendo clic sobre las
imágenes. El contenido de la demo es ficticio pero incluye explicaciones de las
funcionalidades.
La páginas de inicio y otras individuales son personalizables.
Cuando son ‘’responsive design’’ significa que se adaptan a una tablet y dispositivos
móviles de última generación. Así, el usuario no debe ampliar con los dedos para verla
más de cera.
La demos están en inglés porque son sólo una demostración, pero el contenido de las
mismas se procedería a traducir para Internet.
4
Estilo 1
Estilo 1
Gran diseño web (recomendable) para todo tipo de empresas, visual y profesional. Responsive design (se adapta a los
tablets y smartphones), con posibilidad de personalizar los colores y las páginas (de inicio e individuales), sin límite de
barras laterales. *Hacer clic sobre la imagen para ver demo 6
Estilo 1
Menús
Slider
interactivo
Portfolios
con acceso a
páginas
LOGO (Personalizable) Redes
sociales
7
Estilo 1
Estilos de
página
Caracte
rísticas
Más estilos
de página
Estilos de barras
laterales
Portfolio Blog Página de inicio
personalizable
Slider que
permite
ampliar las
imágenes e
interactuar Se pueden añadir otros menús:
- Contacta (datos de la empresa,
mapa y formulario de contacto)
- Acerca de (la empresa, el
equipo,…)
- Servicios, etc.
Buscar en
la web
8
Estilo 1
Pié de página con widgets
(cuatro secciones)
Portfolio.
Si haces clic sobre
la imagen o el
botón se descarga
la página
correspondiente
(se amplia la
imagen o accedes
a la sección)
Datos de la
empresa
copyright Otros
menús
9
Estilo 1
Un tipo de slider especial para mostrar
imágenes (se controla el tiempo y las
imágenes a mostrar) . *Hacer clic
10
Estilo 1
Otro tipo de slider para mostrar
imágenes, texto, vídeos, contenido del
blog, etc. *Hacer clic
11
Estilo 1
Página tipo magazine que contiene
slider con la muestra de artículos, su
resumen i acceso a la información de la
misma
Barra lateral con posibilidad de
incorporar texto, imágenes, widgets de
acceso a las redes sociales, opciones
de contacto, banners publicitarios,
mostrar los últimos artículos, vídeos, …
12
Estilo 1
Opciones de la demo: cambiar colores,
fondo, estilo de menú, etc. (para
hacerse una idea de cómo puede
quedar)
13
Estilo 2
Estilo 2
Estilo hermano del estilo 1 pero con diferente diseño. Responsive design ,con página de
inicio especial para presentaciones. *Hacer clic en la imagen para ampliar a la demo 15
Estilo 2
OPCIONES DE LA DEMO: CAMBIAR COLORES, FONDO, ESTILO DE MENÚ, ETC. (PARA HACERSE UNA IDEA DE CÓMO PUEDE QUEDAR)
16
Estilo 3
Estilo 3
Estilo hermano del estilo 1 pero con diferente diseño. Responsive design ,con página de
inicio especial para presentaciones. *Hacer clic en la imagen para ampliar a la demo 18
Estilo 3
Elección de dos secciones en la misma página estilo Tab
19
Estilo 4
Estilo 4
Gran estilo de web (recomendable) profesional y visual, para todo tipo de negocios. Personalizable (colores y bloques de
información de las páginas de inicio e individuales) y responsive design (se adapta a tablets y dispositivos móviles). Sin límite de
barras laterales. *Hacer clic para ampliar a la demo. 21
Estilo 4
Ejemplo de portfolio a tres columnas con filtro
por tipo de servicio o producto.
22
Estilo 4
Ejemplo de galería de portfolio. al pasar sobre las
imágenes es posible verlas ampliadas, ver vídeo,
acceder a la página individual en cuestión, etc.
(haz clic sobre esta imagen para ampliar a la demo)
23
Estilo 4
Ejemplo de galería de imágenes a dos columnas
(posibilidad de elegir 3 y 4 columnas). hacer
clic en la imagen para ampliar a la demo.
24
Estilo 4
Ejemplo de blog con imágenes de tamaño medio
estilo thumbnail (previsualización en miniatura).
25
Estilo 4
Ejemplo de tabla de precios
26
Estilo 4
Formulario de contacto
Datos de la empresa (nombre,
teléfono, dirección, email) y mapa
de localización.
27
Estilo 5
Estilo 5
Otro gran estilo de web tipo office que también es personalizable (colores, página de inicio e individuales) y responsive design (se
adapta a tablets y dispositivos móviles). Incluye páginas individuales para promociones (landing pages). *Hacer clic para ampliar a
la demo. 29
Estilo Office
Página interactiva donde es posible dar a
conocer los servicios de la empresa. Al estilo
‘’tab’’ se descarga la página del servicio a la
derecha cuando haces clic sobre el nombre
del servicio que elijas de la izquierda.
30
Estilo 5
Portfolio con filtro. Cuando haces clic sobre una
imagen se descarga la página correspondiente.
31
Estilo 5
Página especial para mostrar las imágenes del
equipo de la empresa. Cuando pasas el puntero
sobre la imagen se muestra una pequeña
descripción de la persona y su categoría
profesional. Haciendo clic sobre la misma se
accede a una página individual donde se amplía
la información. También se puede ofrecer una
galería de imágenes según el departamento de
la empresa.
32
Estilo 6
Estilo 6
Web muy bonita y visual que también es posible adaptarla al smartphone.
34
Estilo 6
CONTROLADORES DEL SLIDER GIGANTE AL SITUAR EL PUNTERO SOBRE EL MISMO
EJEMPLO DE PÁGINA DE INICIO
35
Estilo 6
CONTROLADORES DEL SLIDER GIGANTE EN LA OPCIÓN DE MENÚ ‘’HOME’’ DE LA DEMO ES POSIBLE VER TODAS LOS TÍPOS DE PÁGINAS DE INICIO.
OTRO EJEMPLO DE PÁGINA DE INICIO
PORTFOLIO
36
Estilo 6
OTRO EJEMPLO DE PÁGINA DE INICIO
37
Estilo 6 OTRO EJEMPLO DE PÁGINA DE INICIO
CONTROLADORES DEL SLIDER GIGANTE
38
Estilo 6 EJEMPLO DE PÁGINA ‘’ACERCA DE’’ CON LA PRESENTACIÓN DEL EQUIPO PRINCIPAL
VER EJEMPLOS DE PÁGINAS: -ACERCA DE - TESTIMONIALES -GALERÍA DE FOTOS -PÁGINA COMPLETA - CONTACTA
39
Estilo 6
HACIENDO CLIC EN LA OPCIÓN DE MENÚ ‘’SKINS’’ ES POSIBLE VER OTROS DISEÑOS DE LA MISMA WEB DISPONIBLES.
BLOG Y SHORTCODES PARA TRABAJAR LAS PÁGINAS
41
Estilo 7
Estilo 7
Estilo limpio, visual e intuitivo. Responsive design (se adapta a tablets y smartphones) y foro
incorporado. *Hacer clic en la imagen para ampliar 43
Estilo 7
Las imágenes del portfolio salen en blanco y
negro pero cuando pasas el puntero por
encima se ven en color. es posible mostrarlas
a color directamente.
Cuando haces clic sobre una imagen se amplia
la misma y la explicación en la misma página.
Desplegable para ofrecer alguna información
destacada.
Botones a las redes sociales que cambian de color cuando
pasas el puntero por encima.
Portfolios en 1, 2 ,3 y 4 columnas.
Shortcodes para personalizar páginas individuales.
Puedes ofrecer una galería de imágenes que se amplían a
una ventana pop cuando haces clic sobre ellas.
Tienes una página exclusiva para un foro. sirve para crear
conversaciones o como herramienta de atención al cliente
(preguntas y respuestas).
También dispones de blog. 44
Estilo 8
Estilo 8
Estilo hermano de Angular pero más sencillo, para diseño portfolio. Responsive design.
*Hacer clic en la imagen para ampliar a la demo 46
Estilo 9
Estilo 9
Estilo muy bonito, visual y con muchas funcionalidades. No es responsive design (la web se ve igual en los
móviles que en el ordenador), se ve bien aunque en formato pequeño. (Haga la prueba accediendo desde un
móvil de última generación). *Hacer clic para ampliar a la demo 48
Estilo 10
Estilo 10
Estilo muy bonito, profesional, visual y con muchas funcionalidades. No es responsive design (la web se ve igual en los
móviles que en el ordenador), se ve bien pero en formato pequeño. (Haga la prueba accediendo desde un móvil de ultima
generación). *Hacer clic para ampliar a la demo 50
Estilo 10
Diferentes tipos de páginas (página de inicio,
servicios, precios, testimoniales, el equipo de
trabajo, etc.)
Más tipos de sliders especiales en opción de
menú
Slider especial (pasar el puntero por encima)
LA DEMO PERMITE PROBAR DIFERENTES COLORES
51
Presupuesto
Precios
Instalación de la web + seo + inicio redes sociales + mantenimiento básico = a partir de 350 € dependiendo
de varios factores que pueden incrementar el precio:
Cuando deba venir al local a tomar fotos con mi cámara (son necesarias fotos de calidad)
Cuando deba diseñar imágenes en photoshop (por ejemplo para el fondo de la web o la portada de
Facebook)
Extras. Se entrega la web con el contenido básico que la empresa proporcione (textos, vídeos,
imágenes,…) pero si el cliente solicita que incluya contenido especial no diseñado previamente por el
mismo se aplicará un precio extra. Por ejemplo: cuando deba escribir la misión/visión de la empresa en
formato texto (no habiendo sido facilitado previamente) o incluir imágenes tampoco proporcionadas
directamente por el cliente.
Mantenimiento básico post-venta incluido*:
Cambiar imágenes, vídeos, textos, etc.
Solucionar algún problema
*El mantenimiento básico es algo puntual , no se trata de estar continuamente realizando cambios (si se desea un servicio más
avanzado ver diapositiva siguiente)
53
Tabla de servicios
Básico Medio Avanzado
Incluido 250 € / mes (12h/mes ) 475 € / mes (24h/mes)
Cambiar imagen, texto, vídeo y
solucionar problema (puntual)
Mantenimiento web: cambiar
imágenes, textos, vídeos, añadir
secciones y solucionar problemas
Mantenimiento web: cambiar
imágenes, textos, vídeos, añadir
secciones y solucionar problemas
4 artículos / mes en blog 8 artículos / mes en blog
Mensajes en redes sociales (20
minutos/ día)
Mensajes redes sociales (40 minutos
/día)
Reportes, estadísticas, etc Reportes ,estadísticas, etc.
Consejos Estrategia de marketing online,
campañas, consejos, etc.
Las horas extras a los planes diseñados salen por 20 €/h 54
Contactar conmigo
Jordi Valls Telf: +34 622 689 018
E-mail: info@jordivalls.net
www.jordivalls.net
www.tarragonainnova.com
Gracias
Sitios web