1. Especialización en
Marketing Digital
Mi sitio web
2011ko otsaila
Azitain Poligonoa 3 - K
E-20600 EIBAR
Internet Solutions
Tel: ++34 943 821 780 www.codesyntax.com 1
2. Mi sitio web
2011-02-01
Mi sitio web
1. Cómo entendemos Internet
2. Un buen sitio web
3. El proyecto de mi sitio web
4. Contenido de calidad
5. Ejercicio
4. Mi sitio web
2011-02-01
Ejercicio
- Selecciona un sitio web
- ¿Qué objetivos tiene?
- ¿Qué te parecen los contenidos?
- ¿Qué te parece la navegación?
- ¿Qué te parece el diseño?
5. Mi sitio web
2011-02-01
Cluetrain Manifesto
http://www.codesyntax.com/taller-cs/el-manifiesto-cluetrain
6. Mi sitio web
2011-02-01
Los mercados son conversaciones
http://www.flickr.com/photos/viernest/3996037486/
7. Mi sitio web
2011-02-01
El cliente quiere
hablar con la
marca
17. Mi sitio web
2011-02-01
Objetivos
• Vender
• Fidalizar
• Contactos de nuevos clientes
• Reducir costes de comercialización
• Fomentar el uso
• Informar sobre productos
• Difundir conocimiento
• Conocer opinión del cliente
• Crear marca
• ...
19. Mi sitio web
2011-02-01
Objetivos
• Vender => Ventas
• Fidelizar => Clientes que repiten
• Contactos de nuevos clientes => Nuevos clientes vía web
• Reducir costes de comercialización => Margen por producto
• Fomentar el uso => Links, etc.
• Informar sobre productos => Reducir consultas por teléfono
• Difundir conocimiento => Visitas en la web, etc.
• Conocer opinión del cliente => Nº de mejoras gracias a clientes
• Crear marca => Fans en Facebook, Nuevos contactos BBDD
• ...
20. Mi sitio web
2011-02-01
http://es.wikipedia.org/wiki/Reutilizaci%C3%B3n
21. Mi sitio web
2011-02-01
Características de un buen sitio web:
• Contenido de calidad (texto + multimedia)
• Buena estructura de contenidos
• Atractivo y fácil de utilizar
• Accesible
• Pensar en el cliente... y en Google
22. Mi sitio web
2011-02-01
Cómo hacer un buen sitio web:
• Contenido: elaborado y profesional (+ pensar cliente)
• Estructura: pensar en el cliente (nomenclatura/orden)
• Atractivo y fácil de utilizar: reforzar marca y sencillez
• Accesible: normas de accesibilidad
• Google: Posicionamiento en buscadores
23. Mi sitio web
2011-02-01
Fases del proyecto de mi sitio web
• Análisis estratétigo
• Arquitectura de la información
• Diseño
• Desarrollo
• Carga de contenidos y pruebas
• Lanzamiento
• Mejora continua
24. Mi sitio web
2011-02-01
Fases del proyecto de mi sitio web
• Análisis estratétigo
• Arquitectura de la información
• Diseño
• Desarrollo
• Carga de contenidos y pruebas
• Lanzamiento
• Mejora continua
26. Mi sitio web
2011-02-01
Análisis estratégico
• Misión y visión:
– Qué queremos que haga el sitio web
– Qué queremos que sea en el futuro
• Objetivos (medibles, realistas, evolución, ...)
• La competencia (qué hacen, cómo, …)
• Necesidades técnicas presentes y futuros
• ¿Tenemos medios?
– Económicos
– Personal
27. Mi sitio web
2011-02-01
Fases del proyecto de mi sitio web
• Análisis estratétigo
• Arquitectura de la información
• Diseño
• Desarrollo
• Carga de contenidos y pruebas
• Lanzamiento
• Mejora continua
28. Mi sitio web
2011-02-01
Arquitectura de la
información
29. Mi sitio web
2011-02-01
Arquitectura de la información
• Arquitectura de la información:
– Organizar el sitio web y sus contenidos
para lograr los objetivos establecidos.
• Qué contenidos vamos a tener
• Facilitar navegación (3 clicks)
• Árbol de contenidos
• Wireframe
• Diseño de interacción (más info:http://bit.ly/h8yQRQ)
30. Mi sitio web
2011-02-01
Arquitectura de la información
Árbol de contenidos, ejemplo:
• Inicio
• Quienes somos
• Productos
– Producto 1
– Producto 2
– Producto 3
• Noticias
• Contacto
31. Mi sitio web
2011-02-01
Arquitectura de la información
Wireframe, ejemplo:
http://www.flickr.com/photos/jm3/3711253360/
32. Mi sitio web
2011-02-01
Arquitectura de la información
Wireframe, ejemplo:
http://www.flickr.com/photos/d2clon/4285529902
33. Mi sitio web
2011-02-01
Arquitectura de la información
Wireframe, ejemplo:
http://www.flickr.com/photos/cambodia4kidsorg/4478661447
34. Mi sitio web
2011-02-01
Arquitectura de la información
Wireframe, ejemplo:
http://www.flickr.com/photos/pixelsebi/2996381778
35. Mi sitio web
2011-02-01
Arquitectura de la información
Wireframe, ejemplo:
Pencil
Sketching
36. Mi sitio web
2011-02-01
Fases del proyecto de mi sitio web
• Análisis estratétigo
• Arquitectura de la información
• Diseño
• Desarrollo
• Carga de contenidos y pruebas
• Lanzamiento
• Mejora continua
38. Mi sitio web
2011-02-01
http://www.flickr.com/photos/chego101/3394439610
39. Mi sitio web
2011-02-01
Diseño
• Parte complicada
• Todo el munda opina
• Algunos hasta saben utilizar Photoshop
Dejemos el diseño para los
profesionales
40. Mi sitio web
2011-02-01
Diseño
• Respetar imagen corporativa
• Orientado a objetivos
• Atractivo, que invite a navegar y leer
• Sacar máximo rendimiento a contenidos (texto
y multimedia)
• Transmitir credibilidad
• Facilitar navegación (3 clicks)
41. Mi sitio web
2011-02-01
Diseño
Accesibilidad
• Todos puedan utilizar la web
• Normas básicas:
– Uso de estándares (W3C)
– Teclas de acceso
– Solo texto
– Tamaño de letra variable
– …
• Guía breve de accesibilidad (W3C) http://bit.ly/eRppv8
42. Mi sitio web
2011-02-01
Fases del proyecto de mi sitio web
• Análisis estratétigo
• Arquitectura de la información
• Diseño
• Desarrollo
• Carga de contenidos y pruebas
• Lanzamiento
• Mejora continua
44. Mi sitio web
2011-02-01
Desarrollo
• Cómo se trabaja
• Tipos de sitios web
• CMS
• Hosting
• Compatibilidad
45. Mi sitio web
2011-02-01
Desarrollo
Cómo se trabaja:
• Especificaciones al desarrollador
• Selección de CMS
• Desarrollo de la primera versión
• Web visible en dirección oculta
• Carga de contenidos
• Solucionar bugs y errores de desarrollo/diseño
• Publicación
• ¿Desarrollo continuo?
46. Mi sitio web
2011-02-01
Desarrollo
Tipos de sitios web:
• Pública / Acceso privado (intranet/extranet)
• Mera presencia corporativa
• Ecommerce
• Muy orientado a noticias
• Blog
• Videoblog (vlog)
• Foros
47. Mi sitio web
2011-02-01
Desarrollo
CMS (Sistemas de Gestión de Contenidos)
• Tu mismo puedes gestionar la web: añades, editas o
eliminas contenido sin intermediación.
• No desarrolles desde 0
• Multilingüismo
• Software libre
• Plone, Wordpress, Joomla, Drupal, Magento,
PrestaShop, ...
48. Mi sitio web
2011-02-01
Fases del proyecto de mi sitio web
• Análisis estratétigo
• Arquitectura de la información
• Diseño
• Desarrollo
• Carga de contenidos y pruebas
• Lanzamiento
• Mejora continua
49. Mi sitio web
2011-02-01
Carga de
contenidos y
pruebas
50. Mi sitio web
2011-02-01
Carga de contenidos y pruebas
• El contenido: lo más importante
• (Casi) Siempre se deja para el final
• El diseño atrae, el contenido convence
• Invertir en contenido:
– Textos (lengua propia y traducidos)
– Imágenes
– Videos
51. Mi sitio web
2011-02-01
Olvidar papel
¡Esto es Internet!
52. Mi sitio web
2011-02-01
Carga de contenidos y pruebas
Cómo escribir para el sitio web
• Usuario: vistazo rápido a la web
• Piensa en el cliente (palabras clave)
• Nada de literatura
• Propaganda: poco o nada
• Conciso, listados, negritas, etc.
• Llamadas a la acción (objetivos)
• Traducciones: profesionalidad
53. Mi sitio web
2011-02-01
Carga de contenidos y pruebas
http://www.ulmapackaging.com
54. Mi sitio web
2011-02-01
Carga de contenidos y pruebas
Cómo utilizar los PDF
• No abusar
• Extrae un resumen del PDF
• Scribd
• Indica el peso del PDF
55. Mi sitio web
2011-02-01
Carga de contenidos y pruebas
Consejos SEO
• Pensar en palabras clave
• Título del sitio web y cada página
• Campo “description”
• URLs entendibles
• Navegación
• Enlaces internos
• Fotografías (campo “alt” y “title”)
56. Mi sitio web
2011-02-01
Carga de contenidos y pruebas
Contenido y sitio web multilingüe
• Detección de idioma
• Cambio de idiomas: nada de banderas
• Cambio de idiomas en todas las páginas
• Localización de interfaces
• SEO: servidores
57. Mi sitio web
2011-02-01
Carga de contenidos y pruebas
Contenido multimedia
• Buenas fotos: ayudan mucho a vender
• Profesionalidad
• Video: atre atención
• Se posicionan bien en Google
58. Mi sitio web
2011-02-01
http://vimeo.com/12236680
59. Mi sitio web
2011-02-01
http://www.youtube.com/watch?v=qg1ckCkm8YI
60. Mi sitio web
2011-02-01
Carga de contenidos y pruebas
Repartir el contenido:
• Videos: Youtube, Vimeo, Blip.tv, ...
• Fotos: Flickr, Picasa
• Noticias: Facebook, Twitter, …
• Licencias libres
61. Mi sitio web
2011-02-01
Carga de contenidos y pruebas
Pruebas de usabilidad (tests):
62. Mi sitio web
2011-02-01
Carga de contenidos y pruebas
Círculo de confianza:
• Muestra la web a personas ajenas al proyecto
– Compañeros de empresa
– Clientes con mucha relación
– Proveedores con mucha relación
• No intentes convencer, escucha lo que te digan
(valora su opinión en función del sujeto)
63. Mi sitio web
2011-02-01
Fases del proyecto de mi sitio web
• Análisis estratétigo
• Arquitectura de la información
• Diseño
• Desarrollo
• Carga de contenidos y pruebas
• Lanzamiento
• Mejora continua
65. Mi sitio web
2011-02-01
Lanzamiento
• Desengañémonos, la gente no está esperando a
que pulsemos el botón para publicar.
• Empieza poco a poco
• Corrige errores no detectados
• Ahora comienza el verdadero trabajo:
¡Alimenta tu web!
66. Mi sitio web
2011-02-01
Fases del proyecto de mi sitio web
• Análisis estratétigo
• Arquitectura de la información
• Diseño
• Desarrollo
• Carga de contenidos y pruebas
• Lanzamiento
• Mejora continua
68. Mi sitio web
2011-02-01
Mejora continua
• Mide, mejora, mide (“cut once, measure twice”)
• Contratos de mantenimiento (dedicación por
horas), para desarrollos menores
• No abandones el sitio web
69. Mi sitio web
2011-02-01
Eskerrik asko!!
mlizarralde@codesyntax.com
Twitter: @codesyntax @macmikel
Codesyntax.com
