Tu cliente es el cliente de tu cliente es una frase que suelo emplear para hacer entender mi punto de vista sobre como deben de plantearse cualquier acción en Internet relacionadas con marcas y empresas.
Pecamos de intentar trasladar o adaptar las acciones que se realizan en el mundo offline al online, y no contemplamos la realidad del medio donde nos movemos. Hablamos de comunicación, conversación, bidirreccionalidad pero al ejecutar las acciones seguimos usando técnicas del offline, unidireccionales e intrusivas.
En la red lo realmente importante es el usuario, eso lo decimos todos pero ¿lo tenemos en cuenta? sinceramente creo que cada vez menos. ¿Nos hemos parado a analizarlo? ¿Lo vemos como lo que realmente es? ¿Miramos hacia él?
Por deformación profesional uno mira hacia los intereses de su cliente y desde ese planteamiento realiza las acciones en la red y para mi eso es un error estratégico grave, si lo que queremos es alcanzar nuestros objetivos de negocio de forma rápida y directa mostramos un profundo desconocimiento del mismo.
Volvamos al principio del todo, en la red hay millones de usuarios y no deben verse como clientes, si no como lo que son, usuarios. ¿Y esos usuarios por que están en la red? ¿Que buscan en ella? ¿Que les gusta?
Esas son las preguntas que debemos de responder, debemos de dejar de mirar hacia nuestro cliente, mirar hacia los usuarios, analizarlos como tales y sacar conclusiones. La principal conclusión que uno puede sacar de ese análisis y experiencias personales es que entre otras muchas, buscan valor.
Y la clave es esa en darle respuesta a su búsqueda de valor y te identifiquen con el, y añado algo mas, de manera indirecta. Cualquier presencia en Internet que busque conseguir objetivos de negocio debe plantearse desde un objetivo primario enfocado a los intereses de los usuarios, la propuesta de valor de los usuarios.
Siempre uso el mismo ejemplo (bueno uso otro también pero se podría malinterpretar) para que se me entienda "si soy una tienda de zapatos y mi objetivo de negocio es vender zapatos ¿me presento así en la red?" Yo digo que no... Debes presentarte como un usuario mas (es importante que te identifiquen como un usuario mas y no como una marca) y ofrecer al resto de usuarios de la red tu propuesta de valor que perfectamente podría ser "experto en zapatos", pero claro no vale (muchos lo hacen) presentarte como tal, no hace falta decir que lo eres debes demostrarlo, participando como un usuario mas, los usuarios no somos tontos y sabemos distinguir quien nos aporta valor y quien pretende solo vender. Si vienes a mí de manera directa es muy complicado que me alcances pero si me aportas valor probablemente seré yo el que te siga. Tus acciones deben servir para que el resto de usuarios te identifiquen como una propuesta de valor para ellos, eso te generara una comunidad relacionada con tus intereses, con usuarios comprometidos que te recomendaran a otros usuarios y te seguirán. Los usuarios somos agradecidos con lo que nos aporta valor.
Y una vez implantada esa propuesta de valor en la memoria colectiva de los usuarios ¿no creéis que será más fácil alcanzar los objetivos de negocios? ¿nuestras acciones no tendrán más éxito?
Lo realmente importante en la red son los usuarios, mirando sus intereses conseguiremos los intereses de nuestro cliente. A todo esto yo le llamo posicionamiento web, otros lo llaman acciones de marketing ¿que más da?
Lo importante es conocer el medio y desgraciadamente no se esta teniendo en cuenta...
jueves, 24 de octubre de 2013
lunes, 21 de octubre de 2013
Botón de llamada a la acción animado solo con CSS
He realizado un botón de call-to-action animado solo con CSS, simple pero que permite llamar la atención del visitante hacia el. La animación es permanente y se detiene al pasar el ratón sobre ella.
Contáctame
.contacta a {
float:left;
font-size: 18px;
font-style: italic;
margin: 40px;
padding: 60px 30px;
border: 3px solid #e1e1e1;
background: red;
border-radius: 80px;
color: #fff;
box-shadow: 4px 4px 6px rgba(0,0,0,0.30);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#e1e1e1', Direction=145, Strength=5);
animation: pulso 4s ease-out;
animation-iteration-count: infinite;
-ms-animation: pulso 4s ease-out;
-ms-animation-iteration-count: infinite;
-webkit-animation: pulso 4s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulso {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@keyframes pulso {
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
0% {-ms-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-ms-transform: scale(1.2, 1.2); opacity: 0.0;}
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
}
.contacta a:hover {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-ms-animation-play-state:paused;
background: green;
}
float:left;
font-size: 18px;
font-style: italic;
margin: 40px;
padding: 60px 30px;
border: 3px solid #e1e1e1;
background: red;
border-radius: 80px;
color: #fff;
box-shadow: 4px 4px 6px rgba(0,0,0,0.30);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#e1e1e1', Direction=145, Strength=5);
animation: pulso 4s ease-out;
animation-iteration-count: infinite;
-ms-animation: pulso 4s ease-out;
-ms-animation-iteration-count: infinite;
-webkit-animation: pulso 4s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulso {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@keyframes pulso {
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
0% {-ms-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-ms-transform: scale(1.2, 1.2); opacity: 0.0;}
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
}
.contacta a:hover {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-ms-animation-play-state:paused;
background: green;
}
El HTML es el básico de un enlace pero en un div
<div class="contacta">
<a href="http://consejosblogge.blogspot.com/">Contáctame</a>
</div>
<a href="http://consejosblogge.blogspot.com/">Contáctame</a>
</div>
Se le pueden dar otros uso pero yo lo he hecho para el botón de contacto del footer...
martes, 8 de octubre de 2013
Somicro Social Icons
Somicro Social Icons es un set gratuito de íconos de redes sociales sencillos,pero muy elegantes en forma de círculos, ideales para un sitio web o blog.
CARACTERÍSTICAS
Pack de 40 íconos de las principales redes sociales: AddThis, App.net, Behance, Blogger, DeviantART, Digg, Dribbble, Email, Facebook, Flickr, Forrst, Foursquare, GitHub , Google+, Indiegogo, Instagram, Kickstarter, Last.fm, Linkedin, Livejournal, Messenger, MySpace, Orkut, Paypal, Picasa, Pinterest, Reddit, RSS, ShareThis, Skype, Soundcloud, Spotify, StackOverflow, StumbleUpon, Tumblr, Twitter, Vimeo, WordPress, Yelp, Youtube.
Autor : Veodesign
Formato: PNG.
Tamaño: 35x32 px.
CARACTERÍSTICAS
Pack de 40 íconos de las principales redes sociales: AddThis, App.net, Behance, Blogger, DeviantART, Digg, Dribbble, Email, Facebook, Flickr, Forrst, Foursquare, GitHub , Google+, Indiegogo, Instagram, Kickstarter, Last.fm, Linkedin, Livejournal, Messenger, MySpace, Orkut, Paypal, Picasa, Pinterest, Reddit, RSS, ShareThis, Skype, Soundcloud, Spotify, StackOverflow, StumbleUpon, Tumblr, Twitter, Vimeo, WordPress, Yelp, Youtube.
Autor : Veodesign
Formato: PNG.
Tamaño: 35x32 px.
lunes, 7 de octubre de 2013
Reputación online o valor digital
Hablamos mucho de reputación digital, sobre cómo alcanzarla, cuidarla, mimarla y los efectos positivos que nos puede traer en nuestro entorno profesional pero ese concepto ¿nos diferencia de los demás?
Siempre he considerado que uno debe diferenciarse de lo que el resto de tus competidores hacen y eso en una red tan masificada donde es difícil separar el grano de la paja se hace indispensable, la diferenciación es una de las claves de la presencia en red y el posicionamiento web. Sin embargo el trabajar una buena reputación digital no nos hace diferenciarnos, es relativamente sencillo conseguir una buena e-reputación, cierta o no pero no es complicado. Por eso yo prefiero el término valor digital.
Nuestra huella digital, queramos o no queramos, ya forma parte de nuestra vida cotidiana y conforme mas avance la era digital, mas importancia tendrá. El discurso de reputación digital, en mi opinión, se queda corto, lo que se consigue son clones, con particularidades intrínsecas, pero clones al fin y al cabo. Muchos no se dan cuenta de que sus logros en la red son consecuencia de ese valor digital que inconscientemente han logrado, buscando reputación digital logran valor digital.
¿Y que es el valor digital?
Es un paso más allá de la reputación digital y que a diferencia de esta última, podemos controlar y gestionar. Es el aporte de diferenciación con respecto a los demás teniendo en cuenta a los usuarios que hace que te conviertas en referencia. Los usuarios son el FACTOR en la era digital, todo lo que no este basado en esa idea es complicado que salga adelante, si el concepto es alcanzar visibilidad, viralidad y conversión de manera directa, nos equivocamos. Ante todo debemos conocer a los usuarios de la red, olvidarnos de publico objetivo y clientes, esos los alcanzaras cuando realmente conozcas las preferencias de un usuario tipo de Internet. Y sobre ese usuario tipo, si tengo claro una única cosa, no le gusta un alcance directo en su ir y venir por redes, en muchos casos lo considera una intromisión, y en este punto quiero recordar un riesgo que se esta corriendo ¿recuerdan la ceguera a los banners?, pues cada día estoy mas convencido de que se esta generando una ceguera a campañas.
La búsqueda de la empatía del usuario debe ser el objetivo principal de cualquier marca o profesional pero yo añado siempre algo mas, "de manera indirecta".
El valor digital debe plantearse como ¿que puedo aportar a los demás? ¿cuál es mi propuesta de valor? Una propuesta de valor que no necesariamente debe estar alineada con el objetivo directo de marca sino pensada en los usuarios. Si esa propuesta de valor es válida, nos encontraremos que son los propios usuarios los que nos buscan, nos dará un valor digital que es el que realmente permite conseguir objetivos.
Más que reputación online... busquemos valor digital
martes, 1 de octubre de 2013
Slider para Blogger
Si hay una cosa que recriminar a Blogger es lo difícil que resulta configurar su página de inicio de una forma diferente, por su propia estructura estamos abocados a mostrar una cantidad de post, resumidos o no, junto con una sidebar y alguna otra configuración horizontal con widget. Wordpress es mucho más manejable en ese sentido, permite crear páginas de inicio mucho más atractivas visualmente.
Con los cambios que últimamente estoy realizando, me propuse modificar esto y hacer que los posts de la página de inicio no fueran como una lista interminable y aparecieran en un slider.
Como siempre pensé en utilizar jQuery para ello y encontré un pequeño plugin que hacia la función que quería. Para conseguirlo deberéis bajaros este fichero e insertar antes de </body> lo siguiente
Varias consideraciones a tener en cuenta:
.- No recomiendo que se instale a usuarios pocos avanzados en la codificación Blogger, no me hago responsable de lo que pueda pasar. El código se proporciona tal cual.
.- Hay que tener la librería jQuery implementada.
.- Las entradas en el home deben tener el formato resumido, ya sea usando el formato snippet que proporciona Blogger (recomiendo esta opción para entradas resumidas) o cualquier otra forma.
.- Las dos imágenes de la flechas que se usan en el slider copiarlas y subirlas a vuestro propio alojamiento, no garantizo mantenerlas.
.- El código CSS proporcionado es solo indicativo, deberá ajustarse según vuestras preferencias.
.- El fichero js, dependiendo de las dimensiones de vuestro blog también debe ajustarse, editándolo veréis $('.blog-posts.hfeed').animate({marginLeft:'-=1120'},1000,function(){ ... y $('.blog-posts.hfeed').animate({marginLeft:'+=1120'},1000,function(){ . Las dos cifras en rojo indican el desplazamiento hacia la derecha y la izquierda. Ahí podéis ajustar ese desplazamiento para que quede bien. Subirlo a vuestra web de alojamiento e insertarlo donde pone URL DE ALOJAMIENTO DEL FICHERO JS
.- El número de entadas a mostrar se ajusta editando el widget Blog1 en el diseño de plantilla.
Creo que no se me olvidado nada, con este slider se nos abre la posibilidad de mejorar mucho el diseño de nuestras paginas de inicio...
Con los cambios que últimamente estoy realizando, me propuse modificar esto y hacer que los posts de la página de inicio no fueran como una lista interminable y aparecieran en un slider.
Como siempre pensé en utilizar jQuery para ello y encontré un pequeño plugin que hacia la función que quería. Para conseguirlo deberéis bajaros este fichero e insertar antes de </body> lo siguiente
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Blog1 {
margin:10px auto 40px;
width:95%;
height:230px;
overflow:hidden;
}
.blog-posts.hfeed div{
width:340px;
height:230px;
position:relative;
float:left;
margin: 10px;
padding: 0 5px;
}
.next {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNe7JdaEmExE8FG700xiERPfpKiP0nYN0wdNkYZ73fKu0mwTIfhV9rASV0ZURyk4CYUPb-WM_v65gB0Ee1wU1gZBN6LmnZW_cve0DPTwNh6ghDd0Wj0LFOY_Lcm7Ka5mjXQuCnu3ioG0/s1600/prev.png) center left no-repeat;
margin-top: -210px;
width: 40px;
height: 230px;
position: absolute;
opacity: 0.7;
}
.prev {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAziOxh9T9g1_etVXzXqiQzIb5Tn5soWhAFGPbPdcfZk0vfHleGVK07zEpPZbCOnPE9T0Ny_TR3jCl3eVdMcrdgl1CqhJgu7UbBOYJqyznEeXtmpyxgEEKfJXFLV1_ILpSh3jNTHRiOu0/s1600/next.png) center no-repeat;
margin-top: -210px;
width: 40px;
height: 230px;
position: absolute;
opacity: 0.7;
right: 10px;
}
</style>
<script src='URL DE ALOJAMIENTO DEL FICHERO JS'/>
</b:if>
<style>
#Blog1 {
margin:10px auto 40px;
width:95%;
height:230px;
overflow:hidden;
}
.blog-posts.hfeed div{
width:340px;
height:230px;
position:relative;
float:left;
margin: 10px;
padding: 0 5px;
}
.next {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNe7JdaEmExE8FG700xiERPfpKiP0nYN0wdNkYZ73fKu0mwTIfhV9rASV0ZURyk4CYUPb-WM_v65gB0Ee1wU1gZBN6LmnZW_cve0DPTwNh6ghDd0Wj0LFOY_Lcm7Ka5mjXQuCnu3ioG0/s1600/prev.png) center left no-repeat;
margin-top: -210px;
width: 40px;
height: 230px;
position: absolute;
opacity: 0.7;
}
.prev {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAziOxh9T9g1_etVXzXqiQzIb5Tn5soWhAFGPbPdcfZk0vfHleGVK07zEpPZbCOnPE9T0Ny_TR3jCl3eVdMcrdgl1CqhJgu7UbBOYJqyznEeXtmpyxgEEKfJXFLV1_ILpSh3jNTHRiOu0/s1600/next.png) center no-repeat;
margin-top: -210px;
width: 40px;
height: 230px;
position: absolute;
opacity: 0.7;
right: 10px;
}
</style>
<script src='URL DE ALOJAMIENTO DEL FICHERO JS'/>
</b:if>
Varias consideraciones a tener en cuenta:
.- No recomiendo que se instale a usuarios pocos avanzados en la codificación Blogger, no me hago responsable de lo que pueda pasar. El código se proporciona tal cual.
.- Hay que tener la librería jQuery implementada.
.- Las entradas en el home deben tener el formato resumido, ya sea usando el formato snippet que proporciona Blogger (recomiendo esta opción para entradas resumidas) o cualquier otra forma.
.- Las dos imágenes de la flechas que se usan en el slider copiarlas y subirlas a vuestro propio alojamiento, no garantizo mantenerlas.
.- El código CSS proporcionado es solo indicativo, deberá ajustarse según vuestras preferencias.
.- El fichero js, dependiendo de las dimensiones de vuestro blog también debe ajustarse, editándolo veréis $('.blog-posts.hfeed').animate({marginLeft:'-=1120'},1000,function(){ ... y $('.blog-posts.hfeed').animate({marginLeft:'+=1120'},1000,function(){ . Las dos cifras en rojo indican el desplazamiento hacia la derecha y la izquierda. Ahí podéis ajustar ese desplazamiento para que quede bien. Subirlo a vuestra web de alojamiento e insertarlo donde pone URL DE ALOJAMIENTO DEL FICHERO JS
.- El número de entadas a mostrar se ajusta editando el widget Blog1 en el diseño de plantilla.
Creo que no se me olvidado nada, con este slider se nos abre la posibilidad de mejorar mucho el diseño de nuestras paginas de inicio...
Suscribirse a:
Entradas (Atom)