Proyecto web

Jordi Valls
Telf: +34 622 689 018 Email: info@jordivalls.net

Informacin preliminar
Mi forma de trabajar es con un CMS Profesional (sistema de gestin de contenidos) de cdigo libre (php, html, css,) que parte de unas bases para construir el sitio web segn 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 compaa) 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 artculos o notas de prensa (clasificadas en categoras 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 informacin de valor a los usuarios y generar comunidad entorno la marca o los servicios ofrecidos.
Se pueden crear pginas individuales con presentaciones de la empresa, portfolios de los productos o servicios, formulario de contacto, seccin de ayuda, localizacin de la empresa, presentacin del equipo de trabajo, imgenes, slider-shows para mostrar contenido de forma dinmica, vdeos de la empresa, etc. Tambin una pgina de inicio personalizable y la posibilidad de incorporar banners de publicidad en caso que el cliente lo desee.
2

Informacin preliminar
Tambin 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 bsqueda como yahoo) para que aparezca en los primeros resultados cuando un usuario de internet busque algo relacionado.
Adems, doy de alta la misma en directorios, Google Maps y las redes sociales que el cliente haya considerado en su estrategia de marketing electrnico (Facebook, Twitter, Google+, Pinterest, etc.)

Para todo ello es necesario disponer de contenido de calidad (sea proporcionado por el cliente o lo disee yo mismo) como imgenes de calidad, textos bien escritos, vdeos 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 bsico incluido, con la posibilidad de ampliarlo a servicios avanzados con ms dedicacin en la web, escribir para el blog, dinamizacin en redes sociales (funciones de Community Manager) y estrategia online (a elegir por el cliente). *Ver tabla de precios al final de la presentacin.
3

Estilos de web
Con la presentacin 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 imgenes. El contenido de la demo es ficticio pero incluye explicaciones de las funcionalidades.
La pginas de inicio y otras individuales son personalizables. Cuando son responsive design significa que se adaptan a una tablet y dispositivos mviles de ltima generacin. As, el usuario no debe ampliar con los dedos para verla ms de cera.

La demos estn en ingls porque son slo una demostracin, pero el contenido de las mismas se procedera a traducir para Internet.
4

Estilo 1

Estilo 1

Gran diseo 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 pginas (de inicio e individuales), sin lmite de barras laterales. *Hacer clic sobre la imagen para ver demo

Estilo 1
LOGO (Personalizable)
Redes sociales Mens

Slider interactivo
Portfolios con acceso a pginas

Estilo 1
Pgina de inicio personalizable Blog Portfolio Estilos de barras laterales Estilos de pgina Caracte rsticas Ms estilos de pgina

Buscar en la web Slider que permite ampliar las imgenes e interactuar

Se pueden aadir otros mens: - Contacta (datos de la empresa, mapa y formulario de contacto) - Acerca de (la empresa, el equipo,) - Servicios, etc. 8

Estilo 1

Portfolio. Si haces clic sobre la imagen o el botn se descarga la pgina correspondiente (se amplia la imagen o accedes a la seccin)

Pi de pgina con widgets (cuatro secciones)

Datos de la empresa

copyright

Otros mens

Estilo 1
Un tipo de slider especial para mostrar imgenes (se controla el tiempo y las imgenes a mostrar) . *Hacer clic

10

Estilo 1
Otro tipo de slider para mostrar imgenes, texto, vdeos, contenido del blog, etc. *Hacer clic

11

Estilo 1
Pgina tipo magazine que contiene slider con la muestra de artculos, su resumen i acceso a la informacin de la misma Barra lateral con posibilidad de incorporar texto, imgenes, widgets de acceso a las redes sociales, opciones de contacto, banners publicitarios, mostrar los ltimos artculos, vdeos,

12

Estilo 1
Opciones de la demo: cambiar colores, fondo, estilo de men, etc. (para hacerse una idea de cmo puede quedar)

13

Estilo 2

Estilo 2

Estilo hermano del estilo 1 pero con diferente diseo. Responsive design ,con pgina 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 CMO PUEDE QUEDAR)

16

Estilo 3

Estilo 3

Estilo hermano del estilo 1 pero con diferente diseo. Responsive design ,con pgina de inicio especial para presentaciones. *Hacer clic en la imagen para ampliar a la demo

18

Estilo 3

Eleccin de dos secciones en la misma pgina 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 informacin de las pginas de inicio e individuales) y responsive design (se adapta a tablets y dispositivos mviles). Sin lmite de 21 barras laterales. *Hacer clic para ampliar a la demo.

Estilo 4
Ejemplo de portfolio a tres columnas con filtro por tipo de servicio o producto.

22

Estilo 4
Ejemplo de galera de portfolio. al pasar sobre las imgenes es posible verlas ampliadas, ver vdeo, acceder a la pgina individual en cuestin, etc. (haz clic sobre esta imagen para ampliar a la demo)

23

Estilo 4
Ejemplo de galera de imgenes 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 imgenes de tamao medio estilo thumbnail (previsualizacin en miniatura).

25

Estilo 4
Ejemplo de tabla de precios

26

Estilo 4
Formulario de contacto Datos de la empresa (nombre, telfono, direccin, email) y mapa de localizacin.

27

Estilo 5

Estilo 5

Otro gran estilo de web tipo office que tambin es personalizable (colores, pgina de inicio e individuales) y responsive design (se adapta a tablets y dispositivos mviles). Incluye pginas individuales para promociones (landing pages). *Hacer clic para ampliar a 29 la demo.

Estilo Office
Pgina interactiva donde es posible dar a conocer los servicios de la empresa. Al estilo tab se descarga la pgina 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 pgina correspondiente.

31

Estilo 5
Pgina especial para mostrar las imgenes del equipo de la empresa. Cuando pasas el puntero sobre la imagen se muestra una pequea descripcin de la persona y su categora profesional. Haciendo clic sobre la misma se accede a una pgina individual donde se ampla la informacin. Tambin se puede ofrecer una galera de imgenes segn el departamento de la empresa.

32

Estilo 6

Estilo 6

Web muy bonita y visual que tambin es posible adaptarla al smartphone.

34

Estilo 6
EJEMPLO DE PGINA DE INICIO CONTROLADORES DEL SLIDER GIGANTE AL SITUAR EL PUNTERO SOBRE EL MISMO

35

Estilo 6
OTRO EJEMPLO DE PGINA DE INICIO

CONTROLADORES DEL SLIDER GIGANTE

EN LA OPCIN DE MEN HOME DE LA DEMO ES POSIBLE VER TODAS LOS TPOS DE PGINAS DE INICIO.

PORTFOLIO

36

Estilo 6
OTRO EJEMPLO DE PGINA DE INICIO

37

Estilo 6
OTRO EJEMPLO DE PGINA DE INICIO

CONTROLADORES DEL SLIDER GIGANTE

38

Estilo 6
EJEMPLO DE PGINA ACERCA DE CON LA PRESENTACIN DEL EQUIPO PRINCIPAL

VER EJEMPLOS DE PGINAS: -ACERCA DE - TESTIMONIALES -GALERA DE FOTOS -PGINA COMPLETA - CONTACTA

39

Estilo 6
EJEMPLO DE FONDO BLANCO Y NEGRO

40

Estilo 6

BLOG Y SHORTCODES PARA TRABAJAR LAS PGINAS

HACIENDO CLIC EN LA OPCIN DE MEN SKINS ES POSIBLE VER OTROS DISEOS DE LA MISMA WEB DISPONIBLES.

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
Desplegable para ofrecer alguna informacin destacada.

Las imgenes 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 explicacin en la misma pgina.

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 pginas individuales.

Puedes ofrecer una galera de imgenes que se amplan a una ventana pop cuando haces clic sobre ellas. Tienes una pgina exclusiva para un foro. sirve para crear conversaciones o como herramienta de atencin al cliente (preguntas y respuestas).
Tambin dispones de blog.
44

Estilo 8

Estilo 8

Estilo hermano de Angular pero ms sencillo, para diseo 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 mviles que en el ordenador), se ve bien aunque en formato pequeo. (Haga la prueba accediendo desde un mvil de ltima generacin). *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 mviles que en el ordenador), se ve bien pero en formato pequeo. (Haga la prueba accediendo desde un mvil de ultima generacin). *Hacer clic para ampliar a la demo

50

Estilo 10

LA DEMO PERMITE PROBAR DIFERENTES COLORES

Diferentes tipos de pginas (pgina de inicio, servicios, precios, testimoniales, el equipo de trabajo, etc.) Ms tipos de sliders especiales en opcin de men Slider especial (pasar el puntero por encima)

51

Presupuesto

Precios
Instalacin de la web + seo + inicio redes sociales + mantenimiento bsico = a partir de 350 dependiendo de varios factores que pueden incrementar el precio: Cuando deba venir al local a tomar fotos con mi cmara (son necesarias fotos de calidad) Cuando deba disear imgenes en photoshop (por ejemplo para el fondo de la web o la portada de Facebook) Extras. Se entrega la web con el contenido bsico que la empresa proporcione (textos, vdeos, imgenes,) pero si el cliente solicita que incluya contenido especial no diseado previamente por el mismo se aplicar un precio extra. Por ejemplo: cuando deba escribir la misin/visin de la empresa en formato texto (no habiendo sido facilitado previamente) o incluir imgenes tampoco proporcionadas directamente por el cliente. Mantenimiento bsico post-venta incluido*: Cambiar imgenes, vdeos, textos, etc. Solucionar algn problema
*El mantenimiento bsico es algo puntual , no se trata de estar continuamente realizando cambios (si se desea un servicio ms avanzado ver diapositiva siguiente)
53

Tabla de servicios
Bsico Medio Avanzado

Incluido
Cambiar imagen, texto, vdeo y solucionar problema (puntual)

250 / mes (12h/mes )

Mantenimiento web: cambiar imgenes, textos, vdeos, aadir secciones y solucionar problemas 4 artculos / mes en blog
Mensajes en redes sociales (20 minutos/ da) Reportes, estadsticas, etc Consejos

475 / mes (24h/mes)

Mantenimiento web: cambiar imgenes, textos, vdeos, aadir secciones y solucionar problemas 8 artculos / mes en blog
Mensajes redes sociales (40 minutos /da) Reportes ,estadsticas, etc. Estrategia de marketing online, campaas, consejos, etc.

Las horas extras a los planes diseados salen por 20 /h

54

Contactar conmigo

Jordi Valls
Telf: +34 622 689 018 E-mail: info@jordivalls.net

Sitios web
www.jordivalls.net www.tarragonainnova.com

Gracias