mi sitio web - enpresa digitala

1

Internet Solutionswww.codesyntax.com

Especialización en Marketing Digital

Mi sitio web

Azitain Poligonoa 3 - KE-20600 EIBAR

Tel: ++34 943 821 780

2011ko otsaila

Mi sitio web2011-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


Presentación


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?


Cluetrain Manifesto

http://www.codesyntax.com/taller-cs/el-manifiesto-cluetrain

http://www.codesyntax.com/taller-cs/el-manifiesto-cluetrain


Los mercados son conversaciones

http://www.flickr.com/photos/viernest/3996037486/


El cliente quiere hablar con la

marca


¿Qué es el marketing?


Saber qué quiere el cliente y dárselo


http://www.youtube.com/watch?v=zweof0kBKUY

http://www.youtube.com/watch?v=zweof0kBKUY


Para conocer al cliente...

¡Hay que conversar!


Antes de hacer nada en Internet...

Pensemos en el cliente


¿Qué podemos hacer?:- Sitio web / Ecommerce- Intranet / Extranet- Blog- Videoblog (vlog)- Redes sociales- ...


Coherencia

Marketing = Marketing online


¿Cómo sabemos que un sitio web

es bueno?


Objetivo


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

• ...


Medir objetivos


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

• ...


http://es.wikipedia.org/wiki/Reutilizaci%C3%B3n

http://es.wikipedia.org/wiki/Reutilizaci%C3%B3n


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


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


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


Análisis estratégico


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





• Diseño

• Desarrollo


• Lanzamiento

• Mejora continua


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)

http://bit.ly/h8yQRQ



Árbol de contenidos, ejemplo:

• Inicio

• Quienes somos

• Productos

– Producto 1

– Producto 2

– Producto 3

• Noticias

• Contacto



Wireframe, ejemplo:

http://www.flickr.com/photos/jm3/3711253360/

http://www.flickr.com/photos/jm3/3711253360/



Wireframe, ejemplo:

http://www.flickr.com/photos/d2clon/4285529902

http://www.flickr.com/photos/d2clon/4285529902



Wireframe, ejemplo:

http://www.flickr.com/photos/cambodia4kidsorg/4478661447

http://www.flickr.com/photos/cambodia4kidsorg/4478661447



Wireframe, ejemplo:

http://www.flickr.com/photos/pixelsebi/2996381778

http://www.flickr.com/photos/pixelsebi/2996381778



Wireframe, ejemplo:

Pencil Sketching





• Diseño

• Desarrollo


• Lanzamiento

• Mejora continua


Diseño


http://www.flickr.com/photos/chego101/3394439610

http://www.flickr.com/photos/chego101/3394439610


Diseño

• Parte complicada

• Todo el munda opina

• Algunos hasta saben utilizar Photoshop

Dejemos el diseño para los profesionales


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)


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

http://bit.ly/eRppv8





• Diseño

• Desarrollo


• Lanzamiento

• Mejora continua


Desarrollo


Desarrollo

• Cómo se trabaja

• Tipos de sitios web

• CMS

• Hosting

• Compatibilidad


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?


Desarrollo

Tipos de sitios web:

• Pública / Acceso privado (intranet/extranet)

• Mera presencia corporativa

• Ecommerce

• Muy orientado a noticias

• Blog

• Videoblog (vlog)

• Foros


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, ...





• Diseño

• Desarrollo


• Lanzamiento

• Mejora continua


Carga de contenidos y

pruebas


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


Olvidar papel

¡Esto es Internet!



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



http://www.ulmapackaging.com

http://www.ulmapackaging.com/



Cómo utilizar los PDF

• No abusar

• Extrae un resumen del PDF

• Scribd

• Indica el peso del PDF



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”)



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



Contenido multimedia

• Buenas fotos: ayudan mucho a vender

• Profesionalidad

• Video: atre atención

• Se posicionan bien en Google


http://vimeo.com/12236680

http://vimeo.com/12236680


http://www.youtube.com/watch?v=qg1ckCkm8YI

http://www.youtube.com/watch?v=qg1ckCkm8YI



Repartir el contenido:

• Videos: Youtube, Vimeo, Blip.tv, ...

• Fotos: Flickr, Picasa

• Noticias: Facebook, Twitter, …

• Licencias libres



Pruebas de usabilidad (tests):



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)





• Diseño

• Desarrollo


• Lanzamiento

• Mejora continua


Lanzamiento


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!





• Diseño

• Desarrollo


• Lanzamiento

• Mejora continua


Mejora continua


Mejora continua

• Mide, mejora, mide (“cut once, measure twice”)

• Contratos de mantenimiento (dedicación por horas), para desarrollos menores

• No abandones el sitio web


Eskerrik asko!!

[email protected]: @codesyntax @macmikel

Codesyntax.com

mi sitio web - enpresa digitala

Documents