miércoles, 26 de junio de 2013

Posicionamiento web en la actualidad. La realidad del SEO

seo

Mucho se habla sobre SEO y como posicionar, muchos recomendamos y seguimos las directrices que Google marca para aparecer correctamente posicionados en el buscador predominante en la red pero los resultados de búsqueda que obtenemos la mayoría de las veces nos muestran que siguiendo prácticas no recomendadas apareces bien posicionado.

Cada día vemos en nuestras búsquedas resultados que nos sorprenden por su baja calidad, como se manipulan esos resultados pese a que Google continuamente nos alerta sobre el uso de esas malas prácticas para aparecer posicionados, incluso saca dos nuevos algoritmos, Panda y Penguin, para solucionar estos problemas, pero ¿se ve algún avance? La respuesta es que poco o muy poco.

Google recomienda, no hagas link wheel y todos los días vemos ruedas de enlaces, recomienda no usar EMD, nombre de dominios coincidentes con búsquedas y vemos que eso por si solo te posiciona, recomienda no subas tu sitio a directorios para conseguir enlaces y sobre todo ¡no los compres! ¿os digo el resultado? ¿hablamos de keyword stuffing?

Podríamos coger cada una de las recomendaciones de Google y veríamos que salvo contadas excepciones sus algoritmos no son capaces de hacer lo que predican. Hoy, sin pasarte, compras un buen dominio con nombre exacto, compras enlaces, creas una rueda y metes x veces la palabra clave y tachan!! posicionado en dos semanas...

También es cierto que pasado un tiempo suelen bajar o desaparecer, pero como se reitera la táctica, de nuevo vuelven a subir. Esa es la realidad que tenemos en SEO.

Personalmente no hago ese tipo de prácticas ni las recomiendo, prefiero seguir las directrices, siguiéndolas, a la larga acabas bien posicionado sin sobresaltos ni sustos, posicionar es una acción a medio, largo plazo. Pero también creo que Google, hasta ahora, es incapaz con sus algoritmos de hacer lo que predica, un ejemplo, según el propio Matt Cutts, el algoritmo Penguin en su versión 1.0 solo rastreaba las home de los sitios, no era capaz de analizar el sitio completo, la actualización 2.0 parece que si lo hace, aunque yo lo sigo dudando.

La "limpieza de resultados" efectuada hasta ahora me parece solo un lavado de cara, quienes han sufrido una penalización que achacan a alguna actualización de los algoritmos de Google tal vez se olvidan del único algoritmo que funciona bien hasta ahora, el humano. Google insiste, en cada anuncio que hace, a que denunciemos ese tipo de prácticas, formularios de denuncia que funcionan realmente bien, pero claro es lo que se llama "penalización manual" y nuestra "competencia" sabe de su existencia...

También estoy convencido que algorítmicamente hablando existen categorías de dominios, un dominio con autoridad se puede permitir practicas que otros con menos categoría no puede, el SEO según Google no es igual para todos.

El resultado de todo esto es que tenemos, gente practicando SEO "negro", otros "gris" y otros "blanco", resultados de búsquedas malos, clientes que no se fían y no saben a quien escuchar, mucha gente escribiendo sobre SEO y pocos practicándolo, en definitiva algo muy parecido al mercado persa del Social Media.

Podría seguir dando datos, de todo lo que he expuesto tengo ejemplos significativos, pero realmente la pregunta es ¿por que Google no acaba con esto?

Pues a estas alturas creo que hacerlo de manera automática debe resultarle a Google altamente dificultoso, son prudentes y no quieren perjudicar a nadie, sus actualizaciones algunas veces incluso son una marcha atrás, la ultima de Panda por ejemplo. No quieren correr el riesgo de penalizar sitios con buenas prácticas y prefieren ir poco a poco, pero la realidad es que así llevamos ya un par de años y no se ven avances significativos. Se aprecian intentos de corregir estos problemas, de los que son plenamente conscientes, pero ¿son suficientes?

Google tendría que dar el paso adelante que la mayoría de nosotros pedimos para mejorar los resultados de las búsquedas, pero eso seguramente significaría rehacer completamente su algoritmo de búsqueda que pocas personas conocen en su totalidad en Google, no es un problema de conocimiento si no de querer hacerlo y asumir el riesgo que supondría darle un vuelco a lo establecido hasta ahora....

jueves, 20 de junio de 2013

Cómo dejar de ser miembro de una comunidad de Google+

Es normal arrepentirse de una acción tomada, como es la de haber aceptado ser miembro de una comunidad en Google+. Tal vez pienses en abandonarla, porque no tienes el tiempo suficiente para poder participar en ella.



Cualquiera que sea la razón por la cual has decidido dejar de ser miembro de una comunidad a la que perteneces, puedes estar seguro de que lo puedes hacer libremente y sin ninguna represalia. Bueno, en esto último yo mejor no digo nada xD



La pregunta es ¿cómo hacerlo? y la respuesta ahora mismo te la voy a dar ;)



Simplemente vas a la comunidad en cuestión, y haces click en el icono de engranaje que aparece debajo del nombre de la comunidad, a un lado de "Notificaciones", por ahora situado a la izquierda de la página.




Opciones en la comunidad







Al hacerlo, se desplegará una lista de opciones entre las cuales está la que dice: Abandonar la comunidad. Haz click sobre ésta, y listo, estarás abandonando a la comunidad.



Ten en cuenta que, dejar de ser miembro de una comunidad pública, no significa que las publicaciones que hayas hecho dejarán de aparecer en la comunidad o en tu perfil. Si no quieres que aparezcan tendrás que eliminarlas una a una.





Última actualización: 00/00/00

¿Afecta a la Clasificación de Nuestro Sitio en Google, el uso de Fotografías de Bancos de Imágenes?

Visitando la comunidad de Seo y Marketing me encontré con una publicación de +Carlos Pizcos que compartía un vídeo del ingeniero Matt Cutts, quien forma parte del honorable equipo de Google, en donde responde una pregunta que en español diría más o menos así:


¿El uso de fotografías de Bancos de imágenes en las páginas tienen un efecto negativo en la clasificación de los motores de búsqueda? ¿Fotos originales ayudarían en este sentido?

En dicho vídeo y que puedes ver al final de la entrada, Matt Cutts responde que, el usar fotografías de bancos de imágenes, "no" es un factor que se tome en cuenta en el algoritmo de Google en este momento. Tampoco se toma en cuenta si es una imagen original.



En otras palabras no existe una diferencia entre el hecho de usar imágenes originales o no. Aunque al final hace mención de que ésto es una buena sugerencia de lo que en un futuro podrían mirar en términos de "calidad" de la búsqueda.



Así que, por el momento no hay que preocuparse en ese sentido, y puedes seguir usando imágenes de terceros en las publicaciones del blog. Sin embargo, tal vez ésto sirva para hacernos pensar en ir creando nuestras propias imágenes en lugar de usar las de otros, claro, si el tiempo, las ganas y nuestra creatividad lo permite.



¿Utilizas imágenes propias en cada una de tus publicaciones?. ¿Crees que Google debería considerar si un sitio usa imágenes propias o no, a la hora de mostrar los resultados de búsqueda?. ¿Usar imágenes/fotografías propias debería repercutir positivamente para posicionarse en los mejores resultados de búsqueda? Sé que son muchas preguntas, pero me gustaría conocer tu opinión. Espero tus comentarios.










martes, 18 de junio de 2013

Gadget Formulario de Contacto de Blogger

Hoy hablaremos un poco sobre el gadget Formulario de Contacto de Blogger: cómo implementarlo en nuestro blog y cómo personalizarlo.

AGREGAR GADGET DEL FORMULARIO AL BLOG

Es muy sencillo agregar este gadget a la sidebar de nuestro blog; sólo seguimos estos pasos:


1.§ Vamos a Diseño - Añadir un gadget y del menú izquierdo elegimos la pestaña Más gadgets y luego Formulario de Contacto.

2.§ Le colocamos un título a nuestro gadget y le damos en Guardar.

PERSONALIZAR EL GADGET

Ahora añadiremos algunos estilos para personalizar nuestro formulario de contacto.


1.§ Vamos a Plantilla - Editar HTML.

2.§ Con ayuda de CTRL+F buscamos ]]></b:skin> y antes de éste pegamos lo siguiente:
.contact-form-widget { /*contenedor del gadget, estilos de texto */
width: 400px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
font-size:12px;
font-weight: bold;
text-align: left;
}
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit { /*estilos de las cajas */
color: #000000;
width: 100%;
max-width: 100%;
margin-bottom: 5px;
border: 1px solid #A9A9A9;
background-color: #F2F2F2;
}
.contact-form-button-submit { /*estilos del botón */
width: 100px;
background: #F6F4DA;
border: 1px solid #000000;
color: #FFFFFF;
}
3.§ Modificamos los estilos a nuestro gusto, verificamos que todo esté bien y le damos clic en Guardar plantilla.

Personalizar el Enlace de "Más información" fácilmente usando el código de Blogger

Si utilizas el salto de linea de Blogger para resumir tus entradas, sabrás que por defecto se agrega un enlace a la entrada que dice: "Mas información" y te envía al post completo. Por defecto, dicho enlace no tiene ningún estilo y no resalta del resto del contenido o solo muy poco, lo cual puede hacer que pase desapercibido a simple vista.



Pues bien, este enlace, como otros enlaces que haya en tu plantilla los podemos personalizar fácilmente, dándoles la apariencia del botón del formulario de contacto de Blogger, con una variante que más adelante te explicaré.



Esto lo podemos conseguir, ya que Blogger nos envía cierto código CSS, para manipular la apariencia del botón del formulario de contacto y se vea así de mono como puedes ver.



Lo interesante aquí, es que no es necesario agregar mas código a tu blog, o solo unas cuantas lineas. El CSS que te menciono, no incluye ninguna imagen, así que los botones se crean solo con código CSS.



Bueno, para no confundirte o liarte mucho con tanto rollo, mejor veamos un ejemplo, y en este caso, veremos cómo crear dos estilos diferentes para el enlace de "Mas información" ;)




Opción 1. Personalizar el enlace que dice "Más información" (botones grises)




Si  sigues los siguientes pasos, el enlace de leer más tendrá la apariencia que puedes ver en la imagen de abajo:




Personalizar enlace a la entrada completa






En este caso no agregaremos ni una sola linea de CSS, aunque al final de los pasos, he agregado una nota para que puedas cambiar el color del texto y eliminar el subrayado si así lo quieres, usando solo unas cuantas lineas de CSS. Dicho lo anterior vemos cómo lograrlo:



Pasos




  1. Desde el panel de Blogger, selecciona Plantilla  luego Editar HTML.

  2. Una vez que hayas accedido al editor, haz click en el botón que dice: Plantilla de formato, y luego, pulsa las teclas Ctrl + F simultáneamente.

  3. Hecho lo anterior, habrás activado el cuadro de búsqueda del editor. Ahora pega el siguiente texto en el campo: jump-link y pulsa la tecla Enter.


  4. Una vez que te encuentres en el código en cuestiónubícate en la linea que está debajo, me refiero a la que empieza así<a href='data:post.url + ..., y agrega esto, que he coloreado de azul: 



    class='contact-form-button'



    La linea que te menciono deberá quedar así:



    <div class='jump-link'>

      <a class='contact-form-button' href='data:post.url + "#more"'title='data:post.title'> <data:post.jumpText/>

      </a>

    </div>

    ...




  5. Verifica en vista previa y si todo luce bien, guarda los cambios.





¡Y listo!, habrás personalizado el enlace de leer más sin agregar una sola linea adicional de CSS en tu plantilla.






Nota: El color de texto que tenga el enlace (por defecto, el poner el puntero del ratón encima y el enlace visitado), dependerá de cómo esté declarado en la plantilla el color de los enlaces. Todo eso tú lo defines desde el diseñador de plantillas. Por otro lado, el subrayado aparecerá si así está definido que suceda, al poner el puntero del ratón sobre éste.



Si quieres personalizar el color del texto del enlace, por ejemplo ponerlo de otro color y desaparecer el subrayado del texto  puedes usar algo como esto:



.jump-link a{

color: #0c0c0c; /*color de texto*/

text-decoration: none;

}





Y que puedes agregar desde el diseñador de plantillas, usando la opción de Añadir CSS, que encuentras al final, cuando seleccionas Avanzado.







Opción 2. Personalizar el enlace de Más información con botones azules (estilo característico de Google)






Por otro lado, si te gusta el botón azul del formulario de contacto, esto es para ti ;)



Podemos usar este estilo una y otra vez en los enlaces del blog fácilmente y agregando unas cuantas lineas de CSS. 





Siguiendo con nuestro ejemplo, agregaremos ese estilo al enlace de "Mas información". Dicho enlace tendrá esta apariencia una vez que hayas hecho lo que mas a adelante te diré.





Enlace de Mas información personalizado


¿Te gusta la idea? Entonces, echa un vistazo a los siguiente pasos para ver cómo lograrlo ;)



Pasos




  1. Estando en el panel de Blogger, selecciona Plantilla,  luego haz click Editar HTML para acceder al Editor.

  2. Una vez que hayas accedido al editor, haz click en el botón que dice: Plantilla de formato, y luego, pulsa las teclas Ctrl simultáneamente.

  3. Hecho lo anterior, habrás activado el cuadro de búsqueda del editor. Ahora pega el siguiente texto en el campo: jump-link y pulsa la tecla Enter. 

  4. Una vez que te encuentres en el código en cuestiónubícate en la linea que está debajo, me refiero a la que empieza así<a href='data:post.url + ..., y agrega esto: 



    class='contact-form-button contact-form-button-submit'



    La linea que te menciono 
    deberá quedar así:



    <div class='jump-link'> 

      <a class='contact-form-button contact-form-button-submit' href='data:post.url + "#more"'title='data:post.title'> <data:post.jumpText/>

      </a> 

    </div>

    ...

  5. Verifica en vista previa y si todo luce bien, guarda los cambios.

  6. Finalmente tendrás que usar un poco de CSS para poner el texto de color blanco y evitar que se subraye el texto, para ello, seleccionas la pestaña Plantilla, luego vas a Personalizar> Avanzado> Añadir CSS y en el cuadro pegas el siguiente CSS.



    .jump-link a{

    color: #fff;

    text-decoration: none;

    }






  7. Desde ahí podrás ver el aplicado lo anterior, luego, guarda el cambio haciendo click en el botón "Aplicar al blog".






¡Y listo!, habrás personalizado el enlace de leer más agregando solo una regla de CSS en tu plantilla.







Notas Finales


  • Los botones se crean sin usar ninguna imagen, solo usando algunas propiedades de CSS3, que solo son soportadas por navegadores modernos, incluyendo Internet Explorer 10. En en versiones anteriores de Internet Explorer, no se verán algunos efectos, como las sombras al poner el puntero del ratón encima, y al hacer click sobre éste, en el caso de la segunda opción. 

  • Este tutorial ha sido creado para todos aquellos que usan las nueva (aunque ya no tanto) plantillas de Blogger, me refiero a las del diseñador de plantillas.



Espero sea útil, y que el tutorial sea de tu agrado. No dudes en comentarme cualquier cosa y si te gusta y crees que puede serle útil a alguien, ¡compártelo! ;)

viernes, 14 de junio de 2013

Widget de Opciones Visible solo para el Administrador del Blog

Algo que echamos de menos muchos de los que ocultamos la barra de navegación de Blogger, es la posibilidad de ingresar al editor de entradas para empezar a escribir una nueva entrada cuando estamos en nuestro blog.



Si utilizas las vistas dinámicas de blogger, sabrás que Blogger ha integrado dos enlaces que aparecen como iconos, con los cuales es posible acceder con uno al editor de entradas, y con el otro al escritorio.



Pues vamos a hacer algo similar, para que como administrador del blog puedas ingresar tanto al editor de Blogger como al escritorio. No usaremos ninguna imagen, ya que estamos agregando los datos de éstas, usando este herramienta para convertir imágenes en base64, de ese modo no habrá que alojar ninguna imagen, ni afectar la carga del blog. El widget tendrá la apariencia que puedes ver a continuación:







¿Te gusta la idea?, entonces échale un vistazo a los pasos para saber cómo hacerlo ;)





Pasos





  1. Copia el siguiente código, y págalo en una nota de tu computadora.



    <span class='item-control blog-admin'> <span class="panel_adm"> <strong>Opciones del administrador</strong> <a class="escritorio" href="http://www.blogger.com/home" target="_self" title="Escritorio">Escritorio</a> <a class="post-nuevo" href="//www.blogger.com/post-edit.g?blogID=123456789&from=pencil" target="_self" title="Post Nuevo">Nuevo post</a> </span> </span>




  2. Selecciona la pestaña Diseño, y toma nota del id de tu blog, que aparece en la barra de direcciones del navegador, y que puedes identificar porque aparece después de blogID=  como puedes apreciar en la siguiente imagen:






    Barra de direcciones del navegador




  3. Una vez que tengas el Id de tu blog, ponlo en lugar del número que aparece resaltado de rojo (123456789) en el código del paso 1.

  4. Luego, agrega el código del paso 1 ya editado a un gadget con la opción HTML/Javascript, en la ubicación que quieras que aparezca, por ejemplo, como primer elemento en la columna lateral y guarda los cambios en Guardar disposición.

  5. Finalmente, agrega el CSS, en la opción de Añadir CSS que se encuentra en el diseñador de plantillas (Plantilla > Personalizar > Avanzado > Añadir CSS) y guarda el cambio en "Aplicar al blog".

    span.panel_adm{display:block;background:#f4f4f4;width:220px;height:75px;border:1px solid #e8e8e8}

    .panel_adm strong{font-size:15px;display:block;width:100%;border-bottom:1px solid #e8e8e8;text-indent:6px;padding:4px 0;margin-bottom:10px}a.escritorio{background-image: url(data:image/gif;base64,R0lGODlhEgARALMAALu7u6WlpcfHx46OjoODg2FhYZmZmenp6WxsbHd3d93d3VVVVdLS0rCwsPT09EpKSiH5BAAAAAAALAAAAAASABEAAARW0MkpAaA4t/da/hvXfVQojqR5opi6spI6HEdwevGJUMntACsDxXYC2BCiAqUgQgodKoJAQDgFDhPB6yWgKF6LFQOzAnxPGaZoYDgtMr0tJ5EZyDmESQQAOw==);background-repeat:no-repeat;background-position:10% 10%}

    a.post-nuevo{background-image:url(data:image/gif;base64,R0lGODlhEgAQALMAAHd3d93d3cfHx2FhYWxsbIODg46OjrCwsFVVVdLS0kpKSvT09AAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAASABAAAARCcMlJZULq1D2P+gFHJUPiIaG4XApiJuqKfUMsfy2ssp8b87nfLBgD4HyxgoBA3LUEAF3M8CHYJAEFQHNdHATd8CYCADs=);background-repeat:no-repeat;background-position:10% 12%}

    a.escritorio, a.post-nuevo {display:inline-block;height:22px;padding:4px 0 0 28px;color:#3399cc;font-size:12px}

    a.escritorio{margin-right:24px}

    a.post-nuevo:hover,a.escritorio:hover{text-decoration:underline !important;}






¡Y listo!, ya tendrás un widget que solo podrás ver tú como administrador del blog, y con el que podrás acceder al editor de entradas como al escritorio ;)



Notas finales:


  • Puedes cambiar el texto que dice: "Opciones del administrador" por "Mis opciones" o cualquier otro texto.



Espero sea útil ;)



Formulario de Contacto de Blogger Personalizado (1)

Hola, ¿qué tal? Pues seguimos con el tema del formulario de contacto que hace poco fue agregado a la lista de gadgets que Blogger ofrece y hoy traigo para compartir contigo un estilo personalizado para que puedas usar en tu blog.



Por defecto, el formulario de contacto tiene esta apariencia:









Pues haremos unos cambios para crear un formulario más compacto, como puedes ver en la imagen de abajo, con un estilo minimalista y fresco. Ideal para quienes vayan a colocarlo en una columna lateral o en una columna al fondo de la página. Te facilitaré dos opciones, la primera la conseguiremos con CSS, algunos cambios en el código del widget, y con la ayuda jQuery y un pequeño complemento (Javascript). La otra opción solo requerirá de CSS. No tendrás que editar el ancho del formulario ya que éste se adaptará al ancho del lugar donde lo coloques.



Bueno, ahora vayamos al grano y veamos cómo personalizar el formulario.






Opción 1. Usando Jquery






Si ya utilizas jQuery en tu plantilla, y las nuevas plantillas del diseñador de plantillas, esta opción puede ser conveniente para ti.



Usamos un atributo nuevo en HTML5 llamado "placeholder" con el cuál agregamos los textos de cada campo: "Nombre, Correo electrónico y Mensaje" respectivamente, luego, cuando el usuario hace click en el campo y empieza a teclear, desaparece el texto.



Dicho atributo es soportado por navegadores modernos incluyendo Internet Explorer 10. Pero no funciona en versiones antiguas de Internet Explorer, como Internet Explorer 9, es decir, no aparece el texto que se agrega como valor en el atributo, por lo tanto, será necesario usar un complemento de jQuery, mismo que en scriptiny.com  nos facilitan, para que aparezca el texto colocado en dicho atributo, el cual desaparecerá al hacer click en el campo.



La apariencia del formulario la puedes ver a continuación en la imagen:





Formulario personalizado


Nota: El tipo de fuente del título lo heredará de tu plantilla.



Y por supuesto puedes ver el widget en acción en el blog de la Demostración.




Cómo poner este estilo de formulario, paso a paso







  1. Agrega el gadget de Formulario de contacto. Esto lo haces seleccionando Diseño > Añadir gadget, después, seleccionas la pestaña "Más gadgets" y lo añades.  Puedes ponerlo al final del blog, o en la columna lateral.

  2. Selecciona la pestaña Plantilla > Personalizar > Avanzado > Añadir CSS, y ahí en el cuadro agrega este CSS:





    .contact-form-widget {

    max-width:100% !important; font-size:16px;

    }

    .completo{width:100%;margin:0; padding:0;}

    .medio, .medioa{float:left; width:49%;height:40px;margin:0; padding:0;}

    .medioa{float:right;}


    .contact-form-name, .contact-form-email{height:38px; line-height:38px;}

    .contact-form-name, .contact-form-email,textarea.contact-form-email-message{

    color:#444; max-width:100% !important;

    background-color:#f1f1f1;

    border-radius:2px;text-indent:8px;

    padding:0;border:1px solid #ddd;

    }

    textarea.contact-form-email-message{overflow:auto;margin:10px 0 0 0; padding-top:12px;outline:none !important;}

    .contact-form-email:hover, .contact-form-name:hover, textarea.contact-form-email-message:hover {border:1px solid #ddd !important; }

    .form input:focus, textarea.contact-form-email-message:focus{

    background-color:#eaeaea;

    box-shadow: inset 0 1px 2px #ccc;

    border:1px solid #cbcbcb !important;

    outline:none !important;

    }

    .contact-form-button-submit{

    width:80px;font-size:16px;height:40px;margin:9px 0 0 0; text-align:center;

    border-radius: 2px;font-weight:bold;cursor:pointer}



    .derecha{text-align:center}

    ::-webkit-input-placeholder {color: #6c6c6c;

    }

    :-moz-placeholder {

    color: #6c6c6c;

    }

    ::-moz-placeholder {

    color: #6c6c6c;

    }

    :-ms-input-placeholder {

    color: #6c6c6c;

    }




  3. Desde el panel de Blogger, selecciona la pestaña "Plantilla", luego vas a "Editar HTML", y después selecciona el widget: "ContactForm1" de la lista desplegable de widgets que dice: "Ir al widget"


    Lista de widgets




  4. Una vez que el editor te envíe al código del widget del formulario de contacto, selecciónalo con el mouse, lo eliminas y en su lugar pones el código que a continuación te facilito:



    <b:widget id='ContactForm1' locked='false' title='Envíame un mensaje' type='ContactForm'>
    <b:includable id='main'>

    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'>
    <data:title/>
    </h2>
    </b:if>
    <div class='contact-form-widget'>
    <div class='form'>
    <form name='contact-form'>
    <!-- data:contactFormNameMsg/-->
    <div class='completo'>
    <div class='medio'>
    <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' placeholder='Nombre' rows='30' type='text' value=''/>
    <!--data:contactFormEmailMsg/-->
    </div>
    <div class='medioa'>
    <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' placeholder='Correo Electrónico' rows='30' type='text' value=''/>
    <!-- data:contactFormMessageMsg/ -->
    </div>
    </div>
    <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' placeholder='Mensaje' rows='8'>
    </textarea>
    <div class='derecha'>
    <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>

    </div>
    <p/>
    <div style='text-align: center; max-width: 222px; width: 100%; margin-top:5px;'>
    <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
    <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
    </div>
    </form>
    </div>
    </div>
    <b:include name='quickedit'/>
    </b:includable>
    </b:widget>






    Asegúrate de eliminar el código del widget completo, en ocasiones se despliega al seleccionarlo. La clave está en ver que el código seleccionado contenga la parte que he resaltado de rojo, a continuación:

    <b:widget id="ContactForm1" locked="false" title="Envíame un mensaje" type="ContactForm">...</b:widget>


  5. Luego, también estando en el editor, busca el script que contiene jQuery, que en tu plantilla se va a ver mas o menos así<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js' type='text/javascript'/> con la posible diferencia de que tengas otra versión y que en el código anterior he resaltado de rojo (versión 1.8.1). Una vez localizado el script con jQuery, pega inmediatamente después lo siguiente: 

    <script type='text/javascript'>

          //<![CDATA[

         $(document).ready(function(){if(!("placeholder"in document.createElement("input"))){$("input[placeholder], textarea[placeholder]").each(function(){var val=$(this).attr("placeholder");if(this.value==""){this.value=val}$(this).focus(function(){if(this.value==val){this.value=""}}).blur(function(){if($.trim(this.value)==""){this.value=val}})});$('form').submit(function(){$(this).find("input[placeholder], textarea[placeholder]").each(function(){if(this.value==$(this).attr("placeholder")){this.value=""}})})}});

          //]]>

        </script>





  6. Verifica en vista previa y si todo luce bien guarda los cambios en "Guardar plantilla".



¡Y listo!, ya habrás personalizado el formulario de contacto de Blogger.





Opción 2. Sin usar jQuery




Si no usas jQuery en tu plantilla, puede ser que usarlo solo para conseguir que el texto aparezca dentro de los campos en navegadores que no soporten el atributo placeholder, no sea la mejor opción para ti.



En tal caso, puedes usar el código CSS que facilito en el paso 2, y estarías personalizando los campos como el elemento textarea (el cuadro donde va el mensaje) . Ten en cuenta que tanto el campo para el nombre como el del correo electrónico no aparecerán uno al lado del otro.



También necesitarás eliminar algunas lineas de CSS que resalté de azul (del paso 2).






Posibles preguntas frecuentes







1. Me gustaría que el botón de enviar apareciera a la izquierda, ¿cómo lo hago?


Respuesta: Busca esta linea de CSS del código que facilito en el paso 2:

.derecha{text-align:center;}

Y cambia:

center por left.



2. Me gustaría que aparecieran los asteriscos en los textos de "Correo electrónico" y en "Mensaje", (que son los campos obligatorios) tal y como aparece en el formulario de contacto por defecto. ¿Cómo lo hago?

Respuesta: Identifica esos textos y que resalté de rojo en el código del paso 4 y agrega el asterisco inmediatamente después de cada texto respectivamente.



Referencias adicionales

Personalizar el Texto de "Placeholder"





miércoles, 12 de junio de 2013

Robots de nuestro propio ego


El primer ordenador que llegó a casa fue cuando tenía 12 años, una sorpresa que llegó un día cualquiera a una hora inesperada. Hasta entonces, estaba acostumbrada a lidiar con el MS-DOS y disquetes con los que pasaba el tiempo jugando como a aquel juego de Indiana Jones donde descubría el arca perdida.

Con la llegada de ese regalo, empecé a descubrir el Universo de Internet o, al menos, de lo que era entonces: la enciclopedia Encarta en un CD dejando de lado a mis disquetes, las páginas web corporativas llenas de información y los chats abiertos en los que hablabas sin darte cuenta de que ya estabas empezando a dejar un rastro que pronto se convertiría en infinito.

Hoy las cosas han cambiado mucho y parece que ese ordenador que entró en nuestras casas cambió la vida de la mayoría de nosotros. Un mundo que se ha convertido en trabajo y pasión, en el que la capacidad de sorprendernos no se pierde ninguno de los días. Siempre hay algo nuevo por descubrir, donde cada vez más, esos libros de Isaac Asimov están más presentes y las órdenes por voz a nuestro querido robot no distan mucho de la realidad.

Hay muchas razones por las que nos gusta nuestro trabajo, pero muchas otras por las que deberíamos recapacitar. Entre tanto discurso de por qué nuestras empresas deben estar en la red y tanta competencia abrumadora con la prestación de servicios digitales, quizá hayamos perdido el rumbo del verdadero significado de lo que supone vivir en la era digital. Por eso, no viene mal empezar por analizarnos a nosotros mismos, individualmente, si somos los que nos dedicamos a ello, ¿no?

La zona de confort. Llenamos la red de posts diariamente con temáticas repetidas y publicadas entre unos y otros, unas veces con cosas nuevas y muchas otras no. Nos dedicamos al autobombo, publicando nuestro contenido aquí, allí y en el más allá. Avasallamos a nuestros seguidores con publicaciones programadas, seguimos para que nos sigan y si no hay intercambio, nos volvemos atrás como perros enfurecidos. En cierto aspecto, somos auténticos robots de nuestro propio ego, donde buscamos posicionarnos como marca personal, en lugar de como personas.

Y entonces, ¿por qué nos dedicamos a ello?

No se vosotros, pero una de las cosas por las que más me atrae esta faceta virtual que está creciendo sin parar, es la posibilidad de que un mundo de oportunidades abre la puerta de todas las casas. El conocimiento se expande, la tecnología y las herramientas son accesibles para todos sin restricciones. Las plataformas de crowdfunding se ponen al servicio nada más que del mundo entero, para hacer que el sueño de alguien se haga realidad, plataformas como las de Global Impact Challenge de Google se ponen en marcha para sacar adelante proyectos por y para el bien social. Cualquiera, tanto individual como colectivamente, a nivel empresarial, organizacional o social, tiene acceso para potenciar aquello para lo que trabaja.

La oportunidad de pintar muchos lienzos en blanco es infinita pero ante todo, nuestra ambición no debe dejarnos una ceguera incurable. Somos personas y trabajamos para ellas con todo lo que esto implica. Que no se nos olvide que estamos para ayudar a aquellos que lo necesitan y ante tantas abrumadoras novedades tecnológicas, la honestidad debe ser nuestro principal ingrediente.

Autora: Naike Calvo. Comunicación y Marketing Digital. Especializada en Big Data. Apasionada de las posibilidades que nos brinda la red.. Puedes encontrarla en y Twitter

lunes, 10 de junio de 2013

Estructura básica de una plantilla HTML5

Actualización: Nueva entrada en el siguiente enlace:

Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger.


Esta entrada es un tanto especial, ya que es complementaria para un vídeotutorial que he realizado y que dentro de estos días publicaré en el blog, en el vídeo construiremos una plantilla en HTML5 y en esta entrada anexaremos la estructura básica y un pequeño ejemplo.

blogger html5, Blogger template HTML5


La estructura de un documento HTML5 es la siguiente (Incluyendo el tipo de codificación necesario para Blogger en la primera línea):
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>


     </head>


    <body>


    </body>
</html>
Si nosotros intentamos guardar este código desde nuestro editor HTML, Blogger nos advertirá que no es posible debido a que no se encuentra una etiqueta b:skin, para solucionarlo incluiremos dicha etiqueta en el <head>:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>
    <b:skin></b:skin> <!-- Hoja de estilos del blog,
           la cual no utilizaremos posteriormente
           debido a que usaremos un archivo externo -->

     </head>


    <body>


    </body>
</html>
Otra vez, si intentamos guardar el código nos aparecerá otro mensaje de error, indicando que debe existir una sección (Para gadgets) dentro de nuestra plantilla, lo solucionamos con una etiqueta b:section y su respectivo identificador:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>
    <b:skin></b:skin>

     </head>


    <body>
    <b:section id="main" /> <!-- Los b:section son secciones para almacenar gadgets -->

    </body>
</html>
Esta sección la utilizaremos posteriormente para incluir las entradas de nuestro blog, de momento es irrelevante pero necesaria para poder guardar el documento.

Sabiendo todo esto, podrán dar el siguiente paso para construir sus propias plantillas en formato HTML5, en la siguiente entrada anexaré el vídeotutorial explicando la forma de convertir todo esto en una plantilla válida, ya que como reitero, esta entrada es complementaria.

domingo, 9 de junio de 2013

Posicionamiento web enfocado a resultados

posicionamiento web

En las sesiones que imparto suelo hacer una pregunta ¿que es para ustedes posicionamiento? La respuesta suele ser siempre la misma, resumiendo, aparecer bien posicionado en los buscadores y realmente no es así. Para mi el posicionamiento web consiste en situarte según tus objetivos en Internet.


La mayoría solemos cometer un grave error a la hora de posicionarnos, vemos la red desde dentro, de tal forma que nuestra visión de ella es parcial, solo contemplamos lo que tenemos al alcance de nuestra visión.

vision parcial posicionamiento web

Realmente debemos abstraernos y tener una visión global de la red y nuestro ecosistema, eso nos permitirá llevar las acciones necesarias para posicionarnos.

vision real posicionamiento web

Además entre todos ayudamos, hablando de blog, redes sociales, aplicaciones, etc, a que la visión de los usuarios sea esta

parcial posicionamiento web

Si ampliamos esta imagen resulta que estamos hablando de presencia en red.

presencia en red

Pero si seguimos ampliando la visión, nos encontramos con lo que realmente significa el posicionamiento web para mí, representado en este timeline.

posicionamiento web
Inserta este timeline en tu sitio
<a href="http://www.pizcos.net/2013/06/posicionamiento-web.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWkHtlUCK_phtdT_Qt8S5Nh0Ry4lAMY0jFEOes982yaTONXNUev0jzbSQUitrmOWGh3vS6MCkYlaBfchMOJIdSIy0fjGnas-rq-7hOrNPb07EDi9UD1XteerL50KZx0_NhlVpuRDx3LQ/s400/Imagen4.png" /></a>

Partiendo de la base que hablamos de posicionamiento a nivel profesional, para marcas o marca personal, de huella digital controlada, debemos plantearnos unos objetivos claros, alcanzables y medibles antes de ni siquiera tener presencia en red. Una vez fijados esos objetivos, pasamos a la fase de análisis, estudiaremos y analizaremos que ocurre en la red con esos objetivos fijados, identificar la competencia, estudiar sus acciones, etc.

A partir de ahí fijamos estrategias y nos planteamos nuestra presencia en red, con un dato significativo que debemos tener en cuenta, redes sociales, blogs o cualquier plataforma son herramientas que usaremos para posicionarnos en la red. Simples herramientas en las cuales fijaremos acciones de acuerdo a nuestros objetivos, a la estrategia planteadas, serán acciones individuales que formen parte de nuestro objetivo global. Cometemos el error de plantear acciones individuales sin fijarnos en ese objetivo, sepamos diferenciar objetivos individuales para alcanzar un objetivo global.

Una vez definida nuestra presencia en red, crearemos contenidos, la red es contenido, texto, video, imágenes, etc. En este momento es cuando si hablamos de posicionamiento de contenidos, de SEO, de SMO e incluso de SEM. Esta es la gran diferencia del posicionamiento web y posicionamiento de contenido, el segundo es una parte del primero, cuando hablamos de posicionamiento web el espectro es mucho mas amplio y no debe confundirse.

Generaremos nuestro ecosistema, donde volcaremos esos contenidos, donde comunicaremos y conversaremos con el resto de usuarios. No hace falta incidir que evidentemente en ese ecosistema y entre esos usuarios que formen parte de el deberá estar nuestro publico objetivo.

De esta forma se logran resultados, si vemos todo el conjunto será mas fácil alcanzarlos, tendemos a realizar acciones individuales perdiendo la visión general, y eso hace que los resultados sean difíciles de conseguir y cuando se consiguen solo sean parciales.

Si realmente queremos posicionar en Internet, es necesario que veamos todo como un conjunto, que usemos las herramientas que se ponen a nuestra disposición pero que nunca perdamos de vista el objetivo marcado.

El posicionamiento web es complejo y necesita de muchos perfiles diferentes y especializados para llevarlo a cabo...

miércoles, 5 de junio de 2013

Texto en burbuja, tachado y al revés en Blogger

En un post antiguo, les había enseñado cómo agregar el efecto de tachado a nuestro texto del blog. Hoy les traigo una herramienta online llamada DiverText que no sólo nos permite añadir ese efecto a nuestro texto (tachado) sino que nos permite agregar el efecto de texto al revés y de texto en burbuja, lo que le dará un toque especial y divertido a nuestros post, como este ejemplo:

H̶o̶l̶a̶
ʎos
Ⓙⓔⓢⓢⓘⓒⓐ

La herramienta es muy sencilla de usar. Lo único que tenemos que hacer es elegir uno de los efectos (tachar texto, voltear texto, texto en burbuja), escribimos nuestro texto en la caja superior y en la caja inferior nos generará el texto con el efecto seleccionado. Finalmente, copiamos el texto y lo pegamos a nuestra entrada de Blogger o a nuestras redes sociales.

DiverText

Big Data, nuestro universo de datos

Big Data

Hablemos de Big Data. Hablemos de lo que es y no es. Parece que nos acabemos de dar cuenta de que los seres humanos y todas aquellas organizaciones de las que formamos parte generamos una cantidad de datos inimaginable, pero lo cierto es que llevamos toda la vida haciéndolo y parece que hoy hemos encontrado nuestro cofre del tesoro.

Es evidente, que la llave que ha abierto la puerta a la posibilidad de recopilar y analizar todo esta información que generamos en nuestro día a día, han sido las nuevas tecnologías. Gracias a ellas, nos encontramos en una situación que nunca antes habíamos estado, un estado de oportunidades que por lo que parece, ha salido a relucir con la masificación de usuarios conectados y activos en las redes sociales. Y aquí viene el primer matiz.

Big Data no son solo los datos que provienen del Social Media sino todos los datos, incluidos los de la red, que provienen de las máquinas y sensores que manejamos, absolutamente toda aquella información que nos ofrece la posibilidad de entender el porqué de las cosas y de nuestros actos. No podemos hablar de un solo tipo de datos sino de un conjunto de datos recopilados a lo largo de nuestra vida, y que hoy tenemos la posibilidad de ordenar y sacar partido.

Parece mucho, ¿verdad?

Pues resulta que el objetivo es aún más ambicioso, porque la razón de ser del Big Data y su verdadera personalidad, se trata de mejorar la vida de las personas tanto a nivel individual como colectivo.

La posibilidad de analizar el comportamiento humano, obtener resultados y anticiparse a las situaciones que se puedan dar ofreciendo algo acorde a cada uno de nosotros, abre un camino por lo menos interesante.

Por supuesto, no es tarea fácil. Intentemos imaginar por un instante a todas las personas que residen en nuestra ciudad. Cada una de ellas desde que se levanta y calienta el café en el micro, hasta que se acuesta y apaga el televisor o cierra su libro para acostarse. Metamos en un saco todos esos datos que hemos generado durante el día y saquémosle partido. Nada fácil, pero tampoco nada que no podamos resolver.

La llave a este universo de datos se centra en estructurar la información incluso antes de que la estemos generando. Primero, centremos la atención en qué tipo de datos queremos obtener y, después, en los objetivos que queremos conseguir utilizando esa gran bolsa de datos. Teniendo en cuenta que los datos hoy se han convertido en infinitos, nuestra ambición no debe estar en el todo sino en lo que verdaderamente nos ayuda a mejorar, en la estrella específica de nuestro universo de datos.

Autora: Naike Calvo. Comunicación y Marketing Digital. Especializada en Big Data. Apasionada de las posibilidades que nos brinda la red.. Puedes encontrarla en y Twitter

domingo, 2 de junio de 2013

Comunidades de Google Plus

Comunidades Google Plus

Ya han pasado algunos meses desde que Google puso en marcha las Comunidades de Google Plus y están demostrando que pueden ser una potente herramienta para generar marca personal, posicionamiento y engagement. Sin embargo, eso esta pasando desapercibido para la gran mayoría de usuarios hispanos, unos por que aun siguen pensando en Google Plus como red social, comparándola con Facebook, y prácticamente no la usan, y otros por que simplemente no las usan correctamente.

Personalmente pertenezco y sigo algunas comunidades pero realmente interactúo profundamente en una de ellas, la comunidad de SEO y Marketing de lengua hispana. Esta comunidad en poco menos de seis meses ya cuenta con más de 5.000 usuarios y se ha posicionado fuertemente en las búsquedas orgánicas de Google.

Si nos paramos a analizar por que esta funcionando tan bien esta comunidad, las razones son muy simples pero es algo que la mayoría de las comunidades no están sabiendo ver. En definitiva creo que no se están usando correctamente las comunidades en G+. Pensemos por un momento que esta haciendo Google en los últimos dos años, perseguir el spam y la manipulación...


Pues en la mayoría de las comunidades en Google Plus los usuarios se dedican a eso, a spammear y ahora con al author rank, intentar manipularlo.

Los autores de las comunidades no están sabiendo leer este planteamiento y los usuarios tampoco, las comunidades se contemplan como sitio de autopromoción de post, intercambio de +1 (algunas incluso se llaman así) y no se interactúa en ellas. Hay un pequeño detalle, muy importante que creo que se les escapa, Google Plus tiene un filtro de spam y si alguien va y postea su recién publicado post en varias de ellas, automáticamente es marcada como posible spam. Si uno visita el muro de cualquier de esos usuario vera la misma publicación repetida X veces... eso es spam.

Sobre lo de "obligar" a dar +1 ni lo comento...

Cuando el propio Google te esta catalogando como spammer y dando la posibilidad a los usuarios que te denuncien, hay otro pequeño detalle que parece no tenerse en cuenta, se arrastra esa "etiqueta" (la de spammer) a todo el conjunto de productos que estén usando ese perfil, es decir puede afectar a tu sitio web, a tu posicionamiento en general... Que no estamos hablando de solo Google Plus si no de Google, seamos conscientes de eso, si eres un spammer en Google Plus, lo eres en todo Google. Luego vendrán los llantos... pretendemos posicionar, visibilidad, viralidad, etc y conseguimos todo lo contrario, paradojas.

En la comunidad de la que os hablaba antes, SEO y Marketing, se establecieron unas pocas normas básicas, y pienso que ahí reside básicamente su éxito. Desde el principio no permitimos publicaciones propias de nadie, incluidos los moderadores, la comunidad se planteo como sitio de ayuda, de compartir lo poco o mucho que sabemos pero con contenidos exclusivos o contenidos de terceros realmente interesantes y que aportan valor, de lo contrario también se eliminan, en definitiva intentamos entre todos aportar y sumar. Eso nos esta costando mucho trabajo de moderación, muchas son las publicaciones que a diario eliminamos, pero antes avisamos a sus autores, le pedimos que retiren ellos mismos sus contenidos y si no lo hacen, lo hacemos nosotros. Los reincidentes son baneados y denunciados por spammer, algo que me desagrada profundamente pero es que si avisas a alguien de lo que esta haciendo, pasa de ti y al día siguiente vuelve a hacerlo ¿merece la pena que este en G+? yo creo que no...

Con estos planteamientos, cada día se suman a ella nuevos usuarios, se comparte, se pregunta y se interactúa en los +1 y comentarios de forma natural y eso si ayuda a posicionar y crear marca personal. Incluso realizamos todos los jueves un hangout público donde tratamos diferentes temas relacionados e invitamos a todos a participar, presencialmente si lo desean o a través de comentarios. Y la formula funciona. No es necesario el autobombo, para eso ya tenemos nuestros muros y recordad que la autoridad en Google no se consigue solo por tener muchas visitas en un post, también suma el valor que te dan los que comentan, comparten, etc...

Una comunidad en Google Plus genera mucho trabajo pero si las usamos convenientemente sus beneficios son mucho mayores que las actuaciones que podamos realizar en cualquier otra plataforma social...